/* Liquid glass surfaces with shadcn-style semantic tokens and interaction rules. */
:root {
  --background: #f2f4f7;
  --foreground: #20242d;
  --card: rgba(255, 255, 255, .72);
  --card-foreground: #20242d;
  --muted: #e8ebf0;
  --muted-foreground: #535b69;
  --primary: #252a34;
  --primary-foreground: #fff;
  --secondary: rgba(255, 255, 255, .68);
  --secondary-foreground: #252a34;
  --border: #d8dde6;
  --ring: #586ca0;
  --radius: 12px;
  --radius-card: 22px;
  --shadow-card: 0 10px 32px rgba(37, 45, 62, .055), inset 0 1px 0 rgba(255, 255, 255, .95);
  --ink: var(--foreground);
  --bg: var(--background);
  --line: var(--border);
}

body { background: var(--background); color: var(--foreground); font-size: 16px; line-height: 1.5; }
p { color: var(--muted-foreground); line-height: 1.55; }
h1, h2, h3 { color: var(--foreground); text-wrap: balance; }
a, button, input[type="range"] { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.header, .glass, .model-card, .price-card, .code-panel {
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-card);
}
.header { background: rgba(255, 255, 255, .72); }
.glass, .model-card { background: var(--card); color: var(--card-foreground); }
.model-card, .benefit, .price-card, .source-scenario { border-radius: var(--radius-card); }
.header nav { font-size: 15px; }
.header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.header nav a:hover { color: var(--foreground); }
.brand-image, .model-card-top img, .model-float img { display: block; }

