:root{
    --bg:#f7f7f3; --surface:#fff; --ink:#1a2a3a; --muted:#5b6b7a;
    --brand-saffron:#ff8a00; --brand-green:#2e7d32; --brand-blue:#0b5aa2;
    --accent:#0b5aa2; --ring:rgba(11,90,162,.25);
    --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.05);
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  img{max-width:100%;display:block}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  .container{max-width:1200px;margin:0 auto;padding:0 20px}
  .ribbon{height:6px;background:linear-gradient(90deg,#ff9933 0 33%, #fff 33% 66%, #138808 66% 100%)}

  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700}
  .flag-dot{width:18px;height:18px;border-radius:50%;background:conic-gradient(from 270deg,#ff9933 0 33%,#fff 33% 66%,#138808 66% 100%);border:1px solid rgba(0,0,0,.08)}
  nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}

  .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid rgba(11,90,162,.15);background:linear-gradient(180deg,#fff,#f6f9ff);font-weight:700;box-shadow:var(--shadow)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
  .btn-fomo{border:1px solid rgba(0,87,183,.25)}
  .btn-fomo::after{content:"→";margin-left:6px}

  /* HERO SLIDER */
  .hero{background:#fff}
  .slider{position:relative}
  .slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;transition:transform .7s ease}
  .slide{aspect-ratio: 16/7;overflow:hidden}
  .slide img{width:100%;height:100%;object-fit:cover}
  .slider .dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
  .dot{width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.9);cursor:pointer}
  .dot[aria-current="true"]{background:var(--brand-blue)}
  .hero-overlay{position:absolute;inset:0;display:flex;align-items:center}
  .hero-box{margin-left:clamp(16px,6vw,60px);max-width:560px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:18px 18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.08)}
  .eyebrow{color:var(--brand-blue);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
  .hero h1{margin:.2em 0 .2em;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.15}
  .sub{color:var(--muted)}
  .price{display:flex;align-items:flex-end;gap:14px;margin:10px 0 6px}
  .cut{text-decoration:line-through;color:#a3aab3}
  .now{color:var(--brand-green);font-weight:800;font-size:1.35rem}
  .timer{font-weight:800;color:var(--brand-saffron)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
  .chip{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:.9rem}

  /* DETAILS BLOCK (immediately after hero) */
  .details{padding:42px 0;background:
    radial-gradient(1000px 500px at -10% 0%, rgba(255,153,51,.08), transparent 45%),
    radial-gradient(1000px 500px at 110% 40%, rgba(19,136,8,.07), transparent 55%),
    linear-gradient(180deg, rgba(11,90,162,.03), rgba(255,255,255,0))}
  .cards{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .card{grid-column:span 4;background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
  .card h3{margin:.2em 0}

  /* REGISTER NOW (FOMO) */
  .register{padding:54px 0}
  .reg-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
  .panel{border-left:4px solid var(--brand-blue);padding-left:16px}
  .form{background:var(--surface);border:1px solid rgba(0,0,0,.06);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
  .form label{display:block;margin:10px 0 6px}
  .form input,.form textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12)}
  .fine{font-size:.9rem;color:var(--muted)}
  .fomo{display:flex;align-items:center;gap:12px;margin:8px 0 12px}

  /* SUPPORTING SECTIONS */
  .section{padding:64px 0}
  .section h2{margin:0 0 8px;font-size:clamp(1.5rem,2.2vw,2.2rem)}
  .lead{color:var(--muted);max-width:100ch}
  .t-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:22px}
  .t-card{grid-column:span 4;background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
  .stars{color:#f5a524;letter-spacing:1px}

  footer{padding:40px 0;color:var(--muted)}
  .blink{animation:blink 1.2s step-start infinite}
  .blink-soft{animation:blink 1.8s step-start infinite}
  .pulse{animation:pulse 2.2s ease-in-out infinite}
  @keyframes blink{50%{opacity:.2}}
  @keyframes pulse{0%{transform:translateY(0);box-shadow:var(--shadow)}50%{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.09)}100%{transform:translateY(0);box-shadow:var(--shadow)}}
  @media (max-width:980px){
    .slide{aspect-ratio:16/9}
    .hero-box{margin:12px}
    .card,.t-card{grid-column:span 12}
    .reg-grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    .slides{transition:none}
    .btn:hover{transform:none}
    .blink,.blink-soft,.pulse{animation:none!important}
  }
  
 /* Hero band height & cover fit */
  .hero { position: relative; }
  .carousel-aspect { aspect-ratio: 16/7; background:#fff; }
  @media (max-width: 992px){ .carousel-aspect { aspect-ratio: 16/9; } }

  .carousel-aspect .carousel-item,
  .carousel-aspect .carousel-item img { height: 100%; }
  .carousel-aspect .carousel-item img {
    width:100%; object-fit: cover; object-position: center;
  }

  /* Soft scrim so overlay text stays readable */
  .hero-scrim::after{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.28));
    pointer-events:none;
  }

  /* Overlay box (your existing hero-box styles can be reused) */
  .hero-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; }
  .hero-box{
    margin-left:clamp(16px,6vw,60px); max-width:560px;
    background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
    border:1px solid rgba(0,0,0,.08); border-radius:16px;
    padding:18px 18px 16px; box-shadow:0 12px 40px rgba(0,0,0,.08);
  }

  /* Tidy controls */
  .carousel-control-prev, .carousel-control-next {
    width: 54px; height: 54px; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.92); border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12); box-shadow: 0 8px 24px rgba(0,0,0,.1);
  }
  .carousel-control-prev:hover, .carousel-control-next:hover { filter: brightness(0.98); }

  /* Indicators */
  .carousel-indicators [data-bs-target]{
    width: 11px; height: 11px; border-radius: 50%;
    background-color: rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.25);
  }
  .carousel-indicators .active{ background-color: #0b5aa2; border-color: rgba(255,255,255,.9); }
  
  /* ===== Details / Features (pro styling) ===== */
.details { padding: 48px 0; }
.features { display:grid; grid-template-columns: repeat(12,1fr); gap:20px; margin-top:22px; }

.feature {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.feature:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.09); border-color: rgba(11,90,162,.18); }

