/* ============================================================
   DTII / Ascert.EN — SHARED FOUNDATION
   Design tokens, self-hosted fonts, base reset/typography and the
   few helpers shared by every page. Page-specific styling lives in
   its own file (waitlist.css, resources.css).

   Brand: blue #005df8 · ink #1e1d1d · line #dddddd on the light theme;
   warm near-black #0d0e08 + #ececef on the dark theme (waitlist/resources).

   SECTIONS
     1. Fonts
     2. Design tokens (:root)
     3. Reset & document base
     4. Base typography
     5. Layout helpers (.wrap, .eyebrow, .sec-head)
     6. Dark-theme shell (.theme-dark)
     7. Utilities
   ============================================================ */

/* ---------- 1) FONTS (self-hosted) ---------- */
@font-face{
  font-family:'Ancorli';
  src:url('../fonts/Ancorli.woff2') format('woff2'),
      url('../fonts/Ancorli.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
/* DM Sans — official VARIABLE font (opsz 9–40, wght 100–1000), as Figma uses. */
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DMSans-Variable.ttf') format('truetype-variations');
  font-weight:100 1000;font-style:normal;font-display:swap;
}

/* ---------- 2) DESIGN TOKENS ---------- */
:root{
  /* Brand — light theme */
  --blue:#005df8;            /* primary */
  --blue-700:#0048c2;        /* hover shade */
  --blue-050:#eaf1ff;        /* light-blue tint */
  --white:#ffffff;
  --black:#000000;
  --line:#dddddd;            /* borders / dividers */
  --ink:#1e1d1d;             /* body text */
  --ink-60:rgba(30,29,29,.62);

  /* Dark theme — shared deep-BLUE brand world (waitlist + resources) */
  --wl-deep:#00071a;         /* deep navy brand base (was warm near-black) */
  --brand-blue-2:#04143f;    /* mid blue for hero gradients */
  --brand-blue-3:#0a2a8c;    /* brighter blue toward edges/bottom */
  --wl-ink:#ececef;          /* on-dark text / icon colour */
  --wl-btn:#191918;          /* "Join the waitlist" button fill */
  --wl-letterbox:#000004;    /* darkest artwork edge — fills scaled letterbox */
  --on-dark:#ececef;
  --on-dark-60:rgba(236,236,239,.62);
  --on-dark-40:rgba(236,236,239,.42);
  --dark-line:rgba(130,170,255,.20);   /* blue-tinted divider */
  --dark-card:rgba(15,38,98,.40);      /* blue-tinted card surface */
  --sky:#7fb0ff;             /* light-blue accent on dark surfaces */

  /* Geometry */
  --radius:18px;
  --radius-sm:12px;
  --maxw:1200px;

  /* Motion & depth (premium polish) — one easing + timing scale shared everywhere
     so every hover/focus/transition feels consistent and refined. */
  --ease:cubic-bezier(.22,.61,.36,1);   /* gentle ease-out */
  --dur:.24s;                            /* standard hover/transition */
  --dur-slow:.6s;                        /* entrance reveals */
  --shadow-soft:0 12px 30px -16px rgba(0,0,0,.55);   /* soft card depth */
  --shadow-lift:0 22px 50px -22px rgba(0,0,0,.62);   /* hover elevation */
  --glow-blue:0 10px 26px -10px rgba(0,93,248,.55);  /* primary-button glow */
}

/* ---------- 3) RESET & DOCUMENT BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
/* Pages scroll VERTICALLY by default (resources.html is long). Horizontal
   scroll stays off. The waitlist locks scrolling in its own page stylesheet. */
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;line-height:1.6;letter-spacing:.002em;
  color:var(--ink);background:var(--white);
  overflow-x:hidden;overflow-y:auto;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 4) BASE TYPOGRAPHY ---------- */
h1,h2,h3,h4,.font-head{
  font-family:'Ancorli','DM Sans',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--ink);
}
h1,h2{letter-spacing:-.006em;}
h1,h2,h3,h4{text-wrap:balance;}
p,li{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}

/* ---------- 5) LAYOUT HELPERS ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* SHARED HEADER CONTROLS — used identically by index.html and resources.html
   (the DTII logo size + the translucent brand "pill" link). */
/* matches index's header logo: 47.366px (2.96rem) at the 1440 design width */
.brand-logo{height:clamp(2.2rem, 1rem + 2.15vw, 2.96rem);width:auto;display:block;}
.nav-pill{
  display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;text-decoration:none;
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:clamp(0.8rem,1vw,0.95rem);color:#fff;
  padding:0.55rem 1.15rem;border-radius:999px;
  border:1px solid rgba(236,236,239,.45);background:rgba(8,18,48,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.nav-pill span{transition:transform var(--dur) var(--ease);}
.nav-pill:hover{color:#fff;border-color:rgba(150,190,255,.85);background:rgba(8,18,48,.5);
  transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(0,93,248,.6);}
.nav-pill:active{transform:translateY(0);}
.nav-pill:hover span{transform:translateX(3px);}

.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:13px;
  color:var(--blue);margin-bottom:14px;}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:currentColor;opacity:.55;}

