@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
* { box-sizing: border-box; }

:root {
  --ink: #f4f1ff;
  --muted: #aca5c8;
  --dim: #7a7498;
  --green: #7dff4f;
  --purple: #a855f7;
  --violet: #8b5cf6;
  --magenta: #e64bff;
  --cyan: #35e0ff;
  --line: rgba(184, 156, 255, .16);
  --line2: rgba(184, 156, 255, .30);
  --grad: linear-gradient(120deg, #35e0ff, #a855f7 46%, #7dff4f);
  --tile-border: linear-gradient(150deg, rgba(255,255,255,.16), rgba(168,85,247,.34) 52%, rgba(125,255,80,.30));
  --hub-panel: rgba(12, 8, 22, .70);
  --hub-panel-strong: rgba(10, 7, 18, .95);
  --hub-card: rgba(20, 14, 30, .66);
  --hub-line: rgba(230, 215, 255, .16);
  --hub-line-hot: rgba(171, 255, 84, .6);
  --hub-copy: #f4f1ff;
  --hub-muted: #bcb4c8;
  --hub-shadow: 0 28px 80px rgba(0, 0, 0, .5);
  --emx-green: #7dff4f;
  --emx-purple: #a855f7;
}
:root[data-theme="light"] {
  --ink: #180f22;
  --muted: #5c5470;
  --dim: #857c98;
  --line: rgba(60, 34, 78, .16);
  --line2: rgba(60, 34, 78, .26);
  --tile-border: linear-gradient(150deg, rgba(255,255,255,.95), rgba(139,50,188,.28) 52%, rgba(65,151,0,.34));
  --hub-panel: rgba(255, 255, 255, .74);
  --hub-panel-strong: rgba(255, 255, 255, .96);
  --hub-card: rgba(255, 255, 255, .72);
  --hub-line: rgba(55, 34, 71, .16);
  --hub-line-hot: rgba(80, 154, 25, .54);
  --hub-copy: #17101f;
  --hub-muted: #62586c;
  --hub-shadow: 0 28px 80px rgba(63, 32, 78, .18);
}

html { min-height: 100%; background: #06030f; }
body.deck-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #06030f;
  font-family: var(--emx-font-body, "Inter", system-ui, sans-serif);
}
:root[data-theme="light"] body.deck-page { background: #ece6f4; color: var(--ink); }

/* ============================ BACKGROUND ============================ */
.deck-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(1200px 760px at 50% -12%, rgba(150, 60, 235, .34), transparent 60%),
    radial-gradient(1000px 900px at 8% 20%,  rgba(64, 226, 138, .14), transparent 55%),
    radial-gradient(1100px 940px at 96% 24%, rgba(220, 78, 255, .18), transparent 55%),
    radial-gradient(900px 900px at 70% 112%, rgba(120, 60, 235, .22), transparent 55%),
    linear-gradient(165deg, #06020f 0%, #0a0416 48%, #05070b 100%);
}
.deck-aurora { position: absolute; inset: -30%; filter: blur(62px); opacity: .72;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(78, 255, 132, .30), transparent 70%),
    radial-gradient(closest-side at 82% 24%, rgba(212, 80, 255, .36), transparent 70%),
    radial-gradient(closest-side at 56% 86%, rgba(132, 66, 240, .30), transparent 70%),
    radial-gradient(closest-side at 34% 66%, rgba(48, 216, 255, .22), transparent 70%);
  animation: deck-aurora 16s ease-in-out infinite alternate;
}
@keyframes deck-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.12) rotate(2deg); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.05); }
}
.deck-stars { position: absolute; inset: -25%; opacity: .5;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(170,255,120,.7) 0 1px, transparent 1.7px);
  background-size: 150px 150px, 235px 235px;
  background-position: 0 0, 60px 80px;
  animation: deck-stars 70s linear infinite;
}
.deck-stars-2 { background-size: 210px 210px, 330px 330px; opacity: .34; animation-duration: 105s; animation-direction: reverse; }
@keyframes deck-stars { to { transform: translate3d(4%, 6%, 0); } }
.deck-grid { position: absolute; inset: -10%; opacity: .13;
  background-image:
    linear-gradient(rgba(184,156,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,156,255,.5) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(circle at 50% 28%, #000 38%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 28%, #000 38%, transparent 82%);
  animation: deck-grid 44s linear infinite;
}
@keyframes deck-grid { to { background-position: 66px 66px, 66px 66px; } }
.deck-vignette { position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 26%, transparent 0 20%, rgba(3, 1, 8, .42) 60%, rgba(1, 0, 4, .88) 100%);
}
:root[data-theme="light"] .deck-bg { background: linear-gradient(165deg, #efe8f7, #e6dcf2 60%, #eef0e6); }
:root[data-theme="light"] .deck-aurora { opacity: .4; }
:root[data-theme="light"] .deck-stars, :root[data-theme="light"] .deck-grid { opacity: .1; }
:root[data-theme="light"] .deck-vignette { background: radial-gradient(circle at 50% 26%, transparent 0 30%, rgba(255,255,255,.4) 100%); }

/* ============================ SHELL ============================ */
.deck { position: relative; z-index: 1; width: min(100% - 32px, 940px); margin: 0 auto; padding: 26px 0 46px; }

.deck-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 40px; }
.deck-brand { display: flex; align-items: center; gap: 13px; padding: 9px 16px 9px 9px; border: 1px solid var(--line); border-radius: 18px;
  color: var(--ink); text-decoration: none; background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--hub-panel);
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 14px 40px rgba(0,0,0,.24); backdrop-filter: blur(20px) saturate(1.2); }
.deck-brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, rgba(125,255,90,.2), rgba(168,85,247,.2)); box-shadow: inset 0 1px rgba(255,255,255,.24); }
.deck-brand-mark img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(168,85,247,.5)); }
.deck-brand-copy { display: grid; line-height: 1; }
.deck-brand-copy b { font: 800 1.02rem/1 var(--emx-font-display, "Space Grotesk", sans-serif); letter-spacing: .04em; }
.deck-brand-copy small { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font: 800 .56rem/1 var(--emx-font-body, "Inter", sans-serif); letter-spacing: .13em; }
.deck-brand-copy small i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: deck-pulse 1.8s ease-in-out infinite; }
@keyframes deck-pulse { 50% { transform: scale(.7); opacity: .5; } }
.deck-toggle { min-height: 48px; border-color: var(--line); background: var(--hub-panel); backdrop-filter: blur(18px); }

