
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0E1520;
  --navy2:#131D2E;
  --navy3:#0A1018;
  --navy-mid:#192438;
  --white:#EEF2F8;
  --offwhite:#F2F5FA;
  --offwhite2:#E2E8F2;
  --muted:#7A8BA5;
  --slate:#8AAAC2;
  --orange:#BF7B30;
  --orange-lt:#D49040;
  --accent:#5A8DB5;
  --accent2:#4677A0;
  --border:rgba(255,255,255,0.07);
  --border-slate:rgba(140,180,210,0.13);
  --card:rgba(255,255,255,0.04);
  --mono:'DM Mono',monospace;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:84px}   /* fixed 64px nav + breathing room, so anchors land below it */
body{
  background:var(--navy);
  color:var(--white);
  font-family:var(--sans);
  overflow-x:hidden;
  line-height:1.6;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 80px;height:64px;
  background:rgba(14,21,32,0.94);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo svg{height:34px;width:auto}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{
  font-family:var(--mono);font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--white)}
.nav-cta{
  background:var(--orange) !important;color:var(--navy) !important;
  padding:8px 20px;border-radius:4px;font-weight:600 !important;
  letter-spacing:0.5px !important;font-size:12px !important;
  transition:background 0.2s !important;
}
.nav-cta:hover{background:var(--orange-lt) !important}

