/* ==========================================================================
   THE AI MARKETING LAUNCHPAD — NEXUS LEARNING ETHOS
   Design System: Corporate / Modern / Minimalism
   ========================================================================== */

/* ---- TOKENS ---- */
:root {
  /* surfaces */
  --surface:         #f9f9f9;
  --surface-dim:     #dadada;
  --surface-off:     #F9FAFB;
  --surface-card:    #ffffff;
  --surface-variant: #e2e2e2;

  /* text */
  --on-surface:         #1a1c1c;
  --on-surface-variant: #46464a;
  --slate:              #4B5563;

  /* brand */
  --primary:       #0A0A0B;
  --accent:        #00D1FF;
  --accent-dark:   #00a3cc;
  --accent-glow:   rgba(0, 209, 255, 0.25);
  --warning:       #FFB800;

  /* dark section */
  --dark-bg:       #0A0A0B;
  --dark-text:     #ffffff;
  --dark-muted:    rgba(255,255,255,0.65);

  /* shadows (ambient) */
  --shadow:        0 20px 40px rgba(10,10,11,0.05);
  --shadow-hover:  0 30px 60px rgba(10,10,11,0.08);
  --shadow-btn:    0 8px 16px rgba(0,209,255,0.25);

  /* radius */
  --r:      8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* spacing */
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  24px;
  --sp-lg:  48px;
  --sp-xl:  96px;
  --gutter: 24px;
  --mx:     32px;
  --max-w:  1280px;

  /* transitions */
  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: .2s;
  --t-med:  .4s;
  --t-slow: .6s;
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:initial;background:var(--surface)}
body{
  font-family:'Inter',sans-serif;
  color:var(--on-surface);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}

/* ---- TYPOGRAPHY ---- */
.heading-xl{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:clamp(32px,5vw,48px);
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--on-surface);
  margin-bottom:16px;
}
.heading-md{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:clamp(20px,2.5vw,24px);
  line-height:1.35;
  color:var(--on-surface);
  margin-bottom:8px;
}
.body-lg{font-size:18px;line-height:28px;font-weight:400}
.body-md{font-size:16px;line-height:24px;font-weight:400}
.body-sm{font-size:14px;line-height:20px;font-weight:500}
.label-sm{font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.eyebrow{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:12px;
}

/* helpers */
.text-accent{color:var(--accent)}
.text-muted{color:var(--on-surface-variant)}
.text-white{color:#fff}
.text-white-muted{color:var(--dark-muted)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.icon-fill{font-variation-settings:'FILL' 1}

/* ---- LAYOUT ---- */
.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--mx);
}

.section{
  padding:var(--sp-xl) 0;
  position:relative;
}
.section--surface{background:var(--surface)}
.section--offwhite{background:var(--surface-off)}
.section--dark{background:var(--dark-bg);color:#fff}
.section--dark .heading-xl{color:#fff}
.section--bordered{border-top:1px solid var(--surface-variant);border-bottom:1px solid var(--surface-variant)}

/* ---- SCROLL PROGRESS ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;
  background:var(--accent);
  width:0%;z-index:999;
  box-shadow:0 0 8px var(--accent-glow);
  pointer-events:none;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav{
  position:sticky;top:0;width:100%;z-index:50;
  background:var(--surface);
  box-shadow:0 1px 0 var(--surface-variant);
  height:64px;
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.nav__brand{
  font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:18px;color:var(--primary);
  white-space:nowrap;
}
.nav__links{display:flex;gap:32px;}
.nav__links a{
  font-weight:500;font-size:14px;color:var(--on-surface-variant);
  transition:color var(--t-fast) var(--ease);
  position:relative;
}
.nav__links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--accent);transition:width var(--t-med) var(--ease);
}
.nav__links a:hover{color:var(--accent)}
.nav__links a:hover::after{width:100%}
.nav__hamburger{display:none;padding:8px;color:var(--primary)}

/* Mobile drawer */
.nav__mobile-drawer{
  display:none;flex-direction:column;gap:16px;
  background:var(--surface);
  padding:24px var(--mx);
  border-top:1px solid var(--surface-variant);
  box-shadow:var(--shadow);
}
.nav__mobile-drawer[aria-hidden="false"]{display:flex}
.nav__mobile-drawer a{
  font-weight:500;font-size:16px;color:var(--on-surface-variant);
  padding:8px 0;
}

/* Sticky bottom mobile bar */
.sticky-bar{
  position:fixed;bottom:0;left:0;width:100%;z-index:100;
  padding:12px 16px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--surface-variant);
}

.show-mobile-only{display:none}
.hide-mobile{display:flex}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;
  border:none;border-radius:var(--r);
  cursor:pointer;transition:all var(--t-med) var(--ease);
  position:relative;overflow:hidden;
}
.btn--sm{height:40px;padding:0 24px}
.btn--lg{height:56px;padding:0 32px;font-size:14px;border-radius:var(--r)}
.btn--full{width:100%}

.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{opacity:.9}

.btn--accent{
  background:var(--accent);color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn--accent:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 24px var(--accent-glow);
}
.btn--accent:active{transform:translateY(0)}

.btn--outline{
  background:var(--surface-card);color:var(--primary);
  border:1px solid var(--surface-variant);
}
.btn--outline:hover{
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 8px 20px rgba(0,209,255,.08);
}

/* ripple */
.btn-ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);animation:ripple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple{to{transform:scale(2.5);opacity:0}}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  padding:128px 0 0;
  position:relative;overflow:hidden;
}
.hero__inner{text-align:center;max-width:860px;margin:0 auto}
.hero__content{display:flex;flex-direction:column;align-items:center}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:var(--r-full);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:24px;
}
.badge--amber{background:var(--warning);color:var(--primary)}
.badge__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--primary);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero__title{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:clamp(36px,6vw,64px);
  line-height:1.1;letter-spacing:-0.02em;
  color:var(--primary);
  margin-bottom:20px;
}

.hero__sub{
  font-size:18px;line-height:28px;
  color:var(--on-surface-variant);
  max-width:640px;margin-bottom:32px;
}

.hero__cta-group{display:flex;flex-direction:column;align-items:center;gap:16px}

.hero__schedule{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  font-size:12px;font-weight:600;color:var(--slate);
  letter-spacing:.05em;text-transform:uppercase;
}
.hero__schedule .material-symbols-outlined{font-size:16px}
.hero__schedule .sep{opacity:.35;margin:0 4px}

/* Trust strip */
.trust-strip{
  margin-top:80px;padding:24px 0;
  border-top:1px solid var(--surface-variant);
}
.trust-strip__inner{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:32px;
}
.trust-strip__item{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--slate);
}
.trust-strip__item .material-symbols-outlined{font-size:20px}

/* ================================================================
   PAIN POINTS — BENTO GRID
   ================================================================ */
.bento-grid{
  display:grid;grid-template-columns:1.2fr 0.9fr 1.1fr;
  gap:32px;align-items:center;
}
.bento-grid__left{padding-right:0}
.bento-grid__middle{display:flex;justify-content:center;width:100%}
.problem-cta-container{margin-top:24px}

.pain-card{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--surface-card);
  padding:28px;border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  margin-bottom:20px;
  transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.pain-card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
}
.pain-card__icon{
  width:48px;height:48px;min-width:48px;
  border-radius:var(--r);
  background:var(--surface-off);
  display:flex;align-items:center;justify-content:center;
}
.pain-card__icon .material-symbols-outlined{font-size:24px}

/* ================================================================
   FOUR PILLARS
   ================================================================ */
.pillars-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gutter);margin-top:48px;
}
.pillar-card{
  background:var(--surface-off);
  padding:32px;border-radius:var(--r-lg);
  transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.pillar-card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
}
.pillar-card__icon{font-size:32px;display:block;margin-bottom:16px}

/* ================================================================
   VERSATILITY
   ================================================================ */
