:root{
    --bg: #050B18;
    --bg-2: #0B1328;
    --panel: #ffffff;
    --rule: rgba(75, 122, 255, 0.25);
    --rule-soft: rgba(255,255,255,0.08);
    --gold:#ffc400;
    --gold-dim: #cca440;
    --violet: #1e76c6;
    --pink: #2451a3;
    --teal: #0aa0d1;
    --lime: #1fa568;
    --paper: #0E1B35;
    --text: #E5EEF9;
    --muted: #9FB3C8;
    --navy: #08101F;
    --navy-2: #101D38;
    --on-dark: #ffffff;
    --on-dark-dim: rgba(255,255,255,.75);
    --on-dark-rule:  rgba(255,255,255,.12);
    --gradient-hot: linear-gradient(120deg, var(--gold-dim), var(--gold) 55%, #f0f900);
    --gradient-cool: linear-gradient(120deg, var(--violet), var(--teal));
    --serif: 'Baloo 2', 'Hind', sans-serif;
    --sans: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    --poppins: 'Poppins', 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', 'Courier New', monospace;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 900px 560px at 12% -10%, rgba(30,118,198,0.12), transparent 60%),
      radial-gradient(ellipse 760px 560px at 100% 6%, rgba(46,139,255,0.10), transparent 60%),
      radial-gradient(ellipse 620px 500px at 55% 115%, rgba(255,139,61,0.10), transparent 60%),
      radial-gradient(ellipse 520px 420px at 85% 85%, rgba(10,160,209,0.08), transparent 60%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    padding-top: 96px; /* space for the fixed marquee (36px) + sticky topbar (60px) */
    padding-bottom: 64px; /* space for fixed registration footer */
    overflow-x: hidden;
  }

  /* Ambient drifting glow blobs (pure CSS, GPU-friendly) */
  .glow-blob{
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.16;
    pointer-events: none;
    animation: drift 22s ease-in-out infinite alternate;
  }
  .glow-blob.b1{ width: 420px; height: 420px; top: -120px; left: -100px; background: var(--gold); }
  .glow-blob.b2{ width: 460px; height: 460px; top: 30vh; right: -140px; background: var(--violet); animation-duration: 26s; animation-delay: -6s; }
  .glow-blob.b3{ width: 380px; height: 380px; bottom: -140px; left: 30vw; background: var(--teal); animation-duration: 30s; animation-delay: -12s; }
  @keyframes drift{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(40px,-30px) scale(1.12); }
    100%{ transform: translate(-30px,20px) scale(0.95); }
  }
  @media (prefers-reduced-motion: reduce){
    .glow-blob{ animation: none; }
  }
  @media (max-width: 760px){
    .glow-blob{ display: none; }
  }

  a { color: inherit; }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }

  section{ padding: 84px 0; }

  /* Reveal-on-load elements (hero copy, seal, stat strip, masterclass admit card) — toggled by script.js */
  .reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.d1{ transition-delay: 0.08s; }
  .reveal.d2{ transition-delay: 0.16s; }
  .reveal.d3{ transition-delay: 0.24s; }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
  }

  /* Reveal-on-scroll elements (section headers, card grids) — toggled by script.js.
     Ledger rows are NOT included here: they stay visible immediately, only their
     dotted leader line animates in (see .ledger-row.is-visible below). */
  .on-scroll{
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.6s cubic-bezier(0.2,0.7,0.3,1), transform 0.6s cubic-bezier(0.2,0.7,0.3,1);
  }
  .on-scroll.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Lively hover treatment shared across card-style content blocks */
  .why-card, .reality-card, .cost-card, .opp-card, .bp-card, .outcome-card,
  .clarity-card, .quote-card, .pay-card, .cd-box{
    box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .why-card:hover, .reality-card:hover, .cost-card:hover, .opp-card:hover,
  .bp-card:hover, .outcome-card:hover, .clarity-card:hover, .quote-card:hover,
  .pay-card:hover{
    transform: translateY(-5px);
    border-color: var(--violet);
    box-shadow: 0 16px 32px rgba(30,118,198,0.16), 0 6px 14px rgba(46,139,255,0.1);
  }

  /* ---------- STICKY TOPBAR (persists across the whole page) ---------- */
  .topbar{
    position: fixed;
    top: 36px; left: 0; right: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.88);
   /* background: linear-gradient(180deg, #0A1C3E 0%, #081A3A 100%);*/
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--on-dark-rule);
    box-shadow: 0 8px 24px rgba(3,10,25,0.28);
  }
  .topbar::after{
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--gradient-hot);
    background-size: 200% 100%;
    animation: shimmer 5s linear infinite;
  }
  @keyframes shimmer{
    to{ background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .topbar::after{ animation: none; }
    .seat-status, .offer-timer{ animation: none; }
    .seal.is-stamped{ animation: none; opacity: 1; transform: rotate(-9deg) scale(1); }
  }
  .topbar-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 28px;
    flex-wrap: wrap;
  }
  .topbar-brand{ display: flex; align-items: center; gap: 10px; }
  /**.topbar-logo{ width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--on-dark-rule); }
  .topbar-name{ font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--on-dark); }*/
  .topbar-brand-text{ display: flex; flex-direction: column; gap: 3px; }
  .topbar-kicker{
    font-family: var(--poppins);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.9;
  }
  .topbar-tag{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 35px;
    /*font-size: clamp(20px, 3vw, 21px);*/
    letter-spacing: 0.005em;
    text-transform: none;
    color: #FFFF00;
    line-height: 1.3;
  }
  .topbar-cta{ display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
  .btn-topbar{ padding: 9px 16px; border-radius: 4px; }
  .btn-txt{ display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
  .btn-txt strong{ font-family: var(--poppins); font-size: 12.5px; font-weight: 600; }
  .btn-txt small{ font-family: var(--poppins); font-size: 10px; font-weight: 600; opacity: 0.85; }
  .offer-timer{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--poppins);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: var(--gold);
    background: rgba(255,196,0,0.08);
    border: 1px solid rgba(255,196,0,0.28);
    padding: 4px 10px;
    border-radius: 20px;
  }
  .offer-timer #offerClock{
    font-family: var(--mono);
    font-weight: 500;
    animation: pulse-soft 1.6s ease-in-out infinite;
  }
  @keyframes pulse-soft{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce){
    .offer-timer #offerClock{ animation: none; }
  }

  /* ---------- HERO (homepage) ---------- */
  .hero{
    padding: 96px 0 72px;
    position: relative;
  }
  .hero-grid{
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 48px;
    align-items: start;
  }
  .eyebrow{
    font-family: var(--poppins);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    /*text-transform: uppercase;*/
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
  }
  .eyebrow::before{
    content: '';
    width: 24px;
    height: 1px;
    background: var(--gold-dim);
  }
  .eyebrow-inline::before{ content: ''; }
  h1{
    font-family: var(--poppins);
    font-weight: 450;
    font-size: clamp(35px, 6vw, 55px);
    line-height: 1.12;
    color: white;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
  }
  h1 em{
    font-style: poppins;
    background: var(--gradient-hot);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #05ffc1;
    animation: gradient-flow 6s ease-in-out infinite;
  }
  @keyframes gradient-flow{
    0%, 100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
  }
  @media (prefers-reduced-motion: reduce){
    h1 em{ animation: none; }
  }
  .lede{
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text);
    max-width: 50ch;
    margin: 0 0 34px;
  }
  .cta-row{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .mid-cta{ margin-top: 32px; }

  .btn{
    position: relative;
    overflow: hidden;
    font-family: var(--poppins);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn .ripple{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(151, 237, 13, 0.45);
    transform: scale(0);
    animation: ripple-out 0.55s ease-out forwards;
  }
  .btn-ghost .ripple{ background: rgba(36, 40, 2, 0.35); }
  @keyframes ripple-out{
    to{ transform: scale(1); opacity: 0; }
  }
  .btn-gold{
    background: var(--gradient-hot);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: #1a0f08;
    border: 1px solid transparent;
    box-shadow: 0 0 0 rgba(46,139,255,0);
    transition: transform 0.2s ease, box-shadow 0.3s ease, background-position 0.5s ease;
  }
  .btn-gold:hover{
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(46,139,255,0.35), 0 4px 14px rgba(255,139,61,0.25);
  }
  .btn-ghost{
    background: transparent;
    color: var(--navy-2);
    border: 1px solid var(--rule);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, color 0.2s ease;
  }
  .btn-ghost:hover{
    border-color: var(--teal);
    color: var(--teal);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(79,195,247,0.2);
  }
  .btn-lg{ padding: 16px 30px; font-size: 15px; }
  .rocket{ display: inline-block; animation: rocket-wiggle 2.2s ease-in-out infinite; }
  @keyframes rocket-wiggle{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-2px) rotate(-8deg); }
    75%{ transform: translateY(1px) rotate(8deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .rocket{ animation: none; }
  }

  /* signature element: wax/certificate seal, now stamped onto the admit card */
  .seal{
    width: 210px;
    height: 210px;
    filter: drop-shadow(0 8px 28px rgba(46,139,255,0.28)) drop-shadow(0 0 22px rgba(30,118,198,0.18));
    opacity: 0;
    transform: rotate(22deg) scale(1.8);
  }
  .seal.is-stamped{
    animation: stamp-press 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards, seal-glow 3.2s ease-in-out 1s infinite;
    animation-delay: 0.35s;
  }
  @keyframes seal-glow{
    0%, 100%{ filter: drop-shadow(0 8px 28px rgba(46,139,255,0.28)) drop-shadow(0 0 22px rgba(30,118,198,0.18)); }
    50%{ filter: drop-shadow(0 8px 28px rgba(255,139,61,0.35)) drop-shadow(0 0 30px rgba(79,195,247,0.28)); }
  }
  @keyframes stamp-press{
    0%{ opacity: 0; transform: rotate(22deg) scale(1.8); }
    55%{ opacity: 1; transform: rotate(-11deg) scale(0.94); }
    75%{ transform: rotate(-7deg) scale(1.02); }
    100%{ opacity: 1; transform: rotate(-9deg) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .seal{ opacity: 1; transform: rotate(-9deg) scale(1); }
  }
  .seal-badge{
    position: absolute;
    top: -44px;
    left: 50%;
    margin-left: -50px; /* half of width — centers without touching the `transform` property, which stamp-press animates */
    width: 100px;
    height: 100px;
    z-index: 2;
  }
  @media (max-width: 520px){
    .seal-badge{ width: 74px; height: 74px; top: -32px; margin-left: -37px; }
  }
  .seal-ring-text{
    font-family: var(--mono);
    font-size: 10.4px;
    letter-spacing: 0.24em;
    fill: var(--gold-dim);
  }
  .seal-core-label{
    font-family: var(--serif);
    fill: var(--paper);
  }

  /* ---------- STAT STRIP ---------- */
  .stat-strip{
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    padding: 26px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .stat{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stat .k{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
  }
  .stat .v{
    font-family: var(--serif);
    font-size: 19px;
    color: #ffae00;
  }

  /* ---------- SECTION HEADERS ---------- */
  .sec-head{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .sec-head::after{
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 64px;
    height: 2px;
    background: var(--gradient-hot);
    border-radius: 2px;
  }
  .sec-head h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    color: var(--gold);
    margin: 0;
  }
  .sec-tag{
    font-family: var(--mono);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f0f900;
  }

  /* ---------- COURSE LEDGER ---------- */
  .ledger-row{
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, padding-left 0.15s ease;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ledger-row:hover{
    background: linear-gradient(90deg, rgba(46,139,255,0.08), rgba(30,118,198,0.06));
    padding-left: 8px;
  }
  .ledger-num{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--gold-dim);
    width: 26px;
    flex-shrink: 0;
  }
  .ledger-name{
    font-family: var(--serif);
    font-size: 16.5px;
    color: var(--paper);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .ledger-dots{
    flex: 1;
    min-width: 20px;
    position: relative;
    transform: translateY(-4px);
  }
  .ledger-dots::after{
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-bottom: 1px dotted var(--rule);
    transition: width 0.9s ease 0.15s;
  }
  .ledger-row.is-visible .ledger-dots::after{
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce){
    .ledger-dots::after{ width: 100%; transition: none; }
  }
  .ledger-fee{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--gold);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ledger-arrow{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .ledger-row:hover .ledger-arrow{ color: var(--gold); transform: translateX(3px); }

  .ledger-note{
    font-family: var(--mono);
    font-size: 13.5px;
    color: #dfd926;
    margin-top: 16px;
  }

  /* ---------- WHY GRID (shared by homepage "Why train here" and masterclass trust section) ---------- */
  .why-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .why-card{
    background: var(--bg-2);
    padding: 32px 28px;
  }
  .why-card .idx{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--gold-dim);
    letter-spacing: 0.1em;
  }
  .why-card h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    color: var(--paper);
    margin: 10px 0 10px;
  }
  .why-card p{
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
  }

  /* ---------- CONTACT ---------- */
  .contact-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 40px 44px;
    box-shadow: 0 4px 22px rgba(11,42,77,0.06);
  }
  .contact-rows .row{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 10px;
    transition: background 0.25s ease, padding-left 0.25s ease, transform 0.25s ease;
  }
  .contact-rows .row:hover{
    background: var(--rule-soft);
    padding-left: 16px;
    transform: translateX(2px);
  }
  .contact-icon{
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--gradient-hot);
    box-shadow: 0 8px 18px rgba(217,99,26,0.28);
    transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
  }
  .contact-rows .row:nth-child(even) .contact-icon{
    background: var(--gradient-cool);
    box-shadow: 0 8px 18px rgba(30,118,198,0.28);
  }
  .contact-rows .row:hover .contact-icon{ transform: scale(1.1) rotate(-4deg); }
  .row-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 16px;
    min-width: 0;
  }
  .contact-rows .row .k{
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy-2);
    flex-shrink: 0;
    font-weight: 600;
  }
  .contact-rows .row .v{
    font-family: var(--sans);
    font-size: 15px;
    color: var(--paper);
    text-align: right;
  }
  .contact-rows .row a.v:hover{ color: var(--gold); }

  .contact-cta{
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-self: end;
    width: 100%;
    max-width: 280px;
  }
  .contact-cta .btn{ justify-content: center; width: 100%; }
  .contact-cta p{
    font-size: 14px;
    color: var(--gold-dim);
    line-height: 1.6;
    margin: 6px 0 0;
  }

  /* Staggered slide-in for contact rows, same cascade trick used on the
     benefit/course card grids elsewhere on the page. */
  .contact-rows .row{
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s ease, padding-left 0.25s ease;
  }
  .contact-rows.is-visible .row{ opacity: 1; transform: translateX(0); }
  .contact-rows.is-visible .row:nth-child(1){ transition-delay: 0.05s; }
  .contact-rows.is-visible .row:nth-child(2){ transition-delay: 0.12s; }
  .contact-rows.is-visible .row:nth-child(3){ transition-delay: 0.19s; }
  .contact-rows.is-visible .row:nth-child(4){ transition-delay: 0.26s; }
  @media (prefers-reduced-motion: reduce){
    .contact-rows .row{ opacity: 1; transform: none; transition: background 0.25s ease; }
  }

  @media (max-width: 760px){
    .contact-wrap{ padding: 28px 24px; }
  }

  /* ============================================================
     WEBINAR SECTION (namespaced with .wb- where it would otherwise
     collide with homepage rules of the same name, e.g. .hero)
     ============================================================ */

  /* Admit card — the page's signature element, now doubling as the hero visual */
  .admit-wrap{ display: flex; flex-direction: column; gap: 20px; }
  .admit-card{
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1.5px solid var(--gold-dim);
    border-radius: 10px;
    padding: 26px 26px 20px;
    box-shadow: 0 24px 50px rgba(11,42,77,0.16), 0 8px 20px rgba(11,42,77,0.1);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.3s ease;
  }
  .admit-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(11,42,77,0.2), 0 10px 24px rgba(255,139,61,0.16);
  }
  @media (prefers-reduced-motion: reduce){
    .admit-card{ transition: none; }
    .admit-card:hover{ transform: none; }
  }
  .admit-notch{
    position: absolute;
    top: 50%;
    width: 22px; height: 22px;
    background: var(--bg);
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .admit-notch-l{ left: -12px; }
  .admit-notch-r{ right: -12px; }
  .admit-top{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; flex-wrap: wrap; gap: 6px; }
  .admit-label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .admit-label-gold{ color: var(--lime); }
  .admit-mid{ display: flex; flex-direction: column; gap: 12px; }
  .admit-row{ display: flex; justify-content: space-between; gap: 12px; }
  .admit-row .k{  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
  .admit-row .v{ font-family: var(--sans); font-size: 13.5px; color: var(--paper); text-align: right; }
  .seat-status{ color: var(--gold-dim); animation: pulse-soft 1.6s ease-in-out infinite; }
  .admit-perforation{
    height: 0;
    border-top: 1px dashed var(--rule);
    margin: 20px 0 16px;
  }
  .admit-bottom{ display: flex; justify-content: space-between; align-items: center; }
  .admit-mono{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--gold-dim); }
  .admit-barcode{
    width: 90px; height: 20px;
    background: repeating-linear-gradient(90deg, var(--gold-dim) 0 2px, transparent 2px 5px);
    opacity: 0.7;
  }

  .countdown{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .cd-box{
    position: relative;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 6px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(11,42,77,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cd-box::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-hot);
  }
  .cd-box:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11,42,77,0.12);
  }
  @media (prefers-reduced-motion: reduce){
    .cd-box{ transition: none; }
    .cd-box:hover{ transform: none; }
  }
  .cd-num{ display: block; font-family: var(--mono); font-size: 20px; color: var(--paper); }
  .cd-k{ display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-2); margin-top: 4px; }
  .cd-box.tick .cd-num{ animation: tick-pop 0.4s ease; color: var(--teal); }
  @keyframes tick-pop{
    0%{ transform: scale(1); }
    35%{ transform: scale(1.28); }
    100%{ transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .cd-box.tick .cd-num{ animation: none; }
  }

  /* ---------- REALITY CHECK ---------- */
  .reality-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .reality-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .reality-icon{ font-size: 22px; display: block; margin-bottom: 12px; }
  .reality-card p{ font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0; }

  /* ---------- COST OF INACTION ---------- */
  .cost-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 30px 30px 26px; }
  .cost-card ul{ margin: 0 0 18px; padding-left: 20px; }
  .cost-card li{ font-size: 14.5px; line-height: 1.7; color: var(--text); margin-bottom: 10px; }
  .cost-note{ font-size: 13px; color: var(--muted); margin: 0; font-family: var(--mono); }

  /* ---------- WEBINAR AGENDA — numbered vertical timeline ---------- */
  .agenda-timeline{
    position: relative;
    padding-left: 8px;
  }
  .agenda-timeline.on-scroll{ opacity: 1; transform: none; transition: none; }
  .agenda-line{
    position: absolute;
    top: 20px; bottom: 20px; left: 27px;
    width: 2px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
  }
  .agenda-line-fill{
    display: block;
    width: 100%;
    height: 0%;
    background: var(--gradient-hot);
    transition: height 1.6s cubic-bezier(0.2,0.7,0.3,1);
  }
  .agenda-timeline.is-visible .agenda-line-fill{ height: 100%; }
  .agenda-item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 0;
  }
  .agenda-num{
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--gold-dim);
    color: var(--gold-dim);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(11,42,77,0.08);
  }
  .agenda-item p{
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--paper);
    margin: 0;
    flex: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .agenda-item:hover p{
    transform: translateX(6px);
    border-color: var(--violet);
    box-shadow: 0 6px 16px rgba(30,118,198,0.12);
  }
  /* Staggered cascade — each item settles in slightly after the previous one */
  .agenda-item.on-scroll:nth-child(3){ transition-delay: 0.05s; }
  .agenda-item.on-scroll:nth-child(4){ transition-delay: 0.1s; }
  .agenda-item.on-scroll:nth-child(5){ transition-delay: 0.15s; }
  .agenda-item.on-scroll:nth-child(6){ transition-delay: 0.2s; }
  .agenda-item.on-scroll:nth-child(7){ transition-delay: 0.25s; }
  .agenda-item.on-scroll:nth-child(8){ transition-delay: 0.3s; }
  .agenda-item.on-scroll:nth-child(9){ transition-delay: 0.35s; }
  .agenda-item.on-scroll:nth-child(10){ transition-delay: 0.4s; }
  .agenda-item.on-scroll:nth-child(11){ transition-delay: 0.45s; }
  @media (max-width: 560px){
    .agenda-line{ left: 23px; }
    .agenda-num{ width: 32px; height: 32px; font-size: 11px; }
    .agenda-item p{ font-size: 13.5px; padding: 10px 16px; }
  }

  /* ---------- PROBLEM SECTION — "Is this your story?" card grid ---------- */
  .problem-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .problem-card{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .problem-card:hover{
    transform: translateY(-4px);
    border-color: #e0625a;
    box-shadow: 0 14px 28px rgba(224,98,90,0.14), 0 6px 14px rgba(224,98,90,0.08);
  }
  .problem-icon{
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #012e09, #e0645a);
    color: #0d0d0d;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(224,98,90,0.35);
  }
  .problem-card p{
    font-size: 16.5px;
    line-height: 1.55;
    color: #0d0d0d;
    margin: 4px 0 0;
    font-weight: 600;
  }
  .problem-callout{
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(100deg, rgba(255,139,61,0.1), rgba(30,118,198,0.07));
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 18px 24px;
    margin-bottom: 30px;
  }
  .problem-callout-icon{ font-size: 22px; flex-shrink: 0; }
  .problem-callout p{
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    margin: 0;
  }
  .problem-callout p strong{ color: var(--gold-dim); }
  @media (max-width: 720px){
    .problem-grid{ grid-template-columns: 1fr; }
    .problem-callout{ flex-direction: column; align-items: flex-start; text-align: left; }
  }

  /* ---------- PAYMENT TERMS ---------- */
  .pay-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pay-grid-3{ grid-template-columns: repeat(3, 1fr); }
  .pay-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .pay-icon{ font-size: 22px; display: block; margin-bottom: 12px; }
  .pay-card h3{ font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--paper); margin: 0 0 10px; }
  .pay-card p{ font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; }
  .pay-note{ font-size: 12.5px; color: var(--muted); font-family: var(--mono); margin: 22px 0 0; }

  /* Accepted-payment-methods block shown inside the Thank You popup */
  .thankyou-pay{
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 16px 18px;
    margin: 0 0 22px;
  }
  .thankyou-pay-label{
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .thankyou-pay p{
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
  }

  /* ---------- OPPORTUNITY ---------- */
  .opportunity-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .opportunity-grid h2{ font-family: var(--serif); font-weight: 500; font-size: 27px; color: var(--paper); margin: 0 0 26px; line-height: 1.3; }
  .opp-visual{ display: flex; justify-content: center; }
  .opp-visual svg{ width: 100%; max-width: 300px; }
  .opp-svg-label{ font-family: var(--mono); fill: var(--paper); }
  .opp-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 28px; }
  .opp-card p{ font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
  .opp-cta{ margin-top: 6px; width: 100%; justify-content: center; }

  /* ---------- BLUEPRINT ---------- */
  .blueprint-intro{ font-size: 14.5px; color: var(--text); max-width: 70ch; margin: 0 0 30px; }
  .blueprint-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bp-card{ background: #ffffff; border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; }
  .bp-num{ font-weight: bold; font-family: var(--mono); font-size: 14px; color: #3a2d02; letter-spacing: 0.1em; }
  .bp-card h3{ font-family: var(--serif); font-weight: bold; font-size: 18.5px; color: var(--paper); margin: 8px 0 8px; }
  .bp-card p{ font-size: 17.5px; line-height: 1.55; color: #012e09; margin: 0; }

  /* ---------- OUTCOMES ---------- */
  .outcomes-intro{ font-size: 14.5px; color: var(--text); max-width: 70ch; margin: 0 0 30px; }
  .outcomes-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .outcome-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 24px; }
  .check{ font-size: 16px; }
  .outcome-card p{ font-size: 14px; line-height: 1.6; color: var(--text); margin: 10px 0 0; }

  /* ---------- WHO SHOULD JOIN — audience-fit card grid ---------- */
  .who-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .who-card{
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .who-card:hover{
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: 0 14px 28px rgba(30,118,198,0.14), 0 6px 14px rgba(46,139,255,0.08);
  }
  .who-icon{
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,139,61,0.14), rgba(30,118,198,0.14));
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
  .who-card p{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--paper);
    margin: 0;
  }
  @media (max-width: 900px){
    .who-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .who-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- DECISION CLARITY ---------- */
  .clarity-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .clarity-card{ background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .clarity-card-gold{
    border-color: var(--gold);
    background: linear-gradient(160deg, rgba(255,139,61,0.08), var(--panel) 55%);
    box-shadow: 0 0 0 1px rgba(255,139,61,0.08);
  }
  .clarity-card h3{ font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--paper); margin: 0 0 12px; }
  .clarity-card p{ font-size: 14px; line-height: 1.65; color: var(--text); margin: 0; }

  /* ---------- SOCIAL PROOF ---------- */
  .quote-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .quote-card{ background: #c9e293 ; border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
  .quote-avatar{
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--rule-soft); border: 1px solid var(--gold-dim);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 12px; color: var(--gold);
    margin-bottom: 14px;
  }
  .quote-card p{ font-size: 18px; line-height: 1.6; color: var(--navy); margin: 0 0 14px; font-style: italic; }
  .quote-name{ font-family: var(--mono); font-size: 13px; color: var(--navy-2); }

  /* ---------- FAQ ---------- */
  .faq-list{ display: flex; flex-direction: column; gap: 10px; }
  .faq-item{
    background: #fbfbfb; border: 2px solid var(--navy); border-radius: 7px;
    padding: 18px 22px; text-align: left; cursor: pointer; width: 100%;
    display: flex; flex-direction: column; gap: 0;
    font: inherit; color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  }
  .faq-item:hover{ border-color: var(--violet); transform: translateY(-2px); border: 2px solid var(--navy); }
  .faq-item[aria-expanded="true"]{
    border-color: var(--text);
    box-shadow: 0 10px 26px rgba(46,139,255,0.16);
  }
  .faq-q{ display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: bold; color: var(--paper); border: 1px solid var(--navy); border-radius: 6px; padding: 10px 14px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; }
  .faq-arrow{ font-size: 10px; color: var(--gold); transition: transform 0.2s ease; flex-shrink: 0; }
  .faq-item[aria-expanded="true"] .faq-arrow{ transform: rotate(90deg); }
  .faq-a{
    font-weight: 500; font-size: 16px; line-height: 1.6; color:#03390c ; 
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-top: 0;
    border-top: 1px solid var(--navy);
    border-radius: 1px solid var(--navy); border-radius: 6px; padding: 10px 14px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; 
  
  }
  .faq-item[aria-expanded="true"] .faq-a{ max-height: 200px; opacity: 1; margin-top: 12px; }

  /* ---------- FINAL CTA (masterclass registration) ---------- */
  .final-wrap{ text-align: left; }
  .final-wrap h2{ font-family: var(--inner); font-weight: 500; font-size: 30px; color: var(--paper); margin: 0 0 18px; max-width: 22ch; }
  .final-lede{ font-size: 15px; line-height: 1.65; color: rgb(245, 248, 219); max-width: 62ch; margin: 0 0 28px; }
  .final-cta-row{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .final-note{ font-family: var(--mono); font-size: 15px; color: var(--muted); }

  /* ---------- FIXED REGISTRATION FOOTER ---------- */
  .reg-footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 220;
    background: rgba(7,26,51,0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--on-dark-rule);
    padding: 14px 0;
  }
  .reg-footer-inner{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .reg-footer-info{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .reg-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse-soft 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .reg-footer-text{
    font-size: 14px;
    font-weight: bold;
    color: var(--on-dark-dim);
    white-space: nowrap;
  }
  .reg-footer-text strong{ color: var(--on-dark); }
  .reg-footer-actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .btn-whatsapp{
    background: #25D366;
    color: #06210f;
    border: 1px solid #25D366;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .btn-whatsapp:hover{
    background: #2fe375;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37,211,102,0.3);
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 760px){
    body{ padding-top: 180px; padding-bottom: 167px; }
    .topbar-inner{ flex-direction: column; align-items: stretch; gap: 10px; }
    .topbar-brand-text{ align-items: center; text-align: center; }
    .topbar-cta{ align-items: stretch; }
    .btn-topbar{ justify-content: center; }
    .hero-grid{ grid-template-columns: 1fr; }
    .stat-strip{ grid-template-columns: repeat(2, 1fr); }
    .why-grid{ grid-template-columns: 1fr; }
    .contact-wrap{ grid-template-columns: 1fr; }
    .contact-cta{ justify-self: start; max-width: 100%; }
    .ledger-name{ white-space: normal; font-size: 15px; }
    .ledger-row{ flex-wrap: wrap; }
    .ledger-dots{ display: none; }

    .reality-grid, .opportunity-grid, .blueprint-grid, .outcomes-grid, .clarity-grid, .quote-grid, .pay-grid{
      grid-template-columns: 1fr;
    }
    .final-wrap h2{ max-width: 100%; }

    .reg-footer-inner{ flex-direction: column; align-items: stretch; gap: 10px; }
    .reg-footer-info{ justify-content: center; text-align: center; }
    .reg-footer-text{ white-space: normal; }
    .reg-footer-actions{ justify-content: center; }
    .reg-footer-actions .btn{ flex: 1; justify-content: center; }
  }

  :focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* ---------- COURSE DETAILS MODAL ---------- */
  .modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6,8,11,0.7);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .modal-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  .modal-panel{
    position: relative;
    width: 100%;
    max-width: 460px;
    background: linear-gradient(165deg, var(--panel), var(--bg-2));
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 36px 32px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(255,196,0,0.18);
    transform: scale(0.82) translateY(28px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .modal-overlay.is-open .modal-panel{
    animation: modal-pop-in 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
  }
  @keyframes modal-pop-in{
    0%{ transform: scale(0.82) translateY(28px); opacity: 0; }
    60%{ transform: scale(1.02) translateY(-3px); opacity: 1; }
    100%{ transform: scale(1) translateY(0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce){
    .modal-panel{ transform: none; opacity: 1; }
    .modal-overlay.is-open .modal-panel{ animation: none; }
  }
  /* Staggered reveal for content inside any popup, driven by nth-child
     so the eyebrow, title, copy, and fields cascade in one after another
     instead of appearing all at once. */
  .modal-panel > *{
    opacity: 0;
    transform: translateY(10px);
    animation: modal-child-in 0.4s ease forwards;
    animation-delay: calc(var(--child-i, 0) * 0.06s + 0.15s);
  }
  .modal-panel > *:nth-child(1){ --child-i: 0; }
  .modal-panel > *:nth-child(2){ --child-i: 1; }
  .modal-panel > *:nth-child(3){ --child-i: 2; }
  .modal-panel > *:nth-child(4){ --child-i: 3; }
  .modal-panel > *:nth-child(5){ --child-i: 4; }
  .modal-panel > *:nth-child(6){ --child-i: 5; }
  .modal-panel > *:nth-child(7){ --child-i: 6; }
  .modal-panel > *:nth-child(8){ --child-i: 7; }
  .modal-panel > *:nth-child(9){ --child-i: 8; }
  @keyframes modal-child-in{
    to{ opacity: 1; transform: translateY(0); }
  }
  .modal-overlay:not(.is-open) .modal-panel > *{
    animation: none;
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce){
    .modal-panel > *{ animation: none; opacity: 1; transform: none; }
  }
  .modal-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: #08101F;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .modal-close:hover{
    border-color: var(--gold-dim);
    color: var(--gold);
  }
  .modal-eyebrow{
    font-family: var(--poppins);
    font-size: 11px;
    letter-spacing: 0.15em;
   /* text-transform: uppercase;*/
    color: #452c05;
    font-weight: 600;
  }
  .modal-title{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 24px;
    color: var(--paper);
    margin: 10px 0 14px;
    line-height: 1.25;
  }
  .modal-blurb{
    font-size: 14.5px;
    line-height: 1.65;
    color: black;
    margin: 0 0 22px;
  
    font-weight: 700;
  }
  .modal-fee-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 22px;
  }
  .modal-fee-row .k{
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .modal-fee-row .v{
    font-family: var(--mono);
    font-size: 18px;
    color: var(--gold);
  }
  .modal-fee-values{
    display: flex;
    align-items: baseline;
  }
  .modal-fee-row .modal-fee-original{
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: line-through;
    margin-left: 8px;
  }
  .modal-page-link{
    display: inline-block;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--gold-dim);
    text-decoration: none;
    margin: -8px 0 22px;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .modal-page-link:hover{
    color: var(--gold);
    transform: translateX(2px);
  }
  .modal-page-link[hidden]{ display: none; }
  .modal-cta{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .modal-cta .btn{ flex: 1; justify-content: center; }

  body.modal-open{ overflow: hidden; }

  /* ---------- PROMO POPUP (welcome + exit-intent) — dark brand theme,
     matching the rest of the site's palette ---------- */
  .promo-panel-light{
    
    --p-bg: linear-gradient(160deg, var(--lime), var(--bg-2));
    --p-ink: var(--muted);
    --p-orange: var(--gold);
    --p-orange-2: var(--gold-dim);
    --p-orange-soft: rgba(207, 236, 41, 0.14);
    --p-muted: var(--text);
    --p-rule: var(--rule);

    background: #035554;
    border-color: var(--p-orange-2);
    box-shadow: 0 24px 60px rgba(242, 238, 238, 0.5), 0 0 46px rgba(177, 137, 8, 0.22);
    text-align: center;
    padding: 40px 32px 30px;
    overflow: hidden;
  }
  .promo-close-light{
    background: var(--bg-2);
    border-color: var(--rule);
    color: var(--muted);
  }
  .promo-close-light:hover{
    border-color: var(--gold);
    color: var(--gold);
  }

  .promo-badge-top{
    display: inline-block;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    color: #14110a;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
    animation: badge-glow 2.4s ease-in-out infinite;
  }
  @keyframes badge-glow{
    0%, 100%{ box-shadow: 0 0 0 rgba(255,139,61,0); }
    50%{ box-shadow: 0 0 18px rgba(255,139,61,0.55); }
  }
  .promo-brand{
    font-family: var(--serif);
    font-weight: bold;
    font-size: 38px;
    color: #1a4606;
    margin: 0 0 6px;
    position: relative;
    z-index: 2;
  }
  .promo-sunburst{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    pointer-events: none;
    z-index: 0;
    animation: sunburst-spin 26s linear infinite;
  }
  .promo-sunburst svg{ width: 100%; height: 100%; }
  @keyframes sunburst-spin{
    to{ transform: translateX(-50%) rotate(360deg); }
  }

  .promo-headline{
    position: relative;
    z-index: 2;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.4;
    color: #4c4d05;
    max-width: 34ch;
    margin: 6px auto 16px;
    font-weight: bold;
  }
  .promo-highlight{
    display: inline-block;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    color: #14110a;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 6px;
    margin: 0 2px;
    transform: translateY(-1px);
  }
  .promo-icon{ font-style: normal; }

  .promo-sub{
    position: relative;
    z-index: 1;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: black;
    max-width: 42ch;
    margin: 0 auto 22px;
  }

  .promo-stats-row{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
  }
  .promo-stat-badge{
    background: var(--bg-2);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
    animation: badge-float 3.2s ease-in-out infinite;
  }
  .promo-stat-badge:nth-child(2){ animation-delay: 0.3s; }
  .promo-stat-badge:nth-child(3){ animation-delay: 0.6s; }
  @keyframes badge-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }

  .promo-offer-bar{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    text-align: left;
    border-top: 1px solid var(--rule);
    padding-top: 22px;
    margin-bottom: 16px;
  }
  .promo-offer-left{ display: flex; flex-direction: column; gap: 4px; }
  .promo-offer-almost{
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 900;
    color: black;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .promo-offer-almost::before{
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse-soft 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .promo-offer-price{ display: flex; align-items: baseline; gap: 8px; }
  .promo-price-free{
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 900;
    color: var(--paper);
  }
  .promo-price-strike{
    font-family: var(--sans);
    font-size: 15px;
    color: #1fa568;
    text-decoration: line-through;
     font-weight: 500;
  }
  .promo-offer-timer{
    font-family: var(--mono);
    font-size: 14px;
    color: #3c2603;
    font-weight: 600;
  }
  .promo-offer-cta{
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    color: #14110a;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 15px 22px;
    border-radius: 8px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: cta-breathe 2.2s ease-in-out infinite;
  }
  .promo-offer-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(46,139,255,0.35);
    animation-play-state: paused;
  }
  @keyframes cta-breathe{
    0%, 100%{ box-shadow: 0 0 0 rgba(46,139,255,0); }
    50%{ box-shadow: 0 8px 26px rgba(46,139,255,0.4); }
  }

  .promo-dismiss-link{
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
  }
  .promo-dismiss-link:hover{ color: var(--gold); }

  @media (prefers-reduced-motion: reduce){
    .promo-sunburst,
    .promo-badge-top,
    .promo-offer-almost::before,
    .promo-offer-cta,
    .promo-stat-badge{
      animation: none;
    }
  }

  @media (max-width: 520px){
    .promo-panel-light{ padding: 32px 20px 24px; }
    .promo-offer-bar{ flex-direction: column; align-items: stretch; text-align: center; }
    .promo-offer-left{ align-items: center; }
    .promo-offer-cta{ width: 100%; }
  }

  @media (max-width: 520px){
    .modal-panel{ padding: 30px 22px 26px; }
    .modal-cta{ flex-direction: column; }
  }

  /* ---------- THANK YOU POPUP (after registration) ---------- */
  .thankyou-panel{
    border-color: var(--gold);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 46px rgba(255,196,0,0.22);
  }

  /* ---------- REGISTRATION FORM POPUP ---------- */
  .reg-panel{
    border-color: var(--gold);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 46px rgba(255,196,0,0.2);
  }

  /* ---------- PAYMENT POPUP (after registration, before Thank You) ---------- */
  .payment-panel{
    border-color: var(--gold);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 46px rgba(255,196,0,0.22);
  }
  .payment-panel .modal-blurb strong{ color: var(--paper); }
  .payment-error{
    background: rgba(255,61,90,0.12);
    border: 1px solid #ff6b6b;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #ffb3ac;
    margin: 4px 0 0;
  }
  .payment-onrequest{
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 18px;
    margin: 4px 0 0;
  }
  .payment-onrequest p{
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 16px;
  }
  .payment-onrequest .modal-cta{ margin: 0; }
  .reg-modal-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
  }
  .reg-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .reg-field-label{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #125004;
    font-weight: bold;
  }
  .reg-input{
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 12px 14px;
    color: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .reg-input::placeholder{ color: var(--muted); }
  .reg-input:focus{ outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,196,0,0.15); }
  .reg-select{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237c8794'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer;
  }
  .reg-select option{
    background: var(--bg-2);
    color: var(--paper);
  }
  .reg-select:invalid{ color: var(--muted); }
  .reg-select option:not(:first-child){ color: var(--paper); }
  .reg-modal-submit{ justify-content: center; margin-top: 4px; }
/* ---------- Additions for the ZERO TO HERO CAREER WEBINAR content refresh ---------- */

/* Floating WhatsApp button — persistent quick-contact affordance requested
   alongside the sticky register bar. */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 40;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
@media (max-width: 640px){
  .whatsapp-float{ right: 14px; bottom: 84px; width: 50px; height: 50px; font-size: 22px; }
}

/* Strikethrough original price inside headings, e.g. "₹499 → ₹199" */
.offer-strike{
  color: #000000;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-color:white;
  text-decoration-thickness:1px;
  margin-right: 4px;
}

/* Trainer mission line inside the "Meet Your Trainer" contact-style card */
/* ---------- MEET YOUR TRAINER — profile card ---------- */
.trainer-wrap{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.trainer-main{
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 30px;
  box-shadow: 0 2px 10px rgba(11,42,77,0.05), 0 1px 3px rgba(11,42,77,0.04);
}
.trainer-profile{
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.trainer-avatar{
  flex-shrink: 0;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--gradient-hot);
  color: #1a0f08;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(217,99,26,0.3);
}
.trainer-name{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--paper);
  margin: 0 0 4px;
}
.trainer-role{
  font-size: 14.5px;
  font-weight: bold;
  color: #dfd926;
  margin: 0 0 2px;
}
.trainer-subrole{
  font-size: 15px;
  color: var(--gold-dim);
  font-weight: 500;
  margin: 0;
}
.trainer-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trainer-tag{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet);
  background: rgba(30,118,198,0.08);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 7px 14px;
}
.trainer-side{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trainer-mission-box{
  background: linear-gradient(100deg, rgba(255,139,61,0.1), rgba(30,118,198,0.07));
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  padding: 20px 22px;
}
.trainer-mission-icon{ font-size: 20px; display: block; margin-bottom: 8px; }
.trainer-mission-box p{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.trainer-mission-box p strong{ color: var(--gold-dim); }
.trainer-side .btn{ justify-content: center; width: 100%; }
@media (max-width: 800px){
  .trainer-wrap{ grid-template-columns: 1fr; }
  .trainer-profile{ flex-wrap: wrap; }
}

/* Footer legal placeholder links (Privacy / Terms / Refund) */
.footer-legal-link{
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal-link:hover{ color: var(--gold); }

/* "Free Bonus Worth ₹999" line under the hero CTA row */
.hero-bonus-line{
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  margin: 14px 0 0;
}
.hero-bonus-line strong{ color: var(--gold); }

/* ---------- REDESIGN PASS: warmer palette + motion + marquee ---------- */

/* Punchier hero headline weight now that Baloo 2 700/800 + Hind 700 are loaded */
h1{ font-weight: 600; }
.eyebrow{ font-weight: 600; }

/* Give the primary CTA a soft breathing halo so the eye lands on it first —
   the same trick already used on the promo popup CTA, now on the hero/section buttons too. */
.btn-gold{
  animation: cta-breathe 2.6s ease-in-out infinite;
}
.btn-gold:hover{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .btn-gold{ animation: none; }
}

/* Playful hover tilt on content cards, layered on top of the existing lift/shadow transition */
.bp-card:hover, .outcome-card:hover, .quote-card:hover{
  transform: translateY(-5px) rotate(-0.4deg);
}
.bp-card:nth-child(even):hover, .outcome-card:nth-child(even):hover{
  transform: translateY(-5px) rotate(0.4deg);
}

/* Icon pop on card hover — bp-num / check marks nudge up slightly */
.bp-card, .outcome-card{ overflow: hidden; }
.bp-num, .check{ display: inline-block; transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1); }
.bp-card:hover .bp-num, .outcome-card:hover .check{ transform: translateY(-2px) scale(1.12); }

/* Combined badge on the admit card — animated progress bar + offer countdown in one box */
.admit-badge{
  position: absolute;
  top: -18px;
  right: -14px;
  width: 208px;
  max-width: calc(100% - 20px);
  background: linear-gradient(180deg, #fff, #fdf5e2);
  border: 2px solid #fff;
  border-radius: 14px;
  padding: 11px 13px 12px;
  box-shadow: 0 14px 30px rgba(189,216,246,0.35), 0 8px 18px rgba(11,42,77,0.14);
  z-index: 3;
  animation: admit-badge-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.3) 0.5s backwards;
}
@keyframes admit-badge-pop{
  0%{ transform: scale(0.4); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}
.admit-badge-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.admit-badge-label{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.admit-badge-pct{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  color: #322505;
}
.admit-progress-track{
  position: relative;
  width: 100%;
  height: 7px;
  background: rgba(11,42,77,0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 9px;
}
.admit-progress-fill{
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--gradient-hot);
  animation: admit-progress-grow 1.3s cubic-bezier(0.2,0.8,0.3,1) 0.9s forwards;
}
.admit-progress-fill::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: admit-progress-shimmer 2.2s ease-in-out 2.3s infinite;
}
@keyframes admit-progress-grow{
  from{ width: 0%; }
  to{ width: 90%; }
}
@keyframes admit-progress-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(220%); }
}
.admit-badge .offer-timer.admit-badge-timer{
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 12px;
  color: #1c5e06;
  background: rgba(65, 107, 48, 0.14);
  border: 1px solid rgba(212,163,42,0.35);
}
.admit-badge .offer-timer.admit-badge-timer #offerClockAdmit{
  font-family: var(--mono);
  font-weight: 600;
  animation: pulse-soft 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .admit-badge{ animation: none; }
  .admit-progress-fill{ animation: none; width: 90%; }
  .admit-progress-fill::after{ animation: none; display: none; }
  .admit-badge .offer-timer.admit-badge-timer #offerClockAdmit{ animation: none; }
}
@media (max-width: 520px){
  .admit-badge{ width: 178px; padding: 9px 11px 10px; top: -12px; right: -8px; }
  .admit-badge-label{ font-size: 10px; }
  .admit-badge-pct{ font-size: 12px; }
  .admit-badge .offer-timer.admit-badge-timer{ font-size: 9.5px; padding: 3px 7px; }
}

/* ---------- TRUST MARQUEE (infinite scrolling strip) ---------- */
.marquee{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 210;
  height: 36px;
  overflow: hidden;
  border-bottom: 1px solid var(--on-dark-rule);
  background: #FFFF00;
  background-size: 200% 100%;
  animation: gradient-flow 10s ease-in-out infinite;
  display: flex;
  align-items: center;
}
@media (prefers-reduced-motion: reduce){
  .marquee{ animation: none; background-position: 0% 50%; }
}
.marquee::before, .marquee::after{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before{ left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.marquee::after{ right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{
  animation-play-state: paused;
}
.marquee-set{ display: flex; align-items: center; flex-shrink: 0; }
.marquee-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ff0000;
  white-space: nowrap;
  padding: 0 20px;
  position: relative;
}
.marquee-item::after{
  content: '•';
  position: absolute;
  right: -3px;
  color: rgba(255,255,255,0.65);
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
  .marquee{ overflow-x: auto; }
}
@media (max-width: 640px){
  .marquee-item{ font-size: 11.5px; padding: 0 16px; }
}
/* ---------- TRUST SECTION — real office photo backdrop ---------- */
.trust-bg{
  position: relative;
  background-image: url('office-team.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  isolation: isolate;
}
.trust-bg-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(7,26,51,0.88) 12%, rgba(7,26,51,0.86) 88%, var(--bg) 100%),
    linear-gradient(100deg, rgba(7,26,51,0.75), rgba(217,99,26,0.28));
}
.trust-content{ position: relative; z-index: 1; }
.trust-bg .sec-head{ border-bottom-color: var(--on-dark-rule); }
.trust-bg .sec-head h2{ color: var(--on-dark); }
.trust-bg .sec-tag{ color: var(--on-dark-dim); }
@media (max-width: 760px){
  .trust-bg{ background-attachment: scroll; }
}

/* ---------- PROFESSIONAL POLISH PASS ---------- */
/* The plain white "
" tiles (benefits / bonus / trust sections)
   were the flattest thing on the page — flat box, tiny emoji, no depth.
   Turned into proper icon-badge tiles with alternating brand-gradient
   circles instead, plus a real elevation shadow that grows on hover. */
.outcome-card{
  border-radius: 14px;
  text-align: center;
  padding: 30px 22px 26px;
  box-shadow: 0 4px 18px rgba(11,42,77,0.06);
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.outcome-card:hover{
  box-shadow: 0 18px 36px rgba(11,42,77,0.16);
  border-color: var(--gold-dim);
}
.outcome-card:nth-child(even):hover{ border-color: var(--violet); }

.check{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 21px;
  background: var(--gradient-hot);
  box-shadow: 0 10px 22px rgba(217,99,26,0.32);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.25s ease;
}
.outcome-card:nth-child(even) .check{
  background: var(--gradient-cool);
  box-shadow: 0 10px 22px rgba(30,118,198,0.32);
}
.outcome-card p{ font-size: 25px; font-weight: bold; color: var(--paper); }

/* Testimonial initials get the same gradient-circle treatment instead of
   a plain gray outline, so the whole page reads as one coherent system. */
.quote-avatar{
  background: var(--gradient-hot);
  border: none;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(217,99,26,0.3);
}
.quote-card:nth-child(even) .quote-avatar{
  background: var(--gradient-cool);
  box-shadow: 0 8px 18px rgba(30,118,198,0.3);
}

/* Staggered entrance: the reveal-on-scroll JS still just toggles
   .is-visible on each element independently, but cards sitting side by
   side in the same grid row cross the viewport threshold at essentially
   the same instant — so without a delay they'd all pop in together. A
   per-card transition-delay turns that into a proper left-to-right (or
   grid-order) cascade. */
.outcome-card, .bp-card, .who-card, .problem-card, .quote-card, .faq-item{
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}
.outcome-card:nth-child(1), .bp-card:nth-child(1), .who-card:nth-child(1), .problem-card:nth-child(1), .quote-card:nth-child(1), .faq-item:nth-child(1){ --stagger-i: 0; }
.outcome-card:nth-child(2), .bp-card:nth-child(2), .who-card:nth-child(2), .problem-card:nth-child(2), .quote-card:nth-child(2), .faq-item:nth-child(2){ --stagger-i: 1; }
.outcome-card:nth-child(3), .bp-card:nth-child(3), .who-card:nth-child(3), .problem-card:nth-child(3), .faq-item:nth-child(3){ --stagger-i: 2; }
.outcome-card:nth-child(4), .bp-card:nth-child(4), .who-card:nth-child(4), .problem-card:nth-child(4), .faq-item:nth-child(4){ --stagger-i: 3; }
.outcome-card:nth-child(5), .bp-card:nth-child(5), .problem-card:nth-child(5), .faq-item:nth-child(5){ --stagger-i: 4; }
.outcome-card:nth-child(6), .bp-card:nth-child(6), .problem-card:nth-child(6){ --stagger-i: 5; }
.outcome-card:nth-child(7), .bp-card:nth-child(7){ --stagger-i: 6; }
.outcome-card:nth-child(8), .bp-card:nth-child(8){ --stagger-i: 7; }
.bp-card:nth-child(9){ --stagger-i: 8; }
.bp-card:nth-child(10){ --stagger-i: 9; }
@media (prefers-reduced-motion: reduce){
  .outcome-card, .bp-card, .who-card, .problem-card, .quote-card, .faq-item{ transition-delay: 0s !important; }
}

/* Section-heading underline draws in left-to-right the moment the heading
   scrolls into view, instead of just sitting there fully drawn already. */
.sec-head::after{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.3,1);
}
.sec-head.is-visible::after{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .sec-head::after{ transform: scaleX(1); transition: none; }
}