:root { color-scheme: dark; --abro-ink: #07111f; --abro-cyan: #67e8f9; }
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { min-height: 100vh; background: #07111f; font-family: "DM Sans", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 78% 8%, rgba(34,211,238,.13), transparent 27rem), radial-gradient(circle at 16% 34%, rgba(139,92,246,.11), transparent 30rem), linear-gradient(180deg,#07111f 0%,#091522 52%,#07111f 100%); }
.site-noise { position: fixed; inset: 0; z-index: -1; opacity: .13; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; transform: translateY(-200%); border-radius: .75rem; background: #fff; color: #07111f; padding: .75rem 1rem; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.primary-nav { display: flex; align-items: center; gap: 1.75rem; font-size: .92rem; font-weight: 600; color: #cbd5e1; }
.primary-nav > a { transition: color .2s ease; }
.primary-nav > a:hover,.primary-nav > a:focus-visible { color: #a5f3fc; outline: none; }
.primary-nav .nav-account { border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: .65rem 1rem; color: #fff; background: rgba(255,255,255,.05); }
.primary-nav .nav-account:hover { border-color: rgba(103,232,249,.5); background: rgba(103,232,249,.08); }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { cursor: pointer; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav-menu { position: absolute; top: 3.35rem; right: 0; width: min(20rem,calc(100vw - 2rem)); display: grid; gap: .2rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(7,17,31,.98); padding: .85rem; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.mobile-nav-menu a { border-radius: .75rem; padding: .75rem .8rem; color: #cbd5e1; font-size: .92rem; font-weight: 600; }
.mobile-nav-menu a:hover,.mobile-nav-menu a:focus-visible { color: #cffafe; background: rgba(255,255,255,.06); outline: none; }
.mobile-nav-menu .nav-account { margin-top: .25rem; border: 1px solid rgba(103,232,249,.3); color: #cffafe; text-align: center; }
.hero-grid { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(to bottom,#000,transparent); mask-image: linear-gradient(to bottom,#000,transparent); }
.hero-title { text-wrap: balance; }
.gradient-text { color: transparent; background: linear-gradient(100deg,#a5f3fc 5%,#67e8f9 40%,#c4b5fd 95%); -webkit-background-clip: text; background-clip: text; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: #a5f3fc; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: #67e8f9; }
.button-primary,.button-secondary { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .6rem; border-radius: 999px; padding: .75rem 1.25rem; font-weight: 700; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.button-primary { color: #06111e; background: linear-gradient(135deg,#a5f3fc,#22d3ee); box-shadow: 0 16px 45px rgba(34,211,238,.17); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 55px rgba(34,211,238,.27); }
.button-secondary { color: #fff; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.045); }
.button-secondary:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
.glass-panel { border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow: 0 30px 100px rgba(0,0,0,.2); backdrop-filter: blur(20px); }
.filter-button { border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .55rem .95rem; color: #94a3b8; font-size: .82rem; font-weight: 700; transition: .2s ease; }
.filter-button:hover,.filter-button.is-active { color: #07111f; border-color: #67e8f9; background: #67e8f9; }
.portfolio-card[hidden] { display: none !important; }
.prose-abro { color: #cbd5e1; font-size: 1.04rem; line-height: 1.85; }
.prose-abro h2,.prose-abro h3,.prose-abro h4 { color: #fff; font-family: "Manrope", sans-serif; font-weight: 700; line-height: 1.3; margin: 2rem 0 .75rem; }
.prose-abro h2 { font-size: 1.65rem; }.prose-abro h3 { font-size: 1.3rem; }
.prose-abro p,.prose-abro ul,.prose-abro ol { margin: 0 0 1.25rem; }
.prose-abro ul { list-style: disc; padding-left: 1.25rem; }.prose-abro ol { list-style: decimal; padding-left: 1.25rem; }
.prose-abro a { color: #67e8f9; text-decoration: underline; text-decoration-color: rgba(103,232,249,.4); text-underline-offset: 3px; }
.abro-form label { display: block; color: #cbd5e1; font-size: .82rem; font-weight: 700; margin-bottom: .45rem; }
.abro-form input:not([type=checkbox]),.abro-form textarea,.abro-form select { width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: .85rem; background: rgba(2,8,23,.7); color: #fff; padding: .82rem .95rem; box-shadow: none; }
.abro-form input:focus,.abro-form textarea:focus,.abro-form select:focus { border-color: #67e8f9; outline: 2px solid rgba(103,232,249,.16); outline-offset: 1px; }
.abro-notice { border: 1px solid rgba(103,232,249,.22); border-radius: 1rem; background: rgba(8,145,178,.08); color: #cffafe; padding: .9rem 1rem; }
.abro-error { border-color: rgba(251,113,133,.35); background: rgba(190,24,93,.1); color: #fecdd3; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease,transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width:767px) { .primary-nav { display: none; }.mobile-nav { display: block; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }