@font-face { font-family: "Manrope"; src: url("/assets/manrope-cyrillic.c268b459a9.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("/assets/manrope-latin.a30ddcd349.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --bg: #f7f6fd;
  --bg-2: #ffffff;
  --ink: #17152e;
  --ink-2: #5a5876;
  --line: #e2e0f0;
  --card: #ffffff;
  --chip: #eeecfa;
  --glass: rgba(255, 255, 255, .78);
  --edge: rgba(255, 255, 255, .9);
  --stripe: rgba(70, 60, 160, .05);
  --on-link: #ffffff;
  --scrim: rgba(247, 246, 253, .6);
  --err: #c4161f;
  --blue: #6236f0;
  --blue-hover: #5228dc;
  --btn-top: #6f47f5;
  --link: #5228dc;
  --soft: rgba(98, 54, 240, .08);
  --shadow: 0 24px 60px -32px rgba(60, 40, 160, .35);
  --glow: 0 16px 40px -20px rgba(98, 54, 240, .5);
  --il-line: #d6d3ea;
  --il-a: #ffffff;
  --il-b: #eeecf8;
  --il-c: #f4f2fd;
  --il-d: #e3e0f6;
  --il-edge: #cfcbe8;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --gutter: max(20px, calc((100vw - 1200px) / 2));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07061a;
  --bg-2: #0e0d24;
  --ink: #f3f2fb;
  --ink-2: #a9a7c4;
  --line: #242243;
  --card: #100f28;
  --chip: #1c1a3a;
  --glass: rgba(20, 18, 48, .72);
  --edge: rgba(255, 255, 255, .07);
  --stripe: rgba(255, 255, 255, .018);
  --on-link: #07061a;
  --scrim: rgba(4, 3, 16, .55);
  --err: #ff6b66;
  --blue: #7045ff;
  --blue-hover: #6035f0;
  --btn-top: #7c55ff;
  --link: #b3a6ff;
  --soft: rgba(140, 115, 255, .14);
  --shadow: 0 24px 70px -32px rgba(112, 69, 255, .45);
  --glow: 0 0 34px -8px rgba(125, 90, 255, .65);
  --il-line: #2c2a50;
  --il-a: #1d1b3c;
  --il-b: #0f0e27;
  --il-c: #2a2852;
  --il-d: #151433;
  --il-edge: #3a3766;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; background: var(--bg); }
html.locked { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.6 "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.015em; line-height: 1.22; text-wrap: balance; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--bg); border-radius: 8px; }
.skip:focus { top: 8px; }
.skip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* pictures follow the theme; a hidden lazy image is never downloaded */
.for-light { display: block; }
.for-dark { display: none; }
[data-theme="dark"] .for-light { display: none; }
[data-theme="dark"] .for-dark { display: block; }

/* links and buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1px solid transparent; border-radius: 12px; background-color: var(--blue); background-image: linear-gradient(180deg, var(--btn-top), var(--blue)); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s, transform .2s var(--ease); }
.btn:hover { background-color: var(--blue-hover); background-image: none; box-shadow: var(--glow); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-line { background-color: transparent; background-image: none; color: var(--link); border-color: var(--il-edge); }
.btn-line:hover { background-color: var(--link); color: var(--on-link); border-color: var(--link); }
.btn-sm { min-height: 34px; padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.more { color: var(--link); font-weight: 600; }
.more::after { content: " ›"; }
.more:hover { text-decoration: underline; }
.round { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--il-edge); border-radius: 50%; background: var(--chip); color: var(--ink); font-style: normal; font-size: 14px; font-weight: 600; }
.round svg { width: 20px; height: 20px; }

/* floating top bar */
.nav { position: sticky; top: 12px; z-index: 50; margin: 12px var(--gutter) 0; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 var(--edge); }
.nav-in { display: flex; align-items: center; gap: 4px; min-height: 56px; padding-inline: 18px 12px; font-size: 14px; }
.logo { display: inline-flex; align-items: center; gap: 9px; margin-right: 22px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.logo::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 5px solid var(--blue); }
.nav-item > button { height: 34px; padding: 0 12px; background: none; border: 0; border-radius: 9px; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.nav-item > button:hover, .nav-item.open > button { background: var(--chip); color: var(--ink); }
.nav-gap { flex: 1; }
.nav-order { margin-right: 4px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--chip); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.icon-btn:hover { border-color: var(--link); }
.icon-btn svg { width: 17px; height: 17px; }
.burger { display: none; margin-left: 4px; }
.sun { display: none; }
[data-theme="dark"] .sun { display: block; }
[data-theme="dark"] .moon { display: none; }

.fly { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; border-radius: 16px; background: var(--bg-2); transition: max-height .3s var(--ease), opacity .18s, visibility .3s; }
.nav-item.open .fly { max-height: 560px; opacity: 1; visibility: visible; border: 1px solid var(--line); box-shadow: var(--shadow); }
.fly-in { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 26px; }
.fly h3 { font-size: 22px; }
.fly-line { margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.fly-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.fly-list a { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 12px; transition: background .15s; }
.fly-list a:hover { background: var(--chip); }
.fly-list b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fly-list span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }

/* first screen */
.hero { position: relative; overflow: hidden; margin-top: -68px; padding: 132px 20px clamp(200px, 25vw, 370px); text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 59px, var(--stripe) 59px 60px); pointer-events: none; }
.hero h1 { position: relative; max-width: 17em; margin-inline: auto; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.16; }
.hero > p { position: relative; max-width: 40em; margin: 16px auto 0; color: var(--ink-2); font-size: clamp(14px, 1.2vw, 16px); }
.ask { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; max-width: 560px; margin: 24px auto 0; }
.ask input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); outline: 0; transition: border-color .15s; }
.ask input:focus { border-color: var(--link); }
.ask input::placeholder { color: var(--ink-2); opacity: 1; }
.ask .btn { flex: none; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(220px, 28vw, 430px); animation: wave-in 1.5s var(--ease) both; }
/* blending removes the edge between the picture's own backdrop and the page */
.hero-wave { mix-blend-mode: multiply; }
[data-theme="dark"] .hero-wave { mix-blend-mode: screen; }
.hero-wave picture { width: 100%; height: 100%; }
.hero-wave img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); }
@keyframes wave-in { from { opacity: 0; transform: translateY(36px) scale(1.03); } to { opacity: 1; transform: none; } }
.float { position: absolute; z-index: 1; padding: 9px 14px; border: 1px solid var(--il-edge); border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; line-height: 1.3; text-align: left; box-shadow: var(--shadow); animation: drift 7s ease-in-out infinite; }
.float b { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; }
.float span { color: var(--ink-2); }
.float.one { left: max(20px, calc(50% - 480px)); bottom: clamp(70px, 10vw, 160px); }
.float.two { right: max(20px, calc(50% - 380px)); bottom: clamp(120px, 15vw, 240px); animation-delay: -3s; }
@keyframes drift { 50% { transform: translateY(-8px); } }

/* directions row */
.dirs { padding: 8px var(--gutter) 0; text-align: center; color: var(--ink-2); font-size: 14px; }
.dirs-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.dirs-list a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; transition: border-color .2s, box-shadow .25s; }
.dirs-list a:hover { border-color: var(--link); box-shadow: var(--glow); }
.dirs-list svg { width: 20px; height: 20px; }

/* sections */
.sec { padding: clamp(60px, 7vw, 100px) var(--gutter) 0; }
.sec-title { font-size: clamp(27px, 3.1vw, 42px); text-align: center; }
.sec-sub { max-width: 42em; margin: 12px auto 0; color: var(--ink-2); text-align: center; font-size: clamp(14px, 1.2vw, 16px); }

/* service cards */
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.card { position: relative; grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background-color: var(--card); background-image: linear-gradient(180deg, var(--card), var(--bg-2)); box-shadow: inset 0 1px 0 var(--edge); transition: border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover { border-color: var(--il-edge); box-shadow: inset 0 1px 0 var(--edge), var(--glow); transform: translateY(-3px); }
.card.big { grid-column: span 3; }
.card.full { grid-column: 1 / -1; }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.card-pic { display: block; height: 210px; flex: none; color: var(--ink); background-image: repeating-linear-gradient(90deg, transparent 0 39px, var(--stripe) 39px 40px); }
.card.big .card-pic, .card.full .card-pic { height: 280px; padding-top: 20px; }
.card-text { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.card:not(.big):not(.full) .card-text { order: -1; flex: none; padding-bottom: 6px; }
.card:not(.big):not(.full) .card-pic { flex: 1; min-height: 190px; }
.card .round { margin-bottom: 16px; }
.card.big .round, .card.full .round { display: none; }
.card.big .card-text, .card.full .card-text { align-items: center; text-align: center; padding-top: 10px; }
.card h3 { font-size: 20px; }
.card.big h3, .card.full h3 { font-size: 22px; }
.card-text > p { margin: 6px 0 16px; max-width: 34em; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.card-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; font-size: 14px; }
.card .btn { position: relative; z-index: 2; }

/* illustrations */
.il { display: block; width: 100%; height: 100%; }
.il-defs { position: absolute; }
.il-a { stop-color: var(--il-a); }
.il-b { stop-color: var(--il-b); }
.il-c { stop-color: var(--il-c); }
.il-d { stop-color: var(--il-d); }
.il-line { fill: none; stroke: var(--il-line); stroke-width: 1.2; }
.il-flow { fill: none; stroke: var(--link); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 6 420; animation: flow 6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -426; } }
.il-glass { fill: url(#il-glass); stroke: var(--il-edge); stroke-width: 1.2; }
.il-inner { fill: url(#il-inner); stroke: var(--il-edge); stroke-width: 1; }
.il-ghost { fill: var(--soft); stroke: var(--il-line); stroke-width: 1; }
.il-dot { fill: var(--il-edge); }
.il-glyph { fill: none; stroke: var(--ink); stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; }

/* problem chooser */
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 34px; padding: 10px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: inset 0 1px 0 var(--edge); }
.pick a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 500; line-height: 1.4; transition: color .15s, padding .25s var(--ease); }
.pick a:nth-last-child(-n+2) { border-bottom: 0; }
.pick a span { flex: none; color: var(--link); font-weight: 500; font-size: 13px; }
.pick a:hover { padding-left: 6px; }

/* comparison */
.compare-wrap { max-width: 980px; margin: 34px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: inset 0 1px 0 var(--edge); }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.compare th, .compare td { padding: 16px 24px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-weight: 600; }
.compare tbody th { width: 26%; font-weight: 500; }
.compare .other { width: 37%; color: var(--ink-2); }
.compare .ours { width: 37%; background: var(--soft); }
.compare thead .ours { color: var(--link); }
.compare tbody td { position: relative; padding-left: 48px; }
.compare tbody .ours::before { content: ""; position: absolute; left: 25px; top: 22px; width: 11px; height: 6px; border-left: 1.8px solid var(--link); border-bottom: 1.8px solid var(--link); transform: rotate(-45deg); }
.compare tbody .other::before { content: "×"; position: absolute; left: 25px; top: 13px; font-size: 18px; color: var(--ink-2); }

/* small cards */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.points.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.point { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background-color: var(--card); background-image: linear-gradient(180deg, var(--card), var(--bg-2)); box-shadow: inset 0 1px 0 var(--edge); transition: border-color .25s, box-shadow .3s var(--ease); }
.point:hover { border-color: var(--il-edge); box-shadow: inset 0 1px 0 var(--edge), var(--glow); }
.point .round { margin-bottom: 18px; }
.point h3 { font-size: 18px; }
.point p { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; counter-reset: s; text-align: center; }
.steps li { position: relative; counter-increment: s; }
.steps li::before { content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border: 1px solid var(--il-edge); border-radius: 50%; background-color: var(--chip); box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line); font-size: 18px; font-weight: 600; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 44px); right: calc(-50% - 12px + 44px); top: 32px; border-top: 1px dashed var(--il-edge); }
.steps h3 { font-size: 18px; }
.steps p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* closing call */
.closing { position: relative; overflow: hidden; margin-top: clamp(60px, 7vw, 100px); padding: clamp(60px, 8vw, 110px) 24px; text-align: center; background-image: radial-gradient(60% 90% at 50% 100%, var(--soft), transparent), repeating-linear-gradient(90deg, transparent 0 59px, var(--stripe) 59px 60px); }
.closing h2 { font-size: clamp(27px, 3.1vw, 42px); }
.closing p { max-width: 36em; margin: 12px auto 24px; color: var(--ink-2); }
.cta-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* service: sticky bar */
.subnav { position: sticky; top: 76px; z-index: 30; margin: 8px var(--gutter) 0; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.subnav-in { display: flex; align-items: center; gap: 22px; min-height: 46px; padding-inline: 18px 8px; }
.subnav b { margin-right: auto; font-size: 15px; font-weight: 600; white-space: nowrap; }
.subnav a:not(.btn) { font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: color .15s; }
.subnav a:not(.btn):hover, .subnav a.on { color: var(--link); }

/* service: hero */
.s-hero { padding: clamp(40px, 5vw, 72px) var(--gutter) 0; text-align: center; }
.s-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--link); font-size: 13px; font-weight: 600; }
.s-hero .eyebrow svg { width: 16px; height: 16px; }
.s-hero h1 { max-width: 17em; margin: 16px auto 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.16; }
.s-hero .lead { max-width: 42em; margin: 14px auto 0; color: var(--ink-2); font-size: clamp(14px, 1.2vw, 16px); }
.s-hero .cta-row { margin-top: 24px; }
.s-pic { height: clamp(240px, 30vw, 400px); margin-top: 36px; padding-block: 20px; border: 1px solid var(--line); border-radius: 24px; background-color: var(--card); background-image: repeating-linear-gradient(90deg, transparent 0 39px, var(--stripe) 39px 40px), linear-gradient(180deg, var(--card), var(--bg-2)); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); color: var(--ink); }

