:root {
  /* Agentic Navy + Electric Blue palette */
  --bg:       #F4F6FA;
  --bg2:      #FFFFFF;
  --bg3:      #EBF0F9;
  --surface:  rgba(0,102,255,0.05);
  --surface2: rgba(0,102,255,0.1);
  --border:   rgba(0,102,255,0.12);
  --border2:  rgba(0,102,255,0.25);
  --text:     #080F1E;
  --text2:    #1A2B4A;
  --muted:    rgba(8,15,30,0.72);
  --dim:      rgba(8,15,30,0.5);

  /* Brand vivids — agentic electric */
  --violet:   #0066FF;
  --violet2:  #3385FF;
  --violet3:  #0052CC;
  --cyan:     #00C2FF;
  --cyan2:    #33CFFF;
  --magenta:  #F59E0B;
  --magenta2: #FBB83A;
  --emerald:  #00D68F;
  --emerald2: #2DEBA8;
  --rose:     #FF4D6A;
  --amber:    #F59E0B;
  --indigo:   #0044CC;

  --grad-brand:   linear-gradient(135deg, #0066FF 0%, #00C2FF 50%, #00D68F 100%);
  --grad-vp:      linear-gradient(135deg, #0066FF, #00C2FF);
  --grad-pc:      linear-gradient(135deg, #00C2FF, #00D68F);
  --grad-vc:      linear-gradient(135deg, #0066FF, #00C2FF);
  --grad-em:      linear-gradient(135deg, #00C2FF, #00D68F);

  --font-head:  "Bricolage Grotesque", sans-serif;
  --font-mono:  "Geist Mono", monospace;

  --shadow-sm:  0 1px 3px rgba(0,102,255,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,102,255,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 40px rgba(0,102,255,0.15), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:  0 24px 64px rgba(0,102,255,0.2), 0 8px 24px rgba(0,0,0,0.1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--font-head);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── CURSOR ── */
#cur {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--violet);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .15s, height .15s, background .2s;
}
#cur-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(0, 102, 255, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, border-color .25s;
}
body:has(a:hover) #cur, body:has(button:hover) #cur { width: 14px; height: 14px; background: var(--cyan); }
body:has(a:hover) #cur-ring, body:has(button:hover) #cur-ring { width: 44px; height: 44px; border-color: rgba(0, 194, 255, 0.6); }

/* ── SOFT BACKGROUND BLOBS ── */
.bg-blobs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-blob {
  position:absolute; border-radius:50%; filter:blur(100px);
  animation: blobDrift 18s ease-in-out infinite;
}
.b1 { width:700px; height:700px; background:rgba(0,102,255,0.06); top:-200px; left:-150px; animation-delay:0s; }
.b2 { width:600px; height:600px; background:rgba(0,194,255,0.06); top:30%; right:-200px; animation-delay:-6s; }
.b3 { width:500px; height:500px; background:rgba(0,214,143,0.05); bottom:-100px; left:25%; animation-delay:-12s; }
@keyframes blobDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(40px,-50px) scale(1.06); }
  66% { transform:translate(-30px,30px) scale(0.94); }
}

/* ── NAV ── */
nav {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:0 3rem; transition:all .4s;
}
nav.scrolled {
  background:rgba(248,247,255,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.nav-inner {
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo svg { height:58px; width:auto; display:block; }



.nav-links { display:flex; align-items:center; gap:.2rem; list-style:none; }
.nav-links a {
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.8px;
  color:var(--text2); text-decoration:none; padding:.5rem .9rem;
  border-radius:8px; transition:all .2s; font-weight:700;
  text-transform:uppercase; border-bottom:2px solid transparent;
}
.nav-links li:not(:last-child) a { color:var(--text2); }
.nav-links a:hover,
.nav-links a.nav-active { color:var(--violet); background:var(--surface); border-bottom-color:var(--violet); }
.nav-cta {
  background:var(--grad-vp) !important; color:white !important;
  padding:.55rem 1.3rem !important; border-radius:9px !important;
  font-weight:600 !important; font-size:.73rem !important;
  box-shadow:0 4px 14px rgba(0,102,255,.3);
  transition:all .25s !important;
}
.nav-cta:hover { box-shadow:0 6px 22px rgba(0,102,255,.45) !important; transform:translateY(-1px); }
.mob-tog { display:none; flex-direction:column; gap:4px; }
.mob-tog span { width:22px; height:1.5px; background:var(--text); display:block; transition:all .3s; }

/* ── HERO ── */
.hero {
  min-height:82vh; display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2rem;
  padding:4rem 3rem 2rem;
  max-width:1400px; margin:0 auto;
  position:relative; z-index:1;
}
.hero-left {}
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:white; border:1.5px solid var(--border2);
  border-radius:100px; padding:8px 20px 8px 10px;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.5px;
  color:var(--violet); margin-bottom:1.25rem; box-shadow:var(--shadow-sm);
  animation:fadeUp .7s ease both;
}
.pill-dot {
  width:22px; height:22px; border-radius:50%;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pill-dot svg { width:11px; height:11px; }
.status-live { animation:pillPulse 2s ease-in-out infinite; }
@keyframes pillPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,102,255,.4); }
  50% { box-shadow:0 0 0 6px rgba(0,102,255,0); }
}

.hero h1 {
  font-size:clamp(2.2rem,4vw,3.8rem); font-weight:800;
  line-height:1.05; letter-spacing:-2px; margin-bottom:1rem;
  animation:fadeUp .7s ease .1s both;
}
.h1-plain { display:block; color:var(--text); }
.h1-plain:first-child {
  font-size:clamp(1rem,1.8vw,1.4rem);
  font-weight:600;
  letter-spacing:.2px;
  color:var(--violet);
  margin-bottom:.25rem;
}
.h1-brand {
  display:block;
  background:linear-gradient(90deg,#0066FF 0%,#00C2FF 50%,#00D68F 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:gradShift 5s linear infinite;
}
@keyframes gradShift { 0%{background-position:0 0} 100%{background-position:250% 0} }

.hero-sub {
  font-size:1.1rem; color:var(--text2); font-weight:400;
  max-width:520px; line-height:1.8; margin-bottom:1.5rem;
  animation:fadeUp .7s ease .2s both;
}
.hero-btns {
  display:flex; gap:1rem; flex-wrap:wrap;
  animation:fadeUp .7s ease .3s both; margin-bottom:1.5rem;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--grad-vp); color:white;
  padding:.85rem 1.9rem; border-radius:11px;
  font-family:var(--font-head); font-size:.95rem; font-weight:700;
  text-decoration:none; border:none;
  box-shadow:0 4px 20px rgba(0,102,255,.35);
  transition:all .25s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,102,255,.45); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:white; color:var(--text);
  padding:.85rem 1.9rem; border-radius:11px;
  font-family:var(--font-head); font-size:.95rem; font-weight:600;
  text-decoration:none; border:1.5px solid var(--border2);
  box-shadow:var(--shadow-sm); transition:all .25s;
}
.btn-ghost:hover { border-color:var(--violet2); box-shadow:var(--shadow-md); transform:translateY(-2px); }

.hero-stats {
  display:flex; gap:1.5rem; flex-wrap:wrap;
  animation:fadeUp .7s ease .4s both;
  padding-top:1rem; border-top:1px solid var(--border);
}
.stat-item {}
.stat-val { font-size:1.9rem; font-weight:800; letter-spacing:-1px; line-height:1; margin-bottom:.2rem; }
.stat-label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase; }

/* ── HERO RIGHT - ORBIT ── */
.hero-right {
  display:flex; align-items:center; justify-content:center;
  animation:fadeUp .7s ease .3s both;
}
.orbit-scene {
  position:relative; width:420px; height:420px;
}
.orbit-ring {
  position:absolute; top:50%; left:50%; border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px dashed var(--border);
}
.or1 { width:210px; height:210px; animation:spin 22s linear infinite; }
.or2 { width:325px; height:325px; animation:spin 38s linear infinite reverse; border-style:dashed; border-color:rgba(0,102,255,.08); }
.or3 { width:410px; height:410px; border-color:rgba(0,194,255,.08); animation:spin 55s linear infinite; }
@keyframes spin { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }

.orbit-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:5;
}
.orbit-center svg {
  width:200px; height:auto;
  filter:drop-shadow(0 0 22px rgba(0,194,255,.5)) drop-shadow(0 0 44px rgba(0,102,255,.3));
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { filter:drop-shadow(0 0 20px rgba(0,102,255,.4)) drop-shadow(0 0 40px rgba(0,194,255,.3)); }
  50% { filter:drop-shadow(0 0 30px rgba(0,102,255,.6)) drop-shadow(0 0 60px rgba(0,194,255,.45)); }
}

