:root{
  --bg: oklch(99% 0.005 145);
  --surface: oklch(97% 0.008 145);
  --surface-2: oklch(94% 0.012 145);
  --fg: oklch(20% 0.02 165);
  --fg-soft: oklch(38% 0.02 165);
  --muted: oklch(56% 0.015 165);
  --border: oklch(88% 0.01 165);
  --border-strong: oklch(78% 0.015 165);
  --accent: #007200;
  --accent-2: #009B07;
  --accent-soft: oklch(94% 0.06 145);
  --accent-fg: oklch(99% 0.005 145);
  --dark: oklch(22% 0.02 165);
  --dark-fg: oklch(97% 0.008 145);
  --danger: oklch(58% 0.16 25);
  --warn: oklch(72% 0.15 75);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,25,20,0.04), 0 1px 1px rgba(15,25,20,0.03);
  --shadow: 0 8px 24px -8px rgba(15,45,25,0.10), 0 2px 6px rgba(15,45,25,0.04);
  --shadow-lg: 0 24px 60px -20px rgba(0,80,10,0.18), 0 6px 18px rgba(15,45,25,0.06);
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --container: 1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top: 84px;}
body{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{display:block;max-width:100%;}
button{font: inherit; cursor: pointer;}
a{color: inherit; text-decoration: none; cursor: pointer;}
h1,h2,h3,h4{font-family: var(--font-display); font-weight: 700; color: var(--fg); margin: 0;}
h1{font-size: clamp(38px, 5vw, 60px); line-height:1.05; letter-spacing:-0.02em;}
h2{font-size: clamp(30px, 3.6vw, 44px); line-height:1.12; letter-spacing:-0.015em;}
h3{font-size: 20px; line-height:1.3; letter-spacing:-0.005em;}
p{margin:0;}
.container{max-width: var(--container); margin: 0 auto; padding: 0 24px;}
.eyebrow{
  display: inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before{content:""; width:24px; height:1px; background: currentColor;}
.section{padding: 96px 0;}
.section-tight{padding: 72px 0;}
.section-title-wrap{max-width: 780px; margin-bottom: 48px;}
.section-title-wrap p{color: var(--fg-soft); font-size: 18px; margin-top: 16px;}
/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 22px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.005em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.btn:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
.btn-primary{ background: var(--accent); color: var(--accent-fg); box-shadow: 0 6px 18px -6px rgba(0,114,0,0.5); }
.btn-primary:hover{ background: #005e00; color: var(--accent-fg); transform: translateY(-1px);}
.btn-secondary{ background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover{ background: var(--surface); border-color: var(--fg); color: var(--fg);}
.btn-ghost{ background: transparent; color: var(--fg); }
.btn-ghost:hover{ background: var(--surface); color: var(--fg);}
.btn-dark{ background: var(--dark); color: var(--dark-fg);}
.btn-dark:hover{ background: #101d16; color: var(--dark-fg);}
.btn-lg{padding: 18px 28px; font-size: 16px; border-radius: 12px;}
.arrow-icn{width:14px; height:14px; stroke-width:2; stroke:currentColor; fill:none;}
/* ===== TOP UTILITY BAR ===== */
.utility-bar{
  background: var(--dark); color: var(--dark-fg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.utility-inner{display:flex; align-items:center; gap:28px; justify-content: space-between; padding: 10px 24px; max-width: var(--container); margin: 0 auto;}
.utility-left{display:flex; align-items:center; gap:22px; color: oklch(85% 0.01 145);}
.pill-reg{display:inline-flex; align-items:center; gap:8px; padding: 5px 10px; border-radius: 999px; background: rgba(0,155,7,0.14); color: oklch(88% 0.08 145); font-weight:500;}
.pill-reg svg{width:14px; height:14px;}
.utility-tel{display:inline-flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight: 600; color: var(--dark-fg);}
.utility-tel svg{width:14px; height:14px; opacity:0.7;}
.utility-right{display:flex; align-items:center; gap:14px;}
.utility-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 600;
  transition: background .15s ease;
}
.utility-cta:hover{ background: #005e00; color:#fff;}
/* ===== NAV ===== */
.nav{position: sticky; top:0; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border);}
.nav-inner{display:flex; align-items:center; gap: 40px; padding: 14px 24px; max-width: var(--container); margin: 0 auto;}
.brand{display:inline-flex; align-items:center; gap:10px;}
.brand-mark{height: 30px; width: auto;}
.nav-links{display:flex; align-items:center; gap: 4px; flex: 1; justify-content: flex-end;}
.nav-link{position: relative; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 14.5px; color: var(--fg-soft); transition: color .15s ease, background .15s ease;}
.nav-link:hover{color: var(--fg); background: var(--surface);}
.nav-cta{margin-left: auto; display:flex; gap:10px; align-items:center;}
.mobile-toggle{display:none;}

/* ===== HERO ===== */
.hero{position: relative; padding: 72px 0 96px; overflow: hidden;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 20% 10%, oklch(93% 0.09 145 / 0.6), transparent 65%),
    radial-gradient(58% 46% at 82% 14%, oklch(93% 0.08 170 / 0.5), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}
.hero-bg-grid{position:absolute; inset:0; opacity:0.32;
  background-image: linear-gradient(to right, oklch(88% 0.01 165 / 0.4) 1px, transparent 1px),
                    linear-gradient(to bottom, oklch(88% 0.01 165 / 0.4) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 22%, black 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 22%, black 0%, transparent 68%);
}
.hero-inner{position: relative; z-index: 1; text-align: center;}
.hero-copy .eyebrow{margin-bottom: 20px;}
.hero-copy h1{margin-bottom: 22px;}
.hero-copy h1 .accent-word{color: var(--accent);}
.hero-lede{font-size: 19px; color: var(--fg-soft); max-width: 640px; margin: 0 auto 34px; line-height:1.5;}
.hero-ctas{display:flex; gap: 12px; flex-wrap: nowrap; width: 100%; justify-content: center;}
.hero-feats{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 8px 34px; margin-bottom: 36px;}
.hero-feat{display:inline-flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);}
.hero-feat svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4;}
/* ===== HERO SHOT SLIDER ===== */
.hero-shot{position: relative; max-width: 980px; margin: 64px auto 0;}
.hero-shot::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:-12%; width:130%; height:72%; transform: translateX(-50%);
  background: radial-gradient(60% 58% at 50% 46%, oklch(92% 0.07 145 / 0.75) 0%, transparent 70%);
}
.hero-slider{position: relative; z-index: 1;}
.hero-slides{position: relative; overflow: hidden; border-radius: 18px;}
.hero-slide{display:none; width:100%;}
.hero-slide.is-active{display:block; animation: heroSlideIn .5s ease both;}
@keyframes heroSlideIn{from{opacity:0; transform: translateX(26px);} to{opacity:1; transform: translateX(0);}}
@media (prefers-reduced-motion: reduce){ .hero-slide.is-active{animation:none;} }
.hero-slide img{width:100%; height:auto; display:block;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 6%), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 6%), transparent 100%);}
.hero-slider-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px;}
.hero-arrow{width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong); background:#fff; color:var(--fg); display:inline-flex; align-items:center; justify-content:center; transition: background .15s ease, border-color .15s ease, transform .15s ease;}
.hero-arrow:hover{background:var(--surface); border-color:var(--accent); color:var(--accent); transform: scale(1.06);}
.hero-arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;}
.hero-dots{display:flex; align-items:center; gap:8px;}
.hero-dot{width:9px; height:9px; border-radius:50%; border:none; padding:0; background:var(--border-strong); opacity:.6; transition: background .2s ease, transform .2s ease, opacity .2s ease;}
.hero-dot.is-active{background: var(--accent); opacity:1; transform: scale(1.3);}
.hero-slides{position: relative; z-index: 1;}
.hero-slide img{
  border-radius: 18px;
  border-top: 1px solid oklch(89% 0.01 165);
  border-left: 1px solid oklch(89% 0.01 165);
  border-right: 1px solid oklch(89% 0.01 165);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 3px rgba(15,45,25,0.08),
    0 14px 36px -14px rgba(15,45,25,0.16);
}
/* ===== BENEFITS ===== */
.benefits{background: linear-gradient(180deg, var(--bg), var(--surface));}
.benefits-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.benefit-card{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 30px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
}
.benefit-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong);}
.benefit-card::after{
  content:""; position:absolute; top:0; left:0; right:0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.benefit-card:hover::after{transform: scaleX(1);}
.benefit-icon{
  position: relative; width: 180px; height: 180px; margin-bottom: 22px;
}
.benefit-icon::before{
  content:""; position:absolute; inset:-14% -22%; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 62% at 38% 42%, oklch(92% 0.075 145 / 0.8) 0%, transparent 68%),
    radial-gradient(46% 48% at 72% 78%, oklch(93% 0.06 165 / 0.55), transparent 70%);
}
.benefit-icon img{position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;}
.benefit-num{
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--accent); letter-spacing: 0.08em; margin-bottom: 12px;
}
.benefit-card h3{margin-bottom: 12px; font-size: 22px;}
.benefit-card p{color: var(--fg-soft); font-size: 15px; line-height:1.55;}
/* Планшет: третья карточка — во всю ширину, картинка слева, текст справа */
@media (min-width: 641px) and (max-width: 1080px){
  .benefit-card-wide{grid-column: 1 / -1; display: flex; align-items: center; gap: 24px;}
  .benefit-card-wide .benefit-icon{flex: 0 0 190px; margin-bottom: 0;}
  .benefit-card-wide .benefit-text{flex: 1; min-width: 0;}
}