.sec-head{text-align:center;max-width:760px;margin:0 auto 44px;}
.sec-head .eyebrow{justify-content:center;}
.sec-head h2{font-size:clamp(28px,3.6vw,46px);}
.sec-head p{margin-top:16px;color:var(--ink-60);font-size:17px;}

/* anchored sections clear any sticky header */
section[id]{scroll-margin-top:92px;}

/* ---------- 6) DARK-THEME SHELL ---------- */
/* Deep-blue brand world, shared by EVERY dark page (waitlist + resources) so they
   sit in one identical visual world. The branded blue rays artwork (bg-desktop.png)
   + a #005df8 SCREEN glow render as a FIXED, full-viewport backdrop behind all
   content via ::before; the page base colour is --wl-letterbox (#000004 — the
   artwork's own darkest edge) so the rays blend full-bleed to both edges with no
   seam/border. Page content scrolls OVER this static backdrop. On index the
   single-screen .wl-page is transparent and simply lets this backdrop show; on
   resources the long content scrolls over the same fixed rays. One definition,
   both pages — no divergence. */
.theme-dark{
  color:var(--on-dark);
  background-color:var(--wl-letterbox);
}
.theme-dark::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--wl-letterbox);
  background-image:
    radial-gradient(115% 78% at 50% 62%,
      rgba(0,93,248,.82) 0%, rgba(0,93,248,.30) 40%, rgba(0,93,248,0) 68%),
    url('../img/wl/bg-desktop.png');
  background-position:center, center;
  background-size:contain, contain;
  background-repeat:no-repeat, no-repeat;
  background-blend-mode:screen, normal;
}
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4,.theme-dark .font-head{
  color:var(--on-dark);
}
/* taller mobile rays art + matching glow (same swap index used to do inline).
   FULL-BLEED on phones (both index + resources): `cover` makes the rays fill the
   screen EDGE-TO-EDGE with no letterbox strips / border seam, anchored to the
   BOTTOM so the only thing trimmed is the plain dark sky at the TOP — the
   converging rays (and, on index, the area behind the bottom DTII wordmark) stay
   intact. background-color stays --wl-letterbox (#000004) as a safety. */
@media(max-width:768px){
  .theme-dark::before{
    background-image:
      radial-gradient(140% 62% at 50% 60%,
        rgba(0,93,248,.82) 0%, rgba(0,93,248,.30) 40%, rgba(0,93,248,0) 70%),
      url('../img/wl/bg-mobile.png');
    background-size:cover, cover;
    background-position:center bottom, center bottom;
  }
}

/* ---------- SHARED SITE HEADER (identical on index + resources) ----------
   Transparent header over the branded backdrop: DTII logo centred at the top, a
   translucent .nav-pill floating top-right. NOT sticky/fixed — it sits in normal
   flow exactly like index, so it scrolls with the page. */
.site-header{position:relative;width:100%;flex:0 0 auto;z-index:20;
  display:flex;justify-content:center;
  padding:clamp(1rem,2.4vh,1.9rem) clamp(1rem,4vw,3rem) 0;}
.site-logo{display:block;}
.site-logo .brand-logo{height:clamp(2.2rem, 1rem + 2.15vw, 2.96rem);width:auto;display:block;}
.site-pill{position:absolute;z-index:21;
  top:clamp(0.9rem,1.6vw,1.5rem);right:clamp(0.9rem,1.6vw,1.7rem);}
/* PHONES: the pill comes INTO FLOW and the header becomes logo-left / pill-right
   with space-between, so the logo and the pill can never overlap no matter how
   narrow the screen (flex keeps them apart). Both are shrunk to phone sizes, and
   the pill is small so it always fits beside the logo on one row. */
@media(max-width:768px){
  .site-header{justify-content:space-between;align-items:center;
    padding:clamp(0.85rem,2.6vh,1.35rem) clamp(0.9rem,4vw,1.4rem) 0;}
  .site-logo{flex:0 0 auto;}
  .site-logo .brand-logo{height:clamp(1.5rem,6.4vw,1.9rem);}
  .site-pill{position:static;flex:0 0 auto;}
  .site-pill.nav-pill{font-size:0.76rem;padding:0.4rem 0.8rem;gap:0.3rem;}
}
@media(max-width:360px){
  .site-pill.nav-pill{font-size:0.72rem;padding:0.36rem 0.68rem;}
}

