/* ============================================================
   Fete Labs — shared theme (Caribbean-sunset-meets-cyber)
   Ported from the homepage design system (index.html).
   Used by all subpages. The homepage stays self-contained.
   ============================================================ */

:root{
  --bg:#05070e;
  --panel:#070b13;
  --panel-2:#070d16;
  --ink:#eaf6ff;
  --ink-soft:#aebecd;
  --muted:#9fb3c4;
  --dim:#7e95a9;
  --dimmer:#5e7488;
  --bright:#cfe6f2;
  --cyan:#38e1ff;
  --teal:#2fe6c4;
  --aqua:#9fd9e8;
  --warm:#ffc36b;
  --warm-2:#ff9d54;
  --warm-3:#ff7d4d;
  --f-body:'Space Grotesk',sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --line:rgba(56,225,255,.12);
  --line-soft:rgba(56,225,255,.10);
  --card-grad:linear-gradient(165deg,rgba(10,16,26,.8),rgba(6,10,18,.8));
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
html{ scroll-behavior:smooth; }
body{ color:var(--ink); font-family:var(--f-body); overflow-x:clip; -webkit-font-smoothing:antialiased; }
a{ -webkit-tap-highlight-color:transparent; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(56,225,255,.28); color:#eaf6ff; }

/* ---- keyframes ---- */
@keyframes reveal{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(47,230,196,.55); } 50%{ opacity:.55; box-shadow:0 0 0 6px rgba(47,230,196,0); } }
@keyframes scan{ from{ transform:translateY(-100%); } to{ transform:translateY(900%); } }
@keyframes drift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(10px); } }

/* ---- scroll reveal ---- */
.reveal-on-scroll{ opacity:0; transform:translateY(34px); }
.reveal-on-scroll.in{ animation:reveal .7s ease-out forwards; }

/* ---- global overlays (grain + vignette) ---- */
.fx-grain{ position:fixed; inset:0; pointer-events:none; z-index:60; mix-blend-mode:overlay; opacity:.5; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.fx-vignette{ position:fixed; inset:0; pointer-events:none; z-index:59; background:radial-gradient(120% 80% at 50% -10%, transparent 55%, rgba(0,0,0,.55) 100%); }

/* ---- layout ---- */
.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:920px; margin:0 auto; padding:0 32px; }
.sect{ position:relative; z-index:5; padding:80px 0; }
.sect-tight{ padding:56px 0; }
.eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); margin:0 0 14px; }
.eyebrow.warm{ color:var(--warm-2); }
.sect-head{ margin-bottom:36px; }
h1,h2,h3{ margin:0; letter-spacing:-.02em; font-weight:700; }
h1{ font-size:clamp(40px,6.6vw,84px); line-height:.98; }
h2{ font-size:clamp(28px,4vw,50px); line-height:1.04; }
.lede{ margin:0; max-width:62ch; font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:var(--ink-soft); }
.grad-text{ background:linear-gradient(110deg,#38e1ff 0%,#2fe6c4 38%,#ffc36b 78%,#ff7d4d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 26px rgba(56,225,255,.3)); }
.teal-text{ color:var(--teal); }
.warm-text{ color:var(--warm); }

/* ---- status bar ---- */
.statusbar{ position:relative; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 26px; border-bottom:1px solid var(--line); background:rgba(4,8,16,.6); backdrop-filter:blur(8px); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.statusbar .live{ display:flex; align-items:center; gap:8px; }
.statusbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 2.2s infinite; }
.statusbar .mid{ display:flex; gap:22px; }
.statusbar .loc{ color:#ffb37a; }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 26px; border-bottom:1px solid rgba(56,225,255,.10); background:rgba(5,7,14,.72); backdrop-filter:blur(14px); }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand .mark{ position:relative; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(56,225,255,.5); border-radius:9px; background:linear-gradient(140deg,rgba(56,225,255,.16),rgba(255,125,77,.12)); box-shadow:0 0 22px rgba(56,225,255,.25), inset 0 0 14px rgba(56,225,255,.12); }
.brand .mark img{ width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(56,225,255,.45)); }
.brand .name{ font-weight:600; font-size:17px; letter-spacing:.01em; }
.brand .name em{ color:var(--cyan); font-style:italic; }
.nav-links{ display:flex; align-items:center; gap:24px; font-size:13.5px; color:var(--muted); }
.nav-links a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--cyan); }
.nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:9px; text-decoration:none; font-size:13px; font-weight:600; color:#04121a; background:linear-gradient(120deg,#38e1ff,#2fe6c4); box-shadow:0 0 24px rgba(56,225,255,.35); }

/* ---- mobile nav (hamburger + overlay, injected by fete.js) ---- */
.nav-toggle{ display:none; position:relative; z-index:56; width:42px; height:42px; padding:0; border:1px solid rgba(56,225,255,.22); border-radius:10px; background:rgba(56,225,255,.05); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ position:fixed; inset:0; z-index:45; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:90px 32px 32px; background:rgba(5,7,14,.97); backdrop-filter:blur(18px); transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .28s ease, transform .28s ease; }
.mobile-nav.open{ transform:none; opacity:1; pointer-events:auto; }
.mobile-nav a{ font-size:22px; font-weight:600; color:var(--ink); text-decoration:none; padding:16px 0; border-bottom:1px solid rgba(56,225,255,.1); }
.mobile-nav a[aria-current="page"]{ color:var(--cyan); }
.mobile-nav a.mn-cta{ color:var(--teal); border-bottom:none; margin-top:8px; }

