/* ================================================================
   WallTune Landing — Design System v2
   World: antracita #060608, Geist 900 display, Inter body.
   Elevación: borde 1px solamente. Sin sombras. Sin glass decorativo.
   Motion: GSAP ScrollTrigger (monitor merge pinned), fade+y reveals.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;700;800;900&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── TOKENS ── */
:root {
  /* Superficie */
  --bg:          #060608;
  --bg-1:        #0d0d10;
  --bg-2:        #141417;
  --border:      rgba(255, 255, 255, 0.07);
  --border-hi:   rgba(255, 255, 255, 0.14);

  /* Texto */
  --text:        #f5f5f7;
  --text-2:      #8e8e96;
  --text-3:      #4a4a52;

  /* Acento único */
  --accent:      #ffffff;
  --accent-dim:  rgba(255, 255, 255, 0.08);

  /* Tipografía */
  --font-d: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-b: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radios */
  --r-card: 20px;
  --r-pill: 100px;
  --r-monitor: 12px;
  --r-screen:  8px;

  /* Curvas */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; color: var(--text); }
dl, dt, dd { margin: 0; padding: 0; }

/* ── NAV ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 52px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    padding 0.45s var(--ease-expo),
    background 0.45s var(--ease-expo),
    border-color 0.45s var(--ease-expo),
    backdrop-filter 0.45s var(--ease-expo);
}
.site-nav.nav--scrolled {
  padding: 16px 52px;
  background: rgba(6, 6, 8, 0.7);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border-bottom-color: var(--border);
}
.nav-logo {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.045em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  gap: 40px;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s;
  cursor: pointer;
}
.nav-links a:hover { color: var(--text); }
.nav-end { display: flex; align-items: center; gap: 20px; }
.lang-pill {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  border: 0;
  background: transparent;
  font-family: var(--font-b);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s;
}
.lang-btn.active {
  background: var(--text);
  color: var(--bg);
}

/* CTA Button — global */
.btn-cta {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-b);
  font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.25s var(--ease-expo), opacity 0.2s;
}
.btn-cta:hover { transform: scale(1.03); opacity: 0.9; }
.btn-cta--hero { font-size: 1rem; padding: 14px 32px; }

/* ── HERO ── */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Full-bleed background */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video-bg {
  width: 100%;
  height: 100%;
  background-color: var(--bg-1);
  background-image: 
    linear-gradient(to right, rgba(6,6,8,0.95) 0%, rgba(6,6,8,0.7) 40%, transparent 70%),
    url('../assets/color_hero.png');
  background-size: cover;
  background-position: right center;
  overflow: hidden;
}

.hero-video-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Vignette gradient over the media */
.hero-vignette {
  position: absolute;
  inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(6,6,8,0.2) 0%,
    transparent 30%,
    rgba(6,6,8,0.5) 65%,
    rgba(6,6,8,0.96) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 64px 80px;
  max-width: 860px;
}
.hero-seal {
  position: absolute;
  top: -30px;
  right: 20px;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0.8;
}
.hero-seal-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  animation: spin-slow 20s linear infinite;
}
@keyframes spin-slow {
  100% { transform: rotate(360deg); }
}
.hero-seal-icon {
  width: 48px;
  height: 48px;
  color: var(--text);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}
.hero-headline {
  font-family: var(--font-d);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
}
.hl-line {
  display: block;
  will-change: transform, opacity;
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 48ch;
}

/* Scroll indicator */

/* ── MONITOR MERGE SECTION ── */
.monitor-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.monitor-intro {
  text-align: center;
  padding: 80px 24px 40px;
}
.monitor-intro-headline {
  font-family: var(--font-d);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.monitor-intro-sub {
  font-size: 1.25rem;
  color: var(--text-2);
  margin-bottom: 24px;
}
.monitor-intro-desc {
  max-width: 650px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-2);
  opacity: 0.8;
}



/* Scene wrapper — pinned by GSAP ScrollTrigger */
.monitor-scene-wrapper {
  height: 100vh;
  position: relative;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Etiqueta de Autor debajo de los monitores */
.spanned-author-label {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-b);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}

/* The flex row that holds both desktop frames */
.monitor-scene {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* NO gap here — gap is implemented as initial translateX offset */
  width: 100%;
  position: relative;
}

/* ── DESKTOP FRAME (the representation of a macOS desktop) ── */
/*
  Each frame is 65vw wide. Since two side by side = 130vw,
  each outer half (15vw each side) overflows and is clipped
  by .monitor-scene-wrapper overflow:hidden.

  Initial state: translateX(+/-8vw) to create a visible gap.
  Final state: translateX(0) — right edge of left touches left edge of right.
*/
.desktop-frame {
  flex: 0 0 65vw;
  width: 65vw;
  /* Aspect ratio 16:9 */
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  /* Thin border to define the screen edge */
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  will-change: transform;
}

/* The inner gap between monitors when separated is created by GSAP translateX */
.desktop-left  { border-radius: 14px; }
.desktop-right { border-radius: 14px; border-left: none; }

/* ── macOS SYSTEM MENUBAR ── */
.macos-menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  /* Completely transparent, no blur to avoid dark edge artifacts */
  background: transparent;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  user-select: none;
}

.mb-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mb-apple {
  color: rgba(255,255,255,0.88);
  flex-shrink: 0;
  margin-right: 2px;
  width: 14px;
  height: 16px;
  overflow: visible;
}
.mb-app {
  font-family: var(--font-d);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mb-menu {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
}
.mb-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mb-sys-icon {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.75);
}
.mb-time {
  font-family: var(--font-d);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.85);
}

/* ── DESKTOP AREA (wallpapers fill full frame, behind menubar) ── */
.desktop-area {
  position: absolute;
  inset: 0;          /* Full frame — wallpaper goes behind the translucent menubar */
  overflow: hidden;
}

.wp-solo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none; /* controlled by GSAP, not CSS transition */
}

