/* Úvodní stránka – obchody, jak to funguje, projekty, hardware. */

/* ── Obchody s živými daty ── */
.hs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hs-card{--accent:#ff982e;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid #2f4a5e;border-radius:18px;background:linear-gradient(160deg,#112536f2,#07111bf7);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.hs-card:before{content:'';position:absolute;inset:-40% -30% auto auto;width:260px;height:260px;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 70%)}
.hs-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px #0008,0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.hs-card[data-partner=gamivo]{--accent:#ff7d5a}.hs-card[data-partner=kinguin]{--accent:#ffbb52}.hs-card[data-partner=gameseal]{--accent:#4ae0c2}.hs-card[data-partner=ubisoft]{--accent:#7ca8ff}
.hs-card header{display:flex;gap:12px;align-items:flex-start}
.hs-logo{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;border:1px solid var(--accent,#ff982e);background:#07121bd9;color:var(--accent,#ff982e);font-weight:950;font-size:17px;box-shadow:0 0 22px color-mix(in srgb,var(--accent,#ff982e) 22%,transparent)}
.hs-card h3{margin:0;font:950 22px/1.1 var(--display)}
.hs-card header p{margin:5px 0 0;color:#b6cad4;font-size:13px;line-height:1.45}
.hs-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hs-stats div{padding:10px 12px;border-radius:12px;background:#07121bcc;border:1px solid #23394a}
.hs-stats b{display:block;font:950 24px/1 var(--display);color:var(--accent)}
.hs-stats span{font-size:11px;letter-spacing:.4px;color:#9fb7c5;text-transform:uppercase}
.hs-covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hs-covers a{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid #2b4558}
.hs-covers a:hover{border-color:var(--accent)}
.hs-covers img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .3s}
.hs-covers a:hover img{transform:scale(1.06)}
.hs-covers span{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;background:linear-gradient(transparent,#000d);font-size:12px;font-weight:950;color:var(--green);text-align:center}
.hs-cta{margin-top:auto;justify-content:center;text-align:center}
.hs-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.hs-mini{--accent:#ff982e;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid #2b4558;border-radius:14px;background:linear-gradient(130deg,#0f2130ed,#08121fed);transition:border-color .2s,transform .2s}
.hs-mini:hover{border-color:var(--accent);transform:translateY(-2px)}
.hs-mini[data-partner=instant]{--accent:#ff7d32}.hs-mini[data-partner=hrk]{--accent:#64ceff}.hs-mini[data-partner=g2a]{--accent:#b49aff}
.hs-mini .hs-logo{width:40px;height:40px;font-size:14px;border-color:var(--accent);color:var(--accent)}
.hs-mini strong{display:block;font-size:16px}.hs-mini small{display:block;color:#a8bec8;font-size:12px;line-height:1.4}
.hs-mini em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.6px;color:var(--accent);white-space:nowrap}

/* ── Jak to funguje ── */
.hw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.hw-steps li{position:relative;padding:24px 22px 22px;border:1px solid #2b4558;border-radius:18px;background:linear-gradient(150deg,#10263aef,#08121ff2);overflow:hidden}
.hw-steps li>b{position:absolute;right:16px;top:6px;font:950 86px/1 var(--display);color:#ffffff0d}
.hw-ico{display:grid;place-items:center;width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,#ff7b1f33,#ffb15f14);border:1px solid #ff7b1f66;color:var(--orange2)}
.hw-ico svg{width:34px;height:34px}
.hw-steps li:nth-child(2) .hw-ico{background:linear-gradient(135deg,#42d7ff33,#42d7ff0d);border-color:#42d7ff66;color:var(--cyan)}
.hw-steps li:nth-child(3) .hw-ico{background:linear-gradient(135deg,#37d68c33,#37d68c0d);border-color:#37d68c66;color:var(--green)}
.hw-steps h3{margin:16px 0 6px;font:900 22px/1.2 var(--display)}
.hw-steps p{margin:0;color:#b6cad4;font-size:14px;line-height:1.55}
.hw-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:16px;border:1px solid #2b4558;border-radius:16px;overflow:hidden;background:#2b4558}
.hw-strip div{padding:16px 18px;background:#08131df2;text-align:center}
.hw-strip b{display:block;font:950 30px/1.1 var(--display);background:linear-gradient(90deg,var(--orange),var(--orange2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hw-strip span{font-size:12px;color:#9fb7c5;text-transform:uppercase;letter-spacing:.6px}
.hw-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}

/* ── Projekty: velké obrazové bannery ── */
.hp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.hp-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:380px;padding:30px;border:1px solid #3b5367;border-radius:22px;overflow:hidden;box-shadow:0 22px 50px #0008;transition:transform .25s,border-color .25s}
.hp-card:before{content:'';position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;transition:transform .5s}
.hp-card:after{content:'';position:absolute;inset:0;z-index:-1}
.hp-card:hover{transform:translateY(-4px)}
.hp-card:hover:before{transform:scale(1.05)}
.hp-division:before{background-image:url('/assets/division-banner.webp')}
.hp-division:before{background-position:right center}
.hp-division:after{background:linear-gradient(90deg,#061018f7 0%,#061018e6 38%,#06101866 70%,#06101826 100%),linear-gradient(180deg,transparent 55%,#061018 100%)}
.hp-division:hover{border-color:var(--orange)}
.hp-live:before{background-image:url('/assets/hero.webp');background-position:70% center}
.hp-live:after{background:linear-gradient(90deg,#120822f2 0%,#120822d9 45%,#12082255 100%),linear-gradient(180deg,transparent 55%,#0d0718 100%)}
.hp-live:hover{border-color:var(--purple)}
.hp-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:9px;background:#0009;border:1px solid #ffffff2e;font-size:11px;font-weight:900;letter-spacing:1.2px;color:#ffd2a6}
.hp-dot{width:9px;height:9px;border-radius:50%;background:#ff3b4f;box-shadow:0 0 0 0 #ff3b4f99;animation:hp-pulse 1.6s infinite}
@keyframes hp-pulse{70%{box-shadow:0 0 0 10px #ff3b4f00}100%{box-shadow:0 0 0 0 #ff3b4f00}}
.hp-card h3{margin:0;font:950 clamp(28px,3vw,44px)/1.05 var(--display);letter-spacing:-.5px;text-shadow:0 4px 24px #000}
.hp-card p{margin:0;max-width:52ch;color:#d3e0e7;font-size:15px;line-height:1.55}
.hp-card .btn{align-self:flex-start;margin-top:6px}

/* ── Hardware ── */
.hh-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hh-grid a{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 18px 18px;border:1px solid #2c5870;border-radius:16px;background:linear-gradient(150deg,#0f2a3cf2,#081723f5);overflow:hidden;transition:transform .2s,border-color .2s}
.hh-grid a:before{content:'';position:absolute;right:-50px;top:-50px;width:150px;height:150px;background:radial-gradient(circle,#42d7ff2e,transparent 70%)}
.hh-grid a:hover{transform:translateY(-3px);border-color:var(--cyan)}
.hh-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:15px;border:1px solid #42d7ff55;background:#42d7ff14;color:var(--cyan)}
.hh-ico svg{width:34px;height:34px}
.hh-grid strong{font-size:17px}
.hh-grid small{color:#a6c3d1;font-size:13px;line-height:1.4}
.hh-grid em{margin-top:auto;padding-top:10px;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.7px;color:var(--cyan)}

@media (max-width:1280px){.hs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.hs-minis,.hw-steps,.hp-grid{grid-template-columns:1fr}.hw-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-card{min-height:320px;padding:22px}}
@media (max-width:560px){.hs-grid{grid-template-columns:1fr}.hh-grid{grid-template-columns:1fr}}