/* Landing page – header, hero, section-by-section panels, ring, etc. */
html{scroll-snap-type:y proximity}

/* ---------- header ---------- */
header.top{position:fixed;inset:0 0 auto 0;z-index:800;height:var(--hdr);display:flex;align-items:center;transition:background .4s,height .4s var(--ease),transform .5s var(--ease)}
header.top.solid{background:rgba(3,10,28,.7);backdrop-filter:blur(16px) saturate(1.4);height:62px;box-shadow:0 1px 0 var(--line),0 10px 40px rgba(0,0,0,.25)}
:root[data-theme="light"] header.top.solid{background:rgba(244,247,252,.8)}
header.top.hide{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.brand .badge-logo{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 22px rgba(0,210,255,.55);transition:transform .5s var(--ease)}
.brand:hover .badge-logo{transform:rotateY(180deg) scale(1.08)}
.brand .badge-logo img{width:30px}
.brand .bt{display:flex;flex-direction:column;line-height:1.05;font-weight:800;letter-spacing:.06em;font-size:1.05rem}
.brand .bt em{font-style:normal;color:var(--a2)}
.brand .bt small{font-size:.6rem;letter-spacing:.42em;color:var(--mut);font-weight:600;margin-top:3px}
.menu{display:flex;align-items:center;gap:4px}
.menu a.lnk{position:relative;padding:10px 13px;font-size:.88rem;font-weight:500;color:var(--mut);transition:color .3s}
.menu a.lnk::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:var(--a2);box-shadow:0 0 12px var(--a2);transform:scaleX(0);transition:transform .4s var(--ease)}
.menu a.lnk:hover,.menu a.lnk.on{color:var(--ink)}
.menu a.lnk:hover::after,.menu a.lnk.on::after{transform:scaleX(1)}
.menu .ibtn{margin:0 8px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);position:relative;z-index:3}
.burger i,.burger::before,.burger::after{content:"";position:absolute;left:14px;right:14px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.burger::before{top:17px}.burger i{top:22px}.burger::after{top:27px}
.burger.open::before{transform:translateY(5px) rotate(45deg)}.burger.open::after{transform:translateY(-5px) rotate(-45deg)}.burger.open i{opacity:0}
@media (max-width:1020px){
  .burger{display:block}
  .menu{position:fixed;inset:0;z-index:2;flex-direction:column;justify-content:center;gap:10px;background:var(--bg);clip-path:circle(0 at calc(100% - 44px) 40px);transition:clip-path .8s cubic-bezier(.7,0,.2,1);pointer-events:none}
  .menu.open{clip-path:circle(150vmax at calc(100% - 44px) 40px);pointer-events:auto}
  .menu li{opacity:0;translate:0 24px;transition:all .6s var(--ease)}
  .menu.open li{opacity:1;translate:0 0;transition-delay:calc(.25s + var(--k)*70ms)}
  .menu a.lnk{font-size:1.5rem;font-weight:700}
}

/* side dots */
#dots{position:fixed;right:22px;top:50%;translate:0 -50%;z-index:700;display:flex;flex-direction:column;gap:14px}
#dots a{position:relative;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--mut);transition:all .35s var(--ease)}
#dots a span{position:absolute;right:26px;top:50%;translate:10px -50%;white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:all .3s;pointer-events:none;background:var(--glass2);padding:4px 10px;border-radius:99px;border:1px solid var(--line)}
#dots a:hover span{opacity:1;translate:0 -50%}
#dots a.on{background:var(--a2);border-color:var(--a2);box-shadow:0 0 16px var(--a2);scale:1.35}
@media (max-width:1100px){#dots{display:none}}
#secnum{position:fixed;left:22px;bottom:24px;z-index:700;font-size:.72rem;font-weight:600;letter-spacing:.22em;color:var(--mut);display:flex;align-items:center;gap:10px}
#secnum b{color:var(--a2);font-size:1.1rem;letter-spacing:.05em}
#secnum i{display:block;width:60px;height:2px;background:rgba(127,160,220,.3);border-radius:2px;overflow:hidden;position:relative}
#secnum i::after{content:"";position:absolute;inset:0;background:var(--a2);box-shadow:0 0 10px var(--a2);transform-origin:0 50%;transform:scaleX(var(--sp,0));transition:transform .4s}
@media (max-width:700px){#secnum{display:none}}

/* ---------- panels (section by section) ---------- */
.panel{position:relative;padding:clamp(96px,14vh,150px) 0;min-height:100vh;display:flex;align-items:center;perspective:1500px;perspective-origin:50% 40%;scroll-snap-align:start}
.panel-in{width:100%;will-change:transform,opacity;transform-origin:50% 60%}
.panel.hero{min-height:100svh;padding-top:calc(var(--hdr) + 30px)}
.wm{position:absolute;right:2%;top:6%;font-size:clamp(9rem,24vw,22rem);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(var(--a2rgb),.16);pointer-events:none;user-select:none}
@media (max-width:760px){.wm{display:none}}
.sh{margin-bottom:clamp(30px,5vh,56px);position:relative;z-index:1}

/* ---------- hero ---------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}.mock{display:none}}
.hero h1{margin:18px 0 16px}
.typed-wrap{color:var(--acc-text);font-weight:600;white-space:nowrap}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--a2);box-shadow:0 0 10px var(--a2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.portals-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.portals-chips a{display:inline-flex;align-items:center;gap:10px;padding:.6em 1.25em;border-radius:99px;font-weight:600;font-size:.88rem;border:1px solid rgba(var(--a2rgb),.4);background:rgba(var(--a2rgb),.08);color:var(--acc-text);box-shadow:0 0 22px -6px rgba(var(--a2rgb),.6);animation:mot 4s ease-in-out infinite;animation-delay:calc(var(--k)*.5s);transition:background .3s,color .3s}
.portals-chips a:hover{background:var(--a2);color:var(--btn-ink)}
@keyframes mot{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px);box-shadow:0 0 34px -2px rgba(var(--a2rgb),.8)}}
.scrollcue{position:absolute;left:50%;bottom:24px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.scrollcue i{width:22px;height:36px;border:1.5px solid var(--mut);border-radius:14px;position:relative}
.scrollcue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:var(--a2);box-shadow:0 0 8px var(--a2);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 12px}}
@media (max-height:700px){.scrollcue{display:none}}

/* hero 3D dashboard mock */
.mock{position:relative;height:460px;perspective:1300px}
.mock-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(8deg);transition:transform .25s ease-out;animation:mfloat 7s ease-in-out infinite}
@keyframes mfloat{50%{translate:0 -14px}}
.mpanel{position:absolute;border-radius:22px;background:var(--glass);border:1px solid rgba(var(--a2rgb),.35);backdrop-filter:blur(14px);box-shadow:0 0 60px -14px rgba(var(--a2rgb),.6),var(--shadow);padding:20px}
.mp-main{left:6%;top:30px;width:88%;height:340px;transform:translateZ(0)}
.mp-main .bars{display:flex;align-items:flex-end;gap:10px;height:110px;margin:14px 0 16px}
.mp-main .bars i{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--a2),var(--navy));height:var(--h);transform-origin:bottom;animation:grow 1.4s var(--ease) both;animation-delay:calc(var(--k)*.08s + .6s);box-shadow:0 0 14px -2px rgba(var(--a2rgb),.6)}
@keyframes grow{from{transform:scaleY(0)}}
.mrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(127,170,255,.07);font-size:.78rem;margin-top:8px}
.mrow b{margin-left:auto;color:var(--acc-text)}
.mrow .dotc{width:8px;height:8px;border-radius:50%;background:var(--a2);box-shadow:0 0 10px var(--a2)}
.mtitle{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600}
.mbig{font-size:2rem;font-weight:800;line-height:1.1}
.mp-a{right:-2%;top:-4px;width:170px;transform:translateZ(90px);animation:fl 5s ease-in-out infinite}
.mp-b{left:-4%;bottom:10px;width:200px;transform:translateZ(120px);animation:fl 6s ease-in-out -2s infinite}
.mp-c{right:2%;bottom:-6px;width:170px;transform:translateZ(60px);animation:fl 5.5s ease-in-out -1s infinite}
@keyframes fl{50%{translate:0 -12px}}
.gauge{--p:92;width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--a2) calc(var(--p)*1%),rgba(127,170,255,.18) 0);display:grid;place-items:center;box-shadow:0 0 24px -4px rgba(var(--a2rgb),.7);margin-top:8px}
.gauge::after{content:attr(data-v);width:54px;height:54px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.mp-b .cert{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:.78rem}
.mp-b .cert .ico{width:42px;height:42px;margin:0;font-size:1.2rem;border-radius:12px}

/* ---------- marquee ---------- */
.marq{position:relative;z-index:3;overflow:hidden;padding:24px 0;border-block:1px solid var(--line);background:var(--glass);backdrop-filter:blur(6px);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-t{display:flex;width:max-content;animation:mq 40s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-size:clamp(1.2rem,2.8vw,2rem);font-weight:800;color:transparent;-webkit-text-stroke:1.2px var(--mut);text-transform:uppercase;white-space:nowrap}
.marq span b{color:var(--a2);-webkit-text-stroke:0;font-size:.7em;text-shadow:0 0 16px var(--a2)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stat{text-align:center;padding:34px 20px}
.stat .n{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:800;line-height:1;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(var(--a2rgb),.35))}
.stat p{margin-top:10px;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- portal cards ---------- */
.pcard{display:flex;flex-direction:column;padding:34px 30px}
.pcard h3{font-size:1.5rem}
.pcard ul{margin:18px 0 26px;display:grid;gap:10px}
.pcard li{display:flex;gap:10px;font-size:.9rem;color:var(--mut)}
.pcard li .i{color:var(--a2);margin-top:5px}
.pcard .btn{margin-top:auto;align-self:flex-start}
.pcard .role-tag{position:absolute;right:20px;top:18px;font-size:4.6rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(var(--a2rgb),.22)}

/* ---------- pinned 3D ring (journey) ---------- */
.pin{display:block;padding:0;min-height:0;height:520vh;perspective:none;scroll-snap-align:none}
.pin-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--hdr)}
.pin .sh{margin-bottom:0;text-align:center}
.pin .sh .lead{margin-inline:auto}
.pin .sh h2{margin-bottom:8px}
.ring-scene{perspective:1400px;height:min(46vh,430px);margin:clamp(8px,2.5vh,30px) 0;display:grid;place-items:center}
.ring{position:relative;width:min(300px,70vw);height:min(340px,40vh);transform-style:preserve-3d;transform:translateZ(calc(var(--R)*-1)) rotateY(var(--rot,0deg));will-change:transform}
.rcard{position:absolute;inset:0;transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(var(--R));backface-visibility:hidden;border-radius:26px;padding:24px 24px;background:linear-gradient(160deg,rgba(var(--a2rgb),.2),var(--glass2) 60%);border:1px solid rgba(var(--a2rgb),.35);box-shadow:0 0 40px -8px rgba(var(--a2rgb),.45),inset 0 1px 0 rgba(255,255,255,.12);display:flex;flex-direction:column;gap:8px;transition:box-shadow .5s,border-color .5s}
.rcard.act{border-color:var(--a2);box-shadow:0 0 70px -6px rgba(var(--a2rgb),.8),inset 0 1px 0 rgba(255,255,255,.2)}
.rcard .big{font-size:4rem;font-weight:900;line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--a2);text-shadow:0 0 28px rgba(var(--a2rgb),.5)}
.rcard h3{font-size:1.3rem}
.rcard p{font-size:.88rem;color:var(--mut)}
.rcard .ico{margin:auto 0 0;font-size:1.4rem;width:48px;height:48px}
.ring-ui{display:flex;align-items:center;justify-content:center;gap:14px}
.rdots{display:flex;gap:8px}
.rdots button{height:8px;width:26px;border-radius:9px;border:0;background:rgba(127,160,220,.3);transition:all .4s var(--ease)}
.rdots button.on{width:54px;background:var(--a2);box-shadow:0 0 16px var(--a2)}
.hint{display:flex;align-items:center;gap:10px;justify-content:center;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:12px}

