/* Light theme (default). The dark theme below only redefines these tokens. */
:root {
  --bg: #ffffff;
  --soft: #f3f6ff;
  --surface: #ffffff;
  --heading: #0b0f19;
  --text: #565973;
  --strong: #33354d;
  --line: #e2e5f1;
  --primary: #6366f1;
  --primary-hover: #5254d8;
  --primary-soft: #eff0fe;
  --outline: #c9cdf5;
  --telegram: #24A1DE;
  --telegram-hover: #1c8fc8;
  --violet: #6800ff;
  --plan-line: #d5d9f0;
  --plan-lite: linear-gradient(135deg, #e2f3fb 0%, #ffffff 55%);
  --plan-premium: linear-gradient(135deg, #e6e7fd 0%, #f6f6ff 60%);
  --pill-bg: #dfe3ee;
  --pill-line: #c4c9d8;
  --pill-lite-bg: #bfe6f7;
  --pill-lite-line: #8fd0ee;
  --pill-premium-bg: #d6d7fb;
  --pill-premium-line: #a9abf5;
  --phone-frame: #10131c;
  --shadow: rgba(11, 15, 25, 0.1);
  --cta: #171a23;
  --footer: #0b0f19;
}
:root[data-theme="dark"] {
  --bg: #0b0f19;
  --soft: #111624;
  --surface: #181d2c;
  --heading: #f3f5fb;
  --text: #a3a8c3;
  --strong: #d5d8ea;
  --line: #282e43;
  --primary: #8184f8;
  --primary-hover: #9698fa;
  --primary-soft: #23274b;
  --outline: #3b3f73;
  --violet: #a678ff;
  --plan-line: #2c3250;
  --plan-lite: linear-gradient(135deg, #12303f 0%, #181d2c 55%);
  --plan-premium: linear-gradient(135deg, #2a2c5c 0%, #1b1e36 60%);
  --pill-bg: #2a2f45;
  --pill-line: #3a4060;
  --pill-lite-bg: #17465c;
  --pill-lite-line: #1f6a8c;
  --pill-premium-bg: #33367a;
  --pill-premium-line: #4a4ea8;
  --phone-frame: #05070c;
  --shadow: rgba(0, 0, 0, 0.4);
  --cta: #141826;
  --footer: #06080e;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.6 Manrope, "Segoe UI", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
h1, h2, h3 { color: var(--heading); font-weight: 800; line-height: 1.25; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); text-align: center; }
h3 { font-size: 1.35rem; font-weight: 700; }
p { margin: 0; }
strong { color: var(--strong); }

.container { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
section { padding-block: 88px; }
.soft { background: var(--soft); }
.section-lead { text-align: center; max-width: 880px; margin: 18px auto 0; font-size: 1.1rem; }
.cmd { display: inline-block; background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: 0.9rem; padding: 2px 9px; border-radius: 4px; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; text-decoration: none; border-radius: 6px; padding: 15px 32px; font-size: 1.1rem; border: 1px solid transparent; }
.btn i { font-size: 1.4em; }
.btn-tg { background: var(--telegram); color: #fff; }
.btn-tg:hover { background: var(--telegram-hover); }
.btn-primary { background: #6366f1; color: #fff; }
.btn-primary:hover { background: #5254d8; }
.btn-outline { background: var(--surface); color: var(--primary); border-color: var(--outline); font-size: 0.95rem; padding: 11px 26px; }
.btn-outline:hover { background: var(--primary-soft); }
.btn-sm { padding: 9px 20px; font-size: 0.95rem; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }

/* Header */
header.site { background: var(--soft); position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--line); }
header.site .container { display: flex; align-items: center; gap: 20px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); font-weight: 800; font-size: 1.3rem; text-decoration: none; margin-right: 16px; }
.brand .logo { width: 38px; height: 38px; flex: none; }
nav.main { display: flex; gap: 28px; margin-right: auto; flex-wrap: wrap; }
nav.main a { color: var(--strong); text-decoration: none; font-weight: 600; }
nav.main a:hover { color: var(--primary); }

.social { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--heading); font-size: 1.3rem; display: grid; place-items: center; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.social:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.social.instagram:hover { border-color: #d6249f; }
.social.instagram:hover i { color: transparent; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); -webkit-background-clip: text; background-clip: text; }
.social.threads:hover { color: #000; border-color: #000; }
:root[data-theme="dark"] .social.threads:hover { color: #fff; border-color: #fff; }
header.site .social + .social, header.site .social + .theme-toggle { margin-left: -8px; }
@media (max-width: 520px) { header.site .social { display: none; } }
.theme-toggle { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--heading); font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; }
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.theme-toggle .bx-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .bx-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .bx-moon { display: none; }

/* Hero */
.hero { background: var(--soft); padding-block: 64px 96px; }
.hero .container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero p.lead { font-size: 1.15rem; max-width: 30em; margin-top: 22px; }
.hero .btn { margin-top: 32px; min-width: 300px; }
.hero .note { margin-top: 20px; font-weight: 600; color: var(--strong); }

/* Device mockups: Telegram's light chat here, its dark chat in the dark theme block below.
   The devices are stacked in one grid cell and only the .active one shows; animate.js rotates them. */
.devices { display: grid; place-items: center; }
.devices > .device { grid-area: 1 / 1; opacity: 0; transform: translateX(48px) scale(0.92); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; }
.devices > .device.out { transform: translateX(-48px) scale(0.92); }
.devices > .device.active { opacity: 1; transform: none; pointer-events: auto; }
.phone, .tablet, .laptop .lid { background: var(--phone-frame); box-shadow: 0 30px 60px -20px rgba(99, 102, 241, 0.45); }
.phone { width: min(340px, 100%); border-radius: 40px; padding: 11px; }
.tablet { width: min(520px, 100%); aspect-ratio: 4 / 3; min-height: 0; border-radius: 30px; padding: 14px; display: flex; }
.laptop { width: min(520px, 100%); }
.laptop .lid { width: 92%; margin-inline: auto; aspect-ratio: 7 / 5; min-height: 0; border-radius: 16px 16px 0 0; padding: 10px 10px 12px; display: flex; }
.laptop .base { position: relative; height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(#c9cedb, #9aa1b5); }
.laptop .base::before { content: ""; position: absolute; left: 42%; top: 0; width: 16%; height: 5px; border-radius: 0 0 6px 6px; background: #8a91a6; }
.laptop .titlebar { background: #fff; display: flex; gap: 6px; padding: 7px 10px 3px; }
.laptop .titlebar span { width: 9px; height: 9px; border-radius: 50%; background: #f26b5e; }
.laptop .titlebar span:nth-child(2) { background: #f5bd4f; }
.laptop .titlebar span:nth-child(3) { background: #5fc454; }
.device .screen { background: #dfe7f1; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.device .status { background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 4px; font-size: 0.7rem; color: #555; }
.device .status .notch { width: 110px; height: 16px; background: var(--phone-frame); border-radius: 10px; }
.device .chat-head { background: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid #e2e5f1; }
.device .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.device .chat-head strong { display: block; color: #0b0f19; font-size: 0.8rem; line-height: 1.2; }
.device .chat-head small { font-size: 0.65rem; color: #8a8ea6; }
/* On the tablet and laptop the chat is shorter than its messages, so it clips and animate.js scrolls it. */
.device .chat { padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tablet .screen, .laptop .screen { flex: 1; min-height: 0; }
.tablet .screen { border-radius: 18px; }
.laptop .screen { border-radius: 6px; }
.bubble { border-radius: 12px; font-size: 0.8rem; max-width: 88%; flex: none; }
/* The landscape tablet shows Telegram's two-pane view: the chat list beside the open chat. */
.tablet .panes { flex: 1; min-height: 0; display: flex; }
.tablet .side { width: 27%; flex: none; background: #fff; border-right: 1px solid #e2e5f1; padding: 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; }
.tablet .side div { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; font-size: 0.62rem; font-weight: 600; color: #555; }
.tablet .side div.on { background: #3b82f6; color: #fff; }
.tablet .side span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tablet .side img, .tablet .side i { width: 22px; height: 22px; flex: none; border-radius: 50%; }
.tablet .side i { background: #dfe7f1; color: #6b7390; display: grid; place-items: center; font-size: 0.8rem; }
.tablet .pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:root[data-theme="dark"] .tablet .side { background: #17212b; border-right-color: #0b1118; }
:root[data-theme="dark"] .tablet .side div { color: #aebacb; }
:root[data-theme="dark"] .tablet .side div.on { background: #2b5278; color: #fff; }
:root[data-theme="dark"] .tablet .side i { background: #0e1621; color: #7f91a4; }
/* The tablet's and the laptop's chats are short, so their charts are sized from the chat's height
   (100cqh is the chat inside its padding; 12px is the bubble's own padding). On the laptop a chart fills the chat
   and its request scrolls away; on the tablet 43px more is left so the request stays visible above its chart.
   Browsers without container units fall back to the max-width. The laptop's chrome is also more compact. */
.laptop .chat-head { padding: 4px 12px 6px; }
.laptop .avatar { width: 24px; height: 24px; }
.laptop .input { margin-bottom: 8px; }
.tablet .chat { padding-block: 10px; container-type: size; }
.laptop .chat { padding-block: 8px; container-type: size; }
.tablet .bubble, .laptop .bubble { max-width: 62%; }
@supports (height: 1cqh) {
  .tablet .bubble.bot, .laptop .bubble.bot { max-width: none; }
  .tablet .bubble.bot img, .laptop .bubble.bot img { height: calc(100cqh - 12px); width: auto; }
  .tablet .bubble.bot img { height: calc(100cqh - 55px); }
}
.bubble.me { align-self: flex-end; background: #3b82f6; color: #fff; padding: 6px 12px; font-weight: 600; }
.bubble.bot { align-self: flex-start; background: #fff; padding: 6px; box-shadow: 0 2px 6px rgba(11, 15, 25, 0.08); }
.bubble.bot img { border-radius: 8px; }
.device .input { background: #fff; margin: 0 10px 12px; border: 1px solid #e2e5f1; border-radius: 10px; padding: 8px 12px; font-size: 0.75rem; color: #9a9db3; display: flex; justify-content: space-between; align-items: center; }

:root[data-theme="dark"] .phone, :root[data-theme="dark"] .tablet, :root[data-theme="dark"] .laptop .lid { box-shadow: 0 0 0 1.5px #3d4567, 0 30px 60px -20px rgba(99, 102, 241, 0.45); }
:root[data-theme="dark"] .laptop .base { background: linear-gradient(#3a415c, #23283b); }
:root[data-theme="dark"] .laptop .base::before { background: #1a1e2d; }
:root[data-theme="dark"] .laptop .titlebar { background: #17212b; }
:root[data-theme="dark"] .device .screen { background: #0e1621; }
:root[data-theme="dark"] .device .status, :root[data-theme="dark"] .device .chat-head { background: #17212b; color: #aebacb; }
:root[data-theme="dark"] .device .chat-head { border-bottom-color: #0b1118; }
:root[data-theme="dark"] .device .chat-head strong { color: #fff; }
:root[data-theme="dark"] .device .chat-head small { color: #7f91a4; }
:root[data-theme="dark"] .bubble.me { background: #2b5278; }
:root[data-theme="dark"] .bubble.bot { background: #182533; box-shadow: none; }
:root[data-theme="dark"] .device .input { background: #17212b; border-color: #0b1118; color: #7f91a4; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; text-align: center; position: relative; }
.steps::before { content: ""; position: absolute; top: 60px; left: 16.6%; right: 16.6%; height: 1px; background: var(--line); }
.ring { width: 120px; height: 120px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; margin-inline: auto; position: relative; }
.ring span { width: 88px; height: 88px; border-radius: 50%; background: var(--surface); box-shadow: 0 6px 18px rgba(99, 102, 241, 0.15); display: grid; place-items: center; color: var(--primary); font-size: 2.2rem; }
.steps h3 { margin-top: 26px; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 10px; }
.steps .num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 0.95rem; font-weight: 600; display: grid; place-items: center; }
.steps p { margin-top: 10px; font-size: 0.95rem; }

/* Persona cards */
.personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.persona .art { height: 220px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 7rem; }
.persona h3 { margin-top: 22px; font-size: 1.8rem; font-weight: 800; }
.persona p { margin-top: 12px; }
.c-red { background: #ef4444; }
.c-indigo { background: #6366f1; }
.c-amber { background: #ffb400; }
.c-violet { background: #6800ff; }

/* Feature rows */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 64px; }
.feature .shot { border-radius: 10px; overflow: hidden; border: 3px solid #ef4f5e; box-shadow: 0 16px 36px -12px rgba(11, 15, 25, 0.35); }
.feature .icon { width: 88px; height: 88px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px var(--shadow); display: grid; place-items: center; font-size: 2.6rem; margin-inline: auto; }
.feature h3 { font-size: 1.7rem; font-weight: 800; }
.feature .cmd { margin-top: 12px; }
.feature p { margin-top: 16px; max-width: 30em; }
.feature.flip .shot { order: 3; }
.feature.flip .icon { order: 2; }
.feature.flip .body { order: 1; }
.icon-green { color: #22c55e; }
.icon-violet { color: var(--violet); }
.icon-amber { color: #f59e0b; }
.icon-blue { color: var(--telegram); }

.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.more .card .thumb { border-radius: 8px; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--line); }
.more .card .thumb.tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.more .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.more .card i { font-size: 2rem; color: var(--primary); }
.more .card h3 { font-size: 1.15rem; margin-top: 10px; }
.more .card .cmd { margin-top: 8px; }
.more .card p { margin-top: 12px; font-size: 0.95rem; }
.subhead { text-align: center; font-size: 1.5rem; font-weight: 800; margin-top: 88px; }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 32px; }
.others figure { margin: 0; }
.others img { border-radius: 8px; border: 1px solid var(--line); }
.others figcaption { margin-top: 10px; font-size: 0.92rem; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 1px 10px; border: 1px solid var(--outline); color: var(--primary); background: var(--primary-soft); vertical-align: middle; margin-left: 6px; }

/* Benefits */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; text-align: center; }
.benefits .disc { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 3.6rem; margin-inline: auto; }
.benefits h3 { margin-top: 22px; }
.benefits p { margin-top: 14px; font-size: 1.05rem; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.plan { border: 1px solid var(--plan-line); border-radius: 16px; padding: 44px 40px; display: flex; flex-direction: column; background: var(--surface); }
.plan.lite { background: var(--plan-lite); }
.plan.premium { background: var(--plan-premium); }
.pill { align-self: flex-start; font-size: 0.78rem; font-weight: 600; color: var(--heading); border-radius: 999px; padding: 1px 10px; background: var(--pill-bg); border: 1px solid var(--pill-line); }
.plan.lite .pill { background: var(--pill-lite-bg); border-color: var(--pill-lite-line); }
.plan.premium .pill { background: var(--pill-premium-bg); border-color: var(--pill-premium-line); }
.plan h3 { margin-top: 8px; font-size: 1.5rem; }
.plan .price { margin-top: 6px; font-weight: 700; font-size: 1.15rem; color: var(--heading); }
.plan .price small { display: block; font-weight: 500; font-size: 0.9rem; color: var(--text); }
.plan ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 14px; flex: 1; align-content: start; }
.plan li { display: flex; gap: 10px; font-size: 1.05rem; }
.plan li i { color: var(--telegram); font-size: 1.4rem; flex: none; }
.plan.premium li i { color: var(--primary); }
.plan .btn { font-size: 1rem; padding: 14px 20px; }
.group-note { text-align: center; margin-top: 32px; font-size: 1.05rem; }

/* Subscribe */
.flow { max-width: 820px; margin: 44px auto 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: s; }
.flow li { counter-increment: s; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px 16px 64px; position: relative; }
.flow li::before { content: counter(s); position: absolute; left: 20px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; display: grid; place-items: center; }

/* Accordion */
.accordion { max-width: 950px; margin: 44px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; color: var(--heading); font-weight: 700; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--heading); display: grid; place-items: center; font-size: 1.2rem; }
.accordion details[open] summary i { background: #6366f1; color: #fff; transform: rotate(180deg); }
.accordion .answer { padding: 0 24px 22px; }
/* Smooth open and close. Browsers without ::details-content simply open and close instantly. */
:root { interpolate-size: allow-keywords; }
.accordion details::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
.accordion details[open]::details-content { height: auto; }
.accordion summary i { transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
.accordion .answer ul, .accordion .answer ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }

.disclaimer { max-width: 950px; margin: 44px auto 0; text-align: center; font-size: 0.95rem; }
.disclaimer p + p { margin-top: 10px; }

/* Terms and privacy pages */
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); }
.legal h2 { font-size: 1.35rem; text-align: left; margin-top: 40px; }
.legal p, .legal ul { margin-top: 12px; }
/* Points are numbered 2.1, 2.2, ... from the section they sit in: each paragraph and each <ul> item under an h2 is one point.
   An <ol> holds the lettered sub-points of the paragraph above it. Every h2 counts as a section, so keep the number written in its text in step. */
.legal .container { counter-reset: section; }
.legal h2 { counter-increment: section; counter-reset: point; }
.legal ul { list-style: none; padding-left: 0; display: grid; gap: 12px; }
.legal h2 ~ p, .legal ul > li { position: relative; padding-left: 3em; counter-increment: point; }
.legal h2 ~ p::before, .legal ul > li::before { content: counter(section) "." counter(point); position: absolute; left: 0; color: var(--strong); font-weight: 600; }
.legal ol { list-style: lower-alpha; margin: 8px 0 0; padding-left: 4.4em; display: grid; gap: 6px; }
.legal .updated { font-size: 0.9rem; }
/* Features page */
nav.main a.active { color: var(--primary); }
.features-page { padding-block: 72px 96px; }
.features-page h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); }
.page-lead { font-size: 1.1rem; margin-top: 14px; }
.filters { display: flex; gap: 16px; flex-wrap: wrap; background: var(--surface); border-radius: 8px; padding: 24px; margin-top: 28px; box-shadow: 0 4px 16px var(--shadow); }
.field { display: grid; gap: 8px; min-width: 240px; font-weight: 700; font-size: 0.9rem; color: var(--heading); }
.field.grow { flex: 1; }
.search { position: relative; display: block; }
.search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--text); }
.field input, .field select { width: 100%; font: inherit; font-weight: 500; color: var(--heading); background: var(--surface); border: 1px solid var(--outline); border-radius: 6px; padding: 13px 16px; }
.field input { padding-left: 46px; }
.field input:focus, .field select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.cmd-section { padding-block: 48px 0; }
.cmd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cmd-head h2 { text-align: left; font-size: 1.75rem; }
.cmd-head .count { font-weight: 700; font-size: 0.85rem; color: var(--heading); }
.cmd-note { margin-top: 6px; }
.cmd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.cmd-card { background: var(--surface); border-radius: 8px; padding: 24px; box-shadow: 0 4px 16px var(--shadow); display: flex; flex-direction: column; align-items: flex-start; }
.cmd-pill { background: #6366f1; color: #fff; font-weight: 700; font-size: 0.9rem; border-radius: 999px; padding: 3px 16px; overflow-wrap: anywhere; }
.cmd-card h3 { font-size: 1.25rem; margin-top: 16px; }
.cmd-card p { font-size: 0.92rem; margin-top: 8px; flex: 1; }
.access { margin-top: 16px; font-size: 0.8rem; font-weight: 700; border-radius: 4px; padding: 2px 10px; border: 1px solid var(--pill-line); background: var(--pill-bg); color: var(--heading); }
.access.lite { background: var(--pill-lite-bg); border-color: var(--pill-lite-line); }
.access.premium { background: var(--pill-premium-bg); border-color: var(--pill-premium-line); }
.no-result { text-align: center; margin-top: 56px; font-size: 1.1rem; }
[hidden] { display: none !important; }
@media (max-width: 1100px) { .cmd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cmd-grid { grid-template-columns: minmax(0, 1fr); } .field { min-width: 100%; } }

/* Pricing page */
.pricing-hero { padding-block: 72px 96px; text-align: center; }
.pricing-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.periods { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: var(--surface); border-radius: 999px; padding: 6px; margin-top: 44px; box-shadow: 0 4px 16px var(--shadow); }
.period { font: inherit; font-weight: 700; font-size: 0.9rem; color: var(--text); background: transparent; border: 0; border-radius: 999px; padding: 10px 26px; cursor: pointer; }
.period:hover { color: var(--heading); }
.period.active { color: #fff; background: linear-gradient(90deg, #5b6ef5, #22a6c9); }
.periods { position: relative; }
.period { position: relative; z-index: 1; transition: color 0.25s ease; }
.period-slider { position: absolute; left: 0; top: 0; border-radius: 999px; background: linear-gradient(90deg, #5b6ef5, #22a6c9); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.periods.has-slider .period.active { background: none; }
.period-hint { margin-top: 14px; font-size: 0.85rem; }
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: stretch; }
.price-card { --plan: #f43f6e; background: var(--surface); border-radius: 8px; box-shadow: 0 4px 16px var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.price-card.lite { --plan: #10b981; }
.price-card.premium { --plan: #5b6ef5; }
.price-card .top { position: relative; padding: 56px 24px 20px; display: grid; justify-items: center; gap: 14px; }
.price-card .plan-icon { font-size: 2.6rem; line-height: 1; color: var(--plan); }
.price-card h2 { font-size: 1.3rem; font-weight: 500; }
.price-card .btn { background: var(--plan); color: #fff; min-width: 190px; padding: 12px 24px; }
.price-card .btn:hover { filter: brightness(1.08); }
.save { font-size: 0.75rem; font-weight: 700; color: #0c8f5f; background: #d6f5e8; border: 1px solid #9fe3c6; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.price-card .save { position: absolute; top: 12px; left: 12px; }
.popular { position: absolute; top: 12px; right: 12px; font-size: 0.8rem; font-weight: 600; color: var(--primary); background: var(--primary-soft); border-radius: 4px; padding: 1px 8px; }
.amount { background: var(--soft); padding: 20px 16px; display: grid; gap: 2px; }
.amount .num { color: var(--heading); font-size: 3rem; line-height: 1.15; }
.amount .num b { font-weight: 800; }
.amount .num small { font-size: 1.3rem; font-weight: 700; vertical-align: 0.55em; margin-right: 4px; }
.amount .per { font-size: 0.9rem; }
.includes { padding: 32px 24px 36px; flex: 1; }
.includes h3 { font-size: 1.15rem; color: var(--strong); }
.includes ul { list-style: none; margin: 14px 0 0; padding: 0; display: inline-grid; gap: 10px; text-align: left; color: var(--strong); }
.includes li { display: flex; gap: 6px; }
.includes li i { color: #16a34a; font-size: 1.3rem; flex: none; }
.includes .fine { margin-top: 18px; font-size: 0.8rem; }
.t-free { color: #f43f6e; }
.t-lite { color: #10b981; }
.notice { display: inline-flex; gap: 14px; text-align: left; max-width: 620px; margin-top: 40px; padding: 18px 22px; border: 1px solid var(--outline); border-radius: 8px; background: var(--primary-soft); color: var(--primary); }
.notice i { font-size: 1.5rem; flex: none; }
.notice strong { color: inherit; }
.table-wrap { max-width: 1000px; margin: 44px auto 0; overflow-x: auto; border-radius: 8px; box-shadow: 0 4px 16px var(--shadow); }
.compare { width: 100%; border-collapse: collapse; background: var(--surface); }
.compare th, .compare td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.compare tbody th { text-align: left; font-weight: 500; color: var(--strong); }
.compare thead th { font-size: 1.5rem; font-weight: 700; vertical-align: bottom; border-bottom: 3px solid var(--line); }
.compare thead th:first-child { font-size: 1.8rem; font-weight: 800; color: var(--heading); text-align: left; }
.compare thead small { display: block; font-size: 0.82rem; font-weight: 600; color: var(--strong); }
.compare .h-free { color: #f43f6e; border-bottom-color: #f43f6e; }
.compare .h-lite { color: #10b981; border-bottom-color: #10b981; }
.compare .h-premium { color: #5b6ef5; border-bottom-color: #5b6ef5; }
.compare td { border-left: 1px solid var(--line); font-weight: 600; color: var(--strong); min-width: 150px; }
.compare .group th { background: #23252d; color: #fff; font-weight: 800; font-size: 1.1rem; text-align: left; }
.compare .yes { color: #22a80c; font-size: 1.6rem; }
.compare .no { color: #f0142f; font-size: 1.6rem; }
@media (max-width: 900px) { .price-cards { grid-template-columns: minmax(0, 1fr); } .period { padding: 9px 16px; } }

/* About page */
.trust { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-weight: 600; color: var(--strong); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust i { font-size: 1.4rem; color: var(--primary); }
.about-logo { width: min(300px, 70%); margin-inline: auto; }
.ring b { font-size: 1.25rem; }
@media (min-width: 901px) {
  .steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps.four::before { left: 12.5%; right: 12.5%; }
}

/* Chart image preview */
img[src*="img/chart-"], .thumb img { cursor: zoom-in; }
dialog.lightbox { border: 0; padding: 0; outline: none; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(5, 7, 12, 0.88); }
dialog.lightbox img { display: block; width: auto; height: auto; max-width: 96vw; max-height: 92vh; border-radius: 8px; cursor: zoom-out; }

/* Back-to-top button */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 15; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.8rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary-hover); transform: translateY(-3px); }
:root[data-theme="dark"] .to-top { background: var(--surface); color: var(--heading); border: 1px solid var(--outline); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .to-top:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }

/* Motion */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
.devices { animation: float 6s ease-in-out infinite; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
.btn i { transition: transform 0.2s ease; }
.btn:hover i { transform: translateX(4px); }
.plan, .more .card, .cmd-card, .persona .art, .feature .shot, .others img { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.plan:hover, .more .card:hover, .cmd-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px var(--shadow); }
.persona:hover .art, .feature .shot:hover, .others img:hover { transform: scale(1.02); }
.ring span, .feature .icon, .benefits .disc { transition: transform 0.3s ease; }
.steps > div:hover .ring span, .feature:hover .icon, .benefits > div:hover .disc { transform: scale(1.08); }
.price-card:hover .plan-icon { animation: bounce 0.7s ease; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px); } 55% { transform: translateY(0); } 75% { transform: translateY(-6px); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
.device .chat { position: relative; }
.chat.playing .bubble:not(.typing) { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s ease; }
.chat.playing .bubble.shown { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.bubble.typing { position: absolute; display: flex; gap: 4px; padding: 10px 12px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.bubble.typing.shown { opacity: 1; }
.bubble.typing span { width: 6px; height: 6px; border-radius: 50%; background: #8f99ad; animation: typing 1s ease-in-out infinite; }
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
.device .input.active span { color: #0b0f19; }
:root[data-theme="dark"] .device .input.active span { color: #fff; }
.device .input.active span::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: currentColor; animation: caret 0.8s steps(1) infinite; }
.device .input.active i { color: #3b82f6; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* CTA + footer: dark in both themes */
.cta { background: var(--cta); text-align: center; color: rgba(255, 255, 255, 0.75); }
.cta .pre { font-size: 1.4rem; }
.cta h2 { color: #fff; margin-top: 12px; }
.cta p.sub { max-width: 620px; margin: 22px auto 0; font-size: 1.1rem; }
.cta .small { margin-top: 20px; font-size: 0.9rem; }
.cta .btn-row { margin-top: 28px; }

footer.site { background: var(--footer); color: rgba(255, 255, 255, 0.7); padding-block: 72px 40px; }
footer.site .cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
footer.site .brand { color: #fff; }
footer.site p { margin-top: 18px; max-width: 26em; }
footer.site h4 { color: #fff; font-size: 1.2rem; font-weight: 800; margin: 0 0 20px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer.site a { color: rgba(255, 255, 255, 0.8); text-decoration: none; overflow-wrap: anywhere; }
footer.site a:hover { color: #fff; }
footer.site .copy { margin-top: 56px; font-size: 0.9rem; }

@media (max-width: 1160px) {
  header.site .container { gap: 14px; }
  nav.main { gap: 16px; }
  .brand { font-size: 1.15rem; margin-right: 6px; }
}
@media (min-width: 901px) and (max-width: 1020px) { header.site .social { display: none; } }
@media (max-width: 900px) {
  section { padding-block: 60px; }
  nav.main { display: none; }
  header.site .container { justify-content: space-between; flex-wrap: nowrap; gap: 12px; }
  .brand { font-size: 1.05rem; margin-right: auto; }
  header.site .btn { display: none; }
  .hero .container, .personas, .steps, .benefits, .plans, .more { grid-template-columns: minmax(0, 1fr); }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .btn { min-width: 0; width: 100%; }
  .tablet, .laptop { display: none; }
  .steps::before { display: none; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feature .icon { display: none; }
  .feature.flip .shot { order: 0; }
  .plan { padding: 32px 24px; }
  footer.site .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }