*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --yellow: hsl(45, 100%, 52%);
  --yellow-light: hsl(45, 100%, 96%);
  --yellow-dark: hsl(45, 100%, 42%);
  --black: hsl(220, 24%, 7%);
  --dark: hsl(220, 15%, 20%);
  --text: hsl(220, 12%, 32%);
  --muted: hsl(220, 8%, 56%);
  --light-gray: hsl(40, 12%, 96%);
  --border: hsl(220, 10%, 90%);
  --white: #FFFFFF;
  --green: hsl(142, 72%, 40%);
  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.02);
  --card-shadow-hover: 0 24px 48px -12px rgba(20, 20, 20, 0.08);
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--black)}
::selection{background:var(--yellow);color:var(--black)}

/* Floating Nav Bar Container */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 24px 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
nav .container {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
nav.scrolled {
  padding: 12px 0;
}
nav.scrolled .container {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.06);
}
.logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.logo:hover {
  transform: scale(1.02);
}
.logo-dot {
  width: 10px;
  height: 10px;
  background: var(--yellow);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 212, 59, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 212, 59, 0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(255, 212, 59, 0);
  }
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: color .25s;
  position: relative;
  padding: 4px 0;
}
.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--yellow-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--black);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 99px;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.btn-outline-nav {
  border: 1.5px solid var(--border);
  color: var(--text);
  background: transparent;
  padding: 10px 24px;
}
.btn-outline-nav:hover {
  border-color: var(--black);
  color: var(--black);
  background: rgba(0, 0, 0, 0.02);
}
.btn-yellow {
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 4px 14px rgba(255, 212, 59, 0.25);
}
.btn-yellow:hover {
  background: var(--yellow-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 212, 59, 0.45);
}
.btn-dark {
  background: var(--black);
  color: var(--white);
  border-radius: 99px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.btn-dark:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Mobile Toggle Button */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
  padding: 0;
}
.mobile-nav-toggle .hamburger-line {
  width: 100%;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
.mobile-nav-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 340px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 1050;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.04);
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer.open {
  right: 0;
}
.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-drawer-links a {
  color: var(--black);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.25s ease;
  padding: 8px 0;
}
.mobile-drawer-links a:hover {
  color: var(--yellow-dark);
  padding-left: 6px;
}
.mobile-drawer-links .btn {
  margin-top: 10px;
  justify-content: center;
  padding: 14px 28px;
}
.btn-outline-drawer {
  border: 1.5px solid var(--border);
  color: var(--black);
  background: transparent;
}
.btn-outline-drawer:hover {
  border-color: var(--black);
  background: rgba(0,0,0,0.02);
}
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 24, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mobile-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* HERO */
.hero{padding:160px 0 100px;position:relative;background:var(--light-gray);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--black);background:var(--yellow);padding:7px 16px;border-radius:99px;margin-bottom:24px}
.hero-text h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(3rem,6.6vw,5.2rem);line-height:.96;letter-spacing:-.03em;margin-bottom:24px;color:var(--black)}
.hero-text h1 .highlight{background:var(--yellow);padding:0 12px;border-radius:8px;display:inline;font-style:italic}
.hero-text p{font-size:1.15rem;color:var(--dark);max-width:480px;margin-bottom:18px;line-height:1.7}
.hero-text p .momma{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;color:var(--black)}
.hero-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.free-pill{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--black)}
.free-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(52,199,89,.2);position:relative}
.free-pill .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;box-shadow:0 0 0 6px rgba(52,199,89,0);animation:ping 1.5s infinite}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0px rgba(52,199,89,0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(52,199,89,0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(52,199,89,0);
  }
}

.hero-img{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.08);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.hero-img:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.12)}
.hero-img img{width:100%;height:520px;object-fit:cover;display:block;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)}
.hero-img:hover img{transform:scale(1.03)}
.hero-img .img-tag{position:absolute;left:-14px;bottom:24px;background:var(--white);border-radius:16px;padding:16px 20px;box-shadow:0 12px 40px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;max-width:240px;border:1px solid rgba(0,0,0,0.04);z-index:2}
.hero-img .img-tag .it-stars{color:var(--yellow);font-size:1.1rem;letter-spacing:1px;line-height:1}
.hero-img .img-tag .it-txt{font-size:.78rem;color:var(--dark);font-weight:600;line-height:1.35}

/* SOCIAL PROOF */
.social-proof{padding:80px 0 64px;text-align:center}
.sp-faces{display:flex;justify-content:center;margin-bottom:16px}
.sp-face{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2.5px solid var(--white);margin-left:-10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.sp-face:first-child{margin-left:0}
.sp-count{width:42px;height:42px;border-radius:50%;background:var(--yellow);border:2.5px solid var(--white);margin-left:-10px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--black)}
.sp-stars{color:var(--yellow);font-size:.95rem;letter-spacing:2px;margin-bottom:22px}
.social-proof h2{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:660px;margin:0 auto;line-height:1.28;color:var(--black);letter-spacing:-.015em}
.social-proof h2 .u{background:linear-gradient(transparent 62%,var(--yellow) 62%)}

