*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Backgrounds — true near-black, not purple-black */
  --bg:#080C14;--bg-s:#0E1420;--bg-e:#141C2C;--bg-c:#1A2338;
  /* Borders — slate, not purple */
  --bdr:#232F45;--bdr-h:#2E4068;
  /* Purple — used sparingly: primary CTA only */
  --pur:#6C3FE8;--pur2:#8B6AFF;--pur3:#B49DFF;
  --pg:rgba(108,63,232,0.2);--pg2:rgba(108,63,232,0.08);
  /* Teal — second accent: links, active states, highlights */
  --teal:#00C8B8;--teal2:#00EDD9;--teal-g:rgba(0,200,184,0.12);
  /* Amber — third accent: badges, proof points, warmth */
  --amb:#F5A623;--amb2:#FFD07A;--amb-g:rgba(245,166,35,0.1);
  /* Green — compliance signals only */
  --grn:#00D68F;--grn-g:rgba(0,214,143,0.08);
  /* Text — warm white/slate, not purple-tinted */
  --txt:#E8EDF5;--txt2:#7A8CA8;--txt3:#3D5070;
  --f:'Jost',sans-serif;
  --nav:70px;--max:1240px;--r:14px;--rs:8px;--pill:9999px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--f);font-size:1rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--pur);color:#fff;padding:.5rem 1rem;border-radius:4px}
.skip:focus{left:1rem;top:1rem}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:100;background:rgba(7,4,18,.92);backdrop-filter:blur(22px);border-bottom:1px solid var(--bdr)}
.ni{max-width:var(--max);margin:0 auto;display:flex;align-items:center;padding:0 2rem;height:100%;gap:1.5rem}
.logo{font-weight:800;font-size:1.5rem;color:var(--txt);text-decoration:none;letter-spacing:-.02em;flex-shrink:0}
.logo span{color:var(--pur2)}
.nl{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nl button,.nl a{background:none;border:none;color:var(--txt2);font-family:var(--f);font-size:.9375rem;font-weight:500;padding:.45rem .9rem;border-radius:var(--pill);cursor:pointer;transition:color .2s,background .2s;text-decoration:none;display:inline-flex;align-items:center}
.nl button:hover,.nl a:hover{color:var(--txt);background:var(--bg-e)}
.nl button.active,.nl a.active{color:var(--teal2);background:rgba(0,200,184,.08)}
.nc{display:flex;gap:.75rem;flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f);font-weight:600;font-size:.9375rem;padding:.6rem 1.5rem;border-radius:var(--pill);cursor:pointer;transition:all .2s;border:none;letter-spacing:.015em}
.btn:focus-visible{outline:2px solid var(--pur2);outline-offset:3px}
.bp{background:var(--pur);color:#fff;box-shadow:0 0 28px var(--pg)}
.bp:hover{background:var(--pur2);transform:translateY(-1px);box-shadow:0 0 42px var(--pg)}
.bs{background:transparent;color:var(--pur3);border:1.5px solid var(--bdr-h)}
.bs:hover{background:var(--teal-g);border-color:var(--teal)}
.bg{background:transparent;color:var(--txt2);border:1px solid var(--bdr)}
.bg:hover{color:var(--txt);border-color:var(--bdr-h)}
.blg{font-size:1.0625rem;padding:.85rem 2.25rem}

/* HAMBURGER */
.hmb{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--txt2);margin-left:auto}
.hmb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nm{display:none;position:fixed;inset:var(--nav) 0 0 0;background:var(--bg);z-index:99;flex-direction:column;padding:1.5rem;gap:.35rem;overflow-y:auto}
.nm.open{display:flex}
.nm button,.nm a{background:none;border:none;color:var(--txt2);font-family:var(--f);font-size:1.0625rem;font-weight:500;text-decoration:none;display:block;padding:.85rem 1rem;border-radius:var(--rs);cursor:pointer;text-align:left;width:100%;transition:background .2s,color .2s}
.nm button:hover,.nm button.active,.nm a:hover,.nm a.active{background:var(--bg-e);color:var(--txt)}
.nm button.active,.nm a.active{color:var(--teal2)}

