/* VIBE Landing v4 · Indigo / PULSE x UNIVERSE
   Safe visual overlay on the existing production v3 stylesheet.
   No dependency on the VIBE SDK, API formats or backend files. */
:root{
  --bg:#080b19;--bg-soft:#0f1429;--panel:rgba(17,23,47,.82);--panel-2:rgba(24,29,61,.77);
  --text:#f6f6ff;--muted:#bec3df;--line:rgba(158,157,255,.21);
  --purple:#6865f7;--purple-2:#aaa7ff;--pink:#9298ff;--violet:#4f46e5;
  --shadow:0 22px 66px rgba(3,5,17,.48);--radius:22px;
}
html{scroll-padding-top:110px}
body.v4{
  font-family:'Exo 2',system-ui,'Segoe UI',sans-serif;
  background:radial-gradient(ellipse 950px 640px at 86% 0,rgba(69,61,190,.18),transparent 70%),
             radial-gradient(ellipse 800px 500px at 6% 37%,rgba(55,60,163,.09),transparent 70%),#080b19;
  color:#f6f6ff;
}
.v4 *{scrollbar-color:#5051a6 #10152b}
.v4 :is(a,button,[role="button"]):focus-visible{outline:2px solid #beb8ff;outline-offset:5px}
.v4 ::selection{background:#5556e6;color:white}
.v4 .noise{opacity:.035}
.v4 .global-ambient{background:radial-gradient(440px 440px at var(--mx) var(--my),rgba(95,102,245,.085),transparent 68%)}
.v4 .scroll-progress i{background:linear-gradient(90deg,#4339bb,#6862f6,#c8c5ff)}
.v4 .site-header{
  top:15px;max-width:1240px;padding:12px 15px;border:1px solid rgba(164,161,255,.13);
  background:rgba(13,16,36,.72);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-radius:17px;box-shadow:0 14px 45px rgba(0,0,0,.14)
}
.v4 .site-header.is-scrolled{background:rgba(10,13,31,.93);border-color:rgba(163,162,255,.27)}
.v4 .brand{gap:11px;letter-spacing:.03em}
.v4 .brand__mark{width:41px;height:41px;border-radius:12px;background:linear-gradient(145deg,#605cf1,#302d83);box-shadow:0 8px 28px #5558f030;color:white;border:1px solid #aaa7ff58;font:800 24px 'Oxanium','Exo 2',sans-serif}
.v4 .brand__name{font:800 18px 'Oxanium','Exo 2',sans-serif;letter-spacing:-.055em;color:#fff}
.v4 .nav{gap:23px;font-size:.88rem;color:#c9cbea;font-weight:600}
.v4 .nav a:hover{color:#fff}
.v4 .button{font-family:'Exo 2',sans-serif;font-weight:700;border-radius:12px;border-color:rgba(174,169,255,.21)}
.v4 .button--primary{background:linear-gradient(135deg,#7473fa,#4e47cf);box-shadow:0 12px 40px rgba(64,51,190,.25),inset 0 1px rgba(255,255,255,.19)}
.v4 .button--primary:hover{box-shadow:0 14px 48px #6364f069}
.v4 .button--ghost{background:rgba(157,154,255,.055)}
.v4 .button--small{background:#615bea;color:white;padding:12px 16px}
.v4 .button--small:hover{background:#7873ff}
.v4 .section-kicker,.v4 .eyebrow,.v4 .hero__microcopy,.v4 .hero-card__label,.v4 .v3-tool__meta,.v4 .v3-stat>span,.v4 .v3-flow-node>span,.v4 .v4-chip{
  font-family:'Oxanium','Exo 2',sans-serif;letter-spacing:.10em;
}
.v4 h1,.v4 h2,.v4 h3,.v4 .display,.v4 .v3-section-title,.v4 .v3-display,.v4 .manifesto__line,.v4 .join__title{
  font-family:'Exo 2',sans-serif;
}
.v4 .section-kicker{color:#a59efc}
.v4 .section-kicker::before{background:#7776ff}
.v4 .v3-section-title span,.v4 .display span,.v4 .v3-display span,.v4 .manifesto__line em,.v4 .join__title span{color:#a5a1ff}
.v4 .v3-section-copy,.v4 .section-copy,.v4 .v3-lead,.v4 .v3-title-note{color:#b0b8d6}
/* HERO — deliberately retain the real dynamic featured-streamer card */
.v4 .hero{width:min(1240px,calc(100% - 30px));min-height:min(830px,100svh);padding:117px 46px 65px;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);gap:5px;align-items:center;isolation:isolate}
.v4 .hero__bg{inset:92px 0 16px;border-radius:30px;background:radial-gradient(ellipse at 72% 50%,#32308b50,transparent 48%),radial-gradient(ellipse at 13% 14%,#4244aa18,transparent 43%),linear-gradient(142deg,#13172e,#0c1024 68%,#0a0e1e);border:1px solid #8985ec38;box-shadow:inset 0 1px #b7b4ff10,0 28px 90px #0007}
.v4 .hero__floral-art,.v4 .hero__flowers,.v4 .hero__rock,.v4 .hero__orbit{display:none!important}
.v4 .hero__mist{height:65%;background:radial-gradient(ellipse at 70% 15%,#5a53ce24,transparent 68%)}
.v4 .hero__content{position:relative;z-index:3;max-width:670px}
.v4 .hero .eyebrow{display:flex;align-items:center;gap:10px;font:700 11px 'Oxanium',sans-serif;letter-spacing:.18em;color:#b8b2ff}
.v4-kicker-point{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:#8580ff;box-shadow:0 0 17px #8b84ffaa}
.v4 .hero__title{font:800 clamp(85px,11vw,168px)/.85 'Oxanium','Exo 2',sans-serif;letter-spacing:-.105em;text-shadow:0 10px 60px #403ac866;color:#f9f9ff;margin:25px 0 23px}
.v4 .hero__title .char{display:inline-block}
.v4-hero-statement{font:800 clamp(24px,2.6vw,38px)/1.14 'Exo 2',sans-serif;letter-spacing:-.055em;margin:0 0 14px;color:#f3f2ff}
.v4-hero-statement span{background:linear-gradient(100deg,#e4e1ff,#9993ff,#7775ed);background-clip:text;-webkit-background-clip:text;color:transparent}
.v4 .hero__microcopy{font-size:11px;font-weight:700;letter-spacing:.16em;color:#9a98ed;margin:11px 0}
.v4 .hero__lead{font-size:15px;line-height:1.85;color:#b5bad8;max-width:490px;margin:18px 0 24px}
.v4 .hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.v4 .hero__actions .button{padding:13px 17px}
.v4 .hero__scroll{left:50px;bottom:45px;color:#979abb}
.v4 .hero__side{height:540px;align-self:center;position:relative;z-index:2;min-width:0;display:block}
.v4-universe{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;isolation:isolate}
.v4-universe__halo{position:absolute;width:clamp(310px,35vw,470px);height:clamp(310px,35vw,470px);border-radius:50%;background:radial-gradient(circle,#514bcb3a,#4c40b716 42%,transparent 72%);filter:blur(8px)}
.v4-universe__ring{position:absolute;width:425px;height:425px;border:1px solid #9690fa36;border-radius:50%;transform:rotate(-23deg) scaleX(.96)}
.v4-universe__ring--two{width:510px;height:510px;border-color:#8783d916;transform:rotate(26deg) scaleX(.90)}
.v4-universe__core{position:relative;width:316px;height:316px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 19%,#cbc7ff 0,#8b81e9 8%,#5953bd 24%,#292865 48%,#151b3c 70%,#0b1023 100%);border:1px solid #a59ffb66;box-shadow:inset -32px -28px 55px #06071baf,0 0 70px #6259e64e,0 0 0 10px #8781ea0b;animation:v4-float 9s ease-in-out infinite}
.v4-universe__core::after{content:"";position:absolute;inset:20px;border-radius:50%;border:1px solid #d7d3ff36}
.v4-universe__core svg{position:absolute;top:95px;width:220px;color:#f5f1ff;filter:drop-shadow(0 0 10px #dbd5ff)}
.v4-universe__name{position:absolute;bottom:77px;font:800 12px 'Oxanium',sans-serif;letter-spacing:.17em;color:#eeebff}
.v4-universe__point{position:absolute;width:9px;height:9px;border-radius:50%;background:#b6acff;box-shadow:0 0 16px #afa5ff}
.v4-universe__point--one{right:33px;top:78px}
.v4-universe__point--two{left:5px;bottom:100px;width:5px;height:5px}
.v4-floating{position:absolute;z-index:3;padding:14px 17px;width:187px;border-radius:15px;border:1px solid #a59cff4a;background:linear-gradient(140deg,#262659e6,#141a34eb);box-shadow:0 18px 35px #07091d8a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:5px}
.v4-floating small{color:#a9a5ee;letter-spacing:.13em;font:700 10px 'Oxanium',sans-serif}
.v4-floating strong{font:800 13px 'Exo 2',sans-serif;color:#fff}
.v4-floating span{font-size:11px;color:#aab0d5}
.v4-floating--desktop{top:32px;right:-10px;transform:rotate(5deg)}
.v4-floating--hub{bottom:65px;left:-27px;transform:rotate(-5deg)}
.v4 .hero-card--member{position:absolute;z-index:6;right:-8px;bottom:42px;min-width:230px;border-color:#9992fb7a;background:linear-gradient(125deg,#2b2b65ec,#141a34f2);box-shadow:0 16px 48px #0b0c28cc,0 0 25px #8276ff2c}
.v4 .featured-live-dot.is-live{background:#ff535f;box-shadow:0 0 15px #ff535f80}
@keyframes v4-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* Real platform sections, not mock data */
.v4 .v3-pulse{padding-top:90px}
.v4 .v3-stats{border-color:#8f89ee37}
.v4 .v3-stat{background:linear-gradient(160deg,#1a2040,#11152c);border:1px solid #8d89eb23;border-radius:17px}
.v4 .v3-stat b{font-family:'Oxanium','Exo 2',sans-serif;font-variant-numeric:tabular-nums;color:#fafaff}
.v4 .v3-stat:hover{border-color:#8880f963}
.v4 .manifesto__line{font-weight:800;letter-spacing:-.045em}
.v4 .marquee{border-color:#8f8cf63b;color:#a5a9e2}
.v4 .marquee__track i{color:#8b86f4}
.v4 .v3-tool,.v4 .v3-flow-node,.v4 .v3-trust__grid>div{background:linear-gradient(145deg,#171b37,#10152c);border:1px solid #8585dc2d;border-radius:20px;box-shadow:inset 0 1px #c9c6ff07}
.v4 .v3-tool:hover,.v4 .v3-flow-node:hover{border-color:#9c93f994;box-shadow:0 16px 38px #080b2199}
.v4 .v3-tool h3,.v4 .v3-flow-node strong{font-family:'Oxanium','Exo 2',sans-serif;letter-spacing:-.01em}
.v4 .v3-flow-arrow{color:#8580ff}
.v4 .streamer-card{background:#151a34;border-color:#8d8adc38;border-radius:19px;overflow:hidden}
.v4 .streamer-card:hover{border-color:#9992f6c9;box-shadow:0 12px 45px #4a3ddb1d}
.v4 .streamer-card__status.is-live{background:#ff455e!important;border-color:#ff7790!important;color:#fff!important}
.v4 .modal__dialog{background:#111731;border:1px solid #8582ed55}
.v4 .modal__body{color:#e9eafb}
.v4 .join{border-radius:28px}
.v4 .join__glow{background:radial-gradient(ellipse at 45% 35%,#6663f359,transparent 68%)}
.v4 .footer{border-color:#8681e636}
/* audience + live filters have no SDK dependency */
.v4-audiences,.v4-stream-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:26px 0 22px}
.v4-chip{font:700 11px 'Exo 2',sans-serif;letter-spacing:.01em;color:#c7c9e5;background:#111830;border:1px solid #8585d854;padding:11px 17px;border-radius:100px;cursor:pointer;transition:.18s ease}
.v4-chip:hover{border-color:#b1aafa;color:#fff}
.v4-chip.is-active{background:#5c58db;color:#fff;border-color:#a49cfc;box-shadow:0 6px 22px #5551ce4a}
.v4-audiences__caption,.v4-stream-toolbar__note{margin-left:auto;color:#9aa5c6;font:500 12px 'Exo 2',sans-serif}
.v4-live-empty{padding:18px 21px;border:1px solid #9290d34d;border-radius:13px;background:#151931;color:#bfc4dd;font-size:14px}
.v4 [hidden]{display:none!important}
.v4 .v3-tools-grid>article[hidden],.v4 .streamers__grid>article[hidden]{display:none!important}
.v4-menu-toggle{display:none;border:1px solid #9290ee55;background:#191e40;color:white;border-radius:11px;width:44px;height:42px;padding:10px;flex-direction:column;align-items:center;justify-content:space-around;cursor:pointer}
.v4-menu-toggle span{display:block;width:21px;height:2px;border-radius:2px;background:#e0dcff}
/* Tablet / mobile */
@media(max-width:1120px){
 .v4 .site-header .nav{gap:13px;font-size:12px}
 .v4 .hero{padding:120px 29px 60px;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr)}
 .v4 .hero__side{transform:scale(.89);transform-origin:center}
 .v4 .hero__title{font-size:clamp(82px,11vw,135px)}
 .v4-floating--desktop{right:0}
}
@media(max-width:850px){
 .v4 .hero{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:unset;padding:139px 24px 64px;gap:0}
 .v4 .hero__bg{inset:88px 0 10px}
 .v4 .hero__title{font-size:clamp(90px,15vw,135px)}
 .v4 .hero__side{height:420px;width:min(100%,470px);margin:4px auto 0;transform:scale(.83)}
 .v4 .hero__scroll{display:none}
 .v4 .site-header .nav{display:none}
 .v4 .site-header.is-menu-open .nav{display:flex!important;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px;background:#11172ff5;border:1px solid #928df262;border-radius:15px;box-shadow:0 20px 50px #070913c9}
 .v4 .site-header.is-menu-open .nav a{display:block;padding:13px 14px;font-size:14px}
 .v4-menu-toggle{display:flex}
 .v4-audiences__caption,.v4-stream-toolbar__note{flex-basis:100%;margin:4px 0 0}
}
@media(max-width:600px){
 .v4 .site-header{top:9px!important;width:calc(100% - 20px)!important;left:10px!important;right:10px!important;padding:9px!important}
 .v4 .brand__mark{width:34px;height:34px;font-size:20px;border-radius:9px}
 .v4 .brand__name{font-size:15px}
 .v4 .site-header .button--small{min-height:36px!important;padding:8px 10px!important;font-size:12px}
 .v4 .hero{padding:120px 18px 27px;width:calc(100% - 18px)}
 .v4 .hero__bg{inset:85px 0 12px;border-radius:23px}
 .v4 .hero__title{font-size:clamp(88px,22vw,126px);margin:23px 0 20px}
 .v4-hero-statement{font-size:clamp(22px,7.2vw,34px)}
 .v4 .hero__lead{font-size:13px;line-height:1.8;margin-bottom:20px}
 .v4 .hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .v4 .hero__actions .button{min-width:0!important;padding:12px 6px;font-size:11px;white-space:normal;text-align:center}
 .v4 .hero__actions .button:last-child{grid-column:span 2}
 .v4 .hero__side{height:342px;width:100%;margin:-15px auto 0;transform:scale(.66);transform-origin:top center}
 .v4 .v3-pulse{padding-top:75px}
 .v4 .section{width:calc(100% - 28px)}
 .v4 .v3-stats{gap:9px}
 .v4 .v3-stat{padding:13px}
 .v4 .v4-chip{font-size:11px;padding:10px 12px}
 .v4 .v3-flow-node{min-width:0}
 .v4 .footer{padding-bottom:40px}
}
@media(prefers-reduced-motion:reduce){
 .v4-universe__core{animation:none!important}
 .v4 :is(.v4-chip,.streamer-card,.v3-tool){transition:none!important}
}
/* Accessibility regression guard: original v3 letters are opacity:0 before rise. */
.v4 .hero__title .char{opacity:1!important;transform:none!important;animation:none!important}
@media(max-width:850px){
 .v4 .site-header{transform:none!important;left:14px!important;right:14px!important;width:calc(100% - 28px)!important}
 .v4 .hero{overflow:hidden}
}
@media(max-width:600px){
 .v4 .site-header{left:10px!important;right:10px!important;width:calc(100% - 20px)!important}
}