/* ═══════════════════════════════════════════════
   KING BI — Motion & Visual System
   Handcrafted, purposeful, performant.
   ═══════════════════════════════════════════════ */

:root {
  --ink: #080b10;
  --paper: #f3efe6;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur: 380ms;
  --dur-slow: 720ms;
}

html { scroll-behavior: smooth; }
body {
  cursor: auto;
  background: var(--bg);
}

/* ── SCROLL PROGRESS ─────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cyan);
  transform-origin: left center;
  will-change: width;
}

/* ── PRELOADER ───────────────────────────────── */
.preloader {
  background: var(--ink);
}
.pl-box { display: none; }
.pl-mark {
  font-family: var(--d);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: var(--t1);
  opacity: 0;
  transform: scale(0.94);
  animation: plIn 0.55s var(--ease-out) 0.05s forwards;
}
.pl-mark span { color: var(--cyan); }
@keyframes plIn {
  to { opacity: 1; transform: scale(1); }
}
.preloader.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-io);
}

/* ── NAV ─────────────────────────────────────── */
.nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    padding 0.45s var(--ease-out),
    background 0.45s var(--ease-io),
    border-color 0.45s var(--ease-io),
    backdrop-filter 0.45s var(--ease-io);
}
.nav.scrolled {
  background: rgba(8, 11, 16, 0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: rgba(255,255,255,0.06);
}
.nav-brand {
  opacity: 0;
  transform: scale(0.96);
}
.is-ready .nav-brand {
  animation: fadeScale 0.7s var(--ease-out) 0.05s forwards;
}
.nav-links li {
  opacity: 0;
  transform: translateY(-8px);
}
.is-ready .nav-links li {
  animation: fadeUp 0.55s var(--ease-out) forwards;
}
.is-ready .nav-links li:nth-child(1) { animation-delay: 0.12s; }
.is-ready .nav-links li:nth-child(2) { animation-delay: 0.18s; }
.is-ready .nav-links li:nth-child(3) { animation-delay: 0.24s; }
.is-ready .nav-links li:nth-child(4) { animation-delay: 0.30s; }
.is-ready .nav-links li:nth-child(5) { animation-delay: 0.36s; }
.is-ready .nav-links li:nth-child(6) { animation-delay: 0.42s; }
.is-ready .nav-links li:nth-child(7) { animation-delay: 0.48s; }
.is-ready .nav-links li:nth-child(8) { animation-delay: 0.54s; }

.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.38s var(--ease-out);
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--t1);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

.nav-actions {
  opacity: 0;
}
.is-ready .nav-actions {
  animation: fadeUp 0.6s var(--ease-out) 0.4s forwards;
}

/* ── CURSOR (minimal) ────────────────────────── */
.cur-ring { display: none !important; }
.cur-dot {
  width: 6px; height: 6px;
  background: var(--t1);
  box-shadow: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out), opacity 0.2s;
}
body.has-pointer .cur-dot { opacity: 0.85; }
body.cursor-hover .cur-dot {
  width: 10px; height: 10px;
}

/* ── BUTTONS ─────────────────────────────────── */
.cta-btn,
.cta-btn-ghost,
.btn-nav-reg,
.btn-nav-portal,
.btn-course-enroll,
.btn-review-cta,
.btn-free-whatsapp,
.btn-oc-whatsapp {
  cursor: pointer;
  animation: none;
  will-change: transform;
  transition:
    transform 0.32s var(--ease-out),
    background 0.32s var(--ease-io),
    box-shadow 0.32s var(--ease-out),
    border-color 0.32s var(--ease-io);
}
.cta-btn {
  background: var(--paper);
  color: #0a0c10;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.cta-btn:hover {
  animation: none;
  transform: translateY(-2px) scale(1.02);
  background: #fff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
}
.cta-btn:active {
  transform: translateY(0) scale(0.985);
}
.cta-btn .cta-text,
.cta-btn .cta-label {
  transition: transform 0.32s var(--ease-out);
}
.cta-btn:hover .cta-text,
.cta-btn:hover .cta-label {
  transform: translateX(-2px);
}
.cta-arr,
.cta-arrow {
  display: inline-flex;
  transition: transform 0.38s var(--ease-out);
}
.cta-btn:hover .cta-arr,
.cta-btn:hover .cta-arrow,
.cta-btn-ghost:hover .cta-arrow,
.btn-course-enroll:hover {
  transform: none;
}
.cta-btn:hover .cta-arr,
.cta-btn:hover .cta-arrow {
  transform: translateX(5px);
}
.cta-btn-ghost:hover .cta-arrow {
  transform: translateX(4px);
}
.cta-shine { display: none; }

