/* ============================================
   NIBBY — Scroll-Snapped Paginated Carousel
   Each page has its own phone + single video
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  --bg: #FFF5D8;
  --accent: #0028FD;
  --accent-dark: #001EBE;
  --text: #1A1A1A;
  --text-secondary: #6B6B6B;

  --phone-width: 350px;
  --phone-aspect: 9 / 19.5;
  --phone-radius: 60px;
  --phone-border: 5px;
  --phone-glow:
    0 10px 30px rgba(0, 40, 253, 0.5),
    0 20px 60px rgba(0, 40, 253, 0.4),
    0 30px 100px rgba(0, 40, 253, 0.2);

  --carousel-items: 8;
  --carousel-max-width: 1100px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Page state animation tokens */
  --state-entering-scale: 0.96;
  --state-entering-blur: 6px;
  --state-entering-opacity: 0.6;
  --state-exiting-scale: 0.94;
  --state-exiting-blur: 8px;
  --state-exiting-opacity: 0.4;
  --state-transition: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Custom Font Faces --- */
@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Extralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Extrabold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvena';
  src: url('fonts/Helvena-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TBJ Terminal Mono';
  src: url('fonts/TBJTerminalMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TBJ Terminal Mono';
  src: url('fonts/TBJTerminalMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tan Tuesday';
  src: url('fonts/tan_-_tuesday-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'SF Pro Rounded', 'SF Pro', system-ui, -apple-system, 'Nunito', 'Helvena', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* body doesn't scroll; <main> is the snap container */
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}

a {
  color: var(--accent);
  text-decoration: none;
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='24' font-size='24'>↗️</text></svg>") 4 4, pointer;
}

a:hover {
  color: var(--accent-dark);
}

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

/* ============================================
   SNAP CONTAINER — <main> is the scroll target
   ============================================ */
main {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

main::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* All major sections snap to start */
.snap-page,
.carousel-page {
  scroll-snap-align: start;
}

/* Carousel pages: mandatory stop, no skipping */
.carousel-page {
  scroll-snap-stop: always;
}

/* ============================================
   SHARED COMPONENTS
   ============================================ */

/* --- CTA Pill Button --- */
.cta-pill {
  display: inline-block;
  padding: 10px 24px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  border-radius: 980px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s var(--ease-spring),
              color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.cta-pill:hover {
  background: #f0f0f0;
  color: var(--text);
  transform: scale(1.03);
}

.cta-pill:active {
  transform: scale(0.97);
}

.cta-pill-large {
  padding: 14px 36px;
  font-size: 16px;
}

/* --- CTA Link (text style) --- */
.cta-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

.cta-link:hover {
  color: var(--accent-dark);
}

/* --- Phone Frame --- */
.phone-frame {
  position: relative;
  width: var(--phone-width);
  aspect-ratio: var(--phone-aspect);
  border-radius: var(--phone-radius);
  overflow: hidden;
  border: var(--phone-border) solid var(--text);
  background: #000;
  box-shadow: var(--phone-glow);
  will-change: transform, filter, opacity;
  transform-style: preserve-3d;
  transition:
    box-shadow 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out);
}

.phone-frame video,
.phone-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--phone-radius) - var(--phone-border));
}

/* --- Footer Links Section (cream, with rounded bottom over blue) --- */
.footer-links-section {
  background-color: var(--bg);
  border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px);
  position: relative;
  z-index: 1;
  transition: background-color 0.5s var(--ease-out);
  min-height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: clamp(40px, 6vh, 64px) 24px;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

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

.footer-dot {
  color: var(--text-secondary);
  font-size: 14px;
  opacity: 0.4;
}

/* --- Footer (blue branded section) --- */
.site-footer {
  background-color: var(--accent);
  text-align: center;
  padding: calc(clamp(48px, 8vh, 80px) + clamp(24px, 4vw, 48px)) 24px 0;
  overflow: hidden;
  margin-top: calc(-1 * clamp(24px, 4vw, 48px));
  transition: background-color 0.5s var(--ease-out);
  min-height: 60vh;
}

/* -- Brand Credit Capsule -- */
.footer-credit-capsule {
  display: block;
  position: relative;
  z-index: 1;
  border: 2px solid #FEF3D4;
  border-radius: 980px;
  padding: clamp(24px, 3vw, 40px) clamp(48px, 8vw, 120px);
  margin: 0 auto clamp(48px, 6vh, 72px);
  max-width: 600px;
  width: fit-content;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='24' font-size='24'>↗️</text></svg>") 4 4, pointer;
}

.footer-credit-capsule:hover {
  background: rgba(254, 243, 212, 0.1);
  border-color: #FEF3D4;
  color: #FEF3D4;
}

.footer-credit-capsule:hover .credit-line {
  color: #FEF3D4;
}

.credit-line {
  font-family: 'TBJ Terminal Mono', 'Courier New', monospace;
  color: #FEF3D4;
  font-size: clamp(11px, 1.6vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.8;
  display: block;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
  letter-spacing: 0.15em;
  transition: color 0.5s var(--ease-out);
}

/* -- Oversized "hus" Wordmark -- */
.footer-wordmark {
  position: relative;
  width: 100%;
  line-height: 0.75;
  margin-top: clamp(16px, 3vh, 32px);
  pointer-events: none;
}

.footer-wordmark-text {
  font-family: 'Tan Tuesday', serif;
  color: #FEF3D4;
  font-size: clamp(180px, 30vw, 480px);
  font-weight: 400;
  display: block;
  line-height: 0.75;
  letter-spacing: -0.02em;
  transition: color 0.5s var(--ease-out);
}

/* ============================================
   STICKY HEADER (mobile only)
   ============================================ */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px clamp(16px, 4vw, 48px);
  background: transparent;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease-out);
  pointer-events: none;
  /* Hidden on desktop by default */
  display: none;
}

