/* ─── Шрифты лежат рядом с сайтом, а не на Google Fonts ───
       Так «ё», «₽» и «№» не зависят от того, доехал ли CDN,
       и страница одинаково выглядит в России без VPN. */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/manrope-400-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/manrope-500-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/manrope-500-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/manrope-500-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/manrope-500-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/manrope-600-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/manrope-600-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/manrope-600-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/manrope-600-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/jbmono-400-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/jbmono-400-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-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/jbmono-400-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/jbmono-400-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/jbmono-500-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/jbmono-500-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-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/jbmono-500-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/jbmono-500-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* ─── Reset & Base ─── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #0B0B0D;
    }
    ::selection { background: rgba(192,137,240,0.25); color: #F4F4F5; }
    input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.5); }
    a { text-decoration: none; }

    a:focus-visible, button:focus-visible, input:focus-visible,
    textarea:focus-visible, [tabindex]:focus-visible {
      outline: 3px solid currentColor;
      outline-offset: 3px;
      border-radius: 6px;
    }
    input:focus, textarea:focus { border-color: var(--lilac) !important; }

    .skip-link {
      position: absolute; left: 16px; top: -100px; z-index: 2000;
      background: var(--lilac-ink); color: var(--white);
      padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 16px; }

    .visually-hidden {
      position: absolute !important; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/manrope-700-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/manrope-700-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/manrope-700-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/manrope-700-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('../fonts/manrope-800-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('../fonts/manrope-800-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('../fonts/manrope-800-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('../fonts/manrope-800-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* ─── Variables ─── */
    :root {
      /* Единственный цвет на сайте — сиреневый. Тон 272°, заметно дальше
         от синего, чем прежний #C089F0 (252°). Всё остальное нейтральное. */
      --lilac:      #C089F0;   /* акцент на тёмном фоне   */
      --lilac-ink:  #7A2DBE;   /* акцент на светлом и фон блока-призыва */

      --dark:       #0B0B0D;   /* нейтральный чёрный, без синего подмеса */
      --dark-2:     #111114;
      --light:      #F7F7F8;
      --light-alt:  #EFEFF1;
      --cream:      #F4F4F5;   /* текст на тёмном */
      --white:      #FFFFFF;

      --muted-on-dark:  #A3A3A8;   /* 7.8:1 на тёмном  */
      --muted-on-light: #5C5C63;   /* 6.2:1 на светлом */
    }

    /* ─── Fade-in ─── */
    .js .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .js .fade-in.visible { opacity: 1; transform: translateY(0); }
    .js .fade-in[data-delay="0.1"]  { transition-delay: 0.1s; }
    .js .fade-in[data-delay="0.15"] { transition-delay: 0.15s; }
    .js .fade-in[data-delay="0.2"]  { transition-delay: 0.2s; }
    .js .fade-in[data-delay="0.3"]  { transition-delay: 0.3s; }
    .js .fade-in[data-delay="0.4"]  { transition-delay: 0.4s; }

    /* ─── Marquee ─── */
    @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .marquee-track { display:flex; gap:48px; animation:marquee 26s linear infinite; white-space:nowrap; }
    /* Строка набрана моноширинным: второй шрифт добавляет странице фактуру,
       а равная ширина знаков делает бегущий текст спокойнее */
    .marquee-item {
      font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
      font-size:13px; color:rgba(244,244,245,0.52);
      font-weight:400; letter-spacing:0.12em;
    }
    .marquee-item i { font-style:normal; color:rgba(192,137,240,0.5); margin-left:14px; }

    /* ─── Navbar ─── */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      padding:24px 0; background:transparent; transition:all 0.4s ease;
    }
    nav.scrolled { padding:16px 0; background:rgba(11,11,13,0.85); backdrop-filter:blur(20px); }
    .nav-inner {
      max-width:1200px; margin:0 auto; padding:0 40px;
      display:flex; justify-content:space-between; align-items:center;
    }
    .nav-logo { font-size:22px; font-weight:600; color:var(--white); letter-spacing:-0.02em; }
    .nav-logo span { color:var(--lilac); }
    .nav-links { display:flex; gap:28px; align-items:center; }
    .nav-links a { color:rgba(255,255,255,0.75); font-size:14px; font-weight:500; letter-spacing:0.02em; transition:color 0.3s; padding:8px 0; }
    .nav-links a:hover { color:var(--white); }
    .nav-cta {
      background:var(--white)!important; color:var(--dark)!important;
      padding:12px 24px!important; border-radius:8px!important;
      font-size:14px!important; font-weight:500!important; transition:background 0.3s!important;
    }
    .nav-cta:hover { background:var(--lilac)!important; color:var(--dark)!important; }
    .nav-burger { display:none; background:none; border:none; cursor:pointer; color:var(--white); padding:10px; margin:-10px; }
    .mobile-menu {
      display:none; position:fixed; inset:0;
      background:rgba(11,11,13,0.97); z-index:999;
      flex-direction:column; align-items:center; justify-content:center; gap:28px;
    }
    .mobile-menu.open { display:flex; }
    .mobile-menu a { color:var(--cream); font-size:25px; font-weight:500; transition:color 0.3s; }
    .mobile-menu a:hover { color:var(--lilac); }
    .mobile-close { position:absolute; top:24px; right:32px; background:none; border:none; cursor:pointer; color:var(--white); padding:12px; }

    /* ─── Hero ─── */
    #hero {
      min-height:100vh; min-height:100svh;
      background:linear-gradient(135deg,#0B0B0D 0%,#191221 40%,rgba(192,137,240,0.2) 100%);
      display:flex; align-items:center; position:relative; overflow:hidden;
    }
    .hero-orb-1 {
      position:absolute; top:10%; right:-5%; width:500px; height:500px; border-radius:50%;
      background:radial-gradient(circle,rgba(192,137,240,0.19) 0%,transparent 70%);
      filter:blur(80px); pointer-events:none;
    }
    .hero-orb-2 {
      position:absolute; bottom:10%; left:-10%; width:400px; height:400px; border-radius:50%;
      background:radial-gradient(circle,rgba(192,137,240,0.13) 0%,transparent 70%);
      filter:blur(60px); pointer-events:none;
    }
    .hero-grid {
      position:absolute; inset:0; pointer-events:none;
      background-image:
        linear-gradient(rgba(192,137,240,0.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(192,137,240,0.05) 1px,transparent 1px);
      background-size:80px 80px;
    }
    .hero-inner { max-width:1200px; margin:0 auto; padding:150px 40px 80px; position:relative; z-index:2; width:100%; }
    .hero-cols { display:grid; grid-template-columns:1.25fr 0.85fr; gap:56px; align-items:center; }
    .hero-badge { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
    .hero-dot { width:8px; height:8px; border-radius:50%; background:var(--lilac); flex-shrink:0; }
    .hero-badge span { color:var(--lilac); font-size:14px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
    .hero-h1 {
      /* Кегль подобран так, чтобы «Сайты и интерфейсы,» помещалось в строку
         на всех ширинах и слово «Сайты» не оставалось одно. Для узких экранов —
         отдельное правило ниже: там колонка становится во всю ширину. */
      font-size:clamp(32px,3.7vw,52px); font-weight:600; color:var(--cream);
      line-height:1.14; letter-spacing:-0.035em; margin-bottom:26px; text-wrap:balance;
    }
    .hero-desc { font-size:17px; color:rgba(244,244,245,0.78); max-width:540px; line-height:1.65; margin-bottom:40px; }
    .hero-btns { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
    .btn-primary {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--white); color:var(--dark);
      padding:16px 32px; border-radius:12px; font-size:15.5px; font-weight:500; transition:all 0.3s;
    }
    .btn-primary:hover { background:var(--lilac); color:var(--dark); transform:translateY(-2px); }
    .btn-outline {
      display:inline-flex; align-items:center; gap:10px;
      background:transparent; color:var(--cream);
      padding:16px 32px; border-radius:12px; font-size:15.5px; font-weight:400;
      border:1px solid rgba(255,255,255,0.25); transition:all 0.3s;
    }
    .btn-outline:hover { border-color:var(--lilac); color:var(--lilac); }

    /* Слоган в правой половине первого экрана.
       TODO: когда появится сильный скриншот кейса — можно поменять местами. */
    .hero-slogan {
      position:relative; border-radius:24px; padding:52px 44px;
      background:linear-gradient(150deg,rgba(192,137,240,0.2),rgba(11,11,13,0.45));
      border:1px solid rgba(255,255,255,0.14);
      display:flex; flex-direction:column; gap:24px;
    }
    .hero-slogan-mark { font-size:52px; line-height:0.6; color:var(--lilac); opacity:0.5; font-weight:500; }
    .hero-slogan p {
      font-size:clamp(19px,1.75vw,24px); line-height:1.45; font-weight:500;
      color:var(--cream); letter-spacing:-0.02em; text-wrap:balance;
    }
    .hero-slogan p .dim { color:rgba(244,244,245,0.6); font-weight:600; }
    .hero-slogan cite { font-style:normal; font-size:14px; color:var(--muted-on-dark); }
    .hero-marquee { margin-top:64px; overflow:hidden; }

    /* ─── Stats ─── */
    /* Верхний отступ обязателен: без него карточки упираются в границу
       первого экрана и стык читается как обрезка */
    #stats { background:var(--dark); padding:88px 40px 100px; }
    .stats-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .stat-card {
      background:rgba(192,137,240,0.06); border-radius:20px; padding:36px 28px;
      text-align:center; border:1px solid rgba(192,137,240,0.1);
      width:100%; display:flex; flex-direction:column; justify-content:center;
    }
    .stat-value { font-size:38px; font-weight:600; color:var(--lilac); margin-bottom:8px; font-variant-numeric:tabular-nums; }
    .stat-label { font-size:14px; color:var(--muted-on-dark); font-weight:500; line-height:1.5; }

    /* ─── Одинаковая высота карточек ───
       Каждая карточка лежит внутри обёртки .fade-in, и grid растягивает
       именно обёртку. Без этих двух правил карточки внутри сохраняли
       высоту по контенту и ряд «ехал». grid-auto-rows:1fr выравнивает
       ещё и ряды между собой, чтобы все карточки были одного размера. */
    .stats-grid, .services-grid, .tips-grid, .steps { grid-auto-rows:1fr; }
    .stats-grid > *, .services-grid > *, .tips-grid > *, .steps > * {
      display:flex; min-width:0;
    }
    .stat-card, .service-card, .tip, .step { width:100%; min-width:0; }

    /* ─── Shared ─── */
    .section-inner { max-width:1200px; margin:0 auto; }
    .section-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .eyebrow-line { width:40px; height:2px; background:var(--lilac-ink); flex-shrink:0; }
    /* На светлом фоне берём углублённый акцент: #C089F0 давал 4.35:1 на #EFEFF1 */
    .eyebrow-text { font-size:12px; font-weight:500; color:var(--lilac-ink); letter-spacing:0.18em; text-transform:uppercase; }
    .section-eyebrow--dark .eyebrow-line { background:var(--lilac); }
    .section-eyebrow--dark .eyebrow-text { color:var(--lilac); }
    .two-col { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
    .section-h2 { font-size:clamp(27px,3.1vw,40px); font-weight:600; color:var(--dark); line-height:1.18; margin-bottom:24px; letter-spacing:-0.03em; text-wrap:balance; }
    .section-h2-light { font-size:clamp(27px,3.1vw,40px); font-weight:600; color:var(--cream); letter-spacing:-0.02em; line-height:1.18; text-wrap:balance; }
    .section-h2-cream { font-size:clamp(27px,3.1vw,40px); font-weight:600; color:var(--cream); letter-spacing:-0.02em; margin-bottom:24px; line-height:1.18; text-wrap:balance; }
    .section-p { font-size:16.5px; color:var(--muted-on-light); line-height:1.75; margin-bottom:20px; max-width:60ch; }
    .section-lead { font-size:16.5px; line-height:1.7; max-width:62ch; margin-top:16px; }
    .section-lead.on-dark { color:var(--muted-on-dark); }
    .section-lead.on-light { color:var(--muted-on-light); }
    .link-arrow { display:inline-flex; align-items:center; gap:8px; color:var(--lilac-ink); font-size:15px; font-weight:500; transition:gap 0.3s; padding:8px 0; margin-top:8px; }
    .link-arrow:hover { gap:12px; }

    /* ─── About / манифест ─── */
    #about { background:var(--light); padding:120px 40px; }
    .beliefs { display:flex; flex-direction:column; gap:2px; background:rgba(11,11,13,0.08); border-radius:20px; overflow:hidden; }
    .belief { background:var(--white); padding:26px 30px; }
    .belief h3 { font-size:16px; font-weight:600; color:var(--dark); margin-bottom:6px; letter-spacing:-0.01em; }
    .belief p { font-size:15px; color:var(--muted-on-light); line-height:1.65; }

    /* ─── Work ─── */
    #work { background:var(--dark); padding:120px 40px; }
    .work-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:24px; }
    .all-link { display:inline-flex; align-items:center; gap:8px; color:var(--lilac); font-size:14px; font-weight:500; transition:gap 0.3s; padding:10px 0; }
    .all-link:hover { gap:12px; }
    .projects-list { display:flex; flex-direction:column; gap:32px; }
    .project-card {
      display:grid; grid-template-columns:1.3fr 1fr; border-radius:24px; overflow:hidden;
      background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
      transition:border-color 0.4s ease, transform 0.4s ease;
    }
    .project-card:hover { border-color:rgba(192,137,240,0.4); transform:translateY(-4px); }
    .project-thumb { aspect-ratio:16/10; position:relative; }
    .project-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .project-thumb-slot {
      position:absolute; inset:16px; border:2px dashed rgba(255,255,255,0.22); border-radius:16px;
      display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
      color:rgba(244,244,245,0.7); font-size:13px; line-height:1.6;
    }
    .project-info { padding:44px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
    .project-cat { font-size:11px; color:var(--lilac); font-weight:500; letter-spacing:0.12em; }
    .project-title { font-size:25px; font-weight:600; color:var(--cream); letter-spacing:-0.01em; }
    .case-facts { display:flex; flex-direction:column; gap:12px; margin-top:2px; }
    .case-facts div { display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:baseline; }
    .case-facts dt { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-on-dark); font-weight:600; }
    .case-facts dd { font-size:15px; color:rgba(244,244,245,0.82); line-height:1.6; }
    .project-more { margin-top:8px; display:flex; align-items:center; gap:8px; color:var(--lilac); font-size:14px; font-weight:500; transition:gap 0.3s; }
    .project-card:hover .project-more { gap:12px; }

    /* ─── Services ─── */
    #services { background:var(--light); padding:120px 40px; }
    .services-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    .service-card {
      padding:36px; border-radius:20px; background:var(--white); width:100%;
      border:1px solid rgba(192,137,240,0.1);
      display:flex; flex-direction:column;
      transition:border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    }
    .service-card:hover { border-color:var(--lilac-ink); transform:translateY(-4px); box-shadow:0 20px 60px rgba(192,137,240,0.1); }
    .service-num {
      display:block; font-size:11px; font-weight:500;
      color:var(--lilac-ink); letter-spacing:0.15em;
      font-variant-numeric:tabular-nums;
    }
    .service-title { font-size:20px; font-weight:600; color:var(--dark); margin:26px 0 12px; letter-spacing:-0.01em; }
    .service-desc { font-size:15px; color:var(--muted-on-light); line-height:1.65; margin-bottom:22px; }
    /* Срок и вилка бюджета прижаты к низу карточки, чтобы строка
       стояла на одной линии во всех четырёх */
    .service-card { display:flex; flex-direction:column; }
    .service-meta {
      display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
      margin-top:auto; padding-top:18px; border-top:1px solid rgba(11,11,13,0.08);
    }
    .service-meta span { font-size:13px; color:var(--dark); font-weight:500; }
    .service-meta span + span::before { content:"·"; color:var(--muted-on-light); margin-right:10px; font-weight:400; }
    .tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
    .tag { font-size:12px; color:var(--lilac-ink); background:rgba(192,137,240,0.08); padding:6px 14px; border-radius:20px; font-weight:500; }

    /* ─── Process ─── */
    #process { background:var(--dark); padding:120px 40px; }
    .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; margin-top:56px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); border-radius:24px; overflow:hidden; }
    .step { background:#111114; padding:36px 30px; }
    .step-num {
      display:inline-flex; align-items:center; justify-content:center;
      width:34px; height:34px; border-radius:50%; margin-bottom:18px;
      background:rgba(192,137,240,0.18); color:var(--lilac);
      font-size:13px; font-weight:500; font-variant-numeric:tabular-nums;
    }
    .step h3 { font-size:18px; font-weight:600; color:var(--cream); margin-bottom:4px; letter-spacing:-0.01em; }
    .step-when { font-size:13px; color:var(--lilac); font-weight:500; margin-bottom:12px; }
    .step p { font-size:15px; color:var(--muted-on-dark); line-height:1.7; }

    /* ─── Tips ─── */
    #tips { background:var(--light-alt); padding:110px 40px; }
    .tips-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:52px; }
    .tip {
      background:var(--white); border-radius:18px; padding:28px 30px;
      border:1px solid rgba(11,11,13,0.07);
      display:flex; flex-direction:column; gap:14px;
    }
    .tip-what { font-size:15.5px; font-weight:600; color:var(--dark); line-height:1.45; }
    .tip-says { display:flex; gap:12px; align-items:flex-start; }
    .tip-says::before {
      content:"→"; color:var(--lilac-ink); font-weight:700; font-size:16px; line-height:1.6; flex-shrink:0;
    }
    .tip-says span { font-size:15px; color:var(--muted-on-light); line-height:1.6; font-style:italic; }
    .tips-foot { margin-top:36px; font-size:15px; color:var(--muted-on-light); text-align:center; }
    .tips-foot a { color:var(--lilac-ink); font-weight:600; text-decoration:underline; }

    /* ─── CTA ─── */
    #cta { background:var(--lilac-ink); padding:100px 40px; position:relative; overflow:hidden; }
    .cta-orb { position:absolute; top:-50%; right:-20%; width:600px; height:600px; border-radius:50%; background:rgba(255,255,255,0.05); pointer-events:none; }
    .cta-inner { max-width:720px; margin:0 auto; text-align:center; position:relative; z-index:2; }
    .cta-h2 { font-size:clamp(28px,3.8vw,42px); font-weight:600; color:var(--white); margin-bottom:18px; letter-spacing:-0.03em; text-wrap:balance; }
    .cta-p { font-size:17px; color:rgba(255,255,255,0.88); margin-bottom:32px; line-height:1.6; }
    .btn-white {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--white); color:var(--lilac-ink);
      padding:18px 40px; border-radius:12px; font-size:15.5px; font-weight:500; transition:all 0.3s;
    }
    .btn-white:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,0.2); }
    .cta-note { margin-top:20px; font-size:14px; color:rgba(255,255,255,0.8); }

    /* ─── Contact ─── */
    #contact { background:var(--dark); padding:120px 40px 60px; }
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-bottom:100px; }
    .contact-info-p { font-size:16.5px; color:var(--muted-on-dark); line-height:1.8; margin-bottom:36px; max-width:50ch; }
    .contact-items { display:flex; flex-direction:column; gap:18px; }
    .contact-item { display:flex; align-items:center; gap:16px; }
    .contact-icon { width:48px; height:48px; border-radius:12px; background:rgba(192,137,240,0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .contact-icon svg { width:20px; height:20px; }
    .contact-item-label { font-size:12px; color:var(--muted-on-dark); margin-bottom:2px; text-transform:uppercase; letter-spacing:0.1em; }
    .contact-item-val { font-size:16px; color:var(--cream); font-weight:500; }
    a.contact-item-val:hover { color:var(--lilac); }
    .contact-form { background:rgba(255,255,255,0.03); border-radius:24px; padding:44px; border:1px solid rgba(255,255,255,0.06); }
    .form-group { margin-bottom:22px; }
    .form-label { font-size:13px; color:var(--muted-on-dark); font-weight:500; display:block; margin-bottom:8px; letter-spacing:0.05em; }
    .form-label .req { color:var(--lilac); }
    .form-input, .form-textarea {
      width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.18);
      border-radius:12px; padding:14px 18px; color:var(--cream); font-size:15px;
      font-family:inherit; transition:border-color 0.3s; box-sizing:border-box;
    }
    .form-textarea { resize:vertical; min-height:110px; }
    .form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color:#FF8A80 !important; }
    .form-error { display:block; margin-top:6px; font-size:13px; color:#FF8A80; }
    .form-consent { display:flex; gap:12px; align-items:flex-start; margin-bottom:22px; }
    .form-consent input { width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--lilac); cursor:pointer; }
    .form-consent label { font-size:13px; color:var(--muted-on-dark); line-height:1.6; cursor:pointer; }
    .form-consent a { color:var(--lilac); text-decoration:underline; }
    /* Ловушка для ботов: уводим за экран, но не display:none — боты такое пропускают */
    .form-honey { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; color:var(--cream); }
    .btn-submit {
      width:100%; background:var(--white); color:var(--dark); border:none;
      border-radius:12px; padding:16px; font-size:15.5px; font-weight:500;
      cursor:pointer; transition:background 0.3s; font-family:inherit;
    }
    .btn-submit:hover:not(:disabled) { background:var(--lilac); color:var(--dark); }
    .btn-submit:disabled { opacity:0.6; cursor:progress; }
    .form-status { margin-top:16px; font-size:14px; line-height:1.6; }
    .form-status.ok  { color:#7EE2B8; }
    .form-status.err { color:#FF8A80; }

    /* ─── Footer ─── */
    .site-footer { background:var(--dark); padding:0 40px 60px; }
    .footer-row { max-width:1200px; margin:0 auto; border-top:1px solid rgba(255,255,255,0.08); padding-top:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
    .footer-logo { font-size:19px; font-weight:600; color:var(--cream); }
    .footer-logo span { color:var(--lilac); }
    .social-links { display:flex; gap:12px; }
    .social-link { width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition:background 0.3s; }
    .social-link:hover { background:var(--lilac); }
    .social-link svg { width:18px; height:18px; }
    .footer-legal { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
    .footer-copy { font-size:13px; color:var(--muted-on-dark); }
    .footer-legal a { font-size:13px; color:var(--muted-on-dark); text-decoration:underline; }
    .footer-legal a:hover { color:var(--cream); }

    /* ─── Responsive ─── */
    @media (max-width:1023px) {
      .stats-grid { grid-template-columns:repeat(2,1fr); }
      .two-col, .contact-grid { grid-template-columns:1fr; gap:48px; }
      .hero-cols { grid-template-columns:1fr; gap:44px; }
      .hero-slogan { padding:40px 34px; }
      .project-card { grid-template-columns:1fr; }
      .project-info { padding:32px; }
      .contact-form { padding:36px; }
      .steps { border-radius:20px; }
    }
    @media (max-width:768px) {
      .services-grid { grid-template-columns:1fr; }
      .nav-links { display:none; }
      .nav-burger { display:block; }
      #stats { padding-top:64px; padding-bottom:72px; }
      .stats-grid { gap:16px; }
      .stat-card { padding:28px 16px; }
      .work-header { flex-direction:column; align-items:flex-start; gap:16px; }
      .footer-row { flex-direction:column; gap:24px; text-align:center; }
      .footer-legal { align-items:center; }
      .hero-inner { padding:120px 24px 72px; }
      .case-facts div { grid-template-columns:1fr; gap:2px; }
      #stats,#about,#work,#services,#process,#tips,#contact,#cta,.site-footer { padding-left:24px; padding-right:24px; }
      .contact-form { padding:28px; }
    }
    @media (max-width:520px) {
      /* Заголовок первого экрана: не даём слову «Сайты» остаться одному в строке */
      .hero-h1 { font-size:clamp(27px,7.6vw,32px); }
    }

    /* ═══════════════════════════════════════════════════════════════
       ФОНОВЫЕ ПАТТЕРНЫ И ЭФФЕКТЫ

       Всё построено на CSS-градиентах и одном SVG-шуме в data-URI —
       ни одного дополнительного запроса и меньше килобайта веса.
       Прозрачности намеренно низкие: паттерн не должен спорить с текстом,
       контраст после них перепроверен — нарушений нет.
       ═══════════════════════════════════════════════════════════════ */

    /* overflow:hidden обязателен — пятна выходят за границы секции
       и без него дают горизонтальную прокрутку страницы */
    #about, #services, #tips, #work, #process, #contact, #cta {
      position:relative; isolation:isolate; overflow:hidden;
    }
    #about > .section-inner, #services > .section-inner, #tips > .section-inner,
    #work > .section-inner, #process > .section-inner, #contact > .section-inner { position:relative; z-index:1; }

    /* Точечная сетка на светлых секциях */
    #about::before, #services::before, #tips::before {
      content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background-image:radial-gradient(rgba(122,45,190,0.13) 1px, transparent 1px);
      background-size:26px 26px;
      -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
      mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
    }
    /* Диагональная штриховка на тёмных */
    #work::before, #process::before, #contact::before {
      content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background-image:repeating-linear-gradient(-45deg,
        rgba(255,255,255,0.028) 0 1px, transparent 1px 11px);
      -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 55%);
      mask-image:linear-gradient(180deg, #000 0%, transparent 55%);
    }
    /* Мягкое пятно акцента — по одному на секцию, чтобы фон не был плоским */
    .glow {
      position:absolute; z-index:0; pointer-events:none; border-radius:50%;
      filter:blur(90px);
    }
    .glow--violet { background:radial-gradient(circle, rgba(192,137,240,0.16) 0%, transparent 70%); }
    .glow--soft   { background:radial-gradient(circle, rgba(122,45,190,0.10) 0%, transparent 70%); }

    /* Плёнка шума: убирает «пластиковость» больших заливок */
    .grain {
      position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0.22;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
    }

    /* Полоса прогресса чтения */
    .read-progress {
      position:fixed; top:0; left:0; height:2px; width:100%; z-index:1001;
      transform:scaleX(0); transform-origin:0 50%;
      background:linear-gradient(90deg, var(--lilac), var(--lilac));
      pointer-events:none;
    }

    /* Пятно за курсором на первом экране */
    .hero-spot {
      position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
      transition:opacity 0.6s ease;
      background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
        rgba(192,137,240,0.16), transparent 65%);
    }
    #hero:hover .hero-spot { opacity:1; }
    .hero-inner { z-index:2; }

    /* Подсветка карточек под курсором */
    .service-card, .tip, .project-card, .stat-card, .step { position:relative; overflow:hidden; }
    .service-card::after, .tip::after, .project-card::after, .step::after {
      content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
      transition:opacity 0.35s ease;
      background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
        rgba(192,137,240,0.13), transparent 62%);
    }
    .service-card:hover::after, .tip:hover::after,
    .project-card:hover::after, .step:hover::after { opacity:1; }
    .service-card > *, .tip > *, .step > * { position:relative; z-index:1; }

    /* ─── Микрографика в блоке цифр ─── */
    .stat-card { align-items:center; }
    .stat-viz { margin-bottom:14px; display:flex; align-items:center; justify-content:center; color:var(--lilac); }
    .stat-viz svg { width:28px; height:28px; flex-shrink:0; }

    /* ─── Соединительная линия между шагами ─── */
    .steps { position:relative; }
    .step { position:relative; }
    .step-num { position:relative; z-index:2; }
    /* Линия тянется от кружка вправо до края карточки */
    .step::before {
      content:""; position:absolute; z-index:1;
      left:calc(30px + 34px + 10px); top:calc(36px + 17px);
      right:0; height:2px;
      background:repeating-linear-gradient(90deg,
        rgba(192,137,240,0.35) 0 6px, transparent 6px 12px);
    }
    /* Каждый .step лежит в своей обёртке .fade-in, поэтому :last-child надо
       проверять у обёртки — иначе линия пропадала у всех четырёх шагов */
    .steps > *:last-child .step::before { display:none; }
    @media (max-width:1023px) {
      /* На узком сетка превращается в столбец — линия должна идти вниз */
      .step::before {
        left:calc(30px + 16px); top:calc(36px + 34px);
        right:auto; bottom:-1px; width:2px; height:auto;
        background:repeating-linear-gradient(180deg,
          rgba(192,137,240,0.35) 0 6px, transparent 6px 12px);
      }
    }

    /* ─── Маркер в карточке совета ─── */
    .tip { border-left:3px solid transparent; transition:border-color 0.35s ease, transform 0.35s ease; }
    .tip:hover { border-left-color:var(--lilac-ink); transform:translateY(-3px); }

    /* ─── Заголовочный шрифт ───
       Текст остаётся Manrope, заголовки набраны отдельной гарнитурой.
       Блок стоит последним намеренно: правила выше задают свой вес,
       и без этого он перебивал заголовочный. */
    .hero-h1, .section-h2, .section-h2-light, .section-h2-cream, .cta-h2, .project-title, .service-title, .step h3, .belief h3, .tip-what, .stat-value, .nav-logo, .footer-logo, .hero-slogan p {
      font-family: 'Manrope', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      font-weight: 800 !important;
      letter-spacing: -0.04em !important;
    }

    /* ─── Уважение к настройке «уменьшить движение» ─── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .js .fade-in { opacity:1 !important; transform:none !important; }
      .marquee-track { animation: none; }
      /* Пятно за курсором и подсветку карточек выключаем совсем */
      .hero-spot { display:none; }
      .service-card::after, .tip::after, .project-card::after, .step::after { display:none; }
      .read-progress { display:none; }
    }