:root{
  --bg:#f7f9fc;
  --white:#fff;
  --ink:#0d1321;
  --muted:#657082;
  --line:#e6ebf2;
  --blue:#0077ff;
  --blue2:#69b7ff;
  --warm:#ffb86b;
  --shadow:0 24px 80px rgba(22,35,58,.12);
  --radius:28px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,'Helvetica Neue',system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fbfdff 0%,var(--bg) 46%,#eef5ff 100%);}
a{text-decoration:none;color:inherit} img{max-width:100%}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(18px,4vw,64px);background:rgba(255,255,255,.82);backdrop-filter:blur(20px);border-bottom:1px solid rgba(230,235,242,.75)}
.brand{font-weight:900;font-size:21px;letter-spacing:-.04em}.brand span{color:var(--blue)}
nav{display:flex;gap:24px;font-size:14px;font-weight:700;color:var(--muted)}nav a:hover{color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:10px}.vk-icon{width:42px;height:42px;display:grid;place-items:center}.vk-icon img{width:34px;height:34px}.phone-pill{padding:12px 16px;border-radius:999px;background:#101828;color:white;font-weight:800;font-size:14px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.82fr);gap:clamp(34px,6vw,82px);align-items:center;min-height:calc(100vh - 78px);padding:clamp(44px,7vw,94px) clamp(18px,4vw,64px)}
.status{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line);background:rgba(255,255,255,.78);border-radius:999px;color:var(--muted);font-size:13px;font-weight:800;margin-bottom:24px}.status span{width:9px;height:9px;background:#20c997;border-radius:50%;box-shadow:0 0 0 5px rgba(32,201,151,.13)}
h1{font-size:clamp(48px,7.8vw,104px);line-height:.9;letter-spacing:-.08em;margin:0 0 26px;max-width:980px}h2{font-size:clamp(32px,5vw,66px);line-height:.96;letter-spacing:-.065em;margin:0}h3{margin:0 0 10px;font-size:24px;letter-spacing:-.04em}p{margin-top:0}.lead{max-width:720px;color:var(--muted);font-size:clamp(18px,2vw,24px);line-height:1.48;margin-bottom:32px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border-radius:18px;font-weight:900;transition:.2s ease}.btn:hover{transform:translateY(-2px)}.btn-dark{background:#101828;color:white;box-shadow:0 14px 34px rgba(16,24,40,.18)}.btn-vk{background:white;border:1px solid var(--line);color:#101828}.btn-vk img{width:30px;height:30px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:760px}.metrics div{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:22px;padding:16px}.metrics strong{display:block;color:var(--blue);font-size:24px;margin-bottom:5px}.metrics span{color:var(--muted);font-weight:700;font-size:13px;line-height:1.3}
.hero-visual{position:relative;min-height:620px;display:grid;place-items:center}.blob{position:absolute;inset:34px 0 0 40px;background:radial-gradient(circle at 30% 20%,#dff0ff 0,#9bd2ff 36%,#eef6ff 72%);border-radius:44% 56% 48% 52%;filter:blur(.2px);box-shadow:var(--shadow)}.hero-photo{position:relative;z-index:2;width:min(100%,430px);height:610px;object-fit:cover;object-position:center 28%;background:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);border-radius:42px;box-shadow:var(--shadow);border:10px solid white}.floating-card{position:absolute;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 18px 50px rgba(22,35,58,.14);border-radius:18px;padding:14px 16px;font-weight:900}.top-card{right:8px;top:72px;z-index:3}.bottom-card{left:8px;bottom:72px;z-index:3}
.strip{display:flex;gap:10px;overflow:hidden;padding:0 clamp(18px,4vw,64px) 58px}.strip span{white-space:nowrap;background:white;border:1px solid var(--line);border-radius:999px;padding:13px 18px;font-weight:900;color:#283548;box-shadow:0 10px 30px rgba(22,35,58,.05)}
.section{padding:clamp(66px,9vw,122px) clamp(18px,4vw,64px)}.section-narrow{margin:0 clamp(18px,4vw,64px)}.label{margin:0 0 14px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:12px}.intro-grid{display:grid;grid-template-columns:1fr .75fr;gap:clamp(28px,6vw,86px);align-items:end}.section-text{color:var(--muted);font-size:20px;line-height:1.55;margin:0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cards article{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 14px 50px rgba(22,35,58,.06)}.cards b{display:block;color:var(--blue);font-size:14px;margin-bottom:24px}.cards p{color:var(--muted);line-height:1.52;margin:0}
.gallery-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:22px}.gallery-head p:last-child{max-width:430px;color:var(--muted);line-height:1.55;margin:0}.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:10px}.gallery-grid img{width:100%;height:100%;object-fit:cover;object-position:center center;border-radius:20px;border:5px solid white;box-shadow:0 12px 34px rgba(22,35,58,.09);background:#f2f6fb}.gallery-grid .big{grid-column:span 2;grid-row:span 2}.gallery-grid .tall{grid-row:span 2}
.reviews-section{padding-top:clamp(84px,10vw,140px)}.reviews-section h2{max-width:920px;margin-bottom:28px}.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.reviews blockquote{margin:0;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 14px 50px rgba(22,35,58,.06)}.reviews p{font-size:18px;line-height:1.5;margin-bottom:20px}.reviews cite{font-style:normal;color:var(--muted);font-weight:800}
.contact-section{padding:clamp(66px,9vw,122px) clamp(18px,4vw,64px)}.contact-card{display:grid;grid-template-columns:1fr minmax(310px,440px);gap:30px;align-items:center;padding:clamp(28px,5vw,58px);border-radius:42px;background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%);border:1px solid var(--line);box-shadow:var(--shadow)}.contact-card p:not(.label){color:var(--muted);font-size:18px;line-height:1.5}.contact-actions{display:grid;gap:12px}.vk-big,.phone-big{min-height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900}.vk-big{background:var(--blue);color:white}.vk-big img{width:38px;height:38px}.phone-big{background:#101828;color:white}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(18px,4vw,64px);color:var(--muted);font-weight:800;border-top:1px solid var(--line)}
@media(max-width:980px){nav{display:none}.hero,.intro-grid,.contact-card{grid-template-columns:1fr}.hero{min-height:auto}.hero-visual{min-height:560px}.cards,.reviews{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:150px}.gallery-grid .big{grid-column:span 2}}
@media(max-width:620px){.phone-pill{display:none}.hero{padding-top:36px}.metrics,.cards,.reviews{grid-template-columns:1fr}.hero-visual{min-height:470px}.hero-photo{height:460px;border-radius:30px;width:min(100%,340px)}.blob{inset:20px}.floating-card{display:none}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.gallery-grid .big,.gallery-grid .tall{grid-column:auto;grid-row:auto}.gallery-head{display:block}footer{flex-direction:column}}

.gallery-grid img.crop-top { object-position: center top; }


/* Mobile adaptation v1 */
@media (max-width: 760px) {
  body { background: #f7f9fc; }
  .site-header {
    position: sticky;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(230,235,242,.9);
  }
  .brand { font-size: 19px; }
  .header-actions, nav { display: none; }

  .hero {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 16px 34px;
    min-height: auto;
  }
  .hero-content { order: 1; width: 100%; }
  .hero-visual {
    order: 2;
    min-height: auto;
    width: 100%;
    display: block;
  }
  .blob { display: none; }
  .status {
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    margin-bottom: 16px;
  }
  h1 {
    font-size: clamp(38px, 12vw, 52px);
    line-height: .94;
    letter-spacing: -.065em;
    margin-bottom: 16px;
  }
  .lead {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .btn {
    width: 100%;
    min-height: 54px;
    border-radius: 17px;
  }
  .metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .metrics div {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
  }
  .metrics strong { margin: 0; font-size: 20px; }
  .metrics span { font-size: 13px; }

  .hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 28%;
    border: 7px solid #fff;
    border-radius: 28px;
  }
  .floating-card { display: none; }

  .strip {
    padding: 0 16px 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .strip span { scroll-snap-align: start; font-size: 13px; padding: 11px 14px; }

  .section { padding: 48px 16px; }
  .section-narrow { margin: 0 16px; }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  h2 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1;
    letter-spacing: -.055em;
  }
  .section-text { font-size: 16px; line-height: 1.5; }

  .cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cards article {
    padding: 18px;
    border-radius: 22px;
  }
  .cards b { margin-bottom: 14px; }
  .cards h3 { font-size: 21px; }

  .gallery-section { padding-top: 46px; }
  .gallery-head {
    display: block;
    margin-bottom: 16px;
  }
  .gallery-head p:last-child { margin-top: 12px; font-size: 15px; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
    gap: 8px;
  }
  .gallery-grid .big,
  .gallery-grid .tall {
    grid-column: auto;
    grid-row: auto;
  }
  .gallery-grid img {
    border: 4px solid #fff;
    border-radius: 18px;
    object-fit: cover;
    object-position: center 28%;
  }
  .gallery-grid img.crop-top { object-position: center top; }

  .reviews-section { padding-top: 56px; }
  .reviews {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .reviews blockquote {
    padding: 18px;
    border-radius: 22px;
  }
  .reviews p { font-size: 16px; margin-bottom: 14px; }

  .contact-section { padding: 48px 16px 58px; }
  .contact-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
    border-radius: 28px;
  }
  .contact-actions { gap: 10px; }
  .vk-big, .phone-big {
    min-height: 58px;
    border-radius: 18px;
    width: 100%;
  }

  footer {
    padding: 22px 16px;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  h1 { font-size: 36px; }
  .gallery-grid { grid-auto-rows: 132px; }
  .hero-photo { aspect-ratio: 3 / 4; }
}

/* Mobile adaptation v2 — rebuilt, not squeezed desktop */
@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  body { background: #f7f9fc !important; }
  main, section, header, footer { max-width: 100vw; }

  .site-header {
    position: sticky !important;
    top: 0;
    display: flex !important;
    justify-content: center !important;
    padding: 13px 16px !important;
    background: rgba(255,255,255,.92) !important;
  }
  .brand { font-size: 18px !important; }
  .site-header nav,
  .site-header .header-actions { display: none !important; }

  .hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 16px 34px !important;
    overflow: hidden !important;
  }
  .hero-visual {
    order: 1 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .hero-content {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .blob,
  .floating-card { display: none !important; }
  .hero-photo {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center 26% !important;
    border: 6px solid #fff !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 44px rgba(22,35,58,.12) !important;
  }

  .status {
    display: inline-flex !important;
    max-width: 100% !important;
    margin: 0 0 13px !important;
    padding: 8px 11px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  h1 {
    max-width: 100% !important;
    font-size: clamp(32px, 9.6vw, 40px) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
    margin: 0 0 14px !important;
    overflow-wrap: break-word !important;
  }
  .lead {
    max-width: 100% !important;
    font-size: 15.5px !important;
    line-height: 1.48 !important;
    margin: 0 0 18px !important;
  }
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin: 0 0 16px !important;
  }
  .btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
  }
  .btn-vk img { width: 24px !important; height: 24px !important; }

  .metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    max-width: 100% !important;
  }
  .metrics div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    border-radius: 17px !important;
  }
  .metrics strong { font-size: 18px !important; margin: 0 !important; min-width: 28px; }
  .metrics span { font-size: 12.5px !important; }

  .strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 16px 30px !important;
    overflow: visible !important;
  }
  .strip span {
    width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 10px 8px !important;
  }

  .section,
  .contact-section {
    padding: 44px 16px !important;
  }
  .section-narrow { margin: 0 16px !important; }
  .intro-grid,
  .contact-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  .label { font-size: 10.5px !important; letter-spacing: .12em !important; }
  h2 {
    max-width: 100% !important;
    font-size: clamp(28px, 8.2vw, 36px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em !important;
  }
  .section-text,
  .contact-card p:not(.label) {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  .cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .cards article {
    padding: 15px !important;
    border-radius: 20px !important;
  }
  .cards b { margin-bottom: 10px !important; }
  .cards h3 { font-size: 17px !important; margin-bottom: 6px !important; }
  .cards p { font-size: 12.2px !important; line-height: 1.35 !important; }

  .gallery-section { padding-top: 44px !important; }
  .gallery-head { display: block !important; margin-bottom: 16px !important; }
  .gallery-head p:last-child { display: none !important; }
  .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 128px !important;
    gap: 8px !important;
  }
  .gallery-grid .big,
  .gallery-grid .tall {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .gallery-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 28% !important;
    border: 4px solid #fff !important;
    border-radius: 17px !important;
  }
  .gallery-grid img.crop-top { object-position: center top !important; }

  .reviews-section { padding-top: 50px !important; }
  .reviews-section h2 { margin-bottom: 16px !important; }
  .reviews {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .reviews blockquote {
    padding: 16px !important;
    border-radius: 20px !important;
  }
  .reviews p { font-size: 15px !important; margin-bottom: 10px !important; }
  .reviews cite { font-size: 13px !important; }

  .contact-card {
    padding: 22px !important;
    border-radius: 26px !important;
  }
  .contact-actions { gap: 9px !important; }
  .vk-big, .phone-big {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    font-size: 15px !important;
  }

  footer {
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 12.5px !important;
  }
}

/* Mobile adaptation v3.1 — tighter first screen, full-page preview friendly */
@media (max-width: 760px) {
  .hero { padding-top: 14px !important; padding-bottom: 24px !important; gap: 14px !important; }
  .hero-photo { aspect-ratio: 16 / 11 !important; border-radius: 24px !important; }
  h1 { font-size: clamp(30px, 8.7vw, 36px) !important; line-height: 1 !important; margin-bottom: 12px !important; }
  .lead { font-size: 14.5px !important; line-height: 1.43 !important; margin-bottom: 14px !important; }
  .status { margin-bottom: 11px !important; }
  .hero-actions { margin-bottom: 12px !important; }
  .metrics div { padding: 9px 11px !important; }
  .strip { padding-bottom: 22px !important; }
  .section, .contact-section { padding-top: 34px !important; padding-bottom: 34px !important; }
  .cards article { padding: 13px !important; }
  .gallery-grid { grid-auto-rows: 118px !important; }
  .reviews-section { padding-top: 38px !important; }
}