:root {
  --primary: #c85a32;
  --primary-dark: #a8461f;
  --accent: #d97706;
  --accent-light: #f4a261;
  --ink: #111827;
  --charcoal: #16171b;
  --charcoal-soft: #1f2128;
  --paper: #fbfbfa;
  --surface: #ffffff;
  --surface-2: #ededec;
  --border: #e2e4e8;
  --text: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --text-on-dark: #f5f3f0;
  --text-on-dark-muted: #b7b3ac;
  --success: #16a34a;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --container: 1320px;
  --shadow-soft: 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-lift: 0 20px 50px rgba(17, 24, 39, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

.container {
  max-width: var(--container);
  width: 90%;
  margin: 0 auto;
  padding: 0;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 251, 250, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  max-width: var(--container);
  width: 90%;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

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

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text);
}

@media (max-width: 719px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
  .nav-toggle {
    display: block;
  }
}

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

/* Small radius, flat color, no floaty transform/glow-shadow — that
   combination is the generic "AI SaaS" button tell. A plaque-like
   rectangle with a crisp edge fits the construction/blueprint identity
   better than a soft pill anyway (see radius rule: controls get a small
   radius, not the same 999px used for the real app-store badges). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--text-on-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

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

.hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 76px 0 0;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  max-width: var(--container);
  width: 90%;
  margin: 0 auto;
  padding: 56px 0 0;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 32px;
  }
  .hero-art {
    order: -1;
  }
}

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.hero h1 span {
  color: var(--accent-light);
}

.hero p.lead {
  font-size: 19px;
  color: var(--text-on-dark-muted);
  max-width: 480px;
  margin: 0 0 32px;
}

@media (max-width: 900px) {
  .hero p.lead {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .hero-ctas {
    justify-content: center;
  }
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.store-badge-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.store-badge .store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.store-badge .store-badge-text small {
  font-size: 10.5px;
  color: #cfcfcf;
}

.store-badge .store-badge-text strong {
  font-size: 16px;
  font-weight: 700;
}


/* ---------- Phone mockups ---------- */

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 480px;
}

.phone {
  position: absolute;
  width: 220px;
  height: 452px;
  border-radius: 34px;
  background: #0f1013;
  border: 6px solid #0f1013;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.phone::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background: #0f1013;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.phone-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.phone-front {
  left: 50%;
  transform: translateX(-50%) translateY(10px) rotate(0deg);
  z-index: 3;
}

.phone-left {
  left: calc(50% - 255px);
  transform: rotate(-9deg) translateY(38px);
  z-index: 2;
  opacity: 0.92;
}

.phone-right {
  left: calc(50% + 255px);
  transform: translateX(-100%) rotate(9deg) translateY(38px);
  z-index: 2;
  opacity: 0.92;
}

@media (max-width: 560px) {
  .hero-art {
    height: 380px;
    transform: scale(0.82);
  }
}

/* mock screen contents, built from CSS only */

.mock-home {
  background: linear-gradient(180deg, #fbfbfa 0%, #f4ede8 100%);
  padding: 20px 16px;
  flex: 1;
}

.mock-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.mock-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
}

.mock-pill {
  font-size: 9px;
  font-weight: 700;
  color: #a8461f;
  background: #fbe3d6;
  padding: 4px 8px;
  border-radius: 999px;
}

.mock-ring {
  width: 130px;
  height: 130px;
  margin: 10px auto 18px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg 260deg, #ecdfd7 260deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-ring-inner {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mock-ring-inner strong {
  font-size: 20px;
  color: var(--ink);
}

.mock-ring-inner span {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mock-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-card {
  height: 34px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ece6e1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
}

.mock-card::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--accent);
}

.mock-city {
  background: linear-gradient(180deg, #1a1c22 0%, #101116 100%);
  flex: 1;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
}

.mock-city-header {
  color: #eee;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}

.mock-skyline {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 8px;
}

.mock-building {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent-light), var(--primary));
}

.mock-building span {
  display: block;
}

