/* styles.css */
:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,.72);

  --royal: #2a5bd7;
  --navy: #0a1b44;

  --card: rgba(255,255,255,.78);
  --cardBorder: rgba(10,27,68,.12);

  --shadow: 0 18px 50px rgba(10, 27, 68, .14);
  --shadowSoft: 0 10px 30px rgba(10, 27, 68, .10);

  --radius: 18px;
  --radius2: 26px;

  --max: 1120px;
  --font-body: "Noto Sans Sinhala", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Abhaya Libre", "Noto Sans Sinhala", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  
}

/* =========================
   SEA LIVE BACKGROUND (GLOBAL)
   ========================= */

/* Make sure site content stays above the background */
body{ position: relative; }
.site-header, main, footer{ position: relative; z-index: 2; }

/* Background container */
.sea-bg{
  position: fixed;
  inset: 0;
  z-index: -2;            /* behind everything */
  overflow: hidden;
  pointer-events: none;
}

/* Base ocean gradient */
.sea-gradient{
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(42,91,215,.20), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(10,27,68,.18), transparent 62%),
    linear-gradient(180deg,
      rgba(255,255,255,1) 0%,
      rgba(240,248,255,1) 18%,
      rgba(210,235,255,1) 45%,
      rgba(165,215,255,1) 100%);
}

/* Waves: soft moving “sea surface” bands */
.sea-wave{
  position:absolute;
  left: -20%;
  width: 140%;
  height: 220px;
  border-radius: 100% 100% 0 0;
  filter: blur(0.2px);
  opacity: .55;
}

.wave-1{
  bottom: -40px;
  background: radial-gradient(circle at 50% 40%, rgba(42,91,215,.20), transparent 60%),
              linear-gradient(90deg, rgba(42,91,215,.12), rgba(10,27,68,.10), rgba(42,91,215,.12));
  animation: waveMove1 14s linear infinite;
}

.wave-2{
  bottom: -70px;
  height: 260px;
  opacity: .42;
  background: radial-gradient(circle at 40% 40%, rgba(10,27,68,.16), transparent 62%),
              linear-gradient(90deg, rgba(10,27,68,.10), rgba(42,91,215,.10), rgba(10,27,68,.10));
  animation: waveMove2 20s linear infinite;
}

.wave-3{
  bottom: -100px;
  height: 300px;
  opacity: .30;
  background: radial-gradient(circle at 60% 40%, rgba(42,91,215,.14), transparent 62%),
              linear-gradient(90deg, rgba(42,91,215,.08), rgba(10,27,68,.08), rgba(42,91,215,.08));
  animation: waveMove3 26s linear infinite;
}

@keyframes waveMove1{
  0%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-8%) translateY(6px); }
  100%{ transform: translateX(0) translateY(0); }
}
@keyframes waveMove2{
  0%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(6%) translateY(10px); }
  100%{ transform: translateX(0) translateY(0); }
}
@keyframes waveMove3{
  0%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-5%) translateY(14px); }
  100%{ transform: translateX(0) translateY(0); }
}

/* Bubbles */
.bubble{
  position:absolute;
  bottom: -60px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 25px rgba(10,27,68,.10);
  opacity: .75;
  animation: bubbleUp 10s linear infinite;
}
.bubble::after{
  content:"";
  position:absolute;
  top: 3px;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  opacity: .7;
}

@keyframes bubbleUp{
  0%   { transform: translateY(0) translateX(0) scale(.9); opacity: 0; }
  10%  { opacity: .75; }
  100% { transform: translateY(-120vh) translateX(18px) scale(1.2); opacity: 0; }
}

/* bubble positions + different speeds */
.b1{ left: 10%; animation-duration: 11s; animation-delay: 0s; }
.b2{ left: 22%; animation-duration: 14s; animation-delay: 1.5s; width: 10px; height: 10px; }
.b3{ left: 48%; animation-duration: 12s; animation-delay: .8s; width: 16px; height: 16px; }
.b4{ left: 66%; animation-duration: 15s; animation-delay: 2.2s; width: 12px; height: 12px; }
.b5{ left: 82%; animation-duration: 13s; animation-delay: 1.1s; width: 18px; height: 18px; }
.b6{ left: 92%; animation-duration: 16s; animation-delay: 2.8s; width: 9px; height: 9px; }

/* Fish silhouettes (pure CSS shape: body + tail) */
.fish{
  position:absolute;
  top: 20%;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(10,27,68,.14);
  filter: blur(.0px);
  opacity: .55;
  animation: fishSwim 22s linear infinite;
}
.fish::before{
  content:"";
  position:absolute;
  right: -10px;
  top: 4px;
  width: 0;
  height: 0;
  border-left: 10px solid rgba(10,27,68,.14);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.fish::after{
  content:"";
  position:absolute;
  left: 9px;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.40);
}

