/* ════════════════════════════════════════════════════════════════════════════
   Depth layer — loaded last on every page.

   The site was built flat: one shadow token, flat fills, no lighting model.
   This layer gives it a consistent sense of physical depth without touching
   the markup or the colour identity.

   The model is a single light source above and slightly in front. Every raised
   surface therefore gets three things:
     1. a hairline top highlight, as if the light catches its top edge,
     2. a tight contact shadow directly beneath it,
     3. a wide, soft ambient shadow further out.
   Elevation is the distance between the surface and the page: as it rises the
   contact shadow softens and the ambient shadow spreads. That is what reads as
   three-dimensional — not blur radius alone.

   Deliberately untouched: anything inside .mock (the launch dashboard's preview
   renders the CLIENT's product, so our lighting must not leak into it) and the
   demo captures, which are photographs of other sites.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── elevation: contact shadow + ambient shadow, tinted with the brand ink
        rather than neutral black, which keeps shadows from going muddy grey ── */
  --sh-key: 16 40 73;
  --e1: 0 1px 1px rgba(var(--sh-key)/.10), 0 2px 6px rgba(var(--sh-key)/.07);
  --e2: 0 1px 2px rgba(var(--sh-key)/.12), 0 6px 16px rgba(var(--sh-key)/.11), 0 12px 28px rgba(var(--sh-key)/.07);
  --e3: 0 2px 4px rgba(var(--sh-key)/.13), 0 12px 28px rgba(var(--sh-key)/.15), 0 24px 52px rgba(var(--sh-key)/.09);
  --e4: 0 4px 8px rgba(var(--sh-key)/.14), 0 22px 44px rgba(var(--sh-key)/.18), 0 44px 88px rgba(var(--sh-key)/.12);
  --e5: 0 8px 16px rgba(var(--sh-key)/.16), 0 36px 72px rgba(var(--sh-key)/.22), 0 72px 140px rgba(var(--sh-key)/.16);

  /* the lit top edge, and the faint darkening where a surface meets the page */
  --rim: inset 0 1px 0 rgba(255,255,255,.92);
  --rim-soft: inset 0 1px 0 rgba(255,255,255,.65);
  --edge: inset 0 0 0 1px rgba(var(--sh-key)/.09);

  /* raised surfaces are never a flat fill — light falls off down the face */
  --surface: linear-gradient(180deg,#ffffff 0%,#fcfdff 38%,#f3f6fc 100%);
  --surface-2: linear-gradient(180deg,#fafcff 0%,#eff4fb 100%);
  --sunken: linear-gradient(180deg,#eef2f8 0%,#f6f8fc 100%);

  --ring: 0 0 0 4px rgba(22,103,214,.14);
}

:root[data-theme="dark"]{
  /* in the dark theme the page is darker than the cards, so the lighting
     inverts: the rim brightens and the ambient shadow does the separating */
  --sh-key: 0 0 0;
  --e1: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.30);
  --e2: 0 2px 5px rgba(0,0,0,.40), 0 10px 26px rgba(0,0,0,.38);
  --e3: 0 5px 12px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.48);
  --e4: 0 10px 22px rgba(0,0,0,.50), 0 40px 84px rgba(0,0,0,.55);
  --e5: 0 18px 40px rgba(0,0,0,.55), 0 70px 140px rgba(0,0,0,.62);

  --rim: inset 0 1px 0 rgba(255,255,255,.08);
  --rim-soft: inset 0 1px 0 rgba(255,255,255,.05);
  --edge: inset 0 0 0 1px rgba(255,255,255,.04);

  --surface: linear-gradient(180deg,#17223a 0%,#141d31 55%,#111a2c 100%);
  --surface-2: linear-gradient(180deg,#141d31 0%,#111a2c 100%);
  --sunken: linear-gradient(180deg,#0d1424 0%,#101a2c 100%);

  --ring: 0 0 0 4px rgba(90,162,255,.20);
}

/* the old single token still exists in the base sheet; point it at the new
   scale so anything we have not restyled by hand rises with everything else */
:root{ --shadow: var(--e3); --shadow-sm: var(--e1); }

/* ── page ground ──────────────────────────────────────────────────────────
   A flat white page gives raised elements nothing to sit against. A very
   large, very faint wash puts the light where the shadows say it is. */
body{
  background-color: var(--bg);
  background-image:
    radial-gradient(1600px 900px at 80% -12%, rgba(22,103,214,.07), transparent 65%),
    linear-gradient(180deg, rgba(22,103,214,.022), transparent 420px);
  background-attachment: fixed;
}
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(1200px 620px at 78% -8%, rgba(90,162,255,.10), transparent 62%),
    radial-gradient(900px 520px at 4% 22%, rgba(47,211,181,.055), transparent 58%);
}

/* ── raised surfaces ─────────────────────────────────────────────────────── */
.card, .feat, .step, .uc, .qa, .stat, .spec, .tier, .value, .loc,
.dh-card, .quote, .price-note, .live-strip{
  background-image: var(--surface);
  box-shadow: var(--e2), var(--rim), var(--edge);
  border-color: transparent;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, background-image .3s;
}

/* hover lifts the surface: the contact shadow loosens as it leaves the page */
.card:hover, .feat:hover, .stat:hover, .tier:hover, .uc:hover, .loc:hover{
  transform: translateY(-6px);
  box-shadow: var(--e4), var(--rim), var(--edge);
}
.card:hover{ transform: translateY(-7px) scale(1.006); }

/* the featured pricing tier should read as the nearest thing on the page */
.tier.featured{
  box-shadow: var(--e4), var(--rim), 0 0 0 1px rgba(22,103,214,.22);
  transform: translateY(-4px);
}
.tier.featured:hover{ transform: translateY(-9px); box-shadow: var(--e5), var(--rim); }

/* ── icon tiles: small objects, so they get a bevel rather than a shadow ── */
.card .ic, .feat .fic, .step .no, .dh-ic{
  background-image: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 3px rgba(var(--sh-key)/.10),
    inset 0 0 0 1px rgba(var(--sh-key)/.07),
    0 3px 8px rgba(var(--sh-key)/.14);
}
:root[data-theme="dark"] .card .ic,
:root[data-theme="dark"] .feat .fic,
:root[data-theme="dark"] .step .no,
:root[data-theme="dark"] .dh-ic{
  background-image: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 3px 10px rgba(0,0,0,.35);
}
.brand .logo{
  background-image: linear-gradient(150deg, var(--ink) 0%, var(--brand) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 2px 6px rgba(var(--sh-key)/.22);
}
.card:hover .ic{ transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--e2); }

/* ── buttons: a real object with a lit top, a body and a press ──────────── */
.btn{ position: relative; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s, filter .22s; }
.btn-primary{
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff) 0%, var(--brand) 55%, color-mix(in srgb, var(--brand) 88%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 2px 4px rgba(22,103,214,.24),
    0 8px 20px rgba(22,103,214,.26);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 4px 8px rgba(22,103,214,.26),
    0 14px 32px rgba(22,103,214,.34);
}
.btn-primary:active{
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 1px 2px rgba(22,103,214,.22);
}
.btn-ghost{
  background-image: var(--surface);
  box-shadow: var(--e1), var(--rim-soft);
  border-color: transparent;
}
.btn-ghost:hover{ transform: translateY(-2px); box-shadow: var(--e2), var(--rim-soft); }
.btn-ghost:active{ transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(var(--sh-key)/.10); }
.btn:focus-visible{ outline: none; box-shadow: var(--e2), var(--ring); }

/* ── navigation: a sheet of glass over the page, not a painted strip ────── */
header.nav{
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid transparent;
}
header.nav.scrolled{
  box-shadow: 0 1px 0 rgba(var(--sh-key)/.06), 0 8px 28px rgba(var(--sh-key)/.09);
  border-bottom-color: transparent;
}

/* ── sections: a soft seam where two surfaces meet, instead of a hard edge ── */
.alt{ background-image: var(--sunken); position: relative; }
.alt::before, .alt::after{
  content:""; position:absolute; left:0; right:0; height:24px; pointer-events:none;
}
.alt::before{ top:0; background: linear-gradient(180deg, rgba(var(--sh-key)/.045), transparent); }
.alt::after{ bottom:0; background: linear-gradient(0deg, rgba(var(--sh-key)/.03), transparent); }

/* ── hero: layered atmosphere so the foreground has something to sit in ─── */
.hero, .detail-hero, .ai-hero{ position: relative; isolation: isolate; }
.hero::after, .detail-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 380px at 12% 8%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(680px 420px at 88% 92%, rgba(22,103,214,.10), transparent 62%);
}
:root[data-theme="dark"] .hero::after,
:root[data-theme="dark"] .detail-hero::after{
  background:
    radial-gradient(760px 380px at 12% 8%, rgba(90,162,255,.10), transparent 60%),
    radial-gradient(680px 420px at 88% 92%, rgba(47,211,181,.07), transparent 62%);
}
.hv-card{ box-shadow: var(--e5), var(--rim); background-image: var(--surface); }

/* ── the spec table reads as one milled slab, not a stack of rows ───────── */
.spec{ box-shadow: var(--e2), var(--rim), var(--edge); overflow: hidden; }
.spec .row{ border-top-color: rgba(var(--sh-key)/.07); transition: background .2s; }
.spec .row:hover{ background: rgba(var(--sh-key)/.022); }
:root[data-theme="dark"] .spec .row:hover{ background: rgba(255,255,255,.025); }

/* ── the timeline spine gets depth, and its nodes sit above the page ────── */
.timeline::before{
  background: linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent);
  box-shadow: 0 0 0 1px rgba(var(--sh-key)/.02);
}
.tl-item::before{ box-shadow: 0 2px 5px rgba(var(--sh-key)/.18), inset 0 1px 0 rgba(255,255,255,.6); }

