:root{
  --navy-900:#0A2E5C;
  --navy-800:#0D3A72;
  --navy-700:#0E47A1;
  --navy-500:#1C63C9;
  --teal-600:#0E769B;
  --teal-400:#3FA7C9;
  --amber-600:#C7671D;
  --amber-500:#E08A3C;
  --amber-300:#F4B979;
  --paper:#F6F9FD;
  --paper-2:#EDF2FA;
  --ink-900:#0E1B33;
  --ink-700:#37455E;
  --ink-500:#6D7A94;
  --line:#E2E9F5;
  --white:#FFFFFF;
  --radius-arch: 200px 200px 20px 20px;
  --shadow-soft: 0 25px 60px -25px rgba(10,46,92,0.35);
  --shadow-card: 0 14px 34px -18px rgba(10,46,92,0.28);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.4) inset, 0 20px 40px -20px rgba(10,46,92,0.4);
  --container-pad: 48px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins', sans-serif;
  color:var(--ink-900);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
:focus-visible{outline:3px solid var(--amber-500); outline-offset:3px;}
.container{max-width:1320px; margin:0 auto; padding:0 var(--container-pad);}
section{position:relative;}

/* ---------- texture helpers ---------- */
.tex-dots{
  background-image:radial-gradient(rgba(14,71,161,0.08) 1.4px, transparent 1.4px);
  background-size:22px 22px;
}
.tex-grain::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; z-index:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:12px; font-weight:600; font-size:15px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg, var(--amber-500), var(--amber-600));
  color:#fff; box-shadow:0 14px 30px -12px rgba(199,103,29,0.55);
}
.btn-primary::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform:translateX(-100%);
}
.btn-primary:hover::after{transform:translateX(100%); transition:transform .7s ease;}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 36px -12px rgba(199,103,29,0.65);}
.btn-outline{
  background:rgba(255,255,255,0.6); color:var(--navy-900); border:1.5px solid var(--line);
  backdrop-filter:blur(6px);
}
.btn-outline:hover{border-color:var(--navy-500); transform:translateY(-3px); box-shadow:var(--shadow-card);}
.btn-white{background:#fff; color:var(--navy-900); box-shadow:0 14px 30px -14px rgba(0,0,0,0.35);}
.btn-white:hover{transform:translateY(-3px);}
.btn-sm{padding:10px 20px; font-size:13.5px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(246,249,253,0.78);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(226,233,245,0.8);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 8px 30px -18px rgba(10,46,92,0.4);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:14px; padding-bottom:14px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand img{height:44px; width:auto;}
.brand .brand-text{font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:var(--navy-900); line-height:1.15;}
.brand .brand-text span{display:block; font-weight:500; font-size:10.5px; letter-spacing:.14em; color:var(--amber-600); text-transform:uppercase; margin-top:1px;}

.main-nav{display:flex; gap:32px; align-items:center;}
.main-nav li{list-style:none; margin:0; padding:0;}
.main-nav a{font-size:14.5px; font-weight:500; color:var(--ink-700); position:relative; padding:8px 0;}
.main-nav a::after{content:''; position:absolute; left:0; bottom:2px; height:2px; width:0; background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); transition:width .25s ease;}
.main-nav a:hover::after{width:100%;}
.main-nav a:hover{color:var(--navy-900);}

.header-actions{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; padding:8px;}
.nav-toggle span{width:24px; height:2.5px; background:var(--navy-900); border-radius:2px;}

.mobile-nav{
  display:none; position:fixed; inset:0; z-index:80; background:linear-gradient(160deg,var(--navy-900),var(--navy-800));
  color:#fff; padding:26px var(--container-pad); flex-direction:column; gap:2px;
}
.mobile-nav.open{display:flex;}
.mobile-nav li{list-style:none; margin:0; padding:0;}
.mobile-nav a{font-size:20px; font-weight:500; padding:17px 4px; border-bottom:1px solid rgba(255,255,255,0.12);}
.mobile-nav .close-btn{align-self:flex-end; font-size:30px; padding:10px; color:#fff;}
.mobile-nav .btn-primary{margin-top:20px;}

/* ---------- Hero ---------- */
.hero{
  overflow:hidden; padding:100px 0 110px;
  background:linear-gradient(180deg, #FBFDFF 0%, var(--paper) 100%);
}
.hero .blob.b1{width:520px; height:520px; top:-220px; right:-120px; background:radial-gradient(circle, rgba(28,99,201,0.25), transparent 70%);}
.hero .blob.b2{width:420px; height:420px; bottom:-180px; left:-140px; background:radial-gradient(circle, rgba(224,138,60,0.22), transparent 70%);}
.hero-inner{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--teal-600); background:rgba(14,118,155,0.1); padding:9px 16px; border-radius:999px;
  margin-bottom:24px; border:1px solid rgba(14,118,155,0.18);
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal-600); box-shadow:0 0 0 4px rgba(14,118,155,0.18);}
h1{
  font-family:'Poppins', sans-serif; font-weight:700; font-size:clamp(34px, 4.2vw, 54px);
  line-height:1.12; color:var(--navy-900); letter-spacing:-0.015em; margin-bottom:22px;
}
h1 span.accent{
  background:linear-gradient(120deg, var(--amber-600), var(--amber-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{font-size:17px; color:var(--ink-700); max-width:520px; margin-bottom:36px; font-weight:400;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px;}
.hero-stats{display:flex; gap:38px; flex-wrap:wrap;}
.hero-stats .stat b{display:block; font-size:26px; color:var(--navy-900); font-weight:700;}
.hero-stats .stat span{font-size:12px; color:var(--ink-500); font-weight:500; text-transform:uppercase; letter-spacing:.04em;}

.hero-media{position:relative; display:flex; justify-content:center;}
.arch-frame{
  position:relative; width:100%; max-width:430px; aspect-ratio:4/4.9;
  border-radius:var(--radius-arch);
  background:linear-gradient(160deg, var(--navy-700), var(--navy-900));
  box-shadow:var(--shadow-soft);
  padding:16px; overflow:hidden;
}
.arch-frame-media{
  position:absolute; top:16px; right:16px; bottom:16px; left:16px;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  border-radius:calc(200px - 16px) calc(200px - 16px) 8px 8px;
}
/* Legacy fallback: kept in case a raw <img> is ever used directly inside .arch-frame */
.arch-frame img{
  position:absolute; top:16px; right:16px; bottom:16px; left:16px;
  width:auto; height:auto; min-width:calc(100% - 32px); min-height:calc(100% - 32px);
  display:block;
  object-fit:cover; object-position:center;
  border-radius:calc(200px - 16px) calc(200px - 16px) 8px 8px;
}
.arch-frame::after{
  content:''; position:absolute; inset:16px;
  border-radius:calc(200px - 16px) calc(200px - 16px) 8px 8px;
  border:1.5px solid rgba(255,255,255,0.35); pointer-events:none;
}
.hero-badge-card{
  position:absolute; bottom:26px; left:-30px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  border-radius:16px; padding:16px 18px; box-shadow:var(--shadow-card); display:flex; align-items:center; gap:12px;
  border:1px solid rgba(255,255,255,0.6);
}
.hero-badge-card .icon-circle{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--teal-600),var(--navy-700)); display:flex; align-items:center; justify-content:center; flex:none;}
.hero-badge-card b{display:block; font-size:15px; color:var(--navy-900);}
.hero-badge-card span{font-size:11.5px; color:var(--ink-500);}
.arch-deco{position:absolute; border-radius:200px 200px 10px 10px; border:1.5px solid; opacity:.5;}
.arch-deco.d1{width:110px; height:140px; top:-26px; left:10px; border-color:var(--amber-500);}
.arch-deco.d2{width:80px; height:100px; bottom:10px; right:-20px; border-color:var(--teal-600);}

/* ---------- Trust strip ---------- */
.trust-strip{background:linear-gradient(90deg, var(--navy-900), var(--navy-700), var(--navy-900)); color:#fff; padding:30px 0; overflow:hidden; position:relative;}
.trust-strip .marquee-track{display:flex; align-items:center; width:max-content; gap:0; animation:trust-marquee 26s linear infinite;}
.trust-strip .marquee-track:hover{animation-play-state:paused;}
.trust-strip .marquee-group{display:flex; align-items:center; gap:20px 48px; flex-wrap:nowrap; padding-right:48px;}
.trust-strip span{font-size:18px; font-weight:600; color:#D7E3F8; white-space:nowrap;}
.trust-strip .dot{width:6px; height:6px; border-radius:50%; background:#4C6FA6; flex:none;}
@keyframes trust-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){
  .trust-strip span{font-size:15px;}
  .trust-strip{padding:22px 0;}
}

/* ---------- Section shell ---------- */
.section{padding:110px 0;}
.section-head{max-width:660px; margin:0 auto 60px; text-align:center;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(28px,3.1vw,40px); color:var(--navy-900); margin-bottom:16px; letter-spacing:-0.015em;}
.section-head p{color:var(--ink-700); font-size:16px;}
.section-alt{background:var(--paper-2);}

/* ---------- WHY / features ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.feature-card{
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.7);
  border-radius:20px; padding:36px 28px; box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;
}
.feature-card::before{
  content:''; position:absolute; top:-40%; left:-40%; width:80%; height:80%;
  background:radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%); pointer-events:none;
}
.feature-card:hover{transform:translateY(-8px); box-shadow:0 30px 50px -22px rgba(10,46,92,0.35);}
.icon-circle{
  width:58px; height:58px; border-radius:18px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--navy-600,#1857B8), var(--navy-900));
  box-shadow:0 12px 24px -10px rgba(10,46,92,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
}
.feature-card:nth-child(3n+2) .icon-circle{background:linear-gradient(145deg, var(--teal-400), var(--teal-600)); box-shadow:0 12px 24px -10px rgba(14,118,155,0.5), inset 0 1px 1px rgba(255,255,255,0.4);}
.feature-card:nth-child(3n+3) .icon-circle{background:linear-gradient(145deg, var(--amber-500), var(--amber-600)); box-shadow:0 12px 24px -10px rgba(199,103,29,0.5), inset 0 1px 1px rgba(255,255,255,0.4);}
.icon-circle svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.8;}
.feature-card h3{font-weight:600; font-size:18.5px; color:var(--navy-900); margin-bottom:10px;}
.feature-card p{color:var(--ink-700); font-size:14.5px;}

/* ---------- Video section ---------- */
.video-section{overflow:hidden;}
.video-shell{
  position:relative; max-width:980px; margin:0 auto; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-soft); aspect-ratio:16/8.2; background:var(--navy-900);
}
.video-shell video, .video-shell img.poster{width:100%; height:100%; object-fit:cover; display:block;}
.video-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,46,92,0.15), rgba(10,46,92,0.55)); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.play-btn{
  width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; box-shadow:0 20px 44px -14px rgba(0,0,0,0.5);
  transition:transform .25s ease;
}
.play-btn:hover{transform:scale(1.08);}
.play-btn svg{width:30px; height:30px; fill:var(--amber-600); margin-left:4px;}
.video-caption{text-align:center; max-width:640px; margin:36px auto 0; color:var(--ink-700); font-size:15px;}

/* ---------- Courses ---------- */
.course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.course-card{
  background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease; border:1px solid var(--line);
}
.course-card:hover{transform:translateY(-8px); box-shadow:0 30px 50px -22px rgba(10,46,92,0.35);}
.course-media{position:relative; aspect-ratio:16/10.5; overflow:hidden;}
.course-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.course-card:hover .course-media img{transform:scale(1.07);}
.course-tag{
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.9); backdrop-filter:blur(6px);
  padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:600; color:var(--navy-900);
}
.course-body{padding:24px 24px 26px;}
.course-body h3{font-weight:600; font-size:18px; color:var(--navy-900); margin-bottom:8px;}
.course-body p{font-size:14px; color:var(--ink-700); margin-bottom:18px;}
.course-foot{display:flex; align-items:center; justify-content:space-between;}
.course-foot .lvl{font-size:12.5px; font-weight:600; color:var(--teal-600);}
.course-foot a{font-size:13.5px; font-weight:600; color:var(--navy-900); display:flex; align-items:center; gap:5px;}
.course-foot a svg{width:14px; height:14px; stroke:var(--navy-900); fill:none; stroke-width:2; transition:transform .2s ease;}
.course-foot a:hover svg{transform:translateX(4px);}

