:root{--primary:#0ea5e9;--accent:#f59e0b}
*{font-family:'Inter',sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif}
html{scroll-behavior:smooth}
body{overflow-x:hidden;background:linear-gradient(180deg,#fff 0%,#f0f9ff 100%)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes subtleZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.animate-scale-in{animation:scaleIn .6s ease-out forwards}
.bg-gradient-accent{background:linear-gradient(135deg,#06b6d4 0%,#0ea5e9 50%,#3b82f6 100%)}
.text-gradient{background:linear-gradient(135deg,#06b6d4,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3)}
.card-premium{transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.card-premium:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 30px 60px -15px rgba(14,165,233,.3)}
.reveal{opacity:0;transform:translateY(50px);transition:all 1s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.hero-with-bg{position:relative;min-height:100vh}
.hero-with-bg::before{content:'';position:absolute;inset:0;background-image:url('images/hero-installation.jpg');background-size:cover;background-position:center;animation:subtleZoom 20s ease-in-out infinite;z-index:0}
.hero-overlay{background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(30,58,138,.82) 50%,rgba(14,165,233,.75));position:absolute;inset:0;z-index:1}
.hero-with-bg>.max-w-7xl{position:relative;z-index:2}
.sub-hero{position:relative}
.sub-hero::before{content:'';position:absolute;inset:0;background-image:url('images/outdoor-installation-moscow.jpg');background-size:cover;background-position:center;z-index:0}
.sub-hero>.max-w-7xl{position:relative;z-index:2}
.modal-backdrop{background:rgba(15,23,42,.8);backdrop-filter:blur(12px)}
.nav-link{position:relative;transition:all .3s ease}
.nav-link::after{content:'';position:absolute;bottom:-6px;left:50%;width:0;height:3px;background:linear-gradient(90deg,#06b6d4,#3b82f6);transition:all .3s ease;transform:translateX(-50%);border-radius:2px}
.nav-link:hover::after{width:100%}
.btn-glow{position:relative;overflow:hidden}
.img-cover{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.img-cover:hover{transform:scale(1.05)}
.img-contain{width:100%;height:100%;object-fit:contain}
.badge-premium{background:linear-gradient(135deg,#f59e0b,#ef4444);box-shadow:0 4px 15px rgba(245,158,11,.4)}
.timeline-step{position:relative;padding-left:60px}
.timeline-step::before{content:'';position:absolute;left:24px;top:60px;bottom:-40px;width:2px;background:linear-gradient(180deg,#06b6d4,#3b82f6)}
.timeline-step:last-child::before{display:none}
.timeline-number{position:absolute;left:0;top:0;width:50px;height:50px;background:linear-gradient(135deg,#06b6d4,#3b82f6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;box-shadow:0 4px 15px rgba(14,165,233,.4)}
.price-row{transition:all .3s ease}
.price-row:hover{background:rgba(6,182,212,.05)}
footer{background:linear-gradient(180deg,#1a1a1a,#2d2d2d)!important}
footer h3{color:#fff!important}
footer p,footer span,footer a:not(:hover){color:rgba(255,255,255,.85)!important}
footer a:hover{color:#22d3ee!important}
#order-modal{z-index:9999!important;overflow-y:auto}
#order-modal .modal-backdrop{background:rgba(0,0,0,.75)!important;backdrop-filter:blur(8px)!important;z-index:9998!important}
#order-modal>div.relative{z-index:10000!important;position:relative}
#toast{z-index:10001!important}
@media(max-width:768px){
h1{font-size:1.75rem!important;line-height:1.2!important}
h2{font-size:1.5rem!important;line-height:1.3!important}
.text-5xl{font-size:1.75rem!important}
.text-4xl{font-size:1.5rem!important}
.text-3xl{font-size:1.25rem!important}
.py-24,.py-20{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
.p-10{padding:1.5rem!important}
.p-8{padding:1.25rem!important}
.md\:grid-cols-2,.md\:grid-cols-3,.lg\:grid-cols-2,.lg\:grid-cols-3,.lg\:grid-cols-4,.lg\:grid-cols-5{grid-template-columns:1fr!important}
button,.btn-glow{width:100%!important;max-width:100%!important}
.timeline-step{padding-left:50px!important}
img{max-width:100%!important;height:auto!important}
}