/* ============================================================
   GANX NEXUS — Design System
   ============================================================ */

:root{
  --black-deep:#020608;
  --black-blue:#031014;
  --petrol:#07191D;
  --white:#FFFFFF;
  --gray:#A8B2B8;
  --green:#32E875;
  --green-dim: rgba(50,232,117,0.35);
  --green-soft: rgba(50,232,117,0.10);

  --border-soft: rgba(168,178,184,0.14);
  --border-green: rgba(50,232,117,0.25);

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', 'SF Mono', monospace;

  --container: 1220px;
  --ticker-h: 30px;
  --header-h: 84px;
  --offset: calc(var(--ticker-h) + var(--header-h));

  --ease: cubic-bezier(.22,1,.36,1);
  --mx: 50%;
  --my: 50%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--offset); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--black-deep);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ list-style:none; margin:0; padding:0; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--green); color:var(--black-deep); padding:10px 16px; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.container.narrow{ max-width:820px; }

.section{
  position:relative;
  padding:150px 0;
}
.section.alt{ background:var(--black-blue); }

.kicker{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 22px;
}
.kicker-index{
  color:var(--gray);
  opacity:0.5;
  font-size:11px;
  letter-spacing:0.05em;
}

.display-md{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem, 5.4vw, 4.4rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 28px;
}
.display-sm{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem, 3.6vw, 2.7rem);
  line-height:1.1;
  margin:0 0 10px;
}

.accent{ color:var(--green); }
.muted{ color:var(--gray); }

.lead{
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  color:var(--gray);
  max-width:640px;
  font-weight:300;
}
.lead-note{
  text-align:center;
  color:var(--gray);
  margin-top:40px;
  font-size:0.95rem;
  letter-spacing:0.02em;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 30px;
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--green);
  color:#03110A;
  box-shadow:0 0 0 rgba(50,232,117,0);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px -8px var(--green-dim);
}
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:var(--border-soft);
}
.btn-ghost:hover{
  border-color:var(--border-green);
  transform:translateY(-2px);
}
.btn-sm{ padding:11px 20px; font-size:12px; }
.btn-lg{ padding:17px 40px; }

/* ============ SIGNAL LINE ============ */
.signal-line{
  position:fixed;
  top:0; left:0;
  width:2px; height:100vh;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--green) 50%, transparent);
  opacity:0.35;
  transform:translateX(0);
  mix-blend-mode:screen;
}

/* ============ STATUS TICKER ============ */
.status-ticker{
  position:fixed;
  top:0; left:0; right:0;
  z-index:101;
  height:var(--ticker-h);
  background:var(--black-blue);
  border-bottom:1px solid var(--border-soft);
  overflow:hidden;
}
.ticker-track{
  display:flex;
  align-items:center;
  gap:48px;
  height:100%;
  white-space:nowrap;
  width:max-content;
  animation:ticker-scroll 34s linear infinite;
}
.ticker-item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.09em;
  color:var(--gray);
  opacity:0.75;
}
.ticker-item i{ width:5px; height:5px; border-radius:50%; flex:none; }
.dot-active-sm{ background:var(--green); box-shadow:0 0 6px var(--green-dim); }
.dot-dev-sm{ background:#E8C332; }
.dot-proto-sm{ background:var(--gray); }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation-play-state:paused; }
}
@media (max-width:720px){
  .status-ticker{ display:none; }
  :root{ --ticker-h:0px; --offset:var(--header-h); }
}

