/* ===== Kryptark landing page ===== */

:root{
  --obsidian: #050505;
  --white: #f5f5f5;
  --grey: #9a9a9a;
  --grey-dim: #6e6e6e;
  --grey-faint: #3d3d3d;
  --accent: #00e5ff;
  --accent-soft: rgba(0,229,255,.16);
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.05);
  --glass: rgba(255,255,255,.03);
  --font-display: 'Geist', 'Segoe UI', sans-serif;
  --font-body: 'Geist', 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;
  --gutter: clamp(24px, 6vw, 120px);
  --radius: 0px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; background:var(--obsidian); }

body{
  background:
    radial-gradient(circle at top, rgba(0,229,255,.05), transparent 45%),
    radial-gradient(circle at bottom right, rgba(0,229,255,.03), transparent 60%),
    var(--obsidian);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
svg{ display:block; }
::selection{ background:var(--white); color:#000; }

/* ===================== NAV ===================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--gutter);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.site-nav.scrolled{
  background:rgba(5,5,5,.75);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  letter-spacing:.06em;
  color:var(--accent);
}
.nav-links{ display:flex; gap:36px; }
.nav-links a{
  font-size:14px; letter-spacing:.01em; color:var(--grey);
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--white); }
@media (max-width:820px){ .nav-links{ display:none; } }

/* Right-hand nav group: Install + Enter App. Kept as ONE flex child of .site-nav so the
   bar stays a three-item space-between layout and the centre links stay centred. */
.nav-actions{ display:flex; align-items:center; gap:10px; }
/* Install is secondary to Enter App — same size, quieter fill, so the primary CTA still
   reads as the primary CTA. */
.btn-nav-install{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--grey);
}
.btn-nav-install:hover{ color:var(--white); border-color:var(--accent); }
/* Narrow screens: keep the icon (it is self-explanatory) and drop the word, so the two
   buttons never wrap or crowd the logo. */
@media (max-width:560px){
  .btn-nav-install span{ display:none; }
  .btn-nav-install{ padding-left:10px; padding-right:10px; }
}

/* ===================== BUTTONS ===================== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  font-family:var(--font-body);
  border-radius:var(--radius); overflow:hidden; isolation:isolate;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
  cursor:pointer; white-space:nowrap;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .8s ease;
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:var(--accent); color:#ffffff;
  box-shadow:0 10px 30px -10px rgba(0,229,255,.4);
}
.btn-primary:hover{ box-shadow:0 16px 40px -8px rgba(0,229,255,.55); }
.btn-primary svg{ transition:transform .3s ease; }
.btn-primary:hover svg{ transform:translateX(4px); }

.btn-ghost{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--white);
}
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); }

.btn-nav{ padding:10px 20px; font-size:13.5px; }
.btn-lg{ padding:18px 34px; font-size:16px; }

/* ===================== HERO / SCROLL GATEWAY ===================== */
.hero{ position:relative; }
.hero-track{ height:320vh; position:relative; }
.hero-pin{
  position:sticky; top:0; height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

#particles{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; z-index:2; }

.gateway-wrap{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  perspective:1600px;
}
.gateway-tilt{ will-change:transform; transform-style:preserve-3d; }
.gateway-scale{ will-change:transform, opacity; }

.gateway{ width:min(70vmin, 760px); height:min(70vmin, 760px); display:block; overflow:visible; }
/* Slow ambient spin on the mark itself — separate element from gateway-tilt/gateway-scale
   (which are driven every animation frame by home.js's scroll "dive" transform). CSS and
   JS each own a different element's `transform`, so they compose instead of fighting —
   this keeps spinning at rest and never interferes with the scroll-driven zoom/tilt. */
/* NOTE: no transform-box:fill-box here (unlike the inner <g> rings below) — fill-box is
   spec-undefined for a ROOT <svg> embedded as an HTML replaced element, since the root
   svg has no geometry/fill of its own to compute a box from. That mismatch silently broke
   the rotation (transform-origin resolved to nowhere sensible). The default box for a
   normal element (border-box) is exactly what transform-origin:center needs here. */
#gatewaySvg{ animation:gatewaySpin 140s linear infinite; transform-origin:center; }
@keyframes gatewaySpin{ to{ transform:rotate(360deg); } }
#coreDot{ transform-box:fill-box; transform-origin:center; will-change:transform; }

.ring-outer{ transform-box:fill-box; transform-origin:center; animation:spinCW 150s linear infinite; }
.ring-inner{ transform-box:fill-box; transform-origin:center; animation:spinCCW 105s linear infinite; }
.sq-a{ transform-box:fill-box; transform-origin:center; animation:spinCW 190s linear infinite reverse; }
.sq-b{ transform-box:fill-box; transform-origin:center; animation:spinCCW 120s linear infinite; }
@keyframes spinCW{ to{ transform:rotate(360deg); } }
@keyframes spinCCW{ to{ transform:rotate(-360deg); } }

.hero-copy{ position:relative; z-index:3; max-width:920px; text-align:center; padding:0 24px; will-change:transform, opacity; }
.eyebrow{
  font-size:13px; letter-spacing:.24em; color:var(--grey);
  margin-bottom:20px; font-weight:500;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(44px, 7.4vw, 96px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--white);
}
.hero-title span{ display:block; }
.hero-title span:last-child{ color:var(--grey); }
.hero-emphasis{
  margin-top:18px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,2.6vw,26px); color:var(--accent); letter-spacing:-.01em;
}
.hero-sub{
  margin-top:22px; font-size:clamp(16px,2vw,18px);
  color:var(--grey); font-weight:400; max-width:640px; margin-left:auto; margin-right:auto;
}
.hero-cta{ margin-top:44px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.trust-pills{
  margin-top:56px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.pill{
  padding:8px 16px; font-size:12px; letter-spacing:.01em;
  font-family:var(--font-mono);
  border:1px solid var(--line); border-radius:999px;
  color:var(--grey-dim);
  background:transparent;
  transition:border-color .3s ease, color .3s ease;
}
.pill:hover{ border-color:var(--accent); color:var(--accent); }
.pill-label{
  font-family:var(--font-body); font-weight:600; color:var(--accent);
  border-color:var(--accent-soft); background:var(--accent-soft);
}

.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1.5px solid var(--line); border-radius:12px;
  z-index:3; will-change:opacity;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:3px; height:8px; border-radius:2px;
  background:var(--grey); transform:translateX(-50%);
  animation:scrollCue 1.8s ease infinite;
}
@keyframes scrollCue{ 0%{ opacity:1; top:6px; } 70%{ opacity:0; top:18px; } 100%{ opacity:0; top:6px; } }

/* ===================== REVEAL UTILITY ===================== */
.reveal{
  opacity:0; transform:translateY(24px) scale(.85);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--d,0) * 140ms);
}
.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.line{ display:block; }
.hl{ color:var(--accent); }

