/* =========================================================
   NomadNet — design tokens, extracted from the live site
   (nomadnet.ai · /var/www/nomadnet-site · landing.css + sell.css
    + inline #typo-layout-fix / #opt-mobile-a11y overrides)
   Drop this into a new page and the page inherits the look.
   ========================================================= */

:root{
  /* ---- light base (default page) ---- */
  --bg:#F6F4EF;          /* warm cream — the page background */
  --surface:#FFFFFF;     /* white cards */
  --surface-2:#FBFAF6;   /* cream-elevated bands (FAQ, process) */
  --surface-3:#ECEAE3;   /* deeper cream — footer */
  --navy:#010334;        /* dark island background */
  --ink:#0A0A12;         /* near-black island (ROI band, WebGL clears) */

  --text:#14151C;
  --muted:rgba(20,21,28,.73);
  --faint:rgba(20,21,28,.48);
  --body-warm:#5a5550;   /* warm grey used for card body copy (aud__d, shift__d) */
  --lead-warm:#403b36;   /* .lead colour inside light sections */

  --line:rgba(20,21,28,.10);
  --line-strong:rgba(20,21,28,.18);

  /* ---- brand ---- */
  --brand:#CC7357;       /* coral — accents, borders, bullets, badges */
  --brand-cta:#A4502F;   /* DARKER coral — actual fill of .btn--primary (AA fix) */
  --brand-cta-hover:#8F4429;
  --brand-600:#B5613F;
  --terra:#CC785C;       /* warm secondary */
  --terra-ink:#B5613F;   /* terracotta text on cream (AA-safe) */
  --indigo:#1779C9;      /* eyebrow / link accent on light */
  --accent:#1779C9;
  --cyan:#29A9FF;        /* accent on dark islands */
  --cyan-2:#5CB3FF;
  --ok:#2BA37A;          /* green tick in guarantee chips */

  /* ---- type ---- */
  --font-display-cond:'Oswald','Inter Tight',-apple-system,sans-serif;   /* H1/H2/big numbers */
  --f-display:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* H3, FAQ questions */
  --f-ui:'Onest',-apple-system,BlinkMacSystemFont,sans-serif;            /* buttons, nav, footer links */
  --f-body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;        /* body copy */
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;      /* eyebrow, meta, tags */

  /* fluid scale */
  --fs-display:clamp(42px,3vw + 22px,72px);
  --fs-h2:clamp(30px,2.6vw + 8px,46px);
  --fs-h3:clamp(19px,.8vw + 11px,24px);
  --fs-lead:clamp(18px,1.75vw,23px);
  --fs-body:clamp(16px,1.05vw + 10px,19px);
  --fs-eyebrow:clamp(13px,1.05vw,15px);
  --fs-meta:clamp(12.5px,.3vw + 9.5px,14.5px);

  /* layout */
  --container:min(92vw, 1900px);
  --gutter:clamp(20px, 3vw, 52px);
  --section-y:clamp(56px,6.5vw,104px);
  --radius:18px;      /* .case */
  --radius-card:20px; /* .aud / .shift__card */
  --radius-lg:26px;   /* .gift / pricing */
  --radius-sm:14px;   /* chips, small panels */
  --pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.19,1,.22,1);

  /* elevation */
  --sh-card-hover:0 24px 50px -28px rgba(20,18,30,.26);
  --sh-gift-hover:0 28px 60px -40px rgba(20,21,28,.4);
  --sh-cta:0 10px 30px -12px rgba(0,40,245,.7), inset 0 0 0 1px rgba(255,255,255,.12);
  --sh-badge:0 10px 24px -8px rgba(204,115,87,.7);
}

/* ---- dark island scope: put .tone-dark + data-tone="dark" on the section ----
   NB: the live site paints each dark section explicitly (.hero/.rebuild set
   background+color themselves). Redeclaring the vars alone is NOT enough —
   the element must also consume them, which is what the two lines below do. */
.tone-dark{
  background:var(--navy);
  color:#EEF1FB;
  --bg:var(--navy);
  --surface:rgba(255,255,255,.045);
  --surface-2:#0F1124;
  --surface-3:#0F1124;
  --text:#EEF1FB;
  --muted:#A6AAC6;
  --faint:rgba(238,241,251,.42);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --accent:#29A9FF;
}

/* ---- mobile scale (matches the live site) ---- */
@media(max-width:640px){
  :root:root{
    --fs-display:clamp(38px,11vw,58px);
    --fs-h2:clamp(29px,8.5vw,40px);
    --fs-lead:18px;
    --fs-body:16.5px;
    --section-y:clamp(60px,13vw,88px);
    --gutter:20px;
  }
}
@media(max-width:380px){ :root:root{--fs-display:clamp(34px,12vw,46px)} }

/* ---- huge screens: the live site scales the whole body ---- */
@media(min-width:2200px){ body{zoom:1.16} :root:root{--container:83.2vw} }
@media(min-width:2560px){ body{zoom:1.30} :root:root{--container:74.2vw} }

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-body);background:var(--bg);color:var(--text);
  font-size:var(--fs-body);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:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.tone-dark :focus-visible{outline-color:var(--cyan)}

/* =========================================================
   PRIMITIVES
   ========================================================= */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--base{background:var(--bg)}
.section--surface{background:var(--surface)}
.section--cream2{background:var(--surface-2)}

.eyebrow{
  font-family:var(--f-mono);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--terra);border-radius:2px}
.tone-dark .eyebrow{color:var(--cyan)}
.tone-dark .eyebrow::before{background:var(--cyan);opacity:.85}

