/* KeyVault — Home page. Mirrors Figma "Home — Desktop 1440" / "Home — Mobile 390"; components: Hero/Featured, Section header, Platform tile, Tab, Promo card, Step. */
.home{padding:var(--space-32) 0 var(--space-64)}
.home>.wrap{display:flex;flex-direction:column;gap:var(--space-48)}
/* Section order on desktop follows Figma Home-Desktop: Hero, Popular, Trust, Platforms, Games under €1, Deals (mobile keeps DOM order) */
@media (min-width:1024px){
  .home>.wrap>*{order:10}
  .home>.wrap>.sr,.home>.wrap>.hero{order:0}
  .home>.wrap>.popular{order:1}
  .home>.wrap>.trust{order:2}
  .home>.wrap>[aria-labelledby=h-plat]{order:3}
  .home>.wrap>.cheap{order:4}
  .home>.wrap>.deals{order:5}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero/Featured — Device=Desktop */
.hero{position:relative;height:400px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface);display:flex;align-items:center;gap:var(--space-48);padding:var(--space-48)}
.hero:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border-default);pointer-events:none}
.hero .bd{position:absolute;left:0;top:-46%;width:100%;height:192%;object-fit:cover;filter:var(--blur-layer-40);transform:scale(1.04)}
.hero .scr{position:absolute;inset:0;background:var(--gradient-hero-scrim)}
.hero .hl{position:relative;flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.hero .hc{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hbadge{height:24px;padding:0 8px;border-radius:var(--radius-sm);background:var(--status-discount);color:var(--status-discount-text);font:500 14px/24px var(--ff)}
.hero h2{color:var(--text-primary);text-wrap:balance}
.hhd{display:flex;flex-direction:column;gap:var(--space-8)}
.hmeta{display:flex;align-items:center;gap:var(--space-8);color:var(--text-secondary);font:400 14px/20px var(--ff)}
.hprice{display:flex;align-items:baseline;gap:var(--space-12)}
.hprice .cur{font:700 32px/40px var(--ff);letter-spacing:-.5px;color:var(--text-primary)}
.hprice s{font:400 14px/20px var(--ff);color:var(--text-tertiary)}
.hact{display:flex;align-items:center;gap:var(--space-12)}
.hctl{display:flex;align-items:center;gap:var(--space-16)}
.hctl .arr{display:flex;gap:var(--space-8)}
.dots{display:flex;align-items:center;gap:var(--space-8)}
.dots button{width:var(--space-8);height:var(--space-8);position:relative}
.dots button:after{content:"";position:absolute;left:0;top:0;width:var(--space-24);height:var(--space-8);border-radius:var(--radius-full);background:var(--border-strong);transform:scaleX(.3333);transform-origin:left;transition:transform var(--dur-slow) ease-out,background var(--dur-fast)}
.dots button:before{content:"";position:absolute;inset:-8px -4px}
.dots button[aria-current=true]{width:var(--space-24)}
.dots button[aria-current=true]:after{transform:scaleX(1);background:var(--accent-primary)}
.hero .hm{position:relative;flex:none;width:504px;height:288px;border-radius:var(--radius-lg);overflow:hidden;display:block}
.hero .hm img{width:100%;height:100%;object-fit:cover}
.hero .fade{animation:none}

/* Section header */
.sec{display:flex;flex-direction:column;gap:var(--space-24)}
.sec-h{display:flex;align-items:center;gap:var(--space-16);min-height:40px}
.sec-h h2{flex:1}
.tlink{display:inline-flex;align-items:center;gap:var(--space-4);height:28px;color:var(--accent-text);font:500 14px/20px var(--ff)}
.tlink:hover{color:var(--text-primary)}

/* Platform tile */
.plats{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-16)}
.ptile{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.ptile:hover{background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--border-strong)}
.ptile img{flex:none}
.ptile b{display:block;font:500 16px/24px var(--ff);color:var(--text-primary)}
.ptile small{display:block;font:400 14px/20px var(--ff);color:var(--text-tertiary)}

/* Tab */
.tabs{display:inline-flex;align-self:flex-start;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default)}
.tab{height:36px;white-space:nowrap;padding:0 var(--space-16);border-radius:var(--radius-md);font:500 14px/20px var(--ff);color:var(--text-secondary);transition:background var(--dur-fast),color var(--dur-fast)}
.tab:hover{color:var(--text-primary)}
.tab[aria-selected=true]{background:var(--bg-hover);color:var(--text-primary)}