.section-title.reveal{ transform:translateY(20px) scale(.78); }
.section-title.reveal.is-visible{ transform:translateY(0) scale(1); }

/* ===================== SECTION HEADS ===================== */
.section-eyebrow{
  text-align:center; font-size:12.5px; letter-spacing:.24em; color:var(--grey-dim); margin-bottom:16px; font-weight:500;
}
.section-title{
  text-align:center; font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px,4.6vw,50px); line-height:1.14; margin-bottom:24px; color:var(--white);
  letter-spacing:-.01em;
}

/* ===================== ONE IDENTITY ===================== */
.identity{ padding:140px var(--gutter); max-width:1100px; margin:0 auto; }
.identity-layout{
  margin-top:64px; display:flex; gap:80px; flex-wrap:wrap; justify-content:center; align-items:flex-start;
}
.identity-tree{
  font-family:var(--font-mono); font-size:15px; line-height:2.1;
  border:1px solid var(--line); background:var(--glass); padding:32px 36px;
  flex:0 1 340px;
}
.tree-name{ color:var(--white); font-weight:600; margin-bottom:4px; }
.tree-row{ display:flex; align-items:center; gap:10px; color:var(--grey); }
.tree-branch{ color:var(--grey-faint); }
.tree-label{ flex:1; }
.tree-row svg{ color:var(--accent); flex-shrink:0; }
/* Checkmark lights up a beat after its row appears — the row does the "one by one"
   entrance (via .reveal + --d), the checkmark does its own small delayed "illuminate". */
