/* Reza-approved design exception: electric blue accents on neutral backgrounds, 2026-09-07. */
:root { --max: 1200px; --bg: #0b0d12; --bg-2: #14171e; --ink: #f1f3f9; --ink-2: #b4bdcc; --ink-3: #939eaf; --line: #292e39; --fill: #1c212b; --card: #141820; --accent: #4169ff; --accent-on: #ffffff; --hero-secondary: #7894ff; --hero-action: #4169ff; --hero-action-ink: #ffffff; }
html[data-theme="light"] { --bg: #f8f9fb; --bg-2: #ffffff; --ink: #151820; --ink-2: #5e6777; --ink-3: #677183; --line: #dce0e8; --fill: #edf0f6; --card: #ffffff; --accent: #4169ff; --accent-on: #ffffff; --hero-secondary: #4169ff; --hero-action: #4169ff; --hero-action-ink: #ffffff; }
body { -webkit-font-smoothing: antialiased; }
.bar { height: 80px; border-bottom: 1px solid var(--line); background: var(--bg); backdrop-filter: none; }
.brand { font-size: 20px; letter-spacing: -.045em; gap: 9px; }
.brand svg { width: 27px; height: 27px; }
.bar nav { gap: 28px; font-size: 13px; }
.bar .pill { border-radius: 7px; height: 36px; padding-inline: 17px; }
.bar nav a.pill:hover { color: var(--accent-on); filter: brightness(.93); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--hero-secondary); outline-offset: 5px; }
a, button { transition: background-color 150ms, color 150ms, border-color 150ms; }

.hero { padding:52px 0 0; text-align:center; }
.hero h1 { margin:0; font-size:clamp(48px,5.7vw,78px); font-weight:560; line-height:1.04; letter-spacing:-.06em; }
.hero h1 span { color:var(--hero-secondary); }
.hero-subtitle { margin:18px 0 0; color:var(--ink-2); font-size:18px; letter-spacing:-.02em; }
.hero-downloads { display:flex; justify-content:center; gap:12px; margin-top:28px; }
.download-button { display:flex; align-items:center; gap:13px; padding:14px 18px; min-width:245px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--ink); text-align:left; }
.download-button>svg { width:24px; height:24px; fill:currentColor; flex:none; }
.download-button>span:not(.download-arrow) { display:flex; flex-direction:column; gap:5px; }
.download-button strong { font-size:13px; font-weight:560; letter-spacing:-.015em; }
.download-button small { font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.download-button .download-arrow { margin-left:auto; font-size:20px; color:var(--ink-2); }
.download-button:hover { border-color:var(--hero-secondary); background:var(--fill); }
.hero-note { margin:13px 0 0; font-size:11px; color:var(--ink-3); }
.hero-baseline { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:35px; padding-bottom:15px; }
.making-clock { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-3); }
.making-clock b { font-weight:560; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.making-dot { width:4px; height:4px; border-radius:50%; background:var(--hero-secondary); margin-right:4px; }
.making-time { display:flex; margin-left:6px; font-family:var(--mono); font-size:9px; }
.demo-link { display:inline-flex; gap:10px; align-items:center; font-size:11px; color:var(--ink-2); padding:5px 0; }
.demo-link:hover { color:var(--hero-secondary); }
@media(max-width:760px){
 .bar { height:68px; }.bar nav { gap:12px; }
 .hero { padding-top:38px; }.hero h1 { font-size:clamp(40px,8.5vw,62px); }
 .hero-subtitle { font-size:16px; margin-top:16px; }
 .hero-downloads { gap:10px; margin-top:24px; }.download-button { min-width:0; padding:12px; gap:10px; }
 .download-button strong { font-size:11px; }.download-button small { font-size:8px; }.download-button>svg { width:21px;height:21px; }
 .download-button .download-arrow { display:none; }.hero-baseline { margin-top:25px; }
}
@media(max-width:480px){
 .hero h1 { font-size:clamp(36px,9.6vw,46px); }.hero-downloads { flex-direction:column; max-width:320px; margin-inline:auto; }
 .download-button { padding:13px 16px; gap:13px; }.download-button strong { font-size:13px; }.download-button small { font-size:9px; }.download-button .download-arrow { display:block; }
 .making-clock { font-size:9px; }.making-time { display:none; }.demo-link { font-size:9px; gap:6px; }
}
@media(prefers-reduced-motion:reduce){html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important;transition:none!important; }}