/* ==========================================================
   Tech Lynx Academy LMS – design system (navy / cyan)
   Brand tokens: Navy #0B2C6F · Cyan #00D2FF · Cloud #F4F7FC · Charcoal #172033
   ========================================================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --bg:#030a1c;--bg2:#071634;--ink:#e9f2ff;--mut:#9db3d6;
  --navy:#0B2C6F;--a1:#7df0ff;--a2:#00D2FF;--a3:#2f7bff;--a2rgb:0,210,255;
  --btn-ink:#031230;--acc-text:#7df0ff;
  --glass:rgba(8,22,52,.62);--glass2:rgba(12,32,74,.55);--line:rgba(140,190,255,.15);
  --field:rgba(0,10,32,.45);--shadow:0 24px 70px -24px rgba(0,0,0,.7);
  --ok:#35e6a1;--warn:#ffc857;--bad:#ff6b81;
  --r:22px;--ease:cubic-bezier(.2,.8,.2,1);--hdr:76px;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f7fc;--bg2:#e6edf9;--ink:#172033;--mut:#51607c;
  --a1:#0B2C6F;--a2:#00a6d6;--a3:#0B2C6F;--a2rgb:0,166,214;
  --btn-ink:#03162f;--acc-text:#0B2C6F;
  --glass:rgba(255,255,255,.82);--glass2:rgba(255,255,255,.9);--line:rgba(11,44,111,.13);
  --field:#fff;--shadow:0 24px 60px -28px rgba(11,44,111,.35);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
ul{list-style:none}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:999;background:var(--a2);color:var(--btn-ink);padding:10px 18px;border-radius:99px;font-weight:600;transition:top .3s}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:8px}
::selection{background:var(--a2);color:var(--btn-ink)}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block}
.hide{display:none!important}

/* ---------- 3D stage + atmosphere ---------- */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#atmos{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.5) 100%),
             radial-gradient(55% 45% at var(--mx,50%) var(--my,50%),rgba(var(--a2rgb),.09),transparent 70%)}
:root[data-theme="light"] #atmos{background:radial-gradient(60% 50% at var(--mx,50%) var(--my,50%),rgba(var(--a2rgb),.12),transparent 70%)}
.no-webgl body{background:radial-gradient(70% 60% at 70% 20%,rgba(var(--a2rgb),.22),transparent 60%),var(--bg)}
main,header.top,footer,.app{position:relative;z-index:3}

/* ---------- loader + wipe ---------- */
#loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;transition:opacity .7s .1s,visibility .7s .1s}
#loader.done{opacity:0;visibility:hidden}
#loader .lbox{text-align:center}
#loader .lbadge{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:#fff;margin:0 auto 18px;box-shadow:0 0 50px rgba(0,210,255,.7);animation:lpulse 1.6s ease-in-out infinite}
#loader .lbadge img{width:68px}
#loader .lname{font-weight:800;letter-spacing:.35em;font-size:.9rem}
#loader .lbar{width:200px;height:3px;border-radius:9px;background:rgba(127,160,220,.25);margin:18px auto 0;overflow:hidden}
#loader .lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--a2),var(--a1));box-shadow:0 0 14px var(--a2);transition:width .3s}
@keyframes lpulse{50%{transform:scale(1.08)}}
#wipe{position:fixed;inset:0;z-index:1100;pointer-events:none;background:var(--navy);clip-path:circle(0 at var(--cx,50%) var(--cy,50%))}
#wipe.go{pointer-events:all;clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%));transition:clip-path .8s cubic-bezier(.7,0,.2,1)}