/* BOLD BAND */
.bold-band{background:var(--black);padding:clamp(64px,9vw,108px) 0;text-align:center;position:relative;overflow:hidden}
.bold-band::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% -10%,rgba(255,212,59,.14),transparent 60%);pointer-events:none}
.bold-band .container{position:relative;z-index:2}
.bold-band .bb-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--yellow);margin-bottom:22px}
.bold-band h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.03em;color:var(--white);max-width:16ch;margin:0 auto}
.bold-band h2 .y{color:var(--yellow);font-style:italic}
.bold-band p{margin-top:24px;font-size:1.05rem;color:rgba(255,255,255,.62);max-width:46ch;margin-left:auto;margin-right:auto}

/* STATS BENTO */
.stats-section{padding:clamp(80px,10vw,120px) 0}
.stats-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.stat-card{background:var(--light-gray);border:1px solid rgba(0,0,0,0.03);border-radius:24px;padding:32px;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:var(--card-shadow)}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:rgba(0,0,0,0.06)}
.stat-card h3{font-size:1.4rem;font-weight:700;color:var(--black);margin-bottom:8px}
.stat-card p{font-size:.88rem;color:var(--muted);line-height:1.6}
.stats-right{display:flex;flex-direction:column;gap:18px}
.star-prog-card{display:flex;flex-direction:column}
.star-prog-card h3{margin-bottom:8px}
.star-prog-card .sp-sub{font-size:.88rem;color:var(--muted);margin-bottom:24px}
.star-levels{display:flex;flex-direction:column;gap:12px}
.star-level{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--white);border-radius:18px;border:1px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.star-level::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:18px 0 0 18px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.star-level.l1::before{background:rgba(102,187,255,.08)}
.star-level.l2::before{background:rgba(155,135,255,.08)}
.star-level.l3::before{background:rgba(255,180,80,.08)}
.star-level.l4::before{background:rgba(255,212,59,.12)}
.star-level.animate::before{width:100%}
.star-level:hover {
  transform: translateX(6px);
  border-color: var(--black);
  box-shadow: 0 8px 20px rgba(0,0,0,0.02);
}
.star-level-stars{display:flex;gap:4px;flex-shrink:0;min-width:76px;position:relative;z-index:1}
.sl-star{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1}
.sl-star.on{background:var(--yellow);color:var(--black)}
.sl-star.off{background:var(--border)}
.star-level-info{flex:1;min-width:0;position:relative;z-index:1}
.star-level-name{font-size:.88rem;font-weight:700;color:var(--black)}
.star-level-desc{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-level-badge{font-size:.65rem;font-weight:700;padding:5px 14px;border-radius:99px;flex-shrink:0;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;position:relative;z-index:1}
.l1 .star-level-badge{background:rgba(102,187,255,.12);color:#3B9AE8}
.l2 .star-level-badge{background:rgba(155,135,255,.12);color:#7B68EE}
.l3 .star-level-badge{background:rgba(255,180,80,.12);color:#E89B3B}
.l4 .star-level-badge{background:var(--yellow);color:var(--black)}
.stat-sm{padding:30px}
.stat-big-num{font-family:'Playfair Display',serif;font-weight:900;font-size:3.2rem;color:var(--black);line-height:.95;letter-spacing:-.02em}
.stat-big-num .pre{font-size:1.6rem;vertical-align:top;opacity:.45;font-weight:700}
.stat-sm h3{font-size:1.05rem;margin:10px 0 4px}
.stat-big-label{font-size:.84rem;color:var(--muted);line-height:1.5;max-width:26ch}
.stat-sm.accent{background:var(--yellow);border-color:transparent}
.stat-sm.accent .stat-big-num,.stat-sm.accent h3{color:var(--black)}
.stat-sm.accent .stat-big-label{color:rgba(20,20,20,.66)}
.stat-sm.accent:hover{background:var(--yellow-dark);box-shadow: 0 20px 48px rgba(255, 212, 59, 0.25)}

/* SIDE SECTION */
.side-section{padding:clamp(80px,10vw,120px) 0}
.side-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.side-img{border-radius:24px;overflow:hidden;position:relative;box-shadow:0 20px 48px rgba(0,0,0,.06);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.side-img:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.1)}
.side-img img{width:100%;height:440px;object-fit:cover;display:block;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)}
.side-img:hover img{transform:scale(1.03)}
.side-dots{position:absolute;bottom:-10px;right:-10px;display:grid;grid-template-columns:repeat(5,8px);gap:6px;z-index:2}
.side-dots span{width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.side-text h2{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;margin-bottom:20px;color:var(--black);letter-spacing:-.02em}
.side-text p{font-size:1.05rem;color:var(--dark);line-height:1.75;margin-bottom:32px;max-width:440px}

/* MODULES */
.modules-section{padding:clamp(80px,10vw,120px) 0;background:var(--light-gray)}
.modules-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:44px;gap:20px;flex-wrap:wrap}
.modules-header h2{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--black);letter-spacing:-.02em}
.modules-header a{font-size:.9rem;color:var(--muted);text-decoration:none;font-weight:600;transition:color 0.2s}
.modules-header a:hover{color:var(--black)}
.module-item{display:flex;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid var(--border);transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.module-item:first-child{border-top:1px solid var(--border)}
.module-item:hover{padding-left:16px;background:rgba(255,255,255,0.2)}
.module-num{width:40px;height:40px;border-radius:50%;background:var(--white);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:var(--black);flex-shrink:0;transition:all 0.3s}
.module-item:hover .module-num {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.module-item:nth-child(1) .module-num,.module-item:nth-child(5) .module-num{background:var(--yellow);border-color:var(--yellow)}
.module-content{flex:1}
.module-content h3{font-size:1.15rem;font-weight:700;color:var(--black);margin-bottom:6px}
.module-content p{font-size:.88rem;color:var(--muted);line-height:1.6}
.module-star{font-size:.75rem;font-weight:700;color:var(--black);padding:6px 14px;border-radius:99px;background:var(--white);border:1px solid var(--border);white-space:nowrap;flex-shrink:0;letter-spacing:.03em;transition:all 0.25s}
.module-item:hover .module-star {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.module-kicker{margin-top:48px;font-family:'Playfair Display',serif;font-weight:800;font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.25;color:var(--black);letter-spacing:-.02em;max-width:24ch}
.module-kicker .hl{background:var(--yellow);padding:0 8px;border-radius:6px;font-style:normal}

/* WHY IT'S FREE */
.free-section{padding:clamp(80px,10vw,120px) 0}
.free-header{text-align:center;margin-bottom:56px}
.free-header h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4.4vw,3.2rem);color:var(--black);margin-bottom:12px;letter-spacing:-.025em}
.free-header h2 em{font-style:italic;color:var(--yellow-dark)}
.free-header p{color:var(--muted);font-size:1.05rem}
.free-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px}
.free-step{background:var(--light-gray);border:1px solid rgba(0,0,0,0.03);border-radius:24px;padding:36px 30px;position:relative;transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.free-step:hover{transform:translateY(-4px)}
.free-step .fs-num{font-family:'Playfair Display',serif;font-weight:900;font-size:1.6rem;color:var(--yellow-dark)}
.free-step h3{font-size:1.25rem;font-weight:700;margin:16px 0 10px;color:var(--black)}
.free-step p{font-size:.9rem;color:var(--muted);line-height:1.6}
.free-step.final{background:var(--black);border-color:transparent}
.free-step.final .fs-num{color:var(--yellow)}
.free-step.final h3{color:var(--white)}
.free-step.final p{color:rgba(255,255,255,.66)}

.pricing-card{max-width:520px;margin:0 auto;background:var(--white);border-radius:32px;padding:48px;text-align:center;position:relative;border:2px solid var(--yellow);box-shadow: 0 16px 40px rgba(0,0,0,0.02);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.pricing-card:hover{transform:translateY(-8px);box-shadow: 0 28px 56px rgba(255,212,59,0.12)}
.price-badge{display:inline-block;background:var(--yellow);color:var(--black);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:6px 16px;border-radius:99px;margin-bottom:24px}
.price-amount{font-family:'Playfair Display',serif;font-weight:900;font-size:5.4rem;color:var(--black);line-height:1}
.price-period{color:var(--dark);font-size:.95rem;margin-top:8px;margin-bottom:36px;font-weight:500}
.price-list{list-style:none;text-align:left;margin-bottom:36px;display:flex;flex-direction:column;gap:16px}
.price-list li{display:flex;align-items:center;gap:14px;font-size:.95rem;color:var(--dark)}
.price-list li::before{content:'✓';color:var(--green);font-weight:700;font-size:.8rem;width:24px;height:24px;background:rgba(52,199,89,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pricing-note{margin-top:24px;font-size:.82rem;color:var(--muted)}

/* CTA */
.cta-section{padding:clamp(80px,10vw,120px) 0;text-align:center}
.cta-section h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.4rem,5.5vw,4rem);color:var(--black);margin-bottom:18px;letter-spacing:-.03em;line-height:1.02}
.cta-section h2 em{font-style:italic}
.cta-section p{font-size:1.1rem;color:var(--muted);max-width:460px;margin:0 auto 36px;line-height:1.6}

/* FOOTER */
footer{background:var(--light-gray);padding:72px 0 40px;border-top:1px solid var(--border)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand p{font-size:.88rem;color:var(--muted);margin-top:16px;max-width:280px;line-height:1.65}
.footer-col h4{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:20px}
.footer-col a{display:block;color:var(--text);text-decoration:none;font-size:.9rem;margin-bottom:12px;transition:all 0.2s}
.footer-col a:hover{color:var(--black);padding-left:4px}
.footer-bottom{padding-top:28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--muted);gap:16px;flex-wrap:wrap}
.footer-logo-big{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(4rem,12vw,9.5rem);color:var(--black);opacity:.03;line-height:1;margin-top:24px;text-align:center;letter-spacing:-.05em;user-select:none}

.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}

@media(max-width:900px){
  nav {
    padding: 16px 0;
  }
  nav .container {
    padding: 12px 20px;
    border-radius: 24px;
  }
  nav.scrolled {
    padding: 8px 0;
  }
  .nav-links {
    display: none;
  }
  .mobile-nav-toggle {
    display: flex;
  }
  .hero-grid,.side-grid{grid-template-columns:1fr;gap:40px}
  .hero-img{order:-1}
  .hero-img img{height:420px}
  .stats-grid{grid-template-columns:1fr}
  .free-steps{grid-template-columns:1fr;gap:16px}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
  .side-grid .side-img{order:-1}
  .side-img img{height:380px}
}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr}
  .hero-img img{height:320px}
  .side-img img{height:280px}
  .module-item{flex-wrap:wrap;gap:12px}
  .module-star{order:3}
  .pricing-card{padding:32px 24px}
  .price-amount{font-size:4.2rem}
}

