/* SabexPlay Phase 4 — Brand / UI system */
:root{
  --bg:#05070b;
  --bg-2:#080c12;
  --card:#0b111a;
  --soft:#0f1824;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#f7f8fb;
  --muted:#8b95a5;
  --ink:#070a0f;
  --accent:#baff45;
  --accent-2:#805cff;
  --cyan:#57d7ff;
  --amber:#ffca62;
  --pink:#ff65b5;
  --white:#fff;
  --shadow:0 30px 90px rgba(0,0,0,.48);
  --radius:26px;
  --max:1260px;
}

html{background:#05070b}
body{
  background:
    radial-gradient(circle at 12% 10%,rgba(128,92,255,.12),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(186,255,69,.08),transparent 28%),
    linear-gradient(180deg,#05070b 0%,#060910 48%,#05070b 100%);
  min-height:100vh;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 72%);
}
.page-noise{opacity:.025;background-size:13px 13px}
.section-shell{width:min(var(--max),calc(100% - 56px))}

/* top bar + navigation */
.announcement{
  min-height:36px;background:#030406;border-bottom-color:rgba(255,255,255,.07);
  color:#c7ced9;font-size:11px;letter-spacing:.015em;
}
.announcement strong{color:#fff}.announcement-dot{background:var(--accent);box-shadow:0 0 18px rgba(186,255,69,.7)}
.announcement-note{color:#657080}
.site-header{
  height:82px;background:rgba(5,7,11,.72);backdrop-filter:blur(26px) saturate(145%);
  border-bottom-color:rgba(255,255,255,.07);
}
.brand{gap:12px}.brand-mark{
  width:38px;height:38px;border-radius:12px;font-size:0;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--accent),#73ff9c 52%,var(--cyan));
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 35px rgba(186,255,69,.12);
}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;left:10px;width:19px;height:6px;background:#05070b;border-radius:20px;transform:skewX(-28deg)}
.brand-mark:before{top:10px}.brand-mark:after{bottom:10px;left:8px}
.brand-word{font-size:21px;letter-spacing:-.055em;color:#fff}.brand-word span{color:var(--accent)}
.desktop-nav{gap:6px;padding:5px;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.025);border-radius:999px}
.desktop-nav a{padding:9px 14px;border-radius:999px;color:#8e98a8;font-size:12px;font-weight:700;transition:.2s ease}
.desktop-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.region-control{height:42px;background:#0a0f16;border-color:rgba(255,255,255,.09);border-radius:999px;padding:0 14px}
.region-control select{font-size:12px;font-weight:700}.globe{color:var(--accent)}
.button{border-radius:999px;min-height:45px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.button-primary{background:var(--accent);color:#071006;box-shadow:none}
.button-primary:hover{box-shadow:0 13px 34px rgba(186,255,69,.18)}
.button-ghost{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10)}
.button-light{background:#fff;color:#080b10}
.button-large{min-height:56px;padding:0 24px}

/* hero */
.hero{min-height:735px;grid-template-columns:1.04fr .96fr;gap:64px;padding-block:88px 90px}
.eyebrow{
  color:#d7ff9b;border-color:rgba(186,255,69,.18);background:rgba(186,255,69,.055);padding:8px 12px;font-size:10px
}
.hero h1{font-size:clamp(64px,7.4vw,108px);letter-spacing:-.068em;line-height:.86;margin:30px 0 28px;max-width:760px}
.hero h1 em,.section-heading em,.closing-cta em,.how-section em{color:var(--accent);text-shadow:0 0 35px rgba(186,255,69,.08)}
.hero-lead{max-width:620px;font-size:17px;color:#929dae;line-height:1.8}
.hero-actions{margin-top:34px}.hero-actions .button-primary span{font-size:18px}
.hero-proof{margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);max-width:620px}
.hero-proof strong{font-size:13px;color:#fff}.hero-proof span{color:#687383;font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.hero-proof i{background:rgba(255,255,255,.08)}
.hero-stage{min-height:560px;perspective:1100px}
.stage-glow{width:520px;height:520px;left:4%;top:20px;background:radial-gradient(circle,rgba(128,92,255,.24),rgba(87,215,255,.08) 42%,transparent 68%);filter:blur(18px)}
.featured-card{
  inset:52px 30px 48px 38px;padding:30px;border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 20%),
    radial-gradient(circle at 78% 25%,rgba(186,255,69,.15),transparent 26%),
    radial-gradient(circle at 20% 90%,rgba(128,92,255,.24),transparent 38%),
    #0a1019;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px rgba(0,0,0,.56);
  transform:rotate(-2.2deg) rotateY(-3deg);
}
.featured-card:before{background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.045) 40%,transparent 42%)}
.featured-card:after{right:-130px;bottom:-170px;width:410px;height:410px;background:radial-gradient(circle,rgba(186,255,69,.12),transparent 63%)}
.featured-topline>span:first-child{font-size:9px;color:#a8b2c1}.live-pill{background:var(--accent);color:#071006;padding:6px 9px}
.featured-title{font-size:106px;line-height:.78;margin-top:74px;color:#fff}.featured-title span{font-size:142px;color:var(--accent);letter-spacing:-.085em}
.featured-card>p{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#6d7889}
.featured-bottom{bottom:28px}.featured-bottom strong{font-size:25px}.platform-tags span{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11);color:#d2d8e2}
.controller-art{top:178px;right:10px;opacity:.90;filter:drop-shadow(0 18px 24px rgba(0,0,0,.4))}
.controller-body{background:linear-gradient(145deg,#f7f9fe,#aeb9c9);box-shadow:inset 0 -12px 24px #97a4b7}
.float-card{background:rgba(8,12,18,.88);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.11);box-shadow:0 20px 56px rgba(0,0,0,.42)}
.float-card>span{background:rgba(186,255,69,.08);color:var(--accent)}
.float-region{right:-6px;top:82px}.float-order{left:-15px;bottom:92px}.float-support{right:0;bottom:38px}

/* trust */
.trust-strip{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.025);backdrop-filter:blur(18px);border-radius:26px;margin-bottom:128px;overflow:hidden}
.trust-strip article{padding:24px;border-right-color:rgba(255,255,255,.07)}
.trust-strip article>span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:rgba(186,255,69,.07);font-size:16px}
.trust-strip strong{font-size:12px}.trust-strip small{font-size:10px;color:#657181}

/* section headings */
.kicker{color:var(--accent);font-size:10px;letter-spacing:.18em}.section-heading{margin-bottom:44px}.section-heading h2,.closing-cta h2,.how-section h2,.assurance h2{font-size:clamp(42px,5vw,68px);letter-spacing:-.065em}.section-heading>p{color:#778293;font-size:13px;line-height:1.8}

/* catalogue */
.catalogue,.plus-section,.faq{padding-bottom:128px}.catalogue-toolbar{margin:16px 0 26px}.filter-tabs{gap:7px;padding:5px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:999px}
.filter{border:0;background:transparent;color:#778293;padding:9px 14px}.filter.active{background:#fff;color:#070a0f;box-shadow:0 8px 22px rgba(0,0,0,.24)}
.region-note{padding:9px 12px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.02)}
.product-grid{gap:20px}.product-card{position:relative;background:#090e15;border-color:rgba(255,255,255,.08);border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px transparent;transition:.28s ease}
.product-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.16);box-shadow:0 28px 72px rgba(0,0,0,.35)}
.product-visual{height:300px;padding:25px}.product-visual:before{inset:-40%;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 62%);transform:rotate(18deg)}
.product-visual:after{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.07);border-radius:19px;pointer-events:none}
.visual-fc{background:radial-gradient(circle at 78% 20%,rgba(186,255,69,.29),transparent 34%),linear-gradient(145deg,#0c2014,#07100d 53%,#0b121b)}
.visual-nba{background:radial-gradient(circle at 72% 18%,rgba(255,202,98,.32),transparent 34%),linear-gradient(145deg,#251605,#0e0b08 52%,#12131a)}
.visual-gta{background:radial-gradient(circle at 75% 17%,rgba(255,101,181,.32),transparent 34%),radial-gradient(circle at 10% 90%,rgba(128,92,255,.26),transparent 36%),linear-gradient(145deg,#1b0b22,#0b0b11 60%,#101522)}
.visual-label{font-size:9px;color:#d5dbe5}.visual-monogram{font-size:58px;line-height:.77;letter-spacing:-.07em;bottom:58px}.visual-monogram strong{font-size:74px;color:var(--accent)}
.visual-nba .visual-monogram strong{color:var(--amber)}.visual-gta .visual-monogram strong{color:#ff79c2}
.visual-edition{bottom:24px;font-size:9px;background:rgba(0,0,0,.30);backdrop-filter:blur(8px)}
.product-body{padding:24px}.product-heading-row h3{font-size:20px;letter-spacing:-.04em}.overline{font-size:9px;letter-spacing:.13em;color:#667283}.status{font-size:8px;padding:6px 8px}.status-live{background:rgba(186,255,69,.08);color:var(--accent)}.status-preorder{background:rgba(255,101,181,.08);color:#ff8ec8}
.product-subtitle{font-size:10px;color:#626e7f}.platform-row span{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.09)}
.product-footer{border-top-color:rgba(255,255,255,.07)}.product-footer strong{font-size:21px}.round-action{width:46px;height:46px;border-color:rgba(255,255,255,.09);background:#0e1621}.round-action:hover{background:var(--accent);color:#071006;transform:rotate(-10deg)}
.request-banner{margin-top:24px;padding:34px;border-radius:28px;color:#071006;background:radial-gradient(circle at 85% 10%,rgba(128,92,255,.4),transparent 36%),linear-gradient(120deg,#baff45,#8df775 56%,#62d6ff)}
.request-banner h3{font-size:31px}.request-banner p{color:#254024}.request-banner .kicker{color:#1f4620}

/* Plus plans */
.plus-section{padding-top:16px}.plan-grid{gap:18px}.plan-card{min-height:350px;padding:29px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),#090f17;border-color:rgba(255,255,255,.08);border-radius:28px;overflow:hidden}
.plan-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}
.plan-card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-4px)}
.featured-plan{background:radial-gradient(circle at 100% 0,rgba(186,255,69,.11),transparent 35%),linear-gradient(160deg,#0c151f,#0a1018);border-color:rgba(186,255,69,.22)}
.popular-badge{background:var(--accent);color:#071006;top:22px;right:22px}.plan-icon{background:rgba(186,255,69,.07);color:var(--accent);border:1px solid rgba(186,255,69,.11)}
.plan-card h3{font-size:36px}.plan-copy{color:#717d8d}.plan-price strong{font-size:32px}.button-plan{border-radius:14px;background:#0f1824;border-color:rgba(255,255,255,.08)}.button-plan:hover{background:#fff;color:#071006}
.annual-card{border-color:rgba(128,92,255,.25);background:radial-gradient(circle at 85% 40%,rgba(128,92,255,.20),transparent 35%),#0a1018;border-radius:28px;padding:27px 30px}.annual-kicker{color:#a991ff}.annual-card p{color:#717d8d}.plan-disclaimer{color:#535f70}

/* how it works */
.how-section{position:relative;background:#070b11;color:#fff;padding:118px 0;margin-bottom:118px;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden}
.how-section:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-240px;background:radial-gradient(circle,rgba(128,92,255,.18),transparent 66%)}
.section-heading.light>p{color:#737f90}.section-heading.light .kicker{color:var(--accent)}
.steps-grid{gap:14px}.steps-grid article{position:relative;min-height:225px;background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08);border-radius:24px;color:#fff;overflow:hidden}
.steps-grid article:after{content:"";position:absolute;right:-28px;bottom:-28px;width:100px;height:100px;border-radius:50%;background:rgba(186,255,69,.03)}
.steps-grid article span{color:var(--accent);font-size:12px}.steps-grid h3{font-size:26px}.steps-grid p{color:#737f90}

/* assurance / FAQ / CTA */
.assurance{padding-bottom:118px}.assurance-panel{padding:48px;background:radial-gradient(circle at 15% 100%,rgba(128,92,255,.15),transparent 35%),#090f17;border-color:rgba(255,255,255,.08);border-radius:30px}.assurance h2{font-size:52px}.assurance-list>div{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07);border-radius:17px}.assurance-list>div>span{color:var(--accent)}.assurance-list small{color:#667283}
.faq-list{border-top-color:rgba(255,255,255,.08)}.faq details{border-bottom-color:rgba(255,255,255,.08)}.faq summary{font-size:19px;padding:26px 4px}.faq details p{color:#748092}
.closing-cta{position:relative;overflow:hidden;padding:48px;border-radius:30px;background:linear-gradient(125deg,#baff45,#85f78b 58%,#62d7ff);color:#061006}
.closing-cta:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-100px;top:-170px;background:rgba(128,92,255,.33)}.closing-cta>*{position:relative;z-index:2}.closing-cta p{color:#284528}.closing-cta .kicker{color:#21491f}
.footer{border-top-color:rgba(255,255,255,.08)}.footer-main p{color:#586475}.footer-links{color:#8792a1}.footer-bottom{border-top-color:rgba(255,255,255,.07);color:#4d5969}

/* drawer */
.drawer-backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(10px)}
.order-drawer{background:radial-gradient(circle at 100% 0,rgba(128,92,255,.12),transparent 28%),#070b11;border-left-color:rgba(255,255,255,.09);padding:30px;box-shadow:-40px 0 100px rgba(0,0,0,.58)}
.drawer-head h2{font-size:38px;letter-spacing:-.06em}.drawer-close{background:#0d141e;border-color:rgba(255,255,255,.09)}
.selected-product{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08);border-radius:18px}.order-drawer input,.order-drawer select,.order-drawer textarea{background:#0b121c;border-color:rgba(255,255,255,.09);border-radius:14px}.order-drawer input:focus,.order-drawer select:focus,.order-drawer textarea:focus{border-color:rgba(186,255,69,.5);box-shadow:0 0 0 3px rgba(186,255,69,.05)}
.drawer-summary{background:rgba(186,255,69,.045);border-color:rgba(186,255,69,.14)}.drawer-summary strong{color:var(--accent)}
.toast{background:#fff;color:#06090e;border-radius:999px}

/* motion */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.product-card,.plan-card,.trust-strip article,.steps-grid article{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}

@media(max-width:1000px){
  .desktop-nav{display:none}.hero{grid-template-columns:1fr;gap:28px}.hero-stage{min-height:540px}.trust-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .section-shell{width:min(100% - 28px,var(--max))}.site-header{height:70px}.announcement{min-height:34px}.brand-mark{width:35px;height:35px}.brand-word{font-size:18px}
  .hero{padding-block:56px 58px}.hero h1{font-size:58px;line-height:.88;margin:24px 0}.hero-lead{font-size:14px}.hero-proof{margin-top:38px;padding-top:18px}
  .hero-stage{min-height:455px}.featured-card{inset:42px 5px 32px 5px;padding:22px}.featured-title{font-size:72px;margin-top:62px}.featured-title span{font-size:96px}.controller-art{top:164px;right:-3px}.float-card{padding:11px 12px}.float-card>span{width:29px;height:29px}.float-region{right:-4px;top:14px}.float-order{left:-3px;bottom:12px}
  .trust-strip{grid-template-columns:1fr;margin-bottom:90px}.section-heading h2,.closing-cta h2,.how-section h2{font-size:44px}.catalogue,.plus-section,.faq{padding-bottom:94px}.product-visual{height:280px}.request-banner{padding:27px}.annual-card{padding:24px}.how-section{padding:88px 0;margin-bottom:90px}.assurance{padding-bottom:90px}.assurance-panel{padding:28px}.assurance h2{font-size:42px}.closing-cta{padding:30px}.mobile-order{background:var(--accent);color:#071006;border-radius:999px;box-shadow:0 18px 50px rgba(0,0,0,.46)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none!important}.button,.product-card,.plan-card{transition:none!important}}


/* phase 4.1 visual game artwork upgrade */
.featured-card--image{
  background: linear-gradient(180deg, rgba(4,10,18,.12), rgba(4,10,18,.68) 76%, rgba(4,10,18,.92)),
              url('assets/fc27-hero.webp') center center / cover no-repeat !important;
  border-color: rgba(255,255,255,.11);
  transform: rotate(0deg);
}
.featured-card--image:before{display:none}
.featured-card--image:after{
  content:"";position:absolute;inset:0;
  background: radial-gradient(circle at 75% 30%, rgba(186,255,69,.10), transparent 28%),
              linear-gradient(90deg, rgba(3,10,18,.85) 0%, rgba(3,10,18,.42) 42%, rgba(3,10,18,.28) 100%);
}
.featured-card--image > *{position:relative;z-index:2}
.featured-card--image .featured-title{font-size:84px;margin-top:42px;text-shadow:0 12px 28px rgba(0,0,0,.35)}
.featured-card--image .featured-title span{display:inline;color:var(--accent);font-size:84px}
.featured-card--image p{max-width:300px;color:#d5deec;font-size:16px}
.featured-card--image .featured-bottom{align-items:end}
.featured-card--image .featured-bottom strong{font-size:28px}
.controller-art,.visual-monogram{display:none !important}
.product-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.product-card{display:flex;flex-direction:column}
.product-visual{
  height:300px;
  background-size:cover !important;
  background-position:center !important;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.product-visual:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,10,18,.20) 0%, rgba(3,10,18,.04) 32%, rgba(3,10,18,.70) 100%);
  transform:none;
}
.product-visual:after{display:none}
.visual-fc{background:url('assets/fc27-card.webp') center/cover no-repeat}
.visual-nba{background:url('assets/nba2k27-card.webp') center/cover no-repeat}
.visual-gta{background:url('assets/gtavi-card.webp') center/cover no-repeat}
.visual-cod{background:url('assets/callofduty-card.webp') center/cover no-repeat}
.visual-ufc{background:url('assets/ufc6-card.webp') center/cover no-repeat}
.visual-label,.visual-edition{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(8,13,21,.72);
  border:1px solid rgba(255,255,255,.12);
  color:#eef5ff;
  backdrop-filter: blur(10px);
}
.visual-label{text-transform:uppercase}
.visual-edition{margin-left:auto}
@media(max-width:1000px){
  .product-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .featured-card--image .featured-title,
  .featured-card--image .featured-title span{font-size:58px}
  .featured-card--image p{font-size:14px;max-width:210px}
  .product-grid{grid-template-columns:1fr}
}


/* Phase 6.1 — ordered featured hero information */
.hero-stage{min-height:590px}
.hero-stage .featured-card{inset:34px 18px 116px 18px}
.hero-meta-bar{
  position:absolute;
  left:18px;right:18px;bottom:18px;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(8,12,18,.90);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 55px rgba(0,0,0,.30);
}
.hero-meta-item{
  min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:14px 15px;
  border-right:1px solid rgba(255,255,255,.08);
}
.hero-meta-item:last-child{border-right:0}
.hero-meta-icon{
  flex:0 0 32px;
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:10px;
  background:rgba(186,255,69,.09);
  color:var(--accent);
  font-size:15px;font-weight:800;
}
.hero-meta-item>div{display:grid;gap:2px;min-width:0}
.hero-meta-item small{
  color:#667487;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.10em;
}
.hero-meta-item strong{
  color:#f1f5fa;font-size:11px;line-height:1.25;
  white-space:normal;
}
.float-card{display:none!important}
@media(max-width:1000px){
  .hero-stage{min-height:585px}
  .hero-stage .featured-card{inset:26px 10px 116px 10px}
  .hero-meta-bar{left:10px;right:10px;bottom:14px}
}
@media(max-width:680px){
  .hero-stage{min-height:520px}
  .hero-stage .featured-card{inset:18px 0 124px 0;padding:22px}
  .hero-meta-bar{left:0;right:0;bottom:8px;border-radius:16px}
  .hero-meta-item{padding:12px 8px;gap:7px;align-items:flex-start}
  .hero-meta-icon{flex-basis:27px;width:27px;height:27px;border-radius:8px;font-size:13px}
  .hero-meta-item small{font-size:7px;letter-spacing:.07em}
  .hero-meta-item strong{font-size:9px}
}


/* Phase 6.2 — premium price system */
.featured-card--image .featured-bottom{
  left:28px;
  right:28px;
  bottom:24px;
  gap:18px;
  align-items:flex-end;
}
.hero-price-panel{
  position:relative;
  min-width:210px;
  max-width:250px;
  padding:13px 15px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  background:
    linear-gradient(135deg,rgba(17,25,36,.82),rgba(7,12,19,.91));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 16px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .28s cubic-bezier(.2,.75,.2,1),border-color .28s ease,box-shadow .28s ease;
}
.hero-price-panel:before{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-65px;top:-72px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(186,255,69,.25),transparent 68%);
  pointer-events:none;
}
.hero-price-panel:after{
  content:"";
  position:absolute;
  top:-40%;bottom:-40%;left:-42%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  opacity:0;
  pointer-events:none;
}
.featured-card--image:hover .hero-price-panel{
  transform:translateY(-3px);
  border-color:rgba(186,255,69,.30);
  box-shadow:0 20px 46px rgba(0,0,0,.45),0 0 0 1px rgba(186,255,69,.04),inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-price-head{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:5px;
}
.hero-price-head>span:first-child{
  color:#8a98aa;
  font-size:8px;font-weight:800;letter-spacing:.17em;
}
.hero-price-head>span:last-child{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 7px;
  border:1px solid rgba(186,255,69,.16);
  border-radius:999px;
  background:rgba(186,255,69,.075);
  color:#cfff86;
  font-size:8px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
}
.hero-price-head>span:last-child:before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(186,255,69,.65)
}
.hero-price-value{
  position:relative;z-index:1;
  display:block;
  margin:0;
  color:#fff;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(24px,2.1vw,31px)!important;
  line-height:1;
  letter-spacing:-.045em;
  white-space:nowrap;
  text-shadow:0 6px 18px rgba(0,0,0,.24);
}
.hero-price-panel>small{
  position:relative;z-index:1;
  display:block;
  margin-top:6px;
  color:#718093;
  font-size:8px;
  line-height:1.35;
  letter-spacing:.02em;
}
.hero-price-panel.price-refresh{
  animation:pricePanelRefresh .52s cubic-bezier(.2,.75,.2,1);
}
.hero-price-panel.price-refresh:after{
  animation:pricePanelShine .52s ease;
}
@keyframes pricePanelRefresh{
  0%{transform:translateY(0) scale(1)}
  42%{transform:translateY(-3px) scale(1.015);border-color:rgba(186,255,69,.38)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes pricePanelShine{
  0%{left:-42%;opacity:0}
  25%{opacity:1}
  100%{left:125%;opacity:0}
}

/* Consistent premium price treatment on catalogue cards */
.product-footer>div:first-child{
  min-width:118px;
  padding:9px 11px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.product-footer>div:first-child small{margin-bottom:3px}
.product-footer>div:first-child strong{
  font-family:"Space Grotesk",Inter,sans-serif;
  letter-spacing:-.035em;
}
.product-card:hover .product-footer>div:first-child{
  border-color:rgba(186,255,69,.14);
  background:linear-gradient(145deg,rgba(186,255,69,.045),rgba(255,255,255,.014));
}

@media(max-width:680px){
  .featured-card--image .featured-bottom{
    left:20px;right:20px;bottom:18px;
    align-items:flex-end;
    gap:9px;
  }
  .hero-price-panel{
    min-width:165px;
    max-width:185px;
    padding:10px 11px 9px;
    border-radius:14px;
  }
  .hero-price-value{font-size:22px!important}
  .hero-price-panel>small{font-size:7px}
  .hero-price-head>span:last-child{font-size:7px;padding:3px 6px}
  .platform-tags{gap:4px;flex-wrap:wrap;max-width:86px}
  .platform-tags span{font-size:9px;padding:4px 6px}
}
@media(max-width:390px){
  .hero-price-panel{min-width:150px;max-width:165px}
  .hero-price-value{font-size:20px!important}
  .hero-price-panel>small{max-width:135px}
}
@media(prefers-reduced-motion:reduce){
  .hero-price-panel.price-refresh,.hero-price-panel.price-refresh:after{animation:none!important}
}