/* Groundfix.kz — лендинг по презентации. Палитра и сетка взяты из слайдов. */

:root{
  --paper:#F5F4EF;
  --paper-2:#FBFAF7;
  --ink:#26251F;
  --ink-60:#5C5A50;
  --dark:#28271F;
  --dark-2:#35342C;
  --dark-3:#403F36;
  --hot:#EA7C2A;
  --hot-l:#F6C48A;
  --steel:#5B8FB2;
  --wa:#25D366;
  --grid-l:rgba(38,37,31,.07);
  --grid-d:rgba(255,255,255,.05);
  --r:10px;
  --wrap:1180px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.55 "Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:999px;cursor:pointer;
  font:700 15px/1 "Inter",Arial,sans-serif;letter-spacing:-.01em;
  padding:13px 20px;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s;
}
.btn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:17px 30px;font-size:17px}
.btn--wa{background:var(--wa);color:#08301A;box-shadow:0 6px 20px rgba(37,211,102,.28)}
.btn--wa:hover{background:#2ee474}
.btn--outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn--outline:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.08)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(38,37,31,.25)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--hot);color:var(--hot)}
.btn.is-done{background:var(--hot);color:#fff;box-shadow:none}

/* ---------- шапка ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:60;transition:background .25s, box-shadow .25s, backdrop-filter .25s}
.topbar.is-stuck{background:rgba(245,244,239,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(38,37,31,.12)}
.topbar__in{display:flex;align-items:center;gap:26px;height:68px}
.brand img{width:132px;height:auto}
.nav{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{text-decoration:none;padding:6px 0;position:relative;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--hot);transition:right .25s}
.nav a:hover::after{right:0}
.topbar__cta{display:flex;gap:10px;align-items:center}

/* ---------- первый экран ---------- */
.hero{position:relative}
.hero__paper{
  background:var(--paper-2);
  background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px);
  background-size:26px 26px;
  padding:130px 0 54px;
}
.hero__eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);margin-bottom:18px}
.hero__h1{font-weight:900;font-size:clamp(32px,5.4vw,64px)}
.hero__seam{height:5px;background:linear-gradient(90deg,var(--hot) 0 50%,var(--steel) 50% 100%)}
.hero__ground{
  position:relative;color:#fff;padding:52px 0 66px;
  background:var(--dark) url("assets/soil.webp") repeat 0 0/300px auto;
}
.hero__ground::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(40,39,31,.72),rgba(40,39,31,.94)),
    linear-gradient(var(--grid-d) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);
  background-size:auto,26px 26px,26px 26px;
}
.hero__gin{position:relative}
.hero__lead{font-size:clamp(17px,2.2vw,23px);font-weight:500;color:#EDEAE1;max-width:56ch}
.hero__roots{width:100%;height:118px;margin:2px 0 -6px;display:block}
.hero__roots path{stroke-dasharray:760;stroke-dashoffset:760;animation:grow 1.7s cubic-bezier(.22,.7,.3,1) forwards}
.hero__roots path:nth-child(2){animation-delay:.12s}
.hero__roots path:nth-child(3){animation-delay:.24s}
.hero__roots path:nth-child(4){animation-delay:.36s}
.hero__roots path:nth-child(5),.hero__roots path:nth-child(6){animation-delay:.5s;animation-duration:1.3s}
@keyframes grow{to{stroke-dashoffset:0}}

.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pills li{
  text-align:center;padding:11px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.38);font-size:15px;font-weight:500;
  background:rgba(255,255,255,.05);
  animation:pop .5s ease backwards;
}
.pills li:nth-child(1){animation-delay:1.1s}
.pills li:nth-child(2){animation-delay:1.2s}
.pills li:nth-child(3){animation-delay:1.3s}
.pills li:nth-child(4){animation-delay:1.4s}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__note{margin-top:16px;font-size:14px;color:rgba(255,255,255,.6)}

/* ---------- секции ---------- */
.sec{padding:86px 0;scroll-margin-top:76px}
.sec--paper{
  background:var(--paper);
  background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px);
  background-size:26px 26px;
}
.sec--dark{position:relative;background:var(--dark);color:#F1EFE8;border-top:5px solid transparent;
  border-image:linear-gradient(90deg,var(--hot) 0 50%,var(--steel) 50% 100%) 1}