/* ===== TARIFFS ===== */
.tariffs-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.tariff-card{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 26px; display:flex; flex-direction: column; gap: 22px;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
}
.tariff-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px);}
.tariff-card.featured{
  background: var(--dark); color: var(--dark-fg);
  border-color: var(--dark);
  box-shadow: var(--shadow-lg);
}
.tariff-card.featured h3, .tariff-card.featured .tariff-price{color: var(--dark-fg);}
.tariff-card.featured .tariff-features li{color: oklch(85% 0.01 145);}
.tariff-card.featured .tariff-features svg{color: var(--accent-2);}
.tariff-badge{
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tariff-head h3{font-size: 22px; margin-bottom: 8px;}
.tariff-head p{font-size: 13.5px; color: var(--muted);}
.tariff-card.featured .tariff-head p{color: oklch(75% 0.02 145);}
.tariff-price{font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height:1; letter-spacing:-0.02em;}
.tariff-price .per{font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0;}
.tariff-card.featured .tariff-price .per{color: oklch(75% 0.02 145);}
.tariff-features{list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;}
.tariff-features li{display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--fg-soft); font-size: 14px; line-height:1.5;}
.tariff-features svg{width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; margin-top: 2px;}
.tariff-features li strong{color: var(--fg); font-weight: 600;}
.tariff-card.featured .tariff-features li strong{color: var(--dark-fg);}
.tariff-note{margin-top: 24px; color: var(--muted); font-size: 13px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto;}
/* ===== DOCUMENTS ===== */
.docs-grid{display:grid; grid-template-columns: minmax(0, 1fr); gap: 24px;}
.doc-card{
  display:grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.doc-card:hover{ box-shadow: var(--shadow); border-color: var(--border-strong);}
.doc-card .doc-img{background: var(--surface); align-self: stretch; display:flex; align-items:center; justify-content:center; padding: 22px 20px; border-right: 1px solid var(--border);}
.doc-card .doc-img svg{width:100%; height:auto; max-width: 180px;}
.doc-card .doc-img img{width:100%; height:auto; display:block; border-radius: 6px;}
.doc-card .doc-body{padding: 26px 26px 26px 0;}
.doc-card h3{font-size: 18px; margin-bottom: 8px;}
.doc-card p{color: var(--fg-soft); font-size: 14.5px; margin-bottom: 12px;}
.doc-num{display:inline-block; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.06em;}
@keyframes docCardWiggle{
  0%, 100%{transform: rotate(0deg);}
  25%{transform: rotate(-0.7deg);}
  50%{transform: rotate(0.7deg);}
  75%{transform: rotate(-0.4deg);}
}
@media (min-width: 1081px){
  .doc-card-patent:hover{ box-shadow: var(--shadow-lg); animation: docCardWiggle .5s ease;}
}
/* ===== ROLES (tabs) ===== */
.roles-wrap{background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 32px; overflow: hidden;}
.roles-tabs{display:flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap;}
.role-tab{
  padding: 12px 20px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-soft); font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.role-tab:hover{ color: var(--fg); background: rgba(0,114,0,0.05);}
.role-tab.active{ background: #fff; color: var(--fg); border-color: var(--border); box-shadow: var(--shadow-sm);}
.role-panel{display:none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;}
.role-panel.active{display:grid; animation: fadeInUp .35s ease;}
@keyframes fadeInUp{ from{opacity: 0; transform: translateY(8px);} to{opacity:1; transform: translateY(0);} }
.role-visual{
  background: linear-gradient(160deg, #fff 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  min-height: 320px; position: relative; overflow: hidden;
}
/* «Начальник охраны»: без рамки контейнера — только градиент, дашборд и фигура */
.role-visual.role-head{background: none; border: none; box-shadow: none; padding: 0; overflow: visible;}
.role-visual svg{width:100%; max-width: 380px; height: auto;}
/* Панель «Начальник охраны»: дашборд + фигура охраны поверх угла */
.role-dash-wrap{position: relative; z-index: 1; width: 100%;}
.role-dash-wrap::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-26%; left:-18%; width:135%; height:150%;
  background: radial-gradient(58% 58% at 42% 46%, oklch(88% 0.12 145 / 0.75) 0%, transparent 70%);
  filter: blur(38px);
}
.role-dash{
  position: relative; z-index: 1; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.role-dash svg{width: 100%; max-width: none; height: auto; display: block;}
.role-dash-img{position: absolute; z-index: 2; right: -3px; bottom: -36px; height: 230px; width: auto; object-fit: contain;}
@media (max-width: 1080px){ .role-dash-img{height: 190px; right: 3px; bottom: -44px;} }
@media (max-width: 640px){ .role-dash-img{height: 150px; right: 7px; bottom: -34px;} }
.role-body h3{font-size: 26px; margin-bottom: 6px;}
.role-body .role-sub{color: var(--muted); font-size: 14px; margin-bottom: 20px; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600;}
.role-list{list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;}
.role-list li{display:grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--fg-soft); font-size: 15px; line-height: 1.5;}
.role-list svg{width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2;}
.roles-cta-wrap{display:flex; justify-content: center; margin-top: 40px;}
/* ===== MODULES ===== */
.modules-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.module-card{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display:flex; flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.module-card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--border-strong);}
.module-img{background: oklch(95% 0.035 145); border-bottom: 1px solid var(--border); padding: 24px 24px 0;}
.module-img svg{width:100%; height: auto; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.module-body{padding: 24px 28px 28px;}
.module-tag{display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px;}
.module-card h3{margin-bottom: 8px; font-size: 22px;}
.module-card p{color: var(--fg-soft); font-size: 15px; line-height: 1.55; margin-bottom: 18px;}
.module-more{display:inline-flex; align-items:center; gap:6px; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 14px;}
.module-more svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition: transform .15s ease;}
.module-more:hover svg{transform: translateX(3px);}
.modules-cta-wrap{display:flex; justify-content: center; margin-top: 40px;}
/* ===== TECH SPECS ===== */
.techspecs-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.tech-card{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
}
.tech-card:hover{ border-color: var(--border-strong);}
.tech-icon{width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center;}
.tech-icon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width: 1.75;}
.tech-card h3{font-size: 19px;}
.tech-card p{color: var(--fg-soft); font-size: 14.5px; line-height:1.55; flex: 1;}
.tech-card .btn{align-self: flex-start; margin-top: auto;}

