/* ─────────────────────────────────────────
   TOKENS  —  Apple DNA
   White · Blue · Precision · Space
───────────────────────────────────────── */
:root {
  --white:   #ffffff;
  --off:     #f5f5f7;   /* Apple off-white */
  --off2:    #e8e8ed;
  --ink:     #1d1d1f;   /* Apple near-black */
  --ink2:    #424245;
  --ink3:    #6e6e73;   /* Apple secondary text */
  --ink4:    #aeaeb2;
  --blue:    #0071e3;   /* Apple blue */
  --blue-h:  #0077ed;
  --blue-lt: #e8f0fb;
  --blue-tg: #2aabee;   /* Telegram */
  --sep:     rgba(0,0,0,0.08);
  --sep2:    rgba(0,0,0,0.14);
  --r:       12px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-pill:  100px;
  --font:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --ease:    cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--off2); border-radius: 4px; }

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px; }
.wrap-lg { max-width: 1200px; margin: 0 auto; padding: 0 22px; }

/* ─────────────────────────────────────────
   BUTTONS  —  Apple pill style
───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: var(--r-pill);
  border: none; cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap; letter-spacing: -0.01em; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.icon-sprite { display: none; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-h); transform: scale(1.02); }
.btn-blue:active { transform: scale(0.98); }
.btn-tg { background: var(--blue-tg); color: #fff; }
.btn-tg:hover { background: #1a9bd4; transform: scale(1.02); }
.btn-tg:active { transform: scale(0.98); }
.btn-outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover { background: var(--blue-lt); }
.btn-ghost { background: rgba(0,0,0,0.05); color: var(--ink2); }
.btn-ghost:hover { background: rgba(0,0,0,0.08); }
.btn-white { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.btn-white:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); transform: scale(1.02); }
.btn-lg { padding: 16px 30px; font-size: 17px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* ─────────────────────────────────────────
   NAVIGATION  —  Apple frosted glass
───────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 52px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sep);
  transition: background .3s;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; gap: 20px;
}
.nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.logo-img { height: 24px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 0; flex: 1; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--ink3);
  padding: 6px 11px; border-radius: 8px;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--off); }
.nav-ctas { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-phone { font-size: 13px; font-weight: 600; color: var(--blue); }
.nav-phone:hover { text-decoration: underline; }

/* Burger */
.burger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: auto; width: 36px; height: 36px;
}
.burger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .28s var(--ease), opacity .28s;
  transform-origin: center;
}
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
#drawer {
  display: none; position: fixed; inset: 52px 0 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 499; flex-direction: column;
  padding: 32px 22px 40px;
  overflow-y: auto;
}
#drawer.open { display: flex; }
#drawer nav { display: flex; flex-direction: column; border-top: 1px solid var(--sep); }
#drawer nav a {
  font-size: 17px; font-weight: 500; color: var(--ink);
  padding: 16px 0;
  border-bottom: 1px solid var(--sep);
  transition: color .15s;
}
#drawer nav a:hover { color: var(--blue); }
#drawer .d-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
#drawer .d-ctas .btn { width: 100%; font-size: 17px; padding: 15px; }

/* ─────────────────────────────────────────
   HERO  —  Apple big headline, centred
───────────────────────────────────────── */
.hero {
  padding: 128px 0 80px;
  text-align: center;
  background: var(--white);
  position: relative; overflow: hidden;
}
/* subtle radial glow behind text */
.hero::before {
  content: '';
  position: absolute; width: 800px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,113,227,0.07) 0%, transparent 70%);
  top: 40%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-eye {
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--blue); margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(42px, 7.5vw, 80px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.04em; color: var(--ink);
  margin-bottom: 20px;
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--ink) 25%,
    #0071e3 45%,
    #34aadc 55%,
    #0071e3 65%,
    var(--ink) 80%,
    var(--ink) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: fadeUp .7s var(--ease) .15s forwards, gradientFlow 4s linear infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 38px;
    letter-spacing: -0.03em;
    background: linear-gradient(
      90deg,
      #1d1d1f 0%,
      #1d1d1f 20%,
      #0071e3 38%,
      #34aadc 50%,
      #0071e3 62%,
      #1d1d1f 80%,
      #1d1d1f 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: fadeUp .7s var(--ease) .15s forwards, gradientFlow 4s linear infinite;
  }
}
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-sub {
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 400;
  color: var(--ink3); line-height: 1.55;
  max-width: 560px; margin: 0 auto 36px;
}
.hero-ctas {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 56px;
}
.hero-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
.hero-photo {
  margin: 56px auto 0; max-width: 1100px;
  border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 30px 70px rgba(0,0,0,0.16);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 85%; }
.trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink3); font-weight: 500;
  padding: 7px 14px;
  background: var(--off);
  border-radius: var(--r-pill);
}
.trust-item .dot { width: 7px; height: 7px; border-radius: 50%; background: #30c85e; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.trust-stars { color: #ff9500; font-size: 11px; letter-spacing: 1px; }

/* ─────────────────────────────────────────
   BRAND STRIP
───────────────────────────────────────── */
.brand-strip {
  border-top: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep);
  background: var(--off);
  padding: 20px 0; overflow: hidden;
}
.brands-scroll {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.brands-scroll::-webkit-scrollbar { display: none; }
.brand-pill {
  flex-shrink: 0; padding: 8px 28px;
  font-size: 13px; font-weight: 600; color: var(--ink4);
  border-right: 1px solid var(--sep2);
  white-space: nowrap; transition: color .2s;
}
.brand-pill:last-child { border-right: none; }
.brand-pill:hover { color: var(--ink2); }

/* ─────────────────────────────────────────
   SECTION UTILITIES
───────────────────────────────────────── */
.section { padding: 100px 0; }
.section-dark { background: var(--ink); }
.section-off  { background: var(--off); }
.section-white { background: var(--white); }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--blue); margin-bottom: 10px;
}
.section-dark .eyebrow { color: #6ec0ff; }

.headline {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--ink);
  margin-bottom: 14px;
}
.section-dark .headline { color: var(--white); }

.subline {
  font-size: 17px; color: var(--ink3); line-height: 1.6;
  font-weight: 400; max-width: 560px;
}
.section-dark .subline { color: rgba(255,255,255,0.5); }
.center { text-align: center; }
.center .subline { margin: 0 auto; }

/* ─────────────────────────────────────────
   STATS ROW  —  Apple centered numbers
───────────────────────────────────────── */
.stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep);
}
.stat {
  padding: 48px 24px; text-align: center;
  border-right: 1px solid var(--sep);
  transition: background .2s var(--ease);
}
.stat:last-child { border-right: none; }
.stat:hover { background: var(--off); }
.stat-ico { display: block; width: 22px; height: 22px; margin: 0 auto 14px; color: var(--blue); opacity: .8; }
.stat-ico svg { width: 100%; height: 100%; }
.stat-val {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700; letter-spacing: -0.04em;
  color: var(--ink); line-height: 1; margin-bottom: 8px;
}
.stat-val em { color: var(--blue); font-style: normal; }
.stat-label { font-size: 14px; color: var(--ink3); line-height: 1.45; }

/* ─────────────────────────────────────────
   HOW IT WORKS  —  horizontal numbered list
───────────────────────────────────────── */
.how-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--sep); border: 1px solid var(--sep);
  border-radius: var(--r-xl); overflow: hidden; margin-top: 56px;
}
.how-item {
  background: var(--white); padding: 36px 28px;
}
.how-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex-shrink: 0;
}
.how-title { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.how-desc { font-size: 14px; color: var(--ink3); line-height: 1.6; }

/* ─────────────────────────────────────────
   SERVICES  —  Apple product grid
───────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 56px; }
.svc-card {
  background: var(--off); border-radius: var(--r-xl);
  padding: 36px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: default;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}
.svc-icon { width: 40px; height: 40px; margin-bottom: 20px; display: block; color: var(--blue); }
.svc-icon svg { width: 100%; height: 100%; }
.svc-title { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.02em; }
.svc-list { list-style: none; }
.svc-list li {
  font-size: 14px; color: var(--ink3);
  padding: 8px 0; border-bottom: 1px solid var(--sep2);
  display: flex; align-items: center; gap: 8px;
}
.svc-list li:last-child { border-bottom: none; }
.svc-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

/* ─────────────────────────────────────────
   PRICES  —  Apple tab + table
───────────────────────────────────────── */
.prices-body { margin-top: 40px; }
.price-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px;
  background: var(--off); padding: 4px; border-radius: var(--r-pill);
}
.ptab {
  flex: 1; min-width: 90px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: none; border: none;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  color: var(--ink3); cursor: pointer;
  transition: all .2s var(--ease); text-align: center;
}
.ptab.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.ptab:hover:not(.on) { color: var(--ink); }

