/* --- COLOR PALETTE VARIABLES --- */
:root {
    --bg-color: #2A0E2F;          /* deep aubergine ground */
    --bg-deep: #1C0820;           /* near-black aubergine */
    --text-color: #F5F1ED;
    --primary-accent: #94778B;
    --accent-hover: #A99985;
    --sidebar-bg: #1C0820;
    --divider-line: #5C4E4E;
    --light-text: #F5F1ED;
    /* refined accents — neon pink retired in favour of a dusty editorial rose */
    --electric-accent: #C08497;   /* dusty rose (legacy var, now muted) */
    --rose: #C08497;
    --rose-deep: #9E6478;
    --gold-accent: #C9A96E;
    --gold-soft: #DCC79B;
    /* warm editorial light grounds */
    --bone: #F0E9DE;
    --ivory: #E7DDCC;
    --ink: #271029;               /* text on light grounds */
    --ink-soft: #5A4256;
}

/* --- 1. GLOBAL STYLES --- */
*, *::before, *::after { box-sizing: border-box; }

/* Luxury cursor */
* {
    cursor: default;
}

a, button, .clickable {
    cursor: pointer;
}

a:hover, button:hover {
    cursor: pointer;
}

body {
    font-family: 'Gowun Dodum', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color); 
    color: var(--text-color); 
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden; /* ADD THIS: Traps rogue elements from escaping the screen horizontally */
}


/* --- 2. SECTION SIZING --- */
section {
    min-height: 100vh; 
    padding: 80px 10vw; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

/* --- 3. TOP NAV BAR (Apple-style standing bar) --- */
#top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 26px;
    background: rgba(20, 10, 32, 0.62);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(245, 241, 237, 0.08);
    z-index: 2000;
}

.top-nav-left {
    display: flex; align-items: center; gap: 9px;
    justify-self: start; text-decoration: none;
    height: 100%;
}
.top-nav-star {
    font-size: 19px; color: var(--gold-accent);
    line-height: 1; display: flex; align-items: center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.top-nav-wordmark {
    font-family: 'Noto Rashi Hebrew', serif;
    font-size: 20px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--text-color); line-height: 1;
    display: flex; align-items: center;
}

.top-nav-links {
    justify-self: center;
    display: flex; align-items: center; gap: 30px;
}
.top-nav-links a {
    color: rgba(245, 241, 237, 0.78);
    text-decoration: none;
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 12.5px; letter-spacing: 0.01em;
    transition: color 0.2s ease;
    border: none !important; background: none !important;
    padding: 0 !important; opacity: 1 !important;
}
.top-nav-links a:hover { color: #ffffff; }
.top-nav-links a#nav-demo-btn { color: var(--gold-soft); }

.top-nav-reserve {
    justify-self: end;
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 12px; letter-spacing: 0.04em;
    color: #1a0d26; background: var(--gold-accent);
    text-decoration: none; padding: 7px 17px; border-radius: 30px;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.top-nav-reserve:hover { background: var(--gold-soft); transform: translateY(-1px); }

/* Hide old floating wordmark — it's in the nav now */
.cin-wordmark { display: none !important; }

/* Hamburger hidden on desktop */
#hamburger-btn { display: none; }

/* --- 3b. TABLET + MOBILE: links collapse into a TOP dropdown (no side drawer) --- */
@media (max-width: 1080px) {
    .top-nav-links { display: none; }
    .top-nav-reserve { margin-right: 46px; }
    #hamburger-btn {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        position: absolute; top: 50%; right: 22px; transform: translateY(-50%);
        width: 30px; height: 30px; padding: 0;
        background: none; border: none; cursor: pointer; z-index: 3000;
    }
    #hamburger-btn .hb-line {
        display: block; width: 22px; height: 1.5px;
        background: var(--gold-accent); border-radius: 2px;
        transition: transform 0.35s ease, opacity 0.25s ease;
    }
    #hamburger-btn[aria-expanded="true"] .hb-line:first-child { transform: translateY(3.25px) rotate(45deg); }
    #hamburger-btn[aria-expanded="true"] .hb-line:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
}

/* --- 4. TOP DROPDOWN MENU (replaces the old side pull-out) --- */
#sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%; height: auto; max-height: 100vh; overflow-y: auto;
    background: rgba(16, 8, 24, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding: 74px 0 26px;
    display: flex; flex-direction: column;
    transform: translateY(-104%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1500;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(201, 169, 110, 0.14);
}

#sidebar a {
    display: block; text-align: center;
    color: var(--light-text) !important;
    text-decoration: none;
    padding: 12px 30px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 500;
    opacity: 0.62;
    border: none !important; background: none !important;
    transition: opacity 0.25s ease, color 0.25s ease;
}

#sidebar a::before,
#sidebar a::after {
    content: none !important;
    display: none !important;
}

#sidebar a:hover {
    opacity: 1;
    color: var(--gold-soft) !important;
    background: none !important;
    border: none !important;
}

/* --- 5. THE ACTIVE STATE --- */
#sidebar.active { transform: translateY(0); }

/* --- 6. CONTACT SECTION ICONS --- */
.social-links {
    display: flex;
    gap: 14px;
    margin-top: 40px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(30, 26, 24, 0.25);
    color: rgba(30, 26, 24, 0.55);
    font-size: 16px;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.social-links a:hover {
    border-color: rgba(30, 26, 24, 0.7);
    color: var(--sidebar-bg);
    transform: none;
}

/* --- 7. CONTACT SECTION --- */
#Contact {
    background-color: #D9CEBF;
    color: var(--sidebar-bg);
}

#Contact h2,
#Contact p {
    color: var(--sidebar-bg);
}

#Contact .contact-form label {
    color: rgba(30, 26, 24, 0.5);
}

#Contact .contact-form input,
#Contact .contact-form select,
#Contact .contact-form textarea {
    color: var(--sidebar-bg);
    border-bottom-color: rgba(30, 26, 24, 0.2);
}

#Contact .contact-form input:focus,
#Contact .contact-form select:focus,
#Contact .contact-form textarea:focus {
    border-bottom-color: rgba(30, 26, 24, 0.5);
}

#Contact .contact-form select option {
    background: var(--text-color);
    color: var(--sidebar-bg);
}

#Contact .contact-form input::placeholder,
#Contact .contact-form textarea::placeholder {
    color: rgba(30, 26, 24, 0.3);
}


.founding-note {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(30, 26, 24, 0.4);
    text-align: center;
    margin-bottom: 12px;
    margin-top: 8px;
}

/* --- 7. CONTACT FORM STYLES --- */
.contact-form {
    width: 100%;
    max-width: 600px; 
    margin: 30px auto; 
    text-align: left; 
}

.form-group { margin-bottom: 20px; }

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 241, 237, 0.5);
}

.required { color: rgba(201, 169, 110, 0.5); }

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid rgba(245, 241, 237, 0.15);
    border-radius: 0;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    background: transparent;
    color: var(--text-color);
    transition: border-color 0.25s ease;
    outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-bottom-color: rgba(245, 241, 237, 0.5);
}

.contact-form select option {
    background: var(--sidebar-bg);
    color: var(--text-color);
}

.submit-btn {
    background-color: var(--primary-accent); 
    color: var(--light-text); 
    padding: 14px 24px;
    border: none;
    border-radius: 40px; /* Changed from 4px to match your other pill-shaped buttons */
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(148, 119, 139, 0.3);
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.submit-btn:hover {
    background-color: var(--gold-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(201, 169, 110, 0.4);
}

.submit-btn:hover::before {
    width: 400px;
    height: 400px;
}

.submit-btn:active {
    transform: translateY(0);
}
/* --- 8. HERO SECTION --- */
/* CINEMATIC HERO */
.cinematic-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden; /* ADD THIS: Specifically traps elements in the hero section */
  display: flex;
  align-items: flex-end;
  padding: 0;
  background: #1a0d26;
}

.cin-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.cin-bg-radial {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 52% at 72% 26%, rgba(214,132,190,0.30) 0%, transparent 56%),
    radial-gradient(ellipse 80% 60% at 66% 32%, rgba(158,128,150,0.22) 0%, transparent 62%),
    radial-gradient(ellipse 60% 80% at 26% 92%, rgba(74,29,82,0.95) 0%, transparent 72%),
    linear-gradient(160deg, #2a1438 0%, #160c20 58%, #261741 100%);
}

.cin-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

.cin-wordmark {
  position: fixed;
  top: 26px;
  left: 76px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-color);
  z-index: 999;
  opacity: 0;
  animation: cinFadeIn 0.8s ease 0.3s both;
  text-shadow: 0 0 20px rgba(201, 169, 110, 0.3);
  width: auto;
  white-space: nowrap;
}

.cin-wordmark::after {
  content: 'VERSA';
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.4) 50%, 
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.cin-product-wrap {
  position: absolute;
  left: -8vw;
  top: 50%;
  transform: translateY(-50%);
  width: 65vw;
  max-width: 900px;
  height: 85vh;
  z-index: 5;
  animation: braceletEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes braceletEntrance {
  0% {
    opacity: 0;
    transform: translateY(calc(-50% + 140px)) scale(0.75) rotateX(12deg) rotateY(-15deg);
    filter: blur(6px);
  }
  60% { opacity: 1; filter: blur(0px); }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg);
    filter: blur(0px);
  }
}

.cin-bracelet {
  width: 100%;
  height: 100%;
  outline: none;
  --poster-color: transparent;
}

.cin-product-glow {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 80px;
  background: radial-gradient(ellipse, rgba(201,169,110,0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(20px);
}

/* ========================================= */
/* --- 8. HERO SECTION (DESKTOP MAIN) --- */
/* ========================================= */

.cin-product-wrap {
  position: absolute;
  left: -8vw;
  top: 50%;
  transform: translateY(-50%);
  width: 65vw;
  max-width: 900px;
  height: 85vh;
  z-index: 5;
  animation: braceletEntrance 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.cin-text-block {
  position: absolute;
  right: 6vw;
  z-index: 4;
  padding: 0 0 72px 6vw;
  max-width: 420px;
}

.cin-eyebrow {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin: 0 0 16px 0;
  opacity: 0;
  animation: cinSlideUp 0.6s ease 0.15s both;
}

.cin-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(72px, 9vw, 128px);
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.02;
  color: var(--text-color);
  margin: 0 0 20px 0;
  overflow: hidden;
  display: flex;
  padding-bottom: 0.06em;
}

.cin-letter {
  display: inline-block;
  transform: translateY(115%);
  animation: cinLetterRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--li) * 0.06s) both;
}

@keyframes cinLetterRise {
  0%   { transform: translateY(115%); }
  100% { transform: translateY(0); }
}

.cin-subtitle {
  font-size: 16px;
  color: rgba(245,241,237,0.5);
  letter-spacing: 0.04em;
  margin: 0 0 36px 0;
  max-width: 380px;
  line-height: 1.6;
  opacity: 0;
  animation: cinSlideUp 0.6s ease 0.95s both;
}

.cin-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  animation: cinSlideUp 0.6s ease 1.15s both;
}

.cin-btn {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 40px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cin-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.15);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.cin-btn:hover::before {
  width: 300px;
  height: 300px;
}

