:root{
  --font-sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fs-h1:clamp(2rem,4.5vw,3.4rem);
  --fs-h2:clamp(1.5rem,3vw,2.2rem);
  --fs-h3:clamp(1.1rem,1.6vw,1.35rem);
  --fs-body:clamp(1rem,1.1vw,1.075rem);
  --line-height:1.65;
  --letter-spacing:-0.01em;
  --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2.5rem;--space-5:4rem;
  --radius:18px;--radius-sm:12px;
  --c-bg:#0b1220;--c-bg-2:#0f1a30;--c-surface:#13203b;--c-surface-2:#172a4d;
  --c-line:rgba(120,160,255,.16);
  --c-text:#eaf0ff;--c-muted:#9fb2d8;
  --c-brand:#3b82f6;--c-brand-2:#22d3ee;--c-accent:#7c5cff;
  --shadow:0 24px 60px -24px rgba(8,18,45,.85);
  --glow:0 0 0 1px var(--c-line),0 20px 50px -20px rgba(59,130,246,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--line-height);
  letter-spacing:var(--letter-spacing);color:var(--c-text);
  background:
    radial-gradient(1100px 600px at 80% -5%,rgba(124,92,255,.22),transparent 60%),
    radial-gradient(900px 500px at 0% 10%,rgba(34,211,238,.16),transparent 55%),
    linear-gradient(180deg,var(--c-bg),var(--c-bg-2));
  background-attachment:fixed;
}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--space-3)}
.skip-link{position:absolute;left:-999px;top:0}
.skip-link:focus{left:8px;top:8px;background:var(--c-surface);padding:.5rem 1rem;border-radius:8px;z-index:100}
header.site{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:rgba(11,18,32,.72);border-bottom:1px solid var(--c-line)}
.nav{display:flex;align-items:center;gap:var(--space-3);padding:.85rem 0}
.brand{font-weight:800;font-size:1.15rem;display:flex;gap:.55rem;align-items:center}
.brand .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));box-shadow:0 0 14px var(--c-brand)}
.nav nav{display:flex;gap:var(--space-3);margin-left:auto;flex-wrap:wrap}
.nav nav a{color:var(--c-muted);text-decoration:none;font-size:.95rem}
.nav nav a:hover{color:var(--c-text)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.8rem 1.4rem;
  font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit}
.btn-primary{background:linear-gradient(135deg,var(--c-brand),var(--c-accent));color:#fff;box-shadow:var(--glow)}
.btn-ghost{border-color:var(--c-line);color:var(--c-text);background:rgba(255,255,255,.03)}
section{padding:var(--space-5) 0}
.eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-brand-2);border:1px solid var(--c-line);border-radius:999px;padding:.35rem .8rem;margin-bottom:var(--space-2)}
h1{font-size:var(--fs-h1);line-height:1.05;margin:.2em 0 .35em}
h2{font-size:var(--fs-h2);line-height:1.12;margin:0 0 .5em}
h3{font-size:var(--fs-h3);margin:0 0 .35em}
p{color:var(--c-muted);max-width:70ch}
.lead{font-size:1.15rem;color:#cfdcff;max-width:65ch}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-4);align-items:center}
.hero-actions{display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap}
.hero-visual{position:relative}
.dashboard{border:1px solid var(--c-line);border-radius:var(--radius);background:linear-gradient(160deg,var(--c-surface),var(--c-surface-2));
  box-shadow:var(--shadow);padding:var(--space-3)}
figure{margin:0}
figcaption{color:var(--c-muted);font-size:.9rem;margin-top:.6rem}
.hero-trust{display:flex;gap:var(--space-3);margin-top:var(--space-3);color:var(--c-muted);font-size:.9rem;flex-wrap:wrap}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.card{border:1px solid var(--c-line);border-radius:var(--radius);background:rgba(255,255,255,.025);
  padding:var(--space-3);box-shadow:var(--shadow);transition:transform .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(124,160,255,.4)}
.card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:.7rem;font-size:1.3rem;
  background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(34,211,238,.2));border:1px solid var(--c-line)}