@keyframes fishSwim{
  0%   { transform: translateX(-120px) translateY(0) scale(1); }
  25%  { transform: translateX(25vw) translateY(10px) scale(1.05); }
  50%  { transform: translateX(55vw) translateY(-8px) scale(.98); }
  75%  { transform: translateX(85vw) translateY(12px) scale(1.02); }
  100% { transform: translateX(calc(100vw + 140px)) translateY(0) scale(1); }
}

/* fish placement + different speeds */
.f1{ top: 22%; animation-duration: 26s; opacity: .40; }
.f2{ top: 46%; animation-duration: 20s; opacity: .55; transform: scale(.9); }
.f3{ top: 68%; animation-duration: 30s; opacity: .35; transform: scale(1.1); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sea-wave, .bubble, .fish{ animation: none !important; }
}

/* Make the subtitle bold */
.brand-sub{
  font-weight: 800;  /* or 900 */
}

h1,h2,h3,h4{ font-family: var(--font-head);}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
.container{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

.section{ position: relative; padding: 92px 0; }
.section-soft{
  background: linear-gradient(180deg, rgba(42,91,215,.06), rgba(10,27,68,.03));
}

.section-head{ margin-bottom: 26px; }
.section-title{
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.section-subtitle{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

/* HEADER */
/* Replace your current HEADER + NAV CSS with this block */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;                 /* not transparent */
  border-bottom: 1px solid rgba(10,27,68,.10);
  box-shadow: 0 10px 30px rgba(10,27,68,.06);
}

.header-inner{
  height: 100px;                        /* taller */
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 22px;
}

/* Brand */
.brand{ display:flex; align-items:center; gap: 14px; min-width: 240px; }
.brand-logo{ height: 52px; width:auto; }
.brand-title{ font-weight: 900; letter-spacing: -0.02em; color: var(--navy); font-size: 16px; }
.brand-sub{ color: rgba(10,27,68,.74); font-size: 14px; margin-top: 2px; }

/* NAV - modern underline + animated indicator */
.nav{
  position: relative;
  display:flex;
  align-items:center;
  gap: 18px;                           /* spacing between links */
  padding: 10px 0;
}

/* each link (no pill background) */
.nav-link{
  position: relative;
  padding: 10px 2px;                   /* no rounded rectangle */
  border-radius: 0;
  color: rgba(10,27,68,.78);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: color .2s ease, transform .2s ease;
  outline: none;
}

.nav-link:hover{
  color: var(--navy);
  transform: translateY(-1px);
}

.nav-link::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -6px;
  height: 3px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--royal), var(--navy));
  transition: width .25s ease;
}

.nav-link:hover::after{ width: 100%; }

/* active state */
.nav-link.active{
  color: var(--navy);
}

.nav-link.active::after{
  width: 100%;
}

/* Optional: glow dot above active link (subtle modern) */
.nav-link.active::before{
  content:"";
  position:absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--royal), var(--navy));
  box-shadow: 0 0 0 10px rgba(42,91,215,.10);
}

/* Mobile toggle button (a bit larger) */
.nav-toggle{
  display:none;
  width: 54px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(10,27,68,.12);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(10,27,68,.10);
  cursor: pointer;
}

.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 6px auto;
  border-radius: 99px;
  transition: transform .2s ease, opacity .2s ease;
}

/* animate hamburger -> X (requires app.js adding class 'is-open') */
.nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Responsive nav panel (also white, modern) */
@media (max-width: 768px){
  .header-inner{ height: 88px; }

  .nav{
    position: fixed;
    top: 88px;
    left: 16px;
    right: 16px;
    display:none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(10,27,68,.12);
    box-shadow: 0 18px 50px rgba(10,27,68,.16);
    transform-origin: top;
    animation: navDrop .18s ease;
  }
  .nav.open{ display:flex; }

  .nav-link{
    width: 100%;
    padding: 12px 4px;
    font-size: 16px;
  }
  .nav-link::after{ bottom: 2px; }   /* keep underline visible in mobile */

  .nav-toggle{ display:inline-block; }
}

