:root{
      --orange:#FF972D;
      --ink:#0d0d10;
      --muted:#312E1E;
      --paper:#F5EAB2;
      --white:#fff;
      --radius:18px;
      --max:1200px;
    }
    *{box-sizing:border-box}
    
    html,body{
        margin:0
        
    }
    
    body{
        font-family: system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif; 
        color:var(--ink); 
        background:#fff; 
        line-height:1.6
    }
    
    .container{
        max-width:var(--max); 
        margin-inline:auto; 
        padding: clamp(20px,4vw,40px)
        
    }
    
    h1,h2,h3{line-height:1.2; margin:0 0 .4em}
    
    h1{font-size: clamp(28px,5vw,56px)}
    h2{font-size: clamp(24px,4vw,40px)}
    h3{font-size: clamp(18px,2.2vw,22px)}
    
    a.button{
      display:inline-flex; 
      align-items:center; 
      justify-content:center; 
      gap:10px;
      padding:.9rem 1.2rem; 
      text-decoration:none; 
      font-weight:400;
    }
    
    .btn-dark{
    background:#0f1114; 
    color:#fff;
    }
    
    .btn-dark:hover{
        background:#1a1d24;
        
    }
    
    .btn-ghost{background:#F0EDED; color:#0f1114;}
    .btn-ghost:hover{background:#f7f7f8}
    
    .pill{display:inline-flex; gap:8px; align-items:center; padding:.45rem .75rem; font-size:.85rem;
      background:rgba(255,151,45,.14); color:#7a3e00; border:1px solid rgba(255,151,45,.35)}
      
    .pill.on-dark{background:#FFE8BA; color:#000;}
    
    .list{list-style:none; padding:0; margin:0;}
    
    .list li{display:flex; gap:10px; align-items:flex-start}
    .list li + li { margin-top: 8px; } /* ← расстояние между пунктами */
    
    
    .dot{width:8px; height:8px; border-radius:50%; background:#000; margin-top:10px}



    /* HERO — full-bleed image */
    .hero{
      position:relative; isolation:isolate; color:#000;
      min-height: clamp(520px, 70vh, 760px); display:grid; align-items:center; overflow:hidden;
    }
    .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      object-position: right center; z-index:-2}
    /* на мобилке чуть смещаем центр, чтобы сохранить фокус */
    @media (max-width: 768px){
      .hero-bg{object-position: center 40%}
    }
    .hero-overlay{position:absolute; inset:0; z-index:-1;}
    .hero p{color:#e6e9ef}

    /* INSIDE */
    .inside{background:var(--paper); padding-top: 64px;
  padding-bottom: 64px;}
  
    .cards{display:grid; gap:16px; grid-template-columns:1fr 1fr}
    .card{display:flex; gap:16px; align-items:flex-start; background:#fff; padding:24px;}
  
  .card h3{
  line-height: 1.2;      /* плотнее заголовок */
  margin: 0 0 2px;       /* почти без отступа снизу */
}  
    .card p{
  line-height: 1.35;     /* уменьшить межстрочный в абзаце */
  margin: 2px 0 0;       /* убрать большой отступ сверху */
  color: #4A4A4A;
}
    
    .ico{display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background: var(--orange); color:#fff; flex:0 0 48px}
    
    
    .quote{background:#fff; padding:22px;}
      
/* убираем «цитатные» отступы браузера */
figure.quote blockquote{
  margin: 0;            /* было margin-inline-start/end */
  padding: 22px;        /* внутренний отступ переносим сюда */
}

/* сам контейнер-рамка на всю ширину контентной области */
figure.quote{
  margin: 22px 0 0;     /* сверху как в инлайне, по бокам — 0 */
  padding: 0;           /* убираем паддинг, чтобы не сужал контент */
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}



    /* CTA (white, buttons left, photo right) */
    .cta{background:#fff; color:#000; padding-top: 64px;padding-bottom: 64px;}
    .cta-grid{display:grid; gap:28px; grid-template-columns:1.2fr .8fr; align-items:center}
   
    .cta-photo{
      aspect-ratio:3/3; width:100%; background:#f3f4f6 url('/image/color-image.jpg') center/cover no-repeat;
      display:grid; place-items:center; color:#6b7280; font-size:14px
    }

    /* FOOTER */
    footer{background:#fff; border-top:1px solid rgba(13,13,16,.08); color:#4b525f}
    .foot{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px}

    /* Icons (inline SVG wrapper) */
    .icon{width:22px; height:22px; display:block}

    /* Responsive */
    @media (max-width: 980px){
      .cards{grid-template-columns:1fr}
      .cta-grid{grid-template-columns:1fr}
    }
    
    
    .icon { width:24px; height:24px; }