:root { --home-max: 1240px; }
body { min-height: 100vh; overflow-x: hidden; background: #080b0c; }
body::before { background: radial-gradient(circle at 73% 18%, rgba(22,211,198,.12), transparent 27rem), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; mask-image: linear-gradient(to bottom,#000 0,transparent 74%); }
.home-header { width: min(calc(100% - 48px), var(--home-max)); height: 88px; margin: 0 auto; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.home-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.home-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #021211; background: var(--tap-cyan); border-radius: 12px 5px 12px 5px; font: 900 18px/1 var(--display); box-shadow: 0 0 0 5px rgba(22,211,198,.07); }
.home-brand strong,.home-brand small { display: block; }.home-brand strong { font-size: 16px; letter-spacing: -.02em; }.home-brand small { margin-top: 2px; color: var(--text-3); font-size: 10px; }
.home-header nav { display: flex; align-items: center; gap: 28px; color: var(--text-2); font-size: 13px; }.home-header nav a { transition: color .18s ease; }.home-header nav a:hover { color: var(--text); }.home-header .github-link { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 99px; }
main { width: min(calc(100% - 48px), var(--home-max)); margin: 0 auto; }
.home-hero { min-height: 580px; padding: 100px 0 72px; position: relative; }
.signal-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid rgba(22,211,198,.2); border-radius: 99px; color: var(--text-2); background: rgba(22,211,198,.045); font-size: 11px; }.signal-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--tap-cyan); box-shadow: 0 0 12px var(--tap-cyan); animation: signal 2s ease-in-out infinite; }
.home-eyebrow { margin: 28px 0 14px; color: var(--tap-cyan); font: 700 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
.home-hero h1 { margin: 0; max-width: 970px; font: 800 clamp(46px,7.2vw,92px)/.99 var(--display); letter-spacing: -.068em; }.home-hero h1 em { color: var(--text-3); font-style: normal; }
.home-lead { max-width: 700px; margin: 30px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.85; }
.home-actions { display: flex; gap: 10px; margin-top: 34px; }.home-btn { display: inline-flex; align-items: center; justify-content: space-between; min-width: 168px; padding: 13px 18px; border-radius: 99px; transition: transform .18s ease,background .18s ease; }.home-btn:hover { transform: translateY(-2px); }.home-btn.primary { color: #021211; background: var(--tap-cyan); font-weight: 750; }.home-btn.primary span { margin-left: 28px; }.home-btn.secondary { color: var(--text); border: 1px solid var(--line-strong); background: rgba(255,255,255,.02); }
.snapshot { display: grid; grid-template-columns: 1.2fr repeat(3,1fr); border: 1px solid var(--line); border-radius: 22px; background: rgba(18,22,26,.76); backdrop-filter: blur(20px); overflow: hidden; }.snapshot > * { min-height: 142px; padding: 24px; border-right: 1px solid var(--line); }.snapshot > :last-child { border-right: 0; }.snapshot-index { display: flex; flex-direction: column; justify-content: space-between; color: var(--tap-cyan); }.snapshot-index span { font-size: 10px; letter-spacing: .16em; }.snapshot-index strong { font: 750 26px/1 var(--display); color: var(--text); }.snapshot article span,.snapshot article small { display: block; color: var(--text-3); font-size: 11px; }.snapshot article strong { display: block; margin: 17px 0 10px; font: 800 34px/1 var(--display); letter-spacing: -.04em; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr .72fr; gap: 14px; padding: 70px 0 88px; }.home-card,.home-note { min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }.home-card { display: flex; flex-direction: column; }.card-no,.home-note > span { color: var(--tap-cyan); font-size: 10px; letter-spacing: .14em; }.home-card h2 { max-width: 360px; margin: 46px 0 14px; font: 750 26px/1.16 var(--display); letter-spacing: -.035em; }.home-card p,.home-note p { color: var(--text-2); line-height: 1.75; }.home-card a { margin-top: auto; color: var(--tap-cyan); }.evidence-card { background: linear-gradient(145deg,var(--surface),rgba(77,142,255,.07)); }.home-note { display: flex; flex-direction: column; justify-content: space-between; background: transparent; }.home-note > span { color: var(--tap-orange); }.home-note p { margin: 0; }
.home-footer { width: min(calc(100% - 48px),var(--home-max)); margin: 0 auto; padding: 28px 0 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--text-3); font-size: 11px; }
@keyframes signal { 50% { opacity:.35; transform:scale(.72); } }
@media (max-width: 820px) { .home-header,main,.home-footer { width:min(calc(100% - 24px),var(--home-max)); }.home-header nav { gap:14px; }.home-header .github-link { display:none; }.home-hero { min-height:auto; padding:72px 0 54px; }.snapshot { grid-template-columns:1fr 1fr; }.snapshot > * { border-bottom:1px solid var(--line); }.snapshot > :nth-child(2) { border-right:0; }.snapshot > :nth-child(3),.snapshot > :nth-child(4) { border-bottom:0; }.home-grid { grid-template-columns:1fr 1fr; }.home-note { grid-column:1/-1; min-height:180px; } }
@media (max-width: 560px) { .home-header { height:74px; }.home-brand small { display:none; }.home-header nav a:first-child { display:none; }.home-hero { padding-top:58px; }.home-hero h1 { font-size:clamp(42px,14vw,64px); }.home-lead { font-size:14px; }.home-actions { align-items:stretch; flex-direction:column; }.home-btn { width:100%; }.snapshot { grid-template-columns:1fr; }.snapshot > * { min-height:112px; border-right:0; border-bottom:1px solid var(--line) !important; }.snapshot > :last-child { border-bottom:0 !important; }.home-grid { grid-template-columns:1fr; padding-top:42px; }.home-note { grid-column:auto; }.home-footer { gap:8px; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .signal-chip i { animation:none; } }