/* ===================== TOKENS ===================== */
:root{
  --bg:#070a0f;
  --surface:#0e1218;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --text:#f3f6f8;
  --muted:#9aa7b4;
  --muted-2:#6b7886;
  --green:#22e55e;
  --green-2:#5dff93;
  --green-3:#0fb64b;
  --green-glow:rgba(34,229,94,.45);
  --green-soft:rgba(34,229,94,.12);
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --container:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1{font-family:var(--font-display);margin:0;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
::selection{background:var(--green);color:#04120a}
.container{width:min(var(--container),100% - 2rem);margin-inline:auto}
main{position:relative;z-index:1}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  border-radius:999px;padding:.95rem 1.6rem;position:relative;overflow:hidden;white-space:nowrap;
  border:0;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.btn .ico{width:20px;height:20px;flex:none}
.btn--sm{padding:.65rem 1.1rem;font-size:.85rem}
.btn--lg{padding:1.1rem 2.1rem;font-size:1.05rem}
.btn--primary{
  color:#04120a;
  background:linear-gradient(135deg,var(--green-2) 0%,var(--green) 55%,var(--green-3) 100%);
  box-shadow:0 0 0 1px rgba(93,255,147,.35),0 12px 32px -10px var(--green-glow);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-130%);animation:shimmer 3.6s ease-in-out infinite;
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(93,255,147,.6),0 20px 44px -12px var(--green-glow),0 0 48px -6px var(--green-glow);
}
.btn--primary:active{transform:translateY(0) scale(.98)}
@keyframes shimmer{0%,60%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ===================== INTRO ===================== */
.intro{
  position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease);
}
.intro.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro__logo{width:min(64vw,380px);animation:introLogo 1.1s var(--ease) both}
.intro__logo img{width:100%;filter:drop-shadow(0 0 28px var(--green-glow))}
.intro__bar{position:absolute;bottom:14vh;width:min(50vw,220px);height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.intro__bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green-2),var(--green));transform-origin:left;animation:introBar 1.3s var(--ease) both;box-shadow:0 0 14px var(--green)}
@keyframes introLogo{0%{opacity:0;transform:scale(.82) translateY(18px);filter:blur(12px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes introBar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* ===================== CURSOR GLOW ===================== */
.cursor-glow{
  position:fixed;top:0;left:0;width:560px;height:560px;border-radius:50%;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(34,229,94,.09),transparent 62%);transition:opacity .5s;
}
@media (pointer:coarse){.cursor-glow{display:none}}

/* ===================== NAV ===================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;padding:1.1rem 0;
  border-bottom:1px solid transparent;transition:background .4s,padding .4s,border-color .4s;
}
.nav.is-scrolled{
  padding:.6rem 0;background:rgba(7,10,15,.72);border-color:var(--border);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__brand img{height:38px;width:auto;transition:height .4s}
.nav.is-scrolled .nav__brand img{height:32px}

/* ===================== HERO ===================== */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  --photo-w:min(64vw,1040px);--photo-right:max(0px,calc((100vw - var(--container)) / 2 - 260px))}
.hero__chart{position:absolute;inset:0;width:100%;height:100%;z-index:-4;opacity:.5;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(to top,transparent 0%,#000 30%,#000 100%)}
.hero__grid{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 40%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 40% 40%,#000 20%,transparent 72%);
}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px);z-index:-3;pointer-events:none;transition:transform .8s var(--ease)}
.hero__glow--1{width:640px;height:640px;right:-6%;top:-14%;background:rgba(34,229,94,.18)}
.hero__glow--2{width:480px;height:480px;left:-12%;bottom:-18%;background:rgba(34,229,94,.09)}
.hero__photo{
  position:absolute;top:0;right:var(--photo-right);bottom:0;width:var(--photo-w);z-index:-2;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%,#000 86%,transparent 100%),linear-gradient(to top,transparent 0%,#000 30%);
  mask-image:linear-gradient(to right,transparent 0%,#000 42%,#000 86%,transparent 100%),linear-gradient(to top,transparent 0%,#000 30%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.js .hero__photo{opacity:0}
.is-ready .hero__photo{animation:photoIn 1.6s var(--ease) .1s forwards}
@keyframes photoIn{from{opacity:0;transform:translateX(36px) scale(1.04)}to{opacity:1;transform:none}}
.hero__photo picture,.hero__photo img{width:100%;height:100%}
.hero__photo img{object-fit:cover;object-position:center top}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,10,15,.97) 0,rgba(7,10,15,.86) calc(50% - 300px),rgba(7,10,15,.45) calc(50% - 40px),rgba(7,10,15,0) calc(50% + 300px)),linear-gradient(to top,var(--bg) 0%,rgba(7,10,15,.6) 10%,transparent 30%);
}
.hero__inner{
  display:grid;grid-template-columns:minmax(0,620px);align-items:center;
  padding:7rem 0 3rem;position:relative;min-height:100svh;
}
.hero__title{font-size:clamp(2.7rem,5.8vw,4.8rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-bottom:1.5rem}
.word{display:inline-block}
.js .word{opacity:0;transform:translateY(46px) rotate(2deg);filter:blur(6px)}
.is-ready .word{animation:wordIn 1s var(--ease) forwards;animation-delay:calc(var(--i) * 75ms)}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}
.word--accent{color:var(--green)}
@media (min-width:961px){
  .word--accent{
    background:linear-gradient(92deg,var(--green-2),var(--green) 60%,var(--green-3));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.hero__sub{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:54ch}
.hero__sub strong{color:var(--text);font-weight:600}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.8rem}

.hero__side{position:absolute;top:0;bottom:0;right:var(--photo-right);width:var(--photo-w);z-index:1;pointer-events:none}
.hero__badge{
  position:absolute;display:flex;align-items:center;gap:.75rem;padding:.8rem 1.05rem;border-radius:16px;
  background:rgba(14,18,24,.74);border:1px solid var(--border-strong);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.95),0 0 30px -14px var(--green-glow);
  font-family:var(--font-display);
}
.js .hero__badge{opacity:0}
.is-ready .hero__badge{animation:badgeIn .8s var(--ease) var(--d,0s) both,float 6s ease-in-out calc(var(--d,0s) + .8s) infinite}
@keyframes badgeIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero__badge strong{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:var(--green-2);line-height:1}
.hero__badge span{font-size:.76rem;color:var(--muted);line-height:1.25}
.hero__badge--exp{right:2%;top:22%}
.hero__badge--students{right:8%;top:54%}


/* ===================== REVEAL ===================== */
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:960px){
  .nav__brand img{height:32px}
  .hero__inner{grid-template-columns:1fr;padding:52vh 0 3rem;text-align:center;min-height:0}
  .hero__photo{top:0;right:0;left:0;bottom:auto;width:100%;height:62vh;
    -webkit-mask-image:linear-gradient(to bottom,#000 48%,transparent 100%);mask-image:linear-gradient(to bottom,#000 48%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .hero::before{background:linear-gradient(to top,var(--bg) 0%,rgba(7,10,15,.55) 28%,rgba(7,10,15,0) 50%,rgba(7,10,15,.4) 100%)}
  .hero__grid{-webkit-mask-image:radial-gradient(ellipse at 50% 70%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 70%,#000 10%,transparent 70%)}
  .hero__sub{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__side{display:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .nav__cta{padding:.55rem .9rem;font-size:.8rem}
  .hero__actions .btn{width:100%}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .word,.js [data-reveal],.js .hero__photo,.js .hero__badge{opacity:1;transform:none;filter:none}
  .intro{display:none}
}