/* ==========================================================================
   Weltec Institute - Data Analytics Landing Page
   --------------------------------------------------------------------------
    COLOUR NOTE (read before changing --accent or --gold):

    The palette is the one shipped on digital-marketing.weltec.in: a #265ADF
    blue carries every accent role, with #FFB400 gold as the second note.

      --accent       #265ADF  brand fill - tints, borders, icon glyphs and
                              backgrounds, badges, card outlines, the CTA /
                              offer bands, the callback card and the footer.
      --accent-ink   #265ADF  alias for --accent, used for accent TEXT.
                              4.99:1 on white, so it passes WCAG AA.
      --accent-grad  the 135deg #265ADF -> #3F87FE ramp every solid primary
                              button uses.
      --gold         #FFB400  the reference site's second accent - section
                              eyebrow pills, stars, the rule under each H2
                              (gold -> blue), the top edge of accent cards
                              (blue -> gold) and the floating call button.
                              1.87:1 on white, so gold NEVER carries text:
                              dark-on-gold uses --gold-ink, and gold text on
                              white uses --gold-text (#A35A00, 4.9:1).

    Icons, tints and borders are all derived from the accent at the same
    opacities the reference uses: .10 for icon backgrounds, .12 for card
    borders, .20 for pill outlines.
   ========================================================================== */

:root{
  /* brand - blue accent */
  --accent:            #265ADF;
  --accent-ink:        #265ADF;
  --accent-ink-hover:  #1F4CC4;
  --accent-tint:       #EEF3FF;
  --accent-tint-2:     #DEE9FF;
  --accent-border:     #CBDAFB;
  --accent-grad:       linear-gradient(135deg,#265ADF 0%,#3F87FE 100%);
  --accent-grad-hover: linear-gradient(135deg,#1F4CC4 0%,#3479EA 100%);

  /* gold - second accent */
  --gold:              #FFB400;
  --gold-2:            #FFC93C;
  --gold-deep:         #FF8A00;
  --gold-light:        #FFD166;
  --gold-ink:          #4A3200;
  --gold-text:         #A35A00;
  --gold-grad:         linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 100%);
  --gold-tint:         #FFF6E0;
  --gold-tint-2:       #FFEFC2;
  --gold-border:       #FFE39A;

  /* ink */
  --ink:               #131D37;
  --ink-2:             #2A3654;
  --body:              #5C5C5C;
  --muted:             #7E7E7E;

  /* surfaces */
  --white:             #FFFFFF;
  --page:              #F4F7FF;
  --grey-50:           #EEF3FF;
  --line:              #DFE6F7;
  --line-soft:         #ECF1FD;

  /* whatsapp - #23B33A is 2.62:1 on white, so white-text greens use --wa-ink */
  --wa:                #23B33A;
  --wa-2:              #56D062;
  --wa-ink:            #0E7C2A;
  --wa-ink-hover:      #0A6521;
  --wa-tint:           #F1FBF3;
  --wa-border:         #CDEED5;

  --star:              #FFB400;

  /* elevation */
  --sh-card:           0 1px 2px rgba(16,24,40,.04);
  --sh-raised:         0 8px 24px rgba(16,24,40,.06);

  /* fluid type - each clamp() lands on the old mobile size at 375px and the
     old desktop size at 1440px, so nothing moves at either end; the tablet
     range interpolates instead of stepping. */
  --fs-h1:             clamp(30px, 21.5px + 2.25vw, 54px);  /* 375→30 · 768→39 · 1024→45 · 1440→54 */
  --fs-h2:             clamp(26px, 19px + 1.6vw, 40px);     /* 375→26 · 768→31 · 1024→35 · 1440→40 */
  --fs-h3:             clamp(16px, 15.5px + .2vw, 18px);
  --fs-body:           clamp(15px, 14.6px + .1vw, 16px);
  /* one shared scale for the repeating text roles, so every section reads
     the same: eyebrow pill -> H2 -> section description -> card title ->
     card copy, plus one size for both CTA box headlines */
  --fs-cta:            clamp(20px, 16px + 1vw, 26px);       /* ctaband + offer band titles */
  --fs-eyebrow:        clamp(12px, 11.65px + .1vw, 13px);
  --fs-lead:           clamp(14px, 13.5px + .15vw, 15.5px); /* section descriptions + CTA subtext */
  --fs-card-title:     clamp(15px, 14.3px + .2vw, 17px);
  --fs-box-title:      clamp(18px, 16.6px + .4vw, 21px);    /* brochure / callback / compare panels */
  --fs-card-body:      clamp(13px, 12.65px + .1vw, 14px);
  --lh-lead:           1.7;
  --lh-copy:           1.6;
  --fs-stat:           clamp(30px, 24px + 1.4vw, 40px);
  --fs-formtitle:      clamp(20px, 19px + .3vw, 22px);
  --fs-rating:         clamp(28px, 25px + .8vw, 34px);

  /* rhythm - fluid for the same reason as the type scale */
  --section-y:         clamp(48px, 32px + 4.5vw, 96px);     /* 375→48 · 768→67 · 1024→78 · 1440→96 */
  --head-mb:           clamp(28px, 20px + 1.7vw, 44px);     /* .section-head margin-bottom */
  --card-pad:          clamp(18px, 16px + .5vw, 22px);
  --stack-gap:         clamp(24px, 16px + 2vw, 40px);       /* row gap once columns stack */

  /* 12-column grid - matched to digital-marketing.weltec.in:
     1200px container, 16px side gutter on phones / 24px from 640px up,
     12 / 20 / 24px column gaps by breakpoint. At 1440px the content edge
     sits (1440-1200)/2 + 24 = 144px in from either side of the viewport. */
  --container:         1200px;
  --gutter:            16px;
  --grid-gap:          12px;
  --cols:              12;

  --font-head:         "Poppins","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:         "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:where(h2,h3,h4){text-wrap:balance}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--body);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ------------------------------------------------------------- a11y ------ */
:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
  border-radius:4px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:200;
  background:var(--accent-grad);color:#fff;padding:10px 18px;
  border-radius:0 0 8px 8px;font-size:14px;font-weight:600;
}
.skip-link:focus{top:0}

/* -------------------------------------------------------- layout --------- */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}
/* gutter widens with the reference site's 640px step */
@media (min-width:640px){
  :root{--gutter:24px;--grid-gap:20px}
}
@media (min-width:1024px){
  :root{--grid-gap:24px}
}
.section{padding-block:var(--section-y)}

/* Every multi-column layout on the page is a 12-column grid. Children
   declare how many of the 12 tracks they span, so a 3-up card row is
   span 4, a 4-up row is span 3, a 7/5 split is span 7 + span 5, etc. */
.grid,
.hero__grid,
.split,
.compare,
.tst__track,
.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--grid-gap);
}
.grid > *,
.hero__grid > *,
.split > *,
.compare > *,
.tst__track > *,
.site-footer__grid > *{grid-column:span 12;min-width:0}
.section--tint{background:var(--grey-50)}
.section--white{background:var(--white)}

/* -------------------------------------------------------- typography ----- */
.eyebrow{
  display:inline-block;
  padding:8px 18px;border-radius:999px;
  background:var(--gold-grad);color:var(--gold-ink);
  box-shadow:0 2px 8px rgba(255,180,0,.26);
  font-size:var(--fs-eyebrow);font-weight:600;line-height:1;letter-spacing:.01em;
  margin-bottom:14px;
}
.section-head{text-align:center;margin-bottom:var(--head-mb)}
.section-head .eyebrow{margin-bottom:12px}

h1,h2,h3,.h2,.h3{font-family:var(--font-head);color:var(--ink)}

.h1{font-size:var(--fs-h1);font-weight:700;line-height:1.12;letter-spacing:-.02em}
.h2{font-size:var(--fs-h2);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.35}
/* line breaks that only make sense at desktop widths (see index.html) */
.br-lg{display:none}
@media (min-width:1024px){.br-lg{display:inline}}
/* ...and the phone-only twin: forces a break so a highlighted two-word phrase
   ("Data Skills", "Data Analytics") never splits across lines */
.br-sm{display:none}

.hl{color:var(--accent-ink)}

.lead{font-size:16px;line-height:1.6;max-width:68ch}
.section-lead{max-width:62ch;margin:14px auto 0;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--body)}
.card-p{font-size:var(--fs-card-body);line-height:var(--lh-copy);color:var(--body)}
.micro{font-size:12px;line-height:1.4;color:var(--muted)}

/* underline swash under a section H2 - the reference's gold -> blue divider */
.rule{
  display:block;margin:16px auto 0;width:120px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--accent));
}

/* ---------------------------------------------------------- buttons ------ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;font-family:var(--font-body);font-weight:600;
  line-height:1;text-align:center;
  transition:background-color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1),
             color .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
/* lift + pop on hover, a tactile press on click; the arrow/chevron nudges
   along with it so the button reads as "go" */
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.btn svg{flex:none;transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}
.btn:hover svg:first-child:not(:last-child){transform:scale(1.12)}

.btn--primary{background:var(--accent-grad);color:#fff;padding:14px 26px;font-size:14.5px}
.btn--primary:hover{background:var(--accent-grad-hover);box-shadow:0 10px 24px rgba(38,90,223,.35)}

.btn--wa{background:var(--wa-ink);color:#fff;padding:14px 26px;font-size:14.5px}
.btn--wa:hover{background:var(--wa-ink-hover);box-shadow:0 10px 24px rgba(14,124,65,.35)}

.btn--white{background:#fff;color:var(--accent-ink);padding:14px 26px;font-size:14.5px}
.btn--white:hover{background:var(--accent-tint);box-shadow:0 10px 24px rgba(0,0,0,.14)}

/* sheen that sweeps across the primary CTAs on hover */
.btn--shine::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  transform:skewX(-20deg);pointer-events:none;
  transition:left .6s cubic-bezier(.4,0,.2,1);
}
.btn--shine:hover::after{left:130%}
.btn--white.btn--shine::after{background:linear-gradient(105deg,transparent 0%,rgba(38,90,223,.16) 50%,transparent 100%)}

/* the slow ripple ring the floating call / WhatsApp buttons use (see
   .float-cta__btn), on the key in-page CTAs. The ring is animated on the
   button's own box-shadow because .btn clips overflow (for the sheen), which
   would cut off a pseudo-element ring. The hover glow rides along as a
   second shadow layer via --btn-glow, since the animation owns box-shadow. */
.btn--pulse{
  --btn-pulse:rgba(255,255,255,.6);
  --btn-glow:0 0 0 0 transparent;
  animation:btn-pulse 2.6s ease-out infinite;
}
.btn--white.btn--pulse:hover{--btn-glow:0 10px 24px rgba(0,0,0,.14)}
.btn--wa.btn--pulse:hover{--btn-glow:0 10px 24px rgba(14,124,65,.35)}
@keyframes btn-pulse{
  0%{box-shadow:0 0 0 0 var(--btn-pulse),var(--btn-glow)}
  70%{box-shadow:0 0 0 14px transparent,var(--btn-glow)}
  100%{box-shadow:0 0 0 0 transparent,var(--btn-glow)}
}

.btn--nav{padding:11px 22px;font-size:14px}
.btn--block{display:flex;width:100%;white-space:normal;line-height:1.35}
.brochure .btn--block{white-space:nowrap;font-size:13.5px;padding-inline:20px}
.btn--lg{height:48px;font-size:15px;padding-inline:26px}
.formcard .btn--primary{
  box-shadow:0 4px 16px rgba(38,90,223,.3);
  transition:box-shadow .15s ease,transform .15s ease,background-color .15s ease;
}
.formcard .btn--primary:hover{
  box-shadow:0 10px 26px rgba(38,90,223,.42);
  transform:translateY(-2px) scale(1.02);
}

/* -------------------------------------------------------------- pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;line-height:1.3;
}
/* the icon and the bold figure never shrink - only the label text wraps */
.pill svg,.pill b{flex:none}
.pill--tint{
  background:var(--accent-tint);border:1px solid var(--accent-border);
  color:var(--ink);padding:7px 14px;font-size:12.5px;
}
.pill--tint b{font-weight:600}
/* hero rating pill: solid gold chip, same theme yellow as the section
   eyebrows; rating, star and label all share one dark gold ink */
.pill--rating{
  background:var(--gold-grad);border:1.5px solid var(--gold-2);
  color:var(--gold-ink);padding:8px 16px 8px 14px;font-size:13px;font-weight:600;
  box-shadow:0 6px 18px rgba(255,180,0,.3);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .25s ease;
}
/* hover only lifts and deepens the glow - the gradient itself never changes
   (swapping it for a flat colour drops the gradient instantly and the
   background-colour fade shows through as a white flash) */
.pill--rating:hover{
  transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 10px 24px rgba(255,180,0,.4);
}
.pill--rating b{font-weight:700;font-size:14px;color:var(--gold-ink)}
.pill--rating svg{color:var(--gold-ink);margin-left:-3px}

/* ============================================================== NAV ======= */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease,border-color .25s ease,background-color .25s ease;
}
/* brand hairline along the very top: blue -> gold, same pairing as .rule */
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--accent) 0%,#3F87FE 55%,var(--gold) 100%);
}
.nav.is-stuck{box-shadow:0 10px 30px -10px rgba(19,29,55,.18);border-color:transparent;background:rgba(255,255,255,.95)}
/* 3-column grid: logo | links | CTA — the links capsule sits centred in the
   space between the logo and the actions, so the gaps either side match */
