/* ============================================================
   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;
}
.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; } }

/* ============================================================
   NAVBAR — floating pill
   ============================================================ */
.envy-nav{ background:transparent !important; border:0 !important; padding:.9rem 0; }
.envy-nav .container{ display:block; }
.envy-nav-pill{
  display:flex; align-items:center; gap:1rem;
  background: rgba(16,16,18,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--envy-line);
  border-radius:999px;
  padding:.5rem .65rem .5rem 1.1rem;
  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{ border:1px solid var(--envy-line); border-radius:12px; padding:8px 9px; width:42px; height:38px; }
.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; }
.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;
}
@media (max-width: 991.98px){
  .envy-nav-pill{ border-radius:22px; flex-wrap:wrap; align-items:center; }
  .envy-nav .navbar-collapse{ width:100%; margin-top:.6rem; }
  .envy-nav .envy-links{ flex-direction:column; align-items:flex-start; gap:.1rem; }
  .envy-nav .envy-actions{ margin-left:0; margin-top:.5rem; flex-wrap:wrap; }
}

/* ============================================================
   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(3,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); }
.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{
  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; }
.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; }

/* ============================================================
   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:1200px; }
.faq .accordion{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.85rem; align-items:start; --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; }
.faq .accordion-button:not(.collapsed)::after{ transform:rotate(45deg); }
.faq .accordion-body{ color:var(--envy-muted); padding:0 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 — navbar collapses, 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-nav .navbar-collapse{
    flex-basis:100%; width:100%; margin-top:.55rem;
    border-top:1px solid var(--envy-line); padding-top:.6rem;
  }
  .envy-nav .envy-links{ flex-direction:column; align-items:stretch; gap:.1rem; margin:0 0 .4rem; }
  .envy-nav .envy-links .nav-link{ display:block; padding:.75rem .65rem !important; border-radius:12px; }
  .envy-nav .envy-actions{ margin:0; flex-direction:column; align-items:stretch !important; gap:.55rem !important; }
  .envy-nav .envy-actions .nav-item{ width:100%; }
  .envy-nav .btn-login{ width:100%; justify-content:center; padding:.7rem 1.2rem; }
  .envy-nav .currency-selector select{ width:100%; }

  .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; }
  .faq .accordion{ grid-template-columns:1fr; }
}

/* 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; }
.review-marquee:hover .review-track{ animation-play-state:paused; }
@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; }
@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;
}
.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){
  .flex-wrapper{ overflow-x: hidden; }
  .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); }

  /* faq (if re-added) */
  .faq .accordion{ grid-template-columns: 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; }
}