.cin-btn--outline {
  background: transparent;
  color: var(--text-color);
  border: 1px solid rgba(245,241,237,0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cin-btn--outline:hover {
  background: rgba(245,241,237,0.08);
  border-color: var(--gold-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 169, 110, 0.2);
}

.cin-btn--ghost {
  background: none;
  border: none;
  color: rgba(245,241,237,0.45);
  padding: 14px 0;
  letter-spacing: 0.12em;
}
.cin-btn--ghost:hover { 
  color: var(--gold-accent);
  transform: translateX(5px);
}

.cin-scroll-hint {
  position: absolute;
  bottom: 32px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 20;
  opacity: 0;
  animation: cinFadeIn 0.8s ease 1.5s both;
}

.cin-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(201,169,110,0.6));
}

.cin-scroll-hint span {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,241,237,0.3);
  writing-mode: vertical-rl;
}

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

/* ========================================= */
/* --- HERO FIX (MOBILE ONLY) --- */
/* ========================================= */

@media (max-width: 768px) {
  .cin-text-block { 
    position: absolute;
    top: 12vh; 
    bottom: auto; 
    left: 6vw; 
    right: 6vw;
    padding: 0; 
  }
  
  .cin-product-wrap {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 5vh; 
    width: 130vw; 
    height: 50vh;
    animation: braceletEntranceMobile 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
}

/* Marquee — editorial bone strip */
.marquee-strip {
  background-color: var(--bone);
  overflow: hidden;
  padding: 14px 0;
  width: 100%;
  border-top: 1px solid rgba(39,16,41,0.08);
  border-bottom: 1px solid rgba(39,16,41,0.08);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-track span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .cin-product-wrap {
  position: absolute;
  left: -8vw;
  top: 50%;
  width: 58vw;
  max-width: 900px;
  height: 85vh;
  z-index: 5;
  animation: braceletEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes braceletEntrance {
  0% {
    opacity: 0;
    transform: translateY(calc(-50% + 140px)) scale(0.75);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    filter: blur(0px);
  }
}
  @keyframes braceletEntranceMobile {
    from { opacity: 0; transform: translateY(80px) scale(0.8); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .cin-text-block { padding: 0 0 280px 6vw; }
  .cin-title { font-size: 64px; }
  .cin-scroll-hint { display: none; }
}


/* =================================================== */
/* --- REMODELED HERO (2026) — editorial, feminine --- */
/* =================================================== */
.cinematic-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 6vw 132px;
  background:
    radial-gradient(125% 95% at 50% 6%, #3a1640 0%, #2a0e2f 48%, #1c0820 100%);
}

.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* soft rose+gold bloom, no garish purple gradient */
.hero-glow {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(840px, 96vw); height: min(840px, 96vw);
  background: radial-gradient(circle, rgba(192,132,151,0.30) 0%, rgba(201,169,110,0.12) 36%, transparent 66%);
  filter: blur(6px);
}

/* concentric biometric "pulse" rings — feminine, high-tech */
.hero-orbits {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(1180px, 156vw); aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
      transparent 0 76px,
      rgba(201,169,110,0.08) 76px 77px);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 70%);
          mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 70%);
  animation: heroOrbit 90s linear infinite;
}
@keyframes heroOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero-grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the 3D bracelet, integrated as an ambient backdrop — never captures scroll */
.hero-stage {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  width: min(700px, 110vw); height: min(580px, 66vh);
  z-index: 1; pointer-events: none;
  animation: heroStageIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-model { width: 100%; height: 100%; pointer-events: none; --poster-color: transparent; outline: none; }
@keyframes heroStageIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 60px)) scale(0.86); filter: blur(5px); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

/* content sits over the lower glow */
.hero-content {
  position: relative; z-index: 2;
  margin-top: clamp(360px, 62vh, 560px);
  max-width: 640px;
  display: flex; flex-direction: column; align-items: center;
}
/* soft scrim keeps the eyebrow + wordmark legible over the bracelet */
.hero-content::before {
  content: ''; position: absolute; left: 50%; top: -16%; transform: translateX(-50%);
  width: 150%; height: 132%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 38%, rgba(18,6,22,0.62) 0%, rgba(18,6,22,0.32) 42%, transparent 72%);
}


.hero-eyebrow {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-soft); margin: 0 0 22px;
  text-shadow: 0 2px 16px rgba(18,6,22,0.9), 0 0 4px rgba(18,6,22,0.7);
  opacity: 0; animation: cinSlideUp 0.7s ease 0.2s both;
}

.hero-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-style: italic;
  font-size: clamp(86px, 13vw, 184px);
  line-height: 0.92; letter-spacing: 0.01em;
  color: var(--text-color);
  margin: 0; display: flex; overflow: hidden; padding-bottom: 0.08em;
  text-shadow: 0 8px 50px rgba(28,8,32,0.6);
}
.hero-letter {
  display: inline-block; transform: translateY(115%);
  animation: cinLetterRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.34s + var(--li) * 0.07s) both;
}

.hero-tagline {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65;
  color: rgba(245,241,237,0.72); letter-spacing: 0.01em;
  max-width: 440px; margin: 24px 0 38px;
  opacity: 0; animation: cinSlideUp 0.7s ease 1s both;
}

.hero-ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: cinSlideUp 0.7s ease 1.18s both; }

.hero-btn {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.hero-btn--solid {
  background: var(--gold-accent); color: #2a0e2f;
  padding: 15px 38px; border-radius: 40px;
  box-shadow: 0 10px 30px rgba(201,169,110,0.28);
}
.hero-btn--solid:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 14px 38px rgba(201,169,110,0.4); }
.hero-btn--text { color: rgba(245,241,237,0.6); padding: 15px 4px; }
.hero-btn--text:hover { color: var(--gold-soft); transform: translateX(4px); }

.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 3;
  opacity: 0; animation: cinFadeIn 0.8s ease 1.6s both;
}
.hero-scroll span {
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(245,241,237,0.34);
}
.hero-scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(201,169,110,0.7), transparent); }

@media (max-width: 768px) {
  .cinematic-hero { padding: 84px 6vw 48px; }
  .hero-stage { top: 40%; width: min(560px, 122vw); height: 52vh; }
  .hero-glow, .hero-orbits { top: 40%; }
  .hero-content { margin-top: clamp(220px, 46vh, 360px); }
  .hero-wordmark { font-size: clamp(72px, 22vw, 110px); }
  .hero-scroll { display: none; }
}

/* keep the global underline effect off the hero buttons */
a.hero-btn::after { display: none !important; }

/* SAMSUNG PRODUCT SECTION */
.samsung-product {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #0d0812;
}

.sp-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.sp-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 44% at 50% 37%, rgba(122,54,130,0.55) 0%, rgba(58,22,66,0.34) 38%, transparent 66%),
    linear-gradient(180deg, #090510 0%, #160c20 48%, #090510 100%);
}

/* Cinematic theatrical light layers */
.sp-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 64% at 50% 45%, transparent 42%, rgba(6,3,10,0.62) 100%);
}
.sp-floor {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: 54%; height: 140px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,169,110,0.30) 0%, rgba(150,92,168,0.13) 42%, transparent 72%);
  filter: blur(34px); pointer-events: none;
}

.sp-meta {
  position: absolute;
  top: 32px;
  left: 5vw;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-meta-tag {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--electric-accent);
}
.sp-meta-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,237,0.3);
}

.sp-model-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.sp-viewer {
  width: 100%;
  height: 100%;
  outline: none;
  --poster-color: transparent;
  max-height: 100vh;
}

.sp-model-glow {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 120px;
  background: radial-gradient(ellipse, rgba(201,169,110,0.30) 0%, rgba(160,92,172,0.14) 45%, transparent 72%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(30px);
}

/* --- Cinematic reveal choreography (gated by JS .sp-cinematic so no-JS stays visible) --- */
.samsung-product.sp-cinematic .sp-floor { opacity: 0; transition: opacity 1.5s ease 0.25s; }
.samsung-product.sp-cinematic.is-live .sp-floor { opacity: 1; }

.samsung-product.sp-cinematic .sp-model-wrap {
  opacity: 0; transform: scale(0.9);
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.samsung-product.sp-cinematic.is-live .sp-model-wrap {
  opacity: 1; transform: none;
  animation: spFloat 7s ease-in-out 1.5s infinite;
}
@keyframes spFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.samsung-product.sp-cinematic .sp-meta { opacity: 0; transition: opacity 1s ease 0.35s; }
.samsung-product.sp-cinematic .sp-spec-strip { opacity: 0; transition: opacity 1s ease 0.7s; }
.samsung-product.sp-cinematic .sp-bottom-overlay {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1s ease 0.5s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.samsung-product.sp-cinematic.is-live .sp-meta,
.samsung-product.sp-cinematic.is-live .sp-spec-strip { opacity: 1; }
.samsung-product.sp-cinematic.is-live .sp-bottom-overlay { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .samsung-product.sp-cinematic .sp-model-wrap,
  .samsung-product.sp-cinematic .sp-bottom-overlay,
  .samsung-product.sp-cinematic .sp-meta,
  .samsung-product.sp-cinematic .sp-spec-strip { opacity: 1; transform: none; animation: none; }
  .samsung-product.sp-cinematic .sp-floor { opacity: 1; }
}

.sp-bottom-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 6vw 48px;
  background: linear-gradient(to top, rgba(13,8,18,0.85) 0%, transparent 100%);
}

.sp-product-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245,241,237,0.35);
  margin: 0 0 8px 0;
}
.sp-product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--text-color);
  margin: 0 0 6px 0;
  line-height: 1;
}
.sp-product-sub {
  font-size: 14px;
  color: rgba(245,241,237,0.4);
  margin: 0;
  letter-spacing: 0.04em;
}

.sp-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.sp-finish-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245,241,237,0.3);
  margin: 0;
}

