/* ============================================
   Destravar Digital — Landing Page
   ============================================ */

:root {
  --bg: #05070d;
  --bg-alt: #080b14;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --blue-700: #123a8f;
  --blue-600: #1c4fd6;
  --blue-500: #2f6bff;
  --blue-400: #4f8bff;
  --cyan-400: #5fd4ff;
  --cyan-300: #8fe3ff;

  --text: #f3f6fc;
  --text-dim: #aab3c6;
  --text-mute: #7c8497;

  --green: #34d399;
  --red: #f87171;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-glow: 0 0 0 1px rgba(79, 139, 255, 0.15), 0 20px 60px -20px rgba(47, 107, 255, 0.45);
  --shadow-soft: 0 20px 50px -25px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 18px 40px -14px rgba(47, 107, 255, 0.4), 0 0 0 1px rgba(95, 212, 255, 0.16);

  --card-bg: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%, rgba(47,107,255,.03));
  --card-bg-hover: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 60%, rgba(47,107,255,.05));
  --grid-texture:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .3s;
  --dur-base: .4s;
  --dur-slow: .7s;
  --container: 1180px;
}

@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.15;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--cyan-300);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--blue-500);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  z-index: 999;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: 820px; }

.text-gradient {
  background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 16px 30px;
  font-size: 1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(47, 107, 255, 0.65), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-180%) skewX(-15deg);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
/* Ambient brushed-metal sheen, always on, independent of hover */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255,255,255,.16) 42%,
    rgba(210,235,255,.32) 50%,
    rgba(255,255,255,.16) 58%,
    transparent);
  transform: skewX(-18deg);
  animation: btn-metal-sheen 4.2s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
@keyframes btn-metal-sheen {
  0% { left: -70%; }
  30%, 100% { left: 140%; }
}
.btn--primary:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 18px 44px -10px rgba(47, 107, 255, 0.85), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 38px -6px rgba(95,212,255,.5);
}
.btn--primary:hover::before { transform: translateX(280%) skewX(-15deg); }
.btn--primary:active { transform: translateY(0) scale(1.01); }
.btn--sm { padding: 10px 20px; font-size: 0.875rem; }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ============================================
   Announcement + Header
   ============================================ */
.announce {
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500));
  text-align: center;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.announce .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  margin-right: 8px;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  50% { opacity: .6; box-shadow: 0 0 0 4px rgba(255,255,255,0); }
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 13, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,0);
  transition: box-shadow .3s var(--ease);
}
.header.is-scrolled {
  box-shadow: 0 8px 30px -12px rgba(0,0,0,0.5);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand { display: flex; align-items: center; }
.brand__logo {
  display: block;
  height: 42px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(47,107,255,.35)) drop-shadow(0 0 2px rgba(255,255,255,.12));
  transition: filter .3s var(--ease);
}
.brand:hover .brand__logo {
  filter: drop-shadow(0 0 16px rgba(95,212,255,.5)) drop-shadow(0 0 2px rgba(255,255,255,.16));
}

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { position: relative; font-size: 0.92rem; color: var(--text-dim); font-weight: 500; transition: color .25s var(--ease); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 16px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
}
.nav-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 24px 22px;
  border-top: 1px solid var(--border);
}
.mobile-nav a { padding: 12px 4px; font-weight: 500; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.mobile-nav .btn { margin-top: 12px; text-align: center; }
.mobile-nav.is-open { display: flex; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg picture { display: contents; }
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 11%;
  transform-origin: 50% 0%;
  transform: scale(1.015);
  transition: transform .6s var(--ease);
  will-change: transform;
}
@media (hover: none) {
  .hero__bg-img {
    animation: hero-breathe 16s ease-in-out infinite alternate;
  }
}
@keyframes hero-breathe {
  0% { transform: scale(1.015) translate(0, 0); }
  100% { transform: scale(1.055) translate(-1%, -1%); }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(4,6,12,.98) 0%, rgba(5,7,14,.94) 26%, rgba(5,7,14,.6) 50%, rgba(5,7,14,.12) 68%, rgba(5,7,14,.05) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5,7,13,0) 22%, rgba(5,7,13,0) 78%, var(--bg) 100%);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 20% 30%, #000 30%, transparent 85%);
}

/* Hero live-sales notifications: confined to the right-hand photo zone,
   clear of the 600px-wide text column, so they never cross the headline. */
