/* =========================================================
   Home page — redesigned
   Calm, muted, beige-paper aesthetic. Flat journaling feel.
   ========================================================= */

/* Tokens (--home-*) live in core/theme/remember-theme-core.css */

/* -------- Page shell + paper texture -------- */

.home-page {
  position: relative;
  background: var(--home-paper);
  color: var(--home-ink);
  display: grid;
  gap: 0;
  padding-bottom: 0;
  overflow-x: hidden;
  isolation: isolate;
}

.home-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184, 146, 86, 0.10), transparent 45%),
    radial-gradient(circle at 90% 30%, rgba(148, 165, 140, 0.12), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(201, 150, 122, 0.10), transparent 55%),
    repeating-radial-gradient(circle at 30% 40%, rgba(90, 84, 74, 0.025) 0, rgba(90, 84, 74, 0.025) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(90, 84, 74, 0.02) 0px, rgba(90, 84, 74, 0.02) 1px, transparent 1px, transparent 34px);
}

.home-page__path {
  display: none;
}

/* -------- Top nav override for home -------- */

.app__header--home {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.app__header--home.app__header--scrolled {
  background: rgba(243, 234, 217, 0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: rgba(90, 84, 74, 0.1);
}

.navbar--home {
  max-width: var(--home-max);
  margin-inline: auto;
  padding: var(--op-space-medium) var(--op-space-2x-large);
  display: flex;
  align-items: center;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-small) var(--op-space-large);
  }
}

.home-navbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  height: 3.6rem;
  min-width: 4rem;
}

.home-navbar__logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease;
  transform-origin: left center;

  img { height: 100%; width: auto; display: block; }
}

.home-navbar__logo--word {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.home-navbar__logo--icon {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(-8px) scale(0.7);
  pointer-events: none;

  img { height: 100%; width: auto; }
}

.app__header--scrolled .home-navbar__logo--word {
  opacity: 0;
  transform: translateX(8px) scale(0.9);
  filter: blur(2px);
}

.app__header--scrolled .home-navbar__logo--icon {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.home-navbar__link {
  color: var(--home-ink);
  font-weight: var(--op-font-weight-medium);
  font-size: 1.5rem;
  text-decoration: none;
  margin-right: var(--op-space-medium);

  &:hover { color: var(--home-accent-sage-deep); }

  @media only screen and (max-width: 480px) {
    font-size: 1.4rem;
    margin-right: var(--op-space-small);
  }
}

.home-navbar__cta {
  background: var(--op-color-primary-minus-four) !important;
  color: var(--home-paper) !important;
  border-color: var(--home-ink) !important;
  border-radius: var(--op-radius-medium);

  @media only screen and (max-width: 480px) {
    padding: 0.8rem 1.4rem !important;
    font-size: 1.3rem !important;
  }
}

/* =========================================================
   Hero
   ========================================================= */

.home-hero {
  position: relative;
  padding: calc(var(--op-space-5x-large) * 1.15) var(--op-space-2x-large) calc(var(--op-space-5x-large) * 1.1);
  overflow: hidden;

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-4x-large) var(--op-space-large) var(--op-space-3x-large);
  }

  @media only screen and (max-width: 480px) {
    padding: var(--op-space-3x-large) var(--op-space-medium) var(--op-space-2x-large);
  }
}

.home-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  background:
    radial-gradient(1200px 500px at 80% 20%, rgba(184, 146, 86, 0.18), transparent 60%),
    radial-gradient(900px 400px at 10% 70%, rgba(148, 165, 140, 0.18), transparent 60%);
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--home-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--op-space-5x-large) * 0.85);

  @media only screen and (max-width: 980px) {
    grid-template-columns: 1fr;
    gap: var(--op-space-4x-large);
    text-align: center;
  }
}

.home-hero__eyebrow {
  margin: 0 0 var(--op-space-medium);
  font-size: var(--op-font-small);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--home-ink-faint);
  font-weight: var(--op-font-weight-medium);
}

.home-hero__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(4.4rem, 8vw, 10.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--home-ink);

  &.home-hero__title-padded {
    padding-block: calc(2 * var(--op-space-3x-large));
  }
}

.home-hero__serif {
  font-family: var(--home-serif);
}

.home-hero__italic {
  font-style: italic;
  color: var(--home-accent-sage-deep);
}

.home-hero__message {
  margin: var(--op-space-2x-large) 0 var(--op-space-3x-large);
  max-width: 52ch;
  font-size: 1.9rem;
  line-height: 1.55;
  color: var(--home-ink-soft);

  @media only screen and (max-width: 980px) {
    margin-inline: auto;
  }

  @media only screen and (max-width: 480px) {
    font-size: 1.6rem;
    margin: var(--op-space-large) auto var(--op-space-2x-large);
  }
}

