@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{outline:none}

.navlink{display:inline-flex;align-items:center;gap:.5rem;font-size:0.95rem;color:rgb(226 232 240/0.9);padding:.4rem .6rem;border-radius:0.75rem;transition:transform .2s ease,background-color .2s ease,color .2s ease;}
.navlink:hover{background-color:rgb(255 255 255/0.06);color:rgb(255 255 255/0.95);transform:translateY(-1px)}
.navlink:focus-visible{box-shadow:0 0 0 3px rgba(43,211,255,.4)}

.mobilelink{display:block;border-radius:1rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:0.9rem 1rem;font-size:1.5rem;line-height:1.2;color:rgba(241,245,249,.95);transition:transform .2s ease,background-color .2s ease,border-color .2s ease;}
.mobilelink:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(43,211,255,.35)}
.mobilelink:focus-visible{box-shadow:0 0 0 3px rgba(43,211,255,.4)}

.btn-primary{display:inline-flex;align-items:center;gap:.6rem;justify-content:center;border-radius:1rem;padding:.85rem 1.05rem;font-weight:700;background-image:linear-gradient(135deg,#2bd3ff 0%, #1f49ff 55%, #b388ff 100%);color:#081022;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(31,73,255,.22);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 0 0 1px rgba(43,211,255,.35),0 22px 56px rgba(31,73,255,.28)}
.btn-primary:focus-visible{box-shadow:0 0 0 3px rgba(43,211,255,.45),0 22px 56px rgba(31,73,255,.28)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}

.btn-secondary{display:inline-flex;align-items:center;gap:.6rem;justify-content:center;border-radius:1rem;padding:.85rem 1.05rem;font-weight:600;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:rgba(241,245,249,.95);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(43,211,255,.35)}
.btn-secondary:focus-visible{box-shadow:0 0 0 3px rgba(43,211,255,.4)}

.btn-ghost{display:inline-flex;align-items:center;justify-content:center;border-radius:1rem;padding:.7rem 1rem;font-weight:600;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.15);color:rgba(241,245,249,.95);transition:background-color .18s ease,transform .18s ease,border-color .18s ease;}
.btn-ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-1px);border-color:rgba(167,255,235,.35)}
.btn-ghost:focus-visible{box-shadow:0 0 0 3px rgba(167,255,235,.35)}

.stat{border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:1rem;}
.statnum{font-family:Fraunces,ui-serif,Georgia,serif;font-size:1.75rem;line-height:1;color:rgba(226,232,240,.98)}
.statlabel{margin-top:.4rem;font-size:.85rem;color:rgba(203,213,225,.88)}

.stagecard{position:relative;border-radius:1.25rem;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));padding:1.25rem;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 22px 60px rgba(0,0,0,.45);transform:translateZ(0);transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;}
.stagecard:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(43,211,255,.35);box-shadow:0 0 0 1px rgba(43,211,255,.18),0 26px 70px rgba(31,73,255,.18)}
.stagecard:focus-within{box-shadow:0 0 0 3px rgba(43,211,255,.35),0 26px 70px rgba(31,73,255,.18)}

.stageicon{display:grid;place-items:center;height:46px;width:46px;border-radius:1rem;background-image:linear-gradient(135deg,#2bd3ff 0%, #1f49ff 70%);color:#081022;}
.stagetitle{margin-top:0.9rem;font-weight:700;font-size:1.05rem;color:rgba(241,245,249,.96)}
.stagetext{margin-top:0.55rem;font-size:0.95rem;line-height:1.55;color:rgba(226,232,240,.85)}
.stagetags{margin-top:0.9rem;display:flex;flex-wrap:wrap;gap:.45rem}
.tag{font-size:.75rem;border-radius:9999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);padding:.28rem .55rem;color:rgba(226,232,240,.85)}

.pill{display:inline-flex;align-items:center;gap:.45rem;border-radius:9999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:.55rem .8rem;color:rgba(241,245,249,.92);font-size:.9rem}

.footlink{color:rgba(226,232,240,.82);text-decoration:none;transition:color .18s ease, text-decoration-color .18s ease;}
.footlink:hover{color:rgba(121,242,255,.95);text-decoration:underline;text-decoration-color:rgba(43,211,255,.5);text-underline-offset:4px}
.footlink:focus-visible{border-radius:.5rem;box-shadow:0 0 0 3px rgba(43,211,255,.35)}

.compare{border-radius:1.5rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:1rem;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.compareHead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.compareFrame{position:relative;overflow:hidden;border-radius:1.25rem;margin-top:.85rem;height:260px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35)}
@media (min-width:640px){.compareFrame{height:300px}}
.compareImg{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;display:block}
.compareTop{position:absolute;inset:0;width:55%;overflow:hidden;will-change:width}
.compareRange{position:absolute;inset:auto 1rem 1rem 1rem;width:calc(100% - 2rem);accent-color:#2bd3ff;}
.compareRange:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(43,211,255,.35);border-radius:9999px}
.compareHandle{position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);height:46px;width:46px;border-radius:9999px;background-image:linear-gradient(135deg,#A7FFEB 0%, #2bd3ff 45%, #b388ff 100%);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 16px 40px rgba(0,0,0,.55);pointer-events:none;}
.compareLabels{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:1rem;padding:.85rem;pointer-events:none}
.label{font-size:.75rem;color:rgba(241,245,249,.92);border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);padding:.28rem .55rem;border-radius:9999px}

html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}