.hero-notifs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-notif {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 210px;
  padding: 11px 15px;
  border-radius: 14px;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(95, 212, 255, 0.05);
  opacity: 0;
  transform: translateY(10px) scale(.94);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  white-space: nowrap;
}
.hero-notif.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.hero-notif__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(52, 211, 153, .3), rgba(52, 211, 153, .08));
  color: var(--green);
}
.hero-notif__text { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.hero-notif__label { font-size: .7rem; color: var(--text-dim); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hero-notif__amount { font-size: .85rem; color: #fff; font-weight: 700; }

.hero-notif--1 { top: 9%; right: 4%; }
.hero-notif--2 { top: 76%; right: 5%; }

@media (max-width: 960px) {
  .hero-notifs {
    height: auto;
    aspect-ratio: 1 / 1.14;
    min-height: 380px;
    max-height: 680px;
    overflow: hidden;
  }
  .hero-notif { max-width: 172px; padding: 9px 13px; }
  .hero-notif--1 { top: 7%; right: auto; left: 5%; }
  .hero-notif--2 { top: 83%; right: 6%; left: auto; }
}

.hero__inner {
  padding: 74px 0 40px;
}
.hero__content { max-width: 600px; }
.hero__content [data-reveal] { transition-duration: .7s; }
.hero__content .eyebrow { transition-delay: .05s; }
.hero__content .hero__title { transition-delay: .16s; }
.hero__content .hero__subtitle { transition-delay: .3s; }
.hero__content .hero__highlight { transition-delay: .4s; }
.hero__content .hero__cta { transition-delay: .5s; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan-300);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.stars { display: inline-flex; align-items: center; gap: 2px; color: #ffc94d; }

.hero__title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.hero__title-w1,
.hero__title-w2,
.hero__title-w3 { display: block; }
.hero__title-w1 { font-weight: 500; color: rgba(255, 255, 255, .85); letter-spacing: -0.008em; }
.hero__title-w2 { font-weight: 700; }
.hero__title-w3 { font-weight: 400; color: rgba(255, 255, 255, .78); }
.hero__title-w3 .text-gradient { font-weight: 700; }

/* Premium metallic sheen on the hero's key accent phrase */
.hero__title .text-gradient {
  background: linear-gradient(100deg,
    var(--cyan-300) 0%,
    var(--blue-400) 24%,
    var(--blue-500) 44%,
    #eaf5ff 52%,
    var(--blue-500) 60%,
    var(--blue-600) 80%,
    var(--cyan-300) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(59, 130, 246, .22);
  animation: hero-title-shine 9s ease-in-out infinite;
}
@keyframes hero-title-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero__lead {
  max-width: 42ch;
}
.hero__subtitle {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.hero__highlight {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.hero__subtitle strong,
.hero__highlight strong:not(.text-gradient) { font-weight: 600; color: #fff; }
.hero__highlight strong.text-gradient { font-weight: 600; }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-mute);
}

/* Marquee */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: clip;
  padding: 18px 0;
}
.marquee__track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__track span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   Sections general
   ============================================ */
.section {
  padding: 100px 0;
  position: relative;
  overflow: clip;
  background-image: var(--grid-texture);
  background-size: 64px 64px;
  background-position: center top;
}
.section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -10%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,255,.15), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
.section:nth-of-type(even)::before {
  right: auto;
  left: -10%;
  top: auto;
  bottom: -12%;
  background: radial-gradient(circle, rgba(95,212,255,.13), transparent 70%);
}
.section--dark {
  background-image:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 8%, var(--bg-alt) 92%, var(--bg) 100%),
    var(--grid-texture);
  background-size: 100% 100%, 64px 64px;
  background-position: center, center top;
}
.section__head { position: relative; max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section__head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 90vw);
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(47,107,255,.14), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
.section__title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; }
.section__title-light { font-weight: 500; color: rgba(255, 255, 255, .74); }
.section__subtitle { margin-top: 14px; color: var(--text-dim); font-size: 1.05rem; }
.section__text { color: var(--text-dim); font-size: 1.02rem; margin-top: 14px; }
.tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan-300);
  margin-bottom: 14px;
}

.feature-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(95,212,255,0.35);
  background: var(--card-bg-hover);
  box-shadow: var(--shadow-hover);
}
.feature-card__icon,
.bonus-card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: var(--cyan-300);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(47,107,255,.25), rgba(95,212,255,.1));
  border: 1px solid var(--border-strong);
  margin-bottom: 18px;
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.feature-card:hover .feature-card__icon,
.bonus-card:hover .bonus-card__icon {
  transform: scale(1.04);
  color: #fff;
  background: linear-gradient(135deg, rgba(47,107,255,.4), rgba(95,212,255,.18));
}
.feature-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.feature-card p { color: var(--text-dim); font-size: .94rem; }

