/* ==========================================================================
   Fluxer — landing page
   Cinematic control room: near-black canvas, single electric-blue accent,
   glass used sparingly (navbar, hero device frame, floating chip),
   hairline-bordered solid cards elsewhere.
   ========================================================================== */

:root {
  /* Canvas / surfaces */
  --canvas: #0b0b0d;
  --canvas-2: #0d0d10;
  --surface: #131417;
  --surface-2: #16181c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --ink: #f5f6f8;
  --muted: #9aa3af;
  --faint: #6b7280;

  /* Accent — single electric blue, used with restraint */
  --accent: #3d6dfb;
  --accent-bright: #6c93ff;
  --accent-deep: #2a52d8;
  --accent-deep-hover: #2245bd;
  --accent-glow: rgba(61, 109, 251, 0.38);
  --accent-glow-soft: rgba(61, 109, 251, 0.14);
  --accent-glow-faint: rgba(61, 109, 251, 0.07);

  /* Geometry / motion */
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.16, 0.8, 0.3, 1);
  --dur-fast: 200ms;
  --dur: 280ms;
  --dur-slow: 480ms;

  --nav-h: 72px;
  --container: 1240px;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--canvas);
  background-image: url("../img/textures/grain.png");
  background-repeat: repeat;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
    Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font: inherit;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 640px) {
  .container {
    padding-inline: 1.25rem;
  }
}

section {
  position: relative;
}

.section-pad {
  padding-block: clamp(3.25rem, 6vw, 6.5rem);
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 0.9rem;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
}

.section-head.center .eyebrow::before {
  display: none;
}

h2.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.section-sub {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn .icon {
  font-size: 1.05em;
}

.btn-primary {
  background: var(--accent-deep);
  color: #fdfdfe;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-deep-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px var(--accent-glow);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--accent);
  background: var(--accent-glow-faint);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1.05rem 2.15rem;
  font-size: 1.05rem;
}

.btn-disabled,
.btn-disabled:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* Navbar — glass (load-bearing use #1)                                    */
/* ---------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(11, 11, 13, 0.6);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.nav.is-scrolled {
  background: rgba(11, 11, 13, 0.82);
  border-bottom-color: var(--border-strong);
}

.nav .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--accent), var(--accent-deep));
  box-shadow: 0 4px 16px -4px var(--accent-glow);
  flex-shrink: 0;
}

.brand-mark .icon {
  font-size: 16px;
  stroke: none;
  fill: #fff;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.94rem;
  color: var(--muted);
  position: relative;
  padding: 0.3rem 0;
  transition: color var(--dur-fast) var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-links-cta {
  display: none;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle .icon {
  font-size: 20px;
}

.nav-toggle .icon-close {
  display: none;
}

.nav.is-open .nav-toggle .icon-menu {
  display: none;
}

.nav.is-open .nav-toggle .icon-close {
  display: block;
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.25rem 1.25rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  .nav.is-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links-cta {
    display: block;
    margin-top: 0.85rem;
  }

  .nav-links-cta a {
    /* .nav-links a sets color: var(--muted), and as class+type (0,1,1) it
       outranks .btn-primary's plain-class color (0,1,0) — so the CTA
       inherited the muted gray instead of the button's own white. Restore
       it explicitly, matching the desktop button exactly (~6.3:1). */
    color: #fdfdfe;
    border-bottom: none;
    /* .nav-links a also sets display:block (0,1,1), which beats .btn's
       inline-flex (0,1,0) and makes .btn's justify-content inert — and the
       old `padding: 0` here zeroed .btn's own 0.9rem/1.7rem padding along
       with the inherited nav padding. Restate both explicitly at equal
       specificity (0,1,1) so this rule — not .nav-links a — wins, and the
       button renders as an actual ~52px-tall pill instead of a 25px bar. */
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 1.7rem;
    justify-content: center;
    width: 100%;
  }

  .nav-actions .btn-empezar-desktop {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------------- */
/* Ambient glow motif — hero + final CTA only                             */
/* ---------------------------------------------------------------------- */

.glow-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Fade the whole glow layer out well before the section's own bottom edge,
     so the blur never gets guillotined into a hard seam by the overflow
     clip above — it just isn't there anymore by the time the edge arrives. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.glow-a {
  width: 56rem;
  height: 56rem;
  top: -22rem;
  right: -14rem;
  background: radial-gradient(
    circle,
    var(--accent-glow) 0%,
    var(--accent-glow-faint) 45%,
    transparent 72%
  );
}

.glow-b {
  width: 40rem;
  height: 40rem;
  bottom: -18rem;
  left: -12rem;
  background: radial-gradient(
    circle,
    var(--accent-glow-soft) 0%,
    transparent 70%
  );
}

.glow-cta {
  width: 60rem;
  height: 60rem;
  left: 50%;
  bottom: -30rem;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    var(--accent-glow) 0%,
    var(--accent-glow-faint) 45%,
    transparent 74%
  );
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
}

.hero-copy .lede {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--muted);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}

.pill .icon {
  font-size: 0.95rem;
  color: var(--accent-bright);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------------------- */
/* Hero product mockup — glass frame (load-bearing use #2)                 */
/* ---------------------------------------------------------------------- */

.hero-visual {
  position: relative;
}

.mockup-frame {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: rgba(19, 20, 23, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  padding: 0.6rem;
  overflow: visible;
}

.mockup-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem 0.5rem;
}

.mockup-chrome .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.mockup-chrome .urlbar {
  margin-left: 0.6rem;
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.mockup-body {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--canvas-2);
}

.mockup-sidebar {
  background: rgba(255, 255, 255, 0.015);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem 0;
}

.mockup-sidebar .side-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(155deg, var(--accent), var(--accent-deep));
  margin-bottom: 0.4rem;
}

.mockup-sidebar .side-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--faint);
}

.mockup-sidebar .side-icon.active {
  color: #fff;
  background: var(--accent-glow-soft);
}

.mockup-sidebar .side-icon .icon {
  font-size: 17px;
}

.mockup-content {
  padding: 1.1rem 1.2rem 1.4rem;
  min-width: 0;
}

.mockup-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.mockup-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.78rem;
  max-width: 12rem;
}

.mockup-search .icon {
  font-size: 0.9rem;
}

.mockup-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-bright), var(--accent-deep));
}

.mockup-row-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1.1rem 0 0.6rem;
}

.mockup-row-label:first-of-type {
  margin-top: 0;
}

.continue-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(108px, 1fr);
  gap: 0.55rem;
  overflow: hidden;
}

.continue-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.continue-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-card .bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.continue-card .bar span {
  display: block;
  height: 100%;
  background: var(--accent-bright);
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.poster-tile {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease);
}

.poster-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mockup-frame:hover .poster-tile {
  transform: none;
}

.poster-tile:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

.mockup-chip {
  position: absolute;
  left: -1.1rem;
  bottom: -1.3rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem 0.65rem 0.65rem;
  border-radius: 999px;
  background: rgba(22, 24, 28, 0.6);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
  max-width: min(19rem, 82%);
}

.mockup-chip .play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mockup-chip .play .icon {
  font-size: 15px;
  fill: #fff;
  stroke: none;
}

.mockup-chip .chip-text {
  min-width: 0;
}

.mockup-chip .chip-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-chip .chip-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: 2;
    margin-top: 1rem;
  }

  .hero-copy {
    order: 1;
  }

  .mockup-chip {
    left: 0.75rem;
    bottom: -1.1rem;
  }
}