.home-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-large);
  flex-wrap: wrap;

  @media only screen and (max-width: 980px) {
    justify-content: center;
  }
}

.home-hero__cta {
  background: var(--op-color-primary-minus-four) !important;
  color: var(--home-paper-soft) !important;
  border-color: var(--home-ink) !important;
  border-radius: var(--op-radius-medium);
  padding: 1.4rem 2.8rem !important;
  font-size: var(--op-font-medium) !important;
  letter-spacing: 0.01em;
  box-shadow: var(--home-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 32px 60px -24px rgba(43, 42, 38, 0.45);
  }

  @media only screen and (max-width: 480px) {
    padding: 1.2rem 2.2rem !important;
    font-size: 1.5rem !important;
  }
}

.home-hero__ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-small);
  color: var(--home-ink);
  text-decoration: none;
  font-weight: var(--op-font-weight-medium);
  font-size: 1.5rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--home-ink);

  &:hover { color: var(--home-accent-clay-deep); border-color: var(--home-accent-clay-deep); }

  .home-hero__ghost-icon { font-size: var(--op-font-medium); }
}

.home-hero__meta {
  list-style: none;
  margin: var(--op-space-4x-large) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-large);
  color: var(--home-ink-faint);
  font-size: 1.3rem;
  letter-spacing: 0.04em;

  @media only screen and (max-width: 980px) {
    justify-content: center;
  }

  @media only screen and (max-width: 480px) {
    margin-top: var(--op-space-2x-large);
    gap: var(--op-space-small) var(--op-space-medium);
    font-size: 1.2rem;
  }

  li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  .home-hero__meta-icon {
    font-size: var(--op-font-medium);
    color: var(--home-accent-sage-deep);
  }
}

.home-hero__figure {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-hero__figure-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 75%;
  transform: translate(-50%, -50%);
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(54, 32, 18, 0.32) 0%, rgba(54, 32, 18, 0.18) 40%, rgba(54, 32, 18, 0) 75%);
  filter: blur(50px);
  pointer-events: none;
}

.home-hero__macbook {
  position: relative;
  z-index: 1;
  width: min(100%, 78rem);
  margin-inline: auto;
}

.home-hero__macbook-screen {
  position: relative;
  background: linear-gradient(180deg, #3a3c40 0%, #2a2c2f 50%, #1f2123 100%);
  border-radius: 1.4rem 1.4rem 0.2rem 0.2rem;
  padding: 0.55rem 0.55rem 0.55rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 60px -25px rgba(10, 10, 12, 0.6),
    0 60px 120px -40px rgba(10, 10, 12, 0.5);
}

.home-hero__macbook-bezel {
  position: relative;
  background: #000;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
}

.home-hero__macbook-camera {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  max-width: 14rem;
  height: 0.85rem;
  background: #000;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 2;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #0a0a0c;
    box-shadow: 0 0 0 1px rgba(80, 80, 85, 0.5);
  }
}

.home-hero__macbook-base {
  position: relative;
  height: 1.4rem;
  margin-inline: -1.6rem;
  background: linear-gradient(180deg, #4a4c50 0%, #3a3c3f 55%, #2c2e30 100%);
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 18px 30px -18px rgba(10, 10, 12, 0.55);

  @media only screen and (max-width: 768px) {
    margin-inline: -1rem;
  }
}

.home-hero__macbook-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 0.35rem;
  background: linear-gradient(180deg, #2a2c2f 0%, #1f2123 100%);
  border-radius: 0 0 0.3rem 0.3rem;
}

.home-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* =========================================================
   Pitch
   ========================================================= */

.home-pitch {
  position: relative;
  padding: calc(var(--op-space-5x-large) * 1.2) var(--op-space-2x-large);
  background: var(--home-paper-soft);
  border-top: 1px solid var(--home-paper-line);
  border-bottom: 1px solid var(--home-paper-line);
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      135deg,
      rgba(54, 45, 30, 0.06) 0,
      rgba(54, 45, 30, 0.06) 1px,
      transparent 1px,
      transparent 14px
    );
    z-index: 0;
  }

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
  }
}

.home-pitch__inner > * { position: relative; z-index: 1; }

.home-pitch__figure { order: -1; }
.home-pitch__copy { order: 0; }

@media only screen and (max-width: 980px) {
  .home-pitch__figure { order: 1; }
  .home-pitch__copy { order: 0; }
}

