@import url("https://autosecurelogin.com/asl-design-system.css");

:root{--shell:1180px}
body{overflow-x:hidden}
.mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--green));color:var(--obsidian);font-weight:900;letter-spacing:-.06em;box-shadow:0 0 28px rgba(76,154,255,.22)}
.brand span.mark{color:var(--obsidian);font-size:.82rem}
.hero{padding:clamp(4rem,9vw,8rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.hero h1{font-size:clamp(3rem,7.5vw,6.25rem);max-width:12ch;line-height:.96}
.signal-panel{position:relative;padding:1.65rem;border:1px solid rgba(76,154,255,.34);border-radius:28px;background:linear-gradient(160deg,rgba(16,31,46,.94),rgba(9,17,27,.98));box-shadow:var(--glow);overflow:hidden}
.signal-panel:before{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-90px;border-radius:50%;border:1px solid rgba(76,154,255,.22);box-shadow:0 0 0 32px rgba(76,154,255,.035),0 0 0 64px rgba(76,154,255,.025)}
.signal-top{position:relative;display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--dim);font-size:.78rem;margin-bottom:3rem}
.signal-panel h2{font-size:2rem}.signal-panel p{color:#c9d9e5}
.signal-list{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.3rem 0}.signal-list span{border:1px solid var(--line);border-radius:999px;padding:.35rem .65rem;color:var(--muted);font-size:.78rem}
.text-link{display:inline-flex;gap:.45rem;color:var(--ice);font-weight:800;margin-top:.5rem}.text-link:hover{color:var(--cyan)}
.work-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);gap:1.1rem;align-items:stretch}
.feature-story{padding:clamp(1.5rem,4vw,2.3rem)}.feature-story h3{font-size:clamp(1.5rem,3vw,2.25rem);max-width:22ch}.feature-story>p{font-size:1.04rem}.kicker{color:var(--cyan);font-size:.75rem!important;letter-spacing:.14em;font-weight:900}
.proof-stack{grid-template-columns:1fr}.proof-stack .stat{padding:.55rem .2rem}.proof-stack .stat+.stat{border-top:1px solid var(--line-soft);padding-top:1rem}
.project-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.project-cards .card{min-height:270px}.project-cards .card:hover{transform:translateY(-6px)}
.timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem}.timeline article{display:grid;grid-template-columns:48px 1fr;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--line-soft)}.timeline-mark{font-family:var(--mono);color:var(--cyan);font-size:.78rem;padding-top:.25rem}.timeline h3{font-size:1.18rem}.timeline p{color:var(--muted);margin:0}
.skills-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}.skills-layout h2{font-size:clamp(2rem,4vw,3.4rem)}.lede-small{color:var(--muted);font-size:1.08rem;max-width:38ch}
.skill-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}.skill-groups div{padding:1.35rem;background:var(--navy)}.skill-groups h3{font-size:1rem;color:var(--ice)}.skill-groups p{color:var(--muted);font-size:.92rem;margin:0}
.contact-section{padding-top:5rem}.contact-card{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(1.6rem,5vw,3rem);border:1px solid rgba(76,154,255,.35);border-radius:28px;background:linear-gradient(135deg,rgba(76,154,255,.09),rgba(108,229,177,.04));box-shadow:var(--glow)}.contact-card h2{font-size:clamp(1.8rem,4vw,3rem);max-width:18ch}.contact-actions{display:flex;gap:.7rem;flex-wrap:wrap}
footer{border-top:1px solid var(--line-soft);padding:1.7rem 0;color:var(--dim);font-size:.84rem}.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media(max-width:980px){.hero-grid,.work-layout,.skills-layout{grid-template-columns:1fr}.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.signal-panel{max-width:620px}.contact-card{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.topbar-inner{min-height:64px}.nav a:not(.cta){display:none}.hero{padding-top:3.2rem}.hero h1{font-size:clamp(2.7rem,14vw,4.4rem)}.hero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.hero-metric:last-child{grid-column:1/-1}.project-cards,.timeline,.skill-groups{grid-template-columns:1fr}.timeline article{grid-template-columns:38px 1fr}.contact-actions{width:100%}.contact-actions .btn{width:100%}.footer-inner{flex-direction:column}}