/* Общий стиль сайта: цвета, шрифты, шапка, кнопки, первый экран. Подключается на КАЖДОЙ странице —
   так все страницы выглядят одинаково. Правила простыми словами — в СТИЛЬ.md.
   Первый экран (.sh-*) — по мотивам Sculpture Hero by guglielmogiannattasio.it (21st.dev). */

:root {
  /* цвета светлой темы */
  --sh-bg: #EBE9E5;        /* фон: тёплый светло-серый, как бумага */
  --sh-fg: #151514;        /* текст и кнопки: почти чёрный */
  --sh-acc: #151514;       /* акцент в заголовке (курсив) */
  --sh-muted: 0.72;        /* прозрачность второстепенного текста */
  /* шрифты: заголовки и текст — Geist, акцент-курсив — Instrument Serif (для русских букв — Cormorant Garamond) */
  --sh-head: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --sh-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --sh-accent: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  /* отступ от края страницы: на телефоне 20 px, на большом экране 48 px */
  --sh-side: clamp(20px, 3.2vw, 48px);
  --sh-ease: cubic-bezier(.2, .7, .2, 1);
  --sh-h: 100svh;          /* высота первого экрана */
}
[data-theme="dark"] { --sh-bg: #111110; --sh-fg: #F1EFEA; --sh-acc: #F1EFEA; }

* , *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--sh-bg); color: var(--sh-fg); font-family: var(--sh-body); -webkit-font-smoothing: antialiased; transition: background-color .6s ease, color .6s ease; }

/* ── первый экран ─────────────────────────────────────────────────── */
.sh-root{position:relative;width:100%;height:var(--sh-h);overflow:hidden;isolation:isolate;container-type:size;transition:background-color .6s ease,color .6s ease;
  background:var(--sh-bg);color:var(--sh-fg);font-family:var(--sh-body);-webkit-font-smoothing:antialiased;
  touch-action:pan-y;display:flex;flex-direction:column}
.sh-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.sh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.sh-fallback{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;transition:opacity .5s ease}
.sh-root[data-gl="on"] .sh-canvas{opacity:1}
.sh-root[data-gl="on"] .sh-fallback{opacity:0}
.sh-root[data-swap="1"] .sh-canvas{opacity:0;transition-duration:.25s}
.sh-root[data-swap="1"] .sh-fallback{opacity:0;transition-duration:.25s}
.sh-backdrop{position:absolute;left:50%;z-index:0;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--sh-head);font-weight:600;letter-spacing:-.06em;line-height:.8;color:color-mix(in srgb,var(--sh-fg) 5%,transparent)}

/* ── шапка (одинаковая на всех страницах) ─────────────────────────── */
.sh-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--sh-side) 0}
.sh-brand{font-family:var(--sh-head);font-weight:600;font-size:17px;letter-spacing:-.02em;color:inherit;text-decoration:none}
.sh-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);list-style:none;margin:0;padding:0}
.sh-link{color:inherit;text-decoration:none;font-size:13.5px;letter-spacing:-.005em;opacity:var(--sh-muted);transition:opacity .2s}
.sh-link:hover{opacity:1}
.sh-theme{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;color:inherit;background:transparent;
  border:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent);transition:background .25s,color .25s}
.sh-theme:hover{background:var(--sh-fg);color:var(--sh-bg)}
.sh-navcta{color:inherit;text-decoration:none;font-size:13.5px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent);
  border-radius:999px;transition:background .25s,color .25s}
.sh-navcta:hover{background:var(--sh-fg);color:var(--sh-bg)}
.sh-theme:focus-visible,.sh-root a:focus-visible,a:focus-visible{outline:2px solid var(--sh-fg);outline-offset:4px}

