/* ============================================
   Emeralds International School — Premium Design System
   ============================================ */

/* Reset & Base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ── Color Palette ── */
  --navy-950:#060F1E;
  --navy-900:#0A192F;
  --navy-800:#0F2440;
  --navy-700:#1B3A5C;
  --navy-600:#2A5A8C;
  --navy-500:#3B7ABD;
  --gold-500:#D4A843;
  --gold-400:#E6B94A;
  --gold-300:#F0CC6B;
  --gold-200:#F5DFA0;
  --white:#ffffff;
  --off-white:#F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-300:#CBD5E1;
  --gray-400:#94A3B8;
  --gray-500:#64748B;
  --gray-600:#475569;
  --gray-700:#334155;
  --gray-800:#1E293B;

  /* Semantic */
  --primary:var(--navy-800);
  --primary-dark:var(--navy-900);
  --accent:var(--gold-500);
  --accent-light:var(--gold-400);
  --text:var(--navy-900);
  --text-muted:var(--gray-500);
  --bg:var(--white);
  --bg-alt:var(--gray-100);
  --border:var(--gray-200);

  /* ── Typography ── */
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Playfair Display',Georgia,serif;

  /* ── Premium Shadows ── */
  --shadow-xs:0 1px 3px rgba(10,25,47,.06);
  --shadow-sm:0 4px 12px rgba(10,25,47,.06),0 1px 3px rgba(10,25,47,.04);
  --shadow-md:0 8px 25px rgba(10,25,47,.08),0 2px 6px rgba(10,25,47,.04);
  --shadow-lg:0 16px 40px rgba(10,25,47,.1),0 4px 12px rgba(10,25,47,.05);
  --shadow-xl:0 25px 60px rgba(10,25,47,.12),0 8px 20px rgba(10,25,47,.06);
  --shadow-2xl:0 40px 80px rgba(10,25,47,.15),0 15px 35px rgba(10,25,47,.08);
  --shadow-gold:0 0 40px rgba(212,168,67,.12),0 8px 25px rgba(212,168,67,.08);
  --shadow-card:0 4px 20px rgba(10,25,47,.06),0 0 0 1px rgba(10,25,47,.03);
  --shadow-card-hover:0 20px 50px rgba(10,25,47,.12),0 0 0 1px rgba(212,168,67,.15);

  /* ── Spacing ── */
  --s-xs:0.5rem;--s-sm:1rem;--s-md:1.5rem;--s-lg:2.5rem;--s-xl:4rem;--s-2xl:6rem;

  /* ── Transitions ── */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --t-fast:.2s var(--ease-smooth);
  --t-normal:.35s var(--ease-out);
  --t-slow:.6s var(--ease-out);

  /* ── Border Radius ── */
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-full:9999px;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body:not(.home-page){padding-top:0}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;margin-bottom:var(--s-sm);color:var(--navy-900)}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
h4{font-size:1.35rem}h5{font-size:1.15rem}h6{font-size:1rem}
p{margin-bottom:var(--s-sm);color:var(--text-muted);line-height:1.8}
a{text-decoration:none;color:inherit;transition:var(--t-fast)}
img{max-width:100%;height:auto;display:block}

/* ── Container ── */
.container{max-width:1240px;margin:0 auto;padding:0 var(--s-lg);width:100%;position:relative}

/* ══════════════════════════════
   PREMIUM BUTTONS
   ══════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 34px;font-family:var(--font-body);font-size:.95rem;font-weight:600;
  border:2px solid transparent;border-radius:var(--r-full);cursor:pointer;
  transition:all .4s var(--ease-out);position:relative;overflow:hidden;
  letter-spacing:.3px;text-decoration:none;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.25) 50%,transparent 75%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn:hover::before{transform:translateX(100%)}

.btn-primary{
  background:linear-gradient(135deg,var(--navy-700),var(--navy-800));color:var(--white);
  box-shadow:0 4px 15px rgba(10,25,47,.2);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(10,25,47,.25),0 0 20px rgba(212,168,67,.15);
}

.btn-secondary{
  background:transparent;color:var(--navy-700);border:2px solid var(--navy-700);
}
.btn-secondary:hover{background:var(--navy-800);color:var(--white);transform:translateY(-3px);border-color:var(--navy-800)}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--navy-900);
  box-shadow:0 4px 15px rgba(212,168,67,.3);font-weight:700;
}
.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(212,168,67,.4);
}

.btn-large{padding:18px 42px;font-size:1.05rem}

/* ══════════════════════════════
   PREMIUM SECTION STYLES
   ══════════════════════════════ */
section{padding:var(--s-2xl) 0;position:relative}
.section-padding{padding:var(--s-2xl) 0}
.bg-light{background:var(--bg-alt)}

