:root { 
			/* color-scheme: dark; 
			--bg: #07111d; */
			--panel: rgba(12, 24, 38, 0.86); 
			--panel-strong: rgba(16, 31, 49, 0.96); 
			--text: #07111d;
			--muted: #89a2b7; 
			--accent: #ffb86b; 
			--border: rgba(255, 255, 255, 0.12); 
		}
        * { box-sizing: border-box; }
        body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: var(--text); background: radial-gradient(circle at top left, rgba(125, 211, 252, 0.2), transparent 28%), radial-gradient(circle at bottom right, rgba(255, 184, 107, 0.18), transparent 30%), var(--bg); min-height: 100vh; }
        a { color: inherit; text-decoration: none; }
        .page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
        .topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border:1px solid var(--border); border-radius:999px; background:rgba(7,17,29,0.72); backdrop-filter: blur(16px); box-shadow:0 12px 40px rgba(0,0,0,0.22); }
        .brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
        .brand img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.15); }
        .nav { display:flex; flex-wrap:wrap; gap:10px; }
        .nav a { padding:9px 14px; border-radius:999px; color:var(--muted); transition:all 180ms ease; }
        .nav a:hover, .nav a:focus-visible { color:var(--text); background:rgba(255,255,255,0.08); outline:none; }
        .hero { display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; margin-top:24px; padding:34px; border-radius:32px; background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,0.24); }
        .hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height:1.05; margin:0 0 14px; letter-spacing:-0.03em; }
        .hero p { color:var(--muted); font-size:1.04rem; line-height:1.75; margin:0 0 20px; max-width:650px; }
        .pill-row { display:flex; flex-wrap:wrap; gap:10px; }
        .pill { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,0.06); color:var(--text); border:1px solid rgba(255,255,255,0.12); }
        .hero-card { padding:24px; border-radius:24px; background:var(--panel-strong); border:1px solid var(--border); }
        .hero-card h2 { margin:0 0 10px; font-size:1.15rem; }
        .hero-card p { margin:0 0 14px; color:var(--muted); line-height:1.7; }
        .stats { display:grid; gap:10px; margin-top:12px; }
        .stat { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
        .section-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:24px; }
        .card { padding:24px; border-radius:24px; background:var(--panel); border:1px solid var(--border); box-shadow:0 16px 40px rgba(0,0,0,0.18); }
        .card h3 { margin:0 0 10px; font-size:1.2rem; }
        .card p { margin:0; color:var(--muted); line-height:1.75; }
        .accent { color:var(--accent); }
        @media (max-width:820px) { .hero { grid-template-columns:1fr; } .section-grid { grid-template-columns:1fr; } }
        @media (max-width:620px) { .topbar { flex-direction:column; align-items:flex-start; border-radius:24px; } .page { padding:16px 14px 40px; } .hero, .card, .hero-card { padding:20px; } }