/*
  SPANNING WALLPAPER TRICK — Warm orange spanning video:
  Using object-position to split a single video across two frames.
  Left shows 0% (left half), Right shows 100% (right half).
  Together they read as ONE seamless panoramic video.
*/
.wp-span {
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%; /* Spans across two monitors */
  max-width: none;
  object-fit: cover;
  opacity: 0; /* GSAP reveals this when monitors touch */
  /* Fallback gradient until video src is populated */
  background: linear-gradient(90deg,
    #3d0a00 0%, #7a1e00 8%, #c04000 16%, #e86800 24%,
    #ff9933 32%, #ffcc88 40%, #ffe0b0 48%, #ffcc66 50%,
    #ffe0b0 52%, #ffcc88 60%, #ff9933 68%, #e86800 76%,
    #c04000 84%, #7a1e00 92%, #3d0a00 100%
  );
}
#monitor-left .wp-span {
  left: 0;
  object-position: left center;
}
#monitor-right .wp-span {
  right: 0;
  object-position: right center;
}

/* "Modo Spanned" label — floats below the monitors */
.monitor-merged-label {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  opacity: 0; /* GSAP-animated */
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-hi);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── MONITOR EDITOR STATE (Phase 3 of scroll animation) ── */
/*
  Appears after the monitors merge and the user continues scrolling.
  The big monitors scale down and this editor window is revealed around them,
  showing the Align Helper active (concentric circles + grid).
*/
.editor-state {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0; /* GSAP reveals this */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  pointer-events: none; /* only visual */
}

/* macOS app window */
.editor-window {
  width: min(88vw, 900px);
  border-radius: 12px;
  background: #282828;
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 40px 120px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
}

/* Window titlebar */
.editor-titlebar {
  height: 40px;
  background: #303030;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 0;
  flex-shrink: 0;
}
.editor-traffic-lights {
  display: flex;
  gap: 7px;
  margin-right: 16px;
}
.et-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.et-dot--red    { background: #ff5f56; }
.et-dot--yellow { background: #ffbd2e; }
.et-dot--green  { background: #27c93f; }
.editor-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-b);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  /* Balance the traffic lights (width ~50px) to keep text exactly centered */
  transform: translateX(-25px);
}
.editor-align-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  color: #4db8ff;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-align-btn::before {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4db8ff;
  box-shadow: 0 0 6px #4db8ff;
}

/* Window body */
.editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Canvas area (left ~70%) */
.editor-canvas {
  flex: 1;
  background: #1c1c1e;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The mini monitor scene inside the canvas */
.editor-mini-scene {
  position: relative;
  display: flex;
  align-items: flex-start;
  /* No gap — monitors touch */
}

/* Mini monitor frame */
.editor-mini-monitor {
  position: relative;
  width: 258px; height: 162px; /* Increased size */
  overflow: hidden;
  border-radius: 6px;
  background: #000; /* Behind the wallpapers */
  /* Distinct hardware bezel: silver outer edge, black inner glass */
  border: 8px solid #000;
  box-shadow: 0 0 0 1px #555, inset 0 0 0 1px #333, 0 12px 32px rgba(0,0,0,0.6);
}

/* Mini macOS menubar */
.editor-mini-menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: transparent;
  z-index: 5;
}

/* Spanning wallpaper video inside mini monitors (Phase 3: Linked) */
.editor-mini-wallpaper--span {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  object-fit: cover;
}
.editor-mini-wallpaper--span-left {
  object-position: left center;
}
.editor-mini-wallpaper--span-right {
  object-position: right center;
  left: auto;
  right: 0;
}

.editor-mini-wallpaper-solo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* Hidden initially, revealed by GSAP in Phase 4 */
}

/* Mini monitor labels (like the app: "HDMI", "LS24C31x", "Linked 1") */
.editor-mini-label {
  position: absolute;
  top: 10px;
  left: 8px;
  display: flex;
  gap: 4px;
  z-index: 6;
}
.editor-label-pill {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  color: #fff;
  letter-spacing: 0.03em;
}
.editor-label-pill--blue  { background: rgba(50, 140, 255, 0.85); }
.editor-label-pill--linked { background: rgba(60, 60, 60, 0.85); border: 1px solid rgba(255,255,255,0.2); }

/* Corner handle dots (like the selection in the app) */
.editor-mini-handles {
  position: absolute;
  inset: -3px;
  z-index: 7;
  pointer-events: none;
}
.editor-handle-dot {
  position: absolute;
  width: 7px; height: 7px;
  background: #fff;
  border: 1px solid rgba(100,180,255,0.8);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(100,180,255,0.6);
}
.editor-handle-dot--tl { top: 0;   left: 50%;  transform: translate(-50%,0); }
.editor-handle-dot--tc { top: 50%; left: 0;    transform: translate(0,-50%); }
.editor-handle-dot--tr { top: 0;   right: 0;   transform: translate(50%,0); }
.editor-handle-dot--bl { bottom: 0; left: 50%; transform: translate(-50%,0); }
.editor-handle-dot--bc { bottom: 0; right: 0;  transform: translate(50%,0); }