.mock-focus {
  background: linear-gradient(180deg, #241109 0%, #150a05 100%);
  flex: 1;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mock-focus small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: 10px;
}

.mock-timer {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.mock-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}

.mock-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.mock-dots span.active {
  background: var(--accent-light);
}

.mock-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-play::before {
  content: '';
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}

/* ---------- Sections ---------- */

section {
  padding: 96px 0;
}

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

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.section-head p {
  color: var(--text-secondary);
  font-size: 17px;
  margin: 0;
}

/* Features — two columns of icon+text rows flanking a centered phone, not
   a repeated card grid: nine identical bordered boxes have nothing to do
   with the construction metaphor. Hovering (or tapping) a row swaps which
   screen the phone shows, so the feature and its evidence sit together. */

.features-layout {
  display: grid;
  grid-template-columns: 1fr 0.95fr 1fr;
  gap: 32px;
}

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

.features-center {
  display: flex;
  justify-content: center;
  /* No align-items override here — this cell must stay the full height of
     the row (matching the taller feature column) so the sticky wrapper
     inside has room to travel and releases exactly at the section's edge
     instead of bleeding into whatever comes next. */
}

.features-phone-sticky {
  position: sticky;
  top: 110px;
  align-self: start;
}

.features-phone-sticky .phone-real {
  width: 300px;
}

.features-phone-sticky .mock-timer {
  font-size: 34px;
}

.features-phone-sticky .mock-ring {
  width: 118px;
  height: 118px;
}

.features-phone-sticky .mock-ring-inner {
  width: 86px;
  height: 86px;
}

.features-phone-sticky .mock-ring-inner strong {
  font-size: 17px;
}

@media (max-width: 900px) {
  .features-center {
    order: -1;
    margin-bottom: 8px;
  }
  .features-phone-sticky {
    position: static;
  }
}

.feature-list {
  display: flex;
  flex-direction: column;
}

.feature-row {
  display: flex;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.feature-row:first-child {
  padding-top: 0;
}

.feature-row:last-child {
  border-bottom: none;
}

.icon-circle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-circle svg {
  width: 21px;
  height: 21px;
}

.feature-row h3 {
  font-size: 16px;
  margin: 2px 0 5px;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

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

.feature-row.is-active .icon-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.feature-row.is-active h3 {
  color: var(--primary);
}

/* How it works */

.how {
  background: var(--surface-2);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}

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

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

.how-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--accent-light);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 18px;
}

.how-step h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.how-step p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
}

/* Real iPhone frame component — the source PNG bakes an opaque white
   screen instead of a transparent cutout (common with AI-rendered device
   mockups), so assets/img/iphone_frame_cutout.png is a processed copy with
   that white rectangle's pixels punched to alpha 0. The screen sits at a
   fixed percentage of the 1024×1536 source canvas; .phone-real-screen's
   inset must stay in those percentages so it still lines up if the frame
   image is ever swapped for a different resolution render of the same
   photo. A soft radial "halo" behind the phone gives it presence without
   another bordered card. */

.phone-real {
  position: relative;
  width: 220px;
  aspect-ratio: 1024 / 1536;
  flex: 0 0 auto;
}

.phone-real-halo {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 145%;
  height: 75%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 90, 50, 0.22) 0%, rgba(200, 90, 50, 0.1) 45%, rgba(200, 90, 50, 0) 72%);
  z-index: 0;
  pointer-events: none;
}

.phone-real-screen {
  position: absolute;
  left: 21.5%;
  top: 7.1%;
  width: 57.6%;
  height: 84%;
  border-radius: 9%;
  overflow: hidden;
  background: #0f1013;
  z-index: 1;
}

.phone-real-screen > div {
  display: none;
  width: 100%;
  height: 100%;
}

.phone-real-screen > div.is-shown {
  display: flex;
}

.phone-real-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.phone-real-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* The Features section's phone-real-screen still uses the old mock-home/
   mock-city/mock-focus/etc. wrapper divs as show/hide toggles (see
   featuresLayout JS), but they now each hold a real screenshot <img>
   instead of CSS-drawn fake UI. Their old flex-centering/padding rules
   (further up this file, still used by the CSS-drawn phones in the hero's
   history) would otherwise shrink the image away from the frame's edges
   instead of letting it fill the screen — this overrides that specifically
   for real-photo wrappers. */
.phone-real-screen > div {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

/* Screenshots — a real slidable carousel: one active slide centered, the
   next/previous peeking at reduced scale/opacity either side, advanced by
   arrows, dots, or dragging/swiping. */

.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  padding: 20px 0 8px;
}

.carousel-track {
  display: flex;
  align-items: center;
  /* No justify-content here — centering the active slide is done by JS via
     transform: translateX(), computed from the slide's real offsetLeft.
     Fighting that with flexbox centering would make the two disagree the
     moment slide widths differ (as they do: active vs peeking scale). */
  gap: 56px;
  width: max-content;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  cursor: grab;
  touch-action: pan-y;
}

.carousel-track:active {
  cursor: grabbing;
}

.carousel-slide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.35;
  transform: scale(0.78);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.carousel-slide .phone-real {
  width: 240px;
}

.carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.carousel-slide p {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.carousel-slide.is-active p {
  color: var(--text);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  z-index: 3;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.carousel-arrow:hover {
  border-color: var(--ink);
  transform: translateY(-50%) scale(1.05);
}

.carousel-arrow.prev {
  left: 0;
}

.carousel-arrow.next {
  right: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  padding: 0;
  cursor: pointer;
}

.carousel-dots button.is-active {
  background: var(--primary);
  width: 22px;
  border-radius: 4px;
  transition: width 0.2s ease;
}

@media (max-width: 640px) {
  .carousel-track {
    gap: 24px;
  }
  .carousel-slide .phone-real {
    width: 190px;
  }
  .carousel-arrow {
    width: 36px;
    height: 36px;
  }
}

/* Brand story — plain and quiet on purpose. The hero already spent the
   page's one gradient moment; repeating it here (a second dark gradient
   panel) would read as decoration rather than a considered choice. */

.story {
  background: var(--surface-2);
}

.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) {
  .story-inner {
    grid-template-columns: 1fr;
  }
}

.story h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--text);
}

.story p {
  color: var(--text-secondary);
  font-size: 16px;
  margin: 0 0 16px;
}

.story-visual {
  padding: 8px 0;
}

.story-skyline {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
}

.story-skyline .bar {
  flex: 1;
  background: var(--primary);
  position: relative;
}

.story-skyline .bar:nth-child(even) {
  background: var(--charcoal);
}

.story-skyline .bar span {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Download — plain, on the page background. It's the second-most-important
   moment on the page (after the hero); it doesn't need its own gradient
   card to earn attention, just clear type and the same button as everywhere
   else. */

/* Download — a full-bleed solid-color band (same flat terracotta as the
   hero, not a second gradient) with the same decorative-rings-behind-a-
   phone treatment as the reference. This is the last thing before the
   footer, so it earns being visually bold once. */

.download-band {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 88px 0;
}

.download-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .download-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.download-band h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.download-band p {
  color: var(--text-on-dark-muted);
  font-size: 17px;
  margin: 0 0 32px;
}

.download-band .hero-ctas {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .download-band .hero-ctas {
    justify-content: center;
  }
}

.download-visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 380px;
}

.download-visual .phone-real {
  width: 230px;
  z-index: 2;
}

.download-visual .phone-real-halo {
  display: none;
}

.download-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.download-rings span {
  position: absolute;
  border-radius: 50%;
}

.download-rings .ring {
  border: 1.5px solid rgba(255, 255, 255, 0.16);
}

.download-rings .ring-1 {
  width: 620px;
  height: 620px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.download-rings .ring-2 {
  width: 460px;
  height: 460px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.download-rings .dot {
  background: rgba(255, 255, 255, 0.14);
}

.download-rings .dot-1 {
  width: 90px;
  height: 90px;
  top: 6%;
  left: 8%;
}

.download-rings .dot-2 {
  width: 54px;
  height: 54px;
  bottom: 12%;
  left: 18%;
  background: rgba(255, 255, 255, 0.1);
}

.download-rings .dot-3 {
  width: 120px;
  height: 120px;
  bottom: 4%;
  right: 6%;
}

.download-rings .dot-4 {
  width: 46px;
  height: 46px;
  top: 14%;
  right: 16%;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 860px) {
  .download-rings .ring-1,
  .download-rings .ring-2 {
    width: 340px;
    height: 340px;
  }
}

/* FAQ */

.faq {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--primary);
  font-weight: 400;
  transition: transform 0.2s ease;
}

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

.faq-item p {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
}

/* Footer */

footer {
  background: var(--charcoal);
  color: var(--text-on-dark-muted);
  padding: 56px 0 28px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .brand {
  color: #fff;
}

.footer-brand p {
  font-size: 14px;
  margin-top: 12px;
  color: var(--text-on-dark-muted);
}

.footer-cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 16px;
}

.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--text-on-dark-muted);
  margin-bottom: 12px;
}

.footer-col a:hover {
  color: var(--accent-light);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

/* ---------- Legal pages ---------- */

.legal-page {
  padding: 64px 0 96px;
}

.legal-page h1 {
  font-size: 34px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.legal-updated {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 40px;
}

.legal-section {
  margin-bottom: 32px;
}

.legal-section h2 {
  font-size: 19px;
  margin-bottom: 10px;
}

.legal-section p {
  color: var(--text-secondary);
  font-size: 15.5px;
}

.legal-back {
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 700;
  color: var(--primary);
}