/* =====================================================
   MiniMax-M3 — editorial glassmorphism
   Type: Instrument Serif (display) + Inter (UI) + JetBrains Mono (mono)
   ===================================================== */

:root {
  /* Brand palette — derived from user design */
  --c-rose-500:  #FF4B6D;
  --c-rose-400:  #FF6E89;
  --c-rose-300:  #FF8E99;
  --c-rose-200:  #FFB7C5;
  --c-rose-100:  #FFD8CC;
  --c-rose-50:   #FFF0EE;
  --c-rose-glass: rgba(255, 255, 255, 0.55);

  --c-ink:       #0C0B11;
  --c-ink-soft:  #1E1E22;
  --c-text:      #1A1A1F;
  --c-text-2:    #4F4F58;
  --c-text-3:    #8E8E93;
  --c-line:      #E5E5EA;
  --c-line-soft: #EFEAE6;

  --c-bg:        #FFF9F7;        /* warm cream base */
  --c-bg-2:      #FFFFFF;
  --c-bg-3:      #F7F2EE;        /* greige */
  --c-bg-deep:   #0C0B11;

  /* Glass tokens */
  --glass-bg:        rgba(255, 255, 255, 0.45);
  --glass-bg-strong: rgba(255, 255, 255, 0.65);
  --glass-bg-dark:   rgba(12, 11, 17, 0.45);
  --glass-border:    rgba(255, 255, 255, 0.55);
  --glass-border-d:  rgba(12, 11, 17, 0.08);
  --glass-blur:      22px;
  --glass-shadow:    0 18px 50px -20px rgba(12, 11, 17, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --glass-shadow-h:  0 30px 70px -22px rgba(255, 75, 109, 0.25), 0 1px 0 rgba(255, 255, 255, 0.6) inset;

  /* Type */
  --f-display: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Layout */
  --pad:    clamp(20px, 4vw, 64px);
  --gap:    clamp(12px, 1.4vw, 24px);
  --max-w:  1640px;
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 26px;
  --radius-xl: 32px;

  /* Editorial rhythm */
  --col: 1.618;  /* golden ratio for type scale cues */

  /* Easing — calmer, more "natural" */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =====================================================
   Reset & base
   ===================================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "ss01", "ss02", "cv11";
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
::selection { background: var(--c-rose-500); color: #fff; }

/* =====================================================
   Typography — editorial
   ===================================================== */
.title {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
  color: var(--c-ink);
  font-style: normal;
}
.title em, .title i { font-style: italic; color: var(--c-rose-500); }
.title--xxl { font-size: clamp(56px, 7.6vw, 132px); letter-spacing: -0.04em; line-height: 0.92; }
.title--xl  { font-size: clamp(56px, 8vw, 128px); letter-spacing: -0.03em; line-height: 0.95; }
.title--l   { font-size: clamp(40px, 5.6vw, 96px); letter-spacing: -0.025em; line-height: 0.98; }
.title--m   { font-size: clamp(30px, 3.4vw, 56px); letter-spacing: -0.02em; line-height: 1.05; }
.title--s   { font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.015em; line-height: 1.1; }
.title--xs  { font-size: clamp(16px, 1.2vw, 20px); letter-spacing: -0.01em; line-height: 1.3; font-family: var(--f-body); font-weight: 500; }
.w--400 { font-weight: 400; }
.w--500 { font-weight: 500; }
.w--600 { font-weight: 600; }
.w--700 { font-weight: 700; }

.text--xl { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.45; color: var(--c-text-2); font-weight: 400; }
.text--l  { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: var(--c-text-2); font-weight: 400; }
.text--m  { font-size: 14px; line-height: 1.5; }
.text--s  { font-size: 12px; line-height: 1.4; color: var(--c-text-3); font-weight: 500; }

.muted    { color: var(--c-text-3); }
.pretitle {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-text-3);
  font-weight: 500;
}
.pretitle em { color: var(--c-rose-500); font-style: normal; font-weight: 600; }

.pb--large   { padding-bottom: clamp(24px, 4vw, 56px); }
.pb--margin  { padding-bottom: clamp(20px, 2.4vw, 36px); }
.pt--xlarge  { padding-top: clamp(16px, 1.4vw, 22px); }
.pt--xxlarge { padding-top: clamp(20px, 2vw, 32px); }
.flex        { display: flex; }
.flex--column{ flex-direction: column; }
.tt--ab      { position: absolute; inset: 0; pointer-events: none; }

.line__container { display: block; }

/* =====================================================
   Layout
   ===================================================== */
.wrp {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
}
.grid__layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.grid__column--half           { grid-column: span 6; }
.grid__column--third          { grid-column: span 4; }
.grid__column--fourth         { grid-column: span 3; }
.grid__column--three-fourths  { grid-column: span 9; }
.no-padding--right { padding-right: 0 !important; }
.no-padding--left  { padding-left: 0 !important; }
@media (max-width: 900px) {
  .grid__column--half, .grid__column--third, .grid__column--fourth, .grid__column--three-fourths {
    grid-column: span 12;
  }
}

/* =====================================================
   Glassmorphism utility
   ===================================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-l);
}
.glass--strong { background: var(--glass-bg-strong); }
.glass--dark {
  background: var(--glass-bg-dark);
  color: #fff;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,0.4);
}

/* =====================================================
   Button
   ===================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  cursor: pointer;
}
.button--black {
  background: var(--c-ink);
  color: #fff;
}
.button--ghost {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-ink);
  border-color: var(--glass-border);
}
.button--ghost:hover { background: rgba(255,255,255,0.85); }
.button--black:hover { background: var(--c-rose-500); }
.button--full { width: 100%; }
.button:hover  { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button__text { position: relative; display: inline-block; line-height: 1; }
.button__text--sp { display: inline-block; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.button__text--sp--2 { position: absolute; inset: 0; transform: translateY(140%); opacity: 0; }
.button:hover .button__text--sp--1 { transform: translateY(-140%); opacity: 0; }
.button:hover .button__text--sp--2 { transform: translateY(0); opacity: 1; }
.button__icon { display: inline-flex; align-items: center; justify-content: center; }
.button__arrow { width: 14px; height: 14px; fill: currentColor; }

/* =====================================================
   Header
   ===================================================== */
.page__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 0;
  transition: padding .35s var(--ease), background .4s var(--ease), backdrop-filter .4s;
}
.page__header__inner { padding: 14px 0; }
.page__header.is-scrolled {
  padding: 12px 0;
  background: rgba(255, 249, 247, 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(229, 229, 234, 0.4);
}
.page__header__inner { display: flex; justify-content: space-between; align-items: center; }
.header__logo__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  transition: color .3s var(--ease);
}
.header__logo__symbol { display: inline-flex; width: 22px; height: 18px; color: var(--c-rose-500); }
.header__logo__symbol svg { width: 100%; height: 100%; }
.header__logo__img { display: block; height: 28px; width: auto; }
.header__nav { display: flex; align-items: center; gap: 8px; }

.menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-ink);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .3s var(--ease), color .3s;
}
.menu__trigger:hover { background: rgba(255,255,255,0.9); }
.menu__icon { position: relative; width: 14px; height: 10px; }
.menu__icon--line {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.menu__icon--line:first-child { top: 2px; }
.menu__icon--line:last-child  { bottom: 2px; }
.menu__trigger.is-open .menu__icon--line:first-child { transform: translateY(3px) rotate(45deg); }
.menu__trigger.is-open .menu__icon--line:last-child  { transform: translateY(-3px) rotate(-45deg); }

.header__nav__item--contact .button--black {
  background: var(--c-ink);
  color: #fff;
}
.header__nav__item--contact .button--black:hover { background: var(--c-rose-500); }

/* =====================================================
   Page menu — fullscreen
   ===================================================== */
.page__menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.page__menu.is-open { opacity: 1; pointer-events: auto; }
.menu__back {
  position: absolute; inset: 0;
  background: rgba(255, 230, 224, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.menu__container {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: 24px var(--pad) 40px;
}
.menu__header { display: flex; justify-content: space-between; align-items: center; }
.menu__logo__link { font-family: var(--f-display); font-size: 24px; color: var(--c-ink); font-weight: 400; letter-spacing: -0.01em; }
.menu__logo__img { display: block; height: 32px; width: auto; }
.menu__close {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border-d);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  cursor: pointer; color: var(--c-ink);
  transition: background .3s var(--ease);
}
.menu__close:hover { background: rgba(255,255,255,0.9); }
.menu__close svg { width: 14px; height: 14px; fill: currentColor; }
.menu__main { flex: 1; display: flex; align-items: center; padding: 20px 0; }
.menu__main__inner { width: 100%; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.menu__primary .main__menu { display: flex; flex-direction: column; gap: 4px; }
.main__menu__item {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: -0.025em;
}
.main__menu__item a, .main__menu__item .menu__item__submenu {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
}
.main__menu__item .mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.main__menu__item .mask span {
  display: inline-block;
  transition: transform .55s var(--ease-out), color .4s var(--ease);
  font-style: italic;
  color: var(--c-ink);
}
.main__menu__item:hover .mask span { transform: translateY(-100%); color: var(--c-rose-500); }
.has__submenu ul { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); padding-left: 32px; }
.has__submenu.is-open ul { max-height: 500px; }
.main__menu__subitem {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-text-2);
  padding: 4px 0;
  font-style: italic;
}
.main__menu__subitem:hover { color: var(--c-rose-500); }
.main__menu__subitem--with-icon { display: flex; align-items: center; gap: 16px; font-style: normal; }
.menu__item__icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 8px 18px -8px rgba(255, 75, 109, 0.5); }

.menu__secondary { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.menu__secondary__column { display: flex; flex-direction: column; gap: 14px; }
.secondary__menu__item { font-size: 15px; color: var(--c-text-2); padding: 2px 0; }
.secondary__menu__item a .mask { display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.2em; }
.secondary__menu__item a .mask span { display: inline-block; transition: transform .45s var(--ease-out); }
.secondary__menu__item:hover a .mask span { transform: translateY(-100%); }
.secondary__menu__item:hover { color: var(--c-ink); }
.menu__langs { display: flex; gap: 10px; align-items: center; color: var(--c-text-3); font-family: var(--f-mono); font-size: 13px; }
.menu__langs .lang--active { color: var(--c-ink); font-weight: 600; }

.submenu__icon { width: 14px; height: 14px; position: relative; display: inline-block; transition: transform .35s var(--ease); }
.submenu__icon::before, .submenu__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.5px;
  background: currentColor; transform: translate(-50%, -50%);
}
.submenu__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.has__submenu.is-open .submenu__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

@media (max-width: 900px) {
  .menu__main__inner { grid-template-columns: 1fr; }
  .menu__secondary { display: none; }
}

/* =====================================================
   HERO
   ===================================================== */
