/* =========================================
   Vantuz · design tokens
   ========================================= */
:root{
  /* core palette — deep ink dominates, gradient image punctuates */
  --ink: #050608;            /* near-black, very subtle blue-cool */
  --ink-2: #0a0c12;
  --ink-3: #11141d;
  --ink-line: #1a1e2c;
  --ink-line-2: #262b3e;
  --paper: #f3efe6;          /* warm off-white — used ONCE (CTA break) */
  --paper-2: #ebe6da;
  --paper-line: #d6d1c0;
  --paper-ink: #131017;

  /* aurora — BLUE-dominant with a touch of violet (codex-leaning) */
  --aurora-1: #4a6df5;       /* royal blue */
  --aurora-2: #6c8bff;       /* lighter blue (use as accent text) */
  --aurora-3: #a8b9ff;       /* pale periwinkle blue */
  --aurora-4: #2233b4;       /* deep electric blue */
  --aurora-violet: #7b6cf2;  /* secondary — purple kept as small accent */
  --aurora-glow: rgba(74,109,245,.55);

  /* signals */
  --signal-warn: #ffb24a;
  --signal-bad: #ff5c5c;
  --signal-ok: #6fd7a1;
  --signal-info: #6fb8d7;

  /* brand mark */
  --vinho: #6b1e2e;
  --vinho-soft: #8a2b3f;

  /* text on ink */
  --txt: #e8e8f1;
  --txt-2: #b0b2c4;
  --txt-3: #7a7d95;
  --txt-4: #4b4e68;

  /* type — single clean sans across the whole site (Inter Tight = Söhne-like) */
  --f-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --f-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout — fluid gutter that breathes at every viewport */
  --max: 1560px;
  --gutter: clamp(20px, 4.2vw, 56px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink); color:var(--txt); font-family:var(--f-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* ============ layout ============ */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}

/* ============ section bg variations ============ */
.bg-ink{background:var(--ink); color:var(--txt)}
.bg-ink-2{background:var(--ink-2); color:var(--txt)}
.bg-paper{background:var(--paper); color:var(--paper-ink)}
.bg-paper .txt-2{color:#4b4439}
.bg-paper .txt-3{color:#736a5a}
.bg-paper .hairline{background:var(--paper-line)}
.bg-paper .card{background:#fff; border-color:var(--paper-line)}

/* aurora section — gradient image as bg */
.bg-aurora{position:relative; background:var(--ink); color:var(--txt); overflow:hidden}
.bg-aurora > .wrap, .bg-aurora > .aurora-content{position:relative; z-index:2}

/* ============ fade transitions between sections ============ */
/* applied on a section to bleed-fade into surrounding black */
.fade-top::before{
  content:''; position:absolute; left:0; right:0; top:0; height:200px; z-index:3;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(5,6,8,.6) 45%, transparent 100%);
  pointer-events:none;
}
.fade-bottom::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:240px; z-index:3;
  background: linear-gradient(to top, var(--ink) 0%, rgba(5,6,8,.6) 45%, transparent 100%);
  pointer-events:none;
}
/* paper fade (for the nude break) */
.fade-paper-top::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:160px; z-index:3;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(5,6,8,.4) 30%, transparent 100%);
  pointer-events:none;
}

/* ============ type helpers ============ */
.display{
  font-family:var(--f-display); font-weight:700; line-height:1; letter-spacing:-.035em;
}
.display-italic{ font-style:normal; }            /* legacy class — kept as no-op so old markup is safe */
.display-light{ font-weight:500; letter-spacing:-.02em; }

.eyebrow{font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-3)}
.eyebrow .dot{display:inline-block; width:6px; height:6px; background:var(--aurora-2); border-radius:50%; margin-right:8px; transform:translateY(-2px); box-shadow:0 0 12px var(--aurora-glow)}
.mono{font-family:var(--f-mono)}
.serif{font-family:var(--f-editorial)}
.italic{font-style:italic}
.txt-2{color:var(--txt-2)}
.txt-3{color:var(--txt-3)}
.txt-aurora{color:var(--aurora-2)}

/* ============ hairlines ============ */
.hairline{height:1px; background:var(--ink-line); width:100%}
.hairline-v{width:1px; background:var(--ink-line)}

