:root{
  --bg:#f8fafc; --card:#ffffff; --accent:#0b6ef6; --muted:#6b7280; --radius:10px; --container:1100px;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#0f172a; background:var(--bg); line-height:1.5; overflow-x:hidden}
@keyframes fadeInUp{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0; transform:translateY(-30px)}to{opacity:1; transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0; transform:translateX(-50px)}to{opacity:1; transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0; transform:translateX(50px)}to{opacity:1; transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0; transform:scale(0.95)}to{opacity:1; transform:scale(1)}}
.animate-in{animation:fadeInUp 0.6s ease-out forwards}
.animate-delay-1{animation-delay:0.1s}
.animate-delay-2{animation-delay:0.2s}
.animate-delay-3{animation-delay:0.3s}
.container{max-width:var(--container); margin:0 auto; padding:28px}
.site-header{background:#fff; border-bottom:1px solid #e6eef8; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(15,23,42,0.05); transition:all 0.3s ease}
.header-inner{display:flex; align-items:center; justify-content:space-between; transition:all 0.3s ease}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; transition:transform 0.3s ease}
.brand:hover{transform:scale(1.02)}
.logo{width:48px; height:48px; transition:transform 0.3s ease}
.logo:hover{transform:rotate(5deg)}
.brand-name{font-weight:600; transition:color 0.3s ease}
.nav a{margin-left:18px; color:var(--muted); text-decoration:none; position:relative; transition:color 0.3s ease}
.nav a::after{content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width 0.3s ease}
.nav a:hover{color:var(--accent)}
.nav a:hover::after{width:100%}
.hero{padding:54px 0; position:relative}
.hero-inner{display:flex; gap:30px; align-items:center}
.hero-copy{flex:1}
.hero-copy h1{font-size:28px; margin:0 0 12px; animation:slideInLeft 0.8s ease-out}
.hero-copy p{color:var(--muted); margin:0 0 18px; animation:slideInLeft 0.8s ease-out 0.2s both}
.hero-copy .hero-cta{animation:slideInLeft 0.8s ease-out 0.4s both}
.btn{display:inline-block; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600; transition:all 0.3s ease; cursor:pointer}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 4px 15px rgba(11,110,246,0.3)}
.btn.primary:hover{background:#0a5dd6; transform:translateY(-2px); box-shadow:0 8px 25px rgba(11,110,246,0.4)}
.btn.ghost{border:2px solid var(--accent); color:var(--accent); background:transparent}
.btn.ghost:hover{background:rgba(11,110,246,0.05); transform:translateY(-2px)}
.hero-art{width:360px; animation:slideInRight 0.8s ease-out}
.hero-svg{width:100%; height:auto; filter:drop-shadow(0 10px 30px rgba(11,110,246,0.15))}
.services{padding:26px 0}
.carousel-section{margin:40px 0}
.carousel{position:relative; overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 20px 40px rgba(15,23,42,0.08); animation:scaleIn 0.8s ease-out}
.carousel-track{display:flex; transition:transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); width:300%;}
.carousel-item{min-width:100%; position:relative; overflow:hidden;}
.carousel-item img{width:40%; display:block; height:500px; object-fit:cover; transition:transform 0.6s ease;}
.carousel-item:hover img{transform:scale(1.05)}
.carousel-caption{position:absolute; left:0; right:0; bottom:0; padding:18px 22px; background:linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.82) 100%); color:#fff; transition:all 0.3s ease;}
.carousel-caption h3{margin:0 0 8px; font-size:22px; transition:transform 0.3s ease}
.carousel-caption p{margin:0; color:rgba(255,255,255,0.88); transition:transform 0.3s ease}
.carousel-item:hover .carousel-caption h3{transform:translateY(-4px)}
.carousel-item:hover .carousel-caption p{transform:translateY(-2px)}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(255,255,255,0.9); color:#0f172a; width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(15,23,42,0.12); transition:all 0.3s ease; font-size:24px; font-weight:bold}
.carousel-btn:hover{background:#fff; transform:translateY(-50%) scale(1.1); box-shadow:0 16px 32px rgba(15,23,42,0.2)}
.carousel-btn.prev{left:16px}
.carousel-btn.next{right:16px}
.carousel-dots{display:flex; gap:10px; justify-content:center; padding:16px 0 18px; background:#fff;}
.carousel-dot{width:12px; height:12px; border-radius:50%; border:none; background:rgba(15,23,42,0.25); cursor:pointer; transition:all 0.3s ease}
.carousel-dot:hover{transform:scale(1.3); background:rgba(15,23,42,0.4)}
.carousel-dot.active{background:var(--accent); animation:scaleIn 0.3s ease}
.services h2, .about h2, .contact h2{margin:8px 0 20px; animation:fadeInUp 0.6s ease-out}
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.service-card{border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(11,110,246,0.08); background:var(--card); animation:fadeInUp 0.6s ease-out both; transition:all 0.4s ease; cursor:pointer}
.service-card:nth-child(1){animation-delay:0s}
.service-card:nth-child(2){animation-delay:0.1s}
.service-card:nth-child(3){animation-delay:0.2s}
.service-card:nth-child(4){animation-delay:0.3s}
.service-card:nth-child(5){animation-delay:0.4s}
.service-card:nth-child(6){animation-delay:0.5s}
.service-card:nth-child(7){animation-delay:0.6s}
.service-card:hover{transform:translateY(-12px); box-shadow:0 20px 50px rgba(11,110,246,0.2)}
.service-image{position:relative; height:240px; overflow:hidden; background:#f0f4f8}
.service-image img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease}
.service-card:hover .service-image img{transform:scale(1.08)}
.service-overlay{position:absolute; inset:0; background:linear-gradient(135deg, rgba(11,110,246,0.9) 0%, rgba(11,110,246,0.7) 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px; opacity:0; transition:opacity 0.3s ease; text-align:center; padding:20px}
.service-card:hover .service-overlay{opacity:1}
.service-content{padding:24px}
.service-content h3{margin:0 0 12px; font-size:20px; color:#0f172a; transition:color 0.3s ease}
.service-card:hover .service-content h3{color:var(--accent)}
.service-content p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}
.why-grid-section{margin-top:40px}
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:24px}
.why-card{background:#f8fbff; border:1px solid rgba(11,110,246,0.12); border-radius:16px; padding:24px; box-shadow:0 16px 36px rgba(11,110,246,0.06); transition:transform 0.35s ease, box-shadow 0.35s ease}
.why-card:hover{transform:translateY(-8px); box-shadow:0 22px 50px rgba(11,110,246,0.12)}
.why-icon{width:52px; height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; border-radius:14px; background:rgba(11,110,246,0.1); color:var(--accent); font-size:22px}
.why-card h3{margin:0 0 12px; font-size:18px}
.why-card p{margin:0; color:var(--muted); line-height:1.7; font-size:14px}
.about{padding:26px 0; animation:fadeInUp 0.6s ease-out}
.contact{padding:26px 0; animation:fadeInUp 0.6s ease-out}
.contact-inner{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.contact-card, .map-card{background:var(--card); padding:22px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.map-card h3{margin-top:0; margin-bottom:18px}
.map-wrapper{border-radius:12px; overflow:hidden; min-height:320px; box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.map-wrapper iframe{width:100%; height:100%; border:0; min-height:320px;}
.contact-form label{display:block; margin-bottom:12px}
.contact-form span{display:block; margin-bottom:6px; color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%; padding:10px; border:1px solid #e6eef8; border-radius:8px}
.form-actions{display:flex; gap:8px; margin-top:10px}
.site-footer{padding:18px 0; color:var(--muted); text-align:center; border-top:1px solid #e6eef8; margin-top:40px; animation:fadeInUp 0.6s ease-out}
ul, ol{animation:fadeInUp 0.6s ease-out}
li{animation:fadeInUp 0.6s ease-out; transition:transform 0.3s ease}
li:hover{transform:translateX(4px)}
a{color:var(--accent); text-decoration:none; transition:all 0.3s ease}
a:hover{text-decoration:underline; opacity:0.8}
.contact-form input, .contact-form textarea{transition:all 0.3s ease; outline:none}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(11,110,246,0.1)}
.contact-form button{transition:all 0.3s ease}
.contact-form button:active{transform:scale(0.98)}
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse}
  .hero-art{width:100%}
  .contact-inner{display:block}
  .map-wrapper iframe{min-height:260px}
  .header-inner{padding:8px 0}
  .nav{display:none}
}