/* \u2500\u2500 ALIGN HELPER OVERLAY (concentric circles + crosshair grid) \u2500\u2500 */
/*
  Positioned to span both mini monitors, centered at the seam.
  Matches the visual from the real app: thin concentric circles + pink/red crosshair grid.
*/
.align-helper-overlay {
  position: absolute;
  /* Span both monitors: 420px wide (210px * 2) + some extra, centered */
  width: 420px;
  height: 118px; /* matches mini monitor height ~ 210 * 9/16 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}
.align-helper-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Right panel (~30%) */
.editor-panel {
  width: 230px;
  flex-shrink: 0;
  background: #272727;
  border-left: 1px solid rgba(0,0,0,0.5);
  padding: 12px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.editor-panel-section {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.35);
}
.editor-panel-label {
  font-family: var(--font-b);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-panel-label svg { opacity: 0.5; }

/* Scene selector */
.editor-scene-selector {
  background: #3a3a3c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Display rows */
.editor-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  margin-bottom: 3px;
}
.editor-display-row--active {
  background: rgba(230, 100, 0, 0.18);
  color: #fff;
}
.editor-display-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.editor-display-dot--orange { background: #e06000; }
.editor-display-dot--blue   { background: #0a84ff; }

/* Linked group */
.editor-linked-box {
  border: 1.5px solid #4db8ff;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.editor-linked-sub {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
}

/* Image adjustment sliders */
.editor-slider-row {
  margin-top: 6px;
}
.editor-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.editor-slider-track {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  position: relative;
}
.editor-slider-fill {
  height: 100%;
  border-radius: 100px;
  background: #e06000;
}
.editor-slider-thumb {
  position: absolute;
  top: 50%; right: 0;
  transform: translate(50%, -50%);
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ── LINKED GROUPS ── */
.linked-groups-section {
  padding: 140px 8vw;
  border-top: 1px solid var(--border);
}
.linked-groups-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  margin-bottom: 80px;
}
.linked-groups-media {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.linked-groups-copy { max-width: 470px; }
.linked-groups-headline {
  font-family: var(--font-d);
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.linked-groups-copy > p {
  margin-top: 24px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}
.linked-groups-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid var(--border);
  padding-top: 40px;
}
.linked-groups-details > div {
  /* no extra borders since we have horizontal flow now */
}
.linked-groups-details dt {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}
.linked-groups-details dd {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── FEATURE SECTIONS ── */
.feature-section {
  border-top: 1px solid var(--border);
}
.feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 96px 72px;
}
.feature-headline {
  font-family: var(--font-d);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.feature-body {
  font-size: 1.05rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 50ch;
}

/* Focus Demo visual */
.feature-media-frame {
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.focus-demo {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 460px;
}
.focus-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.focus-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.focus-screen {
  height: 180px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.focus-gradient {
  width: 100%;
  height: 100%;
  background-size: 200% 200%;
}
.focus-gradient--calm {
  background: linear-gradient(160deg, #0d1b3e 0%, #0a2060 40%, #060d24 100%);
}
.focus-gradient--vibrant {
  background: linear-gradient(135deg, #1a0830 0%, #3d0f6e 35%, #0e1f5e 70%, #050e2e 100%);
  background-size: 300% 300%;
}
.focus-divider {
  color: var(--text-3);
  flex-shrink: 0;
}

/* ─────────── BENTO: MEDIA SLOTS ─────────── */
.media-slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0d0d12;
  border-radius: 8px;
  overflow: hidden;
}
.media-slot-video,
.media-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-slot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-m);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* ─────────── BENTO CARDS ─────────── */
.bento-section {
  border-top: 1px solid var(--border);
}
.bento-section-header {
  padding: 80px 52px 52px;
}
.bento-section-title {
  font-family: var(--font-d);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--border);
}
.bento-card {
  background: var(--bg);
  overflow: hidden;
  display: flex;
  position: relative;
  transition: background 0.35s var(--ease-expo);
}
.bento-card:hover { background: var(--bg-1); }
.bento-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bento-col-8 { grid-column: span 8; min-height: 400px; }
.bento-col-6 { grid-column: span 6; min-height: 360px; }
.bento-col-4 { grid-column: span 4; min-height: 400px; }

/* Card text — default layout */
.bento-card-text {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.bento-full-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bento-full-visual .media-slot,
.bento-full-visual .media-slot-img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bento-card-text--overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(6,6,8,0.98) 0%, rgba(6,6,8,0.7) 50%, transparent 100%);
  padding: 40px;
}
.bento-card-text--overlay-top-light {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  padding: 40px;
}
.bento-card-text--overlay-top-light .bento-card-title {
  color: #111;
}
.bento-card-text--overlay-top-light .bento-card-desc {
  color: #333;
}
.bento-card-title {
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.bento-card-desc {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 44ch;
}
.bento-card-desc--sm { font-size: 0.875rem; }

/* Spec table */
.bento-specs {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.spec-row dt { font-size: 0.82rem; color: var(--text-3); font-weight: 500; }
.spec-row dd { font-size: 0.82rem; font-weight: 600; color: var(--text); text-align: right; letter-spacing: -0.02em; }

/* ── LOCKSCREEN VISUAL ── */
.bento-lockscreen-visual {
  position: absolute;
  inset: 0; z-index: 1;
  overflow: hidden;
}
.lockscreen-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0a1628 0%, #1a0a38 40%, #070312 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lockscreen-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 40% 50%, rgba(60, 20, 120, 0.5) 0%, transparent 70%);
  animation: lgDrift 8s ease-in-out infinite alternate;
}
@keyframes lgDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, 5%) scale(1.1); }
}
.lockscreen-time-pill {
  position: absolute;
  top: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-pill);
  padding: 8px 20px;
  z-index: 2;
}
.lockscreen-time {
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.9);
}
.lockscreen-arrow-anim {
  position: absolute;
  bottom: 40px;
  z-index: 2;
}
.la-track {
  display: flex;
  gap: 8px;
  align-items: center;
}
.la-dot {
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
}

/* ── ALIGN HELPER VISUAL ── */
.bento-card--align { flex-direction: column; }
.align-visual {
  position: absolute;
  inset: 0; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px;
}
.align-monitor {
  flex: 1;
  height: 140px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.align-screen { width: 100%; height: 100%; }
.align-grad {
  width: 200%; height: 100%;
  background: linear-gradient(90deg, #0d1540 0%, #1a2a6c 40%, #2a1a5e 70%, #1a0a3e 100%);
}
.align-grad--r { transform: translateX(-50%); }
.align-gap-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.align-gap-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
}
.align-gap-label {
  font-size: 0.65rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── SHORTCUTS VISUAL ── */
.shortcuts-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 40px 40px;
  margin-top: auto;
}
.shortcut-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 500;
}
.shortcut-pill--action {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-hi);
  color: var(--text);
}
.shortcut-icon-dot {
  width: 20px; height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
.shortcut-icon-dot--blue { background: #0a84ff; }
.shortcut-icon-dot--white { background: rgba(255,255,255,0.15); border: 1px solid var(--border-hi); }
.shortcut-arrow {
  text-align: left;
  padding-left: 28px;
  color: var(--text-3);
  font-size: 0.9rem;
}

.control-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  padding: 140px 8vw;
  border-top: 1px solid var(--border);
}
.control-intro { max-width: 460px; }
.control-headline,
.capture-headline {
  font-family: var(--font-d);
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.control-copy,
.capture-header p:last-child {
  max-width: 48ch;
  margin-top: 24px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}
.control-media-frame,
.capture-media-frame {
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* ── BROWSER EXTENSION MENTION ── */
.browser-extension-section {
  padding: 80px 8vw;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.browser-extension-header {
  max-width: 600px;
  margin-bottom: 40px;
}
.browser-extension-headline {
  font-family: var(--font-d);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.browser-extension-header p {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.6;
}
.browser-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.browser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 32px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s var(--ease-expo);
  min-width: 120px;
}
.browser-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
}
.browser-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.browser-card span {
  font-size: 0.85rem;
  font-weight: 600;
}
.browser-card--disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}
.browser-card-badge {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  margin-top: -6px;
  color: var(--text-2);
}

/* ── AUTHORS ── */
.authors-section {
  border-top: 1px solid var(--border);
  padding: 120px 64px;
}
.authors-header { max-width: 640px; margin-bottom: 64px; }
.authors-headline {
  font-family: var(--font-d);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin-bottom: 20px;
}
.authors-sub {
  font-size: 1.05rem;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 52ch;
}
.authors-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 40px;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* ── ONBOARDING WORKFLOW SECTION ── */
.workflow-section {
  padding: 100px 0;
  position: relative;
  background: var(--bg);
}
.workflow-container {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  padding: 0 52px;
}
.workflow-left {
  flex: 4;
  padding: 25vh 60px 25vh 0; /* Huge padding so we have scroll distance, plus right breathing room */
}
.workflow-step {
  margin-bottom: 30vh;
  opacity: 0.2;
  transition: opacity 0.5s ease;
}
.workflow-step:last-child {
  margin-bottom: 0;
}
.workflow-step.active {
  opacity: 1;
}
.step-num {
  font-size: 11px;
  font-family: var(--font-b);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  display: inline-block;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}
.step-title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--text);
}
.step-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 50ch;
}

