*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--body);

    background:#fff;

    color:#111827;

    overflow-x:hidden;

}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.container{

    width:min(90%, var(--container));

    margin:auto;

}


.footer-wide{

width:min(96%,1800px);

margin:auto;

}

/* ================================= */
/* Announcement */
/* ================================= */

.announcement-bar{

    background:var(--secondary);

    padding:12px 0;

    font-size:14px;

    font-weight:600;
}

.announcement-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

/* ================================= */
/* Header */
/* ================================= */

.main-header{

background:
linear-gradient(
90deg,
#08143D,
#0B1F5B,
#08143D
) !important;

position:relative;

z-index:100;

border-bottom:
1px solid rgba(255,255,255,.08);

}

.header-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

height:105px;

}



.logo{

display:flex;

align-items:center;

gap:14px;

flex-shrink:0;
}



.logo-icon{

    font-size:40px;
}


.logo img{

width:52px;
height:52px;

object-fit:contain;

}

.logo-text h3{

    font-family:var(--heading);

    font-size:22px;

line-height:1;

color:white;

}

.logo-text span{

    font-size:12px;

    color:#ddd;
}

.main-nav{

display:flex;

align-items:center;

gap:38px;

margin-left:auto;

margin-right:auto;

}

.main-nav a{

color:white;

font-weight:600;

font-size:16px;

padding:10px 0;

position:relative;

transition:.3s;

}

.main-nav a:hover{

color:#00F5FF;

text-shadow:
0 0 15px rgba(0,245,255,.5);

}


.main-nav a{

position:relative;

}

.main-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:

linear-gradient(
90deg,
#00F5FF,
#8B5CF6
);

transition:.4s;

}


.main-nav a:hover::after{

width:100%;

}


/* ================================= */
/* Buttons */
/* ================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;
}

.btn-primary{

    overflow:hidden;

position:relative;

background:
linear-gradient(
135deg,
#D4AF37,
#F8D568
);

color:#111;

font-weight:700;

box-shadow:
0 10px 30px rgba(212,175,55,.35);

}


.btn-primary::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);

transition:.7s;

}


.btn-primary:hover::before{

left:120%;

}

.btn-primary:hover{

    transform:translateY(-3px);
}

.btn-outline{

    border:1px solid rgba(255,255,255,.3);

    color:white;
}

.btn-secondary{

   background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

    color:var(--primary);
}

.header-buttons{

display:flex;

align-items:center;

gap:10px;

flex-shrink:0;

margin-left:10px;

}


.theme-switcher{

display:flex;

gap:8px;

margin-left:20px;

}

.theme-btn{

width:36px;

height:36px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:14px;

background:
rgba(255,255,255,.08);

color:white;

}

.theme-btn:hover{

transform:scale(1.15);

box-shadow:
0 0 20px rgba(0,245,255,.5);

}


.btn-login{

height:58px;

padding:0 28px;

border-radius:999px;

background:transparent;

border:1px solid rgba(255,255,255,.15);

color:white;

transition:.3s;

}


.btn-login:hover{

border-color:#00F5FF;

color:#00F5FF;

}


.btn-register{

height:58px;

padding:0 34px;

border-radius:999px;

background:#E8C547;

color:#111;

font-weight:700;

box-shadow:
0 0 40px rgba(232,197,71,.35);

transition:.3s;

}


.btn-register:hover{

transform:
translateY(-2px);

box-shadow:
0 0 60px rgba(232,197,71,.55);

}


/* ================================= */
/* Hero */
/* ================================= */


.hero{

padding-top:0px;
}

.hero-section{

min-height:100vh;

position:relative;

overflow:hidden;

background:
radial-gradient(
circle at center,
#102B7A 0%,
#07153D 40%,
#030712 100%
);

}

.hero-section::before{

    content:"";

    position:absolute;

    width:800px;

    height:800px;

    background:rgba(212,175,55,.12);

    border-radius:50%;

    top:-250px;

    right:-250px;

    filter:blur(80px);
}


.hero-section::after{

content:"";

position:absolute;

inset:0;

background-image:

radial-gradient(white 1px, transparent 1px);

background-size:
60px 60px;

opacity:.40;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

min-height:100vh;
padding-top:80px;
padding-bottom:80px;

gap:20px;

}

.hero-content{

    color:white;
}

