/* ============================================================
   QUANTEEC. Marketing landing page
   styles.css · framework-free · light-first, dark-aware
   Tokens mirror the Quanteec design system.
   ============================================================ */

/* ---------- FONTS (self-hosted, relative) ---------- */
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-Light.ttf") format("truetype");     font-weight:300; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-Regular.ttf") format("truetype");   font-weight:400; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-Medium.ttf") format("truetype");    font-weight:500; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-SemiBold.ttf") format("truetype");  font-weight:600; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-Bold.ttf") format("truetype");      font-weight:700; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("../fonts/figtree/Figtree-Black.ttf") format("truetype");     font-weight:900; font-display:swap; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* raw palette */
  --cyan:#21BCEE; --blue:#116BF8; --navy:#05269B;
  --white:#FFFFFF; --gray-soft:#DCE3EB; --gray:#878EA0; --black:#000000;
  --blue-700:#0a4fc4; --blue-050:#eaf2ff; --cyan-050:#e6f8fe;
  --ink-900:#050b1f; --ink-800:#0a1838; --ink-700:#112350;

  /* gradients */
  --gradient:linear-gradient(120deg,#05269B 0%,#116BF8 52%,#21BCEE 100%);
  --gradient-soft:linear-gradient(120deg,#116BF8 0%,#21BCEE 100%);
  --glow-cyan:radial-gradient(60% 60% at 50% 40%,rgba(33,188,238,.45) 0%,rgba(33,188,238,0) 70%);

  /* type */
  --font-display:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;
  --text-display:clamp(2.7rem,calc(1.1rem + 5.4vw),5.25rem);
  --text-h1:clamp(2.3rem,calc(1.3rem + 3.3vw),4rem);
  --text-h2:clamp(1.9rem,calc(1.3rem + 1.9vw),2.85rem);
  --text-h3:clamp(1.35rem,calc(1.15rem + .8vw),1.8rem);
  --text-h4:1.375rem; --text-lg:1.1875rem; --text-body:1.0625rem;
  --text-sm:.9375rem; --text-xs:.8125rem; --text-eyebrow:.75rem;

  /* spacing 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section-y:clamp(64px,8vw,120px);

  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* layout / motion */
  --maxw:1200px; --maxw-wide:1320px; --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:420ms;
}

/* ---------- LIGHT (default) ---------- */
:root {
  color-scheme:light;
  --bg:var(--white); --surface:var(--white); --surface-2:#f6f8fb;
  --surface-tech:var(--blue-050); --surface-invert:var(--ink-900);
  --fg:#0a1330; --fg-2:#46506b; --fg-strong:var(--navy); --fg-muted:var(--gray);
  --fg-on-accent:#fff; --fg-on-invert:#eef3fb;
  --accent:var(--blue); --accent-hover:#0e60e0; --accent-press:var(--blue-700);
  --action-bg:var(--accent); --action-hover:var(--accent-hover); --action-press:var(--accent-press);
  --accent-2:var(--cyan); --accent-deep:var(--navy);
  --border:var(--gray-soft); --border-strong:#c2ccd9; --border-accent:rgba(17,107,248,.32);
  --signal:var(--blue); --signal-bg:var(--blue-050); --ring:rgba(17,107,248,.45);
  --shadow-sm:0 2px 8px rgba(10,19,48,.06),0 1px 2px rgba(10,19,48,.04);
  --shadow-md:0 10px 30px -12px rgba(10,19,48,.16),0 2px 6px rgba(10,19,48,.05);
  --shadow-lg:0 30px 60px -20px rgba(8,29,90,.22),0 8px 18px -10px rgba(8,29,90,.12);
  --shadow-accent:0 18px 40px -16px rgba(17,107,248,.45);
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.86),rgba(234,242,255,.55));
  --glass-border:rgba(255,255,255,.7);
  --grid-line:rgba(17,107,248,.07);
}
/* ---------- DARK ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:var(--ink-900); --surface:var(--ink-800); --surface-2:var(--ink-700);
    --surface-tech:#0c1d44; --surface-invert:var(--white);
    --fg:#eaf0fb; --fg-2:#b9c4da; --fg-strong:#fff; --fg-muted:#8b94ab;
    --fg-on-accent:#fff; --fg-on-invert:#0a1330;
    --accent:#2f7dff; --accent-hover:#4d92ff; --accent-press:#1f6af0;
    --action-bg:#116BF8; --action-hover:#0e60e0; --action-press:#0a4fc4;
    --accent-2:var(--cyan); --accent-deep:#5b8cff;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --border-accent:rgba(47,125,255,.45);
    --signal:var(--cyan); --signal-bg:rgba(33,188,238,.12); --ring:rgba(47,125,255,.55);
    --shadow-sm:0 2px 10px rgba(0,0,0,.5);
    --shadow-md:0 12px 34px -14px rgba(0,0,0,.7);
    --shadow-lg:0 30px 64px -22px rgba(0,0,0,.8);
    --shadow-accent:0 18px 44px -16px rgba(33,188,238,.35);
    --glass-bg:linear-gradient(160deg,rgba(20,40,86,.7),rgba(10,24,56,.5));
    --glass-border:rgba(255,255,255,.12);
    --grid-line:rgba(120,170,255,.08);
  }
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--ink-900); --surface:var(--ink-800); --surface-2:var(--ink-700);
  --surface-tech:#0c1d44; --surface-invert:var(--white);
  --fg:#eaf0fb; --fg-2:#b9c4da; --fg-strong:#fff; --fg-muted:#8b94ab;
  --fg-on-accent:#fff; --fg-on-invert:#0a1330;
  --accent:#2f7dff; --accent-hover:#4d92ff; --accent-press:#1f6af0;
  --action-bg:#116BF8; --action-hover:#0e60e0; --action-press:#0a4fc4;
  --accent-2:var(--cyan); --accent-deep:#5b8cff;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --border-accent:rgba(47,125,255,.45);
  --signal:var(--cyan); --signal-bg:rgba(33,188,238,.12); --ring:rgba(47,125,255,.55);
  --shadow-sm:0 2px 10px rgba(0,0,0,.5);
  --shadow-md:0 12px 34px -14px rgba(0,0,0,.7);
  --shadow-lg:0 30px 64px -22px rgba(0,0,0,.8);
  --shadow-accent:0 18px 44px -16px rgba(33,188,238,.35);
  --glass-bg:linear-gradient(160deg,rgba(20,40,86,.7),rgba(10,24,56,.5));
  --glass-border:rgba(255,255,255,.12);
  --grid-line:rgba(120,170,255,.08);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--text-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease);
  overflow-x:hidden;
}
::selection{background:rgba(17,107,248,.18);}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;color:var(--fg-strong);text-wrap:balance;}
p{margin:0;}
[hidden]{display:none !important;}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.container.wide{max-width:var(--maxw-wide);}
.section{padding-block:var(--section-y);}
.section.tech{background:var(--surface-tech);}
.section.soft{background:var(--surface-2);}

/* ---------- PLACEHOLDER DEV LABELS ---------- */
[data-ph]{position:relative;}
.ph-label{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px dashed var(--border-accent);border-radius:inherit;pointer-events:none;z-index:10;
  padding:8px;}
body.qs-dev .ph-label{display:flex;}
body.qs-dev [data-ph-resolved] .ph-label{display:none;}

/* ---------- TYPE HELPERS ---------- */
.display,.q-display{font-family:var(--font-display);font-weight:900;font-size:var(--text-display);line-height:1.02;letter-spacing:0;}
.h1,.q-h1{font-family:var(--font-display);font-weight:800;font-size:var(--text-h1);line-height:1.08;letter-spacing:0;}
.h2,.q-h2{font-family:var(--font-display);font-weight:700;font-size:var(--text-h2);line-height:1.14;letter-spacing:0;}
.h3,.q-h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-h3);line-height:1.2;letter-spacing:0;}
.q-h4{font-family:var(--font-display);font-weight:600;font-size:var(--text-h4);line-height:1.25;}
.lead,.q-lead{font-size:var(--text-lg);line-height:1.65;color:var(--fg-2);}
.body,.q-body{color:var(--fg-2);}
.small,.q-small{font-size:var(--text-sm);color:var(--fg-muted);}
.muted,.q-muted{color:var(--fg-muted);}
.mono,.q-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;}