/* ---------- features ---------- */
.fcard .ico{margin-bottom:16px}

/* ---------- courses ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.tab{padding:.65em 1.35em;border-radius:99px;border:1px solid var(--line);background:var(--glass);font-size:.86rem;font-weight:500;transition:all .35s var(--ease)}
.tab:hover{border-color:var(--a2);box-shadow:0 0 22px -4px var(--a2)}
.tab.on{background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--btn-ink);border-color:transparent;box-shadow:0 0 28px rgba(var(--a2rgb),.6)}
:root[data-theme="light"] .tab.on{color:#fff;background:linear-gradient(135deg,#0B2C6F,#0a7fc4)}
.ccard{display:flex;flex-direction:column}
.ccard .meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px}
.ccard .meta span{font-size:.72rem;padding:.3em .85em;border-radius:99px;background:rgba(var(--a2rgb),.1);border:1px solid rgba(var(--a2rgb),.25);color:var(--acc-text)}
.ccard .seat{height:6px;border-radius:9px;background:rgba(127,160,220,.2);overflow:hidden;margin:4px 0 6px}
.ccard .seat i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--navy),var(--a2));box-shadow:0 0 10px var(--a2);border-radius:9px}
.ccard small{color:var(--mut);font-size:.76rem}
.ccard .btn{margin-top:20px;align-self:flex-start}
.ccard .price{font-weight:800;font-size:1.25rem;margin-top:auto;padding-top:14px;color:var(--acc-text)}

/* ---------- faq ---------- */
.fq{border-radius:22px;background:var(--glass);border:1px solid var(--line);margin-bottom:14px;backdrop-filter:blur(10px);transition:border-color .4s,box-shadow .4s}
.fq:hover,.fq.open{border-color:rgba(var(--a2rgb),.55);box-shadow:0 0 40px -10px rgba(var(--a2rgb),.5)}
.fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;border:0;background:none;text-align:left;font-weight:600;font-size:1.02rem}
.fq button .i{font-size:1.25rem;color:var(--a2);transition:transform .5s var(--ease);rotate:90deg}
.fq.open button .i{rotate:-90deg}
.fq .fa{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.fq .fa p{padding:0 26px 24px;color:var(--mut)}

/* ---------- CTA + footer ---------- */
.cta{position:relative;text-align:center;padding:clamp(46px,8vw,90px) 26px;border-radius:36px;overflow:hidden;background:radial-gradient(80% 140% at 50% 0%,rgba(var(--a2rgb),.28),var(--glass) 70%);border:1px solid rgba(var(--a2rgb),.4);box-shadow:0 0 120px -30px rgba(var(--a2rgb),.6)}
.cta h2{margin-top:0}.cta .lead{margin:0 auto 32px}.cta .btns{justify-content:center}
footer{background:var(--glass);border-top:1px solid var(--line);padding:64px 0 30px;backdrop-filter:blur(10px)}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:40px}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fcols{grid-template-columns:1fr}}
footer h4{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-text);margin-bottom:14px}
footer li{margin:8px 0}footer li a{color:var(--mut);transition:all .3s;display:inline-block}footer li a:hover{color:var(--ink);translate:6px 0}
footer .tag{color:var(--mut);font-size:.9rem;margin-top:14px;max-width:290px}
.copy{border-top:1px solid var(--line);padding-top:22px;font-size:.8rem;color:var(--mut);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
#top{position:fixed;right:24px;bottom:24px;z-index:850;width:46px;height:46px;border-radius:50%;border:1px solid rgba(var(--a2rgb),.6);background:var(--glass2);color:var(--acc-text);display:grid;place-items:center;font-size:1.2rem;opacity:0;translate:0 20px;pointer-events:none;transition:all .4s var(--ease);box-shadow:0 0 22px -4px rgba(var(--a2rgb),.6)}
#top.show{opacity:1;translate:0 0;pointer-events:auto}
#top:hover{background:var(--a2);color:var(--btn-ink);box-shadow:0 0 34px var(--a2)}