/* ============================================================
   HaaMee — Harbor design system
   Tokens mirror packages/ui/src/tokens.css (brand source of truth)
   ============================================================ */
:root{
  /* Ground */
  --ink:        #0d171c;   /* primary dark ground */
  --ink-deep:   #081116;   /* deepest, footer */
  --ink-2:      #0e1d26;   /* dusk gradient start */
  --ink-3:      #102b33;   /* dusk gradient end / raised panels */
  --panel:      #11222a;   /* card on ink */
  --panel-2:    #152a32;   /* raised card */
  --hairline:   rgba(127,212,196,0.14);
  --hairline-soft: rgba(237,244,243,0.08);

  /* Brand */
  --teal:       #7fd4c4;   /* sea-glass — brand / press / "where you are" */
  --teal-bright:#9ce4d6;
  --teal-deep:  #2f9482;   /* teal that passes contrast on light grounds */
  --teal-glow:  rgba(127,212,196,0.30);

  /* The light */
  --cream:      #f6ecd2;   /* the beam */
  --cream-soft: rgba(246,236,210,0.14);

  /* Text on ink */
  --text:       #edf4f3;
  --text-dim:   rgba(237,244,243,0.68);
  --text-faint: rgba(237,244,243,0.44);

  /* Warm light section */
  --parchment:  #f4eddf;
  --parchment-2:#fbf6ec;
  --on-parch:   #142026;   /* body text on parchment */
  --on-parch-dim: #4a5a5e;
  --parch-line: rgba(20,32,38,0.12);

  /* Status — green ONLY for "system says OK"; amber/red only inside product UI */
  --ok:         #57c98a;
  --amber:      #e9a13a;
  --red:        #c33b2e;

  /* Type */
  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans:  "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 16px;
  --radius-lg: 24px;
  --section-y: clamp(72px, 10vw, 132px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:6px; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.08; margin:0; letter-spacing:-0.01em; }
h2{ font-size:clamp(30px,4.4vw,52px); }
h3{ font-size:clamp(22px,2.4vw,29px); line-height:1.16; }
p{ margin:0; text-wrap:pretty; }
.lede{ font-size:clamp(19px,1.7vw,23px); line-height:1.5; color:var(--text-dim); }

.eyebrow{
  font-family:var(--sans); font-weight:600;
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--teal); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--teal); border-radius:2px; display:inline-block; }
.on-parch .eyebrow{ color:var(--teal-deep); }
.on-parch .eyebrow::before{ background:var(--teal-deep); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.sec-pad{ padding-block:var(--section-y); }
.stack-lg > * + *{ margin-top:28px; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:16px;
  padding:15px 26px; border-radius:13px; border:1.5px solid transparent;
  cursor:pointer; min-height:52px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-align:center;
}
.btn-primary{
  background:var(--teal); color:#06231d; border-color:var(--teal);
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -10px var(--teal-glow);
}
.btn-primary:hover{ background:var(--teal-bright); border-color:var(--teal-bright); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 16px 40px -12px var(--teal-glow); }
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--hairline);
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-bright); transform:translateY(-2px); }
.on-parch .btn-ghost{ color:var(--on-parch); border-color:var(--parch-line); }
.on-parch .btn-ghost:hover{ border-color:var(--teal-deep); color:var(--teal-deep); }
.btn-lg{ font-size:17px; padding:18px 32px; min-height:58px; }
.nav .btn{ white-space:nowrap; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,23,28,0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{ border-bottom-color:var(--hairline-soft); background:rgba(10,18,22,0.88); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:34px; height:34px; }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:23px; letter-spacing:-0.01em; }
.brand-name .dot{ color:var(--cream); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:15px; color:var(--text-dim); font-weight:500; transition:color .2s; white-space:nowrap; }
.nav-links a:hover{ color:var(--teal); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav .btn{ padding:11px 18px; min-height:44px; font-size:15px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 78% 8%, var(--ink-3) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.hero-beam{
  position:absolute; pointer-events:none; z-index:0;
  width:min(820px,90vw); height:min(820px,90vw); border-radius:50%;
  left:50%; top:-12%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(246,236,210,0.16) 0%, rgba(246,236,210,0.06) 32%, transparent 62%);
  filter:blur(8px);
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px,5vw,72px); align-items:center; padding-block:clamp(48px,7vw,84px) clamp(64px,9vw,108px); }
.hero-logo{ width:min(440px,82%); height:auto; margin-bottom:30px; filter:drop-shadow(0 14px 40px rgba(0,0,0,0.5)); }
.hero-tag{
  font-family:var(--sans); font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  font-size:14px; color:var(--teal); margin-bottom:26px;
}
.hero h1{ font-size:clamp(34px,4.7vw,58px); line-height:1.04; margin-bottom:22px; max-width:16ch; }
.hero h1 .beam-word{ color:var(--cream); position:relative; }
.hero-sub{ font-size:clamp(18px,1.6vw,21px); color:var(--text-dim); max-width:48ch; line-height:1.5; margin-bottom:34px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-trust{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--text-faint); font-size:14.5px; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust .tick{ color:var(--teal); font-weight:700; }
.hero-visual{ position:relative; display:flex; justify-content:center; }

@media (max-width:920px){
  .hero-inner{ grid-template-columns:1fr; gap:8px; text-align:left; }
  .hero-visual{ margin-top:46px; }
  .hero-logo{ width:min(380px,78%); }
}

/* ============================================================
   PHONE FRAME (live + screenshot)
   ============================================================ */
.phone{
  position:relative; width:300px; max-width:80vw;
  border-radius:38px; padding:11px;
  background:linear-gradient(155deg,#1c2b32,#0a1318);
  box-shadow:
    0 1px 1px rgba(255,255,255,0.06) inset,
    0 40px 80px -28px rgba(0,0,0,0.7),
    0 0 0 1px rgba(127,212,196,0.10);
}
.phone::before{ /* speaker notch */
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:84px; height:6px; border-radius:6px; background:rgba(0,0,0,0.5); z-index:3;
}
.phone-screen{
  border-radius:29px; overflow:hidden; background:var(--ink);
  aspect-ratio:500/842; position:relative;
}
.phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone-glow{
  position:absolute; inset:-12% -10% auto -10%; height:60%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 30%, var(--cream-soft), transparent 70%);
  filter:blur(20px);
}

/* live alert screen */
.alert-ui{ font-family:var(--sans); padding:18px 16px 16px; height:100%; overflow:hidden; color:var(--text); background:linear-gradient(180deg,var(--ink) 0%, #0c1a20 100%); font-size:13px; }
.au-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:13px; }
.au-venue{ font-family:var(--serif); font-weight:600; font-size:15.5px; line-height:1.15; }
.au-venue small{ display:block; font-family:var(--sans); color:var(--teal); font-weight:600; font-size:11px; margin-top:2px; }
.au-status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); background:var(--panel); padding:5px 9px; border-radius:20px; white-space:nowrap; }
.au-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.au-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.au-tab{ text-align:center; padding:10px; border-radius:11px; font-weight:600; font-size:12.5px; border:1px solid var(--hairline-soft); color:var(--text-dim); background:var(--panel); }
.au-tab.on{ color:var(--text); border-color:var(--teal); background:rgba(127,212,196,0.08); }
.au-label{ font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin:14px 2px 9px; }
.au-card{ background:var(--panel); border:1px solid var(--hairline-soft); border-radius:14px; padding:12px; }
.au-name{ background:#0a1318; border:1px solid var(--hairline); border-radius:9px; padding:11px 12px; font-weight:600; font-size:13.5px; }
.au-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.au-chip{ padding:7px 12px; border-radius:20px; border:1px solid var(--hairline-soft); font-size:12px; color:var(--text-dim); background:#0c1a20; }
.au-chip.on{ border-color:var(--teal); color:var(--teal-bright); background:rgba(127,212,196,0.10); }
.au-send{ display:flex; flex-direction:column; gap:9px; margin-top:9px; }
.au-btn{ text-align:center; padding:13px; border-radius:12px; font-weight:700; font-size:13.5px; border:none; display:flex; align-items:center; justify-content:center; gap:7px; }
.au-btn.neutral{ background:#2a3f48; color:var(--text); }
.au-btn.amber{ background:var(--amber); color:#3a2406; }
.au-btn.green{ background:var(--ok); color:#06281a; }
.au-foot{ color:var(--text-faint); font-size:10.5px; line-height:1.4; margin-top:11px; }

/* ============================================================
   THE GAP — diagram
   ============================================================ */
.gap{ background:linear-gradient(180deg,var(--ink-2) 0%, var(--ink) 100%); }
.gap-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.gap-stat{ font-family:var(--serif); color:var(--cream); font-size:clamp(40px,6vw,68px); line-height:1; }
.gap-stat small{ font-family:var(--sans); font-size:18px; color:var(--text-dim); font-weight:500; display:block; margin-top:8px; letter-spacing:0; }

.diagram{
  position:relative; background:var(--panel); border:1px solid var(--hairline-soft);
  border-radius:var(--radius-lg); padding:30px 26px; overflow:hidden;
}
.diagram-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.diagram-clock{ font-family:var(--sans); font-weight:700; font-variant-numeric:tabular-nums; color:var(--teal); font-size:15px; background:rgba(127,212,196,0.10); border:1px solid var(--hairline); padding:6px 12px; border-radius:20px; }
.observer{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.observer .node{ flex:none; }
.node{
  width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  background:#0c1a20; border:1.5px solid var(--hairline); font-size:22px;
  position:relative; transition:border-color .3s, box-shadow .3s, background .3s;
}
.node.tap{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(127,212,196,0.12); }
.node-label{ font-size:14px; color:var(--text-dim); }
.node-label b{ color:var(--text); font-weight:600; }
.ripple{ position:absolute; inset:0; border-radius:15px; border:2px solid var(--teal); opacity:0; }
.phones-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px; }
.mini{
  border-radius:13px; border:1.5px solid var(--hairline-soft); background:#0c1a20;
  padding:11px 9px; min-height:104px; display:flex; flex-direction:column; gap:7px;
  transition:border-color .35s, background .35s, box-shadow .35s, transform .35s;
}
.mini .mini-top{ height:6px; width:60%; border-radius:4px; background:rgba(237,244,243,0.12); }
.mini .mini-msg{ font-size:11px; line-height:1.25; color:var(--text-faint); font-weight:600; transition:color .35s; }
.mini.lit{ border-color:var(--teal); background:rgba(127,212,196,0.09); box-shadow:0 0 0 3px rgba(127,212,196,0.10), 0 8px 24px -10px var(--teal-glow); transform:translateY(-2px); }
.mini.lit .mini-top{ background:var(--teal); }
.mini.lit .mini-msg{ color:var(--text); }
.diagram-note{ margin-top:22px; color:var(--text-faint); font-size:13.5px; display:flex; align-items:center; gap:9px; }
.diagram-replay{ margin-left:auto; background:transparent; border:1px solid var(--hairline); color:var(--text-dim); padding:6px 13px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; transition:.2s; }
.diagram-replay:hover{ border-color:var(--teal); color:var(--teal); }
@media (max-width:820px){ .gap-grid{ grid-template-columns:1fr; } .phones-row{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.step{
  background:var(--panel); border:1px solid var(--hairline-soft); border-radius:var(--radius-lg);
  padding:30px 26px; position:relative; overflow:hidden;
}
.step-num{ font-family:var(--serif); font-size:15px; font-weight:700; color:var(--ink); background:var(--teal); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin-bottom:20px; }
.step h3{ margin-bottom:10px; }
.step p{ color:var(--text-dim); font-size:15.5px; }
.notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.note{ border:1px solid var(--hairline-soft); border-radius:var(--radius); padding:20px 20px; background:rgba(255,255,255,0.015); }
.note .nt{ font-weight:600; color:var(--text); margin-bottom:6px; display:flex; align-items:center; gap:9px; font-size:15.5px; }
.note p{ color:var(--text-dim); font-size:14px; }
.note .ic{ color:var(--teal); flex:none; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } .notes{ grid-template-columns:1fr; } }

/* product montage */
.montage{ background:var(--ink-deep); }
.montage-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; margin-top:48px; }
.shot{ display:flex; flex-direction:column; gap:16px; }
.shot .phone{ width:100%; }
.shot-cap{ }
.shot-cap b{ display:block; font-family:var(--serif); font-size:18px; margin-bottom:4px; }
.shot-cap span{ color:var(--text-dim); font-size:14px; }
@media (max-width:980px){ .montage-track{ grid-template-columns:repeat(2,1fr); gap:30px 24px; } }
@media (max-width:520px){ .montage-track{ grid-template-columns:1fr; } }

/* ============================================================
   WHO IT'S FOR  (parchment)
   ============================================================ */
.on-parch{ background:linear-gradient(180deg,var(--parchment-2) 0%, var(--parchment) 100%); color:var(--on-parch); }
.on-parch h2,.on-parch h3{ color:var(--on-parch); }
.on-parch .lede,.on-parch p{ color:var(--on-parch-dim); }
.audience{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.aud{
  background:var(--parchment-2); border:1px solid var(--parch-line); border-radius:var(--radius-lg);
  padding:28px 24px; transition:transform .2s, box-shadow .2s;
}
.aud:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(20,32,38,0.4); }
.aud .ai{ width:46px; height:46px; border-radius:13px; background:rgba(47,148,130,0.12); display:grid; place-items:center; color:var(--teal-deep); margin-bottom:18px; }
.aud h3{ font-size:21px; margin-bottom:8px; }
.aud p{ font-size:14.5px; color:var(--on-parch-dim); }
@media (max-width:900px){ .audience{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .audience{ grid-template-columns:1fr; } }

/* ============================================================
   TRUST — the soul
   ============================================================ */
.trust{ background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 60%, var(--ink) 100%); }
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:48px; background:var(--hairline-soft); border:1px solid var(--hairline-soft); border-radius:var(--radius-lg); overflow:hidden; }
.pri{ background:var(--ink); padding:34px 30px; transition:background .25s; }
.pri:hover{ background:var(--panel); }
.pri-ic{ color:var(--teal); margin-bottom:18px; }
.pri h3{ font-size:22px; margin-bottom:11px; }
.pri p{ color:var(--text-dim); font-size:15px; }
@media (max-width:880px){ .principles{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .principles{ grid-template-columns:1fr; } }

/* ============================================================
   DATA / PRICING
   ============================================================ */
.data{ background:var(--ink); }
.data-head{ text-align:center; max-width:46ch; margin-inline:auto; }
.data-head h2 .beam{ color:var(--cream); }
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; align-items:stretch; }
.tier{
  background:var(--panel); border:1px solid var(--hairline-soft); border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column; gap:8px; position:relative;
}
.tier.featured{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal), 0 30px 60px -30px var(--teal-glow); }
.tier-badge{ position:absolute; top:-13px; left:28px; background:var(--teal); color:#06231d; font-size:12px; font-weight:700; letter-spacing:0.04em; padding:5px 12px; border-radius:20px; }
.tier-name{ font-family:var(--serif); font-size:22px; font-weight:600; }
.tier-price{ font-family:var(--serif); font-size:40px; line-height:1; margin:6px 0 4px; }
.tier-price small{ font-family:var(--sans); font-size:16px; color:var(--text-dim); font-weight:500; }
.tier-desc{ color:var(--text-dim); font-size:15px; min-height:48px; }
.tier ul{ list-style:none; padding:0; margin:14px 0 24px; display:flex; flex-direction:column; gap:11px; }
.tier li{ display:flex; gap:11px; font-size:14.5px; color:var(--text-dim); align-items:flex-start; }
.tier li .tick{ color:var(--teal); flex:none; font-weight:700; margin-top:1px; }
.tier .btn{ margin-top:auto; }
.tier.soon{ opacity:0.74; }
.tier.soon .tier-price{ color:var(--text-faint); }
@media (max-width:880px){ .tiers{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* ---- pilot pricing panel: free during the Muharram pilot ---- */
.pilot{ max-width:600px; margin:54px auto 0; display:flex; flex-direction:column; align-items:center; gap:24px; }
.pilot-card{ position:relative; width:100%; background:var(--panel); border:1px solid var(--teal); border-radius:var(--radius-lg); padding:42px 36px 34px; text-align:center; box-shadow:0 0 0 1px var(--teal), 0 30px 60px -30px var(--teal-glow); }
.pilot-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--teal); color:#06231d; font-size:12px; font-weight:700; letter-spacing:0.04em; padding:5px 14px; border-radius:20px; white-space:nowrap; }
.pilot-price{ font-family:var(--serif); font-size:54px; line-height:1; color:var(--cream); }
.pilot-price small{ display:block; font-family:var(--sans); font-size:14.5px; color:var(--text-dim); font-weight:500; margin-top:10px; }
.pilot-desc{ color:var(--text-dim); font-size:15.5px; margin:16px auto 0; max-width:44ch; }
.pilot-points{ list-style:none; padding:0; margin:24px auto 28px; display:inline-flex; flex-direction:column; gap:11px; text-align:left; }
.pilot-points li{ display:flex; gap:11px; font-size:14.5px; color:var(--text-dim); align-items:flex-start; }
.pilot-points li .tick{ color:var(--teal); flex:none; font-weight:700; margin-top:1px; }
.pilot-note{ color:var(--text-dim); font-size:14px; max-width:54ch; text-align:center; line-height:1.65; }
.pilot-soon{ color:var(--cream); font-weight:600; }
@media (max-width:560px){ .pilot-card{ padding:38px 22px 30px; } .pilot-price{ font-size:46px; } }

/* ============================================================
   READINESS
   ============================================================ */
.ready{ background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%); }
.ready-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,72px); align-items:center; }
.ready-list{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.ready-item{ display:flex; gap:16px; align-items:flex-start; }
.ready-item .ri{ width:42px; height:42px; flex:none; border-radius:12px; background:rgba(127,212,196,0.10); border:1px solid var(--hairline); display:grid; place-items:center; color:var(--teal); }
.ready-item b{ font-family:var(--serif); font-weight:600; font-size:18px; display:block; margin-bottom:3px; }
.ready-item p{ color:var(--text-dim); font-size:15px; }
.disclaimer{ margin-top:30px; padding:16px 18px; border-left:2px solid var(--teal); background:rgba(127,212,196,0.05); border-radius:0 12px 12px 0; color:var(--text-dim); font-size:14px; }
@media (max-width:820px){ .ready-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ORIGIN
   ============================================================ */
.origin{ background:var(--ink-deep); }
.origin-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(40px,6vw,72px); align-items:center; }
.origin blockquote{ margin:0; font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); line-height:1.34; color:var(--text); }
.origin blockquote .em{ color:var(--cream); }
.origin cite{ display:block; margin-top:22px; font-style:normal; color:var(--text-dim); font-size:15px; }
.testi-slot{
  border:1.5px dashed var(--hairline); border-radius:var(--radius-lg); padding:30px;
  display:flex; flex-direction:column; gap:18px; background:rgba(255,255,255,0.012);
}
.testi-slot .slot-tag{ font-family:"Figtree",monospace; font-size:12px; letter-spacing:0.08em; color:var(--text-faint); text-transform:uppercase; }
.logo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.logo-ph{ aspect-ratio:5/2; border-radius:10px; background:repeating-linear-gradient(135deg, rgba(237,244,243,0.04) 0 8px, rgba(237,244,243,0.07) 8px 16px); display:grid; place-items:center; color:var(--text-faint); font-size:11px; font-family:"Figtree",monospace; }
.testi-quote{ color:var(--text-dim); font-size:15px; line-height:1.5; }
@media (max-width:820px){ .origin-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FINAL CTA / FORM
   ============================================================ */
.final{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--ink-2) 0%, var(--ink-3) 100%); }
.final-beam{ position:absolute; left:50%; top:-30%; transform:translateX(-50%); width:760px; height:760px; max-width:120vw; border-radius:50%; background:radial-gradient(circle, rgba(246,236,210,0.13), transparent 60%); pointer-events:none; }
.final-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.lead-form{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:clamp(26px,3vw,38px); box-shadow:0 40px 80px -40px rgba(0,0,0,0.6); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--text); }
.field label .req{ color:var(--teal); }
.field input,.field select{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--text);
  background:#0a1318; border:1.5px solid var(--hairline); border-radius:11px; padding:14px 15px; min-height:52px;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:var(--text-faint); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(127,212,196,0.18); }
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:var(--red); }
.field .err{ color:#f0a298; font-size:13px; margin-top:6px; display:none; }
.field.bad .err{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-foot{ color:var(--text-faint); font-size:13px; margin-top:14px; display:flex; gap:9px; align-items:flex-start; line-height:1.45; }
.form-error{ color:#ffb3a8; background:rgba(195,59,46,0.12); border:1px solid rgba(195,59,46,0.4); border-radius:10px; padding:10px 12px; font-size:14px; margin-top:12px; }
.form-error:empty{ display:none; }
.form-ok{ display:none; text-align:center; padding:20px 10px; }
.form-ok.show{ display:block; }
.form-ok .ok-ic{ width:64px; height:64px; border-radius:50%; background:rgba(87,201,138,0.12); border:1px solid rgba(87,201,138,0.4); display:grid; place-items:center; color:var(--ok); margin:0 auto 18px; }
.form-ok h3{ margin-bottom:8px; }
.form-ok p{ color:var(--text-dim); }
@media (max-width:820px){ .final-grid{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width:780px; margin:48px auto 0; border-top:1px solid var(--hairline-soft); }
.faq-item{ border-bottom:1px solid var(--hairline-soft); }
.faq-q{ width:100%; text-align:left; background:none; border:none; color:var(--text); cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--serif); font-size:clamp(18px,2vw,22px); font-weight:600; }
.faq-q .pm{ flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--hairline); display:grid; place-items:center; color:var(--teal); transition:transform .3s, background .2s; position:relative; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--teal); border-radius:2px; }
.faq-q .pm::before{ width:12px; height:2px; }
.faq-q .pm::after{ width:2px; height:12px; transition:transform .3s; }
.faq-item.open .pm::after{ transform:rotate(90deg) scaleX(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 0 26px; color:var(--text-dim); font-size:16px; line-height:1.6; max-width:64ch; }
.faq-a-inner a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink-deep); border-top:1px solid var(--hairline-soft); padding-block:clamp(48px,6vw,72px) 36px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--text-dim); font-size:14.5px; max-width:34ch; }
.foot-col h4{ font-family:var(--sans); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin-bottom:16px; }
.foot-col a,.foot-col span{ display:block; color:var(--text-dim); font-size:14.5px; margin-bottom:11px; transition:color .2s; }
.foot-col a:hover{ color:var(--teal); }
.footer-bar{ margin-top:44px; padding-top:24px; border-top:1px solid var(--hairline-soft); display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; color:var(--text-faint); font-size:13.5px; }
.footer-911{ display:inline-flex; align-items:center; gap:9px; color:var(--text-dim); }
.footer-911 b{ color:var(--text); }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:480px){ .footer-top{ grid-template-columns:1fr; } }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.shown{ opacity:1 !important; transform:none !important; transition:none !important; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* RTL safety */
[dir="rtl"] .eyebrow::before{ margin-left:0; }
[dir="rtl"] .disclaimer{ border-left:none; border-right:2px solid var(--teal); border-radius:12px 0 0 12px; }