.sticky-header.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.sticky-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sticky-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

/* Wordmark hidden — mobile header is logo + download only */
.sticky-header-wordmark {
  display: none;
}

/* ============================================
   SNAP PAGE: HERO
   ============================================ */
.hero {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px 24px 0;
  position: relative;
  overflow: visible;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.color-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
}

.hero-wordmark {
  height: clamp(28px, 4vw, 40px);
  width: auto;
  margin: 0 auto 24px;
  opacity: 0.9;
  color: var(--accent);
  transition: color 0.5s var(--ease-out);
}

.hero-headline {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.hero-subline {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-weight: 400;
}

/* --- Hero Phone (peeking from bottom) --- */
.hero-phone {
  margin-top: 64px;
  pointer-events: none;
  transition: opacity 200ms ease-out, filter 200ms ease-out;
}

.hero-phone-frame {
  transform-style: preserve-3d;
}

/* ============================================
   CAROUSEL WRAPPER
   ============================================ */
.carousel-wrapper {
  position: relative;
}

/* ============================================
   FIXED OVERLAY — dots, icon, and CTA
   ============================================
   Only these elements stay fixed while the
   phone + text scroll with each page.
   ============================================ */
.carousel-fixed-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--carousel-max-width);
  height: 100vh;
  height: 100dvh;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.carousel-fixed-overlay.visible {
  opacity: 1;
}

/* Re-enable pointer events on interactive children */
.carousel-fixed-overlay .carousel-icon,
.carousel-fixed-overlay .carousel-indicator {
  pointer-events: auto;
}

/* --- Hero Poster (sits on top of videos, fades out) --- */
.hero-poster {
  z-index: 2;
  transition: opacity 0.4s var(--ease-out);
}

