/* ==========================================================================
   IPTV Hero — website styles

   Section order:
     1. Tokens
     2. Base / reset
     3. Shared primitives (container, section, eyebrow, card)
     4. Navigation
     5. Hero
     6. Features
     7. Screenshots
     8. Pricing
     9. Footer
    10. Privacy and support pages
    11. Breakpoints
    12. Motion preferences

   Color rule: --brand (#8FBF3F) for ALL text, icons and borders.
   --brand-deep (#568203) only as a gradient far-end, or as a fill behind
   near-black text. #568203 measures 4.34:1 on --bg-primary and fails
   WCAG AA for normal text; #8FBF3F measures 9.17:1. See docs/style-guide.md.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */

:root {
  /* Surfaces — from getlume.org, unchanged */
  --bg-primary:    #09090f;
  --bg-secondary:  #0d0d18;
  --bg-card:       #111120;
  --border:        rgba(255,255,255,.06);
  --border-hover:  rgba(255,255,255,.12);
  --text-primary:  #ffffff;
  --text-secondary:rgba(255,255,255,.6);
  --text-muted:    rgba(255,255,255,.35);

  /* Brand — IPTV Hero avocado, replacing Lume's --lume-purple/--lume-pink */
  --brand:         #8FBF3F;             /* ALL text, icons, borders, thin strokes */
  --brand-deep:    #568203;             /* gradient far-end + fills behind dark text ONLY */
  --brand-glow:    rgba(143,191,63,.28);/* hero bloom, card hover glow */

  /* Easing — from getlume.org, unchanged */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-spring: cubic-bezier(.32,.72,0,1);
}

/* 2. Base / reset ------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* clears the fixed nav island on anchor jumps */
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text-primary);
  background: var(--bg-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", system-ui, sans-serif;
}

body.menu-open {
  overflow: hidden;
}

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

button {
  font: inherit;
}

img,
svg {
  display: block;
}

/* 3. Shared primitives -------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  color: var(--bg-primary);
  background: var(--brand);
  border-radius: 999px;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.container {
  width: min(1120px, 100% - 48px);
  margin-inline: auto;
}

.section {
  padding: 140px 0;
  position: relative;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.section-intro {
  max-width: 56ch;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The one card style — used by both the feature grid and the pricing grid. */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  transition: border-color .4s var(--ease-spring),
              transform .4s var(--ease-spring);
}

.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* 4. Navigation --------------------------------------------------------- */

.nav-island {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1040px, calc(100% - 32px));
  min-height: 58px;
  padding: 8px 10px 8px 14px;
  background: rgba(17,17,32,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.06),
              0 20px 50px -20px rgba(0,0,0,.8);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transform: translateX(-50%);
  transition: background-color .3s var(--ease-spring),
              padding .3s var(--ease-spring);
}

/* Toggled from main.js past ~24px of scroll. */
.nav-island.is-scrolled {
  padding-top: 4px;
  padding-bottom: 4px;
  background: rgba(13,13,24,.8);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.brand-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
}

.nav-links {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 26px;
  margin: 0;
  transform: translateX(-50%);
}

.nav-links a {
  color: var(--text-secondary);
  font-size: .9375rem;
  transition: color .3s var(--ease-spring);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  color: var(--text-primary);
}

/* Scroll-spy state, set by the IntersectionObserver in main.js. */
.nav-links a[aria-current="page"] {
  color: var(--brand);
}

.nav-download {
  padding: 10px 16px;
  color: var(--bg-primary);
  background: var(--brand);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
}

