@import url('../fonts/inter.css');

/* ============================================================
   МАМАТОВ · mamatov.biz — design system
   Светлая тема. Строгая типографика. Без курсивов.
   ============================================================ */

:root{
  color-scheme: light;

  --bg:        #FFFFFF;
  --surface:   #F4F6F8;
  --surface-2: #EAEEF2;
  --line:      #E1E6EC;
  --line-2:    #CFD6DF;

  --ink:       #0D1117;
  --ink-2:     #4E5764;
  --ink-3:     #858E9B;

  --graphite:  #11161D;
  --graphite-2:#1B222C;

  --accent:    #B4F23C;
  --accent-dk: #7FB50E;
  --blue:      #2F6FED;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(13,17,23,.05);
  --shadow:    0 2px 4px rgba(13,17,23,.04), 0 8px 24px rgba(13,17,23,.06);
  --shadow-lg: 0 4px 8px rgba(13,17,23,.05), 0 24px 60px rgba(13,17,23,.10);

  --maxw: 1200px;
  --pad:  24px;
  --sec:  104px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  font-feature-settings:'liga' 1,'kern' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* строгий шрифт — никаких курсивов нигде */
i,em,cite,dfn,address,var{ font-style:normal; }

img,svg,video{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,h5{
  margin:0;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:72px; }
.section--surface{ background:var(--surface); }
.section--dark{ background:var(--graphite); color:#EEF1F5; }

/* ---------- section heading ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow::before{ content:''; width:22px; height:3px; background:var(--accent); border-radius:2px; flex:none; }
.section--dark .eyebrow{ color:#9AA5B4; }

.s-head{ max-width:790px; margin-bottom:52px; }
.s-head h2{ font-size:clamp(30px,4.2vw,50px); margin-top:18px; }
.s-head .lead{ margin-top:20px; font-size:clamp(16px,1.5vw,18.5px); color:var(--ink-2); line-height:1.62; max-width:690px; }
.section--dark .s-head .lead{ color:#A9B3C0; }
.s-head--center{ margin-inline:auto; text-align:center; }
.s-head--center .eyebrow{ justify-content:center; }
.s-head--center .lead{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:999px; border:1.5px solid transparent;
  font-size:15px; font-weight:650; letter-spacing:-.01em; line-height:1;
  cursor:pointer; transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.btn svg{ flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--graphite); color:#fff; box-shadow:var(--shadow); }
.btn--primary:hover{ background:#000; box-shadow:var(--shadow-lg); }

.btn--accent{ background:var(--accent); color:var(--ink); }
.btn--accent:hover{ background:#C4FB57; box-shadow:0 10px 30px rgba(180,242,60,.45); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--bg); }
.section--dark .btn--ghost,
.cta .btn--ghost,
.hook .btn--ghost{ color:#EEF1F5; border-color:#39424F; }
.section--dark .btn--ghost:hover,
.cta .btn--ghost:hover,
.hook .btn--ghost:hover{ border-color:#7C8899; background:rgba(255,255,255,.04); }

.btn--sm{ padding:11px 19px; font-size:14px; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(13,17,23,.05); }
.hdr__in{ display:flex; align-items:center; gap:28px; height:70px; }

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo__mark{
  width:34px; height:34px; border-radius:9px; background:var(--graphite);
  display:grid; place-items:center; color:var(--accent);
  font-weight:800; font-size:15px; letter-spacing:-.04em;
}
.logo__txt{ display:flex; flex-direction:column; line-height:1.15; }
.logo__name{ font-size:14.5px; font-weight:750; letter-spacing:-.02em; }
.logo__sub{ font-size:10.5px; font-weight:550; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }

.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{
  padding:9px 12px; border-radius:8px; font-size:14.5px; font-weight:550; color:var(--ink-2);
  transition:color .15s ease, background .15s ease;
}
.nav a:hover{ color:var(--ink); background:var(--surface); }

.hdr__cta{ flex:none; }

.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:11px;
  background:var(--bg); cursor:pointer; padding:0; place-items:center; margin-left:auto;
}
.burger span{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.burger span+span{ margin-top:4.5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

.mnav{
  display:none; border-top:1px solid var(--line); background:var(--bg);
  padding:12px var(--pad) 22px; max-height:calc(100dvh - 70px); overflow-y:auto;
}
.mnav.is-open{ display:block; }
.mnav a{ display:block; padding:13px 4px; font-size:16px; font-weight:600; border-bottom:1px solid var(--line); }
.mnav a:last-of-type{ border-bottom:0; }
.mnav .btn{ width:100%; margin-top:16px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(22px,3vw,42px) 0; }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:40px; align-items:end; }
/* текст прижат к верху: заголовок и кнопки не должны уезжать за первый экран */
.hero__copy{ align-self:start; padding-top:clamp(4px,1.4vw,22px); padding-bottom:40px; }
.hero h1{ font-size:clamp(34px,4.5vw,58px); margin-top:18px; letter-spacing:-.042em; }
.hero h1 .hl{ position:relative; display:inline-block; }
.hero h1 .hl::after{
  content:''; position:absolute; left:-.06em; right:-.06em; bottom:-.05em; height:.84em;
  background:var(--accent); border-radius:6px; z-index:0;
}
.hero h1 .hl > span{ position:relative; z-index:1; }
.hero__lead{ margin-top:22px; font-size:clamp(15.5px,1.35vw,17.5px); line-height:1.6; color:var(--ink-2); max-width:530px; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__note{ margin-top:18px; font-size:13.5px; color:var(--ink-3); display:flex; align-items:center; gap:9px; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-dk); flex:none; box-shadow:0 0 0 3px rgba(180,242,60,.28); }

.hero__vis{ position:relative; align-self:end; }
.hero__stage{ position:relative; display:grid; place-items:end center; min-height:clamp(360px,40vw,520px); }
.hero__stage::before{
  content:''; position:absolute; inset:auto 0 0 0; height:84%;
  background:linear-gradient(170deg,var(--surface) 0%, var(--surface-2) 100%);
  border-radius:210px 210px 26px 26px;
}
.hero__stage::after{
  content:''; position:absolute; left:50%; bottom:0; width:min(96%,470px); height:60%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%, rgba(180,242,60,.32), rgba(180,242,60,0) 68%);
}
/* высоту задаём от экрана — так первый экран не перерастает вьюпорт */
.hero__photo{
  position:relative; z-index:2;
  height:clamp(430px,56vh,620px); width:auto; max-width:100%;
  filter:drop-shadow(0 26px 42px rgba(13,17,23,.18));
}

.chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 15px 9px 10px; font-size:13px; font-weight:650; letter-spacing:-.01em;
  box-shadow:var(--shadow); white-space:nowrap;
}
.chip i{ width:24px; height:24px; border-radius:50%; background:var(--surface); display:grid; place-items:center; flex:none; color:var(--ink); }
.chip i svg{ width:13px; height:13px; }
.chip--dark{ background:var(--graphite); color:#fff; border-color:var(--graphite); }
.chip--dark i{ background:var(--accent); color:var(--ink); }
.chip--1{ top:11%;  left:-5%; }
.chip--2{ top:37%;  right:-7%; }
.chip--3{ bottom:25%; left:-10%; }
.chip--4{ bottom:7%; right:-3%; }

/* ---------- stat strip ---------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:34px 30px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__n{ font-size:clamp(28px,3.3vw,42px); font-weight:800; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.stat__n small{ font-size:.46em; font-weight:700; letter-spacing:-.02em; margin-left:3px; }
.stat__l{ margin-top:12px; font-size:13.5px; line-height:1.45; color:var(--ink-2); }

/* ---------- marquee ---------- */
.marq{ background:var(--graphite); color:#fff; padding:17px 0; overflow:hidden; }
.marq__track{ display:flex; width:max-content; animation:marq 48s linear infinite; }
.marq:hover .marq__track{ animation-play-state:paused; }
.marq__grp{ display:flex; align-items:center; flex:none; }
.marq__grp span{ display:flex; align-items:center; font-size:14.5px; font-weight:600; padding-inline:20px; white-space:nowrap; }
.marq__grp span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-left:20px; }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marq__track{ animation:none; } }

/* ---------- card grids ---------- */
.grid{ display:grid; gap:20px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card--hover:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.card h3{ font-size:19.5px; letter-spacing:-.025em; }
.card p{ margin-top:11px; font-size:14.8px; line-height:1.6; color:var(--ink-2); }
/* заголовки услуг занимают одинаковую высоту — абзацы начинаются на одной линии */
@media (min-width:901px){ .g-3 > .card > h3{ min-height:2.16em; } }

.ico{
  width:46px; height:46px; border-radius:13px; background:var(--surface);
  display:grid; place-items:center; color:var(--ink); margin-bottom:20px;
  transition:background .18s ease, color .18s ease;
}
.ico svg{ width:22px; height:22px; }
.card--hover:hover .ico{ background:var(--accent); }
.ico--dark{ background:var(--graphite); color:var(--accent); }

/* ---------- problem ---------- */
.prob{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.prob__item{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; display:flex; gap:20px; }
.prob__no{
  flex:none; width:38px; height:38px; border-radius:11px; background:var(--surface-2);
  display:grid; place-items:center; font-size:13px; font-weight:750; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.prob__item h3{ font-size:18.5px; }
.prob__item p{ margin-top:10px; font-size:14.8px; color:var(--ink-2); line-height:1.6; }

/* ---------- steps ---------- */
.steps{ border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:96px minmax(0,1fr) minmax(0,.85fr); gap:34px;
  padding:38px 0; border-bottom:1px solid var(--line); align-items:start;
}
.step__no{ font-size:44px; font-weight:800; letter-spacing:-.05em; line-height:.9; color:var(--surface-2); font-variant-numeric:tabular-nums; }
.step:hover .step__no{ color:var(--ink); transition:color .2s ease; }
.step__main h3{ font-size:24px; letter-spacing:-.03em; }
.step__time{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:13px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  background:var(--surface); border-radius:999px; padding:6px 12px;
}
.step__main p{ margin-top:13px; font-size:15.5px; line-height:1.62; color:var(--ink-2); max-width:530px; }
.step__art{ padding-top:4px; }
.step__art b{ display:block; font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:13px; }
.step__art li{ font-size:14.2px; color:var(--ink-2); padding-left:22px; position:relative; margin-bottom:9px; line-height:1.45; }
.step__art li::before{ content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:3px; background:var(--accent); }

/* ---------- products ---------- */
.hook{
  background:var(--graphite); color:#fff; border-radius:var(--r-xl);
  padding:clamp(32px,4vw,52px); margin-bottom:44px;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:44px; align-items:center;
}
.hook h3{ font-size:clamp(23px,2.8vw,33px); letter-spacing:-.035em; }
.hook p{ margin-top:16px; font-size:16px; line-height:1.62; color:#A9B3C0; }
.hook__list li{
  display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-top:1px solid #262E3A;
  font-size:14.8px; line-height:1.5; color:#D5DBE3;
}
.hook__list li:first-child{ border-top:0; padding-top:0; }
.hook__list svg{ width:19px; height:19px; flex:none; color:var(--accent); margin-top:1px; }

.prod{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  display:flex; flex-direction:column; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.prod:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.prod__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.prod__ico{ width:44px; height:44px; border-radius:12px; background:var(--graphite); color:var(--accent); display:grid; place-items:center; flex:none; }
.prod__ico svg{ width:21px; height:21px; }
.tag{
  font-size:10.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:var(--surface); color:var(--ink-2); white-space:nowrap;
}
.tag--accent{ background:var(--accent); color:var(--ink); }
.tag--free{ background:#E4F6CE; color:#3C6300; }
.prod h3{ font-size:18px; letter-spacing:-.025em; }
.prod p{ margin-top:10px; font-size:14.2px; line-height:1.58; color:var(--ink-2); flex:1; }
.prod__meta{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:7px; }
.pill{ font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface); border-radius:7px; padding:5px 9px; }

/* ---------- device mock ---------- */
.device{ position:relative; border-radius:22px; background:var(--graphite); padding:11px; box-shadow:var(--shadow-lg); }
.device::after{
  content:''; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:64px; height:3px; border-radius:2px; background:rgba(255,255,255,.22);
}
.device__screen{ border-radius:13px; overflow:hidden; background:#fff; }
.device__screen svg{ width:100%; height:auto; display:block; }

/* ---------- flagship ---------- */
.flag{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:56px; align-items:center; }
.flag__pot{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 26px; background:var(--bg);
  margin:26px 0 28px; display:flex; gap:22px; align-items:center;
}
.flag__pot .n{ font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-.045em; line-height:1; white-space:nowrap; }
.flag__pot p{ font-size:14.2px; color:var(--ink-2); line-height:1.5; }
.flag__inc li{ display:flex; gap:15px; padding:16px 0; border-top:1px solid var(--line); }
.flag__inc li:first-child{ border-top:0; }
.flag__inc b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.015em; margin-bottom:4px; }
.flag__inc span{ font-size:14.2px; color:var(--ink-2); line-height:1.55; }
.flag__inc i{ width:32px; height:32px; border-radius:9px; background:var(--surface); color:var(--ink); display:grid; place-items:center; flex:none; }
.flag__inc i svg{ width:16px; height:16px; }

/* ---------- lead magnets ---------- */
.lm{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.lm__card{
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg);
  padding:32px; display:flex; flex-direction:column; gap:24px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.lm__card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:var(--line-2); }
.lm__card .btn{ margin-top:auto; }
.lm__card h3{ font-size:22px; letter-spacing:-.03em; }
.lm__card p{ margin-top:12px; font-size:14.8px; line-height:1.6; color:var(--ink-2); }
.lm__vis{ border-radius:var(--r); overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.lm__vis svg{ width:100%; height:auto; display:block; }

/* ---------- cases ---------- */
.case{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  display:flex; flex-direction:column; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.case:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.case__n{ font-size:clamp(30px,3.6vw,40px); font-weight:800; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.case__n small{ font-size:.42em; font-weight:700; letter-spacing:-.01em; }
.case h3{ font-size:17.5px; margin-top:14px; letter-spacing:-.02em; }
.case__org{ margin-top:9px; font-size:12px; font-weight:650; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }
.ba{ margin-top:18px; display:grid; gap:11px; }
.ba__row{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:start; }
.ba__k{ font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding-top:2px; }
.ba__v{ font-size:14px; line-height:1.5; color:var(--ink-2); }
.ba__row--after .ba__k{ color:var(--accent-dk); }
.ba__row--after .ba__v{ color:var(--ink); font-weight:550; }
.case__tools{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:7px; }

/* ---------- timeline ---------- */
.tl{ border-top:1px solid #262E3A; }
.tl__row{
  display:grid; grid-template-columns:210px minmax(0,1fr) minmax(0,.8fr); gap:36px;
  padding:36px 0; border-bottom:1px solid #262E3A; align-items:start;
}
.tl__when{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.tl__where{ margin-top:9px; font-size:13.5px; color:#8C95A3; }
.tl__row h3{ font-size:23px; letter-spacing:-.03em; color:#fff; }
.tl__role{ margin-top:8px; font-size:14.5px; font-weight:650; color:#C3CBD5; }
.tl__row p{ margin-top:14px; font-size:14.8px; line-height:1.6; color:#99A3B1; }
.tl__kpi li{ font-size:14px; color:#C3CBD5; padding-left:20px; position:relative; margin-bottom:10px; line-height:1.45; }
.tl__kpi li::before{ content:''; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:3px; background:var(--accent); }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.split--wide{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }

.chk li{ display:flex; gap:13px; padding:12px 0; font-size:15.2px; line-height:1.55; color:var(--ink-2); border-top:1px solid var(--line); }
.chk li:first-child{ border-top:0; }
.chk svg{ width:19px; height:19px; flex:none; color:var(--accent-dk); margin-top:2px; }
.section--dark .chk li{ color:#B4BDC9; border-top-color:#262E3A; }
.section--dark .chk svg{ color:var(--accent); }

/* ---------- industries ---------- */
.ind{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ind__i{
  border:1px solid var(--line); border-radius:var(--r); padding:22px 14px; text-align:center; background:var(--bg);
  transition:border-color .18s ease, transform .18s ease;
}
.ind__i:hover{ border-color:var(--ink); transform:translateY(-3px); }
.ind__i svg{ width:26px; height:26px; margin:0 auto 14px; color:var(--ink); }
.ind__i span{ font-size:13.2px; font-weight:600; line-height:1.35; display:block; }

/* ---------- why ---------- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.why__i{ background:var(--bg); padding:32px; }
.why__i .ico{ margin-bottom:18px; }
.why__i h3{ font-size:18.5px; letter-spacing:-.025em; }
.why__i p{ margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:center; }
.about__vis{ position:relative; }
.about__ph{
  position:relative; border-radius:var(--r-xl) var(--r-xl) var(--r) var(--r); overflow:hidden;
  background:linear-gradient(165deg,var(--surface) 0%,var(--surface-2) 100%);
  display:grid; place-items:end center; min-height:430px;
}
.about__ph img{ width:min(100%,350px); position:relative; z-index:2; }
.about__ph::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:84%; height:52%; background:radial-gradient(ellipse at 50% 100%, rgba(180,242,60,.34), rgba(180,242,60,0) 70%);
}
.about__badge{
  position:absolute; right:-18px; bottom:-16px; z-index:3;
  background:var(--graphite); color:#fff; border-radius:var(--r); padding:18px 22px; box-shadow:var(--shadow-lg);
}
.about__badge .n{ font-size:32px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--accent); }
.about__badge span{ display:block; margin-top:7px; font-size:12.5px; color:#A9B3C0; line-height:1.35; max-width:140px; }
.about__body p{ font-size:16px; line-height:1.68; color:var(--ink-2); }
.about__body p+p{ margin-top:16px; }
.skills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.skills span{
  font-size:13px; font-weight:600; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-2); background:var(--bg);
}
.edu{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.edu b{ display:block; font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.edu p{ font-size:14.2px; line-height:1.5; color:var(--ink-2); }

/* ---------- faq ---------- */
.faq{ max-width:860px; margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 48px 26px 0; position:relative;
  font-size:18px; font-weight:650; letter-spacing:-.02em; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:31px; width:12px; height:12px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .22s ease, border-color .22s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); border-color:var(--ink); }
.faq summary:hover::after{ border-color:var(--ink); }
.faq__a{ padding:0 60px 28px 0; font-size:15.5px; line-height:1.66; color:var(--ink-2); margin-top:-6px; }

/* ---------- cta ---------- */
.cta{ background:var(--graphite); color:#fff; border-radius:var(--r-xl); padding:clamp(38px,5vw,68px); position:relative; overflow:hidden; }
.cta::before{
  content:''; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(180,242,60,.20), rgba(180,242,60,0) 66%);
}
.cta__in{ position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
.cta h2{ font-size:clamp(28px,3.6vw,44px); letter-spacing:-.035em; }
.cta p{ margin-top:18px; font-size:16.5px; line-height:1.62; color:#A9B3C0; }
.cta__btns{ display:flex; flex-direction:column; gap:11px; }
.cta__btns .btn{ width:100%; }
.cta__direct{ margin-top:20px; padding-top:20px; border-top:1px solid #262E3A; display:grid; gap:12px; }
.cta__direct a{ display:flex; align-items:center; gap:11px; font-size:14.8px; color:#C3CBD5; transition:color .15s ease; }
.cta__direct a:hover{ color:#fff; }
.cta__direct svg{ width:17px; height:17px; color:var(--accent); flex:none; }

/* ---------- footer ---------- */
.ftr{ background:var(--graphite); color:#8C95A3; padding-block:52px 36px; }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:40px; padding-bottom:38px; border-bottom:1px solid #262E3A; }
.ftr .logo__name{ color:#fff; }
.ftr .logo__sub{ color:#6E7885; }
.ftr__about{ margin-top:18px; font-size:14px; line-height:1.6; max-width:330px; }
.ftr b{ display:block; font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.ftr li{ margin-bottom:11px; }
.ftr li a, .ftr li span{ font-size:14px; color:#8C95A3; transition:color .15s ease; }
.ftr li a:hover{ color:var(--accent); }
.ftr__bot{ padding-top:26px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13px; }

/* ---------- reveal ----------
   Прячем блоки только если JavaScript действительно работает:
   класс .js ставит инлайновый скрипт в <head>. Без него — всё видно сразу. */
.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.js .rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  :root{ --sec:84px; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .ind{ grid-template-columns:repeat(3,1fr); }
  .why{ grid-template-columns:repeat(2,1fr); }
  .step{ grid-template-columns:70px minmax(0,1fr); gap:26px; }
  .step__art{ grid-column:2; padding-top:22px; margin-top:6px; border-top:1px dashed var(--line); }
  .tl__row{ grid-template-columns:170px minmax(0,1fr); gap:26px; }
  .tl__kpi{ grid-column:2; padding-top:20px; border-top:1px dashed #262E3A; }
  .flag, .split, .split--wide, .about, .hook, .cta__in{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .hook{ gap:32px; }
  .nav, .hdr__cta{ display:none; }
  .burger{ display:grid; }
}

@media (max-width:900px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .hero__copy{ padding-bottom:36px; }
  .hero__lead{ max-width:none; }
  .hero__stage{ min-height:430px; }
  .hero__photo{ width:min(76%,330px); height:auto; }
  .chip--1{ top:5%; left:0; }
  .chip--2{ top:29%; right:0; }
  .chip--3{ bottom:27%; left:-2%; }
  .chip--4{ bottom:6%; right:2%; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:26px 20px; border-top:1px solid var(--line); }
  .stat:nth-child(1),.stat:nth-child(2){ border-top:0; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .g-3, .g-2, .prob, .lm{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:680px){
  :root{ --pad:18px; --sec:64px; }
  /* длинные русские подписи кнопок должны переноситься, а не расширять макет */
  .btn{ white-space:normal; text-align:center; line-height:1.28; }
  .g-4{ grid-template-columns:minmax(0,1fr); }
  .ind{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why{ grid-template-columns:minmax(0,1fr); }
  .edu{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .s-head{ margin-bottom:34px; }
  .card,.prod,.case,.prob__item,.why__i,.lm__card{ padding:24px; }
  .step{ grid-template-columns:minmax(0,1fr); gap:0; padding:30px 0; }
  .step__no{ font-size:34px; margin-bottom:14px; color:var(--ink); }
  .step__art{ grid-column:1; }
  .tl__row{ grid-template-columns:minmax(0,1fr); gap:0; padding:30px 0; }
  .tl__when{ margin-bottom:14px; }
  .tl__kpi{ grid-column:1; margin-top:20px; }
  .flag__pot{ flex-direction:column; align-items:flex-start; gap:12px; }
  .ftr__top{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .faq summary{ font-size:16.5px; padding-right:38px; }
  .faq__a{ padding-right:14px; font-size:15px; }
  .about__badge{ right:12px; bottom:14px; padding:14px 17px; }
  .hero__btns .btn{ width:100%; }
  .stat{ padding:22px 16px; }
  .stat:nth-child(even){ padding-right:0; }
}