/* ============ HEADER ============ */
.site-header{
  position:fixed;
  top:var(--ticker-h); left:0; right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-header.scrolled{
  background:rgba(2,6,8,0.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--border-soft);
}
.header-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-word{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  letter-spacing:0.14em;
}
.brand-word em{ font-style:normal; color:var(--green); }

.main-nav{ display:flex; gap:38px; }
.main-nav a{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--gray);
  position:relative;
  padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-num{
  font-size:9.5px;
  color:var(--green);
  opacity:0.55;
  transition:opacity .3s var(--ease);
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--green);
  transition:width .3s var(--ease);
}
.main-nav a:hover{ color:var(--white); }
.main-nav a:hover .nav-num{ opacity:1; }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none;
  width:38px; height:38px;
  border:1px solid var(--border-soft);
  background:transparent;
  border-radius:2px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.nav-toggle span{
  width:16px; height:1px; background:var(--white);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(7,25,29,0.9), transparent 65%),
    linear-gradient(180deg, var(--black-deep), #010304 60%, var(--black-deep));
}
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
}
.hero-vignette{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse 80% 65% at 50% 45%, transparent 40%, var(--black-deep) 96%);
}
.hero-content{
  position:relative;
  z-index:3;
  text-align:center;
  padding:0 24px;
  max-width:920px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gray);
  margin:0 0 30px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px 2px var(--green-dim);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}
.hero-headline{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.8rem, 9vw, 6.6rem);
  line-height:0.98;
  letter-spacing:-0.015em;
  margin:0 0 32px;
}
.hero-headline .line{ display:block; }
.hero-sub{
  font-size:clamp(1.02rem, 1.6vw, 1.3rem);
  color:var(--white);
  font-weight:300;
  max-width:640px;
  margin:0 auto 10px;
}
.hero-sub-es{
  font-size:0.95rem;
  color:var(--gray);
  font-weight:300;
  max-width:560px;
  margin:0 auto 40px;
  font-style:italic;
}
.hero-ctas{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.scroll-cue{
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:22px; height:36px;
  border:1px solid var(--border-soft);
  border-radius:12px;
}
.scroll-cue span{
  display:block;
  width:3px; height:7px;
  margin:6px auto 0;
  background:var(--green);
  border-radius:2px;
  animation:scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(12px); }
  100%{ opacity:0; transform:translateY(0); }
}
.hero-frame-tl, .hero-frame-br{
  position:absolute;
  z-index:3;
  width:26px; height:26px;
  border-color:var(--border-green);
  border-style:solid;
  pointer-events:none;
  opacity:0.6;
}
.hero-frame-tl{ top:calc(var(--offset) + 40px); left:32px; border-width:1px 0 0 1px; }
.hero-frame-br{ bottom:40px; right:32px; border-width:0 1px 1px 0; }
@media (max-width:720px){ .hero-frame-tl, .hero-frame-br{ display:none; } }

/* ============ REVEALS ============ */
.reveal-fade, .reveal-up, .reveal-line{
  opacity:0;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 0.09s);
}
.reveal-fade{ transform:translateY(10px); }
.reveal-up{ transform:translateY(26px); }
.reveal-line{ transform:translateY(100%); }
.reveal-fade.in, .reveal-up.in, .reveal-line.in{
  opacity:1;
  transform:translateY(0);
}
.hero-headline .line{ overflow:hidden; }
.hero-headline .reveal-line{ transition-delay:calc(var(--d,0) * 0.12s + 0.1s); }

