*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --slate-950: #020617;
            --slate-900: #0F172A;
            --slate-800: #1E293B;
            --slate-700: #334155;
            --slate-600: #475569;
            --slate-500: #64748B;
            --slate-400: #94A3B8;
            --slate-300: #CBD5E1;
            --slate-200: #E2E8F0;
            --slate-100: #F1F5F9;
            --slate-50:  #F8FAFC;

            --teal-800: #115E59;
            --teal-700: #0F766E;
            --teal-600: #0D9488;
            --teal-500: #14B8A6;
            --teal-400: #2DD4BF;
            --teal-200: #99F6E4;
            --teal-100: #CCFBF1;
            --teal-50:  #F0FDFA;

            --warm-50:  #FAF9F7;
            --warm-100: #F5F3EF;
            --warm-200: #EAE6DF;

            --amber-700: #B45309;
            --amber-600: #D97706;
            --amber-100: #FEF3C7;
            --amber-50: #FFFBEB;

            --red-600: #DC2626;
            --red-100: #FEE2E2;
            --red-50: #FEF2F2;

            --navy: #0D1B2A;

            --font: 'DM Sans', system-ui, sans-serif;
            --mono: 'DM Mono', ui-monospace, monospace;
            --measure: 768px;
        }

        html { scroll-behavior: smooth; overflow-x: clip; }
        body {
            font-family: var(--font);
            color: var(--page-color, var(--slate-900));
            background: var(--page-bg, #fff);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }
        a { text-decoration: none; color: inherit; }
        button { font-family: inherit; }
        ::selection { background: var(--teal-100); color: var(--teal-800); }
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-thumb {
            background: var(--slate-300);
            border-radius: 5px;
            border: 2px solid var(--page-bg, #fff);
        }
        ::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

        /* NAV */
        nav.site-nav {
            position: sticky; top: 0; z-index: 100;
            background: var(--site-nav-bg, rgba(255,255,255,0.92));
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--slate-200);
            padding: var(--site-nav-padding, 0 40px);
            height: 60px;
            width: 100%;
            display: flex; align-items: center; justify-content: space-between;
            gap: var(--site-nav-gap, 16px);
            transition: box-shadow .2s;
        }
        .nav-logo {
            display: flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
            color: var(--slate-900);
            min-width: 0;
            flex-shrink: 0;
        }
        .nav-links { display: flex; align-items: center; gap: var(--nav-links-gap, 32px); }
        .nav-links a {
            font-size: 14px; font-weight: 500; color: var(--slate-600);
            transition: color .15s;
        }
        .nav-links a:hover { color: var(--nav-link-hover, var(--slate-900)); }
        .nav-links a.active { color: var(--slate-900); font-weight: 600; }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .btn-ghost {
            padding: 7px 16px; font-size: 13.5px; font-weight: 500;
            border: 1px solid var(--slate-200); border-radius: 8px;
            background: transparent; color: var(--slate-700);
            cursor: pointer; transition: border-color .15s, background .15s;
        }
        .btn-ghost:hover { border-color: var(--slate-300); background: var(--slate-50); }
        .btn-primary {
            padding: 7px 18px; font-size: 13.5px; font-weight: 600;
            border: none; border-radius: 8px;
            background: var(--teal-600); color: #fff;
            cursor: pointer; transition: background .15s, transform .1s;
        }
        .btn-primary:hover { background: var(--teal-700); }
        .btn-primary:active { transform: scale(0.98); }

        /* FOOTER */
        footer {
            background: var(--slate-950);
            padding: var(--footer-padding, 56px 40px 28px);
            color: rgba(255,255,255,.5);
        }
        .footer-inner { max-width: var(--footer-inner-max, 1200px); margin: 0 auto; }
        .footer-top {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: var(--footer-top-gap, 48px);
            margin-bottom: var(--footer-top-margin, 48px);
        }
        .footer-logo {
            display: flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 16px;
            color: #fff; letter-spacing: -0.02em;
            margin-bottom: 12px;
        }
        .footer-logo img { width: 22px; height: 22px; display: block; }
        .footer-tagline {
            font-size: 13px; color: rgba(255,255,255,.45);
            line-height: 1.6; max-width: var(--footer-tagline-max, 280px);
            margin-bottom: 16px;
        }
        .footer-contact {
            font-size: 13px; color: rgba(255,255,255,.55);
            line-height: 1.7;
        }
        .footer-contact a { color: rgba(255,255,255,.7); }
        .footer-contact a:hover { color: #fff; }
        .footer-social {
          display: flex; gap: 10px; margin-top: 16px;
        }
        .footer-social a {
          width: 34px; height: 34px; border-radius: 8px;
          display: flex; align-items: center; justify-content: center;
          border: 1px solid rgba(255,255,255,.12);
          color: rgba(255,255,255,.6);
          transition: color .15s, border-color .15s, background .15s;
        }
        .footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }
        .footer-col h4 {
            font-size: 12px; font-weight: 600;
            letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--footer-heading-color, rgba(255,255,255,.65));
            margin-bottom: 14px;
        }
        .footer-col ul {
            list-style: none;
            display: flex; flex-direction: column; gap: 9px;
        }
        .footer-col li a {
            font-size: 13.5px; color: rgba(255,255,255,.45);
            transition: color .15s;
        }
        .footer-col li a:hover { color: rgba(255,255,255,.85); }
        .footer-divider {
            height: 1px;
            background: rgba(255,255,255,.07);
            margin-bottom: 22px;
        }
        .footer-bottom {
            display: flex; align-items: flex-start;
            justify-content: space-between;
            font-size: 12px;
            color: rgba(255,255,255,.35);
            flex-wrap: wrap; gap: 16px;
        }
        .footer-bottom .footer-legal {
            max-width: var(--footer-legal-max, 560px); line-height: 1.6;
        }
        .footer-bottom .footer-bottom-links {
            display: flex; gap: 20px;
        }
        .footer-bottom-links a {
            color: rgba(255,255,255,.35);
            transition: color .15s;
        }
        .footer-bottom-links a:hover { color: rgba(255,255,255,.7); }

        @media (max-width: 1024px) {
            .footer-top {
                grid-template-columns: 1fr 1fr;
                gap: var(--footer-tablet-gap, 36px);
            }
        }

        @media (max-width: 768px) {
            .footer-top {
                gap: var(--footer-mobile-gap, 28px);
                margin-bottom: var(--footer-mobile-top-margin, 32px);
            }
            .footer-tagline { max-width: 100%; }
            footer { padding: var(--footer-mobile-padding, 44px 20px 24px); }
            .footer-bottom {
                flex-direction: column;
                gap: 12px;
            }
            .footer-bottom .footer-legal { max-width: 100%; }
        }

        @media (max-width: 480px) {
            .footer-top {
                grid-template-columns: 1fr;
                gap: var(--footer-phone-gap, 28px);
            }
            .footer-bottom-links { gap: 14px; }
        }