/* ═══════════════════════════════════════
   DESIGN TOKENS & SAAS UI UPDATES
═══════════════════════════════════════ */
:root {
  --bg:              #ffffff;
  --bg-alt:          #f8fafc;
  --bg-subtle:       #f1f5f9;
  --card:            #ffffff;
  --border:          rgba(15, 23, 42, 0.08);
  --brand-blue:      #2073B7;
  --brand-blue-glow: rgba(32, 115, 183, 0.3);
  --brand-gold:      #F4AF36;
  --brand-gold-glow: rgba(244, 175, 54, 0.4);
  --text-main:       #0f172a;
  --text-muted:      #475569;
  --text-light:      #64748b;
  --glass-bg:        rgba(255, 255, 255, 0.85);
  --glass-border:    rgba(255, 255, 255, 0.5);
  --max:             1320px;
  --r-sm:            12px;
  --r-md:            16px;
  --r-lg:            24px;
  --r-xl:            32px;
}

.dd-excellent-homepage-wrapper .dd-container { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

.animated-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: 
    linear-gradient(rgba(32, 115, 183, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 115, 183, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridScroll 15s linear infinite;
  will-change: background-position;
}
@keyframes gridScroll {
  0% { background-position: 0px 0px; }
  100% { background-position: 40px 40px; }
}

.scroll-progress { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold)); width: 0%; z-index: 10000; transition: width 0.1s ease-out; }

@keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 var(--brand-blue-glow); } 70% { box-shadow: 0 0 0 15px rgba(32,115,183,0); } 100% { box-shadow: 0 0 0 0 rgba(32,115,183,0); } }
@keyframes blobAnim { 0%,100% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.05) translate(20px,-20px); } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes wordReveal { from { opacity: 0; transform: translateY(15px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
/* Hero-only entrance animations: transform/blur only, NEVER opacity — the
   hero is the first thing every visitor sees, so it must never depend on a
   script or observer finishing before it's visible. A slow network or a
   script error elsewhere must not be able to leave it stuck invisible. */
@keyframes heroEnterFade { from { transform: translateY(20px); } to { transform: translateY(0); } }
@keyframes heroEnterWord { from { transform: translateY(12px); filter: blur(2px); } to { transform: translateY(0); filter: blur(0); } }
@keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bounceLeft { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(-8px, -50%); } }
@keyframes bounceRight { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(8px, -50%); } }

@keyframes attentionPulse {
  0% { transform: scale(1); box-shadow: 0 8px 16px var(--brand-blue-glow); }
  50% { transform: scale(1.06); box-shadow: 0 12px 24px rgba(32,115,183,0.6); }
  100% { transform: scale(1); box-shadow: 0 8px 16px var(--brand-blue-glow); }
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════
   MAIN SECTIONS
═══════════════════════════════════════ */
.urgency-banner { 
  background: linear-gradient(90deg, #0f172a, #1e293b, #0f172a); 
  background-size: 200% auto; animation: gradientPan 5s linear infinite;
  color: #fff; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; 
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; z-index: 201; position: relative; 
}
.pulse-dot { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; animation: pulseGlow 2s infinite; }
.countdown-wrapper { display: flex; align-items: center; gap: 6px; }
.c-block { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 4px 8px; min-width: 44px; display: flex; flex-direction: column; align-items: center; line-height: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.1s ease; }
.c-val { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 900; color: var(--brand-gold); }
.c-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }
.c-sep { color: rgba(255,255,255,0.4); font-weight: bold; margin-top: -8px;}
.c-block.danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); }
.c-block.danger .c-val { color: #fca5a5; }






.nav.scrolled 





.btn-primary { background: linear-gradient(135deg, var(--brand-blue), #1e40af) !important; color: #fff !important; font-size: 15px; font-weight: 700; padding: 14px 28px; border-radius: 100px; box-shadow: 0 8px 16px var(--brand-blue-glow); transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(32,115,183,0.5); }
.btn-attention { animation: attentionPulse 2s infinite ease-in-out; }
.btn-attention:hover { animation: none; transform: translateY(-2px) scale(1.02); }
.btn-outline { background: var(--glass-bg); border: 2px solid var(--border); color: var(--text-main); font-size: 15px; font-weight: 700; padding: 14px 28px; border-radius: 100px; transition: all 0.3s; display:inline-flex; align-items:center; justify-content: center; }
.btn-outline:hover { border-color: var(--brand-blue); background: rgba(32,115,183,0.05); }



.hero { padding: 100px 0 60px; position: relative; min-height: 85vh; display: flex; align-items: center; }
.hero-bg-blobs { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.blob { position: absolute; filter: blur(60px); opacity: 0.5; border-radius: 50%; will-change: transform; }
.blob-1 { width: 400px; height: 400px; background: rgba(32,115,183,0.15); top: -10%; right: -5%; animation: blobAnim 15s infinite alternate; }
.blob-2 { width: 300px; height: 300px; background: rgba(244,175,54,0.12); bottom: -10%; left: -5%; animation: blobAnim 12s infinite alternate-reverse; }

.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); color: var(--brand-blue); padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 800; border: 1px solid var(--border); margin-bottom: 20px; animation: heroEnterFade 0.6s ease; }
.hero-h1 { font-family: 'Fraunces', serif; font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1.5px; }
.hero-h1 span.word { display: inline-block; animation: heroEnterWord 0.5s ease-out; }
.hero-h1 .highlight { color: transparent; background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold)); -webkit-background-clip: text; }
.hero-sub { font-size: clamp(16px, 2vw, 18px); color: var(--text-muted); line-height: 1.6; max-width: 520px; margin-bottom: 32px; animation: heroEnterFade 0.6s 0.4s ease backwards; }
.hero-ctas { display: flex; gap: 16px; animation: heroEnterFade 0.6s 0.6s ease backwards; flex-wrap: wrap; }