.versatility-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);margin-top:48px;
}
.versatility-card{
  padding:24px;text-align:center;
  border-radius:var(--r-lg);
  transition:background var(--t-med) var(--ease);
}
.versatility-card:hover{background:var(--surface-card)}
.versatility-card__icon{font-size:40px;display:block;margin-bottom:16px}

/* ================================================================
   CURRICULUM TIMELINE
   ================================================================ */
.curriculum-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;
}
.timeline-item{
  position:relative;padding-left:60px;
}
.timeline-item__marker{
  position:absolute;left:0;top:0;
  width:48px;height:48px;border-radius:50%;
  background:var(--surface-off);
  border:2px solid var(--surface-variant);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:700;
  color:var(--primary);font-size:16px;
  transition:all var(--t-med) var(--ease);
}
.timeline-item:hover .timeline-item__marker{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 4px 12px var(--accent-glow);
}

.check-list{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.check-list li .material-symbols-outlined{font-size:20px;margin-top:2px;flex-shrink:0}
.check-list li strong{display:block;color:var(--primary);font-weight:600}
.check-list li span.text-muted{font-size:13px}

.bonus-banner{
  background:rgba(255,184,0,.08);
  border:1px dashed var(--warning);
  border-radius:var(--r-lg);
  padding:32px;text-align:center;
  max-width:720px;margin:0 auto;
}

/* ================================================================
   INSTRUCTOR
   ================================================================ */
.instructor-grid{
  display:grid;grid-template-columns:5fr 7fr;
  gap:48px;align-items:center;
}
.instructor-avatar{
  width:256px;height:256px;border-radius:50%;overflow:hidden;
  border:4px solid var(--surface-card);
  box-shadow:var(--shadow);
  margin:0 auto;
  background:var(--surface-variant);
}
.instructor-avatar img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--slate);
}

.instructor-stats{display:flex;gap:16px;margin-top:24px}
.instructor-stat{
  padding:12px 20px;
  background:var(--surface-card);border-radius:var(--r);
  border:1px solid var(--surface-variant);
  display:flex;flex-direction:column;align-items:center;
}

/* ================================================================
   GALLERY
   ================================================================ */
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.gallery-item{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:1;cursor:pointer;
  background:var(--surface-variant);
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.gallery-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.gallery-img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.gallery-item:hover .gallery-img{transform:scale(1.06)}
.gallery-hover{
  position:absolute;inset:0;
  background:rgba(10,10,11,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--t-fast) var(--ease);
}
.gallery-hover .material-symbols-outlined{font-size:32px;color:#fff}
.gallery-item:hover .gallery-hover{opacity:1}

/* ================================================================
   OUTCOMES
   ================================================================ */
.outcomes-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;max-width:900px;margin:0 auto;
}
.outcome-item{
  display:flex;align-items:flex-start;gap:12px;
}
.outcome-item .material-symbols-outlined{font-size:28px;margin-top:2px;flex-shrink:0}

/* ================================================================
   TESTIMONIALS PLACEHOLDER
   ================================================================ */
.testimonial-placeholder{
  margin-top:40px;
  padding:40px;
  border:1px dashed var(--surface-variant);
  border-radius:var(--r-lg);
  background:var(--surface-card);
}

/* ================================================================
   PRICING
   ================================================================ */
.pricing-card{
  width:100%;max-width:440px;
  background:var(--surface-card);
  border:1px solid var(--surface-variant);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-hover);
  padding:40px;position:relative;overflow:hidden;
  transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.pricing-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 80px rgba(10,10,11,.1);
}
.pricing-card__badge{
  position:absolute;top:0;right:0;
  background:var(--warning);color:var(--primary);
  font-size:11px;font-weight:800;letter-spacing:.08em;
  padding:6px 16px;border-radius:0 0 0 var(--r);
}
.pricing-card__price-block{
  text-align:center;padding-bottom:28px;margin-bottom:28px;
  border-bottom:1px solid var(--surface-variant);
}
.pricing-card__price{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(48px,8vw,64px);
  font-weight:800;letter-spacing:-0.02em;
  color:var(--primary);line-height:1;
  margin-bottom:8px;
}
.pricing-card__list{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:32px;
}
.pricing-card__list li{
  display:flex;align-items:center;gap:10px;
  font-size:15px;
}
.pricing-card__list li .material-symbols-outlined{font-size:20px;flex-shrink:0}

