@font-face{font-family:Inter;src:url('assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'League Spartan';src:url('assets/league-spartan-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* ============================================================
   DB8 DESIGN SYSTEM — Colours & Type
   Source: DB8 Labs pitch deck (Canva export, 25 slides)
   High-contrast, dark-first, cinematic pitch-deck aesthetic.
   ============================================================ */

/* --- Fonts -------------------------------------------------
   Display : League Spartan (open source, exact deck match)
   Body    : Canva Sans is a Canva-platform font and is NOT
             redistributable. Substituted with Inter as the
             closest neutral humanist/geometric sans, per the
             source design-system recommendation.  [SUBSTITUTION]
   Replace the @import with locally-hosted @font-face for offline
   use; drop ttf/woff2 into /fonts and wire them here.
----------------------------------------------------------- */

:root {
  /* ---- Core neutrals (dark-first) ---- */
  --db8-black:        #000000;  /* primary slide background / identity anchor */
  --db8-near-black:   #070707;  /* panels, translucent overlay depth */
  --db8-charcoal:     #111111;  /* secondary surface separation */
  --db8-white:        #ffffff;  /* primary text, headlines */
  --db8-soft-white:   #f5f4f4;  /* document / screenshot whites */
  --db8-silver:       #bdbdbd;  /* muted / de-emphasised headline words */
  --db8-grey:         #8d8d8d;  /* captions, labels, secondary copy */

  /* ---- Signal accents (use sparingly: 2–6% of a frame) ---- */
  --db8-red:          #ff1e16;  /* legacy signal red (palette only) */
  --db8-deep-red:     #c90000;  /* legacy deep red (palette only) */
  --db8-yellow:       #f2d158;  /* press / evidence highlight (rare) */
  --db8-cyan:         #6edcff;  /* legacy cyan (palette only) */

  /* ---- DB8 brand gradient (wordmark / brand moments only) ---- */
  --db8-pink:         #e43c9c;  /* gradient start · secondary-emphasis accent */
  --db8-purple:       #a884ff;  /* gradient middle · section-emphasis accent */
  --db8-blue:         #56c8ff;  /* gradient end · urgent-keyword accent */
  --db8-gradient:     linear-gradient(100deg, var(--db8-pink) 0%, var(--db8-purple) 50%, var(--db8-blue) 100%);

  /* ---- Environmental / photo-sampled tones ---- */
  --db8-forest:       #1f352d;  /* outdoor / documentary imagery tone */
  --db8-olive:        #6f7a47;  /* foliage highlight */
  --db8-cream:        #e9e8e8;  /* document blocks */
  --db8-auto-grey:    #35414a;  /* automotive / photo shadow */

  /* ---- Semantic roles ---- */
  --bg:               var(--db8-black);
  --bg-panel:         var(--db8-charcoal);
  --bg-overlay:       rgba(0,0,0,0.55);          /* protection gradient base */
  --fg1:              var(--db8-white);          /* primary text */
  --fg2:              var(--db8-silver);          /* muted text */
  --fg3:              var(--db8-grey);            /* captions / tertiary */
  --accent:           var(--db8-blue);           /* urgent keyword (default) */
  --accent-section:   var(--db8-purple);         /* section emphasis */
  --accent-secondary: var(--db8-pink);           /* secondary emphasis */
  --hairline:         rgba(255,255,255,0.18);     /* thin HUD frames / rules */
  --hairline-strong:  rgba(255,255,255,0.4);

  /* ---- Type families ---- */
  --font-display: "League Spartan", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Inter", "Open Sans", Arial, sans-serif; /* Canva Sans fallback */

  /* ---- Type scale (tuned for 1440×810 deck canvas) ---- */
  --t-hero:     120px;  /* hero title */
  --t-title:     72px;  /* slide title */
  --t-section:   38px;  /* section label */
  --t-metric:    30px;  /* metric heading */
  --t-body:      21px;  /* body copy */
  --t-caption:   13px;  /* captions / tags */

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-margin: 56px;  /* default safe margin on hero/profile slides */
  --space-margin-dense: 34px; /* dense proof slides */

  /* ---- Radii (the brand is mostly hard-edged) ---- */
  --radius-0: 0px;     /* default: sharp, editorial */
  --radius-sm: 4px;    /* subtle panel softening */
  --radius-md: 10px;   /* cards / inputs in UI contexts */

  /* ---- Elevation (used sparingly; brand prefers flat + hairlines) ---- */
  --shadow-card: 0 8px 30px rgba(0,0,0,0.6);
  --shadow-pop:  0 16px 50px rgba(0,0,0,0.7);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.db8-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg1);
  text-wrap: balance;
}

.db8-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-title);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg1);
  text-wrap: balance;
}

.db8-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-section);
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--accent-section);
}

.db8-metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-metric);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg1);
}

.db8-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--fg1);
}

.db8-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* ---- Accent helpers ---- */
.db8-kw-blue   { color: var(--db8-blue); }   /* urgent keyword */
.db8-kw-pink   { color: var(--db8-pink); }   /* secondary emphasis */
.db8-kw-purple { color: var(--db8-purple); } /* section emphasis */
.db8-kw-grey   { color: var(--db8-silver); }

/* DB8 brand gradient applied to text (use ONLY for wordmark / brand moments) */
.db8-gradient-text {
  background: var(--db8-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Black-to-transparent protection gradient for text over imagery */
.db8-protect {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}
.db8-protect-up {
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}

/* Thin HUD / technical frame */
.db8-frame { border: 1px solid var(--hairline); }
.db8-rule  { border: 0; border-top: 1px solid var(--hairline); }


html{scroll-behavior:smooth;background:#000;-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#fff;font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#fff;text-decoration:none}
a:hover{color:var(--db8-blue)}
@keyframes db8flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes db8pulse{0%,100%{opacity:0}50%{opacity:1}}
@keyframes db8ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes db8seq{0%{opacity:0}6%{opacity:1}22%{opacity:1}30%{opacity:0}100%{opacity:0}}
@keyframes db8step{0%{opacity:0}4%{opacity:1}11%{opacity:1}15%,100%{opacity:0}}
@keyframes db8draw{0%{opacity:1;stroke-dashoffset:1000}10%{opacity:1;stroke-dashoffset:0}14%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes db8model{0%{opacity:0;transform:scale(.92)}3%{opacity:1;transform:scale(1)}9%{opacity:1;transform:scale(1)}11%,100%{opacity:0;transform:scale(1)}}
@keyframes db8fade{from{opacity:0}to{opacity:1}}
@keyframes db8rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes db8blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.db8fx *{animation:none!important;opacity:0!important}}

.d1{background:#000;color:#fff;min-height:100vh}
.d2{position:fixed;top:0;left:0;right:0;z-index:30;padding:14px clamp(16px,4vw,64px) 20px;background:linear-gradient(180deg,rgba(0,0,0,.92) 40%,rgba(0,0,0,0));pointer-events:none}
.d3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.d4{display:flex;justify-self:start;pointer-events:auto}
.d5{height:clamp(30px,3vw,44px);width:auto;display:block}
.d6{display:flex;justify-content:center;pointer-events:auto}
.d7{display:flex;justify-content:center;gap:2px;padding:5px;border:1px solid var(--hairline);border-radius:999px;background:rgba(7,7,7,.92)}
.d8{padding:10px 16px;border-radius:999px;font-size:15px;white-space:nowrap;color:var(--db8-silver);transition:color .15s ease-out}
.d8:hover{color:#fff}
.d9{justify-self:end;pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:15px;line-height:1;white-space:nowrap;box-shadow:0 0 0 5px rgba(255,255,255,.05),0 0 28px rgba(86,200,255,.18);transition:filter .15s ease-out,transform .1s ease-out}
.d9:hover{filter:brightness(.9);color:#000}
.d9:active{transform:scale(.98)}
.d10{display:flex;flex-direction:column;gap:12px}
.d11{height:30px;width:auto;display:block}
.d12:hover{color:#fff}
.d13{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:clamp(140px,14vw,160px) clamp(20px,4vw,64px) clamp(48px,6vw,64px);box-sizing:border-box;background:radial-gradient(60% 80% at 75% 55%,#0d1418 0%,#000 65%)}
.d14{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(60% 70% at 75% 55%,#000,transparent);mask-image:radial-gradient(60% 70% at 75% 55%,#000,transparent)}
.d15{position:relative;z-index:1;width:100%;max-width:1680px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));align-items:center;gap:clamp(24px,4vw,64px)}
.d16{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.d17{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,calc(4.6vw + 16px),80px);line-height:.95;letter-spacing:-0.02em;text-transform:uppercase}
.d18{display:block}
.d19{color:var(--db8-blue)}
.d20{margin:0;max-width:480px;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--db8-silver);text-wrap:pretty}
.d21{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.d22{display:inline-flex;padding:7px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 6px rgba(255,255,255,.025),0 0 44px rgba(86,200,255,.18),0 18px 48px rgba(0,0,0,.55)}
.d23{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:18px 28px;border-radius:12px;background:#fff;color:#000;font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 20px rgba(86,200,255,.18);transition:filter .15s ease-out,transform .1s ease-out}
.d23:hover{filter:brightness(.9);color:#000}
.d23:active{transform:scale(.98)}
.d24{margin:0;font-size:14px;color:var(--db8-grey)}
.d25{position:relative;width:100%;max-width:760px;justify-self:stretch;margin:0 auto}
.d26{position:absolute;left:50%;top:0;width:720px;height:640px;margin-left:-360px;transform-origin:50% 0}
.d27{position:absolute;inset:0;perspective:1600px}
.d28{position:absolute;left:50%;top:50%;width:480px;height:300px;margin:-150px 0 0 -240px;transform-style:preserve-3d;transform:rotateX(60deg) rotateZ(-38deg) translateZ(-100px);transition:transform .9s cubic-bezier(.65,0,.35,1)}
.d29{position:absolute;inset:0;box-sizing:border-box;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));transform:translateZ(0px);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s ease-out,border-color .5s ease-out,box-shadow .5s ease-out,background .5s ease-out}
.d30{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:18px 22px;transition:opacity .2s ease-out}
.d31{font-size:13px;letter-spacing:.24em;color:#fff}
.d32{font-size:12px;letter-spacing:.2em;color:var(--db8-grey)}
.d33{position:absolute;inset:0;opacity:0;transition:opacity .4s ease-out}
.d34{position:absolute;top:18px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;color:var(--db8-silver)}
.d35{position:absolute;inset:0}
.d36{position:absolute;inset:0;width:100%;height:100%}
.d37{position:absolute;left:92px;top:96px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);white-space:nowrap;transition:color .3s,border-color .3s}
.d38{width:14px;height:14px;display:block;flex:none}
.d39{position:absolute;left:92px;top:170px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);white-space:nowrap;transition:color .3s,border-color .3s}
.d40{position:absolute;left:92px;top:244px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);white-space:nowrap;transition:color .3s,border-color .3s}
.d41{position:absolute;left:388px;top:96px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);white-space:nowrap;transition:color .3s,border-color .3s}
.d42{position:absolute;left:388px;top:170px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);white-space:nowrap;transition:color .3s,border-color .3s}
.d43{position:absolute;left:388px;top:244px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);white-space:nowrap;transition:color .3s,border-color .3s}
.d44{position:absolute;left:240px;top:170px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid rgba(63,212,255,.8);border-radius:10px;background:#071216;box-shadow:0 0 24px rgba(63,212,255,.25);font-size:13px;font-weight:600;color:#fff;white-space:nowrap}
.d45{flex:none}
.d46{position:absolute;inset:0;box-sizing:border-box;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));transform:translateZ(52px);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s ease-out,border-color .5s ease-out,box-shadow .5s ease-out,background .5s ease-out}
.d47{filter:drop-shadow(0 0 4px #3fd4ff)}
.d48{position:absolute;left:22px;top:56px;width:184px;height:224px;box-sizing:border-box;padding:14px;border:1px solid rgba(63,212,255,.75);border-radius:10px;background:#071216;box-shadow:0 0 24px rgba(63,212,255,.2);display:flex;flex-direction:column;gap:10px}
.d49{display:flex;align-items:center;gap:8px}
.d50{width:18px;height:18px;display:block;flex:none}
.d51{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.d52{font-size:10px;letter-spacing:.16em;color:var(--db8-grey)}
.d53{padding:6px 8px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.03);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--db8-silver)}
.d54{position:absolute;left:288px;right:22px;top:60px;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);transition:color .3s,border-color .3s}
.d55{width:15px;height:15px;display:block;flex:none}
.d56{color:#fff}
.d57{font-size:11px}
.d58{width:7px;height:7px;margin-left:auto;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,box-shadow .3s}
.d59{position:absolute;left:288px;right:22px;top:106px;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);transition:color .3s,border-color .3s}
.d60{position:absolute;left:288px;right:22px;top:152px;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);transition:color .3s,border-color .3s}
.d61{position:absolute;left:288px;right:22px;top:198px;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);transition:color .3s,border-color .3s}
.d62{position:absolute;left:288px;right:22px;top:244px;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:12px;color:var(--db8-grey);transition:color .3s,border-color .3s}
.d63{position:absolute;inset:0;box-sizing:border-box;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));transform:translateZ(104px);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s ease-out,border-color .5s ease-out,box-shadow .5s ease-out,background .5s ease-out}
.d64{position:absolute;left:22px;right:22px;top:54px;height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:14px;color:#fff}
.d65{display:flex;align-items:center;gap:2px}
.d66{width:1px;height:16px;background:#3fd4ff}
.d67{position:absolute;left:22px;right:22px;top:112px;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:5px}
.d68{padding:6px 6px;border:1px solid rgba(255,255,255,.14);border-radius:6px;font-size:9.5px;letter-spacing:.06em;white-space:nowrap;color:var(--db8-grey);transition:color .25s,border-color .25s,background .25s}
.d69{position:absolute;left:22px;right:22px;top:164px;height:42px;display:flex;align-items:center;gap:12px;padding:0 14px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:13px;opacity:0}
.d70{color:var(--db8-silver)}
.d71{margin-left:auto;color:var(--db8-grey)}
.d72{width:14px;height:14px;display:block;flex:none;opacity:.75}
.d73{position:absolute;left:22px;right:22px;top:214px;height:42px;display:flex;align-items:center;gap:12px;padding:0 14px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:13px;opacity:0}
.d74{position:absolute;inset:0;box-sizing:border-box;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));transform:translateZ(156px);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s ease-out,border-color .5s ease-out,box-shadow .5s ease-out,background .5s ease-out}
.d75{position:absolute;left:22px;right:22px;top:50px;display:flex;align-items:center;gap:10px}
.d76{font-size:15px;font-weight:600;color:#fff}
.d77{font-size:12px;color:var(--db8-grey)}
.d78{position:absolute;left:22px;right:22px;top:86px;height:34px;display:flex;align-items:center;gap:12px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:13px;color:var(--db8-grey);transition:color .3s}
.d79{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid rgba(255,255,255,.25);border-radius:50%;box-sizing:border-box;flex:none;transition:background .3s,border-color .3s}
.d80{margin-left:auto}
.d81{width:14px;height:14px;display:block;flex:none;opacity:.8}
.d82{position:absolute;left:22px;right:22px;top:128px;height:34px;display:flex;align-items:center;gap:12px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:13px;color:var(--db8-grey);transition:color .3s}
.d83{position:absolute;left:22px;right:22px;top:170px;height:34px;display:flex;align-items:center;gap:12px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:13px;color:var(--db8-grey);transition:color .3s}
.d84{position:absolute;left:22px;right:22px;top:212px;height:34px;display:flex;align-items:center;gap:12px;padding:0 10px;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0c0c0c;font-size:13px;color:var(--db8-grey);transition:color .3s}
.d85{position:absolute;left:22px;right:22px;bottom:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.1)}
.d86{height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;border-radius:2px;background:#3fd4ff;box-shadow:0 0 10px #3fd4ff}
.d87{position:absolute;inset:0;box-sizing:border-box;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));transform:translateZ(208px);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s ease-out,border-color .5s ease-out,box-shadow .5s ease-out,background .5s ease-out}
.d88{position:absolute;left:22px;right:22px;top:52px;height:30px;display:flex;align-items:center;gap:12px;font-size:13px}
.d89{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#141414;font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--db8-silver);flex:none}
.d90{width:116px;color:#fff}
.d91{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.d92{position:absolute;left:0;top:0;bottom:0;width:100%;transform:scaleX(0);transform-origin:0 50%;border-radius:2px;background:#3fd4ff;box-shadow:0 0 10px #3fd4ff}
.d93{width:66px;text-align:right;font-size:10px;letter-spacing:.14em;color:#3fd4ff;opacity:0;transition:opacity .3s}
.d94{position:absolute;left:22px;right:22px;top:96px;height:30px;display:flex;align-items:center;gap:12px;font-size:13px}
.d95{position:absolute;left:22px;right:22px;top:140px;height:30px;display:flex;align-items:center;gap:12px;font-size:13px}
.d96{position:absolute;left:22px;right:22px;top:184px;height:30px;display:flex;align-items:center;gap:12px;font-size:13px}
.d97{position:absolute;left:22px;right:22px;bottom:20px;display:flex;align-items:center;gap:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--db8-silver)}
.d98{display:flex;align-items:center;gap:6px}
.d99{width:13px;height:13px;display:block;flex:none}
.d100{padding: clamp(72px,11vw,180px) 20px clamp(48px,7vw,104px); display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; scroll-margin-top: 0; position: relative}
.d101{margin:0;max-width:1200px;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,6.4vw,104px);line-height:.92;letter-spacing:-0.025em;text-transform:uppercase;text-wrap:balance}
.d102{margin:0;max-width:620px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--db8-grey);text-wrap:pretty}
.d103{position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(180deg,rgba(0,0,0,0),#000); z-index: 1; left: 16px; top: -42px}
.d104{position:relative;scroll-margin-top:0}
.d105{max-width:1680px;margin:0 auto;padding:0 clamp(20px,6vw,96px)}
.d106{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(28px,5vw,96px);align-items:center;padding:clamp(48px,7vw,112px) 0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12) 50%,rgba(255,255,255,0)) top center/min(60%,720px) 1px no-repeat;scroll-margin-top:110px}
.d107{display:flex;flex-direction:column;gap:24px}
.d108{margin:0;font-size:13px;letter-spacing:.28em;color:var(--db8-silver)}
.d109{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,60px);line-height:.95;letter-spacing:-0.02em;text-transform:uppercase}
.d110{display:block;color:var(--db8-blue)}
.d111{margin:0;max-width:500px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--db8-silver);text-wrap:pretty}
.d112{position:relative;margin:0;border:1px solid rgba(86,200,255,.28);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(86,200,255,.06),0 0 56px rgba(86,200,255,.12),0 28px 64px rgba(0,0,0,.7)}
.d113{display:block;width:100%;height:auto}
.d114{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(28px,5vw,96px);align-items:center;padding:clamp(48px,7vw,112px) 0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12) 50%,rgba(255,255,255,0)) top center/min(60%,720px) 1px no-repeat;scroll-margin-top:110px;direction:rtl}
.d115{display:flex;flex-direction:column;gap:24px;direction:ltr}
.d116{position:relative;margin:0;direction:ltr;border:1px solid rgba(86,200,255,.28);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(86,200,255,.06),0 0 56px rgba(86,200,255,.12),0 28px 64px rgba(0,0,0,.7)}
.d117{position:relative;overflow:hidden;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 22%),radial-gradient(120% 75% at 50% 18%,#1a1a1a 0%,#0b0b0b 55%,#000 100%)}
.d118{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);height:88%;width:auto;max-width:94%;object-fit:contain;object-position:center bottom;opacity:.07;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.2) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.2) 100%)}
.d119{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:clamp(48px,5vw,80px) clamp(20px,6vw,96px) clamp(32px,3vw,48px);box-sizing:border-box}
.d120{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:48px clamp(24px,4vw,64px)}
.d121{display:flex;flex-direction:column;gap:20px;min-width:0}
.d122{display:flex}
.d123{height:44px;width:auto;display:block}
.d124{margin:0;font-size:12px;letter-spacing:.28em;color:var(--db8-grey)}
.d125{display:flex;flex-direction:column;gap:16px}
.d126{margin:0 0 4px;font-size:14px;color:var(--db8-grey)}
.d127{font-size:17px;font-weight:500;color:#fff}
.d127:hover{color:var(--db8-blue)}
.d128{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:500;color:#fff}
.d128:hover{color:var(--db8-blue)}
.d129{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:clamp(48px,5vw,72px);font-size:14px;color:var(--db8-grey)}
.d130{margin:0}
.d131{display:flex;flex-wrap:wrap;gap:24px}
.d132{color:var(--db8-silver)}
.d132:hover{color:#fff}
.d133{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;overflow-y:auto;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:db8fade .2s ease-out}
.d134{position:relative;width:min(100%,580px);margin:auto;border:1px solid rgba(86,200,255,.28);border-radius:18px;overflow:hidden;background:#0a0a0a;box-shadow:0 0 0 1px rgba(86,200,255,.06),0 0 64px rgba(86,200,255,.14),0 32px 80px rgba(0,0,0,.8);animation:db8rise .25s cubic-bezier(.2,.7,.2,1)}
.d135{position:absolute;top:18px;right:18px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:transparent;color:var(--db8-silver);cursor:pointer}
.d135:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.d136{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:32px 56px 24px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 140% at 0% 0%,#161a1d 0%,#0a0a0a 60%)}
.d137{height:32px;width:auto;display:block}
.d138{margin:0;text-wrap:balance;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,38px);line-height:.95;letter-spacing:-0.02em;text-transform:uppercase}
.d139{margin:0;max-width:400px;font-size:15px;line-height:1.55;color:var(--db8-silver);text-wrap:balance}
.d140{display:flex;flex-direction:column;gap:18px;padding:28px 32px 32px}
.d141{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:#fff}
.d142{height:50px;padding:0 16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#141414;color:#fff;font-family:var(--font-body);font-size:16px;outline:0;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.d142:focus-visible{border-color:rgba(86,200,255,.7);box-shadow:0 0 0 4px rgba(86,200,255,.12)}
.d143{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px}
.d144{position:relative;display:block}
.d145{width:100%;height:50px;padding:0 44px 0 16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#141414;color:#fff;font-family:var(--font-body);font-size:16px;outline:0;appearance:none;-webkit-appearance:none;color-scheme:dark;cursor:pointer;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.d145:focus-visible{border-color:rgba(86,200,255,.7);box-shadow:0 0 0 4px rgba(86,200,255,.12)}
.d146{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--db8-silver);pointer-events:none}
.d147{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;margin-top:6px;border:0;border-radius:12px;background:#fff;color:#000;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:16px;box-shadow:0 0 0 6px rgba(255,255,255,.04),0 8px 28px rgba(86,200,255,.2);transition:filter .15s ease-out,transform .1s ease-out}
.d147:hover{filter:brightness(.9)}
.d147:active{transform:scale(.98)}
.d148{margin:0;text-align:center;font-size:13px;color:var(--db8-grey)}
.d149{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:32px}
.d150{margin:0;font-size:13px;letter-spacing:.28em;color:var(--db8-blue)}
.d151{margin:0;font-size:16px;line-height:1.6;color:var(--db8-silver)}
.d152{height:48px;padding:0 22px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:transparent;color:#fff;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:15px}
.d152:hover{background:rgba(255,255,255,.06)}
/* Production behavior and responsive guards; the generated design rules above
   retain the handoff's exact dimensions, tokens, copy, assets and motion. */
[hidden]{display:none!important}
.header-mobile{display:none}
.context-stack-wrap{aspect-ratio:15/14;max-height:560px;height:auto}
.context-stack-scale{transform:scale(var(--stack-scale,1))}
.diagram{cursor:zoom-in}
.db8fx *{animation-play-state:paused!important}
.diagram[data-playing=true] .db8fx *{animation-play-state:running!important}
.motion-toggle{position:absolute;right:clamp(20px,4vw,64px);bottom:20px;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:8px 0;color:var(--db8-grey);font:11px var(--font-body);cursor:pointer;opacity:.7}
.motion-toggle:hover{color:#fff;opacity:1}
.motion-toggle [aria-hidden]{font-size:14px;width:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:110;top:12px;left:16px;transform:translateY(-150%);background:#fff;color:#000;border-radius:8px;padding:14px 18px;font-size:14px}
.skip-link:focus{transform:none;color:#000}
:focus-visible{outline:2px solid var(--db8-blue);outline-offset:5px}
header a[data-nav][aria-current=true]{color:var(--db8-blue)}
.intro-reveal,#services>p{position:relative;z-index:2}
.intro-word{display:inline-block}
.intro-reveal[data-reveal-ready] .intro-word{transition:color .09s linear,opacity .09s linear,transform .12s ease-out}
.mobile-menu-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:10px;border:1px solid #ffffff24;border-radius:12px;background:#070707;color:#fff;cursor:pointer;pointer-events:auto}
.mobile-menu-toggle:hover{border-color:#56c8ff70}
.menu-bars{display:flex;flex-direction:column;gap:5px;width:20px}
.menu-bars i{display:block;width:20px;height:1.5px;background:currentColor;transform-origin:center;transition:transform .2s ease,opacity .15s ease}
.mobile-menu-toggle[aria-expanded=true] .menu-bars i:first-child{transform:translateY(6.5px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded=true] .menu-bars i:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded=true] .menu-bars i:last-child{transform:translateY(-6.5px) rotate(-45deg)}
.mobile-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mobile-menu{display:flex;flex-direction:column;gap:0;max-height:calc(100svh - 104px);box-sizing:border-box;overflow-y:auto;padding:14px 22px 22px;border:1px solid #ffffff24;border-radius:18px;background:#080b0dfc;box-shadow:0 16px 48px #000b,0 0 32px #56c8ff10;pointer-events:auto}
.mobile-menu>a[data-nav]{display:flex;align-items:center;justify-content:center;padding:16px 12px;color:var(--db8-silver);font-size:19px;border-bottom:1px solid #ffffff12;transition:color .15s ease}
.mobile-menu>a[data-nav]:hover{color:#fff}
.mobile-menu-cta{display:flex;align-items:center;justify-content:center;align-self:center;gap:10px;margin-top:22px;padding:15px 24px;border-radius:999px;background:#fff;color:#000;font-size:15px;font-weight:600;box-shadow:0 0 0 5px #ffffff08,0 0 28px #56c8ff20}
.mobile-menu-cta:hover{color:#000;background:#eefaff}
dialog{font-family:var(--font-body);color:#fff;color-scheme:dark}
dialog::backdrop{background:transparent}
#audit-modal{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;color:#fff;display:none}
#audit-modal[open]{display:flex}
.audit-panel{flex:none;box-sizing:border-box}
#audit-result{animation:db8fade .2s ease-out}
.download-brief{height:48px;padding:0 22px;border:0;border-radius:12px;background:#fff;color:#000;font:600 15px var(--font-body);cursor:pointer}
.image-preview{width:min(1672px,calc(100vw - 40px));padding:0;border:1px solid rgba(86,200,255,.28);border-radius:16px;background:#080a0b;max-width:calc(100vw - 32px);max-height:calc(100svh - 40px);overflow:auto}
.image-preview::backdrop,.policy-preview::backdrop{background:#000c;backdrop-filter:blur(10px)}
.image-preview-toolbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;background:#080a0bf2;border-bottom:1px solid #ffffff1f;z-index:1}
.image-preview h2{margin:0;font:600 16px var(--font-body)}
.image-preview button,.policy-preview button{display:flex;align-items:center;justify-content:center;background:transparent;color:#bdbdbd;border:1px solid #ffffff24;width:40px;height:40px;border-radius:10px;font-size:25px;cursor:pointer}
.image-preview>img{width:100%;height:auto;display:block;cursor:zoom-in}
.image-preview.is-zoomed>img{width:1672px;max-width:none;cursor:zoom-out}
.policy-preview{max-width:520px;width:calc(100% - 80px);padding:32px;border:1px solid #56c8ff47;border-radius:18px;background:#0a0a0a}
.policy-preview button{float:right}
.policy-preview h2{font:800 32px/.95 var(--font-display);text-transform:uppercase;margin:16px 40px 24px 0}
.policy-preview p{font-size:15px;color:#bdbdbd;line-height:1.6;margin:0}
@media(max-width:760px){
 .header-desktop{display:none!important}.header-mobile{display:flex}.motion-toggle{font-size:10px}.image-preview{max-width:calc(100vw - 20px);width:calc(100vw - 20px)}
 /* Flatten the copy wrapper so the graphic can sit between title and description. */
 .hero-layout{grid-template-columns:minmax(0,1fr)}
 .hero-copy{display:contents;text-align:center}
 .hero-copy>h1{grid-row:1}
 .hero-layout>.context-stack-wrap{grid-row:2}
 .hero-copy>p{grid-row:3}
 .hero-copy>div{grid-row:4}
 .hero-copy>p,.hero-copy h1{margin-inline:auto;text-align:center}
 .hero-copy>div{align-items:center}
 .hero-cta-frame{max-width:100%;box-sizing:border-box}
 .hero-cta-frame>a{max-width:100%;box-sizing:border-box}
 .hero-copy>div>p{text-align:center;text-wrap:balance}
 .service-copy{align-items:center;text-align:center}
 .service-copy>p,.service-copy>h3{margin-inline:auto}
 .site-footer{text-align:center}
 .site-footer nav,.footer-brand{align-items:center}
 .site-footer .footer-bottom,.site-footer .footer-bottom>div{justify-content:center}
 .footer-bottom{flex-direction:column}
 #audit-result{align-items:center;text-align:center}
 .policy-preview h2,.policy-preview p{text-align:center}
}
@media(max-width:380px){.hero-cta-frame>a{font-size:14px;padding-inline:16px;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-toggle{display:none}.db8fx *{opacity:0!important}}

.submit-error{color:#ffb4b4;font:inherit;line-height:1.5}#audit-form [type=submit]:disabled{opacity:.65;cursor:wait}.noscript-notice{padding:2rem;text-align:center}#audit-form a{color:inherit;text-decoration:underline}#audit-result [tabindex]:focus{outline:2px solid #56c8ff;outline-offset:6px}