/* =============================================================
   RollingFizz — Product Page Stylesheet
   File    : rfz-assets/css/rfz-product.css
   Depends : rfz-style.css, rfz-theme-citrus.css (loaded first)
   ============================================================= */

/* ── Hero ── */
.pg-hero{background:var(--dark);padding:140px 60px 80px;text-align:center;position:relative;overflow:hidden}
.pg-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(27,107,60,.18) 0%,transparent 60%);pointer-events:none}
.pg-hero-inner{position:relative;z-index:1}
.pg-hero-machine{position:absolute;bottom:0;height:82%;pointer-events:none;z-index:0;opacity:0.92}
.pg-hero-machine-left{left:0;transform:translateX(-12%)}
.pg-hero-machine-right{right:0;transform:translateX(12%)}
.pg-hero-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--clr-gold);margin-bottom:20px}
.pg-hero-label::before{content:'';width:24px;height:2px;background:var(--clr-gold);flex-shrink:0}
.pg-hero h1{font-family:var(--font-disp);font-size:clamp(36px,5vw,68px);font-weight:800;color:#fff;line-height:1.1;margin-bottom:20px}
.pg-hero h1 em{color:var(--clr-gold);font-style:italic}
.pg-hero p{font-size:16px;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto 36px;line-height:1.8}
.pg-hero-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.pg-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 18px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7);font-family:var(--font-body)}

/* ── Section chrome ── */
.pg-section{padding:80px 60px}
.pg-section-dark{background:var(--dark)}
.pg-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:600;color:var(--clr-gold);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pg-label::before{content:'';width:20px;height:2px;background:var(--clr-gold);flex-shrink:0}
.pg-title{font-family:var(--font-disp);font-size:clamp(28px,3.5vw,46px);font-weight:800;color:var(--dark);line-height:1.15;margin-bottom:14px}
.pg-title-light{color:#fff}
.pg-title em{font-style:italic;color:var(--clr-forest)}
.pg-title-light em{color:var(--clr-gold)}
.pg-subtitle{font-size:15px;color:var(--muted);line-height:1.8;max-width:600px;margin-bottom:52px}
.pg-subtitle-light{color:rgba(255,255,255,.55)}

/* ── Machine cards — deal-in animation ── */
@keyframes dealIn{
  0%  {opacity:0;transform:perspective(800px) rotateY(90deg) translateY(24px) scale(.88)}
  55% {opacity:1;transform:perspective(800px) rotateY(-7deg) translateY(-5px) scale(1.02)}
  78% {transform:perspective(800px) rotateY(2deg) translateY(1px) scale(1.005)}
  100%{opacity:1;transform:none}
}
.machines-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.mc{background:var(--dark);border-radius:20px;overflow:hidden;cursor:pointer;position:relative;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .35s cubic-bezier(.22,.68,0,1.2),box-shadow .35s ease;
  display:flex;flex-direction:column;opacity:0}
.mc.dealing{animation:dealIn .7s cubic-bezier(.22,.68,0,1.2) forwards}
.mc:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(212,160,0,.2)}
.mc-img-zone{position:relative;padding:32px 24px 20px;display:flex;align-items:center;justify-content:center;
  min-height:220px;background:linear-gradient(160deg,#122a1d 0%,#0a1e12 100%);overflow:hidden}
.mc-img-zone::before{content:'';position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);
  width:180px;height:80px;border-radius:50%;background:var(--mc-glow,rgba(27,107,60,.4));filter:blur(28px);pointer-events:none}
.mc-img{max-height:160px;width:auto;max-width:100%;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));transition:transform .4s ease}
.mc:hover .mc-img{transform:scale(1.07) translateY(-4px)}
.mc-badge{position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:999px;
  font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  background:rgba(212,160,0,.15);border:1px solid rgba(212,160,0,.35);color:var(--clr-gold);backdrop-filter:blur(6px)}
.mc-badge.green{background:rgba(27,107,60,.25);border-color:rgba(27,107,60,.5);color:#5dba7d}
.mc-badge.blue {background:rgba(56,142,200,.15);border-color:rgba(56,142,200,.4);color:#6ec6f5}
.mc-badge.orange{background:rgba(220,100,30,.12);border-color:rgba(220,100,30,.3);color:#e8924a}
.mc-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;gap:16px;
  border-top:1px solid rgba(255,255,255,.06)}
.mc-name-wrap{display:flex;flex-direction:column;gap:5px}
.mc-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.2}
.mc-sub{font-size:11px;color:rgba(255,255,255,.35);font-weight:500;line-height:1.4}
.mc-pills{display:flex;gap:6px;flex-wrap:wrap}
.mc-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;
  padding:5px 9px;font-size:10px;font-weight:600;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:5px}
