/* ============================================================
   SOPAN Educational and Training Institute
   style.css — core design system, layout & components
   Author: Custom build (no frameworks)
   ------------------------------------------------------------
   TABLE OF CONTENTS
   01. Design tokens
   02. Reset & base
   03. Utilities & typography
   04. Buttons
   05. Global effects (mesh, cursor glow, progress, preloader)
   06. Header & navigation
   07. Mobile menu
   08. Hero
   09. About
   10. Why choose
   11. Courses
   12. Admission timeline
   13. Statistics
   14. Gallery + lightbox
   15. Testimonials
   16. CTA banner
   17. Contact & form
   18. Footer & back-to-top
   19. Reveal animations
============================================================ */

/* ===== 01. DESIGN TOKENS ================================== */
:root{
  /* Brand — red sampled from the official SOPAN logo */
  --red:            #B01327;
  --red-deep:       #8B0E1E;
  --red-soft:       #E24A5C;
  --red-tint:       #FBEEF0;

  /* Secondary */
  --navy:           #14263C;
  --navy-soft:      #24374F;
  --white:          #FFFFFF;
  --grey-50:        #FAFAFB;
  --grey-100:       #F3F4F6;
  --grey-200:       #E6E8EC;
  --grey-400:       #9AA1AC;
  --grey-600:       #5C6674;
  --ink:            #1B2431;

  /* Surfaces */
  --bg:             #FCFCFD;
  --bg-gradient:    radial-gradient(1200px 700px at 82% -8%, #FCF1F2 0%, transparent 60%),
                    radial-gradient(900px 600px at 0% 20%, #F2F5FA 0%, transparent 55%),
                    linear-gradient(180deg,#FFFFFF 0%, #FBFBFD 100%);
  --glass:          rgba(255,255,255,.62);
  --glass-brd:      rgba(255,255,255,.75);

  /* Type */
  --f-head:         'Poppins', system-ui, sans-serif;
  --f-body:         'Inter', system-ui, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(20,38,60,.06);
  --sh-sm: 0 6px 18px -6px rgba(20,38,60,.12);
  --sh-md: 0 18px 40px -18px rgba(20,38,60,.22);
  --sh-lg: 0 40px 80px -32px rgba(20,38,60,.30);
  --sh-red:0 22px 44px -20px rgba(176,19,39,.55);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: .2s;
  --t: .4s;
  --t-slow: .8s;

  /* Layout */
  --max: 1200px;
  --gut: 24px;
  --sec-y: clamp(72px, 9vw, 132px);
  --header-h: 84px;
}

/* ===== 02. RESET & BASE =================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.72;
  color:var(--grey-600);
  background:var(--bg);
  background-image:var(--bg-gradient);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
svg{ width:1em; height:1em; fill:currentColor; }

::selection{ background:var(--red); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--grey-100); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--red),var(--red-deep));
  border-radius:var(--r-pill);
  border:2px solid var(--grey-100);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

/* ===== 03. UTILITIES & TYPOGRAPHY ======================== */
.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ position:relative; padding-block:var(--sec-y); }

h1,h2,h3,h4{
  font-family:var(--f-head);
  color:var(--ink);
  line-height:1.14;
  letter-spacing:-.025em;
  font-weight:700;
}

.h2{
  font-size:clamp(2rem,3.5vw,3.25rem);
  font-weight:700;
}

.section__head{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(44px,5vw,72px);
}

.section__sub{
  margin-top:14px;
  color:var(--grey-600);
  font-size:1.05rem;
}

.eyebrow{
  display:inline-block;
  font-family:var(--f-head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px;
  position:relative;
  padding-left:34px;
}
.eyebrow::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:24px; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--red));
}

.grad-text{
  background:linear-gradient(100deg,var(--red) 0%,var(--red-soft) 55%,var(--red-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head);
  font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--red);
  background:var(--red-tint);
  border:1px solid rgba(176,19,39,.16);
  padding:9px 18px;
  border-radius:var(--r-pill);
}
.pill::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 rgba(176,19,39,.55);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 10px rgba(176,19,39,0); }
  100%{ box-shadow:0 0 0 0 rgba(176,19,39,0); }
}

/* SVG section divider */
.divider{
  position:absolute; left:0; bottom:-1px;
  width:100%; height:90px;
  fill:var(--bg);
  pointer-events:none;
}