.home-pitch__inner {
  max-width: var(--home-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--op-space-5x-large) * 0.9);
  align-items: center;

  @media only screen and (max-width: 980px) {
    grid-template-columns: 1fr;
    gap: var(--op-space-2x-large);
  }
}

.home-pitch__copy { display: grid; gap: var(--op-space-x-large); }

.home-pitch__eyebrow {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--home-ink-faint);
}

.home-pitch__headline {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(3.2rem, 5.2vw, 6.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--home-ink);
}

.home-pitch__italic {
  font-style: italic;
  color: var(--home-accent-clay-deep);
}

.home-pitch__body {
  margin: 0;
  font-size: var(--op-font-large);
  line-height: 1.65;
  color: var(--home-ink-soft);
  max-width: 50ch;

  @media only screen and (max-width: 480px) {
    font-size: var(--op-font-medium);
  }
}

.home-pitch__figure {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
}

.home-pitch__image {
  width: min(100%, 56rem);
  height: auto;
  border-radius: var(--op-radius-large);
  outline: 2px solid var(--home-paper-line);
  outline-offset: 8px;
  box-shadow: var(--home-shadow-soft);
  transform-style: preserve-3d;
}

.tilt-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(20, 14, 8, 0);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity 280ms ease, background 280ms ease, backdrop-filter 280ms ease;
  cursor: zoom-out;
}

.tilt-zoom-overlay--open {
  opacity: 1;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(8px);
}

.tilt-zoom-overlay__image {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  outline: none !important;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}

.tilt-zoom-overlay--open .tilt-zoom-overlay__image {
  transform: scale(1);
  opacity: 1;
}

.home-pitch__tab {
  position: absolute;
  top: -1.2rem;
  right: 8%;
  background: var(--home-accent-clay);
  color: var(--home-paper-soft);
  font-family: var(--home-serif);
  font-style: italic;
  font-size: var(--op-font-medium);
  padding: 0.6rem 1.8rem;
  border-radius: var(--op-radius-small) var(--op-radius-small) 0 0;
  box-shadow: 0 6px 14px -6px rgba(54, 45, 30, 0.3);
  transform: rotate(-2deg);
}

/* =========================================================
   Differentiators
   ========================================================= */

.home-differentiators {
  padding: calc(var(--op-space-5x-large) * 1.15) var(--op-space-2x-large);
  background: var(--home-paper-deep);
  border-top: 1px solid var(--home-paper-line);
  border-bottom: 1px solid var(--home-paper-line);

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
  }
}

.home-differentiators__inner {
  max-width: var(--home-max);
  margin-inline: auto;
  display: grid;
  gap: calc(var(--op-space-5x-large) * 0.85);

  @media only screen and (max-width: 768px) {
    gap: var(--op-space-2x-large);
  }
}

.home-differentiators__header {
  display: grid;
  gap: var(--op-space-medium);
}

.home-differentiators__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(3rem, 5vw, 5rem);
  letter-spacing: -0.02em;
  color: var(--home-ink);
  width: fit-content;
  max-width: 100%;
}

.home-differentiators__intro {
  margin: 0;
  font-size: var(--op-font-large);
  line-height: var(--op-line-height-looser);
  color: var(--home-ink-soft);
  max-width: 60ch;
}

.home-differentiators__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--op-space-2x-large);

  @media only screen and (max-width: 980px) {
    grid-template-columns: 1fr;
    gap: var(--op-space-x-large);
  }
}

.diff-card {
  background: var(--home-paper-soft);
  border-radius: var(--op-radius-small);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: var(--home-shadow-card);
  border-top: 4px solid transparent;
}

.diff-card--clay { border-top-color: var(--home-accent-clay); }
.diff-card--sage { border-top-color: var(--home-accent-sage-deep); }
.diff-card--gold { border-top-color: var(--home-accent-gold); }

.diff-card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--home-paper-line) 0,
      var(--home-paper-line) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--home-paper-deep);
}

.diff-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.diff-card__content {
  padding: var(--op-space-large);
  display: grid;
  gap: var(--op-space-small);
  align-content: start;
}

.diff-card__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-semi-bold);
  font-size: 2.6rem;
  line-height: var(--op-line-height-denser);
  color: var(--home-ink);
}

.diff-card__body {
  margin: 0;
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-looser);
  color: var(--home-ink-soft);
}

/* =========================================================
   Feature grid
   ========================================================= */

.home-features {
  padding: var(--op-space-5x-large) var(--op-space-2x-large);

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
  }
}

.home-features__header {
  max-width: var(--home-max);
  margin: 0 auto var(--op-space-3x-large);
  text-align: center;
  display: grid;
  gap: var(--op-space-medium);
  justify-items: center;
}

