@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

:focus-visible{outline:none}

.navlink{display:inline-flex;align-items:center;justify-content:center;border-radius:0.75rem;padding:0.6rem 0.85rem;font-size:0.95rem;color:rgb(226 232 240);transition:background-color .2s ease,color .2s ease,transform .2s ease}
.navlink:hover{background-color:rgba(255,255,255,.06)}
.navlink:focus{box-shadow:0 0 0 2px rgba(147,197,253,.85)}

.menulink{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:18rem;border-radius:1rem;padding:0.9rem 1rem;font-size:1.5rem;line-height:1.2;color:rgb(241 245 249);border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);transition:transform .18s ease,background-color .18s ease,border-color .18s ease}
.menulink:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.menulink:focus{box-shadow:0 0 0 2px rgba(147,197,253,.85)}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:1rem;padding:0.85rem 1.1rem;font-weight:600;background-image:linear-gradient(to bottom right, rgb(147 197 253), rgb(37 99 235));color:rgb(2 6 23);box-shadow:0 10px 30px rgba(2, 6, 23, 0.18);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.05)}
.btn-primary:focus{box-shadow:0 0 0 3px rgba(147,197,253,.75), 0 16px 48px rgba(2, 6, 23, 0.22)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}

.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:1rem;padding:0.85rem 1.1rem;font-weight:600;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgb(241 245 249);transition:transform .18s ease,background-color .18s ease,border-color .18s ease}
.btn-secondary:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.btn-secondary:focus{box-shadow:0 0 0 2px rgba(147,197,253,.85)}
.btn-secondary:active{transform:translateY(0)}
.btn-secondary:disabled{opacity:.6;cursor:not-allowed;transform:none}

.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 30px rgba(2, 6, 23, 0.10);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(2, 6, 23, 0.18);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.card:focus-within{box-shadow:0 0 0 2px rgba(147,197,253,.75), 0 16px 48px rgba(2, 6, 23, 0.18)}

.cardicon{display:inline-flex;align-items:center;justify-content:center;height:3rem;width:3rem;border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06)}

.footlink{color:rgb(203 213 225);text-decoration:none;transition:color .18s ease,transform .18s ease}
.footlink:hover{color:rgb(255 255 255)}
.footlink:focus{box-shadow:0 0 0 2px rgba(147,197,253,.85);border-radius:.5rem;padding:.25rem .4rem}

img{max-width:100%;height:auto;display:block}

html,body{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto}
  .btn-primary,.btn-secondary,.navlink,.menulink,.card{transition:none}
}