/* ========================================================================== Theme: DARK TECH — deep navy, electric blue→cyan gradient, glass cards Activate with ========================================================================== */ :root, [data-theme="dark"] { --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --weight-display: 800; --tracking-display: -.03em; --bg: #070B14; --surface-0: #0A0F1C; --surface: rgb(255 255 255 / .04); --surface-2: rgb(255 255 255 / .07); --surface-accent: linear-gradient(135deg, #2563EB, #0891B2); --input-bg: #0D1425; --text: #C7D2E1; --heading: #F8FAFC; --muted: #8A9AB5; --link: #7DD3FC; --accent: #3B82F6; --accent-2: #22D3EE; --gradient: linear-gradient(90deg, #60A5FA, #22D3EE); --success: #34D399; --danger: #F87171; --star: #FBBF24; --border: rgb(255 255 255 / .08); --border-strong: rgb(255 255 255 / .16); --icon-bg: rgb(59 130 246 / .16); --radius: 18px; --radius-sm: 10px; --radius-lg: 26px; --radius-btn: 12px; --btn-bg: linear-gradient(90deg, #3B82F6, #22D3EE); --btn-text: #041019; --btn-shadow: 0 10px 30px -10px rgb(34 211 238 / .55); --btn-shadow-hover: 0 16px 40px -10px rgb(34 211 238 / .7); --card-shadow: none; --card-shadow-hover: 0 30px 60px -30px rgb(0 0 0 / .8); --header-bg: rgb(7 11 20 / .72); --hero-bg: radial-gradient(1200px 600px at 80% -10%, rgb(37 99 235 / .35), transparent 60%), radial-gradient(800px 500px at 10% 110%, rgb(34 211 238 / .18), transparent 60%), #070B14; --hero-overlay: url("../assets/img/grid.svg"); --cta-bg: linear-gradient(135deg, #1D4ED8 0%, #0E7490 100%); --footer-bg: #05080F; --footer-text: #8A9AB5; --footer-heading: #F8FAFC; color-scheme: dark; } [data-theme="dark"] .hero { color: var(--text); } [data-theme="dark"] .card { backdrop-filter: blur(8px); } [data-theme="dark"] .card:hover { background: rgb(255 255 255 / .06); } [data-theme="dark"] .hero::before { color: #fff; opacity: .6; } [data-theme="dark"] .page-hero::before { color: #fff; opacity: .5; }