/* ============ DUCNET — Design System (Blu remix) ============ */
:root{
  /* --- legacy DARK tokens: used by the dashboard mockup, schema diagram & demo
     modal, which stay dark in BOTH themes (they read as product "screens") --- */
  --bg:#0e0a26;
  --bg-1:#171238;
  --bg-2:#1b1640;
  --panel:#221c46;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.20);
  --text:#e9eef6;
  --text-2:#bcbedb;
  --text-3:#8e90b6;

  /* --- brand --- */
  --red:#e2001a;
  --red-2:#ff2438;
  --azure:#1f93d6;
  --azure-2:#3aa7e8;
  --accent:#1f93d6;
  --g-green:#19b84a; --g-lime:#8ed03a; --g-yellow:#ffd200; --g-orange:#f58a00; --g-red:#e2001a;
  --energy:linear-gradient(90deg,#19b84a 0%,#8ed03a 28%,#ffd200 52%,#f58a00 76%,#e2001a 100%);
  --energy-v:linear-gradient(180deg,#19b84a 0%,#8ed03a 28%,#ffd200 52%,#f58a00 76%,#e2001a 100%);

  /* --- navy "frame" (header, hero, cta, footer) — identical in both themes --- */
  --navy:#221c46;
  --navy-1:#2a2356;
  --navy-grad:linear-gradient(165deg,#2d2659 0%,#231d49 58%,#1d1840 100%);
  --navy-ink:#eef0fb;
  --navy-ink-2:#bdbfdc;
  --navy-ink-3:#9092b8;
  --navy-border:rgba(255,255,255,.13);
  --navy-border-strong:rgba(255,255,255,.24);

  /* --- content tokens (DEFAULT = white-centre theme) --- */
  --page-bg:#f3f4fa;
  --ink:#1d1a3a;
  --ink-2:#55537c;
  --ink-3:#8a88a8;
  --c-bg:#ffffff;
  --c-bg-grad:linear-gradient(180deg,#ffffff,#fafaff);
  --c-border:#e7e7f1;
  --c-border-strong:#d6d6e6;
  --c-shadow:0 20px 44px -26px rgba(34,28,70,.28);
  --eyebrow:#7e7ca6;
  --chip-bg:#f4f4fb;
  --chip-border:#e6e6f1;
  --chip-text:#55537c;
  --photo-bg:#ececf4;

  --maxw:1200px;
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ===== all-blue theme: navy page, light text, translucent cards ===== */
html.theme-allblue{
  --page-bg:#201a42;
  --ink:var(--navy-ink);
  --ink-2:var(--navy-ink-2);
  --ink-3:var(--navy-ink-3);
  --c-bg:rgba(255,255,255,.045);
  --c-bg-grad:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  --c-border:rgba(255,255,255,.13);
  --c-border-strong:rgba(255,255,255,.24);
  --c-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  --eyebrow:#9092b8;
  --chip-bg:rgba(255,255,255,.05);
  --chip-border:rgba(255,255,255,.13);
  --chip-text:#bdbfdc;
  --photo-bg:#100c2a;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--page-bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
/* ambient glow only in the all-blue theme; white-centre stays clean */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:transparent}
html.theme-allblue body::before{
  background:
    radial-gradient(900px 600px at 80% -8%, rgba(226,0,26,.14), transparent 60%),
    radial-gradient(800px 600px at 8% 6%, rgba(31,147,214,.16), transparent 55%),
    radial-gradient(1000px 700px at 50% 112%, rgba(25,184,74,.07), transparent 60%);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
section{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- type ---- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--eyebrow);display:inline-flex;align-items:center;gap:10px;font-weight:500;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--energy)}
.section-head{max-width:680px;margin-bottom:56px}
.section-head h2{font-size:clamp(30px,4vw,46px);margin:18px 0 16px}
.section-head p{color:var(--ink-2);font-size:clamp(16px,1.6vw,18px)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;
  font-size:15px;padding:13px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 30px -10px color-mix(in srgb, var(--accent) 62%, transparent)}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, #fff);box-shadow:0 18px 42px -12px color-mix(in srgb, var(--accent) 78%, transparent)}
.btn-ghost{background:var(--surface-2);color:var(--navy-ink);border-color:var(--navy-border)}
.btn-ghost:hover{border-color:var(--navy-border-strong);background:rgba(255,255,255,.12)}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---- reveal: content is ALWAYS visible (no opacity-gated entrance). ---- */
html.js [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{transition:transform .6s var(--ease)}
  html.js [data-reveal]:not(.in){transform:translateY(14px)}
}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* dark "screen" widgets (dashboard mockup + demo modal) stay dark in BOTH themes:
   pin their inherited text tokens light so flipping --ink can't darken them. */
.dash-wrap,.demo-card{--ink:#eef0fb;--ink-2:#bcbedb;color:var(--text)}

/* badges / chips */
.tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chip-text);padding:6px 11px;border:1px solid var(--chip-border);border-radius:100px;background:var(--chip-bg);
}