.sp-metal-selector {
  display: flex;
  gap: 8px;
  background: rgba(245,241,237,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px;
  border-radius: 40px;
  border: 1px solid rgba(245,241,237,0.08);
}

.sp-metal-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: rgba(245,241,237,0.5);
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sp-metal-btn:hover { 
  color: var(--text-color); 
}

/* FIX: Ensure the background and text color stay consistent when active */
.sp-metal-btn.sp-active { 
  background-color: rgba(245,241,237,0.15); /* Slightly more opaque for better visibility */
  color: var(--text-color); 
}

.sp-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.sp-gold   { background: linear-gradient(135deg, #F3E5AB 0%, #C9A96E 100%); }
.sp-silver { background: linear-gradient(135deg, #E8E8E8 0%, #9E9E9E 100%); }

.sp-spec-strip {
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sp-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0;
}
.sp-spec-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  color: var(--text-color);
  line-height: 1;
}
.sp-spec-lbl {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,237,0.6);
  text-align: center;
}
.sp-spec-line {
  width: 1px;
  height: 40px;
  background: rgba(245,241,237,0.15);
}

.fake-silver-filter {
  filter: grayscale(100%) brightness(105%) contrast(125%);
  transition: filter 0.5s ease;
}

@media (max-width: 768px) {
  .sp-bottom-overlay { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 5vw 36px; }
  .sp-bottom-right { align-items: flex-start; }
  .sp-spec-strip { display: none; }
  .sp-product-name { font-size: 52px; }
}


/* --- 9. GENERAL TYPOGRAPHY --- */
h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(38px, 5vw, 56px); 
    font-weight: 500;
    color: var(--text-color); 
    margin-bottom: 24px;
    margin-top: 0;
    letter-spacing: 0; 
    line-height: 1.08;
}

/* Adds the gold accent if you italicize any words in those headers */
h2 em {
    font-style: italic;
    color: var(--gold-accent);
}

p {
    font-size: 20px; 
    color: var(--text-color); 
    line-height: 1.6; 
    max-width: 800px; 
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- 10. PROBLEM SECTION (EDITORIAL MANIFESTO) --- */
.manifesto-section {
    background-color: var(--sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 5vw;
}

.manifesto-container {
    max-width: 980px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prob-eyebrow {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--gold-soft); margin: 0 0 26px;
}

.manifesto-quote h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(38px, 5.4vw, 70px);
    line-height: 1.08;
    color: var(--text-color);
    margin: 0 auto 36px;
    max-width: 880px;
    text-align: center;
}
    color: var(--gold-soft);
    font-style: italic;
}

.prob-lead {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.7;
    color: rgba(245,241,237,0.6);
    max-width: 560px;
    margin: 0 auto 96px;
    text-align: center;
}

/* problem blocks */
.prob-block {
    text-align: left;
    border-top: 1px solid rgba(245,241,237,0.12);
    padding-top: 48px;
    margin-top: 64px;
}
.prob-block:first-of-type { margin-top: 0; }

.prob-head {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 30px;
}
.prob-index {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 500;
    line-height: 0.8;
    color: var(--gold-accent);
    opacity: 0.55;
    flex-shrink: 0;
}
.prob-kicker {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--rose); margin: 6px 0 10px; font-weight: 600;
}
.prob-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.06;
    color: var(--text-color);
    margin: 0;
}
.prob-body {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.8;
    color: rgba(245,241,237,0.72);
    margin: 0 0 8px;
    max-width: 760px;
    padding-left: calc(clamp(48px, 6vw, 78px) + 28px);
}
.prob-body em { color: var(--gold-soft); font-style: italic; }

/* historical timeline — high-tech treatment */
.prob-timeline {
    margin-top: 44px;
    padding-left: calc(clamp(48px, 6vw, 78px) + 28px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(201,169,110,0.22);
}
.pt-item {
    position: relative;
    padding: 28px 28px 8px 0;
}
.pt-item::before {
    content: '';
    position: absolute;
    top: -5px; left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    border: 1px solid var(--gold-accent);
}
.pt-now::before { background: var(--gold-accent); box-shadow: 0 0 12px rgba(201,169,110,0.7); }
.pt-year {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px; font-weight: 600;
    color: var(--gold-soft);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.pt-now .pt-year { color: var(--rose); }
.pt-item p {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 14px; line-height: 1.65;
    color: rgba(245,241,237,0.6);
    margin: 0;
}

/* design problem — two facets */
.prob-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding-left: calc(clamp(48px, 6vw, 78px) + 28px);
    margin-top: 18px;
}
.manifesto-label {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-accent);
    margin-bottom: 16px;
    font-weight: 700;
}
.prob-facet p:not(.manifesto-label) {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(245, 241, 237, 0.65);
    margin: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .manifesto-section { padding: 100px 7vw; }
    .prob-lead { margin-bottom: 60px; }
    .prob-head { gap: 16px; }
    .prob-body, .prob-timeline, .prob-split { padding-left: 0; }
    .prob-timeline { grid-template-columns: 1fr; }
    .pt-item { padding: 24px 0 8px 22px; }
    .pt-item::before { top: 30px; left: 0; }
    .prob-timeline { border-top: none; border-left: 1px solid rgba(201,169,110,0.22); padding-top: 0; }
    .prob-split { grid-template-columns: 1fr; gap: 40px; }
}

/* --- 11. CINEMATIC FULL-SCREEN SECTION --- */
.cinematic-section {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    padding: 100px 5vw 0 5vw; 
    overflow: hidden; 
}

.cinematic-section .text-content {
    max-width: 800px;
    margin-bottom: 20px;
    z-index: 2; 
}

.massive-product-image {
    width: 100vw; 
    max-width: 1400px; 
    height: auto;
    filter: drop-shadow(0px 40px 50px rgba(0,0,0,0.8)); 
    margin-bottom: -50px; 
}

/* --- 12. MEET AYANNA SECTION --- */
.profile-photo {
    width: 100%;
    max-width: 450px; 
    border-radius: 12px; 
    filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.5)); 
    object-fit: cover; 
}

/* --- 13. SOLUTION SECTION (LIGHT EDITORIAL) --- */
#Solution.solution-light {
    background: var(--bone);
    color: var(--ink);
    padding: 130px 8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sol-head { text-align: center; max-width: 780px; }
.sol-eyebrow {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--rose-deep); margin: 0 0 24px;
}
.sol-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(44px, 6.4vw, 88px);
    line-height: 1.0;
    color: var(--ink);
    margin: 0;
}
.sol-title em { font-style: italic; color: var(--rose-deep); }
.sol-statement {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.72;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 30px auto 0;
}

.sol-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 960px;
    margin: 84px 0;
    border-top: 1px solid rgba(39,16,41,0.14);
    border-bottom: 1px solid rgba(39,16,41,0.14);
}
.sol-spec {
    text-align: center;
    padding: 34px 14px;
    border-left: 1px solid rgba(39,16,41,0.1);
}
.sol-spec:first-child { border-left: none; }
.sol-spec-num {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}
.sol-spec-lbl {
    display: block; margin-top: 10px;
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft);
}

.sol-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 54px;
    width: 100%;
    max-width: 1040px;
}
.sol-pillar-idx {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 600;
    color: #9C7B33; letter-spacing: 0.08em;
}
.sol-pillar h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 31px);
    color: var(--ink);
    margin: 16px 0 16px;
    line-height: 1.08;
    border-top: 1px solid rgba(39,16,41,0.16);
    padding-top: 20px;
}
.sol-pillar p {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 15px; line-height: 1.74; color: var(--ink-soft); margin: 0;
}

@media (max-width: 768px) {
    #Solution.solution-light { padding: 90px 7vw; }
    .sol-specs { grid-template-columns: 1fr 1fr; margin: 56px 0; }
    .sol-spec { border-left: none; border-top: 1px solid rgba(39,16,41,0.1); padding: 26px 10px; }
    .sol-spec:nth-child(odd) { border-right: 1px solid rgba(39,16,41,0.1); }
    .sol-spec:first-child, .sol-spec:nth-child(2) { border-top: none; }
    .sol-pillars { grid-template-columns: 1fr; gap: 40px; }
}

/* --- APP INSIGHTS (high-tech dashboard) --- */
.insights-section {
    background: radial-gradient(120% 80% at 50% 0%, #25102A 0%, #15061A 70%);
    padding: 130px 7vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ins-head { text-align: center; max-width: 720px; margin-bottom: 64px; }
.ins-eyebrow {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--gold-soft); margin: 0 0 22px;
}
.ins-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: clamp(36px, 5vw, 64px); line-height: 1.04;
    color: var(--text-color); margin: 0;
}
.ins-title em { font-style: italic; color: var(--gold-soft); }
.ins-sub {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7;
    color: rgba(245,241,237,0.6); max-width: 540px; margin: 26px auto 0;
}

.ins-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 18px;
    width: 100%; max-width: 1040px;
}
.ins-card {
    background: rgba(245,241,237,0.035);
    border: 1px solid rgba(245,241,237,0.09);
    border-radius: 4px;
    padding: 24px;
    display: flex; flex-direction: column;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.ins-card:hover { border-color: rgba(201,169,110,0.4); background: rgba(245,241,237,0.05); }

/* --- Smooth "fall into place" scroll choreography --- */
.ins-fall .ins-card {
    opacity: 0;
    transform: translateY(-46px) scale(0.965);
    transition:
        opacity 0.7s ease,
        transform 0.85s cubic-bezier(0.22, 1.12, 0.36, 1),
        border-color 0.4s ease,
        background 0.4s ease;
    will-change: transform, opacity;
}
.ins-fall.ins-fall-in .ins-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .ins-fall .ins-card { opacity: 1; transform: none; transition: border-color 0.4s ease, background 0.4s ease; }
}
.ins-card--lg { grid-column: span 2; grid-row: span 2; }
.ins-card--sm { grid-column: span 1; }
.ins-card:not(.ins-card--lg):not(.ins-card--sm) { grid-column: span 2; }

.ins-card-top { display: flex; justify-content: space-between; align-items: center; }
.ins-tag {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(245,241,237,0.5);
}
.ins-live { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); }
.ins-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 8px var(--rose); animation: insBlink 1.8s ease-in-out infinite; }
@keyframes insBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.ins-metric { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.ins-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(40px, 4.4vw, 56px); line-height: 0.9; color: var(--text-color); }
.ins-num--word { font-size: clamp(30px, 3.4vw, 42px); font-style: italic; color: var(--gold-soft); }
.ins-unit { font-family: 'Gowun Dodum', sans-serif; font-size: 14px; color: rgba(245,241,237,0.45); }
.ins-card-state { font-family: 'Gowun Dodum', sans-serif; font-size: 12.5px; color: rgba(245,241,237,0.55); margin: 10px 0 0; }

/* readiness gauge */
.ins-gauge {
    width: 168px; height: 168px; border-radius: 50%; margin: 26px auto 6px;
    background: conic-gradient(var(--gold-accent) 0 78%, rgba(245,241,237,0.08) 78% 100%);
    display: grid; place-items: center; position: relative;
}
.ins-gauge::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #19071E; }
.ins-gauge-inner { position: relative; z-index: 1; text-align: center; }
.ins-gauge-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 60px; color: var(--text-color); display: block; line-height: 1; }
.ins-gauge-unit { font-family: 'Gowun Dodum', sans-serif; font-size: 12px; letter-spacing: 0.12em; color: rgba(245,241,237,0.45); }
.ins-card--lg .ins-card-state { text-align: center; }

/* sparkline */
.ins-spark { display: flex; align-items: flex-end; gap: 7px; height: 52px; margin-top: 22px; }
.ins-spark span { flex: 1; background: rgba(245,241,237,0.16); border-radius: 3px 3px 0 0; }
.ins-spark span.on { background: var(--gold-accent); }
.ins-spark-lbl { font-family: 'Gowun Dodum', sans-serif; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,237,0.4); margin: 10px 0 0; }

/* pulse line */
.ins-pulse { margin-top: auto; padding-top: 16px; }
.ins-pulse svg { width: 100%; height: 38px; }
.ins-pulse polyline { fill: none; stroke: var(--rose); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* cycle phase bar */
.ins-phasebar { display: flex; gap: 5px; margin-top: 18px; }
.ins-phasebar span { flex: 1; height: 6px; border-radius: 3px; background: rgba(245,241,237,0.14); }
.ins-phasebar span.on { background: var(--rose); box-shadow: 0 0 10px rgba(192,132,151,0.6); }
.ins-phase-keys { display: flex; justify-content: space-between; margin-top: 10px; }
.ins-phase-keys span { font-family: 'Gowun Dodum', sans-serif; font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(245,241,237,0.32); }
.ins-phase-keys span.on { color: var(--rose); }

/* sleep bar */
.ins-sleepbar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin-top: auto; }