/* ── quotes, tags, pills: small raised chips ────────────────────────────── */
.card .tags span, .fx-tags span, .ds-tags span{
  background-image: var(--surface-2);
  box-shadow: var(--rim-soft), 0 1px 2px rgba(var(--sh-key)/.08), var(--edge);
  border-color: transparent;
}

/* ── footer sits behind the page, so it is recessed rather than raised ──── */
footer{
  background-image: var(--sunken);
  box-shadow: inset 0 12px 24px -14px rgba(var(--sh-key)/.16);
  border-top-color: transparent;
}

/* ── form fields are cut into the surface, not stacked on it ────────────── */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=date], input[type=search], input[type=password], select, textarea{
  box-shadow: inset 0 1px 3px rgba(var(--sh-key)/.08), inset 0 0 0 1px rgba(var(--sh-key)/.04);
  transition: box-shadow .2s, border-color .2s;
}
input:focus, select:focus, textarea:focus{
  box-shadow: inset 0 1px 2px rgba(var(--sh-key)/.05), var(--ring) !important;
}

@media (prefers-reduced-motion: reduce){
  .card, .feat, .step, .uc, .stat, .tier, .btn, .loc{ transition: none !important; }
  .card:hover, .feat:hover, .stat:hover, .tier:hover, .uc:hover, .loc:hover,
  .btn-primary:hover, .btn-ghost:hover, .tier.featured, .tier.featured:hover{ transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   The same lighting model, extended to the surfaces the base sheet does not
   define: the hero's floating card, the Fleet showcase, the launch dashboard
   and the admin console.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── hero card internals: rows sit slightly proud of the card face ───────── */
.hv-row{
  background-image: var(--surface-2);
  box-shadow: var(--rim-soft), 0 1px 2px rgba(var(--sh-key)/.07), var(--edge);
  border-color: transparent;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.hv-row:hover{ transform: translateX(3px); box-shadow: var(--rim-soft), var(--e2); }
.hv-badge{ box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,.16); }
.pill{
  background-image: var(--surface-2);
  box-shadow: var(--rim-soft), 0 1px 3px rgba(var(--sh-key)/.09), var(--edge);
  border-color: transparent;
}

/* ── the dark bands are lit from the top edge, like a panel set into the page ── */
.fleet-band, .wl-band, .fleet-hero, .cta.ai-cta{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.28);
}
.wl-step, .fh-stat{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 8px rgba(0,0,0,.22);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s;
}
.wl-step:hover, .fh-stat:hover{
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.34);
}

/* ── Fleet showcase ─────────────────────────────────────────────────────── */
.fx{
  background-image: var(--surface);
  box-shadow: var(--e2), var(--rim), var(--edge);
  border-color: transparent;
}
.fx:hover, .fx:focus-visible{
  box-shadow: var(--e4), var(--rim), 0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent);
}
/* the capture sits inside the card like a screen behind glass */
.fx-shot{ box-shadow: inset 0 -1px 0 rgba(var(--sh-key)/.08); }
.fb-tile{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.30); }
.fb-tile:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 20px 44px rgba(0,0,0,.46); }
.chip{
  background-image: var(--surface-2);
  box-shadow: var(--rim-soft), 0 1px 2px rgba(var(--sh-key)/.07), var(--edge);
  border-color: transparent;
}
.chip[aria-pressed="true"]{
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 3px 10px rgba(22,103,214,.32);
}

/* the demo viewer's browser frame is the deepest object on the page */
.browser{ box-shadow: var(--e5), inset 0 1px 0 rgba(255,255,255,.07); }
.demo-foot, .ds-card{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(0,0,0,.26); }
.dbtn{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.24);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, border-color .2s;
}
.dbtn:hover{ transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px rgba(0,0,0,.32); }
.dbtn:active{ transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.34); }