/* ============================ HERO ============================ */
.deck-hero { text-align: center; margin-bottom: 34px; }
.deck-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--green); font: 800 .68rem/1.3 var(--emx-font-body, "Inter", sans-serif); letter-spacing: .18em; }
.deck-kicker span { width: 26px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.deck-title { margin: 0; font: 800 clamp(2.6rem, 9vw, 5.4rem)/.9 var(--emx-font-display, "Space Grotesk", sans-serif); letter-spacing: -.055em; text-shadow: 0 10px 40px rgba(0,0,0,.4); }
.deck-title span { color: transparent; background: linear-gradient(90deg, #adff61 6%, #f7f3ff 48%, #ce5bff 94%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: deck-sheen 7s linear infinite; }
.deck-title em { font-style: normal; color: transparent; background: linear-gradient(90deg, #35e0ff, #a855f7 50%, #e64bff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(168,85,247,.35)); }
@keyframes deck-sheen { to { background-position: 220% center; } }
:root[data-theme="light"] .deck-title span { background-image: linear-gradient(90deg, #2f8a00, #6c2aaa 55%, #9b19d9); }
.deck-lead { max-width: 620px; margin: 20px auto 0; color: #ddd6ec; font: 600 1rem/1.6 var(--emx-font-body, "Inter", sans-serif); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
:root[data-theme="light"] .deck-lead { color: var(--hub-muted); text-shadow: none; }
.deck-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 22px auto 0; }
.deck-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.03); font: 700 .76rem/1 var(--emx-font-body, "Inter", sans-serif); backdrop-filter: blur(10px); }
.deck-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.deck-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.deck-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 14px; border: 1px solid transparent; font: 700 .98rem/1 var(--emx-font-display, "Space Grotesk", sans-serif); text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.deck-btn-primary { color: #fff; background: linear-gradient(120deg, #8b5cf6, #a855f7 40%, #e64bff); box-shadow: 0 12px 32px -8px rgba(168,85,247,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.deck-btn-primary::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s; }
.deck-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 42px -10px rgba(230,75,255,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.deck-btn-primary:hover::before { left: 130%; }
.deck-btn-ghost { color: var(--ink); background: rgba(255,255,255,.04); border-color: var(--line2); backdrop-filter: blur(10px); }
.deck-btn-ghost:hover { transform: translateY(-3px); border-color: var(--green); background: rgba(125,255,80,.08); box-shadow: 0 12px 30px -12px rgba(125,255,80,.4); }

/* ============================ TILE GRID ============================ */
.deck-grid-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.deck-span-2 { grid-column: 1 / -1; }
.deck-tile { --pointer-x: 50%; --pointer-y: 50%; position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr) 36px; align-items: center; gap: 16px; min-height: 92px; padding: 18px 20px; border: 1.5px solid transparent; border-radius: 20px; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; font: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,.065), rgba(255,255,255,.014)) padding-box, var(--tile-border) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 16px 40px rgba(0,0,0,.34);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.deck-tile::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0; transition: opacity .25s; background: radial-gradient(300px circle at var(--pointer-x) var(--pointer-y), rgba(200,90,255,.22), rgba(120,255,80,.08) 42%, transparent 70%); }
.deck-tile::after { content: ""; position: absolute; top: -80%; bottom: -80%; left: -30%; width: 18%; opacity: .35; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(18deg) translateX(-500%); transition: transform .7s; pointer-events: none; }
.deck-tile:hover, .deck-tile:focus-visible { transform: translateY(-5px) scale(1.008); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 26px 62px rgba(0,0,0,.44), 0 0 30px rgba(176,70,255,.2); }
.deck-tile:hover::before, .deck-tile:focus-visible::before { opacity: 1; }
.deck-tile:hover::after { transform: rotate(18deg) translateX(900%); }
.deck-tile:active { transform: translateY(-1px) scale(.996); }
.deck-tile-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; font-size: 1.45rem; color: #fff; border: 1px solid var(--line2); background: linear-gradient(150deg, rgba(125,255,120,.16), rgba(168,85,247,.2)); box-shadow: inset 0 1px rgba(255,255,255,.24), 0 6px 18px rgba(0,0,0,.3); transition: transform .25s, border-color .25s; }
.deck-tile:hover .deck-tile-ico { transform: rotate(-4deg) scale(1.05); border-color: var(--hub-line-hot); }
.deck-tile-body { display: flex; flex-direction: column; min-width: 0; }
.deck-eyebrow { color: var(--green); font: 800 .62rem/1 var(--emx-font-body, "Inter", sans-serif); font-style: normal; letter-spacing: .18em; margin-bottom: 8px; text-shadow: 0 0 12px rgba(125,255,80,.4); }
.deck-tile-body b { font: 800 1.02rem/1.2 var(--emx-font-display, "Space Grotesk", sans-serif); letter-spacing: -.01em; text-wrap: balance; }
.deck-tile-body small { margin-top: 5px; color: var(--muted); font: 600 .8rem/1.35 var(--emx-font-body, "Inter", sans-serif); overflow-wrap: anywhere; }
.deck-tile-go { justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line2); color: var(--green); background: rgba(255,255,255,.04); font: 800 1rem/1 var(--emx-font-body); transition: transform .25s, background .25s, color .25s; }
.deck-tile:hover .deck-tile-go { transform: translate(2px,-2px); background: rgba(125,255,80,.12); }
.deck-expand { transition: transform .3s ease; }
[aria-expanded="true"] .deck-expand { transform: rotate(180deg); }
.deck-badge { position: absolute; top: 13px; right: 15px; z-index: 3; padding: 3px 9px; border-radius: 8px; color: #05060c; background: linear-gradient(120deg, #7dff4f, #35e0ff); font: 900 .58rem/1 var(--emx-font-body); letter-spacing: .16em; box-shadow: 0 0 14px rgba(125,255,80,.55); }

.deck-tile-shop { min-height: 118px; border-width: 2px;
  background: linear-gradient(155deg, rgba(53,224,255,.09), rgba(168,85,247,.06)) padding-box,
    conic-gradient(from var(--ring), #35e0ff, #a855f7, #e64bff, #7dff4f, #35e0ff) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 20px 55px rgba(0,0,0,.46), 0 0 22px rgba(53,224,255,.28), 0 0 40px rgba(168,85,247,.18);
  animation: deck-ring 6s linear infinite;
}
@keyframes deck-ring { to { --ring: 360deg; } }
.deck-tile-shop .deck-tile-ico { background: linear-gradient(150deg, rgba(53,224,255,.3), rgba(168,85,247,.3)); border-color: rgba(120,243,255,.6); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 0 16px rgba(53,224,255,.5); font-size: 1.7rem; }
.deck-tile-shop .deck-tile-body b { font-size: clamp(1.1rem, 2.6vw, 1.4rem); }
.deck-tile-build { border-image: linear-gradient(130deg, rgba(41,217,255,.7), rgba(189,85,255,.7) 45%, rgba(124,255,79,.7)) 1; box-shadow: inset 0 1px rgba(255,255,255,.14), 0 18px 48px rgba(0,0,0,.4), 0 0 26px rgba(124,255,79,.16); }
.deck-tile-build .deck-tile-ico { background: linear-gradient(145deg, rgba(41,217,255,.3), rgba(189,85,255,.32) 52%, rgba(124,255,79,.28)); border-color: rgba(124,255,79,.5); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 0 16px rgba(124,255,79,.5); }
.deck-tile-free .deck-tile-ico { background: linear-gradient(150deg, rgba(125,255,80,.24), rgba(48,216,255,.2)); border-color: rgba(125,255,80,.4); }

:root[data-theme="light"] .deck-tile { background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) padding-box, var(--tile-border) border-box; box-shadow: inset 0 1px #fff, 0 16px 40px rgba(64,33,80,.13); }
:root[data-theme="light"] .deck-tile-ico { color: #431257; background: linear-gradient(150deg, #fff, rgba(168,85,247,.16)); }

/* ============================ FREE PANEL ============================ */
.hub-free-panel { margin-top: 15px; padding: clamp(18px, 4vw, 28px); overflow: hidden; border: 1px solid var(--hub-line); border-radius: 26px; color: var(--hub-copy);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.014)), var(--hub-panel);
  box-shadow: var(--hub-shadow), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(28px) saturate(1.25);
  animation: deck-panel .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes deck-panel { from { opacity: 0; transform: translateY(-12px) scale(.985); } }
.hub-free-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.hub-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--green); font: 900 .64rem/1.3 var(--emx-font-body); letter-spacing: .17em; }
.hub-kicker > span:first-child { width: 22px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.hub-free-panel h2 { margin: 0; color: inherit; font: 800 clamp(1.5rem, 5vw, 2.1rem)/1 var(--emx-font-display, "Space Grotesk", sans-serif); letter-spacing: -.035em; }
.hub-panel-close, .hub-modal-close { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--hub-line); border-radius: 13px; color: var(--hub-copy); background: rgba(255,255,255,.07); font: 400 1.7rem/1 var(--emx-font-body); cursor: pointer; transition: transform .17s, color .17s, border-color .17s; }
.hub-panel-close:hover, .hub-modal-close:hover { transform: rotate(6deg) scale(1.05); color: var(--green); border-color: var(--hub-line-hot); }
.hub-free-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hub-free-card { --pointer-x: 50%; --pointer-y: 50%; position: relative; display: flex; min-width: 0; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: 18px; color: var(--hub-copy); flex-direction: column; text-align: left; cursor: pointer;
  background: linear-gradient(var(--hub-card), var(--hub-card)) padding-box, var(--tile-border) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.24);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s; }
.hub-free-card::after { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(250px circle at var(--pointer-x) var(--pointer-y), rgba(199,87,255,.2), transparent 65%); pointer-events: none; transition: opacity .18s; }
.hub-free-card:hover { transform: translateY(-5px); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 18px 44px rgba(0,0,0,.34), 0 0 18px rgba(125,255,80,.1); }
.hub-free-card:hover::after { opacity: 1; }
.hub-free-card-preview { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #0b0710; }
.hub-free-card-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 38%, rgba(8,4,13,.82)); }
.hub-free-card-preview img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); filter: saturate(.94) contrast(1.04); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .3s; }
.hub-free-card:hover img { transform: scale(1.09); filter: saturate(1.14) contrast(1.07); }
.hub-free-card-number { position: absolute; z-index: 2; top: 12px; left: 12px; display: grid; place-items: center; min-width: 38px; height: 28px; border: 1px solid rgba(125,255,80,.44); border-radius: 10px; color: var(--green); background: rgba(5,4,9,.76); backdrop-filter: blur(10px); font: 900 .66rem/1 var(--emx-font-body); letter-spacing: .08em; }
.hub-free-card-copy { position: relative; z-index: 1; display: flex; min-width: 0; min-height: 128px; padding: 16px; flex-direction: column; }
.hub-free-card-copy b { color: inherit; font: 800 1rem/1.2 var(--emx-font-display, "Space Grotesk", sans-serif); overflow-wrap: anywhere; }
.hub-free-card-copy small { margin-top: 7px; color: var(--hub-muted); font: 600 .75rem/1.45 var(--emx-font-body); overflow-wrap: anywhere; }
.hub-free-card-copy i { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; color: var(--green); font: 900 .62rem/1 var(--emx-font-body); font-style: normal; letter-spacing: .14em; }
.hub-free-card-copy i span { font-size: 1rem; }
:root[data-theme="light"] .hub-free-card { background: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)) padding-box, var(--tile-border) border-box; }