.pp { display: none; }
.pp.on { display: block; }

.price-tbl { width: 100%; border-collapse: collapse; }
.price-tbl tbody tr {
  border-bottom: 1px solid var(--sep);
  transition: background .15s;
}
.price-tbl tbody tr:last-child { border-bottom: none; }
.price-tbl tbody tr:hover { background: var(--off); }
.price-tbl td { padding: 18px 0; vertical-align: middle; }
.p-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.p-note { font-size: 12px; color: var(--ink4); margin-top: 3px; }
.p-price {
  font-size: 17px; font-weight: 700; color: var(--blue);
  text-align: right; white-space: nowrap; letter-spacing: -0.02em;
}
.price-cta {
  margin-top: 20px; padding: 24px 28px;
  background: var(--off); border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.price-cta-t { font-size: 17px; font-weight: 600; color: var(--ink); }
.price-cta-s { font-size: 14px; color: var(--ink3); margin-top: 3px; }

/* ─────────────────────────────────────────
   ABOUT  —  two-column
───────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-lead { font-size: 17px; color: var(--ink3); line-height: 1.65; margin-top: 16px; }
.about-lead-sub { margin-top: 14px; margin-bottom: 28px; }
.about-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.about-cards { display: flex; flex-direction: column; gap: 12px; }
.about-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; background: var(--off); border-radius: var(--r-lg);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.about-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.07); }
.about-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--blue); }
.about-icon svg { width: 100%; height: 100%; }
.about-card strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.about-card span { font-size: 13px; color: var(--ink3); line-height: 1.55; }

/* ─────────────────────────────────────────
   GALLERY  —  shop & workshop photos
───────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 56px; }
.gal-item {
  border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/3; background: var(--off);
}
.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.gal-item:hover img { transform: scale(1.05); }

/* ─────────────────────────────────────────
   REVIEWS  —  cards grid
───────────────────────────────────────── */
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 56px; }
.reviews-more { margin-top: 28px; }
.rev {
  background: var(--off); border-radius: var(--r-xl); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.rev-stars { font-size: 13px; color: #ff9500; letter-spacing: 1.5px; }
.rev-text { font-size: 14px; color: var(--ink2); line-height: 1.7; flex: 1; }
.rev-foot { display: flex; align-items: center; gap: 10px; }
.rev-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-lt); color: var(--blue);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rev-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.rev-src  { font-size: 12px; color: var(--ink4); }

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.faq-wrap { max-width: 680px; margin: 56px auto 0; }
.fq { border-bottom: 1px solid var(--sep); }
.fq-btn {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--ink);
  text-align: left; transition: color .15s;
}
.fq-btn:hover { color: var(--blue); }
.fq-icon {
  width: 22px; height: 22px; flex-shrink: 0; position: relative;
  background: var(--off); border-radius: 50%;
}
.fq-icon::before, .fq-icon::after {
  content: ''; position: absolute; background: var(--ink3); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s;
}
.fq-icon::before { width: 10px; height: 1.5px; top: 10px; left: 6px; }
.fq-icon::after  { width: 1.5px; height: 10px; top: 6px; left: 10px; }
.fq.open .fq-icon::after { transform: rotate(90deg); opacity: 0; }
.fq-ans { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.fq-ans p { font-size: 15px; color: var(--ink3); line-height: 1.7; padding-bottom: 20px; }

/* ─────────────────────────────────────────
   ACCESSORIES  —  compact grid
───────────────────────────────────────── */
.acc-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--sep);
  border: 1px solid var(--sep); border-radius: var(--r-xl); overflow: hidden;
  margin-top: 56px;
}
.acc-item {
  background: var(--white); padding: 20px 22px;
  display: flex; align-items: center; gap: 14px;
  transition: background .15s;
}
.acc-item:hover { background: var(--off); }
.acc-ico { flex-shrink: 0; width: 24px; height: 24px; color: var(--blue); }
.acc-ico svg { width: 100%; height: 100%; }
.acc-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.acc-price { font-size: 13px; color: var(--blue); font-weight: 600; margin-top: 1px; }