.nav__inner{height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.nav__logo{flex:none;display:flex;align-items:center;justify-self:start;transition:transform .2s ease}
.nav__logo:hover{transform:scale(1.03)}
.nav__logo img{height:38px;width:auto}

/* links sit centred between the logo and the CTA */
.nav__links{
  justify-self:center;
  display:flex;align-items:center;justify-content:center;gap:2px;
  padding:4px;border-radius:999px;
  background:var(--accent-tint);border:1px solid var(--line-soft);
}
.nav__links a{
  position:relative;display:inline-block;text-align:center;
  font-size:14px;font-weight:500;color:var(--ink-2);
  padding:9px 16px;border-radius:999px;line-height:1.2;
  transition:color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
/* animated underline that grows from the centre */
.nav__links a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink-hover));
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.nav__links a:hover,
.nav__links a:focus-visible{color:var(--accent-ink);background:var(--white)}
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-active::after{transform:scaleX(1)}
/* current section (set by initNavSpy in main.js) */
.nav__links a.is-active{
  color:var(--accent-ink);background:var(--white);font-weight:600;
  box-shadow:0 2px 8px rgba(38,90,223,.12);
}
.nav__links a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-border)}

/* right column: call pill + CTA */
.nav__actions{display:flex;align-items:center;gap:10px;justify-self:end}

.nav__call{
  display:inline-flex;align-items:center;gap:9px;
  height:46px;padding:0 18px 0 8px;border-radius:999px;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);
  background:var(--accent-tint);border:1px solid var(--accent-border);
  white-space:nowrap;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.nav__call-icon{
  display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  color:#fff;background:var(--accent-grad);
  box-shadow:0 3px 8px rgba(38,90,223,.3);
  transition:transform .25s ease;
}
.nav__call-text{display:flex;flex-direction:column;line-height:1.15}
.nav__call-text small{font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.nav__call-num{font-variant-numeric:tabular-nums}
.nav__call:hover,
.nav__call:focus-visible{
  color:var(--accent-ink);background:#fff;border-color:var(--accent);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(38,90,223,.18);
}
.nav__call:hover .nav__call-icon{transform:rotate(-12deg) scale(1.08)}
.nav__call:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-tint),0 8px 20px rgba(38,90,223,.18)}

.nav__cta{
  flex:none;height:46px;padding:0 20px 0 24px;gap:8px;border-radius:999px;
  background:var(--accent-grad);
  box-shadow:0 4px 14px rgba(38,90,223,.28);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.nav__cta:hover{
  background:var(--accent-grad);
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(38,90,223,.38);filter:brightness(1.05);
}
.nav__cta svg{flex:none;transition:transform .2s ease}
.nav__cta:hover svg{transform:translateX(3px)}
.nav__cta--mobile{display:none}
.nav__burger{
  display:none;flex:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--accent-border);border-radius:12px;margin-left:auto;
  background:var(--accent-tint);
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.nav__burger svg{color:var(--accent-ink);transition:color .2s ease,transform .25s ease}
.nav__burger:hover{border-color:var(--accent);box-shadow:0 6px 14px rgba(38,90,223,.16)}
.nav__burger[aria-expanded="true"]{background:var(--accent-grad);border-color:transparent;box-shadow:0 6px 16px rgba(38,90,223,.32)}
.nav__burger[aria-expanded="true"] svg{color:var(--white);transform:rotate(90deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:72px 0 auto 0;z-index:99;
  background:#fff;border-top:1px solid var(--line-soft);
  border-radius:0 0 22px 22px;
  box-shadow:0 28px 48px -16px rgba(19,29,55,.3);
  padding:10px var(--gutter) 20px;display:none;
  max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow:auto;
}
.drawer.is-open{display:block;animation:drawer-in .28s cubic-bezier(.22,1,.36,1)}
@keyframes drawer-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 12px;font-size:16px;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--line-soft);border-radius:12px;
  transition:color .2s ease,background-color .2s ease,padding-left .2s ease;
}
/* small chevron at the end of each plain link */
.drawer a:not(.drawer__call):not(.drawer__cta)::after{
  content:"";flex:none;width:7px;height:7px;margin-right:4px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);opacity:.35;transition:opacity .2s ease,transform .2s ease;
}
.drawer a:hover{color:var(--accent-ink);background:var(--accent-tint);padding-left:18px}
.drawer a:hover::after{opacity:1;transform:translateX(2px) rotate(45deg)}
.drawer a.is-active{color:var(--accent-ink);font-weight:600;background:var(--accent-tint);border-bottom-color:transparent}
.drawer a.is-active::after{opacity:1}
.drawer a:last-child{border-bottom:0}
/* phone number lives here on tablet/mobile - the header call pill is hidden */
.drawer .drawer__call{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:12px;
  min-height:48px;padding:12px 14px;border-radius:12px;border-bottom:0;
  background:var(--accent-tint);border:1px solid var(--accent-border);
  font-weight:600;color:var(--ink);
}
.drawer .drawer__call:hover{padding-left:14px;color:var(--accent-ink);background:var(--accent-tint)}
.drawer__call-icon{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  color:#fff;background:var(--accent-grad);
}
.drawer__call span:last-child{font-variant-numeric:tabular-nums}
/* phones only: the header "Book Now" pill moves into the drawer (see mobile tier) */
.drawer .drawer__cta{display:none}

/* ============================================================= HERO ======= */
.hero{
  background:var(--page);padding-block:clamp(40px,6vw,64px) clamp(56px,8vw,88px);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-180px;right:-120px;
  width:520px;height:520px;border-radius:999px;
  background:radial-gradient(circle,rgba(38,90,223,.2) 0%,rgba(38,90,223,0) 68%);
  pointer-events:none;z-index:0;
}
.hero::after{
  content:'';position:absolute;bottom:-140px;left:-100px;
  width:400px;height:400px;border-radius:999px;
  background:radial-gradient(circle,rgba(255,180,0,.24) 0%,rgba(255,180,0,0) 68%);
  pointer-events:none;z-index:0;
}
.hero__grid{align-items:start;position:relative;z-index:1}
.hero__left{grid-column:span 7}
.hero__form{grid-column:span 5}
.hero__title{margin:18px 0 16px}
/* the subhead runs the full width of the headline: its widest line
   ("7 Months in Ahmedabad") measures ~12.1x the H1 font size, so the cap
   scales with the headline and the two right edges line up */
.hero__sub{font-size:16px;color:var(--body);max-width:calc(var(--fs-h1) * 12.1)}
.hero__sub .nb{
  font-weight:700;color:var(--accent-ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
}
/* highlighted tick-mark chips */
.hero__checks{display:flex;flex-wrap:wrap;gap:10px 10px;margin:24px 0 28px;max-width:60ch}
.hero__checks li{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 8px;border-radius:999px;
  background:var(--white);border:1px solid var(--accent-border);
  box-shadow:0 2px 8px rgba(38,90,223,.08),0 1px 2px rgba(16,24,40,.04);
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,border-color .2s ease;
}
.hero__checks li:hover{
  transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 8px 18px rgba(38,90,223,.16);
}
.hero__checks svg{
  flex:none;width:16px;height:16px;padding:3px;box-sizing:border-box;border-radius:50%;
  color:var(--accent-ink);background:var(--white);border:1.5px solid var(--accent);
}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:40px;border-top:1px solid var(--line);padding-top:24px;
}
.stats li{padding-inline:20px;border-left:1px solid var(--line)}
.stats li:first-child{padding-left:0;border-left:0}
.stats b{
  display:block;font-family:var(--font-head);
  font-size:var(--fs-stat);font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.stats span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* ---- hero polish: texture, headline swoosh, glowing form, stats card ---- */
/* faint dotted "data grid" behind the copy, faded out toward the edges */
.hero{
  background:
    radial-gradient(ellipse 75% 70% at 55% 40%,rgba(244,247,255,0) 0%,var(--page) 80%),
    radial-gradient(rgba(38,90,223,.16) 1.1px,transparent 1.6px) 0 0/22px 22px,
    var(--page);
}
/* the two colour blobs drift slowly so the fold never feels static */
.hero::before{animation:hero-drift 14s ease-in-out infinite alternate}
.hero::after{animation:hero-drift 18s ease-in-out infinite alternate-reverse}
@keyframes hero-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-40px,30px) scale(1.12)}
}
/* "Data Analyst": gradient ink plus a gold hand-drawn underline that
   sweeps in just after the headline reveals */
.hero__title .hl{
  position:relative;display:inline-block;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero__title .hl::after{
  content:'';position:absolute;left:-1%;right:-1%;bottom:-.14em;height:.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9C55 3 125 1.5 197 6' fill='none' stroke='%23FFB400' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform-origin:left center;
  animation:hl-draw .9s cubic-bezier(.22,1,.36,1) .9s backwards;
}
@keyframes hl-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the form card sits on a soft blue-to-gold glow that gently breathes,
   and its top bar flows so the eye keeps returning to it */
.hero__form{position:relative;z-index:0}
.hero__form::before{
  content:'';position:absolute;inset:-6px;z-index:-1;border-radius:28px;
  background:linear-gradient(135deg,rgba(38,90,223,.5) 0%,rgba(63,135,254,.35) 45%,rgba(255,180,0,.45) 100%);
  filter:blur(26px);opacity:.45;pointer-events:none;
  animation:form-glow 5s ease-in-out infinite alternate;
}
@keyframes form-glow{from{opacity:.3;transform:scale(.98)}to{opacity:.6;transform:scale(1.02)}}
.hero .formcard{border-color:var(--accent-border)}
.hero .formcard::before{
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent)) 0 0/50% 100% repeat-x;
  animation:bar-flow 6s linear infinite;
}
@keyframes bar-flow{to{background-position:200% 0}}
/* counters: a light card with gradient figures, right under the CTA */
.hero__stats{
  max-width:560px;margin-top:46px;padding:18px 4px;
  border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.85);
  box-shadow:0 10px 28px rgba(38,90,223,.08),0 1px 2px rgba(16,24,40,.04);
}
.hero__stats li,.hero__stats li:first-child{padding-inline:20px}
.hero__stats b{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* the WhatsApp CTA gets the soft ripple ring (in green on this light
   background) once its reveal has played */
.hero__intro .btn--wa{--btn-pulse:rgba(35,179,58,.45)}
.js .hero__intro .btn--wa.btn--pulse.is-visible{
  animation:reveal-up .7s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards,
            btn-pulse 2.6s ease-out 1.6s infinite;
}

/* ------------------------------------------------------- hero form card -- */
.formcard{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 12px 40px rgba(38,90,223,.08),0 1px 2px rgba(16,24,40,.04);
  padding:clamp(20px,14px + 1vw,28px);position:relative;overflow:hidden;
}
.formcard::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));
  border-radius:20px 20px 0 0;
}
.formcard__pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent-tint);border:1px solid var(--accent-border);
  color:var(--accent-ink);border-radius:999px;padding:6px 12px;
  font-size:11.5px;font-weight:600;line-height:1;
}
.formcard__title{
  font-family:var(--font-head);font-size:var(--fs-formtitle);font-weight:700;line-height:1.25;
  color:var(--ink);margin:14px 0 8px;
}
.formcard__sub{font-size:13.5px;color:var(--body);line-height:1.5}
/* hero card: the title stays on one line - its width is ~20.2x the font
   size, so it scales with the card and caps at the shared title size */
.hero .formcard{container-type:inline-size}
.hero .formcard__title{white-space:nowrap;font-size:min(var(--fs-formtitle),4.9cqw)}
/* same for the urgency chip: its text is ~18.7x the font size and the dot,
   clock and padding take ~72px, so it shrinks just enough on small phones */
.hero .formcard__urgency{white-space:nowrap;font-size:min(12.5px,calc((100cqw - 72px) / 18.8))}
/* urgency chip: live pulsing dot, bold lead-in, clock on the right and a
   slow sheen sweeping across - kept tight so it doesn't push the form down */
.formcard__urgency{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:9px;margin:10px 0 14px;
  font-size:12.5px;font-weight:600;color:var(--gold-text);line-height:1.3;
  background:linear-gradient(90deg,#FFEFCC 0%,var(--gold-tint) 60%,#FFFBF2 100%);
  border-radius:999px;padding:7px 8px 7px 12px;
  border:1px solid var(--gold-border);
  box-shadow:0 4px 12px rgba(255,138,0,.12);
}
.formcard__urgency::after{
  content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);
  transform:skewX(-20deg);pointer-events:none;
  animation:urgency-sheen 4.5s ease-in-out 1.5s infinite;
}
.formcard__urgency b{font-weight:700;color:#8A4B00}
.formcard__urgency-text{min-width:0}
.formcard__urgency-dot{
  flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--gold-deep);
  animation:urgency-ping 1.8s ease-out infinite;
}
.formcard__urgency svg{
  flex:none;margin-left:auto;width:22px;height:22px;padding:4px;box-sizing:border-box;
  border-radius:50%;background:var(--white);color:var(--gold-deep);
  box-shadow:0 1px 3px rgba(255,138,0,.25);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes urgency-ping{
  0%{box-shadow:0 0 0 0 rgba(255,138,0,.55)}
  75%,100%{box-shadow:0 0 0 7px rgba(255,138,0,0)}
}
@keyframes urgency-sheen{0%{left:-40%}45%,100%{left:130%}}
.formcard__foot{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--muted);
}
.formcard__foot span{display:inline-flex;align-items:center;gap:5px}
.formcard__foot svg{flex:none;color:var(--accent-ink)}
/* IABAC certification badge: floats over the hero / "Trained. Placed."
   boundary. The wrapper takes no height and the badge is pulled up by half
   its own height; the two neighbouring sections get --certband-overlap of
   extra padding (about half the badge) so their rhythm is unchanged. */
:root{--certband-overlap:53px}
.hero{padding-bottom:calc(clamp(56px,8vw,88px) + var(--certband-overlap))}
.section--after-cert{padding-top:calc(var(--section-y) + var(--certband-overlap))}
/* desktop: the form card sticks under the nav (73px + 24px) while the hero
   scrolls, and releases when its bottom lines up with the bottom of the
   counter card (the end of the hero grid). overflow:clip instead of hidden,
   since a hidden ancestor would become the sticky scroll container and the
   card would never stick. */