/* Showcase (video replacement: panel + overlapping cards) */
.showcase__stage { position: relative; }
.showcase__panel {
  position: relative;
  isolation: isolate;
  min-height: 380px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, #0b1120, #060911);
  box-shadow: var(--shadow-glow);
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 45%, rgba(47,107,255,.35), transparent 60%);
  filter: blur(40px);
  animation: glow-pulse 9s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.08); }
}
.showcase__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 90%);
}
.showcase__orbit {
  position: absolute;
  width: 340px; height: 340px;
  display: grid;
  place-items: center;
}
.showcase__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(95,212,255,0.25);
  animation: spin 40s linear infinite;
}
.showcase__ring--a { width: 100%; height: 100%; }
.showcase__ring--b { width: 68%; height: 68%; animation-direction: reverse; animation-duration: 28s; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.showcase__core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 260px;
}
.showcase__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--blue-500), var(--cyan-400));
  color: #05070d;
  box-shadow: 0 0 0 6px rgba(47,107,255,.12), 0 20px 40px -14px rgba(47,107,255,.7);
  animation: badge-breathe 5s ease-in-out infinite;
}
.showcase__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  z-index: -1;
  animation: badge-ping 3s ease-out infinite;
}
@keyframes badge-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes badge-ping {
  0% { transform: scale(1); opacity: .45; }
  100% { transform: scale(1.7); opacity: 0; }
}
.showcase__core p { font-size: .88rem; color: var(--text-dim); }

.showcase__node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cyan-300);
  background: rgba(8, 12, 22, 0.8);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  animation: floaty 7s ease-in-out infinite;
}
.showcase__node--1 { top: 16%; left: 8%; animation-delay: 0s; }
.showcase__node--2 { top: 18%; right: 8%; animation-delay: 1.6s; }
.showcase__node--3 { bottom: 14%; left: 50%; transform: translateX(-50%); animation-delay: 3.2s; animation-name: floaty-x; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes floaty-x {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

.showcase__cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: -64px 24px 0;
}
.showcase__cards .feature-card { background: rgba(10,14,24,0.92); }

/* Split layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split--reverse .split__content { order: 2; }
.split--reverse .split__media { order: 1; }
.center-block { max-width: 720px; margin: 0 auto; text-align: center; }

/* Icon row (O que é) */
.icon-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.icon-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.icon-row__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--cyan-300);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(47,107,255,.22), rgba(95,212,255,.06));
  border: 1px solid var(--border-strong);
  margin-bottom: 6px;
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.icon-row li:hover .icon-row__icon {
  transform: scale(1.04);
  color: #fff;
  background: linear-gradient(160deg, rgba(47,107,255,.38), rgba(95,212,255,.14));
}
.icon-row strong { font-size: .92rem; color: #fff; }
.icon-row span:last-child { font-size: .8rem; color: var(--text-mute); }

.mini-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.mini-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.mini-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.mini-card:hover { transform: translateY(-4px); border-color: rgba(95,212,255,.3); background: var(--card-bg-hover); box-shadow: var(--shadow-hover); }
.mini-card h3 { font-size: 1rem; margin-bottom: 6px; color: var(--cyan-300); }
.mini-card p { color: var(--text-dim); font-size: .92rem; }

/* Notebook showcase (MadSwiper Pro product presentation) */
.notebook-showcase {
  position: relative;
  isolation: isolate;
  max-width: 460px;
  margin: 0 auto;
  padding: 30px 24px 40px;
}
.notebook-showcase__glow {
  position: absolute;
  inset: 8% 2%;
  z-index: -1;
  background: radial-gradient(circle at 50% 45%, rgba(47,107,255,.38), transparent 68%);
  filter: blur(46px);
  animation: glow-pulse 9s ease-in-out infinite;
}
.notebook-showcase__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.notebook-showcase__particles::before,
.notebook-showcase__particles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(1.5px);
}
.notebook-showcase__particles::before {
  width: 6px; height: 6px;
  top: 16%; left: 10%;
  background: var(--cyan-300);
  opacity: .7;
  animation: particle-float 6s ease-in-out infinite;
}
.notebook-showcase__particles::after {
  width: 4px; height: 4px;
  top: 72%; left: 88%;
  background: var(--blue-400);
  opacity: .6;
  animation: particle-float 8s ease-in-out infinite reverse;
}
@keyframes particle-float {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50% { transform: translateY(-14px); opacity: 1; }
}
.notebook-showcase__badge-bg {
  position: absolute;
  z-index: 0;
  top: -5%;
  left: -9%;
  width: 210px;
  height: 210px;
  animation: badge-bg-float 9s ease-in-out infinite;
}
.notebook-showcase__badge-bg::after {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,255,.32), transparent 70%);
  filter: blur(22px);
}
.notebook-showcase__badge-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: .2;
  filter: blur(3px) drop-shadow(0 0 24px rgba(95,212,255,.2));
  animation: badge-bg-spin 60s linear infinite;
}
.notebook-showcase__badge-bg::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(125deg, rgba(255,255,255,.22) 0%, transparent 32%, transparent 68%, rgba(95,212,255,.16) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes badge-bg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes badge-bg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.notebook-showcase__laptop {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 46px rgba(0,0,0,.5)) drop-shadow(0 0 44px rgba(47,107,255,.28));
  animation: notebook-float 10s ease-in-out infinite;
}
@keyframes notebook-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.notebook-showcase__badge {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: 8%;
  width: 132px;
  height: 132px;
  animation: badge-bob 5.5s ease-in-out infinite;
}
@keyframes badge-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.notebook-showcase__badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-spin-rev 42s linear infinite;
}
.notebook-showcase__badge-text {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  fill: var(--cyan-300);
}
@keyframes badge-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.notebook-showcase__badge-icon {
  position: absolute;
  inset: 21%;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  animation: badge-spin 36s linear infinite;
}
@keyframes badge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Testimonials carousel */
.testi-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.testi-carousel__viewport {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 6%, #000 18%, #000 82%, rgba(0,0,0,.4) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 6%, #000 18%, #000 82%, rgba(0,0,0,.4) 94%, transparent 100%);
}
.testi-carousel__viewport:active { cursor: grabbing; }
.testi-carousel__track {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 34px 0;
  will-change: transform;
  transition: transform .55s var(--ease);
}
.testi-carousel__track.no-transition { transition: none; }

