:root{

    --paper:#f3f1ec;

    --ink:#121212;

    --ink-soft:#3a3a3a;

    --accent:#f4a300;

    --line:#d8d4c9;

    --white:#ffffff;

  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{scroll-behavior:smooth;}

  body{

    background:var(--paper);

    color:var(--ink);

    font-family:'Arial Narrow', Arial, sans-serif;

    line-height:1.5;

  }

  .display{

    font-family:'Arial Black', Arial, sans-serif;

    font-weight:900;

    letter-spacing:-0.02em;

    text-transform:uppercase;

  }

  a{color:inherit;}

  img{max-width:100%;display:block;}

  .wrap{max-width:1100px;margin:0 auto;padding:0 24px;}



  /* Top strip */

  .topbar{

    background:var(--ink);

    color:var(--paper);

    font-size:13px;

    letter-spacing:0.04em;

    padding:8px 0;

    text-transform:uppercase;

  }

  .topbar .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}



  /* Hero */

  header.hero{

    border-bottom:6px solid var(--ink);

    padding:64px 0 48px;

    position:relative;

    overflow:hidden;

  }

  header.hero::before{

    content:"";

    position:absolute;

    top:-40px;right:-60px;

    width:340px;height:340px;

    border-radius:50%;

    background:var(--accent);

    opacity:0.18;

  }

  .eyebrow{

    display:inline-block;

    font-size:13px;

    letter-spacing:0.12em;

    text-transform:uppercase;

    color:var(--white);

    background:var(--ink);

    padding:6px 12px;

    margin-bottom:22px;

  }

  h1.display{

    font-size:clamp(40px, 7vw, 86px);

    line-height:0.95;

    margin-bottom:18px;

  }

  h1.display span{color:var(--accent);-webkit-text-stroke:1px var(--ink);}

  .hero-sub{

    font-size:clamp(16px,2vw,20px);

    max-width:1100px;

    color:var(--ink-soft);

    margin-bottom:32px;

  }



  /* Phone block */

  .phone-block{

    display:inline-flex;

    align-items:center;

    gap:18px;

    background:var(--ink);

    color:var(--white);

    padding:22px 30px;

    text-decoration:none;

    border:3px solid var(--ink);

    transition:transform .15s ease, background .15s ease;

  }

  .phone-block:hover{background:var(--accent);color:var(--ink);transform:translateY(-2px);}

  .phone-block .ico{

    font-size:30px;

    line-height:1;

  }

  .phone-block .num{

    font-family:'Arial Black',Arial,sans-serif;

    font-weight:900;

    font-size:clamp(26px,4vw,40px);

    letter-spacing:0.01em;

  }

  .phone-block .label{

    display:block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:0.08em;

    opacity:0.75;

    margin-top:2px;

  }



  /* Section heading */

  .section-head{

    display:flex;

    align-items:baseline;

    gap:16px;

    margin-bottom:32px;

    border-bottom:3px solid var(--ink);

    padding-bottom:14px;

  }

  .section-head .num{

    font-family:'Arial Black',Arial,sans-serif;

    font-size:16px;

    color:var(--accent);

    background:var(--ink);

    padding:4px 10px;

  }

  .section-head h2{

    font-family:'Arial Black',Arial,sans-serif;

    text-transform:uppercase;

    font-size:clamp(24px,3.4vw,38px);

  }



  section{padding:56px 0;}



  /* Specs */

  .specs-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:1px;

    background:var(--line);

    border:1px solid var(--line);

  }

  .spec{

    background:var(--paper);

    padding:22px 20px;

  }

  .spec .k{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:0.07em;

    color:var(--ink-soft);

    margin-bottom:6px;

  }

  .spec .v{

    font-family:'Arial Black',Arial,sans-serif;

    font-size:20px;

  }





 /* About Sale */

.about-sale {

      max-width: 1100px; /* Обмежуємо ширину секції для зручного читання */

      margin: 0 auto;

      padding: 20px;

    }

    

    /* 1. Центрування H2 по центру сторінки */

    .about-sale h2 {

      text-align: center;

      color: #121212;

font-family:'Arial Black',Arial,sans-serif;

    font-size:20px;



      margin-bottom: 25px;

    }



    /* 2. Абзаци центруються по ширині, розмір шрифту як у .hero-sub */

    .about-sale p {

      text-align: justify; /* Вирівнювання по ширині */

      font-size: clamp(16px, 2vw, 20px);     /* Розмір шрифту (зазвичай базовий для .hero-sub) */

      line-height: 1.6;

      color: #333333;

      margin-bottom: 15px;

    }



  /* Gallery */

  .gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

  }

  .gallery figure{

    position:relative;

    aspect-ratio:4/3;

    overflow:hidden;

    background:#e3e0d6;

    border:1px solid var(--line);

    flex:0 1 calc(33.333% - 10px);

    min-width:240px;

  }

  .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}

  .gallery figure:hover img{transform:scale(1.06);}

  .gallery figcaption{

    position:absolute;left:0;bottom:0;right:0;

    background:linear-gradient(transparent,rgba(0,0,0,0.65));

    color:var(--white);

    font-size:13px;

    padding:18px 12px 10px;

  }

  @media(max-width:720px){

    .gallery figure{flex-basis:calc(50% - 10px);}

  }

  @media(max-width:460px){

    .gallery figure{flex-basis:100%;}

  }





  /* Why us */

  .why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:24px;

  }

  .why-card{

    border-left:4px solid var(--accent);

    padding:6px 0 6px 18px;

  }

  .why-card h3{

    font-family:'Arial Black',Arial,sans-serif;

    text-transform:uppercase;

    font-size:17px;

    margin-bottom:6px;

  }

  .why-card p{color:var(--ink-soft);font-size:clamp(16px, 2vw, 20px);}



  /* CTA band */

  .cta-band{

    background:var(--ink);

    color:var(--white);

    text-align:center;

  }

  .cta-band h2{

    font-family:'Arial Black',Arial,sans-serif;

    text-transform:uppercase;

    font-size:clamp(26px,4vw,44px);

    margin-bottom:14px;

  }

  .cta-band p{color:#c9c9c9;margin-bottom:28px;font-size:clamp(16px, 2vw, 20px)}

  .cta-band .phone-block{background:var(--accent);color:var(--ink);border-color:var(--accent);}

  .cta-band .phone-block:hover{background:var(--white);}



  /* FAQ */

  details{

    border-bottom:1px solid var(--line);

    padding:16px 0;

  }

  summary{

    cursor:pointer;

    font-family:'Arial Black',Arial,sans-serif;

    font-size:17px;

    list-style:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

  }

  summary::-webkit-details-marker{display:none;}

  summary::after{content:"+";font-size:22px;color:var(--accent);}

  details[open] summary::after{content:"–";}

  details p{margin-top:10px;color:var(--ink-soft);font-size:clamp(16px, 2vw, 20px);}



  footer{

    background:var(--ink);

    color:#9b9b9b;

    font-size:13px;

    padding:30px 0 90px;

    text-align:center;

  }

  footer a{color:var(--accent);text-decoration:none;}



  .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ink);padding:10px;z-index:999;}

  .skip-link:focus{left:10px;top:10px;}



  @media (prefers-reduced-motion: reduce){

    *{transition:none !important;}

  }



  /* Sticky phone bar */

  .sticky-phone{

    position:fixed;

    left:0;right:0;bottom:0;

    z-index:500;

    background:var(--ink);

    border-top:3px solid var(--accent);

    transform:translateY(100%);

    transition:transform .3s ease;

  }

  .sticky-phone.show{transform:translateY(0);}

  .sticky-phone .wrap{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:12px 24px;

  }

  .sticky-phone .txt{

    color:var(--paper);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:0.05em;

    display:none;

  }

  .sticky-phone a.call{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--accent);

    color:var(--ink);

    text-decoration:none;

    font-family:'Arial Black',Arial,sans-serif;

    font-weight:900;

    font-size:18px;

    padding:12px 22px;

    flex:1;

    justify-content:center;

    transition:background .15s ease;

  }

  .sticky-phone a.call:hover{background:var(--white);}

  @media(min-width:640px){

    .sticky-phone .txt{display:block;}

    .sticky-phone a.call{flex:none;justify-content:flex-start;}

  }

.main-nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 2px solid var(--ink, #111);
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-nav a {
  color: var(--ink, #111);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.main-nav a:hover {
  background: #f0f0f0;
}

/* Мобільна адаптація */
@media (max-width: 600px) {
  .main-nav {
    gap: 12px;
    padding: 10px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav a {
    font-size: 14px;
    white-space: nowrap;
  }
}