/* ==========================================================================
 * eggt-home 전용 스타일 (격리) — egg-n-partners-landing 이식
 * 원본:
 *   - src/index.css      → :root 변수 + element 리셋을 .design-shell 스코프로 변환
 *   - src/styles/design-variants.css → 아래에 원본 그대로 append (이미 .design-shell 스코프)
 * 모든 규칙은 .design-shell 하위로만 적용됨 → eggt_web 전역/다른 페이지 오염 없음.
 * (index.css 의 전역 `*`/body/a/img/h1~p 리셋은 여기서 .design-shell 로 한정)
 * ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Raleway:wght@500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css");

/* --- base tokens (index.css :root → .design-shell 로 격리) --- */
.design-shell {
	--bg-base: #000000;
	--bg-elevated: #1d1d1f;
	--line-soft: rgba(255, 255, 255, 0.08);
	--line-strong: rgba(255, 255, 255, 0.16);
	--text-primary: #f5f5f7;
	--text-secondary: #86868b;
	--text-muted: #6e6e73;
	--accent-blue: #2997ff;
	--accent-cyan: #64d2ff;
	--accent-violet: #bf5af2;
	--accent-gold: #ffd60a;
	--accent-crimson: #ff375f;
	--radius-xl: 28px;
	--radius-lg: 20px;
	--radius-md: 12px;
	--content-max: 980px;
	--content-wide: 1200px;
	--content-pad: clamp(1.25rem, 4vw, 2.5rem);
	--section-gap: clamp(5rem, 8vw, 8rem);
	--font-ko: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
	--font-en-body: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--font-en-display: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--font-en-header: "Raleway", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--font-body: var(--font-ko);
	--font-display: var(--font-ko);
	--font-header: var(--font-ko);
	--font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	color-scheme: dark;
	letter-spacing: -0.022em;
	font: 17px / 1.47 var(--font-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 언어별 폰트 (eggt_web language prop → .design-shell[data-lang]) */
.design-shell[data-lang="en"] {
	--font-body: var(--font-en-body);
	--font-display: var(--font-en-display);
	--font-header: var(--font-en-header);
}
.design-shell[data-lang="ko"] {
	--font-body: var(--font-ko);
	--font-display: var(--font-ko);
	--font-header: var(--font-ko);
}

/* --- scoped reset (index.css element rules → .design-shell 하위 한정) --- */
.design-shell,
.design-shell *,
.design-shell *::before,
.design-shell *::after {
	box-sizing: border-box;
}
.design-shell a {
	color: inherit;
	text-decoration: none;
}
.design-shell img {
	display: block;
	max-width: 100%;
}
.design-shell ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.design-shell h1,
.design-shell h2,
.design-shell h3,
.design-shell h4,
.design-shell p {
	margin: 0;
}
.design-shell h1,
.design-shell h2,
.design-shell h3 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.04em;
	word-break: keep-all;
	text-wrap: balance;
}
.design-shell p {
	color: var(--text-secondary);
	word-break: keep-all;
	text-wrap: pretty;
}
.design-shell button,
.design-shell input,
.design-shell textarea,
.design-shell select {
	font: inherit;
}

/* --- utils used by imported components (index.css 발췌, 스코프) --- */
.design-shell .focus-outline:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 4px;
	border-radius: 8px;
}
.design-shell .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.design-shell ::selection {
	background: rgba(41, 151, 255, 0.3);
}

/* ==========================================================================
 * 이하 = egg-n-partners-landing/src/styles/design-variants.css 원본 (그대로)
 * (전부 .design-shell / .design-* 스코프라 추가 격리 불필요)
 * ========================================================================== */
/* ==========================================================================
   Design Variants — Base Shell + 9 Preset Overrides
   Each preset has STRUCTURAL differences, not just color swaps.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE SHELL (default = Apple-like dark)
   -------------------------------------------------------------------------- */

.design-shell {
  --design-font-body: var(--font-body);
  --design-font-display: var(--font-display);
  --design-font-mono: var(--font-mono);
  --design-bg: #000000;
  --design-surface: rgba(255, 255, 255, 0.04);
  --design-surface-strong: rgba(255, 255, 255, 0.08);
  --design-text: #f5f5f7;
  --design-muted: rgba(245, 245, 247, 0.72);
  --design-subtle: rgba(245, 245, 247, 0.5);
  --design-border: rgba(255, 255, 255, 0.1);
  --design-accent: #2997ff;
  --design-accent-strong: #0071e3;
  --design-shadow: 0 32px 120px rgba(0, 0, 0, 0.28);
  --design-radius: 24px;
  --design-button-radius: 999px;
  --design-header-radius: var(--design-button-radius);
  --design-header-offset: 96px;
  --design-content: min(1200px, calc(100% - 2 * var(--content-pad) + 3rem));
  --design-section-gap: clamp(4rem, 8vw, 6.5rem);
  min-height: 100vh;
  background: var(--design-bg);
  color: var(--design-text);
  font-family: var(--design-font-body);
}

.design-shell h1,
.design-shell h2,
.design-shell h3,
.design-shell h4 {
  margin: 0;
  color: var(--design-text);
  font-family: var(--design-font-display);
  letter-spacing: -0.028em;
}

.design-shell p {
  margin: 0;
  color: var(--design-muted);
}

.design-main {
  padding-bottom: 6rem;
}

/* --------------------------------------------------------------------------
   2. SHARED LABEL / KICKER TYPOGRAPHY
   -------------------------------------------------------------------------- */

.design-kicker,
.design-page-label,
.design-section__label,
.design-story__index {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  color: var(--design-subtle);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--design-font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */

.design-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--design-border);
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(24px) saturate(150%);
  font-family: var(--font-header);
  /* 리사이즈 시 backdrop-filter 재계산으로 헤더가 잠깐 검게 깜빡이는 Chrome 아티팩트 방지:
     자체 GPU 합성 레이어로 승격(sticky 유지 위해 실제 transform 대신 will-change 만 사용). */
  will-change: transform;
}

.design-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  width: var(--design-content);
  min-height: 96px;
  margin-inline: auto;
}

.design-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-left: -0.35rem;
}

.design-header__brand-logo {
  width: auto;
  height: 72px;
  object-fit: contain;
  flex: 0 0 auto;
}

.design-header__brand-text {
  color: var(--design-text);
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.6rem;
  font-weight: 100;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.design-header__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--design-header-radius);
  border: 1px solid var(--design-border);
  background: var(--design-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.design-header__brand-symbol {
  width: 18px;
  height: 27px;
  object-fit: contain;
}

.design-header__brand-lockup {
  width: auto;
  height: 18px;
  object-fit: contain;
}

.design-header__nav,
.design-header__actions,
.design-header__lang {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.design-header__nav {
  justify-content: center;
}

.design-header__actions {
  justify-content: flex-end;
}

.design-header__lang {
  padding: 0.2rem;
  border: 1px solid var(--design-border);
  border-radius: 999px;
  background: var(--design-surface);
}

.design-header__link,
.design-header__styles,
.design-header__lang-btn,
.design-header__mode-btn,
.design-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.15rem;
  border-radius: var(--design-header-radius);
  color: var(--design-muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

.design-header__link:hover,
.design-header__link.is-active,
.design-header__styles:hover,
.design-header__lang-btn:hover,
.design-header__lang-btn.is-active,
.design-header__mode-btn:hover {
  background: var(--design-surface);
  color: var(--design-text);
}

.design-header__cta {
  background: var(--design-accent);
  color: #ffffff;
}

.design-header__cta:hover {
  opacity: 0.9;
}

.design-header__lang-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  min-width: 42px;
}

.design-header__mode-btn {
  border: 1px solid var(--design-border);
  background: var(--design-surface);
  cursor: pointer;
  gap: 0.3rem;
}

.design-header__mode-icon {
  font-size: 1rem;
  line-height: 1;
}

.design-header__mode-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Hamburger button */
.design-header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--design-border);
  border-radius: var(--design-header-radius);
  background: var(--design-surface);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.design-header__hamburger:hover {
  background: var(--design-surface-strong);
}

.design-header__hamburger-bar,
.design-header__hamburger-bar::before,
.design-header__hamburger-bar::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--design-text);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 180ms ease;
}

.design-header__hamburger-bar {
  position: relative;
}

.design-header__hamburger-bar::before,
.design-header__hamburger-bar::after {
  content: '';
  position: absolute;
  left: 0;
}

.design-header__hamburger-bar::before {
  top: -5.5px;
}

.design-header__hamburger-bar::after {
  top: 5.5px;
}

.design-header__hamburger-bar.is-open {
  background: transparent;
}

.design-header__hamburger-bar.is-open::before {
  top: 0;
  transform: rotate(45deg);
}

.design-header__hamburger-bar.is-open::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Overlay */
.design-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  animation: designFadeIn 200ms ease;
}

/* Drawer */
.design-header__drawer {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 0.5rem;
  border: 1px solid var(--design-border);
  border-radius: 14px;
  background: rgba(18, 18, 20, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: designSlideDown 200ms ease;
  margin-right: calc((100vw - var(--design-content)) / 2);
}

.design-header__drawer-link {
  display: flex;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: rgba(245, 245, 247, 0.82);
  font-size: 0.88rem;
  font-weight: 400;
  transition: background-color 150ms ease, color 150ms ease;
}

.design-header__drawer-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
}

@keyframes designFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes designSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   DESIGN MODE OVERRIDES — light / dark
   Inverts palette tokens regardless of preset.
   -------------------------------------------------------------------------- */

.design-shell[data-design-mode='light'] {
  --design-bg: #ffffff;
  --design-surface: rgba(0, 0, 0, 0.04);
  --design-surface-strong: rgba(0, 0, 0, 0.08);
  --design-text: #1d1d1f;
  --design-muted: rgba(29, 29, 31, 0.72);
  --design-subtle: rgba(29, 29, 31, 0.5);
  --design-border: rgba(0, 0, 0, 0.1);
  --design-shadow: 0 32px 120px rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

.design-shell[data-design-mode='dark'] {
  --design-bg: #000000;
  --design-surface: rgba(255, 255, 255, 0.04);
  --design-surface-strong: rgba(255, 255, 255, 0.08);
  --design-text: #f5f5f7;
  --design-muted: rgba(245, 245, 247, 0.72);
  --design-subtle: rgba(245, 245, 247, 0.5);
  --design-border: rgba(255, 255, 255, 0.1);
  --design-shadow: 0 32px 120px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

.design-shell[data-design-mode='light'] .design-header {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.design-shell[data-design-mode='dark'] .design-header {
  background: rgba(0, 0, 0, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.design-shell[data-design-mode='light'] .design-hero--split {
  background:
    radial-gradient(circle at top right, rgba(41, 151, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #f7f8fb 0%, #ffffff 58%, #fafafa 100%);
}

.design-shell[data-design-mode='dark'] .design-hero--split {
  background:
    radial-gradient(circle at top right, rgba(41, 151, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #050608 0%, #0b0b0d 54%, #000000 100%);
}

.design-shell[data-design-mode='light'] .design-hero--immersive > .pointer-events-none video {
  filter: brightness(0.9) saturate(0.7);
}

.design-shell[data-design-mode='light'] .design-hero--immersive > .pointer-events-none > div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.88) 100%);
}

.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive > .pointer-events-none video,
.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive > .pointer-events-none img,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive > .pointer-events-none video,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive > .pointer-events-none img {
  filter: none;
}

.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive > .pointer-events-none > div,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive > .pointer-events-none > div {
  background: none;
  backdrop-filter: none;
}

.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive .design-kicker,
.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive .design-page-label,
.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive .design-section__label,
.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive .design-hero__copy h1,
.design-shell[data-design-mode='light'] .design-hero--home.design-hero--immersive .design-hero__copy p,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive .design-kicker,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive .design-page-label,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive .design-section__label,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive .design-hero__copy h1,
.design-shell[data-design-mode='light'] .design-hero--subpage.design-hero--immersive .design-hero__copy p {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.design-shell[data-design-mode='light'] .design-hero--immersive .design-kicker,
.design-shell[data-design-mode='light'] .design-hero--immersive .design-page-label,
.design-shell[data-design-mode='light'] .design-hero--immersive .design-section__label,
.design-shell[data-design-mode='light'] .design-hero--immersive .design-hero__copy h1,
.design-shell[data-design-mode='light'] .design-hero--immersive .design-hero__copy p,
.design-shell[data-design-mode='light'] .design-hero--immersive .design-story-summary__item span,
.design-shell[data-design-mode='light'] .design-hero--immersive .design-story-summary__item strong {
  color: #1d1d1f;
}

.design-shell[data-design-mode='light'] .design-hero__copy,
.design-shell[data-design-mode='light'] .design-hero__copy h1,
.design-shell[data-design-mode='light'] .design-hero__copy p,
.design-shell[data-design-mode='light'] .design-hero__copy .design-kicker,
.design-shell[data-design-mode='light'] .design-hero__copy .design-page-label,
.design-shell[data-design-mode='light'] .design-hero__copy .design-section__label,
.design-shell[data-design-mode='light'] .design-story-summary__item span,
.design-shell[data-design-mode='light'] .design-story-summary__item strong {
  color: #1d1d1f;
}

.design-shell[data-design-mode='dark'] .design-hero__copy,
.design-shell[data-design-mode='dark'] .design-hero__copy h1,
.design-shell[data-design-mode='dark'] .design-hero__copy p,
.design-shell[data-design-mode='dark'] .design-hero__copy .design-kicker,
.design-shell[data-design-mode='dark'] .design-hero__copy .design-page-label,
.design-shell[data-design-mode='dark'] .design-hero__copy .design-section__label,
.design-shell[data-design-mode='dark'] .design-story-summary__item span,
.design-shell[data-design-mode='dark'] .design-story-summary__item strong {
  color: #f5f5f7;
}

.design-shell[data-design-mode='light'] .design-card,
.design-shell[data-design-mode='light'] .design-meta-card,
.design-shell[data-design-mode='light'] .design-story,
.design-shell[data-design-mode='light'] .design-hero__preview,
.design-shell[data-design-mode='light'] .design-story-summary--cards .design-story-summary__item {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.design-shell[data-design-mode='dark'] .design-card,
.design-shell[data-design-mode='dark'] .design-meta-card,
.design-shell[data-design-mode='dark'] .design-story,
.design-shell[data-design-mode='dark'] .design-hero__preview,
.design-shell[data-design-mode='dark'] .design-story-summary--cards .design-story-summary__item {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(34, 34, 38, 0.82), rgba(16, 16, 20, 0.78));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.design-shell[data-design-mode='light'] .design-card,
.design-shell[data-design-mode='light'] .design-card h3,
.design-shell[data-design-mode='light'] .design-card p,
.design-shell[data-design-mode='light'] .design-meta-card,
.design-shell[data-design-mode='light'] .design-meta-card strong,
.design-shell[data-design-mode='light'] .design-story,
.design-shell[data-design-mode='light'] .design-story__copy,
.design-shell[data-design-mode='light'] .design-story__copy h2,
.design-shell[data-design-mode='light'] .design-story__copy p,
.design-shell[data-design-mode='light'] .design-story__index,
.design-shell[data-design-mode='light'] .design-section__heading h2,
.design-shell[data-design-mode='light'] .design-section__heading p,
.design-shell[data-design-mode='light'] .design-section__label,
.design-shell[data-design-mode='light'] .design-kicker {
  color: #1d1d1f;
}

.design-shell[data-design-mode='dark'] .design-card,
.design-shell[data-design-mode='dark'] .design-card h3,
.design-shell[data-design-mode='dark'] .design-card p,
.design-shell[data-design-mode='dark'] .design-meta-card,
.design-shell[data-design-mode='dark'] .design-meta-card strong,
.design-shell[data-design-mode='dark'] .design-story,
.design-shell[data-design-mode='dark'] .design-story__copy,
.design-shell[data-design-mode='dark'] .design-story__copy h2,
.design-shell[data-design-mode='dark'] .design-story__copy p,
.design-shell[data-design-mode='dark'] .design-story__index,
.design-shell[data-design-mode='dark'] .design-section__heading h2,
.design-shell[data-design-mode='dark'] .design-section__heading p,
.design-shell[data-design-mode='dark'] .design-section__label,
.design-shell[data-design-mode='dark'] .design-kicker {
  color: #f5f5f7;
}

.design-shell[data-design-mode='light'] .design-button--secondary,
.design-shell[data-design-mode='light'] .design-button--ghost {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #1d1d1f;
}

.design-shell[data-design-mode='dark'] .design-button--primary {
  background: var(--design-accent-strong);
  color: #ffffff;
}

.design-shell[data-design-mode='dark'] .design-button--secondary,
.design-shell[data-design-mode='dark'] .design-button--ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}

.design-shell[data-design-mode='light'] .design-pillar-card__copy,
.design-shell[data-design-mode='light'] .design-pillar-card__copy h3,
.design-shell[data-design-mode='light'] .design-pillar-card__copy span,
.design-shell[data-design-mode='light'] .design-pillar-card__copy .design-section__label {
  color: #f5f5f7;
}

.design-shell[data-design-mode='dark'] .design-footer,
.design-shell[data-design-mode='dark'] .design-footer__columns h3,
.design-shell[data-design-mode='dark'] .design-footer__intro,
.design-shell[data-design-mode='dark'] .design-footer__intro h2 {
  color: #f5f5f7;
}

.design-shell[data-design-mode='dark'] .design-brand-plaque__mark {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   4. HERO — BASE
   -------------------------------------------------------------------------- */

.design-hero {
  position: relative;
  overflow: hidden;
}

.design-hero--immersive {
  min-height: calc(100vh - var(--design-header-offset));
  min-height: calc(100svh - var(--design-header-offset));
  min-height: calc(100dvh - var(--design-header-offset));
  display: grid;
  align-items: end;
  padding: 7.5rem 0 3.5rem;
}

/* Subpage immersive hero — shorter */
.design-hero--subpage.design-hero--immersive {
  min-height: calc(100vh - var(--design-header-offset));
  min-height: calc(100svh - var(--design-header-offset));
  min-height: calc(100dvh - var(--design-header-offset));
  padding-bottom: 3rem;
}

/* Video backdrop containment inside immersive hero */
.design-hero--immersive > .pointer-events-none {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.design-hero--immersive > .pointer-events-none video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-hero--split {
  padding: 8rem 0 4rem;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.design-hero__inner {
  position: relative;
  z-index: 1;
  width: var(--design-content);
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
}

.design-hero--immersive .design-hero__inner {
  align-items: end;
}

.design-hero--split .design-hero__inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.8fr);
  align-items: center;
}

.design-hero__copy {
  display: grid;
  gap: 1.05rem;
  max-width: 48rem;
}

.design-hero__copy h1 {
  font-size: clamp(2.15rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  white-space: pre-line;
  text-wrap: balance;
}

.design-hero__copy p {
  max-width: 38rem;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
}

.design-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.design-hero__meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 50rem;
}

.design-hero__meta-row--stack {
  grid-template-columns: 1fr;
  max-width: 26rem;
}

.design-hero__meta-row--rail {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.design-meta-card {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--design-border);
  border-radius: var(--design-radius);
  background: var(--design-surface);
  backdrop-filter: blur(10px) saturate(125%);
}

.design-meta-card strong {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--design-subtle);
}

.design-meta-card p {
  color: var(--design-text);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.design-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.28rem;
  border-radius: var(--design-button-radius);
  border: 1px solid transparent;
  font-size: 0.93rem;
  font-weight: 500;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.design-button:hover {
  transform: translateY(-1px);
}

.design-button--primary {
  background: var(--design-accent-strong);
  color: #ffffff;
}

.design-button--secondary {
  border-color: var(--design-border);
  background: var(--design-surface);
  color: var(--design-text);
}

.design-button--ghost {
  color: var(--design-accent);
}

/* --------------------------------------------------------------------------
   6. HERO PREVIEW (split mode)
   -------------------------------------------------------------------------- */

.design-hero__preview {
  overflow: hidden;
  border-radius: calc(var(--design-radius) + 6px);
  border: 1px solid var(--design-border);
  background: var(--design-surface);
  box-shadow: var(--design-shadow);
}

.design-hero__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.design-hero__scroll-cue {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0 1rem;
  margin: 1rem auto 0;
  border: 1px solid var(--design-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--design-surface) 88%, transparent);
  color: var(--design-text);
  font-size: 0.82rem;
  backdrop-filter: blur(20px) saturate(140%);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.design-hero__scroll-cue:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--design-accent) 38%, var(--design-border));
}

/* --------------------------------------------------------------------------
   7. SECTIONS
   -------------------------------------------------------------------------- */

.design-section--story {
  padding-top: 2.5rem;
}

.design-section {
  width: var(--design-content);
  margin-inline: auto;
  padding: var(--design-section-gap) 0 0;
}

.design-section--narrow {
  width: min(840px, calc(100% - 2 * var(--content-pad)));
}

.design-section__heading {
  display: grid;
  gap: 0.85rem;
  max-width: 48rem;
}

.design-section__heading h2 {
  font-size: clamp(1.8rem, 3.8vw, 3.4rem);
  line-height: 1.06;
  text-wrap: balance;
  white-space: pre-line;
}

.design-section__heading p {
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.68;
}

.design-section__heading--center {
  text-align: center;
  margin-inline: auto;
}

.design-section__heading--partners {
  margin-bottom: 1.5rem;
}

.design-section--values {
  padding-bottom: clamp(3.5rem, 7vw, 5.75rem);
}

.design-section--values .design-section__heading {
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

.design-section--values .design-grid--three {
  gap: 1.35rem;
}

.design-section--proof {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.design-section--proof .design-grid--proof {
  gap: 1.35rem;
}

/* --------------------------------------------------------------------------
   8. GRID
   -------------------------------------------------------------------------- */

.design-grid {
  display: grid;
  gap: 1.15rem;
}

.design-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.design-grid--proof {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.design-pillar-grid--feature-left {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.design-pillar-grid--feature-left .design-pillar-card:first-child {
  grid-row: span 2;
  min-height: 100%;
}

.design-pillar-grid--feature-right {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.design-pillar-grid--feature-right .design-pillar-card:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 100%;
}

.design-pillar-grid--stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-pillar-grid--stack .design-pillar-card:first-child {
  grid-column: 1 / -1;
  min-height: 320px;
}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */

.design-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.55rem;
  border: 1px solid var(--design-border);
  border-radius: calc(var(--design-radius) + 4px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface) 92%, white 8%), var(--design-surface));
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.18);
}

.design-card h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.15;
}

.design-card p {
  line-height: 1.66;
}

.design-pillar-card {
  position: relative;
  display: grid;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--design-border);
  border-radius: calc(var(--design-radius) + 8px);
  background: var(--design-surface);
  box-shadow: var(--design-shadow);
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.design-pillar-card:hover,
.design-pillar-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--design-accent) 40%, var(--design-border));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.design-pillar-card img,
.design-pillar-card__overlay,
.design-pillar-card__copy {
  grid-area: 1 / 1;
}

.design-pillar-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-pillar-card__overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.46) 54%, rgba(0, 0, 0, 0.86)),
    radial-gradient(circle at top, color-mix(in srgb, var(--design-accent) 22%, transparent), transparent 32%);
}

