/* ============================================================
   NIGHTFALL — shared design system for the Zeno marketing site
   Tokens, typography, and reusable components used across all
   pages (index, privacy, terms, waitlist). Page-specific layout
   lives in each page's own <style> block.
   ============================================================ */

:root{
  --bg:#0E0D0B;
  --surface:#191510;
  --border:#242019;
  --text:#F2EFE8;
  --muted:#8A857A;
  --accent:#E0632A;
  --accent-2:#F3925C;
  --accent-ink:#1A0D06;

  --shadow-sm:0 4px 16px rgba(0,0,0,0.28);
  --shadow-md:0 20px 48px rgba(0,0,0,0.38);
  --shadow-lg:0 32px 80px rgba(0,0,0,0.45);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:100px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --container:1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a{color:inherit;}
ul{list-style:none;}

::selection{background:var(--accent);color:var(--accent-ink);}

*:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Typography scale ---------- */
h1,.nf-h1{
  font-size:clamp(34px,6vw,60px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.05;
}
h2,.nf-h2{
  font-size:clamp(28px,4.2vw,44px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1;
}
h3,.nf-h3{
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.nf-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.nf-sub{
  font-size:16px;
  color:var(--muted);
  line-height:1.75;
}
.nf-container{max-width:var(--container);margin:0 auto;padding-left:32px;padding-right:32px;}

/* ---------- Texture: dot grid + film grain ---------- */
.nf-dotgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(242,239,232,0.09) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 90%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 90%);
}
.nf-grain{
  position:fixed;inset:0;pointer-events:none;z-index:999;opacity:0.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Giant background wordmark ---------- */
.nf-wordmark{
  position:absolute;
  font-weight:800;
  letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(242,239,232,0.55);
  opacity:0.07;
  pointer-events:none;
  white-space:nowrap;
  z-index:0;
  line-height:1;
  user-select:none;
}

/* ---------- Buttons ---------- */
.nf-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);
  font-size:15px;font-weight:600;
  padding:14px 8px 14px 26px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform 0.18s ease,border-color 0.18s ease,background 0.18s ease;
}
.nf-btn:hover{transform:translateY(-1px);}
.nf-btn--solid{
  background:var(--accent);
  color:var(--accent-ink);
}
.nf-btn--solid:hover{background:var(--accent-2);}
.nf-btn--solid .nf-arrow-badge{
  background:var(--accent-ink);
  color:var(--accent-2);
}
.nf-btn--outline{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
  padding:14px 26px;
}
.nf-btn--outline:hover{border-color:rgba(242,239,232,0.3);background:rgba(242,239,232,0.03);}
.nf-btn--ghost{
  background:transparent;
  color:var(--muted);
  border:none;
  padding:14px 4px;
  text-decoration:underline;
  text-decoration-color:var(--border);
  text-underline-offset:4px;
}
.nf-btn--ghost:hover{color:var(--text);}
.nf-arrow-badge{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-size:14px;
}
.nf-btn--nav{
  padding:9px 8px 9px 18px;font-size:13px;
}
.nf-btn--nav .nf-arrow-badge{width:24px;height:24px;font-size:11px;}

/* ---------- Cards / surfaces ---------- */
.nf-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

/* ---------- Pills / labels ---------- */
.nf-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--surface);
  font-size:12px;color:var(--muted);
}
.nf-label-row{
  display:flex;gap:16px 28px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);letter-spacing:0.02em;
}

/* ---------- Fade-up scroll reveal ---------- */
.nf-fade{opacity:0;transform:translateY(28px);transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1),transform 0.7s cubic-bezier(0.4,0,0.2,1);}
.nf-fade.is-visible{opacity:1;transform:translateY(0);}

/* ---------- Shared nav ---------- */
.nf-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 32px;
  display:flex;justify-content:space-between;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background 0.35s ease,border-color 0.35s ease,backdrop-filter 0.35s ease;
}
.nf-nav.nav-scrolled{
  background:rgba(14,13,11,0.86);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nf-logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--text);text-decoration:none;}
.nf-logo span{color:var(--accent);}
.nf-navlinks{display:flex;gap:30px;align-items:center;}
.nf-navlinks a{font-size:13px;color:var(--muted);text-decoration:none;transition:color 0.15s;}
.nf-navlinks a:hover{color:var(--text);}
.nf-navlinks a.is-active{color:var(--accent-2);}