/* ================================================================
   HOW-IT-WORKS STEPS
   ================================================================ */
.steps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gutter);margin-top:48px;
}
.step-card{
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.step-card__num{
  width:64px;height:64px;border-radius:50%;
  background:var(--surface-card);
  border:2px solid var(--surface-variant);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;
  color:var(--primary);margin-bottom:16px;
  transition:all var(--t-med) var(--ease);
}
.step-card:hover .step-card__num{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 8px 20px var(--accent-glow);
  transform:scale(1.1);
}

/* ================================================================
   FAQ ACCORDION
   ================================================================ */
.accordion{display:flex;flex-direction:column;gap:12px}
.accordion__item{
  background:var(--surface-off);
  border:1px solid var(--surface-variant);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color var(--t-med) var(--ease);
}
.accordion__item:hover,
.accordion__item[open]{border-color:var(--accent)}

.accordion__header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;
  color:var(--primary);
  list-style:none;
}
.accordion__header::-webkit-details-marker{display:none}

.accordion__chevron{
  transition:transform var(--t-med) var(--ease);
  color:var(--slate);
}
.accordion__item[open] .accordion__chevron{transform:rotate(180deg);color:var(--accent)}

.accordion__body{
  padding:0 24px 20px;
  font-size:15px;line-height:24px;
  color:var(--on-surface-variant);
}

/* ================================================================
   CTA PAIR
   ================================================================ */
.cta-pair{
  display:flex;flex-wrap:wrap;gap:16px;
  justify-content:center;margin-top:32px;
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer{
  padding:var(--sp-xl) 0 var(--sp-lg);
  background:var(--surface-card);
  border-top:1px solid var(--surface-variant);
}
.footer__inner{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:40px;
  padding-bottom:32px;margin-bottom:24px;
  border-bottom:1px solid var(--surface-variant);
}
.footer__links{display:flex;gap:32px}
.footer__links a{
  font-size:14px;font-weight:600;color:var(--slate);
  transition:color var(--t-fast);
}
.footer__links a:hover{color:var(--accent)}
.footer__copy{text-align:center}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(10,10,11,.92);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-med) var(--ease);
}
.lightbox[aria-hidden="false"]{opacity:1;pointer-events:auto}

.lightbox__close,.lightbox__prev,.lightbox__next{
  position:absolute;z-index:1010;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:all var(--t-fast) var(--ease);
}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.lightbox__close{top:24px;right:24px}
.lightbox__prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:24px;top:50%;transform:translateY(-50%)}

.lightbox__content{max-width:85%;max-height:85%}
#lightbox-img{
  max-width:100%;max-height:78vh;
  object-fit:contain;border-radius:var(--r);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  transform:scale(.92);
  transition:transform var(--t-med) var(--ease);
}
.lightbox[aria-hidden="false"] #lightbox-img{transform:scale(1)}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1024px){
  .pillars-grid{grid-template-columns:1fr 1fr}
  .curriculum-grid{grid-template-columns:1fr}
  .instructor-grid{grid-template-columns:1fr;text-align:center}
  .instructor-grid__bio{display:flex;flex-direction:column;align-items:center}
  .instructor-stats{justify-content:center}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .bento-grid{grid-template-columns:1fr}
  .bento-grid__left{padding-right:0;margin-bottom:32px}
  .outcomes-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  :root{--mx:16px;--sp-xl:64px}
  .show-mobile-only{display:block}
  .hide-mobile{display:none !important}
  .nav__hamburger{display:flex}

  .hero{padding-top:96px}
  .hero__title{font-size:clamp(30px,8vw,44px)}

  .pillars-grid{grid-template-columns:1fr}
  .versatility-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr 1fr;gap:32px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}

  .footer__inner{flex-direction:column;align-items:center;text-align:center}
  .footer__links{flex-direction:column;gap:12px;align-items:center}

  .lightbox__prev,.lightbox__next{display:none}

  /* Padding for sticky bar */
  main{padding-bottom:80px}
}