@keyframes navDrop{
  from{ opacity: 0; transform: translateY(-8px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
/* HERO */
.hero{
  padding-top: 84px;
  background:
    radial-gradient(900px 500px at 15% 15%, rgba(42,91,215,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 25%, rgba(10,27,68,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,91,215,.06), rgba(255,255,255,1) 40%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: center;
}
.hero-title{
  margin: 14px 0 10px;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.grad{
  background: linear-gradient(90deg, var(--royal), var(--navy));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text{ margin: 0; color: rgba(11,18,32,.76); font-size: 16px; line-height: 1.7; }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,27,68,.12);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadowSoft);
  font-weight: 700;
  font-size: 13px;
  color: rgba(10,27,68,.82);
}
.pill .dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--royal), var(--navy));
  box-shadow: 0 0 0 6px rgba(42,91,215,.14);
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Center on mobile */
@media (max-width: 768px) {
  .hero-actions {
    justify-content: center;
  }
  

}

@media (max-width: 768px) {
  .hero-title {
    text-align: center;
  }
}
.media-card{
  position: relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(10,27,68,.14);
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.media-img{ width: 95%; height: auto; }
.shine{
  position:absolute; inset: -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35), transparent 65%);
  transform: rotate(14deg);
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine{
  0%{ transform: translateX(-20%) rotate(14deg); opacity: .0; }
  25%{ opacity: .6; }
  60%{ opacity: .0; }
  100%{ transform: translateX(20%) rotate(14deg); opacity: .0; }
}

.mini-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 22px;
}
.stat-card{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: var(--shadowSoft);
}
.stat-value{ font-weight: 900; color: var(--navy); letter-spacing: -0.02em; }
.stat-label{ color: rgba(11,18,32,.68); font-size: 13px; margin-top: 2px; }

/* CARDS */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.card{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--cardBorder);
  background: var(--card);
  box-shadow: var(--shadowSoft);
  padding: 18px;
  overflow:hidden;
  transform: translateZ(0);
}
.card::before{
  content:"";
  position:absolute;
  inset: -60px -40px auto auto;
  width: 160px; height: 160px;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.28), transparent 60%);
  filter: blur(2px);
}
.card:hover{
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-top{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
.badge{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  color: var(--navy);
  background: linear-gradient(135deg, rgba(42,91,215,.18), rgba(10,27,68,.10));
  border: 1px solid rgba(10,27,68,.10);
}
.spark{
  width: 34px; height: 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(42,91,215,.22), rgba(10,27,68,.12));
  border: 1px solid rgba(10,27,68,.10);
}
.card-title{ margin: 6px 0 8px; font-size: 18px; letter-spacing: -0.02em; }
.card-text{ margin: 0; color: rgba(11,18,32,.72); line-height: 1.65; }
.muted{ color: rgba(11,18,32,.58); font-weight: 700; font-size: 14px; }

.card-actions{ display:flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* THUMB + LIST */
.thumb{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(10,27,68,.10);
  margin-bottom: 12px;
}
.thumb img{ width: 100%; height: 190px; object-fit: cover; }

.list{ margin: 10px 0 0; padding-left: 18px; color: rgba(11,18,32,.72); }
.list li{ margin: 6px 0; }

.link-card{ padding: 0; }
.link-card .thumb{ margin: 0; border-radius: 18px 18px 0 0; border: 0; }
.link-card .link-body{ padding: 18px; }
.link-arrow{ display:inline-block; margin-top: 10px; font-weight: 900; color: var(--royal); }

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
.about-card{
  margin-top: 12px;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: var(--shadowSoft);
}
.about-features{ display:grid; gap: 12px; }
.feature{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(10,27,68,.12);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadowSoft);
}
.feature h4{ margin: 0 0 4px; letter-spacing:-0.01em; }
.feature p{ margin: 0; color: rgba(11,18,32,.72); line-height: 1.6; }
.icon-badge{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight: 900;
  color: var(--navy);
  background: linear-gradient(135deg, rgba(42,91,215,.22), rgba(10,27,68,.12));
  border: 1px solid rgba(10,27,68,.10);
}

/* CONTACT */
.contact-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items: start;
}
.contact-card{
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(10,27,68,.12);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadowSoft);
  padding: 16px;
}
.contact-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(10,27,68,.14);
}
.contact-row:last-child{ border-bottom: 0; }
.label{ color: rgba(11,18,32,.62); font-weight: 700; }
.value{ color: var(--navy); font-weight: 900; }

