:root{
  --bg:#0a0705;
  --bg-2:#15100a;
  --ink:#f4e4bc;
  --ink-dim:#a89368;
  --gold:#e6b54a;
  --gold-bright:#ffd76a;
  --gold-deep:#8a6418;
  --crimson:#c8302a;
  --crimson-deep:#6b1410;
  --mystic:#6a4ea1;
  --line:rgba(230,181,74,0.18);
  --card:rgba(30,22,12,0.7);
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:'Rajdhani',sans-serif;}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(230,181,74,0.10), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(200,48,42,0.07), transparent 60%),
    radial-gradient(900px 600px at 10% 70%, rgba(106,78,161,0.06), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
.font-display{font-family:'Cinzel',serif;letter-spacing:0.02em;}
.font-mono{font-family:'JetBrains Mono',monospace;}
.text-gold{color:var(--gold);}
.text-gold-bright{color:var(--gold-bright);}
.text-ink-dim{color:var(--ink-dim);}
.bg-card{background:var(--card);}
.border-line{border-color:var(--line);}

#nav {
  padding-top: 0;
}

.nav-left {
  height: 85px;
  background: linear-gradient(180deg, rgba(10,7,5,0.95) 0%, rgba(10,7,5,0.8) 100%);
  backdrop-filter: blur(12px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
  filter: 
    drop-shadow(2px 0 0 var(--gold)) 
    drop-shadow(-2px 0 0 var(--gold)) 
    drop-shadow(0 2px 0 var(--gold)) 
    drop-shadow(0 -2px 0 var(--gold));
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.nav-right {
  height: 85px;
  background: linear-gradient(180deg, rgba(10,7,5,0.95) 0%, rgba(10,7,5,0.8) 100%);
  backdrop-filter: blur(12px);
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
  filter: 
    drop-shadow(2px 0 0 var(--gold)) 
    drop-shadow(-2px 0 0 var(--gold)) 
    drop-shadow(0 2px 0 var(--gold)) 
    drop-shadow(0 -2px 0 var(--gold));
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.nav-center {
  height: 60px;
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(10,7,5,0.95) 0%, rgba(20,14,8,0.95) 100%);
  backdrop-filter: blur(12px);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
  filter: 
    drop-shadow(2px 0 0 var(--gold)) 
    drop-shadow(-2px 0 0 var(--gold)) 
    drop-shadow(0 2px 0 var(--gold)) 
    drop-shadow(0 -2px 0 var(--gold));
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

.nav-logo-circle {
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(230, 181, 74, 0.2);
  position: relative;
  transition: all .3s ease;
  overflow: hidden;
}
.nav-logo-circle:hover {
  box-shadow: 0 0 25px rgba(230, 181, 74, 0.5);
  transform: scale(1.05);
}

.nav-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--gold-bright);
}

#mobileMenu {
  position: fixed;
  top: 85px;
  right: 0;
  width: 300px;
  z-index: 49;
  transform: translateX(120%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
#mobileMenu.open {
  transform: translateX(0);
}
.mobile-menu-inner {
  background: rgba(10, 7, 5, 0.95);
  backdrop-filter: blur(15px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  filter: 
    drop-shadow(2px 0 0 var(--gold)) 
    drop-shadow(-2px 0 0 var(--gold)) 
    drop-shadow(0 2px 0 var(--gold)) 
    drop-shadow(0 -2px 0 var(--gold));
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.btn-gold {
  position: relative;
  background: linear-gradient(180deg, #3a2a14 0%, #2a1d0e 100%);
  border: none;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  transition: all .3s ease;
  overflow: hidden;
}
.btn-gold::before {
  content: "";
  position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,215,106,0.25) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .6s ease;
}
.btn-gold:hover::before{transform:translateX(100%);}
.btn-gold:hover {
  background: linear-gradient(180deg, #4a3a18 0%, #3a2d14 100%);
  box-shadow: 0 0 25px rgba(230,181,74,0.4);
  color: #fff;
}

.btn-crimson {
  background: linear-gradient(180deg, #4a1410 0%, #2a0a08 100%);
  border: none;
  color: #ffb8a8;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  transition: all .3s ease;
}
.btn-crimson:hover {
  background: linear-gradient(180deg, #6b1410 0%, #4a0e0a 100%);
  box-shadow: 0 0 25px rgba(200,48,42,0.4);
  color: #fff;
}

.btn-hex {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  filter: 
    drop-shadow(1px 0 0 var(--gold-bright)) 
    drop-shadow(-1px 0 0 var(--gold-bright)) 
    drop-shadow(0 1px 0 var(--gold-bright)) 
    drop-shadow(0 -1px 0 var(--gold-bright));
}

.btn-hex-mobile {
  width: 48px;
  height: 48px;
  background: rgba(10, 7, 5, 0.95);
  backdrop-filter: blur(8px);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
  filter: 
    drop-shadow(1px 0 0 var(--gold)) 
    drop-shadow(-1px 0 0 var(--gold)) 
    drop-shadow(0 1px 0 var(--gold)) 
    drop-shadow(0 -1px 0 var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 1.2rem;
  cursor: pointer;
}

.rune-grid{
  background-image:
    linear-gradient(rgba(230,181,74,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,181,74,0.04) 1px, transparent 1px);
  background-size:60px 60px;
}

.gold-text{
  background:linear-gradient(180deg,#ffd76a 0%, #e6b54a 45%, #8a6418 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ornate-frame{
  position:relative;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(30,22,12,0.85), rgba(15,11,7,0.85));
}
.ornate-frame::before, .ornate-frame::after{
  content:"";
  position:absolute;
  width:24px; height:24px;
  border:1px solid var(--gold);
  opacity:0.7;
}
.ornate-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.ornate-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

.glow-gold{box-shadow:0 0 30px rgba(230,181,74,0.25), inset 0 0 20px rgba(230,181,74,0.05);}

.logo-container{
  filter: drop-shadow(0 0 40px rgba(230,181,74,0.5)) drop-shadow(0 0 80px rgba(200,48,42,0.2));
  animation:logoBreath 4s ease-in-out infinite;
}
@keyframes logoBreath{
  0%,100%{filter: drop-shadow(0 0 40px rgba(230,181,74,0.5)) drop-shadow(0 0 80px rgba(200,48,42,0.2));}
  50%{filter: drop-shadow(0 0 60px rgba(230,181,74,0.7)) drop-shadow(0 0 120px rgba(200,48,42,0.35));}
}

#particles{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}

.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center bottom, rgba(200,48,42,0.18), transparent 55%),
    radial-gradient(ellipse at center 30%, rgba(230,181,74,0.12), transparent 50%),
    url('../assets/background.jpg') center/cover;
  filter:brightness(0.35) contrast(1.1) saturate(0.8);
}
.hero-bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,7,5,0.5) 0%, transparent 30%, transparent 60%, var(--bg) 100%);
}

.smoke{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(200,48,42,0.08), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(106,78,161,0.08), transparent 25%);
  mix-blend-mode:screen;
  animation:smokeDrift 18s ease-in-out infinite alternate;
}
@keyframes smokeDrift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(30px,-20px) scale(1.1);}
}