.o-node {
  position:absolute; top:50%; left:50%;
  width:52px; height:52px; border-radius:13px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:white; border:1.5px solid var(--border);
  box-shadow:var(--shadow-md); transition:all .3s;
}
.o-node:hover { transform:translate(-50%,-50%) scale(1.12) !important; box-shadow:var(--shadow-lg); }
.o-node svg { width:21px; height:21px; }
.o-label { font-family:var(--font-mono); font-size:.4rem; letter-spacing:1px; color:var(--dim); }

/* node positions on rings */
.on1 { transform:translate(calc(-50% + 120px), -50%); }
.on2 { transform:translate(-50%, calc(-50% + 120px)); }
.on3 { transform:translate(calc(-50% - 120px), -50%); }
.on4 { transform:translate(-50%, calc(-50% - 120px)); }
.on5 { transform:translate(calc(-50% + 158px), calc(-50% + 85px)); }
.on6 { transform:translate(calc(-50% - 158px), calc(-50% + 85px)); }
.on7 { transform:translate(calc(-50% + 158px), calc(-50% - 85px)); }
.on8 { transform:translate(calc(-50% - 158px), calc(-50% - 85px)); }
.on9 { transform:translate(-50%, calc(-50% + 185px)); }

@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ── COBOL BANNER ── */
.cobol-section { position:relative; z-index:1; padding:0 3rem 1.5rem; }
.cobol-card {
  max-width:1360px; margin:0 auto;
  background:white; border:1.5px solid var(--border);
  border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-lg); position:relative;
}
.cobol-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-brand);
}
.cobol-inner { padding:1.5rem; }
.cobol-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:1.5px;
  color:var(--emerald); background:rgba(0,214,143,.08); border:1px solid rgba(0,214,143,.22);
  padding:4px 12px; border-radius:100px; margin-bottom:1.5rem;
}
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--emerald); animation:ldp 1.5s ease-in-out infinite; }
@keyframes ldp { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }
.cobol-title { font-size:clamp(1.5rem,2.8vw,2.4rem); font-weight:800; letter-spacing:-1px; line-height:1.1; margin-bottom:1rem; }
.cobol-title span { color:transparent; background:var(--grad-em); -webkit-background-clip:text; background-clip:text; }
.cobol-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:start; }
.cobol-desc { font-size:1rem; color:var(--text2); line-height:1.85; font-weight:400; }
.cobol-desc strong { color:var(--violet); font-weight:600; }
.cobol-specs { border:1.5px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg); }
.spec-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 1.25rem; border-bottom:1px solid var(--border); transition:background .2s;
}
.spec-row:last-child { border-bottom:none; }
.spec-row:hover { background:var(--surface); }
.spec-k { font-family:var(--font-mono); font-size:.62rem; color:var(--dim); letter-spacing:1px; }
.spec-v { font-family:var(--font-mono); font-size:.7rem; color:var(--emerald); font-weight:600; }

