/* Dosello · лендинг. Собрано build.py из src/css — не править здесь */

/* ==== css/00-tokens.css ==== */
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 103%; ascent-override: 103%; descent-override: 29%; }
@font-face { font-family: 'Unbounded Fallback'; src: local('Arial Black'), local('Arial'); size-adjust: 104%; ascent-override: 96%; descent-override: 24%; }
:root {
color-scheme: dark;
--bg: #0D0B0A;
--bg-2: #110E0C;
--card: #17130F;
--card-2: #1C1713;
--card-3: #241D18;
--text: #F4EEE8;
--text-2: #D8CFC6;
--hint: #A39A90;
--link: #FFB347;
--coral: #FF7A59;
--amber: #FFB347;
--peach: #FFD6A5;
--brand: var(--coral);
--on-grad: #1A0F0A;
--cream: #F4EEE8;
--grad: linear-gradient(135deg, #FF7A59, #FFB347 60%, #FFD6A5);
--grad-line: linear-gradient(90deg, #FF7A59, #FFB347 55%, #FFD6A5);
--grad-bubble: linear-gradient(135deg, #FF7A59, #FFB347);
--grad-rich: linear-gradient(135deg, #FF6A4D 0%, #FF9A45 45%, #FFC77E 80%, #FFD9A8 100%);
--border: rgba(244, 238, 232, 0.08);
--border-2: rgba(244, 238, 232, 0.14);
--glass: rgba(244, 238, 232, 0.06);
--glass-2: rgba(244, 238, 232, 0.10);
--glass-border: rgba(244, 238, 232, 0.14);
--dash: rgba(244, 238, 232, 0.22);
--accent: #F4EEE8;
--accent-text: #1A0F0A;
--ok: #8FE3B4;
--ok-bg: rgba(120, 214, 160, 0.14);
--warn: #FFC56E;
--warn-bg: rgba(255, 179, 71, 0.16);
--danger: #FF9184;
--bad-bg: rgba(255, 110, 96, 0.16);
--hero-bg: linear-gradient(140deg, rgba(255, 122, 89, 0.22), rgba(255, 179, 71, 0.10) 55%, rgba(23, 19, 15, 0.7));
--hero-border: rgba(255, 179, 71, 0.24);
--hero-label: #FFC56E;
--sticker-bg: rgba(255, 179, 71, 0.12);
--sticker-text: #FFC56E;
--glow: rgba(255, 122, 89, 0.30);
--glow-2: rgba(255, 179, 71, 0.10);
--dot: rgba(244, 238, 232, 0.06);
--decor: 1;
--r-xs: 8px;
--r-sm: 12px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 22px;
--r-2xl: 28px;
--r-pill: 999px;
--r-bubble: 18px;
--r-tail: 6px;
--shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.4);
--shadow-card: 0 18px 48px rgba(0, 0, 0, 0.35);
--shadow-phone: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(244, 238, 232, 0.06);
--glow-phone: 0 0 90px rgba(255, 122, 89, 0.20);
--ring: 0 0 0 2px #FFB347;
--ring-glow: 0 0 0 4px rgba(255, 179, 71, 0.35), 0 0 32px rgba(255, 122, 89, 0.45);
--font: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Unbounded', 'Unbounded Fallback', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--scale: 1;
--fs-h1: calc(clamp(30px, 7.2vw, 64px) * var(--scale));
--fs-h2: calc(clamp(24px, 4.6vw, 44px) * var(--scale));
--fs-h3: calc(clamp(19px, 2vw, 22px) * var(--scale));
--fs-lead: calc(clamp(17px, 1.5vw, 20px) * var(--scale));
--fs-text: calc(16px * var(--scale));
--fs-small: calc(14px * var(--scale));
--fs-micro: calc(13px * var(--scale));
--fs-tiny: calc(11px * var(--scale));
--fs-chat: min(calc(15px * var(--scale)), 20px);
--lh-text: 1.5;
--wrap: 1200px;
--gutter: clamp(16px, 4vw, 32px);
--section-y: clamp(48px, 6.5vw, 80px);
--head-h: 56px;
--tabbar-h: 64px;
--ease: cubic-bezier(.2, .8, .2, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--t-fast: 160ms;
--t: 260ms;
--t-slow: 380ms;
--tg-bg: #0E1621;
--tg-head: #17212B;
--tg-in: #182533;
--tg-out: #2B5278;
--tg-text: #F5F7F9;
--tg-link: #6AB3F3;
--tg-service: #7F91A2;
--tg-meta-out: #7DA8D3;
--tg-btn: rgba(46, 70, 94, 0.62);
--tg-name: #6AB3F3;
--tg-composer: #17212B;
--z-thread: 2;
--z-head: 50;
--z-tabbar: 50;
--z-toast: 80;
--z-progress: 60;
}
@media (min-width: 768px) {
:root { --fs-text: calc(17px * var(--scale)); --head-h: 64px; }
}
@media (min-width: 1024px) {
:root { --fs-chat: min(calc(17px * var(--scale)), 20px); --head-h: 84px; }
}

/* ==== css/01-base.css ==== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background: var(--bg);
overflow-x: clip;
scroll-padding-top: calc(var(--head-h) + 12px);
hyphens: auto;
-webkit-hyphens: auto;
}
html.js:not(.no-motion) { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100svh;
overflow-x: hidden;
overflow-x: clip;
color: var(--text);
font: 400 var(--fs-text) / var(--lh-text) var(--font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background:
radial-gradient(ellipse 90% 320px at 50% -60px, rgba(255, 122, 89, calc(0.30 * var(--decor))), transparent 75%) no-repeat,
radial-gradient(rgba(244, 238, 232, calc(0.06 * var(--decor))) 1px, transparent 1px) 0 0 / 20px 20px,
var(--bg);
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: calc(0.03 * var(--decor));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#page { min-height: 100svh; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 179, 71, 0.35); color: var(--text); }
h1, .h1, h2, .h2, h3, .h3, summary { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 1024px) {
html, body { hyphens: manual; -webkit-hyphens: manual; }
}
h1, .h1 {
font: 600 var(--fs-h1) / 1.05 var(--font-display);
letter-spacing: -0.02em;
text-wrap: balance;
overflow-wrap: break-word;
}
h2, .h2 {
font: 500 var(--fs-h2) / 1.15 var(--font-display);
letter-spacing: -0.015em;
text-wrap: balance;
overflow-wrap: break-word;
}
h3, .h3 {
font: 600 var(--fs-h3) / 1.3 var(--font);
letter-spacing: -0.005em;
text-wrap: balance;
}
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 46em; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
.text-2 { color: var(--text-2); }
.muted, .hint { color: var(--hint); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.nowrap { white-space: nowrap; hyphens: manual; }
.eyebrow {
display: inline-block;
font: 600 var(--fs-micro) / 1.3 var(--font);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hero-label);
}
.grad-text {
background: var(--grad-line);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.grad-text.shine {
background:
linear-gradient(100deg, transparent 35%, rgba(255, 248, 240, 0.85) 50%, transparent 65%) 0 0 / 250% 100% no-repeat,
var(--grad-line);
-webkit-background-clip: text;
background-clip: text;
background-position: 160% 0, 0 0;
animation: shine 1.2s var(--ease) 0.3s 1 both;
}
@keyframes shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #FFB347; outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: fixed; left: 12px; top: -60px; z-index: 100;
padding: 10px 14px; border-radius: var(--r-md);
background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none;
}
.skip:focus-visible { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.section { position: relative; padding-block: var(--section-y); scroll-margin-top: calc(12px - var(--section-y)); }
.section--hero { scroll-margin-top: 0px; }
[data-go-target] { scroll-margin-top: -4px; }
html.present [data-go-target] { scroll-snap-align: start; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section__head { display: grid; justify-items: start; gap: 16px; max-width: 820px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section__head .lead { margin: 0; }
@media (max-width: 1099px) {
body { padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) and (min-height: 640px) {
.section--screen { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--head-h)); }
.section--screen > .wrap { flex: none; }
}
.stack { display: grid; gap: var(--gap, 16px); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 10px); align-items: center; }
.center { text-align: center; }
html:not([data-niche="fashion"]) .only-fashion,
html:not([data-niche="beauty"]) .only-beauty,
html:not([data-niche="gadgets"]) .only-gadgets { display: none !important; }
html:not(.has-contact) [data-needs-contact],
html.has-contact [data-no-contact],
html:not(.has-public) [data-needs-public] { display: none !important; }
.tr { display: block; font-size: 0.8em; font-style: italic; font-weight: 500; color: var(--hint); }
html.tr-off .tg .tr { display: none; }
html.js [data-reveal] {
transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), clip-path 350ms var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
html.js [data-reveal="fade"]:not(.is-in) { transform: none; }
html.js [data-reveal="mask"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
html.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
html.js [data-reveal].is-instant { transition: none; }
html.js h1[data-reveal], html.js h2[data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.is-highlight { animation: ring-flash 900ms var(--ease) 1; border-radius: var(--r-md); }
h2.is-highlight, h1.is-highlight { animation-name: text-flash; }
@keyframes ring-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); } 35% { box-shadow: var(--ring-glow); } 100% { box-shadow: 0 0 0 10px rgba(255, 179, 71, 0); } }
@keyframes text-flash { 0%, 100% { text-shadow: none; } 35% { text-shadow: 0 0 28px rgba(255, 122, 89, 0.85), 0 0 2px rgba(255, 214, 165, 0.6); } }
html.present { --decor: 0.45; scroll-snap-type: y proximity; }
@media (min-width: 1024px) { html.present { --scale: 1.15; } }
html.present #main > section { scroll-snap-align: start; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
animation-duration: 1ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
html.no-motion [data-reveal] { transform: none !important; clip-path: none !important; }
html.no-motion [data-reveal]:not(.is-instant) { transition: opacity 80ms linear !important; }
html.no-motion { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
html.no-js *, html.no-js *::before, html.no-js *::after {
animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important;
}
}
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: var(--ease); }
::view-transition-old(*) { animation: 280ms var(--ease) both vt-out; }
::view-transition-new(*) { animation: 280ms var(--ease) both vt-in; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: plus-lighter; }
::view-transition-old(root) { animation: 280ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 280ms var(--ease) both vt-fade; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
::view-transition-old(*.vt-swap) { mix-blend-mode: normal; animation: 120ms ease-in both vt-out; }
::view-transition-new(*.vt-swap) { mix-blend-mode: normal; animation: 160ms var(--ease) 120ms both vt-fade; }
::view-transition-group(*.vt-now) { animation: none; }
::view-transition-old(*.vt-now) { display: none; }
::view-transition-new(*.vt-now) { animation: none; }
@media print {
html.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ==== css/02-components.css ==== */
.logo {
--size: 30px;
position: relative;
display: inline-grid;
place-items: center;
flex: none;
width: var(--size);
height: var(--size);
border-radius: calc(var(--size) * 0.3);
background: var(--grad);
color: var(--on-grad);
}
.logo svg { width: 53%; height: 53%; overflow: visible; position: relative; z-index: 1; }
.logo--rich {
background: var(--grad-rich);
box-shadow:
0 0 0 1px rgba(255, 214, 165, 0.25) inset,
0 0 calc(var(--size) * 0.3) rgba(255, 122, 89, 0.55),
0 0 calc(var(--size) * 0.8) rgba(255, 140, 70, 0.35);
}
.logo--rich::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse 80% 60% at 30% 15%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.logo__arr { animation: arrow-nudge 500ms var(--ease) 400ms 1 both; }
.logo--still .logo__arr { animation: none; }
.logo--inhale { animation: logo-inhale 900ms var(--ease) 1 both; }
@keyframes arrow-nudge { 50% { transform: translateX(2.5px); } }
@keyframes logo-inhale { from { box-shadow: 0 0 0 1px rgba(255, 214, 165, 0.25) inset, 0 0 0 rgba(255, 122, 89, 0), 0 0 0 rgba(255, 140, 70, 0); } }
.wordmark {
font: 600 var(--wm, 20px) / 1 var(--font-display);
letter-spacing: -0.02em;
color: var(--text);
white-space: nowrap;
hyphens: manual;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.icon-tile {
display: inline-grid; place-items: center; flex: none;
width: var(--tile, 44px); height: var(--tile, 44px);
border-radius: var(--r-md);
background: rgba(255, 122, 89, 0.12);
color: var(--amber);
box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.22);
}
.btn {
--btn-h: 50px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
min-height: var(--btn-h);
padding: 0 22px;
border: 1px solid transparent;
border-radius: var(--r-md);
font: 600 var(--fs-text) / 1.2 var(--font);
text-decoration: none;
white-space: nowrap;
hyphens: manual;
user-select: none;
-webkit-user-select: none;
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; filter: saturate(0.4); box-shadow: none; pointer-events: none; }
.btn--primary {
background: var(--grad);
color: var(--on-grad);
box-shadow: 0 10px 28px rgba(255, 122, 89, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--primary:hover { filter: brightness(1.06) saturate(1.04); box-shadow: 0 14px 36px rgba(255, 122, 89, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.32); }
.btn--glass {
background: var(--glass);
border-color: var(--glass-border);
color: var(--text);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.btn--glass:hover { background: var(--glass-2); border-color: rgba(244, 238, 232, 0.24); }
.btn--cream { background: var(--accent); color: var(--accent-text); }
.btn--cream:hover { filter: brightness(0.96); }
.btn--text { --btn-h: auto; padding: 6px 2px; color: var(--link); border-radius: 6px; }
.btn--text:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn--sm { --btn-h: 38px; padding: 0 14px; font-size: var(--fs-small); border-radius: var(--r-sm); }
.btn--lg { --btn-h: 58px; padding: 0 28px; font-size: calc(18px * var(--scale)); }
.btn--icon { padding: 0; width: var(--btn-h); }
.btn--block { display: flex; width: 100%; }
.btn .ico { width: 1.1em; height: 1.1em; vertical-align: 0; }
.btn__arr { display: inline-block; }
.btn:hover .btn__arr, .btn:focus-visible .btn__arr { animation: arrow-nudge-px 500ms var(--ease) 1; }
@keyframes arrow-nudge-px { 50% { transform: translateX(3px); } }
.seg {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: stretch;
gap: 2px;
width: fit-content;
max-width: 100%;
padding: 4px;
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
background: var(--glass);
}
.seg__thumb {
position: absolute;
z-index: -1;
top: 4px;
bottom: 4px;
left: 0;
width: var(--seg-w, 0px);
transform: translateX(var(--seg-x, 0px));
border-radius: var(--r-pill);
background: var(--accent);
transition: transform var(--t) var(--ease), width var(--t) var(--ease);
}
.seg__btn {
position: relative;
padding: 9px 16px;
border-radius: var(--r-pill);
font: 600 var(--fs-small) / 1.2 var(--font);
color: var(--hint);
white-space: nowrap;
hyphens: manual;
transition: color var(--t) var(--ease);
}
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"] { color: var(--accent-text); }
.seg:not(.is-ready) .seg__btn[aria-selected="true"], .seg:not(.is-ready) .seg__btn[aria-pressed="true"] { background: var(--accent); }
.seg--soft .seg__thumb { background: rgba(255, 122, 89, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.26); }
.seg--soft .seg__btn[aria-selected="true"], .seg--soft .seg__btn[aria-pressed="true"] { color: var(--amber); }
.seg--soft:not(.is-ready) .seg__btn[aria-selected="true"], .seg--soft:not(.is-ready) .seg__btn[aria-pressed="true"] { background: rgba(255, 122, 89, 0.16); }
.seg--sm { padding: 3px; }
.seg--sm .seg__thumb { top: 3px; bottom: 3px; }
.seg--sm .seg__btn { padding: 6px 11px; font-size: var(--fs-micro); }
.seg--lg .seg__btn { padding: 12px 20px; font-size: var(--fs-text); }
.seg--block { display: flex; width: 100%; }
@media (max-width: 420px) {
.seg__btn { padding-inline: 10px; font-size: min(var(--fs-micro), 13px); }
.seg--sm .seg__btn { padding-inline: 9px; font-size: 12.5px; }
}
.lift { position: relative; z-index: 1; }
.seg--block .seg__btn { flex: 1 1 0; min-width: 0; }
.niche-note { font-size: var(--fs-micro); line-height: 1.4; color: var(--hint); }
.niche-note:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > * { scroll-snap-align: start; flex: none; }
.chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: 8px 13px;
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
background: transparent;
color: var(--hint);
font: 600 var(--fs-micro) / 1.25 var(--font);
white-space: nowrap;
hyphens: manual;
text-decoration: none;
transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) {
button.chip:not([aria-pressed="true"]):not([aria-selected="true"]):not(.is-active):hover,
a.chip:not(.is-active):hover { color: var(--text); border-color: rgba(244, 238, 232, 0.26); }
}
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.chip--lg { padding: 11px 16px; font-size: var(--fs-small); }
.chip--quote { background: var(--glass); border-color: transparent; color: var(--text-2); font-weight: 500; }
.chip--glass { background: var(--glass); color: var(--text); }
.chip--warm { background: rgba(255, 122, 89, 0.12); border-color: rgba(255, 179, 71, 0.26); color: var(--amber); }
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
width: fit-content;
padding: 4px 10px;
border-radius: var(--r-pill);
background: var(--glass);
color: var(--hint);
font: 600 12px / 1.25 var(--font);
white-space: nowrap;
hyphens: manual;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad { background: var(--bad-bg); color: var(--danger); }
.badge--muted { background: var(--glass); color: var(--hint); }
.badge--grad {
padding: 7px 14px;
border: 1px solid transparent;
background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad-line) border-box;
color: var(--text);
font-size: var(--fs-micro);
}
.switch {
--sw-w: 42px;
--sw-h: 24px;
position: relative;
flex: none;
width: var(--sw-w);
height: var(--sw-h);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
background: var(--glass-2);
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast);
}
.switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: calc(var(--sw-h) - 6px);
height: calc(var(--sw-h) - 6px);
border-radius: 50%;
background: var(--text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform var(--t-fast) var(--ease), background-color var(--t-fast);
}
.switch[aria-checked="true"] { border-color: transparent; background: var(--grad); }
.switch[aria-checked="true"]::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); background: #fff; }
.range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 28px;
margin: 0;
background: transparent;
cursor: pointer;
}
.range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 99px;
background: linear-gradient(90deg, #FF7A59, #FFB347) 0 0 / var(--p, 50%) 100% no-repeat, var(--glass-2);
}
.range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--glass-2); }
.range::-moz-range-progress { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #FF7A59, #FFB347); }
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: -8px;
border: 3px solid #FFB347;
border-radius: 50%;
background: var(--bg);
box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.18);
}
.range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #FFB347; border-radius: 50%; background: var(--bg); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #FFB347; }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #FFB347; }
.card {
position: relative;
padding: clamp(18px, 2.4vw, 26px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--card);
}
.card--2 { background: var(--card-2); }
.hero-card {
position: relative;
padding: clamp(18px, 2.6vw, 28px);
border: 1px solid var(--hero-border);
border-radius: var(--r-xl);
background: var(--hero-bg), var(--card);
box-shadow: 0 30px 80px -40px rgba(255, 122, 89, 0.45);
}
.hero-card__label { font: 600 12px / 1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hero-label); }
.demo-tag {
position: absolute;
z-index: 8;
top: -11px;
right: var(--demo-r, 40px);
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px 1px;
border: 1px solid rgba(255, 179, 71, 0.36);
border-radius: var(--r-pill);
background: var(--card-2);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
color: var(--sticker-text);
font: 600 12px / 1 var(--font);
letter-spacing: 0.04em;
white-space: nowrap;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
.demo-tag--inline { position: relative; z-index: auto; top: auto; right: auto; align-self: flex-start; box-shadow: none; }
html.no-js .demo-tag:not(.demo-tag--inline) { display: none; }
.note {
position: relative;
margin-top: 14px;
font-size: var(--fs-micro);
line-height: 1.45;
color: var(--hint);
text-align: center;
text-wrap: balance;
}
.note--left { text-align: left; }
.sticker {
position: absolute;
z-index: 4;
display: inline-block;
max-width: 210px;
padding: 7px 11px;
border: 1px solid rgba(255, 179, 71, 0.18);
border-radius: 10px;
background: var(--sticker-bg);
color: var(--sticker-text);
font: 600 13px / 1.3 var(--font);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
animation: sticker-in 260ms var(--ease) both;
}
.sticker--static { position: relative; }
.sticker__line {
position: absolute;
top: 50%;
height: 1px;
width: var(--line, 36px);
background: linear-gradient(90deg, rgba(255, 179, 71, 0.65), rgba(255, 179, 71, 0.25));
transform-origin: left center;
animation: line-draw 300ms var(--ease) 120ms both;
}
.sticker__line::after { content: ""; position: absolute; right: -3px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.sticker--left .sticker__line { left: 100%; }
.sticker--right .sticker__line { right: 100%; transform-origin: right center; background: linear-gradient(270deg, rgba(255, 179, 71, 0.65), rgba(255, 179, 71, 0.25)); }
.sticker--right .sticker__line::after { right: auto; left: -3px; }
@keyframes sticker-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes line-draw { from { transform: scaleX(0); } }
.notice-pop {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
padding: 10px 14px;
border: 1px solid var(--hero-border);
border-radius: var(--r-md);
background: var(--card-2);
color: var(--text);
font: 600 var(--fs-small) / 1.35 var(--font);
box-shadow: var(--shadow-pop);
animation: pop-in 260ms var(--ease) both;
}
.notice-pop__k { color: var(--amber); white-space: nowrap; }
.notice-pop.is-out { animation: pop-out 220ms var(--ease) both; }
.notice-slot { position: relative; display: grid; justify-items: center; gap: 8px; min-height: 0; }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(6px); } }
.is-lit { animation: lit 620ms var(--ease) 1; }
@keyframes lit {
0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); }
35% { transform: scale(1); box-shadow: var(--ring-glow); }
100% { box-shadow: 0 0 0 10px rgba(255, 179, 71, 0); }
}
.phone {
--phone-w: 360px;
--phone-h: 740px;
--bezel: 10px;
--radius: 50px;
position: relative;
flex: none;
width: min(calc(var(--phone-w) * var(--scale)), 100%);
height: clamp(480px, calc(var(--phone-h) * var(--scale)), calc(100svh - var(--head-h) - 40px));
padding: var(--bezel);
border: 1.5px solid #2E2723;
border-radius: var(--radius);
background: linear-gradient(160deg, #2A241F, #120F0D 38%, #0A0807);
box-shadow: var(--shadow-phone), inset 0 0 0 3px #060504;
}
.phone__island {
position: absolute;
z-index: 6;
top: calc(var(--bezel) + 9px);
left: 50%;
width: 30%;
max-width: 104px;
height: 28px;
border-radius: var(--r-pill);
background: #000;
transform: translateX(-50%);
pointer-events: none;
}
.phone__screen {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: calc(var(--radius) - var(--bezel));
background: var(--tg-bg);
contain: layout paint;
}
.phone__status {
position: relative;
z-index: 5;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
padding: 8px 26px 0 32px;
color: #fff;
font: 600 15px / 1 -apple-system, BlinkMacSystemFont, var(--font);
letter-spacing: 0.01em;
pointer-events: none;
}
.phone__status-icons { display: inline-flex; gap: 5px; align-items: center; }
.phone__status-icons svg { display: block; }
.phone--glow { box-shadow: var(--shadow-phone), var(--glow-phone), inset 0 0 0 3px #060504; }
.phone--grad {
border: 2px solid transparent;
background:
linear-gradient(160deg, #2A241F, #120F0D 38%, #0A0807) padding-box,
var(--grad) border-box;
box-shadow: var(--shadow-phone), 0 0 70px rgba(255, 122, 89, 0.28), inset 0 0 0 3px #060504;
}
.phone--cold { filter: saturate(0.75) brightness(0.92); box-shadow: var(--shadow-phone), inset 0 0 0 3px #060504; }
.phone--sm { --phone-w: 300px; --phone-h: 600px; --radius: 42px; --bezel: 8px; }
.phone--sm .phone__island { height: 24px; top: calc(var(--bezel) + 8px); }
.phone { transition: box-shadow 400ms var(--ease), filter 400ms var(--ease); }
.thread {
position: absolute;
inset: 0;
z-index: var(--z-thread);
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.thread__path { fill: none; stroke-width: 1.5; stroke-linecap: round; opacity: 0.35; }
.thread__glow { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px rgba(255, 122, 89, 0.9)); }
.spark {
position: absolute;
left: 0;
top: 0;
z-index: calc(var(--z-thread) + 1);
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #FFE7C9;
box-shadow: 0 0 12px #FF7A59, 0 0 4px 1px #FFB347;
opacity: 0;
pointer-events: none;
}
@media (max-width: 1023px) { .thread, .spark { display: none; } }
.dots {
--cell: 4px;
--gap: 2px;
display: inline-grid;
grid-template-columns: repeat(7, var(--cell));
grid-auto-rows: var(--cell);
gap: var(--gap);
}
.dots i { display: block; border-radius: 50%; background: rgba(244, 238, 232, 0.10); transition: background-color 200ms, box-shadow 200ms; }
.dots i.on { background: var(--amber); box-shadow: 0 0 6px rgba(255, 179, 71, 0.55); }
.dots i.on2 { background: var(--coral); box-shadow: 0 0 6px rgba(255, 122, 89, 0.55); }
.dial {
--size: 40px;
position: relative;
flex: none;
width: var(--size);
height: var(--size);
border-radius: 50%;
}
.dial__mark {
position: absolute;
left: 50%;
top: 50%;
width: var(--m, 3px);
height: var(--m, 3px);
margin: calc(var(--m, 3px) / -2) 0 0 calc(var(--m, 3px) / -2);
border-radius: 50%;
background: rgba(244, 238, 232, 0.28);
transform: rotate(var(--a)) translateY(calc(var(--size) / -2 + var(--m, 3px)));
transition: background-color 200ms, box-shadow 200ms;
}
.dial__mark.is-major { background: rgba(244, 238, 232, 0.6); }
.dial__mark.on { background: var(--amber); box-shadow: 0 0 6px rgba(255, 179, 71, 0.7); }
.dial__hand {
position: absolute;
left: 50%;
bottom: 50%;
width: 2px;
height: 30%;
margin-left: -1px;
border-radius: 2px;
background: var(--text);
transform-origin: 50% 100%;
transform: rotate(var(--deg, 0deg));
transition: transform 1.2s var(--ease-io);
}
.dial__hand--min { width: 1.5px; height: 40%; margin-left: -0.75px; background: var(--amber); }
.dial__hub { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--text); }
.dial__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.dial__arc circle { fill: none; stroke-width: 2; stroke-linecap: round; }
.dial__face { position: absolute; inset: 22%; display: grid; place-items: center; text-align: center; }
.toasts {
position: fixed;
left: 50%;
bottom: calc(24px + env(safe-area-inset-bottom));
z-index: var(--z-toast);
display: grid;
justify-items: center;
gap: 8px;
width: max-content;
max-width: calc(100vw - 32px);
transform: translateX(-50%);
pointer-events: none;
}
@media (max-width: 1099px) { .toasts { bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom)); } }
.toast {
padding: 11px 16px;
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
background: rgba(28, 23, 19, 0.96);
color: var(--text);
font: 600 var(--fs-small) / 1.35 var(--font);
text-align: center;
box-shadow: var(--shadow-pop);
animation: toast-in 260ms var(--ease) both;
}
.toast.is-out { animation: toast-out 220ms var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.demo-ctl {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.demo-ctl__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
min-width: 40px;
padding: 0 14px;
border: 1px solid var(--glass-border);
border-radius: var(--r-sm);
background: var(--glass);
color: var(--text);
font: 600 var(--fs-small) / 1 var(--font);
white-space: nowrap;
transition: background-color var(--t-fast), opacity var(--t-fast);
}
.demo-ctl__btn:hover { background: var(--glass-2); }
.demo-ctl__btn:disabled { opacity: 0.38; }
.demo-ctl__btn--main { background: var(--accent); border-color: transparent; color: var(--accent-text); }
.demo-ctl__btn--main:hover { background: #fff; }
.demo-ctl__btn--icon { padding: 0; }
.demo-ctl__meta { display: inline-flex; align-items: center; gap: 10px; color: var(--hint); font: 600 12px / 1.2 var(--font); }
.demo-ctl__count { font-variant-numeric: tabular-nums; }
.demo-ctl__speed { display: inline-flex; align-items: center; gap: 5px; }
.demo-ctl__speed .ico { width: 14px; height: 14px; vertical-align: 0; }
@media (max-width: 400px) {
.demo-ctl { gap: 8px 6px; }
.demo-ctl__word { display: none; }
.demo-ctl__btn:not(.demo-ctl__btn--main) { min-width: 44px; padding: 0 10px; }
.demo-ctl__meta { flex-basis: 100%; justify-content: center; }
}
.is-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.soon {
position: relative;
padding: clamp(18px, 2.4vw, 24px);
border: 1.5px dashed var(--dash);
border-radius: var(--r-lg);
background: rgba(244, 238, 232, 0.02);
}
.soon__badge { margin-bottom: 10px; }
.list-check, .list-x { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.list-check > li, .list-x > li { position: relative; padding-left: 34px; }
.list-check > li::before, .list-x > li::before {
content: "";
position: absolute;
left: 0;
top: calc((1lh - 22px) / 2);
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE3B4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.list-x > li::before {
background: var(--bad-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9184' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.list-check--amber > li::before {
background: rgba(255, 122, 89, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB347' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.acc { border-bottom: 1px solid var(--border); interpolate-size: allow-keywords; }
.acc > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
list-style: none;
cursor: pointer;
font: 600 var(--fs-lead) / 1.35 var(--font);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover .acc__icon { background: var(--glass-2); }
.acc__icon {
position: relative;
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--glass);
transition: transform 200ms var(--ease), background-color var(--t-fast);
}
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--amber); }
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon { transform: rotate(45deg); }
.acc__body { padding: 0 46px 22px 0; color: var(--text-2); }
@supports selector(::details-content) {
.acc::details-content { block-size: 0; overflow-y: clip; transition: block-size 200ms var(--ease), content-visibility 200ms allow-discrete; }
.acc[open]::details-content { block-size: auto; }
}
.qr { display: inline-grid; justify-items: center; gap: 8px; }
.qr__code {
width: var(--qr, 72px);
aspect-ratio: 1;
padding: 5px;
border-radius: 10px;
background: #F4EEE8;
color: #0D0B0A;
}
.qr__code svg { display: block; width: 100%; height: 100%; }
.qr__cap { max-width: 14em; color: var(--hint); font-size: 12px; line-height: 1.35; text-align: center; }
.kbd {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border: 1px solid var(--glass-border);
border-bottom-width: 2px;
border-radius: 6px;
background: var(--glass);
color: var(--text);
font: 600 12px / 1 var(--font);
}
:fullscreen { background: var(--bg); overflow: auto; }
[data-fullscreen]:fullscreen { display: grid; place-content: safe center; padding: 24px; }
@media (pointer: coarse) {
.seg__btn { min-height: 44px; }
.switch::before { content: ""; position: absolute; inset: -10px; }
.range { height: 44px; }
.range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
.range::-moz-range-thumb { width: 22px; height: 22px; }
.demo-ctl__btn { min-width: 44px; min-height: 44px; }
}

/* ==== css/03-tg.css ==== */
.tg {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
background:
radial-gradient(120% 60% at 100% 0%, rgba(43, 82, 120, 0.16), transparent 60%),
radial-gradient(90% 50% at 0% 100%, rgba(43, 82, 120, 0.10), transparent 60%),
var(--tg-bg);
color: var(--tg-text);
font-family: var(--font);
hyphens: manual;
-webkit-hyphens: manual;
}
.tg--pane { flex: none; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.04); }
.tg--pane .tg__log { overflow: visible; }
.tg__head {
position: relative;
z-index: 2;
flex: none;
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 6px 12px 6px 6px;
background: var(--tg-head);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.tg__back { display: grid; place-items: center; width: 28px; height: 36px; color: var(--tg-link); flex: none; }
.tg__ava {
--ava1: #B694F9;
--ava2: #6C61DF;
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(180deg, var(--ava1), var(--ava2));
color: #fff;
font: 600 17px / 1 var(--font);
}
.tg__ava--logo { background: var(--grad); color: var(--on-grad); }
.tg__ava--logo svg { width: 55%; height: 55%; }
.tg__who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tg__name { overflow: hidden; font: 600 16px / 1.2 var(--font); white-space: nowrap; text-overflow: ellipsis; }
.tg__status { overflow: hidden; color: var(--tg-service); font: 400 13px / 1.2 var(--font); white-space: nowrap; text-overflow: ellipsis; transition: color 200ms; }
.tg__status.is-typing { color: var(--tg-link); }
.tg__menu { display: grid; place-items: center; width: 28px; color: var(--tg-service); flex: none; }
.tg__log {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
gap: 3px;
padding: 10px 10px 12px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: auto;
scrollbar-width: none;
}
.tg__log::-webkit-scrollbar { display: none; }
@media (pointer: coarse) {
.tg__log { overflow-y: hidden; }
}
.tg__log > :first-child { margin-top: auto; }
.tg-msg {
position: relative;
display: flow-root;
max-width: 82%;
padding: 7px 11px 6px;
border-radius: 17px;
color: var(--tg-text);
font: 500 var(--fs-chat) / 1.36 var(--font);
overflow-wrap: anywhere;
animation: tg-in 260ms var(--ease) both;
}
.tg-msg.is-instant, .tgcard.is-instant { animation: none; }
.tg-msg--in { align-self: flex-start; background: var(--tg-in); }
.tg-msg--out { align-self: flex-end; background: var(--tg-out); }
.tg-msg--in + .tg-msg--out, .tg-msg--out + .tg-msg--in, .tg-service + .tg-msg, .tg-msg + .tg-service { margin-top: 6px; }
.tg-msg--in:not(:has(+ .tg-msg--in)) { border-bottom-left-radius: 4px; }
.tg-msg--out:not(:has(+ .tg-msg--out)) { border-bottom-right-radius: 4px; }
.tg-msg--in:not(:has(+ .tg-msg--in))::before,
.tg-msg--out:not(:has(+ .tg-msg--out))::before {
content: "";
position: absolute;
bottom: 0;
left: -6px;
width: 9px;
height: 16px;
background: inherit;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M9 0v16H1.5C.6 16 .2 15 .9 14.4 5 11 8.6 6.5 9 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M9 0v16H1.5C.6 16 .2 15 .9 14.4 5 11 8.6 6.5 9 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.tg-msg--out:not(:has(+ .tg-msg--out))::before { left: auto; right: -6px; transform: scaleX(-1); }
.tg-msg__text { white-space: pre-line; }
.tg-msg__meta {
position: relative;
top: 5px;
float: right;
display: inline-flex;
align-items: center;
gap: 3px;
margin: 0 -4px 0 12px;
color: var(--tg-service);
font: 400 12px / 1.6 var(--font);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tg-msg--out .tg-msg__meta { color: var(--tg-meta-out); }
.tg-ticks { display: inline-block; width: 16px; height: 11px; color: var(--tg-meta-out); }
.tg-ticks path { transition: opacity 200ms; }
.tg-ticks--sent .tg-ticks__second { opacity: 0; }
.tg-msg .tr { margin-top: 3px; color: rgba(245, 247, 249, 0.58); font-size: 0.82em; line-height: 1.35; }
.tg-msg--out .tr { color: rgba(245, 247, 249, 0.66); }
.tg-link { color: var(--tg-link); }
.tg-msg--out .tg-link { color: #A9D6FF; }
.tg-photo {
display: grid;
place-items: center;
width: min(220px, 100%);
aspect-ratio: 4 / 3;
margin: -3px -7px 6px;
border-radius: 13px;
background:
radial-gradient(60% 50% at 35% 35%, rgba(255, 214, 165, 0.20), transparent 70%),
linear-gradient(135deg, #3A4B5E, #223140);
color: rgba(255, 255, 255, 0.55);
}
.tg-photo svg { width: 34px; height: 34px; }
.tg-msg--photo { max-width: 240px; }
.tg-service {
align-self: center;
max-width: 90%;
margin: 6px 0;
padding: 4px 11px;
border-radius: var(--r-pill);
background: rgba(23, 33, 43, 0.92);
color: var(--tg-service);
font: 500 13px / 1.35 var(--font);
text-align: center;
animation: tg-in 260ms var(--ease) both;
}
.tg-service.is-instant { animation: none; }
.tg-typing { display: inline-flex; align-items: center; gap: 4px; padding: 13px 14px 12px; }
.tg-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--tg-service); animation: tg-dot 1.2s ease-in-out infinite; }
.tg-typing i:nth-child(2) { animation-delay: 150ms; }
.tg-typing i:nth-child(3) { animation-delay: 300ms; }
.tg__composer {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px calc(8px + 14px);
background: var(--tg-composer);
color: var(--tg-service);
}
.tg__input { flex: 1; min-width: 0; padding: 8px 4px; font: 400 15px / 1.2 var(--font); }
.tg__composer svg { flex: none; }
.tg__composer::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
width: 34%;
height: 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.55);
transform: translateX(-50%);
}
.tg--pane .tg__composer::after { display: none; }
.tg--pane .tg__composer { padding-bottom: 8px; }
.tgcard { display: grid; gap: 4px; width: 100%; max-width: 380px; animation: tg-in 260ms var(--ease) both; }
.tgcard--drop { animation: card-drop 320ms var(--ease) both; }
.tgcard--drop .tgcard__msg { box-shadow: var(--shadow-pop); }
.tgcard__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px; }
.tgcard__ava { width: 34px; height: 34px; font-size: 14px; }
.tgcard__msg {
position: relative;
display: flow-root;
padding: 8px 12px 6px;
border-radius: 17px 17px 17px 4px;
background: var(--tg-in);
color: var(--tg-text);
font: 500 var(--fs-card, 15px) / 1.42 var(--font);
overflow-wrap: anywhere;
}
.tgcard__from { margin-bottom: 3px; color: var(--tg-name); font: 600 14px / 1.3 var(--font); }
.tgcard__title { font-weight: 700; }
.tgcard__line { display: block; }
.tgcard__k { font-weight: inherit; }
.tgcard--strong .tgcard__k { font-weight: 700; }
.tgcard__gap { display: block; height: 0.75em; }
.tgcard__sim { color: var(--warn); font-weight: 700; }
.tgcard__kb { display: grid; gap: 4px; overflow: hidden; transition: height 200ms var(--ease), opacity 200ms var(--ease), margin 200ms var(--ease); }
.tgcard__btn {
min-height: 40px;
padding: 9px 12px;
border-radius: 12px;
background: var(--tg-btn);
color: #fff;
font: 600 14px / 1.25 var(--font);
text-align: center;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background-color var(--t-fast);
}
.tgcard__btn:hover { background: rgba(64, 96, 128, 0.78); }
.tgcard__row + .tgcard__kb { margin-left: 42px; }
.tgcard__kb.is-gone { height: 0 !important; opacity: 0; margin-top: -4px; }
@keyframes tg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes card-drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes tg-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 420px) {
.tg-msg { max-width: 86%; }
}

/* ==== css/04-ma.css ==== */
.ma {
--tab-bg: rgba(23, 19, 15, 0.92);
--tab-active-bg: rgba(255, 122, 89, 0.16);
--tab-active: #FFB347;
--shadow: none;
--on-bubble-2: rgba(26, 15, 10, 0.68);
--ma-tabspace: 94px;
color-scheme: dark;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
overflow: hidden;
zoom: var(--ma-zoom, 1);
color: var(--text);
font: 400 15px / 1.45 var(--font);
letter-spacing: 0;
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
background:
radial-gradient(ellipse 90% 320px at 50% -60px, var(--glow), transparent 75%) no-repeat,
radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 20px 20px,
var(--bg);
}
.ma[data-theme="light"] {
--bg: #FBF7F3;
--card: #FFFFFF;
--card-2: #F4EEE8;
--text: #1C1714;
--hint: #6E645B;
--border: #EDE4DA;
--link: #C2461F;
--accent: #1C1714;
--accent-text: #FBF7F3;
--glass: rgba(28, 23, 20, 0.05);
--glass-border: #E3D8CC;
--danger: #C62F22;
--ok: #1E7A47;
--ok-bg: #E2F5E9;
--warn: #8A4F00;
--warn-bg: #FFF0D9;
--bad-bg: #FDE5E2;
--glow: rgba(255, 122, 89, 0.22);
--dot: rgba(28, 23, 20, 0.07);
--hero-bg: linear-gradient(140deg, #FFE1D4, #FFEFD6 60%, #FFFFFF);
--hero-border: #F6CDB0;
--hero-label: #A63C17;
--tab-bg: rgba(255, 255, 255, 0.94);
--tab-active-bg: #FFE6DA;
--tab-active: #A63C17;
--shadow: 0 8px 24px rgba(60, 35, 20, 0.08);
color-scheme: light;
}
.ma.is-theming, .ma.is-theming * {
transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.ma *, .ma *::before, .ma *::after { box-sizing: border-box; }
.ma b { font-weight: 700; }
.ma-status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
padding: 8px 26px 0 32px;
font: 600 15px / 1 -apple-system, BlinkMacSystemFont, var(--font);
letter-spacing: 0.01em;
pointer-events: none;
}
.ma-status__icons { display: inline-flex; gap: 5px; align-items: center; }
.ma-status svg { display: block; }
.ma-tg {
flex: none;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 44px;
padding: 0 14px;
background: var(--bg);
font-size: 16px;
}
.ma-tg__close { justify-self: start; color: var(--link); }
.ma-tg__title { font-weight: 600; }
.ma-tg__more svg { transform: rotate(90deg); }
.ma-tg__more { justify-self: end; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--glass); }
.ma--phone::before {
content: "x x x x x x x x x x x" / "";
flex: none;
height: 0;
overflow: hidden;
color: transparent;
font-size: 0;
line-height: 0;
word-spacing: calc((var(--phone-w, 360px) * var(--scale, 1) - 2 * var(--bezel, 10px) - 3px) / var(--ma-zoom, 1) / 10);
}
.ma--phone::after {
content: "";
position: absolute;
z-index: 4;
left: 50%;
bottom: 7px;
width: 34%;
height: 4px;
border-radius: 4px;
background: var(--text);
opacity: 0.45;
transform: translateX(-50%);
pointer-events: none;
}
.ma-views { position: relative; flex: 1; min-height: 0; }
.ma-view {
position: absolute;
z-index: 1;
inset: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: auto;
scrollbar-width: none;
padding: 12px 16px calc(var(--ma-tabspace) + 10px);
scroll-padding-bottom: calc(var(--ma-tabspace) + 12px);
}
.ma-view::-webkit-scrollbar { display: none; }
.ma-view.is-leaving { z-index: 0; pointer-events: none; }
.ma--notab .ma-view { padding-bottom: 28px; scroll-padding-bottom: 12px; }
@media (pointer: coarse) {
.ma--scripted .ma-view { overflow-y: hidden; }
}
.ma--phone .ma-views::after {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
height: calc(var(--ma-tabspace) - 10px);
background: linear-gradient(to bottom, transparent, var(--bg) 45%);
pointer-events: none;
}
.ma--notab .ma-views::after { display: none; }
.ma--switching .ma-tab { transition: none; }
.ma--bare { flex: none; overflow: visible; background: none; }
.ma--bare[data-theme="light"] { padding: 12px; border-radius: var(--r-lg); background: var(--bg); }
.ma--bare .ma-views { flex: none; }
.ma--bare .ma-view { position: static; overflow: visible; padding: 0; }
.ma--bare .ma-composer { position: static; background: none; }
.ma-brand { display: flex; align-items: center; gap: 10px; margin: 4px 2px 18px; }
.ma-brand__name { font: 600 18px / 1.1 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ma-brand__sub { font-size: 12px; color: var(--hint); }
.ma-back { display: block; padding: 4px 0; color: var(--link); font: 600 15px / 1.2 var(--font); }
.ma-input--select { padding-right: 36px; background: var(--bg) no-repeat right 14px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A39A90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.ma-h1 { margin: 8px 2px 16px; font: 500 22px / 1.25 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ma-h2 { margin: 22px 4px 8px; font: 500 15px / 1.3 var(--font-display); }
.ma-sub { color: var(--hint); font-size: 13px; overflow-wrap: anywhere; }
.ma-hint { margin: 4px 4px 12px; color: var(--hint); font-size: 13px; overflow-wrap: anywhere; }
.ma-pre { white-space: pre-wrap; }
.ma-pad { padding: 12px 16px 0; }
.ma-sep { border-top: 1px solid var(--border); }
.ma-mt8 { margin-top: 8px; }
.ma-empty { padding: 18px; color: var(--hint); text-align: center; }
.ma-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.ma-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.ma-row:last-child { border-bottom: 0; }
.ma-row--top { align-items: flex-start; }
.ma-row[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ma-row[role="button"]:hover { background: var(--glass); }
.ma-main { flex: 1; min-width: 0; }
.ma-title { font-weight: 600; overflow-wrap: anywhere; }
.ma-badges { display: grid; gap: 4px; justify-items: end; }
.ma-badges:empty { display: none; }
.ma-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 18px;
border: 0;
border-radius: 14px;
background: var(--accent);
color: var(--accent-text);
font: 600 15px / 1.2 var(--font);
text-align: center;
cursor: pointer;
}
.ma-btn:disabled, .ma-btn--off { opacity: 0.5; cursor: default; }
span.ma-btn { cursor: default; }
.ma-btn--sec { border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); }
.ma-btn--ghost, .ma-btn--danger { padding: 8px 6px; background: none; color: var(--link); }
.ma-btn--danger { color: var(--danger); }
.ma-btn--flush { padding-left: 0; }
.ma-btn--block { display: flex; width: 100%; }
.ma-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-push { margin-left: auto; }
.ma-days { gap: 5px; }
.ma-days .ma-btn { padding: 8px 6px; }
.ma-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--glass);
color: var(--hint);
font-size: 12px;
font-weight: 600;
font-style: normal;
white-space: nowrap;
transition: background-color 200ms, color 200ms;
}
.ma-badge--ok { background: var(--ok-bg); color: var(--ok); }
.ma-badge--warn { background: var(--warn-bg); color: var(--warn); }
.ma-notice, .ma-error { margin: 8px 0; padding: 11px 14px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); overflow-wrap: anywhere; }
.ma-notice--grid { display: grid; gap: 8px; }
.ma-error { background: var(--bad-bg); color: var(--danger); }
.ma-seg { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 2px; scrollbar-width: none; }
.ma-seg::-webkit-scrollbar { display: none; }
.ma-chip {
flex: none;
padding: 8px 13px;
border: 1px solid var(--glass-border);
border-radius: 999px;
background: transparent;
color: var(--hint);
font: 600 13px / 1.2 var(--font);
white-space: nowrap;
}
.ma-chip.is-active { border-color: transparent; background: var(--accent); color: var(--accent-text); }
.ma-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; overflow-wrap: anywhere; }
.ma-answer { padding: 8px 0 0; }
.ma-label { display: grid; gap: 4px; color: var(--hint); font-size: 13px; }
.ma-input {
min-height: 46px;
padding: 11px 13px;
border: 1px solid var(--glass-border);
border-radius: 12px;
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ma-input--area { min-height: 88px; }
.ma-input:empty::before { content: attr(data-ph); color: var(--hint); }
.ma-input > span { display: inline-block; }
.ma-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; cursor: pointer; }
.ma-check__box {
display: grid;
place-items: center;
flex: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--hint);
border-radius: 4px;
background: var(--bg);
color: #fff;
transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.ma-check__box svg { opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.ma-check[aria-checked="true"] .ma-check__box { border-color: #FF7A59; background: #FF7A59; }
.ma-check[aria-checked="true"] .ma-check__box svg { opacity: 1; transform: none; }
.ma-period { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 14px; }
.ma-card + .ma-period { margin-top: 14px; }
.ma-mt16 { margin-top: 16px; }
.ma-hero { display: grid; gap: 10px; margin-bottom: 10px; padding: 18px; border: 1px solid var(--hero-border); border-radius: 22px; background: var(--hero-bg); }
.ma-hero__label { color: var(--hero-label); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ma-hero__value { font: 600 44px / 1 var(--font-display); }
.ma-hero__value small { margin-left: 8px; color: var(--hint); font: 500 13px var(--font); letter-spacing: 0; }
.ma-bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--glass); }
.ma-bar i, .ma-hbar__track i { display: block; height: 100%; border-radius: 99px; background: var(--grad-line); transform-origin: left; }
.ma-delta { color: var(--hint); font-size: 12px; font-weight: 600; }
.ma-delta--up { color: var(--ok); }
.ma-delta--down { color: var(--danger); }
.ma-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ma-tile { display: grid; align-content: start; gap: 2px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.ma-tile__v { font: 500 24px / 1.15 var(--font-display); }
.ma-tile__l { color: var(--hint); font-size: 13px; }
.ma-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.ma-chart > span { display: flex; align-items: flex-end; flex: 1; min-width: 0; height: 100%; }
.ma-chart b { display: flex; align-items: flex-end; width: 100%; min-height: 2px; overflow: hidden; border-radius: 6px 6px 2px 2px; background: var(--glass-border); transform-origin: bottom; }
.ma-chart i { width: 100%; border-radius: 6px 6px 0 0; background: var(--grad-line); }
.ma-axis { display: flex; gap: 3px; color: var(--hint); font-size: 12px; }
.ma-axis span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; }
.ma-legend { display: flex; gap: 14px; }
.ma-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 3px; background: var(--glass-border); }
.ma-dot--accent { background: var(--grad-line); }
.ma-hbars { display: grid; gap: 12px; padding: 14px 16px; }
.ma-hbar__head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.ma-hbar__head span { min-width: 0; overflow-wrap: anywhere; }
.ma-hbar__track { height: 8px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: var(--glass); }
.ma-chat { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.ma-bubble { max-width: 85%; padding: 10px 13px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ma-bubble--in { align-self: flex-start; border: 1px solid var(--border); border-bottom-left-radius: 6px; background: var(--card-2); }
.ma-bubble--out { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--grad-bubble); color: var(--on-grad); }
.ma-bubble--mgr { align-self: flex-end; border: 1px solid var(--hero-border); border-bottom-right-radius: 6px; background: var(--card); }
.ma-bubble--typing { color: var(--hint); font-style: italic; }
.ma-bubble__who { margin-bottom: 2px; font-size: 12px; opacity: 0.7; }
.ma-bubble .tr { margin-top: 3px; font-size: 13px; line-height: 1.35; }
.ma-bubble--out .tr { color: var(--on-bubble-2); }
.ma-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ma-marks:empty { display: none; }
.ma-mark { padding: 2px 8px; border-radius: 999px; background: var(--card); color: var(--danger); font-size: 12px; font-weight: 600; }
.ma-mark--ok { color: var(--ok); }
.ma-mark--warn { color: var(--warn); }
.ma-mark--muted { color: var(--hint); }
.ma-time { display: block; margin-top: 4px; font-size: 12px; text-align: right; opacity: 0.6; }
.ma-event { color: var(--hint); font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.ma-debug { display: grid; gap: 2px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed currentColor; font-size: 12px; opacity: 0.75; white-space: normal; }
.ma-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ma-flat { margin: 8px 0 0; }
.ma-composer { position: sticky; z-index: 2; bottom: -10px; display: flex; align-items: flex-end; gap: 8px; padding: 8px 0; background: var(--bg); }
.ma-composer .ma-input { flex: 1; min-width: 0; }
.ma-composer .ma-input:empty::before { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ma-composer .ma-btn { align-self: stretch; flex: none; max-height: 46px; padding: 0 16px; }
.ma-tabbar {
position: absolute;
z-index: 3;
left: 12px;
right: 12px;
bottom: 20px;
display: flex;
gap: 2px;
padding: 6px;
border: 1px solid var(--border);
border-radius: 22px;
background: var(--tab-bg);
box-shadow: var(--shadow);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.ma--notab .ma-tabbar { display: none; }
.ma-tab {
display: grid;
justify-items: center;
gap: 3px;
flex: 1 1 0;
padding: 8px 2px 6px;
border-radius: 16px;
color: var(--hint);
font: 600 12px / 1.2 var(--font);
white-space: nowrap;
transition: background-color var(--t-fast), color var(--t-fast);
}
.ma-tab svg { display: block; }
.ma-tab.is-active { background: var(--tab-active-bg); color: var(--tab-active); }
.ma--narrow .ma-status { padding: 8px 18px 0 24px; }
.ma--narrow .ma-status__icons { gap: 3px; }
.ma--narrow .ma-tabbar { left: 8px; right: 8px; gap: 0; padding: 4px; }
.ma--narrow .ma-tab { flex: 1 1 auto; padding-inline: 0; }
.ma-blink { animation: ma-blink 600ms var(--ease) 1; }
@keyframes ma-blink {
0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 122, 89, 0); }
25%, 60% { box-shadow: inset 0 0 0 2px #FF7A59; background-color: rgba(255, 122, 89, 0.08); }
}

/* ==== css/07-shell.css ==== */
html.no-js [data-niche-switch], html.no-js [data-present-toggle], html.no-js [data-motion-toggle], html.no-js [data-translate-toggle] { display: none !important; }
[data-present-only] { display: none !important; }
html.present [data-present-only] { display: inline-flex !important; }
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-progress); height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad-line); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
.progress i { animation: progress-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.site-head {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-head);
pointer-events: none;
}
.site-head__bar {
display: flex;
align-items: center;
gap: 12px;
pointer-events: auto;
border: 1px solid transparent;
transition: background-color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease), -webkit-backdrop-filter 200ms, backdrop-filter 200ms;
}
.site-head.is-scrolled .site-head__bar,
html.present .site-head__bar {
border-color: var(--border);
background: rgba(23, 19, 15, 0.85);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.site-head .brand { gap: 9px; flex: none; }
.site-head .logo { --size: 30px; }
.site-head .wordmark { --wm: 19px; }
.site-head__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-head .btn { font-size: 14px; }
html.present .site-head [data-needs-contact] { display: none !important; }
.site-head .head-cta { border-color: transparent; background: linear-gradient(var(--card-2), var(--card-2)) padding-box, var(--grad) border-box; color: var(--text); }
.site-head .head-cta:hover { background: linear-gradient(#2A221C, #2A221C) padding-box, var(--grad) border-box; }
.site-head__count { align-items: center; padding: 0 6px; color: var(--hint); font: 600 13px / 1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-head__count b { color: var(--text); font-weight: 600; }
.site-nav, .tabbar { position: relative; }
.nav-pill {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
width: var(--pill-w, 0px);
border-radius: 12px;
background: rgba(255, 122, 89, 0.16);
opacity: 0;
transform: translateX(var(--pill-x, 0px));
transition: transform var(--t) var(--ease), width var(--t) var(--ease), opacity 200ms var(--ease);
pointer-events: none;
}
.nav-pill.is-on { opacity: 1; }
.nav-pill.is-jump { transition: opacity 200ms var(--ease); }
.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav a {
position: relative;
z-index: 1;
padding: 9px 12px;
border-radius: 12px;
color: var(--hint);
font: 600 14px / 1.2 var(--font);
text-decoration: none;
white-space: nowrap;
transition: color 200ms var(--ease);
}
.site-nav a:hover { color: var(--text); }
.site-nav a.is-active { color: var(--amber); }
@media (min-width: 1100px) {
.site-head { padding: 12px var(--gutter) 0; }
.site-head::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 auto;
height: 40px;
background: linear-gradient(var(--bg) 72%, transparent);
opacity: 0;
transition: opacity 200ms var(--ease);
pointer-events: none;
}
.site-head.is-scrolled::before, html.present .site-head::before { opacity: 1; }
.site-head__bar { max-width: var(--wrap); min-height: 60px; margin: 0 auto; padding: 8px 8px 8px 16px; border-radius: var(--r-xl); }
.site-head.is-scrolled .site-head__bar, html.present .site-head__bar { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.site-head__end { margin-left: 8px; }
}
@media (max-width: 1099px) {
.site-head__bar {
min-height: 52px;
padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
border-width: 0 0 1px;
}
.site-head.is-scrolled .site-head__bar, html.present .site-head__bar { background: rgba(13, 11, 10, 0.86); }
.site-nav { display: none !important; }
.site-head .logo { --size: 26px; }
.site-head .wordmark { --wm: 17px; }
.site-head__end { gap: 6px; }
.site-head .btn--sm { --btn-h: 36px; }
.site-head [data-needs-contact] { padding: 0 14px; font-size: 13px; }
}
@media (pointer: coarse) {
.site-head .btn--sm::before { content: ""; position: absolute; inset: -5px 0; }
}
@media (max-width: 340px) {
.site-head .wordmark { display: none; }
}
.tabbar { display: none; }
@media (max-width: 1099px) {
.tabbar {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: var(--z-tabbar);
display: flex;
gap: 2px;
max-width: 480px;
margin: 0 auto;
padding: 6px;
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: rgba(23, 19, 15, 0.92);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
transition: transform 220ms var(--ease);
}
.tabbar.is-hidden, html.ctl-in-view .tabbar { transform: translateY(calc(120% + env(safe-area-inset-bottom))); }
.tabbar a {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: 3px;
flex: 1 1 auto;
min-width: 0;
padding: 8px 0 6px;
border-radius: 16px;
color: var(--hint);
font: 600 11px / 1.1 var(--font);
text-decoration: none;
transition: color 200ms var(--ease);
}
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a.is-active { color: var(--amber); }
.tabbar .nav-pill { top: 6px; bottom: 6px; border-radius: 16px; }
}
.go-back {
position: fixed;
right: 24px;
bottom: calc(24px + env(safe-area-inset-bottom));
z-index: var(--z-toast);
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
max-width: calc(100vw - 32px);
padding: 0 18px;
border: 1px solid var(--hero-border);
border-radius: var(--r-pill);
background: rgba(28, 23, 19, 0.94);
color: var(--text);
font: 600 14px / 1.2 var(--font);
white-space: nowrap;
box-shadow: var(--shadow-pop);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: opacity 200ms var(--ease);
animation: go-back-in 260ms var(--ease) both;
}
.go-back:hover { background: rgba(40, 33, 27, 0.96); }
.go-back b { color: var(--amber); font-weight: 600; }
.go-back.is-out { animation: go-back-out 200ms var(--ease) both; }
@keyframes go-back-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes go-back-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1099px) {
.go-back { right: auto; left: 50%; top: calc(var(--head-h) + 10px); bottom: auto; min-height: 40px; translate: -50% 0; }
@keyframes go-back-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes go-back-out { to { opacity: 0; transform: translateY(-8px); } }
}
.site-foot {
padding: 56px 0 40px;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, transparent, rgba(23, 19, 15, 0.65));
color: var(--hint);
font-size: var(--fs-small);
}
.site-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 48px; }
.site-foot__brand { display: grid; gap: 10px; }
.site-foot__brand .wordmark { --wm: 22px; }
.site-foot__slogan { color: var(--hint); }
.site-foot__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.site-foot__bottom {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 24px;
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.site-foot__copy { flex: none; }
.site-foot__contact { font-weight: 600; }
.site-foot__disclaimer { flex: 1 1 320px; max-width: 780px; font-size: 12.5px; line-height: 1.55; color: var(--hint); }
.stub {
display: grid;
place-items: center;
min-height: 220px;
padding: 32px;
border: 1.5px dashed var(--dash);
border-radius: var(--r-lg);
color: var(--hint);
font-size: var(--fs-small);
text-align: center;
}
.section--hero { padding-top: calc(var(--head-h) + clamp(28px, 5vw, 64px)); }

/* ==== css/10-hero.css ==== */
#hero {
--hp-w: min(360px, 100%);
--hp-h: clamp(440px, calc(100svh - var(--head-h) - 200px), 600px);
--hc-w: 248px;
--gut: 0px;
--ov: 10px;
padding-top: calc(var(--head-h) + clamp(20px, 3vw, 32px));
}
#hero .hero-grid { display: grid; gap: clamp(36px, 7vw, 56px); }
#hero .hero-copy { position: relative; z-index: 1; display: grid; justify-items: start; align-content: center; gap: 20px; max-width: 640px; }
#hero .hero-copy .lead { max-width: 30em; }
#hero .hero-br { display: none; }
#hero .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 30rem; margin-top: 8px; }
#hero .hero-stage { position: relative; isolation: isolate; display: grid; justify-items: center; min-width: 0; }
html.no-js #hero .hero-stage { display: none; }
#hero .hero-stage::before {
content: "";
position: absolute;
z-index: -1;
left: calc(var(--gut) + var(--hp-w) * 0.6);
top: 52%;
width: min(820px, 150%);
aspect-ratio: 1.15;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(255, 122, 89, calc(0.2 * var(--decor))), rgba(255, 179, 71, calc(0.06 * var(--decor))) 55%, transparent);
pointer-events: none;
}
#hero .hero-pick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 100%; }
#hero .hero-pick__more { display: flex; align-items: center; gap: 8px; }
#hero .hero-fit { border-style: dashed; border-color: var(--dash); }
@media (pointer: coarse) { #hero .hero-fit { min-height: 40px; } }
#hero .hero-scene { position: relative; width: var(--hp-w); max-width: 100%; margin-top: 26px; }
#hero .hero-phone { width: var(--hp-w); max-width: 100%; }
html.js #hero .hero-phone { min-height: var(--hp-h); }
#hero .phone { width: 100%; height: var(--hp-h); view-transition-name: hero-phone; view-transition-class: vt-swap; }
#hero .hero-pick { view-transition-name: hero-pick; view-transition-class: vt-now; }
#hero .hero-ctl { view-transition-name: hero-ctl; view-transition-class: vt-now; }
#hero .tg-msg .tg-link { display: inline-block; max-width: 100%; }
#hero .tg-msg:has(.tg-link) { max-width: 88%; }
#hero .hero-cab { display: none; z-index: 3; width: var(--hc-w); padding: 16px 14px 14px; view-transition-name: hero-cab; view-transition-class: vt-swap; hyphens: manual; -webkit-hyphens: manual; box-shadow: var(--shadow-card), 0 30px 80px -40px rgba(255, 122, 89, 0.45); }
#hero .hero-cab__head { display: flex; align-items: flex-start; gap: 10px; padding: 0 2px; }
#hero .hero-cab__head .logo { flex: none; margin-top: 1px; }
#hero .hero-cab__who { display: grid; gap: 4px; min-width: 0; }
#hero .hero-cab__who > b { font: 600 calc(15px * var(--scale)) / 1.25 var(--font); }
#hero .hero-cab__dlg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--hint); font-size: calc(12.5px * var(--scale)); line-height: 1.3; }
#hero .hero-cab__lang { padding: 2px 8px; font-size: calc(11px * var(--scale)); }
#hero .hero-cab__slots { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
#hero .hero-ev {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 9px;
min-height: calc(56px * var(--scale));
padding: 8px 10px 8px 9px;
border: 1px solid var(--hero-border);
border-radius: var(--r-md);
background: var(--card-2);
font: 600 calc(13.5px * var(--scale)) / 1.28 var(--font);
transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
#hero .hero-ev__ico { align-self: start; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 50%; background: var(--glass); font-size: 14px; line-height: 1; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
#hero .hero-ev__t { display: grid; gap: 1px; }
#hero .hero-ev__time { color: var(--hint); font: 500 calc(12px * var(--scale)) / 1.3 var(--font); font-variant-numeric: tabular-nums; }
#hero .hero-ev:not(.is-on) { border-style: dashed; border-color: var(--dash); background: transparent; opacity: 0.42; }
#hero .hero-ev:not(.is-on) .hero-ev__ico { filter: grayscale(1); opacity: 0.45; }
#hero .hero-ev.is-on { background: linear-gradient(rgba(255, 179, 71, 0.06), rgba(255, 179, 71, 0.06)), var(--card-2); }
#hero .hero-ev.is-on .hero-ev__ico { border-color: rgba(255, 179, 71, 0.45); background: rgba(255, 122, 89, 0.18); }
#hero .hero-ev.is-on .hero-ev__time { color: var(--hero-label); animation: hero-ev-in 260ms var(--ease) both; }
@keyframes hero-ev-in { from { opacity: 0; transform: translateY(3px); } }
#hero .thread.hero-zap { z-index: 5; }
#hero .thread.hero-zap .thread__path { display: none; }
#hero .spark.hero-zap { z-index: 6; }
#hero .hero-notices {
position: absolute;
z-index: 7;
left: 50%;
bottom: 22px;
width: max-content;
max-width: calc(100% - 40px);
transform: translateX(-50%);
pointer-events: none;
}
#hero .hero-notices .notice-pop { max-width: 100%; }
#hero .hero-foot { position: relative; display: grid; justify-items: center; width: var(--hp-w); max-width: 100%; }
#hero .hero-foot .demo-ctl { margin-top: 16px; }
#hero .demo-ctl__btn--main { border-color: rgba(255, 179, 71, 0.35); background: var(--glass); color: var(--amber); }
#hero .demo-ctl__btn--main:hover { background: var(--glass-2); }
#hero .hero-sticker { max-width: calc(var(--gut) - 26px); padding-inline: 10px; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity 200ms var(--ease); }
#hero .hero-sticker.is-hidden { opacity: 0; }
#hero .hero-sticker.is-instant, #hero .hero-sticker.is-instant .sticker__line { animation: none; }
@media (max-width: 1279px) { #hero .hero-sticker { display: none; } }
@media (max-width: 759px) {
#hero { --hp-h: clamp(400px, calc(100svh - var(--head-h) - 200px), 600px); padding-top: calc(var(--head-h) + 14px); }
#hero .tg__log > :first-child { margin-top: 0; }
#hero .hero-grid { gap: 20px; }
#hero .hero-copy { gap: 14px; }
#hero .hero-cta { justify-self: stretch; max-width: none; margin-top: 4px; }
#hero .hero-cta .btn { flex: 1 0 100%; }
#hero .hero-pick { flex-wrap: wrap; gap: 4px 12px; }
#hero .hero-pick__more { gap: 14px; min-height: 36px; }
#hero .hero-fit { padding: 6px 2px; border: 0; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--dash); text-underline-offset: 4px; }
#hero .hero-scene { width: 100%; max-width: 360px; margin-top: 20px; }
#hero .hero-phone, #hero .hero-foot { width: 100%; }
#hero .hero-foot .demo-ctl { margin-top: 12px; }
}
@media (max-width: 400px) {
#hero .hero-pick .seg__btn { padding-inline: 8px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
#hero { --hp-w: 330px; --hp-h: 600px; }
#hero .hero-scene { display: grid; grid-template-columns: var(--hp-w) var(--hc-w); align-items: end; gap: 28px; width: auto; }
#hero .hero-cab { display: block; margin-bottom: 48px; }
#hero .hero-notices { display: none; }
#hero .hero-foot { width: calc(var(--hp-w) + 28px + var(--hc-w)); }
}
@media (min-width: 1024px) {
#hero {
--hp-w: calc(316px * var(--scale));
--hp-h: clamp(460px, calc(100svh - var(--head-h) - 196px), calc(600px * var(--scale)));
--hc-w: calc(248px * var(--scale));
padding-top: calc(var(--head-h) + 16px);
}
#hero h1 { font-size: clamp(38px, 3.9vw, 54px); }
#hero .hero-br { display: inline; }
#hero h1 .grad-text { display: inline-block; }
#hero .hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; }
#hero .hero-copy { max-width: 520px; }
#hero .hero-cta { gap: 10px; }
#hero .hero-cta .btn--lg { padding-inline: 18px; font-size: calc(17px * var(--scale)); }
#hero .hero-stage { justify-items: start; }
#hero .hero-pick { flex-wrap: nowrap; justify-content: flex-start; margin-left: var(--gut); }
#hero .hero-scene { width: calc(var(--gut) + var(--hp-w) + var(--hc-w) - var(--ov)); padding-left: var(--gut); }
#hero .hero-foot { width: calc(var(--hp-w) + var(--hc-w) - var(--ov)); margin-left: var(--gut); }
#hero .hero-cab { display: block; position: absolute; right: 0; bottom: calc(var(--hp-h) * 0.06); }
#hero .hero-notices { display: none; }
}
@media (min-width: 1280px) {
#hero { --gut: 150px; }
}
@media (min-width: 1024px) {
html.present #hero { --hp-w: 340px; --hc-w: 256px; }
html.present #hero h1 { font-size: clamp(36px, 3.4vw, 50px); }
html.present #hero .hero-copy .lead { font-size: 20px; }
}
@media (min-width: 1280px) {
html.present #hero { --gut: 136px; }
}