.hero-badge{

    display:inline-block;

    background:rgba(255,255,255,.1);

    border:1px solid rgba(255,255,255,.15);

    padding:10px 18px;

    border-radius:999px;

    margin-bottom:25px;
}

.hero-content h1{

font-family:var(--heading);

font-size:3.8rem;

line-height:1.15;

font-weight:700;

max-width:700px;

margin-bottom:25px;

background:
linear-gradient(
90deg,
#fff,
#00F5FF
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-content p{

    font-size:1.15rem;

    color:#ddd;

    max-width:650px;

    line-height:1.8;
}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;
}

.hero-features{

    margin-top:35px;

    display:flex;

    flex-wrap:wrap;

    gap:15px;
}

.hero-features span{

    background:rgba(255,255,255,.08);

    padding:10px 15px;

    border-radius:999px;
}

/* ================================= */
/* Hero Visual V2 */
/* ================================= */

.hero-visual{

position:relative;

height:780px;

width:780px;

display:flex;

justify-content:center;

align-items:center;

}

.hero-core{


left:50%;
top:50%;

translate:-50% -50%;

z-index:100;

width:250px;
height:250px;

border-radius:50%;

position:absolute;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:
linear-gradient(
135deg,
#00F5FF,
#8B5CF6
);

box-shadow:
0 0 60px rgba(0,245,255,.6),
0 0 120px rgba(139,92,246,.45),
0 0 220px rgba(0,245,255,.25);



animation:coreFloat 6s ease-in-out infinite;

}

.hero-core::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle,
rgba(255,255,255,.25),
transparent 70%
);

animation:
pulseGlow 4s ease infinite;

}

.core-inner{

position:relative;
z-index:101;

width:225px;
height:225px;

border-radius:50%;

background:
radial-gradient(
circle at center,
#08112F,
#020617
);

overflow:hidden;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.core-inner::before{

content:"";

position:absolute;

inset:0;

background:

repeating-linear-gradient(
0deg,
transparent,
transparent 14px,
rgba(255,255,255,.03) 15px
),

repeating-linear-gradient(
90deg,
transparent,
transparent 14px,
rgba(255,255,255,.03) 15px
);

border-radius:50%;

}

.core-inner span{

font-size:11px;

letter-spacing:3px;

color:#00F5FF;

}


.core-inner h2{

font-size:42px;

font-weight:800;

letter-spacing:2px;

color:white;

text-shadow:
0 0 25px rgba(0,245,255,.55);

}


.core-inner .futureverse{

font-size:12px;

letter-spacing:5px;

font-weight:700;

color:#00F5FF;

}



.orbit-1{

width:320px;
height:320px;
animation:rotateOrbit 20s linear infinite;
z-index:1;


}

.orbit-2{
width:470px;
height:470px;
animation:rotateOrbit 30s linear infinite reverse;
z-index:1;
}

.orbit-3{
width:620px;
height:620px;
animation:rotateOrbit 40s linear infinite;
z-index:1;
}

.orbit-node{

position:absolute;

width:90px;
height:90px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

font-size:13px;

font-weight:600;

color:white;

background:
radial-gradient(
circle at 30% 30%,
rgba(255,255,255,.35),
rgba(255,255,255,.08)
);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.15);

box-shadow:
0 0 25px rgba(0,245,255,.15);

transition:.4s;

}

.orbit-node:hover{

transform:
scale(1.1);

box-shadow:
0 0 40px rgba(0,245,255,.45);

}

.orbit-node::before{

content:"";

position:absolute;

width:120px;
height:24px;

border:

2px solid rgba(255,255,255,.15);

border-radius:50%;

transform:
rotate(-20deg);

}

.node-ai{
top:100px;
left:180px;
}

.node-coding{
top:120px;
right:140px;
}

.node-robotics{
bottom:150px;
left:130px;
}

.node-olympiad{
top:40px;
left:50%;
transform:translateX(-50%);
}

.node-scholarship{
top:260px;
right:10px;
}

.node-career{
bottom:220px;
right:60px;
}

.node-students{
bottom:40px;
left:50%;
transform:translateX(-50%);
}

.node-schools{
top:260px;
left:0;
}

.node-rankings{
bottom:220px;
left:40px;
}



/* ================================= */
/* Stats */
/* ================================= */

.stats-section{

    padding:80px 0;

    background:#fff;
}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.stat-card{

background:

linear-gradient(
135deg,
rgba(255,255,255,.95),
rgba(255,255,255,.75)
);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.2);

