/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.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;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.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;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.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;
}
    :root{
      --bg:#0a0e1a;
      --bg2:#0f1525;
      --panel:#111827;
      --white:#f8fafc;
      --muted:#cbd5e1;
      --yellow:#facc15;
      --blue:#38bdf8;
      --line:rgba(255,255,255,.14);
      --soft:rgba(255,255,255,.055);
      --shadow:0 30px 70px rgba(0,0,0,.34);
      --container:1440px;
      --radius:28px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--bg)}
    body{
      margin:0;
      min-height:100vh;
      overflow-x:hidden;
      color:var(--white);
      font-family:"DM Sans",system-ui,sans-serif;
      background:
        radial-gradient(circle at 12% 15%,rgba(56,189,248,.07),transparent 28%),
        radial-gradient(circle at 88% 30%,rgba(250,204,21,.035),transparent 28%),
        linear-gradient(155deg,var(--bg),#0b1020 55%,#090d17);
    }

    /* CSS-noise: не картинка, а набор частых радиальных точек */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:9999;
      pointer-events:none;
      opacity:.055;
      background-image:
        radial-gradient(circle at 20% 30%, #fff .45px, transparent .55px),
        radial-gradient(circle at 80% 70%, #fff .4px, transparent .55px);
      background-size:5px 5px,7px 7px;
      mix-blend-mode:soft-light;
    }

    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    button{color:inherit}
    img,svg{display:block;max-width:100%}
    h1,h2,h3,p{margin-top:0}
    h1,h2,.serif{font-family:"Fraunces",serif}
    p{color:var(--muted);line-height:1.7}

    .container{
      width:min(calc(100% - 44px),var(--container));
      margin-inline:auto;
    }

    .page-shell{position:relative;z-index:2;padding-bottom:60px}

    /* Нестандартный header: логотип + меню-триграмма */
    .header{
      position:fixed;
      z-index:1200;
      top:0;left:0;right:0;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:24px 28px;
      pointer-events:none;
    }
    .logo,.menu-trigger{pointer-events:auto}
    .logo{
      font-weight:700;
      font-size:1.1rem;
      letter-spacing:-.03em;
      text-shadow:0 4px 20px rgba(0,0,0,.35);
    }
    .menu-trigger{
      width:56px;height:56px;
      border:1px solid var(--line);
      background:rgba(10,14,26,.25);
      backdrop-filter:blur(12px);
      border-radius:50%;
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.3s ease;
    }
    .menu-trigger:hover{background:var(--yellow);color:#0a0e1a;transform:rotate(7deg)}
    .trigram{display:grid;gap:5px}
    .trigram span{display:block;width:22px;height:2px;background:currentColor}
    .trigram span:nth-child(2){width:15px;justify-self:end}

    /* Полноэкранная навигация */
    .nav-drawer{
      position:fixed;
      z-index:1150;
      inset:0;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      transform:translateX(100%);
      transition:transform .65s cubic-bezier(.16,1,.3,1);
      background:#0b1020;
    }
    .nav-drawer.open{transform:translateX(0)}
    .nav-main{
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:9vw;
      border-right:1px solid var(--line);
    }
    .nav-main a{
      font-family:"Fraunces",serif;
      font-size:clamp(2.5rem,6vw,6.3rem);
      line-height:.98;
      color:#fff;
      transition:.25s ease;
      width:max-content;
      max-width:100%;
    }
    .nav-main a:hover{
      color:var(--yellow);
      transform:translateX(16px);
    }
    .nav-meta{
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      gap:20px;
      padding:5vw;
      background:
        radial-gradient(circle at 70% 25%,rgba(56,189,248,.18),transparent 28%);
    }
    .nav-meta p{max-width:430px}

    /* Языки — fixed снизу справа */
    .lang-rail{
      position:fixed;
      z-index:1300;
      right:22px;
      bottom:22px;
      display:flex;
      gap:6px;
      padding:6px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(10,14,26,.66);
      backdrop-filter:blur(14px);
      box-shadow:0 15px 40px rgba(0,0,0,.25);
    }
    .lang-btn{
      min-width:44px;
      padding:8px 10px;
      border:0;
      border-radius:999px;
      background:transparent;
      cursor:pointer;
      color:#aab6c7;
      font-weight:700;
      font-size:.78rem;
    }
    .lang-btn.active{
      background:var(--yellow);
      color:#10131a;
    }

    /* HERO */
    .hero{
      min-height:100svh;
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);
      align-items:center;
      gap:40px;
      padding:110px 0 40px;
      overflow:hidden;
    }
    .hero-copy{
      position:relative;
      z-index:2;
      padding-left:2vw;
    }
    .eyebrow{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:26px;
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.18em;
      color:var(--blue);
      font-weight:700;
    }
    .eyebrow::before{content:"";width:38px;height:1px;background:var(--blue)}
    .hero h1{
      margin-bottom:28px;
      font-size:clamp(4rem,12vw,8rem);
      line-height:.82;
      letter-spacing:-.07em;
      max-width:1000px;
    }
    .hero-word{
      display:inline-block;
      position:relative;
      color:var(--yellow);
      min-width:7.8ch;
      transform-origin:left center;
    }
    .hero-word.rewind{animation:rewindWord .48s ease}
    @keyframes rewindWord{
      0%{transform:skewX(0) scaleX(1);filter:blur(0)}
      35%{transform:skewX(-10deg) scaleX(.6);filter:blur(3px)}
      60%{transform:skewX(12deg) scaleX(1.08);filter:blur(1px)}
      100%{transform:skewX(0) scaleX(1);filter:blur(0)}
    }
    .hero-sub{
      max-width:650px;
      font-size:clamp(1.06rem,1.8vw,1.35rem);
      margin-bottom:34px;
    }
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .cut-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:54px;
      padding:14px 24px;
      border:1px solid var(--line);
      clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
      cursor:pointer;
      font-weight:700;
      transition:.28s ease;
    }
    .cut-btn.primary{background:var(--yellow);color:#0a0e1a;border-color:var(--yellow)}
    .cut-btn.secondary{background:rgba(255,255,255,.03);color:white}
    .cut-btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 14px 35px rgba(0,0,0,.3)}
    .cut-btn.secondary:hover{background:var(--blue);color:#07121a;border-color:var(--blue)}

    /* Большой круг справа */
    .hero-orbit{
      position:relative;
      min-height:620px;
      display:grid;
      place-items:center;
    }
    .orbital-disc{
      width:min(36vw,520px);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 2%,transparent 3%),
        radial-gradient(circle at 36% 35%,var(--blue),transparent 37%),
        radial-gradient(circle at 68% 68%,rgba(250,204,21,.95),transparent 18%),
        linear-gradient(145deg,#16324a,#111827 70%);
      box-shadow:
        inset -30px -40px 80px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.07),
        0 40px 100px rgba(56,189,248,.15);
      animation:discFloat 9s ease-in-out infinite;
    }
    @keyframes discFloat{
      0%,100%{transform:translate(0,0) rotate(-5deg)}
      50%{transform:translate(-18px,-24px) rotate(4deg)}
    }
    .orbit-line{
      position:absolute;
      width:120%;
      height:48%;
      border:1px solid rgba(255,255,255,.12);
      border-radius:50%;
      transform:rotate(-18deg);
    }

    /* Декоративные хаотичные фигуры */
    .shape{
      position:absolute;
      pointer-events:none;
      opacity:.14;
      border:1px solid var(--line);
      animation:drift 15s ease-in-out infinite alternate;
    }
    .shape.a{width:90px;height:90px;left:4%;top:22%;transform:rotate(32deg)}
    .shape.b{width:140px;height:46px;right:18%;top:12%;border-radius:50%;animation-duration:18s}
    .shape.c{width:70px;height:170px;left:55%;bottom:2%;transform:rotate(-18deg);animation-duration:21s}
    @keyframes drift{
      to{transform:translate(30px,-25px) rotate(16deg)}
    }

    /* Общая bento-сетка */
    .bento-section{padding:42px 0 110px}
    .bento{
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      grid-auto-rows:minmax(120px,auto);
      gap:18px;
    }
    .tile{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      background:
        linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }
    .tile-inner{padding:32px}
    .tile-label{
      color:var(--blue);
      text-transform:uppercase;
      letter-spacing:.16em;
      font-size:.73rem;
      font-weight:700;
      margin-bottom:18px;
    }
    .tile h2{
      font-size:clamp(2.6rem,5.8vw,5.8rem);
      line-height:.95;
      letter-spacing:-.055em;
      margin-bottom:22px;
    }
    .tile h3{
      font-size:clamp(1.25rem,2.2vw,2rem);
      line-height:1.08;
      margin-bottom:12px;
    }
    .yellow{color:var(--yellow)}
    .blue{color:var(--blue)}

    /* О нас */
    .about-copy{grid-column:1 / span 7;grid-row:span 4}
    .about-fact{grid-column:span 5;min-height:210px}
    .fact-mark{
      font-family:"Fraunces",serif;
      color:var(--yellow);
      font-size:clamp(3rem,6vw,6rem);
      line-height:.8;
      letter-spacing:-.06em;
      margin-bottom:20px;
    }

    /* Услуги */
    .services-intro{grid-column:1 / span 5;grid-row:span 4;min-height:520px}
    .service-card{
      grid-column:span 3;
      min-height:250px;
      cursor:pointer;
      transform-style:preserve-3d;
      transition:box-shadow .25s ease,border-color .25s ease;
    }
    .service-card.wide{grid-column:span 4}
    .service-card.tilted{transform:rotate(-2deg)}
    .service-card:hover{border-color:rgba(250,204,21,.52);box-shadow:0 35px 90px rgba(0,0,0,.42)}
    .service-top{display:flex;justify-content:space-between;gap:20px}
    .service-icon{font-size:1.6rem;color:var(--blue)}
    .service-price{
      margin-top:28px;
      color:var(--yellow);
      font-family:"Fraunces",serif;
      font-size:1.45rem;
      font-weight:700;
    }

    /* Portfolio */
    .project-card{min-height:360px}
    .project-card:nth-child(1){grid-column:1 / span 5}
    .project-card:nth-child(2){grid-column:6 / span 7}
    .project-card:nth-child(3){grid-column:1 / span 7}
    .project-card:nth-child(4){grid-column:8 / span 5}
    .project-art{
      height:210px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 24% 30%,rgba(56,189,248,.95),transparent 17%),
        radial-gradient(circle at 74% 68%,rgba(250,204,21,.85),transparent 18%),
        linear-gradient(135deg,#0e2236,#171827);
      border-bottom:1px solid var(--line);
    }
    .project-art::before{
      content:"";
      position:absolute;
      inset:18% 12%;
      border:1px solid rgba(255,255,255,.18);
      border-radius:50%;
      transform:rotate(-13deg);
    }
    .project-card:nth-child(2) .project-art{
      background:
        linear-gradient(30deg,transparent 0 38%,rgba(56,189,248,.52) 39% 52%,transparent 53%),
        radial-gradient(circle at 70% 30%,rgba(250,204,21,.7),transparent 22%),
        #101522;
    }
    .project-card:nth-child(3) .project-art{
      background:
        conic-gradient(from 160deg at 55% 48%,rgba(56,189,248,.8),transparent 28%,rgba(250,204,21,.7),transparent 63%),
        #0c1323;
    }
    .project-card:nth-child(4) .project-art{
      background:
        repeating-linear-gradient(120deg,rgba(255,255,255,.06) 0 1px,transparent 1px 20px),
        radial-gradient(circle at 30% 70%,rgba(56,189,248,.6),transparent 25%),
        #101522;
    }

    /* Контакты */
    .contact-info{grid-column:1 / span 5;min-height:520px}
    .contact-form{grid-column:6 / span 7;min-height:520px}
    .contact-stack{display:grid;gap:24px;margin-top:38px}
    .contact-item small{display:block;color:#8291a6;margin-bottom:4px}
    .contact-item a,.contact-item span{font-size:clamp(1rem,1.8vw,1.3rem)}
    .line-field{margin-bottom:28px}
    .line-field label{
      display:block;
      color:#8fa0b4;
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      margin-bottom:8px;
    }
    .line-field input,.line-field textarea{
      width:100%;
      color:white;
      background:transparent;
      border:0;
      border-bottom:1px solid rgba(255,255,255,.3);
      border-radius:0;
      outline:none;
      padding:10px 0 14px;
      transition:border-color .2s ease;
    }
    .line-field textarea{min-height:120px;resize:vertical}
    .line-field input:focus,.line-field textarea:focus{border-color:var(--yellow)}

    /* Footer */
    .footer{
      margin-top:20px;
      padding:34px 0 90px;
      border-top:1px solid var(--line);
    }
    .footer-row{
      display:flex;
      justify-content:space-between;
      gap:24px;
      align-items:flex-end;
      flex-wrap:wrap;
    }
    .footer small{color:#69788c}

    /* Modal */
    .modal-overlay{
      position:fixed;
      z-index:1500;
      inset:0;
      display:none;
      place-items:center;
      padding:20px;
      background:rgba(5,8,15,.82);
      backdrop-filter:blur(8px);
      opacity:0;
      transition:opacity .28s ease;
    }
    .modal-overlay.open{display:grid;opacity:1}
    .modal{
      width:min(100%,620px);
      background:#0d1423;
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:0 40px 100px rgba(0,0,0,.55);
      padding:30px;
      transform:scale(.92) rotate(-1deg);
      transition:transform .35s cubic-bezier(.16,1,.3,1);
    }
    .modal-overlay.open .modal{transform:scale(1) rotate(0)}
    .modal-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:26px}
    .modal-head h3{font-family:"Fraunces",serif;font-size:2rem;margin:0}
    .modal-close{
      width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
      background:transparent;cursor:pointer
    }

    /* Reveal: разные направления + небольшой поворот */
    .reveal{
      opacity:0;
      transition:
        opacity .75s ease,
        transform .9s cubic-bezier(.2,.8,.2,1);
    }
    .reveal.from-left{transform:translateX(-70px) rotate(-2.5deg)}
    .reveal.from-right{transform:translateX(70px) rotate(2.5deg)}
    .reveal.from-bottom{transform:translateY(70px) rotate(1deg)}
    .reveal.visible{opacity:1;transform:none}

    /* Кастомный курсор */
    .cursor{
      position:fixed;
      z-index:2000;
      left:0;top:0;
      width:13px;height:13px;
      border-radius:50%;
      background:var(--blue);
      box-shadow:0 0 20px rgba(56,189,248,.8);
      transform:translate(-50%,-50%);
      pointer-events:none;
      transition:width .18s ease,height .18s ease,background .18s ease,box-shadow .18s ease;
      mix-blend-mode:screen;
    }
    .cursor.hot{
      width:24px;height:24px;
      background:var(--yellow);
      box-shadow:0 0 30px rgba(250,204,21,.75);
    }

    /* Toast */
    .toast{
      position:fixed;
      z-index:1800;
      left:50%;bottom:24px;
      transform:translate(-50%,30px);
      padding:13px 18px;
      border-radius:999px;
      background:var(--yellow);
      color:#0a0e1a;
      font-weight:700;
      opacity:0;
      pointer-events:none;
      transition:.25s ease;
    }
    .toast.show{opacity:1;transform:translate(-50%,0)}



    /* ДОБАВЛЕНО: фото из Unsplash в hero, без изменения существующей композиции */
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      background:
        linear-gradient(90deg,rgba(10,14,26,.96) 0%,rgba(10,14,26,.78) 48%,rgba(10,14,26,.38) 100%),
        url("https://images.unsplash.com/photo-1754548930550-be9fa88874f4?auto=format&fit=crop&w=2000&q=82") center/cover no-repeat;
      opacity:.42;
      filter:saturate(.75) contrast(1.05);
      mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
    }
    .hero-copy,.hero-orbit,.hero .shape{z-index:2}

    /* ДОБАВЛЕНО: фото команды внутри существующей bento-ячейки «О нас» */
    .about-media{
      position:relative;
      margin-top:28px;
      height:290px;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:20px 20px 8px 20px;
      background:#0d1423;
    }
    .about-media img,.project-art img{
      width:100%;height:100%;object-fit:cover;
      filter:saturate(.78) contrast(1.03) brightness(.78);
      transition:transform .7s cubic-bezier(.16,1,.3,1),filter .4s ease;
    }
    .about-media::after,.project-art::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(135deg,rgba(56,189,248,.12),transparent 45%,rgba(250,204,21,.08));
      mix-blend-mode:screen;
    }
    .about-copy:hover .about-media img,.project-card:hover .project-art img{transform:scale(1.045);filter:saturate(.9) contrast(1.05) brightness(.86)}
    .media-caption{position:absolute;left:14px;bottom:12px;z-index:2;padding:7px 10px;border-radius:999px;background:rgba(10,14,26,.72);backdrop-filter:blur(10px);font-size:.72rem;color:#dbeafe}

    /* ДОБАВЛЕНО: единые линейные SVG-иконки и расширенные тексты услуг */
    .service-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
    .service-copy{font-size:.92rem;line-height:1.62;margin:12px 0 0;color:#b9c6d8}
    .service-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
    .mini-chip,.tech-chip{
      display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;
      border:1px solid rgba(255,255,255,.11);border-radius:999px;
      background:rgba(255,255,255,.035);color:#b9c7d8;font-size:.7rem;font-weight:600;
    }

    /* ДОБАВЛЕНО: реальные превью портфолио + технологии + результат */
    .project-art{background:#0d1423}
    .project-stack{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
    .project-result{margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);color:#e8edf5;font-size:.87rem;line-height:1.55}
    .project-result strong{color:var(--yellow)}

    /* ДОБАВЛЕНО: блок демонстрационных отзывов */
    .testimonials-intro{grid-column:1 / span 4;min-height:410px}
    .quote-card{grid-column:span 4;min-height:300px}
    .quote-mark{font-family:"Fraunces",serif;color:var(--yellow);font-size:4.4rem;line-height:.7;margin-bottom:24px}
    .quote-text{font-family:"Fraunces",serif;color:#f4f7fb;font-size:clamp(1.12rem,1.8vw,1.45rem);line-height:1.45}
    .quote-person{display:flex;align-items:center;gap:12px;margin-top:26px}
    .avatar{width:48px;height:48px;overflow:hidden;border-radius:50%;border:1px solid var(--line);background:#121a28;flex:0 0 auto}
    .avatar img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}
    .avatar-initials{width:100%;height:100%;display:grid;place-items:center;font-weight:700;color:var(--yellow)}
    .quote-person strong{display:block;font-size:.9rem}
    .quote-person span{color:#8291a6;font-size:.78rem}
    .disclosure{margin-top:18px;color:#718197;font-size:.74rem;line-height:1.5}

    /* ДОБАВЛЕНО: FAQ в той же bento-системе */
    .faq-intro{grid-column:1 / span 5;min-height:420px}
    .faq-list{grid-column:6 / span 7;padding:10px 28px}
    .faq-item{border-bottom:1px solid rgba(255,255,255,.12)}
    .faq-item:last-child{border-bottom:0}
    .faq-item summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:20px;font-family:"Fraunces",serif;font-size:1.2rem}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{content:"+";color:var(--yellow);font-family:"DM Sans",sans-serif;font-size:1.4rem;transition:transform .25s ease}
    .faq-item[open] summary::after{transform:rotate(45deg)}
    .faq-item p{padding:0 0 24px;margin:0;max-width:760px;font-size:.94rem}

    /* ДОБАВЛЕНО: короткое описание компании в футере */
    .footer-about{max-width:520px;margin:8px 0 0;color:#7f8da0;font-size:.78rem;line-height:1.55}

    @media (max-width:1100px){
      .hero{grid-template-columns:1fr;min-height:auto;padding-top:150px}
      .hero-orbit{min-height:380px}
      .orbital-disc{width:min(70vw,460px)}
      .about-copy,.about-fact,.services-intro,.service-card,.service-card.wide,.project-card:nth-child(n),.contact-info,.contact-form,.testimonials-intro,.quote-card,.faq-intro,.faq-list{
        grid-column:span 6;
      }
      .services-intro{min-height:420px}
    }

    @media (max-width:767px){
      .container{width:min(calc(100% - 28px),var(--container))}
      .header{padding:16px}
      .menu-trigger{width:48px;height:48px}
      .nav-drawer{grid-template-columns:1fr}
      .nav-main{padding:100px 24px 30px}
      .nav-meta{display:none}
      .nav-main a{font-size:clamp(2.8rem,14vw,5rem)}
      .hero{padding-top:120px;gap:10px}
      .hero-copy{padding-left:0}
      .hero h1{font-size:clamp(3.8rem,18vw,6rem)}
      .hero-word{min-width:auto}
      .hero-orbit{min-height:290px}
      .orbital-disc{width:min(80vw,320px)}
      .bento-section{padding-bottom:70px}
      .bento{grid-template-columns:1fr;gap:14px}
      .about-copy,.about-fact,.services-intro,.service-card,.service-card.wide,.project-card:nth-child(n),.contact-info,.contact-form,.testimonials-intro,.quote-card,.faq-intro,.faq-list{
        grid-column:1;
      }
      .service-card.tilted{transform:none}
      .tile-inner{padding:24px}
      .tile h2{font-size:clamp(2.7rem,14vw,4.5rem)}
      .project-art{height:180px}
      .lang-rail{right:14px;bottom:14px}
      .cursor{display:none}
    }



    /* ОБНОВЛЕНО: услуги — воздушный editorial-список вместо тяжёлых bento-карточек */
    #services .bento{
      grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
      gap:clamp(36px,6vw,96px);
      align-items:start;
    }
    #services .services-intro{
      grid-column:1;
      grid-row:1 / span 5;
      position:sticky;
      top:120px;
      min-height:0;
      border:0!important;
      border-radius:0;
      background:transparent;
      box-shadow:none!important;
      backdrop-filter:none;
      overflow:visible;
    }
    #services .services-intro .tile-inner{padding:0 4px 0 0}
    #services .services-intro h2{
      max-width:560px;
      margin-bottom:24px;
    }
    #services .services-intro p{
      max-width:500px;
      margin-bottom:0;
    }
    #services .service-card{
      grid-column:2!important;
      min-height:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      backdrop-filter:none!important;
      overflow:visible;
      transform:none!important;
      position:relative;
    }
    #services .service-card::before{
      content:"";
      position:absolute;
      left:0;right:0;top:0;
      height:1px;
      background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.025));
      transition:background .28s ease,transform .28s ease;
      transform-origin:left;
    }
    #services .service-card:last-child::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:1px;
      background:rgba(255,255,255,.06);
    }
    #services .service-card .tile-inner{
      display:grid;
      grid-template-columns:58px minmax(0,1fr) minmax(150px,auto);
      gap:clamp(18px,3vw,38px);
      align-items:start;
      padding:30px 4px 32px;
      transition:transform .34s cubic-bezier(.16,1,.3,1);
    }
    #services .service-card:hover .tile-inner{transform:translateX(10px)}
    #services .service-card:hover::before{
      background:linear-gradient(90deg,var(--yellow),rgba(56,189,248,.48),transparent 78%);
      transform:scaleX(.985);
    }
    #services .service-index{
      padding-top:5px;
      color:var(--blue);
      font-size:.78rem;
      font-weight:700;
      letter-spacing:.16em;
    }
    #services .service-row-main h3{
      margin:0 0 10px;
      max-width:720px;
      font-family:"Fraunces",serif;
      font-size:clamp(1.65rem,3vw,3.15rem);
      line-height:1;
      letter-spacing:-.035em;
      transition:color .25s ease;
    }
    #services .service-card:hover .service-row-main h3{color:var(--yellow)}
    #services .service-row-main p{
      max-width:720px;
      margin:0;
      color:#9eacbe;
      font-size:.98rem;
      line-height:1.65;
    }
    #services .service-row-side{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:15px;
      text-align:right;
      padding-top:2px;
    }
    #services .service-price{
      margin:0;
      white-space:nowrap;
      font-size:clamp(1.15rem,1.7vw,1.55rem);
    }
    #services .service-more{
      min-height:auto;
      margin:0;
      padding:0 0 4px;
      border:0!important;
      border-bottom:1px solid rgba(255,255,255,.24)!important;
      border-radius:0;
      clip-path:none;
      background:transparent!important;
      color:#d9e2ee;
      box-shadow:none!important;
      font-size:.82rem;
      font-weight:700;
    }
    #services .service-more:hover{
      transform:none;
      color:var(--blue);
      border-bottom-color:var(--blue)!important;
    }

    /* ОБНОВЛЕНО: текстовая кнопка возврата без декоративной стрелки */
    .service-back{
      position:relative;
      padding:8px 0 6px!important;
      border:0!important;
      background:transparent!important;
      box-shadow:none!important;
    }
    .service-back::after{
      content:"";
      position:absolute;
      left:0;bottom:0;
      width:42px;height:1px;
      background:rgba(255,255,255,.28);
      transition:width .25s ease,background .25s ease;
    }
    .service-back:hover::after{width:100%;background:var(--yellow)}

    @media(max-width:1100px){
      #services .bento{grid-template-columns:1fr;gap:28px}
      #services .services-intro{
        grid-column:1;
        grid-row:auto;
        position:static;
        max-width:850px;
        margin-bottom:18px;
      }
      #services .service-card{grid-column:1!important}
    }
    @media(max-width:767px){
      #services .service-card .tile-inner{
        grid-template-columns:34px minmax(0,1fr);
        gap:14px 16px;
        padding:24px 0 26px;
      }
      #services .service-row-side{
        grid-column:2;
        align-items:flex-start;
        text-align:left;
        gap:10px;
      }
      #services .service-row-main h3{font-size:clamp(1.6rem,8vw,2.45rem)}
      #services .service-row-main p{font-size:.93rem}
    }

    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
      .reveal{opacity:1;transform:none}
      .cursor{display:none}
    }


    /* ДОБАВЛЕНО: жёсткая фиксация логотипа — позиция не зависит от скролла и состояния сетки */
    .header .logo{position:fixed;top:24px;left:28px;z-index:1250;transform:none!important}

    /* ДОБАВЛЕНО: контакты в полноэкранном burger-меню */
    .nav-contacts{display:grid;gap:10px;margin-top:10px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}
    .nav-contacts a,.nav-contacts>div{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;color:#cbd5e1;font-size:.9rem;line-height:1.45}
    .nav-contacts span:first-child{color:var(--yellow)}

    /* ДОБАВЛЕНО: кнопка «Подробнее» в существующую карточку услуги */
    .service-more{margin-top:18px;align-self:flex-start;font-size:.78rem;min-height:40px;padding:9px 14px}

    /* ДОБАВЛЕНО: отдельная страница услуги с сохранением текущей дизайн-системы */
    .service-page{display:none;position:relative;z-index:3;min-height:100vh;padding:120px 0 90px;background:var(--bg)}
    .service-page.active{display:block;animation:servicePageIn .55s cubic-bezier(.16,1,.3,1)}
    @keyframes servicePageIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
    .service-page-shell{position:relative}
    .service-back{margin-bottom:28px;border:0;background:transparent;color:#cbd5e1;cursor:pointer;font-weight:700;padding:8px 0}
    .service-back:hover{color:var(--yellow)}
    .service-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
    .service-page-main{overflow:hidden}
    .service-detail-image{height:min(42vw,500px);min-height:320px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
    .service-detail-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(10,14,26,.25)),linear-gradient(120deg,rgba(56,189,248,.08),transparent 45%,rgba(250,204,21,.08));pointer-events:none}
    .service-detail-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06) brightness(.76)}
    .service-page h1{font-family:"Fraunces",serif;font-size:clamp(3rem,7vw,6.8rem);line-height:.88;letter-spacing:-.06em;margin-bottom:24px}
    .service-lead{font-size:clamp(1.08rem,1.7vw,1.35rem);max-width:900px;color:#e3eaf3}
    .service-copy-block{padding-top:28px;margin-top:28px;border-top:1px solid rgba(255,255,255,.1)}
    .service-copy-block h3{font-family:"Fraunces",serif;font-size:1.55rem;margin-bottom:12px}
    .service-steps{display:grid;gap:10px;padding-left:22px;color:#cbd5e1;line-height:1.6}
    .service-tech-list{display:flex;flex-wrap:wrap;gap:8px}
    .service-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding:0;list-style:none}
    .service-benefits li{position:relative;padding-left:24px;color:#d6deea;line-height:1.5}
    .service-benefits li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:700}
    .service-order{position:sticky;top:100px}
    .service-order-caption{display:block;color:#8fa0b4;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
    .service-order-price{font-family:"Fraunces",serif;color:var(--yellow);font-size:clamp(2rem,3vw,3.3rem);line-height:1;margin-bottom:24px}
    .service-order .cut-btn{width:100%;margin-top:12px}

    /* ДОБАВЛЕНО: блок практических кейсов вместо отзывов */
    .cases-intro{grid-column:1 / span 4;min-height:430px}
    .case-card{grid-column:span 4;min-height:330px}
    .case-caption{color:var(--blue);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;margin:18px 0 7px}
    .case-outcome{padding-top:16px;margin-top:18px;border-top:1px solid rgba(255,255,255,.1);color:#edf2f8}

    @media(max-width:1100px){.service-page-grid{grid-template-columns:1fr}.service-order{position:static}.cases-intro,.case-card{grid-column:span 6}}
    @media(max-width:767px){
      .header .logo{top:18px;left:16px}
      .nav-drawer{overflow-y:auto}
      .nav-main{padding-bottom:24px}
      .nav-meta{display:flex!important;padding:0 24px 80px;justify-content:flex-start}
      .nav-meta>p{display:none}
      .service-page{padding-top:100px}
      .service-detail-image{height:260px;min-height:260px}
      .service-benefits{grid-template-columns:1fr}
      .cases-intro,.case-card{grid-column:1}
    }


    /* ИСПРАВЛЕНО: логотип жёстко закреплён и не участвует в scroll/reveal transform */
    .header .logo{
      position:fixed!important;
      top:24px!important;
      left:28px!important;
      margin:0!important;
      transform:none!important;
      translate:none!important;
      transition:none!important;
      will-change:auto!important;
    }

    /* ИСПРАВЛЕНО: меньше визуального шума — сохраняем bento-композицию, но облегчаем рамки и тени */
    .tile{
      border-color:rgba(255,255,255,.045);
      box-shadow:0 18px 46px rgba(0,0,0,.16);
    }
    .service-card{
      border-color:transparent!important;
      box-shadow:none!important;
    }
    .service-card:hover{
      border-color:transparent!important;
      box-shadow:0 22px 54px rgba(0,0,0,.20)!important;
    }
    .about-media,
    .project-art,
    .service-detail-image{
      border:0!important;
      outline:0!important;
    }
    .mini-chip,
    .tech-chip{
      border:0!important;
      background:rgba(255,255,255,.055);
    }
    .project-result,
    .case-outcome,
    .service-copy-block{
      border-top:0!important;
    }
    .service-copy-block{
      padding-top:12px;
      margin-top:24px;
    }
    .faq-item{border-bottom-color:rgba(255,255,255,.055)}
    .menu-trigger,
    .lang-rail{
      border-color:rgba(255,255,255,.06);
      box-shadow:none;
    }

    /* ИСПРАВЛЕНО: контакты в burger-меню без отдельной декоративной карточки */
    .nav-contacts{
      padding:14px 0 0;
      border:0!important;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

    /* ИСПРАВЛЕНО: страница услуги остаётся в той же дизайн-системе, но без тяжёлых контуров */
    .service-page-main,
    .service-order{
      border-color:rgba(255,255,255,.035)!important;
      box-shadow:0 18px 48px rgba(0,0,0,.14)!important;
    }

    @media(max-width:767px){
      .header .logo{top:18px!important;left:16px!important}
    }

  

    /* ИСПРАВЛЕНО: header теперь sticky и занимает место в потоке.
       Логотип больше не плавает поверх текста и не меняет координаты при скролле. */
    .header{
      position:sticky!important;
      top:0!important;
      left:auto!important;
      right:auto!important;
      min-height:88px;
      padding:20px 28px!important;
      background:linear-gradient(180deg,rgba(10,14,26,.96),rgba(10,14,26,.78) 72%,rgba(10,14,26,0));
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    .header .logo{
      position:static!important;
      top:auto!important;
      left:auto!important;
      margin:0!important;
      transform:none!important;
      translate:none!important;
      transition:none!important;
      will-change:auto!important;
      flex:0 0 auto;
    }
    .header .menu-trigger{margin-left:auto;flex:0 0 auto}

    /* ИСПРАВЛЕНО: все карточки практических сценариев строго ровные.
       Убрана намеренная ротация одной карточки; высота и внутреннее выравнивание единообразны. */
    .case-card{
      min-height:360px;
      height:100%;
      align-self:stretch;
    }
    .case-card .tile-inner{
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .case-card.visible{transform:none!important}
    .case-card .case-outcome{margin-top:auto}

    @media(max-width:767px){
      .header{
        min-height:72px;
        padding:12px 16px!important;
      }
      .header .logo{
        position:static!important;
        top:auto!important;
        left:auto!important;
      }
      .case-card{min-height:auto}
    }

    /* ДОБАВЛЕНО: контактные данные в футере */
    .footer-contacts{
      display:flex;
      flex-wrap:wrap;
      gap:10px 24px;
      margin-top:14px;
      color:#9aa8bb;
      font-size:.88rem;
      line-height:1.55;
    }
    .footer-contacts a,
    .footer-contacts span{
      color:#9aa8bb;
      text-decoration:none;
    }
    .footer-contacts a:hover{color:var(--yellow)}
    .footer-contact-item{
      display:inline-flex;
      align-items:center;
      gap:7px;
    }
    .footer-contact-item svg{
      width:14px;
      height:14px;
      flex:0 0 14px;
      color:var(--blue);
    }
    @media (max-width:767px){
      .footer-contacts{
        flex-direction:column;
        gap:8px;
        align-items:flex-start;
      }
    }

  
    /* ДОБАВЛЕНО: контактный блок без дублирования адреса/телефона/email */
    .contact-process .contact-item{
      padding:18px 0;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .contact-process .contact-item:last-child{border-bottom:0}
    .contact-process .contact-item span{
      display:block;
      max-width:620px;
      color:var(--muted);
      line-height:1.65;
    }

    /* ДОБАВЛЕНО: более редакционный футер без повторения полного контактного блока */
    .footer-editorial{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(180px,.7fr) minmax(220px,.8fr);
      gap:42px;
      align-items:start;
      padding:4px 0 30px;
    }
    .footer-brand{
      display:inline-block;
      margin-bottom:10px;
      font-size:1.08rem;
    }
    .footer-about{
      max-width:520px;
      margin:0;
      color:#7f8da1;
      font-size:.92rem;
      line-height:1.65;
    }
    .footer-nav{
      display:grid;
      gap:8px;
    }
    .footer-nav a{
      color:#8e9caf;
      font-size:.9rem;
      transition:color .2s ease,transform .2s ease;
    }
    .footer-nav a:hover{
      color:var(--yellow);
      transform:translateX(3px);
    }
    .footer-actions{
      display:grid;
      gap:10px;
      justify-items:start;
    }
    .footer-action{
      display:inline-flex;
      align-items:center;
      gap:9px;
      color:#a8b4c4;
      font-size:.9rem;
      transition:color .2s ease,transform .2s ease;
    }
    .footer-action span:first-child{
      color:var(--blue);
      font-size:1rem;
    }
    .footer-action:hover{
      color:var(--yellow);
      transform:translateX(3px);
    }
    .footer-bottom-line{
      display:flex;
      justify-content:space-between;
      gap:24px;
      flex-wrap:wrap;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.07);
    }
    .footer-bottom-line small{color:#627085}
    @media (max-width:900px){
      .footer-editorial{grid-template-columns:1fr 1fr}
      .footer-brand-block{grid-column:1/-1}
    }
    @media (max-width:600px){
      .footer-editorial{grid-template-columns:1fr;gap:24px}
      .footer-brand-block{grid-column:auto}
      .footer-bottom-line{flex-direction:column;gap:6px}
    }

  
    /* ФИНАЛЬНАЯ ПРАВКА: футер без блока быстрых действий */
    .footer-editorial{
      grid-template-columns:minmax(0,1.5fr) minmax(180px,.6fr) !important;
    }
    @media (max-width:900px){
      .footer-editorial{
        grid-template-columns:1fr 1fr !important;
      }
      .footer-brand-block{grid-column:auto !important}
    }
    @media (max-width:600px){
      .footer-editorial{grid-template-columns:1fr !important}
    }

  
    /* КЛИЕНТСКАЯ ПРАВКА: убран странный декоративный круг в hero */
    .hero-orbit{display:none !important}
    .hero{grid-template-columns:1fr !important}
    .hero-copy{max-width:980px}

    /* КЛИЕНТСКАЯ ПРАВКА: мягкий тёплый переход, чтобы тёмный сайт не был монотонным */
    #portfolio{
      position:relative;
      isolation:isolate;
    }
    #portfolio::before{
      content:"";
      position:absolute;
      z-index:-1;
      left:-8vw; right:-8vw; top:-35px; bottom:-35px;
      background:
        radial-gradient(ellipse at 18% 38%, rgba(220,199,159,.16), transparent 34%),
        linear-gradient(90deg, rgba(205,183,145,.055), transparent 42%, rgba(205,183,145,.04));
      pointer-events:none;
    }

    /* Более компактные цены */
    .service-row-price,
    .service-order-price{
      font-size:clamp(1.35rem,2.4vw,2.1rem) !important;
      line-height:1.05 !important;
    }

    /* Три услуги выглядят цельно и не оставляют пустую сетку */
    .services-list{align-self:start}
    .service-row{min-height:190px}

    /* Убираем лишнюю высоту в блоке О нас */
    .about-copy{min-height:auto !important}
    .about-copy .tile-inner{display:flex;flex-direction:column}
    .about-media{margin-top:24px !important}
    .about-media img{max-height:360px;object-fit:cover}

    /* Новая кнопка связи на странице услуги */
    .service-order-actions{display:grid;gap:10px;margin-top:16px}
    .service-contact-button{
      width:100%;
      background:transparent;
      border:0;
      border-bottom:1px solid rgba(255,255,255,.18);
      padding:13px 4px;
      color:var(--muted);
      cursor:pointer;
      text-align:left;
      transition:color .2s ease,border-color .2s ease;
    }
    .service-contact-button:hover{color:var(--yellow);border-color:var(--yellow)}

    /* Мини-вкладка с email */
    .contact-sheet{
      position:fixed; inset:0; z-index:1700;
      display:none; place-items:center;
      padding:20px;
      background:rgba(5,8,15,.72);
      backdrop-filter:blur(8px);
    }
    .contact-sheet.open{display:grid}
    .contact-sheet-card{
      width:min(100%,520px);
      padding:30px;
      border-radius:24px;
      background:#111827;
      box-shadow:0 30px 90px rgba(0,0,0,.45);
    }
    .contact-sheet-card h3{font-family:"Fraunces",serif;font-size:2rem;margin-bottom:10px}
    .contact-sheet-card p{margin-bottom:24px}
    .contact-sheet-email{
      display:block;
      font-size:clamp(1.05rem,2.2vw,1.4rem);
      color:var(--yellow);
      margin-bottom:24px;
      word-break:break-word;
    }
    .contact-sheet-close{margin-left:12px;background:transparent;border:0;color:var(--muted);cursor:pointer}

    /* Юридические страницы */
    .legal-page{
      display:none;
      min-height:100vh;
      padding:120px 0 80px;
    }
    .legal-page.active{display:block}
    .legal-wrap{max-width:900px}
    .legal-wrap h1{font-size:clamp(3rem,7vw,5.5rem);margin-bottom:32px}
    .legal-wrap h2{font-family:"DM Sans",sans-serif;font-size:1.25rem;margin-top:34px}
    .legal-wrap p{max-width:820px}
    .legal-back{margin-bottom:34px;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0}
    .footer-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
    .footer-legal a{font-size:.84rem;color:#718096}
    .footer-legal a:hover{color:var(--yellow)}


    /* УТОЧНЕНИЕ: блок "О нас" без пустого пространства */
    #about .bento{
      grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);
      grid-auto-rows:auto;
      align-items:stretch;
    }
    #about .about-copy{
      grid-column:1 !important;
      grid-row:1 / span 3 !important;
      height:100%;
    }
    #about .about-copy .tile-inner{
      height:100%;
      display:flex;
      flex-direction:column;
    }
    #about .about-media{
      flex:1;
      min-height:340px;
      margin-top:24px !important;
    }
    #about .about-media img{
      width:100%;
      height:100%;
      min-height:340px;
      max-height:none !important;
      object-fit:cover;
    }
    #about .about-fact{
      grid-column:2 !important;
      min-height:0 !important;
    }

    /* Действия прямо в списке услуг */
    .service-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) 150px;
      gap:20px;
      align-items:center;
    }
    .service-row-main{
      width:100%;
      display:grid;
      grid-template-columns:52px minmax(0,1fr) auto;
      gap:20px;
      align-items:start;
      padding:30px 0;
      border:0;
      background:transparent;
      color:inherit;
      text-align:left;
      cursor:pointer;
    }
    .service-row-actions{
      display:flex;
      flex-direction:column;
      gap:7px;
      align-items:flex-start;
    }
    .service-row-link,
    .service-row-order,
    .service-row-contact{
      border:0;
      background:transparent;
      padding:3px 0;
      cursor:pointer;
      font-size:.84rem;
      font-weight:700;
      text-align:left;
    }
    .service-row-link{color:#8ea0b6}
    .service-row-order{color:var(--yellow)}
    .service-row-contact{color:var(--blue)}
    .service-row-link:hover,
    .service-row-order:hover,
    .service-row-contact:hover{color:#fff}

    @media(max-width:900px){
      #about .bento{grid-template-columns:1fr}
      #about .about-copy,
      #about .about-fact{grid-column:1 !important;grid-row:auto !important}
      .service-row{grid-template-columns:1fr}
      .service-row-actions{flex-direction:row;flex-wrap:wrap;padding-bottom:22px}
    }
    @media(max-width:600px){
      .service-row-main{grid-template-columns:34px 1fr}
      .service-row-price{grid-column:2}
    }


    /* КРИТИЧЕСКИЙ FIX: корректное размещение списка услуг */
    #services .services-list{
      grid-column:6 / -1;
      display:grid;
      gap:0;
      align-self:start;
      min-width:0;
    }
    #services .services-intro{
      grid-column:1 / span 5;
      min-height:0;
    }
    @media(max-width:1100px){
      #services .services-intro,
      #services .services-list{
        grid-column:1 / -1;
      }
    }

    /* Защита от пустого экрана даже при отключённом IntersectionObserver/ошибке анимации */
    .reveal.visible{opacity:1;transform:none}
    noscript + .page-shell .reveal{opacity:1;transform:none}


    /* FIX: услуги больше не создают скрытые неявные колонки и не выходят за экран */
    #services .bento{
      grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr) !important;
      gap:clamp(42px,6vw,92px) !important;
      align-items:start;
    }
    #services .services-intro{
      grid-column:1 !important;
      grid-row:1 !important;
      position:sticky;
      top:120px;
      min-width:0;
    }
    #services .services-list{
      grid-column:2 !important;
      grid-row:1 !important;
      min-width:0;
      width:100%;
      overflow:visible;
    }

    /* Каждая услуга — ровная editorial-строка без сжатия текста */
    #services .service-row{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) 168px !important;
      gap:28px !important;
      align-items:center !important;
      padding:28px 0;
      border-top:1px solid rgba(255,255,255,.09);
      min-width:0;
    }
    #services .service-row:last-child{
      border-bottom:1px solid rgba(255,255,255,.09);
    }

    #services .service-row-main{
      display:grid !important;
      grid-template-columns:42px minmax(0,1fr) !important;
      gap:18px !important;
      width:100%;
      min-width:0;
      padding:0 !important;
      border:0 !important;
      background:transparent !important;
      text-align:left;
      color:inherit;
      cursor:pointer;
    }
    #services .service-row-index{
      padding-top:5px;
      color:var(--blue);
      font-size:.76rem;
      font-weight:700;
      letter-spacing:.14em;
    }
    #services .service-row-copy{
      min-width:0;
      display:block;
    }
    #services .service-row-copy strong{
      display:block;
      margin-bottom:10px;
      font-family:"Fraunces",serif;
      font-size:clamp(1.65rem,2.7vw,2.65rem);
      line-height:1.03;
      letter-spacing:-.035em;
      color:#fff;
    }
    #services .service-row-copy > span{
      display:block;
      max-width:680px;
      color:#a8b4c5;
      font-size:.96rem;
      line-height:1.65;
      overflow-wrap:anywhere;
    }
    #services .service-row-price{
      grid-column:2;
      display:block;
      margin-top:14px;
      color:var(--yellow);
      font-family:"DM Sans",sans-serif;
      font-size:1.18rem !important;
      font-weight:600;
      line-height:1.2 !important;
      white-space:nowrap;
    }

    /* CTA — компактные, дорогие, а не цветные текстовые ссылки */
    #services .service-row-actions{
      display:grid !important;
      grid-template-columns:1fr !important;
      gap:9px !important;
      min-width:0;
      align-items:stretch !important;
    }
    #services .service-row-link,
    #services .service-row-order,
    #services .service-row-contact{
      width:100%;
      min-height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:9px 13px !important;
      border-radius:999px !important;
      font-size:.78rem !important;
      font-weight:700 !important;
      letter-spacing:.01em;
      cursor:pointer;
      transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
    }
    #services .service-row-link{
      color:#d7e0ec !important;
      background:rgba(255,255,255,.045) !important;
      border:1px solid rgba(255,255,255,.11) !important;
    }
    #services .service-row-order{
      color:#10131a !important;
      background:var(--yellow) !important;
      border:1px solid var(--yellow) !important;
    }
    #services .service-row-link:hover,
    #services .service-row-order:hover,
    #services .service-row-contact:hover{
      transform:translateY(-2px);
    }
    #services .service-row-link:hover{
      background:rgba(255,255,255,.085) !important;
      border-color:rgba(255,255,255,.2) !important;
    }
    #services .service-row-order:hover{
      box-shadow:0 10px 28px rgba(250,204,21,.14);
    }

    @media(max-width:1100px){
      #services .bento{
        grid-template-columns:1fr !important;
        gap:36px !important;
      }
      #services .services-intro,
      #services .services-list{
        grid-column:1 !important;
        grid-row:auto !important;
        position:static !important;
      }
      #services .services-intro{max-width:760px}
    }
    @media(max-width:720px){
      #services .service-row{
        grid-template-columns:1fr !important;
        gap:18px !important;
      }
      #services .service-row-actions{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      }
    }
    @media(max-width:520px){
      #services .service-row-actions{
        grid-template-columns:1fr !important;
      }
      #services .service-row-copy strong{
        font-size:clamp(1.5rem,8vw,2.15rem);
      }
    }


    /* РАСШИРЕНО: полноценные юридические страницы */
    .legal-content{
      max-width:900px;
    }
    .legal-content h3{
      margin:2.1rem 0 .65rem;
      font-family:"DM Sans",sans-serif;
      font-size:1.08rem;
      line-height:1.35;
      color:#fff;
      letter-spacing:-.01em;
    }
    .legal-content p{
      margin:0;
      max-width:82ch;
      color:#aeb9c9;
      line-height:1.78;
    }
    .legal-content strong{
      color:#e9eef5;
      font-weight:600;
    }


    /* FIX: расширенные юридические тексты действительно отображаются */
    .legal-wrap{
      max-width:980px !important;
    }
    .legal-page .legal-content,
    #privacyContent,
    #termsContent{
      max-width:900px;
    }
    #privacyContent h3,
    #termsContent h3{
      margin:2.3rem 0 .7rem;
      font-family:"DM Sans",sans-serif;
      font-size:1.15rem;
      line-height:1.35;
      color:#fff;
    }
    #privacyContent p,
    #termsContent p{
      margin:0;
      max-width:82ch;
      color:#aeb9c9;
      line-height:1.82;
      font-size:.98rem;
    }


    /* Финальная клиентская правка: цены меньше и спокойнее */
    #services .service-row-price{
      font-size:1.02rem !important;
      font-weight:600 !important;
      letter-spacing:-.01em;
    }
    .service-order-price{
      font-size:clamp(1.55rem,2.6vw,2.4rem) !important;
      line-height:1.05 !important;
    }
    .hp-field{
      position:absolute !important;
      left:-9999px !important;
      width:1px !important;
      height:1px !important;
      opacity:0 !important;
      pointer-events:none !important;
    }

    /* ==========================================================
       НОВЫЙ РИТМ СЕКЦИЙ 2026
       Вместо бежевых вставок — смена глубины тёмной палитры,
       фирменные electric-blue/yellow glow и световые швы.
       ========================================================== */

    .depth-section{
      position:relative;
      isolation:isolate;
      margin-inline:calc(50% - 50vw);
      padding-inline:calc(50vw - 50%);
    }

    /* Фон каждой секции растягивается на всю ширину viewport */
    .depth-section::before{
      content:"";
      position:absolute;
      z-index:-2;
      inset:-92px 0 -58px;
      pointer-events:none;
      transition:opacity .6s ease;
    }

    /* Световой шов между разделами: тонкий, а не рамка */
    .depth-section::after{
      content:"";
      position:absolute;
      z-index:-1;
      top:-34px;
      left:6vw;
      right:6vw;
      height:1px;
      pointer-events:none;
      opacity:.7;
      background:
        linear-gradient(
          90deg,
          transparent 0%,
          rgba(56,189,248,.10) 12%,
          rgba(56,189,248,.58) 36%,
          rgba(250,204,21,.32) 55%,
          rgba(56,189,248,.18) 76%,
          transparent 100%
        );
      box-shadow:0 0 24px rgba(56,189,248,.08);
      transform-origin:left center;
      animation:sectionSeam 8s ease-in-out infinite alternate;
    }

    @keyframes sectionSeam{
      from{opacity:.35;transform:scaleX(.82)}
      to{opacity:.78;transform:scaleX(1)}
    }

    /* 01 — услуги: холодный технологичный navy */
    .depth-services::before{
      background:
        radial-gradient(ellipse at 88% 18%, rgba(56,189,248,.10), transparent 34%),
        radial-gradient(ellipse at 18% 78%, rgba(31,63,105,.12), transparent 38%),
        linear-gradient(180deg,
          rgba(10,14,26,0) 0%,
          rgba(8,18,34,.72) 18%,
          rgba(9,20,38,.90) 50%,
          rgba(10,14,26,.22) 100%);
    }

    /* 02 — портфолио: чуть более editorial indigo */
    .depth-portfolio::before{
      background:
        radial-gradient(ellipse at 22% 30%, rgba(99,102,241,.09), transparent 34%),
        linear-gradient(145deg,
          rgba(10,14,26,.10) 0%,
          rgba(14,18,37,.92) 34%,
          rgba(17,20,42,.86) 68%,
          rgba(10,14,26,.12) 100%);
    }

    /* 03 — кейсы: graphite-blue, более матовый */
    .depth-cases::before{
      background:
        linear-gradient(180deg,
          rgba(10,14,26,0) 0%,
          rgba(15,22,34,.88) 20%,
          rgba(13,21,34,.94) 66%,
          rgba(10,14,26,.20) 100%),
        radial-gradient(ellipse at 78% 55%, rgba(56,189,248,.07), transparent 36%);
    }

    /* 04 — FAQ: почти чёрный, локальный spotlight */
    .depth-faq::before{
      background:
        radial-gradient(ellipse at 76% 18%, rgba(56,189,248,.10), transparent 26%),
        radial-gradient(ellipse at 28% 86%, rgba(250,204,21,.045), transparent 30%),
        linear-gradient(180deg,
          rgba(10,14,26,0) 0%,
          rgba(7,11,20,.94) 28%,
          rgba(8,12,22,.96) 72%,
          rgba(10,14,26,.10) 100%);
    }

    /* 05 — контакты: возврат к базовому фирменному navy */
    .depth-contacts::before{
      background:
        radial-gradient(ellipse at 14% 22%, rgba(56,189,248,.08), transparent 30%),
        linear-gradient(180deg,
          rgba(10,14,26,0) 0%,
          rgba(9,14,28,.82) 24%,
          rgba(10,14,26,.98) 62%,
          rgba(10,14,26,0) 100%);
    }

    /* Едва заметный "cut" по верхнему краю портфолио и FAQ —
       editorial ощущение без дополнительной карточки */
    .depth-portfolio > .bento,
    .depth-faq > .bento{
      position:relative;
    }
    .depth-portfolio > .bento::before,
    .depth-faq > .bento::before{
      content:"";
      position:absolute;
      pointer-events:none;
      z-index:-1;
      top:-34px;
      left:-12px;
      width:110px;
      height:52px;
      background:linear-gradient(135deg, rgba(56,189,248,.08), transparent 72%);
      clip-path:polygon(0 0,100% 0,72% 100%,0 100%);
      opacity:.9;
    }

    /* Scroll-as-navigation: очень тонкий progress line */
    .scroll-progress{
      position:fixed;
      z-index:2400;
      top:0;
      left:0;
      width:100%;
      height:2px;
      pointer-events:none;
      background:rgba(255,255,255,.025);
    }
    .scroll-progress-bar{
      display:block;
      width:0;
      height:100%;
      transform-origin:left center;
      background:
        linear-gradient(90deg,
          var(--blue) 0%,
          #7dd3fc 62%,
          var(--yellow) 100%);
      box-shadow:0 0 12px rgba(56,189,248,.35);
      transition:width .08s linear;
    }

    /* Акцент секции при появлении:
       glow усиливается мягко, не меняя существующую reveal-анимацию */
    .depth-section.section-in-view::after{
      opacity:.92;
      box-shadow:
        0 0 22px rgba(56,189,248,.12),
        0 0 46px rgba(56,189,248,.045);
    }

    @media(max-width:767px){
      .depth-section{
        margin-inline:-14px;
        padding-inline:14px;
      }
      .depth-section::before{
        inset:-62px 0 -42px;
      }
      .depth-section::after{
        top:-22px;
        left:20px;
        right:20px;
      }
      .depth-portfolio > .bento::before,
      .depth-faq > .bento::before{
        width:76px;
        height:38px;
        top:-20px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      .depth-section::after{animation:none}
      .scroll-progress-bar{transition:none}
    }


    /* ==========================================================
       ФИНАЛЬНО: МЕНЯЕМ ИМЕННО ФОН СЕКЦИЙ, НЕ ЦВЕТ КАРТОЧЕК
       ========================================================== */

    /* Карточки возвращаем в единую спокойную тёмную систему */
    #about .about-fact,
    #about .about-copy,
    #portfolio .project-card,
    #portfolio .project-card .tile-inner,
    #cases .case-card,
    #faq .faq-intro,
    #faq .faq-list,
    #contacts .contact-info,
    #contacts .contact-form,
    #services .service-row:nth-child(2),
    #services .service-row:nth-child(3){
      background:rgba(15,20,32,.82) !important;
      border-color:rgba(255,255,255,.07) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 22px 54px rgba(0,0,0,.18) !important;
    }

    /* Возвращаем светлый текст на карточках */
    #about .about-fact *,
    #portfolio .project-card *,
    #cases .case-card *,
    #faq .faq-intro *,
    #contacts .contact-info *,
    #contacts .contact-form *{
      color:inherit;
    }
    #about .about-fact h3,
    #portfolio .project-card h3,
    #cases .case-card h3,
    #faq .faq-intro h2,
    #contacts .contact-info h2{
      color:#fff !important;
    }
    #about .about-fact p,
    #portfolio .project-card p,
    #cases .case-card p,
    #faq .faq-intro p,
    #contacts .contact-info p,
    #contacts .contact-info small,
    #contacts .contact-info span{
      color:#aeb9c9 !important;
    }
    #about .about-fact .fact-mark{
      color:var(--blue) !important;
    }

    #services .service-row:nth-child(2) .service-row-index,
    #services .service-row:nth-child(3) .service-row-index{
      color:var(--blue) !important;
    }
    #services .service-row:nth-child(2) .service-row-copy strong,
    #services .service-row:nth-child(3) .service-row-copy strong{
      color:#fff !important;
    }
    #services .service-row:nth-child(2) .service-row-copy > span,
    #services .service-row:nth-child(3) .service-row-copy > span{
      color:#9eabbc !important;
    }
    #services .service-row:nth-child(2) .service-row-price,
    #services .service-row:nth-child(3) .service-row-price{
      color:var(--yellow) !important;
    }

    /* Кнопки второй услуги тоже возвращаем в общий стиль */
    #services .service-row:nth-child(2) .service-row-link,
    #services .service-row:nth-child(3) .service-row-link{
      background:rgba(255,255,255,.035) !important;
      border-color:rgba(255,255,255,.10) !important;
      color:#eaf0f8 !important;
    }
    #services .service-row:nth-child(2) .service-row-order,
    #services .service-row:nth-child(3) .service-row-order{
      background:var(--yellow) !important;
      border-color:var(--yellow) !important;
      color:#101725 !important;
    }

    /* Сами секции становятся явными отдельными цветовыми главами */
    .depth-section{
      position:relative;
      isolation:isolate;
    }

    .depth-section::before{
      inset:-76px 0 -62px !important;
      filter:none !important;
      opacity:1 !important;
    }

    /* УСЛУГИ — холодный технологичный navy */
    .depth-services::before{
      background:
        radial-gradient(circle at 84% 18%, rgba(56,189,248,.14), transparent 34%),
        linear-gradient(180deg,
          #071322 0%,
          #0a1b2d 42%,
          #0b1e33 72%,
          #0a0e1a 100%) !important;
    }

    /* ПОРТФОЛИО — заметный indigo / violet-black */
    .depth-portfolio::before{
      background:
        radial-gradient(circle at 18% 16%, rgba(108,92,231,.18), transparent 34%),
        linear-gradient(180deg,
          #16162b 0%,
          #1d1a3a 45%,
          #242046 72%,
          #0a0e1a 100%) !important;
    }

    /* КЕЙСЫ — глубокий teal */
    .depth-cases::before{
      background:
        radial-gradient(circle at 80% 20%, rgba(45,212,191,.14), transparent 34%),
        linear-gradient(180deg,
          #082024 0%,
          #0b2b2f 44%,
          #0e3437 72%,
          #0a0e1a 100%) !important;
    }

    /* FAQ — графитово-фиолетовый */
    .depth-faq::before{
      background:
        radial-gradient(circle at 72% 12%, rgba(129,92,246,.14), transparent 30%),
        linear-gradient(180deg,
          #15131f 0%,
          #1b1729 46%,
          #211b31 72%,
          #0a0e1a 100%) !important;
    }

    /* КОНТАКТЫ — насыщенный cobalt/navy */
    .depth-contacts::before{
      background:
        radial-gradient(circle at 14% 18%, rgba(56,189,248,.16), transparent 32%),
        linear-gradient(180deg,
          #07192b 0%,
          #0a2641 44%,
          #0b3150 70%,
          #0a0e1a 100%) !important;
    }

    /* Верхние швы делаем спокойнее, чтобы фон был главным */
    .depth-section::after{
      opacity:.42 !important;
      background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        rgba(56,189,248,.32),
        transparent
      ) !important;
      box-shadow:none !important;
    }

    /* Добавляем чуть больше воздуха между цветовыми главами */
    #services,
    #portfolio,
    #cases,
    #faq,
    #contacts{
      padding-top:clamp(90px,9vw,145px) !important;
      padding-bottom:clamp(90px,9vw,145px) !important;
    }

    @media(max-width:767px){
      .depth-section::before{
        inset:-52px 0 -42px !important;
      }
      #services,
      #portfolio,
      #cases,
      #faq,
      #contacts{
        padding-top:78px !important;
        padding-bottom:78px !important;
      }
    }


    
    /* ==========================================================
       ЕДИНЫЙ ФОН ВСЕХ КАРТОЧЕК И ПЛАШЕК
       Цветовое разнообразие остается только на фоне секций.
       ========================================================== */
    :root{
      --card-surface:#101722;
      --card-surface-border:rgba(255,255,255,.075);
    }

    /* О нас */
    #about .bento > .tile,
    #about .bento > .tile:nth-child(1),
    #about .bento > .tile:nth-child(2),
    #about .bento > .tile:nth-child(3),
    #about .bento > .tile:nth-child(4),

    /* Услуги */
    #services .services-intro,
    #services #servicesList > .service-row,
    #services #servicesList > .service-row:nth-child(1),
    #services #servicesList > .service-row:nth-child(2),
    #services #servicesList > .service-row:nth-child(3),

    /* Портфолио — включая динамически созданные карточки */
    #portfolio #portfolioBento > .tile,
    #portfolio #portfolioBento > .project-card,
    #portfolio #portfolioBento > .project-card:nth-child(1),
    #portfolio #portfolioBento > .project-card:nth-child(2),
    #portfolio #portfolioBento > .project-card:nth-child(3),
    #portfolio #portfolioBento > .project-card:nth-child(4),

    /* Кейсы — включая заголовочную плашку */
    #cases #casesBento > .tile,
    #cases #casesBento > .case-card,
    #cases #casesBento > .case-card:nth-child(2),
    #cases #casesBento > .case-card:nth-child(3),
    #cases #casesBento > .case-card:nth-child(4),

    /* FAQ */
    #faq .faq-intro,
    #faq .faq-list,

    /* Контакты */
    #contacts .contact-info,
    #contacts .contact-form,

    /* Внутренние страницы и оверлеи */
    #servicePage .service-page-main,
    #servicePage .service-order,
    .modal,
    .contact-sheet-card{
      background:var(--card-surface) !important;
      background-color:var(--card-surface) !important;
      background-image:none !important;
      border-color:var(--card-surface-border) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 22px 54px rgba(0,0,0,.18) !important;
      filter:none !important;
    }

    /* Внутренние слои карточек не должны снова окрашивать поверхность */
    #about .tile > .tile-inner,
    #services .services-intro > .tile-inner,
    #portfolio #portfolioBento > .tile > .tile-inner,
    #cases #casesBento > .tile > .tile-inner,
    #faq .faq-intro > .tile-inner,
    #contacts .contact-info > .tile-inner,
    #contacts .contact-form > .tile-inner{
      background:transparent !important;
      background-color:transparent !important;
      background-image:none !important;
      box-shadow:none !important;
    }

    /* FAQ-строки являются содержимым одной карточки, а не отдельными цветными карточками */
    #faq #faqList > .faq-item,
    #faq #faqList > .faq-item:nth-child(odd),
    #faq #faqList > .faq-item:nth-child(even){
      background:transparent !important;
      background-image:none !important;
      box-shadow:none !important;
    }

    /* Изображения проектов остаются изображениями; цветная подложка под ними запрещена */
    #portfolio .project-card .project-art{
      background-color:transparent !important;
    }

    /* Единая типографика после удаления старых цветных карточек */
    #about .tile h2,
    #about .tile h3,
    #portfolio .project-card h2,
    #portfolio .project-card h3,
    #cases #casesBento > .tile h2,
    #cases .case-card h3,
    #faq .faq-intro h2,
    #contacts .contact-info h2{
      color:#fff !important;
    }

    #about .tile p,
    #portfolio .project-card p,
    #cases #casesBento > .tile p,
    #faq .faq-intro p,
    #contacts .contact-info p,
    #contacts .contact-info small,
    #contacts .contact-info span{
      color:#aeb9c9 !important;
    }

    /* Акценты остаются только в тексте/кнопках */
    #about .fact-mark,
    #services .service-row-index{
      color:var(--blue) !important;
    }
    #services .service-row-price,
    .service-order-price{
      color:var(--yellow) !important;
    }

    /* Все желтые CTA — черный текст */
    .btn-primary,
    .service-row-order,
    .service-order-btn,
    #contactForm button[type="submit"],
    #serviceForm button[type="submit"]{
      color:#0a0e1a !important;
    }


    /* ==========================================================
       БОЛЕЕ ОДНОТОННАЯ ПАЛИТРА:
       один navy-диапазон, различия только по глубине и свету.
       ========================================================== */

    .depth-services::before{
      background:
        radial-gradient(circle at 84% 18%, rgba(56,189,248,.07), transparent 34%),
        linear-gradient(180deg,
          #09111d 0%,
          #0b1624 48%,
          #0a1421 76%,
          #0a0e1a 100%) !important;
    }

    .depth-portfolio::before{
      background:
        radial-gradient(circle at 18% 20%, rgba(56,189,248,.045), transparent 34%),
        linear-gradient(180deg,
          #0b1220 0%,
          #101827 46%,
          #0d1624 74%,
          #0a0e1a 100%) !important;
    }

    .depth-cases::before{
      background:
        radial-gradient(circle at 80% 20%, rgba(56,189,248,.05), transparent 34%),
        linear-gradient(180deg,
          #0a1420 0%,
          #0c1927 44%,
          #0d1b2a 72%,
          #0a0e1a 100%) !important;
    }

    .depth-faq::before{
      background:
        radial-gradient(circle at 72% 12%, rgba(56,189,248,.035), transparent 30%),
        linear-gradient(180deg,
          #0b101a 0%,
          #0d1420 46%,
          #101724 72%,
          #0a0e1a 100%) !important;
    }

    .depth-contacts::before{
      background:
        radial-gradient(circle at 14% 18%, rgba(56,189,248,.06), transparent 32%),
        linear-gradient(180deg,
          #09131f 0%,
          #0b1826 44%,
          #0c1b2b 70%,
          #0a0e1a 100%) !important;
    }

    /* Световые швы делаем почти незаметными */
    .depth-section::after{
      opacity:.22 !important;
      background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.06),
        rgba(56,189,248,.16),
        transparent
      ) !important;
      box-shadow:none !important;
    }

    /* Убираем лишний насыщенный цвет из progress bar */
    .scroll-progress-bar{
      background:linear-gradient(
        90deg,
        rgba(56,189,248,.9),
        rgba(125,211,252,.95)
      ) !important;
      box-shadow:0 0 10px rgba(56,189,248,.22) !important;
    }

    /* Карточки остаются едиными и чуть мягче по контрасту */
    :root{
      --card-surface:#101722;
    }

    /* Желтый оставляем только как CTA-акцент, без дополнительных цветных панелей */
    #services .service-row-price,
    .service-order-price{
      color:var(--yellow) !important;
    }


    /* ==========================================================
       LIGHT PANELS — только цвет карточек и внутренние отступы.
       ФОН САЙТА / СЕКЦИЙ НЕ МЕНЯЕМ.
       ========================================================== */

    :root{
      --light-panel:#f5f7fa;
      --light-panel-soft:#eef2f6;
      --light-panel-text:#10151d;
      --light-panel-muted:#4b5563;
      --light-panel-border:rgba(10,14,26,.10);
    }

    /* Единый padding для карточек и текстовых панелей */
    #about .about-copy,
    #about .about-fact,
    #services .services-intro,
    #services #servicesList > .service-row,
    #portfolio #portfolioBento > .project-card,
    #cases #casesBento > .case-card,
    #faq .faq-intro,
    #faq .faq-list,
    #contacts .contact-info,
    #contacts .contact-form,
    #servicePage .service-page-main,
    #servicePage .service-order,
    .contact-sheet-card,
    .modal-card,
    .legal-card{
      padding:28px !important;
    }

    /* --------------------------
       БЕЛЫЕ / СВЕТЛЫЕ ПАНЕЛИ
       -------------------------- */

    /* О нас */
    #about .about-copy,
    #about .about-fact{
      background:var(--light-panel) !important;
      background-image:none !important;
      border-color:var(--light-panel-border) !important;
      box-shadow:none !important;
    }

    /* Карточки услуг */
    #services #servicesList > .service-row,
    #services #servicesList > .service-row:nth-child(1),
    #services #servicesList > .service-row:nth-child(2),
    #services #servicesList > .service-row:nth-child(3){
      background:var(--light-panel) !important;
      background-image:none !important;
      border-color:var(--light-panel-border) !important;
      box-shadow:none !important;
    }

    /* Информационные панели */
    #faq .faq-intro,
    #faq .faq-list,
    #contacts .contact-info,
    #contacts .contact-form{
      background:var(--light-panel) !important;
      background-image:none !important;
      border-color:var(--light-panel-border) !important;
      box-shadow:none !important;
    }

    /* Внутренняя страница услуги / формы / модальные панели */
    #servicePage .service-page-main,
    #servicePage .service-order,
    .contact-sheet-card,
    .modal-card,
    .legal-card{
      background:var(--light-panel) !important;
      background-image:none !important;
      border-color:var(--light-panel-border) !important;
      box-shadow:none !important;
    }

    /* --------------------------
       ТЁМНЫЙ ТЕКСТ НА СВЕТЛЫХ ПАНЕЛЯХ
       -------------------------- */

    #about .about-copy h2,
    #about .about-copy h3,
    #about .about-fact h3,
    #about .about-copy strong,
    #about .about-fact strong,

    #services .service-row-copy strong,
    #services .service-row-link,

    #faq .faq-intro h2,
    #faq .faq-list h3,
    #faq .faq-question,
    #faq .faq-toggle,

    #contacts .contact-info h2,
    #contacts .contact-info h3,
    #contacts .contact-form h2,
    #contacts .contact-form h3,
    #contacts .contact-form label,

    #servicePage .service-page-main h1,
    #servicePage .service-page-main h2,
    #servicePage .service-page-main h3,
    #servicePage .service-order h2,
    #servicePage .service-order h3,

    .contact-sheet-card h2,
    .contact-sheet-card h3,
    .modal-card h2,
    .modal-card h3,
    .legal-card h1,
    .legal-card h2,
    .legal-card h3{
      color:var(--light-panel-text) !important;
    }

    #about .about-copy p,
    #about .about-fact p,
    #about .about-copy span,
    #about .about-fact span,

    #services .service-row-copy > span,

    #faq .faq-intro p,
    #faq .faq-answer,

    #contacts .contact-info p,
    #contacts .contact-info span,
    #contacts .contact-info small,
    #contacts .contact-form p,

    #servicePage .service-page-main p,
    #servicePage .service-page-main li,
    #servicePage .service-order p,

    .contact-sheet-card p,
    .contact-sheet-card label,
    .modal-card p,
    .modal-card label,
    .legal-card p,
    .legal-card li{
      color:var(--light-panel-muted) !important;
    }

    /* Цены остаются фирменным жёлтым акцентом */
    #services .service-row-price,
    .service-order-price{
      color:#c79b00 !important;
    }

    /* Номера услуг остаются фирменным blue-акцентом */
    #services .service-row-index,
    #about .fact-mark{
      color:#1679a7 !important;
    }

    /* Поля на светлых формах */
    #contacts .contact-form input,
    #contacts .contact-form textarea,
    #servicePage input,
    #servicePage textarea,
    .modal-card input,
    .modal-card textarea,
    .contact-sheet-card input,
    .contact-sheet-card textarea{
      color:var(--light-panel-text) !important;
      border-bottom-color:rgba(10,14,26,.24) !important;
      background:transparent !important;
    }

    #contacts .contact-form input::placeholder,
    #contacts .contact-form textarea::placeholder,
    #servicePage input::placeholder,
    #servicePage textarea::placeholder,
    .modal-card input::placeholder,
    .modal-card textarea::placeholder{
      color:#7a8491 !important;
    }

    /* FAQ-строки не получают отдельные цветные фоны */
    #faq #faqList > .faq-item,
    #faq #faqList > .faq-item:nth-child(odd),
    #faq #faqList > .faq-item:nth-child(even){
      background:transparent !important;
      background-image:none !important;
    }

    /* Кнопки: фирменный yellow оставляем как есть, текст чёрный */
    .btn-primary,
    .service-row-order,
    .service-order-btn,
    #contactForm button[type="submit"],
    #serviceForm button[type="submit"]{
      background:var(--yellow) !important;
      border-color:var(--yellow) !important;
      color:#0a0e1a !important;
    }

    /* Вторичные кнопки на светлых карточках — нейтральные */
    #services .service-row-link,
    #servicePage .btn-secondary{
      background:rgba(10,14,26,.04) !important;
      border-color:rgba(10,14,26,.12) !important;
      color:var(--light-panel-text) !important;
    }

    /* Mobile: тот же padding, чуть компактнее только чтобы не ломать ширину */
    @media(max-width:767px){
      #about .about-copy,
      #about .about-fact,
      #services .services-intro,
      #services #servicesList > .service-row,
      #portfolio #portfolioBento > .project-card,
      #cases #casesBento > .case-card,
      #faq .faq-intro,
      #faq .faq-list,
      #contacts .contact-info,
      #contacts .contact-form,
      #servicePage .service-page-main,
      #servicePage .service-order,
      .contact-sheet-card,
      .modal-card,
      .legal-card{
        padding:25px !important;
      }
    }


    /* ==========================================================
       CONTRAST FIX
       Светлые секции + гарантированно читаемый тёмный текст.
       Фон сайта, layout, шрифты и анимации не меняются.
       ========================================================== */
    :root{
      --panel-light:#f3f5f7;
      --panel-light-2:#edf1f4;
      --panel-ink:#111827;
      --panel-muted:#4b5563;
      --panel-line:rgba(17,24,39,.12);
    }

    /* 1. О НАС — устраняем конфликт старого тёмного !important-фона */
    #about .bento > .tile,
    #about .bento > .tile:nth-child(1),
    #about .bento > .tile:nth-child(2),
    #about .bento > .tile:nth-child(3),
    #about .bento > .tile:nth-child(4){
      background:var(--panel-light) !important;
      background-color:var(--panel-light) !important;
      background-image:none !important;
      border-color:var(--panel-line) !important;
      box-shadow:none !important;
    }
    #about .bento > .tile > .tile-inner{
      background:transparent !important;
      color:var(--panel-ink) !important;
    }
    #about .bento > .tile h2,
    #about .bento > .tile h3,
    #about .bento > .tile strong{
      color:var(--panel-ink) !important;
    }
    #about .bento > .tile p,
    #about .bento > .tile span:not(.fact-mark){
      color:var(--panel-muted) !important;
    }
    #about .bento > .tile .fact-mark{
      color:#1688bd !important;
    }

    /* 2. "ТРИ НАПРАВЛЕНИЯ..." — вся секция услуг в светлой системе */
    #services #servicesBento > .services-intro,
    #services #servicesList > .service-row,
    #services #servicesList > .service-row:nth-child(1),
    #services #servicesList > .service-row:nth-child(2),
    #services #servicesList > .service-row:nth-child(3){
      background:var(--panel-light) !important;
      background-color:var(--panel-light) !important;
      background-image:none !important;
      border-color:var(--panel-line) !important;
      box-shadow:none !important;
    }
    #services #servicesBento > .services-intro > .tile-inner{
      background:transparent !important;
    }
    #services #servicesBento > .services-intro h2,
    #services #servicesList > .service-row .service-row-copy strong{
      color:var(--panel-ink) !important;
    }
    #services #servicesBento > .services-intro p,
    #services #servicesList > .service-row .service-row-copy > span{
      color:var(--panel-muted) !important;
    }
    #services #servicesList > .service-row .service-row-index{
      color:#1688bd !important;
    }
    #services #servicesList > .service-row .service-row-price{
      color:#b98a00 !important;
    }
    #services #servicesList > .service-row .service-row-link{
      color:var(--panel-ink) !important;
      background:rgba(17,24,39,.045) !important;
      border-color:rgba(17,24,39,.14) !important;
    }
    #services #servicesList > .service-row .service-row-order{
      background:var(--yellow) !important;
      border-color:var(--yellow) !important;
      color:#0a0e1a !important;
    }

    /* 3. "КОГДА МЫ МОЖЕМ БЫТЬ ПОЛЕЗНЫ" — intro + все 3 сценария светлые */
    #cases #casesBento > .tile,
    #cases #casesBento > .tile:nth-child(1),
    #cases #casesBento > .case-card,
    #cases #casesBento > .case-card:nth-child(2),
    #cases #casesBento > .case-card:nth-child(3),
    #cases #casesBento > .case-card:nth-child(4){
      background:var(--panel-light-2) !important;
      background-color:var(--panel-light-2) !important;
      background-image:none !important;
      border-color:var(--panel-line) !important;
      box-shadow:none !important;
    }
    #cases #casesBento > .tile > .tile-inner{
      background:transparent !important;
      color:var(--panel-ink) !important;
    }
    #cases #casesBento > .tile h2,
    #cases #casesBento > .tile h3,
    #cases #casesBento > .tile strong{
      color:var(--panel-ink) !important;
    }
    #cases #casesBento > .tile p{
      color:var(--panel-muted) !important;
    }
    #cases #casesBento > .tile .project-result{
      border-top-color:rgba(17,24,39,.12) !important;
    }

    /* 4. FAQ — исправляем белый текст на белом фоне */
    #faq .faq-intro,
    #faq #faqList{
      background:var(--panel-light) !important;
      background-color:var(--panel-light) !important;
      background-image:none !important;
      border-color:var(--panel-line) !important;
      box-shadow:none !important;
    }
    #faq .faq-intro h2,
    #faq #faqList > .faq-item summary{
      color:var(--panel-ink) !important;
    }
    #faq .faq-intro p,
    #faq #faqList > .faq-item p{
      color:var(--panel-muted) !important;
    }
    #faq #faqList > .faq-item{
      border-bottom-color:rgba(17,24,39,.12) !important;
    }
    #faq #faqList > .faq-item summary::after{
      color:#c49300 !important;
    }

    /* 5. КОНТАКТЫ / ФОРМЫ — любой текст на светлой панели остаётся читаемым */
    #contacts .contact-info,
    #contacts .contact-form,
    .contact-sheet-card,
    .modal{
      background:var(--panel-light) !important;
      background-color:var(--panel-light) !important;
      background-image:none !important;
      border-color:var(--panel-line) !important;
      box-shadow:none !important;
    }
    #contacts .contact-info h2,
    #contacts .contact-info h3,
    #contacts .contact-form h2,
    #contacts .contact-form h3,
    #contacts .contact-form label,
    .contact-sheet-card h2,
    .contact-sheet-card h3,
    .modal h2,
    .modal h3,
    .modal label{
      color:var(--panel-ink) !important;
    }
    #contacts .contact-info p,
    #contacts .contact-info span,
    #contacts .contact-info small,
    #contacts .contact-form p,
    .contact-sheet-card p,
    .modal p{
      color:var(--panel-muted) !important;
    }
    #contacts .contact-form input,
    #contacts .contact-form textarea,
    .modal input,
    .modal textarea{
      color:var(--panel-ink) !important;
      border-bottom-color:rgba(17,24,39,.25) !important;
    }
    #contacts .contact-form input::placeholder,
    #contacts .contact-form textarea::placeholder,
    .modal input::placeholder,
    .modal textarea::placeholder{
      color:#7b8490 !important;
    }

    /* 6. СТРАНИЦЫ УСЛУГ — светлая панель = только тёмный текст */
    #servicePage .service-page-main,
    #servicePage .service-order{
      background:var(--panel-light) !important;
      background-color:var(--panel-light) !important;
      background-image:none !important;
      border-color:var(--panel-line) !important;
    }
    #servicePage .service-page-main h1,
    #servicePage .service-page-main h2,
    #servicePage .service-page-main h3,
    #servicePage .service-order h2,
    #servicePage .service-order h3{
      color:var(--panel-ink) !important;
    }
    #servicePage .service-page-main p,
    #servicePage .service-page-main li,
    #servicePage .service-order p,
    #servicePage .service-order-caption{
      color:var(--panel-muted) !important;
    }

    /* 7. Padding: 28px на карточках, без изменения геометрии секций */
    #about .bento > .tile,
    #services #servicesBento > .services-intro,
    #services #servicesList > .service-row,
    #cases #casesBento > .tile,
    #faq .faq-intro,
    #faq #faqList,
    #contacts .contact-info,
    #contacts .contact-form,
    #servicePage .service-page-main,
    #servicePage .service-order,
    .contact-sheet-card,
    .modal{
      padding:28px !important;
    }

    @media(max-width:767px){
      #about .bento > .tile,
      #services #servicesBento > .services-intro,
      #services #servicesList > .service-row,
      #cases #casesBento > .tile,
      #faq .faq-intro,
      #faq #faqList,
      #contacts .contact-info,
      #contacts .contact-form,
      #servicePage .service-page-main,
      #servicePage .service-order,
      .contact-sheet-card,
      .modal{
        padding:25px !important;
      }
    }