:root { --bg:#0b1120; --surface:#111a2e; --surface-2:#17233b; --text:#f5f7fb; --muted:#aab5ca; --primary:#4ade80; --secondary:#60a5fa; --border:rgba(255,255,255,.1); --shadow:0 18px 45px rgba(0,0,0,.22); }
body.light { --bg:#f3f7fb; --surface:#fff; --surface-2:#eef4fa; --text:#102033; --muted:#5d6b7e; --border:rgba(16,32,51,.12); --shadow:0 15px 35px rgba(31,55,80,.12); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.container { width:min(1120px,92%); margin:auto; } .navbar { position:sticky; top:0; z-index:5; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(15px); } .nav-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .logo { display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:800; } .logo-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#06110a; background:var(--primary); } .nav-links { display:flex; gap:20px; color:var(--muted); font-size:.92rem; } .nav-links a:hover,.nav-links a.active { color:var(--primary); } .theme-btn { width:40px; height:40px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface); }
main { padding:78px 0 90px; background:radial-gradient(circle at 90% 0,rgba(96,165,250,.13),transparent 35%),radial-gradient(circle at 8% 15%,rgba(74,222,128,.1),transparent 30%); min-height:calc(100vh - 72px); } .eyebrow { display:inline-flex; padding:7px 12px; border:1px solid rgba(74,222,128,.2); border-radius:999px; color:var(--primary); background:rgba(74,222,128,.1); font-size:.78rem; font-weight:800; letter-spacing:.4px; } h1,h2,h3 { line-height:1.1; } h1 { max-width:760px; margin:18px 0; font-size:clamp(2.4rem,6vw,5rem); letter-spacing:-3px; } h1 span { color:var(--primary); } h2 { margin:0 0 12px; font-size:clamp(1.8rem,4vw,3rem); } h3 { margin:0 0 8px; } .lead { max-width:700px; color:var(--muted); font-size:1.08rem; } .page-head { margin-bottom:38px; } .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .card { padding:24px; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:var(--shadow); } .card p,.card li { color:var(--muted); } .card ul { padding-left:20px; } .button { display:inline-block; margin-top:22px; padding:12px 17px; border:0; border-radius:10px; color:#06110a; background:var(--primary); font-weight:800; } .button.secondary { color:var(--text); background:var(--surface); border:1px solid var(--border); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } label { display:block; margin-bottom:7px; color:var(--muted); font-size:.88rem; font-weight:700; } input,textarea,select { width:100%; padding:12px 13px; border:1px solid var(--border); border-radius:10px; outline:0; color:var(--text); background:var(--surface-2); } textarea { min-height:120px; resize:vertical; } .full { grid-column:1/-1; } .result { margin-top:20px; padding:22px; border:1px solid rgba(74,222,128,.25); border-radius:14px; background:rgba(74,222,128,.1); } .result strong { color:var(--primary); font-size:2rem; }
.site-footer { padding:34px 0 22px; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; } .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .footer-brand { color:var(--text); font-weight:800; } .footer-links { display:flex; gap:16px; flex-wrap:wrap; } .footer-links a:hover { color:var(--primary); } .footer-note { margin:18px 0 0; color:var(--muted); font-size:.78rem; }
@media (max-width:800px) { .nav-links { gap:11px; font-size:.78rem; } .grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { .nav-links { display:none; } main { padding-top:52px; } .grid,.form-grid { grid-template-columns:1fr; } .full { grid-column:auto; } }