/* ============================================================
   MEMEZ · NFA Accounts — shared styles
   Inherits the existing site language (dark, accent #FF204E, Inter)
   Mobile-first; scales up at 768px / 1100px.
   ============================================================ */
:root{
  --bg:#100E0F; --bg-2:#080708; --bg-3:#0a0809;
  --card:#121011; --card-2:#17151694; --raise:#181517;
  --line:rgba(255,255,255,.05); --line-2:rgba(255,255,255,.09); --line-3:rgba(255,255,255,.14);
  --text:#ffffff; --dim:#A9A9A9; --dim-2:#6a6669;
  --accent:#FF204E; --accent-2:#AD1B39; --accent-soft:rgba(255,32,78,.10);
  --ok:#2cc66b; --ok-soft:rgba(44,198,107,.10);
  --warn:#ff9d3c; --warn-soft:rgba(255,157,60,.10);
  --gray:#7d797b; --gray-soft:rgba(255,255,255,.06);
  --radius:14px; --radius-sm:12px; --radius-lg:18px;
  --shadow:0 8px 22px rgba(0,0,0,.40);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body{ font-size:14px; line-height:1.5; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(255,32,78,.3); }

.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 18px; }
@media (min-width:768px){ .wrap{ padding:0 28px; } }
@media (min-width:1100px){ .wrap{ padding:0 40px; } }

/* ===== TOPBAR ===== */
.topbar{
  position:sticky; top:0; z-index:60; background:rgba(16,14,15,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.topbar-in{ display:flex; align-items:center; gap:14px; height:60px; }
.logo{
  font-weight:700; font-size:22px; line-height:1; letter-spacing:-.05em;
  background:linear-gradient(180deg,#FF204E,#AD1B39);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  flex:none;
}
.tb-menu{ display:none; list-style:none; margin:0; padding:0; gap:22px; font-size:13.5px; color:var(--dim); align-items:center; }
.tb-menu li a{ position:relative; padding:6px 0; transition:color .15s; white-space:nowrap; }
.tb-menu li a:hover{ color:var(--text); }
.tb-menu li a.active{ color:var(--text); }
.tb-menu li a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--accent); }
.tb-menu li a.nfa-link{ display:inline-flex; align-items:center; gap:6px; }
.tb-menu li a.nfa-link .nb{ font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 5px; border-radius:5px; background:var(--accent); color:#fff; }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.tb-user{ display:none; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line-2); border-radius:999px; font-size:13px; }
.tb-user .av{ width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.tb-bal{ display:none; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:var(--accent-soft); border:1px solid rgba(255,32,78,.25); font-size:13px; }
.tb-bal b{ color:var(--accent); font-weight:700; }
.tb-burger{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--text); }
@media (min-width:1100px){
  .tb-menu{ display:flex; }
  .tb-user,.tb-bal{ display:inline-flex; }
  .tb-burger{ display:none; }
}

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:70; display:none; }
.drawer.open{ display:block; }
.drawer-bg{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw);
  background:var(--bg); border-left:1px solid var(--line-2); padding:18px; overflow:auto;
  display:flex; flex-direction:column; gap:4px; }
.drawer-panel a{ padding:14px 12px; border-radius:10px; color:var(--dim); font-size:15px; font-weight:500; }
.drawer-panel a:hover,.drawer-panel a.active{ background:var(--card); color:var(--text); }
.drawer-close{ align-self:flex-end; width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--text); margin-bottom:8px; }

/* ===== buttons ===== */
.btn-mem{
  appearance:none; border:none; color:#fff; font-weight:600; font-size:14px;
  padding:13px 20px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 20px rgba(255,32,78,.28), inset 0 1px 0 rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .12s, box-shadow .15s, filter .15s;
}
.btn-mem:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,32,78,.38), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-mem:active{ transform:translateY(0); }
.btn-mem.sm{ padding:9px 15px; font-size:13px; border-radius:10px; }
.btn-ghost{
  background:transparent; color:var(--text); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:13px 18px; font-size:14px; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:border-color .15s, background .15s;
}
.btn-ghost:hover{ border-color:var(--line-3); background:rgba(255,255,255,.02); }
.btn-ghost.sm{ padding:9px 14px; font-size:13px; border-radius:10px; }