.sec--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);
  background-size:26px 26px;
}
.sec--dark>.wrap{position:relative}

.h2{font-weight:900;font-size:clamp(26px,3.9vw,46px);margin-bottom:38px}
.h2--light{color:#fff}
.lead{font-size:19px;color:var(--ink-60);max-width:66ch;margin:-20px 0 34px}

/* ---------- сетки и карточки ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

.card{background:#fff;padding:30px 26px 28px;border:1px solid rgba(38,37,31,.1);text-align:center;position:relative}
.card__icon{height:52px;margin:0 auto 16px}
.card__icon svg{height:52px;width:52px;margin:0 auto}
.card h3{font-size:23px;font-weight:800;margin-bottom:8px}
.card p{color:var(--ink-60);font-size:16px}
/* уголки-скобки как на слайдах */
.card--bracket::before,.card--bracket::after{
  content:"";position:absolute;width:16px;height:16px;border:2px solid var(--ink);
}
.card--bracket::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.card--bracket::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}

.lines{margin-top:44px}
.mark{display:inline-block;font-size:22px;font-weight:800;margin-bottom:10px;
  background:linear-gradient(transparent 62%,rgba(91,143,178,.45) 62%);padding:0 3px}
.lines p{color:var(--ink-60);max-width:40ch}
.lines>div{border-top:2px solid rgba(91,143,178,.55);padding-top:18px}

/* ---------- крупные схемы ---------- */
.figure{margin:0 0 34px}
.figure__scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid rgba(255,255,255,.1);background:#000}
.sec--paper .figure__scroll{border-color:rgba(38,37,31,.12);background:var(--paper-2)}
.figure__scroll img{width:100%}
.figure__hint{display:none;font-size:13px;color:var(--ink-60);margin-top:8px}
.sec--dark .figure__hint{color:rgba(255,255,255,.5)}

