/* ============================================================
   SmartDocGen — ГЛАВНАЯ, ПЕРВЫЙ ЭКРАН (hero)
   Тёмный премиум-hero в тон шапке/футеру и внутренним страницам
   (#0b0e13 + янтарный акцент), вместо плоской синей «волны».
   Тексты не тронуты — только вёрстка и оформление.
   Подключается ОДНОЙ строкой; убирается так же (обратимо).
   ============================================================ */

:root{
  --sdgh-bg:#080b11;
  --sdgh-am1:#FFD84D;
  --sdgh-am2:#FFBE1A;
  --sdgh-am-ink:#2b2100;
  --sdgh-blue:#1363d4;
  --sdgh-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------------- корпус секции ---------------- */
section.section.sdgh{
  position:relative;
  isolation:isolate;
  background:var(--sdgh-bg) !important;
  background-image:none !important;
  padding:0 !important;
  overflow:hidden;
  color:#fff;
  font-family:"Montserrat","Open Sans",system-ui,Arial,sans-serif;
}

/* ---- фон: аврора + сетка + виньетка ---- */
.sdgh__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.sdgh__bg::before{            /* сетка */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 8%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 8%, #000 0%, transparent 72%);
}
.sdgh__bg::after{             /* виньетка снизу — мягкий уход в белое */
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(to bottom, transparent, rgba(8,11,17,.85));
}

.sdgh__glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.sdgh__glow--a{ width:44vw; height:44vw; max-width:640px; max-height:640px; left:-8vw; top:-14vw;
  background:radial-gradient(circle, rgba(19,99,212,.85) 0%, rgba(19,99,212,0) 68%); }
.sdgh__glow--b{ width:40vw; height:40vw; max-width:560px; max-height:560px; right:-6vw; top:-4vw;
  background:radial-gradient(circle, rgba(0,180,255,.55) 0%, rgba(0,180,255,0) 68%); }
.sdgh__glow--c{ width:34vw; height:34vw; max-width:480px; max-height:480px; left:30%; bottom:-15vw;
  background:radial-gradient(circle, rgba(255,190,26,.28) 0%, rgba(255,190,26,0) 68%); }
.sdgh__glow--d{ width:38vw; height:38vw; max-width:520px; max-height:520px; right:-4vw; bottom:-10vw;
  background:radial-gradient(circle, rgba(19,99,212,.45) 0%, rgba(19,99,212,0) 68%); opacity:.45; }

/* «дыхание» подсветки */
@media (min-width:768px){
  .sdgh__glow--a{ animation:sdgh-breath 13s ease-in-out infinite; }
  .sdgh__glow--b{ animation:sdgh-breath 17s ease-in-out infinite reverse; }
}
@keyframes sdgh-breath{
  0%,100%{ transform:translate3d(0,0,0)      scale(1);    opacity:.5; }
  50%    { transform:translate3d(3%,4%,0)    scale(1.12); opacity:.68; }
}

/* ---------------- сетка первого экрана ---------------- */
.sdgh__inner{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding:clamp(34px,4.2vw,58px) 24px clamp(86px,8.6vw,126px);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-areas:"badge badge" "copy viz";
  align-items:center;
  column-gap:clamp(28px,4vw,56px);
  row-gap:clamp(26px,2.6vw,38px);
}
.sdgh__copy{ grid-area:copy; min-width:0; }

/* ---------------- бейдж «реестр Минцифры» ---------------- */
.sdgh__badge{
  grid-area:badge; justify-self:start; align-self:start;
  display:inline-flex; align-items:center; gap:10px;
  max-width:100%;
  min-height:44px; padding:8px 18px 8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:rgba(255,255,255,.86) !important;
  font-size:clamp(10.5px,.82vw,12px); font-weight:600; line-height:1.35; letter-spacing:.005em;
  text-decoration:none;
  transition:border-color .22s ease, background-color .22s ease, transform .22s var(--sdgh-ease);
  animation:sdgh-rise .6s var(--sdgh-ease) both;
}
.sdgh__badge:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,206,77,.5);
  transform:translateY(-1px);
  color:#fff !important;
}
.sdgh__badgeIc{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(255,216,77,.22), rgba(255,190,26,.1));
  border:1px solid rgba(255,190,26,.42);
}
.sdgh__badgeIc svg{ width:13px; height:13px; stroke:var(--sdgh-am1); }