/* ── SECTION BASE ── */
.section { position:relative; z-index:1; padding:2rem 3rem; }
.s-inner { max-width:1360px; margin:0 auto; }
.s-label {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:2.5px; font-weight:700;
  color:white; background:var(--violet); border:none;
  padding:6px 16px; border-radius:6px; margin-bottom:.75rem;
  text-transform:uppercase; box-shadow:0 2px 12px rgba(0,102,255,.35);
}
.s-title { font-size:clamp(1.7rem,3.2vw,2.8rem); font-weight:800; letter-spacing:-1.5px; line-height:1.08; margin-bottom:.5rem; color:var(--text); }
.s-title span { color:transparent; background:var(--grad-vp); -webkit-background-clip:text; background-clip:text; }
.s-desc { font-size:.95rem; color:var(--text2); max-width:580px; font-weight:400; line-height:1.7; }

/* ── FEAT GRID ── */
.feat-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5px; background:var(--border);
  border:1.5px solid var(--border); border-radius:20px; overflow:hidden;
  margin-top:1.75rem; box-shadow:var(--shadow-md);
}
.feat-card {
  background:var(--bg2); padding:1.25rem;
  transition:background .25s; position:relative; overflow:hidden;
}
.feat-card:hover { background:var(--bg3); }
.feat-num { font-family:var(--font-mono); font-size:.58rem; letter-spacing:3px; color:var(--dim); margin-bottom:1rem; }
.feat-icon {
  width:50px; height:50px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
  box-shadow:var(--shadow-sm);
}
.feat-icon svg { width:25px; height:25px; }
.feat-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.65rem; letter-spacing:-.3px; }
.feat-card p { font-size:.9rem; color:var(--text2); line-height:1.75; font-weight:400; }

