@media (prefers-reduced-motion: reduce) {
  *{animation:none!important;transition:none!important}
}
:root{
  --gold:#d4af37;
  --gold-light:#f0d97d;
  --gold-pale:#faf3dd;
  --gold-dark:#a8842a;
  --black:#12100c;
  --ink:#1f1c16;
  --muted:#6b6455;
  --line:#e8dfc4;
  --white:#ffffff;
  --cream:#fdfbf4;
  --grad-gold:linear-gradient(135deg,#d4af37 0%,#f0d97d 50%,#b8952e 100%);
  --shadow-gold:0 10px 30px rgba(212,175,55,.18);
  --shadow-soft:0 4px 18px rgba(30,26,16,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.7;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ---------- SVG PATTERN BACKGROUNDS ---------- */
@keyframes patternDrift{0%{transform:translateX(0)}100%{transform:translateX(100px)}}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 20% 50%, rgba(212,175,55,.12) 0%, transparent 70%), radial-gradient(circle at 80% 80%, rgba(240,217,125,.08) 0%, transparent 70%);
  pointer-events:none;animation:floatOrb 19s ease-in-out infinite reverse,floatVertical 10s ease-in-out infinite;
  width:180px;height:180px;border-radius:50%;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 30% 40%, rgba(240,217,125,.1) 0%, transparent 65%);
  pointer-events:none;animation:floatOrb 16s ease-in-out infinite,floatVertical 8s ease-in-out infinite;
  width:160px;height:160px;border-radius:50%;right:8%;top:12%;left:auto;
}
.kn-section::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="scales" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="0.5" fill="none" opacity="0.47"><circle cx="75" cy="50" r="20"/><path d="M75,70 L60,90 M75,70 L90,90"/><line x1="60" y1="90" x2="90" y2="90"/></g></pattern></defs><rect width="1200" height="600" fill="none"/><rect width="1200" height="600" fill="url(%23scales)"/></svg>');background-size:150px 150px;animation:patternDrift 20s linear infinite}
.how-section::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid slice"><defs><pattern id="pillars" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="1" fill="none" opacity="0.10"><rect x="80" y="20" width="40" height="150"/><path d="M70,170 L130,170 L130,180 L70,180 Z"/><path d="M70,30 L130,30 L130,20 L70,20 Z"/></g></pattern></defs><rect width="1000" height="500" fill="url(%23pillars)"/></svg>');background-size:200px 200px}
.site-footer::before{background-image:none !important;display:none !important}

/* ---------- PRELOADER ---------- */
.se-pre-con{
  position:fixed;inset:0;z-index:99999;
  background:linear-gradient(135deg,#12100c 0%,#2a251b 60%,#12100c 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.se-pre-con.loaded{opacity:0;visibility:hidden;pointer-events:none}
.preloader-icon{position:relative;display:flex;align-items:center;justify-content:center}
.preloader-icon img{width:90px;height:90px;animation:preSpin 2.4s linear infinite;filter:drop-shadow(0 0 14px rgba(212,175,55,.7));will-change:transform}
.preloader-ring{
  position:absolute;width:150px;height:150px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold-light);
  animation:preSpin 1.1s linear infinite;will-change:transform;
}
.preloader-ring.two{width:186px;height:186px;border-top-color:transparent;border-bottom-color:var(--gold-dark);animation-duration:1.7s;animation-direction:reverse}
.preloader-text{
  position:absolute;bottom:-90px;left:50%;transform:translateX(-50%);
  font-family:'Playfair Display',serif;color:var(--gold);letter-spacing:5px;
  font-size:13px;text-transform:uppercase;white-space:nowrap;
  animation:pulseGlow 1.8s ease-in-out infinite;
}
@keyframes preSpin{to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{opacity:.45}50%{opacity:1;text-shadow:0 0 16px rgba(212,175,55,.8)}}

/* ---------- SCROLL PROGRESS ---------- */
.progress-wrap{
  position:fixed;right:26px;bottom:26px;height:46px;width:46px;
  cursor:pointer;display:block;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(212,175,55,.25);
  z-index:9000;opacity:0;visibility:hidden;transform:translateY(16px);
  transition:all .4s ease;background:rgba(18,16,12,.9);
}
.progress-wrap.active{opacity:1;visibility:visible;transform:translateY(0)}
.progress-wrap::after{
  content:'';position:absolute;inset:0;text-align:center;line-height:46px;
  font-size:18px;color:var(--gold);
}
.progress-wrap svg path{fill:none;stroke:var(--gold);stroke-width:4;transition:all .2s linear}

/* ---------- TOP BAR ---------- */
.topbar{
  background:linear-gradient(135deg,#12100c 0%,#2a251b 100%);
  color:#e9e2cd;font-size:12px;padding:6px 0;
  border-bottom:1px solid rgba(212,175,55,.22);
  max-height:45px;overflow:hidden;
  transition:max-height .3s ease;
}
.topbar.collapsed{max-height:0;padding:0;border:none}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;padding:0;flex-direction:row}
.topbar-tags{display:block;font-size:12px;color:#e9e2cd;letter-spacing:0.5px;padding:4px 0;text-align:left}
.topbar-tags span{color:var(--gold);margin:0 clamp(2px,1vw,4px)}
.topbar-contact{display:flex;gap:20px;align-items:center}
.topbar-contact a{display:flex;align-items:center;gap:6px;transition:color .3s;font-size:11px}
.topbar-contact a:hover{color:var(--gold)}
.topbar-contact img{width:13px;height:13px;filter:invert(74%) sepia(58%) saturate(432%) hue-rotate(2deg) brightness(92%) contrast(89%)}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky;top:0;z-index:8000;
  background:rgba(253,251,244,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 20px rgba(30,26,16,.05);
  transition:all .3s ease,box-shadow .3s,background .3s;
}
.site-header.stuck{box-shadow:0 6px 26px rgba(30,26,16,.11)}
.site-header::after{content:'';display:block;height:3px;background:var(--grad-gold);
  background-size:200% 100%;animation:goldFlow 6s linear infinite}
@keyframes goldFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.nav-logo{display:inline-flex;align-items:center;flex-shrink:0}
.nav-logo img{height:60px;width:auto;transition:height .3s;filter:brightness(1.5)}
.nav-menu{display:flex;align-items:center;gap:8px}
.nav-menu > li{position:relative}
.nav-menu > li > a{
  font-size:12px;font-weight:600;color:var(--ink);padding:6px 0;
  position:relative;display:inline-block;transition:color .3s;
  white-space:nowrap;
}
.nav-menu > li > a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--grad-gold);transition:width .35s ease;
}
.nav-menu > li > a:hover{color:var(--gold-dark)}
.nav-menu > li > a:hover::after{width:100%}
.has-drop > a::before{
  content:'';position:relative;margin-left:4px;font-size:10px;
  color:var(--gold-dark);top:0;right:0;
}
.has-drop{padding-right:0;position:relative}
.has-drop > a{padding-bottom:20px}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:-12px;min-width:200px;
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 16px 40px rgba(30,26,16,.13);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 2s ease, visibility 2s ease, transform 0.3s ease;border-top:3px solid var(--gold);pointer-events:none;
}
.has-drop:hover .dropdown,.dropdown:hover{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity 0.1s ease, visibility 0.1s ease, transform 0.3s ease}
.dropdown a{display:block;padding:9px 12px;font-size:13px;font-weight:500;border-radius:6px;transition:all .25s}
.dropdown a:hover{background:var(--gold-pale);color:var(--gold-dark);padding-left:16px}
.btn-login{
  background:var(--grad-gold);color:var(--black);font-weight:700;font-size:11.5px;
  padding:7px 14px;border-radius:8px;white-space:nowrap;
  box-shadow:var(--shadow-gold);transition:all .35s ease;
  border:1px solid rgba(212,175,55,.6);min-height:40px;display:flex;align-items:center;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(212,175,55,.38);filter:brightness(1.06)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;min-width:44px;min-height:44px;justify-content:center}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{
  display:none;border-top:1px solid var(--line);
  max-height:0;overflow:hidden;transition:max-height .45s ease;background:var(--white);
}
.mobile-menu.open{max-height:820px;overflow-y:auto}
.mobile-menu ul{padding:8px 0}
.mobile-menu a{display:flex;align-items:center;padding:clamp(12px,2vw,16px) clamp(14px,3vw,20px);font-size:clamp(12px,2vw,14px);font-weight:500;border-bottom:1px solid #f3eeda;min-height:44px;min-width:44px;transition:all .25s}
.mobile-menu a:hover{background:var(--gold-pale);color:var(--gold-dark)}
.mobile-menu .sub a{padding-left:40px;font-size:13px;color:var(--muted)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:0 18px}
.section{padding:clamp(36px,7vw,70px) 0;position:relative}
.section-head{text-align:center;max-width:760px;margin:0 auto 40px}
.eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--gold-dark);
  background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(240,217,125,.08));
  border:1px solid rgba(212,175,55,.3);
  padding:6px 16px;border-radius:30px;margin-bottom:14px;
  animation:fadeInScale .8s cubic-bezier(.22,1,.36,1) 0.1s both;
}
.section-title{
  font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(26px,3.5vw,40px);line-height:1.2;color:var(--black);margin-bottom:12px;
  animation:fadeInScale .9s cubic-bezier(.22,1,.36,1) 0.2s both;
}
.section-title .accent{
  background:linear-gradient(135deg,#a8842a,#d4af37,#a8842a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section-sub{font-size:15px;color:var(--muted);line-height:1.8;animation:fadeInScale .8s cubic-bezier(.22,1,.36,1) 0.3s both}
.title-rule{
  width:0;height:3px;margin:12px auto 0;border-radius:3px;background:var(--grad-gold);
  background-size:200% 100%;
  animation:lineGrow 1s cubic-bezier(.22,1,.36,1) 0.4s forwards, goldShimmer 3s linear 0.5s infinite;
  will-change:width;
}
@keyframes lineGrow{0%{width:0}100%{width:80px}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1)}}
@keyframes goldShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{opacity:0;transform:translateY(30px);transition-property:opacity,transform;transition-duration:.8s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal[data-d="1"]{transition-delay:0.08s}
.reveal[data-d="2"]{transition-delay:0.16s}
.reveal[data-d="3"]{transition-delay:0.24s}
.reveal[data-d="4"]{transition-delay:0.32s}

/* List cards slide from left */
.list-card.reveal{transform:translateX(-30px)}
.list-card.reveal.in{transform:translateX(0)}

/* Gallery/course cards scale up */
.course-card.reveal,.album.reveal{transform:scale(.95);opacity:0}
.course-card.reveal.in,.album.reveal.in{transform:scale(1);opacity:1}

/* Course card per-row stagger */
.course-grid .course-card:nth-child(1){--delay:0.08s}
.course-grid .course-card:nth-child(2){--delay:0.16s}
.course-grid .course-card:nth-child(3){--delay:0.24s}
.course-grid .course-card:nth-child(4){--delay:0.14s}
.course-grid .course-card:nth-child(5){--delay:0.22s}
.course-grid .course-card:nth-child(6){--delay:0.30s}
.course-grid .course-card:nth-child(7){--delay:0.12s}
.course-grid .course-card:nth-child(8){--delay:0.20s}
.course-grid .course-card:nth-child(9){--delay:0.28s}
.course-grid .course-card{transition-delay:var(--delay,0)}

/* Knowledge category cards - scale entrance + continuous float animation */
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes scaleIn{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}

.kn-card.reveal{
  opacity:0;
  transform:scale(0.8);
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.kn-card.reveal.in{
  opacity:1;
  transform:scale(1);
  animation:floatCard 3s ease-in-out infinite;
}

/* How-it-works count-up effect */
.how-num{animation:countUp 1.2s cubic-bezier(.22,1,.36,1) forwards;animation-delay:0.3s}
@keyframes countUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Hero parallax floats - now handled in SVG pattern backgrounds section */
@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-35px) scale(1.12)}}
@keyframes floatVertical{0%,100%{transform:translateY(0)}50%{transform:translateY(-25px)}}

