/* ════════════════════════════════════════════════════════════════
   home.css — Creative, modern enhancements for index.html only
   Loads after modern-refresh.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Reusable section eyebrow chip ───────────────────────────── */
.sv-eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--sv-blue2);
  background:rgba(14,165,233,.10); border:1px solid rgba(147,197,253,.7);
  padding:6px 16px; border-radius:999px; margin-bottom:14px;
}
.sv-section{ padding:64px 0; }
.sv-section .sv-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
.sv-section .sv-head h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:900; margin:0 0 10px; }
.sv-section .sv-head p{ color:var(--sv-muted); font-size:15px; line-height:1.7; margin:0; }

/* ════════ HERO SLIDER polish ════════ */
#main-slider .slide-hero{
  background:linear-gradient(90deg, rgba(3,18,33,.72) 0%, rgba(3,18,33,.35) 45%, transparent 75%);
}
#main-slider .slide-title{
  font-size:clamp(2rem,5vw,3.4rem) !important; font-weight:900 !important;
  text-shadow:0 4px 24px rgba(0,0,0,.4);
}
#main-slider .slide-label{
  display:inline-block; background:rgba(14,165,233,.92); color:#fff;
  padding:6px 16px; border-radius:999px; font-weight:800; letter-spacing:1px;
  font-size:12px; text-transform:uppercase; margin-bottom:14px;
}
#main-slider .slide-btn{
  box-shadow:0 10px 26px rgba(14,165,233,.45) !important;
}

/* ════════ SUBJECT ICON BADGES (animated, replaces old photos) ════════ */
@keyframes svFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
@keyframes svPop{ 0%{ transform:scale(.6); opacity:0;} 100%{ transform:scale(1); opacity:1;} }

.skill-home .icons.subj-ic{
  width:92px; height:92px; border-radius:24px;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:visible;
  animation:svPop .5s ease both;
  box-shadow:0 12px 26px rgba(15,23,42,.14);
}
.skill-home .icons.subj-ic i{
  font-size:40px; line-height:1; position:relative; z-index:1;
  color:#fff;
  animation:svFloat 3.2s ease-in-out infinite;
}
/* soft glow ring */
.skill-home .icons.subj-ic::after{
  content:""; position:absolute; inset:-6px; border-radius:28px;
  background:inherit; filter:blur(14px); opacity:.35; z-index:0;
}

