/* ====== Design System ====== */
:root{
  --bg:#f7f7f5;
  --bg-alt:#f2f2ef;
  --text:#111111;
  --muted:#666666;
  --line:rgba(17,17,17,0.08);
  --accent:#c9a227; /* тонкое золото */
  --accent-2:#b08d23;
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f0f10;
    --bg-alt:#121214;
    --text:#f2f2f2;
    --muted:#9a9a9a;
    --line:rgba(255,255,255,0.08);
    --accent:#d0b16b;
    --accent-2:#a88b3f;
    --shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{width:min(1200px, 92vw); margin-inline:auto}

.section{padding: min(8vh, 120px) 0; position:relative}
.section--alt{background:var(--bg-alt)}
.section--cta{background:
  radial-gradient(1200px 400px at 10% -10%, rgba(201,162,39,0.08), transparent),
  radial-gradient(1000px 600px at 90% 120%, rgba(201,162,39,0.06), transparent);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

h1{font-size: clamp(36px, 6vw, 72px); line-height:1.05; letter-spacing:-0.02em; margin:12px 0 18px}
h2{font-size: clamp(28px, 4.5vw, 44px); line-height:1.1; letter-spacing:-0.01em; margin:0 0 18px}
h3{font-size: clamp(20px, 2.8vw, 24px); margin:0 0 8px}

.lead{font-size: clamp(18px, 2.5vw, 22px); color:var(--muted); max-width:60ch}

.muted{color:var(--muted)}
.center{text-align:center}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background: color-mix(in oklab, var(--bg), transparent 10%);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:0.08em;
}
.brand__dot{width:10px; height:10px; border-radius:99px; background:linear-gradient(180deg, var(--accent), var(--accent-2)); display:inline-block; box-shadow:0 0 0 4px color-mix(in oklab, var(--accent), transparent 75%)}
.menu{display:none; gap:22px}
.menu a{color:var(--muted); text-decoration:none; font-weight:600}
.menu a:hover{color:var(--text)}
@media (min-width:960px){ .menu{display:flex} }

.btn{
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid var(--line);
  background:var(--btn-bg); color:var(--btn-fg);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.btn--primary{
  --btn-bg: linear-gradient(180deg, var(--accent), var(--accent-2));
  --btn-fg: #111;
  border: none;
}
.btn--ghost{
  --btn-bg: transparent; --btn-fg: var(--text);
  border:1px solid var(--line); box-shadow:none;
}
.btn--lg{padding:18px 28px; font-size:18px}

.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:14px; color:var(--muted)}

.hero__grid{display:grid; gap:40px; grid-template-columns:1fr; align-items:center}
@media (min-width:1000px){ .hero__grid{grid-template-columns:1.2fr 1fr} }
.hero__cta{display:flex; gap:12px; margin:22px 0 8px; flex-wrap:wrap}
.facts{display:flex; gap:10px; align-items:center; color:var(--muted); margin:6px 0 24px}
.sep{opacity:.4}

.hero__bar{border:1px solid var(--line); border-radius:16px; padding:14px; background: color-mix(in oklab, var(--bg), white 2%); box-shadow: var(--shadow)}
.hero__bar-top{display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700}
.progress{width:100%; height:8px; background: color-mix(in oklab, var(--text), transparent 92%); border-radius:999px; overflow:hidden; margin:10px 0}
.progress__fill{height:100%; width:var(--progress); background: linear-gradient(90deg, var(--accent), var(--accent-2));}

.hero__bar-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px}
.hero__visual{display:grid; place-items:center}
.photo-card{margin:0; display:grid; gap:10px}
.photo-card figcaption{font-size:12px; color:var(--muted)}

.photo-card img, .photo, .gallery img{
  width:100%; height:auto; border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg), black 2%), color-mix(in oklab, var(--bg), black 6%));
}

.grid-2{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}
@media (min-width:960px){ .grid-2{grid-template-columns:1fr 1fr} }

.list{padding-left:18px; margin:12px 0 0}
.list li{margin:6px 0}

.photo-stack{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.photo-frame{transform:rotate(-1deg)}
.photo-frame.tilt{transform:rotate(2deg) translateY(8px)}

.timeline{position:relative; padding-left:16px; border-left:1px solid var(--line); display:grid; gap:22px; margin-top:22px}
.module{padding-left:10px}
.module h3{margin:0 0 4px}
.module--accent{border-left:3px solid var(--accent); margin-left:-14px; padding-left:14px}

.checks{list-style:none; padding:0; margin:0}
.checks li{margin:12px 0; padding-left:28px; position:relative}
.checks li:before{
  content:""; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 24 24%22 fill=%22%23000%22><path d=%22M9 16.2l-3.5-3.5L4 14.2l5 5 12-12-1.5-1.5z%22/></svg>') center/14px no-repeat;
}

.note{border:1px dashed var(--line); padding:18px; border-radius:14px; color:var(--muted)}

.pricing{display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px}
@media (min-width:960px){ .pricing{grid-template-columns:repeat(3, 1fr)} }
.card{
  border:1px solid var(--line); border-radius:16px; padding:18px; background: color-mix(in oklab, var(--bg), white 2%);
  box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.card--pro{outline:2px solid color-mix(in oklab, var(--accent), transparent 60%); background:
  radial-gradient(600px 120px at 20% 0%, color-mix(in oklab, var(--accent), transparent 92%), transparent),
  color-mix(in oklab, var(--bg), white 2%);
}
.card .badge{
  position:absolute; top:14px; right:-10px; transform:rotate(6deg);
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#111; font-weight:800;
  padding:6px 12px; border-radius:10px; box-shadow: var(--shadow);
}

.reviews{display:grid; gap:12px; grid-template-columns:1fr; margin-top:6px}
.reviews blockquote{margin:0; padding:20px; border-left:3px solid var(--line); background: color-mix(in oklab, var(--bg), white 2%); border-radius:12px}

.gallery{display:grid; gap:12px; grid-template-columns:1fr; margin-top:12px}
@media (min-width:780px){ .gallery{grid-template-columns:1fr 1fr 1fr} }

.faq details{border:1px solid var(--line); border-radius:14px; padding:14px 18px; background: color-mix(in oklab, var(--bg), white 2%); margin:10px 0}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:10px 0 0}

.footer{border-top:1px solid var(--line); padding:26px 0; background: color-mix(in oklab, var(--bg), white 1%)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(12px); will-change: transform, opacity; transition: opacity .6s ease, transform .6s ease}
.reveal--visible{opacity:1; transform:none}

/* Minor utility */
code{background: color-mix(in oklab, var(--bg), black 6%); padding:2px 6px; border-radius:6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em}