@media (max-width: 560px) {
  .poster-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .continue-row {
    grid-auto-columns: minmax(84px, 1fr);
  }

  .mockup-sidebar {
    display: none;
  }

  .mockup-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  /* At very small widths the chip's max-width/percentage sizing pushed it
     past the frame's right edge (clipped by body's overflow-x: hidden).
     Pin both edges instead so its width is always the frame's width. */
  .mockup-chip {
    left: 0.6rem;
    right: 0.6rem;
    max-width: none;
    bottom: -0.85rem;
  }

  .mockup-chip .chip-title {
    white-space: normal;
    line-height: 1.25;
  }

  .mockup-chip .chip-sub {
    display: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal (base rule)                                               */
/* ---------------------------------------------------------------------- */

.reveal {
  /* Reveal's resting offset lives in a custom property, not a hardcoded
     transform on .reveal.is-visible — that way .card:hover (specificity
     0,2,0) always outranks this rule (0,1,0) regardless of source order,
     instead of colliding with it at equal specificity.
     This rule is placed here, BEFORE the component sections (Cards,
     Devices, Steps, Plans, FAQ), on purpose: it and each component's own
     rule are equal specificity (0,1,0), so whichever comes LAST in source
     wins the whole `transition` shorthand. Elements that are only `.reveal`
     (h1, lede, section-head, etc.) still get their opacity/transform
     transition from here. Elements that are ALSO `.card`/`.device-item`/
     `.plan-card`/`.faq-item` get the fuller list declared on those rules
     instead (which now includes opacity + transform too), so their own
     border/shadow/background hover transitions survive intact. */
  --reveal-y: 16px;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  --reveal-y: 0px;
}

/* ---------------------------------------------------------------------- */
/* Cards — solid surface, hairline border                                  */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  /* Includes opacity/transform (matching .reveal's own slow fade/rise, so
     the scroll-reveal animation is unaffected) alongside this component's
     own faster hover transitions — one merged list wins outright over
     .reveal's shorthand (see note above .reveal) instead of being replaced
     by it, so border/shadow/background keep transitioning on hover. */
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 109, 251, 0.4);
  box-shadow: 0 20px 40px -20px var(--accent-glow);
  background: var(--surface-2);
}

.card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--accent-glow-soft);
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.card-icon .icon {
  font-size: 1.4rem;
}

.card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Quality grid */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

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

/* ---------------------------------------------------------------------- */
/* Devices section                                                         */
/* ---------------------------------------------------------------------- */

.device-grid {
  /* flex-wrap + justify-content: center (rather than a fixed column-count
     grid) so however many devices there are, the final short row centers
     itself instead of hanging left under a full row above it. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.device-item {
  display: flex;
  /* flex-grow: 0 (was 1) so every tile is the same 140px regardless of how
     many end up sharing a row — a full row of 8 and a short row of 5 no
     longer divide the same space into different widths (was 136px vs
     150px, an 11% mismatch between two stacked rows). */
  flex: 0 1 140px;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.device-item:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 109, 251, 0.4);
  background: var(--surface-2);
}

.device-item .device-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--accent-glow-soft);
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-item .device-icon .icon {
  font-size: 1.25rem;
}

.device-item span.label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}

.continuity-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.continuity-line .icon {
  color: var(--accent-bright);
  font-size: 1.2rem;
}

/* ---------------------------------------------------------------------- */
/* Why Fluxer — checklist grid                                             */
/* ---------------------------------------------------------------------- */

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem 2rem;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}

.check-item .check-badge {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent-glow-soft);
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check-item .check-badge .icon {
  font-size: 1rem;
}

/* ---------------------------------------------------------------------- */
/* How it works                                                            */
/* ---------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
}

.step {
  position: relative;
  text-align: center;
  padding: 0 1rem;
}

.step-num {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.step-num::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
}

.step-icon {
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--accent-glow-soft);
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon .icon {
  font-size: 1.05rem;
}

.step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.step p {
  color: var(--muted);
  font-size: 0.92rem;
}

.step-connector {
  position: absolute;
  z-index: 0;
  top: 2.25rem;
  left: calc(50% + 3.4rem);
  /* The `-50%` idiom measures against this .step's own width and has no
     idea the 3-column grid also has a 1rem gap between steps — so every
     connector landed 0.5rem (half a gap) too far left, leaving ~19px
     clearance from the left numeral but ~34px on the right. Subtracting
     the gap here (matching .steps' own `gap: 1rem` above) re-centers it:
     ~19px on both sides. */
  right: calc(-50% + 3.4rem - 1rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--border-strong),
    var(--accent),
    var(--border-strong)
  );
}

/* The connector lives inside each .step (its own positioning context) and
   represents the gap AFTER that step — so the last step has none. */