.cta-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
}
.cta-btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px) scale(1.02);
}
.cta-btn-ghost:active { transform: scale(0.985); }

.btn-nav-reg:hover,
.btn-nav-portal:hover,
.btn-course-enroll:hover,
.btn-review-cta:hover,
.btn-free-whatsapp:hover,
.btn-oc-whatsapp:hover {
  transform: translateY(-2px) scale(1.02);
}
.btn-nav-reg:active,
.btn-nav-portal:active,
.btn-course-enroll:active,
.btn-review-cta:active {
  transform: scale(0.985);
}

/* ── HERO ────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding: 118px 0 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg-img { transform: scale(1.04); will-change: transform; }
.hero-overlay {
  background:
    linear-gradient(105deg, rgba(8,11,16,0.94) 28%, rgba(8,11,16,0.62) 62%, rgba(8,11,16,0.78) 100%);
}
.hero::before { opacity: 0.45; }
.mesh-wrap { display: none !important; }

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 44px;
  width: 100%;
}
.hero-copy { text-align: left; max-width: 620px; }
.hero-eyebrow {
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(16px);
}
.hero-h1 {
  font-size: clamp(32px, 4.1vw, 54px);
  letter-spacing: -2px;
  line-height: 1.08;
  margin-bottom: 22px;
}
.hline {
  display: block;
  overflow: hidden;
}
.hline > span {
  display: block;
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
}
.hero-sub {
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
}
.hero-cta-group {
  justify-content: flex-start;
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
}
.hero-portal-hint,
.hero-social-proof,
.hero-stats {
  opacity: 0;
  transform: translateY(16px);
}
.hero-social-proof {
  margin-top: 22px;
  display: flex;
}
.hero-stats {
  justify-content: flex-start;
  margin-top: 28px;
  gap: 28px;
}
.cta-wrap { margin-bottom: 0; }

/* Hero visual + clip reveal */
.hero-visual {
  position: relative;
  opacity: 0;
}
.hero-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #10151d;
  clip-path: inset(0 0 100% 0);
  box-shadow: 0 28px 64px rgba(0,0,0,0.38);
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease-out);
}
.hero-frame.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--ease-out);
}
.hero-frame.is-in img { transform: scale(1); }
.hero-frame-cap {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(8,11,16,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-frame-cap strong {
  display: block;
  font-family: var(--d);
  font-size: 14px;
  margin-bottom: 2px;
}
.hero-frame-cap small {
  color: var(--t2);
  font-size: 12px;
}

.hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(12,16,22,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-float i,
.hero-float .hf-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
}
.hf-design { top: 8%; left: -18px; animation: floatY 4.5s var(--ease-io) infinite; }
.hf-video  { top: 28%; right: -14px; animation: floatY 5.5s var(--ease-io) 0.4s infinite; }
.hf-ai     { bottom: 28%; left: -10px; animation: floatY 6s var(--ease-io) 0.8s infinite; }
.hf-cert   { bottom: 8%; right: 6px; animation: floatY 7s var(--ease-io) 1.1s infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.is-ready .hero-eyebrow { animation: fadeUpBlur 0.7s var(--ease-out) 0.28s forwards; }
.is-ready .hline:nth-child(1) > span { animation: lineReveal 0.85s var(--ease-out) 0.42s forwards; }
.is-ready .hline:nth-child(2) > span { animation: lineReveal 0.85s var(--ease-out) 0.56s forwards; }
.is-ready .hline:nth-child(3) > span { animation: lineReveal 0.85s var(--ease-out) 0.70s forwards; }
.is-ready .hero-sub { animation: fadeUpBlur 0.7s var(--ease-out) 0.86s forwards; }
.is-ready .hero-cta-group { animation: fadeUp 0.65s var(--ease-out) 1.02s forwards; }
.is-ready .hero-portal-hint { animation: fadeUp 0.6s var(--ease-out) 1.14s forwards; }
.is-ready .hero-social-proof { animation: fadeUp 0.65s var(--ease-out) 1.22s forwards; }
.is-ready .hero-stats { animation: fadeUp 0.65s var(--ease-out) 1.34s forwards; }
.is-ready .hero-visual { animation: fadeIn 0.2s linear 0.9s forwards; }
.is-ready .hero-float { animation: fadeUp 0.7s var(--ease-out) forwards, floatY 6s var(--ease-io) infinite; }
.is-ready .hf-design { animation-delay: 1.15s, 1.8s; }
.is-ready .hf-video  { animation-delay: 1.28s, 2.1s; }
.is-ready .hf-ai     { animation-delay: 1.40s, 2.4s; }
.is-ready .hf-cert   { animation-delay: 1.52s, 2.7s; }

@keyframes fadeScale {
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes fadeUpBlur {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes lineReveal {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.scroll-hint { opacity: 0; }
.is-ready .scroll-hint { animation: fadeIn 0.6s var(--ease-out) 1.6s forwards; }

/* ── REVEAL SYSTEM ───────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="scale"] { transform: scale(0.97); }

.reveal-img {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.95s var(--ease-out);
}
.reveal-img img {
  transform: scale(1.05);
  transition: transform 1.15s var(--ease-out);
}
.reveal-img.in,
.in .reveal-img {
  clip-path: inset(0 0 0 0);
}
.reveal-img.in img,
.in .reveal-img img {
  transform: scale(1);
}

/* ── CARDS ───────────────────────────────────── */
.icard,
.bcard,
.course-card,
.pmod,
.sc-pub-card,
.rev-card {
  transition:
    transform 0.36s var(--ease-out),
    border-color 0.36s var(--ease-io),
    box-shadow 0.36s var(--ease-out);
}
.icard:hover,
.bcard:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
}
.icard:hover .icard-img img,
.bcard:hover .bcard-img img {
  transform: scale(1.03);
}
.icard-img img,
.bcard-img img {
  transition: transform 0.5s var(--ease-out);
}
.icard-overlay,
.bcard-overlay {
  opacity: 0.55;
  transition: opacity 0.36s var(--ease-io);
}
.icard:hover .icard-overlay,
.bcard:hover .bcard-overlay {
  opacity: 0.72;
}
.icard-arrow {
  display: inline-flex;
  margin-left: 8px;
  transition: transform 0.36s var(--ease-out);
}
.icard:hover .icard-arrow { transform: translateX(4px); }
.icard-glow { display: none; }
.icard::before { display: none; }

.course-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.course-card:hover .c-course-icon { transform: scale(1.04); }
.c-course-icon { transition: transform 0.36s var(--ease-out); }
.course-card:hover .btn-course-enroll .c-arr,
.btn-course-enroll .c-arr {
  display: inline-block;
  transition: transform 0.36s var(--ease-out);
}
.course-card:hover .btn-course-enroll .c-arr { transform: translateX(4px); }
.courses-grid .course-card:nth-child(3n+1) { --delay: 0ms; }
.courses-grid .course-card:nth-child(3n+2) { --delay: 80ms; }
.courses-grid .course-card:nth-child(3n) { --delay: 160ms; }

/* ── HOW IT WORKS ────────────────────────────── */
.s-how {
  padding: 120px 0;
  position: relative;
}
.how-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 12px;
}
.how-line {
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.how-line span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cyan);
  transition: width 1.1s var(--ease-out);
}
.s-how.in .how-line span { width: 100%; }
.how-step {
  position: relative;
  padding-top: 8px;
}
.how-n {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--d);
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 22px;
  transition: border-color 0.4s var(--ease-io), background 0.4s, color 0.4s;
}
.how-step.is-on .how-n,
.how-step:hover .how-n {
  border-color: rgba(0,210,255,0.4);
  background: rgba(0,210,255,0.08);
  color: var(--cyan);
}
.how-step h3 {
  font-family: var(--d);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.how-step p {
  font-size: 14.5px;
  color: var(--t2);
  line-height: 1.7;
  max-width: 240px;
}

/* ── PRO MODULES ─────────────────────────────── */
.pro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 16px;
}
.pro-tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 36px;
}
.ptool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 13px;
  font-weight: 700;
}
.ptool-m {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.pmod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.pmod {
  padding: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.pmod:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 16px 36px rgba(0,0,0,0.24);
}
.pmod-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pmod-n {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--d);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.03);
}
.pmod h4 {
  font-family: var(--d);
  font-size: 16px;
  font-weight: 800;
  margin: 2px 0 0;
}
.pmod .pmod-lab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.8;
}
.pmod p {
  font-size: 13.5px;
  color: var(--t2);
  line-height: 1.65;
  margin: 0;
}
.pmod--1 { color: #67e8f9; }
.pmod--2 { color: #fbbf24; }
.pmod--3 { color: #c084fc; }
.pmod--4 { color: #60a5fa; }
.pmod--5 { color: #f472b6; }
.pmod--6 { color: #34d399; }
.pmod--7 { color: #f87171; }
.pmod--8 { color: #67e8f9; }
.pmod h4, .pmod .pmod-n { color: inherit; }
.pmod h4 { color: var(--t1); }

.ppillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.ppillar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.ppillar strong { display: block; font-size: 14px; }
.ppillar span { font-size: 12px; color: var(--t2); }

/* ── FINAL CTA ───────────────────────────────── */
.s-final {
  padding: 80px 0 40px;
}
.final-card {
  position: relative;
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 48px;
  border-radius: 24px;
  text-align: center;
  background: #10151c;
  border: 1px solid rgba(255,255,255,0.08);
}
.final-card::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(115deg, transparent 30%, rgba(0,210,255,0.07) 50%, transparent 70%);
  animation: ctaSheen 8s var(--ease-io) infinite;
  pointer-events: none;
}
@keyframes ctaSheen {
  0% { transform: translateX(-18%); }
  100% { transform: translateX(18%); }
}
.final-card h2 {
  font-family: var(--d);
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -1.4px;
  margin-bottom: 14px;
}
.final-card p {
  color: var(--t2);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* ── FOOTER ──────────────────────────────────── */
.ft-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
  flex-wrap: wrap;
}
.ft-soc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--t1);
  transition: transform 0.3s var(--ease-out), background 0.3s, opacity 0.3s;
}
.ft-soc:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.07);
}
.ft-soc--yt { color: #ff6b6b; }
.ft-soc--wa { color: #25d366; }

/* ── OFFER CLEANUP ───────────────────────────── */
.oc-fire-bg { display: none; }
.offer-card {
  background: #10151c;
  border-color: rgba(255,149,0,0.22);
}

/* ── SECTION RHYTHM ──────────────────────────── */
.s-free, .s-pro, .s-courses, .s-ben, .s-reviews, .s-showcase, .s-offer, .s-how {
  background: var(--bg);
}
.s-free,
.s-ben,
.s-reviews { background: #070a10; }
.s-courses::before,
.s-reviews::before { opacity: 0.5; }

/* ── LIGHT THEME ─────────────────────────────── */
body.theme-light .nav.scrolled {
  background: rgba(240, 244, 248, 0.86);
}
body.theme-light .hero-overlay {
  background: linear-gradient(105deg, rgba(240,244,248,0.92) 30%, rgba(220,235,250,0.72) 100%);
}
body.theme-light .hero-float,
body.theme-light .hero-frame-cap {
  background: rgba(255,255,255,0.86);
  border-color: rgba(0,0,0,0.08);
  color: #0f172a;
}
body.theme-light .cta-btn { color: #0a0c10; }
body.theme-light .pmod,
body.theme-light .ppillar,
body.theme-light .how-n,
body.theme-light .final-card,
body.theme-light .offer-card {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.08);
}
body.theme-light .final-card h2,
body.theme-light .how-step h3,
body.theme-light .pmod h4 { color: #0f172a; }
body.theme-light .scroll-progress span { background: #0284c7; }

/* ── MOBILE ──────────────────────────────────── */
@media (max-width: 1280px) {
  .nav-label, .nav-sep { display: none; }
  .nav-links { gap: 18px; }
}
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
  }
  .hero-copy { text-align: center; max-width: none; }
  .hero-cta-group { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-social-proof { margin-left: auto; margin-right: auto; }
  .hero-visual { max-width: min(420px, 100%); margin: 0 auto; }
  .hero-float { display: none; }
  .how-track { grid-template-columns: 1fr 1fr; }
  .how-line { display: none; }
  .ppillar-grid { grid-template-columns: 1fr 1fr; }
  .pmod-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .how-track,
  .ppillar-grid,
  .pmod-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: 96px 0 40px; }
  .final-card { padding: 32px 16px; }
  .hero-h1 { letter-spacing: -0.6px; }
  .how-step p { max-width: none; }
}

/* ── REDUCED MOTION ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .nav-brand,
  .nav-links li,
  .nav-actions,
  .hero-eyebrow,
  .hline > span,
  .hero-sub,
  .hero-cta-group,
  .hero-portal-hint,
  .hero-social-proof,
  .hero-stats,
  .hero-visual,
  .hero-float,
  .hero-frame,
  .hero-frame img,
  .reveal-img,
  .reveal-img img,
  .scroll-hint {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .preloader { display: none !important; }
  .final-card::before { display: none; }
}

@media (hover: none) {
  .cur-dot, .cur-ring { display: none !important; }
  body { cursor: auto; }
}