/* ===== 04. BUTTONS ======================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-head);
  font-weight:600; font-size:.92rem;
  padding:16px 30px;
  border-radius:var(--r-pill);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t) var(--ease-out),
             box-shadow var(--t) var(--ease-out),
             background var(--t) var(--ease),
             color var(--t) var(--ease),
             border-color var(--t) var(--ease);
  will-change:transform;
}
.btn svg{ width:1.05em; height:1.05em; }
.btn--sm{ padding:12px 24px; font-size:.85rem; }
.btn--block{ width:100%; }

.btn--primary{
  color:#fff;
  background:linear-gradient(120deg,var(--red) 0%,var(--red-deep) 100%);
  box-shadow:var(--sh-red);
}
.btn--primary::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--red-deep) 0%,var(--red) 100%);
  opacity:0; transition:opacity var(--t) var(--ease);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 28px 52px -18px rgba(176,19,39,.62); }
.btn--primary:hover::after{ opacity:1; }

.btn--ghost{
  color:var(--navy);
  background:rgba(255,255,255,.7);
  border:1px solid var(--grey-200);
  backdrop-filter:blur(10px);
  box-shadow:var(--sh-xs);
}
.btn--ghost:hover{ transform:translateY(-3px); border-color:var(--red); color:var(--red); box-shadow:var(--sh-sm); }

.btn--light{ background:#fff; color:var(--red); box-shadow:var(--sh-md); }
.btn--light:hover{ transform:translateY(-3px); }

.btn--outline-light{
  color:#fff; border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}
.btn--outline-light:hover{ background:rgba(255,255,255,.18); transform:translateY(-3px); }

.btn:active{ transform:translateY(-1px) scale(.99); }

/* Ripple */
.ripple{ position:relative; overflow:hidden; }
.ripple__wave{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.42);
  animation:ripple .62s var(--ease-out);
  pointer-events:none;
}
.btn--ghost .ripple__wave,
.btn--light .ripple__wave{ background:rgba(176,19,39,.20); }
@keyframes ripple{ to{ transform:scale(3.2); opacity:0; } }

/* ===== 05. GLOBAL EFFECTS =============================== */

/* Preloader */
.preloader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:var(--white);
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:grid; justify-items:center; gap:26px; }
.preloader__logo{ width:120px; animation:floaty 2.6s var(--ease) infinite; }
.preloader__bar{
  width:180px; height:3px; background:var(--grey-200);
  border-radius:var(--r-pill); overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:40%;
  background:linear-gradient(90deg,var(--red),var(--red-soft));
  border-radius:var(--r-pill);
  animation:load 1.1s var(--ease) infinite;
}
@keyframes load{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
@keyframes floaty{ 50%{ transform:translateY(-10px); } }

/* Scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:1200;
  height:3px; width:0%;
  background:linear-gradient(90deg,var(--red),var(--red-soft),var(--red-deep));
  box-shadow:0 0 14px rgba(176,19,39,.6);
  transition:width .1s linear;
}

/* Mouse-follow glow */
.cursor-glow{
  position:fixed; top:0; left:0; z-index:0;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(176,19,39,.09) 0%,transparent 65%);
  transition:opacity .5s var(--ease);
  will-change:transform;
}
body.has-pointer .cursor-glow{ opacity:1; }

/* Animated gradient mesh */
.mesh-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.mesh{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; }
.mesh--1{ width:46vw; height:46vw; top:-14vw; right:-10vw; background:#F6D6DB; animation:drift 22s var(--ease) infinite alternate; }
.mesh--2{ width:38vw; height:38vw; bottom:-12vw; left:-8vw;  background:#D8E2F0; animation:drift 28s var(--ease) infinite alternate-reverse; }
.mesh--3{ width:30vw; height:30vw; top:44%; left:52%;        background:#FBEBD8; opacity:.28; animation:drift 34s var(--ease) infinite alternate; }
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(4vw,5vw,0) scale(1.16); }
}

/* Glass card base */
.glass-card{
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:38px 32px;
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
  overflow:hidden;
}
.glass-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg,rgba(176,19,39,.55),transparent 42%,transparent 60%,rgba(20,38,60,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity var(--t) var(--ease);
  pointer-events:none;
}
.glass-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-md); }
.glass-card:hover::before{ opacity:1; }