/* ============================ MODAL ============================ */
.hub-app-modal { width: min(900px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: visible; border: 0; border-radius: 28px; color: var(--hub-copy); background: transparent; }
.hub-app-modal::backdrop { background: rgba(3, 1, 6, .8); backdrop-filter: blur(12px) saturate(.75); }
.hub-app-modal[open] { animation: deck-modal .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes deck-modal { from { opacity: 0; transform: translateY(18px) scale(.975); } }
.hub-app-modal-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); max-height: calc(100vh - 28px); overflow: auto; border: 1px solid transparent; border-radius: 28px;
  background: linear-gradient(var(--hub-panel-strong), var(--hub-panel-strong)) padding-box, linear-gradient(135deg, rgba(255,255,255,.32), rgba(168,85,247,.55), rgba(125,255,80,.42)) border-box;
  box-shadow: 0 35px 120px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(30px) saturate(1.15); }
.hub-modal-close { position: absolute; z-index: 5; top: 16px; right: 16px; background: rgba(8,4,13,.78); color: #fff; }
.hub-modal-art { position: relative; min-height: 470px; overflow: hidden; border-radius: 27px 0 0 27px; background: #08040d; }
.hub-modal-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--hub-panel-strong)), linear-gradient(to top, rgba(5,2,8,.46), transparent 40%); pointer-events: none; }
.hub-modal-art img { width: 100%; height: 100%; object-fit: cover; }
.hub-modal-content { display: flex; min-width: 0; padding: 70px 34px 34px 30px; flex-direction: column; }
.hub-modal-content .hub-kicker { margin-bottom: 16px; }
.hub-modal-content .hub-kicker > span:last-child { width: auto; height: auto; background: none; box-shadow: none; }
.hub-modal-content h2 { margin: 0; color: inherit; font: 800 clamp(1.65rem, 4vw, 2.4rem)/1 var(--emx-font-display, "Space Grotesk", sans-serif); letter-spacing: -.04em; overflow-wrap: anywhere; text-wrap: balance; }
.hub-modal-content > p:not(.hub-kicker) { margin: 16px 0 0; color: var(--hub-muted); font: 600 .86rem/1.65 var(--emx-font-body); overflow-wrap: anywhere; }
.hub-app-features { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.hub-app-features li { position: relative; padding-left: 21px; color: var(--hub-copy); font: 700 .76rem/1.45 var(--emx-font-body); overflow-wrap: anywhere; }
.hub-app-features li::before { content: ""; position: absolute; top: .48em; left: 0; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--green), var(--purple)); box-shadow: 0 0 10px rgba(125,255,80,.25); }
.hub-modal-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.hub-modal-specs span { display: flex; min-width: 0; padding: 12px; border: 1px solid var(--hub-line); border-radius: 13px; background: rgba(255,255,255,.045); flex-direction: column; }
.hub-modal-specs b { color: var(--hub-muted); font: 900 .56rem/1 var(--emx-font-body); letter-spacing: .14em; }
.hub-modal-specs i { margin-top: 7px; color: var(--hub-copy); font: 800 .74rem/1.2 var(--emx-font-body); font-style: normal; overflow-wrap: anywhere; }
.hub-modal-action { --pointer-x: 50%; --pointer-y: 50%; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; margin-top: auto; padding: 0 18px; overflow: hidden; border: 1px solid rgba(125,255,80,.58); border-radius: 15px; color: #10150d; background: linear-gradient(135deg, #c2ff8a, #89f63e); box-shadow: 0 15px 32px rgba(110,238,52,.16); font: 900 .72rem/1 var(--emx-font-body); letter-spacing: .09em; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.hub-modal-action::after { content: ""; position: absolute; inset: 0; background: radial-gradient(210px circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.78), transparent 63%); opacity: 0; transition: opacity .18s; }
.hub-modal-action:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(110,238,52,.24); }
.hub-modal-action:hover::after { opacity: .48; }
.hub-modal-action span { position: relative; z-index: 1; }
:root[data-theme="light"] .hub-app-modal::backdrop { background: rgba(37,20,49,.48); }
:root[data-theme="light"] .hub-modal-specs span { background: rgba(247,242,250,.86); }

