@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Poppins:wght@400;500;600;700&display=swap');
:root{--acc:#2e3d8f;--acc2:#2e7d68;--navy:#2e3d8f;--grn:#2e7d68;--fh:'Orbitron','Segoe UI',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--acc:#8ea2ff;--acc2:#4ade9d}}
body{font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14.5px}
h1,h2{font-family:var(--fh);letter-spacing:.01em}
/* ---------- mascot + drone motion ---------- */
.rb{overflow:visible;display:block}.rb *{transform-box:fill-box}
.rb .pup{transform:translate(calc(var(--ex,0)*3px),calc(var(--ey,0)*3px))}
.rb .lid{animation:blink 5s infinite;transform-origin:50% 0;transform:scaleY(0)}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.rb .rb-ant circle{animation:antp 1.6s ease-in-out infinite alternate}.rb .ant-r{animation-delay:.4s!important}
@keyframes antp{from{transform:scale(1)}to{transform:scale(1.25);fill:#4fd1a5}}
.rb.walk .rb-all{animation:bob .5s ease-in-out infinite alternate}
.rb.walk .rb-leg-l{animation:step .5s ease-in-out infinite alternate;transform-origin:50% 0}.rb.walk .rb-leg-r{animation:step .5s ease-in-out infinite alternate-reverse;transform-origin:50% 0}
@keyframes step{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.rb.walk .rb-arm-l{animation:step .5s ease-in-out infinite alternate-reverse;transform-origin:100% 0}
.rb.wave .rb-all{animation:float 3s ease-in-out infinite alternate}@keyframes float{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.rb.wave .rb-arm-r{animation:wav .55s ease-in-out infinite alternate;transform-origin:0 100%}@keyframes wav{from{transform:rotate(-14deg)}to{transform:rotate(26deg)}}
.rb.jump .rb-all{animation:jmp .45s ease-in-out infinite alternate}@keyframes jmp{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.rb.jump .rb-arm-l,.rb.jump .rb-arm-r{animation:wav .25s ease-in-out infinite alternate}
.dr{overflow:visible;display:block}.dr *{transform-box:fill-box}
.dr .bl{animation:spin .09s linear infinite alternate;transform-origin:50% 50%}.dr .bl2{animation-delay:.04s}
@keyframes spin{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
.dr .led{animation:led .8s steps(2) infinite}.dr .l2{animation-delay:.4s}@keyframes led{50%{opacity:.15}}
.dr .dr-b{animation:hov 1.4s ease-in-out infinite alternate}@keyframes hov{from{transform:translateY(-3px) rotate(-2deg)}to{transform:translateY(4px) rotate(2deg)}}
.sp{position:absolute;border-radius:50%;background:#fff;opacity:0;animation:tw 6s ease-in-out infinite;box-shadow:0 0 8px #fff}@keyframes tw{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.9;transform:translateY(-14px)}}
.fly{position:absolute;left:-160px;pointer-events:none;filter:drop-shadow(0 8px 10px #0004)}
@keyframes cross{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 340px))}}
@keyframes crossr{from{transform:translateX(0) scaleX(-1)}to{transform:translateX(calc(-100vw - 340px)) scaleX(-1)}}
/* ---------- login ---------- */
.lg{background:linear-gradient(135deg,#0b1b4d 0%,#22337f 52%,#1c7a62 100%);position:relative;overflow:hidden}
.lg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:44px 44px;animation:grid 22s linear infinite;pointer-events:none}
@keyframes grid{to{background-position:44px 44px}}
.hero{background:transparent;margin:18px 0 18px 18px;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px #0007,0 0 0 1px #ffffff2e;min-height:420px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b1b4d00 40%,#0b1b4dcc 100%),radial-gradient(circle at 80% 0,#2e7d6844,transparent 55%);pointer-events:none}
.hero .cap{z-index:3}.hero .cap h1{font-size:clamp(22px,3vw,36px);font-weight:800;background:linear-gradient(90deg,#fff,#a8ffe0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 8px #0008)}
.hero .cap p{color:#e6efff}
.fxl{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fxl .f1{top:9%;animation:cross 17s linear infinite}.fxl .f2{top:24%;animation:crossr 23s linear infinite;left:auto;right:-160px;animation-delay:-8s}
.fxl .f3{top:40%;animation:cross 29s linear infinite;animation-delay:-14s}
.fxl .f2{left:-160px;right:auto;transform-origin:0 0;animation-name:cross2}@keyframes cross2{from{transform:translateX(calc(100vw + 100px)) scaleX(-1)}to{transform:translateX(-300px) scaleX(-1)}}
.fxl .f1,.fxl .f3{max-width:none}
.bot-stage{position:absolute;left:0;right:0;bottom:92px;height:100px}
.bot-walk{position:absolute;left:0;animation:strut 20s ease-in-out infinite alternate}@keyframes strut{from{transform:translateX(6px)}to{transform:translateX(calc(min(60vw,640px) - 100px))}}
.chipsrow{position:absolute;left:20px;top:16px;display:flex;gap:8px;flex-wrap:wrap}.chipsrow span{padding:5px 12px;border-radius:999px;background:#ffffff26;border:1px solid #ffffff44;color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(8px)}
.lgc .card{border-radius:24px;padding:26px 24px;border:1px solid #ffffff99;box-shadow:0 30px 80px #0008,0 0 0 6px #ffffff14;background:#fffffff5;position:relative;
 --panel:#fff;--p2:#f1f5fb;--tx:#162033;--mu:#5b6678;--bd:#d5dce8;--acc:#2e3d8f;--acc2:#2e7d68;color:var(--tx);animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}}
.lgc .logo{height:auto;width:min(100%,260px);border-radius:0;margin-bottom:10px;display:block}
.lgc .card h2{font-size:22px;color:var(--navy)}
.lgc input,.lgc select{background:#f7f9fd;border:1.5px solid #d5dce8;transition:.2s}.lgc input:focus,.lgc select:focus{outline:0;border-color:var(--grn);box-shadow:0 0 0 4px #2e7d6826;background:#fff}
.lgc .b.p{background:linear-gradient(90deg,var(--navy),#3d56c7 50%,var(--grn));border:0;min-height:46px;font-size:15px;letter-spacing:.02em;box-shadow:0 10px 24px #2e3d8f55;transition:.2s}.lgc .b.p:hover{transform:translateY(-2px);box-shadow:0 14px 30px #2e3d8f77}
.seg button.on{background:linear-gradient(90deg,var(--navy),var(--grn));color:#fff}
@media (max-width:820px){.lg{grid-template-columns:1fr}.hero{margin:12px 12px 0;min-height:260px;height:36vh}.chipsrow{display:none}.bot-stage{bottom:52px}.lgc .logo{width:200px}}
/* ---------- header ---------- */
.hd{background:linear-gradient(90deg,#fff,#f3f7ff);border-bottom:0;box-shadow:0 4px 18px #2e3d8f1c;position:sticky}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--grn),#4f6bff,var(--grn),var(--navy));background-size:300% 100%;animation:sh 6s linear infinite}@keyframes sh{to{background-position:300% 0}}
@media (prefers-color-scheme:dark){.hd{background:linear-gradient(90deg,#141c2b,#101a30)}}
.hd img{height:38px;border-radius:8px}.hd .t b{font-family:var(--fh);font-size:15px;color:var(--navy)}@media (prefers-color-scheme:dark){.hd .t b{color:#cfe0ff}}
/* ---------- student banner ---------- */
.banner{position:relative;border-radius:24px;overflow:hidden;margin-bottom:14px;background:linear-gradient(120deg,#0b1b4d,#2e3d8f 55%,#1f8a6a);color:#fff;box-shadow:0 18px 44px #2e3d8f44}
.banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:34px 34px;animation:grid 18s linear infinite}
.bn-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}.bn-sky .b1{top:-5%;animation:cross 15s linear infinite}.bn-sky .b2{top:70%;animation:cross 24s linear infinite;animation-delay:-9s}
.bn-in{position:relative;display:flex;align-items:center;gap:18px;padding:22px 24px;flex-wrap:wrap}
.ring.big{width:92px;height:92px;background:conic-gradient(#7dffb4 calc(var(--p)*1%),#ffffff33 0);box-shadow:0 0 28px #7dffb455}.ring.big i{width:72px;height:72px;background:#0b1b4d;color:#fff;font-size:18px;font-family:var(--fh)}
.bn-t{flex:1;min-width:200px}.bn-t h2{font-size:clamp(22px,3.2vw,32px);font-weight:800}.bn-k{font-size:13px;opacity:.85}
.wv{display:inline-block;animation:wv 1.6s ease-in-out infinite;transform-origin:70% 70%}@keyframes wv{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}}
.bn-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.bn-chips span{padding:5px 12px;border-radius:999px;background:#ffffff22;border:1px solid #ffffff44;font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}
.bn-bot{position:relative;margin-left:auto;display:flex;align-items:flex-end;gap:6px}
.bubble{position:absolute;right:112px;top:-4px;width:150px;padding:8px 11px;border-radius:14px 14px 4px 14px;background:#fff;color:#162033;font-size:12px;font-weight:600;box-shadow:0 8px 20px #0004;animation:pop 5s ease-in-out infinite}@keyframes pop{0%,100%{transform:scale(.96)}50%{transform:scale(1.03)}}
@media (max-width:640px){.bubble{display:none}.bn-bot{margin:0 auto}}
/* sessions & cards */
.ses{border-radius:18px;border:1px solid var(--bd);overflow:hidden;animation:cin .5s both;transition:transform .18s,box-shadow .18s,border-color .18s}
.ses::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--navy),var(--grn))}
.ses:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 16px 34px #2e3d8f33;border-color:var(--grn)}
@keyframes cin{from{opacity:0;transform:translateY(14px)}}
.grid .ses:nth-child(2){animation-delay:.04s}.grid .ses:nth-child(3){animation-delay:.08s}.grid .ses:nth-child(4){animation-delay:.12s}.grid .ses:nth-child(5){animation-delay:.16s}.grid .ses:nth-child(6){animation-delay:.2s}.grid .ses:nth-child(n+7){animation-delay:.24s}
.tick{animation:tk .5s cubic-bezier(.3,1.6,.5,1) both;box-shadow:0 0 0 4px #15803d33}@keyframes tk{from{transform:scale(0)}}
.card{border-radius:18px}.tabs button{transition:.18s}.tabs button:hover{transform:translateY(-2px)}
.tabs button.on{background:linear-gradient(90deg,var(--navy),var(--grn));box-shadow:0 8px 18px #2e3d8f44}
.b.p{background:linear-gradient(90deg,var(--navy),var(--grn));border-color:transparent}
.bar i{background:linear-gradient(90deg,var(--navy),var(--grn))}
/* walking robot + drone along the bottom (students) */
.patrol{position:fixed;left:0;right:0;bottom:0;height:90px;pointer-events:none;z-index:15;overflow:hidden}
.patrol .pw{position:absolute;bottom:0;left:0;animation:pw 40s linear infinite}.patrol .pd{position:absolute;bottom:42px;left:0;animation:pd 26s linear infinite;animation-delay:-6s}
@keyframes pw{0%{transform:translateX(-100px)}48%{transform:translateX(calc(100vw + 40px))}50%{transform:translateX(calc(100vw + 40px)) scaleX(-1)}98%{transform:translateX(-100px) scaleX(-1)}100%{transform:translateX(-100px)}}
@keyframes pd{from{transform:translateX(calc(100vw + 100px)) scaleX(-1)}to{transform:translateX(-160px) scaleX(-1)}}
@media (max-width:640px){.patrol{height:60px}.patrol .pw svg{width:44px}.patrol .pd{display:none}}
/* celebration */
.cheer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}.cheer i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cf 2.2s ease-in both}
@keyframes cf{to{transform:translate(var(--x),105vh) rotate(720deg)}}
.chm{position:absolute;left:50%;top:38%;transform:translateX(-50%);text-align:center;background:#fffffff2;color:#162033;padding:16px 26px 12px;border-radius:24px;box-shadow:0 24px 60px #0006;animation:pp .5s cubic-bezier(.3,1.6,.5,1) both}.chm b{font-family:var(--fh);display:block;margin-top:2px;color:#2e3d8f}.chm .rb{margin:0 auto}
@keyframes pp{from{transform:translateX(-50%) scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fly{display:none}}

.banner .rb{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 8px 12px #0006)}
.patrol{height:70px;opacity:.92}.patrol .pw svg{width:52px}.patrol .pd{bottom:30px}.patrol .pd svg{width:60px}
.patrol .rb{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 4px 6px #0004)}