/* ── launch dashboard ───────────────────────────────────────────────────── */
.panel, .rail, .preview, .estimate, .drop{
  background-image: var(--surface);
  box-shadow: var(--e2), var(--rim), var(--edge);
  border-color: transparent;
}
.estimate, .drop{ background-image: var(--sunken); box-shadow: inset 0 1px 3px rgba(var(--sh-key)/.08), var(--edge); }
.drop:hover, .drop.over{ box-shadow: inset 0 1px 3px rgba(var(--sh-key)/.05), var(--ring); }
.pick{
  background-image: var(--surface-2);
  box-shadow: var(--e1), var(--rim-soft), var(--edge);
  border-color: transparent;
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s;
}
.pick:hover{ transform: translateY(-3px); box-shadow: var(--e3), var(--rim-soft); }
.pick[aria-pressed="true"]{
  box-shadow: var(--e3), var(--rim), 0 0 0 2px color-mix(in srgb, var(--acc, #1667d6) 40%, transparent);
}
.rstep{ transition: transform .2s, background .2s; }
.rstep:hover{ transform: translateX(2px); }
.rstep .n{ box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(var(--sh-key)/.18); }
/* the preview is a device on the desk: it needs the strongest shadow here */
.pv-frame{ box-shadow: var(--e4), var(--rim); }
.drop-prev{ box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(var(--sh-key)/.14), var(--edge); }
.mini{
  background-image: var(--surface-2);
  box-shadow: var(--rim-soft), 0 1px 2px rgba(var(--sh-key)/.09), var(--edge);
  border-color: transparent;
  transition: transform .16s, box-shadow .18s, color .18s;
}
.mini:hover{ transform: translateY(-1px); box-shadow: var(--e2), var(--rim-soft); }
.mini:active{ transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(var(--sh-key)/.12); }
.bstage i{ box-shadow: 0 1px 3px rgba(var(--sh-key)/.22), inset 0 1px 0 rgba(255,255,255,.5); }

/* ── admin console ──────────────────────────────────────────────────────── */
.adm-panel, .adm-stat, .ed, .gate-card{
  background-image: var(--surface);
  box-shadow: var(--e2), var(--rim), var(--edge);
  border-color: transparent;
}
.gate-card{ box-shadow: var(--e5), var(--rim), var(--edge); }
.adm-stat{ background-image: var(--sunken); box-shadow: inset 0 1px 2px rgba(var(--sh-key)/.06), var(--edge); }
.ed-head{ background-image: var(--surface-2); }
.drawer-panel{ box-shadow: -18px 0 60px rgba(var(--sh-key)/.28), inset 1px 0 0 rgba(255,255,255,.6); }
:root[data-theme="dark"] .drawer-panel{ box-shadow: -18px 0 60px rgba(0,0,0,.6), inset 1px 0 0 rgba(255,255,255,.06); }
.adm-tab[aria-selected="true"]{ box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.8); }
:root[data-theme="dark"] .adm-tab[aria-selected="true"]{ box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.07); }
.note-row, .callout{ box-shadow: var(--rim-soft), 0 1px 3px rgba(var(--sh-key)/.07); }

