@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root { --navy:#0c2946; --blue:#1572c4; --sky:#eaf5ff; --ink:#172535; --muted:#617184; --line:#dfe9f1; --orange:#f6a21a; }
* { box-sizing:border-box; }
body { font-family:Manrope,Arial,sans-serif; color:var(--ink); background:#f8fbfd !important; }
h1,h2,h3,h4,h5,.navbar-brand { font-family:'Plus Jakarta Sans',Arial,sans-serif; }
.site-nav { background:rgba(255,255,255,.96); border-bottom:1px solid rgba(12,41,70,.08); box-shadow:0 5px 22px rgba(12,41,70,.06); }
.brand-logo { width:45px; height:45px; border-radius:12px; object-fit:cover; background:#fff; padding:3px; box-shadow:0 3px 10px rgba(12,41,70,.12); }
.site-nav .navbar-brand { color:var(--navy); font-size:.88rem; letter-spacing:.02em; }
.site-nav .nav-link { color:#405365; font-size:.9rem; font-weight:700; padding:.7rem .9rem !important; }
.site-nav .nav-link:hover,.site-nav .nav-link.active { color:var(--blue); }
.nav-contact { background:var(--navy); color:#fff !important; border-radius:9px; margin-left:.45rem; padding:.7rem 1rem !important; }
.nav-contact:hover { background:var(--blue); color:#fff !important; }
.hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(120deg,rgba(7,31,54,.96),rgba(14,79,134,.9)),url('../img/projects/proyek-a/1.jpg') center/cover; padding:7.5rem 0 8rem; }
.hero::after { content:''; position:absolute; width:520px; height:520px; border-radius:50%; right:-190px; top:-300px; background:rgba(89,182,255,.14); border:1px solid rgba(255,255,255,.18); }
.hero .container { position:relative; z-index:1; }
.eyebrow { color:#94d3ff; text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:800; }
.hero h1 { max-width:760px; font-size:clamp(2.3rem,5vw,4.4rem); line-height:1.1; }
.hero .lead { max-width:600px; color:#d8edff; font-size:1.15rem; }
.btn-brand { background:var(--orange); border-color:var(--orange); color:#1d2935; font-weight:800; padding:.8rem 1.25rem; }
.btn-brand:hover { background:#ffb633; border-color:#ffb633; color:#1d2935; }
.section-kicker { color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; }
.section-title { color:var(--navy); font-size:clamp(1.7rem,3vw,2.4rem); }
.service-card { border:1px solid var(--line) !important; border-radius:18px !important; box-shadow:none !important; padding:2rem !important; text-align:left; background:#fff; }
.service-card::before { content:'↗'; display:grid; place-items:center; width:46px; height:46px; border-radius:13px; color:var(--blue); background:var(--sky); font-size:1.4rem; font-weight:800; margin-bottom:1.15rem; }
.service-card:hover { border-color:#a8d5f7 !important; box-shadow:0 14px 32px rgba(13,72,118,.10) !important; }
.project-section { background:linear-gradient(180deg,#edf7ff,#f8fbfd) !important; }
.project-wrapper { border:1px solid var(--line); box-shadow:0 14px 40px rgba(12,41,70,.08) !important; }
.project-tabs .nav-link.active { background:var(--blue) !important; }
.client-logo-card { height:180px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:24px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:none !important; }
.client-logo-card img { display:block; width:auto !important; height:auto !important; max-width:88% !important; max-height:110px !important; object-fit:contain; }
.site-footer { background:var(--navy); color:#c8d7e4; margin-top:0 !important; }
.footer-brand { color:#fff; font-weight:800; font-size:1.05rem; }
.site-footer small { color:#9ab0c2; }
.social-links { display:flex; gap:.65rem; justify-content:flex-end; }
.social-link { width:38px; height:38px; border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:50%; display:grid; place-items:center; transition:.2s ease; }
.social-link:hover { color:var(--navy); background:#fff; transform:translateY(-3px); }
.social-link svg { width:18px; height:18px; fill:currentColor; }
.whatsapp-floating { position:fixed; bottom:22px; right:22px; z-index:1000; background:#25d366; border-radius:50%; padding:10px; box-shadow:0 8px 22px rgba(10,70,39,.3); transition:.2s ease; }
.whatsapp-floating img { width:42px; height:42px; display:block; }
.whatsapp-floating:hover { transform:scale(1.08); background:#20ba5a; }
.social-floating { position:fixed; right:22px; bottom:94px; z-index:999; display:flex; flex-direction:column; gap:10px; }
.social-floating a { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; text-decoration:none; box-shadow:0 6px 16px rgba(12,41,70,.22); transition:transform .2s ease; font-size:20px; }
.social-floating a:hover { color:#fff; transform:translateX(-4px) scale(1.07); }
.instagram { background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }.facebook { background:#1877f2; }.linkedin { background:#0a66c2; }.tiktok { background:#111; }
.page-intro { padding:4.75rem 0 3.25rem; background:linear-gradient(120deg,#e7f4ff,#fff); border-bottom:1px solid var(--line); }
.page-intro h1 { color:var(--navy); }
.content-card { border:1px solid var(--line) !important; border-radius:18px !important; box-shadow:0 10px 28px rgba(12,41,70,.06) !important; }
@media (max-width:991px) { .nav-contact { margin:.5rem 0 0; display:inline-block; } }
@media (max-width:767px) { .hero { padding:5.5rem 0 6rem; } .social-links { justify-content:flex-start; margin-top:1.5rem; } .whatsapp-floating { bottom:16px; right:16px; } }