@media (prefers-reduced-motion: reduce){
  .reveal-fade, .reveal-up, .reveal-line{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ============ TRANSITION / NODE DIAGRAM ============ */
.transition-section{ text-align:center; }
.node-diagram{ margin-top:70px; }
.node-diagram-svg{ width:100%; max-width:820px; height:auto; display:block; margin:0 auto; }
.node-dot{ fill:var(--green); filter:drop-shadow(0 0 6px var(--green)); }
.node-label{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:0.14em;
  fill:var(--gray);
  text-anchor:middle;
}
.node-core{ fill:var(--green); }
.node-core-glow{ fill:var(--green); opacity:0.12; }
.node-core-label{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  fill:var(--white);
  text-anchor:middle;
}
.edges line{ stroke-dasharray:4 5; }

/* ============ MODULE GRID (ECOSYSTEM) ============ */
.module-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--border-soft);
  margin-top:64px;
  border:1px solid var(--border-soft);
}
.module-card{
  background:var(--black-deep);
  padding:44px 36px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:background .4s var(--ease), box-shadow .5s var(--ease);
}
.module-card.reveal-up.in{ transition:background .4s var(--ease), box-shadow .5s var(--ease), transform .4s var(--ease); }
.module-card:hover{
  background:#050d10;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6), 0 0 0 1px var(--border-green) inset;
}
.module-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px;
}
.module-index{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--gray);
  opacity:0.5;
}
.module-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid var(--border-soft);
  border-radius:20px;
  color:var(--gray);
}
.module-status i{ width:6px; height:6px; border-radius:50%; background:var(--gray); }
.status-active{ color:var(--green); border-color:var(--border-green); }
.status-active i{ background:var(--green); box-shadow:0 0 8px var(--green-dim); }
.status-dev{ color:#E8C332; border-color:rgba(232,195,50,0.3); }
.status-dev i{ background:#E8C332; }
.status-proto{ color:var(--gray); }

.module-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:0.01em;
  margin:0 0 6px;
}
.module-category{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray);
  margin:0 0 20px;
}
.module-desc{
  color:var(--gray);
  font-size:0.94rem;
  margin:0 0 18px;
  flex-grow:0;
}
.module-line{
  font-family:var(--font-display);
  font-size:0.95rem;
  color:var(--white);
  margin:0 0 22px;
}
.module-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:30px;
}
.module-tags li{
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--gray);
  border:1px solid var(--border-soft);
  padding:6px 11px;
  border-radius:20px;
}
.module-link{
  margin-top:auto;
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--green);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:gap .3s var(--ease);
}
.module-link:hover{ gap:12px; }

.labs-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.labs-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 14px;
  border:1px solid var(--border-soft);
  border-radius:2px;
}
.labs-item.dim{ opacity:0.55; }
.labs-name{ font-size:0.87rem; }
.labs-tag{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:0.1em;
  color:var(--green);
  border:1px solid var(--border-green);
  padding:3px 8px;
  border-radius:20px;
}
.labs-item.dim .labs-tag{ color:var(--gray); border-color:var(--border-soft); }

/* ============ PIPELINE (VENTURES) ============ */
.pipeline{
  margin-top:60px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
}
.pipeline-step{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  padding:16px 22px;
  border:1px solid var(--border-soft);
  border-radius:2px;
  position:relative;
  color:var(--gray);
}
.pipeline-step.final{ color:var(--green); border-color:var(--border-green); background:var(--green-soft); }
.pipeline-num{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--green);
  margin-bottom:6px;
  letter-spacing:0.1em;
}
.pipeline-arrow{ color:var(--gray); opacity:0.5; }

/* ============ OS FLOW ============ */
.os-flow{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.os-node{
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-align:center;
  padding:22px 10px;
  border:1px solid var(--border-soft);
  color:var(--gray);
  position:relative;
}
.os-node::after{
  content:'';
  position:absolute;
  right:-16px; top:50%;
  width:16px; height:1px;
  background:var(--border-soft);
}
.os-node:nth-child(4n)::after{ display:none; }
.os-node.highlight{ color:var(--green); border-color:var(--border-green); background:var(--green-soft); }
.os-node.final{ color:var(--white); background:var(--petrol); border-color:var(--border-green); }
.os-loop-note{
  text-align:center;
  color:var(--gray);
  font-size:0.85rem;
  margin-top:20px;
  letter-spacing:0.02em;
}
.os-statement{ margin-top:80px; text-align:center; }
.os-statement p{
  font-family:var(--font-display);
  font-size:clamp(1.1rem, 2.2vw, 1.6rem);
  margin:0 0 14px;
}
.os-statement .muted{ font-family:var(--font-body); font-size:1rem; margin-top:22px; }

/* ============ HUMAN x AI ============ */
.editorial{ text-align:center; }
.hx-grid{
  margin-top:70px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:40px;
  align-items:center;
  text-align:left;
}
.hx-col h3{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:0.18em;
  color:var(--green);
  margin:0 0 20px;
}
.hx-col ul li{
  font-size:1.05rem;
  color:var(--gray);
  padding:10px 0;
  border-bottom:1px solid var(--border-soft);
}
.hx-col:last-child{ text-align:right; }
.hx-center{
  width:110px; height:110px;
  border-radius:50%;
  border:1px solid var(--border-green);
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle, var(--green-soft), transparent 70%);
}
.hx-center span{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0.1em;
  color:var(--green);
  font-size:13px;
}