/* PAGES */
.pg{display:none;padding-top:var(--nav);min-height:100vh}
.pg.active{display:block}

/* UTILS */
.sec{padding:5rem 2rem}
.ct{max-width:var(--max);margin:0 auto}
.ctsm{max-width:860px;margin:0 auto}
.ey{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:.75rem}
h1.hh{font-weight:900;font-size:clamp(3rem,6.5vw,5.5rem);line-height:1.03;letter-spacing:-.03em;color:var(--txt)}
h2.sh{font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.025em;color:var(--txt)}
h3.ch{font-weight:700;font-size:1.2rem;color:var(--txt);margin-bottom:.5rem}
p.bo{color:var(--txt2);line-height:1.8;font-weight:400}
.gr{background:linear-gradient(135deg,var(--teal2),var(--pur3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* BADGE */
.bd{display:inline-flex;align-items:center;gap:.3rem;background:rgba(0,200,184,.08);border:1px solid rgba(0,200,184,.3);color:var(--teal2);border-radius:var(--pill);padding:4px 12px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bdg{background:rgba(0,229,160,.08);border-color:rgba(0,229,160,.3);color:var(--grn)}
.bda{background:rgba(255,176,32,.08);border-color:rgba(255,176,32,.3);color:var(--amb)}
.bdr{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}

/* CARDS */
.cd{background:var(--bg-c);border:1px solid var(--bdr);border-radius:var(--r);padding:2rem;transition:border-color .25s,transform .25s}
.cd:hover{border-color:var(--bdr-h);transform:translateY(-2px)}
.cdf{background:var(--bg-s);border:1px solid var(--bdr);border-radius:var(--r);padding:2rem}

/* METRIC */
.mc{background:var(--bg-c);border:1px solid var(--bdr);border-radius:var(--r);padding:1.75rem;text-align:center;position:relative;overflow:hidden}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--pur3))}
.mn{font-size:2.5rem;font-weight:900;color:var(--teal2);line-height:1;margin-bottom:.4rem;letter-spacing:-.02em}
.ml{font-size:.8125rem;color:var(--txt2);font-weight:500}

/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
hr.dv{border:none;border-top:1px solid var(--bdr);margin:3.5rem 0}

/* HERO */
.hero{padding:7rem 2rem 5rem;position:relative;overflow:hidden}
.hbg{position:absolute;inset:0;pointer-events:none}
.hbg::before{content:'';position:absolute;top:-15%;left:15%;width:650px;height:650px;background:radial-gradient(circle,rgba(108,63,232,.14) 0%,transparent 65%);border-radius:50%}
.hbg::after{content:'';position:absolute;top:5%;right:5%;width:380px;height:380px;background:radial-gradient(circle,rgba(0,200,184,.12) 0%,transparent 65%);border-radius:50%}
.ptag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,200,184,.1);border:1px solid rgba(0,200,184,.35);border-radius:var(--pill);padding:6px 16px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal2);margin-bottom:1.5rem}
.pdot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:plz 2s infinite}
@keyframes plz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.hs{font-size:1.125rem;color:var(--txt2);max-width:600px;margin:1.5rem 0 2.25rem;line-height:1.8}
.hcta{display:flex;flex-wrap:wrap;gap:1rem}
.hg{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}

/* NET SVG */
.nw{width:100%;max-width:500px;margin:0 auto;aspect-ratio:1/.85}

/* FRAMEWORK ROWS */
.fw{display:grid;grid-template-columns:130px 160px 1fr auto;align-items:center;gap:1.5rem;padding:1rem 1.5rem;border-radius:var(--rs);background:var(--bg-c);border:1px solid var(--bdr);margin-bottom:.6rem;transition:border-color .2s}
.fw:hover{border-color:var(--bdr-h)}
.fn{font-weight:700;font-size:.9375rem;color:var(--txt)}
.fr{font-size:.8125rem;color:var(--txt2)}
.fd{font-size:.8125rem;color:var(--txt2)}
.ft{font-size:.7rem;font-weight:700;color:var(--grn);background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.3);border-radius:var(--pill);padding:3px 10px;white-space:nowrap}

/* COMP TABLE */
.cmp{width:100%;border-collapse:collapse}
.cmp th{text-align:left;padding:.75rem 1rem;color:var(--txt3);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--bdr)}
.cmp td{padding:.85rem 1rem;border-bottom:1px solid var(--bdr);color:var(--txt2);font-size:.9rem}
.cmp td:first-child{color:var(--txt);font-weight:600}
.cmp tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--teal2);font-weight:700;font-size:.8rem}
.cmp .no{color:#8B7AB5;font-size:.8rem}

/* STEP */
.sn{width:36px;height:36px;border-radius:50%;background:rgba(0,200,184,.1);border:1.5px solid rgba(0,200,184,.45);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:var(--teal2);flex-shrink:0}

/* FAQ */
.fi{border-bottom:1px solid var(--bdr)}
.fb{width:100%;background:none;border:none;text-align:left;padding:1.25rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--txt);font-family:var(--f);font-size:1rem;font-weight:600;gap:1rem}
.fb:focus-visible{outline:2px solid var(--pur2);outline-offset:2px;border-radius:4px}
.fic{flex-shrink:0;width:22px;height:22px;border:1.5px solid var(--txt3);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s}
.fic::after{content:'+';font-size:1rem;color:var(--txt3);line-height:1}
.fb[aria-expanded="true"] .fic{border-color:var(--teal);background:rgba(0,200,184,.1);transform:rotate(45deg)}
.fb[aria-expanded="true"] .fic::after{color:var(--teal2)}
.fa{max-height:0;overflow:hidden;transition:max-height .35s ease}
.fa.open{max-height:400px}
.fa p{padding:0 0 1.25rem;color:var(--txt2);line-height:1.8;font-size:.9375rem}

/* CTA PANEL */
.cp{background:linear-gradient(135deg,var(--bg-c),var(--bg-e));border:1px solid var(--bdr);border-radius:20px;padding:4rem;text-align:center;position:relative;overflow:hidden}
.cp::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(0,200,184,.08),transparent 70%);pointer-events:none}
.cbts{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}

/* SIGNALS */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:3rem 0}
.si{background:var(--bg-c);border:1px solid var(--bdr);border-radius:var(--r);padding:2rem;text-align:center;position:relative;overflow:hidden}
.si::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.sinum{font-size:2.25rem;font-weight:900;color:var(--amb2);line-height:1;margin:.5rem 0 .25rem;letter-spacing:-.02em}
.silb{font-size:.8125rem;color:var(--txt2);font-weight:500}
.sisb{font-size:.7rem;color:var(--txt3);margin-top:.3rem}

/* TRL */
.trlw{background:var(--bg-s);border:1px solid var(--bdr);border-radius:var(--rs);padding:1.5rem}

/* TEAM */
.tc{background:var(--bg-c);border:1px solid var(--bdr);border-radius:var(--r);padding:1.75rem;text-align:center;transition:border-color .25s}
.tc:hover{border-color:var(--bdr-h)}
.tav{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--pur2));margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;color:#fff}
.tnm{font-weight:800;font-size:1.2rem;color:var(--txt);margin-bottom:.5rem}
.ttl{font-size:.8125rem;color:var(--teal2);margin-bottom:.75rem;font-weight:700;letter-spacing:.04em}
.tbi{font-size:.875rem;color:var(--txt2);line-height:1.7}.li-link{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:.75rem;gap:.25rem}.li-link:hover span{color:var(--pur2)}