.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; animation: heroEnterFade 0.8s 0.3s ease backwards; }
.hero-img-wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  animation: float 6s ease-in-out infinite;
  will-change: transform;
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: clamp(300px, 45vh, 480px);
  background: rgba(15, 23, 42, 0.03);
}
.dd-carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.dd-carousel-slide.active {
  opacity: 1;
  z-index: 2;
}

.ticker-wrap { background: linear-gradient(90deg, #0f172a, #1e293b); overflow: hidden; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.ticker-inner { display: flex; width: max-content; animation: ticker 25s linear infinite; will-change: transform; }
.ticker-item { display: flex; align-items: center; gap: 16px; padding: 0 30px; white-space: nowrap; color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.ticker-item .star { color: var(--brand-gold); }

.stats-section { padding: 60px 0; border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat-item { text-align: center; padding: 24px 16px; background: var(--bg-alt); border-radius: var(--r-md); border: 1px solid var(--border); transition: transform 0.3s; }
.stat-item:hover { transform: translateY(-4px); border-color: var(--brand-blue-glow); }
.stat-num { font-family: 'Inter', sans-serif; font-size: clamp(32px, 4vw, 42px); font-weight: 900; color: var(--brand-blue); margin-bottom: 4px; line-height: 1; }
.stat-num .plus { color: var(--brand-gold); }
.stat-label { font-size: 14px; font-weight: 700; }
.stat-sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }

.logos-section { padding: 40px 0; border-bottom: 1px solid var(--border); overflow: hidden; }
.logos-marquee { display: flex; overflow: hidden; user-select: none; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); margin-top: 20px; }
.logos-track { display: flex; gap: 50px; flex-shrink: 0; align-items: center; padding-right: 50px; animation: scrollLogos 20s linear infinite; will-change: transform; }
.brand-logo { font-family: 'Inter', sans-serif; font-size: clamp(20px, 3vw, 24px); font-weight: 900; color: var(--text-muted); letter-spacing: -0.5px; white-space: nowrap; }

.section { padding: 80px 0; }
.sec-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-gold); margin-bottom: 12px; }
.sec-h { font-family: 'Fraunces', serif; font-size: clamp(28px, 4vw, 42px); font-weight: 900; line-height: 1.15; margin-bottom: 20px; letter-spacing: -1px; }