.form.card{ padding: 18px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field{ display:flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
label{ font-weight: 800; font-size: 13px; color: rgba(10,27,68,.78); }
input, textarea{
  border-radius: 14px;
  border: 1px solid rgba(10,27,68,.14);
  background: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline: none;
  font-size: 14px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, textarea:focus{
  border-color: rgba(42,91,215,.45);
  box-shadow: 0 0 0 6px rgba(42,91,215,.12);
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(10,27,68,.14);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadowSoft); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn-primary{
  color: white;
  border: 1px solid rgba(10,27,68,.10);
  background: linear-gradient(135deg, var(--royal), var(--navy));
}
.btn-ghost{
  background: rgba(255,255,255,.82);
  color: var(--navy);
}
.btn-sm{ padding: 10px 14px; font-size: 13px; }

/* FOOTER */
.footer{
  border-top: 1px solid rgba(10,27,68,.10);
  background: rgba(255,255,255,.7);
}
.footer-inner{
  padding: 20px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-text{ margin: 0; color: rgba(11,18,32,.70); }
.footer a{ color: var(--royal); font-weight: 900; }

/* CURVES */
.curve{
  position:absolute;
  left:0; right:0;
  height: 90px;
  pointer-events:none;
  overflow:hidden;
}
.curve svg{ width: 100%; height: 100%; display:block; }
.curve path{ fill: #ffffff; }
.section-soft .curve path{ fill: #ffffff; }
.curve-top{ top: -1px; }
.curve-bottom{ bottom: -1px; transform: rotate(180deg); }

/* BACKGROUND BLOBS (animated shapes) */
.bg-blob{
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .55;
  animation: float 10s ease-in-out infinite;
}
.blob-1{
  width: 460px; height: 460px;
  left: -140px; top: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.45), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(10,27,68,.22), transparent 55%);
}
.blob-2{
  width: 520px; height: 520px;
  right: -180px; top: 40px;
  background: radial-gradient(circle at 30% 30%, rgba(10,27,68,.26), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(42,91,215,.38), transparent 55%);
  animation-delay: -2.5s;
}
.blob-3{
  width: 520px; height: 520px;
  left: 20%; bottom: -220px;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.26), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(10,27,68,.20), transparent 55%);
  animation-delay: -5s;
}
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-14px) scale(1.03); }
}

/* SCROLL REVEAL (pop-up on scroll) */
/* BLOOM ANIMATION */

.reveal{
  opacity: 0;
  transform: scale(.85) translateY(40px);
  transition: all .8s cubic-bezier(.2,.8,.2,1);
}

.reveal.in{
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .thumb img{ height: 180px; }
}
@media (max-width: 768px){
  .nav{ 
    position: fixed;
    top: 78px;
    left: 16px;
    right: 16px;
    display:none;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(10,27,68,.12);
    box-shadow: var(--shadow);
  }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
  .brand-logo{ height: 40px; }
  .brand-sub{ font-size: 13px; }
  .cards-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ transition:none; transform:none; opacity:1; }
  .bg-blob{ animation: none; }
  .shine{ animation:none; }
}

/* YEAR-WISE TABS + PANELS (Classes section) */
.year-tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}

.year-tab{
  border: 1px solid rgba(10,27,68,.14);
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  color: rgba(10,27,68,.78);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.year-tab:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadowSoft);
  border-color: rgba(42,91,215,.35);
}

.year-tab.active{
  color: #fff;
  border-color: rgba(10,27,68,.10);
  background: linear-gradient(135deg, var(--royal), var(--navy));
}

.year-panel{
  display:none;
  margin-top: 6px;
}

.year-panel.active{
  display:block;
}

.year-head{
  margin: 8px 0 16px;
}

.year-title{
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.year-sub{
  margin: 0;
  color: rgba(11,18,32,.70);
  font-weight: 700;
  font-size: 14px;
}



/* WHY SECTION ADVANCED ANIMATION */

.why{
  position: relative;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(42,91,215,.15), transparent 60%),
    radial-gradient(800px 400px at 80% 20%, rgba(10,27,68,.12), transparent 60%);
}

.why-wrap{
  position: relative;
  border-radius: 28px;
  padding: 40px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: var(--shadow);
}


.why-item{
  position: relative;
  display:flex;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: 0 10px 30px rgba(10,27,68,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.why-item:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 25px 60px rgba(42,91,215,.25);
}

.why-shape{
  position:absolute;
  width: 600px;
  height: 600px;
  top: -250px;
  right: -250px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(42,91,215,.6),
    rgba(10,27,68,.4),
    rgba(42,91,215,.3),
    rgba(10,27,68,.6)
  );
  filter: blur(40px);
  opacity: .45;
  animation: rotateBlob 18s linear infinite;
}



/* WHY GRID SPACING */
/* =========================
   WHY GRID + WAVES + ICONS
   (FINAL OVERRIDE BLOCK)
   Put this at the END of CSS
========================= */

/* Make curves match WHY section background */
.why .curve path{
  fill: #667b9b;
}

/* spacing under title */
.why-head{
  margin-bottom: 32px;
}

/* grid spacing */
.why-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px 26px;        /* row gap | column gap */
  margin-top: 10px;
}

.why-actions{
  margin-top: 36px;
}