.tree-check{ opacity:.15; color:var(--grey-faint); transition:opacity .5s ease, color .5s ease; }
.tree-row.is-visible .tree-check{ opacity:1; color:var(--accent); transition-delay:calc(var(--d,0) * 140ms + 260ms); }
.identity-becomes{ flex:0 1 420px; padding-top:8px; }
.identity-becomes h3{
  font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--white); margin-bottom:20px;
}
.becomes-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.becomes-pill{
  padding:9px 18px; font-size:13px; font-family:var(--font-mono);
  border:1px solid var(--line); color:var(--grey);
}
.identity-note{ margin-top:24px; color:var(--grey-dim); font-size:14.5px; }

/* ===================== MEET YOUR AI ===================== */
.meet-ai{ padding:140px var(--gutter); max-width:900px; margin:0 auto; text-align:center; }
.ai-capabilities{
  list-style:none; margin:44px auto 0; display:inline-flex; flex-direction:column; gap:14px; text-align:left;
}
.ai-capabilities li{ display:flex; align-items:center; gap:10px; color:var(--grey); font-size:16px; }
.ai-capabilities li svg{ color:var(--accent); flex-shrink:0; }

.ai-ui-mock{
  margin:64px auto 0; display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
}
.ai-ui-col{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:110px; padding:26px 14px; border:1px solid var(--line); color:var(--grey); font-size:13px;
}
.ai-ui-center{ border-color:var(--accent-soft); color:var(--accent); background:var(--accent-soft); width:130px; }
.ai-ui-arrow{ color:var(--grey-faint); font-size:20px; }
.ai-arks-note{
  margin-top:56px; color:var(--grey-dim); font-size:14.5px; max-width:640px; margin-left:auto; margin-right:auto;
}
.ai-arks-note b{ color:var(--accent); font-weight:600; }

/* ===================== EVERYTHING ENCRYPTED ===================== */
.encrypted{ padding:140px var(--gutter); max-width:820px; margin:0 auto; text-align:center; }
.encrypted-copy{ font-size:clamp(18px,2.4vw,22px); color:var(--grey); }
.encrypted-copy .line{ margin-bottom:6px; }
.encrypted-checklist{
  margin-top:52px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center;
}
.encrypted-checklist span{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--grey); font-family:var(--font-mono);
}
.encrypted-checklist svg{ color:var(--accent); flex-shrink:0; }

/* ===================== OWN YOUR IDENTITY ===================== */
.own-identity{ padding:140px var(--gutter); max-width:640px; margin:0 auto; text-align:center; }
.identity-compare{ margin:56px auto 0; display:inline-flex; flex-direction:column; gap:14px; text-align:left; }
.compare-row{ display:flex; align-items:center; gap:16px; font-family:var(--font-mono); font-size:16px; color:var(--grey-dim); }
.compare-from{ width:110px; }
.compare-arrow{ color:var(--grey-faint); }
.compare-to{ color:var(--grey); }
.compare-row-hl .compare-from,
.compare-row-hl .compare-to{ color:var(--white); font-weight:600; }
.compare-row-hl .compare-arrow{ color:var(--accent); }
.own-identity-copy{ margin-top:48px; font-size:17px; color:var(--grey); }

/* ===================== BUILD YOUR OWN INTERNET ===================== */
.internet{ padding:140px var(--gutter); max-width:760px; margin:0 auto; text-align:center; }
.internet-copy{ color:var(--grey); font-size:18px; }
.internet-nots{
  margin-top:44px; display:flex; flex-wrap:wrap; gap:28px; justify-content:center;
}
.internet-nots span{
  display:inline-flex; align-items:center; gap:8px; color:var(--grey-dim); font-size:14.5px;
}
.internet-nots svg{ color:var(--accent); flex-shrink:0; }