/* Button shimmer on hover */
.btn-gold,.btn:hover{
  background-size:200% 100%;
  background-position:0% 50%;
}
.btn-gold:hover{animation:buttonShimmer .6s ease}
@keyframes buttonShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:100% 50%}}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;color:#f5efdd;
  background:linear-gradient(125deg,#0d0b08 0%,#1c1913 32%,#3a3120 58%,#1c1913 80%,#0d0b08 100%);
  background-size:320% 320%;
  animation:heroShift 22s ease infinite;
  padding:90px 0 100px;
}
@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-inner{position:relative;z-index:2;text-align:center}
.hero-logo{
  height:150px;width:auto;margin:0 auto 20px;
  filter:drop-shadow(0 12px 34px rgba(212,175,55,.42));
  animation:logoFloat 5.5s ease-in-out infinite;will-change:transform;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero h1{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:clamp(36px,6.2vw,68px);line-height:1.08;margin-bottom:6px;
  background:linear-gradient(135deg,#f7e9b4 0%,#d4af37 42%,#f0d97d 70%,#b8952e 100%);
  background-size:220% auto;
  background-position:-220% center;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shine 7s linear infinite;
}
@keyframes shine{
  0%{background-position:-220% center}
  50%{background-position:0% center}
  100%{background-position:220% center}
}
.hero-tag{
  font-family:'Playfair Display',serif;font-size:clamp(15px,2.2vw,24px);
  font-weight:600;color:var(--gold-light);margin-bottom:16px;letter-spacing:.3px;
}
.hero-desc{max-width:720px;margin:0 auto 30px;font-size:15px;color:#cfc7ae;line-height:1.8}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:13px 28px;border-radius:8px;
  font-weight:700;font-size:13px;letter-spacing:.2px;
  transition:all .38s cubic-bezier(.22,1,.36,1);cursor:pointer;border:none;
  font-family:'Poppins',sans-serif;min-height:44px;display:flex;align-items:center;
}
.btn-gold{background:var(--grad-gold);color:var(--black);box-shadow:0 8px 26px rgba(212,175,55,.32)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(212,175,55,.48);filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--gold-light);border:1.5px solid rgba(212,175,55,.5);transition:all .35s}
.btn-ghost:hover{background:rgba(212,175,55,.12);border-color:var(--gold);transform:translateY(-3px)}

/* ---------- ABOUT ---------- */
.about-section{background:transparent;position:relative;overflow:hidden}
.about-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="laurel" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M70,95 Q42,88 40,60 Q39,38 55,25"/><path d="M80,95 Q108,88 110,60 Q111,38 95,25"/><path d="M45,52 L36,48 M48,44 L39,40 M52,36 L44,31 M57,29 L50,24"/><path d="M105,52 L114,48 M102,44 L111,40 M98,36 L106,31 M93,29 L100,24"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23laurel)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.about-section .wrap{position:relative;z-index:1}
.about-section::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--white) 0%,var(--gold-pale) 100%);pointer-events:none;
}
.about-card{
  margin:0;text-align:center;
  background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:42px 38px;
  box-shadow:var(--shadow-soft);position:relative;overflow:hidden;
}
.about-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-gold)}
.about-card p{font-size:15px;color:var(--muted);line-height:1.9}

/* ---------- COURSE CARDS ---------- */
.courses-section{background:var(--white);position:relative;overflow:hidden}
.courses-section::after{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1000" preserveAspectRatio="xMidYMid slice"><text x="50" y="80" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-25 50 80)">LAW</text><text x="150" y="150" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(15 150 150)">COURSE</text><text x="280" y="120" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-35 280 120)">ENROLL</text><text x="450" y="180" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(20 450 180)">STUDY</text><text x="650" y="140" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-15 650 140)">LEGAL</text><text x="850" y="200" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(30 850 200)">EDUCATION</text><text x="1050" y="100" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-22 1050 100)">LAW</text><text x="100" y="320" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(25 100 320)">KNOWLEDGE</text><text x="320" y="380" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-20 320 380)">MASTER</text><text x="550" y="350" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(18 550 350)">LEARN</text><text x="800" y="400" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-30 800 400)">PRACTICE</text><text x="1000" y="320" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(22 1000 320)">EXAM</text><text x="200" y="580" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-25 200 580)">COURSE</text><text x="450" y="620" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(15 450 620)">LEGAL</text><text x="700" y="560" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-35 700 560)">ENROLL</text><text x="950" y="600" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(20 950 600)">LAW</text><text x="120" y="780" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(28 120 780)">STUDY</text><text x="380" y="850" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-18 380 850)">EDUCATION</text><text x="650" y="800" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(25 650 800)">LEGAL</text><text x="900" y="880" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-22 900 880)">COURSE</text><text x="280" y="250" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(12 280 250)">LAW</text><text x="750" y="280" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-28 750 280)">ENROLL</text><text x="400" y="720" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(18 400 720)">MASTER</text><text x="850" y="750" font-family="Playfair Display,serif" font-size="18" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-15 850 750)">LEARN</text><text x="180" y="50" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(8 180 50)">DIPLOMA</text><text x="520" y="90" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-12 520 90)">DEGREE</text><text x="920" y="140" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(18 920 140)">CERTIFICATE</text><text x="350" y="220" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-22 350 220)">SCHOLAR</text><text x="600" y="290" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(24 600 290)">ACADEMIC</text><text x="1100" y="240" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-8 1100 240)">JUSTICE</text><text x="80" y="450" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(16 80 450)">ATTORNEY</text><text x="500" y="480" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-26 500 480)">ADVOCATE</text><text x="800" y="520" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(14 800 520)">BARRISTER</text><text x="1000" y="460" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-20 1000 460)">COURT</text><text x="200" y="680" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(10 200 680)">STATUTE</text><text x="550" y="750" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-32 550 750)">EVIDENCE</text><text x="850" y="880" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(22 850 880)">TRIAL</text><text x="1050" y="920" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-14 1050 920)">APPEAL</text><text x="350" y="920" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(26 350 920)">VERDICT</text><text x="650" y="650" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-16 650 650)">CONTRACT</text><text x="250" y="350" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(20 250 350)">RIGHTS</text><text x="900" y="340" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-24 900 340)">DUTY</text><text x="500" y="140" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(12 500 140)">LIABILITY</text><text x="1100" y="520" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-18 1100 520)">COMPLIANCE</text><text x="100" y="600" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(14 100 600)">LITIGATION</text><text x="700" y="420" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-28 700 420)">COUNSEL</text><text x="350" y="500" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(22 350 500)">JUDGE</text><text x="980" y="750" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(-10 980 750)">PROFESSOR</text><text x="40" y="260" font-family="Playfair Display,serif" font-size="16" font-weight="600" fill="%23d4af37" opacity="0.15" transform="rotate(24 40 260)">LECTURE</text></svg>');background-size:100% 100%;pointer-events:none;z-index:0}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.course-card{
  background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-soft);transition:all .42s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;position:relative;will-change:transform;
}
.course-card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(212,175,55,.2);border-color:rgba(212,175,55,.48)}
.course-thumb{height:190px;overflow:hidden;background:var(--gold-pale);position:relative}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
.course-card:hover .course-thumb img{transform:scale(1.08)}
.course-thumb::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(18,16,12,.38) 100%)}
.course-body{padding:clamp(14px,3vw,20px) clamp(16px,3vw,20px) clamp(16px,3vw,20px);display:flex;flex-direction:column;flex:1}
.course-body h3{
  font-family:'Playfair Display',serif;font-size:16px;font-weight:700;
  color:var(--black);line-height:1.35;margin-bottom:8px;
}
.course-body p{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:14px;flex:1}
.course-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px dashed var(--line)}
.course-price{font-weight:800;font-size:15px;color:var(--gold-dark)}
.course-link{font-size:12px;font-weight:700;color:var(--black);transition:all .3s;white-space:nowrap}
.course-card:hover .course-link{color:var(--gold-dark);letter-spacing:.3px}
.section-cta{text-align:center;margin-top:40px}

/* ---------- LIST CARDS ---------- */
.list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.list-card{
  display:flex;align-items:flex-start;gap:13px;
  padding:16px 18px;border-radius:10px;
  background:linear-gradient(135deg,var(--white) 0%,var(--gold-pale) 100%);
  border:1px solid var(--line);border-left:4px solid var(--gold);
  box-shadow:0 2px 10px rgba(212,175,55,.08);
  transition:all .38s cubic-bezier(.22,1,.36,1);will-change:transform;
  cursor:pointer;
}
.list-card:hover{
  transform:translateX(6px);
  box-shadow:0 12px 30px rgba(212,175,55,.18);
  border-left-color:var(--gold-dark);
  background:linear-gradient(135deg,var(--gold-pale) 0%,var(--white) 100%);
}
.list-icon{
  flex-shrink:0;width:44px;height:44px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(240,217,125,.1));
  border:1px solid rgba(212,175,55,.28);
  transition:all .38s;will-change:transform;
}
.list-card:hover .list-icon{transform:scale(1.1) rotate(-5deg);box-shadow:0 0 16px rgba(212,175,55,.4)}
.list-body{flex:1;min-width:0}
.list-body h4{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:5px}
.list-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.list-meta .pdf{font-size:12px;color:var(--muted)}
.list-meta .go{font-size:12px;font-weight:700;color:var(--gold-dark);transition:all .3s}
.list-card:hover .list-meta .go{letter-spacing:.4px}

.notes-section{background:transparent;position:relative;overflow:hidden}
.notes-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="docsheet" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M55,25 L88,25 L100,37 L100,115 L55,115 Z"/><path d="M88,25 L88,37 L100,37"/><line x1="63" y1="52" x2="92" y2="52"/><line x1="63" y1="66" x2="92" y2="66"/><line x1="63" y1="80" x2="80" y2="80"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23docsheet)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.notes-section .wrap{position:relative;z-index:1}
.notes-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--gold-pale) 0%,var(--white) 100%);pointer-events:none}
.acts-section{background:var(--white);position:relative;overflow:hidden}
.acts-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="scrollp" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><rect x="48" y="60" width="54" height="32" rx="2"/><circle cx="42" cy="76" r="7"/><circle cx="108" cy="76" r="7"/><line x1="58" y1="70" x2="92" y2="70"/><line x1="58" y1="82" x2="92" y2="82"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23scrollp)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.acts-section .wrap{position:relative;z-index:1}
.rules-section{background:transparent;position:relative;overflow:hidden}
.rules-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="checklist" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><rect x="52" y="32" width="48" height="64" rx="3"/><rect x="66" y="27" width="20" height="9" rx="2"/><path d="M60,50 L64,54 L72,45"/><line x1="77" y1="50" x2="94" y2="50"/><path d="M60,67 L64,71 L72,62"/><line x1="77" y1="67" x2="94" y2="67"/><path d="M60,84 L64,88 L72,79"/><line x1="77" y1="84" x2="94" y2="84"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23checklist)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.rules-section .wrap{position:relative;z-index:1}
.rules-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#faf7ec 0%,#f5eeda 100%);pointer-events:none}
.exams-section{background:transparent;position:relative;overflow:hidden}
.exams-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="medalp" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><line x1="63" y1="28" x2="71" y2="55"/><line x1="87" y1="28" x2="79" y2="55"/><circle cx="75" cy="82" r="21"/><path d="M75,69 L78,78 L88,78 L80,84 L83,94 L75,88 L67,94 L70,84 L62,78 L72,78 Z"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23medalp)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.exams-section .wrap{position:relative;z-index:1}
.exams-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--white) 0%,var(--gold-pale) 100%);pointer-events:none}
.updates-section{background:var(--white);position:relative;overflow:hidden}
.updates-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="bellp" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M75,28 Q58,28 58,48 L58,68 L48,80 L102,80 L92,68 L92,48 Q92,28 75,28 Z"/><path d="M66,80 Q66,91 75,91 Q84,91 84,80"/><line x1="75" y1="20" x2="75" y2="28"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23bellp)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.updates-section .wrap{position:relative;z-index:1}

