/* ============================================================================
   PRO PICKS — GLOBAL CSS
   Mobile-first. Loaded on every page.
   Breakpoints:  base < 640px (tablet) < 900px (desktop) < 1200px (wide)
   ============================================================================ */


/* ============================================================================
   BLOCK 1 — BRAND TOKENS
   Change a value here, it updates across the entire site.
   ============================================================================ */
:root {

    /* ----- PRIMARY BACKGROUNDS (dark identity) ----- */
    --bg-navy-deep:     #050b1d;   /* deepest navy */
    --bg-navy-blend:    #0e2f4f;   /* mid navy */
    --bg-teal-accent:   #0b3b42;   /* teal accent (hero gradient top) */

    /* ----- PRIMARY BRAND / ACCENT ----- */
    --brand-green:      #22c55e;   /* primary CTA / headlines / checkmarks */
    --brand-green-ink:  #022c22;   /* dark text ON green buttons */

    /* ----- TEXT ----- */
    --text-primary:     #eaf0f6;   /* default on dark backgrounds */
    --text-secondary:   rgba(255,255,255,0.9);
    --text-dark:        #020617;   /* default on light backgrounds */
    --text-muted:       #6b7280;

    /* ----- GLASS / OVERLAY UI ----- */
    --glass-bg:         rgba(255,255,255,0.07);
    --glass-border:     rgba(255,255,255,0.18);
    --grid-line:        rgba(255,255,255,0.035);

    /* ----- LIGHT SECTIONS ----- */
    --bg-light:         #f8fafc;
    --bg-card:          #ffffff;

    /* ----- CTA / FOOTER DARK ----- */
    --bg-cta-dark:      #020617;

    /* ----- BORDERS ----- */
    --border-light:     #e8edf3;
    --border-dark:      #0c3b5c;

    /* ----- RADIUS ----- */
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        18px;

    /* ----- SHADOW ----- */
    --shadow-card:      0 2px 8px rgba(0,0,0,0.05);
    --shadow-hover:     0 6px 20px rgba(0,0,0,0.10);
    --shadow-strong:    0 4px 16px rgba(10,44,94,0.12);

    /* ----- SITE WIDTH ----- */
    --site-max:         1200px;
}


/* ============================================================================
   BLOCK 2 — RESET
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    line-height: 1.5;
    color: var(--text-dark);
    background: var(--bg-card);
}

body {
    padding-top: 66px;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

/* ============================================================================
   BLOCK 3 — LAYOUT PRIMITIVES
   .container  — centered, always max 1200px
   .section    — standard vertical spacing
   .section-light / .section-dark — background variants
   ============================================================================ */
.container {
    width: 100%;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 16px;
}

.section        { padding: 48px 0; }
.section-sm     { padding: 28px 0; }
.section-lg     { padding: 72px 0; }

.section-light  { background: var(--bg-light);    color: var(--text-dark); }
.section-dark   { background: var(--bg-cta-dark); color: var(--text-primary); }
.section-navy   { background: var(--bg-navy-deep); color: var(--text-primary); }

/* Hero-style gradient used for landing sections */
.section-hero {
    background: linear-gradient(...);
    color: var(--text-primary);
    position: relative;
}
    
}

.section-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

.section-hero > .container { position: relative; z-index: 1; }


/* ============================================================================
   BLOCK 4 — RESPONSIVE GRIDS
   Stack on mobile, N columns on desktop
   ============================================================================ */
.grid-2, .grid-3, .grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}


/* ============================================================================
   BLOCK 5 — TYPOGRAPHY (MOBILE BASE)
   ============================================================================ */
h1 { font-size: 30px; line-height: 1.2;  font-weight: 800; margin: 0 0 16px; }
h2 { font-size: 24px; line-height: 1.25; font-weight: 800; margin: 0 0 14px; }
h3 { font-size: 20px; line-height: 1.3;  font-weight: 700; margin: 0 0 12px; }
h4 { font-size: 17px; line-height: 1.3;  font-weight: 700; margin: 0 0 10px; }
p  { margin: 0 0 16px; }

.text-accent   { color: var(--brand-green); }
.text-muted    { color: var(--text-muted); }
.text-light    { color: var(--text-primary); }
.text-center   { text-align: center; }


/* ============================================================================
   BLOCK 6 — BUTTONS
   ============================================================================ */
.btn {
    display: inline-block;
    padding: 13px 22px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    line-height: 1.2;
}
.btn:hover       { transform: translateY(-1px); }
.btn:active      { transform: translateY(0); }
.btn:disabled    { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary     { background: var(--brand-green); color: var(--brand-green-ink); }
.btn-secondary   { background: transparent; border: 1px solid var(--glass-border); color: var(--text-primary); }
.btn-dark        { background: var(--bg-navy-deep); color: var(--text-primary); }


/* ============================================================================
   BLOCK 7 — GLASS PANEL (reusable)
   Frosted-glass card used in hero "Why" panels, etc.
   ============================================================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 26px;
    color: var(--text-primary);
}


/* ============================================================================
   BLOCK 8 — LIGHT CARD (reusable)
   Standard content card used on light backgrounds
   ============================================================================ */
.card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}


/* ============================================================================
   BLOCK 9 — ANIMATIONS (opt-in)
   Add .animate-fade to any element to fade-in-up on load
   ============================================================================ */
.animate-fade { animation: fadeUp 0.9s ease-out both; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   BLOCK 10 — TABLET BREAKPOINT (≥ 640px)
   ============================================================================ */
@media (min-width: 640px) {

    .container      { padding: 0 24px; }

    .section        { padding: 64px 0; }
    .section-sm     { padding: 40px 0; }
    .section-lg     { padding: 96px 0; }

    h1 { font-size: 38px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .card { padding: 28px; }
    .glass { padding: 32px; }
}


/* ============================================================================
   BLOCK 11 — DESKTOP BREAKPOINT (≥ 900px)
   ============================================================================ */
@media (min-width: 900px) {

    .container      { padding: 0 32px; }

    .section        { padding: 80px 0; }
    .section-sm     { padding: 48px 0; }
    .section-lg     { padding: 110px 0; }

    h1 { font-size: 52px; }
    h2 { font-size: 36px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }

    .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }

    .btn   { padding: 14px 26px; font-size: 16px; }
    .card  { padding: 34px; }
    .glass { padding: 36px; }
}


/* ============================================================================
   BLOCK 12 — WIDE BREAKPOINT (≥ 1200px)
   ============================================================================ */
@media (min-width: 1200px) {
    h1 { font-size: 56px; }
    h2 { font-size: 40px; }
}