:root{
  --bg:#060915;
  --bg-2:#0b1130;
  --panel:#0c1434;
  --panel-2:#0f193f;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --text:#f7f9ff;
  --muted:#9cabd3;
  --purple:#8b5dff;
  --blue:#4d8dff;
  --pink:#ff4fb3;
  --gold:#f7ba36;
  --green:#59df99;
  --shadow:0 24px 60px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.zv-home-body{margin:0;min-height:100vh;font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;background:
radial-gradient(circle at 12% 18%,rgba(105,82,255,.18),transparent 24%),
radial-gradient(circle at 86% 18%,rgba(58,102,255,.16),transparent 20%),
radial-gradient(circle at 72% 68%,rgba(255,79,179,.10),transparent 22%),
linear-gradient(180deg,#04070f,#091026 46%,#060b1c 100%);
color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.zv-topbar{position:sticky;top:0;z-index:70;backdrop-filter:blur(16px);background:rgba(4,7,15,.82);border-bottom:1px solid rgba(255,255,255,.05)}
.zv-nav-shell{width:min(100%,1600px);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px}
.zv-brand{display:flex;align-items:center;gap:14px;min-width:max-content}
.zv-brand-mark{width:42px;height:42px;border-radius:14px;border:1px solid rgba(247,186,54,.55);background:linear-gradient(180deg,#0a0d1d,#070a14);display:grid;place-items:center;color:#fff;font-size:20px;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.zv-brand-image img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.zv-brand-text{display:flex;flex-direction:column;line-height:1.05}
.zv-brand-text strong{font-size:18px;letter-spacing:.06em;color:#ffd56a}
.zv-brand-text small{font-size:11px;color:#8ea0c9}
.zv-nav-links{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0}
.zv-nav-links a{padding:18px 16px 16px;color:#f1f3fa;font-size:14px;font-weight:800;position:relative;white-space:nowrap}
.zv-nav-links a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--gold));transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.zv-nav-links a:hover{color:#ffd56a}
.zv-nav-links a.is-active{color:#ffd56a}
.zv-nav-links a.is-active::after,.zv-nav-links a:hover::after{transform:scaleX(1)}
.zv-nav-actions{display:flex;align-items:center;gap:12px;min-width:max-content}
.zv-btn{height:46px;padding:0 24px;border-radius:16px;font-size:15px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(247,186,54,.46);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.zv-btn:hover{transform:translateY(-1px)}
.zv-btn-ghost{background:transparent;color:#fff}
.zv-btn-gold{background:linear-gradient(135deg,#f5bc3b,#f2a81a);color:#14110a;box-shadow:0 12px 28px rgba(242,168,26,.22)}
.zv-mobile-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-size:18px}
.zv-home-main{width:min(100%,1600px);margin:0 auto;padding:28px 24px 44px}
.zv-hero-grid{display:grid;grid-template-columns:1.06fr 1.18fr;gap:22px;align-items:start}
.zv-hero-copy,.zv-featured-panel,.zv-feed-panel,.zv-support-card,.zv-stats-strip,.zv-support-note{border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(10,16,38,.96),rgba(7,12,29,.96));box-shadow:var(--shadow)}
.zv-hero-copy{position:relative;border-radius:30px;padding:34px 34px 28px;overflow:hidden;min-height:100%}
.zv-hero-copy::before{content:"";position:absolute;inset:auto -10% -30% auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(139,93,255,.26),transparent 70%);pointer-events:none}
.zv-hero-copy>*{position:relative;z-index:2}
.zv-pill,.zv-live-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);font-size:13px;font-weight:800;color:#dce3ff}
.zv-live-badge{color:#b8ffd6;border-color:rgba(89,223,153,.22);background:rgba(13,56,39,.35)}
.zv-hero-copy h1{margin:18px 0 12px;font-size:clamp(44px,5vw,74px);line-height:.98;letter-spacing:-.04em}
.zv-hero-copy h1 span{background:linear-gradient(90deg,#cf7bff 0%,#7b79ff 40%,#4ab5ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.zv-hero-copy p{margin:0;max-width:660px;color:var(--muted);font-size:18px;line-height:1.7}
.zv-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 18px}
.zv-cta{height:58px;padding:0 30px;border-radius:18px;font-weight:900;font-size:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent}
.zv-cta-primary{background:linear-gradient(90deg,#b65cff,#5280ff);color:#fff;box-shadow:0 16px 34px rgba(95,92,255,.24)}
.zv-cta-secondary{border-color:rgba(90,143,255,.38);background:rgba(10,18,43,.85);color:#fff}
.zv-hero-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.zv-hero-mini article{padding:16px 16px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.zv-hero-mini strong{display:block;margin-bottom:8px;font-size:15px}
.zv-hero-mini small{display:block;color:var(--muted);font-size:12px;line-height:1.55}
.zv-featured-panel{border-radius:30px;padding:24px}
.zv-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}
.zv-panel-head.tight{margin-bottom:14px}
.zv-panel-head h2,.zv-panel-head h3{margin:0;color:#fff}
.zv-panel-head h2{font-size:28px;line-height:1.15}
.zv-panel-head h3{font-size:22px}
.zv-panel-kicker{display:inline-block;margin-bottom:7px;color:#d084ff;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.zv-panel-head p,.zv-panel-head a{color:var(--muted);font-size:13px;font-weight:700}
.zv-streamer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.zv-streamer-card{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.01))}
.zv-streamer-banner{position:relative;padding:16px;min-height:220px;background:
linear-gradient(180deg,rgba(8,13,28,.25),rgba(8,13,28,.96) 100%),
radial-gradient(circle at 15% 12%,color-mix(in srgb, var(--accent) 28%, transparent),transparent 34%),
radial-gradient(circle at 82% 18%,color-mix(in srgb, var(--accent) 20%, #4d8dff 80%),transparent 30%),
linear-gradient(145deg,color-mix(in srgb, var(--accent) 22%, #11152b),#101834 58%,#0a1024)
}
.zv-streamer-live{position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:999px;background:#ff4757;color:#fff;font-size:11px;font-weight:900;letter-spacing:.06em}
.zv-streamer-glow{position:absolute;right:-8px;bottom:-26px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb, var(--accent) 38%, transparent),transparent 72%)}
.zv-streamer-meta{display:flex;align-items:center;gap:12px;margin-top:100px;position:relative;z-index:1}
.zv-streamer-meta img{width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.14);object-fit:cover;background:#101522}
.zv-streamer-meta strong{display:block;font-size:16px;line-height:1.2}
.zv-streamer-meta small{display:block;margin-top:3px;color:#d7defd;font-size:12px}
.zv-streamer-banner p{position:relative;z-index:1;margin:14px 0 0;color:#dfe5ff;font-size:14px;line-height:1.5}
.zv-streamer-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 16px 16px;background:rgba(4,9,24,.58);border-top:1px solid rgba(255,255,255,.06)}
.zv-streamer-stats span{display:block;margin-bottom:6px;color:#95a6cf;font-size:11px}
.zv-streamer-stats strong{display:block;color:#fff;font-size:17px;line-height:1.2}
.zv-support-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:20px;margin-top:22px}
.zv-section-head h2{margin:8px 0 10px;font-size:36px;line-height:1.05}
.zv-section-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.75}
.zv-support-left{min-width:0}
.zv-support-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.zv-support-card{border-radius:24px;padding:20px;position:relative}
.zv-support-card.is-mid{border-color:rgba(171,118,255,.32);box-shadow:0 16px 42px rgba(125,97,255,.18)}
.zv-support-card.is-hot{border-color:rgba(255,79,179,.26)}
.zv-support-label{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);color:#d49cff;font-size:12px;font-weight:900}
.zv-support-card h3{margin:16px 0 14px;font-size:48px;line-height:1;letter-spacing:-.03em}
.zv-support-card ul{margin:0;padding-left:18px;color:#d7dffa;font-size:14px;line-height:1.85}
.zv-support-btn{margin-top:16px;height:50px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(90deg,rgba(76,134,255,.18),rgba(217,78,255,.16));display:flex;align-items:center;justify-content:center;font-weight:900}
.zv-support-note{margin-top:16px;border-radius:18px;padding:16px 18px;color:#dbe2ff;font-size:14px;line-height:1.7}
.zv-support-right{display:grid;gap:16px}
.zv-feed-panel{border-radius:24px;padding:18px}
.zv-activity-list{display:grid;gap:10px}
.zv-activity-list article,.zv-top-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.zv-activity-list strong,.zv-top-list strong{display:block;font-size:15px}
.zv-activity-list small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.zv-activity-list .amount,.zv-top-list b{font-size:18px;color:#ffd56a;font-weight:900;white-space:nowrap}
.zv-top-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.zv-top-list .rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ffd56a,#f3a61a);color:#17130a;font-size:13px;font-weight:900;flex:0 0 30px}
.zv-top-list li strong{flex:1;min-width:0}
.zv-stats-strip{margin-top:22px;border-radius:28px;padding:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 320px;gap:14px;align-items:stretch}
.zv-stats-strip article{padding:18px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.zv-stats-strip small{display:block;margin-bottom:8px;color:var(--muted);font-size:12px}
.zv-stats-strip strong{display:block;font-size:32px;line-height:1.05}
.zv-stats-cta{border-radius:22px;background:linear-gradient(90deg,#af58ff,#597eff);display:flex;align-items:center;justify-content:center;padding:16px 24px;text-align:center;font-size:22px;font-weight:900;box-shadow:0 16px 34px rgba(92,90,255,.24)}
.footer-manager-shell{margin-top:30px}
@media(max-width:1320px){
  .zv-hero-grid,.zv-support-grid{grid-template-columns:1fr}
  .zv-streamer-grid,.zv-support-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zv-stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zv-stats-cta{min-height:110px;grid-column:1 / -1}
}
@media(max-width:1100px){
  .zv-nav-shell{flex-wrap:wrap}
  .zv-nav-links{order:3;flex-basis:100%;justify-content:flex-start;overflow:auto;padding-bottom:4px}
}
@media(max-width:860px){
  .zv-nav-shell{gap:14px}
  .zv-mobile-toggle{display:inline-grid;place-items:center;margin-left:auto}
  .zv-nav-links,.zv-nav-actions{display:none;width:100%;flex-basis:100%}
  .zv-nav-links.is-open,.zv-nav-actions.is-open{display:flex}
  .zv-nav-links{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid rgba(255,255,255,.05);padding-top:10px}
  .zv-nav-links a{padding:12px 2px}
  .zv-nav-links a::after{left:0;right:auto;width:48px}
  .zv-nav-actions{flex-direction:column;align-items:stretch;padding-bottom:10px}
  .zv-hero-copy h1{font-size:40px}
  .zv-hero-mini,.zv-streamer-grid,.zv-support-cards,.zv-stats-strip{grid-template-columns:1fr}
  .zv-streamer-stats{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:640px){
  .zv-home-main,.zv-nav-shell{padding-left:14px;padding-right:14px}
  .zv-hero-copy,.zv-featured-panel,.zv-feed-panel,.zv-support-card,.zv-stats-strip,.zv-support-note{border-radius:22px}
  .zv-hero-copy{padding:22px 18px}
  .zv-panel-head{flex-direction:column;align-items:flex-start}
  .zv-cta{width:100%}
  .zv-streamer-stats{grid-template-columns:1fr}
  .zv-section-head h2{font-size:30px}
  .zv-support-card h3{font-size:40px}
  .zv-stats-strip strong{font-size:26px}
  .zv-stats-cta{font-size:18px;min-height:90px}
}

/* R2 — homepage real streamer data / real cover media */
.zv-streamer-card{display:block;color:inherit}
.zv-streamer-cover-media{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.zv-streamer-cover-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,8,22,.10),rgba(5,8,22,var(--cover-overlay,.35)) 48%,rgba(5,8,22,.94) 100%);pointer-events:none}
.zv-streamer-live{z-index:3;background:rgba(36,191,119,.96);box-shadow:0 8px 20px rgba(36,191,119,.22)}
.zv-streamer-meta{z-index:3}
.zv-streamer-banner p{z-index:3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.zv-streamer-glow{z-index:2;pointer-events:none}
.zv-streamer-card:hover{border-color:color-mix(in srgb,var(--accent),white 10%);transform:translateY(-2px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;box-shadow:0 20px 42px rgba(0,0,0,.28)}
.zv-real-empty{padding:30px 18px;border:1px dashed rgba(255,255,255,.13);border-radius:20px;color:#91a0c7;background:rgba(255,255,255,.02);text-align:center;font-size:14px;line-height:1.6}
.zv-real-empty.compact{padding:18px 14px;border-radius:15px}

/* R4 — streamer marquee inside featured box */
.zv-featured-panel{overflow:hidden;position:relative}
.zv-streamer-marquee-shell{
  position:relative;
  overflow:hidden;
  width:calc(100% + 36px);
  margin:4px -18px -8px;
  padding:4px 18px 8px;
}
.zv-streamer-marquee-shell::before,
.zv-streamer-marquee-shell::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  z-index:6;
  pointer-events:none;
}
.zv-streamer-marquee-shell::before{
  left:0;
  background:linear-gradient(90deg,rgba(8,12,29,.96),rgba(8,12,29,0));
}
.zv-streamer-marquee-shell::after{
  right:0;
  background:linear-gradient(270deg,rgba(8,12,29,.96),rgba(8,12,29,0));
}
.zv-streamer-marquee-track{
  display:flex;
  align-items:stretch;
  width:max-content;
  animation:zvStreamerMarquee 34s linear infinite;
  will-change:transform;
}
.zv-streamer-marquee-shell:hover .zv-streamer-marquee-track{animation-play-state:paused}
.zv-streamer-marquee-row{display:flex;align-items:stretch;gap:16px;flex:0 0 auto;padding-right:16px}
.zv-streamer-card-marquee{
  width:260px;
  min-width:260px;
  transform:translateZ(0);
}
.zv-streamer-card-marquee .zv-streamer-banner{min-height:212px}
.zv-streamer-card-marquee .zv-streamer-meta{margin-top:92px}
.zv-streamer-card-marquee .zv-streamer-meta strong{font-size:15px}
.zv-streamer-card-marquee .zv-streamer-banner p{font-size:13px;min-height:38px}
.zv-streamer-card-marquee .zv-streamer-stats{gap:8px;padding:12px 14px 14px}
.zv-streamer-card-marquee .zv-streamer-stats span{font-size:10px}
.zv-streamer-card-marquee .zv-streamer-stats strong{font-size:16px}
.zv-streamer-card-marquee:hover{transform:translateY(-4px) scale(1.01)}
@keyframes zvStreamerMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 8px))}
}
@media(max-width:1320px){
  .zv-streamer-marquee-shell{width:100%;margin:4px 0 0;padding:4px 0 4px}
  .zv-streamer-marquee-shell::before,.zv-streamer-marquee-shell::after{width:46px}
}
@media(max-width:860px){
  .zv-streamer-card-marquee{width:232px;min-width:232px}
  .zv-streamer-card-marquee .zv-streamer-banner{min-height:198px}
}
@media(max-width:640px){
  .zv-streamer-marquee-shell::before,.zv-streamer-marquee-shell::after{width:28px}
  .zv-streamer-card-marquee{width:210px;min-width:210px}
  .zv-streamer-card-marquee .zv-streamer-meta{margin-top:86px}
  .zv-streamer-card-marquee .zv-streamer-stats{grid-template-columns:1fr}
}

/* R5 — hero orbit ring between title and featured panel */
.zv-hero-grid{position:relative;overflow:visible}
.zv-hero-orbit{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.zv-hero-orbit-bg{
  right:58px;
  top:44%;
  bottom:auto;
  width:276px;
  height:276px;
  transform:translateY(-50%);
  z-index:1;
  opacity:.30;
  filter:saturate(.95) blur(.2px);
}
.zv-hero-orbit-bg::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at 50% 50%, rgba(11,17,48,0) 26%, rgba(11,17,48,.08) 52%, rgba(11,17,48,.5) 72%, rgba(11,17,48,.88) 100%);
  border-radius:50%;
}
.zv-hero-orbit-bg .zv-hero-orbit-card{box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.03)}
.zv-hero-orbit-bg .zv-hero-orbit-meta{opacity:.55}
.zv-hero-orbit-bg .zv-hero-orbit-core{display:none!important}
.zv-hero-orbit::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 26px rgba(15,23,58,.14), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.zv-hero-orbit-core{
  position:absolute;
  width:70px;
  height:70px;
  border-radius:24px;
  background:radial-gradient(circle at 30% 30%,rgba(130,104,255,.95),rgba(74,121,255,.92) 58%,rgba(19,29,72,.98) 100%);
  box-shadow:0 18px 40px rgba(79,98,255,.34), inset 0 0 0 1px rgba(255,255,255,.14);
  z-index:2;
}
.zv-hero-orbit-ring{
  --w: 110px;
  --h: 156px;
  --translateZ: 164px;
  --rotateX: -13deg;
  --perspective: 1100px;
  position:absolute;
  width:var(--w);
  height:var(--h);
  left:calc(50% - (var(--w) / 2));
  top:calc(50% - (var(--h) / 2));
  transform-style:preserve-3d;
  transform:perspective(var(--perspective));
  animation:zvHeroOrbitSpin 24s linear infinite;
}
.zv-hero-orbit-card{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(7,12,29,.96),rgba(5,8,20,.98));
  box-shadow:0 18px 32px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
  transform:rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
  pointer-events:auto;
}
.zv-hero-orbit-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zv-hero-orbit-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,20,.06),rgba(4,8,20,.42) 55%,rgba(4,8,20,.92) 100%)}
.zv-hero-orbit-meta{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:3px}
.zv-hero-orbit-meta strong{font-size:12px;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zv-hero-orbit-meta small{font-size:10px;color:#d7dfff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes zvHeroOrbitSpin{
  from{transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0)}
  to{transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn)}
}
@media(max-width:1320px){
  .zv-hero-orbit-bg{right:28px;top:46%;bottom:auto;width:244px;height:244px;transform:translateY(-50%);opacity:.25}
}
@media(max-width:860px){
  .zv-hero-orbit-bg{display:none}
}

/* R7 — remove center square from background orbit */
.zv-hero-orbit-bg .zv-hero-orbit-core{display:none!important}

/* R9 — real streamer media + cleaner marquee cards */
.zv-streamer-live{display:none!important}
.zv-streamer-card-marquee .zv-streamer-stats{display:none!important}
.zv-streamer-card-marquee .zv-streamer-banner{
  min-height:248px;
  padding:18px;
  background:#080d21;
}
.zv-streamer-card-marquee .zv-streamer-cover-media{
  opacity:1;
  filter:saturate(1.04) contrast(1.02);
}
.zv-streamer-card-marquee .zv-streamer-cover-shade{
  background:linear-gradient(180deg,rgba(4,7,18,.04),rgba(4,7,18,.12) 36%,rgba(4,7,18,.78) 76%,rgba(4,7,18,.96) 100%);
}
.zv-streamer-card-marquee .zv-streamer-meta{
  margin-top:138px;
}
.zv-streamer-card-marquee.source-avatar .zv-streamer-cover-media{
  filter:blur(1px) saturate(1.08) brightness(.72);
  transform:scale(1.08);
}
.zv-streamer-card-marquee.source-avatar .zv-streamer-cover-shade{
  background:linear-gradient(180deg,rgba(4,7,18,.12),rgba(4,7,18,.38) 48%,rgba(4,7,18,.94) 100%);
}
.zv-streamer-card-marquee .zv-streamer-meta img{
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.zv-streamer-card-marquee .zv-streamer-banner p{
  min-height:0;
  margin-top:10px;
}
@media(max-width:860px){
  .zv-streamer-card-marquee .zv-streamer-banner{min-height:224px}
  .zv-streamer-card-marquee .zv-streamer-meta{margin-top:120px}
}

/* R10 — keep streamer media sharp / avoid stretching small avatars */
.zv-streamer-card-marquee .zv-streamer-cover-media{
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.zv-streamer-card-marquee.source-avatar .zv-streamer-banner{
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--accent) 24%, transparent), transparent 36%),
    linear-gradient(145deg,#0a1028,#10183a 58%,#080d20);
}
.zv-streamer-card-marquee.source-avatar .zv-streamer-cover-media,
.zv-streamer-card-marquee .zv-streamer-cover-media.is-avatar-source{
  inset:22px 28px 72px;
  width:calc(100% - 56px);
  height:calc(100% - 94px);
  object-fit:contain!important;
  object-position:center!important;
  opacity:.92;
  filter:none!important;
  transform:none!important;
  border-radius:20px;
}
.zv-streamer-card-marquee.source-avatar .zv-streamer-cover-shade{
  background:linear-gradient(180deg,rgba(4,7,18,.02),rgba(4,7,18,.12) 48%,rgba(4,7,18,.90) 100%);
}
.zv-streamer-card-marquee.is-low-res-cover .zv-streamer-banner{
  background:
    radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 44%),
    #080d21;
}
.zv-streamer-card-marquee.is-low-res-cover .zv-streamer-cover-media{
  inset:10px 12px 58px;
  width:calc(100% - 24px);
  height:calc(100% - 68px);
  object-fit:contain!important;
  object-position:center!important;
  border-radius:16px;
  filter:none!important;
  transform:none!important;
  background:rgba(255,255,255,.015);
}
.zv-streamer-card-marquee.is-low-res-cover .zv-streamer-cover-shade{
  background:linear-gradient(180deg,rgba(4,7,18,.01),rgba(4,7,18,.08) 52%,rgba(4,7,18,.90) 100%);
}
.zv-streamer-card-marquee.source-avatar .zv-streamer-meta,
.zv-streamer-card-marquee.is-low-res-cover .zv-streamer-meta{
  margin-top:138px;
}


/* R18 — simple creator showcase inspired by reference */
.zv-showcase-band{
  position:relative;
  margin-top:20px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg,rgba(6,10,25,.98),rgba(7,11,28,.98));
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:22px 0 26px;
}
.zv-showcase-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(111,121,177,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(111,121,177,.08) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.42;
  pointer-events:none;
}
.zv-showcase-watermark{
  position:absolute;
  left:50%;
  top:-44px;
  transform:translateX(-50%);
  z-index:0;
  color:#4254ff;
  font-size:clamp(120px,18vw,290px);
  line-height:.8;
  font-weight:1000;
  letter-spacing:-.09em;
  opacity:.88;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
}
.zv-showcase-head{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:0 24px 16px;
}
.zv-showcase-head h2{margin:5px 0 0;font-size:30px;line-height:1.1}
.zv-showcase-head p{margin:0;max-width:540px;text-align:right;color:var(--muted);font-size:13px;line-height:1.6}
.zv-showcase-viewport{
  position:relative;
  z-index:2;
  width:100%;
  overflow:hidden;
  padding:4px 0 6px;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,1) 3%,rgba(0,0,0,1) 97%,transparent);
}
.zv-showcase-track{
  display:flex;
  width:max-content;
  align-items:flex-end;
  animation:zvShowcaseScroll 38s linear infinite;
  will-change:transform;
}
.zv-showcase-viewport:hover .zv-showcase-track{animation-play-state:paused}
.zv-showcase-row{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex:0 0 auto;
  padding-right:18px;
}
.zv-showcase-card{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:320px;
  height:178px;
  border-radius:17px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1024;
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.zv-showcase-card:nth-child(3n+1){transform:translateY(7px)}
.zv-showcase-card:nth-child(3n+2){transform:translateY(-3px)}
.zv-showcase-card:nth-child(3n){transform:translateY(4px)}
.zv-showcase-card:hover{
  transform:translateY(-5px) scale(1.015)!important;
  border-color:rgba(126,106,255,.45);
  box-shadow:0 24px 48px rgba(0,0,0,.34);
}
.zv-showcase-media-wrap{position:absolute;inset:0;background:#0b1024;overflow:hidden}
.zv-showcase-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto}
.zv-showcase-card.source-avatar .zv-showcase-media,
.zv-showcase-card.is-low-res-cover .zv-showcase-media{
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  object-fit:contain;
  border-radius:12px;
  background:linear-gradient(145deg,#0b1024,#11183a);
}
.zv-showcase-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,6,16,.02),rgba(3,6,16,.06) 58%,rgba(3,6,16,.82) 100%);
}
.zv-showcase-url{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:3;
  max-width:calc(100% - 24px);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(7,9,24,.84);
  border:1px solid rgba(255,255,255,.09);
  color:#f5f7ff;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(8px);
}
@keyframes zvShowcaseScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 9px))}
}
@media(max-width:1100px){
  .zv-showcase-head{align-items:flex-start;flex-direction:column}
  .zv-showcase-head p{text-align:left}
  .zv-showcase-card{width:278px;height:156px}
  .zv-showcase-watermark{top:-24px;font-size:180px}
}
@media(max-width:640px){
  .zv-showcase-band{border-radius:22px;padding-top:18px;padding-bottom:20px}
  .zv-showcase-head{padding:0 14px 14px}
  .zv-showcase-head h2{font-size:22px}
  .zv-showcase-head p{font-size:12px}
  .zv-showcase-card{width:230px;height:132px;border-radius:14px}
  .zv-showcase-row{gap:12px;padding-right:12px}
  .zv-showcase-watermark{font-size:130px;top:-6px}
  .zv-showcase-url{left:9px;bottom:8px;padding:6px 9px;font-size:10px}
}

/* R19 — remove old featured streamer panel / hero full width */
.zv-hero-grid{
  grid-template-columns:1fr!important;
}
.zv-hero-copy{
  width:100%;
  min-height:560px;
}
.zv-hero-copy>p{
  max-width:760px;
}
@media(max-width:1100px){
  .zv-hero-copy{min-height:520px}
}
@media(max-width:640px){
  .zv-hero-copy{min-height:auto}
}

/* R20 — floating tech/server animation in Creator Showcase */
.zv-showcase-tech-float{
  position:relative;
  width:220px;
  min-width:220px;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:-14px 4px -12px 0;
  pointer-events:none;
  animation:zvShowcaseFloat 4.2s ease-in-out infinite;
  filter:drop-shadow(0 18px 28px rgba(43,55,160,.18));
}
.zv-showcase-tech-float::before{
  content:"";
  position:absolute;
  inset:16px 8px 4px;
  border-radius:999px;
  background:radial-gradient(circle at 52% 68%,rgba(92,97,255,.12),transparent 68%);
  filter:blur(10px);
}
.zv-showcase-tech-float>span{
  position:absolute;
  right:4px;
  bottom:6px;
  z-index:3;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(96,228,164,.16);
  background:rgba(7,20,27,.56);
  color:#8af0bb;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
}
#svg-global{
  width:190px;
  height:auto;
  zoom:1.05;
  overflow:visible;
}
@keyframes fade-particles{
  0%,100%{opacity:1}
  50%{opacity:.5}
}
@keyframes floatUp{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(-40px);opacity:0}
}
#particles{animation:fade-particles 5s infinite alternate}
.particle{animation:floatUp linear infinite}
.p1{animation-duration:2.2s;animation-delay:0s}
.p2{animation-duration:2.5s;animation-delay:.3s}
.p3{animation-duration:2s;animation-delay:.6s}
.p4{animation-duration:2.8s;animation-delay:.2s}
.p5{animation-duration:2.3s;animation-delay:.4s}
.p6{animation-duration:3s;animation-delay:.1s}
.p7{animation-duration:2.1s;animation-delay:.5s}
.p8{animation-duration:2.6s;animation-delay:.2s}
.p9{animation-duration:2.4s;animation-delay:.3s}
@keyframes bounce-lines{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
#line-v1,#line-v2,#node-server,#panel-rigth,#reflectores,#particles{
  animation-name:bounce-lines;
  animation-duration:3s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
#line-v2{animation-delay:.2s}
#node-server,#panel-rigth,#reflectores,#particles{animation-delay:.4s}
@keyframes zvShowcaseFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-7px) rotate(1deg)}
}
@media(max-width:900px){
  .zv-showcase-tech-float{width:180px;min-width:180px;height:96px;margin:-8px 0 -6px}
  #svg-global{width:158px}
  .zv-showcase-tech-float>span{font-size:8px;right:0;bottom:2px}
}
@media(max-width:700px){
  .zv-showcase-tech-float{display:none}
}