.ornate-divider{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  color:var(--gold);
}
.ornate-divider::before, .ornate-divider::after{
  content:"";
  height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.ornate-divider::after{background:linear-gradient(90deg, var(--gold), transparent);}

.school-card{
  position:relative;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.school-card .school-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .8s ease, filter .5s ease;
  filter:brightness(0.5) saturate(0.7);
}
.school-card:hover .school-bg{transform:scale(1.08);filter:brightness(0.7) saturate(1);}
.school-card .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(10,7,5,0.4) 50%, rgba(10,7,5,0.95) 100%);
}
.school-card:hover{transform:translateY(-6px);}

.class-card{
  position:relative;
  background:linear-gradient(180deg, rgba(30,22,12,0.7), rgba(15,11,7,0.7));
  border:1px solid var(--line);
  transition:all .4s ease;
  overflow:hidden;
}
.class-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease;
}
.class-card:hover::before{transform:scaleX(1);}
.class-card:hover{
  border-color:rgba(230,181,74,0.5);
  transform:translateY(-4px);
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.7), 0 0 30px rgba(230,181,74,0.15);
}

.stat-bar{
  height:4px;
  background:rgba(230,181,74,0.1);
  overflow:hidden;border-radius:2px;
}
.stat-bar > span{
  display:block;height:100%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.stat-bar.active > span{transform:scaleX(1);}

.ticker{
  display:flex;gap:3rem;
  animation:ticker 35s linear infinite;
  white-space:nowrap;
}
@keyframes ticker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

.reveal{opacity:0;transform:translateY(30px);transition:all .9s cubic-bezier(.2,.7,.2,1);}
.reveal.visible{opacity:1;transform:translateY(0);}

.nav-link{
  position:relative;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-size:0.8rem;
  font-weight:500;
  transition:color .3s;
}
.nav-link::after{
  content:"";
  position:absolute;left:50%;bottom:-6px;
  width:0;height:1px;background:var(--gold);
  transition:all .3s;transform:translateX(-50%);
}
.nav-link:hover{color:var(--gold-bright);}
.nav-link:hover::after{width:100%;}

.section-title{position:relative;display:inline-block;}
.section-title::before{
  content:attr(data-num);
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.5em;
  color:var(--gold);opacity:0.7;
}

.scroll-hint{
  width:24px;height:40px;border:1px solid var(--gold);border-radius:12px;
  position:relative;
}
.scroll-hint::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:3px;height:8px;background:var(--gold);border-radius:2px;
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{opacity:1;transform:translate(-50%,0);}
  100%{opacity:0;transform:translate(-50%,16px);}
}

