:root {
  --ink: #1d1a24;
  --indigo: #2a2750;
  --clay: #c45c3a;
  --linen: #f4efe6;
  --sand: #e8dfd2;
  --muted: #6d6674;
  --line: #ddd4c8;
  --serif: "Bodoni Moda", Georgia, serif;
  --sans: "Karla", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--linen);
  color: var(--ink);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }

.weave {
  pointer-events: none; position: fixed; inset: 0; z-index: 0; opacity: 0.07;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 13px, #2a2750 14px),
    repeating-linear-gradient(0deg, transparent, transparent 13px, #c45c3a 14px);
}
header, section, footer { position: relative; z-index: 1; }

.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar__in { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.16em; font-size: 0.95rem; }
.logo__thread { width: 22px; height: 22px; border: 2px solid var(--clay); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--indigo); }
.nav { display: flex; gap: 18px; font-size: 0.92rem; }
.nav a:hover { color: var(--clay); }
.bar__tools { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; border: 1px solid var(--line); }
.lang__btn { background: transparent; border: 0; padding: 6px 11px; cursor: pointer; font: inherit; color: var(--muted); }
.lang__btn.is-active { background: var(--indigo); color: #fff; }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.burger span, .burger span:before, .burger span:after {
  display: block; width: 16px; height: 2px; background: var(--ink); margin: auto; position: relative;
}
.burger span:before, .burger span:after { content: ""; position: absolute; left: 0; }
.burger span:before { top: -5px; }
.burger span:after { top: 5px; }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; background: var(--clay); color: #fff; border: 1px solid var(--clay);
  font-weight: 700; letter-spacing: 0.03em; cursor: pointer;
}
.cta--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

.hero { padding: 56px 0 20px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.kicker { color: var(--clay); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; margin-bottom: 12px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; font-weight: 500; }
h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); margin-bottom: 16px; }
h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); margin-bottom: 14px; }
h3 { font-size: 1.35rem; margin: 12px 0 8px; }
.lead { color: var(--muted); font-size: 1.06rem; max-width: 54ch; }
.hero__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero__pic { position: relative; }
.hero__pic img { height: 440px; width: 100%; object-fit: cover; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.hero__pic figcaption { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.meters div { background: #fff; border: 1px solid var(--line); padding: 16px; }
.meters strong { display: block; font-family: var(--serif); font-size: 1.7rem; color: var(--indigo); }

.block { padding: 86px 0; }
.block--indigo { background: var(--indigo); color: var(--linen); }
.block--indigo .kicker { color: #e7a08a; }
.block--indigo h2 { color: #fff; }
.block--indigo .intro { color: #c9c4d8; }
.block--sand { background: var(--sand); }
.two { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 42px; }
.intro { max-width: 68ch; color: var(--muted); margin-bottom: 28px; }
.two p + p { margin-top: 14px; }

.card { background: var(--indigo); color: var(--linen); padding: 26px; }
.card ul { margin-top: 14px; display: grid; gap: 10px; padding-left: 18px; color: #d5d0e4; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pair article { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.block:not(.block--indigo) .pair article { background: #fff; border-color: var(--line); }
.pair img { height: 220px; width: 100%; object-fit: cover; }
.pair h3, .pair p { padding: 0 18px; }
.pair p { color: var(--muted); padding-bottom: 18px; }
.block--indigo .pair p { color: #c9c4d8; }

.frame img { height: 400px; width: 100%; object-fit: cover; clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%); }
.frame figcaption { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.steps li { background: #fff; border-left: 4px solid var(--clay); padding: 18px; counter-increment: step; }
.steps li::before { content: counter(step); font-family: var(--serif); color: var(--indigo); font-size: 1.4rem; }
.steps p { color: var(--muted); }

.faq { display: grid; gap: 10px; max-width: 820px; }
details { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 14px 18px; }
summary { cursor: pointer; font-weight: 600; }
details p { margin-top: 8px; color: #c9c4d8; }

.contacts { list-style: none; display: grid; gap: 16px; margin-top: 22px; }
.contacts span { display: block; color: var(--clay); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.contacts a, .contacts p { font-size: 1.12rem; }
.form { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); padding: 24px; }
.form label { display: grid; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.form input, .form textarea { border: 1px solid var(--line); padding: 11px; font: inherit; background: var(--linen); }
.form__ok { color: var(--clay); }

.foot { background: var(--ink); color: #c9c4d8; padding: 40px 0 18px; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.foot a, .foot p { display: block; margin-top: 8px; }
.foot .logo { color: #fff; }
.copy { text-align: center; margin-top: 22px; border-top: 1px solid #3a3544; padding-top: 14px; font-size: 0.86rem; }

@media (max-width: 960px) {
  .hero__grid, .two, .pair, .steps, .meters, .foot__grid { grid-template-columns: 1fr; }
  .nav {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    background: var(--linen); flex-direction: column; padding: 16px 20px; border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .burger { display: grid; place-items: center; }
  .bar .cta { display: none; }
  .hero__pic img { height: 280px; clip-path: none; }
  .frame img { height: 240px; clip-path: none; }
}