:root{
  --bg:#08080c; --panel:#101018; --muted:#a7a7b4; --text:#f2f2f6;
  --primary:#ffb300; --accent:#ff7a00; --ring:rgba(255,179,0,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,8,12,.6);backdrop-filter:blur(12px);border-bottom:1px solid #1a1a26}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 3px rgba(255,179,0,.07)}
.menu{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#0e0e14;font-weight:800;box-shadow:0 14px 28px var(--ring);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:#151524;border:1px solid #23233a;color:var(--text);box-shadow:none}
/* hero */
.hero{position:relative;padding:90px 0 40px;border-bottom:1px solid #1a1a26;overflow:hidden}
h1{font-size:54px;line-height:1.05;margin:0 0 12px}
.lead{font-size:18px;color:var(--muted)}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.card{background:var(--panel);border:1px solid #1a1a26;border-radius:16px;padding:16px;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.code{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#0e0e15;border:1px solid #24243a;border-radius:12px;padding:10px 12px;word-break:break-all}
.copy{padding:8px 12px;border-radius:10px;background:#151524;border:1px solid #24243a;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpi{background:#0d0d15;border:1px solid #1f1f2d;border-radius:12px;padding:12px;text-align:center}
/* sections */
.section{padding:70px 0;border-bottom:1px solid #1a1a26}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.list li{margin:8px 0;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.footer{padding:28px 0;color:var(--muted);font-size:14px}
/* wow effects */
.reveal{opacity:0;transform:translateY(16px);transition:all .7s ease}
.reveal.show{opacity:1;transform:none}
.logo-float{animation:float 6s ease-in-out infinite}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
#stars{position:absolute;inset:0;height:420px}
.chart{width:100%;height:420px;border:0;border-radius:12px;background:#0f0f15;border:1px solid #212133}
/* responsive */
@media(max-width:950px){.grid{grid-template-columns:1fr}.menu{display:none}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:620px){h1{font-size:36px}.kpis{grid-template-columns:1fr}}


/* ===== Bobu pro add-ons (non-breaking) ===== */
:root{ --brand-1:#22ffa8; --brand-2:#00cc88; --flare-1:#ffb300; --flare-2:#ff7a00; --bg-1:#0a0a12; }
html,body{ background:var(--bg-1); }
#bg-grid{ position:fixed; inset:0; z-index:-2; }

/* Header & Nav */
#site-header{ backdrop-filter:blur(10px) saturate(120%); background:linear-gradient(180deg,rgba(12,12,18,.84),rgba(12,12,18,.64)); border-bottom:1px solid #171726; transition:transform .35s ease }
#site-header.hide{ transform:translateY(-100%) }
#nav a{ position:relative; padding:.6rem .9rem; font-weight:600; letter-spacing:.2px; display:inline-block }
#nav a:after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--flare-1),var(--flare-2)); transition:transform .35s ease }
#nav a:hover:after{ transform:scaleX(1) }
#nav a{ animation:navPop .6s ease both; animation-delay:calc(var(--i,0)*85ms) }
@keyframes navPop{ 0%{opacity:0; transform:translateY(6px) scale(.98)} 100%{opacity:1; transform:translateY(0) scale(1)} }

/* Logo micro-anim */
.brand img{ filter:drop-shadow(0 10px 22px rgba(255,122,0,.16)); transition:transform .45s ease }
.brand:hover img{ transform:translateY(-2px) rotate(-1deg) scale(1.02) }
.logo-glow{ animation:logoSheen 3.2s linear infinite }
@keyframes logoSheen{ 50%{filter:drop-shadow(0 0 26px rgba(255,179,0,.55))} }

/* Live ribbon — extra animated */
.live-ribbon{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:70;
  background:linear-gradient(180deg, var(--brand-1), var(--brand-2)); color:#03120e; font-weight:900;
  padding:.6rem .9rem; border-top-left-radius:12px; border-bottom-left-radius:12px;
  box-shadow:0 12px 36px rgba(0,255,160,.22);
  writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:.3px;
  animation:floaty 2.2s ease-in-out infinite, ribbonPulse 4.2s ease-in-out infinite; }
@keyframes floaty{ 50%{ transform:translateY(-55%) } }
@keyframes ribbonPulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.3) } }
.live-ribbon:after{ content:""; position:absolute; inset:0; background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.2),transparent 30%); mix-blend-mode:overlay; animation:ribbonSheen 6s linear infinite; pointer-events:none; border-top-left-radius:12px; border-bottom-left-radius:12px }
@keyframes ribbonSheen{ to{ transform:rotate(1turn) } }

/* Sections */
.timeline{ position:relative; margin:34px 0; padding-left:20px }
.timeline:before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--flare-1),transparent) }
.timeline .item{ position:relative; margin:22px 0 22px 22px; padding:14px 16px; border:1px solid #1f1f2d; border-radius:14px; background:linear-gradient(180deg,rgba(14,14,24,.88),rgba(9,9,16,.88)); box-shadow:0 8px 20px rgba(0,0,0,.22) }
.timeline .item:before{ content:""; position:absolute; left:-18px; top:12px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--flare-1), var(--flare-2)) }
.prize-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.prize{ border:1px solid #23233a; border-radius:16px; padding:16px; background:linear-gradient(180deg,rgba(20,20,30,.92),rgba(10,10,16,.92)) }
.prize .big{ font-size:28px; font-weight:800; margin-bottom:8px }