﻿/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SOLVIX TEK â€” PLASMA TECH (v5)
   Dark navy-black canvas Â· electric cyan + plasma purple + magenta
   Animated grid Â· glow borders Â· gradient text Â· 3D depth
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* BLACK & ORANGE palette */
  --c1:#0A0A0A;          /* deep black */
  --c2:#020202;          /* near-pure black */
  --c3:#007BFF;          /* vibrant orange â€” primary accent */
  --c4:#4DA3FF;          /* soft amber â€” secondary accent */
  --c5:#99C2FF;          /* gold highlight */
  --c6:#FFFFFF;          /* pure white */
  --c7:#FFE5D4;          /* cream tertiary */

  /* canvas */
  --bg:#0A0A0A;
  --bg-2:#111111;
  --bg-3:#181818;
  --surface:#1A1A1A;
  --surface-2:#1F1F1F;
  --surface-elev:#252525;
  --ink:#050505;

  /* legacy stand-ins (kept so any leftover refs still resolve) */
  --light:#F0F4F8;
  --light-2:#E2E8F0;

  /* type â€” bumped lighter so secondary/muted text stays readable on dark theme */
  --text:#FFFFFF;
  --text-2:#F2F4F8;     /* was #B8C2D1 â€” now near-white */
  --muted:#D6DCE6;      /* was #6B7891 â€” now light grey, comfortably readable */
  --text-dim:#A8B0BF;   /* was #475569 â€” medium grey, still visible */
  --text-inv:#0A0E1A;

  /* lines */
  --border:rgba(255,255,255,.06);
  --border-2:rgba(0,123,255,.22);
  --border-soft:rgba(255,255,255,.04);
  --border-strong:rgba(0,123,255,.45);

  /* shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.22);
  --shadow-md:0 6px 18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.24);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.36);
  --shadow-xl:0 36px 72px -24px rgba(0,0,0,.78);

  /* glows */
  --glow:rgba(0,123,255,.4);
  --glow-soft:rgba(0,123,255,.22);
  --glow-purple:rgba(77,163,255,.32);
  --glow-magenta:rgba(153,194,255,.28);

  /* gradient (signature) */
  --grad-plasma:linear-gradient(120deg,#007BFF 0%,#4DA3FF 50%,#99C2FF 100%);
  --grad-plasma-soft:linear-gradient(120deg,rgba(0,123,255,.18),rgba(77,163,255,.18),rgba(153,194,255,.18));
  --grad-cyan-purple:linear-gradient(120deg,#007BFF,#4DA3FF);

  /* radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:36px;

  /* fonts */
  --font-sans:'Space Grotesk',-apple-system,sans-serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --font-serif:'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;line-height:1.6;
  overflow-x:hidden;cursor:none;
  position:relative;
  min-height:100vh;
}

/* â•â•â• animated background â€” gradient mesh + grid + scan â•â•â• */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%,rgba(0,123,255,.18),transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 80%,rgba(77,163,255,.18),transparent 60%),
    radial-gradient(ellipse 40% 50% at 50% 100%,rgba(255,229,212,.10),transparent 60%);
  filter:blur(40px);
  animation:meshDrift 28s ease-in-out infinite alternate;
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 30%,transparent 80%);
}
@keyframes meshDrift{
  0%   {transform:translate(0,0)}
  50%  {transform:translate(-3%,2%) rotate(2deg)}
  100% {transform:translate(2%,-2%) rotate(-2deg)}
}

a{cursor:none;color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

@media(hover:none) and (pointer:coarse){
  body,a,button,.hamburger,.form-submit,.modal-close,.svc-modal-close{cursor:auto!important;}
  #cur,#cur-ring,.cur-glow{display:none!important;}
}

/* page transition */
#page-transition{position:fixed;inset:0;z-index:9000;background:var(--grad-cyan-purple);transform:translateY(100%);pointer-events:none;}
#page-transition.enter{animation:ptEnter .45s cubic-bezier(.77,0,.18,1) forwards;}
#page-transition.exit{animation:ptExit .45s cubic-bezier(.77,0,.18,1) forwards;}
@keyframes ptEnter{from{transform:translateY(100%)}to{transform:translateY(0%)}}
@keyframes ptExit{from{transform:translateY(0%)}to{transform:translateY(-100%)}}

/* cursor */
#cur,#cur-ring{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;}
#cur{width:6px;height:6px;background:var(--c3);box-shadow:0 0 12px var(--c3);transition:width .15s,height .15s;}
#cur-ring{width:32px;height:32px;border:1px solid rgba(0,123,255,.5);transition:width .12s,height .12s,background .12s;}
.cursor-hover #cur{width:12px;height:12px;background:var(--c4);box-shadow:0 0 18px var(--c4);}
.cursor-hover #cur-ring{width:48px;height:48px;border-color:var(--c4);background:rgba(77,163,255,.06);}

#global3D{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.18;}
section,nav,footer,.marquee-strip,.page-header{position:relative;z-index:2;}

/* â•â•â• TYPOGRAPHY â•â•â• */
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);color:var(--text);letter-spacing:-.02em;font-weight:500;}
h1{font-weight:500;letter-spacing:-.045em;}
p{color:var(--text-2);}
em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--c3);letter-spacing:0;}
strong{color:var(--text);font-weight:600;}

.container{max-width:1240px;margin:0 auto;padding:0 5vw;}

/* eyebrow */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:1.4rem;
  color:var(--c3);display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--c3);box-shadow:0 0 12px var(--c3),0 0 0 3px rgba(0,123,255,.16);
  animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{box-shadow:0 0 12px var(--c3),0 0 0 3px rgba(0,123,255,.16)}50%{box-shadow:0 0 18px var(--c3),0 0 0 6px rgba(0,123,255,.04)}}

/* titles + gradient accent */
.s-title{
  font-family:var(--font-sans);
  font-size:clamp(2.2rem,4.6vw,4rem);
  font-weight:500;line-height:1.02;letter-spacing:-.04em;
  margin-bottom:1rem;color:var(--text);
}
.s-title .accent,.accent{
  background:var(--grad-plasma);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:normal;
  font-family:var(--font-serif);font-weight:400;font-style:italic;
}

/* â•â•â• BUTTONS â€” cyber/glow â•â•â• */
.btn-fire,.btn-outline,.svc-section-link,.form-submit{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.7rem;
  font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:.02em;
  border-radius:100px;
  text-decoration:none;cursor:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn-fire{
  background:var(--grad-cyan-purple);
  color:#FFFFFF;
  font-weight:600;
  box-shadow:0 0 0 1px rgba(0,123,255,.4),0 8px 24px rgba(0,123,255,.18),0 0 30px rgba(77,163,255,.18);
}
.btn-fire::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,#4DA3FF,#007BFF,#FFE5D4,#007BFF);
  background-size:300% 100%;
  z-index:-1;opacity:0;transition:opacity .3s;
  animation:gradFlow 4s linear infinite;
}
@keyframes gradFlow{from{background-position:0% 50%}to{background-position:300% 50%}}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,123,255,.4),0 0 0 1px var(--c3);}
.btn-fire:hover::before{opacity:1;}

.btn-outline{
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-color:var(--border-2);
  backdrop-filter:blur(8px);
}
.btn-outline:hover{
  background:rgba(0,123,255,.08);
  border-color:var(--c3);color:var(--c3);
  transform:translateY(-2px);
  box-shadow:0 0 24px var(--glow-soft);
}

/* â•â•â• NAV â€” dark glass â•â•â• */
/* floating nav â€” detached pill that hovers below the viewport top */
nav{
  position:fixed;
  top:1.1rem;
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  width:calc(100% - 3rem);
  max-width:1320px;
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1.4rem .55rem 1rem;
  transition:all .35s;
  background:rgba(10,14,26,.65);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,123,255,.04),
    0 0 24px rgba(0,123,255,.06);
}
nav.scrolled{
  top:.7rem;
  padding:.4rem 1.2rem .4rem .9rem;
  background:rgba(10,14,26,.88);
  border-color:rgba(0,123,255,.18);
  box-shadow:
    0 14px 36px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,123,255,.08),
    0 0 30px rgba(0,123,255,.1);
}
/* logo â€” clean, no border or orange edge glow; just the brand artwork on the nav background */
.logo{
  display:flex;align-items:center;font-weight:600;
  padding:.25rem .5rem;
  background:transparent;
  border:none;
  box-shadow:none;
  transition:transform .35s;
}
.logo img{
  height:96px;width:auto;display:block;
  /* invert+hue-rotate strips the PNG's white background while keeping the blue logo colors */
  filter:
    invert(1)
    hue-rotate(180deg)
    saturate(1.6)
    brightness(1.1);
  transition:filter .35s, transform .35s;
}
.logo:hover{transform:translateY(-1px);}
.logo:hover img{
  filter:
    invert(1)
    hue-rotate(180deg)
    saturate(1.85)
    brightness(1.2);
  transform:scale(1.03);
}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none;}
.nav-links a{
  font-family:var(--font-body);
  color:var(--text-2);font-size:.86rem;font-weight:400;
  transition:color .2s;position:relative;
}
.nav-links a:not(.cta-nav)::after{
  content:'';position:absolute;bottom:-6px;left:0;right:0;height:1px;
  background:var(--grad-cyan-purple);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover,.nav-links a.active-link{color:var(--text);}
.nav-links a.active-link::after,.nav-links a:not(.cta-nav):hover::after{transform:scaleX(1);}
.cta-nav{
  background:var(--grad-cyan-purple)!important;color:#FFFFFF!important;
  padding:.65rem 1.3rem;border-radius:100px;
  font-weight:600!important;font-size:.82rem!important;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:all .25s!important;border:1px solid transparent!important;
  box-shadow:0 0 24px rgba(0,123,255,.18);
}
.cta-nav:hover{transform:translateY(-1px);box-shadow:0 0 32px var(--glow);}
.cta-nav::after{display:none!important;}

/* hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:none;background:none;border:none;padding:6px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;position:fixed;inset:0;background:rgba(10,14,26,.97);backdrop-filter:blur(20px);z-index:490;flex-direction:column;align-items:center;justify-content:center;gap:2rem;}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:var(--text);font-size:1.6rem;font-weight:500;font-family:var(--font-sans);}
.mobile-nav a:hover{color:var(--c3);}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   HERO â€” plasma orbs + holographic typography
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
#hero{
  min-height:100vh;
  padding:11rem 5vw 5rem;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
}
.hero-bg{display:none;}
.hero-orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);
  pointer-events:none;z-index:0;will-change:transform;
}
.hero-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,123,255,.5) 0%,transparent 65%);top:-200px;right:-180px;animation:orbDrift 22s ease-in-out infinite alternate;}
.hero-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(77,163,255,.4) 0%,transparent 65%);bottom:-200px;left:-140px;animation:orbDrift 28s ease-in-out infinite alternate-reverse;}
.hero-orb-3{width:340px;height:340px;background:radial-gradient(circle,rgba(255,229,212,.3) 0%,transparent 65%);top:35%;left:38%;animation:orbPulse 14s ease-in-out infinite;}
@keyframes orbDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.06)}100%{transform:translate(-30px,40px) scale(.94)}}
@keyframes orbPulse{0%,100%{transform:translate(0,0) scale(1);opacity:.7}50%{transform:translate(20px,-30px) scale(1.15);opacity:1}}

.hero-inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;
  max-width:1240px;margin:0 auto;width:100%;position:relative;z-index:2;
}
.hero-pill{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:400;letter-spacing:.08em;
  padding:.5rem .9rem;border-radius:100px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  border:1px solid var(--border-2);
  color:var(--text);text-transform:uppercase;
  margin-bottom:2rem;
  box-shadow:0 0 20px var(--glow-soft);
}
.pill-dot{
  width:6px;height:6px;border-radius:50%;
  background:#10B981;
  box-shadow:0 0 0 3px rgba(16,185,129,.18),0 0 12px #10B981;
  animation:pulseDot 2s infinite;font-size:0;
}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.18),0 0 12px #10B981}50%{box-shadow:0 0 0 6px rgba(16,185,129,.06),0 0 16px #10B981}}

.hero-h1{
  font-family:var(--font-sans);
  font-size:clamp(3rem,7vw,7rem);
  font-weight:400;line-height:.96;letter-spacing:-.05em;
  margin-bottom:1.8rem;color:var(--text);
}
.hero-h1 .hw{display:inline-block;opacity:0;transform:translateY(28px);animation:hwIn .9s cubic-bezier(.2,.8,.2,1) forwards;}
.hero-h1 .hw:nth-of-type(1){animation-delay:.15s}.hero-h1 .hw:nth-of-type(2){animation-delay:.30s}.hero-h1 .hw:nth-of-type(3){animation-delay:.45s}
@keyframes hwIn{to{opacity:1;transform:translateY(0)}}
.grad-text{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  background:var(--grad-plasma);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;display:inline-block;
  letter-spacing:-.015em;
  animation:gradFlow 6s linear infinite;
}
.hero-sub{font-size:1.1rem;color:var(--text-2);max-width:520px;margin-bottom:2.4rem;line-height:1.65;font-weight:300;}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.5rem;}

.hero-stack{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-family:var(--font-mono);font-size:.7rem;}
.hero-stack-label{color:var(--c3);margin-right:.4rem;}
.stack-chip{
  padding:.35rem .8rem;border-radius:100px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:var(--text-2);font-weight:400;
  transition:all .2s;
}
.stack-chip:hover{border-color:var(--c3);color:var(--c3);background:rgba(0,123,255,.06);box-shadow:0 0 16px var(--glow-soft);}

/* hero right â€” bento grid */
.hero-right{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1rem;align-content:start;position:relative;}
.hero-cards,.hbadge{display:none;}

.terminal-window{
  grid-column:1 / -1;
  background:var(--ink);
  border-radius:var(--r-md);
  border:1px solid var(--border-2);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px var(--border),0 0 60px var(--glow-soft);
  overflow:hidden;
  font-family:var(--font-mono);
  position:relative;
}
.terminal-window::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-plasma);opacity:.7;
}
.terminal-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;
  background:rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.term-dots{display:flex;gap:.4rem;}
.term-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);}
.term-dots span:first-child{background:#FF5F57;}.term-dots span:nth-child(2){background:#FEBC2E;}.term-dots span:nth-child(3){background:#28C840;}
.term-title{flex:1;text-align:center;font-size:.7rem;color:rgba(240,244,248,.92);letter-spacing:.04em;}
.term-status{font-size:.62rem;color:var(--c3);letter-spacing:.08em;text-transform:uppercase;}
.terminal-body{padding:1.2rem 1.3rem 1.4rem;font-size:.74rem;line-height:1.85;color:rgba(240,244,248,.82);min-height:240px;}
.term-line{display:flex;gap:.6rem;}
.term-prompt{color:var(--c3);user-select:none;flex-shrink:0;}
.term-cmd{color:rgba(240,244,248,.95);}
.term-out{color:rgba(240,244,248,.92);padding-left:1.4rem;}
.term-key{color:#10B981;}
.term-str{color:var(--c5);}
.term-num{color:var(--c4);font-weight:500;}
.term-cmt{color:rgba(240,244,248,.92);font-style:italic;}
.term-cursor::after{content:"";color:var(--c3);animation:caret 1s steps(2) infinite;}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* bento â€” dark glass */
.bento{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  padding:1.3rem 1.4rem;
  position:relative;overflow:hidden;
  transition:all .3s;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.bento::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(0,123,255,.12),transparent 50%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.bento:hover{transform:translateY(-3px);border-color:var(--c3);box-shadow:0 14px 32px rgba(0,0,0,.4),0 0 30px var(--glow-soft);}
.bento:hover::before{opacity:1;}
.bento-label{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;}
.bento-value{font-family:var(--font-sans);font-size:1.9rem;font-weight:500;color:var(--text);letter-spacing:-.03em;line-height:1;}
.bento-value sup{background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.55em;font-weight:400;margin-left:.05em;}
.bento-foot{font-size:.74rem;color:var(--text-2);margin-top:.55rem;display:flex;align-items:center;gap:.4rem;}
.bento-spark{display:flex;align-items:flex-end;gap:2px;height:18px;margin-top:.5rem;}
.bento-spark span{width:4px;background:var(--grad-cyan-purple);border-radius:1px;}

/* scroll-down cue */
.scroll-down{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.66rem;
  color:var(--muted);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;
  opacity:0;animation:scrollFade .8s 1.4s forwards;
}
@keyframes scrollFade{to{opacity:.85}}
.scroll-down-arrow{display:block;width:1px;height:32px;background:linear-gradient(180deg,transparent,var(--c3));position:relative;overflow:hidden;}
.scroll-down-arrow::before{content:"";position:absolute;top:-32px;left:0;right:0;height:32px;background:linear-gradient(180deg,transparent,var(--c5));animation:scrollDown 2s ease-in-out infinite;}
@keyframes scrollDown{0%{transform:translateY(0);opacity:0}20%,80%{opacity:1}100%{transform:translateY(64px);opacity:0}}
.scroll-down:hover{opacity:1;color:var(--c3);}
@media (max-width:760px){.scroll-down{display:none;}}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   MARQUEE
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.marquee-strip{
  background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));
  padding:1.6rem 0;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  position:relative;
}
.marquee-strip::before,.marquee-strip::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.marquee-strip::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent);}
.marquee-strip::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent);}
.marquee-inner{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;animation:marquee 36s linear infinite;font-family:var(--font-sans);font-size:1.8rem;font-weight:500;letter-spacing:-.02em;}
.marquee-inner span{color:transparent;-webkit-text-stroke:1px rgba(0,123,255,.45);}
.marquee-inner span.solid{color:var(--text);background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;}
.marquee-inner .msep{color:var(--c3);font-size:1rem;-webkit-text-stroke:0;opacity:.7;}
.marquee-inner .msep.solid{opacity:1;color:var(--c4);}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* â•â•â• TRUST BAR â•â•â• */
.trust-bar{padding:3.5rem 5vw;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.trust-label{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-align:center;margin-bottom:1.4rem;}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem 3rem;font-family:var(--font-mono);font-weight:500;letter-spacing:.18em;font-size:.95rem;color:var(--text);opacity:.55;}
.trust-logos span{transition:all .25s;}
.trust-logos span:hover{opacity:1;background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(-2px);}

/* â•â•â• ABOUT/TRUSTED FALLBACK â•â•â• */
#trusted{padding:8rem 5vw;}
#trusted h2{margin-bottom:1.6rem;}
#trusted p{color:var(--text-2);font-size:1.05rem;line-height:1.75;font-weight:300;}

/* â•â•â• PROBLEM â•â•â• */
.problem-section{padding:8rem 5vw;}
.problem-head{text-align:center;max-width:780px;margin:0 auto 4rem;}
.problem-head .eyebrow{justify-content:center;}
.problem-head .s-title::after{content:"";display:block;width:48px;height:2px;background:var(--grad-cyan-purple);margin:1.2rem auto 0;border-radius:2px;}
.problem-lead{font-size:1.05rem;color:var(--text-2);line-height:1.75;font-weight:300;margin-top:1rem;}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch;}
.problem-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.8rem 1.8rem 1.4rem;position:relative;height:100%;
  box-shadow:var(--shadow-sm);
  transition:all .3s;
  display:flex;flex-direction:column;gap:1rem;
  overflow:hidden;
}
.problem-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-plasma);
  transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.problem-card:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 40px var(--glow-soft);}
.problem-card:hover::before{transform:scaleX(1);}
.problem-bug{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);padding-bottom:1rem;border-bottom:1px dashed var(--border);}
.problem-sev{background:rgba(255,229,212,.12);color:#F472B6;padding:.2rem .55rem;border-radius:var(--r-xs);border:1px solid rgba(255,229,212,.32);font-weight:600;}
.problem-card h3{font-size:1.15rem;font-weight:500;color:var(--text);letter-spacing:-.015em;}
.problem-issue{font-size:.92rem;color:var(--text-2);line-height:1.65;font-weight:300;}
.problem-fix{background:rgba(0,123,255,.04);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:1rem 1.1rem;margin-top:auto;}
.problem-fix-label{display:block;font-family:var(--font-mono);font-size:.66rem;color:var(--c3);letter-spacing:.1em;margin-bottom:.45rem;}
.problem-fix p{font-size:.86rem;color:var(--text);line-height:1.6;font-weight:400;}

/* â•â•â• MANIFESTO â•â•â• */
.manifesto{padding:9rem 5vw;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
.manifesto-orb{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(77,163,255,.25) 0%,transparent 65%);filter:blur(90px);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:orbPulse 16s ease-in-out infinite;}
.manifesto > .container{position:relative;z-index:2;max-width:1100px;}
.manifesto-mark{font-family:var(--font-serif);font-size:3rem;line-height:1;background:var(--grad-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85;margin-bottom:1.5rem;animation:markSpin 24s linear infinite;display:inline-block;}
@keyframes markSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.manifesto-text{font-family:var(--font-serif);font-size:clamp(2.2rem,5vw,4.4rem);font-style:italic;font-weight:400;line-height:1.25;color:var(--text);letter-spacing:-.02em;margin-bottom:2.5rem;}
.manifesto-text em{background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-weight:400;position:relative;}
.manifesto-text .strike{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(255,255,255,.3);color:var(--text-2);opacity:.55;font-style:italic;}
.manifesto-sig{display:inline-flex;align-items:center;gap:1rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;color:var(--text-2);text-transform:uppercase;}
.ms-line{display:inline-block;width:48px;height:1px;background:linear-gradient(90deg,transparent,var(--c3),transparent);}
.ms-text{color:var(--c3);}

/* â•â•â• STATS â•â•â• */
#stats{padding:6rem 5vw 8rem;}
.metrics-head{margin-bottom:1.5rem;}
.metrics-tabs{display:flex;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.metrics-tab{font-family:var(--font-mono);font-size:.78rem;color:var(--text-2);letter-spacing:.04em;padding:.4rem .8rem;border-radius:var(--r-xs);}
.metrics-tab.active{background:var(--grad-cyan-purple);color:#FFFFFF;}
.metrics-live{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:#10B981;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1240px;margin:0 auto;}
.stat-cell{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:2.2rem 1.8rem;
  position:relative;overflow:hidden;
  transition:all .3s;
}
.stat-cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-plasma);
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.stat-cell:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 30px var(--glow-soft);}
.stat-cell:hover::before{transform:scaleX(1);}
.stat-icon{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);letter-spacing:.04em;margin-bottom:1.2rem;display:inline-block;}
.stat-icon::before{content:"";color:var(--c3);}
.stat-num{
  font-family:var(--font-sans);
  font-size:clamp(2.4rem,4.5vw,3.6rem);
  font-weight:500;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;letter-spacing:-.04em;
}
.stat-label{font-size:.85rem;color:var(--text-2);font-weight:300;margin-top:.6rem;}

/* â•â•â• WHY US (kept for about) â•â•â• */
#why-us{padding:8rem 5vw;}
.why-head{text-align:center;max-width:780px;margin:0 auto 4rem;}
.why-head .eyebrow{justify-content:center;}
.why-head p{margin-top:1rem;font-size:1.05rem;font-weight:300;}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:3rem;}
.why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:2rem 2.2rem;display:flex;gap:1.4rem;align-items:flex-start;transition:all .35s;position:relative;overflow:hidden;}
.why-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 30px var(--glow-soft);}
.why-icon{flex-shrink:0;width:46px;height:46px;border-radius:var(--r-sm);background:rgba(0,123,255,.10);border:1px solid var(--border-2);color:var(--c3);display:flex;align-items:center;justify-content:center;}
.why-icon svg{width:22px;height:22px;}
.why-content h4{font-size:1.12rem;font-weight:500;margin-bottom:.5rem;color:var(--text);letter-spacing:-.01em;}
.why-content p{font-size:.92rem;line-height:1.65;color:var(--text-2);font-weight:300;}
.why-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.why-strip-item{padding:1.6rem 1rem;text-align:center;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:.4rem;}
.why-strip-item:last-child{border-right:none;}
.why-strip-num{font-family:var(--font-sans);font-size:1.9rem;font-weight:500;background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;letter-spacing:-.03em;}
.why-strip-num sup{color:var(--c3);font-size:.6em;font-weight:400;-webkit-text-fill-color:var(--c3);}
.why-strip-l{font-size:.78rem;color:var(--text-2);}

/* â•â•â• SERVICES PEEK MOSAIC â•â•â• */
#services-home{padding:8rem 5vw;background:var(--bg-2);position:relative;overflow:hidden;}
#services-home > .container{position:relative;}
.svc-section-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:4rem;}
.svc-section-side{display:flex;flex-direction:column;gap:1.2rem;}
.s-sub{font-size:1rem;color:var(--text-2);line-height:1.7;font-weight:300;}
.svc-section-link{align-self:flex-start;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c3);font-weight:500;padding:.7rem 0;border-bottom:1px solid var(--c3);border-radius:0;background:none;}
.svc-section-link:hover{color:var(--c4);border-color:var(--c4);}
.svc-sl-arrow{transition:transform .25s;}
.svc-section-link:hover .svc-sl-arrow{transform:translateX(4px);}
.ey-rule{width:14px;height:1px;background:var(--c3);}

.division-block{margin-bottom:2.5rem;}
.div-block-head{display:flex;justify-content:space-between;align-items:end;padding-bottom:1.5rem;margin-bottom:1.8rem;border-bottom:1px solid var(--border);}
.dbh-tag{font-family:var(--font-mono);font-size:.7rem;color:var(--c3);letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.6rem;}
.dbh-tag::before{content:"";display:inline-block;width:14px;height:1px;background:var(--c3);margin-right:.5rem;vertical-align:middle;}
.dbh-left h3{font-size:1.6rem;font-weight:500;color:var(--text);letter-spacing:-.02em;}
.dbh-count{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:1rem;}
.mosaic-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:3.6rem 1.6rem 1.5rem;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);}
.mosaic-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-plasma);opacity:0;transition:opacity .35s;}
.mosaic-card::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(0,123,255,.08),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none;}
.mosaic-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 50px var(--glow-soft);}
.mosaic-card:hover::before{opacity:1;}
.mosaic-card:hover::after{opacity:1;}
.mosaic-tall{grid-row:span 2;}
.mosaic-wide{grid-column:span 2;}
.mosaic-meta{position:absolute;top:1.4rem;left:1.6rem;right:1.6rem;display:flex;justify-content:space-between;align-items:flex-start;}
.mosaic-num{font-family:var(--font-mono);font-size:.76rem;font-weight:500;background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.04em;border:1px solid var(--border-2);background-color:rgba(0,123,255,.05);padding:.3rem .55rem;border-radius:var(--r-xs);}
.mosaic-corner{width:30px;height:30px;border-radius:var(--r-xs);background:rgba(255,255,255,.04);color:var(--c3);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:all .25s;}
.mosaic-card:hover .mosaic-corner{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:var(--c3);box-shadow:0 0 16px var(--glow);}
.mosaic-tag{font-family:var(--font-mono);font-size:.66rem;color:var(--c3);letter-spacing:.08em;margin-bottom:.5rem;}
.mosaic-body h3{font-size:1.2rem;font-weight:500;color:var(--text);letter-spacing:-.02em;margin-bottom:.5rem;line-height:1.2;}
.mosaic-tall .mosaic-body h3{font-size:1.4rem;}
.mosaic-body p{font-size:.88rem;color:var(--text-2);line-height:1.55;font-weight:300;margin-bottom:.85rem;}
.mosaic-stack{display:flex;flex-wrap:wrap;gap:.35rem;}
.mosaic-stack span{font-family:var(--font-mono);font-size:.68rem;padding:.25rem .55rem;border-radius:var(--r-xs);background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border);}

/* â•â•â• FEATURED BUILD â•â•â• */
.featured-build{padding:7rem 5vw;background:var(--bg);position:relative;overflow:hidden;}
.featured-build::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 50% at 90% 0%,var(--glow-purple),transparent 60%),radial-gradient(ellipse 50% 40% at 10% 100%,var(--glow-soft),transparent 60%);}
.featured-build > .container{position:relative;}
.fb-head{text-align:center;max-width:700px;margin:0 auto 3rem;}
.fb-head .eyebrow{justify-content:center;}
.fb-head .s-title::after{content:"";display:block;width:48px;height:2px;background:var(--grad-cyan-purple);margin:1.2rem auto 0;border-radius:2px;}
.fb-card{background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-lg);overflow:hidden;position:relative;isolation:isolate;box-shadow:var(--shadow-xl);}
.fb-card::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(120deg,var(--c3) 0%,transparent 30%,transparent 70%,var(--c4) 100%);background-size:300% 300%;z-index:-1;filter:blur(2px);opacity:.85;animation:fbGradientFlow 8s linear infinite;}
@keyframes fbGradientFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.fb-meta{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.9rem 1.4rem;background:rgba(0,0,0,.3);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;}
.fb-id{background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;}
.fb-tag{color:var(--text-2);}
.fb-status{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;color:#10B981;text-transform:uppercase;letter-spacing:.1em;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);padding:.2rem .55rem;border-radius:var(--r-xs);}
.fb-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:0;}
.fb-text{padding:2.6rem 2.4rem;border-right:1px dashed var(--border);}
.fb-text h3{font-family:var(--font-sans);font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:500;color:var(--text);line-height:1.12;letter-spacing:-.03em;margin-bottom:1.1rem;}
.fb-text h3 em{background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--font-serif);font-style:italic;font-weight:400;}
.fb-text p{font-size:1rem;line-height:1.7;color:var(--text-2);font-weight:300;margin-bottom:1.6rem;}
.fb-stack{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.8rem;}
.fb-stack span{font-family:var(--font-mono);font-size:.72rem;padding:.32rem .65rem;border-radius:100px;background:rgba(0,123,255,.08);color:var(--c3);border:1px solid var(--border-2);}
.fb-cta{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--c3);letter-spacing:.04em;padding:.55rem 0;border-bottom:1px solid var(--c3);transition:gap .25s,color .2s;}
.fb-cta:hover{gap:.75rem;color:var(--c4);border-color:var(--c4);}
.fb-metrics{display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,.2);}
.fb-metric{padding:1.4rem 1.6rem;border-right:1px dashed var(--border);border-bottom:1px dashed var(--border);display:flex;flex-direction:column;gap:.35rem;}
.fb-metric:nth-child(2n){border-right:none;}
.fb-metric:nth-child(n+3){border-bottom:none;}
.fb-metric-hero{grid-column:1 / -1;padding:2rem 1.6rem;background:linear-gradient(135deg,rgba(0,123,255,.10),rgba(77,163,255,.06));}
.fb-num{font-family:var(--font-sans);font-size:clamp(2rem,4vw,3rem);font-weight:500;color:var(--text);letter-spacing:-.04em;line-height:1;}
.fb-metric-hero .fb-num{font-size:clamp(2.6rem,5vw,4rem);background:var(--grad-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;}
.fb-num sup{font-size:.45em;font-weight:400;color:var(--c3);margin-left:.04em;-webkit-text-fill-color:var(--c3);}
.fb-l{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.06em;}

/* â•â•â• BLOG â•â•â• */
#blog-home{padding:8rem 5vw;}
.blog-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:3.5rem;gap:2rem;flex-wrap:wrap;}
.blog-grid{display:grid;gap:1.5rem;}
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);}
.blog-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 30px var(--glow-soft);}
.blog-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s,filter .35s;filter:saturate(.85) brightness(.85);}
.blog-card:hover .blog-card-img img{transform:scale(1.04);filter:saturate(1.05) brightness(.95);}
.blog-date{position:absolute;top:1rem;left:1rem;background:rgba(10,14,26,.85);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:.7rem;font-weight:500;color:var(--text);letter-spacing:.04em;padding:.32rem .65rem;border-radius:var(--r-xs);border:1px solid var(--border-2);}
.blog-card-body{padding:1.6rem 1.5rem 1.7rem;}
.blog-tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c3);display:inline-block;margin-bottom:.7rem;}
.blog-tag::before{content:"";display:inline-block;width:10px;height:1px;background:var(--c3);margin-right:.4rem;vertical-align:middle;}
.blog-card-body h3{font-size:1.1rem;font-weight:500;line-height:1.35;margin-bottom:.6rem;color:var(--text);letter-spacing:-.015em;}
.blog-card-body p{font-size:.88rem;color:var(--text-2);line-height:1.6;margin-bottom:1rem;font-weight:300;}
.blog-read{font-family:var(--font-mono);font-size:.76rem;font-weight:500;color:var(--c3);letter-spacing:.04em;display:inline-flex;gap:.3rem;transition:gap .25s,color .25s;}
.blog-card:hover .blog-read{color:var(--c4);gap:.55rem;}

/* â•â•â• CTA â•â•â• */
.cta-section{position:relative;padding:8rem 5vw;background:linear-gradient(135deg,var(--bg-2),var(--surface));overflow:hidden;margin:5rem 5vw;border-radius:var(--r-lg);border:1px solid var(--border-2);box-shadow:var(--shadow-xl),0 0 80px var(--glow-soft);}
.cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 80% 20%,rgba(0,123,255,.22),transparent 60%),radial-gradient(ellipse 50% 40% at 10% 80%,rgba(77,163,255,.18),transparent 60%);}
.cta-glow{display:none;}
.cta-box{text-align:center;max-width:820px;margin:0 auto;position:relative;}
.cta-box .eyebrow{justify-content:center;}
.cta-box h2{font-family:var(--font-sans);font-size:clamp(2.2rem,5vw,4rem);font-weight:400;color:var(--text);margin:.6rem 0 1.2rem;letter-spacing:-.04em;line-height:1.05;}
.cta-box em{background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-family:var(--font-serif);font-weight:400;}
.cta-box p{color:var(--text-2);font-size:1.05rem;margin-bottom:2rem;font-weight:300;}
.cta-btns{display:flex;justify-content:center;gap:.85rem;flex-wrap:wrap;}

/* â•â•â• FOOTER â•â•â• */
footer{background:var(--bg-2);color:var(--text-2);padding:5rem 5vw 2rem;border-top:1px solid var(--border);position:relative;}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 60% at 80% 0%,var(--glow-purple),transparent 60%);opacity:.5;}
footer .container{position:relative;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border);}
/* footer logo â€” clean, no plate / border / glow */
.f-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.5rem .8rem;

  border-radius:14px;

  background:rgba(255,255,255,0.02);

  border:1px solid rgba(255,255,255,0.05);
}
.f-logo img{
  height:90px;width:auto;display:block;
  filter:none;
  background:transparent;
  object-fit:contain;
}
.f-desc{color:var(--text-2);font-size:.9rem;line-height:1.7;margin:1.4rem 0 1.5rem;max-width:340px;font-weight:300;}
.f-social{display:flex;gap:.6rem;}
.soc{width:36px;height:36px;border-radius:var(--r-xs);background:rgba(255,255,255,.04);border:1px solid var(--border);font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--text-2);display:flex;align-items:center;justify-content:center;transition:all .25s;}
.soc:hover{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:var(--c3);transform:translateY(-2px);box-shadow:0 0 16px var(--glow);}
.footer-col h5{font-family:var(--font-mono);font-size:.7rem;color:var(--c3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem;font-weight:500;}
.footer-col h5::before{content:"";display:inline-block;width:10px;height:1px;background:var(--c3);margin-right:.5rem;vertical-align:middle;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;}
.footer-col a{color:var(--text-2);font-size:.88rem;transition:color .2s,padding .2s;font-weight:300;}
.footer-col a:hover{color:var(--c3);padding-left:4px;}
.footer-col .f-svc-group{margin-top:.6rem;list-style:none;}
.footer-col .f-svc-group:first-child{margin-top:0;}
.footer-col .f-svc-h{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:lowercase;color:var(--c3);opacity:.7;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:.5rem;}
.f-copy{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);}
.f-legal{display:flex;gap:1.5rem;}
.f-legal a{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);}
.f-legal a:hover{color:var(--c3);}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   ABOUT / SERVICES / CONTACT / BLOG HEROES
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.about-hero,.services-hero,.contact-hero,.blog-hero{padding:11rem 5vw 5rem;position:relative;overflow:hidden;}
.about-hero-bg,.services-hero-bg,.contact-hero-bg,.blog-hero-bg{display:none;}
.about-hero-inner,.services-hero-inner,.contact-hero-inner,.blog-hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;}
.ah-breadcrumb,.sh-breadcrumb,.ch-breadcrumb,.bh-breadcrumb{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-bottom:2rem;}
.ah-breadcrumb a,.sh-breadcrumb a,.ch-breadcrumb a,.bh-breadcrumb a{color:var(--muted);transition:color .2s;}
.ah-breadcrumb a:hover,.sh-breadcrumb a:hover,.ch-breadcrumb a:hover,.bh-breadcrumb a:hover{color:var(--c3);}
.ah-breadcrumb .now,.sh-breadcrumb .now,.ch-breadcrumb .now,.bh-breadcrumb .now{color:var(--c3);}
.sep{opacity:.6;}

.ah-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;margin-bottom:3rem;}
.ah-eyebrow,.sh-eyebrow,.ch-eyebrow,.bh-eyebrow{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--c3);margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:.5rem;}
.ah-eyebrow::before,.sh-eyebrow::before,.ch-eyebrow::before,.bh-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c3);box-shadow:0 0 12px var(--c3);}
.ah-title,.sh-title,.ch-title,.bh-title{font-family:var(--font-sans);font-size:clamp(2.4rem,5.6vw,5rem);font-weight:400;line-height:1;letter-spacing:-.045em;color:var(--text);margin-bottom:1.6rem;}
.ah-title em,.sh-title em,.ch-title em,.bh-title em{background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--font-serif);font-style:italic;font-weight:400;}
.ah-lead,.sh-lead,.ch-lead,.bh-lead{font-size:1.05rem;color:var(--text-2);line-height:1.75;margin-bottom:2rem;max-width:540px;font-weight:300;}
.ah-lead strong,.sh-lead strong,.ch-lead strong,.bh-lead strong{color:var(--text);font-weight:500;}
.ah-stats-inline,.sh-stats-inline,.bh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.6rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:1.8rem;}
.ah-stat-item,.sh-stat-item,.bh-stat{display:flex;flex-direction:column;gap:.3rem;}
.ah-stat-item .num,.sh-stat-item .num,.bh-stat .num{font-family:var(--font-sans);font-size:1.7rem;font-weight:500;background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;letter-spacing:-.03em;}
.ah-stat-item .num sup,.sh-stat-item .num sup,.bh-stat .num sup{color:var(--c3);font-size:.6em;font-weight:400;-webkit-text-fill-color:var(--c3);}
.ah-stat-item .l,.sh-stat-item .l,.bh-stat .l{font-size:.74rem;color:var(--text-2);}
.ah-btns,.sh-btns,.ch-btns{display:flex;gap:.75rem;flex-wrap:wrap;}

.ah-right{position:relative;display:grid;grid-template-rows:1fr 1fr;gap:1rem;height:auto;min-height:480px;}
.ah-img{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border-2);box-shadow:var(--shadow-md);}
.ah-img-a{grid-row:span 2;}
.ah-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.9);}
.ah-badge{position:absolute;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:.85rem 1rem;display:flex;align-items:center;gap:.7rem;box-shadow:var(--shadow-lg);font-size:.78rem;}
.ah-badge-icon{width:32px;height:32px;border-radius:var(--r-xs);background:rgba(0,123,255,.12);color:var(--c3);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ah-badge-icon svg{width:16px;height:16px;}
.ah-badge-l{color:var(--muted);font-size:.7rem;font-family:var(--font-mono);letter-spacing:.04em;}
.ah-badge-v{color:var(--text);font-weight:500;font-size:.85rem;}
.ah-badge-since{top:1rem;left:-1rem;}.ah-badge-loc{bottom:6rem;right:-1rem;}.ah-badge-trust{bottom:0;left:30%;}

.ah-facts,.ch-methods{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);margin-top:2rem;overflow:hidden;}
.ah-fact,.ch-method{padding:1.6rem 1.4rem;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:.4rem;}
.ah-fact:last-child,.ch-method:last-child{border-right:none;}
.ah-fact-icon,.ch-method-icon{width:36px;height:36px;border-radius:var(--r-xs);background:rgba(0,123,255,.12);color:var(--c3);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;}
.ah-fact-icon svg,.ch-method-icon svg{width:18px;height:18px;}
.ah-fact-tag,.ch-method-tag{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem;}
.ah-fact-v,.ch-method-v{font-size:.92rem;color:var(--text);font-weight:500;line-height:1.45;}
.ah-fact-v a,.ch-method-v a{color:var(--text);transition:color .2s;}
.ah-fact-v a:hover,.ch-method-v a:hover{color:var(--c3);}
.ah-fact-l,.ch-method-l{font-size:.78rem;color:var(--text-2);}

/* parallax / ethos quote block */
.ethos-block{padding:5rem 5vw 2rem;}
.parallax-block{margin:0;border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:340px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-2);box-shadow:var(--shadow-xl),0 0 60px var(--glow-soft);}
.parallax-block::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,.92),rgba(20,20,20,.78));}
.parallax-block::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-plasma);opacity:.6;z-index:2;}
.parallax-inner{position:relative;z-index:2;text-align:center;padding:3.5rem 2rem;max-width:820px;display:flex;flex-direction:column;align-items:center;gap:1.25rem;}
.parallax-mark{
  font-family:var(--font-serif);font-size:2.4rem;line-height:1;
  background:var(--grad-plasma);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:markSpin 24s linear infinite;display:inline-block;
  opacity:.85;
}
.parallax-inner h3{color:var(--text);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:400;line-height:1.45;font-family:var(--font-serif);font-style:italic;letter-spacing:-.01em;}
.parallax-sig{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  color:var(--c3);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .85rem;border-radius:100px;
  background:rgba(0,123,255,.08);
  border:1px solid var(--border-2);
}

@media (max-width:760px){
  .ethos-block{padding:3rem 5vw 1.5rem;}
  .parallax-inner{padding:2rem 1.2rem;gap:.9rem;}
  .parallax-mark{font-size:1.8rem;}
  .parallax-sig{font-size:.62rem;letter-spacing:.12em;}
}

/* live process */
.live-process{padding:8rem 5vw;background:var(--bg-2);}
.lp-head{text-align:center;max-width:780px;margin:0 auto 4rem;}
.lp-live-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#10B981;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);padding:.4rem .85rem;border-radius:100px;margin-bottom:1.4rem;}
.lp-pulse{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18);animation:pulseDot 2s infinite;}
.lp-pipeline{position:relative;display:flex;flex-direction:column;gap:1.5rem;max-width:1000px;margin:0 auto;}
.lp-spine{position:absolute;left:24px;top:24px;bottom:24px;width:2px;background:var(--grad-cyan-purple);opacity:.4;}
.lp-step{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;position:relative;}
.lp-node{width:50px;height:50px;border-radius:var(--r-md);background:var(--surface);color:var(--c3);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:500;font-size:.95rem;border:1px solid var(--border-2);flex-shrink:0;z-index:2;box-shadow:0 0 0 6px var(--bg-2),0 0 24px var(--glow-soft);}
.lp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.8rem 2rem;}
.lp-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;}
.lp-phase-tag{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.lp-time{font-family:var(--font-mono);font-size:.7rem;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-radius:100px;}
.lp-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulseDot 2s infinite;}
.lp-card h4{font-size:1.15rem;font-weight:500;margin-bottom:.5rem;color:var(--text);letter-spacing:-.015em;}
.lp-card p{font-size:.92rem;line-height:1.7;color:var(--text-2);margin-bottom:1rem;font-weight:300;}
.lp-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem;}
.lp-list li{font-size:.85rem;color:var(--text-2);padding-left:1.4rem;position:relative;font-weight:300;}
.lp-list li::before { content: "\203A";position:absolute;left:0;color:var(--c3);font-family:var(--font-mono);}
.lp-tag-row{display:flex;flex-wrap:wrap;gap:.4rem;}
.lp-tag{font-family:var(--font-mono);font-size:.7rem;padding:.3rem .65rem;border-radius:var(--r-xs);background:rgba(0,123,255,.06);color:var(--c3);border:1px solid var(--border-2);}

/* index list */
.index-section{padding:8rem 5vw;}
.index-list{margin-top:2.5rem;border-top:1px solid var(--border);}
.index-row{display:grid;grid-template-columns:auto 1fr 2fr auto;gap:2rem;padding:1.8rem 0;border-bottom:1px solid var(--border);align-items:center;transition:padding .25s,background .25s;}
.index-row:hover{padding-left:1rem;background:rgba(0,123,255,.04);}
.idx-num{font-family:var(--font-mono);font-size:.85rem;background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;}
.idx-ttl{font-size:1.2rem;font-weight:500;color:var(--text);letter-spacing:-.015em;}
.idx-desc{font-size:.92rem;color:var(--text-2);line-height:1.65;font-weight:300;}
.idx-arr{width:36px;height:36px;border-radius:var(--r-xs);background:var(--surface);color:var(--text);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .25s;}
.index-row:hover .idx-arr{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:var(--c3);transform:translateX(4px);box-shadow:0 0 16px var(--glow);}

/* team */
.team-tree-section{padding:8rem 5vw;background:var(--bg-2);}
.team-tree{display:flex;flex-direction:column;gap:2.5rem;align-items:center;margin-top:3rem;}
.tt-row{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:100%;}
.tt-row-label{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;}
.tt-row-label::before{content:"";display:inline-block;width:14px;height:1px;background:var(--c3);margin-right:.5rem;vertical-align:middle;}
.tt-row-cards{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;}
.tt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.8rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;width:100%;max-width:300px;transition:all .3s;}
.tt-card-lg{max-width:340px;}
.tt-card:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 30px var(--glow-soft);}
.tt-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;border:2px solid var(--c3);box-shadow:0 0 16px var(--glow-soft);}
.tt-photo img{width:100%;height:100%;object-fit:cover;}
.tt-tag{font-family:var(--font-mono);font-size:.66rem;color:var(--c3);letter-spacing:.12em;text-transform:uppercase;}
.tt-info h4{font-size:1.08rem;font-weight:500;color:var(--text);margin:.4rem 0;letter-spacing:-.015em;}
.tt-designation{font-size:.82rem;color:var(--text-2);font-weight:300;}
.tt-contact{display:flex;flex-direction:column;gap:.4rem;width:100%;margin-top:.6rem;padding-top:.8rem;border-top:1px solid var(--border);}
.tt-info-line{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-2);justify-content:center;transition:color .2s;}
.tt-info-line:hover{color:var(--c3);}
.tt-info-line svg{width:14px;height:14px;flex-shrink:0;}
.tt-connector{width:2px;height:32px;background:var(--grad-cyan-purple);opacity:.5;}

/* directors row â€” only two cards side by side, full photo */
.tt-row-directors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;width:100%;max-width:880px;margin:0 auto;}
.tt-card-full{padding:0;max-width:none;width:100%;overflow:hidden;align-items:stretch;text-align:left;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);}
.tt-card-full .tt-photo-full{width:100%;aspect-ratio:4 / 5;overflow:hidden;border:none;border-radius:0;box-shadow:none;background:#0d0d0d;}
.tt-card-full .tt-photo-full img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform .6s ease;}
.tt-card-full:hover .tt-photo-full img{transform:scale(1.04);}
.tt-card-full .tt-info{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.35rem;}
.tt-card-full .tt-tag{align-self:flex-start;}
.tt-card-full .tt-info h4{font-size:1.25rem;margin:.3rem 0 .1rem;}
.tt-card-full .tt-contact{align-items:flex-start;}
.tt-card-full .tt-info-line{justify-content:flex-start;}
@media (max-width:780px){
  .tt-row-directors{grid-template-columns:1fr;gap:1.5rem;max-width:420px;}
}

/* â•â•â• SERVICES PAGE â•â•â• */
.sh-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:start;}
.sh-right{display:flex;flex-direction:column;gap:1rem;}
.sh-division{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.8rem 2rem;transition:all .3s;position:relative;overflow:hidden;}
.sh-division::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--grad-cyan-purple);transform:scaleY(0);transform-origin:top;transition:transform .35s;}
.sh-division:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 30px var(--glow-soft);}
.sh-division:hover::before{transform:scaleY(1);}
.sh-div-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.sh-div-tag{font-family:var(--font-mono);font-size:.7rem;color:var(--c3);letter-spacing:.12em;text-transform:uppercase;}
.sh-div-arrow{width:32px;height:32px;border-radius:var(--r-xs);background:rgba(0,123,255,.06);color:var(--c3);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:all .25s;}
.sh-division:hover .sh-div-arrow{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:transparent;}
.sh-division h3{font-size:1.4rem;font-weight:500;margin-bottom:.4rem;color:var(--text);letter-spacing:-.02em;}
.sh-div-sub{font-size:.85rem;color:var(--text-2);font-family:var(--font-mono);margin-bottom:1rem;letter-spacing:.02em;}
.sh-div-list{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem;}
.sh-div-list li{font-size:.9rem;color:var(--text-2);padding-left:1.2rem;position:relative;font-weight:300;}
.sh-div-list li::before { content: "\203A";position:absolute;left:0;color:var(--c3);}
.sh-div-foot{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.75rem;color:var(--muted);padding-top:.9rem;border-top:1px solid var(--border);}
.sh-div-cta{color:var(--c3);font-weight:500;}

.division-section{padding:8rem 5vw;}
.division-section--alt{background:var(--bg-2);}
.division-head{text-align:center;max-width:780px;margin:0 auto 4rem;}
.division-brand{font-family:var(--font-mono);font-size:.74rem;color:var(--c3);letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;}
.division-brand::before{content:"";display:inline-block;width:14px;height:1px;background:var(--c3);margin-right:.5rem;vertical-align:middle;}
.services-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.service-full-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:2.2rem 2rem;cursor:none;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.service-full-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--glow-soft),transparent 60%);opacity:0;transition:opacity .35s;}
.service-full-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow-lg),0 0 40px var(--glow-soft);}
.service-full-card:hover::after{opacity:1;}
.service-full-card > *{position:relative;z-index:1;}
.sfc-num{position:absolute;top:1.4rem;right:1.6rem;z-index:2;font-family:var(--font-mono);font-size:.78rem;background:var(--grad-cyan-purple);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;letter-spacing:.04em;background-color:rgba(0,123,255,.06);border:1px solid var(--border-2);padding:.3rem .6rem;border-radius:var(--r-xs);}
.sfc-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:inline-block;margin-bottom:1.4rem;}
.sfc-tag::before{content:"";display:inline-block;width:10px;height:1px;background:var(--c3);margin-right:.4rem;vertical-align:middle;}
.sfc-icon-wrap{width:54px;height:54px;border-radius:var(--r-sm);background:rgba(0,123,255,.06);border:1px solid var(--border-2);color:var(--c3);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;transition:all .3s;}
.service-full-card:hover .sfc-icon-wrap{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:transparent;box-shadow:0 0 20px var(--glow);}
.sfc-icon{width:24px;height:24px;}
.sfc-title{font-size:1.25rem;font-weight:500;margin-bottom:.7rem;color:var(--text);letter-spacing:-.02em;}
.sfc-desc{font-size:.9rem;color:var(--text-2);line-height:1.7;margin-bottom:1.4rem;font-weight:300;}
.sfc-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--c3);letter-spacing:.04em;padding-bottom:.4rem;border-bottom:1px solid transparent;transition:all .25s;}
.service-full-card:hover .sfc-link{color:var(--c4);border-bottom-color:var(--c4);gap:.7rem;}
.sfc-link-arrow svg{width:14px;height:14px;}
.sfc-shine{display:none;}

.service-full-card .sfc-console{position:absolute;left:0;right:0;bottom:0;background:var(--ink);border-top:1px solid var(--border-2);padding:.7rem 1rem;font-family:var(--font-mono);font-size:.7rem;color:rgba(240,244,248,.85);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.25rem;border-radius:0 0 var(--r-md) var(--r-md);pointer-events:none;}
.service-full-card:hover .sfc-console{transform:translateY(0);}
.sfc-c-line{display:flex;align-items:center;gap:.45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sfc-c-prompt{color:var(--c3);}
.sfc-c-key{color:#10B981;}
.sfc-c-str{color:var(--c4);}
.sfc-c-cmt{color:rgba(240,244,248,.92);font-style:italic;}

/* process steps */
#process{padding:7rem 5vw;background:var(--bg-2);}
.proc-head{text-align:center;max-width:680px;margin:0 auto 3.5rem;}
.proc-head .eyebrow{justify-content:center;}
.proc-line{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative;}
.proc-line::before{content:"";position:absolute;top:25px;left:10%;right:10%;height:1px;background:repeating-linear-gradient(90deg,var(--c3) 0,var(--c3) 4px,transparent 4px,transparent 10px);opacity:.5;z-index:0;}
.proc-step{position:relative;text-align:center;z-index:1;}
.proc-circle{width:50px;height:50px;border-radius:var(--r-md);background:var(--surface);color:var(--c3);font-family:var(--font-mono);font-weight:500;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;border:1px solid var(--border-2);box-shadow:0 0 0 6px var(--bg-2),0 0 20px var(--glow-soft);}
.proc-step h4{font-size:1.05rem;font-weight:500;margin-bottom:.5rem;color:var(--text);letter-spacing:-.015em;}
.proc-step p{font-size:.85rem;color:var(--text-2);line-height:1.65;font-weight:300;}

/* â•â•â• SERVICE MODAL â•â•â• */
.svc-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:2rem;}
.svc-modal.open{display:flex;animation:svcFadeIn .25s ease-out;}
@keyframes svcFadeIn{from{opacity:0}to{opacity:1}}
.svc-modal-backdrop{position:absolute;inset:0;background:rgba(5,7,9,.78);backdrop-filter:blur(12px);}
.svc-modal-panel{position:relative;z-index:2;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-md);max-width:880px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 80px var(--glow-soft);animation:svcSlideUp .3s cubic-bezier(.2,.8,.2,1);}
@keyframes svcSlideUp{from{transform:translateY(20px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.svc-modal-tabbar{display:flex;align-items:center;gap:.85rem;padding:.7rem 1rem;background:rgba(0,0,0,.3);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:4;}
.svc-tab-dots{display:flex;gap:.4rem;}
.svc-tab-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);}
.svc-tab-dots span:first-child{background:#FF5F57;}.svc-tab-dots span:nth-child(2){background:#FEBC2E;}.svc-tab-dots span:nth-child(3){background:#28C840;}
.svc-tab-file{flex:1;text-align:center;font-family:var(--font-mono);font-size:.74rem;color:var(--text-2);letter-spacing:.02em;}
.svc-tab-file span{color:var(--c3);}
.svc-tab-status{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#10B981;padding:.25rem .55rem;border-radius:var(--r-xs);background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);}
.svc-tab-dot{width:6px;height:6px;border-radius:50%;background:#10B981;animation:pulseDot 2s infinite;}
.svc-modal-close{width:30px;height:30px;border-radius:var(--r-xs);background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);cursor:none;font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.svc-modal-close:hover{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:var(--c3);}
.svc-modal-head{padding:2rem 2.2rem 1.6rem;border-bottom:1px dashed var(--border);position:relative;}
.svc-modal-head::before{content:"";position:absolute;left:1rem;top:2rem;bottom:1.6rem;width:2px;background:var(--grad-cyan-purple);}
.svc-modal-id{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
.svc-modal-num{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:#FFFFFF;background:var(--grad-cyan-purple);padding:.25rem .55rem;border-radius:var(--r-xs);letter-spacing:.04em;}
.svc-modal-divider{width:24px;height:1px;background:var(--border-2);}
.svc-modal-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);letter-spacing:.06em;}
.svc-modal-head h2{font-family:var(--font-sans);font-size:2rem;font-weight:500;letter-spacing:-.03em;color:var(--text);margin-bottom:.9rem;}
.svc-modal-head p{font-size:.95rem;color:var(--text-2);line-height:1.7;max-width:680px;font-weight:300;}
.svc-modal-body{padding:1.8rem 2.2rem;}
.svc-modal-features-label{font-family:var(--font-mono);font-size:.72rem;color:var(--c3);letter-spacing:.08em;margin-bottom:1.2rem;text-transform:lowercase;}
.svc-modal-group{margin-bottom:1rem;background:rgba(0,123,255,.03);border:1px solid var(--border);border-radius:var(--r-sm);padding:1.2rem 1.4rem;transition:border-color .2s;}
.svc-modal-group:hover{border-color:var(--border-2);}
.svc-modal-group:last-child{margin-bottom:0;}
.svc-modal-group-name{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--c3);margin-bottom:.9rem;letter-spacing:.02em;display:flex;align-items:center;gap:.5rem;}
.svc-modal-group-name::before{content:"";color:var(--c4);}
.svc-modal-group-name::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-2),transparent);}
#svcModalFeatures ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem .8rem;}
#svcModalFeatures li{font-family:var(--font-mono);font-size:.82rem;color:var(--text);padding:.45rem .65rem .45rem 1.6rem;position:relative;border-radius:var(--r-xs);transition:all .15s;cursor:default;}
#svcModalFeatures li::before { content: "\203A";position:absolute;left:.65rem;color:var(--c3);}
#svcModalFeatures li:hover{background:rgba(0,123,255,.06);color:var(--c3);}
.svc-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding:1.3rem 2.2rem 1.8rem;border-top:1px solid var(--border);background:rgba(0,0,0,.2);}
.svc-modal-sla{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);letter-spacing:.04em;}
.svc-modal-actions{display:flex;gap:.6rem;}
body.modal-lock{overflow:hidden;}

/* â•â•â• SYSTEM STATUS â•â•â• */
.sys-status{padding:3rem 5vw 2rem;}
.sys-bar{background:var(--ink);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-md);padding:1.4rem 1.6rem;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.sys-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-plasma);opacity:.85;}
.sys-bar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;gap:.8rem;padding-bottom:1rem;border-bottom:1px dashed var(--border);}
.sys-bar-l{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;}
.sys-tag{color:var(--c3);text-transform:lowercase;}
.sys-sep{color:rgba(255,255,255,.25);}
.sys-mode{color:var(--text);text-transform:lowercase;background:rgba(0,123,255,.08);padding:.2rem .55rem;border-radius:var(--r-xs);border:1px solid var(--border-2);}
.sys-time{font-family:var(--font-mono);font-size:.7rem;color:#10B981;letter-spacing:.06em;display:inline-flex;align-items:center;gap:.45rem;}
.sys-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18),0 0 12px #10B981;animation:sysDot 2s ease-in-out infinite;}
@keyframes sysDot{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.18),0 0 12px #10B981}50%{box-shadow:0 0 0 6px rgba(16,185,129,.06),0 0 18px #10B981}}
.sys-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;}
.sys-cell{padding:.5rem 1rem;border-right:1px dashed var(--border);display:flex;flex-direction:column;gap:.4rem;position:relative;}
.sys-cell:last-child{border-right:none;}
.sys-key{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.04em;}
.sys-val{font-family:var(--font-mono);font-size:1.05rem;font-weight:500;color:var(--text);line-height:1;letter-spacing:-.01em;}
.sys-val.good{color:#10B981;}
.sys-num{display:inline-block;}
.sys-meter{height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;}
.sys-meter span{display:block;height:100%;background:var(--grad-cyan-purple);border-radius:inherit;animation:sysFill 1.6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px var(--glow);}
@keyframes sysFill{from{width:0!important;}}

/* â•â•â• BUILD PIPELINE â•â•â• */
.build-pipeline{padding:7rem 5vw 5rem;}
.bp-head{text-align:center;max-width:780px;margin:0 auto 3.5rem;}
.bp-head .eyebrow{justify-content:center;}
.bp-head p{margin-top:1rem;font-size:1rem;font-weight:300;}
.bp-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:2.5rem 2rem 1.6rem;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.bp-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 30%,rgba(0,123,255,.08),transparent 60%);pointer-events:none;}
.bp-svg{width:100%;height:auto;display:block;position:relative;z-index:1;}
.bp-node text.bp-icon{font-family:var(--font-mono);font-size:11px;font-weight:600;text-anchor:middle;fill:var(--c3);}
.bp-node text.bp-lbl{font-family:var(--font-mono);font-size:11px;font-weight:500;text-anchor:middle;fill:var(--text-2);letter-spacing:.04em;}
.bp-node circle:not(.bp-glow){fill:var(--surface);stroke:var(--c3);}
.bp-node.bp-final circle:not(.bp-glow){fill:var(--surface-elev);}
.bp-node.bp-final text.bp-icon{fill:var(--c4);}
.bp-node .bp-glow{opacity:.4;animation:bpPulse 3s ease-in-out infinite;}
.bp-node:nth-of-type(1) .bp-glow{animation-delay:0s}.bp-node:nth-of-type(2) .bp-glow{animation-delay:.4s}.bp-node:nth-of-type(3) .bp-glow{animation-delay:.8s}.bp-node:nth-of-type(4) .bp-glow{animation-delay:1.2s}.bp-node:nth-of-type(5) .bp-glow{animation-delay:1.6s}.bp-node:nth-of-type(6) .bp-glow{animation-delay:2s}.bp-node:nth-of-type(7) .bp-glow{animation-delay:2.4s}
@keyframes bpPulse{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.7;transform:scale(1.1)}}
.bp-node{transform-box:fill-box;transform-origin:center;}
.bp-packet{filter:drop-shadow(0 0 8px var(--c3));}
.bp-log{margin-top:1.6rem;background:var(--ink);border:1px solid var(--border);border-radius:var(--r-sm);padding:.9rem 1.1rem;font-family:var(--font-mono);font-size:.78rem;display:flex;flex-direction:column;gap:.45rem;position:relative;z-index:1;}
.bp-log-line{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;}
.bp-log-line:nth-of-type(1){animation:bpLog .5s ease-out}.bp-log-line:nth-of-type(2){animation:bpLog .5s .2s ease-out backwards}.bp-log-line:nth-of-type(3){animation:bpLog .5s .4s ease-out backwards}.bp-log-line:nth-of-type(4){animation:bpLog .5s .6s ease-out backwards}
@keyframes bpLog{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.bp-log-time{color:var(--muted);font-size:.7rem;}
.bp-log-tag{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.2rem .55rem;border-radius:var(--r-xs);}
.bp-log-tag.green{background:rgba(16,185,129,.12);color:#10B981;border:1px solid rgba(16,185,129,.24);}
.bp-log-tag.amber{background:rgba(77,163,255,.14);color:#4DA3FF;border:1px solid rgba(77,163,255,.3);}
.bp-log-msg{color:var(--text);font-weight:400;}

/* â•â•â• CODE RAIN â•â•â• */
.division-section#all-services{position:relative;overflow:hidden;}
.code-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.18;mix-blend-mode:screen;mask-image:linear-gradient(180deg,transparent 0%,black 30%,black 70%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 30%,black 70%,transparent 100%);}
.division-section#all-services > .container{position:relative;z-index:2;}

/* â•â•â• SOLUTIONS IN MOTION â•â•â• */
.solutions-motion{padding:7rem 5vw;background:var(--bg);}
.sm-head{text-align:center;max-width:760px;margin:0 auto 4rem;}
.sm-head .eyebrow{justify-content:center;}
.sm-head .s-title::after{content:"";display:block;width:48px;height:2px;background:var(--grad-cyan-purple);margin:1.2rem auto 0;border-radius:2px;}
.sm-head p{margin-top:1rem;font-size:1rem;font-weight:300;color:var(--text-2);}
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.sm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;position:relative;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s,border-color .35s;box-shadow:var(--shadow-sm);transform-style:preserve-3d;perspective:800px;}
.sm-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),0 0 40px var(--glow-soft);border-color:var(--border-2);}
.sm-demo{height:200px;background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border-2);}
.sm-demo::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-plasma);opacity:.8;}
.sm-info{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;position:relative;}
.sm-tag{font-family:var(--font-mono);font-size:.7rem;color:var(--c3);letter-spacing:.04em;}
.sm-info h3{font-size:1.1rem;font-weight:500;color:var(--text);letter-spacing:-.015em;line-height:1.25;}
.sm-info p{font-size:.86rem;color:var(--text-2);line-height:1.55;font-weight:300;}
.sm-status{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#10B981;display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;padding:.25rem .6rem;border-radius:100px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);align-self:flex-start;}

/* solutions demos */
.demo-ide{width:88%;background:#080B16;border:1px solid var(--border-2);border-radius:var(--r-sm);font-family:var(--font-mono);overflow:hidden;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);}
.demo-ide-bar{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.06);}
.ide-dots{display:flex;gap:.3rem;}
.ide-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);}
.ide-dots span:first-child{background:#FF5F57;}.ide-dots span:nth-child(2){background:#FEBC2E;}.ide-dots span:nth-child(3){background:#28C840;}
.ide-file{font-size:.62rem;color:rgba(240,244,248,.92);letter-spacing:.04em;}
.demo-ide-body{padding:.7rem .7rem .8rem;font-size:.7rem;line-height:1.7;color:rgba(240,244,248,.85);}
.ide-line{display:flex;gap:.4rem;align-items:center;white-space:nowrap;overflow:hidden;width:0;animation:ideType 9s steps(40,end) infinite;}
.ide-line:nth-child(1){animation-delay:0s}.ide-line:nth-child(2){animation-delay:.7s}.ide-line:nth-child(3){animation-delay:1.4s}.ide-line:nth-child(4){animation-delay:2.1s}.ide-line:nth-child(5){animation-delay:2.8s}
@keyframes ideType{0%{width:0}10%,90%{width:100%}100%{width:0}}
.ide-num{color:rgba(240,244,248,.92);min-width:1ch;}
.ide-key{color:#4DA3FF;}
.ide-var{color:#99C2FF;}
.ide-tag{color:var(--c3);}
.ide-cursor::after{content:"";color:var(--c3);animation:caret 1s steps(2) infinite;}

.ai-svg{width:100%;height:100%;padding:1rem;}
.ai-nodes circle{fill:rgba(0,123,255,.18);stroke:var(--c3);stroke-width:1.5;}
.ai-nodes .ai-mid{fill:rgba(77,163,255,.4);stroke:var(--c4);}
.ai-nodes .ai-out{fill:var(--c3);animation:aiOut 1.6s ease-in-out infinite;}
@keyframes aiOut{0%,100%{filter:drop-shadow(0 0 4px var(--c3))}50%{filter:drop-shadow(0 0 12px var(--c3))}}
.ai-edges line{stroke:rgba(0,123,255,.4);stroke-dasharray:3 3;animation:aiFlow 2s linear infinite;}
@keyframes aiFlow{from{stroke-dashoffset:6}to{stroke-dashoffset:0}}
.ai-token{fill:#FFFFFF;filter:drop-shadow(0 0 8px var(--c3));}

.demo-rack{width:88%;display:flex;flex-direction:column;gap:.4rem;font-family:var(--font-mono);}
.rack-server{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:.6rem;padding:.4rem .7rem;background:rgba(255,255,255,.04);border:1px solid var(--border-2);border-radius:var(--r-xs);}
.rack-led{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);animation:rackLed 4s ease-in-out infinite;}
.rack-server:nth-child(1) .rack-led{animation-delay:0s}.rack-server:nth-child(2) .rack-led{animation-delay:.7s}.rack-server:nth-child(3) .rack-led{animation-delay:1.4s}.rack-server:nth-child(4) .rack-led{animation-delay:2.1s}
@keyframes rackLed{0%,15%{background:rgba(255,255,255,.2);box-shadow:none}25%,55%{background:#4DA3FF;box-shadow:0 0 8px #4DA3FF}65%,100%{background:#10B981;box-shadow:0 0 8px #10B981}}
.rack-bar{height:4px;border-radius:2px;background:rgba(0,123,255,.12);position:relative;overflow:hidden;}
.rack-bar::after{content:"";position:absolute;inset:0;background:var(--grad-cyan-purple);transform:scaleX(0);transform-origin:left;animation:rackBar 4s ease-out infinite;}
.rack-server:nth-child(1) .rack-bar::after{animation-delay:0s}.rack-server:nth-child(2) .rack-bar::after{animation-delay:.7s}.rack-server:nth-child(3) .rack-bar::after{animation-delay:1.4s}.rack-server:nth-child(4) .rack-bar::after{animation-delay:2.1s}
@keyframes rackBar{0%,15%{transform:scaleX(0)}65%,100%{transform:scaleX(1)}}
.rack-name{font-size:.6rem;color:rgba(240,244,248,.92);letter-spacing:.04em;}
.rack-status{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem;padding:.4rem .7rem;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.24);border-radius:var(--r-xs);font-size:.66rem;}
.rack-status > span:first-child{color:rgba(240,244,248,.92);}
.rack-ok{color:#10B981;font-weight:600;letter-spacing:.08em;}

.demo-radar{width:200px;height:160px;display:flex;align-items:center;justify-content:center;}
.radar-svg{width:100%;height:100%;}
.radar-ring{fill:none;stroke:rgba(0,123,255,.22);stroke-width:1;}
.radar-ring.r1{animation:radarRing 3s ease-out infinite}.radar-ring.r2{animation:radarRing 3s ease-out .8s infinite}.radar-ring.r3{animation:radarRing 3s ease-out 1.6s infinite}
@keyframes radarRing{0%{stroke-opacity:.5;transform-origin:center;transform:scale(.4)}100%{stroke-opacity:0;transform:scale(1.05)}}
.radar-svg{transform-origin:center;}
.radar-sweep{stroke:var(--c3);stroke-width:1.5;filter:drop-shadow(0 0 6px var(--c3));transform-origin:80px 80px;animation:radarSweep 3s linear infinite;}
@keyframes radarSweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.radar-core{fill:var(--ink);stroke:var(--c3);stroke-width:1.5;}
.radar-icon{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:var(--c3);}
.radar-blip{fill:var(--c4);filter:drop-shadow(0 0 4px var(--c4));}
.radar-blip.b1{animation:blipPulse 3s ease-in-out infinite}.radar-blip.b2{animation:blipPulse 3s ease-in-out .8s infinite}.radar-blip.b3{animation:blipPulse 3s ease-in-out 2s infinite}
@keyframes blipPulse{0%,40%,100%{opacity:0;r:2}50%,80%{opacity:1;r:4}}

.iot-svg{width:100%;height:100%;padding:.5rem;}
.iot-hub{fill:rgba(0,123,255,.15);stroke:var(--c3);stroke-width:2;}
.iot-hub-icon{font-family:var(--font-mono);font-size:11px;fill:var(--c3);}
.iot-devices circle{fill:rgba(77,163,255,.4);stroke:var(--c4);stroke-width:1;}
.iot-devices circle:nth-child(1){animation:iotBlink 2s ease-in-out 0s infinite}
.iot-devices circle:nth-child(2){animation:iotBlink 2s ease-in-out .25s infinite}
.iot-devices circle:nth-child(3){animation:iotBlink 2s ease-in-out .5s infinite}
.iot-devices circle:nth-child(4){animation:iotBlink 2s ease-in-out .75s infinite}
.iot-devices circle:nth-child(5){animation:iotBlink 2s ease-in-out 1s infinite}
.iot-devices circle:nth-child(6){animation:iotBlink 2s ease-in-out 1.25s infinite}
.iot-devices circle:nth-child(7){animation:iotBlink 2s ease-in-out 1.5s infinite}
.iot-devices circle:nth-child(8){animation:iotBlink 2s ease-in-out 1.75s infinite}
@keyframes iotBlink{0%,90%,100%{fill:rgba(77,163,255,.3)}45%{fill:#10B981;filter:drop-shadow(0 0 6px #10B981)}}
.iot-edges line{stroke:rgba(0,123,255,.32);}
.iot-pulse{fill:var(--c3);}

.demo-pyramid{width:88%;display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.qa-tier{position:relative;border:1px solid var(--border-2);background:rgba(0,123,255,.04);border-radius:var(--r-xs);height:18px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.6rem;color:rgba(240,244,248,.92);letter-spacing:.04em;overflow:hidden;}
.qa-tier-1{width:100%}.qa-tier-2{width:65%}.qa-tier-3{width:30%}
.qa-fill{position:absolute;inset:0;background:var(--grad-cyan-purple);transform:scaleX(0);transform-origin:left;}
.qa-tier-1 .qa-fill{animation:qaFill 4s ease-out infinite}.qa-tier-2 .qa-fill{animation:qaFill 4s ease-out .4s infinite}.qa-tier-3 .qa-fill{animation:qaFill 4s ease-out .8s infinite}
@keyframes qaFill{0%{transform:scaleX(0)}40%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.qa-l{position:relative;z-index:1;}
.qa-result{margin-top:.5rem;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.24);border-radius:var(--r-xs);font-family:var(--font-mono);font-size:.66rem;opacity:0;animation:qaShow 4s ease-out infinite;}
@keyframes qaShow{0%,40%{opacity:0;transform:translateY(4px)}50%,90%{opacity:1;transform:translateY(0)}}
.qa-check{color:#10B981;font-weight:600;}
.qa-text{color:rgba(240,244,248,.92);}

.atom{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center;}
.atom-nucleus{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--c5),var(--c3));box-shadow:0 0 18px var(--c3),0 0 36px var(--c4);position:absolute;z-index:2;}
.atom-orbit{position:absolute;inset:0;border:1.5px solid rgba(0,123,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:flex-start;}
.atom-orbit.o1{transform:rotateZ(0);animation:atomSpin1 4s linear infinite;}
.atom-orbit.o2{transform:rotateZ(60deg);animation:atomSpin2 5s linear infinite reverse;}
.atom-orbit.o3{transform:rotateZ(-60deg);animation:atomSpin3 6s linear infinite;}
@keyframes atomSpin1{from{transform:rotateZ(0deg) rotate(0)}to{transform:rotateZ(0deg) rotate(360deg)}}
@keyframes atomSpin2{from{transform:rotateZ(60deg) rotate(0)}to{transform:rotateZ(60deg) rotate(360deg)}}
@keyframes atomSpin3{from{transform:rotateZ(-60deg) rotate(0)}to{transform:rotateZ(-60deg) rotate(360deg)}}
.atom-electron{width:8px;height:8px;border-radius:50%;background:var(--c3);box-shadow:0 0 10px var(--c3);margin-left:-4px;}
.atom-orbit.o2 .atom-electron{background:var(--c4);box-shadow:0 0 10px var(--c4);}
.atom-orbit.o3 .atom-electron{background:var(--c7);box-shadow:0 0 10px var(--c7);}

.sm-card[data-tilt]{will-change:transform;transform-style:preserve-3d;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;}
.sm-card[data-tilt] > *{transform:translateZ(0);}
.sm-card[data-tilt]:hover .sm-demo{transform:translateZ(20px);transition:transform .35s;}
.sm-card[data-tilt]:hover .sm-info{transform:translateZ(10px);transition:transform .35s;}

/* â•â•â• CONTACT FORM â•â•â• */
.ch-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start;margin-bottom:3rem;}
.ch-expect{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.4rem 1.6rem;margin:1.6rem 0;}
.ch-expect-label{font-family:var(--font-mono);font-size:.7rem;color:var(--c3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem;}
.ch-expect ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;}
.ch-expect li{font-size:.88rem;color:var(--text-2);padding-left:1.2rem;position:relative;font-weight:300;}
.ch-expect li::before { content: "\203A";position:absolute;left:0;color:var(--c3);}
.ch-card{background:linear-gradient(160deg,var(--surface-2),var(--surface));color:var(--text);border-radius:var(--r-md);padding:1.8rem;position:relative;overflow:hidden;border:1px solid var(--border-2);box-shadow:var(--shadow-lg);}
.ch-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 90% 0%,rgba(0,123,255,.18),transparent 60%);}
.ch-status-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-family:var(--font-mono);font-size:.7rem;color:#10B981;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1;}
.ch-status-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.20);animation:pulseDot 2s infinite;}
.ch-card h3{color:var(--text);font-size:1.35rem;font-weight:500;margin-bottom:.6rem;letter-spacing:-.02em;position:relative;}
.ch-card p{font-size:.88rem;color:var(--text-2);line-height:1.65;margin-bottom:1.4rem;font-weight:300;position:relative;}
.ch-quick-actions{display:flex;flex-direction:column;gap:.6rem;position:relative;}
.ch-quick-btn{display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7rem .9rem;color:var(--text);font-size:.82rem;transition:all .2s;}
.ch-quick-btn:hover{border-color:var(--c3);background:rgba(0,123,255,.06);transform:translateX(2px);}
.ch-quick-icon{width:28px;height:28px;border-radius:var(--r-xs);background:rgba(0,123,255,.15);color:var(--c3);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ch-quick-icon svg{width:14px;height:14px;}
.ch-quick-l{flex:1;font-family:var(--font-mono);}
.ch-quick-arr{color:var(--c3);}

.contact-form-section{padding:8rem 5vw;}
.cfs-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:start;}
.cfs-promise{display:flex;gap:1rem;align-items:flex-start;margin-top:1.2rem;}
.cfs-promise-icon{width:36px;height:36px;border-radius:var(--r-xs);flex-shrink:0;background:rgba(0,123,255,.12);color:var(--c3);display:flex;align-items:center;justify-content:center;border:1px solid var(--border-2);}
.cfs-promise-icon svg{width:18px;height:18px;}
.cfs-promise-title{font-weight:500;font-size:.95rem;color:var(--text);margin-bottom:.2rem;letter-spacing:-.01em;}
.cfs-promise-sub{font-size:.85rem;color:var(--text-2);line-height:1.6;font-weight:300;}

.contact-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:2.2rem;box-shadow:var(--shadow-lg);}
.contact-form-wrap h3{font-size:1.4rem;font-weight:500;margin-bottom:.5rem;color:var(--text);letter-spacing:-.02em;}
.contact-form-wrap > p{font-size:.88rem;color:var(--text-2);margin-bottom:1.6rem;font-weight:300;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.form-group label{font-family:var(--font-mono);font-size:.7rem;color:var(--c3);letter-spacing:.06em;text-transform:uppercase;}
.form-group input,.form-group select,.form-group textarea{padding:.85rem .95rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:.92rem;color:var(--text);transition:border-color .2s,background .2s;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--c3);background:var(--surface);box-shadow:0 0 0 3px rgba(0,123,255,.14);}
.form-group textarea{min-height:120px;resize:vertical;}
.form-submit{background:var(--grad-cyan-purple);color:#FFFFFF;width:100%;padding:1rem 1.5rem;justify-content:center;font-weight:600;border:1px solid transparent;margin-top:.5rem;}
.form-submit:hover{box-shadow:0 12px 32px var(--glow);transform:translateY(-2px);}
.form-success{display:none;text-align:center;padding:3rem 1rem;}
.form-success.visible{display:block;}
.tick{width:60px;height:60px;border-radius:50%;background:rgba(16,185,129,.14);color:#10B981;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1rem;}
.form-success h4{font-size:1.2rem;font-weight:500;margin-bottom:.4rem;color:var(--text);}
.form-success p{color:var(--text-2);}

.contact-map{padding:0 5vw 8rem;}
.cms-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:2rem;flex-wrap:wrap;gap:1.5rem;}
.cms-text{flex:1;}
.map-embed{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);height:420px;box-shadow:var(--shadow-md);}
.map-embed iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6);}

/* â•â•â• BLOG PAGE â•â•â• */
.bh-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-bottom:3rem;}
.bh-stats{margin-top:1.4rem;}
.bh-featured{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;position:relative;transition:all .3s;}
.bh-featured:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg),0 0 40px var(--glow-soft);border-color:var(--border-2);}
.bh-featured{max-width:480px;margin-left:auto;}
.bh-featured-img{
  position:relative;
  aspect-ratio:16/10;        /* shorter slot — keeps the featured card compact */
  overflow:hidden;
  background:#070b16;
}
.bh-featured-img img{
  width:100%;
  height:100%;
  object-fit:cover;          /* fill the card edge-to-edge, no letterbox bars */
  object-position:center;
  transition:transform .5s;
  filter:none;
}
.bh-featured:hover .bh-featured-img img{transform:scale(1.03);}
.bh-featured-body{padding:1.2rem 1.4rem 1.4rem !important;}
.bh-featured-body h3{font-size:1.15rem !important;line-height:1.3 !important;margin-bottom:.5rem !important;}
.bh-featured-body p{font-size:.85rem !important;line-height:1.55 !important;margin-bottom:.7rem !important;}
.bh-featured-flag{position:absolute;top:1rem;left:1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;background:var(--grad-cyan-purple);color:#FFFFFF;padding:.32rem .65rem;border-radius:var(--r-xs);font-weight:600;z-index:2;}
.bh-featured-body{padding:1.6rem 1.8rem 1.8rem;}
.bh-featured-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;}
.bh-featured-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c3);}
.bh-featured-date{font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);}
.bh-featured-body h3{font-size:1.35rem;font-weight:500;margin-bottom:.6rem;line-height:1.3;letter-spacing:-.02em;color:var(--text);}
.bh-featured-body p{font-size:.92rem;color:var(--text-2);line-height:1.7;margin-bottom:1rem;font-weight:300;}
.bh-featured-cta{font-family:var(--font-mono);font-size:.78rem;color:var(--c3);font-weight:500;}

.blog-filter-wrap{margin:2rem 0;}
.blog-filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem;}
.blog-filter-label{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;}
.bf-dot{width:7px;height:7px;border-radius:50%;background:var(--c3);box-shadow:0 0 8px var(--c3);}
.blog-filter-count{font-family:var(--font-mono);font-size:.78rem;color:var(--text-2);}
.blog-filter-bar{display:flex;flex-wrap:wrap;gap:.4rem;}
.blog-filter{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-size:.82rem;font-weight:400;background:var(--surface);border:1px solid var(--border);color:var(--text-2);padding:.5rem .95rem;border-radius:100px;cursor:none;transition:all .2s;}
.blog-filter:hover{border-color:var(--c3);color:var(--c3);}
.blog-filter.active{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:transparent;font-weight:500;}
.blog-filter span{font-family:var(--font-mono);font-size:.7rem;opacity:.7;}
.blog-grid-3{grid-template-columns:repeat(3,1fr);}
.blog-empty{text-align:center;padding:5rem 1rem;}
.blog-empty-icon{font-size:3rem;color:var(--muted);margin-bottom:1rem;}
.blog-empty h3{margin-bottom:.5rem;color:var(--text);}

/* git log ticker */
.git-log{padding:1rem 5vw 3rem;}
.git-log-bar{background:var(--ink);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;}
.git-log-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-plasma);opacity:.85;}
.gl-head{display:flex;align-items:center;gap:1.2rem;padding:.75rem 1.2rem;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;}
.gl-tag{color:var(--c3);}
.gl-branch{color:var(--text-2);margin-left:auto;}
.gl-branch span{color:var(--c4);background:rgba(77,163,255,.12);padding:.15rem .5rem;border-radius:var(--r-xs);margin-left:.4rem;}
.gl-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;color:#10B981;letter-spacing:.08em;text-transform:uppercase;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.22);padding:.2rem .55rem;border-radius:var(--r-xs);}
.gl-stream{position:relative;overflow:hidden;padding:.6rem 0;mask-image:linear-gradient(90deg,transparent 0,black 5%,black 95%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,black 5%,black 95%,transparent 100%);}
.gl-track{display:flex;gap:2rem;white-space:nowrap;animation:glScroll 50s linear infinite;font-family:var(--font-mono);font-size:.78rem;width:max-content;}
.git-log-bar:hover .gl-track{animation-play-state:paused;}
@keyframes glScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gl-commit{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .8rem;border-radius:var(--r-xs);background:rgba(255,255,255,.03);border:1px solid var(--border);}
.gl-commit:hover{background:rgba(0,123,255,.08);border-color:var(--border-2);}
.gl-hash{color:var(--c3);font-weight:500;}
.gl-author{color:#10B981;}
.gl-msg{color:var(--text-2);}
.gl-time{color:var(--muted);font-size:.7rem;margin-left:.4rem;}

/* mosaic blog tile */
.blog-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:2rem 0 4rem;}
.blog-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;position:relative;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s,border-color .35s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.blog-tile a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;}
.blog-tile::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-plasma);transform:scaleX(0);transform-origin:center;transition:transform .35s;}
.blog-tile:hover{transform:translateY(-6px);border-color:var(--c3);box-shadow:var(--shadow-lg),0 0 60px var(--glow-soft);}
.blog-tile:hover::after{transform:scaleX(1);}
.bt-img{
  position:relative;
  aspect-ratio:5/4;          /* closer to the cover graphics' natural ~1.2 ratio */
  overflow:hidden;
  background:linear-gradient(135deg,#0a0f1c 0%,#070b16 100%);
}
.bt-img img{
  width:100%;
  height:100%;
  object-fit:contain;        /* show the entire designed cover, no auto-crop */
  object-position:center;
  transition:transform .55s;
  filter:none;
}
.blog-tile:hover .bt-img img{transform:scale(1.03);}
.bt-num{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.18em;color:var(--c3);background:rgba(10,14,26,.85);border:1px solid var(--border-2);padding:.32rem .65rem;border-radius:var(--r-xs);backdrop-filter:blur(8px);}
.bt-body{padding:1.5rem 1.6rem 1.6rem;flex:1;display:flex;flex-direction:column;gap:.7rem;}
.bt-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);flex-wrap:wrap;gap:.4rem;}
.bt-tag{color:var(--c3);font-weight:500;}
.bt-date{color:var(--muted);}
.bt-body h3{font-size:1.15rem;font-weight:500;color:var(--text);letter-spacing:-.018em;line-height:1.3;}
.bt-body p{font-size:.9rem;line-height:1.6;color:var(--text-2);font-weight:300;flex:1;}
.bt-read{font-family:var(--font-mono);font-size:.76rem;font-weight:500;color:var(--c3);letter-spacing:.02em;margin-top:auto;padding-top:.5rem;display:inline-flex;gap:.3rem;transition:gap .25s,color .25s;}
.blog-tile:hover .bt-read{color:var(--c4);gap:.55rem;}

/* â•â•â• BLOG POST â•â•â• */
.reading-progress{position:fixed;top:0;left:0;right:0;z-index:550;height:4px;background:transparent;pointer-events:none;}
.reading-progress .rp-track{position:absolute;inset:0;background:rgba(255,255,255,.04);}
.reading-progress .rp-fill{position:absolute;inset:0;background:var(--grad-plasma);background-size:200% 100%;transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px var(--glow);animation:gradFlow 6s linear infinite;transition:transform .15s linear;}
.reading-progress .rp-meta{position:fixed;top:.7rem;right:1rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.66rem;background:rgba(10,14,26,.85);backdrop-filter:blur(8px);border:1px solid var(--border-2);padding:.25rem .55rem;border-radius:100px;color:var(--text-2);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .25s;}
.reading-progress.active .rp-meta{opacity:1;}
.reading-progress .rp-label{color:var(--c3);}
.reading-progress .rp-percent{color:var(--text);font-weight:500;}

.post-header{padding:9rem 5vw 3rem;background:var(--bg-2);border-bottom:1px solid var(--border);}
.post-header-inner{max-width:820px;margin:0 auto;}
.post-breadcrumb{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text-2);margin-bottom:1.5rem;}
.post-breadcrumb a{color:var(--text-2);transition:color .2s;}
.post-breadcrumb a:hover{color:var(--c3);}
.post-id-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.3rem;}
.post-id{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;color:#FFFFFF;background:var(--grad-cyan-purple);padding:.32rem .7rem;border-radius:var(--r-xs);}
.post-tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,123,255,.08);color:var(--c3);padding:.32rem .7rem;border-radius:100px;border:1px solid var(--border-2);display:inline-block;margin-bottom:0;}
.post-title{font-family:var(--font-sans);font-size:clamp(2rem,4.6vw,3.6rem);font-weight:400;letter-spacing:-.04em;line-height:1.05;margin-bottom:1rem;color:var(--text);}
.post-excerpt{font-size:1.05rem;color:var(--text-2);line-height:1.75;margin-bottom:1.5rem;font-weight:300;}
.post-meta{display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--font-mono);font-size:.78rem;color:var(--text-2);}
.post-meta-item{display:inline-flex;align-items:center;gap:.4rem;}
.post-meta-item svg{width:14px;height:14px;}

.post-hero{margin:2.5rem auto 0;max-width:640px;}
.post-hero-frame{background:var(--ink);border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-xl),0 0 0 6px rgba(255,255,255,.04),0 0 0 7px var(--border);position:relative;}
.post-hero-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-plasma);opacity:.7;z-index:3;}
.post-hero-meta{display:flex;align-items:center;gap:.85rem;padding:.65rem 1rem;background:rgba(0,0,0,.35);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);position:relative;z-index:2;}
.phm-dots{display:flex;gap:.4rem;}
.phm-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);}
.phm-dots span:first-child{background:#FF5F57;}.phm-dots span:nth-child(2){background:#FEBC2E;}.phm-dots span:nth-child(3){background:#28C840;}
.phm-file{flex:1;text-align:center;color:var(--c3);letter-spacing:.04em;}
.phm-status{font-size:.6rem;color:#10B981;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .5rem;border-radius:var(--r-xs);background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.22);}
.post-hero-frame img{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:auto;         /* use the image's native ratio — no forced crop or stretch */
  height:auto;
  object-fit:contain;
  object-position:center;
  background:linear-gradient(135deg,#0a0f1c 0%,#070b16 100%);
  filter:none;
  image-rendering:auto;
  transition:transform .8s ease;
}
.post-hero-frame:hover img{transform:scale(1.02);}

.post-article{padding:4rem 5vw 5rem;}
.post-article .container{max-width:760px;}
.post-body{font-size:1.04rem;line-height:1.85;color:var(--text-2);font-weight:400;}
.post-body p{margin-bottom:1.4rem;color:var(--text-2);}
.post-body h2{font-family:var(--font-sans);font-size:1.7rem;font-weight:500;margin:2.6rem 0 1.1rem;letter-spacing:-.025em;color:var(--text);scroll-margin-top:5rem;position:relative;padding-left:1.2rem;}
.post-body h2::before{content:"";position:absolute;left:0;top:.45em;width:4px;height:1em;background:var(--grad-cyan-purple);border-radius:2px;}
.post-body h3{font-family:var(--font-sans);font-size:1.25rem;font-weight:500;margin:1.8rem 0 .8rem;color:var(--text);scroll-margin-top:5rem;}
.post-body blockquote{border-left:3px solid var(--c3);background:linear-gradient(90deg,rgba(0,123,255,.10),rgba(77,163,255,.04));padding:1.4rem 1.8rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:2rem 0;font-family:var(--font-serif);font-style:italic;color:var(--text);font-size:1.18rem;line-height:1.55;position:relative;}
.post-body blockquote::before{content:"";position:absolute;left:.65rem;top:-.2em;font-family:var(--font-serif);font-size:3rem;color:var(--c3);opacity:.5;line-height:1;}
.post-body strong{color:var(--text);}
.post-body .post-lead{font-size:1.18rem;color:var(--text);font-weight:400;line-height:1.65;padding-bottom:1rem;border-bottom:1px dashed var(--border);margin-bottom:1.6rem;}
.post-foot{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);flex-wrap:wrap;gap:1.5rem;}
.post-foot-tags,.post-share{display:flex;align-items:center;gap:.7rem;}
.post-foot-label{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);letter-spacing:.08em;text-transform:uppercase;}
.post-foot-chip{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .7rem;border-radius:100px;background:rgba(0,123,255,.08);color:var(--c3);border:1px solid var(--border-2);}
.post-share-btn{width:34px;height:34px;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--border);font-family:var(--font-mono);font-size:.74rem;font-weight:500;color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
.post-share-btn:hover{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:var(--c3);}
.post-related{padding:5rem 5vw;background:var(--bg-2);}
.post-related-head{text-align:center;margin-bottom:2.5rem;}
.post-related-head .eyebrow{justify-content:center;}

/* â•â•â• PRIVACY / TERMS HEADER â•â•â• */
.page-header{min-height:36vh;display:flex;align-items:flex-end;padding:9rem 5vw 3rem;position:relative;overflow:hidden;background:var(--bg-2);color:var(--text);border-bottom:1px solid var(--border);}
.page-header-bg{position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 80% 20%,rgba(0,123,255,.18),transparent 60%),radial-gradient(ellipse 50% 40% at 10% 80%,rgba(77,163,255,.14),transparent 60%);}
.page-header-inner{max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:2;}
.page-header .eyebrow{color:var(--c3);}
.page-header h1{font-family:var(--font-sans);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:400;letter-spacing:-.04em;color:var(--text);}
.breadcrumb{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:var(--font-mono);font-size:.78rem;color:var(--text-2);}
.breadcrumb a{color:var(--text-2);transition:color .2s;}
.breadcrumb a:hover{color:var(--c3);}
.breadcrumb span{opacity:.5;}
.blog-reader-content h2{font-family:var(--font-sans);font-size:1.55rem;font-weight:500;margin:2.4rem 0 1rem;color:var(--text);letter-spacing:-.02em;}
.blog-reader-content p{margin-bottom:1.2rem;line-height:1.8;color:var(--text-2);font-weight:300;}
.blog-reader-content a{color:var(--c3);text-decoration:underline;text-decoration-color:rgba(0,123,255,.4);text-underline-offset:3px;}

/* â•â•â• REVEAL â•â•â• */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);animation:revealFallback 0s 1.6s forwards;}
.reveal.up,.reveal.in{opacity:1;transform:translateY(0);}
@keyframes revealFallback{to{opacity:1;transform:translateY(0);}}
.fade-up{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);}
.slide-left{opacity:0;transform:translate3d(-32px,0,0);transition:opacity .7s,transform .7s;}
.slide-right{opacity:0;transform:translate3d(32px,0,0);transition:opacity .7s,transform .7s;}
.fade-in{opacity:0;transition:opacity .7s ease;}
.fade-up.up,.fade-up.in,.slide-left.up,.slide-left.in,.slide-right.up,.slide-right.in,.fade-in.up,.fade-in.in{opacity:1;transform:translate3d(0,0,0);}
.rd1{transition-delay:.08s;}.rd2{transition-delay:.16s;}.rd3{transition-delay:.24s;}
.modal-overlay{display:none;}
.modal-overlay.open{display:flex;}

/* GPU containment */
.svc-card,.why-card,.blog-card,.stat-cell,.service-full-card,.problem-card,.eng-card,.cs-card,.mosaic-card,.bento,.tt-card,.home-svc-card,.sh-division,.lp-card,.blog-tile,.sm-card{will-change:transform;transform:translateZ(0);}

/* button ripple */
.btn-fire,.btn-outline,.form-submit,.cta-nav,.blog-filter,.eng-cta,.svc-section-link{position:relative;overflow:hidden;isolation:isolate;}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.3;transform:scale(0);animation:rippleAnim .7s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none;z-index:0;}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0;}}

/* hero typing */
.grad-text.typing,#hero .grad-text:not(.typing){position:relative;}
.grad-text.typing::after{content:"";display:inline-block;width:2px;height:.85em;background:var(--c3);margin-left:.06em;vertical-align:-.08em;animation:caret 1s steps(2) infinite;}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  body::after,.terminal-window,.bento,.grad-text,.problem-sev,.hero-orb,.manifesto-orb{animation:none!important;}
  .reveal,.fade-up,.slide-left,.slide-right,.fade-in,.hero-h1 .hw{opacity:1!important;transform:none!important;}
}

/* â•â•â• DEVELOPER MODE â•â•â• */
.dev-toggle{position:fixed;bottom:1.5rem;right:1.5rem;z-index:600;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:100px;background:var(--surface);border:1px solid var(--border-2);font-family:var(--font-mono);font-size:.7rem;font-weight:500;color:var(--text);cursor:none;box-shadow:var(--shadow-md);letter-spacing:.14em;text-transform:uppercase;transition:all .25s;}
.dev-toggle:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px var(--glow-soft);}
.dev-toggle-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);transition:all .25s;}
.dev-toggle.on{color:var(--c3);border-color:var(--c3);}
.dev-toggle.on .dev-toggle-dot{background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.16),0 0 8px #10B981;}
body.dev-mode{background-image:linear-gradient(to right,rgba(0,123,255,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,123,255,.06) 1px,transparent 1px),radial-gradient(circle at 1px 1px,rgba(77,163,255,.06) 1px,transparent 0);background-size:8px 8px,8px 8px,24px 24px;}
body.dev-mode section,body.dev-mode footer{outline:1px dashed rgba(0,123,255,.18);outline-offset:-1px;}
body.dev-mode .container{outline:1px dashed rgba(77,163,255,.22);outline-offset:-1px;}
body.dev-mode::before{content:"";position:fixed;top:1rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.7rem;color:#FFFFFF;background:var(--grad-cyan-purple);padding:.4rem .9rem;border-radius:100px;letter-spacing:.14em;z-index:9998;box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 1px var(--c3);}

/* â•â•â• FEATURED BUILD GRADIENT BORDER â•â•â• */
/* (already defined above with fb-card::after) */

/* â•â•â• RESPONSIVE â•â•â• */
@media (max-width:1024px){
  .hero-inner,.ah-grid,.sh-grid,.ch-grid,.cfs-grid,.bh-grid{grid-template-columns:1fr;gap:3rem;}
  .ah-badge{display:none;}
  .ah-right{min-height:auto;}
  .stats-grid,.why-strip,.ah-facts,.ch-methods{grid-template-columns:repeat(2,1fr);}
  .stat-cell:nth-child(2),.why-strip-item:nth-child(2),.ah-fact:nth-child(2),.ch-method:nth-child(2){border-right:none;}
  .stat-cell,.why-strip-item,.ah-fact,.ch-method{border-bottom:1px solid var(--border);}
  .stat-cell:nth-last-child(-n+2),.why-strip-item:nth-last-child(-n+2),.ah-fact:nth-last-child(-n+2),.ch-method:nth-last-child(-n+2){border-bottom:none;}
  .why-grid{grid-template-columns:1fr;}
  .services-full-grid,.problem-grid,.sm-grid,.mosaic{grid-template-columns:repeat(2,1fr);}
  .blog-grid,.blog-grid-3,.blog-mosaic{grid-template-columns:repeat(2,1fr)!important;}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem;}
  .proc-line{grid-template-columns:repeat(2,1fr);}
  .svc-section-head{grid-template-columns:1fr;}
  .mosaic{grid-auto-rows:220px;}
  .sys-grid{grid-template-columns:repeat(3,1fr);}
  .fb-grid{grid-template-columns:1fr;}
  .fb-text{border-right:none;border-bottom:1px dashed var(--border);}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .logo{padding:.2rem .4rem;}
  .logo img{height:68px;}
  .stats-grid,.why-strip,.ah-facts,.ch-methods,.ah-stats-inline,.sh-stats-inline,.bh-stats,.problem-grid,.sm-grid,.services-full-grid,.blog-grid,.blog-grid-3,.blog-mosaic,.mosaic{grid-template-columns:1fr!important;}
  .stat-cell,.why-strip-item,.ah-fact,.ch-method{border-right:none;border-bottom:1px solid var(--border);}
  .stat-cell:last-child,.why-strip-item:last-child,.ah-fact:last-child,.ch-method:last-child{border-bottom:none;}
  .footer-top{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .index-row{grid-template-columns:auto 1fr auto;gap:1rem;}
  .index-row .idx-desc{grid-column:1/-1;padding-top:.4rem;}
  .proc-line{grid-template-columns:1fr;}
  .proc-line::before{display:none;}
  .marquee-inner{font-size:1.3rem;gap:1.5rem;}
  .terminal-body{font-size:.66rem;min-height:200px;padding:1rem;}
  .hero-right{grid-template-columns:1fr;}
  #svcModalFeatures ul{grid-template-columns:1fr;}
  .cta-section{margin:3rem 5vw;padding:5rem 2rem;}
  .sys-grid{grid-template-columns:repeat(2,1fr);}
  .fb-metrics{grid-template-columns:1fr;}
  .fb-metric{border-right:none;}
  .hero-orb-1{width:340px;height:340px;}.hero-orb-2{width:280px;height:280px;}.hero-orb-3{width:200px;height:200px;}
  .manifesto{padding:5rem 5vw;}
  .manifesto-text{font-size:1.6rem;line-height:1.4;}
  .post-hero{margin-top:1.5rem;}
  .post-hero-frame img{aspect-ratio:auto;height:auto;}
  .post-body{font-size:.96rem;line-height:1.78;}
  .post-body h2{font-size:1.4rem;margin:2rem 0 .9rem;padding-left:1rem;}
  .post-body blockquote{padding:1rem 1.2rem;font-size:1.05rem;}
  .reading-progress .rp-meta{display:none;}
  .gl-track{font-size:.7rem;gap:1.2rem;}
  .gl-time{display:none;}
  .gl-status{font-size:.6rem;}
  .gl-stream{padding:.4rem 0;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   COSMIC BACKGROUND â€” floating orbs + geometric shapes + scroll parallax
   injected by initCosmicBackground() into every page
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.cosmic-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --sy:0px;
}
.cosmic-orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;}
.co-1{width:520px;height:520px;background:radial-gradient(circle,rgba(0,123,255,.45) 0%,transparent 65%);top:-160px;right:-120px;opacity:.7;animation:cosmicDrift1 30s ease-in-out infinite alternate;}
.co-2{width:460px;height:460px;background:radial-gradient(circle,rgba(77,163,255,.4) 0%,transparent 65%);top:30%;left:-180px;opacity:.6;animation:cosmicDrift2 36s ease-in-out infinite alternate;}
.co-3{width:380px;height:380px;background:radial-gradient(circle,rgba(153,194,255,.35) 0%,transparent 65%);top:60%;right:10%;opacity:.55;animation:cosmicDrift3 28s ease-in-out infinite alternate;}
.co-4{width:340px;height:340px;background:radial-gradient(circle,rgba(255,229,212,.30) 0%,transparent 65%);bottom:-120px;left:30%;opacity:.5;animation:cosmicDrift4 32s ease-in-out infinite alternate;}
.co-5{width:280px;height:280px;background:radial-gradient(circle,rgba(0,123,255,.32) 0%,transparent 65%);top:80%;left:55%;opacity:.45;animation:cosmicDrift5 26s ease-in-out infinite alternate;}
@keyframes cosmicDrift1{0%{transform:translate3d(0,calc(var(--sy) * -0.08),0)}50%{transform:translate3d(50px,calc(var(--sy) * -0.08 - 40px),0) scale(1.08)}100%{transform:translate3d(-30px,calc(var(--sy) * -0.08 + 30px),0) scale(.94)}}
@keyframes cosmicDrift2{0%{transform:translate3d(0,calc(var(--sy) * 0.05),0)}50%{transform:translate3d(40px,calc(var(--sy) * 0.05 - 30px),0) scale(1.06)}100%{transform:translate3d(-20px,calc(var(--sy) * 0.05 + 30px),0) scale(.95)}}
@keyframes cosmicDrift3{0%{transform:translate3d(0,calc(var(--sy) * -0.12),0)}50%{transform:translate3d(-30px,calc(var(--sy) * -0.12 + 30px),0) scale(1.08)}100%{transform:translate3d(20px,calc(var(--sy) * -0.12 - 30px),0) scale(.92)}}
@keyframes cosmicDrift4{0%{transform:translate3d(0,calc(var(--sy) * 0.10),0)}50%{transform:translate3d(35px,calc(var(--sy) * 0.10 - 25px),0) scale(1.05)}100%{transform:translate3d(-25px,calc(var(--sy) * 0.10 + 25px),0) scale(.96)}}
@keyframes cosmicDrift5{0%{transform:translate3d(0,calc(var(--sy) * -0.18),0)}50%{transform:translate3d(-25px,calc(var(--sy) * -0.18 - 25px),0) scale(1.07)}100%{transform:translate3d(20px,calc(var(--sy) * -0.18 + 30px),0) scale(.94)}}

.cosmic-shape{position:absolute;pointer-events:none;opacity:.4;will-change:transform;}
.cs-1{top:14%;left:8%;width:60px;height:60px;border:1px solid rgba(0,123,255,.5);animation:shapeSpin1 14s linear infinite;}
.cs-2{top:55%;right:6%;width:80px;height:80px;border:1px solid rgba(77,163,255,.45);border-radius:50%;animation:shapePulse 4s ease-in-out infinite;}
.cs-3{top:35%;left:12%;width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:30px solid rgba(255,229,212,.5);animation:shapeFloat 6s ease-in-out infinite alternate;opacity:.35;}
.cs-4{top:78%;right:18%;width:50px;height:50px;border:1px dashed rgba(153,194,255,.5);animation:shapeSpin2 18s linear infinite;opacity:.4;}
.cs-5{top:8%;right:30%;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:24px solid rgba(0,123,255,.4);animation:shapeFloat 5s ease-in-out infinite alternate-reverse;opacity:.5;}
.cs-6{bottom:20%;left:14%;width:24px;height:24px;background:radial-gradient(circle,rgba(255,229,212,.6),transparent 70%);border-radius:50%;animation:shapePulse 3.5s ease-in-out infinite;}
@keyframes shapeSpin1{from{transform:translate3d(0,calc(var(--sy) * -0.25),0) rotate(45deg)}to{transform:translate3d(0,calc(var(--sy) * -0.25),0) rotate(405deg)}}
@keyframes shapeSpin2{from{transform:translate3d(0,calc(var(--sy) * 0.30),0) rotate(0)}to{transform:translate3d(0,calc(var(--sy) * 0.30),0) rotate(-360deg)}}
@keyframes shapePulse{0%,100%{opacity:.3;transform:translate3d(0,calc(var(--sy) * -0.15),0) scale(1)}50%{opacity:.6;transform:translate3d(0,calc(var(--sy) * -0.15),0) scale(1.18)}}
@keyframes shapeFloat{0%{transform:translate3d(0,calc(var(--sy) * 0.20 - 8px),0) rotate(-5deg)}100%{transform:translate3d(0,calc(var(--sy) * 0.20 + 8px),0) rotate(5deg)}}

.cosmic-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,123,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,163,255,.030) 1px,transparent 1px);
  background-size:80px 80px;
  background-position:0 calc(var(--sy) * 0.15);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,black 30%,transparent 80%);
  pointer-events:none;
}

@media (max-width:760px){
  .co-3,.co-4,.co-5{display:none;}
  .cosmic-shape:nth-child(n+5){display:none;}
  .cosmic-orb{filter:blur(60px);opacity:.4;}
}
@media (prefers-reduced-motion:reduce){
  .cosmic-orb,.cosmic-shape,.cosmic-grid{animation:none!important;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   TECH STACK SPIRAL â€” 3D helix in the background, scroll-driven rotation
   injected on the index page only by initTechSpiral()
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.tech-spiral{
  position:fixed;inset:0;
  z-index:0;pointer-events:none;
  overflow:hidden;
  perspective:1400px;
  perspective-origin:50% 50%;
}
.tech-spiral::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%);
  pointer-events:none;
}
.ts-spine{
  position:absolute;top:50%;left:50%;
  width:2px;height:200vh;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg,transparent 0%,rgba(0,123,255,.10) 25%,rgba(77,163,255,.18) 50%,rgba(0,123,255,.10) 75%,transparent 100%);
  filter:blur(2px);
  pointer-events:none;
}
.ts-helix{
  position:absolute;top:50%;left:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateY(var(--rot,0deg));
  will-change:transform;
}
.ts-item{
  position:absolute;top:0;left:0;
  --total:30;
  --spacing:90px;
  --radius:280px;
  --angle:calc(var(--i) * 36deg);
  --y:calc((var(--i) - var(--total) / 2) * var(--spacing));
  transform:
    translate(-50%,-50%)
    translateY(var(--y))
    rotateY(var(--angle))
    translateZ(var(--radius));
  font-family:var(--font-mono);
  font-size:.92rem;font-weight:500;letter-spacing:.04em;
  padding:.55rem 1.1rem;
  background:rgba(10,10,10,.55);
  border:1px solid var(--border-2);
  border-radius:100px;
  color:var(--c3);
  white-space:nowrap;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  text-shadow:0 0 18px rgba(0,123,255,.55);
  box-shadow:0 0 24px rgba(0,123,255,.18),0 8px 20px rgba(0,0,0,.4);
}
.ts-item:nth-child(3n){color:var(--c4);border-color:rgba(77,163,255,.32);text-shadow:0 0 18px rgba(77,163,255,.55);box-shadow:0 0 24px rgba(77,163,255,.18),0 8px 20px rgba(0,0,0,.4);}
.ts-item:nth-child(5n){color:var(--c5);border-color:rgba(153,194,255,.32);text-shadow:0 0 18px rgba(153,194,255,.55);}
.ts-item:nth-child(7n){background:rgba(0,123,255,.10);}

@media (max-width:1024px){
  .ts-item{font-size:.78rem;padding:.4rem .85rem;--radius:180px;--spacing:70px;}
}
@media (max-width:760px){
  .tech-spiral{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ts-helix{transform:translate(-50%,-50%) !important;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   AI PROJECT ANALYZER â€” interactive hero feature
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.ai-analyzer{padding:6rem 5vw;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);position:relative;overflow:hidden;}
.ai-analyzer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 50% 60% at 50% 0%,var(--glow-purple),transparent 60%),radial-gradient(ellipse 40% 50% at 90% 100%,var(--glow-soft),transparent 60%);}
.ai-analyzer > .container{position:relative;}
.aa-head{text-align:center;max-width:780px;margin:0 auto 3rem;}
.aa-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:100px;
  background:rgba(77,163,255,.10);
  border:1px solid rgba(77,163,255,.32);
  color:var(--c4);margin-bottom:1.4rem;
}
.aa-lead{margin-top:1rem;font-size:1rem;color:var(--text-2);font-weight:300;line-height:1.7;}
.aa-app{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  border-radius:var(--r-md);
  position:relative;isolation:isolate;
}
.aa-app::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(120deg,var(--c3),transparent 30%,transparent 70%,var(--c4));background-size:300% 300%;z-index:-1;filter:blur(2px);opacity:.7;animation:fbGradientFlow 10s linear infinite;}

.aa-input-panel,.aa-output-panel{
  background:var(--ink);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height:380px;
}
.aa-tab{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);
}
.aa-tab .ide-dots{display:flex;gap:.3rem;}
.aa-tab .ide-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);}
.aa-tab .ide-dots span:first-child{background:#FF5F57;}
.aa-tab .ide-dots span:nth-child(2){background:#FEBC2E;}
.aa-tab .ide-dots span:nth-child(3){background:#28C840;}
.aa-tab-l{color:var(--c3);flex:1;}
.aa-tab-len{color:var(--muted);font-size:.66rem;}
.aa-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;color:#10B981;letter-spacing:.08em;text-transform:uppercase;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.22);padding:.18rem .5rem;border-radius:var(--r-xs);}
.aa-status .sys-dot{width:6px;height:6px;}
.aa-status.busy{color:var(--c3);background:rgba(0,123,255,.10);border-color:rgba(0,123,255,.32);}
.aa-status.busy .sys-dot{background:var(--c3);box-shadow:0 0 0 3px rgba(0,123,255,.18);}
.aa-status.done{color:var(--c5);}

.aa-input{
  flex:1;
  background:transparent;border:none;outline:none;resize:none;
  padding:1.4rem 1.4rem 0;
  font-family:var(--font-mono);font-size:.9rem;
  line-height:1.7;color:var(--text);
  caret-color:var(--c3);
}
.aa-input::placeholder{color:var(--muted);}
.aa-controls{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem 1.4rem;border-top:1px dashed var(--border);}
.aa-hint{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);}
.aa-hint kbd{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  padding:.1rem .4rem;border-radius:var(--r-xs);
  font-size:.7rem;color:var(--text);
}
.aa-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--grad-cyan-purple);color:#FFFFFF;
  border:1px solid transparent;
  padding:.7rem 1.3rem;border-radius:100px;
  font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.02em;
  cursor:none;transition:all .25s;
  box-shadow:0 0 20px var(--glow-soft);
  position:relative;overflow:hidden;
}
.aa-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--glow);}
.aa-btn:active{transform:scale(.98);}
.aa-btn-arrow{transition:transform .2s;}
.aa-btn:hover .aa-btn-arrow{transform:translateX(4px);}
.aa-btn[disabled]{opacity:.6;cursor:not-allowed;}

.aa-output{flex:1;padding:1.2rem 1.4rem 1.4rem;font-family:var(--font-mono);font-size:.85rem;line-height:1.7;color:var(--text);overflow:auto;}
.aa-placeholder{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  color:var(--muted);text-align:center;font-size:.85rem;
  font-family:var(--font-body);
}
.aa-ph-icon{
  font-family:var(--font-mono);font-size:1.6rem;
  color:var(--c3);opacity:.5;
  background:rgba(0,123,255,.06);
  border:1px solid var(--border-2);
  width:60px;height:60px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
}
.aa-result{display:flex;flex-direction:column;gap:1.1rem;}
.aa-section{
  opacity:0;transform:translateY(8px);
  animation:aaSlideIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.aa-section:nth-child(1){animation-delay:.05s}
.aa-section:nth-child(2){animation-delay:.20s}
.aa-section:nth-child(3){animation-delay:.35s}
.aa-section:nth-child(4){animation-delay:.50s}
.aa-section:nth-child(5){animation-delay:.65s}
@keyframes aaSlideIn{to{opacity:1;transform:translateY(0)}}
.aa-label{
  display:block;
  font-size:.66rem;color:var(--c3);letter-spacing:.06em;text-transform:lowercase;
  margin-bottom:.5rem;
}
.aa-stack{display:flex;flex-wrap:wrap;gap:.4rem;}
.aa-pill{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  padding:.32rem .7rem;border-radius:100px;
  background:rgba(0,123,255,.08);
  color:var(--c3);
  border:1px solid var(--border-2);
}
.aa-value{font-family:var(--font-mono);font-size:1.1rem;font-weight:500;color:var(--text);}
.aa-value-grad{
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:600;
}
.aa-risks{list-style:none;display:flex;flex-direction:column;gap:.4rem;}
.aa-risks li{
  font-family:var(--font-mono);font-size:.8rem;color:var(--text-2);
  padding-left:1.4rem;position:relative;
}
.aa-risks li::before { content: "";position:absolute;left:.4rem;color:var(--c4);font-weight:700;}
.aa-cta{
  margin-top:.5rem;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.1rem;
  background:linear-gradient(120deg,rgba(0,123,255,.12),rgba(77,163,255,.08));
  border:1px solid var(--border-2);border-radius:var(--r-sm);
  color:var(--c3);font-family:var(--font-mono);font-size:.8rem;
  text-decoration:none;transition:all .25s;
}
.aa-cta:hover{background:linear-gradient(120deg,rgba(0,123,255,.2),rgba(77,163,255,.16));border-color:var(--c3);}
.aa-cta-arrow{transition:transform .25s;}
.aa-cta:hover .aa-cta-arrow{transform:translateX(4px);}

@media (max-width:1024px){
  .aa-app{grid-template-columns:1fr;}
  .aa-input-panel,.aa-output-panel{min-height:300px;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   LIVE CODE TRANSFORM
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.live-transform{padding:8rem 5vw;background:var(--bg);}
.lt-head{text-align:center;max-width:780px;margin:0 auto 3rem;}
.lt-head .eyebrow{justify-content:center;}
.lt-head .s-title::after{content:"";display:block;width:48px;height:2px;background:var(--grad-cyan-purple);margin:1.2rem auto 0;border-radius:2px;}
.lt-head p{margin-top:1rem;font-size:1rem;font-weight:300;color:var(--text-2);}

.lt-stage{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;
}
.lt-panel{
  background:var(--ink);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
}
.lt-tab{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;
  background:rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);
}
.lt-tab .ide-dots{display:flex;gap:.3rem;}
.lt-tab .ide-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);}
.lt-tab .ide-dots span:first-child{background:#FF5F57;}
.lt-tab .ide-dots span:nth-child(2){background:#FEBC2E;}
.lt-tab .ide-dots span:nth-child(3){background:#28C840;}
.lt-tab-l{flex:1;}
.lt-flag{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.18rem .55rem;border-radius:var(--r-xs);
}
.flag-issue{background:rgba(255,229,212,.12);color:#F472B6;border:1px solid rgba(255,229,212,.3);}
.flag-ok{background:rgba(16,185,129,.12);color:#10B981;border:1px solid rgba(16,185,129,.3);}

.lt-code{
  padding:1.2rem 1.4rem;
  font-family:var(--font-mono);font-size:.86rem;
  line-height:1.7;color:var(--text);
  overflow-x:auto;flex:1;
  white-space:pre;
}
.lt-before .lt-code{position:relative;}
.lt-before .lt-code::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,229,212,.06),transparent 70%);
}
.lt-after .lt-code{position:relative;}
.lt-after .lt-code::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(16,185,129,.06),transparent 70%);
}
.c-key{color:#4DA3FF;}
.c-fn{color:var(--c3);}
.c-prop{color:#FBBF24;}
.c-str{color:#99C2FF;}
.c-warn{color:#F472B6;text-decoration:underline wavy rgba(255,229,212,.6);text-underline-offset:3px;}
.c-type{color:#10B981;}

.lt-arrow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;min-width:120px;
}
.lt-arrow-line{
  width:2px;height:60%;
  background:var(--grad-cyan-purple);
  background-size:100% 200%;
  position:relative;
  animation:gradFlow 3s linear infinite;
  border-radius:2px;
  display:none;
}
.lt-arrow-tag{
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--c3);letter-spacing:.06em;
  background:rgba(0,123,255,.08);
  border:1px solid var(--border-2);
  padding:.4rem .7rem;border-radius:100px;
  white-space:nowrap;
  box-shadow:0 0 16px var(--glow-soft);
}
.lt-arrow-icon{
  font-size:1.6rem;color:var(--c3);
  margin-top:.6rem;
  filter:drop-shadow(0 0 8px var(--c3));
  animation:arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(4px);opacity:1}}

.lt-tabs{display:flex;justify-content:center;gap:.5rem;margin-top:2rem;flex-wrap:wrap;}
.lt-tab-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--surface);
  border:1px solid var(--border);
  padding:.55rem 1rem;border-radius:100px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--text-2);
  cursor:none;transition:all .25s;
}
.lt-tab-btn:hover{border-color:var(--border-2);color:var(--text);}
.lt-tab-btn.active{background:var(--grad-cyan-purple);color:#FFFFFF;border-color:transparent;box-shadow:0 0 24px var(--glow);}
.lt-num{font-weight:600;opacity:.7;}
.lt-tab-btn.active .lt-num{opacity:1;}
.lt-label{}

@media (max-width:1024px){
  .lt-stage{grid-template-columns:1fr;}
  .lt-arrow{flex-direction:row;min-width:0;padding:1rem 0;}
  .lt-arrow-icon{transform:rotate(90deg);margin-top:0;margin-left:.5rem;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   TECH STACK ORBIT â€” CSS @property orbital animation
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@property --orbit-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

.tech-orbit{
  padding:7rem 5vw;
  position:relative;overflow:hidden;
  background:var(--bg-2);
}
.orbit-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,123,255,.10) 0%,transparent 35%),
    radial-gradient(circle at 50% 50%,rgba(77,163,255,.06) 0%,transparent 55%);
  pointer-events:none;
}
.tech-orbit > .container{position:relative;z-index:2;}
.to-head{text-align:center;max-width:680px;margin:0 auto 4rem;}
.to-head .eyebrow{justify-content:center;}
.to-lead{margin-top:1rem;font-size:1rem;font-weight:300;color:var(--text-2);}

.orbit-stage{
  position:relative;
  width:100%;max-width:720px;
  height:720px;
  margin:0 auto;
}

/* concentric ring lines (visual guides) */
.orbit-line{
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  border:1px dashed rgba(0,123,255,.15);
  pointer-events:none;
}
.orbit-line-1{width:280px;height:280px;margin:-140px 0 0 -140px;}
.orbit-line-2{width:480px;height:480px;margin:-240px 0 0 -240px;border-color:rgba(77,163,255,.15);}
.orbit-line-3{width:680px;height:680px;margin:-340px 0 0 -340px;border-color:rgba(255,229,212,.12);}

/* core */
.orbit-core{
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,var(--surface-elev),var(--surface));
  border:1px solid var(--border-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  z-index:5;
  box-shadow:0 0 40px var(--glow),0 0 80px var(--glow-purple),inset 0 0 20px rgba(0,123,255,.1);
  animation:coreBreathe 4s ease-in-out infinite;
}
@keyframes coreBreathe{0%,100%{box-shadow:0 0 40px var(--glow),0 0 80px var(--glow-purple),inset 0 0 20px rgba(0,123,255,.1)}50%{box-shadow:0 0 60px var(--glow),0 0 120px var(--glow-purple),inset 0 0 30px rgba(0,123,255,.18)}}
.oc-tag{font-family:var(--font-mono);font-size:.66rem;color:var(--c3);letter-spacing:.1em;}
.oc-name{
  font-family:var(--font-sans);font-size:1.2rem;font-weight:600;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;
}
.oc-pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--c3);
  opacity:0;animation:corePulse 3s ease-out infinite;
}
@keyframes corePulse{0%{opacity:.6;transform:scale(.95)}100%{opacity:0;transform:scale(1.4)}}

/* orbit rings */
.orbit{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  pointer-events:none;
}
.ring-1{--r:140px;--d:24s;}
.ring-2{--r:240px;--d:36s;}
.ring-3{--r:340px;--d:50s;}

.orbit-item{
  position:absolute;
  top:0;left:0;
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  background:var(--ink);
  color:var(--text);
  padding:.5rem 1rem;border-radius:100px;
  border:1px solid var(--border-2);
  white-space:nowrap;
  pointer-events:auto;cursor:none;
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;
  /* the @property var animates this */
  --total-angle:calc(var(--start) + var(--orbit-angle));
  transform:
    translate(-50%,-50%)
    rotate(var(--total-angle))
    translateY(calc(-1 * var(--r)))
    rotate(calc(-1 * var(--total-angle)));
  animation:orbitMove var(--d) linear infinite;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.ring-2 .orbit-item{color:var(--c4);border-color:rgba(77,163,255,.4);}
.ring-3 .orbit-item{color:var(--c7);border-color:rgba(255,229,212,.34);}
.ring-2{animation:none;}
.orbit-item:hover{
  background:var(--grad-cyan-purple);color:#FFFFFF;
  border-color:transparent;
  z-index:6;
  transform:
    translate(-50%,-50%)
    rotate(var(--total-angle))
    translateY(calc(-1 * var(--r)))
    rotate(calc(-1 * var(--total-angle)))
    scale(1.18);
  box-shadow:0 0 24px var(--glow),0 8px 24px rgba(0,0,0,.5);
}
.ring-2 .orbit-item:hover{background:linear-gradient(120deg,var(--c4),var(--c7));}
.ring-3 .orbit-item:hover{background:linear-gradient(120deg,var(--c7),var(--c3));}

@keyframes orbitMove{
  from{--orbit-angle:0deg;}
  to{--orbit-angle:360deg;}
}
/* ring-2 reverses */
.ring-2 .orbit-item{animation-direction:reverse;}

.to-foot{
  display:flex;justify-content:center;align-items:center;gap:1rem;
  margin-top:2rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.78rem;
}
.to-foot-l{color:var(--muted);}
.to-foot-c{
  color:var(--c3);font-weight:600;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.to-foot-sep{width:1px;height:14px;background:var(--border-2);}

@media (max-width:760px){
  .orbit-stage{height:540px;max-width:540px;}
  .ring-1{--r:100px;}
  .ring-2{--r:180px;}
  .ring-3{--r:250px;}
  .orbit-line-1{width:200px;height:200px;margin:-100px 0 0 -100px;}
  .orbit-line-2{width:360px;height:360px;margin:-180px 0 0 -180px;}
  .orbit-line-3{width:500px;height:500px;margin:-250px 0 0 -250px;}
  .orbit-core{width:100px;height:100px;}
  .oc-name{font-size:1rem;}
  .orbit-item{font-size:.66rem;padding:.35rem .7rem;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   DIVISIONS â€” Technical + IT animated tree diagram
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.divisions{padding:8rem 5vw;background:var(--bg-2);position:relative;overflow:hidden;}
.divisions::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 25% 30%,rgba(0,123,255,.10),transparent 60%),
             radial-gradient(ellipse 50% 50% at 75% 70%,rgba(77,163,255,.08),transparent 60%);
}
.divisions > .container{position:relative;z-index:2;}

.div-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;
}

.div-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:2.4rem 2rem 2rem;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
  box-shadow:var(--shadow-md);
}
.div-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-plasma);
  opacity:.6;
}
.div-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-2);
  box-shadow:var(--shadow-xl),0 0 60px var(--glow-soft);
}

/* root pill at top of tree */
.div-root{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 2rem;border-radius:100px;
  background:linear-gradient(135deg,var(--c3),var(--c4));
  color:var(--bg);
  font-family:var(--font-mono);font-weight:700;letter-spacing:.04em;
  font-size:1.1rem;
  position:relative;
  box-shadow:0 0 0 4px rgba(0,123,255,.08),0 0 28px var(--glow);
  z-index:2;
}
.div-root-tag{font-size:.7rem;opacity:.75;font-weight:500;}
.div-root-name{font-size:1.05rem;}
.div-root-pulse{
  position:absolute;inset:0;border-radius:100px;
  border:1px solid var(--c3);
  opacity:0;animation:rootPulse 2.6s ease-out infinite;
}
@keyframes rootPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}

/* SVG branch lines */
.div-branches{
  width:80%;max-width:380px;height:64px;
  display:block;margin:0 auto;
}
.div-branch-path{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:branchDraw 1.4s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:.3s;
  filter:drop-shadow(0 0 6px var(--glow));
}
.div-card.up .div-branch-path,
.div-card.in .div-branch-path{animation-play-state:running;}
@keyframes branchDraw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}

/* two children boxes below the branches */
.div-children{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  width:100%;margin-top:0;
}
.div-child{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.4rem 1.4rem 1.5rem;
  position:relative;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.div-child:hover{
  border-color:var(--c3);
  transform:translateY(-2px);
  box-shadow:0 0 30px var(--glow-soft);
}
.div-child::before{content:"";position:absolute;top:-1px;left:1.4rem;right:1.4rem;height:2px;
  background:var(--grad-plasma);
  opacity:.5;
}
.div-child h3{
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--c3);
  text-align:center;
  padding-bottom:.85rem;margin-bottom:1rem;
  border-bottom:1px dashed var(--border);
}
.div-child:nth-child(2) h3{color:var(--c4);}
.div-child ul{
  list-style:none;display:flex;flex-direction:column;gap:.5rem;
}
.div-child li{
  font-size:.86rem;color:var(--text-2);font-weight:400;line-height:1.45;
  padding-left:1.2rem;position:relative;
  opacity:0;transform:translateX(-8px);
  animation:liFade .5s cubic-bezier(.4,0,.2,1) forwards;
  transition:color .2s,padding .2s;
  cursor:default;
}
.div-card.up .div-child li,
.div-card.in .div-child li{animation-play-state:running;}
.div-child li::before { content: "\203A";
  position:absolute;left:.4rem;top:0;
  color:var(--c3);font-weight:700;
  text-shadow:0 0 8px var(--glow);
}
.div-child:nth-child(2) li::before{color:var(--c4);text-shadow:0 0 8px var(--glow-purple);}
.div-child li:hover{color:var(--text);padding-left:1.4rem;}
.div-child li:hover::before{color:var(--c5);}

/* stagger delays for items */
.div-child li:nth-child(1){animation-delay:.7s}
.div-child li:nth-child(2){animation-delay:.78s}
.div-child li:nth-child(3){animation-delay:.86s}
.div-child li:nth-child(4){animation-delay:.94s}
.div-child li:nth-child(5){animation-delay:1.02s}
.div-child li:nth-child(6){animation-delay:1.10s}
.div-child li:nth-child(7){animation-delay:1.18s}
.div-child li:nth-child(8){animation-delay:1.26s}
.div-child li:nth-child(9){animation-delay:1.34s}
.div-child li:nth-child(10){animation-delay:1.42s}
.div-child li:nth-child(11){animation-delay:1.50s}
.div-child li:nth-child(12){animation-delay:1.58s}
@keyframes liFade{to{opacity:1;transform:translateX(0)}}

.div-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.6rem;padding:.7rem 1.3rem;
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;
  background:rgba(0,123,255,.08);
  border:1px solid var(--border-2);
  color:var(--c3);
  border-radius:100px;
  transition:all .25s;
}
.div-cta:hover{
  background:var(--grad-plasma);
  color:var(--bg);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 0 24px var(--glow);
}
.div-cta-arrow{transition:transform .2s;}
.div-cta:hover .div-cta-arrow{transform:translate(2px,-2px);}

@media (max-width:1024px){
  .div-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .divisions{padding:5rem 5vw;}
  .div-card{padding:1.6rem 1.2rem 1.4rem;}
  .div-children{grid-template-columns:1fr;gap:1rem;}
  .div-branches{height:48px;}
  .div-child{padding:1rem 1.2rem 1.2rem;}
  .div-child li{font-size:.82rem;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   DIVISIONS â€” ORBITAL SYSTEMS (Technical + IT side-by-side)
   uses @property --orbit-angle defined for tech-orbit
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.div-orbits{padding:8rem 5vw;background:var(--bg-2);position:relative;overflow:hidden;}
.div-orbits::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 50% at 25% 30%,rgba(0,123,255,.12),transparent 60%),
    radial-gradient(ellipse 40% 50% at 75% 70%,rgba(77,163,255,.10),transparent 60%);
}
.div-orbits > .container{position:relative;z-index:2;}

.div-orbit-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;
}

.div-orbit-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.8rem 1.6rem 1.6rem;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  transition:all .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
  box-shadow:var(--shadow-md);
  transform-style:preserve-3d;
}
.div-orbit-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-plasma);opacity:.7;
}
.div-orbit-card:hover{
  border-color:var(--border-2);
  box-shadow:var(--shadow-xl),0 0 60px var(--glow-soft);
}

/* card head */
.dor-head{
  display:flex;align-items:center;gap:.7rem;
  width:100%;padding:0 .4rem .9rem;
  border-bottom:1px dashed var(--border);
  margin-bottom:.5rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
}
.dor-num{
  background:var(--grad-cyan-purple);color:var(--bg);
  padding:.28rem .55rem;border-radius:var(--r-xs);
  font-weight:600;font-size:.74rem;letter-spacing:.06em;
}
.dor-label{
  color:var(--c3);text-transform:uppercase;font-weight:600;letter-spacing:.16em;flex:1;
}
.dor-status{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.62rem;color:#10B981;letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:var(--r-xs);
  background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);
}
.dor-status .sys-dot{width:6px;height:6px;}

/* orbit stage */
.dor-stage{
  position:relative;
  width:100%;max-width:540px;
  height:520px;
  margin:.5rem auto 0;
  perspective:1000px;
}
.dor-ring-line{
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  pointer-events:none;
}
.dor-line-1{width:240px;height:240px;margin:-120px 0 0 -120px;border:1px dashed rgba(0,123,255,.20);}
.dor-line-2{width:440px;height:440px;margin:-220px 0 0 -220px;border:1px dashed rgba(77,163,255,.16);}

/* core */
.dor-core{
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,var(--surface-elev),var(--surface));
  border:1px solid var(--border-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  z-index:5;
  box-shadow:0 0 30px var(--glow),0 0 60px var(--glow-purple),inset 0 0 16px rgba(0,123,255,.08);
  animation:coreBreathe 4s ease-in-out infinite;
}
.dor-core-tag{font-family:var(--font-mono);font-size:.6rem;color:var(--c3);letter-spacing:.08em;}
.dor-core-name{
  font-family:var(--font-sans);font-size:1.15rem;font-weight:600;letter-spacing:-.01em;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dor-core-pulse{
  position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--c3);
  opacity:0;animation:corePulse 3s ease-out infinite;
}

/* orbits */
.dor-orbit{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  pointer-events:none;
}
.dor-r1{--r:120px;--d:30s;}
.dor-r2{--r:220px;--d:48s;}

.dor-item{
  position:absolute;
  top:0;left:0;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.02em;
  background:var(--ink);
  color:var(--c3);
  padding:.4rem .8rem;border-radius:100px;
  border:1px solid var(--border-2);
  white-space:nowrap;
  pointer-events:auto;cursor:none;
  --total-angle:calc(var(--start) + var(--orbit-angle));
  transform:
    translate(-50%,-50%)
    rotate(var(--total-angle))
    translateY(calc(-1 * var(--r)))
    rotate(calc(-1 * var(--total-angle)));
  animation:orbitMove var(--d) linear infinite;
  box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 16px rgba(0,123,255,.1);
  transition:background .25s,color .25s,box-shadow .25s,border-color .25s;
}
/* outer ring uses amber color + reverse direction */
.dor-r2 .dor-item{
  color:var(--c4);
  border-color:rgba(77,163,255,.36);
  box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 16px rgba(77,163,255,.10);
  animation-direction:reverse;
}
.dor-item:hover{
  background:var(--grad-cyan-purple);color:var(--bg);
  border-color:transparent;
  z-index:6;
  box-shadow:0 0 28px var(--glow),0 8px 24px rgba(0,0,0,.5);
}
.dor-r2 .dor-item:hover{
  background:linear-gradient(120deg,var(--c4),var(--c5));
}

/* legend below stage */
.dor-legend{
  display:flex;justify-content:center;gap:1.5rem;
  margin-top:1rem;padding:.8rem 0 0;
  border-top:1px dashed var(--border);
  width:100%;
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);
}
.dor-leg{display:inline-flex;align-items:center;gap:.45rem;}
.dor-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot-r1{background:var(--c3);box-shadow:0 0 8px var(--c3);}
.dot-r2{background:var(--c4);box-shadow:0 0 8px var(--c4);}
.dor-leg-n{color:var(--c3);font-weight:600;margin-left:.2rem;}
.dor-leg:nth-child(2) .dor-leg-n{color:var(--c4);}

/* CTA */
.dor-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:1rem;padding:.7rem 1.4rem;
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;
  background:rgba(0,123,255,.08);
  border:1px solid var(--border-2);
  color:var(--c3);
  border-radius:100px;
  transition:all .25s;
  text-decoration:none;
}
.dor-cta:hover{
  background:var(--grad-plasma);color:var(--bg);
  border-color:transparent;transform:translateY(-2px);
  box-shadow:0 0 24px var(--glow);
}
.dor-cta-arrow{transition:transform .2s;}
.dor-cta:hover .dor-cta-arrow{transform:translate(2px,-2px);}

/* responsive */
@media (max-width:1180px){
  .dor-stage{max-width:480px;height:480px;}
  .dor-r1{--r:108px;}
  .dor-r2{--r:200px;}
  .dor-line-1{width:216px;height:216px;margin:-108px 0 0 -108px;}
  .dor-line-2{width:400px;height:400px;margin:-200px 0 0 -200px;}
  .dor-item{font-size:.66rem;padding:.34rem .7rem;}
}
@media (max-width:1024px){
  .div-orbit-grid{grid-template-columns:1fr;gap:2.5rem;}
  .dor-stage{max-width:540px;height:520px;}
  .dor-r1{--r:120px;}.dor-r2{--r:220px;}
  .dor-line-1{width:240px;height:240px;margin:-120px 0 0 -120px;}
  .dor-line-2{width:440px;height:440px;margin:-220px 0 0 -220px;}
  .dor-item{font-size:.7rem;padding:.4rem .8rem;}
}
@media (max-width:760px){
  .div-orbits{padding:5rem 5vw;}
  .dor-stage{height:380px;max-width:380px;}
  .dor-r1{--r:84px;}
  .dor-r2{--r:160px;}
  .dor-line-1{width:168px;height:168px;margin:-84px 0 0 -84px;}
  .dor-line-2{width:320px;height:320px;margin:-160px 0 0 -160px;}
  .dor-core{width:80px;height:80px;}
  .dor-core-name{font-size:.92rem;}
  .dor-item{font-size:.6rem;padding:.3rem .6rem;}
  .dor-legend{flex-direction:column;gap:.5rem;align-items:center;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   MEGA-ORBIT â€” Two divisions rendered as full-width orbital systems
   reuses .tech-orbit / .orbit-stage / .orbit / .orbit-item structure
   sized to fit within a single viewport
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.tech-orbit.mega-orbit{padding:4rem 5vw 3rem;}
.tech-orbit.mega-orbit + .tech-orbit.mega-orbit{
  padding-top:2rem;
  border-top:1px dashed var(--border);
}
.mega-orbit .to-head{margin-bottom:2rem;}
.mega-orbit .to-head .eyebrow{justify-content:center;}
.mega-orbit .to-head .s-title{font-size:clamp(1.75rem,3.4vw,2.6rem);}
.mega-orbit .to-head p{max-width:640px;margin:.5rem auto 0;font-size:.92rem;}
.mega-orbit .to-head p strong{color:var(--c3);font-weight:600;}

/* === ELLIPTICAL OVAL RINGS â€” wider than tall, big horizontal gap === */
.mega-orbit .orbit-stage{
  width:100%;
  max-width:980px;
  height:600px;
}

/* Each ring defines its own --rx (horizontal radius) + --ry (vertical radius) + --d (orbit duration) */
.mega-orbit .ring-1{--rx:210px;--ry:140px;--d:38s;}
.mega-orbit .ring-2{--rx:430px;--ry:250px;--d:54s;}

/* Override the chip transform: ellipse positioning via cos/sin instead of rotate-translate.
   Items stay upright (no rotation) for max legibility. */
.mega-orbit .orbit-item{
  font-size:.78rem;
  font-weight:600;
  padding:.45rem 1rem;
  letter-spacing:.02em;
  background:rgba(10,10,10,.7);
  box-shadow:0 0 24px rgba(0,123,255,.16),0 6px 18px rgba(0,0,0,.5);
  transform:
    translate(-50%,-50%)
    translate(
      calc(sin(var(--total-angle)) * var(--rx)),
      calc(cos(var(--total-angle)) * var(--ry) * -1)
    );
}
.mega-orbit .ring-2 .orbit-item{
  font-size:.7rem;
  padding:.38rem .9rem;
  box-shadow:0 0 24px rgba(77,163,255,.16),0 6px 18px rgba(0,0,0,.5);
}
.mega-orbit .orbit-item:hover{
  transform:
    translate(-50%,-50%)
    translate(
      calc(sin(var(--total-angle)) * var(--rx)),
      calc(cos(var(--total-angle)) * var(--ry) * -1)
    )
    scale(1.16);
  box-shadow:0 0 32px var(--glow),0 10px 22px rgba(0,0,0,.55);
}

/* Oval guide lines â€” width is 2*rx, height is 2*ry, border-radius:50% makes the ellipse */
.mega-orbit .orbit-line-1{
  width:420px;height:280px;margin:-140px 0 0 -210px;border-radius:50%;
}
.mega-orbit .orbit-line-2{
  width:860px;height:500px;margin:-250px 0 0 -430px;border-radius:50%;
  border-color:rgba(77,163,255,.16);
}
.mega-orbit .orbit-line-3{display:none;}

.mega-orbit .orbit-core{width:130px;height:130px;}
.mega-orbit .oc-name{font-size:1.05rem;}
.mega-orbit .oc-tag{font-size:.66rem;}
.mega-orbit .to-foot{margin-top:1.4rem;}

@media (max-width:1024px){
  .mega-orbit .orbit-stage{max-width:820px;height:540px;}
  .mega-orbit .ring-1{--rx:180px;--ry:120px;}
  .mega-orbit .ring-2{--rx:360px;--ry:220px;}
  .mega-orbit .orbit-line-1{width:360px;height:240px;margin:-120px 0 0 -180px;}
  .mega-orbit .orbit-line-2{width:720px;height:440px;margin:-220px 0 0 -360px;}
  .mega-orbit .orbit-core{width:108px;height:108px;}
  .mega-orbit .oc-name{font-size:.92rem;}
  .mega-orbit .orbit-item{font-size:.7rem;padding:.38rem .9rem;}
  .mega-orbit .ring-2 .orbit-item{font-size:.64rem;padding:.32rem .8rem;}
}
@media (max-width:760px){
  .tech-orbit.mega-orbit{padding:3rem 5vw 2.4rem;}
  .mega-orbit .orbit-stage{max-width:520px;height:420px;}
  .mega-orbit .ring-1{--rx:120px;--ry:90px;}
  .mega-orbit .ring-2{--rx:230px;--ry:165px;}
  .mega-orbit .orbit-line-1{width:240px;height:180px;margin:-90px 0 0 -120px;}
  .mega-orbit .orbit-line-2{width:460px;height:330px;margin:-165px 0 0 -230px;}
  .mega-orbit .orbit-core{width:84px;height:84px;}
  .mega-orbit .oc-name{font-size:.82rem;}
  .mega-orbit .orbit-item{font-size:.56rem;padding:.26rem .6rem;letter-spacing:.01em;}
  .mega-orbit .ring-2 .orbit-item{font-size:.52rem;padding:.22rem .55rem;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   GAMIFIED WORK PROCESS â€” about page Â· click to unlock + XP
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.game-process{
  padding:7rem 5vw;
  position:relative;overflow:hidden;
  background:var(--bg-2);
}
.game-process::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 0%,var(--glow-soft),transparent 60%);
}
.game-process > .container{position:relative;z-index:2;}
.gp-head{text-align:center;max-width:780px;margin:0 auto 2.4rem;}
.gp-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:100px;
  background:rgba(0,123,255,.08);
  border:1px solid var(--border-2);
  color:var(--c3);margin-bottom:1.4rem;
}
.gp-badge .lp-pulse{width:6px;height:6px;border-radius:50%;background:var(--c3);box-shadow:0 0 0 3px rgba(0,123,255,.18);animation:pulseDot 2s infinite;}

/* HUD bar */
.gp-hud{
  display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  background:var(--ink);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  padding:1rem 1.4rem;
  margin-bottom:2rem;
  box-shadow:0 0 30px var(--glow-soft);
  position:relative;
}
.gp-hud::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-cyan-purple);opacity:.7;
}
.gp-hud-cell{display:flex;flex-direction:column;gap:.3rem;}
.gp-hud-l{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.06em;}
.gp-hud-v{
  font-family:var(--font-mono);font-size:1.1rem;font-weight:600;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gp-hud-sep{color:var(--muted);margin:0 .15rem;-webkit-text-fill-color:var(--muted);}
.gp-hud-tot{color:var(--text-2);-webkit-text-fill-color:var(--text-2);}
.gp-xp-unit{font-size:.7em;opacity:.7;}
.gp-hud-bar{
  position:relative;height:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:100px;
  overflow:hidden;
}
.gp-hud-bar-fill{
  position:absolute;top:0;bottom:0;left:0;
  width:0%;
  background:var(--grad-cyan-purple);
  background-size:200% 100%;
  border-radius:100px;
  transition:width .8s cubic-bezier(.2,.8,.2,1);
  animation:gradFlow 6s linear infinite;
  box-shadow:0 0 16px var(--glow);
}
.gp-hud-bar-l{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:.66rem;
  color:var(--text);letter-spacing:.06em;
  text-shadow:0 0 4px rgba(0,0,0,.6);
}

/* STEP-FLOW indicator (1 â†’ 2 â†’ 3 â†’ 4 with animated fill + packet) */
.gp-stepper{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:0 auto 2.5rem;
  padding:1.5rem 1rem 1rem;
  max-width:880px;
}
.gp-stepper-track,
.gp-stepper-fill{
  position:absolute;
  top:calc(1.5rem + 18px);
  left:calc(12.5% + .25rem);
  right:calc(12.5% + .25rem);
  height:3px;border-radius:2px;
  pointer-events:none;
}
.gp-stepper-track{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.gp-stepper-fill{
  background:var(--grad-cyan-purple);
  background-size:200% 100%;
  width:0%;
  transition:width .8s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 14px var(--glow);
  animation:gradFlow 5s linear infinite;
  z-index:1;
}
.gp-stepper-packet{
  position:absolute;
  top:calc(1.5rem + 18px - 5px);
  left:12.5%;
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle,var(--c5),var(--c3));
  box-shadow:0 0 16px var(--c3),0 0 32px var(--c4);
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:left 1s cubic-bezier(.4,0,.2,1),opacity .25s;
}
.gp-stepper-packet.active{opacity:1;animation:packetPulse 1.2s ease-in-out infinite;}
@keyframes packetPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* dots */
.gp-step-dot{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  cursor:default;
}
.gp-dot-ring{
  width:36px;height:36px;border-radius:50%;
  background:var(--ink);
  border:2px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.gp-dot-num{
  font-family:var(--font-mono);font-size:.82rem;font-weight:700;
  color:var(--text-2);
  position:relative;z-index:2;
  transition:color .35s;
}
.gp-step-dot::before{content:"";position:absolute;top:0;left:0;width:36px;height:36px;
  margin-left:calc(50% - 18px);
  border-radius:50%;
  border:1px solid var(--c3);
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.gp-dot-label{
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--muted);letter-spacing:.06em;text-transform:lowercase;
  transition:color .35s;
}

/* dot lit up = corresponding phase unlocked */
.gp-step-dot.lit .gp-dot-ring{
  background:var(--grad-cyan-purple);
  border-color:transparent;
  box-shadow:0 0 0 4px rgba(0,123,255,.12),0 0 22px var(--glow);
  transform:scale(1.06);
}
.gp-step-dot.lit .gp-dot-num{color:var(--bg);}
.gp-step-dot.lit .gp-dot-label{color:var(--c3);}
.gp-step-dot.lit::before{animation:dotLitRing 1.2s ease-out;}
@keyframes dotLitRing{
  0%{opacity:.7;transform:scale(.9);}
  100%{opacity:0;transform:scale(2.2);}
}

@media (max-width:760px){
  .gp-stepper{padding:1.2rem .5rem .8rem;margin-bottom:1.6rem;}
  .gp-dot-ring{width:28px;height:28px;}
  .gp-step-dot::before{width:28px;height:28px;margin-left:calc(50% - 14px);}
  .gp-dot-num{font-size:.7rem;}
  .gp-dot-label{font-size:.58rem;}
  .gp-stepper-track,.gp-stepper-fill{top:calc(1.2rem + 14px);}
  .gp-stepper-packet{top:calc(1.2rem + 14px - 5px);}
}

/* phase grid */
.gp-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
}

/* SEQUENTIAL ENTRANCE â€” cards cascade in when grid scrolls into view */
.gp-grid .gp-step{
  opacity:0;transform:translateY(24px);
}
.gp-grid.active .gp-step{
  animation:gpStepEnter .65s cubic-bezier(.2,.8,.2,1) forwards;
}
.gp-grid.active .gp-step:nth-child(1){animation-delay:.05s;}
.gp-grid.active .gp-step:nth-child(2){animation-delay:.18s;}
.gp-grid.active .gp-step:nth-child(3){animation-delay:.31s;}
.gp-grid.active .gp-step:nth-child(4){animation-delay:.44s;}
@keyframes gpStepEnter{
  from{opacity:0;transform:translateY(24px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* phase step */
.gp-step{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.6rem 1.6rem 1.4rem 1.6rem;
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.gp-step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-plasma);opacity:0;transition:opacity .35s;
}

/* node (phase number / lock icon) */
.gp-node{
  width:60px;height:60px;flex-shrink:0;
  border-radius:var(--r-md);
  background:var(--ink);
  border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  font-family:var(--font-mono);font-weight:700;
  transition:all .3s;
}
.gp-node-num{
  font-size:1.1rem;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .3s;
}
.gp-node-icon{
  position:absolute;
  font-size:1.1rem;
  opacity:0;transition:opacity .3s;
  filter:grayscale(1) brightness(.7);
}

/* card body */
.gp-card{display:flex;flex-direction:column;gap:.65rem;min-width:0;}
.gp-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.gp-phase-tag{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.gp-stage-tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;
  background:rgba(0,123,255,.08);
  color:var(--c3);
  padding:.18rem .45rem;border-radius:var(--r-xs);
  border:1px solid var(--border-2);
}
.gp-status-tag{
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;
  color:#F472B6;
  padding:.18rem .5rem;border-radius:var(--r-xs);
  background:rgba(244,114,182,.08);
  border:1px solid rgba(244,114,182,.3);
  transition:all .3s;
}
.gp-card h4{
  font-size:1.1rem;font-weight:500;color:var(--text);
  letter-spacing:-.015em;
}
.gp-tease{font-size:.88rem;color:var(--text-2);line-height:1.6;font-weight:300;}

/* hidden content (revealed when unlocked) */
.gp-content{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.gp-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0 .8rem;padding:.85rem 1rem;background:rgba(0,123,255,.04);border:1px solid var(--border);border-radius:var(--r-sm);}
.gp-list li{font-size:.82rem;color:var(--text-2);padding-left:1.2rem;position:relative;font-weight:300;}
.gp-list li::before { content: "\203A";position:absolute;left:0;color:#10B981;font-weight:700;}
.gp-tag-row{display:flex;flex-wrap:wrap;gap:.35rem;}
.gp-tag{
  font-family:var(--font-mono);font-size:.64rem;
  padding:.22rem .55rem;border-radius:var(--r-xs);
  background:rgba(0,123,255,.06);color:var(--c3);
  border:1px solid var(--border-2);
}

/* unlock button */
.gp-unlock-btn{
  margin-top:.7rem;
  display:inline-flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem 1.1rem;
  background:var(--grad-cyan-purple);color:var(--bg);
  border:1px solid transparent;border-radius:100px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.04em;
  cursor:none;
  transition:all .25s;
  align-self:flex-start;
  position:relative;overflow:hidden;
  box-shadow:0 0 20px var(--glow-soft);
}
.gp-unlock-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,#4DA3FF,#007BFF,#99C2FF,#007BFF);
  background-size:300% 100%;
  z-index:-1;opacity:0;transition:opacity .3s;
  animation:gradFlow 3s linear infinite;
}
.gp-unlock-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);}
.gp-unlock-btn:hover::before{opacity:1;}
.gp-unlock-btn:active{transform:scale(.97);}
.gp-unlock-xp{font-size:.7rem;opacity:.85;}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ LOCKED state â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.gp-step.locked .gp-card h4,
.gp-step.locked .gp-tease{filter:grayscale(.4) opacity(.85);}
.gp-step.locked .gp-node-num{opacity:.3;}
.gp-step.locked .gp-node-icon{opacity:1;}
.gp-step.locked .gp-node{border-color:var(--border);}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ UNLOCKED state â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.gp-step.unlocked{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lg),0 0 50px var(--glow-soft);
  animation:gpFlash .6s ease-out;
}
.gp-step.unlocked::before{opacity:1;}
.gp-step.unlocked .gp-node{
  background:var(--grad-cyan-purple);
  border-color:transparent;
  box-shadow:0 0 24px var(--glow);
}
.gp-step.unlocked .gp-node-num{
  -webkit-text-fill-color:var(--bg);background:none;color:var(--bg);
}
.gp-step.unlocked .gp-node-icon{opacity:0;}
.gp-step.unlocked .gp-status-tag{
  color:#10B981;
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.32);
}
.gp-step.unlocked .gp-content{
  max-height:520px;opacity:1;
  transition-delay:.05s,.2s;
}
.gp-step.unlocked .gp-unlock-btn{
  background:transparent;color:#10B981;
  border-color:rgba(16,185,129,.35);box-shadow:none;
  pointer-events:none;
}
.gp-step.unlocked .gp-unlock-btn::before{display:none;}
.gp-step.unlocked .gp-unlock-btn .gp-unlock-l::before{content:"";color:#10B981;font-weight:700;}
.gp-step.unlocked .gp-unlock-xp{color:var(--c3);}

@keyframes gpFlash{
  0%{box-shadow:0 0 0 0 rgba(0,123,255,.5),var(--shadow-lg);}
  50%{box-shadow:0 0 0 12px rgba(0,123,255,0),var(--shadow-lg),0 0 80px var(--glow);}
  100%{box-shadow:var(--shadow-lg),0 0 50px var(--glow-soft);}
}

/* achievement toast */
.gp-achievement{
  position:fixed;
  bottom:2rem;right:2rem;z-index:700;
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.4rem;
  background:var(--ink);
  border:1px solid var(--c3);
  border-radius:var(--r-md);
  box-shadow:0 24px 48px rgba(0,0,0,.6),0 0 60px var(--glow);
  transform:translateX(120%);
  transition:transform .55s cubic-bezier(.2,1.2,.3,1);
  max-width:380px;
}
.gp-achievement.show{transform:translateX(0);}
.gp-achievement-icon{
  font-size:2.2rem;line-height:1;
  filter:drop-shadow(0 0 12px var(--glow));
  animation:trophyBounce 1s ease-out;
}
@keyframes trophyBounce{
  0%{transform:scale(0) rotate(-30deg);}
  60%{transform:scale(1.2) rotate(8deg);}
  100%{transform:scale(1) rotate(0);}
}
.gp-achievement-body{display:flex;flex-direction:column;gap:.15rem;}
.gp-achievement-l{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c3);}
.gp-achievement-t{
  font-family:var(--font-sans);font-size:1.05rem;font-weight:600;
  background:var(--grad-cyan-purple);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gp-achievement-s{font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);}

/* responsive */
@media (max-width:1024px){
  .gp-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .game-process{padding:5rem 5vw;}
  .gp-hud{grid-template-columns:1fr;gap:.7rem;padding:.85rem 1.1rem;}
  .gp-hud-cell{flex-direction:row;justify-content:space-between;}
  .gp-step{padding:1.2rem;grid-template-columns:auto 1fr;gap:.9rem;}
  .gp-node{width:50px;height:50px;}
  .gp-node-num{font-size:1rem;}
  .gp-achievement{left:1rem;right:1rem;bottom:1rem;max-width:none;}
}

/* alt division gets a different gradient bg accent */
.tech-orbit.mega-orbit.alt .orbit-bg{
  background:
    radial-gradient(circle at 50% 50%,rgba(77,163,255,.10) 0%,transparent 35%),
    radial-gradient(circle at 50% 50%,rgba(153,194,255,.06) 0%,transparent 55%);
}
/* alt: outer ring renders in soft pink/gold instead of amber for variety */
.tech-orbit.mega-orbit.alt .ring-2 .orbit-item{
  color:var(--c5);
  border-color:rgba(153,194,255,.34);
}
.tech-orbit.mega-orbit.alt .orbit-line-2{border-color:rgba(153,194,255,.16);}
.tech-orbit.mega-orbit.alt .oc-name{
  background:linear-gradient(120deg,var(--c4),var(--c5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* foot CTA button â€” added to .to-foot */
.to-foot .to-cta{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.2rem;border-radius:100px;
  background:var(--grad-cyan-purple);
  color:var(--bg);
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-decoration:none;
  transition:all .25s;
  box-shadow:0 0 20px var(--glow-soft);
}
.to-foot .to-cta:hover{transform:translateY(-2px);box-shadow:0 0 32px var(--glow);}
.tech-orbit.mega-orbit.alt .to-foot .to-cta{
  background:linear-gradient(120deg,var(--c4),var(--c5));
}

/* on smaller screens, foot wraps and CTA goes full-width */
@media (max-width:760px){
  .to-foot .to-cta{margin-left:0;width:100%;justify-content:center;margin-top:.6rem;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   FLOWING DATA STREAM â€” services page
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.data-stream{
  position:relative;
  padding:9rem 5vw 7rem;
  background:radial-gradient(ellipse at 50% 0%, #1A0E05 0%, #0A0A0A 55%, #060606 100%);
  overflow:hidden;
  isolation:isolate;
}
.data-stream .container{position:relative;z-index:2;max-width:1280px;}

/* â€” backdrop (grid + scanline + horizontal stream lines) â€” */
.ds-bg{position:absolute;inset:0;z-index:1;pointer-events:none;}
.ds-grid{
  position:absolute;inset:0;opacity:.18;
  background-image:
    linear-gradient(rgba(0,123,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,123,255,.12) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.ds-scan{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(77,163,255,.05) 50%,transparent 100%);
  background-size:100% 8px;
  animation:ds-scan-anim 6s linear infinite;
  opacity:.4;
}
@keyframes ds-scan-anim{0%{background-position:0 0}100%{background-position:0 200px}}
.ds-stream-lines{position:absolute;inset:0;}
.ds-stream-lines span{
  position:absolute;left:-30%;top:var(--y);width:60%;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,123,255,.55) 40%,rgba(153,194,255,.85) 50%,rgba(0,123,255,.55) 60%,transparent 100%);
  animation:ds-streamline var(--d) linear infinite;
  animation-delay:var(--del);
  opacity:.7;
}
@keyframes ds-streamline{
  0%{transform:translate3d(-20%,0,0);opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translate3d(220%,0,0);opacity:0}
}

/* â€” header â€” */
.ds-head{text-align:center;max-width:820px;margin:0 auto 4rem;}
.ds-head .s-title{margin:.6rem 0 .8rem;}
.ds-head p{color:var(--text-2);font-size:1.02rem;line-height:1.7;}
.ds-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#99C2FF;background:rgba(0,123,255,.07);
  border:1px solid rgba(77,163,255,.28);border-radius:999px;
  padding:.45rem .95rem;
}
.ds-badge-dot{width:7px;height:7px;border-radius:50%;background:#007BFF;box-shadow:0 0 10px #007BFF;animation:ds-pulse-dot 1.6s ease-in-out infinite;}
@keyframes ds-pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

.ds-meters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem;
}
.ds-meter{
  background:rgba(20,12,6,.6);
  border:1px solid rgba(77,163,255,.18);
  border-radius:10px;
  padding:.85rem 1rem;
  font-family:var(--font-mono);
  text-align:left;
  backdrop-filter:blur(8px);
}
.ds-meter-l{display:block;font-size:.65rem;color:rgba(153,194,255,.55);letter-spacing:.12em;text-transform:uppercase;}
.ds-meter-v{display:block;margin-top:.25rem;color:#fff;font-size:.95rem;}
.ds-meter-v b{font-weight:600;color:#4DA3FF;font-size:1.1rem;}
.ds-meter-v i{font-style:normal;color:rgba(153,194,255,.55);font-size:.78rem;margin-left:.2rem;}

/* â€” flow container â€” */
.ds-flow{
  position:relative;
  padding:2rem 0 3rem;
}

/* central trunk */
.ds-trunk{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:6px;
  z-index:1;
  pointer-events:none;
}
.ds-trunk-rail{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,123,255,.08) 0%,rgba(0,123,255,.25) 50%,rgba(0,123,255,.08) 100%);
  border-radius:6px;
  border:1px solid rgba(77,163,255,.2);
}
.ds-trunk-glow{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,#007BFF 50%,transparent 100%);
  background-size:100% 30%;
  background-repeat:no-repeat;
  filter:blur(6px);
  opacity:.7;
  animation:ds-trunk-flow 4.5s linear infinite;
}
@keyframes ds-trunk-flow{
  0%{background-position:0 -30%}
  100%{background-position:0 130%}
}
.ds-trunk-pulse{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,#99C2FF 50%,transparent 100%);
  background-size:100% 12%;
  background-repeat:no-repeat;
  animation:ds-trunk-flow 3s linear infinite;
}
.ds-pkt{
  position:absolute;left:50%;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#99C2FF 0%,#007BFF 60%,transparent 75%);
  transform:translate(-50%,0);
  box-shadow:0 0 18px #007BFF,0 0 6px #99C2FF;
  animation:ds-pkt-flow 5s linear infinite;
}
.ds-pkt.p1{animation-duration:5.5s;animation-delay:0s;}
.ds-pkt.p2{animation-duration:6.8s;animation-delay:1.2s;}
.ds-pkt.p3{animation-duration:5s;animation-delay:2.4s;}
.ds-pkt.p4{animation-duration:7.2s;animation-delay:3.6s;}
.ds-pkt.p5{animation-duration:6s;animation-delay:4.8s;}
@keyframes ds-pkt-flow{
  0%{top:-2%;opacity:0;transform:translate(-50%,0) scale(.6)}
  8%{opacity:1;transform:translate(-50%,0) scale(1)}
  92%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{top:102%;opacity:0;transform:translate(-50%,0) scale(.6)}
}
.ds-trunk-cap{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:#99C2FF;background:rgba(20,12,6,.85);
  border:1px solid rgba(77,163,255,.4);
  padding:.3rem .65rem;border-radius:999px;
  white-space:nowrap;
}
.ds-trunk-cap.top{top:-1.4rem;}
.ds-trunk-cap.bot{bottom:-1.4rem;}

/* division dividers (banner across the trunk) */
.ds-divider{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:1.5rem 0 2rem;
  padding:1rem 1.5rem;
  background:linear-gradient(90deg,transparent 0%,rgba(0,123,255,.12) 35%,rgba(0,123,255,.18) 50%,rgba(0,123,255,.12) 65%,transparent 100%);
  border-top:1px dashed rgba(77,163,255,.35);
  border-bottom:1px dashed rgba(77,163,255,.35);
  flex-wrap:wrap;
}
.ds-divider-tag{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#0A0A0A;background:#4DA3FF;
  padding:.3rem .7rem;border-radius:4px;font-weight:600;
}
.ds-divider-name{
  font-family:var(--font-display,Inter),sans-serif;
  color:#99C2FF;font-size:1.05rem;font-weight:500;letter-spacing:-.005em;
}
.ds-divider-line{display:none;}

/* stations */
.ds-station{
  position:relative;z-index:2;
  display:grid;
  align-items:center;
  width:100%;
  margin:2.6rem 0;
}
/* card fills its half (minus tap gap) â€” empty side ends at trunk centre */
.ds-st-left{grid-template-columns:minmax(0, 1fr) 90px calc(50% - 0px);}
.ds-st-right{grid-template-columns:calc(50% - 0px) 90px minmax(0, 1fr);}
.ds-st-left .ds-card{grid-column:1;justify-self:end;width:100%;max-width:560px;}
.ds-st-left .ds-tap{grid-column:2;}
.ds-st-right .ds-tap{grid-column:2;}
.ds-st-right .ds-card{grid-column:3;justify-self:start;width:100%;max-width:560px;}

/* â”€â”€â”€ VEIN â€” pure CSS span-based connector, bulletproof on every card â”€â”€â”€ */
.ds-vein{
  position:absolute;
  top:50%;
  height:24px;
  margin-top:-12px;
  width:100px;            /* gap between card edge and trunk = 90px â†’ 100 gives 10px overlap into card */
  z-index:5;
  pointer-events:none;
}
.ds-st-left .ds-vein{
  right:50%;              /* right edge of vein sits exactly on the trunk centerline */
}
.ds-st-right .ds-vein{
  left:50%;
}

/* main horizontal line â€” fills the full vein width */
.ds-vein-line{
  position:absolute;
  top:50%;left:0;right:0;
  margin-top:-1px;
  height:2px;
  background:linear-gradient(90deg,
    rgba(0,123,255,.4) 0%,
    #007BFF 25%,
    #4DA3FF 75%,
    #99C2FF 100%);
  filter:drop-shadow(0 0 5px rgba(0,123,255,.7));
  border-radius:1px;
}
.ds-st-left .ds-vein-line{
  background:linear-gradient(90deg,
    #99C2FF 0%,
    #4DA3FF 25%,
    #007BFF 75%,
    rgba(0,123,255,.4) 100%);
}

/* trunk-side junction â€” bright filled dot on the trunk */
.ds-vein-junction{
  position:absolute;
  top:50%;
  width:10px;height:10px;
  margin-top:-5px;
  border-radius:50%;
  background:#99C2FF;
  box-shadow:0 0 12px #007BFF, 0 0 0 2px rgba(10,10,10,.6);
}
.ds-st-left .ds-vein-junction{right:-5px;}    /* center on trunk */
.ds-st-right .ds-vein-junction{left:-5px;}

/* expanding ring around junction */
.ds-vein-junction-ring{
  position:absolute;
  top:50%;
  width:10px;height:10px;
  margin-top:-5px;
  border-radius:50%;
  border:1.5px solid #007BFF;
  animation:ds-vein-ring-pulse 2s ease-out infinite;
}
.ds-st-left .ds-vein-junction-ring{right:-5px;}
.ds-st-right .ds-vein-junction-ring{left:-5px;}
@keyframes ds-vein-ring-pulse{
  0%{transform:scale(.6);opacity:1}
  100%{transform:scale(2.4);opacity:0}
}

/* card-side port â€” bullet docked into the card edge */
.ds-vein-port{
  position:absolute;
  top:50%;
  width:8px;height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:#007BFF;
  box-shadow:0 0 10px #99C2FF, 0 0 0 2px rgba(10,10,10,.4);
  animation:ds-vein-port-glow 1.8s ease-in-out infinite;
}
.ds-st-left .ds-vein-port{left:-4px;}
.ds-st-right .ds-vein-port{right:-4px;}
@keyframes ds-vein-port-glow{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.25);opacity:1}
}

/* traveling glow dot from trunk â†’ card */
.ds-vein-dot{
  position:absolute;
  top:50%;
  width:7px;height:7px;
  margin-top:-3.5px;
  border-radius:50%;
  background:radial-gradient(circle, #99C2FF 0%, #007BFF 70%, transparent 100%);
  box-shadow:0 0 12px #007BFF, 0 0 4px #99C2FF;
}
.ds-st-left .ds-vein-dot{
  right:0;
  animation:ds-vein-dot-left 3.2s linear infinite;
}
.ds-st-right .ds-vein-dot{
  left:0;
  animation:ds-vein-dot-right 3.2s linear infinite;
}
@keyframes ds-vein-dot-left{
  0%{right:0;opacity:0;transform:scale(.6)}
  10%{opacity:1;transform:scale(1)}
  90%{opacity:1;transform:scale(1)}
  100%{right:calc(100% - 7px);opacity:0;transform:scale(.6)}
}
@keyframes ds-vein-dot-right{
  0%{left:0;opacity:0;transform:scale(.6)}
  10%{opacity:1;transform:scale(1)}
  90%{opacity:1;transform:scale(1)}
  100%{left:calc(100% - 7px);opacity:0;transform:scale(.6)}
}

/* card */
.ds-card{
  position:relative;
  background:linear-gradient(180deg, rgba(20,14,8,.92), rgba(14,9,5,.92));
  border:1px solid rgba(77,163,255,.22);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,123,255,.05) inset;
  backdrop-filter:blur(10px);
  transition:transform .35s ease, border-color .3s, box-shadow .35s ease;
}
.ds-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, rgba(0,123,255,.5), transparent 40%, transparent 60%, rgba(153,194,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;pointer-events:none;
}
.ds-station:hover .ds-card{
  transform:translateY(-4px);
  border-color:rgba(77,163,255,.5);
  box-shadow:0 38px 80px rgba(0,0,0,.6), 0 0 40px rgba(0,123,255,.2);
}

/* card top/bot bars */
.ds-card-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;
  background:rgba(8,5,3,.65);
  border-bottom:1px solid rgba(77,163,255,.15);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:rgba(153,194,255,.7);
  flex-wrap:wrap;
}
.ds-card-bar.bot{border-bottom:none;border-top:1px solid rgba(77,163,255,.15);}
.ds-port{display:inline-flex;align-items:center;gap:.5rem;color:rgba(153,194,255,.65);}
.ds-port.out{color:#4DA3FF;}
.ds-port-dot{width:6px;height:6px;border-radius:50%;background:#5BE584;box-shadow:0 0 8px #5BE584;animation:ds-pulse-dot 1.6s ease-in-out infinite;}
.ds-status{
  font-weight:600;letter-spacing:.14em;
}
.ds-status-ok{color:#5BE584;}
.ds-status-warn{color:#99C2FF;}
.ds-throughput{display:inline-flex;align-items:center;gap:.5rem;color:#99C2FF;}
.ds-spark{
  width:34px;height:10px;
  background:
    linear-gradient(90deg,#007BFF 0%,#4DA3FF 50%,#99C2FF 100%);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'><polyline points='0,7 5,3 9,8 13,2 17,6 21,4 25,9 29,1 34,5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'><polyline points='0,7 5,3 9,8 13,2 17,6 21,4 25,9 29,1 34,5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

/* card body */
.ds-card-body{
  padding:1.25rem 1.3rem 1.1rem;
  position:relative;
}
.ds-num{
  position:absolute;top:.85rem;right:1.15rem;
  font-family:var(--font-mono);font-size:2.2rem;font-weight:700;line-height:1;
  background:linear-gradient(180deg,rgba(77,163,255,.45),rgba(0,123,255,.08));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;
}
.ds-tag{
  display:inline-block;font-family:var(--font-mono);font-size:.66rem;
  color:#007BFF;letter-spacing:.12em;text-transform:lowercase;
  margin-bottom:.3rem;
}
.ds-card h3{
  font-family:var(--font-display,Inter),sans-serif;
  color:#fff;font-size:1.4rem;line-height:1.15;font-weight:500;
  letter-spacing:-.02em;margin:0 0 .55rem;
}
.ds-lede{
  color:rgba(255,255,255,.92);font-size:.88rem;line-height:1.55;
  margin:0 0 .85rem;max-width:48ch;
}
.ds-caps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr;column-gap:1rem;row-gap:.32rem;
}
.ds-caps-2col{grid-template-columns:1fr 1fr;column-gap:1rem;row-gap:.32rem;}
.ds-caps li{
  position:relative;padding-left:1.05rem;
  font-size:.8rem;color:rgba(255,255,255,.92);line-height:1.45;
  font-family:var(--font-mono);
}
.ds-caps li::before { content: "\203A";position:absolute;left:.15rem;top:0;color:#007BFF;font-weight:700;
}
.ds-caps li:hover{color:#99C2FF;}

/* CTA */
.ds-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.3rem;
  background:linear-gradient(90deg,rgba(0,123,255,.12),rgba(0,123,255,.02));
  border-top:1px solid rgba(77,163,255,.2);
  font-family:var(--font-mono);font-size:.85rem;color:#99C2FF;
  text-decoration:none;
  transition:background .3s,color .3s,padding-left .3s;
}
.ds-cta:hover{
  background:linear-gradient(90deg,rgba(0,123,255,.32),rgba(0,123,255,.08));
  color:#fff;padding-left:1.6rem;
}
.ds-cta-arrow{
  font-size:1.1rem;transition:transform .3s;
}
.ds-cta:hover .ds-cta-arrow{transform:translate(4px,-4px);}

/* terminal log at end of stream */
.ds-terminal{
  margin-top:4rem;
  background:linear-gradient(180deg,rgba(8,5,3,.95),rgba(4,3,2,.98));
  border:1px solid rgba(77,163,255,.25);
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 30px rgba(0,123,255,.08);
}
.ds-term-bar{
  display:flex;align-items:center;gap:1rem;
  padding:.7rem 1rem;
  background:rgba(0,123,255,.06);
  border-bottom:1px solid rgba(77,163,255,.2);
}
.ds-term-dots{display:inline-flex;gap:.4rem;}
.ds-term-dots span{width:10px;height:10px;border-radius:50%;background:rgba(77,163,255,.35);}
.ds-term-dots span:first-child{background:#007BFF;}
.ds-term-dots span:nth-child(2){background:#4DA3FF;}
.ds-term-dots span:nth-child(3){background:#99C2FF;}
.ds-term-tab{
  font-family:var(--font-mono);font-size:.78rem;color:rgba(153,194,255,.7);
  flex:1;text-align:center;
}
.ds-term-live{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.7rem;color:#5BE584;letter-spacing:.12em;text-transform:uppercase;
}
.ds-term-body{padding:1.2rem 1.4rem;font-family:var(--font-mono);font-size:.85rem;line-height:1.75;}
.ds-term-row{
  display:flex;gap:1rem;color:rgba(255,255,255,.92);
  padding:.2rem 0;
  opacity:0;transform:translateX(-10px);
  animation:ds-term-in .5s forwards;
}
.ds-term-row:nth-child(1){animation-delay:.05s}
.ds-term-row:nth-child(2){animation-delay:.4s}
.ds-term-row:nth-child(3){animation-delay:.75s}
.ds-term-row:nth-child(4){animation-delay:1.1s}
.ds-term-row:nth-child(5){animation-delay:1.45s}
.ds-term-row:nth-child(6){animation-delay:1.8s}
@keyframes ds-term-in{to{opacity:1;transform:translateX(0)}}
.ds-term-time{color:rgba(153,194,255,.5);min-width:90px;}
.ds-term-arrow{color:#007BFF;font-weight:700;}
.ds-term-row i{color:#4DA3FF;font-style:normal;}
.ds-term-row b{color:#5BE584;font-weight:600;}
.ds-term-final{margin-top:.4rem;padding-top:.6rem;border-top:1px dashed rgba(77,163,255,.2);}
.ds-term-final .ds-term-arrow{color:#5BE584;}

/* responsive â€” stack stations on mobile */
@media (max-width:920px){
  .data-stream{padding:6rem 4vw 5rem;}
  .ds-meters{grid-template-columns:repeat(2,1fr);}
  .ds-trunk{left:24px;transform:none;}
  .ds-trunk-cap{left:0;transform:none;white-space:nowrap;}
  .ds-station{
    grid-template-columns:54px 1fr !important;
    margin:2rem 0;
  }
  .ds-st-left .ds-card,.ds-st-right .ds-card{
    grid-column:2 !important;justify-self:stretch !important;max-width:none !important;
  }
  /* on mobile, override vein positioning â€” trunk is on the left at 24px, all cards stack to the right */
  .ds-st-left .ds-vein,.ds-st-right .ds-vein{
    left:24px !important;right:auto !important;
    width:30px;
  }
  .ds-st-left .ds-vein-junction,.ds-st-right .ds-vein-junction,
  .ds-st-left .ds-vein-junction-ring,.ds-st-right .ds-vein-junction-ring{left:-5px;right:auto;}
  .ds-st-left .ds-vein-port,.ds-st-right .ds-vein-port{right:-4px;left:auto;}
  .ds-st-left .ds-vein-dot{left:0;right:auto;animation:ds-vein-dot-right 3.2s linear infinite;}
  .ds-num{font-size:2rem;top:.8rem;right:1rem;}
  .ds-card h3{font-size:1.3rem;}
  .ds-caps-2col{grid-template-columns:1fr;}
  .ds-divider{flex-direction:column;text-align:center;}
}
@media (max-width:520px){
  .ds-meters{grid-template-columns:1fr;}
  .ds-card-bar{font-size:.62rem;padding:.55rem .8rem;gap:.5rem;}
  .ds-term-time{min-width:auto;font-size:.7rem;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .ds-pkt,.ds-trunk-glow,.ds-trunk-pulse,
  .ds-vein-dot,.ds-vein-junction-ring,.ds-vein-port,
  .ds-stream-lines span,.ds-scan,.ds-badge-dot,.ds-port-dot{animation:none !important;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   HERO â€” TECHNICAL ENGINEERING DASHBOARD
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* backdrop grid */
.hero-tech .hero-grid-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,123,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,123,255,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
  opacity:.6;
}

/* floating particles */
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero-particles span{
  position:absolute;left:var(--x);top:var(--y);
  width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#99C2FF 0%,#007BFF 60%,transparent 100%);
  box-shadow:0 0 10px #007BFF;
  animation:hpFloat var(--d) ease-in-out infinite;
  animation-delay:var(--del);
  opacity:.6;
}
@keyframes hpFloat{
  0%,100%{transform:translate3d(0,0,0) scale(.7);opacity:.3}
  50%{transform:translate3d(20px,-30px,0) scale(1);opacity:.85}
}

/* status line above hero pill */
.hero-status-line{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;
  color:rgba(153,194,255,.7);letter-spacing:.06em;
  margin-bottom:1rem;padding:.4rem .85rem;
  background:rgba(20,12,6,.65);
  border:1px solid rgba(77,163,255,.22);
  border-radius:8px;
  backdrop-filter:blur(8px);
}
.hsl-tag{color:#4DA3FF;font-weight:500;}
.hsl-sep{color:rgba(153,194,255,.4);}
.hsl-version{color:rgba(153,194,255,.55);}
.hsl-status{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-left:.6rem;padding-left:.6rem;
  border-left:1px solid rgba(77,163,255,.22);
  color:#5BE584;font-weight:600;letter-spacing:.1em;
}
.hsl-status .dot{
  width:6px;height:6px;border-radius:50%;background:#5BE584;
  box-shadow:0 0 8px #5BE584;animation:hslPulse 1.6s ease-in-out infinite;
}
@keyframes hslPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

/* live tech specs row (left side) */
.hero-specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;
  margin:1.6rem 0 1.8rem;max-width:560px;
}
.hs-cell{
  background:rgba(20,12,6,.6);
  border:1px solid rgba(77,163,255,.22);
  border-radius:10px;
  padding:.65rem .75rem;
  font-family:var(--font-mono);
  position:relative;overflow:hidden;
  transition:transform .25s, border-color .25s;
}
.hs-cell:hover{transform:translateY(-2px);border-color:rgba(77,163,255,.5);}
.hs-label{display:block;font-size:.6rem;color:rgba(153,194,255,.5);letter-spacing:.1em;text-transform:uppercase;}
.hs-value{display:block;margin-top:.2rem;font-size:1.1rem;color:#fff;font-weight:600;letter-spacing:-.01em;}
.hs-value i{font-style:normal;color:#4DA3FF;font-size:.6em;font-weight:400;margin-left:.05em;}
.hs-spark{
  display:flex;align-items:flex-end;gap:2px;
  height:14px;margin-top:.45rem;
}
.hs-spark span{
  flex:1;background:linear-gradient(180deg,#99C2FF 0%,#007BFF 100%);
  border-radius:1px;height:var(--h);min-height:2px;
  animation:hsSpark 2.4s ease-in-out infinite;
}
.hs-spark span:nth-child(2){animation-delay:.15s}
.hs-spark span:nth-child(3){animation-delay:.3s}
.hs-spark span:nth-child(4){animation-delay:.45s}
.hs-spark span:nth-child(5){animation-delay:.6s}
.hs-spark span:nth-child(6){animation-delay:.75s}
.hs-spark span:nth-child(7){animation-delay:.9s}
@keyframes hsSpark{0%,100%{opacity:.55;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1.1)}}

/* dashboard right side â€” multi-panel grid */
.hero-tech .hero-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto;
  gap:.9rem;
  position:relative;
  z-index:2;
}
.hd-panel{
  background:linear-gradient(180deg, rgba(20,14,8,.92), rgba(14,9,5,.92));
  border:1px solid rgba(77,163,255,.22);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(0,123,255,.04) inset;
  position:relative;
  transition:transform .35s, border-color .35s;
}
.hd-panel:hover{transform:translateY(-3px);border-color:rgba(77,163,255,.5);}
.hd-feed{grid-column:1 / -1;}
.hd-metrics{grid-column:1;}
.hd-arch{grid-column:2;}
.hd-mini{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}

/* engagement feed panel */
.hd-feed-body{padding:.8rem 1rem;display:flex;flex-direction:column;gap:.55rem;}
.hd-feed-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:.85rem;
  padding:.55rem .75rem;
  background:rgba(8,5,3,.55);
  border:1px solid rgba(77,163,255,.14);
  border-radius:8px;
  font-family:var(--font-mono);
  opacity:0;transform:translateX(-8px);
  animation:hdFeedIn .6s ease-out forwards;
  transition:border-color .25s, transform .25s, background .25s;
}
.hd-feed-row:hover{
  border-color:rgba(77,163,255,.4);
  transform:translateX(2px);
  background:rgba(20,12,6,.7);
}
.hd-fr-1{animation-delay:.15s}
.hd-fr-2{animation-delay:.3s}
.hd-fr-3{animation-delay:.45s}
.hd-fr-4{animation-delay:.6s}
@keyframes hdFeedIn{to{opacity:1;transform:translateX(0)}}
.hd-fr-tag{
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:4px;font-weight:600;
  white-space:nowrap;
}
.hd-tag-ship{background:rgba(91,229,132,.15);color:#5BE584;border:1px solid rgba(91,229,132,.4);}
.hd-tag-live{background:rgba(0,123,255,.15);color:#4DA3FF;border:1px solid rgba(0,123,255,.4);}
.hd-tag-live::before{content:"";color:#007BFF;animation:hslPulse 1.6s ease-in-out infinite;}
.hd-tag-audit{background:rgba(153,194,255,.12);color:#99C2FF;border:1px solid rgba(153,194,255,.35);}
.hd-tag-rd{background:rgba(180,140,255,.12);color:#D7B5FF;border:1px solid rgba(180,140,255,.35);}
.hd-fr-title{font-size:.78rem;color:#fff;font-weight:500;letter-spacing:-.005em;}
.hd-fr-meta{font-size:.66rem;color:rgba(153,194,255,.6);text-align:right;letter-spacing:.02em;}
.hd-fr-meta i{font-style:normal;color:#4DA3FF;font-weight:600;}

/* panel header bar */
.hd-bar{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.55rem .9rem;
  background:rgba(8,5,3,.7);
  border-bottom:1px solid rgba(77,163,255,.18);
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.06em;color:rgba(153,194,255,.6);
}
.hd-bar-tab{flex:1;text-align:center;}
.hd-bar-status{display:inline-flex;align-items:center;gap:.35rem;color:#4DA3FF;font-weight:500;}
.hd-bar-ok{color:#5BE584;}
.hd-bar-status .dot{width:6px;height:6px;border-radius:50%;background:#5BE584;box-shadow:0 0 7px #5BE584;animation:hslPulse 1.6s ease-in-out infinite;}
.hd-body{padding:1rem 1.1rem;font-family:var(--font-mono);font-size:.74rem;line-height:1.7;color:rgba(255,255,255,.92);}

/* terminal panel â€” inherits term-* from existing CSS */
.hd-terminal .hd-body{padding:1rem 1.1rem 1.1rem;}

/* metrics chart panel */
.hd-metrics .hd-body{display:flex;flex-direction:column;gap:.6rem;}
.hd-metric-top{display:flex;align-items:baseline;justify-content:space-between;}
.hd-metric-v{font-family:var(--font-sans);font-size:1.6rem;font-weight:600;color:#fff;letter-spacing:-.02em;}
.hd-metric-v i{font-style:normal;color:#4DA3FF;font-size:.6em;font-weight:400;margin-left:.1em;}
.hd-metric-delta{font-family:var(--font-mono);font-size:.7rem;color:#5BE584;}
.hd-chart{
  display:flex;align-items:flex-end;gap:3px;
  height:64px;padding:.3rem 0;
  border-bottom:1px dashed rgba(77,163,255,.18);
}
.hd-chart span{
  flex:1;height:var(--h);
  background:linear-gradient(180deg, #99C2FF 0%, #007BFF 100%);
  border-radius:2px 2px 0 0;
  animation:hdBar 3s ease-in-out infinite;
  box-shadow:0 0 8px rgba(0,123,255,.3);
}
.hd-chart span:nth-child(odd){animation-delay:.2s}
.hd-chart span:nth-child(3n){animation-delay:.4s}
@keyframes hdBar{0%,100%{transform:scaleY(.92);opacity:.85}50%{transform:scaleY(1.08);opacity:1}}
.hd-chart-axis{
  display:flex;justify-content:space-between;
  font-size:.6rem;color:rgba(153,194,255,.5);letter-spacing:.06em;
  margin-top:.15rem;
}

/* architecture/circuit panel */
.hd-arch-body{padding:.4rem;}
.hd-circuit{width:100%;height:140px;display:block;}
.hd-circuit text{letter-spacing:.06em;}

/* status mini-tiles */
.hd-tile{
  background:linear-gradient(180deg, rgba(20,14,8,.88), rgba(14,9,5,.92));
  border:1px solid rgba(77,163,255,.22);
  border-radius:12px;
  padding:.85rem 1rem;
  font-family:var(--font-mono);
  display:flex;flex-direction:column;gap:.3rem;
  position:relative;overflow:hidden;
  transition:transform .35s, border-color .35s;
}
.hd-tile:hover{transform:translateY(-2px);border-color:rgba(77,163,255,.5);}
.hd-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#007BFF,transparent);
  opacity:.5;
}
.hd-tile-l{font-size:.63rem;color:rgba(153,194,255,.5);letter-spacing:.1em;text-transform:uppercase;}
.hd-tile-v{font-family:var(--font-sans);font-size:1.7rem;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1;}
.hd-tile-v sup{color:#4DA3FF;font-size:.55em;font-weight:400;}
.hd-ok{color:#5BE584;}
.hd-tile-foot{display:flex;align-items:center;gap:.4rem;font-size:.66rem;color:rgba(255,255,255,.92);}
.hd-tile-foot .dot{width:5px;height:5px;border-radius:50%;background:#5BE584;box-shadow:0 0 6px #5BE584;animation:hslPulse 1.6s ease-in-out infinite;}

/* floating service chips orbiting the dashboard */
.hd-float{
  position:absolute;z-index:5;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .75rem;
  background:rgba(20,12,6,.85);
  border:1px solid rgba(77,163,255,.4);
  border-radius:999px;
  font-family:var(--font-mono);font-size:.7rem;
  color:#99C2FF;letter-spacing:.04em;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 14px rgba(0,123,255,.15);
  animation:hdFloat 6s ease-in-out infinite;
  pointer-events:none;
  white-space:nowrap;
}
.hd-float .hf-arrow{color:#007BFF;font-weight:700;}
.hf-1{top:-22px;left:6%;animation-delay:0s;}
.hf-2{top:32%;right:-26px;animation-delay:1.4s;}
.hf-3{bottom:34%;left:-34px;animation-delay:2.6s;}
.hf-4{bottom:-18px;right:18%;animation-delay:3.8s;}
.hf-5{top:64%;left:38%;animation-delay:5s;}
@keyframes hdFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(.5deg)}
}

/* responsive â€” collapse dashboard on mobile */
@media (max-width:980px){
  .hero-tech .hero-right{grid-template-columns:1fr;}
  .hd-feed,.hd-metrics,.hd-arch{grid-column:1 / -1;}
  .hd-mini{grid-template-columns:1fr 1fr;}
  .hd-float{display:none;}
  .hero-specs{grid-template-columns:repeat(2,1fr);}
  .hd-feed-row{grid-template-columns:auto 1fr;}
  .hd-fr-meta{grid-column:2;text-align:left;}
}
@media (max-width:520px){
  .hero-specs{grid-template-columns:1fr 1fr;gap:.45rem;}
  .hs-value{font-size:.95rem;}
  .hd-mini{grid-template-columns:1fr;}
  .hero-status-line{font-size:.6rem;flex-wrap:wrap;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-particles span,.hsl-status .dot,.hs-spark span,.hd-bar-status .dot,
  .hd-chart span,.hd-tile-foot .dot,.hd-float{animation:none !important;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   HERO â€” EDITORIAL STUDIO SHOWCASE
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
#hero.hero-edit{
  position:relative;
  min-height:100vh;
  padding:8rem 5vw 5rem;
  display:flex;align-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, rgba(0,123,255,.08) 0%, transparent 50%),
             radial-gradient(ellipse at 80% 60%, rgba(77,163,255,.06) 0%, transparent 50%),
             #0A0A0A;
}
.hero-edit-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 70% 35%, rgba(0,123,255,.18) 0%, transparent 35%),
    radial-gradient(circle at 30% 70%, rgba(153,194,255,.08) 0%, transparent 40%);
  filter:blur(40px);
}
.hero-edit-rings{position:absolute;top:0;right:0;width:60%;height:100%;z-index:1;pointer-events:none;overflow:hidden;}
.her-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(77,163,255,.1);
  opacity:.6;
}
.her-ring-1{width:680px;height:680px;top:8%;right:-12%;border-color:rgba(0,123,255,.15);animation:heRingDrift 30s linear infinite;}
.her-ring-2{width:480px;height:480px;top:14%;right:-2%;border-color:rgba(153,194,255,.12);border-style:dashed;animation:heRingDrift 24s linear infinite reverse;}
.her-ring-3{width:280px;height:280px;top:30%;right:8%;border-color:rgba(77,163,255,.18);animation:heRingDrift 18s linear infinite;}
@keyframes heRingDrift{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.he-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.05fr;gap:5rem;
  max-width:1320px;width:100%;margin:0 auto;align-items:center;
}

/* â”€â”€â”€ LEFT â€” editorial copy â”€â”€â”€ */
.he-left{display:flex;flex-direction:column;}
.he-meta{
  display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:.78rem;color:rgba(255,255,255,.92);letter-spacing:.04em;
  margin-bottom:1.6rem;
  opacity:0;animation:heFadeUp .8s .1s forwards;
}
.he-meta-mark{color:#4DA3FF;font-size:1.05rem;}
.he-meta-sep{width:18px;height:1px;background:rgba(77,163,255,.35);}
.he-meta-status{
  display:inline-flex;align-items:center;gap:.45rem;
  color:#99C2FF;padding:.3rem .65rem;
  background:rgba(0,123,255,.08);
  border:1px solid rgba(77,163,255,.25);
  border-radius:999px;
}
.he-status-dot{width:6px;height:6px;border-radius:50%;background:#5BE584;box-shadow:0 0 8px #5BE584;animation:hePulse 1.6s ease-in-out infinite;}
@keyframes hePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

.he-title{
  font-family:var(--font-sans, Inter), 'Inter', sans-serif;
  font-size:clamp(2.6rem, 4.8vw, 4.4rem);
  font-weight:300;
  line-height:1.05;letter-spacing:-.025em;
  color:#fff;margin:0 0 1.8rem;
}
.he-title .he-line{display:block;opacity:0;transform:translateY(28px);animation:heTitleIn .9s cubic-bezier(.2,.8,.2,1) forwards;}
.he-title .he-line:nth-child(1){animation-delay:.2s}
.he-title .he-line:nth-child(2){animation-delay:.32s}
.he-title .he-line:nth-child(3){animation-delay:.44s}
.he-title .he-line:nth-child(4){animation-delay:.56s}
.he-title em{font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#99C2FF;}
.he-line-em{
  font-family:'Inter', sans-serif;
  font-style:italic;font-weight:400;
  color:#4DA3FF;
  font-size:1.08em;
}
.he-line-grad{
  background:linear-gradient(135deg, #007BFF 0%, #4DA3FF 50%, #99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes heTitleIn{to{opacity:1;transform:translateY(0)}}

.he-lede{
  font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.92);
  max-width:540px;margin:0 0 2.2rem;font-weight:300;
  opacity:0;animation:heFadeUp .8s .7s forwards;
}
@keyframes heFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.he-btns{
  display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.6rem;
  opacity:0;animation:heFadeUp .8s .85s forwards;
}

/* trust numbers strip */
.he-trust{
  display:flex;align-items:flex-start;gap:2.4rem;
  padding:1.4rem 0;margin-bottom:1.8rem;
  border-top:1px solid rgba(77,163,255,.18);
  border-bottom:1px solid rgba(77,163,255,.18);
  opacity:0;animation:heFadeUp .8s 1s forwards;
}
.he-trust-num{display:flex;flex-direction:column;gap:.25rem;}
.he-trust-v{
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:1.85rem;font-weight:500;color:#fff;letter-spacing:-.025em;line-height:1;
}
.he-trust-v sup{
  background:linear-gradient(180deg,#4DA3FF,#007BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:.5em;font-weight:400;margin-left:.04em;
}
.he-trust-l{font-size:.72rem;color:rgba(255,255,255,.92);letter-spacing:.04em;}

/* practice marquee */
.he-marquee{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:.78rem;color:rgba(255,255,255,.92);
  opacity:0;animation:heFadeUp .8s 1.15s forwards;
  overflow:hidden;
}
.he-marq-l{
  flex-shrink:0;color:#4DA3FF;letter-spacing:.06em;
  font-weight:500;
}
.he-marq-track{
  display:flex;align-items:center;gap:.8rem;
  animation:heMarq 28s linear infinite;
  white-space:nowrap;
}
.he-marq-track .he-dot{color:#4DA3FF;opacity:.6;}
@keyframes heMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* â”€â”€â”€ RIGHT â€” cinematic collage â”€â”€â”€ */
.he-right{
  position:relative;
  height:580px;
  display:block;
}
.he-img{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,123,255,.08);
  opacity:0;
  animation:heImgIn 1.1s cubic-bezier(.2,.8,.2,1) .3s forwards;
}
@keyframes heImgIn{0%{opacity:0;transform:translateY(30px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.he-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s ease;
  filter:saturate(.9) brightness(.85) sepia(.08);
}
.he-img:hover img{transform:scale(1.06);}
.he-img-main{
  width:78%;height:100%;
  top:0;right:0;
  z-index:2;
}
.he-img-main::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(0,123,255,.08) 0%, transparent 50%, rgba(0,0,0,.45) 100%);
  z-index:1;pointer-events:none;
}
.he-img-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 30% 30%, transparent 0%, rgba(10,10,10,.4) 70%);
}
.he-img-accent{
  width:42%;height:46%;
  top:8%;left:0;
  z-index:3;
  border:2px solid #0A0A0A;
  animation-delay:.5s;
}

/* glass cards floating over imagery */
.he-card{
  position:absolute;z-index:5;
  background:rgba(20,12,6,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(77,163,255,.3);
  border-radius:14px;
  box-shadow:0 25px 55px rgba(0,0,0,.5), 0 0 25px rgba(0,123,255,.1);
  padding:1.1rem 1.25rem;
  font-family:var(--font-sans, Inter), sans-serif;
  opacity:0;animation:heCardIn .9s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .35s, border-color .35s;
}
.he-card:hover{transform:translateY(-3px);border-color:rgba(77,163,255,.6);}
@keyframes heCardIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

.he-card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;}
.he-card-pulse{width:8px;height:8px;border-radius:50%;background:#5BE584;box-shadow:0 0 10px #5BE584;animation:hePulse 1.6s ease-in-out infinite;}
.he-card-eyebrow{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#4DA3FF;font-weight:600;}
.he-card-body{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.65rem;}
.he-card-num{
  font-size:2.3rem;font-weight:500;color:#fff;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,#fff,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.he-card-title{font-size:.85rem;color:rgba(255,255,255,.92);}
.he-card-foot{display:flex;align-items:center;gap:.4rem;border-top:1px solid rgba(77,163,255,.18);padding-top:.65rem;}
.he-avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono, monospace);font-size:.66rem;
  color:#0A0A0A;font-weight:600;
  border:2px solid rgba(20,12,6,.92);margin-left:-8px;
}
.he-avatar:first-of-type{margin-left:0;}
.he-card-foot-l{font-size:.7rem;color:rgba(255,255,255,.92);margin-left:.45rem;}

.he-card-engagements{
  top:6%;right:-4%;width:230px;
  animation-delay:1s;
}

/* feature ship card */
.he-card-feature{
  bottom:8%;left:-6%;width:300px;
  animation-delay:1.2s;
}
.he-feature-t{
  font-family:var(--font-sans, Inter), serif;
  font-size:1.35rem;font-weight:400;color:#fff;letter-spacing:-.02em;
  margin:.4rem 0 .4rem;line-height:1.15;
}
.he-feature-t em{font-family:'Inter', sans-serif;font-style:italic;color:#99C2FF;}
.he-feature-d{
  font-size:.78rem;color:rgba(255,255,255,.92);line-height:1.5;
  margin:0 0 .9rem;
}
.he-feature-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
  padding-top:.8rem;border-top:1px solid rgba(77,163,255,.18);
}
.he-feature-stats div{display:flex;flex-direction:column;gap:.15rem;}
.he-feature-stats strong{
  font-size:1.5rem;font-weight:500;color:#4DA3FF;letter-spacing:-.02em;line-height:1;
}
.he-feature-stats sup{font-size:.55em;color:#99C2FF;font-weight:400;margin-left:.04em;}
.he-feature-stats span{font-size:.65rem;color:rgba(255,255,255,.92);letter-spacing:.04em;}

/* tagline floating chip */
.he-card-tag{
  top:38%;right:42%;width:auto;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.65rem 1rem;
  background:rgba(20,12,6,.92);
  border:1px solid rgba(77,163,255,.4);
  border-radius:999px;
  animation-delay:1.4s;
}
.he-tag-mark{color:#4DA3FF;font-size:1rem;}
.he-tag-text{
  font-family:'Inter', sans-serif;
  font-style:italic;font-size:.95rem;color:#99C2FF;
  white-space:nowrap;
}

/* decorative orbital */
.he-decor-orbit{
  position:absolute;
  top:-8%;right:-10%;
  width:160px;height:160px;
  border:2px dashed rgba(0,123,255,.25);
  border-radius:50%;
  z-index:1;
  animation:heRingDrift 22s linear infinite;
}
.he-decor-orbit::before{content:"";
  position:absolute;top:-6px;left:50%;
  width:12px;height:12px;border-radius:50%;
  background:#007BFF;box-shadow:0 0 16px #007BFF, 0 0 30px rgba(0,123,255,.5);
  transform:translateX(-50%);
}

/* responsive */
@media (max-width:1100px){
  .he-inner{grid-template-columns:1fr;gap:3rem;}
  .he-right{height:480px;max-width:600px;margin:0 auto;width:100%;}
  .he-trust{gap:1.4rem;}
}
@media (max-width:760px){
  #hero.hero-edit{padding:7rem 5vw 4rem;}
  .he-title{font-size:clamp(2rem,9vw,2.8rem);}
  .he-right{height:380px;}
  .he-img-accent{display:none;}
  .he-card-engagements{width:180px;right:-2%;}
  .he-card-feature{width:240px;left:-2%;}
  .he-feature-t{font-size:1.1rem;}
  .he-card-tag{display:none;}
  .he-trust{flex-wrap:wrap;gap:1.2rem 2rem;}
  .he-trust-v{font-size:1.5rem;}
}
@media (max-width:520px){
  .he-meta{font-size:.7rem;gap:.5rem;}
  .he-meta-sep{width:12px;}
  .he-img-main{width:100%;}
  .he-card-engagements{top:auto;bottom:8%;right:auto;left:50%;transform:translateX(-50%);width:80%;}
  .he-card-feature{display:none;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .her-ring,.he-decor-orbit,.he-marq-track,.he-status-dot,.he-card-pulse,
  .he-title .he-line,.he-meta,.he-lede,.he-btns,.he-trust,.he-marquee,
  .he-img,.he-card{animation:none !important;opacity:1;transform:none;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   HERO â€” TECHNICAL DIVISION SHOWCASE
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
#hero.hero-tdiv{
  position:relative;
  min-height:100vh;
  padding:11rem 5vw 5rem;       /* extra top padding clears the floating nav (~130px tall + 17px gap) */
  display:flex;align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,123,255,.12) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 90%, rgba(77,163,255,.08) 0%, transparent 45%),
    #0A0A0A;
}

/* backdrop fx */
.htd-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,123,255,.16) 0%, transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(153,194,255,.06) 0%, transparent 40%);
  filter:blur(50px);
}
.htd-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,123,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,123,255,.06) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  opacity:.5;
}
.htd-particles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.htd-particles span{
  position:absolute;left:var(--x);top:var(--y);
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#99C2FF 0%,#007BFF 60%,transparent 100%);
  box-shadow:0 0 12px #007BFF;
  animation:htdFloat var(--d) ease-in-out infinite;
  animation-delay:var(--del);
  opacity:.5;
}
@keyframes htdFloat{
  0%,100%{transform:translate3d(0,0,0) scale(.7);opacity:.3}
  50%{transform:translate3d(18px,-22px,0) scale(1.1);opacity:.85}
}

/* layout */
.htd-inner{
  position:relative;z-index:2;
  max-width:1280px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:4rem;
}

/* â”€â”€â”€ HEADER â”€â”€â”€ */
.htd-head{text-align:center;max-width:840px;margin:0 auto;}
.htd-meta{
  display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:.78rem;color:rgba(255,255,255,.92);letter-spacing:.04em;
  margin-bottom:1.4rem;
  opacity:0;animation:htdFadeUp .8s .1s forwards;
}
.htd-meta-mark{color:#4DA3FF;font-size:1.05rem;}
.htd-meta-sep{width:18px;height:1px;background:rgba(77,163,255,.35);}
.htd-meta-status{
  display:inline-flex;align-items:center;gap:.45rem;
  color:#99C2FF;padding:.3rem .65rem;
  background:rgba(0,123,255,.08);
  border:1px solid rgba(77,163,255,.25);
  border-radius:999px;
}
.htd-status-dot{width:6px;height:6px;border-radius:50%;background:#5BE584;box-shadow:0 0 8px #5BE584;animation:htdPulse 1.6s ease-in-out infinite;}
@keyframes htdPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes htdFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.htd-title{
  font-family:var(--font-sans, Inter), 'Inter', sans-serif;
  font-size:clamp(2.6rem, 5.4vw, 4.8rem);
  font-weight:300;line-height:1.04;letter-spacing:-.025em;
  color:#fff;margin:0 0 1.4rem;
}
.htd-title .htd-line{display:block;opacity:0;transform:translateY(24px);animation:htdTitleIn .9s cubic-bezier(.2,.8,.2,1) forwards;}
.htd-title .htd-line:nth-child(1){animation-delay:.2s}
.htd-title .htd-line:nth-child(2){animation-delay:.34s}
.htd-line-em{
  font-family:'Inter', sans-serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(135deg, #007BFF 0%, #4DA3FF 50%, #99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes htdTitleIn{to{opacity:1;transform:translateY(0)}}

.htd-lede{
  font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.92);
  max-width:680px;margin:0 auto 2rem;font-weight:300;
  opacity:0;animation:htdFadeUp .8s .55s forwards;
}
.htd-lede strong{color:#99C2FF;font-weight:500;}

.htd-btns{
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.4rem;
  opacity:0;animation:htdFadeUp .8s .7s forwards;
}

.htd-trust{
  display:flex;justify-content:center;gap:2.6rem;flex-wrap:wrap;
  padding-top:1.6rem;
  border-top:1px solid rgba(77,163,255,.18);
  opacity:0;animation:htdFadeUp .8s .85s forwards;
}
.htd-trust > div{display:flex;flex-direction:column;align-items:center;gap:.2rem;}
.htd-trust-v{
  font-size:1.7rem;font-weight:500;color:#fff;letter-spacing:-.03em;line-height:1;
}
.htd-trust-v sup{
  background:linear-gradient(180deg,#4DA3FF,#007BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:.55em;font-weight:400;
}
.htd-trust-l{font-size:.7rem;color:rgba(255,255,255,.92);letter-spacing:.06em;text-transform:uppercase;}

/* â”€â”€â”€ SHOWCASE â”€â”€â”€ */
.htd-showcase{position:relative;display:flex;flex-direction:column;align-items:center;}

/* anchor badge â€” Technical */
.htd-anchor{position:relative;z-index:3;margin-bottom:1rem;}
.htd-anchor-card{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:1.1rem 2.4rem 1.2rem;
  background:linear-gradient(180deg, rgba(0,123,255,.18), rgba(20,12,6,.95));
  border:1px solid rgba(77,163,255,.5);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(0,123,255,.18);
  backdrop-filter:blur(12px);
  opacity:0;transform:translateY(-12px);
  animation:htdAnchorIn 1s 1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes htdAnchorIn{to{opacity:1;transform:translateY(0)}}
.htd-anchor-tag{
  font-family:var(--font-mono, monospace);
  font-size:.65rem;color:#4DA3FF;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.htd-anchor-name{
  font-family:var(--font-sans, Inter), sans-serif;
  font-style:italic;font-size:2.1rem;font-weight:400;line-height:1;
  color:#fff;letter-spacing:-.02em;margin:.15rem 0;
  background:linear-gradient(135deg, #fff 0%, #99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.htd-anchor-sub{
  font-size:.78rem;color:rgba(153,194,255,.7);letter-spacing:.04em;
}
.htd-anchor-glow{
  position:absolute;inset:-2px;border-radius:inherit;
  background:linear-gradient(135deg, rgba(0,123,255,.4), transparent 40%, transparent 60%, rgba(153,194,255,.4));
  z-index:-1;filter:blur(8px);opacity:.55;
}

/* connecting SVG */
.htd-connect{
  width:100%;max-width:880px;height:80px;
  margin:0 auto;display:block;
  opacity:0;animation:htdFadeUp .8s 1.2s forwards;
}
.htd-conn-trunk,.htd-conn-left,.htd-conn-right{
  filter:drop-shadow(0 0 4px rgba(0,123,255,.6));
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:htdConnDraw 1s 1.4s ease-out forwards;
}
.htd-conn-left{animation-delay:1.6s}
.htd-conn-right{animation-delay:1.6s}
@keyframes htdConnDraw{to{stroke-dashoffset:0}}

/* TWO COLUMNS */
.htd-cols{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:1.4rem;
  width:100%;max-width:1180px;margin:0 auto;
  position:relative;z-index:2;
}

.htd-col{
  position:relative;
  background:linear-gradient(180deg, rgba(20,14,8,.85), rgba(14,9,5,.9));
  border:1px solid rgba(77,163,255,.22);
  border-radius:18px;
  padding:1.6rem 1.6rem 1.4rem;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,123,255,.04) inset;
  display:flex;flex-direction:column;gap:1.2rem;
  opacity:0;transform:translateY(20px);
  animation:htdColIn .9s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.htd-col-research{animation-delay:1.8s;}
.htd-col-development{animation-delay:1.95s;}
@keyframes htdColIn{to{opacity:1;transform:translateY(0)}}
.htd-col:hover{
  transform:translateY(-4px);
  border-color:rgba(77,163,255,.55);
  box-shadow:0 36px 90px rgba(0,0,0,.6), 0 0 50px rgba(0,123,255,.18);
}

/* gradient border accent */
.htd-col::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, rgba(0,123,255,.5), transparent 35%, transparent 65%, rgba(153,194,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;pointer-events:none;
  transition:opacity .3s;
}
.htd-col:hover::before{opacity:1;}

/* col header */
.htd-col-head{display:flex;flex-direction:column;gap:.5rem;}
.htd-col-num-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.htd-col-num{
  font-family:var(--font-mono, monospace);
  font-size:.85rem;color:#4DA3FF;letter-spacing:.1em;
  padding:.2rem .55rem;
  background:rgba(0,123,255,.1);
  border:1px solid rgba(0,123,255,.4);
  border-radius:6px;font-weight:600;
}
.htd-col-cap-pill{
  font-family:var(--font-mono, monospace);
  font-size:.66rem;color:rgba(153,194,255,.7);letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .65rem;
  background:rgba(20,12,6,.6);
  border:1px solid rgba(77,163,255,.25);
  border-radius:999px;
}
.htd-col-name{
  font-family:var(--font-sans, Inter), sans-serif;
  font-style:italic;font-size:2.4rem;font-weight:400;line-height:1;
  color:#fff;letter-spacing:-.02em;margin:0;
  background:linear-gradient(180deg, #fff 0%, #99C2FF 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.htd-col-tag{
  font-size:.85rem;color:rgba(255,255,255,.92);line-height:1.5;
  margin:.3rem 0 0;font-weight:300;
}

/* capabilities list */
.htd-caps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr;gap:.5rem;
}
.htd-caps-2col{grid-template-columns:1fr 1fr;column-gap:1.4rem;}
.htd-caps li{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.55rem .7rem;
  background:rgba(8,5,3,.4);
  border:1px solid rgba(77,163,255,.1);
  border-radius:8px;
  font-size:.84rem;color:rgba(255,255,255,.92);line-height:1.45;
  font-family:var(--font-sans, Inter), sans-serif;font-weight:400;
  transition:all .25s ease;
  opacity:0;transform:translateX(-8px);
  animation:htdCapIn .5s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(2s + var(--i) * 0.06s);
}
@keyframes htdCapIn{to{opacity:1;transform:translateX(0)}}
.htd-caps li:hover{
  background:rgba(0,123,255,.08);
  border-color:rgba(77,163,255,.4);
  color:#fff;transform:translateX(3px);
}
.htd-cap-arrow{
  color:#007BFF;font-weight:700;font-size:.95em;
  flex-shrink:0;transition:transform .25s;
}
.htd-caps li:hover .htd-cap-arrow{
  transform:translateX(2px);color:#99C2FF;
}

/* col CTA */
.htd-col-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1rem;margin-top:auto;
  background:linear-gradient(90deg, rgba(0,123,255,.14), rgba(0,123,255,.04));
  border:1px solid rgba(77,163,255,.3);
  border-radius:10px;
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:.85rem;color:#99C2FF;font-weight:500;
  text-decoration:none;
  transition:all .3s;
}
.htd-col-cta:hover{
  background:linear-gradient(90deg, rgba(0,123,255,.32), rgba(0,123,255,.1));
  color:#fff;
  border-color:rgba(77,163,255,.6);
  padding-left:1.3rem;
}
.htd-col-cta-arrow{font-size:1rem;transition:transform .3s;}
.htd-col-cta:hover .htd-col-cta-arrow{transform:translate(4px,-4px);}

/* responsive */
@media (max-width:980px){
  .htd-cols{grid-template-columns:1fr;}
  .htd-caps-2col{grid-template-columns:1fr 1fr;}
  .htd-connect{height:60px;}
  .htd-trust{gap:1.5rem;}
}
@media (max-width:680px){
  #hero.hero-tdiv{padding:8.5rem 5vw 4rem;}
  .htd-title{font-size:clamp(2rem, 9vw, 2.8rem);}
  .htd-anchor-name{font-size:1.6rem;}
  .htd-col{padding:1.2rem;}
  .htd-col-name{font-size:1.9rem;}
  .htd-caps-2col{grid-template-columns:1fr;}
  .htd-trust{gap:1.2rem 2rem;}
  .htd-trust-v{font-size:1.4rem;}
  .htd-meta{font-size:.7rem;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .htd-particles span,.htd-status-dot,.htd-title .htd-line,.htd-meta,
  .htd-lede,.htd-btns,.htd-trust,.htd-anchor-card,.htd-connect,
  .htd-col,.htd-caps li,.htd-conn-trunk,.htd-conn-left,.htd-conn-right{
    animation:none !important;opacity:1;transform:none !important;
  }
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   MANUFACTURING HERO â€” cinematic video + dynamic gradients + 3D shapes
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

#hero.hero-mfg{
  position:relative;
  min-height:100vh;
  padding:11rem 5vw 5rem;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
}

/* â€” video backdrop â€” */
.hmf-video{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hmf-video video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) brightness(.55) contrast(1.1) hue-rotate(-12deg);
}
.hmf-video-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,.85) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(0,123,255,.25) 0%, transparent 60%);
}
/* dynamic conic-gradient orb that drifts behind content */
.hmf-grad{
  position:absolute;width:140%;height:140%;top:-20%;left:-20%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(0,123,255,.15) 0%,
    rgba(77,163,255,.08) 25%,
    transparent 50%,
    rgba(153,194,255,.1) 75%,
    rgba(0,123,255,.15) 100%);
  filter:blur(80px);
  animation:hmfGradSpin 26s linear infinite;
  mix-blend-mode:screen;
  opacity:.7;
}
.hmf-grad-2{
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 70%, rgba(0,123,255,.18) 0%, transparent 35%),
             radial-gradient(circle at 70% 30%, rgba(153,194,255,.1) 0%, transparent 40%);
  animation:hmfGrad2Drift 18s ease-in-out infinite alternate;
}
@keyframes hmfGradSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hmfGrad2Drift{
  0%{transform:translate(0,0)}
  100%{transform:translate(40px,-30px)}
}

/* â€” floating 3D shapes â€” */
.hmf-shapes{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hmf-shape{
  position:absolute;
  perspective:600px;transform-style:preserve-3d;
  opacity:.6;mix-blend-mode:screen;
}

/* 3D cube */
.hmf-cube{
  width:80px;height:80px;
  top:18%;right:8%;
  transform-style:preserve-3d;
  animation:hmfCubeRot 14s linear infinite;
}
.hmf-cube .cf{
  position:absolute;width:80px;height:80px;
  border:1.5px solid rgba(77,163,255,.55);
  background:rgba(0,123,255,.06);
}
.hmf-cube .cf-front{transform:translateZ(40px);}
.hmf-cube .cf-back{transform:rotateY(180deg) translateZ(40px);}
.hmf-cube .cf-left{transform:rotateY(-90deg) translateZ(40px);}
.hmf-cube .cf-right{transform:rotateY(90deg) translateZ(40px);}
.hmf-cube .cf-top{transform:rotateX(90deg) translateZ(40px);}
.hmf-cube .cf-bot{transform:rotateX(-90deg) translateZ(40px);}
@keyframes hmfCubeRot{
  from{transform:rotateX(0) rotateY(0)}
  to{transform:rotateX(360deg) rotateY(360deg)}
}

/* 3D gear */
.hmf-gear{
  width:90px;height:90px;
  top:62%;left:6%;
  animation:hmfGearSpin 16s linear infinite, hmfFloat 8s ease-in-out infinite alternate;
}
.hmf-gear svg{width:100%;height:100%;}
@keyframes hmfGearSpin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes hmfFloat{0%{translate:0 0}100%{translate:0 -16px}}

/* 3D ring */
.hmf-ring{
  width:120px;height:120px;
  top:24%;left:7%;
  border:2px dashed rgba(153,194,255,.4);border-radius:50%;
  animation:hmfRingDrift 22s linear infinite;
}
.hmf-ring::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:#007BFF;box-shadow:0 0 16px #007BFF;
}
@keyframes hmfRingDrift{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 3D pyramid */
.hmf-pyramid{
  width:80px;height:80px;
  bottom:18%;right:14%;
  transform-style:preserve-3d;
  animation:hmfPyramidRot 12s linear infinite;
}
.hmf-pyramid .pf{
  position:absolute;width:0;height:0;
  border-left:40px solid transparent;
  border-right:40px solid transparent;
  border-bottom:70px solid rgba(0,123,255,.12);
  filter:drop-shadow(0 0 4px rgba(0,123,255,.4));
  transform-origin:center bottom;
}
.hmf-pyramid .pf-front{transform:rotateY(0deg) translateZ(28px);}
.hmf-pyramid .pf-right{transform:rotateY(90deg) translateZ(28px);}
.hmf-pyramid .pf-back{transform:rotateY(180deg) translateZ(28px);}
.hmf-pyramid .pf-left{transform:rotateY(270deg) translateZ(28px);}
@keyframes hmfPyramidRot{from{transform:rotateY(0) rotateX(20deg)}to{transform:rotateY(360deg) rotateX(20deg)}}

/* â€” content â€” */
.hmf-inner{
  position:relative;z-index:2;
  max-width:1200px;width:100%;margin:0 auto;
  text-align:center;
}
.hmf-meta{
  display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:.78rem;color:rgba(255,255,255,.78);letter-spacing:.04em;
  margin-bottom:1.5rem;
  padding:.45rem 1rem;
  background:rgba(20,12,6,.55);
  border:1px solid rgba(77,163,255,.25);
  border-radius:999px;
  backdrop-filter:blur(10px);
  opacity:0;animation:hmfFadeUp .9s .15s forwards;
}
.hmf-mark{color:#4DA3FF;font-size:1rem;}
.hmf-meta-sep{width:18px;height:1px;background:rgba(77,163,255,.4);}
.hmf-meta-status{
  display:inline-flex;align-items:center;gap:.4rem;color:#5BE584;font-weight:600;
}
.hmf-status-dot{
  width:7px;height:7px;border-radius:50%;background:#5BE584;
  box-shadow:0 0 10px #5BE584;animation:hmfPulse 1.6s ease-in-out infinite;
}
@keyframes hmfPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes hmfFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.hmf-title{
  font-family:var(--font-sans, Inter), serif;
  font-size:clamp(2.8rem, 6vw, 5.4rem);
  font-weight:300;line-height:1.02;letter-spacing:-.03em;
  color:#fff;margin:0 0 1.4rem;
}
.hmf-title .hmf-line{
  display:block;
  opacity:0;transform:translateY(28px);
  animation:hmfTitleIn 1s cubic-bezier(.2,.8,.2,1) forwards;
}
.hmf-title .hmf-line:nth-child(1){animation-delay:.3s}
.hmf-title .hmf-line:nth-child(2){animation-delay:.45s}
.hmf-line-em{
  font-family:'Inter', sans-serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(135deg, #007BFF 0%, #4DA3FF 50%, #99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes hmfTitleIn{to{opacity:1;transform:translateY(0)}}

.hmf-lede{
  font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.92);
  max-width:740px;margin:0 auto 2.4rem;font-weight:300;
  opacity:0;animation:hmfFadeUp .9s .7s forwards;
}
.hmf-lede strong{color:#99C2FF;font-weight:500;}

.hmf-btns{
  display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-bottom:3.6rem;
  opacity:0;animation:hmfFadeUp .9s .85s forwards;
}

/* â€” animated counter stats â€” */
.hmf-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);gap:1.4rem;
  max-width:980px;margin:0 auto;
  padding:1.6rem 1.4rem;
  background:rgba(10,8,4,.6);
  border:1px solid rgba(77,163,255,.22);
  border-radius:16px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 30px rgba(0,123,255,.1);
  opacity:0;animation:hmfFadeUp .9s 1s forwards;
}
.hmf-stat{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  position:relative;
}
.hmf-stat:not(:last-child)::after{content:"";position:absolute;right:-.7rem;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(77,163,255,.3) 50%, transparent 100%);
}
.hmf-stat-v{
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:clamp(2rem, 3.2vw, 2.8rem);font-weight:500;
  background:linear-gradient(180deg, #fff 0%, #99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.025em;line-height:1;
}
.hmf-stat-l{
  font-size:.78rem;color:rgba(255,255,255,.7);letter-spacing:.04em;
  text-align:center;line-height:1.4;
}

/* scroll indicator */
.hmf-scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-mono,monospace);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(153,194,255,.7);text-decoration:none;
  z-index:3;
  animation:hmfScrollBounce 2s ease-in-out infinite;
}
.hmf-scroll-arrow{
  width:1px;height:30px;background:linear-gradient(180deg, #4DA3FF 0%, transparent 100%);
}
@keyframes hmfScrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* responsive hero */
@media (max-width:780px){
  #hero.hero-mfg{padding:9rem 5vw 4rem;}
  .hmf-stats{grid-template-columns:repeat(2,1fr);gap:1rem;padding:1.2rem;}
  .hmf-stat:not(:last-child)::after{display:none;}
  .hmf-stat:nth-child(2)::after{display:none;}
  .hmf-shapes{opacity:.4;}
  .hmf-cube,.hmf-pyramid,.hmf-ring{display:none;}
  .hmf-title{font-size:clamp(2rem, 9vw, 2.8rem);}
  .hmf-meta{font-size:.7rem;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   3D SERVICES SHOWCASE â€” manufacturing capabilities
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.srv3d{
  position:relative;
  padding:7rem 5vw;
  overflow:hidden;
  background:linear-gradient(180deg, #0A0A0A 0%, #0F0805 50%, #0A0A0A 100%);
  isolation:isolate;
}

/* dynamic mesh + gradient orbs */
.srv3d-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.srv3d-mesh{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,123,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,123,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.srv3d-grad-orb{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;
}
.srv3d-go-1{
  width:600px;height:600px;
  top:10%;left:-15%;
  background:radial-gradient(circle, #007BFF 0%, transparent 70%);
  animation:srv3dOrb 18s ease-in-out infinite alternate;
}
.srv3d-go-2{
  width:500px;height:500px;
  bottom:0;right:-10%;
  background:radial-gradient(circle, #4DA3FF 0%, transparent 70%);
  animation:srv3dOrb 22s ease-in-out infinite alternate-reverse;
}
@keyframes srv3dOrb{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(60px,-40px) scale(1.15)}
}

.srv3d .container{position:relative;z-index:2;max-width:1280px;}

/* header */
.srv3d-head{text-align:center;max-width:760px;margin:0 auto 4rem;}
.srv3d-head .eyebrow{justify-content:center;margin-bottom:1.2rem;}
.srv3d-head .eb-mark{color:#4DA3FF;margin-right:.4rem;}
.srv3d-head .s-title{margin-bottom:1.2rem;}
.srv3d-head .s-title em{
  font-family:'Inter', sans-serif;font-style:italic;
  background:linear-gradient(135deg, #007BFF, #99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.srv3d-head p{color:rgba(255,255,255,.92);font-size:1.02rem;line-height:1.7;}

/* grid */
.srv3d-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
  margin-bottom:3rem;
}
@media (max-width:1100px){.srv3d-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.srv3d-grid{grid-template-columns:1fr;}}

/* service card */
.s3{
  position:relative;
  background:linear-gradient(180deg, rgba(20,14,8,.85), rgba(14,9,5,.92));
  border:1px solid rgba(77,163,255,.18);
  border-radius:14px;
  padding:1.4rem;
  display:flex;flex-direction:column;gap:1.2rem;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
  cursor:default;
}
.s3:hover{
  transform:translateY(-6px);
  border-color:rgba(77,163,255,.55);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(0,123,255,.18);
}
.s3::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(0,123,255,.08) 0%, transparent 50%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.s3:hover::before{opacity:1;}

/* 3D animation stage */
.s3-3d{
  position:relative;
  height:140px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 80%, rgba(0,123,255,.08) 0%, transparent 60%);
  border-radius:10px;
  perspective:600px;
  transform-style:preserve-3d;
  overflow:hidden;
}

.s3-meta{display:flex;flex-direction:column;gap:.45rem;}
.s3-num{
  font-family:var(--font-mono,monospace);font-size:.7rem;
  color:#4DA3FF;letter-spacing:.16em;font-weight:600;
}
.s3-meta h3{
  font-family:var(--font-sans, Inter),sans-serif;
  font-size:1.15rem;color:#fff;font-weight:500;line-height:1.2;letter-spacing:-.01em;
  margin:0;
}
.s3-meta p{
  font-size:.8rem;color:rgba(255,255,255,.92);line-height:1.55;margin:0;font-weight:300;
}

/* â”€â”€ 3D PRINTER (Prototyping) â”€â”€ */
.s3-prototype{position:relative;}
.s3p-printer{
  position:absolute;top:14%;left:50%;transform:translateX(-50%);
  width:90px;height:6px;background:linear-gradient(90deg, #555, #333);
  border-radius:2px;
}
.s3p-rail{
  position:absolute;top:20%;left:50%;transform:translateX(-50%);
  width:90px;height:1px;background:rgba(77,163,255,.4);
}
.s3p-head{
  position:absolute;top:18%;left:50%;
  width:14px;height:14px;
  background:linear-gradient(180deg, #007BFF, #4DA3FF);
  border-radius:2px;
  animation:s3pHead 3s ease-in-out infinite;
  box-shadow:0 0 10px rgba(0,123,255,.6);
}
.s3p-laser{
  position:absolute;top:30%;left:50%;
  width:1px;height:30px;
  background:linear-gradient(180deg, #99C2FF, transparent);
  animation:s3pHead 3s ease-in-out infinite;
  filter:drop-shadow(0 0 4px #007BFF);
}
.s3p-part{
  position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
  width:50px;height:36px;
  background:linear-gradient(180deg, rgba(77,163,255,.4), rgba(0,123,255,.6));
  border:1px solid rgba(153,194,255,.6);
  clip-path:polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  animation:s3pPartGrow 3s ease-in-out infinite;
}
@keyframes s3pHead{
  0%,100%{transform:translateX(-30px)}
  50%{transform:translateX(30px)}
}
@keyframes s3pPartGrow{
  0%{height:6px;opacity:.4}
  100%{height:36px;opacity:1}
}

/* â”€â”€ 3D CUBE (Simulation) â”€â”€ */
.s3-sim{transform-style:preserve-3d;}
.s3-cube{
  width:80px;height:80px;
  position:relative;transform-style:preserve-3d;
  animation:s3CubeRot 8s linear infinite;
}
.s3-cube .cf{
  position:absolute;width:80px;height:80px;
  border:1.5px solid rgba(77,163,255,.7);
  background:rgba(0,123,255,.08);
}
.s3-cube .cf-front{transform:translateZ(40px);}
.s3-cube .cf-back{transform:rotateY(180deg) translateZ(40px);}
.s3-cube .cf-left{transform:rotateY(-90deg) translateZ(40px);}
.s3-cube .cf-right{transform:rotateY(90deg) translateZ(40px);}
.s3-cube .cf-top{transform:rotateX(90deg) translateZ(40px);background:rgba(0,123,255,.18);}
.s3-cube .cf-bot{transform:rotateX(-90deg) translateZ(40px);}
@keyframes s3CubeRot{
  from{transform:rotateX(-20deg) rotateY(0)}
  to{transform:rotateX(-20deg) rotateY(360deg)}
}
.s3-orbit-dot{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:#99C2FF;box-shadow:0 0 12px #007BFF;
  top:50%;left:50%;
  animation:s3Orbit 4s linear infinite;
}
@keyframes s3Orbit{
  from{transform:translate(-50%,-50%) rotate(0) translateX(60px) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(60px) rotate(-360deg)}
}

/* â”€â”€ GEARS (Engineering Design) â”€â”€ */
.s3-gears{position:relative;}
.s3g-svg{width:120px;height:120px;}
.s3g-big{transform-origin:center;animation:s3gSpin 8s linear infinite;}
.s3g-small{transform-origin:60px -60px;animation:s3gSpinR 5s linear infinite;}
@keyframes s3gSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes s3gSpinR{from{transform:translate(60px,-60px) rotate(0)}to{transform:translate(60px,-60px) rotate(-360deg)}}

/* â”€â”€ CONVEYOR (Production Planning) â”€â”€ */
.s3-conveyor{position:relative;}
.s3c-base{
  position:absolute;bottom:18%;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg, transparent, rgba(77,163,255,.5), transparent);
}
.s3c-belt{
  position:absolute;bottom:25%;left:15%;right:15%;height:6px;
  background:linear-gradient(180deg, #444, #222);
  border-radius:3px;
  overflow:hidden;
}
.s3c-track{
  position:absolute;top:50%;left:0;right:0;height:1px;
  background-image:linear-gradient(90deg, #4DA3FF 50%, transparent 50%);
  background-size:8px 1px;
  animation:s3cTrack 1s linear infinite;
}
@keyframes s3cTrack{from{background-position:0 0}to{background-position:8px 0}}
.s3c-roll{position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg, #555, #222);bottom:21%;}
.s3c-r1{left:13%;}
.s3c-r2{right:13%;}
.s3c-box{
  position:absolute;width:18px;height:18px;
  background:linear-gradient(135deg, #4DA3FF, #007BFF);
  border:1px solid rgba(153,194,255,.6);
  border-radius:2px;
  bottom:35%;
  animation:s3cBoxMove 4s linear infinite;
  box-shadow:0 0 8px rgba(0,123,255,.4);
}
.s3c-b1{animation-delay:0s;}
.s3c-b2{animation-delay:-1.3s;}
.s3c-b3{animation-delay:-2.6s;}
@keyframes s3cBoxMove{
  0%{left:13%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{left:83%;opacity:0}
}

/* â”€â”€ FLOW (Process Optimisation) â”€â”€ */
.s3-flow{position:relative;}
.s3f-svg{width:100%;height:100%;}

/* â”€â”€ NETWORK (Supply Chain) â”€â”€ */
.s3-network{position:relative;}
.s3n-svg{width:100%;height:100%;}

/* â”€â”€ SHIELD (Quality) â”€â”€ */
.s3-shield{position:relative;}
.s3sh-svg{height:110px;width:auto;animation:s3ShFloat 4s ease-in-out infinite;}
@keyframes s3ShFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* â”€â”€ ATOM (Lifecycle) â”€â”€ */
.s3-atom{position:relative;width:120px;height:120px;}
.s3a-nucleus{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle, #99C2FF, #007BFF);
  box-shadow:0 0 16px #007BFF;
  animation:s3aPulse 1.5s ease-in-out infinite;
}
@keyframes s3aPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.3)}}
.s3a-orbit{
  position:absolute;top:50%;left:50%;
  border:1px solid rgba(77,163,255,.5);
  border-radius:50%;
}
.s3a-orbit::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;
  background:#99C2FF;box-shadow:0 0 8px #007BFF;transform:translateX(-50%);
}
.s3a-o1{
  width:60px;height:60px;margin:-30px 0 0 -30px;
  animation:s3aOrbit 3s linear infinite;
}
.s3a-o2{
  width:90px;height:90px;margin:-45px 0 0 -45px;
  transform:rotateX(60deg);
  animation:s3aOrbit2 4s linear infinite;
}
.s3a-o3{
  width:110px;height:110px;margin:-55px 0 0 -55px;
  transform:rotateY(60deg);
  animation:s3aOrbit3 5s linear infinite;
}
@keyframes s3aOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes s3aOrbit2{from{transform:rotateX(60deg) rotate(0)}to{transform:rotateX(60deg) rotate(360deg)}}
@keyframes s3aOrbit3{from{transform:rotateY(60deg) rotate(0)}to{transform:rotateY(60deg) rotate(360deg)}}

/* footer of services */
.srv3d-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.6rem 2rem;
  background:rgba(20,12,6,.6);
  border:1px solid rgba(77,163,255,.22);
  border-radius:14px;
  backdrop-filter:blur(10px);
}
.srv3d-foot-l{display:flex;align-items:center;gap:1rem;font-family:var(--font-mono,monospace);font-size:.85rem;color:rgba(255,255,255,.92);}
.srv3d-foot-tag{
  font-size:.75rem;color:#0A0A0A;background:#4DA3FF;
  padding:.3rem .65rem;border-radius:6px;font-weight:700;letter-spacing:.05em;
}

/* reveal animation for 3d cards */
.s3.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s, transform .8s;}
.s3.reveal.in,.s3.reveal.up{opacity:1;transform:translateY(0);}
.s3.reveal:nth-child(1){transition-delay:.05s}
.s3.reveal:nth-child(2){transition-delay:.12s}
.s3.reveal:nth-child(3){transition-delay:.19s}
.s3.reveal:nth-child(4){transition-delay:.26s}
.s3.reveal:nth-child(5){transition-delay:.33s}
.s3.reveal:nth-child(6){transition-delay:.4s}
.s3.reveal:nth-child(7){transition-delay:.47s}
.s3.reveal:nth-child(8){transition-delay:.54s}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .hmf-grad,.hmf-grad-2,.hmf-cube,.hmf-gear,.hmf-ring,.hmf-pyramid,
  .hmf-status-dot,.hmf-scroll,.srv3d-grad-orb,
  .s3p-head,.s3p-laser,.s3p-part,.s3-cube,.s3-orbit-dot,
  .s3g-big,.s3g-small,.s3c-track,.s3c-box,.s3sh-svg,
  .s3a-nucleus,.s3a-o1,.s3a-o2,.s3a-o3{animation:none !important;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   NEURA NOVA INSPIRED LIGHT THEME â€” Manufacturing edition
   Activated by body.nn-theme. Overrides dark theme on home page.
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

body.nn-theme{
  background:#FAFAF8;
  color:#1A1A1A;
}

.nn-theme{
  --nn-bg:#F5F2EC;             /* warm cream â€” calmer than white */
  --nn-bg-2:#EAE6DD;
  --nn-bg-3:#FFFFFF;
  --nn-ink:#0A0A0A;
  --nn-ink-2:#3A3A3A;
  --nn-ink-3:#6E6E6E;
  --nn-line:rgba(10,10,10,.08);
  --nn-line-2:rgba(10,10,10,.14);
  --nn-orange:#007BFF;
  --nn-orange-2:#FF8B3D;
  --nn-amber:#4DA3FF;
  --nn-gold:#99C2FF;
  --nn-grad:linear-gradient(135deg, #007BFF 0%, #4DA3FF 50%, #99C2FF 100%);
}
body.nn-theme{background:#F5F2EC;}

/* nav override â€” light theme floating pill */
.nn-theme #nav,
.nn-theme nav{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(15,15,15,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06), 0 0 0 1px rgba(0,123,255,.04);
}
.nn-theme nav.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 36px rgba(0,0,0,.08);
}
.nn-theme .nav-links a{color:#3A3A3A;}
.nn-theme .nav-links a:hover,
.nn-theme .nav-links a.active-link{color:#0F0F0F;}
.nn-theme .nav-links a.active-link::before{background:#007BFF;}
.nn-theme .cta-nav{
  background:#0F0F0F;color:#FFFFFF !important;
  padding:.55rem 1.1rem;border-radius:999px;
  transition:background .3s, transform .3s;
}
.nn-theme .cta-nav:hover{background:#007BFF;transform:translateY(-1px);}
.nn-theme .hamburger span{background:#0F0F0F;}

/* logo on light bg â€” undo dark filter */
.nn-theme .logo img{
  filter:none;
}

/* mobile-nav for light theme */
.nn-theme .mobile-nav{background:#FFFFFF;}
.nn-theme .mobile-nav a{color:#0F0F0F;}

/* â”€â”€â”€ HERO â”€â”€â”€ */
.nn-hero{
  position:relative;
  padding:13rem 5vw 8rem;
  overflow:hidden;
  background:#F5F2EC;
  min-height:88vh;
  display:flex;align-items:center;
}
.nn-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,123,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 20%, rgba(77,163,255,.06) 0%, transparent 60%);
}
.nn-hero-grad{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 80% 20%, rgba(0,123,255,.12) 0%, transparent 35%),
             radial-gradient(circle at 20% 80%, rgba(153,194,255,.1) 0%, transparent 40%);
}
.nn-hero-orb{
  position:absolute;width:600px;height:600px;
  top:-200px;right:-200px;
  background:conic-gradient(from 0deg, #007BFF 0%, #4DA3FF 40%, #99C2FF 70%, #3D5AF1 100%);
  border-radius:50%;
  filter:blur(120px);opacity:.18;
  animation:nnOrbSpin 30s linear infinite;
  z-index:0;
}
@keyframes nnOrbSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.nn-hero-inner{
  position:relative;z-index:2;
  max-width:1240px;margin:0 auto;
  text-align:center;
}

.nn-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;
  background:#FFFFFF;
  border:1px solid var(--nn-line-2);
  border-radius:999px;
  font-size:.78rem;font-weight:500;color:#3A3A3A;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  margin-bottom:1.6rem;
  opacity:0;animation:nnFadeUp .8s .1s forwards;
}
.nn-pill-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  color:#fff;font-size:.65rem;font-weight:700;
}
.nn-pill-sep{width:1px;height:14px;background:var(--nn-line-2);}
@keyframes nnFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.nn-h1{
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:clamp(2.8rem, 7vw, 6.2rem);
  font-weight:500;line-height:1;letter-spacing:-.035em;
  color:#0A0A0A;margin:0 auto 1.6rem;max-width:1100px;
}
.nn-h1 .nn-em{
  font-family:'Inter', sans-serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(135deg, #007BFF 0%, #4DA3FF 50%, #99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-h1 .nn-line{
  display:inline-block;
  opacity:0;transform:translateY(24px);
  animation:nnTitleIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.nn-h1 .nn-line:nth-child(1){animation-delay:.2s}
.nn-h1 .nn-line:nth-child(2){animation-delay:.32s}
.nn-h1 .nn-line:nth-child(3){animation-delay:.44s}
@keyframes nnTitleIn{to{opacity:1;transform:translateY(0)}}

.nn-lede{
  font-size:1.15rem;line-height:1.6;color:#3A3A3A;
  max-width:680px;margin:0 auto 2.4rem;
  opacity:0;animation:nnFadeUp .8s .55s forwards;
}

.nn-btns{
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  margin-bottom:3rem;
  opacity:0;animation:nnFadeUp .8s .7s forwards;
}
.nn-btn-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;
  background:#0F0F0F;color:#FFFFFF;
  border-radius:999px;
  font-size:.95rem;font-weight:500;
  text-decoration:none;
  transition:all .3s;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.nn-btn-primary:hover{
  background:#007BFF;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,123,255,.35);
}
.nn-btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;
  background:#FFFFFF;color:#0F0F0F;
  border:1px solid var(--nn-line-2);
  border-radius:999px;
  font-size:.95rem;font-weight:500;
  text-decoration:none;
  transition:all .3s;
}
.nn-btn-secondary:hover{
  border-color:#007BFF;color:#007BFF;
  transform:translateY(-2px);
}

/* trust row â€” rating + client logos */
.nn-trust{
  display:flex;align-items:center;gap:2rem;justify-content:center;
  flex-wrap:wrap;
  padding-top:2.4rem;
  border-top:1px solid var(--nn-line);
  opacity:0;animation:nnFadeUp .8s .9s forwards;
}
.nn-rating{display:flex;align-items:center;gap:.8rem;}
.nn-stars{display:inline-flex;gap:2px;color:#4DA3FF;font-size:1rem;}
.nn-rating-text{font-size:.85rem;color:#3A3A3A;}
.nn-rating-text strong{color:#0F0F0F;font-weight:600;}
.nn-trust-logos{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  font-family:var(--font-sans, Inter),sans-serif;
  font-size:.85rem;font-weight:600;color:#6E6E6E;
}
.nn-trust-logos span{
  padding:.3rem .6rem;
  border-radius:6px;
  background:rgba(15,15,15,.04);
  letter-spacing:.04em;
}

/* hero dashboard mockup (cinematic) */
.nn-hero-mockup{
  margin:4rem auto 0;max-width:1100px;
  position:relative;
  opacity:0;animation:nnFadeUp 1s 1s forwards;
}
.nn-mockup-frame{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--nn-line);
  border-radius:18px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.12), 0 0 0 1px rgba(0,123,255,.04),
             0 0 60px rgba(0,123,255,.08);
  aspect-ratio:16/9;
}
.nn-mockup-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:30px;
  background:linear-gradient(180deg, #F4F2EE, #FAFAF8);
  border-bottom:1px solid var(--nn-line);
}
.nn-mockup-dots{
  position:absolute;top:10px;left:14px;display:flex;gap:6px;z-index:2;
}
.nn-mockup-dots span{width:10px;height:10px;border-radius:50%;background:#FFB7B7;}
.nn-mockup-dots span:nth-child(2){background:#FFE0A8;}
.nn-mockup-dots span:nth-child(3){background:#A8E0B8;}
.nn-mockup-content{
  position:absolute;top:30px;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:200px 1fr;gap:0;
}
.nn-mock-side{
  background:#FAFAF8;
  border-right:1px solid var(--nn-line);
  padding:1.4rem 1rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.nn-mock-side-l{font-size:.6rem;color:#6E6E6E;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;}
.nn-mock-side-item{
  padding:.55rem .7rem;
  background:#FFFFFF;
  border:1px solid var(--nn-line);
  border-radius:8px;
  font-size:.78rem;color:#3A3A3A;
  display:flex;align-items:center;gap:.5rem;
}
.nn-mock-side-item.active{
  background:#FFF4E8;border-color:#FFCC8B;color:#0F0F0F;font-weight:500;
}
.nn-mock-side-item-dot{width:8px;height:8px;border-radius:50%;background:#4DA3FF;}
.nn-mock-main{padding:1.4rem;display:flex;flex-direction:column;gap:1rem;}
.nn-mock-h{display:flex;justify-content:space-between;align-items:center;}
.nn-mock-h-t{font-size:1rem;font-weight:600;color:#0F0F0F;}
.nn-mock-h-pill{font-size:.6rem;color:#0F0F0F;background:#FFE4C4;padding:.2rem .55rem;border-radius:999px;font-weight:600;}
.nn-mock-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.nn-mock-stat{
  padding:.8rem;background:#FAFAF8;border:1px solid var(--nn-line);border-radius:8px;
}
.nn-mock-stat-l{font-size:.55rem;color:#6E6E6E;text-transform:uppercase;letter-spacing:.06em;}
.nn-mock-stat-v{font-size:1.05rem;font-weight:600;color:#0F0F0F;margin-top:.2rem;}
.nn-mock-stat-d{font-size:.55rem;color:#5BA866;margin-top:.1rem;}
.nn-mock-chart{
  flex:1;background:#FFFFFF;border:1px solid var(--nn-line);border-radius:8px;
  padding:.8rem;display:flex;align-items:flex-end;gap:3px;min-height:80px;
}
.nn-mock-chart span{
  flex:1;background:linear-gradient(180deg, #4DA3FF, #007BFF);border-radius:2px;
  animation:nnBar 2s ease-in-out infinite;
}
.nn-mock-chart span:nth-child(2n){animation-delay:.2s}
.nn-mock-chart span:nth-child(3n){animation-delay:.4s}
@keyframes nnBar{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1.05)}}

/* â”€â”€â”€ SECTIONS BASE â”€â”€â”€ */
.nn-section{padding:6rem 5vw;position:relative;}
.nn-section-alt{background:var(--nn-bg-2);}
.nn-section .container{max-width:1240px;margin:0 auto;}

.nn-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-sans, Inter),sans-serif;
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#6E6E6E;
  padding:0;margin-bottom:1.2rem;
  background:transparent;border-radius:0;
  position:relative;padding-left:1.4rem;
}
.nn-eyebrow::before{content:"";position:absolute;left:0;top:50%;
  width:1rem;height:1px;background:#007BFF;
}
.nn-h2{
  font-family:var(--font-sans, Inter), sans-serif;
  font-size:clamp(2.4rem, 4.6vw, 4rem);font-weight:500;line-height:1.05;
  letter-spacing:-.03em;color:#0A0A0A;margin:.6rem 0 1.4rem;
}
.nn-h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg, #007BFF, #99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-sub{font-size:1.05rem;line-height:1.7;color:#3A3A3A;max-width:680px;}
.nn-section-head{text-align:center;max-width:760px;margin:0 auto 4rem;}
.nn-section-head .nn-sub{margin:0 auto;}

/* â”€â”€â”€ FEATURES GRID â”€â”€â”€ */
.nn-features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
@media (max-width:900px){.nn-features-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.nn-features-grid{grid-template-columns:1fr;}}

.nn-feature{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--nn-line);
  border-radius:18px;
  padding:1.8rem;
  transition:all .35s;
  display:flex;flex-direction:column;gap:1rem;
  overflow:hidden;
}
.nn-feature:hover{
  transform:translateY(-4px);
  border-color:rgba(0,123,255,.25);
  box-shadow:0 30px 60px rgba(0,0,0,.08), 0 0 30px rgba(0,123,255,.08);
}
.nn-feature-icon{
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #FFEDD5 0%, #FFE4C4 100%);
  border-radius:14px;
  color:#007BFF;
}
.nn-feature-icon svg{width:26px;height:26px;}
.nn-feature h3{
  font-size:1.2rem;font-weight:600;color:#0F0F0F;letter-spacing:-.015em;margin:0;
}
.nn-feature p{font-size:.92rem;line-height:1.65;color:#3A3A3A;margin:0;}
.nn-feature-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:500;color:#007BFF;
  text-decoration:none;margin-top:auto;
  transition:gap .3s;
}
.nn-feature-link:hover{gap:.7rem;}

/* â”€â”€â”€ HOW IT WORKS â€” 3-step â”€â”€â”€ */
.nn-process{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  position:relative;
}
.nn-process::before{content:"";position:absolute;top:36px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg, transparent, var(--nn-line-2), transparent);
}
@media (max-width:780px){.nn-process{grid-template-columns:1fr;}.nn-process::before{display:none;}}

.nn-step{position:relative;text-align:center;padding:0 1rem;}
.nn-step-num{
  width:72px;height:72px;
  margin:0 auto 1.4rem;
  display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;
  border:1px solid var(--nn-line-2);
  border-radius:50%;
  font-family:'Inter', sans-serif;font-style:italic;font-size:1.7rem;
  color:#007BFF;font-weight:400;
  position:relative;z-index:2;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.nn-step h4{
  font-size:1.15rem;font-weight:600;color:#0F0F0F;letter-spacing:-.015em;
  margin:0 0 .55rem;
}
.nn-step p{font-size:.92rem;line-height:1.65;color:#3A3A3A;margin:0;}

/* â”€â”€â”€ WHY CHOOSE â€” 4 value props with image+text â”€â”€â”€ */
.nn-why{display:flex;flex-direction:column;gap:5rem;}
.nn-why-row{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.nn-why-row.reverse{direction:rtl;}
.nn-why-row.reverse > *{direction:ltr;}
@media (max-width:880px){.nn-why-row,.nn-why-row.reverse{grid-template-columns:1fr;direction:ltr;}}

.nn-why-content h3{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1.8rem;font-weight:600;letter-spacing:-.02em;color:#0F0F0F;
  margin:1rem 0 .9rem;line-height:1.2;
}
.nn-why-content p{font-size:1rem;line-height:1.7;color:#3A3A3A;margin:0 0 1.2rem;}
.nn-why-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;}
.nn-why-list li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.92rem;color:#3A3A3A;
}
.nn-why-list li::before { content: "";width:18px;height:18px;flex-shrink:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='12' fill='%23007BFF'/><path d='M7 12.5l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  margin-top:2px;
}
.nn-why-img{
  position:relative;
  border-radius:18px;overflow:hidden;
  aspect-ratio:5/4;
  background:linear-gradient(135deg, #FFEDD5 0%, #FFE4C4 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.08);
}
.nn-why-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s;}
.nn-why-row:hover .nn-why-img img{transform:scale(1.04);}

/* â”€â”€â”€ TESTIMONIALS â”€â”€â”€ */
.nn-testimonials{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
}
@media (max-width:900px){.nn-testimonials{grid-template-columns:1fr;}}
.nn-testimonial{
  background:#FFFFFF;
  border:1px solid var(--nn-line);
  border-radius:18px;
  padding:1.8rem;
  display:flex;flex-direction:column;gap:1.4rem;
  transition:all .35s;
}
.nn-testimonial:hover{transform:translateY(-3px);box-shadow:0 30px 60px rgba(0,0,0,.08);}
.nn-t-stars{display:flex;gap:2px;color:#4DA3FF;font-size:.95rem;}
.nn-t-quote{
  font-size:1rem;line-height:1.7;color:#1A1A1A;flex:1;
  font-weight:400;margin:0;
}
.nn-t-author{display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--nn-line);padding-top:1.1rem;}
.nn-t-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:1rem;flex-shrink:0;
}
.nn-t-name{font-size:.92rem;font-weight:600;color:#0F0F0F;}
.nn-t-role{font-size:.78rem;color:#6E6E6E;}

/* â”€â”€â”€ PRICING â”€â”€â”€ */
.nn-pricing-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#FFFFFF;border:1px solid var(--nn-line);
  border-radius:999px;padding:.3rem;
  margin:1rem auto 3rem;
}
.nn-pricing-toggle button{
  padding:.55rem 1.2rem;border:none;background:transparent;
  font-size:.85rem;font-weight:500;color:#3A3A3A;
  border-radius:999px;cursor:pointer;transition:all .3s;
  font-family:inherit;
}
.nn-pricing-toggle button.active{background:#0F0F0F;color:#fff;}
.nn-pricing-save{
  font-size:.65rem;background:#FFE4C4;color:#007BFF;
  padding:.15rem .45rem;border-radius:999px;font-weight:600;margin-left:.4rem;
}

.nn-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media (max-width:900px){.nn-pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto;}}

.nn-price{
  background:#FFFFFF;
  border:1px solid var(--nn-line);
  border-radius:18px;
  padding:2rem;
  display:flex;flex-direction:column;gap:1.4rem;
  transition:all .35s;
  position:relative;
}
.nn-price:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.08);}
.nn-price-featured{
  background:linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
  color:#FFFFFF;
  border-color:transparent;
  transform:scale(1.04);
  box-shadow:0 30px 70px rgba(0,0,0,.2);
}
.nn-price-featured:hover{transform:scale(1.04) translateY(-4px);}
.nn-price-featured-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:.3rem .8rem;
  background:linear-gradient(135deg, #007BFF, #4DA3FF);
  color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:600;letter-spacing:.04em;
}
.nn-price-name{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6E6E6E;font-weight:600;
}
.nn-price-featured .nn-price-name{color:#99C2FF;}
.nn-price-amount{display:flex;align-items:baseline;gap:.3rem;}
.nn-price-v{font-size:2.6rem;font-weight:600;letter-spacing:-.03em;color:#0F0F0F;line-height:1;}
.nn-price-featured .nn-price-v{color:#fff;}
.nn-price-period{font-size:.85rem;color:#6E6E6E;}
.nn-price-featured .nn-price-period{color:rgba(255,255,255,.7);}
.nn-price-desc{font-size:.9rem;line-height:1.55;color:#3A3A3A;}
.nn-price-featured .nn-price-desc{color:rgba(255,255,255,.8);}
.nn-price-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.nn-price-list li{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:.88rem;color:#3A3A3A;line-height:1.5;
}
.nn-price-featured .nn-price-list li{color:rgba(255,255,255,.85);}
.nn-price-list li::before { content: "";flex-shrink:0;width:16px;height:16px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  margin-top:2px;
}
.nn-price-cta{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.85rem 1.4rem;
  background:#FFFFFF;color:#0F0F0F;
  border:1px solid var(--nn-line-2);
  border-radius:999px;
  font-size:.9rem;font-weight:500;text-decoration:none;
  transition:all .3s;
}
.nn-price-cta:hover{background:#0F0F0F;color:#fff;border-color:#0F0F0F;}
.nn-price-featured .nn-price-cta{background:linear-gradient(135deg,#007BFF,#4DA3FF);color:#fff;border-color:transparent;}
.nn-price-featured .nn-price-cta:hover{background:#fff;color:#0F0F0F;}

/* â”€â”€â”€ INTEGRATIONS â”€â”€â”€ */
.nn-integrations{
  display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center;
}
@media (max-width:880px){.nn-integrations{grid-template-columns:1fr;}}
.nn-int-stat{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.2rem;}
.nn-int-stat-v{
  font-size:3.4rem;font-weight:600;letter-spacing:-.03em;color:#0F0F0F;line-height:1;
}
.nn-int-stat-l{font-size:.9rem;color:#6E6E6E;letter-spacing:.04em;}
.nn-int-cloud{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;
}
.nn-int-tile{
  aspect-ratio:1;
  background:#FFFFFF;
  border:1px solid var(--nn-line);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:600;color:#3A3A3A;
  text-align:center;padding:.8rem;
  transition:all .35s;
  cursor:default;
}
.nn-int-tile:hover{
  border-color:#007BFF;color:#007BFF;transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.nn-int-tile.featured{
  background:linear-gradient(135deg,#007BFF,#4DA3FF);color:#fff;border-color:transparent;
  font-size:1.6rem;font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
}

/* â”€â”€â”€ NEWSLETTER â”€â”€â”€ */
.nn-newsletter{
  background:linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%);
  border-radius:24px;
  padding:4rem 2rem;
  text-align:center;
  position:relative;overflow:hidden;
}
.nn-newsletter::before{content:"";position:absolute;top:-50%;right:-20%;width:600px;height:600px;
  background:radial-gradient(circle, rgba(0,123,255,.4) 0%, transparent 60%);
  pointer-events:none;
}
.nn-newsletter::after{content:"";position:absolute;bottom:-50%;left:-20%;width:500px;height:500px;
  background:radial-gradient(circle, rgba(153,194,255,.2) 0%, transparent 60%);
  pointer-events:none;
}
.nn-newsletter > *{position:relative;z-index:1;}
.nn-newsletter h3{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;color:#fff;
  letter-spacing:-.02em;margin:1rem 0 .8rem;
}
.nn-newsletter h3 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#4DA3FF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-newsletter p{color:rgba(255,255,255,.75);font-size:1rem;line-height:1.6;max-width:560px;margin:0 auto 2rem;}
.nn-newsletter .nn-eyebrow{background:rgba(0,123,255,.15);}
.nn-news-form{
  display:flex;gap:.5rem;max-width:480px;margin:0 auto;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:.4rem;
  backdrop-filter:blur(10px);
}
.nn-news-form input{
  flex:1;background:transparent;border:none;outline:none;
  padding:.6rem 1rem;color:#fff;font-size:.9rem;font-family:inherit;
}
.nn-news-form input::placeholder{color:rgba(255,255,255,.5);}
.nn-news-form button{
  padding:.65rem 1.4rem;
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  color:#fff;border:none;border-radius:999px;
  font-size:.9rem;font-weight:500;cursor:pointer;
  font-family:inherit;
  transition:transform .3s,box-shadow .3s;
}
.nn-news-form button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,123,255,.4);}

/* â”€â”€â”€ FAQ â”€â”€â”€ */
.nn-faq{display:flex;flex-direction:column;gap:.8rem;max-width:780px;margin:0 auto;}
.nn-faq-item{
  background:#FFFFFF;border:1px solid var(--nn-line);
  border-radius:14px;overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
.nn-faq-item.open{border-color:rgba(0,123,255,.3);box-shadow:0 10px 30px rgba(0,0,0,.06);}
.nn-faq-q{
  width:100%;padding:1.3rem 1.5rem;background:none;border:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  cursor:pointer;text-align:left;font-family:inherit;
  font-size:1rem;font-weight:500;color:#0F0F0F;letter-spacing:-.01em;
}
.nn-faq-icon{
  width:28px;height:28px;border-radius:50%;
  background:#FAFAF8;border:1px solid var(--nn-line-2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#0F0F0F;flex-shrink:0;
  transition:transform .3s, background .3s, color .3s;
}
.nn-faq-item.open .nn-faq-icon{
  background:#007BFF;color:#fff;border-color:#007BFF;
  transform:rotate(45deg);
}
.nn-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease;
  padding:0 1.5rem;
}
.nn-faq-item.open .nn-faq-a{
  max-height:300px;padding:0 1.5rem 1.3rem;
}
.nn-faq-a p{font-size:.92rem;line-height:1.7;color:#3A3A3A;margin:0;}

/* â”€â”€â”€ BLOG / INSIGHTS â”€â”€â”€ */
.nn-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media (max-width:900px){.nn-blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.nn-blog-grid{grid-template-columns:1fr;}}

.nn-blog-card{
  background:#FFFFFF;border:1px solid var(--nn-line);
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .35s;text-decoration:none;
}
.nn-blog-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px rgba(0,0,0,.08);}
.nn-blog-img{aspect-ratio:16/10;overflow:hidden;background:#F4F2EE;}
.nn-blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s;}
.nn-blog-card:hover .nn-blog-img img{transform:scale(1.05);}
.nn-blog-body{padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.nn-blog-meta{display:flex;align-items:center;gap:.6rem;font-size:.74rem;color:#6E6E6E;}
.nn-blog-cat{
  padding:.2rem .55rem;background:#FFF4E8;color:#007BFF;border-radius:999px;font-weight:600;
}
.nn-blog-card h4{
  font-size:1.05rem;font-weight:600;color:#0F0F0F;letter-spacing:-.015em;
  line-height:1.3;margin:0;
}
.nn-blog-card p{font-size:.88rem;color:#3A3A3A;line-height:1.55;margin:0;flex:1;}
.nn-blog-link{font-size:.85rem;font-weight:500;color:#007BFF;display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;}

/* â”€â”€â”€ FINAL CTA â”€â”€â”€ */
.nn-cta-section{
  text-align:center;
  padding:6rem 5vw;
}
.nn-cta-card{
  position:relative;overflow:hidden;
  max-width:1100px;margin:0 auto;
  background:linear-gradient(135deg,#0F0F0F 0%,#1A1A1A 100%);
  border-radius:28px;
  padding:5rem 3rem;
  color:#fff;
}
.nn-cta-card::before{content:"";position:absolute;top:-30%;left:-10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,123,255,.45) 0%, transparent 60%);
  filter:blur(30px);
}
.nn-cta-card::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(153,194,255,.25) 0%, transparent 60%);
  filter:blur(30px);
}
.nn-cta-card > *{position:relative;z-index:1;}
.nn-cta-card h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:600;
  color:#fff;letter-spacing:-.025em;line-height:1.1;
  margin:1rem 0 1rem;
}
.nn-cta-card h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-cta-card p{color:rgba(255,255,255,.75);font-size:1.08rem;max-width:540px;margin:0 auto 2.2rem;line-height:1.65;}
.nn-cta-card .nn-eyebrow{background:rgba(0,123,255,.15);}
.nn-cta-card .nn-btn-primary{background:linear-gradient(135deg,#007BFF,#4DA3FF);}
.nn-cta-card .nn-btn-primary:hover{background:#fff;color:#0F0F0F;}
.nn-cta-card .nn-btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.15);}
.nn-cta-card .nn-btn-secondary:hover{background:#fff;color:#0F0F0F;border-color:#fff;}

/* â”€â”€â”€ FOOTER (LIGHT) â”€â”€â”€ */
.nn-theme footer{
  background:#0F0F0F;color:rgba(255,255,255,.7);
  padding:5rem 5vw 2rem;border-top:none;
}
.nn-theme footer::before{display:none;}
.nn-theme .footer-top{border-color:rgba(255,255,255,.1);}
.nn-theme .footer-bottom{border-color:rgba(255,255,255,.1);}
.nn-theme .f-desc{color:rgba(255,255,255,.6);}
.nn-theme .f-col h6{color:#fff;}
.nn-theme .f-col a{color:rgba(255,255,255,.65);}
.nn-theme .f-col a:hover{color:#4DA3FF;}
.nn-theme .f-copy{color:rgba(255,255,255,.5);}
.nn-theme .f-legal a{color:rgba(255,255,255,.55);}
.nn-theme .f-legal a:hover{color:#4DA3FF;}
.nn-theme .f-logo img{filter:invert(1) hue-rotate(180deg) saturate(1.6) brightness(1.1);}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   CONSULTING STUDIO STYLE â€” clean light, italic accents, generous space
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â€” section: intro + stat blocks â€” */
.cw-intro{padding:7rem 5vw;}
.cw-intro-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;align-items:end;
  max-width:1240px;margin:0 auto;
}
@media (max-width:880px){.cw-intro-grid{grid-template-columns:1fr;gap:2.4rem;}}
.cw-intro-text h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2rem,3.6vw,3rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  color:#0F0F0F;margin:1rem 0 1.2rem;
}
.cw-intro-text h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  color:#007BFF;
}
.cw-intro-text p{font-size:1.05rem;line-height:1.65;color:#3A3A3A;font-weight:300;}

.cw-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;}
.cw-stat{
  padding:1.6rem 1.4rem;background:#fff;
  border:1px solid rgba(15,15,15,.08);border-radius:14px;
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform .35s, box-shadow .35s;
}
.cw-stat:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(0,0,0,.06);}
.cw-stat-v{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:3rem;font-weight:500;letter-spacing:-.035em;line-height:.95;color:#0A0A0A;
}
.cw-stat-v em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#007BFF;
  font-size:.85em;
}
.cw-stat-l{font-size:.85rem;color:#6E6E6E;line-height:1.4;}

/* â€” case studies (stacked) â€” */
.cw-cases{padding:8rem 5vw;background:#EAE6DD;}
.cw-cases-list{
  display:flex;flex-direction:column;gap:1.4rem;
  max-width:1240px;margin:3rem auto 0;
}
.cw-case{
  display:grid;grid-template-columns:.7fr 1fr 220px;gap:2rem;align-items:center;
  padding:1.6rem 2rem;
  background:#fff;
  border:1px solid rgba(15,15,15,.08);border-radius:18px;
  text-decoration:none;color:inherit;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
@media (max-width:880px){
  .cw-case{grid-template-columns:1fr;gap:.9rem;padding:1.4rem;}
}
.cw-case:hover{
  transform:translateY(-3px);border-color:rgba(0,123,255,.3);
  box-shadow:0 24px 50px rgba(0,0,0,.06);
}
.cw-case-cat{
  display:inline-block;
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#007BFF;background:rgba(0,123,255,.08);
  padding:.3rem .65rem;border-radius:999px;width:fit-content;
}
.cw-case h3{
  font-size:1.2rem;font-weight:500;letter-spacing:-.015em;line-height:1.3;
  margin:0;color:#0F0F0F;
}
.cw-case h3 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#007BFF;
}
.cw-case-result{
  display:flex;flex-direction:column;gap:.2rem;text-align:right;
}
.cw-case-result-v{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1.6rem;font-weight:600;letter-spacing:-.025em;color:#0F0F0F;line-height:1;
}
.cw-case-result-l{font-size:.78rem;color:#6E6E6E;}
@media (max-width:880px){.cw-case-result{text-align:left;}}

/* â€” mission/approach narrative â€” */
.cw-mission{padding:7rem 5vw;}
.cw-mission-inner{
  max-width:920px;margin:0 auto;text-align:center;
}
.cw-mission h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:500;line-height:1.3;letter-spacing:-.02em;
  color:#0F0F0F;margin:1rem 0;
}
.cw-mission h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#007BFF;
}

/* â€” trust logos strip â€” */
.cw-trust-strip{padding:5rem 5vw;background:#FAFAF8;border-y:1px solid rgba(15,15,15,.06);}
.cw-trust-l{
  text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6E6E;margin-bottom:2.2rem;font-weight:500;
}
.cw-trust-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;align-items:center;
  max-width:1100px;margin:0 auto;
}
@media (max-width:880px){.cw-trust-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem;}}
.cw-trust-item{
  text-align:center;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1rem;font-weight:700;letter-spacing:.06em;color:#9A9A9A;
  padding:.6rem;
  transition:color .3s;
}
.cw-trust-item:hover{color:#0F0F0F;}

/* â€” italic accent helper â€” */
.cw-em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#007BFF;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   CINEMATIC HOMEPAGE â€” dark theme, video hero, 3D imagery
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   MIXED LIGHT THEME â€” cream base + white cards + dark accent sections
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
body.cm-theme{background:#F5F2EC;color:#0A0A0A;cursor:auto;}
body.cm-theme #global3D,body.cm-theme #cur,body.cm-theme #cur-ring,body.cm-theme #page-transition{display:none !important;}
.cm-theme,.cm-theme body,.cm-theme a,.cm-theme button,.cm-theme input,.cm-theme textarea{cursor:auto !important;}
.cm-theme a,.cm-theme button,.cm-theme [data-mode],.cm-theme .cm-card,.cm-theme .cm-svc-card,.cm-theme .cm-cap-card{cursor:pointer !important;}
.cm-theme input,.cm-theme textarea{cursor:text !important;}
.cm-theme nav{
  background:rgba(255,253,248,.7);
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.cm-theme nav.scrolled{background:rgba(255,253,248,.94);}
.cm-theme .nav-links a{color:#3A3A3A;}
.cm-theme .nav-links a:hover,.cm-theme .nav-links a.active-link{color:#0A0A0A;}
.cm-theme .nav-links a.active-link::before{background:#007BFF;}
.cm-theme .cta-nav{background:#0F0F0F;color:#fff !important;padding:.55rem 1.1rem;border-radius:999px;}
.cm-theme .cta-nav:hover{background:#007BFF;}
.cm-theme .hamburger span{background:#0A0A0A;}
.cm-theme .logo img{filter:none;}

/* shared eyebrow */
.cm-eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#6E6E6E;padding:0;margin-bottom:1.4rem;
  position:relative;padding-left:1.4rem;
}
.cm-eyebrow::before{content:"";position:absolute;left:0;top:50%;width:1rem;height:1px;background:#007BFF;}

/* â”€â”€ HERO â”€â”€ */
.cm-hero{
  position:relative;min-height:90vh;
  padding:12rem 5vw 6rem;
  display:flex;align-items:center;
  overflow:hidden;background:#F5F2EC;
  isolation:isolate;
}
.cm-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cm-hero-bg img,.cm-hero-bg video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.7) brightness(.95) contrast(1.05);
  animation:cmKenBurns 24s ease-in-out infinite alternate;
}
@keyframes cmKenBurns{0%{transform:scale(1.02)}100%{transform:scale(1.1)}}
.cm-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(245,242,236,.55) 0%, rgba(245,242,236,.85) 60%, rgba(245,242,236,.96) 100%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,123,255,.1) 0%, transparent 70%);
}
.cm-hero-inner{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto;text-align:center;}
.cm-hero h1{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.8rem, 7vw, 6.4rem);
  font-weight:500;line-height:1;letter-spacing:-.035em;
  color:#0A0A0A;margin:0 auto 1.6rem;max-width:1100px;
}
.cm-hero h1 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF 0%,#4DA3FF 60%,#99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cm-hero h1 .cm-line{display:block;opacity:0;transform:translateY(28px);animation:cmLineIn 1s cubic-bezier(.2,.8,.2,1) forwards;}
.cm-hero h1 .cm-line:nth-child(1){animation-delay:.25s}
.cm-hero h1 .cm-line:nth-child(2){animation-delay:.4s}
@keyframes cmLineIn{to{opacity:1;transform:translateY(0)}}
.cm-hero-lede{
  font-size:1.15rem;line-height:1.65;color:#3A3A3A;font-weight:300;
  max-width:720px;margin:0 auto 2.4rem;
  opacity:0;animation:cmFadeUp 1s .6s forwards;
}
.cm-hero-lede strong{color:#007BFF;font-weight:500;}
.cm-hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;opacity:0;animation:cmFadeUp 1s .8s forwards;}
.cm-btn-fire{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem;
  background:#0F0F0F;color:#fff;
  border-radius:999px;font-weight:500;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:all .35s;
}
.cm-btn-fire:hover{background:#007BFF;transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,123,255,.4);}
.cm-btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem;
  background:#fff;color:#0F0F0F;
  border:1px solid rgba(15,15,15,.14);border-radius:999px;
  font-weight:500;text-decoration:none;
  transition:all .35s;
}
.cm-btn-ghost:hover{border-color:#007BFF;color:#007BFF;transform:translateY(-2px);}
@keyframes cmFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* hero divisions preview pills under buttons */
.cm-hero-divs{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem;
  opacity:0;animation:cmFadeUp 1s 1s forwards;
}
.cm-hero-div{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem 1.2rem;
  background:rgba(255,253,248,.7);
  border:1px solid rgba(15,15,15,.1);
  border-radius:999px;
  backdrop-filter:blur(8px);
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:.85rem;color:#0A0A0A;
}
.cm-hero-div-num{
  font-family:'Inter', sans-serif;font-style:italic;color:#007BFF;font-size:.9rem;
}
.cm-hero-div-sub{color:#6E6E6E;font-size:.78rem;}

/* sections base */
.cm-section{padding:7rem 5vw;position:relative;}
.cm-section .container{max-width:1240px;margin:0 auto;}
.cm-section-alt{background:#EAE6DD;}
.cm-section-white{background:#FFF;}
.cm-section-head{text-align:center;max-width:760px;margin:0 auto 4rem;}
.cm-section-head .cm-eyebrow{display:inline-flex;}
.cm-section h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:500;line-height:1.05;letter-spacing:-.03em;
  color:#0A0A0A;margin:.4rem 0 1.2rem;
}
.cm-section h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cm-section .lede{font-size:1.05rem;line-height:1.7;color:#3A3A3A;font-weight:300;max-width:680px;margin:0 auto;}

/* â”€â”€ DIVISIONS â€” two side-by-side parent cards â”€â”€ */
.cm-divisions{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
}
@media (max-width:880px){.cm-divisions{grid-template-columns:1fr;}}
.cm-div-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  border-radius:20px;
  padding:2.2rem;
  display:flex;flex-direction:column;gap:1.4rem;
  overflow:hidden;
  transition:transform .4s, box-shadow .4s;
}
.cm-div-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px rgba(0,0,0,.06);}
.cm-div-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#007BFF,#4DA3FF,#99C2FF);
}
.cm-div-head{display:flex;align-items:center;justify-content:space-between;}
.cm-div-num{
  font-family:'Inter', sans-serif;font-style:italic;
  font-size:1.1rem;color:#007BFF;font-weight:400;
}
.cm-div-pill{
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:#0F0F0F;background:#FFE4C4;
  padding:.3rem .7rem;border-radius:999px;font-weight:600;
}
.cm-div-card h3{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:2.4rem;font-weight:500;letter-spacing:-.025em;line-height:1;color:#0A0A0A;margin:0;
}
.cm-div-card h3 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#007BFF;
}
.cm-div-desc{font-size:.95rem;line-height:1.6;color:#3A3A3A;margin:0;font-weight:300;}

/* practice rows inside division */
.cm-div-practices{display:flex;flex-direction:column;gap:1rem;margin-top:.4rem;}
.cm-prac{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1rem 1.1rem;
  background:#FAF7F1;
  border:1px solid rgba(15,15,15,.06);
  border-radius:12px;
  transition:all .3s;
}
.cm-prac:hover{background:#FFF4E8;border-color:rgba(0,123,255,.2);}
.cm-prac-num{
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:1px solid rgba(15,15,15,.1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono,monospace);font-size:.78rem;font-weight:600;
  color:#007BFF;flex-shrink:0;
}
.cm-prac-body{flex:1;}
.cm-prac-name{
  font-size:.98rem;font-weight:500;color:#0A0A0A;margin:0 0 .15rem;line-height:1.2;
}
.cm-prac-caps{font-size:.78rem;color:#6E6E6E;line-height:1.45;margin:0;}
.cm-prac-count{
  font-family:var(--font-mono,monospace);
  font-size:.7rem;color:#007BFF;font-weight:600;
  background:rgba(0,123,255,.08);
  padding:.2rem .55rem;border-radius:6px;flex-shrink:0;
  margin-top:.1rem;
}

.cm-div-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:auto;padding:1rem 1.2rem;
  background:#0F0F0F;color:#fff;
  border-radius:12px;font-size:.92rem;font-weight:500;text-decoration:none;
  transition:all .3s;
}
.cm-div-cta:hover{background:#007BFF;padding-left:1.5rem;}

/* â”€â”€ CAPABILITY GRID (full list of caps, expanded) â”€â”€ */
.cm-cap-band{padding:6rem 5vw;background:#fff;}
.cm-cap-tabs{
  display:flex;gap:.5rem;justify-content:center;margin-bottom:3rem;flex-wrap:wrap;
}
.cm-cap-tab{
  padding:.65rem 1.2rem;
  background:#F5F2EC;color:#3A3A3A;
  border:1px solid rgba(15,15,15,.08);border-radius:999px;
  font-size:.88rem;font-weight:500;cursor:pointer;
  font-family:inherit;
  transition:all .3s;
}
.cm-cap-tab:hover{background:#fff;color:#0F0F0F;border-color:rgba(15,15,15,.18);}
.cm-cap-tab.active{background:#0F0F0F;color:#fff;border-color:#0F0F0F;}
.cm-cap-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  max-width:1240px;margin:0 auto;
}
@media (max-width:980px){.cm-cap-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:680px){.cm-cap-grid{grid-template-columns:repeat(2,1fr);}}
.cm-cap-card{
  background:#FAF7F1;
  border:1px solid rgba(15,15,15,.06);
  border-radius:12px;
  padding:1.2rem 1.1rem;
  display:flex;flex-direction:column;gap:.5rem;
  transition:all .3s;
  text-decoration:none;color:inherit;
}
.cm-cap-card:hover{
  background:#fff;
  border-color:rgba(0,123,255,.3);
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.05);
}
.cm-cap-card[hidden]{display:none;}
.cm-cap-card-num{
  font-family:var(--font-mono,monospace);font-size:.7rem;
  color:#4DA3FF;letter-spacing:.12em;font-weight:600;
}
.cm-cap-card-name{
  font-size:.92rem;font-weight:500;color:#0A0A0A;line-height:1.3;
}
.cm-cap-card-tag{
  font-size:.68rem;color:#6E6E6E;letter-spacing:.06em;text-transform:uppercase;
  margin-top:auto;padding-top:.4rem;font-weight:500;
}

/* â”€â”€ PROCESS SNAPSHOT (4 step) â”€â”€ */
.cm-process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;position:relative;
}
@media (max-width:880px){.cm-process-grid{grid-template-columns:repeat(2,1fr);}}
.cm-step{padding:1.6rem;background:#fff;border:1px solid rgba(15,15,15,.08);border-radius:14px;}
.cm-step-num{
  font-family:'Inter', sans-serif;font-style:italic;
  font-size:2.4rem;color:#007BFF;font-weight:400;line-height:1;margin-bottom:.8rem;
}
.cm-step h4{font-size:1.1rem;font-weight:500;color:#0A0A0A;margin:0 0 .5rem;letter-spacing:-.015em;}
.cm-step p{font-size:.9rem;line-height:1.6;color:#3A3A3A;margin:0;font-weight:300;}

/* â”€â”€ STATS â€” DARK ACCENT CARD â”€â”€ */
.cm-stats-section{padding:6rem 5vw;background:#F5F2EC;}
.cm-stats-card{
  background:linear-gradient(135deg,#0F0F0F 0%,#1A1A1A 100%);
  border-radius:24px;
  padding:4rem 3rem;
  position:relative;overflow:hidden;
  max-width:1240px;margin:0 auto;
}
.cm-stats-card::before{content:"";position:absolute;top:-30%;left:-10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,123,255,.35) 0%,transparent 65%);filter:blur(40px);
}
.cm-stats-card::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(153,194,255,.18) 0%,transparent 65%);filter:blur(40px);
}
.cm-stats-card > *{position:relative;z-index:1;}
.cm-stats-head{text-align:center;max-width:680px;margin:0 auto 3rem;}
.cm-stats-head .cm-eyebrow{color:#4DA3FF;}
.cm-stats-head .cm-eyebrow::before{background:#4DA3FF;}
.cm-stats-head h2{color:#fff;}
.cm-stats-head h2 em{color:#4DA3FF;-webkit-text-fill-color:#4DA3FF;background:none;}
.cm-stats-head p{color:rgba(255,255,255,.78);}
.cm-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
@media (max-width:780px){.cm-stats-grid{grid-template-columns:repeat(2,1fr);}}
.cm-stat-v{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.2rem,4vw,3.4rem);font-weight:500;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,#fff,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cm-stat-v em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  font-size:.7em;color:#4DA3FF;-webkit-text-fill-color:#4DA3FF;
}
.cm-stat-l{font-size:.8rem;color:rgba(255,255,255,.7);letter-spacing:.04em;margin-top:.6rem;}

/* â”€â”€ TRUST â”€â”€ */
.cm-trust{padding:4rem 5vw;background:#F5F2EC;border-y:1px solid rgba(15,15,15,.06);}
.cm-trust-l{
  text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#6E6E6E;margin-bottom:2rem;
}
.cm-trust-row{
  display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1rem;font-weight:700;letter-spacing:.08em;color:#9A9A9A;
}
.cm-trust-row span{transition:color .3s;}
.cm-trust-row span:hover{color:#0F0F0F;}

/* â”€â”€ CTA â€” DARK ACCENT â”€â”€ */
.cm-cta{padding:6rem 5vw;background:#F5F2EC;}
.cm-cta-card{
  max-width:1100px;margin:0 auto;
  background:linear-gradient(135deg,#0F0F0F 0%,#1A1A1A 100%);
  border-radius:28px;padding:5rem 3rem;
  position:relative;overflow:hidden;text-align:center;
}
.cm-cta-card::before{content:"";position:absolute;top:-30%;left:-10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,123,255,.4) 0%,transparent 65%);filter:blur(30px);
}
.cm-cta-card::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(153,194,255,.22) 0%,transparent 65%);filter:blur(30px);
}
.cm-cta-card > *{position:relative;z-index:1;}
.cm-cta-card .cm-eyebrow{color:#4DA3FF;justify-content:center;margin:0 auto 1rem;display:inline-flex;}
.cm-cta-card .cm-eyebrow::before{background:#4DA3FF;}
.cm-cta-card h2{color:#fff;margin:0 0 1rem;}
.cm-cta-card h2 em{color:#4DA3FF;-webkit-text-fill-color:#4DA3FF;background:none;}
.cm-cta-card p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.7;max-width:580px;margin:0 auto 2rem;}
.cm-cta-card .cm-btn-fire{background:linear-gradient(135deg,#007BFF,#4DA3FF);}
.cm-cta-card .cm-btn-fire:hover{background:#fff;color:#0F0F0F;}
.cm-cta-card .cm-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16);}
.cm-cta-card .cm-btn-ghost:hover{background:#fff;color:#0F0F0F;border-color:#fff;}

/* footer dark on light theme */
.cm-theme footer{background:#0F0F0F;color:rgba(255,255,255,.7);padding:5rem 5vw 2rem;border:none;}
.cm-theme footer::before{display:none;}
.cm-theme .f-col h6{color:#fff;}
.cm-theme .f-col a{color:rgba(255,255,255,.65);}
.cm-theme .f-col a:hover{color:#4DA3FF;}
.cm-theme .f-desc{color:rgba(255,255,255,.6);}
.cm-theme .footer-top,.cm-theme .footer-bottom{border-color:rgba(255,255,255,.08);}
.cm-theme .f-copy,.cm-theme .f-legal a{color:rgba(255,255,255,.5);}
.cm-theme .f-legal a:hover{color:#4DA3FF;}
.cm-theme .soc{background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.1);}
.cm-theme .soc:hover{background:#007BFF;color:#fff;border-color:#007BFF;}

/* reveal */
.cm-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s;}
.cm-reveal.in{opacity:1;transform:translateY(0);}
.cm-reveal-d1{transition-delay:.08s;}
.cm-reveal-d2{transition-delay:.16s;}
.cm-reveal-d3{transition-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  .cm-hero-bg img,.cm-hero-bg video,.cm-hero h1 .cm-line,.cm-hero-lede,.cm-hero-btns,
  .cm-hero-divs,.cm-reveal{animation:none !important;opacity:1;transform:none !important;}
}

body.cn-theme{background:#050505;color:#fff;cursor:auto;}
body.cn-theme #global3D,body.cn-theme #cur,body.cn-theme #cur-ring,body.cn-theme #page-transition{display:none !important;}
.cn-theme,.cn-theme body,.cn-theme a,.cn-theme button,.cn-theme input,.cn-theme textarea{cursor:auto !important;}
.cn-theme a,.cn-theme button,.cn-theme [data-mode],.cn-theme .cn-card,.cn-theme .cn-svc-card,.cn-theme .cn-ind-card{cursor:pointer !important;}
.cn-theme input,.cn-theme textarea{cursor:text !important;}
.cn-theme nav{
  background:rgba(20,18,14,.72);
  border:1px solid rgba(77,163,255,.18);
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 24px rgba(0,123,255,.08);
}
.cn-theme nav.scrolled{
  background:rgba(28,22,14,.92);
  border-color:rgba(77,163,255,.32);
  box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,123,255,.12),0 0 32px rgba(0,123,255,.18);
}
.cn-theme .nav-links a{color:rgba(255,255,255,.75);}
.cn-theme .nav-links a:hover,.cn-theme .nav-links a.active-link{color:#fff;}
.cn-theme .cta-nav{background:#007BFF;color:#fff !important;padding:.55rem 1.1rem;border-radius:999px;}
.cn-theme .cta-nav:hover{background:#4DA3FF;transform:translateY(-1px);}
.cn-theme .hamburger span{background:#fff;}
.cn-theme .logo img{filter:none;}

/* â”€â”€ 1 Â· CINEMATIC VIDEO HERO â”€â”€ */
.cn-hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding:11rem 5vw 5rem;
  overflow:hidden;background:#050505;
  isolation:isolate;
}
.cn-hero-bg{position:absolute;inset:0;z-index:0;}
.cn-hero-bg video,.cn-hero-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) brightness(.78) contrast(1.05);
  animation:cnKenBurns 24s ease-in-out infinite alternate;
}
@keyframes cnKenBurns{0%{transform:scale(1)}100%{transform:scale(1.1)}}
.cn-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,.4) 50%, rgba(5,5,5,.85) 100%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,123,255,.18) 0%, transparent 60%);
}
.cn-hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,123,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,123,255,.05) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  opacity:.5;
}

.cn-hero-inner{
  position:relative;z-index:2;
  max-width:1240px;width:100%;margin:0 auto;
}
.cn-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  padding:0;margin-bottom:1.6rem;
  position:relative;padding-left:1.4rem;
}
.cn-eyebrow::before{content:"";position:absolute;left:0;top:50%;width:1rem;height:1px;background:#007BFF;
}
.cn-hero h1{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.8rem, 7vw, 6.4rem);
  font-weight:500;line-height:1;letter-spacing:-.035em;
  color:#fff;margin:0 0 1.6rem;max-width:980px;
}
.cn-hero h1 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF 0%,#4DA3FF 50%,#99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-hero h1 .cn-line{display:block;opacity:0;transform:translateY(28px);animation:cnLineIn 1s cubic-bezier(.2,.8,.2,1) forwards;}
.cn-hero h1 .cn-line:nth-child(1){animation-delay:.25s}
.cn-hero h1 .cn-line:nth-child(2){animation-delay:.4s}
.cn-hero h1 .cn-line:nth-child(3){animation-delay:.55s}
@keyframes cnLineIn{to{opacity:1;transform:translateY(0)}}

.cn-hero-lede{
  font-size:1.15rem;line-height:1.6;color:#FFFFFF;
  max-width:620px;margin:0 0 2.4rem;font-weight:300;
  opacity:0;animation:cnFadeUp 1s .7s forwards;
}
.cn-hero-btns{
  display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:4rem;
  opacity:0;animation:cnFadeUp 1s .85s forwards;
}
.cn-btn-fire{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem;
  background:linear-gradient(135deg,#007BFF 0%,#4DA3FF 100%);
  color:#fff;border-radius:999px;font-weight:500;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,123,255,.35);
  transition:all .35s;
}
.cn-btn-fire:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,123,255,.55);}
.cn-btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem;
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font-weight:500;text-decoration:none;backdrop-filter:blur(8px);
  transition:all .35s;
}
.cn-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-2px);}
@keyframes cnFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* hero stats overlay */
.cn-hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 2rem;
  max-width:920px;
  padding:2rem 0 1rem;
  margin-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  opacity:0;animation:cnFadeUp 1s 1s forwards;
}
@media (max-width:780px){
  .cn-hero-stats{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;}
}
@media (max-width:420px){
  .cn-hero-stats{grid-template-columns:1fr;gap:1.2rem;}
}
.cn-hs-v{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;letter-spacing:-.025em;line-height:1;
  background:linear-gradient(180deg,#fff 0%,#99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-hs-v em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  font-size:.7em;color:#4DA3FF;
  -webkit-text-fill-color:#4DA3FF;
}
.cn-hs-l{font-size:.78rem;color:rgba(255,255,255,.7);letter-spacing:.04em;margin-top:.4rem;line-height:1.4;font-family:var(--font-sans,Inter),sans-serif;font-style:normal;}
/* Subtle inline note inside stat labels — same font as parent, lighter color, no italic */
.cn-hs-l-sub{
  color:rgba(255,255,255,.45);
  font-style:normal !important;
  font-family:var(--font-sans,Inter),sans-serif !important;
  font-weight:300;
}

/* hero floating service tags */
.cn-hero-tags{
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
.cn-htag{
  position:absolute;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;
  background:rgba(20,12,6,.7);
  border:1px solid rgba(77,163,255,.4);
  border-radius:999px;
  font-family:var(--font-mono,monospace);font-size:.7rem;
  color:#99C2FF;letter-spacing:.04em;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 16px rgba(0,123,255,.18);
  white-space:nowrap;
  animation:cnFloat 6s ease-in-out infinite;
  opacity:0;
}
.cn-htag::before{content:"";width:6px;height:6px;border-radius:50%;background:#4DA3FF;box-shadow:0 0 8px #007BFF;}
.cn-htag.t1{top:11%;right:3%;animation-delay:1.4s;animation-name:cnTagIn,cnFloat;animation-duration:.6s,6s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;}
.cn-htag.t2{top:30%;right:-1%;animation-delay:1.6s;animation-name:cnTagIn,cnFloat;animation-duration:.6s,7s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;}
.cn-htag.t3{bottom:28%;left:2%;animation-delay:1.8s;animation-name:cnTagIn,cnFloat;animation-duration:.6s,8s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;}
.cn-htag.t4{bottom:48%;left:-1%;animation-delay:2s;animation-name:cnTagIn,cnFloat;animation-duration:.6s,7.5s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;}
@keyframes cnTagIn{to{opacity:1}}
@keyframes cnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* hide floating tags on anything narrower than full desktop to prevent overlap with headline / stats */
@media (max-width:1280px){.cn-hero-tags{display:none;}}

/* scroll indicator */
.cn-scroll{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-mono,monospace);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(153,194,255,.6);text-decoration:none;
  animation:cnScrollBounce 2s ease-in-out infinite;
}
.cn-scroll-line{width:1px;height:32px;background:linear-gradient(180deg,#4DA3FF,transparent);}
@keyframes cnScrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* â”€â”€ SECTION BASE â”€â”€ */
.cn-section{padding:7rem 5vw;position:relative;}
.cn-section .container{max-width:1240px;margin:0 auto;}
.cn-section-alt{background:#0A0A0A;}
.cn-section-head{text-align:center;max-width:760px;margin:0 auto 4rem;}
.cn-section-head .cn-eyebrow{display:inline-flex;}
.cn-section-head .cn-eyebrow::before{position:relative;left:auto;}
.cn-section h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:500;line-height:1.05;letter-spacing:-.03em;
  color:#fff;margin:.6rem 0 1.2rem;
}
.cn-section h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-section p.lede{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.78);font-weight:300;max-width:680px;margin:0 auto;}

/* â”€â”€ 2 Â· BRAND OVERVIEW WITH 3D IMAGE COLLAGE â”€â”€ */
.cn-brand{
  padding:8rem 5vw;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(0,123,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 100%, rgba(77,163,255,.05) 0%, transparent 60%),
    #0C0A07;
  position:relative;overflow:hidden;
}
.cn-brand::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(77,163,255,.06) 1px, transparent 1px),
    radial-gradient(rgba(77,163,255,.04) 1px, transparent 1px);
  background-size:32px 32px, 64px 64px;
  background-position:0 0, 16px 16px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  opacity:.7;
}
.cn-brand > *{position:relative;z-index:1;}
.cn-brand-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center;
  max-width:1240px;margin:0 auto;
}
@media (max-width:1100px){.cn-brand-grid{grid-template-columns:1fr;gap:4rem;}}
@media (max-width:600px){.cn-brand-grid{gap:3rem;}.cn-brand{padding:6rem 5vw;}}
.cn-brand-text h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:500;line-height:1.1;letter-spacing:-.025em;
  color:#fff;margin:1rem 0 1.4rem;
}
.cn-brand-text h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-brand-text p{font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.78);margin:0 0 1.4rem;font-weight:300;}
.cn-brand-text ul{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-direction:column;gap:1rem;}
.cn-brand-text li{
  display:grid;
  grid-template-columns:20px 110px 1fr;
  column-gap:1rem;
  align-items:start;
  font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.55;
}
.cn-brand-text li::before{
  content:"";width:20px;height:20px;
  margin-top:.18rem;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23007BFF'/><path d='M7 12.5l3 3 7-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
  grid-column:1;
}
.cn-brand-text li strong{
  grid-column:2;
  color:#fff;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
}
.cn-brand-text li span{
  grid-column:3;
  color:rgba(255,255,255,.82);
}
/* Mobile: stack label above description, bullet stays at top-left */
@media (max-width:560px){
  .cn-brand-text li{grid-template-columns:20px 1fr;row-gap:.25rem;}
  .cn-brand-text li strong{grid-column:2;}
  .cn-brand-text li span{grid-column:2;}
}

/* 3D image collage */
.cn-collage{
  position:relative;
  perspective:1400px;
  height:560px;
  margin:0 auto;
  max-width:600px;
  width:100%;
}
@media (max-width:1100px){.cn-collage{height:480px;max-width:580px;}}
@media (max-width:680px){.cn-collage{height:380px;max-width:480px;}}
@media (max-width:480px){.cn-collage{height:340px;max-width:100%;}}
.cn-cimg{
  position:absolute;
  border-radius:18px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,123,255,.1);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.cn-cimg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.85);}
.cn-cimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,123,255,.12),transparent 50%,rgba(0,0,0,.4));
  pointer-events:none;
}
.cn-cimg-1{
  width:62%;height:75%;top:0;right:0;z-index:2;
  transform:rotateY(-8deg) rotateX(4deg);
}
.cn-cimg-2{
  width:46%;height:55%;bottom:0;left:0;z-index:3;
  transform:rotateY(8deg) rotateX(-3deg);
}
.cn-cimg-3{
  width:34%;height:38%;top:18%;left:8%;z-index:4;
  transform:rotateY(4deg) rotateX(6deg);
  border:2px solid rgba(0,123,255,.4);
}
.cn-collage:hover .cn-cimg-1{transform:rotateY(-12deg) rotateX(6deg) translateZ(20px);}
.cn-collage:hover .cn-cimg-2{transform:rotateY(12deg) rotateX(-5deg) translateZ(30px);}
.cn-collage:hover .cn-cimg-3{transform:rotateY(8deg) rotateX(8deg) translateZ(50px);}

.cn-collage-glow{
  position:absolute;width:300px;height:300px;
  background:radial-gradient(circle,rgba(0,123,255,.4) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  filter:blur(60px);z-index:0;pointer-events:none;
}

/* â”€â”€ 3 Â· SERVICES SHOWCASE â€” cinematic image cards â”€â”€ */
.cn-services{
  padding:8rem 5vw;
  background:
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(0,123,255,.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 100%, rgba(77,163,255,.06) 0%, transparent 60%),
    #100C08;
  position:relative;
}
.cn-services::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(135deg, rgba(77,163,255,.04) 0%, transparent 25%, rgba(0,123,255,.04) 50%, transparent 75%, rgba(77,163,255,.04) 100%),
    linear-gradient(rgba(77,163,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,163,255,.03) 1px,transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 40%, transparent 90%);
}
.cn-svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  position:relative;z-index:1;
}
@media (max-width:1000px){.cn-svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.cn-svc-grid{grid-template-columns:1fr;}}

.cn-svc-card{
  position:relative;aspect-ratio:4/5;
  min-height:340px;
  border-radius:18px;overflow:hidden;
  background:#0A0A0A;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
  text-decoration:none;color:inherit;
  display:block;
}
@media (max-width:640px){.cn-svc-card{aspect-ratio:5/4;min-height:280px;}}
.cn-svc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 40px rgba(0,123,255,.25);
}
.cn-svc-card-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1s ease;
  filter:saturate(.95) brightness(.85) contrast(1.02);
}
.cn-svc-card:hover .cn-svc-card-img{transform:scale(1.08);filter:saturate(1) brightness(.95) contrast(1.05);}
.cn-svc-card-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(5,5,5,.6) 70%,rgba(5,5,5,.92) 100%);
}
.cn-svc-card-content{
  position:absolute;inset:0;padding:1.8rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;
  z-index:2;
}
.cn-svc-num{
  font-family:var(--font-mono,monospace);
  font-size:.7rem;color:#4DA3FF;letter-spacing:.18em;font-weight:600;
}
.cn-svc-card h3{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1.5rem;font-weight:500;letter-spacing:-.02em;color:#fff;margin:0;line-height:1.15;
}
.cn-svc-card h3 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;color:#99C2FF;
}
.cn-svc-card p{
  font-size:.85rem;color:rgba(255,255,255,.78);line-height:1.55;margin:.3rem 0 0;
  max-height:0;overflow:hidden;
  transition:max-height .5s ease,margin .5s ease;
}
.cn-svc-card:hover p{max-height:120px;margin:.6rem 0 0;}
.cn-svc-arrow{
  position:absolute;top:1.6rem;right:1.6rem;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,123,255,.85);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;font-weight:700;
  transform:translateY(-4px);opacity:0;
  transition:transform .4s,opacity .4s;
}
.cn-svc-card:hover .cn-svc-arrow{transform:translateY(0);opacity:1;}

/* â”€â”€ 4 Â· PROCESS SNAPSHOT â”€â”€ */
.cn-process{
  padding:8rem 5vw;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,123,255,.08) 0%, transparent 65%),
    linear-gradient(180deg, #0E0A06 0%, #0C0805 100%);
  position:relative;
}
.cn-process::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(77,163,255,.025) 12px, rgba(77,163,255,.025) 13px);
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.cn-process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  position:relative;
}
@media (max-width:880px){.cn-process-grid{grid-template-columns:repeat(2,1fr);}}
.cn-process-grid::before{content:"";position:absolute;top:78px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,123,255,.3) 30%,rgba(0,123,255,.3) 70%,transparent);
}
@media (max-width:880px){.cn-process-grid::before{display:none;}}

.cn-step{
  position:relative;text-align:center;padding:0 1rem;
}
.cn-step-img{
  width:140px;height:140px;
  margin:0 auto 1.4rem;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(0,123,255,.3);
  box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 30px rgba(0,123,255,.15);
  position:relative;
  transition:transform .5s,box-shadow .5s;
}
.cn-step:hover .cn-step-img{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 40px rgba(0,123,255,.35);
}
.cn-step-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);}
.cn-step-num{
  position:absolute;top:-6px;right:-6px;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Inter', sans-serif;font-style:italic;font-size:1.05rem;font-weight:400;
  box-shadow:0 8px 20px rgba(0,123,255,.4);
  z-index:2;
}
.cn-step h4{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1.2rem;font-weight:500;color:#fff;letter-spacing:-.015em;margin:0 0 .6rem;
}
.cn-step p{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.72);margin:0;font-weight:300;}

/* â”€â”€ 5 Â· INDUSTRIES â”€â”€ */
.cn-industries{
  padding:7rem 5vw;
  background:
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(77,163,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(0,123,255,.06) 0%, transparent 60%),
    #100C08;
  position:relative;overflow:hidden;
}
.cn-industries::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(77,163,255,.05) 1.2px, transparent 1.2px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
}
.cn-industries .container{position:relative;z-index:1;}
.cn-ind-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}
@media (max-width:880px){.cn-ind-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.cn-ind-grid{grid-template-columns:1fr;}}

.cn-ind-card{
  position:relative;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .5s,box-shadow .5s;
}
.cn-ind-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.55);}
.cn-ind-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1s;
  filter:saturate(.95) brightness(.85) contrast(1.02);
}
.cn-ind-card:hover .cn-ind-img{transform:scale(1.06);filter:saturate(1.05) brightness(.95);}
.cn-ind-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.88) 100%);
}
.cn-ind-content{
  position:absolute;inset:0;padding:1.4rem;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.cn-ind-card h4{
  font-size:1.2rem;font-weight:500;color:#fff;margin:0;letter-spacing:-.015em;
}
.cn-ind-card span{
  font-size:.74rem;color:#4DA3FF;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  margin-bottom:.3rem;
}

/* â”€â”€ 6 Â· STATS / CINEMATIC â”€â”€ */
.cn-stats{
  padding:8rem 5vw;
  position:relative;overflow:hidden;
  background:#050505;
}
.cn-stats-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.55) contrast(1.05);
}
.cn-stats::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,.45) 0%,rgba(5,5,5,.7) 100%),
             radial-gradient(ellipse at 50% 50%, rgba(0,123,255,.15) 0%,transparent 60%);
  z-index:1;
}
.cn-stats-inner{position:relative;z-index:2;text-align:center;max-width:1100px;margin:0 auto;}
.cn-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  margin-top:3rem;
}
@media (max-width:780px){.cn-stats-grid{grid-template-columns:repeat(2,1fr);gap:2.4rem;}}
.cn-bigstat-v{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.6rem,5vw,4.4rem);font-weight:500;line-height:1;letter-spacing:-.035em;
  background:linear-gradient(180deg,#fff 0%,#4DA3FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-bigstat-v em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  font-size:.65em;color:#4DA3FF;-webkit-text-fill-color:#4DA3FF;
}
.cn-bigstat-l{font-size:.85rem;color:rgba(255,255,255,.7);letter-spacing:.04em;margin-top:.6rem;line-height:1.4;}

/* â”€â”€ 7 Â· TRUST â”€â”€ */
.cn-trust{
  padding:4rem 5vw;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(0,123,255,.06) 0%, transparent 70%),
    linear-gradient(90deg, #0C0805 0%, #110D08 50%, #0C0805 100%);
  border-top:1px solid rgba(77,163,255,.12);
  border-bottom:1px solid rgba(77,163,255,.12);
  position:relative;
}
.cn-trust::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(77,163,255,.04) 60px, rgba(77,163,255,.04) 61px);
  mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.cn-trust-l{
  text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:2rem;
}
.cn-trust-row{
  display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:1rem;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.4);
}
.cn-trust-row span{transition:color .3s;}
.cn-trust-row span:hover{color:rgba(255,255,255,.85);}

/* â”€â”€ 8 Â· CTA â”€â”€ */
.cn-cta{
  padding:7rem 5vw;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,123,255,.12) 0%, transparent 70%),
    linear-gradient(180deg, #0C0805 0%, #100C08 100%);
  position:relative;overflow:hidden;
}
.cn-cta::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(rgba(77,163,255,.05) 1.2px, transparent 1.2px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 50% 50%, transparent 30%, #000 90%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, transparent 30%, #000 90%);
}
.cn-cta-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.55) contrast(1.05);
}
.cn-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,123,255,.22) 0%,rgba(5,5,5,.78) 65%, rgba(5,5,5,.9) 100%);
}
.cn-cta-inner{
  position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto;
}
.cn-cta h2{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.4rem,4.8vw,4rem);font-weight:500;line-height:1.05;letter-spacing:-.03em;
  color:#fff;margin:1rem 0 1.2rem;
}
.cn-cta h2 em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-cta p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.7;margin:0 0 2rem;}

/* â”€â”€ reveal animations â”€â”€ */
.cn-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease;}
.cn-reveal.in{opacity:1;transform:translateY(0);}
.cn-reveal-d1{transition-delay:.1s;}
.cn-reveal-d2{transition-delay:.2s;}
.cn-reveal-d3{transition-delay:.3s;}
.cn-reveal-d4{transition-delay:.4s;}

/* footer dark */
.cn-theme footer{background:#050505;color:rgba(255,255,255,.7);padding:5rem 5vw 2rem;border-top:1px solid rgba(255,255,255,.06);}
.cn-theme footer::before{display:none;}
.cn-theme .f-col h6{color:#fff;}
.cn-theme .f-col a{color:rgba(255,255,255,.65);}
.cn-theme .f-col a:hover{color:#4DA3FF;}
.cn-theme .f-desc{color:rgba(255,255,255,.6);}
.cn-theme .footer-top,.cn-theme .footer-bottom{border-color:rgba(255,255,255,.08);}
.cn-theme .f-copy,.cn-theme .f-legal a{color:rgba(255,255,255,.5);}
.cn-theme .f-legal a:hover{color:#4DA3FF;}
.cn-theme .soc{
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.1);
}
.cn-theme .soc:hover{background:#007BFF;color:#fff;border-color:#007BFF;}

@media (prefers-reduced-motion:reduce){
  .cn-hero-bg video,.cn-hero-bg img,.cn-htag,.cn-hero h1 .cn-line,.cn-hero-lede,
  .cn-hero-btns,.cn-hero-stats,.cn-scroll,.cn-reveal{animation:none !important;opacity:1;transform:none;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   CN-THEME INNER-PAGE OVERRIDES â€” apply cinematic polish to existing pages
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* page hero backgrounds â€” cinematic gradient */
.cn-theme .about-hero,
.cn-theme .services-hero,
.cn-theme .contact-hero,
.cn-theme .blog-hero{
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,123,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 80%, rgba(77,163,255,.08) 0%, transparent 60%),
    #050505;
  padding:11rem 5vw 5rem;
  position:relative;
  isolation:isolate;
}
.cn-theme .about-hero::before,
.cn-theme .services-hero::before,
.cn-theme .contact-hero::before,
.cn-theme .blog-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,123,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,123,255,.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
}
.cn-theme .about-hero-bg,
.cn-theme .services-hero-bg,
.cn-theme .contact-hero-bg,
.cn-theme .blog-hero-bg{display:none;}
.cn-theme .about-hero-inner,
.cn-theme .services-hero-inner,
.cn-theme .contact-hero-inner,
.cn-theme .blog-hero-inner{position:relative;z-index:2;}

/* hero eyebrows â€” cinematic hairline style */
.cn-theme .ah-eyebrow,.cn-theme .sh-eyebrow,
.cn-theme .ch-eyebrow,.cn-theme .bh-eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  padding:0;margin-bottom:1.4rem;
  background:transparent;border:none;border-radius:0;
  position:relative;padding-left:1.4rem;
}
.cn-theme .ah-eyebrow::before,.cn-theme .sh-eyebrow::before,
.cn-theme .ch-eyebrow::before,.cn-theme .bh-eyebrow::before{content:"";position:absolute;left:0;top:50%;width:1rem;height:1px;background:#007BFF;
}

/* hero titles â€” italic-orange accents */
.cn-theme .ah-title,.cn-theme .sh-title,
.cn-theme .ch-title,.cn-theme .bh-title{
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:clamp(2.4rem,5vw,4.4rem);
  font-weight:500;line-height:1.05;letter-spacing:-.03em;
  color:#fff;
}
.cn-theme .ah-title em,.cn-theme .sh-title em,
.cn-theme .ch-title em,.cn-theme .bh-title em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF 0%,#4DA3FF 50%,#99C2FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-theme .ah-lead,.cn-theme .sh-lead,
.cn-theme .ch-lead,.cn-theme .bh-lead{
  color:#FFFFFF;font-weight:300;font-size:1.05rem;line-height:1.65;
}
.cn-theme .ah-lead strong,.cn-theme .sh-lead strong,
.cn-theme .ch-lead strong,.cn-theme .bh-lead strong{color:#99C2FF;font-weight:500;}

/* breadcrumbs */
.cn-theme .ah-breadcrumb,.cn-theme .sh-breadcrumb,
.cn-theme .ch-breadcrumb,.cn-theme .bh-breadcrumb{
  color:rgba(255,255,255,.5);font-size:.78rem;
}
.cn-theme .ah-breadcrumb a,.cn-theme .sh-breadcrumb a,
.cn-theme .ch-breadcrumb a,.cn-theme .bh-breadcrumb a{color:#4DA3FF;}
.cn-theme .ah-breadcrumb .now,.cn-theme .sh-breadcrumb .now,
.cn-theme .ch-breadcrumb .now,.cn-theme .bh-breadcrumb .now{color:#fff;}

/* hero stats inline */
.cn-theme .ah-stats-inline,.cn-theme .sh-stats-inline{
  border-color:rgba(255,255,255,.12);
}
.cn-theme .ah-stat-item .num,.cn-theme .sh-stat-item .num{
  background:linear-gradient(180deg,#fff,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-theme .ah-stat-item .num sup,.cn-theme .sh-stat-item .num sup{color:#4DA3FF;-webkit-text-fill-color:#4DA3FF;}
.cn-theme .ah-stat-item .l,.cn-theme .sh-stat-item .l,.cn-theme .bh-stat .l{color:#FFFFFF !important;font-weight:500;opacity:1;}

/* image collage badges (about hero right side) */
.cn-theme .ah-img,.cn-theme .ah-img-a,.cn-theme .ah-img-b{
  border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
}
.cn-theme .ah-img img{filter:saturate(.85) brightness(.85);}
.cn-theme .ah-badge{
  background:rgba(20,12,6,.85);
  border:1px solid rgba(77,163,255,.3);
  color:#fff;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.cn-theme .ah-badge-icon{
  background:linear-gradient(135deg,#007BFF,#4DA3FF);color:#fff;
}
.cn-theme .ah-badge-l{color:rgba(255,255,255,.6);}
.cn-theme .ah-badge-v{color:#fff;}

/* facts strip / contact methods */
.cn-theme .ah-facts,.cn-theme .ch-methods{
  background:rgba(20,12,6,.5);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  backdrop-filter:blur(8px);
}
.cn-theme .ah-fact,.cn-theme .ch-method{border-color:rgba(255,255,255,.08) !important;}
.cn-theme .ah-fact-tag,.cn-theme .ch-method-tag{color:#4DA3FF;}
.cn-theme .ah-fact-icon,.cn-theme .ch-method-icon{
  background:rgba(0,123,255,.12);color:#4DA3FF;border:1px solid rgba(0,123,255,.3);
}
.cn-theme .ah-fact-v,.cn-theme .ch-method-v{color:#fff;}
.cn-theme .ah-fact-v a,.cn-theme .ch-method-v a{color:#fff;}
.cn-theme .ah-fact-v a:hover,.cn-theme .ch-method-v a:hover{color:#4DA3FF;}
.cn-theme .ah-fact-l,.cn-theme .ch-method-l{color:rgba(255,255,255,.6);}

/* universal section text on inner pages */
.cn-theme .index-section{
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,123,255,.06) 0%, transparent 60%),
    #0C0805;
  color:#fff;padding:6rem 5vw;
}
.cn-theme .index-section + .index-section{background:#0A0805;}
.cn-theme .index-section p,
.cn-theme .index-section span,
.cn-theme .index-section li{color:rgba(255,255,255,.85);}
.cn-theme .index-section h1,
.cn-theme .index-section h2,
.cn-theme .index-section h3,
.cn-theme .index-section h4{color:#fff;}
.cn-theme .index-section .accent{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.cn-theme .index-list{
  margin-top:2.5rem;
  border-top:none;
  display:flex;flex-direction:column;gap:.7rem;
}
.cn-theme .index-row{
  display:grid;
  grid-template-columns:auto minmax(180px, 1.2fr) 2.4fr auto;
  gap:1.6rem;
  padding:1.4rem 1.6rem;
  background:rgba(20,14,8,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:#fff;
  align-items:center;
}
.cn-theme .index-row:hover{
  border-color:rgba(0,123,255,.4);
  background:rgba(28,18,10,.7);
  transform:translateX(4px);
  padding-left:1.9rem;
  box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 24px rgba(0,123,255,.1);
}
.cn-theme .idx-num{
  color:#4DA3FF;
  background:rgba(0,123,255,.14);
  /* override base gradient-text styles */
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#4DA3FF;
  padding:.4rem .7rem;
  border-radius:8px;
  border:1px solid rgba(0,123,255,.3);
  font-family:var(--font-mono,monospace);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  display:inline-block;
  flex-shrink:0;
}
.cn-theme .idx-ttl{
  color:#fff;font-size:1.15rem;font-weight:500;letter-spacing:-.015em;line-height:1.25;
}
.cn-theme .idx-desc{
  color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.55;font-weight:300;
}
.cn-theme .idx-arr{
  background:rgba(20,12,6,.6);color:#fff;border:1px solid rgba(255,255,255,.12);
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .25s;
}
.cn-theme .index-row:hover .idx-arr{
  background:linear-gradient(135deg,#007BFF,#4DA3FF);color:#fff;border-color:#007BFF;
  box-shadow:0 0 16px rgba(0,123,255,.4);
}
@media (max-width:780px){
  .cn-theme .index-row{
    grid-template-columns:auto 1fr auto;
    gap:.9rem;padding:1.2rem 1.2rem;
  }
  .cn-theme .idx-desc{
    grid-column:1 / -1;padding-top:.4rem;border-top:1px solid rgba(255,255,255,.08);margin-top:.5rem;
  }
  .cn-theme .index-row:hover{padding-left:1.5rem;}
}

/* eyebrow + s-title common */
.cn-theme .eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans,Inter),sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  padding:0;margin-bottom:1.4rem;
  background:transparent;border:none;border-radius:0;
  position:relative;padding-left:1.4rem;
}
.cn-theme .eyebrow::before{content:"";position:absolute;left:0;top:50%;width:1rem;height:1px;background:#007BFF;
}
.cn-theme .s-title{
  color:#fff;font-weight:500;letter-spacing:-.03em;
  font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.05;
}
.cn-theme .s-title em,.cn-theme .s-title .accent{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* services page â€” sh-grid divisions */
.cn-theme .sh-division{
  background:rgba(20,12,6,.6);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  color:#fff;
}
.cn-theme .sh-division:hover{
  border-color:rgba(0,123,255,.5);
  transform:translateY(-3px);
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 30px rgba(0,123,255,.15);
}
.cn-theme .sh-div-tag{color:#4DA3FF;}
.cn-theme .sh-division h3{color:#fff;}
.cn-theme .sh-div-sub{color:rgba(255,255,255,.6);}
.cn-theme .sh-div-list li{color:#FFFFFF;border-bottom-color:rgba(255,255,255,.08);}
.cn-theme .sh-div-foot{border-top-color:rgba(255,255,255,.1);color:rgba(255,255,255,.65);}
.cn-theme .sh-div-cta{color:#4DA3FF;}
.cn-theme .sh-div-arrow{color:#007BFF;}

/* services page â€” sys-status bar */
.cn-theme .sys-status{background:#050505;}
.cn-theme .sys-bar{
  background:rgba(20,12,6,.5);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.cn-theme .sys-bar-head{color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.08);}
.cn-theme .sys-tag{color:#fff;}
.cn-theme .sys-mode,.cn-theme .sys-sep{color:rgba(255,255,255,.5);}
.cn-theme .sys-time{color:rgba(255,255,255,.6);}
.cn-theme .sys-cell{border-color:rgba(255,255,255,.08);}
.cn-theme .sys-key{color:rgba(255,255,255,.5);}
.cn-theme .sys-val{color:#fff;}
.cn-theme .sys-val.good{color:#5BE584;}
.cn-theme .sys-meter{background:rgba(255,255,255,.08);}

/* data-stream section */
.cn-theme .data-stream{background:#050505;}

/* about â€” team tree */
.cn-theme .team-tree-section{background:#0A0A0A;padding:6rem 5vw;}
.cn-theme .tt-row-label{color:rgba(255,255,255,.55);}
.cn-theme .tt-row-label::before{background:#007BFF;}
.cn-theme .tt-card,.cn-theme .tt-card-full{
  background:rgba(20,12,6,.6);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  color:#fff;
}
.cn-theme .tt-card:hover,.cn-theme .tt-card-full:hover{
  border-color:rgba(0,123,255,.4);
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 30px rgba(0,123,255,.15);
}
.cn-theme .tt-photo{border-color:#007BFF;box-shadow:0 0 16px rgba(0,123,255,.3);}
.cn-theme .tt-photo-full{background:#0A0A0A;}
.cn-theme .tt-tag{color:#4DA3FF;}
.cn-theme .tt-info h4{color:#fff;}
.cn-theme .tt-designation{color:rgba(255,255,255,.65);}
.cn-theme .tt-contact{border-top-color:rgba(255,255,255,.1);}
.cn-theme .tt-info-line{color:rgba(255,255,255,.78);}
.cn-theme .tt-info-line:hover{color:#4DA3FF;}
.cn-theme .tt-connector{background:linear-gradient(180deg,#007BFF,transparent);}

/* testimonial */
.cn-theme .testimonial{background:#050505;padding:6rem 5vw;}
.cn-theme .testimonial-card{
  background:rgba(20,12,6,.6);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.cn-theme .t-quote-mark{color:#4DA3FF;opacity:.4;}
.cn-theme .testimonial-card blockquote{color:#fff;}
.cn-theme .t-name{color:#fff;}
.cn-theme .t-role{color:rgba(255,255,255,.6);}
.cn-theme .t-stars{color:#4DA3FF;}
.cn-theme .t-avatar{
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  color:#fff;border:2px solid rgba(20,12,6,.9);
}

/* CTA section â€” global */
.cn-theme .cta-section{background:#050505;padding:6rem 5vw;position:relative;overflow:hidden;}
.cn-theme .cta-bg,.cn-theme .cta-glow{display:none;}
.cn-theme .cta-box{
  background:linear-gradient(135deg,#0F0F0F 0%,#1A1A1A 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;padding:5rem 3rem;
  color:#fff;position:relative;overflow:hidden;
}
.cn-theme .cta-box::before{content:"";position:absolute;top:-30%;left:-10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,123,255,.4) 0%,transparent 60%);filter:blur(30px);
}
.cn-theme .cta-box::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(153,194,255,.22) 0%,transparent 60%);filter:blur(30px);
}
.cn-theme .cta-box > *{position:relative;z-index:1;}
.cn-theme .cta-box .eyebrow{color:#4DA3FF;}
.cn-theme .cta-box .eyebrow::before{background:#4DA3FF;}
.cn-theme .cta-box h2{color:#fff;}
.cn-theme .cta-box h2 em{
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-theme .cta-box p{color:rgba(255,255,255,.78);}

/* buttons â€” match hero buttons */
.cn-theme .btn-fire{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem;
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  color:#fff;border-radius:999px;font-weight:500;text-decoration:none;border:none;
  box-shadow:0 12px 30px rgba(0,123,255,.35);
  transition:all .35s;
}
.cn-theme .btn-fire:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,123,255,.55);}
.cn-theme .btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem;
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font-weight:500;text-decoration:none;backdrop-filter:blur(8px);
  transition:all .35s;
}
.cn-theme .btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-2px);color:#fff;}

/* form inputs â€” dark cinematic */
.cn-theme .form-section{background:#0A0A0A;padding:6rem 5vw;}
.cn-theme .contact-form,.cn-theme form{
  background:rgba(20,12,6,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:2.4rem;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.cn-theme label{color:rgba(255,255,255,.85);font-weight:500;}
.cn-theme input[type="text"],.cn-theme input[type="email"],.cn-theme input[type="tel"],
.cn-theme input[type="number"],.cn-theme select,.cn-theme textarea{
  background:rgba(10,10,10,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
.cn-theme input:focus,.cn-theme select:focus,.cn-theme textarea:focus{
  border-color:#4DA3FF;
  background:rgba(10,10,10,.85);
  outline:none;box-shadow:0 0 0 3px rgba(0,123,255,.18);
}
.cn-theme input::placeholder,.cn-theme textarea::placeholder{color:rgba(255,255,255,.4);}
.cn-theme .map-section{background:#050505;padding:6rem 5vw;}
.cn-theme .map-frame{
  background:rgba(20,12,6,.6);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}

/* legal pages (privacy, terms) */
.cn-theme .legal-section,.cn-theme .legal-page{
  background:#050505;padding:11rem 5vw 5rem;color:rgba(255,255,255,.85);
}
.cn-theme .legal-section h1,.cn-theme .legal-page h1{
  color:#fff;font-weight:500;letter-spacing:-.025em;
  font-size:clamp(2.4rem,4.4vw,3.6rem);
}
.cn-theme .legal-section h2,.cn-theme .legal-page h2{
  color:#fff;margin-top:2.4rem;font-size:1.4rem;font-weight:500;
}
.cn-theme .legal-section p,.cn-theme .legal-page p,
.cn-theme .legal-section ul,.cn-theme .legal-page ul,
.cn-theme .legal-section li,.cn-theme .legal-page li{color:rgba(255,255,255,.78);}

/* blog page */
.cn-theme .git-log{
  background:rgba(20,12,6,.5);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cn-theme .git-log span{color:rgba(255,255,255,.65);}
.cn-theme .blog-cat-bar{background:#0A0A0A;padding:2rem 5vw;}
.cn-theme .cat-pill{
  background:rgba(20,12,6,.5);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.78);
}
.cn-theme .cat-pill:hover,.cn-theme .cat-pill.active{
  background:#007BFF;color:#fff;border-color:#007BFF;
}
.cn-theme #articleGrid,.cn-theme .article-grid,.cn-theme .blog-grid{
  background:#050505;padding:5rem 5vw;
}
.cn-theme .blog-card,.cn-theme .article-card{
  background:rgba(20,12,6,.5);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  color:#fff;
}
.cn-theme .blog-card:hover,.cn-theme .article-card:hover{
  border-color:rgba(0,123,255,.4);
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 30px rgba(0,123,255,.15);
}
.cn-theme .blog-card h3,.cn-theme .article-card h3,
.cn-theme .blog-card h4,.cn-theme .article-card h4{color:#fff;}
.cn-theme .blog-card p,.cn-theme .article-card p{color:rgba(255,255,255,.75);}
.cn-theme .blog-meta,.cn-theme .article-meta{color:rgba(255,255,255,.6);}
.cn-theme .blog-cat,.cn-theme .article-cat{
  background:rgba(0,123,255,.15);color:#4DA3FF;
}

/* blog post */
.cn-theme .reading-progress{background:rgba(255,255,255,.08);}
.cn-theme .reading-progress-fill{background:linear-gradient(90deg,#007BFF,#99C2FF);}
.cn-theme .post-header,.cn-theme .article-body{background:#050505;color:rgba(255,255,255,.88);}
.cn-theme .post-header h1,.cn-theme .article-body h1,
.cn-theme .article-body h2,.cn-theme .article-body h3{color:#fff;}
.cn-theme .post-meta,.cn-theme .post-author{color:rgba(255,255,255,.6);}
.cn-theme .article-body a{color:#4DA3FF;}
.cn-theme .article-body code,.cn-theme .article-body pre{
  background:rgba(20,12,6,.7);color:#fff;border:1px solid rgba(255,255,255,.08);
}
.cn-theme .post-hero-img{border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.4);}

/* process section / proc-line */
.cn-theme #process,.cn-theme .proc-section{background:#0A0A0A;padding:6rem 5vw;}
.cn-theme .proc-step{
  background:rgba(20,12,6,.5);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.cn-theme .proc-step h4{color:#fff;}
.cn-theme .proc-step p{color:rgba(255,255,255,.75);}
.cn-theme .proc-circle{color:#4DA3FF;background:rgba(0,123,255,.15);}

/* code editor blocks (services config) */
.cn-theme .code-section{background:#050505;}
.cn-theme .code-editor{
  background:#0A0A0A;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}

/* tech-stack / case studies / engagement / FAQ â€” services page */
.cn-theme .tech-stack-section,.cn-theme .case-studies-section,
.cn-theme .engagement-section,.cn-theme .faq-section,.cn-theme .recent-shipments{
  background:#050505;color:rgba(255,255,255,.85);
}
.cn-theme .tech-stack-section + section,.cn-theme .case-studies-section + section,
.cn-theme .engagement-section + section{background:#0A0A0A;}
.cn-theme .ts-card,.cn-theme .cs-card,.cn-theme .eng-card,.cn-theme .faq-item,.cn-theme .rs-card{
  background:rgba(20,12,6,.5);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.cn-theme .ts-card:hover,.cn-theme .cs-card:hover,.cn-theme .eng-card:hover,.cn-theme .rs-card:hover{
  border-color:rgba(0,123,255,.4);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.cn-theme .ts-card h4,.cn-theme .cs-card h4,.cn-theme .eng-card h4,.cn-theme .rs-card h4{color:#fff;}
.cn-theme .ts-card p,.cn-theme .cs-card p,.cn-theme .eng-card p,.cn-theme .rs-card p{color:rgba(255,255,255,.75);}
.cn-theme .faq-q{color:#fff;}
.cn-theme .faq-a,.cn-theme .faq-a p{color:rgba(255,255,255,.78);}
.cn-theme .faq-toggle{color:#fff;background:rgba(20,12,6,.5);border-color:rgba(255,255,255,.1);}
.cn-theme .faq-item.open .faq-toggle{background:#007BFF;color:#fff;border-color:#007BFF;}

/* ─── PIPE-SPLIT LAYOUT (services page cascade buttons → reveal Research/Dev/Web/Cyber with sub-cards) ─── */
.ds-pipe-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) 6px minmax(0,1fr);
  gap:3rem;
  align-items:stretch;
  width:100%;max-width:1380px;
  margin:1.6rem 0 0;
  position:relative;
}
.ds-pipe-wrap > .ds-station{grid-column:1;margin:0;}
/* Make the main card bigger in pipe-split mode */
.ds-pipe-wrap > .ds-station .ds-card-body{
  padding:1.8rem 2rem;
}
.ds-pipe-wrap > .ds-station h3{
  font-size:1.85rem !important;
  line-height:1.1 !important;
}
.ds-pipe-wrap > .ds-station .ds-lede{
  font-size:1rem;
  line-height:1.6;
  margin-bottom:1.2rem;
}
.ds-pipe-wrap > .ds-station .ds-num{
  font-size:2.6rem;
  top:1.1rem;right:1.4rem;
}
.ds-pipe-wrap > .ds-station .ds-tag{
  font-size:.72rem;
  margin-bottom:.5rem;
}
.ds-pipe-wrap > .ds-station .ds-card-bar{
  padding:.85rem 1.3rem;
  font-size:.75rem;
}
/* in pipe-split mode the capability list inside the main card stays visible AND is clickable —
   clicking a capability opens the matching sub-card on the right */
.ds-pipe-wrap > .ds-station .ds-caps li,
.ds-pipe-wrap > .ds-station .ds-caps-2col li{
  cursor:pointer;
  position:relative;
  transition:background .25s,color .25s,transform .25s,border-color .25s;
  border:1px solid transparent;
}
.ds-pipe-wrap > .ds-station .ds-caps li::before,
.ds-pipe-wrap > .ds-station .ds-caps-2col li::before{
  color:#4A90FF !important;
}
.ds-pipe-wrap > .ds-station .ds-caps li:hover,
.ds-pipe-wrap > .ds-station .ds-caps-2col li:hover{
  background:rgba(30,90,255,.1);
  color:#9FC3FF;
  border-color:rgba(74,144,255,.3);
  transform:translateX(3px);
}
.ds-pipe-wrap > .ds-station .ds-caps li:hover::before,
.ds-pipe-wrap > .ds-station .ds-caps-2col li:hover::before{
  color:#9FC3FF !important;
}
.ds-pipe-wrap > .ds-station .ds-caps li.is-active,
.ds-pipe-wrap > .ds-station .ds-caps-2col li.is-active{
  background:rgba(30,90,255,.2);
  color:#FFFFFF;
  border-color:rgba(74,144,255,.6);
}
.ds-pipe-wrap > .ds-station .ds-caps li.is-active::before,
.ds-pipe-wrap > .ds-station .ds-caps-2col li.is-active::before{
  color:#9FC3FF !important;
}
.ds-pipe-wrap > .ds-station .ds-caps li.is-active::after,
.ds-pipe-wrap > .ds-station .ds-caps-2col li.is-active::after{
  content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;
  background:linear-gradient(180deg,#1E5AFF,#4A90FF);
  border-radius:2px;
}

/* in-card orange accents → BLUE in pipe-split mode */
.ds-pipe-wrap > .ds-station .ds-tag{color:#4A90FF !important;}
.ds-pipe-wrap > .ds-station .ds-num{
  background:linear-gradient(180deg,rgba(74,144,255,.6),rgba(30,90,255,.08)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}
.ds-pipe-wrap > .ds-station .ds-port.out{color:#4A90FF !important;}
.ds-pipe-wrap > .ds-station .ds-throughput{color:#9FC3FF !important;}
.ds-pipe-wrap > .ds-station .ds-spark{
  background:linear-gradient(90deg,#1E5AFF 0%,#4A90FF 50%,#9FC3FF 100%) !important;
}
.ds-pipe-wrap > .ds-station .ds-cta{
  background:linear-gradient(90deg,rgba(30,90,255,.15),rgba(30,90,255,.04)) !important;
  color:#9FC3FF !important;
  border-top:1px solid rgba(74,144,255,.25) !important;
}
.ds-pipe-wrap > .ds-station .ds-cta:hover{
  background:linear-gradient(90deg,rgba(30,90,255,.35),rgba(30,90,255,.1)) !important;
  color:#fff !important;
}
.ds-pipe-wrap > .ds-station .ds-card{
  border-color:rgba(74,144,255,.22) !important;
}
.ds-pipe-wrap > .ds-station:hover .ds-card{
  border-color:rgba(74,144,255,.55) !important;
  box-shadow:0 38px 80px rgba(0,0,0,.6),0 0 40px rgba(30,90,255,.18) !important;
}
.ds-pipe-wrap > .ds-station .ds-card-bar{
  border-bottom-color:rgba(74,144,255,.15) !important;
}
.ds-pipe-wrap > .ds-station .ds-card-bar.bot{
  border-top-color:rgba(74,144,255,.15) !important;
  border-bottom:none;
}
.ds-pipe-wrap > .ds-station .ds-card::before{
  background:linear-gradient(135deg, rgba(30,90,255,.5), transparent 35%, transparent 65%, rgba(159,195,255,.4)) !important;
}

.ds-pipe-trunk-mid{
  grid-column:2;
  align-self:stretch;
  min-height:200px;
  background:linear-gradient(180deg,
    #1E5AFF 0%,
    #4A90FF 50%,
    #1E5AFF 100%);
  border-radius:3px;
  position:relative;
  box-shadow:0 0 24px rgba(30,90,255,.4);
}
.ds-pipe-trunk-mid::before,
.ds-pipe-trunk-mid::after{
  content:"";position:absolute;left:50%;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#9FC3FF 0%,#1E5AFF 70%,transparent 100%);
  transform:translateX(-50%);
  box-shadow:0 0 18px #1E5AFF;
}
.ds-pipe-trunk-mid::before{top:-7px;}
.ds-pipe-trunk-mid::after{bottom:-7px;}

/* single scroll-driven blue drop — moves along the trunk with page scroll */
.ds-pipe-scroll-drop{
  position:absolute;left:50%;top:0;
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle, #FFFFFF 0%, #9FC3FF 35%, #1E5AFF 75%, transparent 100%);
  transform:translate(-50%,-50%);
  box-shadow:
    0 0 24px #1E5AFF,
    0 0 12px #4A90FF,
    0 0 4px #FFFFFF;
  pointer-events:none;
  z-index:3;
  will-change:top;
}
.ds-pipe-scroll-drop::after{
  /* faint trailing glow line */
  content:"";position:absolute;
  left:50%;bottom:50%;transform:translateX(-50%);
  width:2px;height:60px;
  background:linear-gradient(180deg, transparent 0%, rgba(74,144,255,.6) 100%);
  border-radius:1px;
  filter:blur(1px);
}

.ds-pipe-subs{
  grid-column:3;
  display:flex;flex-direction:column;
  justify-content:center;    /* vertically center the single open sub-card against the main card */
  gap:1rem;
  padding:0;
  min-height:100%;
}
.ds-sub-card{
  position:relative;
  background:linear-gradient(180deg, rgba(20,14,8,.78), rgba(14,9,5,.85));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid rgba(74,144,255,.28);
  border-radius:16px;
  padding:1.8rem 2rem;
  transition:transform .3s, border-color .3s, box-shadow .3s, background .3s;
  cursor:default;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.ds-sub-card:hover{
  border-color:rgba(74,144,255,.55);
  background:linear-gradient(180deg, rgba(28,18,10,.82), rgba(18,12,7,.9));
  transform:translateX(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 36px rgba(74,144,255,.15);
}

/* Service-themed background images per sub-card (Unsplash CDN, free commercial use,
   layered with a dark overlay so text stays clearly readable on top) */

/* RESEARCH — CAD blueprints, prototyping, lab work */
.ds-sub-card[data-tag="research"]{
  background:
    linear-gradient(180deg, rgba(8,12,22,.45) 0%, rgba(5,8,18,.72) 100%),
    url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}
.ds-sub-card[data-tag="research"]:hover{
  background:
    linear-gradient(180deg, rgba(8,12,22,.3) 0%, rgba(5,8,18,.6) 100%),
    url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}

/* DEVELOPMENT — manufacturing, factory ops, supply chain */
.ds-sub-card[data-tag="development"]{
  background:
    linear-gradient(180deg, rgba(8,12,22,.45) 0%, rgba(5,8,18,.72) 100%),
    url('https://images.unsplash.com/photo-1565891741441-64926e441838?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}
.ds-sub-card[data-tag="development"]:hover{
  background:
    linear-gradient(180deg, rgba(8,12,22,.3) 0%, rgba(5,8,18,.6) 100%),
    url('https://images.unsplash.com/photo-1565891741441-64926e441838?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}

/* WEB DEVELOPMENT — code on screen, developer at laptop */
.ds-sub-card[data-tag="web.dev"]{
  background:
    linear-gradient(180deg, rgba(8,12,22,.45) 0%, rgba(5,8,18,.72) 100%),
    url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}
.ds-sub-card[data-tag="web.dev"]:hover{
  background:
    linear-gradient(180deg, rgba(8,12,22,.3) 0%, rgba(5,8,18,.6) 100%),
    url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}

/* CYBER SECURITY — server room / cyber ops / lock */
.ds-sub-card[data-tag="security"]{
  background:
    linear-gradient(180deg, rgba(8,12,22,.45) 0%, rgba(5,8,18,.72) 100%),
    url('https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}
.ds-sub-card[data-tag="security"]:hover{
  background:
    linear-gradient(180deg, rgba(8,12,22,.3) 0%, rgba(5,8,18,.6) 100%),
    url('https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
}
.ds-sub-card::before{
  content:"";position:absolute;
  left:-3rem;top:50%;
  width:3rem;height:1.5px;
  background:linear-gradient(90deg, transparent 0%, rgba(74,144,255,.7) 100%);
  pointer-events:none;
}
.ds-sub-card::after{
  content:"";position:absolute;
  left:-3.1rem;top:50%;
  width:10px;height:10px;border-radius:50%;
  background:#4A90FF;
  box-shadow:0 0 10px #1E5AFF;
  transform:translateY(-50%);
}
.ds-sub-card .ds-sub-num{
  font-family:var(--font-mono,monospace);
  font-size:.72rem;letter-spacing:.16em;font-weight:600;
  color:#4A90FF;display:block;margin-bottom:.7rem;
}
.ds-sub-card h4{
  color:#fff;font-size:1.45rem;font-weight:500;line-height:1.2;letter-spacing:-.015em;
  margin:0 0 .8rem;
}
.ds-sub-card p{
  color:rgba(255,255,255,.85);font-size:.98rem;line-height:1.65;margin:0;font-weight:300;
}

/* Sub-cards hidden by default — only open when matching capability is clicked in main card */
.ds-sub-card{
  display:none;
  opacity:0;transform:translateX(-16px);
}
.ds-sub-card.is-open{
  display:block;
  animation:dsSubIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes dsSubIn{to{opacity:1;transform:translateX(0)}}

/* responsive — stack on tablet/mobile */
@media (max-width:880px){
  .ds-pipe-wrap{grid-template-columns:1fr;gap:1.2rem;}
  .ds-pipe-wrap > .ds-station{grid-column:1;}
  .ds-pipe-trunk-mid{display:none;}
  .ds-pipe-subs{grid-column:1;padding-top:0;}
  .ds-sub-card::before,.ds-sub-card::after{display:none;}
}

/* manifesto block (if used on inner pages) */
.cn-theme .manifesto{background:#050505;color:#fff;}
.cn-theme .manifesto-text{color:#fff;}
.cn-theme .manifesto-text em{
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-theme .manifesto-text .strike{color:rgba(255,255,255,.4);}
.cn-theme .ms-text{color:rgba(255,255,255,.55);}
.cn-theme .ms-line{background:rgba(255,255,255,.15);}
.cn-theme .manifesto-mark{color:#4DA3FF;}

/* parallax / ethos blocks */
.cn-theme .parallax-block,.cn-theme .ethos-block{
  background:rgba(20,12,6,.6);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.cn-theme .parallax-block h3{color:#fff;}
.cn-theme .parallax-sig{color:rgba(255,255,255,.65);}

/* â€” section reveal â€” */
.cw-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease;}
.cw-reveal.in{opacity:1;transform:translateY(0);}
.cw-reveal-d1{transition-delay:.1s;}
.cw-reveal-d2{transition-delay:.2s;}
.cw-reveal-d3{transition-delay:.3s;}
.cw-reveal-d4{transition-delay:.4s;}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .cw-reveal{opacity:1 !important;transform:none !important;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .nn-hero-orb,.nn-h1 .nn-line,.nn-pill,.nn-lede,.nn-btns,.nn-trust,.nn-hero-mockup,.nn-mock-chart span{animation:none !important;opacity:1;transform:none !important;}
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   NN-THEME LIGHT OVERRIDES FOR ALL PAGES
   Convert every dark-theme section/component to the Neura Nova light look
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* canvas decorations off on light pages */
.nn-theme #global3D,
.nn-theme #cur,
.nn-theme #cur-ring{display:none !important;}

/* restore default browser cursor on light pages â€” base theme used cursor:none for the custom dot */
.nn-theme,
.nn-theme body,
.nn-theme a,
.nn-theme button,
.nn-theme .hamburger,
.nn-theme .service-full-card,
.nn-theme .svc-modal-close,
.nn-theme .blog-filter,
.nn-theme input,
.nn-theme textarea,
.nn-theme select,
.nn-theme [role="button"]{cursor:auto !important;}
.nn-theme a,.nn-theme button,.nn-theme .cta-nav,.nn-theme .nn-btn-primary,.nn-theme .nn-btn-secondary,
.nn-theme .btn-fire,.nn-theme .btn-outline,.nn-theme .nn-feature-link,.nn-theme .nn-faq-q,
.nn-theme .nn-pricing-toggle button,.nn-theme [data-mode],.nn-theme .nn-price-cta,
.nn-theme .cw-case,.nn-theme .nn-feature,.nn-theme .nn-blog-card,.nn-theme .hamburger{cursor:pointer !important;}
.nn-theme input[type="text"],.nn-theme input[type="email"],.nn-theme input[type="tel"],
.nn-theme input[type="number"],.nn-theme textarea{cursor:text !important;}

/* universal text color fix */
.nn-theme h1,.nn-theme h2,.nn-theme h3,.nn-theme h4,.nn-theme h5,.nn-theme h6{color:#0F0F0F;}
.nn-theme p{color:#3A3A3A;}
.nn-theme strong{color:#0F0F0F;}

/* universal section bg override on .index-section etc. */
.nn-theme section{color:#1A1A1A;}

/* page-transition + cursor decorations off */
.nn-theme #page-transition{display:none !important;}

/* â”€â”€â”€ ABOUT HERO â”€â”€â”€ */
.nn-theme .about-hero,
.nn-theme .services-hero,
.nn-theme .contact-hero,
.nn-theme .blog-hero{
  background:radial-gradient(ellipse at 50% 0%, #FFEDD5 0%, transparent 40%),
             radial-gradient(ellipse at 90% 100%, #FFE4C4 0%, transparent 40%),
             #FAFAF8;
  color:#0F0F0F;
  padding:11rem 5vw 5rem;
}
.nn-theme .about-hero-bg,
.nn-theme .services-hero-bg,
.nn-theme .contact-hero-bg,
.nn-theme .blog-hero-bg{display:none;}

/* breadcrumbs */
.nn-theme .ah-breadcrumb,.nn-theme .sh-breadcrumb,
.nn-theme .ch-breadcrumb,.nn-theme .bh-breadcrumb{
  color:#6E6E6E;
}
.nn-theme .ah-breadcrumb a,.nn-theme .sh-breadcrumb a,
.nn-theme .ch-breadcrumb a,.nn-theme .bh-breadcrumb a{color:#007BFF;}
.nn-theme .ah-breadcrumb .now,.nn-theme .sh-breadcrumb .now,
.nn-theme .ch-breadcrumb .now,.nn-theme .bh-breadcrumb .now{color:#0F0F0F;}

/* hero eyebrows + titles */
.nn-theme .ah-eyebrow,.nn-theme .sh-eyebrow,
.nn-theme .ch-eyebrow,.nn-theme .bh-eyebrow{
  display:inline-block;
  color:#007BFF;background:rgba(0,123,255,.1);
  padding:.4rem .85rem;border-radius:999px;
  font-size:.78rem;font-weight:500;letter-spacing:.06em;
  margin-bottom:1.2rem;border:none;
}
.nn-theme .ah-title,.nn-theme .sh-title,
.nn-theme .ch-title,.nn-theme .bh-title{
  color:#0F0F0F;font-weight:600;letter-spacing:-.025em;
}
.nn-theme .ah-title em,.nn-theme .sh-title em,
.nn-theme .ch-title em,.nn-theme .bh-title em{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#4DA3FF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-theme .ah-lead,.nn-theme .sh-lead,
.nn-theme .ch-lead,.nn-theme .bh-lead{
  color:#3A3A3A;font-weight:300;
}
.nn-theme .ah-lead strong,.nn-theme .sh-lead strong,
.nn-theme .ch-lead strong,.nn-theme .bh-lead strong{color:#007BFF;font-weight:500;}

/* hero stats inline */
.nn-theme .ah-stats-inline,.nn-theme .sh-stats-inline{
  border-top:1px solid rgba(15,15,15,.08);
  border-bottom:1px solid rgba(15,15,15,.08);
}
.nn-theme .ah-stat-item .num,.nn-theme .sh-stat-item .num{color:#0F0F0F;}
.nn-theme .ah-stat-item .num sup,.nn-theme .sh-stat-item .num sup{
  background:linear-gradient(180deg,#4DA3FF,#007BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-theme .ah-stat-item .l,.nn-theme .sh-stat-item .l{color:#6E6E6E;}

/* hero buttons */
.nn-theme .btn-fire{
  background:#0F0F0F;color:#fff;
  border:none;
  padding:.85rem 1.6rem;border-radius:999px;
  font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  transition:all .3s;
}
.nn-theme .btn-fire:hover{
  background:#007BFF;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,123,255,.35);
}
.nn-theme .btn-outline{
  background:#fff;color:#0F0F0F;
  border:1px solid rgba(15,15,15,.14);
  padding:.85rem 1.6rem;border-radius:999px;
  font-weight:500;
  transition:all .3s;
}
.nn-theme .btn-outline:hover{
  border-color:#007BFF;color:#007BFF;
  transform:translateY(-2px);background:#fff;
}

/* about â€” image collage badges */
.nn-theme .ah-img,
.nn-theme .ah-img-a,.nn-theme .ah-img-b{
  border:2px solid #fff;
  box-shadow:0 30px 60px rgba(0,0,0,.1);
}
.nn-theme .ah-badge{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  color:#0F0F0F;
}
.nn-theme .ah-badge-icon{
  background:linear-gradient(135deg,#007BFF,#4DA3FF);color:#fff;
}
.nn-theme .ah-badge-l{color:#6E6E6E;}
.nn-theme .ah-badge-v{color:#0F0F0F;}

/* about â€” facts strip & contact methods strip */
.nn-theme .ah-facts,.nn-theme .ch-methods{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.06);
  border-radius:18px;
}
.nn-theme .ah-fact,.nn-theme .ch-method{
  border-color:rgba(15,15,15,.06) !important;
}
.nn-theme .ah-fact-tag,.nn-theme .ch-method-tag{color:#007BFF;}
.nn-theme .ah-fact-icon,.nn-theme .ch-method-icon{
  background:rgba(0,123,255,.08);color:#007BFF;
  border:1px solid rgba(0,123,255,.18);
}
.nn-theme .ah-fact-v,.nn-theme .ch-method-v{color:#0F0F0F;}
.nn-theme .ah-fact-v a,.nn-theme .ch-method-v a{color:#0F0F0F;}
.nn-theme .ah-fact-v a:hover,.nn-theme .ch-method-v a:hover{color:#007BFF;}
.nn-theme .ah-fact-l,.nn-theme .ch-method-l{color:#6E6E6E;}

/* index-section default styling */
.nn-theme .index-section{
  background:#FAFAF8;
  padding:6rem 5vw;color:#1A1A1A;
}
.nn-theme .index-section + .index-section{
  background:#F4F2EE;
}
.nn-theme .index-list{margin-top:3rem;}
.nn-theme .index-row{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  border-radius:14px;
  margin-bottom:.6rem;
  transition:all .3s;
}
.nn-theme .index-row:hover{
  border-color:#007BFF;
  transform:translateX(4px);
  box-shadow:0 16px 40px rgba(0,0,0,.06);
}
.nn-theme .idx-num{color:#007BFF;background:rgba(0,123,255,.08);}
.nn-theme .idx-ttl{color:#0F0F0F;}
.nn-theme .idx-desc{color:#3A3A3A;}
.nn-theme .idx-arr{
  background:#FAFAF8;color:#0F0F0F;border:1px solid rgba(15,15,15,.08);
}
.nn-theme .index-row:hover .idx-arr{background:#007BFF;color:#fff;border-color:#007BFF;}

/* universal eyebrow styling */
.nn-theme .eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  color:#007BFF;background:rgba(0,123,255,.08);
  padding:.4rem .85rem;border-radius:999px;
  font-size:.78rem;font-weight:500;letter-spacing:.06em;
  border:none;
}

.nn-theme .s-title{color:#0F0F0F;font-weight:600;letter-spacing:-.025em;}
.nn-theme .s-title em,.nn-theme .s-title .accent{
  font-family:'Inter', sans-serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#007BFF,#4DA3FF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* â”€â”€â”€ TEAM TREE â”€â”€â”€ */
.nn-theme .team-tree-section{background:#F4F2EE;padding:6rem 5vw;}
.nn-theme .tt-row-label{color:#6E6E6E;}
.nn-theme .tt-row-label::before{background:#007BFF;}
.nn-theme .tt-card,
.nn-theme .tt-card-full{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}
.nn-theme .tt-card:hover,
.nn-theme .tt-card-full:hover{
  border-color:rgba(0,123,255,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.08), 0 0 30px rgba(0,123,255,.08);
}
.nn-theme .tt-photo{
  border-color:#007BFF;
  box-shadow:0 0 16px rgba(0,123,255,.18);
}
.nn-theme .tt-photo-full{background:#F4F2EE;}
.nn-theme .tt-tag{color:#007BFF;}
.nn-theme .tt-info h4{color:#0F0F0F;}
.nn-theme .tt-designation{color:#6E6E6E;}
.nn-theme .tt-contact{border-top-color:rgba(15,15,15,.08);}
.nn-theme .tt-info-line{color:#3A3A3A;}
.nn-theme .tt-info-line:hover{color:#007BFF;}
.nn-theme .tt-connector{background:linear-gradient(180deg,#007BFF,transparent);opacity:.5;}

/* â”€â”€â”€ TESTIMONIAL (single block) â”€â”€â”€ */
.nn-theme .testimonial{background:#FAFAF8;padding:6rem 5vw;}
.nn-theme .testimonial-card{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.06);
}
.nn-theme .t-quote-mark{color:#4DA3FF;opacity:.4;}
.nn-theme .testimonial-card blockquote{color:#1A1A1A;}
.nn-theme .t-name{color:#0F0F0F;}
.nn-theme .t-role{color:#6E6E6E;}
.nn-theme .t-stars{color:#4DA3FF;}
.nn-theme .t-avatar{
  background:linear-gradient(135deg,#007BFF,#4DA3FF);
  color:#fff;border:2px solid #fff;
}

/* â”€â”€â”€ CTA SECTIONS â”€â”€â”€ */
.nn-theme .cta-section{
  background:#FAFAF8;
  padding:6rem 5vw;
}
.nn-theme .cta-bg,.nn-theme .cta-glow{display:none;}
.nn-theme .cta-box{
  background:linear-gradient(135deg,#0F0F0F 0%,#1A1A1A 100%);
  color:#fff;border-radius:28px;padding:5rem 3rem;
  position:relative;overflow:hidden;
}
.nn-theme .cta-box::before{content:"";position:absolute;top:-30%;left:-10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,123,255,.45) 0%, transparent 60%);
  filter:blur(30px);
}
.nn-theme .cta-box::after{content:"";position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(153,194,255,.25) 0%, transparent 60%);
  filter:blur(30px);
}
.nn-theme .cta-box > *{position:relative;z-index:1;}
.nn-theme .cta-box .eyebrow{background:rgba(0,123,255,.18);color:#4DA3FF;}
.nn-theme .cta-box h2{color:#fff;}
.nn-theme .cta-box h2 em{
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-theme .cta-box p{color:rgba(255,255,255,.78);}
.nn-theme .cta-box .btn-fire{background:linear-gradient(135deg,#007BFF,#4DA3FF);}
.nn-theme .cta-box .btn-fire:hover{background:#fff;color:#0F0F0F;}
.nn-theme .cta-box .btn-outline{
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);
}
.nn-theme .cta-box .btn-outline:hover{background:#fff;color:#0F0F0F;}

/* â”€â”€â”€ SERVICES PAGE â€” sh-grid + divisions â”€â”€â”€ */
.nn-theme .sh-grid{}
.nn-theme .sh-division{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}
.nn-theme .sh-division:hover{
  border-color:rgba(0,123,255,.4);
  transform:translateY(-3px);
  box-shadow:0 30px 60px rgba(0,0,0,.08);
}
.nn-theme .sh-div-tag{color:#007BFF;}
.nn-theme .sh-division h3{color:#0F0F0F;}
.nn-theme .sh-div-sub{color:#6E6E6E;}
.nn-theme .sh-div-list li{color:#3A3A3A;border-bottom-color:rgba(15,15,15,.06);}
.nn-theme .sh-div-foot{border-top-color:rgba(15,15,15,.08);color:#6E6E6E;}
.nn-theme .sh-div-cta{color:#007BFF;}

/* â”€â”€â”€ SYSTEM STATUS BAR â”€â”€â”€ */
.nn-theme .sys-status{background:#F4F2EE;}
.nn-theme .sys-bar{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.05);
}
.nn-theme .sys-bar-head{color:#3A3A3A;border-bottom-color:rgba(15,15,15,.06);}
.nn-theme .sys-tag{color:#0F0F0F;}
.nn-theme .sys-mode,.nn-theme .sys-sep{color:#6E6E6E;}
.nn-theme .sys-time{color:#6E6E6E;}
.nn-theme .sys-cell{border-color:rgba(15,15,15,.06);}
.nn-theme .sys-key{color:#6E6E6E;}
.nn-theme .sys-val{color:#0F0F0F;}
.nn-theme .sys-val.good{color:#3aa86b;}
.nn-theme .sys-meter{background:rgba(15,15,15,.06);}

/* â”€â”€â”€ DATA STREAM (services page) â€” keep dark island for contrast â”€â”€â”€ */
.nn-theme .data-stream{
  background:linear-gradient(180deg,#FAFAF8 0%,#F4F2EE 50%,#FAFAF8 100%);
}
.nn-theme .data-stream .ds-grid{opacity:.15;}
.nn-theme .data-stream .ds-head{color:#0F0F0F;}
.nn-theme .data-stream .ds-head .s-title{color:#0F0F0F;}
.nn-theme .data-stream .ds-head p{color:#3A3A3A;}
.nn-theme .data-stream .ds-meter{
  background:#fff;border-color:rgba(15,15,15,.08);
}
.nn-theme .data-stream .ds-meter-l{color:#6E6E6E;}
.nn-theme .data-stream .ds-meter-v{color:#0F0F0F;}
.nn-theme .data-stream .ds-divider{
  background:linear-gradient(90deg,transparent,rgba(0,123,255,.08) 50%,transparent);
  border-color:rgba(0,123,255,.25);
}
.nn-theme .data-stream .ds-divider-name{color:#3A3A3A;}
.nn-theme .data-stream .ds-card{
  background:#fff;
  border-color:rgba(15,15,15,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.06);
}
.nn-theme .data-stream .ds-card::before{opacity:.3;}
.nn-theme .data-stream .ds-card-bar{
  background:#FAFAF8;border-bottom-color:rgba(15,15,15,.06);color:#6E6E6E;
}
.nn-theme .data-stream .ds-card-bar.bot{border-top-color:rgba(15,15,15,.06);}
.nn-theme .data-stream .ds-port{color:#6E6E6E;}
.nn-theme .data-stream .ds-port.out{color:#007BFF;}
.nn-theme .data-stream .ds-card h3{color:#0F0F0F;}
.nn-theme .data-stream .ds-tag{color:#007BFF;}
.nn-theme .data-stream .ds-lede{color:#3A3A3A;}
.nn-theme .data-stream .ds-caps li{color:#3A3A3A;}
.nn-theme .data-stream .ds-cta{
  background:linear-gradient(90deg,rgba(0,123,255,.08),rgba(0,123,255,.02));
  color:#007BFF;border-top-color:rgba(15,15,15,.06);
}
.nn-theme .data-stream .ds-cta:hover{
  background:linear-gradient(90deg,#007BFF,#4DA3FF);color:#fff;
}
.nn-theme .data-stream .ds-terminal{
  background:#0F0F0F;color:#fff;
}
.nn-theme .data-stream #codeRain{opacity:.05;}

/* â”€â”€â”€ BLOG PAGE â”€â”€â”€ */
.nn-theme .blog-hero{padding:11rem 5vw 5rem;}
.nn-theme .git-log{background:#F4F2EE;color:#3A3A3A;border-y:1px solid rgba(15,15,15,.08);}
.nn-theme .git-log span{color:#6E6E6E;}
.nn-theme .blog-cat-bar{background:#FAFAF8;}
.nn-theme .cat-pill{
  background:#fff;border:1px solid rgba(15,15,15,.08);color:#3A3A3A;
}
.nn-theme .cat-pill.active,.nn-theme .cat-pill:hover{
  background:#0F0F0F;color:#fff;border-color:#0F0F0F;
}
.nn-theme #articleGrid,.nn-theme .blog-grid,.nn-theme .article-grid{padding:6rem 5vw;background:#FAFAF8;}
.nn-theme .blog-card,.nn-theme .article-card{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.04);
}
.nn-theme .blog-card:hover,.nn-theme .article-card:hover{
  border-color:rgba(0,123,255,.3);
  box-shadow:0 30px 60px rgba(0,0,0,.08);
}
.nn-theme .blog-card h3,.nn-theme .article-card h3,
.nn-theme .blog-card h4,.nn-theme .article-card h4{color:#0F0F0F;}
.nn-theme .blog-card p,.nn-theme .article-card p{color:#3A3A3A;}
.nn-theme .blog-meta,.nn-theme .article-meta{color:#6E6E6E;}
.nn-theme .blog-cat,.nn-theme .article-cat{
  background:rgba(0,123,255,.08);color:#007BFF;
}

/* â”€â”€â”€ BLOG POST â”€â”€â”€ */
.nn-theme .reading-progress{background:rgba(15,15,15,.06);}
.nn-theme .reading-progress-fill{background:linear-gradient(90deg,#007BFF,#4DA3FF);}
.nn-theme .post-header,.nn-theme .article-body{background:#FAFAF8;color:#1A1A1A;}
.nn-theme .post-header h1,.nn-theme .article-body h1,
.nn-theme .article-body h2,.nn-theme .article-body h3{color:#0F0F0F;}
.nn-theme .post-meta,.nn-theme .post-author{color:#6E6E6E;}
.nn-theme .article-body p{color:#1A1A1A;}
.nn-theme .article-body a{color:#007BFF;}
.nn-theme .article-body code,.nn-theme .article-body pre{
  background:#F4F2EE;color:#0F0F0F;border:1px solid rgba(15,15,15,.08);
}
.nn-theme .post-hero-img{border:2px solid #fff;box-shadow:0 30px 60px rgba(0,0,0,.1);}

/* â”€â”€â”€ CONTACT FORM â”€â”€â”€ */
.nn-theme .form-section{background:#FAFAF8;padding:6rem 5vw;}
.nn-theme .contact-form,.nn-theme form{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  border-radius:18px;padding:2rem;
  box-shadow:0 20px 50px rgba(0,0,0,.06);
}
.nn-theme label{color:#3A3A3A;font-weight:500;}
.nn-theme input[type="text"],.nn-theme input[type="email"],.nn-theme input[type="tel"],
.nn-theme input[type="number"],.nn-theme select,.nn-theme textarea{
  background:#FAFAF8;
  color:#0F0F0F;
  border:1px solid rgba(15,15,15,.1);
  border-radius:10px;
}
.nn-theme input:focus,.nn-theme select:focus,.nn-theme textarea:focus{
  border-color:#007BFF;
  background:#fff;
  outline:none;box-shadow:0 0 0 3px rgba(0,123,255,.12);
}
.nn-theme input::placeholder,.nn-theme textarea::placeholder{color:#9A9A9A;}

/* map section */
.nn-theme .map-section{background:#F4F2EE;padding:6rem 5vw;}
.nn-theme .map-frame{
  background:#fff;border:1px solid rgba(15,15,15,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.06);
}

/* â”€â”€â”€ PRIVACY / TERMS â”€â”€â”€ */
.nn-theme .legal-section,
.nn-theme .legal-page{
  background:#FAFAF8;
  padding:11rem 5vw 5rem;
  color:#1A1A1A;
}
.nn-theme .legal-section h1,
.nn-theme .legal-page h1{color:#0F0F0F;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:600;letter-spacing:-.025em;}
.nn-theme .legal-section h2,
.nn-theme .legal-page h2{
  color:#0F0F0F;margin-top:2.4rem;font-size:1.4rem;font-weight:600;
}
.nn-theme .legal-section p,
.nn-theme .legal-page p{color:#3A3A3A;line-height:1.7;}
.nn-theme .legal-section ul,
.nn-theme .legal-page ul{color:#3A3A3A;}

/* â”€â”€â”€ PROCESS STEPS (services page) â”€â”€â”€ */
.nn-theme #process{background:#F4F2EE;padding:6rem 5vw;}
.nn-theme .proc-step{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}
.nn-theme .proc-step h4{color:#0F0F0F;}
.nn-theme .proc-step p{color:#3A3A3A;}
.nn-theme .proc-circle{color:#007BFF;background:rgba(0,123,255,.1);}

/* â”€â”€â”€ CODE EDITOR (services config block, etc.) â€” soften â”€â”€â”€ */
.nn-theme .code-section{background:#FAFAF8;}
.nn-theme .code-editor{
  background:#0F0F0F;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.1);
}
.nn-theme .code-head .eyebrow{}
.nn-theme .code-head h2{color:#0F0F0F;}

/* â”€â”€â”€ TECH STACK / FAQ / ENG-MODELS / case-studies on services page â”€â”€â”€ */
.nn-theme .tech-stack-section,
.nn-theme .case-studies-section,
.nn-theme .engagement-section,
.nn-theme .faq-section,
.nn-theme .recent-shipments{background:#FAFAF8;color:#1A1A1A;}
.nn-theme .tech-stack-section + section,
.nn-theme .case-studies-section + section,
.nn-theme .engagement-section + section{background:#F4F2EE;}
.nn-theme .ts-card,.nn-theme .cs-card,.nn-theme .eng-card,.nn-theme .faq-item,.nn-theme .rs-card{
  background:#fff;
  border:1px solid rgba(15,15,15,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.04);
}
.nn-theme .ts-card:hover,.nn-theme .cs-card:hover,.nn-theme .eng-card:hover,.nn-theme .rs-card:hover{
  border-color:rgba(0,123,255,.3);
  box-shadow:0 24px 50px rgba(0,0,0,.08);
}
.nn-theme .ts-card h4,.nn-theme .cs-card h4,.nn-theme .eng-card h4,.nn-theme .rs-card h4{color:#0F0F0F;}
.nn-theme .ts-card p,.nn-theme .cs-card p,.nn-theme .eng-card p,.nn-theme .rs-card p{color:#3A3A3A;}

/* FAQ accordion (services page) */
.nn-theme .faq-item{border-color:rgba(15,15,15,.08);}
.nn-theme .faq-q{color:#0F0F0F;}
.nn-theme .faq-a,.nn-theme .faq-a p{color:#3A3A3A;}
.nn-theme .faq-toggle{color:#0F0F0F;background:#FAFAF8;border-color:rgba(15,15,15,.1);}
.nn-theme .faq-item.open .faq-toggle{background:#007BFF;color:#fff;border-color:#007BFF;}

/* â”€â”€â”€ SERVICE MODAL â”€â”€â”€ */
.nn-theme .svc-modal-panel{background:#fff;color:#0F0F0F;}
.nn-theme .svc-modal-backdrop{background:rgba(15,15,15,.5);}

/* â”€â”€â”€ FOOTER (already light-handled above, ensure it stays consistent) â”€â”€â”€ */
.nn-theme footer{background:#0F0F0F;color:rgba(255,255,255,.7);padding:5rem 5vw 2rem;border:none;}
.nn-theme footer::before{display:none;}
.nn-theme .f-col h6,.nn-theme .f-col h5,.nn-theme .f-col h4{color:#fff;}
.nn-theme .f-col a,.nn-theme .f-col li{color:rgba(255,255,255,.65);}
.nn-theme .f-col a:hover{color:#4DA3FF;}
.nn-theme .f-desc{color:rgba(255,255,255,.6);}
.nn-theme .footer-top,.nn-theme .footer-bottom{border-color:rgba(255,255,255,.1);}
.nn-theme .f-copy{color:rgba(255,255,255,.5);}
.nn-theme .f-legal a{color:rgba(255,255,255,.55);}
.nn-theme .f-legal a:hover{color:#4DA3FF;}
.nn-theme .soc{
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.1);
}
.nn-theme .soc:hover{background:#007BFF;color:#fff;border-color:#007BFF;}

/* â”€â”€â”€ BORDERS, etc. catch-alls â”€â”€â”€ */
.nn-theme hr{border-color:rgba(15,15,15,.08);}

/* hide dark heavy decorations on light pages */
.nn-theme .cosmic-bg,
.nn-theme .tech-spiral,
.nn-theme .code-rain,
.nn-theme #threeBg{opacity:.04 !important;}

/* manifesto block, if any other page uses it */
.nn-theme .manifesto{background:#FAFAF8;color:#0F0F0F;}
.nn-theme .manifesto-text{color:#0F0F0F;}
.nn-theme .manifesto-text em{
  background:linear-gradient(135deg,#007BFF,#99C2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nn-theme .manifesto-text .strike{color:rgba(15,15,15,.4);}
.nn-theme .ms-text{color:#6E6E6E;}
.nn-theme .ms-line{background:rgba(15,15,15,.1);}
.nn-theme .manifesto-mark{color:#007BFF;}

/* parallax / ethos blocks */
.nn-theme .parallax-block,.nn-theme .ethos-block{
  background:#fff;border:1px solid rgba(15,15,15,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.06);
}
.nn-theme .parallax-block h3{color:#0F0F0F;}
.nn-theme .parallax-sig{color:#6E6E6E;}

/* â•â•â• SERVICES HERO LIVE IMAGES â•â•â• */
.cn-hero-bg.live-images,
.blog-hero-bg.live-images,
.services-hero-bg.live-images,
.about-hero-bg.live-images {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cn-hero-bg .live-img, .blog-hero-bg .live-img, .services-hero-bg .live-img, .about-hero-bg .live-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeSlide 24s infinite !important;
  transform: scale(1.05);
  filter: saturate(1);
    will-change: transform, opacity;
}
/* 3-image rotation (24s total, 8s each) for hero crossfades on index + about pages */
.cn-hero-bg .live-img:nth-child(1),
.about-hero-bg .live-img:nth-child(1) { animation-delay: 0s !important; animation-duration: 24s !important; }
.cn-hero-bg .live-img:nth-child(2),
.about-hero-bg .live-img:nth-child(2) { animation-delay: 8s !important; animation-duration: 24s !important; }
.cn-hero-bg .live-img:nth-child(3),
.about-hero-bg .live-img:nth-child(3) { animation-delay: 16s !important; animation-duration: 24s !important; }
/* darker filter on hero images so the white headline always reads clearly on top */
.cn-hero-bg .live-img,
.about-hero-bg .live-img,
.services-hero-bg .live-img,
.blog-hero-bg .live-img{filter:saturate(.85) brightness(.45) contrast(1.1);}
/* legacy 4-image fallback for blog / services hero (which still use 4 images each) */
.blog-hero-bg .live-img:nth-child(1),
.services-hero-bg .live-img:nth-child(1) { animation-delay: 0s !important; }
.blog-hero-bg .live-img:nth-child(2),
.services-hero-bg .live-img:nth-child(2) { animation-delay: 6s !important; }
.blog-hero-bg .live-img:nth-child(3),
.services-hero-bg .live-img:nth-child(3) { animation-delay: 12s !important; }
.blog-hero-bg .live-img:nth-child(4),
.services-hero-bg .live-img:nth-child(4) { animation-delay: 18s !important; }

@keyframes fadeSlide {
    0% { opacity: 0; transform: scale(1.05); }
    5% { opacity: 1; }
    45% { opacity: 1; }
    50% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0; }
  }
    5% { opacity: 1; }
    30% { opacity: 1; }
    35% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0; }
  }

.live-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,14,26,0.92) 0%, rgba(10,14,26,0.65) 100%);
  z-index: 1;
}

/* â•â•â• INLINE SERVICE DETAILS PANEL â•â•â• */
.ds-station {
  cursor: pointer;
}

.ds-details-panel {
  display: none;
  opacity: 0;
  grid-row: 1;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 2.2rem;
  box-shadow: var(--shadow-lg), 0 0 40px var(--glow-soft);
  max-width: 520px;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.ds-details-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-plasma);
}

.ds-station.is-open .ds-details-panel {
  display: block;
  opacity: 1;
  animation: panelSlideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ds-st-left .ds-details-panel {
  grid-column: 3;
  justify-self: start;
  margin-left: 90px;
}

.ds-st-right .ds-details-panel {
  grid-column: 1;
  justify-self: end;
  margin-right: 90px;
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-dp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}

.ds-dp-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c3);
  letter-spacing: 0.08em;
}

.ds-dp-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.ds-dp-close:hover {
  background: var(--c3);
  color: #fff;
  border-color: var(--c3);
}

.ds-dp-title {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
}

.ds-dp-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 1.6rem;
  font-weight: 300;
}

.ds-dp-group {
  margin-bottom: 1.4rem;
}
.ds-dp-group:last-child {
  margin-bottom: 0;
}
.ds-dp-group-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.ds-dp-group ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.ds-dp-group li {
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.ds-dp-group li::before {
  content: "›";
  color: var(--c3);
  font-weight: 600;
}
.ds-dp-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-dp-sla {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
}

/* â•â•â• CAPABILITY DRILL-DOWN STYLES â•â•â• */
.ds-card-body li {
  cursor: pointer;
  transition: color 0.2s;
}
.ds-card-body li:hover {
  color: var(--c3);
}

.ds-dp-interactive-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ds-dp-interactive-list li {
  display: block;
}
.ds-cap-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ds-cap-btn::after {
  content: "→";
  color: var(--c3);
  font-family: var(--font-mono);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s;
}
.ds-cap-btn:hover {
  background: rgba(0,123,255,0.05);
  border-color: rgba(0,123,255,0.3);
  color: #fff;
}
.ds-cap-btn:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.ds-dp-back {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.4rem 0;
  text-transform: uppercase;
  transition: color 0.2s;
}
.ds-dp-back:hover {
  color: var(--c3);
}

/* --- LET'S WORK TOGETHER — REDESIGNED --- */
.lwt-section {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
  background: var(--bg);
}

/* Background layers */
.lwt-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lwt-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,123,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,123,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.lwt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: lwtOrb 8s ease-in-out infinite alternate;
}
.lwt-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,123,255,0.12), transparent 70%);
  top: -100px; left: -100px;
  animation-delay: 0s;
}
.lwt-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(100,200,255,0.07), transparent 70%);
  bottom: -80px; right: -80px;
  animation-delay: -4s;
}
@keyframes lwtOrb {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px,30px) scale(1.1); }
}
.lwt-beam {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,123,255,0.3) 30%, rgba(0,123,255,0.3) 70%, transparent);
  opacity: 0.4;
}

/* Inner layout */
.lwt-inner {
  text-align: center;
}

/* Eyebrow */
.lwt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c3);
  margin-bottom: 2rem;
}
.lwt-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c3);
  animation: lwtDotPulse 2s ease-in-out infinite;
}
.lwt-dot:last-child { animation-delay: -1s; }
@keyframes lwtDotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.6); }
}

/* Title */
.lwt-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.lwt-accent {
  background: linear-gradient(135deg, var(--c3), #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.lwt-sub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 620px;
  margin: 0 auto 3rem;
}

/* Stat strip */
.lwt-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 4rem;
  padding: 1.8rem 2.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
.lwt-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.lwt-stat-num {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.lwt-stat-num sup {
  font-size: 0.7em;
  color: var(--c3);
}
.lwt-stat-l {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.lwt-stat-div {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Cards */
.lwt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}
.lwt-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(16px);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lwt-card:hover {
  border-color: rgba(0,123,255,0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.lwt-card-primary {
  border-color: rgba(0,123,255,0.3);
  background: linear-gradient(135deg, rgba(0,123,255,0.06) 0%, rgba(0,123,255,0.02) 100%);
}
.lwt-card-primary:hover {
  border-color: rgba(0,123,255,0.6);
  box-shadow: 0 20px 50px rgba(0,123,255,0.15);
}
.lwt-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(0,123,255,0.12);
  border: 1px solid rgba(0,123,255,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.4rem;
}
.lwt-card-icon svg {
  width: 20px; height: 20px;
  stroke: var(--c3);
}
.lwt-card-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c3);
}
.lwt-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.lwt-card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-2);
  flex: 1;
}
.lwt-card-btn {
  margin-top: 1rem;
  align-self: flex-start;
}
.lwt-phone-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.lwt-phone-link {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--c3);
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lwt-phone-link::before {
  content: "?";
  font-size: 0.75rem;
  opacity: 0.6;
}
.lwt-phone-link:hover { color: #ffb347; }

@media (max-width: 900px) {
  .lwt-cards { grid-template-columns: 1fr; }
  .lwt-stats { flex-wrap: wrap; gap: 1.5rem; }
  .lwt-stat-div { display: none; }
}

/* --- ENGINEERING PROCESS — REDESIGNED --- */
.ep-section {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
}
.ep-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ep-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,123,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,123,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}
.ep-glow {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%,-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,123,255,0.06), transparent 70%);
  filter: blur(60px);
}

/* Header */
.ep-head {
  text-align: center;
  margin-bottom: 5rem;
}
.ep-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c3);
  margin-bottom: 1.5rem;
}
.ep-eyebrow-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c3));
}
.ep-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--c3));
}
.ep-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1rem;
}
.ep-accent {
  background: linear-gradient(135deg, var(--c3), #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ep-sub {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 580px;
  margin: 0 auto;
}

/* Steps layout */
.ep-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ep-step {
  display: grid;
  grid-template-columns: 100px 60px 1fr;
  align-items: start;
  gap: 0 0;
}
.ep-step-alt {
  /* Right-side emphasis via border accent */
}

/* Phase number */
.ep-step-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  gap: 0.2rem;
}
.ep-num-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ep-num-val {
  font-family: var(--font-mono);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,123,255,0.3);
}
.ep-step:hover .ep-num-val {
  -webkit-text-stroke: 1px var(--c3);
  transition: all 0.3s;
}

/* Connector */
.ep-step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.2rem;
}
.ep-conn-line {
  width: 1px;
  flex: 1;
  min-height: 200px;
  background: linear-gradient(to bottom, var(--c3) 0%, rgba(0,123,255,0.1) 100%);
}
.ep-conn-last {
  background: linear-gradient(to bottom, var(--c3) 0%, transparent 100%);
}
.ep-conn-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c3);
  box-shadow: 0 0 12px var(--c3);
  flex-shrink: 0;
  order: -1;
  margin-bottom: 0;
}
.ep-conn-dot-last {
  box-shadow: 0 0 20px var(--c3), 0 0 40px rgba(0,123,255,0.3);
}

/* Card */
.ep-step-card {
  margin: 1.5rem 0 3rem 2.5rem;
  padding: 2rem 2.2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(0,123,255,0.3);
  border-radius: 0 12px 12px 0;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  position: relative;
}
.ep-step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, rgba(0,123,255,0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.ep-step-card:hover {
  border-left-color: var(--c3);
  background: rgba(0,123,255,0.03);
  transform: translateX(6px);
}
.ep-step-card:hover::before { opacity: 1; }

.ep-step-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c3);
  margin-bottom: 0.6rem;
}
.ep-step-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
}
.ep-step-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 1.4rem;
}

/* Tool chips */
.ep-step-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.ep-tool {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.3rem 0.8rem;
  background: rgba(0,123,255,0.06);
  border: 1px solid rgba(0,123,255,0.15);
  border-radius: 20px;
  color: var(--text-2);
  letter-spacing: 0.05em;
  transition: all 0.2s;
}
.ep-step-card:hover .ep-tool {
  border-color: rgba(0,123,255,0.3);
  color: var(--text);
}

/* Output line */
.ep-step-output {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.ep-output-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.ep-output-val {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(0,123,255,0.7);
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .ep-step {
    grid-template-columns: 50px 30px 1fr;
    gap: 0;
  }
  .ep-num-val { font-size: 1.8rem; }
  .ep-step-card { margin-left: 1rem; padding: 1.4rem; }
  .ep-conn-line { min-height: 140px; }
}

/* --- PROCESS — BENTO GRID --- */
.prc-section {
  position: relative;
  padding: 8rem 0 6rem;
  overflow: hidden;
}
.prc-ambient { position: absolute; inset: 0; pointer-events: none; }
.prc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: prcFloat 10s ease-in-out infinite alternate;
}
.prc-o1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,123,255,0.08), transparent 70%);
  top: -100px; right: -100px;
}
.prc-o2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168,85,247,0.06), transparent 70%);
  bottom: -80px; left: -80px;
  animation-delay: -5s;
}
@keyframes prcFloat {
  from { transform: translate(0,0); }
  to   { transform: translate(30px, 20px); }
}

/* Header */
.prc-head { margin-bottom: 4rem; max-width: 640px; }
.prc-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c3);
  margin-bottom: 1.2rem;
}
.prc-label-tick {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c3);
  box-shadow: 0 0 8px var(--c3);
  animation: prcTick 1.4s ease-in-out infinite;
}
@keyframes prcTick {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.3; transform:scale(0.5); }
}
.prc-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.prc-em {
  font-style: normal;
  background: linear-gradient(135deg, #007BFF, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prc-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* 2x2 bento grid */
.prc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Individual card */
.prc-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform 0.4s cubic-bezier(.2,0,.2,1), border-color 0.3s, box-shadow 0.4s;
  cursor: default;
}
.prc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pc, #007BFF);
  border-radius: 20px 20px 0 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.prc-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--pc) 40%, transparent);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--pc) 20%, transparent);
}
.prc-card:hover::before { transform: scaleX(1); }

/* Watermark number */
.prc-card-watermark {
  position: absolute;
  right: -0.5rem;
  top: -1rem;
  font-family: var(--font-sans);
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--pc) 15%, transparent);
  user-select: none;
  pointer-events: none;
  transition: -webkit-text-stroke 0.3s;
}
.prc-card:hover .prc-card-watermark {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--pc) 35%, transparent);
}

/* Card top row */
.prc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.prc-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.prc-card-icon svg {
  width: 18px; height: 18px;
  stroke: var(--pc);
}
.prc-phase {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 20%, transparent);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
}
.prc-card-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.prc-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.prc-card-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-2);
  flex: 1;
}

/* Chips */
.prc-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.prc-card-chips span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.25rem 0.65rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-2);
  transition: all 0.2s;
}
.prc-card:hover .prc-card-chips span {
  border-color: color-mix(in srgb, var(--pc) 30%, transparent);
  color: var(--text);
}

/* Output footer */
.prc-card-foot {
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
  margin-top: auto;
}
.prc-card-foot code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--pc) 70%, white);
  background: color-mix(in srgb, var(--pc) 6%, transparent);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

/* Pipeline flow strip */
.prc-flow-strip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  overflow-x: auto;
}
.prc-flow-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  white-space: nowrap;
}
.prc-flow-item.active { color: var(--text); }
.prc-flow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.prc-flow-item.active .prc-flow-dot {
  background: var(--c3);
  box-shadow: 0 0 6px var(--c3);
  animation: prcTick 1.4s infinite;
}
.prc-flow-arrow {
  color: rgba(255,255,255,0.15);
  font-size: 0.65rem;
  white-space: nowrap;
}
.prc-flow-status {
  margin-left: auto;
  color: #10B981;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  animation: prcTick 2s ease-in-out infinite;
}

@media (max-width: 768px) {
  .prc-grid { grid-template-columns: 1fr; }
  .prc-card-watermark { font-size: 5rem; }
}

/* --- JOURNEY — EDITORIAL SPLIT LAYOUT --- */
.jny-section {
  padding: 9rem 0;
  background: var(--bg);
}

/* Header */
.jny-head {
  margin-bottom: 6rem;
}
.jny-overline {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c3);
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.jny-overline::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--c3);
  border-radius: 2px;
}
.jny-title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1.05;
}
.jny-title-accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--c3);
}

/* Each row */
.jny-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
  padding: 5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.jny-row:last-child { border-bottom: none; }

/* Flipped row */
.jny-row-flip {
  grid-template-columns: 1.4fr 1fr;
}
.jny-row-flip .jny-visual { order: 2; }
.jny-row-flip .jny-content { order: 1; }

/* Visual panel */
.jny-visual {
  position: relative;
  height: 360px;
  border-radius: 28px;
  background: var(--jc, linear-gradient(135deg, #007BFF, #ff9a5c));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
  transition: transform 0.5s cubic-bezier(.2,0,.2,1), box-shadow 0.5s;
}
.jny-visual:hover {
  transform: scale(1.02) rotate(-0.5deg);
  box-shadow: 0 50px 100px rgba(0,0,0,0.5);
}
.jny-vis-num {
  font-size: 10rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.15);
  position: absolute;
  bottom: -1.5rem;
  right: 1rem;
  user-select: none;
  letter-spacing: -0.05em;
}
.jny-vis-ring {
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  position: absolute;
  animation: jnyRingSpin 12s linear infinite;
}
.jny-vis-ring::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
}
@keyframes jnyRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.jny-vis-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  position: relative;
  z-index: 1;
}

/* Content side */
.jny-content { display: flex; flex-direction: column; gap: 1.2rem; }

.jny-step-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  gap: 0.6rem;
}
.jny-step-badge::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: rgba(255,255,255,0.3);
}

.jny-step-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

.jny-step-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 500px;
}

.jny-step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.jny-step-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-2);
  font-weight: 500;
}
.jny-step-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c3);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--c3);
}

@media (max-width: 900px) {
  .jny-row,
  .jny-row-flip {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .jny-row-flip .jny-visual,
  .jny-row-flip .jny-content { order: unset; }
  .jny-visual { height: 260px; }
  .jny-vis-num { font-size: 6rem; }
}

/* --- SDLC WHEEL --- */
.sdlc-section {
  padding: 8rem 0;
  background: var(--bg);
  overflow: hidden;
}

/* Header */
.sdlc-head {
  text-align: center;
  margin-bottom: 5rem;
}
.sdlc-overline {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c3);
  font-weight: 600;
  display: block;
  margin-bottom: 0.8rem;
}
.sdlc-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 0.8rem;
}
.sdlc-accent {
  background: linear-gradient(135deg, #007BFF, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sdlc-sub {
  font-size: 1rem;
  color: var(--text-2);
}

/* Layout: wheel + panel side by side */
.sdlc-layout {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 5rem;
  align-items: center;
}

/* WHEEL */
.sdlc-wheel {
  position: relative;
  width: 500px;
  height: 500px;
  flex-shrink: 0;
}

/* SVG arcs fill the wheel */
.sdlc-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.sdlc-arc {
  transition: opacity 0.3s, stroke-width 0.3s;
}

/* Glowing center hub */
.sdlc-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 130px; height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid rgba(0,123,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 0 40px rgba(0,123,255,0.2), inset 0 0 30px rgba(0,123,255,0.05);
}
.sdlc-hub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sdlc-hub-label {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c3);
}
.sdlc-hub-sub {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.sdlc-hub-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(0,123,255,0.2);
  animation: sdlcPulse 2.5s ease-in-out infinite;
}
@keyframes sdlcPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 0.2; }
}

/* Phase nodes */
.sdlc-node {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.35s cubic-bezier(.2,0,.2,1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.sdlc-node:hover,
.sdlc-node.active {
  background: var(--nc, var(--c3));
  border-color: var(--nc, var(--c3));
  transform: translate(var(--tx,0), var(--ty,0)) scale(1.12);
  box-shadow: 0 0 30px color-mix(in srgb, var(--nc, var(--c3)) 50%, transparent), 0 12px 32px rgba(0,0,0,0.4);
}
/* Fix transform for each node individually */
.sdlc-n1 { --tx: -50%; --ty: -50%; }
.sdlc-n1:hover, .sdlc-n1.active { transform: translate(-50%, -50%) scale(1.12); }
.sdlc-n2 { --tx: 50%; --ty: -50%; }
.sdlc-n2:hover, .sdlc-n2.active { transform: translate(50%, -50%) scale(1.12); }
.sdlc-n3 { --tx: -50%; --ty: 50%; }
.sdlc-n3:hover, .sdlc-n3.active { transform: translate(-50%, 50%) scale(1.12); }
.sdlc-n4 { --tx: -50%; --ty: -50%; }
.sdlc-n4:hover, .sdlc-n4.active { transform: translate(-50%, -50%) scale(1.12); }

.sdlc-node-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: inherit;
}
.sdlc-node-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: inherit;
}
.sdlc-node:not(.active) .sdlc-node-num { color: var(--nc, var(--c3)); }
.sdlc-node:not(.active) .sdlc-node-name { color: var(--text, #fff); }
.sdlc-node.active .sdlc-node-num,
.sdlc-node.active .sdlc-node-name { color: #fff; }

/* PANEL */
.sdlc-panel {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2.4rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid var(--pc, #007BFF);
  min-height: 360px;
  transition: border-color 0.4s;
}
.sdlc-panel-in {
  animation: sdlcPanelIn 0.4s cubic-bezier(.2,0,.2,1) both;
}
@keyframes sdlcPanelIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sdlc-panel-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--pc, var(--c3));
  font-weight: 700;
}
.sdlc-panel-sub {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sdlc-panel-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}
.sdlc-panel-desc {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--text-2);
}
.sdlc-panel-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}
.sdlc-panel-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.93rem;
  color: var(--text-2);
}
.sdlc-panel-list li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pc, var(--c3));
  box-shadow: 0 0 8px var(--pc, var(--c3));
  flex-shrink: 0;
}
.sdlc-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pc, var(--c3));
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s;
}
.sdlc-panel-cta:hover { gap: 0.8rem; }

@media (max-width: 900px) {
  .sdlc-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .sdlc-wheel {
    width: 340px;
    height: 340px;
    margin: 0 auto;
  }
  .sdlc-hub { width: 90px; height: 90px; }
  .sdlc-node { width: 68px; height: 68px; }
  .sdlc-node-num, .sdlc-node-name { font-size: 0.6rem; }
}

/* --- SCROLL-TRACKING LIGHT DROP --- */
.ds-scroll-drop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 3px rgba(0,123,255,0.9),
    0 0 20px 8px rgba(0,123,255,0.5),
    0 0 40px 14px rgba(0,123,255,0.2);
  z-index: 10;
  pointer-events: none;
  transition: top 0.12s linear;
  will-change: top;
}
.ds-scroll-drop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.7), transparent);
  border-radius: 2px;
}

/* idle pulse when scroll stops */
.ds-scroll-drop.ds-drop-idle {
  animation: dropIdle 1.6s ease-in-out infinite;
}
@keyframes dropIdle {
  0%,100% {
    box-shadow:
      0 0 6px 3px rgba(0,123,255,0.9),
      0 0 20px 8px rgba(0,123,255,0.5),
      0 0 40px 14px rgba(0,123,255,0.2);
  }
  50% {
    box-shadow:
      0 0 10px 5px rgba(0,123,255,1),
      0 0 32px 14px rgba(0,123,255,0.6),
      0 0 60px 22px rgba(0,123,255,0.25);
  }
}




















/* ────────────────────────────────────────────────
   ARCHITECTURAL CHART (Replaces 6 Cards)
──────────────────────────────────────────────── */
.cn-arch {
  margin: 2rem auto 4rem;
  font-family: var(--font-sans);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 1000px;
  width: 100%;
}

.cn-arch-logo {
  background: var(--c1);
  border-radius: 40px;
  padding: 0.8rem 2.8rem;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  z-index: 2;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cn-arch-logo .st { color: var(--c3); font-size: 1.6rem; font-style: italic; letter-spacing: -2px; padding-right: 4px;}

a.cn-arch-node {
  display: inline-block;
  background: var(--c1);
  border: 2px solid var(--c3);
  border-radius: 40px;
  padding: 0.8rem 2.8rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.2);
  position: relative;
  text-align: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
a.cn-arch-node:hover {
  background: rgba(0, 123, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 123, 255, 0.4);
  transform: translateY(-3px) scale(1.05);
}

.cn-arch-line-v {
  width: 2px;
  height: 35px;
  background: var(--c3);
  position: relative;
}
.cn-arch-line-v::after, .cn-arch-branch::after, .cn-arch-sub-branch::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--c3);
}

.cn-arch-list {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0 0 0 1.5rem;
  position: relative;
  text-align: left;
}
.cn-arch-list li {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.4rem;
  position: relative;
  line-height: 1.4;
}
.cn-arch-list li::before {
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.45rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c3);
}

.cn-arch-split {
  display: flex;
  width: 100%;
  position: relative;
  margin-top: 1.5rem;
  justify-content: space-around;
}
.cn-arch-h-line {
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--c3);
}
.cn-arch-branch {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 1rem;
}
.cn-arch-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 25px;
  background: var(--c3);
  transform: translateX(-50%);
}
.cn-arch-branch::after {
  top: 25px;
  bottom: auto;
}

.cn-arch-branch-inner {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

a.cn-arch-branch-title {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  border-radius: 20px;
  transition: all 0.3s ease;
}
a.cn-arch-branch-title:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
  color: var(--c3);
  transform: translateY(-2px);
}

.cn-arch-subsplit {
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
  margin-top: 1.5rem;
  gap: 1rem;
}
.cn-arch-subsplit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--c3);
}
.cn-arch-sub-branch {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cn-arch-sub-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 20px;
  background: var(--c3);
  transform: translateX(-50%);
}
.cn-arch-sub-branch::after {
  top: 20px;
  bottom: auto;
}
.cn-arch-sub-branch a.cn-arch-branch-title {
  margin-top: 35px;
}

/* Animations */
.cn-arch.up .cn-arch-node,
.cn-arch.up .cn-arch-branch-title,
.cn-arch.up .cn-arch-list li {
  opacity: 0;
  animation: archFadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes archFadeUp {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Staggering the animation based on hierarchy */
.cn-arch-logo { animation-delay: 0.1s; }
.cn-arch-node { animation-delay: 0.2s; }
.cn-arch-list li:nth-child(1) { animation-delay: 0.3s; }
.cn-arch-list li:nth-child(2) { animation-delay: 0.35s; }
.cn-arch-list li:nth-child(3) { animation-delay: 0.4s; }
.cn-arch-list li:nth-child(4) { animation-delay: 0.45s; }
.cn-arch-list li:nth-child(5) { animation-delay: 0.5s; }
.cn-arch-list li:nth-child(6) { animation-delay: 0.55s; }

.cn-arch-branch-inner .cn-arch-node { animation-delay: 0.6s; }
.cn-arch-branch-title { animation-delay: 0.7s; }
.cn-arch-branch-inner .cn-arch-list li { animation-delay: 0.8s; }

@media (max-width: 900px) {
  .cn-arch-split { flex-direction: column; gap: 3rem; }
  .cn-arch-h-line { display: none; }
  .cn-arch-branch::before { display: none; }
  .cn-arch-branch::after { display: none; }
  .cn-arch-branch-inner { margin-top: 0; }
  
  .cn-arch-subsplit { flex-direction: column; gap: 2rem; }
  .cn-arch-subsplit::before { display: none; }
  .cn-arch-sub-branch::before { display: none; }
  .cn-arch-sub-branch::after { display: none; }
  .cn-arch-sub-branch a.cn-arch-branch-title { margin-top: 0; }
}

/* ════════════════════════════════════════════════
   ARCHITECTURE CHART — Premium Tree Layout
════════════════════════════════════════════════ */
.arch-chart {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Animation base state */
.arch-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2,0.8,0.2,1), transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.arch-anim.arch-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ROOT / DIVISION / IT NODES */
a.arch-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  border-radius: 16px;
  padding: 1.2rem 2.4rem;
  gap: 4px;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
a.arch-node:hover {
  transform: translateY(-4px) scale(1.03);
}

/* Root node */
.arch-node-root {
  background: linear-gradient(135deg, rgba(0,123,255,0.15), rgba(0,80,180,0.08));
  border: 2px solid rgba(0,123,255,0.6);
  box-shadow: 0 0 40px rgba(0,123,255,0.2), 0 8px 32px rgba(0,0,0,0.4);
  padding: 1.4rem 3rem;
  min-width: 280px;
}
.arch-node-root:hover {
  box-shadow: 0 0 60px rgba(0,123,255,0.4), 0 12px 40px rgba(0,0,0,0.5);
  border-color: rgba(0,123,255,1);
}

.arch-node-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.arch-st {
  font-family: var(--font-serif, serif);
  font-style: italic;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--c3, #007BFF);
  letter-spacing: -2px;
  line-height: 1;
}
.arch-node-root .arch-node-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #fff;
}
.arch-node-root .arch-node-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  font-family: var(--font-mono, monospace);
}

/* Research node */
.arch-node-research {
  background: linear-gradient(135deg, rgba(0,123,255,0.12), rgba(0,60,140,0.06));
  border: 2px solid rgba(0,123,255,0.4);
  box-shadow: 0 0 24px rgba(0,123,255,0.15), 0 4px 20px rgba(0,0,0,0.35);
  padding: 1rem 2.2rem;
  min-width: 220px;
}
.arch-node-research:hover {
  box-shadow: 0 0 40px rgba(0,123,255,0.35), 0 8px 28px rgba(0,0,0,0.45);
  border-color: rgba(0,123,255,0.8);
}
.arch-node-research .arch-node-icon { font-size: 1.3rem; line-height:1; }
.arch-node-research .arch-node-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
}

/* Division nodes (Technical / IT) */
.arch-node-tech, .arch-node-it {
  background: linear-gradient(135deg, rgba(0,123,255,0.1), rgba(0,50,120,0.06));
  border: 2px solid rgba(0,123,255,0.35);
  box-shadow: 0 0 20px rgba(0,123,255,0.12), 0 4px 16px rgba(0,0,0,0.3);
  min-width: 180px;
  padding: 1rem 1.6rem;
}
.arch-node-tech:hover, .arch-node-it:hover {
  box-shadow: 0 0 36px rgba(0,123,255,0.3), 0 8px 24px rgba(0,0,0,0.4);
  border-color: rgba(0,123,255,0.7);
}
.arch-node-tech .arch-node-icon,
.arch-node-it .arch-node-icon { font-size: 1.2rem; line-height:1; }
.arch-node-tech .arch-node-name,
.arch-node-it .arch-node-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.arch-node-tag {
  font-size: 0.65rem;
  color: var(--c3, #007BFF);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Sub nodes (WEB / CYBER) */
a.arch-sub-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  border: 1px solid rgba(0,123,255,0.3);
  border-radius: 12px;
  padding: 0.7rem 1.4rem;
  min-width: 130px;
  background: rgba(0,123,255,0.06);
  transition: all 0.3s ease;
}
a.arch-sub-node:hover {
  background: rgba(0,123,255,0.12);
  border-color: rgba(0,123,255,0.6);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(0,123,255,0.2);
}
.arch-sub-node-name {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

/* LEVELS */
.arch-level { display: flex; flex-direction: column; align-items: center; width: 100%; }
.arch-level-root { margin-bottom: 0; }
.arch-level-2 { gap: 0.8rem; }

/* VERTICAL CONNECTORS */
.arch-connector-v {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.6), rgba(0,123,255,0.3));
  position: relative;
}
.arch-connector-v::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(0,123,255,0.5);
}

.arch-sub-vline {
  width: 2px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.5), rgba(0,123,255,0.25));
  position: relative;
}
.arch-sub-vline::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(0,123,255,0.4);
}

.arch-division-vline {
  width: 2px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.5), rgba(0,123,255,0.25));
  position: relative;
}
.arch-division-vline::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(0,123,255,0.4);
}

/* HORIZONTAL BRANCH BAR */
.arch-hbar-wrap {
  position: relative;
  width: 70%;
  max-width: 700px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto;
}
.arch-hbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(0,123,255,0.3), rgba(0,123,255,0.7) 50%, rgba(0,123,255,0.3));
}
.arch-hbar-dot {
  position: absolute;
  top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c3, #007BFF);
  box-shadow: 0 0 10px rgba(0,123,255,0.6);
}
.arch-hbar-dot-l { left: 0; }
.arch-hbar-dot-r { right: 0; }

/* DIVISIONS ROW */
.arch-divisions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}

/* INDIVIDUAL DIVISION COLUMN */
.arch-division {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* SUB-LABEL under tech node */
.arch-sub-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono, monospace);
  margin: 4px 0 8px;
}

/* CAPABILITY BOXES */
.arch-caps-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,123,255,0.12);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
  margin-top: 4px;
}
.arch-caps-box-wide { max-width: 400px; }
.arch-caps-box-sm { max-width: 220px; min-width: 160px; padding: 1rem 1.2rem; }

.arch-caps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.arch-caps li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
  padding-left: 1.1rem;
  position: relative;
}
.arch-caps li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c3, #007BFF);
  box-shadow: 0 0 6px rgba(0,123,255,0.5);
}
.arch-caps small {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  display: block;
  margin-top: 1px;
}

/* 2-column layout for long lists */
.arch-caps-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.2rem;
}

/* IT SUB-SPLIT */
.arch-it-split {
  display: flex;
  gap: 1.5rem;
  position: relative;
  width: 100%;
  justify-content: center;
  margin-top: 0;
}
.arch-it-split::before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(to right, rgba(0,123,255,0.3), rgba(0,123,255,0.6) 50%, rgba(0,123,255,0.3));
}
.arch-it-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.arch-it-vline {
  width: 2px;
  height: 22px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.5), rgba(0,123,255,0.2));
  position: relative;
}
.arch-it-vline::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(0,123,255,0.35);
}

/* RESPONSIVE */
@media (max-width: 860px) {
  .arch-divisions { grid-template-columns: 1fr; gap: 3rem; }
  .arch-hbar-wrap { display: none; }
  .arch-caps-2col { grid-template-columns: 1fr; }
  .arch-it-split::before { display: none; }
  .arch-it-split { flex-direction: column; gap: 1.5rem; }
  .arch-caps-box-wide { max-width: 100%; }
}

/* ARCH-CHART visibility fix – show all by default, JS adds class for animation */
.arch-anim { opacity: 1 !important; transform: none !important; }
.arch-chart-animated .arch-anim { opacity: 0 !important; transform: translateY(24px) !important; }
.arch-chart-animated .arch-anim.arch-visible { opacity: 1 !important; transform: translateY(0) !important; }

/* vertical connector line */
.arch-connector-v {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.7), rgba(0,123,255,0.3));
  position: relative;
  align-self: center;
}
.arch-connector-v::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(0,123,255,0.6);
}

/* short vline under division node */
.arch-vline {
  width: 2px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.6), rgba(0,123,255,0.2));
  position: relative;
  align-self: center;
}
.arch-vline-down { height: 28px; }
.arch-vline-short { height: 20px; }
.arch-vline::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(0,123,255,0.4);
}

/* horizontal bar line */
.arch-hbar-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(0,123,255,0.2), rgba(0,123,255,0.8) 50%, rgba(0,123,255,0.2));
}

/* IT sub-branch */
.arch-it-vline {
  width: 2px; height: 20px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.5), rgba(0,123,255,0.2));
  position: relative;
  align-self: center;
}
.arch-it-vline::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(0,123,255,0.35);
}

/* sub node icons */
.arch-sub-node-icon { font-size: 1rem; line-height: 1; margin-bottom: 4px; }
/* Fix for Research Box width */
.arch-caps-box-research {
  width: auto;
  min-width: 280px;
  max-width: 380px;
  margin: 8px auto 0;
}
/* Vertical connector below research */
.arch-connector-v-down {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, rgba(0,123,255,0.4), rgba(0,123,255,0.8));
  position: relative;
  align-self: center;
  margin: 0 auto;
}
/* Ensure the hbar dots align perfectly */
.arch-hbar-wrap { margin-top: 0; }

/* ════════════════════════════════════════════════════════════
   MOBILE FIT — final overrides to keep every page inside the
   viewport on phones / tablets. Loaded last so it wins specificity
   ties without needing !important everywhere.
   ════════════════════════════════════════════════════════════ */

/* Global: never let anything force horizontal scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, svg:not(.icon), iframe, canvas {
  max-width: 100%;
}
img, video { height: auto; }

/* ── 1024px: tablets — disable custom cursor, soften container padding ── */
@media (max-width: 1024px) {
  #cur, #cur-ring { display: none !important; }
  html, body, a, button, .hamburger { cursor: auto !important; }
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── 900px: collapse 4-col stat / fact grids to 2-col ── */
@media (max-width: 900px) {
  .ah-stats-inline, .sh-stats-inline, .bh-stats,
  .stats-grid, .ah-facts, .ch-methods,
  .nn-mock-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  /* lwt-stats is flex on some pages */
  .lwt-stats { flex-wrap: wrap !important; justify-content: center; gap: 1rem 2rem !important; }
  .lwt-stat { flex: 0 1 calc(50% - 2rem); text-align: center; }
  .lwt-stat-div { display: none !important; }

  .problem-grid, .services-full-grid, .sm-grid,
  .why-strip, .mosaic, .blog-mosaic, .blog-grid-3,
  .lwt-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }

  /* Pipe-split (services page) → stack vertically, hide trunk */
  .ds-pipe-wrap {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ds-pipe-wrap > .ds-station,
  .ds-pipe-wrap > .ds-pipe-trunk,
  .ds-pipe-wrap > .ds-pipe-trunk-mid,
  .ds-pipe-wrap > .ds-pipe-subs {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Hide the centre trunk on mobile (real class is ds-pipe-trunk-mid) */
  .ds-pipe-trunk,
  .ds-pipe-trunk-mid { display: none !important; }
  .ds-sub-card { margin-top: 0 !important; }
  .ds-sub-card::before, .ds-sub-card::after { display: none !important; }

  /* CRITICAL — .ds-station has its OWN inner 3-col grid where the card
     occupies just ONE of three columns (the other 2 are empty space for
     the desktop side-trunk). On mobile that crushes the card to ~25% of
     the viewport, breaking text to one character per line. Reset to 1-col. */
  .ds-station,
  .ds-st-left,
  .ds-st-right {
    grid-template-columns: 1fr !important;
    display: block !important;
    margin: 1rem 0 !important;
  }
  .ds-st-left .ds-card,
  .ds-st-right .ds-card,
  .ds-station .ds-card {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Tap pads + decorative vein are only meaningful next to the desktop
     trunk — kill them on mobile so they don't reserve dead space */
  .ds-st-left .ds-tap,
  .ds-st-right .ds-tap,
  .ds-vein { display: none !important; }

  /* Hero headings scale */
  h1, .bh-title, .prc-title { font-size: clamp(2rem, 6vw, 3rem) !important; }
}

/* ── 768px: hide desktop nav, collapse most multi-col grids to 1 col ── */
@media (max-width: 768px) {
  nav .nav-links { display: none !important; }
  nav .hamburger { display: inline-flex !important; }

  .ah-stats-inline, .sh-stats-inline, .bh-stats,
  .stats-grid, .ah-facts, .ch-methods,
  .nn-mock-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .problem-grid, .services-full-grid, .sm-grid,
  .why-strip, .mosaic, .blog-mosaic, .blog-grid-3,
  .blog-grid, .lwt-cards,
  #relatedGrid {
    grid-template-columns: 1fr !important;
  }

  .footer-top { grid-template-columns: 1fr !important; }

  /* Architecture chart (homepage) — force every level to stack and hide connector decoration */
  .arch-chart {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
    overflow: hidden !important;
  }
  .arch-level, .arch-level-root, .arch-level-2, .arch-level-3, .arch-level-4,
  .arch-divisions, .arch-it-split {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  /* Division / branch columns: fill width, remove desktop centering */
  .arch-division, .arch-it-branch {
    width: 100% !important;
    align-items: stretch !important;
  }
  /* Nodes: drop min-width so caps boxes can fill */
  a.arch-node,
  .arch-node-root, .arch-node-research,
  .arch-node-tech, .arch-node-it {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 1.2rem !important;
    box-sizing: border-box !important;
  }
  /* Caps boxes fill full width and never overflow */
  .arch-caps-box,
  .arch-caps-box-sm,
  .arch-caps-box-wide,
  .arch-caps-box-research {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Lists inside caps boxes: always single column on mobile */
  .arch-caps, .arch-caps-2col {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .arch-caps li {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .arch-caps small { font-size: 0.68rem !important; }
  /* Hide horizontal connectors / decorative lines that confuse the stacked layout */
  .arch-connector-h, .arch-hbar-wrap, .arch-hbar-line,
  .arch-it-vline, .arch-vline { display: none !important; }
  /* Keep the short vertical connector but tighten it */
  .arch-connector-v, .arch-connector-v-down {
    height: 24px !important;
    align-self: center !important;
  }

  /* Hero typography */
  h1 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; line-height: 1.18; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; }

  /* Live-images hero collages → don't shrink below readable size */
  .cn-collage { max-width: 100% !important; height: auto !important; min-height: 280px !important; }

  /* Featured blog tile: stack image + body */
  .bh-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .bh-featured { grid-template-columns: 1fr !important; }
  .bh-featured-img { aspect-ratio: 16/10; }
}

/* ── 600px: phones — collapse stats to 1 col, slim padding ── */
@media (max-width: 600px) {
  .ah-stats-inline, .sh-stats-inline, .bh-stats,
  .stats-grid, .ah-facts, .ch-methods,
  .nn-mock-stats, .lwt-stats {
    grid-template-columns: 1fr !important;
  }
  .lwt-stat { flex: 1 1 100% !important; }

  .container { padding-left: 1rem; padding-right: 1rem; }

  /* CTAs full-width */
  .btn-fire, .btn-outline, .lwt-card-btn,
  .bh-featured-cta { width: 100%; text-align: center; justify-content: center; }

  /* Footer bottom row stacks */
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.8rem !important;
    text-align: center;
    align-items: center !important;
  }
  .f-legal { flex-wrap: wrap; justify-content: center; gap: 0.8rem 1.2rem; }

  /* Blog filter buttons wrap nicely */
  .blog-filter-bar { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .blog-filter { flex: 0 0 auto; font-size: 0.78rem; padding: 0.5rem 0.9rem; }

  /* Hero stat numbers don't overflow */
  .bh-stat .num, .ah-stat-item .num, .sh-stat-item .num, .lwt-stat-num {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
  }
}

/* ── Contact page specific (all phones / small tablets) ── */
@media (max-width: 900px) {
  /* Hero — trim the massive 11rem top padding so content is reachable */
  .contact-hero,
  .about-hero,
  .services-hero,
  .blog-hero { padding: 6rem 1.25rem 3rem !important; }

  /* Stack hero grid (already at 1024 — make doubly sure here) */
  .ch-grid, .cfs-grid, .bh-grid, .ah-grid, .sh-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Form section: less aggressive side padding */
  .contact-form-section { padding: 4rem 1.25rem !important; }
  .contact-map { padding: 0 1.25rem 4rem !important; }

  /* Form wrap inner padding */
  .contact-form-wrap { padding: 1.5rem 1.25rem !important; }
  .ch-card { padding: 1.4rem 1.25rem !important; }
  .ch-expect { padding: 1.2rem 1.25rem !important; }

  /* Inputs: 16px font-size prevents iOS auto-zoom on focus */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
    padding: 0.85rem 0.9rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .form-group textarea { min-height: 100px !important; }

  /* Two-input rows stack on mobile */
  .form-row { grid-template-columns: 1fr !important; gap: 0.6rem !important; }

  /* Quick-action buttons: let long emails wrap, give icon room */
  .ch-quick-btn {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.7rem 0.8rem !important;
  }
  .ch-quick-l {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 0.78rem !important;
  }

  /* Methods strip — stack to 1 col and respect borders cleanly */
  .ch-methods { grid-template-columns: 1fr !important; }
  .ch-method  { border-right: none !important; border-bottom: 1px solid var(--border); padding: 1.2rem 1.25rem !important; }
  .ch-method:last-child { border-bottom: none !important; }
  .ch-method-v a {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Map embed: reduce height so it doesn't dominate the screen */
  .map-embed { height: 280px !important; }
  .cms-head { flex-direction: column; align-items: flex-start !important; gap: 1rem !important; }

  /* CTA buttons in hero stack and go full-width */
  .ch-btns, .ah-btns, .sh-btns { flex-direction: column !important; }
  .ch-btns .btn-fire, .ch-btns .btn-outline,
  .ah-btns .btn-fire, .ah-btns .btn-outline,
  .sh-btns .btn-fire, .sh-btns .btn-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Hero title scales down */
  .ch-title, .ah-title, .sh-title, .bh-title {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }
}

/* ── 480px: small phones — final shrink ── */
@media (max-width: 480px) {
  h1, .bh-title { font-size: 1.65rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.1rem !important; }

  section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  .post-title { font-size: 1.8rem !important; line-height: 1.2 !important; }
  .post-lead { font-size: 1rem !important; }
  .post-body { font-size: 0.95rem !important; }

  /* Sub-card text */
  .ds-sub-card h4 { font-size: 1.1rem !important; }
  .ds-sub-card p { font-size: 0.88rem !important; }
  .ds-sub-card { padding: 1.2rem 1.1rem !important; }
}
