:root{
--bg-0: #f5f7fb;
--blue-400: #5b7dff;
--blue-500: #3858e9;
--border: #0a0e1c1a;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--font-head: "Outfit", system-ui, sans-serif;
--surface: #ffffffdb;
--text-0: #0b1229;
--text-1: #3c4560;
}
.wrap{width:min(1120px,92%);margin-inline:auto}
.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}
.site-header{inset-inline:0;z-index:50;transition:background .3s var(--ease-out), padding .3s var(--ease-out), border-color .3s var(--ease-out);border-bottom:1px solid #0000;padding:20px 0;position:fixed;top:0}
.site-header.is-scrolled{border-color:var(--border);background:#ffffffc7;padding:12px 0}
.header-inner{align-items:center;gap:20px;display:flex}
.brand{align-items:center;gap:10px;margin-right:auto;text-decoration:none;display:flex}
.header-contact{align-items:center;gap:8px;display:flex}
.header-contact__btn{width:40px;height:40px;color:var(--blue-500);background:var(--surface);border:1px solid var(--border);transition:color .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);border-radius:50%;place-items:center;display:inline-grid}
.header-contact__btn svg{width:19px;height:19px;display:block}
.header-contact__btn:hover{border-color:var(--blue-400);background:#3858e914;transform:translateY(-1px)}
.header-contact__btn--wa:hover{color:#25d366;background:#25d3661a;border-color:#25d366}
.brand-mark{width:auto;height:30px;display:block}
.brand-name{font-family:var(--font-head);color:var(--text-0);letter-spacing:-.01em;font-weight:600}
.primary-nav{gap:32px;display:flex}
.primary-nav a{color:var(--text-1);font-size:.95rem;text-decoration:none;transition:color .2s;position:relative}
.primary-nav a:after{content:"";background:var(--blue-500);width:0;height:1px;transition:width .25s var(--ease-out);position:absolute;bottom:-6px;left:0}
.primary-nav a:hover{color:var(--text-0)}
.primary-nav a:hover:after{width:100%}
.menu-toggle{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;display:none}
.menu-toggle__line{background:var(--text-0);width:18px;height:1.5px;transition:transform .3s var(--ease-out), opacity .3s var(--ease-out)}
.menu-toggle[aria-expanded=true] .menu-toggle__line:first-child{transform:translateY(3.75px)rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-toggle__line:nth-child(2){transform:translateY(-3.75px)rotate(-45deg)}
.mobile-nav{z-index:40;background:linear-gradient(180deg, #eef2fa 0%, var(--bg-0) 62%);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0;transform:translateY(-8px)}
.mobile-nav.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.mobile-nav a{font-family:var(--font-head);color:var(--text-0);transition:color .2s var(--ease-out), background .2s var(--ease-out);border-radius:12px;padding:10px 22px;font-size:1.7rem;font-weight:600;text-decoration:none}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--blue-500);background:#3858e912}
.mobile-nav .mobile-nav__cta{color:#fff;background:var(--blue-500);margin-top:14px;padding:15px 30px;font-size:1.05rem}
.mobile-nav .mobile-nav__cta:hover{color:#fff;background:var(--blue-400)}
@media (width<=860px){.primary-nav{display:none}.menu-toggle{display:flex}}