/* service: plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border: 1px solid var(--line); border-radius: 24px; background-color: var(--card); background-image: linear-gradient(180deg, var(--card), var(--bg-2)); box-shadow: inset 0 1px 0 var(--edge); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.plan:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--edge), var(--glow); }
.plan.best, .plan.best:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), var(--glow); }
.badge { position: absolute; left: 24px; top: -12px; padding: 3px 11px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.plan h3 { font-size: 22px; }
.plan .for { margin-top: 4px; min-height: 2.9em; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.plan ul { margin: 14px 0 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan .btn { margin-top: auto; }
.plan-price { margin-top: 8px; font-size: 15px; font-weight: 600; }
.ticks li { position: relative; padding: 5px 0 5px 26px; font-size: 14px; line-height: 1.4; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 11px; height: 6px; border-left: 1.8px solid var(--link); border-bottom: 1.8px solid var(--link); transform: rotate(-45deg); }

/* service: questions */
.faq { max-width: 860px; margin: 30px auto 0; padding: 4px 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.faq details:not(:last-child) { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 17px 0; list-style: none; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.4; transition: color .15s; }
.faq summary:hover { color: var(--link); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 12px; height: 12px; color: var(--ink-2); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .25s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: none; }
.faq details p { padding-bottom: 18px; max-width: 44em; color: var(--ink-2); }

.buybar { display: none; }

/* order */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(60px, 7vw, 96px); }
.order h1 { font-size: clamp(30px, 3.6vw, 48px); }
.order-side > p { margin-top: 12px; max-width: 28em; color: var(--ink-2); font-size: clamp(14px, 1.2vw, 16px); }
.next { margin-top: 30px; }
.next li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.next b { color: var(--ink); font-weight: 600; }
.next span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--il-edge); border-radius: 50%; background: var(--chip); color: var(--ink); font-size: 13px; font-weight: 600; }
.direct { margin-top: 24px; display: grid; gap: 4px; justify-items: start; }
.direct span { font-size: 13px; color: var(--ink-2); }
.direct a { color: var(--link); font-size: 17px; }
form.lead { align-self: start; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.fld input, .fld textarea, .fld select { display: block; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); outline: 0; transition: border-color .15s, box-shadow .15s; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat; }
.fld textarea { min-height: 100px; resize: vertical; line-height: 1.45; }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--soft); }
.fld ::placeholder { color: var(--ink-2); opacity: 1; }
.plan-box { margin: -4px 0 14px; font-size: 14px; color: var(--ink-2); }
.plan-box b { color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; }
form.lead .btn { width: 100%; min-height: 48px; }
.err { min-height: 1.4em; margin-top: 8px; color: var(--err); font-size: 14px; }
.consent { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.consent a { color: var(--link); }
.ok { align-self: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); outline: 0; }
.ok h2 { font-size: 28px; }
.ok p { margin: 8px 0 20px; color: var(--ink-2); }