/* ===================== PRIVATE PAYMENTS ===================== */
.payments{ padding:140px var(--gutter); max-width:520px; margin:0 auto; text-align:center; }
.payment-flow{ margin:56px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.flow-node{
  padding:14px 26px; border:1px solid var(--line); color:var(--white); font-family:var(--font-mono); font-size:14px;
}
.flow-node-mid{ border-color:var(--accent-soft); background:var(--accent-soft); color:var(--accent); }
.flow-arrow{ color:var(--grey-faint); font-size:18px; }
.payment-copy{ color:var(--grey); font-size:17px; }

/* ===================== FINAL CTA ===================== */
.final-cta{
  padding:180px var(--gutter); text-align:center; display:flex; flex-direction:column; align-items:center; gap:36px;
  max-width:760px; margin:0 auto;
}
.final-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.6vw,50px); line-height:1.24; color:var(--white);
  letter-spacing:-.01em;
}
.final-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:center;
  font-family:var(--font-mono); font-size:15px; color:var(--grey);
}

/* ===================== FOOTER ===================== */
.site-footer{
  padding:64px var(--gutter) 44px; text-align:center; border-top:1px solid var(--line);
}
.footer-logo{ font-family:var(--font-display); font-weight:700; letter-spacing:.04em; color:var(--accent); font-size:17px; }
.footer-links{ margin:22px 0; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.footer-links a{ font-size:14px; color:var(--grey); transition:color .2s ease; }
.footer-links a:hover{ color:var(--white); }
.footer-fine{ font-size:12.5px; color:var(--grey-faint); font-family:var(--font-mono); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:720px){
  .hero-track{ height:260vh; }
  .gateway{ width:min(88vmin, 520px); height:min(88vmin, 520px); }
  .identity-layout{ flex-direction:column; align-items:center; gap:48px; }
  .ai-ui-mock{ flex-direction:column; }
  .ai-ui-arrow{ transform:rotate(90deg); }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-track{ height:100vh; }
  .hero-pin{ position:relative; }
  .ring-outer, .ring-inner, .sq-a, .sq-b, .scroll-cue span, #gatewaySvg{
    animation:none !important;
  }
  .reveal{ transition:none; opacity:1; transform:none; }
  .btn::after{ display:none; }
  #particles{ display:none; }
}


/* ── Mobile fixes ─────────────────────────────────────────────────────────── */
/* The nav logo must be tappable from anywhere on the page, and must never be
   overlapped by the hero headline — on narrow screens the h1 was riding up over it. */
.nav-logo {
    position: relative;
    z-index: 60;
    pointer-events: auto;
}

@media (max-width: 760px) {
    /* Push hero content clear of the fixed nav so headlines can't cover the logo. */
    .hero-copy { padding-top: 78px; }
    .hero-title { font-size: clamp(30px, 8.5vw, 46px); line-height: 1.1; }
    .hero-sub   { font-size: 15px; line-height: 1.62; }
    .eyebrow    { font-size: 10.5px; letter-spacing: .2em; }

    /* Side by side, not stacked. Both shrink rather than wrap. */
    .hero-cta {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        align-items: stretch;
    }
    .hero-cta .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 13px 12px;
        font-size: 13.5px;
        white-space: nowrap;
    }
    .hero-cta .btn svg { display: none; }   /* reclaim width for the label */

    .trust-pills { gap: 6px; }
    .pill { font-size: 10.5px; padding: 5px 9px; }

    /* Nothing may scroll the page sideways. */
    body, .hero, section { overflow-x: hidden; max-width: 100vw; }
    img, svg, pre, table { max-width: 100%; }
}

@media (max-width: 400px) {
    .hero-cta .btn { font-size: 12.5px; padding: 12px 8px; }
}

/* Install-app action on the landing page. The button is hidden until the browser
   actually offers an install, so it can never be a dead control. */
.final-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.45);
  color: #00ffff;
}
.btn-ghost:hover { background: rgba(0, 255, 255, 0.1); }
.install-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}