/* ===========================================================
   CURSE — website section variations (Why CURSE redesigns)
   Builds on curse-site.css tokens. Three distinct directions.
   =========================================================== */

/* shared variation chrome */
.varbar{position:sticky;top:var(--nav-h);z-index:40;display:flex;align-items:center;gap:14px;
  padding:13px 28px;background:rgba(9,9,10,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.varbar .vb-n{font-size:12px;color:var(--accent-2);font-weight:600}
.varbar .vb-t{font-size:14px;color:#fff;font-weight:600}
.varbar .vb-d{font-size:13px;color:var(--muted)}
.varbar .vb-sp{flex:1}
.var-divider{height:1px;background:var(--line);margin:0}

/* ============================================================
   DIRECTION A — BENTO
   Asymmetric tiles, mixed sizes, real game-scene visual,
   on-brand UI mockups instead of identical cards.
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:182px;gap:14px;margin-top:44px}
.bt{position:relative;border-radius:16px;border:1px solid var(--line);background:var(--panel);overflow:hidden;
  padding:24px;display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.bt:hover{border-color:var(--line-2);transform:translateY(-3px)}
.bt h3{margin:0;font-family:var(--disp,'Sora',sans-serif);font-size:18px;font-weight:600;letter-spacing:-.01em;color:#fff}
.bt p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.bt .bt-k{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--accent-2);font-weight:600;margin-bottom:12px}
.bt .bt-k svg{width:15px;height:15px}
/* big hero tile spanning 2x2 with game scene */
.bt-hero{grid-column:span 2;grid-row:span 2;justify-content:flex-end;padding:28px}
.bt-hero .bt-bg{position:absolute;inset:0;z-index:0}
.bt-hero .bt-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.bt-hero .bt-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,9,10,.35),rgba(9,9,10,.92))}
.bt-hero > *{position:relative;z-index:1}
.bt-hero h3{font-size:26px}
.bt-hero p{max-width:340px;font-size:14.5px}
.bt-badge{position:absolute;top:22px;left:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:9px;background:rgba(20,40,28,.5);border:1px solid rgba(74,222,128,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11.5px;font-weight:600;color:var(--good)}
.bt-badge .d{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse 2.2s infinite}
/* wide tile with mini timeline */
.bt-wide{grid-column:span 2}
.bt-tl{display:flex;align-items:center;gap:0;margin-top:auto}
.bt-tl .node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none}
.bt-tl .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-3)}
.bt-tl .dot.dim{background:#3a3a40;box-shadow:none}
.bt-tl .lab{font-size:10px;color:var(--dim);white-space:nowrap}
.bt-tl .seg{flex:1;height:2px;background:linear-gradient(90deg,var(--accent),#2a2a2e);margin:0 -2px;margin-bottom:18px}
/* stat mini in tile */
.bt .bt-num{font-family:var(--disp,'Sora',sans-serif);font-size:30px;font-weight:600;color:#fff;letter-spacing:-.02em;margin-top:auto}
.bt .bt-num em{font-style:normal;color:var(--accent-2)}

/* ============================================================
   DIRECTION B — ALTERNATING SHOWCASE ROWS
   Editorial image/text rows with on-brand UI mockups.
   ============================================================ */
.showrows{margin-top:48px;display:flex;flex-direction:column;gap:30px}
.showrow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.showrow.flip .sr-media{order:2}
.sr-tx .label{margin-bottom:14px}
.sr-tx h3{margin:0;font-family:var(--disp,'Sora',sans-serif);font-size:28px;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.sr-tx p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.sr-tx ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sr-tx li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#cfcfd4}
.sr-tx li svg{width:16px;height:16px;color:var(--accent-2);flex:none}
.sr-media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  min-height:280px;background:var(--bg-2)}
.sr-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sr-media .sr-glow{position:absolute;inset:0;background:radial-gradient(400px 200px at 70% 30%,rgba(224,70,73,.18),transparent 70%)}

/* on-brand mockup: scan/pipeline panel */
.mock{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:30px}
.mock-bar{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.mock-bar .mb-ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(224,70,73,.3);color:var(--accent-2)}
.mock-bar .mb-ic svg{width:16px;height:16px}
.mock-bar .mb-tx{flex:1;min-width:0}
.mock-bar .mb-tx b{display:block;font-size:12.5px;color:#fff;font-weight:600}
.mock-bar .mb-tx span{display:block;margin-top:3px;font-size:11px;color:var(--dim)}
.mock-bar .mb-st{font-size:10.5px;font-weight:600;color:var(--good)}
.mock-bar.done{border-color:rgba(74,222,128,.25)}

/* ============================================================
   DIRECTION C — PIPELINE DIAGRAM
   "One protected pipeline" shown literally as a flow.
   ============================================================ */
.pipe{margin-top:52px;position:relative}
.pipe-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.pipe-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;z-index:2}
.pipe-ic{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(224,70,73,.16),rgba(224,70,73,.04)),var(--bg);
  border:1px solid rgba(224,70,73,.3);color:var(--accent-2);position:relative}
.pipe-ic svg{width:26px;height:26px}
.pipe-node:last-child .pipe-ic{background:linear-gradient(180deg,rgba(74,222,128,.16),rgba(74,222,128,.04)),var(--bg);
  border-color:rgba(74,222,128,.35);color:var(--good)}
.pipe-step{font-size:11px;color:var(--dim);font-weight:600;margin-bottom:5px}
.pipe-node h4{margin:0;font-size:14.5px;font-weight:600;color:#fff}
.pipe-node p{margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
/* connecting line */
.pipe-line{position:absolute;top:31px;left:8%;right:8%;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--accent-3),var(--accent),var(--good))}
.pipe-line::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:pipeFlow 2.6s linear infinite}
@keyframes pipeFlow{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.pipe-line::before{animation:none}}

/* pipe icon hover micro-animations (download / launch / inject) */
.pic{overflow:hidden}
.pic svg{position:relative;z-index:1}
.pic-bar{position:absolute;left:13px;right:13px;bottom:9px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.13);overflow:hidden;opacity:0;transition:opacity .2s;z-index:2}
.pic-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--accent)}
.pipe-node:hover .pic-dl .pic-bar{opacity:1}
.pipe-node:hover .pic-dl .pic-bar i{animation:dlFill 1.25s ease-in-out infinite}
.pipe-node:hover .pic-dl svg{animation:dlBob 1.25s ease-in-out infinite}
@keyframes dlFill{0%{width:0}80%{width:100%}100%{width:100%}}
@keyframes dlBob{0%{transform:translateY(-2px)}44%{transform:translateY(3px);opacity:1}55%{opacity:.12}57%{opacity:1;transform:translateY(-2px)}100%{transform:translateY(-2px)}}
.pic-ring{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid var(--accent-2);opacity:0;z-index:0}
.pipe-node:last-child .pic-ring{border-color:var(--good)}
.pipe-node:hover .pic-run .pic-ring{animation:runRing 1.1s ease-out infinite}
.pipe-node:hover .pic-run svg{animation:runPop 1.1s ease-in-out infinite}
@keyframes runRing{0%{transform:scale(.45);opacity:.55}100%{transform:scale(1.75);opacity:0}}
@keyframes runPop{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
.pipe-node:hover .pic-zap svg{animation:zapFlash .7s ease-in-out infinite}
@keyframes zapFlash{0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 0 transparent)}40%{transform:scale(1.13) rotate(-5deg);filter:drop-shadow(0 0 7px var(--good))}70%{transform:scale(1.04) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.pic svg,.pic-bar i,.pic-ring{animation:none!important}}
/* supporting chips */
.pipe-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:54px}
.pipe-chip{display:flex;align-items:flex-start;gap:13px;padding:18px 20px;border-radius:13px;
  background:var(--panel);border:1px solid var(--line);transition:border-color .16s}