.home__hero {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, #FFB7C5 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 85% 80%, #FFD8CC 0%, transparent 55%),
    linear-gradient(135deg, #FFE5D5 0%, #FFD8CC 40%, #FFB7C5 100%);
  padding: 80px 0 80px;
  overflow: hidden;
}

/* Cursor follower */
.cursor-follower {
  position: fixed;
  top: 0; left: 0;
  width: 360px; height: 360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 75, 109, 0.10) 0%, transparent 60%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cursor-follower.is-active { opacity: 1; }
@media (hover: none) { .cursor-follower { display: none; } }

/* Hero spec line — top-aligned, no decorative background */
/* Hero spec line — sits at the very top edge of the hero. The header
   logo lives at the same y on the left side, so when both are visible
   the v3.0 chip lands underneath the logo. Push the spec line down
   below the header (header is ~72px) so the two never overlap. */
.hero__spec {
  position: absolute;
  top: 88px; left: 0; right: 0;
  padding: 14px 0;
  z-index: 2;
  background: transparent;
  border-bottom: 0;
}
.hero__spec__row {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-2);
  flex-wrap: wrap;
}
.hero__spec__item { display: inline-flex; align-items: baseline; gap: 6px; }
.hero__spec__item:hover .hero__spec__k { color: var(--c-rose-500); }
.hero__spec__k {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-transform: none;
  transition: color .3s var(--ease);
}
.hero__spec__v { color: var(--c-text-3); }
.hero__spec__sep { color: var(--c-rose-500); opacity: 0.5; font-weight: 700; }
.hero__spec__item--last { margin-left: auto; gap: 10px; }
.hero__spec__v--only { color: var(--c-ink); }
.hero__spec__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #5BD6A1;
  box-shadow: 0 0 0 3px rgba(91, 214, 161, 0.18);
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* Hero eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.hero__eyebrow__line {
  width: 40px; height: 1px;
  background: var(--c-rose-500);
  display: inline-block;
}

/* Hero CTA row */
.hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: var(--c-ink);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--c-ink);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.hero__cta:hover { background: var(--c-rose-500); border-color: var(--c-rose-500); transform: translateY(-2px); }
.hero__cta--ghost { background: transparent; color: var(--c-ink); }
.hero__cta--ghost:hover { background: var(--c-ink); color: #fff; }
.hero__cta svg { width: 14px; height: 14px; fill: currentColor; }

/* Hero logo caption */
.hero__logo__caption {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(12, 11, 17, 0.12);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.hero__logo__caption .caption__no {
  color: var(--c-rose-500);
  font-weight: 600;
}

/* Logo corner brackets */
.h-corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 1.5px solid var(--c-rose-500);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.h-corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.h-corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.h-corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.h-corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.hero__logo:hover .h-corner { opacity: 1; transform: scale(1); }

/* Page indicator — fixed bottom-center overlay, visible across all sections.
   Was originally .hero__indicator (absolute inside hero) which got clipped
   when scrolling past the hero. */
.page__indicator {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-2);
  background: rgba(255, 249, 247, 0.65);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 75, 109, 0.15);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(26, 26, 31, 0.06);
  /* Hidden until the page has scrolled a bit; otherwise overlaps with the
     hero "Read the brief" CTA. JS toggles .is-visible after 200px scroll. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.page__indicator.is-visible { opacity: 1; }
.page__indicator__line {
  width: 36px; height: 1px;
  background: var(--c-rose-500);
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.page__indicator__line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--c-ink);
  transform: translateX(-100%);
  animation: scrollDash 2.4s var(--ease) infinite;
}
@keyframes scrollDash {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.page__indicator__count { letter-spacing: 0.18em; }
.page__indicator__count span { color: var(--c-ink); font-weight: 700; }

/* Old .hero__indicator rules — kept for safety but nothing references them now */
.hero__indicator { display: none; }
.home__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(12, 11, 17, 0.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
}
.home__hero .grid__layout {
  min-height: calc(100vh - 200px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.home__hero__column--left  { grid-column: span 7; padding-right: 3%; }
.home__hero__column--right { grid-column: span 5; }
.home__hero__inner { display: flex; flex-direction: column; gap: 32px; }
.hero__title {
  font-style: normal;
  font-feature-settings: "ss01";
  max-width: 9ch;
}
.hero__title em {
  font-style: italic;
  color: var(--c-rose-500);
  font-feature-settings: "ss01";
}
.hero__claim { max-width: 480px; }

.hero__price-anchor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.anchor__lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c-text-3); text-transform: uppercase; }
.anchor__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--c-text-2); white-space: nowrap; }
.anchor__chip strong { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 14px; color: var(--c-rose-500); letter-spacing: -0.01em; }
.anchor__chip--strong { background: rgba(255, 75, 109, 0.08); border-color: rgba(255, 75, 109, 0.22); color: var(--c-text); white-space: normal; }
@media (max-width: 900px) {
  .anchor__chip--strong { white-space: normal; }
  .hero__price-anchor { gap: 8px 10px; }
}
.hero__main { display: flex; flex-direction: column; gap: 18px; align-items: stretch; height: 100%; }
.hero__tags {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--c-text-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 4px;
}
.hero__logo__container {
  position: relative;
  flex: 1;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__logo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(255, 250, 248, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 75, 109, 0.18);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px -12px rgba(255, 75, 109, 0.18),
              0 2px 8px -2px rgba(12, 11, 17, 0.04);
  transition: box-shadow .6s var(--ease), transform .6s var(--ease);
}
.hero__logo:hover { box-shadow: var(--glass-shadow-h); transform: translateY(-3px); }
.h-logo { width: 100%; height: auto; max-width: 380px; transition: transform .5s var(--ease); }
#interactive--logo { z-index: 1; }
.h-line { position: absolute; background: var(--c-rose-500); transition: transform .35s var(--ease), background .3s; }
.h-line--top { left: 24px; right: 24px; top: 24px; height: 1.5px; transform: scaleX(0); transform-origin: left; }
.h-line--bottom { left: 24px; right: 24px; bottom: 24px; height: 1.5px; transform: scaleX(0); transform-origin: right; }
.h-line--left { top: 24px; bottom: 24px; left: 24px; width: 1.5px; transform: scaleY(0); transform-origin: top; }
.h-line--right { top: 24px; bottom: 24px; right: 24px; width: 1.5px; transform: scaleY(0); transform-origin: bottom; }
.hero__logo:hover .h-line--top    { transform: scaleX(1); }
.hero__logo:hover .h-line--bottom { transform: scaleX(1); transform-origin: left; }
.hero__logo:hover .h-line--left   { transform: scaleY(1); }
.hero__logo:hover .h-line--right  { transform: scaleY(1); transform-origin: top; }

/* Hero light rays — WebGL pillar of soft rose light streaming from the
   top-right corner. Sits on top of the gradient aura but underneath
   the M3 logo card (z-index: 0). Uses screen blend so the rays brighten
   the pink base instead of replacing it. */
.hero__rays {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
  overflow: hidden;
}
@media (max-width: 900px) {
  .hero__rays { opacity: 0.55; }
}

/* Hero aura — CSS-only radial bokeh anchored top-right. The original
   PNG had a hard rectangular silhouette that became visible at 1920+
   under multiply blend (the bitmap alpha was 1.0 across the whole
   image). Re-built as a pure radial gradient stack on a <div> so
   there is no rectangle to mask away. */
.hero__aura {
  position: absolute;
  top: -25%;
  right: -15%;
  width: 70%;
  max-width: 980px;
  height: 130%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse 55% 50% at 70% 35%, rgba(255,142,153,0.55) 0%, rgba(255,142,153,0.18) 35%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 60% 60%, rgba(255,203,164,0.40) 0%, rgba(255,203,164,0.10) 40%, transparent 70%),
    radial-gradient(circle    at 80% 25%, rgba(255,255,255,0.45) 0%, transparent 25%);
  filter: blur(8px);
}
@media (max-width: 900px) {
  .hero__aura { width: 110%; right: -20%; top: -15%; height: 100%; }
}

/* Hero corner ticks — technical frame, always visible */
.hero__ticks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hero__tick {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--c-rose-500);
  opacity: 0.55;
}
.hero__tick--tl { top: 100px; left: 0; border-right: 0; border-bottom: 0; }
.hero__tick--tr { top: 100px; right: 0; border-left: 0; border-bottom: 0; }
.hero__tick--bl { bottom: 80px; left: 0; border-right: 0; border-top: 0; }
.hero__tick--br { bottom: 80px; right: 0; border-left: 0; border-top: 0; }

/* Hero — push M3 logo card right-down so it stops touching "delivered" tail */
.home__hero__column--right .hero__main {
  position: relative;
  transform: translate(8%, 5%);
}

.hero__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-text-2);
  z-index: 3;
}
.hero__scroll-hint .line { width: 56px; height: 1px; background: currentColor; display: inline-block; animation: scrollLine 2.6s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

@media (max-width: 900px) {
  .home__hero__column--left, .home__hero__column--right { grid-column: span 12; }
  .home__hero__column--right { margin-top: 32px; }
  .hero__logo__container { min-height: 36vh; }
  .hero__spec { position: static; padding: 0; margin-bottom: 28px; }
  .hero__spec__row { gap: 10px 16px; }
  .hero__spec__item--last { margin-left: 0; }
}

/* =====================================================
   Statement section
   ===================================================== */
.home__statement {
  position: relative;
  min-height: 80vh;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255, 75, 109, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #FFD8CC 0%, #FFB7C5 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0;
  overflow: hidden;
}
/* flex direct children with a width must self-center on the cross axis */
.home__statement > .video__block { width: 100%; }
.statement__bg { position: absolute; inset: 0; pointer-events: none; }
.statement__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: orbFloat 22s ease-in-out infinite;
}
.statement__orb--1 { width: 420px; height: 420px; background: radial-gradient(circle, #FF4B6D 0%, transparent 60%); top: -100px; left: -80px; }
.statement__orb--2 { width: 340px; height: 340px; background: radial-gradient(circle, #FFCBA4 0%, transparent 60%); top: 40%; right: -60px; animation-delay: -8s; }
.statement__orb--3 { width: 280px; height: 280px; background: radial-gradient(circle, #FF8E99 0%, transparent 60%); bottom: -80px; left: 38%; animation-delay: -14s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -25px) scale(1.06); }
  66% { transform: translate(-25px, 30px) scale(0.96); }
}
/* Neural mesh — kept faint as ambient texture only. The original 0.08
   opacity multiply still left visible dark dots at network nodes on
   light pink backgrounds, which read as artifacts. Push to 0.04. */
.statement__mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}
/* Iridescence WebGL layer — rose-tinted flow field behind the statement.
   Soft, ambient — should READ AS the section bg, not paint on top of it.
   - Reduced opacity so the cream/pink base shows through
   - radial mask fades the layer toward the edges (no hard boundary)
   - screen blend keeps the rose hue without crushing the pink base */
.iridescence__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: screen;
  filter: saturate(0.85) contrast(0.95) blur(0.5px);
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 35%, transparent 100%);
}
@media (max-width: 900px) {
  .iridescence__layer { opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  .iridescence__layer { opacity: 0.18; }
}
.statement__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
@media (max-width: 900px) {
  .statement__grid { grid-template-columns: 1fr; }
}
.text__float--wrp { position: relative; z-index: 2; }
.float__inner {
  max-width: 880px;
  position: relative;
  padding: 40px 48px 40px 36px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-shadow);
}
.float__inner::before {
  content: '';
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-rose-500) 0%, transparent 100%);
}
/* Quote-card cross-marks (4 corners) */
.float__inner .qmark {
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
}
.float__inner .qmark::before,
.float__inner .qmark::after {
  content: ''; position: absolute; background: var(--c-rose-500);
}
.float__inner .qmark::before { width: 12px; height: 1.5px; top: 0; left: 0; }
.float__inner .qmark::after  { width: 1.5px; height: 12px; top: 0; left: 0; }
.float__inner .qmark--tl { top: 10px; left: 10px; }
.float__inner .qmark--tr { top: 10px; right: 10px; transform: scaleX(-1); }
.float__inner .qmark--bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.float__inner .qmark--br { bottom: 10px; right: 10px; transform: scale(-1, -1); }