/* ── HERO SLIDESHOW ── */
.hero{
  min-height:100vh;
  position:relative;
  display:flex;align-items:center;
  overflow:hidden;
}
.slideshow{position:absolute;inset:0;z-index:0}
.slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.5s ease;
}
.slide.active{opacity:1}
.hero-scanline{
  position:absolute;top:0;left:0;right:0;
  height:3px;z-index:3;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 30%,var(--orange-lt) 60%,transparent 100%);
  animation:scan 4s ease-in-out infinite;
}
@keyframes scan{
  0%{transform:translateY(0);opacity:1}
  80%{transform:translateY(100vh);opacity:0.3}
  100%{transform:translateY(100vh);opacity:0}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    120deg,
    rgba(14,21,32,0.95) 0%,
    rgba(14,21,32,0.80) 45%,
    rgba(14,21,32,0.30) 70%,
    rgba(14,21,32,0.45) 100%
  );
}
.hero-grid-lines{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(148,184,216,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,184,216,0.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-content{
  position:relative;z-index:4;
  padding:150px 80px 80px;
  max-width:760px;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--orange);
  border:1px solid rgba(191,123,48,0.3);
  padding:6px 14px;border-radius:2px;margin-bottom:32px;
}
.hero-tag::before{content:'●';font-size:7px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
h1{
  font-family:var(--serif);
  font-size:clamp(42px,6vw,74px);
  line-height:1.1;font-weight:700;
  margin-bottom:24px;
  color:var(--white);
}
h1 em{font-style:italic;color:var(--accent)}
.hero-sub{
  font-size:17px;color:rgba(255,255,255,0.72);
  line-height:1.65;max-width:520px;margin-bottom:40px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary{
  background:var(--orange);color:var(--navy);
  padding:14px 30px;border-radius:4px;
  font-weight:600;font-size:14px;text-decoration:none;
  transition:background 0.2s;display:inline-block;
}
.btn-primary:hover{background:var(--orange-lt)}
.btn-outline{
  border:1px solid rgba(255,255,255,0.25);color:var(--white);
  padding:14px 30px;border-radius:4px;
  font-size:14px;text-decoration:none;
  transition:border-color 0.2s;display:inline-block;
}
.btn-outline:hover{border-color:rgba(255,255,255,0.6)}
.hero-stats{
  display:flex;gap:56px;margin-top:60px;
  border-top:1px solid var(--border);padding-top:36px;
  flex-wrap:wrap;
}
.hero-stat-num{
  font-family:var(--mono);font-size:64px;font-weight:500;
  color:var(--orange);display:block;line-height:1;
}
.hero-stat-label{
  font-size:11px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;
  font-family:var(--mono);margin-top:6px;display:block;
}
.slide-dots{
  position:absolute;bottom:32px;left:80px;z-index:5;
  display:flex;gap:8px;
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.3);cursor:pointer;transition:background 0.3s;
}
.dot.active{background:var(--orange)}

/* ── SECTION SHARED ── */
section{padding:120px 80px}
.section-inner{max-width:1240px;margin:0 auto}
.eyebrow{
  font-family:var(--mono);font-size:11px;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px;
}
h2{
  font-family:var(--serif);
  font-size:clamp(34px,4.5vw,58px);
  line-height:1.15;font-weight:700;
  margin-bottom:16px;
}
h2 em{font-style:italic;color:var(--accent)}
.section-sub{
  font-size:17px;color:rgba(255,255,255,0.65);
  line-height:1.7;max-width:680px;margin-bottom:64px;
}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.6s,transform 0.6s}
.reveal.visible{opacity:1;transform:none}

/* ── PROBLEM ── */
.problem-bg{
  background:var(--navy2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:120px 80px;
}
.problem-impact{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;margin-top:64px;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.pi-stat{
  padding:56px 48px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:14px;
  transition:background 0.2s;
}
.pi-stat:hover{background:rgba(191,123,48,0.04)}
.pi-big{
  font-family:var(--mono);
  font-size:clamp(64px,8vw,96px);
  font-weight:500;color:var(--orange);
  line-height:0.9;letter-spacing:-3px;
}
.pi-plus{font-size:0.55em;letter-spacing:0;vertical-align:super;opacity:0.75}
.pi-unit{font-size:0.42em;letter-spacing:0;vertical-align:super;opacity:0.7}
.pi-mi{font-size:0.3em;letter-spacing:1px;vertical-align:super;opacity:0.6;margin-left:2px}
.pi-label{font-size:18px;font-weight:600;color:var(--white);line-height:1.3}
.pi-context{
  font-family:var(--mono);font-size:11px;
  color:var(--muted);letter-spacing:0.3px;line-height:1.65;
}
.problem-close{
  margin-top:72px;
  font-family:var(--serif);
  font-size:clamp(20px,2.5vw,28px);
  font-style:italic;
  color:rgba(238,242,248,0.5);
  line-height:1.55;text-align:center;
}
.psb-sep{color:var(--border-slate);font-size:14px}

/* ── PLATFORM AT A GLANCE (flywheel) ── */
.flywheel-section{
  background:#080b11;              /* matches graphic's void edge → seamless blend */
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.flywheel-frame{
  /* Asymmetric: LEFT edge aligns to the 1240 content column (matches the heading),
     RIGHT edge extends to ~24px from the viewport edge → as big as possible while aligned. */
  margin:52px 0 0;
  margin-left:max(0px, calc(50vw - 700px));   /* 700 = 1240/2 + 80px section padding */
  margin-right:-56px;                          /* cancels most of the 80px right padding → 24px gutter */
}
.flywheel-embed{
  position:relative;width:100%;
  aspect-ratio:1480 / 1108;       /* exact stage ratio, no letterboxing */
  background:#080b11;
}
.flywheel-embed iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* ── EDITORIAL IMAGE BREAK ── */
.img-break{
  position:relative;height:65vh;min-height:400px;max-height:700px;overflow:hidden;
  padding:0;
}
.img-break-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 40%;
  transform:scale(1.03);
}
.img-break-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(14,21,32,0.70) 0%,
    rgba(14,21,32,0.25) 40%,
    rgba(14,21,32,0.55) 100%
  );
}
.img-break-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:40px 80px;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(transparent,rgba(14,21,32,0.85));
}
.ibc-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;
}
.ibc-classes{display:flex;gap:8px;flex-wrap:wrap}
.cls{
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  padding:3px 8px;border-radius:2px;border:1px solid;
  text-transform:uppercase;opacity:0.85;
}
.cls-pole       {color:#FF8C40;border-color:rgba(255,140,64,0.5)}
.cls-transformer{color:#40C8E8;border-color:rgba(64,200,232,0.5)}
.cls-insulator  {color:#FF5050;border-color:rgba(255,80,80,0.5)}
.cls-crossarm   {color:#E070D0;border-color:rgba(224,112,208,0.5)}
.cls-conductor  {color:#50CC60;border-color:rgba(80,204,96,0.5)}
.cls-fuse       {color:#F0D040;border-color:rgba(240,208,64,0.5)}

/* ── HOW IT WORKS TIMELINE ── */
#platform{background:var(--navy)}
.timeline{margin-top:72px;position:relative}
.timeline-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;position:relative;
}
.timeline-steps::before{
  content:'';position:absolute;
  top:28px;
  left:calc(100% / 6);
  right:calc(100% / 6);
  height:1px;
  background:linear-gradient(
    90deg,var(--orange) 0%,rgba(191,123,48,0.4) 50%,var(--accent) 100%
  );
  z-index:0;
}
.timeline-step{
  display:flex;flex-direction:column;align-items:center;
  padding:0 32px;position:relative;z-index:1;
}
.timeline-node{
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--orange);background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:32px;flex-shrink:0;position:relative;z-index:2;
}
.tn-number{
  font-family:var(--mono);font-size:12px;
  letter-spacing:2px;color:var(--orange);
}
.timeline-content{text-align:center}
.tc-phase{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--muted);text-transform:uppercase;margin-bottom:12px;
}
.tc-title{
  font-size:22px;font-weight:600;color:var(--white);
  margin-bottom:14px;font-family:var(--sans);
}
.tc-desc{
  font-size:15px;color:var(--muted);line-height:1.7;
  max-width:280px;margin:0 auto;
}

/* ── WHY VISORVOLT ── */
.why-bg{
  background:var(--navy-mid);
  border-top:1px solid var(--border-slate);
  border-bottom:1px solid var(--border-slate);
  padding:120px 80px;
}
.why-features{margin-top:64px;display:flex;flex-direction:column;gap:0}
.wf-row{
  display:grid;grid-template-columns:220px 1fr;
  gap:64px;align-items:center;
  padding:56px 0;border-bottom:1px solid var(--border);
  transition:background 0.15s;
}
.wf-row:first-child{border-top:1px solid var(--border)}
.wf-row:hover{background:rgba(191,123,48,0.03)}
.wf-left{
  display:flex;flex-direction:column;gap:6px;
  text-align:right;flex-shrink:0;
}
.wf-metric{
  font-family:var(--mono);
  font-size:clamp(48px,5.5vw,72px);
  font-weight:500;color:var(--orange);
  line-height:1;letter-spacing:-2px;
}
.wf-metric-check{letter-spacing:0;color:var(--accent)}
.wf-unit{font-size:0.38em;letter-spacing:0;vertical-align:super;opacity:0.8}
.wf-metric-sub{
  font-family:var(--mono);font-size:10px;
  letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;
}
.wf-right{display:flex;flex-direction:column;gap:12px}
.wf-title{font-size:22px;font-weight:600;color:var(--white);line-height:1.25}
.wf-desc{font-size:15px;color:var(--muted);line-height:1.72;margin:0}

/* ── AGENTIC LOOP ── */
.agentic-bg{
  background:var(--navy3);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:140px 80px;
}
/* ── AGENTIC LOOP TRIANGLE ── */
.loop-tri{
  width:100%;max-width:600px;margin:56px auto 48px;
}
.lt-svg{width:100%;height:auto;display:block;overflow:visible}   /* let corner node labels render outside the viewBox instead of clipping */
.lt-dot{offset-distance:0%}
.lt-dot-1{
  offset-path:path("M300,68 L68,480");
  animation:lt-1-travel 4.8s linear infinite;
}
.lt-dot-2{
  offset-path:path("M68,480 L532,480");
  animation:lt-2-travel 4.8s linear infinite;
}
.lt-dot-3{
  offset-path:path("M532,480 L300,68");
  animation:lt-3-travel 4.8s linear infinite;
}
@keyframes lt-1-travel{
  0%  {offset-distance:0%;opacity:0}
  2%  {opacity:1}
  33% {offset-distance:100%;opacity:1}
  35% {offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
@keyframes lt-2-travel{
  0%  {offset-distance:0%;opacity:0}
  33% {offset-distance:0%;opacity:0}
  35% {opacity:1}
  65% {offset-distance:100%;opacity:1}
  67% {offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
@keyframes lt-3-travel{
  0%  {offset-distance:0%;opacity:0}
  66% {offset-distance:0%;opacity:0}
  68% {opacity:1}
  98% {offset-distance:100%;opacity:1}
  100%{offset-distance:100%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .lt-dot-1,.lt-dot-2,.lt-dot-3{animation:none;opacity:0.3}
}

/* ── MISSION PANEL ── */
.mission-panel{
  margin-top:72px;
  background:rgba(14,18,28,0.85);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(20px);
  box-shadow:0 40px 100px rgba(0,0,0,0.55),0 2px 8px rgba(0,0,0,0.40),inset 0 1px 0 rgba(255,255,255,0.06);
}
.mp-header{
  display:flex;align-items:center;gap:16px;
  padding:16px 24px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.mp-header-left{display:flex;align-items:center;gap:10px}
.mp-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#28C840;
  box-shadow:0 0 6px #28C840,0 0 12px rgba(40,200,64,0.5);
  animation:live-glow 1.8s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes live-glow{
  0%,100%{box-shadow:0 0 6px #28C840,0 0 12px rgba(40,200,64,0.5)}
  50%{box-shadow:0 0 10px #28C840,0 0 24px rgba(40,200,64,0.7)}
}
.mp-agent-label{
  font-family:var(--mono);font-size:12px;
  color:rgba(238,242,248,0.60);letter-spacing:1px;
  text-transform:uppercase;
}
.mp-header-center{
  flex:1;text-align:center;
  font-family:var(--mono);font-size:11px;
  color:rgba(238,242,248,0.28);letter-spacing:0.5px;
}
.mp-header-right{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;
  color:#28C840;letter-spacing:1.5px;
}
.mp-live-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:#28C840;
}
.mp-stages{
  display:grid;
  grid-template-columns:1fr 52px 1fr 52px 1fr;
  align-items:start;
  padding:40px 32px;
}
.mp-stage{
  position:relative;
  padding:28px 24px 24px;
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
}
.mp-stage::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:2px;
}
.mp-stage::after{
  content:'';
  position:absolute;inset:0;
  border-radius:10px;
  opacity:0.06;
  pointer-events:none;
}
.mp-stage-detect::before{background:var(--orange)}
.mp-stage-detect::after{background:radial-gradient(ellipse at 50% 0%,var(--orange),transparent 70%)}
.mp-stage-diagnose::before{background:var(--accent)}
.mp-stage-diagnose::after{background:radial-gradient(ellipse at 50% 0%,var(--accent),transparent 70%)}
.mp-stage-fix::before{background:#28C840}
.mp-stage-fix::after{background:radial-gradient(ellipse at 50% 0%,#28C840,transparent 70%)}
.mp-stage-header{
  display:flex;align-items:center;justify-content:space-between;
}
.mp-status-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:1.5px;
  padding:4px 9px;border-radius:3px;
  text-transform:uppercase;
}
.mp-status-done{
  background:rgba(191,123,48,0.10);
  border:1px solid rgba(191,123,48,0.25);
  color:var(--orange);
}
.mp-status-cyan{
  background:rgba(64,200,232,0.10);
  border:1px solid rgba(64,200,232,0.25);
  color:var(--accent);
}
.mp-status-running{
  background:rgba(40,200,64,0.10);
  border:1px solid rgba(40,200,64,0.25);
  color:#28C840;
}
.mp-status-dot{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.mp-dot-pulse{animation:dot-pulse 1.2s ease-in-out infinite}
@keyframes dot-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.35;transform:scale(0.6)}
}
.mp-stage-num{
  font-family:var(--mono);font-size:11px;
  color:rgba(238,242,248,0.20);letter-spacing:1px;
}
.mp-stage-label{
  font-family:var(--mono);font-size:11px;
  letter-spacing:2px;color:rgba(238,242,248,0.40);
  text-transform:uppercase;margin-top:4px;
}
.mp-stage-value{
  font-family:var(--mono);font-size:clamp(28px,3.5vw,38px);
  color:var(--orange);font-weight:700;
  letter-spacing:-0.5px;line-height:1.1;margin-top:4px;
}
.mp-value-sm{font-size:clamp(20px,2.5vw,28px)}
.mp-value-green{color:#28C840}
.mp-value-unit{
  font-size:14px;font-weight:400;
  color:rgba(238,242,248,0.40);letter-spacing:0;margin-left:3px;
}
.mp-stage-detail{
  font-family:var(--mono);font-size:13px;
  color:rgba(238,242,248,0.42);
  line-height:1.65;letter-spacing:0.2px;margin-top:4px;
}
.mp-stage-tag{
  font-family:var(--mono);font-size:13px;
  color:rgba(238,242,248,0.60);margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.07);
}
.mp-connector{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;padding-top:80px;
}
.mp-conn-track{
  width:5px;height:64px;
  background:rgba(255,255,255,0.10);
  border-radius:3px;
  position:relative;overflow:hidden;
}
.mp-conn-pulse{
  position:absolute;top:-100%;left:0;right:0;
  height:100%;border-radius:2px;
  animation:conn-fall 2.4s ease-in-out infinite;
}
.mp-conn-pulse-1{background:linear-gradient(to bottom,transparent,var(--orange),transparent)}
.mp-conn-pulse-2{
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);
  animation-delay:1.2s;
}
@keyframes conn-fall{
  0%{top:-100%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:100%;opacity:0}
}
.mp-conn-arr{
  font-size:22px;color:rgba(255,255,255,0.15);line-height:1;
}
.mp-footer{
  display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;
  padding:18px 32px;
  border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.015);
  font-family:var(--mono);font-size:12px;
  color:rgba(238,242,248,0.38);letter-spacing:0.5px;
}
.mp-footer-sep{color:rgba(255,255,255,0.15)}

/* ── REASONING TIERS ── */
#reasoning{background:var(--navy)}
.reasoning-tiers{margin-top:64px;display:flex;flex-direction:column;gap:0}
.rtier{
  display:grid;grid-template-columns:280px 4px 1fr;
  gap:32px;align-items:center;
  padding:36px 0;border-bottom:1px solid var(--border);
}
.rtier:first-child{border-top:1px solid var(--border)}
.rtier-left{display:flex;flex-direction:column;gap:6px}
.rtier-input{font-size:15px;font-weight:500;color:var(--white);font-family:var(--sans)}
.rtier-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--muted);text-transform:uppercase;
}
.rtier-bar{width:4px;min-height:40px;border-radius:2px;align-self:stretch}
.rtier-bar-1{background:rgba(191,123,48,0.40)}
.rtier-bar-2{background:rgba(191,123,48,0.75)}
.rtier-bar-3{background:var(--orange)}
.rtier-right{display:flex;flex-direction:column;gap:8px}
.rtier-output{font-size:16px;color:rgba(238,242,248,0.88);line-height:1.55;font-family:var(--sans)}
.rtier-outcome{
  font-family:var(--mono);font-size:11px;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase;
}

/* ── ASSETS ── */
.assets-bg{background:var(--navy2);border-top:1px solid var(--border);padding:120px 80px}
.asset-list{margin-top:64px;display:flex;flex-direction:column;gap:0}
.asset-row{
  display:grid;grid-template-columns:40px 10px 220px 1fr 110px;
  align-items:center;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--border);
  opacity:0.65;transition:opacity 0.2s;
}
.asset-row:first-child{border-top:1px solid var(--border)}
.asset-row:hover,.asset-row-active{opacity:1}
.asset-icon{
  font-size:22px;text-align:center;
  filter:grayscale(0.4);flex-shrink:0;
  transition:filter 0.2s;
}
.asset-row:hover .asset-icon,.asset-row-active .asset-icon{filter:grayscale(0)}
.asset-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.asset-dot-active{background:var(--orange);box-shadow:0 0 8px rgba(191,123,48,0.5)}
.asset-name{font-size:17px;font-weight:600;color:var(--white);font-family:var(--sans)}
.asset-desc{font-size:13px;color:var(--muted);line-height:1.6}
.asset-status-label{
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  color:var(--orange);text-transform:uppercase;text-align:right;
}
.asset-status-soon{color:var(--muted)}

/* ── PSPS ── */
.psps-bg{
  background:
    radial-gradient(ellipse 70% 80% at 50% 110%,rgba(120,50,10,0.55) 0%,transparent 65%),
    radial-gradient(ellipse 40% 50% at 20% 80%,rgba(191,123,48,0.12) 0%,transparent 60%),
    var(--navy3);
  border-top:1px solid rgba(191,123,48,0.20);
  border-bottom:1px solid rgba(191,123,48,0.20);
  padding:120px 80px;
}
.psps-bg h2 em{color:var(--orange-lt)}
.psps-stats{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;
  gap:0;margin-top:56px;margin-bottom:80px;
}
.psps-stat{padding:0 40px;display:flex;flex-direction:column;gap:10px}
.psps-stat:first-child{padding-left:0}
.psps-stat:last-child{padding-right:0}
.psps-stat-div{width:1px;background:rgba(191,123,48,0.2);align-self:stretch}
.psps-big{
  font-family:var(--mono);font-size:clamp(40px,5vw,72px);
  font-weight:500;color:var(--orange);line-height:1;
}
.psps-unit{font-size:0.45em;letter-spacing:1px;vertical-align:super;opacity:0.7}
.psps-label{font-size:14px;font-weight:600;color:var(--white);line-height:1.35}
.psps-note{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:0.3px}
.psps-flow-open{
  display:grid;
  grid-template-columns:1fr 48px 1fr 48px 1fr 48px 1fr;
  align-items:center;gap:0;
}
.pfo-step{display:flex;flex-direction:column;gap:10px;padding:0 4px}
.pfo-step-highlight .pfo-name{color:var(--orange-lt)}
.pfo-num{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--muted);text-transform:uppercase;
}
.pfo-badge{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--orange);text-transform:uppercase;
}
.pfo-name{font-size:16px;font-weight:600;color:var(--white);font-family:var(--sans);line-height:1.3}
.pfo-desc{font-size:13px;color:var(--muted);line-height:1.6}
.pfo-connector{display:flex;align-items:center;justify-content:center;padding:0 8px}
.pfo-line{
  height:1px;width:100%;
  background:linear-gradient(90deg,rgba(191,123,48,0.3),rgba(191,123,48,0.6),rgba(191,123,48,0.3));
  position:relative;
}
.pfo-line::after{
  content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:6px solid rgba(191,123,48,0.6);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}

/* ── TRACTION ── */
#traction{background:var(--navy)}
.traction-editorial{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:80px;border-top:1px solid var(--border);padding-top:64px;
}
.te-stat{
  padding:0 48px;display:flex;flex-direction:column;gap:12px;
  border-right:1px solid var(--border);
}
.te-stat:nth-child(3n+1){padding-left:0}
.te-stat:nth-child(3n){padding-right:0;border-right:none}
.te-stat:nth-child(n+4){border-top:1px solid var(--border);margin-top:56px;padding-top:56px}
.te-number{
  font-family:var(--mono);font-size:clamp(72px,10vw,120px);
  font-weight:500;color:var(--orange);line-height:0.9;letter-spacing:-2px;
}
.te-pct{font-size:0.45em;letter-spacing:0;vertical-align:super;opacity:0.75}
.te-title{font-size:16px;font-weight:600;color:var(--white);line-height:1.3;margin-top:8px}
.te-detail{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.3px;line-height:1.65}

/* ── FOUNDER ── */
.founder-bg{background:var(--navy2)}
.founder-grid{
  display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start;
  margin-top:56px;
}
.founder-photo{
  width:280px;height:340px;
  object-fit:cover;object-position:center top;
  border:1px solid var(--border-slate);
  flex-shrink:0;
  filter:grayscale(15%) contrast(1.05);
}
.founder-name{
  font-family:var(--serif);font-size:30px;font-weight:700;
  margin-bottom:6px;letter-spacing:-0.3px;
}
.founder-role{
  font-family:var(--mono);font-size:12px;color:var(--orange);
  letter-spacing:1px;margin-bottom:20px;
}
.founder-bio{font-size:16px;color:rgba(255,255,255,0.80);line-height:1.75;margin-bottom:32px}
.founder-creds{
  list-style:none;padding:0;margin:0 0 32px 0;
  display:flex;flex-direction:column;gap:0;
}
.founder-creds li{
  font-size:14px;color:rgba(238,242,248,0.72);
  padding:13px 0 13px 20px;border-bottom:1px solid var(--border);
  position:relative;line-height:1.5;
}
.founder-creds li:first-child{border-top:1px solid var(--border)}
.founder-creds li::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:0.7;
}
.founder-links{display:flex;gap:16px;flex-wrap:wrap}
.founder-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:1px;
  color:var(--slate);text-decoration:none;
  border:1px solid var(--border);padding:8px 16px;border-radius:2px;
  transition:border-color 0.2s,color 0.2s;
}
.founder-link:hover{color:var(--white);border-color:rgba(255,255,255,0.3)}

/* ── CTA ── */
.cta-bg{
  background:
    linear-gradient(135deg,rgba(14,21,32,0.97),rgba(14,21,32,0.94)),
    url('../assets/slide4.jpg') center/cover no-repeat;
  background-image:
    linear-gradient(135deg,rgba(14,21,32,0.97),rgba(14,21,32,0.94)),
    image-set(url('../assets/slide4.webp') type('image/webp'), url('../assets/slide4.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-top:1px solid var(--border);
  text-align:center;position:relative;overflow:hidden;
  content-visibility:auto;contain-intrinsic-size:auto 600px;
}
.cta-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 0%,rgba(191,123,48,0.10) 0%,transparent 70%);
  pointer-events:none;
}
.cta-inner{position:relative;z-index:1;max-width:680px;margin:0 auto}
.cta-note{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:1px;margin-top:28px;
}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
footer{
  background:var(--navy);border-top:1px solid var(--border);
  padding:32px 80px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-copy{font-size:12px;color:var(--muted);font-family:var(--mono)}
.footer-links{display:flex;gap:24px}
.footer-links a{
  font-size:12px;color:var(--muted);text-decoration:none;
  font-family:var(--mono);transition:color 0.2s;
}
.footer-links a:hover{color:var(--white)}

/* ── HAMBURGER ── */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;
  background:var(--white);border-radius:1px;
  transition:transform 0.25s,opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── RESPONSIVE 900px ── */
@media(max-width:900px){
  nav{padding:0 20px;position:relative}
  .nav-hamburger{display:flex}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(14,21,32,0.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:8px 0 16px;z-index:200;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:14px 24px;border-bottom:1px solid var(--border);
    font-size:13px;letter-spacing:1px;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{
    margin:12px 24px 0 !important;padding:12px 20px !important;
    text-align:center;border-radius:4px;
  }

  .hero-content{padding:120px 20px 60px}
  .slide-dots{left:20px}
  section{padding:72px 20px}
  .problem-bg,.why-bg,.assets-bg,.psps-bg,.agentic-bg,.flywheel-section{padding:72px 20px}
  .flywheel-frame{margin:32px 0 0}   /* reset asymmetric offsets on mobile */
  footer{padding:24px 20px}

  /* Timeline: stack vertically */
  .timeline-steps{grid-template-columns:1fr;gap:0}
  .timeline-steps::before{
    top:calc(100% / 6);bottom:calc(100% / 6);
    left:28px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,var(--orange) 0%,var(--accent) 100%);
  }
  .timeline-step{flex-direction:row;align-items:flex-start;gap:24px;padding:0 0 48px 0}
  .timeline-node{margin-bottom:0;flex-shrink:0}
  .timeline-content{text-align:left}
  .tc-desc{margin:0;max-width:none}

  /* Reasoning tiers: collapse grid */
  .rtier{grid-template-columns:4px 1fr;grid-template-rows:auto auto;gap:16px 20px}
  .rtier-left{grid-column:2;grid-row:1}
  .rtier-bar{grid-column:1;grid-row:1/3}
  .rtier-right{grid-column:2;grid-row:2}

  /* Asset rows: collapse */
  .asset-row{grid-template-columns:12px 1fr;grid-template-rows:auto auto auto;gap:8px 16px;padding:24px 0}
  .asset-dot{grid-column:1;grid-row:1;align-self:center}
  .asset-name{grid-column:2;grid-row:1;font-size:16px}
  .asset-desc{grid-column:2;grid-row:2}
  .asset-status-label{grid-column:2;grid-row:3;text-align:left}

  /* PSPS: stack */
  .psps-stats{grid-template-columns:1fr}
  .psps-stat-div{width:100%;height:1px;margin:8px 0}
  .psps-stat{padding:24px 0 !important}
  .psps-flow-open{grid-template-columns:1fr;gap:0}
  .pfo-connector{padding:8px 0;transform:rotate(90deg);height:32px}

  /* Traction: stack */
  .traction-editorial{grid-template-columns:1fr;gap:0;border-top:none;padding-top:0;margin-top:48px}
  .te-stat{padding:36px 0 !important;border-right:none;border-bottom:1px solid var(--border)}
  .te-stat:first-child{border-top:1px solid var(--border)}
  .te-stat:nth-child(n+4){border-top:none;margin-top:0}   /* reset desktop 2-row dividers when stacked */
  .te-number{font-size:clamp(60px,18vw,96px)}

  /* Founder */
  .founder-grid{grid-template-columns:1fr}
  .founder-photo{width:100%;height:260px;object-position:center 20%}

  /* Problem impact grid */
  .problem-impact{grid-template-columns:1fr;border-left:none}
  .pi-stat{padding:36px 0}
  .pi-big{font-size:clamp(56px,14vw,80px)}
  .problem-close{font-size:clamp(17px,4vw,22px);margin-top:48px}

  /* Why VisorVolt */
  .why-features{margin-top:40px}
  .wf-row{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .wf-left{text-align:left}
  .wf-metric{font-size:clamp(44px,11vw,64px)}

  /* Assets */
  .asset-row{grid-template-columns:32px 8px 1fr 80px;gap:16px;padding:24px 0}
  .asset-desc{grid-column:3/5;margin-top:-4px}
  .asset-status-label{text-align:left}

  /* Misc */
  .hero-stats{gap:24px}
  .psb-sep{display:none}

  /* Mission panel: stack stages vertically */
  .mp-stages{grid-template-columns:1fr;padding:24px 20px;gap:0}
  .mp-connector{flex-direction:row;padding-top:0;padding:16px 0;height:auto;gap:12px}
  .mp-conn-track{width:64px;height:5px}
  .mp-conn-pulse{top:0;left:-100%;right:auto;width:100%;height:100%;animation:conn-fall-h 2.4s ease-in-out infinite}
  .mp-conn-pulse-2{animation-delay:1.2s}
  @keyframes conn-fall-h{0%{left:-100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
  .mp-conn-arr{transform:rotate(90deg)}
  .mp-footer{gap:12px;font-size:11px}

  /* Image break caption horizontal padding */
  .img-break-caption{padding:40px 20px}
}

/* ── RESPONSIVE 480px ── */
@media(max-width:480px){
  nav{height:56px}
  .nav-links{top:56px}
  .hero-content{padding:100px 16px 48px}
  .slide-dots{left:16px;bottom:20px}
  section{padding:56px 16px}
  .problem-bg,.why-bg,.assets-bg,.psps-bg,.agentic-bg{padding:56px 16px}
  footer{padding:20px 16px;flex-direction:column;align-items:flex-start;gap:12px}
  .footer-links{flex-wrap:wrap;gap:16px}
  h1{font-size:clamp(34px,9vw,48px)}
  h2{font-size:clamp(26px,7vw,40px)}
  .hero-sub{font-size:15px}
  .section-sub{font-size:15px}
  .hero-stats{gap:16px}
  .hero-stat-num{font-size:40px}
  .img-break-caption{padding:24px 20px}

}
