/* ================================================================
   CIMET JUKU — Full Design System
   Navy + Gold. Clean separation. No mixing. No AI slop.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Syne:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --navy:        #0d2e50;
  --navy-mid:    #123d6b;
  --navy-light:  #1a5090;
  --gold:        #f4b425;
  --gold-bright: #ffc93c;
  --gold-dim:    #c8920f;
  --gold-pale:   #fef3d0;
  --white:       #ffffff;
  --off-white:   #f7f8fc;
  --border:      #dde4ef;
  --text-dark:   #091929;
  --text-body:   #354a61;
  --text-muted:  #6b82a0;
  --max-w:       1160px;
  --r-sm:  6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --sh-sm:  0 2px 10px rgba(9,25,41,.07);
  --sh-md:  0 8px 30px rgba(9,25,41,.11);
  --sh-lg:  0 20px 60px rgba(9,25,41,.17);
  --sh-gold:0 8px 30px rgba(244,180,37,.35);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --sp-xs:.5rem; --sp-sm:1rem; --sp-md:1.75rem; --sp-lg:3rem; --sp-xl:5.5rem; --sp-2xl:9rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif;font-size:1rem;line-height:1.75;color:var(--text-body);background:var(--off-white);overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;color:var(--text-dark);line-height:1.15;font-weight:700}
p{max-width:66ch;color:var(--text-body)}

.wrap{width:min(var(--max-w),100% - 3rem);margin-inline:auto}
.section-pad{padding-block:var(--sp-xl)}

.g-bar{display:block;width:44px;height:3px;background:var(--gold);border-radius:var(--r-full);margin-block:var(--sp-sm) var(--sp-md)}
.g-bar.center{margin-inline:auto}

.eyebrow{
  display:inline-block;font-family:'Syne',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-mid);background:rgba(18,61,107,.07);
  padding:.3rem .9rem;border-radius:var(--r-full);margin-bottom:var(--sp-sm);
}
.eyebrow.on-dark{color:var(--gold);background:rgba(244,180,37,.12);border:1px solid rgba(244,180,37,.2)}

.sec-head{max-width:600px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.5vw,2.7rem);letter-spacing:-.02em;margin-bottom:.6rem}
.sec-head p{font-size:1.05rem}
.sec-head.on-dark h2{color:var(--white)}
.sec-head.on-dark p{color:rgba(255,255,255,.65)}

/* ─ NAV ─────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:300;background:rgba(9,25,41,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(244,180,37,.15);box-shadow:0 4px 30px rgba(0,0,0,.25)}
.nav-container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);padding:1.1rem var(--sp-md);max-width:var(--max-w);margin-inline:auto}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.65rem;font-weight:700;color:var(--white);letter-spacing:-.01em;flex-shrink:0}
.logo span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:.1rem;flex-wrap:wrap}
.nav-links a{font-family:'Syne',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.75);padding:.4rem .65rem;border-radius:var(--r-sm);transition:color .2s,background .2s;white-space:nowrap}
.nav-links a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav-links a.nav-cta{background:var(--gold);color:var(--navy);font-weight:700;padding:.42rem 1.1rem;border-radius:var(--r-full);transition:background .2s,transform .2s}
.nav-links a.nav-cta:hover{background:var(--gold-bright);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:320}
.bar{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.hamburger.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active .bar:nth-child(2){opacity:0}
.hamburger.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:290;opacity:0;pointer-events:none;transition:opacity .3s}
.nav-overlay.active{opacity:1;pointer-events:auto}

/* ─ HERO ─────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--navy);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(244,180,37,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,180,37,.04) 1px,transparent 1px);background-size:60px 60px;animation:gridDrift 25s linear infinite}
@keyframes gridDrift{from{background-position:0 0}to{background-position:60px 60px}}
.hero-glow-1{position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(244,180,37,.10) 0%,transparent 60%);top:-200px;left:-200px;pointer-events:none;animation:glowPulse 7s ease-in-out infinite alternate}
.hero-glow-2{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(26,80,144,.45) 0%,transparent 65%);bottom:-100px;right:-100px;pointer-events:none;animation:glowPulse 9s ease-in-out infinite alternate-reverse}
@keyframes glowPulse{from{transform:scale(1)}to{transform:scale(1.18)}}
.orb{position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(244,180,37,.1)}
.orb-1{width:320px;height:320px;top:8%;right:6%;animation:floatY 11s ease-in-out infinite}
.orb-2{width:180px;height:180px;bottom:12%;left:4%;animation:floatY 8s ease-in-out infinite reverse}
.orb-3{width:80px;height:80px;top:55%;right:20%;background:rgba(244,180,37,.05);animation:floatY 6s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-24px) rotate(6deg)}}

.hero-inner{position:relative;z-index:2;width:min(var(--max-w),100% - 3rem);margin-inline:auto;padding-block:var(--sp-2xl) var(--sp-xl);display:grid;gap:var(--sp-xl)}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:'Syne',sans-serif;font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);background:rgba(244,180,37,.1);border:1px solid rgba(244,180,37,.22);padding:.4rem 1rem;border-radius:var(--r-full);margin-bottom:var(--sp-md);width:fit-content;animation:heroIn .8s var(--ease) both}
.hero-tag-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-headline{font-size:clamp(2.8rem,7vw,5.5rem);color:var(--white);letter-spacing:-.03em;line-height:1.05;animation:heroIn .9s .1s var(--ease) both}
.hero-headline em{font-style:normal;color:var(--gold);position:relative}
.hero-headline em::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;background:var(--gold);opacity:.35;border-radius:var(--r-full)}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.68);max-width:55ch;line-height:1.85;animation:heroIn 1s .22s var(--ease) both;margin-block:var(--sp-md) var(--sp-lg)}
.hero-btns{display:flex;gap:var(--sp-sm);flex-wrap:wrap;animation:heroIn 1s .35s var(--ease) both}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);overflow:hidden;animation:heroIn 1s .5s var(--ease) both}
.stat{padding:var(--sp-md) var(--sp-sm);text-align:center;background:rgba(9,25,41,.65);backdrop-filter:blur(6px);transition:background .3s}
.stat:hover{background:rgba(244,180,37,.08)}
.stat-n{display:block;font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:var(--gold);line-height:1}
.stat-l{display:block;font-family:'Syne',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:.4rem}
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ─ BUTTONS ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.04em;padding:.85rem 1.8rem;border-radius:var(--r-md);border:2px solid transparent;cursor:pointer;transition:transform .22s var(--ease-back),box-shadow .22s,background .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold);box-shadow:var(--sh-gold)}
.btn-gold:hover{background:var(--gold-bright);box-shadow:0 14px 40px rgba(244,180,37,.45)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn-navy{background:var(--navy-mid);color:var(--white);border-color:var(--navy-mid);box-shadow:var(--sh-md)}
.btn-navy:hover{background:var(--navy-light);box-shadow:var(--sh-lg)}
.btn-outline-gold{background:transparent;color:var(--navy);border-color:var(--navy-mid)}
.btn-outline-gold:hover{background:var(--navy-mid);color:var(--white)}

/* ─ FEATURE CARDS ────────────────────────────────────────────── */
.features-section{background:var(--white)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg)}
.f-card{position:relative;overflow:hidden;background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.f-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy-mid),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.f-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:rgba(18,61,107,.18)}
.f-card:hover::after{transform:scaleX(1)}
.f-icon{width:52px;height:52px;background:var(--gold-pale);border:1px solid rgba(244,180,37,.3);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:var(--sp-md);transition:transform .3s var(--ease-back)}
.f-card:hover .f-icon{transform:scale(1.12) rotate(-5deg)}
.f-card h3{font-family:'Syne',sans-serif;font-size:1.03rem;font-weight:700;color:var(--text-dark);margin-bottom:.5rem}
.f-card p{font-size:.92rem;line-height:1.7}