.design-pillar-card__copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 0.75rem;
  padding: 1.55rem;
}

.design-pillar-card__copy h3 {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  text-wrap: balance;
  white-space: pre-line;
}

.design-pillar-card__copy span:last-child {
  color: var(--design-text);
  font-size: 0.92rem;
}

.design-grid--proof-spotlight .design-card:first-child {
  grid-column: 1 / -1;
}

.design-grid--proof-ledger {
  grid-template-columns: 1fr;
  gap: 0;
}

.design-grid--proof-ledger .design-card {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
  background: transparent;
}

/* --------------------------------------------------------------------------
   10. STORIES
   -------------------------------------------------------------------------- */

.design-story-list {
  display: grid;
  gap: 1.4rem;
}

.design-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.8rem;
  align-items: center;
  padding: 1.4rem;
  border: 1px solid var(--design-border);
  border-radius: calc(var(--design-radius) + 2px);
  background: var(--design-surface);
  box-shadow: var(--design-shadow);
}

.design-story.is-reverse .design-story__media {
  order: 2;
}

.design-story.is-reverse .design-story__copy {
  order: 1;
}

.design-story__media {
  overflow: hidden;
  border-radius: var(--design-radius);
}

.design-story__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.design-story__copy {
  display: grid;
  gap: 0.85rem;
  max-width: 34rem;
}

.design-story__copy h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.1;
  text-wrap: balance;
}

.design-story__copy p {
  line-height: 1.68;
}

.design-story-summary {
  display: grid;
  gap: 0.7rem;
  max-width: 40rem;
}

.design-story-summary--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 56rem;
}

.design-story-summary--cards .design-story-summary__item {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--design-border);
  border-radius: calc(var(--design-radius) - 2px);
  background: var(--design-surface);
}

.design-story-summary__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding-top: 0.7rem;
  border-top: 1px solid var(--design-border);
}

.design-story-summary__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.design-story-summary--cards .design-story-summary__item:first-child {
  padding-top: 0.85rem;
  border-top: 1px solid var(--design-border);
}

.design-story-summary__item span {
  color: var(--design-subtle);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.design-story-summary__item strong {
  line-height: 1.4;
}

.design-story-summary__item strong {
  font-size: 0.98rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */

.design-footer {
  width: var(--design-content);
  margin: 6rem auto 0;
  padding: 2.4rem 0 3rem;
  border-top: 1px solid var(--design-border);
}

.design-footer__inner {
  display: grid;
  gap: 1.6rem;
}

.design-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 2rem;
  align-items: end;
}

.design-footer__intro {
  display: grid;
  gap: 0.8rem;
  max-width: 42rem;
}

.design-footer__logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  justify-self: start;
}

.design-footer__intro h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 0.98;
}

.design-footer__nav {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.design-footer__nav h3 {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--design-subtle);
}

.design-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.design-footer__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.95rem;
  border: 1px solid var(--design-border);
  border-radius: 999px;
  background: var(--design-surface);
  color: var(--design-text);
  font-size: 0.88rem;
}

.design-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--design-border);
}

.design-footer__meta {
  color: var(--design-subtle);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-footer__social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.design-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--design-border);
  border-radius: 50%;
  background: var(--design-surface);
  color: var(--design-text);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.design-footer__social-link:hover {
  background: var(--design-accent);
  border-color: var(--design-accent);
}

.design-footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.design-footer__social-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.design-footer__social-icon--fallback {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. INDEX PAGE (style gallery)
   -------------------------------------------------------------------------- */

.design-index {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(41, 151, 255, 0.1), transparent 28%),
    #050608;
  color: #f5f5f7;
}

.design-index__inner {
  width: min(1200px, calc(100% - 2 * var(--content-pad)));
  margin-inline: auto;
  padding: 7rem 0 5rem;
  display: grid;
  gap: 1.25rem;
}

.design-index__inner h1 {
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 0.94;
}

.design-index__inner p {
  max-width: 42rem;
  color: rgba(245, 245, 247, 0.74);
}

.design-index__group {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.design-index__group-head {
  display: grid;
  gap: 0.25rem;
}

.design-index__group-head h2 {
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: #ffffff;
}

.design-index__legacy {
  margin-top: 0.25rem;
}

.design-index__legacy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 245, 247, 0.88);
  font-size: 0.92rem;
}

.design-index__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.design-index__card {
  display: grid;
  gap: 0.7rem;
  padding: 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.design-index__card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.design-index__card-head img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.design-index__card strong {
  color: #ffffff;
  font-size: 1.1rem;
}

.design-index__card span {
  color: rgba(245, 245, 247, 0.68);
  font-size: 0.92rem;
  line-height: 1.5;
}

.design-partner-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.design-section--partners {
  width: 100%;
  margin-inline: 0;
  padding: clamp(4.5rem, 9vw, 7.25rem) 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #fbfbfc 0%, #f4f6f8 100%);
  box-shadow: none;
}

.design-section--partners > .design-section__heading,
.design-section--partners > .design-partner-strip {
  width: var(--design-content);
  margin-inline: auto;
}

.design-section--partners .design-section__heading h2,
.design-section--partners .design-section__heading p,
.design-shell[data-design-mode='dark'] .design-section--partners .design-section__heading h2,
.design-shell[data-design-mode='dark'] .design-section--partners .design-section__heading p {
  color: #1d1d1f;
}

.design-section--partners .design-section__heading--partners {
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.design-partner-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.design-brand-plaque,
.design-partner-showcase__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--design-radius) + 4px);
  border: 1px solid var(--design-border);
  background: var(--design-surface);
  box-shadow: var(--design-shadow);
}