padding:35px;

border-radius:24px;

box-shadow:var(--shadow-md);

transition:.4s;

}

.stat-card:hover{

transform:

translateY(-12px)

scale(1.03);
}

.stat-card h2{

    font-size:2.2rem;

    color:var(--primary);
}

.stat-card p{

    color:var(--gray);
}

/* ================================= */
/* Sections */
/* ================================= */

.section-heading{

    text-align:center;

    margin-bottom:60px;
}

.section-heading span{

    color:var(--secondary);

    font-weight:600;
}

.section-heading h2{

color:#07153D;

font-size:3rem;

font-family:var(--heading);

margin-top:15px;

}

/* ================================= */
/* Why IOF */
/* ================================= */

.why-iof-section{

    padding:100px 0;

    background:#f8fafc;
}

.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.feature-card{

  background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

    padding:35px;

    border-radius:24px;

    text-align:center;

    transition:.3s;

    box-shadow:var(--shadow-sm);
}

.feature-card:hover{

   transform:

translateY(-12px)

scale(1.03);
}

.feature-card .icon{

    font-size:55px;

    margin-bottom:15px;
}

.feature-card h3{

    margin-bottom:15px;
}

/* ================================= */
/* Journey */
/* ================================= */

.journey-section{

    padding:100px 0;

    background:var(--dark);
}

.light h2,
.light span{

    color:white;
}

.journey-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:15px;
}

.journey-step{

    background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

    padding:20px;

    text-align:center;

    border-radius:16px;

    font-weight:600;
}

/* ================================= */
/* Placeholder */
/* ================================= */

.coming-sections{

    padding:100px 0;
}

.placeholder-card{

    background:#f3f4f6;

    padding:40px;

    margin-bottom:20px;

    border-radius:20px;

    text-align:center;

    font-weight:600;
}


.floating-icon{

position:absolute;

font-size:42px;

animation:floatIcon 5s ease-in-out infinite;

}

.icon-ai{

top:20px;
right:120px;

}

.icon-rocket{

top:180px;
left:0;

}

.icon-medal{

bottom:100px;
right:0;

}

.icon-certificate{

bottom:50px;
left:120px;

}


@keyframes float{

0%,100%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-15px);

}

}

@keyframes orbFloat{

0%,100%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-20px);

}

}

@keyframes floatIcon{

0%,100%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-20px);

}

}


.orbit{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

border-radius:50%;

border:
1px solid rgba(0,245,255,.18);

box-shadow:

0 0 20px rgba(0,245,255,.15),

inset 0 0 25px rgba(0,245,255,.08);

pointer-events:none;

}

.orbit::before{

content:"";

position:absolute;

inset:-2px;

border-radius:50%;

background:

conic-gradient(

transparent,
rgba(0,245,255,.4),
transparent,
transparent

);

animation:
rotateTrail 6s linear infinite;

filter:blur(8px);

}

.section-divider{

height:2px;

width:100%;

background:

linear-gradient(
90deg,
transparent,
#00F5FF,
transparent
);

margin:80px 0;

}


.skills-universe{

padding:100px 0;

background:#0A1028;

text-align:center;

}

.skills-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;

}

.skill-card{

padding:35px;

border-radius:24px;

text-align:center;

font-size:1.1rem;

font-weight:600;

color:white;

background:
rgba(255,255,255,.06);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.1);

transition:.4s;

}

.skill-card:hover{

transform:
translateY(-10px);

box-shadow:
0 0 30px rgba(0,245,255,.35);

}




.futureverse{

display:block;

font-size:10px;

letter-spacing:3px;

color:#00F5FF;

}

.logo-text small{

display:block;

font-size:11px;

color:#d1d5db;

margin-top:3px;

}


.skills-universe .section-heading h2,
.journey-section .section-heading h2{

color:white;

}

.trust-bar{

background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

padding:30px 0;

border-top:
1px solid #eee;

border-bottom:
1px solid #eee;

}

.trust-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:20px;

text-align:center;

font-weight:600;

color:#07153D;

}

.hero-badge{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:25px;

}

.hero-badge span{

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.15);

padding:10px 16px;

border-radius:999px;

font-size:14px;

color:white;

}

@keyframes coreFloat{

0%,100%{

translate:-50% -50%;

}

50%{

translate:-50% calc(-50% - 15px);

}

}


