/* Matches the StreamRec console's own dark theme tokens (client/src/styles/tailwind.css)
   so the marketing site and the app it sells feel like one product. */
:root {
  --bg: 18 20 26;
  --bg-panel: 24 27 34;
  --bg-raised: 36 40 49;
  --bg-border: 51 56 67;
  --accent: 20 216 160;
  --accent-dim: 13 158 117;
  --accent-bright: 110 240 200;
  --violet: 139 127 255;
  --text: 226 232 240;
  --text-dim: 148 163 184;
  --text-faint: 100 116 139;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Fixed (non-scrolling) wash behind the whole page — accent/violet glows anchored to
     the viewport corners, fading into the same flat --bg the site used before. Bumped up
     from an initial pass that was too subtle to actually read as a gradient; still fades
     out before the center of the viewport so it doesn't fight the hero's own particle
     field/ambient shapes layered on top in specific sections. */
  background:
    radial-gradient(ellipse 1300px 900px at 12% -10%, rgb(var(--accent) / 0.28), transparent 65%),
    radial-gradient(ellipse 1300px 900px at 88% 0%, rgb(var(--violet) / 0.24), transparent 65%),
    rgb(var(--bg));
  background-attachment: fixed;
  color: rgb(var(--text));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Only the hero's product carousel uses this — wider than the headline/copy column so
   it reads as a showcase piece, not just another line of body text. */
.wrap-wide {
  max-width: 1360px;
}

/* --- Nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgb(var(--bg-border));
  background: rgb(var(--bg) / 0.85);
  backdrop-filter: blur(10px);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a:not(.btn) {
  color: rgb(var(--text-dim));
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:not(.btn):hover {
  color: rgb(var(--text));
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-dim)));
  color: #05130e;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: rgb(var(--text));
  border-color: rgb(var(--bg-border));
}

.btn-ghost:hover {
  border-color: rgb(var(--text-faint));
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 13px 26px;
  font-size: 15px;
}

/* --- Hero --- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 80px;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* --- Animated background: a firefly-like particle field, in the spirit of a living,
   atmospheric hero — done here with canvas 2D so the site stays a dependency-free,
   no-build static page. */

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.35s ease-out;
}

.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgb(var(--bg-border));
  background: rgb(var(--bg-panel));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(var(--accent-bright));
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--accent));
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 24px 0 20px;
  max-width: 760px;
}

.hero h1 span {
  background: linear-gradient(120deg, rgb(var(--accent-bright)), rgb(var(--accent)) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  font-size: 18px;
  color: rgb(var(--text-dim));
  max-width: 560px;
  margin: 0 0 36px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: rgb(var(--text-faint));
}

/* --- Motion: hero entrance + scroll reveals --- */

@media (prefers-reduced-motion: no-preference) {
  .nav {
    animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero .eyebrow {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero h1 {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  }
  .hero p.lead {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
  }
  .hero .hero-actions {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
  }
  .hero .hero-note {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }
  .hero .tabviewer {
    animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Applied by site.js's reveal() to cards/sections as they're tagged — kept out of the
   raw HTML so a visitor with JS disabled (or a crawler) sees every section at full
   opacity immediately, never a page stuck invisible waiting on script that never ran. */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    transition: none;
  }
}

.hero-frame {
  margin-top: 64px;
  border-radius: 18px;
  border: 1px solid rgb(var(--bg-border));
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6);
}

.hero-frame img {
  width: 100%;
  display: block;
  opacity: 0.92;
}

/* --- Product tabbed viewer --- */

.tabviewer {
  border-radius: 18px;
  border: 1px solid rgb(var(--bg-border));
  background: rgb(var(--bg-panel));
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.55);
}

.tabviewer-tabs {
  display: flex;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid rgb(var(--bg-border));
  overflow-x: auto;
}

.tabviewer-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgb(var(--text-dim));
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tabviewer-tab:hover {
  background: rgb(var(--bg-raised));
  color: rgb(var(--text));
}

.tabviewer-tab.active {
  background: rgb(var(--accent) / 0.14);
  color: rgb(var(--accent-bright));
}

.tabviewer-panel {
  display: none;
}

.tabviewer-panel.active {
  display: block;
}

.carousel-illustration {
  width: 100%;
  /* Sized to match the "Sharing" panel's own image exactly (2144x711) on screens with
     the width for it, so every panel renders at the same size as that one. Kept closer
     to 16:9 below that so the in-image text on the taller ingest/overlays panels
     doesn't shrink to the point of being unreadable in a much wider, shorter frame. */
  aspect-ratio: 16 / 9;
  position: relative;
  display: block;
  background: radial-gradient(ellipse at 20% 15%, rgb(var(--accent) / 0.14), transparent 55%), rgb(var(--bg-raised));
}

@media (min-width: 768px) {
  .carousel-illustration {
    aspect-ratio: 2144 / 711;
  }
}

.tabviewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgb(var(--bg-border));
  background: rgb(var(--bg) / 0.55);
  color: rgb(var(--text));
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.tabviewer-arrow:hover {
  background: rgb(var(--bg-raised) / 0.9);
  border-color: rgb(var(--accent) / 0.5);
  color: rgb(var(--accent-bright));
}

.tabviewer-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.tabviewer-arrow-prev {
  left: 14px;
}

.tabviewer-arrow-next {
  right: 14px;
}

@media (max-width: 640px) {
  .tabviewer-arrow {
    width: 36px;
    height: 36px;
  }
}

.carousel-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  /* The "Ingest" and "DVR overlays" shots aren't the same shape as "Sharing" (which is
     much wider), and there's no more image to crop wider from at the source — contain
     keeps each one whole inside the shared frame instead of cropping content off. */
  object-fit: contain;
}