/* ===== pills / badges ===== */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  font-size:11.5px; font-weight:500; border:1px solid var(--line-2); background:rgba(0,0,0,.4); color:var(--text); }
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.pill.ok{ border-color:rgba(44,198,107,.35); color:#7ee2a3; background:var(--ok-soft); }
.pill.ok .dot{ background:var(--ok); box-shadow:0 0 8px var(--ok); }
.pill.accent{ border-color:rgba(255,32,78,.35); color:#ffb0c0; background:var(--accent-soft); }
.pill.accent .dot{ background:var(--accent); }
.pill.warn{ border-color:rgba(255,157,60,.35); color:#ffc489; background:var(--warn-soft); }
.pill.warn .dot{ background:var(--warn); }
.pill.tag{ color:var(--dim); }

/* ===== AUTO-REPLACE badge — the hero selling point ===== */
.ar-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.1px; color:#fff;
  background:linear-gradient(180deg, rgba(255,32,78,.16), rgba(255,32,78,.06));
  border:1px solid rgba(255,32,78,.4);
}
.ar-badge .ar-ic{
  flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff;
  box-shadow:0 4px 12px rgba(255,32,78,.4);
}
.ar-badge .ar-ic svg{ animation:ar-spin 6s linear infinite; }
.ar-badge b{ color:var(--accent); font-weight:800; }
.ar-badge.sm{ font-size:11px; padding:4px 10px 4px 5px; }
.ar-badge.sm .ar-ic{ width:18px; height:18px; }
@keyframes ar-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ar-badge .ar-ic svg{ animation:none; } }

/* ===== breadcrumbs ===== */
.crumbs{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:12.5px; color:var(--dim-2); padding:16px 0; }
.crumbs a{ color:var(--dim); }
.crumbs a:hover{ color:var(--text); }
.crumbs .sep{ opacity:.5; }
.crumbs .curr{ color:var(--text); }

/* ===== section header ===== */
.section{ padding:34px 0; }
@media (min-width:768px){ .section{ padding:48px 0; } }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.sec-eyebrow{ font-size:11px; color:var(--accent); letter-spacing:1.8px; text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.sec-h{ font-size:24px; font-weight:700; margin:0; letter-spacing:-.6px; line-height:1.12; }
@media (min-width:768px){ .sec-h{ font-size:30px; letter-spacing:-.8px; } }
.sec-h .mute{ color:var(--dim); }
.sec-sub{ color:var(--dim); font-size:13.5px; margin-top:6px; }
.link-all{ color:var(--dim); font-size:13px; white-space:nowrap; }
.link-all:hover{ color:var(--accent); }

/* ===== game tile (landing grid) — real cover-art cards ===== */
.games-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:680px){ .games-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (min-width:1100px){ .games-grid{ grid-template-columns:repeat(6,1fr); gap:14px; } }
.gtile{
  position:relative; cursor:pointer; transition:transform .15s;
  display:flex; flex-direction:column; background:none; border:none;
}
.gtile:hover{ transform:translateY(-3px); }
.gtile:hover .art{ box-shadow:0 12px 30px rgba(0,0,0,.5); }
.gtile:hover .nm{ color:#fff; }
/* cover region — real game art (image-slot) over a branded fallback */
.gtile .art{ position:relative; aspect-ratio:1/1.3; overflow:hidden; background:#0a0809; border-radius:var(--radius); }
.gtile .cover{ position:absolute; inset:0; background:linear-gradient(157deg, var(--c,#333) 0%, #0a0809 90%); }
.gtile .cover::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 118%, rgba(0,0,0,.72), transparent 56%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 9px, transparent 9px 18px); }
.gtile .wordmark{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; text-align:center; }
.gtile .wordmark .gm{ font-size:14px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.85);
  text-shadow:0 4px 16px rgba(0,0,0,.6); line-height:1.2; }
.gtile .wordmark svg{ width:42px; height:42px; color:rgba(255,255,255,.92); filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.gtile image-slot{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.gtile .art .ar-chip{ position:absolute; left:10px; top:10px; z-index:3; pointer-events:none; }
.gtile .body{ padding:12px 4px 6px; display:flex; flex-direction:column; gap:8px; }
.gtile .nm{ font-size:16px; font-weight:700; letter-spacing:-.2px; }
.gtile .stk{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
.gtile .stk .types{ color:var(--dim); }
.gtile .stk .av{ color:var(--text); font-weight:700; }
.gtile .stk .av .cur{ color:var(--accent); }
.gtile .stk .av.instock{ color:var(--ok); font-weight:600; }

/* ===== tabs (cheats / NFA) ===== */
.tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  appearance:none; flex:none; border:1px solid var(--line-2); background:var(--card); color:var(--dim);
  padding:11px 18px; border-radius:999px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap; transition:all .15s;
}
.tab:hover{ color:var(--text); border-color:var(--line-3); }
.tab.on{ background:linear-gradient(180deg, rgba(255,32,78,.16), rgba(255,32,78,.04)); border-color:var(--accent); color:#fff; }
.tab .cnt{ font-size:11.5px; color:var(--dim-2); font-variant-numeric:tabular-nums; }
.tab.on .cnt{ color:var(--accent); }
.tab .nb{ font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 5px; border-radius:5px; background:var(--accent); color:#fff; }

/* ===== filter chips ===== */
.filters{ display:flex; gap:8px; overflow-x:auto; padding:4px 0; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.chip{ appearance:none; flex:none; border:1px solid var(--line-2); background:transparent; color:var(--dim);
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:500; white-space:nowrap; transition:all .15s; }
.chip:hover{ color:var(--text); border-color:var(--line-3); }
.chip.on{ background:var(--text); color:#0c0b0c; border-color:var(--text); font-weight:600; }
.filters-bar{ position:sticky; top:60px; z-index:30; background:rgba(16,14,15,.9); backdrop-filter:blur(10px);
  padding:12px 0; margin:0 -18px; padding-left:18px; padding-right:18px; border-bottom:1px solid var(--line); }
@media (min-width:768px){ .filters-bar{ margin:0; padding-left:0; padding-right:0; } }

/* ===== NFA account card ===== */
.nfa-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .nfa-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .nfa-grid{ grid-template-columns:repeat(3,1fr); } }
.ncard{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:12px; transition:border-color .15s, transform .15s;
}
.ncard:hover{ border-color:rgba(255,32,78,.32); transform:translateY(-2px); }
.ncard .top{ display:flex; align-items:center; gap:11px; }
.ncard .gico{ flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(155deg, var(--c,#333), #0a0809); border:1px solid rgba(255,255,255,.07); }
.ncard .gico svg{ width:22px; height:22px; }
.ncard .ttl{ min-width:0; }
.ncard .ttl .g{ font-size:11px; color:var(--dim); letter-spacing:.4px; text-transform:uppercase; font-weight:600; }
.ncard .ttl .n{ font-size:15.5px; font-weight:700; letter-spacing:-.2px; }
.ncard .conds{ display:flex; flex-wrap:wrap; gap:6px; }
.cond{ font-size:11px; font-weight:600; padding:3px 8px; border-radius:7px; border:1px solid var(--line-2); color:var(--dim); background:var(--bg-3); }
.cond.hi{ color:#ffd28a; border-color:rgba(255,200,80,.3); background:rgba(255,200,80,.07); }
.cond.in{ color:var(--dim); }
.ncard .stockline{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); }
.ncard .stockline .sb{ flex:1; height:5px; border-radius:999px; background:var(--gray-soft); overflow:hidden; }
.ncard .stockline .sf{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.ncard .stockline .sn{ color:var(--text); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ncard .foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }
.ncard .price{ font-size:19px; font-weight:800; letter-spacing:-.4px; }
.ncard .price .cur{ font-size:13px; color:var(--dim); font-weight:600; margin-left:2px; }

/* ===== tariff selector (product buy card) ===== */
.tariffs{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.tariffs-lbl{ font-size:12px; color:var(--dim); font-weight:600; letter-spacing:.3px; margin-bottom:2px; display:flex; justify-content:space-between; align-items:center; }
.tariffs-lbl .cnt{ color:var(--dim-2); font-weight:500; }
.tariff{ position:relative; display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--bg-3); cursor:pointer; transition:border-color .14s, background .14s; }
.tariff:hover{ border-color:var(--line-3); }
.tariff.on{ border-color:var(--accent); background:var(--accent-soft); }
.tariff .radio{ flex:none; width:18px; height:18px; border-radius:50%; border:2px solid var(--line-3); display:grid; place-items:center; transition:border-color .14s; }
.tariff.on .radio{ border-color:var(--accent); }
.tariff.on .radio::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.tariff .tinfo{ flex:1; min-width:0; }
.tariff .tname{ font-size:13.5px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }
.tariff .tname .mini-ar{ font-size:9px; font-weight:800; letter-spacing:.4px; padding:1px 5px; border-radius:5px; background:var(--accent); color:#fff; }
.tariff .tsub{ font-size:11.5px; color:var(--dim); margin-top:2px; }
.tariff .tprice{ flex:none; text-align:right; white-space:nowrap; }
.tariff .tprice .v{ font-size:15px; font-weight:800; letter-spacing:-.3px; white-space:nowrap; }
.tariff .tprice .v .cur{ color:var(--accent); font-size:11px; }
.tariff .tprice .st{ font-size:10.5px; color:var(--dim-2); margin-top:1px; }
.tariff.out{ opacity:.5; cursor:not-allowed; }
.tariff.out .tprice .st{ color:var(--gray); }
.checklist{ display:flex; flex-direction:column; gap:2px; }
.check{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line); }
.check:last-child{ border-bottom:none; }
.check .ck{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px;
  background:var(--ok-soft); border:1px solid rgba(44,198,107,.3); color:var(--ok); }
.check .ct b{ display:block; font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:2px; }
.check .ct span{ font-size:13px; color:var(--dim); line-height:1.5; }

/* ===== steps ===== */
.steps{ display:grid; grid-template-columns:1fr; gap:12px; counter-reset:st; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; }
.step .num{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:15px;
  background:var(--accent-soft); border:1px solid rgba(255,32,78,.28); color:var(--accent); margin-bottom:14px; }
.step h4{ margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.2px; }
.step p{ margin:0; color:var(--dim); font-size:13.5px; line-height:1.55; }
.step .si{ position:absolute; top:20px; right:20px; color:var(--dim-2); }

/* ===== FAQ accordion ===== */
.faq{ display:flex; flex-direction:column; gap:10px; }
.qa{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.qa summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:15px; font-weight:600; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .ico{ flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--dim); transition:transform .2s, color .2s, border-color .2s; }
.qa[open] summary .ico{ transform:rotate(45deg); color:var(--accent); border-color:rgba(255,32,78,.4); }
.qa .ans{ padding:0 20px 18px; color:var(--dim); font-size:13.5px; line-height:1.65; }
.qa .ans b{ color:var(--text); font-weight:600; }

/* ===== reviews ===== */
.rev-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:680px){ .rev-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .rev-grid{ grid-template-columns:repeat(3,1fr); } }
.rev{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.rev .rh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.rev .who{ display:flex; align-items:center; gap:10px; }
.rev .av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; font-weight:700; font-size:12px; }
.rev .nm{ font-size:13.5px; font-weight:600; }
.rev .dt{ font-size:11.5px; color:var(--dim-2); }
.rev .stars{ display:flex; gap:2px; color:var(--accent); }
.rev .txt{ color:var(--dim); font-size:13.5px; line-height:1.55; }
.rev .txt b{ color:var(--text); font-weight:500; }
.rev .rtag{ display:inline-block; margin-top:12px; padding:3px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11px; border:1px solid rgba(255,32,78,.2); }

/* ===== footer (compact) ===== */
.foot{ border-top:1px solid var(--line); margin-top:30px; }
.foot-in{ display:flex; flex-direction:column; gap:14px; padding:24px 0; color:var(--dim-2); font-size:12.5px; }
.foot-in .flogo{ font-weight:700; font-size:20px; letter-spacing:-.05em;
  background:linear-gradient(180deg,#FF204E,#AD1B39); -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot-row{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.foot-row a{ color:var(--dim); }
.foot-row a:hover{ color:var(--text); }
.foot-disc{ font-size:11.5px; color:var(--dim-2); line-height:1.6; max-width:760px; }

/* ===== misc utilities ===== */
.hero-trust{ display:flex; flex-wrap:wrap; gap:10px; }
.divider{ height:1px; background:var(--line); border:none; margin:0; }
.muted{ color:var(--dim); }
.center{ text-align:center; }
.sticky-cta{ position:sticky; bottom:0; z-index:40; }