:root { /* Layout */ --gutter: 1rem; --max-width: 1200px; --bp-md: 700px; /* tablet breakpoint (max-width) */ --bp-sm: 400px; /* mobile breakpoint (max-width) */ /* Brand accent (same in both modes) */ --accent: #2dd4bf; /* ── Dark mode (default) ─────────────────────────────── */ --background: linear-gradient(180deg, #071027 0%, #071a2a 60%); --font-color: #ffffff; --muted: rgba(255,255,255,0.82); /* Cards / tiles / panels */ --card-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); --card-border: rgba(255,255,255,0.06); --card-shadow: rgba(2,6,23,0.6); /* Header */ --header-gradient: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); --nav-hover-bg: rgba(255,255,255,0.02); /* Footer */ --footer-gradient: linear-gradient(180deg, #071027, #071a2a); /* Form inputs */ --input-bg: rgba(255,255,255,0.02); --input-border: rgba(255,255,255,0.06); /* Mobile nav overlay */ --mobile-nav-bg: linear-gradient(180deg, rgba(2,6,23,0.9), rgba(2,6,23,0.95)); /* Send popup */ --send-popup-bg: rgba(2,6,23,0.95); } /* ── Light mode ──────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { --background: linear-gradient(180deg, #f0f4f8 0%, #e8f0f7 60%); --font-color: #0f172a; --muted: rgba(15,23,42,0.72); --card-bg: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55)); --card-border: rgba(0,0,0,0.08); --card-shadow: rgba(0,0,0,0.12); --header-gradient: linear-gradient(180deg, #dde6f0, #cfd9e8); --nav-hover-bg: rgba(0,0,0,0.04); --footer-gradient: linear-gradient(180deg, #dde6f0, #cfd9e8); --input-bg: rgba(0,0,0,0.03); --input-border: rgba(0,0,0,0.10); --mobile-nav-bg: linear-gradient(180deg, rgba(240,244,248,0.97), rgba(232,240,247,0.98)); --send-popup-bg: rgba(15,23,42,0.95); } } /* ── Scroll-reveal ───────────────────────────────────────── */ /* Only hide elements when JS is available (.js set by inline script in ) */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.45s ease, transform 0.45s ease; } .js [data-reveal].revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ── Sticky mobile CTA ───────────────────────────────────── */ .sticky-mobile-cta { display: none; /* JS + mobile media query will show it */ } @media (max-width: 720px) { .sticky-mobile-cta { display: block; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); z-index: 800; background: var(--accent, #2dd4bf); color: #022; font-weight: 800; font-size: 14px; padding: 13px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 24px color-mix(in srgb, var(--accent, #2dd4bf) 45%, transparent); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; } .sticky-mobile-cta.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } } /* ── Skip-to-content ────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 10px 16px; border-radius: 0 0 8px 8px; background: var(--accent, #2dd4bf); color: #022; font-weight: 800; font-size: 14px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus-visible { top: 0; } /* ── Logo switching ──────────────────────────────────────── */ .logo-light-mode { display: none; } .logo-dark-mode { display: inline; } @media (prefers-color-scheme: light) { .logo-light-mode { display: inline; } .logo-dark-mode { display: none; } }