/* v2.0 "Super Sale" homepage (front page only) - the demo approved on 4 October 2026.
   Night base, a colour world per department, AI cut-outs floating over them; every grid is sized
   to its items so nothing is left empty. Shared colours and the dark product cards: neon-site.css */
.ribbon{background:linear-gradient(90deg,#ff2d6f,#ff7a18,#ffd23f,#c6f24e,#3dd9ff,#7b3cff,#ff2d6f);background-size:200% 100%;animation:nshift 12s linear infinite;color:#111;overflow:hidden;white-space:nowrap}
.ribbon div{display:inline-flex;gap:34px;padding:8px 0;font-weight:900;letter-spacing:.06em;font-size:13px;animation:nmarq 34s linear infinite}
@keyframes nmarq{to{transform:translateX(-50%)}}@keyframes nshift{to{background-position:200% 0}}
.neon{color:#fff;padding-top:16px}
.neon-h1{font-size:15px;font-weight:700;color:var(--n-muted);margin:0 0 12px;letter-spacing:0}.neon-h1 em{font-style:normal;color:var(--n-lime)}
.neon a{color:inherit;text-decoration:none}
.neon .float{animation:nfloat 5s ease-in-out infinite}@keyframes nfloat{50%{transform:translateY(-9px)}}
/* ---------- hero bento: 4 x 2, every cell filled ---------- */
.neon .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.neon .bento>a{border-radius:22px;overflow:hidden;position:relative;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.neon .b-sale{grid-column:span 2;grid-row:span 2;background:radial-gradient(500px 340px at 78% 40%,rgba(255,210,63,.45),transparent 60%),linear-gradient(135deg,#7a0b2e,#e0144f 55%,#ff7a18)}
.neon .b-sale .k{font-weight:900;letter-spacing:.22em;font-size:13px;background:#111;color:#ffd23f;align-self:flex-start;padding:5px 10px;border-radius:6px;transform:rotate(-2deg)}
.neon .b-sale .h{display:block;max-width:56%;font-size:52px;line-height:.9;margin:14px 0 8px;font-weight:900;letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.neon .b-sale .p{margin:0 0 14px;max-width:min(34ch,56%);font-weight:600}
.neon .b-sale .stage{position:absolute;right:14px;top:14px;width:42%;height:62%;display:grid;place-items:center}.neon .b-sale .stage img{max-height:100%;max-width:100%;object-fit:contain}
.neon .b-sale .stk{position:absolute;right:18px;bottom:18px;background:#ffd23f;color:#111;border-radius:16px;padding:10px 14px;text-align:right;line-height:1.1}
.neon .b-sale .stk b{display:block;font-size:26px;font-weight:900}.neon .b-sale .stk s{font-size:12px;opacity:.7}.neon .b-sale .stk span{display:block;font-size:11.5px;font-weight:800}
.neon .tile .h{display:block;font-size:21px;line-height:1.05;font-weight:900;letter-spacing:-.01em}
.neon .tile .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.85}
.neon .tile .s{margin-top:3px;font-size:12.5px;opacity:.9}.neon .tile img{position:absolute;right:10px;top:10px;width:46%;max-height:62%;object-fit:contain}
.neon .tile .big{position:absolute;right:14px;top:12px;font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1}
.neon .t-lower{background:linear-gradient(135deg,#3b0764,#9333ea)}.neon .t-checked{background:linear-gradient(135deg,#064e3b,#10b981)}
.neon .t-bundle{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}.neon .bento>a.t-free{background:var(--n-lime);color:#111}
.neon .nbtn{display:inline-flex;align-self:flex-start;gap:6px;background:var(--n-lime);color:#111!important;font-weight:800;border-radius:10px;padding:11px 16px;font-size:13.5px;white-space:nowrap;text-decoration:none}
.neon .nbtn.dk{background:#111;color:#fff!important}
/* ---------- section heads ---------- */
.neon .nhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:38px 0 14px;flex-wrap:wrap}
.neon .nhead h2{font-size:28px;margin:0;font-weight:900;letter-spacing:-.02em;color:#fff;text-wrap:balance}.neon .nhead h2 em{font-style:normal;color:var(--n-lime)}
.neon .nhead.hl-sale h2 em,.neon .nhead.hl-sale>a{color:#ffd23f}
.neon .nhead p{margin:3px 0 0;color:var(--n-muted);font-size:13.5px;max-width:70ch}.neon .nhead>a{color:var(--n-lime);font-weight:800;font-size:13.5px}
/* ---------- rails ---------- */
.neon .rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*12px)/6);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.neon .sale-band{border-radius:26px;padding:22px;background:linear-gradient(135deg,#3d0718,#7a0b2e)}
.neon .sale-band .pc{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.14)}
/* ---------- department showcase: colour panel (2 x 2) + six products (3 x 2), alternating sides ---------- */
.neon .show{display:grid;grid-template-columns:2fr 3fr;gap:12px;margin-top:34px}
.neon .show.flip{grid-template-columns:3fr 2fr}.neon .show.flip .panel{order:2}
.neon .show .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-width:0}
.neon .show .panel{border-radius:24px;padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;color:#fff;
  background:radial-gradient(520px 360px at 85% 25%,color-mix(in srgb,var(--c2) 55%,transparent),transparent 65%),linear-gradient(150deg,var(--c1),color-mix(in srgb,var(--c1) 55%,var(--c2)))}
.neon .show .panel .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;opacity:.9}
.neon .show .panel .h{display:block;font-size:40px;line-height:1;margin:6px 0 8px;font-weight:900;letter-spacing:-.03em}
.neon .show .panel .p{margin:0 0 12px;opacity:.9;max-width:38ch}
.neon .show .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.neon .show .chips span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.neon .show .hero{position:absolute;right:12px;top:12px;width:58%;height:50%;display:grid;place-items:center}.neon .show .hero img{max-height:100%;max-width:100%;object-fit:contain}
.neon .show .from{position:absolute;left:24px;top:22px;font-weight:900;font-size:13px;background:rgba(0,0,0,.25);border-radius:999px;padding:5px 12px}
.neon .show .nbtn{background:var(--c2)}
.neon .show .pc .br{color:var(--c2)}
.neon .show .pc .im{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c2) 40%,transparent),transparent 70%)}
/* ---------- price-checked + bundles ---------- */
.neon .checked{margin-top:38px;border-radius:26px;padding:24px;background:radial-gradient(600px 300px at 0 0,rgba(198,242,78,.2),transparent 70%),linear-gradient(135deg,#0e3b2b,#145c41)}
.neon .checked .pc{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.14)}
.neon .checked h2{font-size:34px;margin:8px 0 6px;font-weight:900;letter-spacing:-.03em;color:#fff}.neon .checked h2 em{font-style:normal;color:var(--n-lime)}
.neon .checked p{margin:0 0 14px;color:#cfe9da;max-width:64ch}.neon .checked .nbtn{margin-top:12px}
.neon .tag{display:inline-block;background:var(--n-lime);color:#111;font-weight:900;font-size:12px;letter-spacing:.18em;padding:5px 10px;border-radius:6px}
.neon .bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.neon .bun{border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0;border:1px solid var(--n-line);background:linear-gradient(160deg,var(--c1),#0b1033)}
.neon .bun .bh{padding:16px 16px 0}.neon .bun .dep{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--c2)}
.neon .bun h3{margin:3px 0 2px;font-size:20px;color:#fff}.neon .bun .ln{color:var(--n-muted);font-size:12.5px;margin:0}
.neon .bun .pics{display:flex;justify-content:center;align-items:flex-end;height:118px;margin:10px 0;padding:0 10px}
.neon .bun .pics img{height:104px;width:104px;object-fit:contain;margin:0 -10px}.neon .bun .pics img.nocut{height:84px;width:84px;margin:0 3px}
.neon .bun ul{list-style:none;margin:0;padding:0 16px;font-size:12.5px;flex:1}.neon .bun li{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--n-line)}
.neon .bun li a{flex:1;color:var(--n-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}.neon .bun li b{white-space:nowrap}
.neon .bun .ft{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:8px}.neon .bun .ft b{font-size:22px;font-weight:900;display:block}
.neon .bun .ft small{color:var(--n-muted);font-size:11px;display:block}.neon .bun .ft small.fd{color:#5fd38d;font-weight:700}.neon .bun .nbtn{background:var(--c2)}
.neon .ntrust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:38px}
.neon .ntrust div{background:var(--n-card);border:1px solid var(--n-line);border-radius:16px;padding:14px;display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--n-muted)}
.neon .ntrust i{font-style:normal;width:36px;height:36px;border-radius:10px;background:var(--n-lime);display:grid;place-items:center;font-weight:900;color:#111;flex:none}
.neon .ntrust b{display:block;font-size:13px;color:#fff}.neon .ntrust a{color:var(--n-lime)}
/* ---------- tablets and phones ---------- */
@media(max-width:1000px){.neon .rail{grid-auto-columns:calc((100% - 2*12px)/3)}.neon .bundles{grid-template-columns:1fr 1fr}
  .neon .show,.neon .show.flip{grid-template-columns:1fr}.neon .show.flip .panel{order:0}.neon .show .panel{min-height:360px}}
@media(max-width:900px){.neon .bento{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.neon .b-sale{grid-row:span 3}
  .neon .b-sale .h{font-size:40px;max-width:none}.neon .b-sale .p{max-width:none}.neon .b-sale .stage{width:62%;height:44%}
  .neon .b-sale .stk{position:static;align-self:flex-start;margin-top:10px;text-align:left}.neon .tile .big{font-size:30px}.neon .tile .k{margin-top:26px}.neon .ntrust{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.neon .rail{grid-auto-columns:47%}.neon .show .grid6{grid-template-columns:1fr 1fr}.neon .bundles{grid-template-columns:1fr}
  .neon .show .panel .h{font-size:32px}.neon .nhead h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.ribbon,.ribbon div,.neon .float{animation:none!important}}
/* v2.0.4: a calm, still information strip instead of the rainbow ticker - easier to read and looks less like an ad */
.ribbon{background:#16133a;color:#e6e4f5;animation:none;border-bottom:1px solid rgba(255,255,255,.08)}
.ribbon div{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 30px;animation:none;font-weight:600;letter-spacing:0;font-size:13px;padding:9px 16px}
.ribbon span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#c6f24e;margin:0 12px 2px -18px;vertical-align:middle}
@media(max-width:700px){.ribbon span:nth-child(n+3){display:none}}
/* v2.0.4: product tiles inside the showcases match the rest of the site (soft grey, so white and black
   products both stand out), and the big panel's product fills its space instead of floating small */
.neon .show .pc .im{background:#eef0f4}
.neon .show .hero{left:8%;right:8%;width:auto;top:64px;height:52%}
.neon .show .hero img{width:100%;height:100%;object-fit:contain}
/* v2.0.12 home page slideshow banner */
.neon .hbanner{position:relative;border-radius:22px;overflow:hidden;margin:0 0 26px}
.neon .hb-slides{display:grid}
.neon .hb-slide{grid-area:1/1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:12px;padding:30px 72px;min-height:340px;color:#fff;opacity:0;visibility:hidden;transition:opacity .5s}
.neon .hb-slide.on{opacity:1;visibility:visible}
.neon .hb-sale{background:linear-gradient(120deg,#9b1236,#ff5a36)}
.neon .hb-wifi{background:linear-gradient(120deg,#0b4fa8,#25b7ff)}
.neon .hb-sec{background:linear-gradient(120deg,#0d5c3f,#2fd38f)}
.neon .hb-pow{background:linear-gradient(120deg,#7a3b00,#ffb020)}
.neon .hb-game{background:linear-gradient(120deg,#3b1a8f,#a855ff)}
.neon .hb-pro{background:linear-gradient(120deg,#172554,#3b82f6)}
.neon .hb-slide .t{display:grid;gap:10px;min-width:0}
.neon .hb-slide .k{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.neon .hb-slide .h{margin:0;font-weight:900;font-size:clamp(26px,4.2vw,46px);line-height:1.02;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.neon .hb-slide p{margin:0;max-width:44ch;font-size:16px}
.neon .hb-slide .from{font-weight:800;font-size:22px}
.neon .hb-slide .cta{justify-self:start;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#111;background:#fff;border-radius:10px;padding:12px 18px;text-decoration:none}
.neon .hb-slide .cta:hover{background:#ffd23f}
.neon .hb-slide .imgs{display:flex;justify-content:center;align-items:center;gap:12px;min-width:0}
.neon .hb-slide .imgs img{width:auto;height:auto;max-height:250px;max-width:46%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.neon .hb-slide .imgs.one img{max-width:90%}
.neon .hb-slide .imgs .tile{background:#fff;border-radius:16px;padding:12px;max-width:46%;display:grid;place-items:center}
.neon .hb-slide .imgs .tile img{max-width:100%;max-height:200px;filter:none}
.neon .hb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#111;font:700 22px/1 sans-serif;cursor:pointer;z-index:2}
.neon .hb-arrow.l{left:12px}.neon .hb-arrow.r{right:12px}
.neon .hb-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:2}
.neon .hb-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);padding:0;cursor:pointer}
.neon .hb-dots button[aria-current="true"]{background:#fff;width:26px;border-radius:6px}
.neon .hb-arrow:focus-visible,.neon .hb-dots button:focus-visible,.neon .hb-slide .cta:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
@media (max-width:700px){
  .neon .hb-slide{grid-template-columns:1fr;padding:22px 20px 46px;min-height:500px;align-content:start}
  .neon .hb-slide .imgs{order:-1;min-height:190px}.neon .hb-slide .imgs img{max-height:180px}
  .neon .hb-arrow{top:105px;width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.neon .hb-slide{transition:none}}