/* ===== 06. HEADER ======================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             height var(--t) var(--ease),
             backdrop-filter var(--t) var(--ease);
}
.header.is-stuck{
  height:72px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 30px -18px rgba(20,38,60,.35);
  border-bottom:1px solid rgba(230,232,236,.7);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:flex; align-items:center; gap:13px; }
.brand__logo{
  width:auto; height:44px; object-fit:contain;
  transition:transform var(--t) var(--ease-out), height var(--t) var(--ease);
}
.header.is-stuck .brand__logo{ height:38px; }
.brand:hover .brand__logo{ transform:scale(1.06) rotate(-2deg); }
.brand__text{ display:grid; line-height:1.15; }
.brand__text strong{
  font-family:var(--f-head); font-weight:700; font-size:1.16rem;
  color:var(--navy); letter-spacing:.06em;
}
.brand__text small{
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--grey-400); font-weight:500;
}

.nav{ display:flex; align-items:center; gap:36px; }
.nav__list{ display:flex; gap:34px; }
.nav__link{
  position:relative;
  font-family:var(--f-head);
  font-weight:500; font-size:.94rem;
  color:var(--navy);
  padding:6px 0;
  transition:color var(--t-fast) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:linear-gradient(90deg,var(--red),var(--red-soft));
  border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.nav__link:hover,
.nav__link.is-active{ color:var(--red); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ display:none; }

.header__actions{ display:flex; align-items:center; gap:14px; }

/* Burger */
.burger{
  display:none;
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid var(--grey-200);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  position:relative;
}
.burger span{
  position:absolute; left:50%; width:20px; height:2px;
  background:var(--navy); border-radius:2px;
  transform:translateX(-50%);
  transition:transform .38s var(--ease-out), opacity .2s var(--ease), top .38s var(--ease-out);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger.is-open span:nth-child(1){ top:22px; transform:translateX(-50%) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:22px; transform:translateX(-50%) rotate(-45deg); }

/* ===== 07. MOBILE MENU ================================== */
.mobile-menu{
  position:fixed; inset:0; z-index:1100;
  background:linear-gradient(160deg,#fff 0%,#FCF4F5 100%);
  padding:28px var(--gut) 44px;
  display:flex; flex-direction:column;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease-out);
  visibility:hidden;
}
.mobile-menu.is-open{
  clip-path:circle(160% at calc(100% - 46px) 46px);
  visibility:visible;
}
.mobile-menu__head{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu__logo{ height:52px; width:auto; object-fit:contain; }
.mobile-menu__close{ font-size:2.4rem; line-height:1; color:var(--navy); padding:4px 10px; }

.mobile-menu__list{
  margin-top:auto; margin-bottom:auto;
  display:grid; gap:6px;
}
.mobile-menu__list a{
  display:block;
  font-family:var(--f-head);
  font-size:clamp(1.8rem,7vw,2.6rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:-.03em;
  padding:8px 0;
  opacity:0; transform:translateY(28px);
  transition:color var(--t-fast) var(--ease);
}
.mobile-menu.is-open .mobile-menu__list li a{
  animation:menuIn .6s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 70ms + 180ms);
}
.mobile-menu__list a:hover{ color:var(--red); }
@keyframes menuIn{ to{ opacity:1; transform:none; } }

.mobile-menu__foot{
  display:grid; gap:14px; justify-items:start;
  opacity:0; transform:translateY(24px);
}
.mobile-menu.is-open .mobile-menu__foot{
  animation:menuIn .6s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 70ms + 180ms);
}
.mobile-menu__tel{
  font-family:var(--f-head); font-weight:600; color:var(--red); letter-spacing:.04em;
}

/* ===== 08. HERO ========================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 48px);
  padding-bottom:120px;
  overflow:hidden;
  background:
    radial-gradient(900px 620px at 88% 8%, rgba(176,19,39,.10), transparent 62%),
    radial-gradient(760px 560px at 4% 62%, rgba(20,38,60,.08), transparent 60%),
    linear-gradient(178deg,#FFFFFF 0%,#FDF7F8 55%,#F7F5FA 100%);
}
.hero__grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:clamp(40px,5vw,80px);
  position:relative; z-index:2;
}

.hero__title{
  position:relative;
  font-size:clamp(2.6rem,5.4vw,4.6rem);
  font-weight:800;
  margin:24px 0 18px;
  letter-spacing:-.035em;
}
.hero__title .grad-text{
  position:relative;
  display:inline-block;
}
.hero__title .grad-text::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.06em;
  height:.12em;
  background:linear-gradient(90deg,rgba(176,19,39,.28),rgba(226,74,92,.12));
  border-radius:var(--r-pill);
  transform:scaleX(0); transform-origin:left;
  animation:underline 1.1s .9s var(--ease-out) forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }
.hero__sub{
  font-family:var(--f-head);
  font-size:clamp(1.1rem,1.7vw,1.5rem);
  font-weight:600;
  color:var(--navy);
  line-height:1.36;
  margin-bottom:20px;
}
.hero__text{ max-width:52ch; margin-bottom:36px; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; }

.hero__meta{
  display:flex; gap:clamp(24px,4vw,52px);
  margin-top:56px;
  padding-top:30px;
  border-top:1px solid var(--grey-200);
}
.hero__meta li{ display:grid; }
.hero__meta strong{
  font-family:var(--f-head); font-size:1.7rem; font-weight:700; color:var(--navy);
  line-height:1.1;
}
.hero__meta span{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-400); }

/* Visual */
.hero__visual{
  position:relative;
  isolation:isolate;
  padding:14px;
}

/* Soft coloured halo so the poster never floats on flat white */
.hero__halo{
  position:absolute; z-index:-2;
  inset:-14% -12% -18% -12%;
  background:radial-gradient(closest-side,rgba(176,19,39,.32),rgba(176,19,39,.06) 62%,transparent 78%);
  filter:blur(28px);
  animation:haloPulse 8s var(--ease) infinite;
}
@keyframes haloPulse{ 50%{ transform:scale(1.08); opacity:.82; } }

.hero__frame{
  position:relative;
  animation:heroFloat 8s var(--ease) infinite;
}
.hero-illo{
  width:100%; height:auto;
  display:block;
  overflow:visible;
}
@keyframes heroFloat{ 50%{ transform:translateY(-12px); } }

/* --- Illustration typography --- */
.illo-label{
  font-family:var(--f-head);
  font-size:16px; font-weight:600;
  fill:var(--grey-400);
  letter-spacing:.02em;
}
.illo-label--hi{ fill:var(--red); font-weight:700; }
.illo-chip-k{
  font-family:var(--f-head); font-size:10px; font-weight:600;
  letter-spacing:.16em; fill:#9AA1AC;
}
.illo-chip-v{
  font-family:var(--f-head); font-size:15px; font-weight:600;
  fill:var(--navy);
}

/* --- Illustration motion --- */
.illo-spin{ transform-origin:330px 250px; animation:spin 60s linear infinite; }

.illo-arrow{
  stroke-dashoffset:0;
  animation:dash 2.6s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-44; } }
.illo-arrowhead{ transform-origin:496px 152px; animation:floaty 4.6s var(--ease) infinite; }

/* Steps grow up from the baseline on first paint */
.illo-step rect{
  transform-origin:center bottom;
  transform-box:fill-box;
  animation:stepUp .9s var(--ease-out) backwards;
}
.illo-step--1 rect{ animation-delay:.35s; }
.illo-step--2 rect{ animation-delay:.5s; }
.illo-step--3 rect{ animation-delay:.65s; }
@keyframes stepUp{ from{ transform:scaleY(0); } }

.illo-step text{ animation:fadeUp .7s var(--ease-out) backwards; }
.illo-step--1 text{ animation-delay:.9s; }
.illo-step--2 text{ animation-delay:1s; }
.illo-step--3 text{ animation-delay:1.1s; }
@keyframes fadeUp{ from{ opacity:0; } }

.illo-figure{ animation:fadeUp .8s 1s var(--ease-out) backwards, floaty 5.4s 1.8s var(--ease) infinite; }
.illo-wave{ transform-origin:427px 308px; animation:wave 3.4s var(--ease) infinite; }
@keyframes wave{ 40%{ transform:rotate(-16deg); } 60%{ transform:rotate(4deg); } }
.illo-cap{ transform-origin:427px 262px; animation:capTilt 6s var(--ease) infinite; }
@keyframes capTilt{ 50%{ transform:rotate(-4deg) translateY(-3px); } }

.illo-chip--a{ animation:fadeUp .8s .8s var(--ease-out) backwards, floaty 5.8s var(--ease) infinite; }
.illo-chip--b{ animation:fadeUp .8s .95s var(--ease-out) backwards, floaty 6.6s .8s var(--ease) infinite; }
.illo-books{ animation:floaty 7s .4s var(--ease) infinite; }
.illo-openbook{ animation:floaty 6.2s 1.2s var(--ease) infinite; }

.illo-dot--1{ animation:floaty 5s var(--ease) infinite; }
.illo-dot--2{ animation:floaty 6.4s .6s var(--ease) infinite; }
.illo-dot--3{ animation:floaty 5.8s 1.1s var(--ease) infinite; }
.illo-dot--4{ animation:floaty 7.2s .3s var(--ease) infinite; }

.hero__glass{
  position:absolute;
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-md);
  padding:14px 20px;
  box-shadow:var(--sh-md);
  font-family:var(--f-head);
  font-size:.82rem; font-weight:600; color:var(--navy);
  white-space:nowrap;
}
.hero__glass{ z-index:3; box-shadow:0 24px 48px -22px rgba(20,38,60,.5), 0 0 0 1px rgba(255,255,255,.7); }
.hero__glass--1{ top:36%; left:-6%; animation:floaty 5.2s var(--ease) infinite; }
.hero__glass--2{ bottom:4%; right:-4%; gap:6px; animation:floaty 6.4s var(--ease) infinite .6s; }
.hero__glass--2 strong{ font-size:1rem; }
.hero__glass--2 strong{ color:var(--red); font-size:.86rem; }
.hero__glass--2 small{ color:var(--grey-400); font-weight:500; }
.hero__glass .dot{
  width:8px; height:8px; border-radius:50%; background:#2FBF71;
  box-shadow:0 0 0 0 rgba(47,191,113,.6);
  animation:pulse 2s infinite;
}

/* Decorative blobs & shapes */
.hero__blobs{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Fine dot grid — adds texture instead of flat white */
.hero__grid-pattern{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,38,60,.16) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 40%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 30% 40%,#000 0%,transparent 68%);
  opacity:.5;
}