@media (min-width:1024px){
  .hero{overflow:clip}
  .hero__form{position:sticky;top:calc(73px + 24px)}
}
.certband-float{position:relative;z-index:3;height:0}
.certband-float .container{display:flex;justify-content:center}
.certbadge{
  position:relative;overflow:hidden;transform:translateY(-50%);
  width:fit-content;max-width:100%;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px;
  padding:14px clamp(16px,10px + 1vw,28px);border-radius:18px;text-align:center;
  /* theme blue gradient with a soft light sheen in the top-left corner */
  background:
    radial-gradient(70% 120% at 0% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 60%),
    var(--accent-grad);
  border:1.5px solid rgba(255,255,255,.28);
  box-shadow:0 18px 40px -8px rgba(38,90,223,.45),0 4px 12px rgba(16,24,40,.08);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.certbadge:hover{
  transform:translateY(calc(-50% - 3px));border-color:var(--gold-2);
  box-shadow:0 24px 48px -8px rgba(38,90,223,.55),0 4px 12px rgba(16,24,40,.08);
}
.certbadge__label{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:var(--gold-grad);color:var(--gold-ink);
  max-width:100%;white-space:nowrap;
  font-size:clamp(10.5px,3.1vw,12.5px);font-weight:700;letter-spacing:.01em;line-height:1.2;
  box-shadow:0 4px 12px rgba(255,180,0,.35);
}
.certbadge__label svg{flex:none}
/* the PNG is navy on transparent, so it sits on a white plate to stay
   legible on the blue card; its own ~12% transparent top/bottom padding
   gives the plate its vertical breathing room */
.certbadge__logo{
  display:block;box-sizing:border-box;width:290px;max-width:100%;height:auto;
  padding:0 12px;border-radius:12px;background:var(--white);
  box-shadow:0 4px 14px rgba(16,24,40,.18);
}

/* ------------------------------------------------------------ fields ----- */
.field{margin-bottom:14px}
.field > label{
  display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px;
}
.input,.textarea{
  display:block;width:100%;height:46px;
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding-inline:14px;font-size:14.5px;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.textarea{height:auto;min-height:76px;padding:11px 14px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.textarea:focus{
  outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-tint);
}
.input[aria-invalid="true"]{border-color:var(--accent-ink);background:var(--accent-tint)}
.err{display:none;margin-top:6px;font-size:12px;font-weight:500;color:var(--accent-ink)}
.err.is-shown{display:block}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}

/* form success / failure state */
.formstate{display:none;text-align:center;padding:8px 0}
.formstate.is-shown{display:block}
.formstate__icon{
  width:48px;height:48px;margin:0 auto 14px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--wa-tint);color:var(--wa-ink);border:1px solid var(--wa-border);
}
.formstate--error .formstate__icon{
  background:var(--accent-tint);color:var(--accent-ink);border-color:var(--accent-border);
}
.formstate__title{
  font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--ink);margin-bottom:6px;
}
.formstate__body{font-size:13.5px;color:var(--body);margin-bottom:18px;line-height:1.55}
.formstate__body a{color:var(--accent-ink);font-weight:600;text-decoration:underline}

/* ------------------------------------------------------- pop-up form ----- */
/* Sits above the sticky nav (100), drawer (99), skip-link (200) and the
   mobile CTA bar (90). The panel is a .formcard so it inherits that look. */
.modal{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:16px;
}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(11,13,18,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.modal__panel{
  position:relative;width:100%;max-width:440px;
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;
  box-shadow:0 24px 64px rgba(11,13,18,.28),0 1px 2px rgba(16,24,40,.04);
}
.modal__panel .formcard__title{padding-right:28px}
.modal__panel .formcard__sub{margin-bottom:18px}
/* the two CTA pop-ups have no sub-line: each panel is sized so its title sits
   on one line across the card at the shared 22px (masterclass ~483px, seat
   ~408px), and the title carries the 18px gap the sub-line used to give.
   Phones wrap it instead (see the phone block). */
#modal-masterclass .modal__panel,
#modal-seat .modal__panel{container-type:inline-size}
#modal-masterclass .modal__panel{max-width:568px}
#modal-seat .modal__panel{max-width:472px}
#modal-masterclass .formcard__title,
#modal-seat .formcard__title{padding-right:0;margin-bottom:18px;white-space:nowrap}
#modal-masterclass .formcard__title{font-size:clamp(18px,4.3cqw,22px)}
#modal-seat .formcard__title{font-size:clamp(18px,5.3cqw,22px)}
.modal__close{
  position:absolute;top:12px;right:12px;z-index:1;
  width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;
  color:var(--muted);background:var(--grey-50);
  transition:background .15s ease,color .15s ease;
}
.modal__close:hover{background:var(--accent-tint);color:var(--accent-ink)}
body.modal-open{overflow:hidden}

.modal.is-open .modal__backdrop{animation:modal-fade .2s ease both}
.modal.is-open .modal__panel{animation:modal-pop .25s cubic-bezier(.2,.8,.3,1) both}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal.is-open .modal__backdrop,
  .modal.is-open .modal__panel{animation:none}
}

/* =========================================================== MARQUEES ===== */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee-l 29s linear infinite}
.marquee--rev .marquee__track{animation-name:marquee-r;animation-duration:64s} /* ~105px/s, same as phones */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;flex:none;gap:20px;padding-right:20px}
.marquee--rev .marquee__set{gap:88px;padding-right:88px;align-items:center}

@keyframes marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------------------------------------------------- student cards ------ */
/* placed-student cards - photo sits edge to edge, logo in a tinted footer */
#placements .marquee{padding:12px 0 44px;margin-bottom:-44px} /* room for hover lift + shadow */
.student{
  position:relative;width:224px;flex:none;text-align:center;
  display:flex;flex-direction:column; /* footer fills whatever height the flex row stretches the card to */
  padding:10px 10px 0;border-radius:18px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--sh-card);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.student::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  opacity:0;transition:opacity .25s ease;
}
.student:hover{
  transform:translateY(-6px);border-color:var(--accent-border);
  box-shadow:0 18px 36px rgba(38,90,223,.14),0 4px 10px rgba(16,24,40,.06);
}
.student:hover::before{opacity:1}
.student__photo{
  width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--accent-tint);border:1px solid var(--accent-border);
}
.student__photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.student:hover .student__photo img{transform:scale(1.04)}
.student__name{
  margin-top:12px;font-family:var(--font-head);font-size:15px;font-weight:600;
  line-height:1.3;color:var(--ink);padding-inline:4px;
}
.student__placed{
  flex:1;display:flex;flex-direction:column;justify-content:center; /* grow to the card bottom - no white strip under the logo */
  margin:12px -10px 0;padding:10px 10px 14px;
  background:linear-gradient(180deg,var(--accent-tint),#F7FAFF);
  border-top:1px solid var(--accent-border);
}
.student__placed-label{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px;
}
.student__logo{
  display:block;margin:0 auto;width:70%;height:auto; /* 70% of photo width */
  mix-blend-mode:multiply; /* JPEG logos ship with white boxes - blend into the tint */
}

/* ------------------------------------------------------ partner logos ---- */
.partner{flex:none;display:flex;align-items:center;height:44px}
.partner img{max-height:44px;max-width:240px;width:auto;height:auto;object-fit:contain}

/* ============================================================== CARDS ===== */
.grid--3 > *{grid-column:span 4}
.grid--4 > *{grid-column:span 3}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:var(--card-pad);box-shadow:var(--sh-card);text-align:left;
}
.card__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card__head svg{flex:none;color:var(--accent-ink)}
.card__title{font-family:var(--font-head);font-size:var(--fs-card-title);font-weight:600;line-height:1.35;color:var(--ink)}

/* Card accordion (audience + why-choose). The title is a <button> at every
   width so the markup is stable; above the phone tier it is inert - no
   chevron, default cursor, panel always open - so the cards render exactly
   as plain cards. The phone tier turns it into a real disclosure and
   initCardAccordions() in main.js drives the panel height. */
.cardacc__btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:0;
  text-align:left;font:inherit;color:inherit;cursor:default;
}
.cardacc__chev{display:none}
.cardacc__panel{overflow:hidden}

/* ----------------------------------------------- audience cards ----------- */
.audience__head{margin-bottom:var(--head-mb)}
.audience__grid{align-items:stretch}
.audience-card{
  position:relative;display:flex;flex-direction:column;
  overflow:visible;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.audience-card:hover{transform:translateY(-6px);border-color:var(--accent-border);box-shadow:0 16px 32px rgba(16,24,40,.1)}
.audience-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.audience-card__icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:var(--accent-ink);background:var(--accent-tint);border:1px solid var(--accent-border);
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.audience-card:hover .audience-card__icon{color:var(--white);background:var(--accent);transform:rotate(-4deg) scale(1.04)}
.audience-card__meta{
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:right;
}
.audience-card .card__title{margin-bottom:9px}
.audience-card .card-p{max-width:32ch}
.audience-card.card--featured{
  border:2px solid var(--accent);padding:calc(var(--card-pad) - 1px);
  box-shadow:0 12px 30px rgba(38,90,223,.13);
}
.audience-card.card--featured:hover{border-color:var(--accent-ink-hover);box-shadow:0 20px 38px rgba(38,90,223,.18)}
.audience-card__badge{
  position:absolute;top:-14px;left:20px;z-index:1;
  display:inline-flex;align-items:center;min-height:28px;padding:0 12px;
  border-radius:999px;background:var(--accent);color:var(--white);
  font-size:12px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.01em;
  box-shadow:0 6px 14px rgba(38,90,223,.25);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}
.audience-card.card--featured:hover .audience-card__badge{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 20px rgba(38,90,223,.32)}

/* ------------------------------------------- why choose weltec cards ----- */
.why{
  position:relative;
  background:
    radial-gradient(60% 50% at 8% 0%,var(--accent-tint) 0%,rgba(38,90,223,0) 70%),
    radial-gradient(50% 45% at 100% 100%,var(--accent-tint) 0%,rgba(38,90,223,0) 70%),
    var(--white);
}
.why__grid{align-items:stretch}
.why-card{
  position:relative;display:flex;flex-direction:column;
  padding:calc(var(--card-pad) + 2px) var(--card-pad) calc(var(--card-pad) + 4px);
  border-radius:16px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* accent line that grows in from the left on hover */
.why-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.why-card:hover{
  transform:translateY(-6px);border-color:var(--accent-border);
  box-shadow:0 18px 36px rgba(38,90,223,.12),0 4px 10px rgba(16,24,40,.06);
}
.why-card:hover::after{transform:scaleX(1)}
.why-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.why-card__icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:var(--accent-ink);background:var(--accent-tint);border:1px solid var(--accent-border);
  transition:background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.why-card:hover .why-card__icon{
  color:var(--white);background:var(--accent);border-color:var(--accent);
  transform:rotate(-4deg) scale(1.05);box-shadow:0 8px 16px rgba(38,90,223,.28);
}
.why-card .card__title{margin-bottom:8px}

/* ================================================ SCROLL REVEAL ============ */
/* Any element with [data-reveal] fades/slides in once it scrolls into view
   (initReveal in main.js adds .is-visible). Gated on the .js class so nothing
   stays hidden without scripting. The reveal is a keyframe animation with
   `backwards` fill, so once it has played the element's normal styles - and
   its hover transforms - take over again. --reveal-delay staggers siblings.
     data-reveal          slide up (default)
     data-reveal="left"   slide in from the left
     data-reveal="right"  slide in from the right
     data-reveal="scale"  pop in
     data-reveal="fade"   fade only */
.js [data-reveal]:not(.is-visible){opacity:0}
.js [data-reveal].is-visible{
  animation:reveal-up .7s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards;
}
.js [data-reveal="left"].is-visible{animation-name:reveal-left}
.js [data-reveal="right"].is-visible{animation-name:reveal-right}
.js [data-reveal="scale"].is-visible{animation-name:reveal-scale;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.js [data-reveal="fade"].is-visible{animation-name:reveal-fade}
/* a pulsing CTA that also scroll-reveals runs both: the pop-in plays once,
   then the ripple ring keeps going (the reveal rule above would otherwise
   replace the pulse animation) */
.js .btn--pulse[data-reveal="scale"].is-visible{
  animation:reveal-scale .7s cubic-bezier(.34,1.56,.64,1) var(--reveal-delay,0ms) backwards,
            btn-pulse 2.6s ease-out infinite;
}
@keyframes reveal-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes reveal-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes reveal-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes reveal-scale{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes reveal-fade{from{opacity:0}to{opacity:1}}

/* cards get a subtle grow on top of their lift so they "pop" */
.audience-card:hover{transform:translateY(-6px) scale(1.015)}
.why-card:hover{transform:translateY(-6px) scale(1.015)}
.tst:hover{transform:translateY(-6px) scale(1.015)}
.audience-card.card--featured:hover{transform:translateY(-8px) scale(1.02)}
.brochure,.callback,.panel{transition:transform .3s ease,box-shadow .3s ease}
.brochure:hover,.callback:hover{transform:translateY(-4px)}
.brochure:hover{box-shadow:0 20px 40px rgba(38,90,223,.16)}
.callback:hover{box-shadow:0 22px 44px rgba(38,90,223,.3)}
.panel:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(16,24,40,.1)}
.ctaband{transition:transform .3s ease,box-shadow .3s ease}
.ctaband-float .ctaband:hover{transform:translateY(calc(-50% - 4px));box-shadow:0 30px 56px -12px rgba(38,90,223,.45),0 10px 24px rgba(16,24,40,.14)}

/* ================================================ FLOATING CTA BAND ======== */
/* The wrapper takes no height; the band is pulled up by half its own height so
   it sits half in the section above and half in the section below. The two
   neighbouring sections get extra padding (--ctaband-overlap ≈ half the band's
   height) so their content keeps the normal section rhythm around the band.
   These values are no-JS fallbacks; initCtabandOverlap in main.js keeps the
   variable at exactly half the measured height. */
:root{--ctaband-overlap:88px}
.ctaband-float{position:relative;z-index:2;height:0}
.ctaband-float .ctaband{
  transform:translateY(-50%);
  box-shadow:0 24px 48px -12px rgba(38,90,223,.35),0 8px 20px rgba(16,24,40,.12);
}
.audience{padding-bottom:calc(var(--section-y) + var(--ctaband-overlap))}
.section--after-float{padding-top:calc(var(--section-y) + var(--ctaband-overlap))}

.ctaband{
  background:var(--accent-ink);border-radius:20px;padding:36px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.ctaband__title{
  font-family:var(--font-head);font-size:var(--fs-cta);font-weight:700;line-height:1.3;color:#fff;
}
.ctaband__sub{margin-top:8px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:rgba(255,255,255,.85)}
.ctaband .btn--white{flex:none}

/* ===================================================== IABAC PARTNER ====== */
/* One flat accent-tint section (no white edges). The CTA band overlaps its
   top by --ctaband-overlap, so the top padding carries that overlap and the
   visible gap above the content matches the gap below it.
   Intro | seal | benefit cards on desktop. */
.iabac{position:relative;overflow:hidden;background:var(--accent-tint)} /* clips the cards' slide-in */
.iabac__grid{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--grid-gap);align-items:center;
}
.iabac__intro{grid-column:span 5}
.iabac__seal{grid-column:span 3}
.iabac__lists{grid-column:span 4;display:flex;flex-direction:column;gap:16px}

.iabac__intro .eyebrow{margin-bottom:14px}
.iabac__rule{margin:16px 0 0}
.iabac__lead{
  margin-top:22px;font-family:var(--font-head);font-size:16.5px;font-weight:600;
  line-height:1.5;color:var(--ink-2);
}
.iabac__text{margin-top:10px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--body);max-width:52ch}
.iabac__verify{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:10px 18px 10px 12px;border-radius:999px;
  background:var(--white);border:1px solid var(--accent-border);
  box-shadow:0 8px 20px rgba(38,90,223,.08);
  font-size:14px;font-weight:500;color:var(--ink-2);
}
.iabac__verify svg{flex:none;color:var(--accent-ink)}
.iabac__verify a{
  font-weight:700;color:var(--accent-ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:var(--gold);transition:color .2s ease;
}
.iabac__verify a:hover{color:var(--accent-ink-hover);text-decoration-color:var(--accent-ink-hover)}

/* the seal sits inside a thin halo ring on the section colour */
.iabac__seal{position:relative;display:grid;place-items:center;padding:2%}
.iabac__seal::before{
  content:"";position:absolute;inset:0;margin:auto;aspect-ratio:1;width:100%;max-width:340px;
  border-radius:50%;
  box-shadow:0 0 0 1px var(--accent-border) inset;
}
.iabac__seal img{
  position:relative;width:100%;max-width:280px;
  filter:drop-shadow(0 18px 32px rgba(19,29,55,.18));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.iabac__seal:hover img{transform:rotate(-4deg) scale(1.03)}

.iabac__card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;box-shadow:var(--sh-raised);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.iabac__card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--gold));
}
.iabac__card:hover{
  transform:translateY(-4px);border-color:var(--accent-border);
  box-shadow:0 18px 36px rgba(38,90,223,.12),0 4px 10px rgba(16,24,40,.06);
}
.iabac__card-title{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-family:var(--font-head);font-size:var(--fs-card-title);font-weight:600;line-height:1.3;color:var(--ink);
}
.iabac__card-icon{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:var(--accent-ink);background:var(--accent-tint);border:1px solid var(--accent-border);
}
.iabac__list{display:grid;gap:9px}
.iabac__list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-card-body);line-height:1.5;color:var(--body)}
.iabac__list svg{flex:none;margin-top:1px;color:var(--accent-ink)}

