:root {
    /* Palette */
    --primary: #0052FF;
    --primary-dark: #0046D9;
    --accent-cyan: #10B981;
    --bg-body: #F9FAFB;
    --bg-card: #FFFFFF;
    --text-dark: #111827;
    --text-muted: #70747D;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --success-bg: #ECFDF5;
    --warning-bg: #FFFBEB;
    --error-bg: #FDE8E8;
    --error-dark: #991B1B;
    --primary-bg: #F2F6FF;
    --primary-blue: #3B82F6;
    --primary-border: rgba(0, 82, 255, 0.15);

    /* Borders */
    --sculpt-border: rgba(255, 255, 255, 0.5);
    --border-subtle: rgba(17, 24, 39, 0.06);
    --border-faint: rgba(17, 24, 39, 0.04);

    /* Shadows */
    --shadow-primary-sm: 0 6px 16px rgba(0, 82, 255, 0.2);
    --shadow-primary-md: 0 10px 24px rgba(0, 82, 255, 0.3);
    --shadow-hover: 0 20px 40px rgba(0, 82, 255, 0.08);
    --focus-ring: 0 0 0 3px rgba(0, 82, 255, 0.1);

    /* State layers */
    --state-hover: rgba(0, 82, 255, 0.08);
    --state-pressed: rgba(0, 82, 255, 0.12);
    --state-focus: rgba(0, 82, 255, 0.12);

    /* Extra */
    --logo-dark: #003199;
    --star-hover: #FBBF24;
    --star-empty: #E2E8F0;
    --muted-light: #CBD5E1;
    --sculpt-shadow: 0 15px 35px rgba(0, 82, 255, 0.08), 0 5px 15px rgba(0, 0, 0, 0.03);
    --sculpt-inner: inset 1px 1px 2px rgba(255, 255, 255, 0.9), inset -1px -1px 3px rgba(0, 0, 0, 0.02);
    --sculpt-input: inset 2px 2px 5px rgba(0, 0, 0, 0.04), inset -2px -2px 5px rgba(255, 255, 255, 1);
    --radius-xl: 32px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --radius-pill: 50px;

    /* Typography */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
    --font-h1-size: clamp(28px, 5vw, 48px);
    --font-h1-weight: 900;
    --font-h1-tracking: -1.5px;
    --font-h1-leading: 1.1;
    --font-h2-size: clamp(20px, 3vw, 24px);
    --font-h2-weight: 900;
    --font-h2-tracking: -0.5px;
    --font-h2-leading: 1.2;
    --font-h3-size: clamp(16px, 2.2vw, 18px);
    --font-h3-weight: 800;
    --font-h3-tracking: 0;
    --font-h3-leading: 1.3;
    --font-body-size: clamp(14px, 1.5vw, 15px);
    --font-body-weight: 400;
    --font-body-leading: 1.7;
    --font-small-size: 13px;
    --font-small-weight: 500;
    --font-small-leading: 1.5;
    --font-label-size: 11px;
    --font-label-weight: 800;
    --font-label-tracking: 0.5px;
    --font-label-leading: 1.4;
    --font-label-transform: uppercase;

    /* Responsive */
    --spacing-page: clamp(16px, 3vw, 40px);
    --card-padding: clamp(16px, 2.5vw, 32px);
    --touch-min: 44px;
    --touch-comfortable: 48px;

    /* Layout */
    --header-height: 72px;
    --sidebar-width: 260px;

    /* Spacing (8px grid) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;
    --container-max: 1200px;
    --section-gap: 32px;

    /* Motion */
    --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

@supports (color: color-mix(in oklch, red, blue)) {
    :root {
        --primary-dark: color-mix(in oklch, var(--primary), black 15%);
        --state-hover: color-mix(in srgb, var(--primary), transparent 92%);
        --state-pressed: color-mix(in srgb, var(--primary), transparent 88%);
        --state-focus: color-mix(in srgb, var(--primary), transparent 88%);
    }
}

.sculpt-card {
    box-shadow: var(--sculpt-shadow), var(--sculpt-inner);
    border: 1px solid var(--sculpt-border);
}

.hero {
    background: linear-gradient(135deg, #F2F6FF, var(--bg-body));
}

.hero::before {
    content: '';
    position: absolute;
    right: -100px;
    top: -50px;
    width: 300px;
    height: 300px;
    background: #E7F8F2;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 600px) {
    .hero::before { display: none; }
}

.section-separator {
    border-top: 1px solid var(--border-subtle);
}

@media (hover: hover) {
    .offer-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--primary-border);
    }
    .btn-cta:hover { transform: translateY(-2px); }
}
@media (hover: none) {
    .offer-card:active { transform: scale(0.98); }
    .btn-cta:active { transform: scale(0.95); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 82, 255, 0.12); }
    50% { box-shadow: 0 0 0 8px transparent; }
}
.btn-cta {
    animation: pulse-glow 2s ease-in-out 3;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* iOS Safari fixes */
input, select, textarea { font-size: max(16px, var(--font-body-size)); }
a, button, .offer-card { touch-action: manipulation; }
body { overscroll-behavior: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }