:root{
  --purple:#8b3dd1; --orange:#f5a623; --teal:#17acac; --blue:#2b7fd4; --flame:#f0651f;
  --cream:#f7f2e9; --ink:#322c3c;
  --bg:#fffdfa; --fg:#2a2433; --muted:#6f6880; --line:#ece6f2;
  --card:#fff; --soft:#faf6ff;
  --shadow:0 2px 4px rgba(50,44,60,.04), 0 8px 24px rgba(139,61,209,.07);
  --shadow-lg:0 4px 8px rgba(50,44,60,.05), 0 16px 44px rgba(139,61,209,.11);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#15121c; --fg:#eee9f5; --muted:#a29bb4; --line:#2a2438;
        --card:#1d1828; --soft:#211a2e; --cream:#2a2438;
        --shadow:0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.28);
        --shadow-lg:0 4px 10px rgba(0,0,0,.25), 0 18px 48px rgba(0,0,0,.36);}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.68 ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",
       "Nunito","Rubik",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 1.35rem}
a{color:var(--purple)}

/* ── шапка ─────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand svg{width:42px;height:42px;flex:none}
.word{font-weight:800;font-size:1.3rem;letter-spacing:.01em;line-height:1}
.word i{font-style:normal}
.word i:nth-child(1){color:var(--purple)} .word i:nth-child(2){color:var(--orange)}
.word i:nth-child(3){color:var(--teal)}   .word i:nth-child(4){color:var(--blue)}
.word i:nth-child(5){color:var(--purple)} .word i:nth-child(6){color:var(--flame)}
nav{display:flex;gap:.35rem;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:560;
  padding:.42rem .8rem;border-radius:99px}
nav a:hover{color:var(--purple);background:var(--soft)}
nav a[aria-current]{color:var(--purple);background:var(--soft)}

/* ── герой ─────────────────────────────────────────────── */
.hero-top{padding:4rem 0 3.2rem;border-top:0}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2.8rem;align-items:center}
@media(max-width:840px){.hero-top{padding:2.6rem 0 2.2rem}
  .hero{grid-template-columns:1fr;gap:2rem}}
h1{font-size:clamp(2.05rem,5.2vw,3.15rem);line-height:1.1;margin:0 0 1.1rem;
  font-weight:820;letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--purple)}
.lead{font-size:1.13rem;color:var(--muted);margin:0 0 1.9rem;max-width:33rem}
.cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--purple);color:#fff;
  text-decoration:none;padding:.82rem 1.6rem;border-radius:99px;font-weight:680;font-size:1rem;
  box-shadow:0 5px 16px rgba(139,61,209,.32);transition:transform .12s ease,box-shadow .12s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(139,61,209,.4)}
.cta.ghost{background:var(--card);color:var(--fg);border:2px solid var(--line);
  box-shadow:none;margin-left:.55rem}
.cta.ghost:hover{border-color:var(--purple);color:var(--purple);box-shadow:none}
@media(max-width:560px){
  .cta{width:100%;justify-content:center}
  .cta.ghost{margin-left:0;margin-top:.7rem}
  .top .wrap{padding-top:.7rem;padding-bottom:.7rem}
  nav a{padding:.36rem .65rem;font-size:.9rem}
}
.hero-art{width:100%;height:auto;filter:drop-shadow(0 18px 34px rgba(139,61,209,.16))}

/* ── секции ────────────────────────────────────────────── */
section{padding:3.6rem 0;border-top:1px solid var(--line)}
h2{font-size:1.72rem;margin:0 0 .6rem;font-weight:800;letter-spacing:-.02em}
.sub{color:var(--muted);margin:0 0 2.1rem;max-width:39rem}
h3{font-size:1.06rem;margin:0 0 .5rem;font-weight:720}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.25rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.55rem;
  box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card p{margin:0;color:var(--muted);font-size:.94rem}
.dot{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:.95rem;font-size:1.15rem}
.c1 .dot{background:rgba(139,61,209,.13)} .c2 .dot{background:rgba(245,166,35,.17)}
.c3 .dot{background:rgba(23,172,172,.15)} .c4 .dot{background:rgba(43,127,212,.14)}
.c5 .dot{background:rgba(240,101,31,.14)} .c6 .dot{background:rgba(139,61,209,.13)}
.c1{border-top:3px solid var(--purple)} .c2{border-top:3px solid var(--orange)}
.c3{border-top:3px solid var(--teal)}   .c4{border-top:3px solid var(--blue)}
.c5{border-top:3px solid var(--flame)}  .c6{border-top:3px solid var(--purple)}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:.88rem 1.05rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-weight:700;font-size:.86rem;color:var(--muted);white-space:nowrap;background:var(--soft)}
td strong{font-weight:720;color:var(--fg)}

ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:1.5rem}
ol.steps li{counter-increment:s;position:relative;padding-left:3.1rem;color:var(--muted);font-size:.94rem}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-.15rem;width:2.25rem;height:2.25rem;
  border-radius:50%;color:#fff;font-weight:800;font-size:.98rem;
  display:flex;align-items:center;justify-content:center}
ol.steps li:nth-child(1)::before{background:var(--purple)}
ol.steps li:nth-child(2)::before{background:var(--orange)}
ol.steps li:nth-child(3)::before{background:var(--teal)}
ol.steps li:nth-child(4)::before{background:var(--flame)}
ol.steps strong{display:block;color:var(--fg);font-weight:720;margin-bottom:.25rem;font-size:1rem}

ul.ticks{list-style:none;padding:0;margin:0;columns:2;column-gap:2.2rem}
@media(max-width:640px){ul.ticks{columns:1}}
ul.ticks li{padding:.46rem 0 .46rem 1.7rem;position:relative;color:var(--muted);
  font-size:.95rem;break-inside:avoid}
ul.ticks li::before{content:"";position:absolute;left:0;top:.98rem;width:9px;height:9px;
  border-radius:3px;background:var(--teal)}
ul.ticks li:nth-child(3n)::before{background:var(--orange)}
ul.ticks li:nth-child(3n+1)::before{background:var(--purple)}

.note{background:var(--soft);border-radius:16px;padding:1.15rem 1.3rem;font-size:.93rem;
  margin:1.8rem 0 0;border:1px solid var(--line)}

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin:0}
.contact dt{font-size:.84rem;color:var(--muted);margin-bottom:.35rem}
.contact dd{margin:0 0 1.2rem;font-size:1.06rem;font-weight:600}
.contact a{text-decoration:none}
.contact a:hover{text-decoration:underline}

footer{border-top:1px solid var(--line);padding:2.4rem 0 3.6rem;color:var(--muted);font-size:.89rem}
footer .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--purple)}