/* ============ chips & buttons ============ */
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--ink-line); border-radius:999px; font-family:var(--f-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-2); background:rgba(255,255,255,.02)}
.bg-paper .chip{border-color:var(--paper-line); color:#4b4439; background:#fff}

/* Buttons — only two looks, ever:
   .btn-white  = white bg, black text  (default on dark sections)
   .btn-black  = black bg, white text  (used on white/paper sections)
   Legacy class names .btn-primary / .btn-aurora / .btn-ghost alias to these so nothing breaks. */
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:999px; font-family:var(--f-sans); font-weight:500; font-size:15px; letter-spacing:-.005em; transition:opacity .18s ease, transform .18s ease; cursor:pointer; border:1px solid transparent; line-height:1; white-space:nowrap;}
.btn-sm{padding:11px 20px; font-size:14px}
.btn-lg{padding:18px 34px; font-size:16px}
.btn-white,
.btn-primary,
.btn-aurora{background:#fff; color:#0a0a0a; border-color:#fff}
.btn-white:hover,
.btn-primary:hover,
.btn-aurora:hover{opacity:.86; transform:translateY(-1px)}
.btn-black,
.btn-ghost{background:#0a0a0a; color:#fff; border-color:#0a0a0a}
.btn-black:hover,
.btn-ghost:hover{opacity:.86; transform:translateY(-1px)}
/* Pill-outline variant used on the transparent nav over the hero — white outline only */
.btn-outline-white{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:rgba(255,255,255,.06); border-color:#fff}
/* On the paper (light) section, flip the defaults so they keep the same B/W rule */
.bg-paper .btn-white,
.bg-paper .btn-primary,
.bg-paper .btn-aurora{background:#0a0a0a; color:#fff; border-color:#0a0a0a}
.bg-paper .btn-black,
.bg-paper .btn-ghost{background:#fff; color:#0a0a0a; border-color:#0a0a0a}

/* ============ sticky nav ============ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  color:#e8e6f1;
  background:transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease, padding .35s ease;
  border-bottom:1px solid transparent;
}
.site-nav-inner{ max-width:var(--max); margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-nav.is-scrolled{
  background:rgba(8,10,16,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color:rgba(255,255,255,.08);
  padding:12px var(--gutter);
}
.site-nav .nav-links{ display:flex; align-items:center; gap:36px; font-size:15.5px; font-weight:450; color:rgba(255,255,255,.82); }
.site-nav .nav-links span{ cursor:pointer; transition: color .18s ease; white-space:nowrap; }
.site-nav .nav-links span:hover{ color:#fff; }
.site-nav .mark img{ height:46px; width:auto; display:block; }
.site-nav.is-scrolled .mark img{ height:38px; }
.site-nav.is-scrolled{ /* keep transition snappy */ }
@media (max-width: 900px){
  .site-nav .nav-links{ display:none }
}

/* ============ hero video bg ============ */
.hero-video-wrap{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-video-wrap video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video-wrap .hero-video-tint{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,6,8,.15) 0%, rgba(5,6,8,.35) 60%, rgba(5,6,8,.85) 100%);
}
.aurora-root{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.aurora-stage{position:absolute; inset:-10%; will-change: filter, transform; animation: auroraBreathe 14s ease-in-out infinite;}
.aurora-blob{
  position:absolute; border-radius:50%; filter:blur(110px); opacity:.7;
  mix-blend-mode:screen; will-change:transform;
}
.aurora-grain{
  position:absolute; inset:-30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.55; mix-blend-mode:overlay; animation: grainShift 8s steps(6) infinite;
}
.aurora-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 35%, rgba(5,6,8,.55) 75%, var(--ink) 100%);
}

@keyframes auroraBreathe {
  0%, 100% { filter: blur(0px) saturate(1.05) brightness(.95); transform: scale(1) rotate(0deg); }
  50%      { filter: blur(18px) saturate(1.2) brightness(1.05); transform: scale(1.04) rotate(.6deg); }
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6px, 4px); }
  40%  { transform: translate(8px, -3px); }
  60%  { transform: translate(-4px, -6px); }
  80%  { transform: translate(5px, 6px); }
  100% { transform: translate(0,0); }
}