/* ==== css/20-calc.css ==== */
#calc .calc-head { max-width: 1000px; }
@media (min-width: 1024px) and (max-height: 860px) {
#calc .calc-head { max-width: none; margin-bottom: 36px; }
#calc .calc-head .lead { max-width: none; text-wrap: balance; }
}
#calc .calc-grid { display: grid; gap: clamp(28px, 4vw, 36px); }
@media (min-width: 1024px) {
#calc .calc-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
grid-template-rows: auto 1fr;
grid-template-areas: "fields card" "assume card";
column-gap: clamp(48px, 6.5vw, 104px);
row-gap: 32px;
align-items: start;
}
#calc .calc-fields { grid-area: fields; }
#calc .calc-card { grid-area: card; }
#calc .calc-assume { grid-area: assume; }
}
#calc .calc-fields { display: grid; gap: clamp(22px, 2.6vw, 30px); }
#calc .calc-field { display: grid; gap: 4px; min-width: 0; }
#calc .calc-field__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "name val";
align-items: end;
column-gap: 16px;
row-gap: 12px;
}
#calc .calc-field__head--cur { grid-template-areas: "name val" "cur cur"; }
@media (min-width: 560px) {
#calc .calc-field__head--cur { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name cur val"; }
}
#calc .calc-field__name { grid-area: name; display: grid; gap: 2px; min-width: 0; padding-bottom: 4px; }
#calc .calc-field__label { font: 600 calc(17px * var(--scale)) / 1.3 var(--font); color: var(--text); }
#calc .calc-field__hint { font-size: var(--fs-micro); line-height: 1.35; color: var(--hint); }
#calc .calc-field__val {
grid-area: val;
display: inline-flex;
align-items: baseline;
gap: 0.22em;
font: 500 calc(clamp(30px, 3.1vw, 40px) * var(--scale)) / 1 var(--font-display);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--text);
white-space: nowrap;
}
#calc .calc-field__unit { font-size: 0.62em; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
#calc .calc-cur { grid-area: cur; justify-self: start; align-self: center; }
@media (min-width: 560px) { #calc .calc-cur { margin-left: 6px; } }
#calc .calc-num {
width: calc(var(--ch, 2) * 1ch + 0.3em);
min-height: 44px;
margin: -6px -6px -6px 0;
padding: 4px 6px;
border: 0;
border-radius: var(--r-xs);
background: repeating-linear-gradient(90deg, var(--dash) 0 4px, transparent 4px 7px) 6px calc(100% - 3px) / calc(100% - 12px) 1.5px no-repeat;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-align: right;
cursor: text;
transition: background-color var(--t-fast);
-moz-appearance: textfield;
}
@media (hover: hover) { #calc .calc-num:hover { background-color: var(--glass); } }
#calc .calc-num:focus { background: var(--glass-2); box-shadow: 0 0 0 2px var(--amber); outline: none; }
#calc .calc-range { height: 44px; touch-action: pan-y; }
#calc .calc-range::-webkit-slider-runnable-track { height: 8px; }
#calc .calc-range::-moz-range-track { height: 8px; }
#calc .calc-range::-moz-range-progress { height: 8px; }
#calc .calc-range::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -10px;
border: 0;
background: var(--cream);
box-shadow: 0 0 0 6px rgba(255, 179, 71, 0.2), 0 6px 16px rgba(0, 0, 0, 0.45);
transition: box-shadow var(--t-fast) var(--ease);
}
#calc .calc-range::-moz-range-thumb {
width: 28px;
height: 28px;
border: 0;
background: var(--cream);
box-shadow: 0 0 0 6px rgba(255, 179, 71, 0.2), 0 6px 16px rgba(0, 0, 0, 0.45);
}
@media (hover: hover) {
#calc .calc-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(255, 179, 71, 0.22), 0 6px 16px rgba(0, 0, 0, 0.45); }
}
#calc .calc-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 11px rgba(255, 179, 71, 0.26), 0 6px 16px rgba(0, 0, 0, 0.45); }
@media (pointer: coarse) {
html.js #calc .calc-range { pointer-events: none; }
html.js #calc .calc-field { touch-action: pan-y; }
}
#calc .calc-field.is-drag .calc-range::-webkit-slider-thumb { box-shadow: 0 0 0 11px rgba(255, 179, 71, 0.26), 0 6px 16px rgba(0, 0, 0, 0.45); }
#calc .calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--amber), 0 6px 16px rgba(0, 0, 0, 0.45); }
#calc .calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--amber); }
#calc .calc-assume {
border: 1px solid var(--border-2);
border-radius: var(--r-lg);
background: var(--card);
interpolate-size: allow-keywords;
}
#calc .calc-assume__sum {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px 16px;
min-height: 56px;
padding: 14px 16px 14px 18px;
border-radius: inherit;
list-style: none;
cursor: pointer;
}
#calc .calc-assume__sum::-webkit-details-marker { display: none; }
#calc .calc-assume__title { font-weight: 600; color: var(--text); }
#calc .calc-assume__chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow: hidden; transition: max-height 220ms var(--ease), opacity 160ms var(--ease), margin 220ms var(--ease); }
#calc .calc-chip {
padding: 5px 10px;
border-radius: var(--r-pill);
background: var(--glass);
font: 600 var(--fs-micro) / 1.25 var(--font);
color: var(--text-2);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#calc .calc-assume__chev {
grid-column: 2;
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--glass);
color: var(--amber);
font: 600 20px / 1 var(--font);
transition: transform var(--t) var(--ease), background-color var(--t-fast);
}
@media (hover: hover) { #calc .calc-assume__sum:hover .calc-assume__chev { background: var(--glass-2); } }
#calc .calc-assume[open] .calc-assume__chev { transform: rotate(90deg); }
#calc .calc-assume[open] .calc-assume__chips { max-height: 0; margin-top: -10px; opacity: 0; visibility: hidden; }
#calc .calc-assume__body { display: grid; gap: 18px; padding: 2px 18px 18px; }
@media (min-width: 640px) { #calc .calc-assume__body { grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: end; } }
#calc .calc-field--sm .calc-field__label { font-size: calc(15px * var(--scale)); }
#calc .calc-field--sm .calc-field__val { font-size: calc(22px * var(--scale)); }
@supports selector(::details-content) {
#calc .calc-assume::details-content, #calc .calc-how::details-content { block-size: 0; overflow-y: clip; transition: block-size 220ms var(--ease), content-visibility 220ms allow-discrete; }
#calc .calc-assume[open]::details-content, #calc .calc-how[open]::details-content { block-size: auto; }
}
#calc .calc-card {
container-type: inline-size;
padding: clamp(22px, 3vw, 38px);
border-radius: var(--r-2xl);
}
#calc .calc-total { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; margin-top: 14px; min-height: calc(min(calc(clamp(46px, 5.6vw, 80px) * var(--scale)), calc(158cqi / 11.5)) * 1.12); }
#calc .calc-big {
font: 600 min(calc(clamp(46px, 5.6vw, 80px) * var(--scale)), calc(158cqi / var(--len, 10))) / 1.05 var(--font-display);
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
padding-bottom: 0.06em;
}
#calc .calc-approx { margin-right: 0.02em; font-size: 0.5em; font-weight: 500; vertical-align: 0.32em; color: var(--amber); opacity: 0.8; }
#calc .calc-year { margin-top: 10px; font-size: var(--fs-lead); color: var(--text-2); font-variant-numeric: tabular-nums; }
#calc .calc-year b { font-weight: 700; color: var(--text); }
#calc .calc-bar {
display: flex;
height: 12px;
margin: clamp(22px, 2.6vw, 30px) 0 18px;
border-radius: var(--r-pill);
background: var(--glass);
overflow: hidden;
}
#calc .calc-bar__a, #calc .calc-bar__b { flex: none; height: 100%; transition: width 300ms var(--ease); }
#calc .calc-bar__a { width: calc(var(--a, 0) * 100%); background: linear-gradient(90deg, #FF6A4D, var(--coral)); }
#calc .calc-bar__b { width: calc(var(--b, 0) * 100%); background: var(--amber); box-shadow: -3px 0 0 0 var(--card); }
#calc .calc-rows { display: grid; gap: 10px; }
#calc .calc-row { display: flex; align-items: baseline; gap: 12px; color: var(--text-2); hyphens: manual; -webkit-hyphens: manual; }
#calc .calc-row b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
#calc .calc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); transform: translateY(-1px); }
#calc .calc-row--up .calc-dot { background: var(--amber); }
#calc .calc-row.is-alt .calc-dot { opacity: 0.45; }
#calc .calc-zero { color: var(--text-2); }
#calc .calc-how { margin-top: 14px; interpolate-size: allow-keywords; }
#calc .calc-how > summary {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
list-style: none;
font-weight: 600;
color: var(--link);
cursor: pointer;
}
#calc .calc-how > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { #calc .calc-how > summary:hover { text-decoration: underline; text-underline-offset: 4px; } }
#calc .calc-how__chev { display: inline-block; font-size: 1.15em; line-height: 1; transition: transform var(--t) var(--ease); }
#calc .calc-how[open] .calc-how__chev { transform: rotate(90deg); }
#calc .calc-how__list {
display: grid;
gap: 6px;
padding: 4px 0 4px 14px;
border-left: 2px solid rgba(255, 179, 71, 0.3);
font-size: var(--fs-small);
line-height: 1.45;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
#calc .calc-note { margin-top: 10px; }
#calc .calc-cta { margin-top: 18px; }
#calc .calc-next { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 600; color: var(--link); text-decoration: none; }
@media (hover: hover) { #calc .calc-next:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 599px) { #calc .calc-cta { display: flex; width: 100%; } }
html.present #calc .calc-cta, html.present #calc .calc-next { display: none; }
@media (min-width: 1024px) and (max-height: 860px) {
html.present #calc .calc-head { max-width: none; gap: 10px; margin-bottom: 18px; }
html.present #calc .calc-fields { gap: 14px; }
html.present #calc .calc-grid { row-gap: 16px; }
html.present #calc .calc-how { margin-top: 6px; }
}
@media (min-width: 1024px) and (max-height: 790px) {
#calc .calc-card { padding-block: 28px; }
#calc .calc-bar { margin-top: 20px; }
#calc .calc-fields { gap: 22px; }
#calc .calc-grid { row-gap: 20px; }
}
@media (min-width: 1200px) and (max-height: 860px) {
html.present #calc .calc-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px 40px; margin-bottom: 22px; }
html.present #calc .calc-head h2 { max-width: 15.5em; font-size: 44px; }
html.present #calc .calc-head .lead { font-size: 20px; }
}

/* ==== css/30-features.css ==== */
#features {
--ft-gap: clamp(12px, 1.3vw, 16px);
--ft-pad: clamp(18px, 1.7vw, 22px);
--ft-tile: 38px;
}
#features .section__head { max-width: none; margin-bottom: clamp(28px, 3.4vw, 48px); }
#features .ft-grid { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
#features .ft-card { position: relative; min-width: 0; border-radius: var(--r-xl); }
#features .ft-t { font: 600 calc(18px * var(--scale)) / 1.3 var(--font); letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
#features .ft-p { margin-top: 6px; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
#features .ft-ico { --tile: var(--ft-tile); }
#features .ft-ico svg { width: 21px; height: 21px; }
#features .ft-sm { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 2px; border-radius: 0; }
#features .ft-sm + .ft-sm { border-top: 1px solid var(--border); }
#features .ft-sm .ft-t { padding-top: 1px; }
#features .ft-up { margin-bottom: 8px; }
#features .ft-crm { margin-top: 12px; }
#features .ft-soon { margin-top: var(--ft-gap); }
@media (min-width: 640px) {
#features .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ft-gap); }
#features .ft-wide { grid-column: 1 / -1; }
#features .ft-up, #features .ft-crm, #features .ft-soon { margin: 0; }
#features .ft-sm {
display: flex;
flex-direction: column;
gap: 16px;
padding: var(--ft-pad);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: linear-gradient(180deg, rgba(244, 238, 232, 0.025), transparent 60%), var(--card);
}
#features .ft-sm { gap: 20px; }
}
@media (min-width: 1024px) {
#features .ft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#features .ft-wide { grid-column: span 2; }
}
@media (min-width: 1024px) and (max-height: 860px) {
#features { --ft-pad: 18px; --ft-gap: 12px; --ft-tile: 34px; }
#features .section__head { margin-bottom: 22px; }
#features .ft-ico svg { width: 19px; height: 19px; }
#features .ft-sm { gap: 12px; }
#features .ft-check { gap: 8px; padding-top: 13px; }
}
@media (min-width: 1024px) and (max-height: 800px) {
#features .section__head { margin-bottom: 16px; }
html.present #features { --ft-pad: 15px; --ft-gap: 10px; }
html.present #features .section__head { margin-bottom: 16px; }
html.present #features .ft-sm { gap: 8px; }
}
#features .ft-up { padding: var(--ft-pad); container-type: inline-size; }
#features .ft-up__in { display: grid; gap: 20px; }
#features .ft-up__txt { display: flex; flex-direction: column; gap: 16px; }
#features .ft-up .ft-t { font-size: calc(clamp(19px, 1.7vw, 22px) * var(--scale)); }
#features .ft-up .ft-p { max-width: 24em; }
@container (min-width: 400px) {
#features .ft-up__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; gap: clamp(16px, 2vw, 24px); }
#features .ft-up__txt { justify-content: space-between; }
}
#features .ft-checks { display: grid; view-transition-name: ft-check; view-transition-class: vt-swap; }
#features .ft-check { grid-area: 1 / 1; }
html:not([data-niche="fashion"]) #features .ft-check--fashion,
html:not([data-niche="beauty"]) #features .ft-check--beauty,
html:not([data-niche="gadgets"]) #features .ft-check--gadgets { visibility: hidden; }
#features .ft-check {
--z: 5px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px calc(16px + var(--z));
border-radius: var(--r-md) var(--r-md) 0 0;
background: linear-gradient(180deg, rgba(13, 11, 10, 0.62), rgba(13, 11, 10, 0.5));
box-shadow: inset 0 1px 0 rgba(244, 238, 232, 0.06);
font-variant-numeric: tabular-nums;
-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
}
#features .ft-check__ex { height: 20px; padding-inline: 8px; }
#features .ft-check__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; color: var(--text); font: 600 15px / 1.35 var(--font); }
#features .ft-check__p { flex: none; color: var(--text-2); white-space: nowrap; }
#features .ft-check__row--add { color: var(--amber); }
#features .ft-check__row--add .ft-check__p { color: var(--amber); }
#features .ft-check__row--off, #features .ft-check__row--off .ft-check__p { color: var(--hint); font-size: 13px; }
#features .ft-check__total { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(244, 238, 232, 0.18); }
#features .ft-check__sum { display: inline-block; font: 500 calc(26px * var(--scale)) / 1.15 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; transform-origin: 100% 60%; }
#features .ft-up.is-pre .ft-check__row--add { opacity: 0; transform: translateY(10px); }
#features .ft-up.is-play .ft-check__row--add { transition: opacity var(--t-slow) var(--ease) 120ms, transform var(--t-slow) var(--ease) 120ms; }
#features .ft-check__sum.is-bump { animation: ft-bump 520ms var(--ease) 1; }
@keyframes ft-bump { 0% { transform: scale(1); } 40% { transform: scale(1.07); filter: drop-shadow(0 0 14px rgba(255, 122, 89, 0.55)); } 100% { transform: scale(1); } }
#features .ft-crm { padding: var(--ft-pad); background: var(--glass); container-type: inline-size; }
#features .ft-crm__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#features .ft-crm__frame rect { fill: none; stroke: url(#ft-crm-grad); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.85; }
#features .ft-crm__in { position: relative; display: grid; gap: 18px; height: 100%; }
#features .ft-crm__main { display: flex; flex-direction: column; gap: 16px; }
#features .ft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#features .ft-crm__tag { padding: 5px 12px; font-size: 12px; }
#features .ft-order {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
justify-self: start;
align-self: end;
padding: 10px 14px;
border: 1px solid var(--border-2);
border-radius: var(--r-md);
background: rgba(13, 11, 10, 0.5);
color: var(--text);
font: 600 14px / 1.3 var(--font);
font-variant-numeric: tabular-nums;
}
#features .ft-order__sep { color: var(--hint); }
#features .ft-order__st { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
#features .ft-order__st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(143, 227, 180, 0.6); }
@container (min-width: 480px) {
#features .ft-crm__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
#features .ft-soon { display: flex; flex-direction: column; gap: 16px; padding: var(--ft-pad); border-radius: var(--r-xl); }
#features .ft-soon__ico { background: var(--glass); box-shadow: inset 0 0 0 1px var(--border); color: var(--hint); }
#features .ft-soon__t { display: flex; font-size: inherit; }
#features .ft-soon__list { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
#features .ft-soon__list > li {
padding: 7px 13px;
border: 1px dashed var(--dash);
border-radius: var(--r-pill);
color: var(--hint);
font: 600 var(--fs-small) / 1.35 var(--font);
}

