/* Smart Solution — site styles
   Single stylesheet, no framework, no webfont request, no image requests.
   The whole "festive futuristic" backdrop is CSS gradients, so the page still
   ships in one file and first paint stays fast on a poor connection. */

:root{
  --ink:#e9eefb;          /* primary text */
  --ink-2:#c3cde6;        /* secondary text */
  --muted:#8b9ac0;        /* tertiary / captions */

  --paper:#070b16;        /* page base */
  --paper-2:#0b1122;      /* alt band */
  --paper-3:#0e1528;      /* closer band */

  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --accent:#5b8cff;
  --accent-2:#8a6cff;
  --plum:#c264f0;
  --cyan:#3fd8d0;
  --ok:#38d39f;

  --wrap:1120px;
  --radius:14px;
  --glow:0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* ── festive futuristic backdrop ───────────────────────────────────────
   Two fixed layers behind everything:
   1. drifting aurora blobs (colour + motion)
   2. a fine perspective grid + starfield (the "futuristic" structure)
   Both are pure CSS gradients — zero network requests. */

body::before{
  content:"";
  position:fixed; inset:-20vh -10vw;
  z-index:-2;
  background:
    radial-gradient(38vw 38vw at 12% 8%,  rgba(91,140,255,.32), transparent 60%),
    radial-gradient(34vw 34vw at 88% 2%,  rgba(194,100,240,.28), transparent 62%),
    radial-gradient(40vw 40vw at 72% 68%, rgba(63,216,208,.16), transparent 60%),
    radial-gradient(30vw 30vw at 22% 82%, rgba(138,108,255,.22), transparent 62%);
  filter:blur(30px) saturate(120%);
  animation:drift 34s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes drift{
  0%   {transform:translate3d(0,0,0)      scale(1)}
  50%  {transform:translate3d(2.5vw,-2vh,0) scale(1.06)}
  100% {transform:translate3d(-2vw,2.5vh,0) scale(1.02)}
}

body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    /* starfield */
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.6px 1.6px at 34% 68%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.2px 1.2px at 62% 84%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.3px 1.3px at 90% 56%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.1px 1.1px at 6% 58%,  rgba(255,255,255,.35), transparent),
    /* grid */
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,64px 64px,64px 64px;
  /* fade the grid out toward the bottom so text areas stay calm */
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 55%, transparent);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 55%, transparent);
  animation:twinkle 9s ease-in-out infinite alternate;
}

@keyframes twinkle{from{opacity:.75} to{opacity:1}}

img{max-width:100%;height:auto;display:block}
a{color:#9db8ff;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.18;margin:0;letter-spacing:-.02em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

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

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ───────────────────────────────────────────────────────────── header */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(7,11,22,.72);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}

