:root { --ink:#1c2430; --muted:#5c6b7a; --bg:#f4f7fb; --card:#fff; --line:#e3eaf2; --accent:#1f7a8c; --accent2:#f2b544; --deep:#14323c; }
* { box-sizing: border-box; }
body { margin:0; font: 17px/1.55 "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
img { max-width: 100%; display:block; }
.wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
header { background: var(--deep); color:#fff; }
header a { color:#fff; text-decoration:none; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand { font-weight:700; }
nav { display:flex; gap:18px; flex-wrap:wrap; font-size:15px; }
nav a[aria-current="page"] { color: var(--accent2); }
.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center; padding: 36px 0 28px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height:1.1; margin:0 0 12px; }
.lead { font-size: 19px; color: var(--muted); margin:0 0 18px; }
.btn { display:inline-block; background: var(--accent); color:#fff !important; text-decoration:none; padding:12px 18px; border-radius:999px; font-weight:700; }
.btn.alt { background:#fff; color: var(--deep) !important; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.phone { justify-self:center; width:min(260px, 70vw); background:#101820; border-radius:28px; padding:10px; box-shadow: 0 18px 40px rgba(20,50,60,.18); }
.phone img { border-radius:20px; }
h2 { font-size: 28px; margin: 8px 0 14px; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.card { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.card h3 { margin:0 0 6px; font-size:18px; }
.card p { margin:0; color: var(--muted); font-size:15px; }
.shots { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; }
.shots figure { margin:0; }
.shots figcaption { font-size:12px; color: var(--muted); margin-top:6px; }
.shots img { border-radius:12px; border:1px solid var(--line); background:#fff; }
footer { border-top:1px solid var(--line); padding:22px 0 40px; color: var(--muted); font-size:14px; }
.page { padding: 28px 0 10px; }
.page h1 { margin-top:0; }
@media (max-width: 800px) {
  .hero, .grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: repeat(2, 1fr); }
}