:root{--bg:#050707;--bg2:#08100f;--card:#0b1010;--line:rgba(255,255,255,.09);--text:#f5f8f7;--muted:#8f9a99;--accent:#14d7c1;--accent2:#09aa98;--gold:#eebd3c;--red:#ff6b6b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#0c1716,#050707 34%);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.nav{height:74px;position:sticky;top:0;z-index:30;background:rgba(5,7,7,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:800}.brand img{height:30px}.links{display:flex;align-items:center;gap:25px}.links a{text-decoration:none;color:#aab4b3;font-size:14px}.links a:hover,.links a.active{color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:9px;text-decoration:none;font-weight:800;font-size:14px;border:1px solid var(--line);background:rgba(255,255,255,.025)}.btn.primary{background:var(--accent);color:#03110f;border-color:transparent}.hero{padding:105px 0 60px;text-align:center;overflow:hidden}.pill{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(20,215,193,.22);background:rgba(20,215,193,.06);color:#78eadc;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px var(--accent)}h1{font-size:clamp(46px,7vw,82px);line-height:.98;letter-spacing:-.055em;margin:24px auto;max-width:940px}.grad{background:linear-gradient(100deg,#fff 25%,#55e7d6 80%);background-clip:text;-webkit-background-clip:text;color:transparent}.lead{font-size:18px;color:#a6b0af;max-width:720px;margin:auto}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}.meta{font-size:12px;color:#65706f;margin-top:12px}.shot{max-width:1180px;margin:60px auto 0;padding:1px;border-radius:15px;background:linear-gradient(120deg,rgba(20,215,193,.45),rgba(255,255,255,.05),rgba(20,215,193,.15));box-shadow:0 40px 100px #000}.shot img{display:block;width:100%;border-radius:14px}section{padding:95px 0;border-top:1px solid rgba(255,255,255,.055)}.kicker{font-size:11px;color:var(--accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.head{max-width:700px;margin-bottom:40px}.head h2,.pagehead h1{font-size:clamp(34px,4.5vw,54px);letter-spacing:-.045em;line-height:1.05;margin:10px 0 14px}.head p,.pagehead p{color:var(--muted);font-size:17px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:13px;padding:25px}.card h3{margin:14px 0 7px}.card p{color:var(--muted);font-size:14px;margin:0}.ico{width:39px;height:39px;display:grid;place-items:center;border:1px solid rgba(20,215,193,.18);background:rgba(20,215,193,.08);border-radius:9px;color:var(--accent);font-size:11px;font-weight:900}.pro{font-size:9px;color:var(--gold);border:1px solid rgba(238,189,60,.25);background:rgba(238,189,60,.07);padding:2px 5px;border-radius:4px;vertical-align:2px}.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}.step{padding:27px;background:var(--card);border-right:1px solid var(--line);min-height:190px}.step:last-child{border:0}.step b{color:var(--accent);font-size:12px}.step h3{margin:30px 0 7px}.step p{font-size:14px;color:var(--muted)}.pagehead{padding:85px 0 55px;border-bottom:1px solid var(--line)}.pagehead h1{max-width:780px}.pagehead p{max-width:700px}.docs-layout{display:grid;grid-template-columns:260px minmax(0,760px);gap:60px;align-items:start}.sidebar{position:sticky;top:100px}.sidebar strong{display:block;color:#64706f;font-size:10px;letter-spacing:.12em;margin:22px 0 7px}.sidebar a{display:block;text-decoration:none;color:#8f9a99;font-size:14px;padding:7px 0}.sidebar a:hover,.sidebar a.active{color:var(--accent)}.article h2{font-size:32px;letter-spacing:-.03em;margin:0 0 12px}.article h3{margin-top:38px}.article p,.article li{color:#9ba5a4}.article code{background:#111817;border:1px solid var(--line);padding:2px 6px;border-radius:5px}.note{padding:17px 19px;border:1px solid rgba(20,215,193,.18);background:rgba(20,215,193,.05);border-radius:10px;margin:24px 0;color:#b5c2c0}.guidecards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.guidecards a{text-decoration:none}.faq details{border-top:1px solid var(--line);padding:20px 0}.faq summary{cursor:pointer;font-weight:750}.faq details p{color:var(--muted);max-width:800px}.release{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:30px 0;border-top:1px solid var(--line)}.release .tag{color:var(--accent);font-weight:900}.release ul{color:var(--muted)}.cta{text-align:center}.ctabox{border:1px solid rgba(20,215,193,.18);background:radial-gradient(circle at 50% 0,rgba(20,215,193,.11),transparent 55%),#080b0b;border-radius:18px;padding:65px 30px}.footer{padding:38px 0;border-top:1px solid var(--line);color:#687372;font-size:13px}.footer .wrap{display:flex;justify-content:space-between;gap:20px}.footlinks{display:flex;gap:18px}.footlinks a{text-decoration:none}.mobilebtn{display:none}@media(max-width:850px){.links a:not(.btn){display:none}.grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.docs-layout{grid-template-columns:1fr}.sidebar{position:static;border-bottom:1px solid var(--line);padding-bottom:25px}.guidecards{grid-template-columns:1fr}.release{grid-template-columns:1fr;gap:5px}.footer .wrap{flex-direction:column}.hero{padding-top:75px}}@media(max-width:500px){.brand span{display:none}.wrap{width:calc(100% - 28px)}h1{font-size:44px}.actions .btn{width:100%}.lead{font-size:16px}}
/* V2 product showcase */
.btn.big{padding:15px 22px;font-size:15px}.hero-shot{position:relative}.hero-shot:after{content:"VIVARA BROADCAST · CONTROL ROOM";position:absolute;left:18px;bottom:-34px;color:#53605e;font-size:10px;letter-spacing:.16em}.trustbar{padding:0;border-top:0}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}.mini-grid div{padding:18px 22px;border-right:1px solid var(--line);display:flex;gap:10px;align-items:center}.mini-grid div:last-child{border:0}.mini-grid b{font-size:11px;color:var(--accent);letter-spacing:.1em}.mini-grid span{font-size:12px;color:var(--muted)}.showcase{display:grid;grid-template-columns:.72fr 1.28fr;gap:55px;align-items:center;padding:45px 0 80px}.showcase.flip{grid-template-columns:1.28fr .72fr}.showcase.flip .copy{order:2}.showcase.flip .visual{order:1}.showcase h3{font-size:38px;line-height:1.05;letter-spacing:-.04em;margin:12px 0 15px}.showcase p{color:var(--muted);font-size:16px}.eyebrow{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.eyebrow i{font-style:normal;color:var(--gold)}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.chips span{font-size:11px;color:#9ca8a6;border:1px solid var(--line);border-radius:999px;padding:6px 9px}.visual{border:1px solid rgba(20,215,193,.18);border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.35);background:#080b0b}.visual img{display:block;width:100%}.darkband{background:#070a0a}.center{text-align:center;margin-left:auto;margin-right:auto}.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px}.flowbox{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:23px;min-height:135px}.flowbox b{color:var(--accent);font-size:11px}.flowbox strong{display:block;font-size:18px;margin:18px 0 5px}.flowbox span{font-size:12px;color:var(--muted)}.flow em{font-style:normal;color:#3e4b49}.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mosaic figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}.mosaic .wide{grid-column:1/-1}.mosaic img{width:100%;display:block}.mosaic figcaption{padding:17px 19px;display:flex;justify-content:space-between;gap:20px}.mosaic figcaption span{color:var(--muted);font-size:13px}.prosection{padding-top:25px}.probox{border:1px solid rgba(238,189,60,.18);background:radial-gradient(circle at 0 0,rgba(238,189,60,.08),transparent 45%),#090a09;border-radius:18px;padding:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px}.probox h2{font-size:42px;line-height:1.05;letter-spacing:-.04em;margin:10px 0 15px}.probox p{color:var(--muted)}.gold{color:var(--gold)}.prolist{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}.prolist span{border:1px solid rgba(238,189,60,.13);background:rgba(238,189,60,.035);padding:13px;border-radius:9px;font-size:13px}.feature-stack{display:flex;flex-direction:column;gap:90px}.feature-row{display:grid;grid-template-columns:.65fr 1.35fr;gap:50px;align-items:center}.feature-row.reverse{grid-template-columns:1.35fr .65fr}.feature-row.reverse>div{order:2}.feature-row.reverse>img{order:1}.feature-row h2{font-size:36px;line-height:1.05;letter-spacing:-.04em;margin:10px 0 14px}.feature-row p{color:var(--muted)}.feature-row img{width:100%;border:1px solid rgba(20,215,193,.16);border-radius:13px;box-shadow:0 22px 60px rgba(0,0,0,.32)}.visual-docs .docstep{scroll-margin-top:100px;padding:0 0 70px;margin:0 0 65px;border-bottom:1px solid var(--line)}.docstep>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(20,215,193,.08);border:1px solid rgba(20,215,193,.18);color:var(--accent);font-size:11px;font-weight:900}.docstep h2{margin-top:14px}.docstep img{display:block;width:100%;margin-top:25px;border:1px solid var(--line);border-radius:12px}.docstep .btn{margin-top:12px}
@media(max-width:900px){.showcase,.showcase.flip,.feature-row,.feature-row.reverse,.probox{grid-template-columns:1fr}.showcase.flip .copy,.showcase.flip .visual,.feature-row.reverse>div,.feature-row.reverse>img{order:initial}.flow{grid-template-columns:1fr}.flow em{transform:rotate(90deg);text-align:center}.mini-grid{grid-template-columns:1fr 1fr}.mini-grid div:nth-child(2){border-right:0}.mini-grid div:nth-child(-n+2){border-bottom:1px solid var(--line)}.mosaic{grid-template-columns:1fr}.mosaic .wide{grid-column:auto}.showcase h3,.feature-row h2{font-size:30px}.probox{padding:30px}.probox h2{font-size:34px}}
@media(max-width:560px){.mini-grid{grid-template-columns:1fr}.mini-grid div{border-right:0;border-bottom:1px solid var(--line)!important}.mini-grid div:last-child{border-bottom:0!important}.prolist{grid-template-columns:1fr}.mosaic figcaption{flex-direction:column;gap:4px}.showcase{gap:25px;padding-bottom:55px}}

/* Real broadcast output showcase */
.output-section{padding:96px 0;border-top:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 50% 0,rgba(108,92,231,.09),transparent 38%)}
.output-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:38px}
.output-card{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.025);box-shadow:0 20px 60px rgba(0,0,0,.24)}
.output-card.output-wide{grid-column:1/-1}
.output-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#050505}
.output-card.output-sponsor img{object-fit:contain;padding:7%;background:#f4f4f2}
.output-card figcaption{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:18px 20px 20px;border-top:1px solid rgba(255,255,255,.06)}
.output-card figcaption b{font-size:15px;white-space:nowrap}
.output-card figcaption span{max-width:520px;color:var(--muted,#9b9ba5);font-size:13px;line-height:1.55;text-align:right}
@media(max-width:800px){.output-section{padding:64px 0}.output-grid{grid-template-columns:1fr}.output-card.output-wide{grid-column:auto}.output-card figcaption{display:block}.output-card figcaption span{display:block;margin-top:7px;text-align:left}}

/* Bravo HUD section + pricing polish */
.hudgrid{margin-top:34px}
.hudgrid .card p{font-size:14px;line-height:1.55}
.hudsection .shot{margin-top:0}
.faq details a,.note a{color:var(--accent)}
.probox .btn{margin-top:18px}
.docstep img+img{margin-top:16px}
@media(max-width:850px){.hudgrid{grid-template-columns:1fr}}