.home-features__eyebrow {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--home-ink-faint);
}

.home-features__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(3rem, 5vw, 6rem);
  line-height: 1.05;
  color: var(--home-ink);
}

.home-features__italic {
  font-style: italic;
  color: var(--home-accent-sage-deep);
}

.home-features__grid {
  max-width: var(--home-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--op-space-large);

  /* Center the trailing 2 orphans in the 4-column layout (10 items → 4/4/2). */
  @media only screen and (min-width: 981px) {
    .feature-tile:nth-child(9)  { grid-column: 2; }
    .feature-tile:nth-child(10) { grid-column: 3; }
  }

  @media only screen and (max-width: 980px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media only screen and (max-width: 520px) {
    grid-template-columns: 1fr;
  }
}

.feature-tile {
  position: relative;
  background: var(--home-paper-soft);
  border: 1px solid var(--home-paper-line);
  border-radius: 6px;
  padding: var(--op-space-2x-large);
  display: grid;
  gap: var(--op-space-small);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

  &:hover {
    transform: translateY(-2px);
    background: var(--home-paper);
    box-shadow: var(--home-shadow-soft);
  }

  .feature-tile__icon {
    width: 4.4rem;
    height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--op-radius-circle);
    background: var(--home-paper-deep);
    color: var(--home-accent-ink);
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: var(--op-space-small);

    .icon {
      color: var(--home-accent-sage-deep);
      font-size: 2.2rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  .feature-tile__title {
    margin: 0;
    font-family: var(--home-serif);
    font-weight: var(--op-font-weight-semi-bold);
    font-size: var(--op-font-2x-large);
    line-height: var(--op-line-height-denser);
    color: var(--home-ink);
  }

  .feature-tile__body {
    margin: 0;
    font-size: var(--op-font-small);
    line-height: 1.55;
    color: var(--home-ink-soft);
  }
}

/* =========================================================
   Spotlight feature cards (overflowing, shadowed, flat)
   ========================================================= */

.home-spotlight {
  padding: var(--op-space-5x-large) var(--op-space-2x-large);
  display: grid;
  gap: var(--op-space-3x-large);
  max-width: var(--home-max);
  margin-inline: auto;
  width: 100%;

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
    gap: var(--op-space-2x-large);
  }
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--op-space-3x-large);
  align-items: center;
  padding: var(--op-space-4x-large);
  border-radius: var(--op-radius-large);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--home-shadow-card);
  border: 1px solid rgba(90, 84, 74, 0.08);

  @media only screen and (max-width: 980px) {
    grid-template-columns: 1fr;
    padding: var(--op-space-2x-large);
    gap: var(--op-space-2x-large);
  }

  &.feature-card--reverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

    .feature-card__content { order: 2; }
    .feature-card__media { order: 1; }

    @media only screen and (max-width: 980px) {
      grid-template-columns: 1fr;
      .feature-card__content, .feature-card__media { order: initial; }
    }
  }

  /* --- Card 1: lined parchment (Daily ritual) --- */
  &.feature-card--ink {
    background-color: #f4ead4;
    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3.1rem,
        rgba(90, 84, 74, 0.11) 3.1rem,
        rgba(90, 84, 74, 0.11) calc(3.1rem + 1px)
      ),
      radial-gradient(120% 80% at 0% 0%, rgba(184, 146, 86, 0.18), transparent 60%);
    color: var(--home-ink);
    border: 1px solid rgba(90, 84, 74, 0.16);
  }

  &.feature-card--ink::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 5.2rem;
    width: 1px;
    background: rgba(201, 94, 90, 0.32);
    pointer-events: none;

    @media only screen and (max-width: 980px) { left: 2.2rem; }
  }

  &.feature-card--ink::after {
    content: '';
    position: absolute;
    top: 2.4rem;
    left: 2.2rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: var(--op-radius-circle);
    background: radial-gradient(circle at 30% 30%, #6b5a4a, #2b2a26);
    box-shadow:
      0 3.6rem 0 rgba(43, 42, 38, 0.9),
      0 7.2rem 0 rgba(43, 42, 38, 0.88),
      0 10.8rem 0 rgba(43, 42, 38, 0.86),
      0 14.4rem 0 rgba(43, 42, 38, 0.84);

    @media only screen and (max-width: 980px) { display: none; }
  }

  /* --- Card 2: soft terracotta with drifting sparks (Year shape) --- */
  &.feature-card--clay {
    background:
      radial-gradient(60% 80% at 100% 0%, rgba(255, 241, 219, 0.5), transparent 60%),
      radial-gradient(60% 80% at 0% 100%, rgba(123, 60, 45, 0.25), transparent 60%),
      linear-gradient(155deg, #d8a789 0%, #b87a5d 50%, #935742 100%);
    color: #2b1911;
    border: 1px solid rgba(147, 87, 66, 0.4);
  }

  &.feature-card--clay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 20% 80%, rgba(255, 245, 224, 0.9) 1px, transparent 2px),
      radial-gradient(circle at 35% 60%, rgba(255, 245, 224, 0.7) 1px, transparent 2px),
      radial-gradient(circle at 55% 85%, rgba(255, 245, 224, 0.85) 1.5px, transparent 3px),
      radial-gradient(circle at 72% 40%, rgba(255, 245, 224, 0.6) 1px, transparent 2px),
      radial-gradient(circle at 88% 70%, rgba(255, 245, 224, 0.9) 1.5px, transparent 3px),
      radial-gradient(circle at 15% 30%, rgba(255, 245, 224, 0.55) 1px, transparent 2px),
      radial-gradient(circle at 45% 15%, rgba(255, 245, 224, 0.65) 1.5px, transparent 3px);
    background-size: 100% 220%;
    animation: feature-sparks 18s linear infinite;
  }

  &.feature-card--clay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.35;
  }

  /* --- Card 3: sage with flowing waves (Month review) --- */
  &.feature-card--sage {
    background:
      radial-gradient(70% 100% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
      linear-gradient(160deg, #aebfa5 0%, #879d80 55%, #65785f 100%);
    color: #101710;
    border: 1px solid rgba(101, 120, 95, 0.45);
  }

  &.feature-card--sage::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 55%;
    pointer-events: none;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='0.10' d='M0,192L48,181.3C96,171,192,149,288,160C384,171,480,213,576,218.7C672,224,768,192,864,165.3C960,139,1056,117,1152,122.7C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%23101710' fill-opacity='0.08' d='M0,256L48,245.3C96,235,192,213,288,224C384,235,480,277,576,282.7C672,288,768,256,864,229.3C960,203,1056,181,1152,186.7C1248,192,1344,224,1392,240L1440,256L1440,320L0,320Z'/></svg>");
    background-repeat: repeat-x;
    background-size: 200% 100%, 200% 100%;
    background-position: 0 0, 0 0;
    animation: feature-waves 22s linear infinite;
  }

  &.feature-card--sage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(16, 23, 16, 0.14) 1px, transparent 0);
    background-size: 4px 4px;
    opacity: 0.3;
    mix-blend-mode: multiply;
  }

  /* --- Card 4: dusk with scan shimmer + grid (Encryption) --- */
  &.feature-card--dusk {
    background:
      radial-gradient(100% 60% at 50% 0%, rgba(180, 160, 230, 0.14), transparent 60%),
      linear-gradient(180deg, #353a4a 0%, #242838 55%, #191c26 100%);
    color: #ece8de;
    border: 1px solid rgba(236, 232, 222, 0.12);
  }

  &.feature-card--dusk::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(236, 232, 222, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(236, 232, 222, 0.05) 1px, transparent 1px);
    background-size: 2.4rem 2.4rem;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 30%, transparent 85%);
  }

  &.feature-card--dusk::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 60%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(184, 200, 240, 0.06) 48%,
      rgba(184, 200, 240, 0.18) 50%,
      rgba(184, 200, 240, 0.06) 52%,
      transparent 62%,
      transparent 100%
    );
    animation: feature-scan 7.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  }
}

