/* URMEI landing page (EN at /, KO at /ko/) — tokens, base, components, sections.
   Tokens are the subset of the URMEI design system this page uses.
   Locale-specific type treatment is at the end of the file. */

:root {
  color-scheme: light;

  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --surface-page: #FFFEFD;
  --surface-raised: #F8F8F8;
  --tint: #EFECE9;           /* editorial section backdrop */
  --ring: #CBBFB4;           /* warm 1px ring */
  --beige-300: #D2C1B5;

  --text-primary: #222222;
  --text-secondary: #757575;
  --text-tertiary: #B1B1B1;
  --text-muted: #777674;
  --text-warm: #6C6A67;
  --text-inverse: #FFFEFD;

  --charcoal-500: #403E3C;
  --charcoal-600: #3A3735;
  --charcoal-700: #322F2E;

  --border-default: #E5E5E5;
  --border-strong: #464646;
  --focus: #6E655C;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --gutter: clamp(20px, 6vw, 40px);
  --section-y: clamp(64px, 9vw, 112px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { text-wrap: pretty; }

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;  /* no grey flash on tap */
  -webkit-text-size-adjust: 100%;            /* no font inflation in landscape */
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
/* Korean breaks between words, not inside them */
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

img { max-width: 100%; }

a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--charcoal-500); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

[hidden] { display: none !important; }

/* controls, not content: instant taps, no long-press selection */
button, [role="button"], [role="tab"], a[aria-label] { touch-action: manipulation; }
button, [role="tab"] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* iOS zooms the page on focus below 16px and never zooms back out */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }

.container { max-width: 1200px; margin: 0 auto; }
.muted { color: var(--text-muted); }
.muted-soft { color: var(--text-muted); font-weight: 400; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--charcoal-500); color: var(--text-inverse);
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.skip-link:focus { left: 16px; color: var(--text-inverse); }

/* ---------- button (design-system Button) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 8px 16px;
  border: none; border-radius: 8px;
  background: var(--charcoal-500); color: var(--text-inverse);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 22px;
  white-space: nowrap; cursor: pointer;
  transition: background 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard);
}
.btn:hover { background: var(--charcoal-600); }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--outlined {
  background: transparent; color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-default);
}
.btn--outlined:hover { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);   /* edge-to-edge under the notch */
  background: rgba(255, 254, 253, 0.92);
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  box-shadow: inset 0 -1px 0 0 var(--border-default);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--surface-page); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo img { display: block; height: 22px; width: auto; }
.site-header__actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }

.lang-switch {
  display: flex; align-items: stretch; height: 38px;
  border-radius: 9999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.lang-switch > a, .lang-switch > span {
  display: grid; place-items: center; min-width: 44px; padding: 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
}
.lang-switch > a {
  color: var(--text-warm); text-decoration: none;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lang-switch > a:hover { background: var(--tint); color: var(--charcoal-500); }
.lang-switch > span { background: var(--charcoal-500); color: var(--surface-page); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(72px, 12vw, 132px) var(--gutter) clamp(64px, 10vw, 112px);
}
.hero__ridge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__grid {
  position: relative; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 72px); align-items: center;
}
.hero__title {
  margin: 0; max-width: 16ch;
  font-size: clamp(40px, 6.6vw, 76px); line-height: 1.06;
  letter-spacing: -0.02em; font-weight: 700; text-wrap: balance;
}
.hero__lede {
  margin: clamp(24px, 3vw, 32px) 0 0; max-width: 44ch;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; font-weight: 400;
  color: var(--text-secondary);
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-top: clamp(32px, 4vw, 44px);
}
.hero__note { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.hero__media { display: flex; justify-content: center; }
.hero__float { position: relative; width: clamp(230px, 27vw, 348px); max-width: 100%; will-change: transform; }
.hero__float > img { display: block; width: 100%; height: auto; }
.hero__caption {
  position: static; margin-top: 20px; z-index: 2;
  padding: 18px 20px; border-radius: 10px; background: var(--surface-page);
  box-shadow: inset 0 0 0 1px var(--ring), 0 18px 40px -24px rgba(64, 62, 60, 0.45);
}
.hero__caption p { margin: 0; font-size: 14px; line-height: 21px; text-wrap: balance; }
.hero__markets {
  position: relative; max-width: 1200px; margin: clamp(56px, 7vw, 88px) auto 0; padding-top: 20px;
  box-shadow: inset 0 1px 0 0 var(--ring);
  display: flex; flex-wrap: wrap; gap: 16px 56px; align-items: baseline;
  font-size: 15px; line-height: 22px;
}
.hero__markets-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(338px, max-content); }
}
@media (min-width: 1120px) {
  .hero__caption { position: absolute; left: -40px; bottom: 132px; width: 220px; margin-top: 0; }
}