/* ─ ABOUT ────────────────────────────────────────────────────── */
.about-section{background:var(--off-white)}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center;margin-top:var(--sp-lg)}
.about-text p{font-size:1.04rem;line-height:1.85;max-width:100%;margin-bottom:var(--sp-sm)}
.about-cards-stack{display:flex;flex-direction:column;gap:var(--sp-sm)}
.a-card{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--r-md);padding:var(--sp-md);box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s,border-left-color .3s}
.a-card:hover{transform:translateX(7px);box-shadow:var(--sh-md);border-left-color:var(--navy-mid)}
.a-card h3{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--navy-mid);margin-bottom:.4rem}
.a-card p{font-size:.92rem}

/* ─ SUBJECTS ─────────────────────────────────────────────────── */
.subjects-section{background:var(--white)}
.subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg)}
.s-card{background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-md);display:flex;flex-direction:column;gap:.4rem;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s}
.s-card:hover{transform:translateY(-7px) scale(1.01);box-shadow:var(--sh-md);border-color:var(--navy-mid);background:var(--white)}
.s-icon{font-size:2rem;margin-bottom:.2rem}
.s-card h3{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:700;color:var(--navy-mid)}
.s-card p{font-size:.87rem;color:var(--text-muted)}

/* ─ WHY CHOOSE ───────────────────────────────────────────────── */
.why-section{background:var(--navy);position:relative;overflow:hidden}
.why-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 0% 50%,rgba(244,180,37,.08),transparent 55%),radial-gradient(ellipse 40% 50% at 100% 0%,rgba(26,80,144,.5),transparent 60%);pointer-events:none}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg);position:relative;z-index:1}
.w-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);transition:background .3s,border-color .3s,transform .35s var(--ease)}
.w-card:hover{background:rgba(255,255,255,.08);border-color:rgba(244,180,37,.3);transform:translateY(-7px)}
.w-num{display:block;font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:700;color:rgba(244,180,37,.18);line-height:1;margin-bottom:.3rem;transition:color .3s}
.w-card:hover .w-num{color:rgba(244,180,37,.35)}
.w-card h3{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.w-card p{font-size:.9rem;color:rgba(255,255,255,.6)}

/* ─ SCHEDULE ─────────────────────────────────────────────────── */
.schedule-section{background:var(--off-white)}
.schedule-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);margin-top:var(--sp-lg)}
.sched-card,.fees-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);box-shadow:var(--sh-sm)}
.sched-card h3,.fees-card h3{font-family:'Syne',sans-serif;font-size:1.03rem;font-weight:700;color:var(--navy-mid);padding-bottom:var(--sp-sm);border-bottom:2px solid var(--gold-pale);margin-bottom:var(--sp-md)}
.sched-card ul li{display:flex;flex-direction:column;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.93rem}
.sched-card ul li:last-child{border:none}
.sched-card ul li strong{color:var(--text-dark);margin-bottom:.15rem}
.fee-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border);font-size:.95rem}
.fee-row:last-child{border:none}
.fee-amt{font-weight:700;color:var(--navy-mid);font-size:1.05rem}
.fee-total-box{background:var(--navy);color:var(--white);border-radius:var(--r-md);padding:var(--sp-sm) var(--sp-md);margin-top:var(--sp-sm);display:flex;justify-content:space-between;align-items:center}
.fee-total-box span:last-child{font-size:1.4rem;font-weight:700;color:var(--gold)}