/* ==========================================================================
   MODAL DIALOGS STYLE (PREMIUM BACKDROP & Starting Styles)
   ========================================================================== */

/* Dialog reset */
dialog {
  border: none;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.18), 0 16px 32px -10px rgba(0, 0, 0, 0.08);
  margin: auto;
  max-width: 540px;
  width: calc(100% - 32px);
  padding: 0;
  overflow: hidden;
  color: var(--text);
  outline: none;
}

/* Backdrop styles with premium blur */
dialog::backdrop {
  background-color: rgba(20, 20, 24, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

dialog[open]::backdrop {
  background-color: rgba(20, 20, 24, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Starting styles for animations (entering top-layer) */
dialog[open],
dialog[open]::backdrop {
  @starting-style {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
}

dialog[open]::backdrop {
  @starting-style {
    background-color: rgba(20, 20, 24, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

/* Exit transitions */
dialog {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              display 0.35s allow-discrete,
              overlay 0.35s allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

dialog::backdrop {
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              display 0.35s allow-discrete,
              overlay 0.35s allow-discrete;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  dialog {
    transform: none !important;
    transition-duration: 0.15s !important;
  }
  @starting-style {
    dialog[open] {
      transform: none !important;
    }
  }
}

/* Modal Inner Layout */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--black);
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--black);
}

.modal-body {
  padding: 32px;
  max-height: 75vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 20px 32px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Forms inside modals */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 14px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--black);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.form-control:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media(max-width:500px){
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Multi-step indicator */
.step-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.step-indicator::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  z-index: 2;
  transition: all 0.3s ease;
}

.step-dot.active {
  border-color: var(--black);
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 0 0 4px rgba(255, 212, 59, 0.25);
}

.step-dot.completed {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

/* Steps pages container */
.step-content {
  display: none;
}

.step-content.active {
  display: block;
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Video Upload Drag & Drop Area */
.video-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  background: var(--light-gray);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.video-upload-zone:hover,
.video-upload-zone.dragover {
  border-color: var(--yellow-dark);
  background: var(--yellow-light);
}

.upload-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  display: block;
}

.upload-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}

.upload-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.upload-preview {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
}

.upload-preview.active {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--black);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-size {
  font-size: 0.75rem;
  color: var(--muted);
}

.preview-remove {
  background: transparent;
  border: none;
  color: #ff3b30;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

/* Upload progress bar */
.upload-progress-container {
  display: none;
  margin-top: 16px;
  width: 100%;
}

.upload-progress-container.active {
  display: block;
}

.progress-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 6px;
}

.progress-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: var(--yellow-dark);
  border-radius: 4px;
  transition: width 0.1s ease;
}

/* Success modal styles */
.success-card {
  text-align: center;
  padding: 8px 16px;
}

.success-icon {
  width: 64px;
  height: 64px;
  background: rgba(52, 199, 89, 0.1);
  color: var(--green);
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.success-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 12px;
}

.success-body {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.success-details {
  background: var(--light-gray);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: left;
}

.success-details p {
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.success-details p:last-child {
  margin-bottom: 0;
}

.success-details strong {
  color: var(--black);
}

.success-btn-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}