/* Aristonet Technologies: shared styles.
   Part 1: the original homepage design system (header, footer, buttons, cards, theme).
   Part 2: multi-page components. */

:root{--navy:#0B1D3A;--ink:#0B1D3A;--ink2:#4A5A73;--ink3:#5F6E87;--line:#E4EAF5;--soft:#F5F8FF;--blue:#0A2A5E;--blue2:#0E7490;--cyan:#22B8D8;--violet:#7C3AED;
--grad:linear-gradient(120deg,#0A2A5E,#0E7490 60%,#0FA9B8);
--sh1:0 1px 2px rgba(11,29,58,.06),0 14px 30px -16px rgba(11,29,58,.25);
--sh2:0 2px 4px rgba(11,29,58,.06),0 40px 70px -32px rgba(11,29,58,.45);
--sh3:0 60px 120px -40px rgba(14,116,144,.55);
--r:24px;--hh:72px;--beat:2.4s;--ease:cubic-bezier(.2,.8,.2,1);
--fh:Manrope,Inter,system-ui,sans-serif;--fb:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--fm:"JetBrains Mono",ui-monospace,monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px)}
body{margin:0;font-family:var(--fb);color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--fh);margin:0;line-height:1.08;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.sec{padding:clamp(84px,10vw,128px) 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.head{text-align:center;max-width:740px;margin:0 auto 60px}
.head .eyebrow{justify-content:center}
.head h2{font-size:clamp(34px,4vw,54px);letter-spacing:-1.6px;font-weight:800}
.head p{color:var(--ink2);font-size:17px;margin-top:14px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:14px;font-size:15px;font-weight:700;border:1px solid transparent;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s;overflow:hidden}
.btn:hover{transform:translateY(-3px)}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 18px 40px -14px rgba(14,116,144,.7)}
.btn-p:hover{box-shadow:0 26px 50px -14px rgba(14,116,144,.8)}
.btn-p::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.btn-p:hover::after{animation:shine .9s var(--ease)}
.btn-o{background:#fff;border-color:#CFDCF2;color:var(--ink);box-shadow:var(--sh1)}
.btn-o:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:11px 18px;font-size:14px;border-radius:12px}
.arr{transition:transform .3s var(--ease)}
.btn:hover .arr,.lnk:hover .arr{transform:translateX(5px)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue);font-size:14.5px;background:none;border:0;padding:0}