/* ---------- LEGAL KNOWLEDGE CATEGORIES ---------- */
.kn-section{
  background:linear-gradient(135deg,#12100c 0%,#231f17 55%,#12100c 100%);
  color:#efe8d3;position:relative;overflow:hidden;
}
.kn-section::before{
  content:'';position:absolute;inset:0;
  opacity:0.29;animation:patternDrift 25s linear infinite;
}
.kn-section .wrap{position:relative;z-index:2}
.kn-section .section-title{color:#f5efdd}
.kn-section .section-sub{color:#d4c5a9}
.kn-section .eyebrow{color:var(--gold-light);background:rgba(212,175,55,.11);border-color:rgba(212,175,55,.32)}
.kn-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:clamp(10px,2.5vw,18px);
  padding:10px 0;
  position:relative;
  z-index:1;
}
.kn-card{
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(212,175,55,.05));
  border:1px solid rgba(212,175,55,.2);
  border-radius:9px;
  padding:18px 12px;
  text-align:center;
  transition:all .38s cubic-bezier(.22,1,.36,1);
  min-height:100px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  will-change:transform;
  cursor:pointer;
  word-break:break-word;
  overflow:hidden;
  position:relative;
  z-index:2;
}
@keyframes hoverLift{0%{transform:scale(1.05) translateY(-12px)}50%{transform:scale(1.08) translateY(-16px)}100%{transform:scale(1.05) translateY(-12px)}}

.kn-card:hover{
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(240,217,125,.08));
  border-color:var(--gold);
  box-shadow:0 16px 36px rgba(212,175,55,.35);
  z-index:10;
  animation:hoverLift 1s ease-in-out infinite;
}
.kn-card h5{
  font-size:clamp(7px,1.5vw,10px);font-weight:600;line-height:1.3;color:#efe8d3;
  margin-bottom:4px;word-break:break-word;
}
.kn-card span{font-size:clamp(5px,1.2vw,7.5px);font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:var(--gold)}

/* ---------- FORMS ---------- */
.form-section{background:transparent;position:relative;overflow:hidden}
.form-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="chatq" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M40,42 Q40,30 52,30 L98,30 Q110,30 110,42 L110,64 Q110,76 98,76 L64,76 L48,90 L50,76 L52,76 Q40,76 40,64 Z"/><path d="M68,48 Q68,41 75,41 Q82,41 82,48 Q82,54 75,56 L75,60"/><circle cx="75" cy="66" r="1.3" fill="%23d4af37" stroke="none"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23chatq)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.form-section .wrap{position:relative;z-index:1}
.form-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--gold-pale) 0%,var(--white) 100%);pointer-events:none}
.enquiry-section{background:transparent;position:relative;overflow:hidden}
.enquiry-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="rocketp" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M75,25 Q92,48 86,88 L64,88 Q58,48 75,25 Z"/><circle cx="75" cy="52" r="6"/><path d="M64,78 L50,95 L64,91"/><path d="M86,78 L100,95 L86,91"/><path d="M67,88 L67,102 L75,95 L83,102 L83,88"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23rocketp)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.enquiry-section .wrap{position:relative;z-index:1}
.enquiry-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--white) 0%,var(--gold-pale) 100%);pointer-events:none}
.form-card{
  max-width:840px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-radius:14px;padding:clamp(24px,5vw,36px) clamp(18px,4vw,32px);
  box-shadow:var(--shadow-soft);position:relative;overflow:hidden;
}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-gold)}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:clamp(11px,2vw,13px);font-weight:600;color:var(--ink);display:none}
.form-card .field label{display:none}
.field input,.field select,.field textarea{
  font-family:'Poppins',sans-serif;font-size:13px;color:var(--ink);
  padding:11px 13px;border:1.4px solid var(--line);border-radius:7px;
  background:var(--cream);transition:all .3s;outline:none;width:100%;
  min-height:44px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);background:var(--white);
  box-shadow:0 0 0 4px rgba(212,175,55,.12);
}
.field textarea{resize:vertical;min-height:110px}
.form-note{
  margin-top:18px;padding:14px 16px;border-radius:8px;
  background:var(--gold-pale);border-left:3px solid var(--gold);
  font-size:11.5px;color:var(--muted);line-height:1.7;
}
.form-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:16px;
  flex-wrap:wrap;
}

/* ---------- WHY US ---------- */
.why-section{background:var(--white);position:relative;overflow:hidden}
.why-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="trophyp" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M56,32 L94,32 L92,58 Q92,75 75,75 Q58,75 58,58 Z"/><path d="M56,36 Q42,36 42,47 Q42,58 58,58"/><path d="M94,36 Q108,36 108,47 Q108,58 92,58"/><line x1="75" y1="75" x2="75" y2="90"/><line x1="60" y1="98" x2="90" y2="98"/><line x1="65" y1="90" x2="85" y2="90"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23trophyp)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.why-section .wrap{position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-card{
  background:linear-gradient(135deg,var(--white) 0%,var(--gold-pale) 100%);
  border:1px solid var(--line);border-radius:12px;padding:clamp(16px,3vw,28px) clamp(16px,3vw,24px);
  transition:all .42s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;
  will-change:transform;cursor:pointer;
}
.why-card::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .45s;
}
.why-card:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(212,175,55,.18);border-color:rgba(212,175,55,.42)}
.why-card:hover::before{transform:scaleX(1)}
.why-icon{
  width:52px;height:52px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(240,217,125,.1));
  border:1px solid rgba(212,175,55,.28);transition:all .42s;will-change:transform;
}
.why-card:hover .why-icon{transform:rotate(-7deg) scale(1.07);box-shadow:0 0 20px rgba(212,175,55,.42)}
.why-card h3{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--black);margin-bottom:9px}
.why-card p{font-size:13px;color:var(--muted);line-height:1.75}

/* ---------- HOW IT WORKS ---------- */
.how-section{
  background:linear-gradient(135deg,#12100c 0%,#231f17 55%,#12100c 100%);
  color:#efe8d3;position:relative;overflow:hidden;
}
.how-section::before{
  content:'';position:absolute;inset:0;opacity:0.26;
}
.how-section .wrap{position:relative;z-index:2}
.how-section .section-title{color:#f5efdd}
.how-section .section-sub{color:#d4c5a9}
.how-section .eyebrow{color:var(--gold-light);background:rgba(212,175,55,.11);border-color:rgba(212,175,55,.32)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.how-card{
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(212,175,55,.05));
  border:1px solid rgba(212,175,55,.2);border-radius:12px;
  padding:28px 22px;text-align:center;transition:all .42s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.how-card:hover{transform:translateY(-7px);border-color:var(--gold);box-shadow:0 16px 36px rgba(212,175,55,.22);
  background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(240,217,125,.06))}
.how-num{
  font-family:'Playfair Display',serif;font-size:36px;font-weight:900;line-height:1;margin-bottom:12px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.how-card h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:#f5efdd;margin-bottom:8px}
.how-card p{font-size:12.5px;color:#b8b099;line-height:1.7}

/* ---------- GALLERY ---------- */
.gallery-section{background:transparent;position:relative;overflow:hidden}
.gallery-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="camerap" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><rect x="42" y="48" width="66" height="46" rx="4"/><path d="M60,48 L66,36 L84,36 L90,48"/><circle cx="75" cy="71" r="15"/><circle cx="75" cy="71" r="7"/><circle cx="94" cy="58" r="2" fill="%23d4af37" stroke="none"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23camerap)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.gallery-section .wrap{position:relative;z-index:1}
.gallery-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--gold-pale) 0%,var(--white) 100%);pointer-events:none}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.album{
  background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-soft);transition:all .42s cubic-bezier(.22,1,.36,1);
  will-change:transform;cursor:pointer;
}
.album:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(212,175,55,.2);border-color:rgba(212,175,55,.42)}
.album-imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;height:clamp(120px,30vw,160px);background:var(--gold-pale)}
.album-imgs.single{grid-template-columns:1fr}
.album-imgs img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
.album:hover .album-imgs img{transform:scale(1.08)}
.album-body{padding:15px 16px;text-align:center}
.album-body h4{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--black);margin-bottom:4px}
.album-body span{font-size:11.5px;color:var(--gold-dark);font-weight:600}

/* ---------- CONTACT ---------- */
.contact-section{background:var(--white);position:relative;overflow:hidden}
.contact-section::before{content:'';position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice"><defs><pattern id="pinp" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.46"><path d="M75,25 Q98,25 98,50 Q98,72 75,100 Q52,72 52,50 Q52,25 75,25 Z"/><circle cx="75" cy="50" r="11"/></g></pattern></defs><rect width="1200" height="600" fill="url(%23pinp)"/></svg>');background-size:150px 150px;opacity:1;pointer-events:none;z-index:0}
.contact-section .wrap{position:relative;z-index:1}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.contact-intro p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:26px}
.contact-items{display:flex;flex-direction:column;gap:14px}
.contact-item{
  display:flex;align-items:flex-start;gap:14px;padding:15px 17px;border-radius:10px;
  background:linear-gradient(135deg,var(--white) 0%,var(--gold-pale) 100%);
  border:1px solid var(--line);border-left:4px solid var(--gold);
  transition:all .38s cubic-bezier(.22,1,.36,1);will-change:transform;
}
.contact-item:hover{transform:translateX(6px);box-shadow:0 12px 28px rgba(212,175,55,.17);border-left-color:var(--gold-dark)}
.contact-ico{
  flex-shrink:0;width:42px;height:42px;border-radius:9px;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(240,217,125,.1));
  border:1px solid rgba(212,175,55,.28);transition:all .38s;will-change:transform;
}
.contact-item:hover .contact-ico{transform:scale(1.08);box-shadow:0 0 16px rgba(212,175,55,.4)}
.contact-item h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gold-dark);margin-bottom:3px}
.contact-item p{font-size:13px;color:var(--ink);line-height:1.6}