/* FORM */
.fg{margin-bottom:1.1rem}
.fg label{display:block;font-size:.8125rem;font-weight:700;color:var(--txt2);margin-bottom:.4rem;letter-spacing:.02em}
.fg input,.fg select,.fg textarea{width:100%;background:var(--bg-e);border:1px solid var(--bdr);border-radius:var(--rs);padding:.75rem 1rem;color:var(--txt);font-family:var(--f);font-size:.9375rem;outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal)}
.fg textarea{resize:vertical;min-height:100px}
.fg select option{background:var(--bg-e)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cbx{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.cbx label{display:flex;align-items:center;gap:.4rem;font-size:.875rem;color:var(--txt2);cursor:pointer;padding:.35rem .75rem;border:1px solid var(--bdr);border-radius:var(--pill);transition:border-color .2s,color .2s}
.cbx label:hover{border-color:rgba(0,200,184,.45);color:var(--teal2)}
.cbx input[type=checkbox]{accent-color:var(--pur)}
.tbar{display:flex;border-bottom:1px solid var(--bdr);margin-bottom:2rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbt{background:none;border:none;border-bottom:2px solid transparent;padding:.85rem 1.75rem;color:var(--txt2);font-family:var(--f);font-weight:600;font-size:.9375rem;cursor:pointer;margin-bottom:-1px;transition:color .2s,border-color .2s}
.tbt.active{color:var(--txt);border-color:var(--teal)}

/* FOOTER */
footer{background:var(--bg-s);border-top:1px solid var(--bdr);padding:4rem 2rem 2rem;margin-top:5rem}
.fg2{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.fbc p{font-size:.875rem;color:var(--txt2);margin-top:.75rem;max-width:280px;line-height:1.75}
.fcol h4{font-weight:700;font-size:.875rem;color:var(--txt);margin-bottom:1rem;letter-spacing:.04em}
.fcol ul{list-style:none}
.fcol li{margin-bottom:.4rem}
.fcol li button,.fcol li a{background:none;border:none;color:var(--txt2);font-size:.875rem;cursor:pointer;font-family:var(--f);transition:color .2s;font-weight:400;padding:0;text-decoration:none;display:inline-block}
.fcol li button:hover,.fcol li a:hover{color:var(--pur3)}
.fbot{max-width:var(--max);margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.fbot p{font-size:.8125rem;color:var(--txt3)}

/* ── TABLET (≤1024px) ── */
@media(max-width:1024px){
  .g4,.sg{grid-template-columns:1fr 1fr}
  .hg{grid-template-columns:1fr;gap:2.5rem}
  .fg2{grid-template-columns:1fr 1fr;gap:2rem}
  h1.hh{font-size:clamp(2.4rem,5vw,4rem)}
  h2.sh{font-size:clamp(1.75rem,3.5vw,2.5rem)}
  .sec{padding:4rem 1.5rem}
  .hero{padding:6rem 1.5rem 4rem}
  .cp{padding:3rem 2rem}
  .metric-num,.mn{font-size:2rem}
  .sinum{font-size:1.75rem}
  /* Nav: hide links/CTAs at 900px, show hamburger */
}
@media(max-width:960px){
  .nl,.nc{display:none}
  .hmb{display:block}
}

/* ── MOBILE (≤768px) ── */
@media(max-width:768px){
  /* Nav */
  .ni{padding:0 1rem}
  .nl,.nc{display:none}
  .hmb{display:block}
  /* Mobile nav menu */
  .nm{padding:1rem}
  .nm button{padding:.75rem 1rem;font-size:1rem}

  /* Grids → single column */
  .g2,.g3,.g4,.f2{grid-template-columns:1fr}
  .sg{grid-template-columns:1fr 1fr}

  /* Framework rows */
  .fw{grid-template-columns:1fr;gap:.5rem;padding:.875rem 1rem}
  .fr{font-size:.75rem}

  /* Spacing */
  .sec{padding:3rem 1rem}
  .hero{padding:4.5rem 1rem 3rem}
  .cp{padding:2rem 1rem}
  .card,.cd,.cdf{padding:1.5rem}

  /* Typography */
  h1.hh{font-size:clamp(2rem,8vw,3rem);line-height:1.05}
  h2.sh{font-size:clamp(1.5rem,6vw,2rem)}
  .blg{font-size:.9375rem;padding:.75rem 1.5rem}
  .hero-sub,.hs{font-size:1rem;margin:1.25rem 0 1.75rem}

  /* Hero CTA stack */
  .hcta{flex-direction:column;gap:.75rem}
  .hcta .btn{width:100%;justify-content:center}

  /* Badges wrap tighter */
  .bdr{gap:.3rem}
  .bd{font-size:.65rem;padding:3px 9px}

  /* Metrics 2-col on mobile */
  .g4{grid-template-columns:1fr 1fr}
  .mn{font-size:1.875rem}
  .ml{font-size:.75rem}

  /* Signals 2-col */
  .sg{grid-template-columns:1fr 1fr}
  .sinum{font-size:1.75rem}

  /* CTA panel */
  .cp .sh{font-size:1.5rem}
  .cbts{flex-direction:column;gap:.75rem}
  .cbts .btn{width:100%;justify-content:center}

  /* Footer */
  .fg2{grid-template-columns:1fr;gap:1.5rem}
  .fbot{flex-direction:column;align-items:flex-start;gap:.5rem}

  /* Team cards */
  .tc{padding:1.25rem}

  /* Contact tabs */
  .tbt{padding:.75rem 1rem;font-size:.875rem}

  /* Network SVG scale */
  .nw{aspect-ratio:1/.9}

  /* Comparison table scroll */
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* TRL bar */
  .trlw{padding:1rem}
}

/* ── SMALL MOBILE (≤420px) ── */
@media(max-width:420px){
  h1.hh{font-size:1.875rem}
  h2.sh{font-size:1.375rem}
  .g4{grid-template-columns:1fr 1fr}
  .sg{grid-template-columns:1fr 1fr}
  .mn{font-size:1.5rem}
  .sinum{font-size:1.5rem}
  .sec{padding:2.5rem .875rem}
  .hero{padding:4rem .875rem 2.5rem}
  .ni{padding:0 .875rem}
}

/* ═══ DYNAMIC / ANIMATION LAYER ═══════════════════════════════════════════ */

/* Noise texture overlay on hero */
.hero::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;opacity:.25;z-index:1}
.hero>*:not(.hbg):not(.particles){position:relative;z-index:2}

/* Moving mesh gradient behind hero */
.hbg::before{animation:meshMove 12s ease-in-out infinite alternate}
.hbg::after{animation:meshMove2 9s ease-in-out infinite alternate}
@keyframes meshMove{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,-40px) scale(1.15)}}
@keyframes meshMove2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,30px) scale(1.2)}}