/* ─ EXAMS & TESTS ────────────────────────────────────────────── */
.exams-section{background:var(--off-white)}
.exams-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg)}
.exam-info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.exam-info-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy-mid),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.exam-info-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.exam-info-card:hover::after{transform:scaleX(1)}
.ei-icon{font-size:2.4rem;display:block;margin-bottom:var(--sp-sm);transition:transform .3s var(--ease-back)}
.exam-info-card:hover .ei-icon{transform:scale(1.15) rotate(-6deg)}
.exam-info-card h3{font-family:'Syne',sans-serif;font-size:1.03rem;font-weight:700;color:var(--navy-mid);margin-bottom:.5rem}
.exam-info-card p{font-size:.92rem;line-height:1.7}

/* How it works */
.steps-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-top:var(--sp-lg)}
.step-item{padding:var(--sp-lg) var(--sp-md);text-align:center;border-right:1px solid var(--border);transition:background .3s}
.step-item:last-child{border-right:none}
.step-item:hover{background:var(--gold-pale)}
.step-badge{width:44px;height:44px;background:var(--navy);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;margin:0 auto var(--sp-sm)}
.step-item h4{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--navy-mid);margin-bottom:.3rem}
.step-item p{font-size:.82rem;margin-inline:auto;color:var(--text-muted)}

