@font-face {
    font-family: "Agrandir Wide";
    src: url("../fonts/agrandir-wide.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --black: #000000;
    --bg: #050505;
    --bg-2: #0a0a0a;
    --bg-3: #111111;
    --beige: #f8f3ec;
    --beige-light: #fdf9f2;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.66);
    --muted-2: rgba(255, 255, 255, 0.48);
    --cyan: #008B8B;
    --cyan-hi: #00b0b0;
    --cyan-soft: rgba(0, 139, 139, 0.12);
    --cyan-line: rgba(0, 139, 139, 0.35);
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --display: "Agrandir Wide", "Outfit", "Manrope", "Inter", system-ui, -apple-system, sans-serif;
    --body: "Montserrat", system-ui, -apple-system, sans-serif;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  /* ---------- Layout ---------- */
  .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
  .container-narrow { max-width: 960px; margin: 0 auto; padding: 0 28px; }
  .schedule-embed { width: 100%; border-radius: var(--r-lg); overflow: hidden; }
  .schedule-embed iframe { width: 100%; height: 650px; border: none; }
  @media (max-width: 600px) {
    .schedule-embed { min-height: 0; }
  }
  section { padding: 90px 0; position: relative; }
  @media (max-width: 720px) {
    section { padding: 60px 0; }
    .container, .container-narrow { padding: 0 20px; }
  }

  /* ---------- Typography ---------- */
  .display {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.05;
  }
  h1.hero-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(34px, 5.4vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0;
  }
  h2.section-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    text-wrap: balance;
  }
  h2.section-title em {
    font-style: normal;
    color: var(--cyan-hi);
    display: block;
  }
  .section-lead {
    font-size: clamp(14px, 1.05vw, 16px);
    color: var(--muted);
    max-width: 720px;
    line-height: 1.55;
    margin: 0;
  }
  .final h2.section-title { font-size: clamp(34px, 4.4vw, 60px); }
  .final .section-lead { font-size: clamp(16px, 1.25vw, 19px); }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan-hi);
    margin-bottom: 22px;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 26px;
    background: var(--cyan);
    color: #fff;
    border: 1px solid var(--cyan);
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 12px 30px -12px rgba(0, 139, 139, 0.6);
  }
  .btn:hover {
    background: var(--cyan-hi);
    border-color: var(--cyan-hi);
    transform: translateY(-1px);
  }
  .btn-label { font-size: 15px; font-weight: 500; }
  .btn-sub { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

  .btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid var(--line-2);
    box-shadow: none;
  }
  .btn-ghost:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.28);
  }

  .btn-sm { padding: 11px 18px; font-size: 13px; }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 28px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 24px;
  }
  .nav-inner > .btn { justify-self: end; }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .brand-wordmark {
    font-family: var(--display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.06em;
    color: var(--cyan);
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    padding-top: 6px;
  }
  @media (max-width: 720px) {
    .brand-wordmark { font-size: 20px; letter-spacing: 0.05em; padding-top: 4px; }
  }
  .brand .logo-light { display: none; }
  .brand .logo-dark { display: block; }
  body[data-mood="daylight"] .brand .logo-dark { display: none; }
  body[data-mood="daylight"] .brand .logo-light { display: block; }
  .footer-wordmark {
    font-family: var(--display);
    font-weight: 500;
    font-size: 44px;
    letter-spacing: 0.08em;
    color: var(--cyan);
    line-height: 1;
    display: block;
    text-align: center;
  }
  @media (max-width: 720px) {
    .footer-wordmark { font-size: 30px; letter-spacing: 0.06em; }
  }
  .brand-mark {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: 0.12em;
    font-size: 18px;
    color: #fff;
  }
  .brand-mark .scaling { color: rgba(255,255,255,0.6); }
  .brand-bar {
    height: 2px;
    width: 36px;
    background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) 60%, rgba(0,139,139,0) 100%);
    margin-top: 2px;
  }
  .brand-wrap { display: flex; flex-direction: column; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 13px;
    color: var(--muted);
  }
  .nav-links a { transition: color 0.15s ease; }
  .nav-links a:hover { color: #fff; }
  @media (max-width: 980px) {
    .nav-links { display: none; }
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    padding: 112px 0;
    overflow: hidden;
    isolation: isolate;
  }
  @media (max-width: 720px) {
    .hero { padding: 92px 0; }
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,139,139,0.22), transparent 70%),
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,139,139,0.08), transparent 70%);
    z-index: -1;
  }
  .hero-inner { text-align: center; max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
  .hero-badge {
    display: block;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan-hi);
    margin-bottom: 20px;
  }
  .hero-sub {
    margin: 28px auto 0;
    max-width: 720px;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.55;
    color: var(--muted);
  }
  .hero-cta-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 56px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .spots-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: var(--cyan-soft);
    border-radius: 999px;
    padding: 7px 28px 3px;
  }
  .spots-label {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cyan-hi);
  }
  .spots-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(0,139,139,0.15);
    width: 260px;
  }
  .spots-bar-fill {
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: var(--cyan-hi);
  }
  .spots-left {
    font-family: var(--display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #dc2626;
    text-align: center;
  }

  .hero-trust {
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 820px;
  }
  .hero-trust-item {
    background: var(--cyan-soft);
    border-radius: 16px;
    padding: 20px 18px;
    text-align: center;
  }
  .hero-trust-icon {
    width: 22px;
    height: 22px;
    color: var(--cyan-hi);
    margin-bottom: 8px;
  }
  .hero-trust-item strong {
    display: block;
    color: var(--text);
    font-family: var(--display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
  }
  .hero-trust-item span {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  @media (max-width: 720px) {
    .hero-trust { grid-template-columns: 1fr; }
  }

  /* Hero accent underline like the wordmark */
  .hero-underline {
    display: inline-block;
    position: relative;
    padding-bottom: 4px;
  }
  .hero-underline::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -10px;
    height: 4px;
    background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-hi) 50%, rgba(0,139,139,0) 100%);
    border-radius: 2px;
  }

  /* ---------- VSL ---------- */
  .vsl {
    padding: 54px 0;
  }
  @media (max-width: 720px) {
    .vsl { padding: 24px 0; }
  }
  .vsl-inner {
    background: linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 36px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .vsl-inner::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(180deg, var(--cyan-line), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  .vsl-frame {
    margin: 32px auto 0;
    aspect-ratio: 16 / 9;
    max-width: 880px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 50%, rgba(0,139,139,0.18), transparent 60%),
      linear-gradient(180deg, #111 0%, #050505 100%);
    border: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .vsl-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.02) 0 2px,
      transparent 2px 18px
    );
    pointer-events: none;
    opacity: 0;
  }
  .vsl-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    border-radius: inherit;
    display: block;
  }
  .play {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--cyan);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 50px -10px rgba(0,139,139,0.6);
    transition: transform 0.2s ease, background 0.2s ease;
    position: relative;
    z-index: 1;
  }
  .play:hover { transform: scale(1.05); background: var(--cyan-hi); }
  .play svg { margin-left: 4px; }
  .vsl-caption {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
    font-family: var(--display);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  @media (max-width: 720px) { .vsl-inner { padding: 36px 22px; } }

  /* ---------- Problem section ---------- */
  .problem-header { max-width: 880px; margin: 0 auto 28px; text-align: center; }
  .problem-header .section-lead { margin: 16px auto 0; }
  .problem-list {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
  }
  .problem-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 18px 0 18px 22px;
    border-left: 2px solid var(--line);
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .problem-row:hover { border-left-color: var(--cyan); background: rgba(0,139,139,0.03); }
  .problem-row .num {
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    color: var(--cyan-hi);
    letter-spacing: 0.16em;
    flex-shrink: 0;
  }
  .problem-row p {
    margin: 0;
    color: #e9e9e9;
    font-size: 16px;
    line-height: 1.5;
  }
  .problem-row p strong { color: var(--text); font-weight: 600; }
  .problem-closer {
    margin-top: 40px;
    text-align: center;
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 32px);
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.01em;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  .problem-closer span { color: var(--cyan-hi); }
  @media (max-width: 600px) {
    .problem-list { max-width: 100%; }
    .problem-row { padding: 14px 0 14px 16px; gap: 14px; }
  }

  /* ---------- CCS Growth System ---------- */
  .ccs { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ccs-header { text-align: center; max-width: 760px; margin: 0 auto 36px; }
  .ccs-header .section-lead { margin: 16px auto 0; }
  .ccs-tagline {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cyan-hi);
    font-size: 13px;
    margin-bottom: 22px;
  }
  .ccs-tagline span { color: rgba(255,255,255,0.3); margin: 0 8px; }
  body[data-mood="daylight"] .ccs-tagline span { color: rgba(0,0,0,0.3); }
  .ccs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
  }
  .ccs-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .ccs-card:hover { border-color: var(--cyan-line); transform: translateY(-2px); }
  .ccs-card-num {
    font-family: var(--display);
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
    color: var(--cyan);
    letter-spacing: -0.02em;
  }
  .ccs-card-label {
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ccs-card h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(20px, 1.8vw, 24px);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .ccs-card p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }
  @media (max-width: 900px) { .ccs-grid { grid-template-columns: 1fr; } }
  .ccs-cta { margin-top: 56px; text-align: center; }

  /* ---------- Why Nero ---------- */
  .why { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .why-header { max-width: 820px; margin: 0 auto 28px; text-align: center; }
  .why-header .section-lead { margin: 16px auto 0; }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .why-cell {
    padding: 44px 32px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 280px;
  }
  .why-cell:last-child { border-right: 0; }
  .why-stat {
    font-family: var(--display);
    font-weight: 400;
    font-size: 64px;
    line-height: 1;
    color: var(--cyan);
    letter-spacing: -0.02em;
  }
  .why-cell h4 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 19px;
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.25;
  }
  .why-cell p {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.6;
  }
  @media (max-width: 900px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .why-cell:nth-child(2) { border-right: 0; }
    .why-cell:nth-child(1), .why-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  }
  @media (max-width: 540px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-cell { border-right: 0; border-bottom: 1px solid var(--line); }
    .why-cell:last-child { border-bottom: 0; }
  }

  /* ---------- Pricing ---------- */
  .pricing-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
  @media (max-width: 900px) { .pricing-wrap { grid-template-columns: 1fr; } }
  .pricing-card {
    background: linear-gradient(180deg, #0c0c0c 0%, #060606 100%);
    border: 1px solid var(--line-2);
    border-radius: 28px;
    padding: 48px;
    position: relative;
    overflow: hidden;
  }
  .pricing-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(180deg, var(--cyan-line), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  .price-tag-label {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan-hi);
    margin-bottom: 20px;
  }
  .price {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(54px, 6vw, 84px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
  }
  .price-sub {
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
  }
  .price-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 12px;
  }
  .price-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px;
    color: #e8e8e8;
    line-height: 1.45;
  }
  .price-list li svg { flex-shrink: 0; margin-top: 3px; }
  .price-foot {
    color: var(--muted-2);
    font-size: 13px;
    line-height: 1.55;
    margin: 22px 0 0;
  }

  /* ---------- FAQ ---------- */
  .faq-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
  .faq-list {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
  }
  .faq-item {
    border-bottom: 1px solid var(--line);
  }
  .faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text);
    padding: 28px 8px;
    text-align: left;
    font-family: var(--display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.005em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    line-height: 1.35;
  }
  .faq-q:hover { color: var(--cyan-hi); }
  .faq-toggle {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .faq-item[open] .faq-toggle {
    transform: rotate(45deg);
    background: var(--cyan);
    border-color: var(--cyan);
  }
  .faq-a {
    padding: 0 8px 28px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 760px;
  }
  details.faq-item summary { list-style: none; }
  details.faq-item summary::-webkit-details-marker { display: none; }

  /* ---------- Final CTA ---------- */
  .final {
    text-align: center;
    background:
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,139,139,0.20), transparent 70%),
      var(--bg);
    border-top: 1px solid var(--line);
  }
  .final h2 { margin-bottom: 22px; }
  .final .section-lead { margin: 0 auto 38px; }

  /* ---------- Footer ---------- */
  .footer {
    background: #000;
    padding: 60px 0 36px;
    border-top: 1px solid var(--line);
  }
  .footer-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .footer-meta {
    color: var(--muted-2);
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }
  .footer-meta a { color: var(--muted); }
  .footer-meta a:hover { color: #fff; }
  .footer-links {
    display: flex;
    gap: 22px;
    font-size: 13px;
    color: var(--muted);
  }

  /* ---------- Misc ---------- */
  .nowrap { white-space: nowrap; }

  ::selection { background: var(--cyan); color: #fff; }

  /* ============================================================
     TWEAKS — three expressive controls (Mood / Voice / Pulse)
     ============================================================ */

  /* ---------- MOOD: DAYLIGHT (warm ivory inversion) ---------- */
  body[data-mood="daylight"] {
    --bg: #f8f3ec;
    --bg-2: #ffffff;
    --bg-3: #ffffff;
    --black: #f8f3ec;
    --text: #000000;
    --muted: #000000;
    --muted-2: #000000;
    --line: rgba(0, 0, 0, 0.10);
    --line-2: rgba(0, 0, 0, 0.18);
    --cyan-soft: rgba(0, 139, 139, 0.10);
    --cyan-line: rgba(0, 139, 139, 0.32);
    --cyan-hi: #006e6e;
    color: var(--text);
    background: var(--bg);
  }
  body[data-mood="daylight"] .nav { background: rgba(248,243,236,0.82); border-bottom-color: var(--line); }
  body[data-mood="daylight"] .brand-mark { color: #000; }
  body[data-mood="daylight"] .brand-mark .scaling { color: #000; }
  body[data-mood="daylight"] .nav-links { color: #000; }
  body[data-mood="daylight"] .nav-links a:hover { color: #000; }
  body[data-mood="daylight"] .hero::before {
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,139,139,0.10), transparent 70%),
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,139,139,0.05), transparent 70%);
  }
  body[data-mood="daylight"] .vsl-inner { background: linear-gradient(180deg, #ffffff 0%, #f1ebde 100%); }
  body[data-mood="daylight"] .vsl-frame {
    background:
      radial-gradient(circle at 50% 50%, rgba(0,139,139,0.10), transparent 60%),
      linear-gradient(180deg, #e9e3d4 0%, #d8d0bf 100%);
  }
  body[data-mood="daylight"] .vsl-frame::after { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.025) 0 2px, transparent 2px 18px); }
  body[data-mood="daylight"] .problem-row:hover { border-left-color: var(--cyan); background: rgba(0,0,0,0.03); }
  body[data-mood="daylight"] .problem-row p { color: #000; }
  body[data-mood="daylight"] .ccs { background: #ffffff; }
  body[data-mood="daylight"] .ccs-card { background: var(--beige); border-color: rgba(0,0,0,0.08); }
  body[data-mood="daylight"] .ccs-card:hover { background: #ffffff; }
  body[data-mood="daylight"] .why { background: var(--beige-light); }
  body[data-mood="daylight"] .pricing-card { background: linear-gradient(180deg, #ffffff 0%, #f3eee4 100%); }
  body[data-mood="daylight"] .price-list li { color: #000; }
  body[data-mood="daylight"] .final { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,139,139,0.16), transparent 70%), var(--bg); }
  body[data-mood="daylight"] .footer { background: #0a0a0a; color: #fff; }
  body[data-mood="daylight"] .footer .footer-meta a { color: rgba(255,255,255,0.6); }
  body[data-mood="daylight"] .footer .footer-meta { color: rgba(255,255,255,0.45); }
  body[data-mood="daylight"] .footer .brand-mark { color: #fff; }
  body[data-mood="daylight"] .footer .brand-mark .scaling { color: rgba(255,255,255,0.55); }
  body[data-mood="daylight"] .footer .footer-links a { color: rgba(255,255,255,0.62); }
  body[data-mood="daylight"] .footer .footer-links a:hover { color: #fff; }

  /* ---------- MOOD: FLOOD (cyan-saturated hero + final) ---------- */
  body[data-mood="flood"] .hero { background: #008B8B; }
  body[data-mood="flood"] .hero::before {
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,0.18), transparent 70%),
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,0,0,0.25), transparent 70%);
  }
  body[data-mood="flood"] .hero::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.4), transparent); }
  body[data-mood="flood"] .hero .hero-badge { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.4); color: #fff; }
  body[data-mood="flood"] .hero .hero-badge .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.22); }
  body[data-mood="flood"] .hero .hero-sub { color: rgba(255,255,255,0.94); }
  body[data-mood="flood"] .hero .btn { background: #000; border-color: #000; box-shadow: 0 14px 32px -12px rgba(0,0,0,0.55); }
  body[data-mood="flood"] .hero .btn:hover { background: #1a1a1a; border-color: #1a1a1a; }
  body[data-mood="flood"] .hero .hero-underline::after { background: linear-gradient(90deg, #000 0%, #1a1a1a 60%, transparent 100%); }
  body[data-mood="flood"] .hero .spots { color: rgba(255,255,255,0.92); }
  body[data-mood="flood"] .hero .spots .pulse { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  body[data-mood="flood"] .hero .hero-trust { border-color: rgba(255,255,255,0.32); }
  body[data-mood="flood"] .hero .hero-trust-item { border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.86); }
  body[data-mood="flood"] .hero .hero-trust-item strong { color: #fff; }

  body[data-mood="flood"] .final { background: #008B8B; }
  body[data-mood="flood"] .final .eyebrow { color: rgba(255,255,255,0.92); }
  body[data-mood="flood"] .final .eyebrow::before { background: rgba(255,255,255,0.55); }
  body[data-mood="flood"] .final h2 em { color: #000; }
  body[data-mood="flood"] .final .section-lead { color: rgba(255,255,255,0.92); }
  body[data-mood="flood"] .final .btn { background: #000; border-color: #000; box-shadow: 0 14px 32px -12px rgba(0,0,0,0.55); }
  body[data-mood="flood"] .final .btn:hover { background: #1a1a1a; border-color: #1a1a1a; }
  body[data-mood="flood"] .final .spots { color: rgba(255,255,255,0.92); }
  body[data-mood="flood"] .final .spots .pulse { background: #fff; }

  /* ---------- VOICE: CAPS (statement uppercase) ---------- */
  body[data-voice="caps"] h1.hero-title,
  body[data-voice="caps"] h2.section-title {
    text-transform: uppercase;
    letter-spacing: 0.005em;
    font-weight: 500;
  }
  body[data-voice="caps"] h1.hero-title { font-size: clamp(34px, 5.6vw, 76px); letter-spacing: -0.005em; }
  body[data-voice="caps"] h2.section-title { font-size: clamp(30px, 4vw, 54px); }
  body[data-voice="caps"] .ccs-card h3 { text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(18px, 2vw, 22px); }
  body[data-voice="caps"] .why-cell h4 { text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; }
  body[data-voice="caps"] .hero-underline::after { height: 5px; bottom: -10px; }

  /* ---------- VOICE: MANIFESTO (massive stacked display) ---------- */
  body[data-voice="manifesto"] h1.hero-title {
    font-size: clamp(48px, 8.2vw, 124px);
    letter-spacing: -0.04em;
    line-height: 0.92;
    font-weight: 400;
  }
  body[data-voice="manifesto"] h2.section-title {
    font-size: clamp(40px, 5.6vw, 80px);
    letter-spacing: -0.035em;
    line-height: 0.98;
    font-weight: 400;
  }
  body[data-voice="manifesto"] h2.section-title em {
    color: rgba(255,255,255,0.42);
  }
  body[data-mood="daylight"][data-voice="manifesto"] h2.section-title em { color: rgba(0,0,0,0.5); }
  body[data-mood="flood"][data-voice="manifesto"] .hero h1.hero-title { color: #fff; }
  body[data-voice="manifesto"] .hero-underline::after { height: 10px; bottom: -16px; border-radius: 2px; }
  body[data-voice="manifesto"] .hero-sub { font-size: clamp(17px, 1.45vw, 22px); }

  /* ---------- DARK ISLANDS removed — hero and final now adopt full daylight palette ---------- */

  /* ---------- PULSE: WHISPER (calm, no glow) ---------- */
  body[data-pulse="whisper"] .hero::before { background: none; }
  body[data-pulse="whisper"] .final { background: var(--bg); }
  body[data-mood="daylight"][data-pulse="whisper"] .final { background: #050505; }
  body[data-pulse="whisper"] .btn { box-shadow: none; }
  body[data-pulse="whisper"] .hero-underline::after { height: 1px; bottom: -8px; background: var(--cyan); }
  body[data-pulse="whisper"] .spots .pulse { animation: none; }
  body[data-pulse="whisper"] .hero-badge .dot { box-shadow: none; }
  body[data-pulse="whisper"] .pricing-card::before { background: none; }
  body[data-pulse="whisper"] .vsl-inner::before { background: none; }
  body[data-pulse="whisper"] .play { box-shadow: none; }
  body[data-pulse="whisper"] .hero-badge { background: transparent; border-color: var(--line-2); color: var(--muted); }
  body[data-pulse="whisper"] .ccs-card:hover { transform: none; box-shadow: none; }
  body[data-pulse="whisper"] .why-stat,
  body[data-pulse="whisper"] .ccs-card-num { text-shadow: none; }
  body[data-pulse="whisper"] .price {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
  }

  /* ---------- ELECTRIC MIDDLE SECTIONS (default-on — the canonical look) ---------- */
  /* These apply by default in all moods; only whisper removes them. */
  .ccs-card:hover { box-shadow: 0 24px 60px -20px rgba(0,139,139,0.35); }
  .why-stat { text-shadow: 0 0 40px rgba(0,139,139,0.40); }
  .ccs-card-num { text-shadow: 0 0 36px rgba(0,139,139,0.40); }
  .play { box-shadow: 0 0 60px rgba(0,176,176,0.55), 0 16px 50px -10px rgba(0,139,139,0.65); }
  .price {
    background: linear-gradient(180deg, #ffffff 0%, var(--cyan-hi) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  body[data-mood="daylight"] .price {
    background: linear-gradient(180deg, #0a0a0a 0%, var(--cyan-hi) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ---------- PULSE: ELECTRIC (add hero + final glow on top) ---------- */
  body[data-pulse="electric"] .hero::before {
    background:
      radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0,176,176,0.45), transparent 70%),
      radial-gradient(ellipse 100% 60% at 50% 110%, rgba(0,139,139,0.22), transparent 70%);
  }
  body[data-pulse="electric"] .hero-underline::after { height: 6px; bottom: -12px; box-shadow: 0 0 24px rgba(0,176,176,0.7); }
  body[data-pulse="electric"] .btn { box-shadow: 0 18px 50px -10px rgba(0,176,176,0.7), 0 0 0 1px rgba(0,176,176,0.35); }
  body[data-pulse="electric"] .spots .pulse { animation-duration: 1.4s; }
  body[data-pulse="electric"] .ccs-card:hover { box-shadow: 0 24px 60px -20px rgba(0,176,176,0.55); }
  body[data-pulse="electric"] .why-stat { text-shadow: 0 0 40px rgba(0,176,176,0.55); }
  body[data-pulse="electric"] .ccs-card-num { text-shadow: 0 0 36px rgba(0,176,176,0.55); }

  /* ---------- LOCKED LIGHT SECTIONS: Problem + CCS (beige, regardless of mood) ---------- */
  #problem { background: var(--beige-light); }
  #problem .eyebrow { color: var(--cyan-hi); }
  #problem h2.section-title { color: #000; }
  #problem h2.section-title em { color: var(--cyan-hi); }
  #problem .section-lead { color: rgba(0,0,0,0.62); }
  #problem .problem-row { border-left-color: rgba(0,0,0,0.12); }
  #problem .problem-row:hover { border-left-color: var(--cyan); background: rgba(0,0,0,0.03); }
  #problem .problem-row .num { color: var(--cyan-hi); }
  #problem .problem-row p { color: rgba(0,0,0,0.72); }
  #problem .problem-row p strong { color: #000; }
  #problem .problem-closer { color: #000; }
  #problem .problem-closer span { color: var(--cyan-hi); }
  #problem .spots { color: rgba(0,0,0,0.5); }
  #problem .spots .pulse { background: var(--cyan-hi); }

  #system.ccs { background: var(--beige); border-top-color: rgba(0,0,0,0.08); border-bottom-color: rgba(0,0,0,0.08); }
  #system .ccs-tagline { color: var(--cyan-hi); }
  #system .ccs-tagline span { color: rgba(0,0,0,0.3); }
  #system h2.section-title { color: #000; }
  #system h2.section-title em { color: var(--cyan-hi); }
  #system .section-lead { color: rgba(0,0,0,0.62); }
  #system .ccs-card { background: var(--beige-light); border-color: rgba(0,0,0,0.08); }
  #system .ccs-card:hover { background: #ffffff; }
  #system .ccs-card-num { color: rgba(0,0,0,0.15); text-shadow: none; }
  #system .ccs-card-label { color: var(--cyan-hi); }
  #system .ccs-card h3 { color: #000; }
  #system .ccs-card p { color: rgba(0,0,0,0.62); }
  #system .spots { color: rgba(0,0,0,0.5); }
  #system .spots .pulse { background: var(--cyan-hi); }

/* ===================== Glass pill header / hero dots / reveal (added) ===================== */
:root { --anim-accent: #008B8B; }

.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:14px 16px;pointer-events:none;}
.pill{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;width:min(1100px,100%);padding:12px 24px;border-radius:100px;background:transparent;border:1px solid transparent;transition:width .52s cubic-bezier(.4,0,.2,1),padding .52s cubic-bezier(.4,0,.2,1),background .52s ease,border-color .52s ease,box-shadow .52s ease;}
.pill[data-compact="true"]{width:min(960px,100%);padding:8px 16px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.04),0 14px 40px rgba(0,0,0,.1);}
.pill-logo{position:relative;isolation:isolate;display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--display);font-weight:300;font-size:1.3rem;letter-spacing:.12em;line-height:1;color:var(--anim-accent);text-transform:uppercase;}
.pill-chip{position:absolute;inset:-7px -10px;z-index:0;background:#fff;border-radius:10px;opacity:0;transform:scale(.9);box-shadow:0 4px 14px rgba(0,0,0,.08);transition:opacity .45s ease,transform .45s ease;}
.pill[data-compact="true"] .pill-chip{opacity:1;transform:scale(1);}
.pill[data-compact="true"] .pill-logo{margin-left:10px;}
.lm-word{position:relative;z-index:1;display:inline-flex;}
.lm-rest{display:inline-block;max-width:8ch;overflow:hidden;opacity:1;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .35s ease;}
.pill[data-compact="true"] .lm-rest{max-width:0;opacity:0;}
.lm-gap{position:relative;z-index:1;display:inline-block;width:.34em;transition:width .45s cubic-bezier(.4,0,.2,1);}
.pill[data-compact="true"] .lm-gap{width:0;}
.pill-nav{display:flex;align-items:center;justify-content:center;gap:32px;transition:gap .52s cubic-bezier(.4,0,.2,1);}
.pill[data-compact="true"] .pill-nav{gap:18px;}
.pill-nav a{font-size:.72rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;transition:color .3s;}
.pill-nav a:hover{color:var(--anim-accent);}
.pill-right{display:flex;align-items:center;justify-content:flex-end;gap:16px;}
.pill-burger{display:none;background:none;border:none;cursor:pointer;width:32px;height:24px;position:relative;z-index:1001;}
.pill-burger span{display:block;width:100%;height:2px;background:#111;position:absolute;left:0;transition:all .3s;}
.pill-burger span:nth-child(1){top:2px;}.pill-burger span:nth-child(2){top:11px;}.pill-burger span:nth-child(3){top:20px;}
.pill-burger.active span:nth-child(1){top:11px;transform:rotate(45deg);}
.pill-burger.active span:nth-child(2){opacity:0;}
.pill-burger.active span:nth-child(3){top:11px;transform:rotate(-45deg);}
@media(max-width:880px){
  .pill{grid-template-columns:1fr auto;}
  .pill-nav{display:none;}
  .pill-nav.open{display:flex;flex-direction:column;position:fixed;inset:0;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;justify-content:center;align-items:center;gap:28px;padding:80px 24px;}
  .pill-nav.open a{font-size:1.1rem;color:#111;}
  .pill-cta{display:none;}
  .pill-burger{display:block;}
}

.hero-dots{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hero-dots canvas{display:block;}

/* Reveal anti-FOUC — only after JS confirms (html.js); NEVER hide a stagger wrapper */
html.js [data-reveal]:not([data-reveal="stagger"]){opacity:0;}
html.js [data-reveal="stagger"] > *{opacity:0;}
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal]:not([data-reveal="stagger"]),
  html.js [data-reveal="stagger"] > *{opacity:1!important;}
}

/* Hover targets get JS-driven lift (GSAP) instead of CSS transform, to avoid fighting */
.btn:hover{ transform:none; }
.ccs-card:hover{ transform:none; }