:root{
  --bg:#0b0b0c;
  --card:#121214;
  --muted:#7a7a7f;
  --text:#f3f3f7;
  --orange:#ff6a00;
  --orange-2:#ffa052;
  --green:#1aa232;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 600px at 80% -20%, rgba(255,106,0,0.18), transparent) , var(--bg);
  color:var(--text);
}
.container{width:min(1200px, calc(100% - 40px)); margin:0 auto}
a{color:inherit; text-decoration:none}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:16px;
  background:linear-gradient(180deg,var(--orange),#e05500);
  color:white; font-weight:700; letter-spacing:.2px;
  box-shadow:0 8px 24px rgba(255,106,0,.25);
  transition:.25s transform, .25s box-shadow, .25s opacity;
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(180deg,var(--orange),#e05500),
    linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.0) 100%);
  background-size: auto, 250% 250%;
  background-position: center, -200% center;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,106,0,.35); background-position: center, 200% center;}
.btn::after {
  content:""; position:absolute; inset:-60%;
  background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%);
  transition: opacity .25s; opacity: 0;
}
.btn:hover::after { opacity: .6; }
.btn.secondary{background:#1c1c1f; border:1px solid #2a2a2f; box-shadow:none}
.badge{background:rgba(255,106,0,.15); color:var(--orange); border:1px solid rgba(255,106,0,.4); padding:.4rem .9rem; border-radius:999px; font-size:.9rem; margin-bottom: 25px; max-width: 200px; animation: glowPulse 3.2s ease-in-out infinite;}

.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(11,11,12,.65); border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.8rem}
.brand .logo{
  width:48px; height:48px; border-radius:10px;
  background:linear-gradient(145deg, var(--orange), var(--orange-2));
  display:grid; place-items:center; font-weight:900; color:#0b0b0c;
}
.brand span{font-weight:400; letter-spacing:.4px; font-size: 20px;}
.nav-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.nav-actions .phone{
  font-weight:800; padding:.9rem 1rem; border-radius:12px; background:#151518; border:1px solid #26262b
}
.hero{ padding: clamp(48px, 6vw, 88px) 0 44px; }
.hero .grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:40px; align-items:center; }
h1{font-size:clamp(36px, 5vw, 56px); margin:.2rem 0 1rem; line-height:1.06}
.lead{color:#cfd0d6; font-size:clamp(16px, 2vw, 20px);}
.hero-card{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap }
.hero .photo{ border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:#0f0f12; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.hero .photo img{width:100%; display:block; object-fit:cover; height:540px}

.section{padding:72px 0; border-top:1px solid rgba(255,255,255,.06)}
.section h2{font-size:clamp(28px, 4vw, 40px); margin:0 0 18px}
.kicker{color:var(--muted); margin-bottom:8px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:25px;}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px; padding:18px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card strong{display:block; font-size:1.05rem; margin-bottom:.35rem}
.card p{margin:0; color:#cfd0d6; font-size:.98rem}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.28); border-color: rgba(255,255,255,.12); }

.list{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.list .item{padding:12px 14px; border:1px dashed rgba(255,255,255,.08); border-radius:12px; background:#111113}
.list .item::before{content:"✓"; color:var(--orange); margin-right:8px}

.pricing{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.price{
  background:linear-gradient(180deg, rgba(255,106,0,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,106,0,.25);
  border-radius:18px; padding:18px; text-align:center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.price h3{margin:.2rem 0 .3rem; font-size:1.4rem}
.price .num{font-size:1.6rem; font-weight:900}
.price:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.28); border-color: rgba(255,255,255,.12); }

/* Галерея/Слайдер базовый контейнер */
.slider { position: relative; width: 100%; overflow: hidden; border-radius: 16px; }
.slider-track { display: flex; transition: transform 0.5s ease; will-change: transform; }
.slider-slide { display:flex; align-items:center; justify-content:center; flex: 0 0 100%; max-height: 80vh; }
.slider-slide img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; aspect-ratio: 16/9;
  user-select: none; -webkit-user-drag: none;
}
/* Стрелки */
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  border: none; background: rgba(0,0,0,0.45); color: #fff; width: 44px; height: 44px;
  border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(2px); transition: background 0.2s ease;
}
.slider-btn:hover { background: rgba(0,0,0,0.65); }
.slider-btn.prev { left: 12px; } .slider-btn.next { right: 12px; }
/* Точки */
.slider-dots {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 8px; padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.25); backdrop-filter: blur(3px);
}
.slider-dot {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.6);
  cursor: pointer; transition: transform .2s ease, background .2s ease;
}
.slider-dot.active { background: #fff; transform: scale(1.25); }

.cta{
  padding:50px; border-radius:22px; border:1px solid rgba(255,255,255,.08);
  background: radial-gradient(600px 240px at 90% 10%, rgba(255,106,0,.25), transparent), #101012;
  display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:center;
  background-image:
    radial-gradient(600px 240px at 90% 10%, rgba(255,106,0,.25), transparent),
    linear-gradient(120deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 100%);
  background-size: auto, 250% 250%;
  animation: sweep 14s linear infinite;
}
.cta .panel{
  background:#0f0f12; border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cta .panel strong{color:#d6d6da}
.cta .panel:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.28); border-color: rgba(255,255,255,.12); }

footer{padding:38px 0; color:#a8a8af}

.whatsapp{background:#1f2b22; border-color:#254d33}
.telegram{background:#1c2430; border-color:#2c4b69}
.viber{background:#261c2e; border-color:#4b2c69}

@media (max-width: 1080px){
  .hero .grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .gallery img{height:220px}
  .cta { padding: 10px;}
  .brand .logo{ width:58px; height:38px; }
  .brand span{ margin-right:10px; }
}

/* Слайдер — адаптивные уточнения */
@media (min-width: 992px) {
  .slider-slide img { aspect-ratio: 21/9; }
}
@media (max-width: 550px) {
  .slider-slide img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    aspect-ratio: auto;
    user-select: none;
    -webkit-user-drag: none;
  }
}

/* ====== ANIMATIONS / MICRO-INTERACTIONS ====== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.reveal { 
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.card { transition-duration: .7s }
.reveal.price { transition-duration: .7s }
.reveal.gallery-img { transition-duration: .7s }
.reveal.from-left { transform: translateX(-20px); }
.reveal.from-right { transform: translateX(20px); }
.reveal.from-left.in, .reveal.from-right.in { transform: none; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,106,0,0.0); }
  50% { box-shadow: 0 0 36px rgba(255,106,0,0.25); }
}
@keyframes floatY {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-6px); }
}
.hero .photo { animation: floatY 8s ease-in-out infinite; transform-style: preserve-3d; }

.topbar.scrolled {
  background: rgba(11,11,12,.82);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.scroll-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  z-index: 9999; pointer-events: none;
}

@keyframes sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Instagram link micro-inertia */
a[href*="instagram.com"] { transition: color .25s ease, text-shadow .25s ease }
a[href*="instagram.com"]:hover { color:#fff; text-shadow: 0 0 20px rgba(255,106,0,.5) }