/* ─ EXAM CODE ENTRY ──────────────────────────────────────────── */
.exam-gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);position:relative;overflow:hidden;padding:var(--sp-lg)}
.exam-gate-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 20% 20%,rgba(244,180,37,.09),transparent 55%),radial-gradient(ellipse 40% 50% at 80% 80%,rgba(26,80,144,.5),transparent 55%);pointer-events:none;z-index:0}
.exam-gate-wrap .grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(244,180,37,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(244,180,37,.035) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}
.exam-gate-box{position:relative;z-index:2;background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:var(--sp-xl) var(--sp-lg);width:min(480px,100%);text-align:center;box-shadow:0 40px 80px rgba(0,0,0,.35),0 0 0 1px rgba(244,180,37,.08) inset;animation:heroIn .9s var(--ease) both}
.gate-logo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:var(--white);margin-bottom:var(--sp-lg);display:block}
.gate-logo span{color:var(--gold)}
.gate-icon{font-size:3rem;margin-bottom:var(--sp-sm);display:block;animation:floatY 4s ease-in-out infinite}
.exam-gate-box h1{font-size:2rem;color:var(--white);margin-bottom:.6rem}
.exam-gate-box>p{color:rgba(255,255,255,.58);font-size:.95rem;margin-inline:auto;margin-bottom:var(--sp-lg)}
.gate-input-wrap{display:flex;flex-direction:column;gap:var(--sp-sm);margin-bottom:var(--sp-md)}
.gate-input-wrap input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-md);padding:.9rem 1.2rem;color:var(--white);font-family:'Inter',sans-serif;font-size:1rem;text-align:center;letter-spacing:.05em;transition:border-color .2s,background .2s,box-shadow .2s;width:100%}
.gate-input-wrap input::placeholder{color:rgba(255,255,255,.32)}
.gate-input-wrap input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.11);box-shadow:0 0 0 3px rgba(244,180,37,.18)}
.gate-divider{display:flex;align-items:center;gap:.75rem;margin-block:var(--sp-sm);color:rgba(255,255,255,.25);font-size:.8rem;font-family:'Syne',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.gate-divider::before,.gate-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}

/* Exam in progress section */
.exam-section{max-width:820px;margin:var(--sp-xl) auto;padding:var(--sp-lg);background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md)}
#code-entry,#exam-content,#results{text-align:center}
#timer{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;color:#d63031;margin-bottom:var(--sp-lg);padding:var(--sp-sm) var(--sp-md);background:rgba(214,48,49,.06);border:1px solid rgba(214,48,49,.15);border-radius:var(--r-md);display:inline-block}
.question{margin-bottom:var(--sp-md);padding:var(--sp-md);background:var(--off-white);border-radius:var(--r-md);border:1px solid var(--border);text-align:left;transition:border-color .2s}
.question:hover{border-color:var(--navy-mid)}
.question h3{font-family:'Syne',sans-serif;color:var(--navy-mid);margin-bottom:var(--sp-sm);font-size:.97rem;font-weight:700}
.question label{display:flex;align-items:center;gap:.6rem;margin:.5rem 0;font-size:.94rem;cursor:pointer;padding:.3rem 0;transition:color .2s}
.question label:hover{color:var(--navy-mid)}
.question input[type="radio"]{accent-color:var(--navy-mid);width:15px;height:15px}
#results p{font-size:1.1rem;margin:var(--sp-sm) 0}
#breakdown{margin-top:var(--sp-sm);font-weight:500}

