:root{
  --bg: #0A1128;
  --bg-2: #0F1938;
  --bg-3: #141F45;
  --accent: #8B6CF0;
  --accent-soft: #6C4CE0;
  --teal: #00C9C8;
  --text: #F4F5FB;
  --muted: #9BA3C7;
  --muted-2: #6A7296;
  --line: rgba(255,255,255,0.09);
  --radius: 2px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.02em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--accent-soft); color:#fff;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,17,40,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; letter-spacing:0.02em;
}
.logo .mark{
  width:34px; height:34px; border-radius:50%;
  background:conic-gradient(from 220deg, var(--accent), var(--teal), var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--bg); font-family:'Space Grotesk';
  flex-shrink:0;
}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{font-size:14.5px; color:var(--muted); transition:color .2s; position:relative;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:''; position:absolute; bottom:-22px; left:0; right:0; height:2px; background:var(--teal);
}
.nav-cta{
  padding:10px 22px; border:1px solid var(--accent); border-radius:var(--radius);
  font-size:14px; font-weight:500; transition:all .25s; white-space:nowrap;
}
.nav-cta:hover{background:var(--accent); color:#fff;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:24px; height:2px; background:var(--text);}

/* ---------- HERO (home, with canvas) ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:76px; overflow:hidden;
}
#network-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.55; }
.hero-glow{
  position:absolute; top:-20%; right:-10%; width:60%; height:80%;
  background:radial-gradient(circle, rgba(139,108,240,0.22) 0%, transparent 70%);
  z-index:0; pointer-events:none;
}
.hero-content{position:relative; z-index:2; padding:80px 0 100px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:28px;
}
.eyebrow::before{content:''; width:28px; height:1px; background:var(--teal);}
.hero h1{ font-size:clamp(40px, 6vw, 84px); line-height:1.02; max-width:920px; margin-bottom:28px; }
.hero h1 em, .page-hero h1 em{
  font-style:normal; color:transparent;
  background:linear-gradient(90deg, var(--accent), var(--teal));
  -webkit-background-clip:text; background-clip:text;
}
.hero p.lede, .page-hero p.lede{ font-size:19px; color:var(--muted); max-width:560px; line-height:1.6; margin-bottom:44px; }
.hero-actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--text); color:var(--bg); padding:15px 30px; border-radius:var(--radius);
  font-weight:600; font-size:15px; transition:all .25s; display:inline-block; border:none; cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn-primary:hover{background:var(--teal); transform:translateY(-2px);}
.btn-ghost{
  padding:15px 30px; border:1px solid var(--line); border-radius:var(--radius);
  font-weight:500; font-size:15px; color:var(--muted); transition:all .25s;
  display:flex; align-items:center; gap:10px;
}
.btn-ghost:hover{border-color:var(--accent); color:var(--text);}
.hero-stats{
  display:flex; gap:0; margin-top:90px; border-top:1px solid var(--line); padding-top:30px;
  max-width:920px; flex-wrap:wrap;
}
.hstat{flex:1; min-width:150px; padding-right:30px;}
.hstat .num{font-family:'Space Grotesk'; font-size:34px; font-weight:600; color:var(--text);}
.hstat .label{font-size:13px; color:var(--muted-2); margin-top:6px; line-height:1.4;}

/* ---------- PAGE HERO (subpages, no canvas) ---------- */
.page-hero{
  position:relative; padding:170px 0 100px; overflow:hidden; border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:''; position:absolute; top:-30%; right:-15%; width:55%; height:90%;
  background:radial-gradient(circle, rgba(139,108,240,0.18) 0%, transparent 70%); pointer-events:none;
}
.page-hero h1{ font-size:clamp(36px,5.5vw,64px); line-height:1.05; max-width:820px; margin-bottom:22px; position:relative; }
.page-hero p.lede{ margin-bottom:0; position:relative; }
.breadcrumb{
  font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--muted-2); margin-bottom:22px;
  display:flex; gap:8px; align-items:center; position:relative;
}
.breadcrumb a:hover{color:var(--teal);}

