/* Copyright (c) 2025-2026 Rapid Geospatial Systems, LLC. All rights reserved.
   rgspatial.com — shipped by tools/build-dist.sh to the dist root (launched
   2026-08-17). Deploy: bash tools/deploy.sh. Demo-form delivery: /api/demo-request
   zone route → rg-email-sender Worker → contact@rgspatial.com. Public paths ride the Cloudflare Access
   Bypass (see build-dist.sh); /app + /showcase stay Access-gated. */

@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/roboto-italic-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/roboto-normal-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/roboto-normal-500.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/roboto-normal-700.woff2') format('woff2')}

:root{
  /* Tell browsers this is a dark page so NATIVE UI (scrollbars, form
     controls, pickers) renders dark — authored CSS colors alone don't
     signal this, which is how iOS drew a white select on a dark form. */
  color-scheme:dark;
  --teal:#22d3a7;
  --teal-deep:#0c97a4;
  --bg:#0b0e18;
  --bg-raise:#111527;
  --bg-card:#151a30;
  --line:rgba(255,255,255,0.09);
  --txt:#f2f4f8;
  --txt-dim:#aab1c2;
  --txt-faint:#7c8496;
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font); color:var(--txt); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.6;
}
a{color:inherit; text-decoration:none;}
img,video{max-width:100%;}

/* ── Top nav ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  /* safe-area insets: with viewport-fit=cover the fixed bar extends under
     the iOS notch / Dynamic Island (top, portrait) and the display cutout
     (left/right, landscape) — pad so the logo and burger stay visible. */
  padding:calc(14px + env(safe-area-inset-top,0px))
          calc(clamp(18px,4vw,44px) + env(safe-area-inset-right,0px))
          14px
          calc(clamp(18px,4vw,44px) + env(safe-area-inset-left,0px));
  background:rgba(11,14,24,0.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-0.02em; margin-right:auto;}
.nav .logo svg{width:26px; height:auto;}
.nav .logo .sp{color:var(--teal);}
.nav a.lnk{font-size:14.5px; font-weight:500; color:var(--txt-dim); transition:color .15s;}
.nav a.lnk:hover{color:#fff;}
.nav a.lnk.active{color:var(--teal);}
.nav .cta-sm{
  font-size:13.5px; font-weight:500; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,#15b89b 0%,#0c97a4 56%,#0a82ab 100%);
  padding:9px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.20);
  transition:filter .15s, transform .15s;
}
.nav .cta-sm:hover{filter:brightness(1.08); transform:translateY(-1px);}
.nav .links{display:contents;}
.nav .nav-burger{display:none;}
/* The Request-a-Demo link INSIDE the panel exists for mobile only —
   desktop already has the standalone .cta-sm pill. */
.nav a.lnk.lnk-demo{display:none;}
@media (max-width:860px){
  .nav{gap:14px;}
  .nav .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; margin:-4px -8px -4px 0; padding:0;
    background:none; border:0; border-radius:10px; color:var(--txt);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .nav .nav-burger svg{width:24px; height:24px;}
  .nav .nav-burger path{transition:transform .18s ease, opacity .12s ease; transform-box:fill-box; transform-origin:center;}
  .nav.open .nav-burger .b1{transform:translateY(5px) rotate(45deg);}
  .nav.open .nav-burger .b2{opacity:0;}
  .nav.open .nav-burger .b3{transform:translateY(-5px) rotate(-45deg);}
  /* Page links become a FULL-SCREEN frosted takeover below the bar
     (the Mapbox pattern). height:calc(100dvh - 100%) = viewport minus
     the bar: both `top:100%` and the `100%` term resolve against the
     fixed nav bar's height, so the panel exactly fills the rest of the
     screen whatever the bar's safe-area padding is. */
  .nav .links{
    display:none; position:absolute; top:100%; left:0; right:0;
    height:calc(100vh - 100%);   /* fallback for pre-dvh browsers */
    height:calc(100dvh - 100%);
    flex-direction:column; gap:0;
    padding:10px 0 calc(18px + env(safe-area-inset-bottom,0px));
    /* near-solid fallback; frosted only where blur actually works */
    background:rgba(11,14,24,0.99);
    overflow-y:auto; overscroll-behavior:contain;
  }
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .nav .links{
      background:rgba(11,14,24,0.98);
      -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    }
  }
  .nav.open .links{display:flex; animation:navpanel .16s ease;}
  .nav a.lnk{
    padding:16px calc(clamp(18px,4vw,44px) + env(safe-area-inset-right,0px))
            16px calc(clamp(18px,4vw,44px) + env(safe-area-inset-left,0px));
    font-size:17px; border-top:1px solid rgba(255,255,255,0.05);
  }
  /* The demo link renders as the primary pill button, not a text row —
     it is the page's conversion action. */
  .nav a.lnk.lnk-demo{
    display:block; margin:20px clamp(18px,4vw,44px) 0;
    padding:14px 20px; text-align:center; border-top:none;
    color:#fff; font-weight:600; font-size:16px;
    background:linear-gradient(135deg,#15b89b 0%,#0c97a4 56%,#0a82ab 100%);
    border-radius:999px; border:1px solid rgba(255,255,255,0.20);
    box-shadow:0 10px 36px rgba(18,150,150,0.30), inset 0 1px 0 rgba(255,255,255,0.22);
  }
}
@keyframes navpanel{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .nav.open .links{animation:none;}
}
@media (max-width:480px){
  /* Bar is logo + burger only on small phones; the panel carries the
     demo CTA so nothing overflows at 320-480px widths. */
  .nav .cta-sm{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .nav .nav-burger path{transition:none;}
}

/* ── Sections ── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(18px,4vw,44px);}
section.band{padding:clamp(40px,5.5vw,68px) 0;}
section.band.raise{background:var(--bg-raise);}
.kicker{
  color:var(--teal); font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  font-size:12.5px; margin-bottom:14px;
}
h1,h2{letter-spacing:-0.02em; line-height:1.12; text-wrap:balance; margin:0 0 18px;}
h2{font-size:clamp(26px,3.6vw,42px); font-weight:700;}
h3{font-size:19px; font-weight:700; margin:0 0 8px;}
p.lede{font-size:clamp(16px,1.6vw,19.5px); color:var(--txt-dim); max-width:64ch; margin:0 0 14px;}
p.body{font-size:15.5px; color:var(--txt-dim); max-width:64ch;}

/* ── Stat strip ── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:34px;}
.stat{
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 18px;
}
.stat .num{font-size:clamp(26px,2.8vw,34px); font-weight:700; color:var(--teal); font-variant-numeric:tabular-nums; line-height:1.1;}
.stat .lbl{font-size:14px; color:var(--txt-dim); margin-top:7px; line-height:1.45;}
.stat .src{font-size:12px; color:var(--txt-faint); margin-top:9px;}

/* ── Capability grid ── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:34px;}
.tile{background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:24px;}
.tile p{font-size:14.5px; color:var(--txt-dim); margin:6px 0 0;}

/* ── Code flip ── */
.codes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:30px;}
.code{
  background:#0d1120; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.code .hd{padding:9px 16px; font-size:12.5px; font-weight:500; letter-spacing:0.06em; color:var(--txt-faint); border-bottom:1px solid var(--line); text-transform:uppercase;}
.code pre{
  margin:0; padding:16px; overflow-x:auto;
  font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#dfe5f1;
}
.code .c{color:#6c7690;} .code .k{color:var(--teal);} .code .s{color:#e8c47c;}
/* On phones long code lines scroll inside the card, but with no
   scrollbar they read as truncated — fade the right edge as a cue. */
@media (max-width:640px){
  .code{position:relative;}
  .code::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:26px;
    background:linear-gradient(90deg, transparent, #0d1120 88%);
    pointer-events:none;
  }
}

/* ── Media slot ── */
.media{
  margin-top:34px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#000;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
.media video,.media img{display:block; width:100%;}
/* Reserve the media box before video metadata arrives — without this the
   element renders at the UA default (~150px), then jumps to full size when
   dimensions load, shifting the whole page under a restored scroll position. */
.media video{aspect-ratio:16/9;}
.media-cap{font-size:13px; color:var(--txt-faint); margin-top:12px;}

/* ── CTA band ── */
.cta-band{text-align:center;}
.cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-weight:500; font-size:16px; letter-spacing:0.02em; color:#fff;
  background:linear-gradient(135deg,#15b89b 0%,#0c97a4 56%,#0a82ab 100%);
  padding:15px 32px; border-radius:999px; border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 10px 36px rgba(18,150,150,0.34), inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.cta:hover{transform:translateY(-2px); filter:brightness(1.06);}
.cta svg{width:16px; height:16px;}

.note{font-size:13px; color:var(--txt-faint); max-width:74ch; margin-top:14px;}

/* ── Footer ── */
footer{
  border-top:1px solid var(--line); padding:38px 0 46px; margin-top:20px;
  font-size:13.5px; color:var(--txt-faint);
}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between;}
footer a:hover{color:#fff;}
@media (max-width:640px){
  footer .wrap{flex-direction:column; align-items:flex-start; gap:7px;}
}

/* ── Page-head (subpages) ── */
.page-head{padding:clamp(120px,16vw,170px) 0 clamp(30px,4vw,50px);}
.stub{
  background:var(--bg-card); border:1px dashed rgba(255,255,255,0.18); border-radius:14px;
  padding:26px; margin-top:26px; color:var(--txt-dim); font-size:14.5px;
}
.stub b{color:var(--txt);}
ul.plan{margin:10px 0 0; padding-left:20px; color:var(--txt-dim); font-size:14.5px;}
ul.plan li{margin:5px 0;}

/* ══ Visual pass 2: numbered anchors, glows, diagram, icon rows ══ */
section.band{position:relative; overflow:hidden;}
.glow{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:0.55;}
.glow.teal{background:radial-gradient(circle, rgba(34,211,167,0.16), transparent 70%);}
.glow.blue{background:radial-gradient(circle, rgba(10,130,171,0.18), transparent 70%);}

.kicker{display:flex; align-items:center; gap:12px;}
.kicker .no{color:var(--txt-faint); font-variant-numeric:tabular-nums; letter-spacing:0.08em;}
.kicker::after{content:""; flex:0 0 44px; height:1px; background:linear-gradient(90deg, var(--teal), transparent);}

/* pillars: gradient top border + glow numerals */
.pillar{position:relative; background:linear-gradient(180deg, rgba(34,211,167,0.05), rgba(21,26,48,0.9) 38%); border-top:2px solid transparent; border-image:linear-gradient(90deg, var(--teal), rgba(10,130,171,0.4)) 1; transition:transform .2s ease;}
.pillar:hover{transform:translateY(-3px);}
.pillar .big{text-shadow:0 0 34px rgba(34,211,167,0.35);}

/* two-column split */
.split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,4vw,64px); align-items:center; margin-top:8px;}
.split > *{min-width:0;}
@media (max-width:880px){ .split{grid-template-columns:1fr;} }

/* engine stack diagram */
.stack{display:flex; flex-direction:column; align-items:stretch; gap:0; max-width:420px; margin:0 auto; width:100%;}
.stack .homes{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stack .home{background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:13px 10px; text-align:center; font-size:13.5px; font-weight:500; color:var(--txt-dim);}
.stack .home b{display:block; color:var(--txt); font-size:14px; margin-bottom:2px;}
.stack .pipes{display:flex; justify-content:center; padding:6px 0;}
.stack .pipes span{width:2px; height:26px; background:linear-gradient(180deg, var(--teal), rgba(255,255,255,0.25)); margin:0 30px; border-radius:2px;}
.stack .engine{background:linear-gradient(135deg, rgba(21,184,155,0.16), rgba(10,130,171,0.14)); border:1px solid rgba(34,211,167,0.45); border-radius:14px; padding:20px 16px; text-align:center; box-shadow:0 0 46px rgba(34,211,167,0.18);}
.stack .engine b{font-size:17px; letter-spacing:-0.01em;}
.stack .engine span{display:block; font-size:12.5px; color:var(--txt-dim); margin-top:5px; letter-spacing:0.05em;}

/* capabilities as icon rows */
.featrows{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:8px 40px; margin-top:30px;}
.featrow{display:flex; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); align-items:flex-start;}
.featrow svg{flex:none; width:22px; height:22px; color:var(--teal); margin-top:2px;}
.featrow b{display:block; font-size:15.5px; margin-bottom:3px;}
.featrow p{margin:0; font-size:14px; color:var(--txt-dim); line-height:1.55;}

/* code window chrome */
.code .hd{display:flex; align-items:center; gap:8px;}
.code .hd::before{content:""; width:10px; height:10px; border-radius:50%; background:#ff5f57; box-shadow:16px 0 0 #febc2e, 32px 0 0 #28c840; margin-right:36px;}

/* chart hover */
.bar-row .fill{transition:filter .15s ease;}
.bar-row:hover .fill{filter:brightness(1.18);}
.media{position:relative;}
.media::after{content:""; position:absolute; inset:-40px; z-index:-1; background:radial-gradient(ellipse at center, rgba(34,211,167,0.12), transparent 70%); filter:blur(30px);}