@layer base{
  html{scroll-behavior:smooth}
  body{font-size:16px}
  :focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(253,186,116,.9)}
}

.nav-link{display:inline-flex;align-items:center;gap:.5rem;border-radius:.75rem;padding:.5rem .75rem;font-size:.95rem;font-weight:600;color:rgb(226 232 240);transition:all .2s}
.nav-link:hover{background:rgba(255,255,255,.06);color:rgb(255 237 213)}
.nav-link:focus{outline:2px solid transparent;box-shadow:0 0 0 3px rgba(253,186,116,.6)}

.footer-link{color:rgb(203 213 225);text-decoration:none;transition:all .2s;border-radius:.5rem;padding:.15rem .35rem;margin-left:-.35rem;display:inline-block}
.footer-link:hover{color:rgb(255 237 213);text-decoration:underline;text-decoration-color:rgba(253,186,116,.6);text-underline-offset:4px}
.footer-link:focus{outline:2px solid transparent;box-shadow:0 0 0 3px rgba(253,186,116,.6)}

.card{border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);padding:1.25rem;box-shadow:0 10px 28px rgba(15,23,42,.10);transition:transform .2s, box-shadow .2s, background .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,23,42,.18);background:rgba(255,255,255,.07)}
.card:focus-within{box-shadow:0 0 0 3px rgba(253,186,116,.55), 0 16px 40px rgba(15,23,42,.18)}

.card-icon{display:inline-flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:1rem;border:1px solid rgba(255,255,255,.10);margin-bottom:.9rem}
.card-title{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:rgb(248 250 252);line-height:1.3}
.card-text{margin-top:.55rem;font-size:.95rem;line-height:1.6;color:rgb(226 232 240)}
.card-link{margin-top:1rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:rgb(255 237 213);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px;transition:all .2s;border-radius:.5rem;padding:.25rem .35rem;margin-left:-.35rem}
.card-link:hover{text-decoration-color:rgba(253,186,116,.8)}
.card-link:focus{outline:2px solid transparent;box-shadow:0 0 0 3px rgba(253,186,116,.6)}

.faq{border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);padding:1rem 1.1rem;transition:background .2s, transform .2s, box-shadow .2s}
.faq:hover{background:rgba(255,255,255,.07)}
.faq[open]{box-shadow:0 12px 30px rgba(15,23,42,.14)}
.faq-q{cursor:pointer;list-style:none;font-weight:800;color:rgb(248 250 252);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:rgb(255 237 213);flex:0 0 auto;transition:transform .2s}
.faq[open] .faq-q::after{content:"–"}
.faq-a{margin-top:.75rem;color:rgb(226 232 240);line-height:1.65;font-size:.95rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card{transition:none}
}