/* ── the launch dashboard's preview renders the CLIENT's product. Our
      lighting must not leak into it, or every client's app would inherit
      Freeborn's shadows. Reset everything this layer could have reached. ── */
.mock, .mock *{ background-image: none; }
.mock .mk-kpi, .mock .mk-panel, .mock .mk-card, .mock .mk-in, .mock .mk-logo,
.mock .mk-btn, .mock .mk-side i{ box-shadow: none; }
.mock .mk-card{ box-shadow: 0 12px 30px rgba(16,40,73,.1); }

@media (prefers-reduced-motion: reduce){
  .fx, .fb-tile, .pick, .hv-row, .wl-step, .fh-stat, .dbtn, .mini, .rstep{ transition: none !important; }
  .fx:hover, .fb-tile:hover, .pick:hover, .hv-row:hover, .wl-step:hover,
  .fh-stat:hover, .dbtn:hover, .mini:hover, .rstep:hover{ transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Navigation fit.

   The bar is a single flex row that only collapses to the burger at 720px.
   Between 720px and about 1200px the English labels — "OUR FLEET", "About us",
   "Launch dashboard" — had nowhere to go and wrapped inside their own links, so
   the bar read as a broken stack. Labels never wrap; instead the row tightens,
   and the secondary button drops out before anything else does.
   ════════════════════════════════════════════════════════════════════════════ */
.nav-links a, .nav-links .btn{ white-space: nowrap; }
.nav-links{ flex-wrap: nowrap; }
/* space-between let the wordmark and the first link touch once the English
   labels filled the row; the brand keeps its width and a gap is guaranteed */
.nav-inner{ gap: 28px; }
.brand{ flex: 0 0 auto; }

@media (min-width:721px) and (max-width:1240px){
  .nav-links{ gap: 20px; font-size: .88rem; }
  .nav-links .btn{ padding: 10px 16px; }
}
@media (min-width:721px) and (max-width:1120px){
  .nav-links{ gap: 15px; font-size: .84rem; }
  /* the dashboard is reachable from the footer and from every Fleet card */
  .nav-links .btn-ghost{ display: none; }
}
@media (min-width:721px) and (max-width:960px){
  .nav-links{ gap: 11px; }
  .nav-links a.plain{ font-size: .8rem; }
  .nav-links .btn{ padding: 9px 13px; font-size: .82rem; }
}
@media (max-width:720px){
  /* inside the burger sheet the links have the full width, so let them breathe */
  .nav-links a, .nav-links .btn{ white-space: normal; }
  .nav-links .btn-ghost{ display: inline-flex; }
}

/* ── containers the first pass missed ───────────────────────────────────── */
.ptable, .faq .qa, .review, .adm-table, .ptable-scroll > .ptable{
  box-shadow: var(--e2), var(--rim), var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background-image: var(--surface);
}
.ptable table{ background: transparent; }
.ptable tbody tr{ transition: background .18s; }
.ptable tbody tr:hover{ background: rgba(var(--sh-key)/.028); }
:root[data-theme="dark"] .ptable tbody tr:hover{ background: rgba(255,255,255,.03); }

/* the section sub-nav is a rail the page slides under */
.pagenav{
  box-shadow: 0 1px 0 rgba(var(--sh-key)/.06), 0 6px 18px rgba(var(--sh-key)/.07);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}

/* a scroller that runs off the edge should fade, not be guillotined */
.pagenav-inner, .fb-rail, .fleet-bar-in{ -webkit-overflow-scrolling: touch; }
.pagenav{ position: relative; }
.pagenav::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:56px; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--bg) 78%);
}
:root[data-theme="dark"] .pagenav::after{ background: linear-gradient(90deg, transparent, var(--bg) 78%); }