/* ============================================================
   Landing — exclusivo da home pública
   ============================================================ */

/* Estados visuais (controlados via JS) */
[data-fade-up] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-fade-up].is-visible { opacity: 1; transform: translateY(0); }
[data-fade-up].is-visible > * { animation: fadeUpStagger .6s ease both; animation-delay: calc(var(--delay, 0) * 80ms); }
@keyframes fadeUpStagger { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Layout shell
   ============================================================ */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing__main { flex: 1; }

/* ============================================================
   Navbar
   ============================================================ */
.landing-navbar {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.landing-navbar.is-scrolled {
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
[data-theme='light'] .landing-navbar.is-scrolled { background: rgba(255, 255, 255, 0.8); }
.landing-navbar__inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.landing-navbar__brand { display: flex; align-items: center; }
.landing-navbar__logo { height: 56px; width: auto; display: block; }

.landing-navbar__nav { display: none; align-items: center; gap: var(--space-5); }
.landing-navbar__link { color: var(--fg-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.landing-navbar__link:hover { color: var(--fg); text-decoration: none; }

.landing-navbar__toggle {
  background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.landing-navbar__toggle span { display: block; width: 22px; height: 2px; background: var(--fg); transition: transform .2s, opacity .2s; }
.landing-navbar__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.landing-navbar__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.landing-navbar__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 900px) {
  .landing-navbar__toggle { display: none; }
  .landing-navbar__nav { display: flex; }
}
@media (max-width: 899px) {
  .landing-navbar__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    padding: var(--space-4); background: var(--bg-elevated);
    border-top: 1px solid var(--border);
  }
  .landing-navbar__nav.is-open { display: flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100vh, 740px);
  display: flex; align-items: center;
  background: var(--bg);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-5);
  max-width: 760px;
}
.hero__pill { width: max-content; }
.hero__title {
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  margin: 0;
}
.hero__subtitle { color: var(--fg-muted); font-size: var(--font-size-md); max-width: 56ch; }
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

.hero__shape { position: absolute; z-index: 1; will-change: transform; }
.hero__shape--1 {
  right: 6%; top: 14%; width: 180px; height: 180px;
  background: var(--gradient-accent); border-radius: var(--radius-2xl);
  transform: rotate(12deg);
  animation: rotate-slow 18s linear infinite;
}
.hero__shape--2 {
  right: 28%; bottom: 14%; width: 120px; height: 120px;
  background: var(--mtg-orange-500); border-radius: var(--radius-2xl);
  transform: rotate(-18deg);
  animation: rotate-slower 28s linear infinite reverse;
}
.hero__shape--3 {
  right: 18%; bottom: 36%; width: 64px; height: 64px;
  background: var(--mtg-mint-500); border-radius: 50%;
  animation: pulse 4s ease-in-out infinite;
}
@keyframes rotate-slow { to { transform: rotate(372deg); } }
@keyframes rotate-slower { to { transform: rotate(-378deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.hero__grain {
  position: absolute; inset: 0; z-index: 1; opacity: .04; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, var(--fg) 8px 9px);
}

.hero__title [data-letter] { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.hero__title [data-letter].is-revealed { opacity: 1; transform: translateY(0); }

@media (min-width: 900px) {
  .hero__title { font-size: var(--font-size-3xl); }
  .hero__shape--1 { width: 260px; height: 260px; right: 8%; top: 18%; }
  .hero__shape--2 { width: 160px; height: 160px; }
  .hero__shape--3 { width: 88px; height: 88px; }
}

/* ============================================================
   Features
   ============================================================ */
.features { padding: var(--space-20) var(--space-4); background: var(--bg); }
.features__inner { max-width: 1200px; margin: 0 auto; }
.features__header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-12); max-width: 720px; }
.features__header .badge { width: max-content; }
.features__title {
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}
.features__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }

.feature-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-primary);
  border-color: var(--border-strong);
}
.feature-card__icon {
  color: var(--mtg-orange-500);
  margin-bottom: var(--space-3);
}
.feature-card__title {
  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}
.feature-card__body { color: var(--fg-muted); margin: 0; }

/* ============================================================
   Vestibulares (marquee)
   ============================================================ */
.vestibulares { padding: var(--space-20) var(--space-4); background: var(--bg-elevated); }
.vestibulares__inner { max-width: 1200px; margin: 0 auto; }
.vestibulares__header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-10); max-width: 720px; }
.vestibulares__header .badge { width: max-content; }
.vestibulares__title {
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}
.vestibulares__marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.vestibulares__track {
  display: flex; gap: var(--space-6); list-style: none; padding: 0; margin: 0;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.vestibulares__track:hover { animation-play-state: paused; }
.vestibulares__item {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-overlay);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  white-space: nowrap;
}
.vestibulares__item-acronym { font-weight: var(--font-weight-bold); color: var(--fg); }
.vestibulares__item-name { color: var(--fg-muted); font-size: var(--font-size-sm); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Waitlist section + card
   ============================================================ */
.waitlist {
  padding: var(--space-20) var(--space-4);
  background: var(--bg);
  position: relative; isolation: isolate;
}
.waitlist::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(238, 43, 193, 0.08) 0%, transparent 60%);
}
.waitlist-card {
  max-width: 560px; margin: 0 auto;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}
