.hero{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.glow{ position:absolute; border-radius:50%; filter:blur(60px); transition:transform 0.4s var(--ease-out-snap); will-change:transform; }
.glow-a{ width:60vw; height:60vw; max-width:760px; max-height:760px; top:-18%; right:-12%; background:radial-gradient(circle at 40% 40%, color-mix(in oklab, var(--teal) 45%, transparent), transparent 70%); }
.glow-b{ width:40vw; height:40vw; max-width:520px; max-height:520px; bottom:-14%; left:-8%; background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--violet) 38%, transparent), transparent 70%); }

.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr; align-items:center; gap:20px;
  padding-top:clamp(20px,3.5vw,36px); padding-bottom:24px;
  transition:transform 0.15s linear, opacity 0.15s linear; will-change:transform, opacity;
}
@media(min-width:860px){ .hero-grid{ grid-template-columns:7fr 5fr; gap:20px; } }

.hero-copy h1{ font-size:clamp(1.7rem,4vw,2.8rem); line-height:1.05; letter-spacing:-0.01em; }
.hero-copy h1 em{ font-style:italic; color:var(--teal-deep); font-weight:400; }
.word{ display:inline-block; opacity:0; transform:translateY(0.5em); filter:blur(3px); }
.hero.in .word{ animation:riseIn 0.7s var(--ease-out-snap) forwards; }
@keyframes riseIn{ to{ opacity:1; transform:translateY(0); filter:blur(0); } }

.hero-copy p.lead{ max-width:46ch; font-size:0.95rem; color:var(--taupe); margin-top:10px; opacity:0; transform:translateY(8px); transition:opacity 0.6s ease 0.55s, transform 0.6s ease 0.55s; }
.hero.in .hero-copy p.lead{ opacity:1; transform:translateY(0); }

.ask-field{
  margin-top:16px; max-width:440px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line); padding-bottom:8px;
  opacity:0; transform:translateY(8px); transition:opacity 0.6s ease 0.75s, transform 0.6s ease 0.75s, border-color 0.2s ease;
}
.hero.in .ask-field{ opacity:1; transform:translateY(0); }
.ask-field:focus-within{ border-color:var(--teal-deep); }
.ask-field input{ flex:1; border:none; background:none; outline:none; color:var(--ink); font-family:"Instrument Sans",sans-serif; font-size:1.02rem; }
.ask-field input::placeholder{ color:var(--taupe); }
.ask-field button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ask-field:hover button, .ask-field:focus-within button{ background:var(--teal-deep); border-color:var(--teal-deep); color:var(--paper); }

.hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:140px; }
.blob-shadow{
  position:absolute; width:78%; aspect-ratio:1.15/1; bottom:6%;
  background:color-mix(in oklab, var(--ink) 14%, transparent); filter:blur(24px);
  border-radius:50% 50% 46% 54% / 56% 48% 52% 44%; opacity:0; transition:opacity 0.8s ease 0.4s;
}
.hero.in .blob-shadow{ opacity:1; }
.mascot-wrap{ position:relative; width:min(60%,150px); transform:scale(0.85); opacity:0; transition:transform 0.8s var(--ease-out-back) 0.3s, opacity 0.6s ease 0.3s; }
.hero.in .mascot-wrap{ transform:scale(1); opacity:1; }
.mascot{ width:100%; height:auto; display:block; animation:float 4.5s ease-in-out infinite; will-change:transform; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.match-tag{
  position:absolute; top:6%; right:2%; font-family:"IBM Plex Mono",monospace; font-size:0.68rem; color:var(--paper);
  background:var(--ink); padding:5px 10px; border-radius:100px; opacity:0; transform:translateY(-6px);
  transition:opacity 0.5s ease 1.1s, transform 0.5s ease 1.1s;
}
.hero.in .match-tag{ opacity:1; transform:translateY(0); }

.scroll-cue{
  position:relative; z-index:2; text-align:center; padding-bottom:20px;
  font-family:"IBM Plex Mono",monospace; font-size:0.68rem; color:var(--taupe); letter-spacing:0.1em; text-transform:uppercase;
  opacity:0; transition:opacity 0.6s ease 1.3s;
}
.hero.in .scroll-cue{ opacity:1; }
.scroll-cue .arrow{ display:inline-block; animation:bob 1.6s ease-in-out infinite; margin-left:6px; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ---- trust band ---- */
.trust-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.trust-band .wrap{ padding:16px clamp(20px,5vw,64px); display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; }
.trust-band span{ font-family:"IBM Plex Mono",monospace; font-size:0.76rem; color:var(--taupe); }
.trust-band strong{ color:var(--ink); }

/* ---- how it works ---- */
.category-grid-section{ padding-top:clamp(40px,7vw,72px); padding-bottom:clamp(40px,7vw,72px); }
.category-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media(min-width:620px){ .category-cards{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px){ .category-cards{ grid-template-columns:repeat(var(--category-cols,4),1fr); } }
.category-card{
  background:var(--paper); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:28px 14px; text-decoration:none; color:var(--ink); transition:background var(--m-instant,0.15s) ease;
}
.category-card:hover{ background:var(--surface); }
.category-card-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--accent) 16%, var(--paper)); color:var(--accent);
  transition:transform var(--m-instant,0.15s) ease;
}
.category-card:hover .category-card-icon{ transform:scale(1.06); }
.category-card-icon svg{ width:26px; height:26px; flex-shrink:0; }
.category-card span{ font-size:0.86rem; line-height:1.25; color:var(--ink); }

.trust-features{ display:grid; grid-template-columns:1fr; gap:24px; padding-top:clamp(32px,6vw,56px); padding-bottom:clamp(56px,9vw,96px); }
@media(min-width:760px){ .trust-features{ grid-template-columns:repeat(3,1fr); } }
.trust-feature{ display:flex; align-items:flex-start; gap:14px; }
.trust-feature svg{ width:32px; height:32px; flex-shrink:0; color:var(--teal-deep); }
.trust-feature h3{ font-size:1rem; margin-bottom:4px; }
.trust-feature p{ color:var(--taupe); font-size:0.88rem; }

.how{ padding-top:clamp(56px,9vw,100px); padding-bottom:clamp(56px,9vw,100px); }
.how-steps{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:40px; }
@media(min-width:760px){ .how-steps{ grid-template-columns:repeat(3,1fr); } }
.how-step{ display:flex; flex-direction:column; gap:10px; }
.how-step .n{ font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color:var(--teal-deep); }
.how-step h3{ font-size:1.25rem; }
.how-step p{ color:var(--taupe); font-size:0.95rem; }

@media (prefers-reduced-motion: reduce){
  .word{ animation:none !important; opacity:1; transform:none; filter:none; }
  .mascot{ animation:none; }
  .scroll-cue .arrow{ animation:none; }
  .hero-grid{ transition:none; }
}