.button { min-height: 44px; border-radius: var(--radius); font-size: 13px; }
.button.dark { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.button.outline, .button.light { background: var(--secondary); color: var(--secondary-foreground); border: 1px solid var(--border); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; }
.tag { font-size: 11px; line-height: 1.2; color: var(--muted-foreground); border-color: var(--border); border-radius: 8px; white-space: nowrap; }
.micro, .eyebrow { font-size: 11px; letter-spacing: .06em; }

.hero h1 { white-space: normal; }
.hero h1 > span:nth-of-type(2) { display: inline-block; padding-inline-end: .14em; }
.hero .actions { flex-wrap: wrap; margin-top: 56px; }
.hero .actions .button, .hero .actions .text-link { font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.hero .actions .button > [data-ru], .hero .actions .text-link > [data-ru] { font-size: inherit; }
.liquid-sculpture { width: 78%; left: 11%; }
.hero-description { font-size: 15px; color: var(--muted-foreground); }
.model-float { border-radius: 16px; }
.model-float small { font-size: 10px; color: var(--muted-foreground); }
.kimi-icon { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; flex: none; }
.model-float .kimi-icon { width: 34px; height: 34px; border-radius: 9px; }
.float-kimi { right: 10%; top: 6%; transform: rotate(5deg); }
.zcode-icon { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; flex: none; }
.model-float .zcode-icon { width: 34px; height: 34px; border-radius: 9px; }
.float-gemini { bottom: 24%; }
.float-glm { right: 14%; bottom: 8%; transform: rotate(-4deg); }
.stats-strip span, .section-intro { font-size: 13px; color: var(--muted-foreground); }
.model-marquee span { font-size: 11px; color: var(--muted-foreground); }
.benefit>p { font-size: 13px; }
.balance-legend { font-size: 11px; color: var(--muted-foreground); }

.model-card { min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.model-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(37, 45, 62, .11); }
.model-card h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.18; }
.saving-ratio { margin: 15px 0 20px; font-size: 13px; color: #4e5870; }
.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 12px; line-height: 1.35; color: var(--muted-foreground); }
.rate-row strong { font-size: clamp(18px, 1.7vw, 24px); white-space: nowrap; color: var(--foreground); font-weight: 800; }
.rate-row del { white-space: nowrap; color: var(--muted-foreground); }
.model-bottom, .model-use, .more-models p { font-size: 12px; }

.segmented { background: var(--muted); border-color: var(--border); border-radius: 18px; }
.segmented button { min-height: 44px; padding: 9px 13px; font-size: 12px; color: var(--muted-foreground); border-radius: 9px; }
.segmented button.active { color: var(--foreground); background: #fff; }
.language { width: auto; flex: none; border-radius: 18px; padding: 4px; gap: 3px; }
.language button { width: auto; min-width: 44px; min-height: 34px; height: 34px; padding: 0 8px; border-radius: 14px; }
.header .button.small, .source-pricing .button { border-radius: 18px; }
.model-card-top .antigravity-icon { width: 46px; height: 46px; object-fit: cover; border-radius: 12px; }
.source-pricing p { font-size: 12px; line-height: 1.4; }
.source-pricing .volume { font-size: clamp(24px, 2vw, 30px); }
.source-pricing .volume>span { font-size: 12px; }
.plan-rows>div { gap: 12px; font-size: 12px; line-height: 1.3; }
.plan-rows>div span { min-width: 0; }
.plan-rows b { font-variant-numeric: tabular-nums; }
.recommend { font-size: 10px; letter-spacing: .07em; }
.source-pricing .button { font-size: 12px; }
.featured h3 { color: #fff; }

.calculator { border-radius: var(--radius-card); }
.calc-input>p, .calc-input>.range-title, .range-labels, .comparison>div:not(.comparison-bar), .source-scenario p, .source-scenario ul, .setup-section p, .more-models p { font-size: 12px; }
.calc-models { display: flex; width: 100%; margin-top: 24px; }
.calc-models button { flex: 1; min-width: 0; padding-inline: 7px; font-size: 12px; }
.calc-input>.range-title { display: block; margin-top: 18px; color: var(--muted-foreground); }
.calc-presets button { min-height: 44px; padding: 9px 13px; font-size: 12px; border-color: var(--border); color: var(--foreground); }
.calc-presets button.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
input[type="range"] { height: 44px; margin: 0; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #4e5e86 var(--progress, 2%), var(--border) var(--progress, 2%)); }
input[type="range"]::-webkit-slider-thumb { margin-top: -8px; background: var(--primary); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #4e5e86 var(--progress, 2%), var(--border) var(--progress, 2%)); }
input[type="range"]::-moz-range-thumb { background: var(--primary); }
.scenario-tabs { max-width: 100%; }
.scenario-tabs button { font-size: 12px; }
.source-scenario li { line-height: 1.45; }
.code-tabs button, .menu { min-width: 44px; min-height: 44px; }
.code-tabs>span { font-size: 12px; }
.code-panel pre { overflow-x: auto; }
.setup-ready p, .steps p { font-size: 12px; }
footer>div a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.4; color: var(--muted-foreground); }
footer>div a:hover { color: var(--foreground); }
.toast { font-size: 13px; }

@media (max-width: 1100px) {
  .source-pricing { gap: 16px; }
  .model-card h3 { font-size: 25px; }
  .hero .actions .button, .hero .actions .text-link { font-size: 17px; }
  .liquid-sculpture { width: 100%; left: 0; }
}

@media (max-width: 820px) {
  .float-gemini { bottom: 26%; }
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-card:last-child { grid-column: 1 / -1; }
  .header nav { font-size: 15px; }
}

@media (max-width: 600px) {
  .float-kimi { right: 2%; top: 0; width: 155px; }
  .float-gemini { bottom: 25%; }
  .float-glm { right: 11%; bottom: 0; width: 155px; }
  .header { gap: 4px; padding-inline: 12px; }
  .header .brand { font-size: 19px; }
  .header .small { width: 44px; min-width: 44px; padding: 0; margin-right: 2px; gap: 0; }
  .header .small [data-ru] { display: none; }
  .header .language { margin-left: auto; margin-right: 2px; }
  .language button { min-width: 36px; padding-inline: 7px; }
  .menu { width: 44px; padding: 0; }
  .header nav a { min-height: 44px; }
  .hero h1 { font-size: clamp(34px, 9vw, 54px); line-height: 1.06; }
  .hero-description { font-size: 14px; }
  .hero .actions { flex-wrap: wrap; gap: 12px; margin-top: 44px; }
  .hero .actions .button, .hero .actions .text-link { font-size: 17px; }
  .model-float small { font-size: 9px; }
  .stats-strip span, .benefit>p, .section-intro { font-size: 12px; }
  .benefit { padding: 22px; }
  .model-grid { grid-template-columns: 1fr; }
  .model-card:last-child { grid-column: auto; }
  .model-card h3 { font-size: 27px; }
  .rate-row strong { font-size: 22px; }
  .source-pricing .price-card { padding: 24px; }
  .source-pricing p, .plan-rows>div { font-size: 12px; }
  .calc-input>p, .calc-input>.range-title, .range-labels, .comparison>div:not(.comparison-bar), .source-scenario p, .source-scenario ul, .setup-section p { font-size: 12px; }
  .calc-presets button { flex: 1 1 auto; font-size: 11px; }
  .scenario-tabs { width: 100%; }
  .scenario-tabs button { min-width: 0; font-size: 11px; padding-inline: 5px; }
  .code-tabs>span { font-size: 10px; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .header .brand { font-size: 16px; }
  .brand-image { width: 28px; height: 28px; }
  .header .small { font-size: 10px; padding-inline: 8px; }
  .language button { min-width: 32px; }
}

/* Match every button to the header purchase button. */
button, .button, .segmented button, .language button, .calc-presets button,
.scenario-tabs button, .menu { border-radius: 18px; }