@keyframes rotateOrbit{

from{

transform:
translate(-50%,-50%)
rotate(0deg);

}

to{

transform:
translate(-50%,-50%)
rotate(360deg);

}

}


@keyframes pulseGlow{

0%,100%{

opacity:.5;

}

50%{

opacity:1;

}

}


.planet{

position:absolute;

width:110px;
height:110px;

border-radius:50%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:8px;

font-size:14px;

font-weight:700;

color:white;

z-index:20;

overflow:visible;

backdrop-filter:blur(20px);

border:2px solid rgba(255,255,255,.15);



transition:.4s;

overflow:hidden;

box-shadow:
0 0 25px rgba(255,255,255,.15),
0 0 50px rgba(255,255,255,.10);

backdrop-filter:blur(25px);

}


.planet-ai{

top:-45px;
left:50%;

transform:
translateX(-50%);

}

.planet-coding{

right:-45px;
top:50%;

transform:
translateY(-50%);

}

.planet-robotics{

bottom:-45px;
left:50%;

transform:
translateX(-50%);

}


.planet-olympiad{

top:-45px;
left:50%;

transform:
translateX(-50%);

}

.planet-scholarship{

right:-45px;
top:50%;

transform:
translateY(-50%);

}

.planet-career{

bottom:-45px;
left:50%;

transform:
translateX(-50%);

}


.planet-schools{

left:-45px;
top:50%;

transform:
translateY(-50%);

}

.planet-rankings{

bottom:-45px;
left:50%;

transform:
translateX(-50%);

}

.planet-students{

right:-45px;
top:50%;

transform:
translateY(-50%);

}


.planet-ai{

background:
radial-gradient(
circle at 30% 30%,
#d8b4fe,
#9333ea
);

box-shadow:
0 0 35px #9333ea;

}

.planet-coding{

background:
radial-gradient(
circle at 30% 30%,
#67e8f9,
#0891b2
);

box-shadow:
0 0 35px #06b6d4;

}

.planet-robotics{

background:
radial-gradient(
circle at 30% 30%,
#fdba74,
#ea580c
);

box-shadow:
0 0 35px #ea580c;

}

.planet-olympiad{

background:
radial-gradient(
circle at 30% 30%,
#93c5fd,
#2563eb
);

box-shadow:
0 0 35px #2563eb;

}

.planet-scholarship{

background:
radial-gradient(
circle at 30% 30%,
#fde68a,
#f59e0b
);

box-shadow:
0 0 35px #f59e0b;

}

.planet-career{

background:
radial-gradient(
circle at 30% 30%,
#f9a8d4,
#db2777
);

box-shadow:
0 0 35px #db2777;

}

.planet-schools{

background:
radial-gradient(
circle at 30% 30%,
#86efac,
#16a34a
);

box-shadow:
0 0 35px #16a34a;

}

.planet-rankings{

background:
radial-gradient(
circle at 30% 30%,
#a5b4fc,
#4f46e5
);

box-shadow:
0 0 35px #4f46e5;

}

.planet-students{

background:
radial-gradient(
circle at 30% 30%,
#5eead4,
#0f766e
);

box-shadow:
0 0 35px #14b8a6;

}


.planet::before{

content:"";

position:absolute;

width:140px;
height:32px;

border-radius:50%;

border:2px solid rgba(255,255,255,.25);

top:50%;
left:50%;

transform:
translate(-50%,-50%)
rotate(-20deg);

pointer-events:none;

}

.planet::after{

content:"";

position:absolute;

inset:-15px;

border-radius:50%;

background:inherit;

filter:blur(25px);

opacity:.4;

z-index:-1;

}



.planet:hover{

transform:
scale(1.12);

box-shadow:
0 0 40px rgba(255,255,255,.35);

}


.planet::after{

content:"";

position:absolute;

top:12px;
left:18px;

width:30px;
height:30px;

border-radius:50%;

background:
rgba(255,255,255,.35);

filter:blur(4px);

}


.planet-icon{

font-size:40px;

line-height:1;

margin-bottom:4px;

filter:
drop-shadow(0 0 15px rgba(255,255,255,.6));

}


.planet span{

font-size:16px;

font-weight:800;

color:white;

text-shadow:
0 0 12px rgba(255,255,255,.4);

}


/* ===================================== */
/* HERO V3 */
/* ===================================== */