/* ---------- Shared footer ---------- */
.nf-footer{border-top:1px solid var(--border);padding:64px 32px 32px;position:relative;}
.nf-footer-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;max-width:var(--container);margin:0 auto;padding-bottom:44px;border-bottom:1px solid var(--border);}
.nf-footer-desc{font-size:13px;color:var(--muted);line-height:1.7;max-width:300px;margin-top:14px;}
.nf-footer-social{display:flex;gap:10px;margin-top:18px;}
.nf-social-link{width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;transition:all 0.15s;}
.nf-social-link:hover{border-color:rgba(242,239,232,0.2);color:var(--text);}
.nf-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.nf-footer-col{display:flex;flex-direction:column;gap:11px;}
.nf-footer-col-title{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.nf-footer-col a{font-size:13px;color:var(--muted);text-decoration:none;transition:color 0.15s;}
.nf-footer-col a:hover{color:var(--text);}
.nf-footer-bottom{max-width:var(--container);margin:22px auto 0;font-size:12px;color:var(--muted);}

@media(max-width:768px){
  .nf-nav{padding:14px 20px;}
  .nf-navlinks{display:none;}
  .nf-footer{padding:48px 20px 24px;}
  .nf-footer-inner{grid-template-columns:1fr;gap:40px;}
  .nf-footer-cols{grid-template-columns:repeat(2,1fr);}
  .nf-footer-bottom{text-align:center;}
}
@media(max-width:520px){
  .nav-cta-secondary{display:none;}
  .nf-btn--nav{font-size:12px;padding:8px 6px 8px 14px;}
}

/* ============================================================
   ATRIUM / HALO — below-the-hero section system
   Ghost word + halo glow, frosted glass cards, bento grid,
   shared section header. Hero is untouched by this system.
   ============================================================ */

.atrium-section{position:relative;padding:130px 32px;overflow:hidden;}
.atrium-section:nth-of-type(even){padding-top:120px;}

/* Ghost outline word — huge, centered, bleeding off the top edge */
.atrium-ghost-wrap{
  position:absolute;top:0;left:0;right:0;height:100%;
  display:flex;align-items:flex-start;justify-content:center;
  pointer-events:none;z-index:0;overflow:hidden;
}
.atrium-halo{
  position:absolute;top:-6%;left:50%;transform:translateX(-50%);
  width:min(900px,90vw);height:520px;
  background:radial-gradient(ellipse 50% 50% at 50% 40%,rgba(224,99,42,0.16) 0%,transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}
.atrium-ghost{
  position:relative;
  font-weight:800;
  letter-spacing:-0.03em;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,239,232,0.09);
  font-size:clamp(90px,14vw,220px);
  line-height:1;
  white-space:nowrap;
  transform:translateY(-14%);
  user-select:none;
}

/* Section header — eyebrow + one-line lead, centered above content */
.atrium-header{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 56px;}
.atrium-header .nf-eyebrow{display:block;margin-bottom:14px;}
.atrium-header h2{margin-bottom:14px;}
.atrium-header .nf-sub{margin:0 auto;}

.atrium-body{position:relative;z-index:2;max-width:var(--container);margin:0 auto;}

/* Frosted glass card — replaces solid nf-card within Atrium sections */
.glass-card{
  position:relative;
  background:rgba(25,21,16,0.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(242,239,232,0.09);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.glass-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,99,42,0.7),transparent);
}

/* Bento grid — asymmetric tile sizing for the Features section */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
  gap:16px;
  position:relative;z-index:2;
}
.bento-lg{grid-column:span 2;grid-row:span 2;}
.bento-md{grid-column:span 2;grid-row:span 1;}
.bento-sm{grid-column:span 1;grid-row:span 1;}

@media(max-width:980px){
  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
  .bento-lg{grid-column:span 2;grid-row:span 2;}
  .bento-md{grid-column:span 2;grid-row:span 1;}
  .bento-sm{grid-column:span 1;grid-row:span 1;}
}
@media(max-width:640px){
  .bento-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
  .bento-lg,.bento-md,.bento-sm{grid-column:span 1;grid-row:span 1;}
}

@media(max-width:768px){
  .atrium-section{padding:80px 20px;}
  .atrium-ghost{font-size:clamp(60px,20vw,120px);}
  .atrium-header{margin-bottom:40px;}
}