/* ==== css/40-cabinet.css ==== */
#cabinet .cab-stage {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "head head" "calls calls" "phone phone" "now ctl";
align-items: center;
gap: 16px 14px;
max-width: 560px;
margin-inline: auto;
}
#cabinet .cab-side { display: contents; }
#cabinet .cab-head { grid-area: head; margin: 0 0 8px; }
#cabinet .cab-calls { grid-area: calls; position: relative; z-index: 1; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#cabinet .cab-phone { grid-area: phone; display: grid; justify-items: center; min-width: 0; padding-top: 6px; }
#cabinet .cab-ctl { grid-area: ctl; position: relative; z-index: 1; display: flex; }
#cabinet .cab-call__btn {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
grid-template-areas: "ico title" "ico line";
align-items: center;
column-gap: 16px;
row-gap: 3px;
width: 100%;
padding: 15px 20px 17px 16px;
border-radius: var(--r-lg);
color: var(--text-2);
text-align: left;
transition: background-color var(--t) var(--ease);
}
#cabinet .cab-call__btn::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border: 1px solid var(--hero-border);
border-radius: inherit;
background: var(--hero-bg);
box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity var(--t-slow) var(--ease);
}
#cabinet .cab-call__ico {
grid-area: ico;
align-self: start;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--r-sm);
background: var(--glass);
color: var(--hint);
transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
#cabinet .cab-call__title { grid-area: title; color: var(--text); font: 600 calc(18px * var(--scale)) / 1.3 var(--font); }
#cabinet .cab-call__line { grid-area: line; color: var(--hint); font-size: calc(15px * var(--scale)); line-height: 1.45; transition: color var(--t) var(--ease); }
#cabinet .cab-call__line, #cabinet .cab-now { hyphens: manual; -webkit-hyphens: manual; }
#cabinet .cab-call__bar {
position: absolute;
left: 76px;
right: 20px;
bottom: 9px;
height: 2px;
overflow: hidden;
border-radius: 2px;
background: var(--glass-2);
opacity: 0;
transition: opacity var(--t) var(--ease);
}
#cabinet .cab-call__bar i { display: block; height: 100%; background: var(--grad-line); transform: scaleX(0); transform-origin: left center; }
#cabinet .cab-stage.is-auto .cab-call.is-active .cab-call__bar { opacity: 1; }
#cabinet .cab-call.is-active .cab-call__btn::before { opacity: 1; }
#cabinet .cab-call.is-active .cab-call__ico { background: rgba(255, 122, 89, 0.16); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.26); }
#cabinet .cab-call.is-active .cab-call__line { color: var(--text-2); }
@media (hover: hover) {
#cabinet .cab-call:not(.is-active) .cab-call__btn:hover { background: var(--glass); }
#cabinet .cab-call:not(.is-active) .cab-call__btn:hover .cab-call__ico { color: var(--text-2); }
}
#cabinet .cab-now {
grid-area: now;
position: relative;
min-height: calc(2 * 1.45em);
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.45;
text-wrap: pretty;
}
#cabinet .cab-auto {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
background: var(--glass);
color: var(--text-2);
font: 600 14px / 1 var(--font);
white-space: nowrap;
transition: background-color var(--t-fast), color var(--t-fast);
}
#cabinet .cab-auto[hidden] { display: inline-flex; visibility: hidden; }
#cabinet .cab-auto svg { flex: none; }
@media (hover: hover) { #cabinet .cab-auto:hover { background: var(--glass-2); color: var(--text); } }
#cabinet .cab-stage:not(.is-manual) .ma-view { overflow-y: hidden; }
#cabinet .ma-check.cab-pulse .ma-check__box { animation: cab-pulse 1100ms var(--ease) 1; }
@keyframes cab-pulse {
0%, 50%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(255, 122, 89, 0); }
20%, 70% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255, 122, 89, 0.28); }
49% { box-shadow: 0 0 0 10px rgba(255, 122, 89, 0); }
}
#cabinet .ma-badge.cab-glow { animation: cab-glow 1300ms var(--ease) 1; }
@keyframes cab-glow {
0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(143, 227, 180, 0); }
30%, 55% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(143, 227, 180, 0.3), 0 0 18px rgba(143, 227, 180, 0.55); }
}
#cabinet .ma-row.cab-new { animation: cab-new 1400ms var(--ease) 1; }
@keyframes cab-new {
0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 122, 89, 0); }
20%, 65% { box-shadow: inset 0 0 0 2px #FF7A59; background-color: rgba(255, 122, 89, 0.10); }
}
@media (max-width: 899px) {
#cabinet .cab-phone .phone {
--phone-w: 390px;
width: min(100%, calc(390px * var(--scale)));
height: clamp(460px, calc(100svh - var(--head-h) - var(--tabbar-h) - 98px), 700px);
}
html.js #cabinet .cab-calls {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2px;
padding: 4px;
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
background: var(--glass);
}
html.js #cabinet .cab-call__btn {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "title";
place-items: center;
min-height: 44px;
padding: 8px 4px 10px;
border-radius: var(--r-pill);
text-align: center;
}
html.js #cabinet .cab-call__btn::before { border: 0; background: rgba(255, 122, 89, 0.16); box-shadow: none; }
html.js #cabinet .cab-call__ico { display: none; }
html.js #cabinet .cab-call__line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.js #cabinet .cab-call__title { color: var(--text-2); font-size: 13px; white-space: nowrap; transition: color var(--t) var(--ease); }
html.js #cabinet .cab-call.is-active .cab-call__title { color: var(--amber); }
html.js #cabinet .cab-call__bar { left: 14px; right: 14px; bottom: 5px; }
#cabinet .cab-auto { width: 44px; padding: 0; }
#cabinet .cab-auto span { display: none; }
}
@media (max-width: 380px) {
html.js #cabinet .cab-call__title { font-size: 12.5px; }
}
@media (min-width: 900px) {
#cabinet .cab-stage {
--cab-ph: clamp(600px, calc(100svh - var(--head-h) - 76px), calc(820px * var(--scale)));
--cab-pw: clamp(360px, calc(var(--cab-ph) * 0.49), calc(404px * var(--scale)));
grid-template-columns: var(--cab-pw) minmax(0, 500px);
grid-template-areas: "phone side";
justify-content: center;
align-items: start;
gap: 14px clamp(48px, 7vw, 120px);
max-width: none;
}
#cabinet .cab-side { grid-area: side; align-self: center; display: grid; gap: 28px; }
#cabinet .cab-head, #cabinet .cab-calls, #cabinet .cab-ctl { grid-area: auto; }
#cabinet .cab-head { margin: 0; }
#cabinet .cab-calls { gap: 4px; }
#cabinet .cab-ctl { padding-left: 16px; }
#cabinet .cab-now { display: none; }
#cabinet .cab-phone { padding-top: 16px; }
#cabinet .cab-phone .phone { --phone-w: 404px; width: var(--cab-pw); height: var(--cab-ph); }
}
@media (min-width: 900px) and (max-width: 1099px) {
#cabinet .cab-stage {
--cab-ph: clamp(540px, calc(100svh - var(--head-h) - var(--tabbar-h) - 84px), calc(820px * var(--scale)));
--cab-pw: clamp(340px, calc(var(--cab-ph) * 0.49), calc(404px * var(--scale)));
}
}
@media (min-width: 900px) {
html.present #cabinet .cab-stage { --cab-ph: clamp(520px, calc(100svh - var(--head-h) - 110px), calc(820px * var(--scale))); grid-template-columns: var(--cab-pw) minmax(0, 580px); }
html.present #cabinet .cab-side { gap: 22px; }
html.present #cabinet .cab-call__btn { padding-block: 11px 13px; }
html.present #cabinet .cab-call__bar { bottom: 6px; }
}
@media (min-width: 900px) and (max-height: 860px) {
#cabinet .cab-side { gap: 20px; }
#cabinet .cab-call__btn { padding-block: 12px 14px; }
#cabinet .cab-call__bar { bottom: 7px; }
}
html.no-js #cabinet .cab-phone, html.no-js #cabinet .cab-now, html.no-js #cabinet .cab-ctl { display: none; }
html.no-js #cabinet .cab-call__ico { display: none; }
html.no-js #cabinet .cab-call__btn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "line"; padding-left: 20px; }
html.no-js #cabinet .cab-call.is-active .cab-call__btn::before { opacity: 0; }
@media (min-width: 900px) {
html.no-js #cabinet .cab-stage { grid-template-columns: minmax(0, 560px); grid-template-areas: "side"; }
}
#cabinet .cab-br { display: none; }
@media (min-width: 900px) { #cabinet .cab-br { display: inline; } }

/* ==== css/50-launch.css ==== */
#launch {
--lc-num: 44px;
--lc-gap: 16px;
--lc-pad: clamp(18px, 2.2vw, 28px);
}
@media (min-width: 900px) {
#launch { --lc-num: 64px; --lc-gap: clamp(16px, 2vw, 24px); }
}
#launch .lc-steps { display: grid; margin: 0; padding: 0; list-style: none; }
#launch .lc-step {
position: relative;
display: grid;
grid-template-columns: var(--lc-num) minmax(0, 1fr);
align-items: start;
column-gap: 14px;
padding-bottom: var(--lc-gap);
}
#launch .lc-step:last-child { padding-bottom: 0; }
#launch .lc-step:not(:last-child)::before,
#launch .lc-step:not(:last-child)::after {
content: "";
position: absolute;
left: calc(var(--lc-num) / 2 - 1px);
top: calc(var(--lc-num) / 2);
bottom: calc(var(--lc-num) / -2);
width: 2px;
border-radius: 2px;
}
#launch .lc-step:not(:last-child)::before { background: var(--border-2); }
#launch .lc-step:not(:last-child)::after {
background: linear-gradient(180deg, var(--coral), var(--amber) 55%, var(--peach)) 0 0 / 100% 200%;
box-shadow: 0 0 10px rgba(255, 122, 89, 0.45);
transform-origin: 50% 0;
}
#launch .lc-step:nth-child(2)::after { background-position: 0 100%; }
#launch .lc-num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: var(--lc-num);
height: var(--lc-num);
border-radius: 50%;
background: var(--bg);
box-shadow: inset 0 0 0 1.5px var(--border-2);
color: var(--on-grad);
font: 500 calc(var(--lc-num) * 0.36) / 1 var(--font-display);
font-variant-numeric: tabular-nums;
}
#launch .lc-num::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--grad);
box-shadow: 0 0 0 6px rgba(255, 122, 89, 0.12), 0 0 26px rgba(255, 122, 89, 0.4);
}
#launch .lc-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; height: 100%; padding: var(--lc-pad); border-radius: var(--r-xl); }
#launch .lc-card.card { background: linear-gradient(180deg, rgba(244, 238, 232, 0.025), transparent 60%), var(--card); }
#launch .lc-t { font: 600 var(--fs-h3) / 1.25 var(--font); letter-spacing: -0.01em; color: var(--text); }
#launch .lc-p { margin-bottom: 12px; color: var(--text-2); font-size: var(--fs-text); line-height: 1.5; text-wrap: pretty; }
#launch .lc-mock { display: grid; gap: 10px; margin-top: auto; }
#launch .lc-mock__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px 12px 16px;
border: 1px solid var(--border-2);
border-radius: var(--r-md);
background: rgba(13, 11, 10, 0.5);
color: var(--text);
font: 600 15px / 1.35 var(--font);
hyphens: manual;
-webkit-hyphens: manual;
}
#launch .lc-mock__label { text-wrap: balance; }
#launch .lc-sw { --sw-w: 48px; --sw-h: 28px; }
#launch .lc-mock__ok {
padding: 11px 14px;
border-radius: 14px;
background: var(--ok-bg);
color: var(--ok);
font: 600 14px / 1.35 var(--font);
hyphens: manual;
-webkit-hyphens: manual;
text-wrap: balance;
transition: opacity var(--t-slow) var(--ease) 140ms, transform var(--t-slow) var(--ease) 140ms, visibility 0s;
}
#launch .lc-mock.is-off .lc-mock__ok {
opacity: 0;
transform: translateY(6px);
visibility: hidden;
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
@media (min-width: 900px) {
#launch .lc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lc-gap); }
#launch .lc-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 22px; padding-bottom: 0; }
#launch .lc-step:not(:last-child)::before,
#launch .lc-step:not(:last-child)::after {
left: calc(var(--lc-num) / 2);
top: calc(var(--lc-num) / 2 - 1px);
bottom: auto;
width: calc(100% + var(--lc-gap));
height: 2px;
}
#launch .lc-step:not(:last-child)::after {
background: linear-gradient(90deg, var(--coral), var(--amber) 55%, var(--peach)) 0 0 / 200% 100%;
transform-origin: 0 50%;
}
#launch .lc-step:nth-child(2)::after { background-position: 100% 0; }
}
#launch .lc-steps.is-pre .lc-step::after { transform: scaleY(0); }
#launch .lc-steps.is-pre .lc-num { color: var(--hint); }
#launch .lc-steps.is-pre .lc-num::before { opacity: 0; transform: scale(0.7); }
@media (min-width: 900px) {
#launch .lc-steps.is-pre .lc-step::after { transform: scaleX(0); }
}
#launch .lc-steps.is-play .lc-step::after { transition: transform 300ms linear; }
#launch .lc-steps.is-play .lc-step:nth-child(2)::after { transition-delay: 300ms; }
#launch .lc-steps.is-play .lc-num { transition: color var(--t) var(--ease); }
#launch .lc-steps.is-play .lc-num::before { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
#launch .lc-steps.is-play .lc-step:nth-child(2) .lc-num,
#launch .lc-steps.is-play .lc-step:nth-child(2) .lc-num::before { transition-delay: 280ms; }
#launch .lc-steps.is-play .lc-step:nth-child(3) .lc-num,
#launch .lc-steps.is-play .lc-step:nth-child(3) .lc-num::before { transition-delay: 580ms; }
#launch .lc-sk { display: none; }
@media (min-width: 900px) {
#launch .lc-sk {
display: grid;
gap: 13px;
margin-top: auto;
padding: 16px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: rgba(13, 11, 10, 0.32);
}
#launch .lc-sk__row { display: flex; align-items: center; gap: 10px; min-height: 18px; color: var(--text-2); font: 600 13px / 1.3 var(--font); }
#launch .lc-sk__row i { flex: none; display: block; }
#launch .lc-sk__ok { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); opacity: 0.9; }
#launch .lc-sk__ok::after {
content: "";
position: absolute;
left: 5px;
top: 3.5px;
width: 4px;
height: 7px;
border: solid var(--on-grad);
border-width: 0 1.8px 1.8px 0;
transform: rotate(45deg);
}
#launch .lc-sk__chat { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linejoin: round; }
#launch .lc-sk__sw { position: relative; width: 28px; height: 16px; margin-left: auto; border-radius: 99px; background: var(--grad); opacity: 0.9; }
#launch .lc-sk__sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
}
@media (min-width: 1024px) and (min-height: 640px) {
#launch.section--screen { min-height: 0; }
}