.col-2{grid-column:span 2}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);counter-reset:step;align-items:stretch}
.timeline .step{height:100%}
.step{border:1px solid var(--c-line);border-radius:var(--radius-sm);padding:var(--space-2);background:rgba(255,255,255,.025);position:relative}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-brand),var(--c-accent));color:#fff;font-weight:800;margin-bottom:.5rem}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.metric{border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--space-3);text-align:center;
  background:linear-gradient(160deg,rgba(34,211,238,.08),transparent)}
.metric b{display:block;font-size:2.2rem;background:linear-gradient(135deg,var(--c-brand-2),var(--c-brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.table-scroll{overflow-x:auto}
.comparison{width:100%;border-collapse:collapse;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;min-width:560px}
.comparison th,.comparison td{padding:.85rem 1rem;border-bottom:1px solid var(--c-line);text-align:left;color:var(--c-muted)}
.comparison th{background:rgba(124,160,255,.08);color:var(--c-text)}
.comparison .yes{color:#5ef0c0;font-weight:700}.comparison .no{color:#ff7a90}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.plan{border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--space-3);background:rgba(255,255,255,.025);box-shadow:var(--shadow);display:flex;flex-direction:column}
.plan.featured{border-color:rgba(124,92,255,.6);background:linear-gradient(160deg,rgba(124,92,255,.14),transparent)}
.plan .price{font-size:1.7rem;font-weight:800;color:var(--c-text);margin:.4rem 0}
.plan ul{padding-left:1.1rem;color:var(--c-muted);flex:1}
.plan .fit{font-size:.9rem;color:var(--c-brand-2);margin:.3rem 0}
.support{margin-top:var(--space-3);border:1px dashed var(--c-line);border-radius:var(--radius);padding:var(--space-3);background:rgba(34,211,238,.05)}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.muted-card{border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--space-3);background:rgba(255,255,255,.02)}
details{border:1px solid var(--c-line);border-radius:var(--radius-sm);padding:.4rem 1rem;margin-bottom:.7rem;background:rgba(255,255,255,.02)}
details summary{cursor:pointer;font-weight:600;padding:.6rem 0;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--c-brand-2);font-weight:800}
details[open] summary::after{content:"–"}
details[open]{border-color:rgba(124,160,255,.4)}
footer{border-top:1px solid var(--c-line);padding:var(--space-4) 0;color:var(--c-muted);font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-3)}
.footer-grid a{color:var(--c-muted);display:block;text-decoration:none;margin:.25rem 0}
.footer-grid a:hover{color:var(--c-text)}
.disclaimer{margin-top:var(--space-3);opacity:.8}
.sticky-cta{position:fixed;right:18px;bottom:84px;z-index:50}
.cookie-notice{position:fixed;left:18px;right:18px;bottom:18px;z-index:60;display:flex;gap:var(--space-2);align-items:center;
  background:rgba(15,26,48,.97);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--space-2) var(--space-3);box-shadow:var(--shadow)}
.cookie-notice p{margin:0;font-size:.88rem;max-width:none}
.cookie-notice.hidden{display:none}
.legal{max-width:820px}
.legal h1{font-size:clamp(1.6rem,3vw,2.4rem)}
.legal h2{font-size:1.3rem;margin-top:var(--space-3)}
@media(max-width:880px){
  .hero,.footer-grid,.grid-2,.grid-3,.support-grid{grid-template-columns:1fr}
  .bento,.kpi{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
  .col-2{grid-column:auto}
  .nav nav{display:none}
  .cookie-notice{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===== v06 studio visual overhaul (visual layer only) ===== */
:root{
  --c-trust:#f5b455; --c-success:#5ef0c0;
  /* brandkit aliases (semantic token names) */
  --brand: var(--c-brand); --primary: var(--c-brand); --accent: var(--c-brand-2);
  --cta: var(--c-accent); --dark: var(--c-bg); --ink: var(--c-text);
  --icon-stroke: 2;
}
/* unified inline-svg icon system */
.card .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:.7rem;
  color:var(--c-brand-2);background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(34,211,238,.2));border:1px solid var(--c-line)}
.card .icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:var(--icon-stroke);fill:none;stroke-linecap:round;stroke-linejoin:round}