/* Third glow orb */
.hbg{overflow:hidden}
.hbg::before,.hbg::after,.hbg .orb3{position:absolute;border-radius:50%}



/* Card hover lift + glow */
.cd,.mc,.si{transition:border-color .25s,transform .25s,box-shadow .25s}
.cd:hover{border-color:rgba(0,200,184,.35);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(0,200,184,.1)}
.mc:hover{border-color:rgba(0,200,184,.3);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.si:hover{border-color:rgba(0,200,184,.25);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}

/* Animated gradient border on primary CTA */
.btn.bp{position:relative;z-index:0;overflow:hidden}
.btn.bp::before{content:'';position:absolute;inset:-2px;background:conic-gradient(from var(--angle,0deg),var(--teal),var(--pur),var(--amb),var(--teal));border-radius:inherit;z-index:-1;animation:spin 4s linear infinite;opacity:0;transition:opacity .3s}
.btn.bp::after{content:'';position:absolute;inset:2px;background:var(--pur);border-radius:inherit;z-index:-1}
.btn.bp:hover::before{opacity:1}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--angle:360deg}}

/* Glowing underline on nav active */
.nl button.active,.nl a.active{position:relative}
.nl button.active::after,.nl a.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);border-radius:2px}

/* Animated compliance badges */
.bd{transition:background .2s,border-color .2s,color .2s,transform .2s}
.bd:hover{background:rgba(0,200,184,.15);border-color:rgba(0,200,184,.5);transform:translateY(-1px)}