/* ==== css/60-faq.css ==== */
#faq { --fq-nw: 34px; --fq-gap: clamp(14px, 2vw, 24px); }
#faq .fq-grid { display: grid; }
#faq .fq-head { margin-bottom: clamp(24px, 5vw, 40px); }
#faq .fq-list { min-width: 0; border-top: 1px solid var(--border); }
#faq .fq-more {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 14px 16px;
max-width: 420px;
margin-top: clamp(20px, 3vw, 32px);
padding: 20px 22px;
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: linear-gradient(180deg, rgba(244, 238, 232, 0.03), transparent 70%), var(--card);
}
#faq .fq-more__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(255, 122, 89, 0.14); color: var(--amber); }
#faq .fq-more__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#faq .fq-more__t { color: var(--text); font: 600 calc(18px * var(--scale)) / 1.3 var(--font); }
#faq .fq-more__btn, #faq .fq-more__p { grid-column: 1 / -1; }
#faq .fq-more__p { color: var(--text-2); }
@media (max-width: 1023px) {
#faq .fq-grid { grid-template-areas: "head" "list" "more"; }
#faq .fq-head { display: contents; }
#faq .fq-head h2 { grid-area: head; margin-bottom: clamp(24px, 5vw, 40px); }
#faq .fq-list { grid-area: list; }
#faq .fq-more { grid-area: more; }
}
@media (min-width: 1024px) {
#faq .fq-grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(56px, 7vw, 112px);
align-items: start;
}
#faq .fq-head { margin: 0; padding-top: 12px; }
#faq .fq-head h2 { line-height: 1.1; }
}
#faq .acc > summary {
justify-content: flex-start;
gap: var(--fq-gap);
padding: 22px 0;
hyphens: manual;
-webkit-hyphens: manual;
transition: color var(--t-fast);
}
#faq .fq-n {
flex: none;
width: var(--fq-nw);
color: var(--hint);
font: 500 calc(13px * var(--scale)) / 1 var(--font-display);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
transition: color var(--t-fast);
}
#faq .fq-q { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
#faq .acc__icon { margin-left: auto; }
@media (hover: hover) {
#faq .acc > summary:hover { color: var(--peach); }
}
#faq .acc[open] > summary { color: var(--text); }
#faq .acc[open] .fq-n { color: var(--amber); }
#faq .acc[open] .acc__icon { background: rgba(255, 122, 89, 0.16); }
#faq .acc__body { padding: 0 54px 26px calc(var(--fq-nw) + var(--fq-gap)); }
#faq .acc__body p { max-width: 58ch; font-size: var(--fs-text); line-height: 1.62; }
#faq .acc[open] .acc__body { animation: fq-in 280ms var(--ease) both; }
@keyframes fq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 599px) {
#faq { --fq-nw: 26px; --fq-gap: 12px; }
#faq .acc > summary { padding-block: 18px; font-size: calc(17px * var(--scale)); }
#faq .fq-n { font-size: 12px; }
#faq .acc__body { padding-right: 0; padding-bottom: 22px; }
}

