/* ============================================================
   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;
}

/* ---------- 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:.2s;
}
.nav-pill span{transition:transform .2s;}
.nav-pill:hover{color:#fff;border-color:rgba(150,190,255,.85);background:rgba(8,18,48,.5);}
.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) */
@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');
  }
}

/* ---------- 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);}
/* on very narrow screens, drop the logo to the left so the wider pill never overlaps it */
@media(max-width:560px){
  .site-header{justify-content:flex-start;}
}

/* ---------- 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;padding:11px 20px;
  border-radius:999px;transition:.2s;}
.btn-pill.solid{background:var(--blue);color:var(--white);border:1px solid var(--blue);}
.btn-pill.solid:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px);}
.btn-pill.solid:disabled{opacity:.65;cursor:default;transform: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);}

/* ---------- 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:.2s;}
.wl-field input::placeholder,.dl-field input::placeholder{color:var(--on-dark-40);}
.wl-field input:focus,.dl-field input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(0,93,248,.22);}
.wl-field input.is-invalid,.dl-field input.is-invalid{border-color:#ff9b9b;box-shadow:0 0 0 3px rgba(255,90,90,.18);}

/* ---------- 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;}
}