:root { --ink:#171713; --paper:#f2eee4; --white:#fffdf8; --red:#d8402f; --line:#cbc5b7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 max(28px, calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); background:rgba(242,238,228,.94); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-size:23px; font-weight:800; transform:rotate(-5deg); }
.brand strong,.brand small { display:block; }
.brand strong { font-size:17px; }
.brand small { font-size:12px; color:#69675f; margin-top:2px; }
.header-phone { font-size:18px; font-weight:800; border-bottom:2px solid var(--red); padding-bottom:3px; }

.hero { max-width:1180px; margin:0 auto; padding:56px 28px 70px; display:grid; grid-template-columns:1.08fr .92fr; gap:58px; align-items:center; min-height:690px; }
.eyebrow,.section-number { margin:0 0 22px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.eyebrow { display:flex; align-items:center; gap:9px; }
.eyebrow span { display:inline-block; width:30px; height:4px; background:var(--red); }
h1 { font-size:clamp(50px,6vw,82px); letter-spacing:-.055em; line-height:.92; margin:0; max-width:720px; }
h1 em { display:block; color:var(--red); font-style:normal; font-family:Georgia,serif; font-weight:400; font-size:.94em; transform:rotate(-1deg); margin-top:12px; }
.lead { max-width:630px; font-size:21px; line-height:1.45; margin:34px 0 30px; color:#45433e; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:58px; padding:0 24px; display:inline-flex; justify-content:center; align-items:center; gap:11px; font-weight:800; border:2px solid var(--ink); transition:transform .18s, box-shadow .18s; }
.button:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.phone-symbol { font-size:24px; line-height:1; }
.button-primary { background:var(--red); color:white; }
.button-telegram { background:#229ed9; color:white; }
.button-telegram span { font-size:21px; }
.button-secondary { background:transparent; }
.button-secondary span { color:var(--red); font-size:22px; }
.quick-facts { list-style:none; padding:0; margin:42px 0 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.quick-facts li { padding:22px 18px 0 0; }
.quick-facts li+li { padding-left:18px; border-left:1px solid var(--line); }
.quick-facts strong,.quick-facts span { display:block; }
.quick-facts strong { font-size:18px; }
.quick-facts span { font-size:12px; line-height:1.35; margin-top:5px; color:#68665f; }
.hero-photo { position:relative; height:590px; background:var(--ink); transform:rotate(1.5deg); border:2px solid var(--ink); box-shadow:12px 12px 0 var(--red); overflow:hidden; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.photo-stamp { position:absolute; left:18px; bottom:18px; padding:10px 13px; background:var(--white); border:1px solid var(--ink); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; transform:rotate(-2deg); }

.trust-strip { background:var(--red); color:white; padding:19px 24px; display:flex; justify-content:center; gap:25px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.trust-strip i { font-style:normal; color:var(--ink); }
.section { max-width:1180px; margin:0 auto; padding:110px 28px; }
.section-heading { max-width:740px; margin-bottom:50px; }
.section-number { color:var(--red); }
.section h2,.final-cta h2 { margin:0; font-size:clamp(42px,5vw,68px); line-height:.98; letter-spacing:-.045em; }
.section-heading>p:last-child { font-size:18px; line-height:1.55; color:#55524b; max-width:620px; margin:24px 0 0; }
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.problem-card { min-height:245px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,253,248,.36); }
.problem-card>span { font-family:Georgia,serif; font-style:italic; color:var(--red); font-size:16px; }
.problem-card h3 { margin:45px 0 12px; font-size:23px; letter-spacing:-.025em; }
.problem-card p { margin:0; color:#615e57; line-height:1.5; font-size:15px; }

.price-section { max-width:none; background:var(--ink); color:var(--white); display:grid; grid-template-columns:minmax(280px,460px) minmax(420px,650px); justify-content:center; gap:90px; }
.section-heading.light .section-number { color:#f06553; }
.section-heading.light>p:last-child { color:#bdb9ae; }
.price-list { border-top:1px solid #55534d; }
.price-row { display:flex; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid #55534d; }
.price-row strong,.price-row small { display:block; }
.price-row strong { font-size:18px; }
.price-row small { color:#9b988f; margin-top:6px; font-size:12px; }
.price-row b { color:#ff705e; font-size:20px; white-space:nowrap; }
.parts-note { border:1px solid #68655e; padding:16px; font-size:13px; color:#bbb7ad; line-height:1.45; margin:22px 0 0; }

.real-work { overflow:hidden; }
.photo-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.photo-grid figure { margin:0; position:relative; overflow:hidden; background:#ddd6c8; border:1px solid var(--ink); }
.photo-grid figure:nth-child(1) { grid-column:span 5; height:520px; }
.photo-grid figure:nth-child(2) { grid-column:span 3; height:520px; }
.photo-grid figure:nth-child(3) { grid-column:span 4; height:520px; }
.photo-grid figure:nth-child(4) { grid-column:3 / span 8; height:390px; }
.photo-grid img { width:100%; height:100%; object-fit:cover; }
.photo-grid figcaption { position:absolute; left:12px; bottom:12px; background:var(--white); border:1px solid var(--ink); padding:8px 11px; font-size:12px; font-weight:800; }

.steps-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; border-top:1px solid var(--line); }
.steps { list-style:none; padding:0; margin:0; }
.steps li { display:grid; grid-template-columns:54px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line); }
.steps li:last-child { border-bottom:1px solid var(--line); }
.steps li>span { width:40px; height:40px; display:grid; place-items:center; background:var(--red); color:white; border-radius:50%; font-family:Georgia,serif; font-style:italic; }
.steps h3 { margin:0 0 7px; font-size:20px; }
.steps p { margin:0; color:#65625b; line-height:1.45; }

.final-cta { background:var(--red); color:white; padding:100px max(28px,calc((100vw - 1124px)/2)); }
.final-cta .eyebrow span { background:var(--ink); }
.final-cta h2 { max-width:850px; }
.final-cta>p:nth-of-type(2) { font-size:19px; max-width:650px; line-height:1.5; }
.contact-card { margin-top:45px; border-top:2px solid white; border-bottom:2px solid white; display:grid; grid-template-columns:repeat(3,1fr); }
.contact-card>a { padding:27px 20px 27px 0; }
.contact-card>a+a { border-left:2px solid white; padding-left:28px; }
.contact-card small,.contact-card strong { display:block; }
.contact-card small { font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.contact-card strong { font-size:clamp(18px,2.5vw,30px); }
.fineprint { font-size:12px!important; opacity:.8; margin-top:20px; }
footer { min-height:90px; padding:0 max(28px,calc((100vw - 1124px)/2)); display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; }
.mobile-callbar { display:none; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:42px; gap:42px; }
  .hero-photo { height:min(78vw,560px); }
  .price-section,.steps-section { grid-template-columns:1fr; gap:20px; }
  .problem-grid { grid-template-columns:repeat(2,1fr); }
  .photo-grid figure:nth-child(n) { grid-column:span 6; height:420px; }
}

@media (max-width:620px) {
  body { padding-bottom:82px; }
  .topbar { height:68px; padding:0 18px; }
  .brand-mark { width:36px; height:36px; font-size:19px; }
  .brand small { display:none; }
  .header-phone { font-size:14px; }
  .hero { min-height:auto; padding:36px 18px 48px; gap:36px; }
  h1 { font-size:46px; }
  .lead { font-size:18px; margin:26px 0; }
  .button { width:100%; }
  .quick-facts { gap:0; }
  .quick-facts li { padding-right:9px; }
  .quick-facts li+li { padding-left:9px; }
  .quick-facts strong { font-size:15px; }
  .quick-facts span { font-size:10px; }
  .hero-photo { height:112vw; max-height:520px; box-shadow:7px 7px 0 var(--red); }
  .trust-strip { justify-content:flex-start; overflow:hidden; white-space:nowrap; font-size:11px; gap:13px; }
  .section { padding:76px 18px; }
  .section-heading { margin-bottom:34px; }
  .section h2,.final-cta h2 { font-size:42px; }
  .problem-grid { grid-template-columns:1fr; }
  .problem-card { min-height:190px; }
  .problem-card h3 { margin-top:30px; }
  .price-section { padding-left:18px; padding-right:18px; }
  .price-row { align-items:flex-start; }
  .price-row strong { font-size:16px; }
  .price-row b { font-size:17px; }
  .photo-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .photo-grid figure:nth-child(n) { grid-column:span 1; height:260px; }
  .photo-grid figure:nth-child(1) { grid-column:span 2; height:380px; }
  .steps-section { gap:0; }
  .steps li { grid-template-columns:45px 1fr; gap:12px; }
  .final-cta { padding:76px 18px; }
  .contact-card { grid-template-columns:1fr; }
  .contact-card>a+a { border-left:0; border-top:2px solid white; padding-left:0; }
  footer { display:none; }
  .mobile-callbar { display:block; position:fixed; z-index:50; left:0; right:0; bottom:0; background:var(--ink); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .mobile-callbar a { display:flex; align-items:center; justify-content:center; gap:12px; background:var(--red); color:white; min-height:58px; }
  .mobile-callbar .phone-symbol { font-size:25px; }
  .mobile-callbar span,.mobile-callbar small { display:block; }
  .mobile-callbar span { font-weight:800; font-size:15px; }
  .mobile-callbar small { font-size:10px; font-weight:600; opacity:.8; margin-bottom:2px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }