/* ============================================================ CRITICAL CSS — inlined into for instant first paint. Covers: typography, topbar, hero shell, and a skeleton state so the page is usable in <100ms while the full styles.css loads. Keep under ~14KB (one TCP RTT). ============================================================ */ :root{ --bg:#0B1F3A; --ink:#f6e6c2; --gold:#B8935A; --gold-2:#D4B07A; --gold-3:#f1d597; --container-max:min(1480px, 92vw); --topbar-h:64px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } html[dir="rtl"]{ direction:rtl; } body{ margin:0; font-family:'Heebo','Frank Ruhl Libre',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-weight:400; line-height:1.5; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video,iframe{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; } /* Skeleton container so the layout doesn't jump while CSS loads */ .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; height:var(--topbar-h); padding:0 clamp(12px,2vw,24px); background:linear-gradient(180deg, rgba(11,31,58,.92), rgba(11,31,58,.78)); border-bottom:1px solid rgba(212,176,122,.25); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .brand-wrap{ display:flex; align-items:center; gap:10px; font-weight:700; } .hero{ position:relative; min-height: clamp(420px, 60vh, 720px); padding: clamp(24px, 4vh, 48px) clamp(16px, 4vw, 48px); background: radial-gradient(circle at 30% 20%, rgba(241,213,151,.15), transparent 55%), radial-gradient(circle at 80% 80%, rgba(212,176,122,.12), transparent 55%), linear-gradient(180deg, #0B1F3A, #14315b); } .hero-inner{ max-width:var(--container-max); margin-inline:auto; display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(20px, 3vw, 40px); align-items:start; } @media (max-width: 980px){ .hero-inner{ grid-template-columns:1fr; } } h1{ font-family:'Frank Ruhl Libre','Heebo',serif; font-size: clamp(32px, 5vw, 56px); line-height:1.05; margin: 12px 0; } h1 span{ background:linear-gradient(135deg,var(--gold-3),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(212,176,122,.3); border-radius:999px; font-size:13px; color:var(--gold-2); } .eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-3); } .hero-copy{ font-size: clamp(15px, 1.7vw, 18px); opacity:.92; max-width:60ch; } .card{ background:rgba(255,255,255,.04); border:1px solid rgba(212,176,122,.2); border-radius:16px; padding:14px; } /* Reduced motion safety */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* Update chip animation (used by SW updater in script.js) */ @keyframes kzUpdateIn{ from{ opacity:0; transform:translate(-50%, 16px); } to { opacity:1; transform:translate(-50%, 0); } }