:root {color-scheme:dark;--blue:#168cff;--cyan:#64e4ff;--gold:#f5cf72}
body{background-color:#020a17;background-image:linear-gradient(90deg,rgba(2,10,23,.6),rgba(5,25,55,.48),rgba(2,10,23,.6)),url("assets/motherboard.svg");background-size:auto,1200px 800px;background-attachment:fixed;color:#e8f4ff}
header{background:rgba(3,13,29,.96);border-bottom:1px solid #157eda;box-shadow:0 3px 30px #006cff30}
.brand img{filter:drop-shadow(0 0 12px #168cff88)}
.hero{position:relative;isolation:isolate;overflow:hidden;margin-top:28px;padding:clamp(28px,5vw,72px);border:1px solid #168cff;box-shadow:inset 0 0 60px #087bff22,0 0 35px #087bff22;background:radial-gradient(ellipse at 80% 45%,#06458b80,transparent 60%),linear-gradient(135deg,#031126eb,#04162ccb);border-radius:12px}
.hero:before{content:"";position:absolute;inset:12px;z-index:-1;border:1px solid #168cff40;background:url("assets/motherboard.svg") center/1000px;border-radius:5px;pointer-events:none}
.hero:after{content:"";position:absolute;width:90px;height:4px;background:#78eaff;top:0;left:48px;box-shadow:0 0 18px #46d5ff,0 0 38px #168cff}
h1{font-weight:900;letter-spacing:-.045em;font-size:clamp(42px,5.4vw,80px);line-height:1.02;text-shadow:0 2px 24px #087bff55}
h1 em{color:var(--gold);font-style:normal;text-shadow:0 0 24px #dfaf3425}
.hero .mascot{width:100%;max-width:470px;max-height:460px;object-fit:contain;filter:drop-shadow(0 0 26px #168cff70)}
.eyebrow{color:#64e4ff;letter-spacing:.16em;font-weight:800}
.button{background:linear-gradient(135deg,#e94046,#b3182b);border:1px solid #ff7580;box-shadow:0 0 20px #e6283a30;color:#fff;font-weight:800}
.button:hover{box-shadow:0 0 26px #f0444560;transform:translateY(-2px)}
#catalog{margin-top:56px}.section-title{border-bottom:1px solid #168cff80;padding-bottom:20px}
.controls,.quick-franchises{position:relative;background:#04142be8;border:1px solid #197fce;border-radius:8px;padding:18px;box-shadow:inset 0 0 24px #168cff10}
input,select{background:#020d20;color:#e8f4ff;border:1px solid #168cff88}
.quick-franchises button{background:#08234a;border:1px solid #188cec;color:#dff7ff;box-shadow:inset 0 0 16px #168cff20}
.quick-franchises button:hover{border-color:#78eaff;box-shadow:0 0 16px #168cff50}
.card{background:linear-gradient(145deg,#061d3b,#030e20);border:1px solid #1c81d0;box-shadow:0 0 0 3px #061c37,0 6px 22px #0007;border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:#72eaff;box-shadow:0 0 22px #168cff55;transform:translateY(-4px)}
.card img{background:#061020}.price{color:var(--gold)}
.checkout-section{background:#031127ee;border:1px solid #168cff80;box-shadow:0 0 30px #168cff16;padding:28px;border-radius:12px}
.cart-panel,.summary-panel{background:#031022;border:1px solid #1a6aae}.panel-kicker,.secure-mark{color:#64e4ff}
footer{border-top:1px solid #168cff;background:#020b1be8}.social-links a{box-shadow:inset 0 0 20px #168cff20}
:focus-visible{outline:3px solid #70e5ff;outline-offset:4px}
@media(max-width:700px){.hero{padding:28px 22px}.hero .mascot{max-width:300px;max-height:300px}.checkout-section{padding:18px}.controls{padding:14px}body{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}