/* Система принятия решений — общий стиль для index.html (RU) и kz.html (KZ).
   Тёплая бумажная основа, синий / жёлтый / красный, «рисованные» акценты. */

:root{
  --bg:#FFFCF6;
  --paper:#FFFFFF;
  --ink:#15130F;
  --ink-soft:#4B4740;
  --ink-faint:#8A857B;
  --line:#EAE4D8;

  --blue:#2762DF;
  --blue-dark:#1B4BB8;
  --blue-soft:#E9F1FD;
  --yellow:#FFC62B;
  --yellow-deep:#E8A800;
  --yellow-soft:#FFF2C7;
  --red:#E5402F;
  --red-soft:#FFE3DE;

  --r-lg:32px;
  --r-md:24px;
  --r-sm:16px;
  --shadow:0 1px 0 rgba(21,19,15,.04), 0 14px 32px -18px rgba(21,19,15,.28);
  --shadow-pop:0 26px 50px -26px rgba(21,19,15,.4);

  --font-head:"Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, sans-serif;
  --font-script:"Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* hand-drawn doodles */
  --d-tick:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23E5402F' stroke-width='3.2' stroke-linecap='round'><path d='M5 24l6-6M13 14l3-9M20 20l8-3'/></svg>");
  --d-wave-y:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12' fill='none' stroke='%23FFC62B' stroke-width='3.6' stroke-linecap='round'><path d='M3 6q10.5-9 21 0t21 0 21 0 21 0'/></svg>");
  --d-wave-b:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12' fill='none' stroke='%232762DF' stroke-width='3.6' stroke-linecap='round'><path d='M3 6q10.5-9 21 0t21 0 21 0 21 0'/></svg>");
  --d-star:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232762DF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 6l7 19 20 1-16 12 6 20-17-12-17 12 6-20L5 26l20-1z'/></svg>");
  --d-aster:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23FFC62B' stroke-width='6' stroke-linecap='round'><path d='M32 6v52M6 32h52M14 14l36 36M50 14L14 50'/></svg>");
  --d-smile:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232762DF' stroke-width='4' stroke-linecap='round'><circle cx='32' cy='32' r='24'/><path d='M22 38q10 10 20 0'/><path d='M24 25v2M40 25v2' stroke-width='5'/></svg>");
  --d-sun:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23FFC62B' stroke-width='4' stroke-linecap='round'><circle cx='32' cy='32' r='9'/><path d='M48 32h10M43.3 43.3l7.1 7.1M32 48v10M20.7 43.3l-7.1 7.1M16 32H6M20.7 20.7l-7.1-7.1M32 16V6M43.3 20.7l7.1-7.1'/></svg>");
  --d-crown:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2315130F' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 46l2-30 14 14 8-20 8 20 14-14 2 30z'/></svg>");
  --d-arrow:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2315130F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M8 8C34 4 56 20 50 54'/><path d='M40 44l10 11 9-12'/></svg>");
  --d-swirl:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none' stroke='%2315130F' stroke-width='2.8' stroke-linecap='round'><path d='M4 52C24 56 44 40 36 26 30 14 14 22 22 36c8 12 40 4 52-14 8-12 26-14 42-8'/></svg>");
  --d-brush:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220' fill='none' stroke='%23E5402F' stroke-width='24' stroke-linecap='round'><path d='M14 26l88 54M10 102l96 46M18 178l74 32'/></svg>");
  --d-dots:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='%2315130F'><g><circle cx='6' cy='6' r='2.6'/><circle cx='22' cy='6' r='2.6'/><circle cx='38' cy='6' r='2.6'/><circle cx='54' cy='6' r='2.6'/><circle cx='6' cy='22' r='2.6'/><circle cx='22' cy='22' r='2.6'/><circle cx='38' cy='22' r='2.6'/><circle cx='54' cy='22' r='2.6'/><circle cx='6' cy='38' r='2.6'/><circle cx='22' cy='38' r='2.6'/><circle cx='38' cy='38' r='2.6'/><circle cx='54' cy='38' r='2.6'/><circle cx='6' cy='54' r='2.6'/><circle cx='22' cy='54' r='2.6'/><circle cx='38' cy='54' r='2.6'/><circle cx='54' cy='54' r='2.6'/></g></svg>");
  --d-cloud:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M16 46c-10 0-13-10-7-15 3-3 8-3 11-1 0-11 12-17 23-11 5-10 22-8 26 3 11-2 19 9 11 17-3 3-7 7-13 7z'/></svg>");
  --d-rocket:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M6 146c34-6 52 12 86-22' stroke='%2315130F' stroke-width='3' stroke-dasharray='2 9'/><g transform='translate(150 74) rotate(40)' stroke='%2315130F' stroke-width='3.5'><path d='M0-52C20-32 20 10 13 32H-13C-20 10-20-32 0-52Z' fill='white'/><path d='M0-52C9-44 13-37 15-31H-15C-13-37-9-44 0-52Z' fill='%23E5402F'/><circle cy='-8' r='9' fill='%23E9F1FD'/><path d='M-13 12L-30 36L-13 32Z' fill='%23E5402F'/><path d='M13 12L30 36L13 32Z' fill='%23E5402F'/><path d='M-9 34Q0 74 9 34Z' fill='%23FFC62B'/></g></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance; overflow-wrap:break-word}
p{margin:0}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
::selection{background:var(--yellow); color:var(--ink)}

.ico{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px}
@media (max-width:720px){ .wrap{padding:0 20px} }
section{padding:44px 0; scroll-margin-top:12px}
@media (max-width:900px){ section{padding:32px 0} }

/* doodle helper */
.d{position:absolute; pointer-events:none; background:no-repeat center/contain; z-index:2}
.d-tick{background-image:var(--d-tick)}
.d-star{background-image:var(--d-star)}
.d-aster{background-image:var(--d-aster)}
.d-smile{background-image:var(--d-smile)}
.d-sun{background-image:var(--d-sun)}
.d-crown{background-image:var(--d-crown)}
.d-arrow{background-image:var(--d-arrow)}
.d-swirl{background-image:var(--d-swirl)}
.d-brush{background-image:var(--d-brush)}
.d-dots{background-image:var(--d-dots)}
.d-cloud{background-image:var(--d-cloud)}
.d-rocket{background-image:var(--d-rocket)}

/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:800 12.5px/1.35 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::after{content:""; width:22px; height:22px; flex:none; background:var(--d-tick) no-repeat center/contain}
.h2{font-size:clamp(28px,3vw,40px); margin-top:12px}
.h2::after{content:""; display:block; width:92px; height:10px; margin-top:14px; background:var(--d-wave-y) no-repeat center/100% 100%}
.h2.u-blue::after{background-image:var(--d-wave-b)}
.lede{margin-top:16px; font-size:17px; color:var(--ink-soft); max-width:58ch}
.head{max-width:780px; margin-bottom:32px}
.head.center{margin-left:auto; margin-right:auto; text-align:center}
.head.center .eyebrow{justify-content:center}
.head.center .h2::after{margin-left:auto; margin-right:auto}
.head.center .lede{margin-left:auto; margin-right:auto}

.split{display:grid; grid-template-columns:270px minmax(0,1fr); gap:40px; align-items:start}
.split > .head{margin-bottom:0}
.split > .head .h2{font-size:clamp(24px,2.1vw,29px)}
@media (max-width:1000px){ .split{grid-template-columns:minmax(0,1fr); gap:24px} }

.ic{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--yellow); color:var(--ink);
}
.ic.b{background:var(--blue); color:#fff}
.ic.r{background:var(--red); color:#fff}
.ic.y{background:var(--yellow); color:var(--ink)}

.lines-grid{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
.lines-grid > *{background:var(--paper)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:12px 26px; max-width:100%;
  border-radius:999px; border:2px solid transparent;
  font:800 13.5px/1.25 var(--font-head); letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; text-align:center; cursor:pointer; overflow-wrap:break-word;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn .ico{width:18px; height:18px; stroke-width:2.6}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-yellow{background:var(--yellow); color:var(--ink); box-shadow:var(--shadow)}
.btn-yellow:hover{background:#FFB800}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:#fff}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:#CC3324}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#2C2923}
.btn-white{background:#fff; color:var(--blue-dark)}
.btn-line-white{background:transparent; border-color:rgba(255,255,255,.7); color:#fff}
.btn-line-white:hover{background:rgba(255,255,255,.16)}
@media (max-width:560px){ .btn{min-height:48px; padding:11px 20px; font-size:12.5px} }

/* ---------- header ---------- */
.site-header{padding:18px 0}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.brand-mark{
  width:38px; height:38px; border-radius:12px; background:var(--ink); color:var(--yellow); flex:none;
  display:grid; place-items:center; font:800 16px var(--font-head);
}
.brand-text{font:700 28px/1 var(--font-script); letter-spacing:0; white-space:nowrap}
@media (max-width:640px){ .brand-text{font-size:23px} }
@media (max-width:420px){ .brand-text{display:none} }
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{font:700 15px var(--font-head); text-decoration:none; position:relative; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .2s ease}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:1180px){ .nav-links{display:none} }
.nav-cta{display:flex; align-items:center; gap:16px; flex:none}
.nav-cta .btn{min-height:44px; padding:10px 22px}
.lang-switch{display:flex; align-items:center; gap:6px; font:800 13px var(--font-head)}
.lang-switch a{text-decoration:none; opacity:.5}
.lang-switch a:hover{opacity:1}
.lang-switch a.active{opacity:1; text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:5px; cursor:default}
.lang-switch .sep{opacity:.35}
@media (max-width:560px){ .nav-cta .btn{display:none} }

/* ---------- hero ---------- */
.hero{padding:24px 0 36px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:48px; align-items:center}
@media (max-width:1000px){ .hero-grid{grid-template-columns:minmax(0,1fr); gap:40px} }
.hero h1{font-size:clamp(34px,4.2vw,56px); line-height:1.04; letter-spacing:-.03em}
.hero h1 .script{
  position:relative; display:block; width:max-content; max-width:100%;
  margin-top:.06em; padding-right:.7em;
  font:700 1.4em/1.02 var(--font-script); letter-spacing:0; color:var(--blue);
}
.hero h1 .script::after{content:""; position:absolute; right:0; top:.05em; width:.62em; height:.62em; background:var(--d-tick) no-repeat center/contain}
.hero .sub{margin-top:20px; font-size:18px; color:var(--ink-soft); max-width:50ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-meta{margin-top:30px}
.hero-trust{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-faint)}
.hero-trust .dot{width:9px; height:9px; border-radius:50%; background:var(--red); flex:none}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.chip{
  display:inline-flex; align-items:center; border:1.5px solid var(--ink); border-radius:999px;
  padding:7px 16px; font:700 13.5px var(--font-head); background:var(--paper);
}

.hero-panel{
  position:relative; background:var(--blue); border-radius:44px;
  padding:48px 34px 44px; min-height:540px; display:flex; align-items:center;
  box-shadow:var(--shadow-pop);
}
.hero-panel .d-crown{width:70px; height:70px; top:-38px; left:52%}
.hero-panel .d-aster{width:46px; height:46px; top:26px; right:26px}
.hero-panel .d-arrow{width:62px; height:62px; top:34px; right:-58px}
.hero-panel .d-swirl{width:130px; height:64px; left:-48px; bottom:70px}
.hero-panel .d-star{width:44px; height:44px; left:22px; top:20px; filter:brightness(0) invert(1); opacity:.85}
@media (max-width:1000px){
  .hero-panel .d-arrow, .hero-panel .d-swirl{display:none}
}
.sticker{
  position:absolute; right:-16px; bottom:-26px; z-index:3; max-width:228px;
  background:var(--red); color:#fff; border-radius:22px; padding:16px 20px 16px 18px;
  font:800 15.5px/1.25 var(--font-head); transform:rotate(2.5deg); box-shadow:var(--shadow-pop);
  display:flex; gap:10px; align-items:flex-start;
}
.sticker .ico{width:22px; height:22px; stroke:var(--yellow); flex:none; margin-top:1px}
@media (max-width:560px){ .sticker{right:10px; bottom:-18px; max-width:210px; font-size:14px} .hero-panel{margin-bottom:12px} }

.device-frame{position:relative; width:100%}
.device{background:var(--paper); border-radius:28px; box-shadow:var(--shadow-pop); padding:22px}
.device-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; margin-bottom:18px}
.device-title{font:800 16px var(--font-head); min-width:0; overflow-wrap:break-word}
.device-badge{font:800 11.5px var(--font-head); letter-spacing:.04em; background:var(--blue-soft); color:var(--blue-dark); padding:6px 12px; border-radius:999px; white-space:nowrap}
.kpi-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px}
.kpi-tile{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 12px; min-width:0}
.kpi-num{font:800 25px var(--font-head); white-space:nowrap; font-variant-numeric:tabular-nums}
.kpi-tile.pos .kpi-num{color:var(--blue)}
.kpi-label{font-size:12.5px; color:var(--ink-faint); margin-top:4px; line-height:1.35}
.staff-list{display:flex; flex-direction:column; gap:10px}
.staff-row{display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:10px 14px}
.avatar{width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font:800 13px var(--font-head)}
.avatar.a1{background:var(--blue-soft); color:var(--blue-dark)}
.avatar.a2{background:var(--red-soft); color:#8E2418}
.avatar.a3{background:var(--yellow-soft); color:#6B4A00}
.staff-name{font-weight:700; font-size:14.5px}
.staff-role{font-size:12.5px; color:var(--ink-faint)}
.staff-meta{margin-left:auto; display:flex; align-items:center; gap:10px; flex:none}
.progress-ring{position:relative; width:34px; height:34px; flex:none}
.progress-ring svg{transform:rotate(-90deg)}
.progress-ring .pct{position:absolute; inset:0; display:grid; place-items:center; font:800 10px var(--font-head); color:var(--ink-soft)}
.status-chip{font:800 11px var(--font-head); padding:5px 10px; border-radius:999px; white-space:nowrap}
.status-chip.ok{background:var(--blue-soft); color:var(--blue-dark)}
.status-chip.wait{background:var(--yellow-soft); color:#7A5400}
.ring-progress{stroke-dasharray:88; stroke-dashoffset:88}

.float-card{
  position:absolute; background:var(--paper); border-radius:20px; box-shadow:var(--shadow); border:1px solid var(--line);
  padding:11px 16px; display:flex; align-items:center; gap:10px; z-index:3;
}
.float-1{top:-30px; right:-12px}
.float-2{bottom:-30px; left:-14px}
.float-icon{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none}
.float-icon .ico{width:18px; height:18px; stroke-width:2.6}
.float-title{font-weight:700; font-size:13.5px}
.float-sub{font-size:12px; color:var(--ink-faint)}
@media (max-width:640px){ .float-card{display:none} }
@media (max-width:560px){
  .hero-panel{padding:30px 16px 34px; min-height:0; border-radius:32px}
  .device{padding:16px}
  .device-title{font-size:14.5px}
  .kpi-row{gap:8px}
  .kpi-tile{padding:10px 8px}
  .kpi-num{font-size:19px}
  .kpi-label{font-size:11px}
}
@media (max-width:360px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .kpi-tile:last-child{grid-column:1/3}
}

/* ---------- author ---------- */
.author{display:grid; grid-template-columns:260px minmax(0,1.5fr) minmax(0,.9fr); gap:44px; align-items:center}
@media (max-width:1100px){ .author{grid-template-columns:240px minmax(0,1fr)} .author .stat-list{grid-column:1/-1; border-left:0; padding-left:0; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:1px solid var(--line); padding-top:24px} }
@media (max-width:720px){ .author{grid-template-columns:minmax(0,1fr); gap:28px} }
.author-figure{position:relative; margin:0; justify-self:center}
.author-photo{position:relative; width:230px; height:230px}
.author-photo::before{
  content:""; position:absolute; left:-34px; top:30px; width:170px; height:118px; background:var(--yellow);
  border-radius:34px 70px 34px 76px; transform:rotate(-16deg);
}
.author-circle{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg,var(--blue) 0%,#6C9CF4 100%);
  box-shadow:0 0 0 5px var(--bg), 0 0 0 8.5px var(--ink);
}
.author-mono{font:700 112px/1 var(--font-script); color:rgba(255,255,255,.92); letter-spacing:0}
.author-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 6%; background:#fff; transform:scale(1.3); transform-origin:50% 24%}
.has-photo .author-note{display:none}
.has-photo .author-photo{margin-bottom:8px}
.author-photo .d-dots{width:46px; height:46px; left:-48px; bottom:20px; opacity:.85}
.author-photo .d-star{width:42px; height:42px; left:12px; bottom:-14px}
.author-note{margin-top:30px; max-width:230px; font-size:11.5px; line-height:1.4; color:var(--ink-faint); text-align:center}
.author-kicker{font:800 12.5px var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:8px}
.author-kicker::after{content:""; width:22px; height:22px; background:var(--d-tick) no-repeat center/contain}
.author-name{font-size:clamp(30px,3.4vw,44px); margin-top:10px; position:relative; display:inline-block}
.author-name::after{content:""; display:block; height:10px; margin-top:8px; background:var(--d-wave-y) repeat-x left center/48px 10px}
.author-lede{margin-top:16px; font-size:15.5px; color:var(--ink-soft); max-width:60ch}
.author-companies{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px}
.author-companies-label{font-size:13px; color:var(--ink-faint)}
.stat-list{display:grid; gap:20px; border-left:1px solid var(--line); padding-left:36px}
.stat-item{display:flex; align-items:center; gap:14px}
.stat-item .ic{width:46px; height:46px}
.stat-item .ic .ico{width:22px; height:22px}
.stat-num{font:800 26px/1.1 var(--font-head); font-variant-numeric:tabular-nums}
.stat-label{font-size:13px; color:var(--ink-faint); line-height:1.35; margin-top:2px}

/* ---------- problem ---------- */
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cols-4{grid-template-columns:1fr} }
.cell{padding:28px 24px}
.cell .ic{margin-bottom:18px}
.cell h3{font-size:18px; margin-bottom:8px}
.cell p{font-size:14.5px; color:var(--ink-soft); line-height:1.5}
.cell.hot{background:var(--yellow-soft)}

/* ---------- solution ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:860px){ .compare{grid-template-columns:1fr} }
.compare-card{position:relative; border-radius:var(--r-lg); padding:36px}
.compare-card.no{background:var(--paper); border:2px dashed #D8D0C0}
.compare-card.yes{background:var(--blue); color:#fff; box-shadow:var(--shadow-pop)}
.compare-card.yes .d-aster{width:38px; height:38px; top:22px; right:24px}
.compare-title{font:800 22px var(--font-head); margin-bottom:22px}
.compare-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.compare-list li{display:flex; gap:12px; align-items:flex-start; font-size:16px}
.compare-card.no .compare-list li{color:var(--ink-soft)}
.compare-card.yes .compare-list li{color:#EEF3FF}
.compare-list .ico{width:22px; height:22px; margin-top:2px; stroke-width:2.6}
.compare-card.no .compare-list .ico{stroke:var(--red)}
.compare-card.yes .compare-list .ico{stroke:var(--yellow)}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
@media (max-width:1100px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:30px} }
@media (max-width:640px){ .steps{grid-template-columns:1fr} }
.step{position:relative}
.step .ic{width:64px; height:64px}
.step .ic .ico{width:28px; height:28px}
.step h3{font-size:17px; margin:16px 0 8px}
.step h3 span{color:var(--blue); margin-right:6px}
.step p{font-size:14px; color:var(--ink-soft); line-height:1.5}
@media (min-width:1101px){
  .step:not(:last-child)::after{content:""; position:absolute; top:32px; left:78px; width:calc(100% - 70px); border-top:2px dashed var(--blue); opacity:.6}
}

/* ---------- courses ---------- */
.courses-wrap{position:relative}
.courses-wrap .d-brush{width:70px; height:128px; left:-72px; top:6px}
@media (max-width:1400px){ .courses-wrap .d-brush{display:none} }
.course-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:1100px){ .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .course-grid{grid-template-columns:1fr} }
.course-card{border-radius:var(--r-md); padding:26px; display:flex; flex-direction:column; min-height:230px}
.course-card .cic{width:50px; height:50px; border-radius:16px; background:rgba(255,255,255,.55); display:grid; place-items:center}
.course-card h3{font-size:19px; margin:18px 0 8px}
.course-card p{font-size:14.5px; line-height:1.5}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:18px}
.pill{display:inline-flex; align-items:center; border:1.5px solid currentColor; border-radius:999px; padding:4px 12px; font:800 11.5px var(--font-head)}
.cc-yellow{background:var(--yellow); color:var(--ink)}
.cc-blue{background:var(--blue); color:#fff}
.cc-blue .cic{background:rgba(255,255,255,.2)}
.cc-red{background:var(--red); color:#fff}
.cc-red .cic{background:rgba(255,255,255,.2)}
.cc-soft{background:var(--blue-soft); color:var(--blue-dark)}
.cc-cream{background:var(--yellow-soft); color:#5E4300}
.cc-pink{background:var(--red-soft); color:#8E2418}

/* ---------- results ---------- */
.results{
  position:relative; background:var(--blue-soft); border-radius:var(--r-lg); padding:38px;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr); gap:30px; align-items:center;
}
@media (max-width:1100px){ .results{grid-template-columns:1fr 1fr} .results > .results-head{grid-column:1/-1} }
@media (max-width:640px){ .results{grid-template-columns:1fr; padding:26px} }
.results .d-smile{width:56px; height:56px; right:22px; top:-18px; background-color:var(--bg); border-radius:50%}
.results .d-star{width:60px; height:60px; right:-14px; bottom:-18px}
.results-head .h2{font-size:clamp(26px,2.6vw,34px)}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:420px){ .stat-grid{grid-template-columns:1fr} }
.stat-card{background:var(--paper); border-radius:20px; padding:22px 20px}
.stat-card .stat-num{font-size:34px; color:var(--blue)}
.stat-card .stat-label{font-size:13.5px; color:var(--ink-soft); margin-top:8px}
.chart-card{background:var(--paper); border-radius:24px; padding:24px}
.chart-card h3{font-size:15px; margin-bottom:20px; line-height:1.3}
.bars{display:flex; align-items:flex-end; gap:12px; height:170px}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; justify-content:flex-end; min-width:0}
.bar{width:100%; border-radius:10px 10px 4px 4px; background:#D9D3C6}
.bar.fill{background:var(--blue)}
.bar.deep{background:var(--yellow)}
.bar-label{font:700 12px var(--font-head); color:var(--ink-soft); text-align:center}
.grow-bar{transform:scaleY(0); transform-origin:bottom}
.grow-bar.in{transform:scaleY(1)}
.results-note{grid-column:1/-1; font-size:13.5px; color:var(--ink-soft); max-width:90ch}

/* ---------- features ---------- */
.cols-4.feat{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .cols-4.feat{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cols-4.feat{grid-template-columns:1fr} }
.feat .cell{padding:24px 22px}
.feat .cell .ic{width:46px; height:46px; margin-bottom:14px}
.feat .cell .ic .ico{width:22px; height:22px}
.feat .cell h3{font-size:16.5px}
.feat .cell p{font-size:14px}

/* ---------- pricing ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
@media (max-width:900px){ .pricing-grid{grid-template-columns:1fr} }
.price-card{position:relative; border-radius:var(--r-lg); padding:34px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow)}
.price-card.p-blue{background:var(--blue); color:#fff}
.price-card.p-yellow{background:var(--yellow); color:var(--ink)}
.price-card.p-soft{background:var(--blue-soft); color:var(--ink)}
.price-card .pill{align-self:flex-start; border-color:var(--red); color:var(--red)}
.price-tag{font:800 12.5px var(--font-head); letter-spacing:.07em; text-transform:uppercase; opacity:.8; margin-top:10px}
.price-value{font:800 clamp(24px,2.3vw,30px)/1.15 var(--font-head); margin-top:6px; overflow-wrap:break-word}
.price-unit{font-size:14px; opacity:.85; margin-top:2px}
.price-desc{margin-top:16px; font-size:14.5px; line-height:1.5}
.p-blue .price-desc, .p-blue .price-unit{color:#E4EDFF; opacity:1}

.renewal{
  position:relative; margin-top:22px; background:var(--yellow-soft); border:2px solid var(--yellow); border-radius:var(--r-lg); padding:40px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; align-items:center;
}
@media (max-width:900px){ .renewal{grid-template-columns:1fr; padding:28px} }
.renewal h3{font-size:clamp(21px,2.3vw,28px); margin-top:12px}
.renewal-copy p{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.6; max-width:48ch}
.renewal-copy p strong{color:var(--ink)}
.renewal .eyebrow{color:var(--ink)}
.renewal-steps{display:flex; flex-direction:column; gap:12px}
.renewal-step{display:flex; gap:14px; align-items:flex-start; background:var(--paper); border-radius:18px; padding:16px 18px}
.renewal-num{flex:none; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font:800 13px var(--font-head)}
.renewal-step strong{display:block; font:800 14.5px var(--font-head); margin-bottom:3px}
.renewal-step p{font-size:13.5px; color:var(--ink-soft); line-height:1.45}

.terms{margin-top:22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px}
.terms h3{font-size:20px; margin-bottom:20px}
.terms-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 36px}
@media (max-width:760px){ .terms-list{grid-template-columns:1fr} .terms{padding:26px} }
.terms-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft); line-height:1.5}
.terms-list .ico{width:20px; height:20px; margin-top:2px; stroke:var(--blue); stroke-width:2.8}

/* ---------- faq ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:border-color .2s ease}
.faq-item[open]{border-color:var(--blue)}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer;
  font:800 16.5px/1.3 var(--font-head); list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.plus{flex:none; position:relative; width:30px; height:30px; border-radius:50%; background:var(--bg); border:1.5px solid var(--ink); transition:transform .25s ease, background-color .2s ease}
.plus::before,.plus::after{content:""; position:absolute; left:50%; top:50%; background:var(--ink); transform:translate(-50%,-50%)}
.plus::before{width:12px; height:2px}
.plus::after{width:2px; height:12px}
.faq-item[open] .plus{transform:rotate(45deg); background:var(--yellow)}
.faq-a{padding:0 24px 22px; color:var(--ink-soft); font-size:15.5px; max-width:68ch}

.wa-note{margin-top:22px; background:var(--blue-soft); border-radius:var(--r-md); padding:22px 26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.wa-icon{flex:none; width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center}
.wa-copy{flex:1 1 240px; min-width:0}
.wa-copy strong{display:block; font:800 16px var(--font-head); margin-bottom:2px}
.wa-copy p{font-size:14px; color:var(--ink-soft); line-height:1.45}
@media (max-width:560px){ .wa-note .btn{width:100%} }

/* ---------- final CTA ---------- */
.cta-banner{
  position:relative; overflow:hidden; background:var(--blue); color:#fff; border-radius:var(--r-lg);
  padding:64px 56px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px; align-items:center;
}
@media (max-width:900px){ .cta-banner{grid-template-columns:1fr; padding:44px 26px} }
.cta-banner .eyebrow{color:#CFE0FF}
.cta-banner h2{color:#fff; font-size:clamp(30px,3.8vw,50px); margin-top:14px; max-width:19ch}
.cta-banner h2 .script{display:inline-block; font:700 1.35em/1 var(--font-script); letter-spacing:0; color:var(--yellow)}
.cta-banner p{margin-top:16px; color:#E4EDFF; max-width:50ch; font-size:17px}
.cta-banner .hero-actions{margin-top:28px}
.cta-art{position:relative; min-height:200px}
.cta-art .d-rocket{width:100%; height:100%; min-height:200px; left:0; top:0}
.cta-art .d-cloud{width:96px; height:54px; left:6%; top:2%; opacity:.9}
.cta-art .d-cloud.c2{width:80px; height:46px; left:auto; right:2%; top:auto; bottom:6%}
.cta-art .d-aster{width:30px; height:30px; right:18%; top:8%}
@media (max-width:900px){ .cta-art{display:none} }

/* ---------- footer ---------- */
.site-footer{padding:44px 0 36px}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap; padding-top:34px; border-top:1px solid var(--line)}
.foot-note{margin-top:12px; font-size:13.5px; color:var(--ink-faint); max-width:46ch}
.foot-links{display:flex; gap:26px; flex-wrap:wrap}
.foot-links a{text-decoration:none; font:700 14.5px var(--font-head); color:var(--ink-soft)}
.foot-links a:hover{color:var(--red)}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
  .js .reveal.in{opacity:1; transform:none}
  .grow-bar{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .ring-progress{transition:stroke-dashoffset 1s ease .1s}
}

/* ---------- apply modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(21,19,15,.6); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:200;
}
.modal-overlay[hidden]{display:none}
.modal-card{
  position:relative; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius:var(--r-lg); padding:40px 34px; box-shadow:var(--shadow-pop);
  animation:modal-in .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes modal-in{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}}
@media (max-width:560px){ .modal-card{padding:30px 22px} }
.modal-card h3{font-size:clamp(20px,2.6vw,25px); margin-top:12px}
.modal-sub{margin-top:12px; font-size:14.5px; color:var(--ink-soft); line-height:1.5}
.modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--ink); color:var(--ink); cursor:pointer; display:grid; place-items:center;
}
.modal-close:hover{background:var(--yellow)}
.modal-close .ico{width:18px; height:18px}
#applyForm{display:flex; flex-direction:column; gap:14px; margin-top:24px}
#applyForm label{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-soft)}
#applyForm input,#applyForm textarea{
  font:inherit; font-size:15px; color:var(--ink); background:var(--bg);
  border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; resize:vertical; transition:border-color .15s ease;
}
#applyForm input:focus,#applyForm textarea:focus{outline:none; border-color:var(--blue)}
#applyForm .btn{margin-top:6px; width:100%}
.modal-note{font-size:13px; color:var(--blue-dark); text-align:center}

.hero-grid > *, .split > *, .author > *, .cta-banner > *, .results > *, .renewal > *{min-width:0}

/* ---------- скриншоты кабинета: рамка, первый экран, блок «Кабинет руководителя» ---------- */
.shot{margin:0; background:var(--paper); border:2px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-pop)}
.shot[data-zoom]{cursor:zoom-in}
.shot-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#F1ECE0; border-bottom:2px solid var(--ink)}
.shot-bar i{width:9px; height:9px; border-radius:50%; background:var(--red)}
.shot-bar i:nth-child(2){background:var(--yellow)}
.shot-bar i:nth-child(3){background:var(--blue)}
.shot-bar span{margin-left:8px; font:700 12px var(--font-head); color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shot img{display:block; width:100%; height:auto}

.hero-panel--shots{padding:44px 30px 64px}
.shot-stack{position:relative; width:100%}
.shot-second{position:absolute; width:58%; left:-26px; bottom:-52px; transform:rotate(-2deg)}
.hero-panel--shots .sticker{bottom:-30px}
@media (max-width:560px){
  .hero-panel--shots{padding:26px 14px 70px}
  .shot-second{width:60%; left:-6px; bottom:-60px}
  .hero-panel--shots .sticker{bottom:-34px}
}

.show-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:48px; align-items:center; margin-bottom:64px}
.show-row.rev{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.show-row.rev .show-text{order:2}
.show-row > *{min-width:0}
@media (max-width:900px){
  .show-row, .show-row.rev{grid-template-columns:minmax(0,1fr); gap:24px; margin-bottom:44px}
  .show-row.rev .show-text{order:0}
}
.show-num{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--yellow); font:800 15px var(--font-head)}
.show-text h3{font-size:clamp(22px,2.2vw,28px); margin:14px 0 18px}
.tick-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.tick-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft); line-height:1.5}
.tick-list .ico{width:20px; height:20px; margin-top:2px; stroke:var(--blue); stroke-width:2.8}
.show-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px}

.lightbox{position:fixed; inset:0; z-index:300; background:rgba(21,19,15,.82); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1600px,100%); max-height:100%; border-radius:14px; background:#fff; box-shadow:var(--shadow-pop)}
.lightbox-close{position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; border:2px solid var(--ink); background:var(--yellow); color:var(--ink); font:800 22px/1 var(--font-head); cursor:pointer}

/* ---------- v3: короткий лендинг на личном бренде ---------- */
.hero-proof{margin-top:28px}
.hp{position:relative; margin:0 auto; width:min(440px,100%); padding:18px 0 64px}
.hp::before{content:""; position:absolute; left:-34px; top:84px; width:48%; height:34%; background:var(--yellow); border-radius:34px 70px 34px 76px; transform:rotate(-16deg)}
.hp-circle{
  position:relative; z-index:1; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--blue) 0%,#6C9CF4 100%); box-shadow:0 0 0 6px var(--bg), 0 0 0 10px var(--ink);
}
.hp-mono{font:700 170px/1 var(--font-script); color:rgba(255,255,255,.92)}
.hp-circle img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 6%; background:#fff; transform:scale(1.28); transform-origin:50% 24%}
.hp-name{
  position:absolute; z-index:3; left:-8px; bottom:14px; background:var(--paper); border:1.5px solid var(--ink); border-radius:18px;
  padding:11px 18px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow); transform:rotate(-2deg);
}
.hp-name b{font:800 17px/1.1 var(--font-head)}
.hp-name span{font-size:12.5px; color:var(--ink-faint)}
.hp .sticker{right:-6px; bottom:-6px; max-width:220px}
.hp .d-aster{width:56px; height:56px; right:-4px; top:6px}
.hp .d-star{width:46px; height:46px; left:4px; top:26px}
.hp .d-dots{width:58px; height:58px; right:14%; bottom:56px; opacity:.8; z-index:0}
@media (max-width:1000px){ .hp{margin-top:14px} }
@media (max-width:560px){ .hp{padding-bottom:84px} .hp-name{left:0} .hp .sticker{right:0; bottom:0; max-width:206px; font-size:14px} .hp-mono{font-size:120px} }

.cols-4.feat.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .cols-4.feat.why-grid{grid-template-columns:1fr} }

.demo-wrap{max-width:1020px; margin:0 auto}
.demo-frame{margin:0; background:var(--paper); border:2px solid var(--ink); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-pop); cursor:zoom-in}
.demo-frame img{width:100%; height:auto}
.demo-actions{justify-content:center; margin-top:30px}

.program{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:40px; align-items:center}
.program-num b{display:block; font:800 clamp(72px,9vw,116px)/1 var(--font-head); color:var(--blue); letter-spacing:-.04em}
.program-num span{display:block; margin-top:10px; font-size:16px; color:var(--ink-soft); max-width:26ch}
.program-tags{display:flex; flex-wrap:wrap; gap:12px}
.program-tags .chip{padding:11px 20px; font-size:15px}
@media (max-width:800px){ .program{grid-template-columns:1fr; gap:18px} }

.price-foot{margin-top:22px; font-size:15px; color:var(--ink-soft); max-width:70ch}
@media (max-width:1000px){
  .hero-grid .hp{order:-1; width:min(290px,76vw); margin-top:0; padding:10px 0 78px}
  .hp-mono{font-size:104px}
  .hp-name{left:-6px; bottom:96px; padding:9px 14px}
  .hp .sticker{right:-8px; bottom:0; max-width:190px; font-size:13px; padding:12px 14px}
}

.proof-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.proof-grid .stat-card{background:var(--paper); border:1.5px solid var(--line); box-shadow:var(--shadow)}
.proof-grid .stat-num{font-size:clamp(28px,3vw,38px); white-space:nowrap}
@media (max-width:900px){ .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .proof-grid .stat-card{padding:18px 14px} .proof-grid .stat-num{font-size:26px} }

/* v3c: порядок «предложение, почему у меня, как это работает» */
.hero-panel--one{min-height:0; padding:34px 28px 40px; display:block}
.hero-panel--one .demo-frame{position:relative; z-index:1; box-shadow:0 18px 40px -22px rgba(21,19,15,.5)}
.hero-panel--one .d-aster{width:46px; height:46px; top:-16px; right:26px}
.hero-panel--one .d-star{width:42px; height:42px; left:18px; top:-18px; filter:none}
.hero-panel--one .sticker{right:-10px; bottom:-26px; max-width:210px}
.author-v3{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:center; margin-bottom:34px}
.author-v3 .hp{width:min(360px,100%)}
.hp--plain .sticker{display:none}
.hp--plain{padding-bottom:30px}
.hp--plain .hp-name{bottom:6px}
.tick-list{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px}
.tick-list li{position:relative; padding-left:34px; font-size:16.5px; color:var(--ink-soft); line-height:1.45}
.tick-list li::before{content:""; position:absolute; left:0; top:2px; width:22px; height:22px; background:var(--d-tick) no-repeat center/contain}
.tick-list b{color:var(--ink)}
.step-n{font:800 22px/1 var(--font-head)}
@media (max-width:900px){ .author-v3{grid-template-columns:1fr; gap:26px} .author-v3 .hp{margin:0 auto} }
@media (max-width:560px){ .hero-panel--one{padding:26px 16px 40px} }
.tick-list li{display:block}
.tick-list li b{display:inline}

.bonus-list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.bonus-list li{position:relative; display:block; padding-left:28px; font:600 14.5px/1.35 var(--font-body); color:var(--ink)}
.bonus-list li::before{content:""; position:absolute; left:0; top:1px; width:18px; height:18px; background:var(--d-tick) no-repeat center/contain}

/* ---------- юридические блоки, согласие, реквизиты ---------- */
.todo{background:#FFE680; color:#15130F; padding:1px 6px; border-radius:6px; font-weight:700}
.consent{display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; font-size:13px; line-height:1.4; color:var(--ink-soft); cursor:pointer}
.consent input{width:20px; height:20px; flex:none; margin:1px 0 0; accent-color:var(--blue); cursor:pointer}
.consent a{color:var(--blue-dark); text-decoration:underline}
.price-vat{margin-top:18px; font-size:15px; color:var(--ink)}
.foot-legal{margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--ink-faint); max-width:70ch}
.legal-page{padding:36px 0 56px}
.legal{max-width:820px}
.legal-title{font-size:clamp(30px,4vw,44px); margin-top:12px}
.legal-ed{margin-top:8px; font:700 13px var(--font-head); color:var(--ink-faint)}
.legal-lead{margin-top:18px; padding:16px 18px; background:var(--blue-soft); border-radius:18px; font-size:16px}
.legal-warn{margin-top:16px; padding:12px 16px; background:var(--red-soft); border:2px solid var(--red); border-radius:14px; font:700 14px var(--font-body); color:#9A2A1E}
.legal h2{font-size:21px; margin:30px 0 10px}
.legal p{margin:0 0 10px; font-size:15.5px; line-height:1.6; color:var(--ink-soft)}
.legal ul{margin:0 0 12px; padding-left:22px; display:grid; gap:6px; font-size:15.5px; line-height:1.55; color:var(--ink-soft)}
.legal-back{margin-top:32px}