/* ---------- ecosystem ---------- */
.ecosystem { padding: var(--section-y) var(--gutter); background: var(--tint); }
.ecosystem__eyebrow {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-warm);
}
.ecosystem__title {
  margin: 0 0 clamp(24px, 3vw, 40px); max-width: 36ch;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.22; letter-spacing: -0.01em;
  font-weight: 700; text-wrap: balance;
}

#ecosystem-gallery { display: flex; flex-direction: column; gap: 10px; }

.panel {
  position: relative; overflow: hidden; min-width: 0; min-height: 430px;
  border-radius: 10px; background: var(--surface-page);
  box-shadow: inset 0 0 0 1px var(--ring);
  will-change: flex-grow;
}
.panel__art {
  position: absolute; right: 3%; bottom: -8%; max-width: 37%; max-height: 112%;
  pointer-events: none;
}
.panel[data-panel="2"] .panel__art { right: 2%; bottom: 4%; max-width: 50%; max-height: 92%; }
.panel[data-panel="3"] .panel__art { right: 4%; bottom: 12%; width: clamp(180px, 26vw, 380px); max-width: 40%; }

.panel__spine {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;
  gap: 16px; padding: 0 24px;
  pointer-events: none;
}
.panel__spine-title {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1; font-weight: 700;
  white-space: nowrap; color: var(--charcoal-500);
}
.panel__spine-num {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums; color: var(--text-warm);
}

.panel__copy {
  position: absolute; left: clamp(22px, 2.6vw, 40px); top: clamp(16px, 3vh, 40px);
  width: min(46%, 380px); min-width: 200px; max-width: calc(100% - 44px);
  pointer-events: none;
}
.panel__num {
  margin: 0 0 clamp(8px, 1.8vh, 22px);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums; color: var(--text-warm);
}
.panel__title {
  margin: 0 0 clamp(8px, 1.4vh, 12px);
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; letter-spacing: -0.01em; font-weight: 700;
}
.panel__tag {
  display: block; margin: 7px 0 0;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.02em;
  white-space: nowrap; color: var(--text-warm);
}
.panel__tagline { margin: 0 0 clamp(8px, 1.6vh, 14px); font-size: 16px; line-height: 24px; color: var(--text-warm); }
.panel__body { margin: 0; font-size: 17px; line-height: 26px; text-wrap: pretty; }
.panel__tab {
  position: absolute; inset: 0; width: 100%; height: 100%;
  appearance: none; border: none; background: transparent; cursor: pointer;
}

/* desktop: scroll-pinned accordion. The open panel is a 16:9 landscape card, the others
   collapse to spines. main.js measures the content once (on load, resize and font load,
   never while scrolling) and sets --eco-frame-h (the content's height) and --eco-top (where
   it pins, centred under the header). The section keeps the same --section-y padding as
   every other section; the extra scroll distance is only the time the cards take to open.
   #ecosystem-gallery's height and each panel's flex-basis, background, ring and content
   opacity are written by main.js. */
@media (min-width: 900px) {
  #ecosystem-scroll { height: calc(var(--eco-frame-h, 760px) + 220vh); }
  #ecosystem-sticky { position: sticky; top: var(--eco-top, 100px); height: var(--eco-frame-h, 760px); }
  #ecosystem-gallery { flex-direction: row; justify-content: center; }
  #ecosystem-gallery > .panel { min-height: 0; flex: 0 0 auto; flex-basis: clamp(64px, 6vw, 84px); }
  #ecosystem-gallery .panel__spine {
    right: auto; width: clamp(64px, 6vw, 84px);
    flex-direction: column; justify-content: flex-end; align-items: center;
    gap: 22px; padding: 26px 0;
  }
  #ecosystem-gallery [data-vert] { writing-mode: vertical-rl; transform: rotate(180deg); }
}