.reels-section { padding: 80px 0; background: #0f172a; position: relative; overflow: hidden; }
.reels-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
.reels-header h2 { color: #fff; }
.reels-wrapper { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 50px; }
.reels-track { display: flex; gap: 20px; overflow-x: auto; padding: 20px 0; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; justify-content: center; width: 100%; z-index: 1; -webkit-overflow-scrolling: touch; }
.reels-track::-webkit-scrollbar { display: none; }
.scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 44px; height: 44px; border-radius: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: 0.3s; margin-top: 10px; }
.scroll-arrow.left { left: 0; animation: bounceLeft 2.5s infinite; }
.scroll-arrow.right { right: 0; animation: bounceRight 2.5s infinite; }
.reel-card { flex: 0 0 auto; width: 260px; height: 460px; border-radius: 24px; background: #111; position: relative; overflow: hidden; scroll-snap-align: center; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-style: preserve-3d; will-change: transform; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.reel-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); }

.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.reel-card:hover .reel-video { transform: scale(1.05); }

.reel-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%); transition: opacity 0.3s; }
.reel-card.playing .reel-gradient { opacity: 0.6; }
.play-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; }
.reel-card.playing .play-overlay { opacity: 0; transform: scale(1.2); }
.play-btn { width: 56px; height: 56px; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; padding-left: 4px; border: 1px solid rgba(255,255,255,0.5); transition: transform 0.3s; }
.reel-card:hover .play-btn { transform: scale(1.1); background: rgba(255,255,255,0.3); }

.reel-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; padding: 20px; transition: transform 0.3s; }
.reel-card:hover .reel-content { transform: translateY(-5px); }
.reel-tag { display: inline-block; background: var(--brand-gold); color: #000; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 8px; }
.reel-title { color: #fff; font-weight: 800; font-size: 15px; line-height: 1.3; }
.reel-mute { position: absolute; top: 12px; right: 12px; z-index: 6; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: 0.3s; }
.reel-card.playing .reel-mute { opacity: 1; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
.bento-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: transform 0.3s; }
.bento-card:hover { transform: translateY(-4px); border-color: var(--brand-blue-glow); }
.bento-icon { font-size: 28px; margin-bottom: 16px; display: inline-block; padding: 10px; background: var(--bg-subtle); border-radius: 12px; }

.outcomes-section { background: linear-gradient(135deg, var(--brand-blue) 0%, #1e40af 100%); padding: 80px 0; color: #fff; overflow: hidden; }
.outcomes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 32px; }
.outcome-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; transition: transform 0.3s, background 0.3s, box-shadow 0.3s; }
.outcome-card:hover { transform: translateY(-6px) scale(1.03); background: rgba(255,255,255,0.14); box-shadow: 0 16px 32px rgba(0,0,0,0.25); }
.outcome-num { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 900; color: var(--brand-gold); margin-bottom: 6px; line-height: 1; }
/* Grid entrance animation: this section is below the fold, so by the time a
   visitor scrolls to it the page's JS has long since loaded — safe to use
   opacity here (unlike the hero), no risk of a stuck-invisible flash. */
.outcome-card.reveal { opacity: 0; transform: translateY(24px) scale(0.94); }
.outcome-card.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1); }
.outcomes-section .sec-eyebrow.reveal, .outcomes-section .sec-h.reveal { opacity: 0; transform: translateY(14px); }
.outcomes-section .sec-eyebrow.reveal.in-view, .outcomes-section .sec-h.reveal.in-view { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; }
.outcome-label { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.outcome-sub { font-size: 13px; color: rgba(255,255,255,0.7); }

.instructor-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.instructor-img-wrap { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.instructor-img-wrap img { width: 100%; height: auto; display: block; object-fit: cover; }
.instructor-badge { position: absolute; bottom: 16px; left: 16px; background: var(--card); padding: 12px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 32px 0; }
.t-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 24px; transition: transform 0.3s; }
.t-stars { color: var(--brand-gold); margin-bottom: 12px; font-size: 16px; }
.t-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; font-style: italic; }
.t-author { display: flex; align-items: center; gap: 10px; }
.t-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--brand-gold)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; margin-top: 32px; }
.p-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 32px; transition: transform 0.3s; position: relative; }
.p-card.featured { border: 2px solid var(--brand-blue); background: linear-gradient(180deg, var(--bg-subtle), var(--card)); transform: scale(1.02); }
.p-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand-blue); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 16px; border-radius: 100px; white-space: nowrap; }

