html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* HERO SECTION */
.hero-bg {
    background-image: linear-gradient(rgba(10, 20, 50, 0.9), rgba(10, 17, 40, 1)), url('../global_img/hero-banner-image.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
}

.subtitle-text { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; color: #60a5fa; font-weight: 600; }
.hero-title { font-size: 2.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .hero-title { font-size: 4rem; } }

/* NAV & BUTTONS */
nav { transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
nav.nav-hidden { transform: translateY(-120%); }

.nav-pill { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s; }
.nav-link { padding: 0.5rem 1.25rem; font-size: 0.85rem; font-weight: 500; color: #94a3b8; transition: all 0.3s; }
.nav-link:hover { color: #60a5fa; }
.nav-link-active { background: #2563eb; color: white; border-radius: 9999px; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }

.btn-outline { padding: 0.5rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px; font-size: 0.85rem; transition: all 0.3s; color: white; cursor: pointer; }
.btn-outline:hover { background: white; color: #0a1128; transform: translateY(-2px); }

.btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; padding: 1rem 3rem; border-radius: 14px; font-weight: 700; transition: all 0.25s ease; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); cursor: pointer; display: inline-flex; align-items:center; justify-content:center; }
.btn-primary:hover { transform: scale(1.03); box-shadow: 0 15px 30px rgba(37, 99, 235, 0.35); }

/* ANIMATIONS */
.about-image-container { animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }

/* MODAL CUSTOM STYLES */
.modal-input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 0.75rem 1rem; color: white; transition: all 0.3s; }
.modal-input:focus { outline: none; border-color: #2563eb; background: rgba(255, 255, 255, 0.08); }

/* SERVICES CAROUSEL */
.services-carousel-wrapper { padding-top: 1rem; }
.services-viewport { }
.services-track { transition: transform 0.45s cubic-bezier(.22,.9,.15,1); }
.svc-card { min-width: 280px; max-width: 320px; background: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 35px rgba(2,6,23,0.08); border: 1px solid rgba(2,6,23,0.04); display:flex; flex-direction:column; }
.svc-card .svc-image { height:140px; background-size:cover; background-position:center; }
.svc-card .svc-body { padding:18px; display:flex; flex-direction:column; gap:8px; }
.svc-title { font-weight:700; color:#0f172a; font-size:1.125rem; }
.svc-desc { color:#475569; font-size:0.95rem; line-height:1.3; }
.svc-cta { display:inline-block; margin-top:8px; padding:8px 12px; background:linear-gradient(90deg,#6366f1,#06b6d4); color:white; border-radius:999px; text-decoration:none; font-weight:600; font-size:0.85rem; }
.svc-card.empty .svc-image { height:140px; display:flex; align-items:center; justify-content:center; }

.svc-arrow { background:transparent; border:0; font-size:26px; color:#0f172a; cursor:pointer; padding:8px; border-radius:8px; }
.svc-arrow:hover { background:rgba(15,23,42,0.06); }

@media (max-width: 768px) {
    .svc-card { min-width: 240px; }
}