/* ─ CONTACT ──────────────────────────────────────────────────── */
.contact-section{background:var(--off-white)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);margin-top:var(--sp-lg)}
.contact-left{display:flex;flex-direction:column;gap:var(--sp-md)}
.contact-info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);box-shadow:var(--sh-sm)}
.contact-info-card h2{font-size:1.65rem;margin-bottom:var(--sp-sm)}
.c-item{display:flex;align-items:flex-start;gap:var(--sp-sm);padding:var(--sp-sm) 0;border-bottom:1px solid var(--border)}
.c-item:last-of-type{border:none}
.c-ico{width:42px;height:42px;flex-shrink:0;background:var(--gold-pale);border:1px solid rgba(244,180,37,.25);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.c-txt strong{display:block;font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.15rem}
.c-txt a,.c-txt span{font-size:.96rem;color:var(--text-dark);font-weight:500}
.c-txt a:hover{color:var(--navy-mid)}
.map-wrap{height:250px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-sm)}
.map-wrap iframe{width:100%;height:100%;border:0}
.contact-form-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);box-shadow:var(--sh-sm)}
.contact-form-card h2{font-size:1.65rem;margin-bottom:var(--sp-sm)}

/* ─ FORMS ────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--sp-sm)}
label{font-size:.84rem;font-weight:600;color:var(--text-dark);font-family:'Syne',sans-serif;letter-spacing:.02em}
input[type="text"],input[type="email"],input[type="tel"],select,textarea{padding:.8rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:.97rem;color:var(--text-dark);background:var(--off-white);width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(18,61,107,.1);background:var(--white)}
textarea{resize:vertical;min-height:120px}
.checkbox-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.5rem;margin-bottom:var(--sp-sm)}
.checkbox-group label{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-size:.87rem;font-weight:500;font-family:'Inter',sans-serif;transition:border-color .2s,background .2s;letter-spacing:0}
.checkbox-group label:hover{border-color:var(--navy-mid);background:rgba(18,61,107,.04)}
.checkbox-group input[type="checkbox"]{accent-color:var(--navy-mid);width:auto}
.registration-form{max-width:640px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-lg) var(--sp-md);box-shadow:var(--sh-md)}
.step-label{font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.5rem;margin-bottom:var(--sp-sm);margin-top:var(--sp-md)}
.step-badge{width:22px;height:22px;background:var(--navy);color:var(--white);border-radius:50%;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700}
.fee-summary{background:var(--navy);border-radius:var(--r-md);padding:var(--sp-md);margin-block:var(--sp-sm)}
.fee-summary .fee-row{color:rgba(255,255,255,.7);border-bottom-color:rgba(255,255,255,.1)}
.fee-summary .fee-row .fee-amt{color:var(--white)}
.fee-summary .fee-total-box{background:none;padding:.75rem 0 0;margin:0;border-top:1px solid rgba(255,255,255,.15)}
.selected-subjects{font-size:.84rem;color:var(--text-muted)}

/* ─ FAQ ──────────────────────────────────────────────────────── */
.faq-section{background:var(--white)}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg)}
.faq-card{background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-md);transition:transform .3s var(--ease),box-shadow .3s}
.faq-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.faq-card h3{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--navy-mid);margin-bottom:.6rem;display:flex;align-items:flex-start;gap:.6rem}
.faq-q{flex-shrink:0;width:26px;height:26px;background:var(--gold);color:var(--navy);border-radius:50%;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.faq-card p{font-size:.9rem;padding-left:2.1rem}

/* ─ CTA BANNER ───────────────────────────────────────────────── */
.cta-banner{background:linear-gradient(135deg,var(--gold),var(--gold-bright));padding-block:var(--sp-xl);text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.04) 1px,transparent 1px);background-size:24px 24px}
.cta-banner .wrap{position:relative;z-index:1}
.cta-banner h2{font-size:clamp(1.9rem,3.5vw,2.8rem);color:var(--navy);margin-bottom:.75rem}
.cta-banner p{font-size:1.05rem;color:rgba(9,25,41,.72);margin-inline:auto;margin-bottom:var(--sp-lg)}
.cta-btns{display:flex;gap:var(--sp-sm);justify-content:center;flex-wrap:wrap}