.pulse-ring{

position:absolute;

border-radius:50%;

border:2px solid rgba(0,245,255,.25);

left:50%;
top:50%;

translate:-50% -50%;

animation:pulseRing 4s linear infinite;

}

.ring-1{

width:280px;
height:280px;

}

.ring-2{

width:340px;
height:340px;

animation-delay:2s;

}

@keyframes pulseRing{

0%{

opacity:1;
transform:translate(-50%,-50%) scale(.9);

}

100%{

opacity:0;
transform:translate(-50%,-50%) scale(1.2);

}

}

.core-grid{

position:absolute;

inset:0;

border-radius:50%;

background:

repeating-linear-gradient(
0deg,
transparent,
transparent 15px,
rgba(0,245,255,.03) 16px
),

repeating-linear-gradient(
90deg,
transparent,
transparent 15px,
rgba(0,245,255,.03) 16px
);

}

.core-dots{

position:absolute;

bottom:25px;

display:flex;

gap:8px;

}

.core-dots span{

width:8px;
height:8px;

border-radius:50%;

background:#00F5FF;

box-shadow:
0 0 12px #00F5FF;

animation:blink 2s infinite;

}

.core-dots span:nth-child(2){

animation-delay:.4s;

}

.core-dots span:nth-child(3){

animation-delay:.8s;

}

@keyframes blink{

0%,100%{

opacity:.4;

}

50%{

opacity:1;

}

}



.floating-stat{

position:absolute;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.15);

padding:18px 22px;

border-radius:20px;

display:flex;

flex-direction:column;

gap:4px;

color:white;

z-index:120;

box-shadow:
0 0 30px rgba(0,245,255,.12);

animation:
floatStat 6s ease-in-out infinite;

}

.floating-stat strong{

font-size:20px;

color:#00F5FF;

}

.floating-stat span{

font-size:13px;

}

.stat-1{

top:80px;
left:40px;

}

.stat-2{

top:120px;
right:40px;

animation-delay:1s;

}

.stat-3{

bottom:120px;
left:0;

animation-delay:2s;

}

.stat-4{

bottom:80px;
right:0;

animation-delay:3s;

}

@keyframes floatStat{

0%,100%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-12px);

}

}


@keyframes rotateTrail{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



/* ================================= */
/* SUBJECTS SECTION */
/* ================================= */

.subjects-section{

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f8fafc
);

}

.subjects-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.subject-card{

padding:35px;

border-radius:28px;

background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

box-shadow:
0 20px 50px rgba(0,0,0,.08);

transition:.4s;

position:relative;

overflow:hidden;

}

.subject-card:hover{

transform:
translateY(-12px);

}

.subject-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

}

.primary::before{

background:#00F5FF;

}

.secondary::before{

background:#D4AF37;

}

.higher::before{

background:#8B5CF6;

}

.subject-top{

margin-bottom:25px;

}

.level-badge{

display:inline-block;

padding:8px 14px;

border-radius:999px;

font-size:12px;

font-weight:700;

background:
rgba(7,21,61,.08);

color:#07153D;

margin-bottom:15px;

}

.subject-card h3{

font-size:26px;

color:#07153D;

margin-bottom:15px;

}

.subject-card ul{

list-style:none;

}

.subject-card li{

padding:12px 0;

border-bottom:
1px solid rgba(0,0,0,.06);

font-weight:500;

}

.future-skill-strip{

margin-top:60px;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.future-skill-strip div{

padding:12px 20px;

border-radius:999px;

background:
#07153D;

color:white;

font-weight:600;

transition:.3s;

}

.future-skill-strip div:hover{

transform:
translateY(-4px);

box-shadow:
0 0 25px rgba(0,245,255,.3);

}


/* ================================= */
/* SCHOLARSHIP SECTION */
/* ================================= */

.scholarship-section{

padding:120px 0;

background:
linear-gradient(
180deg,
#07153D,
#0A1028
);

position:relative;

overflow:hidden;

}

.scholarship-section .section-heading h2{

color:white;

}

.scholarship-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.scholarship-card{

position:relative;

padding:40px;

border-radius:30px;

overflow:hidden;

text-align:center;

color:white;

backdrop-filter:blur(20px);

transition:.4s;

}

.scholarship-card:hover{

transform:
translateY(-12px);

}

.scholarship-medal{

font-size:70px;

margin-bottom:25px;

}

.scholarship-card h3{

font-size:30px;

margin-bottom:15px;

}

.scholarship-card p{

line-height:1.8;

opacity:.9;

margin-bottom:25px;

}

.scholarship-footer{

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

font-size:13px;

}

.gold-card{

background:
linear-gradient(
135deg,
rgba(212,175,55,.28),
rgba(255,215,0,.08)
);

border:
1px solid rgba(255,215,0,.35);

box-shadow:
0 0 50px rgba(255,215,0,.20);

}

.silver-card{

background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.05)
);