@keyframes rotateBlob{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* IMPORTANT: lock WHY item layout so icon never collapses */
.why-item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

/* WHY ICON (SVG) */
.why-icon{
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;     /* prevents collapse */
  flex: 0 0 56px !important;      /* prevents shrink */
  border-radius: 18px;

  display: grid !important;
  place-items: center !important;

  color: var(--navy) !important;  /* currentColor for svg */
  background: linear-gradient(135deg, rgba(42,91,215,.16), rgba(10,27,68,.08));
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: 0 12px 28px rgba(10,27,68,.10);

  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  animation: whyFloat 3.2s ease-in-out infinite;
}

.why-svg{
  width: 26px !important;
  height: 26px !important;
  display: block !important;

  /* make sure stroke is visible */
  color: inherit;
  filter: drop-shadow(0 8px 12px rgba(42,91,215,.18));
  animation: whyPop 1.8s ease-in-out infinite;
}

/* Optional: force svg strokes to inherit color (safety) */
.why-svg path{
  stroke: currentColor;
}

/* glow ring */
.why-icon::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius: 24px;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.35), transparent 60%);
  opacity: .45;
  animation: whyGlow 2.8s ease-in-out infinite;
}

/* stagger automatically */
.why-item:nth-child(1) .why-icon{ animation-delay: .0s; }
.why-item:nth-child(2) .why-icon{ animation-delay: .2s; }
.why-item:nth-child(3) .why-icon{ animation-delay: .4s; }
.why-item:nth-child(4) .why-icon{ animation-delay: .6s; }
.why-item:nth-child(5) .why-icon{ animation-delay: .8s; }
.why-item:nth-child(6) .why-icon{ animation-delay: 1.0s; }

@keyframes whyFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes whyPop{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@keyframes whyGlow{
  0%,100%{ opacity: .35; transform: scale(1); }
  50%{ opacity: .70; transform: scale(1.06); }
}

/* hover: stronger lift + tiny rotate */
.why-item:hover .why-icon{
  transform: translateY(-8px) rotate(-2deg);
}

/* responsive: 1 column on small screens */
@media (max-width: 768px){
  .why-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}



/* ===== CONTACT (Creative + Modern + Animated) ===== */

/* section background */
.contact{
  position: relative;
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(42,91,215,.14), transparent 60%),
    radial-gradient(900px 420px at 88% 25%, rgba(10,27,68,.10), transparent 60%);
}

/* layout */
.contact-grid-creative{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

/* left side */
.contact-left{
  display:grid;
  gap: 18px;
}

.contact-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,27,68,.12);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadowSoft);
  font-weight: 900;
  font-size: 13px;
  color: rgba(10,27,68,.82);
  width: fit-content;
}
.contact-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--royal), var(--navy));
  box-shadow: 0 0 0 6px rgba(42,91,215,.14);
}

.contact-card-creative{
  position: relative;
  overflow:hidden;
}
.contact-card-creative::before{
  content:"";
  position:absolute;
  inset: -70px -60px auto auto;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.22), transparent 60%);
  filter: blur(2px);
}

/* image block */
.contact-media{
  position: relative;
  padding: 8px;
}

.contact-media-shape{
  position:absolute;
  inset: 0;
  border-radius: 28px;
  background: conic-gradient(
    from 0deg,
    rgba(42,91,215,.55),
    rgba(10,27,68,.35),
    rgba(42,91,215,.25),
    rgba(10,27,68,.55)
  );
  filter: blur(26px);
  opacity: .22;
  animation: contactSpin 18s linear infinite;
}

.contact-media-card{
  position: relative;
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(10,27,68,.14);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

.contact-media-glow{
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.32), transparent 65%);
  transform: rotate(14deg);
  animation: contactShine 6.5s ease-in-out infinite;
}

.contact-media-img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

/* form */
.contact-form{
  position: relative;
  border-radius: 26px;
  padding: 60px 52px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 620px;

  /* ADD THESE */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical center */
}

.contact-form{
  padding: 60px 52px;   /* was 22px — now taller */
}

.contact-form::before{
  content:"";
  position:absolute;
  inset: -90px auto auto -90px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.20), transparent 60%);
  filter: blur(2px);
}

.form-top{
  margin-bottom: 12px;
}
.form-title{
  margin: 10px 10px 30px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.form-sub{
  margin: 0;
  color: rgba(11,18,32,.70);
  font-weight: 700;
  font-size: 14px;
}


/* give more space between rows */
.contact-form .form-row{
  gap: 30px;
  margin-bottom: 16px;
}

/* if you have a textarea (message), make it taller */
.contact-form textarea{
  min-height: 160px;
  padding: 14px 14px;
}

/* push button to bottom (nice modern look) */
.contact-form .btn-block{
  margin-top: auto;
}


.btn-block{
  width: 100%;
  position: relative;
  overflow:hidden;
}

.btn-shine{
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35), transparent 65%);
  transform: rotate(14deg);
  animation: contactShine 6.5s ease-in-out infinite;
  pointer-events:none;
}

