/* ============================================================
   TwatNav — landing page
   Aesthetic: nocturnal sat-nav. Ink-violet ground, warm cream
   type, coral pin + chartreuse route. Wonky editorial serif
   against a technical mono. Map-grid texture, radar pulses.
   ============================================================ */

:root{
  --ink:        #170C21;
  --ink-2:      #21102F;
  --ink-3:      #2C1740;
  --cream:      #F5E9DC;
  --cream-dim:  #C7B4B0;
  --coral:      #FF5A4E;
  --route:      #D8F35B;
  --lilac:      #C39BFF;

  --edge:       rgba(245,233,220,.14);
  --grid:       rgba(245,233,220,.045);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", sans-serif;
  --mono:    "Martian Mono", ui-monospace, monospace;

  --shell: min(1240px, 92vw);
  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(195,155,255,.20), transparent 60%),
    radial-gradient(90% 60% at 8% 104%, rgba(255,90,78,.16), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 64px 100%,
    var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* film grain over the whole page */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9;
  opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

::selection{ background:var(--coral); color:var(--ink); }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--route);
  outline-offset:3px;
  border-radius:2px;
}

/* ───────────────────────── topbar ───────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  width:var(--shell); margin-inline:auto;
  padding:1.15rem 0;
  background:linear-gradient(var(--ink) 55%, transparent);
}

.wordmark{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display);
  font-size:1.5rem; font-weight:900; letter-spacing:-.02em;
  text-decoration:none;
}
/* italic Fraunces carries a wide left side bearing — pull it back
   so the wordmark reads as one compound, not "Twat Nav" */
.wordmark em{ font-style:italic; font-weight:600; color:var(--coral); margin-left:-.09em; }
.wordmark .pin{ width:1.05em; height:1.05em; fill:var(--coral); }
.wordmark .pin-dot{ fill:var(--ink); }

.topbar nav{
  display:flex; align-items:center; gap:2rem;
  font-size:.82rem; letter-spacing:.02em;
}
.topbar nav a{ text-decoration:none; color:var(--cream-dim); transition:color .25s; }
.topbar nav a:hover{ color:var(--cream); }

.btn-mini{
  padding:.5rem 1rem;
  border:1px solid var(--edge); border-radius:999px;
  color:var(--cream) !important;
  transition:background .3s var(--ease), border-color .3s, color .3s;
}
.btn-mini:hover{ background:var(--route); border-color:var(--route); color:var(--ink) !important; }

/* ───────────────────────── hero ───────────────────────── */
.hero{
  position:relative;
  width:var(--shell); margin:clamp(2rem,6vw,5rem) auto clamp(3rem,7vw,6rem);
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
}

/* radar rings behind the phone */
.radar{
  position:absolute; right:14%; top:44%;
  width:min(46vw,560px); aspect-ratio:1;
  translate:50% -50%; pointer-events:none;
}
.radar span{
  position:absolute; inset:0;
  border:1px solid rgba(216,243,91,.28); border-radius:50%;
  animation:pulse 5.5s var(--ease) infinite;
}
.radar span:nth-child(2){ animation-delay:1.8s; }
.radar span:nth-child(3){ animation-delay:3.6s; }
@keyframes pulse{
  0%   { transform:scale(.28); opacity:0; }
  18%  { opacity:.85; }
  100% { transform:scale(1); opacity:0; }
}

.hero-copy > *{ animation:rise .9s var(--ease) both; }
.hero-copy > :nth-child(2){ animation-delay:.08s; }
.hero-copy > :nth-child(3){ animation-delay:.18s; }
.hero-copy > :nth-child(4){ animation-delay:.26s; }
.hero-copy > :nth-child(5){ animation-delay:.34s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 1.4rem;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--route);
}
.blip{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--route); box-shadow:0 0 0 0 rgba(216,243,91,.6);
  animation:blip 2s ease-out infinite;
}
@keyframes blip{ to{ box-shadow:0 0 0 12px rgba(216,243,91,0); } }