/* ── SERVICES ── */
.svc-list {
  display:flex; flex-direction:column; gap:0; margin-top:1.75rem;
  border:1.5px solid var(--border); border-radius:16px; overflow:hidden;
  background:var(--bg2); box-shadow:var(--shadow-md);
}
.svc-row {
  display:grid; grid-template-columns:56px 1fr auto;
  align-items:center; gap:1.5rem; padding:1rem 1.5rem;
  border-bottom:1px solid var(--border); transition:background .2s;
}
.svc-row:last-child { border-bottom:none; }
.svc-row:hover { background:var(--bg3); }
.svc-row.feat-svc { background:rgba(0,214,143,.04); border-left:3px solid var(--emerald); }
.svc-row.feat-svc:hover { background:rgba(16,185,129,.07); }
.svc-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.svc-icon svg { width:22px; height:22px; }
.svc-body h3 { font-size:1rem; font-weight:700; margin-bottom:.25rem; letter-spacing:-.2px; }
.svc-body p { font-size:.9rem; color:var(--text2); font-weight:400; line-height:1.65; max-width:600px; }
.svc-chip {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:1.5px;
  padding:4px 10px; border-radius:100px; white-space:nowrap; flex-shrink:0; font-weight:600;
}
.chip-new { background:rgba(0,214,143,.1); color:var(--emerald); border:1px solid rgba(0,214,143,.25); }
.chip-live { background:rgba(0,102,255,.08); color:var(--violet); border:1px solid rgba(0,102,255,.15); }
.chip-build { background:rgba(245,158,11,.08); color:var(--amber); border:1px solid rgba(245,158,11,.22); }

/* ── INDUSTRIES ── */
.ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1.75rem; }
.ind-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:16px; padding:1.25rem; transition:all .3s;
  box-shadow:var(--shadow-sm);
}
.ind-card:hover { border-color:var(--violet); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.ind-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; }
.ind-icon svg { width:23px; height:23px; }
.ind-card h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; letter-spacing:-.2px; }
.ind-card p { font-size:.88rem; color:var(--text2); line-height:1.7; font-weight:400; }

/* ── ARCH STACK ── */
.arch-wrap {
  margin-top:1.75rem; border:1.5px solid var(--border);
  border-radius:16px; overflow:hidden; background:var(--bg2); box-shadow:var(--shadow-md);
}
.arch-layer { display:grid; grid-template-columns:64px 1fr; border-bottom:1px solid var(--border); transition:background .2s; }
.arch-layer:last-child { border-bottom:none; }
.arch-layer:hover { background:var(--bg3); }
.arch-num { display:flex; align-items:center; justify-content:center; border-right:1px solid var(--border); font-family:var(--font-mono); font-size:.6rem; color:var(--dim); letter-spacing:1px; }
.arch-body { padding:1rem 1.5rem; }
.arch-body h4 { font-family:var(--font-mono); font-size:.67rem; letter-spacing:2px; color:var(--violet); margin-bottom:.4rem; text-transform:uppercase; font-weight:600; }
.arch-body p { font-size:.9rem; color:var(--text2); line-height:1.7; font-weight:400; }