/* Metric number count-up shimmer */
.mn,.sinum{position:relative;display:inline-block}

/* Pulsing ring on core SVG node */
/* Already has SVG animation */

/* Section background variations — break monotony */
.sec-alt{background:linear-gradient(180deg,var(--bg-s) 0%,var(--bg) 100%);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);position:relative;overflow:hidden}
.sec-alt::before{content:'';position:absolute;top:-200px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,200,184,.05) 0%,transparent 65%);pointer-events:none}
.sec-alt::after{content:'';position:absolute;bottom:-200px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(108,63,232,.06) 0%,transparent 65%);pointer-events:none}

/* Glowing horizontal rule dividers */
hr.dv{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--bdr-h),transparent);margin:3.5rem 0}

/* Framework rows — animated left border on hover */
.fw{position:relative;transition:border-color .2s,transform .2s,padding-left .2s}
.fw::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--teal),var(--pur2));border-radius:3px 0 0 3px;opacity:0;transition:opacity .25s}
.fw:hover{padding-left:1.75rem;border-color:rgba(0,200,184,.3)}
.fw:hover::before{opacity:1}

/* Animated number in metric/signal */

/* Logo shimmer on hover */
.logo{transition:opacity .2s}
.logo:hover{opacity:.85}

/* Glowing border on focused inputs */
.fg input:focus,.fg select:focus,.fg textarea:focus{box-shadow:0 0 0 3px rgba(0,200,184,.12)}

/* Page transition — fade in when switching */
.pg.active{animation:pageFade .3s ease both}
@keyframes pageFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Mobile nav slide in */
.nm.open{animation:slideDown .25s cubic-bezier(.22,1,.36,1)}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* Teal accent line on section headings */
.sh-line{display:inline-flex;flex-direction:column;gap:.5rem}
.sh-line::after{content:'';height:3px;width:48px;background:linear-gradient(90deg,var(--teal),var(--pur2));border-radius:2px}

/* Floating particles in hero (CSS only) */
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.particles span{position:absolute;bottom:-10px;border-radius:50%;opacity:0;animation:floatUp linear infinite}
.p1{left:12%;width:3px;height:3px;background:var(--teal);animation-duration:9s;animation-delay:0s}
.p2{left:32%;width:4px;height:4px;background:var(--pur3);animation-duration:13s;animation-delay:3s}
.p3{left:58%;width:3px;height:3px;background:var(--amb);animation-duration:8s;animation-delay:1.5s}
.p4{left:74%;width:2px;height:2px;background:var(--teal2);animation-duration:11s;animation-delay:5s}
.p5{left:90%;width:3px;height:3px;background:var(--pur2);animation-duration:10s;animation-delay:2s}
@keyframes floatUp{0%{opacity:0;transform:translateY(0)}15%{opacity:.7}85%{opacity:.15}100%{opacity:0;transform:translateY(-300px)}}

/* Gradient text shimmer on hover for .gr elements */
.hh .gr{background-size:200% auto;animation:gradShift 4s linear infinite}
@keyframes gradShift{0%{background-position:0% center}100%{background-position:200% center}}

/* Stats counter row — subtle separator */
.g4 .mc+.mc{border-left:none}

/* Tech page TRL bar fill animation */
.trl-fill{animation:trlGrow 1s cubic-bezier(.22,1,.36,1) both}
@keyframes trlGrow{from{flex:0}to{flex:7}}

/* Simple scroll animation — applies to active page only */
.anim{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.anim.anim-in{opacity:1;transform:none}
.anim:nth-child(2){transition-delay:.1s}
.anim:nth-child(3){transition-delay:.2s}
.anim:nth-child(4){transition-delay:.3s}

.foot-link{color:var(--txt2);font-size:.875rem;text-decoration:none;transition:color .2s;font-weight:400}
.foot-link:hover{color:var(--pur3)}