:root{
    --stone:#D5D0C8; --stone-2:#C4BEB4; --stone-3:#EDE9E2;
    --butter:#F2D785; --butter-deep:#E0B84C; --butter-light:#FCF2CC;
    --ink:#26221D; --ink-2:#5A5248; --ink-3:#8B8377;
    --cream:#FAF6EC; --green:#018345; --green-dark:#016036;
    --shadow:0 2px 4px rgba(38,34,29,.06), 0 18px 40px -18px rgba(38,34,29,.30);
    --wrap:1100px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font:400 17px/1.62 "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
  h1,h2,h3{margin:0; letter-spacing:-.02em; text-wrap:balance}
  p{margin:0}
  a{color:inherit}

  .display{
    font-family:"Arial Black","Helvetica Neue",Helvetica,sans-serif;
    font-weight:900; font-stretch:condensed; text-transform:uppercase;
    letter-spacing:-.03em; line-height:.92;
  }
  .eyebrow{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-3); font-weight:700;
  }

  /* ---------------- Первый экран ---------------- */
  .hero{
    position:relative; overflow:hidden; padding:0 0 40px;
    background:
      linear-gradient(180deg, rgba(38,34,29,.46) 0%, rgba(38,34,29,.24) 30%,
                              rgba(38,34,29,.18) 58%, rgba(38,34,29,.50) 100%),
      var(--bg) center/cover no-repeat, var(--stone);
  }
  .hero__inner{
    max-width:var(--wrap); margin:0 auto; padding:26px 24px 0;
    position:relative; min-height:min(94vh,880px); display:flex; flex-direction:column;
  }
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; z-index:5}
  .topbar__brand{display:flex; align-items:baseline; gap:10px; font-weight:800; letter-spacing:.04em; color:#fff}
  .topbar__brand small{font-size:11px; letter-spacing:.16em; color:#fff; opacity:.85; font-weight:600}
  .topbar__links{display:flex; gap:22px; font-size:14px; color:#fff}
  .topbar__links a{text-decoration:none}
  .topbar__links a:hover{opacity:.75}

  .stage{position:relative; flex:1; display:grid; place-items:center; margin-top:6px;
    min-height:clamp(320px,48vh,520px)}
  .hero__type{position:relative; z-index:3; text-align:center; pointer-events:none; width:100%; margin-top:-2%}
  .hero__word{
    font-size:clamp(52px,13.5vw,168px); color:#fff;
    text-shadow:0 2px 10px rgba(38,34,29,.30), 0 20px 50px rgba(38,34,29,.45);
  }
  .hero__script{
    display:block; width:clamp(150px,26vw,320px); margin:-.06em auto 0;
    fill:var(--butter-light);
    filter:drop-shadow(0 6px 16px rgba(38,34,29,.45));
  }
  .hero__pct{
    position:relative; z-index:4; display:inline-flex; align-items:baseline; gap:8px;
    margin-top:14px; padding:9px 18px; border-radius:999px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
    font-weight:800; font-size:15px; letter-spacing:.02em;
  }
  .hero__pct b{font-size:19px}

  .hero__cta{
    position:relative; z-index:4; display:flex; gap:12px; flex-wrap:wrap;
    justify-content:center; margin-top:26px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    font-weight:700; font-size:15.5px; padding:15px 28px; border-radius:999px;
    background:var(--green); color:#fff; border:2px solid var(--green);
    transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-2px)}
  .btn:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
  .btn--ghost{background:rgba(255,255,255,.7); color:var(--ink); border-color:rgba(38,34,29,.18)}
  .btn--ghost:hover{background:#fff; border-color:var(--ink); transform:translateY(-2px)}

  /* ---------------- Общие секции ---------------- */
  section{padding:78px 0}
  .lead{font-size:clamp(21px,2.6vw,27px); line-height:1.4; max-width:22ch}
  .sec__head{display:grid; gap:14px; margin-bottom:38px; max-width:60ch}
  .sec__head h2{font-size:clamp(27px,4vw,40px)}

  .grid{display:grid; gap:18px}
  @media(min-width:700px){ .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} }

  .card{
    background:#fff; border:1px solid rgba(38,34,29,.09); border-radius:18px;
    padding:24px 24px 26px; box-shadow:0 1px 2px rgba(38,34,29,.04);
  }
  .card h3{font-size:19px; margin-bottom:8px}
  .card p{color:var(--ink-2); font-size:15.5px}
  .card__num{
    font-family:"Arial Black","Helvetica Neue",sans-serif; font-weight:900;
    font-size:40px; line-height:1; color:var(--butter-deep);
    font-variant-numeric:tabular-nums; margin-bottom:10px;
  }

  .facts{background:var(--stone-3)}
  .spec{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
  .spec th,.spec td{text-align:left; padding:15px 0; border-bottom:1px solid rgba(38,34,29,.12)}
  .spec th{font-size:14px; color:var(--ink-3); font-weight:600; width:46%}
  .spec td{font-weight:700}
  .spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

  .marks{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
  .mark{
    border:1.5px solid rgba(38,34,29,.2); border-radius:999px; padding:8px 16px;
    font-size:13.5px; font-weight:700; letter-spacing:.03em;
  }

  details{
    background:#fff; border:1px solid rgba(38,34,29,.09);
    border-radius:16px; padding:0; margin-bottom:12px; overflow:hidden;
  }
  summary{
    cursor:pointer; padding:20px 24px; font-weight:700; font-size:17px;
    list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; font-size:24px; color:var(--butter-deep); font-weight:400; line-height:1}
  details[open] summary::after{content:"–"}
  summary:focus-visible{outline:3px solid var(--green); outline-offset:-3px}
  details p{padding:0 24px 22px; color:var(--ink-2); font-size:16px; max-width:66ch}

  .contact{background:var(--ink); color:var(--cream)}
  .contact h2{color:#fff}
  .contact a.line{
    display:flex; align-items:center; gap:14px; padding:18px 0;
    border-bottom:1px solid rgba(250,246,236,.16); text-decoration:none; font-size:19px; font-weight:700;
  }
  .contact a.line span{font-size:13px; font-weight:600; color:#B0A99C; letter-spacing:.14em; text-transform:uppercase; min-width:110px}
  .contact a.line:hover{color:var(--butter)}
  .contact .btn--ghost{background:transparent; color:#fff; border-color:rgba(250,246,236,.35)}
  .contact .btn--ghost:hover{background:rgba(250,246,236,.1); border-color:#fff}

  footer{background:var(--ink); color:#8B8377; padding:30px 0 46px; font-size:13.5px}
  footer .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
  footer a{color:#B0A99C}

  /* --- переключатель языков: глобус поверх фотографии --- */
  .langs{position:relative; flex:0 0 auto; margin-left:auto}
  .langs__btn{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer; line-height:1;
    font:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; color:#fff;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45);
    border-radius:999px; padding:8px 13px 8px 11px; backdrop-filter:blur(6px);
  }
  .langs__btn:hover{background:rgba(255,255,255,.28)}
  .langs__btn:focus-visible{outline:3px solid #fff; outline-offset:2px}
  .langs.is-open .langs__btn{background:#fff; color:var(--ink); border-color:#fff}
  .globe{width:19px; height:19px; flex:0 0 auto}

  .langs__menu{
    position:absolute; right:0; top:calc(100% + 8px); z-index:60;
    margin:0; padding:6px; list-style:none; min-width:172px;
    background:#fff; border-radius:12px; box-shadow:0 16px 40px -12px rgba(38,34,29,.5);
  }
  .langs__menu li{margin:0}
  .langs__menu a{
    display:block; padding:11px 13px; border-radius:8px; text-decoration:none;
    color:var(--ink); font-size:15px; font-weight:600;
  }
  .langs__menu a:hover{background:#F3EFE6}
  .langs__menu a:focus-visible{outline:3px solid var(--green); outline-offset:-3px}
  .langs__menu a[aria-current=true]{color:var(--green); background:#EAF3ED}

  /* ================= Адаптив ================= */
  @media(max-width:1023px){
    section{padding:62px 0}
    .hero__inner{min-height:min(86vh,720px)}
  }
  @media(max-width:820px){
    .topbar{flex-wrap:wrap; gap:12px}
    .topbar__links{gap:16px; font-size:13px}
    .row-2{grid-template-columns:1fr!important; gap:34px!important}
  }
  @media(max-width:600px){
    body{font-size:16px}
    .wrap,.hero__inner{padding-left:18px; padding-right:18px}
    section{padding:46px 0}
    .hero__inner{min-height:min(84vh,620px); padding-top:18px}
    .stage{min-height:clamp(220px,38vh,340px)}
    .hero__word{font-size:clamp(40px,15vw,72px)}
    .hero__script{width:clamp(120px,32vw,190px)}
    .hero__cta{flex-direction:column; align-items:stretch}
    .hero__cta .btn{justify-content:center; width:100%}
    .hero__pct{font-size:13.5px; padding:8px 14px}
    .grid{gap:14px}
    .card{padding:20px}
    .sec__head{margin-bottom:26px}
    .contact a.line{flex-direction:column; gap:4px; align-items:flex-start; font-size:17px}
    .contact a.line span{min-width:0}
    summary{padding:17px 18px; font-size:16px}
    details p{padding:0 18px 18px}
    .spec th,.spec td{font-size:14.5px; padding:12px 0}
    .topbar__links{display:none}
  }
  @media(max-width:360px){
    .wrap,.hero__inner{padding-left:14px; padding-right:14px}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
  }