.carousel-caption {
  padding: 20px 28px 24px;
  border-top: 1px solid rgb(var(--bg-border));
}

.carousel-caption h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.carousel-caption p {
  margin: 0;
  font-size: 13px;
  color: rgb(var(--text-dim));
}

/* --- Sections --- */

section {
  padding: 64px 0;
}

/* --- Ambient background shapes (beyond the hero) ---
   A handful of thin-outline abstract shapes scattered through the rest of the page, so
   scrolling past the hero doesn't suddenly go from "richly animated" to flat. Each
   .bg-shape is the element site.js moves on scroll (a JS-driven translateY, scaled by
   data-parallax-speed, so different shapes drift at different rates for a layered depth
   feel); the nested .shape-* element carries its own independent CSS keyframe animation
   (spin/pulse) — splitting the two across parent/child avoids the JS transform and the
   CSS animation's transform fighting over the same element. */

.section-decorated {
  position: relative;
  overflow: hidden;
}

.bg-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.shape-ring {
  border-radius: 50%;
  border: 1.5px solid rgb(var(--accent) / 0.36);
}

.shape-dashed {
  border-radius: 50%;
  border: 1.5px dashed rgb(var(--accent-bright) / 0.4);
}

.shape-diamond {
  border: 1.5px solid rgb(var(--violet) / 0.4);
  transform: rotate(45deg);
}

.shape-plus {
  position: relative;
}

.shape-plus::before,
.shape-plus::after {
  content: "";
  position: absolute;
  background: rgb(var(--accent-bright) / 0.5);
}

.shape-plus::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.shape-plus::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}

.shape-triangle {
  display: block;
  color: rgb(var(--violet) / 0.4);
}

.shape-dots {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--accent-bright) / 0.6);
  box-shadow:
    14px 9px 0 0 rgb(var(--accent-bright) / 0.6),
    6px -11px 0 0 rgb(var(--accent-bright) / 0.6);
}

/* Camera-viewfinder corner brackets — two opposite L-corners framing empty space, a
   nod to the product's own subject matter (video framing) rather than a purely
   generic shape. */
.shape-brackets {
  position: relative;
}

.shape-brackets::before,
.shape-brackets::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 42%;
  border-style: solid;
  border-color: rgb(var(--accent-bright) / 0.5);
}

.shape-brackets::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.shape-brackets::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* Concentric rings — a "broadcasting a signal" motif. */
.shape-target {
  position: relative;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--violet) / 0.4);
}

.shape-target::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--violet) / 0.4);
}

.shape-hexagon {
  display: block;
  color: rgb(var(--accent) / 0.4);
}

.shape-arc {
  display: block;
  color: rgb(var(--accent-bright) / 0.45);
}

/* Video playback control glyphs — a direct nod to the product itself (StreamRec IS a
   video player/recorder), joining the more abstract shapes above rather than replacing
   them. */
.shape-play {
  display: block;
  color: rgb(var(--accent) / 0.44);
}

.shape-pause {
  position: relative;
}

.shape-pause::before,
.shape-pause::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  border-radius: 2px;
  background: rgb(var(--accent-bright) / 0.45);
}

.shape-pause::before {
  left: 16%;
}

.shape-pause::after {
  right: 16%;
}

.shape-stop {
  border: 1.5px solid rgb(var(--violet) / 0.42);
  border-radius: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .shape-ring {
    animation: shapePulse 9s ease-in-out infinite;
  }
  .shape-dashed {
    animation: shapeSpin 60s linear infinite;
  }
  .shape-diamond {
    animation: shapeSpinDiamond 70s linear infinite reverse;
  }
  .shape-plus {
    animation: shapeSpin 46s linear infinite;
  }
  .shape-triangle {
    animation: shapeSpin 54s linear infinite reverse;
  }
  .shape-dots {
    animation: shapePulse 11s ease-in-out infinite;
  }
  .shape-brackets {
    animation: shapePulse 8s ease-in-out infinite;
  }
  .shape-target {
    animation: shapePulse 7s ease-in-out infinite;
  }
  .shape-hexagon {
    animation: shapeSpin 65s linear infinite;
  }
  .shape-arc {
    animation: shapeSpin 40s linear infinite;
  }
  .shape-play {
    animation: shapePulse 6s ease-in-out infinite;
  }
  .shape-pause {
    animation: shapePulse 6.5s ease-in-out infinite;
  }
  .shape-stop {
    animation: shapePulse 7.5s ease-in-out infinite;
  }
}

@keyframes shapeSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shapeSpinDiamond {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(405deg);
  }
}

@keyframes shapePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.1);
  }
}


.section-head {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-head .eyebrow {
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 700;
}

.section-head p {
  color: rgb(var(--text-dim));
  font-size: 16px;
  margin: 0;
}

/* --- Feature grid --- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.feature {
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--bg-border));
  background: rgb(var(--bg-panel));
  transition: border-color 0.15s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}

.feature:hover {
  border-color: rgb(var(--accent) / 0.4);
  transform: translateY(-2px);
}

/* Applied by site.js's initCardTilt while the cursor is over the card — a fast, linear
   transition tracks the mouse in real time; .feature/.plan's own longer, eased
   transition takes back over on mouseleave for a smooth spring-back to rest. */
.feature.tilting,
.plan.tilting {
  transition: border-color 0.15s, transform 0.05s linear, box-shadow 0.4s;
}

.feature .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent) / 0.12);
  color: rgb(var(--accent-bright));
  margin-bottom: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature:hover .icon {
  transform: scale(1.12) rotate(-6deg);
}

.feature h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

.feature p {
  font-size: 14px;
  color: rgb(var(--text-dim));
  margin: 0;
}

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

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: 8px;
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgb(var(--accent) / 0.14);
  color: rgb(var(--accent-bright));
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}

.step p {
  font-size: 14px;
  color: rgb(var(--text-dim));
  margin: 0;
}

/* --- Pricing --- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--bg-border));
  background: rgb(var(--bg-panel));
  position: relative;
  transition: border-color 0.15s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}

.plan:hover {
  border-color: rgb(var(--accent) / 0.4);
  transform: translateY(-2px);
}

.plan.featured {
  border-color: rgb(var(--accent) / 0.6);
  background: linear-gradient(180deg, rgb(var(--accent) / 0.08), rgb(var(--bg-panel)) 40%);
}

.plan .badge {
  position: absolute;
  top: -12px;
  left: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(var(--accent));
  color: #05130e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.plan h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.plan .desc {
  font-size: 13px;
  color: rgb(var(--text-dim));
  min-height: 36px;
  margin-bottom: 18px;
}

.plan .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}

.plan .price .amount {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan .price .period {
  font-size: 13px;
  color: rgb(var(--text-faint));
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.plan li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgb(var(--text));
}

.plan li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgb(var(--accent));
}

.pricing-fallback-note {
  text-align: center;
  font-size: 12px;
  color: rgb(var(--text-faint));
  margin-top: 24px;
}

/* --- FAQ --- */

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid rgb(var(--bg-border));
  border-radius: 12px;
  background: rgb(var(--bg-panel));
  overflow: hidden;
}

.faq-item summary {
  padding: 18px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: rgb(var(--text-faint));
  transition: transform 0.15s;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14px;
  color: rgb(var(--text-dim));
}

/* --- CTA band --- */

.cta {
  border-radius: 24px;
  border: 1px solid rgb(var(--bg-border));
  background:
    radial-gradient(ellipse 90% 140% at 0% 0%, rgb(var(--accent-dim) / 0.32), transparent 60%),
    radial-gradient(ellipse 90% 140% at 100% 100%, rgb(var(--violet) / 0.28), transparent 60%),
    linear-gradient(135deg, rgb(var(--bg-panel)), rgb(var(--bg-raised)));
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta h2 {
  position: relative;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.cta p {
  position: relative;
  color: rgb(var(--text-dim));
  margin: 0 0 28px;
}

.cta .hero-actions {
  position: relative;
  justify-content: center;
}

/* --- Footer --- */

footer {
  border-top: 1px solid rgb(var(--bg-border));
  padding: 40px 0;
}

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

footer .brand {
  font-size: 14px;
  color: rgb(var(--text-dim));
}

footer .brand img {
  width: 22px;
  height: 22px;
}

footer .foot-links {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: rgb(var(--text-faint));
}

footer .foot-links a {
  text-decoration: none;
}

footer .foot-links a:hover {
  color: rgb(var(--text-dim));
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }
  section {
    padding: 40px 0;
  }
  .hero {
    padding: 64px 0 48px;
  }
  .cta {
    padding: 44px 24px;
  }
  /* Below ~640px the full nav (logo + "StreamRec" text + Log in + Sign up free) no
     longer fits one row and was overlapping — drop the wordmark text (the logo mark
     alone still reads as the brand) and tighten the buttons to reclaim the space. */
  .wrap {
    padding: 0 16px;
  }
  .brand span {
    display: none;
  }
  .nav-actions {
    gap: 8px;
  }
  .nav-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
  }
}