/* Card rows */
.hgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-16)}
.hgrid .card{width:auto}

/* Collections */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.cols .promo{height:280px;border-radius:var(--radius-md)}

/* Step */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32);padding:var(--space-32);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);list-style:none}
.step{display:flex;gap:var(--space-16)}
.step .n{flex:none;width:32px;height:32px;border-radius:var(--radius-full);background:var(--accent-subtle);color:var(--accent-text);font:500 14px/32px var(--ff);text-align:center}
.step div{display:flex;flex-direction:column;gap:var(--space-4)}
.step b{font:500 16px/24px var(--ff);color:var(--text-primary)}
.step p{font:400 14px/20px var(--ff);color:var(--text-secondary);text-wrap:pretty}

/* Feature (trust row): tile 48 r12 accent/subtle, g16; title Body/M Medium, description Body/S */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-32)}
.feat{display:flex;align-items:center;gap:var(--space-16)}
.feat .ft{--icon:20px;flex:none;width:var(--space-40);height:var(--space-40);border-radius:var(--radius-sm);background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--border-default);color:var(--text-secondary);display:grid;place-items:center}
.feat b{display:block;font:500 16px/24px var(--ff);color:var(--text-primary)}
.feat p{margin-top:var(--space-4);font:500 12px/16px var(--ff);color:var(--text-secondary)}

/* Deals banner — Device=Desktop: p40 320, g16; fanned covers 240x136 on accent glow; Countdown units 64x72 */
.deals{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-surface);padding:var(--space-40) 320px;display:flex;flex-direction:column;align-items:center;gap:var(--space-16)}
.deals:after,.cat:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border-default);pointer-events:none}
.d-art{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;width:240px;height:240px;border-radius:var(--radius-full);background:var(--accent-glow);filter:var(--blur-layer-40)}
.dc{position:absolute;width:240px;height:136px;object-fit:cover;border-radius:var(--radius-md);outline:1px solid var(--border-strong);outline-offset:-1px;box-shadow:var(--fx-dropdown);transform-origin:0 0}
.dc.m,.glow.m{display:none}
.d-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center}
.d-pill{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-12);border-radius:var(--radius-full);background:var(--accent-subtle);color:var(--accent-text);font:600 12px/16px var(--ff);letter-spacing:.4px;text-transform:uppercase}
.d-pill svg{width:16px;height:16px}
.d-body p{font:400 16px/24px var(--ff);color:var(--text-secondary);text-wrap:pretty}
.countdown{display:flex;gap:var(--space-8)}
.cu{width:64px;height:72px;padding:var(--space-8) 0;display:flex;flex-direction:column;align-items:center;border-radius:var(--radius-md);background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--border-default)}
.cu b{font:700 32px/40px var(--ff);letter-spacing:-.5px;color:var(--text-primary)}
.cu small{font:500 12px/16px var(--ff);color:var(--text-tertiary)}

/* Category card (Gift cards, Software): 664x240 r16; text p32 340 wide; Voucher 160x100 cascade on glow */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)}
.cat{position:relative;display:block;height:240px;border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden}
.cat:hover:after{box-shadow:inset 0 0 0 1px var(--border-strong)}
.cat .ct{position:absolute;left:0;top:0;bottom:0;width:340px;padding:var(--space-32) 0 var(--space-32) var(--space-32);display:flex;flex-direction:column;justify-content:space-between;z-index:1}
.cat .ct p{margin-top:var(--space-8);font:400 16px/24px var(--ff);color:var(--text-secondary)}
.cn{display:inline-flex;align-items:center;gap:var(--space-4);font:500 14px/20px var(--ff);color:var(--accent-text)}
.ca{position:absolute;right:8px;top:0;width:320px;height:240px}
.ca .glow{width:200px;height:200px;left:60px;top:20px}
.vch{position:absolute;width:160px;height:100px;padding:var(--space-12);display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--radius-md);background:var(--bg-elevated);box-shadow:var(--fx-menu),inset 0 0 0 1px var(--border-strong);transform-origin:0 0}
.vch img{width:24px;height:24px}
.vch b{display:block;font:500 14px/20px var(--ff);color:var(--text-primary)}
.vch small{display:block;font:500 12px/16px var(--ff);color:var(--text-tertiary)}
.v0{left:16px;top:118px;transform:rotate(6deg)}.v1{left:86px;top:72px;transform:rotate(2deg)}.v2{left:156px;top:26px;transform:rotate(-3deg)}