/* ── подсказка «проведите по форме» ───────────────────────────────── */
.sh-hint{position:absolute;z-index:1;transform:translate(-50%,0);display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;pointer-events:none;transition:opacity .8s ease}
.sh-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:sh-pulse 2.4s ease-in-out infinite}
.sh-root[data-touched="1"] .sh-hint{opacity:0}
@keyframes sh-pulse{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}}
.sh-spacer{flex:1 1 auto;min-height:0}
/* текст только для программ чтения с экрана (описание картинки) */
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── заголовок, текст, кнопки (одинаковые на всех страницах) ───────── */
.sh-content{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:end;
  gap:clamp(24px,4cqw,72px);padding:0 var(--sh-side) clamp(28px,3.4cqw,52px)}
.sh-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin:0 0 clamp(14px,1.6cqw,22px);display:flex;align-items:center;gap:12px}
.sh-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.sh-h1{font-family:var(--sh-head);font-weight:500;font-size:clamp(40px,min(6.6cqw,11.5cqh),124px);line-height:.92;letter-spacing:-.045em;margin:0;text-wrap:balance}
.sh-h1 .sh-line{display:block}
.sh-accent{font-family:var(--sh-accent);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--sh-acc)}
.sh-aside{max-width:400px;justify-self:end;padding-bottom:.6em}
.sh-body{font-size:clamp(15px,1.1cqw,17px);line-height:1.5;letter-spacing:-.01em;margin:0 0 26px;opacity:.78;text-wrap:pretty}
.sh-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.sh-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;background:var(--sh-fg);
  color:var(--sh-bg);text-decoration:none;font-size:14.5px;font-weight:500;letter-spacing:-.01em;transition:transform .3s var(--sh-ease),opacity .2s}
.sh-btn:hover{transform:translateY(-1px)}
.sh-btn svg,.sh-txt svg{transition:transform .3s var(--sh-ease)}
.sh-btn:hover svg,.sh-txt:hover svg{transform:translateX(3px)}
.sh-txt{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:14.5px;font-weight:500;
  letter-spacing:-.01em;padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--sh-fg) 30%,transparent)}
.sh-credit{position:absolute;z-index:2;right:var(--sh-side);bottom:10px;font-size:10px;letter-spacing:.06em;color:inherit;opacity:.38;text-decoration:none}
.sh-credit:hover{opacity:.8}

@container (max-width:1023px){
  .sh-content{grid-template-columns:1fr;gap:28px}
  .sh-aside{justify-self:start;max-width:520px;padding-bottom:0}
  .sh-h1{font-size:clamp(40px,min(9.5cqw,9cqh),96px)}
}
@container (max-width:767px){ .sh-links li:not(.sh-keep){display:none} }
@container (max-width:639px){
  .sh-nav{padding-top:20px}
  .sh-h1{font-size:clamp(36px,min(12.5cqw,7.2cqh),60px);line-height:.94}
  .sh-body{font-size:15px;margin-bottom:20px}
  .sh-eyebrow{font-size:11px}
  .sh-ctas{gap:18px}
  .sh-btn{height:48px}
  .sh-content{padding-bottom:40px}
  .sh-credit{right:auto;left:50%;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .sh-hint::before{animation:none}
  .sh-canvas,.sh-fallback,.sh-btn,.sh-btn svg,.sh-txt svg{transition:none}
}

/* ── разделы под первым экраном (одинаковые на всех страницах) ────── */
html{scroll-behavior:smooth}
.sh-section{padding:clamp(72px,10vw,150px) var(--sh-side) 0}
.sh-section > .sh-eyebrow{margin-bottom:clamp(18px,2vw,28px)}
.sh-h2{font-family:var(--sh-head);font-weight:500;font-size:clamp(32px,5.2vw,84px);line-height:.96;letter-spacing:-.04em;margin:0;max-width:16ch;text-wrap:balance}
.sh-h2 .sh-line{display:block}
.sh-cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end}
.sh-text{max-width:520px}
.sh-text p{font-size:clamp(15px,1.15vw,17px);line-height:1.5;letter-spacing:-.01em;margin:0 0 16px;opacity:.78;text-wrap:pretty}
.sh-text p:last-child{margin-bottom:0}
.sh-rule{border:0;height:1px;margin:0;background:color-mix(in srgb,var(--sh-fg) 22%,transparent)}

