/* =========================================
   0. FONTS (Fully Localized)
   ========================================= */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-v20-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-v20-latin-800.woff2') format('woff2'); }

/* =========================================
   1. VARIABLES & GLOBAL RESET
   ========================================= */
:root {
    /* Brand Colors */
    --primary-blue: #2563EB; 
    --primary-dark: #111827; 
    --text-grey: #6B7280;
    --bg-light: #F9FAFB;
    
    /* Trust Theme Variables (Consolidated) */
    --trust-blue: #0f4c81;       
    --secure-slate: #0f172a;     
    --accessible-light: #f8fafc; 
    --tech-accent: #38bdf8;      
    
    /* Typography & Gradients */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --gradient-brand: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    --gradient-cyan: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);
}

body { 
    font-family: var(--font-main); 
    background-color: var(--bg-light); 
    color: var(--primary-dark); 
    overflow-x: hidden; 
}
html { scroll-behavior: smooth; }

/* =========================================
   2. TYPOGRAPHY & BUTTON UTILITIES
   ========================================= */
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
.text-gradient-hero { background: linear-gradient(to right, #E0F2FE, #DCFCE7, #F1F5F9); background-size: 200% auto; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; letter-spacing: -1px; animation: textShine 6s linear infinite; }
@keyframes textShine { to { background-position: 200% center; } }

.btn-hero1 { background: linear-gradient(135deg, #0d6efd 0%, #084298 100%); color: white !important; border: 1px solid transparent; box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25); transition: all 0.3s ease; }
.btn-hero1:hover { box-shadow: 0 6px 15px rgba(13, 110, 253, 0.4); transform: translateY(-2px); }

.btn-primary { background-color: var(--primary-blue) !important; border-color: var(--primary-blue) !important; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; }
.btn-primary:hover { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4) !important; }
.text-primary { color: var(--primary-blue) !important; }

/* =========================================
   3. SHARED GLOBAL COMPONENTS
   ========================================= */
.trust-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }

.hero-grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; z-index: 1; }
.hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(15, 76, 129, 0.5) 0%, transparent 70%); z-index: 0; pointer-events: none; }

.trust-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 2.5rem; height: 100%; display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 6px rgba(0,0,0,0.02); position: relative; overflow: hidden; z-index: 2;}
.trust-card:hover { border-color: var(--trust-blue); box-shadow: 0 15px 35px rgba(15, 76, 129, 0.08); transform: translateY(-5px); }
.trust-card.dark { background: var(--secure-slate); border-color: #334155; color: white; }
.trust-card.dark:hover { border-color: var(--tech-accent); box-shadow: 0 15px 35px rgba(56, 189, 248, 0.1); }