/* per-subject gradients */
.skill-home .icons.c1{ background:linear-gradient(135deg,#38bdf8,#0369a1); }   /* Maths  – blue   */
.skill-home .icons.c2{ background:linear-gradient(135deg,#34d399,#047857); }   /* Science– green  */
.skill-home .icons.c3{ background:linear-gradient(135deg,#a78bfa,#6d28d9); }   /* History– violet */
.skill-home .icons.c4{ background:linear-gradient(135deg,#fb7185,#be123c); }   /* English– rose   */

/* stagger the float so they don't bob in unison */
.skill-home .col-md-3:nth-child(2) .subj-ic i{ animation-delay:.4s; }
.skill-home .col-md-3:nth-child(3) .subj-ic i{ animation-delay:.8s; }
.skill-home .col-md-3:nth-child(4) .subj-ic i{ animation-delay:1.2s; }

/* lift + spin icon on card hover */
.skill-home-solid .col-md-3:hover .subj-ic{ transform:translateY(-4px) scale(1.05); transition:transform .3s; }
.skill-home-solid .col-md-3:hover .subj-ic i{ transform:rotate(-8deg); transition:transform .3s; }

/* ════════ RESPONSIVE SUBJECT CARD GRID ════════
   The template forced .col-md-3{flex:1 1 0} which squished all 4 cards
   into one row on mobile (≈38px each). Let them wrap responsively. */
.skill-home-solid{ flex-wrap:wrap; }
.skill-home-solid .col-md-3{
  flex:1 1 240px;     /* grow to fill, but wrap when <240px would result */
  max-width:100%;
  margin-bottom:24px;
}
@media(max-width:991px){ .skill-home-solid .col-md-3{ flex:1 1 45%; } }
@media(max-width:600px){ .skill-home-solid .col-md-3{ flex:1 1 100%; } }

/* ════════ BIG ANIMATED SUBJECT ILLUSTRATIONS ════════ */
.subj-illus{
  width:100%; max-width:200px; height:175px;
  flex:0 0 auto;          /* never let the flex column squash it */
  min-height:175px;
  margin:8px auto 18px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
  animation:svPop .5s ease both;
}
.subj-illus svg{ width:100%; height:100%; overflow:visible; }
/* soft themed glow behind the animation so it stands out from the white card */
.subj-illus::after{
  content:""; position:absolute; left:50%; top:50%;
  width:170px; height:170px; transform:translate(-50%,-50%);
  border-radius:50%; z-index:-1; pointer-events:none;
}
.subj-illus.theme-math::after   { background:radial-gradient(circle, rgba(14,165,233,.16), transparent 68%); }
.subj-illus.theme-science::after{ background:radial-gradient(circle, rgba(16,185,129,.16), transparent 68%); }
.subj-illus.theme-history::after{ background:radial-gradient(circle, rgba(139,92,246,.16), transparent 68%); }
.subj-illus.theme-english::after{ background:radial-gradient(circle, rgba(244,63,94,.16), transparent 68%); }
.skill-home-solid .col-md-3:hover .subj-illus{ transform:translateY(-4px) scale(1.05); transition:transform .3s; }

/* neutralize old template ribbon + negative-margin overlap on home subject cards
   (the .box-area used margin-top:-42px and skewed ::before/::after to tuck under
   the old icon — that banner was covering the bottom of the animations) */
.skill-home-solid .box-area{ margin-top:0 !important; padding-top:18px !important; border:none !important; }
.skill-home-solid .box-area::before,
.skill-home-solid .box-area::after{ display:none !important; }
.skill-home-solid .box-area h3{ margin-top:0 !important; }

/* ── rotating scene carousel (cross-fades between 3 animations) ── */
.illus-cycle{ position:relative; }
.illus-cycle .scene{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; animation:cyc 12s infinite;
}
.illus-cycle .scene svg{ width:100%; height:100%; overflow:visible; }
.illus-cycle .s1{ animation-delay:0s; }
.illus-cycle .s2{ animation-delay:-4s; }
.illus-cycle .s3{ animation-delay:-8s; }
/* Each scene is "on" ~40% of the cycle; with 3 scenes offset by 33.3%
   the fades overlap so there is always exactly one scene visible. */
@keyframes cyc{
  0%   { opacity:0; transform:scale(.93); }
  6%   { opacity:1; transform:scale(1); }
  33%  { opacity:1; transform:scale(1); }
  40%  { opacity:0; transform:scale(.93); }
  100% { opacity:0; transform:scale(.93); }
}

/* ── MATH scene 2: spinning geometry ── */
.illus-geo *{ fill:none; stroke-width:3; }
.illus-geo .g-c{ stroke:#0ea5e9; stroke-dasharray:7 9; transform-box:fill-box; transform-origin:center; animation:spin 6s linear infinite; }
.illus-geo .g-sq{ stroke:#0369a1; transform-box:fill-box; transform-origin:center; animation:spin 5s linear infinite reverse; }
.illus-geo .g-tri{ stroke:#38bdf8; transform-box:fill-box; transform-origin:center; animation:spin 8s linear infinite; }

/* ── MATH scene 3: pulsing symbols ── */
.illus-sym text{ fill:#0ea5e9; font:800 40px 'Open Sans',sans-serif; text-anchor:middle; transform-box:fill-box; transform-origin:center; animation:symPulse 1.8s ease-in-out infinite; }
.illus-sym .sy2{ fill:#0369a1; animation-delay:.3s; }
.illus-sym .sy3{ fill:#38bdf8; animation-delay:.6s; }
@keyframes symPulse{ 0%,100%{ transform:scale(.9); opacity:.65; } 50%{ transform:scale(1.25); opacity:1; } }

/* ── SCIENCE scene 2: bubbling flask ── */
.illus-flask .fl-body{ fill:rgba(16,185,129,.12); stroke:#10b981; stroke-width:3; stroke-linejoin:round; }
.illus-flask .fl-neck{ stroke:#10b981; stroke-width:3; stroke-linecap:round; }
.illus-flask .bub{ fill:#10b981; transform-box:fill-box; transform-origin:center; animation:bubble 2s ease-in infinite; }
.illus-flask .b2{ animation-delay:.7s; }
.illus-flask .b3{ animation-delay:1.3s; }
@keyframes bubble{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(-30px) scale(1); opacity:0; } }

/* ── SCIENCE scene 3: rotating molecule ── */
.illus-mol .mol-spin{ transform-box:fill-box; transform-origin:center; animation:spin 7s linear infinite; }
.illus-mol .bond{ stroke:rgba(16,185,129,.6); stroke-width:3; }
.illus-mol .atom{ fill:#10b981; }
.illus-mol .atom.alt{ fill:#047857; }

/* ── HISTORY scene 2: hourglass with falling sand ── */
.illus-hg .hg-frame{ fill:none; stroke:#8b5cf6; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.illus-hg .sand-top{ fill:#8b5cf6; transform-box:fill-box; transform-origin:center bottom; animation:sandTop 3s ease-in-out infinite; }
.illus-hg .sand-bot{ fill:#8b5cf6; transform-box:fill-box; transform-origin:center bottom; animation:sandBot 3s ease-in-out infinite; }
.illus-hg .stream{ stroke:#8b5cf6; stroke-width:2.5; stroke-linecap:round; animation:streamFlk .5s steps(2) infinite; }
@keyframes sandTop{ 0%{ transform:scaleY(1); } 100%{ transform:scaleY(.05); } }
@keyframes sandBot{ 0%{ transform:scaleY(.05); } 100%{ transform:scaleY(1); } }
@keyframes streamFlk{ 50%{ opacity:.25; } }

/* ── HISTORY scene 3: rotating compass ── */
.illus-comp .ring{ fill:none; stroke:#8b5cf6; stroke-width:4; }
.illus-comp .needle{ fill:#6d28d9; transform-box:fill-box; transform-origin:center; animation:spin 5s linear infinite; }
.illus-comp .needle.alt{ fill:#a78bfa; }

/* ── ENGLISH scene 2: cycling letters A B C ── */
.illus-abc text{ fill:#f43f5e; font:900 54px 'Open Sans',sans-serif; text-anchor:middle; transform-box:fill-box; transform-origin:center; opacity:0; animation:letterCycle 3s infinite; }
.illus-abc .l2{ animation-delay:1s; }
.illus-abc .l3{ animation-delay:2s; }
@keyframes letterCycle{ 0%{ opacity:0; transform:scale(.4) rotate(-25deg); } 12%{ opacity:1; transform:scale(1) rotate(0); } 28%{ opacity:1; } 38%{ opacity:0; transform:scale(1.3); } 100%{ opacity:0; } }

/* ── ENGLISH scene 3: spinning globe ── */
.illus-globe .sphere{ fill:rgba(244,63,94,.10); stroke:#f43f5e; stroke-width:3.5; }
.illus-globe .lat{ fill:none; stroke:rgba(244,63,94,.6); stroke-width:2; }
.illus-globe .merid{ fill:none; stroke:#f43f5e; stroke-width:2; transform-box:fill-box; transform-origin:center; animation:meridSpin 3.5s ease-in-out infinite; }
@keyframes meridSpin{ 0%{ transform:scaleX(1); } 50%{ transform:scaleX(.12); } 100%{ transform:scaleX(1); } }

/* ── MATH: function graph being plotted ── */
.illus-math .axis{ stroke:#94a3b8; stroke-width:2; stroke-linecap:round; }
.illus-math .grid{ stroke:rgba(14,165,233,.18); stroke-width:1; }
.illus-math .curve{
  fill:none; stroke:#0ea5e9; stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:230; stroke-dashoffset:230;
  animation:drawCurve 3.4s ease-in-out infinite;
}
.illus-math .dot{
  fill:#0369a1; filter:drop-shadow(0 0 4px rgba(14,165,233,.6));
  offset-path:path('M26,92 C48,30 70,32 90,62 S122,96 132,40');
  offset-rotate:0deg;
  animation:traceM 3.4s ease-in-out infinite;
}
@keyframes drawCurve{ 0%{stroke-dashoffset:230;} 55%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} }
@keyframes traceM{ 0%{offset-distance:0%;} 55%{offset-distance:100%;} 100%{offset-distance:100%;} }

/* ── SCIENCE: orbiting atom ── */
.illus-atom .track{ fill:none; stroke:rgba(16,185,129,.6); stroke-width:2.6; }
.illus-atom .nucleus{ fill:#10b981; animation:nucPulse 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.illus-atom .e{ fill:#047857; filter:drop-shadow(0 0 3px rgba(16,185,129,.7)); offset-rotate:0deg; }
.illus-atom .e1{ offset-path:path('M23,60 a52,20 0 1,0 104,0 a52,20 0 1,0 -104,0'); animation:orbit 2.6s linear infinite; }
.illus-atom .e2{ offset-path:path('M23,60 a52,20 0 1,0 104,0 a52,20 0 1,0 -104,0'); animation:orbit 3.2s linear infinite; }
.illus-atom .e3{ offset-path:path('M23,60 a52,20 0 1,0 104,0 a52,20 0 1,0 -104,0'); animation:orbit 2.9s linear infinite; }
@keyframes nucPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }
@keyframes orbit{ to{ offset-distance:100%; } }

/* ── HISTORY: ticking clock ── */
.illus-clock .face{ fill:#fff; stroke:#8b5cf6; stroke-width:4; }
.illus-clock .tick{ stroke:#c4b5fd; stroke-width:2; stroke-linecap:round; }
.illus-clock .hand{ stroke:#6d28d9; stroke-linecap:round; transform-box:fill-box; transform-origin:bottom; }
.illus-clock .hour{ stroke-width:4; animation:spin 8s linear infinite; }
.illus-clock .minute{ stroke-width:3; animation:spin 2s linear infinite; }
.illus-clock .pivot{ fill:#6d28d9; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── ENGLISH: chat bubble with typing dots ── */
.illus-chat .bubble{ fill:#fff; stroke:#f43f5e; stroke-width:4; stroke-linejoin:round; }
.illus-chat .td{ fill:#f43f5e; transform-box:fill-box; transform-origin:center; animation:dotBounce 1.3s ease-in-out infinite; }
.illus-chat .td2{ animation-delay:.18s; }
.illus-chat .td3{ animation-delay:.36s; }
@keyframes dotBounce{ 0%,70%,100%{ transform:translateY(0); opacity:.45; } 35%{ transform:translateY(-9px); opacity:1; } }

/* ════════ STATS STRIP ════════ */
.sv-stats{
  background:linear-gradient(120deg,#0b1f33,#0369a1 60%,#0ea5e9);
  padding:40px 0; position:relative; overflow:hidden;
}
.sv-stats::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% -30%, rgba(255,255,255,.16), transparent 55%);
  pointer-events:none;
}
.sv-stats .container{ position:relative; z-index:1; }
.sv-stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.sv-stat{ text-align:center; color:#fff; padding:10px; }
.sv-stat .num{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; line-height:1; }
.sv-stat .lbl{ font-size:13px; font-weight:600; color:rgba(255,255,255,.82); margin-top:8px; }
.sv-stat + .sv-stat{ border-left:1px solid rgba(255,255,255,.16); }
@media(max-width:767px){
  .sv-stats-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .sv-stat:nth-child(3){ border-left:none; }
}

/* ════════ WHY SATHARA — feature grid ════════ */
.sv-why{ background:#fff; }
.sv-why-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
@media(max-width:991px){ .sv-why-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .sv-why-grid{ grid-template-columns:1fr; } }
.sv-feature{
  background:var(--sv-card); border:1px solid var(--sv-line);
  border-radius:18px; padding:30px 24px; box-shadow:var(--sv-shadow);
  text-align:center; position:relative; overflow:hidden;
}
.sv-feature::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--sv-blue),var(--sv-blue2));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.sv-feature:hover{ transform:translateY(-8px); box-shadow:var(--sv-shadow-hover); }
.sv-feature:hover::before{ transform:scaleX(1); }
.sv-feature .ic{
  width:64px; height:64px; margin:0 auto 16px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(3,105,161,.10));
  color:var(--sv-blue2); font-size:26px;
  transition:all .3s;
}
.sv-feature:hover .ic{
  background:linear-gradient(135deg,var(--sv-blue),var(--sv-blue2));
  color:#fff; transform:rotate(-6deg) scale(1.06);
}
.sv-feature h3{ font-size:17px; font-weight:800; margin:0 0 8px; }
.sv-feature p{ color:var(--sv-muted); font-size:13.5px; line-height:1.65; margin:0; }

/* ════════ Big gradient CTA ════════ */
.sv-cta{
  background:linear-gradient(120deg,#0f172a 0%,#1e3a5f 55%,#0369a1 100%);
  border-radius:24px; padding:48px 32px; text-align:center; color:#fff;
  position:relative; overflow:hidden; box-shadow:0 24px 50px rgba(15,23,42,.28);
  margin:0 16px;
}
.sv-cta::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 120%, rgba(14,165,233,.4), transparent 50%);
}
.sv-cta > *{ position:relative; z-index:1; }
.sv-cta h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:900; margin:0 0 12px; }
.sv-cta p{ color:rgba(255,255,255,.85); font-size:15px; max-width:560px; margin:0 auto 26px; }
.sv-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.sv-btn-primary,.sv-btn-ghost{
  display:inline-block; padding:14px 32px; border-radius:999px;
  font-weight:800; font-size:15px; text-decoration:none; transition:all .2s;
}
.sv-btn-primary{ background:var(--sv-blue); color:#fff; box-shadow:0 10px 24px rgba(14,165,233,.45); }
.sv-btn-primary:hover{ background:#fff; color:var(--sv-blue2); transform:translateY(-3px); }
.sv-btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.4); }
.sv-btn-ghost:hover{ background:rgba(255,255,255,.20); color:#fff; transform:translateY(-3px); }