/* ─────────────────────────────────────────
   BIG CTA  —  Apple dark hero band
───────────────────────────────────────── */
.cta-band {
  background: var(--ink);
  padding: 100px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(0,113,227,0.18) 0%, transparent 65%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-band .eyebrow { color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.cta-band .headline { color: var(--white); margin-bottom: 12px; }
.cta-band .subline  { color: rgba(255,255,255,0.5); margin: 0 auto 40px; }
.cta-band-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-band-inner { position: relative; z-index: 1; }
.btn-glass {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
}
.btn-glass:hover { background: rgba(255,255,255,0.15); transform: scale(1.02); }

/* ─────────────────────────────────────────
   CONTACTS
───────────────────────────────────────── */
.contacts-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; margin-top: 56px; align-items: start; }
.contact-stack { display: flex; flex-direction: column; gap: 12px; }
.cc {
  background: var(--off); border-radius: var(--r-lg); padding: 20px 22px;
}
.cc-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink4); margin-bottom: 6px; }
.cc-val { font-size: 16px; font-weight: 600; color: var(--ink); }
.cc-val a { color: var(--ink); transition: color .15s; }
.cc-val a:hover { color: var(--blue); }
.cc-sub { font-size: 13px; color: var(--ink3); margin-top: 3px; }
.hours-list { margin-top: 4px; }
.hour-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--sep); font-size: 14px; }
.hour-row:last-child { border-bottom: none; }
.hour-day { color: var(--ink3); }
.hour-time { font-weight: 600; color: var(--ink); }
.hour-time.closed { color: var(--ink4); font-weight: 400; }
#live-status { font-size: 13px; font-weight: 600; margin-top: 10px; }
.contact-btns { display: flex; gap: 10px; margin-top: 4px; }
.contact-btns .btn { flex: 1; }
.map-box {
  border-radius: var(--r-xl); overflow: hidden;
  height: 380px; background: var(--off);
}
.map-box iframe { width: 100%; height: 100%; border: none; }

/* ─────────────────────────────────────────
   FOOTER  —  Apple minimal dark footer
───────────────────────────────────────── */
footer {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0 28px;
}
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}
.footer-logo { display: flex; align-items: center; }
.footer-logo .logo-img { height: 20px; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { font-size: 13px; color: rgba(255,255,255,0.35); transition: color .15s; }
.footer-nav a:hover { color: rgba(255,255,255,0.7); }
.footer-socials { display: flex; gap: 8px; }
.fs { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.35); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-pill); transition: all .15s; }
.fs:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.2); }

/* ─────────────────────────────────────────
   STICKY MOBILE BAR
───────────────────────────────────────── */
.mob-sticky {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  padding: 10px 16px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--sep);
  gap: 10px;
}
.mob-sticky .btn { flex: 1; }

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au { opacity: 0; animation: fadeUp .7s var(--ease) forwards; }
.au1 { animation-delay: .05s; } .au2 { animation-delay: .15s; }
.au3 { animation-delay: .25s; } .au4 { animation-delay: .35s; }
.au5 { animation-delay: .45s; } .au6 { animation-delay: .55s; }

/* ─── STATUS BAR — под шапкой ─── */
#status-bar {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 490;
  background: rgba(245,245,247,0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sep);
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: nowrap; overflow: hidden;
  font-size: 13px; color: var(--ink3); font-weight: 500;
  white-space: nowrap;
  padding: 0 16px;
}
#status-bar .sb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; margin-right: 5px; vertical-align: middle;
  flex-shrink: 0;
}
#status-bar .sb-open  .sb-dot { background: #30c85e; animation: blink 2s infinite; }
#status-bar .sb-closed .sb-dot { background: var(--ink4); }
#status-bar .sb-open  { color: #1a8c42; }
#status-bar .sb-closed { color: var(--ink4); }
#status-bar .sb-sep { color: var(--sep2); }
#status-bar .sb-hours { display: inline; }
#status-bar .sb-addr  { display: inline; }