.design-brand-plaque {
  display: grid;
  align-content: space-between;
  gap: 1.5rem;
  min-height: 240px;
  padding: 1.5rem;
}

.design-brand-plaque__mark {
  width: min(100%, 340px);
  height: auto;
  object-fit: contain;
}

.design-brand-plaque__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.design-brand-plaque__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--design-border);
  background: var(--design-surface-strong);
  color: var(--design-text);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.design-partner-showcase__media {
  min-height: 240px;
}

.design-partner-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-partner-strip--dense {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.design-partner-strip--showcase .design-partner-logo:first-child,
.design-partner-strip--showcase .design-partner-logo:nth-child(2) {
  grid-column: span 2;
}

.design-section--partners .design-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 0.45rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.design-section--partners .design-partner-logo:hover,
.design-section--partners .design-partner-logo:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(41, 151, 255, 0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.design-section--partners .design-partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.6rem;
  transition: transform 180ms ease;
}

.design-section--partners .design-partner-logo:hover img,
.design-section--partners .design-partner-logo:focus-visible img {
  transform: scale(1.02);
}

.design-social-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1rem;
}

.design-social-grid > * {
  min-width: 0;
}

.design-social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 32px;
  padding: 0 0.72rem 0 0.58rem;
  border: 1px solid var(--design-border);
  border-radius: 999px;
  background: var(--design-surface);
  color: var(--design-text);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.design-section--partners .design-social-chip {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: #1d1d1f;
}

.design-social-chip:hover,
.design-social-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(41, 151, 255, 0.22);
  background: color-mix(in srgb, var(--design-surface) 88%, white 12%);
}

.design-section--partners .design-social-chip:hover,
.design-section--partners .design-social-chip:focus-visible {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.design-social-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.design-social-chip__icon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.design-social-chip__icon--fallback {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-social-chip__label {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.design-section--partners .design-social-chip__label {
  color: #1d1d1f;
}

.design-social-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--design-border);
  background: var(--design-surface-strong);
}

.design-social-card__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.design-social-card__icon--fallback {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-social-card__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.design-social-card__copy h3 {
  min-width: 0;
  color: var(--design-text);
}

.design-social-card__copy p {
  color: var(--design-subtle);
}

.design-social-grid--dense {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.design-social-grid--showcase {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
  padding: 1.8rem;
  border: 1px solid var(--design-border);
  border-radius: calc(var(--design-radius) + 6px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--design-surface) 88%, white 12%), var(--design-surface));
  box-shadow: var(--design-shadow);
}

.design-cta-band--actions-only {
  grid-template-columns: 1fr;
  justify-items: center;
}

.design-cta-band h2 {
  margin-top: 0.5rem;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 0.96;
}

.design-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.design-cta-band--actions-only .design-cta-band__actions {
  justify-content: center;
}

/* ==========================================================================
   PRESET 1 — APPLE (dark, immersive hero)
   Pure black, SF Pro, centered sections, gradient cards with NO borders,
   generous whitespace, clean alternating stories.
   ========================================================================== */

[data-design-preset='apple'] {
  --design-font-body:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --design-font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --design-bg: #000000;
  --design-surface: rgba(255, 255, 255, 0.035);
  --design-surface-strong: rgba(255, 255, 255, 0.08);
  --design-text: #f5f5f7;
  --design-muted: rgba(245, 245, 247, 0.72);
  --design-subtle: rgba(245, 245, 247, 0.5);
  --design-accent: #2997ff;
  --design-accent-strong: #0071e3;
  --design-border: rgba(255, 255, 255, 0.06);
  --design-shadow: 0 20px 56px rgba(0, 0, 0, 0.16);
  --design-radius: 20px;
  --design-button-radius: 980px;
  --design-header-radius: 999px;
}

[data-design-preset='apple'] .design-header {
  border-bottom: none;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(18px) saturate(150%);
}

/* Centered hero text, generous whitespace */
[data-design-preset='apple'] .design-hero--immersive {
  padding-bottom: 4rem;
}

[data-design-preset='apple'] .design-hero__copy {
  max-width: 52rem;
}

[data-design-preset='apple'] .design-hero__copy h1 {
  font-size: clamp(2rem, 4.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

/* Center section headings */
[data-design-preset='apple'] .design-section__heading {
  text-align: center;
  margin-inline: auto;
}

/* Cards: gradient background, NO borders, rounded */
[data-design-preset='apple'] .design-card {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-design-preset='apple'] .design-card h3 {
  font-weight: 600;
}

/* Stories: clean alternating, no visible container border */
[data-design-preset='apple'] .design-story {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 1.8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-design-preset='apple'] .design-story__media {
  border-radius: 16px;
}

[data-design-preset='apple'] .design-story__media img {
  border-radius: 16px;
}

[data-design-preset='apple'] .design-button--primary {
  border-radius: 980px;
  padding: 0 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
}

[data-design-preset='apple'] .design-button--secondary {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

[data-design-preset='apple'] .design-button--ghost {
  color: var(--design-accent);
}

[data-design-preset='apple'] .design-hero--subpage + .design-section--story,
[data-design-preset='apple'] .design-hero + .design-section:first-of-type {
  margin-top: -0.75rem;
}

[data-design-preset='apple'] .design-meta-card,
[data-design-preset='apple'] .design-pillar-card,
[data-design-preset='apple'] .design-brand-plaque,
[data-design-preset='apple'] .design-partner-showcase__media,
[data-design-preset='apple'] .design-cta-band,
[data-design-preset='apple'] .design-footer__nav-link,
[data-design-preset='apple'] .design-footer__social-link {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-card,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-story,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-meta-card,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-pillar-card,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-brand-plaque,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-partner-showcase__media,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-cta-band,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-footer__nav-link,
.design-shell[data-design-mode='dark'][data-design-preset='apple'] .design-footer__social-link {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(38, 38, 42, 0.84), rgba(18, 18, 22, 0.8));
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   PRESET 2 — TESLA (light, immersive hero)
   White bg, fullscreen image stories (bg-image, NO separate <img>),
   centered layouts, wide buttons, sharp corners (0 radius on buttons).
   ========================================================================== */

[data-design-preset='tesla'] {
  --design-font-body:
    "Universal Sans Text", "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --design-font-display:
    "Universal Sans Display", "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --design-bg: #ffffff;
  --design-surface: rgba(255, 255, 255, 0.96);
  --design-surface-strong: #f4f4f4;
  --design-text: #171a20;
  --design-muted: #393c41;
  --design-subtle: #5c5e62;
  --design-border: rgba(23, 26, 32, 0.1);
  --design-accent: #3e6ae1;
  --design-accent-strong: #3e6ae1;
  --design-shadow: none;
  --design-radius: 0px;
  --design-button-radius: 4px;
  --design-header-radius: 4px;
}

[data-design-preset='tesla'] .design-header {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: transparent;
  backdrop-filter: blur(20px);
}

/* Hero: full-screen video with centered white text overlay */
[data-design-preset='tesla'] .design-hero--immersive {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-items: center;
  padding: 0;
}

[data-design-preset='tesla'] .design-hero--immersive .design-hero__inner {
  align-items: center;
  justify-items: center;
  text-align: center;
}

[data-design-preset='tesla'] .design-hero__copy {
  align-items: center;
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

[data-design-preset='tesla'] .design-hero__copy h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

[data-design-preset='tesla'] .design-hero__actions {
  justify-content: center;
}

/* Immersive hero text forced to white */
[data-design-preset='tesla'] .design-hero--immersive .design-kicker,
[data-design-preset='tesla'] .design-hero--immersive .design-page-label,
[data-design-preset='tesla'] .design-hero--immersive .design-section__label,
[data-design-preset='tesla'] .design-hero--immersive .design-hero__copy h1,
[data-design-preset='tesla'] .design-hero--immersive .design-hero__copy p {
  color: #ffffff;
}

/* Wide buttons, sharp corners */
[data-design-preset='tesla'] .design-button {
  min-width: 220px;
  min-height: 40px;
  padding: 0 2.5rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-design-preset='tesla'] .design-button--primary {
  background: rgba(23, 26, 32, 0.72);
  backdrop-filter: blur(6px);
  color: #ffffff;
}

[data-design-preset='tesla'] .design-button--secondary {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  color: #171a20;
}

[data-design-preset='tesla'] .design-button--ghost {
  border: 1px solid rgba(23, 26, 32, 0.14);
  border-radius: 4px;
  color: #393c41;
}

/* Section headings centered */
[data-design-preset='tesla'] .design-section__heading {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

/* Cards: clean white, minimal */
[data-design-preset='tesla'] .design-card {
  border: 1px solid rgba(23, 26, 32, 0.06);
  border-radius: 0;
  background: #f4f4f4;
  padding: 2rem;
  box-shadow: none;
}

[data-design-preset='tesla'] .design-card h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Stories: fullscreen background-image, NO separate image element */
[data-design-preset='tesla'] .design-section--story {
  width: 100%;
  padding-top: 0;
}

[data-design-preset='tesla'] .design-story-list {
  gap: 0;
}

[data-design-preset='tesla'] .design-story {
  min-height: 100svh;
  grid-template-columns: 1fr;
  align-items: end;
  justify-items: center;
  padding: 7rem var(--content-pad) 4rem;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(23, 26, 32, 0.05) 0%, rgba(23, 26, 32, 0.6) 100%),
    var(--story-image) center / cover no-repeat;
  box-shadow: none;
}

[data-design-preset='tesla'] .design-story__media {
  display: none;
}

[data-design-preset='tesla'] .design-story__copy {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

[data-design-preset='tesla'] .design-story__index {
  display: none;
}

[data-design-preset='tesla'] .design-story__copy h2,
[data-design-preset='tesla'] .design-story__copy p {
  color: #ffffff;
}

[data-design-preset='tesla'] .design-story__copy h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
}

[data-design-preset='tesla'] .design-story__copy p {
  max-width: 42rem;
  margin-inline: auto;
}

/* ==========================================================================
   PRESET 3 — SPACEX (dark, immersive hero)
   Pure black, ALL CAPS everything, condensed font, 0px radius everywhere.
   Cards = NO background/border, vertical list with top border lines.
   Stories = fullscreen bg-image, left-aligned, mission-briefing feel.
   ========================================================================== */

[data-design-preset='spacex'] {
  --design-font-body:
    "D-DIN", "DIN Alternate", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --design-font-display:
    "D-DIN-Bold", "D-DIN", "DIN Alternate", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --design-bg: #000000;
  --design-surface: transparent;
  --design-surface-strong: rgba(255, 255, 255, 0.04);
  --design-text: #f0f0fa;
  --design-muted: rgba(240, 240, 250, 0.78);
  --design-subtle: rgba(240, 240, 250, 0.45);
  --design-border: rgba(240, 240, 250, 0.16);
  --design-accent: #f0f0fa;
  --design-accent-strong: rgba(240, 240, 250, 0.1);
  --design-shadow: none;
  --design-radius: 0px;
  --design-button-radius: 0px;
  --design-header-radius: 0px;
}

/* ALL CAPS everything */
[data-design-preset='spacex'] .design-shell h1,
[data-design-preset='spacex'] .design-shell h2,
[data-design-preset='spacex'] .design-shell h3,
[data-design-preset='spacex'] .design-shell h4,
[data-design-preset='spacex'] .design-kicker,
[data-design-preset='spacex'] .design-page-label,
[data-design-preset='spacex'] .design-section__label,
[data-design-preset='spacex'] .design-story__index,
[data-design-preset='spacex'] .design-button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Header: transparent gradient, no border, no blur — minimal chrome */
[data-design-preset='spacex'] .design-header {
  border-bottom: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0));
  backdrop-filter: none;
}

/* Hero: full height, left-aligned text */
[data-design-preset='spacex'] .design-hero--immersive {
  padding-bottom: 4rem;
}

[data-design-preset='spacex'] .design-hero__copy h1 {
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 0.95;
}

/* Buttons: outlined, all same treatment — minimal */
[data-design-preset='spacex'] .design-button {
  min-height: 44px;
  padding: 0 1.8rem;
  border: 1px solid rgba(240, 240, 250, 0.35);
  border-radius: 0;
  background: transparent;
  color: #f0f0fa;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

[data-design-preset='spacex'] .design-button--primary {
  background: rgba(240, 240, 250, 0.08);
}

[data-design-preset='spacex'] .design-button--primary:hover {
  background: rgba(240, 240, 250, 0.14);
}

[data-design-preset='spacex'] .design-button--secondary,
[data-design-preset='spacex'] .design-button--ghost {
  background: transparent;
  color: #f0f0fa;
}

/* Cards: NO background, NO border — vertical list with TOP border lines only */
[data-design-preset='spacex'] .design-grid--three,
[data-design-preset='spacex'] .design-grid--proof {
  grid-template-columns: 1fr;
  gap: 0;
}

[data-design-preset='spacex'] .design-card {
  padding: 1.75rem 0;
  border: none;
  border-top: 1px solid var(--design-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-design-preset='spacex'] .design-card h3 {
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-design-preset='spacex'] .design-grid > :last-child {
  border-bottom: 1px solid var(--design-border);
}

/* Stories: fullscreen bg-image, LEFT-aligned text, mission-briefing feel */
[data-design-preset='spacex'] .design-section--story {
  width: 100%;
  padding-top: 0;
}

[data-design-preset='spacex'] .design-story-list {
  gap: 0;
}

[data-design-preset='spacex'] .design-story {
  min-height: 100svh;
  grid-template-columns: 1fr;
  align-items: end;
  padding: 7rem var(--content-pad) 4rem;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.75) 100%),
    var(--story-image) center / cover no-repeat;
  box-shadow: none;
}

[data-design-preset='spacex'] .design-story__media {
  display: none;
}

[data-design-preset='spacex'] .design-story__copy {
  max-width: 36rem;
}

[data-design-preset='spacex'] .design-story__copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

[data-design-preset='spacex'] .design-story__copy h2,
[data-design-preset='spacex'] .design-story__copy p,
[data-design-preset='spacex'] .design-story__index {
  color: #f0f0fa;
}

[data-design-preset='spacex'] .design-story__index {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: rgba(240, 240, 250, 0.6);
}

/* ==========================================================================
   PRESET 4 — VERCEL (light, split hero)
   White bg, ultra-precise, fine 1px borders everywhere.
   Tight letter spacing (-0.06em). Monospace labels, no uppercase.
   Primary button = black bg.
   ========================================================================== */

[data-design-preset='vercel'] {
  --design-font-body:
    "Geist", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-font-display:
    "Geist", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-bg: #ffffff;
  --design-surface: #ffffff;
  --design-surface-strong: #fafafa;
  --design-text: #171717;
  --design-muted: #4d4d4d;
  --design-subtle: #666666;
  --design-border: rgba(0, 0, 0, 0.08);
  --design-accent: #0072f5;
  --design-accent-strong: #171717;
  --design-shadow:
    rgba(0, 0, 0, 0.08) 0 0 0 1px,
    rgba(0, 0, 0, 0.04) 0 12px 34px -24px;
  --design-radius: 8px;
  --design-button-radius: 6px;
  --design-header-radius: 6px;
}

[data-design-preset='vercel'] .design-header {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(16px) saturate(120%);
}

/* Tight letter spacing on headings */
[data-design-preset='vercel'] .design-shell h1,
[data-design-preset='vercel'] .design-shell h2 {
  letter-spacing: -0.06em;
  font-weight: 700;
}

[data-design-preset='vercel'] .design-shell h3 {
  letter-spacing: -0.04em;
  font-weight: 600;
}

/* Labels: monospace, no uppercase */
[data-design-preset='vercel'] .design-kicker,
[data-design-preset='vercel'] .design-page-label,
[data-design-preset='vercel'] .design-section__label,
[data-design-preset='vercel'] .design-story__index {
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--design-font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--design-subtle);
}

/* Split hero: text left, compact */
[data-design-preset='vercel'] .design-hero--split {
  padding: 6rem 0 4rem;
  background: #ffffff;
}

[data-design-preset='vercel'] .design-hero__copy {
  max-width: 38rem;
}

[data-design-preset='vercel'] .design-hero__copy h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.8rem);
  line-height: 0.92;
}

[data-design-preset='vercel'] .design-hero__copy p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666666;
}