/* ---------- Counters ---------- */
.counter-section{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 60%, var(--teal-600) 130%);
  color:#fff; overflow:hidden; position:relative;
}
.counter-section .blob{opacity:.35;}
.counter-section .blob.c1{width:420px; height:420px; top:-160px; left:-100px; background:radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);}
.counter-section .blob.c2{width:380px; height:380px; bottom:-160px; right:-80px; background:radial-gradient(circle, rgba(224,138,60,0.35), transparent 70%);}
.counter-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; z-index:1;}
.counter-card{text-align:center; padding:14px;}
.counter-card .num{font-size:clamp(34px,4vw,50px); font-weight:700; margin-bottom:8px; display:flex; align-items:baseline; justify-content:center; gap:2px;}
.counter-card .num .plus{font-size:0.55em; font-weight:600;}
.counter-card .label{font-size:13.5px; font-weight:500; letter-spacing:.03em; color:#D7E3F8; text-transform:uppercase;}

/* ---------- Academy Slideshow ---------- */
.slideshow{position:relative; max-width:1080px; margin:0 auto; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-soft); aspect-ratio:16/8;}
.slides{display:flex; height:100%; transition:transform .6s cubic-bezier(.65,0,.35,1);}
.slide{min-width:100%; height:100%; position:relative;}
.slide img{width:100%; height:100%; object-fit:cover;}
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:32px 40px;
  background:linear-gradient(0deg, rgba(10,46,92,0.85), transparent);
  color:#fff;
}
.slide-caption b{font-size:19px; font-weight:600; display:block; margin-bottom:4px;}
.slide-caption span{font-size:13.5px; opacity:.85;}
.slide-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,0.85); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); z-index:2;}
.slide-nav svg{width:18px; height:18px; stroke:var(--navy-900); fill:none; stroke-width:2.4;}
.slide-nav.prev{left:18px;}
.slide-nav.next{right:18px;}
.slide-dots{display:flex; justify-content:center; gap:9px; margin-top:24px;}
.slide-dots button{width:9px; height:9px; border-radius:50%; background:var(--line); transition:all .25s ease;}
.slide-dots button.active{width:26px; border-radius:6px; background:var(--amber-600);}