.h2{
  font-family:var(--font-display-cond);font-size:var(--fs-h2);font-weight:700;
  line-height:1.1;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;
}
.h3{font-family:var(--f-display);font-size:var(--fs-h3);font-weight:640;line-height:1.12;letter-spacing:-.015em}
.lead{font-size:var(--fs-lead);line-height:1.52;color:var(--lead-warm);max-width:82ch;font-weight:450}
.tone-dark .lead{color:var(--muted)}
.section-head{
  display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);
  margin-bottom:clamp(36px,5vw,72px);max-width:1500px;
}

/* accent word inside a heading */
.grad{background:linear-gradient(100deg,var(--cyan-2),var(--cyan) 55%,var(--indigo));
      -webkit-background-clip:text;background-clip:text;color:transparent}
.grad-t{background:linear-gradient(100deg,#E8916B,#CC7357);
        -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-ui);font-weight:600;
  font-size:clamp(15px,.45vw + 11px,18px);line-height:1;
  padding:clamp(17px,.6vw + 12px,22px) clamp(28px,1.2vw + 16px,42px);
  border-radius:var(--pill);white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn__arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--primary{background:var(--brand-cta);color:#fff;box-shadow:var(--sh-cta)}
.btn--primary:hover{background:var(--brand-cta-hover)}
.btn--ghost{background:transparent;color:inherit;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(20,18,30,.4)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand)}
.tone-dark .btn--ghost,[data-tone="dark"] .btn--ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);color:#fff}
.tone-dark .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan);color:var(--cyan)}
.btn--sm{padding:9px 14px;font-size:13px;font-weight:700;justify-content:center}
@media(max-width:640px){.btn{min-height:48px}}

/* =========================================================
   CARD PATTERNS
   ========================================================= */
/* A. plain card (3-up) */
.card{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,2.8vw,34px);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hover);border-color:var(--brand)}

/* B. narrative card (2-up, softer radius, warm body copy) */
.card--soft{border-radius:var(--radius-card);padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,32px)}
.card__kicker{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.card__t{font-size:clamp(19px,1.7vw,25px);font-weight:700;margin:0 0 10px;color:var(--text)}
.card__d{font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:var(--body-warm);margin:0}

/* C. offer / pricing card */
.gift{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,36px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.gift:hover{transform:translateY(-5px);box-shadow:var(--sh-gift-hover)}
.gift--reco{border:2px solid var(--brand)!important;
  box-shadow:0 0 0 4px rgba(204,115,87,.12),0 30px 70px -28px rgba(204,115,87,.55);z-index:1}
.gift__badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.03em;
  padding:7px 18px;border-radius:var(--pill);white-space:nowrap;text-transform:uppercase;
  box-shadow:var(--sh-badge);z-index:2;
}
.gift__badge--lite{background:#FBF4EF;color:var(--brand-cta);
  box-shadow:inset 0 0 0 1.5px rgba(204,115,87,.45),0 8px 20px -10px rgba(20,18,30,.25)}

/* mono label row at the top of a card */
.card__client{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-mono);font-size:var(--fs-meta);letter-spacing:.04em;color:var(--muted);
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
/* huge condensed number/metric */
.metric{font-family:var(--font-display-cond);font-size:clamp(46px,5.6vw,72px);font-weight:700;
        line-height:.9;letter-spacing:.005em;text-transform:uppercase;color:var(--text)}
.metric .u{display:block;font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.04em;
           color:var(--brand);margin-top:12px;text-transform:none}

/* accent-rail callout */
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);
         border-radius:18px;padding:clamp(22px,2.4vw,32px)}
/* dashed warm strip */
.strip{background:rgba(204,115,87,.07);border:1.5px dashed rgba(204,115,87,.5);
       border-radius:18px;padding:clamp(20px,2.2vw,30px) clamp(22px,2.4vw,34px)}

/* =========================================================
   LISTS
   ========================================================= */
.list-dot{display:flex;flex-direction:column;gap:14px}
.list-dot li{display:flex;gap:13px;align-items:flex-start;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
.list-dot li::before{content:"";margin-top:.55em;width:6px;height:6px;border-radius:50%;background:var(--terra);flex-shrink:0}
.list-dot b{color:var(--text);font-weight:600}

.list-check{display:flex;flex-direction:column;gap:8px}
.list-check li{display:block;position:relative;padding-left:22px;font-size:15px;line-height:1.42;color:#48506a}
.list-check li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}

@media(max-width:760px){
  .list-dot li{display:block;position:relative;padding-left:19px}
  .list-dot li::before{position:absolute;left:0;top:.55em;margin-top:0}
}

/* =========================================================
   FAQ ACCORDION (native <details>)
   ========================================================= */
.faq{background:var(--surface-2)}
.faq__grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);max-width:920px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.4vw,28px) 0;font-family:var(--f-display);font-weight:640;
  font-size:clamp(17px,1.7vw,21px);letter-spacing:-.01em;color:var(--text);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__q-ic{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-size:20px;line-height:1;color:var(--text);
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.faq__item[open] .faq__q-ic{transform:rotate(45deg);background:var(--brand);border-color:var(--brand);color:#fff}
.faq__item summary:hover .faq__q-ic{border-color:var(--brand)}
.faq__a{padding:0 0 clamp(22px,2.4vw,28px);max-width:70ch;color:var(--muted);font-size:var(--fs-body);line-height:1.6}

/* =========================================================
   REVEAL ON SCROLL (add .is-in via IntersectionObserver)
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);
        transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
html.no-js .reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  html{scroll-behavior:auto}
}

/* cursor spotlight on cards */
.spot{position:relative;isolation:isolate}
.spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:
    radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(56,116,242,.22), transparent 60%),
    radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(41,169,255,.11), transparent 74%);
  opacity:0;transition:opacity .4s var(--ease);
}
.spot:hover::after{opacity:1}
.spot > *{position:relative;z-index:1}