/* ---------- who it is for ---------- */
.audience { padding: var(--section-y) var(--gutter); }
.audience__eyebrow { margin: 0 0 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); }
.audience__title {
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.22; letter-spacing: -0.01em; font-weight: 700;
}
.audience__grid {
  display: grid; gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start;
}
.card { display: flex; flex-direction: column; border-radius: 10px; padding: clamp(28px, 3.4vw, 48px); }
.card--brand { background: var(--tint); }
.card--creator { background: var(--surface-page); box-shadow: inset 0 0 0 1px var(--ring); }
.card__title {
  margin: 0 0 8px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.01em;
}
.card__kicker { margin: 0 0 28px; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); }
.card--brand .card__kicker { color: var(--text-warm); }
.card__lead { margin: 0 0 20px; max-width: 46ch; font-size: 18px; line-height: 28px; color: var(--text-primary); }
.card__lead--muted { margin-bottom: 36px; color: var(--text-muted); }
.card--brand .card__lead--muted { color: var(--text-warm); }
.card__eyebrow { margin: 0 0 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-warm); }
.steps { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.steps li {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px 20px; padding-top: 20px;
  box-shadow: inset 0 1px 0 0 var(--ring);
}
.steps__label { font-size: 14px; line-height: 26px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-warm); }
.steps__text { font-size: 17px; line-height: 26px; }
.card__cta { margin-top: auto; }

/* ---------- get in touch ---------- */
.contact { padding: var(--section-y) var(--gutter); background: var(--charcoal-500); color: var(--text-inverse); }
.contact__grid {
  display: grid; gap: clamp(32px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch;
}
.contact__intro { display: flex; flex-direction: column; }
.contact__eyebrow { margin: 0 0 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--ring); }
.contact__title {
  margin: 0 0 24px; font-size: clamp(30px, 4vw, 48px); line-height: 1.12;
  letter-spacing: -0.02em; font-weight: 700;
}
.contact__lede { margin: 0; max-width: 40ch; font-size: 18px; line-height: 28px; color: var(--beige-300); }
.contact__image {
  display: block; width: 100%; flex: 1 1 0; min-height: 200px;
  object-fit: cover; object-position: center;
  margin-top: clamp(32px, 4vw, 48px); border-radius: 6px;
}
.contact__form-col { display: flex; flex-direction: column; }