.mc-pill span{color:rgba(255,255,255,.8)}
.mc-view{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;
  color:rgba(255,255,255,.55);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  transition:all .2s;margin-top:auto}
.mc:hover .mc-view{background:rgba(212,160,0,.12);border-color:rgba(212,160,0,.3);color:var(--clr-gold)}
.mc-view svg{width:14px;height:14px;transition:transform .2s}
.mc:hover .mc-view svg{transform:translateX(4px)}

/* ── Modal keyframes ── */
@keyframes pageUnfold{
  0%  {opacity:0;transform:perspective(1600px) rotateY(-58deg) scaleX(.42) translateX(-80px)}
  58% {opacity:1;transform:perspective(1600px) rotateY(6deg)  scaleX(1.015) translateX(6px)}
  78% {transform:perspective(1600px) rotateY(-2deg) scaleX(.997) translateX(-2px)}
  100%{opacity:1;transform:perspective(1600px) rotateY(0) scaleX(1) translateX(0)}
}
@keyframes pageFold{
  0%  {opacity:1;transform:perspective(1600px) rotateY(0) scaleX(1) translateX(0)}
  30% {transform:perspective(1600px) rotateY(-5deg) scaleX(1.01) translateX(-4px)}
  100%{opacity:0;transform:perspective(1600px) rotateY(55deg) scaleX(.4) translateX(80px)}
}
@keyframes bdIn {from{opacity:0}to{opacity:1}}
@keyframes bdOut{from{opacity:1}to{opacity:0}}

/* ── Modal backdrop ── */
.rfz-modal-bd{position:fixed;inset:0;background:rgba(5,15,8,.88);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);z-index:400;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none}
.rfz-modal-bd.open{opacity:1;pointer-events:all;animation:bdIn .25s ease forwards}
.rfz-modal-bd.closing{animation:bdOut .28s ease forwards;pointer-events:none}

/* ── Modal box ── */
.rfz-modal{background:#111f15;border:1px solid rgba(255,255,255,.08);border-radius:24px;
  width:100%;max-width:980px;height:min(88vh,680px);
  display:grid;grid-template-columns:340px 1fr;grid-template-rows:1fr;
  position:relative;overflow:hidden;transform-origin:left center;opacity:0}
.rfz-modal.opening{animation:pageUnfold .62s cubic-bezier(.22,.68,0,1.2) forwards}
.rfz-modal.closing {animation:pageFold  .30s cubic-bezier(.4,0,.6,1)      forwards}
.rfz-modal-left{background:linear-gradient(160deg,#0d2818 0%,#081910 100%);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.06);min-height:0}
.rfz-modal-left::before{content:'';position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  width:240px;height:100px;border-radius:50%;
  background:var(--ml-glow,rgba(27,107,60,.35));filter:blur(40px);pointer-events:none;z-index:0}
.rfz-modal-img-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:36px 28px 16px;position:relative;z-index:1}
.rfz-modal-img{max-height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.55))}
.rfz-modal-stats{display:flex;gap:8px;flex-wrap:nowrap;justify-content:center;
  padding:16px 20px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.15);position:relative;z-index:1;flex-shrink:0}
.rfz-mstat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px 14px;text-align:center;flex:1}
.rfz-mstat-val{font-size:15px;font-weight:800;color:#fff;line-height:1}
.rfz-mstat-lbl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:4px}
.rfz-modal-right{padding:32px 36px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;min-height:0}
.rfz-modal-right::-webkit-scrollbar{width:4px}
.rfz-modal-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}
.rfz-modal-tag{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--clr-gold);
  font-weight:700;display:flex;align-items:center;gap:8px}
.rfz-modal-tag::before{content:'';width:16px;height:2px;background:var(--clr-gold);flex-shrink:0}
.rfz-modal-name{font-size:26px;font-weight:800;color:#fff;line-height:1.1;margin-top:4px}
.rfz-modal-tagline{font-size:12px;color:rgba(255,255,255,.4);margin-top:3px}
.rfz-modal-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.85;
  padding:16px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.06)}