/* Hero preview: precise 1px border */
[data-design-preset='vercel'] .design-hero__preview {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    rgba(0, 0, 0, 0.06) 0 0 0 1px,
    rgba(0, 0, 0, 0.04) 0 16px 40px -20px;
}

/* Cards: clean white with subtle outline, fine border */
[data-design-preset='vercel'] .design-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 1.5rem;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  box-shadow:
    rgba(0, 0, 0, 0.06) 0 0 0 1px,
    rgba(0, 0, 0, 0.03) 0 8px 24px -16px;
}

/* Stories: clean with borders */
[data-design-preset='vercel'] .design-story {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    rgba(0, 0, 0, 0.06) 0 0 0 1px,
    rgba(0, 0, 0, 0.03) 0 8px 24px -16px;
}

/* Primary button: black background */
[data-design-preset='vercel'] .design-button--primary {
  background: #171717;
  color: #ffffff;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.88rem;
}

[data-design-preset='vercel'] .design-button--secondary {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #ffffff;
  color: #171717;
}

/* ==========================================================================
   PRESET 5 — SUPERHUMAN (light, split hero)
   Warm beige/purple gradient hero with dark top section.
   Purple accent, cream/warm card backgrounds.
   Hero: dark gradient top → white bottom. Text WHITE over dark area.
   Preview image floating with shadow.
   ========================================================================== */

[data-design-preset='superhuman'] {
  --design-font-body:
    "Super Sans VF", "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --design-font-display:
    "Super Sans VF", "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --design-bg: #ffffff;
  --design-surface: #ffffff;
  --design-surface-strong: #f6f3ee;
  --design-text: #292827;
  --design-muted: rgba(41, 40, 39, 0.78);
  --design-subtle: rgba(41, 40, 39, 0.52);
  --design-border: #dcd7d3;
  --design-accent: #714cb6;
  --design-accent-strong: #5c3d99;
  --design-shadow: 0 30px 90px rgba(27, 25, 56, 0.12);
  --design-radius: 16px;
  --design-button-radius: 8px;
  --design-header-radius: 8px;
}

[data-design-preset='superhuman'] .design-header {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(220, 215, 211, 0.5);
  backdrop-filter: blur(20px) saturate(130%);
}

[data-design-preset='superhuman'] .design-shell h1,
[data-design-preset='superhuman'] .design-shell h2,
[data-design-preset='superhuman'] .design-shell h3 {
  line-height: 0.96;
  font-weight: 600;
}