/* ================================================ MICROSOFT CERTIFIED ===== */
/* Accent-tint band with parallel slanted edges: ::before is a white wedge
   continuing the Hiring Partners section above, ::after a page-colour wedge
   leading into the FAQ below. --mscert-slant is the wedge height, added to
   the padding so content never sits under a wedge. */
.mscert{
  --mscert-slant:clamp(28px,5vw,72px);
  position:relative;overflow:hidden;
  padding-block:calc(var(--section-y) + var(--mscert-slant));
  background:
    radial-gradient(45% 60% at 85% 50%,rgba(63,135,254,.16) 0%,rgba(63,135,254,0) 70%),
    radial-gradient(35% 50% at 8% 90%,rgba(255,180,0,.10) 0%,rgba(255,180,0,0) 70%),
    var(--accent-tint);
}
.mscert::before,.mscert::after{
  content:"";position:absolute;left:0;right:0;height:var(--mscert-slant);pointer-events:none;
}
.mscert::before{top:-1px;background:var(--white);clip-path:polygon(0 0,100% 0,100% 100%)}
.mscert::after{bottom:-1px;background:var(--page);clip-path:polygon(0 0,100% 100%,0 100%)}

.mscert__grid{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--grid-gap);align-items:center;
}
.mscert__intro{grid-column:span 6}
.mscert__visual{grid-column:7 / span 6}

.mscert__intro .eyebrow{margin-bottom:14px}
.mscert__rule{margin:16px 0 0}
.mscert__text{margin-top:22px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--body);max-width:56ch}
.mscert__points{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mscert__points li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 10px;border-radius:999px;
  background:var(--white);border:1px solid var(--accent-border);
  box-shadow:0 6px 16px rgba(38,90,223,.07);
  font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink-2);
}
.mscert__points svg{flex:none;color:var(--accent-ink)}

/* logo card: white plate with the four Microsoft colours as a top bar, a
   soft blue glow behind it and a thin halo ring echoing the IABAC seal */
.mscert__visual{position:relative;display:grid;place-items:center;padding:clamp(12px,3vw,36px)}
.mscert__visual::before{
  content:"";position:absolute;inset:0;margin:auto;width:100%;max-width:520px;aspect-ratio:1.6;
  border-radius:50%;box-shadow:0 0 0 1px var(--accent-border) inset;
}
.mscert__card{
  position:relative;width:100%;max-width:460px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(28px,22px + 1.5vw,40px) clamp(22px,16px + 2vw,44px) clamp(24px,20px + 1vw,32px);
  background:var(--white);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 24px 50px -12px rgba(38,90,223,.25),0 4px 12px rgba(16,24,40,.06);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.mscert__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#F25022 0 25%,#7FBA00 25% 50%,#00A4EF 50% 75%,#FFB900 75% 100%);
}
.mscert__card:hover{
  transform:translateY(-6px);border-color:var(--accent-border);
  box-shadow:0 32px 60px -12px rgba(38,90,223,.32),0 6px 14px rgba(16,24,40,.07);
}
.mscert__label{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:var(--gold-grad);color:var(--gold-ink);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.01em;line-height:1.2;
  box-shadow:0 4px 12px rgba(255,180,0,.3);
}
.mscert__label svg{flex:none}
.mscert__logo{display:block;width:100%;max-width:340px;height:auto;margin-top:clamp(22px,18px + 1vw,30px)}
.mscert__caption{
  margin-top:clamp(20px,16px + 1vw,26px);padding-top:18px;border-top:1px dashed var(--line);
  width:100%;font-size:var(--fs-card-body);line-height:var(--lh-copy);color:var(--muted);
}

/* ======================================================= TESTIMONIALS ===== */
/* Soft blue wash behind the cards so the white cards + gold stars pop. */
.reviews{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 0%,var(--accent-tint) 0%,rgba(38,90,223,0) 70%),
    var(--white);
}

/* Aggregate rating strip under the section heading */
.rating{
  display:inline-flex;align-items:center;gap:16px;margin-top:22px;
  padding:12px 22px 12px 16px;border-radius:999px;
  background:var(--white);border:1px solid var(--accent-border);
  box-shadow:0 10px 28px rgba(38,90,223,.12);
  text-align:left;color:inherit;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.rating:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(38,90,223,.18);border-color:var(--accent)}
.rating__score{
  font-family:var(--font-head);font-size:var(--fs-rating);font-weight:700;line-height:1;color:var(--ink);
  letter-spacing:-.02em;
}
.rating__meta{display:flex;flex-direction:column;gap:4px}
.rating__stars{display:flex;gap:2px;color:var(--star);filter:drop-shadow(0 2px 4px rgba(255,180,0,.3))}
.rating__label{font-size:13px;color:var(--muted);line-height:1.3}

.tst__track > *{grid-column:span 4}
.tst{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:26px 26px 24px;box-shadow:var(--sh-raised);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* blue -> gold accent bar across the top edge: the pseudo takes the card's full
   rounded outline (over the 1px border) and is clipped to its top 5px, so
   the bar's ends follow the card's corner radius instead of cutting
   straight across it */
.tst::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--star));
  border-radius:18px;
  clip-path:inset(0 0 calc(100% - 5px) 0);
}
.tst:hover{
  transform:translateY(-6px);border-color:var(--accent-border);
  box-shadow:0 22px 44px rgba(38,90,223,.16);
}
.tst__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex:none}
.tst__stars{
  display:inline-flex;align-items:center;gap:2px;color:var(--star);
  background:linear-gradient(180deg,var(--gold-tint),var(--gold-tint-2));border:1px solid var(--gold-border);
  border-radius:999px;padding:7px 12px;
}
.tst__stars svg{filter:drop-shadow(0 1px 2px rgba(255,180,0,.35))}
.tst__quotemark{
  font-family:Georgia,serif;font-size:64px;line-height:.6;color:var(--accent-tint-2);
  user-select:none;pointer-events:none;flex:none;transform:translateY(10px);
}
.tst__text{
  font-size:15.5px;line-height:1.7;color:var(--ink-2);font-weight:500;
  margin-bottom:22px;flex:1 0 auto;
}
.tst__by{
  display:flex;align-items:center;gap:12px;margin-top:auto;flex:none;
  padding-top:18px;border-top:1px dashed var(--line);
}
.tst__by img{
  width:44px;height:44px;border-radius:999px;flex:none;object-fit:cover;
  border:2px solid var(--white);box-shadow:0 0 0 2px var(--accent-border);
}
.tst__who{display:flex;flex-direction:column;justify-content:center;min-width:0}
.tst__name{font-family:var(--font-head);font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
.dots{display:none;justify-content:center;gap:4px;margin-top:18px}
/* the visible dot is 8px; the button around it is a 24px touch target */
.dots button{
  position:relative;width:24px;height:24px;border-radius:999px;padding:0;
}
.dots button::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:999px;background:var(--line);
  transition:width .2s ease,background-color .2s ease;
}
.dots button[aria-current="true"]{width:38px}
.dots button[aria-current="true"]::before{width:22px;background:var(--accent-ink)}

/* ========================================================== CURRICULUM ==== */
.split{align-items:start}
.split > :first-child{grid-column:span 7}
.split > :last-child{grid-column:span 5}
.split--faq > :first-child{grid-column:span 8}
.split--faq > :last-child{grid-column:span 4}
.sticky-rail{position:sticky;top:100px}

.modules{position:relative}
.modules li{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:16px 14px;margin-inline:-14px;border-radius:12px;
  border-bottom:1px solid var(--line);
  transition:background-color .15s ease,transform .15s ease;
}
.modules li:first-child{border-top-left-radius:12px}
.modules li:last-child{border-bottom:0;padding-bottom:16px}
.modules li:hover{background:var(--accent-tint);transform:translateX(4px)}
.modules li:hover .modules__icon{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.modules li:hover .modules__title{color:var(--accent-ink-hover)}
.modules__num{
  flex:none;width:26px;font-family:var(--font-head);font-size:15px;font-weight:700;
  color:var(--line);text-align:center;
}
.modules__icon{
  flex:none;width:40px;height:40px;border-radius:10px;
  background:var(--accent-tint);border:1px solid var(--accent-border);
  display:grid;place-items:center;color:var(--accent-ink);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.modules__label{
  display:block;font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.08em;color:var(--accent-ink);margin-bottom:6px;
}
.modules__title{font-family:var(--font-head);font-size:var(--fs-card-title);font-weight:600;line-height:1.35;color:var(--ink);transition:color .15s ease}

.brochure{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--accent-tint) 0%,var(--white) 55%);
  border:1px solid var(--accent-border);
  border-radius:20px;padding:28px;
  box-shadow:0 16px 40px rgba(38,90,223,.12),0 1px 2px rgba(16,24,40,.04);
}
.brochure::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:4px;background:linear-gradient(90deg,var(--accent),var(--gold));
}
/* soft glow behind the header row */
.brochure::after{
  content:'';position:absolute;top:-80px;right:-80px;width:240px;height:240px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,180,0,.2),rgba(255,180,0,0) 70%);
}
.brochure > *{position:relative;z-index:1}
.brochure__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:20px;
}
.brochure__pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white);border:1px solid var(--accent-border);
  color:var(--accent-ink);border-radius:999px;padding:7px 13px;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 1px 2px rgba(38,90,223,.08);
}
.brochure__icon-wrap{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--accent-grad);
  box-shadow:0 6px 14px rgba(38,90,223,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.brochure__icon{color:#fff}
.brochure__title{font-family:var(--font-head);font-size:var(--fs-box-title);font-weight:700;line-height:1.3;color:var(--ink);margin-bottom:12px}
.brochure__body{font-size:var(--fs-card-body);line-height:var(--lh-copy);color:var(--body)}
.brochure__list{
  margin:20px 0 20px;display:grid;gap:11px;
  padding:16px 16px;border-radius:14px;
  background:var(--accent-tint);border:1px solid var(--accent-border);
}
.brochure__list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-card-body);font-weight:500;line-height:1.45;color:var(--ink)}
.brochure__list svg{flex:none;margin-top:2px;color:var(--accent-ink)}
.brochure .btn--wa{
  box-shadow:0 6px 18px rgba(14,124,65,.3);
  transition:box-shadow .15s ease,transform .15s ease,background-color .15s ease;
}
.brochure .btn--wa:hover{box-shadow:0 8px 24px rgba(14,124,65,.4);transform:translateY(-2px)}
.brochure__trust{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:14px;font-size:11px;font-weight:500;color:var(--muted);
}
.brochure__trust span{display:inline-flex;align-items:center;gap:4px}
.brochure__trust svg{flex:none;color:var(--accent-ink)}
.brochure__social{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);text-align:center;
}
.brochure__stars{display:inline-flex;color:var(--star)}
.brochure__social b{color:var(--ink)}