.ins-cta {
    display: inline-block; margin-top: 56px;
    font-family: 'Gowun Dodum', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-soft); text-decoration: none;
    border: 1px solid rgba(201,169,110,0.4); border-radius: 40px; padding: 15px 34px;
    transition: all 0.35s ease;
}
.ins-cta:hover { background: rgba(201,169,110,0.12); border-color: var(--gold-accent); transform: translateY(-2px); }
.ins-cta::after { display: none !important; }

@media (max-width: 900px) {
    .ins-grid { grid-template-columns: repeat(2, 1fr); }
    .ins-card--lg { grid-column: span 2; grid-row: span 1; }
    .ins-card:not(.ins-card--lg):not(.ins-card--sm) { grid-column: span 2; }
    .ins-card--sm { grid-column: span 1; }
}
@media (max-width: 560px) {
    .insights-section { padding: 90px 6vw; }
    .ins-grid { grid-template-columns: 1fr; }
    .ins-card, .ins-card--lg, .ins-card--sm, .ins-card:not(.ins-card--lg):not(.ins-card--sm) { grid-column: span 1; }
}





/* --- THE EVIDENCE SECTION (High-Dimension Editorial) --- */
#Evidence.cream-bg-section {
    background-color: var(--text-color) !important;
    padding: 0 !important;
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,0.05); /* Very subtle line to define the section start */
}

#Evidence .text-content {
    padding: 100px 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--text-color);
}

/* --- Restoring the Dimension in Typography --- */
#Evidence h2 {
    font-size: clamp(40px, 5vw, 64px); 
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
    color: var(--sidebar-bg); /* Deep Espresso for the main punch */
}

/* The "Magazine" Italic Detail */
#Evidence .italic-accent {
    font-family: "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--primary-accent); /* Restoring the Dusty Plum for depth */
    display: block; /* Moves it to a new line for more drama */
    margin-top: 5px;
}

#Evidence p {
    font-size: 19px;
    line-height: 1.7;
    color: #4A4440; /* A softer espresso/grey so it doesn't look flat black */
    opacity: 0.9;
    max-width: 480px;
}

/* The Edgy Magenta Pop */
#Evidence .funk-text {
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    color: var(--electric-accent) !important; /* Bringing back the Electric Magenta */
    margin-top: 40px;
    display: inline-block;
    border-bottom: 2px solid var(--electric-accent); /* Adds a "punk" underline detail */
    padding-bottom: 4px;
}

.crisp-video-link {
    display: block;
    width: 100%;
    height: 100%; /* Fill the entire right half */
    cursor: pointer;
    position: relative;
}

.crisp-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes it fill the space like a background */
    display: block;
}

/* Mobile Fix: Stack them and add padding back */
@media (max-width: 768px) {
    #Evidence.cream-bg-section {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }
    #Evidence .text-content {
        padding: 60px 10vw;
    }
    .crisp-video {
        height: 50vh; /* Give the video height on mobile */
    }
}



/* --- MISSION SECTION --- */
/* --- MISSION MANIFESTO STYLES --- */

.mission-manifesto {
    position: relative;
    padding: 140px 10%;
    background-color: #1a0b1a;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
 
.seamless-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.38;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
}
 
.node {
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    background: var(--gold-accent);
    border-radius: 50%;
    z-index: 2;
}
 
.node:nth-child(7n) {
    background: var(--electric-accent);
}
 
.line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transform-origin: left center;
    pointer-events: none;
    z-index: 1;
}
 
.manifesto-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
 
.mission-eyebrow {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--electric-accent);
    margin: 0 0 24px;
}
 
.mission-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 5vw, 66px);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 60px;
}
 
.mission-headline em {
    font-style: italic;
    color: var(--gold-accent);
    display: block;
}
 
.manifesto-body {
    margin-bottom: 64px;
    text-align: center;
}

.mission-lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 3vw, 38px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-color);
    max-width: 760px;
    margin: 0 auto 60px;
}
.mission-lead em { color: var(--gold-soft); font-style: italic; }

.mission-pledge {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    text-align: left;
    border-top: 1px solid rgba(245,241,237,0.12);
    padding-top: 48px;
}
.pledge-num { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--gold-accent); opacity: 0.6; }
.pledge-k { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); color: var(--text-color); margin: 12px 0 12px; line-height: 1.1; }
.pledge-v { font-family: 'Gowun Dodum', sans-serif; font-size: 14px; line-height: 1.7; color: rgba(245,241,237,0.62); margin: 0; }

.lead-text {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(18px, 2vw, 23px) !important;
    color: var(--text-color) !important;
    line-height: 1.4 !important;
}
 
.truth-callout {
    display: flex;
    background: rgba(201, 169, 110, 0.06);
    border: 1px solid rgba(201, 169, 110, 0.2);
    border-radius: 0;
    margin: 24px 0;
}
 
.truth-callout-bar {
    width: 3px;
    background: linear-gradient(to bottom, var(--gold-accent), var(--electric-accent));
    flex-shrink: 0;
}
 
.truth-callout-inner { padding: 22px 20px; }
 
.truth-callout-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-accent);
    margin: 0 0 8px;
}
 
.truth-callout-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: var(--text-color);
    font-style: italic;
    margin: 0;
}
 
.mission-stats {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(245, 241, 237, 0.1);
    padding-top: 48px;
}
 
.mission-stat { flex: 1; }
 
.stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    color: var(--gold-accent);
    letter-spacing: -1px;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}
 
.stat-lbl {
    font-size: 12px;
    color: rgba(245, 241, 237, 0.38);
    line-height: 1.4;
    display: block;
    max-width: 160px;
}
 
.mission-stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(245, 241, 237, 0.1);
    margin: 0 36px;
    flex-shrink: 0;
}
 
/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
 
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
 
.manifesto-body.reveal { transition-delay: 0.15s; }
.mission-stats.reveal  { transition-delay: 0.3s; }
 
@media (max-width: 768px) {
    .mission-manifesto { padding: 100px 8%; }
    .manifesto-body { grid-template-columns: 1fr; gap: 40px; }
    .mission-pledge { grid-template-columns: 1fr; gap: 32px; }
    .mission-stats { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 32px; }
    .mission-stat-divider { display: none; }
    .stat-lbl { max-width: none; }
}







/* --- CREDIBILITY EDITORIAL --- */
.credibility-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #1E1A18;
    border-top: 1px solid rgba(201, 169, 110, 0.1);
    border-bottom: 1px solid rgba(201, 169, 110, 0.1);
}

.cred-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 80px 10vw;
    border-bottom: 1px solid rgba(201, 169, 110, 0.08);
    border-right: 1px solid rgba(201, 169, 110, 0.08);
}

.cred-item:nth-child(2),
.cred-item:nth-child(4) {
    border-right: none;
}

.cred-item:nth-child(3),
.cred-item:nth-child(4) {
    border-bottom: none;
}

.cred-stat {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(64px, 9vw, 120px);
    color: var(--gold-accent);
    line-height: 0.9;
    letter-spacing: -2px;
}

.cred-label {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(245, 241, 237, 0.4);
    max-width: 180px;
}

.cred-divider { display: none; }

@media (max-width: 768px) {
    .credibility-bar { grid-template-columns: 1fr; }
    .cred-item {
        padding: 50px 8vw;
        border-right: none;
        border-bottom: 1px solid rgba(201, 169, 110, 0.08);
    }
    .cred-item:last-child { border-bottom: none; }
}

/* --- 16. COMPETITORS SECTION --- */

#Competitors {
  background-color: var(--bg-color);
  padding: 120px 6vw;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comp-header {
  text-align: center;
  margin-bottom: 70px;
  max-width: 720px;
}

.comp-eyebrow {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 22px;
}

.comp-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5.2vw, 72px);
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 0 0 18px;
}

.comp-heading em {
  font-style: italic;
  color: var(--gold-soft);
}

.comp-subhead {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: rgba(245, 241, 237, 0.6);
  margin: 0 auto;
  max-width: 520px;
}

/* --- Apple-style comparison grid (sharp, hairline, no rounded cards) --- */
.cmp-scroll {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,169,110,0.4) transparent;
}
.cmp-scroll::-webkit-scrollbar { height: 6px; }
.cmp-scroll::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.4); border-radius: 3px; }
.cmp-scroll::-webkit-scrollbar-track { background: transparent; }
.cmp { width: 100%; max-width: 1000px; }
.cmp--7 { max-width: none; min-width: 1240px; }
.cmp-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  align-items: stretch;
}
.cmp-row:not(.cmp-head):not(.cmp-foot) { border-top: 1px solid rgba(245,241,237,0.1); }
.cmp-feat {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 15px; color: rgba(245,241,237,0.85);
  display: flex; align-items: center;
  padding: 22px 18px 22px 0;
}
.cmp--7 .cmp-row { grid-template-columns: 260px repeat(7, minmax(140px, 1fr)); }
.cmp--7 .cmp-feat { padding-right: 16px; }
.cmp--7 .cmp-col { padding: 0 8px 20px; }
.cmp--7 .cmp-brand { font-size: 16px; line-height: 1.16; }
.cmp--7 .cmp-cell { padding: 18px 8px; }
.cmp-col--versa { scroll-snap-align: start; }
.cmp-head { align-items: end; }
.cmp-col {
  text-align: center; padding: 0 8px 20px;
  display: flex; flex-direction: column; gap: 6px; justify-content: flex-end;
}
.cmp-brand { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(17px, 1.9vw, 23px); color: var(--text-color); }
.cmp-price { font-family: 'Gowun Dodum', sans-serif; font-size: 10.5px; letter-spacing: 0.03em; color: rgba(245,241,237,0.45); }
.cmp-cell { display: flex; align-items: center; justify-content: center; padding: 20px 8px; }
.cmp-mark { font-size: 19px; line-height: 1; }
.cmp-yes { color: var(--gold-accent); }
.cmp-no { color: rgba(245,241,237,0.7); font-weight: 300; }
.cmp-part { color: rgba(245,241,237,0.28); }

/* Versa column — continuous highlight band, gold top accent, sharp edges */
.cmp-col--versa, .cmp-cell--versa { background: rgba(201,169,110,0.09); }
.cmp-col--versa { border-top: 2px solid var(--gold-accent); padding-top: 18px; }
.cmp-col--versa .cmp-brand { color: var(--gold-soft); }
.cmp-foot { border-top: 1px solid rgba(245,241,237,0.2); }
.cmp-foot .cmp-cell { padding: 24px 8px; }
.cmp-score { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 28px; color: var(--gold-soft); }
.cmp-score--dim { color: rgba(245,241,237,0.32); }
.cmp-hint { display: none; font-family: 'Gowun Dodum', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201,169,110,0.6); text-align: center; margin: 16px 0 0; }
.cmp-note { font-family: 'Gowun Dodum', sans-serif; font-size: 11px; color: rgba(245,241,237,0.4); margin: 18px 0 0; text-align: center; letter-spacing: 0.02em; }