/* ---------- FOOTER ---------- */
.site-footer{
  background:linear-gradient(135deg,#0d0b08 0%,#1c1913 50%,#0d0b08 100%);
  color:#c9c1a9;padding:35px 0 0;position:relative;
}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-gold);animation:goldFlow 6s linear infinite}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-bottom:24px}
.footer-logo{text-align:center}
.footer-logo img{max-height:110px;width:auto;margin-bottom:10px;filter:brightness(1.5) drop-shadow(0 6px 18px rgba(212,175,55,.28));animation:logoGlow 2.8s ease-in-out infinite}
.footer-tag{font-family:'Playfair Display',serif;font-size:29px;font-weight:600;color:var(--gold-light);line-height:1.55;text-align:center}
.footer-col h4{
  font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:11px;padding-bottom:6px;
  border-bottom:1px solid rgba(212,175,55,.24);
}
.footer-col li{margin-bottom:6px}
.footer-col li a{font-size:13px;color:#c9c1a9;transition:all .3s;display:inline-block}
.footer-col li a:hover{color:var(--gold);transform:translateX(4px)}
.footer-contact-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.footer-contact-ico{
  flex-shrink:0;width:40px;height:40px;border-radius:8px;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,175,55,.13);border:1px solid rgba(212,175,55,.26);transition:all .35s;will-change:transform;
}
.footer-contact-item:hover .footer-contact-ico{background:rgba(212,175,55,.28);box-shadow:0 0 14px rgba(212,175,55,.38);transform:scale(1.08)}
.footer-contact-item h6{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gold);margin-bottom:2px}
.footer-contact-item p{font-size:12.5px;color:#c9c1a9;line-height:1.55}
.social-row{display:flex;gap:6px;flex-wrap:wrap}
.social-row a{
  width:42px;height:42px;border-radius:50%;font-size:18px;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  background:#3a3a3a !important;border:2px solid #f0d97d !important;color:#f0d97d !important;font-weight:900 !important;
  transition:all .38s cubic-bezier(.22,1,.36,1);opacity:1 !important;visibility:visible !important;text-decoration:none;line-height:1 !important;letter-spacing:0;overflow:visible !important;
  font-family:'Outfit', sans-serif !important;white-space:nowrap !important;padding:0 !important;margin:0 3px !important;
  text-shadow:0 0 8px rgba(240,217,125,0.8) !important;position:relative;
}
.social-row a:hover{background:#f0d97d !important;color:#2a2a2a !important;transform:translateY(-4px) scale(1.08) !important;box-shadow:0 10px 22px rgba(212,175,55,.6) !important;border-color:#f0d97d !important;}
.footer-bottom{
  border-top:1px solid rgba(212,175,55,.2);padding:13px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.footer-links{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;align-items:center}
.footer-links a{color:#c9c1a9;transition:color .3s}
.footer-links a:hover{color:var(--gold)}
.footer-links .sep{color:rgba(212,175,55,.35)}
.copyright{font-size:12px;color:#9a937f}

/* ---------- CLEANUP: Remove circular elements from hero and footer patterns ---------- */
.hero::before{opacity:0 !important;visibility:hidden !important;display:none !important}
.hero::after{opacity:0 !important;visibility:hidden !important;display:none !important}
.site-footer::before{background-image:none !important;background:none !important;opacity:0 !important;visibility:hidden !important;display:none !important;content:'' !important}
.site-footer{background:linear-gradient(135deg,#0d0b08 0%,#1c1913 50%,#0d0b08 100%) !important;position:relative !important;overflow:hidden !important}
.site-footer::after{display:none !important}

/* ---------- FOOTER ICONS GLOW EFFECT ---------- */
.footer-contact-ico{
  box-shadow:0 0 0 0 rgba(212,175,55,.3) !important;
  transition:all .35s !important;
  animation:footerGlow 2.4s ease-in-out infinite !important;
}
@keyframes footerGlow{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.3)}
  50%{box-shadow:0 0 12px 4px rgba(212,175,55,.4)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,.3)}
}

/* Logo Glow Animation */
@keyframes logoGlow{
  0%{filter:drop-shadow(0 6px 18px rgba(212,175,55,.28))}
  50%{filter:drop-shadow(0 8px 32px rgba(212,175,55,.6)) drop-shadow(0 0 24px rgba(240,217,125,.4))}
  100%{filter:drop-shadow(0 6px 18px rgba(212,175,55,.28))}
}

/* ---------- HIDE STATS STRIP FROM COURSES SECTION ---------- */
.stats-strip{display:none !important}

/* ---------- ENHANCED SHINE & GLOW EFFECTS FOR SECTIONS ---------- */

/* Legal Knowledge Section - Enhanced Glow */
.kn-section{
  background:linear-gradient(135deg,#12100c 0%,#231f17 55%,#12100c 100%) !important;
  box-shadow:inset 0 0 40px rgba(212,175,55,.15),0 0 30px rgba(212,175,55,.1) !important;
  position:relative !important;
}
.kn-section::before{
  background:radial-gradient(circle at 30% 50%, rgba(212,175,55,.15) 0%, transparent 60%),
             radial-gradient(circle at 70% 80%, rgba(240,217,125,.08) 0%, transparent 60%) !important;
  animation:sectionGlow 20s ease-in-out infinite !important;
  opacity:0.36 !important;
}

/* How It Works Section - Enhanced Glow */
.how-section{
  background:linear-gradient(135deg,#12100c 0%,#231f17 55%,#12100c 100%) !important;
  box-shadow:inset 0 0 40px rgba(212,175,55,.15),0 0 30px rgba(212,175,55,.1) !important;
}
.how-section::before{
  background:radial-gradient(circle at 40% 30%, rgba(212,175,55,.12) 0%, transparent 55%),
             radial-gradient(circle at 60% 70%, rgba(240,217,125,.08) 0%, transparent 55%) !important;
  animation:sectionGlow 22s ease-in-out infinite reverse !important;
  opacity:0.44 !important;
}

/* Footer - Enhanced Shine & Glow */
.site-footer{
  background:linear-gradient(135deg,#0d0b08 0%,#1c1913 50%,#0d0b08 100%) !important;
  box-shadow:inset 0 0 50px rgba(212,175,55,.2),0 0 40px rgba(212,175,55,.15) !important;
  position:relative !important;
}

/* Section Glow Animation */
@keyframes sectionGlow{
  0%{opacity:0.4}
  50%{opacity:0.51}
  100%{opacity:0.4}
}

/* Enhanced Title Glow in Dark Sections - With Moving Shine Like Hero */
.kn-section .section-title,
.how-section .section-title,
.site-footer .footer-tag{
  background:linear-gradient(135deg,#f7e9b4 0%,#d4af37 42%,#f0d97d 70%,#b8952e 100%) !important;
  background-size:220% auto !important;
  background-position:-220% center !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:shine 7s linear infinite !important;
  letter-spacing:1px !important;
  font-weight:700 !important;
}

/* Shine Animation - Moving Gold Gradient */
@keyframes shineMoving{
  0%{background-position:-220% center}
  50%{background-position:0% center}
  100%{background-position:220% center}
}

/* Footer Logo - With Shine Effect */
.footer-tag{
  background:linear-gradient(135deg,#f7e9b4 0%,#d4af37 42%,#f0d97d 70%,#b8952e 100%) !important;
  background-size:220% auto !important;
  background-position:-220% center !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:shine 7s linear infinite !important;
  font-weight:600 !important;
}

/* Footer Column Headers - With Shine */
.footer-col h4{
  background:linear-gradient(135deg,#f0d97d 0%,#d4af37 50%,#f7e9b4 100%) !important;
  background-size:220% auto !important;
  background-position:-220% center !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:shine 8s linear infinite !important;
}

/* How It Works & Legal Knowledge Card Titles - With Shine */
.kn-card h5,
.how-card h3{
  text-shadow:0 0 15px rgba(212,175,55,.6),0 0 30px rgba(212,175,55,.3) !important;
  transition:text-shadow .3s !important;
}
.kn-card:hover h5,
.how-card:hover h3{
  text-shadow:0 0 25px rgba(212,175,55,.8),0 0 50px rgba(212,175,55,.5) !important;
}

/* Enhanced Card Glow in Dark Sections */
.kn-card{
  box-shadow:0 0 15px rgba(212,175,55,.15) !important;
  transition:all .42s !important;
}
.kn-card:hover{
  box-shadow:0 0 30px rgba(212,175,55,.35),inset 0 0 15px rgba(212,175,55,.1) !important;
}

.how-card{
  box-shadow:0 0 15px rgba(212,175,55,.15) !important;
  transition:all .42s !important;
}
.how-card:hover{
  box-shadow:0 0 30px rgba(212,175,55,.35),inset 0 0 15px rgba(212,175,55,.1) !important;
}

.social-row a{
  box-shadow:0 0 8px rgba(212,175,55,.2) !important;
  transition:all .35s !important;
}
.social-row a:hover{
  box-shadow:0 0 16px rgba(212,175,55,.5) !important;
}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed;left:20px;bottom:20px;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;z-index:9000;
  box-shadow:0 8px 24px rgba(37,211,102,.4);transition:all .38s;
  animation:waPulse 2.6s ease-in-out infinite;will-change:transform;
  min-height:44px;min-width:44px;
}
.wa-float:hover{transform:scale(1.12)}
@keyframes waPulse{0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.4)}50%{box-shadow:0 8px 32px rgba(37,211,102,.7)}}

/* ---------- ENHANCED SECTION-SPECIFIC ANIMATIONS ---------- */

/* Preloader: curtain split reveal */
@keyframes curtainSplitLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}
@keyframes curtainSplitRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
.se-pre-con.loaded{animation:none}

/* Split-letter stagger for hero title */
@keyframes splitLetterRise{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.hero h1{animation:shine 7s linear infinite,fadeInScale .9s cubic-bezier(.22,1,.36,1) 0.2s both}

/* Typewriter effect on hero tagline */
@keyframes typewriter{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
.hero-tag{animation:typewriter .8s cubic-bezier(.22,1,.36,1) 0.4s both}

/* Hero canvas particle field (simulated with background) */
@keyframes particleFloat{0%{opacity:0}15%{opacity:.8}85%{opacity:.8}100%{opacity:0}}
.hero::after{animation:floatOrb 16s ease-in-out infinite,floatVertical 8s ease-in-out infinite,particleFloat 8s ease-in-out infinite}

/* Button magnetic pull effect */
@keyframes magneticPull{0%{transform:translate(0,0)}50%{transform:translate(-4px,-2px)}100%{transform:translate(0,0)}}
.btn-gold:hover{animation:magneticPull .4s ease-out}

/* About section: word-by-word mask reveal + SVG border */
@keyframes wordReveal{0%{clip-path:inset(0 100% 0 0);opacity:0}100%{clip-path:inset(0 0 0 0);opacity:1}}
.about-card p{animation:fadeInScale .9s cubic-bezier(.22,1,.36,1) 0.3s both;line-height:1.9}
.about-card::before{animation:slideInLeft .7s cubic-bezier(.22,1,.36,1) 0.5s both}
@keyframes drawBorder{from{stroke-dashoffset:300;opacity:0}to{stroke-dashoffset:0;opacity:1}}

/* Course card 3D tilt */
.course-card{perspective:1000px;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.course-card:hover{transform:rotateX(-4deg) rotateY(4deg)}

/* Ken Burns zoom on course images */
@keyframes kenBurns{0%{transform:scale(1)}100%{transform:scale(1.12)}}
.course-card:hover .course-thumb img{animation:kenBurns 1.4s cubic-bezier(.22,1,.36,1) forwards}

/* Course price count-up animation (enhanced via JS) */
.course-price{position:relative}

/* Free Notes: alternating entrance + emoji badge flip */
.notes-section .list-card:nth-child(odd){animation:slideInLeft .8s cubic-bezier(.22,1,.36,1) both}
.notes-section .list-card:nth-child(even){animation:slideInRight .8s cubic-bezier(.22,1,.36,1) both}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* Emoji badge 3D flip */
@keyframes flipY{0%{transform:rotateY(90deg);opacity:0}100%{transform:rotateY(0);opacity:1}}
.list-icon{font-size:clamp(28px,5vw,36px);animation:flipY .7s cubic-bezier(.22,1,.36,1) both}

/* Bare Acts: horizontal marquee ticker + stamp effect */
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
@keyframes marqueeLoop{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.acts-section .list-card{animation:slideInLeft .8s cubic-bezier(.22,1,.36,1) both}
@keyframes stampEffect{0%{transform:scale(1.08);opacity:0;box-shadow:0 8px 16px rgba(212,175,55,.3)}100%{transform:scale(1);opacity:1;box-shadow:0 2px 10px rgba(212,175,55,.08)}}
.acts-section .list-card.in{animation:stampEffect .6s cubic-bezier(.22,1,.36,1)}
.acts-ticker{white-space:nowrap;overflow:hidden;animation:marqueeLoop 25s linear infinite;will-change:transform}

/* Rules: expand height on hover + scales emoji swing */
@keyframes pendulum{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.rules-section .list-card:hover .list-icon{animation:pendulum 1.2s ease-in-out}

/* Legal Knowledge: magnetic cards + ripple on click */
@keyframes ripple{0%{width:0;opacity:1}100%{width:300px;opacity:0}}

/* Inquiry Form: floating labels + border draw-in + liquid fill */
@keyframes labelFloat{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-24px);opacity:1;font-size:11px}}
@keyframes labelFloatOut{0%{transform:translateY(-24px);font-size:11px}100%{transform:translateY(0);font-size:12px}}

.form-section .field{position:relative}
.form-section .field label{
  position:absolute;top:11px;left:13px;font-size:12px;
  transition:all .3s cubic-bezier(.22,1,.36,1);pointer-events:none;
  background:var(--white);padding:0 2px;
}
.form-section .field input:focus + label,
.form-section .field input:not(:placeholder-shown) + label{
  animation:labelFloat .3s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes borderDrawRight{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.form-section .field input:focus{
  animation:borderDrawRight .35s cubic-bezier(.22,1,.36,1);
  border-color:var(--gold);
}

@keyframes liquidFill{0%{background-position:0% 0%}100%{background-position:200% 0%}}
.form-section .btn-gold:hover{background-size:200% 100%;animation:liquidFill .8s ease}

/* Govt Exams: SVG timeline path draw + fade-in cards */
@keyframes timelineStroke{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.exams-section .list-card.in{animation:slideInLeft .8s cubic-bezier(.22,1,.36,1)}

/* Course Enquiry: cascade up fields */
@keyframes cascadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.enquiry-section .field{animation:cascadeUp .6s cubic-bezier(.22,1,.36,1) both}
.enquiry-section .field:nth-child(1){animation-delay:.06s}
.enquiry-section .field:nth-child(2){animation-delay:.12s}
.enquiry-section .field:nth-child(3){animation-delay:.18s}
.enquiry-section .field:nth-child(4){animation-delay:.24s}
.enquiry-section .field:nth-child(5){animation-delay:.30s}
.enquiry-section .field:nth-child(6){animation-delay:.36s}
.enquiry-section .field:nth-child(7){animation-delay:.42s}

/* Why Us: icon animations + card flip */
@keyframes iconPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.why-card .why-icon{transition:all .42s}
.why-card:hover .why-icon{animation:iconPulse .6s ease}

@keyframes cardFlipX{from{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}
.why-card.in{animation:cardFlipX .7s cubic-bezier(.22,1,.36,1)}

/* How It Works: SVG connector + count-up numbers + card lift */
@keyframes pathDraw{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}
@keyframes numberCountUp{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
.how-num{animation:numberCountUp 1s cubic-bezier(.22,1,.36,1) 0.3s both}

@keyframes liftUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.how-card.in{animation:liftUp .7s cubic-bezier(.22,1,.36,1)}

/* Latest Legal Knowledge: shimmer skeleton + sheen sweep */
@keyframes shimmerSkeleton{0%{opacity:.4}50%{opacity:.8}100%{opacity:.4}}
@keyframes sheenSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.updates-section .list-card.in{animation:fadeInScale .8s cubic-bezier(.22,1,.36,1)}

/* Gallery: parallax on scroll + cross-fade photos + caption slide-up */
@keyframes photoSwap{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.gallery-section .album:hover .album-imgs img:first-child{animation:photoSwap 1.2s ease}
@keyframes captionSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.album-body{animation:captionSlideUp .5s cubic-bezier(.22,1,.36,1)}

/* Contact: icon pulse sequence + drop-and-bounce */
@keyframes pulseSequence{0%{box-shadow:0 0 0 0 rgba(212,175,55,.6)}70%{box-shadow:0 0 0 10px rgba(212,175,55,0)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}}
.contact-ico{animation:pulseSequence 2.4s ease-out infinite}

@keyframes dropBounce{0%{opacity:0;transform:translateY(-20px)}60%{transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
.contact-item:first-child .contact-ico{animation:dropBounce .8s cubic-bezier(.22,1,.36,1) both}

/* Footer: rise columns + top border draw + social flip + magnetic pull */
@keyframes riseBottomToTop{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.footer-col{animation:riseBottomToTop .8s cubic-bezier(.22,1,.36,1) both}
.footer-col:nth-child(1){animation-delay:.1s}
.footer-col:nth-child(2){animation-delay:.2s}
.footer-col:nth-child(3){animation-delay:.3s}

@keyframes socialFlip{0%{transform:rotateY(-90deg) scale(.8);opacity:0}100%{transform:rotateY(0) scale(1);opacity:1}}
.social-row a{
  animation:none !important;
  perspective:1000px;transition:all .35s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  opacity:1 !important;
  transform:rotateY(0) scale(1) !important;
}
.social-row a:hover{
  transform:translateY(-6px) scale(1.15) rotateZ(10deg);
}

/* ---------- GLOBAL MOTION LAYER ---------- */

/* Custom cursor dot with lagging outer ring */
@keyframes cursorPulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,.6)}100%{box-shadow:0 0 0 8px rgba(212,175,55,0)}}

/* Smooth inertial scroll effect (lerp-based) */
html.smooth-scroll{scroll-behavior:smooth}

/* Stats counter animation (count-up) */
@keyframes counterRoll{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Stats section styling (can be added to hero or dedicated section) */
.stats-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;
  margin:40px 0;animation:fadeInScale .9s cubic-bezier(.22,1,.36,1) 0.5s both;
  padding:30px;background:linear-gradient(135deg,rgba(212,175,55,.05),rgba(240,217,125,.02));
  border-radius:12px;border:1px solid rgba(212,175,55,.15);
}
.stat-item{text-align:center;padding:15px}
.stat-value{
  font-family:'Playfair Display',serif;font-size:clamp(24px,5vw,40px);font-weight:900;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:counterRoll 1.2s cubic-bezier(.22,1,.36,1) both;
  display:block;margin-bottom:6px;will-change:contents;
}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}

/* Testimonial carousel styling */
.testimonial-carousel{
  display:grid;grid-template-columns:1fr;gap:20px;
  animation:fadeInScale .9s cubic-bezier(.22,1,.36,1) 0.6s both;
}
.testimonial-item{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:24px;box-shadow:var(--shadow-soft);
  animation:slideInLeft .8s cubic-bezier(.22,1,.36,1) both;
}
.carousel-dots{text-align:center;margin-top:20px}
.carousel-dots span{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--gold);margin:0 6px;cursor:pointer;opacity:.4;
  transition:opacity .35s;animation:dotPulse .8s ease-in-out infinite;
}
.carousel-dots span.active{opacity:1;animation:none}

/* Testimonial carousel indicators */
@keyframes dotPulse{0%,100%{opacity:.4}50%{opacity:1}}
.carousel-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin:0 6px;cursor:pointer;opacity:.4;transition:opacity .35s}
.carousel-dots span.active{animation:dotPulse .8s ease-in-out infinite}

/* RESPECT PREFERS-REDUCED-MOTION for all new animations */
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important;
  }
  .hero h1, .hero-tag, .btn-gold:hover,
  .course-card, .course-card:hover,
  .notes-section .list-card,
  .acts-section .list-card,
  .rules-section .list-card:hover,
  .kn-card, .kn-card:hover,
  .form-section .field input:focus,
  .form-section .field label,
  .form-section .btn-gold:hover,
  .why-card, .how-num, .how-card.in,
  .updates-section .list-card.in,
  .gallery-section .album:hover,
  .contact-ico, .social-row a,
  .stats-strip, .carousel-dots span.active,
  .title-rule, .list-icon, .contact-item:first-child .contact-ico,
  .footer-col, .about-card p, .about-card::before,
  .nav-menu > li > a, .preloader-ring, .preloader-text{
    transform:none!important;
  }
  /* Ensure content is fully visible without animations */
  .reveal, .reveal.in{opacity:1;transform:none}
  .course-card.reveal, .course-card.reveal.in{transform:none;opacity:1}
  .list-card.reveal, .list-card.reveal.in{transform:none;opacity:1}
  .album.reveal, .album.reveal.in{transform:none;opacity:1}
  .kn-card.reveal, .kn-card.reveal.in{transform:none;opacity:1;filter:none}
}

/* ---------- RESPONSIVE: TABLET ---------- */
@media(max-width:1200px){
  .kn-grid{grid-template-columns:repeat(5,1fr)}
  .nav-menu{gap:10px}
  .nav-menu > li > a{font-size:12px}
}
@media(max-width:1024px){
  .topbar .wrap{gap:12px}
  .topbar-contact{gap:16px}
  .topbar-contact a{font-size:10px}
  .nav-menu{gap:8px}
  .nav-menu > li > a{font-size:11.5px}
  .has-drop > a::before{font-size:9px;margin-left:3px}
  .burger{display:flex}
  .nav-menu,.btn-login{display:none}
  .mobile-menu{display:block}
  .course-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .kn-grid{grid-template-columns:repeat(4,1fr)}
  .kn-card{min-height:95px;padding:17px 11px}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .contact-layout{grid-template-columns:1fr;gap:28px}
  .list-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .topbar{max-height:100px;padding:6px 0;border-bottom:1px solid rgba(212,175,55,.22)}
  .topbar .wrap{flex-direction:column;gap:8px}
  .topbar-tags{display:block;font-size:11px;padding:2px 0}
  .topbar-contact{gap:12px}
  .topbar-contact a{font-size:10px}
  .form-actions{gap:12px}
  .section-head{margin-bottom:32px}
  .nav-logo img{height:52px}
  .burger{min-width:40px;min-height:40px;padding:6px}
  .burger span{width:22px;height:2px}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .course-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .hero-logo{height:120px;margin-bottom:16px}
  .hero{padding:70px 0 80px}
  .about-card{padding:28px 22px}
  .form-row{grid-template-columns:1fr;gap:12px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .kn-grid{grid-template-columns:repeat(3,1fr);padding:8px 0}
  .kn-card{min-height:90px;padding:15px 9px}
  .contact-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .why-grid,.how-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .wrap{padding:0 14px}
  .topbar{max-height:120px}
  .topbar .wrap{gap:6px}
  .topbar-tags{font-size:10px;padding:1px 0}
  .topbar-contact{gap:8px;width:100%;flex-wrap:wrap;justify-content:center}
  .topbar-contact a{font-size:9px;gap:3px}
  .topbar-contact img{width:11px;height:11px}
  .form-actions{flex-direction:column;gap:10px}
  .form-actions .btn{width:100%}
  .hero-logo{height:100px}
  .hero{padding:60px 0 70px}
  .hero h1{font-size:clamp(32px,5.5vw,50px)}
  .hero-tag{font-size:clamp(14px,2vw,20px)}
  .hero-btns .btn{flex:1 1 calc(50% - 6px);min-width:140px;max-width:none;padding:11px 16px;font-size:12px}
  .section-title{font-size:clamp(22px,3vw,32px)}
  .eyebrow{font-size:10px;padding:5px 12px}
  .course-grid,.kn-grid{grid-template-columns:1fr}
  .list-grid{grid-template-columns:1fr}
  .course-thumb{height:160px}
  .nav-logo img{height:44px}
  .btn-login{display:none!important}
  .burger{display:flex!important;min-width:44px;min-height:44px}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-links{justify-content:center}
  .wa-float{left:12px;bottom:12px;width:48px;height:48px}
  .kn-grid{padding:6px 0}
  .kn-card{min-height:80px;padding:13px 7px}
  .kn-card:hover{transform:translateY(-6px) scale(1.03)}
}
@media(max-width:480px){
  .wrap{padding:0 12px}
  .topbar{max-height:140px}
  .topbar .wrap{gap:5px}
  .topbar-tags{font-size:9px;padding:1px 0}
  .topbar-contact{gap:6px}
  .topbar-contact a{font-size:8px;gap:2px}
  .topbar-contact img{width:10px;height:10px}
  .hero{padding:50px 0 60px}
  .hero-logo{height:85px}
  .hero-desc{font-size:13.5px}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%}
  .kn-card{min-height:75px;padding:11px 6px}
  .kn-grid{padding:4px 0}
  .kn-card:hover{transform:translateY(-5px) scale(1.02)}
  .btn{padding:10px 16px;font-size:12px;min-height:42px}
  .course-body h3{font-size:14px}
  .course-body p{font-size:11.5px}
  .footer-col h4{font-size:14px;margin-bottom:12px}
  .footer-col li a{font-size:12px}
  .title-rule{margin:8px auto 0}
}

/* ================================================================
   CONVERSION LAYER — appended only, no existing rule modified
   ================================================================ */

/* ---- 14. STICKY ENROLL BAR ---- */
.enroll-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9500;
  background:linear-gradient(135deg,#12100c 0%,#2a251b 55%,#12100c 100%);
  border-top:2px solid var(--gold);
  box-shadow:0 -10px 34px rgba(18,16,12,.32);
  transform:translateY(130%);transition:transform .55s cubic-bezier(.22,1,.36,1);
  padding:10px 0;
}
.enroll-bar.show{transform:translateY(0)}
.enroll-bar-inner{
  max-width:1220px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.enroll-bar-text{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#cfc7ae}
.enroll-bar-text b{
  font-family:'Playfair Display',serif;font-size:15.5px;font-weight:700;
  background:var(--grad-gold);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shine 7s linear infinite;
}
.enroll-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.enroll-bar .btn{padding:10px 20px;font-size:12.5px;min-height:42px}
.enroll-bar-close{
  background:transparent;border:1px solid rgba(212,175,55,.4);color:var(--gold-light);
  width:34px;height:34px;min-width:34px;border-radius:50%;cursor:pointer;
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:all .3s;font-family:'Poppins',sans-serif;
}
.enroll-bar-close:hover{background:rgba(212,175,55,.18);border-color:var(--gold);transform:rotate(90deg)}
body.enroll-bar-on .wa-float{bottom:86px}
body.enroll-bar-on .progress-wrap{bottom:92px}

/* ---- 15. COUNSELLOR POPUP ---- */
.counsel-pop{
  position:fixed;right:22px;bottom:90px;z-index:9400;
  width:min(330px,calc(100vw - 44px));
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;box-shadow:0 20px 48px rgba(30,26,16,.2);
  padding:18px 20px 20px;
  transform:translateY(26px) scale(.96);opacity:0;visibility:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease,visibility .4s;
}
.counsel-pop.show{transform:translateY(0) scale(1);opacity:1;visibility:visible}
body.enroll-bar-on .counsel-pop{bottom:156px}
.counsel-pop h5{
  font-family:'Playfair Display',serif;font-size:16px;font-weight:700;
  color:var(--black);margin-bottom:6px;padding-right:24px;line-height:1.35;
}
.counsel-pop p{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:14px}
.counsel-pop .btn{width:100%;justify-content:center;padding:11px 16px;font-size:12.5px}
.counsel-close{
  position:absolute;top:10px;right:10px;width:26px;height:26px;
  background:transparent;border:none;color:var(--muted);font-size:19px;line-height:1;
  cursor:pointer;border-radius:50%;transition:all .25s;font-family:'Poppins',sans-serif;
}
.counsel-close:hover{background:var(--gold-pale);color:var(--gold-dark)}

/* ---- 17. TESTIMONIAL CAROUSEL (activates existing .testimonial-* rules) ---- */
.testimonial-carousel{position:relative}
.testimonial-item{display:none;text-align:center}
.testimonial-item.active{display:block}
.testimonial-stars{color:var(--gold);font-size:14px;letter-spacing:4px;margin-bottom:12px}
.testimonial-quote{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:clamp(15px,2.2vw,18.5px);line-height:1.75;color:var(--ink);margin-bottom:16px;
}
.testimonial-who{font-size:12.5px;font-weight:700;color:var(--gold-dark)}
.testimonial-who span{display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:3px}

/* ---- 18. IDLE WHATSAPP EXPANSION ---- */
.wa-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;
  transition:max-width .5s cubic-bezier(.22,1,.36,1),margin-left .5s cubic-bezier(.22,1,.36,1);
}
.wa-float.expanded{width:auto;padding:0 20px;border-radius:26px}
.wa-float.expanded .wa-label{max-width:200px;margin-left:9px}

/* ---- 19. SMART FORM NUDGE ---- */
@keyframes ctaNudge{
  0%,100%{box-shadow:0 8px 26px rgba(212,175,55,.32)}
  50%{box-shadow:0 0 0 10px rgba(212,175,55,0),0 12px 36px rgba(212,175,55,.62)}
}
.btn-nudge{animation:ctaNudge 1.7s ease-in-out infinite}

/* ---- 20. PROGRESS RING -> ENROLL CTA ---- */
.pw-cta-hit{position:absolute;inset:0;border-radius:inherit;display:none}
.progress-wrap.cta-mode .pw-cta-hit{display:block}
.progress-wrap.cta-mode{
  width:auto;height:46px;padding:0 22px;border-radius:24px;
  background:var(--grad-gold);background-size:200% 100%;
  box-shadow:0 12px 30px rgba(212,175,55,.45);
  animation:goldFlow 5s linear infinite;
}
.progress-wrap.cta-mode svg{display:none}
.progress-wrap.cta-mode::after{
  content:'Enroll Now';position:static;display:block;
  font-size:12.5px;font-weight:700;color:var(--black);
  line-height:46px;white-space:nowrap;text-align:center;
}

@media(max-width:768px){
  .enroll-bar{padding:8px 0}
  .enroll-bar-inner{gap:8px;justify-content:center}
  .enroll-bar-text{width:100%;justify-content:center;text-align:center;font-size:12px}
  .enroll-bar-text b{font-size:13.5px}
  .enroll-bar-actions{width:100%;justify-content:center}
  .enroll-bar .btn{padding:9px 14px;font-size:11.5px;min-height:40px}
  body.enroll-bar-on .wa-float{bottom:112px}
  body.enroll-bar-on .progress-wrap{bottom:118px}
  .counsel-pop{right:12px;left:12px;width:auto;bottom:84px}
  body.enroll-bar-on .counsel-pop{bottom:184px}
}
@media(max-width:600px){
  .enroll-bar-text{font-size:11.5px}
  .progress-wrap.cta-mode{padding:0 16px}
  .progress-wrap.cta-mode::after{font-size:11.5px}
}

/* ================================================================
   MOTION LAYER — appended only, no existing rule modified.
   Transforms live on an injected .cc-stage wrapper so they never
   collide with the existing 3D-tilt handler on .course-card.
   ================================================================ */
.cc-stage{
  position:relative;display:flex;
  transition:opacity .35s ease, filter .35s ease;
  will-change:transform;
}
.cc-stage > .course-card{flex:1;min-width:0;cursor:pointer}
.course-grid{perspective:1400px;grid-auto-flow:row dense}

/* --- 2 + 3. Featured promotion (its reflow is the FLIP reorder) --- */
.cc-stage.featured{grid-column:span 2}
.hot-badge{
  position:absolute;top:13px;right:13px;z-index:5;
  background:var(--grad-gold);color:var(--black);
  font-size:10.5px;font-weight:800;letter-spacing:.3px;
  padding:5px 12px;border-radius:20px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(212,175,55,.45);
  opacity:0;transform:translateY(-8px) scale(.9);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.cc-stage.featured .hot-badge{opacity:1;transform:translateY(0) scale(1)}

/* --- 8. Traveling highlight ring --- */
.cc-stage.ring-focus::after{
  content:'';position:absolute;inset:-6px;border-radius:16px;
  border:2px solid var(--gold);pointer-events:none;z-index:4;
  animation:ringPulse 1.6s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(212,175,55,.10),0 0 20px rgba(212,175,55,.35)}
  50%{box-shadow:0 0 0 10px rgba(212,175,55,.04),0 0 34px rgba(212,175,55,.6)}
}
.cc-stage.ring-focus .course-link{color:var(--gold-dark);letter-spacing:.4px}

/* --- 9. Animated pointer hint --- */
.hint-ptr{
  position:absolute;right:16px;bottom:54px;z-index:6;
  width:0;height:0;pointer-events:none;opacity:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:11px solid var(--gold);
  filter:drop-shadow(0 2px 5px rgba(212,175,55,.55));
}
.cc-stage.ring-focus .hint-ptr{animation:ptrBounce .62s cubic-bezier(.22,1,.36,1) 3}
@keyframes ptrBounce{
  0%{opacity:0;transform:translateY(-11px)}
  40%{opacity:1;transform:translateY(3px)}
  70%{opacity:1;transform:translateY(-5px)}
  100%{opacity:0;transform:translateY(0)}
}

/* --- 10. Spotlight dimming --- */
.course-grid.spotlight .cc-stage{opacity:.4;filter:saturate(.5)}
.course-grid.spotlight .cc-stage.spot{opacity:1;filter:none;z-index:3}

/* --- 11. CTA sheen sweep --- */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{
  content:'';position:absolute;top:-10%;left:-70%;width:45%;height:120%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);
  transform:skewX(-20deg);pointer-events:none;
  animation:btnSheen 4.2s ease-in-out infinite;
}
@keyframes btnSheen{0%,70%{left:-70%}100%{left:140%}}

/* --- 12. Link arrow pull --- */
.cl-arrow{display:inline-block;animation:arrowPull 1.5s ease-in-out infinite}
@keyframes arrowPull{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.course-card:hover .cl-arrow{animation:none}

/* --- 13. Click ripple --- */
.ripple-dot{
  position:absolute;border-radius:50%;pointer-events:none;z-index:7;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  background:radial-gradient(circle,rgba(212,175,55,.6) 0%,rgba(212,175,55,0) 70%);
  animation:rippleGrow .62s ease-out forwards;
}
@keyframes rippleGrow{from{transform:scale(0);opacity:.9}to{transform:scale(18);opacity:0}}

/* --- 6. Infinite course ticker --- */
.course-ticker{
  overflow:hidden;margin:30px 0 4px;padding:12px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(212,175,55,.06),rgba(240,217,125,.02));
  position:relative;z-index:1;
}
.course-ticker .acts-ticker{
  display:flex;align-items:center;width:max-content;
  animation:tickerSlide 40s linear infinite;
}
.course-ticker:hover .acts-ticker{animation-play-state:paused}
@keyframes tickerSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-item{
  display:inline-flex;align-items:center;gap:10px;padding:0 22px;
  white-space:nowrap;font-size:12.5px;color:var(--ink);
  border-right:1px dashed var(--line);cursor:pointer;
}
.tick-item b{font-family:'Playfair Display',serif;font-size:13.5px;font-weight:700}
.tick-item i{font-style:normal;font-weight:800;color:var(--gold-dark)}
.tick-item u{
  text-decoration:none;font-size:10.5px;font-weight:800;color:var(--black);
  background:var(--grad-gold);padding:3px 11px;border-radius:12px;
}

@media(max-width:768px){
  .cc-stage.featured{grid-column:auto}
  .course-grid{perspective:none}
  .hot-badge{font-size:9.5px;padding:4px 9px;top:10px;right:10px}
  .hint-ptr{display:none}
}

/* ================================================================
   FOOTER ENHANCEMENT — appended only, no existing rule modified
   ================================================================ */

/* .site-footer::before is claimed by two rules in the original sheet:
   the guild-pattern rule, then the 3px gold bar whose `background`
   shorthand wipes it. The pattern therefore never painted. Restore it
   on the untouched ::after, layered under two ambient gold glows. */
.site-footer{overflow:hidden}
.site-footer::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(212,175,55,.14) 0%, transparent 55%),
    radial-gradient(circle at 88% 94%, rgba(240,217,125,.10) 0%, transparent 52%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" preserveAspectRatio="xMidYMid slice"><defs><pattern id="gfoot" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><g stroke="%23d4af37" stroke-width="2" fill="none" opacity="0.08"><circle cx="50" cy="50" r="30"/><path d="M50,20 L50,80 M20,50 L80,50"/></g></pattern></defs><rect width="1000" height="200" fill="url(%23gfoot)"/></svg>');
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:auto,auto,120px 120px;
}
.site-footer .wrap{position:relative;z-index:2}

/* --- Column headings: bright gold segment riding the existing rule --- */
.footer-col h4{position:relative}
.footer-col h4::after{
  content:'';position:absolute;left:0;bottom:-1px;width:34px;height:2px;
  background:var(--grad-gold);border-radius:2px;
  box-shadow:0 0 10px rgba(212,175,55,.55);
}

/* --- Links: chevron that grows in on hover --- */
.footer-col li a::before{
  content:'';display:inline-block;width:0;overflow:hidden;
  opacity:0;color:var(--gold);vertical-align:baseline;
  transition:width .3s ease,opacity .3s ease,margin-right .3s ease;
}
.footer-col li a:hover::before{width:9px;opacity:1;margin-right:5px}

/* --- Contact rows become soft tiles --- */
.footer-contact-item{
  margin-bottom:9px;padding:8px 10px;border-radius:10px;
  border:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.footer-contact-item:hover{
  background:rgba(212,175,55,.07);
  border-color:rgba(212,175,55,.2);
  transform:translateX(4px);
}
.footer-contact-ico{
  background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(240,217,125,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- Social: circular, gradient fill on hover, real icons --- */
.social-row a svg{
  width:17px;height:17px;position:relative;z-index:2;
  fill:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.social-row a:hover svg{transform:scale(1.12)}

/* --- Logo block --- */
.footer-logo img{transition:transform .5s cubic-bezier(.22,1,.36,1),filter .5s ease}
.footer-logo:hover img{
  transform:translateY(-4px) scale(1.03);
  filter:drop-shadow(0 12px 28px rgba(212,175,55,.48));
}
.footer-tag{position:relative;padding-bottom:18px}
.footer-tag::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:56px;height:2px;border-radius:2px;background:var(--grad-gold);opacity:.75;
}

/* --- Structure: bridge the two stacked grids, divide the columns --- */
.site-footer .footer-grid + .footer-grid{
  padding-top:30px;border-top:1px solid rgba(212,175,55,.1);
}
@media(min-width:1025px){
  .footer-col + .footer-col{
    border-left:1px solid rgba(212,175,55,.1);padding-left:30px;
  }
}

/* --- Bottom bar: pipe separators become gold dots, links get an underline --- */
.footer-links .sep{
  font-size:0;width:4px;height:4px;border-radius:50%;
  background:rgba(212,175,55,.5);display:inline-block;vertical-align:middle;
}
.footer-links a{position:relative;padding-bottom:2px}
.footer-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--grad-gold);transition:width .32s ease;
}
.footer-links a:hover::after{width:100%}
.footer-bottom{margin-top:6px}

@media(max-width:1024px){
  .footer-col + .footer-col{border-left:none;padding-left:0}
}
@media(max-width:768px){
  .site-footer .footer-grid + .footer-grid{padding-top:22px}
  .social-row{justify-content:flex-start}
  .footer-contact-item{padding:7px 9px}
}

/* ================================================================
   CTA MARK LAYER — appended only, no existing rule modified.
   Mirrors the courses traveling-ring + pointer-hint interaction.
   One marker travels each section: every card's "View All" in turn,
   then the section button. Only the marker animates — no card moves.
   ================================================================ */
.notes-section .section-cta,
.acts-section .section-cta,
.rules-section .section-cta,
.exams-section .section-cta,
.updates-section .section-cta{position:relative}

.notes-section .section-cta .btn,
.acts-section .section-cta .btn,
.rules-section .section-cta .btn,
.exams-section .section-cta .btn,
.updates-section .section-cta .btn{position:relative}

/* outline, not a pseudo-element: .btn-gold sets overflow:hidden, which
   would clip anything drawn outside the button box */
.section-cta .btn.cta-mark{
  outline:2px solid var(--gold);outline-offset:6px;
  animation:ctaRingPulse 1.6s ease-in-out infinite;
}
@keyframes ctaRingPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(212,175,55,.10),0 0 20px rgba(212,175,55,.35)}
  50%{box-shadow:0 0 0 10px rgba(212,175,55,.04),0 0 34px rgba(212,175,55,.6)}
}

.cta-ptr{
  position:absolute;left:50%;margin-left:-7px;top:-20px;z-index:6;
  width:0;height:0;pointer-events:none;opacity:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:11px solid var(--gold);
  filter:drop-shadow(0 2px 5px rgba(212,175,55,.55));
}
.section-cta.cta-mark-on .cta-ptr{animation:ctaPtrBounce .62s cubic-bezier(.22,1,.36,1) 3}
@keyframes ctaPtrBounce{
  0%{opacity:0;transform:translateY(-11px)}
  40%{opacity:1;transform:translateY(3px)}
  70%{opacity:1;transform:translateY(-5px)}
  100%{opacity:0;transform:translateY(0)}
}

/* per-card "View All →" marker — same ring, tighter halo for the
   smaller target. .go is inline, so the outline hugs the text run. */
.list-card .list-meta .go.cta-mark{
  outline:2px solid var(--gold);outline-offset:4px;
  border-radius:6px;color:var(--gold-dark);letter-spacing:.4px;
  animation:goRingPulse 1.6s ease-in-out infinite;
}
@keyframes goRingPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(212,175,55,.10),0 0 10px rgba(212,175,55,.35)}
  50%{box-shadow:0 0 0 5px rgba(212,175,55,.05),0 0 18px rgba(212,175,55,.6)}
}

@media(hover:hover){
  .section-cta .btn.cta-mark:hover{animation-play-state:paused}
  .list-card:hover .list-meta .go.cta-mark{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
  .section-cta .btn.cta-mark{animation:none}
  .list-card .list-meta .go.cta-mark{animation:none}
  .cta-ptr{display:none}
}
@media(max-width:600px){
  .cta-ptr{display:none}
}

/* ================================================================
   DESIGN FIX LAYER — appended only. No existing rule, no markup and
   no script is modified; every declaration below either adds a new
   property or beats an earlier one on source order / specificity.
   ================================================================ */

/* ---- 1. FOOTER — the gold top edge and the ambient glow were both dead.
   The pattern-cleanup block sets `display:none !important` on
   .site-footer::before (which carried the 3px animated gold rule that
   separated the footer from the page) and on .site-footer::after, which
   also silently disabled the whole footer-enhancement ambience declared
   further down. Neither pseudo-element can be revived without editing
   those rules, so both layers are rebuilt as backgrounds on the element
   itself. ---- */
.site-footer{
  background:
    linear-gradient(90deg,#b8952e 0%,#f0d97d 28%,#d4af37 52%,#f7e9b4 76%,#b8952e 100%) top left/100% 3px no-repeat,
    radial-gradient(circle at 12% 14%, rgba(212,175,55,.16) 0%, transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(240,217,125,.11) 0%, transparent 52%),
    linear-gradient(135deg,#0d0b08 0%,#1c1913 50%,#0d0b08 100%) !important;
}

/* ---- 2. FOOTER — every floating widget docks to the bottom of the
   viewport and landed straight on the legal links and the copyright:
   the WhatsApp button (bottom:20px, and much wider once it idles open),
   the progress ring in "Enroll Now" mode (bottom:26px) and the sticky
   enrolment bar (66px tall, which covered the bottom row completely).
   Reserve a safe zone under them; the footer background fills it. ---- */
.site-footer{padding-bottom:92px}
body.enroll-bar-on .site-footer{padding-bottom:166px}

/* ---- 3. Colour emoji (envelope, pin, phone, speech bubble) rendered in
   their native pink/red/blue — the only non-gold colour in the palette,
   and the loudest thing in the footer. Map them onto the theme: a bright
   gold on the dark footer, a deeper bronze on the light contact tiles. ---- */
.footer-contact-ico{filter:grayscale(1) sepia(1) saturate(4.5) hue-rotate(-6deg) brightness(1.1)}
.contact-ico{filter:grayscale(1) sepia(1) saturate(6) hue-rotate(-14deg) brightness(.82) contrast(1.15)}

/* ---- 4. FOOTER — footerGlow is declared !important, so all four contact
   icons pulsed non-stop and the hover glow in the original rule could
   never win against it. Park the animation on its first keyframe (no
   glow) and let hover/focus play it. ---- */
.footer-contact-ico{animation-play-state:paused !important}
.footer-contact-item:hover .footer-contact-ico,
.footer-contact-item:focus-within .footer-contact-ico{animation-play-state:running !important}

/* ---- 5. FOOTER — the column rules were border-left on the grid item, so
   they landed hard against the heading text instead of in the middle of
   the 25px gutter, and the matching padding-left made columns 2 and 3
   narrower than column 1 so nothing lined up on a common grid. Centre
   the rule in the gutter and give every column the same box. ---- */
@media(min-width:1025px){
  .footer-col{position:relative}
  .footer-col + .footer-col{border-left-color:transparent;padding-left:0}
  .footer-col + .footer-col::before{
    content:'';position:absolute;top:4px;bottom:4px;left:-12.5px;width:1px;
    background:linear-gradient(180deg,transparent 0%,rgba(212,175,55,.24) 16%,
               rgba(212,175,55,.24) 84%,transparent 100%);
  }
  /* Programs runs nine items deep, which left ~100px of dead space under
     the logo and ~80px under Quick Links. Two tracks close the row up. */
  .footer-grid:first-of-type .footer-col:nth-child(3) ul{columns:2;column-gap:20px}
  .footer-grid:first-of-type .footer-col:nth-child(3) li{break-inside:avoid}
}

/* ---- 6. FOOTER — the tagline at a flat 29px was the largest type on the
   page after the hero and drove column 1's height on its own. ---- */
.footer-tag{font-size:clamp(19px,1.5vw,23px)}

/* ---- 7. FOOTER — below 1025px the two-column grid left orphans (Programs
   alone on its row, Social Media alone on its), and below 769px every
   column stacked into one very long strip. Let the tracks fit the space
   and give the logo a full-width row of its own. ---- */
@media(max-width:1024px) and (min-width:561px){
  .footer-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
  .footer-logo{grid-column:1/-1}
}
@media(max-width:768px){
  .site-footer{padding-bottom:88px}
  body.enroll-bar-on .site-footer{padding-bottom:196px}
}

/* ---- 8. BUTTONS — .btn ends on display:flex (the second declaration in
   its own rule overrides the inline-block above it), so any button that
   is not already a flex item stretched to the full container width. All
   seven "View All …" section CTAs rendered as 1184px bars with the label
   pinned to the left edge. ---- */
.btn{display:inline-flex;justify-content:center;text-align:center}
.section-cta .btn{margin-left:auto;margin-right:auto}

/* ---- 9. HEADER — the dropdown caret is a ::before on an inline-block
   link, so it printed to the LEFT of the label. ::after is already the
   hover underline, so reorder the caret rather than move it. ---- */
.nav-menu .has-drop > a{display:inline-flex;align-items:center}
.nav-menu .has-drop > a::before{order:2}

/* ---- 10. HEADER — the dropdown's resting transition is 1.2s, so menus
   hung on screen for over a second after the pointer left. ---- */
.nav-menu li.has-drop .dropdown{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}

/* ---- 11. FORMS — the native file control was the one unstyled widget
   left in the enquiry form. ---- */
.field input[type=file]{padding:7px 10px;cursor:pointer}
.field input[type=file]::file-selector-button{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
  color:var(--black);background:var(--grad-gold);
  border:none;border-radius:6px;padding:8px 16px;margin-right:12px;
  cursor:pointer;transition:filter .3s ease,box-shadow .3s ease;
}
.field input[type=file]::file-selector-button:hover{
  filter:brightness(1.07);box-shadow:0 6px 16px rgba(212,175,55,.34);
}

/* ---- 12. Nothing in the sheet gave keyboard focus a visible state. ---- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.site-footer a:focus-visible,.enroll-bar a:focus-visible,
.wa-float:focus-visible{outline-color:var(--gold-light)}

/* ---- 13. MOBILE TYPE — LEGAL KNOWLEDGE + HOW IT WORKS.
   .kn-card h5 is clamp(7px,1.5vw,10px) and .kn-card span is
   clamp(5px,1.2vw,7.5px); on a 375px screen the viewport term collapses
   and both bottom out at their minimums, so a full-width card carried a
   7px title over a 5px label. The how-cards use flat desktop sizes that
   stay small once the grid drops to one column. Re-scale both for the
   width they actually get. ---- */
@media(max-width:768px){
  .kn-card{min-height:auto;padding:15px 12px}
  .kn-card h5{font-size:13.5px;line-height:1.35;margin-bottom:5px}
  .kn-card span{font-size:10px;letter-spacing:.9px}
  .how-card{padding:26px 22px}
  .how-num{font-size:34px;margin-bottom:10px}
  .how-card h3{font-size:19px;margin-bottom:7px}
  .how-card p{font-size:14px;line-height:1.75}
}
@media(max-width:600px){
  .kn-card{min-height:auto;padding:16px 14px}
  .kn-card h5{font-size:15px}
  .kn-card span{font-size:10.5px}
}
@media(max-width:480px){
  .kn-card{min-height:auto;padding:15px 13px}
  .kn-card h5{font-size:14.5px}
  .kn-card span{font-size:10px}
  .how-card{padding:24px 18px}
  .how-card h3{font-size:18px}
  .how-card p{font-size:13.5px}
}

/* ---- 14. The reduced-motion block resets animation with `*`, which the
   later !important animations outrank on specificity, so they carried on
   playing. Stop them by name, and give the gradient-clipped headings a
   solid fill so they stay readable once the shine is frozen. ---- */
@media(prefers-reduced-motion:reduce){
  .footer-contact-ico,.footer-logo img,.footer-tag,.footer-col h4,
  .kn-section::before,.how-section::before,
  .kn-section .section-title,.how-section .section-title,
  .wa-float,.progress-wrap.cta-mode,.enroll-bar-text b,
  .carousel-dots span.active{animation:none !important}
  .footer-tag,.footer-col h4,
  .kn-section .section-title,.how-section .section-title{
    background:none !important;
    -webkit-text-fill-color:var(--gold-light) !important;
  }
}

/* ---- 15. MOBILE — WhatsApp float position.
   At rest it sat at left:12px / bottom:12px while the progress ring on the
   right sat at bottom:26px, so the pair read as crooked and the button hugged
   the screen edge, which on a modern phone puts it under the gesture bar.
   With the enrolment bar up it was worse: the stacking offsets assume a ~90px
   bar, but the bar wraps to 117px below 601px and to 180px below 361px, so the
   button sat ON the bar at 375px and disappeared behind it entirely at 320px.
   Mirror the ring at rest, and lift both clear of the bar at each width where
   it actually wraps (measured: 89px / 117px / 180px, plus a 12px gap). ---- */
@media(max-width:600px){
  .wa-float{left:26px;bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .progress-wrap{bottom:calc(26px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:768px){
  body.enroll-bar-on .wa-float,
  body.enroll-bar-on .progress-wrap{bottom:101px}
}
@media(max-width:600px){
  body.enroll-bar-on .wa-float,
  body.enroll-bar-on .progress-wrap{bottom:129px}
}
@media(max-width:360px){
  body.enroll-bar-on .wa-float,
  body.enroll-bar-on .progress-wrap{bottom:192px}
  body.enroll-bar-on .counsel-pop{bottom:192px}
}

/* ---- 16. FOOTER — logo halo and section glow, matched to the hero.
   The footer logo ran `logoGlow` on a 2.8s loop, so its halo pulsed
   non-stop; the hero logo carries one steady drop-shadow instead. And
   the footer glowed as two fixed radial hot-spots in opposite corners
   plus a gold rim, where the hero glows as a single slow warm wash
   drifting across the whole section (heroShift, 22s). Give the footer
   the hero's treatment: a steady halo on the logo, and the hero's warm
   band sweeping across the whole footer on the same 22s ease loop.

   The hero drives that sweep with `background-position`, which the footer
   cannot reuse: two earlier rules pin the footer's background with an
   `!important` shorthand, and an important author declaration outranks a
   CSS animation, so an animated position would never move. The sweep is
   therefore driven by a registered custom property that slides the warm
   stop through the gradient instead — same motion, no position needed.
   `--fw` is also set as a normal declaration so the gradient still
   resolves where @property is unsupported. The gold top edge that fix 1
   carried as a background layer moves onto a border to keep the
   background a single layer. ---- */
.footer-logo img{
  animation:none;
  filter:drop-shadow(0 10px 30px rgba(212,175,55,.42));
}
@property --fw{syntax:'<percentage>';inherits:false;initial-value:-10%}
@keyframes footerHeroWash{
  0%{--fw:-10%}
  50%{--fw:110%}
  100%{--fw:-10%}
}
.site-footer{
  --fw:-10%;
  background-image:linear-gradient(125deg,
    #0d0b08 calc(var(--fw) - 55%),
    #1c1913 calc(var(--fw) - 22%),
    #3a3120 var(--fw),
    #1c1913 calc(var(--fw) + 22%),
    #0d0b08 calc(var(--fw) + 55%)) !important;
  background-color:#0d0b08 !important;
  /* fix 1 sized its first layer 100%x3px for the gold bar it carried;
     that size survives here, so reset it or the wash renders as a strip */
  background-size:auto !important;
  background-repeat:no-repeat !important;
  background-position:0 0 !important;
  box-shadow:none !important;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,#b8952e 0%,#f0d97d 28%,#d4af37 52%,#f7e9b4 76%,#b8952e 100%) 1;
  animation:footerHeroWash 22s ease infinite;
}
@media(prefers-reduced-motion:reduce){
  .site-footer{animation:none !important}
}

/* ---- 17. FOOTER — centre every column on one axis.
   The footer was left-aligned throughout: headings and their gold
   underline segment sat hard left, contact rows ran icon-beside-text,
   the social row packed left, and the bottom bar pushed the legal links
   and the copyright to opposite edges. Centre all of it.
   Three left-anchored details have to follow the text or they break the
   centre line: the heading's gold segment, the link chevron (it grows
   inline, so on a centred link it shoved the label sideways on hover —
   lifted out of flow here), and the two horizontal hover nudges, which
   pulled centred items off axis. ---- */
.site-footer{text-align:center}

/* heading rule segment, centred under the centred label */
.footer-col h4::after{left:50%;transform:translateX(-50%)}

/* The logo image is display:block from the global img reset, so the
   column's text-align could never centre it — it rendered 328px wide in
   a 378px column and sat 25px left of the axis, even before this change. */
.footer-logo img{margin-left:auto;margin-right:auto}

/* links: chevron out of flow, so hovering cannot shift the centred text */
.footer-col li a{position:relative}
.footer-col li a::before{
  position:absolute;right:100%;top:0;
  width:auto;overflow:visible;margin-right:4px;
  transition:opacity .3s ease;
}
.footer-col li a:hover::before{width:auto;margin-right:4px}
.footer-col li a:hover{transform:none}

/* contact rows: stack the icon above its text instead of beside it */
.footer-contact-item{flex-direction:column;align-items:center;gap:7px}
.footer-contact-item:hover{transform:translateY(-3px)}

/* social row and bottom bar */
.social-row{justify-content:center}
.footer-bottom{flex-direction:column;justify-content:center;gap:9px}
.footer-links{justify-content:center}

/* ---- 18. CONTACT FORM — it collapsed to its content width on phones.
   `.form-card` carries `margin:0 auto`, and auto inline margins on a
   GRID ITEM make it shrink-to-fit instead of stretching to its track.
   The 2-column `.contact-layout` masks that on desktop, because the
   card's max-content is wider than the track. Once the layout stacks
   and `.form-row` drops to one column, max-content is just the widest
   placeholder — so the card, its inputs and both the "Send Message" and
   "WhatsApp Us" buttons squeezed to ~187px inside a 351px column, with
   75px of dead space either side. An explicit width leaves the auto
   margins no free space to absorb, so the card fills the track. ---- */
@media(max-width:768px){
  .contact-layout .form-card{width:100%;max-width:100%}
}

/* Programs keeps the two tracks fix 5 gave it to close the row's dead
   space, but a full-width multicol left its items 99px off the column
   axis. Shrink the list to its content and centre it as one block, so
   both tracks sit symmetrically about the centre line. */
@media(min-width:1025px){
  .footer-grid:first-of-type .footer-col:nth-child(3) ul{
    width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;
  }
}
/* ---- hero-style periodic background flash: driven by JS (see bottom of script) ---- */
.kn-section,.how-section,.site-footer{background-size:320% 320% !important}

/* ---- footer logo: extra brightness ---- */
.footer-logo img{filter:brightness(3) drop-shadow(0 6px 22px rgba(212,175,55,.45)) !important}

/* ---- contact section: symmetric balanced layout ---- */
.contact-layout{align-items:center;grid-template-columns:1fr 1.4fr;gap:44px}
.contact-layout .form-card{width:100%;max-width:100%}
.contact-items{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-item{margin:0;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px;min-height:110px;justify-content:flex-start}
.contact-ico{flex-shrink:0}
@media(max-width:1082px){.contact-items{grid-template-columns:1fr}}
@media(max-width:768px){
  .contact-layout{grid-template-columns:1fr;gap:28px;align-items:stretch}
  .contact-intro{order:2}
  .form-card{order:1}
  .contact-items{grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:600px){
  .contact-layout{gap:24px}
  .contact-items{grid-template-columns:1fr;gap:12px}
  .contact-item{padding:15px 14px;min-height:auto;gap:8px}
  .contact-ico{font-size:20px}
}
@media(max-width:480px){
  .contact-layout{gap:20px}
  .contact-items{grid-template-columns:1fr;gap:10px}
  .contact-item{padding:14px 12px;min-height:auto;gap:6px}
  .form-card{padding:clamp(18px,4vw,24px) clamp(14px,3vw,24px)}
  .contact-ico{font-size:18px}
}
@media(max-width:400px){.contact-items{grid-template-columns:1fr}}

/* ---- kn-card: larger text + icon ---- */
.kn-card h5{font-size:clamp(15px,1.8vw,19px)}
.kn-card span:not(.kn-ico){font-size:clamp(11px,1.2vw,13px)}
.kn-card span.kn-ico{font-size:clamp(24px,2.8vw,32px);display:block;margin-bottom:8px;line-height:1;filter:drop-shadow(0 0 3px rgba(212,175,55,.25));color:initial;letter-spacing:0;text-transform:none;font-weight:normal}
@media(max-width:768px){.kn-card h5{font-size:17px}.kn-card span:not(.kn-ico){font-size:11px}.kn-card span.kn-ico{font-size:28px}}
@media(max-width:600px){.kn-card h5{font-size:18px}.kn-card span:not(.kn-ico){font-size:11.5px}.kn-card span.kn-ico{font-size:30px}}
@media(max-width:480px){.kn-card h5{font-size:17px}.kn-card span:not(.kn-ico){font-size:11px}.kn-card span.kn-ico{font-size:28px}}

/* ---- dark-section card titles: soften the gold halo that washed out the text ---- */
.kn-card h5,
.how-card h3{text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 6px rgba(212,175,55,.18) !important}
.kn-card:hover h5,
.how-card:hover h3{text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 10px rgba(212,175,55,.3) !important}
.kn-card:hover,
.how-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 16px rgba(212,175,55,.2) !important}

/* ---- inner-page hero frame: faded to the .46 opacity the section SVG patterns use ---- */
.page-hero .hero-frame{opacity:.46}

/* ---- inner-page hero frame: a further 10% fade ---- */
.page-hero .hero-frame{opacity:.36}