/* ===== TIMELINE ===== */
.timeline{position: relative;}
.timeline-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative;}
.timeline-grid::before{
  content:""; position:absolute; top: 32px; left: 5%; right: 5%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.tl-step{position: relative; z-index: 1;}
.tl-num{
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent);
  margin: 0 auto 20px;
}
.tl-content{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; text-align: center; transition: transform .2s ease, box-shadow .2s ease;}
@media (min-width: 1081px){
  .tl-step:hover .tl-content{transform: scale(1.04); box-shadow: var(--shadow-lg);}
  .tl-step:hover .tl-num{background: var(--accent); color: #fff; transform: scale(1.06);}
}
.tl-content h3{font-size: 17px; margin-bottom: 8px;}
.tl-content p{color: var(--fg-soft); font-size: 14px; line-height:1.5;}
.tl-duration{margin-top: 12px; display:inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--fg-soft); font-family: var(--font-display); font-weight: 600; font-size: 12px;}
.stages-cta-wrap{display:flex; justify-content: center; margin-top: 40px;}
/* ===== DEVELOPER STATS ===== */
.developer{background: linear-gradient(180deg, var(--surface), var(--bg));}
.dev-grid{display:grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: center;}
.dev-copy h2{margin-bottom: 20px;}
.dev-copy p{color: var(--fg-soft); font-size: 17px; line-height:1.6; margin-bottom: 8px;}
.dev-stats{display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.dev-stat{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px;
}
.dev-stat .num{font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 8px;}
.dev-stat .num small{font-size: 22px; font-weight: 700;}
.dev-stat .badge-pill{display:inline-flex; align-items:center; gap:6px; padding: 7px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; margin-bottom: 8px;}
.dev-stat .label{font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg); margin-bottom: 4px;}
.dev-stat .desc{color: var(--muted); font-size: 13px; line-height:1.45;}
/* ===== FORM ===== */
.form-section{background: var(--dark); color: var(--dark-fg); position: relative; overflow: hidden;}
.form-section::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 20% 20%, rgba(0,155,7,0.18), transparent 65%),
    radial-gradient(40% 50% at 90% 80%, rgba(0,155,7,0.12), transparent 65%);
}
.form-card{
  background: #fff; color: var(--fg);
  border-radius: var(--radius-lg); padding: 36px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}