h1{
  margin:0 0 1.6rem;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(3.2rem,8.4vw,7rem);
  line-height:.88;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
h1 span{ display:block; }
h1 .l2{ padding-left:.14em; color:var(--coral); }
h1 .l3{ padding-left:.05em; }
h1 em{
  font-style:italic; font-weight:600; color:var(--route);
  position:relative; white-space:nowrap;
}
h1 em::after{  /* hand-drawn route underline */
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.02em;
  height:.09em; border-radius:99px; background:var(--route);
  transform-origin:left; animation:draw 1.1s .8s var(--ease) both;
}
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.lede{
  max-width:46ch; margin:0 0 2rem;
  font-size:1.06rem; color:var(--cream-dim);
}

.microcopy{
  margin:1rem 0 0;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.06em; color:rgba(199,180,176,.65);
}

/* ── signup form ── */
.signup{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.5rem;
  max-width:32rem;
}
.signup input{
  flex:1 1 15rem; min-width:0;
  padding:.95rem 1.2rem;
  font-family:var(--body); font-size:.95rem;
  color:var(--cream);
  background:rgba(245,233,220,.05);
  border:1px solid var(--edge); border-radius:999px;
  transition:border-color .3s, background .3s;
}
.signup input::placeholder{ color:rgba(199,180,176,.5); }
.signup input:focus{ outline:none; border-color:var(--route); background:rgba(245,233,220,.08); }
.signup button{
  padding:.95rem 1.6rem;
  font-family:var(--body); font-size:.95rem; font-weight:700;
  color:var(--ink); background:var(--coral);
  border:none; border-radius:999px; cursor:pointer;
  transition:transform .3s var(--ease), background .3s, box-shadow .3s;
}
.signup button:hover{
  background:var(--route);
  transform:translateY(-2px);
  box-shadow:0 10px 30px -12px rgba(216,243,91,.7);
}
.signup button:active{ transform:translateY(0); }
.form-note{
  flex:1 0 100%; min-height:1.2em;
  margin:.3rem 0 0; padding-left:1.2rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em;
  color:var(--route);
}
.form-note.err{ color:var(--coral); }

/* ── the phone shot ── */
.shot{ position:relative; margin:0; justify-self:end; }

.shot-frame{
  position:relative;
  width:min(340px,72vw); aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid var(--edge); border-radius:26px;
  background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  box-shadow:0 46px 90px -40px rgba(0,0,0,.9), 0 0 0 8px rgba(245,233,220,.03);
  rotate:-3.2deg;
  animation:float 9s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }
.shot-frame img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* fallback shown only if the image is missing */
.shot-frame .placeholder{ display:none; }
.shot-frame.no-img .placeholder{
  display:grid; place-content:center; gap:1rem; justify-items:center;
  height:100%; padding:2rem; text-align:center;
  font-family:var(--mono); font-size:.66rem; line-height:1.9;
  letter-spacing:.06em; color:var(--cream-dim);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px,32px 32px;
}
.placeholder code{ color:var(--route); }
.ph-pin{
  width:34px; height:34px; border-radius:50% 50% 50% 4px;
  rotate:-45deg; background:var(--coral);
  box-shadow:0 0 0 10px rgba(255,90,78,.12);
}

.shot figcaption{
  display:flex; align-items:center; gap:.5rem;
  margin-top:1.4rem; padding-left:.4rem;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.08em; color:rgba(199,180,176,.6);
}
.tick{ width:1.6rem; height:1px; background:var(--coral); }

/* ───────────────────────── ticker ───────────────────────── */
.ticker{
  overflow:hidden;
  padding:.9rem 0;
  border-block:1px solid var(--edge);
  background:rgba(245,233,220,.02);
}
.ticker-track{
  display:flex; align-items:center; gap:2.5rem;
  width:max-content;
  animation:slide 42s linear infinite;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim); white-space:nowrap;
}
.ticker .dot{ width:5px; height:5px; border-radius:50%; background:var(--coral); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ───────────────────────── section furniture ───────────────────────── */
.section-title{
  display:flex; align-items:baseline; gap:1rem;
  margin:0 0 3rem;
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.02em;
}
.section-title span{
  font-family:var(--mono); font-style:normal; font-weight:400;
  font-size:.66rem; letter-spacing:.14em; color:var(--coral);
}
.section-title.alt span{ color:var(--ink); }

/* ── how ── */
.how{ width:var(--shell); margin:clamp(4rem,9vw,8rem) auto; }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--edge);
  border:1px solid var(--edge); border-radius:20px; overflow:hidden;
}
.steps li{
  padding:clamp(1.8rem,3vw,2.8rem);
  background:var(--ink);
  transition:background .4s var(--ease);
}
.steps li:hover{ background:var(--ink-2); }
.num{
  display:grid; place-content:center;
  width:2.4rem; height:2.4rem; margin-bottom:1.6rem;
  font-family:var(--mono); font-size:.72rem;
  color:var(--route);
  border:1px solid rgba(216,243,91,.4); border-radius:50%;
}
.steps h3, .safety-grid h3{
  margin:0 0 .7rem;
  font-family:var(--display); font-weight:600;
  font-size:1.3rem; letter-spacing:-.02em;
}
.steps p, .safety-grid p{ margin:0; color:var(--cream-dim); font-size:.94rem; }