.workflow-right {
  flex: 6;
  position: sticky;
  top: 20vh;
  aspect-ratio: 16/10;
  height: auto;
}
.workflow-visuals-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: transparent;
  overflow: hidden;
}
.wf-visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wf-visual.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 900px) {
  .workflow-container {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }
  .workflow-left {
    padding: 0;
  }
  .workflow-step {
    margin-bottom: 40px;
    opacity: 1;
  }
  .workflow-right {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    margin-bottom: 40px;
  }
  .wf-media-demo {
    padding: 20px;
    gap: 12px;
  }
}

.authors-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 10px 4vw;
}
.author-card {
  position: relative;
  width: clamp(280px, 31vw, 480px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
}
.author-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-card-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 38%, transparent 68%);
  padding: 20px;
  pointer-events: none;
}
.author-card-title {
  margin-bottom: 5px;
  color: rgba(255,255,255,0.72);
  font-size: 0.75rem;
  line-height: 1.3;
}
.author-card-name {
  font-family: var(--font-d);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

/* ── PRICING ── */
.pricing-section {
  border-top: 1px solid var(--border);
  padding: 120px 24px; /* adjusted for mobile responsiveness */
}
.pricing-header {
  margin: 0 auto 64px;
  max-width: 800px;
  text-align: center;
}
.pricing-headline {
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.pricing-sub {
  font-size: 1.15rem;
  color: var(--text-2);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1150px;
  margin: 0 auto;
}

.pricing-card {
  padding: 48px 32px;
  background: var(--surface);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.pricing-card--featured {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
  transform: scale(1.02);
}
.pricing-card--featured:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.pricing-badge {
  position: absolute;
  top: 40px;
  right: 32px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
}

.pricing-tier {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 24px;
}
.direct-exclusive {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: var(--text-2);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.pricing-price {
  font-family: var(--font-d);
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
}
.pricing-currency {
  font-size: 1.5rem;
  vertical-align: super;
  margin-right: 4px;
}
.pricing-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-2);
  margin-left: 8px;
}

.pricing-desc {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 32px;
  min-height: 60px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  flex-grow: 1;
}
.pricing-feature {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 16px;
  color: var(--text-2);
}
.pricing-feature strong {
  color: #fff;
  font-weight: 600;
}
.pricing-feature--excluded {
  color: rgba(255,255,255,0.3);
}

/* ── AURORA LINE BORDER EFFECT (Jakub Antalik border-beam 'line' style) ── */
@property --aurora-x {
  syntax: "<number>";
  initial-value: 0.5;
  inherits: true;
}
@property --aurora-w {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --aurora-h {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --aurora-edge {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@property --aurora-spike {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --aurora-spike-2 {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --aurora-spike-3 {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --aurora-y-1 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-2 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-3 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-4 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-5 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-6 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-7 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-8 { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --aurora-y-9 { syntax: "<length>"; initial-value: 0px; inherits: true; }

.btn-aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  z-index: 1;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
  
  /* The core animations driving the custom properties */
  animation:
    aurora-travel 4s linear infinite,
    aurora-edge-fade 4s linear infinite,
    aurora-breathe 5s ease-in-out infinite alternate;
}
.btn-aurora:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.02) translateZ(0);
}

/* Sharp, bright core line */
.btn-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    #00f0ff, #5d00ff, #ff0055, #ffaa00, #00ffaa, 
    #00f0ff, #5d00ff, #ff0055, #ffaa00, #00ffaa
  );
  background-size: 200% 100%;
  -webkit-mask-image: radial-gradient(
    ellipse calc(80px * var(--aurora-w)) calc(12px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%,
    black 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%
  );
  mask-image: radial-gradient(
    ellipse calc(80px * var(--aurora-w)) calc(12px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%,
    black 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%
  );
  opacity: calc(var(--aurora-edge) * 0.9);
  animation: aurora-pan 8s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* The soft, dancing upward glow */
.btn-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    #00f0ff, #5d00ff, #ff0055, #ffaa00, #00ffaa, 
    #00f0ff, #5d00ff, #ff0055, #ffaa00, #00ffaa
  );
  background-size: 200% 100%;
  -webkit-mask-image: radial-gradient(
    ellipse calc(100px * var(--aurora-w)) calc(70px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%,
    black 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%
  );
  mask-image: radial-gradient(
    ellipse calc(100px * var(--aurora-w)) calc(70px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%,
    black 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%
  );
  filter: blur(8px);
  opacity: calc(var(--aurora-edge) * 0.7);
  animation: aurora-pan 8s linear infinite;
  z-index: -2;
  pointer-events: none;
}

/* Text wrapper to ensure it stays strictly above all effects */
.btn-text {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes aurora-travel {
  0%   { --aurora-x: 0.06;  --aurora-w: 0.5; }
  10%  { --aurora-x: 0.15;  --aurora-w: 0.8; }
  20%  { --aurora-x: 0.25;  --aurora-w: 1.1; }
  30%  { --aurora-x: 0.35;  --aurora-w: 1.3; }
  40%  { --aurora-x: 0.44;  --aurora-w: 1.45; }
  50%  { --aurora-x: 0.5;   --aurora-w: 1.5; }
  60%  { --aurora-x: 0.56;  --aurora-w: 1.45; }
  70%  { --aurora-x: 0.65;  --aurora-w: 1.3; }
  80%  { --aurora-x: 0.75;  --aurora-w: 1.1; }
  90%  { --aurora-x: 0.85;  --aurora-w: 0.8; }
  100% { --aurora-x: 0.94;  --aurora-w: 0.5; }
}

@keyframes aurora-edge-fade {
  0%    { --aurora-edge: 0; }
  12.5% { --aurora-edge: 0; }
  32.5% { --aurora-edge: 1; }
  67.5% { --aurora-edge: 1; }
  87.5% { --aurora-edge: 0; }
  100%  { --aurora-edge: 0; }
}

@keyframes aurora-breathe {
  0%, 100% { --aurora-h: 0.8; }
  25%      { --aurora-h: 1.4; }
  55%      { --aurora-h: 0.85; }
  80%      { --aurora-h: 1.5; }
}

@keyframes aurora-pan {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

.btn-aurora {
  z-index: 0;
  --aurora-field:
    radial-gradient(ellipse calc(36px * var(--aurora-w)) calc(15px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) calc(100% + 2px + var(--aurora-y-1)), rgba(255, 50, 100, 0.72), transparent),
    radial-gradient(ellipse calc(30px * var(--aurora-w)) calc(13px * var(--aurora-h)) at calc(var(--aurora-x) * 100% + 39px) calc(100% - 4px + var(--aurora-y-2)), rgba(40, 180, 220, 0.68), transparent),
    radial-gradient(ellipse calc(33px * var(--aurora-w)) calc(14px * var(--aurora-h)) at calc(var(--aurora-x) * 100% - 36px) calc(100% - 2px + var(--aurora-y-3)), rgba(50, 200, 80, 0.7), transparent),
    radial-gradient(ellipse calc(29px * var(--aurora-w)) calc(15px * var(--aurora-h)) at calc(var(--aurora-x) * 100% - 54px) calc(100% - 7px + var(--aurora-y-4)), rgba(180, 40, 240, 0.68), transparent),
    radial-gradient(ellipse calc(27px * var(--aurora-w)) calc(13px * var(--aurora-h)) at calc(var(--aurora-x) * 100% + 51px) calc(100% - 5px + var(--aurora-y-5)), rgba(255, 160, 30, 0.66), transparent),
    radial-gradient(ellipse calc(36px * var(--aurora-w)) calc(11px * var(--aurora-h)) at calc(var(--aurora-x) * 100% + 21px) calc(100% - 8px + var(--aurora-y-6)), rgba(100, 70, 255, 0.68), transparent),
    radial-gradient(ellipse calc(30px * var(--aurora-w)) calc(11px * var(--aurora-h)) at calc(var(--aurora-x) * 100% - 21px) calc(100% - 6px + var(--aurora-y-7)), rgba(40, 140, 255, 0.64), transparent),
    radial-gradient(ellipse calc(25px * var(--aurora-w)) calc(13px * var(--aurora-h)) at calc(var(--aurora-x) * 100% + 66px) calc(100% - 9px + var(--aurora-y-8)), rgba(240, 50, 180, 0.64), transparent),
    radial-gradient(ellipse calc(23px * var(--aurora-w)) calc(13px * var(--aurora-h)) at calc(var(--aurora-x) * 100% - 66px) calc(100% - 8px + var(--aurora-y-9)), rgba(30, 185, 170, 0.68), transparent);
  background: rgba(13, 13, 16, 0.92) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, background-color 0.3s ease;
  animation:
    aurora-travel 3.1s linear infinite,
    aurora-edge-fade 3.1s linear infinite,
    aurora-spike 4.2s ease-in-out infinite,
    aurora-spike-2 5.3s ease-in-out infinite,
    aurora-spike-3 6.7s -4.8s ease-in-out infinite,
    aurora-wave-1 3.7s -1.1s ease-in-out infinite,
    aurora-wave-2 4.4s -3.4s ease-in-out infinite,
    aurora-wave-3 3.2s -0.6s ease-in-out infinite,
    aurora-wave-4 5.1s -2.7s ease-in-out infinite,
    aurora-wave-5 3.9s -2s ease-in-out infinite,
    aurora-wave-6 4.8s -4s ease-in-out infinite,
    aurora-wave-7 3.4s -1.9s ease-in-out infinite,
    aurora-wave-8 5.4s -0.8s ease-in-out infinite,
    aurora-wave-9 4.1s -3.1s ease-in-out infinite;
}

.btn-aurora:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(22, 22, 27, 0.96) !important;
}

.btn-aurora::after {
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse calc(24px * var(--aurora-w)) calc(28px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38), transparent 65%),
    var(--aurora-field);
  -webkit-mask:
    radial-gradient(ellipse calc(78px * var(--aurora-w)) calc(60px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%, #fff 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    radial-gradient(ellipse calc(78px * var(--aurora-w)) calc(60px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%, #fff 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  opacity: calc(var(--aurora-edge) * 0.78);
  animation: none;
  z-index: 2;
}

.btn-aurora::before {
  inset: 0;
  border-radius: inherit;
  background: var(--aurora-field);
  -webkit-mask-image: radial-gradient(ellipse calc(78px * var(--aurora-w)) calc(60px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%, #fff 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse calc(78px * var(--aurora-w)) calc(60px * var(--aurora-h)) at calc(var(--aurora-x) * 100%) 100%, #fff 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%);
  filter: saturate(0.9);
  opacity: calc(var(--aurora-edge) * 0.36);
  animation: none;
  z-index: 0;
}

.btn-aurora__bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 4px calc(52px * var(--aurora-spike)) at calc(var(--aurora-x) * 100% - 48px) 100%, rgba(100, 70, 255, 0.64), transparent),
    radial-gradient(ellipse 5px calc(47px * var(--aurora-spike-2)) at calc(var(--aurora-x) * 100% + 43px) 100%, rgba(50, 200, 100, 0.62), transparent),
    radial-gradient(ellipse 4px calc(60px * var(--aurora-spike-3)) at calc(var(--aurora-x) * 100% + 103px) 100%, rgba(40, 140, 255, 0.64), transparent);
  filter: blur(3px) saturate(0.9);
  opacity: calc(var(--aurora-edge) * 0.42);
  pointer-events: none;
  z-index: 1;
}

.btn-text { z-index: 3; }

@keyframes aurora-spike {
  0%, 56%, 100% { --aurora-spike: 0.16; }
  66% { --aurora-spike: 1.42; }
  76% { --aurora-spike: 0.22; }
}

@keyframes aurora-spike-2 {
  0%, 43%, 100% { --aurora-spike-2: 0.14; }
  52% { --aurora-spike-2: 1.28; }
  61% { --aurora-spike-2: 0.2; }
}

@keyframes aurora-spike-3 {
  0%, 67%, 100% { --aurora-spike-3: 0.12; }
  74% { --aurora-spike-3: 1.56; }
  83% { --aurora-spike-3: 0.18; }
}

@keyframes aurora-wave-1 { 0%, 100% { --aurora-y-1: 0px; } 35% { --aurora-y-1: -3px; } 70% { --aurora-y-1: 2px; } }
@keyframes aurora-wave-2 { 0%, 100% { --aurora-y-2: -1px; } 25% { --aurora-y-2: 3px; } 68% { --aurora-y-2: -4px; } }
@keyframes aurora-wave-3 { 0%, 100% { --aurora-y-3: 1px; } 42% { --aurora-y-3: -4px; } 76% { --aurora-y-3: 2px; } }
@keyframes aurora-wave-4 { 0%, 100% { --aurora-y-4: 0px; } 30% { --aurora-y-4: 4px; } 62% { --aurora-y-4: -3px; } }
@keyframes aurora-wave-5 { 0%, 100% { --aurora-y-5: -2px; } 47% { --aurora-y-5: 3px; } 78% { --aurora-y-5: -4px; } }
@keyframes aurora-wave-6 { 0%, 100% { --aurora-y-6: 1px; } 21% { --aurora-y-6: -3px; } 65% { --aurora-y-6: 4px; } }
@keyframes aurora-wave-7 { 0%, 100% { --aurora-y-7: -1px; } 39% { --aurora-y-7: 4px; } 72% { --aurora-y-7: -2px; } }
@keyframes aurora-wave-8 { 0%, 100% { --aurora-y-8: 2px; } 33% { --aurora-y-8: -4px; } 69% { --aurora-y-8: 1px; } }
@keyframes aurora-wave-9 { 0%, 100% { --aurora-y-9: 0px; } 28% { --aurora-y-9: 3px; } 58% { --aurora-y-9: -4px; } }

/* ── FOCUS MODE ANIMATED DEMO ── */
.focus-demo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.focus-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity, transform;
}
.focus-bg-gaming {
  background-image: url('https://media.walltune.app/thumbnails/CC82F5CD-C2D2-4E22-9859-F5FD10D2E19D.jpg');
  animation: focusCycle1 9s infinite;
}
.focus-bg-sleep {
  background-image: url('https://media.walltune.app/thumbnails/CBF6156E-D903-467A-83F6-5BB1D7E796DE.jpg');
  animation: focusCycle2 9s infinite;
}
.focus-bg-work {
  background-image: url('https://media.walltune.app/thumbnails/5DF160C4-D1BA-43B1-9F74-36634962709E.jpg');
  animation: focusCycle3 9s infinite;
}

.macos-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.macos-menu-left, .macos-menu-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.macos-menu-left .apple-logo {
  width: 14px;
  height: 14px;
  margin-bottom: 2px;
}
.macos-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 28px;
  background: #000;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 6;
}

@media (max-width: 600px) {
  .hide-mobile { display: none; }
  .macos-notch { width: 120px; }
  .macos-menu-left, .macos-menu-right { gap: 8px; }
}

.focus-widget-container {
  position: absolute;
  top: 48px;
  right: 20px;
  width: 260px;
  height: 64px;
}

.focus-widget {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  will-change: opacity, transform;
}
.focus-widget-gaming {
  animation: focusCycle1 9s infinite;
}
.focus-widget-sleep {
  animation: focusCycle2 9s infinite;
}
.focus-widget-work {
  animation: focusCycle3 9s infinite;
}

.fw-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fw-icon svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}
/* Gaming icon bg (Purple) */
.fw-icon-gaming { background: #8E24AA; }
/* Sleep icon bg (Indigo/Dark Blue) */
.fw-icon-sleep { background: #3949AB; }
/* Work icon bg (Light Blue) */
.fw-icon-work { background: #007AFF; }

.fw-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fw-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.fw-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
}

.fw-toggle {
  width: 44px;
  height: 24px;
  background: #34C759;
  border-radius: 12px;
  position: relative;
}
.fw-knob {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes focusCycle1 {
  0%, 25% { opacity: 1; transform: scale(1); }
  33.33%, 91.66% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes focusCycle2 {
  0%, 25% { opacity: 0; transform: scale(0.98); }
  33.33%, 58.33% { opacity: 1; transform: scale(1); }
  66.66%, 100% { opacity: 0; transform: scale(0.98); }
}

@keyframes focusCycle3 {
  0%, 58.33% { opacity: 0; transform: scale(0.98); }
  66.66%, 91.66% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.98); }
}

.feature-icon {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  flex-shrink: 0;
}
.feature-icon--check {
  color: #fff;
}
.feature-icon--dash {
  color: rgba(255,255,255,0.3);
}

.pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.pricing-btn--outline {
  background: rgba(255,255,255,0.03);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.pricing-btn--outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}
.pricing-btn-icon {
  margin-right: 8px;
  width: 18px;
  height: 18px;
}

.pricing-footer {
  margin-top: 40px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pricing-card--featured {
    transform: none;
  }
  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }
  .pricing-badge {
    position: relative;
    top: auto; right: auto;
    display: inline-block;
    margin-bottom: 16px;
  }
}

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-col-brand {
  padding-right: 40px;
}
.footer-brand {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.footer-desc {
  font-size: 0.85rem;
  color: var(--text-3);
  line-height: 1.6;
}
.footer-heading {
  font-size: 0.75rem;
  font-family: var(--font-b);
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links a { 
  font-size: 0.9rem; 
  color: var(--text-2); 
  transition: color 0.2s; 
}
.footer-links a:hover { 
  color: var(--text); 
}

/* ── SHARED UTILITIES ── */
.placeholder-mono {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 24px;
}
.reveal-up { will-change: transform, opacity; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .feature-inner { grid-template-columns: 1fr; }
  .feature-media-frame { border-left: none; border-top: 1px solid var(--border); min-height: 360px; }
  .bento-col-8, .bento-col-6, .bento-col-4 { grid-column: span 12; }
  .linked-groups-top { grid-template-columns: 1fr; margin-bottom: 40px; }
  .linked-groups-details { grid-template-columns: 1fr; gap: 24px; }
  .linked-groups-copy { max-width: 600px; }
  .linked-groups-media { aspect-ratio: 16/9; }
  .control-section { grid-template-columns: 1fr; }
  .control-intro { max-width: 600px; }
  .control-media-frame { min-height: 440px; }
  .monitor-screen {
    width: clamp(200px, 44vw, 380px);
    height: clamp(120px, 26vw, 240px);
  }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
}
@media (max-width: 768px) {
  .site-nav, .site-nav.nav--scrolled { padding: 18px 24px; }
  .nav-links { display: none; }
  .hero-content { padding: 0 28px 64px; }
  .desktop-frame { flex: 0 0 160vw; width: 160vw; }
  .feature-copy { padding: 64px 28px; }
  .bento-section-header { padding: 64px 28px 40px; }
  .bento-card-text { padding: 28px; }
  .linked-groups-section { padding: 88px 28px; }

  .linked-groups-details { margin-top: 32px; }
  .control-section { padding: 88px 28px; }
  .control-media-frame { min-height: 360px; }
  .capture-media-frame { min-height: 300px; }
  .authors-section, .pricing-section { padding: 80px 28px; }
  .authors-track { gap: 14px; padding: 8px 28px; }
  .author-card { width: min(78vw, 420px); }
  .site-footer { padding: 48px 28px; grid-template-columns: 1fr; gap: 40px; }
}

/* ── BUTTONS (Secondary Pages) ── */
.btn, .btn-primary, .btn-secondary, .btn-apple, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 99px;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), background 0.3s, box-shadow 0.3s;
  cursor: pointer;
  border: none;
}
.btn-primary, .btn-apple {
  background: var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover, .btn-apple:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255,255,255,0.1);
}
.btn-secondary {
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--text-main);
  border: 1px solid rgba(255,255,255,0.2);
}
.btn-outline:hover {
  border-color: var(--text-main);
  transform: translateY(-2px);
}

/* ── SPA ROUTING ── */
.screen {
  display: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.screen.screen--active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.4s var(--ease-out) forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── SECONDARY PAGES (Redesign) ── */
.sub-screen {
  position: relative;
  min-height: 100vh;
  padding: 120px 0 80px;
  background-color: var(--bg);
  overflow: hidden;
}

.sub-screen .about-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 0;
  opacity: 0.15;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.sub-screen .about-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
}

.about-container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Headers */
.about-header {
  text-align: left;
  margin-bottom: 80px;
  max-width: 800px;
}
.about-title, .dl-title, .aff-hero-title, .roadmap-title {
  font-family: var(--font-d);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.about-subtitle, .dl-subtitle {
  font-family: var(--font-b);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--text-muted);
  max-width: 700px;
  line-height: 1.6;
}
.dl-subtitle {
  margin: 0 auto;
}

/* Sections */
.about-story, .about-principles, .about-tech, .legal-content, .dl-split {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: 48px;
  margin-bottom: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Stories / Grids */
.about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 800px) {
  .about-story { grid-template-columns: 2fr 1fr; gap: 80px; }
}
.about-story-text h2, .about-section-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.04em;
}
.about-story-text p, .legal-content p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 1.1rem;
}
.editorial-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 24px;
}
.editorial-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editorial-stats strong {
  font-family: var(--font-d);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.editorial-stats span {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-family: var(--font-b);
}

/* Principles */
.principles-header {
  margin-bottom: 40px;
}
.principles-header h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.principles-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .principles-editorial-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.principle-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.principle-icon-premium {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
}
.principle-icon-premium svg {
  width: 24px;
  height: 24px;
}
.principle-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.principle-content p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 1rem;
}

/* Tech Specs */
.tech-spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .tech-spec-grid { grid-template-columns: 1fr 1fr; }
}
.spec-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  gap: 8px;
}
.spec-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.spec-value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { color: var(--text-muted); font-size: 0.95rem; }
.form-input, .form-textarea {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-textarea { min-height: 150px; resize: vertical; }

/* Roadmap */
.bento-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.roadmap-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform 0.3s;
}
.roadmap-card:hover { transform: translateY(-4px); }
.roadmap-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.roadmap-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.roadmap-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.roadmap-badge.planned { background: rgba(255,255,255,0.1); color: var(--text-muted); }
.roadmap-badge.in_progress { background: rgba(155,81,224,0.2); color: #c48dfc; }
.roadmap-badge.completed { background: rgba(46,204,113,0.2); color: #2ecc71; }
.roadmap-card-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin-bottom: 20px; }
.roadmap-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.roadmap-progress-bar {
  background: rgba(0,0,0,0.5);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.roadmap-progress-fill {
  background: var(--color-primary);
  height: 100%;
  border-radius: 3px;
  transition: width 1s var(--ease-out);
}
.roadmap-discord-callout {
  background: linear-gradient(135deg, rgba(88,101,242,0.1) 0%, rgba(88,101,242,0.05) 100%);
  border: 1px solid rgba(88,101,242,0.2);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 64px;
}
.discord-callout-icon { font-size: 3rem; color: #5865F2; }
.discord-callout-content h3 { font-size: 1.5rem; margin-bottom: 12px; }
.discord-callout-content p { color: var(--text-muted); }

/* Download Split Layout */
.dl-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 48px;
}
@media (min-width: 768px) {
  .dl-split { grid-template-columns: 1fr 1fr; align-items: center; }
}
.dl-split-img img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Releases */
.releases-timeline {
  border-left: 2px solid rgba(255,255,255,0.1);
  padding-left: 32px;
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.release-item { position: relative; }
.release-item::before {
  content: '';
  position: absolute;
  left: -41px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--bg);
}
.release-version {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}
.release-date {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.release-notes { color: var(--text-muted); line-height: 1.6; }
.release-notes ul { padding-left: 20px; }
.release-notes li { margin-bottom: 8px; }

/* CTAs */
.about-cta {
  text-align: center;
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── UTILITY SCREENS (Recover) ── */
.sub-screen--utility {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px;
  position: relative;
}
.utility-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb, 155, 81, 224), 0.15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.utility-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 48px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
}
.utility-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  color: var(--text);
}
.utility-icon svg {
  width: 32px;
  height: 32px;
}
.utility-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.utility-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 32px;
}

