/* ========= KOLORY ========= */
[data-t=dark]{
  --bg:#111;--bg2:#1a1a1a;--bg3:#222;
  --card:#181818;--card2:#202020;
  --br:#333;--br2:#484848;
  --tx:#f5f5f5;--tx2:#d0d0d0;--tx3:#a0a0a0;--tx4:#666;
  --acc:#00C8FF;--acc2:rgba(0,200,255,.18);
  --sh:0 8px 40px rgba(0,0,0,.7);
  --logo-outline:-webkit-text-stroke:2px #00C8FF;
}
[data-t=light]{
  --bg:#f4f4f4;--bg2:#eaeaea;--bg3:#dedede;
  --card:#fff;--card2:#f8f8f8;
  --br:#ccc;--br2:#aaa;
  --tx:#111;--tx2:#333;--tx3:#555;--tx4:#999;
  --acc:#0077CC;--acc2:rgba(0,119,204,.14);
  --sh:0 8px 40px rgba(0,0,0,.12);
  --logo-outline:-webkit-text-stroke:2px #0077CC;
}

/* ========= RESET ========= */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:'Barlow',sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden;transition:background .3s,color .3s}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--br2)}

/* ========= ANIMATIONS ========= */
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* ========= HEADER ========= */
header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:70px;background:var(--bg);
  border-bottom:2px solid var(--br);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(14px,4vw,60px);
  box-shadow:var(--sh);
  transition:background .3s,border-color .3s;
}
.logo-a{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo-hex{width:36px;height:36px;background:linear-gradient(135deg,#00C8FF,#22DD66);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);flex-shrink:0}
.logo-text{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:5px;color:var(--tx);line-height:1}
.logo-text b{color:var(--acc)}
.logo-sub{font-size:9px;letter-spacing:5px;color:var(--tx4);text-transform:uppercase;margin-top:2px;font-family:'Barlow Condensed',sans-serif;font-weight:700}
.hdr-r{display:flex;align-items:center;gap:12px}
nav a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--tx3);text-decoration:none;margin-right:18px;transition:color .2s}
nav a:hover{color:var(--tx)}

/* theme toggle */
.theme-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--bg3);border:2px solid var(--br2);
  color:var(--tx2);padding:8px 16px;
  cursor:pointer;border-radius:24px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:2px;
  transition:all .2s;white-space:nowrap;
}
.theme-btn:hover{border-color:var(--acc);color:var(--acc)}

/* cart button */
.cart-btn{
  display:flex;align-items:center;gap:9px;
  background:var(--bg3);border:2px solid var(--br2);
  color:var(--tx2);padding:9px 20px;
  cursor:pointer;border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:3px;
  transition:all .2s;
}
.cart-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--acc2)}
.cbadge{background:var(--acc);color:#000;border-radius:50%;width:20px;height:20px;display:none;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1}
.cbadge.on{display:flex}
.cbadge.pop{animation:pop .4s ease}

/* ========= HERO ========= */
.hero{
  padding-top:70px;min-height:64vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);position:relative;overflow:hidden;
}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 90% 55% at 50% 0%,var(--acc2),transparent 70%);pointer-events:none}
.hero-inner{position:relative;z-index:2;text-align:center;padding:56px 20px 44px;animation:up .8s ease both}
.hero-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:8px;color:var(--acc);text-transform:uppercase;margin-bottom:16px}
.hero-h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(90px,17vw,180px);line-height:.87;color:var(--tx);margin-bottom:14px}
.hero-h1 span{display:block;color:transparent;-webkit-text-stroke:2px var(--acc)}
.hero-sub{font-size:16px;letter-spacing:5px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;margin-bottom:38px}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-fill{padding:15px 40px;background:var(--acc);border:none;color:#000;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:4px;cursor:pointer;border-radius:4px;text-decoration:none;display:inline-block;transition:all .3s;font-weight:400}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--acc2)}
.btn-ghost{padding:15px 40px;background:transparent;border:2px solid var(--br2);color:var(--tx3);font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:4px;cursor:pointer;border-radius:4px;text-decoration:none;display:inline-block;transition:all .3s}
.btn-ghost:hover{border-color:var(--tx2);color:var(--tx)}

/* stats bar */
.stats{position:relative;z-index:2;display:flex;border-top:2px solid var(--br);border-bottom:2px solid var(--br);width:100%;max-width:620px;animation:up .8s .3s both}
.stat{flex:1;padding:20px;text-align:center;border-right:2px solid var(--br)}
.stat:last-child{border-right:none}
.stat-n{font-family:'Bebas Neue',sans-serif;font-size:38px;color:var(--acc);line-height:1;margin-bottom:3px}
.stat-l{font-size:11px;letter-spacing:4px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase}

/* ========= TICKER ========= */
.ticker{border-top:2px solid var(--br);border-bottom:2px solid var(--br);background:var(--bg2);overflow:hidden;padding:10px 0}
.tick-track{display:flex;white-space:nowrap;animation:tick 28s linear infinite;width:max-content}
.ti{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:5px;color:var(--tx2);padding:0 26px;flex-shrink:0}
.td{color:var(--acc);font-size:12px}

/* ========= SECTION HEAD ========= */
.sec-head{padding:76px clamp(14px,5vw,68px) 42px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.sec-tag{font-size:12px;letter-spacing:6px;color:var(--acc);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.sec-h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(50px,7vw,80px);line-height:.9;color:var(--tx)}
.sec-h2 .dim{color:var(--br2)}
.sec-desc{font-size:15px;color:var(--tx3);max-width:300px;line-height:1.7}

/* ========= CARDS ========= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:3px;padding:0 clamp(14px,5vw,68px) 76px}
.card{background:var(--card);border:2px solid var(--br);transition:all .3s;position:relative;overflow:hidden}
.card:hover{background:var(--card2);border-color:var(--br2);box-shadow:var(--sh)}

/* image flip */
.card-img{position:relative;height:360px;overflow:hidden;background:var(--bg2);cursor:pointer}
.card-num{position:absolute;top:13px;left:15px;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:4px;color:var(--tx4);z-index:3}
.badge{position:absolute;top:13px;right:15px;z-index:3;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;font-weight:700;padding:5px 12px;border-radius:3px;text-transform:uppercase}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform .6s}
.img-b{opacity:0}
.card-img:hover .img-f{opacity:0;transform:scale(1.06)}
.card-img:hover .img-b{opacity:1;transform:scale(1.06)}
.flip-tip{position:absolute;bottom:11px;right:11px;z-index:3;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--tx3);background:var(--bg);padding:5px 10px;border:1px solid var(--br);border-radius:3px;transition:opacity .3s}
.card-img:hover .flip-tip{opacity:0}

