/* ============================================
   Brava Landing Page
   Mobile-first. Conversion-focused. Same design system.
   ============================================ */

@import url('tokens.css');

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-body-size);
  -webkit-text-size-adjust: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Focus --- */
:focus-visible {
  outline: var(--border-outline-volt);
  outline-offset: var(--space-xs);
}

/* --- Base --- */
body {
  background-color: var(--color-base);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 3.5rem;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   Top Navigation
   ============================================ */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-surface);
}

.topnav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topnav__brand {
  font-family: var(--brand-font);
  font-weight: var(--brand-weight);
  font-size: 1.35rem;
  text-transform: var(--brand-transform);
  letter-spacing: var(--brand-tracking);
  color: var(--color-warm-white);
}

.topnav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.topnav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-mid-gray);
  transition: color 0.2s ease;
}

.topnav__link:hover {
  color: var(--color-warm-white);
}

.topnav__cta {
  color: var(--color-base) !important;
  background-color: var(--color-volt);
  padding: 0.5rem 1.25rem;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.topnav__cta:hover {
  background-color: #d4ff33;
  transform: translateY(-1px);
}

.topnav__cta:active {
  transform: translateY(0);
}

.topnav__link--active {
  color: var(--color-warm-white);
}

/* ============================================
   Pricing Hero
   ============================================ */
.pricing-hero {
  text-align: center;
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
}

.pricing-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: var(--text-hero-eyebrow-weight);
  font-size: var(--text-hero-eyebrow-size);
  text-transform: var(--text-hero-eyebrow-transform);
  letter-spacing: var(--text-hero-eyebrow-tracking);
  color: var(--color-volt);
  margin-bottom: var(--space-md);
}

.pricing-hero__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 15vw, 8rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-warm-white);
  margin-bottom: var(--space-sm);
}

.pricing-hero__subtitle {
  font-family: var(--font-body);
  font-weight: var(--text-hero-sub-weight);
  font-size: var(--text-hero-sub-size);
  color: var(--color-mid-gray);
  line-height: var(--text-hero-sub-line-height);
  margin-bottom: var(--space-xl);
}

.pricing-hero__ctas {
  display: flex;
  justify-content: center;
}

.pricing-hero__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--text-cta-btn-weight);
  font-size: var(--text-cta-btn-size);
  text-transform: var(--text-cta-btn-transform);
  letter-spacing: var(--text-cta-btn-tracking);
  color: var(--color-base);
  background-color: var(--color-volt);
  padding: var(--btn-padding);
  border: none;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.pricing-hero__cta:hover {
  background-color: var(--color-volt-hover);
  transform: translateY(-1px);
}

.pricing-hero__cta:active {
  transform: translateY(0);
}

/* ============================================
   Inclusions
   ============================================ */
.inclusions {
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--max-width-content);
  margin: 0 auto;
  border-top: var(--border-divider-surface);
}

.inclusions__heading {
  font-family: var(--font-display);
  font-weight: var(--text-showcase-heading-weight);
  font-size: var(--text-showcase-heading-size);
  text-transform: var(--text-showcase-heading-transform);
  line-height: var(--text-showcase-heading-line-height);
  color: var(--color-warm-white);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.inclusions__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inclusions__item {
  font-size: var(--text-showcase-body-size);
  line-height: var(--text-showcase-body-line-height);
  color: var(--color-warm-white);
  padding-left: 1.5rem;
  position: relative;
}

.inclusions__item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-volt);
  font-weight: 700;
}

/* ============================================
   Value Context
   ============================================ */
.value-context {
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.value-context__body {
  font-size: var(--text-showcase-body-size);
  line-height: var(--text-showcase-body-line-height);
  color: var(--color-mid-gray);
  text-align: center;
}

/* ============================================
   Add-ons
   ============================================ */
.addons {
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: var(--border-divider-surface);
}

.addons__heading {
  font-family: var(--font-display);
  font-weight: var(--text-process-heading-weight);
  font-size: var(--text-process-heading-size);
  text-transform: var(--text-process-heading-transform);
  text-align: center;
  color: var(--color-warm-white);
  margin-bottom: var(--space-2xl);
}

.addons__grid {
  display: grid;
  gap: var(--space-xl);
}

.addons__item {
  background-color: var(--color-surface);
  padding: var(--space-lg);
}

.addons__name {
  font-family: var(--font-display);
  font-weight: var(--text-process-title-weight);
  font-size: var(--text-process-title-size);
  text-transform: var(--text-process-title-transform);
  letter-spacing: var(--text-process-title-tracking);
  color: var(--color-warm-white);
  margin-bottom: var(--space-xs);
}

.addons__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-proof-stat-size);
  color: var(--color-volt);
  line-height: var(--text-proof-stat-line-height);
  margin-bottom: var(--space-sm);
}

