/* ============================================================
   ENVY · ROBUX — custom.css
   A clean, monochrome, premium skin layered over pro.css.
   Loaded AFTER pro.css so these rules win.
   ============================================================ */

:root{
  --envy-bg: var(--cl-background-primary, #0a0a0a);
  --envy-panel: var(--cl-background-secondary, #121212);
  --envy-panel-2: #18181c;
  --envy-line: rgba(255,255,255,.08);
  --envy-line-2: rgba(255,255,255,.14);
  --envy-text: #f5f5f7;
  --envy-muted: #9a9aa6;
  --envy-accent: var(--cl-accent, #ffffff);
  --envy-radius: 20px;
  --envy-radius-sm: 14px;
  --envy-display: 'Bricolage Grotesque', var(--bs-font-sans-serif), sans-serif;
}

/* ---------- Base ---------- */
body{
  background: var(--envy-bg);
  color: var(--envy-text);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
/* Belt-and-suspenders against double-tap-zoom misfires on densely-packed tap targets,
   on top of the viewport meta tag's user-scalable=no. Also removes the ~300ms tap
   delay some mobile browsers impose while waiting to disambiguate a double-tap. */
a, button, input, select, .btn-pill, .nav-icon-btn{ touch-action: manipulation; }
.flex-wrapper{ min-height:100vh; display:flex; flex-direction:column; }
.flex-wrapper > div:first-child{ flex:1 0 auto; }
a{ color: var(--envy-text); }
.container{ max-width: 1200px; }
.py-20{ padding-top: 5rem; padding-bottom: 5rem; }

h1,h2,h3,.section-title h1,.section-title h2{
  font-family: var(--envy-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color:#fff;
}

/* ---------- Section heads ---------- */
.section-title{ display:flex; justify-content:center; text-align:center; margin-bottom:.5rem; }
.section-title h1,.section-title h2{ font-size: clamp(2rem, 4.4vw, 3.25rem); margin:0; }
.section-subtitle{ text-align:center; margin-bottom:3rem; }
.section-subtitle p{ color: var(--envy-muted); font-size:1.02rem; margin:.5rem auto 0; max-width:640px; }

/* ---------- Buttons ---------- */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.72rem 1.4rem; border-radius:999px; font-weight:600; font-size:.95rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .18s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.btn-pill svg{ width:1.05em; height:1.05em; }
.btn-pill:hover{ transform: translateY(-2px); }
.btn-pill-light{ background:#fff; color:#0a0a0a; }
.btn-pill-light:hover{ background:#eaeaea; color:#0a0a0a; }
.btn-pill-dark{ background:#1c1c20; color:#fff; border-color:var(--envy-line-2); }
.btn-pill-dark:hover{ background:#26262b; color:#fff; }
.btn-pill-outline{ background:transparent; color:#fff; border-color:var(--envy-line-2); }
.btn-pill-outline:hover{ background:rgba(255,255,255,.06); color:#fff; }
.btn-pill-outline .arrow{ width:.9em; height:.9em; stroke:currentColor; stroke-width:2; fill:none; }

/* Bootstrap primary buttons → Envy white */
.btn-primary,.btn-primary:focus{
  background:#fff !important; border-color:#fff !important; color:#0a0a0a !important;
  border-radius:999px !important; font-weight:600 !important; padding:.7rem 1.3rem !important;
}
.btn-primary:hover{ background:#eaeaea !important; border-color:#eaeaea !important; color:#0a0a0a !important; }
.btn-outline-primary,.btn-outline-primary:focus{
  background:transparent !important; border:1px solid var(--envy-line-2) !important; color:#fff !important;
  border-radius:999px !important; font-weight:600 !important; padding:.7rem 1.3rem !important;
}
.btn-outline-primary:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; border-color:#fff !important; }

/* ---------- Reveal animation (load-safe; visible by default) ---------- */
@keyframes envyFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
[data-reveal]{ animation: envyFadeUp .7s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ animation:none; } }

/* Guards against horizontal overflow on the page body specifically, not on html/
   body or .flex-wrapper, doing it there breaks position:sticky on the header
   below since an ancestor with any overflow set becomes the de facto "viewport"
   sticky positioning measures against. */
.envy-page-content{ overflow-x:hidden; max-width:100%; }

/* ============================================================
   NAVBAR — floating pill
   ============================================================ */
.sticky-top{ position:static; }
.envy-nav{ background:transparent !important; border:0 !important; padding:.9rem 0; }
.envy-nav .container{ display:block; }
.envy-nav-pill{
  /* isolation:isolate makes this a stacking-context root, which means EVERY
     descendant's z-index (the mobile drawer at 1091, the currency dropdown, etc.)
     is only ever compared against other things inside this pill, it can never rise
     above the rest of the page. Without an explicit z-index here on the pill ITSELF,
     the whole pill (as one unit) loses to later-DOM-order content like the hero
     section, confirmed by testing: the drawer rendered at the right size in the right
     place, just visually underneath the hero text. Giving the pill the same z-index
     the drawer needs fixes this for the drawer AND the currency dropdown at once. */
  position:relative; isolation:isolate; z-index:1091;
  display:flex; align-items:center; gap:1rem;
  border-radius:999px;
  padding:.5rem .65rem .5rem 1.1rem;
}
/* The frosted-glass look lives on a pseudo-element, not the pill itself, on purpose:
   backdrop-filter on a REAL element creates a new containing block for any
   position:fixed descendant (the mobile drawer + its backdrop both live inside this
   pill), which would trap them inside the pill's tiny box instead of the viewport.
   A pseudo-element has no descendants of its own, so it can't cause that. */
.envy-nav-pill::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background: rgba(16,16,18,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--envy-line);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.envy-nav .navbar-brand{
  display:flex; align-items:center; gap:.55rem; font-family:var(--envy-display);
  font-weight:800; color:#fff; font-size:1.05rem; letter-spacing:-.02em; margin:0; padding:0;
}
.envy-nav .navbar-brand img{ height:26px; width:auto; border-radius:7px; }
.envy-nav .envy-links{ gap:.25rem; }
.envy-nav .nav-link{
  color:#cfcfd6 !important; font-weight:500; font-size:.92rem; padding:.5rem .85rem !important;
  border-radius:999px; transition: color .15s ease, background .15s ease;
}
.envy-nav .nav-link:hover,.envy-nav .nav-link.active{ color:#fff !important; background:rgba(255,255,255,.06); }
.envy-nav .nav-link.as-button{ background:#fff; color:#0a0a0a !important; }
.envy-nav .envy-actions{ margin-left:auto; }

.envy-nav .nav-icon-btn{
  position:relative; display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:999px; color:#fff; background:rgba(255,255,255,.05); border:1px solid var(--envy-line);
  transition: background .15s ease;
}
.envy-nav .nav-icon-btn:hover{ background:rgba(255,255,255,.1); }
.envy-nav .nav-icon-btn svg{ width:19px; height:19px; }
.envy-nav .nav-icon-btn .count{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; background:#fff; color:#0a0a0a;
  font-size:11px; font-weight:700; border-radius:999px;
}
.envy-nav .btn-login{
  display:inline-flex; align-items:center; background:#fff; color:#0a0a0a; border:0;
  font-weight:600; font-size:.9rem; padding:.55rem 1.2rem; border-radius:999px; text-decoration:none;
  transition: background .15s ease, transform .15s ease;
}
.envy-nav .btn-login:hover{ background:#eaeaea; transform:translateY(-1px); }
.envy-nav .navbar-toggler{ position:relative; border:1px solid var(--envy-line); border-radius:12px; padding:8px 9px; width:42px; height:38px; transition:background .2s ease; }
.envy-nav .navbar-toggler:focus{ box-shadow:none; }
.envy-nav .navbar-toggler span{ display:block; width:18px; height:2px; background:#fff; border-radius:2px; margin:3px auto; transition:transform .25s ease, opacity .2s ease; }
.envy-nav .navbar-toggler.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.envy-nav .navbar-toggler.is-active span:nth-child(2){ opacity:0; }
.envy-nav .navbar-toggler.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.envy-nav .currency-selector select{
  appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.05); color:#fff;
  border:1px solid var(--envy-line); border-radius:999px; padding:.45rem 1.6rem .45rem .9rem;
  font-weight:600; font-size:.85rem; cursor:pointer;
}

/* ============================================================
   NAVBAR — mobile slide-in drawer (replaces Bootstrap's inline
   collapse). At lg+ envy-nav-panel just sits inline in the pill
   like before, the rules below only kick in below that.
   ============================================================ */
html.envy-nav-open{ overflow:hidden; }
.envy-nav-backdrop{
  position:fixed; inset:0; z-index:1090; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.envy-nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
.envy-nav-drawer-head{ display:none; }

/* Bootstrap's .navbar-collapse + .navbar-expand-lg classes used to give this div its
   desktop flex-row layout for free. Renamed away from those classes for the drawer
   rewrite, so that behavior has to be replicated explicitly or desktop breaks. */
.envy-nav-panel{
  display:flex; flex-basis:auto; flex-grow:1; align-items:center;
}

@media (max-width: 991.98px){
  .envy-nav-pill{ border-radius:22px; flex-wrap:wrap; align-items:center; }

  .envy-nav-panel{
    position:fixed; top:0; right:0; height:100%; width:min(86vw, 340px);
    z-index:1091; background:#0d0d10; border-left:1px solid var(--envy-line);
    display:flex; flex-direction:column; align-items:stretch; gap:.3rem; margin:0; padding:1.3rem 1.1rem 2rem;
    transform:translateX(100%); transition:transform .38s cubic-bezier(.22,1,.36,1);
    overflow-y:auto; box-shadow:-16px 0 48px rgba(0,0,0,.45);
  }
  .envy-nav-panel.is-open{ transform:translateX(0); }

  .envy-nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.5rem; padding-bottom:.9rem; border-bottom:1px solid var(--envy-line);
  }
  .envy-nav-drawer-head span{ font-family:var(--envy-display); font-weight:800; color:#fff; font-size:1rem; }
  .envy-nav-drawer-close{
    display:grid; place-items:center; width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:rgba(255,255,255,.05); border:1px solid var(--envy-line); color:#fff; cursor:pointer; padding:0;
    transition:background .15s ease;
  }
  .envy-nav-drawer-close:hover{ background:rgba(255,255,255,.12); }
  .envy-nav-drawer-close svg{ width:16px; height:16px; }

  .envy-nav .envy-links{ flex-direction:column; align-items:stretch; gap:.1rem; margin:0 0 .4rem !important; }
  .envy-nav .envy-links .nav-link{ display:block; padding:.8rem .7rem !important; border-radius:12px; }
  .envy-nav .envy-actions{ margin:.4rem 0 0; flex-direction:column; align-items:stretch !important; gap:.6rem !important; }
  .envy-nav .envy-actions .nav-item{ width:100%; }
  .envy-nav .btn-login{ width:100%; justify-content:center; padding:.75rem 1.2rem; }
  .envy-nav .currency-selector select{ width:100%; }
}

/* ============================================================
   HERO
   ============================================================ */
.envy-hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:7rem 0 8rem; margin-top:-86px; padding-top:11rem;
}
.envy-hero.height-short{ min-height:62vh; }
.envy-hero.height-medium{ min-height:78vh; }
.envy-hero.height-tall{ min-height:92vh; }
.envy-hero-bg{
  position:absolute; inset:0; z-index:-3; background-size:cover; background-position:center top;
  opacity:.6;
}
.envy-hero-glow{
  position:absolute; left:50%; top:18%; transform:translateX(-50%); z-index:-2;
  width:140vw; height:140vw; max-width:1500px; max-height:1500px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 30%, transparent 52%);
  pointer-events:none;
}
.envy-hero-glow::after{
  content:""; position:absolute; left:50%; top:42%; transform:translateX(-50%);
  width:120%; height:60%; border-radius:50% 50% 0 0;
  box-shadow: 0 -1px 80px 8px rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
}
.envy-hero-grid{
  position:absolute; inset:0; z-index:-3; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 70%);
}
.envy-hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.envy-hero.alignment-left .envy-hero-inner{ align-items:flex-start; text-align:left; }
.envy-hero.alignment-right .envy-hero-inner{ align-items:flex-end; text-align:right; }
.envy-badge{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.6rem;
  padding:.45rem .9rem; border-radius:999px; font-size:.82rem; color:#d6d6dd;
  background:rgba(255,255,255,.05); border:1px solid var(--envy-line); backdrop-filter:blur(6px);
}
.envy-badge svg{ width:15px; height:15px; color:#fff; }
.envy-badge b{ color:#fff; }
.envy-hero-title{
  font-size: clamp(2.6rem, 7vw, 5.4rem); margin:0; max-width:14ch; color:#fff;
}
.envy-hero.alignment-center .envy-hero-title{ margin-inline:auto; }
.envy-hero-sub{
  color:var(--envy-muted); font-size:clamp(1rem,1.6vw,1.18rem); margin:1.4rem auto 0; max-width:560px; line-height:1.6;
}
.envy-hero.alignment-left .envy-hero-sub{ margin-left:0; }
.envy-hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:2.2rem; }
.envy-hero.alignment-left .envy-hero-cta{ justify-content:flex-start; }

/* ============================================================
   FEATURES (pro.css .feature override → Envy bento)
   ============================================================ */
.features .row.list{ --bs-gutter-x:1.5rem; --bs-gutter-y:1.5rem; }
.features .feature{
  height:100%; background:var(--envy-panel); border:1px solid var(--envy-line);
  border-radius:var(--envy-radius); padding:1.6rem; transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.features .feature:hover{ border-color:var(--envy-line-2); transform:translateY(-3px); background:var(--envy-panel-2); }
.features .feature i{
  display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:1.1rem;
  border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--envy-line);
  color:#fff; font-size:1.1rem;
}
.features .feature .title{ font-family:var(--envy-display); font-weight:700; font-size:1.18rem; color:#fff; margin:0 0 .4rem; }
.features .feature .description{ color:var(--envy-muted); font-size:.95rem; line-height:1.55; margin:0; }

/* ============================================================
   PRODUCTS GRID
   ============================================================ */
.envy-products .products{ --bs-gutter-x:1.4rem; --bs-gutter-y:1.4rem; }
.envy-card{
  height:100%; display:flex; flex-direction:column;
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius);
  overflow:hidden; transition:border-color .2s ease, transform .2s ease;
}
.envy-card:hover{ border-color:var(--envy-line-2); transform:translateY(-3px); }
.envy-card-link{ display:block; text-decoration:none; }
.envy-card-img{ position:relative; aspect-ratio:16/10; background:#0e0e11; overflow:hidden; }
.envy-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.envy-card:hover .envy-card-img img{ transform:scale(1.05); }
.envy-card-placeholder{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.18); }
.envy-card-placeholder svg{ width:46px; height:46px; }
.envy-card-badges{ position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; }
.envy-pill{
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  font-size:.72rem; font-weight:600; color:#0a0a0a;
  background: color-mix(in oklab, var(--pill, #fff) 85%, white);
}
.envy-card-body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.9rem; flex:1; }
.envy-card-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.envy-card-title{ font-family:var(--envy-display); font-weight:700; font-size:1.05rem; color:#fff; margin:0; }
.envy-chip{
  flex-shrink:0; display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  border:1px solid var(--envy-line);
}
.envy-chip.is-ok{ color:#5be38a; background:rgba(91,227,138,.1); border-color:rgba(91,227,138,.25); }
.envy-chip.is-unl{ color:#7db8ff; background:rgba(125,184,255,.1); border-color:rgba(125,184,255,.25); }
.envy-chip.is-out{ color:#9a9aa6; background:rgba(255,255,255,.05); }
.envy-chip.is-info{ color:#5be38a; background:rgba(91,227,138,.1); border-color:rgba(91,227,138,.25); }
.envy-card-foot{ margin-top:auto; display:flex; align-items:stretch; gap:.7rem; }
.btn-buy{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:rgba(255,255,255,.05); border:1px solid var(--envy-line); color:#fff;
  border-radius:12px; padding:.7rem 1rem; font-weight:600; font-size:.92rem; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.btn-buy svg{ width:16px; height:16px; opacity:.8; }
.btn-buy:hover{ background:#fff; color:#0a0a0a; border-color:#fff; }
.btn-buy:hover svg{ opacity:1; }
.envy-card-price{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }
.envy-card-price .lbl{ font-size:.66rem; color:var(--envy-muted); text-transform:uppercase; letter-spacing:.04em; }
.envy-card-price .val{ font-weight:800; font-size:1.05rem; color:#fff; }

/* ============================================================
   STATS — "Facts, not claims."
   ============================================================ */
.envy-statbar{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:22px; overflow:hidden;
}
.envy-stat{ text-align:center; padding:2.6rem 1.5rem; }
.envy-stat + .envy-stat{ border-left:1px solid var(--envy-line); }
@media (max-width:860px){
  .envy-statbar{ grid-template-columns:repeat(2, 1fr); }
  .envy-stat:nth-child(2n+1){ border-left:0; }
}
.envy-stat-num{
  font-family:var(--envy-display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem); color:#fff;
  line-height:1; display:inline-flex; align-items:center; gap:.28rem;
}
.envy-stat-num .star{ width:.62em; height:.62em; fill:#FFD700; flex-shrink:0; }
.envy-stat-lbl{ margin-top:.8rem; color:var(--envy-muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }
@media (max-width:640px){
  .envy-statbar{ grid-template-columns:1fr; }
  .envy-stat + .envy-stat{ border-left:0; border-top:1px solid var(--envy-line); }
  .envy-stat{ padding:2rem 1.5rem; }
}

/* ============================================================
   ROBUX CALCULATOR
   ============================================================ */
.envy-robux-card{
  background:linear-gradient(180deg, var(--envy-panel-2), var(--envy-panel));
  border:1px solid var(--envy-line); border-radius:26px; padding:clamp(1.4rem,3vw,2.6rem);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.envy-robux-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }
@media (max-width:860px){ .envy-robux-grid{ grid-template-columns:1fr; } }

.envy-robux-readout{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem; border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.06), transparent 60%), #0d0d10;
  border:1px solid var(--envy-line); overflow:hidden;
}
.envy-robux-coin{ display:grid; place-items:center; width:58px; height:58px; border-radius:50%; margin-bottom:1rem;
  background:conic-gradient(from 200deg,#fff,#bdbdbd,#fff); color:#0a0a0a; box-shadow:0 8px 30px rgba(255,255,255,.15); }
.envy-robux-coin svg{ width:30px; height:30px; }
.envy-robux-amount{ display:flex; align-items:baseline; gap:.4rem; }
.envy-robux-amount .num{ font-family:var(--envy-display); font-weight:800; font-size:clamp(2.8rem,7vw,4.2rem); color:#fff; line-height:1; }
.envy-robux-amount .unit{ font-family:var(--envy-display); font-weight:700; font-size:1.4rem; color:var(--envy-muted); }
.envy-robux-price{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.15rem; }
.envy-robux-price .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--envy-muted); }
.envy-robux-price .val{ font-family:var(--envy-display); font-weight:800; font-size:1.9rem; color:#fff; }
.envy-robux-rate{ margin-top:.5rem; font-size:.8rem; color:var(--envy-muted); }

.envy-robux-controls{ display:flex; flex-direction:column; justify-content:center; }
.envy-robux-label{ font-weight:600; color:#fff; margin-bottom:1rem; font-size:1.02rem; }
.envy-robux-sliderwrap{ margin-bottom:1.4rem; }
.envy-robux-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,#fff 0%,#fff var(--fill,50%),rgba(255,255,255,.12) var(--fill,50%),rgba(255,255,255,.12) 100%);
}
.envy-robux-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:#fff;
  border:4px solid #0d0d10; box-shadow:0 0 0 1px rgba(255,255,255,.4),0 6px 18px rgba(0,0,0,.5); cursor:grab;
}
.envy-robux-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:4px solid #0d0d10; box-shadow:0 0 0 1px rgba(255,255,255,.4); cursor:grab; }
.envy-robux-scale{ display:flex; justify-content:space-between; margin-top:.6rem; font-size:.74rem; color:var(--envy-muted); }
.envy-robux-presets{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.3rem; }
.envy-robux-chip{
  position:relative; background:rgba(255,255,255,.05); border:1px solid var(--envy-line); color:#d6d6dd;
  border-radius:999px; padding:.5rem .95rem; font-weight:600; font-size:.85rem; cursor:pointer;
  transition:all .15s ease;
}
.envy-robux-chip:hover{ border-color:var(--envy-line-2); color:#fff; }
.envy-robux-chip.active{ background:#fff; color:#0a0a0a; border-color:#fff; }
/* Optional "BEST VALUE" ribbon, shown when this chip's amount matches the configured best_value_amount */
.envy-robux-chip--best::after{
  content:"BEST VALUE"; position:absolute; top:-9px; right:-6px; background:#fff; color:#0a0a0a;
  font-size:.56rem; font-weight:800; letter-spacing:.03em; padding:2px 6px; border-radius:999px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.envy-robux-exact{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem; max-width:240px; }
.envy-robux-exact .step{
  width:42px; height:42px; flex-shrink:0; border-radius:12px; border:1px solid var(--envy-line);
  background:rgba(255,255,255,.05); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; transition:background .15s ease;
}
.envy-robux-exact .step:hover{ background:rgba(255,255,255,.12); }
.envy-robux-exact .exact-input{
  flex:1; min-width:0; text-align:center; background:#0d0d10; border:1px solid var(--envy-line); color:#fff;
  border-radius:12px; padding:.6rem .4rem; font-weight:700; font-size:1.05rem; -moz-appearance:textfield;
}
.envy-robux-exact .exact-input::-webkit-outer-spin-button,
.envy-robux-exact .exact-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.envy-robux-buy{ width:100%; padding:.95rem 1.4rem; font-size:1rem; }
.envy-robux-buy-price{ margin-left:auto; padding-left:.9rem; border-left:1px solid rgba(0,0,0,.18); font-weight:800; }
.envy-robux-note{ margin:1rem 0 0; font-size:.78rem; color:var(--envy-muted); text-align:center; }
.envy-savings-badge{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.7rem;
  background:rgba(91,227,138,.1); color:#5be38a; font-weight:700; font-size:.78rem;
  padding:.32rem .7rem; border-radius:999px;
}
.envy-savings-badge svg{ width:13px; height:13px; }
.envy-robux-trust{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; margin:.9rem auto 0;
  align-self:center; font-size:.82rem; color:var(--envy-muted);
  border:1px solid var(--envy-line); border-radius:999px; padding:.4rem .9rem;
}
.envy-robux-trust .star{ width:14px; height:14px; }
.envy-robux-trust .dot{ opacity:.6; }
.envy-feedback-count{
  display:flex; width:fit-content; align-items:center; justify-content:center; gap:.4rem; margin:0 auto 1.6rem;
  font-size:.9rem; color:var(--envy-muted); font-weight:600;
  border:1px solid var(--envy-line); border-radius:999px; padding:.45rem 1rem;
}
.envy-feedback-count .star{ width:16px; height:16px; }
.envy-feedback-count .dot{ opacity:.6; }

/* ============================================================
   FEEDBACKS / REVIEWS (pro.css .testimonial override)
   ============================================================ */
.testimonials, .feedbacks .row{ --bs-gutter-y:1.4rem; }
.testimonial{
  height:100%; background:var(--envy-panel); border:1px solid var(--envy-line);
  border-radius:var(--envy-radius-sm); padding:1.4rem; display:flex; flex-direction:column;
  transition:border-color .2s ease;
}
.testimonial:hover{ border-color:var(--envy-line-2); }
.testimonial .main .header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.testimonial .header .quote{ width:26px; height:26px; color:rgba(255,255,255,.14); }
.testimonial .stars{ display:flex; gap:2px; }
.testimonial .stars svg{ width:15px; height:15px; }
.testimonial .content .message p{ color:var(--envy-text); font-size:.95rem; line-height:1.55; margin:0; }
.testimonial .reply{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--envy-line); }
.testimonial .reply .text{ color:var(--envy-muted); font-size:.9rem; }
.testimonial .reply .author{ color:var(--envy-muted); font-size:.78rem; margin-top:.3rem; }
.testimonial .footer{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--envy-line); display:flex; justify-content:space-between; align-items:center; }
.testimonial .footer .items{ color:#fff; font-size:.82rem; font-weight:600; }
.testimonial .footer .date{ color:var(--envy-muted); font-size:.78rem; }
.text-primary{ color:#fff !important; }

/* ============================================================
   FAQ (bootstrap accordion override)
   ============================================================ */
.faq .container{ max-width:760px; }
/* Single column, on purpose, a 2-col grid meant each row's height followed
   whichever side was taller, so opening one item visibly shoved its neighbor
   down even though that neighbor never changed. A stacked list doesn't have
   that problem, each item only ever affects its own height. */
.faq .accordion{ display:flex; flex-direction:column; gap:.85rem; --bs-accordion-bg:transparent; --bs-accordion-border-color:transparent; }
.faq .accordion-item{
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:14px; overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}
.faq .accordion-item:hover{ border-color:var(--envy-line-2); }
.faq .accordion-header{ margin:0; }
.faq .accordion-button{
  background:transparent !important; color:#fff !important; font-weight:600; font-size:1.02rem;
  padding:1.15rem 1.3rem; box-shadow:none !important; gap:1rem; border-radius:14px;
}
.faq .accordion-button:focus{ box-shadow:none !important; outline:none !important; }
.faq .accordion-button::after{
  flex-shrink:0; width:1.5rem; height:1.5rem; margin:0; transition:transform .25s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:1.15rem;
}
.faq .accordion-button:not(.collapsed){ background:rgba(255,255,255,.02) !important; border-bottom:1px solid var(--envy-line); }
.faq .accordion-button:not(.collapsed)::after{ transform:rotate(45deg); }
.faq .accordion-body{ color:var(--envy-muted); padding:1.1rem 1.3rem 1.25rem; line-height:1.65; font-size:.95rem; }

/* ============================================================
   CTA — "Don't sleep on this." + dotted globe
   ============================================================ */
.envy-cta-card{
  position:relative; overflow:hidden; border-radius:26px;
  background:var(--envy-panel); border:1px solid var(--envy-line);
  padding:clamp(2rem,5vw,4rem); min-height:300px; display:flex; align-items:center;
}
.envy-cta-body{ position:relative; z-index:1; max-width:560px; }
.envy-cta-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--envy-muted); margin:0 0 .8rem; }
.envy-cta-title{ font-size:clamp(2rem,4vw,3rem); margin:0 0 .8rem; color:#fff; }
.envy-cta-sub{ color:var(--envy-muted); margin:0 0 1.8rem; font-size:1.02rem; max-width:440px; line-height:1.6; }
.envy-cta-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.envy-cta-globe{
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:min(46%,460px); aspect-ratio:1; border-radius:50%;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.1px, transparent 1.2px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 38%, rgba(0,0,0,.35) 60%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, #000 38%, rgba(0,0,0,.35) 60%, transparent 72%);
  opacity:.55; pointer-events:none;
}
.envy-cta-globe::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 60px 4px rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.12);
}
@media (max-width:768px){ .envy-cta-globe{ opacity:.18; right:-120px; } }

/* ============================================================
   SOCIALS (pro.css .social override)
   ============================================================ */
.socials .social{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius-sm);
  padding:1.1rem 1.3rem; color:#fff; text-decoration:none; transition:border-color .2s ease, transform .2s ease;
}
.socials .social:hover{ border-color:var(--envy-line-2); transform:translateY(-3px); }
.socials .social .left{ display:flex; align-items:center; gap:.7rem; font-weight:600; }
.socials .social .left svg{ width:24px; height:24px; }
.socials .social .right svg{ width:18px; height:18px; color:var(--envy-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.envy-footer{ border-top:1px solid var(--envy-line); margin-top:2rem; padding:3.5rem 0 2.2rem; background:#08080a; }
.envy-footer-top{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; }
.envy-footer-brand{ max-width:360px; }
.envy-footer-logo{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--envy-display); font-weight:800; font-size:1.15rem; color:#fff; text-decoration:none; }
.envy-footer-logo img{ height:28px; border-radius:7px; }
.envy-footer-tagline{ color:var(--envy-muted); margin:.9rem 0 1.1rem; font-size:.92rem; line-height:1.6; }
.envy-footer-socials{ display:flex; gap:.6rem; }
.envy-footer-socials a{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--envy-line); color:#cfcfd6; transition:all .15s ease; }
.envy-footer-socials a:hover{ background:#fff; color:#0a0a0a; }
.envy-footer-socials svg{ width:18px; height:18px; }
.envy-footer-cols{ display:flex; gap:4rem; flex-wrap:wrap; }
.envy-footer-col h5{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--envy-muted); margin:0 0 1rem; }
.envy-footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.envy-footer-col a{ color:#cfcfd6; text-decoration:none; font-size:.92rem; transition:color .15s ease; }
.envy-footer-col a:hover{ color:#fff; }
.envy-footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--envy-line); }
.envy-footer-bottom p{ margin:0; color:var(--envy-muted); font-size:.82rem; }
.envy-footer-secure{ display:inline-flex; align-items:center; gap:.5rem; }
.envy-footer-secure .dot{ width:8px; height:8px; border-radius:50%; background:#5be38a; box-shadow:0 0 10px rgba(91,227,138,.6); }

/* ============================================================
   ANNOUNCEMENT
   ============================================================ */
.announcement{
  background:#fff; color:#0a0a0a; text-align:center; padding:.55rem 1rem; font-size:.86rem; font-weight:500;
}
.announcement a{ color:#0a0a0a; font-weight:700; text-decoration:underline; display:inline-flex; align-items:center; gap:.25rem; }
.announcement a svg{ width:14px; height:14px; }

/* ============================================================
   CART / PRODUCT / STATUS / CUSTOMER — Envy polish
   ============================================================ */
.py-5-nav{ padding-top:3rem; padding-bottom:3rem; }
.card, .cart .card, .summary, .cart-summary{
  background:var(--envy-panel) !important; border:1px solid var(--envy-line) !important; border-radius:var(--envy-radius-sm) !important;
}
.form-control,.form-select{
  background:#0d0d10 !important; border:1px solid var(--envy-line) !important; color:#fff !important; border-radius:12px !important;
}
.form-control:focus,.form-select:focus{ border-color:var(--envy-line-2) !important; box-shadow:none !important; }
.modal-content{ background:var(--envy-panel) !important; border:1px solid var(--envy-line) !important; border-radius:var(--envy-radius) !important; }
.status-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius-sm);
  padding:1.1rem 1.3rem; text-decoration:none; color:#fff; transition:border-color .2s ease;
}
.status-card:hover{ border-color:var(--envy-line-2); }
.status-card h3{ font-size:1.02rem; margin:0; font-family:var(--bs-font-sans-serif); font-weight:600; }
.status-card .status{ display:flex; align-items:center; gap:.5rem; }
.status-card .indicator{ position:relative; width:9px; height:9px; border-radius:50%; }
.status-card .pulsating{ position:absolute; inset:0; border-radius:50%; animation:envyPulse 1.8s ease-out infinite; }
@keyframes envyPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3); opacity:0; } }

/* Pagination */
.pagination .page-link{ background:var(--envy-panel); border:1px solid var(--envy-line); color:#fff; border-radius:10px; margin:0 3px; }
.pagination .page-item.active .page-link{ background:#fff; color:#0a0a0a; border-color:#fff; }

/* Choices.js (currency + variants) */
.choices__inner{ background:#0d0d10 !important; border:1px solid var(--envy-line) !important; border-radius:12px !important; color:#fff; }
.choices__list--dropdown{ background:#121216 !important; border:1px solid var(--envy-line) !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted{ background:rgba(255,255,255,.08) !important; }

/* ============================================================
   REVIEWS — "view all" button
   ============================================================ */
.envy-reviews-more{ display:flex; justify-content:center; margin-top:2.6rem; }
.envy-reviews .testimonials{ --bs-gutter-x:1.2rem; --bs-gutter-y:1.2rem; }

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */

/* Tablet & below — nav becomes a side drawer, hero stops underlapping the nav */
@media (max-width: 991.98px){
  .envy-nav{ padding:.7rem 0; }
  .envy-nav .container{ padding-left:.9rem; padding-right:.9rem; }
  .envy-nav-pill{
    justify-content:space-between; flex-wrap:wrap; gap:.6rem;
    padding:.55rem .6rem .55rem 1rem; border-radius:20px;
  }
  .envy-nav .navbar-brand{ font-size:1rem; }

  .envy-hero{ margin-top:0; padding:4rem 0 3rem; min-height:auto !important; }
}

/* Phones */
@media (max-width: 768px){
  .py-20{ padding-top:3.2rem; padding-bottom:3.2rem; }
  .section-title h1,.section-title h2{ font-size:clamp(1.9rem, 7vw, 2.6rem); }
  .section-subtitle{ margin-bottom:2rem; }
  .section-subtitle p{ font-size:.95rem; }

  .envy-hero{ padding:2.5rem 0 2.5rem; }
  .envy-hero-title{ font-size:clamp(2.1rem, 9vw, 3rem); max-width:100%; }
  .envy-hero-sub{ font-size:1rem; margin-top:1.1rem; }
  .envy-hero-cta{ width:100%; margin-top:1.8rem; }
  .envy-hero-cta .btn-pill{ flex:1 1 auto; }
  .envy-badge{ margin-bottom:1.2rem; }

  .envy-robux-card{ border-radius:18px; }
  .envy-robux-grid{ gap:1.4rem; }
  .envy-robux-readout{ padding:1.6rem 1rem; }
  .envy-robux-amount .num{ font-size:clamp(2.6rem,12vw,3.4rem); }
  .envy-robux-buy{ flex-wrap:wrap; row-gap:.2rem; }
  .envy-robux-buy-price{ border-left:0; padding-left:0; margin-left:.45rem; }

  .envy-stat{ padding:1.9rem 1.2rem; }

  .envy-cta-card{ min-height:auto; padding:1.9rem 1.4rem; }
  .envy-cta-actions{ width:100%; }
  .envy-cta-actions .btn-pill{ flex:1 1 auto; justify-content:center; }

  .envy-footer{ padding:2.6rem 0 1.8rem; }
  .envy-footer-top{ flex-direction:column; gap:2rem; }
  .envy-footer-cols{ gap:2.4rem; }
  .envy-footer-bottom{ flex-direction:column; align-items:flex-start; gap:.5rem; margin-top:2rem; }

  .features .feature{ padding:1.3rem; }
}

/* Small phones */
@media (max-width: 480px){
  .container{ padding-left:1rem; padding-right:1rem; }
  .envy-hero-cta{ flex-direction:column; }
  .envy-hero-cta .btn-pill{ width:100%; }
  .envy-robux-presets .envy-robux-chip{ flex:1 1 40%; text-align:center; }
  .envy-robux-exact{ max-width:100%; }
  .envy-cta-globe{ display:none; }
  .section-title h1,.section-title h2{ font-size:clamp(1.7rem, 8vw, 2.2rem); }
}

/* ============================================================
   REVIEW WHEEL (homepage marquee)
   ============================================================ */
.review-marquee{
  display:flex; flex-direction:column; gap:1rem; overflow:hidden; padding:1.4rem 0 .4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.review-row{ overflow:hidden; }
.review-track{
  display:flex; gap:1rem; width:max-content; align-items:stretch;
  animation:envyMarquee 80s linear infinite; will-change:transform;
}
.review-row.rev .review-track{ animation-direction:reverse; animation-duration:95s; }
@keyframes envyMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.review-card{
  flex:0 0 clamp(258px,78vw,330px); width:clamp(258px,78vw,330px);
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius-sm);
  padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.7rem;
}
.review-card-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.review-card .stars{ display:flex; gap:2px; }
.review-card .stars svg{ width:14px; height:14px; }
.review-item{ font-size:.7rem; font-weight:600; color:var(--envy-muted); white-space:nowrap; }
.review-msg{ margin:0; color:var(--envy-text); font-size:.92rem; line-height:1.5; }
.review-date{ display:block; margin-top:.5rem; font-size:.7rem; color:var(--envy-muted); opacity:.75; }
@media (prefers-reduced-motion: reduce){ .review-track{ animation:none; } }

/* ============================================================
   NAVBAR — currency selector (Choices.js) + cart refinements
   ============================================================ */
/* Cart: clean borderless icon (no boxed circle) */
.envy-nav .nav-icon-btn{
  width:auto; min-width:40px; height:40px; padding:0 .4rem;
  background:transparent; border:0; color:#cfcfd6; border-radius:10px;
}
.envy-nav .nav-icon-btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
.envy-nav .nav-icon-btn svg{ width:21px; height:21px; }
.envy-nav .nav-icon-btn .count{
  top:-3px; right:-2px; min-width:17px; height:17px; font-size:10px;
  border:2px solid var(--envy-bg);
}

/* Currency: compact pill that matches the nav (Choices widget) */
.envy-nav .currency-selector .choices,
.envy-nav .currency-selector .choices__inner{ margin:0 !important; }
.envy-nav .currency-selector .choices__inner{
  background:rgba(255,255,255,.05) !important; border:1px solid var(--envy-line) !important;
  border-radius:999px !important; min-height:40px !important; padding:0 1.9rem 0 .95rem !important;
  display:flex !important; align-items:center !important; font-size:.85rem; font-weight:600;
}
.envy-nav .currency-selector .choices__list--single{ padding:0 !important; }
.envy-nav .currency-selector .choices__item{ color:#fff !important; }
.envy-nav .currency-selector .choices[data-type*="select-one"]::after{
  border-color:#cfcfd6 transparent transparent transparent !important; right:13px !important; margin-top:-2px !important;
}
.envy-nav .currency-selector .choices[data-type*="select-one"].is-open::after{
  border-color:transparent transparent #cfcfd6 transparent !important; margin-top:-7px !important;
}
.envy-nav .currency-selector .choices__list--dropdown{
  background:#15151a !important; border:1px solid var(--envy-line-2) !important; border-radius:12px !important;
  margin-top:8px !important; min-width:120px; overflow:hidden;
}
.envy-nav .currency-selector .choices__list--dropdown .choices__item{ font-size:.85rem; padding:.5rem .8rem; }
.envy-nav .currency-selector .choices__list--dropdown .choices__item--selectable.is-highlighted{
  background:rgba(255,255,255,.08) !important; color:#fff !important;
}
/* native select fallback (before Choices upgrades it) */
.envy-nav .currency-selector select{ min-height:40px; }

/* ============================================================
   PAGE HEADING SPACING (cart / feedback / customer pages)
   ============================================================ */
.py-5-nav > .section-title,
.cart .section-title{ margin-bottom:1.75rem; }
.py-5-nav > .section-title + .section-subtitle{ margin-top:-1.25rem; margin-bottom:2.25rem; }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.envy-loader{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:var(--envy-bg); transition:opacity .6s ease, visibility .6s ease;
}
.envy-loader.is-done{ opacity:0; visibility:hidden; }
.envy-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.envy-loader-logo{ width:54px; height:54px; border-radius:14px; object-fit:cover; }
.envy-loader-name{ font-family:var(--envy-display); font-weight:800; font-size:1.6rem; color:#fff; letter-spacing:-.02em; }
.envy-loader-bar{ width:160px; height:4px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.envy-loader-bar span{ display:block; height:100%; width:40%; border-radius:999px; background:#fff; animation:envyLoadBar 1.1s ease-in-out infinite; }
@keyframes envyLoadBar{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(360%); } }
html.envy-loading{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .envy-loader-bar span{ animation:none; width:100%; } }

/* ============================================================
   PROCESS — "Simple process"
   ============================================================ */
.envy-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600;
  color:var(--envy-muted); padding:.4rem .85rem; border:1px solid var(--envy-line); border-radius:999px; margin-bottom:1rem;
}
/* Pulls the process section up toward whatever's directly above it (the reviews
   marquee on the homepage), the default py-20 + py-20 seam between two sections
   reads as a dead zone, this trims it by ~25% without touching py-20 globally. */
.envy-reviews + .envy-process{ margin-top:-2.5rem; }
@media (max-width:768px){
  .envy-reviews + .envy-process{ margin-top:-1.3rem; }
}
/* ============================================================
   LEGAL PAGES — Terms / Privacy / Refund Policy, replaces the
   generic Bootstrap .bg-gray box with a card that matches the
   rest of the site's dark panel + border treatment.
   ============================================================ */
.envy-legal-icon{
  width:52px; height:52px; margin:0 auto 1.1rem; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--envy-line); color:#fff;
}
.envy-legal-icon svg{ width:24px; height:24px; }
.envy-legal-card{
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius);
  padding:2.4rem 2.6rem; box-shadow:0 16px 40px rgba(0,0,0,.35); color:var(--envy-muted);
  line-height:1.7;
}
.envy-legal-card .e-heading-h1,
.envy-legal-card .e-heading-h2,
.envy-legal-card .e-heading-h3{ color:#fff; margin-top:1.9rem; }
.envy-legal-card .e-heading-h1:first-child,
.envy-legal-card .e-heading-h2:first-child,
.envy-legal-card .e-heading-h3:first-child{ margin-top:0; }
.envy-legal-card .e-paragraph{ margin-bottom:1rem; }
.envy-legal-card .e-list-ol,
.envy-legal-card .e-list-ul{ margin-bottom:1rem; }
.envy-legal-card a{ color:#fff; text-decoration:underline; text-decoration-color:var(--envy-line-2); }
@media (max-width:600px){
  .envy-legal-card{ padding:1.6rem 1.4rem; }
}
.envy-process-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.envy-process-title{ font-size:clamp(2rem,4.4vw,3rem); margin:0 0 .8rem; color:#fff; }
.envy-process-sub{ color:var(--envy-muted); font-size:1.05rem; margin:0; }
.envy-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.envy-step{
  display:flex; gap:1.1rem; background:var(--envy-panel); border:1px solid var(--envy-line);
  border-radius:var(--envy-radius); padding:1.5rem; transition:border-color .2s ease, transform .2s ease;
}
.envy-step:hover{ border-color:var(--envy-line-2); transform:translateY(-3px); }
.envy-step-num{
  flex-shrink:0; width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:#fff; color:#0a0a0a; font-family:var(--envy-display); font-weight:800; font-size:1.15rem;
}
.envy-step-title{ font-family:var(--envy-display); font-weight:700; font-size:1.15rem; color:#fff; margin:0 0 .4rem; }
.envy-step-desc{ color:var(--envy-muted); font-size:.93rem; line-height:1.55; margin:0 0 .8rem; }
.envy-step-badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:600; color:#cfcfd6;
  background:rgba(255,255,255,.05); border:1px solid var(--envy-line); padding:.32rem .7rem; border-radius:999px;
}
.envy-process-aux{ display:grid; grid-template-columns:1.3fr 1fr; gap:1.1rem; margin-top:1.1rem; }
.envy-ready{ background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius); padding:1.5rem; }
.envy-ready h4{ font-size:.95rem; font-weight:700; color:#fff; margin:0 0 1rem; }
.envy-ready ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.envy-ready li{ display:flex; align-items:center; gap:.6rem; color:var(--envy-text); font-size:.95rem; }
.envy-ready li svg{ flex-shrink:0; width:20px; height:20px; padding:3px; border-radius:50%; background:rgba(91,227,138,.14); color:#5be38a; }
.envy-tutorial{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:linear-gradient(180deg,var(--envy-panel-2),var(--envy-panel)); border:1px solid var(--envy-line);
  border-radius:var(--envy-radius); padding:1.5rem; transition:border-color .2s ease, transform .2s ease;
}
.envy-tutorial:hover{ border-color:var(--envy-line-2); transform:translateY(-3px); }
.envy-tutorial-play{ flex-shrink:0; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#0a0a0a; }
.envy-tutorial-play svg{ width:22px; height:22px; margin-left:2px; }
.envy-tutorial-text{ display:flex; flex-direction:column; }
.envy-tutorial-text .t1{ font-weight:700; color:#fff; font-size:1rem; }
.envy-tutorial-text .t2{ color:var(--envy-muted); font-size:.82rem; }
.envy-process-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:1.6rem;
  background:var(--envy-line); border:1px solid var(--envy-line); border-radius:var(--envy-radius); overflow:hidden;
}
.envy-pstat{ background:var(--envy-panel); padding:1.6rem 1rem; text-align:center; }
.envy-pstat-val{ font-family:var(--envy-display); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.8rem); color:#fff; line-height:1.1; }
.envy-pstat-lbl{ margin-top:.4rem; color:var(--envy-muted); font-size:.78rem; }
.envy-process-help{ text-align:center; margin-top:1.8rem; }
.envy-process-help a{ display:inline-flex; align-items:center; gap:.45rem; color:var(--envy-muted); text-decoration:none; font-size:.92rem; transition:color .15s ease; }
.envy-process-help a:hover{ color:#fff; }
.envy-process-help svg{ width:16px; height:16px; }

/* ============================================================
   MOBILE OVERHAUL v2 (process + general polish)
   ============================================================ */
@media (max-width: 860px){
  .envy-steps{ grid-template-columns:1fr; }
  .envy-process-aux{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  .py-20{ padding-top:2.8rem; padding-bottom:2.8rem; }
  .envy-process-head{ margin-bottom:2rem; }
  .envy-process-stats{ grid-template-columns:repeat(2,1fr); }
  .envy-step{ padding:1.25rem; gap:.9rem; }
  .envy-step-num{ width:34px; height:34px; font-size:1rem; }
  .envy-loader-name{ font-size:1.35rem; }
  /* tighten review wheel + cards on phones */
  .review-card{ flex-basis:74vw; width:74vw; }
  /* let the hero breathe, never collide with nav */
  .envy-hero{ padding:1.5rem 0 2rem !important; min-height:auto !important; }
  .envy-hero-title{ font-size:clamp(2rem,8.5vw,2.8rem); }
  /* calculator readout + controls comfortable */
  .envy-robux-readout{ padding:1.5rem 1rem; }
}
@media (max-width: 480px){
  .envy-process-stats{ grid-template-columns:1fr; }
  .envy-pstat{ padding:1.3rem 1rem; }
}

/* ============================================================
   MOBILE — AUTHORITATIVE OVERRIDES (v3, last wins)
   Consolidated to resolve conflicts from earlier passes.
   ============================================================ */
img, video { max-width: 100%; height: auto; }
.flex-wrapper, main, header, footer, section { min-width: 0; }

@media (max-width: 991.98px){
  .envy-hero{ margin-top: 0 !important; }
}

@media (max-width: 768px){
  /* vertical rhythm */
  .py-20{ padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; }
  .container{ padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  .section-title h1, .section-title h2,
  .envy-process-title, .envy-cta-title{ font-size: clamp(1.7rem, 7.5vw, 2.3rem) !important; }
  .section-subtitle{ margin-bottom: 1.6rem; }
  .section-subtitle p{ font-size: .92rem; }

  /* hero */
  .envy-hero{ padding: 2rem 0 2.2rem !important; min-height: auto !important; }
  .envy-hero-title{ font-size: clamp(2rem, 8.5vw, 2.7rem) !important; max-width: 18ch; }
  .envy-hero-sub{ font-size: .98rem !important; margin-top: 1rem !important; }
  .envy-hero-cta{ width: 100%; margin-top: 1.5rem; gap: .6rem; }
  .envy-hero-cta .btn-pill{ flex: 1 1 auto; }
  .envy-hero-grid{ background-size: 40px 40px; }

  /* navbar */
  .envy-nav{ padding: .6rem 0; }
  .envy-nav-pill{ padding: .5rem .55rem .5rem .9rem; }

  /* robux calculator */
  .envy-robux-grid{ grid-template-columns: 1fr !important; gap: 1.2rem; }
  .envy-robux-card{ padding: 1.2rem !important; }
  .envy-robux-amount .num{ font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .envy-robux-buy{ flex-wrap: wrap; }
  .envy-robux-buy-price{ border-left: 0; margin-left: .4rem; padding-left: 0; }

  /* feature cards */
  .features .feature{ padding: 1.2rem; }

  /* review wheel */
  .review-card{ flex-basis: 76vw; width: 76vw; padding: 1.1rem; }
  .review-marquee{ gap: .8rem; }

  /* stats bar -> stacked */
  .envy-statbar{ grid-template-columns: 1fr; }
  .envy-stat + .envy-stat{ border-left: 0; border-top: 1px solid var(--envy-line); }
  .envy-stat{ padding: 1.6rem 1rem; }

  /* process */
  .envy-steps{ grid-template-columns: 1fr; }
  .envy-process-aux{ grid-template-columns: 1fr; }
  .envy-process-stats{ grid-template-columns: repeat(2, 1fr); }

  /* cta */
  .envy-cta-card{ min-height: auto; padding: 1.8rem 1.3rem; }
  .envy-cta-globe{ display: none; }
  .envy-cta-actions{ width: 100%; }
  .envy-cta-actions .btn-pill{ flex: 1 1 auto; justify-content: center; }

  /* footer */
  .envy-footer-top{ flex-direction: column; gap: 1.8rem; }
  .envy-footer-cols{ gap: 2rem; }
  .envy-footer-bottom{ flex-direction: column; align-items: flex-start; gap: .5rem; }
}

@media (max-width: 480px){
  .envy-hero-cta{ flex-direction: column; }
  .envy-hero-cta .btn-pill{ width: 100%; }
  .envy-process-stats{ grid-template-columns: 1fr; }
  .review-card{ flex-basis: 84vw; width: 84vw; }
}

/* ============================================================
   MOBILE LAYOUT POLISH v4 (monochrome — keeps the existing style)
   ============================================================ */
@media (max-width: 768px){
  /* Hero: calmer background + tighter composition */
  .envy-hero-grid{ display: none; }
  .envy-hero-glow{ top: 6%; opacity: .65; }
  .envy-hero{ text-align: center; }
  .envy-hero-inner{ align-items: center !important; }
  .envy-badge{ margin-bottom: 1.1rem; font-size: .78rem; }
  .envy-hero-title{ line-height: 1.06; }
  .envy-hero-cta{ flex-direction: column; }
  .envy-hero-cta .btn-pill{ width: 100%; }

  /* Review wheel: 2 rows (less motion/clutter) + smoother pace */
  .review-marquee .review-row:nth-of-type(3){ display: none; }
  .review-card{ flex-basis: 72vw; width: 72vw; }
  .review-track{ animation-duration: 44s; }
  .review-row.rev .review-track{ animation-duration: 54s; }

  /* Calculator: neat preset grid + full-width controls */
  .envy-robux-presets{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .envy-robux-chip{ text-align: center; padding: .55rem .35rem; }
  .envy-robux-exact{ max-width: 100%; }
  .envy-robux-buy{ width: 100%; }

  /* Cards / sections rhythm */
  .features .row.list{ --bs-gutter-y: 1rem; }
  .envy-products .products{ --bs-gutter-y: 1rem; }
  .envy-step{ align-items: flex-start; }
}

@media (max-width: 480px){
  .review-card{ flex-basis: 82vw; width: 82vw; }
  .envy-robux-presets{ grid-template-columns: repeat(2, 1fr); }
  .envy-hero-title{ font-size: clamp(1.9rem, 9vw, 2.5rem) !important; }
}

/* ============================================================
   FEATURE CARDS + PROCESS STEPS — compact mobile layout
   Row 1: icon (left) + title (right), vertically centred.
   Row 2: description spans full width directly below title.
   Verified live on bloxzone at 390px.
   ============================================================ */
.features .feature i{ font-size: 22px !important; line-height: 1 !important; }

@media (max-width: 768px){
  /* Feature cards */
  .features .feature{
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: .9rem; row-gap: .35rem;
    text-align: left !important; padding: 1rem 1.1rem !important;
  }
  .features .feature i{
    grid-column: 1 !important; grid-row: 1 !important; /* icon on row 1 only */
    width: 42px !important; height: 42px !important; font-size: 19px !important;
    margin: 0 !important; align-self: center;
  }
  .features .feature .title{
    grid-column: 2 !important; grid-row: 1 !important;
    font-size: 1rem !important; margin: 0 !important; align-self: center;
  }
  .features .feature .description{
    grid-column: 1 / -1 !important; grid-row: 2 !important; /* full width, right under title */
    font-size: .88rem !important; margin: 0 !important; text-align: left !important;
  }
  .features .row.list{ --bs-gutter-y: .7rem; }

  /* Process steps — same treatment: number left, content right */
  .envy-step{
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: .9rem; row-gap: .35rem;
    padding: 1rem 1.1rem !important; align-items: start;
  }
  .envy-step-num{
    grid-column: 1 !important; grid-row: 1 !important;
    width: 34px !important; height: 34px !important; font-size: .95rem !important;
    align-self: center; flex-shrink: 0;
  }
  .envy-step-body{
    grid-column: 2 !important; grid-row: 1 !important; display: contents;
  }
  .envy-step-title{
    grid-column: 2 !important; grid-row: 1 !important;
    font-size: 1rem !important; margin: 0 !important; align-self: center;
  }
  .envy-step-desc{
    grid-column: 1 / -1 !important; grid-row: 2 !important; /* full width below */
    font-size: .88rem !important; margin: 0 !important;
  }
  .envy-step-badge{
    grid-column: 1 / -1 !important; grid-row: 3 !important;
    font-size: .68rem !important;
  }
  .envy-steps{ gap: .7rem; }
}

/* ============================================================
   PRODUCT PAGE — Robux amount slider (mirrors homepage calculator)
   ============================================================ */
.robux-range{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; outline:none; cursor:pointer;
  background: rgba(255,255,255,.15);
  margin-top:.4rem;
}
.robux-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff;
  border:4px solid #0d0d10; box-shadow:0 0 0 1px rgba(255,255,255,.4),0 6px 16px rgba(0,0,0,.5); cursor:grab;
}
.robux-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid #0d0d10; box-shadow:0 0 0 1px rgba(255,255,255,.4); cursor:grab; }
.robux-range:disabled{ opacity:.4; cursor:not-allowed; }
.robux-range-scale{ margin-top:.4rem; font-size:.72rem; color:var(--envy-muted); }

/* Hide the "< 2 min / No password / 200,000+ / 24/7" stats row on mobile (last rule wins) */
@media (max-width: 768px){
  .envy-process-stats{ display:none; }
}

/* ============================================================
   STATUS PAGE
   ============================================================ */
.status-overall{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:var(--envy-radius);
  padding:1.4rem 1.6rem; margin-bottom:2.4rem;
}
.status-overall-dot{
  width:14px; height:14px; border-radius:50%; background:#10d28a; flex-shrink:0;
  box-shadow:0 0 0 4px rgba(16,210,138,.18); position:relative;
}
.status-overall-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:#10d28a;
  animation:envyPulse 1.8s ease-out infinite;
}
.status-overall-text{ display:flex; flex-direction:column; gap:.15rem; }
.status-overall-text strong{ color:#fff; font-size:1.02rem; }
.status-overall-text span{ color:var(--envy-muted); font-size:.85rem; }
.status-overall-time{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:.1rem; }
.status-overall-time strong{ color:#fff; font-family:var(--envy-display); font-weight:800; font-size:1.2rem; }
.status-overall-time span{ color:var(--envy-muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; }

.status-section{ margin-bottom:2.4rem; }
.status-section-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--envy-muted); margin-bottom:1rem; }
.status-section .status-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.status-card-static{ cursor:default; }

.status-footnote{ color:var(--envy-muted); font-size:.9rem; margin-top:1rem; }
.status-footnote a{ color:#fff; text-decoration:underline; }

@media (max-width:600px){
  .status-overall{ flex-direction:column; align-items:flex-start; }
  .status-overall-time{ margin-left:0; text-align:left; }
}

/* ============================================================
   FOOTER TRUST BAR
   ============================================================ */
.envy-trust-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:1.2rem 0; margin-top:2rem; border-top:1px solid var(--envy-line);
}
.envy-trust-secured{ display:inline-flex; align-items:center; gap:.5rem; color:var(--envy-muted); font-size:.85rem; font-weight:600; }
.envy-trust-secured i{ color:#5be38a; }
.envy-trust-cards{ display:flex; align-items:center; gap:.9rem; color:var(--envy-muted); font-size:1.5rem; }
.envy-trust-cards i:hover{ color:#fff; }
.envy-trust-discord{ display:inline-flex; align-items:center; gap:.5rem; color:var(--envy-muted); font-size:.85rem; font-weight:600; }
.envy-trust-discord .dot{ width:8px; height:8px; border-radius:50%; background:#5be38a; box-shadow:0 0 8px rgba(91,227,138,.6); }
.envy-trust-discord .count{ color:#fff; }
@media (max-width:600px){
  .envy-trust-bar{ flex-direction:column; align-items:flex-start; gap:.9rem; }
}

/* ============================================================
   RECENT ACTIVITY TOAST — honest, reuses real review item data,
   no fabricated names or numbers. Sits clear of the nav drawer
   (lower z-index, so the drawer's backdrop correctly covers it).
   ============================================================ */
.envy-activity-toast{
  position:fixed; left:18px; bottom:18px; z-index:1080; max-width:300px;
  display:flex; align-items:center; gap:.7rem;
  background:var(--envy-panel); border:1px solid var(--envy-line); border-radius:14px;
  padding:.8rem .9rem; box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.envy-activity-icon{
  flex-shrink:0; display:inline-grid; place-items:center; width:32px; height:32px;
  border-radius:50%; background:rgba(91,227,138,.12); color:#5be38a;
}
.envy-activity-icon svg{ width:18px; height:18px; }
.envy-activity-text{ font-size:.82rem; color:var(--envy-muted); line-height:1.35; }
.envy-activity-text strong{ color:#fff; font-weight:700; }
.envy-activity-close{
  flex-shrink:0; width:22px; height:22px; display:grid; place-items:center; margin-left:.1rem;
  border-radius:50%; background:rgba(255,255,255,.06); border:0; color:var(--envy-muted);
  cursor:pointer; font-size:1.1rem; line-height:1; padding:0; transition:background .15s ease;
}
.envy-activity-close:hover{ background:rgba(255,255,255,.14); color:#fff; }
/* Desktop only, on purpose, a corner toast competes with thumb reach on mobile
   and there's less screen room for it to not feel intrusive. */
@media (max-width:991.98px){
  .envy-activity-toast{ display:none !important; }
}