/* три коротких факта в строку */
.sh-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(48px,6vw,88px) 0 0;padding:0;list-style:none;
  border-top:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent)}
.sh-facts li{padding:22px 24px 0 0}
.sh-facts b{display:block;font-family:var(--sh-head);font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;margin-bottom:6px}
.sh-facts span{font-size:14.5px;line-height:1.45;opacity:.68}

/* список «что делаю»: строки с тонкой линией сверху */
.sh-list{margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none}
.sh-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;
  border-top:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent)}
.sh-list li:last-child{border-bottom:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent)}
.sh-list h3{font-family:var(--sh-head);font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;line-height:1.05;margin:0}
.sh-list p{font-size:clamp(15px,1.1vw,16.5px);line-height:1.5;margin:0;opacity:.72;max-width:440px}
.sh-note{font-size:14.5px;line-height:1.5;opacity:.62;margin:22px 0 0;max-width:520px}

/* шаги «как работаю»: номер курсивом, заголовок, текст */
.sh-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none;counter-reset:step}
.sh-steps li{padding:22px 22px 0 0;border-top:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent);counter-increment:step}
.sh-steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--sh-accent);font-style:italic;font-size:clamp(30px,2.6vw,40px);line-height:1;margin-bottom:18px}
.sh-steps h3{font-family:var(--sh-head);font-weight:500;font-size:18px;letter-spacing:-.02em;margin:0 0 8px}
.sh-steps p{font-size:14.5px;line-height:1.5;margin:0;opacity:.7}

/* контакты: крупный телефон и кнопки */
.sh-contact{padding-bottom:clamp(64px,8vw,120px)}
.sh-phone{display:inline-block;margin:clamp(28px,3vw,44px) 0 clamp(20px,2.4vw,28px);font-family:var(--sh-head);font-weight:500;
  font-size:clamp(26px,2.8vw,40px);letter-spacing:-.03em;line-height:1.1;color:inherit;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--sh-fg) 30%,transparent);transition:border-color .3s var(--sh-ease)}
.sh-phone:hover{border-color:var(--sh-fg)}

/* подвал */
.sh-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:22px var(--sh-side) calc(22px + env(safe-area-inset-bottom,0px));
  font-size:13px;opacity:.62;border-top:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent)}
.sh-foot a{color:inherit;text-decoration:none}

@media (max-width:1023px){
  .sh-cols{grid-template-columns:1fr;align-items:start}
  .sh-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media (max-width:639px){
  .sh-facts{grid-template-columns:1fr}
  .sh-facts li{padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--sh-fg) 22%,transparent)}
  .sh-facts li:last-child{border-bottom:0}
  .sh-list li{grid-template-columns:1fr;gap:8px}
  .sh-steps{grid-template-columns:1fr;row-gap:28px}
}
/* самые маленькие телефоны (ширина 320): имя в шапке в одну строку */
@media (max-width:359px){
  .sh-brand{font-size:15px;white-space:nowrap}
  .sh-links{gap:10px}
  .sh-navcta{padding:7px 11px;font-size:12.5px}
}
/* большие мониторы (от 1920): текст в разделах крупнее, чтобы не терялся */
@media (min-width:1920px){
  .sh-text{max-width:620px}
  .sh-text p,.sh-list p{font-size:19px}
  .sh-list p{max-width:520px}
  .sh-facts b{font-size:26px}
  .sh-facts span,.sh-steps p,.sh-note{font-size:17px}
  .sh-steps h3{font-size:21px}
  .sh-list h3{font-size:40px}
  .sh-foot{font-size:14px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .sh-phone{transition:none} }