@keyframes feature-sparks {
  0% { background-position: 0 100%; }
  100% { background-position: 0 -120%; }
}

@keyframes feature-waves {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: -200% 0, 200% 0; }
}

@keyframes feature-scan {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(260%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card--clay::before,
  .feature-card--sage::before,
  .feature-card--dusk::after {
    animation: none;
  }
}

.feature-card__content {
  position: relative;
  display: grid;
  gap: var(--op-space-medium);
  z-index: 2;
}

.feature-card--ink .feature-card__content {
  padding-left: 3.2rem;

  @media only screen and (max-width: 980px) { padding-left: 0; }
}

.feature-card__eyebrow {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
}

.feature-card__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(3rem, 3.5vw, 4.6rem);
  line-height: 1.08;
}

.feature-card__body {
  margin: 0;
  font-size: 1.7rem;
  line-height: var(--op-line-height-loose);
  max-width: 48ch;
  opacity: 0.88;
}

.feature-card__media {
  position: relative;
  margin: 0;
  min-height: 32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.feature-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px dashed color-mix(in oklab, currentColor 35%, transparent);
  border-radius: var(--op-radius-medium);
  background: color-mix(in oklab, currentColor 6%, transparent);
  color: inherit;
  opacity: 0.75;

  .feature-card__placeholder-icon { font-size: var(--op-font-4x-large); opacity: 0.7; }
  .feature-card__placeholder-label {
    font-family: var(--home-serif);
    font-style: italic;
    font-size: var(--op-font-small);
    letter-spacing: 0.06em;
  }
}