.step:last-child .step-connector {
  display: none;
}

@media (max-width: 780px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .step-connector {
    /* Was `bottom: -1.5rem; height: 2.75rem` — with a 2.75rem row gap
       that put the connector's top edge ~20px *inside* the previous
       step's paragraph (a blue line drawn through the last line of body
       text). Anchor from the top of the gap instead: `top: calc(100% +
       0.5rem)` starts 0.5rem below the step box, and a 1.75rem height
       leaves another 0.5rem clear before the next step begins
       (0.5 + 1.75 + 0.5 = 2.75rem, the full gap) — connector sits
       entirely inside the gap, touching no text. */
    top: calc(100% + 0.5rem);
    left: 50%;
    bottom: auto;
    right: auto;
    width: 1px;
    height: 1.75rem;
    background: linear-gradient(
      180deg,
      var(--border-strong),
      var(--accent),
      var(--border-strong)
    );
  }
}

/* ---------------------------------------------------------------------- */
/* Plans                                                                   */
/* ---------------------------------------------------------------------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 52rem;
  margin-inline: auto;
}

.plan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.9rem;
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 109, 251, 0.35);
  box-shadow: 0 20px 40px -22px var(--accent-glow);
}

.plan-card.is-locked {
  opacity: 0.92;
}

.plan-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plan-tagline {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.96rem;
}

.plan-points {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.plan-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.plan-points .icon {
  color: var(--accent-bright);
  font-size: 1rem;
  flex-shrink: 0;
}

.plan-card .btn {
  margin-top: 1.75rem;
  width: 100%;
}

.plan-ribbon {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.plan-ribbon .icon {
  font-size: 0.85rem;
}

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

/* ---------------------------------------------------------------------- */
/* FAQ                                                                     */
/* ---------------------------------------------------------------------- */

.faq-list {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.35rem 1.5rem;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.faq-item[open],
.faq-item:hover {
  border-color: var(--border-strong);
}

.faq-item[open] {
  background: var(--surface-2);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item .chevron {
  color: var(--accent-bright);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.faq-item[open] .chevron {
  transform: rotate(180deg);
}

.faq-answer {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  padding-bottom: 1.3rem;
  padding-right: 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* Final CTA                                                                */
/* ---------------------------------------------------------------------- */

.final-cta {
  overflow: hidden;
  text-align: center;
}

.final-cta .container {
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.final-cta .lede {
  max-width: 34rem;
  margin: 1.1rem auto 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.final-cta .cta-actions {
  margin-top: 2.25rem;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 2.75rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.9rem;
  transition: color var(--dur-fast) var(--ease);
}

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

.footer-legal {
  color: var(--faint);
  font-size: 0.85rem;
  text-align: right;
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .footer-legal {
    text-align: left;
  }
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal — staggered delays                                        */
/* ---------------------------------------------------------------------- */

/* The base .reveal rule (opacity/transform + their transition) now lives
   BEFORE the component sections below (Cards, Devices, Steps, Plans, FAQ)
   — see that block just above "Cards". Equal specificity (0,1,0) with
   .card/.device-item/.plan-card/.faq-item means source order decides the
   winner for the whole `transition` shorthand; keeping .reveal earlier lets
   each component's own (later, more complete) transition list win in full
   — including its border/shadow/background hover transitions — instead of
   being clobbered down to just "opacity, transform" by .reveal. */

.reveal-group .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { transition-delay: 70ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 140ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 210ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 280ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 350ms; }
.reveal-group .reveal:nth-child(7) { transition-delay: 420ms; }
.reveal-group .reveal:nth-child(8) { transition-delay: 490ms; }
.reveal-group .reveal:nth-child(9) { transition-delay: 560ms; }
.reveal-group .reveal:nth-child(10) { transition-delay: 630ms; }
.reveal-group .reveal:nth-child(11) { transition-delay: 700ms; }
.reveal-group .reveal:nth-child(12) { transition-delay: 770ms; }
.reveal-group .reveal:nth-child(13) { transition-delay: 840ms; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .card:hover,
  .device-item:hover,
  .plan-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .poster-tile:hover {
    transform: none;
  }
}