.rfz-spec-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:700}
.rfz-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rfz-spec-row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:3px}
.rfz-spec-lbl{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:600}
.rfz-spec-val{font-size:13px;font-weight:700;color:#fff}
.rfz-compat-row{display:flex;gap:6px;flex-wrap:wrap}
.rfz-compat-tag{background:rgba(93,186,125,.1);border:1px solid rgba(93,186,125,.25);
  border-radius:6px;padding:4px 10px;font-size:10px;font-weight:600;color:#5dba7d}
.rfz-modal-cta{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.rfz-btn-gold{flex:1;background:var(--clr-gold);color:#0d2818;border:none;border-radius:10px;
  padding:14px 20px;font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:background .2s,transform .15s;
  text-decoration:none;display:flex;align-items:center;justify-content:center}
.rfz-btn-gold:hover{background:#c49000;transform:translateY(-1px)}
.rfz-btn-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 20px;
  font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:all .2s}
.rfz-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.rfz-modal-close{position:absolute;top:14px;right:14px;z-index:20;
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.rfz-modal-close:hover{background:rgba(255,255,255,.15);color:#fff}

/* ── Features grid ── */
.feat-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat-card-p{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 24px;transition:background .25s,border-color .25s}
.feat-card-p:hover{background:rgba(255,255,255,.09);border-color:rgba(212,160,0,.25)}
.feat-icon{font-size:2rem;margin-bottom:14px;line-height:1}
.feat-name{font-family:var(--font-disp);font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
.feat-text{font-size:13px;color:rgba(255,255,255,.45);line-height:1.75}

/* ── Add-on modules ── */
.addons-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}
.addon-card{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:24px 18px;text-align:center;transition:all .25s}
.addon-card:hover{border-color:var(--clr-forest);box-shadow:0 8px 24px rgba(27,107,60,.1);transform:translateY(-3px)}
.addon-icon{font-size:2.4rem;margin-bottom:14px}
.addon-name{font-family:var(--font-disp);font-size:14px;font-weight:700;color:var(--dark);margin-bottom:6px}
.addon-desc{font-size:12px;color:var(--muted);line-height:1.65}

/* ── Deployment / Acquisition cards ── */
.acq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.acq-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px 22px;transition:all .25s}
.acq-card:hover{background:rgba(255,255,255,.1);border-color:rgba(212,160,0,.3)}
.acq-num{font-family:var(--font-num);font-size:11px;font-weight:800;letter-spacing:2px;color:var(--clr-gold);text-transform:uppercase;margin-bottom:14px}
.acq-title{font-family:var(--font-disp);font-size:19px;font-weight:800;color:#fff;margin-bottom:10px}
.acq-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.75}
.acq-tag{display:inline-block;margin-top:16px;padding:5px 14px;background:rgba(212,160,0,.12);border:1px solid rgba(212,160,0,.3);border-radius:999px;font-size:11px;font-weight:700;color:var(--clr-gold);letter-spacing:.5px}

/* ── Page CTA ── */
.pg-cta{background:linear-gradient(135deg,#0d2818 0%,#1b6b3c 100%);padding:80px 60px;text-align:center;position:relative;overflow:hidden}
.pg-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(212,160,0,.06) 0%,transparent 60%);pointer-events:none}
.pg-cta h2{font-family:var(--font-disp);font-size:clamp(28px,4vw,48px);font-weight:800;color:#fff;line-height:1.2;margin-bottom:16px;position:relative;z-index:1}
.pg-cta h2 em{color:var(--clr-gold);font-style:italic}
.pg-cta p{font-size:16px;color:rgba(255,255,255,.6);max-width:500px;margin:0 auto 36px;line-height:1.8;position:relative;z-index:1}
.pg-cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.btn-gold{background:var(--clr-gold);color:#0d2818;padding:15px 32px;font-family:var(--font-body);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all .2s}
.btn-gold:hover{background:#c49000;transform:translateY(-1px)}
.btn-outline-light{background:transparent;color:#fff;padding:15px 32px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border:2px solid rgba(255,255,255,.3);border-radius:2px;transition:all .2s}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ── Responsive ── */
@media(max-width:1024px){
  .machines-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .pg-hero{padding:120px 20px 60px}
  .pg-hero-machine{display:none}
  .pg-section{padding:60px 20px}
  .machines-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid-6{grid-template-columns:1fr 1fr}
  .addons-grid{grid-template-columns:repeat(2,1fr)}
  .acq-grid{grid-template-columns:1fr 1fr}
  .pg-cta{padding:60px 20px}
  .pg-cta-btns{flex-direction:column;align-items:center}
  .rfz-modal{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:min(92vh,700px)}
  .rfz-modal-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.06);
    flex-direction:row;align-items:center;padding:20px 24px;gap:16px}
  .rfz-modal-img-wrap{flex:0 0 100px;padding:8px}
  .rfz-modal-stats{flex-direction:column;gap:6px;padding:12px 16px;
    border-top:none;border-left:1px solid rgba(255,255,255,.06);background:transparent;flex:1}
  .rfz-modal-right{padding:20px}
  .rfz-spec-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .machines-grid{grid-template-columns:1fr}
  .feat-grid-6{grid-template-columns:1fr}
  .acq-grid{grid-template-columns:1fr}
  .addons-grid{grid-template-columns:1fr 1fr}
  .rfz-modal-left{flex-direction:column}
  .rfz-modal-stats{flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
}