.feature-card__image {
  position: relative;
  width: min(100%, 50rem);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 32px 56px -28px rgba(0, 0, 0, 0.6);
  transform: translateY(1.6rem);

  @media only screen and (max-width: 980px) {
    transform: none;
  }
}

/* =========================================================
   iOS section
   ========================================================= */

.home-ios {
  position: relative;
  padding: var(--op-space-5x-large) var(--op-space-2x-large);
  background:
    linear-gradient(180deg, var(--home-paper-deep) 0%, var(--home-paper) 100%);
  border-top: 1px solid var(--home-paper-line);
  border-bottom: 1px solid var(--home-paper-line);
  overflow: hidden;

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
  }
}

.home-ios__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(600px 400px at 90% 20%, rgba(148, 165, 140, 0.22), transparent 65%),
    radial-gradient(500px 360px at 10% 90%, rgba(201, 150, 122, 0.22), transparent 65%);
}

.home-ios__inner {
  position: relative;
  z-index: 1;
  max-width: var(--home-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--op-space-3x-large);
  align-items: center;

  @media only screen and (max-width: 980px) {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.home-ios__eyebrow {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--home-accent-clay-deep);
}

.home-ios__title {
  margin: var(--op-space-medium) 0 var(--op-space-large);
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(3.2rem, 5.5vw, 7.2rem);
  line-height: 1.02;
  color: var(--home-ink);
}

.home-ios__italic {
  font-style: italic;
  color: var(--home-accent-clay-deep);
}

.home-ios__body {
  margin: 0 0 var(--op-space-2x-large);
  font-size: 1.7rem;
  line-height: var(--op-line-height-loose);
  color: var(--home-ink-soft);
  max-width: 54ch;

  @media only screen and (max-width: 980px) { margin-inline: auto; }
}

.home-ios__actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-large);
  padding: var(--op-space-x-small);
  flex-wrap: wrap;

  @media only screen and (max-width: 980px) { justify-content: center; }
}

.home-ios__store {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--home-ink);
  color: var(--home-paper-soft);
  padding: 1.2rem 2rem;
  border-radius: var(--op-radius-pill);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--home-shadow-soft);

  &:hover { transform: translateY(-2px); box-shadow: 0 32px 60px -24px rgba(43, 42, 38, 0.5); }

  @media only screen and (max-width: 480px) {
    padding: 1rem 1.6rem;
    gap: 0.8rem;
  }

  .home-ios__store-icon { font-size: var(--op-font-4x-large); }

  .home-ios__store-text {
    display: flex;
    align-items: center;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
  }

  .home-ios__store-small {
    font-size: 1.1rem;
    opacity: 0.75;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .home-ios__store-large {
    font-family: var(--home-serif);
    font-size: var(--op-font-x-large);
  }
}

.home-ios__store--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.home-ios__note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--home-ink-faint);
  font-style: italic;
  font-family: var(--home-serif);
  font-size: 1.5rem;

  .home-ios__note-icon { color: var(--home-accent-gold); }
}

.home-ios__figure {
  margin: 0;
  display: flex;
  justify-content: center;
  perspective: 1200px;
}

.home-ios__phone {
  position: relative;
  width: min(28rem, 78vw);
  aspect-ratio: 9 / 19;
  border-radius: 4rem;
  background: linear-gradient(160deg, #1a1915 0%, #2b2926 100%);
  padding: 1rem;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 60px 100px -40px rgba(0, 0, 0, 0.55),
    0 20px 40px -20px rgba(0, 0, 0, 0.35);
  transform: rotateY(-8deg) rotateX(4deg);
}

.home-ios__phone::before {
  content: '';
  position: absolute;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 8rem;
  height: 1.4rem;
  background: #0a0908;
  border-radius: var(--op-radius-pill);
  z-index: 2;
}

.home-ios__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3.2rem;
  overflow: hidden;
  background: var(--op-color-neutral-plus-six);
  padding-top: 1.6rem;
  box-sizing: border-box;
}

.home-ios__phone-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* =========================================================
   Testimonials carousel
   ========================================================= */

.home-testimonials {
  padding: var(--op-space-5x-large) var(--op-space-2x-large);

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
  }
}

