/* Общие стили сайта студии Azgard — 17.08.2026 01:4x МСК.
   Один файл на все страницы: главная и страницы кейсов. Тёмная тема, шрифт Golos Text. */

@font-face{font-family:'Golos';src:url('fonts/GolosText-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Golos';src:url('fonts/GolosText-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Golos';src:url('fonts/GolosText-Black.ttf') format('truetype');font-weight:900;font-display:swap}

:root{
  --fon:#0B0B10; --fon2:#12121A; --karta:#171722; --ramka:#262635;
  --text:#F4F4F7; --tusk:#9C9CAE; --akcent:#8B5CF6; --akcent2:#22D3EE; --zeleny:#34D399;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fon);color:var(--text);font-family:'Golos',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.obertka{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* ——— шапка ——— */
.shapka{position:sticky;top:0;z-index:30;background:rgba(11,11,16,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--ramka)}
.shapka .obertka{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{font-weight:900;font-size:22px;letter-spacing:.06em}
.logo span{color:var(--akcent)}
.menyu{display:flex;gap:26px;font-size:15px;color:var(--tusk)}
.menyu a:hover{color:var(--text)}
.knopka{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;transition:.2s;border:1px solid transparent;cursor:pointer}
.knopka.osn{background:var(--akcent);color:#fff}
.knopka.osn:hover{background:#7C4DEF;transform:translateY(-1px)}
.knopka.vtor{border-color:var(--ramka);color:var(--text);background:var(--karta)}
.knopka.vtor:hover{border-color:var(--akcent)}

/* ——— первый экран ——— */
.geroy{position:relative;padding:96px 0 72px;overflow:hidden}
.geroy::before{content:'';position:absolute;inset:-40% -20% auto -20%;height:720px;background:
  radial-gradient(closest-side, rgba(139,92,246,.28), transparent 70%),
  radial-gradient(closest-side, rgba(34,211,238,.16), transparent 70%);
  background-position:22% 10%, 78% 0;background-repeat:no-repeat;filter:blur(10px);animation:dyshit 9s ease-in-out infinite alternate}
@keyframes dyshit{from{transform:translateY(-14px) scale(1)}to{transform:translateY(14px) scale(1.06)}}
.geroy .obertka{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.geroy h1{font-weight:900;font-size:clamp(34px,5.2vw,60px);line-height:1.06;letter-spacing:-.02em}
.geroy h1 em{font-style:normal;background:linear-gradient(90deg,var(--akcent),var(--akcent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.geroy p.lid{margin-top:20px;font-size:19px;color:var(--tusk);max-width:560px}
.knopki{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.fakty{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.fakt b{display:block;font-weight:900;font-size:24px}
.fakt span{color:var(--tusk);font-size:14px}

/* окно кода в герое */
.okno{background:var(--karta);border:1px solid var(--ramka);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.okno .verh{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ramka);background:var(--fon2)}
.tochka{width:11px;height:11px;border-radius:50%}
.okno pre{padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.75;color:#CBD5E1;white-space:pre-wrap}
.okno .kom{color:#64748B}
.okno .kl{color:var(--akcent2)}
.okno .st{color:var(--zeleny)}
.kursor{display:inline-block;width:9px;height:16px;background:var(--akcent);vertical-align:-3px;animation:migat 1.05s steps(1) infinite}
@keyframes migat{50%{opacity:0}}

/* ——— секции ——— */
section{padding:76px 0}
.zagolovok{max-width:760px;margin-bottom:40px}
.zagolovok h2{font-weight:900;font-size:clamp(26px,3.6vw,40px);line-height:1.12;letter-spacing:-.01em}
.zagolovok p{margin-top:14px;color:var(--tusk);font-size:17px}
.setka{display:grid;gap:22px}
.setka.tri{grid-template-columns:repeat(3,1fr)}
.setka.dva{grid-template-columns:repeat(2,1fr)}
.setka.chetyre{grid-template-columns:repeat(4,1fr)}

.karta{background:var(--karta);border:1px solid var(--ramka);border-radius:var(--radius);overflow:hidden;transition:.22s;display:flex;flex-direction:column}
.karta:hover{transform:translateY(-4px);border-color:var(--akcent)}
.karta .foto{background:var(--fon2);border-bottom:1px solid var(--ramka)}
.karta .telo{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.karta h3{font-size:20px;font-weight:900}
.karta p{color:var(--tusk);font-size:15px}
.metki{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.metka{font-size:13px;color:var(--akcent2);border:1px solid var(--ramka);border-radius:999px;padding:5px 12px}
.podrobnee{color:var(--akcent);font-weight:700;font-size:15px}

/* услуги */
.usluga{background:var(--karta);border:1px solid var(--ramka);border-radius:var(--radius);padding:24px}
.usluga h3{font-size:19px;font-weight:900;margin-bottom:12px}
.usluga ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--tusk);font-size:15px}
.usluga li{padding-left:20px;position:relative}
.usluga li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--akcent)}
.cena{margin-top:18px;padding-top:16px;border-top:1px solid var(--ramka);font-weight:900;font-size:20px}
.cena small{display:block;font-weight:500;font-size:13px;color:var(--tusk);margin-top:4px}

/* шаги */
.shag{background:var(--karta);border:1px solid var(--ramka);border-radius:var(--radius);padding:22px;position:relative}
.nomer{width:34px;height:34px;border-radius:50%;background:rgba(139,92,246,.16);color:var(--akcent2);display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:14px}
.shag h4{font-size:17px;font-weight:900;margin-bottom:8px}
.shag p{color:var(--tusk);font-size:15px}

/* форма */
.zayavka{background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(34,211,238,.06));border:1px solid var(--ramka);border-radius:26px;padding:44px}
.zayavka h2{font-weight:900;font-size:clamp(24px,3.2vw,34px)}
.zayavka p{color:var(--tusk);margin-top:10px}
.polya{display:flex;flex-direction:column;gap:14px;margin-top:26px;max-width:520px}
.polya input,.polya textarea{width:100%;background:var(--fon2);border:1px solid var(--ramka);border-radius:14px;padding:15px 18px;color:var(--text);font:inherit;font-size:15px}
.polya textarea{min-height:120px;resize:vertical}
.polya input:focus,.polya textarea:focus{outline:none;border-color:var(--akcent)}
.otvet{font-weight:700;color:var(--zeleny);min-height:22px}

/* подвал */
.podval{border-top:1px solid var(--ramka);padding:36px 0;color:var(--tusk);font-size:14px}
.podval .obertka{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.podval a:hover{color:var(--text)}

/* появление при прокрутке */
.poyav{transition:.6s ease}
.js .poyav{opacity:0;transform:translateY(18px)}
.js .poyav.vidno{opacity:1;transform:none}

/* страница кейса */
.keys-shapka{padding:64px 0 30px}
.keys-shapka .nazad{color:var(--tusk);font-size:15px}
.keys-shapka h1{font-weight:900;font-size:clamp(30px,4.6vw,50px);margin:16px 0 14px;letter-spacing:-.02em}
.keys-shapka p{color:var(--tusk);font-size:18px;max-width:780px}
.plitki{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 10px}
.plitka{background:var(--karta);border:1px solid var(--ramka);border-radius:var(--radius);padding:20px}
.plitka b{display:block;font-size:15px;color:var(--akcent2);margin-bottom:8px}
.plitka span{color:var(--tusk);font-size:15px}
.ekran{border:1px solid var(--ramka);border-radius:var(--radius);overflow:hidden;background:var(--fon2);margin:22px 0}
.podpis{color:var(--tusk);font-size:14px;margin-top:-8px;margin-bottom:26px}
.tekst h2{font-weight:900;font-size:26px;margin:34px 0 14px}
.tekst p{color:#D7D7E0;margin-bottom:14px;font-size:16.5px}
.tekst ul{color:#D7D7E0;margin:0 0 16px 20px;display:flex;flex-direction:column;gap:8px;font-size:16.5px}

@media(max-width:900px){
  .geroy .obertka{grid-template-columns:1fr;gap:34px}
  .setka.tri,.setka.dva,.setka.chetyre,.plitki{grid-template-columns:1fr}
  .menyu{display:none}
  section{padding:56px 0}
  .zayavka{padding:28px}
}