/* ─ PAGE HERO ────────────────────────────────────────────────── */
.page-hero{background:var(--navy);padding-block:var(--sp-xl) var(--sp-lg);text-align:left;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 50% 0%,rgba(244,180,37,.10),transparent 60%);pointer-events:none}
.page-hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(244,180,37,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(244,180,37,.03) 1px,transparent 1px);background-size:55px 55px;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--white);letter-spacing:-.025em;margin-bottom:.75rem;animation:heroIn .7s var(--ease) both}
.page-hero p{font-size:1.04rem;color:rgba(255,255,255,.68);margin-inline:left;max-width:54ch;animation:heroIn .8s .12s var(--ease) both}

/* ─ ADMIN ────────────────────────────────────────────────────── */
.admin-section{max-width:960px;margin:var(--sp-xl) auto;padding:var(--sp-lg);background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md)}
.admin-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp-md);border-bottom:2px solid var(--border);padding-bottom:var(--sp-sm)}
.tab-btn{background:var(--off-white);border:1px solid var(--border);padding:.6rem 1.25rem;cursor:pointer;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;color:var(--text-body);font-family:'Syne',sans-serif;letter-spacing:.03em;transition:all .25s}
.tab-btn.active{background:var(--navy-mid);color:var(--white);border-color:var(--navy-mid)}
.tab-btn:hover:not(.active){background:var(--border)}
.tab-content{margin-top:var(--sp-md);animation:heroIn .4s var(--ease)}
table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border)}
th,td{border-bottom:1px solid var(--border);padding:.85rem 1rem;text-align:left;font-size:.9rem}
th{background:var(--off-white);font-weight:700;font-size:.77rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-family:'Syne',sans-serif}
tbody tr:hover{background:rgba(18,61,107,.03)}
#codes-table{display:table !important;visibility:visible !important}
.table-wrapper{overflow-x:auto;display:block !important;visibility:visible !important}

/* ─ WHATSAPP ─────────────────────────────────────────────────── */
.whatsapp-float{position:fixed;bottom:28px;right:28px;width:60px;height:60px;background:#25d366;color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 6px 24px rgba(37,211,102,.5);z-index:500;transition:transform .3s var(--ease-back),box-shadow .3s}
.whatsapp-float:hover{transform:scale(1.12) rotate(-6deg);box-shadow:0 10px 36px rgba(37,211,102,.65)}
.whatsapp-float::before{content:'';position:absolute;inset:-6px;border:2px solid rgba(37,211,102,.35);border-radius:50%;animation:waPing 2s ease-out infinite}
@keyframes waPing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* ─ FOOTER ───────────────────────────────────────────────────── */
footer{background:var(--navy);padding-block:var(--sp-xl)}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-xl);margin-bottom:var(--sp-lg)}
.footer-brand .logo{font-size:1.5rem}
.footer-brand p{font-size:.88rem;color:rgba(255,255,255,.48);margin-top:var(--sp-sm);max-width:30ch}
.footer-col h4{font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-sm)}
.footer-col li{margin-bottom:.45rem}
.footer-col a{font-size:.87rem;color:rgba(255,255,255,.52);transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{padding-top:var(--sp-md);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-sm);font-size:.82rem;color:rgba(255,255,255,.38)}
.footer-bottom a{color:rgba(255,255,255,.38);transition:color .2s}
.footer-bottom a:hover{color:var(--white)}

