@tailwind base;
@tailwind components;
@tailwind utilities;

:focus-visible{outline:none}

.navlink{display:inline-flex;align-items:center;gap:.5rem;border-radius:.75rem;padding:.5rem .75rem;font-weight:600;color:rgb(226 232 240);transition:background-color .2s,color .2s,transform .2s}
.navlink:hover{background-color:rgb(255 255 255 / .08);color:rgb(248 250 252);transform:translateY(-1px)}
.navlink:focus-visible{box-shadow:0 0 0 3px rgb(99 179 255 / .35)}

.moblink{width:100%;border-radius:1rem;padding:.75rem 1rem;font-size:1.5rem;font-weight:700;color:rgb(241 245 249);transition:background-color .2s,transform .2s}
.moblink:hover{background-color:rgb(255 255 255 / .08);transform:translateY(-1px)}
.moblink:focus-visible{box-shadow:0 0 0 3px rgb(99 179 255 / .35)}

.footlink{color:rgb(203 213 225);transition:color .2s,text-decoration-color .2s}
.footlink:hover{color:rgb(248 250 252)}
.footlink:focus-visible{border-radius:.5rem;box-shadow:0 0 0 3px rgb(99 179 255 / .35)}

.card{border-radius:1.25rem;border:1px solid rgb(255 255 255 / .10);background-color:rgb(255 255 255 / .05);padding:1.5rem;box-shadow:0 10px 25px rgb(0 0 0 / .25);transition:transform .2s,box-shadow .2s,background-color .2s}
.card:hover{transform:translateY(-4px);background-color:rgb(255 255 255 / .07);box-shadow:0 18px 40px rgb(0 0 0 / .35)}
.card:focus-within{box-shadow:0 0 0 3px rgb(47 143 255 / .35),0 18px 40px rgb(0 0 0 / .35)}

.iconchip{display:grid;place-items:center;height:2.5rem;width:2.5rem;border-radius:.9rem}

.step{display:grid;place-items:center;height:2.25rem;width:2.25rem;border-radius:9999px;background:linear-gradient(135deg,rgb(47 143 255 / .25),rgb(198 154 99 / .22));border:1px solid rgb(255 255 255 / .12);font-weight:800;color:rgb(248 250 252)}

.product{border-radius:1.25rem;border:1px solid rgb(255 255 255 / .10);background-color:rgb(255 255 255 / .04);padding:1rem 1rem 1.25rem;box-shadow:0 10px 25px rgb(0 0 0 / .25);transition:transform .2s,background-color .2s,box-shadow .2s}
.product:hover{transform:translateY(-4px);background-color:rgb(255 255 255 / .06);box-shadow:0 18px 40px rgb(0 0 0 / .35)}

@media (prefers-reduced-motion:reduce){
  .navlink,.moblink,.card,.product{transition:none}
}