/* card body */
.card-info{padding:22px 22px 26px}
.card-row1{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:10px}
.card-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;letter-spacing:1px;text-transform:uppercase;line-height:1.2;color:var(--tx);flex:1}
.card-price{font-family:'Bebas Neue',sans-serif;font-size:28px;white-space:nowrap}
.card-desc{font-size:15px;color:var(--tx3);margin-bottom:18px;line-height:1.6}
.sz-label{font-size:11px;letter-spacing:4px;color:var(--tx4);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;margin-bottom:9px}
.sz-row{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.sz{min-width:42px;padding:9px 10px;background:var(--bg2);border:2px solid var(--br);color:var(--tx2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;cursor:pointer;border-radius:4px;transition:all .15s;text-align:center}
.sz:hover{border-color:var(--br2);color:var(--tx);background:var(--bg3)}
.sz.on{color:#000 !important;font-weight:800}
.add-btn{width:100%;padding:16px;border:2px solid;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:4px;cursor:pointer;border-radius:5px;transition:all .3s}
.add-btn.no{background:var(--bg3);color:var(--tx4);border-color:var(--br);cursor:not-allowed}
.add-btn.go{color:#000 !important;border-color:transparent}
.add-btn.go:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 4px 22px var(--acc2)}
.add-btn.ok{background:#22DD66 !important;color:#000 !important;border-color:transparent !important}

/* ========= INFO STRIP ========= */
.info-row{border-top:2px solid var(--br);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:1200px;margin:0 auto}
.info-c{padding:38px 24px;border-right:2px solid var(--br);text-align:center;transition:background .2s}
.info-c:last-child{border-right:none}
.info-c:hover{background:var(--bg2)}
.info-ic{font-size:26px;margin-bottom:12px}
.info-t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;color:var(--tx)}
.info-d{font-size:14px;color:var(--tx3)}

/* ========= FOOTER ========= */
footer{border-top:2px solid var(--br);padding:40px clamp(14px,5vw,60px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--bg2)}
.f-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:8px;color:var(--tx4)}
.f-links{display:flex;gap:20px;flex-wrap:wrap}
.f-links a{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:3px;color:var(--tx3);text-decoration:none;text-transform:uppercase;transition:color .2s}
.f-links a:hover{color:var(--tx)}
.f-copy{font-size:12px;color:var(--tx4)}

/* ========= CART PANEL ========= */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);z-index:900;opacity:0;pointer-events:none;transition:opacity .3s}
.ov.on{opacity:1;pointer-events:all}
.cart-panel{position:fixed;right:0;top:0;bottom:0;width:min(460px,100vw);background:var(--bg);border-left:2px solid var(--br);z-index:1000;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:-10px 0 44px rgba(0,0,0,.45)}
.cart-panel.on{transform:translateX(0)}
.cp-h{padding:22px 24px;border-bottom:2px solid var(--br);display:flex;align-items:center;justify-content:space-between}
.cp-ht{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:5px;color:var(--tx)}
.cp-ht b{color:var(--acc)}
.x-btn{background:none;border:none;color:var(--tx3);font-size:30px;cursor:pointer;line-height:1;transition:color .2s;padding:2px}
.x-btn:hover{color:var(--tx)}
.cp-list{flex:1;overflow-y:auto;padding:12px 18px}
.cp-empty{text-align:center;padding:80px 0;font-family:'Barlow Condensed',sans-serif;font-size:17px;letter-spacing:4px;color:var(--tx4);font-weight:700}
.cp-item{display:flex;gap:13px;padding:13px 0;border-bottom:2px solid var(--br);align-items:center}
.cp-img{width:62px;height:76px;object-fit:cover;background:var(--bg2);border:1px solid var(--br);flex-shrink:0}
.cp-inf{flex:1}
.cp-n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--tx);margin-bottom:3px}
.cp-sz{font-size:13px;color:var(--tx3);margin-bottom:4px}
.cp-pr{font-family:'Bebas Neue',sans-serif;font-size:20px}
.qt{display:flex;flex-direction:column;align-items:center;gap:5px}
.qt-b{width:30px;height:30px;background:var(--bg2);border:2px solid var(--br);color:var(--tx2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s}
.qt-b:hover{background:var(--bg3);color:var(--tx)}
.qt-n{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--tx)}
.cp-foot{padding:20px 22px;border-top:2px solid var(--br)}
.cp-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cp-tl{font-size:12px;letter-spacing:4px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase}
.cp-tv{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--tx)}
.cp-tv span{font-size:17px;color:var(--tx3);margin-left:4px}
.cp-note{font-size:13px;color:var(--tx4);margin-bottom:14px}
.cp-go{width:100%;padding:17px;background:var(--acc);border:none;color:#000;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:5px;cursor:pointer;font-weight:700;border-radius:5px;transition:all .3s}
.cp-go:hover{filter:brightness(1.1);box-shadow:0 6px 28px var(--acc2);transform:translateY(-1px)}

/* ========= CHECKOUT ========= */
.modal{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.87);backdrop-filter:blur(12px);display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .3s}
.modal.on{opacity:1;pointer-events:all}
.modal-box{background:var(--bg);border:2px solid var(--br);width:100%;max-width:600px;padding:38px;animation:up .4s ease;margin:auto;border-radius:8px;box-shadow:var(--sh)}
.m-title{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;color:var(--tx)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.fgrid .full{grid-column:1/-1}
.fg label{display:block;font-size:11px;letter-spacing:3px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;margin-bottom:6px}
.fg input{width:100%;background:var(--bg2);border:2px solid var(--br);color:var(--tx);padding:13px 14px;font-family:'Barlow',sans-serif;font-size:16px;outline:none;transition:border-color .2s;border-radius:4px}
.fg input:focus{border-color:var(--acc)}
.fg input::placeholder{color:var(--tx4)}
.pay-label{font-size:11px;letter-spacing:3px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
.pay-btn{padding:12px 4px;background:var(--bg2);border:2px solid var(--br);color:var(--tx2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;cursor:pointer;border-radius:4px;transition:all .2s;text-align:center}
.pay-btn.on{border-color:var(--acc);color:var(--acc);background:var(--acc2)}
.pay-btn:hover{border-color:var(--br2);color:var(--tx)}
.order-lines{border-top:2px solid var(--br);padding-top:16px;margin-bottom:20px}
.o-row{display:flex;justify-content:space-between;padding:7px 0;font-size:15px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif}
.o-row b{color:var(--tx2);font-weight:700}
.o-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:2px solid var(--br)}
.o-tl{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--tx)}
.o-tv{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--acc)}
.place-btn{width:100%;padding:17px;background:linear-gradient(90deg,var(--acc),#22DD66);border:none;color:#000;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:5px;cursor:pointer;font-weight:700;border-radius:5px;transition:all .3s}
.place-btn:hover{box-shadow:0 6px 28px var(--acc2);transform:translateY(-1px)}
.sec-note{font-size:12px;color:var(--tx4);text-align:center;margin-top:10px;letter-spacing:2px}

/* ========= SUCCESS ========= */
.suc{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .4s}
.suc.on{opacity:1;pointer-events:all}
.suc-in{animation:up .5s ease}
.suc-ic{width:84px;height:84px;border-radius:50%;border:2px solid #22DD66;background:rgba(34,221,102,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:36px}
.suc-t{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,6vw,58px);letter-spacing:5px;color:#22DD66;margin-bottom:8px}
.suc-s{color:var(--tx3);font-size:15px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.suc-e{color:var(--tx2);font-size:16px;margin-bottom:36px}
.back-btn{padding:13px 36px;background:var(--bg2);border:2px solid var(--br2);color:var(--tx2);font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:4px;cursor:pointer;border-radius:5px;transition:all .2s}
.back-btn:hover{border-color:var(--tx);color:var(--tx)}

@media(max-width:768px){
  nav{display:none}
  #themeLbl{display:none}
  .grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr 1fr}
  .stats{flex-wrap:wrap}
  .stat{border-right:none;border-bottom:2px solid var(--br)}
  .sec-head{flex-direction:column}
  .info-c{border-right:none;border-bottom:2px solid var(--br)}
  footer{flex-direction:column;text-align:center}
  .hero-h1{font-size:clamp(72px,22vw,130px)}
}