.form-row{display:flex; flex-direction: column; gap: 6px; margin-bottom: 18px;}
.form-row label{font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--fg);}
.form-row .hint{color: var(--muted); font-size: 12.5px; line-height:1.4;}
.form-row input[type="text"], .form-row input[type="tel"], .form-row input[type="email"]{
  padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); font: inherit; color: var(--fg);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.form-row input:focus{ outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px oklch(94% 0.06 145);}
.form-check-group{display:grid; gap: 10px; margin-bottom: 20px; padding: 14px; background: var(--surface); border-radius: 10px;}
.form-check{display:flex; align-items: start; gap: 10px; font-size: 14px; color: var(--fg-soft); line-height:1.4;}
.form-check .check-text{flex: 1; min-width: 0; display: block;}
.form-check input[type="checkbox"]{margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px;}
.form-check a{color: var(--accent); text-decoration: underline; text-underline-offset: 3px;}
.form-check-group .group-title{font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--fg-soft); letter-spacing: 0.02em; margin-bottom: 2px;}
.form-submit{width: 100%; margin-top: 4px;}
/* ===== LEAD FORM MODAL ===== */
@keyframes leadModalIn{ from{opacity: 0; transform: translateY(16px) scale(.98);} to{opacity: 1; transform: none;} }
.lead-modal{position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;}
.lead-modal[hidden]{display: none;}
.lead-modal-backdrop{position: absolute; inset: 0; background: rgba(8,26,17,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.lead-modal-card{position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6); padding: 32px 32px 36px; animation: leadModalIn .25s ease;}
.lead-modal-close{position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--fg); display: inline-flex; align-items: center; justify-content: center;}
.lead-modal-close:hover{background: var(--surface);}
.lead-modal-head{margin-bottom: 24px; padding-right: 48px;}
.lead-modal-head h3{font-size: 22px; margin-bottom: 10px;}
.lead-modal-head p{color: var(--fg-soft); font-size: 14.5px; line-height: 1.55; margin: 0;}
@media (max-width: 640px){
  .lead-modal{padding: 0;}
  .lead-modal-card{max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 28px 22px 32px;}
}
/* ===== FOOTER ===== */
.footer{background: oklch(15% 0.015 165); color: oklch(78% 0.015 165); padding: 72px 0 30px;}
.footer-grid{display:grid; grid-template-columns: 1.9fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08);}
.footer-brand img.brand-mark{height: 40px;}
.footer-brand p{margin-top: 20px; font-size: 14px; line-height:1.55; max-width: 340px; color: oklch(70% 0.015 165);}
.footer-col h4{font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #fff; margin-bottom: 18px; letter-spacing: 0.08em; text-transform: uppercase;}
.footer-links{list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;}
.footer-links a{color: oklch(78% 0.015 165); font-size: 14px; transition: color .15s ease;}
.footer-links a:hover{color: #fff;}
.footer-contacts{list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 14px;}
.footer-contacts li{display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: oklch(78% 0.015 165);}
.footer-contacts strong{color: #fff; font-weight: 600; display: block;}
.footer-contacts svg{width: 18px; height: 18px; stroke: var(--accent-2); fill:none; stroke-width: 2; margin-top: 2px;}
.footer-cta-btn{margin-top: 20px;}
.footer-bottom{display:flex; justify-content: space-between; gap: 20px; padding-top: 24px; flex-wrap: wrap; font-size: 13px; color: oklch(65% 0.015 165);}
.footer-bottom a{color: oklch(75% 0.015 165);}
.footer-bottom a:hover{color: #fff;}
/* ===== RESPONSIVE ===== */
/* ===== SCROLL TO TOP ===== */
.scroll-top{position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .15s ease, border-color .15s ease;}
.scroll-top.is-visible{opacity: 1; visibility: visible; transform: translateY(0);}
.scroll-top:hover{background: var(--accent); color: #fff; border-color: var(--accent);}
.scroll-top svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;}
@media (max-width: 640px){ .scroll-top{right: 16px; bottom: 16px; width: 42px; height: 42px;} }
@media (max-width: 1080px){
  .nav-links{display:none;}
  .mobile-toggle{display:inline-flex; margin-left:auto;}
  .nav-cta .btn-secondary{display:none;}
  .hero-ctas{flex-wrap: wrap;}
  .hero-shot{margin-top: 52px;}
  .benefits-grid, .tariffs-grid, .modules-grid, .techspecs-grid{grid-template-columns: 1fr 1fr; gap: 16px;}
  .docs-grid{grid-template-columns: minmax(0, 1fr);}
  .doc-card{grid-template-columns: minmax(220px, 280px) 1fr; gap: 18px;}
  .doc-card .doc-img{padding: 16px 14px;}
  .doc-card .doc-body{padding: 22px 22px 22px 0;}
  .timeline-grid{grid-template-columns: 1fr 1fr;}
  .timeline-grid::before{display:none;}
  .role-panel{grid-template-columns: 1fr;}
  .dev-grid{grid-template-columns: 1fr;}
  .footer-grid{grid-template-columns: 1fr 1fr;}
}
/* Мобилка: карточки «О разработчике» в одну колонку — без горизонтальной прокрутки */
@media (max-width: 640px){
  .dev-stats{grid-template-columns: 1fr; gap: 16px;}
}
@media (max-width: 640px){
  .section{padding: 64px 0;}
  .utility-inner{gap: 12px;}
  .utility-left .pill-reg{display: none;}
  .utility-tel{font-size: 12px;}
  .benefits-grid, .tariffs-grid, .modules-grid, .docs-grid, .techspecs-grid, .timeline-grid{grid-template-columns: 1fr;}
  .doc-card{grid-template-columns: 1fr;}
  .doc-card .doc-img{border-right: none; border-bottom: 1px solid var(--border);}
  .doc-card .doc-body{padding: 0 22px 22px;}
  .doc-card .doc-img img{max-width: 340px;}
  .footer-grid{grid-template-columns: 1fr;}
  .role-tab{font-size: 13.5px; padding: 10px 14px;}
  .roles-wrap{padding: 22px 18px;}
  .hero-feats{gap: 10px 24px;}
}
/* utility */
.only-desktop{display: inline-flex;}
@media (max-width: 640px){ .only-desktop{display:none;} }
/* ===== MOBILE MENU ===== */
.mobile-menu{position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow-y: auto;}
.mobile-menu[hidden]{display: none;}
.mobile-menu-inner{max-width: 520px; margin: 0 auto; padding: 24px 24px 48px; position: relative; min-height: 100%;}
.mobile-close{position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--fg); display: inline-flex; align-items: center; justify-content: center;}
.mobile-close:hover{background: var(--surface);}
.mobile-nav{display: grid; gap: 4px; margin-top: 56px;}
.mobile-link{padding: 13px 14px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg);}
.mobile-link:hover{background: var(--surface);}
.mobile-ctas{display: grid; gap: 12px; margin-top: 32px;}
/* ===== FORM STATES ===== */
.form-row input.input-error{border-color: var(--danger); background: oklch(96% 0.02 25);}
.form-row .hint.hint-error{color: var(--danger);}
.form-row label.req::after{content: " *"; color: var(--danger); font-weight: 700;}
.form-check-group.checks-error{border: 1px solid var(--danger); background: oklch(96% 0.02 25);}
.form-check-group .checks-hint{color: var(--fg-soft); font-size: 13px; line-height: 1.4;}
.form-check-group.checks-error .checks-hint{color: var(--danger);}
/* ===== COOKIE NOTICE ===== */
.cookie-banner{position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500; margin: 0 auto; max-width: 720px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 18px 20px; display: grid; gap: 14px; animation: cookieIn .35s ease backwards;}
.cookie-banner[hidden]{display: none;}@keyframes cookieIn{from{opacity: 0; transform: translateY(24px);}}
.cookie-banner p{margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-soft);}
.cookie-banner a{color: var(--accent); text-decoration: underline; text-underline-offset: 2px;}
.cookie-actions{display: flex; gap: 10px; flex-wrap: wrap; align-items: center;}
.cookie-actions .btn{padding: 9px 18px; font-size: 14px; border-radius: 10px;}
@media (max-width: 640px){
  .cookie-banner{left: 12px; right: 12px; bottom: 12px; max-height: calc(100vh - 24px); overflow-y: auto;}
  .cookie-actions{flex-direction: column; align-items: stretch;}
  .cookie-actions .btn{width: 100%;}
}
/* ===== TOAST ===== */
.toast-container{position: fixed; top: 20px; right: 20px; z-index: 300; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 40px));}
.toast{background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: 10px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.12)); padding: 14px 16px; font-size: 14px; line-height: 1.45; color: var(--fg); animation: toastIn .25s ease both;}
.toast p{margin: 0;}
.toast-close{position: absolute;}
@keyframes toastIn{from{opacity: 0; transform: translateX(24px);} to{opacity: 1; transform: none;}}
@media (max-width: 640px){ .toast-container{left: 20px; right: 20px; max-width: none;} }
.form-success{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 12px; color: var(--fg);}
.form-success svg{color: var(--accent); margin-bottom: 20px;}
.form-success h3{font-size: 24px; margin-bottom: 12px;}
.form-success p{color: var(--fg-soft); font-size: 15.5px; max-width: 380px; margin: 0 auto; line-height: 1.55;}