/* folder-style tabs sitting on the card */
.audience-tabs { display: flex; align-items: flex-end; position: relative; z-index: 0; margin-bottom: -12px; }
.audience-tabs > button {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  padding: 0 22px 12px; border-radius: 6px 6px 0 0;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.audience-tabs > button[aria-selected="true"] { height: 62px; background: var(--surface-page); color: var(--charcoal-500); }
.audience-tabs > button[aria-selected="false"] { height: 54px; background: rgba(255, 254, 253, 0.14); color: var(--text-inverse); }
.audience-tabs > button:active { transform: scale(0.98); }

.lead-panel {
  position: relative; z-index: 1; flex: 1 1 auto;
  background: var(--surface-page); color: var(--text-primary);
  border-radius: 10px; padding: clamp(24px, 3vw, 40px);
}
.lead-content { transition: opacity 190ms var(--ease-out), transform 280ms var(--ease-out); }
.lead-content.is-fading { opacity: 0; transform: translateY(8px); }

.lead-success { display: flex; flex-direction: column; gap: 16px; min-height: 320px; justify-content: center; }
.lead-success h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.lead-success p { margin: 0; font-size: 17px; line-height: 26px; color: var(--text-muted); }

.lead-form { display: flex; flex-direction: column; gap: 20px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* design-system Input / Select, size "l" */
.field { display: flex; flex-direction: column; gap: 4px; align-items: stretch; width: 100%; }
.field__label { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--text-primary); }
.field__box {
  position: relative; display: flex; align-items: center; gap: 4px;
  height: 54px; padding: 16px; overflow: hidden;
  border-radius: 6px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-default);
  transition: box-shadow 120ms var(--ease-standard);
}
.field__box:focus-within, .field.is-error .field__box { box-shadow: inset 0 0 0 1px var(--border-strong); }
.field__box input, .field__box select {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 22px;
  color: var(--text-primary);
}
.field__box input:focus-visible, .field__box select:focus-visible { outline: none; }
.field__box--select select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field__box--select select.is-empty { color: var(--text-tertiary); }
.field__box--select option { color: var(--text-primary); }
.field__box--select svg { flex: none; color: var(--text-secondary); pointer-events: none; }
.field__error { margin: 6px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
.field__error--flush { margin: 0; }
.handles { display: flex; flex-direction: column; gap: 12px; }
.handles[hidden] { display: none; }
.handles__legend { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
/* the group's field errors are shown once, under the pair */
.handles .field { gap: 4px; }

.turnstile { min-height: 65px; }
.consent { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-muted); text-wrap: pretty; }
.consent a { color: var(--charcoal-500); text-underline-offset: 2px; }

.submit {
  position: relative; overflow: hidden; margin-top: 4px; width: 100%; height: 54px;
  border: none; border-radius: 8px;
  background: var(--charcoal-500); color: var(--text-inverse);
  font-family: var(--font-sans); font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.submit:hover { background: var(--charcoal-600); }
.submit:active { background: var(--charcoal-700); transform: scale(0.99); }
.submit:disabled { cursor: progress; }
.submit__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden;
  border-radius: 0 0 8px 8px; display: block;
}
.submit__progress[hidden] { display: none; }
.submit__progress > span { display: block; width: 100%; height: 100%; background: var(--ring); }
/* indeterminate sweep while the lead is in flight - status, not decoration */
@keyframes om-sending { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.submit__progress > span { animation: om-sending 1100ms var(--ease-in-out) infinite; }

.form-note { margin: -8px 0 0; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.form-note--error { font-weight: 500; color: #EE4442; }
.form-note a { color: var(--charcoal-500); text-underline-offset: 2px; }

/* ---------- footer ---------- */
.site-footer {
  padding: clamp(40px, 6vw, 64px) var(--gutter);
  padding-bottom: calc(clamp(40px, 6vw, 64px) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-page);
}
.site-footer__row {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between;
  padding-top: 32px; box-shadow: inset 0 1px 0 0 var(--ring);
}
.site-footer__row img { display: block; height: 20px; width: auto; }
.site-footer__social { display: flex; gap: 10px; align-items: center; }
.site-footer__copy { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.site-footer__row--meta { margin-top: 24px; padding-top: 0; box-shadow: none; gap: 8px 24px; }
.site-footer__row--meta p { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-muted); }
.site-footer__row--meta a { font-size: 15px; line-height: 22px; color: var(--text-muted); }
.site-footer__row--meta a:hover { color: var(--charcoal-500); }
.icon-link {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9999px;
  color: var(--charcoal-500); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ring);
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.icon-link:hover { background: var(--tint); box-shadow: inset 0 0 0 1px var(--border-strong); }
.icon-link:active { transform: scale(0.94); }

/* ---------- motion ---------- */
@keyframes om-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* hero load-in: hierarchy, read in the order it is written */
@media (prefers-reduced-motion: no-preference) {
  [data-enter] { animation: om-enter 560ms var(--ease-out) both; }
  [data-enter="2"] { animation-delay: 70ms; }
  [data-enter="3"] { animation-delay: 140ms; }
  [data-enter="4"] { animation-delay: 210ms; }
}
/* reduced motion: gentler, not nothing - keep the fades, drop every movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, box-shadow, border-color, text-decoration-color !important;
    transition-duration: 160ms !important;
  }
}

/* comfortable thumb targets without changing the desktop rhythm */
@media (pointer: coarse), (max-width: 899px) {
  .site-header nav button, .site-header nav a { min-height: 44px; }
  .site-footer a:not([aria-label]) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- phone / tablet ----------
   Nested card padding inside section padding costs a quarter of the line length
   on a 390px screen, so cards give up their chrome and become full-bleed bands:
   one page gutter, text at its full width, media edge to edge. */
@media (max-width: 899px) {
  /* phones use overlay scrollbars; the desktop preview's 15px gutter shifted
     every centred element left of true centre */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }

  /* section rhythm */
  .ecosystem, .audience, .contact { padding-top: 44px; padding-bottom: 46px; }

  /* ---- phone type scale: the desktop ramp is a size too large on a 390px screen ---- */
  .hero { padding-top: 24px; padding-bottom: 24px; }
  .hero__title { font-size: 32px; line-height: 1.1; max-width: none; }
  .hero__lede { font-size: 16px; line-height: 24px; }
  .hero__markets { display: none; }
  /* the launch note sits beside the CTA, not wrapped beneath it */
  .hero__cta { flex-wrap: nowrap; gap: 12px; }
  /* the button mount is 54px tall but the button renders 46, so centring on the
     row left the note 4px low - align it to the button instead */
  .hero__note { font-size: 13px; line-height: 18px; margin-top: -8px; }
  .hero__caption { margin-top: 8px; }
  .hero__float { width: min(216px, 56vw); }
  .hero__float > img { position: relative; z-index: 1; margin-left: 5px; }
  /* the glow is placed top-right for a wide canvas; on a phone a true circle
     centred on the mockup sits behind the device instead */
  #hero-glow { display: none; }
  .hero__float::before {
    content: ""; position: absolute; left: 50%; top: 44%;
    width: 336%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
    border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(210, 193, 181, 0.6) 0%, rgba(210, 193, 181, 0.26) 52%, rgba(210, 193, 181, 0) 78%);
  }
  /* the ridge is drawn on a 1440x800 canvas with preserveAspectRatio="none", so
     filling a tall narrow hero distorts it. Let it keep its true proportions and
     overflow sideways instead: width drives, height follows the viewBox. */
  .hero__ridge {
    width: 300%; left: -100%; right: auto;
    height: auto; aspect-ratio: 1440 / 800;
    top: 42%; bottom: auto;
  }

  /* ecosystem: four stacked portals, divided by a rule rather than boxed */
  .ecosystem { padding-left: 0; padding-right: 0; }
  .ecosystem__eyebrow, .ecosystem__title { padding-left: 20px; padding-right: 20px; }
  /* the section name carries the hierarchy and the sentence below it becomes
     supporting copy, rather than two competing blocks of large type */
  .ecosystem__eyebrow {
    font-size: 30px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.2;
    color: var(--text-primary); margin-bottom: 14px;
  }
  .ecosystem__title {
    max-width: none; font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: 0;
    color: var(--text-warm); margin-bottom: 22px;
  }
  #ecosystem-gallery { gap: 0; }
  #ecosystem-gallery > .panel {
    min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding: 34px 20px 24px; border-radius: 0; position: relative; z-index: 0;
    background: transparent; box-shadow: inset 0 1px 0 0 var(--ring);
  }
  /* every block is divided, including the first */
  #ecosystem-gallery > .panel:first-of-type { padding-top: 22px; }
  #ecosystem-gallery > .panel:last-of-type { padding-bottom: 10px; }
  #ecosystem-gallery .panel__spine, #ecosystem-gallery .panel__tab { display: none; }
  #ecosystem-gallery .panel__copy {
    order: 1; position: static; width: auto; min-width: 0; max-width: none;
    pointer-events: auto;
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
  }
  #ecosystem-gallery .panel__num {
    grid-column: 1; grid-row: 1; margin: 0;
    font-size: 22px; font-weight: 700; letter-spacing: 0;
  }
  #ecosystem-gallery .panel__title { grid-column: 2; grid-row: 1; margin: 0; font-size: 22px; }
  #ecosystem-gallery .panel__tagline { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; font-size: 15px; line-height: 23px; }
  #ecosystem-gallery .panel__body { grid-column: 1 / -1; grid-row: 3; margin: 10px 0 0; }
  /* the screenshots are cropped to their top part and run off the bottom edge of the
     block (margin-bottom matches the panel's 24px padding, so nothing else is clipped).
     The crop is set as a ratio, not a pixel height, so the visible share holds at any
     phone width. Phones: top ~55% of each image (never under 50%). */
  #ecosystem-gallery .panel__art {
    order: 2; position: static; display: block;
    object-fit: cover; object-position: center top;
    max-width: none; max-height: none;
  }
  #ecosystem-gallery .panel[data-panel="0"] .panel__art,
  #ecosystem-gallery .panel[data-panel="1"] .panel__art {
    width: calc(100% + 40px); height: auto; aspect-ratio: 652 / 630;
    /* both PNGs carry ~13% transparent margin above the phone (about 23% of the image's
       width), which made the gap under the text ~22px + 23vw. Pulling the image up by
       half of that leaves the gap at about half: 11px - 11.5vw is the margin that does it. */
    margin: calc(11px - 11.5vw) -20px -24px;
  }
  /* the dashboard shot carries its own drop shadow, so it stays inside the gutters
     rather than bleeding to the edges; top ~72% of the image is shown (never under 70%) */
  #ecosystem-gallery .panel[data-panel="2"] .panel__art {
    width: 100%; height: auto; aspect-ratio: 1676 / 996; margin: 26px 0 -24px;
  }
  /* the monogram is a mark, not a media band - bigger and tight into the bottom
     corner, since cropping it severed the mark's connecting curve */
  #ecosystem-gallery .panel[data-panel="3"] .panel__art {
    width: 230px; height: auto; object-fit: fill; margin: 120px 3px 0 auto;
  }

  /* who it is for */
  .audience__eyebrow {
    font-size: 30px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.2;
    color: var(--text-primary); margin-bottom: 14px;
  }
  .audience__title {
    font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: 0; color: var(--text-warm);
  }
  .card { border-radius: 10px; padding: 26px 20px 30px; }
  .card__title { font-size: 21px; }
  .card__title, .card__lead { max-width: none; }
  .card > p { font-size: 15px; line-height: 23px; margin-bottom: 14px; }
  .card > .card__lead { margin-bottom: 14px; }
  .card > .card__kicker { font-size: 14px; letter-spacing: 0.02em; }
  .card > .card__lead:nth-of-type(2) { margin-bottom: 10px; }
  .steps { margin-bottom: 22px; gap: 14px; }
  .steps li { padding-top: 14px; }
  .steps__text { font-size: 15px; line-height: 23px; }

  /* form */
  .audience-tabs > button { white-space: nowrap; letter-spacing: 0.01em; }
  .contact__title { font-size: 26px; margin-bottom: 10px; letter-spacing: -0.01em; }
  .contact__lede { font-size: 16px; line-height: 24px; }
  .contact__eyebrow { font-size: 13px; margin-bottom: 10px; }
  .lead-panel { padding: 4px 18px 24px; }
  .lead-success h3 { font-size: 20px; line-height: 28px; }
  /* the photo belongs after the ask on a phone, not between the ask and the form */
  .contact__grid { display: flex; flex-direction: column; gap: 0; }
  .contact__intro { display: contents; }
  .contact__image { order: 3; margin-top: 24px; min-height: 0; flex: 0 0 auto; aspect-ratio: 4 / 3; }
  .contact__form-col { order: 2; margin-top: 24px; }

  /* footer */
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .site-footer__copy, .site-footer__row:last-child a { font-size: 13px; }
  .lang-switch { height: 44px; }
  .lang-switch > span, .lang-switch > a { min-width: 40px; padding: 0 11px; }
}
/* the 112px label gutter costs a third of a phone screen */
@media (max-width: 760px) {
  .steps li { grid-template-columns: 1fr; gap: 6px; }
  .hero__markets-label { font-size: 13px; }
}
@media (max-width: 420px) {
  .audience-tabs > button { flex: 1 1 0; min-width: 0; padding: 0 10px 12px; font-size: 14px; }
}