/* Eyebrow small-caps header */
.eyebrow--caps {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow--caps::before {
  content: ''; width: 32px; height: 1px; background: var(--c-rose-500);
  display: inline-block;
}
.pretitle.content {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--c-ink);
  text-transform: none;
  font-style: normal;
}
.pretitle.content em {
  color: var(--c-rose-500);
  font-style: italic;
  font-feature-settings: "ss01";
}
.statement__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.statement__visual img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.statement__visual__meta {
  position: absolute;
  top: 20px; left: 20px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--c-ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}
.statement__visual__meta::before {
  content: ''; width: 6px; height: 6px;
  background: var(--c-rose-500); border-radius: 50%;
}
.statement__visual__cap {
  position: absolute;
  bottom: 20px; right: 20px;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--c-ink);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0.7;
}
.statement__visual__corner {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--c-rose-500); border-style: solid; border-width: 0;
  z-index: 2;
}
.statement__visual__corner--tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.statement__visual__corner--br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.statement__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.statement__chips li {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--c-ink);
  font-weight: 500;
}
.statement__chips li:nth-child(2) { background: var(--c-rose-500); color: #fff; border-color: transparent; }
/* New micro-chips below the quote (numerical anchors) */
.statement__microchips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(12, 11, 17, 0.08);
}
.statement__microchips li {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(12, 11, 17, 0.12);
  border-radius: 8px;
  color: var(--c-ink);
  font-weight: 500;
}
.statement__microchips li .num {
  color: var(--c-rose-500);
  font-weight: 600;
  margin-right: 4px;
}

/* =====================================================
   Vision — replaced with editorial split
   ===================================================== */
.home__vision {
  background: var(--c-bg);
  padding: 140px 0;
}
.home__vision .grid__column:first-child { align-self: center; }
.vision__image { position: relative; aspect-ratio: 1 / 1.05; }
.vision__image__inner {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255, 75, 109, 0.32) 0%, transparent 60%),
    linear-gradient(135deg, #FFF0EE 0%, #FFD8CC 50%, #FFCBA4 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 44px;
  box-shadow: var(--glass-shadow);
}
.vision__radar {
  width: 100%; height: 100%;
  max-width: 540px; max-height: 540px;
  display: block;
  overflow: visible;
  position: relative; z-index: 2;
}
.vision__radar polygon {
  animation: radarBreathe 6s ease-in-out infinite;
  transform-origin: 300px 300px;
}
@keyframes radarBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .vision__radar polygon { animation: none; }
}
.vision__image__content { width: 100%; color: #fff; display: flex; flex-direction: column; gap: 22px; }
.vision__chip {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.2em; opacity: 0.9;
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase;
}
.vision__chip::before { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; }
.vision__bigtext { font-family: var(--f-display); font-size: clamp(30px, 3.8vw, 60px); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; }
.vision__bigtext em { font-style: italic; }
.vision__stat {
  display: flex; align-items: baseline; gap: 16px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.3);
  font-family: var(--f-display);
}
.vision__stat .num { font-size: clamp(48px, 5vw, 80px); font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-style: italic; }
.vision__stat .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }

/* Vision corner ticks — subtle L-shaped marks at each corner of the
   vision image. Replaces the prior +/line crosshair overlay which was
   reading as a stray icon during scroll. */
.vision__corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.85);
  border-style: solid;
  border-width: 0;
}
.vision__corner--tl { top: 14px; left: 14px;  border-top-width: 1.5px; border-left-width: 1.5px; }
.vision__corner--tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.vision__corner--bl { bottom: 14px; left: 14px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vision__corner--br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.vision__main { display: flex; flex-direction: column; gap: 56px; padding-left: 24px; }
.vision__header .section__title { margin-top: 4px; }
.vision__blocks { display: flex; flex-direction: column; gap: 0; }
.vision__blocks .box { padding: 32px 0; border-top: 1px solid var(--c-line-soft); }
.vision__blocks .c__header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vision__blocks .c__square { width: 8px; height: 8px; background: var(--c-rose-500); }
.vision__blocks .text__description { margin-bottom: 20px; max-width: 520px; }

@media (max-width: 900px) {
  .vision__main { padding-left: 0; }
}

/* =====================================================
   Schema / sticky
   ===================================================== */
.schema__section {
  background: var(--c-bg);
  padding: 140px 0;
  position: relative;
}
.schema__section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(12, 11, 17, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}
.grid__column--sticky { position: sticky; top: 100px; align-self: start; }
.schema__main { display: flex; flex-direction: column; gap: 28px; }

/* Architecture micro-card stack — fills left-bottom whitespace under sticky text.
   We use a stronger background + 1.5px rose-tinted border so the cards
   remain visible against the warm-cream page background. Previously
   `--glass-bg` (rgba 0.45) blended into the pink page bg and read as empty. */
.arch__micro {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 28px;
}
.arch__card {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1.5px solid rgba(255, 75, 109, 0.18);
  border-radius: var(--radius-m);
  padding: 22px 24px;
  box-shadow:
    0 12px 32px -16px rgba(12, 11, 17, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.arch__card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 75, 109, 0.42);
  box-shadow:
    0 22px 50px -18px rgba(255, 75, 109, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.arch__card__head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 12px;
}
.arch__card__head .no {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-rose-500); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 4px;
}
.arch__card__head .title-sm { color: var(--c-ink); font-weight: 600; }

/* Benchmark — numerical triples */
.arch__bench { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.arch__bench__cell { display: flex; flex-direction: column; gap: 4px; }
.arch__bench__cell .num {
  font-family: var(--f-display);
  font-size: 26px; line-height: 1; font-weight: 400;
  color: var(--c-rose-500); font-style: italic;
  letter-spacing: -0.02em;
}
.arch__bench__cell .lbl {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-text-3);
  margin-top: 4px;
}

/* Code snippet — monospace */
.arch__code {
  font-family: var(--f-mono);
  font-size: 11.5px; line-height: 1.7;
  color: var(--c-text);
  background: rgba(12, 11, 17, 0.04);
  border-radius: 8px;
  padding: 12px 14px;
  overflow: auto;
  white-space: pre;
}
.arch__code .c-key  { color: var(--c-rose-500); font-weight: 600; }
.arch__code .c-var  { color: var(--c-ink); }
.arch__code .c-fn   { color: var(--c-text-2); }
.arch__code .c-num  { color: var(--c-rose-400); }
.arch__code .c-cmt  { color: var(--c-text-3); font-style: italic; }

/* Formula — symbolic with k, l, w tokens */
.arch__formula {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--c-ink);
}
.arch__formula .eq {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.arch__formula .lhs {
  font-style: italic;
  color: var(--c-text-2);
}
.arch__formula .rhs { color: var(--c-rose-500); font-weight: 600; }
.arch__formula .vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.arch__formula .vars span {
  font-size: 10.5px; letter-spacing: 0.08em;
  padding: 3px 8px; background: rgba(255,75,109,0.08); border-radius: 4px;
  color: var(--c-rose-500);
}

/* Architecture compare — dense vs sparse side-by-side image, sits next to morph */
.arch__compare {
  position: relative;
  margin-top: 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--glass-shadow);
}
.arch__compare__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.arch__compare__head .h {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-text-3);
}
.arch__compare__head .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  padding: 5px 12px; border-radius: 999px;
  font-weight: 600;
}
.arch__compare__head .badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-rose-500);
}
.arch__compare__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: linear-gradient(135deg, #FFE5D5 0%, #FFD8CC 50%, #FFB7C5 100%);
  border: 1px solid var(--glass-border);
}
.arch__compare__figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* The AI-generated dense-vs-sparse image ships with a cream-yellow
     background that doesn't match the rest of the pink site. Tint it. */
  filter: hue-rotate(-12deg) saturate(0.85);
  mix-blend-mode: multiply;
}
.arch__compare__figcap {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-3);
}
.arch__compare__figcap .l { color: var(--c-text-2); }
.arch__compare__figcap .r {
  color: var(--c-rose-500); font-weight: 600;
}
/* The wrapper used to be 240vh, which left ~100vh of empty scroll between
   the sticky morph (80vh) and the dense-vs-sparse compare (~50vh). 180vh
   matches the natural content height + a small buffer so the 3 step
   transitions (~60vh each) all complete inside the sticky morph window
   before the compare card takes the remaining 50vh. */
.home-morph-wrp { position: relative; min-height: 180vh; }
.home-morph { position: relative; height: 100%; }
.graph-morph__sticky { position: sticky; top: 100px; height: 80vh; }
.home-morph__inner {
  position: relative; width: 100%; height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: var(--glass-shadow);
}
.morph__canvases { position: relative; flex: 1; min-height: 0; }
.morph__pane { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); display: flex; flex-direction: column; gap: 16px; }
.morph__pane.is-active { opacity: 1; }
.morph__title { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-3); }
.morph__svg { flex: 1; min-height: 0; }
.morph__svg svg { width: 100%; height: 100%; }
.morph__svg-label { font-family: var(--f-mono); font-size: 10px; fill: var(--c-text-3); letter-spacing: 0.18em; }
.msa-pulse { transform-origin: 200px 200px; animation: msaPulse 2.6s var(--ease-out) infinite; }
.msa-query { filter: drop-shadow(0 0 6px rgba(255, 75, 109, 0.55)); }
/* Strider links drift along the line so the graph feels alive even
   when nothing else moves. Uses stroke-dashoffset for a flowing pulse. */
.msa-links line[stroke-dasharray] { animation: msaDash 4.5s linear infinite; }
/* Subtle "breathing" opacity for the solid wires so the diagram reads
   as live without distracting from the central query. Dashed lines keep
   their msaDash flow; solids get a slow pulse. */