.testi-slide {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 230px;
  height: 400px;
  margin: 0 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform .55s var(--ease), opacity .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.testi-slide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.testi-slide img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.testi-slide.is-active { border-color: rgba(95,212,255,.45); box-shadow: var(--shadow-glow); }
.testi-slide:hover { border-color: rgba(95,212,255,.3); box-shadow: 0 22px 46px -18px rgba(47,107,255,.4), var(--shadow-soft); }

.testi-carousel__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  color: var(--cyan-300);
  transition: background .3s, transform .3s, border-color .3s;
}
.testi-carousel__arrow:hover { background: rgba(47,107,255,.25); border-color: rgba(95,212,255,.4); transform: scale(1.06); }

.testi-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.testi-carousel__dots button {
  width: 22px; height: 8px;
  padding: 0;
  border-radius: 999px;
  background: var(--border-strong);
  transform: scaleX(.36);
  transform-origin: center;
  transition: transform .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
  opacity: .7;
}
.testi-carousel__dots button:hover { opacity: 1; transform: scaleX(.55); }
.testi-carousel__dots button.is-active {
  transform: scaleX(1);
  opacity: 1;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
}

/* Depoimentos: editorial title hierarchy + post-carousel CTA */
.testi-title { font-weight: 700; letter-spacing: -0.01em; }
.testi-title__light { font-weight: 300; color: var(--text-dim); }
.testi-title__strong { font-weight: 700; white-space: nowrap; }
.testi-subtitle { font-weight: 300; }
.testi-cta { display: flex; justify-content: center; margin-top: 38px; }

/* Bonus grid (5 cards: 3 on the first row, 2 centered on the second) */
.bonus-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.bonus-grid .bonus-card {
  flex: 0 1 calc((100% - 40px) / 3);
}
.bonus-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.bonus-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.bonus-card:hover { transform: translateY(-6px); border-color: rgba(95,212,255,.3); background: var(--card-bg-hover); box-shadow: var(--shadow-hover); }
.bonus-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.bonus-card p { color: var(--text-dim); font-size: .9rem; flex: 1; }
.bonus-card__value {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.bonus-card__value s { color: var(--text-mute); font-size: .85rem; }
.bonus-card__value strong { color: var(--green); font-size: .92rem; }

/* Qualify grid */
.qualify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.qualify-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--radius-lg);
  padding: 34px;
  border: 1px solid var(--border);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.qualify-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.qualify-card:hover { transform: translateY(-4px); }
