/* ═══════════════════════════════════════
   ANIMATED BORDER SYSTEM — background-clip method
   No pseudo-elements. No z-index. Works everywhere.
   --angle is always spinning (no hover delay).
   On hover: border becomes transparent, gradient
   is revealed via background-clip: border-box.
═══════════════════════════════════════ */

/* tw-cards */
.tw-card {
  border-radius: var(--radius-md);
  padding: 28px 26px;
  cursor: default;
  overflow: visible;
  background: var(--bg2);
  border: 2px solid var(--line2);
  /* --angle inherited from :root animation - no stacking context on card */
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.tw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(139,0,255,0.12);
  background:
    linear-gradient(var(--bg2), var(--bg2)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      var(--card-c1, #8B00FF),
      var(--card-c2, #00CCFF),
      #FF2D78,
      var(--card-c1, #8B00FF)
    ) border-box;
  border-color: transparent;
}

/* proof-cards */
.proof-card {
  border-radius: var(--radius-md);
  padding: 26px;
  overflow: visible;
  background: var(--bg3);
  border: 2px solid var(--line2);
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.proof-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(139,0,255,0.1);
  background:
    linear-gradient(var(--bg3), var(--bg3)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      #8B00FF, #00CCFF, #FF2D78, #8B00FF
    ) border-box;
  border-color: transparent;
}

/* plans — base */
.plan {
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative;
  overflow: visible;
  background: var(--bg2);
  border: 2px solid var(--line2);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(139,0,255,0.15);
  background:
    linear-gradient(var(--bg2), var(--bg2)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      #8B00FF, #00CCFF, #00ffcc, #8B00FF
    ) border-box;
  border-color: transparent;
}
/* hot plan */
.plan.hot {
  background: var(--bg3);
  border-color: rgba(139,0,255,0.35);
}
.plan.hot:hover {
  background:
    linear-gradient(var(--bg3), var(--bg3)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      #8B00FF, #00CCFF, #00ffcc, #8B00FF
    ) border-box;
  border-color: transparent;
}
/* elite plan */
.plan.elite {
  background: var(--bg3);
  border-color: rgba(255,45,120,0.3);
}
.plan.elite:hover {
  box-shadow: 0 24px 80px rgba(255,45,120,0.18);
  background:
    linear-gradient(var(--bg3), var(--bg3)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      #FF2D78, #A830FF, #00CCFF, #FF2D78
    ) border-box;
  border-color: transparent;
}

/* ─── HERO ─── */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:110px 48px 80px;
  position:relative; z-index:1; overflow:hidden;
}

.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(139,0,255,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,0,255,0.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 50%,black,transparent);
  pointer-events:none;
}
.hero-orb {
  position:absolute; top:5%; left:50%; transform:translateX(-50%);
  width:700px; height:500px;
  background:radial-gradient(ellipse,rgba(139,0,255,0.07) 0%,transparent 65%);
  pointer-events:none;
}

.hero-pill {
  margin-bottom:36px;
  opacity:0; animation:rise .5s ease .1s forwards;
}

.hero-title {
  font-weight:800;
  font-size:clamp(52px,8vw,108px);
  line-height:.98; letter-spacing:-0.04em;
  color:var(--white); margin-bottom:28px;
  opacity:0; animation:rise .6s ease .2s forwards;
  cursor:default; user-select:none;
  transform-style:preserve-3d; will-change:transform;
}
.hero-title .word { display:inline-block; transition:transform .4s var(--ease-spring); }
.hero-title:hover .word-your { transform:translateX(-6px) rotate(-1deg); }
.hero-title:hover .word-pc   { transform:translateX(6px) rotate(1deg) scale(1.04); }
@keyframes unleashMove {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}
.hero-title .ac {
  display:block;
  background:linear-gradient(90deg,
    #8B00FF   0%,
    #00CCFF  16.67%,
    #FF2D78  33.33%,
    #A830FF  50%,
    #00CCFF  66.67%,
    #8B00FF  83.33%,
    #00CCFF 100%
  );
  background-size:600% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:unleashMove 6s linear infinite;
}
.hero-title .ac .word {
  -webkit-text-fill-color:transparent;
  display:inline-block;
}
.hero-title .ac .word { -webkit-text-fill-color:transparent; }

.hero-desc {
  font-size:17px; font-weight:400; line-height:1.75;
  color:var(--gray); max-width:460px; margin:0 auto 44px;
  opacity:0; animation:rise .6s ease .3s forwards;
}

.hero-btns {
  display:flex; align-items:center; justify-content:center; gap:12px;
  opacity:0; animation:rise .5s ease .4s forwards;
}

/* ─── STATS ─── */
.hero-nums {
  display:flex; align-items:center; justify-content:center;
  gap:24px; margin-top:72px;
  opacity:0; animation:rise .5s ease .55s forwards;
}
.num-sep  { width:1px; height:38px; background:var(--line2); }
.num-item { text-align:center; cursor:default; transition:transform .3s var(--ease-spring); }
.num-item:hover { transform:translateY(-3px); }
.num-v {
  font-weight:800; font-size:32px;
  letter-spacing:-0.03em; color:var(--white); line-height:1;
  font-variant-numeric:tabular-nums;
}
.num-v b { color:var(--purpleL); }
.num-v.cyan b { color:var(--cyan); }
.num-l {
  font-family:var(--mono); font-size:9px;
  letter-spacing:3px; color:var(--dim); text-transform:uppercase; margin-top:4px;
}

/* ─── MARQUEE ─── */
.marquee-wrap {
  padding:18px 0; overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg2);
  position:relative; z-index:1;
}
.marquee-inner {
  display:flex; white-space:nowrap;
  /* animation handled by JS for pixel-precise seamless loop */
  will-change: transform;
}
.marquee-item {
  display:inline-flex; align-items:center; gap:16px;
  padding:0 32px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(240,235,255,0.2);
}
.marquee-item .m-accent { color:var(--purple); opacity:.7; }