/* faint dot grid */
.grid-dots{
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size: 28px 28px;
}
.grid-fine{
  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: 56px 56px;
}

/* ============ cards / panels ============ */
.card{background:rgba(255,255,255,.025); border:1px solid var(--ink-line); border-radius:14px;}
.card-flat{background:transparent; border:1px solid var(--ink-line); border-radius:14px;}

/* ============ pulsing live dot ============ */
.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#6fd7a1; box-shadow:0 0 0 0 rgba(111,215,161,.6); animation: pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,215,161,.7)}
  70%{box-shadow:0 0 0 10px rgba(111,215,161,0)}
  100%{box-shadow:0 0 0 0 rgba(111,215,161,0)}
}

/* legacy class — gradient text removed per direction; render as plain white */
.txt-grad{ color:#fff; background:none; -webkit-text-fill-color:#fff; }

/* logo mark — uses real Vantuz landscape PNG */
.mark{display:inline-flex; align-items:center; gap:10px}
.mark img.logo-landscape{height:30px; width:auto; display:block; opacity:.96}
.mark img.logo-icon{height:28px; width:auto; display:block; opacity:.96}
.bg-paper .mark img.logo-landscape,
.bg-paper .mark img.logo-icon{filter:invert(1)}

/* console / terminal */
.console{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.7;
  background: linear-gradient(180deg, rgba(10,10,20,.78), rgba(8,8,16,.92));
  border:1px solid var(--ink-line); border-radius:12px;
  backdrop-filter: blur(20px);
}
.console-head{
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--ink-line);
  font-family:var(--f-mono); font-size:11px; color:var(--txt-3); letter-spacing:.1em;
}
.console-head .traffic{width:10px; height:10px; border-radius:50%; background:#2a2c3e}
.console-body{padding:16px 18px; max-height:none}
.line-dim{color:var(--txt-3)}
.line-warn{color:var(--signal-warn)}
.line-bad{color:var(--signal-bad)}
.line-ok{color:var(--signal-ok)}
.line-info{color:var(--signal-info)}
.line-aurora{color:var(--aurora-2)}

/* number readout */
.readout-num{font-family:var(--f-display); font-weight:700; font-size:64px; line-height:1; letter-spacing:-.035em; color:#fff}
.readout-num.aurora{ color:#fff; background:none; -webkit-text-fill-color:#fff; }

/* utility */
.flex{display:flex} .ic{align-items:center} .jb{justify-content:space-between} .jc{justify-content:center}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}
.col{display:flex; flex-direction:column}
.grow{flex:1}
.sticky-top{position:sticky; top:0; z-index:50}

/* ============ animated marquee ============ */
.marquee{ overflow:hidden; }
.marquee-track{ display:flex; gap:64px; animation: marq 38s linear infinite; white-space:nowrap; }
@keyframes marq{ from{ transform: translateX(0) } to { transform: translateX(-50%) } }

/* ============ responsive collapse ============ */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
  .method-grid{ grid-template-columns: 1fr !important; }
  .intel-grid{ grid-template-columns: 1fr !important; }
  .cta-grid{ grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .threat-main{ grid-template-columns: 1fr !important; gap: 40px !important; }
  .console-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
}
@media (max-width: 760px){
  .hero-grid h1{ font-size: clamp(40px, 9vw, 64px) !important; }
  .nav-cta-sign-in{ display:none !important; }
  .threat-2col{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .threat-compare{ grid-template-columns: 1fr !important; }
  .threat-compare > div:last-child{ border-left:none !important; border-top:1px solid var(--ink-line); }
}

/* ============ mobile polish (≤900px) ============
   Hamburger on, desktop links off, tighter rhythm everywhere.        */
@media (max-width: 900px){
  /* Nav — hamburger replaces links + secondary CTA */
  .nav-hamburger { display:inline-flex !important; }
  .nav-links { display:none !important; }
  .nav-cta-sign-in { display:none !important; }
  .nav-cta-primary { display:none !important; }
  .site-nav .mark img { height:38px !important; }
  .site-nav.is-scrolled .mark img { height:34px !important; }
  .site-nav { padding:14px var(--gutter) !important; }
  .site-nav.is-scrolled { padding:10px var(--gutter) !important; }

  /* Section vertical rhythm — shrink the big 120-180px paddings */
  section[class*="bg-"] { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* Buttons: easier to tap, allow stacking */
  .btn { padding:14px 22px; font-size:14.5px; }
  .btn-lg { padding:16px 26px; font-size:15px; }
  .btn-sm { padding:11px 18px; font-size:13.5px; }

  /* Big display headings — keep dramatic but inside the viewport */
  .display { letter-spacing:-.028em; }

  /* Hero specifically — drop top padding because nav is shorter */
  .hero-grid { padding-top: 0 !important; min-height: 0 !important; }

  /* Aurora hero (home + every interior PageHero) — kill the giant 170-200px
     top padding and 80-110px bottom padding the inline style sets on the wrap.
     Leave just enough room for the fixed nav (~64px) plus a comfortable rhythm. */
  section.bg-aurora > .wrap {
    padding-top: 96px !important;
    padding-bottom: 48px !important;
  }
  /* Interior pages also follow the aurora hero with a section padded 120-140px;
     trim its top so the transition into the next block feels tight. */
  section.bg-aurora + section { padding-top: 48px !important; }

  /* Threat section (block 2) — sticky meta card overlaps content on mobile.
     Drop the entire left rail. */
  .threat-main > div:first-child { display: none !important; }
  .threat-main { gap: 0 !important; }

  /* Intel section (block 5 · Collective) — table doesn't fit and the globe
     wastes a whole viewport. Hide both on mobile; keep the prose + headline. */
  .intel-grid > div:last-child { display: none !important; }
  .intel-grid > div:first-child > .card:last-child { display: none !important; }

  /* Marquee — speed up on mobile (was 38s linear, too slow on a narrow viewport) */
  .marquee-track { animation-duration: 16s !important; }
}

/* ============ mobile polish (≤640px) ============ */
@media (max-width: 640px){
  /* Tighter gutter and bigger touch targets */
  :root { --gutter: 18px; }

  /* Buttons full-width when they stack — keeps a clean column on cards */
  .btn-block-mobile { width:100%; justify-content:center; }

  /* Tighten cards a touch */
  .card { border-radius:12px; }

  /* Display headlines — protect from spilling */
  h1.display, h2.display { letter-spacing:-.025em !important; }

  /* Footer big wordmark — shrink so it doesn't dwarf the page and the "z"
     doesn't wrap onto its own line. */
  footer .display[style*="22vw"] { font-size: clamp(44px, 13vw, 110px) !important; }
  /* Force the wordmark onto one line — the spaces between letters were wrapping
     the "z" onto its own row on narrow viewports. */
  .footer-bigmark { white-space: nowrap !important; }

  /* Hero floating actor-profile card — drop it on small screens, it would clip */
  .hero-mini-card { display:none !important; }

  /* Footer columns — stack the brand row, keep link cols at 2-up */
  .footer-grid{ grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Hero stat row — tighten gap so 3 stats fit comfortably */
  .hero-grid [class*="display"] + [class*="mono"] { letter-spacing: .12em !important; }
}

/* ============ tablet/mobile shared ============ */
@media (max-width: 760px){
  /* Stack any 2-up rows that weren't already collapsed by their own media query */
  .row-2 { grid-template-columns: 1fr !important; }

  /* Coverage 12-col grid on home → collapse cleanly */
  .coverage-grid { grid-template-columns: 1fr !important; }
  .coverage-grid > div { grid-column: span 1 !important; border-right: none !important; border-top: 1px solid var(--ink-line) !important; }
  .coverage-grid > div:first-child { border-top: none !important; }

  /* Intel live feed — scroll horizontally instead of cramming 6 cols */
  .intel-feed-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .intel-feed-scroll > * { min-width: 540px; }

  /* Pricing — single column, full-width CTAs */
  .plans-grid { gap: 14px !important; }

  /* Platform pipeline rows — tighten time column on phones */
  .pipe-row { grid-template-columns: 78px 24px minmax(0,1fr) !important; gap: 14px !important; padding: 18px 0 !important; }
  .pipe-row .mono { font-size: 12px !important; }

  /* Hide the giant overflow-text decorative wordmark on the smallest screens */
  .footer-bigmark { font-size: clamp(44px, 13vw, 110px) !important; }
}