:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-soft: #f0f0ed;
  --ink: #161616;
  --ink-soft: #353532;
  --muted: #777873;
  --muted-light: #989993;
  --line: #dfdfda;
  --line-strong: #c9c9c3;
  --accent: #dc4c3f;
  --accent-dark: #a93b32;
  --green: #137b53;
  --content: 1380px;
  --page-x: 42px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 8px 24px rgba(23, 23, 20, .06);
  --shadow-md: 0 20px 60px rgba(23, 23, 20, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .96), transparent 42rem),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.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; }

.site-progress { position: fixed; inset: 0 auto auto 0; z-index: 200; width: 0; height: 2px; background: var(--accent); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 247, 245, .88);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled { background: rgba(247, 247, 245, .96); border-color: var(--line); }
.site-header__inner {
  position: relative;
  width: min(var(--content), 100%);
  height: 76px;
  margin: 0 auto;
  padding: 0 var(--page-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 13px; flex: 0 0 auto; font-family: inherit; font-size: 19px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.brand img { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; filter: none; }
.site-header__inner > .brand { position: absolute; left: var(--page-x); }
.desktop-nav { display: flex; align-items: center; gap: 19px; margin: 0; }
.desktop-nav a, .mobile-nav a { color: var(--ink-soft); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-dropdown { position: relative; }
.nav-trigger { position: relative; min-height: 0; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 0; color: var(--ink-soft); background: transparent; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0; transition: color .2s ease; }
.nav-trigger::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.nav-trigger:hover, .nav-dropdown.is-open .nav-trigger { color: var(--ink); background: transparent; }
.nav-trigger:hover::after, .nav-dropdown.is-open .nav-trigger::after { transform: scaleX(1); transform-origin: left; }
.nav-mega { --nav-anchor-x: 50%; position: fixed; z-index: 150; top: 76px; left: 50%; width: min(1040px, calc(100vw - 48px)); min-height: 0; max-height: calc(100vh - 96px); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: visible; visibility: hidden; opacity: 0; pointer-events: none; border: 1px solid rgba(201, 201, 195, .92); border-radius: 20px; background: rgba(255, 255, 255, .975); box-shadow: 0 34px 110px rgba(23, 23, 20, .18), 0 4px 16px rgba(23, 23, 20, .06); backdrop-filter: blur(24px); transform: translate(-50%, -8px) scale(.975); transform-origin: var(--nav-anchor-x) top; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.nav-mega::before { content: ""; position: absolute; z-index: 2; top: -7px; left: var(--nav-anchor-x); width: 14px; height: 14px; border-top: 1px solid rgba(201, 201, 195, .92); border-left: 1px solid rgba(201, 201, 195, .92); background: #fff; transform: translateX(-50%) rotate(45deg); }
.nav-dropdown.is-open .nav-mega { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.nav-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(247, 247, 244, .76)); }
.nav-mega__grid a { min-height: 145px; padding: 19px 18px; display: flex; align-items: flex-start; gap: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .22s ease, transform .22s ease, box-shadow .22s ease; }
.nav-mega__grid a:nth-child(2n) { border-right: 0; }
.nav-mega__grid a:nth-last-child(-n+2) { border-bottom: 0; }
.nav-mega__grid a:hover { z-index: 1; background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 23, 20, .08); }
.nav-mega__grid a::after { display: none; }
.nav-mega__grid--products a { position: relative; min-height: 145px; padding: 0; align-items: stretch; gap: 0; background: #f3f3ef; }
.nav-mega__grid--products a:hover { background: #f3f3ef; }
.nav-mega__grid--products .nav-real-card__visual--demo { position: absolute; z-index: 0; inset: 0; width: auto; height: auto; overflow: hidden; border: 0; border-radius: 0; background: #e7e7e2; }
.nav-mega__grid--products .nav-real-card__visual--demo .product-card__demo { position: absolute; inset: 0; width: 100%; height: 100%; }
.nav-mega__grid--products .nav-real-card__visual--demo::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 37%, rgba(255, 255, 255, .62) 69%, rgba(255, 255, 255, .98) 100%); }
.nav-mega__grid--products .nav-real-card--product > span:last-child { position: relative; z-index: 2; width: 100%; min-width: 0; margin-top: auto; padding: 57px 18px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 43%, rgba(255, 255, 255, .96) 100%); }
.nav-mega__grid--products .nav-real-card--product strong { font-size: 14px; }
.nav-mega__grid--products .nav-real-card--product small { margin-top: 5px; }
.nav-mega__grid--products .product-card__demo--music { padding: 24px 8% 52px; }
.nav-mega__grid--products .product-card__demo--voice { padding: 24px 28% 52px 9%; }
.nav-mega__grid--products .product-card__demo--music i { width: 7px; }
.nav-mega__grid--products .product-card__demo--voice i { width: 4px; }
.nav-mega__grid strong, .nav-mega__grid small { display: block; }
.nav-mega__grid strong { color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.35; }
.nav-mega__grid small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.nav-mega__icon { width: 40px; min-width: 40px; height: 40px; padding: 9px; display: block; border: 0; border-radius: 11px; color: #bd433a; background: #fff0ed; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: inset 0 0 0 1px rgba(189, 67, 58, .09); }
.nav-real-card { min-width: 0; }
.nav-real-card__icon { min-width: 42px; height: 42px; padding: 0 4px; display: inline-grid; place-items: center; border: 1px solid rgba(220, 76, 63, .18); border-radius: 12px; color: var(--accent); background: #fff8f5; font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .62); }
.nav-real-card__visual { width: 105px; height: 70px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(23, 23, 20, .08); border-radius: 11px; background: #f1f1ee; transform: none; }
.nav-real-card__visual > * { max-width: 100%; }
.nav-real-card__visual + span { margin-left: 0; }
.nav-real-card--community { align-items: center !important; }
.nav-real-card--community img { width: 116px; height: 116px; flex: 0 0 auto; padding: 0; object-fit: contain; border: 1px solid rgba(23, 23, 20, .09); border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(23, 23, 20, .1); }
.nav-mega__grid--community .nav-real-card { min-height: 155px; padding: 14px 16px; }
.nav-mega__grid--community .nav-real-card strong, .nav-mega__grid--community .nav-real-card small { display: block; }
.nav-mega__grid--community .nav-real-card strong { color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.35; }
.nav-mega__grid--community .nav-real-card small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.nav-real-card--community small { margin-top: 6px; }
.nav-mega--community { width: min(1120px, calc(100vw - 32px)); }
.nav-contact-content { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.nav-mega__grid--community { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-mega__grid--community a { min-height: 155px; padding-top: 14px; padding-bottom: 14px; }
.nav-mega__grid--community a:nth-child(2n) { border-right: 1px solid var(--line); }
.nav-mega__grid--community a:nth-child(3n) { border-right: 0; }
.nav-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.nav-contact-actions a { min-width: 0; min-height: 88px; padding: 15px 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 4px 14px; border-right: 1px solid var(--line); color: var(--ink); }
.nav-contact-actions a:last-child { border-right: 0; }
.nav-contact-actions a:hover { background: rgba(247, 247, 244, .82); }
.nav-contact-actions strong { font-size: 14px; font-weight: 650; }
.nav-contact-actions small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.nav-contact-actions b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); font-size: 17px; font-weight: 500; transition: transform .2s ease; }
.nav-contact-actions a:hover b { transform: translateX(4px); }
.nav-mega__grid--tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-mega__grid.nav-mega__grid--tools a { min-height: 94px; padding: 13px 15px; align-items: center; gap: 13px; }
.nav-mega__grid--tools a:nth-child(2n) { border-right: 1px solid var(--line); }
.nav-mega__grid--tools a:nth-child(3n) { border-right: 0; }
.nav-mega__grid--tools a:nth-last-child(-n+3) { border-bottom: 0; }
.nav-mega__grid--tools a:nth-child(3n+2) .nav-mega__icon { color: #286f8f; background: #edf7fa; box-shadow: inset 0 0 0 1px rgba(40, 111, 143, .09); }
.nav-mega__grid--tools a:nth-child(3n) .nav-mega__icon { color: #527653; background: #f0f7ef; box-shadow: inset 0 0 0 1px rgba(82, 118, 83, .09); }
.nav-mega__grid--tools strong { font-size: 14px; }
.nav-mega__grid--tools small { max-width: 30ch; margin-top: 4px; font-size: 11px; line-height: 1.45; }
.nav-real-card--tool { align-items: center !important; }
.nav-real-card--tool .nav-real-card__icon { min-width: 58px; max-width: 72px; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
.nav-mega--compact { width: min(860px, calc(100vw - 48px)); }
.nav-mega--compact .nav-mega__grid { background: #fff; }
.nav-mega--compact .nav-join-card { position: relative; min-height: 100%; padding: 22px 18px; flex-direction: column; gap: 17px; overflow: hidden; }
.nav-mega--compact .nav-join-card::before { content: ""; position: absolute; right: -42px; bottom: -58px; width: 154px; height: 154px; border: 1px solid rgba(220, 76, 63, .08); border-radius: 50%; box-shadow: 0 0 0 22px rgba(220, 76, 63, .025); transition: transform .28s ease; }
.nav-mega--compact .nav-join-card:hover::before { transform: translate(-5px, -5px); }
.nav-join-card__body { position: relative; z-index: 1; min-width: 0; width: 100%; flex: 1; display: flex; flex-direction: column; }
.nav-join-card__meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 7px; }
.nav-join-card__meta em { padding: 6px 9px; border: 1px solid rgba(23, 23, 20, .09); border-radius: 999px; color: var(--ink-soft); background: rgba(247, 247, 244, .78); font-size: 10px; font-style: normal; line-height: 1; }
.nav-join-card__action { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); border-top: 1px solid rgba(23, 23, 20, .08); font-size: 11px; font-weight: 650; }
.nav-join-card__action b { color: var(--accent); font-size: 15px; font-weight: 500; transition: transform .2s ease; }
.nav-join-card:hover .nav-join-card__action b { transform: translateX(4px); }
.header-actions { position: absolute; right: var(--page-x); display: flex; align-items: center; gap: 18px; }
.header-actions .text-link { color: var(--ink-soft); font-size: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: none; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(3px); }
.button {
  min-height: 45px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button--small { min-height: 39px; padding-inline: 18px; }
.button--dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.button--dark:hover { background: #343431; }
.button--outline { background: rgba(255, 255, 255, .45); border-color: var(--line-strong); }
.button--outline:hover { background: var(--surface); border-color: var(--ink); }
.button--light { color: var(--ink); background: #fff; border-color: #fff; }
.button--light:hover { background: #eeeeea; }
.menu-toggle { width: 40px; height: 40px; padding: 9px; display: none; flex-direction: column; justify-content: center; gap: 5px; border: 0; background: transparent; }
.menu-toggle span:not(.sr-only) { width: 100%; height: 1px; background: var(--ink); }
.mobile-nav { display: none; padding: 9px var(--page-x) 22px; border-top: 1px solid var(--line); background: rgba(247, 247, 245, .98); }
.mobile-nav.is-open { display: grid; }
.mobile-nav > details { border-bottom: 1px solid var(--line); }
.mobile-nav summary { padding: 14px 0; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "＋"; float: right; color: var(--muted-light); font-size: 17px; font-weight: 400; transition: transform .2s ease; }
.mobile-nav details[open] summary::after { transform: rotate(45deg); }
.mobile-nav__panel { padding: 0 0 9px 14px; display: grid; gap: 0; }
.mobile-nav__panel a { padding: 9px 0; color: var(--muted); border: 0; font-size: 12px; }
.mobile-nav > a { padding: 14px 0; border-bottom: 1px solid var(--line); }

.section-shell { width: min(var(--content), 100%); margin: 0 auto; padding: 56px var(--page-x); scroll-margin-top: 76px; }
.section-shell--border { border-top: 1px solid var(--line); }
.section-shell--tint, .section-shell--dark {
  width: 100%;
  padding-right: max(var(--page-x), calc((100vw - var(--content)) / 2 + var(--page-x)));
  padding-left: max(var(--page-x), calc((100vw - var(--content)) / 2 + var(--page-x)));
}
.section-shell--tint { background: var(--surface-soft); }
.section-shell--dark { color: #fff; background: #151513; }
.eyebrow { margin-bottom: 19px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.hero {
  padding-top: 42px;
  padding-bottom: 38px;
  text-align: left;
}
.hero-showcase {
  min-height: 0;
}
.hero-copy { max-width: 100%; padding: 6px 0 40px; }
.hero h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 .16em;
  border: 1px solid rgba(76, 111, 232, .18);
  border-radius: 8px;
  color: #4c6fe8;
  background: rgba(76, 111, 232, .06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
}
.hero h1::before { content: "✦"; margin-right: 4px; color: #58a8f8; }
.hero-title__line, .hero-title__accent { display: inline; }
.hero-title__line { color: inherit; text-shadow: none; }
.hero-title__line > span { display: inline; }
.hero-title__latin {
  display: inline !important;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  vertical-align: baseline;
}
.hero-title__accent { margin-left: 0; color: inherit; white-space: nowrap; font-weight: 600; letter-spacing: 0; }
.hero__lede { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-portals { width: 100%; margin: 6px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }
.hero-portal-card { position: relative; min-width: 0; min-height: 168px; padding: 20px 20px 18px; overflow: hidden; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 18px; border: 1px solid rgba(223, 223, 218, .92); border-radius: var(--radius-md); background: rgba(255, 255, 255, .78); box-shadow: 0 12px 30px rgba(23, 23, 20, .055); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.hero-portal-card:hover { border-color: var(--line-strong); box-shadow: 0 20px 42px rgba(23, 23, 20, .12); transform: translateY(-4px); }
.hero-portal-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-portal-card__media { position: relative; width: 108px; height: 118px; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: transparent; }
.hero-portal-card__media::before { display: none; }
.hero-portal-card__media::after { display: none; }
.hero-portal-card__media img { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.hero-portal-card__brand-mark { position: relative; z-index: 2; width: 96px; height: 96px; max-width: 100%; max-height: 100%; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; }
.hero-portal-card__brand-mark::before { display: none; }
.hero-portal-card__brand-mark img { position: relative; z-index: 1; width: 88px !important; height: 88px !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; }
.hero-portal-card__watermark { display: none; }
.hero-portal-card--tuzi-api .hero-portal-card__media { background: transparent; }
.hero-portal-card--tuzi-api .hero-portal-card__brand-mark img { width: 88px !important; height: 88px !important; }
.hero-portal-card--opentu .hero-portal-card__media { background: transparent; }
.hero-portal-card--opentu .hero-portal-card__brand-mark img { width: 84px !important; height: 84px !important; }
.hero-portal-card--direct .hero-portal-card__media { background: transparent; }
.hero-portal-card--direct .hero-portal-card__brand-mark img { width: 84px !important; height: 84px !important; }
.hero-portal-card--store .hero-portal-card__media { background: transparent; }
.hero-portal-card--store .hero-portal-card__brand-mark img { width: 84px !important; height: 84px !important; }
.hero-portal-card:hover .hero-portal-card__brand-mark img { transform: scale(1.035); }
.hero-portal-card__body { min-width: 0; min-height: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-portal-card__topline { display: none; }
.hero-portal-card__topline b { display: none; }
.hero-portal-card__body strong { margin: 0; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: 0; line-height: 1.3; white-space: nowrap; }
.hero-portal-card__description { min-height: 0; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.62; }
.hero-portal-card__link { display: none; }
.hero-portal-card__link span { display: none; }
#console { position: relative; padding-top: 32px; border-top: 0; }
#console::before { content: ""; position: absolute; top: 0; right: var(--page-x); left: var(--page-x); border-top: 1px solid var(--line); }

@media (min-width: 761px) and (max-height: 820px) {
  .hero { padding-top: 26px; padding-bottom: 30px; }
  .hero h1 { font-size: clamp(46px, 4vw, 62px); }
  .hero__lede { margin-top: 16px; font-size: 14px; }
  #console { padding-top: 20px; }
}
.prompt-box {
  width: min(790px, 100%);
  min-height: 186px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 92% 8%, rgba(220, 76, 63, .07), transparent 11rem),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(249, 249, 246, .88));
  box-shadow: 0 24px 70px rgba(23, 23, 20, .11), 0 2px 8px rgba(23, 23, 20, .04);
  text-align: left;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.prompt-box:focus-within { border-color: #bcbcb4; box-shadow: 0 28px 78px rgba(23, 23, 20, .14), 0 2px 8px rgba(23, 23, 20, .04); transform: translateY(-1px); }
.mode-tabs { min-height: 53px; padding: 8px 12px 0; display: flex; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab { position: relative; flex: 0 0 auto; padding: 8px 13px 13px; border: 0; border-radius: 9px 9px 0 0; outline: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; transition: color .2s ease, background .2s ease; }
.mode-tab::after { content: ""; position: absolute; right: 13px; bottom: -1px; left: 13px; height: 2px; background: transparent; border-radius: 2px; transform: scaleX(.65); transition: background .2s, transform .2s; }
.mode-tab:hover { color: var(--ink-soft); background: rgba(23, 23, 20, .035); }
.mode-tab:focus-visible { box-shadow: inset 0 0 0 1px rgba(220, 76, 63, .42); }
.mode-tab.is-active { color: var(--ink); background: rgba(23, 23, 20, .045); font-weight: 700; }
.mode-tab.is-active::after { background: var(--accent); transform: scaleX(1); }
.prompt-editor { position: relative; min-height: 81px; }
.prompt-box textarea { position: relative; z-index: 1; width: 100%; min-height: 81px; padding: 22px 23px 7px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; line-height: 1.65; }
.prompt-box textarea::placeholder { color: #a2a29d; }
.prompt-editor.is-demo textarea::placeholder { color: transparent; }
.prompt-demo { position: absolute; z-index: 2; top: 18px; right: 23px; left: 23px; min-height: 66px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.prompt-demo.is-hidden { opacity: 0; transform: translateY(3px); }
.prompt-demo__topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--muted-light); font-size: 10px; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.prompt-demo__status { display: inline-flex; align-items: center; gap: 6px; }
.prompt-demo__status i, .prompt-demo__result i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #55a87b; box-shadow: 0 0 0 3px rgba(85, 168, 123, .12); }
.prompt-demo__badge { padding: 4px 7px; border: 1px solid rgba(23, 23, 20, .09); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .62); font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.prompt-demo__copy { min-height: 27px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.prompt-demo__caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--accent); animation: prompt-caret 1s steps(1, end) infinite; }
.prompt-demo__result { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted-light); font-size: 11px; line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.prompt-demo.is-result .prompt-demo__caret { opacity: 0; }
.prompt-demo.is-result .prompt-demo__result { opacity: 1; transform: translateY(0); }
.prompt-demo[data-mode="api"] .prompt-demo__badge { color: #4764a8; border-color: rgba(71, 100, 168, .18); background: rgba(228, 236, 255, .55); }
.prompt-demo[data-mode="image"] .prompt-demo__badge { color: #6c4c9a; border-color: rgba(108, 76, 154, .18); background: rgba(242, 234, 255, .62); }
.prompt-demo[data-mode="video"] .prompt-demo__badge { color: #1a7669; border-color: rgba(26, 118, 105, .18); background: rgba(225, 247, 241, .62); }
.prompt-demo[data-mode="music"] .prompt-demo__badge { color: #986a18; border-color: rgba(152, 106, 24, .18); background: rgba(255, 244, 207, .72); }
@keyframes prompt-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.prompt-box__footer { min-height: 52px; padding: 6px 14px 12px 23px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prompt-hint { color: var(--muted-light); font-size: 12px; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .2s ease, background .2s ease; }
.icon-button--dark { color: #fff; background: var(--ink); }
.icon-button:hover { transform: translateX(2px); background: var(--accent); }
.hero__links { margin-top: 24px; display: flex; justify-content: center; gap: 10px; }
.hero__note { margin: 17px 0 0; color: var(--muted-light); font-size: 12px; }

.section-heading { margin-bottom: 58px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr); align-items: end; gap: 54px; }
.section-heading h2 { max-width: 850px; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: clamp(36px, 3vw, 48px); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.section-heading--product h2 { font-size: clamp(36px, 3vw, 48px); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.product-heading__description { max-width: 680px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.section-heading--dark .eyebrow { color: #db8e84; }
.section-heading--dark > p { color: #a9a9a4; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.product-card { position: relative; min-height: 305px; padding: 30px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); transition: background .25s ease, box-shadow .25s ease; }
.product-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, .08) 58%, rgba(255, 255, 255, .56) 72%, rgba(255, 255, 255, .92) 88%, rgba(255, 255, 255, .96) 100%); transition: background .25s ease; }
.product-card:nth-child(3n) { border-right: 0; }
.product-card:last-child { border-bottom: 0; }
.product-card:hover { z-index: 1; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.product-card:hover::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, .46) 72%, rgba(255, 255, 255, .88) 88%, rgba(255, 255, 255, .94) 100%); }
.product-card--wide { grid-column: span 2; }
.product-card--media { min-height: 380px; }
.product-card:last-child { grid-column: 1 / -1; min-height: 230px; display: grid; grid-template-columns: minmax(190px, .65fr) minmax(320px, 1.35fr) auto; grid-template-rows: auto 1fr; align-items: end; column-gap: 48px; border-right: 0; }
.product-card:last-child .card-index { grid-column: 1 / -1; align-self: start; }
.product-card:last-child h3 { grid-column: 1; grid-row: 2; margin: 0; }
.product-card:last-child p { grid-column: 2; grid-row: 2; align-self: end; max-width: 650px; margin: 0; }
.product-card:last-child .card-link { grid-column: 3; grid-row: 2; align-self: end; white-space: nowrap; }
.card-index { color: rgba(23, 23, 20, .62); font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-shadow: 0 1px 8px rgba(255, 255, 255, .92); }
.card-icon { position: absolute; top: 26px; right: 28px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(23, 23, 20, .12); border-radius: 50%; color: var(--accent); background: rgba(255, 255, 255, .86); box-shadow: 0 5px 18px rgba(23, 23, 20, .06); backdrop-filter: blur(8px); font-size: 18px; }
.product-card h3 { margin: auto 0 11px; font-size: 25px; font-weight: 600; letter-spacing: -.035em; }
.product-card p { max-width: 500px; margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.72; }
.card-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.product-card .card-index, .product-card .card-icon, .product-card h3, .product-card p, .product-card .card-link { position: relative; z-index: 2; }
.product-card .card-icon { position: absolute; }
.product-card__demo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 1; }

.product-card__demo--chat, .product-card__demo--image, .product-card__demo--video { border: 0; border-radius: 0; background: #202625; box-shadow: none; }
.product-card__demo--chat img, .product-card__demo--image img, .product-card__demo--video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-card__demo--chat img { object-position: center; }
.product-card__demo--image { background: #162d34; }
.product-card__demo--image img { object-position: center 46%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.product-card:hover .product-card__demo--image img { transform: scale(1.045); }
.product-card__demo--video { background: #101513; }
.product-card__demo--video video { object-position: center 47%; transform: scale(1.3); transform-origin: center 63%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.product-card:hover .product-card__demo--video video { transform: scale(1.34); }

/* Media cards keep their artwork visible beneath the copy instead of ending in a white panel. */
.product-card--media::after { background: linear-gradient(180deg, rgba(8, 17, 27, 0) 0%, rgba(8, 17, 27, 0) 56%, rgba(8, 17, 27, .06) 66%, rgba(8, 17, 27, .28) 84%, rgba(8, 17, 27, .52) 100%); }
.product-card--media:hover::after { background: linear-gradient(180deg, rgba(8, 17, 27, 0) 0%, rgba(8, 17, 27, 0) 56%, rgba(8, 17, 27, .05) 66%, rgba(8, 17, 27, .24) 84%, rgba(8, 17, 27, .46) 100%); }
.product-card--media .card-index { color: rgba(255, 255, 255, .78); text-shadow: 0 1px 12px rgba(0, 0, 0, .42); }
.product-card--media h3 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .42); }
.product-card--media p { color: rgba(255, 255, 255, .84); text-shadow: 0 1px 10px rgba(0, 0, 0, .38); }
.product-card--media .card-link { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.product-card--media .card-link span { color: #b9f1ec; }
.product-card--media.product-card--image::after { background: linear-gradient(180deg, rgba(11, 11, 37, 0) 0%, rgba(11, 11, 37, 0) 56%, rgba(11, 11, 37, .07) 66%, rgba(11, 11, 37, .3) 84%, rgba(11, 11, 37, .54) 100%); }
.product-card--media.product-card--image:hover::after { background: linear-gradient(180deg, rgba(11, 11, 37, 0) 0%, rgba(11, 11, 37, 0) 56%, rgba(11, 11, 37, .05) 66%, rgba(11, 11, 37, .25) 84%, rgba(11, 11, 37, .48) 100%); }
.product-card--media.product-card--video::after { background: linear-gradient(180deg, rgba(8, 30, 31, 0) 0%, rgba(8, 30, 31, 0) 56%, rgba(8, 30, 31, .06) 66%, rgba(8, 30, 31, .3) 84%, rgba(8, 30, 31, .52) 100%); }
.product-card--media.product-card--video:hover::after { background: linear-gradient(180deg, rgba(8, 30, 31, 0) 0%, rgba(8, 30, 31, 0) 56%, rgba(8, 30, 31, .05) 66%, rgba(8, 30, 31, .25) 84%, rgba(8, 30, 31, .46) 100%); }

.product-card--music, .product-card--voice { color: #193247; background: #eef5f7; }
.product-card--music::after { background: linear-gradient(180deg, rgba(232, 244, 245, 0) 0%, rgba(232, 244, 245, 0) 51%, rgba(232, 244, 245, .05) 61%, rgba(210, 234, 238, .28) 82%, rgba(207, 231, 235, .48) 100%); }
.product-card--music:hover::after { background: linear-gradient(180deg, rgba(232, 244, 245, 0) 0%, rgba(232, 244, 245, 0) 51%, rgba(232, 244, 245, .04) 61%, rgba(210, 234, 238, .23) 82%, rgba(207, 231, 235, .42) 100%); }
.product-card--voice::after { background: linear-gradient(180deg, rgba(241, 239, 249, 0) 0%, rgba(241, 239, 249, 0) 51%, rgba(241, 239, 249, .05) 61%, rgba(224, 224, 243, .28) 82%, rgba(226, 220, 239, .5) 100%); }
.product-card--voice:hover::after { background: linear-gradient(180deg, rgba(241, 239, 249, 0) 0%, rgba(241, 239, 249, 0) 51%, rgba(241, 239, 249, .04) 61%, rgba(224, 224, 243, .23) 82%, rgba(226, 220, 239, .44) 100%); }
.product-card--music .card-index, .product-card--voice .card-index { color: rgba(35, 74, 96, .72); text-shadow: 0 1px 10px rgba(255, 255, 255, .8); }
.product-card--music .card-icon, .product-card--voice .card-icon { color: #237f91; border-color: rgba(45, 128, 150, .22); background: rgba(255, 255, 255, .78); box-shadow: 0 8px 24px rgba(42, 94, 116, .12), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.product-card--music h3, .product-card--voice h3 { color: #193247; }
.product-card--music p, .product-card--voice p { color: rgba(46, 76, 92, .78); }
.product-card--music .card-link, .product-card--voice .card-link { color: #193247; }
.product-card__demo--music { padding: 54px 8% 116px; display: flex; align-items: center; justify-content: space-evenly; gap: clamp(5px, 1.3vw, 14px); background-color: #e8f4f5; background-image: radial-gradient(circle at 78% 20%, rgba(73, 201, 190, .22), transparent 27%), radial-gradient(circle at 17% 86%, rgba(115, 132, 236, .16), transparent 31%), linear-gradient(135deg, #edf8f8 0%, #e8f2f7 54%, #eef0fb 100%); }
.product-card__demo--music i, .product-card__demo--voice i { display: block; border-radius: 2px; transform-origin: center; will-change: transform; animation: product-wave 1.35s ease-in-out infinite alternate; }
.product-card__demo--music i { width: clamp(6px, .85vw, 10px); height: 76%; background: linear-gradient(180deg, #5fd9cf 0%, #47a9d6 52%, #7180db 100%); box-shadow: 0 0 16px rgba(74, 176, 208, .25), 0 8px 24px rgba(64, 104, 126, .12); }
.product-card__demo--music i:nth-child(3n+1) { height: 46%; background: linear-gradient(180deg, #efa4bd 0%, #d67ba1 100%); animation-delay: -.7s; }
.product-card__demo--music i:nth-child(3n+2) { height: 94%; background: linear-gradient(180deg, #e5cf78 0%, #d6a54e 100%); animation-delay: -1.1s; }
.product-card__demo--music i:nth-child(4n) { height: 62%; animation-delay: -.35s; }

.product-card__demo--voice { padding: 54px 34% 116px 9%; display: flex; align-items: center; justify-content: space-evenly; gap: clamp(4px, .75vw, 9px); background-color: #f1eff9; background-image: radial-gradient(circle at 74% 23%, rgba(238, 136, 183, .2), transparent 25%), radial-gradient(circle at 24% 74%, rgba(91, 191, 224, .18), transparent 32%), linear-gradient(135deg, #edf3fa 0%, #f2eff8 52%, #f9edf2 100%); }
.product-card__demo--voice i { width: clamp(4px, .6vw, 7px); height: 70%; background: linear-gradient(180deg, #58c9dc 0%, #6099d7 50%, #7a79c9 100%); box-shadow: 0 0 14px rgba(76, 171, 213, .22), 0 7px 20px rgba(72, 91, 139, .12); }
.product-card__demo--voice i:nth-child(2n) { height: 34%; animation-delay: -.85s; }
.product-card__demo--voice i:nth-child(3n) { height: 92%; background: linear-gradient(180deg, #ec9fc2 0%, #d978a3 100%); animation-delay: -.35s; }
.product-card__demo--voice b { position: absolute; right: 8%; width: 22%; height: 6px; border: 1px solid rgba(80, 161, 201, .26); border-radius: 4px; background: linear-gradient(90deg, rgba(79, 180, 211, .62), rgba(123, 111, 201, .2)); box-shadow: 0 0 12px rgba(87, 168, 204, .14); }
.product-card__demo--voice b:nth-of-type(1) { top: 29%; animation: product-transcript 3.2s ease-in-out infinite; }
.product-card__demo--voice b:nth-of-type(2) { top: 42%; width: 16%; animation: product-transcript 3.2s ease-in-out -1.6s infinite; }

.product-card__demo--omni { overflow: hidden; background: linear-gradient(120deg, #eceff2 0%, #f2eee6 50%, #eee7e7 100%); }
.product-card:last-child::after { background: linear-gradient(180deg, rgba(236, 239, 242, 0) 0%, rgba(236, 239, 242, 0) 51%, rgba(236, 239, 242, .04) 61%, rgba(221, 225, 229, .24) 82%, rgba(221, 225, 229, .46) 100%); }
.product-card:last-child:hover::after { background: linear-gradient(180deg, rgba(236, 239, 242, 0) 0%, rgba(236, 239, 242, 0) 51%, rgba(236, 239, 242, .03) 61%, rgba(221, 225, 229, .2) 82%, rgba(221, 225, 229, .4) 100%); }
.product-card__demo--omni::before { content: ""; position: absolute; top: 38%; right: 8%; left: 8%; border-top: 1px dashed rgba(23, 23, 20, .2); }
.product-card__demo--omni i, .product-card__demo--omni b { position: absolute; top: calc(38% - 24px); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(23, 23, 20, .1); border-radius: 8px; color: var(--ink-soft); background: rgba(255, 255, 255, .9); font-size: 14px; font-style: normal; font-weight: 600; box-shadow: 0 9px 24px rgba(23, 23, 20, .08); backdrop-filter: blur(8px); animation: product-omni-node 3.8s ease-in-out infinite; }
.product-card__demo--omni i:nth-of-type(1) { left: 8%; color: #627a9a; }
.product-card__demo--omni i:nth-of-type(2) { left: 22%; color: #247568; animation-delay: -.9s; }
.product-card__demo--omni b { z-index: 2; left: 50%; color: #fff; border-color: var(--ink); border-radius: 50%; background: var(--ink); transform: translateX(-50%); animation: product-omni-hub 3.8s ease-in-out infinite; }
.product-card__demo--omni i:nth-of-type(3) { right: 22%; color: #a67622; animation-delay: -1.8s; }
.product-card__demo--omni i:nth-of-type(4) { right: 8%; color: var(--accent); animation-delay: -2.7s; }

@keyframes product-video-progress { 0% { transform: scaleX(.08); } 88%, 100% { transform: scaleX(1); } }
@keyframes product-wave { 0% { transform: scaleY(.38); opacity: .58; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes product-transcript { 0%, 100% { opacity: .35; transform: scaleX(.64); transform-origin: left; } 55% { opacity: 1; transform: scaleX(1); transform-origin: left; } }
@keyframes product-omni-node { 0%, 100% { transform: translateY(3px); opacity: .62; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes product-omni-hub { 0%, 100% { transform: translateX(-50%) scale(.94); box-shadow: 0 0 0 0 rgba(220, 76, 63, 0); } 50% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 0 7px rgba(220, 76, 63, .08); } }

.model-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.55fr); gap: 72px; }
.model-feature { min-height: 443px; padding: 37px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.model-feature__top { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(19, 123, 83, .1); }
.model-feature h3 { margin: auto 0 17px; font-size: 35px; font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
.model-feature p { margin: 0 0 28px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.model-feature .button { align-self: flex-start; }
.model-list { overflow: hidden; border-top: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.model-row { min-height: 90px; padding: 0 19px; display: grid; grid-template-columns: 125px minmax(0, 1fr) 110px; align-items: center; gap: 24px; border-bottom: 1px solid var(--line-strong); }
.model-row:last-child { border-bottom: 0; }
.model-row span, .model-row em { color: var(--muted); font-size: 11px; font-style: normal; }
.model-row strong { font-size: 14px; font-weight: 600; line-height: 1.55; }
.model-row em { text-align: right; }

.studio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.studio-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.studio-card__visual { aspect-ratio: 4 / 2.65; padding: 25px; display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; gap: 10px; }
.studio-card__visual span { font-size: clamp(15px, 2.1vw, 29px); font-weight: 750; letter-spacing: -.06em; }
.studio-card__visual b { font-size: 35px; font-weight: 450; }
.studio-card--image .studio-card__visual { color: #34325d; background: #dcdcff; }
.studio-card--video .studio-card__visual { color: #e7f4ed; background: #216359; }
.studio-card--music .studio-card__visual { color: #5a4215; background: #f3c967; }
.studio-card__body { padding: 26px 28px 29px; }
.studio-card__body .eyebrow { margin-bottom: 12px; color: var(--muted-light); }
.studio-card__body h3 { min-height: 62px; margin: 0 0 11px; font-size: 22px; font-weight: 600; letter-spacing: -.04em; line-height: 1.35; }
.studio-card__body p { min-height: 48px; margin: 0 0 23px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.developer-layout { display: grid; grid-template-columns: minmax(0, 1.26fr) minmax(360px, .86fr); gap: 72px; }
.code-panel { min-width: 0; overflow: hidden; border: 1px solid #3a3a38; border-radius: var(--radius-md); background: #1c1c1a; box-shadow: 0 22px 45px rgba(0, 0, 0, .18); }
.code-panel__bar { height: 48px; padding: 0 17px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #383836; }
.code-panel__bar span { width: 8px; height: 8px; border-radius: 50%; background: #696966; }
.code-panel__bar small { margin-left: auto; color: #969691; font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-panel pre { min-height: 300px; margin: 0; padding: 37px 29px; overflow-x: auto; display: flex; align-items: center; color: #f2f2ee; font: 13px/1.95 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-muted { color: #a3a39c; }
.code-green { color: #86d5a9; }
.developer-list { border-top: 1px solid #42423f; }
.developer-list > div { padding: 17px 0; border-bottom: 1px solid #42423f; }
.developer-list span { display: block; margin-bottom: 5px; color: #a4a49e; font-size: 11px; letter-spacing: .04em; }
.developer-list strong { font-size: 15px; font-weight: 650; }
.developer-list p { margin: 5px 0 0; color: #aaa9a2; font-size: 13px; line-height: 1.65; }

.console-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.console-card { min-height: 250px; padding: 28px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.console-card:nth-child(3n) { border-right: 0; }
.console-card:nth-last-child(-n+3) { border-bottom: 0; }
.console-card__number { color: var(--accent); font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.console-card h3 { margin: 74px 0 11px; font-size: 23px; font-weight: 600; letter-spacing: -.04em; }
.console-card p { margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.console-card .text-link { font-size: 13px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.tool-grid a { position: relative; min-height: 178px; padding: 24px 25px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s ease; }
.tool-grid a:nth-child(3n) { border-right: 0; }
.tool-grid a:nth-last-child(-n+3) { border-bottom: 0; }
.tool-grid a:hover { background: #fff; }
.tool-grid span { color: var(--muted-light); font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; }
.tool-grid strong { margin-top: auto; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.tool-grid em { margin-top: 5px; color: var(--muted); font-size: 12px; font-style: normal; }
.tool-grid b { position: absolute; top: 19px; right: 23px; color: var(--accent); font-size: 18px; font-weight: 400; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.pricing-card { min-height: 495px; padding: 29px 27px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.pricing-card:last-child { border-right: 0; }
.pricing-card--featured { background: #fffaf8; box-shadow: inset 0 3px 0 var(--accent); }
.pricing-card > span { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .07em; }
.pricing-card h3 { margin: 22px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.05em; }
.price { margin: 22px 0 11px; font-size: 50px; font-weight: 600; letter-spacing: -.08em; line-height: 1; }
.price small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.price--text { font-size: 37px; letter-spacing: -.06em; }
.pricing-card p { min-height: 56px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.pricing-card ul { margin: 24px 0; padding: 0; list-style: none; }
.pricing-card li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pricing-card li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 700; }
.pricing-card .button { margin-top: auto; width: 100%; }
.direct-overview__intro p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.direct-overview__intro p strong { color: var(--ink-soft); font-weight: 650; }
.direct-overview__intro .button { width: 100%; }
.direct-capabilities { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.direct-capability { min-height: 405px; padding: 32px 30px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.direct-capability:last-child { border-right: 0; }
.direct-capability--featured { background: var(--surface); box-shadow: none; }
.direct-capability__number { color: var(--muted); font-size: 11px; font-weight: 650; }
.direct-capability h3 { margin: 72px 0 18px; font-size: 36px; font-weight: 550; line-height: 1; }
.direct-capability p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.direct-capability ul { margin: auto 0 0; padding: 28px 0 0; list-style: none; }
.direct-capability li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.direct-capability li::before { content: "✓"; margin-right: 9px; color: var(--green); font-weight: 700; }
.direct-benefits { margin-top: 24px; padding: 27px 30px; display: grid; grid-template-columns: minmax(230px, .9fr) minmax(380px, 1.5fr) auto; align-items: center; gap: 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.direct-benefits strong { margin-top: 7px; display: block; font-size: 20px; font-weight: 550; line-height: 1.35; }
.direct-benefits ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; list-style: none; }
.direct-benefits li { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.direct-benefits li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 700; }
.direct-benefits .text-link { white-space: nowrap; }
.direct-overview__note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.community-card { min-height: 245px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.community-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.community-card img { width: 140px; height: 140px; object-fit: contain; }
.community-card h3 { margin: 16px 0 0; font-size: 15px; font-weight: 650; text-align: center; }
.faq-list { max-width: 940px; margin-left: auto; border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { padding: 22px 46px 22px 0; cursor: pointer; font-size: 17px; font-weight: 650; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; margin-right: -34px; color: var(--accent); font-size: 22px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 740px; margin: -2px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.faq-list code { padding: 2px 5px; border-radius: 4px; color: var(--ink-soft); background: var(--surface-soft); font-size: 12px; }

.site-footer { color: #f5f5f0; background: #151513; }
.site-footer__inner, .site-footer__bottom { width: min(var(--content), 100%); margin: 0 auto; padding-right: var(--page-x); padding-left: var(--page-x); }
.site-footer__inner { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; }
.brand--footer { color: #fff; }
.brand--footer img { width: 36px; height: 36px; flex-basis: 36px; }
.site-footer__inner > div > p { color: #999993; font-size: 13px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.footer-links div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links strong { margin-bottom: 8px; font-size: 13px; }
.footer-links a { color: #a4a49e; font-size: 12px; }
.site-footer__bottom { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #8f8f89; border-top: 1px solid #373733; font-size: 11px; }

@media (max-width: 1100px) {
  :root { --page-x: 30px; }
  .hero-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-nav { gap: 13px; }
  .desktop-nav a, .nav-trigger { font-size: 16px; }
  .nav-mega { top: 76px; width: min(920px, calc(100vw - 40px)); min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 15px; gap: 0; }
  .nav-mega__grid a { min-height: 125px; padding: 16px 14px; }
  .nav-real-card--community img { width: 104px; height: 104px; }
  .nav-mega__grid--community a { padding-top: 10px; padding-bottom: 10px; }
  .nav-mega--community { width: min(1120px, calc(100vw - 16px)); grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 0; }
  .nav-mega--community .nav-real-card--community img { width: 116px; height: 116px; }
  .nav-mega--compact { width: min(700px, calc(100vw - 40px)); }
  .product-grid, .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card--wide { grid-column: auto; }
  .product-card:nth-child(3n), .tool-grid a:nth-child(3n) { border-right: 1px solid var(--line); }
  .product-card:nth-child(2n), .tool-grid a:nth-child(2n) { border-right: 0; }
  .product-card:nth-last-child(-n+3), .tool-grid a:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .product-card:nth-last-child(-n+2), .tool-grid a:nth-last-child(-n+2) { border-bottom: 0; }
  .product-grid .product-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .product-grid .product-card:nth-child(2n+1) { border-right: 0; }
  .product-grid .product-card--wide, .product-grid .product-card:last-child { grid-column: 1 / -1; border-right: 0; }
  .product-grid .product-card:last-child { border-bottom: 0; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-card { display: grid; grid-template-columns: 1fr 1fr; }
  .studio-card__visual { aspect-ratio: auto; min-height: 265px; }
  .studio-card__body { display: flex; flex-direction: column; justify-content: flex-end; }
  .studio-card__body h3, .studio-card__body p { min-height: 0; }
  .developer-layout, .model-layout { grid-template-columns: 1fr; gap: 44px; }
  .model-feature { min-height: 370px; }
  .console-grid { grid-template-columns: repeat(2, 1fr); }
  .console-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .console-card:nth-child(2n) { border-right: 0; }
  .console-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .console-card:nth-last-child(-n+2) { border-bottom: 0; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-card:nth-child(2) { border-right: 0; }
  .pricing-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .direct-benefits { grid-template-columns: 1fr 1.5fr; }
  .direct-benefits .text-link { grid-column: 1 / -1; justify-self: start; }
  .community-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  :root { --page-x: 22px; }
  .site-header__inner { height: 66px; justify-content: space-between; }
  .site-header__inner > .brand { position: static; }
  .header-actions { position: static; margin-left: auto; }
  .desktop-nav, .header-console { display: none; }
  .menu-toggle { display: flex; }
  .section-shell { padding-top: 42px; padding-bottom: 42px; scroll-margin-top: 66px; }
  .hero { min-height: auto; padding-top: 52px; padding-bottom: 32px; }
  .hero h1 { margin-bottom: clamp(36px, 10vw, 52px); font-size: clamp(42px, 11.4vw, 57px); letter-spacing: .025em; line-height: 1.08; }
  .hero-title__line > span { display: block; }
  .hero__lede { margin: 24px auto 30px; font-size: 15px; line-height: 1.7; }
  .hero-portals { grid-template-columns: 1fr; gap: 12px; }
  .hero-portal-card:hover { transform: translateY(-2px); }
  .hero-portal-card__media { aspect-ratio: 16 / 8.8; }
  .hero-portal-card__body { min-height: 126px; }
  .prompt-box { min-height: 179px; border-radius: var(--radius-md); }
  .mode-tabs { padding-left: 9px; }
  .mode-tab { padding-right: 11px; padding-left: 11px; }
  .mode-tab::after { right: 11px; left: 11px; }
  .prompt-editor { min-height: 74px; }
  .prompt-box textarea { min-height: 74px; padding: 18px 17px 5px; font-size: 14px; }
  .prompt-demo { top: 14px; right: 17px; left: 17px; }
  .prompt-demo__copy { font-size: 14px; }
  .prompt-demo__result { font-size: 10px; }
  .nav-mega { top: 66px; right: 16px; left: 16px; width: auto; min-height: 0; grid-template-columns: 1fr; padding: 12px; border-radius: 16px; transform: translateY(-7px) scale(.985); transform-origin: top center; }
  .nav-dropdown.is-open .nav-mega { transform: translateY(0) scale(1); }
  .nav-mega::before { display: none; }
  .nav-mega__grid a { min-height: 92px; padding: 13px 12px; }
  .nav-mega__grid--community { grid-template-columns: 1fr; }
  .nav-contact-actions { grid-template-columns: 1fr; }
  .nav-contact-actions a, .nav-contact-actions a:last-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-contact-actions a:last-child { border-bottom: 0; }
  .nav-mega__grid small { font-size: 10px; }
  .prompt-box__footer { padding-left: 17px; }
  .hero__links { width: 100%; flex-direction: column; gap: 9px; }
  .hero__links .button { width: 100%; }
  .hero__note { max-width: 300px; line-height: 1.6; }
  .section-heading { margin-bottom: 38px; grid-template-columns: 1fr; gap: 15px; }
  .section-heading h2 { font-size: 36px; line-height: 1.18; }
  .section-heading--product h2 { font-size: 36px; line-height: 1.2; }
  .product-heading__description { margin-top: 13px; font-size: 13px; line-height: 1.7; }
  .section-heading > p { font-size: 13px; }
  .product-grid, .tool-grid, .pricing-grid, .console-grid, .community-grid { grid-template-columns: 1fr; }
  .product-card, .tool-grid a, .console-card, .pricing-card { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .product-card:last-child, .tool-grid a:last-child, .console-card:last-child, .pricing-card:last-child { border-bottom: 0 !important; }
  .direct-capabilities { grid-template-columns: 1fr; }
  .direct-capability { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--line); }
  .direct-capability:last-child { border-bottom: 0; }
  .direct-capability h3 { margin-top: 44px; }
  .direct-benefits { padding: 24px 0; grid-template-columns: 1fr; gap: 22px; }
  .direct-benefits ul { grid-template-columns: 1fr; }
  .direct-benefits .text-link { grid-column: auto; }
  .product-card { min-height: 300px; padding: 26px; }
  .product-card.product-card--media { min-height: 356px; }
  .product-card.product-card--wide.product-card--media { min-height: 377px; }
  .product-card--wide { min-height: 340px; }
  .product-card h3 { font-size: 23px; }
  .product-card:last-child { min-height: 300px; display: flex; align-items: stretch; }
  .product-card:last-child h3 { margin: auto 0 11px; }
  .product-card:last-child p { max-width: 500px; margin: 0 0 24px; align-self: stretch; }
  .product-card:last-child .card-link { align-self: flex-start; white-space: normal; }
  .product-card__demo, .product-card__demo--omni { inset: 0; width: 100%; height: 100%; }
  .product-card__demo--music, .product-card__demo--voice { padding-top: 52px; padding-bottom: 116px; }
  .product-card__demo--omni i, .product-card__demo--omni b { width: 42px; height: 42px; top: calc(36% - 21px); }
  .product-card__demo--omni::before { top: 36%; }
  .model-feature { min-height: 390px; padding: 28px; }
  .model-feature h3 { font-size: 31px; }
  .model-row { min-height: 118px; padding: 14px 14px; grid-template-columns: 83px minmax(0, 1fr); gap: 14px; }
  .model-row em { display: none; }
  .model-row strong { font-size: 13px; }
  .studio-card { display: block; }
  .studio-card__visual { min-height: 235px; }
  .studio-card__body h3 { font-size: 21px; }
  .code-panel pre { min-height: 260px; padding: 27px 18px; font-size: 11px; }
  .developer-list > div { padding: 16px 0; }
  .console-card { min-height: 218px; }
  .console-card h3 { margin-top: 63px; font-size: 22px; }
  .pricing-card { min-height: 450px; }
  .community-card { min-height: 235px; }
  .community-card img { width: 130px; height: 130px; }
  .faq-list summary { font-size: 16px; }
  .site-footer__inner { padding-top: 58px; padding-bottom: 58px; grid-template-columns: 1fr; gap: 44px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .site-footer__bottom { min-height: 86px; padding-top: 18px; padding-bottom: 18px; flex-direction: column; align-items: flex-start; justify-content: center; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .nav-mega { overflow: auto; }
  .nav-mega::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .nav-mega--community { width: min(920px, calc(100vw - 40px)); grid-template-columns: minmax(0, 1fr); padding: 15px; }
  .nav-mega__grid--community { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-mega__grid--community a:nth-child(2n) { border-right: 1px solid var(--line); }
  .nav-mega__grid--community a:nth-child(3n) { border-right: 0; }
  .nav-mega--community .nav-real-card--community img { width: 116px; height: 116px; }
}

/* Enterprise API overview: keep the portal palette while replacing the old six-card console grid. */
.api-overview {
  background: linear-gradient(180deg, #f7f7f5 0%, #f0f3f1 100%);
}

.api-overview__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 62px;
}

.api-overview__heading h2 {
  max-width: 800px;
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: clamp(36px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.api-overview__side {
  border-left: 1px solid var(--line-strong);
  padding-left: 28px;
}

.api-overview__side > p {
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.api-overview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.api-overview__actions .text-link,
.api-enterprise__intro .text-link {
  color: var(--ink);
}

.api-overview__actions .text-link:hover,
.api-enterprise__intro .text-link:hover {
  color: var(--accent-dark);
}

.api-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.api-metric {
  --api-signal: var(--accent);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 255px;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--line);
  padding: 30px 27px 25px;
  background: var(--surface);
  transition: background .22s ease, box-shadow .22s ease;
}

.api-metric:first-child { border-left: 3px solid var(--accent); }
.api-metric:last-child { border-right: 1px solid var(--line); }
.api-metric--billing { --api-signal: #6e93e9; }
.api-metric--models { --api-signal: var(--accent); }
.api-metric--users { --api-signal: #2eaa7a; }

.api-metric__heading {
  display: flex;
  min-height: 21px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.api-metric__heading > span:first-child {
  color: #67776a;
  font-size: 12px;
  font-weight: 700;
}

.api-metric__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #949c91;
  font-size: 10px;
  white-space: nowrap;
}

.api-metric__status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--api-signal);
}

.api-metric__status i { animation: api-status-pulse 3.2s infinite ease-in-out; }

.api-metric > strong {
  display: block;
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: 37px;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.api-metric > p {
  max-width: 220px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.api-metric__chart {
  position: relative;
  width: 100%;
  height: 56px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.api-bars {
  display: flex;
  align-items: end;
  gap: 7px;
  padding: 0 2px;
}

.api-bars > i {
  width: 9px;
  min-width: 3px;
  height: 60%;
  border: 1px solid #ccd3cb;
  border-bottom: 0;
  background: #e8eeea;
  transform-origin: bottom center;
}

.api-bars > i:nth-child(1) { height: 92%; }
.api-bars > i:nth-child(2) { height: 84%; }
.api-bars > i:nth-child(3) { height: 76%; }
.api-bars > i:nth-child(4) { height: 68%; }
.api-bars > i:nth-child(5) { height: 61%; }
.api-bars > i:nth-child(6) { height: 54%; }
.api-bars > i:nth-child(7) { height: 47%; }
.api-bars > i:nth-child(8) { height: 40%; }
.api-bars > i:nth-child(9) { height: 33%; }
.api-bars > i:nth-child(10) { height: 27%; }
.api-bars > i:nth-child(11) { height: 21%; }
.api-bars > i:nth-child(12) { height: 16%; }
.api-bars--users > i:nth-child(1) { height: 22%; }
.api-bars--users > i:nth-child(2) { height: 34%; }
.api-bars--users > i:nth-child(3) { height: 29%; }
.api-bars--users > i:nth-child(4) { height: 47%; }
.api-bars--users > i:nth-child(5) { height: 43%; }
.api-bars--users > i:nth-child(6) { height: 62%; }
.api-bars--users > i:nth-child(7) { height: 58%; }
.api-bars--users > i:nth-child(8) { height: 76%; }
.api-bars--users > i:nth-child(9) { height: 70%; }
.api-bars--users > i:nth-child(10) { height: 88%; }
.api-bars--users > i:nth-child(11) { height: 81%; }
.api-bars--users > i:nth-child(12) { height: 98%; }
.api-bars > i { animation: api-bar-signal 4.8s infinite cubic-bezier(.4, 0, .2, 1); }
.api-bars > i:nth-child(3n + 1) { animation-delay: -1.7s; }
.api-bars > i:nth-child(3n + 2) { animation-delay: -3.2s; }

.api-rate {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.api-rate > i {
  width: 1px;
  height: 9px;
  justify-self: center;
  background: #ccd3cb;
}

.api-rate > i:nth-child(3n + 1) { height: 18px; background: #abb8ae; }
.api-rate > b {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--api-signal);
  box-shadow: 0 0 0 1px var(--api-signal), 0 0 14px rgba(110, 147, 233, .38);
  transform: translate(-50%, -50%);
  animation: api-rate-travel 5.9s infinite cubic-bezier(.65, 0, .35, 1);
}

.api-nodes {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-content: center;
  gap: 7px 5px;
  padding: 10px 0;
}

.api-nodes > i {
  height: 5px;
  border: 1px solid #ccd3cb;
  background: #e8eeea;
  opacity: .7;
  transform-origin: center;
  animation: api-node-signal 4.1s infinite ease-in-out;
}

.api-nodes > i:nth-child(4n + 1) { animation-delay: -3.1s; }
.api-nodes > i:nth-child(4n + 2) { animation-delay: -2.2s; }
.api-nodes > i:nth-child(4n + 3) { animation-delay: -1.3s; }

.api-metric:hover {
  background: #fffefa;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.api-capability-rail {
  display: grid;
  min-height: 92px;
  grid-template-columns: minmax(240px, .36fr) minmax(0, 1.64fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.api-capability-rail__label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--line);
  padding: 0 27px;
}

.api-capability-rail__label span {
  color: var(--accent);
  font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}

.api-capability-rail__label strong {
  color: #788279;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.api-capability-rail__window {
  min-width: 0;
  overflow: hidden;
  contain: paint;
}

.api-capability-rail__track {
  display: flex;
  width: max-content;
  min-height: 92px;
  align-items: center;
  color: #5c675f;
  animation: api-model-marquee 72s linear infinite;
  will-change: transform;
}

.api-capability-rail__track:hover { animation-play-state: paused; }
.api-capability-rail__group { display: flex; align-items: center; padding-inline: 18px; }
.api-capability-rail__group span { padding: 0 24px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.api-capability-rail__group i { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(220, 76, 63, .24); }

.api-enterprise {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  gap: 78px;
  align-items: start;
  margin-top: 72px;
}

.api-enterprise__intro h3 {
  max-width: 380px;
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.api-enterprise__intro > p:not(.eyebrow) {
  max-width: 410px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.api-enterprise__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}

.api-enterprise__list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 116px;
  border-bottom: 1px solid var(--line-strong);
  padding: 20px 22px 18px 0;
}

.api-enterprise__list article:nth-child(odd) { border-right: 1px solid var(--line-strong); padding-right: 24px; }
.api-enterprise__list article:nth-child(even) { padding-left: 24px; }
.api-enterprise__list article > span { color: var(--accent); font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.api-enterprise__list strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 14px; font-weight: 650; }
.api-enterprise__list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

@keyframes api-status-pulse {
  0%, 65%, 100% { box-shadow: 0 0 0 0 transparent; opacity: .6; }
  78% { box-shadow: 0 0 0 5px rgba(220, 76, 63, 0); opacity: 1; transform: scale(1.15); }
}

@keyframes api-bar-signal {
  0%, 100% { opacity: .5; transform: scaleY(.78); }
  48% { border-color: var(--api-signal); opacity: 1; transform: scaleY(1); }
}

@keyframes api-rate-travel {
  0%, 100% { left: 8%; opacity: .45; }
  18% { opacity: 1; }
  50% { left: 91%; opacity: 1; }
  82% { opacity: 1; }
}

@keyframes api-node-signal {
  0%, 62%, 100% { background: #e8eeea; opacity: .45; transform: scaleX(.72); }
  73% { border-color: var(--api-signal); background: var(--api-signal); opacity: 1; transform: scaleX(1); }
}

@keyframes api-model-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 959px) {
  .api-overview__heading { grid-template-columns: 1fr; gap: 28px; }
  .api-overview__heading h2 { font-size: 42px; }
  .api-overview__side { max-width: 690px; }
  .api-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-metric:nth-child(3) { border-left: 0; }
  .api-capability-rail { grid-template-columns: 190px minmax(0, 1fr); }
  .api-capability-rail__label { padding-inline: 19px; }
  .api-capability-rail__label strong { white-space: normal; }
  .api-enterprise { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 760px) {
  .api-overview { padding-top: 88px; padding-bottom: 88px; }
  .api-overview__heading { margin-bottom: 42px; }
  .api-overview__heading h2 { font-size: 36px; }
  .api-overview__side { padding-left: 18px; }
  .api-overview__side > p { font-size: 14px; }
  .api-overview__actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .api-metric { min-height: 216px; padding: 25px 18px 20px; }
  .api-metric > strong { margin-top: 14px; font-size: 30px; }
  .api-metric__chart { height: 48px; }
  .api-bars { gap: 4px; }
  .api-capability-rail { display: block; }
  .api-capability-rail__label { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 18px; }
  .api-capability-rail__track { min-height: 72px; }
  .api-capability-rail__group span { padding-inline: 18px; font-size: 13px; }
  .api-enterprise { margin-top: 52px; }
  .api-enterprise__intro h3 { font-size: 28px; }
  .api-enterprise__list article { min-height: 104px; padding-right: 14px; }
  .api-enterprise__list article:nth-child(odd) { padding-right: 14px; }
  .api-enterprise__list article:nth-child(even) { padding-left: 14px; }
}

@media (max-width: 480px) {
  .api-metrics { grid-template-columns: 1fr; }
  .api-metric, .api-metric:nth-child(3) { border-left: 0; border-bottom: 1px solid var(--line); }
  .api-metric:first-child { border-left: 0; border-top: 3px solid var(--accent); }
  .api-metric:last-child { border-bottom: 0; }
  .api-enterprise__list { grid-template-columns: 1fr; }
  .api-enterprise__list article:nth-child(odd), .api-enterprise__list article:nth-child(even) { border-right: 0; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .api-capability-rail__track,
  .api-metric__status i,
  .api-bars > i,
  .api-rate > b,
  .api-nodes > i { animation: none; }
}

/* The model rail is intentionally unframed: only brand marks and model names remain in motion. */
.api-capability-rail {
  display: block;
  min-height: 86px;
  border: 0;
  background: transparent;
}

.api-capability-rail__window {
  width: 100%;
  overflow: hidden;
}

.api-capability-rail__track {
  min-height: 86px;
  align-items: center;
}

.api-capability-rail__group {
  flex: 0 0 auto;
  gap: 0;
  padding: 0 24px 0 0;
}

.api-capability-rail__group > span {
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.api-capability-model {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 31px !important;
  color: #59645b;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.api-model-logo {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  box-shadow: none;
}

.api-model-logo img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.api-capability-model > span {
  padding: 0 !important;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

@media (max-width: 760px) {
  .api-capability-rail { min-height: 76px; }
  .api-capability-rail__track { min-height: 76px; }
  .api-capability-model { gap: 9px; padding-inline: 18px !important; font-size: 13px; }
  .api-model-logo,
  .api-model-logo img { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .api-capability-rail__track { animation: none; }
}

/* Desktop sections use a compact one-screen rhythm; mobile keeps natural scrolling. */
@media (min-width: 1100px) {
  main > .section-shell {
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .hero {
    justify-content: flex-start;
    padding-top: 36px;
    padding-bottom: 32px;
  }

  .hero h1 {
    margin-bottom: 36px;
    font-size: clamp(48px, 4.7vw, 68px);
  }

  .hero-portals {
    width: min(calc(100% + 48px), 1240px);
  }

  .hero__lede {
    margin-top: 12px;
    margin-bottom: 20px;
    font-size: 15px;
  }

  .hero-portal-card__media { aspect-ratio: 16 / 8.8; }
  .hero-portal-card__body {
    min-height: 136px;
    padding: 16px 18px 15px;
  }
  .hero-portal-card__body strong {
    margin-top: 10px;
    font-size: 20px;
  }
  .hero-portal-card__description {
    min-height: 44px;
    margin-top: 7px;
    line-height: 1.6;
  }
  .hero-portal-card__link { padding-top: 10px; }

  .section-heading {
    margin-bottom: 24px;
    gap: 38px;
  }
  .section-heading--product h2 { font-size: clamp(36px, 3vw, 48px); }
  .product-heading__description {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
  }

  .api-overview {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .api-overview__heading {
    gap: 48px;
    margin-bottom: 22px;
  }
  .api-overview__heading .eyebrow { margin-bottom: 10px; }
  .api-overview__heading h2 { font-size: clamp(36px, 3vw, 48px); }
  .api-overview__side { padding-left: 22px; }
  .api-overview__side > p {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.55;
  }
  .api-overview__actions { gap: 16px; }
  .api-overview__actions .button {
    min-height: 39px;
    padding-inline: 16px;
    font-size: 12px;
  }

  .api-metric {
    min-height: 166px;
    padding: 17px 20px 15px;
  }
  .api-metric__heading { min-height: 18px; }
  .api-metric > strong {
    margin: 10px 0 4px;
    font-size: 30px;
  }
  .api-metric > p {
    font-size: 11px;
    line-height: 1.4;
  }
  .api-metric__chart { height: 38px; }

  .api-capability-rail,
  .api-capability-rail__track { min-height: 56px; }
  .api-capability-model {
    gap: 8px;
    padding-inline: 23px !important;
    font-size: 12px;
  }
  .api-model-logo,
  .api-model-logo img {
    width: 20px;
    height: 20px;
  }

  .api-enterprise {
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: 48px;
    margin-top: 24px;
  }
  .api-enterprise__intro .eyebrow { margin-bottom: 10px; }
  .api-enterprise__intro h3 {
    max-width: 360px;
    margin-bottom: 10px;
    font-size: 25px;
    line-height: 1.16;
  }
  .api-enterprise__intro > p:not(.eyebrow) {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.55;
  }
  .api-enterprise__intro .text-link { font-size: 12px; }
  .api-enterprise__list article {
    min-height: 67px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 16px 8px 0;
  }
  .api-enterprise__list article:nth-child(odd) { padding-right: 18px; }
  .api-enterprise__list article:nth-child(even) { padding-left: 18px; }
  .api-enterprise__list strong {
    margin-bottom: 2px;
    font-size: 12px;
  }
  .api-enterprise__list p {
    font-size: 10px;
    line-height: 1.4;
  }

  #products {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #products .section-heading { margin-bottom: 20px; }
  #products .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  #products .product-card,
  #products .product-card--wide,
  #products .product-card--media,
  #products .product-card:last-child {
    min-height: 238px;
    grid-column: auto;
    display: flex;
    padding: 20px;
  }
  #products .product-card:last-child .card-index,
  #products .product-card:last-child h3,
  #products .product-card:last-child p,
  #products .product-card:last-child .card-link {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }
  #products .product-card h3 {
    margin: auto 0 7px;
    font-size: 20px;
  }
  #products .product-card p {
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 1.48;
  }
  #products .card-link { font-size: 11px; }
  #products .product-card__demo--music { padding: 35px 8% 86px; }
  #products .product-card__demo--voice { padding: 35px 34% 86px 9%; }

  #pricing {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #faq {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .pricing-card {
    min-height: 390px;
    padding: 22px 23px;
  }
  .pricing-card h3 { margin-top: 14px; font-size: 25px; }
  .price {
    margin: 14px 0 8px;
    font-size: 42px;
  }
  .price--text { font-size: 33px; }
  .pricing-card p {
    min-height: 42px;
    font-size: 12px;
    line-height: 1.5;
  }
  .pricing-card ul { margin: 15px 0; }
  .pricing-card li {
    padding: 7px 0;
    font-size: 12px;
  }
  .pricing-card .button { min-height: 40px; }

  .faq-list summary {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
  }
  .faq-list p {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.6;
  }
}

@media (min-width: 1100px) {
  .hero { padding-top: 42px; padding-bottom: 38px; text-align: left; }
  .hero h1 { margin-bottom: 0; font-size: 14px; }
  .hero__lede { margin-top: 24px; margin-bottom: 0; font-size: 16px; }
  .hero-portals { width: 100%; }
  .hero-portal-card { min-height: 168px; }
  .hero-portal-card__media { width: 108px; height: 118px; }
  .hero-portal-card__body { min-height: 0; padding: 0; }
  .hero-portal-card__body strong { margin: 0; font-size: 18px; }
  .hero-portal-card__description { min-height: 0; margin-top: 9px; line-height: 1.62; }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .hero h1 { font-size: 14px; }
  .hero__lede { margin-top: 18px; font-size: 14px; }
}

@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: 42px; padding-bottom: 32px; text-align: center; }
  .hero-copy { max-width: 100%; padding: 0 0 30px; }
  .hero h1 { margin-bottom: 0; font-size: 13px; }
  .hero-title__line, .hero-title__accent { display: inline; }
  .hero-title__line > span { display: inline; }
  .hero-title__accent { margin-top: 0; margin-left: 0; }
  .hero__lede { margin: 20px auto 0; font-size: 14px; line-height: 1.7; }
  .hero-portals { grid-template-columns: 1fr; gap: 12px; }
  .hero-portal-card { min-height: 132px; padding: 16px 18px; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; text-align: left; }
  .hero-portal-card__media { width: 92px; height: 96px; }
  .hero-portal-card__brand-mark { width: 82px; height: 82px; }
  .hero-portal-card__brand-mark img,
  .hero-portal-card--tuzi-api .hero-portal-card__brand-mark img,
  .hero-portal-card--opentu .hero-portal-card__brand-mark img,
  .hero-portal-card--direct .hero-portal-card__brand-mark img,
  .hero-portal-card--store .hero-portal-card__brand-mark img { width: 74px !important; height: 74px !important; }
  .hero-portal-card__body { min-height: 0; padding: 0; }
  .hero-portal-card__body strong { margin: 0; font-size: 17px; }
  .hero-portal-card__description { min-height: 0; margin-top: 8px; font-size: 11px; }
}