@font-face{font-family:Inter;font-weight:400;src:url(../assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;src:url(../assets/fonts/inter-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:600;src:url(../assets/fonts/inter-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:800;src:url(../assets/fonts/inter-800.woff2) format("woff2");font-display:swap}
:root{--blue:#1FDAFF;--orange:#FD7D04;--dark:#131415;--panel:#1b1d1f;--line:#2b2e31;--mute:#9aa3a8;--navy:#032B78}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark);color:#fff;font-family:Inter,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.gridbg{background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px}
.btn{display:inline-block;font-weight:800;font-size:16px;padding:16px 30px;border-radius:6px;background:var(--orange);color:var(--dark);transition:.15s}
.btn:hover{background:#ff9230;transform:translateY(-2px)}
.btn.sm{font-size:14px;padding:10px 18px}
.btn.ghost{background:transparent;color:#fff;border:1px solid #4a5054}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:transparent}
.brand{display:flex;align-items:center;gap:14px}
.brand img.r{width:auto;height:30px}.brand img.g{width:auto;height:34px}.brand .x{color:var(--orange);font-weight:800}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.eyebrow.o{color:var(--orange)}
h2{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-top:12px}

/* hero: full-bleed Riot visual with scrim */
.hero{position:relative;min-height:min(100vh,820px);display:flex;flex-direction:column;overflow:hidden;
 background:radial-gradient(900px 600px at 80% 20%,rgba(31,218,255,.28),transparent 65%),radial-gradient(700px 500px at 0% 100%,rgba(3,43,120,.7),transparent 70%),var(--dark)}
.hero .art{position:absolute;inset:0;border:1.5px dashed #5a6166;margin:84px 24px 24px;border-radius:14px;display:flex;align-items:flex-end;justify-content:flex-end;padding:18px;
 font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7d868b;font-weight:600;
 background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 14px,transparent 14px 28px)}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,20,21,.94) 0%,rgba(19,20,21,.78) 45%,rgba(19,20,21,.4) 75%,rgba(19,20,21,.15) 100%)}
.hero nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;height:84px;max-width:1140px;width:100%;margin:0 auto;padding:0 24px}
.hero .copy{position:relative;z-index:3;margin:auto 0;padding-bottom:40px}
.hero .copy .wrap{width:100%}
.pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(253,125,4,.55);border-radius:99px;padding:6px 14px;margin-bottom:24px}
h1{font-size:clamp(42px,6.6vw,92px);line-height:.95;letter-spacing:-.035em;font-weight:800;max-width:1000px}
h1 em{font-style:normal;color:#fff}
.hero .row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.trail{position:relative;z-index:3;height:3px;background:linear-gradient(90deg,var(--blue),var(--navy) 45%,var(--orange) 80%,transparent)}

/* steps */
.steps{padding:80px 0 90px}
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.flow::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.node{text-align:center;position:relative}
.ic{width:92px;height:92px;margin:0 auto 20px;border-radius:50%;background:var(--panel);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.node:nth-child(2) .ic{border-color:#6fa6c8}
.node:nth-child(3) .ic{border-color:var(--orange)}
.ic svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.node b{display:block;font-size:22px;font-weight:800;letter-spacing:-.01em}
.node span{color:var(--mute);font-size:15px}

/* titles */
.titles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.t{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1.5px dashed #5a6166;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
 background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px),linear-gradient(180deg,#1b1d1f,#101112)}
.t .slotl{position:absolute;top:16px;left:18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7d868b;font-weight:600}
.t h3{font-size:32px;font-weight:800;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;background:rgba(31,218,255,.12);color:var(--blue);border:1px solid rgba(31,218,255,.35)}
.t.v{border-bottom:3px solid var(--orange)}.t.l{border-bottom:3px solid var(--blue)}
.inside{padding:20px 0 100px}

/* numbers */
.nums{background:#0f1011;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:70px 0}
.nums .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.n .big{font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.03em;color:var(--blue);line-height:1}
.n:nth-child(4) .big{color:var(--orange)}
.n .cap{margin-top:10px;color:var(--mute);font-size:15px}

/* ladder */
.ladder{padding:100px 0}
.stairs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end;margin-top:56px}
.s{border-radius:10px 10px 0 0;padding:20px;background:linear-gradient(180deg,var(--panel),#151617);border:1px solid var(--line);border-bottom:none;border-top:3px solid var(--blue)}
.s:nth-child(1){height:150px;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,218,255,.08)}
.s:nth-child(2){height:200px}.s:nth-child(3){height:250px;border-top-color:#24ADC6}.s:nth-child(4){height:300px;border-top-color:var(--orange)}
.s small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.s b{display:block;font-size:20px;font-weight:800;margin-top:6px;letter-spacing:-.01em}
.s:nth-child(1) small{color:var(--blue)}
.base{height:3px;background:linear-gradient(90deg,var(--blue),var(--orange))}

/* final */
.final{position:relative;padding:130px 0;text-align:center;overflow:hidden;background:radial-gradient(700px 400px at 50% 110%,rgba(31,218,255,.3),transparent 70%),linear-gradient(180deg,#131415,#0b1730)}
.final h2{font-size:clamp(36px,6vw,72px);max-width:860px;margin:0 auto}
.final .btn{margin-top:36px}
footer{padding:28px 0;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
footer a{color:#cfd6d9;text-decoration:underline;text-underline-offset:3px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer .brand img.r{height:22px}footer .brand img.g{height:26px}
@media(max-width:860px){
 .flow{grid-template-columns:1fr;gap:40px}.flow::before{display:none}
 .titles{grid-template-columns:1fr}.nums .wrap{grid-template-columns:1fr 1fr;gap:36px 20px}
 .stairs{grid-template-columns:1fr 1fr}.s{border-radius:10px;border-bottom:1px solid var(--line);height:auto!important;min-height:110px}
 .hero .scrim{background:linear-gradient(180deg,rgba(19,20,21,.9),rgba(19,20,21,.6))}
 .brand img.r{height:24px}.brand img.g{height:28px}
}

.about{padding:100px 0 20px}
.abt{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;margin-top:20px;align-items:start}
.abt .big{font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.abt p{color:#c9d0d3;font-size:17px;line-height:1.65}
.abt p+p{margin-top:16px}.abt p.big{color:#fff;font-size:clamp(24px,2.8vw,34px);line-height:1.2}
.faq{padding:100px 0;border-top:1px solid var(--line)}
.fl{max-width:820px;margin-top:36px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:800;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange);font-size:24px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:12px;color:#c3cbce;max-width:700px;font-size:16px}
@media(max-width:860px){.abt{grid-template-columns:1fr;gap:28px}.about{padding-top:64px}}



.freeline{margin-top:20px;font-size:15px;color:#c9d0d3}.freeline b{color:var(--blue)}
.gtk{background:#0f1011;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gtk .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:22px;padding-bottom:22px}
.gtk .g{position:relative;padding-left:20px}
.gtk .d{position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--blue);transform:rotate(45deg)}
.gtk .d.o{background:var(--orange)}
.gtk b{display:block;font-size:15px;font-weight:800}
.gtk small{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.call{padding:80px 0 20px}
.code2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.cb{background:#0b0c0d;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cl{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:10px 16px;border-bottom:1px solid var(--line);background:#101112}
.cb pre{padding:18px 16px;font:500 13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dfe4e6;overflow-x:auto;white-space:pre}
.cb .tc{color:var(--orange)}.cb .tk{color:var(--blue)}.cb .ts{color:#a8e8f5}
.call .note{margin-top:14px;font-size:13px;color:var(--mute)}
.row2{margin-top:22px}
.path{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0f1011;padding:34px 0;margin-top:70px}
.path .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.path b{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em}
.path span{display:block;color:#c3cbce;font-size:15px;margin-top:4px;max-width:640px}
@media(max-width:860px){.gtk .wrap{grid-template-columns:1fr 1fr}.code2{grid-template-columns:1fr}}

.aboutgrid{padding:80px 0;border-top:1px solid var(--line);background:#0f1011}
.ag{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.agl img{width:auto;height:64px;display:block;margin-bottom:16px}
.ag p{font-size:16px;line-height:1.7;color:#c9d0d3;max-width:760px}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips2 span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;border:1px solid var(--line);color:#c9d0d3;background:var(--panel)}
.chips2 span.on{border-color:var(--blue);color:var(--blue);background:rgba(31,218,255,.1)}
@media(max-width:860px){.ag{grid-template-columns:1fr;gap:24px}}
.navname{margin-left:auto;margin-right:18px;font-size:13px;font-weight:600;color:#cfd6d9;letter-spacing:.01em}.hero nav{gap:0}@media(max-width:860px){.navname{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}}
.hero .art{inset:0;margin:0;border:0;border-radius:0;padding:0;background:url(../assets/img/hero-lol-worlds.jpg) center/cover no-repeat}

.t.l,.t.v{border:0}.t.l{background:url(../assets/img/title-lol-esports.jpg) center/cover no-repeat}.t.v{background:url(../assets/img/title-valorant.jpg) center/cover no-repeat}
.t.l{border-bottom:3px solid var(--blue)}.t.v{border-bottom:3px solid var(--orange)}
.t h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.t .slotl{display:none}
.t .chip{background:rgba(19,20,21,.88);color:#fff;border-color:rgba(255,255,255,.25)}
.t.v{outline:1px solid #2b2e31;outline-offset:-1px}
.hero h1{text-shadow:0 2px 28px rgba(19,20,21,.7)}
@media(max-width:600px){
 .t{padding:18px}
 .chips{gap:5px;margin-top:8px}
 .t .chip{font-size:10px;padding:3px 7px;background:rgba(19,20,21,.78)}
}