/* Hero: dark gradient top half, white bottom half */
[data-design-preset='superhuman'] .design-hero--split {
  padding: 7rem 0 5rem;
  background:
    radial-gradient(ellipse at top right, rgba(113, 76, 182, 0.2), transparent 30%),
    linear-gradient(180deg, #1b1938 0%, #2a2553 36%, #ffffff 36%, #ffffff 100%);
}

/* Hero text = WHITE over the dark area */
[data-design-preset='superhuman'] .design-hero__copy {
  color: #ffffff;
}

[data-design-preset='superhuman'] .design-hero__copy h1 {
  color: #ffffff;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  letter-spacing: -0.035em;
}

[data-design-preset='superhuman'] .design-hero__copy p,
[data-design-preset='superhuman'] .design-hero__copy .design-kicker,
[data-design-preset='superhuman'] .design-hero__copy .design-page-label,
[data-design-preset='superhuman'] .design-hero__copy .design-section__label {
  color: rgba(255, 255, 255, 0.85);
}

/* Preview image: elevated/floating with shadow */
[data-design-preset='superhuman'] .design-hero__preview {
  transform: translateY(2.5rem);
  border: none;
  border-radius: 20px;
  box-shadow:
    0 40px 100px rgba(27, 25, 56, 0.22),
    0 16px 40px rgba(27, 25, 56, 0.14);
}

/* Primary button: warm cream on dark hero */
[data-design-preset='superhuman'] .design-button--primary {
  background: #e9e5dd;
  color: #292827;
  font-weight: 600;
}

[data-design-preset='superhuman'] .design-button--secondary {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Cards: warm cream/beige backgrounds with warm shadows */
[data-design-preset='superhuman'] .design-card {
  border: 1px solid rgba(220, 215, 211, 0.6);
  border-radius: 16px;
  padding: 1.6rem;
  background: #faf8f5;
  box-shadow:
    0 12px 40px rgba(27, 25, 56, 0.06),
    0 4px 12px rgba(27, 25, 56, 0.04);
}

[data-design-preset='superhuman'] .design-section--values .design-card {
  background: linear-gradient(180deg, #f9f6f1, #f5f1ea);
}

/* Stories: warm shadow system */
[data-design-preset='superhuman'] .design-story {
  border: 1px solid rgba(220, 215, 211, 0.5);
  border-radius: 18px;
  background: #faf8f5;
  box-shadow:
    0 20px 60px rgba(27, 25, 56, 0.08),
    0 6px 20px rgba(27, 25, 56, 0.05);
}

[data-design-preset='superhuman'] .design-story__media {
  border-radius: 12px;
}

/* Proof cards: subtle purple top accent */
[data-design-preset='superhuman'] .design-section--proof .design-card {
  border-top: 2px solid rgba(113, 76, 182, 0.3);
}

/* ==========================================================================
   PRESET 6 — COINBASE (light, split hero)
   Clean white, blue accent (#0052ff), tall pill buttons (56px radius).
   Proof/track-record cards: DARK bg (inverted) for contrast.
   Finance-first clarity, bold CTAs.
   ========================================================================== */

[data-design-preset='coinbase'] {
  --design-font-body:
    "Coinbase Sans", "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --design-font-display:
    "Coinbase Display", "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --design-bg: #ffffff;
  --design-surface: #ffffff;
  --design-surface-strong: #eef0f3;
  --design-text: #0a0b0d;
  --design-muted: #5b616e;
  --design-subtle: #5b616e;
  --design-border: rgba(91, 97, 110, 0.2);
  --design-accent: #0052ff;
  --design-accent-strong: #0052ff;
  --design-shadow: none;
  --design-radius: 12px;
  --design-button-radius: 56px;
  --design-header-radius: 12px;
}

[data-design-preset='coinbase'] .design-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(91, 97, 110, 0.12);
  backdrop-filter: blur(16px);
}

[data-design-preset='coinbase'] .design-shell h1 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

[data-design-preset='coinbase'] .design-shell h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Split hero: clean layout */
[data-design-preset='coinbase'] .design-hero--split {
  padding: 7rem 0 4rem;
  background: #ffffff;
}

[data-design-preset='coinbase'] .design-hero__copy h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  line-height: 1;
}

[data-design-preset='coinbase'] .design-hero__preview {
  border: 1px solid rgba(91, 97, 110, 0.15);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* Tall pill buttons */
[data-design-preset='coinbase'] .design-button {
  min-height: 52px;
  padding: 0 1.8rem;
  border-radius: 56px;
  font-weight: 600;
  font-size: 0.9rem;
}

[data-design-preset='coinbase'] .design-button--primary {
  background: #0052ff;
  color: #ffffff;
}

[data-design-preset='coinbase'] .design-button--secondary {
  background: #eef0f3;
  border: 1px solid rgba(91, 97, 110, 0.15);
  color: #0a0b0d;
}

/* Cards: clean white */
[data-design-preset='coinbase'] .design-card {
  border: 1px solid rgba(91, 97, 110, 0.12);
  border-radius: 12px;
  padding: 1.6rem;
  background: #ffffff;
  box-shadow: none;
}

/* Proof/track-record cards: DARK background (inverted) */
[data-design-preset='coinbase'] .design-section--proof .design-card {
  background: #0a0b0d;
  border-color: #282b31;
}

[data-design-preset='coinbase'] .design-section--proof .design-card h3 {
  color: #ffffff;
}

[data-design-preset='coinbase'] .design-section--proof .design-card p {
  color: rgba(255, 255, 255, 0.76);
}

[data-design-preset='coinbase'] .design-section--proof .design-card .design-section__label,
[data-design-preset='coinbase'] .design-section--proof .design-card .design-kicker {
  color: rgba(255, 255, 255, 0.5);
}

/* Stories: clean bordered */
[data-design-preset='coinbase'] .design-story {
  border: 1px solid rgba(91, 97, 110, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

[data-design-preset='coinbase'] .design-story__media {
  border-radius: 8px;
}

/* ==========================================================================
   PRESET 7 — STRIPE (light, split hero)
   Purple accent, gradient radial backgrounds on hero.
   Deep dual-layer shadows on cards. Purple border-top on proof cards.
   Elegant shadows throughout.
   ========================================================================== */

[data-design-preset='stripe'] {
  --design-font-body:
    "sohne-var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-font-display:
    "sohne-var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-bg: #ffffff;
  --design-surface: #ffffff;
  --design-surface-strong: #f6f9fc;
  --design-text: #0a2540;
  --design-muted: #425466;
  --design-subtle: #64748d;
  --design-border: #e5edf5;
  --design-accent: #635bff;
  --design-accent-strong: #533afd;
  --design-shadow:
    rgba(50, 50, 93, 0.18) 0 30px 45px -30px,
    rgba(0, 0, 0, 0.08) 0 18px 36px -18px;
  --design-radius: 12px;
  --design-button-radius: 10px;
  --design-header-radius: 8px;
}

[data-design-preset='stripe'] .design-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(229, 237, 245, 0.8);
  backdrop-filter: blur(20px) saturate(120%);
}

[data-design-preset='stripe'] .design-shell h1,
[data-design-preset='stripe'] .design-shell h2,
[data-design-preset='stripe'] .design-shell h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0a2540;
}

/* Hero: subtle gradient background with radial accents */
[data-design-preset='stripe'] .design-hero--split {
  padding: 7rem 0 5rem;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(249, 107, 238, 0.12), transparent 24%),
    radial-gradient(ellipse at 20% 20%, rgba(99, 91, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #f6f9fc, #ffffff 60%);
}

[data-design-preset='stripe'] .design-hero__copy h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.8rem);
  color: #0a2540;
}

[data-design-preset='stripe'] .design-hero__copy p {
  color: #425466;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

/* Preview: elegant shadow */
[data-design-preset='stripe'] .design-hero__preview {
  border: 1px solid rgba(229, 237, 245, 0.9);
  border-radius: 14px;
  box-shadow:
    rgba(50, 50, 93, 0.2) 0 30px 60px -30px,
    rgba(0, 0, 0, 0.1) 0 18px 36px -18px;
}

/* Buttons: rounded but not pill */
[data-design-preset='stripe'] .design-button--primary {
  background: #635bff;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
}

[data-design-preset='stripe'] .design-button--secondary {
  background: #ffffff;
  border: 1px solid #e5edf5;
  color: #0a2540;
}

/* Cards: deep dual-layer shadows */
[data-design-preset='stripe'] .design-card {
  border: 1px solid rgba(229, 237, 245, 0.7);
  border-radius: 12px;
  padding: 1.6rem;
  background: #ffffff;
  box-shadow:
    rgba(50, 50, 93, 0.18) 0 30px 45px -30px,
    rgba(0, 0, 0, 0.06) 0 18px 36px -18px;
}

/* Proof cards: purple accent border-top */
[data-design-preset='stripe'] .design-section--proof .design-card {
  border-top: 3px solid #635bff;
}

/* Stories: elegant dual-layer shadows */
[data-design-preset='stripe'] .design-story {
  border: 1px solid rgba(229, 237, 245, 0.7);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    rgba(50, 50, 93, 0.2) 0 30px 50px -30px,
    rgba(0, 0, 0, 0.08) 0 18px 36px -18px;
}

[data-design-preset='stripe'] .design-story__media {
  border-radius: 8px;
}

/* Section headings: Stripe-like label treatment */
[data-design-preset='stripe'] .design-kicker,
[data-design-preset='stripe'] .design-section__label {
  color: #635bff;
  font-weight: 700;
  font-size: 0.82rem;
}

/* ==========================================================================
   PRESET 8 — NOTION (warm beige, split hero)
   Warm #f7f6f3 bg, paper-like surfaces. Header NOT sticky (static).
   Minimal shadows, editorial feel. No uppercase on labels.
   Values cards have distinct warm bg.
   ========================================================================== */

[data-design-preset='notion'] {
  --design-font-body:
    "NotionInter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-font-display:
    "NotionInter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-bg: #f7f6f3;
  --design-surface: #ffffff;
  --design-surface-strong: #f1efe9;
  --design-text: #191919;
  --design-muted: rgba(25, 25, 25, 0.72);
  --design-subtle: rgba(25, 25, 25, 0.52);
  --design-border: rgba(25, 25, 25, 0.1);
  --design-accent: #191919;
  --design-accent-strong: #191919;
  --design-shadow: 0 2px 8px rgba(15, 15, 15, 0.04);
  --design-radius: 6px;
  --design-button-radius: 4px;
  --design-header-radius: 4px;
}

/* Header: NOT sticky — static, paper-like */
[data-design-preset='notion'] .design-header {
  position: static;
  background: transparent;
  border-bottom: 1px solid rgba(25, 25, 25, 0.08);
  backdrop-filter: none;
}

[data-design-preset='notion'] .design-shell h1,
[data-design-preset='notion'] .design-shell h2,
[data-design-preset='notion'] .design-shell h3 {
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Labels: no uppercase, editorial */
[data-design-preset='notion'] .design-kicker,
[data-design-preset='notion'] .design-page-label,
[data-design-preset='notion'] .design-section__label,
[data-design-preset='notion'] .design-story__index {
  letter-spacing: 0.03em;
  text-transform: none;
  font-weight: 500;
  font-size: 0.84rem;
  color: rgba(25, 25, 25, 0.45);
}

/* Hero: warm, editorial split layout */
[data-design-preset='notion'] .design-hero--split {
  padding: 5rem 0 4rem;
  background: #f7f6f3;
}

[data-design-preset='notion'] .design-hero__copy h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1.02;
  font-weight: 700;
}

[data-design-preset='notion'] .design-hero__copy p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(25, 25, 25, 0.65);
}

/* Preview: minimal shadow on warm paper */
[data-design-preset='notion'] .design-hero__preview {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 8px;
  box-shadow:
    rgba(0, 0, 0, 0.03) 0 4px 16px,
    rgba(0, 0, 0, 0.02) 0 2px 6px;
}

/* Buttons: simple, understated */
[data-design-preset='notion'] .design-button--primary {
  background: #191919;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.88rem;
}

[data-design-preset='notion'] .design-button--secondary {
  background: #ffffff;
  border: 1px solid rgba(25, 25, 25, 0.12);
  color: #191919;
}

/* Cards: paper-like, minimal shadows */
[data-design-preset='notion'] .design-card {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 6px;
  padding: 1.5rem;
  background: #ffffff;
  box-shadow:
    rgba(0, 0, 0, 0.03) 0 2px 8px,
    rgba(0, 0, 0, 0.015) 0 1px 3px;
}

/* Values cards: distinct warm background */
[data-design-preset='notion'] .design-section--values .design-card {
  background: #f6f5f4;
  border-color: rgba(25, 25, 25, 0.06);
}

/* Proof cards: layered paper shadow */
[data-design-preset='notion'] .design-section--proof .design-card {
  box-shadow:
    rgba(0, 0, 0, 0.04) 0 4px 18px,
    rgba(0, 0, 0, 0.027) 0 2px 8px,
    rgba(0, 0, 0, 0.02) 0 0.8px 3px,
    rgba(0, 0, 0, 0.01) 0 0.175px 1px;
}

/* Stories: wider gaps, more editorial spacing */
[data-design-preset='notion'] .design-story-list {
  gap: 2rem;
}

[data-design-preset='notion'] .design-story {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 8px;
  padding: 1.5rem;
  background: #ffffff;
  box-shadow:
    rgba(0, 0, 0, 0.03) 0 2px 8px,
    rgba(0, 0, 0, 0.015) 0 1px 3px;
  gap: 2rem;
}

[data-design-preset='notion'] .design-story__media {
  border-radius: 4px;
}

[data-design-preset='notion'] .design-story__copy h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.06;
}

