/* === HERO + OVERLAY HEADER (base + modifiers) === */
.hero { position: relative; min-height: 75vh; display: grid; place-items: stretch; overflow: hidden; padding: 0; }
.hero::before { content: none; }
.bg-video, .hero .bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); z-index: 0; }
.overlay-gradient, .hero .overlay-gradient { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 20% 70%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.03) 65%, rgba(255,255,255,0.1) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.6) 85%); pointer-events: none; z-index: 1; }

/* Glass variant via modifier on header */
.header--glass .logo,
.header--glass .nav,
.header--glass,
.header--glass .pill-btn { background: var(--color-overlay); border: 1px solid var(--color-glass-border); border-radius: var(--radius-pill); backdrop-filter: blur(6px); color: #eaf2ff; }
.header-actions { margin-left: auto; display:flex; gap:10px; align-items:center; }
.pill-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-radius:var(--radius-pill); text-decoration:none; }
.pill-btn .icon { width:24px; height:24px; display:grid; place-items:center; }
.cart-count { background:#22c55e; color:#04150f; font-weight:700; font-size:.75rem; min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Hero content */
.hero .container { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; height: 100%; padding-top: 180px; padding-bottom: 80px; max-width: 1400px; }
.hero .logo-link { margin-bottom: 1rem; display: inline-block; }
.hero .logo-svg { width: 120px; height: 120px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); }
.hero-title { color: #fff; font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1rem; }
.hero-description { color: #dbe5ff; max-width: 55ch; font-size: clamp(1rem, 2vw, 1.125rem); }
.badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.1); color: #e7eeff; border: 1px solid var(--color-glass-border); font-size: .85rem; margin-bottom: .75rem; }
.hero-buttons { display: flex; gap: .75rem; margin-top: 1.25rem; }
.floating-card { background: rgba(20,24,35,.68); border:1px solid var(--color-glass-border); color:#eaf2ff; border-radius:20px; padding:1rem; width: min(380px, 90%); box-shadow: 0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(8px); justify-self: end; }
.floating-card { transition: transform .25s ease, box-shadow .25s ease; }
.floating-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.floating-card .card-media { height: 160px; border-radius: 14px; background: rgba(255,255,255,.08); display:grid; place-items:center; margin-bottom:.8rem; }
.floating-card .card-title { font-weight:700; margin: .2rem 0 .4rem;}
.card-title { padding-top: 30px; font-size: 1.4rem; }
.floating-card .card-text { color:#cfe0ff; font-size:.95rem; }
.floating-card .card-actions { display:flex; justify-content:space-between; align-items:center; margin-top:.75rem; }
.play-btn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--color-danger); color:#072410; text-decoration:none; font-weight:700; }
.hero-cards { display: flex; flex-wrap: nowrap; gap: 16px; justify-content: flex-end; }
.hero-cards .floating-card { width: 300px; }
.bottom-cta { position: absolute; right: 24px; bottom: 22px; z-index: 11; }
.bottom-cta a { display:flex; align-items:center; gap:.75rem; padding:.9rem 1.1rem; border-radius:16px; background:rgba(20,24,35,.72); border:1px solid var(--color-glass-border); color:#eaf2ff; text-decoration:none; }
.highlight { color: var(--color-danger); }
.page-content { position: relative; z-index: 15; background: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0 -8px 40px rgba(0,0,0,.35); transform: translateY(0); }
.card-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; padding: 110px 1rem 1.25rem; }
  .floating-card { justify-self: start; }
  .header--glass { background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0)); }
}