.addons__desc {
  font-size: var(--text-process-desc-size);
  line-height: var(--text-process-desc-line-height);
  color: var(--color-mid-gray);
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  overflow: hidden;
  text-align: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Heavy dark overlay — text must read cleanly */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-gradient-landing);
  z-index: var(--z-overlay);
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--max-width-content);
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-weight: var(--text-hero-eyebrow-weight);
  font-size: var(--text-hero-eyebrow-size);
  text-transform: var(--text-hero-eyebrow-transform);
  letter-spacing: var(--text-hero-eyebrow-tracking);
  color: var(--color-volt);
  margin-bottom: var(--space-md);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: var(--text-hero-headline-weight);
  font-size: var(--text-hero-headline-size);
  text-transform: var(--text-hero-headline-transform);
  line-height: var(--text-hero-headline-line-height);
  letter-spacing: var(--text-hero-headline-tracking);
  color: var(--color-warm-white);
  margin-bottom: var(--space-lg);
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: var(--text-hero-sub-weight);
  font-size: var(--text-hero-sub-size);
  color: var(--color-mid-gray);
  line-height: var(--text-hero-sub-line-height);
  margin-bottom: var(--space-xl);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.hero__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--text-cta-btn-weight);
  font-size: var(--text-cta-btn-size);
  text-transform: var(--text-cta-btn-transform);
  letter-spacing: var(--text-cta-btn-tracking);
  color: var(--color-base);
  background-color: var(--color-volt);
  padding: var(--btn-padding);
  border: none;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.hero__cta:hover {
  background-color: var(--color-volt-hover);
  transform: translateY(-1px);
}

.hero__cta:active {
  transform: translateY(0);
}

/* Secondary button variant — outline style */
.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--color-volt);
  color: var(--color-volt) !important;
}

.btn-secondary:hover {
  background-color: rgba(200, 255, 0, 0.08) !important;
}

.hero__cta-secondary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-cta-btn-size);
  color: var(--color-mid-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-base);
}

.hero__cta-secondary:hover {
  color: var(--color-warm-white);
}

/* ============================================
   Proof Strip
   ============================================ */
.proof {
  padding: var(--space-2xl) var(--space-md);
  border-top: var(--border-divider-surface);
  border-bottom: var(--border-divider-surface);
}

.proof__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-xl);
}

.proof__item {
  text-align: center;
}

.proof__stat {
  font-family: var(--font-display);
  font-weight: var(--text-proof-stat-weight);
  font-size: var(--text-proof-stat-size);
  text-transform: var(--text-proof-stat-transform);
  color: var(--color-warm-white);
  line-height: var(--text-proof-stat-line-height);
  margin-bottom: var(--space-xs);
}

.proof__unit {
  font-weight: var(--text-proof-unit-weight);
  font-size: var(--text-proof-unit-size);
  color: var(--color-volt);
  letter-spacing: var(--text-proof-unit-tracking);
}

.proof__label {
  font-size: var(--text-proof-label-size);
  color: var(--color-mid-gray);
  line-height: var(--text-proof-label-line-height);
  max-width: var(--max-width-proof-label);
  margin: 0 auto;
}

/* ============================================
   Showcase (Profile Mockup)
   ============================================ */
.showcase {
  padding: var(--space-3xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--showcase-gradient);
}

.showcase__heading {
  font-family: var(--font-display);
  font-weight: var(--text-showcase-heading-weight);
  font-size: var(--text-showcase-heading-size);
  text-transform: var(--text-showcase-heading-transform);
  line-height: var(--text-showcase-heading-line-height);
  color: var(--color-warm-white);
  margin-bottom: var(--space-lg);
}

.showcase__body {
  font-size: var(--text-showcase-body-size);
  line-height: var(--text-showcase-body-line-height);
  color: var(--color-mid-gray);
  margin-bottom: var(--space-md);
}

.showcase__body em {
  color: var(--color-warm-white);
  font-style: normal;
  font-weight: 500;
}

.showcase__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--text-showcase-cta-weight);
  font-size: var(--text-showcase-cta-size);
  text-transform: var(--text-showcase-cta-transform);
  letter-spacing: var(--text-showcase-cta-tracking);
  color: var(--color-volt);
  margin-top: var(--space-md);
  transition: color var(--transition-base);
}

.showcase__cta:hover {
  color: var(--color-volt-hover);
}

.showcase__device {
  display: flex;
  justify-content: center;
}

.showcase__device img {
  max-width: var(--showcase-device-max-width);
  width: 100%;
  height: auto;
}

/* ============================================
   How It Works
   ============================================ */
.process {
  padding: var(--space-3xl) var(--space-md);
  border-top: var(--border-divider-surface);
}

.process__heading {
  font-family: var(--font-display);
  font-weight: var(--text-process-heading-weight);
  font-size: var(--text-process-heading-size);
  text-transform: var(--text-process-heading-transform);
  text-align: center;
  color: var(--color-warm-white);
  margin-bottom: var(--space-2xl);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.process__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-xl);
}

.process__step {
  padding: var(--space-lg);
  border-left: var(--border-accent-surface);
}

