:root{
  --blue:#1f3fd6; --ink:#0d1b4c; --ice:#eef1ff; --sun:#ffc83d; --white:#fff;
}
*{box-sizing:border-box;margin:0}
body{font-family:"Trebuchet MS",Verdana,sans-serif;background:var(--ice);color:var(--ink);line-height:1.6}
a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 6vw}
.logo{font-family:Georgia,serif;font-size:1.4rem;font-weight:700;text-decoration:none}
nav a{margin-left:22px;text-decoration:none}
nav a:hover{text-decoration:underline}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:40px 6vw 70px}
h1{font-family:Georgia,serif;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;margin-bottom:18px}
.hero-text p{max-width:42ch;margin-bottom:26px}
.btn{display:inline-block;background:var(--ink);color:var(--white);border:0;padding:13px 28px;border-radius:999px;font-size:1rem;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue)}
.hero-art{text-align:center}
#jersey{width:min(340px,80%);color:var(--blue);transition:color .35s ease;filter:drop-shadow(0 18px 24px rgba(13,27,76,.25))}
.color-name{margin-top:10px;font-weight:700}
.colors,.order{padding:50px 6vw}
h2{font-family:Georgia,serif;font-size:2rem;margin-bottom:20px}
.swatches{display:flex;flex-wrap:wrap;gap:14px}
.swatch{width:58px;height:58px;border-radius:50%;border:4px solid var(--white);box-shadow:0 0 0 2px transparent;cursor:pointer;transition:box-shadow .2s}
.swatch:hover{box-shadow:0 0 0 2px var(--ink)}
.swatch.active{box-shadow:0 0 0 3px var(--ink)}
.swatch:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.order{background:var(--blue);color:var(--white)}
form{display:grid;gap:14px;max-width:420px}
label{display:grid;gap:6px}
input{padding:12px 14px;border-radius:10px;border:0;font-size:1rem}
.order .btn{background:var(--sun);color:var(--ink);justify-self:start}
.msg{margin-top:16px;font-weight:700}
footer{text-align:center;padding:26px}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}