/* Dark sections */
.section-dark{background:var(--navy-900);color:var(--white)}
.section-dark h2,.section-dark h3{color:var(--white)}
.section-dark p{color:rgba(255,255,255,.7)}

/* ── Premium Section Header ── */
.section-header{text-align:center;margin-bottom:var(--s-xl);position:relative}

.section-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 24px;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2.5px;
  color:var(--gold-500);
  background:linear-gradient(135deg,rgba(212,168,67,.08),rgba(212,168,67,.04));
  border:1px solid rgba(212,168,67,.2);
  border-radius:var(--r-full);
  margin-bottom:var(--s-md);
  position:relative;
}
.section-tag::before,.section-tag::after{
  content:'';width:30px;height:1px;background:var(--gold-500);opacity:.4;
}

.section-title{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  margin-bottom:var(--s-sm);
  color:var(--navy-900);
  -webkit-text-fill-color:initial;
  background:none;
  position:relative;
  display:inline-block;
}
.section-title::after{
  content:'';display:block;width:60px;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  margin:16px auto 0;border-radius:3px;
}

.section-dark .section-tag{
  background:rgba(212,168,67,.1);border-color:rgba(212,168,67,.25);
}
.section-dark .section-title{color:var(--white)}
.section-dark .section-title::after{background:linear-gradient(90deg,var(--gold-500),var(--gold-400))}

.section-description{
  font-size:1.1rem;color:var(--gray-500);
  max-width:620px;margin:0 auto;line-height:1.8;
}
.section-dark .section-description{color:rgba(255,255,255,.65)}

.section-footer{text-align:center;margin-top:var(--s-xl)}

/* ══════════════════════════════
   WAVE DIVIDERS
   ══════════════════════════════ */
.wave-divider{
  position:absolute;left:0;right:0;height:80px;overflow:hidden;z-index:2;
  line-height:0;
}
.wave-divider.top{top:-1px}
.wave-divider.bottom{bottom:-1px}
.wave-divider svg{width:100%;height:100%;display:block}

/* ══════════════════════════════
   PREMIUM CARD BASE
   ══════════════════════════════ */
.premium-card{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:all .45s var(--ease-out);
  position:relative;overflow:hidden;
}
.premium-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,transparent 40%,rgba(212,168,67,.15) 60%,transparent 80%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.premium-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-card-hover);
}
.premium-card:hover::before{opacity:1}

/* ══════════════════════════════
   ANIMATIONS
   ══════════════════════════════ */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInLeft{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes fadeInRight{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes pulse-gold{
  0%,100%{box-shadow:0 0 0 0 rgba(212,168,67,.3)}
  50%{box-shadow:0 0 0 12px rgba(212,168,67,0)}
}
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes line-grow{
  from{width:0}to{width:60px}
}

/* ══════════════════════════════
   DECORATIVE PATTERNS
   ══════════════════════════════ */
.bg-pattern{
  position:relative;
}
.bg-pattern::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(212,168,67,.04) 1px,transparent 0);
  background-size:40px 40px;
  pointer-events:none;z-index:0;
}
.bg-pattern>*{position:relative;z-index:1}

/* ── Gold Accent Line ── */
.gold-line{
  width:60px;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  border-radius:3px;
}
.gold-line.center{margin:0 auto}

/* ══════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════ */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-gold{color:var(--gold-500)}
.text-navy{color:var(--navy-800)}
.text-white{color:var(--white)}

.mt-1{margin-top:var(--s-sm)}.mt-2{margin-top:var(--s-md)}.mt-3{margin-top:var(--s-lg)}
.mb-1{margin-bottom:var(--s-sm)}.mb-2{margin-bottom:var(--s-md)}.mb-3{margin-bottom:var(--s-lg)}

/* ══════════════════════════════
   RESPONSIVE
   ══════════════════════════════ */
@media(max-width:768px){
  html{font-size:15px}
  .container{padding:0 var(--s-sm)}
  section,.section-padding{padding:var(--s-xl) 0}
  .section-header{margin-bottom:var(--s-lg)}
  .section-tag::before,.section-tag::after{width:18px}
  .btn{padding:13px 26px;font-size:.9rem}
  .btn-large{padding:15px 32px;font-size:.95rem}
}
@media(max-width:480px){
  html{font-size:14px}
  .container{padding:0 1rem}
  section,.section-padding{padding:var(--s-lg) 0}
  .btn{padding:12px 22px;font-size:.875rem;width:100%;justify-content:center}
  .btn-large{padding:14px 28px;font-size:.9rem}
  .section-tag{font-size:.7rem;padding:6px 16px;letter-spacing:2px}
  .section-tag::before,.section-tag::after{width:12px}
}

/* Smooth scroll preference */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}