/* text pages */
.doc { max-width: 760px; margin-inline: auto; padding: clamp(44px, 6vw, 80px) 20px clamp(56px, 7vw, 92px); }
.doc h1 { overflow-wrap: break-word; font-size: clamp(28px, 3.6vw, 44px); }
.doc .meta { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.doc h2 { margin: 28px 0 6px; font-size: 20px; }
.doc p { color: var(--ink-2); }
.lost { min-height: 62vh; display: grid; place-content: center; justify-items: center; padding: 60px 20px; text-align: center; }
.lost h1 { font-size: clamp(30px, 3.6vw, 48px); }
.lost p { margin: 10px 0 22px; color: var(--ink-2); font-size: 17px; }

/* footer */
.foot { padding: 44px var(--gutter) 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-bottom: 30px; }
.foot h4 { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.foot li { margin-bottom: 7px; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 26px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 13px; }
.foot-end div { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* reveal */
.anim [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .25s, box-shadow .3s var(--ease); }
.anim [data-reveal].in { opacity: 1; transform: none; }
.anim .card[data-reveal].in:hover, .anim .plan[data-reveal].in:hover { transform: translateY(-3px); transition-delay: 0s; }
.cards > [data-reveal]:nth-child(2), .plans > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2), .points > [data-reveal]:nth-child(2) { transition-delay: .07s; }
.cards > [data-reveal]:nth-child(3), .plans > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3), .points > [data-reveal]:nth-child(3) { transition-delay: .14s; }
.steps > [data-reveal]:nth-child(4) { transition-delay: .21s; }

/* page changes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); }

@media (max-width: 1000px) {
  .nav-item { display: none; }
  .burger { display: grid; }
  .nav.mobile-open { position: fixed; inset: 0; z-index: 55; margin: 0; border: 0; border-radius: 0; background: var(--bg); overflow-y: auto; }
  .nav.mobile-open .nav-in { padding-inline: 20px; }
  .m-menu { display: none; }
  .nav.mobile-open .m-menu { display: block; padding: 6px 20px 60px; }
  .m-menu h4 { margin: 22px 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .m-menu a { display: block; padding: 7px 0; font-size: 20px; font-weight: 500; line-height: 1.25; }
  .float.two { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card, .card.big { grid-column: span 1; }
  .card.full { grid-column: 1 / -1; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li::after { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan .for { min-height: 0; }
  .order { grid-template-columns: 1fr; }
  .subnav a:not(.btn) { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1001px) { .m-menu { display: none; } }

@media (max-width: 734px) {
  .nav-in { padding-inline: 14px 8px; }
  .logo { margin-right: 8px; }
  .nav-order { padding-inline: 10px; }
  .hero { padding-top: 112px; }
  .ask { flex-direction: column; }
  .float.one { left: 16px; bottom: 44px; }
  .float b { font-size: 18px; }
  .cards, .points, .points.two, .pick, .steps { grid-template-columns: 1fr; }
  .card, .card.big, .card.full { grid-column: auto; }
  .pick { padding: 6px 18px; }
  .pick a:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .compare tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare tbody td { padding: 0; border: 0; }
  .compare tbody td { padding-left: 24px; margin-top: 8px; }
  .compare tbody .other::before { left: 3px; top: -8px; }
  .compare tbody .ours { padding: 8px 8px 8px 30px; border-radius: 8px; }
  .compare tbody .ours::before { left: 10px; top: 15px; }
  .s-pic { height: 230px; padding-block: 12px; }
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
  .with-bar .foot { padding-bottom: 76px; }
  .subnav .btn { display: none; }
  .steps { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
[data-vt="hosting"]{view-transition-name:pic-hosting}[data-vt="servers"]{view-transition-name:pic-servers}[data-vt="domains"]{view-transition-name:pic-domains}[data-vt="security"]{view-transition-name:pic-security}[data-vt="support"]{view-transition-name:pic-support}[data-vt="sites"]{view-transition-name:pic-sites}[data-vt="shop"]{view-transition-name:pic-shop}[data-vt="mobile"]{view-transition-name:pic-mobile}[data-vt="software"]{view-transition-name:pic-software}[data-vt="automation"]{view-transition-name:pic-automation}[data-vt="bots"]{view-transition-name:pic-bots}[data-vt="ai"]{view-transition-name:pic-ai}