/* ===========================================================
   Connecting Tribe — Early Access form
   Bold doodle / sticker style: orange, red, yellow, black & white
   =========================================================== */

:root{
  --orange:#FF6A13;
  --orange-dark:#E2570A;
  --red:#E8362B;
  --red-dark:#B82418;
  --yellow:#FFD400;
  --ink:#14151C;
  --white:#ffffff;
  --paper:#FBFAF6;
  --gray:#4b4b52;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; min-height:100%; }

body{
  font-family:'Baloo 2', system-ui, sans-serif;
  background:var(--orange);
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* floating decorative doodles */
.floaty{
  position:fixed;
  z-index:2;
  pointer-events:none;
  font-size:2rem;
  opacity:.95;
  animation: bob 5s ease-in-out infinite;
  user-select:none;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.floaty-star1{ top:6%; left:5%; color:var(--white); font-size:2.3rem; animation-delay:.2s; }
.floaty-star2{ top:16%; right:6%; color:var(--yellow); font-size:1.8rem; animation-delay:1.1s; }
.floaty-zig1{ bottom:22%; left:4%; color:var(--yellow); font-size:2.2rem; animation-delay:.6s; }
.floaty-dot1{ top:42%; left:2%; width:14px; height:14px; border-radius:50%; background:var(--red); border:3px solid var(--ink); filter:none; animation-delay:.3s; }
.floaty-dot2{ bottom:12%; right:5%; width:18px; height:18px; border-radius:50%; background:var(--white); border:3px solid var(--ink); filter:none; animation-delay:1.4s; }
.floaty-pencil{ bottom:6%; left:46%; font-size:1.7rem; color:var(--ink); animation-delay:.9s; }

@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-12px) rotate(8deg); }
}

.page{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:16px auto 0;
  background:var(--paper);
  border:5px solid var(--ink);
  border-radius:30px;
  box-shadow: var(--shadow-lg);
  padding: 26px 18px 30px;
}

/* ---------- hero ---------- */
.hero{ text-align:center; margin-bottom: 20px; }

.hero-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  position:relative;
  margin-bottom: 10px;
}

.logo-badge{
  width:74px;
  height:74px;
  object-fit:contain;
  background:var(--white);
  border-radius:50%;
  border:4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding:6px;
}

.badge-sticker{
  position:absolute;
  right:-4px;
  top:-22px;
  background:var(--yellow);
  color:var(--ink);
  font-weight:800;
  letter-spacing:.5px;
  font-size:.72rem;
  line-height:1.25;
  text-align:center;
  padding:9px 8px;
  border-radius:16px;
  border:3px solid var(--ink);
  transform: rotate(9deg);
  box-shadow: 3px 3px 0 var(--ink);
}

.badge-arrow{
  position:absolute;
  right:70px;
  top:-6px;
  font-size:1.6rem;
  color:var(--ink);
  transform: rotate(-10deg) scaleX(-1);
}

.hero-title{
  font-family:'Permanent Marker', cursive;
  font-weight:400;
  font-size: 2.9rem;
  line-height:1.02;
  letter-spacing:.5px;
  color:var(--ink);
  margin: 10px 0 12px;
}
.hero-title span{ color:var(--red); }

.hero-lead{
  max-width:400px;
  margin:0 auto;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--gray);
}

/* ---------- why strip ---------- */
.why-strip{
  display:flex;
  gap:10px;
  margin: 22px 0 24px;
}

.why-card{
  position:relative;
  flex:1;
  border:3px solid var(--ink);
  border-radius:16px;
  padding:14px 26px 16px 12px;
  text-align:left;
  box-shadow: var(--shadow-sm);
  color:var(--white);
  overflow:hidden;
}
.why-orange{ background:var(--orange); }
.why-red{ background:var(--red); }
.why-yellow{ background:var(--yellow); color:var(--ink); }

.why-icon{ width:26px; height:26px; margin-bottom:8px; }
.why-icon svg{ width:100%; height:100%; }
.why-card h3{ margin:0 0 3px; font-size:.85rem; letter-spacing:.2px; }
.why-card p{ margin:0; font-size:.72rem; font-weight:600; opacity:.95; line-height:1.3; }

.why-arrow{
  position:absolute;
  right:8px;
  bottom:8px;
  font-weight:800;
  font-size:.85rem;
  opacity:.8;
}

/* ---------- card ---------- */
.card{
  background:var(--white);
  border:4px solid var(--ink);
  border-radius:26px;
  padding:26px 22px 28px;
  box-shadow: var(--shadow);
  position:relative;
}

.card::before{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:14px; height:14px;
  background:var(--yellow);
  border:3px solid var(--ink);
  border-radius:50%;
}
.card::after{
  content:"";
  position:absolute;
  bottom:16px; left:16px;
  width:10px; height:10px;
  background:var(--red);
  border:3px solid var(--ink);
  border-radius:50%;
}

.card-title{
  font-family:'Permanent Marker', cursive;
  font-weight:400;
  font-size:1.7rem;
  letter-spacing:.3px;
  color:var(--red);
  margin:0 0 4px;
}

.card-sub{
  margin:0 0 20px;
  font-weight:600;
  color:#3a3a3a;
}

.field{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field label{
  font-weight:800;
  font-size:.95rem;
  color:var(--ink);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select{
  font-family:inherit;
  font-size:1rem;
  padding:12px 14px;
  border:3px solid var(--ink);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  outline:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.field input::placeholder{ color:#8a8a8a; }

.field input:focus,
.field select:focus{
  background:var(--white);
  box-shadow: 3px 3px 0 var(--orange);
  transform: translate(-2px,-2px);
}

.field input.invalid,
.field select.invalid{
  border-color:var(--red);
  box-shadow: 3px 3px 0 var(--red);
}

.field select{ appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M2 5l6 6 6-6' stroke='%2314151C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position: right 14px center;
  padding-right:36px;
}

.error{
  min-height:16px;
  color:var(--red-dark);
  font-weight:700;
  font-size:.82rem;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  opacity:0;
}

/* choice buttons (Yes / No / Maybe) */
.choice-group{ display:flex; gap:10px; flex-wrap:wrap; }
.choice-btn{ position:relative; flex:1 1 90px; }

.choice-btn input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}

.choice-btn span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:12px 8px;
  border:3px solid var(--ink);
  border-radius:14px;
  font-weight:800;
  background:var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

.choice-btn span i{
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid currentColor;
  font-size:.75rem;
  line-height:1;
}

.choice-btn input:hover + span{ transform: translate(-2px,-2px); }

.choice-btn input:checked + span{
  background:var(--red);
  color:var(--white);
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.choice-btn input:focus-visible + span{
  outline: 3px dashed var(--red);
  outline-offset:2px;
}

.form-banner{
  margin:4px 0 16px;
  padding:10px 14px;
  border:3px solid var(--ink);
  border-radius:12px;
  background:#FFE1DE;
  color:#9A1B12;
  font-weight:800;
  text-align:center;
}

/* submit button */
.submit-btn{
  width:100%;
  font-family:'Permanent Marker', cursive;
  font-size:1.35rem;
  letter-spacing:.5px;
  color:var(--white);
  background:var(--red);
  border:4px solid var(--ink);
  border-radius:16px;
  padding:14px 10px;
  cursor:pointer;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.submit-btn:hover{
  background:var(--red-dark);
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 var(--ink);
}

.submit-btn:active,
.submit-btn.is-pressed{
  transform: translate(4px,4px);
  box-shadow: 2px 2px 0 var(--ink);
}

.submit-btn:disabled{ cursor:not-allowed; opacity:.75; }

.btn-arrow{
  width:22px; height:22px;
  flex-shrink:0;
  animation: nudge 1.4s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(4px); }
}

/* success panel */
.success-panel{ text-align:center; padding: 10px 6px 4px; }

.success-burst{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  margin:0 auto;
  color:var(--white);
  background:var(--red);
  border:4px solid var(--ink);
  border-radius:50%;
  box-shadow: var(--shadow-sm);
  animation: pop .4s ease;
}
.success-burst svg{ width:34px; height:34px; }

@keyframes pop{
  0%{ transform: scale(.5); opacity:0; }
  100%{ transform: scale(1); opacity:1; }
}

.success-title{
  font-family:'Permanent Marker', cursive;
  font-weight:400;
  font-size:1.4rem;
  color:var(--ink);
  margin:16px 0 4px;
}
.success-sub{ font-weight:700; margin:0 0 10px; color:var(--gray); }

.loader-dots{ display:flex; gap:8px; justify-content:center; }
.loader-dots span{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--red);
  border:2px solid var(--ink);
  animation: dotBounce 1s infinite ease-in-out;
}
.loader-dots span:nth-child(2){ animation-delay:.15s; background:var(--yellow); }
.loader-dots span:nth-child(3){ animation-delay:.3s; background:var(--orange); }

@keyframes dotBounce{
  0%,80%,100%{ transform: translateY(0); }
  40%{ transform: translateY(-8px); }
}

.shake{ animation: shake .35s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

/* ---------- footer ---------- */
.footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding: 26px 16px 34px;
  color:var(--white);
}
.footer-logo{
  width:38px; height:38px;
  border-radius:50%;
  border:3px solid var(--white);
  background:var(--white);
  object-fit:contain;
  padding:4px;
  margin-bottom:8px;
}
.footer p{ margin:0; font-weight:700; }
.footer .heart{ color:var(--yellow); }

/* ---------- responsive ---------- */
@media (max-width: 420px){
  .hero-title{ font-size:2.3rem; }
  .card{ padding:20px 16px 22px; border-radius:22px; }
  .choice-btn{ flex:1 1 100%; }
  .why-strip{ flex-wrap:wrap; }
  .why-card{ flex:1 1 calc(50% - 5px); }
  .badge-sticker{ font-size:.62rem; padding:7px 6px; }
}