@media (max-width: 1240px) {
  .cmp-hint { display: block; }
}
@media (max-width: 720px) {
  .cmp-row { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
  .cmp--7 .cmp-row { grid-template-columns: 200px repeat(7, 132px); }
  .cmp--7 { min-width: 1124px; }
  .cmp--7 .cmp-brand { font-size: 14px; }
  .cmp--7 .cmp-feat { font-size: 13px; padding-right: 10px; }
  .cmp--7 .cmp-cell, .cmp--7 .cmp-col { padding-left: 6px; padding-right: 6px; }
  .cmp-feat { font-size: 12px; padding-right: 6px; }
  .cmp-brand { font-size: 12.5px; }
  .cmp-price { display: none; }
  .cmp-mark { font-size: 15px; }
  .cmp-score { font-size: 19px; }
}

/* Versa Champion Card */
.versa-champion-card {
  width: 100%;
  max-width: 960px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.12) 0%, rgba(201, 169, 110, 0.04) 100%);
  border: 1.5px solid var(--gold-accent);
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
  box-shadow: 0 0 40px rgba(201, 169, 110, 0.12), inset 0 0 60px rgba(201, 169, 110, 0.04);
  position: relative;
  overflow: hidden;
}

.versa-champion-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
}

.versa-champ-left {
  min-width: 180px;
}

.versa-champ-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin: 0 0 8px;
}

.versa-champ-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--gold-accent);
  margin: 0 0 8px;
  letter-spacing: -1px;
  line-height: 1;
}

.versa-champ-tagline {
  font-size: 12px;
  color: rgba(245, 241, 237, 0.5);
  margin: 0;
  font-style: italic;
}

.versa-champ-sensors {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.versa-champ-sensor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(201, 169, 110, 0.1);
}

.versa-champ-feat {
  color: rgba(245, 241, 237, 0.75);
}

.versa-ci-yes {
  color: var(--gold-accent);
  font-weight: 700;
  font-size: 15px;
}

.versa-champ-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  border-left: 1px solid rgba(201, 169, 110, 0.2);
  padding-left: 32px;
}

.versa-champ-score-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--gold-accent);
  line-height: 1;
}

.versa-champ-score-lbl {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.45);
}

/* "vs." divider label */
.comp-vs-label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.3);
  margin: 0 0 28px;
  text-align: center;
}

/* Missing vs. Versa chips on competitor cards */
.sc-missing-versa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}

.sc-missing-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.4);
  white-space: nowrap;
}

.sc-missing-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sc-missing-chip {
  background: rgba(224, 64, 160, 0.18);
  border: 1px solid rgba(224, 64, 160, 0.45);
  color: #E040A0;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .versa-champion-card { flex-direction: column; gap: 24px; padding: 24px 20px; }
  .versa-champ-sensors { grid-template-columns: 1fr; }
  .versa-champ-score { border-left: none; padding-left: 0; border-top: 1px solid rgba(201,169,110,0.2); padding-top: 16px; width: 100%; }
}

.sc-carousel {
  position: relative;
  width: 100%;
  max-width: 1180px;
}

.sc-grid {
  display: flex;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 16px;
  align-items: flex-start;
}

.sc-grid::-webkit-scrollbar { display: none; }

/* Soft fade on the right edge hinting at more cards */
.sc-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(60, 22, 66, 0), #3C1642);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.sc-carousel.sc-at-end::after { opacity: 0; }

.sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 110, 0.4);
  background: rgba(60, 22, 66, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f5f1ed;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.sc-arrow svg { width: 22px; height: 22px; }
.sc-arrow:hover {
  border-color: var(--electric-accent, #c9a96e);
  background: rgba(60, 22, 66, 0.95);
}
.sc-arrow-left { left: -22px; }
.sc-arrow-right { right: -22px; }
.sc-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.sc-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  border: 1px solid rgba(245, 241, 237, 0.09);
  background: rgba(245, 241, 237, 0.03);
  cursor: pointer;
  transition: border-color 0.35s ease;
  display: flex;
  flex-direction: column;
}

.sc-card:hover, 
.sc-card.sc-open { 
    border-color: rgba(201, 169, 110, 0.35); 
}
.sc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 0;
  margin-bottom: 8px;
}

.sc-type {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.5);
  margin: 0 0 3px;
}

.sc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--text-color);
  margin: 0;
  line-height: 1.1;
}

.sc-tag {
  font-size: 9px;
  background: rgba(245, 241, 237, 0.08);
  color: rgba(245, 241, 237, 0.6);
  border: 1px solid rgba(245, 241, 237, 0.18);
  padding: 3px 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.sc-price {
  font-size: 11px;
  color: var(--gold-accent);
  margin: 0;
  padding: 0 20px 16px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(245, 241, 237, 0.12);
}

.sc-body { padding: 16px 20px; }

.sc-section-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.45);
  margin: 0 0 8px;
  max-width: none;
}

.sc-sleep-label { color: rgba(201, 169, 110, 0.55); }

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(245, 241, 237, 0.1);
}

.sc-row:last-of-type { border-bottom: none; }

.sc-feat {
  font-size: 11px;
  color: rgba(245, 241, 237, 0.7);
}

.ci-yes {
  font-size: 12px;
  color: var(--gold-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.ci-no {
  font-size: 12px;
  color: rgba(245, 241, 237, 0.38);
  flex-shrink: 0;
}

.ci-partial {
  font-size: 10px;
  color: var(--electric-accent);
  opacity: 0.8;
  flex-shrink: 0;
}

.sc-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 241, 237, 0.12);
}

.sc-stat-label {
  font-size: 9px;
  color: rgba(245, 241, 237, 0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 2px;
  max-width: none;
}

.sc-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--gold-accent);
  margin: 0;
  font-weight: 700;
  line-height: 1;
}

.sc-stat-gap {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: var(--electric-accent);
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}

.sc-verdict {
  padding: 12px 20px;
  border-top: 1px solid rgba(245, 241, 237, 0.06);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sc-verdict-bar {
  width: 2px;
  min-height: 30px;
  background: var(--gold-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.sc-verdict p {
  font-size: 11px;
  color: rgba(245, 241, 237, 0.5);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

.sc-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.sc-card:hover .sc-drawer,
.sc-card.sc-open .sc-drawer { max-height: 500px; }

.sc-drawer-inner {
  padding: 16px 20px;
  border-top: 1px solid rgba(201, 169, 110, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.sc-sleep-verdict {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 241, 237, 0.06);
}

.sc-sleep-bar {
  width: 2px;
  min-height: 24px;
  background: var(--electric-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.sc-sleep-verdict p {
  font-size: 11px;
  color: rgba(245, 241, 237, 0.45);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.sc-hint {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 237, 0.25);
  text-align: center;
  padding: 9px 0 10px;
  border-top: 1px solid rgba(245, 241, 237, 0.05);
  transition: opacity 0.3s, max-height 0.3s;
  overflow: hidden;
}

.sc-card:hover .sc-hint,
.sc-card.sc-open .sc-hint {
  opacity: 0;
  max-height: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-drawer { max-height: none; }
  .sc-hint { display: none; }
}

/* --- 18. MODAL (POP-UP) STYLES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(5px); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease;
}

.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-content {
    background-color: var(--text-color); 
    color: #1A1A1A; 
    padding: 50px 40px;
    border-radius: 24px; 
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(50px); 
    transition: transform 0.3s ease;
    text-align: left;
}

.modal-overlay.active .modal-content { transform: translateY(0); }

.modal-content h3 {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: "Cormorant Garamond", serif; 
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

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

/* --- 19. SECTION COLOR TRANSITIONS --- */
#Problem {
    /* Removes the gradient and makes the section solid Espresso */
    background: var(--sidebar-bg) !important;
    padding-bottom: 80px; /* Restores standard padding */
    margin-bottom: 0;
}
/* Gradient bleed: Competitors → next section */
#Competitors::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--sidebar-bg));
    pointer-events: none;
}

#Competitors {
    position: relative;
}


#Meet-Ayanna {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    justify-content: center;
}

.meet-ayanna-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    width: 100%;
}

.meet-ayanna-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.founder-eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--gold-accent);
    opacity: 0.7;
    margin: 0;
    font-weight: 400;
}

#Meet-Ayanna h2 {
    font-size: clamp(36px, 4vw, 52px);
    margin: 0;
    color: var(--text-color);
}

.meet-ayanna-divider {
    width: 40px;
    height: 1px;
    background: rgba(201, 169, 110, 0.4);
}

.for-women-line {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2vw, 24px);
    font-style: italic;
    color: var(--gold-accent);
    opacity: 0.75;
    margin: 0;
    letter-spacing: 0.02em;
}

#Meet-Ayanna p {
    color: rgba(245, 241, 237, 0.65);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.meet-ayanna-photo {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .meet-ayanna-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- MOBILE RESPONSIVENESS FIXES --- */
@media (max-width: 768px) {
    .hero-bracelet { width: 300px; height: 210px; }
    .hero-title { font-size: 60px; }
    .ghost-title { font-size: 52vw; }
    .hero-product-display { height: 350px; } 
    .hero-subtitle { font-size: 18px; }
    
    .split-section { flex-direction: column; text-align: center; }
    .solution-intro h2 { font-size: 38px; }
    .timeline-content h3 { font-size: 24px; }
    
    .tab-bar { flex-direction: column; border-radius: 16px; }
    .comp-content-area { flex-direction: column; text-align: center; }
}

/* --- SENSORS SECTION (cinematic dark — matches Product section) --- */
#Sensors {
  background: radial-gradient(ellipse 90% 60% at 50% 20%, #12090f 0%, #07040a 55%, #050307 100%);
  padding: 110px 10vw 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* subtle scan-line texture */
#Sensors::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(217,178,106,0.018) 3px, rgba(217,178,106,0.018) 4px);
  z-index: 0;
}
#Sensors > * { position: relative; z-index: 1; }

.sens-intro {
  text-align: center;
  margin-bottom: 80px;
  max-width: 600px;
}

.sens-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 22px;
}

.sens-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.6vw, 60px);
  color: #f1e4cb;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin-bottom: 18px;
}

.sens-heading em {
  font-style: italic;
  color: #dcc79b;
}

.sens-subhead {
  font-size: 15px;
  color: rgba(243,231,207,0.52);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.65;
}