/* ── METRICS ── */
.metrics-card {
  margin-top:1.75rem; border:1.5px solid var(--border);
  border-radius:20px; overflow:hidden; background:var(--bg2); box-shadow:var(--shadow-md);
}
.metrics-bar {
  display:flex; align-items:center; gap:1rem; padding:.85rem 1.5rem;
  border-bottom:1px solid var(--border); background:var(--bg3);
}
.bar-dots { display:flex; gap:6px; }
.bd { width:10px; height:10px; border-radius:50%; }
.bd-r{background:#FF5F57;} .bd-y{background:#FEBC2E;} .bd-g{background:#28C840;}
.bar-title { font-family:var(--font-mono); font-size:.62rem; letter-spacing:2px; color:var(--dim); margin-left:.5rem; }
.bar-live { margin-left:auto; display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.6rem; color:var(--emerald); font-weight:600; }
.live-p { width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:ldp 1.5s ease-in-out infinite; }
.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.m-card { padding:1.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.m-card:nth-child(3n) { border-right:none; }
.m-card:nth-last-child(-n+3) { border-bottom:none; }
.m-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:2px; color:var(--dim); margin-bottom:.6rem; text-transform:uppercase; }
.m-val { font-size:2rem; font-weight:800; line-height:1; margin-bottom:.25rem; letter-spacing:-1.5px; }
.m-desc { font-size:.78rem; color:var(--muted); line-height:1.6; margin-bottom:.8rem; font-weight:300; }
.m-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.m-bar-fill { height:100%; border-radius:2px; }
.chips-row { display:flex; flex-wrap:wrap; gap:8px; padding:1.25rem 2rem; }
.achip {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.63rem;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:5px 10px; color:var(--muted);
  transition:border-color .2s;
}
.achip:hover { border-color:var(--border2); }
.achip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.achip svg { width:13px; height:13px; }

/* ── PORTFOLIO ── */
.port-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1.75rem; }
.port-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:16px; overflow:hidden; transition:all .3s;
  box-shadow:var(--shadow-sm);
}
.port-card:hover { border-color:var(--violet); box-shadow:var(--shadow-xl); transform:translateY(-4px); }
.port-hd { height:160px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.port-hd svg { width:52px; height:52px; position:relative; z-index:2; filter:drop-shadow(0 4px 12px rgba(0,102,255,.3)); }
.port-hd-bg { position:absolute; inset:0; }

/* Animated card header elements */
.port-anim { position:absolute; inset:0; z-index:0; overflow:hidden; }
.pa-line { position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(0,102,255,.25),transparent); animation:paLine 2.5s ease-in-out infinite; }
.pa-line:nth-child(1) { width:60%; top:30%; animation-delay:0s; }
.pa-line:nth-child(2) { width:40%; top:50%; animation-delay:.6s; }
.pa-line:nth-child(3) { width:70%; top:70%; animation-delay:1.2s; }
.pa-dot { position:absolute; width:6px; height:6px; border-radius:50%; animation:paDot 3s ease-in-out infinite; }
.pa-node { position:absolute; width:32px; height:32px; border-radius:8px; border:1.5px solid rgba(0,102,255,.2); animation:paNode 4s ease-in-out infinite; display:flex; align-items:center; justify-content:center; }
.pa-node-dot { width:8px; height:8px; border-radius:50%; background:var(--violet); }
.pa-bar { position:absolute; bottom:20px; height:3px; border-radius:2px; animation:paBar 2s ease-in-out infinite; }
.pa-ring { position:absolute; border-radius:50%; border:1.5px solid rgba(0,102,255,.15); animation:paRing 4s ease-in-out infinite; }
@keyframes paLine { 0%,100%{opacity:.3;transform:scaleX(.8) translateX(-5%)} 50%{opacity:1;transform:scaleX(1) translateX(5%)} }
@keyframes paDot { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.3)} }
@keyframes paNode { 0%,100%{opacity:.5;border-color:rgba(0,102,255,.2)} 50%{opacity:1;border-color:rgba(0,102,255,.5)} }
@keyframes paBar { 0%{width:30%;opacity:.5} 50%{width:80%;opacity:1} 100%{width:30%;opacity:.5} }
@keyframes paRing { 0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.3} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:.7} }