/* R21 — replace floating tech icon with mascot art */
.zv-showcase-tech-float{display:none!important}
.zv-showcase-mascot-float{
  position:relative;
  width:220px;
  min-width:220px;
  height:190px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  margin:-28px -4px -20px 0;
  pointer-events:none;
  z-index:3;
  animation:zvMascotFloat 4.8s ease-in-out infinite;
}
.zv-showcase-mascot-float::before{
  content:"";
  position:absolute;
  right:18px;
  bottom:24px;
  width:120px;
  height:42px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(164,98,255,.34),rgba(69,128,255,.14) 52%,transparent 74%);
  filter:blur(14px);
  opacity:.95;
}
.zv-showcase-mascot-float img{
  position:relative;
  z-index:2;
  width:190px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(84,72,255,.24)) drop-shadow(0 4px 14px rgba(214,86,255,.16));
}
@keyframes zvMascotFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(1.5deg)}
}
@media(max-width:900px){
  .zv-showcase-mascot-float{width:170px;min-width:170px;height:150px;margin:-8px 0 -12px}
  .zv-showcase-mascot-float img{width:145px}
}
@media(max-width:700px){
  .zv-showcase-mascot-float{display:none}
}

/* R37 — compact mascot moved into hero feature-gap area */
.zv-showcase-mascot-float{display:none!important}
.zv-hero-copy{overflow:visible!important}
.zv-hero-mascot-float{
  position:absolute!important;
  right:300px;
  bottom:10px;
  width:126px;
  height:126px;
  z-index:12!important;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  animation:zvHeroMascotFloat 4.6s ease-in-out infinite;
}
.zv-hero-mascot-float::before{
  content:"";
  position:absolute;
  inset:auto 8px 10px 8px;
  height:38px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(181,91,255,.30),rgba(77,141,255,.14) 56%,transparent 78%);
  filter:blur(14px);
}
.zv-hero-mascot-float img{
  position:relative;
  z-index:2;
  width:112px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(105,75,255,.24)) drop-shadow(0 4px 12px rgba(222,78,255,.12));
}
@keyframes zvHeroMascotFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-8px) rotate(1.2deg)}
}
@media(max-width:1400px){
  .zv-hero-mascot-float{right:260px;bottom:8px;width:118px;height:118px}
  .zv-hero-mascot-float img{width:104px}
}
@media(max-width:1180px){
  .zv-hero-mascot-float{right:205px;bottom:6px;width:104px;height:104px}
  .zv-hero-mascot-float img{width:92px}
}
@media(max-width:980px){
  .zv-hero-mascot-float{display:none}
}