/* ---------- SHARED PILL BUTTONS (used by both pages) ---------- */
.btn-pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:14px;letter-spacing:.01em;
  padding:11px 22px;border-radius:999px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease);}
/* primary: subtle top-lit gradient + soft brand glow + inner highlight = tactile */
.btn-pill.solid{color:var(--white);border:1px solid rgba(120,170,255,.55);
  background:linear-gradient(180deg,#1f72ff 0%,var(--blue) 55%,#0053e0 100%);
  box-shadow:var(--glow-blue),inset 0 1px 0 rgba(255,255,255,.22);}
.btn-pill.solid:hover{border-color:rgba(150,190,255,.8);transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(0,93,248,.7),inset 0 1px 0 rgba(255,255,255,.28);filter:saturate(1.05);}
.btn-pill.solid:active{transform:translateY(-1px);}
.btn-pill.solid:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;filter:none;}
.btn-pill.ghost{background:rgba(236,236,239,.02);color:var(--on-dark);border:1px solid rgba(255,255,255,.22);}
.btn-pill.ghost:hover{border-color:rgba(150,190,255,.7);background:rgba(236,236,239,.08);color:var(--white);
  transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(0,93,248,.5);}
.btn-pill.ghost:active{transform:translateY(-1px);}

/* ---------- SHARED MODAL FORM FIELDS (waitlist modal + download modal) ----------
   One pill-input definition so both modals look identical to each other and to the
   brand. Page files only position/scope their modals; the field look lives here. */
.wl-field,.dl-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.85rem;}
.wl-field label,.dl-field label{font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;color:var(--on-dark-60);}
.wl-field input,.dl-field input{
  height:3rem;padding:0 1.4rem;border-radius:999px;
  border:1px solid rgba(236,236,239,.45);background:rgba(236,236,239,.05);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  color:var(--on-dark);font-family:'DM Sans',sans-serif;font-size:1rem;outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);}
.wl-field input::placeholder,.dl-field input::placeholder{color:var(--on-dark-40);}
.wl-field input:hover,.dl-field input:hover{border-color:rgba(236,236,239,.7);background:rgba(236,236,239,.07);}
/* smooth, soft-glow focus ring */
.wl-field input:focus,.dl-field input:focus{border-color:var(--sky);
  background:rgba(236,236,239,.08);box-shadow:0 0 0 3px rgba(0,93,248,.22),0 0 22px -6px rgba(0,93,248,.4);}
.wl-field input.is-invalid,.dl-field input.is-invalid{border-color:#ff9b9b;box-shadow:0 0 0 3px rgba(255,90,90,.18);}

/* ============================================================
   8) PREMIUM POLISH — refinement details only (scrollbar, selection,
   smooth focus, entrance reveals, page fade-in). Subtle + restrained.
   ============================================================ */

/* smooth, branded custom scrollbar (dark track, blue thumb) */
html{scrollbar-width:thin;scrollbar-color:rgba(0,93,248,.6) rgba(255,255,255,.04);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.035);}
::-webkit-scrollbar-thumb{border-radius:999px;border:3px solid transparent;background-clip:content-box;
  background-color:rgba(0,93,248,.5);transition:background-color var(--dur) var(--ease);}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,93,248,.85);}

/* branded text selection */
::selection{background:rgba(0,93,248,.32);color:#fff;}

/* links ease their colour; refined, consistent focus-visible ring on controls */
a{transition:color var(--dur) var(--ease);}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--sky);outline-offset:3px;border-radius:8px;}

/* MOTION — gated behind html.js (set inline in <head>, so no flash) AND
   prefers-reduced-motion:no-preference. If JS is off / reduced motion, nothing is
   hidden and everything renders normally. reveal.js adds .is-in as elements enter
   the viewport; a <head> failsafe reveals all if reveal.js never runs. */
@media(prefers-reduced-motion:no-preference){
  /* gentle whole-page fade-in on load */
  @keyframes dtiiPageIn{from{opacity:0;}to{opacity:1;}}
  html.js body{animation:dtiiPageIn var(--dur-slow) var(--ease) both;}

  /* scroll-reveal: soft rise-in. Uses ANIMATION (not transition) so component
     hover transitions are never overridden. :where() keeps specificity at 0. */
  @keyframes dtiiReveal{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  html.js :where(.sec-head,.ref-item,.wl-heading,.wl-cta,.wl-social,.wl-wordmark){opacity:0;}
  html.js :where(.sec-head,.ref-item,.wl-heading,.wl-cta,.wl-social,.wl-wordmark).is-in{
    animation:dtiiReveal var(--dur-slow) var(--ease) both;animation-delay:var(--rd,0ms);}
}

/* ---------- 7) UTILITIES ---------- */
.is-hidden{display:none !important;}
/* visually hidden but available to assistive tech */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
}