/* Terminal animation */
.pa-term { position:absolute; bottom:12px; left:16px; right:16px; background:rgba(8,15,30,.06); border-radius:6px; padding:8px 10px; border:1px solid rgba(0,102,255,.12); }
.pa-term-line { font-family:var(--font-mono); font-size:.55rem; color:var(--violet); opacity:0; animation:termLine 4s ease-in-out infinite; letter-spacing:.5px; }
.pa-term-line:nth-child(2) { animation-delay:.8s; color:var(--emerald); }
.pa-term-line:nth-child(3) { animation-delay:1.6s; color:var(--dim); }
.pa-cursor { display:inline-block; width:5px; height:9px; background:var(--violet); animation:termBlink .8s step-end infinite; margin-left:2px; vertical-align:middle; }
@keyframes termLine { 0%,80%,100%{opacity:0} 20%,70%{opacity:1} }
@keyframes termBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Flow arrows */
.pa-flow { position:absolute; display:flex; align-items:center; gap:4px; animation:paFlow 3s ease-in-out infinite; }
.pa-flow-dot { width:5px; height:5px; border-radius:50%; background:var(--violet); }
.pa-flow-line { height:1.5px; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:1px; }
@keyframes paFlow { 0%,100%{opacity:.4;transform:translateX(-8px)} 50%{opacity:1;transform:translateX(8px)} }

/* Pulse circles */
.pa-pulse { position:absolute; border-radius:50%; animation:paPulse 2.5s ease-out infinite; }
@keyframes paPulse { 0%{transform:translate(-50%,-50%) scale(.5);opacity:.8} 100%{transform:translate(-50%,-50%) scale(2.5);opacity:0} }
.port-bd { padding:1.25rem; }
.port-meta { font-family:var(--font-mono); font-size:.62rem; color:var(--violet); letter-spacing:1.5px; margin-bottom:.5rem; font-weight:600; }
.port-bd h3 { font-size:1.15rem; font-weight:800; margin-bottom:.6rem; letter-spacing:-.4px; color:var(--text); }
.port-bd p { font-size:.92rem; color:var(--text2); line-height:1.75; margin-bottom:.9rem; font-weight:400; }
.port-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ptag { font-family:var(--font-mono); font-size:.58rem; background:var(--bg3); border:1px solid var(--border); color:var(--muted); padding:2px 8px; border-radius:100px; }

/* ── BLOG ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1.75rem; }
.blog-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:14px; overflow:hidden; transition:all .3s;
  box-shadow:var(--shadow-sm);
}
.blog-card:hover { border-color:var(--violet); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.blog-hd { height:120px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.blog-hd svg { width:44px; height:44px; position:relative; z-index:2; filter:drop-shadow(0 3px 10px rgba(0,102,255,.25)); }
.blog-bd { padding:1.1rem 1.25rem; }
.blog-date { font-family:var(--font-mono); font-size:.62rem; color:var(--violet); margin-bottom:.5rem; font-weight:600; letter-spacing:1px; }
.blog-bd h3 { font-size:1rem; font-weight:800; margin-bottom:.5rem; line-height:1.35; letter-spacing:-.3px; color:var(--text); }
.blog-bd p { font-size:.9rem; color:var(--text2); line-height:1.7; font-weight:400; }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.about-big { font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:800; letter-spacing:-1px; line-height:1.18; margin-bottom:1.25rem; }
.about-big span { color:transparent; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; }
.about-text p { font-size:1rem; color:var(--text2); line-height:1.85; margin-bottom:1rem; font-weight:400; }
.about-text p strong { color:var(--violet); font-weight:600; }
.pillars { border:1.5px solid var(--border); border-radius:16px; overflow:hidden; background:var(--bg2); box-shadow:var(--shadow-md); }
.pillar { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem; border-bottom:1px solid var(--border); transition:background .2s; }
.pillar:last-child { border-bottom:none; }
.pillar:hover { background:var(--bg3); }
.p-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.p-icon svg { width:20px; height:20px; }
.pillar h4 { font-size:.9rem; font-weight:700; margin-bottom:.2rem; letter-spacing:-.2px; }
.pillar p { font-size:.85rem; color:var(--text2); line-height:1.6; font-weight:400; }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; margin-top:1.75rem; align-items:stretch; }
.contact-left-col { display:flex; flex-direction:column; }
.ch-primary-header {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.5rem 1.4rem 1.25rem;
  border-bottom:1.5px solid var(--border);
  background:linear-gradient(135deg,rgba(0,102,255,.04),rgba(0,194,255,.02));
}
.ch-primary-icon {
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,102,255,.12),rgba(0,194,255,.08));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,102,255,.15);
}
.ch-primary-icon svg { width:20px; height:20px; }
.ch-primary-info { display:flex; flex-direction:column; gap:3px; }
.ch-primary-label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:2px; color:var(--dim); text-transform:uppercase; font-weight:600; }
.ch-primary-email { font-size:1rem; font-weight:700; color:var(--violet); text-decoration:none; letter-spacing:-.3px; transition:color .2s; }
.ch-primary-email:hover { color:var(--violet3); }
.ch-primary-sub { font-size:.78rem; color:var(--muted); margin-top:1px; }
.ch-footer {
  display:flex; align-items:center; gap:6px;
  padding:1rem 1.4rem; margin-top:auto;
  font-family:var(--font-mono); font-size:.62rem; color:var(--muted);
  border-top:1px solid var(--border);
  background:rgba(0,214,143,.03);
}
.ch-footer strong { color:var(--emerald); font-weight:700; }
/* Contact info panel */
.contact-info-panel {
  background:var(--bg2); border:1.5px solid var(--border2);
  border-radius:14px; padding:1.5rem; margin-bottom:1.25rem;
  box-shadow:var(--shadow-sm);
}
.contact-info-header { display:flex; align-items:center; gap:1rem; margin-bottom:.6rem; }
.contact-info-icon { width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,102,255,.12),rgba(0,194,255,.08));
  display:flex; align-items:center; justify-content:center; }
