@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

*{box-sizing:border-box}
:root{
  --bg:#070806;--surface:#0d0f0c;--surface-2:#131611;--surface-3:#191d16;
  --text:#f4f7ed;--muted:#92998b;--line:rgba(235,255,211,.12);
  --acid:#c8ff52;--acid-2:#85f7bb;--danger:#ff7b72;--radius:22px;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope",Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 16% 12%,rgba(200,255,82,.09),transparent 28%),radial-gradient(circle at 82% 25%,rgba(133,247,187,.055),transparent 24%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,auto,64px 64px,64px 64px}
body:after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(7,8,6,.86))}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;left:16px;top:-80px;z-index:110;padding:12px 16px;border-radius:10px;background:var(--acid);color:#090b07;font-weight:800;transition:top .2s}.skip-link:focus{top:16px}
button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation}
#matrix{position:fixed;inset:0;width:100%;height:100%;z-index:-4;background:#070806;opacity:.48}
.noise{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:440px;height:440px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(200,255,82,.09),transparent 66%);filter:blur(12px);transition:transform .08s linear}
.nav{position:sticky;top:14px;z-index:50;display:flex;align-items:center;justify-content:space-between;width:min(1420px,calc(100% - 32px));margin:14px auto 0;padding:11px 12px 11px 18px;background:rgba(13,15,12,.78);backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.28)}
.nav img{width:174px;height:auto}
.navlinks{display:flex;gap:26px;align-items:center;color:#aeb5a7;font-size:12px;font-weight:700}
.navlinks a{transition:.2s}.navlinks a:hover{color:var(--acid)}
.nav-center{font-family:"DM Mono";font-size:10px;letter-spacing:2.5px;color:#aeb5a7;text-transform:uppercase}
.nav-center:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid);margin-right:9px;box-shadow:0 0 18px var(--acid)}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;border-radius:12px;border:1px solid var(--acid);background:var(--acid);color:#0b0e07;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:0 15px 44px rgba(200,255,82,.17)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:rgba(255,255,255,.025);color:#e9eee2;border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(200,255,82,.44);background:rgba(200,255,82,.06)}
.btn.full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(200,255,82,.35);outline-offset:3px}
.hero{min-height:calc(100vh - 100px);padding:90px max(6vw,24px) 60px;max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);align-items:center;gap:clamp(40px,6vw,100px)}
.hero-copy{position:relative}
.hero-copy:before{content:"01";position:absolute;top:-44px;right:2%;font-family:"DM Mono";font-size:11px;color:#5f6659}
.eyebrow{font-family:"DM Mono";font-size:10px;letter-spacing:2.4px;color:var(--acid);font-weight:500;text-transform:uppercase}
.hero h1{max-width:850px;font-size:clamp(62px,8.6vw,138px);line-height:.79;letter-spacing:-.075em;margin:23px 0 30px;font-weight:800}
.hero h1 span{color:var(--acid);font-style:italic;font-weight:500}
.hero-lead{max-width:650px;display:grid;grid-template-columns:5px 1fr;gap:20px;align-items:start}
.hero-lead:before{content:"";width:5px;height:100%;min-height:64px;background:var(--acid);border-radius:9px}
.hero p,.muted{color:var(--muted);line-height:1.75}
.hero p{font-size:clamp(15px,1.2vw,18px);margin:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.terminal{position:relative;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(21,24,18,.96),rgba(8,10,7,.98));box-shadow:0 50px 120px rgba(0,0,0,.5);overflow:hidden;transform:rotate(1.25deg)}
.terminal:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:var(--acid);filter:blur(110px);opacity:.12;right:-30px;top:-30px}
.termhead{display:flex;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line);font-family:"DM Mono";font-size:9px;letter-spacing:1.5px;color:#858c7e}
.termhead span:first-child{color:var(--acid)}
.code{min-height:410px;padding:26px;font-family:"DM Mono";font-size:12px;line-height:2;color:#92998b}
.code b{color:#edf4e2;font-weight:500}
.pulse{display:inline-block;width:7px;height:7px;margin:0 7px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px var(--acid);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}
.signal-strip{border-block:1px solid var(--line);overflow:hidden;background:rgba(200,255,82,.035)}
.signal-track{display:flex;gap:55px;width:max-content;padding:14px 0;animation:marquee 26s linear infinite;font-family:"DM Mono";font-size:9px;letter-spacing:2px;color:#798072}
.signal-track b{color:var(--acid)}
@keyframes marquee{to{transform:translateX(-50%)}}
.section{padding:110px max(6vw,24px);max-width:1600px;margin:auto}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:42px}
.section h2{font-size:clamp(42px,6vw,88px);line-height:.92;letter-spacing:-.06em;margin:12px 0;font-weight:750}
.section-intro{max-width:500px;justify-self:end}
.cards{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-auto-rows:minmax(310px,auto);gap:16px}
.card,.track,.week{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(20,23,17,.92),rgba(10,12,9,.95));overflow:hidden;transition:transform .25s,border-color .25s,background .25s}
.card:first-child{background:var(--acid);color:#0a0c08}
.card:first-child .muted,.card:first-child .num{color:#323a27}
.card:hover,.track:hover,.week:hover{transform:translateY(-6px);border-color:rgba(200,255,82,.46)}
.num{font-family:"DM Mono";font-size:10px;letter-spacing:2px;color:var(--acid)}
.card h3,.track h3{font-size:clamp(24px,2.2vw,36px);line-height:1.05;letter-spacing:-.035em;max-width:420px;margin:80px 0 16px}
.card:after{content:"↗";position:absolute;right:25px;top:22px;font-size:24px}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.track{min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.track:before{content:"ML";position:absolute;top:18px;right:25px;font-size:clamp(80px,11vw,170px);line-height:1;color:rgba(200,255,82,.055);font-weight:800;letter-spacing:-.08em}
.track:nth-child(2):before{content:"DA"}
.badge{display:inline-flex;width:max-content;align-items:center;min-height:28px;padding:6px 10px;border-radius:999px;border:1px solid rgba(200,255,82,.28);color:var(--acid);font-family:"DM Mono";font-size:9px;letter-spacing:1.3px;text-transform:uppercase}
.weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px;counter-reset:week}
.week{min-height:255px;display:flex;flex-direction:column;justify-content:space-between}
.week strong{font-family:"DM Mono";font-size:10px;color:var(--acid)}
.week h3{font-size:28px;letter-spacing:-.04em;margin:60px 0 5px}
.formwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,8vw,130px);align-items:start}
.form{padding:32px;border:1px solid var(--line);border-radius:28px;background:rgba(16,19,14,.9);box-shadow:0 40px 100px rgba(0,0,0,.35)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.footer{max-width:1600px;margin:auto;padding:30px max(6vw,24px) 45px;display:flex;justify-content:space-between;color:#70776a;border-top:1px solid var(--line);font-family:"DM Mono";font-size:10px}
.footer a:hover{color:var(--acid)}
.portal{min-height:calc(100vh - 90px);padding:70px max(5vw,20px) 70px;max-width:1500px;margin:auto}
.login{max-width:520px;margin:60px auto;padding:36px}
.login h1,.student-head h1,.panel>h1{font-size:clamp(38px,5vw,70px);line-height:.96;letter-spacing:-.055em;margin:14px 0}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(20,23,17,.94),rgba(9,11,8,.97));box-shadow:0 32px 90px rgba(0,0,0,.3);padding:30px}
.field{margin:16px 0}.field label{display:block;color:#b3baab;font-size:11px;font-weight:700;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#090b08;color:#f5f8ee;outline:none;transition:.2s}
.field input::placeholder,.field textarea::placeholder{color:#5e6559}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acid);box-shadow:0 0 0 4px rgba(200,255,82,.08)}
.field textarea{min-height:120px;resize:vertical}.msg{min-height:22px;color:#dce2d5;font-size:12px}.hidden{display:none!important}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.stat{padding:22px;border:1px solid var(--line);border-radius:17px;background:#11140f}.stat b{display:block;font-size:36px;color:var(--acid)}.stat span{font-size:11px;color:var(--muted)}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:17px;margin:18px 0 36px;background:#0b0d0a}
table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:16px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}th{color:#909888;background:#11140f;font-family:"DM Mono";font-size:9px;letter-spacing:1px;text-transform:uppercase}tbody tr:hover{background:rgba(200,255,82,.025)}
.student-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.65fr);gap:22px;align-items:start}
.task-list{display:grid;gap:16px}.week-block{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#12150f,#0a0c09)}
.week-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.week-head-left{display:flex;align-items:center;gap:16px}.week-num{font-size:48px;font-weight:800;color:#30382a;letter-spacing:-.06em}
.task-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.task-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:#0d100c;transition:.25s}.task-card:hover{border-color:rgba(200,255,82,.38);transform:translateY(-3px)}.task-card h4{margin:9px 0;font-size:18px}.task-card p{color:var(--muted);line-height:1.65;font-size:12px}
.submit-box{position:sticky;top:110px;padding:28px}.submit-info{display:grid;gap:7px;color:#7f8778;font-size:11px;margin-top:16px}.repo-structure{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:16px 0}.repo-structure code{display:block;padding:9px;border:1px solid var(--line);border-radius:9px;background:#171b14;text-align:center;font-family:"DM Mono";font-size:10px}.status-success{color:var(--acid-2)}.status-error{color:var(--danger)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}
@media(max-width:1000px){.navlinks{display:none}.hero{grid-template-columns:1fr;padding-top:80px}.terminal{transform:none;max-width:700px}.section-head,.formwrap{grid-template-columns:1fr}.section-intro{justify-self:start}.workspace{grid-template-columns:1fr}.submit-box{position:relative;top:auto}.cards{grid-template-columns:1fr 1fr}.cards .card:first-child{grid-column:span 2}.weeks{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.nav{top:8px;margin-top:8px;width:calc(100% - 16px)}.nav img{width:140px}.nav-center{display:none}.hero{padding-top:68px}.hero h1{font-size:clamp(56px,20vw,86px)}.code{min-height:360px;padding:20px;font-size:10px}.section{padding-block:82px}.cards,.tracks,.weeks,.stats,.task-grid,.row{grid-template-columns:1fr}.cards .card:first-child{grid-column:auto}.card,.track{min-height:280px}.student-head{align-items:flex-start;flex-direction:column}.footer{gap:20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.signal-track,.pulse{animation:none}.cursor-glow{display:none}}

/* Advanced cinematic layer */
body{isolation:isolate}
.hero{position:relative;perspective:1400px}
.hero-atmosphere{position:absolute;inset:-80px 0 0;z-index:-1;overflow:hidden;pointer-events:none}
.aura{position:absolute;border-radius:50%;filter:blur(8px);opacity:.65;will-change:transform}
.aura-one{width:min(52vw,780px);aspect-ratio:1;right:-14%;top:0;background:radial-gradient(circle,rgba(200,255,82,.13),rgba(200,255,82,.02) 43%,transparent 68%)}
.aura-two{width:min(40vw,620px);aspect-ratio:1;left:10%;bottom:-32%;background:radial-gradient(circle,rgba(133,247,187,.09),transparent 65%)}
.beam{position:absolute;width:1px;height:85%;left:50%;top:0;background:linear-gradient(transparent,rgba(200,255,82,.3),transparent);box-shadow:0 0 60px 18px rgba(200,255,82,.025);transform:rotate(23deg)}
.kinetic-title{display:flex;flex-direction:column;overflow:visible}
.kinetic-title .title-line{display:block;width:max-content;transform-origin:left center}
.kinetic-title .accent-line{position:relative;color:transparent;font-style:normal;-webkit-text-stroke:1px rgba(200,255,82,.9);background:linear-gradient(90deg,var(--acid) 0 38%,transparent 38% 100%);background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 30px rgba(200,255,82,.13))}
.in-view .kinetic-title .title-line{animation:titleEnter 1s cubic-bezier(.16,1,.3,1) both}.in-view .kinetic-title .title-line:nth-child(2){animation-delay:.08s}.in-view .kinetic-title .title-line:nth-child(3){animation-delay:.16s}.in-view .kinetic-title .accent-line{animation:titleEnter 1s .08s cubic-bezier(.16,1,.3,1) both,inkSweep 1.8s .65s cubic-bezier(.16,1,.3,1) forwards}
@keyframes titleEnter{from{opacity:0;transform:translateY(70px) rotateX(-35deg);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes inkSweep{to{background-position:0 0}}
.hero-scene{position:relative;transform-style:preserve-3d;will-change:transform}
.hero-scene .terminal{z-index:2;transform:rotate(1.5deg) translateZ(30px);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.hero-scene:hover .terminal{box-shadow:0 60px 150px rgba(0,0,0,.62),0 0 0 1px rgba(200,255,82,.08)}
.orbit{position:absolute;z-index:-1;border:1px solid rgba(200,255,82,.14);border-radius:50%;pointer-events:none}.orbit:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 22px var(--acid)}
.orbit-one{width:118%;aspect-ratio:1;left:-9%;top:-20%;transform:rotateX(68deg) rotateZ(-18deg)}.orbit-one:after{left:13%;top:21%}
.orbit-two{width:90%;aspect-ratio:1;right:-16%;bottom:-24%;border-color:rgba(133,247,187,.1);transform:rotateX(62deg) rotateZ(38deg)}.orbit-two:after{right:7%;bottom:27%;background:var(--acid-2)}
.scene-label{position:absolute;z-index:4;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(7,8,6,.8);backdrop-filter:blur(10px);font:9px "DM Mono";letter-spacing:1.2px;color:#acb5a4;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.scene-label-a{top:12%;right:-6%}.scene-label-b{left:-8%;bottom:13%}
.spotlight-card{--mx:50%;--my:50%}.spotlight-card:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(200,255,82,.12),transparent 64%);opacity:0;transition:opacity .25s}.spotlight-card:hover:before{opacity:1}.spotlight-card>*{position:relative;z-index:1}
.card:first-child.spotlight-card:before{background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.34),transparent 64%)}
.magnetic{will-change:transform}
.cursor-ring{position:fixed;z-index:105;width:34px;height:34px;border:1px solid rgba(200,255,82,.58);border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s,border-color .2s}
.cursor-ring.active{width:58px;height:58px;border-color:rgba(200,255,82,.9)}
.nav:after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--acid),transparent);transform:scaleX(0);transition:transform .4s}.nav:hover:after{transform:scaleX(1)}
.btn:before{content:"";position:absolute;width:140%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.28);transform:translate(-50%,-50%) scale(0);left:var(--bx,50%);top:var(--by,50%);transition:transform .45s cubic-bezier(.16,1,.3,1)}.btn:hover:before{transform:translate(-50%,-50%) scale(1)}.btn>*{position:relative;z-index:1}
.section h2{background:linear-gradient(110deg,#f5f8ef 20%,#777f72 48%,#f5f8ef 72%);background-size:240% auto;background-position:100% center;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.2s cubic-bezier(.16,1,.3,1)}.section.in-view h2{background-position:0 center}
.week{transform-origin:center bottom}.week:hover{transform:translateY(-8px) rotateX(2deg)}
@media(max-width:1000px){.hero-scene{max-width:700px}.scene-label-a{right:0}.scene-label-b{left:0}}
@media(max-width:650px){.hero-scene{margin-top:22px}.orbit,.scene-label,.cursor-ring{display:none}.kinetic-title .title-line{width:auto}.hero-scene .terminal{transform:none}}
@media(prefers-reduced-motion:reduce){.aura,.beam,.orbit{display:none}.in-view .kinetic-title .title-line,.in-view .kinetic-title .accent-line{animation:none}.kinetic-title .accent-line{background-position:0 0}.hero-scene,.hero-scene .terminal,.magnetic{transform:none!important}.spotlight-card:before{display:none}}