border:
1px solid rgba(255,255,255,.18);

box-shadow:
0 0 40px rgba(255,255,255,.10);

}

.bronze-card{

background:
linear-gradient(
135deg,
rgba(139,92,246,.22),
rgba(0,245,255,.08)
);

border:
1px solid rgba(139,92,246,.25);

box-shadow:
0 0 45px rgba(139,92,246,.15);

}


/* ================================= */
/* RANKINGS SECTION */
/* ================================= */

.rankings-section{

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f8fafc
);

}

.ranking-levels{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;

margin-top:60px;

}

.ranking-card{

background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

border-radius:30px;

padding:40px 30px;

text-align:center;

transition:.4s;

position:relative;

overflow:hidden;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

.ranking-card:hover{

transform:
translateY(-12px);

}

.rank-icon{

font-size:60px;

margin-bottom:20px;

}

.ranking-card h3{

font-size:28px;

margin-bottom:15px;

color:#07153D;

}

.ranking-card p{

line-height:1.8;

color:#6B7280;

}

.national{

border-top:5px solid #D4AF37;

}

.state{

border-top:5px solid #00F5FF;

}

.district{

border-top:5px solid #8B5CF6;

}

.school{

border-top:5px solid #22C55E;

}


/* ================================= */
/* CAREER HUB */
/* ================================= */

.career-hub-section{

padding:120px 0;

background:
linear-gradient(
180deg,
#07153D,
#020617
);

position:relative;

overflow:hidden;

}

.career-hub-section .section-heading h2{

color:white;

}

.career-flow{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin-top:70px;

flex-wrap:wrap;

}

.career-step{

width:240px;

min-height:280px;

padding:35px;

border-radius:28px;

text-align:center;

background:
rgba(255,255,255,.06);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.10);

color:white;

transition:.4s;

}

.career-step:hover{

transform:
translateY(-12px);

box-shadow:
0 0 40px rgba(0,245,255,.18);

}

.career-icon{

font-size:60px;

margin-bottom:20px;

}

.career-step h3{

font-size:24px;

margin-bottom:15px;

}

.career-step p{

line-height:1.8;

color:#d1d5db;

}

.career-arrow{

font-size:45px;

font-weight:700;

color:#00F5FF;

}


/* ================================= */
/* PARTNER SCHOOLS */
/* ================================= */

.schools-section{

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f3f7fb
);

}

.schools-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

margin-top:60px;

}

.school-card{

background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

padding:40px 30px;

border-radius:28px;

text-align:center;

transition:.4s;

box-shadow:
0 15px 45px rgba(0,0,0,.08);

border:
1px solid rgba(0,0,0,.04);

}

.school-card:hover{

transform:
translateY(-12px);

box-shadow:
0 25px 60px rgba(0,0,0,.12);

}

.school-icon{

font-size:60px;

margin-bottom:20px;

}

.school-card h3{

font-size:24px;

margin-bottom:15px;

color:#07153D;

}

.school-card p{

line-height:1.8;

color:#6B7280;

}


/* ================================= */
/* TESTIMONIALS */
/* ================================= */

.testimonials-section{

padding:120px 0;

background:#07153D;

}

.testimonial-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.testimonial-card{

padding:40px;

border-radius:30px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

color:white;

backdrop-filter:blur(20px);

}

.testimonial-card p{

line-height:1.9;

font-size:16px;

margin-bottom:20px;

}

.testimonial-card h4{

color:#00F5FF;

}


/* ========================= */
/* CTA */
/* ========================= */

.footer-cta{

padding:120px 0;

text-align:center;

background:

linear-gradient(
135deg,
#07153D,
#0B1F5B
);

}

.footer-cta h2{

font-size:4rem;

color:white;

margin-bottom:20px;

font-family:var(--heading);

}

.footer-cta p{

font-size:1.2rem;

color:#d1d5db;

margin-bottom:40px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

}