/* ─ SCROLL REVEAL ────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}
[data-reveal-delay="4"]{transition-delay:.4s}

/* ─ RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:span 2}
  .about-layout,.contact-layout,.schedule-layout{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .steps-strip{grid-template-columns:repeat(2,1fr)}
  .step-item:nth-child(2){border-right:none}
  .step-item:nth-child(1),.step-item:nth-child(2){border-bottom:1px solid var(--border)}
}
@media(max-width:768px){
  :root{--sp-xl:3.5rem;--sp-2xl:5rem}
  .nav-links{position:fixed;inset:0 0 0 auto;width:80%;max-width:300px;background:rgba(9,25,41,.98);backdrop-filter:blur(14px);flex-direction:column;align-items:flex-start;padding:5rem var(--sp-md) var(--sp-md);gap:.2rem;transform:translateX(100%);transition:transform .35s var(--ease);box-shadow:-12px 0 50px rgba(0,0,0,.4);z-index:310}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:.95rem;padding:.7rem 1rem;width:100%;border-radius:var(--r-sm)}
  .hamburger{display:flex}
  .footer-inner{grid-template-columns:1fr}
  .footer-brand{grid-column:span 1}
  .footer-bottom{flex-direction:column;text-align:center}
  .admin-section{margin:var(--sp-sm);padding:var(--sp-md)}
  .admin-nav{flex-direction:column}
  .tab-btn{width:100%;text-align:center}
}
@media(max-width:480px){
  .hero-headline{font-size:2.5rem}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .stat-n{font-size:2rem}
  .hero-btns,.cta-btns{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .cards-grid,.subjects-grid,.why-grid,.faq-grid,.exams-grid{grid-template-columns:1fr}
  .checkbox-group{grid-template-columns:1fr}
  .steps-strip{grid-template-columns:1fr}
  .step-item{border-right:none;border-bottom:1px solid var(--border)}
  .exam-gate-box{padding:var(--sp-lg) var(--sp-md)}
  table{font-size:.82rem}
  th,td{padding:.6rem .7rem}
}

/* ── Legacy compat ────────────────────────────────────────── */
.fade-in,.slide-up,.bounce-in,.fade-in-up,.slide-in{animation:heroIn .8s var(--ease) both}
.glow,.lift-hover,.expand-hover,.pulse{}
.section-title{font-size:clamp(1.9rem,3.5vw,2.7rem);letter-spacing:-.02em;text-align:center;margin-bottom:var(--sp-md)}
.cta-primary{display:inline-flex;align-items:center;gap:.5rem;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.04em;padding:.85rem 1.8rem;border-radius:var(--r-md);background:var(--gold);color:var(--navy);border:2px solid var(--gold);cursor:pointer;transition:transform .22s var(--ease-back),box-shadow .22s,background .2s;box-shadow:var(--sh-gold)}
.cta-primary:hover{background:var(--gold-bright);transform:translateY(-3px);box-shadow:0 14px 40px rgba(244,180,37,.45)}
.cta-secondary{display:inline-flex;align-items:center;gap:.5rem;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;padding:.85rem 1.8rem;border-radius:var(--r-md);background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.3);cursor:pointer;transition:transform .22s var(--ease-back),background .2s}
.cta-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}
button{font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;padding:.65rem 1.3rem;border-radius:var(--r-md);border:none;background:var(--navy-mid);color:var(--white);cursor:pointer;transition:background .2s,transform .2s var(--ease-back);letter-spacing:.03em}
button:hover{background:var(--navy-light);transform:translateY(-2px)}
#code-entry button,#submit-exam-btn,#retake-btn{background:var(--navy-mid);color:var(--white);padding:.85rem 2rem;font-size:1rem;border-radius:var(--r-md);margin-top:var(--sp-sm);display:inline-block}
#code-entry button:hover,#submit-exam-btn:hover,#retake-btn:hover{background:var(--navy-light)}
#subject-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
#subject-buttons button{background:var(--gold);color:var(--navy);padding:.5rem 1rem;font-size:.88rem}
#subject-buttons button:hover{background:var(--gold-bright)}
form{display:flex;flex-direction:column;gap:var(--sp-sm)}
/* MOBILE NAV FIX */
@media (max-width: 768px){
  .hamburger{
    display:flex;
  }

  .nav-links{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:70%;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    background:rgba(9,25,41,.98);
    padding:2rem;
    gap:1rem;
    transition:right .3s ease;
    z-index:310;
  }

  .nav-links.active{
    right:0;
  }
}
html, body{
  overflow-x:hidden;
}