/* SonyBots landing — isolated (prefix sb-) */
.sb{--ink:#0d0f1a;--ink2:#161a2b;--paper:#f4efe4;--paper2:#e9e2d2;--lime:#c8ff3e;--coral:#ff5a3c;--sky:#6ea8ff;--mut:#9aa1b8;--mutd:#575c70;
margin:0;background:var(--ink);color:#f4efe4;font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
.sb *{box-sizing:border-box}
.sb a{color:inherit;text-decoration:none}
.sb h1,.sb h2,.sb h3,.sb p{margin:0}
.sb :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.sb-skip{position:absolute;left:12px;top:-60px;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:8px;z-index:3000;font-weight:700}
.sb-skip:focus{top:12px}
.sb-mono{font-family:"Space Mono",ui-monospace,monospace}
.sb-wrap{max-width:1200px;margin:auto;padding:0 24px}
/* nav */
.sb-nav{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(13,15,26,.8);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.sb-nav .sb-wrap{display:flex;align-items:center;gap:28px;height:72px}
.sb-logo{font-weight:800;font-size:25px;letter-spacing:-.04em;display:flex;align-items:center;gap:8px}
.sb-logo b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px 9px 9px 2px;background:var(--lime);color:var(--ink);font-size:18px}
.sb-links{display:flex;gap:4px;margin-left:auto}
.sb-links a{padding:9px 14px;border-radius:99px;color:var(--mut);font-weight:600;font-size:15px}
.sb-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.sb-acts{display:flex;gap:8px;align-items:center}
.sb-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:99px;font-weight:700;font-size:15px;border:2px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;font-family:inherit}
.sb-btn i{transition:transform .2s}
.sb-btn:hover i{transform:translateX(4px)}
.sb-btn-lime{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--coral)}
.sb-btn-lime:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--coral)}
.sb-btn-line{border-color:rgba(255,255,255,.25);color:#fff}
.sb-btn-line:hover{border-color:var(--lime);color:var(--lime)}
.sb-btn-dark{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--coral)}
.sb-btn-dark:hover{transform:translate(-2px,-2px)}
.sb-burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:2px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:22px;cursor:pointer}
/* hero */
.sb-hero{position:relative;padding:150px 0 90px;background:radial-gradient(700px 500px at 85% 20%,rgba(var(--coral-rgb),.25),transparent 65%),radial-gradient(600px 500px at 0 90%,rgba(var(--lime-rgb),.12),transparent 65%),var(--ink)}
.sb-hero .sb-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.sb-tag{display:inline-flex;gap:10px;align-items:center;font-size:13px;color:var(--lime);border:1px dashed rgba(var(--lime-rgb),.5);padding:6px 14px;border-radius:99px}
.sb-tag i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:sbp 1.6s infinite}
@keyframes sbp{50%{opacity:.25;transform:scale(.6)}}
.sb-hero h1{font-size:clamp(46px,7.2vw,98px);line-height:.92;letter-spacing:-.055em;font-weight:800;margin:24px 0}
.sb-hero h1 em{font-style:normal;color:var(--ink);background:var(--lime);padding:0 .12em;border-radius:.14em;display:inline-block;transform:rotate(-2deg)}
.sb-hero h1 u{text-decoration:none;color:var(--coral)}
.sb-lead{font-size:19px;color:#c3c8da;max-width:560px;margin-bottom:32px}
.sb-cta{display:flex;flex-wrap:wrap;gap:14px}
.sb-chat{background:var(--ink2);border:2px solid rgba(255,255,255,.14);border-radius:24px;padding:18px;box-shadow:10px 10px 0 var(--coral);transform:rotate(1.5deg)}
.sb-chat-h{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);padding:2px 4px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.sb-chat-h span:last-child{color:var(--lime)}
.sb-msgs{display:grid;gap:10px;padding:16px 0 4px;font-size:14px}
.sb-m{max-width:88%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.07);opacity:0;animation:sbin .5s forwards}
.sb-m small{display:block;font-size:11px;color:var(--mut);margin-bottom:2px}
.sb-m.bot{justify-self:end;background:var(--lime);color:var(--ink);border-radius:16px 16px 4px 16px}
.sb-m.bot small{color:#44510f}
.sb-m:nth-child(1){animation-delay:.3s}.sb-m:nth-child(2){animation-delay:1s}.sb-m:nth-child(3){animation-delay:1.7s}.sb-m:nth-child(4){animation-delay:2.4s}.sb-m:nth-child(5){animation-delay:3.1s}
@keyframes sbin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* marquee */
.sb-mq{background:var(--lime);color:var(--ink);overflow:hidden;border-block:2px solid var(--ink);transform:rotate(-1deg);margin:-14px -10px 0;position:relative;z-index:2}
.sb-mq div{display:flex;gap:40px;width:max-content;padding:14px 0;font-weight:800;font-size:22px;letter-spacing:-.02em;animation:sbmq 30s linear infinite;text-transform:uppercase}
.sb-mq span::after{content:"/";margin-left:40px;color:var(--coral)}
@keyframes sbmq{to{transform:translateX(-50%)}}
/* sections */
.sb-sec{padding:110px 0}
.sb-paper{background:var(--paper);color:var(--ink)}
.sb-eye{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:700}
.sb-h2{font-size:clamp(36px,5vw,68px);line-height:.98;letter-spacing:-.05em;font-weight:800;margin:14px 0 20px;max-width:880px}
.sb-p{font-size:18px;max-width:600px;color:var(--mutd)}
.sb-dark .sb-p{color:var(--mut)}
/* bento */
.sb-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:56px}
.sb-b{border:2px solid var(--ink);border-radius:26px;padding:28px;background:#fff8;position:relative;transition:transform .25s}
.sb-b:hover{transform:translateY(-6px) rotate(-.5deg)}
.sb-b i.ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--lime);font-size:26px;margin-bottom:22px}
.sb-b h3{font-size:26px;letter-spacing:-.03em;margin-bottom:8px;line-height:1.05}
.sb-b p{color:#3b3f52;font-size:16px}
.sb-b1{grid-column:span 4;background:var(--lime)}
.sb-b2{grid-column:span 2;background:var(--ink);color:var(--paper)}
.sb-b2 p{color:var(--mut)}.sb-b2 i.ic{background:var(--coral);color:var(--ink)}
.sb-b3,.sb-b4{grid-column:span 3}
.sb-b4{background:var(--coral)}
.sb-b4 p{color:#2a0c05}.sb-b4 i.ic{color:#fff}
.sb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sb-pills span{border:2px solid var(--ink);border-radius:99px;padding:4px 14px;font-size:14px;font-weight:600}
/* steps */
.sb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;counter-reset:s}
.sb-step{padding:30px 28px 30px 0;border-top:2px solid rgba(255,255,255,.2);position:relative}
.sb-step::before{counter-increment:s;content:"0" counter(s);font-family:"Space Mono",monospace;color:var(--lime);font-size:14px}
.sb-step h3{font-size:30px;letter-spacing:-.04em;margin:10px 0}
.sb-step p{color:var(--mut)}
.sb-step::after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--lime)}
.sb-step:nth-child(2){padding-left:28px}.sb-step:nth-child(3){padding-left:28px}
/* games */
.sb-games{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.sb-g{border-radius:30px;padding:36px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;border:2px solid var(--ink);overflow:hidden;position:relative}
.sb-g h3{font-size:44px;letter-spacing:-.05em;line-height:1}
.sb-g p{max-width:380px;margin-top:12px}
.sb-g .big{position:absolute;right:-10px;top:-30px;font-size:200px;font-weight:800;letter-spacing:-.08em;opacity:.12;line-height:1;pointer-events:none}
.sb-gt{background:var(--sky)}
.sb-gb{background:var(--ink);color:var(--paper)}
.sb-gb .big{color:var(--lime);opacity:.2}
.sb-balls{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.sb-balls b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-family:"Space Mono",monospace;font-size:15px;animation:sbf 3s ease-in-out infinite}
.sb-balls b:nth-child(2n){animation-delay:.5s;background:var(--coral)}
.sb-balls b:nth-child(3n){animation-delay:1s;background:var(--paper)}
@keyframes sbf{50%{transform:translateY(-8px)}}
.sb-q{background:var(--ink);color:var(--paper);border-radius:14px;padding:12px 16px;margin-top:22px;font-size:14px;max-width:340px}
/* rank */
.sb-rank{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.sb-board{background:var(--ink2);border:2px solid rgba(255,255,255,.14);border-radius:26px;padding:12px}
.sb-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;font-weight:700}
.sb-row:first-child{background:var(--lime);color:var(--ink)}
.sb-row span:first-child{font-family:"Space Mono",monospace;width:28px}
.sb-row .bar{flex:1;height:8px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.sb-row:first-child .bar{background:rgba(13,15,26,.2)}
.sb-row .bar i{display:block;height:100%;background:var(--coral);border-radius:9px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sb-in .bar i{transform:scaleX(var(--w))}
/* final */
.sb-final{padding:120px 0;text-align:center;background:var(--coral);color:var(--ink);position:relative;overflow:hidden}
.sb-final h2{font-size:clamp(44px,8vw,120px);line-height:.9;letter-spacing:-.06em;font-weight:800;max-width:1000px;margin:0 auto 32px}
.sb-final p{font-size:19px;max-width:520px;margin:0 auto 34px}
.sb-final .sb-cta{justify-content:center}
.sb-foot{background:var(--ink);padding:40px 0;color:var(--mut);font-size:14px}
.sb-foot .sb-wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.sb-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.sb-foot a:hover{color:var(--lime)}
/* Content remains visible without JavaScript; motion is decorative only. */
.sb-rv{opacity:1;transform:none}
@media(max-width:900px){
.sb-links,.sb-acts{display:none}.sb-burger{display:block}
.sb-nav.open .sb-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:var(--ink);padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.sb-nav.open .sb-acts{display:flex;position:absolute;top:calc(72px + 232px);left:24px}
.sb-hero .sb-wrap,.sb-rank,.sb-games{grid-template-columns:1fr}
.sb-bento{grid-template-columns:1fr}.sb-b1,.sb-b2,.sb-b3,.sb-b4{grid-column:auto}
.sb-steps{grid-template-columns:1fr}.sb-step,.sb-step:nth-child(2),.sb-step:nth-child(3){padding:26px 0}
.sb-sec{padding:80px 0}.sb-hero{padding-top:120px}
.sb-chat{transform:none;box-shadow:6px 6px 0 var(--coral)}
}
@media(prefers-reduced-motion:reduce){
.sb *,.sb *::before,.sb *::after{animation:none!important;transition:none!important}
.sb-m,.sb-rv{opacity:1;transform:none}.sb-row .bar i{transform:scaleX(var(--w))}
}