.form-note{
  margin: 12px 0 0;
  color: rgba(11,18,32,.62);
  font-size: 13px;
  line-height: 1.5;
}

/* animations */
@keyframes contactSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes contactShine{
  0%{ transform: translateX(-20%) rotate(14deg); opacity: 0; }
  25%{ opacity: .6; }
  60%{ opacity: 0; }
  100%{ transform: translateX(20%) rotate(14deg); opacity: 0; }
}

/* responsive */
@media (max-width: 980px){
  .contact-grid-creative{
    grid-template-columns: 1fr;
  }
  .contact-media-img{
    height: 260px;
  }
}


/* Ensure hero can contain absolute background layer */
.hero {
  position: relative;
  overflow: hidden;
}

/* Put your hero content above particles */
.hero .container,
.hero .curve {
  position: relative;
  z-index: 2;
}

/* Floating layer behind */
.geo-float {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ===== ORBS (soft globe-like circles) ===== */
.geo-float .orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06));
  box-shadow: 0 20px 60px rgba(5, 25, 60, .25);
  filter: blur(.2px);
  animation: floatY 10s ease-in-out infinite;
}

.geo-float .o1 { width: 180px; height: 180px; left: -50px; top: 12%; animation-duration: 11s; }
.geo-float .o2 { width: 120px; height: 120px; right: 6%; top: 8%;  animation-duration: 9s;  animation-delay: -2s; }
.geo-float .o3 { width: 220px; height: 220px; right: -80px; bottom: 8%; animation-duration: 13s; animation-delay: -4s; }

/* Optional faint “latitude/longitude” lines inside orbs */
.geo-float .orb::before,
.geo-float .orb::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
}
.geo-float .orb::after {
  inset: 28%;
  border-style: solid;
  border-color: rgba(255,255,255,.10);
}

/* ===== MAP PINS ===== */
.geo-float .pin {
  position: absolute;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 10px 30px rgba(5, 25, 60, .25);
  animation: drift 8s ease-in-out infinite;
}

/* inner dot */
.geo-float .pin::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 5px;
  left: 5px;
  background: rgba(10, 60, 140, .8);
  border-radius: 50%;
  transform: rotate(45deg);
}

.geo-float .p1 { left: 12%; top: 58%; animation-delay: -1s; }
.geo-float .p2 { left: 44%; top: 18%; animation-delay: -3s; }
.geo-float .p3 { right: 18%; top: 52%; animation-delay: -5s; }

/* ===== COMPASS SPARKS (tiny plus signs) ===== */
.geo-float .spark {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: .7;
  animation: twinkle 3.2s ease-in-out infinite;
}

.geo-float .spark::before,
.geo-float .spark::after {
  content: "";
  position: absolute;
  background: rgba(100, 132, 171, 0.9);
  border-radius: 2px;
}
.geo-float .spark::before { width: 10px; height: 2px; top: 4px; left: 0; }
.geo-float .spark::after  { width: 2px; height: 10px; top: 0; left: 4px; }

.geo-float .s1 { left: 30%; top: 40%; animation-delay: -1.2s; }
.geo-float .s2 { right: 32%; top: 26%; animation-delay: -2.1s; }

/* ===== TOPO “WAVES” (contour-line vibe) ===== */
.geo-float .wave {
  position: absolute;
  width: 520px;
  height: 220px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  filter: blur(.1px);
  animation: sway 14s ease-in-out infinite;
}

.geo-float .w1 { left: -120px; bottom: 10%; transform: rotate(8deg);  }
.geo-float .w2 { right: -160px; top: 28%; transform: rotate(-10deg); animation-delay: -6s; }

/* ===== Animations ===== */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

@keyframes drift {
  0%, 100% { transform: rotate(-45deg) translate(0,0); }
  50%      { transform: rotate(-45deg) translate(10px,-14px); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.25); opacity: .9; }
}

@keyframes sway {
  0%, 100% { transform: translateX(0) rotate(var(--r, 0deg)); opacity: .35; }
  50%      { transform: translateX(22px) rotate(var(--r, 0deg)); opacity: .55; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .geo-float * { animation: none !important; }
}



/* ===== MINI STATS: colorful, animated, only two opposite corners rounded ===== */

.mini-stats{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Card base */
.mini-stats .stat-card{
  position: relative;
  overflow: hidden;

  /* wider + bigger */
  min-height: 115px;
  padding: 18px 18px;

  /* ONLY two opposite edges curved (top-left + bottom-right) */
  border-radius: 18px 0 18px 0;

  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(3, 18, 45, .22);

  /* interactive feel */
  transform: translateY(0) scale(1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;

  /* subtle glass */
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}

/* Different color gradients for each card WITHOUT changing HTML */
.mini-stats .stat-card:nth-child(1){
  background:
    radial-gradient(900px 160px at 15% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(15, 90, 200, .60), rgba(5, 16, 42, .78));
}

.mini-stats .stat-card:nth-child(2){
  background:
    radial-gradient(900px 160px at 15% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(53, 87, 145, 0.55), rgba(5, 16, 42, .78));
}

.mini-stats .stat-card:nth-child(3){
  background:
    radial-gradient(900px 160px at 15% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(0, 180, 145, .48), rgba(5, 16, 42, .78));
}

/* Animated “shape blob” inside card */
.mini-stats .stat-card::after{
  content:"";
  position:absolute;
  width: 210px;
  height: 210px;
  right: -110px;
  bottom: -120px;

  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 65%);
  filter: blur(1px);
  opacity: .9;

  animation: statBlob 7s ease-in-out infinite;
}

/* Animated diagonal shine sweep */
.mini-stats .stat-card::before{
  content:"";
  position:absolute;
  top:-55%;
  left:-55%;
  width: 70%;
  height: 210%;

  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg) translateX(-130%);
  opacity: .9;
  transition: transform .55s ease;
}

/* Tiny “corner cut” accent (geometric look) */
.mini-stats .stat-card .stat-value::before{
  content:"";
  position:absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: rgba(255,255,255,.10);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .7;
}

/* Typography */
.mini-stats .stat-card .stat-value{
  position: relative;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.98);
  text-transform: none;
}

.mini-stats .stat-card .stat-label{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.80);
}

/* Hover: lift + glow + shine sweep */
.mini-stats .stat-card:hover{
  transform: translateY(-7px) scale(1.02);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 28px 70px rgba(3, 18, 45, .32);
  filter: saturate(1.12);
}

.mini-stats .stat-card:hover::before{
  transform: rotate(18deg) translateX(240%);
}

/* Gentle “alive” motion even without hover */
.mini-stats .stat-card{
  animation: statBreathe 5.4s ease-in-out infinite;
}
.mini-stats .stat-card:nth-child(2){ animation-delay: -1.6s; }
.mini-stats .stat-card:nth-child(3){ animation-delay: -3.2s; }

/* Animations */
@keyframes statBreathe{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

@keyframes statBlob{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-14px,-10px) scale(1.05); }
}

/* Responsive */
@media (max-width: 980px){
  .mini-stats{ grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mini-stats .stat-card,
  .mini-stats .stat-card::after{
    animation: none !important;
  }
  .mini-stats .stat-card::before{
    transition: none !important;
  }
}









/* ===== QR SECTION ===== */
.qr{
  position: relative;
  padding: 90px 0;
  background:
    radial-gradient(900px 450px at 20% 20%, rgba(42,91,215,.12), transparent 60%),
    radial-gradient(900px 450px at 80% 20%, rgba(10,27,68,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,91,215,.04), rgba(255,255,255,1) 55%);
}

.qr-wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center;
  border-radius: 28px;
  padding: 38px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.qr-shape{
  position:absolute;
  width: 520px;
  height: 520px;
  left: -220px;
  top: -240px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(42,91,215,.55),
    rgba(10,27,68,.35),
    rgba(42,91,215,.25),
    rgba(10,27,68,.55)
  );
  filter: blur(45px);
  opacity: .35;
  animation: qrSpin 18s linear infinite;
}

@keyframes qrSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.qr-title{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  color: var(--navy);
  font-family: var(--font-head);
}

.qr-sub{
  margin: 0;
  color: rgba(11,18,32,.72);
  line-height: 1.7;
  max-width: 58ch;
}

.qr-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.qr-card{
  position: relative;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,27,68,.12);
  box-shadow: 0 16px 46px rgba(10,27,68,.12);
  overflow: hidden;
  transform: translateZ(0);
}

.qr-glow{
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 30%, rgba(42,91,215,.22), transparent 60%);
  opacity: .6;
  filter: blur(8px);
  animation: qrGlow 3.2s ease-in-out infinite;
}

@keyframes qrGlow{
  0%,100%{ transform: scale(1); opacity: .45; }
  50%{ transform: scale(1.05); opacity: .75; }
}

.qr-img{
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(10,27,68,.10);
}

/* Responsive */
@media (max-width: 980px){
  .qr-wrap{
    grid-template-columns: 1fr;
    padding: 26px;
  }
  .qr-img{
    max-width: 240px;
  }
}