@media(max-width:480px){
  .steps-grid{grid-template-columns:1fr}
  .cta-pair{flex-direction:column;width:100%}
  .cta-pair .btn{width:100%}
}

/* ================================================================
   ACCESSIBILITY — PREFERS REDUCED MOTION
   ================================================================ */
@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:0s !important;
    animation-delay:0s !important;
    transition-duration:0s !important;
    transition-delay:0s !important;
  }
  .scroll-progress{display:none}
  .badge__dot{animation:none}
}

/* ================================================================
   NEW PREMIUM DESIGN ELEMENTS & ENHANCEMENTS
   ================================================================ */

/* ---- Ambient Aurora Blobs ---- */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(0,209,255,0.08) 0%, rgba(255,184,0,0.03) 50%, rgba(255,255,255,0) 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

#earnings-calculator::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,209,255,0.06) 0%, rgba(255,255,255,0) 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

/* ---- Glassmorphic Photo Frames ---- */
.glass-photo-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 16px;
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px rgba(10, 10, 11, 0.08);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.glass-photo-frame--rot {
  transform: rotate(2deg);
}

.glass-photo-frame:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 209, 255, 0.15);
}

.glass-photo-frame--rot:hover {
  transform: translateY(-8px) rotate(-1deg) scale(1.02);
}

.problem-photo, .final-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface-dim);
}

.photo-badge {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(10, 10, 11, 0.25);
  white-space: nowrap;
}

/* ---- Interactive ROI Calculator ---- */
.calculator-container {
  max-width: 1000px;
  margin: 0 auto;
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  background: var(--surface-card);
  border: 1px solid var(--surface-variant);
  border-radius: var(--r-xl);
  padding: 48px;
  box-shadow: var(--shadow-hover);
  position: relative;
  overflow: hidden;
}

.calculator-grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent), var(--warning));
}

.calculator-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calculator-slider-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
}

.slider-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent-dark);
  background: rgba(0, 209, 255, 0.08);
  padding: 4px 12px;
  border-radius: var(--r);
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-dim);
  outline: none;
  transition: background .2s;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-dark);
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-glow);
  transition: transform 0.15s ease;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-dark);
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-glow);
  transition: transform 0.15s ease;
}

.range-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.calculator-results {
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 0 15px 35px rgba(10, 10, 11, 0.2);
}

.result-box {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
}

.result-amount {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 8px;
  letter-spacing: -0.02em;
}

.result-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-detail-item {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

/* ---- Smooth FAQ Accordion (div-based) ---- */
.accordion__body-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion__item {
  display: flex;
  flex-direction: column;
}

.accordion__header {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--primary);
  background: transparent;
  border: none;
  transition: color 0.25s ease;
}

.accordion__header:hover {
  color: var(--accent-dark);
}

.accordion__item.is-active .accordion__chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.accordion__body {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

/* ---- Final CTA Section Grid ---- */
.final-cta-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.final-cta__content .heading-xl {
  text-align: left;
}

.final-cta__content .cta-pair {
  justify-content: flex-start;
  width: 100%;
}

/* ---- Responsiveness for New Layouts ---- */
@media(max-width: 1024px) {
  .calculator-grid {
    grid-template-columns: 1fr;
    padding: 32px;
  }
  .final-cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .final-cta__content {
    align-items: center;
  }
  .final-cta__content .heading-xl {
    text-align: center;
  }
  .final-cta__content .cta-pair {
    justify-content: center;
  }
}

@media(max-width: 768px) {
  .problem-instructor-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .problem-cta-box {
    width: 100%;
    text-align: center;
  }
  .glass-photo-frame {
    max-width: 260px;
  }
}

/* ---- Razorpay Custom styling ---- */
.razorpay-payment-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  transition: all var(--t-med) var(--ease) !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-btn) !important;
  height: 56px !important;
  padding: 0 32px !important;
  min-width: 240px !important;
}
.pricing-card .razorpay-payment-button {
  width: 100% !important;
}
.razorpay-payment-button:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px var(--accent-glow) !important;
}
.razorpay-payment-button:active {
  transform: translateY(0) !important;
}

/* ================================================================
   AI CHATBOT WIDGET
   ================================================================ */
.chatbot-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  font-family: 'Inter', sans-serif;
}

/* Chat Bubble button */
.chatbot-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 10px 25px rgba(0, 209, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  animation: chatbot-float 3s ease-in-out infinite;
}

.chatbot-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(0, 209, 255, 0.6);
}

.chatbot-bubble .bubble-icon {
  font-size: 28px;
}

.bubble-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: chatbot-ping 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

@keyframes chatbot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes chatbot-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Chat Window */
.chatbot-window {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 360px;
  height: 520px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px rgba(10, 10, 11, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  z-index: 1010;
}

.chatbot-window.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Chat Header */
.chatbot-header {
  background: var(--primary);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chatbot-header__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatbot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chatbot-avatar .material-symbols-outlined {
  font-size: 20px;
  color: var(--accent);
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #10B981;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.chatbot-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.chatbot-subtitle {
  font-size: 11px;
  color: var(--dark-muted);
}

.chatbot-close {
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 4px;
}

.chatbot-close:hover {
  opacity: 1;
}

/* Message Area */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(249, 250, 251, 0.5);
}

.message {
  display: flex;
  width: 100%;
}

.message__bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(10, 10, 11, 0.03);
}

.message--bot {
  justify-content: flex-start;
}

.message--bot .message__bubble {
  background: var(--surface-card);
  color: var(--on-surface);
  border: 1px solid var(--surface-variant);
  border-top-left-radius: 4px;
}

.message--user {
  justify-content: flex-end;
}

.message--user .message__bubble {
  background: var(--accent-dark);
  color: #fff;
  border-top-right-radius: 4px;
}

.message--system {
  justify-content: center;
}

.message--system .message__bubble {
  background: rgba(10, 10, 11, 0.05);
  color: var(--on-surface-variant);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--r);
  text-align: center;
  box-shadow: none;
}

/* Suggestions Area */
.chatbot-suggestions {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background: var(--surface-card);
  border-top: 1px solid var(--surface-variant);
  border-bottom: 1px solid var(--surface-variant);
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.chatbot-suggestions::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

.suggestion-chip {
  flex-shrink: 0;
  background: var(--surface-off);
  border: 1px solid var(--surface-variant);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
  transition: all 0.2s var(--ease);
  cursor: pointer;
}

.suggestion-chip:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 10px var(--accent-glow);
}

/* Input Area */
.chatbot-input-form {
  display: flex;
  padding: 12px 16px;
  background: var(--surface-card);
  gap: 8px;
}

.chatbot-input {
  flex: 1;
  background: var(--surface-off);
  border: 1px solid var(--surface-variant);
  border-radius: var(--r-full);
  padding: 10px 16px;
  font-size: 14px;
  color: var(--on-surface);
  outline: none;
  transition: border-color 0.2s;
}

.chatbot-input:focus {
  border-color: var(--accent);
}

.chatbot-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.chatbot-send-btn:hover {
  background: var(--accent-dark);
  transform: scale(1.05);
}

.chatbot-send-btn .material-symbols-outlined {
  font-size: 18px;
}

/* Typing Indicator */
.typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  align-items: center;
  height: 12px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--slate);
  border-radius: 50%;
  opacity: 0.4;
  animation: chatbot-blink 1.4s infinite both;
}