.waitlist-card__header { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.waitlist-card__title { font-size: var(--font-size-xl); letter-spacing: var(--letter-spacing-tight); }
.waitlist-card__subtitle { color: var(--fg-muted); margin: 0; }

.checkbox-group, .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.checkbox-group__item, .radio-group__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.checkbox-group__item:has(input:checked), .radio-group__item:has(input:checked) {
  border-color: var(--color-primary); background: rgba(255, 134, 23, 0.08);
}
@media (max-width: 600px) {
  .checkbox-group, .radio-group { grid-template-columns: 1fr; }
}

[data-referral-other] { display: none; }
[data-referral-other].is-visible { display: flex; }
.no-js [data-referral-other] { display: flex; }

.waitlist-card--success { text-align: center; }
.waitlist-card__icon {
  width: 80px; height: 80px; margin: 0 auto var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gradient-secondary);
  color: var(--neutral-950);
}

.is-submitting [data-waitlist-submit] { opacity: .6; cursor: wait; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: var(--space-20) var(--space-4); background: var(--bg-elevated); }
.faq__inner { max-width: 760px; margin: 0 auto; }
.faq__header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.faq__header .badge { width: max-content; }
.faq__title { font-size: var(--font-size-2xl); letter-spacing: var(--letter-spacing-tight); }
.faq__list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg);
  transition: border-color .15s;
}
.faq__item[open] { border-color: var(--border-strong); }
.faq__question {
  cursor: pointer; padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-semibold); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '+'; font-size: var(--font-size-xl); color: var(--fg-muted);
  transition: transform .2s;
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }
.faq__answer { padding: 0 var(--space-5) var(--space-5); margin: 0; color: var(--fg-muted); }

/* ============================================================
   Footer
   ============================================================ */
.landing-footer { background: var(--neutral-950); color: var(--neutral-200); padding: var(--space-12) var(--space-4) var(--space-6); }
[data-theme='light'] .landing-footer { background: var(--neutral-900); }
.landing-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
}
@media (min-width: 700px) { .landing-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.landing-footer__logo { height: 32px; width: auto; }
.landing-footer__tagline { color: var(--neutral-400); margin: var(--space-3) 0 0; max-width: 32ch; }
.landing-footer__heading { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--neutral-400); margin: 0 0 var(--space-3); }
.landing-footer__column { display: flex; flex-direction: column; gap: var(--space-2); }
.landing-footer__column a { color: var(--neutral-200); }
.landing-footer__column a:hover { color: #fff; }
.landing-footer__copyright {
  max-width: 1200px; margin: var(--space-8) auto 0;
  padding-top: var(--space-6); border-top: 1px solid var(--neutral-800);
  color: var(--neutral-400); font-size: var(--font-size-sm);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__shape--1, .hero__shape--2, .hero__shape--3 { animation: none; }
  .vestibulares__track { animation: none; transform: none; }
  [data-fade-up], [data-fade-up].is-visible > * { animation: none; transform: none; opacity: 1; }
  .hero__title [data-letter] { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}