.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{
  width:32px;height:32px;border-radius:9px;
  /* 64px source for a 32px slot so it stays crisp on retina */
  background:url('/img/logo-64.png') center/cover no-repeat;
  box-shadow:0 0 20px rgba(91,140,255,.6);
  border:1px solid rgba(255,255,255,.15);
  display:inline-block;
}
.brand-name{font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand-name span{color:var(--muted);font-weight:600}

.site-head nav{display:flex;align-items:center;gap:24px}
.site-head nav a{color:var(--ink-2);font-size:15px;font-weight:500}
.site-head nav a:hover{color:#fff;text-decoration:none}
.site-head nav a[aria-current]{color:#fff}

.btn-sm{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff!important;padding:8px 16px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(91,140,255,.35);
}
.btn-sm:hover{text-decoration:none;filter:brightness(1.08)}

/* ───────────────────────────────────────────────── hero & page heads */
.hero{padding:104px 0 88px;border-bottom:1px solid var(--line)}
.eyebrow{
  margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);
}
.hero h1{font-size:clamp(34px,6vw,62px);font-weight:800;margin-bottom:22px}
.hero h1,.page-head h1{
  background:linear-gradient(180deg,#ffffff,#b9c8ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{font-size:clamp(17px,2.1vw,20px);color:var(--ink-2);max-width:56ch;margin:0 0 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

.page-head{padding:30px 0 54px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(30px,5vw,50px);font-weight:800;margin-bottom:18px}
.page-head .eyebrow{margin-bottom:14px}

.crumbs{padding:20px 24px 0;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{margin:0 7px;opacity:.45}

/* ──────────────────────────────────────────────────────────── buttons */
.btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;padding:13px 27px;border-radius:999px;font-weight:600;font-size:16px;
  box-shadow:0 10px 30px rgba(91,140,255,.35);
  border:0;cursor:pointer;font-family:inherit;
}
.btn:hover{text-decoration:none;filter:brightness(1.08);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{
  background:var(--glass);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);backdrop-filter:blur(6px);
}
.btn.ghost:hover{background:var(--glass-2);filter:none}

/* ────────────────────────────────────────────────────────────── bands */
.band{padding:84px 0}
.band.alt{background:linear-gradient(180deg,rgba(11,17,34,.55),rgba(11,17,34,.85));border-block:1px solid var(--line)}
.sec-title{font-size:clamp(26px,3.4vw,36px);font-weight:800;margin-bottom:10px}
.sec-sub{color:var(--muted);margin:0 0 40px;max-width:62ch}
.narrow,.wrap.narrow{max-width:760px}
.narrow p{margin:0 0 16px;color:var(--ink-2)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ─────────────────────────────────────────────────── cards (glass) */
.card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--glow);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card.accent{
  border-color:rgba(194,100,240,.35);
  background:linear-gradient(180deg,rgba(194,100,240,.10),var(--glass));
}
.card.plain{box-shadow:none;background:rgba(255,255,255,.03)}
.card-top{margin-bottom:16px}
.card-media{
  margin:-10px -10px 18px -10px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.card-media img{
  width:100%;
  height:auto;
  max-height:180px;
  object-fit:cover;
  transition:transform .3s ease;
}
.card:hover .card-media img{
  transform:scale(1.03);
}
.hero-visual{
  margin-top:40px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--glow), 0 20px 50px rgba(91,140,255,.2);
}
.hero-visual img{
  width:100%;
  height:auto;
  display:block;
}
.card h3{font-size:23px;font-weight:700;margin:10px 0 4px}
.card-kicker{margin:0;color:var(--muted);font-size:14px}
.card p{margin:0 0 18px;color:var(--ink-2)}
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.tag.live{background:rgba(56,211,159,.14);color:#6ff0c2;box-shadow:inset 0 0 0 1px rgba(56,211,159,.32)}
.tag.building{background:rgba(194,100,240,.14);color:#e0a6ff;box-shadow:inset 0 0 0 1px rgba(194,100,240,.32)}
.tag.early{background:rgba(255,255,255,.07);color:#b8c5e2;box-shadow:inset 0 0 0 1px var(--line-2)}

.ticks{list-style:none;margin:0 0 22px;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--ink-2);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

.card-link{margin-top:auto;font-weight:600;font-size:15.5px;color:#9db8ff}
.card-link span{display:inline-block;transition:transform .15s ease}
.card-link:hover span{transform:translateX(3px)}

/* ─────────────────────────────────────────────────── feature strip */
.feature{padding:88px 0;position:relative}
.feature::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(91,140,255,.10),rgba(194,100,240,.06));
  border-block:1px solid var(--line);
}
.feature-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin-bottom:16px}
.feature p{color:var(--ink-2);margin:0 0 26px;max-width:46ch}

.stages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stages li{
  display:grid;grid-template-columns:34px 1fr;gap:4px 14px;align-items:baseline;
  background:var(--glass);border:1px solid var(--line);border-radius:11px;
  padding:13px 16px;font-size:14.5px;color:var(--muted);backdrop-filter:blur(8px);
}
.stages li span{
  grid-row:span 2;align-self:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--plum));
  color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center;
  box-shadow:0 0 16px rgba(91,140,255,.45);
}
.stages li strong{color:#fff;font-size:15.5px;font-weight:650}

/* ────────────────────────────────────────────────────────────── closer */
.closer{padding:92px 0;text-align:center;background:linear-gradient(180deg,transparent,rgba(14,21,40,.9));border-top:1px solid var(--line)}
.closer h2{font-size:clamp(25px,3.2vw,34px);font-weight:800;margin-bottom:12px}
.closer p{color:var(--muted);margin:0 auto 28px;max-width:52ch}

/* ─────────────────────────────────────────────────────────────── note */
.note{font-size:15.5px;color:var(--muted);border-left:2px solid rgba(91,140,255,.5);padding:2px 0 2px 16px;border-radius:0}

/* ────────────────────────────────────────────────── setup guide steps */
.step{padding:28px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0;padding-top:8px}
.step h2{font-size:23px;font-weight:750;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.step h3{font-size:17px;font-weight:700;margin:20px 0 8px;color:var(--ink)}
.step p{color:var(--ink-2)}
.step-n{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--plum));
  color:#fff;font-size:15px;display:grid;place-items:center;
  box-shadow:0 0 16px rgba(91,140,255,.45);
}
pre{
  background:rgba(0,0,0,.42);border:1px solid var(--line);
  color:#d6e2ff;border-radius:11px;padding:16px 18px;overflow-x:auto;
  margin:0 0 14px;font-size:14px;line-height:1.6;
}
pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ──────────────────────────────────────────────────────── contact card */
.contact-card{
  background:linear-gradient(135deg,rgba(91,140,255,.14),rgba(194,100,240,.10));
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:32px;backdrop-filter:blur(10px);box-shadow:var(--glow);
}
.contact-label{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.contact-email{margin:0 0 10px;font-size:clamp(20px,3.2vw,28px);font-weight:700;letter-spacing:-.02em}
.contact-email a{color:#fff;word-break:break-word}
.contact-sub{margin:0;color:var(--muted);font-size:15.5px}

/* ─────────────────── contact form (unused until Cloud Run is live) */
.field{margin-bottom:18px}
.field label{display:block;font-size:15px;font-weight:650;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:10px;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.25);
}
.field-note{font-size:15px;margin:0 0 14px;min-height:1.2em}
.field-note.ok{color:#6ff0c2}
.field-note.err{color:#ff9a9a}

/* ────────────────────────────────────────────────────────────── footer */
.site-foot{background:rgba(4,7,14,.75);border-top:1px solid var(--line);color:var(--muted);padding:64px 0 26px;font-size:15px;backdrop-filter:blur(10px)}
.foot-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-brand .brand-name{color:#fff;font-size:19px}
.foot-brand .brand-name span{color:var(--muted)}
.foot-brand p{margin:10px 0 0;max-width:30ch;font-size:14.5px}
.site-foot h4{color:#fff;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
.site-foot nav{display:flex;flex-direction:column;gap:9px}
.site-foot nav a{color:var(--muted)}
.site-foot nav a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:13.5px}
.foot-base p{margin:0}
.foot-base a{color:var(--muted)}

/* ───────────────────────────────────────────────────────── responsive */
@media (max-width:900px){
  .feature-inner{grid-template-columns:1fr;gap:38px}
  .foot-inner{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:640px){
  body{font-size:16px}
  .site-head nav{gap:14px}
  .site-head nav a:not(.btn-sm){display:none}
  .hero{padding:66px 0 58px}
  .band,.feature,.closer{padding:62px 0}
  .card{padding:24px}
  .foot-inner{grid-template-columns:1fr;gap:26px}
  .cta-row .btn{flex:1 1 100%;text-align:center}
  /* blur is expensive on mobile GPUs — drop the animation, keep the colour */
  body::before{animation:none;filter:blur(40px)}
  body::after{animation:none}
}

/* Motion is decoration here, never information. Honour the preference. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  body::before,body::after{animation:none!important}
  .btn:hover,.card:hover{transform:none}
}

/* Some users force a light theme at OS level; keep text legible if the
   backdrop is stripped by a reader mode or forced-colors setting. */
@media (forced-colors:active){
  .card,.stages li,.contact-card{border:1px solid CanvasText}
  body::before,body::after{display:none}
  /* gradient-clipped headings render invisible when colours are forced */
  .hero h1,.page-head h1{
    background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;
  }
}