/* ======================================================== OFFER BAND ====== */
.offer{background:var(--accent-ink);padding-block:var(--section-y);text-align:center}
.offer__pill{
  display:inline-block;background:var(--gold-grad);color:var(--gold-ink);
  box-shadow:0 6px 18px rgba(255,180,0,.42);
  border-radius:999px;padding:8px 18px;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.06em;line-height:1;
}
.offer__title{
  font-family:var(--font-head);font-size:var(--fs-cta);font-weight:700;line-height:1.3;
  color:#fff;margin:20px auto 12px;
}
.offer__sub{font-size:var(--fs-lead);line-height:var(--lh-lead);color:rgba(255,255,255,.9);margin-bottom:26px}

/* ============================================================== FAQ ======= */
.acc{display:grid;gap:12px}
.acc__item{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--sh-card);
  transition:border-color .2s ease,box-shadow .2s ease,transform .25s ease;
}
.acc__item:hover{border-color:var(--accent-border);box-shadow:0 10px 24px rgba(16,24,40,.08);transform:translateX(4px)}
.acc__item.is-open{
  border-color:var(--accent);
  box-shadow:0 14px 32px rgba(38,90,223,.12),0 1px 2px rgba(16,24,40,.04);
}
/* blue -> gold accent bar on the open item */
.acc__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--gold));
  opacity:0;transition:opacity .2s ease;
}
.acc__item.is-open::before{opacity:1}
.acc__btn{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px 18px 16px 20px;text-align:left;
  font-size:15px;font-weight:500;line-height:1.45;color:var(--ink);
  transition:color .2s ease;
}
/* question-mark chip (replaces the old 01/02 numbering) */
.acc__btn::before{
  content:"?";
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  font-family:var(--font-head);font-size:16px;font-weight:700;line-height:1;
  color:var(--accent-ink);background:var(--accent-tint);border:1px solid var(--accent-border);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.acc__item:hover .acc__btn::before{transform:rotate(-8deg) scale(1.06)}
.acc__item.is-open .acc__btn{color:var(--accent-ink);font-weight:600}
.acc__item.is-open .acc__btn::before{color:var(--white);background:var(--accent);border-color:var(--accent);transform:rotate(0) scale(1.06)}
/* chevron in a round tile at the far right */
.acc__btn svg{
  flex:none;margin-left:auto;width:30px;height:30px;padding:7px;border-radius:50%;box-sizing:border-box;
  color:var(--muted);background:var(--grey-50);
  transition:transform .25s ease,background-color .2s ease,color .2s ease;
}
.acc__item:hover .acc__btn svg{color:var(--accent-ink);background:var(--accent-tint)}
.acc__item.is-open .acc__btn svg{transform:rotate(180deg);color:var(--white);background:var(--accent)}
/* Panel height is driven by JS (see initAccordion in main.js). The tidier
   grid-template-rows 0fr->1fr trick only animates on Chrome 129+/Safari 17.4+,
   and a big share of this page's traffic is older mid-range Android. Without
   JS every panel simply stays open, which still reads fine. */
.acc__panel{overflow:hidden;transition:height .25s ease}
/* answer text indents to line up with the question, past the number chip */
.acc__panel p{padding:0 62px 18px 66px;font-size:var(--fs-card-body);line-height:var(--lh-lead);color:var(--body)}

/* callback card - the "Still have questions?" CTA, deliberately loud */
.callback{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--accent) 0%,var(--accent-ink-hover) 100%);
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;padding:28px 26px 26px;color:#fff;
  box-shadow:0 26px 56px rgba(38,90,223,.36),0 0 0 6px var(--accent-tint);
}
/* decorative highlight rings */
.callback::before,
.callback::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);
}
.callback::before{width:260px;height:260px;top:-120px;right:-90px}
.callback::after{width:200px;height:200px;bottom:-110px;left:-70px;opacity:.7}
.callback > *{position:relative;z-index:1}
.callback__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.callback__icon{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.callback__title{font-family:var(--font-head);font-size:var(--fs-box-title);font-weight:700;line-height:1.25;color:#fff}
.callback__sub{font-size:var(--fs-card-body);line-height:var(--lh-copy);color:rgba(255,255,255,.9);margin-bottom:20px}
.callback label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.9);margin-bottom:6px;
}
.callback .input,.callback .textarea{
  background:#fff;border:0;border-radius:8px;height:44px;color:var(--ink);
}
.callback .textarea{height:auto;min-height:70px}
.callback .input:focus,.callback .textarea:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.45);border-color:transparent;
}
.callback .err{color:#fff;text-decoration:underline}
.callback .btn--white{
  width:100%;height:48px;padding-inline:20px;font-size:14.5px;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transition:transform .15s ease,box-shadow .15s ease;
}
.callback .btn--white:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.callback__micro{margin-top:12px;font-size:11px;line-height:1.45;color:rgba(255,255,255,.8)}
.callback__wa{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);
}
.callback__wa b{display:block;font-size:16px;font-weight:600}
.callback__wa span{display:block;font-size:14.5px;color:rgba(255,255,255,.8)}
.callback__wa .btn{min-height:44px;padding:0 18px;font-size:13px}
/* green-on-blue has no contrast, so the WhatsApp buttons in this card go white */
.callback .btn--wa{
  background:#fff;color:var(--wa-ink);font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.callback .btn--wa svg{color:var(--wa-ink)}
.callback .btn--wa:hover{background:var(--wa-tint);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.callback .formstate{color:#fff}
.callback .formstate__title{color:#fff}
.callback .formstate__body{color:rgba(255,255,255,.9)}
.callback .formstate__body a{color:#fff}
.callback .formstate__icon{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}

/* ========================================================= COMPARISON ===== */
.compare-section{
  background:
    radial-gradient(55% 60% at 100% 50%,var(--accent-tint) 0%,rgba(38,90,223,0) 70%),
    var(--white);
}
.compare{position:relative;align-items:center}
.compare > .panel{grid-column:span 6}
.panel{position:relative;border-radius:22px;padding:34px 32px 32px}
.panel__head{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-bottom:26px;text-align:center;
}
.panel__icon{
  display:grid;place-items:center;width:70px;height:70px;border-radius:50%;
  margin-bottom:12px;
}
.panel__title{font-family:var(--font-head);font-size:var(--fs-box-title);font-weight:700;line-height:1.3}
.panel__sub{
  font-size:11.5px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;
}
.panel ul{display:grid;gap:10px}
/* each row is its own pill */
.panel li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:12px;font-size:15px;line-height:1.4;
}
/* icon sits in a filled round tile - width/height attrs are overridden here */
.panel li svg{
  flex:none;width:26px;height:26px;padding:6px;border-radius:50%;box-sizing:border-box;
  color:var(--white);
}

.panel--old{background:var(--grey-50);border:1px solid var(--line)}
.panel--old .panel__icon{color:#7A8599;background:var(--white);border:1px solid var(--line)}
.panel--old .panel__title{color:var(--muted)}
.panel--old .panel__sub{color:var(--muted)}
.panel--old li{color:var(--muted);background:var(--white);border:1px solid var(--line-soft)}
.panel--old li svg{background:#909BB6}

.panel--new{
  background:var(--white);
  border:2px solid var(--accent);
  box-shadow:0 22px 48px rgba(38,90,223,.16),0 2px 6px rgba(16,24,40,.05);
}
.panel--new .panel__icon{color:var(--accent-ink);background:var(--accent-tint);border:1px solid var(--accent-border)}
.panel--new .panel__title{color:var(--ink)}
.panel--new .panel__sub{color:var(--accent-ink)}
.panel--new li{color:var(--ink);font-weight:500;background:var(--accent-tint)}
.panel--new li svg{background:var(--accent);box-shadow:0 3px 8px rgba(38,90,223,.28)}
/* badge straddles the top border */
.panel__badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:1;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 16px;border-radius:999px;
  background:var(--accent);color:var(--white);
  font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 14px rgba(38,90,223,.28);
}
.panel__badge svg{flex:none}

.vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-ink-hover));
  border:4px solid var(--white);
  box-shadow:0 8px 20px rgba(38,90,223,.32),0 0 0 1px var(--accent-border);
  display:grid;place-items:center;
  font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white);
}

/* ============================================================ FOOTER ====== */
.site-footer{
  position:relative;padding-top:64px;color:#fff;overflow:hidden;
  background:
    radial-gradient(60% 80% at 100% 0%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(50% 70% at 0% 100%,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 60%),
    linear-gradient(160deg,#2A60E8 0%,var(--accent) 45%,var(--accent-ink-hover) 100%);
}
/* thin highlight line along the top edge so the footer reads as a distinct band */
.site-footer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
}
.site-footer__grid{padding-bottom:56px;align-items:start}
.site-footer__grid > *{grid-column:span 4}
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start}
.site-footer__logo{height:40px;width:auto;margin-bottom:18px}
.site-footer__about{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.92);max-width:42ch;text-align:justify;hyphens:auto}

/* ---- Google Reviews card ---- */
.greview{
  display:flex;align-items:center;gap:14px;margin-top:22px;
  padding:14px 18px 14px 14px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,rgba(255,180,0,.2) 0%,rgba(255,180,0,.1) 100%);
  border:1px solid rgba(255,180,0,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.greview:hover,.greview:focus-visible{
  transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(255,180,0,.34) 0%,rgba(255,180,0,.18) 100%);
  border-color:var(--gold);
  box-shadow:0 10px 24px rgba(255,180,0,.3),inset 0 1px 0 rgba(255,255,255,.35);
  text-decoration:none;
}
.greview:focus-visible{outline:2px solid #fff;outline-offset:3px}
.greview__logo{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:#fff;
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.greview__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.greview__score{display:flex;align-items:center;gap:8px;line-height:1}
.greview__score b{font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:-.02em}
.greview .stars{display:flex;gap:1px;color:var(--gold-light);filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.greview__label{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);
}
.greview__cta{
  font-size:11.5px;font-weight:700;color:var(--accent-ink);background:#fff;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  transition:transform .18s ease;
}
.greview:hover .greview__cta{transform:translateX(2px)}

/* ---- Social ---- */
.social{margin-top:24px}
.social__label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-bottom:10px;
}
.social__list{display:flex;gap:12px}
.social__list a{
  width:44px;height:44px;border-radius:12px;background:#fff;color:var(--accent-ink);
  display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.18),0 0 0 3px rgba(255,255,255,.18);
  transition:transform .18s ease,box-shadow .18s ease,color .18s ease,background .18s ease;
}
.social__list a:hover,.social__list a:focus-visible{
  transform:translateY(-3px) scale(1.04);color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.24),0 0 0 4px rgba(255,255,255,.28);
}
.social__list a:focus-visible{outline:none}
/* brand colours on hover so each icon is instantly recognisable */
.social__list .social__ig:hover,.social__list .social__ig:focus-visible{
  background:linear-gradient(45deg,#F58529 0%,#DD2A7B 50%,#8134AF 100%);
}
.social__list .social__fb:hover,.social__list .social__fb:focus-visible{background:#1877F2}
.social__list .social__in:hover,.social__list .social__in:focus-visible{background:#0A66C2}

/* ---- Location cards ---- */
.loc{
  background:#fff;border-radius:16px;overflow:hidden;color:var(--body);
  box-shadow:0 14px 34px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
.loc:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.5)}
.loc__map{display:block;height:200px;width:100%;border:0;background:var(--grey-50);pointer-events:auto}
.loc__body{padding:18px}
.loc__name{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-size:var(--fs-card-title);font-weight:700;color:var(--ink);margin-bottom:8px;
}
.loc__name svg{color:var(--accent-ink)}
.loc__addr{display:block;font-size:12.5px;line-height:1.5;color:var(--body);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.loc__addr:hover{text-decoration-color:var(--accent-ink);color:var(--ink)}
.loc__phone{
  display:inline-flex;align-items:center;min-height:40px;margin-top:12px;padding:6px 14px;border-radius:999px;
  font-size:14px;font-weight:700;color:var(--accent-ink);
  background:var(--accent-tint);border:1px solid var(--accent-border);
  transition:background .15s ease,color .15s ease;
}
.loc__phone:hover{background:var(--accent-grad);color:#fff}
.loc__hr{height:1px;background:var(--line);margin:14px 0}
.loc__hours-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.loc__hours{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink)}
.loc__hours span:last-child{font-weight:600}

/* ---- Bottom bar ---- */
.site-footer__bar{
  position:relative;padding-block:16px;font-size:12.5px;color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.16);border-top:1px solid rgba(255,255,255,.18);
}
.site-footer__bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.site-footer__tag{color:rgba(255,255,255,.72);letter-spacing:.02em}

/* ================================================= PERSISTENT MOBILE CTA == */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(16,24,40,.08);
  transform:translateY(0);transition:transform .25s ease;
}
.mobile-cta .btn{flex:1 1 0;min-height:46px;padding:12px 10px;font-size:14px}
/* the bar stands in for the floating pair on phones, so it takes the same two
   colours: green WhatsApp + gold call. Gold is 1.87:1 on white, so this
   button's label and icon are the navy ink instead. */
.mobile-cta .btn--primary{
  background:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold) 52%,var(--gold-light) 100%);
  color:var(--ink);
}
.mobile-cta .btn--primary:hover{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);
  box-shadow:0 10px 24px rgba(255,180,0,.45);
}
.mobile-cta .btn--primary.btn--shine::after{
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
}