/* Footer: editorial warm */
[data-design-preset='notion'] .design-footer {
  border-top-color: rgba(25, 25, 25, 0.08);
}

/* ==========================================================================
   PRESET 9 — LINEAR (dark, immersive hero)
   Very dark (#08090a), purple accent (#7170ff).
   Glassmorphism: backdrop-filter blur on cards AND stories.
   Tightest letter-spacing (-0.055em).
   Brand mark has subtle background. Deepest shadows, luminous hierarchy.
   ========================================================================== */

[data-design-preset='linear'] {
  --design-font-body:
    "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-font-display:
    "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-bg: #08090a;
  --design-surface: rgba(255, 255, 255, 0.03);
  --design-surface-strong: rgba(255, 255, 255, 0.05);
  --design-text: #f7f8f8;
  --design-muted: #d0d6e0;
  --design-subtle: #8a8f98;
  --design-border: rgba(255, 255, 255, 0.08);
  --design-accent: #7170ff;
  --design-accent-strong: #5e6ad2;
  --design-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 68px rgba(0, 0, 0, 0.45);
  --design-radius: 12px;
  --design-button-radius: 6px;
  --design-header-radius: 6px;
}

[data-design-preset='linear'] .design-header {
  background: rgba(8, 9, 10, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(140%);
}

/* Tightest letter-spacing */
[data-design-preset='linear'] .design-shell h1,
[data-design-preset='linear'] .design-shell h2 {
  letter-spacing: -0.055em;
  font-weight: 500;
}

[data-design-preset='linear'] .design-shell h3 {
  letter-spacing: -0.035em;
  font-weight: 500;
}

/* Labels: lowercase, subtle */
[data-design-preset='linear'] .design-kicker,
[data-design-preset='linear'] .design-page-label,
[data-design-preset='linear'] .design-section__label,
[data-design-preset='linear'] .design-story__index {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.78rem;
  color: #8a8f98;
}

/* Hero: deep dark, luminous type */
[data-design-preset='linear'] .design-hero--immersive {
  padding-bottom: 5rem;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(113, 112, 255, 0.06), transparent 50%),
    #08090a;
}