/* --- Circular sensor explorer --- */
.sx {
  width: 100%; max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 460px 1fr; gap: 56px; align-items: center;
}
.sx-stage { position: relative; width: 440px; height: 440px; margin: 0 auto; }
.sx-ring { position: absolute; inset: 64px; border-radius: 50%; border: 1px solid rgba(201,169,110,0.22); box-shadow: inset 0 0 60px rgba(201,169,110,0.04), 0 0 60px rgba(201,169,110,0.04); }
.sx-ring--2 { inset: 30px; border-style: dashed; border-color: rgba(201,169,110,0.10); animation: sxSpin 70s linear infinite; }
@keyframes sxSpin { to { transform: rotate(360deg); } }
.sx-spokes span { position: absolute; background: rgba(201,169,110,0.13); }
.sx-spokes span:nth-child(1) { left: 50%; top: 64px; bottom: 64px; width: 1px; transform: translateX(-0.5px); }
.sx-spokes span:nth-child(2) { top: 50%; left: 64px; right: 64px; height: 1px; transform: translateY(-0.5px); }
.sx-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 156px; height: 156px; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, rgba(217,178,106,0.26) 0%, rgba(150,92,168,0.10) 55%, rgba(7,4,10,0.92) 80%);
  border: 1px solid rgba(201,169,110,0.36);
  box-shadow: 0 0 40px rgba(201,169,110,0.14), inset 0 0 30px rgba(201,169,110,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 3px; padding: 0 16px;
  animation: sxHubPulse 5s ease-in-out infinite;
}
@keyframes sxHubPulse { 0%,100%{box-shadow:0 0 40px rgba(201,169,110,0.14),inset 0 0 30px rgba(201,169,110,0.08);} 50%{box-shadow:0 0 60px rgba(201,169,110,0.24),inset 0 0 40px rgba(201,169,110,0.14);} }
.sx-hub-k { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: #dcc79b; line-height: 1; }
.sx-hub-v { font-family: 'Space Mono', monospace; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,231,207,0.52); }
.sx-hub-note { font-family: 'Gowun Dodum', sans-serif; font-size: 9px; color: rgba(243,231,207,0.38); margin-top: 5px; line-height: 1.45; }

.sx-node {
  position: absolute; transform: translate(-50%,-50%);
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.sx-node--0 { left: 50%; top: 11%; }
.sx-node--1 { left: 89%; top: 50%; }
.sx-node--2 { left: 50%; top: 89%; }
.sx-node--3 { left: 11%; top: 50%; }
.sx-node-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #07040a; border: 1.5px solid rgba(201,169,110,0.55);
  box-shadow: 0 0 0 7px #07040a;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.sx-node-label {
  font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(243,231,207,0.52); white-space: nowrap;
  text-shadow: 0 1px 10px rgba(7,4,10,0.98); transition: color 0.3s;
}
.sx-node:hover .sx-node-dot, .sx-node.active .sx-node-dot {
  background: #e7c585; border-color: #dcc79b; transform: scale(1.2);
  box-shadow: 0 0 0 7px #07040a, 0 0 22px rgba(231,197,133,0.85);
}
.sx-node:hover .sx-node-label, .sx-node.active .sx-node-label { color: #dcc79b; }

.sx-detail { min-height: 360px; }
.sx-d-idx { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c9a96e; margin: 0 0 12px; }
.sx-d-name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(26px, 3vw, 38px); color: #f1e4cb; margin: 0 0 14px; line-height: 1.04; }
.sx-d-role { font-family: 'Gowun Dodum', sans-serif; font-size: 15px; line-height: 1.7; color: rgba(243,231,207,0.65); margin: 0 0 26px; max-width: 440px; }
.sx-d-block { margin-bottom: 20px; }
.sx-d-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(201,169,110,0.6); display: block; margin-bottom: 9px; }
.sx-d-signal { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 21px; color: #dcc79b; margin: 0; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { font-family: 'Gowun Dodum', sans-serif; font-size: 12px; color: rgba(243,231,207,0.78); border: 1px solid rgba(201,169,110,0.22); padding: 6px 12px; border-radius: 2px; background: rgba(201,169,110,0.04); }
.sx-d-powers { font-family: 'Gowun Dodum', sans-serif; font-size: 13px; color: rgba(243,231,207,0.58); margin: 0; line-height: 1.6; }
.sx-dual { margin-top: 18px; padding: 16px 20px; border-left: 2px solid #c9a96e; background: rgba(201,169,110,0.07); border-radius: 0 2px 2px 0; }
.sx-dual p { margin: 0; font-family: 'Gowun Dodum', sans-serif; font-size: 12.5px; line-height: 1.65; color: rgba(243,231,207,0.68); }
.sx-dual-k { color: #dcc79b; font-weight: 600; }

@media (max-width: 820px) {
  .sx { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .sx-stage { width: 360px; height: 360px; }
  .sx-detail { text-align: center; }
  .sx-d-role { margin-left: auto; margin-right: auto; }
  .sx-chips { justify-content: center; }
  .sx-dual { text-align: left; }
}
@media (max-width: 420px) {
  .sx-stage { width: 300px; height: 300px; }
  .sx-node-label { font-size: 9px; }
}

/* --- Cinematic eyelid-blink reveal for the Technology section --- */
.tech-cinematic .sens-intro,
.tech-cinematic .sx,
.tech-cinematic .hw {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-cinematic.tech-shown .sens-intro { transition-delay: 0.05s; }
.tech-cinematic.tech-shown .sx { transition-delay: 0.18s; }
.tech-cinematic.tech-shown .hw { transition-delay: 0.30s; }
.tech-cinematic.tech-shown .sens-intro,
.tech-cinematic.tech-shown .sx,
.tech-cinematic.tech-shown .hw {
  opacity: 1;
  transform: none;
}

#techBlink {
  position: fixed;
  inset: 0;
  z-index: 2500;
  pointer-events: none;
  visibility: hidden;
}
#techBlink.blinking { visibility: visible; }
#techBlink .blink-lid {
  position: absolute;
  left: 0; right: 0;
  height: 51vh;
  background: #0e0410;
  will-change: transform;
}
#techBlink .blink-top { top: 0; transform: translateY(-100%); }
#techBlink .blink-bottom { bottom: 0; transform: translateY(100%); }
#techBlink .blink-lid::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,0.45), transparent);
}
#techBlink .blink-top::after { bottom: 0; }
#techBlink .blink-bottom::after { top: 0; }
#techBlink.blinking .blink-top { animation: lidTop 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
#techBlink.blinking .blink-bottom { animation: lidBottom 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
@keyframes lidTop {
  0%   { transform: translateY(-100%); }
  26%  { transform: translateY(0); }
  46%  { transform: translateY(0); }
  64%  { transform: translateY(-14%); }
  76%  { transform: translateY(-5%); }
  100% { transform: translateY(-100%); }
}
@keyframes lidBottom {
  0%   { transform: translateY(100%); }
  26%  { transform: translateY(0); }
  46%  { transform: translateY(0); }
  64%  { transform: translateY(14%); }
  76%  { transform: translateY(5%); }
  100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  #techBlink { display: none; }
  .tech-cinematic .sens-intro,
  .tech-cinematic .sx,
  .tech-cinematic .hw { opacity: 1; transform: none; transition: none; }
}

/* --- Oura-style capabilities + hardware --- */
.cap-list { width: 100%; max-width: 920px; margin: 0 auto; }
.cap {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px;
  padding: 48px 0; border-top: 1px solid rgba(245,241,237,0.12);
}
.cap:last-child { border-bottom: 1px solid rgba(245,241,237,0.12); }
.cap-label { display: flex; align-items: baseline; gap: 18px; }
.cap-idx { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold-accent); opacity: 0.55; }
.cap-label h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(26px, 3vw, 38px); color: var(--text-color); margin: 0; line-height: 1.04; }
.cap-desc { font-family: 'Gowun Dodum', sans-serif; font-size: 16px; line-height: 1.75; color: rgba(245,241,237,0.65); margin: 0 0 22px; max-width: 560px; }
.cap-metrics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.cap-metrics li { font-family: 'Gowun Dodum', sans-serif; font-size: 14px; color: rgba(245,241,237,0.78); padding-left: 20px; position: relative; }
.cap-metrics li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-accent); }

.hw { width: 100%; max-width: 920px; margin: 84px auto 0; }
.hw-title { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: #c9a96e; margin: 0 0 30px; text-align: center; }
.hw-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(201,169,110,0.22); }
.hw-item { display: flex; flex-direction: column; gap: 8px; padding: 26px 20px; border-bottom: 1px solid rgba(201,169,110,0.14); border-left: 1px solid rgba(201,169,110,0.10); }
.hw-item:nth-child(4n+1) { border-left: none; }
.hw-k { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201,169,110,0.62); }
.hw-v { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #f1e4cb; }
.hw-fine { font-family: 'Gowun Dodum', sans-serif; font-size: 11px; color: rgba(243,231,207,0.38); text-align: center; margin: 24px 0 0; }

@media (max-width: 768px) {
  .cap { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .cap-metrics { grid-template-columns: 1fr; }
  .hw-grid { grid-template-columns: 1fr 1fr; }
  .hw-item:nth-child(4n+1) { border-left: 1px solid rgba(245,241,237,0.07); }
  .hw-item:nth-child(2n+1) { border-left: none; }
}

.sens-progress-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 40px;
  justify-content: center;
}

.sens-pip {
  height: 2px;
  flex: 1;
  max-width: 60px;
  background: rgba(245, 241, 237, 0.12);
  border-radius: 2px;
  transition: background 0.3s ease;
  cursor: pointer;
}

.sens-pip.active { background: var(--gold-accent); }
.sens-pip.done { background: rgba(201, 169, 110, 0.35); }

.sens-card {
  position: relative;
  background: linear-gradient(140deg, rgba(245,241,237,0.06) 0%, rgba(245,241,237,0.02) 60%);
  border: 1px solid rgba(245, 241, 237, 0.1);
  border-radius: 18px;
  padding: 0;
  animation: fadeUp 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
  min-height: 360px;
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
  align-items: stretch;
}

.sens-card-visual {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(201,169,110,0.16), rgba(201,169,110,0.02) 68%);
  border: none;
  border-right: 1px solid rgba(201, 169, 110, 0.14);
  border-radius: 0;
  overflow: hidden;
  padding: 52px 44px;
  position: relative;
}
.sens-card-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, transparent 55%, rgba(25,7,30,0.45) 100%);
  pointer-events: none;
}

.sens-card-visual svg {
  width: 100%;
  height: auto;
  max-height: 230px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 20px rgba(201,169,110,0.28));
}

.sens-card-top {
  flex: 1;
  padding: 52px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

.sens-card-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 110, 0.6);
  margin-bottom: 16px;
}

.sens-card-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: 14px;
}

.sens-card-tag.womens { color: var(--rose); }

.sens-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.4vw, 46px);
  color: var(--text-color);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 18px;
}

.sens-card-desc {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(245, 241, 237, 0.6);
  max-width: 520px;
  margin: 0;
}

.sens-womens-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  background: rgba(192, 132, 151, 0.1);
  border: 1px solid rgba(192, 132, 151, 0.28);
  padding: 6px 15px;
  border-radius: 20px;
}

.sens-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
}

.sens-nav-btn {
  background: transparent;
  border: 1px solid rgba(245, 241, 237, 0.12);
  color: rgba(245, 241, 237, 0.5);
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sens-nav-btn:hover { border-color: var(--gold-accent); color: var(--gold-accent); }
.sens-nav-btn:disabled { opacity: 0.2; cursor: default; }
.sens-nav-btn:disabled:hover { border-color: rgba(245, 241, 237, 0.12); color: rgba(245, 241, 237, 0.5); }

.sens-counter {
  font-size: 12px;
  color: rgba(245, 241, 237, 0.3);
  letter-spacing: 0.1em;
}

.womens-callout {
  width: 100%;
  max-width: 680px;
  margin: 64px auto 0;
}

.womens-card {
  border: 1px solid rgba(224, 64, 160, 0.2);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(224, 64, 160, 0.04);
}

.womens-card-header {
  padding: 40px 48px 28px;
  border-bottom: 1px solid rgba(224, 64, 160, 0.1);
}

.womens-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--electric-accent);
  margin-bottom: 12px;
}