/* Genre tile: 128 high r12, cover + promo shade, label H3 white */
.genres{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-16)}
.genre{position:relative;height:128px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-surface) center/cover;display:flex;align-items:flex-end;padding:var(--space-16)}
.genre:before{content:"";position:absolute;inset:0;background:var(--gradient-shade-promo)}
.genre span{position:relative;font:600 20px/28px var(--ff);color:var(--static-white)}

/* Device tile: p24 16, g12, r16; icon tile 64 r12 */
.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.dev{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);padding:var(--space-24) var(--space-16);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);text-align:center;transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.dev:hover{background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--border-strong)}
.dt{width:64px;height:64px;border-radius:var(--radius-md);background:var(--bg-elevated);display:grid;place-items:center;transition:background var(--dur-fast)}
.dev:hover .dt{background:var(--bg-hover)}
.dev b{display:block;font:500 16px/24px var(--ff);color:var(--text-primary)}
.dev small{display:block;margin-top:var(--space-4);font:400 14px/20px var(--ff);color:var(--text-tertiary)}

/* Rating summary + Review card */
.rating{display:flex;align-items:center;gap:var(--space-16)}
.rating b{color:var(--text-primary)}
.rating p{margin-top:var(--space-4);font:400 14px/20px var(--ff);color:var(--text-tertiary)}
.stars{display:flex;gap:var(--space-4);color:var(--status-preorder)}
.stars svg{width:16px;height:16px}
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.rev{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-20);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default)}
.ra{display:flex;align-items:center;gap:var(--space-12);min-width:0}.ra div{min-width:0}
.av{flex:none;width:40px;height:40px;border-radius:var(--radius-full);background:var(--accent-subtle);color:var(--accent-text);display:grid;place-items:center;font:500 14px/20px var(--ff)}
.ra b{display:block;font:500 14px/20px var(--ff);color:var(--text-primary)}
.ra small{display:block;font:500 12px/16px var(--ff);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev p{font:400 14px/20px var(--ff);color:var(--text-secondary)}
.rev>small{font:500 12px/16px var(--ff);color:var(--text-tertiary)}

/* Guide card: p12 12 16, g16, r16; media 168 r8; body p0 4 g8 */
.guides{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.guide{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-12) var(--space-12) var(--space-16);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);transition:background var(--dur-fast)}
.guide:hover{background:var(--bg-elevated)}
.guide img{width:100%;height:168px;object-fit:cover;border-radius:var(--radius-sm)}
.gb{display:flex;flex-direction:column;gap:var(--space-8);padding:0 var(--space-4)}
.gm{display:flex;align-items:center;gap:var(--space-8);font:500 12px/16px var(--ff);color:var(--text-tertiary)}
.gm svg{width:16px;height:16px}
.gt{font:600 12px/16px var(--ff);letter-spacing:.4px;color:var(--accent-text)}
.guide b{font:500 16px/24px var(--ff);color:var(--text-primary)}
.gx{font:400 14px/20px var(--ff);color:var(--text-secondary)}

/* FAQ: about 400 + list; FAQ item p20 24, g12, r16; open = border/strong, chevron rotates */
.faq{display:flex;align-items:flex-start;gap:var(--space-48)}
.faq-about{flex:none;width:400px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-24)}
.faq-about p{font:400 16px/24px var(--ff);color:var(--text-secondary)}
.faq-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-12)}
.qa{border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default)}
.qa[open]{box-shadow:inset 0 0 0 1px var(--border-strong)}
.qa summary{list-style:none;display:flex;align-items:center;gap:var(--space-16);padding:var(--space-20) var(--space-24);font:500 16px/24px var(--ff);color:var(--text-primary);cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{flex:none;margin-left:auto;color:var(--text-secondary);transition:transform var(--dur-base) ease-out}
.qa[open] summary svg{transform:rotate(180deg);color:var(--text-primary)}
.qa p{margin-top:-8px;padding:0 var(--space-24) var(--space-20);font:400 14px/20px var(--ff);color:var(--text-secondary)}

/* Hero/Featured — Device=Mobile and mobile layout */
@media (max-width:1023px){
  .home{padding:var(--space-16) 0 var(--space-48)}
  .home>.wrap{gap:40px}
  .hero{height:auto;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .hero .bd,.hero .scr{display:none}
  .hero .hm{order:-1;width:100%;height:auto;aspect-ratio:358/204;border-radius:0}
  .hero .hl{padding:var(--space-16);gap:var(--space-16)}
  .hero .hc{gap:var(--space-16)}
  .hero h2{font:700 24px/32px var(--ff);letter-spacing:-.3px}
  .hprice .cur{font:700 24px/32px var(--ff);letter-spacing:-.3px}
  .hact{align-self:stretch}.hact .btn{flex:1}
  .hctl .arr{display:none}
  .sec{gap:var(--space-16)}
  .scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:var(--space-12)}
  .scroll::-webkit-scrollbar{display:none}
  .scroll>*{flex:0 0 auto;scroll-snap-align:start}
  .plats{gap:var(--space-8)}.plats>.ptile{width:160px;align-items:flex-start}
  .popular .hgrid{grid-template-columns:repeat(2,1fr);gap:var(--space-12)}
  .popular .hgrid>.card:nth-child(n+5){display:none}
  .cheap .hgrid{display:flex}.cheap .hgrid>.card{width:148px}
  .cols{display:flex}.cols>.promo{width:248px}
  .steps{grid-template-columns:1fr;gap:var(--space-20);padding:var(--space-20)}

  .trust{grid-template-columns:1fr;gap:var(--space-16)}
  .deals{padding:0 0 var(--space-24)}
  .d-art{position:relative;inset:auto;width:100%;height:152px;flex:none;overflow:hidden}
  .dc.d,.glow:not(.m){display:none}.dc.m,.glow.m{display:block}
  .dc.m{width:168px;height:96px}.glow.m{width:160px;height:160px}
  .d-body{align-self:stretch;padding:0 var(--space-20)}
  .d-body h2{font:700 24px/32px var(--ff);letter-spacing:-.3px}
  .d-body p{font:400 14px/20px var(--ff)}
  .d-body .btn{align-self:stretch}
  .cats{grid-template-columns:1fr;gap:var(--space-12)}
  .cat{height:248px}
  .cat .ct{right:0;width:auto;padding:var(--space-20)}
  .cat .ct h2{font:600 20px/28px var(--ff);letter-spacing:0}
  .cat .ct p{font:400 14px/20px var(--ff)}
  .ca{right:4px;top:auto;bottom:0;width:200px;height:148px}
  .ca .glow{width:150px;height:150px;left:40px;top:0}
  .v0{left:0;top:70px;transform:rotate(5deg) scale(.75)}.v1{left:40px;top:35px;transform:rotate(2deg) scale(.75)}.v2{left:80px;top:0;transform:rotate(-3deg) scale(.75)}
  .genres{display:flex}.genre{flex:none;width:160px;height:96px}
  .devices{grid-template-columns:1fr 1fr;gap:var(--space-12)}
  .reviews,.guides{display:flex}.rev,.guide{flex:none;width:280px}
  .faq{flex-direction:column-reverse;align-items:stretch;gap:var(--space-16)}
  .faq-about{width:auto;gap:var(--space-16)}
  .faq-about p{font:400 14px/20px var(--ff)}
  .faq-about .btn{align-self:stretch}
  .qa summary{padding:var(--space-20) var(--space-16)}
  .qa p{padding:0 var(--space-16) var(--space-20)}
}