.f-icon {
  width: 44px; height: 44px; border-radius: 12px; display:grid; place-items:center;
  background: linear-gradient(180deg,#fff,#f6f9ff);
  border: 1px solid rgba(11,90,162,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin-bottom: 10px;
}
.f-icon svg { width: 22px; height: 22px; color: var(--brand-blue); }

.feature h3 { margin: 4px 0 6px; font-size: 1.12rem; }
.feature p { margin: 0 0 10px; color: var(--ink); }
.feature small { color: var(--muted); }

.points { margin: 8px 0 0; padding: 0; list-style: none; }
.points li { display:flex; align-items:flex-start; gap:10px; margin: 6px 0; color: var(--muted); }
.points .tick {
  margin-top: 2px; min-width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff9933 0 30%, #138808 31% 60%, transparent 61%);
  display:grid; place-items:center; color:#0b5aa2; font-weight:800; line-height:1;
}
.points .tick::before { content: "✓"; font-size: .72rem; }

/* subtle tri-bar accent on hover */
.feature::after{
  content:""; position:absolute; left:16px; bottom:0; width:54px; height:4px;
  background: linear-gradient(90deg,#ff9933,#ffffff,#138808);
  opacity:0; transition:opacity .18s ease, transform .18s ease; transform: translateY(6px);
}
.feature:hover::after{ opacity:.55; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px){
  .feature { grid-column: span 12; }
}

/* ===== Hero: base sizing & fit (all screens) ===== */
.carousel-aspect{
  aspect-ratio: 16/7;             /* elegant desktop band */
  background:#fff;
}
@media (max-width: 992px){
  .carousel-aspect{ aspect-ratio: 16/9; }   /* taller on mobile/tablet */
}
.carousel-aspect .carousel-item,
.carousel-aspect .carousel-item img{
  height:100%;
}
.carousel-aspect .carousel-item img{
  width:100%;
  object-fit: cover;               /* always fills, no stretching */
  object-position: center;
}

/* ============== BASE SAFETY NETS ============== */
.hero { position: relative; }
.hero-scrim { position: relative; }

/* Give the carousel a reliable height and make images cover */
.carousel-aspect,
.carousel-aspect .carousel-inner,
.carousel-aspect .carousel-item{
  height: clamp(420px, 88vh, 720px);   /* responsive, keeps content visible */
}
.carousel-aspect .carousel-item img{
  height: 100%;
  object-fit: cover;                    /* no letterboxing on tall phones */
  object-position: center;
}

/* Subtle scrim so text stays readable over bright photos */
.hero-scrim::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 70% at 0% 100%, rgba(0,0,0,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 30%);
  pointer-events:none;
}

/* Keep overlay above images + scrim */
.hero-overlay{ z-index:2; }

/* ============== OVERLAY BOX TUNING ============== */
/* Prevent the box from getting too tall, allow internal scroll if needed */
.hero-box{
  max-width: min(92vw, 560px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tighten chips and keep them in one short row on mobile */
.chips{ display:grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap:4px; }
.chip{ height:35px; padding:0 12px; display:flex; align-items:center; justify-content:center; white-space:nowrap; }

/* ============== MOBILE BREAKPOINTS ============== */
@media (max-width: 768px){
  /* Anchor overlay to bottom-left for better thumb reach */
  .hero-overlay{
    align-items:flex-end;               /* bottom */
    padding: max(10px, env(safe-area-inset-top))
             max(10px, env(safe-area-inset-right))
             max(14px, env(safe-area-inset-bottom))
             max(10px, env(safe-area-inset-left));
  }
  .hero-box{
    margin: 0;                          /* use overlay padding instead */
    padding: 14px 14px 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
  }

  /* Headings & meta scale down a touch */
  .hero-box .eyebrow{ font-size:.78rem; letter-spacing:.12em; }
  .hero-box h1{ font-size: clamp(1.35rem, 6.2vw, 1.95rem); line-height:1.18; margin:.1em 0 .25em; }
  .hero-box .sub{ font-size:.95rem; }
  .price .cut{ font-size:.95rem; }
  .price .now{ font-size:1.18rem; }
  .timer{ font-size:.94rem; }

  /* Chips: 2 columns if space is tight */
  .chips{ grid-template-columns: repeat(2, minmax(120px,1fr)); }
}

/* Ultra-small phones */
@media (max-width: 380px){
  .chips{ grid-template-columns: 1fr; }
  .chip{ height: 30px; font-size: .7rem; }
  .hero-box{ padding: 8px; }
}

/* Short-height devices (landscape phones) */
@media (max-height: 620px) and (max-width: 992px){
  .sub{ display:none; }                 /* keep above-the-fold clean */
  .fine{ display:none; }
  .chips{ margin-top:6px; }
}

/* Controls: smaller & pushed in on mobile so they don't overlap the box */
@media (max-width: 768px){
  .carousel-control-prev, .carousel-control-next{
    width:44px; height:44px;
    background: rgba(255,255,255,.9);
    border-radius:999px; border:1px solid rgba(0,0,0,.12);
    top: auto; bottom: 14px;            /* near indicators */
    transform: none;
  }
  .carousel-control-prev{ left: 14px; }
  .carousel-control-next{ right: 14px; }
  .carousel-indicators{ bottom: 14px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .carousel, .carousel *{ transition:none !important; animation:none !important; }
}



/* ===== Register (Pro + Indian touch + alignment) ===== */
.register{
  position:relative; padding:64px 0;
  background:
    radial-gradient(1000px 480px at -10% 0%, rgba(255,153,51,.06), transparent 45%),
    radial-gradient(1000px 480px at 110% 60%, rgba(19,136,8,.06), transparent 55%),
    linear-gradient(180deg, rgba(11,90,162,.03), rgba(255,255,255,0));
}
.register::before{
  content:""; position:absolute; right:4vw; top:40px; width:180px; height:180px; opacity:.08;
  background: radial-gradient(circle at 50% 50%, #0b5aa2 0 2px, transparent 3px),
              radial-gradient(circle at 50% 50%, rgba(11,90,162,.5) 0 70px, transparent 71px);
  border-radius:50%; filter: blur(.2px); pointer-events:none;
}

/* Grid columns */
.reg-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start;
}
.reg-left{ min-width:0; }
.reg-right{ min-width:0; display:grid; gap:14px; }

/* Left copy tidy */
.reg-points{ margin:10px 0 12px; padding-left:18px; }
.reg-points li{ margin:6px 0; }

/* Heading underline (tricolour) */
.register h2{
  margin:0 0 10px; font-size: clamp(1.6rem, 2.3vw, 2.3rem);
  position:relative; display:inline-block; padding-bottom:6px;
}
.register h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:6px;
  background: linear-gradient(90deg,#ff9933 0 33%, #ffffff 33% 66%, #138808 66% 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}

/* Panel card (left) */
.register .panel{
  border-left:4px solid var(--brand-blue);
  padding:16px; background:#fff; border-radius:12px;
  border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow);
}

/* FOMO ticker (right, above form) */
.fomo-ticker{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:14px 16px; box-shadow:var(--shadow);
}
.fomo-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.badge-hot{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:.92rem;
  background: linear-gradient(90deg,#ff9933 0 33%, #ff9933 33% 66%, #ff9933 66% 100%);
  border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.ticker-text{ color: var(--ink); }
.fomo-bar{
  position:relative; height:10px; border-radius:999px; overflow:hidden;
  background: linear-gradient(180deg,#f1f4f9,#e9eef7);
  border:1px solid rgba(0,0,0,.06); margin-top:10px;
}
.fomo-bar-fill{
  height:100%; width:0%; border-radius:inherit;
  background: linear-gradient(90deg,#0b5aa2,#0e6bd1);
  box-shadow: inset 0 0 8px rgba(255,255,255,.4);
  transition: width .8s cubic-bezier(.22,.61,.36,1);
}
.fomo-sub{ color: var(--muted); font-size:.9rem; margin-top:8px; }

/* Form card (right) */
.form{
  background: var(--surface);
  border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 14px 36px rgba(0,0,0,.08);
  position:relative; overflow:clip;
}
.form::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background: linear-gradient(90deg,#ff9933 0 33%, #ffffff 33% 66%, #138808 66% 100%);
  opacity:.9;
}
.form-inner{ padding:18px; }
.form-note{ margin:0; }
.price-row{ margin:10px 0 14px; }
.btn-full{ width:100%; }
.mt-8{ margin-top:8px; }

/* Trust chips */
.trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.chip-mini{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:.9rem;
  background:#fff; border:1px solid rgba(0,0,0,.08); color:var(--muted);
}
.chip-mini svg{ width:16px; height:16px; color:#0b5aa2 }

/* FOMO prices */
.fomo .cut{ color:#a3aab3; text-decoration:line-through; }
.fomo .now{ color:var(--brand-green); font-weight:800; font-size:1.25rem; }

/* Button hover flag accent */
.btn.btn-fomo{
  border:1px solid rgba(0,87,183,.25);
  background: linear-gradient(180deg,#ffffff,#f8fcff);
  position:relative; overflow:hidden;
}
.btn.btn-fomo::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4px; opacity:0;
  background: linear-gradient(90deg,#ff9933,#fff,#138808);
  transition: opacity .2s ease;
}
.btn.btn-fomo:hover::after{ opacity:.7; }

/* Responsive */
@media (max-width: 980px){
  .reg-grid{ grid-template-columns:1fr; }
  .register::before{ right:12px; top:12px; width:120px; height:120px; }
}


 /* ===== HIGHLIGHTS — Light background, responsive, professional ===== */
  :root{
    --hi-max: 1180px;
    --ink:#0f172a; --muted:#5b6777; --line:rgba(15,23,42,.08);
    --surface:#ffffff; --bg-soft:#fff8e7; /* very light saffron wash */
    --accent:#ff7a00; --accent-2:#2bb673; --accent-3:#1d4ed8;
    --radius:18px; --shadow:0 12px 38px rgba(2,8,23,.08);
  }

  .section.highlights{
    position: relative; isolation:isolate;
    padding: clamp(40px, 6vw, 84px) 16px;
    overflow: hidden;
  }
  .hi-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -8%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 40%, #ffffff 100%);
  }

  .hi-wrap{
    max-width: var(--hi-max);
    margin: 0 auto; /* centers the block */
  }

  .hi-header h2{
    margin:0 0 10px; color:var(--ink);
    font-size: clamp(22px, 2.6vw, 32px);
  }
  .hi-header .lead{ color:var(--muted); margin:0 0 20px; }

  /* Cards grid */
  .hi-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(14px, 2vw, 22px);
    margin-top: 16px;
  }
  .hi-card{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.5vw, 24px);
    transition: transform .25s ease, box-shadow .25s ease;
    outline: none;
  }
  .hi-card:focus-visible{
    box-shadow: 0 0 0 3px rgba(29,78,216,.35), var(--shadow);
  }
  .hi-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(2,8,23,.12);
  }

  .hi-top{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
  }
  .hi-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px;
    font-weight:700; color:#fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
  }
  .hi-icon{
    font-size: 22px; color: var(--accent-3);
    background: rgba(29,78,216,.08);
    border:1px solid rgba(29,78,216,.18);
    width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  }

  .hi-card h3{
    margin:6px 0 6px; color:var(--ink); font-size: clamp(16px, 1.7vw, 18px);
  }
  .hi-card p{ color:var(--muted); margin:0 0 10px; }
  .hi-tags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
  .hi-tags li{
    padding:6px 10px; border-radius:999px; font-size:12px;
    background:linear-gradient(0deg,#fff,#fff) padding-box,
              linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
    border:2px solid transparent; color:var(--ink);
  }

  /* Why Attend — standout checklist */
  .why-attend{
    margin-top: clamp(22px, 4vw, 36px);
    background: #ffffff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.6vw, 28px);
  }
  .why-head{
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
  }
  .why-head i{
    color: var(--accent-3);
    background: rgba(29,78,216,.1);
    border:1px solid rgba(29,78,216,.18);
    width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  }
  .why-head h3{
    margin:0; font-size: clamp(18px, 2vw, 22px); color: var(--ink);
  }
  .why-list{
    list-style:none; padding:0; margin:0; display:grid; gap:10px;
  }
  .why-list li{
    display:grid; grid-template-columns:28px 1fr; align-items:start; gap:10px;
    padding:10px 12px; border-radius:12px; background:#fff;
    border:1px dashed var(--line);
  }
  .why-list li i{
    color: var(--accent-2);
    width:28px; height:28px; display:grid; place-items:center;
    background: rgba(43,182,115,.12);
    border:1px solid rgba(43,182,115,.25);
    border-radius:50%;
  }
  .why-list strong{ color: var(--ink); }
  .why-list em{ color: var(--muted); font-style: normal; }

  /* Motion respect */
  @media (prefers-reduced-motion: reduce){
    .hi-card{ transition:none; }
    .hi-card:hover{ transform:none; }
  }

/* ===== Testimonials (trust-forward) ===== */
.testimonials{ position:relative; }
.testimonials .pro-reviews{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-top:18px; }
.testimonials .pro-card{
  grid-column:span 4;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline: none;
  position: relative;
}
.testimonials .pro-card:hover, .testimonials .pro-card:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  border-color: rgba(11,90,162,.18);
}
/* top row */
.t-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-weight:800; color:#0b5aa2;
  background: linear-gradient(180deg,#fff,#f6f9ff);
  border:1px solid rgba(11,90,162,.15); box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.who{ flex:1 1 auto; min-width:0; }
.who .meta{ color:var(--muted); font-size:.92rem; }
.verify{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:.86rem; font-weight:700; color:#0b5aa2;
  background:#eef4fb; border:1px solid rgba(11,90,162,.18);
}

/* rating + quote */
.pro-card .stars{ color:#f5a524; letter-spacing:1px; margin:8px 0 6px; }
.pro-card blockquote{ margin:0 0 10px; color:var(--ink); font-size:1.02rem; line-height:1.55; }

/* footer chips */
.t-foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:.9rem;
  background:#fff; border:1px solid rgba(0,0,0,.08); color:var(--muted);
}

/* subtle tricolour accent strip on hover */
.pro-card::after{
  content:""; position:absolute; left:18px; bottom:0; width:64px; height:4px;
  background: linear-gradient(90deg,#ff9933,#ffffff,#138808);
  opacity:0; transform: translateY(6px); transition:opacity .18s ease, transform .18s ease;
}
.pro-card:hover::after, .pro-card:focus-visible::after{ opacity:.55; transform: translateY(0); }

/* footnote */
.note-proof{ margin-top:10px; }
.muted{ color: var(--muted); }
.tiny{ font-size:.9rem; }

/* responsive */
@media (max-width: 980px){
  .testimonials .pro-card{ grid-column: span 12; }
}


/* --- Navbar fixes for Bootstrap icon on light bg --- */
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Global spacing & type on small screens --- */
@media (max-width: 575.98px){
  .container{ padding: 0 14px; }
  h1{ font-size: clamp(1.6rem, 6.2vw, 2.1rem); }
  .section{ padding: 44px 0; }
  .btn{ width: 100%; justify-content:center; }
}

/* --- Hero overlay breathing room on short devices --- */
@media (max-width: 992px){
  .hero-box{ margin: 12px; max-width: 94%; padding: 14px; }
}
@media (max-height: 680px) and (max-width: 992px){
  .hero-box{ padding: 10px 12px; }
  .hero .chips{ display:none; } /* keep above the fold */
}

/* --- Cards, features, testimonials already go 1-col at <=980px; tighten gutters on tablets --- */
@media (max-width: 820px){
  .cards, .t-grid, .hi-grid, .features{ gap: 16px; }
  .card, .t-card, .hi-card, .feature{ padding: 16px; }
}

/* --- Register section: stack and full-width actions --- */
@media (max-width: 980px){
  .form .btn-full{ width: 100%; }
  .fomo-row{ gap:8px; }
}

/* --- FAQs nice tap targets on mobile --- */
@media (max-width: 575.98px){
  details > summary{ padding: 14px 14px; }
  .faq .a{ padding: 0 14px 12px 14px; }
}

/* --- Make carousel controls larger tap targets on mobile --- */
@media (max-width: 575.98px){
  .carousel-control-prev, .carousel-control-next{ width: 48px; height: 48px; }
}


/* --- Fix hero overlay under sticky header on mobile --- */
@media (max-width: 768px){
  .hero-overlay{
    /* move content below sticky header */
    align-items: flex-start;
    padding-top: calc(var(--header-h, 56px) + 10px);
    /* lighten scrim so it doesn't look cloudy on phones */
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.16));
  }
  .hero-box{
    margin: 10px 12px 12px;
    max-width: 94%;
    padding: 12px 12px 10px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
  }

  /* Type & spacing compact */
  .eyebrow{ font-size:.76rem; letter-spacing:.12em; }
  h1{ font-size: clamp(1.45rem, 6vw, 1.9rem); line-height:1.18; margin:.08em 0 .22em; }
  .sub{ font-size:.95rem; margin-top:.1rem; }
  .price .cut{ font-size:.95rem; }
  .price .now{ font-size:1.18rem; }
  .timer{ font-size:.9rem; margin-top:.2rem; }

  /* Chips: prevent wrapping mess; horizontal scroll with hidden scrollbar */
  .chips{
    display:flex; gap:8px; margin-top:10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; padding:6px 10px; font-size:.88rem; }

  /* Big thumb CTA */
  .btn.btn-fomo{ width:100%; justify-content:center; margin-top:.6rem; }

  /* “fine” line smaller; trim opacity */
  .fine{ font-size:.88rem; opacity:.9; }
}

/* Very short viewports (landscape phones/small devices) */
@media (max-height: 680px) and (max-width: 992px){
  .chips{ display:none; }
  .fine{ display:none; }
  .hero-box{ padding:10px 12px; }
}

/* Ensure carousel band is tall enough so the box doesn’t overflow below */
@media (max-width: 768px){
  .carousel-aspect{ aspect-ratio: 16/9; min-height: 420px; }
}


/* ===== Fix carousel overflow on mobile ===== */
.carousel-aspect{
  width:100%;
  aspect-ratio: 16/7;             /* nice ratio for desktop */
  overflow:hidden;
}
.carousel-aspect .carousel-item img{
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* --- make it fluid on tablets & phones --- */
@media (max-width: 991.98px){
  .carousel-aspect{
    aspect-ratio:auto;             /* remove the fixed ratio */
    height:auto;                   /* allow it to shrink */
    min-height: 380px;             /* safety: enough for overlay */
  }
  .carousel-aspect .carousel-item,
  .carousel-aspect .carousel-item img{
    height: 100%;
    width:100%;
    object-fit:cover;
  }
}

/* --- small phones: ensure full width, auto height --- */
@media (max-width: 575.98px){
  .carousel-aspect{
    min-height: 320px;
  }
  .carousel-aspect .carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* optional: tighter padding around overlay on small screens */
@media (max-width:575.98px){
  .hero-box{
    margin: 10px;
    max-width: 92%;
    padding: 14px 14px 12px;
  }
}

/* Ensure the hero acts as a clipping container */
.hero{ position: relative; overflow: hidden; }

/* Keep carousel images filling their area */
.carousel-aspect{ width:100%; aspect-ratio:16/7; }
.carousel-aspect .carousel-item,
.carousel-aspect .carousel-item img{ height:100%; }
.carousel-aspect .carousel-item img{
  width:100%; object-fit:cover; object-position:center;
}

/* Mobile/tablet: let the carousel be fluid and tall enough */
@media (max-width: 991.98px){
  .carousel-aspect{ aspect-ratio:auto; min-height: 360px; }
}

/* Overlay sits on top but leaves room for sticky header */
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 65%, rgba(0,0,0,.18));
  pointer-events:none;   /* allow swipes/clicks below except inside the box */
}
.hero-box{
  pointer-events:auto;
  margin-left: clamp(12px, 6vw, 60px);
  max-width: 560px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

/* ==== PHONE-FIRST CONSTRAINTS ==== */
@media (max-width: 768px){
  /* Start overlay content below the sticky header */
  .hero-overlay{
    align-items: flex-start;
    padding-top: calc(var(--header-h, 56px) + 10px);
  }

  /* The BOX must never exceed the carousel height */
  .hero-box{
    margin: 10px 12px 12px;
    max-width: 92%;
    /* cap the box height to what's visible inside the hero */
    max-height: calc(100% - calc(var(--header-h, 56px) + 22px));
    overflow: auto;                  /* scroll inside the card if content is long */
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 10px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
  }

  /* Compact type */
  .eyebrow{ font-size:.76rem; letter-spacing:.12em; }
  h1{ font-size: clamp(1.45rem, 6vw, 1.9rem); line-height:1.18; margin:.08em 0 .22em; }
  .sub{ font-size:.95rem; }
  .price .cut{ font-size:.95rem; }
  .price .now{ font-size:1.18rem; }
  .timer{ font-size:.9rem; }

  /* Chips in a horizontal scroller to avoid wrapping tall */
  .chips{
    display:flex; gap:8px; margin-top:10px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; padding:6px 10px; font-size:.88rem; }

  /* Thumb-friendly CTA */
  .btn.btn-fomo{ width:100%; justify-content:center; }

  .fine{ font-size:.88rem; opacity:.9; }
}

/* Really short viewports (landscape phones) – keep CTA in view */
@media (max-height: 680px) and (max-width: 992px){
  .chips{ display:none; }
  .fine{ display:none; }
  .hero-box{ padding:10px 12px; }
}


/* ===== ABOUT — Light, centered, responsive ===== */
  :root{
    --about-max: 1100px;
    --surface: #ffffff;
    --ink: #0f172a;
    --muted: #5b6777;
    --line: rgba(15,23,42,.08);
    --accent: #ff7a00;      /* saffron accent */
    --accent-2: #0ea5a0;    /* teal/green accent for chips */
    --accent-3: #1d4ed8;    /* blue accent for badge */
    --bg-soft: #fff8e7;     /* very light saffron wash */
    --radius: 18px;
    --shadow: 0 12px 38px rgba(2,8,23,.08);
  }

  .section.about-split{
    position: relative;
    padding: clamp(40px, 6vw, 84px) 16px;
    overflow: hidden;
    isolation: isolate;
  }
  .about-bg{
    position: absolute; inset: 0;
    background:
      radial-gradient(1200px 400px at 50% -10%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 35%, #ffffff 100%);
    z-index: -1;
  }

  .about-wrap{
    max-width: var(--about-max);
    margin: 0 auto;            /* centers the whole block */
    display: grid;
    gap: clamp(18px, 3vw, 28px);
  }

  .about-card,
  .vision-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(20px, 3.5vw, 36px);
  }

  .about-head h2{
    margin: 0 0 10px 0;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.2;
    color: var(--ink);
  }
  .underline{
    display: inline-block;
    height: 4px; width: 72px; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #f6c200, #2bb673);
  }

  .lead{
    font-size: clamp(16px, 1.8vw, 18px);
    color: var(--ink);
    margin: 14px 0 12px 0;
  }
  p{ color: var(--muted); margin: 10px 0; }

  /* ===== Keypoints (standout chips) ===== */
  .keypoints{
    list-style: none; padding: 0; margin: 20px 0 0 0;
    display: grid; gap: 12px;
  }
  .kp{
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 12px;
    background: linear-gradient(0deg, #ffffff, #ffffff) padding-box,
                linear-gradient(90deg, var(--accent), #2bb673) border-box;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 10px 12px;
  }
  .kp-icon{
    width: 28px; height: 28px; display: grid; place-items: center;
    font-weight: 700;
    background: rgba(14,165,160,.12);
    border: 1px solid rgba(14,165,160,.25);
    border-radius: 50%;
    color: var(--accent-2);
  }
  .kp-text strong{
    font-weight: 700; color: var(--ink);
    display: inline-block; margin-right: .4rem;
  }
  .kp-text .muted{
    color: var(--muted);
  }
  .badge{
    display: inline-block;
    padding: 2px 8px; margin-left: .35rem;
    border-radius: 999px;
    font-size: 12px; line-height: 1.5;
    background: rgba(29,78,216,.09);
    border: 1px solid rgba(29,78,216,.25);
    color: var(--accent-3);
    font-weight: 600;
    vertical-align: middle;
  }

  /* ===== Vision grid ===== */
  .vision-grid{
    margin-top: 18px;
    display: grid;
    gap: 14px;
  }
  .v-item{
    padding: 14px 14px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #ffffff;
  }
  .v-item h3{
    margin: 0 0 6px 0;
    font-size: clamp(16px, 1.7vw, 18px);
    color: var(--ink);
  }
  .v-item p{
    margin: 0; color: var(--muted);
  }

  /* ===== Responsive behavior ===== */
  @media (min-width: 860px){
    .vision-grid{
      grid-template-columns: repeat(3, 1fr);
    }
  }


/* ===== MASTERCLASS SCHEDULE ===== */
.schedule-section {
  position: relative;
  background:
    radial-gradient(700px 400px at 5% 0%, rgba(255,153,51,.08), transparent 50%),
    radial-gradient(700px 400px at 95% 80%, rgba(19,136,8,.08), transparent 55%),
    linear-gradient(180deg, rgba(11,90,162,.03), rgba(255,255,255,0));
  padding: 72px 0;
  overflow:hidden;
}

.schedule-header h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--ink);
  margin-bottom: 8px;
  position:relative;
}
.schedule-header h2::after {
  content:""; position:absolute; left:0; bottom:-6px; width:80px; height:5px;
  border-radius:6px;
  background: linear-gradient(90deg,#ff9933,#ffffff,#138808);
}
.schedule-header .tagline {
  color: var(--brand-blue);
  font-weight:600;
  margin-top:12px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items:center;
  margin-top: 40px;
}

/* Left info box */
.schedule-info {
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  padding:32px 28px;
  box-shadow:0 14px 36px rgba(0,0,0,.06);
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.schedule-info:hover {
  transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(0,0,0,.09);
}

/* List items */
.schedule-list {
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.schedule-list li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:1rem; color:var(--ink);
}
.schedule-list .icon { font-size:1.2rem; min-width:24px; opacity:.8; }
.schedule-list strong { color:var(--brand-blue); }

.cut {
  text-decoration:line-through; color:#999; margin:0 6px;
}
.now {
  color:var(--brand-green); font-weight:700;
  font-size:1.2rem;
}
.label {
  background:var(--brand-saffron);
  color:#fff; border-radius:999px;
  padding:2px 10px;
  font-size:.82rem;
  margin-left:6px;
}

/* Timer */
.timer-box {
  background:rgba(11,90,162,.05);
  border-left:4px solid var(--brand-blue);
  padding:12px 16px;
  border-radius:10px;
  margin-top:24px;
}
.timer-text { color:var(--brand-blue); margin:0 0 8px; font-weight:600; }
.countdown {
  font-size:1.3rem; font-weight:700; color:var(--brand-saffron);
  letter-spacing:1px;
}

/* Button */
.schedule-btn {
  display:inline-block;
  margin-top:24px;
  text-align:center;
  font-weight:700;
  padding:14px 28px;
  font-size:1.05rem;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(90deg,#ff9933,#138808);
  box-shadow:0 10px 24px rgba(0,0,0,.1);
  text-decoration:none;
}
.schedule-btn:hover { opacity:.9; }

.fine {
  margin-top:10px;
  font-size:.9rem;
  color:var(--muted);
}

/* Right visual */
.schedule-visual img {
  width:100%;
  height:auto;
  border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.08);
  object-fit:cover;
}

/* Responsive */
@media (max-width: 980px) {
  .schedule-grid { grid-template-columns:1fr; gap:28px; }
  .schedule-info { padding:24px 20px; }
  .schedule-btn { width:100%; }
  .schedule-visual img { max-height:380px; object-fit:cover; }
}
@media (max-width:600px){
  .schedule-section { padding:56px 0; }
  .countdown { font-size:1.1rem; }
}


/* ===== WHAT YOU'LL LEARN — light background, responsive ===== */
  :root{
    --learn-max: 1180px;
    --ink:#0f172a; --muted:#5b6777; --line:rgba(15,23,42,.10);
    --surface:#ffffff; --bg-soft:#fff8e7; /* very light saffron wash */
    --accent:#ff7a00; --accent-2:#2bb673; --accent-3:#1d4ed8;
    --radius:18px; --shadow:0 12px 38px rgba(2,8,23,.08);
  }

  .section.learn{
    position:relative; isolation:isolate;
    padding: clamp(40px, 6vw, 84px) 16px;
    overflow:hidden;
  }
  .learn-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -8%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 40%, #ffffff 100%);
  }
  .learn-wrap{
    max-width: var(--learn-max);
    margin: 0 auto;
  }

  .learn-header{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    margin-bottom: clamp(18px, 3vw, 26px);
  }
  .learn-header i{
    color: var(--accent-3);
    background: rgba(29,78,216,.10);
    border:1px solid rgba(29,78,216,.20);
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  }
  .learn-header h2{
    margin:0; color:var(--ink); font-size: clamp(22px, 2.6vw, 32px);
  }
  .learn-header .lead{ margin:0; color:var(--muted); }

  /* Grid (Day 1 / Day 2) */
  .learn-grid{
    display:grid; gap: clamp(14px, 2vw, 22px);
    grid-template-columns: 1fr;
  }
  @media (min-width: 960px){
    .learn-grid{ grid-template-columns: 1fr 1fr; }
  }

  .day-card{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.6vw, 28px);
  }
  .day-head{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px;
  }
  .pill{
    display:inline-flex; gap:8px; align-items:center;
    padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600;
    border:1px solid var(--line); background:#fff; color:var(--ink);
  }
  .pill-day{
    background: linear-gradient(0deg,#fff,#fff) padding-box,
                linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
    border:2px solid transparent;
  }
  .pill-time i{ color: var(--accent-3); }

  /* Bullet list with icons */
  .learn-list{
    list-style:none; padding:0; margin:0; display:grid; gap:10px;
  }
  .learn-list li{
    display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start;
    padding:10px 12px; border-radius:12px; background:#fff;
    border:1px dashed var(--line);
  }
  .learn-list li i{
    width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
    background: rgba(43,182,115,.12);
    border:1px solid rgba(43,182,115,.25);
    color: var(--accent-2);
    font-size: 16px;
  }
  .learn-list strong{ color:var(--ink); }
  .learn-list .muted{ color:var(--muted); margin:2px 0 0; }

  /* Callouts row (standout points) */
  .learn-callouts{
    margin-top: clamp(20px, 3.5vw, 28px);
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .callout{
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:12px 14px; box-shadow: var(--shadow);
  }
  .callout i{
    width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
    background: rgba(29,78,216,.10);
    border:1px solid rgba(29,78,216,.20);
    color: var(--accent-3);
  }

  /* Motion preference */
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }


 /* ===== DIGITAL BADGE — light background, responsive, pro styling ===== */
  :root{
    --bdg-max: 1180px;
    --ink:#0f172a; --muted:#5b6777; --line:rgba(15,23,42,.10);
    --surface:#ffffff; --bg-soft:#fff8e7; /* very light saffron wash */
    --accent:#ff7a00; --accent-2:#2bb673; --accent-3:#1d4ed8;
    --radius:18px; --shadow:0 12px 38px rgba(2,8,23,.08);
  }

  .section.badge-sec{
    position: relative; isolation:isolate;
    padding: clamp(40px, 6vw, 84px) 16px;
    overflow: hidden;
  }
  .badge-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -8%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 40%, #ffffff 100%);
  }
  .badge-wrap{
    max-width: var(--bdg-max);
    margin: 0 auto;
  }

  .badge-header{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    margin-bottom: clamp(18px, 3vw, 26px);
  }
  .badge-header i{
    color: var(--accent-3);
    background: rgba(29,78,216,.10);
    border:1px solid rgba(29,78,216,.20);
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  }
  .badge-header h2{
    margin:0; color:var(--ink); font-size: clamp(22px, 2.6vw, 32px);
  }
  .badge-header .lead{ margin:0; color:var(--muted); }

  /* Grid (left: details, right: preview) */
  .badge-grid{
    display:grid; gap: clamp(14px, 2vw, 22px);
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px){
    .badge-grid{ grid-template-columns: 1.1fr .9fr; align-items: start; }
  }

  .badge-card{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.6vw, 28px);
  }
  .subhead{
    display:flex; align-items:center; gap:8px; margin:0 0 10px;
    font-size: clamp(16px, 1.8vw, 20px); color: var(--ink);
  }
  .subhead i{ color: var(--accent-2); }

  .badge-list{
    list-style:none; padding:0; margin:0; display:grid; gap:10px;
  }
  .badge-list li{
    display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start;
    padding:10px 12px; border-radius:12px; background:#fff;
    border:1px dashed var(--line);
  }
  .badge-list li i{
    width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
    background: rgba(43,182,115,.12);
    border:1px solid rgba(43,182,115,.25);
    color: var(--accent-2);
    font-size: 16px;
  }
  .badge-list strong{ color: var(--ink); }
  .badge-list .muted{ color: var(--muted); margin:2px 0 0; }

  .cta-row{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:12px; font-weight:600;
    text-decoration:none; border:1px solid var(--line); color: var(--ink);
    background:#fff;
  }
  .btn.primary{
    background: linear-gradient(0deg,#fff,#fff) padding-box,
                linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
    border:2px solid transparent;
  }
  .btn.ghost{
    background:#fff; border:1px solid var(--line);
  }
  .btn[aria-disabled="true"]{ opacity:.75; pointer-events:none; }

  /* Preview */
  .badge-preview .badge-frame{
    aspect-ratio: 1 / 1; width: min(480px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    display:grid; place-items:center;
    margin: 0 auto;
    overflow:hidden;
  }
  .badge-preview img{
    max-width: 80%; height: auto; display:block; filter: drop-shadow(0 6px 18px rgba(2,8,23,.10));
  }
  .badge-preview .caption{
    text-align:center; color: var(--muted); margin-top:10px;
  }

  /* Testimonials — Apple-style bubbles */
  .testimonials{
    margin-top: clamp(22px, 4vw, 36px);
    background: #fff; border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.6vw, 28px);
  }
  .t-head{
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
  }
  .t-head i{
    color: var(--accent-3);
    background: rgba(29,78,216,.1);
    border:1px solid rgba(29,78,216,.18);
    width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  }
  .t-head h3{ margin:0; font-size: clamp(18px, 2vw, 22px); color: var(--ink); }

  .imessages{
    display:grid; gap:12px;
  }
  .bubble{
    max-width: 760px;
    padding: 12px 14px; border-radius: 18px; line-height:1.45;
    box-shadow: 0 4px 18px rgba(2,8,23,.08);
    position: relative;
  }
  .bubble.left{
    background:#f4f6fb; color: var(--ink);
    border-top-left-radius: 6px;
    justify-self: start;
  }
  .bubble.right{
    background:#dff7e9; color: var(--ink);
    border-top-right-radius: 6px;
    justify-self: end;
  }
  .bubble .meta{
    display:block; margin-top:6px; font-size:12px; color: var(--muted);
  }

  /* Typing indicator */
  .typing{ display:flex; gap:6px; align-items:center; padding:8px 12px; background:#f4f6fb; border-radius:18px; width:max-content; }
  .typing span{
    width:8px; height:8px; border-radius:50%; background:#b7c0cc; display:inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
  }
  .typing span:nth-child(2){ animation-delay: .15s; }
  .typing span:nth-child(3){ animation-delay: .3s; }
  @keyframes bounce{
    0%,80%,100%{ transform: scale(0); } 40%{ transform: scale(1); }
  }

  /* Motion preference */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }
  
   /* ===== CERTIFICATE — light background, responsive, professional ===== */
  :root{
    --cert-max: 1180px;
    --ink:#0f172a; --muted:#5b6777; --line:rgba(15,23,42,.10);
    --surface:#ffffff; --bg-soft:#fff8e7; /* very light saffron wash */
    --accent:#ff7a00; --accent-2:#2bb673; --accent-3:#1d4ed8;
    --radius:18px; --shadow:0 12px 38px rgba(2,8,23,.08);
  }

  .section.cert-sec{
    position:relative; isolation:isolate;
    padding: clamp(40px, 6vw, 84px) 16px;
    overflow:hidden;
  }
  .cert-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -8%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 40%, #ffffff 100%);
  }
  .cert-wrap{
    max-width: var(--cert-max);
    margin: 0 auto;
  }

  .cert-header{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    margin-bottom: clamp(18px, 3vw, 26px);
  }
  .cert-header i{
    color: var(--accent-3);
    background: rgba(29,78,216,.10);
    border:1px solid rgba(29,78,216,.20);
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  }
  .cert-header h2{
    margin:0; color:var(--ink); font-size: clamp(22px, 2.6vw, 32px);
  }
  .cert-header .lead{ margin:0; color:var(--muted); }

  .cert-grid{
    display:grid; gap: clamp(14px, 2vw, 22px);
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px){
    .cert-grid{ grid-template-columns: 1.05fr .95fr; align-items:start; }
  }

  .cert-card{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.6vw, 28px);
  }
  .subhead{
    display:flex; align-items:center; gap:8px; margin:0 0 10px;
    font-size: clamp(16px, 1.8vw, 20px); color: var(--ink);
  }
  .subhead i{ color: var(--accent-2); }

  .cert-list{
    list-style:none; padding:0; margin:0; display:grid; gap:10px;
  }
  .cert-list li{
    display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start;
    padding:10px 12px; border-radius:12px; background:#fff;
    border:1px dashed var(--line);
  }
  .cert-list li i{
    width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
    background: rgba(43,182,115,.12);
    border:1px solid rgba(43,182,115,.25);
    color: var(--accent-2);
    font-size: 16px;
  }
  .cert-list strong{ color: var(--ink); }
  .cert-list .muted{ color: var(--muted); margin:2px 0 0; }

  .cta-row{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:12px; font-weight:600;
    text-decoration:none; border:1px solid var(--line); color: var(--ink);
    background:#fff;
  }
  .btn.primary{
    background: linear-gradient(0deg,#fff,#fff) padding-box,
                linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
    border:2px solid transparent;
  }
  .btn.ghost{
    background:#fff; border:1px solid var(--line);
  }
  .btn[aria-disabled="true"]{ opacity:.75; pointer-events:none; }

  /* Preview */
  .cert-preview .cert-frame{
    aspect-ratio: 16 / 11; width: min(560px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    display:grid; place-items:center;
    margin: 0 auto;
    overflow:hidden;
  }
  .cert-preview img{
    max-width: 92%; height: auto; display:block;
    filter: drop-shadow(0 6px 18px rgba(2,8,23,.10));
  }
  .cert-preview .caption{
    text-align:center; color: var(--muted); margin-top:10px;
  }

  /* Motion */
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }
  
  /* ===== UPCOMING — light background, responsive ===== */
  :root{
    --up-max: 1180px;
    --ink:#0f172a; --muted:#5b6777; --line:rgba(15,23,42,.10);
    --surface:#ffffff; --bg-soft:#fff8e7; /* very light saffron wash */
    --accent:#ff7a00; --accent-2:#2bb673; --accent-3:#1d4ed8;
    --radius:18px; --shadow:0 12px 38px rgba(2,8,23,.08);
  }
  .section.upcoming-sec{
    position:relative; isolation:isolate;
    padding: clamp(40px, 6vw, 84px) 16px; overflow:hidden;
  }
  .up-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -8%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 40%, #ffffff 100%);
  }
  .up-wrap{ max-width: var(--up-max); margin: 0 auto; }

  .up-head{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    margin-bottom: clamp(18px, 3vw, 26px);
  }
  .up-head i{
    color: var(--accent-3);
    background: rgba(29,78,216,.10);
    border:1px solid rgba(29,78,216,.20);
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  }
  .up-head h2{ margin:0; color:var(--ink); font-size: clamp(22px, 2.6vw, 32px); }
  .up-head .lead{ margin:0; color:var(--muted); }

  .up-grid{
    display:grid; gap: clamp(14px, 2vw, 22px);
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px){
    .up-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
  }

  .up-card{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.6vw, 28px);
  }

  .up-list{
    list-style:none; padding:0; margin:0; display:grid; gap:10px;
  }
  .up-list li{
    display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start;
    padding:10px 12px; border-radius:12px; background:#fff;
    border:1px dashed var(--line);
  }
  .up-list li i{
    width:42px; height:42px; display:grid; place-items:center; border-radius:10px;
    background: rgba(43,182,115,.12);
    border:1px solid rgba(43,182,115,.25);
    color: var(--accent-2); font-size:18px;
  }
  .up-list strong{ color:var(--ink); }
  .up-list .muted{ color:var(--muted); margin:2px 0 0; }

  .cta-row{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
  @media (min-width: 640px){ .cta-row{ flex-direction:row; align-items:center; } }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 16px; border-radius:12px; font-weight:700;
    text-decoration:none; border:1px solid var(--line); color: var(--ink);
    background:#fff;
  }
  .btn.primary{
    background: linear-gradient(0deg,#fff,#fff) padding-box,
                linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
    border:2px solid transparent;
  }
  .fine{ margin:0; color:var(--muted); font-size: 14px; display:flex; align-items:center; gap:8px; }

  /* Counter card */
  .counter-card{
    background:#fff; border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(16px, 2.6vw, 28px);
  }
  .counter-card h3{
    margin:0 0 8px; font-size: clamp(16px, 1.8vw, 20px); color: var(--ink);
    display:flex; align-items:center; gap:8px;
  }
  .counter-display{
    display:flex; align-items:baseline; gap:10px; justify-content:center;
    padding: 14px; border-radius: 16px; background:#ffffff;
    border: 2px solid transparent;
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
  }
  #regCount{
    font-variant-numeric: tabular-nums;
    /*font-size: clamp(32px, 6vw, 48px);*/
    font-weight: 800; color: var(--ink);
    line-height: 1;
  }
  .counter-note{ text-align:center; color:var(--muted); margin:8px 0 0; font-size: 13px; }

  .progress-wrap{ margin-top:12px; }
  .progress-bar{
    height: 10px; border-radius: 999px; background: #eef2f7; overflow:hidden;
    border: 1px solid var(--line);
  }
  .progress-bar span{
    display:block; height:100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .6s ease;
  }
  .progress-scale{
    display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:6px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }
  
  /* ===== FAQS — light background, responsive, pro ===== */
  :root{
    --faq-max: 1180px;
    --ink:#0f172a; --muted:#5b6777; --line:rgba(15,23,42,.10);
    --surface:#ffffff; --bg-soft:#fff8e7; /* very light saffron wash */
    --accent:#ff7a00; --accent-2:#2bb673; --accent-3:#1d4ed8;
    --radius:18px; --shadow:0 12px 38px rgba(2,8,23,.08);
  }

  .section.faq-sec{
    position:relative; isolation:isolate;
    padding: clamp(40px, 6vw, 84px) 16px;
    overflow:hidden;
  }
  .faq-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -8%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-soft), #ffffff 40%, #ffffff 100%);
  }
  .faq-wrap{
    max-width: var(--faq-max);
    margin: 0 auto;
  }

  .faq-head{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    margin-bottom: clamp(18px, 3vw, 26px);
  }
  .faq-head i{
    color: var(--accent-3);
    background: rgba(29,78,216,.10);
    border:1px solid rgba(29,78,216,.20);
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  }
  .faq-head h2{
    margin:0; color:var(--ink); font-size: clamp(22px, 2.6vw, 32px);
  }
  .faq-head .lead{ margin:0; color:var(--muted); }

  .faq-grid{
    display:grid; gap: clamp(12px, 2vw, 18px);
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px){
    .faq-grid{ grid-template-columns: 1fr 1fr; }
  }

  .faq-item{
    background:#fff; border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow:hidden;
  }
  .faq-item summary{
    cursor:pointer; list-style:none; user-select:none; outline:none;
    display:flex; align-items:center; gap:10px; justify-content:space-between;
    padding: 14px 16px;
    font-weight:700; color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .q-icon{
    width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
    background: rgba(43,182,115,.12); border:1px solid rgba(43,182,115,.25);
    color: var(--accent-2); margin-right:4px;
  }
  .chev{ transition: transform .25s ease; color:#334155; opacity:.8; margin-left:auto; }
  .faq-item[open] .chev{ transform: rotate(180deg); }

  .answer{
    padding: 0 16px 16px 66px; color: var(--muted);
  }

  /* ===== FOOTER — light, structured, responsive ===== */
  .site-footer{
    position:relative; isolation:isolate; color:var(--ink);
    padding: clamp(28px, 5vw, 54px) 16px 20px;
    background:#ffffff;
    border-top:1px solid var(--line);
  }
  .footer-bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 260px at 50% -20%, #fff3d4 0%, transparent 60%),
      linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  }
  .footer-wrap{ max-width: var(--faq-max); margin: 0 auto; }

  .f-top{
    display:grid; gap: clamp(16px, 2.4vw, 28px);
    grid-template-columns: 1fr;
    padding-bottom: 12px;
  }
  @media (min-width: 900px){
    .f-top{ grid-template-columns: 1.2fr .9fr .9fr; align-items:start; }
  }

  .brand i{
    color:#fff;
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 20px rgba(2,8,23,.12);
  }
  .brand h3{ margin:8px 0 6px; font-size: clamp(18px, 2.1vw, 22px); color:var(--ink); }
  .brand .tagline{ color:var(--muted); margin:0 0 10px; }
  .btn.primary{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
    background: linear-gradient(0deg,#fff,#fff) padding-box,
                linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;
    border:2px solid transparent; color: var(--ink);
  }

  .links h4, .contact h4{ margin:0 0 8px; color:var(--ink); font-size: clamp(14px, 1.6vw, 16px); }
  .links ul, .contact ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
  .links a{ text-decoration:none; color:var(--ink); }
  .links a i{ width:18px; text-align:center; margin-right:6px; color:#64748b; }
  .links a:hover{ text-decoration:underline; }

  .contact ul li{ color:var(--muted); }
  .contact i{ width:18px; text-align:center; margin-right:6px; color:#64748b; }
  .contact .social{ margin-top:10px; display:flex; gap:10px; }
  .contact .social a{
    width:34px; height:34px; display:grid; place-items:center; border-radius:10px; text-decoration:none;
    background:#fff; border:1px solid var(--line); color:#0f172a;
  }

  .f-bottom{
    display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:space-between;
    border-top:1px dashed var(--line); padding-top:12px; margin-top:18px;
  }
  @media (min-width: 800px){
    .f-bottom{ flex-direction:row; }
  }
  .fine{ color:var(--muted); }
  .policies{ display:flex; align-items:center; gap:10px; }
  .policies a{ color:var(--ink); text-decoration:none; }
  .policies a[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

  /* Motion respect */
  @media (prefers-reduced-motion: reduce){
    .chev{ transition:none; }
  }
  /* Footer brand logo + layout tweaks */
.site-footer .brand {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo title"
    "logo tagline";
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}

.brand-logo {
  grid-area: logo;
  width: 100px;           /* adjust as needed */
  height: 100px;
  object-fit: contain;
  /* border-radius: 12px;    remove if your logo is circular or needs no rounding 
  border: 1px solid var(--line);
  background: #fff;
}

.brand h3 {
  grid-area: title;
  margin: 0;
  font-size: clamp(18px, 2.1vw, 22px);
  color: var(--ink);
}

.brand .tagline {
  grid-area: tagline;
  margin: 0;
  color: var(--muted);
  max-width: 46ch;       /* keeps it tidy */
}

/* On narrow screens, stack logo above text */
@media (max-width: 520px) {
  .site-footer .brand {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "title"
      "tagline";
    justify-items: start;
  }
  .brand-logo {
    width: 80px; height: 80px; margin-bottom: 6px;
  }
}


/* Navbar brand logo sizing */
.navbar .brand-logo{
  height: 80px; /* tweak: 32–44px */
  width: auto;
  display: block;
}

/* Optional: nicer hover without shifting */
.navbar .navbar-brand{ padding: .25rem 0; }
.navbar .navbar-brand:hover{ opacity: .9; }

/* If your logo has dark text and header gets darker, force visibility */
@media (prefers-color-scheme: dark){
  .navbar .brand-logo{ filter: brightness(1.05) contrast(1.05); }
}


/* CTA — Register Now */
.btn.btn-fomo{
  --cta-bg: #ffffff;
  --cta-ink:#0f172a;
  --cta-g1:#ff7a00;   /* saffron */
  --cta-g2:#2bb673;   /* green  */
  --cta-glow: 0 10px 28px rgba(2,8,23,.14);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  color: var(--cta-ink);
  background:
    linear-gradient(var(--cta-bg),var(--cta-bg)) padding-box,
    linear-gradient(90deg,var(--cta-g1),var(--cta-g2)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--cta-glow);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  isolation: isolate; /* keeps ripple under the label */
}

.btn.btn-fomo:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(2,8,23,.18);
}

.btn.btn-fomo:active{
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(2,8,23,.16);
}

/* Sheen on hover (subtle curiosity cue) */
.btn.btn-fomo::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 30%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none;
  mix-blend-mode: soft-light;
}
.btn.btn-fomo:hover::after{ transform: translateX(120%); }

/* Focus-visible ring (keyboard users) */
.btn.btn-fomo:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.9),
    0 0 0 8px rgba(29,78,216,.35),
    var(--cta-glow);
}

/* Gentle pulse (already using .pulse on your HTML) */
@keyframes softPulse {
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.015); }
  100%{ transform: translateY(0) scale(1); }
}
.pulse{ animation: softPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .pulse{ animation: none; }
}

/* Optional: tiny badge dot (urgency hint) */
.btn.btn-fomo::before{
  content:"";
  position:absolute;
  top: 10px; right: 10px;
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffd09e 0%, #ff7a00 50%, #c25600 100%);
  box-shadow: 0 0 0 3px rgba(255,122,0,.18);
}

/* Responsive tap-target */
@media (max-width: 480px){
  .btn.btn-fomo{ width: 100%; padding: 14px 18px; }
}


/* Scroll to Top Button */
.scroll-to-top-btn {
  position: fixed;
  bottom: 20px;      /* Position from the bottom */
  right: 20px;       /* Position from the right */
  background-color: #ff7a00;  /* Saffron background */
  color: white;
  border: none;
  border-radius: 50%;
  padding: 16px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;        /* Initially hidden */
  visibility: hidden; /* Initially hidden */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease;
  z-index: 1000;     /* Ensure it stays above other content */
}

/* Hover effect (changes color on hover) */
.scroll-to-top-btn:hover {
  background-color: #2bb673;  /* Green background on hover */
}

.scroll-to-top-btn:focus {
  outline: none;
}

/* Show the button when scrolled down by more than 100px */
.scroll-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);  /* If you want an animation effect */
}

/* Smooth scroll effect for body */
html {
  scroll-behavior: smooth;
}