.blob{ position:absolute; opacity:.72; }
.blob--a{
  width:560px; height:560px; right:-8%; top:2%;
  background:radial-gradient(circle at 30% 30%,#F7C3CB,#EFA6B2 55%,transparent 72%);
  border-radius:58% 42% 38% 62% / 46% 52% 48% 54%;
  filter:blur(6px);
  animation:morph 16s var(--ease) infinite;
}
.blob--b{
  width:360px; height:360px; left:30%; bottom:-10%;
  background:radial-gradient(circle at 60% 40%,#C9D8EE,#AFC4E1 58%,transparent 74%);
  border-radius:44% 56% 62% 38% / 58% 44% 56% 42%;
  opacity:.6; filter:blur(8px);
  animation:morph 20s var(--ease) infinite reverse;
}
.blob--c{
  width:300px; height:300px; left:-6%; top:16%;
  background:radial-gradient(circle at 50% 50%,#FBE0C8,#F6CBA6 60%,transparent 74%);
  border-radius:52% 48% 40% 60% / 50% 44% 56% 50%;
  opacity:.5; filter:blur(10px);
  animation:morph 24s var(--ease) infinite;
}
@keyframes morph{
  0%,100%{ border-radius:58% 42% 38% 62% / 46% 52% 48% 54%; transform:rotate(0deg) scale(1); }
  50%    { border-radius:38% 62% 56% 44% / 62% 38% 62% 38%; transform:rotate(12deg) scale(1.06); }
}

.shape{ position:absolute; will-change:transform; }
.shape--ring{
  width:150px; height:150px; right:44%; top:12%;
  border:1.5px dashed rgba(176,19,39,.28);
  border-radius:50%;
  animation:spin 26s linear infinite;
}
.shape--dot{
  width:14px; height:14px; left:6%; bottom:22%;
  background:var(--red); border-radius:50%; opacity:.35;
}
.shape--sq{
  width:74px; height:74px; right:6%; bottom:16%;
  border:1.5px solid rgba(20,38,60,.16);
  border-radius:18px;
  transform:rotate(22deg);
  animation:spin 34s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__scroll{
  position:absolute; left:50%; bottom:104px;
  transform:translateX(-50%);
  z-index:3;
  display:grid; justify-items:center; gap:8px;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--grey-400);
}
.hero__scroll span{
  width:1px; height:44px;
  background:linear-gradient(var(--grey-400),transparent);
  animation:scrollLine 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollLine{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ===== 09. ABOUT ======================================== */
.about__grid{
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:clamp(44px,5vw,86px);
  align-items:start;
}
.about__copy p{ margin-top:18px; max-width:56ch; }
.about__copy .h2{ margin-bottom:8px; }

.about__cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.feature{
  position:relative;
  background:#fff;
  border:1px solid var(--grey-200);
  border-radius:var(--r-md);
  padding:26px 24px;
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:transform var(--t) var(--ease-out),
             box-shadow var(--t) var(--ease-out),
             border-color var(--t) var(--ease);
}
.feature::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--red),var(--red-soft));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease-out);
}
.feature:hover{ transform:translateY(-7px); box-shadow:var(--sh-md); border-color:transparent; }
.feature:hover::after{ transform:scaleY(1); transform-origin:top; }
.feature__icon{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:13px;
  background:var(--red-tint);
  color:var(--red);
  font-size:1.1rem;
  margin-bottom:16px;
  transition:transform .45s var(--ease-out), background var(--t) var(--ease), color var(--t) var(--ease);
}
.feature:hover .feature__icon{ transform:rotate(-8deg) scale(1.08); background:var(--red); color:#fff; }
.feature h3{ font-size:1.02rem; margin-bottom:5px; }
.feature p{ font-size:.88rem; color:var(--grey-400); line-height:1.6; }

/* ===== 10. WHY CHOOSE =================================== */
.why{ background:linear-gradient(180deg,transparent,rgba(243,244,246,.6),transparent); }
.why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.why__num{
  font-family:var(--f-head);
  font-size:2.6rem; font-weight:800;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(176,19,39,.32);
  display:block; margin-bottom:18px;
  transition:-webkit-text-stroke-color var(--t) var(--ease), color var(--t) var(--ease);
}
.glass-card:hover .why__num{ color:var(--red-tint); -webkit-text-stroke-color:var(--red); }
.why__grid h3{ font-size:1.16rem; margin-bottom:10px; }
.why__grid p{ font-size:.93rem; }

/* ===== 11. COURSES ====================================== */
.courses__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  align-items:stretch;
}
.course{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  padding:34px 30px 32px;
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.course::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1.4px;
  background:conic-gradient(from 180deg,var(--red),var(--red-soft),var(--navy),var(--red));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.course::after{
  content:"";
  position:absolute; top:-40%; right:-30%;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(176,19,39,.10),transparent 68%);
  transition:transform .6s var(--ease-out);
}
.course:hover{ transform:translateY(-12px); box-shadow:var(--sh-lg); }
.course:hover::before{ opacity:1; }
.course:hover::after{ transform:scale(1.5); }

.course--featured{
  background:linear-gradient(170deg,#fff 0%,#FEF7F8 100%);
  box-shadow:var(--sh-md);
}
.course__ribbon{
  position:absolute; top:20px; right:-38px;
  transform:rotate(38deg);
  background:linear-gradient(90deg,var(--red),var(--red-deep));
  color:#fff;
  font-family:var(--f-head); font-size:.64rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 44px;
  box-shadow:var(--sh-sm);
}

.course__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.course__icon{
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:17px;
  background:linear-gradient(140deg,var(--red-tint),#fff);
  border:1px solid rgba(176,19,39,.14);
  color:var(--red); font-size:1.4rem;
  transition:transform .55s var(--ease-out);
}
.course:hover .course__icon{ transform:rotate(360deg) scale(1.06); }
.course__tag{
  font-family:var(--f-head); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy);
  background:var(--grey-100);
  border-radius:var(--r-pill);
  padding:7px 14px;
}
.course__title{
  font-size:1.34rem;
  line-height:1.28;
  margin-bottom:22px;
  min-height:3.4em;
}
.course__meta{ display:grid; gap:12px; margin-bottom:30px; }
.course__meta > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--grey-200);
}
.course__meta > div:last-child{ border-bottom:0; padding-bottom:0; }
.course__meta dt{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-400);
  flex:none;
}
.course__meta dd{
  font-family:var(--f-head); font-weight:600; font-size:.95rem; color:var(--navy);
  text-align:right;
}
.course__meta .fee{ color:var(--red); font-size:1.16rem; font-weight:700; }
.course .btn{ margin-top:auto; }