/* tech automation grid background — part of the theme, low opacity */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,160,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 28%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 18%, #000 28%, transparent 78%);
}

/* hero automation flow */
.flow-line{ stroke-dasharray: 6 8; }
.ai-pulse{ transform-box: fill-box; transform-origin: center; }

/* decorative pipeline divider between major blocks */
.section-divider{ height:1px; max-width:1140px; margin:0 auto;
  background:linear-gradient(90deg, transparent, var(--c-line) 20%, var(--c-brand-2) 50%, var(--c-line) 80%, transparent); opacity:.5; }

/* featured pricing badge (pure visual, no copy change) */
.plan.featured{ position:relative; }
.plan.featured::before{
  content:"Популярный"; position:absolute; top:-12px; right:16px;
  background:linear-gradient(135deg, var(--c-trust), #ffd089); color:#1b1300;
  font-size:.72rem; font-weight:800; letter-spacing:.04em; padding:.28rem .72rem;
  border-radius:999px; box-shadow:0 10px 22px -8px rgba(245,180,85,.6);
}

/* metric trust glow */
.metric{ position:relative; overflow:hidden; }
.metric::after{ content:""; position:absolute; inset:auto -30% -60% -30%; height:120px;
  background:radial-gradient(ellipse at 50% 0, rgba(34,211,238,.18), transparent 70%); pointer-events:none; }

/* scroll reveal (only active when JS adds .motion and motion is allowed) */
.motion .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.motion .reveal.in{ opacity:1; transform:none; }

@keyframes flowdash{ to{ stroke-dashoffset:-140; } }
@keyframes aipulse{ 0%{ transform:scale(.7); opacity:.65; } 70%{ opacity:0; } 100%{ transform:scale(1.7); opacity:0; } }

@media (prefers-reduced-motion: no-preference){
  .flow-line{ animation:flowdash 3.2s linear infinite; }
  .ai-pulse{ animation:aipulse 2.8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce){
  .motion .reveal{ opacity:1 !important; transform:none !important; }
  .flow-line, .ai-pulse{ animation:none !important; }
}

/* ===== text-heavy sections rendered as a card grid (designed, not a wall) ===== */
@media (min-width: 720px){
  .prose{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
    gap:var(--space-2);
    align-items:start;
  }
  /* headers, figures and tables span the full row */
  .prose > .eyebrow,
  .prose > h2,
  .prose > h3,
  .prose > figure,
  .prose > .table-scroll{ grid-column:1 / -1; }
  .prose > .eyebrow{ justify-self:start; }
  /* each meaning paragraph becomes a glass card */
  .prose > p{
    max-width:none; margin:0;
    border:1px solid var(--c-line); border-radius:var(--radius);
    background:rgba(255,255,255,.025); box-shadow:var(--shadow);
    padding:var(--space-3);
    transition:transform .25s ease, border-color .25s ease;
  }
  .prose > p:hover{ transform:translateY(-3px); border-color:rgba(124,160,255,.4); }
  /* accent rule on top of each card for rhythm */
  .prose > p::before{
    content:""; display:block; width:34px; height:3px; border-radius:3px;
    margin-bottom:.7rem; background:linear-gradient(90deg, var(--c-brand), var(--c-brand-2));
  }
}

/* ============================================================
   v06.1 REDESIGN — alternating light/dark bands, symmetric
   equal-height card grids, card motion. Visual layer only.
   ============================================================ */
html{ overflow-x: hidden; }

/* --- symmetric, equal grids (no oversized tiles) --- */
.bento{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
.bento .col-2{ grid-column:auto; }                 /* uniform squares */
.bento .card{ height:100%; }
.grid-2,.grid-3{ align-items:stretch; }
.grid-2 > *,.grid-3 > *{ height:100%; }
.pricing{ align-items:stretch; }
.support-grid{ align-items:stretch; }
.support-grid .muted-card{ height:100%; }
@media (min-width:720px){
  .prose{ grid-template-columns:repeat(2,1fr); align-items:stretch; }
  .prose > p{ height:100%; }
}

/* --- full-width alternating bands --- */
main > section{ position:relative; isolation:isolate; }
main > section:nth-of-type(even)::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  background:linear-gradient(180deg,#eef3fc,#f6f9fe);
  border-top:1px solid #dde6f5; border-bottom:1px solid #dde6f5;
}
/* light-band typography & components */
main > section:nth-of-type(even){ color:#46546f; }
main > section:nth-of-type(even) h1,
main > section:nth-of-type(even) h2,
main > section:nth-of-type(even) h3{ color:#16223f; }
main > section:nth-of-type(even) p{ color:#46546f; }
main > section:nth-of-type(even) .eyebrow{ color:#2563eb; border-color:#cdd9ef; background:rgba(37,99,235,.05); }
main > section:nth-of-type(even) .card,
main > section:nth-of-type(even) div.muted-card,
main > section:nth-of-type(even) .plan,
main > section:nth-of-type(even) .metric,
main > section:nth-of-type(even) .step,
main > section:nth-of-type(even) details,
main > section:nth-of-type(even) .prose > p{
  background:#ffffff; border-color:#e1e8f5; color:#46546f;
  box-shadow:0 18px 40px -26px rgba(20,40,80,.28);
}
main > section:nth-of-type(even) .card h3,
main > section:nth-of-type(even) .plan h3,
main > section:nth-of-type(even) .muted-card h3,
main > section:nth-of-type(even) .plan .price{ color:#16223f; }
main > section:nth-of-type(even) .plan ul,
main > section:nth-of-type(even) .card p{ color:#46546f; }
main > section:nth-of-type(even) .card .icon{ color:#2563eb; background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(34,211,238,.12)); border-color:#dbe6f8; }
main > section:nth-of-type(even) .support{ background:rgba(37,99,235,.05); border-color:#cdd9ef; }
main > section:nth-of-type(even) .comparison th{ background:#e9f0fb; color:#16223f; }
main > section:nth-of-type(even) .comparison th,
main > section:nth-of-type(even) .comparison td{ border-color:#e1e8f5; color:#46546f; }
main > section:nth-of-type(even) .comparison .yes{ color:#0f9d6b; }
main > section:nth-of-type(even) .comparison .no{ color:#d83a52; }
main > section:nth-of-type(even) .metric{ background:linear-gradient(160deg,#eaf2ff,#ffffff); }
main > section:nth-of-type(even) .btn-ghost{ color:#16223f; border-color:#cdd9ef; background:#ffffff; }
/* keep diagram panels dark even on light bands (SVG stays readable) */
main > section:nth-of-type(even) figure.dashboard,
main > section:nth-of-type(even) figure.muted-card{
  background:linear-gradient(160deg,var(--c-surface),var(--c-surface-2)); border-color:var(--c-line);
}
main > section:nth-of-type(even) figcaption{ color:#46546f; }

/* --- card motion: staggered reveal when a section scrolls in --- */
.motion .reveal .card,
.motion .reveal .plan,
.motion .reveal .metric,
.motion .reveal .step,
.motion .reveal.prose > p{
  opacity:0; transform:translateY(20px);
  transition:opacity .55s ease, transform .55s ease;
}
.motion .reveal.in .card,
.motion .reveal.in .plan,
.motion .reveal.in .metric,
.motion .reveal.in .step,
.motion .reveal.in.prose > p{ opacity:1; transform:none; }
.motion .reveal.in .card:nth-child(2),.motion .reveal.in .plan:nth-child(2),.motion .reveal.in .metric:nth-child(2),.motion .reveal.in .step:nth-child(2),.motion .reveal.in.prose > p:nth-child(3){ transition-delay:.07s; }
.motion .reveal.in .card:nth-child(3),.motion .reveal.in .plan:nth-child(3),.motion .reveal.in .metric:nth-child(3),.motion .reveal.in .step:nth-child(3),.motion .reveal.in.prose > p:nth-child(4){ transition-delay:.14s; }
.motion .reveal.in .card:nth-child(4),.motion .reveal.in .metric:nth-child(4),.motion .reveal.in .step:nth-child(4),.motion .reveal.in.prose > p:nth-child(5){ transition-delay:.21s; }
.motion .reveal.in .card:nth-child(5),.motion .reveal.in .step:nth-child(5),.motion .reveal.in.prose > p:nth-child(6){ transition-delay:.28s; }
.motion .reveal.in .card:nth-child(6),.motion .reveal.in .step:nth-child(6),.motion .reveal.in.prose > p:nth-child(7){ transition-delay:.35s; }

@media (prefers-reduced-motion: reduce){
  .motion .reveal .card,.motion .reveal .plan,.motion .reveal .metric,.motion .reveal .step,.motion .reveal.prose > p{ opacity:1 !important; transform:none !important; }
}

/* --- responsive corrections for the symmetric grids --- */
@media (max-width:880px){
  .bento{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .bento{ grid-template-columns:1fr; }
  .kpi{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:719px){
  .prose > p{
    border:1px solid var(--c-line); border-radius:var(--radius-sm);
    background:rgba(255,255,255,.025); padding:var(--space-3);
    max-width:none; margin:0 0 var(--space-2);
  }
  .prose > p::before{
    content:""; display:block; width:34px; height:3px; border-radius:3px;
    margin-bottom:.7rem; background:linear-gradient(90deg, var(--c-brand), var(--c-brand-2));
  }
}

/* --- #before: numbered 3-up checklist grid (9 cards = clean 3x3) --- */
#before{ counter-reset: tip; }
@media (min-width:720px){
  #before.prose{ grid-template-columns:repeat(2,1fr); }
}
#before.prose > p{ counter-increment: tip; }
#before.prose > p::before{
  content: counter(tip);
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.9rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--c-brand), var(--c-accent));
  margin:0 0 .7rem 0;
}

/* ============================================================
   v06.2 FIX — figure/SVG sizing & overlap, caption readability,
   consistent section spacing. Visual layer only.
   ============================================================ */

/* never let grid stretch a figure; keep diagrams compact & centered */
.prose > figure{ align-self:start; grid-column:1 / -1; margin:var(--space-2) 0; padding:var(--space-3); overflow:hidden; }
.prose figure svg{ display:block; width:auto; max-width:100%; height:clamp(92px,12vw,132px); margin:0 auto; }

/* long descriptive captions: readable note, two columns on desktop, not a wall */
.prose figure figcaption{ font-size:.85rem; line-height:1.5; margin-top:var(--space-2); }
@media (min-width:760px){
  .prose figure figcaption{ column-count:2; column-gap:var(--space-4); }
}

/* keep figure captions LIGHT on the dark diagram panel (even inside light bands) */
main > section:nth-of-type(even) figcaption{ color:var(--c-muted); }

/* guarantee vertical rhythm between bands.
   sections carry .wrap (padding:0 var(--space-3)) which had zeroed vertical padding;
   section.wrap out-specifies .wrap and restores breathing room, keeping the horizontal gutter. */
section.wrap{ padding-top:var(--space-5); padding-bottom:var(--space-5); }
main > section > .eyebrow{ margin-top:0; }