.menu-toggle {
  display: none; /* shown under 900px — see §11 */
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.menu-toggle svg {
  margin: auto;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 110px 32px 48px;
  background: rgba(9,9,15,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu nav {
  display: grid;
  gap: 24px;
  text-align: center;
}

.mobile-menu a {
  color: var(--text-primary);
  font-size: clamp(1.75rem, 8vw, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

.mobile-menu a:last-child {
  color: var(--brand);
}

/* 5. Hero --------------------------------------------------------------- */

.hero {
  padding: 180px 0 100px;
  overflow: hidden;
  isolation: isolate;
}

.hero-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 52% at 50% 58%,
              rgba(143,191,63,.22) 0, rgba(86,130,3,.10) 40%, transparent 72%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 13px;
  color: var(--text-secondary);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .875rem;
}

.hero-eyebrow i {
  width: 6px;
  height: 6px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--brand-glow);
}

.hero h1 {
  max-width: 850px;
  margin: 0 auto;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.hero h1 span {
  display: block;
}

/* `color` is declared first as the fallback: where background-clip:text is
   unsupported the text stays avocado rather than going transparent. */
.hero h1 .gradient-text {
  color: var(--brand);
  background: linear-gradient(120deg, var(--brand), var(--brand-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lede {
  max-width: 52ch;
  margin: 25px auto 0;
  color: var(--text-secondary);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.cta-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 650;
}

.btn-primary {
  color: var(--bg-primary);
  background: var(--brand);
}

/* The App Store control is a non-anchor div while the app is pre-release. */
.btn.is-disabled {
  cursor: default;
}

.coming-soon {
  padding: 3px 7px;
  color: var(--brand);
  background: var(--bg-primary);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
}

.btn-secondary {
  color: var(--text-primary);
  background: rgba(255,255,255,.04);
  border-color: var(--border-hover);
}

.download-note {
  width: 100%;
  margin: 1px 0 0;
  color: var(--text-muted);
  font-size: .875rem;
}

/* 6. Features ----------------------------------------------------------- */

.features {
  background: var(--bg-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 52px;
}

.feature-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 20px;
  color: var(--brand);
  background: rgba(143,191,63,.10);
  border: 1px solid rgba(143,191,63,.22);
  border-radius: 13px;
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

.card h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.card p {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.built-with {
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.8;
  text-align: center;
}

/* 7. Screenshots -------------------------------------------------------- */

.screenshots {
  overflow: hidden;
}

.tabs {
  margin-top: 48px;
}

.tablist {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.tab {
  padding: 9px 16px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--bg-primary);
  background: var(--brand);
  font-weight: 700;
}

.tab-panel {
  margin-top: 25px;
}

.tab-panel[hidden] {
  display: none;
}

.screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 18px;
}

/* Real captures ---------------------------------------------------------
   Sizes below are the *display* sizes; each file is stored at roughly 2–3x
   that so it stays sharp on retina without shipping more pixels than any
   viewport can use. Every <img> carries width/height so the browser reserves
   the right box before the file arrives — without them the grid reflows as
   each screenshot lands. */
.shot {
  display: block;
  width: 100%;
  height: auto;
}

/* No border, radius or shadow here on purpose: the Mac files are window
   captures that already carry their own rounded corners, drop shadow and
   transparent margin. Framing them again would double the chrome. */
.shot-mac {
  max-width: 500px;
  margin-inline: auto;
}

/* The phone captures are edge-to-edge screen grabs with square corners, so
   they *do* need a radius to read as a device screen. */
.shot-phone {
  width: min(100%, 220px);
  margin-inline: auto;
  border-radius: 14px;
}

.screens-grid-phone {
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
}

/* Portrait tablet captures, same edge-to-edge screen grabs as the phone, so
   the same reasoning about a radius applies. Held narrower than a Mac slot:
   at the full 361px column a portrait iPad runs over 500px tall and swamps
   the section. */
.shot-ipad {
  width: min(100%, 300px);
  margin-inline: auto;
  border-radius: 12px;
}

.screens-grid-ipad {
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
}

/* 8. Pricing ------------------------------------------------------------ */

.pricing {
  background: var(--bg-secondary);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.price-card {
  position: relative;
  min-height: 100%;
}

.price-card.featured {
  background: linear-gradient(180deg, rgba(143,191,63,.10),
              rgba(86,130,3,.05) 45%, rgba(255,255,255,.012));
  border-color: rgba(143,191,63,.28);
}

.recommended {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 5px 9px;
  color: var(--bg-primary);
  background: var(--brand);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plan-name {
  color: var(--brand);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price {
  margin: 12px 0 2px;
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: -.04em;
}

.price span {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

.price-subline,
.plan-tagline {
  color: var(--text-secondary);
  font-size: .9375rem;
  line-height: 1.5;
}

.plan-tagline {
  margin: 22px 0 14px;
  font-style: italic;
}

.plan-features {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0 0 26px;
  list-style: none;
}

.plan-features li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 9px;
  color: var(--text-secondary);
  font-size: .9375rem;
  line-height: 1.5;
}

.plan-features li::before {
  content: "✓";
  color: var(--brand);
  font-weight: 700;
}

.price-card .btn {
  width: 100%;
  margin-top: auto;
}

.pricing-note {
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.6;
  text-align: center;
}

/* 9. Footer ------------------------------------------------------------- */

.site-footer {
  padding: 70px 0 30px;
  border-top: 1px solid var(--border);
}

/* Brand block, then Product and Legal. Keep the column count matching the
   number of children in the footer markup. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 36px;
}

.footer-brand-text {
  max-width: 27ch;
  margin: 15px 0 0;
  color: var(--text-secondary);
  font-size: .9375rem;
  line-height: 1.6;
}

.footer-heading {
  margin: 4px 0 14px;
  color: var(--text-primary);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: .9375rem;
}

.footer-links a:hover {
  color: var(--brand);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding-top: 24px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  font-size: .8125rem;
}

.disclaimer {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.65;
}

/* 10. Privacy and support pages ---------------------------------------- */

.privacy-page {
  padding: 165px 0 100px;
}

.prose {
  max-width: 72ch;
}

.prose h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -.03em;
}

.last-updated {
  margin: 15px 0 46px;
  color: var(--text-muted);
  font-size: .9375rem;
}

.prose h2 {
  margin: 42px 0 11px;
  color: var(--text-primary);
  font-size: 1.35rem;
  letter-spacing: -.015em;
}

.prose p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-intro {
  margin-top: 20px !important;
  font-size: 1.0625rem;
}

.faq {
  margin-top: 54px;
}

.faq > h2 {
  margin-top: 0;
}

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.faq-item {
  padding: 0 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.faq-item summary {
  padding: 19px 28px 19px 0;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
}

.faq-item p {
  padding: 0 28px 20px 0;
}

/* 11. Breakpoints ------------------------------------------------------- */

/* Nav collapses to the hamburger. main.js also closes the menu on resize
   back above this width — keep the two numbers in sync. */
@media (max-width: 899px) {
  .nav-links,
  .nav-download {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

@media (max-width: 820px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(1120px, 100% - 32px);
  }

  .section {
    padding: 88px 0;
  }

  .hero {
    padding-top: 145px;
  }

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

  /* Single column here too, so the landscape shot's `grid-column: 1 / -1`
     still resolves and the two portraits stack instead of shrinking. */
  .screens-grid-phone,
  .screens-grid-ipad {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, each screenshot gets the full column, so the portraits can
     afford to be larger than they are in the two- and three-up desktop rows.
     The iPad stays under ~360px: any wider and a portrait tablet needs more
     than a phone screen's height to show one capture. */
  .shot-phone {
    width: min(100%, 260px);
  }

  .shot-ipad {
    width: min(100%, 360px);
  }
}

@media (max-width: 639px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-grid > :first-child {
    grid-column: auto;
  }

  .footer-bottom {
    display: block;
    margin-top: 40px;
  }

  .footer-bottom p + p {
    margin-top: 8px;
  }

  .recommended {
    position: static;
    display: inline-block;
    margin-bottom: 16px;
  }
}

/* 12. Motion preferences ------------------------------------------------ */

/* Reveal animations are gated on BOTH `no-preference` and the `.js` class,
   so content is never left invisible when JS is off or motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out),
                transform .7s var(--ease-out);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}