/* ===== 12. TIMELINE ===================================== */
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.timeline::before{
  content:"";
  position:absolute; top:27px; left:8%; right:8%;
  height:2px;
  background:linear-gradient(90deg,var(--red),rgba(176,19,39,.2),var(--navy));
  opacity:.35;
}
.timeline__item{ position:relative; text-align:center; padding-top:0; }
.timeline__dot{
  position:relative; z-index:2;
  display:grid; place-items:center;
  width:56px; height:56px; margin:0 auto 22px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--grey-200);
  font-family:var(--f-head); font-weight:700; color:var(--red);
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease-out), background .4s var(--ease), color .4s var(--ease);
}
.timeline__item:hover .timeline__dot{
  transform:translateY(-6px) scale(1.06);
  background:linear-gradient(140deg,var(--red),var(--red-deep));
  color:#fff; border-color:transparent;
}
.timeline__item h3{ font-size:1.06rem; margin-bottom:7px; }
.timeline__item p{ font-size:.88rem; color:var(--grey-400); max-width:24ch; margin-inline:auto; }

/* ===== 13. STATISTICS ================================== */
.stats{
  position:relative;
  background:linear-gradient(140deg,var(--navy) 0%,#0F1D2E 60%,#1A2C44 100%);
  color:#fff;
  padding-block:clamp(60px,7vw,96px);
  overflow:hidden;
}
.stats::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(700px 340px at 15% 0%,rgba(176,19,39,.30),transparent 62%),
             radial-gradient(600px 300px at 92% 100%,rgba(176,19,39,.18),transparent 60%);
}
.stats__grid{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  text-align:center;
}
.stat{ position:relative; }
.stat + .stat::before{
  content:"";
  position:absolute; left:-15px; top:12%; bottom:12%;
  width:1px; background:rgba(255,255,255,.13);
}
.stat__num{
  display:block;
  font-family:var(--f-head);
  font-size:clamp(2.3rem,3.6vw,3.4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 30%,#E7B7BE);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__num--text{ font-size:clamp(1.5rem,2.1vw,2rem); }
.stat p{
  margin-top:10px;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ===== 14. GALLERY + LIGHTBOX ========================== */
.masonry{
  columns:4;
  column-gap:18px;
}
.tile{
  position:relative;
  break-inside:avoid;
  margin-bottom:18px;
  border-radius:var(--r-md);
  overflow:hidden;
  cursor:zoom-in;
  box-shadow:var(--sh-sm);
  transform:translateZ(0);
}
.tile img{
  width:100%; height:auto;
  transition:transform .9s var(--ease-out), filter .6s var(--ease);
}
.tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(139,14,30,.72) 100%);
  opacity:0; transition:opacity .5s var(--ease);
}
.tile figcaption{
  position:absolute; left:22px; bottom:18px; z-index:2;
  font-family:var(--f-head); font-weight:600; font-size:.94rem; color:#fff;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease-out);
}
.tile:hover img{ transform:scale(1.09); }
.tile:hover::after,
.tile:hover figcaption{ opacity:1; }
.tile:hover figcaption{ transform:none; }

.lightbox{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center;
  background:rgba(11,18,28,.9);
  backdrop-filter:blur(8px);
  padding:5vw;
  animation:fadeIn .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width:100%; max-height:86vh;
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  animation:zoomIn .45s var(--ease-out);
}
.lightbox__close{
  position:absolute; top:24px; right:30px;
  font-size:2.6rem; line-height:1; color:#fff; opacity:.75;
  transition:opacity .3s var(--ease), transform .3s var(--ease-out);
}
.lightbox__close:hover{ opacity:1; transform:rotate(90deg); }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes zoomIn{ from{ opacity:0; transform:scale(.94); } }

/* ===== 15. TESTIMONIALS ================================ */
.marquee{
  overflow:hidden;
  padding-block:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; gap:24px; width:max-content;
  animation:slide 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

.quote{
  flex:0 0 auto;
  width:min(420px,84vw);
  background:#fff;
  border:1px solid var(--grey-200);
  border-radius:var(--r-lg);
  padding:32px 30px;
  box-shadow:var(--sh-xs);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 16px;
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.quote:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.quote img{
  grid-row:span 1;
  width:56px; height:56px; border-radius:50%;
  object-fit:cover;
  border:2px solid var(--red-tint);
}
.quote h3{ font-size:1rem; margin-bottom:1px; }
.quote span{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.quote p{
  grid-column:1 / -1;
  margin-top:16px;
  font-size:.95rem; line-height:1.72;
  position:relative; padding-left:20px;
}
.quote p::before{
  content:"“";
  position:absolute; left:-4px; top:-14px;
  font-family:var(--f-head); font-size:3.4rem; line-height:1;
  color:var(--red-tint);
}

/* ===== 16. CTA ========================================= */
.cta{
  position:relative;
  margin-block:var(--sec-y) 0;
  padding-block:clamp(64px,8vw,110px);
  background:linear-gradient(120deg,var(--red-deep) 0%,var(--red) 48%,#C93044 100%);
  color:#fff;
  overflow:hidden;
  text-align:center;
}
.cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(600px 300px at 20% 10%,rgba(255,255,255,.16),transparent 60%),
             radial-gradient(500px 260px at 85% 90%,rgba(20,38,60,.28),transparent 62%);
}
.cta__inner{ position:relative; }
.cta h2{
  color:#fff;
  font-size:clamp(1.9rem,3.6vw,3.1rem);
  margin-bottom:14px;
}
.cta p{ color:rgba(255,255,255,.82); font-size:1.06rem; margin-bottom:36px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ===== 17. CONTACT ===================================== */
.contact__grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(36px,4vw,64px);
  align-items:start;
}

.info-list{ display:grid; gap:22px; margin-bottom:32px; }
.info-list li{ display:flex; gap:18px; align-items:flex-start; }
.info-list__ico{
  flex:none;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:14px;
  background:var(--red-tint);
  color:var(--red);
  font-size:1.05rem;
  transition:transform .4s var(--ease-out), background .3s var(--ease), color .3s var(--ease);
}
.info-list li:hover .info-list__ico{ transform:translateY(-4px); background:var(--red); color:#fff; }
.info-list h3{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-400); margin-bottom:4px; font-weight:600; }
.info-list a, .info-list p{ font-family:var(--f-head); font-weight:500; color:var(--navy); font-size:1rem; line-height:1.55; }
.info-list a:hover{ color:var(--red); }

.map{
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--grey-200);
  box-shadow:var(--sh-sm);
  height:230px;
  filter:grayscale(.35) contrast(1.02);
  transition:filter .5s var(--ease);
}
.map:hover{ filter:none; }
.map iframe{ width:100%; height:100%; border:0; display:block; }

.socials{ display:flex; gap:12px; margin-top:26px; }
.socials a{
  position:relative;
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid var(--grey-200);
  background:#fff;
  color:var(--navy);
  overflow:hidden;
  transition:transform .35s var(--ease-out), background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Icons must be sized off the tile, not the inherited body font-size.
   Each glyph is sized individually — equal pixels ≠ equal optical weight. */
.socials a svg{ fill:currentColor; position:relative; z-index:1; transition:transform .35s var(--ease-out); }
.socials a[aria-label="Facebook"]  svg{ width:18px; height:18px; }
.socials a[aria-label="Instagram"] svg{ width:19px; height:19px; }
.socials a[aria-label="YouTube"]   svg{ width:22px; height:22px; }
.socials a[aria-label="WhatsApp"]  svg{ width:20px; height:20px; }

.socials a:hover{ transform:translateY(-5px); background:var(--red); color:#fff; border-color:transparent; }
.socials a:hover svg{ transform:scale(1.08); }

/* Footer variant — sits on dark navy */
.footer__follow{
  color:rgba(255,255,255,.55);
  font-family:var(--f-head);
  font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  margin-top:30px;
}
.socials--sm{ margin-top:14px; gap:11px; }
.socials--sm a{
  display:grid; place-items:center;   /* beats `.footer__col a { display:inline-block }` */
  width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;                          /* full white — not .9 */
  transform:none;                      /* neutralise .footer__col a:hover shift */
}
/* Footer glyphs run ~1px smaller than the light-background set */
.socials--sm a[aria-label="Facebook"]  svg{ width:17px; height:17px; }
.socials--sm a[aria-label="Instagram"] svg{ width:18px; height:18px; }
.socials--sm a[aria-label="YouTube"]   svg{ width:21px; height:21px; }
.socials--sm a[aria-label="WhatsApp"]  svg{ width:19px; height:19px; }

/* Brand-tinted fill that wipes up on hover */
.socials--sm a::before{
  content:"";
  position:absolute; inset:0;
  background:var(--brand,var(--red));
  transform:translateY(101%);
  transition:transform .4s var(--ease-out);
}
.socials--sm a:hover::before{ transform:none; }
.socials--sm a:hover{
  transform:translateY(-5px);
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 26px -12px var(--brand,var(--red));
}
.socials--sm a[aria-label="Facebook"]{  --brand:#1877F2; }
.socials--sm a[aria-label="Instagram"]{ --brand:#D62976; }
.socials--sm a[aria-label="YouTube"]{   --brand:#FF0000; }
.socials--sm a[aria-label="WhatsApp"]{  --brand:#25D366; }

/* Form */
.contact__form-wrap{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
  padding:clamp(28px,3vw,44px);
}
.form{ display:grid; gap:26px; }
.field{ position:relative; }
.field input,
.field select,
.field textarea{
  width:100%;
  background:#fff;
  border:1.5px solid var(--grey-200);
  border-radius:var(--r-md);
  padding:20px 18px 15px;
  font-size:.98rem;
  color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out);
  resize:vertical;
}
.field textarea{ padding-top:24px; min-height:130px; }
.field label{
  position:absolute; left:18px; top:17px;
  font-size:.96rem; color:var(--grey-400);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--ease-out), color .28s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(176,19,39,.10);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-11px) scale(.74);
  color:var(--red);
}
.field--select::after{
  content:"";
  position:absolute; right:20px; top:50%;
  width:8px; height:8px;
  border-right:1.6px solid var(--grey-400);
  border-bottom:1.6px solid var(--grey-400);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#D93B4B; box-shadow:0 0 0 4px rgba(217,59,75,.09); }
.error{
  display:block; min-height:0;
  font-size:.78rem; color:#D93B4B;
  margin-top:6px; padding-left:4px;
}
.form__note{ text-align:center; font-size:.9rem; min-height:1.2em; }
.form__note.is-ok{ color:#12855A; }

/* ===== 18. FOOTER ===================================== */
.footer{
  background:linear-gradient(160deg,#101E30 0%,var(--navy) 100%);
  color:rgba(255,255,255,.68);
  padding-top:clamp(60px,7vw,92px);
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--red),transparent 40%,transparent 60%,var(--red));
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr .8fr 1fr 1.1fr;
  gap:clamp(32px,4vw,60px);
  padding-bottom:56px;
}
.footer__brand img{
  height:62px; width:auto; object-fit:contain;
  background:#fff;
  border-radius:14px;
  padding:8px 12px;
  margin-bottom:20px;
}
.footer__brand p{ font-size:.94rem; max-width:38ch; line-height:1.75; }
.footer h3{
  color:#fff; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:22px; font-weight:600;
}
.footer__col ul{ display:grid; gap:12px; }
.footer__col a, .footer__contact li{ font-size:.94rem; transition:color .3s var(--ease), transform .3s var(--ease-out); display:inline-block; }
.footer__col a:hover{ color:#fff; transform:translateX(5px); }
.footer__contact li{ color:rgba(255,255,255,.68); }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  padding-block:26px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.84rem;
}
.heart{ display:inline-block; animation:beat 1.6s var(--ease) infinite; }
@keyframes beat{ 25%{ transform:scale(1.2); } 40%{ transform:scale(1); } }

/* Back to top */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:900;
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(140deg,var(--red),var(--red-deep));
  box-shadow:var(--sh-red);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.9);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out), visibility .4s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-4px) scale(1.05); }
.to-top svg{ width:1.3em; height:1.3em; }

/* ===== 19. REVEAL ANIMATIONS ========================== */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change:opacity,transform;
}
.reveal--right{ transform:translateX(48px) translateY(0); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}