/* сдвигаем контент вниз — nav 52px + status-bar 36px */
body { padding-top: 36px; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-ctas  { display: none; }
  .burger    { display: flex; }
  .svc-grid  { grid-template-columns: repeat(2,1fr); }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .reviews-grid { grid-template-columns: repeat(2,1fr); }
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .contacts-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: repeat(2,1fr); }
  .acc-grid { grid-template-columns: repeat(2,1fr); }
  .map-box { height: 280px; }
  .footer-nav { gap: 14px; }
  /* drawer starts right below nav+status-bar */
  #drawer { top: 88px; }
}

@media (max-width: 600px) {
  /* ── layout ── */
  .section { padding: 60px 0; }
  .wrap, .wrap-lg { padding: 0 16px; }

  /* ── status bar: на мобиле скрываем адрес и часы, оставляем только статус ── */
  #status-bar .sb-sep   { display: none; }
  #status-bar .sb-addr  { display: none; }
  #status-bar .sb-hours { display: none; }
  #status-bar { justify-content: center; gap: 0; }

  /* ── nav + drawer ── */
  #drawer { top: 88px; padding: 24px 16px 32px; }
  #drawer nav a { font-size: 22px; padding: 14px 0; }
  #drawer .d-ctas { margin-top: 24px; }
  #drawer .d-ctas .btn { font-size: 16px; padding: 14px; }

  /* ── hero ── */
  /* nav(52) + statusbar(36) + extra(8) = 96 top; bottom needs mob-sticky space */
  .hero { padding: 96px 0 100px; }
  .hero-photo { margin-top: 36px; aspect-ratio: 4/3; border-radius: var(--r-lg); }

  /* ── stats ── */
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .stat { padding: 32px 16px; }
  .stat-ico { width: 18px; height: 18px; margin-bottom: 10px; }
  .stat-val { font-size: 34px; }
  .stat-label { font-size: 13px; }

  /* ── how ── */
  .how-grid { grid-template-columns: 1fr; }

  /* ── services ── */
  .svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-card { padding: 28px 22px; }
  .svc-icon { width: 32px; height: 32px; margin-bottom: 14px; }
  .svc-title { font-size: 17px; }

  /* ── prices ── */
  .price-tabs { gap: 4px; }
  .ptab { min-width: 70px; font-size: 13px; padding: 8px 10px; }
  .price-tbl td { padding: 14px 0; }
  .p-name { font-size: 14px; }
  .p-price { font-size: 15px; }
  .price-cta { flex-direction: column; gap: 16px; text-align: center; }
  .price-cta .btn { width: 100%; }

  /* ── gallery ── */
  .gallery-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── reviews ── */
  .reviews-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── accessories ── */
  .acc-grid { grid-template-columns: 1fr; }

  /* ── hero ctas ── */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { width: 100%; max-width: none; }

  /* ── hero trust pills: stack on small ── */
  .hero-trust { gap: 6px; justify-content: center; }
  .trust-item { font-size: 12px; padding: 6px 11px; }

  /* ── cta band ── */
  .cta-band { padding: 72px 0; }
  .cta-band-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-band-btns .btn { width: 100%; max-width: none; }

  /* ── about ── */
  .about-cards { gap: 10px; }
  .about-card { padding: 16px; gap: 12px; }

  /* ── contacts ── */
  .contact-btns { flex-direction: row; gap: 10px; }
  .contact-btns .btn { flex: 1; }
  .map-box { height: 240px; border-radius: var(--r-lg); }

  /* ── footer ── */
  .footer-top { flex-direction: column; gap: 16px; }
  .footer-nav { flex-wrap: wrap; gap: 12px 20px; }
  .footer-bottom { flex-direction: column; gap: 4px; align-items: flex-start; }

  /* ── sticky mobile bar ── */
  .mob-sticky { display: flex; }

  /* ── headlines scale ── */
  .headline { font-size: 28px; }
  .hero-sub { font-size: 16px; }
}