/* ================================================= FLOATING CALL / WA ==== */
/* The call button is gold and the WhatsApp button green, exactly as on the
   reference site, so neither disappears into the blue offer or CTA bands.
   Both carry a white ring, a tinted glow and a slow pulse so they read as
   tappable at a glance. Gold is only 1.87:1 against white, so the call
   glyph is the dark navy ink rather than white. */
.float-cta{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:95;
  display:flex;flex-direction:column;gap:14px;
  transition:bottom .25s ease;
}
.float-cta__btn{
  --fab-glow:rgba(16,24,40,.25);
  --fab-pulse:rgba(16,24,40,.35);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;color:#fff;
  box-shadow:0 10px 28px var(--fab-glow),0 2px 6px rgba(16,24,40,.18);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.float-cta__btn svg{width:30px;height:30px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.float-cta__btn--call svg{filter:none}
.float-cta__btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 var(--fab-pulse);animation:float-pulse 2.6s ease-out infinite;
}
.float-cta__btn:hover,.float-cta__btn:focus-visible{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 16px 36px var(--fab-glow),0 2px 6px rgba(16,24,40,.18);
}
.float-cta__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* call: yellow-centred orange disc, filled dark handset, a thin cream inner
   ring and a soft translucent halo around it */
.float-cta__btn--call{
  --fab-glow:rgba(255,138,0,.5);
  --fab-pulse:rgba(255,180,0,.55);
  color:#1A1A1A;
  background:radial-gradient(circle at 50% 45%,var(--gold-2) 0%,var(--gold) 38%,var(--gold-deep) 88%);
  box-shadow:
    inset 0 0 0 2px rgba(255,236,179,.9),
    0 0 0 12px rgba(128,128,128,.22),
    0 10px 28px var(--fab-glow);
}
.float-cta__btn--call svg{width:28px;height:28px}
.float-cta__btn--call:hover,.float-cta__btn--call:focus-visible{
  background:radial-gradient(circle at 50% 45%,var(--gold-light) 0%,var(--gold-2) 45%,var(--gold) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,236,179,.95),
    0 0 0 12px rgba(128,128,128,.3),
    0 16px 36px var(--fab-glow);
}

.float-cta__btn--wa{
  --fab-glow:rgba(35,179,58,.45);
  --fab-pulse:rgba(35,179,58,.55);
  background:linear-gradient(90deg,var(--wa) 0%,var(--wa-2) 100%);
}
.float-cta__btn--wa:hover{background:linear-gradient(90deg,var(--wa-ink) 0%,var(--wa) 100%)}
/* stagger the two pulses so they don't beat in unison */
.float-cta__btn--wa::after{animation-delay:1.3s}

@keyframes float-pulse{
  0%{box-shadow:0 0 0 0 var(--fab-pulse)}
  70%{box-shadow:0 0 0 18px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  .float-cta__btn::after,.btn--pulse{animation:none}
}

/* ================================================== RESPONSIVE ============ */
/* Three tiers, desktop-first. Type and section rhythm are fluid (see the
   --fs-* and --section-y tokens), so these blocks only change LAYOUT:

     desktop   >= 1024            1440 / 1280 / 1024
     tablet    768 – 1023.98      900 / 834 / 768
     mobile    <= 767.98          430 / 412 / 390 / 375
     small     <= 479.98          refinements for the 375-430 band

   The .98 boundaries make 1024 and 768 land in the tier above them. */

/* ------------------------------------------------ narrow desktop --------- */
/* 1024-1200: the full nav row still fits, but only with tighter link and
   pill padding - otherwise the logo column gets squeezed. */
@media (max-width:1200px){
  .nav__inner{gap:16px}
  .nav__links{gap:0}
  .nav__links a{padding:9px 11px;font-size:13.5px}
  .nav__links a::after{left:11px;right:11px}
  .nav__actions{gap:8px}
  .nav__call{padding:0 14px 0 7px;font-size:14px}
  .nav__cta{padding:0 18px}
  .nav__cta svg{display:none}
}

/* ------------------------------------------------------- tablet ---------- */
@media (max-width:1023.98px){
  /* nav: logo | Book Now | burger. The desktop link row + call pill + CTA
     needs ~1000px, so the burger takes over for the whole tablet tier. */
  .nav__links,.nav__actions{display:none}
  .nav__burger{display:flex}
  .nav__inner{display:flex;gap:12px}
  .nav .btn--nav.nav__cta--mobile{
    display:inline-flex;margin-left:auto;min-height:44px;padding:0 16px;font-size:13.5px;
  }

  /* touch: every button clears 44px on tablet and mobile */
  .btn{min-height:44px}

  /* hero stacks; the form card is capped so it reads as a card, not a band */
  .hero__grid{row-gap:var(--stack-gap)}
  .hero__left,.hero__form{grid-column:span 12}
  .hero__form{width:100%;max-width:560px;margin-inline:auto}
  .hero__checks{max-width:none}

  /* cards: 3-up -> 2-up, 4-up -> 2-up */
  .grid--3 > *,.grid--4 > *{grid-column:span 6}
  /* the badge moves to the top-right corner so it never sits on the icon;
     the featured card gets a little extra top padding to clear it */
  .audience-card__badge{left:auto;right:14px;top:-13px;font-size:11.5px;min-height:26px;padding:0 11px}
  .audience-card.card--featured{padding-top:calc(var(--card-pad) + 5px)}
  .tst__track > *{grid-column:span 6}

  /* side rails stack under their column and are capped like the hero form */
  .split > :first-child,.split > :last-child,
  .split--faq > :first-child,.split--faq > :last-child{grid-column:span 12}
  .split{row-gap:var(--stack-gap)}
  .sticky-rail{position:static;width:100%;max-width:560px;margin-inline:auto}

  /* ctaband stays a row on tablet; --ctaband-overlap tracks its shorter height */
  :root{--ctaband-overlap:100px}
  .ctaband{padding:30px 32px;gap:24px}

  /* iabac: intro + seal share the first row, the two cards sit side by side below */
  .iabac__grid{row-gap:var(--stack-gap)}
  .iabac__intro{grid-column:span 7}
  .iabac__seal{grid-column:span 5}
  .iabac__lists{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}

  /* microsoft: intro + logo card stack, both centred */
  .mscert__grid{row-gap:var(--stack-gap)}
  .mscert__intro,.mscert__visual{grid-column:span 12}
  .mscert__intro{text-align:center}
  .mscert__rule{margin-inline:auto}
  .mscert__text{margin-inline:auto}
  .mscert__points{justify-content:center}

  .panel{padding:28px 24px 26px}
  .vs{width:46px;height:46px;font-size:12px}

  /* marquees */
  .student{width:200px}
  .marquee--rev .marquee__set{gap:64px;padding-right:64px}
  .marquee--rev .marquee__track{animation-duration:58s}
  .partner{height:40px}
  .partner img{max-height:40px;max-width:200px}

  /* footer: brand row on top, the two centres side by side */
  .site-footer__grid{row-gap:var(--stack-gap)}
  .site-footer__grid > *{grid-column:span 12}
  .site-footer__grid > .loc{grid-column:span 6}
  .site-footer__about{max-width:60ch}
  .loc__map{height:auto;aspect-ratio:16/9;max-height:220px}

  .float-cta{right:16px}
  .float-cta__btn{width:58px;height:58px}
  .float-cta__btn svg{width:27px;height:27px}
}

/* ------------------------------------------------------- mobile ---------- */
@media (max-width:767.98px){
  /* Phone type runs ~2px smaller and the rhythm ~12px looser than the shared
     clamps give at 375px; the slopes are unchanged so 767px still meets the
     tablet tier smoothly. */
  :root{
    --fs-h1:      clamp(28px, 19.5px + 2.25vw, 54px);  /* 375→28 (was 30) */
    --fs-h2:      clamp(24px, 17px + 1.6vw, 40px);     /* 375→24 (was 26) */
    --fs-h3:      15px;
    --fs-body:    clamp(14px, 13.6px + .1vw, 16px);    /* 375→14 (was 15) */
    --fs-cta:     clamp(19px, 15px + 1vw, 26px);
    --section-y:  clamp(60px, 44px + 4.5vw, 96px);     /* 375→61 (was 48) */
    --head-mb:    clamp(36px, 28px + 1.7vw, 44px);     /* 375→36 (was 28) */
  }
  .h1{line-height:1.2;letter-spacing:-.015em}
  .h2{line-height:1.28}
  .eyebrow{padding:7px 15px}
  .section-head .eyebrow{margin-bottom:14px}
  .rule{margin-top:18px}
  .tst__text{font-size:14px}
  .nav__logo img{height:34px}

  /* nav: the "Book Now" pill leaves the header bar and becomes a full-width
     button at the foot of the drawer */
  .nav .btn--nav.nav__cta--mobile{display:none}
  .drawer .drawer__cta{
    display:flex;width:100%;margin-top:14px;min-height:48px;
    padding:0 20px;font-size:15px;white-space:nowrap;border-bottom:0;
    background:var(--accent-grad);
    color:#fff;box-shadow:0 4px 14px rgba(38,90,223,.28);
  }
  .drawer .drawer__cta:hover{padding-left:20px;color:#fff;background:var(--accent-grad-hover)}

  /* long labels wrap instead of overflowing; nav CTA keeps its single line */
  .btn{white-space:normal;line-height:1.3;padding-inline:20px}
  .btn--nav{white-space:nowrap}

  /* iOS zooms the page on focus when an input is under 16px */
  .input,.textarea{font-size:16px}
  .modal{padding:12px}

  /* fold order: headline -> subhead -> checks -> WhatsApp -> form -> stats */
  .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--stack-gap)}
  .hero__left{display:contents}
  .hero__intro{order:1;text-align:center}
  .hero__form{order:2;max-width:none}
  /* counters: one compact 3-up row that fits any phone width - equal
     columns that can shrink, centred figures, and labels that wrap under
     them instead of pushing the row wider */
  .hero__stats{
    order:3;margin-top:0;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
    padding:16px 0;text-align:center;
  }
  .hero__stats li{min-width:0;padding-inline:6px;border-left:1px solid var(--line)}
  .hero__stats li:first-child{border-left:0;padding-inline:6px}
  /* the IABAC badge stacks (label over logo) on phones, so it is taller */
  :root{--certband-overlap:68px}
  .hero__stats b{font-size:clamp(26px,7.5vw,34px);letter-spacing:-.03em}
  .hero__stats span{margin-top:6px;font-size:12px;line-height:1.3}
  /* the WhatsApp CTA keeps its label on one line: tighter padding/gap and
     a viewport-scaled size that fits 320px phones and caps at 13.5px */
  .hero__intro .btn--wa{
    width:100%;padding-inline:14px;gap:7px;margin-top:4px;
    white-space:nowrap;font-size:clamp(10px,3.3vw,13.5px);
  }
  /* centred copy with a looser vertical rhythm */
  .hero__title{margin:22px 0 18px}
  .hero__sub{max-width:none;margin-inline:auto;line-height:1.7}
  /* the tick list becomes one swipeable row of chips; it bleeds to the
     viewport edge and fades out on the right as a "more this way" cue */
  .hero__checks{
    display:flex;flex-wrap:nowrap;gap:10px;margin:26px 0 28px;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:4px 10px;
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .hero__checks::-webkit-scrollbar{display:none}
  .hero__checks li{
    flex:none;white-space:nowrap;scroll-snap-align:start;
    padding:8px 13px 8px 8px;border-radius:999px;font-size:13px;
  }
  /* trailing spacer so the last chip can scroll clear of the fade */
  .hero__checks::after{content:"";flex:none;width:28px}
  /* CTA pop-ups: a one-line title would need ~14px here, so it wraps */
  #modal-masterclass .formcard__title,
  #modal-seat .formcard__title{white-space:normal;font-size:var(--fs-formtitle)}
  /* decorative washes shrink and move off-canvas so they never sit under text */
  .hero::before{width:300px;height:300px;top:-140px;right:-160px}
  .hero::after{width:240px;height:240px;bottom:-120px;left:-140px}
  .brochure::after{width:180px;height:180px;top:-70px;right:-90px}
  .callback::before{width:200px;height:200px;top:-100px;right:-110px}
  .callback::after{width:160px;height:160px;bottom:-90px;left:-90px}

  /* section H2s: keep the highlighted phrase on one line (see .br-sm) */
  .br-sm{display:inline}
  .nb-sm{white-space:nowrap}

  /* single column everywhere */
  .grid--3 > *,.grid--4 > *{grid-column:span 12}
  .audience-card__badge{right:12px;padding-inline:10px;font-size:11px;min-height:24px;top:-12px}
  .sticky-rail{max-width:none}

  /* audience + why-choose cards collapse into accordion rows: the title is a
     tappable button with a chevron, the description is the panel. Only the
     open card shows its copy; the hover lift is dropped since there is no
     hover on touch. */
  .audience__grid,.why__grid{gap:10px}
  .cardacc__btn{cursor:pointer}
  .cardacc__chev{
    display:block;flex:none;margin-left:auto;width:28px;height:28px;padding:6px;
    border-radius:50%;box-sizing:border-box;color:var(--muted);background:var(--grey-50);
    transition:transform .25s ease,background-color .2s ease,color .2s ease;
  }
  [data-acc-item].is-open .cardacc__chev{transform:rotate(180deg);color:var(--white);background:var(--accent)}
  .cardacc__panel{transition:height .25s ease}
  .cardacc__panel .card-p{padding-top:10px}
  /* header reads as one row - icon | title | chevron - with the copy
     spanning the full width underneath; the corner labels ("Start strong"
     tags) have no place in a single row and are dropped */
  .audience-card,.why-card{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;
  }
  .audience-card__head,.why-card__head{margin-bottom:0;grid-column:1}
  .audience-card__meta{display:none}
  .audience-card__icon,.why-card__icon{width:40px;height:40px;border-radius:11px}
  .audience-card .card__title,.why-card .card__title{margin-bottom:0;grid-column:2}
  .cardacc__panel{grid-column:1 / -1}
  .audience-card:hover,.why-card:hover{transform:none;box-shadow:var(--sh-card);border-color:var(--line)}
  .audience-card.card--featured:hover{border-color:var(--accent);box-shadow:0 12px 30px rgba(38,90,223,.13)}
  .audience-card:hover .audience-card__icon,.why-card:hover .why-card__icon{transform:none;color:var(--accent-ink);background:var(--accent-tint);border-color:var(--accent-border)}
  .why-card:hover::after{transform:scaleX(0)}
  .why-card.is-open::after{transform:scaleX(1)}
  .audience-card.is-open,.why-card.is-open{border-color:var(--accent-border)}
  /* the "Most Popular" badge overhangs the card by 18px - clear the card above */
  .audience-card.card--featured{margin-top:14px}

  /* ctaband stacks and centres, so it is taller and the overlap grows to match */
  :root{--ctaband-overlap:130px}
  .ctaband{flex-direction:column;align-items:center;text-align:center;padding:28px 24px}
  .ctaband .btn--white{width:100%}

  /* iabac: seal on top, then a centred intro, then the cards stacked */
  .iabac__intro,.iabac__seal{grid-column:span 12}
  .iabac__seal{order:-1;padding:0}
  .iabac__seal::before{max-width:230px}
  .iabac__seal img{max-width:190px}
  .iabac__intro{text-align:center}
  .iabac__rule{margin-inline:auto}
  .iabac__text{margin-inline:auto}
  .iabac__lead{font-size:15px}
  .iabac__verify{font-size:13.5px}
  .iabac__lists{grid-template-columns:1fr;gap:14px}
  .iabac__card{padding:18px 18px 18px 20px}
  .mscert__text{margin-top:18px}
  .mscert__points{gap:8px;margin-top:20px}
  .mscert__points li{font-size:12.5px;padding:7px 12px 7px 9px}
  .mscert__visual{padding:0}
  .mscert__visual::before{display:none}
  .offer .btn--white{width:100%;max-width:360px}

  /* testimonials: one full-width card per screen, bleeding to the viewport
     edge then padded back in by the gutter; initCarousel auto-advances it */
  .tst__track{
    display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter); /* snap the card to the gutter line, not the screen edge */
  }
  .tst__track::-webkit-scrollbar{display:none}
  .tst{flex:0 0 100%;max-width:none;scroll-snap-align:start;scroll-snap-stop:always;padding:22px 20px 20px}
  .tst:hover{transform:none}
  .dots{display:flex}

  /* brochure card: centred copy; the WhatsApp label stays on one line by
     scaling with the viewport (375px → ~12px) and dropping its icon on the
     narrowest phones */
  .brochure{text-align:center;padding:24px 18px}
  .brochure__head{justify-content:center}
  .brochure__list li{justify-content:flex-start;text-align:left}
  .brochure .btn--block{
    white-space:nowrap;font-size:clamp(11.5px,3.2vw,13.5px);
    padding-inline:12px;gap:6px;letter-spacing:-.01em;
  }
  .brochure .btn--block svg{width:16px;height:16px}

  .rating{gap:12px;padding:10px 18px 10px 14px;margin-top:18px}
  .rating__stars svg{width:17px;height:17px}
  .rating__label{font-size:12px}

  .offer__title{max-width:none}

  .compare{row-gap:22px}
  .compare > .panel,.compare > .vs{grid-column:span 12}
  .panel{padding-inline:20px}
  .panel--new{order:2}
  /* stacked: the vs badge becomes its own row between the panels */
  .vs{position:static;transform:none;order:1;justify-self:center}

  /* FAQ answers stay aligned with the question text past the number chip */
  .acc__btn{padding:14px 14px 14px 16px;gap:12px;font-size:14.5px}
  .acc__btn::before{width:30px;height:30px;font-size:15px}
  .acc__panel p{padding:0 18px 16px 58px}

  /* sticky bottom bar replaces the floating buttons on phones; the call
     number lives in the drawer */
  .mobile-cta{display:flex}
  .float-cta{display:none}
  .site-footer{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .site-footer__grid > .loc{grid-column:span 12}
  .site-footer__logo{height:36px}
  .site-footer__bar-inner{justify-content:center;text-align:center}
  .greview{width:100%;max-width:420px}
  .loc__map{aspect-ratio:16/10;max-height:none}

  #placements .marquee{padding:8px 0 32px;margin-bottom:-32px}
  .student{width:172px}
  .marquee--rev .marquee__set{gap:40px;padding-right:40px}
  .marquee--rev .marquee__track{animation-duration:38s}
  .partner{height:32px}
  .partner img{max-height:32px;max-width:160px}
}

/* ------------------------------------------------- small mobile ---------- */
@media (max-width:479.98px){
  .card{padding:18px}
  .audience-card.card--featured{padding:22px 17px 17px}
  .callback{padding:24px 20px 22px}
  /* hero rating pill stays a single line: the label scales with the
     viewport so it clears the rating + star on 320-479px phones */
  .pill--rating{padding:8px 12px;gap:6px;white-space:nowrap;font-size:clamp(9.5px,2.9vw,11.5px)}
  .pill--rating b{font-size:13px}
}

@media (max-width:379.98px){
  /* 360px phones: the counters tighten a touch more rather than stacking */
  .hero__stats b{font-size:clamp(24px,7vw,28px)}
  .hero__stats span{font-size:11.5px}
  /* 360px phones: the brochure button label only fits without its icon */
  .brochure .btn--block svg{display:none}
  /* 320-379px phones: pill and hero CTA shed a little side room so the
     single-line labels still clear the edges */
  .pill--rating{padding-inline:10px;gap:5px}
  .hero__intro .btn--wa{padding-inline:12px;gap:6px}
}

/* ================================================== REDUCED MOTION ======== */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],
  .js [data-reveal]:not(.is-visible),
  .js [data-reveal].is-visible{opacity:1;animation:none}
  .audience-card:hover,.why-card:hover,.tst:hover,.acc__item:hover,
  .brochure:hover,.callback:hover,.panel:hover,.hero__checks li:hover,.pill--rating:hover,.rating:hover,
  .iabac__card:hover,.iabac__seal:hover img,.mscert__card:hover{transform:none}
  .certbadge:hover{transform:translateY(-50%)}
  .ctaband-float .ctaband:hover{transform:translateY(-50%)}
  .why-card:hover .why-card__icon,.acc__btn::before,.audience-card__badge,.btn svg{transform:none}
  .btn--shine::after{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .marquee__track{animation:none;transform:none}
  .marquee{
    overflow-x:auto;
    -webkit-mask-image:none;mask-image:none;
  }
  .acc__panel,.cardacc__panel{transition:none}
  .drawer.is-open{animation:none}
  .btn:hover{transform:none}
  .student:hover{transform:none}
  .student:hover .student__photo img{transform:none}
}

/* ================================================= MOTION & POLISH ======== */
/* A page-wide layer of entrance, ambient and hover animation on top of the
   section styles above, plus the reworked FAQ ("Before You Join") and
   comparison ("Students' Choice") sections. It sits after the responsive
   tiers so it can refine them; its own phone and reduced-motion rules follow
   at the end of the block. Ambient loops only animate transform, translate,
   opacity, background-position or box-shadow so they stay cheap. */

/* ---- shared keyframes ---- */
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rule-flow{to{background-position:200% 0}}
@keyframes sheen-sweep{0%{left:-60%}35%,100%{left:140%}}
@keyframes float-y{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes drift{from{translate:0 0}to{translate:-30px 24px}}
@keyframes spin{to{transform:rotate(360deg)}}
/* --ping-base carries the element's own resting shadow so the ring is
   added to it rather than replacing it */
@keyframes ring-ping{
  0%{box-shadow:var(--ping-base,0 0 0 transparent),0 0 0 0 var(--ping,rgba(38,90,223,.35))}
  80%,100%{box-shadow:var(--ping-base,0 0 0 transparent),0 0 0 12px transparent}
}
@keyframes li-in-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes li-in-r{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes li-in-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes icon-pop{0%{transform:scale(0) rotate(-45deg)}70%{transform:scale(1.18)}100%{transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}

/* ---- scroll progress: a hairline under the nav that fills as you read.
   Progressive enhancement - only browsers with scroll timelines draw it ---- */
@supports (animation-timeline:scroll()){
  .nav::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
    background:linear-gradient(90deg,var(--accent),#3F87FE,var(--gold));
    transform-origin:left;transform:scaleX(0);
    animation:nav-progress linear both;animation-timeline:scroll(root);
  }
  @keyframes nav-progress{to{transform:scaleX(1)}}
}

/* ---- section headings: the gold -> blue rule draws itself in once the
   heading reveals, then its colours keep flowing slowly; eyebrow pills get
   an occasional sheen; highlighted H2 words take the gradient ink ---- */
.rule{
  background:linear-gradient(90deg,var(--gold),var(--accent),var(--gold)) 0 0/200% 100%;
  animation:rule-flow 5s linear infinite;
}
.js [data-reveal] .rule{transform:scaleX(0)}
.js [data-reveal].is-visible .rule{
  transform:none;
  animation:rule-draw .9s cubic-bezier(.22,1,.36,1) .3s backwards,rule-flow 5s linear 1.2s infinite;
}
.section-head .rule{transform-origin:center}
.iabac__rule,.mscert__rule{transform-origin:left}

.eyebrow,.offer__pill{position:relative;overflow:hidden;isolation:isolate}
.eyebrow::after,.offer__pill::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);
  transform:skewX(-20deg);
  animation:sheen-sweep 5s ease-in-out 1s infinite;
}
.eyebrow{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.eyebrow:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,180,0,.4)}

.h2 .hl{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.section-lead{margin-top:16px}

/* ---- hero: counters and trust line respond to the pointer ---- */
.hero__stats li{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.hero__stats li:hover{transform:translateY(-3px)}
.hero__stats b{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.hero__stats li:hover b{transform:scale(1.06)}
.hero__stats b{transform-origin:left bottom}
.formcard__foot svg{transition:transform .25s ease}
.formcard__foot span:hover svg{transform:scale(1.2) rotate(-8deg)}
.certbadge__logo{transition:transform .3s ease}
.certbadge:hover .certbadge__logo{transform:scale(1.03)}

/* ---- placed students: the name picks up the accent on hover ---- */
.student__name{transition:color .25s ease}
.student:hover .student__name{color:var(--accent-ink)}
.student__logo{transition:transform .3s ease}
.student:hover .student__logo{transform:scale(1.06)}

/* ---- who should join / why choose: tag + icon micro-motion ---- */
.audience-card__meta{transition:color .25s ease,letter-spacing .25s ease}
.audience-card:hover .audience-card__meta{color:var(--accent-ink)}
.card__title{transition:color .25s ease}
.audience-card:hover .card__title,.why-card:hover .card__title{color:var(--accent-ink-hover)}
.why-card:hover .why-card__icon svg,.audience-card:hover .audience-card__icon svg{animation:wiggle .5s ease}

/* ---- floating CTA band: highlight wash, soft rings and a periodic sheen ---- */
.ctaband{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 120% at 0% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(40% 90% at 100% 100%,rgba(255,180,0,.22) 0%,rgba(255,180,0,0) 70%),
    var(--accent-grad);
}
.ctaband::before{
  content:"";position:absolute;right:-60px;top:-90px;width:240px;height:240px;border-radius:50%;
  z-index:-1;pointer-events:none;
  border:28px solid rgba(255,255,255,.07);
  animation:drift 9s ease-in-out infinite alternate;
}
.ctaband::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:30%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);
  transform:skewX(-20deg);
  animation:sheen-sweep 7s ease-in-out 2s infinite;
}

/* ---- IABAC: the seal sits dead-centre inside a slowly turning dashed halo
   (no float: float-y only lifts, which pushed the seal off the rings' centre) ---- */
.iabac__seal::after{
  content:"";position:absolute;inset:0;margin:auto;aspect-ratio:1;width:94%;max-width:318px;
  border-radius:50%;border:1.5px dashed var(--accent-border);pointer-events:none;
  animation:spin 40s linear infinite;
}
@media (max-width:767.98px){.iabac__seal::after{max-width:206px}} /* between the 190px seal and 230px ring */
.iabac__card-icon{transition:background-color .25s ease,color .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.iabac__card:hover .iabac__card-icon{
  color:var(--white);background:var(--accent);border-color:var(--accent);
  transform:rotate(-6deg) scale(1.06);box-shadow:0 8px 16px rgba(38,90,223,.28);
}
.iabac__card::after{transform-origin:top;transition:width .3s ease}
.iabac__card:hover::after{width:6px}
.iabac__list li{transition:transform .2s ease,color .2s ease}
.iabac__list li:hover{transform:translateX(4px);color:var(--ink)}
.iabac__list svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.iabac__list li:hover svg{transform:scale(1.2)}
.js .iabac__card.is-visible .iabac__list li{animation:li-in-r .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--reveal-delay,0ms) + 250ms + var(--i,0) * 70ms)}
.iabac__verify{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.iabac__verify:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 26px rgba(38,90,223,.14)}
.iabac__verify svg{transition:transform .3s ease}
.iabac__verify:hover svg{transform:rotate(-10deg) scale(1.12)}

/* ---- testimonials: quote mark, avatar ring and stars react on hover ---- */
.tst__quotemark{transition:color .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.tst:hover .tst__quotemark{color:var(--accent-border);transform:translateY(10px) scale(1.15) rotate(-6deg)}
.tst__by img{transition:box-shadow .3s ease,transform .3s ease}
.tst:hover .tst__by img{box-shadow:0 0 0 2px var(--accent);transform:scale(1.06)}
.tst__stars svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tst:hover .tst__stars svg{transform:translateY(-2px) scale(1.12)}
.tst:hover .tst__stars svg:nth-child(2){transition-delay:.04s}
.tst:hover .tst__stars svg:nth-child(3){transition-delay:.08s}
.tst:hover .tst__stars svg:nth-child(4){transition-delay:.12s}
.tst:hover .tst__stars svg:nth-child(5){transition-delay:.16s}
.rating__stars svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.rating:hover .rating__stars svg{transform:rotate(72deg) scale(1.1)}

/* ---- curriculum: module number and icon light up with the row ---- */
.modules__num{transition:color .2s ease}
.modules li:hover .modules__num{color:var(--accent-border)}
.modules__icon{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.modules li:hover .modules__icon{transform:rotate(-6deg) scale(1.08)}
.brochure__icon-wrap{
  --ping-base:0 6px 14px rgba(38,90,223,.28),inset 0 1px 0 rgba(255,255,255,.2);
  animation:ring-ping 2.6s ease-out infinite;
}
.brochure__list li{transition:transform .2s ease}
.brochure__list li:hover{transform:translateX(4px)}
.brochure__list svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.brochure__list li:hover svg{transform:scale(1.2)}

/* ---- offer band: drifting colour washes behind the copy ---- */
.offer{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px) 0 0/22px 22px,
    var(--accent-ink);
}
.offer::before,.offer::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
}
.offer::before{
  width:460px;height:460px;top:-220px;left:-140px;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 68%);
  animation:drift 12s ease-in-out infinite alternate;
}
.offer::after{
  width:420px;height:420px;bottom:-220px;right:-120px;
  background:radial-gradient(circle,rgba(255,180,0,.26) 0%,rgba(255,180,0,0) 68%);
  animation:drift 14s ease-in-out infinite alternate-reverse;
}

