/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#f4f7fb;color:#111;line-height:1.5;transition:background .3s color .3s}
a{color:inherit;text-decoration:none}

/* NAVBAR */
.navbar{position:fixed;left:0;top:0;width:100%;z-index:1200;background:rgba(255,255,255,0.62);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,0.04);transition:transform .28s ease, background .3s; }
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:10px 18px}
.nav-left{display:flex;align-items:center;gap:12px}
.nav-right{display:flex;align-items:center}
.icon-btn{background:none;border:0;font-size:18px;cursor:pointer;padding:8px;border-radius:8px;color:inherit}
.brand{display:flex;align-items:center;gap:8px;font-weight:700; font-size:1.1rem}
.brand-icon{color:#0066ff}

/* Side menu */
.side-menu{position:fixed;left:-320px;top:0;height:100%;width:320px;background:#fff;padding:20px;z-index:1300;transition:left .28s ease,box-shadow .28s}
.side-menu.open{left:0}
.side-top{display:flex;align-items:center;justify-content:space-between}
.side-menu ul{list-style:none;margin-top:18px}
.side-menu li{padding:10px 6px;border-radius:8px}
.side-menu li:hover{background:#f1f5ff}
.side-menu a{display:block;padding:8px;border-radius:6px}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.28);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:1250}
.overlay.active{opacity:1;pointer-events:auto}

/* Hero */
.hero{height:100vh;display:flex;align-items:center;justify-content:center;padding:0 20px;text-align:center;background:linear-gradient(120deg,#0066ff 0%, #00c6ff 100%);color:#fff}
.hero h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:12px}
.hero p{font-size:1.05rem;opacity:.95;max-width:900px}

/* sections */
section{padding:64px 20px}
.container{max-width:1100px;margin:0 auto}

/* ABOUT */
.about h2{font-size:1.6rem;margin-bottom:12px}
.about p{color:#4b5563}

/* services grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:18px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(5,12,30,0.06);transition:transform .16s}
.card:hover{transform:translateY(-8px)}
.card img{width:100%;height:170px;object-fit:cover;display:block}
.card-body{padding:14px}
.card-body h3{font-size:1.05rem;margin-bottom:6px}
.card-body p{font-size:.95rem;color:#374151;margin-bottom:10px}
.price-toggle{display:inline-block;background:#0f62ff;color:#fff;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.price-list{display:none;margin-top:10px;padding:12px;border-radius:8px;background:#f7f9fc;color:#0f172a}

/* CONTACT */
.contact .form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
input[type="text"],input[type="email"],textarea{padding:12px;border-radius:8px;border:1px solid #d1d5db;font-size:0.95rem}
button.submit{background:#0070ff;color:#fff;padding:12px;border-radius:10px;border:0;font-weight:700;cursor:pointer}

/* POPUP */
.popup{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:1600}
.popup-inner{background:#fff;border-radius:10px;padding:14px 18px;box-shadow:0 8px 30px rgba(2,6,23,0.12);min-width:260px;max-width:90vw;display:flex;align-items:center;gap:12px}
.popup-close{background:none;border:0;font-size:20px;cursor:pointer;margin-left:auto}
.popup-success{color:#0a7b1f;font-weight:700}
.popup-fail{color:#b72121;font-weight:700}

/* FOOTER (bigger + different color) */
.site-footer{background:#07122a;color:#cfe7ff;padding:42px 20px 18px}
.footer-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between;max-width:1100px;margin:0 auto}
.footer-brand{display:flex;gap:14px;align-items:flex-start;max-width:420px}
.footer-brand h3{margin:0}
.footer-links ul{list-style:none}
.footer-links li{margin:8px 0}
.footer-social .social-icons{display:flex;gap:10px;margin-top:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.05);padding-top:12px;margin-top:18px;text-align:center;color:rgba(255,255,255,0.7)}

/* dark mode */
.dark-mode{background:#020417;color:#e6eef8}
.dark-mode .navbar{background:rgba(2,4,9,0.6)}
.dark-mode .side-menu{background:#021028;color:#dbeafe}
.dark-mode .card{background:#071226;color:#cfe7ff;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.dark-mode .price-list{background:#021028;color:#cfe7ff}
.dark-mode input, .dark-mode textarea{background:#071226;border:1px solid #0b2340;color:#cfe7ff}

/* SCROLL-TO-TOP */
.scroll-top-wrap{position:fixed;right:20px;bottom:20px;z-index:1400;display:flex;align-items:center;justify-content:center}
.scroll-top{width:56px;height:56px;border-radius:50%;background:transparent;border:0;cursor:pointer;padding:6px;display:grid;place-items:center;position:relative;box-shadow:0 8px 20px rgba(2,6,23,0.12);transition:transform .18s ease,box-shadow .18s;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,255,0.85))}
.scroll-icon{font-size:18px;color:#0033cc;font-weight:700;pointer-events:none}
.progress-ring{position:absolute;left:0;top:0;width:56px;height:56px;transform:rotate(-90deg);pointer-events:none}

/* responsive */
@media (max-width:720px){
  .footer-inner{flex-direction:column;align-items:flex-start}
  .side-menu{width:100%;left:-100%}
  .side-menu.open{left:0}
}
@keyframes animatedTextGradient{to{background-position:-200% center;}}