/* R34/R35/R36 — support character anchored exactly to hero bottom edge */
.zv-hero-support-figure{
  position:absolute;
  right:260px;
  top:auto;
  bottom:0;
  width:clamp(280px,18vw,310px);
  z-index:3;
  pointer-events:none;
  transform:none;
  filter:drop-shadow(0 22px 44px rgba(11,14,34,.48)) drop-shadow(0 0 16px rgba(132,94,255,.16));
  opacity:.98;
}
.zv-hero-support-figure::before{
  content:"";
  position:absolute;
  inset:auto 5% 4% 8%;
  height:62%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(113,70,255,.15) 0%,rgba(113,70,255,.07) 42%,transparent 74%);
  filter:blur(14px);
  z-index:-1;
}
.zv-hero-support-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  transform-origin:50% 100%;
  animation:zvHeroSupportSway 5.8s ease-in-out infinite;
}
@keyframes zvHeroSupportSway{
  0%,100%{transform:translateX(0) rotate(-.45deg) scale(1)}
  50%{transform:translateX(4px) rotate(.45deg) scale(1.012)}
}
.zv-hero-orbit-bg{right:72px;top:46%;width:270px;height:270px;opacity:.22}
.zv-hero-orbit-bg::after{transform:scale(1.18)}
@media (max-width:1440px){
  .zv-hero-support-figure{right:220px;width:285px}
}
@media (max-width:1320px){
  .zv-hero-support-figure{right:155px;width:265px}
  .zv-hero-orbit-bg{right:18px;width:240px;height:240px}
}
@media (max-width:1180px){
  .zv-hero-support-figure{right:78px;width:245px;opacity:.94}
}
@media (max-width:980px){
  .zv-hero-support-figure,
  .zv-hero-orbit-bg{display:none !important}
}


/* R38 — group feature cards, free the right slot for mascot */
.zv-hero-mini{
  width:78%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.zv-hero-mascot-float{
  right:34px!important;
  bottom:8px!important;
  width:118px!important;
  height:118px!important;
}
.zv-hero-mascot-float img{width:104px!important}
@media(max-width:1400px){
  .zv-hero-mini{width:80%}
  .zv-hero-mascot-float{right:28px!important;width:110px!important;height:110px!important}
  .zv-hero-mascot-float img{width:98px!important}
}
@media(max-width:1180px){
  .zv-hero-mini{width:82%;gap:10px}
  .zv-hero-mascot-float{right:18px!important;width:100px!important;height:100px!important}
  .zv-hero-mascot-float img{width:90px!important}
}
@media(max-width:980px){
  .zv-hero-mini{width:100%}
}