/* ---- hiring partners: logos keep their brand colours and lift on hover ---- */
.partner img{transition:transform .3s ease}
.partner:hover img{transform:scale(1.08)}

/* ---- microsoft: the logo card floats; chips lift ---- */
.mscert__card{animation:float-y 7s ease-in-out infinite}
.mscert__logo{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mscert__card:hover .mscert__logo{transform:scale(1.04)}
.mscert__points li{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .25s ease}
.mscert__points li:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 22px rgba(38,90,223,.14)}
.js .mscert__intro.is-visible .mscert__points li{animation:li-in-up .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(350ms + var(--i,0) * 90ms)}

/* stagger index for the list animations above and below */
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(1){--i:0}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(2){--i:1}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(3){--i:2}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(4){--i:3}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(5){--i:4}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(6){--i:5}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(7){--i:6}
:is(.iabac__list,.mscert__points,.panel ul) li:nth-child(8){--i:7}

/* ================================================== FAQ: BEFORE YOU JOIN == */
/* Dotted "data grid" wash like the hero, two oversized question marks
   drifting in the margins, richer question rows and a boxed answer that
   slides in as its row opens. */
.faq{
  /* clip, not hidden: a hidden ancestor would become the sticky rail's
     scroll container and the callback card would never stick */
  position:relative;overflow:clip;isolation:isolate;
  background:
    radial-gradient(40% 35% at 0% 55%,var(--accent-tint-2) 0%,rgba(222,233,255,0) 70%),
    radial-gradient(45% 35% at 100% 100%,rgba(255,180,0,.12) 0%,rgba(255,180,0,0) 70%),
    radial-gradient(ellipse 70% 60% at 50% 45%,rgba(244,247,255,0) 0%,var(--page) 85%),
    radial-gradient(rgba(38,90,223,.12) 1.1px,transparent 1.6px) 0 0/22px 22px,
    var(--page);
}
.faq > .container{position:relative;z-index:1}
.faq__deco{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-head);font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(38,90,223,.10);
}
.faq__deco--1{top:40px;left:-30px;font-size:280px;transform:rotate(-14deg);animation:float-y 8s ease-in-out infinite}
.faq__deco--2{bottom:30px;right:-20px;font-size:220px;transform:rotate(12deg);-webkit-text-stroke-color:rgba(255,180,0,.22);animation:float-y 10s ease-in-out 1s infinite}