/* ---------- MARQUEE ---------- */
.marquee-section{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; overflow:hidden; background:var(--bg-2);
}
.marquee-track{display:flex; gap:70px; white-space:nowrap; animation:scroll 28s linear infinite; width:max-content;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-track span{
  font-family:'Space Grotesk'; font-size:20px; color:var(--muted-2); font-weight:500; letter-spacing:0.02em;
}

/* ---------- SECTION GENERIC ---------- */
section{padding:130px 0;}
.section-tight{padding:90px 0;}
.section-head{max-width:640px; margin-bottom:70px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head .eyebrow{margin-bottom:20px;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{display:none;}
.section-head h2{font-size:clamp(30px,4vw,46px); line-height:1.1;}
.section-head p{color:var(--muted); font-size:16.5px; margin-top:18px; line-height:1.6;}
.bg-alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- SERVICES GRID ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service-card{
  background:var(--bg); padding:44px 36px; transition:background .3s;
  position:relative; min-height:280px; display:flex; flex-direction:column; justify-content:space-between;
}
.service-card:hover{background:var(--bg-2);}
.service-card .si{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--muted-2); margin-bottom:40px; }
.service-card h3{font-size:22px; margin-bottom:14px;}
.service-card p{color:var(--muted); font-size:14.5px; line-height:1.6;}
.service-card .arrow{
  margin-top:24px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .25s; font-size:16px;
}
.service-card:hover .arrow{border-color:var(--accent); background:var(--accent); transform:rotate(45deg);}
.service-card.linkable{cursor:pointer;}

/* ---------- APPROACH / ORBIT SIGNATURE ---------- */
.approach-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:center;}
.orbit-wrap{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
#orbit-canvas{width:100%; height:100%;}
.orbit-center{
  position:absolute; font-family:'Space Grotesk'; font-size:15px; text-align:center; color:var(--text);
  pointer-events:none;
}
.orbit-center .n{font-size:38px; font-weight:700; display:block;}
.approach-list{display:flex; flex-direction:column;}
.approach-item{ display:flex; gap:24px; padding:28px 0; border-top:1px solid var(--line); }
.approach-item:last-child{border-bottom:1px solid var(--line);}
.approach-item .idx{font-family:'IBM Plex Mono'; color:var(--accent); font-size:14px; padding-top:3px;}
.approach-item h4{font-size:19px; margin-bottom:8px;}
.approach-item p{color:var(--muted); font-size:14.5px; line-height:1.6; max-width:440px;}

/* ---------- INDUSTRIES ---------- */
.industries-scroll{display:flex; gap:20px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none;}
.industries-scroll::-webkit-scrollbar{display:none;}
.industries-grid-static{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.industry-card{
  flex:0 0 300px; height:380px; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden; transition:border-color .3s;
  background:linear-gradient(160deg, var(--bg-3) 0%, var(--bg) 100%);
}
.industry-card:hover{border-color:var(--accent);}
.industry-card .glyph{ position:absolute; top:32px; left:32px; font-family:'IBM Plex Mono'; font-size:13px; color:var(--muted-2); }
.industry-card h3{font-size:24px; margin-bottom:10px;}
.industry-card p{color:var(--muted); font-size:14px; line-height:1.5;}
.industry-card a.more{ color:var(--teal); font-size:13px; margin-top:14px; font-family:'IBM Plex Mono'; }

/* ---------- IMPACT / STATS BAND ---------- */
.impact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.impact-cell{background:var(--bg-2); padding:48px 32px;}
.impact-cell .num{font-family:'Space Grotesk'; font-size:44px; font-weight:700; color:var(--text);}
.impact-cell .num span{color:var(--teal);}
.impact-cell .label{color:var(--muted); font-size:14px; margin-top:10px; line-height:1.5;}

/* ---------- INSIGHTS / ARTICLES ---------- */
.insights-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.insight-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .3s, border-color .3s; background:var(--bg);}
.insight-card:hover{transform:translateY(-6px); border-color:var(--accent);}
.insight-img{
  height:200px; background:linear-gradient(135deg, var(--bg-3), var(--accent-soft) 180%);
  position:relative; display:flex; align-items:flex-end; padding:20px;
}
.insight-img .tag{
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  background:rgba(0,0,0,0.4); padding:6px 12px; border-radius:20px; color:var(--teal);
}
.insight-body{padding:26px;}
.insight-body h3{font-size:18px; line-height:1.4; margin-bottom:10px;}
.insight-body p{font-size:13.5px; color:var(--muted-2);}
.filter-row{display:flex; gap:12px; margin-bottom:50px; flex-wrap:wrap;}
.filter-pill{
  padding:9px 20px; border:1px solid var(--line); border-radius:30px; font-size:13.5px; color:var(--muted);
  cursor:pointer; transition:all .2s; font-family:'IBM Plex Mono';
}
.filter-pill:hover, .filter-pill.active{border-color:var(--accent); color:var(--text); background:rgba(139,108,240,0.1);}

/* ---------- TIMELINE (about) ---------- */
.timeline{position:relative; max-width:800px;}
.timeline::before{content:''; position:absolute; left:70px; top:0; bottom:0; width:1px; background:var(--line);}
.timeline-item{display:flex; gap:40px; padding-bottom:56px; position:relative;}
.timeline-item .year{
  font-family:'Space Grotesk'; font-size:18px; font-weight:700; color:var(--teal); width:70px; flex-shrink:0; padding-top:2px;
}
.timeline-item .dot{
  position:absolute; left:66px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--bg);
}
.timeline-item h4{font-size:19px; margin-bottom:8px; margin-left:20px;}
.timeline-item p{color:var(--muted); font-size:14.5px; line-height:1.6; max-width:480px; margin-left:20px;}

/* ---------- VALUES / TEAM ---------- */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.value-cell{background:var(--bg); padding:40px 30px;}
.value-cell .vi{width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:24px; font-family:'Space Grotesk'; color:var(--teal);}
.value-cell h4{font-size:18px; margin-bottom:10px;}
.value-cell p{color:var(--muted); font-size:14px; line-height:1.6;}

.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.team-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.team-photo{
  height:220px; background:linear-gradient(155deg, var(--bg-3), var(--accent-soft) 200%);
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-size:34px; color:rgba(255,255,255,0.5);
}
.team-info{padding:20px;}
.team-info h4{font-size:16px; margin-bottom:4px;}
.team-info p{color:var(--muted-2); font-size:13px; font-family:'IBM Plex Mono';}

/* ---------- CAREERS ---------- */
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.benefit-card{border:1px solid var(--line); padding:34px; border-radius:var(--radius); background:var(--bg-2);}
.benefit-card h4{font-size:18px; margin-bottom:10px;}
.benefit-card p{color:var(--muted); font-size:14px; line-height:1.6;}

.role-filter{display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap;}
.role-list{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.role-item{
  display:flex; align-items:center; justify-content:space-between; padding:26px 32px;
  border-bottom:1px solid var(--line); transition:background .2s; cursor:pointer; flex-wrap:wrap; gap:12px;
}
.role-item:last-child{border-bottom:none;}
.role-item:hover{background:var(--bg-2);}
.role-info h4{font-size:17px; margin-bottom:6px;}
.role-info .meta{display:flex; gap:16px; color:var(--muted-2); font-size:12.5px; font-family:'IBM Plex Mono'; flex-wrap:wrap;}
.role-apply{
  font-size:13.5px; color:var(--teal); border:1px solid var(--teal); padding:9px 18px; border-radius:var(--radius);
  white-space:nowrap; transition:all .2s;
}
.role-apply:hover{background:var(--teal); color:var(--bg);}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.form-group{margin-bottom:24px;}
.form-group label{display:block; font-size:13px; font-family:'IBM Plex Mono'; color:var(--muted-2); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.05em;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; color:var(--text); font-family:'Inter'; font-size:15px; transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-color:var(--accent);}
.form-group textarea{resize:vertical; min-height:120px;}
.office-list{display:flex; flex-direction:column; gap:0;}
.office-item{padding:26px 0; border-top:1px solid var(--line);}
.office-item:last-child{border-bottom:1px solid var(--line);}
.office-item h4{font-size:17px; margin-bottom:8px;}
.office-item p{color:var(--muted); font-size:14px; line-height:1.6;}
.office-item .mono{color:var(--muted-2); font-size:12.5px; margin-top:8px; display:block;}

/* ---------- CTA BAND ---------- */
.cta-band{ padding:110px 0; text-align:center; position:relative; overflow:hidden; }
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(139,108,240,0.15), transparent 65%);
}
.cta-band h2{font-size:clamp(32px,5vw,58px); max-width:760px; margin:0 auto 30px; position:relative; line-height:1.1;}
.cta-band p{color:var(--muted); font-size:17px; margin-bottom:40px; position:relative;}
.cta-actions{display:flex; gap:18px; justify-content:center; position:relative; flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:80px 0 34px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; margin-bottom:70px;}
.footer-brand .logo{margin-bottom:18px;}
.footer-brand p{color:var(--muted-2); font-size:14px; max-width:260px; line-height:1.6;}
.footer-col h5{font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted-2); margin-bottom:20px;}
.footer-col a{display:block; color:var(--muted); font-size:14.5px; margin-bottom:14px; transition:color .2s;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:30px;
  border-top:1px solid var(--line); flex-wrap:wrap; gap:16px;
}
.footer-bottom p{color:var(--muted-2); font-size:13px;}
.footer-social{display:flex; gap:20px;}
.footer-social a{color:var(--muted-2); font-size:13px;}
.footer-social a:hover{color:var(--text);}

/* ---------- REVEAL ANIM ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- MISC ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.stat-inline{display:flex; gap:50px; margin-top:40px; flex-wrap:wrap;}
.stat-inline div .n{font-family:'Space Grotesk'; font-size:30px; font-weight:700;}
.stat-inline div .l{color:var(--muted-2); font-size:13px; margin-top:4px;}
.quote-block{
  border-left:2px solid var(--accent); padding-left:28px; margin:40px 0; font-family:'Space Grotesk';
  font-size:20px; line-height:1.5; color:var(--text);
}
.quote-block cite{display:block; font-family:'IBM Plex Mono'; font-size:13px; color:var(--muted-2); margin-top:16px; font-style:normal;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .services-grid{grid-template-columns:1fr;}
  .approach-grid{grid-template-columns:1fr; gap:50px;}
  .impact-grid{grid-template-columns:repeat(2,1fr);}
  .insights-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .benefits-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .two-col{grid-template-columns:1fr;}
  .industries-grid-static{grid-template-columns:1fr;}
  section{padding:80px 0;}
}