/* ---- page hero ---- */
.page-hero{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:54vh; }
.page-hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.page-hero .veil{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,7,14,.82) 0%, rgba(5,7,14,.42) 46%, rgba(5,7,14,.16) 100%); }
.page-hero .inner{ position:relative; z-index:5; width:100%; padding:72px 0 60px; }
.page-hero h1{ margin:0 0 22px; max-width:16ch; animation:heroIn .8s .1s both ease-out; }
.page-hero .eyebrow{ animation:heroIn .7s .04s both ease-out; }
.page-hero .lede{ animation:heroIn .8s .2s both ease-out; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; animation:heroIn .8s .3s both ease-out; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:11px; text-decoration:none; font-weight:600; font-size:15px; font-family:var(--f-body); border:none; cursor:pointer; }
.btn-primary{ color:#04121a; background:linear-gradient(120deg,#38e1ff,#2fe6c4); box-shadow:0 8px 30px rgba(56,225,255,.3); }
.btn-warm{ color:#1a1106; background:linear-gradient(120deg,#ffc36b,#ff7d4d); box-shadow:0 8px 28px rgba(255,140,80,.28); }
.btn-ghost{ color:#dff4ff; border:1px solid rgba(56,225,255,.32); background:rgba(56,225,255,.05); }

/* ---- cards / surfaces ---- */
.card{ position:relative; border:1px solid rgba(56,225,255,.14); border-radius:18px; background:var(--card-grad); padding:24px; overflow:hidden; }
.card .accent{ position:absolute; top:0; left:0; width:100%; height:3px; }
.lift{ transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lift:hover{ transform:translateY(-6px); border-color:rgba(56,225,255,.4); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.idx{ font-family:var(--f-mono); font-size:12px; color:var(--cyan); letter-spacing:.12em; }
.pill{ align-self:flex-start; padding:5px 11px; border-radius:999px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.pill.cy{ color:var(--aqua); border:1px solid rgba(159,217,232,.4); background:rgba(159,217,232,.08); }
.pill.warm{ color:var(--warm); border:1px solid rgba(255,195,107,.4); background:rgba(255,195,107,.08); }
.pill.live{ color:var(--teal); border:1px solid rgba(47,230,196,.4); background:rgba(47,230,196,.08); }

/* ---- grids ---- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }

/* ---- mono key/value spec list ---- */
.spec{ display:grid; gap:1px; background:rgba(56,225,255,.1); border:1px solid rgba(56,225,255,.1); border-radius:11px; overflow:hidden; }
.spec .row{ display:flex; justify-content:space-between; gap:12px; background:var(--panel-2); padding:12px 15px; font-family:var(--f-mono); font-size:12.5px; }
.spec .k{ color:var(--dim); }
.spec .v{ color:var(--bright); text-align:right; }

/* ---- live badge ---- */
.live-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.live-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 2.2s infinite; }
.live-badge.dim{ color:var(--dim); }
.live-badge.dim::before{ background:var(--dim); animation:none; }

/* ---- form fields ---- */
.field{ display:flex; flex-direction:column; gap:6px; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.fld{ padding:13px 15px; border-radius:10px; border:1px solid rgba(56,225,255,.18); background:var(--panel-2); color:var(--ink); font-family:var(--f-body); font-size:14px; outline:none; transition:border-color .25s; }
.fld:focus{ border-color:rgba(56,225,255,.55); }
textarea.fld{ resize:vertical; min-height:130px; }
select.fld option{ background:var(--panel); color:var(--ink); }

/* ---- footer ---- */
.footer{ position:relative; z-index:5; border-top:1px solid var(--line); background:#04060c; }
.foot-grid{ max-width:1200px; margin:0 auto; padding:56px 32px 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
.foot-brand p{ margin:0; max-width:38ch; font-size:13.5px; line-height:1.65; color:var(--dim); }
.foot-brand .brand{ margin-bottom:14px; }
.foot-brand .mark{ width:34px; height:34px; box-shadow:none; }
.foot-col .t{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer); margin-bottom:14px; }
.foot-col .links{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{ font-size:13.5px; color:var(--muted); text-decoration:none; }
.foot-col a:hover{ color:var(--ink); }
.foot-bar{ border-top:1px solid var(--line-soft); }
.foot-bar .inner{ max-width:1200px; margin:0 auto; padding:16px 32px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); }
.foot-bar .ops{ display:flex; align-items:center; gap:8px; }
.foot-bar .ops .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse 2.2s infinite; }

/* ---- responsive ---- */
@media (max-width:960px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .grid-2{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav > .nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .statusbar .mid{ display:none; }
}
@media (max-width:620px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal-on-scroll{ opacity:1; transform:none; }
}