.btn-outline-light{

border:1px solid rgba(255,255,255,.25);

color:white;

}

/* ========================= */
/* FOOTER */
/* ========================= */

.main-footer{

background:#020617;

padding-top:120px;

padding-bottom:40px;

padding-left:40px;

padding-right:40px;

position:relative;

overflow:hidden;

}

.footer-watermark{

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:100%;

text-align:center;

font-size:clamp(10rem,18vw,22rem);

font-weight:900;

letter-spacing:12px;

line-height:.8;

white-space:nowrap;

color:rgba(255,255,255,.02);

pointer-events:none;

user-select:none;

z-index:0;

}

.footer-top{

display:grid;

grid-template-columns:
3fr 1fr 1fr 1fr;

gap:70px;

padding-top:90px;

position:relative;

z-index:2;

}

.footer-brand h3{

font-size:32px;

color:white;

margin-bottom:20px;

}

.footer-brand p{

color:#9ca3af;

line-height:1.8;

max-width:420px;

}

.footer-column{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-column h4{

color:white;

margin-bottom:10px;

}

.footer-column a{

color:#9ca3af;

transition:.3s;

}

.footer-column a:hover{

color:#00F5FF;

}

.footer-socials{

display:flex;

gap:15px;

margin-top:30px;

}

.footer-socials a{

width:45px;
height:45px;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

background:
rgba(255,255,255,.08);

color:white;

}

.footer-partners{

margin-top:80px;

padding-top:40px;

border-top:
1px solid rgba(255,255,255,.08);

text-align:center;

}

.footer-partners span{

color:#d1d5db;

display:block;

margin-bottom:25px;

}

.partner-logos{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

}

.partner-logos div{

padding:12px 24px;

border-radius:999px;

background:
rgba(255,255,255,.05);

color:white;

font-size:14px;

}

.footer-bottom{

margin-top:50px;

padding:30px 0;

border-top:
1px solid rgba(255,255,255,.08);

text-align:center;

}

.footer-bottom p{

color:#6b7280;

}


.footer-container{

width:min(98%,1900px);

margin:auto;

position:relative;

z-index:2;

}


.footer-watermark{

z-index:0;


}

.footer-top,
.footer-partners,
.footer-bottom{

position:relative;

z-index:2;

}


.footer-brand{

max-width:450px;

}


.main-footer::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(0,245,255,.5),
transparent
);

}


/* ================================= */
/* DEMO ZONE */
/* ================================= */

.demo-zone-section{

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f5f8ff
);

}

.demo-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

margin-top:60px;

}

.demo-card{

background:

linear-gradient(
180deg,
#ffffff,
#eef5ff
);

border-radius:30px;

padding:35px;

text-align:center;

position:relative;

border:1px solid rgba(0,245,255,.08);

overflow:hidden;

transition:.4s;

cursor:pointer;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

.demo-card:hover{

transform:
translateY(-12px)
scale(1.03);

box-shadow:

0 0 40px rgba(0,245,255,.15),

0 25px 60px rgba(0,0,0,.15);

}

.demo-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
#00F5FF,
#8B5CF6,
#D4AF37
);

}

.demo-icon{

font-size:60px;

margin-bottom:20px;

}


.demo-zone-section .section-heading h2{

font-size:clamp(2.5rem,4vw,4.5rem);

}


.demo-card h3{

font-size:24px;

margin-bottom:15px;

color:#07153D;

}

.demo-card p{

line-height:1.8;

color:#6B7280;

margin-bottom:25px;

}

.demo-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
linear-gradient(
135deg,
#07153D,
#0B1F5B
);

color:white;

font-size:13px;

font-weight:700;

}


.main-header.scrolled{

background:
rgba(8,20,60,.92);

backdrop-filter:blur(30px);

box-shadow:
0 20px 80px rgba(0,0,0,.35);

}


.main-nav a{

position:relative;

font-size:16px;

font-weight:600;

letter-spacing:.2px;

padding:8px 0;

transition:.3s;

}


.main-nav a:hover{

color:#00F5FF;

}


.main-nav a::after{

content:"";

position:absolute;

left:50%;

bottom:-8px;

transform:translateX(-50%);

width:0;

height:2px;

border-radius:999px;

background:#00F5FF;

transition:.3s;

}


.main-nav a:hover::after{

width:100%;

}


.reveal{

opacity:0;

transform:translateY(60px);

transition:

all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}