.qualify-card--no { background: linear-gradient(160deg, rgba(248,113,113,.09), rgba(255,255,255,.015) 65%); }
.qualify-card--no:hover { border-color: rgba(248,113,113,.3); box-shadow: 0 18px 40px -14px rgba(248,113,113,.28), 0 0 0 1px rgba(248,113,113,.12); }
.qualify-card--yes { background: linear-gradient(160deg, rgba(52,211,153,.09), rgba(255,255,255,.015) 65%); }
.qualify-card--yes:hover { border-color: rgba(52,211,153,.3); box-shadow: 0 18px 40px -14px rgba(52,211,153,.28), 0 0 0 1px rgba(52,211,153,.12); }
.qualify-card h3 { font-size: 1.1rem; margin-bottom: 20px; }
.qualify-card--no h3 { color: var(--red); }
.qualify-card--yes h3 { color: var(--green); }
.qualify-card ul { display: flex; flex-direction: column; gap: 16px; }
.qualify-card li {
  padding-left: 24px;
  position: relative;
  font-size: .92rem;
  color: var(--text-dim);
}
.qualify-card--no li::before,
.qualify-card--yes li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 16px; height: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.qualify-card--no li::before {
  background: var(--red);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.qualify-card--yes li::before {
  background: var(--green);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Offer / Pricing */
.section--offer { padding-top: 60px; }
.offer-card {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: var(--shadow-glow);
}
.offer-card__head { text-align: center; margin-bottom: 30px; }
.offer-card__head .section__title { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.offer-stack { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.offer-stack li {
  display: flex; justify-content: space-between;
  padding: 12px 4px;
  font-size: .92rem;
  border-bottom: 1px dashed var(--border);
  color: var(--text-dim);
}
.offer-stack li strong { color: var(--text-mute); }
.offer-stack li strong.offer-stack__old {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  color: var(--text-mute);
  opacity: .68;
}
.offer-stack li strong.offer-stack__priceless { color: var(--cyan-300); }
.offer-total {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding: 16px 4px;
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 1px solid var(--border-strong);
  margin-bottom: 30px;
}
.offer-total strong.offer-stack__old {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  color: var(--text-mute);
  opacity: .7;
  font-size: .96rem;
  font-weight: 600;
}
.offer-price { text-align: center; margin-bottom: 26px; }
.offer-price__intro { color: var(--text-dim); font-size: .95rem; margin-bottom: 24px; }
.offer-price__highlight {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 30px 24px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(95,212,255,.07), rgba(255,255,255,.015));
  border: 1px solid rgba(95,212,255,.28);
  box-shadow: 0 0 60px -22px rgba(47,107,255,.55);
}
.offer-price__highlight::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background: radial-gradient(circle at 50% 35%, rgba(47,107,255,.4), transparent 65%);
  filter: blur(30px);
  animation: glow-pulse 8s ease-in-out infinite;
}
.offer-price__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(95,212,255,.32);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan-300);
  margin-bottom: 16px;
}
.offer-price__lead {
  color: var(--text-dim);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.offer-price__value {
  font-weight: 700;
  font-size: 4.2rem;
  margin: 4px 0 6px;
  background: linear-gradient(90deg, #fff, var(--cyan-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(95,212,255,.4));
}
.offer-price__value small { font-size: 1.4rem; font-weight: 700; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); }
.offer-price__note { color: var(--text-mute); font-size: .82rem; }
.offer-meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px;
  margin-top: 20px;
  font-size: .8rem;
  color: var(--text-mute);
}
.offer-meta span { display: inline-flex; align-items: center; gap: 6px; }
.offer-meta svg { color: var(--cyan-300); flex-shrink: 0; }
.guarantee {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex; gap: 20px; align-items: flex-start;
  margin-top: 34px;
  padding: 26px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(52,211,153,.09), rgba(255,255,255,.015));
  border: 1px solid rgba(52,211,153,.25);
  box-shadow: 0 20px 44px -28px rgba(52,211,153,.4);
}
.guarantee::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background: radial-gradient(circle at 12% 30%, rgba(52,211,153,.28), transparent 62%);
  filter: blur(28px);
}
.guarantee__badge {
  position: relative;
  width: 60px; height: 60px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(52,211,153,.22), rgba(52,211,153,.06));
  border: 1px solid rgba(52,211,153,.4);
  color: var(--green);
}
.guarantee__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--green);
  z-index: -1;
  animation: badge-ping 3.4s ease-out infinite;
}
.guarantee__body { position: relative; z-index: 1; }
.guarantee__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--green);
  margin-bottom: 6px;
}
.guarantee strong { display: block; margin-bottom: 6px; font-size: 1.05rem; }
.guarantee p { color: var(--text-dim); font-size: .9rem; }

/* FAQ */
.accordion__item {
  position: relative;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease);
}
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  background: linear-gradient(90deg, rgba(47,107,255,.08), transparent 70%);
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  transition: color var(--dur-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--cyan-300); }
.accordion__trigger svg { flex-shrink: 0; transition: transform .35s var(--ease); color: var(--text-mute); }
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--cyan-300); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.accordion__trigger[aria-expanded="true"] + .accordion__panel {
  grid-template-rows: 1fr;
}
.accordion__panel-inner { overflow: hidden; min-height: 0; }
.accordion__panel p { padding: 0 4px 22px; color: var(--text-dim); font-size: .93rem; max-width: 65ch; }

/* Mentores */
.mentor-rows {
  display: flex;
  flex-direction: column;
  gap: 88px;
  max-width: 1040px;
  margin: 0 auto;
}
.mentor-row {
  display: flex;
  align-items: center;
  gap: 64px;
}
.mentor-row--reverse { flex-direction: row-reverse; }
.mentor-rows .mentor-row:nth-child(2) { transition-delay: .1s; }

.mentor-row__media {
  position: relative;
  flex: 0 0 auto;
  width: 44%;
  max-width: 420px;
}
.mentor-row__media img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 30px rgba(47,107,255,.28))
    drop-shadow(0 24px 46px rgba(0,0,0,.45));
  transition: transform .5s var(--ease), filter .5s var(--ease);
}

.mentor-row:hover .mentor-row__media img {
  transform: scale(1.02);
  filter:
    drop-shadow(0 0 42px rgba(47,107,255,.4))
    drop-shadow(0 28px 54px rgba(0,0,0,.5));
}