.faq-inner { max-width: 700px; margin: 32px auto; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 10px; overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 20px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--text-main); }
.faq-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--brand-blue); transition: transform 0.3s; }
.faq-item.open .faq-icon { background: var(--brand-gold); color: #fff; transform: rotate(45deg); }
.faq-a { display: none; padding: 0 20px 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 16px; }
.faq-item.open .faq-a { display: block; animation: slideUpFade 0.3s ease; }

.cta-banner { padding: 80px 0; background: #0f172a; color: #fff; text-align: center; position: relative; }
.btn-cta-gold { background: var(--brand-gold) !important; color: #fff !important; font-size: 15px; font-weight: 800; padding: 16px 36px; border-radius: 100px; transition: transform 0.3s; display:inline-block; border: none; cursor:pointer;}
.btn-cta-gold:hover { transform: translateY(-2px); }








.sticky-widget { position: fixed; bottom: 24px; right: 24px; z-index: 999; }
.changing-cta-btn {
  background: linear-gradient(135deg, #1e40af, var(--brand-blue));
  color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800;
  padding: 16px 28px; border-radius: 100px; border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 30px rgba(32,115,183,0.4); animation: attentionPulse 2.5s infinite;
  display: flex; align-items: center; justify-content: center; min-width: 260px;
  cursor: pointer; transition: transform 0.3s;
}
.changing-cta-btn:hover { transform: scale(1.05); animation: none; }
#changingCtaText { transition: opacity 0.4s ease-in-out; }

@keyframes popIn { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
@keyframes checkDraw { 0%{stroke-dashoffset:100} 100%{stroke-dashoffset:0} }

.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5, 15, 35, 0.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; padding: 16px;
}
.modal-overlay.show { opacity: 1; visibility: visible; }

.modal-content {
  background: #fff; border-radius: 28px; width: 100%; max-width: 500px;
  position: relative; transform: translateY(32px) scale(0.97);
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}
.modal-overlay.show .modal-content { transform: translateY(0) scale(1); }

.modal-header-strip {
  background: linear-gradient(135deg, var(--brand-blue) 0%, #1e40af 50%, #0f172a 100%);
  padding: 32px 32px 28px; position: relative; overflow: hidden;
}
.modal-header-strip::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 24px; background: #fff; border-radius: 24px 24px 0 0;
}

.modal-step-dots { display: flex; gap: 6px; margin-bottom: 20px; position: relative; z-index: 1; }
.ms-dot { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.25); transition: all 0.4s ease; flex: 1; }
.ms-dot.active { background: var(--brand-gold); flex: 2; }

.modal-headline { font-family: 'Fraunces', serif; font-size: clamp(22px, 5vw, 28px); font-weight: 900; color: #fff; line-height: 1.2; position: relative; z-index: 1; margin-bottom: 0; }
.modal-subtext { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 8px; position: relative; z-index: 1; font-weight: 500; }
.modal-body { padding: 28px 32px 32px; }

.close-modal {
  position: absolute; top: 16px; right: 18px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(255,255,255,0.8);
  cursor: pointer; z-index: 10; transition: background 0.2s, transform 0.2s; line-height: 1;
}
.close-modal:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }

.form-step { display: none; animation: slideUpFade 0.35s forwards; }
.form-step.active { display: block; }

.field-group { position: relative; margin-bottom: 16px; width: 100%; }
.field-group input {
  width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 20px 16px 8px;
  font-size: 15px; outline: none; font-family: inherit; color: var(--text-main);
  transition: border-color 0.2s, background 0.2s; -webkit-appearance: none; appearance: none;
}
.field-group label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); font-size: 14px; color: #94a3b8; transition: all 0.2s ease; pointer-events: none; font-weight: 500; }
.field-group input:focus, .field-group input:not(:placeholder-shown) { border-color: var(--brand-blue); background: #fff; box-shadow: 0 0 0 4px rgba(32,115,183,0.08); }
.field-group input:focus ~ label, .field-group input:not(:placeholder-shown) ~ label { top: 10px; transform: translateY(0); font-size: 10px; font-weight: 700; color: var(--brand-blue); letter-spacing: 0.5px; }

.profile-options, .timeline-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.profile-opt, .timeline-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid #e2e8f0; border-radius: 14px; cursor: pointer; transition: all 0.2s; background: #f8fafc; }
.profile-opt:hover, .timeline-opt:hover { border-color: var(--brand-blue); background: rgba(32,115,183,0.04); }
.profile-opt.selected, .timeline-opt.selected { border-color: var(--brand-blue); background: rgba(32,115,183,0.06); box-shadow: 0 0 0 3px rgba(32,115,183,0.1); }
.profile-opt-icon, .timeline-opt-icon { font-size: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.profile-opt-text strong, .timeline-opt-text strong { font-size: 14px; font-weight: 700; color: var(--text-main); display: block; }
.profile-opt-text span, .timeline-opt-text span { font-size: 12px; color: var(--text-muted); }
.profile-opt-check, .timeline-opt-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; margin-left: auto; flex-shrink: 0; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.profile-opt.selected .profile-opt-check, .timeline-opt.selected .timeline-opt-check { background: var(--brand-blue); border-color: var(--brand-blue); }
.profile-opt.selected .profile-opt-check::after, .timeline-opt.selected .timeline-opt-check::after { content: '✓'; font-size: 10px; font-weight: 900; color: #fff; }

.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-next { background: linear-gradient(135deg, var(--brand-blue), #1e40af); color: #fff; border: none; padding: 16px 20px; border-radius: 14px; font-weight: 700; flex: 2; font-size: 15px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 6px 16px rgba(32,115,183,0.3); display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-next:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(32,115,183,0.4); }
.btn-prev { background: #f1f5f9; color: var(--text-muted); border: none; padding: 16px; border-radius: 14px; font-weight: 700; flex: 1; font-size: 14px; transition: background 0.2s; }
.btn-prev:hover { background: #e2e8f0; }
.trust-note { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11px; color: #94a3b8; justify-content: center; }
.trust-note svg { width: 12px; height: 12px; flex-shrink: 0; }

.success-state { text-align: center; display: none; padding: 40px 20px; }
.success-state.active { display: block; animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.success-icon-wrap { animation: blobAnim 4s infinite alternate; display: inline-block; margin-bottom: 10px; }
.success-check { width: 80px; height: 80px; background: linear-gradient(135deg, #25D366, #128C7E); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 35px rgba(37,211,102,0.4); }
.success-check svg { width: 40px; height: 40px; }
.success-check svg path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: checkDraw 0.5s 0.3s ease forwards; }

.toast-container { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.proof-toast { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 12px; transform: translateX(-120%); opacity: 0; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.proof-toast.show { transform: translateX(0); opacity: 1; }
.pt-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--brand-gold)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0; }
.pt-text { display: flex; flex-direction: column; }
.pt-text strong { color: var(--text-main); font-size: 13px; line-height: 1.2; }
.pt-text p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.2; }

@media(max-width: 960px) {
  .hero-inner, .instructor-grid { grid-template-columns: 1fr; gap: 24px; }
  .bento-grid, .outcomes-grid, .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  
  .hero-inner { text-align: center; }
  .hero-sub { margin: 0 auto 32px; }
  .hero-ctas { justify-content: center; }
  .hero-visual { order: 1; }
  .p-card.featured { transform: scale(1); }
  .nav-links, .nav-cta-btn { display: none; }
  
  .dd-container { padding: 0 24px; }
  .reels-wrapper { padding: 0 10px; }
  .reels-track { justify-content: flex-start; padding: 16px 20px; }
  .scroll-arrow { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-body { padding: 20px 24px 28px; }
  .modal-header-strip { padding: 24px 24px 28px; }
  .changing-cta-btn { min-width: 220px; padding: 14px 20px; font-size: 13px; }
}

@media(max-width: 640px) {
  .section, .hero, .reels-section, .outcomes-section, .cta-banner { padding: 56px 0; }
  
  .dd-container { padding: 0 16px; }
  .hero { padding: 80px 0 48px; min-height: auto; }
  .hero-h1 { font-size: clamp(28px, 8vw, 38px); letter-spacing: -1px; }
  .sec-h { font-size: clamp(24px, 6vw, 32px); }
  .btn-primary, .btn-outline, .btn-cta-gold { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; gap: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .reels-track { padding: 10px 16px; }
  .reel-card { width: 230px; height: 410px; }
  
  .c-block { min-width: 38px; padding: 3px 6px; }
  .c-val { font-size: 14px; }
  .pricing-grid { gap: 16px; }
  .bento-grid, .testimonials-grid { gap: 12px; }
  .modal-content { border-radius: 24px; max-width: 100%; margin: 0; }
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal-content { border-radius: 28px 28px 0 0; }
  .modal-body { padding: 20px 20px 36px; }
  .modal-header-strip { padding: 22px 20px 28px; }
  .modal-headline { font-size: 22px; }
  .profile-opt, .timeline-opt { padding: 12px 14px; }
  .profile-opt-icon, .timeline-opt-icon { width: 38px; height: 38px; font-size: 20px; }
  .section { padding: 48px 0; }
  
  
  .urgency-banner { padding: 10px; font-size: 11px; }
  .changing-cta-btn { min-width: 100%; padding: 16px; font-size: 14px; }
}