.msa-links line.msa-link:not(.msa-link--dashed) { animation: msaBreathe 5.4s var(--ease-in-out) infinite; }
@keyframes msaPulse {
  0%   { r: 9;  opacity: 0.85; }
  80%  { r: 26; opacity: 0;    }
  100% { r: 26; opacity: 0;    }
}
@keyframes msaDash {
  to { stroke-dashoffset: -28; }
}
@keyframes msaBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.morph__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--c-line-soft); padding-top: 14px; }
.morph__stats li { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 8px 0; }
.morph__stats li:nth-child(even) { padding: 8px 0 8px 16px; border-left: 1px solid var(--c-line-soft); }
.morph__stats .k { font-family: var(--f-display); font-size: 28px; font-weight: 400; color: var(--c-rose-500); font-style: italic; letter-spacing: -0.02em; }
.morph__stats .v { font-size: 12px; color: var(--c-text-2); font-weight: 500; }

.graph__data { position: absolute; right: 32px; top: 32px; display: flex; align-items: center; gap: 12px; z-index: 2; }
.graph__data__logo { font-family: var(--f-display); font-weight: 400; color: var(--c-rose-500); font-size: 22px; letter-spacing: -0.02em; font-style: italic; }
.graph__data__inner { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.graph__data__inner .text--s { font-size: 10px; color: var(--c-text-3); letter-spacing: 0.16em; text-transform: uppercase; }

.morph__pane--compare { padding: 4px; }
.morph__compare {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.morph__compare__col {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.morph__compare__col__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.morph__compare__col__head .tag { padding: 4px 10px; border-radius: 999px; background: rgba(255,75,109,0.1); color: var(--c-rose-500); font-weight: 600; }
.morph__compare__col__head .tag--dense { background: rgba(12,11,17,0.06); color: var(--c-ink); }
.morph__compare__col__img {
  position: relative;
  flex: 1; min-height: 240px;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: #fff;
}
.morph__compare__col__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.morph__compare__col__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-2);
}
.morph__compare__col__foot .num { font-family: var(--f-display); font-size: 22px; color: var(--c-rose-500); font-style: italic; letter-spacing: -0.02em; }
.morph__compare__col__foot .num--dense { color: var(--c-ink); }

/* =====================================================
   Stack — capabilities
   ===================================================== */
.home__stack {
  background: var(--c-bg);
  padding: 140px 0 0;
  position: relative;
}
.section__header { margin-bottom: 80px; }
.home__stack .section__header { margin-bottom: 44px; }
.c__header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.c__square { width: 8px; height: 8px; background: var(--c-rose-500); }
.capabilities__hint { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 60px; font-family: var(--f-mono); }
.capabilities__hint .text--m { font-size: 13px; letter-spacing: 0.18em; color: var(--c-text-2); }
.capabilities__hint .text--s { font-size: 11px; color: var(--c-text-3); }

.capabilities__lede { margin-top: 24px; max-width: 30em; color: var(--c-text-2); }
.capabilities__index { list-style: none; margin: 0; padding: 6px 0 0; display: flex; flex-direction: column; }
.capabilities__index li a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 4px;
  border-top: 1px solid var(--c-line-soft);
  transition: padding-left .35s var(--ease);
}
.capabilities__index li:last-of-type a, .cap__idx__hint { border-top: 1px solid var(--c-line-soft); }
.capabilities__index li a:hover { padding-left: 10px; }
.cap__idx__no { font-family: var(--f-mono); font-size: 12px; color: var(--c-rose-500); letter-spacing: 0.12em; }
.cap__idx__name { font-family: var(--f-display); font-size: 18px; color: var(--c-text); }
.capabilities__index li a:hover .cap__idx__name { color: var(--c-rose-500); }
.cap__idx__meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-left: auto; }
.cap__idx__hint { padding: 14px 4px 0; }

.stack__container { position: relative; }
.stack__item {
  position: relative;
  border-top: 1px solid var(--c-line-soft);
  padding: 80px 0 100px;
  background: var(--c-bg);
  z-index: 1;
}
.stack__item:first-child { border-top: 0; padding-top: 24px; }
.stack__column--1 { grid-column: span 1; }
.stack__column--2 { grid-column: span 7; }
.stack__column--3 { grid-column: span 4; }
.stack__item__order { font-family: var(--f-mono); display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--c-text-2); padding-top: 8px; }
.stack__item__order .pretitle { font-size: 14px; color: var(--c-text-2); font-weight: 500; }
.stack__item__order .dash { color: var(--c-rose-500); }
.stack__item__inner { display: flex; flex-direction: column; gap: 28px; height: 100%; }
.stack__item__header { display: flex; flex-direction: column; gap: 16px; }
.stack__item__header .pretitle { color: var(--c-rose-500); font-weight: 600; font-size: 12px; }
.stack__item__info { display: flex; flex-direction: column; gap: 22px; max-width: 540px; }
.stack__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stack__chips li {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--c-text-2);
}
.stack__item__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-shadow);
}
.stack__item__image--code { background: var(--c-bg-deep); padding: 0; align-items: center; }
.stack__item__image--code .code__panel { height: auto; max-height: 100%; }
.code__panel {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #e8e8ed;
  padding: 28px;
  width: 100%;
  height: 100%;
  overflow: auto;
  white-space: pre-wrap;
}
.code__panel .c-key { color: #FF8E99; }
.code__panel .c-var { color: #FFD8CC; }
.code__panel .c-fn  { color: #FFCBA4; }
.code__panel .c-prop { color: #FF9E9E; }
.code__panel .c-str { color: #B7E3A0; }
.code__panel .c-bool { color: #FF4B6D; font-weight: 600; }
.code__panel .c-cmt { color: #6c6c75; font-style: italic; }

.stack__item__image--multimodal {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 75, 109, 0.9) 0%, transparent 55%),
    linear-gradient(135deg, #FF4B6D 0%, #FFB7C5 100%);
  padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
}
.mm__grid { width: 100%; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.mm__tile {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-s);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
  color: #fff;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.mm__tile:hover { background: rgba(255,255,255,0.35); transform: translateY(-2px); }
.mm__core { grid-column: span 2; background: var(--c-bg-deep); color: var(--c-rose-200); font-size: 11px; font-weight: 600; }
.mm__caption { color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }

.stack__item__image--context { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); padding: 32px; flex-direction: column; align-items: stretch; justify-content: center; gap: 32px; }
.context__meter__track { width: 100%; height: 10px; background: rgba(255,75,109,0.12); border-radius: 6px; overflow: hidden; }
.context__meter__fill { width: 0; height: 100%; background: linear-gradient(90deg, #FF4B6D, #FFB7C5); border-radius: 6px; transition: width 1.8s var(--ease-out); }
.context__meter__labels { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; color: var(--c-text-3); margin-top: 10px; letter-spacing: 0.1em; }
.context__numbers { display: flex; gap: 28px; align-items: flex-end; }
.context__num .k { font-family: var(--f-display); font-size: 64px; font-weight: 400; line-height: 1; color: var(--c-rose-500); letter-spacing: -0.04em; font-style: italic; }
.context__num .v { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; }

@media (max-width: 900px) {
  .stack__column--1 { display: none; }
  .stack__column--2, .stack__column--3 { grid-column: span 12; }
  .capabilities__hint { padding-top: 8px; align-items: flex-start; }
  .capabilities__index { padding-top: 24px; }
  .cap__idx__meta { display: none; }
}

/* =====================================================
   Image parallax — calmer, with AI dashboard
   ===================================================== */
.section__image__parallax { height: 88vh; position: relative; overflow: hidden; margin: 80px 0; }
.section__image__parallax .parallax__container { position: sticky; top: 100px; height: 88vh; display: flex; align-items: center; justify-content: center; }
.section__image__parallax .image--back { display: none; }
.parallax__gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 75, 109, 0.7) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(255, 216, 204, 0.8) 0%, transparent 55%),
    linear-gradient(135deg, #FFB7C5 0%, #FFCBA4 50%, #FF8E99 100%);
  filter: saturate(1.05);
}

.parallax__canvas {
  position: relative;
  width: min(78vw, 1100px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 60px 120px -40px rgba(12,11,17,0.25), 0 1px 0 rgba(255,255,255,0.6) inset;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
.parallax__canvas__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.parallax__canvas__corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--c-rose-500);
  border-style: solid;
  border-width: 0;
  z-index: 3;
}
.parallax__canvas__corner--tl { top: 18px; left: 18px; border-top-width: 2px; border-left-width: 2px; }
.parallax__canvas__corner--tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; }
.parallax__canvas__corner--bl { bottom: 18px; left: 18px; border-bottom-width: 2px; border-left-width: 2px; }
.parallax__canvas__corner--br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; }

.parallax__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 38px 44px;
  z-index: 2;
  pointer-events: none;
}
.parallax__overlay__top, .parallax__overlay__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.parallax__overlay__bottom { align-items: flex-end; }
.parallax__tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
}
.parallax__meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.7;
}
.parallax__overlay__stat { color: var(--c-ink); pointer-events: auto; }
.parallax__overlay__k {
  font-family: var(--f-display);
  font-size: clamp(28px, 2.4vw, 42px);
  font-weight: 400;
  font-style: italic;
  color: var(--c-rose-500);
  letter-spacing: -0.025em;
  line-height: 1;
}
.parallax__overlay__v {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.7;
  margin-top: 6px;
}
.parallax__chips {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  padding: 12px 24px;
  border-radius: 999px;
  z-index: 3;
}
.parallax__chips span:nth-child(even) { color: var(--c-rose-500); }

/* =====================================================
   Code section
   ===================================================== */
.home__code {
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(255, 75, 109, 0.08) 0%, transparent 60%),
    var(--c-bg-3);
  padding: 140px 0;
}
.home__code .grid__column--half:first-child { padding-right: 32px; }
.code__title-row { display: flex; align-items: center; gap: 22px; margin-bottom: 6px; }
.code__agent-icon { width: 72px; height: 72px; border-radius: 18px; flex-shrink: 0; box-shadow: 0 12px 28px -10px rgba(255, 75, 109, 0.45), 0 0 0 1px rgba(255, 75, 109, 0.15); }
.code__title-stack { display: flex; flex-direction: column; gap: 6px; }
.code__product-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-rose-500); font-weight: 600; }
.code__features { display: flex; flex-direction: column; gap: 0; margin: 32px 0 36px; }
.code__features li {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid var(--c-line-soft);
  transition: padding-left .35s var(--ease);
}
.code__features li:hover { padding-left: 8px; }
.code__features li:last-child { border-bottom: 1px solid var(--c-line-soft); }
.code__features__num { font-family: var(--f-mono); font-size: 12px; color: var(--c-rose-500); font-weight: 600; padding-top: 6px; min-width: 24px; }
.code__features__text .t { font-family: var(--f-display); font-size: 26px; font-weight: 400; margin-bottom: 8px; color: var(--c-ink); letter-spacing: -0.02em; }
.code__features__text .t em { color: var(--c-rose-500); font-style: italic; }
.code__features__text .d { font-size: 15px; line-height: 1.55; color: var(--c-text-2); }

