:root{
  --bg-deep:#0B1220;
  --bg-panel:#141D30;
  --bg-panel-2:#1B2740;
  --line:#2A3652;
  --amber:#F5A623;
  --amber-dim:#8A6420;
  --teal:#2DD4BF;
  --text-hi:#E9EEF6;
  --text-mid:#AEB9CC;
  --text-low:#6D7A93;
  --danger:#E2604C;
  --font-display:'Manrope', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-deep);
  color:var(--text-hi);
  font-family:var(--font-body);
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
  background:linear-gradient(180deg, rgba(11,18,32,0.95), rgba(11,18,32,0.8));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,54,82,0.5);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:0.02em;
  text-decoration:none;
}
.brand-logo-img{
  height:32px;
  width:auto;
  border-radius:4px;
  object-fit:contain;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);}
.topbar nav{display:flex;gap:24px;align-items:center;font-size:13px;color:var(--text-mid);font-family:var(--font-mono);}
.topbar nav a{text-decoration:none;letter-spacing:0.03em;transition:color .2s;}
.topbar nav a:hover{color:var(--amber);}
.btn-nav-home{
  border:1px solid var(--line);
  padding:6px 14px;
  border-radius:6px;
  transition:all 0.2s;
}
.btn-nav-home:hover{
  border-color:var(--amber);
  color:var(--amber);
}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:120px;padding-bottom:80px;
  position:relative;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(245,166,35,0.07), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 30%, rgba(45,212,191,0.05), transparent 60%);
  pointer-events:none;
}
.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;color:var(--amber);
  letter-spacing:0.14em;text-transform:uppercase;margin-bottom:22px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber);}
h1{
  font-family:var(--font-display);
  font-size:clamp(38px, 6vw, 74px);
  line-height:1.04;font-weight:700;
  max-width:14ch;
  margin-bottom:24px;
}
h1 .accent{color:var(--amber);}
.hero-sub{
  font-size:17px;line-height:1.65;color:var(--text-mid);
  max-width:560px;margin-bottom:48px;
}
.hero-cta{display:flex;gap:16px;align-items:center;margin-bottom:88px;flex-wrap:wrap;}
.btn-primary{
  font-family:var(--font-body);font-weight:600;font-size:14.5px;
  background:var(--amber);color:#191006;
  padding:14px 26px;border-radius:6px;text-decoration:none;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 0 0 rgba(245,166,35,0);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,166,35,0.25);}
.btn-ghost{
  font-family:var(--font-mono);font-size:13px;color:var(--text-mid);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.btn-ghost:hover{color:var(--text-hi);border-color:var(--text-hi);}

/* ---------- Flow pipeline (signature element) ---------- */
.flow{
  position:relative;
  padding:36px 0 8px;
}
.flow-label{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-low);
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:22px;
}
.flow-track{position:relative;width:100%;height:150px;}
.flow-track svg{width:100%;height:100%;overflow:visible;display:block;}
.flow-path{
  fill:none;stroke:var(--line);stroke-width:2;
}
.flow-path-glow{
  fill:none;stroke:var(--amber);stroke-width:2;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:drawline 2.6s ease forwards .3s;
}
@keyframes drawline{to{stroke-dashoffset:0;}}
.flow-node{cursor:pointer;}
.flow-node circle.ring{
  fill:var(--bg-panel);stroke:var(--line);stroke-width:2;
  transition:stroke .3s, fill .3s;
}
.flow-node.active circle.ring{stroke:var(--amber);fill:#26190A;}
.flow-node text{
  font-family:var(--font-mono);font-size:10.5px;fill:var(--text-low);
  text-transform:uppercase;letter-spacing:0.06em;
  transition:fill .3s;
}
.flow-node.active text{fill:var(--amber);}
.flow-node .num{
  font-family:var(--font-mono);font-size:13px;fill:var(--text-mid);font-weight:500;
  transition:fill .3s;
}
.flow-node.active .num{fill:var(--text-hi);}
.traveler{
  fill:var(--amber);
  filter:drop-shadow(0 0 6px rgba(245,166,35,0.9));
  offset-path:path("M20,75 C 160,10 280,140 420,75 S 700,10 840,75 S 1120,140 1160,75");
  animation:travel 7s linear infinite;
}
@keyframes travel{
  0%{offset-distance:0%;opacity:0;}
  5%{opacity:1;}
  95%{opacity:1;}
  100%{offset-distance:100%;opacity:0;}
}

/* ---------- Section shell ---------- */
section.stage{
  padding:120px 0;
  border-top:1px solid var(--line);
  position:relative;
}
.stage-head{
  display:flex;gap:24px;align-items:baseline;margin-bottom:56px;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.stage-head.in{opacity:1;transform:translateY(0);}
.stage-index{
  font-family:var(--font-mono);font-size:14px;color:var(--amber);
  padding-top:6px;flex-shrink:0;width:44px;
}
.stage-title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3vw,36px);
}
.stage-title .icon{margin-right:12px;}