/* ---------- English type treatment ----------
   Eyebrows, card titles, tabs and tags are tracked uppercase in English; Korean has no
   case, so it keeps the sentence-case styling above. */
/* the English caption is shorter, so its floating card is narrower still; both keep the
   design's right edge and size the card to the balanced text instead of a fixed 292px */
@media (min-width: 1120px) {
  html[lang="en"] .hero__caption { left: -48px; width: 200px; }
}
html[lang="en"] .hero__markets-label { letter-spacing: 0.14em; text-transform: uppercase; }
html[lang="en"] :is(.ecosystem__eyebrow, .audience__eyebrow, .card__eyebrow, .contact__eyebrow) {
  letter-spacing: 0.1em; text-transform: uppercase;
}
html[lang="en"] .panel__tag { letter-spacing: 0.1em; text-transform: uppercase; }
html[lang="en"] .card__title { line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
html[lang="en"] .card__kicker { letter-spacing: 0.1em; text-transform: uppercase; }
html[lang="en"] .audience-tabs > button { letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 899px) {
  html[lang="en"] :is(.ecosystem__eyebrow, .audience__eyebrow) { letter-spacing: 0.01em; line-height: 1.12; }
  html[lang="en"] .card > .card__kicker { letter-spacing: 0.08em; }
  html[lang="en"] .audience-tabs > button { letter-spacing: 0.04em; }
  html[lang="en"] .contact__title { text-transform: uppercase; }
}