.home-testimonials__header {
  max-width: var(--home-max);
  margin: 0 auto var(--op-space-3x-large);
  text-align: center;
  display: grid;
  gap: var(--op-space-medium);
  justify-items: center;
}

.home-testimonials__eyebrow {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--home-ink-faint);
}

.home-testimonials__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(2.8rem, 4.5vw, 5.8rem);
  line-height: 1.05;
  color: var(--home-ink);
}

.home-testimonials__italic {
  font-style: italic;
  color: var(--home-accent-clay-deep);
}

.home-testimonials__viewport {
  max-width: 72rem;
  margin-inline: auto;
  overflow: hidden;
}

.home-testimonials__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-testimonials__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: var(--op-space-medium);

  @media only screen and (max-width: 520px) {
    padding: var(--op-space-x-small);
  }
}

.testimonial-card {
  position: relative;
  display: grid;
  gap: var(--op-space-large);
  padding: var(--op-space-3x-large);
  border-radius: var(--op-radius-medium);
  background: var(--home-paper-soft);
  border: 1px solid var(--home-paper-line);
  box-shadow: var(--home-shadow-soft);
  text-align: left;

  @media only screen and (max-width: 520px) {
    padding: var(--op-space-x-large) var(--op-space-large);
    gap: var(--op-space-medium);
  }

  .testimonial-card__quote-mark {
    position: absolute;
    top: 1.4rem;
    left: 2rem;
    font-family: var(--home-serif);
    font-size: 8rem;
    line-height: var(--op-line-height-densest);
    color: var(--home-accent-clay);
    opacity: 0.35;
  }

  .testimonial-card__quote {
    margin: 0;
    font-family: var(--home-serif);
    font-style: italic;
    font-size: clamp(2.2rem, 2.6vw, 3rem);
    line-height: 1.35;
    color: var(--home-ink);
    padding-top: var(--op-space-large);
  }

  .testimonial-card__footer {
    display: flex;
    align-items: center;
    gap: var(--op-space-medium);
    padding-top: var(--op-space-medium);
    border-top: 1px solid var(--home-paper-line);
  }

  .testimonial-card__avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: var(--op-radius-circle);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--home-accent-sage) 0%, var(--home-accent-clay) 100%);
    color: var(--home-paper-soft);
    font-family: var(--home-serif);
    font-weight: var(--op-font-weight-semi-bold);
    font-size: var(--op-font-large);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px -2px rgba(54, 45, 30, 0.3);
    overflow: hidden;
  }

  .testimonial-card__avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--op-radius-circle);
  }

  .testimonial-card__identity { display: grid; gap: 2px; }

  .testimonial-card__name {
    margin: 0;
    font-weight: var(--op-font-weight-semi-bold);
    font-size: 1.5rem;
    color: var(--home-ink);
  }

  .testimonial-card__role {
    margin: 0;
    font-size: 1.3rem;
    color: var(--home-ink-faint);
  }
}

.home-testimonials__controls {
  max-width: 72rem;
  margin: var(--op-space-2x-large) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-large);
}

.home-testimonials__arrow {
  background: transparent;
  border: 1px solid var(--home-paper-line);
  border-radius: var(--op-radius-circle);
  width: 4.4rem;
  height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--home-ink);
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover { background: var(--home-paper-soft); border-color: var(--home-ink-faint); }

  .icon { font-size: var(--op-font-large); }
}

.home-testimonials__dots {
  display: flex;
  gap: 0.8rem;
}

.home-testimonials__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--op-radius-circle);
  border: none;
  background: var(--home-paper-line);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;

  &:hover { background: var(--home-ink-faint); }

  &.home-testimonials__dot--active {
    background: var(--home-ink);
    width: 2.4rem;
    border-radius: var(--op-radius-pill);
  }
}

/* =========================================================
   Closing CTA
   ========================================================= */

.home-close {
  padding: var(--op-space-5x-large) var(--op-space-2x-large);
  background: var(--home-ink);
  color: var(--home-paper-soft);
  position: relative;
  overflow: hidden;

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-3x-large) var(--op-space-large);
  }
}

.home-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 260px at 20% 20%, rgba(201, 150, 122, 0.14), transparent 60%),
    radial-gradient(500px 260px at 80% 80%, rgba(148, 165, 140, 0.14), transparent 60%);
  pointer-events: none;
}

.home-close__inner {
  position: relative;
  max-width: 80rem;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--op-space-large);
  justify-items: center;
}

.home-close__eyebrow {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.6);
}

.home-close__title {
  margin: 0;
  font-family: var(--home-serif);
  font-weight: var(--op-font-weight-medium);
  font-size: clamp(3.2rem, 6vw, 8rem);
  line-height: 1.02;
  color: var(--home-paper-soft);
}