.faq .acc{gap:14px}
.faq .acc__item{
  border-radius:16px;border-color:var(--line);
  background:rgba(255,255,255,.96);
  box-shadow:0 2px 6px rgba(16,24,40,.04);
}
/* the left accent bar previews at half height on hover and fills when open */
.faq .acc__item::before{
  width:4px;opacity:1;transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.faq .acc__item:hover::before{transform:scaleY(.45)}
.faq .acc__item.is-open::before{transform:scaleY(1)}
.faq .acc__item:hover{
  border-color:var(--accent-border);transform:translateX(4px);
  box-shadow:0 12px 28px rgba(38,90,223,.10);
}
.faq .acc__item.is-open{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-tint) 0%,#fff 72px);
  box-shadow:0 18px 40px rgba(38,90,223,.14),0 1px 2px rgba(16,24,40,.04);
}
.faq .acc__btn{padding:18px 20px 18px 22px;transition:color .2s ease}
.faq .acc__item:hover .acc__btn{color:var(--accent-ink)}
.faq .acc__btn::before{width:34px;height:34px;border-radius:11px}
.faq .acc__item.is-open .acc__btn::before{
  background:var(--accent-grad);border-color:transparent;
  box-shadow:0 6px 14px rgba(38,90,223,.32);
}
.faq .acc__item.is-open .acc__btn svg{background:var(--accent-grad);box-shadow:0 4px 10px rgba(38,90,223,.28)}
/* the answer lines up with the question text, past the "?" chip */
.faq .acc__panel > div{padding:0 62px 20px 70px}
.faq .acc__panel p{padding:0}
/* slides down from above - an upward start offset never adds to the
   scrollHeight the accordion measures */
@keyframes answer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq .acc__item.is-open .acc__panel p{animation:answer-in .45s cubic-bezier(.22,1,.36,1) .08s backwards}

/* "Still have questions?" card: rings drift, the headset rings, and the
   card breathes a little more on hover */
.callback::before{animation:drift 10s ease-in-out infinite alternate}
.callback::after{animation:drift 12s ease-in-out infinite alternate-reverse}
.callback__icon{
  --ping:rgba(255,255,255,.45);
  --ping-base:inset 0 1px 0 rgba(255,255,255,.25);
  animation:ring-ping 2.4s ease-out infinite;
}
.callback__icon svg{transform-origin:50% 60%}
.callback:hover .callback__icon svg{animation:wiggle .6s ease}
.callback__wa{transition:border-color .25s ease}
.callback:hover .callback__wa{border-color:rgba(255,255,255,.35)}

/* ============================================ COMPARE: STUDENTS' CHOICE === */
.compare-section{
  position:relative;overflow:hidden;
  background:
    radial-gradient(40% 55% at 0% 60%,rgba(144,155,182,.14) 0%,rgba(144,155,182,0) 70%),
    radial-gradient(50% 60% at 100% 45%,var(--accent-tint-2) 0%,rgba(38,90,223,0) 70%),
    radial-gradient(35% 40% at 85% 100%,rgba(255,180,0,.12) 0%,rgba(255,180,0,0) 70%),
    var(--white);
}
.compare{align-items:stretch}
.panel{display:flex;flex-direction:column}

/* the old way: muted, faintly striped, icons turn red on hover */
.panel--old{
  background:
    repeating-linear-gradient(135deg,rgba(144,155,182,.07) 0 10px,transparent 10px 20px),
    var(--grey-50);
}
.panel--old .panel__icon{filter:grayscale(1);transition:transform .3s ease}
.panel--old:hover .panel__icon{transform:rotate(-6deg)}
.panel--old li{transition:transform .2s ease,background-color .2s ease,color .2s ease}
.panel--old li svg{transition:background-color .2s ease,transform .3s ease}
.panel--old li:hover{transform:translateX(-4px);color:var(--ink-2)}
.panel--old li:hover svg{background:#E5534B;transform:rotate(90deg)}

/* the Weltec way: a flowing blue -> gold border, a breathing glow, a
   bobbing rocket and rows that pop in one after another */
.panel--new{
  border:2px solid transparent;
  background:
    linear-gradient(180deg,#fff 0%,#fff 70%,#F7FAFF 100%) padding-box,
    linear-gradient(115deg,var(--accent) 0%,#3F87FE 30%,var(--gold) 50%,#3F87FE 70%,var(--accent) 100%) 0 0/300% 100% border-box;
  animation:border-flow 6s ease-in-out infinite alternate,panel-glow 4s ease-in-out infinite alternate;
}
.js .panel--new.is-visible{
  animation:reveal-right .7s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards,
            border-flow 6s ease-in-out infinite alternate,
            panel-glow 4s ease-in-out infinite alternate;
}
@keyframes border-flow{
  from{background-position:0 0,0 0}
  to{background-position:0 0,100% 0}
}
@keyframes panel-glow{
  from{box-shadow:0 22px 48px rgba(38,90,223,.14),0 2px 6px rgba(16,24,40,.05)}
  to{box-shadow:0 28px 64px rgba(38,90,223,.26),0 0 0 6px rgba(38,90,223,.06),0 2px 6px rgba(16,24,40,.05)}
}
.panel--new .panel__icon{
  --ping:rgba(38,90,223,.3);
  --ping-base:0 10px 22px rgba(38,90,223,.3);
  position:relative;
  background:var(--accent-grad);color:var(--white);border-color:transparent;
  animation:ring-ping 2.6s ease-out infinite;
}
.panel--new .panel__icon svg{animation:float-y 3s ease-in-out infinite}
.panel--new ul{gap:12px}
.panel--new li{padding:14px 16px;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.panel--new li svg{background:var(--accent-grad);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.panel--new li:hover{transform:translateX(4px);background:var(--accent-tint-2);box-shadow:0 6px 14px rgba(38,90,223,.10)}
.panel--new li:hover svg{transform:scale(1.18) rotate(-8deg)}
.panel__badge{overflow:hidden;background:var(--accent-grad)}
.panel__badge::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-20deg);
  animation:sheen-sweep 4s ease-in-out 1s infinite;
}

/* rows slide in from their own side once the panel reveals; the Weltec
   ticks pop in after their row */
.js .panel--old.is-visible li{animation:li-in-l .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(250ms + var(--i,0) * 70ms)}
.js .panel--new.is-visible li{animation:li-in-r .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(350ms + var(--i,0) * 70ms)}
.js .panel--new.is-visible li svg{animation:icon-pop .45s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(550ms + var(--i,0) * 70ms)}

/* vs badge: a dashed ring orbits it and a soft ping radiates out */
.vs{
  --ping:rgba(38,90,223,.3);
  --ping-base:0 8px 20px rgba(38,90,223,.32),0 0 0 1px var(--accent-border);
  animation:ring-ping 2.4s ease-out infinite;
}
.vs::before{
  content:"";position:absolute;inset:-11px;border-radius:50%;pointer-events:none;
  border:2px dashed var(--accent-border);
  animation:spin 14s linear infinite;
}

/* desktop + tablet: the Weltec panel stands a little taller than the old one */
@media (min-width:768px){
  .compare{padding-block:12px}
  .panel--new{margin-block:-12px}
}

/* ---- phones ---- */
@media (max-width:767.98px){
  .faq__deco--1{font-size:180px;top:20px;left:-40px}
  .faq__deco--2{font-size:150px;right:-30px}
  .faq .acc__btn{padding:15px 14px 15px 16px}
  .faq .acc__btn::before{width:30px;height:30px}
  .faq .acc__panel > div{padding:0 16px 16px 58px}
  .faq .acc__item:hover{transform:none}
  .hero__stats b{transform-origin:center bottom}
  /* the vs badge is a static grid row here - keep the ring anchored to it */
  .vs{position:relative;left:auto;top:auto}
}

/* ---- reduced motion: drop the transforms this layer adds on hover ---- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal] .rule{transform:none}
  .eyebrow:hover,.hero__stats li:hover,.hero__stats li:hover b,.iabac__list li:hover,.iabac__verify:hover,
  .mscert__points li:hover,.brochure__list li:hover,.panel--old li:hover,.panel--new li:hover,
  .faq .acc__item:hover,.partner:hover img,.tst:hover .tst__quotemark,.tst:hover .tst__by img,
  .tst:hover .tst__stars svg,.rating:hover .rating__stars svg,.modules li:hover .modules__icon{transform:none}
  .tst:hover .tst__quotemark{transform:translateY(10px)}
  .iabac__seal::after,.vs::before{animation:none}
}

/* =============================================================== PRINT ==== */
@media print{
  .nav,.mobile-cta,.drawer,.marquee{display:none}
  body{background:#fff}
}