/* StarBurst 3D: tokens + layout (z projektu „Sklep” w Claude Design) */
:root{--star-cyan:#00efff;--sky:#00bafe;--azure:#0066cb;--steel-blue:#126ea7;--deep-navy:#003b77;--panel-navy:#003f64;--surface:#07121f;--surface-raised:#0d1f33;--ink:#e8f4fb;--ink-muted:#9fb3c6;--line:#1c3550;--brand:#00bafe;--brand-ink:#07121f;--accent:#00efff;--error:#ff8a80;--font-sans:Inter,Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--space-1:4px;--space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--glow:0 0 24px rgba(0,186,254,.45);--raise:0 2px 8px rgba(0,0,0,.5)}
html{scroll-behavior:smooth}
body{margin:0;background:#07121f}
a{color:#00bafe}a:hover{color:#00efff}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #00efff;outline-offset:2px}
.sbw-plate{background-color:#07121f;background-image:linear-gradient(rgba(0,186,254,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,186,254,.07) 1px,transparent 1px),linear-gradient(rgba(0,186,254,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,186,254,.035) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.sbw-card{transition:border-color .15s,transform .15s,box-shadow .15s}
.sbw-card:hover{border-color:#00bafe;transform:translateY(-2px)}
.sbw-tile img{transition:transform .35s}
.sbw-tile:hover img{transform:scale(1.05)}

/* layout */
.sb-wrap{max-width:1240px;margin:0 auto;padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}
.sb-main{display:flex;flex-direction:column;gap:clamp(72px,10vw,112px);padding-bottom:clamp(56px,8vw,96px)}
.sb-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:12px;padding-bottom:12px}
.sb-nav{display:flex;gap:6px 20px;flex:1 1 auto;min-width:0;font:500 13px/20px var(--mono);letter-spacing:.04em;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.sb-nav a{color:#b9cbdb;text-decoration:none;padding:6px 0}
.sb-nav a:hover{color:#00efff}
.sb-h1{margin:0;font:900 clamp(38px,6.6vw,64px)/1.04 var(--font-sans);letter-spacing:-.02em;color:#fff}
.sb-h2{margin:0;font:800 clamp(28px,4.4vw,40px)/1.15 var(--font-sans);letter-spacing:-.01em}
.sb-eyebrow{font:700 13px/16px var(--mono);letter-spacing:.08em;color:#00efff}
.sb-sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px}
.sb-lead{margin:0;max-width:46ch;font:400 16px/24px var(--font-sans);color:var(--ink-muted)}
.sb-hero{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,48px);padding-top:clamp(28px,6vw,56px)}
.sb-hero-frame{flex:1 1 440px;min-width:0;position:relative;height:clamp(360px,62vw,600px)}
.sb-hero-img{position:absolute;left:clamp(16px,5vw,60px);bottom:48px;height:calc(100% - 100px);width:auto;max-width:calc(100% - 120px);object-fit:contain;object-position:left bottom}
.sb-hero-arrow{position:absolute;right:clamp(40px,6vw,64px);bottom:48px;width:2px;height:calc(100% - 100px);background:#00efff;transform-origin:bottom}
.sb-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--line);border-radius:4px;background:rgba(13,31,51,.85);overflow:hidden}
.sb-spec>div{display:flex;flex-direction:column;gap:4px;padding:20px 24px;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.sb-seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0b1828}
.sb-seg button{min-height:44px;padding:10px 18px;border:0;font:700 13px/18px var(--mono);letter-spacing:.04em;cursor:pointer}
.sb-select{min-height:44px;padding:10px 36px 10px 12px;border-radius:4px;border:1px solid var(--line);background:#0b1828 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300efff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);font:700 13px/18px var(--mono);appearance:none;-webkit-appearance:none;cursor:pointer}
.sb-chip{min-height:40px;padding:8px 14px;border-radius:999px;font:700 12px/16px var(--mono);letter-spacing:.03em;cursor:pointer;white-space:nowrap}
.sb-strip-wrap{position:relative}
.sb-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:2px 2px 12px;scrollbar-width:thin;scrollbar-color:#1c3550 transparent}
.sb-strip>button{flex:0 0 clamp(168px,21vw,224px);scroll-snap-align:start}
.sb-strip-btn{position:absolute;top:calc(50% - 40px);width:44px;height:44px;border-radius:50%;border:1px solid #00bafe;background:rgba(7,18,31,.9);color:#00efff;font:700 18px/1 var(--mono);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.sb-strip-btn.l{left:-10px}.sb-strip-btn.r{right:-10px}
@media (hover:none){.sb-strip-btn{display:none}}
.sb-ph{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-bottom:22px}
.sb-explorer{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.sb-detail{flex:1 1 340px;min-width:0;max-width:100%;scroll-margin-top:88px}
.sb-grid-wrap{flex:999 1 480px;min-width:0}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sb-name2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-stage{position:relative;height:480px;cursor:grab;touch-action:pan-y;user-select:none;overflow:hidden}
.sb-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sb-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:clamp(24px,5vw,48px);background:#003f64;border-radius:4px;scroll-margin-top:80px}
.sb-shops{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
section[id]{scroll-margin-top:96px}
@media (min-width:900px){.sb-detail{position:sticky;top:88px;max-width:420px}}
@media (max-width:899px){.sb-nav{order:3;flex-basis:100%}}
@media (max-width:720px){.sb-shops{grid-template-columns:1fr}.sb-stage{height:380px}.sb-hide-sm{display:none}}
@media (max-width:520px){.sb-slots{gap:8px}.sb-slot-name{display:none}.sb-grid{gap:8px}}

/* motion */
@keyframes sbRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes sbPop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sbDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sbGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sbFade{from{opacity:0}to{opacity:1}}
.sb-progress{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#0066cb,#00efff);transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .sb-in1{animation:sbRise .8s cubic-bezier(.2,.7,.2,1) both}
  .sb-in2{animation:sbRise .8s .12s cubic-bezier(.2,.7,.2,1) both}
  .sb-in3{animation:sbRise .8s .24s cubic-bezier(.2,.7,.2,1) both}
  .sb-draw{animation:sbDraw 1.2s .5s cubic-bezier(.2,.7,.2,1) both}
  .sb-float{animation:sbFloat 6s ease-in-out infinite}
  .sb-swap{animation:sbFade .35s ease both}
  @supports (animation-timeline:view()){
    .sb-reveal{animation:sbRise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .sb-pop{animation:sbPop linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .sb-progress{animation:sbGrow linear both;animation-timeline:scroll(root)}
  }
  .sb-io .sb-reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .sb-io .sb-reveal.sb-on{opacity:1;transform:none}
}

/* komponenty systemu StarBurst 3D */
.sb-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 15px/20px var(--font-sans); border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: box-shadow .15s, background .15s; }
.sb-btn--md { padding: 10px 20px; }
.sb-btn--sm { padding: 6px 12px; font-size: 13px; }
.sb-btn--lg { padding: 14px 28px; font-size: 17px; }
.sb-btn--primary { background: var(--brand); color: var(--brand-ink); }
.sb-btn--primary:hover { box-shadow: var(--glow); }
.sb-btn--secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.sb-btn--secondary:hover { background: var(--surface-raised); }
.sb-btn--ghost { background: transparent; color: var(--ink); }
.sb-btn--ghost:hover { color: var(--accent); }
.sb-btn:focus-visible, .sb-lang__opt:focus-visible, .sb-input:focus-visible, .sb-markets__link:focus-visible { outline: 2px solid var(--star-cyan); outline-offset: 2px; }
.sb-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sb-btn__ext { font-size: .9em; }
.sb-tag { display: inline-block; font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--accent); border: 1px solid var(--line); }
.sb-tag--bright { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.sb-lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.sb-lang__opt { font: 600 13px/16px var(--font-sans); letter-spacing: .04em; padding: 8px 10px; background: transparent; color: var(--ink-muted); border: 0; cursor: pointer; }
.sb-lang__opt.is-active { background: var(--brand); color: var(--brand-ink); }
.sb-markets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-sans); }
.sb-markets__label { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-right: var(--space-1); }
.sb-markets__link { font: 600 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.sb-markets__link:hover { border-color: var(--brand); color: var(--accent); }
.sb-markets--compact .sb-markets__link { padding: 4px 8px; font-size: 13px; }
.sb-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-8) var(--space-6); background: var(--surface-raised); border-top: 1px solid var(--line); font-family: var(--font-sans); }
.sb-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.sb-footer__logo { height: 28px; width: auto; align-self: flex-start; }
.sb-footer__mail { color: var(--accent); font: 600 14px/20px var(--font-sans); }
.sb-footer__legal { flex-basis: 100%; margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* dodatki strony statycznej */
.sb-tbtn{min-height:44px;padding:8px 12px;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--ink);font:700 13px/18px var(--mono);cursor:pointer}
.sb-tbtn:hover{border-color:#00bafe}
.sb-hero-frame{aspect-ratio:1/1;height:auto;max-width:600px}
.sb-btn{min-height:44px}
.sb-btn--sm{min-height:36px}
.sb-lang__opt{min-height:36px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}