.code__visual { position: sticky; top: 100px; }
.code__window {
  background: var(--c-bg-deep);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(12, 11, 17, 0.35);
  border: 1px solid #1E1E22;
}
.code__window__bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; background: #181820; border-bottom: 1px solid #1E1E22; }
.code__dot { width: 10px; height: 10px; border-radius: 50%; background: #3A3A40; }
.code__dot:first-child { background: #FF5F57; }
.code__dot:nth-child(2) { background: #FEBC2E; }
.code__dot:nth-child(3) { background: #28C840; }
.code__window__title { margin-left: 14px; font-family: var(--f-mono); font-size: 12px; color: #6c6c75; letter-spacing: 0.05em; }
.code__window__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.6; max-height: 460px; overflow: hidden; }
.code__line { color: #b0b0b6; }
.code__line .c-time { color: #6c6c75; margin-right: 12px; }
.code__line .c-info { color: var(--c-rose-300); margin-right: 6px; }
.code__line .c-ok { color: #5BD6A1; margin-right: 6px; }
.code__line .c-warn { color: #FFCBA4; margin-right: 6px; }
.code__line--blink .c-info::after {
  content: '▍';
  display: inline-block;
  animation: blink 1.1s steps(1) infinite;
  color: var(--c-rose-500);
}
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .code__visual { position: static; margin-top: 36px; }
}

/* =====================================================
   Token plan
   ===================================================== */
.home__plans {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, #FFD8CC 0%, #FFB7C5 100%);
  padding: 140px 0;
}
.plans__header { text-align: center; margin-bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.plans__header .c__header { justify-content: center; }
.plans__sub { color: var(--c-text-2); max-width: 600px; }

.plans__switchers { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 8px; }
.plans__tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: transparent; }
.plans__tab {
  font-family: var(--f-body); font-size: 14px; color: var(--c-text-3);
  background: transparent; border: 0; padding: 8px 14px; border-radius: 999px;
  cursor: pointer; letter-spacing: 0.02em; line-height: 1;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.plans__tab:hover { color: var(--c-text); }
.plans__tab.is-active { color: var(--c-ink); font-weight: 600; position: relative; }
.plans__tab.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--c-rose-500); border-radius: 999px;
}

.plans__cycle { display: inline-flex; align-items: center; gap: 0; padding: 5px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.plans__cycle__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-size: 13px; color: var(--c-text-2);
  background: transparent; border: 0; padding: 9px 16px; border-radius: 999px;
  cursor: pointer; line-height: 1;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.plans__cycle__btn:hover { color: var(--c-text); }
.plans__cycle__btn.is-active { background: var(--c-ink); color: #fff; }
.plans__cycle__pill { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; background: var(--c-bg); color: var(--c-text-2); border: 1px solid var(--c-line-soft); }
.plans__cycle__btn.is-active .plans__cycle__pill { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.18); }

.plan__card__billed { font-family: var(--f-body); font-size: 12.5px; color: var(--c-text-3); margin-top: -2px; letter-spacing: 0.01em; }
.plan__card--featured .plan__card__billed { color: rgba(255,255,255,0.6); }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.plan__card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: var(--glass-shadow);
}
.plan__card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-h); }
.plan__card--featured {
  background: var(--c-bg-deep);
  color: #fff;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px -20px rgba(12, 11, 17, 0.4);
}
.plan__card--featured:hover { box-shadow: 0 40px 90px -20px rgba(255, 75, 109, 0.35); }
.plan__card--featured .plan__card__tier { color: var(--c-rose-300); }
.plan__card--featured .plan__card__price .cur,
.plan__card--featured .plan__card__price .num,
.plan__card--featured .plan__card__price .per { color: #fff; }
.plan__card--featured .plan__card__list li { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.15); }
.plan__card--featured .plan__card__list strong { color: var(--c-rose-200); }
.plan__card__badge {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--c-rose-500); color: #fff;
  padding: 5px 12px; border-radius: 999px;
}
.plan__card__head { display: flex; flex-direction: column; gap: 8px; }
.plan__card__tier { font-family: var(--f-display); font-size: 24px; font-weight: 400; color: var(--c-rose-500); font-style: italic; letter-spacing: -0.01em; }
.plan__card__price { display: flex; align-items: baseline; gap: 4px; font-family: var(--f-display); }
.plan__card__price .cur { font-size: 22px; color: var(--c-text-2); font-weight: 400; }
.plan__card__price .num { font-size: 72px; font-weight: 400; line-height: 1; letter-spacing: -0.05em; font-style: italic; }
.plan__card__price .per { font-size: 14px; color: var(--c-text-3); font-weight: 500; font-family: var(--f-body); }
.plan__card__list { display: flex; flex-direction: column; gap: 0; }
.plan__card__list li { font-size: 14px; line-height: 1.5; color: var(--c-text-2); padding: 12px 0; border-top: 1px solid var(--c-line-soft); }
.plan__card__list li:last-child { border-bottom: 1px solid var(--c-line-soft); }
.plan__card__list strong { color: var(--c-rose-500); font-weight: 600; }

/* Plans hover micro-motion: price subtle scale + feature rows staggered slide, lively card feedback without overshadowing */
.plan__card__price .num { transition: transform .45s var(--ease); transform-origin: left center; }
.plan__card:hover .plan__card__price .num { transform: scale(1.05); }
.plan__card__list li { transition: transform .4s var(--ease), border-color .3s var(--ease); }
.plan__card:hover .plan__card__list li { transform: translateX(6px); }
.plan__card:hover .plan__card__list li:nth-child(2) { transition-delay: .04s; }
.plan__card:hover .plan__card__list li:nth-child(3) { transition-delay: .08s; }
.plan__card:hover .plan__card__list li:nth-child(4) { transition-delay: .12s; }
.plan__card:hover .plan__card__list li:nth-child(5) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .plan__card__price .num, .plan__card__list li { transition: none; }
  .plan__card:hover .plan__card__price .num,
  .plan__card:hover .plan__card__list li { transform: none; }
}
.plan__card__cta { margin-top: auto; }
.plan__card--featured .button { background: #fff; color: var(--c-ink); }
.plan__card--featured .button:hover { background: var(--c-rose-500); color: #fff; }

@media (max-width: 900px) {
  .plans__grid { grid-template-columns: 1fr; }
}

/* =====================================================
   API section
   ===================================================== */
.home__api { background: var(--c-bg); padding: 140px 0; }
.api__code {
  background: var(--c-bg-deep);
  border-radius: var(--radius-xl);
  padding: 32px;
  color: #e8e8ed;
  border: 1px solid #1E1E22;
  position: sticky;
  top: 100px;
  box-shadow: 0 30px 80px -20px rgba(12, 11, 17, 0.35);
}
.api__code__title {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--c-rose-300); letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
.api__code__title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-rose-500); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }
.api__code__body { font-family: var(--f-mono); font-size: 12px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.api__code__body .c-key { color: #FF8E99; }
.api__code__body .c-str { color: #B7E3A0; }
.api__code__body .c-prop { color: #FFCBA4; }
.api__code__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #1E1E22; }
.api__code__pill {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px;
  background: rgba(255,75,109,0.15);
  color: var(--c-rose-200);
  border-radius: 999px;
  border: 1px solid rgba(255,75,109,0.2);
}
.api__channels { margin: 28px 0 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: var(--f-mono); font-size: 12.5px; color: var(--c-text-2); letter-spacing: 0.05em; }
.api__channels li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.api__channels span { padding: 6px 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 999px; }
.api__channels i { color: var(--c-rose-500); font-style: normal; }

.api__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.api__specs li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  transition: transform .4s var(--ease);
}
.api__specs li:hover { transform: translateY(-2px); }
.api__specs .k { font-family: var(--f-display); font-size: 30px; font-weight: 400; color: var(--c-rose-500); font-style: italic; letter-spacing: -0.02em; }
.api__specs .v { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-2); letter-spacing: 0.1em; text-transform: uppercase; }

.api__channels__compat { margin-top: 20px; padding: 14px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); }
.api__channels__compat__lbl { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.14em; text-transform: uppercase; }
.api__channels__compat__list { font-family: var(--f-mono); font-size: 12px; color: var(--c-text-2); letter-spacing: 0.03em; }

.api__resources { margin-top: 16px; display: flex; flex-direction: column; }
.api__resources__item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 4px;
  border-top: 1px solid var(--c-line-soft);
  transition: padding-left .35s var(--ease), color .35s var(--ease);
}
.api__resources__item:last-child { border-bottom: 1px solid var(--c-line-soft); }
.api__resources__item:hover { padding-left: 10px; }
.api__resources__k { font-family: var(--f-display); font-size: 16px; color: var(--c-text); white-space: nowrap; }
.api__resources__item:hover .api__resources__k { color: var(--c-rose-500); }
.api__resources__v { font-family: var(--f-mono); font-size: 11px; color: var(--c-text-3); letter-spacing: 0.06em; margin-left: auto; text-align: right; }

@media (max-width: 900px) {
  .api__code { position: static; margin-bottom: 32px; }
  .api__resources__v { display: none; }
}

/* =====================================================
   Demo — paper reproduction
   ===================================================== */
.home__demo {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255, 75, 109, 0.06) 0%, transparent 60%),
    var(--c-bg-2);
  padding: 140px 0;
}
.demo__visual { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.demo__paper {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--glass-shadow);
}
.demo__paper__head { padding-bottom: 18px; border-bottom: 1px solid var(--c-line-soft); }
.demo__paper__title { font-family: var(--f-display); font-size: 24px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.demo__paper__title em { color: var(--c-rose-500); font-style: italic; }
.demo__paper__sub { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; }
.demo__paper__chart { padding: 20px 0; }
.demo__chart { width: 100%; height: auto; }
.chart__label { font-family: var(--f-mono); font-size: 10px; fill: var(--c-text-3); letter-spacing: 0.1em; text-transform: uppercase; }
.chart__label--sub { font-size: 9px; }
.chart__line { stroke-linecap: round; }

/* Demo SFT chart — draw-in + hover crosshair */
.chart__stage { position: relative; }
.chart__hitbox { cursor: crosshair; }
.chart__cursor { stroke: var(--c-rose-400); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .25s var(--ease); }
.demo__chart.is-hover .chart__cursor { opacity: 0.55; }
.chart__hover { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); }
.chart__hover.is-on { opacity: 1; }
.chart__dot {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--c-rose-500);
  box-shadow: 0 0 0 4px rgba(255,75,109,0.16), 0 2px 10px rgba(255,75,109,0.45);
}
.chart__tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--c-ink); background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border); border-radius: 8px; padding: 4px 8px;
  box-shadow: var(--glass-shadow);
}
.demo__paper__meta { display: flex; gap: 18px; padding-top: 18px; border-top: 1px solid var(--c-line-soft); font-family: var(--f-mono); font-size: 11px; color: var(--c-text-3); letter-spacing: 0.12em; text-transform: uppercase; }
.demo__paper__meta div { display: flex; flex-direction: column; gap: 4px; }
.demo__paper__meta div span:first-child { color: var(--c-text-3); }
.demo__paper__meta div span:last-child { color: var(--c-rose-500); font-weight: 600; }
.demo__paper__caption { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.08em; text-align: center; }

.demo__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.demo__stats li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  transition: transform .4s var(--ease);
}
.demo__stats li:hover { transform: translateY(-2px); }
.demo__stats .k { font-family: var(--f-display); font-size: 32px; font-weight: 400; color: var(--c-rose-500); font-style: italic; letter-spacing: -0.02em; }
.demo__stats .v { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-2); letter-spacing: 0.1em; text-transform: uppercase; }