/* ─── TWEAKS GRID ─── */
.tweaks-sec { padding:120px 0; }
.tweaks-grid {
  margin-top:56px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px;
  perspective:1200px;
  transform:translateZ(0);
}

.tw-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(139,0,255,0.12); }

.tw-num { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:2px; margin-bottom:18px; }
.tw-ico {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; flex-shrink:0;
  background:rgba(139,0,255,0.08); border:1px solid rgba(139,0,255,0.12);
  transition:background .25s;
}
.tw-card:hover .tw-ico { background:rgba(139,0,255,0.16); }
.tw-ico svg { width:20px; height:20px; }
.tw-name { font-weight:700; font-size:15px; color:var(--white); margin-bottom:7px; }
.tw-desc { font-size:13px; color:var(--gray); line-height:1.65; }
.tw-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }

.tw-more {
  margin-top:16px; text-align:center;
  padding:28px 32px; border-radius:var(--radius-sm);
  background:rgba(139,0,255,0.04); border:1px solid rgba(139,0,255,0.1);
}
.tw-more-title {
  font-family:var(--mono); font-size:11px; letter-spacing:3px;
  color:var(--dim); text-transform:uppercase; margin-bottom:8px;
}
.tw-more-desc { font-size:15px; color:var(--gray); max-width:520px; margin:0 auto; }

/* ─── PROOF ─── */
.proof-sec {
  padding:100px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg2);
}
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
.proof-card { border-radius:var(--radius-md); padding:26px; transition:transform .25s, border-color .3s; overflow:visible; background:var(--bg3); border:2px solid var(--line); }
.proof-card:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(139,0,255,0.1); }

.proof-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.proof-av {
  width:40px; height:40px; border-radius:10px;
  background:rgba(139,0,255,0.1); border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:var(--purpleL); flex-shrink:0;
}
.proof-name {
  font-weight:700; font-size:14px; color:var(--white);
  display:flex; align-items:center; gap:5px;
}
.proof-verify {
  width:14px; height:14px; border-radius:50%; background:var(--cyan);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:8px; color:#000; flex-shrink:0;
}
.proof-game { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--purple); text-transform:uppercase; margin-top:2px; }
.proof-quote { font-size:14px; color:var(--gray); line-height:1.65; }

/* ─── PRICING ─── */
.price-sec { padding:120px 0; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }

.plan {
  border-radius:var(--radius-xl); padding:40px;
  transition:transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
  position:relative; overflow:visible;
  background:var(--bg2);
  border:2px solid var(--line2);
  display:flex; flex-direction:column;
}
/* Always-running spin - no delay on hover */

.plan:hover { transform:translateY(-6px); box-shadow:0 24px 64px rgba(139,0,255,0.15); }
.plan:hover .ck { background:rgba(139,0,255,0.2); border-color:rgba(139,0,255,0.6); color:var(--purpleL); box-shadow:0 0 8px rgba(139,0,255,0.4); }
.plan:hover .plan-list li:not(.off) { color:rgba(240,235,255,0.9); }
.plan-list li { transition:color .2s; }

.plan.hot { border-color:rgba(139,0,255,0.3)!important; }
.plan.hot {
  border-color: rgba(139,0,255,0.35);
  background: var(--bg3);
}

.plan.elite { border-color:rgba(255,45,120,0.3)!important; }

.plan.elite:hover { box-shadow:0 24px 80px rgba(255,45,120,0.18); }
.plan.elite:hover .ck { background:rgba(255,45,120,0.15); border-color:rgba(255,45,120,0.6); color:var(--pink); box-shadow:0 0 10px rgba(255,45,120,0.4); }

.plan-tier { font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gray); margin-bottom:16px; }
.plan.hot .plan-tier   { color:var(--purpleL); font-weight:500; }
.plan.elite .plan-tier { color:var(--pink); font-weight:500; }
.plan-name { font-weight:800; font-size:24px; letter-spacing:-0.02em; color:var(--white); margin-bottom:8px; }
.plan-price { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; }
.plan-eur { font-weight:800; font-size:58px; line-height:1; letter-spacing:-0.04em; color:var(--white); }
.plan.hot .plan-eur   { color:var(--purpleL); }
.plan.elite .plan-eur { color:var(--pink); }
.plan-cents { font-size:28px; vertical-align:top; margin-top:14px; display:inline-block; opacity:.6; }
.plan-per { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--gray); text-transform:uppercase; margin-top:4px; }
.plan-desc { font-size:14px; color:var(--gray); margin:16px 0 24px; padding-bottom:24px; border-bottom:1px solid var(--line); line-height:1.65; }
.plan-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1; }
.plan-list li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gray); }
.ck {
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,204,255,0.07); border:1px solid rgba(0,204,255,0.16);
  font-size:9px; color:var(--cyan); transition:all .25s;
}
.plan-list li.off { opacity:.22; }
.plan-list li.off .ck { background:rgba(255,255,255,0.03); border-color:var(--line2); color:var(--dim); }
.plan-cta {
  display:block; width:100%; text-align:center; padding:14px; border-radius:10px;
  font-weight:700; font-size:13px; letter-spacing:.3px;
  cursor:pointer; border:1px solid var(--line2); color:var(--gray);
  background:rgba(255,255,255,0.03); transition:all .25s;
  font-family:inherit;
}
.plan-cta:hover { border-color:var(--dim); color:var(--white); background:rgba(255,255,255,0.05); }
.plan.hot .plan-cta { background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 0 28px rgba(139,0,255,0.22); }
.plan.hot .plan-cta:hover { background:var(--purpleL); border-color:var(--purpleL); box-shadow:0 6px 40px rgba(139,0,255,0.4); }
.plan.elite .plan-cta { background:linear-gradient(135deg,var(--pink),var(--purpleL)); border:none; color:#fff; box-shadow:0 0 32px rgba(255,45,120,0.25); }
.plan.elite .plan-cta:hover { opacity:.9; box-shadow:0 6px 40px rgba(255,45,120,0.4); }

.elite-badge { font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:100px; background:rgba(255,45,120,0.1); border:1px solid rgba(255,45,120,0.3); color:var(--pink); margin-bottom:12px; display:inline-block; animation:elitePulse 2.5s ease-in-out infinite; }
.popular-badge { font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:100px; background:rgba(139,0,255,0.12); border:1px solid rgba(139,0,255,0.3); color:var(--purpleL); margin-bottom:12px; display:inline-block; }

/* ─── HERO CARD 3D ─── */
.hero-card-3d {
  width:360px; border-radius:20px; padding:32px;
  backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(180,0,255,0.1), 0 40px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hero-card-3d::before {
  content:''; position:absolute; top:-1px; left:20%; right:20%; height:2px;
  background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
}
.fps-bars { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.fps-row  { display:flex; align-items:center; gap:10px; }
.fps-lbl  { font-family:var(--mono); font-size:10px; color:var(--gray); width:50px; flex-shrink:0; }
.fps-track { flex:1; height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.fps-fill  { height:100%; border-radius:3px; animation:barGrow 1.5s var(--ease-spring) both; }
.fps-fill.before { background:var(--dim); --w:42%; }
.fps-fill.after  { background:var(--purple); --w:78%; animation-delay:.1s; }
.fps-val  { font-family:var(--mono); font-size:10px; color:var(--white); width:32px; text-align:right; flex-shrink:0; }

/* ─── GAME LOGO MARQUEE ─── */
.game-item { gap: 12px !important; align-items: center; padding: 0 6px !important; }
.game-logo-img {
  height: 75px;
  width: 130px;
  max-width: 130px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.08));
  transition: opacity 0.2s;
}
.game-logo-img[alt="APEX LEGENDS"] { height: 62px; }
.game-logo-img[alt="MARVEL RIVALS"] { width: 115px; max-width: 115px; }
.game-logo-img:hover { opacity: 1; }
/* hide broken images silently */
.game-logo-img[src=""] { display: none; }
.game-label {
  font-size: 13px !important;
  letter-spacing: 3px;
  font-weight: 800;
  text-transform: uppercase;
}
.marquee-dot {
  display: inline-flex; align-items: center;
  padding: 0 10px;
  color: rgba(139,0,255,0.3);
  font-size: 5px;
}

/* ─── SEE ALL TWEAKS BUTTON ─── */
.btn-see-all {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 11px 26px; border-radius: var(--radius-sm);
  font-family: var(--font); font-weight: 600;
  font-size: 13px; letter-spacing: .3px;
  color: var(--purpleL);
  border: 1px solid rgba(168,48,255,0.3);
  background: rgba(139,0,255,0.05);
  transition: background .22s, border-color .22s, color .22s, transform .22s var(--ease-spring);
  will-change: transform;
}
.btn-see-all:hover {
  background: rgba(139,0,255,0.14);
  border-color: var(--purpleL);
  color: var(--white);
  transform: translateY(-2px);
}

/* ─── PRICING BADGE AREA (alignment fix) ─── */
.plan-badge-area {
  min-height: 40px;
  display: flex; align-items: flex-start;
  margin-bottom: 4px;
}
.plan-badge-area .popular-badge,
.plan-badge-area .elite-badge { margin-bottom: 0; }

/* ─── FPS COUNTER ─── */
#fps-counter {
  position: fixed;
  top: 72px; right: 18px;
  z-index: 99;
  pointer-events: none;
  user-select: none;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.fps-hud-label {
  font-family: 'DM Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  margin-left: 3px;
  letter-spacing: 0.04em;
  color: #39ff14;
  text-shadow:
    0 0 6px rgba(57,255,20,0.9),
    0 0 16px rgba(57,255,20,0.4);
  line-height: 1;
}
.fps-hud-val {
  font-family: 'DM Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
.fps-val {
  font-size: 17px;
  color: #39ff14;
  text-shadow:
    0 0 6px rgba(57,255,20,0.9),
    0 0 16px rgba(57,255,20,0.4);
  transition: color 0.15s, text-shadow 0.15s;
}
@keyframes fpsFlicker {
  0%, 92%, 94.5%, 97%, 100% { opacity: 1; }
  93%   { opacity: 0.72; }
  95.5% { opacity: 0.86; }
}
#fps-counter { animation: fpsFlicker 9s ease-in-out infinite; }

@media (max-width:900px) {
  .tweaks-grid { grid-template-columns:1fr 1fr; }
  .proof-grid  { grid-template-columns:1fr; }
  .price-grid  { grid-template-columns:1fr; }
  .hero-nums   { gap:16px; }
  .num-v       { font-size:24px; }
  #fps-counter { display: none; }
}
@media (max-width:600px) {
  .tweaks-grid { grid-template-columns:1fr; }
  .hero { padding:100px 24px 60px; }
  .hero-btns { flex-direction:column; width:100%; }
  .btn { justify-content:center; width:100%; }
}