.home-close__italic {
  font-style: italic;
  color: var(--home-accent-clay);
}

.home-close__cta {
  background: var(--home-paper-soft) !important;
  color: var(--home-ink) !important;
  border-color: var(--home-paper-soft) !important;
  border-radius: var(--op-radius-medium) !important;
  padding: 1.4rem 3rem !important;
  font-size: 1.7rem !important;
  margin-top: var(--op-space-medium);
  transition: transform 0.2s ease;

  &:hover { transform: translateY(-2px); }
}

.home-close__fine {
  margin: 0;
  font-family: var(--home-serif);
  font-style: italic;
  font-size: var(--op-font-small);
  color: rgba(243, 234, 217, 0.6);
}

/* =========================================================
   Footer
   ========================================================= */

.home-footer {
  padding: var(--op-space-3x-large) var(--op-space-2x-large) var(--op-space-2x-large);
  background: #1a1916;
  color: #c2bba9;

  @media only screen and (max-width: 768px) {
    padding: var(--op-space-2x-large) var(--op-space-large);
  }
}

.home-footer__inner {
  max-width: var(--home-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: var(--op-space-2x-large);
  align-items: center;
  padding-bottom: var(--op-space-2x-large);
  border-bottom: 1px solid rgba(194, 187, 169, 0.15);

  @media only screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}

.home-footer__brand {
  display: grid;
  gap: var(--op-space-small);

  .home-footer__logo {
    max-width: 14rem;
    filter: brightness(0) invert(1) opacity(0.85);
  }

  .home-footer__tag {
    margin: 0;
    font-family: var(--home-serif);
    font-style: italic;
    font-size: 1.5rem;
    color: rgba(194, 187, 169, 0.7);
  }
}

.home-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-large);
  justify-content: center;
}

.home-footer__link {
  color: #c2bba9;
  text-decoration: none;
  font-size: var(--op-font-small);
  transition: color 0.2s ease;

  &:hover { color: var(--home-paper-soft); }
}

.home-footer__social {
  display: flex;
  gap: var(--op-space-medium);

  .home-footer__social-link {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--op-radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c2bba9;
    border: 1px solid rgba(194, 187, 169, 0.2);
    transition: all 0.2s ease;
    text-decoration: none;

    &:hover { color: var(--home-paper-soft); border-color: rgba(194, 187, 169, 0.5); }

    .icon { font-size: var(--op-font-medium); }
  }
}

.home-footer__bottom {
  max-width: var(--home-max);
  margin: var(--op-space-large) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--op-space-medium);

  @media only screen and (max-width: 768px) {
    justify-content: center;
  }
}

.home-footer__copyright {
  margin: 0;
  font-family: var(--home-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(194, 187, 169, 0.55);
}

/* -------- Category5 flicker -------- */

.home-footer__cat5 {
  color: rgba(194, 187, 169, 0.55);
  font-family: var(--home-serif);
  font-style: italic;
  font-size: var(--op-font-small);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.2s ease;

  &:hover { color: rgba(194, 187, 169, 0.85); }
}

.home-footer__cat5-mark {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 77, 0, 0.35);
  box-shadow:
    0 0 6px rgba(255, 77, 0, 0.25),
    inset 0 0 6px rgba(255, 77, 0, 0.12);
  font-family: 'Archivo Black', Impact, sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.3rem;
}

.home-footer__cat5-flicker {
  color: #ffb07a;
  text-shadow:
    0 0 4px rgba(255, 140, 70, 0.9),
    0 0 10px rgba(255, 94, 22, 0.7),
    0 0 18px rgba(255, 77, 0, 0.45);
  animation: cat5-flicker 3.6s infinite steps(1, end);
}

@keyframes cat5-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(255, 140, 70, 0.9),
      0 0 10px rgba(255, 94, 22, 0.7),
      0 0 18px rgba(255, 77, 0, 0.45);
  }
  20%, 24%, 55% {
    opacity: 0.35;
    text-shadow: none;
  }
  70% {
    opacity: 0.85;
    text-shadow:
      0 0 2px rgba(255, 140, 70, 0.6),
      0 0 6px rgba(255, 94, 22, 0.4);
  }
  72% {
    opacity: 0.2;
    text-shadow: none;
  }
  74% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(255, 140, 70, 0.9),
      0 0 10px rgba(255, 94, 22, 0.7),
      0 0 18px rgba(255, 77, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-footer__cat5-flicker { animation: none; }
  .home-testimonials__track { transition: none; }
}