/* Two-case demo region — shared eyebrow + two interlocked grids */
.demo__header { margin-bottom: 72px; max-width: 720px; }
.demo__lede { margin-top: 24px; color: var(--c-text-2); max-width: 32em; }
.demo__case { position: relative; }
.demo__case + .demo__divider { margin: 96px 0; }
.demo__case__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--c-rose-500); text-transform: uppercase; margin-bottom: 18px; padding-left: 1px; display: inline-flex; align-items: center; gap: 10px; }
.demo__case__no::before { content: ''; width: 28px; height: 1px; background: var(--c-rose-500); display: inline-block; }
.demo__case__title { font-family: var(--f-display); font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-text); margin-bottom: 24px; }
.demo__case__title em { color: var(--c-rose-500); font-style: italic; }

.demo__divider { display: flex; align-items: center; gap: 24px; }
.demo__divider__line { flex: 1; height: 1px; background: var(--c-line-soft); }
.demo__divider__lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--c-text-3); text-transform: uppercase; }

/* CUDA optimization board — visual twin of demo__paper, table-style content */
.demo__visual--cuda { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.demo__cuda {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--glass-shadow);
}
.demo__cuda__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line-soft); }
.demo__cuda__no { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.18em; text-transform: uppercase; }
.demo__cuda__title { font-family: var(--f-display); font-size: 18px; color: var(--c-text); flex: 1; }
.demo__cuda__status { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-rose-500); letter-spacing: 0.14em; text-transform: uppercase; }
.demo__cuda__board { display: flex; flex-direction: column; padding: 10px 0; }
.cuda__row { display: grid; grid-template-columns: 1.1fr 0.8fr 2fr 0.7fr; align-items: center; gap: 12px; padding: 9px 0; font-family: var(--f-mono); font-size: 11.5px; color: var(--c-text-2); border-bottom: 1px solid var(--c-line-soft); }
.cuda__row:last-child { border-bottom: 0; }
.cuda__row--head { color: var(--c-text-3); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 12px; }
.cuda__row > span:nth-child(1), .cuda__row > span:nth-child(2) { letter-spacing: 0.06em; }
.cuda__row > span:nth-child(4) { color: var(--c-rose-500); font-weight: 600; text-align: right; }
.cuda__row--best > span { color: var(--c-text); }
.cuda__row--best > span:nth-child(4) { font-size: 13px; }
.cuda__bar { position: relative; display: flex; align-items: center; gap: 10px; }
.cuda__bar i {
  display: block; height: 6px; border-radius: 999px;
  width: var(--w);
  background: linear-gradient(90deg, var(--c-rose-300), var(--c-rose-500));
  box-shadow: 0 0 8px rgba(255,75,109,0.18);
  transition: width 0.6s var(--ease-out);
}
.cuda__row--head .cuda__bar i { display: none; }
.cuda__bar b { font-weight: 400; color: var(--c-text-2); font-size: 11px; font-family: var(--f-mono); min-width: 42px; text-align: right; }
.cuda__row--best .cuda__bar b { color: var(--c-rose-500); font-weight: 600; }
.demo__cuda__foot { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--c-line-soft); font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); letter-spacing: 0.12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .demo__visual { position: static; margin-top: 36px; }
  .demo__visual--cuda { position: static; margin-top: 36px; }
  .demo__case + .demo__divider { margin: 64px 0; }
  .demo__case__title { font-size: 28px; }
  .demo__cuda { padding: 22px 20px; }
  .cuda__row { font-size: 10.5px; gap: 8px; }
  .cuda__bar b { font-size: 10px; min-width: 36px; }
}

/* =====================================================
   Carousel — Bento grid
   ===================================================== */
.home__carousel { background: var(--c-bg); padding: 112px 0; overflow: hidden; }
.home__carousel .section__header { margin-bottom: 0; }
.carousel__intro { display: flex; flex-direction: column; gap: 28px; align-items: flex-end; padding-top: 12px; }
.carousel__intro .text--l { max-width: 460px; text-align: right; }
.carousel__control { display: inline-flex; align-items: center; gap: 14px; }
.carousel__arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--c-ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.carousel__arrow:hover { background: var(--c-ink); color: #fff; transform: scale(1.05); }
.carousel__arrow svg { width: 14px; height: 14px; fill: currentColor; transform: scaleX(-1); }
.carousel__arrow--next svg { transform: scaleX(1); }
.carousel__count {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--c-text-2);
  min-width: 64px;
  text-align: center;
}
.carousel__count span { color: var(--c-ink); font-weight: 600; }

.bento__layout { margin-top: 44px; }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 1200px) {
  .bento__grid { grid-template-columns: repeat(4, 1fr); }
}

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 348px;
  padding: 28px 26px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  color: var(--c-ink);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  isolation: isolate;
  box-shadow: var(--glass-shadow);
}
.bento__card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-h); }
.bento__card.is-active { transform: translateY(-6px); box-shadow: var(--glass-shadow-h); }

