body {
  --paper: #fcfcfd;
  --pale: #eaf2ff;
  --accent: #0068d9;
  --ink: #16191e;
}
.context-hero[data-tone="dark"] {
  --muted:#b5bbc5; --line:#414650; --chip:#2b313a; --surface:#20252d; --ink-inverse:#111; color-scheme:dark;
  --paper: #0d0e10;
  --ink: #f5f6f8;
  --accent: #93bcff;
}
#mast { background: var(--paper); }
.top { height: 72px; }
.context-hero {
  --intro-gap: clamp(20px, 1.9vw, 28px);
  text-align: center;
  isolation: isolate;
  overflow: clip;
  position: relative;
  padding: 35px 0 38px;
  background: linear-gradient(180deg,#fcfcfd 0%,#fff 27%,#eef4fc 75%,#edf2f9);
  color: var(--ink);
}
 .context-hero[data-tone="dark"] {
  background: linear-gradient(180deg,#0d0e10 0%,#111318 33%,#192332 74%,#171e2a);
}
.intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--intro-gap);
}
.context-hero .modes {
  background: #e9ebef;
  padding: 4px;
}
.context-hero .modes button {
  padding: 6px 15px;
  min-height: 29px;
  font-size: 13px;
  gap: 7px;
}
 .context-hero[data-tone="dark"] .modes { background: #292c31; }
 .context-hero[data-tone="dark"] .modes button[aria-pressed=true] { background: #43484e; }
.intro h1 {
  display: block;
  margin: 21px auto 13px;
  font-weight: 640;
  letter-spacing: -.045em;
  font-size: clamp(48px,5.35vw,82px);
  line-height: .985;
}
.intro h1 span,.intro h1 em { display:block; }
.intro h1 em {
  color: var(--accent);
  font-style: normal;
}
.intro-text {
  max-width: 650px;
  margin: 0 auto;
  font-size: clamp(16px,1.3vw,19px);
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--muted);
  text-wrap: pretty;
}
.intro-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.hero-primary { color: white; background: #006ada; min-height: 45px; padding: 12px 22px; }
.hero-primary:hover { background: #0058ba; }
.context-hero[data-tone="dark"] .hero-primary { color: #131517; background: #f6f7fa; }
.context-hero[data-tone="dark"] .hero-primary:hover { background: #d8e7ff; }
.intro-actions small { font-size: 12px; color: var(--muted); }
.showcase-bed {
  width: min(1150px, calc(100% - 80px)); margin:0 auto; position:relative;
}
.showcase-bed::before {
  content:'';position:absolute;z-index:-1;inset:9% -4% 0;
  border-radius:40px;background:linear-gradient(112deg,#d8edff,#d6e8ff 50%,#dddcfa);
  transform:rotate(-1.5deg);
}
.context-hero[data-tone="dark"] .showcase-bed::before {background:linear-gradient(112deg,#243953,#385072 50%,#383b55);}
.showcase { position:relative;width:100%;margin:0; }
.showcase-shell {
  padding:0;overflow:hidden;border-radius:17px;
  background:#f5f7fb;box-shadow:0 14px 48px rgba(58,86,125,.19),0 0 0 1px rgba(68,96,123,.14);
}
.context-hero[data-tone="dark"] .showcase-shell {background:#262a32;box-shadow:0 18px 50px #0007,0 0 0 1px #525965;}
.showcase-bar {
  height:34px;padding:0 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--muted);
  font-weight:520;font-size:11px;
}
.showcase-bar>span { display:flex;gap:6px;align-items:center; }
.window-dots i {width:7px;height:7px;border-radius:50%;background:#c8cdd4}
.context-hero[data-tone="dark"] .window-dots i {background:#585e66;}
.showcase-bar button {justify-self:end;width:30px;height:28px;display:grid;place-items:center;border-radius:8px;}
.showcase-bar button:hover {background:var(--chip);}
.showcase-image {display:block;width:100%;padding:0;cursor:zoom-in;}
.showcase-image:focus-visible,.showcase-bar button:focus-visible {outline-offset:-4px;}
.workspace-shot {display:block;width:100%;height:auto;}
.steps {padding-top:64px;}
@media(max-width:900px){
  .context-hero {padding-top:28px;}
  .top{height:64px;}
  .showcase-bed {width:calc(100% - 58px);}
}
@media(max-width:700px){
  .context-hero {padding:24px 0 25px;}
  .top {height:59px;}
  .intro h1 {font-size:clamp(37px,7.8vw,54px);line-height:1.04;margin:16px auto 11px;}
  .intro-text {font-size:15px;max-width:43ch;line-height:1.46;}
  .intro-actions {gap:9px;flex-direction:column;}
  .intro-actions small {font-size:11px;}
  .hero-primary {white-space:nowrap;min-height:42px;font-size:14px;padding:10px 15px;}
  .showcase-bed {width:calc(100% - 36px);}
  .showcase-shell {border-radius:10px;}
  .showcase-bar {height:25px;padding-inline:8px;font-size:10px;}
  .showcase-bar button {height:23px;width:24px;}
  .window-dots i {width:5px;height:5px;}
  .showcase-bed::before {inset:13% -1.5% 0;border-radius:15px;}
  .steps {padding-top:35px;}
}
/* A common canvas keeps the six tools and both heading variants anchored to the same points. */
@media (min-width:881px) {
  .top {display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px}
  .top .wordmark {justify-self:start}
  .top .wide-nav {justify-self:center;margin:0;gap:30px}
  .top .top-actions {justify-self:end;white-space:nowrap}
}
.context-hero {padding-top:32px}
.hero-orbit {
  position:relative;
  display:grid;
  place-items:center;
  margin:0 auto;
  width:min(1200px,100%);
  min-height:clamp(122px,12.1vw,184px);
  padding-block:6px;
  isolation:isolate;
}
.orbit-lines,.orbit-tools {
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  pointer-events:none;
}
.orbit-lines {color:#7d9fc4}
.context-hero[data-tone=dark] .orbit-lines {color:#6485ae}
.orbit-tool {
  position:absolute;
  top:var(--y);
  left:var(--x);
  transform:translate(-50%,-50%);
  pointer-events:auto;
  z-index:1;
}
.source-tools .tool-0 {--x:7.33%;--y:14%;--angle:-8deg}
.source-tools .tool-1 {--x:4.58%;--y:49.82%;--angle:7deg;--delay:-2.5s}
.source-tools .tool-2 {--x:10.67%;--y:85.96%;--angle:-5deg;--delay:-4s}
.ai-tools .tool-0 {--x:92.67%;--y:14%;--angle:8deg;--delay:-3s}
.ai-tools .tool-1 {--x:95.42%;--y:49.82%;--angle:-6deg;--delay:-1s}
.ai-tools .tool-2 {--x:89.33%;--y:85.96%;--angle:5deg;--delay:-5s}
.orbit-tile {
  width:clamp(44px,4.8vw,66px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:26%;
  background:#fff;
  border:1px solid #dfe6ee;
  box-shadow:0 6px 14px #162d4a13,0 1px 2px #162d4a0d;
  transform:rotate(var(--angle));
  animation:tool-float 6s ease-in-out var(--delay,0s) infinite alternate;
}
.orbit-tile img {width:58%;height:58%;object-fit:contain;display:block}
.context-hero[data-tone=dark] .orbit-tile {border-color:#d8dce2;box-shadow:0 8px 20px #0006}
@keyframes tool-float {
  from {transform:translateY(-3px) rotate(var(--angle))}
  to {transform:translateY(3px) rotate(calc(var(--angle) + 3deg))}
}
.orbit-content {position:relative;z-index:2;width:max-content;max-width:82%;pointer-events:none}
.orbit-content h1 {
  margin:0;
  font-size:clamp(42px,5.1vw,77px);
  letter-spacing:-.044em;
  line-height:1.04;
  font-weight:640;
  text-wrap:nowrap;
}
.orbit-content h1 span,.orbit-content h1 em {display:block;white-space:nowrap}
.narrow-break {display:none}
.intro-messages {
  display:grid;
  width:min(100%,665px);
  margin:0 auto;
}
.intro-messages p {
  grid-area:1 / 1;
  align-self:center;
  width:100%;
  max-width:none;
  margin:0;
  color:var(--muted);
  font-size:clamp(16px,1.3vw,19px);
  letter-spacing:-.012em;
  line-height:1.45;
  text-wrap:pretty;
}
.intro-reserve {visibility:hidden;pointer-events:none;user-select:none}
.source-status {
  width:min(640px,calc(100% - 40px));
  margin:28px auto 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  text-wrap:balance;
}
body[data-page=pricing] #mast, body[data-page=pricing] #foot {
  --paper:#fff;--ink:#171a1d;--muted:#50565c;--line:#d9dddf;--surface:#fff;--accent:#005bd6;--chip:#edf1f3;--ink-inverse:#fff;
  background:#fff;color:var(--ink);color-scheme:light;
}
body[data-page=pricing] #mast .brand,body[data-page=pricing] #foot .brand {filter:none}
@media(max-width:880px){
  .context-hero {padding-top:24px}
  .hero-orbit {min-height:clamp(104px,14.5vw,128px)}
  .orbit-tile {width:42px}
  .orbit-content h1 {font-size:clamp(34px,5.6vw,49px)}
}
@media(max-width:620px){
  .context-hero {--intro-gap:18px;padding-top:21px}
  .hero-orbit {min-height:clamp(86px,21vw,116px);width:100vw;margin:0;flex-shrink:0}
  .orbit-tile {width:clamp(25px,7.6vw,39px)}
  .orbit-content h1 {font-size:clamp(24px,6.65vw,40px);line-height:1.035}
  .orbit-content h1:lang(ru) {font-size:clamp(23px,6.65vw,39px)}
  .orbit-content {max-width:84%}
  .hero-orbit:lang(ru) {min-height:clamp(103px,26.8vw,147px)}
  .narrow-break {display:inline}
  .intro-messages {width:min(100%,48ch)}
  .intro-messages p {font-size:15px}
  .source-status {font-size:12px;margin-top:16px}
}
@media(prefers-reduced-motion:reduce){
  .orbit-tile {animation:none}
}

.hero-preview {
  display: grid;
  grid-template-columns:minmax(0,1fr);
  justify-items: center;
  margin-top: var(--intro-gap);
  row-gap: clamp(10px, 1vw, 15px);
}
.hero-trust {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:13px;
  font-weight:550;
  line-height:1.3;
  text-align:center;
  justify-content:center;
  max-width:calc(100% - 36px);
  text-wrap:balance;
  min-height:30px;
}
.hero-trust span {min-width:0}
.hero-trust:hover {color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.hero-trust svg {flex:none}
.hero-pills {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 auto;
  padding:0;
}
.hero-pills button {
  display:inline-flex;align-items:center;gap:7px;
  min-height:35px;padding:7px 13px;
  background:#f4f7fc;color:#344663;
  border:1px solid #d3deec;border-radius:99px;
  font-size:13px;line-height:1.2;font-weight:540;
  transition:background-color .16s,color .16s,border-color .16s;
}
.hero-pills svg {color:#1469bc}
.hero-pills button:hover {background:#e5f0ff;color:#12355c;border-color:#a8c9ef}
.context-hero[data-tone=dark] .hero-pills button {background:#1a202b;color:#e1e7ee;border-color:#364050}
.context-hero[data-tone=dark] .hero-pills svg {color:#9fc6ff}
.context-hero[data-tone=dark] .hero-pills button:hover {background:#2c394d;border-color:#5d7595}
@media(max-width:600px){
  .hero-trust {font-size:12px;text-align:center;min-height:28px}
  .hero-trust span {max-width:32ch}
  .hero-pills {max-width:410px;gap:6px}
  .hero-pills button {min-height:35px;padding:6px 10px;font-size:12px}
}

@media(max-width:470px) {
  .hero-pills {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:max-content;max-width:100%}
  .hero-pills button {width:100%;height:100%;min-height:38px;justify-content:center;gap:5px;padding-inline:6px}
}