/* ---------- Teachers ---------- */
.teacher-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.teacher-card{background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); text-align:center; transition:transform .25s ease, box-shadow .25s ease;}
.teacher-card:hover{transform:translateY(-8px); box-shadow:0 30px 50px -22px rgba(10,46,92,0.35);}
.teacher-photo{aspect-ratio:1/1; overflow:hidden; position:relative;}
.teacher-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.teacher-card:hover .teacher-photo img{transform:scale(1.06);}
.teacher-info{padding:20px 16px 24px;}
.teacher-info h4{font-size:15.5px; font-weight:600; color:var(--navy-900); margin-bottom:4px;}
.teacher-info span{font-size:12.5px; color:var(--teal-600); font-weight:500;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.testi-card{background:#fff; border-radius:20px; padding:32px 28px; box-shadow:var(--shadow-card); position:relative;}
.testi-card .quote-mark{position:absolute; top:20px; right:24px; font-size:52px; font-family:Georgia,serif; color:var(--amber-300); opacity:.6; line-height:1;}
.testi-card .stars{color:var(--amber-500); font-size:14px; margin-bottom:16px; letter-spacing:2px;}
.testi-card p{font-size:14.5px; color:var(--ink-700); margin-bottom:22px;}
.testi-who{display:flex; align-items:center; gap:12px;}
.testi-who img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
.testi-who b{font-size:14px; display:block;}
.testi-who span{font-size:12px; color:var(--ink-500);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700) 70%, var(--teal-600));
  border-radius:30px; padding:64px 56px; color:#fff; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
}
.cta-banner::after{content:''; position:absolute; right:-60px; top:-60px; width:280px; height:340px; border:2px solid rgba(255,255,255,0.12); border-radius:200px 200px 10px 10px;}
.cta-banner::before{content:''; position:absolute; left:-40px; bottom:-70px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(224,138,60,0.35), transparent 70%);}
.cta-banner h2{font-weight:700; font-size:clamp(24px,3vw,32px); margin-bottom:12px; max-width:480px;}
.cta-banner p{opacity:.85; font-size:15px; max-width:440px;}
.cta-banner-actions{display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1;}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; padding:24px 4px; font-weight:600; font-size:15.5px; color:var(--navy-900); gap:20px;}
.faq-q .plus{font-size:20px; color:var(--amber-600); transition:transform .25s ease; flex:none; width:34px; height:34px; border-radius:50%; background:rgba(199,103,29,0.1); display:flex; align-items:center; justify-content:center;}
.faq-item.open .plus{transform:rotate(45deg); background:var(--amber-600); color:#fff;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 4px 24px; color:var(--ink-700); font-size:14.5px; max-width:700px;}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg, var(--navy-900), #071F3F); color:#D7E3F8;}
.mosque-skyline{display:flex; align-items:flex-end; justify-content:center; gap:6px; height:64px; background:var(--paper);}
.mosque-skyline .arch{width:44px; background:var(--navy-900); border-radius:200px 200px 0 0;}
.footer-inner{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; padding-top:70px; padding-bottom:44px;}
.footer-brand{display:flex; align-items:center; gap:11px; margin-bottom:18px;}
.footer-brand img{height:40px; background:#fff; border-radius:9px; padding:4px;}
.footer-brand b{font-weight:700; font-size:17px; color:#fff;}
.site-footer p.desc{font-size:13.5px; color:#AFC2E3; max-width:290px; margin-bottom:20px;}
.footer-col h5{font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:#7FA0D4; margin-bottom:18px; font-weight:600;}
.footer-col a{display:block; font-size:14px; color:#D7E3F8; margin-bottom:12px; opacity:.9; transition:opacity .2s ease; overflow-wrap:break-word;}
.footer-col a:hover{opacity:1; color:#fff;}
.footer-social{display:flex; gap:10px; margin-top:8px;}
.footer-social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-size:14px; transition:background .2s ease;}
.footer-social a:hover{background:var(--amber-600);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding:24px 0; font-size:12.5px; color:#8CA5CE;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  max-width:1320px; margin:0 auto; padding-left:var(--container-pad); padding-right:var(--container-pad);
}
.footer-credit{margin-left:0;}
.footer-credit a{color:#8CA5CE; font-weight:600; text-decoration:none; transition:color .2s ease;}
.footer-credit a:hover{color:var(--amber-500);}

@media (max-width:576px){
  .footer-bottom{justify-content:center; text-align:center;}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  :root{--container-pad:32px;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .course-grid{grid-template-columns:repeat(2,1fr);}
  .counter-grid{grid-template-columns:repeat(2,1fr); row-gap:40px;}
  .teacher-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr; row-gap:40px;}
}
@media (max-width:960px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .header-actions .btn-outline,
  .header-actions .btn-primary{display:none;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .arch-frame{max-width:320px;}
  .hero-badge-card{left:0;}
}
@media (max-width:620px){
  :root{--container-pad:20px;}
  .hero{padding:44px 0 64px;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-stats{gap:24px;}
  .section{padding:72px 0;}
  .feature-grid{grid-template-columns:1fr;}
  .course-grid{grid-template-columns:1fr;}
  .counter-grid{grid-template-columns:1fr 1fr;}
  .teacher-grid{grid-template-columns:1fr 1fr;}
  .cta-banner{padding:44px 28px; flex-direction:column; text-align:center;}
  .cta-banner-actions{justify-content:center;}
  .footer-inner{grid-template-columns:1fr; padding-top:52px; padding-bottom:34px;}
  .slide-caption{padding:22px 20px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
  .reveal{opacity:1; transform:none;}
}

/* ==========================================================================
   Floating WhatsApp Button (site-wide, via wp_footer)
   ========================================================================== */
/* Hide the floating button while the mobile nav overlay is open */
.mobile-nav.open ~ .lq-whatsapp-float {
  display: none;
}

.lq-whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 2px 8px rgba(10, 46, 92, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.lq-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.65), 0 4px 10px rgba(10, 46, 92, 0.18);
}

.lq-whatsapp-float__icon {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lq-whatsapp-float__icon svg {
  width: 100%;
  height: 100%;
}

.lq-whatsapp-float__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.55;
  animation: lq-wa-pulse 2.4s ease-out infinite;
}

@keyframes lq-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 576px) {
  .lq-whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .lq-whatsapp-float__icon {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lq-whatsapp-float__ring {
    animation: none;
    display: none;
  }
}