.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes chatbot-blink {
  0% { opacity: .2; }
  20% { opacity: 1; }
  100% { opacity: .2; }
}

/* Responsiveness */
@media(max-width: 480px) {
  .chatbot-widget {
    bottom: 16px;
    right: 16px;
  }
  .chatbot-window {
    width: 290px;
    height: 440px;
    bottom: 70px;
  }
}

/* ================================================================
   SCARCITY & DYNAMIC CONVERSION FEATURES
   ================================================================ */

/* ---- Scarcity Banner ---- */
.scarcity-banner {
  background: rgba(255, 184, 0, 0.08);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  margin: 24px auto 0;
  max-width: 860px;
}

.scarcity-banner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.scarcity-banner__text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}

.scarcity-banner__text strong {
  color: #d32f2f;
  font-weight: 700;
}

.scarcity-progress-bar {
  flex: 1;
  min-width: 200px;
  height: 8px;
  background: var(--surface-dim);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

.scarcity-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--warning) 0%, #d32f2f 100%);
  border-radius: var(--r-full);
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
  transition: width 1s cubic-bezier(.16,1,.3,1);
}

/* ---- Skills Checklist Widget ---- */
.skills-tracker {
  max-width: 900px;
  margin: 40px auto 0;
}

.skills-tracker__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  background: var(--surface-card);
  border: 1px solid var(--surface-variant);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow);
  align-items: center;
}

.skills-tracker__checklist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.checklist-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}

.skill-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--surface-variant);
  border-radius: 6px;
  outline: none;
  background: var(--surface-off);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
  flex-shrink: 0;
  margin-top: 2px;
}

.skill-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 10px var(--accent-glow);
}

.skill-checkbox:checked::after {
  content: '✓';
  font-size: 14px;
  color: #fff;
  font-weight: 800;
}

.checklist-label {
  cursor: pointer;
}

.checklist-label strong {
  display: block;
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 4px;
  transition: color 0.2s;
}

.skill-checkbox:checked + .checklist-label strong {
  color: var(--accent-dark);
}

.skills-tracker__visualization {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--surface-variant);
  padding-left: 40px;
}

.circle-progress-container {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: 16px;
}

.circle-progress {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-progress circle {
  fill: none;
  stroke-width: 8;
}

.circle-progress__bg {
  stroke: var(--surface-off);
}

.circle-progress__fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 314.15;
  stroke-dashoffset: 314.15;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.circle-progress__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: var(--primary);
}

/* ---- Testimonials Carousel ---- */
.testimonials-slider {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.testimonial-slides {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.testimonial-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.testimonial-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-variant);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: center;
  text-align: center;
}

.testimonial-rating {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.star-fill {
  color: var(--warning);
  font-variation-settings: 'FILL' 1;
  font-size: 20px;
}

.testimonial-quote {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  color: var(--on-surface-variant);
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.testimonial-author strong {
  font-weight: 700;
  color: var(--primary);
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--surface-variant);
  background: var(--surface-card);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.slider-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.05);
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-dim);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.slider-dots .dot.active {
  background: var(--accent-dark);
  transform: scale(1.25);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ---- Pricing Toggle ---- */
.pricing-toggle-container {
  display: inline-flex;
  background: var(--surface-off);
  border: 1px solid var(--surface-variant);
  padding: 4px;
  border-radius: var(--r-full);
  margin-top: 16px;
}

.toggle-btn {
  border: none;
  background: transparent;
  padding: 10px 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.toggle-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(10, 10, 11, 0.15);
}

/* ---- 3D Perspective & Sheen ---- */
.pain-card, .pillar-card, .pricing-card, .testimonial-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.card-sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: overlay;
  opacity: 0;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
}

/* Responsive Overrides */
@media(max-width: 768px) {
  .skills-tracker__grid {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .skills-tracker__visualization {
    border-left: none;
    border-top: 1px solid var(--surface-variant);
    padding-left: 0;
    padding-top: 32px;
    margin-top: 8px;
  }
  .testimonial-slides {
    height: 340px;
  }
}