/* Homepage components; shared tokens, navigation and layout live in site.css. */
.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: .75rem 1.5rem; color: #fff; border-radius: 0 0 .5rem .5rem; font-weight: 600; }
.skip-link:focus { top: 0; }
.nav-blur { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.link-underline { position: relative; text-decoration: none; }
.link-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: currentColor; transition: width .2s ease; }
.link-underline:hover::after { width: 100%; }
.reveal { transition: opacity .5s ease, transform .5s ease; }
.reveal-delay-1 { transition-delay: .06s; }
.reveal-delay-2 { transition-delay: .12s; }
.reveal-delay-3 { transition-delay: .18s; }
.reveal-delay-4 { transition-delay: .24s; }
.faq-chevron { transition: transform .2s ease; }
.service-row { transition: background .2s ease; }
.service-row:hover { background: #ffffff05; }
.contact-card { transition: border-color .2s ease, background .2s ease; }
.contact-card:hover { border-color: #e4e4e766; }
.browser-frame { border: 1px solid #ffffff20; border-radius: 12px; overflow: hidden; background: #101010; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #101010; border-bottom: 1px solid #ffffff14; }
.browser-dots { display: flex; gap: 6px; }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; background: #737373; }
.browser-url { flex: 1; text-align: center; font-size: 12px; color: #b0b0b0; letter-spacing: .02em; }
.browser-content img { width: 100%; height: auto; display: block; }
.metric-card { border: 1px solid #ffffff14; border-radius: 12px; padding: 1.25rem; background: #ffffff05; }
::selection { background: #e8e8e8; color: #111; }