.bento__card__bg {
  position: absolute; inset: 0; z-index: -1;
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.bento__card--1 .bento__card__bg { background: linear-gradient(155deg, #FF4B6D 0%, #FF8E99 60%, #FFB7C5 100%); }
.bento__card--2 .bento__card__bg { background: linear-gradient(160deg, #0C0B11 0%, #1E1E22 100%); }
.bento__card--3 .bento__card__bg { background: linear-gradient(135deg, #FF8E99 0%, #FFD8CC 100%); }
.bento__card--4 .bento__card__bg { background: linear-gradient(150deg, #FFB7C5 0%, #FFCBA4 100%); }
.bento__card.is-active .bento__card__bg { opacity: 1; }
.bento__card.is-active { color: #fff; border-color: rgba(255,255,255,0.18); }
.bento__card.is-active .bento__card__no,
.bento__card.is-active .bento__card__cat { color: rgba(255,255,255,0.75); }
.bento__card.is-active .bento__card__desc { color: rgba(255,255,255,0.85); }
.bento__card.is-active .bento__card__metric .v { color: rgba(255,255,255,0.65); }
.bento__card.is-active .bento__card__metric .k { color: #fff; }

.bento__card__top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-text-3);
}
.bento__card__no { font-weight: 600; }
.bento__card__cat { padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; opacity: 0.7; }

.bento__card__middle { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.bento__card__title {
  font-family: var(--f-display);
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.bento__card__desc {
  font-size: 14px; line-height: 1.55;
  color: var(--c-text-2);
  max-width: 340px;
}

.bento__card__bottom {
  display: flex; align-items: flex-end; gap: 24px;
  padding-top: 22px; margin-top: auto;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.bento__card.is-active .bento__card__bottom { border-top-color: rgba(255,255,255,0.18); }
.bento__card__metric { display: flex; flex-direction: column; gap: 2px; }
.bento__card__metric .k {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--c-rose-500);
  line-height: 1;
}
.bento__card__metric .v {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.bento__card__arrow {
  margin-left: auto;
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  font-style: italic;
  transition: transform .4s var(--ease);
}
.bento__card:hover .bento__card__arrow,
.bento__card.is-active .bento__card__arrow { transform: translateX(6px); }

@media (max-width: 900px) {
  .bento__grid { grid-template-columns: 1fr; }
  .carousel__intro { align-items: flex-start; }
  .carousel__intro .text--l { text-align: left; }
}

/* =====================================================
   Footer — marquee + bento + status
   ===================================================== */
.page__footer {
  background: var(--c-bg-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Marquee — soft calligraphic strip above the footer big-CTA. The
   previous 28px / #fff / Instrument Serif was way too loud; the user's
   feedback was that it competed with the rest of the page. Drop to a
   mid-size, muted color, mono, with reduced opacity. */
.footer__marquee {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  padding: 14px 0;
  background: transparent;
  position: relative;
}
.footer__marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.footer__marquee:hover .footer__marquee__track { animation-play-state: paused; }
.footer__marquee__group {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 14px;
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
  opacity: 0.7;
}
.footer__marquee__group em {
  color: var(--c-rose-500);
  font-style: normal;
  font-weight: 600;
  transition: color .3s var(--ease);
  opacity: 0.85;
}
.footer__marquee__group:hover em { color: var(--c-rose-500); opacity: 1; }
.footer__marquee__group .dot {
  color: var(--c-rose-500);
  font-style: normal;
  opacity: 0.5;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Big CTA */
.footer__big { padding: 100px 0 80px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer__big__top { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.footer__status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.footer__status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5BD6A1;
  box-shadow: 0 0 0 4px rgba(91, 214, 161, 0.18);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(91, 214, 161, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(91, 214, 161, 0.05); }
}
.footer__status__label { color: #fff; font-weight: 600; }
.footer__status__sep { color: rgba(255,255,255,0.3); }
.footer__status__version { color: rgba(255,255,255,0.55); }

.footer__big__text {
  font-family: var(--f-display);
  font-size: clamp(54px, 8.5vw, 156px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: 48px;
  font-style: normal;
}
.footer__big__text em { color: var(--c-rose-500); font-style: italic; }
.footer__big__cta { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.footer__cta__btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.footer__cta__btn:hover { background: var(--c-rose-500); border-color: var(--c-rose-500); transform: translateY(-2px); }
.footer__cta__btn svg { width: 14px; height: 14px; fill: currentColor; }

/* Bento grid */
.footer__bento { padding: 60px 0 80px; }
.footer__bento__grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.footer__bento__cell {
  background: var(--c-bg-deep);
  padding: 32px 28px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .4s var(--ease);
}
.footer__bento__cell:hover { background: #15141A; }

.footer__logo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--c-rose-300);
  font-style: italic;
}
.footer__logo img { display: block; height: 32px; width: auto; filter: brightness(0) invert(1) sepia(1) hue-rotate(310deg) saturate(0.6) brightness(1.2); }
.footer__tag { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.5; max-width: 280px; }
.footer__tag em { color: var(--c-rose-500); font-style: italic; }
.footer__socials { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; margin-top: auto; }
.footer__socials a { color: rgba(255,255,255,0.65); transition: color .3s var(--ease); }
.footer__socials a:hover { color: var(--c-rose-300); }

.footer__col__title { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); }
.footer__bento__cell ul { display: flex; flex-direction: column; gap: 11px; }
.footer__bento__cell li a, .footer__bento__cell li {
  color: rgba(255,255,255,0.85); font-size: 14px;
  transition: color .3s var(--ease);
}
.footer__bento__cell li a:hover { color: var(--c-rose-300); }
.footer__bento__cell li.is-active { color: #fff; font-weight: 500; }

.footer__news__text { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.55; }
.footer__news__form {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  transition: border-color .3s var(--ease);
}
.footer__news__form:focus-within { border-color: var(--c-rose-500); }
.footer__news__form input {
  flex: 1; min-width: 0;
  padding: 10px 16px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  outline: none;
}
.footer__news__form input::placeholder { color: rgba(255,255,255,0.4); }
.footer__news__form button {
  padding: 10px 18px;
  background: #fff;
  color: var(--c-ink);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.footer__news__form button:hover { background: var(--c-rose-500); color: #fff; }

.footer__locale li.is-active { display: inline-flex; align-items: center; gap: 6px; }
.footer__locale li.is-active::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-rose-500);
}
.footer__locale__sub { color: rgba(255,255,255,0.4); font-size: 11px; line-height: 1.5; margin-top: auto; font-family: var(--f-mono); letter-spacing: 0.05em; }

/* Bottom bar */
.footer__bottom { padding: 32px 0 40px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer__bottom .wrp { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__bottom__row { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; flex-wrap: wrap; }
.footer__bottom__row--right a { color: rgba(255,255,255,0.55); transition: color .3s var(--ease); }
.footer__bottom__row--right a:hover { color: var(--c-rose-300); }
.footer__bottom__sep { color: rgba(255,255,255,0.2); }

@media (max-width: 1100px) {
  .footer__bento__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__bento__cell--brand, .footer__bento__cell--news { grid-column: span 2; }
}
@media (max-width: 700px) {
  .footer__bento__grid { grid-template-columns: 1fr; }
  .footer__bento__cell--brand, .footer__bento__cell--news { grid-column: span 1; }
}

/* =====================================================
   M3 big page — identity moment
   ===================================================== */
.m3page {
  position: relative;
  min-height: 100vh;
  /* Bright rose closing canvas. Was dark wine (#1E1E22 → #3A2530) which
     read too noir for a product reveal. Now: cream → rose-100 → peach,
     same palette as the rest of the site so the closer reads as a
     "final breath" of the brand, not a different mode. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 142, 153, 0.35) 0%, transparent 60%),
    linear-gradient(180deg, #FFF0EE 0%, #FFD8CC 50%, #FFCBA4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 180px 0;
}
/* Fluid trail — real WebGL fluid sim. Sits on top of the section
   gradient. No mask, no opacity cap — let it pop. */
.m3page__bg-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1.0;
}
.m3page__bg {
  /* Hidden — the WebGL fluid is the new backdrop, the PNG was for the
     old dark canvas and competes with it visually. Kept in DOM in case
     we want to bring it back. */
  display: none;
}
.m3page__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  /* 5 information layers (eyebrow, mark+tagline, vitals, CTA, sig) need
     consistent vertical rhythm. Was 48 (only 2 elements then). */
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 3vw, 44px);
  text-align: center;
  padding: 0 32px;
}
.m3page__stack {
  position: absolute;
  width: 18px; height: 18px;
  /* Was rose-200 (on dark) — now rose-500 on the bright pink so the
     corner ticks read crisply as part of the brand framing. */
  border-color: var(--c-rose-500);
  border-style: solid;
  border-width: 0;
  z-index: 3;
  opacity: 0.7;
}
.m3page__stack--tl { top: 32px; left: 32px; border-top-width: 1.5px; border-left-width: 1.5px; }
.m3page__stack--tr { top: 32px; right: 32px; border-top-width: 1.5px; border-right-width: 1.5px; }
.m3page__stack--bl { bottom: 32px; left: 32px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.m3page__stack--br { bottom: 32px; right: 32px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.m3page__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  /* User feedback: accents should look like accents — drop the button style,
     make chips a pure small text label with just a leading dot. */
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* On the new bright bg the chips need a dark muted color, not white. */
  color: rgba(26, 26, 31, 0.55);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  z-index: 3;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.m3page__chip--tl { top: 72px; left: 72px; }
.m3page__chip--tr { top: 72px; right: 72px; }
.m3page__chip--bl { bottom: 72px; left: 72px; }
.m3page__chip--br { bottom: 72px; right: 72px; }
.m3page__chip::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-rose-500);
  opacity: 0.85;
}
.m3page__letter {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  /* Was clamp(72, 11vw, 132); the closer was visually empty so the
     letter was carrying too much weight alone. With 5 information
     layers around it now, downsize so the mark sits as the centerpiece,
     not the entire page. */
  font-size: clamp(64px, 9vw, 110px);
  line-height: 0.9;
  color: var(--c-ink);
  letter-spacing: -0.05em;
  position: relative;
  z-index: 2;
  margin: 0;
  text-shadow: 0 4px 30px rgba(255, 75, 109, 0.22), 0 0 60px rgba(255, 142, 153, 0.18);
}
.m3page__letter::after {
  content: '';
  position: absolute;
  bottom: 0.05em; left: 12%; right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--c-rose-500) 50%, transparent 100%);
  opacity: 0.4;
}

/* ===== L1 — section eyebrow above the M3 mark ===== */
.m3page__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-3);
  z-index: 2;
}
.m3page__eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-rose-500);
  box-shadow: 0 0 0 4px rgba(255, 75, 109, 0.18);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 75, 109, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 75, 109, 0.05); }
}
.m3page__eyebrow__sep { color: var(--c-rose-500); opacity: 0.7; }
.m3page__eyebrow__text { color: var(--c-text-2); }
.m3page__eyebrow__date { color: var(--c-text-3); }

/* ===== L3 — vitals strip (6 metrics with thin verticals between) ===== */
.m3page__vitals {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 44px);
  max-width: 980px;
  margin-top: 8px;
  z-index: 2;
}
.m3page__vital {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 90px;
}
.m3page__vital__k {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.m3page__vital__v {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.m3page__vital__sep {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(26,26,31,0.18) 40%, rgba(26,26,31,0.18) 60%, transparent 100%);
}

/* ===== L4 — dual CTA row ===== */
.m3page__cta-row {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 8px;
  z-index: 2;
}
.m3page__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
.m3page__cta svg { width: 11px; height: 11px; fill: currentColor; transition: transform 0.3s var(--ease); }
.m3page__cta:hover svg { transform: translateX(3px); }
.m3page__cta--primary {
  background: var(--c-ink);
  color: #fff;
}
.m3page__cta--primary:hover { background: var(--c-rose-500); transform: translateY(-2px); }
.m3page__cta--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid rgba(26,26,31,0.18);
}
.m3page__cta--ghost:hover {
  background: rgba(26,26,31,0.06);
  transform: translateY(-2px);
}

/* ===== L5 — signature / build status line ===== */
.m3page__sig {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-3);
  z-index: 2;
}
.m3page__sig__status { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text-2); }
.m3page__sig__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1FBF7F;
  box-shadow: 0 0 8px rgba(31,191,127,0.55);
}
.m3page__sig__sep { opacity: 0.4; }
.m3page__sig__build { color: var(--c-text-3); }

.m3page__tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--c-text-2);
  letter-spacing: -0.005em;
  max-width: 540px;
  margin: 0;
}
.m3page__tagline .accent { color: var(--c-rose-500); }
.m3page__scroll {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-3);
  z-index: 3;
  opacity: 0.75;
}
.m3page__scroll .arr { animation: bounceDown 2.4s var(--ease) infinite; }
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (max-width: 700px) {
  .m3page__chip--tl, .m3page__chip--tr { top: 28px; }
  .m3page__chip--bl, .m3page__chip--br { bottom: 28px; }
  .m3page__chip--tl, .m3page__chip--bl { left: 20px; }
  .m3page__chip--tr, .m3page__chip--br { right: 20px; }
  .m3page__chip { font-size: 8.5px; padding: 5px 9px; letter-spacing: 0.14em; }
  .m3page__stack--tl, .m3page__stack--tr { top: 20px; }
  .m3page__stack--bl, .m3page__stack--br { bottom: 20px; }
  .m3page__stack--tl, .m3page__stack--bl { left: 20px; }
  .m3page__stack--tr, .m3page__stack--br { right: 20px; }
  .m3page { padding: 140px 0; }
}

/* =====================================================
   Cursor — custom cursor
   ===================================================== */
.cursor, .cursor-follower { display: none !important; }

/* =====================================================
   Scroll reveal — section / element entry animation
   ===================================================== */
/* Each main section fades + slides up 24px when it first enters the
   viewport. Tuned to feel responsive (≤ 0.5s) but visible enough that
   a hard section break is no longer a hard cut. The 0.5s duration sits
   between a snap (200ms — too aggressive) and a ponderous reveal
   (1s — feels slow). 24px travel is the editorial sweet spot: large
   enough to read as motion, small enough to never feel like a slide. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Children of a reveal, when individually targeted, get a tighter
   stagger (driven by GSAP ScrollTrigger.batch in main.js). The CSS
   initial state matches what gsap.set() writes inline. */
.reveal-child {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
  will-change: opacity, transform;
}
.reveal-child.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* =====================================================
   Tech-feel motion effects
   - magnetic CTAs (js, no css)
   - decrypted text (js, no css)
   - scroll velocity marquee (js, no css)
   - hero animated grid + mouse beam
   - film grain noise overlay
   ===================================================== */

/* 4a. Hero animated grid — a thin 1px CSS grid that sits behind the
   hero content. Three glowing dots drift on different paths so the
   grid feels alive without dominating. */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(12, 11, 17, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12, 11, 17, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0.85;
}
.hero__grid__dot {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 75, 109, 0.22) 0%, transparent 65%);
  filter: blur(8px);
  opacity: 0.7;
}
.hero__grid__dot--1 { top: 18%;  left: 12%;  animation: heroGridDrift1 18s var(--ease-in-out) infinite alternate; }
.hero__grid__dot--2 { top: 60%;  left: 78%;  animation: heroGridDrift2 24s var(--ease-in-out) infinite alternate; }
.hero__grid__dot--3 { top: 78%;  left: 38%;  animation: heroGridDrift3 21s var(--ease-in-out) infinite alternate; }
@keyframes heroGridDrift1 { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 40px); } }
@keyframes heroGridDrift2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-50px, -30px); } }
@keyframes heroGridDrift3 { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, -50px); } }

/* 4b. Hero mouse beam — a soft radial gradient that follows the
   cursor inside the hero. Brightens the grid it crosses. */
.hero__beam {
  position: absolute;
  top: 0; left: 0;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 75, 109, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  will-change: transform;
}

/* 5. Page film grain — a fixed overlay that sits between the page
   content and the cursor layer. Uses an inline SVG turbulence so we
   don't ship an extra PNG. */
.page__grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3px, 2px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -2px); }
  100% { transform: translate(0, 0); }
}

/* 2. Decrypted text — once the scramble resolves, give "delivered."
   a tiny shimmer so the user notices it just resolved. */
.hero__title em.is-decrypted {
  animation: deliveredShine 1.6s var(--ease-out) 1;
}
@keyframes deliveredShine {
  0%   { filter: drop-shadow(0 0 0 rgba(255, 75, 109, 0)); }
  40%  { filter: drop-shadow(0 0 18px rgba(255, 75, 109, 0.45)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 75, 109, 0)); }
}

/* Magnetic CTA needs transform-style preserved so GSAP translate
   stays clean. The CTAs already have a hover translateY(-2px); we
   override by giving the wrapper transform-style: preserve-3d. */
.hero__cta { transform-style: preserve-3d; will-change: transform; }