.contact-info-icon svg { width:18px; height:18px; }
.contact-info-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:2px;
  color:var(--dim); text-transform:uppercase; margin-bottom:3px; }
.contact-info-sub { font-size:.8rem; color:var(--muted); font-style:italic; margin-top:.4rem; }
.ch-list { background:var(--bg2); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }

.email-link {
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.95rem; font-weight:600;
  color:var(--violet); text-decoration:none; padding-bottom:1.5rem;
  border-bottom:1px solid var(--border); margin-bottom:2rem; transition:color .2s;
}
.email-link:hover { color:var(--magenta); }
.email-link svg { width:18px; height:18px; }
.ch-list { border:1.5px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg2); box-shadow:var(--shadow-sm); }
.ch-item { display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; border-bottom:1px solid var(--border); transition:background .2s; }
.ch-item:last-child { border-bottom:none; }
.ch-item:hover { background:var(--bg3); }
.ch-ico { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ch-ico svg { width:17px; height:17px; }
.ch-lbl { font-family:var(--font-mono); font-size:.58rem; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase; margin-bottom:1px; }
.ch-val { font-family:var(--font-mono); font-size:.76rem; }
.ch-val a { color:var(--violet); text-decoration:none; transition:color .2s; }
.ch-val a:hover { color:var(--magenta); text-decoration:underline; }

.form-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg);
}
.form-bar {
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1.5rem;
  border-bottom:1px solid var(--border); background:var(--bg3);
}
.form-bar-title { font-family:var(--font-mono); font-size:.6rem; letter-spacing:2px; color:var(--dim); margin-left:.25rem; }
.form-inner { padding:2rem; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.f-g { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.f-g:last-child { margin-bottom:0; }
.f-lbl { font-family:var(--font-mono); font-size:.58rem; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.f-in, .f-sel, .f-ta {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:9px; padding:.75rem 1rem;
  font-family:var(--font-mono); font-size:.78rem; color:var(--text);
  transition:border-color .2s, box-shadow .2s; width:100%;
}
.f-in:focus, .f-sel:focus, .f-ta:focus {
  outline:none; border-color:var(--violet2);
  box-shadow:0 0 0 3px rgba(0,102,255,.12);
}
.f-sel { }
.f-ta { resize:vertical; min-height:110px; }
.f-btn {
  width:100%; background:var(--grad-vp); color:white;
  border:none; border-radius:10px; padding:1rem;
  font-family:var(--font-head); font-size:.95rem; font-weight:700; transition:all .25s; margin-top:.5rem;
  box-shadow:0 4px 18px rgba(0,102,255,.3);
}
.f-btn:hover { box-shadow:0 8px 28px rgba(0,102,255,.45); transform:translateY(-1px); }
.f-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── FOOTER ── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:3rem 3rem 2rem;
  background:var(--bg2);
}
.foot-inner { max-width:1400px; margin:0 auto; }
.foot-grid { display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.foot-logo-row { display:flex; align-items:center; margin-bottom:1.25rem; }
.foot-logo-row svg { height:50px; width:auto; display:block; }


.foot-desc { font-size:.83rem; color:var(--muted); line-height:1.8; margin-bottom:1.5rem; font-weight:300; }
.foot-socials { display:flex; gap:7px; }
.fsoc { width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .2s; background:var(--bg); }
.fsoc:hover { border-color:var(--violet2); background:var(--surface2); }
.fsoc svg { width:14px; height:14px; fill:var(--muted); transition:fill .2s; }
.fsoc:hover svg { fill:var(--violet); }
.foot-col h4 { font-family:var(--font-mono); font-size:.6rem; letter-spacing:2.5px; color:var(--dim); text-transform:uppercase; margin-bottom:1.25rem; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.foot-col a { font-size:.84rem; color:var(--muted); text-decoration:none; transition:color .2s; }
.foot-col a:hover { color:var(--text); }
.foot-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:2rem; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:.6rem; color:var(--dim);
}
.foot-links { display:flex; gap:1.5rem; }
.foot-links a { color:var(--dim); text-decoration:none; transition:color .2s; }
.foot-links a:hover { color:var(--muted); }

/* ── MODAL ── */
.modal {
  position:fixed; inset:0; z-index:10000;
  background:rgba(15,10,30,.6); backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s; padding:2rem;
}
.modal.open { opacity:1; pointer-events:all; }
.modal-inner {
  background:var(--bg2); border:1.5px solid var(--border2);
  border-radius:20px; max-width:700px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 0 80px rgba(0,102,255,.12), var(--shadow-xl);
}
.modal-bar { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.75rem; border-bottom:1px solid var(--border); }
.modal-title { font-family:var(--font-mono); font-size:.67rem; letter-spacing:2px; color:var(--violet); }
.modal-close { background:none; border:none; color:var(--muted); font-size:1.1rem; transition:color .2s; }
.modal-close:hover { color:var(--text); }
.modal-body { padding:2rem; }
.modal-banner {
  background:linear-gradient(135deg,var(--surface),rgba(0,194,255,.06));
  border:1.5px solid var(--border2); border-radius:14px;
  padding:1.75rem; margin-bottom:2rem;
  display:flex; align-items:center; gap:1.5rem;
}
.modal-icon { width:50px; height:50px; border-radius:13px; background:var(--grad-vp); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-icon svg { width:26px; height:26px; }
.modal-banner h3 { font-size:1.05rem; font-weight:700; margin-bottom:.25rem; }
.modal-banner p { font-size:.82rem; color:var(--muted); font-weight:300; }

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

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  .hero { grid-template-columns:1fr; text-align:center; gap:4rem; }
  .hero-left { display:flex; flex-direction:column; align-items:center; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-btns { justify-content:center; }
  .hero-stats { justify-content:center; }
  .orbit-scene { width:380px; height:380px; }
  .feat-grid { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width:860px) {
  nav { padding:0 1.5rem; }
  .nav-links { display:none; }
  .mob-tog { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(244,246,250,.98); border-bottom:1px solid var(--border); padding:1.5rem; gap:.5rem; box-shadow:var(--shadow-md); }
  .hero { padding:6rem 1.5rem 4rem; }
  .cobol-section { padding:0 1.5rem 2rem; }
  .section { padding:2rem 1.5rem; }
  .cobol-grid,.about-grid,.contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  .feat-grid { grid-template-columns:1fr; }
  .ind-grid { grid-template-columns:1fr 1fr; }
  .port-grid,.blog-grid { grid-template-columns:1fr; }
  .metrics-grid { grid-template-columns:1fr; }
  .m-card { border-right:none !important; }
  .svc-row { grid-template-columns:46px 1fr; }
  .svc-chip { display:none; }
  .f-row { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; gap:1rem; text-align:center; }
  .orbit-scene { width:300px; height:300px; }
  .on5,.on6,.on7,.on8,.on9 { display:none; }
}
@media (max-width:540px) {
  .ind-grid { grid-template-columns:1fr; }
  .hero h1 { letter-spacing:-1.5px; }
}