/* ===========================================================
   CURSE — product feature rows
   Alternating text + animated demo panel (on-brand HUD mocks,
   no fake gameplay footage). Used on per-product pages.
   =========================================================== */

.frows{display:flex;flex-direction:column;gap:104px;margin-top:64px}
.frow{display:grid;grid-template-columns:1.02fr 1.1fr;gap:60px;align-items:center}
.frow.rev .frow-text{order:2}

.frow-text .label{margin-bottom:16px}
.frow-text h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.4vw,34px);
  line-height:1.08;letter-spacing:-.01em;color:#fff;margin:0 0 14px;text-wrap:balance}
.frow-text h3 em{font-style:normal;color:var(--accent-2)}
.frow-text .lede{font-size:16px;line-height:1.62;color:var(--muted);margin:0 0 22px;max-width:46ch}
.frow-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.frow-points li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--text);line-height:1.45}
.frow-points li svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent-2)}
.frow-points li b{color:#fff;font-weight:600}

/* ---------- shared demo shell ---------- */
.fdemo{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 0%,#141417,#0a0a0c 72%);
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.03)}
.fdemo-bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 13px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);position:relative;z-index:6}
.fdemo-bar .dots{display:flex;gap:6px}
.fdemo-bar .dots i{width:10px;height:10px;border-radius:50%;background:#2a2a30}
.fdemo-bar .dots i:nth-child(1){background:#ff5f57}.fdemo-bar .dots i:nth-child(2){background:#febc2e}.fdemo-bar .dots i:nth-child(3){background:#28c840}
.fdemo-bar .live{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:11px;color:var(--muted)}
.fdemo-bar .live .d{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px var(--accent);animation:demoRec 1.4s infinite}
.fdemo-bar .tag{margin-left:auto;font-family:inherit;font-size:11px;color:var(--dim)}
.fdemo-stage{position:absolute;inset:38px 0 0;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .fdemo-stage *{animation:none!important}
  /* restore resting visible state for elements authored hidden-then-animated */
  .fdemo-esp .contact,.fdemo-esp .offarrow,
  .fdemo-scripts .threat,.fdemo-scripts .resp{opacity:1!important;transform:translateX(-50%)!important}
  .fdemo-esp .contact{transform:none!important}
  .fdemo-esp .offarrow{transform:translateY(-50%)!important}
  /* motion-only streaks/sweeps stay hidden */
  .fscan{display:none!important}
}

/* radar-grid backdrop reused by several demos */
.fgrid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;background-position:center;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 55%,transparent);
          mask-image:radial-gradient(80% 80% at 50% 45%,#000 55%,transparent)}
.fscan{position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(45,111,219,.10) 60%,rgba(45,111,219,.18));
  border-bottom:1px solid rgba(86,150,255,.4);animation:fScan 4.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes fScan{0%{top:-34%}100%{top:104%}}

/* ===================== AIM demo ===================== */
.fdemo-aim .crosshair{position:absolute;left:50%;top:52%;width:46px;height:46px;transform:translate(-50%,-50%);z-index:5}
.fdemo-aim .crosshair::before,.fdemo-aim .crosshair::after{content:'';position:absolute;background:rgba(255,255,255,.85)}
.fdemo-aim .crosshair::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.fdemo-aim .crosshair::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
.fdemo-aim .chdot{position:absolute;left:50%;top:52%;width:6px;height:6px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 8px var(--accent);z-index:6}
.fdemo-aim .target{position:absolute;width:64px;height:64px;transform:translate(-50%,-50%);z-index:4}
.fdemo-aim .target .ring{position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(86,150,255,.5)}
.fdemo-aim .target .brk{position:absolute;inset:0}
.fdemo-aim .target .brk b{position:absolute;width:13px;height:13px;border:2px solid var(--accent-2)}
.fdemo-aim .target .brk b:nth-child(1){left:-3px;top:-3px;border-right:0;border-bottom:0}
.fdemo-aim .target .brk b:nth-child(2){right:-3px;top:-3px;border-left:0;border-bottom:0}
.fdemo-aim .target .brk b:nth-child(3){left:-3px;bottom:-3px;border-right:0;border-top:0}
.fdemo-aim .target .brk b:nth-child(4){right:-3px;bottom:-3px;border-left:0;border-top:0}
.fdemo-aim .target .core{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(224,70,73,.5),rgba(224,70,73,.08));
  border:1px solid rgba(224,70,73,.6)}
.fdemo-aim .tracer{position:absolute;left:50%;top:52%;height:1.5px;transform-origin:left center;z-index:3;
  background:linear-gradient(90deg,rgba(255,80,80,0),rgba(255,90,90,.9));opacity:0}
.fdemo-aim .hit{position:absolute;font-family:inherit;font-weight:600;font-size:13px;color:#ffd0a0;
  transform:translate(-50%,-50%);z-index:7;opacity:0;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.fdemo-aim .lock{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:8px;font-family:inherit;font-size:11.5px;color:#cfe0ff;
  background:rgba(45,111,219,.12);border:1px solid rgba(86,150,255,.32);z-index:6}
.fdemo-aim .lock .d{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.fdemo-aim .lock b{color:#fff;font-weight:600}

/* three target positions on a 7s loop */
.fdemo-aim .t1{left:30%;top:38%;animation:aimT 7s ease infinite}
.fdemo-aim .t2{left:70%;top:60%;animation:aimT 7s ease infinite 2.33s}
.fdemo-aim .t3{left:58%;top:30%;animation:aimT 7s ease infinite 4.66s}
.fdemo-aim .tr1{animation:aimTrace 7s ease infinite}
.fdemo-aim .tr2{animation:aimTrace 7s ease infinite 2.33s}
.fdemo-aim .tr3{animation:aimTrace 7s ease infinite 4.66s}
.fdemo-aim .h1{animation:aimHit 7s ease infinite}
.fdemo-aim .h2{animation:aimHit 7s ease infinite 2.33s}
.fdemo-aim .h3{animation:aimHit 7s ease infinite 4.66s}
@keyframes aimT{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  6%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  28%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}33%,100%{opacity:0}}
@keyframes aimTrace{0%,8%{opacity:0;transform:scaleX(0)}
  11%{opacity:.9;transform:scaleX(1)}20%{opacity:.9;transform:scaleX(1)}24%{opacity:0}100%{opacity:0}}
@keyframes aimHit{0%,11%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  14%{opacity:1;transform:translate(-50%,-60%) scale(1)}24%{opacity:1;transform:translate(-50%,-80%)}
  30%{opacity:0;transform:translate(-50%,-95%)}100%{opacity:0}}

/* ===================== ESP demo ===================== */
.fdemo-esp .contact{position:absolute;z-index:4}
.fdemo-esp .box{position:absolute;inset:0;border:1.6px solid var(--esp,#56b0ff);border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 14px -2px var(--esp,#56b0ff)}
.fdemo-esp .box .fill{position:absolute;inset:0;background:var(--esp,#56b0ff);opacity:.07}
.fdemo-esp .name{position:absolute;top:-17px;left:0;font-family:inherit;font-size:9.5px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
.fdemo-esp .dist{position:absolute;bottom:-15px;left:0;font-family:inherit;font-size:9px;color:var(--esp,#56b0ff);
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.fdemo-esp .hp{position:absolute;top:-2px;left:-6px;bottom:-2px;width:3px;border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden}
.fdemo-esp .hp i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#4ade80,#16a34a);border-radius:2px}
.fdemo-esp .contact.scan{opacity:0;animation:espIn .5s ease forwards}
.fdemo-esp .c1{left:24%;top:30%;width:54px;height:78px;animation-delay:.5s}
.fdemo-esp .c1 .hp i{height:78%}
.fdemo-esp .c2{left:55%;top:44%;width:46px;height:66px;--esp:#ff7a5c;animation-delay:1s}
.fdemo-esp .c2 .hp i{height:46%}
.fdemo-esp .c3{left:74%;top:24%;width:40px;height:58px;animation-delay:1.5s}
.fdemo-esp .c3 .hp i{height:92%}
@keyframes espIn{0%{opacity:0;transform:scale(.82)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.fdemo-esp .offarrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:3px;color:#ff7a5c;opacity:0;animation:espIn .5s ease forwards 1.9s}
.fdemo-esp .offarrow svg{width:20px;height:20px}
.fdemo-esp .offarrow span{font-family:inherit;font-size:8.5px}
.fdemo-esp .legend{position:absolute;left:13px;bottom:11px;display:flex;gap:13px;font-family:inherit;font-size:10px;color:var(--muted);z-index:5}
.fdemo-esp .legend i{display:inline-flex;align-items:center;gap:5px}
.fdemo-esp .legend i b{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ===================== RADAR demo (real embed) ===================== */
.fdemo-radar .fdemo-stage{inset:38px 0 0}
.fdemo-radar iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0a0a0c}
.fdemo-radar .share{position:absolute;left:13px;bottom:12px;z-index:6;display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:9px;background:rgba(12,12,14,.78);border:1px solid var(--line-2);
  font-family:inherit;font-size:11px;color:#cfe0ff;backdrop-filter:blur(6px)}
.fdemo-radar .share svg{width:13px;height:13px;color:var(--accent-2)}
.fdemo-radar .share b{color:#fff;font-weight:600}

/* ===================== ESP 3D preview (inline local component) ===================== */
/* This block is PORTRAIT — the character is vertical, unlike the landscape demos below.
   The preview box and the settings card are TWO separate cards in a flex rig. */
.frow-esp3d{grid-template-columns:0.92fr 1.08fr}
.esp3d-rig{display:flex;gap:0;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.fdemo-esp3d{flex:0 1 auto;width:clamp(240px,100%,360px);min-width:min(210px,100%);aspect-ratio:4/5}
.fdemo-esp3d .fdemo-stage{inset:38px 0 0;background:#121316}
.esp3d-view{position:absolute;inset:0}
/* switcher bar holds the hero + clip dropdowns, bottom-left of the live view */
.esp3d-sw-bar{position:absolute;left:10px;bottom:10px;z-index:16;display:flex;gap:6px;align-items:flex-end;max-width:calc(100% - 20px)}
/* hero / clip switcher — searchable dropdown */
.esp3d-hero-sw{position:relative}
.esp3d-hero-sw .eh-ic{display:grid;place-items:center;flex:none;color:var(--muted)}
.esp3d-hero-sw .eh-ic svg{width:13px;height:13px;display:block}
.esp3d-hero-sw .eh-current{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:11.5px;color:#fff;
  background:rgba(13,13,16,.82);border:1px solid var(--line-2);cursor:pointer;padding:6px 9px 6px 12px;border-radius:9px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px -10px rgba(0,0,0,.7);min-width:104px}
.esp3d-hero-sw .eh-current .eh-name{flex:1;text-align:left}
.esp3d-hero-sw .eh-current svg{width:13px;height:13px;color:var(--muted);transition:transform .18s}
.esp3d-hero-sw.open .eh-current svg{transform:rotate(180deg)}
.esp3d-hero-sw.is-static .eh-current{cursor:default}
.esp3d-hero-sw.is-static .eh-current > svg{display:none}
.esp3d-clip-dd .eh-current{min-width:0}
.esp3d-hero-sw .eh-pop{position:absolute;left:0;bottom:calc(100% + 6px);width:208px;max-width:62vw;
  background:rgba(16,16,20,.96);border:1px solid var(--line-2);border-radius:11px;overflow:hidden;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -14px rgba(0,0,0,.85);
  opacity:0;transform:translateY(6px) scale(.98);transform-origin:bottom left;pointer-events:none;
  transition:opacity .16s,transform .16s}
.esp3d-hero-sw.open .eh-pop{opacity:1;transform:none;pointer-events:auto}
.esp3d-hero-sw .eh-pop-h{padding:8px;border-bottom:1px solid var(--line)}
.esp3d-hero-sw .eh-search{width:100%;box-sizing:border-box;font-family:inherit;font-size:12px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:7px;padding:7px 9px;outline:none}
.esp3d-hero-sw .eh-search::placeholder{color:var(--dim)}
.esp3d-hero-sw .eh-search:focus{border-color:var(--accent-2)}
.esp3d-hero-sw .eh-list{max-height:236px;overflow-y:auto;padding:5px}
.esp3d-hero-sw .eh-item{display:block;width:100%;text-align:left;font-family:inherit;font-size:12px;color:var(--muted);
  background:transparent;border:0;cursor:pointer;padding:7px 10px;border-radius:7px;transition:background .12s,color .12s}
.esp3d-hero-sw .eh-item:hover{background:rgba(255,255,255,.06);color:#fff}
.esp3d-hero-sw .eh-item.on{background:var(--accent-2);color:#fff}
.esp3d-hero-sw .eh-list::-webkit-scrollbar{width:8px}
.esp3d-hero-sw .eh-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
.esp3d-hero-sw .eh-list::-webkit-scrollbar-track{background:transparent}
.esp3d-rig.panel-open .esp3d-sw-bar{left:12px;bottom:12px}
#esp3d-stage{position:absolute;inset:0}
#esp3d-stage canvas{display:block;width:100%;height:100%}
#esp3d-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
/* ESP loading — the CURSE "unwrap" intro (seam + 3D logo mark), matching the radar/menu */
#esp3d-loading{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 120% at 50% 50%,rgba(18,18,20,1),rgba(8,8,9,1));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#esp3d-loading.out{animation:e3lVeilOut .85s cubic-bezier(.5,0,.2,1) forwards}
@keyframes e3lVeilOut{
  0%{clip-path:inset(0 0 0 0 round 0);opacity:1}
  60%{opacity:1}
  100%{clip-path:inset(50% 50% 50% 50% round 26px);opacity:0}}
#esp3d-loading .e3l-seam{position:absolute;left:50%;top:50%;width:60%;height:2px;border-radius:2px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,#e04649,transparent);box-shadow:0 0 18px 2px #e04649;
  animation:e3lSeam 1.9s cubic-bezier(.22,.78,.2,1) infinite}
@keyframes e3lSeam{0%,100%{opacity:.3;transform:translate(-50%,-50%) scaleX(.45)}50%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}}
#esp3d-loading .e3l-mk{perspective:900px;display:flex;align-items:center;justify-content:center}
#esp3d-loading .e3l-mk img{height:40px;width:auto;display:block;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));transform-origin:center;
  animation:e3lMark 2.6s cubic-bezier(.34,1.05,.4,1) infinite}
@keyframes e3lMark{0%{transform:rotateY(-58deg) scale(.88)}50%{transform:rotateY(58deg) scale(1)}100%{transform:rotateY(-58deg) scale(.88)}}
#esp3d-loading .e3l-info{display:flex;flex-direction:column;align-items:center;width:min(76%,250px);text-align:center}
#esp3d-loading .e3l-title{font:500 13px/1.3 inherit;color:#fff;margin-bottom:14px}
#esp3d-loading .e3l-bar{position:relative;width:100%;height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.12)}
#esp3d-loading .e3l-bar > i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent-2,#e64545);
  transition:width .25s linear;box-shadow:0 0 10px rgba(230,69,69,.4)}
#esp3d-loading .e3l-bar.indet > i{width:32%;animation:e3lIndet 1.15s ease-in-out infinite;transition:none}
@keyframes e3lIndet{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
#esp3d-loading .e3l-meta{display:flex;justify-content:space-between;width:100%;margin-top:10px;font:500 10.5px/1 inherit;color:var(--muted)}
#esp3d-loading.is-err .e3l-seam{animation:none;opacity:.5}
#esp3d-loading.is-err .e3l-mk img{animation:none;transform:none;opacity:.5}
#esp3d-loading.is-err .e3l-title{color:var(--bad,#f87171)}
/* the stage "unwraps" once the model is ready (clip-path reveal, like the radar intro) */
#esp3d-stage.e3l-reveal{animation:e3lUnwrap .85s cubic-bezier(.22,.78,.2,1)}
@keyframes e3lUnwrap{0%{clip-path:inset(48% 48% 48% 48% round 26px)}100%{clip-path:inset(0 0 0 0 round 0)}}
@media (prefers-reduced-motion:reduce){
  #esp3d-loading .e3l-seam,#esp3d-loading .e3l-mk img{animation:none}
  #esp3d-stage.e3l-reveal{animation:none}
}
/* gear toggle (inside the view, top-right) */
#esp3d-gear{position:absolute;top:12px;right:12px;z-index:14;width:34px;height:34px;display:grid;place-items:center;
  border-radius:9px;background:rgba(13,13,16,.78);border:1px solid var(--line-2);color:var(--text);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,color .15s,opacity .2s}
#esp3d-gear:hover{border-color:rgba(224,70,73,.55);color:var(--accent-2)}
#esp3d-gear svg{width:17px;height:17px}
.esp3d-rig.panel-open #esp3d-gear{opacity:0;pointer-events:none}
/* expand-to-enlarge button (top bar) */
.esp3d-expand{margin-left:10px;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;
  background:transparent;border:1px solid var(--line-2);color:var(--muted);cursor:pointer;flex:none;
  transition:border-color .15s,color .15s}
.esp3d-expand:hover{border-color:rgba(224,70,73,.5);color:var(--accent-2)}
.esp3d-expand svg{width:14px;height:14px}
.esp3d-try{margin-top:26px;align-self:flex-start}

/* ── settings panel — a SEPARATE card beside the preview box (CURSE Cheat Menu controls) ── */
/* INLINE the panel is removed from flow entirely (the gear maximizes into the lightbox,
   so the panel only ever renders full-size inside .fdemo-lb-stage). */
.esp3d-menu{--panel-3:#1a1a1a;--accent-soft:rgba(224,70,73,.16);
  display:none;min-width:0;overflow:hidden;align-self:stretch;
  flex-direction:column;
  background:rgba(13,13,13,.92);border:1px solid var(--line-2);border-radius:13px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;user-select:none}
.esp3d-menu-h{display:flex;align-items:center;gap:9px;padding:13px 13px 12px;border-bottom:1px solid var(--line);flex:none}
.esp3d-menu-h .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none}
.esp3d-menu-h h4{flex:1;margin:0;font:600 13px/1 'Inter';color:#fff}
#esp3d-close{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:transparent;border:0;color:var(--muted);cursor:pointer;flex:none;transition:background .15s,color .15s}
#esp3d-close:hover{background:rgba(255,255,255,.06);color:#fff}
#esp3d-close svg{width:15px;height:15px}
#esp3d-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-content:start;
  scrollbar-width:thin;scrollbar-color:rgba(224,70,73,.3) transparent}
#esp3d-body::-webkit-scrollbar{width:7px}
#esp3d-body::-webkit-scrollbar-thumb{background:rgba(224,70,73,.28);border-radius:4px}
/* section card */
.esp3d-menu .ms-card{background:rgba(22,22,22,.55);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  align-self:start}
.esp3d-menu .ms-h{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line)}
.esp3d-menu .ms-h .ms-gh{width:17px;height:17px;display:grid;place-items:center;color:var(--accent);flex:none}
.esp3d-menu .ms-h .ms-gh svg{width:15px;height:15px}
.esp3d-menu .ms-h h4{flex:1;margin:0;font:600 12px/1 'Inter';color:#fff}
.esp3d-menu .ms-b{padding:2px 0}
.esp3d-menu .ms-b.disabled{opacity:.38;pointer-events:none}
/* row */
.esp3d-menu .mrow{display:flex;align-items:center;gap:10px;padding:8px 12px;font:500 12px/1.2 'Inter';color:var(--text);flex-wrap:wrap;row-gap:8px}
.esp3d-menu .mrow + .mrow{border-top:1px solid var(--line)}
.esp3d-menu .m-lbl{flex:1;min-width:0;color:#c7c7cc;display:flex;align-items:center;justify-content:space-between;gap:8px}
.esp3d-menu .mrow.range{flex-direction:column;align-items:stretch;gap:9px}
.esp3d-menu .m-lbl .val{color:var(--muted);font:600 11px/1 'Inter';font-variant-numeric:tabular-nums;flex:none}
/* toggle */
.esp3d-menu .tgl{width:34px;height:18px;border-radius:10px;background:#222;border:1px solid rgba(255,255,255,.05);position:relative;cursor:pointer;flex:none;transition:background .2s}
.esp3d-menu .tgl::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#5a5a5a;transition:left .22s cubic-bezier(.3,.8,.4,1.2),background .2s}
.esp3d-menu .tgl.on{background:linear-gradient(90deg,var(--accent-3),var(--accent))}
.esp3d-menu .tgl.on::after{left:18px;background:#fff;box-shadow:0 0 6px rgba(224,70,73,.4)}
/* checkbox */
.esp3d-menu .cb{width:16px;height:16px;border-radius:4px;border:1.5px solid #3a3a3a;background:#161616;position:relative;cursor:pointer;flex:none;transition:all .15s}
.esp3d-menu .cb.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.esp3d-menu .cb.on::after{content:"";position:absolute;left:50%;top:45%;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
/* slider */
.esp3d-menu .sld{display:flex;align-items:center;gap:10px;width:100%}
.esp3d-menu .sld .track{flex:1;height:4px;border-radius:3px;background:#222;position:relative;cursor:pointer;touch-action:none}
.esp3d-menu .sld .track::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.esp3d-menu .sld .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--accent-3),var(--accent))}
.esp3d-menu .sld .knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;translate:-50% -50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.5);transition:box-shadow .2s}

/* ===================== world color modulation demo (before/after) ===================== */
.fdemo-color .fdemo-stage{background:#0b0b0e}
.fdemo-color .ba{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:none}
.fdemo-color .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* bottom layer = CURSE custom grade (the real screenshot, untouched) */
.fdemo-color .ba-after{z-index:1}
/* top layer (revealed on the left) = game default look, warmed + resaturated */
.fdemo-color .ba-before-wrap{position:absolute;inset:0;z-index:2;
  clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.fdemo-color .ba-before{filter:saturate(1.16) brightness(1.06) contrast(1.02) hue-rotate(-14deg) sepia(.05)}
.fdemo-color .ba-tag{position:absolute;top:14px;z-index:4;padding:5px 10px;border-radius:7px;
  font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;pointer-events:none;
  background:rgba(13,13,16,.62);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fdemo-color .ba-tag-l{left:14px}
.fdemo-color .ba-tag-r{right:14px;color:#cdd6ff;border-color:rgba(123,140,255,.4)}
.fdemo-color .ba-divider{position:absolute;top:0;bottom:0;z-index:5;left:var(--p);width:2px;
  translate:-1px 0;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 22px rgba(0,0,0,.45);pointer-events:none}
.fdemo-color .ba-handle{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(13,13,16,.78);border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fdemo-color .ba-handle svg{width:20px;height:20px;color:#fff;opacity:.92}
.esp3d-menu .sld .track:hover .knob{box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 0 5px var(--accent-soft)}
/* color swatch */
.esp3d-menu .sw-wrap{position:relative;display:inline-flex;cursor:pointer;flex:none}
.esp3d-menu .sw{width:26px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:var(--c,#E04649);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.esp3d-menu .sw-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
/* select — custom button + portaled popup (cheat-menu style) */
.esp3d-menu .dd-sel{display:inline-flex;align-items:center;gap:6px;flex:1 1 130px;min-width:120px;max-width:100%;height:28px;padding:0 8px 0 10px;
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:7px;color:#fff;font:500 12px/1 'Inter';cursor:pointer;transition:border-color .15s;text-align:left}
.esp3d-menu .dd-sel:hover,.esp3d-menu .dd-sel.open{border-color:rgba(224,70,73,.45)}
.esp3d-menu .dd-sel .dd-lab{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esp3d-menu .dd-sel .dd-car{display:grid;place-items:center;flex:none;color:#9a9aa1;transition:transform .18s}
.esp3d-menu .dd-sel .dd-car svg{width:12px;height:12px;display:block}
.esp3d-menu .dd-sel.open .dd-car{transform:rotate(180deg)}
.dd-pop{position:fixed;z-index:2000;max-height:240px;overflow-y:auto;padding:5px;
  background:rgba(16,16,20,.97);border:1px solid var(--line-2);border-radius:9px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -14px rgba(0,0,0,.85);
  scrollbar-width:thin;scrollbar-color:rgba(224,70,73,.3) transparent}
.dd-pop::-webkit-scrollbar{width:7px}
.dd-pop::-webkit-scrollbar-thumb{background:rgba(224,70,73,.28);border-radius:4px}
.dd-pop .dd-opt{display:block;width:100%;text-align:left;font:500 12px/1 'Inter';color:var(--muted,#9a9aa1);
  background:transparent;border:0;cursor:pointer;padding:7px 10px;border-radius:6px;white-space:nowrap;transition:background .12s,color .12s}
.dd-pop .dd-opt:hover{background:rgba(255,255,255,.06);color:#fff}
.dd-pop .dd-opt.on{background:var(--accent-2,#e64545);color:#fff}
/* text input */
.esp3d-menu .m-text{flex:none;width:118px;background:var(--panel-3);color:#fff;border:1px solid var(--line-2);border-radius:7px;padding:5px 8px;font:500 12px/1 'Inter';min-width:0}
.esp3d-menu .m-text:focus{outline:none;border-color:rgba(224,70,73,.5)}
.esp3d-hint{flex:none;padding:0 13px 12px;color:var(--dim);font:500 10.5px/1.4 'Inter'}

/* enlarge: the whole RIG is MOVED (not cloned) into the lightbox so WebGL survives */
.fdemo-lb-stage .esp3d-rig{flex-wrap:nowrap;align-items:center;justify-content:center;height:min(92vh,1140px);width:100%}
.fdemo-lb-stage .esp3d-rig .fdemo-esp3d{height:100%;width:auto;aspect-ratio:1/2;min-width:0;flex:0 0 auto}
.fdemo-lb-stage .esp3d-rig .esp3d-menu{display:flex;flex:0 0 600px;min-width:0;max-width:62vw;align-self:stretch;margin-left:14px;opacity:1}

/* Mobile: opening Settings (gear → panel-open) shows ONLY the settings panel —
   the preview + panel don't fit side-by-side on a phone. */
@media (max-width:640px){
  .fdemo-lb-stage .esp3d-rig.panel-open{flex-wrap:nowrap;height:100%}
  .fdemo-lb-stage .esp3d-rig.panel-open .fdemo-esp3d{display:none}
  .fdemo-lb-stage .esp3d-rig.panel-open .esp3d-menu{flex:1 1 100%;margin-left:0;width:100%;max-width:520px;height:100%}
  #esp3d-body{grid-template-columns:1fr}
}

/* ===================== SCRIPTS demo ===================== */
.fdemo-scripts .sc-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fdemo-scripts .stage-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.fdemo-scripts .threat{position:absolute;left:50%;top:20%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:9px;
  background:rgba(224,70,73,.12);border:1px solid rgba(224,70,73,.4);color:#ffd2cc;
  font-family:inherit;font-size:11.5px;white-space:nowrap;opacity:0;animation:scThreat 6s ease infinite}
.fdemo-scripts .threat svg{width:14px;height:14px;color:var(--accent)}
.fdemo-scripts .threat b{color:#fff;font-weight:600}
.fdemo-scripts .resp{position:absolute;left:50%;top:36%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.4);color:#fff;
  font-family:inherit;font-size:11.5px;white-space:nowrap;opacity:0;animation:scResp 6s ease infinite}
.fdemo-scripts .resp svg{width:14px;height:14px;color:var(--good)}
.fdemo-scripts .abar{display:flex;gap:10px;justify-content:center}
.fdemo-scripts .slot{position:relative;width:46px;height:46px;border-radius:10px;flex:none;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted)}
.fdemo-scripts .slot svg{width:20px;height:20px}
.fdemo-scripts .slot .key{position:absolute;bottom:-2px;right:-2px;font-family:inherit;font-size:8px;
  color:var(--dim);background:#0a0a0c;padding:0 3px;border-radius:3px}
.fdemo-scripts .slot.fire{animation:scFire 6s ease infinite}
.fdemo-scripts .slot.fire .ring{position:absolute;inset:-4px;border-radius:13px;border:2px solid var(--good);opacity:0;animation:scRing 6s ease infinite}
@keyframes scThreat{0%,10%{opacity:0;transform:translateX(-50%) translateY(-6px)}16%,40%{opacity:1;transform:translateX(-50%) translateY(0)}48%,100%{opacity:0}}
@keyframes scResp{0%,42%{opacity:0;transform:translateX(-50%) translateY(6px)}48%,78%{opacity:1;transform:translateX(-50%) translateY(0)}86%,100%{opacity:0}}
@keyframes scFire{0%,44%{border-color:var(--line-2);color:var(--muted);background:rgba(255,255,255,.03)}
  50%{border-color:var(--good);color:#fff;background:rgba(74,222,128,.14)}
  76%{border-color:var(--good);color:#fff;background:rgba(74,222,128,.14)}
  84%,100%{border-color:var(--line-2);color:var(--muted);background:rgba(255,255,255,.03)}}
@keyframes scRing{0%,46%{opacity:0;transform:scale(.8)}52%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.15)}100%{opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .frow{grid-template-columns:1fr;gap:30px}
  .frow.rev .frow-text{order:0}
  .frows{gap:72px}
  .frow-text .lede{max-width:none}
}

/* ---------- click-to-enlarge + lightbox ---------- */
.fdemo.is-clickable{cursor:zoom-in}
.fdemo.is-clickable::after{content:'Click to enlarge';position:absolute;top:9px;right:13px;z-index:7;
  font-size:10.5px;letter-spacing:.02em;color:var(--dim);pointer-events:none;
  opacity:0;transition:opacity .18s ease}
.fdemo.is-clickable:hover::after{opacity:.85}

.fdemo-lb{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:5vmin;
  opacity:0;pointer-events:none;transition:opacity .24s ease}
.fdemo-lb.open{opacity:1;pointer-events:auto}
.fdemo-lb-backdrop{position:absolute;inset:0;background:rgba(6,6,8,.82);backdrop-filter:blur(8px)}
.fdemo-lb-close{position:absolute;top:max(18px,4vmin);right:max(18px,4vmin);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,24,.7);
  color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease,border-color .15s ease}
.fdemo-lb-close:hover{background:rgba(40,40,46,.9);border-color:var(--accent-2)}
.fdemo-lb-stage{position:relative;z-index:1;width:min(1040px,92vw);
  transform:scale(.96);transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.fdemo-lb.open .fdemo-lb-stage{transform:scale(1)}
.fdemo-lb-stage .fdemo{width:100%;cursor:default}
.fdemo-lb-stage .fdemo.is-clickable::after{display:none}

/* lightbox prev/next slide nav (only shown when the open demo has slides) */
.fdemo-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,24,.7);
  color:#fff;cursor:pointer;display:none;place-items:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.fdemo-lb.has-slides .fdemo-lb-nav{display:grid}
.fdemo-lb-nav svg{width:24px;height:24px}
.fdemo-lb-nav.prev{left:max(14px,3vw)}
.fdemo-lb-nav.next{right:max(14px,3vw)}
.fdemo-lb-nav:hover{background:rgba(40,40,46,.92);border-color:var(--accent-2)}
.fdemo-lb-nav:active{transform:translateY(-50%) scale(.93)}
@media (max-width:640px){.fdemo-lb-nav{width:44px;height:44px}.fdemo-lb-nav.prev{left:8px}.fdemo-lb-nav.next{right:8px}}

/* ===================== AIM-SHOT (static range proof) ===================== */
.fdemo-aimshot .fslide img{object-position:50% 44%}
.fdemo-aimshot .fdemo-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 18%,transparent 55%,rgba(8,8,11,.5))}

/* ===================== generic demo slides ===================== */
.fslides{position:absolute;inset:0}
.fslide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.fslide.is-on{opacity:1;pointer-events:auto}
.fslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fslide-dots{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);z-index:8;display:flex;gap:7px}
.fslide-dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.35);transition:background .2s ease,transform .2s ease}
.fslide-dots button.on{background:#fff;transform:scale(1.2)}
.fslide-dots button:hover{background:rgba(255,255,255,.7)}

/* ===================== PLAYER DOSSIER ===================== */
.fdemo-dossier .fdemo-stage{background:#0b0b0e}
.fdemo-dossier .fdemo-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fdemo-dossier .fdemo-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(8,8,11,.62))}
.fdemo-dossier .flagcard{position:absolute;right:14px;top:54px;z-index:6;display:flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:11px;background:rgba(224,70,73,.16);border:1px solid rgba(224,70,73,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 36px -16px rgba(0,0,0,.8);
  opacity:0;transform:translateY(-6px);animation:dosFlag .55s cubic-bezier(.2,.7,.2,1) forwards .5s}
.fdemo-dossier .flagcard svg{width:20px;height:20px;color:#ff6b6e;flex:none}
.fdemo-dossier .flagcard b{display:block;font-family:inherit;font-size:12px;color:#fff;font-weight:600}
.fdemo-dossier .flagcard span{display:block;font-family:inherit;font-size:10.5px;color:#ffc4c5;margin-top:1px}
.fdemo-dossier .notecard{position:absolute;left:14px;bottom:13px;z-index:6;max-width:62%;
  padding:11px 13px 11px;border-radius:11px;background:rgba(18,18,22,.82);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 36px -16px rgba(0,0,0,.85);
  opacity:0;transform:translateY(8px);animation:dosNote .55s cubic-bezier(.2,.7,.2,1) forwards .9s}
.fdemo-dossier .notecard .nh{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.fdemo-dossier .notecard .nh svg{width:14px;height:14px;color:var(--accent-2)}
.fdemo-dossier .notecard .nh b{font-family:inherit;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.fdemo-dossier .notecard .nh .met{margin-left:auto;font-family:inherit;font-size:10px;color:var(--dim)}
.fdemo-dossier .notecard p{margin:0;font-family:inherit;font-size:12px;line-height:1.45;color:#e6e6ea}
.fdemo-dossier .notecard p em{color:#ff8d8f;font-style:normal;font-weight:600}
@keyframes dosFlag{to{opacity:1;transform:none}}
@keyframes dosNote{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fdemo-dossier .flagcard,.fdemo-dossier .notecard{opacity:1!important;transform:none!important}
}