/* ---------------- H1 ---------------- */
.sdgh__h1{
  margin:0;
  color:#fff;
  font-family:"Montserrat","Open Sans",sans-serif;
  font-weight:700;
  font-size:clamp(28px,3.15vw,45px);
  line-height:1.13;
  letter-spacing:-.028em;
  text-wrap:balance;
  animation:sdgh-rise .65s var(--sdgh-ease) both .06s;
}
/* вторая половина заголовка — акцент (текст не изменён, только окраска) */
.sdgh__h1 .sdgh__hl{
  position:relative; display:inline;
  background:linear-gradient(100deg,var(--sdgh-am1) 8%,var(--sdgh-am2) 92%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 44px rgba(255,190,26,.24);
}

/* ---------------- лид ---------------- */
.sdgh__lead{
  margin:20px 0 0; max-width:46em;
  color:rgba(255,255,255,.76);
  font-family:"Open Sans","Montserrat",sans-serif;
  font-size:clamp(15px,1.2vw,17.5px); font-style:normal; line-height:1.6;
  animation:sdgh-rise .65s var(--sdgh-ease) both .12s;
}

/* ---------------- чек-лист ---------------- */
.sdgh__list{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:11px;
  animation:sdgh-rise .65s var(--sdgh-ease) both .18s;
}
.sdgh__list li{
  position:relative; padding-left:33px;
  color:rgba(255,255,255,.9);
  font-size:clamp(13.5px,1.05vw,15px); font-weight:500; line-height:1.5;
}
.sdgh__chk{
  position:absolute; left:0; top:1px;
  width:21px; height:21px;
  display:grid; place-items:center;
  border-radius:7px;
  background:linear-gradient(135deg, rgba(255,216,77,.2), rgba(255,190,26,.08));
  border:1px solid rgba(255,190,26,.4);
  color:var(--sdgh-am1);
  font-size:12px; font-weight:700; line-height:1;
}

/* ---------------- кнопки ---------------- */
.sdgh__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:34px 0 0;
  animation:sdgh-rise .65s var(--sdgh-ease) both .24s;
}
.sdgh__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:17px 32px; border-radius:14px;
  font-family:"Montserrat",sans-serif; font-size:15px; font-weight:700; line-height:1.25;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .22s var(--sdgh-ease), box-shadow .22s ease,
             background-color .22s ease, border-color .22s ease, filter .22s ease;
}
.sdgh__btn svg{ width:19px; height:19px; flex:none; }

.sdgh__btn--primary{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--sdgh-am1) 0%,var(--sdgh-am2) 100%);
  color:var(--sdgh-am-ink);
  box-shadow:0 14px 34px -12px rgba(255,190,26,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.sdgh__btn--primary svg{ stroke:var(--sdgh-am-ink); }
.sdgh__btn--primary:hover{
  transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 20px 44px -14px rgba(255,190,26,.85), inset 0 1px 0 rgba(255,255,255,.55);
}
.sdgh__btn--primary:active{ transform:translateY(0); }
/* блик, пробегающий по кнопке */
.sdgh__btn--primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.62), transparent);
  transform:skewX(-18deg);
  animation:sdgh-shine 4.6s ease-in-out infinite;
}

.sdgh__btn--ghost{
  background:rgba(255,255,255,.07);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.sdgh__btn--ghost svg{ stroke:var(--sdgh-am1); }
.sdgh__btn--ghost:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.55);
  transform:translateY(-2px);
}

/* фокус с клавиатуры */
.sdgh a:focus-visible{ outline:2px solid var(--sdgh-am1); outline-offset:3px; border-radius:12px; }

/* цели кнопок первого экрана не должны прятаться под липкую шапку (68px) */
#pay,#video{ scroll-margin-top:84px; }

/* ============================================================
   ВИЗУАЛ: Excel → SmartDocGen → пачка документов
   Чистый CSS/SVG, без внешних зависимостей и без текстовых
   утверждений (никаких цифр и обещаний в графике).
   ============================================================ */
