/* ==========================================================================
   SendorX — base.css
   Global chrome loaded on EVERY page: design tokens, reset, container, the
   top nav, the footer and the shared button component. Nothing page-specific
   lives here. Each page loads its own scoped sheet from assets/css/pages/<slug>.css
   (selectors prefixed with `.page-<slug>`) so a change on one page can never
   affect another.
   ========================================================================== */

:root {
    --navy:        #0b1726;
    --navy-2:      #0f1f33;
    --navy-deep:   #07111c;
    --orange:      #f97316;
    --orange-soft: #ffe6d4;
    --orange-dark: #ea580c;
    --blue:        #2563eb;
    --blue-dark:   #1d4ed8;
    --green:       #15734a;
    --green-soft:  #d6f0e1;
    --ink:         #0f172a;
    --ink-soft:    #475569;
    --muted:       #64748b;
    --line:        #e5e7eb;
    --bg:          #f5f7fa;
    --card:        #ffffff;
    --radius:      14px;
    --radius-lg:   22px;
    --shadow-sm:   0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow:      0 10px 30px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
    --shadow-lg:   0 30px 60px rgba(15,23,42,.18), 0 8px 20px rgba(15,23,42,.10);
    --maxw:        1440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;     /* allow hero image to bleed past the right edge without scrollbar */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ===== NAV (always white) ===== */
.site-nav {
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    z-index: 50;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { height: 32px; width: auto; display: block; }
.brand--footer .brand-logo { height: 28px; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-weight: 500; font-size: 15px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links .nav-cta {
    background: var(--orange);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    transition: background .2s;
}
.nav-links .nav-cta:hover { background: var(--orange-dark); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* ===== BUTTONS (shared component) ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    border: 0; cursor: pointer;
    transition: transform .15s ease, background .2s, box-shadow .2s;
    text-decoration: none;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(249,115,22,.35); }
.btn--primary:hover { background: var(--orange-dark); }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.30); }
.btn--blue:hover { background: var(--blue-dark); }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--block { width: 100%; }
.btn .arrow { width: 16px; height: 16px; }

/* ===== FOOTER ===== */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 60px 0 0; color: var(--ink-soft); }

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 4fr;
    gap: 64px;
    align-items: flex-start;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}
.footer-brand p { font-size: 14px; color: var(--muted); margin: 14px 0 18px; max-width: 320px; }
.footer-brand .brand--footer { color: var(--ink); }
.socials { display: flex; gap: 10px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: var(--muted); transition: background .2s, color .2s; }
.socials a:hover { background: var(--ink); color: #fff; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 14px; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 4px 0; }
.footer-col a { font-size: 14px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--orange); }
.footer-bottom { margin-top: 50px; padding: 18px 0; background: var(--navy); color: rgba(255,255,255,.6); font-size: 13px; text-align: center; }
.footer-bottom .container { padding: 0 24px; }

/* ===== RESPONSIVE — footer ===== */
@media (max-width: 960px) {
    .footer-inner{
        display:flex;
        flex-direction:column;
        gap:50px;
    }
    .footer-links{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;
        width:100%;
    }
    .footer-col{ margin:0; }
    .footer-col h4{ font-size:14px; margin-bottom:14px; }
    .footer-col li{ margin-bottom:10px; }
    .footer-col a{ font-size:14px; }
}

/* ===== RESPONSIVE — mobile nav ===== */
@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--navy);
        flex-direction: column;
        gap: 0;
        padding: 12px 24px 20px;
        display: none;
    }
    .site-nav--light .nav-links { background: #fff; border-bottom: 1px solid var(--line); }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 10px 0; width: 100%; }
    .nav-links .nav-cta { margin-top: 8px; align-self: flex-start; }
    .footer-inner { margin-left: 20px; }
}