:root {
    --orange: #f48019;
    --blue: #0096e0;
    --pink: #d22260;
    --green: #0dc56c;
    --yellow: #f5e936;
    --red: #ff4d4d;

    --bg: #f6f8fb;
    --text: #0b1020;
    --muted: #4a5270;
    --line: rgba(11, 16, 32, 0.14);
    --card: rgba(255, 255, 255, 0.7);

    --font-head: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;

    color-scheme: light dark;

    button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #090b14;
        --text: #f2f4fb;
        --muted: #a3abc8;
        --line: rgba(255, 255, 255, 0.16);
        --card: rgba(255, 255, 255, 0.06);
    }
}

/* Manual toggle nantar: <html data-theme="dark|light"> */

:root[data-theme="dark"] {
    --bg: #090b14;
    --text: #f2f4fb;
    --muted: #a3abc8;
    --line: rgba(255, 255, 255, 0.16);
    --card: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
    --bg: #f6f8fb;
    --text: #0b1020;
    --muted: #4a5270;
    --line: rgba(11, 16, 32, 0.14);
    --card: rgba(255, 255, 255, 0.7);
}


/* =====================================================
   GLOBAL RESET
===================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font: 400 1rem/1.6 var(--font-body);

    overflow-x: hidden;

    padding-bottom:
        calc(72px + env(safe-area-inset-bottom, 0px));
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}


/* =====================================================
   BUTTONS
===================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 1.4rem;

    border-radius: 999px;

    font: 700 0.95rem var(--font-body);
    text-decoration: none;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--orange);
    color: #0b1020;

    box-shadow: 0 8px 24px -8px var(--orange);
}

.btn-ghost {
    border: 1.5px solid var(--line);
    background: var(--card);

    backdrop-filter: blur(8px);
}

.btn-link {
    padding: 0 0.4rem;

    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--pink);
    text-decoration-thickness: 2px;
}


/* =====================================================
   MOBILE STICKY CTA
   Phone var sticky Call | WhatsApp
===================================================== */

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 50;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;

    padding:
        0.6rem
        0.8rem
        calc(0.6rem + env(safe-area-inset-bottom, 0px));

    background: var(--bg);
    border-top: 1px solid var(--line);
}

.sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    border-radius: 14px;

    font-weight: 700;
    text-decoration: none;
    font-family: "Space Grotesk";
}

.sc-call {
    border: 1.5px solid var(--line);
}

.sc-wa {
    background: var(--green);
    color: #06210f;
    
}


/* =====================================================
   TABLET / DESKTOP
===================================================== */

@media (min-width: 768px) {
    .sticky-cta {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}