.pipe-chip:hover{border-color:var(--line-2)}
.pipe-chip .pc-ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--accent-2)}
.pipe-chip .pc-ic svg{width:19px;height:19px}
.pipe-chip b{display:block;font-size:14px;font-weight:600;color:#fff}
.pipe-chip span{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--muted)}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .bt-hero{grid-column:span 2}
  .showrow{grid-template-columns:1fr;gap:22px}
  .showrow.flip .sr-media{order:0}
  .pipe-flow{grid-template-columns:1fr;gap:26px}
  .pipe-line{display:none}
  .pipe-chips{grid-template-columns:1fr}
}


/* ============================================================
   PRODUCT CAPABILITY SCREENS (Products page)
   ============================================================ */
.pnav{position:sticky;top:var(--nav-h);z-index:40;display:flex;gap:6px;padding:12px 28px;
  background:rgba(9,9,10,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.pnav .wrap{display:flex;gap:6px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0}
.pnav a{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:9px;
  font-size:13px;font-weight:500;color:var(--muted);border:1px solid transparent;transition:all .14s}
.pnav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.pnav a.on{color:#fff;background:var(--accent-soft);border-color:rgba(224,70,73,.55);
  box-shadow:inset 0 0 0 1px rgba(224,70,73,.22),0 4px 16px -7px rgba(224,70,73,.6)}
.pnav a img{width:18px;height:18px;border-radius:5px;object-fit:cover}
.pnav a .st{width:7px;height:7px;border-radius:50%}
.pnav a .st.good{background:var(--good);box-shadow:0 0 6px var(--good)}
.pnav a .st.warn{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.pnav a .st.soon{background:var(--muted)}

.pscreen{border-top:1px solid var(--line);scroll-margin-top:120px}
.ps-hero{position:relative;min-height:280px;display:flex;align-items:flex-end;overflow:hidden}
.ps-hero .ps-bg{position:absolute;inset:0;z-index:0}
.ps-hero .ps-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.ps-hero .ps-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,9,10,.45),rgba(9,9,10,.9)),linear-gradient(90deg,rgba(9,9,10,.7),transparent 60%)}
.ps-hero.dim .ps-bg img{filter:saturate(.5) brightness(.6)}
.ps-hero .wrap{position:relative;z-index:1;display:flex;align-items:flex-end;gap:20px;padding-top:48px;padding-bottom:34px;width:100%}
.ps-ico{width:66px;height:66px;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#111;flex:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.ps-ico img{width:100%;height:100%;object-fit:cover}
.ps-htx{flex:1;min-width:0}
.ps-htx .ps-pill{margin-bottom:11px}
.ps-htx h2{margin:0;font-family:var(--disp,'Sora',sans-serif);font-size:32px;font-weight:600;letter-spacing:-.02em;color:#fff}
.ps-htx .sub{margin:7px 0 0;font-size:13.5px;color:#c4c4c9;max-width:480px;line-height:1.5}
.ps-hside{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ps-hside .pr{display:flex;align-items:baseline;gap:5px}
.ps-hside .pr b{font-family:var(--disp,'Sora',sans-serif);font-size:26px;font-weight:600;color:#fff}
.ps-hside .pr span{font-size:12px;color:var(--dim)}
.ps-trial-note{font-size:11px;color:var(--dim)}
.ps-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:8px;font-size:11px;font-weight:600;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ps-pill .d{width:6px;height:6px;border-radius:50%}
.ps-pill.good{background:rgba(20,40,28,.55);border:1px solid rgba(74,222,128,.32);color:var(--good)}
.ps-pill.good .d{background:var(--good);box-shadow:0 0 6px var(--good)}
.ps-pill.warn{background:rgba(44,36,14,.55);border:1px solid rgba(251,191,36,.32);color:var(--warn)}
.ps-pill.warn .d{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.ps-pill.soon{background:rgba(28,28,30,.55);border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.ps-pill.soon .d{background:var(--muted)}

.caps-wrap{padding:36px 0 16px}
.caps-sum{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.caps-sum .cs-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.caps-sum .cs-chip b{color:#fff;font-weight:600;font-family:var(--disp,'Sora',sans-serif)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.cap{border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:20px 20px}
.cap.soon{opacity:.62}
.cap-h{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.cap-h .ci{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--accent-2)}
.cap-h .ci svg{width:17px;height:17px}
.cap-h b{font-family:var(--disp,'Sora',sans-serif);font-size:14.5px;font-weight:600;color:#fff}
.cap-h .ct{margin-left:auto;font-size:11px;color:var(--dim)}
.cap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cap li{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.35;color:#cfcfd4}
.cap li svg{width:14px;height:14px;color:var(--accent-2);flex:none}
.cap li.soon-li svg{color:var(--dim)}
.cap .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cap .chip{padding:4px 9px;border-radius:6px;font-size:11px;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.cap .cap-sub{margin:14px 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}

@media (max-width:980px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .caps{grid-template-columns:1fr}
  .ps-hero .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .ps-hside{text-align:left;align-items:flex-start}
  .pnav{overflow-x:auto}
}


/* ===================== fancy FAQ (two-column) ===================== */
.faq2{display:grid;grid-template-columns:.82fr 1.4fr;gap:46px;align-items:start}
.faq2-aside{position:sticky;top:100px}
.faq2-aside .h2{margin:16px 0 0}
.faq2-aside p{margin:14px 0 22px;font-size:14px;line-height:1.6;color:var(--muted);max-width:280px}
.faq2-list{display:flex;flex-direction:column;gap:10px}
.faq2-list .qa{position:relative;overflow:hidden;transition:border-color .18s,background .18s}
.faq2-list .qa[open]{border-color:rgba(224,70,73,.35);
  background:linear-gradient(180deg,rgba(224,70,73,.06),var(--panel))}
.faq2-list .qa[open]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.faq2-list .qa summary{font-size:15.5px}
.faq2-list .qa[open] summary .chev{color:var(--accent-2)}
@media (max-width:820px){.faq2{grid-template-columns:1fr;gap:24px}.faq2-aside{position:static}}


/* ===================== community block ===================== */
.comm-card{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);
  padding:54px 48px;text-align:center;
  background:radial-gradient(640px 280px at 50% -10%, rgba(224,70,73,.18), transparent 70%), var(--bg-2)}
.comm-av{display:flex;justify-content:center;align-items:center;margin-bottom:22px}
.comm-av img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--bg-2);
  margin-left:-12px;box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}
.comm-av img:first-child{margin-left:0}
.comm-av .more{margin-left:-12px;height:48px;min-width:48px;padding:0 14px;border-radius:999px;
  display:flex;align-items:center;gap:7px;background:var(--accent-soft);border:2px solid var(--bg-2);
  color:#fff;font:600 13px/1 Inter}
.comm-av .more .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 7px var(--good)}
.comm-card h2{margin:0;font-family:var(--disp,'Sora',sans-serif);font-size:32px;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.comm-card > p{margin:14px auto 0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:480px}
.comm-card .hero-cta{justify-content:center;margin-top:28px}

/* ===================== scroll reveal ===================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
}
@media (max-width:720px){.comm-card{padding:40px 22px}.comm-card h2{font-size:25px}}