.process__number {
  font-family: var(--font-display);
  font-weight: var(--text-process-number-weight);
  font-size: var(--text-process-number-size);
  color: var(--color-volt);
  line-height: var(--text-process-number-line-height);
  margin-bottom: var(--space-sm);
}

.process__title {
  font-family: var(--font-display);
  font-weight: var(--text-process-title-weight);
  font-size: var(--text-process-title-size);
  text-transform: var(--text-process-title-transform);
  letter-spacing: var(--text-process-title-tracking);
  color: var(--color-warm-white);
  margin-bottom: var(--space-sm);
}

.process__desc {
  font-size: var(--text-process-desc-size);
  line-height: var(--text-process-desc-line-height);
  color: var(--color-mid-gray);
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
  padding: var(--space-3xl) var(--space-md);
  text-align: center;
  border-top: var(--border-divider-surface);
}

.cta-section__heading {
  font-family: var(--font-display);
  font-weight: var(--text-cta-heading-weight);
  font-size: var(--text-cta-heading-size);
  text-transform: var(--text-cta-heading-transform);
  line-height: var(--text-cta-heading-line-height);
  color: var(--color-warm-white);
  max-width: var(--max-width-content);
  margin: 0 auto var(--space-lg);
}

.cta-section__body {
  font-size: var(--text-cta-body-size);
  line-height: var(--text-cta-body-line-height);
  color: var(--color-mid-gray);
  max-width: var(--max-width-cta-body);
  margin: 0 auto var(--space-xl);
}

.cta-section__btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--text-cta-btn-weight);
  font-size: var(--text-cta-btn-size-lg);
  text-transform: var(--text-cta-btn-transform);
  letter-spacing: var(--text-cta-btn-tracking);
  color: var(--color-base);
  background-color: var(--color-volt);
  padding: var(--btn-padding-lg);
  border: none;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.cta-section__btn:hover {
  background-color: var(--color-volt-hover);
  transform: translateY(-1px);
}

.cta-section__btn:active {
  transform: translateY(0);
}

.cta-section__footnote {
  font-size: var(--text-cta-footnote-size);
  color: var(--color-mid-gray);
  margin-top: var(--space-lg);
}

.cta-section__footnote a {
  color: var(--color-cyan);
  text-decoration: none;
}

.cta-section__footnote a:hover {
  text-decoration: underline;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  text-align: center;
  border-top: var(--border-divider-surface);
}

.footer__mark {
  margin-bottom: var(--space-sm);
}

.footer__wordmark {
  display: block;
  font-family: var(--brand-font);
  font-weight: var(--brand-weight);
  font-size: 1.35rem;
  text-transform: var(--brand-transform);
  letter-spacing: var(--brand-tracking);
  color: var(--color-mid-gray);
  opacity: 0.6;
}

.footer__tagline {
  font-family: var(--brand-font);
  font-weight: var(--brand-tagline-weight);
  font-size: var(--brand-tagline-size);
  text-transform: var(--brand-transform);
  letter-spacing: var(--brand-tagline-tracking);
  color: var(--color-mid-gray);
  opacity: 0.6;
}

/* ============================================
   Small phones (375px)
   ============================================ */
@media (max-width: 390px) {
  .hero__headline {
    font-size: 2rem;
  }

  .proof__stat {
    font-size: var(--text-proof-stat-size-small);
  }

  .hero__cta,
  .cta-section__btn {
    padding: var(--btn-padding-sm);
    font-size: var(--text-cta-btn-size-sm);
  }

  .pricing-hero__price {
    font-size: 3.5rem;
  }

  .pricing-hero__cta {
    padding: var(--btn-padding-sm);
    font-size: var(--text-cta-btn-size-sm);
  }
}

/* ============================================
   Tablet (768px+)
   ============================================ */
@media (min-width: 768px) {
  .hero__ctas {
    flex-direction: row;
    justify-content: center;
  }

  .proof__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
  }

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

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

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

  .process__step {
    border-left: none;
    border-top: var(--border-accent-surface);
    padding: var(--space-lg) 0 0;
  }
}

/* ============================================
   Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  .hero {
    min-height: 85vh;
  }

  .showcase__device img {
    max-width: var(--showcase-device-max-width-desktop);
  }
}

/* ============================================
   Strike Ripple — Button Tap Feedback
   ============================================ */
.btn-tap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-tap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  padding-bottom: 40%;
  border-radius: var(--radius-full);
  background: var(--btn-ripple-color);
  transform: translate(-50%, -50%) scale(var(--btn-ripple-start-scale));
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.btn-tap.is-tapped {
  animation: btn-compress var(--btn-tap-duration) ease forwards;
}

.btn-tap.is-tapped::after {
  animation: strike-ripple var(--btn-tap-duration) ease forwards;
}

/* ============================================
   Prevent Widow Words
   ============================================ */
.no-widow {
  display: inline;
  white-space: nowrap;
}