
:root{
  --bg:#0b0e12;
  --muted:#a6b0c3;
  --text:#eaf1ff;
  --brand:#8ee3ff;
  --brand2:#6cf0c2;
  --line:#1a222e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
h1,h2,h3{font-family:'Space Grotesk',Inter,system-ui,sans-serif;line-height:1.1;margin:0 0 .6rem}
h1{font-size:clamp(2.4rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-top:1rem}
h3{font-size:1.2rem;margin-top:.5rem}
p{margin:.4rem 0 1rem}
a{color:#cfe8ff;text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1140px,92%);margin:0 auto}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(11,14,18,.95),rgba(11,14,18,.6) 60%,rgba(11,14,18,0));backdrop-filter:blur(4px)}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:800}
.brand img{width:28px;height:28px;border-radius:6px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{padding:.4rem .6rem;border-radius:.6rem}
.nav .cta{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#001018;font-weight:800}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#c7d2e5;margin:5px 0;border-radius:2px}
.hero{position:relative;overflow:hidden;padding:84px 0 36px}
.hero .hero-inner{position:relative;z-index:2}
.hero .lead{font-size:1.14rem;color:var(--muted);max-width:860px}
.hero .cta-row{display:flex;gap:.8rem;margin:1rem 0 1.6rem}
.btn{display:inline-block;padding:.8rem 1rem;border-radius:.9rem;border:1px solid var(--line);background:rgba(255,255,255,.02);backdrop-filter:blur(6px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#001018;font-weight:800;border:0}
.btn.ghost{background:transparent}
.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:1rem}
.card.link{transition:transform .2s ease}
.card.link:hover{transform:translateY(-2px)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .grid{position:absolute;inset:0;background-image:
  linear-gradient(transparent 95%, #0f1725 95%),
  linear-gradient(90deg, transparent 95%, #0f1725 95%);
  background-size:22px 22px;opacity:.25}
.blob{position:absolute;filter:blur(6px);opacity:.7}
.blob.b1{top:-40px;right:8%;width:min(40vw,520px)}
.blob.b2{bottom:-80px;left:-6%;width:min(40vw,520px)}
.section{padding:60px 0}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.col.visual{position:relative;min-height:280px}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--line);backdrop-filter:blur(8px);border-radius:18px;padding:1rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;text-align:center}
.stats .num{display:block;font-size:1.6rem;font-weight:800}
.stats .label{color:var(--muted);font-size:.8rem}
.mesh{position:absolute;inset:20px;border:1px dashed #1e2633;border-radius:24px;opacity:.5}
.stripes{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));border-top:1px solid var(--line)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.checklist{padding:0 0 0 1rem}
.checklist li{margin:.4rem 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.hero.slim{padding:48px 0 8px}
.hero.slim .lead{max-width:820px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.member{background:rgba(255,255,255,.03);border:1px solid var(--line);padding:1rem;border-radius:16px}
.avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#001018;font-weight:900;margin-bottom:.6rem}
.contact-form{display:grid;gap:1rem}
.contact-form label{display:grid;gap:.4rem}
.contact-form input,.contact-form textarea{background:#0f131a;border:1px solid var(--line);border-radius:12px;padding:.8rem;color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.footer{border-top:1px solid var(--line);padding:24px 0 32px;margin-top:24px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.brandline{display:flex;gap:.6rem;align-items:center;margin-bottom:.4rem}
.footnote{border-top:1px solid var(--line);padding-top:12px;margin-top:16px;color:var(--muted);font-size:.9rem}
/* Rotating halo visual */
.halo{position:absolute;inset:auto;right:5%;top:18%;width:220px;height:220px;border-radius:50%;background:conic-gradient(from 0deg, #8ee3ff, #6cf0c2, #8ee3ff);filter:blur(12px) saturate(120%);opacity:.35;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Case study chart tilt */
.chart-wrap{perspective:800px}
.chart-card{transform:rotateX(12deg) rotateY(-8deg);transform-style:preserve-3d;transition:transform .6s ease;will-change:transform}
.chart-card:hover{transform:rotateX(3deg) rotateY(-2deg)}
@media (max-width: 900px){
  .two-col{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .hero-cards{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .nav{display:none;position:absolute;right:4%;top:62px;background:#0b0e12;border:1px solid var(--line);border-radius:12px;padding:.6rem;flex-direction:column;min-width:200px}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}