/* --- Carousel Icon (centered in left gap) --- */
.carousel-icon {
  position: absolute;
  left: 0;
  width: calc((100% - var(--phone-width)) / 2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-icon img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

/* --- Carousel Phone --- */
.carousel-phone {
  cursor: pointer;
}

.carousel-phone .phone-frame {
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.carousel-phone.pop .phone-frame {
  animation: phone-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes phone-pop {
  0%   { scale: 1; }
  20%  { scale: 0.96; }
  60%  { scale: 1.02; }
  100% { scale: 1; }
}


/* --- Desktop Dots (right of phone center, in fixed overlay) --- */
.carousel-dots-desktop {
  position: absolute;
  left: calc(50% + var(--phone-width) / 2 + 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* --- Carousel Indicator (vertical capsule dots) --- */
.carousel-indicator {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  align-items: center;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  border: none;
  background: rgba(26, 26, 26, 0.15);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: height 0.35s var(--ease-out), background 0.3s;
}

.indicator-dot.active {
  height: 32px;
  background: var(--accent);
}

/* Past items stay as small grey dots (same as future) */
.indicator-dot.past {
  background: rgba(26, 26, 26, 0.35);
}

.indicator-dot:hover:not(.active):not(.past) {
  background: rgba(26, 26, 26, 0.35);
}

/* --- Mobile Indicator (hidden on desktop, shown on mobile) --- */
.carousel-indicator.mobile-indicator {
  display: none;
}

/* --- Carousel Videos --- */
/* Each phone has a single video; page-inner transition handles visibility */
.carousel-video {
  pointer-events: none;
}

.carousel-video.active {
  pointer-events: auto;
}

/* --- Static Image Slide (last carousel item) --- */
/* Page-inner transition handles visibility */
.carousel-slide-image {
  pointer-events: none;
}

.carousel-slide-image.active {
  pointer-events: auto;
}

/* ============================================
   SNAP PAGES: CAROUSEL
   ============================================
   Each carousel page is exactly 100vh tall.
   The phone scrolls WITH its text as one unit
   inside .carousel-page-inner.

   Layout: phone is perfectly centered in the
   viewport. Text sits to the right of the dots.
   Both animate together via .carousel-page-inner.

   Page state (active/entering/exiting/idle) is
   set via data-state attribute by JavaScript.
   ============================================ */
.carousel-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* --- Page Inner: phone centered + text to right --- */
.carousel-page-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Animation target — phone + text animate together */
  will-change: transform, filter, opacity;
  transition:
    transform var(--state-transition),
    filter var(--state-transition),
    opacity var(--state-transition);
}

/* --- Phone Slot: centered in viewport --- */
.carousel-phone-slot {
  /* Phone is centered via the flex centering on page-inner */
  min-width: var(--phone-width);
  min-height: calc(var(--phone-width) / (9 / 19.5));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Text content: positioned to the right of dots --- */
.carousel-page-content {
  position: absolute;
  /* Position to the right of the phone center + phone half + dot gap + dot width + gap */
  left: calc(50% + var(--phone-width) / 2 + 32px + 8px + 24px);
  width: clamp(200px, 22vw, 280px);
}

/* --- Page State Animations (on page-inner, not page-content) --- */
/* Active: centered, snapped page — full visibility */
.carousel-page[data-state="active"] .carousel-page-inner {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
}

/* Entering: next page coming into view — subtle scale/blur/opacity */
.carousel-page[data-state="entering"] .carousel-page-inner {
  transform: scale(var(--state-entering-scale));
  filter: blur(var(--state-entering-blur));
  opacity: var(--state-entering-opacity);
}

/* Exiting: previous page leaving view — more scale/blur/opacity */
.carousel-page[data-state="exiting"] .carousel-page-inner {
  transform: scale(var(--state-exiting-scale));
  filter: blur(var(--state-exiting-blur));
  opacity: var(--state-exiting-opacity);
}

/* Idle: all other pages — hidden */
.carousel-page[data-state="idle"] .carousel-page-inner {
  transform: scale(0.9);
  filter: blur(4px);
  opacity: 0;
}

/* --- Text Typography (matches original carousel text) --- */
.carousel-page-content h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.carousel-page-content p {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 400;
}

/* --- CTA Page (last carousel page, replaces h2/p with button) --- */
.carousel-page-cta {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.carousel-page-cta .cta-pill {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
}

.carousel-page-cta .cta-pill:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* ============================================
   INVERTED COLOR MODE (easter egg toggle)
   ============================================ */

body.inverted {
  --bg: #0028FD;
  --accent: #FFF5D8;
  --accent-dark: #FEF3D4;
  --text: #FFF5D8;
  --text-secondary: rgba(255, 245, 216, 0.7);
  --phone-glow:
    0 10px 30px rgba(255, 245, 216, 0.3),
    0 20px 60px rgba(255, 245, 216, 0.2),
    0 30px 100px rgba(255, 245, 216, 0.1);
}

/* CTA pill: translucent on blue bg */
body.inverted .cta-pill {
  background: rgba(255, 255, 255, 0.15);
  color: #FFF5D8;
  border: 1px solid rgba(255, 245, 216, 0.3);
}

body.inverted .cta-pill:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFF5D8;
}

/* Indicator dots */
body.inverted .indicator-dot {
  background: rgba(255, 245, 216, 0.25);
}

body.inverted .indicator-dot.past {
  background: rgba(255, 245, 216, 0.45);
}

body.inverted .indicator-dot:hover:not(.active):not(.past) {
  background: rgba(255, 245, 216, 0.45);
}

/* Sticky header on mobile */
body.inverted .sticky-header {
  background: rgba(0, 40, 253, 0.95);
}

/* Footer: blue → cream bg with blue text */
body.inverted .site-footer {
  background-color: #FFF5D8;
}

body.inverted .footer-credit-capsule {
  border-color: #0028FD;
}

body.inverted .footer-credit-capsule:hover {
  background: rgba(0, 40, 253, 0.1);
  border-color: #0028FD;
}

body.inverted .credit-line {
  color: #0028FD;
}

body.inverted .footer-credit-capsule:hover .credit-line {
  color: #0028FD;
}

body.inverted .footer-wordmark-text {
  color: #0028FD;
}

/* ============================================
   BETA ACCESS INTERSTITIAL
   ============================================ */

/* Button reset for .cta-pill on <button> elements */
button.cta-pill {
  border: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --- Modal Overlay (IS the blurred backdrop) --- */
.beta-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
  will-change: opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.beta-modal[hidden] {
  display: none;
}

.beta-modal.open,
.beta-modal.closing {
  opacity: 1;
  visibility: visible;
}

.beta-modal.closing {
  opacity: 0;
  transition: opacity 0.6s 0.3s var(--ease-out), visibility 0.6s 0.3s;
}

/* --- Inner Column (aligns heading, X, and cards) --- */
.beta-modal-inner {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 48px));
}

/* --- Header Row --- */
.beta-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.beta-modal-heading {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

/* --- Close Button --- */
.beta-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: rgba(0, 0, 0, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.beta-modal-close:hover {
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Card Stack --- */
.beta-modal-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Card (each is a clickable <a>) --- */
.beta-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  text-decoration: none;
  color: #1A1A1A;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.06);
  transition:
    transform 800ms var(--ease-out),
    box-shadow 0.2s,
    opacity 800ms var(--ease-out),
    filter 800ms var(--ease-out);
  cursor: pointer;
  /* Start state for staggered animation */
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.95);
  /* Prevent clicks until animation completes */
  pointer-events: none;
  /* GPU acceleration for smooth mobile animation */
  will-change: transform, opacity, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.beta-card:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.08);
  transform: scale(1.01);
}

.beta-card:active {
  transform: scale(0.98);
}

/* --- Staggered entrance animation --- */
.beta-modal.open .beta-card {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

/* Enable clicks only after animation completes */
.beta-modal.ready .beta-card {
  pointer-events: auto;
}

/* Stagger on open: first card, then second */
.beta-modal.open .beta-card:nth-child(1) {
  transition-delay: 200ms;
}

.beta-modal.open .beta-card:nth-child(2) {
  transition-delay: 400ms;
}

/* Reverse stagger on close: second card first, then first */
.beta-modal.closing .beta-card {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.95);
}

.beta-modal.closing .beta-card:nth-child(1) {
  transition-delay: 150ms;
}

.beta-modal.closing .beta-card:nth-child(2) {
  transition-delay: 0ms;
}

/* --- Card Emoji --- */
.beta-card-emoji {
  font-size: 40px;
  flex-shrink: 0;
  line-height: 1;
}

/* --- Card Text --- */
.beta-card-text {
  flex: 1;
  min-width: 0;
}

.beta-card-text h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: #1A1A1A;
}

.beta-card-text p {
  font-size: 16px;
  color: #6B6B6B;
  line-height: 1.45;
  margin: 0;
}

/* --- Card Arrow --- */
.beta-card-arrow {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.2s, transform 0.2s var(--ease-out);
  display: flex;
  align-items: center;
}

.beta-card:hover .beta-card-arrow {
  color: rgba(0, 0, 0, 0.5);
  transform: translateX(2px);
}

/* ============================================
   RESPONSIVE — Mobile (<= 1024px)
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --phone-radius: 44px;
    --phone-border: 4px;
  }

  /* Show sticky header on mobile */
  .sticky-header {
    display: block;
  }

  /* Hero */
  .hero {
    padding: 80px 20px 40px;
  }

  .hero-phone .phone-frame {
    width: auto;
    height: calc(100vh - 280px);
    height: calc(100dvh - 280px);
    aspect-ratio: var(--phone-aspect);
  }

  /* Hide icon on mobile — shown in sticky header instead */
  .carousel-icon {
    display: none;
  }

  /* Fixed overlay: full width on mobile */
  .carousel-fixed-overlay {
    max-width: 100%;
  }

  /* Mobile indicator: to the right of the phone */
  .carousel-indicator.mobile-indicator {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    position: absolute;
    /* Phone height on mobile = 100dvh - 240px, width = height * 9/19.5 */
    left: calc(50% + ((100dvh - 240px) * 9 / 19.5) / 2 + 24px);
    top: 40%;
    transform: translateY(-50%);
  }

  .mobile-indicator .indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }

  .mobile-indicator .indicator-dot.active {
    height: 24px;
  }

  /* Hide desktop dots on mobile */
  .carousel-dots-desktop {
    display: none;
  }

  /* Carousel pages: column layout, phone above text */
  .carousel-page {
    padding: 0 20px;
  }

  .carousel-page-inner {
    flex-direction: column;
    justify-content: center;
    padding: 130px 0 80px;
    gap: 24px;
  }

  /* Phone frame: height-based sizing on mobile.
     Must leave room for padding (160px) + gap (24px) + text (~56px) = ~240px */
  .carousel-phone .phone-frame {
    width: auto;
    height: calc(100vh - 240px);
    height: calc(100dvh - 240px);
    aspect-ratio: var(--phone-aspect);
  }

  /* Phone slot: auto height on mobile */
  .carousel-phone-slot {
    min-width: unset;
    min-height: unset;
  }

  /* Text: not absolute on mobile, flows in column */
  .carousel-page-content {
    position: static;
    left: auto;
    text-align: center;
    width: 100%;
    max-width: 280px;
  }

  .carousel-page-cta {
    justify-content: center;
    align-items: center;
  }

  .carousel-page-content h2 {
    font-size: clamp(22px, 6vw, 28px);
  }

  .carousel-page-content p {
    font-size: clamp(15px, 4vw, 17px);
  }

  /* Footer mobile adjustments */
  .footer-credit-capsule {
    padding: clamp(20px, 4vw, 32px) clamp(32px, 8vw, 64px);
    max-width: 90vw;
  }
}

/* ============================================
   RESPONSIVE — Small Mobile (<= 480px)
   ============================================ */
@media (max-width: 480px) {
  :root {
    --phone-radius: 36px;
    --phone-border: 3px;
  }

  .carousel-phone .phone-frame {
    height: calc(100vh - 240px);
    height: calc(100dvh - 240px);
  }

  .hero-headline {
    font-size: clamp(28px, 8vw, 40px);
  }

  .footer-credit-capsule {
    padding: 16px 24px;
    border-radius: 40px;
  }

  .credit-line {
    letter-spacing: 0.08em;
  }

  /* Beta modal: small mobile */
  .beta-modal-inner {
    width: calc(100vw - 32px);
  }

  .beta-card {
    padding: 24px 20px;
    gap: 16px;
  }

  .beta-card-emoji {
    font-size: 32px;
  }

  .beta-card-text h3 {
    font-size: 18px;
  }

  .beta-card-text p {
    font-size: 14px;
  }

  .beta-modal-heading {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* ============================================
   SHORT VIEWPORT — scale phone to fit
   ============================================ */
@media (max-height: 700px) {
  .carousel-phone {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

@media (max-height: 580px) {
  .carousel-phone {
    transform: scale(0.7);
    transform-origin: center center;
  }
}

/* Short + mobile combo */
@media (max-width: 1024px) and (max-height: 700px) {
  .carousel-page-inner {
    padding-top: 44px;
  }
}

@media (max-width: 1024px) and (max-height: 580px) {
  .carousel-page-inner {
    padding-top: 40px;
  }
}

/* ============================================
   PRIVACY POLICY PAGE
   ============================================ */

/* --- Privacy Content --- */
.privacy-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.privacy-content .privacy-header-brand {
  display: block;
  text-align: center;
  margin-bottom: 32px;
  transition: opacity 0.2s;
}

.privacy-content .privacy-header-brand:hover {
  opacity: 0.7;
}

.privacy-header-wordmark {
  height: clamp(28px, 4vw, 40px);
  width: auto;
}

.privacy-content h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.privacy-meta {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 48px;
}

.privacy-content section {
  margin-bottom: 8px;
}

.privacy-content h2 {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.privacy-content h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 8px;
  margin-top: 24px;
}

.privacy-content h3:first-child {
  margin-top: 0;
}

.privacy-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.privacy-content p:last-child {
  margin-bottom: 0;
}

.privacy-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 40, 253, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

.privacy-content a:hover {
  color: var(--accent-dark);
  text-decoration-color: var(--accent-dark);
}

.privacy-content ul,
.privacy-content ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.privacy-content li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.privacy-content li:last-child {
  margin-bottom: 0;
}

.privacy-content hr {
  border: none;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  margin: 48px 0;
}

.privacy-content strong {
  color: var(--text);
  font-weight: 600;
}

/* --- Footer: current page indicator --- */
.footer-links a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* --- Privacy page responsive --- */
@media (max-width: 768px) {
  .privacy-content {
    padding: 32px 20px 60px;
  }

  .privacy-meta {
    margin-bottom: 36px;
  }
}

@media (max-width: 480px) {
  .privacy-content h1 {
    font-size: clamp(28px, 8vw, 36px);
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  main {
    scroll-snap-type: y proximity;
  }

  .carousel-video,
  .carousel-slide-image,
  .carousel-page-inner {
    filter: none !important;
    transform: none !important;
  }

  .sticky-header {
    transform: none !important;
  }
}