.womens-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--text-color);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.womens-card-title em {
  font-style: italic;
  color: var(--gold-accent);
}

.womens-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 241, 237, 0.5);
  max-width: 520px;
  margin: 0;
}

.womens-grid {
  padding: 32px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.womens-feature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--electric-accent);
  margin-bottom: 8px;
}

.womens-feature-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 5px;
}

.womens-feature-desc {
  font-size: 13px;
  color: rgba(245, 241, 237, 0.42);
  line-height: 1.55;
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  .sens-card { grid-template-columns: 1fr; }
  .sens-card-visual { border-right: none; border-bottom: 1px solid rgba(201,169,110,0.14); padding: 40px; }
  .sens-card-visual svg { max-height: 150px; }
  .sens-card-top { padding: 36px 30px; }
  .womens-card-header { padding: 32px 28px 24px; }
  .womens-grid { grid-template-columns: 1fr; padding: 24px 28px; }
}

/* --- THE DEMO MODAL OVERLAY --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 5, 5, 0.85); /* Dark cinematic background */
    backdrop-filter: blur(8px); /* Blurs the website behind it */
    z-index: 10000; /* Ensures it sits on top of absolutely everything */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

/* This class gets added by JS to reveal the pop-up */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The X Close Button */
.close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #F5F1ED;
    font-size: 45px;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: var(--gold-accent);
}
/* --- THE HARDWARE SHELL (iPHONE MOCKUP) --- */
.device-wrapper {
    width: 330px; /* Exact iPhone proportions */
    height: 680px; 
    background: #111; /* The physical dark metal edge of the phone */
    border-radius: 45px;
    padding: 12px; /* This creates the "bezel" thickness */
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 0 2px #333;
    position: relative;
    margin: auto; /* Centers the phone in the modal */
}

/* The actual glowing screen area */
.device-screen {
    width: 100%;
    height: 100%;
    background: #080508;
    border-radius: 35px;
    overflow: hidden;
    position: relative;
    color: #F7F7F7;
}

/* The iframe that loads the standalone app */
.app-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 35px;
    display: block;
}

/* --- APP VIEWS & TRANSITIONS --- */
.app-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
    padding: 50px 24px;
    overflow-y: auto; /* Allows scrolling INSIDE the app */
}

.app-view.active {
    opacity: 1;
    pointer-events: inherit;
}

/* Hide the ugly desktop scrollbar inside the phone */
.app-view::-webkit-scrollbar { display: none; }

/* --- APP STYLING: SPLASH & HOME --- */
#view-splash {
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-logo {
    font-family: 'Noto Rashi Hebrew', serif;
    font-size: 2.2rem;
    letter-spacing: 0.3em;
    color: var(--gold-accent); 
    font-weight: 400;
}

.app-header {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
}

.phase-tag {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--electric-accent);
}

.app-header h2 {
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 14px 0 4px;
    color: rgba(245, 241, 237, 0.7);
    letter-spacing: 0.05em;
}

.alignment-score {
    font-family: 'Noto Rashi Hebrew', serif;
    font-size: 64px;
    font-weight: bold;
    color: var(--gold-accent);
    line-height: 1;
}


/* ============================================
   APP DEMO — COBALT (REDUCED) + GOLD PALETTE
   All scoped inside .device-screen
   ============================================ */

.device-screen {
    --demo-cobalt: #2B7FFF;
    --demo-cobalt-dim: rgba(43, 127, 255, 0.10);
    --demo-cobalt-border: rgba(43, 127, 255, 0.20);
    --demo-gold: #C9A96E;
    --demo-gold-dim: rgba(201, 169, 110, 0.12);
    --demo-gold-border: rgba(201, 169, 110, 0.25);
    --demo-text: #F7F7F7;
    --demo-muted: rgba(247, 247, 247, 0.4);
    --demo-card-bg: rgba(247, 247, 247, 0.04);
    --demo-card-border: rgba(247, 247, 247, 0.08);
}

/* --- SHARED APP CHROME --- */
.app-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.app-time { font-size: 11px; color: var(--demo-muted); letter-spacing: 0.05em; }
.app-phase-pill {
    font-size: 8.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--demo-cobalt);
    background: var(--demo-cobalt-dim);
    border: 1px solid var(--demo-cobalt-border);
    padding: 3px 9px;
    border-radius: 20px;
}

.screen-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--demo-muted);
    margin: 0 0 16px;
}

/* --- HOME SCREEN --- */
.app-greeting { font-size: 11px; color: var(--demo-muted); margin: 0 0 6px; text-align: center; }
.app-header { text-align: center; margin-bottom: 18px; }
.app-score-wrap { display: flex; flex-direction: column; align-items: center; }
.alignment-score {
    font-family: 'Noto Rashi Hebrew', serif;
    font-size: 68px;
    font-weight: 700;
    color: var(--demo-gold);
    line-height: 1;
}
.alignment-label {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--demo-muted);
    margin-top: 4px;
}
.app-score-sub {
    font-size: 11px;
    color: rgba(247, 247, 247, 0.55);
    margin: 5px 0 16px;
    letter-spacing: 0.02em;
}

.vitals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.vital-card {
    background: var(--demo-card-bg);
    border: 1px solid var(--demo-card-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.vital-value {
    font-family: 'Noto Rashi Hebrew', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--demo-text);
    line-height: 1;
}
.vital-unit-sm { font-size: 12px; color: var(--demo-muted); }
.vital-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--demo-muted); margin-top: 2px; }

.stress-row { margin-bottom: 14px; }
.stress-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.stress-label { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--demo-muted); }
.stress-value { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.stress-low { color: var(--demo-gold); }
.stress-track { height: 2px; background: rgba(247,247,247,0.08); border-radius: 2px; overflow: hidden; }
.stress-fill { height: 100%; background: var(--demo-gold); border-radius: 2px; }

.cycle-strip { display: flex; gap: 4px; }
.cycle-phase {
    flex: 1; text-align: center;
    font-size: 7px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 6px 2px; border-radius: 6px;
    background: var(--demo-card-bg);
    border: 1px solid var(--demo-card-border);
    color: var(--demo-muted);
}
.cycle-phase.done { color: rgba(201,169,110,0.45); border-color: rgba(201,169,110,0.12); }
.cycle-phase.active { color: var(--demo-gold); background: var(--demo-gold-dim); border-color: var(--demo-gold-border); font-weight: 700; }

/* --- VITALS SCREEN --- */
.metric-list { display: flex; flex-direction: column; gap: 2px; }
.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--demo-card-bg);
    border: 1px solid var(--demo-card-border);
    border-radius: 12px;
}
.metric-left { display: flex; flex-direction: column; gap: 2px; }
.metric-name { font-size: 12px; color: var(--demo-text); font-weight: 600; letter-spacing: 0.02em; }
.metric-sub { font-size: 9px; color: var(--demo-muted); letter-spacing: 0.06em; }
.metric-right { display: flex; align-items: baseline; gap: 4px; }
.metric-val { font-family: 'Noto Rashi Hebrew', serif; font-size: 22px; font-weight: 700; color: var(--demo-gold); line-height: 1; }
.metric-unit { font-size: 10px; color: var(--demo-muted); }
.metric-trend { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 8px; }
.trend-good { color: #7ecfa8; background: rgba(126,207,168,0.1); }
.trend-neutral { color: var(--demo-muted); background: var(--demo-card-bg); }

/* --- CYCLE SCREEN --- */
.cycle-hero { text-align: center; margin-bottom: 18px; }
.cycle-big-num {
    font-family: 'Noto Rashi Hebrew', serif;
    font-size: 56px; font-weight: 700;
    color: var(--demo-gold); line-height: 1;
    display: block;
}
.cycle-big-label { font-size: 10px; color: var(--demo-muted); letter-spacing: 0.1em; display: block; margin-bottom: 6px; }
.cycle-phase-name { font-size: 13px; font-weight: 700; color: var(--demo-text); margin: 0 0 4px; letter-spacing: 0.05em; }
.cycle-phase-desc { font-size: 10.5px; color: var(--demo-muted); line-height: 1.5; margin: 0; max-width: 220px; margin: 0 auto; }

.cycle-calendar { margin-bottom: 12px; }
.cal-row-labels {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.cal-row-labels span { text-align: center; font-size: 8px; color: var(--demo-muted); letter-spacing: 0.08em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 9px; border-radius: 6px; color: var(--demo-muted);
    background: var(--demo-card-bg);
}
.cal-day.phase-m { background: rgba(201,169,110,0.08); color: rgba(201,169,110,0.5); }
.cal-day.phase-f { background: rgba(43,127,255,0.06); color: rgba(43,127,255,0.5); }
.cal-day.phase-o { background: rgba(126,207,168,0.08); color: rgba(126,207,168,0.6); }
.cal-day.phase-l { background: rgba(201,169,110,0.12); color: rgba(201,169,110,0.65); }
.cal-day.today { background: var(--demo-gold); color: #1a0b1a; font-weight: 700; border-radius: 50%; }
.cal-day.future { opacity: 0.4; }

.cycle-legend { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.leg-item { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: var(--demo-muted); }
.leg-dot { width: 6px; height: 6px; border-radius: 50%; }
.phase-m-dot { background: rgba(201,169,110,0.5); }
.phase-f-dot { background: rgba(43,127,255,0.5); }
.phase-o-dot { background: rgba(126,207,168,0.6); }
.phase-l-dot { background: var(--demo-gold); }

/* --- COMMUNITY SCREEN --- */
.comm-event-card {
    background: var(--demo-gold-dim);
    border: 1px solid var(--demo-gold-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}
.comm-event-tag { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--demo-gold); display: block; margin-bottom: 6px; }
.comm-event-title { font-family: 'Noto Rashi Hebrew', serif; font-size: 20px; color: var(--demo-text); margin: 0 0 4px; }
.comm-event-detail { font-size: 10px; color: var(--demo-muted); margin: 0 0 12px; }
.comm-rsvp-btn {
    background: var(--demo-gold); color: #1a0b1a;
    border: none; border-radius: 20px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
    padding: 7px 18px; cursor: pointer;
    font-family: 'Gowun Dodum', sans-serif;
}

.comm-feed { display: flex; flex-direction: column; gap: 2px; }
.comm-feed-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--demo-card-bg);
    border: 1px solid var(--demo-card-border);
    border-radius: 12px;
}
.comm-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(201,169,110,0.15);
    border: 1px solid var(--demo-gold-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--demo-gold);
    flex-shrink: 0;
}
.comm-feed-text { flex: 1; }
.comm-name { font-size: 11px; font-weight: 700; color: var(--demo-text); margin: 0 0 2px; }
.comm-msg { font-size: 10px; color: var(--demo-muted); margin: 0; line-height: 1.3; }
.comm-time { font-size: 9px; color: var(--demo-muted); flex-shrink: 0; }

/* --- PERSISTENT NAV --- */
.app-nav {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex;
    border-top: 1px solid var(--demo-card-border);
    background: #080508;
    padding: 10px 0 18px;
    transition: opacity 0.4s ease;
    z-index: 10;
}
.app-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none;
    color: var(--demo-muted);
    cursor: pointer; transition: color 0.2s;
    font-family: 'Gowun Dodum', sans-serif;
    padding: 0;
}
.app-nav-btn.active { color: var(--demo-cobalt); }
.app-nav-btn:hover { color: var(--demo-cobalt); }
.nav-icon { font-size: 15px; }
.nav-label { font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* All content views get padding-bottom to clear the nav */
#view-home, #view-vitals, #view-cycle, #view-community {
    padding-bottom: 72px;
}