/* ==== css/70-final.css ==== */
#final { --fn-pad: clamp(22px, 4.2vw, 60px); }
#final .fn-card {
display: grid;
gap: clamp(26px, 4vw, 40px);
padding: var(--fn-pad);
border-radius: var(--r-2xl);
overflow: hidden;
isolation: isolate;
}
#final .fn-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
radial-gradient(46% 52% at 4% 0%, rgba(255, 122, 89, calc(0.24 * var(--decor))), transparent 70%),
radial-gradient(44% 58% at 86% 60%, rgba(255, 179, 71, calc(0.10 * var(--decor))), transparent 70%);
pointer-events: none;
}
#final .fn-main { display: grid; justify-items: start; gap: clamp(22px, 2.4vw, 30px); min-width: 0; }
#final .fn-logo { display: inline-flex; }
#final .fn-logo .logo { --size: 72px; }
#final .fn-text { display: grid; gap: clamp(12px, 1.4vw, 18px); }
#final .fn-text h2 { max-width: 10em; font-size: calc(clamp(32px, 5.6vw, 54px) * var(--scale)); line-height: 1.08; }
#final .fn-text .lead { max-width: 25em; color: var(--text-2); }
#final .fn-calc {
display: flex;
align-items: center;
gap: 14px;
min-height: 64px;
max-width: 100%;
padding: 10px 22px 10px 10px;
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
background: var(--glass);
}
#final .fn-calc { position: relative; }
#final .fn-calc.is-on { border-color: rgba(255, 179, 71, 0.26); background: rgba(13, 11, 10, 0.38); }
#final .fn-calc__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
html:not(.has-contact) #final .fn-calc:not(.is-on) { border-color: transparent; background: var(--grad); box-shadow: 0 10px 28px rgba(255, 122, 89, 0.26); }
html:not(.has-contact) #final .fn-calc:not(.is-on) .fn-calc__go { color: var(--on-grad); }
html:not(.has-contact) #final .fn-calc:not(.is-on) .fn-calc__ico { background: rgba(26, 15, 10, 0.12); color: var(--on-grad); }
#final .fn-calc__ico {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: rgba(255, 122, 89, 0.14);
color: var(--amber);
}
#final .fn-calc.is-on .fn-calc__ico { background: var(--grad); color: var(--on-grad); box-shadow: 0 8px 24px rgba(255, 122, 89, 0.28); }
#final .fn-calc__ico svg { width: 22px; height: 22px; }
#final .fn-calc__go { color: var(--link); font: 600 var(--fs-lead) / 1.3 var(--font); text-decoration: none; }
#final .fn-calc__go:hover { text-decoration: underline; text-underline-offset: 4px; }
#final .fn-calc__go:hover .btn__arr { animation: arrow-nudge-px 500ms var(--ease) 1; }
#final .fn-calc__sum { color: var(--text-2); font-size: var(--fs-lead); line-height: 1.3; }
#final .fn-calc__v {
margin-inline: 2px;
font: 600 calc(clamp(20px, 1.9vw, 26px) * var(--scale)) / 1.1 var(--font-display);
letter-spacing: -0.01em;
white-space: nowrap;
background: var(--grad-line);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
#final .fn-calc__v i { font-style: normal; margin-inline: 0.06em; }
#final .fn-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; width: 100%; }
html:not(.has-contact):not(.has-public) #final .fn-act { display: none; }
#final .fn-btn { padding-inline: 34px; }
#final .fn-qr { --qr: 100px; flex: none; }
#final .fn-side { width: 100%; max-width: calc(460px * var(--scale)); min-width: 0; justify-self: center; }
#final .fn-chat { position: relative; --demo-r: 58px; }
#final .fn-chat .tg--pane {
box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 70px rgba(255, 122, 89, calc(0.16 * var(--decor)));
}
#final .fn-chat .tg__head { padding-left: 14px; }
#final .fn-chat .tg__back { display: none; }
#final .fn-chat .tg__log { min-height: max(var(--fn-log, 0px), 240px); padding: 16px 14px 18px; }
html.no-js #final .fn-side, html.no-js #final .fn-qr { display: none; }
@media (min-width: 1024px) {
#final .fn-card {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
column-gap: clamp(40px, 5vw, 80px);
align-items: center;
}
#final .fn-text h2 { font-size: calc(clamp(40px, 3.8vw, 54px) * var(--scale)); }
html.present #final .fn-text h2 { font-size: calc(clamp(36px, 3.6vw, 50px) * var(--scale)); }
#final .fn-chat .tg__log { min-height: max(var(--fn-log, 0px), 200px); }
}
@media (min-width: 1024px) and (max-height: 860px) {
#final { --fn-pad: 44px; }
#final .fn-main { gap: 20px; }
#final .fn-logo .logo { --size: 60px; }
#final .fn-chat .tg__log { min-height: max(var(--fn-log, 0px), 190px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
#final .fn-logo .logo { --size: 52px; }
#final .fn-chat .tg__composer { display: none; }
#final .fn-chat .tg__log { min-height: max(var(--fn-log, 0px), 170px); }
}
@media (max-width: 1023px) {
#final .fn-card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
#final .fn-main { display: contents; }
#final .fn-logo { order: 1; }
#final .fn-text { order: 2; }
#final .fn-side { order: 3; justify-self: stretch; max-width: 520px; }
#final .fn-calc { order: 4; }
#final .fn-act { order: 5; }
}
@media (max-width: 599px) {
#final .fn-card { gap: 22px; }
#final .fn-logo .logo { --size: 56px; }
#final .fn-chat .tg__log { min-height: max(var(--fn-log, 0px), 190px); }
#final .fn-calc { width: 100%; padding-right: 16px; }
#final .fn-btn { width: 100%; justify-content: center; }
#final .fn-qr { display: none; }
}
@media (max-width: 399px) {
#final .fn-calc { gap: 12px; padding-left: 8px; }
#final .fn-calc__go, #final .fn-calc__sum { font-size: 16px; }
#final .fn-btn { padding-inline: 16px; font-size: 16px; white-space: normal; text-align: center; }
}