/* ---------- cursor + progress ---------- */
#cur,#curdot{position:fixed;left:0;top:0;z-index:1200;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),background .3s,margin .3s var(--ease)}
#cur{width:38px;height:38px;border:1.5px solid rgba(var(--a2rgb),.75);box-shadow:0 0 18px rgba(var(--a2rgb),.35),inset 0 0 12px rgba(var(--a2rgb),.2);margin:-19px 0 0 -19px}
#curdot{width:6px;height:6px;background:var(--a2);margin:-3px 0 0 -3px;box-shadow:0 0 10px var(--a2)}
body.hasmouse #cur,body.hasmouse #curdot{opacity:1}
#cur.hov{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(var(--a2rgb),.12)}
#cur.down{width:26px;height:26px;margin:-13px 0 0 -13px}
@media (pointer:coarse){#cur,#curdot{display:none}}
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:900;background:linear-gradient(90deg,var(--navy),var(--a2),var(--a1));box-shadow:0 0 14px var(--a2)}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6vw,5.2rem);font-weight:800}
h2{font-size:clamp(2rem,4.6vw,3.8rem);font-weight:800;margin:14px 0 16px}
h3{font-size:1.25rem;font-weight:700}
.lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--mut);max-width:640px}
.num{display:inline-flex;align-items:center;gap:12px;font-size:.76rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--acc-text)}
.num::before{content:"";width:44px;height:2px;background:linear-gradient(90deg,transparent,var(--a2));box-shadow:0 0 10px var(--a2)}
.gt{background:linear-gradient(100deg,var(--a1),var(--a2) 45%,var(--a3) 75%,var(--a2));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
:root[data-theme="light"] .gt{background-image:linear-gradient(100deg,#0B2C6F,#00a6d6 50%,#0B2C6F)}
@keyframes shimmer{to{background-position:-220% 0}}
.w{display:inline-block;white-space:nowrap}
.w.gt{white-space:normal}
.split .w{opacity:0;translate:0 60%;rotate:6deg;transition:opacity .9s var(--ease),translate .9s var(--ease),rotate .9s var(--ease);transition-delay:calc(var(--i)*55ms)}
.split.in .w{opacity:1;translate:0 0;rotate:0deg}
.rv{opacity:0;translate:0 44px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0}

/* ---------- glowing rounded buttons ---------- */
.btn{--g:var(--a2rgb);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95em 1.9em;border-radius:999px;border:0;font-weight:600;font-size:.94rem;line-height:1;white-space:nowrap;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s,background-position .8s var(--ease),color .3s,background .3s;will-change:transform}
.btn .i{font-size:1.15em;transition:transform .35s var(--ease)}
.btn:hover .i{transform:translateX(4px)}
.btn.p{color:var(--btn-ink);background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) -160% 0/250% 100% no-repeat,linear-gradient(135deg,var(--a1),var(--a2));
  box-shadow:0 0 0 1px rgba(var(--g),.55),0 0 22px rgba(var(--g),.6),0 0 60px rgba(var(--g),.3),inset 0 1px 0 rgba(255,255,255,.55)}
:root[data-theme="light"] .btn.p{color:#fff;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%) -160% 0/250% 100% no-repeat,linear-gradient(135deg,#0B2C6F,#0a7fc4)}
.btn.p::before{content:"";position:absolute;inset:-4px;border-radius:inherit;z-index:-1;background:conic-gradient(from var(--ang),transparent 0 62%,rgb(var(--g)) 86%,#fff 92%,transparent 96%);filter:blur(7px);animation:spin 3.2s linear infinite;opacity:.9}
@keyframes spin{to{--ang:360deg}}
.btn.p:hover{background-position:160% 0,0 0;transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 1px rgba(var(--g),.85),0 0 34px rgba(var(--g),.85),0 0 100px rgba(var(--g),.5),inset 0 1px 0 rgba(255,255,255,.7)}
.btn.p:active{transform:translateY(0) scale(.97)}
.btn.s{color:var(--ink);background:rgba(127,170,255,.08);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(var(--g),.6),0 0 18px rgba(var(--g),.18)}
.btn.s:hover{background:rgba(var(--g),.16);box-shadow:inset 0 0 0 1.5px rgb(var(--g)),0 0 34px rgba(var(--g),.5),0 0 80px rgba(var(--g),.2);transform:translateY(-3px) scale(1.03)}
.btn.d{color:#fff;background:linear-gradient(135deg,#ff8aa0,#ff4d6d);box-shadow:0 0 22px rgba(255,77,109,.5)}
.btn.d:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 40px rgba(255,77,109,.8)}
.btn.sm{padding:.7em 1.25em;font-size:.82rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);translate:-50% -50%;width:10px;height:10px;pointer-events:none;animation:rip .7s ease-out forwards;z-index:-1}
@keyframes rip{to{scale:30;opacity:0}}
.btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ibtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;font-size:1.15rem;color:var(--ink);transition:all .35s var(--ease);position:relative}
.ibtn:hover{border-color:var(--a2);box-shadow:0 0 24px -2px rgba(var(--a2rgb),.7);transform:translateY(-2px) rotate(8deg)}
.ibtn .dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad)}

/* ---------- cards: glass + spotlight + 3D tilt ---------- */
.card{position:relative;padding:28px 26px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .25s ease-out}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--a2rgb),.18),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--a2),transparent 60%);-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 .4s;pointer-events:none}
.card:hover::before,.card:hover::after{opacity:1}
.card:hover{box-shadow:0 30px 80px -30px rgba(var(--a2rgb),.45)}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.ico{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;font-size:1.55rem;margin-bottom:18px;color:var(--acc-text);background:linear-gradient(145deg,rgba(var(--a2rgb),.24),rgba(var(--a2rgb),.04));box-shadow:inset 0 0 0 1px rgba(var(--a2rgb),.4),0 0 28px -4px rgba(var(--a2rgb),.55);transition:transform .4s var(--ease)}
.card:hover .ico{transform:translateZ(40px) rotate(-6deg) scale(1.08)}
.card p{color:var(--mut);font-size:.94rem;margin-top:8px}
.grid2,.grid3,.grid4{display:grid;gap:22px}
.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid4,.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid4,.grid3,.grid2{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.f{position:relative;display:grid;gap:7px}
.f label{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.f input,.f select,.f textarea{width:100%;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:var(--field);outline:0;transition:all .3s;font-size:.94rem}
.f select option{background:#071634;color:#fff}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--a2);box-shadow:0 0 0 4px rgba(var(--a2rgb),.16),0 0 28px -4px rgba(var(--a2rgb),.5)}
.f .err{display:none;font-size:.76rem;color:var(--bad)}
.f.bad input,.f.bad select{border-color:var(--bad);animation:shake .4s}
.f.bad .err{display:block}
@keyframes shake{25%{translate:-6px 0}75%{translate:6px 0}}

/* ---------- badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:.25em .8em;border-radius:99px;font-size:.72rem;font-weight:600;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.badge.ok{color:var(--ok);background:rgba(53,230,161,.12);border-color:rgba(53,230,161,.35)}
.badge.warn{color:var(--warn);background:rgba(255,200,87,.12);border-color:rgba(255,200,87,.35)}
.badge.bad{color:var(--bad);background:rgba(255,107,129,.12);border-color:rgba(255,107,129,.35)}
.badge.info{color:var(--acc-text);background:rgba(var(--a2rgb),.12);border-color:rgba(var(--a2rgb),.35)}
:root[data-theme="light"] .badge.ok{color:#0b8a5a}:root[data-theme="light"] .badge.warn{color:#9a6a00}:root[data-theme="light"] .badge.bad{color:#c2304b}

/* ---------- toast + modal ---------- */
#toasts{position:fixed;right:20px;bottom:20px;z-index:1300;display:grid;gap:10px}
.toast{padding:14px 20px;border-radius:16px;background:var(--glass2);border:1px solid var(--a2);box-shadow:0 0 40px -8px rgba(var(--a2rgb),.6),var(--shadow);backdrop-filter:blur(14px);font-size:.9rem;display:flex;gap:10px;align-items:center;animation:tin .5s var(--ease)}
.toast.bad{border-color:var(--bad)}
@keyframes tin{from{opacity:0;transform:translateX(40px) scale(.9)}}
.modal-bg{position:fixed;inset:0;z-index:1250;background:rgba(2,6,18,.66);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.modal{width:min(560px,100%);max-height:88vh;overflow:auto;padding:30px;border-radius:26px;background:var(--glass2);border:1px solid rgba(var(--a2rgb),.4);box-shadow:0 0 80px -16px rgba(var(--a2rgb),.55),var(--shadow);backdrop-filter:blur(18px);animation:mpop .55s var(--ease)}
@keyframes mpop{from{opacity:0;transform:perspective(900px) rotateX(24deg) translateY(30px) scale(.92)}}
.modal h3{margin-bottom:14px;font-size:1.4rem}
.modal .mact{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.modal .f{margin-bottom:14px}

/* ---------- misc ---------- */
.glowline{height:1px;background:linear-gradient(90deg,transparent,var(--a2),transparent);opacity:.5}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}