/* some small touches-- when you highlight some text inside the app, it gets a subtle gold highlight */
/* --- PREMIUM DETAIL 1: CUSTOM TEXT SELECTION --- */
::selection {
    background-color: rgba(201, 169, 110, 0.35); /* Versa Gold */
    color: #FFFFFF; /* Bright white text */
}

::-moz-selection {
    background-color: rgba(201, 169, 110, 0.35);
    color: #FFFFFF;
}

/* --- PREMIUM DETAIL 2: SCROLLBAR STYLING --- */
::-webkit-scrollbar {
    width: 2px; 
}
::-webkit-scrollbar-track {
    background: var(--sidebar-bg); /* Deep espresso */
    border-left: 1px solid rgba(245, 241, 237, 0.05); /* Adds a subtle divider line */
}
::-webkit-scrollbar-thumb {
    background: var(--primary-accent); /* Dusty plum */
    border-radius: 0px; /* Sharp corners, no rounding */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-accent); 
}
/* --- PREMIUM DETAIL 3: CINEMATIC PAGE LOAD --- */
body {
    animation: gentleFadeIn 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes gentleFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- PREMIUM DETAIL 4: FOCUS STATES --- */
:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 4px;
}

/* --- PREMIUM DETAIL 5: SMOOTH TRANSITIONS ON PAGE ELEMENTS --- */
section {
    will-change: transform;
}

/* Add subtle glow to all gold elements */
.gold-accent,
[style*="--gold-accent"] {
    text-shadow: 0 0 10px rgba(201, 169, 110, 0.2);
}

/* Enhance link hover states globally */
a {
    position: relative;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:not(.cin-btn):not(.app-nav-btn)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold-accent);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:not(.cin-btn):not(.app-nav-btn):hover::after {
    width: 100%;
}


/* ========================================= */
/* --- MOBILE MASTER OVERRIDES --- */
/* ========================================= */

@media (max-width: 768px) {
  
  /* --- 1. HERO FIX --- */
  .cin-text-block { 
    /* Pushes text to the top, removes the bottom padding */
    padding: 140px 6vw 0; 
  }
  
  .cin-product-wrap {
    /* Moves the bracelet to the bottom center */
    position: absolute;
    left: 50%;
    top: auto;
    bottom: -2vh; 
    width: 130vw; /* Makes the bracelet span wide across the screen */
    height: 50vh;
    animation: braceletEntranceMobile 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
  
  @keyframes braceletEntranceMobile {
    from { opacity: 0; transform: translate(-50%, 80px) scale(0.8); filter: blur(4px); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
  }

  /* --- 2. TIKTOK / EVIDENCE FIX --- */
  #Evidence.cream-bg-section {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  
  #Evidence .text-content {
    padding: 60px 8vw;
  }
  
  .crisp-video-link {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16; /* Perfect TikTok proportions */
    height: auto; 
  }
  
  .crisp-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- 3. COMPETITORS SWIPE CAROUSEL --- */
  .sc-arrow { display: none; } /* Touch users swipe instead */
  .sc-grid { 
    scroll-snap-type: x mandatory;
    padding-bottom: 24px;
  }
  
  .sc-card { 
    flex: 0 0 85vw; /* Each card takes up 85% of the screen width */
    scroll-snap-align: center; /* Snaps the card to the center of the screen */
  }

  /* Keep the drawers functional but closed by default to save space */
  .sc-drawer { max-height: 0; }
  .sc-hint { display: block; } /* Bring back the "Tap to expand" hint */
}
/* --- THE FINAL V EXORCISM --- */
.ghost-title, 
#ghost-title, 
[class*="ghost"] { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
    pointer-events: none !important;
}
@media (max-width: 768px) {
  .cin-text-block { 
    position: absolute;
    top: 8vh; /* Lifted higher */
    bottom: auto; 
    left: 6vw; 
    right: 6vw;
    padding: 0; 
  }
  
  .cin-product-wrap {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 12vh; /* Lifted higher to clear the browser bottom bar */
    width: 140vw; /* Slightly wider for more drama */
    height: 50vh;
    animation: braceletEntranceMobile 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
  
  /* Ensure the wordmark doesn't overlap the hamburger on tiny screens */
  .cin-wordmark {
    left: 60px;
    font-size: 18px;
  }
}

/* ===== Luxury refinement pass — depth, forms, labels (dark colorway) ===== */

/* One tracking system for section labels */
.prob-eyebrow, .sol-eyebrow, .ins-eyebrow, .comp-eyebrow, .mission-eyebrow, .founder-eyebrow {
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* Jewelry-on-felt depth for app insight cards */
.ins-grid .ins-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), 0 24px 50px rgba(0, 0, 0, 0.18);
}
.ins-grid .ins-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20), 0 30px 60px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(201, 169, 110, 0.10);
}

/* Contact form — rose underlines, aubergine focus */
#Contact .contact-form input,
#Contact .contact-form select,
#Contact .contact-form textarea {
    border-bottom-color: rgba(158, 100, 120, 0.38);
}
#Contact .contact-form input:focus,
#Contact .contact-form select:focus,
#Contact .contact-form textarea:focus {
    border-bottom-color: var(--bg-color);
}
#Contact .contact-form label { color: rgba(90, 66, 86, 0.72); }

/* Primary CTA — aubergine ground, cream text, gold on hover */
.submit-btn {
    background-color: var(--aubergine);
    box-shadow: 0 4px 15px rgba(42, 14, 47, 0.35);
}
.submit-btn:hover {
    background-color: var(--gold-accent);
    color: #241338;
}

/* Editorial pull-line in the In Focus section */
#Evidence .funk-text {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--rose-deep) !important;
    border-bottom: 1px solid rgba(158, 100, 120, 0.45);
    padding-bottom: 6px;
}

/* Footer nav — subtle gold glow on hover */
.vfoot-nav a:hover { text-shadow: 0 0 16px rgba(201, 169, 110, 0.35); }

/* Footer — collapse the columns on mobile so nothing gets cramped.
   Uses !important to override the inline grid-template-columns. */
@media (max-width: 768px) {
    .vfoot-top { grid-template-columns: 1fr !important; gap: 44px !important; }
    .vfoot-nav { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
    .vfoot-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
}

/* Breathing room — luxury is whitespace */
@media (min-width: 769px) {
    .insights-section { padding-top: 140px; padding-bottom: 140px; }
    .manifesto-section { padding-top: 150px; padding-bottom: 150px; }
    #Meet-Ayanna { padding-top: 130px; padding-bottom: 130px; }
}

/* ============================================================
   PRODUCT SECTION — shared keyframes + mobile presentation
   (Desktop keeps the scroll-driven cinematic untouched.)
   ============================================================ */

/* These keyframes are referenced by the cinematic hotspot dots and the
   "scroll to reveal" curtain text but were never defined. */
@keyframes versaPulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
@keyframes versaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* Mobile product block hidden on desktop */
.product-mobile { display: none; }

@media (max-width: 768px) {
    /* Collapse the 460vh scroll stage and hide the WebGL cinematic on phones */
    #Product[data-rev="a"] {
        height: auto !important;
        min-height: 0;
        padding: 0;
    }
    #Product[data-rev="a"] > div:first-child { display: none; }

    .product-mobile {
        display: block;
        padding: 78px 6vw 64px;
        text-align: center;
        font-family: 'Gowun Dodum', sans-serif;
    }
    .pm-eyebrow {
        font-family: 'Space Mono', monospace;
        font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
        color: #c9a96e; margin: 0 0 24px;
    }
    .pm-wordmark {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        font-size: clamp(64px, 24vw, 120px);
        line-height: 0.9; letter-spacing: -0.02em;
        color: #f1e4cb;
        text-shadow: 0 0 40px rgba(217,178,106,0.35), 0 0 90px rgba(217,178,106,0.18);
        margin: 0;
    }
    .pm-tagline {
        font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
        color: #a99a7e; margin: 16px 0 4px;
    }
    .pm-model {
        width: 100%;
        height: 70vw;
        max-height: 360px;
        margin: 6px auto 22px;
        background: transparent;
        --poster-color: transparent;
    }
    .pm-sensors {
        display: flex; flex-direction: column; gap: 16px;
        text-align: left; max-width: 420px; margin: 0 auto 36px;
    }
    .pm-sensor { display: flex; gap: 13px; align-items: flex-start; }
    .pm-dot {
        width: 9px; height: 9px; border-radius: 50%;
        background: #e7c585; box-shadow: 0 0 12px #d9b26a;
        flex: none; margin-top: 8px; position: relative;
    }
    .pm-dot::after {
        content: ''; position: absolute; inset: -3px; border-radius: 50%;
        border: 1px solid #d9b26a;
        animation: versaPulse 2.4s ease-out infinite;
    }
    .pm-sensor-name {
        font-family: 'Cormorant Garamond', serif; font-style: italic;
        font-size: 20px; color: #f3e7cf; line-height: 1.25;
    }
    .pm-sensor-desc { font-size: 12px; color: #b3a488; margin-top: 2px; line-height: 1.5; }
    .pm-pillars {
        display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
        font-family: 'Cormorant Garamond', serif; font-style: italic;
        font-size: 17px; color: #e4d6ba; margin: 0 0 40px;
    }
    .pm-specs {
        background: rgba(5,2,9,0.8);
        border-top: 1px solid rgba(217,178,106,0.24);
        border-bottom: 1px solid rgba(217,178,106,0.24);
        border-radius: 5px;
        text-align: left;
        overflow: hidden;
    }
    .pm-specs-title {
        font-family: 'Space Mono', monospace;
        font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;
        color: #c9a96e; text-align: center;
        padding: 16px 0 13px; margin: 0;
    }
    .pm-specs-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        border-top: 1px solid rgba(217,178,106,0.32);
    }
    .pm-spec {
        padding: 14px 16px 16px;
        border-bottom: 1px solid rgba(217,178,106,0.12);
    }
    .pm-spec:nth-child(odd) { border-right: 1px solid rgba(217,178,106,0.12); }
    .pm-spec:nth-last-child(-n+2) { border-bottom: none; }
    .pm-spec-k {
        font-family: 'Space Mono', monospace;
        font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
        color: #b69a63; margin: 0 0 8px;
    }
    .pm-spec-v {
        font-family: 'Cormorant Garamond', serif;
        font-size: 15px; line-height: 1.6; color: #f5f1ed; margin: 0;
    }
    .pm-spec-v--sm {
        font-family: 'Gowun Dodum', sans-serif;
        font-size: 12px; color: rgba(245,241,237,0.65);
    }
}