.results-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 30px;
  justify-content: center;   /* center cards */
  max-width: 1000px;         /* control total width */
  margin: 0 auto;            /* center the whole grid */
}




/* ===============================
   CLASSES CARDS – Colorful + Glow + Floating (ADD AT END OF CSS)
   Works with your existing .cards-grid and .card
================================ */

/* make cards area a little wider and give more spacing */
#classes .cards-grid{
  gap: 20px;
}

/* CARD BASE */
#classes .card{
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);

  /* blue + green gradient glass */
  background:
    radial-gradient(900px 260px at 15% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg,
      rgba(0, 170, 140, .45),
      rgba(0, 115, 255, .50),
      rgba(10, 27, 68, .70)
    );

  box-shadow:
    0 18px 55px rgba(0, 90, 160, .20),
    0 10px 30px rgba(0, 170, 140, .12);

  transform: translateY(0);
  animation: classFloat 5.8s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* glowing blob inside */
#classes .card::before{
  content:"";
  position:absolute;
  width: 240px;
  height: 240px;
  right: -120px;
  top: -110px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 220, 180, .55), transparent 65%);
  filter: blur(10px);
  opacity: .55;
  animation: classGlowMove 6.2s ease-in-out infinite;
}

/* subtle moving shine sweep */
#classes .card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
  transform: rotate(14deg) translateX(-40%);
  opacity: .55;
  animation: classShine 7.2s ease-in-out infinite;
  pointer-events:none;
}

/* make each card a bit different automatically */
#classes .card:nth-child(1){
  animation-duration: 5.6s;
}
#classes .card:nth-child(2){
  background:
    radial-gradient(900px 260px at 15% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg,
      rgba(0, 210, 172, 0.717),
      rgba(0, 140, 255, 0.742),
      rgba(10, 27, 68, 0.822)
    );
  animation-duration: 6.2s;
  animation-delay: -1.2s;
}
#classes .card:nth-child(3){
  background:
    radial-gradient(900px 260px at 15% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg,
      rgba(0, 192, 240, 0.566),
      rgba(2, 165, 105, 0.838),
      rgba(7, 25, 66, 0.74)
    );
  animation-duration: 6.8s;
  animation-delay: -2.4s;
}

/* typography bigger + colorful */
#classes .card-title{
  font-size: 30px;
  font-weight: 900;
  margin: 8px 0 10px;
  color: rgba(10, 19, 100, 0.96);
  letter-spacing: -0.02em;
}

#classes .card-text{
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.84);
}

/* badge & spark more colorful */
#classes .badge{
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(0, 220, 180, .28), rgba(0, 130, 255, .22));
}

#classes .spark{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(0, 220, 180, .30), rgba(0, 130, 255, .22));
}

/* button a bit brighter inside cards */
#classes .btn-primary.btn-sm{
  background: linear-gradient(135deg, rgba(0, 210, 170, 1), rgba(0, 130, 255, 1));
  border: 1px solid rgba(255,255,255,.16);
}

/* hover (optional) – still nice but not required */
#classes .card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 28px 80px rgba(0, 90, 160, .30),
    0 16px 45px rgba(0, 210, 170, .18);
  filter: saturate(1.12);
}

/* animations */
@keyframes classFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@keyframes classGlowMove{
  0%,100%{ transform: translate(0,0) scale(1); opacity: .50; }
  50%{ transform: translate(-18px, 10px) scale(1.06); opacity: .75; }
}

@keyframes classShine{
  0%{ transform: rotate(14deg) translateX(-55%); opacity: 0; }
  20%{ opacity: .55; }
  55%{ opacity: 0; }
  100%{ transform: rotate(14deg) translateX(55%); opacity: 0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #classes .card{ animation: none !important; }
  #classes .card::before,
  #classes .card::after{ animation: none !important; }
}


/* =========================================
   WHY SECTION – GRADIENT FONTS ONLY
   ========================================= */

/* Main Sinhala title */
#why .why-title{
  font-size: clamp(35px, 3.5vw, 42px);
  font-weight: 900;
  background: linear-gradient(135deg,
      #0a718e,
      #08947a,
      #073772,
      #00b894
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: whyTextShift 6s ease-in-out infinite;
}

/* English subtitle */
#why .why-sub{
  font-weight: 800;
  font-size: 16px;
  background: linear-gradient(90deg, #0099ff, #00d4aa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Item headings */
#why .why-item h3{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #00b4db, #078169);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Paragraph text (soft gradient tone) */
#why .why-item p{
  font-size: 15.5px;
  line-height: 1.7;
  background: linear-gradient(90deg, #005bea, #075e76);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .85;
}

/* Smooth animated gradient movement */
@keyframes whyTextShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  #why .why-title{
    animation: none !important;
  }
}