/* HEADER */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hh);transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.hdr.sc{background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 14px 40px -26px rgba(11,29,58,.5)}
.hin{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--fh);font-weight:800;font-size:16px;line-height:1.1;white-space:nowrap}
.brand small{display:block;font-family:var(--fb);font-size:10.5px;letter-spacing:1.6px;color:var(--ink3);text-transform:uppercase;margin-top:2px}
.mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--grad);font-weight:800;font-size:14px;box-shadow:0 12px 26px -10px rgba(14,116,144,.8),inset 0 1px 0 rgba(255,255,255,.4);transform:translateZ(0)}
.nav{display:flex;gap:4px;margin-left:auto}
@media (min-width:1100px) and (max-width:1340px){.nav{gap:0;margin-left:12px}.nav a{padding:8px 6px;font-size:13px}.nav a::after{left:6px;right:6px}.brand .lg{height:42px}.hdr .btn.btn-sm{padding:10px 14px;font-size:13px;margin-left:6px!important}}
.nav a{white-space:nowrap}
section[id],footer[id]{scroll-margin-top:calc(var(--hh) + 8px)}
.nav a{position:relative;padding:9px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink2);transition:color .25s,background .25s}
.nav a:hover{color:var(--ink);background:rgba(14,116,144,.07)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:13px;border:1px solid #CFDCF2;background:#fff;align-items:center;justify-content:center;box-shadow:var(--sh1)}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mnav{position:fixed;inset:var(--hh) 0 0 0;background:#fff;padding:20px 24px;display:flex;flex-direction:column;gap:4px;z-index:99;transform:translateY(-12px) scale(.98);opacity:0;visibility:hidden;transition:all .45s var(--ease)}
.mnav.open{transform:none;opacity:1;visibility:visible}
.mnav a{padding:16px 10px;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
.mnav .btn{margin-top:20px;border:0}

/* HERO */
.hero{position:relative;padding:calc(var(--hh) + 56px) 0 96px;overflow:hidden;background:radial-gradient(50% 50% at 82% 32%,rgba(15,169,184,.16),transparent 70%),linear-gradient(180deg,#EEF4FF,#F8FBFF 60%,#fff)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(14,116,144,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,144,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 70% at 70% 40%,#000,transparent 80%);mask-image:radial-gradient(60% 70% at 70% 40%,#000,transparent 80%);pointer-events:none}
.hg{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #CFE0FA;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;box-shadow:var(--sh1)}
.pill i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.pill i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--cyan);opacity:0}
.pill i.beat::after{animation:ping .9s ease-out}
.hero h1{font-size:clamp(44px,5.4vw,76px);letter-spacing:-2.4px;font-weight:800;margin:22px 0}
.hero h1 .gt{background:linear-gradient(110deg,#0A2A5E,#22B8D8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink2);max-width:560px}
.hb{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.chips{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:32px;font-size:14px;font-weight:600;color:var(--ink2)}
.chips span{display:inline-flex;align-items:center;gap:8px}
.chips svg{color:var(--blue)}

/* AI CAREER ENGINE */
.lab{position:relative;border-radius:28px;background:linear-gradient(160deg,#0B1D3A,#122B5E);padding:20px;color:#E6EEFF;box-shadow:0 50px 90px -40px rgba(11,29,58,.7),inset 0 0 0 1px rgba(103,232,249,.12)}
.lab-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 6px 14px}
.lab-title{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:14px;letter-spacing:.2px}
.lab-title i{width:8px;height:8px;border-radius:50%;background:#22D3EE}
.lab-title i.beat{animation:beatping .9s ease-out}
.lab-hint{color:#8FA6CC;font-size:12.5px}
.lab-stage{position:relative;height:clamp(300px,30vw,360px);border-radius:18px;background:radial-gradient(70% 70% at 50% 50%,rgba(14,116,144,.14),transparent 75%),rgba(255,255,255,.02);border:1px solid rgba(103,232,249,.1);overflow:hidden}
#brain{position:absolute;inset:0;width:100%;height:100%}
#brain.pick{cursor:pointer}
.tip{position:absolute;pointer-events:none;padding:6px 10px;border-radius:10px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;box-shadow:0 12px 24px -10px rgba(0,0,0,.6);transform:translate(-50%,-140%);white-space:nowrap}
.goals{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.goal{padding:8px 14px;border-radius:999px;border:1px solid rgba(103,232,249,.25);background:rgba(255,255,255,.04);color:#CFE0FA;font-size:13px;font-weight:700;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.goal:hover{border-color:#22D3EE;color:#fff}
.goal[aria-pressed="true"]{background:#0E7490;border-color:#0E7490;color:#fff;box-shadow:0 8px 20px -8px rgba(14,116,144,.9)}
.result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(103,232,249,.15);transition:box-shadow .6s,border-color .6s}
.result.flash{border-color:rgba(34,211,238,.55);box-shadow:0 0 30px -8px rgba(34,211,238,.55)}
.result small{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#7F9BD0}
.result h3{font-size:19px;color:#fff;margin:3px 0 8px}
.rpath{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.rpath b{font-weight:600;padding:3px 8px;border-radius:7px;background:rgba(34,211,238,.15);color:#D7F3F6}
.rpath b.out{background:rgba(34,211,238,.2);color:#A5F3FC}
.rpath span{color:#4F6FA8}
@keyframes beatping{0%{box-shadow:0 0 0 0 rgba(34,211,238,.75)}100%{box-shadow:0 0 0 10px rgba(34,211,238,0)}}
@media (max-width:720px){.pj{grid-template-columns:1fr}.lab{padding:14px;border-radius:22px}.lab-stage{height:300px}.lab-hint{display:none}.result{grid-template-columns:1fr}.result .btn{width:100%}}

/* MARQUEE */
.marq{background:#0B1D3A;color:#CFE0FA;overflow:hidden;padding:20px 0;border-block:1px solid rgba(255,255,255,.06)}
.mtrack{display:flex;width:max-content;animation:marq 32s linear infinite;gap:48px;font-family:var(--fh);font-weight:800;font-size:20px;letter-spacing:.5px}
.mtrack span{display:inline-flex;align-items:center;gap:48px;opacity:.9}
.mtrack span::after{content:"◆";color:#22B8D8;font-size:12px}

/* BENEFITS */
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bcard{position:relative;padding:30px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh1);transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;transform-style:preserve-3d;overflow:hidden}
.bcard:hover{transform:translateY(-10px) rotateX(4deg);box-shadow:var(--sh2);border-color:#A9CCFF}
.bcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,85%) var(--my,0%),rgba(15,169,184,.13),transparent 60%);pointer-events:none;transition:opacity .4s}
.bcard{--d:0s;animation:bseq calc(var(--beat) * 2) ease-in-out infinite;animation-delay:var(--d)}
@keyframes bseq{0%,32%,100%{border-color:var(--line)}8%,22%{border-color:#67E8F9}}
.bcard .bi{animation:biseq calc(var(--beat) * 2) ease-in-out infinite;animation-delay:var(--d)}
@keyframes biseq{0%,32%,100%{box-shadow:inset 0 1px 0 #fff,0 10px 20px -12px rgba(14,116,144,.6);color:var(--blue)}8%,22%{box-shadow:inset 0 0 0 40px #0E7490,0 14px 24px -10px rgba(14,116,144,.8);color:#fff}}
.bcard .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;animation:bbar calc(var(--beat) * 2) ease-in-out infinite;animation-delay:var(--d)}
@keyframes bbar{0%{transform:scaleX(0);opacity:1}24%{transform:scaleX(1);opacity:1}34%,100%{transform:scaleX(1);opacity:0}}
.bcard .bn{position:absolute;right:22px;top:20px;font:700 11px var(--fm);color:#66758E;letter-spacing:1px}
.bi .fl{transform-box:fill-box;transform-origin:left center}
.bi .fb{transform-box:fill-box;transform-origin:center}
.bi{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#EAF2FF,#DDEBFF);color:var(--blue);margin-bottom:20px;box-shadow:inset 0 1px 0 #fff,0 10px 20px -12px rgba(14,116,144,.6);transition:transform .5s var(--ease)}
.bcard:hover .bi{transform:translateZ(30px) rotate(-6deg)}
.bcard h3{font-size:18px;margin-bottom:6px}
.bcard p{color:var(--ink2);font-size:14.5px}

/* STATS */
.stats{background:linear-gradient(135deg,#0B1D3A,#16346E);color:#fff;border-radius:32px;position:relative;overflow:hidden;box-shadow:var(--sh2)}
.stats::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(103,232,249,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.08) 1px,transparent 1px);background-size:44px 44px}
.sgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.st{padding:50px 26px;text-align:center;border-left:1px solid rgba(255,255,255,.1)}
.st:first-child{border-left:0}
.st b{display:block;font-family:var(--fh);font-size:clamp(38px,4.2vw,56px);letter-spacing:-1.4px;line-height:1.1;text-shadow:0 10px 30px rgba(34,211,238,.45)}
.st .lbl{display:block;margin-top:8px;color:#AFC3E6;font-size:14.5px;font-weight:600}
.st{position:relative;transition:transform .45s var(--ease)}
.st:hover{transform:translateY(-5px)}
.st b{animation:stglow calc(var(--beat) * 2) ease infinite}
.st:nth-child(1) b{animation-delay:.19s}.st:nth-child(2) b{animation-delay:.6s}.st:nth-child(3) b{animation-delay:1.03s}.st:nth-child(4) b{animation-delay:1.45s}
@keyframes stglow{0%,22%,100%{text-shadow:0 10px 30px rgba(34,211,238,.45)}8%{text-shadow:0 0 24px rgba(165,243,252,.95),0 10px 30px rgba(34,211,238,.65)}}
.stats::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(103,232,249,.16),transparent);transform:translateX(-120%);animation:sweep calc(var(--beat) * 2) ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(450%)}}
.viz{height:34px;display:flex;align-items:flex-end;justify-content:center;gap:5px;margin-bottom:14px}
.v-dots{align-items:center}
.v-dots i{width:10px;height:10px;border-radius:50%;background:#22D3EE;box-shadow:0 0 10px rgba(34,211,238,.6);animation:vdot calc(var(--beat) * 2) var(--ease) infinite}
.v-dots i:nth-child(2n){background:#22D3EE}
@keyframes vdot{0%,8%{transform:scale(0);opacity:0}22%,86%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
.v-bars i{width:7px;border-radius:3px 3px 1px 1px;background:linear-gradient(#67E8F9,#0E7490);transform-origin:bottom;animation:agrow calc(var(--beat) * 2) var(--ease) infinite}
.v-stack{position:relative;width:46px;display:block;margin-left:auto;margin-right:auto}
.v-stack i{position:absolute;left:8px;bottom:2px;width:30px;height:20px;border-radius:6px;border:1.5px solid #67E8F9;background:rgba(14,116,144,.45);animation:vfan calc(var(--beat) * 2) var(--ease) infinite}
@keyframes vfan{0%,100%{transform:none}30%,80%{transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.v-arrow svg{overflow:visible}
.v-arrow path{stroke-dasharray:100;animation:adraw calc(var(--beat) * 2) var(--ease) infinite}

/* CAREERS */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1400px}
.cc{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .5s;cursor:pointer;min-height:280px;display:flex;flex-direction:column}
.cc:hover{box-shadow:var(--sh2)}
.cc .art{position:relative;height:150px;background:linear-gradient(160deg,#0F2A5C,#1E40AF);overflow:hidden}
.cc .body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.cc h3{font-size:21px;letter-spacing:-.4px}
.cc p{color:var(--ink2);font-size:14.8px}
.cc .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--blue);font-size:14.5px}
.cc .go span.dot{width:38px;height:38px;border-radius:50%;background:#EAF2FF;display:grid;place-items:center;transition:background .3s,color .3s,transform .4s var(--ease)}
.cc:hover .go span.dot{background:var(--blue);color:#fff;transform:rotate(-45deg)}

/* CAREER CARD ILLUSTRATIONS (synced to --beat) */
.cc .art{height:170px;background:radial-gradient(80% 90% at 50% 40%,rgba(15,169,184,.35),transparent 70%),linear-gradient(160deg,#0B1D3A,#1E3A8A)}
.cc .art>svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s var(--ease)}
.cc:hover .art>svg{transform:scale(1.04)}
.art .fb{transform-box:fill-box;transform-origin:center}
.art .fl{transform-box:fill-box;transform-origin:left center}
.art .fbt{transform-box:fill-box;transform-origin:center bottom}
.a-flow{stroke-dasharray:4 7;animation:aflow calc(var(--beat) / 2) linear infinite}
.a-type{animation:atype calc(var(--beat) * 2) var(--ease) infinite}
.a-led{animation:aled var(--beat) ease-in-out infinite}
.a-pop{animation:apop var(--beat) var(--ease) infinite}
.a-blink{animation:ablink calc(var(--beat) / 2) steps(1) infinite}
.a-spin{animation:aspin calc(var(--beat) * 2) var(--ease) infinite}
.a-fit{animation:afit calc(var(--beat) * 2) var(--ease) infinite}
.a-draw{stroke-dasharray:100;animation:adraw calc(var(--beat) * 2) var(--ease) infinite}
.a-tw{animation:atw var(--beat) ease-in-out infinite}
.a-ring{animation:aring var(--beat) ease-out infinite}
.a-tool{animation:atool calc(var(--beat) * 2) ease-in-out infinite}
.a-fade{animation:afade calc(var(--beat) * 2) ease infinite}
.a-grow{animation:agrow calc(var(--beat) * 2) var(--ease) infinite}
.a-eye{animation:aeye calc(var(--beat) * 2) ease-in-out infinite}
@keyframes aflow{to{stroke-dashoffset:-22}}
@keyframes atype{0%{transform:scaleX(0);opacity:1}35%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes aled{0%,100%{opacity:.25}20%,50%{opacity:1}}
@keyframes apop{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}}
@keyframes ablink{50%{opacity:0}}
@keyframes aspin{0%{transform:rotate(0) scale(.85)}50%{transform:rotate(90deg) scale(1.15)}100%{transform:rotate(180deg) scale(.85)}}
@keyframes afit{0%{transform:rotate(-30deg)}55%,100%{transform:rotate(0)}}
@keyframes adraw{0%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}
@keyframes atw{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes aring{0%{transform:scale(.7);opacity:.8}100%{transform:scale(2);opacity:0}}
@keyframes atool{0%,100%{opacity:0}8%,26%{opacity:1}34%{opacity:0}}
@keyframes afade{0%,6%{opacity:0;transform:translateY(5px)}18%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes agrow{0%{transform:scaleY(.05)}40%,88%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
@keyframes aeye{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}

.cc:not(:hover):not(.playing) .art *{animation:none!important}
/* JOURNEY: scroll-driven */
.jsec{position:relative;height:210vh;background:linear-gradient(180deg,#F5F8FF,#fff)}
.jpin{position:sticky;top:var(--hh);min-height:calc(100vh - var(--hh));display:flex;align-items:center;padding:36px 0}
.jpin>.wrap{width:min(1200px,100% - 48px)}
.jsec .head{margin-bottom:46px}
.jtrack{position:relative;--p:0}
.jline{position:absolute;left:calc((100% - 60px) / 12);right:calc((100% - 60px) / 12);top:43px;height:4px;border-radius:4px;background:#E2E8F5}
.jfill{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#0E7490,#7C3AED,#0EA5A4,#F97316,#EF4444,#10B981);transform:scaleX(var(--p));transform-origin:left}
.you{position:absolute;top:-78px;left:calc(var(--p) * 100%);transform:translateX(-50%);padding:4px 11px;border-radius:999px;background:var(--ink);color:#fff;font:700 11px var(--fb);letter-spacing:.4px;box-shadow:0 8px 18px -8px rgba(11,29,58,.6);white-space:nowrap;z-index:2}
.you::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.jsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;position:relative}
.jst{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;border-radius:18px}
.jst:focus-visible{outline:2px solid var(--blue2);outline-offset:6px}
.jdot{position:relative;width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid #CBD5E6;color:#8494AD;margin-bottom:22px;z-index:1;transition:background .5s,border-color .5s,color .4s,box-shadow .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.jst.done .jdot{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 18px 34px -14px var(--c)}
.jst.now .jdot{transform:scale(1.14);box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 16%,transparent),0 22px 40px -14px var(--c)}
.jst:hover .jdot{transform:translateY(-4px) scale(1.06)}
.jst.now:hover .jdot{transform:scale(1.18)}
.jtx{display:flex;flex-direction:column;align-items:center;gap:3px}
.jst small{font:700 11px var(--fm);color:#66758E;transition:color .3s}
.jst.done small{color:var(--c)}
.jst b{font-family:var(--fh);font-size:17px;color:#5C6B84;transition:color .3s}
.jst.done b{color:var(--ink)}
.jst em{font-style:normal;font-size:13px;color:var(--ink3)}
.jdetail{--c:#0E7490;margin:44px auto 0;max-width:780px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 26px;align-items:start;padding:26px 30px 26px 34px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);position:relative;overflow:hidden}
.jdetail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c);transition:background .4s}
.jd-badge{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;color:#fff;background:var(--c);box-shadow:0 14px 28px -12px var(--c)}
.jd-top{font:700 12px var(--fm);color:var(--ink3);margin-bottom:4px}
.jd-body h3{font-size:22px;letter-spacing:-.4px;margin-bottom:6px}
.jd-body p{color:var(--ink2);font-size:15px}
.jd-body ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.jd-body li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 70%,#0B1D3A)}
.jdetail.swap .jd-body,.jdetail.swap .jd-badge{animation:jswap .45s var(--ease)}
@keyframes jswap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.jcta{grid-column:1/-1;display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:16px;border-top:1px dashed var(--line);font-weight:700}
.jdetail.final .jcta{display:flex}
.jdot .spark{left:42px;top:42px}
@media (max-height:760px) and (min-width:1025px){.jsec .head p{display:none}.jsec .head{margin-bottom:34px}.jdetail{margin-top:26px;padding:18px 24px 18px 28px}.jsec .head h2{font-size:40px}}
@media (max-width:1024px){
  .jsec{height:auto}
  .jpin{position:static;min-height:0;display:block;padding:80px 0}
  .jsteps{grid-template-columns:1fr;gap:0}
  .jst{flex-direction:row;text-align:left;align-items:center;gap:18px;padding:10px 0}
  .jdot{width:60px;height:60px;margin:0;flex:none}.jdot svg{width:24px;height:24px}
  .jdot .spark{left:27px;top:27px}
  .jtx{align-items:flex-start}
  .jline{left:28px;right:auto;top:40px;bottom:40px;width:4px;height:auto}
  .jfill{background:linear-gradient(180deg,#0E7490,#7C3AED,#0EA5A4,#F97316,#EF4444,#10B981);transform:scaleY(var(--p));transform-origin:top}
  .you{display:none}
  .jst.now .jdot{transform:scale(1.1)}
  .jdetail{margin-top:28px;grid-template-columns:1fr;padding:22px 22px 22px 26px}
}

/* PROJECTS */
.pj{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);transition:transform .5s var(--ease),box-shadow .5s;transform-style:preserve-3d;display:flex;flex-direction:column}
.pc:hover{transform:translateY(-8px);box-shadow:var(--sh2)}
.pv{height:180px;position:relative;overflow:hidden;background:#0F2A5C}
.pb{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pb h3{font-size:19px}
.pb p{font-size:14.2px;color:var(--ink2)}
.cp{display:flex;flex-wrap:wrap;gap:6px}
.cp span{font:500 11px var(--fm);padding:4px 8px;border-radius:7px;background:#F2F6FF;border:1px solid #DDE7FB;color:#2448A0}

/* PROJECT LAB: live demos */
.pj{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1040px;margin-inline:auto}
.pc{cursor:default}
.pc:hover{transform:translateY(-4px)}
.pv{height:auto;min-height:236px;display:flex;flex-direction:column;padding:14px;background:linear-gradient(160deg,#0B1D3A,#14306A);color:#D7F3F6;font-size:12.5px}
.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ptag{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);font:600 10.5px var(--fm);color:#BFD3F5}
.trytag{display:inline-flex;align-items:center;gap:6px;font:800 10px var(--fb);letter-spacing:1.2px;color:#6EE7B7}
.trytag::before{content:"";width:6px;height:6px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399}
.demo{flex:1;display:flex;flex-direction:column}
.demo button{font:inherit;cursor:pointer}
.chipbtn{padding:6px 10px;border-radius:999px;border:1px solid rgba(103,232,249,.35);background:rgba(255,255,255,.05);color:#D7F3F6;font-size:11.5px!important;font-weight:600!important;transition:background .2s,border-color .2s,transform .2s}
.chipbtn:hover:not(:disabled){background:rgba(14,116,144,.4);border-color:#22D3EE;transform:translateY(-1px)}
.chipbtn:disabled{opacity:.45;cursor:default}
.d-chat .msgs{flex:1;min-height:118px;max-height:118px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;margin-bottom:10px}
.d-chat .m{max-width:90%;padding:7px 10px;border-radius:12px;line-height:1.4;animation:min .35s var(--ease);flex:none}
.d-chat .bot{background:rgba(255,255,255,.1);border-bottom-left-radius:4px;align-self:flex-start}
.d-chat .me{background:#0E7490;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.typing{display:inline-flex;gap:4px;padding:2px 0}.typing i{width:5px;height:5px;border-radius:50%;background:#67E8F9;animation:atw .9s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.sugg{display:flex;flex-wrap:wrap;gap:6px}
@keyframes min{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.d-rag .q{display:flex;gap:6px;margin-bottom:10px}
.d-rag .qbox{flex:1;min-width:0;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(103,232,249,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-rag .ask{padding:7px 12px;border-radius:10px;border:0;background:#0E7490;color:#fff;font-weight:700;font-size:12px;box-shadow:0 8px 16px -8px rgba(14,116,144,.9)}
.d-rag .ask:disabled{opacity:.6}
.d-rag .docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.d-rag .doc{padding:8px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(103,232,249,.18);font:600 10px var(--fm);color:#9FB6DD;transition:all .35s var(--ease);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.d-rag .doc i{display:block;height:4px;border-radius:2px;background:rgba(103,232,249,.25);margin-top:5px}
.d-rag .doc i+i{width:70%}
.d-rag .doc.scan{border-color:#67E8F9;background:rgba(103,232,249,.12)}
.d-rag .doc.hit{border-color:#22D3EE;background:rgba(34,211,238,.15);color:#A5F3FC;transform:translateY(-3px);box-shadow:0 10px 20px -10px rgba(34,211,238,.8)}
.d-rag .doc.hit i:first-of-type{background:#22D3EE}
.d-rag .ans{flex:1;min-height:52px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.1);line-height:1.45}
.d-rag .ans sup{color:#22D3EE;font-weight:700}
.muted{color:#7F9BD0}
.d-cv svg{width:100%;aspect-ratio:360/150;height:auto;display:block;border-radius:10px;background:linear-gradient(180deg,#1B3C78,#132E5E);cursor:crosshair;touch-action:none}
.d-cv .box{fill:none;stroke:#22D3EE;stroke-width:2;opacity:0;transition:x .2s var(--ease),y .2s var(--ease),width .2s var(--ease),height .2s var(--ease),opacity .2s}
.d-cv .box.on{opacity:1}
.d-cv .lbl{opacity:0;transition:opacity .2s}.d-cv .lbl.on{opacity:1}
.d-cv .lbl rect{fill:#22D3EE}
.d-cv text.t{font:700 10px Inter,sans-serif;fill:#0B1D3A}
.d-cv .all{opacity:0;transition:opacity .3s}.d-cv .all.on{opacity:1}
.d-cv .all .b{fill:none;stroke:#FBBF24;stroke-width:2}
.d-cv .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;color:#9FB6DD}
.d-iot .top{display:flex;gap:10px;align-items:center}
.d-iot .gauge{width:92px;flex:none}
.d-iot .gauge text{font:800 15px Manrope,Inter,sans-serif;fill:#fff}
.dst{display:inline-flex;padding:4px 10px;border-radius:999px;font-weight:700;font-size:11.5px;transition:background .3s,color .3s}
.dst.ok{background:rgba(16,185,129,.18);color:#6EE7B7}.dst.warn{background:rgba(251,191,36,.18);color:#FCD34D}.dst.bad{background:rgba(239,68,68,.24);color:#FCA5A5}
.d-iot .msg{margin-top:6px;color:#BFD3F5;line-height:1.4}
.d-iot .trend{margin-top:8px}.d-iot .trend svg{width:100%;height:34px;display:block}
.d-iot label{display:block;margin-top:8px;font-weight:600;color:#9FB6DD}
.d-iot input[type=range]{width:100%;accent-color:#22D3EE;margin:6px 0 0;cursor:pointer}
.d-iot .fan{transform-box:fill-box;transform-origin:center;animation:fanspin var(--fan,2s) linear infinite}
@keyframes fanspin{to{transform:rotate(360deg)}}
.d-iot .dev{flex:none;transition:filter .3s}.d-iot .dev.alert{filter:drop-shadow(0 0 8px #EF4444)}
.pdet{margin-top:4px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--blue);background:none;border:0;padding:0;cursor:pointer}
.pdet:hover .arr{transform:translateX(5px)}

/* PLACEMENT */
.plc{position:relative;border-radius:36px;padding:clamp(48px,6vw,84px);background:linear-gradient(135deg,#0B1D3A,#15336E);color:#E6EEFF;overflow:hidden;box-shadow:var(--sh2)}
.plc::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(34,184,216,.35),transparent);animation:drift 16s ease-in-out infinite}
.plg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.plc h2{color:#fff;font-size:clamp(34px,4vw,52px);letter-spacing:-1.5px;font-weight:800}
.plc .eyebrow{color:#67E8F9}.plc .eyebrow::before{background:#67E8F9}
.plc .sub{color:#67E8F9;font-weight:700;font-size:18px;margin-top:8px}
.plc .lede{color:#B9C8E4;margin-top:16px}
.steps{list-style:none;padding:0;margin:28px 0 34px;display:grid;gap:14px}
.steps li{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-weight:600;transition:transform .4s var(--ease),background .3s}
.steps li:hover{transform:translateX(10px);background:rgba(255,255,255,.12)}
.steps li b{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:13px;flex:none;box-shadow:0 10px 20px -8px rgba(14,116,144,.9)}
.plc .note{font-size:12.5px;color:#8FA6CC;margin-top:18px}
.mock{position:relative;height:380px;perspective:1200px}
.mcard{position:absolute;left:8%;right:8%;top:50%;transform:translate(-50%,-50%) rotateX(8deg) rotateY(-14deg);background:rgba(255,255,255,.96);color:var(--ink);border-radius:24px;padding:28px;box-shadow:0 50px 90px -30px rgba(0,0,0,.6);transition:transform .6s var(--ease);animation:float2 calc(var(--beat) * 3) ease-in-out infinite}
.mcard:hover{transform:translate(-50%,-50%) rotateX(0) rotateY(0)}
.mcard h4{font-size:18px;margin-bottom:14px}
.mrow{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:#F5F8FF;margin-bottom:10px;font-weight:600;font-size:14px}
.mrow em{font-style:normal;font-size:12px;color:#fff;background:#10B981;padding:4px 10px;border-radius:999px}
.mtag{position:absolute;right:0;bottom:6%;padding:12px 16px;border-radius:16px;background:#fff;color:var(--ink);font-weight:800;font-size:13.5px;box-shadow:0 30px 50px -20px rgba(0,0,0,.5);animation:bob calc(var(--beat) * 2) ease-in-out infinite;transform:translateZ(60px)}

/* TESTIMONIAL */
.tq{max-width:860px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:32px;padding:clamp(34px,5vw,60px);box-shadow:var(--sh2);position:relative;overflow:hidden}
.tq blockquote{margin:0;font-family:var(--fh);font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.4px;line-height:1.35}
.tq .who{margin-top:24px;color:var(--ink2);font-size:14.5px}
.tq .who b{color:var(--ink)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.dots button{width:10px;height:10px;border-radius:99px;border:0;background:#CAD6EB;padding:0;transition:width .4s var(--ease),background .3s}
.dots button.on{width:30px;background:var(--blue)}
.tnote{text-align:center;font-size:12.5px;color:var(--ink3);margin-top:16px}

/* FINAL CTA */
.fcta{position:relative;text-align:center;padding:clamp(60px,8vw,100px) 24px;border-radius:36px;background:linear-gradient(135deg,#EEF5FF,#F8FBFF);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh2)}
.fcta h2{font-size:clamp(36px,4.6vw,60px);letter-spacing:-2px;font-weight:800}
.fcta p{color:var(--ink2);font-size:18px;margin:16px auto 36px;max-width:620px}
.fcta .hb{justify-content:center}

/* FOOTER */
footer{background:#071429;color:#A9B8D4;padding:80px 0 0;margin-top:120px}
.fg{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
footer h4{color:#fff;font-size:13px;letter-spacing:.9px;text-transform:uppercase;margin-bottom:18px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a{font-size:14.5px;color:#A9B8D4;transition:color .25s}
footer a:hover{color:#fff}
.fbot{margin-top:60px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#7F92B4}

/* POPUP */
dialog{border:0;padding:0;border-radius:30px;max-width:min(640px,calc(100% - 32px));width:100%;background:#fff;box-shadow:0 80px 140px -40px rgba(11,29,58,.7);opacity:0;transform:translateY(40px) scale(.94);transition:opacity .4s var(--ease),transform .5s var(--ease),overlay .4s allow-discrete,display .4s allow-discrete}
dialog[open]{opacity:1;transform:none}
dialog::backdrop{background:rgba(7,20,41,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
dialog[open]::backdrop{opacity:1}
.dm{padding:38px}
.dm h3{font-size:30px;letter-spacing:-.8px;margin-bottom:10px}
.dm p{color:var(--ink2);margin-bottom:16px}
.dm ul{padding-left:20px;color:var(--ink2);display:grid;gap:8px;margin:0 0 26px}
.dm .x{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);transition:transform .3s var(--ease)}
.dm .x:hover{transform:rotate(90deg)}
dialog .wrapd{position:relative}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,160%);background:#0B1D3A;color:#fff;padding:14px 22px;border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);z-index:200;font-weight:600;transition:transform .6s var(--ease),opacity .4s,visibility .4s;max-width:calc(100% - 32px);opacity:0;visibility:hidden}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}

/* REVEAL */
.rv{opacity:0;transform:translateY(40px) scale(.98);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* KEYFRAMES */
@keyframes float2{0%,100%{transform:translate(-50%,-50%) rotateX(8deg) rotateY(-14deg) translateY(0)}50%{transform:translate(-50%,-50%) rotateX(8deg) rotateY(-14deg) translateY(-12px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes shine{0%{left:-75%}60%,100%{left:125%}}

.fab{position:fixed;right:22px;bottom:22px;z-index:150;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--grad);color:#fff;font-weight:800;font-size:14px;border:0;box-shadow:0 20px 40px -12px rgba(14,116,144,.8);transform:translateY(140px);transition:transform .6s var(--ease)}
.fab.show{transform:none}
.fab::before{content:"";position:absolute;inset:0;border-radius:inherit;animation:fabpulse var(--beat) 3}
.fab:not(.show)::before{animation:none}
@keyframes fabpulse{0%{box-shadow:0 0 0 0 rgba(14,116,144,.55)}100%{box-shadow:0 0 0 22px rgba(14,116,144,0)}}
.form{display:grid;gap:12px;margin-bottom:22px}
.form label{font-size:13px;font-weight:700;color:var(--ink2);display:grid;gap:6px}
.form input,.form select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #CFDCF2;font:inherit;background:#F8FBFF;color:var(--ink)}
.form input:focus,.form select:focus{outline:2px solid var(--blue2);border-color:transparent}
.pc{cursor:pointer}
@media (max-width:720px){.fab{right:14px;bottom:14px;width:52px;height:52px;padding:0;justify-content:center}.fab .fabl{display:none}}

/* ALIVE: reactive feature cards + stats (no idle loops) */
.bcard,.bcard .bi,.bcard .bar{animation:none}
.bcard{cursor:pointer;translate:0 calc(var(--near,0) * -6px);border-color:color-mix(in srgb,#67E8F9 calc(var(--near,0) * 100%),#E4EAF5);box-shadow:0 1px 2px rgba(11,29,58,.06),0 calc(14px + var(--near,0) * 18px) calc(30px + var(--near,0) * 24px) -16px rgba(14,116,144,calc(.18 + var(--near,0) * .32))}
.bcard:not(:hover):not(.poked) .bi svg *{animation:none!important}
.bcard .bi{translate:var(--ix,0px) var(--iy,0px);transition:transform .55s cubic-bezier(.34,1.56,.64,1),translate .25s ease-out,background .3s,color .3s,box-shadow .3s}
.bcard:hover .bi{background:linear-gradient(135deg,#0E7490,#0FA9B8);color:#fff;transform:scale(1.14) rotate(-6deg);box-shadow:0 14px 26px -10px rgba(14,116,144,.85)}
.bcard .bar{opacity:1;transition:transform .7s var(--ease)}
.bcard:hover .bar{transform:scaleX(1)}
.bcard .bn{transition:color .3s}
.bcard:hover .bn{color:var(--blue)}
.bcard .cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:14px;color:var(--blue);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.bcard:hover .cta,.bcard:focus-visible .cta{opacity:1;transform:none}
@media (hover:none){.bcard .cta{opacity:1;transform:none}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:3;transition:transform .7s cubic-bezier(.15,.8,.3,1),opacity .7s ease}
.bcard.poked{animation:poke .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes poke{0%{scale:1}30%{scale:.96}70%{scale:1.03}100%{scale:1}}
.stats::after{display:none}
.st b{animation:none!important;transition:text-shadow .4s}
.st:hover b,.st.poked b{text-shadow:0 0 26px rgba(165,243,252,.9),0 10px 30px rgba(34,211,238,.6)}
.st:not(:hover):not(.poked) .viz *{animation:none!important}
.st{cursor:pointer}
#spark{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sgrid{z-index:1}

/* THEME: light / dark / system */
.twrap{position:relative;display:flex;margin-left:8px}
.tbtn{width:42px;height:42px;border-radius:12px;border:1px solid #CFDCF2;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh1);cursor:pointer;transition:transform .3s var(--ease),background .3s,border-color .3s}
.tbtn:hover{transform:translateY(-2px)}
.tbtn .moon{display:none}
.tmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:178px;padding:6px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);z-index:120}
.tmenu small{display:block;padding:6px 10px 4px;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--ink3);text-transform:uppercase}
.tmenu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.tmenu button:hover,.tmenu button:focus-visible{background:rgba(14,116,144,.08)}
.tmenu button[aria-checked="true"]::after{content:"✓";margin-left:auto;color:var(--blue);font-weight:800}
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease!important}
@media (max-width:1100px){.twrap{margin-left:auto}.burger{margin-left:8px}}
:root[data-theme="dark"]{--ink:#E6EEFF;--ink2:#A9B8D4;--ink3:#8FA0BC;--line:#1E2B47;--soft:#0B1730;--blue:#22D3EE;--sh1:0 1px 2px rgba(0,0,0,.45),0 14px 30px -16px rgba(0,0,0,.75);--sh2:0 2px 4px rgba(0,0,0,.45),0 40px 70px -32px rgba(0,0,0,.9);color-scheme:dark}
:root[data-theme="dark"] .tbtn .sun{display:none}
:root[data-theme="dark"] .tbtn .moon{display:block}
:root[data-theme="dark"] body{background:#070F1F}
:root[data-theme="dark"] .hdr.sc{background:rgba(7,15,31,.82);box-shadow:0 14px 40px -26px rgba(0,0,0,.9)}
:root[data-theme="dark"] .nav a:hover{background:rgba(34,211,238,.1)}
:root[data-theme="dark"] .burger,:root[data-theme="dark"] .tbtn{background:#0E1A33;border-color:#2A3A5C}
:root[data-theme="dark"] .burger span,:root[data-theme="dark"] .burger span::before,:root[data-theme="dark"] .burger span::after{background:#E6EEFF}
:root[data-theme="dark"] .mnav{background:#070F1F}
:root[data-theme="dark"] .tmenu{background:#0E1A33;border-color:#1E2B47}
:root[data-theme="dark"] .tmenu button:hover,:root[data-theme="dark"] .tmenu button:focus-visible{background:rgba(34,211,238,.12)}
:root[data-theme="dark"] .hero{background:radial-gradient(50% 50% at 82% 32%,rgba(15,169,184,.22),transparent 70%),linear-gradient(180deg,#081329,#070F1F 70%)}
:root[data-theme="dark"] .hero::before{background-image:linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px)}
:root[data-theme="dark"] .pill{background:rgba(14,26,51,.85);border-color:rgba(34,211,238,.3);color:#67E8F9}
:root[data-theme="dark"] .hero h1 .gt{background:linear-gradient(110deg,#22D3EE,#22D3EE);-webkit-background-clip:text;background-clip:text}
:root[data-theme="dark"] .btn-o{background:rgba(255,255,255,.04);border-color:#2A3A5C;color:#E6EEFF}
:root[data-theme="dark"] .btn-o:hover{border-color:#22D3EE;color:#67E8F9}
:root[data-theme="dark"] .lab{box-shadow:0 50px 90px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(103,232,249,.18)}
:root[data-theme="dark"] .marq,:root[data-theme="dark"] footer{background:#050B18}
:root[data-theme="dark"] .bcard,:root[data-theme="dark"] .cc,:root[data-theme="dark"] .pc,:root[data-theme="dark"] .tq,:root[data-theme="dark"] .jdetail,:root[data-theme="dark"] dialog{background:#0E1A33}
:root[data-theme="dark"] .cc,:root[data-theme="dark"] .pc,:root[data-theme="dark"] .tq,:root[data-theme="dark"] .jdetail{border-color:#1E2B47}
:root[data-theme="dark"] .bcard{border-color:color-mix(in srgb,#22D3EE calc(var(--near,0) * 100%),#1E2B47)}
:root[data-theme="dark"] .bi{background:rgba(15,169,184,.14);box-shadow:none}
:root[data-theme="dark"] .bcard:hover .bi{background:linear-gradient(135deg,#0E7490,#0FA9B8);color:#fff}
:root[data-theme="dark"] .cp span{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.22);color:#BFD3F5}
:root[data-theme="dark"] .cc .go span.dot{background:rgba(34,211,238,.14)}
:root[data-theme="dark"] .cc:hover .go span.dot{background:#22D3EE;color:#0B1D3A}
:root[data-theme="dark"] .stats,:root[data-theme="dark"] .plc{box-shadow:0 0 0 1px rgba(103,232,249,.12),var(--sh2)}
:root[data-theme="dark"] .jsec{background:linear-gradient(180deg,#081329,#070F1F)}
:root[data-theme="dark"] .jline{background:#1E2B47}
:root[data-theme="dark"] .jdot{background:#0E1A33;border-color:#2A3A5C;color:#7A8BA8}
:root[data-theme="dark"] .jst.done .jdot{background:var(--c);border-color:var(--c);color:#fff}
:root[data-theme="dark"] .jst b{color:#8FA0BC}
:root[data-theme="dark"] .jst.done b{color:#E6EEFF}
:root[data-theme="dark"] .jst small{color:#7F90AD}
:root[data-theme="dark"] .jst.done small{color:var(--c)}
:root[data-theme="dark"] .you{background:#E6EEFF;color:#0B1D3A}
:root[data-theme="dark"] .you::after{border-top-color:#E6EEFF}
:root[data-theme="dark"] .jd-body li{background:color-mix(in srgb,var(--c) 18%,#0E1A33);color:color-mix(in srgb,var(--c) 45%,#fff)}
:root[data-theme="dark"] .mcard{background:#0E1A33;color:#E6EEFF;box-shadow:0 0 0 1px #1E2B47,0 50px 90px -30px rgba(0,0,0,.8)}
:root[data-theme="dark"] .mrow{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .mtag{background:#0E1A33;color:#E6EEFF;box-shadow:0 0 0 1px #1E2B47,0 30px 50px -20px rgba(0,0,0,.7)}
:root[data-theme="dark"] .fcta{background:linear-gradient(135deg,#0E1A33,#0B1730);border-color:#1E2B47}
:root[data-theme="dark"] .dots button{background:#2A3A5C}
:root[data-theme="dark"] .dots button.on{background:#22D3EE}
:root[data-theme="dark"] .form input,:root[data-theme="dark"] .form select{background:#0B1730;border-color:#2A3A5C;color:#E6EEFF}
:root[data-theme="dark"] .dm .x{background:#0E1A33;border-color:#2A3A5C;color:#E6EEFF}
:root[data-theme="dark"] .toast{background:#E6EEFF;color:#0B1D3A}
:root[data-theme="dark"] .bcard .bn{color:#8FA0BC}
@media (prefers-color-scheme:dark){
:root:not([data-theme]){--ink:#E6EEFF;--ink2:#A9B8D4;--ink3:#8FA0BC;--line:#1E2B47;--soft:#0B1730;--blue:#22D3EE;--sh1:0 1px 2px rgba(0,0,0,.45),0 14px 30px -16px rgba(0,0,0,.75);--sh2:0 2px 4px rgba(0,0,0,.45),0 40px 70px -32px rgba(0,0,0,.9);color-scheme:dark}
:root:not([data-theme]) body{background:#070F1F}
:root:not([data-theme]) .hdr.sc{background:rgba(7,15,31,.82);box-shadow:0 14px 40px -26px rgba(0,0,0,.9)}
:root:not([data-theme]) .nav a:hover{background:rgba(34,211,238,.1)}
:root:not([data-theme]) .burger,:root:not([data-theme]) .tbtn{background:#0E1A33;border-color:#2A3A5C}
:root:not([data-theme]) .burger span,:root:not([data-theme]) .burger span::before,:root:not([data-theme]) .burger span::after{background:#E6EEFF}
:root:not([data-theme]) .mnav{background:#070F1F}
:root:not([data-theme]) .tmenu{background:#0E1A33;border-color:#1E2B47}
:root:not([data-theme]) .tmenu button:hover,:root:not([data-theme]) .tmenu button:focus-visible{background:rgba(34,211,238,.12)}
:root:not([data-theme]) .hero{background:radial-gradient(50% 50% at 82% 32%,rgba(15,169,184,.22),transparent 70%),linear-gradient(180deg,#081329,#070F1F 70%)}
:root:not([data-theme]) .hero::before{background-image:linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px)}
:root:not([data-theme]) .pill{background:rgba(14,26,51,.85);border-color:rgba(34,211,238,.3);color:#67E8F9}
:root:not([data-theme]) .hero h1 .gt{background:linear-gradient(110deg,#22D3EE,#22D3EE);-webkit-background-clip:text;background-clip:text}
:root:not([data-theme]) .btn-o{background:rgba(255,255,255,.04);border-color:#2A3A5C;color:#E6EEFF}
:root:not([data-theme]) .btn-o:hover{border-color:#22D3EE;color:#67E8F9}
:root:not([data-theme]) .lab{box-shadow:0 50px 90px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(103,232,249,.18)}
:root:not([data-theme]) .marq,:root:not([data-theme]) footer{background:#050B18}
:root:not([data-theme]) .bcard,:root:not([data-theme]) .cc,:root:not([data-theme]) .pc,:root:not([data-theme]) .tq,:root:not([data-theme]) .jdetail,:root:not([data-theme]) dialog{background:#0E1A33}
:root:not([data-theme]) .cc,:root:not([data-theme]) .pc,:root:not([data-theme]) .tq,:root:not([data-theme]) .jdetail{border-color:#1E2B47}
:root:not([data-theme]) .bcard{border-color:color-mix(in srgb,#22D3EE calc(var(--near,0) * 100%),#1E2B47)}
:root:not([data-theme]) .bi{background:rgba(15,169,184,.14);box-shadow:none}
:root:not([data-theme]) .bcard:hover .bi{background:linear-gradient(135deg,#0E7490,#0FA9B8);color:#fff}
:root:not([data-theme]) .cp span{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.22);color:#BFD3F5}
:root:not([data-theme]) .cc .go span.dot{background:rgba(34,211,238,.14)}
:root:not([data-theme]) .cc:hover .go span.dot{background:#22D3EE;color:#0B1D3A}
:root:not([data-theme]) .stats,:root:not([data-theme]) .plc{box-shadow:0 0 0 1px rgba(103,232,249,.12),var(--sh2)}
:root:not([data-theme]) .jsec{background:linear-gradient(180deg,#081329,#070F1F)}
:root:not([data-theme]) .jline{background:#1E2B47}
:root:not([data-theme]) .jdot{background:#0E1A33;border-color:#2A3A5C;color:#7A8BA8}
:root:not([data-theme]) .jst.done .jdot{background:var(--c);border-color:var(--c);color:#fff}
:root:not([data-theme]) .jst b{color:#8FA0BC}
:root:not([data-theme]) .jst.done b{color:#E6EEFF}
:root:not([data-theme]) .jst small{color:#7F90AD}
:root:not([data-theme]) .jst.done small{color:var(--c)}
:root:not([data-theme]) .you{background:#E6EEFF;color:#0B1D3A}
:root:not([data-theme]) .you::after{border-top-color:#E6EEFF}
:root:not([data-theme]) .jd-body li{background:color-mix(in srgb,var(--c) 18%,#0E1A33);color:color-mix(in srgb,var(--c) 45%,#fff)}
:root:not([data-theme]) .mcard{background:#0E1A33;color:#E6EEFF;box-shadow:0 0 0 1px #1E2B47,0 50px 90px -30px rgba(0,0,0,.8)}
:root:not([data-theme]) .mrow{background:rgba(255,255,255,.05)}
:root:not([data-theme]) .mtag{background:#0E1A33;color:#E6EEFF;box-shadow:0 0 0 1px #1E2B47,0 30px 50px -20px rgba(0,0,0,.7)}
:root:not([data-theme]) .fcta{background:linear-gradient(135deg,#0E1A33,#0B1730);border-color:#1E2B47}
:root:not([data-theme]) .dots button{background:#2A3A5C}
:root:not([data-theme]) .dots button.on{background:#22D3EE}
:root:not([data-theme]) .form input,:root:not([data-theme]) .form select{background:#0B1730;border-color:#2A3A5C;color:#E6EEFF}
:root:not([data-theme]) .dm .x{background:#0E1A33;border-color:#2A3A5C;color:#E6EEFF}
:root:not([data-theme]) .toast{background:#E6EEFF;color:#0B1D3A}
:root:not([data-theme]) .bcard .bn{color:#8FA0BC}
}

/* AI UNIVERSE: background planets + foreground space debris */
main,footer{position:relative;z-index:1}
.uni{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--star:14,116,144}
#stars{position:absolute;inset:0;width:100%;height:100%}
.planet{position:absolute;left:0;top:0;width:var(--s);height:var(--s);will-change:transform;opacity:.55;filter:saturate(.9);transition:opacity .8s ease,filter .8s ease}
.planet.lit{opacity:.95;filter:saturate(1.25) brightness(1.08)}
.planet.dim{opacity:.32}
.planet .body{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;background:var(--base);box-shadow:0 0 90px -6px var(--glow),inset -22px -30px 60px rgba(0,0,0,.35)}
.planet .surf{position:absolute;top:0;bottom:0;left:0;width:200%;background:var(--tex);background-size:50% 100%;will-change:transform}
.planet .shade{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.45),transparent 38%),radial-gradient(circle at 72% 78%,rgba(2,6,23,.55),transparent 62%)}
.planet .rb,.planet .rf{position:absolute;left:-38%;right:-38%;top:43%;height:14%;border-radius:50%;border:3px solid var(--ring,rgba(255,255,255,.5));transform:rotate(-16deg)}
.planet .rb{z-index:0;clip-path:inset(0 0 50% 0)}
.planet .rf{z-index:2;clip-path:inset(50% 0 0 0)}
.planet .moon{position:absolute;left:50%;top:50%;width:var(--ms,38px);height:var(--ms,38px);margin:calc(var(--ms,38px) / -2) 0 0 calc(var(--ms,38px) / -2);border-radius:50%;background:radial-gradient(circle at 35% 30%,#F5F3FF,#A78BFA 55%,#4C1D95);box-shadow:0 6px 14px -4px rgba(0,0,0,.4);will-change:transform}
.planet .moon.m2{--ms:22px;background:radial-gradient(circle at 35% 30%,#ECFEFF,#67E8F9 55%,#155E75)}
.planet .moon.sat{--ms:12px;width:30px;margin-left:-15px;border-radius:3px;background:linear-gradient(90deg,#38BDF8 0 34%,#E2E8F0 34% 66%,#38BDF8 66%)}
.p-giant{--s:560px;--base:radial-gradient(circle at 35% 30%,#E0F2FE,#7DD3FC 40%,#0C4A6E 90%);--tex:repeating-linear-gradient(2deg,transparent 0 26px,rgba(255,255,255,.2) 26px 40px);--glow:rgba(56,189,248,.35);--ring:rgba(186,230,253,.55)}
.p-gen{--s:420px;--base:radial-gradient(circle at 35% 30%,#67E8F9,#0E7490 45%,#1E3A8A 80%);--tex:repeating-linear-gradient(105deg,transparent 0 22px,rgba(219,234,254,.35) 22px 30px,transparent 30px 52px,rgba(103,232,249,.25) 52px 58px);--glow:rgba(15,169,184,.55)}
.p-ml{--s:320px;--base:radial-gradient(circle at 35% 30%,#99F6E4,#14B8A6 45%,#0F4C5C 85%);--tex:radial-gradient(circle at 30% 40%,rgba(255,255,255,.35) 0 8%,transparent 9%),radial-gradient(circle at 75% 65%,rgba(15,76,92,.55) 0 10%,transparent 11%),repeating-linear-gradient(0deg,transparent 0 18px,rgba(204,251,241,.12) 18px 30px,transparent 30px 46px,rgba(15,76,92,.12) 46px 60px);--glow:rgba(20,184,166,.5)}
.p-eng{--s:250px;--base:radial-gradient(circle at 35% 30%,#E2E8F0,#64748B 50%,#1E293B 90%);--tex:radial-gradient(circle at 20% 30%,rgba(30,41,59,.45) 0 6%,transparent 7%),radial-gradient(circle at 60% 70%,rgba(30,41,59,.4) 0 9%,transparent 10%),radial-gradient(circle at 85% 25%,rgba(30,41,59,.35) 0 4%,transparent 5%);--glow:rgba(148,163,184,.45)}
.p-agents{--s:330px;--base:radial-gradient(circle at 35% 30%,#DDD6FE,#8B5CF6 45%,#3B0764 88%);--tex:repeating-linear-gradient(75deg,transparent 0 18px,rgba(237,233,254,.3) 18px 25px,transparent 25px 44px);--glow:rgba(139,92,246,.55)}
.p-iot{--s:200px;--base:radial-gradient(circle at 35% 30%,#FED7AA,#F97316 45%,#7C2D12 88%);--tex:repeating-linear-gradient(0deg,transparent 0 10px,rgba(255,237,213,.32) 10px 14px);--glow:rgba(249,115,22,.5);--ring:rgba(254,215,170,.7)}
.uni-fore{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.frag{position:absolute;left:0;top:0;will-change:transform;visibility:hidden}
.frag svg{display:block;width:100%;height:100%;overflow:visible}
.frag.rock svg{filter:drop-shadow(0 8px 10px rgba(11,29,58,.35))}
.frag.rock .r{fill:#7C8BA1}.frag.rock .c{fill:#5B6B82}.frag.rock .h{fill:rgba(255,255,255,.35)}
.frag.moonlet{border-radius:50%;background:radial-gradient(circle at 70% 65%,rgba(51,65,85,.55) 0 14%,transparent 15%),radial-gradient(circle at 38% 62%,rgba(51,65,85,.45) 0 9%,transparent 10%),radial-gradient(circle at 35% 30%,#F1F5F9,#94A3B8 55%,#334155);box-shadow:0 10px 18px -6px rgba(11,29,58,.45),inset -3px -4px 6px rgba(0,0,0,.25)}
.frag.glint svg{filter:drop-shadow(0 0 6px rgba(14,165,233,.9))}
.frag.glint path{fill:#38BDF8}
:root[data-theme="dark"] .uni{--star:226,238,255}
:root[data-theme="dark"] .planet{opacity:.85;filter:none}
:root[data-theme="dark"] .planet.lit{opacity:1;filter:saturate(1.2) brightness(1.15)}
:root[data-theme="dark"] .planet.dim{opacity:.5}
:root[data-theme="dark"] .frag.rock svg{filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
:root[data-theme="dark"] .frag.rock .r{fill:#94A3B8}:root[data-theme="dark"] .frag.rock .c{fill:#64748B}
:root[data-theme="dark"] .frag.glint path{fill:#E0F2FE}
/* let the universe show through the big sections */
.hero{background:radial-gradient(50% 50% at 82% 32%,rgba(15,169,184,.1),transparent 70%),linear-gradient(180deg,rgba(238,244,255,.3),rgba(248,251,255,.12) 65%,rgba(255,255,255,0))}
:root[data-theme="dark"] .hero{background:radial-gradient(50% 50% at 82% 32%,rgba(15,169,184,.14),transparent 70%),linear-gradient(180deg,rgba(8,19,41,.25),rgba(7,15,31,0) 70%)}
.jsec{background:linear-gradient(180deg,rgba(245,248,255,.55),rgba(255,255,255,0))}
:root[data-theme="dark"] .jsec{background:linear-gradient(180deg,rgba(8,19,41,.45),rgba(7,15,31,0))}
@media (max-width:720px){.planet{scale:.55}}
@media (prefers-reduced-motion:reduce){.uni-fore{display:none}}

/* PLACEMENT STUDIO */
.plc .plg{align-items:start}
.ps-demo{white-space:nowrap}
.ps-badge{width:58px;height:58px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#10B981,#14B8A6);color:#fff;box-shadow:0 14px 30px -10px rgba(16,185,129,.7)}
.psteps{display:grid;gap:10px;margin:24px 0 30px}
.pst{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#E6EEFF;font-weight:700;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s,box-shadow .3s}
.pst:hover{transform:translateX(6px);background:rgba(255,255,255,.1)}
.pst:focus-visible{outline:2px solid #67E8F9;outline-offset:3px}
.pst[aria-selected="true"]{background:rgba(255,255,255,.14);border-color:#22D3EE;box-shadow:0 14px 30px -18px rgba(14,116,144,.9);transform:translateX(6px)}
.pst b{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:13px;flex:none;box-shadow:0 10px 20px -8px rgba(14,116,144,.9)}
.pst span{flex:1;min-width:0}
.pst small{display:block;font-weight:500;font-size:12.5px;color:#9FB6DD;margin-top:2px}
.pst .ck{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(255,255,255,.08);color:transparent;transition:background .3s,color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.pst.done .ck{background:#10B981;color:#fff;transform:scale(1.1)}
.ps{position:relative;background:#fff;color:#0B1D3A;border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:14px;min-height:470px;box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 0 0 1px rgba(11,29,58,.06);overflow:hidden}
.ps-top{display:flex;justify-content:space-between;align-items:center}
.ps-title{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.ps-title i{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.ps-demo{font:700 10.5px var(--fm);letter-spacing:1px;text-transform:uppercase;color:#5B7189;background:#F1F5FB;padding:4px 9px;border-radius:999px}
.ps-rrow{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:#4A5A73;margin-bottom:6px}
.ps-rrow b{color:#0B1D3A}
.ps-bar{height:8px;border-radius:99px;background:#E8EEF8;overflow:hidden}
.ps-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#0E7490,#14B8A6,#10B981);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.ps-stage{flex:1;position:relative;border-radius:18px;background:#F5F9FF;border:1px solid #E4EAF5;padding:18px;min-height:290px;font-size:13.5px}
.ps-stage .pane{animation:paneIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ps-stage h4{font-size:16px;margin:0 0 4px;color:#0B1D3A}
.ps-stage .lead{color:#4A5A73;margin-bottom:14px}
.ps-act{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;border:0;background:#0B1D3A;color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s}
.ps-act:hover{transform:translateY(-2px);background:#1E3A8A}
.ps-act:disabled{opacity:.55;cursor:default;transform:none}
.ps-act.hint{animation:hint 1.2s ease-out 2}
@keyframes hint{0%{box-shadow:0 0 0 0 rgba(14,116,144,.55)}100%{box-shadow:0 0 0 14px rgba(14,116,144,0)}}
.ps-nav{display:flex;justify-content:space-between;align-items:center}
.ps-back{background:none;border:0;color:#4A5A73;font-weight:700;font-size:13.5px;cursor:pointer;padding:8px 4px}
.ps-back:disabled{opacity:.35;cursor:default}
/* resume */
.cvwrap{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.cv{background:#fff;border:1px solid #E4EAF5;border-radius:12px;padding:12px;box-shadow:0 10px 24px -16px rgba(11,29,58,.4)}
.cv .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#67E8F9,#0E7490);margin-bottom:8px}
.cv i{display:block;height:6px;border-radius:3px;background:#E2E8F0;margin-bottom:7px;transition:background .5s}
.cv i.hl{background:#5EEAD4}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:11px;background:#fff;border:1px solid #E4EAF5;color:#4A5A73;font-weight:600;transition:border-color .4s,color .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.checks li em{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:#E8EEF8;color:transparent;flex:none;transition:background .3s,color .3s}
.checks li.ok{border-color:#99F6E4;color:#0B1D3A;transform:translateX(4px)}
.checks li.ok em{background:#10B981;color:#fff}
/* interview */
.chat{display:grid;gap:8px;margin-bottom:12px}
.bub{max-width:88%;padding:9px 12px;border-radius:14px;line-height:1.45}
.bub.q{background:#fff;border:1px solid #E4EAF5;border-bottom-left-radius:4px}
.bub.q b{display:block;font-size:11px;color:#0E7490;margin-bottom:2px}
.bub.a{justify-self:end;background:#0E7490;color:#fff;border-bottom-right-radius:4px;min-height:20px}
.fb{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fb span{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;animation:paneIn .4s cubic-bezier(.2,.8,.2,1) both}
.fb .g{background:#D1FAE5;color:#047857}.fb .t{background:#FEF3C7;color:#B45309}
/* tests */
.code{background:#0B1D3A;color:#E0E7FF;border-radius:12px;padding:12px 14px;font:500 12.5px/1.6 var(--fm);margin-bottom:10px}
.code .k{color:#C4B5FD}.code .f{color:#67E8F9}
.tests{display:grid;gap:6px;margin-bottom:12px}
.tests div{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;border-radius:10px;background:#fff;border:1px solid #E4EAF5;font:500 12px var(--fm);color:#4A5A73}
.tests em{font-style:normal;font-weight:700;font-family:var(--fb);font-size:11.5px;padding:3px 9px;border-radius:999px;background:#E8EEF8;color:#5B7189}
.tests .run em{background:#DBEAFE;color:#1D4ED8}
.tests .pass{border-color:#A7F3D0}.tests .pass em{background:#D1FAE5;color:#047857}
/* guidance */
.skills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.skills button{padding:6px 11px;border-radius:999px;border:1px solid #CFDCF2;background:#fff;color:#0B1D3A;font-weight:700;font-size:12.5px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.skills button[aria-pressed="true"]{background:#0D9488;border-color:#0D9488;color:#fff;transform:translateY(-1px)}
.roles{display:grid;gap:9px}
.role{display:grid;grid-template-columns:130px 1fr 40px;gap:10px;align-items:center;font-weight:700;font-size:12.5px}
.role .tr{height:9px;border-radius:99px;background:#E8EEF8;overflow:hidden}
.role .tr i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#38BDF8,#0D9488);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.role.top{color:#0F766E}
.role em{font-style:normal;text-align:right;color:#4A5A73}
.tiny{font-size:11.5px;color:#5B7189;margin-top:10px}
/* jobs */
.jobs{display:grid;gap:8px}
.job{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;background:#fff;border:1px solid #E4EAF5;transition:border-color .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.job:hover{transform:translateY(-2px);border-color:#BFDBFE}
.job b{display:block;font-size:13.5px}
.job small{color:#5B7189;font-size:12px}
.job button{flex:none;padding:7px 12px;border-radius:10px;border:1px solid #CFDCF2;background:#fff;color:#0B1D3A;font-weight:700;font-size:12px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.job button[aria-pressed="true"]{background:#10B981;border-color:#10B981;color:#fff}
.ps-done{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(255,255,255,.94);border-radius:18px;animation:paneIn .5s cubic-bezier(.2,.8,.2,1)}
.ps-done h4{font-size:22px;margin-bottom:6px}
.ps .spark{z-index:5}
@media (max-width:720px){.ps-demo{display:none}.cvwrap{grid-template-columns:1fr}.cv{display:none}.role{grid-template-columns:100px 1fr 36px}.ps{padding:14px;min-height:0}.ps-stage{padding:14px}}

/* PLACEMENT PANEL BACKGROUND: career route + reactive light */
.plc::before{display:none}
.plc .plg{position:relative;z-index:1}
.plc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;--rt:103,232,249;--rp0:#22D3EE;--rp1:#34D399;--nd:#0B1D3A;--spot:rgba(34,211,238,.16);--au1:rgba(34,211,238,.22);--au2:rgba(124,58,237,.2);--dot:rgba(103,232,249,.12)}
.plc-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 80% at 60% 40%,#000,transparent 85%);mask-image:radial-gradient(70% 80% at 60% 40%,#000,transparent 85%)}
.plc-aur{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(70px);will-change:transform}
.plc-aur.a1{background:var(--au1);left:0;top:0}
.plc-aur.a2{background:var(--au2);left:0;top:0;width:420px;height:420px}
.plc-spot{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(closest-side,var(--spot),transparent);opacity:0;transition:opacity .5s;will-change:transform}
.plc-bg.on .plc-spot{opacity:1}
.plc-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.plc-route .g0{stop-color:var(--rp0)}.plc-route .g1{stop-color:var(--rp1)}
.plc-route .base{fill:none;stroke:rgba(var(--rt),.22);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round}
.plc-route .prog{fill:none;stroke:url(#plcGrad);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--rp0));transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.plc-route .nd{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.plc-route .nd .ring{fill:var(--nd);stroke:rgba(var(--rt),.45);stroke-width:2;transition:fill .4s,stroke .4s}
.plc-route .nd .core{fill:rgba(var(--rt),.5);transition:fill .4s}
.plc-route .nd .halo{fill:none;stroke:var(--rp0);stroke-width:2;opacity:0;transition:opacity .4s}
.plc-route .nd.done .ring{fill:var(--rp1);stroke:var(--rp1)}
.plc-route .nd.done .core{fill:#fff}
.plc-route .nd.cur .halo{opacity:.8}
.plc-route .nd.goal .ring{stroke-width:3}
.plc-route .nd.goal.done .ring{fill:var(--rp1)}
.plc-route .nd.pop{animation:ndpop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes ndpop{0%{transform:scale(1)}40%{transform:scale(1.8)}100%{transform:scale(1)}}
.plc-route .trav{fill:#fff;filter:drop-shadow(0 0 10px var(--rp0)) drop-shadow(0 0 4px #fff);transition:cx .9s cubic-bezier(.2,.8,.2,1),cy .9s cubic-bezier(.2,.8,.2,1)}
.plc-bg.finished .plc-route .prog{filter:drop-shadow(0 0 14px var(--rp1))}
:root[data-theme="dark"] .plc-bg{--rt:13,148,136;--rp0:#0EA5E9;--rp1:#10B981;--nd:#F0FDFA;--spot:rgba(14,165,233,.16);--au1:rgba(20,184,166,.2);--au2:rgba(56,189,248,.22);--dot:rgba(13,148,136,.14)}
@media (max-width:720px){.plc-aur{width:320px;height:320px}}

/* SUN + MOON */
.p-sun{--s:620px;--base:radial-gradient(circle at 40% 38%,#FFF7D6,#FFD166 30%,#FB923C 62%,#EA580C 88%);--tex:radial-gradient(circle at 20% 30%,rgba(255,255,255,.28) 0 5%,transparent 6%),radial-gradient(circle at 55% 60%,rgba(234,88,12,.25) 0 7%,transparent 8%),radial-gradient(circle at 80% 25%,rgba(255,255,255,.22) 0 4%,transparent 5%),radial-gradient(circle at 35% 80%,rgba(234,88,12,.22) 0 6%,transparent 7%);--glow:rgba(251,146,60,.75);opacity:.95!important;filter:none!important}
.p-sun .body{box-shadow:0 0 120px 30px rgba(251,191,36,.45),0 0 260px 80px rgba(251,146,60,.25),inset -30px -40px 90px rgba(194,65,12,.45)}
.p-sun .shade{background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.55),transparent 40%)}
.p-sun .corona{position:absolute;inset:-26%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(253,186,116,.55) 0deg 3deg,transparent 3deg 14deg);-webkit-mask-image:radial-gradient(closest-side,transparent 60%,#000 66%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 60%,#000 66%,transparent 100%);will-change:transform}
.p-sun .flare{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(254,215,170,.45),transparent 70%);animation:sunpulse 4.8s ease-in-out infinite}
@keyframes sunpulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.07);opacity:1}}
.p-moon{--s:540px;--base:radial-gradient(circle at 36% 32%,#F8FAFC,#CBD5E1 45%,#64748B 85%);--tex:radial-gradient(circle at 18% 30%,rgba(71,85,105,.45) 0 7%,rgba(148,163,184,.3) 7.5% 8.5%,transparent 9%),radial-gradient(circle at 48% 62%,rgba(71,85,105,.4) 0 10%,rgba(148,163,184,.3) 10.5% 11.5%,transparent 12%),radial-gradient(circle at 70% 22%,rgba(71,85,105,.38) 0 5%,transparent 6%),radial-gradient(circle at 82% 70%,rgba(71,85,105,.4) 0 8%,transparent 9%),radial-gradient(circle at 32% 85%,rgba(71,85,105,.35) 0 4%,transparent 5%),radial-gradient(ellipse at 60% 40%,rgba(100,116,139,.25) 0 18%,transparent 19%);--glow:rgba(203,213,225,.55);opacity:.92!important;filter:none!important}
.p-moon .body{box-shadow:0 0 90px 10px rgba(226,232,240,.35),inset -40px -50px 90px rgba(15,23,42,.55)}
:root[data-theme="dark"] .p-moon .body{box-shadow:0 0 140px 30px rgba(226,232,240,.3),inset -40px -50px 90px rgba(2,6,23,.6)}
:root[data-theme="dark"] .p-sun{opacity:.9!important}
/* light mode: deeper, more solid planets */
:root:not([data-theme="dark"]) .planet{opacity:.92;filter:saturate(1.2) brightness(.8) contrast(1.12)}
:root:not([data-theme="dark"]) .planet.lit{opacity:1;filter:saturate(1.35) brightness(.92) contrast(1.12)}
:root:not([data-theme="dark"]) .planet.dim{opacity:.7}
:root:not([data-theme="dark"]) .p-moon{filter:brightness(.88) contrast(1.15)!important}
:root:not([data-theme="dark"]) .uni{--star:30,58,138}
@media (max-width:720px){.p-sun{--s:620px}.p-moon{--s:420px}.uni .planet,.uni .planet.lit,.uni .planet.dim,.uni .p-sun,.uni .p-moon{opacity:.38!important;filter:none!important}}

/* DIGITAL SURREAL PLANETS */
.planet .body::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;background-image:radial-gradient(rgba(255,255,255,.55) .8px,transparent 1.5px);background-size:9px 9px;mix-blend-mode:overlay;opacity:.75;pointer-events:none}
.planet .body::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:5;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 10px 0 22px -8px rgba(34,211,238,.9),inset -10px 0 22px -8px rgba(244,114,182,.85);pointer-events:none}
.planet .wire{position:absolute;inset:0;width:100%;height:100%;z-index:3;fill:none;stroke:rgba(255,255,255,.5);stroke-width:1;animation:glitch 7s steps(1) infinite}
.planet .wire *{vector-effect:non-scaling-stroke}
.planet .wire .lon{transform-box:fill-box;transform-origin:center;animation:lon 8s ease-in-out infinite;stroke:rgba(165,243,252,.6)}
@keyframes lon{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.02)}}
@keyframes glitch{0%,91%,100%{transform:none;opacity:1}92%{transform:translateX(4px);opacity:.6}93%{transform:translateX(-3px)}94%{transform:none;opacity:1}}
.planet .scan{position:absolute;left:0;right:0;height:22%;top:-25%;z-index:4;background:linear-gradient(180deg,transparent,rgba(165,243,252,.35),rgba(255,255,255,.55) 52%,transparent 54%);animation:pscan 5.5s linear infinite;pointer-events:none}
@keyframes pscan{0%{top:-25%}100%{top:105%}}
.planet .shade{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.4),transparent 36%),radial-gradient(circle at 74% 80%,rgba(15,10,40,.55),transparent 62%)}
.planet .body{box-shadow:0 0 90px -6px var(--glow),-10px 0 40px -14px rgba(34,211,238,.75),10px 0 40px -14px rgba(244,114,182,.7),inset -22px -30px 60px rgba(10,6,30,.4)}
.planet .rb,.planet .rf{border:2px dashed var(--ring,rgba(165,243,252,.75));box-shadow:0 0 14px rgba(34,211,238,.45)}
.planet .moon{box-shadow:0 0 16px rgba(165,243,252,.7),0 6px 14px -4px rgba(0,0,0,.4);outline:1px solid rgba(255,255,255,.55);outline-offset:-1px}
/* iridescent palettes */
.p-giant{--base:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 40%),conic-gradient(from 200deg,#22D3EE,#818CF8,#F472B6,#38BDF8,#22D3EE);--tex:repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.18) 18px 20px);--glow:rgba(129,140,248,.55);--ring:rgba(165,243,252,.8)}
.p-gen{--base:radial-gradient(circle at 35% 30%,#BFDBFE,#0FA9B8 42%,#4C1D95 85%);--tex:repeating-linear-gradient(90deg,transparent 0 22px,rgba(56,189,248,.35) 22px 24px),repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,255,255,.12) 14px 15px);--glow:rgba(15,169,184,.65)}
.p-ml{--base:radial-gradient(circle at 35% 30%,#CCFBF1,#2DD4BF 40%,#0E7490 70%,#312E81 95%);--tex:repeating-linear-gradient(0deg,transparent 0 10px,rgba(255,255,255,.2) 10px 11px),repeating-linear-gradient(90deg,transparent 0 16px,rgba(20,184,166,.3) 16px 17px);--glow:rgba(45,212,191,.6)}
.p-eng{--base:radial-gradient(circle at 35% 30%,#F1F5F9,#94A3B8 38%,#475569 70%,#1E1B4B 95%);--tex:repeating-linear-gradient(45deg,transparent 0 12px,rgba(165,243,252,.22) 12px 13px),repeating-linear-gradient(-45deg,transparent 0 12px,rgba(244,114,182,.18) 12px 13px);--glow:rgba(148,163,184,.55)}
.p-agents{--base:radial-gradient(circle at 35% 30%,#F5D0FE,#C084FC 38%,#7C3AED 66%,#1E1B4B 95%);--tex:repeating-linear-gradient(75deg,transparent 0 16px,rgba(244,114,182,.3) 16px 18px);--glow:rgba(192,132,252,.65)}
.p-iot{--base:radial-gradient(circle at 35% 30%,#FEF3C7,#FB923C 40%,#E11D48 75%,#4C0519 95%);--tex:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.22) 8px 9px);--glow:rgba(251,113,133,.6);--ring:rgba(253,186,116,.85)}
/* retro digital sun */
.p-sun{--base:linear-gradient(180deg,#FEF08A 0%,#FDBA74 28%,#FB7185 58%,#C026D3 82%,#7C3AED 100%);--tex:none}
.p-sun .body{-webkit-mask-image:linear-gradient(#000 0 52%,transparent 52% 55%,#000 55% 63%,transparent 63% 67%,#000 67% 74%,transparent 74% 79%,#000 79% 85%,transparent 85% 91%,#000 91%);mask-image:linear-gradient(#000 0 52%,transparent 52% 55%,#000 55% 63%,transparent 63% 67%,#000 67% 74%,transparent 74% 79%,#000 79% 85%,transparent 85% 91%,#000 91%);box-shadow:none}
.p-sun{filter:drop-shadow(0 0 60px rgba(251,113,133,.55)) drop-shadow(0 0 140px rgba(253,186,116,.4))!important}
.p-sun .body::before{opacity:.45}
.p-sun .body::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.p-sun .shade{background:radial-gradient(circle at 40% 25%,rgba(255,255,255,.55),transparent 38%)}
.p-sun .corona{background:repeating-conic-gradient(from 0deg,rgba(253,186,116,.9) 0deg 1.2deg,transparent 1.2deg 6deg);-webkit-mask-image:radial-gradient(closest-side,transparent 72%,#000 74%,#000 80%,transparent 82%);mask-image:radial-gradient(closest-side,transparent 72%,#000 74%,#000 80%,transparent 82%)}
.p-sun .flare{background:radial-gradient(closest-side,rgba(251,113,133,.35),transparent 70%)}
.p-sun .radar{position:absolute;inset:-6%;border-radius:50%;border:1.5px solid rgba(253,186,116,.6);animation:radar 4.8s ease-out infinite}
.p-sun .radar.r2{animation-delay:-2.4s;border-color:rgba(244,114,182,.55)}
@keyframes radar{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.45);opacity:0}}
/* holographic moon */
.p-moon{--base:radial-gradient(circle at 36% 32%,#F8FAFC,#C7D2FE 40%,#818CF8 72%,#312E81 96%);--glow:rgba(165,180,252,.6)}
.p-moon .wire{stroke:rgba(255,255,255,.55)}
.p-moon .body{box-shadow:0 0 110px 10px rgba(165,180,252,.45),-10px 0 40px -14px rgba(34,211,238,.75),10px 0 40px -14px rgba(244,114,182,.7),inset -40px -50px 90px rgba(30,27,75,.55)}
:root:not([data-theme="dark"]) .planet{filter:saturate(1.2) brightness(.88) contrast(1.1)}
:root:not([data-theme="dark"]) .p-moon{filter:brightness(.92) contrast(1.1)!important}
@media (prefers-reduced-motion:reduce){.planet .scan,.p-sun .radar{display:none}}

/* PERFORMANCE + CONSISTENCY PASS */
.planet .body::before{mix-blend-mode:normal;opacity:.22}
.planet .wire,.planet .wire .lon{animation:none}
.planet .scan{display:none}
.planet .surf{will-change:auto}
.planet{filter:none!important;transition:opacity .8s ease}
.planet.lit .body{box-shadow:0 0 120px 4px var(--glow),-10px 0 40px -14px rgba(34,211,238,.75),10px 0 40px -14px rgba(244,114,182,.7),inset -22px -30px 60px rgba(10,6,30,.4)}
:root:not([data-theme="dark"]) .planet .shade{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.35),transparent 36%),radial-gradient(circle at 74% 80%,rgba(15,10,40,.6),transparent 62%),rgba(15,23,42,.16)}
.p-sun{filter:none!important}
.p-sun::before{content:"";position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(251,113,133,.35),rgba(253,186,116,.18) 55%,transparent 75%);z-index:-1}
.p-sun .radar.r2{display:none}
.hdr.sc{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stats::after{display:none}
/* animations pause while their section is off-screen */
.paused,.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

/* CAREER PATH THREAD + KNOWLEDGE NETWORK */
.uni{--kn-node:14,116,144;--kn-on:13,148,136;--kn-line:14,116,144}
:root[data-theme="dark"] .uni{--kn-node:103,232,249;--kn-on:45,212,191;--kn-line:103,232,249}
#kn{position:absolute;inset:0;width:100%;height:100%}
.cpath{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;overflow:visible;--cp0:#0E7490;--cp1:#0EA5E9;--cp2:#10B981;--cpb:rgba(14,116,144,.22);--cpt:#0B1D3A;--cpm:#fff}
:root[data-theme="dark"] .cpath{--cp0:#22D3EE;--cp1:#22D3EE;--cp2:#34D399;--cpb:rgba(103,232,249,.22);--cpt:#E6EEFF;--cpm:#0B1730}
.cpath .c0{stop-color:var(--cp0)}.cpath .c1{stop-color:var(--cp1)}.cpath .c2{stop-color:var(--cp2)}
.cpath path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cp-base{stroke:var(--cpb);stroke-width:2;stroke-dasharray:3 9}
.cp-prog{stroke:url(#cpGrad);stroke-width:3.5}
.cp-glow{stroke:url(#cpGrad);stroke-width:9;opacity:.35;filter:url(#cpGlow)}
.cp-trav .dot{fill:#fff;stroke:var(--cp1);stroke-width:3}
.cp-trav .halo{fill:var(--cp1);opacity:.18}
.ms .ring{fill:var(--cpm);stroke:var(--cpb);stroke-width:2;transition:fill .4s,stroke .4s}
.ms .core{fill:var(--cpb);transition:fill .4s}
.ms text{font:700 10px var(--fm);letter-spacing:1.2px;fill:var(--cpt);opacity:.5;transition:opacity .4s;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
:root[data-theme="dark"] .ms text{stroke:#070F1F}
.ms text .n{fill:var(--cp1)}
.ms.on .ring{fill:var(--cp1);stroke:var(--cp1)}
.ms.on .core{fill:#fff}
.ms.on text{opacity:.95}
.ms.last .ring{stroke-width:3}
.ms.last.on .ring{fill:var(--cp2);stroke:var(--cp2)}
.ms.last.on .burst{animation:msburst 1.6s ease-out infinite}
.ms .burst{fill:none;stroke:var(--cp2);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes msburst{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.ms .burst{display:none}}

/* DEPTH PARALLAX (scroll-locked, small, vertical only) */
[data-px]{translate:0 var(--py,0px)}
.bcard{translate:0 calc(var(--near,0) * -6px + var(--py,0px))}
/* readiness badge */
.rdy{position:fixed;left:22px;bottom:22px;z-index:150;display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--sh2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;font:inherit;text-align:left;transform:translateY(140px);transition:transform .6s var(--ease)}
.rdy.show{transform:none}
.rdy:hover{border-color:#67E8F9}
.rdy-ring{position:relative;width:44px;height:44px;flex:none}
.rdy-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.rdy-ring circle{fill:none;stroke-width:4}
.rdy-ring .rb{stroke:#E2E8F5}
.rdy-ring .rf{stroke:#14B8A6;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s var(--ease)}
.rdy-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 11.5px var(--fb)}
.rdy-txt small{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3)}
.rdy-txt em{font-style:normal;font-size:13px;font-weight:700}
.rdy.bump .rdy-ring{animation:poke .6s cubic-bezier(.34,1.56,.64,1)}
.rdy-pop{position:fixed;left:30px;bottom:86px;z-index:151;pointer-events:none;padding:7px 12px;border-radius:12px;background:#0B1D3A;color:#fff;font-size:12.5px;font-weight:700;box-shadow:var(--sh2);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}
.rdy-pop.on{opacity:1;transform:none}
.rdy-pop b{color:#5EEAD4}
:root[data-theme="dark"] .rdy{background:rgba(14,26,51,.92);border-color:#1E2B47}
:root[data-theme="dark"] .rdy-ring .rb{stroke:#1E2B47}
:root[data-theme="dark"] .rdy-pop{background:#E6EEFF;color:#0B1D3A}
:root[data-theme="dark"] .rdy-pop b{color:#0F766E}
.rm-meter{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:13px;font-weight:700;color:var(--ink2);margin:4px 0 18px}
.rm-meter b{color:var(--ink)}
.rm-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.rm-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:11px 13px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}
.rm-steps li b{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:12.5px}
.rm-steps li span{font-weight:700;font-size:14px}
.rm-steps li small{display:block;font-weight:500;color:var(--ink2);font-size:13px;margin-top:2px}
.cpath .ms text.pers{fill:var(--cp1)}
@media (max-width:720px){.rdy{left:14px;bottom:14px;padding:5px}.rdy-txt{display:none}.rdy-pop{left:14px;bottom:76px}}
@media (prefers-reduced-motion:reduce){[data-px]{translate:none!important}}


/* BRAND: Aristonet logo (light on white header, white/cyan on dark surfaces) */
.brand .lg{height:52px;width:auto;display:block}
.brand .lg-d{display:none}
.hdr.over-open .brand .lg-l,footer .brand .lg-l,:root[data-theme="dark"] .brand .lg-l{display:none}
.hdr.over-open .brand .lg-d,footer .brand .lg-d,:root[data-theme="dark"] .brand .lg-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .brand .lg-l{display:none}:root:not([data-theme]) .brand .lg-d{display:block}}
footer .brand .lg{height:60px}
@media (max-width:720px){.brand .lg{height:42px}}
.open-pin::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,rgba(7,15,31,.55),rgba(7,15,31,0));pointer-events:none;z-index:3}


/* ===== CIRCUIT: opening → hero continuity ===== */
.hero.bloom-hero,:root[data-theme] .hero.bloom-hero{background:none!important}
.hero.bloom-hero::before{display:none}
.open-pin{background:#040b1c}
#chip3d{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.open-pin::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--scrim,0);
  background:linear-gradient(90deg,rgba(4,11,28,.94) 0%,rgba(4,11,28,.78) 36%,rgba(4,11,28,.25) 58%,rgba(4,11,28,0) 70%),linear-gradient(0deg,rgba(4,11,28,.55),rgba(4,11,28,0) 30%)}
@media (max-width:1024px){.open-pin::before{background:linear-gradient(180deg,rgba(4,11,28,.55),rgba(4,11,28,.9) 30%,rgba(4,11,28,.9) 62%,rgba(4,11,28,.35))}}
.hero.bloom-hero h1{color:#F2F8FF}
.hero.bloom-hero h1 .gt{background:linear-gradient(100deg,#22D3EE,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.bloom-hero .lede{color:#B4C6E4}
.hero.bloom-hero .chips span{color:#C9DBF2}
.hero.bloom-hero .chips svg{color:#22D3EE}
.hero.bloom-hero .pill{background:rgba(11,23,52,.8);border-color:rgba(34,211,238,.35);color:#67E8F9}
.hero.bloom-hero .btn-o{background:rgba(255,255,255,.05);border-color:rgba(103,232,249,.3);color:#EAF6FF;box-shadow:none}
.hero.bloom-hero .btn-o:hover{border-color:#22D3EE;color:#67E8F9}
/* the Career Engine wears the chip's glowing frame, so the hand-off is seamless */
.hero.bloom-hero .lab{background:linear-gradient(160deg,#0c1a3d,#0a1532 60%,#0d1b45);color:#E6F4FF;
  box-shadow:0 0 0 1.5px rgba(34,211,238,.7),0 0 34px -4px rgba(34,211,238,.5),inset 0 0 0 6px rgba(4,11,28,.6),inset 0 0 0 7px rgba(139,92,246,.35),0 60px 110px -40px rgba(0,0,0,.95)}
.hero.morph .lab{transition:none}

/* ===== CIRCUIT THEME (default): PCB navy, neon cyan + violet ===== */
:root[data-theme="dark"]{--ink:#E8F4FF;--ink2:#A8BBD9;--ink3:#8296B8;--line:#18294D;--soft:#0A1631;--blue:#22D3EE;--cyan:#22D3EE;--violet:#8B5CF6;
  --grad:linear-gradient(120deg,#0891B2,#0E7490 45%,#6D28D9);
  --sh1:0 0 0 1px rgba(34,211,238,.1),0 18px 40px -22px rgba(0,0,0,.9);--sh2:0 0 0 1px rgba(34,211,238,.12),0 40px 80px -40px rgba(0,0,0,.95);--sh3:0 0 60px -10px rgba(34,211,238,.35)}
:root[data-theme="dark"] body{background:#050C1E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2322D3EE' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M0 60h90l30 30h80M200 90v70l40 40h120M40 360V250l30-30h60M300 0v50l-30 30h-50M360 300h-70l-40-40v-60'/%3E%3C/g%3E%3Cg stroke='%238B5CF6' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M120 360v-60l30-30h70M0 160h50l40 40v70M260 360v-40'/%3E%3C/g%3E%3Cg fill='%2322D3EE' fill-opacity='.1'%3E%3Ccircle cx='200' cy='90' r='4'/%3E%3Ccircle cx='130' cy='220' r='4'/%3E%3Ccircle cx='220' cy='80' r='4'/%3E%3Ccircle cx='250' cy='200' r='4'/%3E%3C/g%3E%3Cg fill='%238B5CF6' fill-opacity='.1'%3E%3Ccircle cx='220' cy='270' r='4'/%3E%3Ccircle cx='90' cy='270' r='4'/%3E%3C/g%3E%3C/svg%3E") repeat;background-size:360px}
:root[data-theme="dark"] .hdr.sc{background:rgba(5,12,30,.84);box-shadow:0 1px 0 rgba(34,211,238,.12),0 14px 40px -26px rgba(0,0,0,.9)}
:root[data-theme="dark"] .mnav,:root[data-theme="dark"] .tmenu{background:#071230}
:root[data-theme="dark"] .eyebrow{color:#22D3EE}
:root[data-theme="dark"] .eyebrow::before{background:linear-gradient(90deg,#22D3EE,#8B5CF6)}
:root[data-theme="dark"] .gt,:root[data-theme="dark"] .hero h1 .gt{background:linear-gradient(100deg,#22D3EE,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .btn-p{box-shadow:0 0 0 1px rgba(103,232,249,.25),0 16px 40px -14px rgba(34,211,238,.55)}
:root[data-theme="dark"] .btn-p:hover{box-shadow:0 0 0 1px rgba(103,232,249,.5),0 0 34px -4px rgba(34,211,238,.6)}
:root[data-theme="dark"] .btn-o{background:rgba(255,255,255,.04);border-color:rgba(103,232,249,.28);color:#EAF6FF}
:root[data-theme="dark"] .btn-o:hover{border-color:#22D3EE;color:#67E8F9}
:root[data-theme="dark"] .bcard,:root[data-theme="dark"] .cc,:root[data-theme="dark"] .pc,:root[data-theme="dark"] .tq,:root[data-theme="dark"] .jdetail,:root[data-theme="dark"] .mcard,:root[data-theme="dark"] .mtag,:root[data-theme="dark"] .fcta{
  background:linear-gradient(160deg,#0B1734,#09132C);border-color:rgba(34,211,238,.16);box-shadow:0 0 0 1px rgba(34,211,238,.08),0 40px 80px -40px rgba(0,0,0,.95)}
:root[data-theme="dark"] .cc:hover,:root[data-theme="dark"] .pc:hover,:root[data-theme="dark"] .tq:hover{border-color:rgba(34,211,238,.45);box-shadow:0 0 0 1px rgba(34,211,238,.3),0 0 40px -10px rgba(34,211,238,.35),0 40px 80px -40px rgba(0,0,0,.95)}
:root[data-theme="dark"] .bcard{border-color:color-mix(in srgb,#22D3EE calc(var(--near,0) * 100%),rgba(34,211,238,.16))}
:root[data-theme="dark"] .bi{background:rgba(34,211,238,.1);color:#67E8F9}
:root[data-theme="dark"] .bcard:hover .bi{background:linear-gradient(135deg,#0891B2,#6D28D9);color:#fff}
:root[data-theme="dark"] .cc .art,:root[data-theme="dark"] .pv{background:radial-gradient(80% 90% at 50% 40%,rgba(139,92,246,.2),transparent 70%),linear-gradient(160deg,#07112A,#0C1A3D)}
:root[data-theme="dark"] .stats,:root[data-theme="dark"] .plc{background:radial-gradient(60% 120% at 85% 0%,rgba(139,92,246,.2),transparent 60%),radial-gradient(50% 90% at 0% 100%,rgba(34,211,238,.12),transparent 60%),linear-gradient(135deg,#0A1532,#0C1C44);color:#E8F4FF;
  box-shadow:0 0 0 1px rgba(34,211,238,.22),0 0 60px -24px rgba(34,211,238,.35),0 50px 100px -50px rgba(0,0,0,.95)}
:root[data-theme="dark"] .st{border-left-color:rgba(34,211,238,.14)}
:root[data-theme="dark"] .st b{color:#fff;text-shadow:0 0 24px rgba(34,211,238,.35)}
:root[data-theme="dark"] .steps li{background:rgba(255,255,255,.03);border-color:rgba(34,211,238,.16)}
:root[data-theme="dark"] .jsec{background:transparent}
:root[data-theme="dark"] .jline{background:rgba(34,211,238,.18)}
:root[data-theme="dark"] .jdot{background:#0B1734;border-color:rgba(34,211,238,.3);color:#7FA2C8}
:root[data-theme="dark"] .marq{background:#030816;border-color:rgba(34,211,238,.12)}
:root[data-theme="dark"] footer{background:#030816;border-top:1px solid rgba(34,211,238,.12)}
:root[data-theme="dark"] .goal[aria-pressed="true"]{background:linear-gradient(120deg,#0891B2,#6D28D9);border-color:transparent;color:#fff;box-shadow:0 0 22px -6px rgba(34,211,238,.6)}
:root[data-theme="dark"] .form input,:root[data-theme="dark"] .form select{background:#071230;border-color:rgba(34,211,238,.2)}
:root[data-theme="dark"] .uni{--kn-node:34,211,238;--kn-on:139,92,246;--kn-line:34,211,238;--star:103,232,249}


:root[data-theme="dark"] .ps{background:linear-gradient(160deg,#0B1734,#09132C);color:#E8F4FF;box-shadow:0 0 0 1px rgba(34,211,238,.3),0 0 50px -14px rgba(34,211,238,.35),0 50px 90px -40px rgba(0,0,0,.95)}
:root[data-theme="dark"] .ps-demo{background:rgba(34,211,238,.1);color:#67E8F9}
:root[data-theme="dark"] .ps-rrow{color:#A8BBD9}:root[data-theme="dark"] .ps-rrow b{color:#fff}
:root[data-theme="dark"] .ps-bar,:root[data-theme="dark"] .role .tr{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .ps-bar i{background:linear-gradient(90deg,#22D3EE,#8B5CF6)}
:root[data-theme="dark"] .ps-stage{background:#071230;border-color:rgba(34,211,238,.14)}
:root[data-theme="dark"] .ps-stage h4,:root[data-theme="dark"] .ps-done h4{color:#fff}
:root[data-theme="dark"] .ps-stage .lead,:root[data-theme="dark"] .ps-back,:root[data-theme="dark"] .role em,:root[data-theme="dark"] .tiny,:root[data-theme="dark"] .job small{color:#93A9CC}
:root[data-theme="dark"] .ps-act{background:linear-gradient(120deg,#0891B2,#6D28D9)}
:root[data-theme="dark"] .ps-done{background:rgba(7,18,48,.96)}
:root[data-theme="dark"] .pst{background:rgba(255,255,255,.035);border-color:rgba(34,211,238,.16);color:#E8F4FF}
:root[data-theme="dark"] .pst:hover{background:rgba(34,211,238,.08)}
:root[data-theme="dark"] .pst[aria-selected="true"]{background:rgba(34,211,238,.1);border-color:#22D3EE;box-shadow:0 0 26px -8px rgba(34,211,238,.55)}
:root[data-theme="dark"] .pst small{color:#93A9CC}
:root[data-theme="dark"] .pst .ck{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .cv,:root[data-theme="dark"] .checks li,:root[data-theme="dark"] .bub.q,:root[data-theme="dark"] .tests div,:root[data-theme="dark"] .skills button,:root[data-theme="dark"] .job,:root[data-theme="dark"] .job button{background:#0B1734;border-color:rgba(34,211,238,.16);color:#C9DBF2}
:root[data-theme="dark"] .cv i{background:rgba(255,255,255,.1)}:root[data-theme="dark"] .cv i.hl{background:#22D3EE}
:root[data-theme="dark"] .checks li.ok{border-color:rgba(16,185,129,.6);color:#fff}
:root[data-theme="dark"] .checks li em,:root[data-theme="dark"] .tests em{background:rgba(255,255,255,.08);color:#93A9CC}
:root[data-theme="dark"] .bub.q b{color:#67E8F9}:root[data-theme="dark"] .bub.a{background:linear-gradient(120deg,#0891B2,#6D28D9)}
:root[data-theme="dark"] .code{background:#040b1c;box-shadow:0 0 0 1px rgba(34,211,238,.16)}
:root[data-theme="dark"] .skills button[aria-pressed="true"]{background:linear-gradient(120deg,#0891B2,#6D28D9);border-color:transparent;color:#fff}
:root[data-theme="dark"] .role.top{color:#67E8F9}:root[data-theme="dark"] .role .tr i{background:linear-gradient(90deg,#22D3EE,#8B5CF6)}
:root[data-theme="dark"] .job:hover{border-color:rgba(34,211,238,.45)}
:root[data-theme="dark"] .fb .g{background:rgba(16,185,129,.16);color:#6EE7B7}:root[data-theme="dark"] .fb .t{background:rgba(245,158,11,.16);color:#FCD34D}
:root[data-theme="dark"] .tests .run em{background:rgba(34,211,238,.16);color:#67E8F9}:root[data-theme="dark"] .tests .pass em{background:rgba(16,185,129,.16);color:#6EE7B7}


@media (min-width:1025px){
  .hero.bloom-hero .wrap.hg{width:min(1480px,100% - 2*clamp(28px,5vw,88px));grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,120px)}
  .hero.bloom-hero h1{font-size:clamp(52px,5.6vw,92px)}
  .hero.bloom-hero .lede{max-width:560px;font-size:clamp(17px,1.25vw,20px)}
}
.hero.bloom-hero .lab{border-radius:26px;background:linear-gradient(135deg,#0c1a3d,#0a1532 60%,#0d1b45);
  box-shadow:0 0 0 1.5px rgba(34,211,238,.85),0 0 34px -4px rgba(34,211,238,.55),0 60px 110px -40px rgba(0,0,0,.95)!important}


/* BREAK-DOWN: Career Engine cracks into five 3D microchips that land as the feature cards + stats band.
   Each chip is built once at its final card size; frames only change transform + opacity (GPU-composited, no layout/paint). */
.shards{position:absolute;left:0;top:0;width:100%;height:0;z-index:40;pointer-events:none;contain:layout style}
.shard{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;visibility:hidden;backface-visibility:hidden}
.shard.sq{z-index:2}
.shard>*{position:absolute;inset:0;border-radius:inherit;will-change:opacity}
/* card shell (always there, becomes the real card) */
.shard .sk{background:linear-gradient(160deg,#10204a,#0a1532 55%,#0c1a42);box-shadow:0 0 0 1.5px rgba(34,211,238,.45),0 30px 50px -28px rgba(0,0,0,.9)}
/* neon halo while flying (opacity only) */
.shard .hl{box-shadow:0 0 0 2px rgba(103,232,249,.9),0 0 34px rgba(34,211,238,.6);opacity:0}
/* the microchip: seating frame, pins, raised glossy body, glowing die face — one static layer */
.shard .cp{opacity:0}
.shard .cp .fr{position:absolute;inset:7%;border-radius:10px;box-shadow:0 0 0 4px #5fb4ec,0 0 0 5px rgba(255,255,255,.35),0 0 20px rgba(56,189,248,.55)}
.shard .cp .tr{position:absolute;inset:0;border-radius:inherit;opacity:.7;
  background:repeating-linear-gradient(90deg,rgba(34,211,238,.18) 0 1.5px,transparent 1.5px 14px) center/50% 100% no-repeat,
             repeating-linear-gradient(0deg,rgba(139,92,246,.18) 0 1.5px,transparent 1.5px 14px) center/100% 46% no-repeat}
.shard .pn{position:absolute}
.shard .pt,.shard .pb{left:11%;right:11%;height:13px;background:repeating-linear-gradient(90deg,#f1f6ff 0 1.5px,#b4c3e0 1.5px 4px,#6e81a8 4px 6px,transparent 6px 12px)}
.shard .pt{bottom:100%}.shard .pb{top:100%}
.shard .pl,.shard .pr{top:12%;bottom:12%;width:13px;background:repeating-linear-gradient(0deg,#f1f6ff 0 1.5px,#b4c3e0 1.5px 4px,#6e81a8 4px 6px,transparent 6px 12px)}
.shard .pl{right:100%}.shard .pr{left:100%}
.shard.wide .pt,.shard.wide .pb{left:5%;right:5%}
.shard .bd{position:absolute;inset:14% 13%;border-radius:14px;
  background:linear-gradient(150deg,#2a3b6c 0%,#0d1636 38%,#060b1f 100%);
  box-shadow:inset 0 1.5px 0 rgba(180,205,255,.45),inset 0 -2px 0 rgba(0,0,0,.7),0 2px 0 #142250,0 4px 0 #0d1838,0 6px 0 #0a1330,0 8px 0 #070d22,0 16px 22px rgba(0,0,0,.6)}
.shard.wide .bd{inset:16% 9%}
.shard .fa{position:absolute;inset:8%;border-radius:10px;overflow:hidden;display:grid;place-items:center;align-content:center;gap:8px;
  background:radial-gradient(90% 70% at 45% 30%,#5d7cd0 0%,#344f9e 42%,#1c2d68 100%);color:#e9fdff;
  box-shadow:inset 0 0 0 2.5px #8cf5ff,0 0 14px rgba(34,211,238,.75),inset 0 -12px 30px rgba(10,20,60,.55)}
.shard .fa::before{content:"";position:absolute;inset:7px;border-radius:7px;border:1px solid rgba(167,139,250,.55)}
.shard .fa::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 34%)}
.shard .fa b{position:relative;display:grid;place-items:center;color:#a5f3fc;filter:drop-shadow(0 0 6px rgba(34,211,238,.95))}
.shard .fa b svg{width:clamp(22px,30%,40px);height:auto}
.shard .fa span{position:relative;font:700 10px/1 var(--fm);letter-spacing:2px;color:#cffafe}
.shard .fa i{position:relative;font:800 clamp(13px,1.3vw,18px)/1 var(--fh);font-style:normal;color:#fff}
.shard.wide .fa{grid-auto-flow:column;gap:16px}
/* glint that sweeps across the die (transform only) */
.shard .fa .gx{position:absolute;inset:-10% auto -10% 0;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);will-change:transform}
/* card text that fades in on landing */
.shard .fc{opacity:0;overflow:hidden}
.shard .fc.bcard{margin:0;background:none!important;border-color:transparent!important;box-shadow:none!important;animation:none!important;translate:none!important;transform:none!important;cursor:default}
@media (prefers-reduced-motion:reduce){.shards{display:none}}

/* OPENING SCENE + BLOOM */
.open{position:relative;height:300vh;z-index:2}
#chip3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
#chip3d.on{opacity:1}
.open-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#0B1D3A;isolation:isolate}
.open-art{position:absolute;inset:-5%;will-change:transform,opacity}
.open-art svg{width:100%;height:100%;display:block}
#openFx{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35) 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35) 80%,transparent 100%)}

.open-txt{position:absolute;left:0;right:0;top:50%;transform:translateY(-46%);text-align:center;padding:0 24px;color:#fff;will-change:transform,opacity}
.open-sub{display:inline-block;font:800 12px var(--fb);letter-spacing:3px;text-transform:uppercase;color:#FDE68A;margin-bottom:18px}
.open-word{font-family:var(--fh);font-size:clamp(60px,11vw,160px);line-height:.95;letter-spacing:-.04em;font-weight:800;color:#fff;text-shadow:0 20px 60px rgba(0,0,0,.35)}
.open-word em{font-style:normal;background:linear-gradient(110deg,#FDE68A,#F59E0B 50%,#FB923C);-webkit-background-clip:text;background-clip:text;color:transparent}
.open-body{max-width:560px;margin:22px auto 0;font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.85)}
.open-txt .hb{justify-content:center;margin-top:30px}
.btn-amber{background:linear-gradient(120deg,#F59E0B,#FB923C);color:#1F1300;box-shadow:0 18px 40px -14px rgba(245,158,11,.7)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.open-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:700 11px var(--fb);letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.75);pointer-events:none;transition:opacity .4s}
.open-hint i{width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);animation:hintdrop 1.8s ease-in-out infinite}
@keyframes hintdrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.open.gone .open-hint{opacity:0}
.hdr.over-open{background:transparent;box-shadow:none}
.hdr.over-open .nav a,.hdr.over-open .brand{color:#fff}
.hdr.over-open .brand small{color:rgba(255,255,255,.65)}
.hdr.over-open .tbtn,.hdr.over-open .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.hdr.over-open .burger span,.hdr.over-open .burger span::before,.hdr.over-open .burger span::after{background:#fff}
/* hero blooms up out of the opening */
.bloom-hero,section.hero.bloom-hero{margin-top:-300vh;z-index:3;padding:0!important;min-height:calc(200vh + var(--hi,100vh))!important;display:block;overflow:visible}
.bloom-hero #heroInner{position:sticky;top:0;min-height:100vh;padding-top:calc(var(--hh) + 40px);padding-bottom:48px;align-content:center}
#labWrap,#lab,#heroInner > div:first-child > *,.stat-chip{will-change:transform,opacity}
.bloom-hero.pre #heroInner{pointer-events:none}
#heroInner{will-change:transform}
.lab-wrap{position:relative}
.stat-chip{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:10px 14px;border-radius:16px;background:#fff;color:#0B1D3A;box-shadow:0 24px 50px -20px rgba(11,29,58,.5),0 0 0 1px rgba(11,29,58,.06);font:600 12px var(--fb);line-height:1.1;pointer-events:none;will-change:transform,opacity}
.stat-chip b{font:800 20px var(--fh);letter-spacing:-.5px;color:#0B1D3A}
.stat-chip.c1{left:-40px;top:14%;border-bottom:3px solid #F59E0B}
.stat-chip.c2{right:-30px;top:42%;border-bottom:3px solid #0E7490}
.stat-chip.c3{left:-40px;bottom:10%;border-bottom:3px solid #14B8A6}
:root[data-theme="dark"] .stat-chip{background:#0E1A33;color:#E6EEFF;box-shadow:0 24px 50px -20px rgba(0,0,0,.7),0 0 0 1px #1E2B47}
:root[data-theme="dark"] .stat-chip b{color:#fff}
/* page-wide bloom: replaces the old one-way reveal */
.rv{opacity:0;transform:translateY(46px) scale(.94);transform-origin:50% 100%;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (max-width:1024px){.stat-chip.c1{left:6px}.stat-chip.c2{right:6px}.stat-chip.c3{left:6px}}
@media (max-width:720px){.open{height:300vh}.open-txt{transform:translateY(-52%)}.stat-chip{padding:8px 11px}.stat-chip b{font-size:16px}.stat-chip.c3{display:none}}
@media (prefers-reduced-motion:reduce){.open{height:100vh}.open-pin{position:static}.bloom-hero,section.hero.bloom-hero{margin-top:0;border-radius:0;box-shadow:none;min-height:0!important}.bloom-hero #heroInner{position:static}.open-art,.open-txt,#heroInner{transform:none!important;opacity:1!important}.open-hint i{animation:none}.rv{opacity:1;transform:none}}

/* RESPONSIVE */
@media (max-width:1099px){.nav{display:none}.burger{display:flex}.hdr .btn{display:none}}
@media (min-width:1101px){.mnav{display:none}}
@media (max-width:1024px){
  .hg{grid-template-columns:1fr;gap:70px}
  .ben{grid-template-columns:1fr 1fr}
  .sgrid{grid-template-columns:1fr 1fr}
  .st:nth-child(3){border-left:0}
  .st:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .cgrid{grid-template-columns:1fr 1fr}
  .pj{grid-template-columns:1fr 1fr}
  .plg{grid-template-columns:1fr;gap:40px}
  .fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:span 2}
}
@media (max-width:720px){
  .wrap{width:min(1200px,100% - 32px)}
  .sec{padding:72px 0}
  .head{margin-bottom:40px}
  .hero{min-height:auto;padding-top:calc(var(--hh) + 28px);padding-bottom:70px}
  .hero h1{letter-spacing:-1.8px}
  .hb .btn{width:100%}
  .ben,.cgrid,.pj{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr 1fr}
  .st{padding:30px 14px}
  .mock{height:320px}
  .fg{grid-template-columns:1fr}.fg>div:first-child{grid-column:auto}
  .plc,.tq,.fcta{border-radius:26px}
  dialog .dm{padding:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* ===== LOWER-PAGE SKIN: keep the hero's circuit + pulse language through every section ===== */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.cc,.bcard{background:linear-gradient(160deg,rgba(14,30,64,.92),rgba(7,16,38,.94))!important;border:1px solid rgba(103,232,249,.16)!important;color:#E6EEFF;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 24px 50px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)!important}
.cc h3,.bcard h3{color:#F1F6FF}
.cc p,.bcard p{color:#9FB3D6!important}
.cc .body{background:transparent}
.cc::before,.bcard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--sweep),transparent 0 72%,rgba(103,232,249,.95) 84%,#8B5CF6 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.cc:hover::before,.bcard:hover::before{opacity:1;animation:sweep-spin 2.6s linear infinite}
@keyframes sweep-spin{to{--sweep:360deg}}
.cc .go{color:#67E8F9}.cc .go span.dot{background:rgba(103,232,249,.1);color:#67E8F9;box-shadow:inset 0 0 0 1px rgba(103,232,249,.35)}
.cc:hover .go span.dot{background:linear-gradient(135deg,#0E7490,#8B5CF6);color:#fff}
.bcard .bi{background:rgba(103,232,249,.08);color:#67E8F9;box-shadow:inset 0 0 0 1px rgba(103,232,249,.25)}
.bcard .bn{color:#5B7199}
.stats{background:radial-gradient(120% 140% at 0% 0%,rgba(14,116,144,.35),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(109,40,217,.35),transparent 55%),#060F26!important;border:1px solid rgba(103,232,249,.22);box-shadow:0 0 0 1px rgba(103,232,249,.08),0 0 60px -18px rgba(34,211,238,.45),0 40px 80px -40px #000!important}
.stats::before{background-image:linear-gradient(rgba(103,232,249,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.10) 1px,transparent 1px);-webkit-mask:radial-gradient(90% 90% at 50% 50%,#000,transparent 85%);mask:radial-gradient(90% 90% at 50% 50%,#000,transparent 85%)}
.stats::after{display:block!important;background:linear-gradient(90deg,transparent,rgba(103,232,249,.22),transparent);animation:sweep calc(var(--beat,2s) * 3) ease-in-out infinite!important}
.eyebrow{color:#67E8F9}.eyebrow::before{background:linear-gradient(90deg,#22D3EE,#8B5CF6);box-shadow:0 0 10px rgba(34,211,238,.8);animation:eb-pulse 2.4s ease-in-out infinite}
@keyframes eb-pulse{0%,100%{box-shadow:0 0 4px rgba(34,211,238,.4)}50%{box-shadow:0 0 14px rgba(34,211,238,1)}}
.head h2{background:linear-gradient(180deg,#FFFFFF 40%,#A5F3FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:#9FB3D6}
.jsec{background:linear-gradient(180deg,rgba(6,14,34,.2),rgba(6,14,34,0))!important}
.jsec .head h2{color:#F1F6FF}
.pill{background:rgba(10,22,48,.7);border-color:rgba(103,232,249,.3);color:#67E8F9}
.plc .lede,.plc p{color:#B9C8E4}

/* ===== PAGE-WIDE PULSE CIRCUIT: same live traces as the hero, running from the benefits down to the footer ===== */
#pbg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main > section,main > footer,footer{position:relative;z-index:1}

body.below-hero #uni{opacity:0;transition:opacity .5s}
#uni{transition:opacity .5s}

body.below-hero::before{content:"";position:fixed;inset:0;background:#050C1E;z-index:0;pointer-events:none}

/* header nav: glow on hover, cyan underline + glow for the section in view */
.nav a{transition:color .3s,text-shadow .3s,background .3s}
.nav a:hover{color:#67E8F9;text-shadow:0 0 12px rgba(34,211,238,.75);background:rgba(34,211,238,.06)}
.nav a.active{color:#67E8F9;text-shadow:0 0 10px rgba(34,211,238,.6)}
.nav a.active::after{transform:scaleX(1);background:linear-gradient(90deg,#22D3EE,#8B5CF6);box-shadow:0 0 10px rgba(34,211,238,.9)}
.nav a::after{height:2px}
.hdr.over-open .nav a.active{color:#fff}
.mnav a.active{color:#67E8F9}

/* ===== FIXES: hero spacing, floating widgets, responsive polish ===== */
.bloom-hero #heroInner{padding-top:calc(var(--hh) + 18px)!important;padding-bottom:28px!important}
.sec{padding:clamp(60px,7.5vw,104px) 0}
/* floating widgets stay compact so they never sit on top of content */
@media (max-width:1024px){
  .rdy{left:12px;bottom:12px;padding:5px;gap:0}
  .rdy > :not(.rdy-ring){display:none}
  .fab{right:12px;bottom:12px;width:52px;height:52px;padding:0;justify-content:center}
  .fab .fabl{display:none}
  footer{padding-bottom:84px}
}
@media (min-width:1025px){ footer{padding-bottom:90px} }
/* nothing may push the page sideways on small screens */
html,body{overflow-x:clip}
img,svg,canvas,video{max-width:100%}
.hdr .brand{flex-shrink:0}
@media (max-width:480px){.brand .lg{height:42px}}

.hdr .btn{flex-shrink:0;white-space:nowrap}
.nav a{flex-shrink:0}
.hdr .hin{display:flex;align-items:center;width:min(1480px,100% - 2*clamp(16px,3vw,40px));margin-inline:auto}
.burger{margin-left:auto!important}

@media (min-width:1100px) and (max-width:1340px){
  .nav{gap:0!important;margin-left:auto!important}
  .nav a{padding:8px 6px!important;font-size:13px!important}
  .nav a::after{left:6px!important;right:6px!important}
  .brand .lg{height:40px!important}
  .hdr .btn{padding:10px 14px!important;font-size:13px!important;margin-left:8px!important}
}


/* ==================== PART 2: MULTI-PAGE COMPONENTS ==================== */
/* ---------- base for inner pages ---------- */
body.mp{background:#050C1E;color:#C9D6EE;opacity:1;transition:opacity .25s ease}
html.pt-out body{opacity:0;transition:opacity .22s ease}
/* page entrance: opacity only. Animating transform on <body> would make it the containing block of the fixed header and let the header scroll away */
@media (prefers-reduced-motion:no-preference){ body.mp{animation:pt-in .45s ease} }
@keyframes pt-in{from{opacity:0}to{opacity:1}}
@view-transition{navigation:auto}
#pbg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page{position:relative;z-index:1}
.mp footer{position:relative;z-index:1;margin-top:60px}
.mp .hdr{background:rgba(5,12,30,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(34,211,238,.14)}
.mp .nav a{color:#D7E3F7}
.mp .btn-o{background:rgba(255,255,255,.04);border-color:rgba(103,232,249,.32);color:#EAF6FF;box-shadow:none}
.mp .btn-o:hover{border-color:#22D3EE;color:#67E8F9;box-shadow:0 0 22px -6px rgba(34,211,238,.6)}
.gt{background:linear-gradient(100deg,#22D3EE,#60A5FA 45%,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.mp h1,.mp h2,.mp h3{color:#F2F8FF}
.mp .head h2{font-size:clamp(30px,3.6vw,48px)}
.mp .head p{color:#9FB3D6;max-width:760px;margin-inline:auto}
.psec{padding:clamp(48px,6vw,88px) 0}

/* ---------- page hero ---------- */
.phero{position:relative;padding:calc(var(--hh) + clamp(36px,5vw,70px)) 0 clamp(36px,5vw,64px)}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 40%,rgba(34,211,238,.14),transparent 70%),radial-gradient(50% 60% at 10% 0%,rgba(139,92,246,.14),transparent 70%);pointer-events:none}
.phg{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.phero h1{font-size:clamp(38px,4.8vw,66px);line-height:1.04;letter-spacing:-1.8px;font-weight:800;margin:18px 0 0}
.phero .lede{color:#B4C6E4;font-size:clamp(16px,1.25vw,19px);line-height:1.65;margin-top:18px;max-width:600px}
.phero .hb{margin-top:28px}
.phero .pill{background:rgba(11,23,52,.8);border-color:rgba(34,211,238,.35);color:#67E8F9}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#7F93B8;margin-bottom:16px}
.crumbs a{color:#9FB3D6}.crumbs a:hover{color:#67E8F9}.crumbs b{color:#E6F4FF;font-weight:600}
.hchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(10,22,48,.7);border:1px solid rgba(103,232,249,.2);color:#C9DBF2;font-size:13.5px;font-weight:600}
.hchip svg{color:#22D3EE}
.phi{position:relative;border-radius:28px;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.phi img{width:100%;height:auto;display:block;border-radius:28px;box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 60px -10px rgba(34,211,238,.45),0 50px 90px -40px #000}
.phi::after{content:"";position:absolute;inset:-14% -10%;z-index:-1;background:radial-gradient(closest-side,rgba(34,211,238,.25),transparent);filter:blur(20px)}

/* ---------- grids & cards ---------- */
.pgrid{display:grid;gap:22px}
.pgrid.g2{grid-template-columns:repeat(2,1fr)}.pgrid.g3{grid-template-columns:repeat(3,1fr)}.pgrid.g4{grid-template-columns:repeat(4,1fr)}
.gcard,.pcard,.ccard,.tcard,.cinfo{position:relative;padding:28px 26px;border-radius:22px;background:linear-gradient(160deg,rgba(14,30,64,.92),rgba(7,16,38,.94));border:1px solid rgba(103,232,249,.16);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .45s var(--ease),border-color .3s,box-shadow .3s;transform-style:preserve-3d}
.gcard:hover,.pcard:hover,.ccard:hover,.tcard:hover,.cinfo:hover{border-color:rgba(103,232,249,.55);box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 36px -8px rgba(34,211,238,.45),0 30px 60px -30px #000}
.gcard h3,.pcard h3,.ccard h3{font-size:19px;margin:16px 0 8px}
.gcard p,.pcard p,.ccard p,.tcard p{color:#9FB3D6;font-size:15px;line-height:1.6}
.gcard.big p{font-size:16px}
.gi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;color:#67E8F9;background:rgba(34,211,238,.08);box-shadow:inset 0 0 0 1px rgba(34,211,238,.28),0 0 20px -8px rgba(34,211,238,.6)}
.gcard:hover .gi,.ccard:hover .gi{background:linear-gradient(135deg,#0E7490,#6D28D9);color:#fff}
.ptag{display:inline-block;font:600 11.5px var(--fm);letter-spacing:.6px;text-transform:uppercase;color:#67E8F9;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);padding:5px 10px;border-radius:999px}
.ptag.t-iot{color:#5EEAD4;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.32)}
.ptag.t-cyber{color:#C4B5FD;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4)}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stack span{font:500 12px var(--fm);color:#C9DBF2;background:rgba(255,255,255,.04);border:1px solid rgba(103,232,249,.18);padding:5px 10px;border-radius:8px}
.stack.big span{font-size:13px;padding:7px 12px}

/* topics */
.topics{display:grid;gap:18px}
.topic{display:grid;grid-template-columns:auto auto 1fr;gap:20px;align-items:start;padding:28px;border-radius:22px;background:linear-gradient(160deg,rgba(14,30,64,.88),rgba(7,16,38,.92));border:1px solid rgba(103,232,249,.14)}
.topic:hover{border-color:rgba(103,232,249,.45)}
.tnum{font:700 14px var(--fm);color:#5B7199;padding-top:14px}
.topic h3{font-size:22px;margin-bottom:6px}.topic p{color:#9FB3D6}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:#C9D6EE;font-size:15px}
.ticks svg{color:#22D3EE;margin-top:3px;flex-shrink:0}

/* curriculum */
.split{display:grid;grid-template-columns:1.25fr .9fr;gap:28px;align-items:start}
.curri{display:grid;gap:12px}
.curri details{border-radius:16px;background:rgba(10,22,48,.78);border:1px solid rgba(103,232,249,.16);overflow:hidden}
.curri details[open]{border-color:rgba(103,232,249,.5);box-shadow:0 0 28px -12px rgba(34,211,238,.6)}
.curri summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;color:#F2F8FF}
.curri summary::-webkit-details-marker{display:none}
.curri .mn{font:600 12px var(--fm);color:#67E8F9;min-width:76px}
.curri summary b{flex:1;font-size:16px}
.curri .chev{color:#67E8F9;transition:transform .3s}
.curri details[open] .chev{transform:rotate(90deg)}
.curri details p{padding:0 20px 18px 110px;color:#9FB3D6}
.side{position:sticky;top:calc(var(--hh) + 20px);padding:28px;border-radius:22px;background:linear-gradient(160deg,rgba(14,30,64,.95),rgba(7,16,38,.95));border:1px solid rgba(103,232,249,.22)}
.side h3{font-size:20px;margin-bottom:14px}
.outs{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.outs li{display:flex;gap:12px;align-items:flex-start;color:#D7E3F7}
.outs svg{flex-shrink:0;color:#0B1530;background:#22D3EE;border-radius:50%;padding:3px;margin-top:1px}

/* architecture */
.arch{display:grid;gap:14px;max-width:880px;margin-inline:auto}
.layer{display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center;padding:20px 24px;border-radius:18px;background:rgba(10,22,48,.85);border:1px solid rgba(103,232,249,.2);position:relative}
.layer:nth-child(1){border-color:rgba(139,92,246,.5)}.layer:nth-child(2){margin-inline:22px}.layer:nth-child(3){margin-inline:44px}.layer:nth-child(4){margin-inline:66px}
.layer .ln{font:700 13px var(--fm);color:#67E8F9}
.layer h3{font-size:17px}.layer p{color:#9FB3D6;font-size:14.5px}

/* tools */
.toolwall{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.toolwall span{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:14px;background:rgba(10,22,48,.85);border:1px solid rgba(139,92,246,.3);color:#E6EEFF;font-weight:600;transition:all .3s}
.toolwall span svg{color:#A78BFA}
.toolwall span:hover{border-color:#A78BFA;box-shadow:0 0 24px -6px rgba(139,92,246,.7);transform:translateY(-3px)}

/* courses */
.ccard{display:flex;flex-direction:column}
.cc-top{display:flex;justify-content:space-between;align-items:center}
.meta{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:8px}
.meta li{display:flex;align-items:center;gap:8px;color:#C9D6EE;font-size:14px}
.meta svg{color:#22D3EE}
.ccard .btn{margin-top:auto;align-self:flex-start}
.ccard.hide{display:none}
.ftabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-20px 0 34px}
.ftabs button{padding:11px 20px;border-radius:999px;border:1px solid rgba(103,232,249,.25);background:rgba(10,22,48,.7);color:#C9DBF2;font:600 14px var(--fb);cursor:pointer;transition:all .25s}
.ftabs button:hover{border-color:#22D3EE;color:#67E8F9}
.ftabs button[aria-selected="true"]{background:linear-gradient(120deg,#0891B2,#6D28D9);border-color:transparent;color:#fff;box-shadow:0 0 24px -6px rgba(34,211,238,.6)}
.clist{display:grid;gap:12px;max-width:880px;margin-inline:auto}
.crow{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px;background:rgba(10,22,48,.85);border:1px solid rgba(103,232,249,.16);transition:all .3s}
.crow:hover{border-color:#22D3EE;transform:translateX(6px);box-shadow:0 0 26px -10px rgba(34,211,238,.7)}
.crow div:nth-child(2){flex:1}.crow b{display:block;color:#F2F8FF}.crow small{color:#9FB3D6}
.crow .chev{color:#67E8F9}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.facts>div{padding:22px;border-radius:18px;background:rgba(10,22,48,.85);border:1px solid rgba(103,232,249,.18)}
.facts small{display:block;margin-top:14px;color:#7F93B8;font-size:12.5px;text-transform:uppercase;letter-spacing:1px}
.facts b{color:#F2F8FF;font-size:16px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:56px;height:2px;background:linear-gradient(90deg,#22D3EE,#8B5CF6);opacity:.4}
.step{position:relative;padding:22px 18px;border-radius:20px;background:rgba(10,22,48,.9);border:1px solid rgba(103,232,249,.18);text-align:center}
.step .gi{margin:10px auto 12px}
.step .sn{font:700 12px var(--fm);color:#67E8F9}
.step h3{font-size:16px;margin-bottom:6px}.step p{color:#9FB3D6;font-size:14px}

/* testimonials */
.tcard blockquote{margin:14px 0 18px;color:#E6EEFF;font-size:16.5px;line-height:1.6}
.stars{display:flex;gap:3px;color:#FBBF24}.stars svg{fill:#FBBF24}
.who{display:flex;gap:12px;align-items:center}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--fm);color:#fff;background:linear-gradient(135deg,#0891B2,#6D28D9)}
.who b{display:block;color:#F2F8FF}.who small{color:#9FB3D6}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpis>div{text-align:center;padding:30px 16px;border-radius:20px;background:radial-gradient(120% 140% at 0% 0%,rgba(14,116,144,.35),transparent 55%),#071330;border:1px solid rgba(103,232,249,.22)}
.kpis b{display:block;font:800 clamp(34px,4vw,48px) var(--fh);color:#fff;text-shadow:0 0 24px rgba(34,211,238,.5)}
.kpis span{color:#9FB3D6}
.bars{display:grid;gap:16px;max-width:760px;margin-inline:auto}
.bar{display:grid;grid-template-columns:200px 1fr 48px;gap:14px;align-items:center;color:#D7E3F7}
.bar i{display:block;height:10px;border-radius:99px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#22D3EE,#8B5CF6);box-shadow:0 0 14px rgba(34,211,238,.7)}
.bar b{color:#67E8F9;text-align:right}
.note{text-align:center;color:#7F93B8;font-size:13px;margin-top:20px}

/* CTA band */
.ctaband{text-align:center;padding:clamp(40px,6vw,72px) clamp(20px,4vw,60px);border-radius:30px;background:radial-gradient(80% 120% at 0% 0%,rgba(14,116,144,.4),transparent 60%),radial-gradient(80% 120% at 100% 100%,rgba(109,40,217,.4),transparent 60%),#060F26;border:1px solid rgba(103,232,249,.28);box-shadow:0 0 70px -20px rgba(34,211,238,.45)}
.ctaband h2{font-size:clamp(28px,3.4vw,44px);margin-top:10px}
.ctaband p{color:#B4C6E4;margin-top:12px}

/* contact */
.cgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cinfo{display:block;padding:24px}
.cinfo small{display:block;margin-top:14px;color:#7F93B8;font-size:12.5px;text-transform:uppercase;letter-spacing:1px}
.cinfo b{color:#F2F8FF;font-size:16px;word-break:break-word}
.cform-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,60px);align-items:start}
.h2l{font-size:clamp(28px,3.2vw,42px);margin-top:10px}
.lede2{color:#9FB3D6;margin-top:12px}
.addr{display:flex;gap:14px;align-items:center;margin-top:26px;color:#D7E3F7}
.eform{padding:clamp(22px,3vw,34px);border-radius:24px;background:linear-gradient(160deg,rgba(14,30,64,.95),rgba(7,16,38,.95));border:1px solid rgba(103,232,249,.25);display:grid;gap:16px}
.eform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.eform label{display:grid;gap:7px;color:#B4C6E4;font-size:13.5px;font-weight:600}
.eform input,.eform select,.eform textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(103,232,249,.22);background:rgba(4,11,28,.75);color:#F2F8FF;font:500 15px var(--fb);outline:none;transition:border-color .25s,box-shadow .25s}
.eform input:focus,.eform select:focus,.eform textarea:focus{border-color:#22D3EE;box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.eform .bad{border-color:#F87171!important}
.fbtns{display:flex;flex-wrap:wrap;gap:12px}
.fmsg{min-height:20px;color:#67E8F9;font-size:14px}
.map{border-radius:24px;overflow:hidden;border:1px solid rgba(103,232,249,.28);box-shadow:0 0 50px -16px rgba(34,211,238,.45)}
.map iframe{display:block;width:100%;height:420px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.8)}

/* footer extras */
.fg.fg5{grid-template-columns:1.5fr repeat(4,1fr)}
.fcontact{display:grid;gap:10px;margin-top:20px}
.fcontact a{display:inline-flex;align-items:center;gap:9px}
.fcontact svg{color:#22D3EE}
a.fab{text-decoration:none}

/* 3D tilt */
.tilt{will-change:transform}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pgrid.g4,.kpis,.cgrid4,.facts{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}.steps::before{display:none}
  .fg.fg5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .phg{grid-template-columns:1fr}
  .phi{max-width:560px;margin-inline:auto;width:100%}
  .pgrid.g3,.pgrid.g2{grid-template-columns:repeat(2,1fr)}
  .split,.cform-wrap{grid-template-columns:1fr}
  .side{position:static}
  .layer:nth-child(n){margin-inline:0}
}
@media (max-width:640px){
  .pgrid.g3,.pgrid.g2,.pgrid.g4,.kpis,.cgrid4,.facts,.steps{grid-template-columns:1fr}
  .topic{grid-template-columns:1fr;gap:12px}.tnum{padding:0}
  .curri details p{padding:0 20px 18px}
  .curri .mn{min-width:0}
  .eform .row2{grid-template-columns:1fr}
  .bar{grid-template-columns:1fr 44px}.bar span{grid-column:1/-1}
  .fg.fg5{grid-template-columns:1fr 1fr}
  .fg.fg5>div:first-child{grid-column:1/-1}
  .map iframe{height:320px}
  .phero h1{letter-spacing:-1px}
  .layer{grid-template-columns:auto 1fr}.layer .ln{display:none}
}
@media (prefers-reduced-motion:reduce){.tilt{transform:none!important}.rv{opacity:1!important;transform:none!important}}

/* ---------- compact section spacing (less empty space above section headings) ---------- */
.psec{padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(24px,2.8vw,40px)}
.phero,.aihero{padding-bottom:clamp(16px,2.4vw,32px)}
.mp .head{margin-top:0}
.mp .head .eyebrow{margin-top:0}
@media (max-width:640px){.psec{padding-top:18px;padding-bottom:26px}}
.mp .steps{margin:0}

/* header always pinned to the top of the window */
.hdr{position:fixed!important;top:0!important;transform:none!important}