/* ── everyone (inverted slab) ── */
.everyone{
  padding:clamp(4rem,9vw,7.5rem) 0;
  background:var(--cream); color:var(--ink);
}
.everyone-inner{ width:var(--shell); margin-inline:auto; }
.big-statement{
  max-width:34ch;
  margin:0 0 2.6rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.7vw,2.9rem);
  line-height:1.22; letter-spacing:-.025em;
}
.big-statement em{
  font-style:italic; font-weight:600;
  background:linear-gradient(transparent 62%, rgba(255,90,78,.35) 62%);
}
.chips{
  list-style:none; margin:0 0 2.4rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
  max-width:56rem;
}
.chips li{
  padding:.45rem 1rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.04em;
  border:1px solid rgba(23,12,33,.22); border-radius:999px;
  transition:background .3s, color .3s, border-color .3s;
}
.chips li:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.footnote{
  max-width:52ch; margin:0;
  font-size:.9rem; color:rgba(23,12,33,.66);
  border-left:2px solid var(--coral); padding-left:1.1rem;
}

/* ── safety ── */
.safety{ width:var(--shell); margin:clamp(4rem,9vw,8rem) auto; }
.safety-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.6rem);
}
.safety-grid article{
  padding:clamp(1.6rem,2.6vw,2.2rem);
  border:1px solid var(--edge); border-radius:18px;
  background:linear-gradient(150deg, rgba(245,233,220,.045), transparent 70%);
  transition:transform .45s var(--ease), border-color .45s;
}
.safety-grid article:hover{ transform:translateY(-5px); border-color:rgba(216,243,91,.4); }

/* ── waitlist ── */
.waitlist{
  width:var(--shell); margin:clamp(4rem,9vw,8rem) auto;
  padding:clamp(2.6rem,6vw,5rem);
  border:1px solid var(--edge); border-radius:28px;
  background:
    radial-gradient(90% 130% at 88% 0%, rgba(255,90,78,.18), transparent 62%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.waitlist-inner{ max-width:42rem; }
.waitlist h2{
  margin:0 0 1.2rem;
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.1rem,5vw,3.6rem); line-height:1;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.signup.big input, .signup.big button{ padding:1.1rem 1.6rem; font-size:1rem; }

/* ───────────────────────── footer ───────────────────────── */
footer{
  width:var(--shell); margin-inline:auto;
  padding:2.6rem 0 3.4rem;
  border-top:1px solid var(--edge);
  display:grid; grid-template-columns:1fr auto; gap:1.4rem 2rem;
  align-items:start;
}
.foot-brand p{ margin:.4rem 0 0; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--cream-dim); }
.wordmark.small{ font-size:1.15rem; }
.foot-links{ display:flex; gap:1.6rem; font-size:.82rem; }
.foot-links a{ color:var(--cream-dim); text-decoration:none; transition:color .25s; }
.foot-links a:hover{ color:var(--route); }
.copyright{
  grid-column:1/-1; margin:0;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.07em;
  color:rgba(199,180,176,.45);
}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .shot{ justify-self:start; }
  .radar{ right:8%; top:78%; }
  .steps{ grid-template-columns:1fr; }
  .safety-grid{ grid-template-columns:1fr; }
  .topbar nav a:not(.btn-mini){ display:none; }
}
@media (max-width:560px){
  footer{ grid-template-columns:1fr; }
  .foot-links{ flex-wrap:wrap; gap:1rem; }
  .signup button{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}