.feature-icon{
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);
  background:radial-gradient(circle, rgba(230,181,74,0.15), transparent 70%);
  color:var(--gold-bright);
  font-size:1.5rem;
  position:relative;
}
.feature-icon::before, .feature-icon::after{
  content:"";position:absolute;
  width:8px;height:8px;border:1px solid var(--gold);
}
.feature-icon::before{top:-3px;left:-3px;border-right:none;border-bottom:none;}
.feature-icon::after{bottom:-3px;right:-3px;border-left:none;border-top:none;}

#toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(120px);
  background:rgba(20,14,8,0.95);
  border:1px solid var(--gold);
  color:var(--gold-bright);
  padding:14px 28px;
  font-family:'Cinzel',serif;letter-spacing:0.1em;text-transform:uppercase;font-size:0.85rem;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  z-index:1000;
  box-shadow:0 10px 40px rgba(0,0,0,0.5), 0 0 30px rgba(230,181,74,0.2);
}
#toast.show{transform:translateX(-50%) translateY(0);}

.tape{
  background:linear-gradient(90deg, var(--crimson-deep), var(--bg), var(--crimson-deep));
  border-top:1px solid var(--crimson);
  border-bottom:1px solid var(--crimson);
}

.class-portrait{
  width:100%;aspect-ratio:3/4;
  background-size:cover;background-position:center top;
  filter:saturate(0.7) brightness(0.8) contrast(1.05);
  transition:filter .4s ease;
}
.class-card:hover .class-portrait{filter:saturate(1.1) brightness(1) contrast(1.1);}

.bg-vignette{
  background:radial-gradient(ellipse at center, transparent 40%, rgba(10,7,5,0.6) 100%);
}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--bg-2);}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

.float-anim-1{animation:floatY 8s ease-in-out infinite;}
.float-anim-2{animation:floatY 10s ease-in-out infinite reverse;}
.float-anim-3{animation:floatY 12s ease-in-out infinite;}
.float-anim-4{animation:floatY 9s ease-in-out infinite reverse;}

@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}

#intro-loader {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   background: #000;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   transition: opacity 0.8s ease, visibility 0.8s ease;
}
#intro-loader.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}
.intro-video-container {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}
.intro-video-container iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100vw;
   height: 56.25vw; 
   min-height: 100vh;
   min-width: 177.78vh; 
   border: none;
   pointer-events: none; 
}
#skip-intro-btn {
   position: fixed;
   bottom: 40px;
   right: 40px;
   z-index: 10000;
   animation: pulse 2s infinite;
}
@keyframes pulse {
   0% { box-shadow: 0 0 0 0 rgba(230, 181, 74, 0.4); }
   70% { box-shadow: 0 0 0 15px rgba(230, 181, 74, 0); }
   100% { box-shadow: 0 0 0 0 rgba(230, 181, 74, 0); }
}