/* ── RELEASE NOTES ── */
.releases-header {
  padding-top: 160px;
  padding-bottom: 60px;
  text-align: center;
}
.releases-header h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.releases-header .subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
}
.releases-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 120px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.editorial-release {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
}
.editorial-release:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.1);
}
.editorial-release-details > summary {
  list-style: none;
  cursor: pointer;
}
.editorial-release-details > summary::-webkit-details-marker {
  display: none;
}
.editorial-release-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
  padding-bottom: 0;
  flex-wrap: wrap;
  gap: 20px;
}
.editorial-release-details[open] .editorial-release-header {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.editorial-release-toggle {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  margin-left: 8px;
}
.editorial-release-details[open] .editorial-release-toggle {
  transform: rotate(180deg);
}
.editorial-release-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.editorial-release-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.editorial-release-date {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-family: monospace;
}
.editorial-release-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.release-badge {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.release-badge--version { background: rgba(255,255,255,0.1); color: #fff; }
.release-badge--latest { background: rgba(var(--color-primary-rgb, 155, 81, 224), 0.2); color: var(--color-primary); border: 1px solid rgba(var(--color-primary-rgb, 155, 81, 224), 0.3); }
.release-badge--prerelease { background: rgba(255, 170, 0, 0.2); color: #ffaa00; }
.editorial-gh-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  transition: all 0.2s;
}
.editorial-gh-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.editorial-release-body {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 1.05rem;
}
.editorial-release-body h1, .editorial-release-body h2, .editorial-release-body h3 {
  color: var(--text);
  margin: 24px 0 12px 0;
  font-weight: 600;
}
.editorial-release-body ul {
  padding-left: 20px;
  margin-bottom: 20px;
}
.editorial-release-body li {
  margin-bottom: 8px;
}
.editorial-release-body p {
  margin-bottom: 16px;
}
.editorial-release-body a {
  color: var(--color-primary);
  text-decoration: none;
}
.editorial-release-body a:hover {
  text-decoration: underline;
}

/* ── FAQ ACCORDION ── */
.faq-details {
  margin-bottom: 12px;
}
.faq-summary {
  background: rgba(255,255,255,0.02);
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: background 0.3s, border-color 0.3s;
}
.faq-summary:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.faq-toggle {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  margin-left: 16px;
}
.faq-details[open] .faq-summary {
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}
.faq-details[open] .faq-toggle {
  transform: rotate(180deg);
}
.faq-body {
  padding: 16px 24px 24px;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: rgba(255,255,255,0.01);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── DOWNLOAD SCREEN ── */
.sub-screen--download {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 24px;
}
.dl-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.dl-centered {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dl-icon-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 40px;
}
.dl-app-icon {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.dl-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Bouncing animation like macOS dock */
  animation: mac-bounce 2.2s infinite;
  transform-origin: bottom;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4));
}
@keyframes mac-bounce {
  0%, 65%, 100% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  20% {
    transform: translateY(-45px) scaleY(1.05);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  40% {
    transform: translateY(0) scaleY(0.95);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  50% {
    transform: translateY(-15px) scaleY(1.02);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}
/* Expanding rings */
.dl-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 28px;
  opacity: 0;
  animation: ring-expand 3s infinite linear;
}
.dl-ring-1 { animation-delay: 0s; }
.dl-ring-2 { animation-delay: 1s; }
.dl-ring-3 { animation-delay: 2s; }

@keyframes ring-expand {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

.dl-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s, transform 0.3s;
  width: 100%;
}
.dl-state--hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
}
.dl-label {
  font-family: var(--font-b);
  font-size: 0.9rem;
  color: var(--text-2);
  margin-bottom: 16px;
}
.dl-progress-bar {
  width: 240px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.dl-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--text);
  border-radius: 2px;
}

.dl-title {
  font-family: var(--font-d);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}
.dl-subtitle {
  font-size: 0.95rem;
  color: var(--text-2);
}
.dl-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Steps */
.dl-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
  list-style: none;
  padding: 0;
}
.dl-steps.visible {
  opacity: 1;
  transform: translateY(0);
}
.dl-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  background: rgba(255,255,255,0.03);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
.dl-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.dl-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dl-step-body strong {
  font-size: 0.9rem;
  font-family: var(--font-b);
  color: var(--text);
}
.dl-step-body span {
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.4;
}

.dl-req {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 48px;
  margin-bottom: 24px;
}
.dl-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-family: var(--font-b);
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s;
}
.dl-back:hover {
  color: var(--text);
}