.ticks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 30px;margin-bottom:30px}
.ticks li{position:relative;padding-left:26px;font-size:17px;color:#E4E1D8}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px;background:var(--hot)}
/* на десктопе подписи и вывод крупно есть на самой схеме — список нужен только телефону */
@media (min-width:821px){#threat .ticks,#threat .callout{display:none}}
.callout{border-left:4px solid var(--hot);background:var(--dark-2);padding:20px 24px;font-size:18px;font-weight:500;max-width:70ch}

.obj{background:#fff;border:1px solid rgba(38,37,31,.1);border-top:3px solid var(--hot);padding:20px 18px}
.obj h3{font-size:17px;font-weight:800;margin-bottom:7px}
.obj p{font-size:15px;color:var(--ink-60)}

/* ---------- до / процесс / после ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step3{margin:0;background:var(--dark-2);border:1px solid rgba(255,255,255,.09);padding:16px}
.step3 img{width:100%;height:auto}
.step3__tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#CFCBC0;margin-bottom:12px;border-bottom:2px solid rgba(255,255,255,.25);padding-bottom:4px}
.step3__tag--hot{color:var(--hot-l);border-color:var(--hot)}
.step3 figcaption{margin-top:14px;font-size:15px;color:#DAD6CB}

.ba{margin-top:44px;max-width:720px}
.ba__title{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hot-l);margin-bottom:12px}
.ba__box{position:relative;aspect-ratio:700/460;overflow:hidden;border:1px solid rgba(255,255,255,.12);--p:50%}
.ba__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--hot);transform:translateX(-50%);pointer-events:none}
.ba__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:var(--hot);box-shadow:0 3px 14px rgba(0,0,0,.45)}
.ba__handle span::before,.ba__handle span::after{content:"";position:absolute;top:50%;width:0;height:0;
  border:6px solid transparent;transform:translateY(-50%)}
.ba__handle span::before{left:6px;border-right-color:#fff}
.ba__handle span::after{right:6px;border-left-color:#fff}
.ba__lbl{position:absolute;top:12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(0,0,0,.55);color:#fff;padding:5px 10px}
.ba__lbl--l{left:12px}
.ba__lbl--r{right:12px}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* ---------- нумерованные узлы ---------- */
.num{background:var(--paper-2);border:1px solid rgba(38,37,31,.1);padding:22px 20px;position:relative}
.num span{display:block;font-weight:900;font-size:34px;color:var(--hot);line-height:1;margin-bottom:10px}
.num h3{font-size:18px;font-weight:800;margin-bottom:8px}
.num p{font-size:15px;color:var(--ink-60)}

/* ---------- таблица ---------- */
.tablewrap{overflow-x:auto}
.matrix{width:100%;border-collapse:collapse;font-size:16px;min-width:720px}
.matrix th,.matrix td{text-align:left;padding:16px 18px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.1)}
.matrix thead th{font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.55);text-transform:uppercase;border-bottom:2px solid rgba(255,255,255,.3)}
.matrix tbody th{font-weight:800;font-size:18px;color:#fff;width:19%}
.matrix tbody td{color:#D9D5CA}
.matrix tbody tr{transition:background .2s}
.matrix tbody tr:hover{background:rgba(234,124,42,.1)}
.matrix tbody tr:hover th{color:var(--hot-l)}
.undertable{margin-top:18px;font-size:15px;color:rgba(255,255,255,.55);max-width:70ch}

/* ---------- регламент ---------- */
.pipewrap{position:relative}
.pipe__rail{position:absolute;left:8%;right:8%;top:44px;height:4px;background:rgba(38,37,31,.14);border-radius:2px;overflow:hidden}
.pipe__rail i{display:block;height:100%;width:var(--f,0%);background:linear-gradient(90deg,var(--hot),var(--hot-l));transition:width .5s ease}
.pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;position:relative}
.pipe__i{text-align:center}
.pipe__i img{width:92px;height:92px;margin:0 auto 14px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(38,37,31,.16), 0 2px 10px rgba(38,37,31,.12)}
.pipe__i h3{font-size:16px;font-weight:800;margin-bottom:4px}
.pipe__i h3 b{color:var(--hot)}
.pipe__i em{display:block;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hot);margin-bottom:6px}
.pipe__i p{font-size:14px;color:var(--ink-60)}

/* ---------- сравнение ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vs__col{padding:26px 24px;background:var(--dark-2);border-top:4px solid var(--hot)}
.vs__col--new{border-top-color:var(--steel)}
.vs__col h3{font-size:21px;font-weight:800;margin-bottom:18px;text-align:center}
.vs__col img{margin:0 auto 20px;width:min(100%,300px);height:auto;border:1px solid rgba(255,255,255,.08)}
.vs__col li{position:relative;padding:9px 0 9px 32px;font-size:16px;color:#DEDAD0;border-bottom:1px solid rgba(255,255,255,.07)}
.vs__col li:last-child{border-bottom:0}
.vs__col--old li::before{content:"✕";position:absolute;left:6px;color:var(--hot);font-weight:800}
.vs__col--new li::before{content:"✓";position:absolute;left:6px;color:var(--steel);font-weight:800}

/* ---------- контроль качества ---------- */
.qc__c{background:#fff;border:1px solid rgba(38,37,31,.1);padding:18px}
.qc__c img{height:170px;width:auto;margin:0 auto 14px;object-fit:contain;border:1px solid rgba(38,37,31,.08)}
.qc__val{font-weight:900;font-size:23px;color:var(--hot);margin-bottom:6px}
.qc__c h3{font-size:18px;font-weight:800;margin-bottom:6px}
.qc__c p{font-size:15px;color:var(--ink-60)}

/* ---------- кейс ---------- */
.case{display:grid;grid-template-columns:0.85fr 1.15fr;gap:30px;align-items:start}
.case__facts{display:grid;gap:22px}
.fact{border-left:3px solid var(--hot);padding-left:16px}
.fact h3{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.fact p{color:#D6D2C7;font-size:16px}
.fact__big{font-weight:900;font-size:34px;color:#fff;letter-spacing:-.02em}
.case__vis img{border:1px solid rgba(255,255,255,.12)}
.case__note{margin-top:16px;font-size:15px;color:#D6D2C7;background:var(--dark-2);padding:16px 18px;border-left:3px solid var(--steel)}
.case__note b{color:#fff}

/* ---------- доверие ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust li{position:relative;padding-top:44px;font-size:17px;color:var(--ink-60)}
.trust li::before{content:"";position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--steel);background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%235B8FB2' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* ---------- финальный призыв ---------- */
.sec--cta{position:relative;background:var(--dark);color:#fff;padding:96px 0;overflow:hidden;
  border-top:5px solid transparent;border-image:linear-gradient(90deg,var(--hot) 0 50%,var(--steel) 50% 100%) 1}
.sec--cta::before,.sec--cta::after{content:"";position:absolute;top:0;width:340px;height:100%;
  background:url("assets/roots.webp") no-repeat center/contain;opacity:.55;pointer-events:none}
.sec--cta::before{left:-40px}
.sec--cta::after{right:-40px;transform:scaleX(-1)}
.cta{position:relative;text-align:center}
.cta__h{font-weight:900;font-size:clamp(26px,4.2vw,44px)}
.cta__p{margin-top:14px;font-size:19px;color:#DAD6CB}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.phonebox[hidden]{display:none}
.phonebox{margin-top:24px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.phonebox__num{font-weight:900;font-size:clamp(26px,4vw,40px);letter-spacing:.01em;text-decoration:none;color:#fff}
.phonebox__num:hover{color:var(--hot-l)}
.phonebox__copy{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;
  padding:8px 14px;font:600 13px/1 "Inter",Arial,sans-serif;cursor:pointer}
.phonebox__copy:hover{border-color:#fff}
.cta__links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-size:16px;color:#C9C5BA}
.cta__links a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.cta__links a:hover{color:var(--hot-l);border-color:var(--hot-l)}

/* ---------- подвал ---------- */
.foot{background:#1E1D18;color:#9A968C;padding:44px 0;font-size:15px}
.foot__in{display:grid;gap:14px;justify-items:center;text-align:center}
.foot img{width:150px;filter:brightness(0) invert(1);opacity:.85}
.foot p{max-width:60ch}
.foot__small{font-size:13px;color:#6E6B63}

/* ---------- мобильная панель ---------- */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,244,239,.96);backdrop-filter:blur(10px);box-shadow:0 -1px 0 rgba(38,37,31,.14)}
.dock .btn{flex:1}

.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:90;
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:.3s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- появление при прокрутке ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .nav{display:none}
  .grid5{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .pipe{grid-template-columns:repeat(3,1fr);gap:28px 20px}
  .pipe__rail{display:none}
  .case{grid-template-columns:1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  .sec{padding:60px 0}
  .topbar__cta .btn--ghost{display:none}
  .hero__paper{padding:104px 0 40px}
  .hero__roots{display:none}
  .pills{grid-template-columns:repeat(2,1fr)}
  .hero__actions .btn{flex:1;justify-content:center}
  .grid3,.grid4,.grid2,.steps3,.vs{grid-template-columns:1fr}
  .grid5{grid-template-columns:1fr 1fr}
  .ticks{grid-template-columns:1fr}
  /* карточки идут столбиком: прозрачный верх над плитой больше не выравнивает ряд, убираем его */
  .step3 img[src$="/before.webp"],.step3 img[src$="/after.webp"]{aspect-ratio:700/470;object-fit:cover;object-position:50% 100%}
  .figure__scroll img{width:860px;max-width:none}
  .figure__hint{display:block}
  .qc__c{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
  .qc__c img{height:96px;grid-row:span 3}
  .dock{display:flex}
  body{padding-bottom:76px}
  .vs__col img{width:min(100%,240px)}
  .sec--cta::before,.sec--cta::after{width:180px;opacity:.35}

  /* таблица превращается в карточки */
  .matrix{min-width:0}
  .matrix thead{display:none}
  .matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix tbody tr{background:var(--dark-2);border:1px solid rgba(255,255,255,.1);padding:6px 16px 12px;margin-bottom:14px}
  .matrix tbody th{width:auto;padding:12px 0 8px;border-bottom:1px solid rgba(255,255,255,.14)}
  .matrix tbody td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .matrix tbody td::before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:3px}
  .matrix tbody tr td:last-child{border-bottom:0}
}
@media (max-width:520px){
  .grid5{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero__roots path{stroke-dashoffset:0}
}

@media print{
  .topbar,.dock,.toast,.hero__roots{display:none}
  .sec{padding:20px 0}
}