:root {
  color-scheme: dark;
  --ink: #f7f8ff;
  --muted: #a6afc5;
  --muted-2: #7d879e;
  --night: #070a12;
  --night-2: #0d1220;
  --panel: #121827;
  --panel-2: #171f32;
  --line: rgba(255,255,255,.11);
  --blue: #4d84ff;
  --blue-bright: #77a1ff;
  --amber: #ffc73a;
  --green: #35d49b;
  --danger: #ff747d;
  --max: 1180px;
  --shadow: 0 28px 90px rgba(0,0,0,.44);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font-size: 17px; line-height: 1.65; }
body::before { content: ""; position: fixed; z-index: -2; inset: 0; background: radial-gradient(circle at 82% 4%, rgba(77,132,255,.19), transparent 30%), radial-gradient(circle at 16% 38%, rgba(255,199,58,.08), transparent 25%), var(--night); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 13px; border-radius: 8px; background: #fff; color: #111; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid transparent; background: rgba(7,10,18,.78); backdrop-filter: blur(22px); }
.site-header.scrolled { border-color: var(--line); }
.nav { min-height: 74px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; text-decoration: none; letter-spacing: -.03em; }
.brand img { width: 38px; height: 38px; border-radius: 11px; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta, .button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 35px rgba(77,132,255,.22); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover, .nav-cta:hover { background: var(--blue-bright); transform: translateY(-2px); }
.button.secondary { border-color: var(--line); background: rgba(255,255,255,.04); box-shadow: none; }
.button.secondary:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.button.amber { background: var(--amber); color: #17120a; box-shadow: 0 12px 35px rgba(255,199,58,.18); }
.nav-toggle { display: none; margin-left: auto; border: 0; background: transparent; color: var(--ink); font-size: 26px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-bright); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 25px; height: 2px; background: currentColor; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.045em; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h1 { max-width: 960px; font-size: clamp(54px, 8vw, 104px); }
h2 { font-size: clamp(39px, 5vw, 65px); }
h3 { font-size: 21px; letter-spacing: -.025em; }
.accent { color: var(--amber); font-style: italic; }
.hero { padding: 106px 0 54px; text-align: center; overflow: hidden; }
.hero .eyebrow { justify-content: center; }
.hero .eyebrow::before { content: none; }
.hero h1 { margin: 20px auto 0; }
.hero-copy { max-width: 740px; margin: 26px auto 0; color: var(--muted); font-size: clamp(18px, 2.1vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 15px; color: var(--muted-2); font-size: 12px; }
.product-stage { position: relative; margin-top: 68px; padding: 1px; border-radius: 24px; background: linear-gradient(140deg, rgba(255,255,255,.28), rgba(77,132,255,.24), rgba(255,199,58,.13)); box-shadow: var(--shadow); transform: perspective(1600px) rotateX(2deg); }
.product-stage::before { content: ""; position: absolute; z-index: -1; inset: -70px 8% 0; background: var(--blue); filter: blur(100px); opacity: .13; }
.product-window { min-height: 590px; overflow: hidden; border-radius: 23px; background: #f8faff; color: #182139; text-align: left; }
.window-bar { height: 46px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid #dde3ef; background: #fff; font-size: 12px; font-weight: 750; }
.traffic { display: flex; gap: 7px; }
.traffic i { width: 11px; height: 11px; border-radius: 50%; background: #ff6259; }
.traffic i:nth-child(2) { background: #ffc139; }.traffic i:nth-child(3) { background: #28c940; }
.window-title { text-align: center; color: #68728a; }
.window-tools { justify-self: end; display: flex; gap: 8px; color: #7b8499; }
.window-body { min-height: 544px; display: grid; grid-template-columns: 250px 1fr; }
.mock-sidebar { padding: 18px 15px; border-right: 1px solid #e1e6f0; background: #f3f6fb; }
.profile-chip { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.profile-chip b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg,#1765ff,#7457e8); color:#fff; font-size:11px; }
.profile-chip span { display:flex; flex-direction:column; font-size:12px; font-weight:800; }.profile-chip small { color:#7a8499; font-size:9px; }
.mock-group { margin-top: 18px; color: #727d93; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.mock-service { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 9px; border-radius: 10px; font-size: 11px; font-weight: 750; }
.mock-service.active { background: #e6eeff; color: #145ee9; }
.service-symbol { width: 29px; height: 29px; display: grid; place-items:center; border:1px solid #cfd9ee; border-radius:9px; background:#fff; font-size:15px; }
.mock-service span:nth-child(2) { display:flex; flex:1; flex-direction:column; }.mock-service small { color:#7a8499; font-size:8px; font-weight:550; }
.unread-dot { min-width: 20px; height: 20px; display:grid; place-items:center; border-radius:10px; background:#1464ff; color:#fff; font-size:8px; }
.mock-main { display: grid; grid-template-rows: 58px 1fr; background:#edf2f9; }
.mock-service-bar { display:flex; align-items:center; justify-content:space-between; padding:0 19px; border-bottom:1px solid #dce3ef; background:#fff; }
.mock-service-bar strong { display:flex; align-items:center; gap:9px; font-size:13px; }.mock-service-bar span { color:#8a94a8; font-size:11px; }
.mock-content { display:grid; grid-template-columns:minmax(260px,37%) 1fr; margin:12px; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 9px 28px rgba(50,70,110,.08); }
.mock-list { border-right:1px solid #e4e8f0; }.mock-list h4 { margin:0; padding:18px 20px 11px; font-size:22px; }.mock-search { margin:0 14px 9px; padding:10px 12px; border-radius:9px; background:#f2f4f8; color:#8992a5; font-size:10px; }
.mock-chat { display:flex; gap:10px; padding:13px 14px; border-top:1px solid #edf0f5; }.mock-chat.active { background:#eff4ff; }.mock-avatar { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#d8e5ff; color:#3268d0; font-size:11px; font-weight:850; }.mock-chat div { min-width:0; display:flex; flex-direction:column; font-size:10px; }.mock-chat strong { font-size:11px; }.mock-chat small { overflow:hidden; color:#8a94a8; text-overflow:ellipsis; white-space:nowrap; }
.mock-conversation { display:flex; flex-direction:column; padding:23px; background:linear-gradient(160deg,#fbfcff,#f1f6ff); }.mock-conversation h4 { margin:0 0 24px; font-size:17px; }.bubble { max-width:76%; margin:5px 0; padding:11px 14px; border-radius:14px; background:#e9edf5; font-size:10px; }.bubble.mine { align-self:flex-end; background:#1764f5; color:#fff; }.composer { height:43px; margin-top:auto; border:1px solid #dce2ee; border-radius:22px; background:#fff; }
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:54px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line); }
.trust-item { padding:23px 20px; background:var(--night-2); }.trust-item strong { display:block; font-size:15px; }.trust-item span { color:var(--muted); font-size:12px; }
section { padding: 105px 0; }
section[id] { scroll-margin-top: 82px; }
.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,450px); align-items:end; gap:60px; margin-bottom:48px; }.section-head p { margin:0; color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.feature-card { min-height:245px; padding:27px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); }.feature-number { color:var(--amber); font-family:Georgia,serif; font-size:35px; }.feature-card h3 { margin-top:36px; }.feature-card p { margin:12px 0 0; color:var(--muted); font-size:14px; }
.privacy-panel { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:54px; border:1px solid var(--line); border-radius:25px; background:linear-gradient(140deg,rgba(77,132,255,.1),rgba(255,255,255,.025)); }.privacy-panel p { color:var(--muted); }.check-list { display:grid; gap:14px; margin:0; padding:0; list-style:none; }.check-list li { display:flex; gap:11px; }.check-list li::before { content:"✓"; width:24px; height:24px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:rgba(53,212,155,.12); color:var(--green); font-weight:900; }
.comparison-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.comparison-card { display:flex; flex-direction:column; min-height:220px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--night-2); text-decoration:none; transition:transform .18s,border-color .18s; }.comparison-card:hover { transform:translateY(-4px); border-color:rgba(119,161,255,.5); }.comparison-card span { color:var(--blue-bright); font-size:11px; font-weight:800; text-transform:uppercase; }.comparison-card h3 { margin-top:20px; }.comparison-card p { color:var(--muted); font-size:13px; }.comparison-card b { margin-top:auto; color:var(--amber); font-size:12px; }
.comparison-hero { padding-bottom: 36px; }
.winner-banner { position:relative; margin-top:42px; padding:35px 36px; overflow:hidden; border:1px solid rgba(255,199,58,.42); border-radius:22px; background:linear-gradient(135deg,rgba(255,199,58,.13),rgba(77,132,255,.11)); }
.winner-banner::after { content:"✓"; position:absolute; right:30px; top:9px; color:rgba(255,199,58,.1); font-size:150px; font-weight:900; line-height:1; }
.winner-banner > * { position:relative; z-index:1; }
.winner-banner > span { color:var(--amber); font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.winner-banner h2 { max-width:760px; margin-top:8px; font-family:inherit; font-size:clamp(30px,4vw,48px); font-weight:850; }
.winner-banner p { max-width:830px; margin:13px 0 24px; color:var(--ink); font-size:17px; }
.advantage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.advantage-card { min-height:255px; padding:26px; border:1px solid rgba(119,161,255,.3); border-radius:18px; background:linear-gradient(155deg,rgba(77,132,255,.12),rgba(255,255,255,.025)); }
.advantage-card > span { color:var(--amber); font-family:Georgia,serif; font-size:34px; }
.advantage-card h3 { margin-top:30px; }
.advantage-card p { margin:12px 0 0; color:var(--muted); font-size:14px; }
.comparison-copy { margin-top:58px; }
.download-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; padding:52px; border-radius:26px; background:var(--ink); color:#111725; }.download-panel h2 { max-width:720px; }.download-panel p { margin:15px 0 0; color:#596177; }.download-actions { display:flex; flex-direction:column; gap:10px; }.download-actions .secondary { border-color:#cfd5e1; color:#263047; background:#fff; }
.faq { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; }.faq-list { border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); }.faq summary { padding:21px 5px; cursor:pointer; font-weight:750; list-style:none; }.faq summary::after { content:"+"; float:right; color:var(--blue-bright); font-size:23px; }.faq details[open] summary::after { content:"–"; }.faq details p { margin:0; padding:0 40px 22px 5px; color:var(--muted); font-size:14px; }
.site-footer { padding:44px 0 55px; border-top:1px solid var(--line); }.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:35px; }.footer-brand p { max-width:340px; color:var(--muted); font-size:13px; }.footer-column { display:flex; flex-direction:column; gap:9px; }.footer-column strong { margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }.footer-column a { color:var(--muted); font-size:13px; text-decoration:none; }.footer-column a:hover { color:var(--ink); }.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:42px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted-2); font-size:11px; }
.page-hero { padding:95px 0 65px; }.page-hero h1 { margin-top:18px; font-size:clamp(48px,7vw,82px); }.page-hero p { max-width:750px; margin:22px 0 0; color:var(--muted); font-size:19px; }.breadcrumbs { color:var(--muted-2); font-size:12px; }.breadcrumbs a { color:var(--blue-bright); text-decoration:none; }
.compare-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:42px; }.summary-card { padding:25px; border:1px solid var(--line); border-radius:17px; background:var(--night-2); }.summary-card.chattium { border-color:rgba(77,132,255,.45); background:linear-gradient(145deg,rgba(77,132,255,.12),var(--night-2)); }.summary-card h2 { font-family:inherit; font-size:23px; font-weight:800; }.summary-card p { color:var(--muted); font-size:14px; }
.comparison-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:18px; }.comparison-table { width:100%; border-collapse:collapse; min-width:720px; }.comparison-table th,.comparison-table td { padding:17px 19px; border-bottom:1px solid var(--line); text-align:left; }.comparison-table th { color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }.comparison-table th:nth-child(2) { color:var(--blue-bright); }.comparison-table tr:last-child td { border-bottom:0; }.comparison-table td:first-child { font-weight:750; }.yes { color:var(--green); }.depends { color:var(--amber); }
.prose { max-width:820px; }.prose h2 { margin:65px 0 18px; font-size:40px; }.prose h3 { margin:34px 0 12px; }.prose p,.prose li { color:var(--muted); }.prose a { color:var(--blue-bright); }.prose strong { color:var(--ink); }.prose .note { padding:18px 20px; border-left:3px solid var(--amber); background:var(--night-2); }
.compare-links { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.compare-links a { padding:18px; border:1px solid var(--line); border-radius:13px; background:var(--night-2); text-decoration:none; }.compare-links a:hover { border-color:rgba(77,132,255,.5); }.compare-links strong { display:block; }.compare-links span { color:var(--muted); font-size:12px; }

@media (max-width: 900px) {
  .nav-toggle { display:block; }.nav-links { position:absolute; top:74px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:18px 20px 24px; border-bottom:1px solid var(--line); background:rgba(7,10,18,.97); }.nav-links.open { display:flex; }.nav-cta { display:none; }
  .window-body { grid-template-columns:190px 1fr; }.mock-content { grid-template-columns:1fr; }.mock-list { display:none; }
  .trust-strip { grid-template-columns:repeat(2,1fr); }.section-head,.privacy-panel,.faq,.download-panel { grid-template-columns:1fr; }.feature-grid { grid-template-columns:repeat(2,1fr); }.comparison-grid,.advantage-grid { grid-template-columns:repeat(2,1fr); }.footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size:15px; }.container { width:min(calc(100% - 28px),var(--max)); }.hero { padding-top:72px; }.hero h1 { font-size:49px; }.product-stage { margin-top:45px; transform:none; }.product-window { min-height:500px; }.window-body { grid-template-columns:1fr; }.mock-sidebar { display:none; }.trust-strip,.feature-grid,.comparison-grid,.advantage-grid,.compare-summary,.compare-links,.footer-grid { grid-template-columns:1fr; }.privacy-panel,.download-panel,.winner-banner { padding:30px 24px; }.section-head { gap:20px; }.footer-bottom { flex-direction:column; }.page-hero { padding-top:70px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