/* ============ INFRASTRUCTURE DIAGRAM ============ */
.infra-diagram{ margin-top:64px; }
.infra-core{
  border:1px solid var(--border-green);
  background:linear-gradient(180deg, var(--petrol), var(--black-blue));
  padding:40px;
  text-align:center;
  margin-bottom:2px;
}
.infra-core-label{
  display:block;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:0.12em;
  color:var(--green);
  margin-bottom:24px;
}
.infra-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.infra-chips span{
  font-size:11.5px;
  letter-spacing:0.03em;
  color:var(--white);
  border:1px solid var(--border-soft);
  padding:7px 13px;
  border-radius:20px;
  background:rgba(255,255,255,0.02);
}
.infra-companies{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  background:var(--border-soft);
}
.infra-company{
  background:var(--black-deep);
  text-align:center;
  padding:20px 10px;
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--gray);
  border-top:2px solid var(--green);
}
.infra-company.dim{ opacity:0.4; border-top-color:var(--gray); }

/* ============ FOUNDER ============ */
.founder-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:80px;
  align-items:center;
}
.portrait-frame{
  position:relative;
  border:1px solid var(--border-soft);
  overflow:hidden;
  aspect-ratio:5/6;
}
.portrait-placeholder{ width:100%; height:100%; }
.portrait-scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--green), transparent);
  opacity:0.6;
  animation:portrait-scan 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes portrait-scan{
  0%,100%{ top:4%; opacity:0; }
  10%{ opacity:0.6; }
  50%{ top:94%; opacity:0.6; }
  60%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .portrait-scan{ animation:none; opacity:0; }
}
.founder-role{
  font-family:var(--font-mono);
  color:var(--green);
  font-size:0.88rem;
  letter-spacing:0.04em;
  margin:0 0 26px;
}
.founder-quote{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-style:normal;
  color:var(--white);
  border-left:2px solid var(--green);
  padding-left:22px;
  margin:30px 0;
  line-height:1.4;
}

/* ============ MANIFESTO ============ */
.manifesto{
  background:#000103;
  text-align:center;
  padding:190px 0;
}
.manifesto-line{
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 3vw, 1.9rem);
  color:var(--gray);
  margin:0 0 16px;
  opacity:0.3;
  transition:opacity .15s linear;
}
@media (prefers-reduced-motion: reduce){
  .manifesto-line{ opacity:1 !important; }
}
.manifesto-final{
  margin-top:50px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem, 5vw, 3.2rem);
  letter-spacing:0.02em;
}

/* ============ NEXUS MAP ============ */
.nexus-map-wrap{
  margin-top:60px;
  position:relative;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:40px;
  align-items:center;
}
.nexus-map-svg{ width:100%; height:auto; overflow:visible; }
.map-edges line{ stroke-opacity:0.5; stroke-dasharray:3 5; }
.map-edges .edge-active{
  stroke-dasharray:5 6;
  filter:drop-shadow(0 0 3px rgba(50,232,117,0.55));
  animation:map-flow 1.2s linear infinite;
}
.map-edges .edge-dev{ stroke:#E8C332; stroke-opacity:0.35; }
.map-edges .edge-proto{ stroke:var(--gray); stroke-opacity:0.3; }
.map-edges .edge-future{ stroke:var(--gray); stroke-opacity:0.2; }
@keyframes map-flow{ to{ stroke-dashoffset:-22; } }
@media (prefers-reduced-motion: reduce){
  .map-edges .edge-active{ animation:none; }
}
.map-core{ fill:var(--green); }
.map-core-glow{ fill:var(--green); opacity:0.1; }
.map-core-label{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.1em;
  fill:var(--white);
  text-anchor:middle;
}
.map-node{ cursor:pointer; }
.map-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  fill:var(--gray);
  text-anchor:middle;
  transition:fill .3s var(--ease);
}
.map-node:hover .map-label, .map-node.active .map-label{ fill:var(--white); }
.dot{ transition:r .3s var(--ease), filter .3s var(--ease); }
.dot-active{ fill:var(--green); filter:drop-shadow(0 0 6px var(--green)); }
.dot-dev{ fill:#E8C332; filter:drop-shadow(0 0 5px rgba(232,195,50,0.5)); }
.dot-proto{ fill:var(--gray); }
.dot-future{ fill:#3a4448; }
.map-node:hover .dot, .map-node.active .dot{ r:11; }

.map-tooltip{
  border:1px solid var(--border-green);
  background:var(--black-blue);
  padding:28px;
  min-height:170px;
  transition:box-shadow .3s var(--ease);
}
.map-tooltip-status{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  color:var(--green);
  margin:0 0 14px;
}
.map-tooltip-name{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  margin:0 0 6px;
}
.map-tooltip-cat{
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gray);
  margin:0 0 16px;
}
.map-tooltip-desc{ color:var(--gray); font-size:0.92rem; margin:0; }

/* ============ FUTURE ============ */
.future-section{ text-align:center; }
.timeline{
  margin:60px 0 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.timeline-start, .timeline-end{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color:var(--green);
}
.timeline-line{
  width:200px; max-width:30vw; height:1px;
  background:linear-gradient(90deg, var(--green), var(--border-soft));
}
.future-nodes{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.future-node{
  font-family:var(--font-display);
  font-size:11.5px;
  letter-spacing:0.1em;
  color:var(--gray);
  border:1px dashed var(--border-soft);
  padding:12px 20px;
  border-radius:20px;
}

/* ============ CONTACT ============ */
.contact-section{ text-align:center; }
.contact-options{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin:36px 0 60px;
}
.contact-options span{
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--gray);
  border:1px solid var(--border-soft);
  padding:9px 16px;
  border-radius:20px;
}
.contact-form{ text-align:left; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--black-blue);
  border:1px solid var(--border-soft);
  color:var(--white);
  padding:13px 15px;
  font-family:var(--font-body);
  font-size:0.95rem;
  border-radius:2px;
  transition:border-color .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--green);
}
.field textarea{ resize:vertical; }
.contact-form .btn{ margin-top:8px; }
.form-status{
  margin-top:18px;
  color:var(--green);
  font-size:0.9rem;
  min-height:1.2em;
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--black-blue);
  border-top:1px solid var(--border-soft);
  padding:70px 0 34px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid var(--border-soft);
}
.footer-brand p{ color:var(--gray); font-size:0.9rem; margin:10px 0 0; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:26px 34px; }
.footer-nav a{
  font-size:12.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gray);
  transition:color .3s var(--ease);
}
.footer-nav a:hover{ color:var(--green); }
.footer-bottom{
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer-legal{ display:flex; gap:22px; }
.footer-legal a{ font-size:12px; color:var(--gray); }
.footer-copy{ font-size:12px; color:var(--gray); margin:0; }
.footer-tag{ font-size:12px; color:var(--gray); opacity:0.6; margin:0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .module-grid{ grid-template-columns:1fr; }
  .founder-grid{ grid-template-columns:1fr; gap:40px; }
  .portrait-frame{ max-width:280px; }
  .os-flow{ grid-template-columns:repeat(2, 1fr); }
  .os-node::after{ display:none; }
  .nexus-map-wrap{ grid-template-columns:1fr; }
  .infra-companies{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 720px){
  .container{ padding:0 22px; }
  .section{ padding:100px 0; }
  .main-nav{
    position:fixed;
    top:var(--header-h); left:0; right:0;
    background:rgba(2,6,8,0.97);
    backdrop-filter:blur(16px);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease);
    border-bottom:1px solid var(--border-soft);
  }
  .main-nav.open{ max-height:400px; }
  .main-nav a{ padding:18px 24px; border-bottom:1px solid var(--border-soft); width:100%; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-sm{ display:none; }
  .hx-grid{ grid-template-columns:1fr; text-align:center !important; gap:26px; }
  .hx-col:last-child{ text-align:center; }
  .hx-center{ margin:0 auto; order:-1; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; }
  .signal-line{ display:none; }
}

/* ============================================================
   PREMIUM LAYER — frames, cursor, grain, preloader, scrollbar
   ============================================================ */

/* Corner frame — two opposing corner brackets, enterprise-HUD feel */
.frame{ position:relative; }
.frame::before, .frame::after{
  content:'';
  position:absolute;
  width:16px; height:16px;
  border:1px solid var(--border-green);
  pointer-events:none;
  opacity:0.7;
  transition:width .35s var(--ease), height .35s var(--ease), opacity .35s var(--ease);
}
.frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.frame:hover::before, .frame:hover::after{ width:22px; height:22px; opacity:1; }

/* Tilt-ready elements: JS sets inline transform, this just primes the transition */
.module-card, .portrait-frame, .map-tooltip{
  transition:transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  transform-style:preserve-3d;
}

/* Magnetic buttons: JS drives inline transform, CSS just keeps it smooth */
[data-magnetic]{ transition:transform .25s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }

/* Grain texture overlay */
.grain{
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

/* Custom cursor (fine pointer, hover-capable devices only) */
.cursor-dot, .cursor-ring{
  position:fixed;
  top:0; left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--green); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--border-green); }
html.has-cursor .cursor-dot, html.has-cursor .cursor-ring{ opacity:1; }
html.has-cursor, html.has-cursor *{ cursor:none; }
.cursor-ring.hovering{ width:54px; height:54px; border-color:var(--green); background:var(--green-soft); }
.cursor-dot.hovering{ opacity:0; }

/* Preloader */
.preloader{
  position:fixed; inset:0;
  z-index:9998;
  background:var(--black-deep);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ animation:preloader-pulse 1.6s ease-in-out infinite; }
.preloader-lines{ stroke-dasharray:130; stroke-dashoffset:130; animation:preloader-draw 1.4s var(--ease) forwards; }
@keyframes preloader-draw{ to{ stroke-dashoffset:0; } }
@keyframes preloader-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.06); opacity:0.85; } }
.preloader-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--gray);
  text-transform:uppercase;
}
.preloader-dots{ animation:preloader-dots 1.2s steps(4) infinite; }
@keyframes preloader-dots{ 0%{ opacity:0.2; } 50%{ opacity:1; } 100%{ opacity:0.2; } }
@media (prefers-reduced-motion: reduce){
  .preloader-mark, .preloader-dots{ animation:none; }
  .preloader-lines{ stroke-dashoffset:0; animation:none; }
}

/* Scrollbar */
html{ scrollbar-color:var(--petrol) var(--black-deep); scrollbar-width:thin; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--black-deep); }
::-webkit-scrollbar-thumb{ background:var(--petrol); border-radius:6px; border:2px solid var(--black-deep); }
::-webkit-scrollbar-thumb:hover{ background:var(--green-dim); }

@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}