/* Itqan Code — главная (задание № 387). Облик: тёмная бирюза, изумруд, светло-зелёный неон, ледяное стекло.
   Идея: «иткан» (إتقان) — тщательность; восьмиконечная звезда из двух квадратов — точность построения, как в коде.
   Шрифты (SIL OFL 1.1, fontsource через jsDelivr): Geologica — весь текст; JetBrains Mono — только настоящий код;
   Reem Kufi — одно арабское слово. Источники — shrifty/ISTOCHNIKI.md */

@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url(shrifty/geologica-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url(shrifty/geologica-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap;
  src: url(shrifty/jetbrains-mono-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap;
  src: url(shrifty/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
@font-face { font-family: "Reem Kufi"; font-weight: 400 700; font-display: swap;
  src: url(shrifty/reem-kufi-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

@property --ugol { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* цвет */
  --fon: #04201f;          /* тёмная бирюза — земля */
  --fon-2: #062a2b;        /* шаг тона */
  --fon-3: #0a3635;
  --izumrud: #10b981;
  --izumrud-gl: #0e7a5f;
  --biryuza: #2dd4bf;
  --neon: #a3ffcf;
  --neon-2: #7dffb2;
  --led: rgba(220, 255, 250, .08);
  --led-2: rgba(220, 255, 250, .14);
  --led-kray: rgba(220, 255, 250, .16);
  --chernila: #eafff8;     /* основной текст */
  --chernila-2: #b4d9d0;   /* вторичный, 9:1 на фоне */
  --belyy: #ffffff;
  /* шрифт */
  --tekst: "Geologica", "Segoe UI", system-ui, sans-serif;
  --kod: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --ar: "Reem Kufi", "Noto Kufi Arabic", "Geeza Pro", serif;
  /* размеры: пять ступеней */
  --r-gigant: clamp(3rem, 9.6vw, 9.5rem);
  --r-zag: clamp(2.1rem, 4.6vw, 4.4rem);
  --r-utv: clamp(1.3rem, 2vw, 1.85rem);
  --r-tekst: clamp(1rem, .95rem + .2vw, 1.125rem);
  --r-melko: .9rem;
  /* сетка */
  --pole: clamp(1rem, 3.2vw, 3rem);
  --mezhdu: clamp(6rem, 13vw, 13rem);
  --krug: 28px;
  /* движение (emil: сильный ease-out) */
  --vyhod: cubic-bezier(.23, 1, .32, 1);
  --vhod-vyhod: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--fon); color: var(--chernila);
  font: 400 var(--r-tekst)/1.55 var(--tekst);
  font-optical-sizing: auto; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  -webkit-tap-highlight-color: rgba(163, 255, 207, .2);
  touch-action: manipulation;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
::selection { background: var(--neon); color: var(--fon); }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 6px; }
.skryto { position: absolute; width: 0; height: 0; overflow: hidden; }
.vidno-chitalke { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.propusk { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--neon); color: var(--fon); border-radius: 999px; font-weight: 600; text-decoration: none; }
.propusk:focus { top: 1rem; }

.zag-razdela { font-size: var(--r-zag); line-height: 1; letter-spacing: -.035em; font-weight: 750; color: var(--belyy); }
.utverzhdenie { font-size: var(--r-utv); line-height: 1.32; letter-spacing: -.012em; font-weight: 380; max-width: 30ch; }

/* ——— Кнопки: полностью круглые, заливка одним цветом ——— */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem;
  padding: .85rem 1.6rem; border-radius: 999px; background: var(--neon); color: var(--fon);
  font-weight: 650; text-decoration: none; letter-spacing: -.005em; white-space: nowrap;
  transition: transform 160ms var(--vyhod), background-color 200ms var(--vyhod), color 200ms var(--vyhod);
}
.knopka:hover { background: var(--belyy); }
.knopka:active { transform: scale(.97); }
.knopka--malaya { min-height: 2.75rem; padding: .55rem 1.15rem; font-size: .95rem; }
.knopka--steklo { background: var(--led-2); color: var(--chernila); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--led-kray); }
.knopka--steklo:hover { background: rgba(220, 255, 250, .22); color: var(--belyy); }
.knopka--temnaya { background: var(--fon); color: var(--neon); }
.knopka--temnaya:hover { background: #021514; color: var(--belyy); }

/* ——— Шапка: простая полоса, стекло только при прокрутке ——— */
.shapka {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 2rem;
  padding: .85rem var(--pole); padding-top: max(.85rem, env(safe-area-inset-top));
  transition: background-color 300ms var(--vyhod);
}
.shapka.prokrucheno { background: rgba(4, 32, 31, .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.shapka__znak { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 1.1rem; margin-inline-end: auto; }
.shapka__znak .znak { width: 3rem; height: auto; }
.shapka__nav { display: flex; gap: 1.6rem; }
.shapka__nav a { text-decoration: none; color: var(--chernila-2); font-size: .98rem; transition: color 160ms var(--vyhod); }
.shapka__nav a:hover { color: var(--belyy); }

/* ——— Герой ——— */
.geroy {
  position: relative; min-height: 100svh; display: grid; align-items: center; isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); align-content: center; column-gap: clamp(1.5rem, 5vw, 6rem); row-gap: 0;
  grid-template-rows: auto auto 1fr; padding: 7rem var(--pole) 4rem; overflow: clip;
}
.geroy__tekst { display: contents; }
.geroy__zag { grid-column: 1 / -1; }
.geroy__lid { grid-column: 1; align-self: start; }
.geroy__knopki { grid-column: 1; align-self: start; }
.redaktor { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: clamp(1.4rem, 2.6vw, 2.2rem); }
.pole { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* без JS поле пустое — даём рисунок звезды тканью фона */
.no-js .geroy { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%232dd4bf' stroke-opacity='.18'%3E%3Crect x='70' y='70' width='100' height='100'/%3E%3Crect x='70' y='70' width='100' height='100' transform='rotate(45 120 120)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px; }
.geroy__zag {
  font-size: clamp(3rem, 11.4vw, 12rem); line-height: .9; letter-spacing: -.055em; font-weight: 780; color: var(--belyy);
  font-kerning: none; margin-left: -.05em;
}
.geroy__zag .stroka { display: block; white-space: nowrap; }
.geroy__zag .char { font-weight: var(--w, 780); }
.geroy__lid { margin-top: clamp(1.4rem, 2.6vw, 2.2rem); max-width: 34rem; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.5; color: var(--chernila); }
.geroy__knopki { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.js .geroy__zag { visibility: hidden; }
.js.gotovo .geroy__zag, .js.bez-gsap .geroy__zag { visibility: visible; }

.tochki { display: inline-flex; gap: 6px; }
.tochki i { width: 10px; height: 10px; border-radius: 50%; background: rgba(220, 255, 250, .22); }
.tochki i:first-child { background: var(--neon); opacity: .8; }

.redaktor, .terminal, .pravila {
  border-radius: var(--krug); background: rgba(6, 42, 43, .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(220, 255, 250, .18), inset 0 0 0 1px rgba(220, 255, 250, .08), 0 40px 80px -40px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.redaktor__shapka { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; background: rgba(220, 255, 250, .05); }
.redaktor__fayl { font: 500 .85rem/1 var(--kod); color: var(--chernila-2); }
.redaktor__kod { margin: 0; padding: 1.3rem 1.4rem 1.6rem; font: 400 clamp(.78rem, .7rem + .3vw, .95rem)/1.75 var(--kod); color: var(--chernila); overflow-x: auto; tab-size: 2; min-height: 15.5em; }
.redaktor__kod .k { color: var(--biryuza); }
.redaktor__kod .p { color: var(--chernila); }
.redaktor__kod .s { color: var(--neon); }
.redaktor__kod .b { color: #ffd59a; }
.redaktor__kod .c { color: #7fa9a0; }
.redaktor__kod .pr { color: var(--neon); }
.redaktor__kod .ok { color: var(--neon-2); font-weight: 600; }
.redaktor__kod bdi { font-family: var(--ar); font-size: 1.05em; }
.kareta { display: inline-block; width: .6em; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--neon); animation: migat 1.05s steps(1) infinite; }
@keyframes migat { 50% { opacity: 0; } }
.znak__kursor { animation: migat 1.05s steps(1) infinite; }

/* ——— Кто мы: словарная статья ——— */
.kto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center;
  padding: var(--mezhdu) var(--pole); background: var(--fon-2);
}
.kto__ar {
  font: 700 clamp(7rem, 21vw, 20rem)/1.15 var(--ar); color: var(--neon);
  text-align: start; letter-spacing: 0; padding-block: .1em;
}
.kto__statya { margin-top: 1rem; max-width: 34ch; font-size: var(--r-utv); line-height: 1.4; color: var(--chernila); }
.kto__statya b { font-weight: 700; color: var(--neon); }
.kto__statya i { color: var(--chernila-2); font-style: normal; }
.kto__pravo .utverzhdenie { margin-top: 1.6rem; max-width: 32ch; }
.kto__fakty { margin-top: 2.6rem; display: grid; gap: 1.1rem; max-width: 40rem; }
.kto__fakty li { padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--fon-3); }
.kto__fakty b { color: var(--belyy); font-weight: 650; }

/* ——— Услуги: бенто ——— */
.uslugi { position: relative; padding: var(--mezhdu) var(--pole); isolation: isolate; overflow: clip; }
.uslugi__zvezda { position: absolute; z-index: -1; width: min(70rem, 120vw); right: -18%; top: 4%; color: var(--biryuza); opacity: .55; }
.uslugi > .zag-razdela { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bento {
  display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "web web bot bot" "web web app ai" "brand care app ai";
}
.plitka {
  position: relative; display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  padding: clamp(1.3rem, 2vw, 2rem); border-radius: var(--krug); background: var(--led);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(220, 255, 250, .16), inset 0 0 0 1px rgba(220, 255, 250, .06);
  transition: background-color 300ms var(--vyhod);
}
.plitka h3 { font-size: clamp(1.35rem, 1.9vw, 1.9rem); line-height: 1.05; letter-spacing: -.03em; color: var(--belyy); }
.plitka p { color: var(--chernila); max-width: 34ch; }
/* бегущая кайма */
.plitka::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ugol), transparent 0 62%, var(--biryuza) 78%, var(--neon) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 400ms var(--vyhod);
}
.plitka--web::before { opacity: .9; animation: kayma 6s linear infinite; }
@media (hover: hover) {
  .plitka:hover { background: var(--led-2); }
  .plitka:hover::before { opacity: 1; animation: kayma 3.2s linear infinite; }
}
@keyframes kayma { to { --ugol: 360deg; } }
.plitka--web { grid-area: web; } .plitka--bot { grid-area: bot; } .plitka--app { grid-area: app; }
.plitka--ai { grid-area: ai; } .plitka--brand { grid-area: brand; } .plitka--care { grid-area: care; }
.plitka--care { background: rgba(16, 185, 129, .16); }

.mini-brauzer { margin-top: auto; flex: none; border-radius: 18px; overflow: hidden; background: #eef8f5; color: #08302c; transform: translateY(8px); }
.mini-brauzer__adres { display: flex; gap: .9rem; align-items: center; padding: .65rem .9rem; background: #dcefe9; font-size: .8rem; color: #2b5d55; }
.mini-brauzer__adres .tochki i { background: #9fc8be; width: 8px; height: 8px; }
.mini-brauzer__telo { position: relative; display: grid; gap: .6rem; padding: 1.5rem 1.4rem 1.8rem; min-height: 13rem; }
.mb-zag { font-size: clamp(1.2rem, 1.9vw, 1.8rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.05; max-width: 14ch; }
.mb-tekst { font-size: .9rem; color: #2b5d55; }
.mb-knopka { justify-self: start; padding: .5rem 1rem; border-radius: 999px; background: #0e7a5f; color: #fff; font-size: .85rem; font-weight: 600; }
.mb-ar { position: absolute; right: 1.2rem; bottom: .6rem; font: 700 clamp(2rem, 4vw, 3.6rem)/1.6 var(--ar); color: #0e7a5f; opacity: .9; }

.mini-chat { margin-top: auto; display: grid; gap: .5rem; font-size: .9rem; }
.puzyr { max-width: 82%; padding: .6rem .9rem; border-radius: 16px 16px 16px 4px; background: var(--fon-3); line-height: 1.4; }
.puzyr--ya { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--izumrud-gl); color: var(--belyy); }
.mini-chat__knopki { display: flex; gap: .4rem; flex-wrap: wrap; }
.mini-chat__knopki i { font-style: normal; padding: .4rem .8rem; border-radius: 999px; background: rgba(163, 255, 207, .14); color: var(--neon); font-size: .82rem; }

.mini-telefon {
  margin: auto auto 0; width: min(100%, 13.5rem); display: grid; gap: .55rem; padding: 1.1rem .9rem 1.4rem;
  border-radius: 30px 30px 0 0; background: var(--fon); box-shadow: inset 0 0 0 6px #0b3a38; font-size: .82rem; transform: translateY(14%);
}
.mt-chasy { color: var(--chernila-2); font-size: .75rem; }
.mt-kol { font-size: 1.05rem; } .mt-kol b { font-size: 1.8rem; color: var(--neon); letter-spacing: -.04em; }
.mt-polosa { height: 8px; border-radius: 99px; background: var(--fon-3); overflow: hidden; }
.mt-polosa i { display: block; height: 100%; width: 60%; background: var(--izumrud); border-radius: inherit; }
.mt-ryad { padding: .55rem .7rem; border-radius: 12px; background: var(--fon-3); }
.mt-ryad--gotovo { color: var(--chernila-2); text-decoration: line-through; }

.mini-graf { margin-top: auto; width: 100%; overflow: visible; }
.mg-linii path { fill: none; stroke: var(--biryuza); stroke-width: 1.4; stroke-opacity: .55; }
.mg-uzly circle { fill: var(--fon); stroke: var(--neon); stroke-width: 2; }
.mg-impuls { fill: var(--neon); }

.mini-palitra { margin-top: auto; display: flex; gap: .4rem; }
.mini-palitra i { flex: 1; height: 2.6rem; border-radius: 999px; }
.mini-palitra i:nth-child(1) { background: var(--fon); box-shadow: inset 0 0 0 1px var(--led-kray); }
.mini-palitra i:nth-child(2) { background: var(--izumrud-gl); }
.mini-palitra i:nth-child(3) { background: var(--biryuza); }
.mini-palitra i:nth-child(4) { background: var(--neon); }
.mini-palitra i:nth-child(5) { background: var(--belyy); }

/* ——— Проекты: лента ——— */
.proekty { position: relative; padding-block: var(--mezhdu) 0; background: var(--fon); overflow: clip; }
.proekty__ryad { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.proekty__vvod { flex: 0 0 min(30rem, 34vw); padding-left: var(--pole); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.proekty__lenta {
  flex: 1 1 auto; min-width: 0; display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); padding: 0 var(--pole) 3rem 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--izumrud-gl) transparent;
  overscroll-behavior-x: contain; scroll-padding-inline: var(--pole);
}
.podskazka-telefon { display: none; }
.proekty__podskazka { color: var(--chernila-2); font-size: var(--r-melko); }
.js-lenta .proekty { min-height: 100svh; display: flex; align-items: center; padding-block: 5.5rem 2rem; }
.js-lenta .proekty__lenta { flex: none; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.proekt { flex: 0 0 min(44rem, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.4rem; }
.proekt__tekst { display: grid; gap: .45rem; max-width: 38rem; }
.proekt__tekst h3 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); letter-spacing: -.035em; line-height: 1; color: var(--belyy); }
.proekt__tekst a, .proekt__vnutr { justify-self: start; color: var(--neon); font-weight: 550; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; transition: color 160ms var(--vyhod); }
.proekt__tekst a:hover { color: var(--belyy); }
.proekt__vnutr { text-decoration: none; color: var(--chernila-2); }

.okno { position: relative; height: clamp(17rem, 30vw, 27rem); border-radius: var(--krug); overflow: hidden; background: #08302f; box-shadow: inset 0 0 0 1px rgba(220, 255, 250, .1); color: var(--chernila); }
.okno__adres { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; background: rgba(220, 255, 250, .06); font-size: .85rem; color: var(--chernila-2); }
.okno__telo { height: calc(100% - 2.6rem); padding: clamp(1rem, 2.4vw, 2rem); }
.okno--svetloe { background: #f2faf7; color: #08302c; }
.okno--svetloe .okno__adres { background: #dcefe9; color: #2b5d55; }
.okno--svetloe .tochki i { background: #9fc8be; }

.medina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.medina__bukva { display: grid; place-items: center; aspect-ratio: 1; border-radius: 24px; background: #0e7a5f; color: #fff; font: 700 clamp(5rem, 11vw, 10rem)/1.4 var(--ar); }
.medina__spisok { display: grid; gap: .6rem; }
.medina__zag { font-size: clamp(1.1rem, 1.8vw, 1.6rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.medina__punkt { padding: .55rem .8rem; border-radius: 12px; background: #dcefe9; font-size: .88rem; }
.medina__punkt--da { color: #2b5d55; text-decoration: line-through; text-decoration-color: #0e7a5f; }
.medina__polosa { height: 8px; border-radius: 99px; background: #dcefe9; overflow: hidden; }
.medina__polosa i { display: block; width: 66%; height: 100%; background: #10b981; }

.okno--telefon { width: min(100%, 22rem); margin-inline: auto; border-radius: 40px; background: #051c1b; box-shadow: inset 0 0 0 8px #0d3b39; padding: 1.4rem 1.2rem; }
.telefon__shapka { display: flex; align-items: baseline; gap: .6rem; padding: .4rem .4rem 1rem; }
.telefon__shapka span { color: var(--chernila-2); font-size: .82rem; }
.telefon__lenta, .telefon__chat { display: grid; gap: .7rem; }
.post { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: 18px; background: var(--fon-3); }
.post b { font-size: .95rem; }
.post i { height: 7px; border-radius: 9px; background: rgba(220, 255, 250, .16); }
.post i.korotkaya { width: 55%; }
.telefon__chat .puzyr { font-size: .9rem; }
.telefon__chat .puzyr em { display: block; margin-top: .5rem; font-style: normal; font-size: .78rem; color: var(--neon); }

.gospod { display: grid; align-content: center; gap: 1.1rem; background: #062221; }
.gospod__shag { color: var(--chernila-2); font-size: .85rem; }
.gospod__vopros { font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; color: var(--belyy); max-width: 16ch; }
.gospod__otvety { display: flex; flex-wrap: wrap; gap: .6rem; }
.gospod__otvety i { font-style: normal; padding: .6rem 1.1rem; border-radius: 999px; background: var(--fon-3); font-size: .9rem; }
.gospod__otvety i:last-child { background: var(--neon); color: var(--fon); font-weight: 600; }
.gospod__tochki { display: flex; gap: .4rem; }
.gospod__tochki i { width: 2rem; height: 5px; border-radius: 9px; background: var(--fon-3); }
.gospod__tochki i.da { background: var(--izumrud); }

.okno--pult { background: #0f1414; }
.pult { display: grid; align-content: start; gap: .5rem; }
.pult__ryad { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; background: #161d1d; font-size: .88rem; }
.pult__ryad i { font-style: normal; color: #a9b8b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pult__ryad em { font-style: normal; font-size: .78rem; color: #a9b8b5; }
.pult__ryad em.idet { color: #ffc58a; }

/* ——— Как работаем ——— */
.kak { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; padding: var(--mezhdu) var(--pole); }
.kak__levo { position: sticky; top: 7rem; display: grid; gap: 1.6rem; }
.kak__primech { color: var(--chernila-2); max-width: 30ch; }
.terminal { background: rgba(3, 22, 21, .82); }
.terminal__telo { padding: 1.4rem 1.5rem 1.8rem; font-family: var(--kod); font-size: clamp(.82rem, .76rem + .25vw, .98rem); }
.t-komanda { color: var(--chernila); margin-bottom: 1.2rem; }
.t-prompt { color: var(--neon); margin-right: .5ch; }
.kommity { display: grid; gap: 1.35rem; }
.kommity li { display: block; line-height: 1.6; color: var(--chernila); }
.kommity .hesh { color: #ffd59a; font-family: inherit; }
.kommity .vetka { color: var(--biryuza); font-family: inherit; }
.kommity b { color: var(--neon); font-weight: 600; }
.kommity li > span { display: block; margin-top: .3rem; padding-left: 2ch; font-family: var(--tekst); font-size: var(--r-tekst); line-height: 1.5; color: var(--chernila-2); max-width: 52ch; }

/* ——— Ценности ——— */
.cennosti { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 6rem); padding: var(--mezhdu) var(--pole); background: var(--fon-2); overflow: clip; }
.cennosti__levo { display: grid; align-content: start; gap: 1.6rem; position: relative; }
.cennosti__zvezda { width: min(26rem, 80%); color: var(--neon); opacity: .5; margin-top: 2rem; }
.pravila { background: rgba(3, 22, 21, .7); }
.pravila__spisok { padding: .6rem 0 .8rem; }
.pravila__spisok li { display: grid; gap: .35rem; padding: 1.1rem 1.5rem; }
.pravila__spisok li + li { box-shadow: inset 0 1px 0 rgba(220, 255, 250, .06); }
.pravila__spisok code { font: 500 .88rem/1.4 var(--kod); color: var(--neon); }
.pravila__spisok b { color: var(--belyy); font-weight: 650; }

/* ——— Числа ——— */
.chisla { padding: var(--mezhdu) var(--pole); }
.chisla__ryad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.chisla__ryad div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .6rem; }
.chisla__ryad dd { font-size: clamp(4.5rem, 11vw, 11rem); line-height: .85; letter-spacing: -.06em; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
.chisla__ryad dt { font-size: clamp(1rem, 1.2vw, 1.2rem); color: var(--chernila); max-width: 14ch; line-height: 1.3; }

/* ——— Призыв: поле изумруда ——— */
.svyaz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; padding: clamp(5rem, 10vw, 10rem) var(--pole); background: var(--neon); color: var(--fon); }
.svyaz__zag { font-size: var(--r-gigant); line-height: .9; letter-spacing: -.055em; font-weight: 800; }
.svyaz__lid { margin-top: 1.6rem; font-size: var(--r-utv); line-height: 1.35; max-width: 26ch; }
.sostavitel fieldset { border: 0; margin: 0; padding: 0; }
.sostavitel legend { padding: 0; font-weight: 650; font-size: 1.1rem; margin-bottom: .9rem; }
.sostavitel__vybor { display: flex; flex-wrap: wrap; gap: .5rem; }
.sostavitel__vybor label { position: relative; cursor: pointer; }
.sostavitel__vybor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sostavitel__vybor span { display: inline-flex; min-height: 2.9rem; align-items: center; padding: .55rem 1.15rem; border-radius: 999px; background: rgba(4, 32, 31, .1); font-weight: 550; transition: background-color 160ms var(--vyhod), color 160ms var(--vyhod), transform 160ms var(--vyhod); }
.sostavitel__vybor label:hover span { background: rgba(4, 32, 31, .18); }
.sostavitel__vybor input:checked + span { background: var(--fon); color: var(--neon); }
.sostavitel__vybor input:focus-visible + span { outline: 3px solid var(--fon); outline-offset: 2px; }
.sostavitel__vybor label:active span { transform: scale(.96); }
.sostavitel__soobshchenie { margin: 1.5rem 0; padding: 1.2rem 1.4rem; border-radius: 22px 22px 22px 6px; background: var(--fon); color: var(--chernila); max-width: 34rem; }
.sostavitel__podpis { display: block; font-size: var(--r-melko); color: var(--chernila-2); margin-bottom: .4rem; }
.sostavitel__soobshchenie b { color: var(--neon); }
.knopka--temnaya { min-height: 3.6rem; padding-inline: 2rem; font-size: 1.05rem; }

/* ——— Подвал как консоль ——— */
.podval { padding: clamp(3.5rem, 7vw, 6rem) var(--pole) 2rem; background: #021514; overflow: clip; }
.konsol { font: 400 clamp(.85rem, .8rem + .2vw, 1rem)/1.8 var(--kod); color: var(--chernila); max-width: 60rem; }
.konsol .vyvod { color: var(--chernila-2); margin-bottom: .6rem; }
.konsol a { color: var(--neon); text-underline-offset: .2em; }
.konsol a:hover { color: var(--belyy); }
.konsol__ssylki { display: flex; flex-wrap: wrap; column-gap: 2ch; }
.kursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.18em; background: var(--neon); animation: migat 1.05s steps(1) infinite; }
.podval__imya { display: flex; align-items: center; gap: .15em; margin-top: clamp(3rem, 6vw, 5rem); font-size: clamp(3rem, 14.2vw, 15rem); line-height: .9; letter-spacing: -.06em; font-weight: 800; color: var(--belyy); white-space: nowrap; }
.podval__imya .znak { width: 1.35em; flex: none; height: auto; }
.podval__prava { margin-top: 2rem; color: var(--chernila-2); font-size: var(--r-melko); }

/* ——— Планшет ——— */
@media (max-width: 1080px) {
  .geroy { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 8rem; }
  .podskazka-stol { display: none; } .podskazka-telefon { display: inline; }
  .redaktor { grid-column: 1; grid-row: auto; max-width: 40rem; margin-top: 2.5rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "web web" "bot bot" "app ai" "brand care"; }
  .plitka--app, .plitka--ai { min-height: 22rem; }
  .kto, .kak, .cennosti, .svyaz { grid-template-columns: minmax(0, 1fr); }
  .kak__levo { position: static; }
  .chisla__ryad { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
  .proekty__ryad { display: block; }
  .proekty__vvod { padding-inline: var(--pole); margin-bottom: 2.5rem; }
  .proekty__lenta { padding-left: var(--pole); }
  .cennosti__zvezda { display: none; }
}
@media (max-width: 860px) { .shapka__nav { display: none; } }

/* ——— Телефон ——— */
@media (max-width: 600px) {
  :root { --krug: 22px; }
  .geroy { padding-top: 6.5rem; padding-bottom: 3rem; gap: 2rem; }
  .geroy__zag { font-size: clamp(2.6rem, 12.2vw, 3.4rem); }
  .geroy__knopki .knopka { flex: 1 1 auto; }
  .redaktor__kod { font-size: .74rem; min-height: 0; white-space: pre-wrap; }
  .redaktor__kod .c { display: none; }
  .shapka { gap: 1rem; }
  .shapka__znak span { display: none; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "web" "bot" "app" "ai" "brand" "care"; }
  .plitka--app, .plitka--ai { min-height: 0; }
  .mini-telefon { transform: none; margin-bottom: -1.4rem; }
  .medina { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .medina__punkt:nth-of-type(3) { display: none; }
  .pult__ryad { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .pult__ryad em { display: none; }
  .chisla__ryad { column-gap: 1rem; }
  .podval__imya { font-size: 13.4vw; }
}

/* ——— Уважение к настройкам ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .kareta, .kursor, .znak__kursor { animation: none; }
  .plitka--web::before { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .plitka, .redaktor, .terminal, .pravila, .knopka--steklo, .shapka.prokrucheno { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fon-3); }
}
@media (prefers-contrast: more) {
  :root { --chernila-2: #dff5ef; }
  .plitka, .redaktor, .terminal, .pravila { box-shadow: inset 0 0 0 2px var(--chernila); }
}