/* ============================ STATUS + FOOTER ============================ */
.deck-status { min-height: 22px; margin: 16px 0 0; color: var(--green); font: 800 .74rem/1.4 var(--emx-font-body); text-align: center; }
.deck-foot { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; padding: 20px 4px 0; border-top: 1px solid var(--line); color: var(--dim); }
.deck-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.deck-foot-links a { color: var(--muted); font: 700 .78rem/1 var(--emx-font-body); text-decoration: none; transition: color .2s; }
.deck-foot-links a:hover { color: var(--green); }
.deck-foot-note { margin: 0; max-width: 70ch; color: var(--dim); font: 600 .76rem/1.55 var(--emx-font-body); }
.deck-foot-note strong { color: var(--muted); }
.deck-foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 800 .6rem/1.5 var(--emx-font-body); letter-spacing: .09em; }
.deck-foot-tag { color: var(--muted); }

/* ============================ ENTRANCE ============================ */
@keyframes deck-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.deck-top { animation: deck-enter .6s cubic-bezier(.2,.8,.2,1) both; }
.deck-hero > * { animation: deck-enter .7s cubic-bezier(.2,.8,.2,1) both; }
.deck-hero .deck-kicker { animation-delay: .06s; }
.deck-hero .deck-title { animation-delay: .12s; }
.deck-hero .deck-lead { animation-delay: .2s; }
.deck-hero .deck-chips { animation-delay: .28s; }
.deck-hero .deck-cta { animation-delay: .36s; }
.deck-grid-links > * { animation: deck-enter .66s cubic-bezier(.2,.8,.2,1) both; }
.deck-grid-links > *:nth-child(1) { animation-delay: .30s; }
.deck-grid-links > *:nth-child(2) { animation-delay: .37s; }
.deck-grid-links > *:nth-child(3) { animation-delay: .44s; }
.deck-grid-links > *:nth-child(4) { animation-delay: .50s; }
.deck-grid-links > *:nth-child(5) { animation-delay: .56s; }
.deck-grid-links > *:nth-child(6) { animation-delay: .62s; }
.deck-grid-links > *:nth-child(7) { animation-delay: .68s; }
.deck-grid-links > *:nth-child(8) { animation-delay: .74s; }
.deck-foot { animation: deck-enter .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .80s; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 760px) {
  .deck { width: min(100% - 22px, 620px); }
  .deck-top { margin-bottom: 30px; }
  .deck-grid-links { grid-template-columns: 1fr; }
  .deck-span-2 { grid-column: auto; }
  .hub-free-grid { grid-template-columns: 1fr; }
  .hub-free-card { display: grid; grid-template-columns: 42% minmax(0,1fr); }
  .hub-free-card-preview { height: 100%; min-height: 160px; aspect-ratio: auto; }
  .hub-free-card-copy { min-height: 160px; }
  .hub-app-modal-frame { grid-template-columns: 1fr; }
  .hub-modal-art { min-height: 220px; max-height: 32vh; border-radius: 27px 27px 0 0; }
  .hub-modal-content { padding: 24px; }
}
@media (max-width: 480px) {
  .deck-brand-copy b { font-size: .9rem; }
  .deck-title { font-size: clamp(2.2rem, 15vw, 3.4rem); }
  .deck-tile { grid-template-columns: 50px minmax(0,1fr) 30px; gap: 12px; padding: 15px; min-height: 82px; border-radius: 18px; }
  .deck-tile-ico { width: 50px; height: 50px; border-radius: 14px; font-size: 1.25rem; }
  .deck-tile-body b { font-size: .92rem; }
  .deck-tile-body small { font-size: .72rem; }
  .hub-free-card { grid-template-columns: 1fr; }
  .hub-free-card-preview { min-height: 0; aspect-ratio: 16/9; }
  .hub-modal-specs { grid-template-columns: 1fr; }
  .deck-foot { flex-direction: column; align-items: flex-start; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-aurora, .deck-stars, .deck-grid, .deck-tile-shop, .deck-title span, .deck-brand-copy small i { animation: none !important; }
  .deck-top, .deck-hero > *, .deck-grid-links > *, .deck-foot { animation: none !important; opacity: 1 !important; transform: none !important; }
}