.mentor-row__body { position: relative; flex: 1; padding: 8px 0; }
.mentor-row__index {
  position: absolute;
  top: -34px;
  left: 0;
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(95,212,255,.25);
  pointer-events: none;
}
.mentor-row__body h3 { font-size: 1.6rem; margin-bottom: 6px; }
.mentor-row__role {
  display: inline-block;
  color: var(--cyan-300);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--blue-500), transparent) 1;
}
.mentor-row__body p:last-child { color: var(--text-dim); font-size: 1rem; max-width: 46ch; }

/* CTA final */
.cta-final__box {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 60px 40px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle at 50% 0%, rgba(47,107,255,.18), transparent 70%), var(--surface);
}
.cta-final__box .section__text { margin-bottom: 30px; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__copy { color: var(--text-mute); font-size: .82rem; }
.footer__links { display: flex; gap: 22px; }
.footer__links a { color: var(--text-mute); font-size: .82rem; transition: color .25s; }
.footer__links a:hover { color: #fff; }

/* Glow divider (barra de destaque) */
.glow-divider {
  position: relative;
  z-index: 1;
  height: 1px;
  width: min(220px, 50%);
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
  opacity: .8;
}
.glow-divider::after {
  content: "";
  position: absolute;
  inset: -10px 0;
  background: inherit;
  filter: blur(12px);
  opacity: .7;
}

/* ============================================
   Reveal animations
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: transform, opacity;
}
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Natural stagger for repeating grid/list items */
.showcase__cards .feature-card:nth-child(1),
.bonus-grid .bonus-card:nth-child(1),
.icon-row li:nth-child(1) { transition-delay: 0s; }
.showcase__cards .feature-card:nth-child(2),
.bonus-grid .bonus-card:nth-child(2),
.icon-row li:nth-child(2) { transition-delay: .08s; }
.showcase__cards .feature-card:nth-child(3),
.bonus-grid .bonus-card:nth-child(3),
.icon-row li:nth-child(3) { transition-delay: .16s; }
.showcase__cards .feature-card:nth-child(4),
.bonus-grid .bonus-card:nth-child(4),
.icon-row li:nth-child(4) { transition-delay: .24s; }
.showcase__cards .feature-card:nth-child(5),
.bonus-grid .bonus-card:nth-child(5),
.icon-row li:nth-child(5) { transition-delay: .32s; }
.showcase__cards .feature-card:nth-child(6),
.icon-row li:nth-child(6) { transition-delay: .4s; }

.qualify-grid .qualify-card--no { transition-delay: 0s; }
.qualify-grid .qualify-card--yes { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg-img { transform: none !important; }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1080px) {
  .container { padding: 0 20px; }
  .bonus-grid .bonus-card { flex-basis: calc((100% - 20px) / 2); }
  .testi-slide { width: 200px; height: 360px; margin: 0 10px; }
  .showcase__cards { grid-template-columns: repeat(2, 1fr); margin: -48px 16px 0; }
  .icon-row { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }

  /* Hero becomes a top banner: full photo, uncropped, own square-ish stage */
  .hero__bg {
    position: relative;
    z-index: 0;
    height: auto;
    aspect-ratio: 1 / 1.14;
    min-height: 380px;
    max-height: 680px;
    background: var(--bg);
  }
  .hero__bg-img { object-fit: contain; object-position: 50% 50%; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(5,7,13,.05) 0%, rgba(5,7,13,.32) 65%, var(--bg) 96%);
  }
  .hero__grid { display: none; }
  .hero__inner { padding: 40px 0 56px; }
  .hero__content { max-width: none; text-align: center; margin: 0 auto; }
  .hero__title { margin-bottom: 26px; }
  .hero__lead { max-width: 380px; margin-left: auto; margin-right: auto; }
  .hero__subtitle, .hero__highlight { font-size: .98rem; line-height: 1.55; }
  .hero__subtitle { margin-bottom: 14px; }
  .hero__highlight { margin-bottom: 28px; }
  .hero__cta { align-items: center; gap: 16px; }
  .eyebrow { margin-left: auto; margin-right: auto; margin-bottom: 22px; }

  .showcase__panel { min-height: 300px; }
  .showcase__orbit { width: 240px; height: 240px; }
  .showcase__node { font-size: .7rem; padding: 7px 12px; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__content, .split--reverse .split__media { order: initial; }

  .notebook-showcase { max-width: 380px; padding: 24px 20px 34px; }
  .notebook-showcase__glow { opacity: .7; }
  .notebook-showcase__badge { width: 104px; height: 104px; right: 0; bottom: 2%; }
  .notebook-showcase__badge-text { font-size: 9.5px; }

  .qualify-grid { grid-template-columns: 1fr; }

  .mentor-rows { gap: 56px; }
  .mentor-row, .mentor-row--reverse { flex-direction: column; text-align: center; gap: 26px; }
  .mentor-row__media { width: min(84%, 340px); max-width: none; margin: 0 auto; }
  .mentor-row__index { display: none; }
  .mentor-row__role { border-image: none; border-bottom: none; }
  .mentor-row__body p:last-child { max-width: 52ch; margin: 0 auto; }

  .offer-card { padding: 34px 26px; }
}

/* Hero Mobile — layered architecture, independent from the desktop overlay model.
   Scoped to <=768px only: tablet (769-960px) keeps the approved version above untouched.

   Layers (bottom to top), all independently sized/positioned:
     1. .hero            -> background layer: rich black/graphite/deep-blue gradient, spans 100% of the section
     2. .hero__grid      -> tech grid texture, spans 100% of the section (same as desktop)
     3. .hero__bg::before-> soft blue glow, scoped to the photo's own box only
     4. .hero__bg-img     -> the specialist, absolutely positioned, sized on its OWN aspect-ratio —
                             never stretched to the section's height, never defines the section's height
     5. .hero__overlay    -> darkening fade, scoped to the photo's own box only (for text contrast at the seam)
     6. .hero-notifs      -> floating sale cards, scoped to the photo's own box
     7. .hero__inner      -> badge(hidden)/headline/subheadline/CTA, in normal flow; its padding-top
                             reserves exactly the photo's height (minus a small deliberate overlap) */
@media (max-width: 768px) {
  /* Black-to-blue base tracing the photo's own tonality (deep black at top, easing into
     the same navy family the photo is lit with), plus a lateral vignette so the section's
     far edges darken toward the frame and the eye stays centered on the composition. */
  .hero {
    background:
      linear-gradient(90deg, rgba(2,2,2,.55) 0%, transparent 15%, transparent 85%, rgba(2,2,2,.55) 100%),
      /* soft dark pool grounding the headline, so the text sits IN the composition
         rather than floating on a flat gradient */
      radial-gradient(ellipse 130% 32% at 50% 47%, rgba(2,4,9,.4), transparent 68%),
      /* asymmetric bloom slightly off-center, echoing the photo's own rim-light side
         rather than a perfectly centered (and therefore obviously CSS-made) glow */
      radial-gradient(ellipse 120% 42% at 42% 2%, rgba(26,77,143,.34) 0%, rgba(16,42,82,.17) 44%, transparent 72%),
      radial-gradient(ellipse 90% 38% at 88% 96%, rgba(26,77,143,.18), transparent 72%),
      linear-gradient(180deg, #020202 0%, #080808 24%, #0b1628 50%, #102a52 76%, #1a4d8f 100%);
  }

  /* .hero__bg reverts to the same full-bleed behavior as desktop (position:absolute; inset:0
     from the base rule, untouched here) so .hero__grid — its child — spans the entire section.
     Only the <img> itself is decoupled below with its own independent box. */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    background: none;
  }

  /* Same grid as desktop (spacing/opacity untouched) but the desktop mask — an ellipse
     tuned for a short/wide box — collapses to a thin band on mobile's tall box, fading
     the grid out before the CTA. Replace it with a mask that fades only the top/bottom
     few percent, so the grid reads edge-to-edge across the whole section. */
  .hero__grid {
    display: block;
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
  }

  /* The photo: an independent layer, sized by its own aspect-ratio (matches the 1100x1030
     mobile crop exactly, so cover never cuts into it and never leaves side bars), pinned to
     the top of the section. It does not stretch to fill .hero__bg and does not define the
     section's height — .hero__inner's padding-top does that job instead.
     transform/animation are reset to none: the desktop hover-zoom scale (1.015) plus the
     hover:none "breathe" keyframes were still inherited here, so the image kept growing
     past its aspect-ratio box over time — the actual cause of the text/photo overlap. */
  .hero__bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 1030;
    object-fit: cover;
    object-position: center top;
    transform: none;
    animation: none;
    /* Fades the photo's own sides and bottom to transparent, a long gradual falloff
       (four stops instead of a hard edge) so the dissolve reads as atmosphere rather
       than a ring — solid through the face/chest, gone well before the frame edge. */
    mask-image: radial-gradient(ellipse 84% 94% at 50% 2%, #000 38%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.32) 78%, transparent 98%);
    -webkit-mask-image: radial-gradient(ellipse 84% 94% at 50% 2%, #000 38%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.32) 78%, transparent 98%);
  }
  /* Ambient glow behind the specialist — three irregular, off-center, differently-shaped
     ellipses (not one centered circle) so the blur reads as a diffuse light source in
     the room rather than a halo pasted behind the subject. mix-blend-mode:screen lets it
     interact with the photo/background beneath instead of sitting as a flat opaque disc. */
  .hero__bg::before {
    content: "";
    position: absolute;
    top: -10vw; left: -10vw;
    width: 120vw;
    aspect-ratio: 1100 / 1030;
    z-index: -1;
    background:
      radial-gradient(ellipse 46% 34% at 40% 28%, rgba(79,139,255,.34), transparent 70%),
      radial-gradient(ellipse 34% 46% at 62% 42%, rgba(26,77,143,.26), transparent 72%),
      radial-gradient(ellipse 58% 26% at 48% 60%, rgba(16,42,82,.24), transparent 74%);
    filter: blur(46px);
    mix-blend-mode: screen;
  }
  /* Fades the photo into the background gradient below it: a wider, gentler curve
     (more mid-stops) plus a soft bottom-corner vignette so the seam reads as one
     continuous surface rather than a rectangle dropped on top of a color. The final
     tone (#0f1420-ish) is pulled from the same navy family as .hero's own gradient
     at that depth, so there's no hard color jump at the handoff. */
  .hero__overlay {
    inset: 0 auto auto 0;
    width: 100%;
    aspect-ratio: 1100 / 1030;
    background:
      radial-gradient(ellipse 85% 34% at 50% 100%, rgba(6,9,16,.5), transparent 72%),
      linear-gradient(180deg,
        rgba(5,7,13,.02) 0%,
        rgba(6,9,16,.1) 38%,
        rgba(7,11,19,.34) 60%,
        rgba(8,13,22,.68) 78%,
        rgba(10,15,24,.92) 93%,
        rgba(11,16,26,.98) 100%);
  }
  .hero-notifs {
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 1030;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .hero-notif--1 { top: 8%; }
  .hero-notif--2 { top: 68%; }

  /* Badge/rating pill is desktop-only on mobile: it ate space without earning it. */
  .eyebrow { display: none; }

  /* The content column reserves exactly the photo's rendered height — calc(100vw * 1030/1100)
     is the exact math of the photo's own aspect-ratio box (width 100vw), not an approximation,
     plus a small positive gap so content starts cleanly below the photo with zero overlap. */
  .hero__inner {
    position: relative;
    z-index: 2;
    padding-top: clamp(260px, calc(100vw * 1030 / 1100 + 4px), 700px);
    padding-bottom: 2px;
  }
  /* Typography polish only — weights/hierarchy from the base rules (w1 500 / w2 700 /
     w3 400) are untouched and already do the "bold vs regular" job; here we just tighten
     the cadence for mobile's narrower column and add a barely-there shadow for depth
     against the richer background, per the art-direction pass. Line-height only shrinks
     (never grows), so it can't push the CTA past the fold. */
  .hero__title {
    line-height: 1.06;
    letter-spacing: -0.026em;
    text-shadow: 0 3px 20px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    margin-bottom: 6px;
  }
  .hero__subtitle,
  .hero__highlight {
    line-height: 1.58;
    letter-spacing: 0.002em;
    text-shadow: 0 1px 12px rgba(0,0,0,.3);
  }
  .hero__subtitle { margin-bottom: 2px; color: #bcc5d8; }
  .hero__highlight { margin-bottom: 4px; color: #b6bfd2; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .section { padding: 86px 0; }
  .section__head { margin-bottom: 48px; }

  .announce p { font-size: .74rem; padding: 0 10px; }
  .header__inner { height: 68px; }
  .brand__logo { height: 32px; }
  .header__actions { gap: 10px; }
  .header__actions .btn--sm { padding: 9px 14px; font-size: .8rem; }

  .btn { padding: 13px 24px; font-size: .92rem; }
  .btn--lg { padding: 15px 28px; font-size: .98rem; }
  .btn--lg:not(.btn--block) { width: fit-content; }
  .hero__cta { width: 100%; }
  .hero__cta .btn:not(.btn--block) { width: fit-content; }
  .mobile-nav .btn { align-self: center; width: fit-content; }
  .hero__lead { max-width: 350px; }
  .hero-notif { max-width: 172px; padding: 8px 12px; }
  .hero-notif__label { font-size: .64rem; }
  .hero-notif__amount { font-size: .8rem; }

  .bonus-grid .bonus-card { flex-basis: 100%; }

  .testi-carousel__arrow { display: none; }
  .testi-carousel__track { padding: 20px 0; }
  .testi-slide { width: 76vw; max-width: 320px; height: min(64vw, 420px); margin: 0 8px; }

  .showcase__panel { min-height: 260px; }
  .showcase__orbit { width: 190px; height: 190px; }
  .showcase__node--2, .showcase__node--3 { display: none; }
  .showcase__cards { grid-template-columns: 1fr; margin: 22px 0 0; }

  .icon-row { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; margin-top: 48px; padding-top: 40px; }

  .offer-price__highlight { padding: 24px 18px 22px; }
  .offer-price__value { font-size: 3rem; }
  .offer-meta { flex-direction: column; align-items: center; gap: 8px; }

  .footer__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .header__actions .btn--sm { display: none; }
}