.sdgh__viz{ grid-area:viz; container-type:inline-size; min-width:0; justify-self:end; width:100%; max-width:540px;
  animation:sdgh-rise .8s var(--sdgh-ease) both .3s; }
.sdgh__stage{
  position:relative; width:100%; aspect-ratio:540/470;
  box-sizing:border-box;
  font-size:clamp(4.6px,1.852cqw,10px);   /* 1em = 10px при ширине 540 */
}
.sdgh__stage *{ box-sizing:border-box; }

/* ореол под сценой */
.sdgh__stage::before{
  content:""; position:absolute; left:8%; top:12%; width:84%; height:76%;
  background:radial-gradient(ellipse at 50% 50%, rgba(19,99,212,.5), transparent 66%);
  filter:blur(46px);
}

/* --- 1. Excel-лист (верх-слева) --- */
.sdgh__sheet{
  position:absolute; left:0; top:0; width:25em;
  border-radius:1.6em; overflow:hidden;
  background:#fff;
  box-shadow:0 2.4em 5em -2em rgba(0,0,0,.6), 0 0 0 .1em rgba(255,255,255,.1);
  transform:rotate(-2.2deg);
  animation:sdgh-float 9s ease-in-out infinite;
}
.sdgh__sheetTop{
  display:flex; align-items:center; gap:.8em;
  padding:.9em 1.1em;
  background:linear-gradient(135deg,#1E7145,#21A366);
}
.sdgh__mark{
  flex:none;
  font-size:1.3em; width:1.85em; height:1.85em; border-radius:.46em;
  display:grid; place-items:center;
  background:rgba(11,14,19,.30);        /* тёмная подложка — буква читается уверенно */
  color:#fff; font-weight:800; line-height:1;
}
.sdgh__bar{ height:.7em; border-radius:.35em; background:rgba(255,255,255,.55); }
.sdgh__bar--w1{ width:8em; }
.sdgh__bar--w2{ width:4.4em; opacity:.6; }

.sdgh__grid{ padding:1em; display:grid; gap:.55em; }
.sdgh__row{ display:grid; grid-template-columns:1.3fr 1fr .85fr .7fr; gap:.55em; }
.sdgh__cell{ height:1.35em; border-radius:.35em; background:#e8edf5; }
.sdgh__row--head .sdgh__cell{ background:#c9d6e8; }
.sdgh__row .sdgh__cell:nth-child(2){ background:#d7ead9; }
.sdgh__row--head .sdgh__cell:nth-child(2){ background:#a8d5b0; }
/* «живые» данные: ячейки чуть разной длины */
.sdgh__row:nth-child(3) .sdgh__cell:nth-child(1){ background:#dde5f0; }
.sdgh__row:nth-child(5) .sdgh__cell:nth-child(3){ background:#dde5f0; }

/* сканирующая полоса по таблице */
.sdgh__scan{
  position:absolute; left:0; right:0; top:0; height:3.4em;
  background:linear-gradient(to bottom, rgba(255,190,26,0), rgba(255,190,26,.42), rgba(255,190,26,0));
  animation:sdgh-scan 3.6s var(--sdgh-ease) infinite;
}

/* --- 2. Ядро-обработчик (на стыке таблицы и документов) --- */
.sdgh__core{
  position:absolute; left:15.6em; top:28.5em;
  width:7.2em; height:7.2em; border-radius:2.2em;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--sdgh-am1),var(--sdgh-am2));
  box-shadow:0 1.4em 3.4em -.8em rgba(255,190,26,.7), inset 0 .1em 0 rgba(255,255,255,.6);
  z-index:3;
}
.sdgh__core svg{ width:3.6em; height:3.6em; fill:var(--sdgh-am-ink); }
.sdgh__core::before,.sdgh__core::after{  /* расходящиеся кольца */
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:.16em solid rgba(255,190,26,.55);
  animation:sdgh-ping 3s ease-out infinite;
}
.sdgh__core::after{ animation-delay:1.5s; }

/* --- 3. Линия-конвейер: таблица → ядро → документы --- */
.sdgh__wire{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.sdgh__wirePath{
  fill:none; stroke:var(--sdgh-am2); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:6 12;
  filter:drop-shadow(0 0 4px rgba(255,190,26,.75));
  animation:sdgh-flow 1.4s linear infinite;
}
.sdgh__wirePath--dim{
  stroke:rgba(255,255,255,.15); stroke-width:2; stroke-dasharray:none;
  filter:none; animation:none;
}

/* --- 4. Пачка готовых документов (справа) --- */
.sdgh__docs{ position:absolute; right:0; bottom:.5em; width:23.5em; height:29em; z-index:2; }
.sdgh__doc{
  position:absolute; inset:0;
  border-radius:1.4em; overflow:hidden;
  background:#fff;
  box-shadow:0 2em 4.4em -1.6em rgba(0,0,0,.62), 0 0 0 .1em rgba(255,255,255,.12);
  transform-origin:50% 50%;
}
.sdgh__doc--3{ background:#c5cfdd; transform:rotate(-8deg)   translate(-2.4em,-1.5em); }
.sdgh__doc--2{ background:#e3e9f1; transform:rotate(-3.8deg) translate(-1.2em,-.75em); }
.sdgh__doc--1{ animation:sdgh-float2 9s ease-in-out infinite 1.2s; }
.sdgh__doc--3 .sdgh__docTop{ background:linear-gradient(135deg,#274a76,#2a5ea8); }
.sdgh__doc--2 .sdgh__docTop{ background:linear-gradient(135deg,#17497f,#1a5cbe); }

.sdgh__docTop{
  display:flex; align-items:center; gap:.8em;
  padding:.9em 1.1em;
  background:linear-gradient(135deg,#12447f,#1363d4);
}
.sdgh__docBody{ padding:1.4em 1.3em; display:grid; gap:.75em; }
.sdgh__line{ height:.75em; border-radius:.38em; background:#e8edf5; }
.sdgh__line--t{ height:1.1em; width:70%; background:#cfdcee; margin-bottom:.35em; }
.sdgh__line--s{ width:58%; }
.sdgh__line--m{ width:86%; }
/* строки «печатаются» */
.sdgh__doc--1 .sdgh__line{ animation:sdgh-type 4.2s var(--sdgh-ease) infinite; transform-origin:left center; }
.sdgh__doc--1 .sdgh__line:nth-child(1){ animation-delay:.00s }
.sdgh__doc--1 .sdgh__line:nth-child(2){ animation-delay:.13s }
.sdgh__doc--1 .sdgh__line:nth-child(3){ animation-delay:.26s }
.sdgh__doc--1 .sdgh__line:nth-child(4){ animation-delay:.39s }
.sdgh__doc--1 .sdgh__line:nth-child(6){ animation-delay:.78s }
.sdgh__doc--1 .sdgh__line:nth-child(7){ animation-delay:.91s }
.sdgh__doc--1 .sdgh__line:nth-child(8){ animation-delay:1.04s }
.sdgh__doc--1 .sdgh__mini{ animation:sdgh-fade 4.2s var(--sdgh-ease) infinite .52s; }

/* мини-таблица внутри документа — «форматирование не поехало» */
.sdgh__mini{ margin-top:.4em; display:grid; gap:.3em; }
.sdgh__miniRow{ display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:.3em; }
.sdgh__miniRow span{ height:.9em; border-radius:.2em; background:#eef2f8; border:.1em solid #dde5f0; }
.sdgh__miniRow:first-child span{ background:#dbe6f4; }

/* печать-галочка на верхнем документе */
.sdgh__stamp{
  position:absolute; right:-1.4em; bottom:2.2em;
  width:5.2em; height:5.2em; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#22c55e,#15a34a);
  box-shadow:0 1.2em 2.6em -.8em rgba(34,197,94,.8), 0 0 0 .35em rgba(255,255,255,.14);
  z-index:4;
  animation:sdgh-stamp 4.2s var(--sdgh-ease) infinite;
}
.sdgh__stamp svg{ width:2.7em; height:2.7em; stroke:#fff; }

/* ---------------- волна-переход в белую секцию ---------------- */
.sdgh__wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  width:100%; height:clamp(52px,7vw,110px); display:block;
  fill:#eef2f8;               /* в тон следующей секции (.sdgs--pain) — без стыка */
  pointer-events:none;
}

/* ---------------- анимации ---------------- */
@keyframes sdgh-rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes sdgh-shine{ 0%,62%{ left:-60% } 88%,100%{ left:120% } }
@keyframes sdgh-float{
  0%,100%{ transform:translateY(0) rotate(-2.2deg) }
  50%    { transform:translateY(-1.1em) rotate(-2.2deg) }
}
@keyframes sdgh-float2{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-1em) }
}
@keyframes sdgh-flow{ to{ stroke-dashoffset:-36 } }
@keyframes sdgh-scan{
  0%   { transform:translateY(-1em);   opacity:0 }
  10%  { opacity:1 }
  78%  { transform:translateY(16.5em); opacity:1 }
  92%,100%{ transform:translateY(19em); opacity:0 }
}
@keyframes sdgh-fade{ 0%,10%{ opacity:0 } 30%,88%{ opacity:1 } 97%,100%{ opacity:0 } }
@keyframes sdgh-ping{
  0%  { transform:scale(1);    opacity:.75 }
  70% { transform:scale(1.55); opacity:0 }
  100%{ transform:scale(1.55); opacity:0 }
}
@keyframes sdgh-type{
  0%,4%  { transform:scaleX(.06); opacity:.35 }
  26%,88%{ transform:scaleX(1);   opacity:1 }
  97%,100%{ transform:scaleX(.06); opacity:.35 }
}
@keyframes sdgh-stamp{
  0%,58% { transform:scale(0) rotate(-28deg); opacity:0 }
  70%    { transform:scale(1.16) rotate(4deg); opacity:1 }
  78%,92%{ transform:scale(1) rotate(0deg);   opacity:1 }
  100%   { transform:scale(1) rotate(0deg);   opacity:0 }
}

/* ---------------- адаптив ---------------- */
@media (max-width:1080px){
  .sdgh__inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"badge" "copy" "viz";
    row-gap:clamp(28px,4.6vw,44px);
  }
  .sdgh__viz{ justify-self:center; max-width:470px; }
}
@media (max-width:760px){
  .sdgh__inner{ padding:30px 20px clamp(76px,14vw,110px); row-gap:24px; }
  .sdgh__lead{ margin-top:16px; }
  .sdgh__list{ margin-top:22px; }
  .sdgh__cta{ margin-top:26px; gap:11px; }
  .sdgh__btn{ flex:1 1 100%; padding:15px 20px; }
  .sdgh__badge{ font-size:11.5px; padding:9px 14px 9px 9px; }
  .sdgh__viz{ max-width:400px; }
}
@media (max-width:760px){
  /* лист и веер документов повёрнуты — без запаса их углы срезал край экрана.
     Padding тут не работает: абсолютные дети считаются от padding-box. */
  .sdgh__sheet{ left:1.9em; }
  .sdgh__docs{ right:1.9em; }
}
@media (max-width:420px){
  .sdgh__viz{ max-width:330px; }
  .sdgh__list li{ font-size:13.5px; }
}

/* ---------------- уважение к prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .sdgh__badge,.sdgh__h1,.sdgh__lead,.sdgh__list,.sdgh__cta,.sdgh__viz,
  .sdgh__glow--a,.sdgh__glow--b,.sdgh__sheet,.sdgh__doc--1,
  .sdgh__scan,.sdgh__wirePath,.sdgh__stamp,
  .sdgh__doc--1 .sdgh__line,.sdgh__doc--1 .sdgh__mini,
  .sdgh__core::before,.sdgh__core::after,
  .sdgh__btn--primary::after{
    animation:none !important;
  }
  .sdgh__scan{ opacity:.35; top:6em; }
  .sdgh__stamp{ transform:none; opacity:1; }
  .sdgh__doc--1 .sdgh__line,.sdgh__doc--1 .sdgh__mini{ transform:none; opacity:1; }
  .sdgh__btn:hover{ transform:none; }
}