@layer landing {

  /* ─── Dark palette override (landing page only) ──────────── */

  body {
    --color-surface: #090d14;
    --color-card:    #0f1624;
    --color-text:    #e0eef8;
    --color-muted:   #7a9bb8;
    --color-border:  #1a2d45;
  }

  /* ─── Nav ────────────────────────────────────────────────── */

  .landing-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
    padding-inline: var(--space-4);
    background-color: rgba(10, 24, 50, 0.92);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--color-border);
  }

  .landing-nav__logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
  }

  .landing-nav__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-inline-start: auto;
  }

  .landing-nav__actions .btn {
    min-block-size: 2.75rem;
    padding-inline: var(--space-3);
    font-size: var(--font-size-sm);
  }

  .qr-btn__label {
    display: none;
  }

  @media (min-width: 480px) {
    .landing-nav {
      padding-inline: var(--space-6);
    }

    .landing-nav__actions {
      gap: var(--space-3);
    }

    .landing-nav__actions .btn {
      padding-inline: var(--space-4);
    }

    .qr-btn__label {
      display: inline;
    }
  }


  /* ─── Hero ───────────────────────────────────────────────── */

  .hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16) var(--space-12);
    padding-inline: var(--space-6);
    background:
      radial-gradient(ellipse 70% 60% at 80% 20%,
        color-mix(in srgb, var(--color-secondary) 38%, transparent), transparent 65%),
      radial-gradient(ellipse 55% 50% at 15% 80%,
        color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 65%),
      var(--color-surface);
  }

  .hero__inner {
    max-inline-size: 72rem;
    margin-inline: auto;
    display: grid;
    gap: var(--space-12);
    align-items: center;
  }

  @media (min-width: 860px) {
    .hero__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
    }
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-block-end: var(--space-4);
  }

  .hero__headline {
    font-size: clamp(2rem, 1.6rem + 1.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-block-end: var(--space-6);
  }

  .hero__headline mark {
    background: none;
    color: var(--color-primary);
  }

  .hero__sub {
    font-size: var(--font-size-lg);
    color: var(--color-muted);
    line-height: 1.6;
    max-inline-size: 38ch;
    margin-block-end: var(--space-8);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }


  /* ─── App preview card ───────────────────────────────────── */

  .hero-visual {
    perspective: 1200px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .app-preview {
      transform: rotateY(-10deg) rotateX(5deg);
      transition: transform 500ms ease;
    }

    .hero-visual:hover .app-preview {
      transform: rotateY(-5deg) rotateX(2deg);
    }
  }

  .app-preview {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow:
      var(--shadow-lg),
      0 0 0 1px color-mix(in srgb, var(--color-primary) 15%, transparent),
      0 32px 64px -12px color-mix(in srgb, var(--color-primary) 20%, transparent);
    padding: var(--space-4);
    overflow: hidden;
  }

  .preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }

  .preview-topbar__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
  }

  .preview-topbar__nav {
    display: flex;
    gap: var(--space-2);
  }

  .preview-topbar__nav button {
    all: unset;
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 0.7rem;
    background-color: var(--color-surface);
    cursor: default;
  }

  /* Day-column headers */
  .preview-days {
    display: grid;
    grid-template-columns: 4.5rem repeat(7, 1fr);
    gap: var(--space-1);
    margin-block-end: var(--space-2);
  }

  .preview-day {
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-block: var(--space-1);
  }

  .preview-day--today {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: var(--radius-sm);
  }

  /* Slot rows */
  .preview-row {
    display: grid;
    grid-template-columns: 4.5rem repeat(7, 1fr);
    gap: var(--space-1);
    margin-block-end: var(--space-1);
  }

  .preview-slot-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-inline-end: var(--space-2);
  }

  .preview-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    min-block-size: 3.5rem;
  }

  .preview-cell--today {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
    outline: 1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  }

  .preview-dot {
    inline-size: 0.65rem;
    block-size: 0.65rem;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary);
    flex-shrink: 0;
  }

  .preview-dot--taken {
    background-color: var(--color-primary);
  }

  .preview-dot--missed {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
  }

  .preview-dot--future {
    border-color: var(--color-border);
  }

  /* Floating badges on the preview */
  .preview-badges {
    position: relative;
    block-size: 0;
  }

  .preview-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
  }

  .preview-badge--refill {
    inset-block-start: -4.5rem;
    inset-inline-end: -1rem;
    background-color: color-mix(in srgb, var(--color-warning) 15%, var(--color-card));
    color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
  }

  .preview-badge--saved {
    inset-block-start: -7.5rem;
    inset-inline-start: -1rem;
    background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
    color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .preview-badge {
      animation: float 4s ease-in-out infinite;
    }

    .preview-badge--refill {
      animation-delay: -2s;
    }
  }

  @keyframes float {
    0%, 100% { translate: 0 0; }
    50%       { translate: 0 -6px; }
  }


  /* ─── Features ───────────────────────────────────────────── */

  .features {
    padding-block: var(--space-16);
    padding-inline: var(--space-6);
    background-color: var(--color-card);
    border-block: 1px solid var(--color-border);
  }

  .section-header {
    text-align: center;
    max-inline-size: 40ch;
    margin-inline: auto;
    margin-block-end: var(--space-12);
  }

  .section-label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-block-end: var(--space-3);
  }

  .section-title {
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-block-end: var(--space-4);
  }

  .section-desc {
    font-size: var(--font-size-base);
    color: var(--color-muted);
    line-height: 1.6;
  }

  .features-grid {
    display: grid;
    gap: var(--space-6);
    max-inline-size: 72rem;
    margin-inline: auto;
    list-style: none;
    padding: 0;
  }

  @media (min-width: 640px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 960px) {
    .features-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .feature-card {
    --card-color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
  }

  .feature-card:has(.feature-icon--blue)  { --card-color: var(--color-secondary); }
  .feature-card:has(.feature-icon--warm)  { --card-color: var(--color-warning); }

  @media (prefers-reduced-motion: no-preference) {
    .feature-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
  }

  .feature-card__header {
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    border-block-end: 1px solid color-mix(in srgb, var(--card-color) 20%, var(--color-border));
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--card-color) 22%, var(--color-card)) 0%,
      var(--color-card) 100%
    );
  }

  .feature-card:nth-child(even) .feature-card__header {
    background: linear-gradient(
      315deg,
      color-mix(in srgb, var(--card-color) 22%, var(--color-card)) 0%,
      var(--color-card) 100%
    );
  }

  .feature-card__body {
    padding: var(--space-6);
    flex: 1;
  }

  .feature-icon {
    position: absolute;
    inset-block-end: -0.25rem;
    inset-inline-end: var(--space-4);
    font-size: 4.5rem;
    line-height: 1;
    opacity: 0.18;
    pointer-events: none;
    background: none;
  }

  .feature-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
  }

  .feature-card p {
    font-size: var(--font-size-base);
    color: var(--color-muted);
    line-height: 1.6;
  }


  /* ─── How it works ───────────────────────────────────────── */

  .how {
    padding-block: var(--space-16);
    padding-inline: var(--space-6);
  }

  .steps {
    display: grid;
    gap: var(--space-8);
    max-inline-size: 56rem;
    margin-inline: auto;
    counter-reset: step;
    position: relative;
    list-style: none;
    padding: 0;
  }

  @media (min-width: 720px) {
    .steps {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .step {
    position: relative;
    padding-inline-start: calc(2.5rem + var(--space-4));
  }

  .step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    background-color: var(--color-primary);
    color: var(--color-card);
    font-size: var(--font-size-base);
    font-weight: 800;
    border-radius: var(--radius-full);
  }

  .step h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-block-end: var(--space-3);
    color: var(--color-text);
  }

  .step p {
    font-size: var(--font-size-base);
    color: var(--color-muted);
    line-height: 1.6;
  }

  /* Connector line between steps (desktop only) */
  @media (min-width: 720px) {
    .steps::before {
      content: '';
      position: absolute;
      inset-block-start: 1.25rem;
      inset-inline-start: calc(1.25rem + (100% / 3) * 0.15);
      inline-size: calc((100% / 3) * 1.7);
      block-size: 1px;
      background: repeating-linear-gradient(
        to right,
        var(--color-border) 0,
        var(--color-border) 8px,
        transparent 8px,
        transparent 16px
      );
    }
  }


  /* ─── Final CTA ──────────────────────────────────────────── */

  .cta-section {
    padding-block: var(--space-16);
    padding-inline: var(--space-6);
    background:
      radial-gradient(ellipse 80% 100% at 50% 100%,
        color-mix(in srgb, var(--color-secondary) 32%, transparent), transparent 70%),
      radial-gradient(ellipse 60% 80% at 50% 0%,
        color-mix(in srgb, var(--color-primary) 25%, transparent), transparent 70%),
      var(--color-card);
    border-block: 1px solid var(--color-border);
    text-align: center;
  }

  .cta-section__inner {
    max-inline-size: 42rem;
    margin-inline: auto;
  }

  .cta-section h2 {
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-block-end: var(--space-4);
  }

  .cta-section p {
    font-size: var(--font-size-lg);
    color: var(--color-muted);
    margin-block-end: var(--space-8);
    line-height: 1.6;
  }

  .cta-section .btn {
    font-size: var(--font-size-lg);
    padding-inline: var(--space-8);
    min-block-size: 4rem;
    box-shadow: var(--shadow-md),
                0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }


  /* ─── Footer ─────────────────────────────────────────────── */

  .landing-footer {
    padding-block: var(--space-8);
    padding-inline: var(--space-6);
    background-color: #0a1832;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .landing-footer__brand {
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--color-primary);
    text-decoration: none;
  }

  .landing-footer__links {
    display: flex;
    gap: var(--space-6);
    list-style: none;
  }

  .landing-footer__links a {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    text-decoration: none;
  }

  .landing-footer__links a:hover {
    color: var(--color-text);
  }

  .landing-footer__copy {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    inline-size: 100%;
  }

  @media (min-width: 640px) {
    .landing-footer__copy {
      inline-size: auto;
    }
  }
}