/* Общие стили внутренних страниц: услуги, кейсы.
   Главная страница живёт со своими стилями внутри index.html — она
   грузится первой, и лишний запрос там дороже, чем дублирование.
   Этот файл собирается из шаблона tools/build-service-pages.py:
   правьте стили ТАМ и пересоберите, иначе правка потеряется. */

  :root{
    --bg: #0a1613;
    --bg-alt: #0e1e19;
    --surface: #142e27;
    --mint: #a9f3c4;
    --teal: #4fc3d9;
    --indigo: #3a56b8;
    --text: #eaf6ef;
    --muted: #93ada2;
    --line: rgba(234,246,239,0.09);
    --grad: linear-gradient(135deg, var(--mint) 0%, var(--teal) 48%, var(--indigo) 100%);
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg: #f6fbf8;
      --bg-alt: #eaf5ef;
      --surface: #ffffff;
      --mint: #1f9e63;
      --teal: #1c86a8;
      --indigo: #32449a;
      --text: #10241d;
      --muted: #4c6459;
      --line: rgba(16,36,29,0.12);
    }
  }
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0; background: var(--bg); color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.62; font-size: 16.5px;
  }
  .wrap{ max-width: 900px; margin: 0 auto; padding: 0 20px; }

  header{
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .head-in{ display:flex; align-items:center; gap:14px; padding: 12px 0; }
  .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:600; }
  .logo img{ width:30px; height:31px; }
  .head-spacer{ flex:1; }
  .btn{
    display:inline-block; padding: 12px 22px; border-radius: 999px;
    text-decoration:none; font-weight:600; font-size:15.5px; border:0; cursor:pointer;
  }
  .btn-primary{ background: var(--grad); color:#06201a; }
  .head-phone{ color:var(--text); text-decoration:none; font-weight:600; white-space:nowrap; }
  @media (max-width: 680px){ .head-phone{ display:none; } }

  .crumbs{ font-size:14px; color:var(--muted); padding: 18px 0 6px; }
  .crumbs a{ color:var(--muted); text-decoration:none; }
  .crumbs a:hover{ color:var(--text); }

  h1{
    font-family:'Fraunces', Georgia, serif; font-weight:600;
    font-size: clamp(28px, 5.2vw, 44px); line-height:1.16; margin: 8px 0 16px;
  }
  h2{
    font-family:'Fraunces', Georgia, serif; font-weight:600;
    font-size: clamp(22px, 3.6vw, 30px); line-height:1.25; margin: 44px 0 14px;
  }
  .lead{ font-size: 18px; }
  p{ margin: 0 0 14px; }
  .muted{ color: var(--muted); }

  .hero-img{
    width:100%; height:auto; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 18px; margin: 22px 0 8px; display:block;
  }
  figcaption{ font-size:14px; color:var(--muted); margin-bottom: 8px; }

  .card{
    background: var(--surface); border:1px solid var(--line);
    border-radius:16px; padding: 20px 22px; margin: 18px 0;
  }
  .checks{ list-style:none; padding:0; margin: 14px 0; }
  .checks li{ position:relative; padding-left: 30px; margin-bottom: 12px; }
  .checks li::before{
    content:''; position:absolute; left:0; top:8px;
    width:16px; height:16px; border-radius:50%; background: var(--grad);
  }
  .steps{ counter-reset: s; list-style:none; padding:0; margin: 16px 0; }
  .steps li{ position:relative; padding-left: 46px; margin-bottom: 18px; }
  .steps li::before{
    counter-increment: s; content: '0' counter(s);
    position:absolute; left:0; top:0;
    font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:14px;
    color: var(--teal); font-weight:600;
  }
  .steps b{ display:block; }

  .price-box{
    background: var(--bg-alt); border:1px solid var(--line);
    border-radius:18px; padding: 24px; margin: 20px 0;
  }
  .price-main{
    font-family:'Fraunces', Georgia, serif; font-size: clamp(26px, 4.5vw, 34px);
    font-weight:600; margin-bottom: 4px;
  }

  .gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; }
  .gallery img{ width:100%; height:auto; aspect-ratio: 4/5; object-fit: cover; border-radius:14px; display:block; }

  details{ border-bottom:1px solid var(--line); padding: 14px 0; }
  details summary{ cursor:pointer; font-weight:600; font-size:17px; list-style:none; }
  details summary::-webkit-details-marker{ display:none; }
  details summary::after{ content:'+'; float:right; color:var(--teal); font-size:20px; line-height:1; }
  details[open] summary::after{ content:'\\2212'; }
  details p{ margin: 10px 0 0; color: var(--muted); }

  .cta{
    background: var(--surface); border:1px solid var(--line);
    border-radius:20px; padding: 26px 24px; margin: 34px 0;
  }
  .field{ margin-bottom: 12px; }
  .field label{ display:block; font-size:14px; color:var(--muted); margin-bottom:5px; }
  .field input{
    width:100%; padding: 13px 14px; border-radius:12px;
    border:1px solid var(--line); background: var(--bg); color:var(--text);
    font-size:16px; font-family:inherit;
  }
  .field input:focus{ border-color: var(--teal); outline:none; }
  .hp-field{ position:absolute; left:-9999px; }
  .form-note{ font-size:13.5px; color:var(--muted); margin-top:10px; }
  .form-note a{ color: var(--teal); }
  .form-error{ color:#ff9a8b; font-size:14.5px; display:none; margin-top:10px; }

  .others{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:10px; margin: 16px 0 40px; }
  .others a{
    display:block; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
    text-decoration:none; color:var(--text); background: var(--surface); font-weight:500;
  }
  .others a:hover{ border-color: var(--teal); }

  footer{
    border-top:1px solid var(--line); padding: 26px 0 96px;
    color:var(--muted); font-size:14.5px;
  }
  footer a{ color:var(--muted); }
  footer .made-in{ margin-top:16px; font-size:12.5px; opacity:.9; }
  footer .made-in a{ color:inherit; text-decoration:none; }
  footer .made-in a:hover{ opacity:1; text-decoration:underline; }

  .call-bar{
    position: fixed; left:0; right:0; bottom:0; z-index:60;
    display:none; gap:10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px); border-top:1px solid var(--line);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .call-bar.is-visible{ transform: translateY(0); }
  .call-bar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:52px; border-radius:999px; text-decoration:none; font-weight:600; font-size:16px;
  }
  .call-bar .cb-call{ background: var(--grad); color:#06201a; }
  .call-bar .cb-write{ background:transparent; color:var(--text); border:1px solid var(--line); flex: 0 0 34%; }
  @media (max-width: 720px){ .call-bar{ display:flex; } }