.compare{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:8px;
}
@media (max-width:820px){.compare{grid-template-columns:1fr;}}
.panel{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;
  padding:28px;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.panel.in{opacity:1;transform:translateY(0);}
.panel.legacy{border-color:rgba(226,96,76,0.25);}
.panel.legacy .tag{color:var(--danger);}
.panel.solve{border-color:rgba(245,166,35,0.3);background:linear-gradient(180deg, rgba(245,166,35,0.05), var(--bg-panel) 40%);}
.panel.solve .tag{color:var(--amber);}
.tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:14px;display:block;
}
.panel p.desc{color:var(--text-mid);font-size:14.5px;line-height:1.6;margin-bottom:20px;}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.feature-list li{
  font-size:14px;line-height:1.55;color:var(--text-hi);
  padding-left:20px;position:relative;
}
.feature-list li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;
  background:var(--teal);
}
.feature-list li b{color:var(--text-hi);font-weight:600;}
.feature-list li span.desc-inline{color:var(--text-mid);}

/* ---------- Leadership Profile ---------- */
.leadership-card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:40px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:40px;
  align-items:center;
  margin-top:24px;
}
@media(max-width:850px){.leadership-card{grid-template-columns:1fr;text-align:center;}}
.director-img-wrap{
  position:relative;
  width:220px;
  height:220px;
  margin:0 auto;
  border-radius:50%;
  padding:5px;
  background:linear-gradient(135deg, var(--amber), var(--teal));
  box-shadow:0 12px 30px rgba(245,166,35,0.25);
}
.director-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--bg-panel);
}
.experience-badge-pill{
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  background:var(--amber);
  color:#191006;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  padding:5px 14px;
  border-radius:100px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(245,166,35,0.4);
}
.leadership-details h3{
  font-family:var(--font-display);
  font-size:30px;
  color:var(--text-hi);
  margin-bottom:4px;
}
.leadership-role{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--amber);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.leadership-bio{
  font-size:15px;
  line-height:1.65;
  color:var(--text-mid);
  margin-bottom:24px;
}
.skill-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.skill-tag{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text-hi);
  font-family:var(--font-mono);
  font-size:11.5px;
  padding:4px 12px;
  border-radius:100px;
}

/* ---------- Comparison table ---------- */
.table-section{padding-bottom:140px;}
.table-wrap{
  border:1px solid var(--line);border-radius:10px;overflow-x:auto;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.table-wrap.in{opacity:1;transform:translateY(0);}
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  text-align:left;padding:16px 20px;background:var(--bg-panel-2);color:var(--text-low);
  border-bottom:1px solid var(--line);
}
thead th:nth-child(3){color:var(--amber);}
tbody td{padding:18px 20px;border-bottom:1px solid var(--line);color:var(--text-mid);vertical-align:top;}
tbody td:first-child{color:var(--text-hi);font-weight:500;width:22%;}
tbody td:nth-child(2){color:var(--danger);opacity:0.85;width:34%;}
tbody td:nth-child(3){color:var(--text-hi);}
tbody tr{transition:background .2s;}
tbody tr:hover{background:rgba(245,166,35,0.04);}
tbody tr:last-child td{border-bottom:none;}

/* ---------- Footer CTA ---------- */
footer{
  padding:100px 0 60px;text-align:center;border-top:1px solid var(--line);
}
footer h2{
  font-family:var(--font-display);font-size:clamp(28px,4vw,44px);margin-bottom:20px;
}
footer p{color:var(--text-mid);max-width:480px;margin:0 auto 36px;font-size:15px;}
footer .foot-meta{
  margin-top:70px;font-family:var(--font-mono);font-size:12px;color:var(--text-low);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* Mobile Responsiveness Updates */
@media (max-width: 768px) {
  .topbar {
    position: relative !important;
    flex-wrap: wrap !important;
    padding: 14px 20px !important;
  }
  .topbar nav {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 580px) {
  .topbar {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    position: relative !important;
    align-items: center !important;
    text-align: center !important;
  }
  .topbar nav {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .topbar .brand-logo-img {
    height: 28px !important;
  }
}