[data-design-preset='linear'] .design-hero__copy h1 {
  font-size: clamp(2.4rem, 7vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  background: linear-gradient(180deg, #f7f8f8, rgba(247, 248, 248, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Brand mark: subtle background */
[data-design-preset='linear'] .design-header__brand-mark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Buttons */
[data-design-preset='linear'] .design-button--primary {
  background: #5e6ad2;
  color: #ffffff;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.88rem;
}

[data-design-preset='linear'] .design-button--secondary {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f7f8f8;
}

/* Glassmorphism cards: backdrop-filter blur, deep shadows */
[data-design-preset='linear'] .design-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(24px) saturate(120%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 68px rgba(0, 0, 0, 0.4);
}

[data-design-preset='linear'] .design-card h3 {
  color: #f7f8f8;
}

/* Glassmorphism stories */
[data-design-preset='linear'] .design-story {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px) saturate(120%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 68px rgba(0, 0, 0, 0.4);
}

[data-design-preset='linear'] .design-story__media {
  border-radius: 8px;
  overflow: hidden;
}

[data-design-preset='linear'] .design-story__media img {
  opacity: 0.9;
}

/* Proof cards: accent glow */
[data-design-preset='linear'] .design-section--proof .design-card {
  border-top: 1px solid rgba(113, 112, 255, 0.3);
}

/* Section headings: luminous accent label */
[data-design-preset='linear'] .design-section__label {
  color: #7170ff;
}

/* Footer: dark precision */
[data-design-preset='linear'] .design-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   LANGUAGE TYPOGRAPHY LOCK
   Keep active site typography consistent regardless of preset overrides.
   -------------------------------------------------------------------------- */

html:lang(en) .design-shell {
  --design-font-body: var(--font-en-body);
  --design-font-display: var(--font-en-display);
}

html:lang(ko) .design-shell {
  --design-font-body: var(--font-ko);
  --design-font-display: var(--font-ko);
}

/* ==========================================================================
   RESPONSIVE — 1280px
   ========================================================================== */

@media (max-width: 1280px) {
  .design-index__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   RESPONSIVE — 960px (tablet)
   ========================================================================== */

@media (max-width: 960px) {
  .design-shell {
    --design-header-offset: 104px;
  }

  /* All grids collapse to single column */
  .design-header__inner,
  .design-grid--three,
  .design-grid--proof,
  .design-hero__meta-row,
  .design-pillar-grid,
  .design-partner-showcase,
  .design-partner-strip,
  .design-social-grid,
  .design-story-summary--compact,
  .design-story,
  .design-cta-band,
  .design-hero--split .design-hero__inner {
    grid-template-columns: 1fr;
  }

  .design-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'brand actions'
      'nav nav';
    padding-block: 0.8rem;
  }

  .design-header__brand {
    grid-area: brand;
  }

  .design-header__nav {
    grid-area: nav;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .design-header__actions {
    grid-area: actions;
    justify-content: flex-end;
  }

  .design-footer__top {
    grid-template-columns: 1fr;
  }

  .design-footer__bottom {
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Stories stack: reset order */
  .design-story.is-reverse .design-story__media,
  .design-story.is-reverse .design-story__copy {
    order: initial;
  }

  .design-cta-band__actions {
    justify-content: flex-start;
  }

  /* Hero text sizes reduce */
  .design-hero__copy h1 {
    font-size: clamp(1.95rem, 5vw, 3.05rem);
  }

  .design-section__heading h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
  }

  /* Tesla mobile adjustments */
  [data-design-preset='tesla'] .design-button {
    min-width: 0;
    width: 100%;
  }

  /* Tesla / SpaceX fullscreen stories reduce on mobile */
  [data-design-preset='tesla'] .design-story,
  [data-design-preset='spacex'] .design-story {
    min-height: 70svh;
    padding-top: 6rem;
    padding-bottom: 2.5rem;
  }

  /* Tesla immersive hero reduce height on tablet */
  [data-design-preset='tesla'] .design-hero--immersive {
    min-height: 80svh;
  }

  /* Superhuman hero gradient breakpoint adjusts */
  [data-design-preset='superhuman'] .design-hero--split {
    background:
      linear-gradient(180deg, #1b1938 0%, #2a2553 28%, #ffffff 28%, #ffffff 100%);
  }

  [data-design-preset='superhuman'] .design-hero__preview {
    transform: translateY(1rem);
  }

  /* Notion stories gap reduce */
  [data-design-preset='notion'] .design-story-list {
    gap: 1.25rem;
  }
}

/* ==========================================================================
   RESPONSIVE — 640px (mobile)
   ========================================================================== */

@media (max-width: 640px) {
  .design-shell {
    --design-header-offset: 120px;
  }

  .design-header__inner {
    gap: 0.65rem;
    padding-block: 0.7rem;
  }

  /* 모바일 헤더 크기 통일: 브랜드명 18px, 컨트롤(언어/지갑/햄버거)·로고 모두 30px.
     기존엔 로고 52px + 텍스트 0.76rem(≈12px) + 컨트롤 36~40px 로 서로 따로 놀았다
     (컨트롤은 PC 크기 그대로였고 텍스트만 작아짐). */
  .design-header__brand {
    gap: 0.5rem;
  }

  /* 모바일에선 로고 이미지 숨김 — 18px 워드마크만으로 브랜드를 표기(공간 확보 + 균형).
     주의: 위쪽 `.design-shell img { display: block }` 이 (0,1,1) 로 더 구체적이라
     `.design-header__brand-logo` (0,1,0) 단독으로는 이기지 못한다(미디어쿼리는 우선순위에 영향 없음).
     그래서 `.design-shell` 을 앞에 붙여 (0,2,0) 으로 올린다. */
  .design-shell .design-header__brand-logo {
    display: none;
  }

  .design-header__brand-text {
    font-size: 18px;
    letter-spacing: 0.02em;
  }

  .design-header__hamburger {
    width: 30px;
    height: 30px;
  }

  .design-header__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .design-header__nav::-webkit-scrollbar {
    display: none;
  }

  .design-header__actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.5rem;
    width: auto;
    align-items: center;
  }

  .design-header__link,
  .design-header__cta {
    width: auto;
  }

  .design-header__link,
  .design-header__cta {
    flex: 0 0 auto;
    padding-inline: 0.88rem;
    font-size: 0.8rem;
    text-align: center;
  }

  .design-header__mode-btn,
  .design-header__lang-btn {
    min-height: 36px;
    padding-inline: 0.72rem;
  }

  .design-header__mode-label {
    display: none;
  }

  .design-hero--immersive {
    padding: 5.75rem 0 1.5rem;
  }

  .design-hero--subpage.design-hero--immersive {
    padding-bottom: 2rem;
  }

  .design-index__grid {
    grid-template-columns: 1fr;
  }

  .design-partner-strip,
  .design-partner-strip--dense,
  .design-partner-strip--showcase,
  .design-social-grid--dense,
  .design-social-grid--showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .design-social-grid {
    grid-template-columns: 1fr;
  }

  .design-hero__copy h1 {
    font-size: clamp(1.62rem, 6.2vw, 2.45rem);
  }

  .design-hero__copy p {
    font-size: 0.92rem;
  }

  .design-hero__meta-row {
    display: flex;
    gap: 0.65rem;
    max-width: none;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .design-hero__meta-row::-webkit-scrollbar {
    display: none;
  }

  .design-meta-card {
    flex: 0 0 min(84vw, 280px);
    padding: 0.75rem 0.9rem;
    scroll-snap-align: start;
  }

  .design-meta-card strong {
    font-size: 0.92rem;
  }

  .design-meta-card p {
    font-size: 0.82rem;
  }

  .design-story-summary,
  .design-story-summary--compact,
  .design-story-summary--cards {
    display: flex;
    gap: 0.65rem;
    max-width: none;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .design-story-summary::-webkit-scrollbar,
  .design-story-summary--compact::-webkit-scrollbar,
  .design-story-summary--cards::-webkit-scrollbar {
    display: none;
  }

  .design-story-summary__item,
  .design-story-summary--cards .design-story-summary__item,
  .design-story-summary__item:first-child,
  .design-story-summary--cards .design-story-summary__item:first-child {
    flex: 0 0 min(78vw, 300px);
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--design-border);
    border-radius: calc(var(--design-radius) - 6px);
    background: var(--design-surface);
    scroll-snap-align: start;
  }

  .design-hero__scroll-cue {
    width: fit-content;
    margin-top: 0.85rem;
    font-size: 0.78rem;
  }

  .design-section__heading h2 {
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .design-partner-logo {
    min-height: 88px;
  }

  .design-brand-plaque,
  .design-partner-showcase__media {
    min-height: 200px;
  }

  .design-brand-plaque {
    padding: 1.1rem;
  }

  .design-footer__social-link {
    padding-inline: 0.8rem;
  }

  .design-brand-plaque__mark {
    width: min(100%, 240px);
  }

  /* Tesla / SpaceX fullscreen stories shrink further */
  [data-design-preset='tesla'] .design-story,
  [data-design-preset='spacex'] .design-story {
    min-height: auto;
    min-height: 60svh;
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  [data-design-preset='tesla'] .design-hero--immersive {
    min-height: 70svh;
  }

  [data-design-preset='spacex'] .design-hero--immersive {
    min-height: 80svh;
  }

  /* SpaceX hero: reduce title */
  [data-design-preset='spacex'] .design-hero__copy h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  /* Superhuman preview flatten on mobile */
  [data-design-preset='superhuman'] .design-hero__preview {
    transform: none;
  }

  /* Superhuman hero gradient adjust */
  [data-design-preset='superhuman'] .design-hero--split {
    background:
      linear-gradient(180deg, #1b1938 0%, #2a2553 22%, #ffffff 22%, #ffffff 100%);
  }

  /* Notion editorial spacing tightens */
  [data-design-preset='notion'] .design-story-list {
    gap: 1rem;
  }

  [data-design-preset='notion'] .design-story {
    gap: 1rem;
  }

  /* Coinbase buttons full width */
  [data-design-preset='coinbase'] .design-button {
    width: 100%;
    justify-content: center;
  }

  /* Stripe hero gradient simpler on mobile */
  [data-design-preset='stripe'] .design-hero--split {
    background:
      linear-gradient(180deg, #f6f9fc, #ffffff 40%);
  }

  /* Linear hero glow reduce */
  [data-design-preset='linear'] .design-hero--immersive {
    background: #08090a;
  }
}

/* ==========================================================================
   RESPONSIVE — 480px (narrow mobile)
   ========================================================================== */

@media (max-width: 480px) {
  .design-shell {
    --design-header-offset: 124px;
  }

  .design-hero__copy h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  .design-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .design-hero__actions .design-button {
    width: 100%;
  }

  .design-footer__social-row {
    gap: 0.65rem;
  }

  .design-footer__social-label {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   RESPONSIVE — 390px (small mobile)
   ========================================================================== */

@media (max-width: 390px) {

  .design-hero__copy h1 {
    font-size: clamp(1.42rem, 7.6vw, 2.04rem);
  }

  .design-section__heading h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  .design-pillar-card {
    min-height: 260px;
  }

  .design-pillar-card__copy h3 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
  }

  .design-partner-logo {
    min-height: 80px;
  }

  .design-partner-strip,
  .design-partner-strip--dense,
  .design-partner-strip--showcase,
  .design-social-grid--dense,
  .design-social-grid--showcase {
    gap: 0.75rem;
  }

  .design-header__brand-lockup {
    height: 15px;
  }

  /* brand-logo(48px) / brand-text(0.68rem) 오버라이드 제거 —
     640px 블록에서 '로고 숨김 + 워드마크 18px' 로 통일했는데, 이 블록이 뒤에 있어 ≤390px 에서
     다시 48px 로고와 0.68rem(≈11px) 텍스트로 되돌려 버렸다. 헤더 모바일 크기는 640px 블록이 단독 관리. */

  .design-card {
    padding: 1rem;
  }

  .design-story__copy {
    max-width: 100%;
  }

  .design-story__copy h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  .design-hero__meta-card {
    padding: 0.8rem;
  }

  .design-footer {
    padding: 1.5rem 0 2rem;
  }

  .design-cta-band__actions {
    flex-direction: column;
  }

  .design-cta-band__actions .design-button {
    width: 100%;
  }
}

/* ==========================================================================
 * eggt_web 임베딩 오버라이드 — 모바일 헤더/푸터 가로 넘침(좌우 잘림) 방지.
 * 원본 --design-content 의 "+3rem" 오버슈트가 좁은 화면에서 뷰포트를 넘겨
 * 헤더 로고/햄버거·푸터 콘텐츠가 잘림 → 오버슈트 제거해 뷰포트 안에 맞춘다.
 * (헤더/푸터/메인 스코프에 한정. sticky 깨짐 방지를 위해 overflow 는 건드리지 않음)
 * ========================================================================== */
.eggt-header-shell,
.eggt-footer-shell,
.eggt-home {
	--design-content: min(1200px, calc(100% - 2 * var(--content-pad)));
}

/* Our Scope(/new?tab=our-scope): hero 제거로 첫 story 섹션이 헤더 바로 아래 오므로
 * 원본의 큰 상단 여백(--design-section-gap) 을 적당히 축소. (home 은 hero 가 첫 요소라 미해당) */
.eggt-home .design-main > .design-section:first-child {
	padding-top: 1.5rem;
}