/* =========================================================
   6. designspells-style micro-interactions
   ========================================================= */

/* 6a. m3page cursor "calling card" — small label that follows the
   cursor on the closer page, cycles brand phrases every 2.4s. */
.m3page__cursor {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 75, 109, 0.92);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(-100px, -100px);
  transition: opacity 0.25s var(--ease);
  box-shadow: 0 4px 16px -4px rgba(255, 75, 109, 0.5);
  white-space: nowrap;
}
.m3page__cursor.is-on { opacity: 1; }
.m3page__cursor__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: cursorDotPulse 1.4s var(--ease) infinite;
}
.m3page__cursor__txt {
  transition: opacity 0.2s var(--ease);
}
@keyframes cursorDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* 6b. Click ripple — designspells' "click to spawn magic" easter egg.
   A rose ring expands from the click point + 6 brand chars drift up. */
.m3-ripple {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--c-rose-500);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 70;
  animation: rippleExpand 0.85s var(--ease-out) forwards;
}
@keyframes rippleExpand {
  0%   { width: 8px;  height: 8px;  opacity: 0.9; border-width: 1.5px; }
  100% { width: 220px; height: 220px; opacity: 0;  border-width: 0.5px; }
}
.m3-ripple__char {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 70;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-rose-500);
  animation: rippleChar 1.1s var(--ease-out) forwards;
  opacity: 0;
}
@keyframes rippleChar {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.9); }
}

/* 6c. Title cursor tilt — applied by JS, see main.js section 8c.
   perspective + rotateY on the title. The .is-tiltable class is
   added/removed by the rAF loop to keep DOM writes cheap. */
.section__title .title,
.home__hero__column--left .hero__title {
  transform-style: preserve-3d;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .m3page__cursor,
  .m3-ripple,
  .m3-ripple__char { display: none; }
  .section__title .title,
  .home__hero__column--left .hero__title { transform: none !important; }
}

/* ============================================================
   7. FEEL LAYER — translucent / rounded / textured (feel.js)
   ============================================================ */

/* 7a. top scroll progress beam */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  z-index: 9999;
  pointer-events: none;
  background: rgba(255, 75, 109, 0.08);
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg,
    var(--c-rose-500), var(--c-rose-300), var(--c-rose-100));
  box-shadow: 0 0 12px rgba(255, 75, 109, 0.5);
  will-change: transform;
}

/* 7b. feel-card base: float + round + textured shadow transition */
.feel-card {
  position: relative;
  isolation: isolate;
  will-change: transform;
  transform-style: preserve-3d;
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.feel-card:hover {
  box-shadow: var(--glass-shadow-h);
  border-color: rgba(255, 255, 255, 0.8);
}

/* 7c. spotlight — soft cursor-following highlight (soft-light overlay) */
.feel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  mix-blend-mode: soft-light;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.12) 38%,
    transparent 60%);
}
.feel-card:hover::after { opacity: 1; }

/* 7d. flowing border — rose-gradient edge (mask-composite cuts interior, keeps 1px edge) */
.feel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9),
    var(--c-rose-300) 45%,
    transparent 75%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.feel-card:hover::before { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .feel-card::after,
  .feel-card::before { display: none; }
}

/* ============================================================
   8. FEEL LAYER v2 — hero halo / text reveal / CTA sheen (feel.js)
   ============================================================ */

/* 8a. hero logo breathing halo — soft rose glow behind the card, slow breathing */
.hero__logo::before {
  content: "";
  position: absolute;
  inset: -18% -18% -18% -18%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 75, 109, 0.28),
    rgba(255, 142, 153, 0.14) 42%,
    transparent 68%);
  filter: blur(8px);
  animation: logoHalo 6.5s var(--ease) infinite;
}
@keyframes logoHalo {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50%      { transform: scale(1.06); opacity: 0.9; }
}

/* 8b. hero logo first-paint reveal (feel.js adds .is-revealed) */
.hero__logo .h-logo {
  opacity: 0;
  transform: scale(0.86) translateY(8px);
  filter: blur(10px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out);
}
.hero__logo.is-revealed .h-logo {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* 8c. CTA liquid sheen sweep — a soft diagonal sheen on hover */
.hero__cta,
.footer__cta__btn,
.plan__cta {
  position: relative;
  overflow: hidden;
}
.hero__cta > *,
.footer__cta__btn > *,
.plan__cta > * { position: relative; z-index: 1; }
.hero__cta::before,
.footer__cta__btn::before,
.plan__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.45) 55%,
    transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-out);
}
.hero__cta:hover::before,
.footer__cta__btn:hover::before,
.plan__cta:hover::before { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .hero__logo::before { animation: none; }
  .hero__logo .h-logo { opacity: 1; transform: none; filter: none; }
  .hero__cta::before,
  .footer__cta__btn::before,
  .plan__cta::before { display: none; }
}

/* ============================================================
   9. FEEL LAYER v3 — restrained supporting details (no overshadowing)
   ============================================================ */

/* 9a. header scroll condense — faint shadow + logo micro-shrink for "floating-on-top" feel */
.page__header.is-scrolled {
  box-shadow: 0 6px 26px -18px rgba(12, 11, 17, 0.22);
}
.header__logo__img {
  transition: transform 0.4s var(--ease);
}
.page__header.is-scrolled .header__logo__img {
  transform: scale(0.92);
}

/* 9b. footer link hover — underline wipes in from left (left→right scaleX), restrained feedback */
.footer__bento__cell li a {
  display: inline-block;
  position: relative;
  transition: color 0.3s var(--ease);
}
.footer__bento__cell li a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.footer__bento__cell li a:hover::after { transform: scaleX(1); }

/* 9c. keyboard focus ring — rose outline, only on keyboard navigation (not click) */
:focus-visible {
  outline: 2px solid var(--c-rose-400);
  outline-offset: 3px;
  border-radius: 5px;
}

/* 9d. thin scrollbar — rose gradient thumb, narrower for a richer texture */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-rose-300) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--c-rose-400), var(--c-rose-300));
  border: 3px solid var(--c-bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--c-rose-500), var(--c-rose-400));
}

@media (prefers-reduced-motion: reduce) {
  .header__logo__img,
  .footer__bento__cell li a { transition: none; }
  .footer__bento__cell li a::after { transition: none; }
}

/* ============================================================
   10. FEEL LAYER v4 — aesthetic focal (inspired by Linear / Stripe gradient titles)
   ============================================================ */

/* 10a. Max card Linear-style conic rotating glow border — the page's single focal point.
   Note: .plan__card already carries .feel-card, and its ::before/::after are taken by spotlight,
   so the glow rides on a real child .plan__glow to avoid pseudo-element collisions. */
@property --m3-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.plan__card--featured { isolation: isolate; }
.plan__card--featured > *:not(.plan__glow) { position: relative; z-index: 1; }
.plan__glow {
  position: absolute;
  inset: -1.5px;
  z-index: 0;
  border-radius: var(--radius-xl);
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--m3-angle),
    transparent 0%,
    var(--c-rose-500) 12%,
    var(--c-rose-300) 24%,
    transparent 42%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: m3Spin 8s linear infinite;
}
/* soft outer spill — let the spinning highlight bloom slightly past the card edge */
.plan__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--m3-angle),
    transparent 0%,
    rgba(255, 75, 109, 0.55) 14%,
    transparent 38%,
    transparent 100%);
  filter: blur(13px);
  opacity: 0.55;
}
@keyframes m3Spin { to { --m3-angle: 360deg; } }

/* 10b. accent italic gradient text — rose→coral, warm undertone; @supports fallback solid color */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .title em,
  .title i,
  .hero__title em {
    background: linear-gradient(102deg,
      var(--c-rose-500) 0%,
      #FF6E89 42%,
      #FF8A6B 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan__glow { animation: none; }
}
.fcar__section { padding: 120px 0 130px; overflow: hidden; }
.fcar__head { max-width: 640px; margin-bottom: 56px; }
.fcar__title { font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 49px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-ink); }
.fcar__lede { margin-top: 18px; max-width: 32em; color: var(--c-text-2); font-size: 0.99rem; line-height: 1.55; }
.fcar { position: relative; }
.fcar__viewport {
  position: relative; height: min(52vw, 600px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6.5%, #000 93.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6.5%, #000 93.5%, transparent 100%);
}
.fcar__track { position: absolute; inset: 0; }
.fcar__slide {
  position: absolute; top: 50%; left: 50%;
  width: min(62vw, 880px); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
  will-change: transform, opacity; cursor: pointer;
}
.fcar__slide.is-active { cursor: default; }
.fcar__card {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: 0 50px 110px -45px rgba(255, 75, 109, 0.28), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.fcar__card img,
.fcar__card video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease); }
.fcar__slide:not(.is-active) .fcar__card { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.fcar__slide:not(.is-active):hover .fcar__card { transform: scale(1.045); box-shadow: 0 42px 92px -42px rgba(255, 75, 109, 0.45); }
.fcar__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 14px;
  padding: 22px 26px;
  background: linear-gradient(to top, rgba(12,11,17,0.45) 0%, rgba(12,11,17,0) 100%);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.fcar__slide.is-active .fcar__caption { opacity: 1; transform: translateY(0); }
.fcar__caption__no { font-family: var(--f-mono); font-size: 12px; color: #fff; opacity: .85; }
.fcar__caption__name { font-family: var(--f-display); font-weight: 400; font-size: 20px; color: #fff; letter-spacing: -0.01em; }
.fcar__caption__meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: var(--track-caps-xs); text-transform: uppercase; color: #fff; opacity: .7; margin-left: auto; }
.fcar__arrow {
  position: absolute; top: calc(min(52vw, 600px) / 2); transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); color: var(--c-ink);
  cursor: pointer; z-index: 40;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.fcar__arrow:hover { background: var(--c-rose-500); color: #fff; border-color: var(--c-rose-500); }
.fcar__arrow--prev { left: max(24px, calc((100vw - min(62vw, 880px)) / 2 - 74px)); }
.fcar__arrow--next { right: max(24px, calc((100vw - min(62vw, 880px)) / 2 - 74px)); }
.fcar__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.fcar__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.fcar__dots { display: flex; justify-content: center; gap: 10px; margin-top: 44px; }
.fcar__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c-line-soft); transition: width .35s var(--ease), background .35s var(--ease); }
.fcar__dot.is-active { width: 26px; border-radius: 999px; background: var(--c-line-soft); position: relative; overflow: hidden; }
.fcar__dot.is-active::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--c-rose-500); transform-origin: left center;
  animation: fcarDotFill 6s linear forwards;
}
.fcar:hover .fcar__dot.is-active::after { animation-play-state: paused; }
@keyframes fcarDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .fcar__dot.is-active::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 900px) {
  .fcar__section { padding: 80px 0 90px; }
  .fcar__head { margin-bottom: 36px; }
  .fcar__viewport { height: 64vw; }
  .fcar__slide { width: 82vw; }
  .fcar__arrow { display: none; }
  .fcar__caption__meta { display: none; }
  .fcar__dots { margin-top: 28px; }
}