:root{--side:205px;--ink:#080c10;--panel:#12191f;--green:#45f20d;--green2:#8aff50;--text:#101419;--muted:#75808a;--line:#dfe4e7;--max:1400px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;background:#f5f6f7;color:var(--text)}a{text-decoration:none;color:inherit}button,input{font:inherit}header{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--side);padding:24px 17px;display:flex;flex-direction:column;align-items:stretch;color:#fff;background:linear-gradient(180deg,#080c10,#10171c);border-right:1px solid #ffffff12;box-shadow:10px 0 40px #0001}.logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:.16em}.logo svg{width:37px;height:44px;fill:#fff}.logo .accent{fill:var(--green)}.logo small{display:block;text-align:center;font-size:6px;letter-spacing:.5em;color:#b8c0c5}header form{order:2;display:flex;height:37px;margin:30px 0 18px;border:1px solid #3c464d;border-radius:6px;overflow:hidden;background:#1c242a}header form input{width:100%;min-width:0;padding:0 10px;border:0;outline:0;background:transparent;color:#fff;font-size:10px}header form button{width:38px;border:0;background:transparent;color:#fff;font-size:20px}header nav{order:3;display:flex;flex-direction:column}header nav a{padding:12px 10px;border-radius:5px;color:#b8c1c7;font-size:11px;font-weight:700}header nav a:hover,header nav a.active{color:#fff;background:#17231c}.nav-label{margin:15px 10px 4px;color:#5d6b73;font-size:8px;font-weight:800;letter-spacing:.16em}header nav a:before{content:'›';margin-right:9px;color:var(--green)}.sidebar-bottom{order:4;margin-top:auto}.account-link{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:10px;border:1px solid #303a40;border-radius:6px}.account-link i{font-size:22px;font-style:normal}.account-link strong,.account-link small{display:block}.account-link strong{font-size:10px}.account-link small{color:#7f8b93;font-size:7px}.cart{display:block;padding:12px;border:1px solid #38434a;border-radius:6px;color:#d8dfe3;font-size:11px;font-weight:700}.cart span{float:right;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--green);color:#071006}.menu{display:none}main,body>footer{margin-left:var(--side)}.hero{position:relative;isolation:isolate;height:510px;overflow:hidden;background:linear-gradient(105deg,#fff 0%,#fafafa 42%,#cfd5d9 68%,#313b43 100%)}.hero:before{content:'P';position:absolute;z-index:-1;left:4%;top:-90px;color:#e4e7e9;font-size:420px;font-weight:800;opacity:.75}.hero-copy{position:relative;z-index:3;width:520px;padding-top:80px;margin-left:max(45px,calc((100vw - var(--side) - var(--max))/2 + 45px))}.hero-copy>span{color:#31bc08;font-size:10px;font-weight:800;letter-spacing:.18em}.hero h1{margin:9px 0 15px;font-size:55px;line-height:1.05;letter-spacing:-.045em}.hero p{margin-bottom:25px;font-size:14px}.button{display:inline-flex;padding:13px 20px;border-radius:5px;background:var(--green);font-size:11px;font-weight:800}.button:hover{background:var(--green2)}.rating{display:flex;align-items:center;gap:10px;margin-top:23px;font-size:10px}.rating em{padding:3px 6px;background:#00b67a;color:#fff;font-style:normal;letter-spacing:2px}.rating small{font-weight:600}.hero-visual{position:absolute;z-index:1;inset:0 0 0 48%;overflow:hidden;background:radial-gradient(circle at 60% 48%,#dce2e5 0 12%,transparent 35%)}.portal{position:absolute;right:-70px;bottom:-240px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#78858b,#26323a 43%,#0b1116 68%);box-shadow:inset 30px 20px 80px #ffffff22}.fighter{position:absolute;left:25%;bottom:-65px;color:var(--green);font-size:320px;line-height:420px;font-weight:800;text-shadow:18px 12px #162027,-12px -7px #48565f;transform:skew(-7deg)}.city{position:absolute;bottom:0;width:95px;background:linear-gradient(90deg,#121a20,#53616b,#11181d);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}.city:after{content:'';position:absolute;left:43%;top:75px;width:12px;height:120px;background:var(--green);box-shadow:0 0 25px var(--green)}.one{right:14%;height:360px}.two{right:2%;height:255px}.hero aside{position:absolute;z-index:4;right:4%;top:165px;display:flex;align-items:center;gap:12px;width:175px;padding:17px;border:1px solid #ffffff44;border-radius:10px;background:#11181eea;color:#fff}.hero aside>b{color:var(--green);font-size:33px}.hero aside strong,.hero aside small{display:block;font-size:11px}.hero aside small{margin-top:5px;color:#c4cbd0;font-size:8px}.content{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:25px 0 10px}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:14px}.section-title h2{margin:0;font-size:19px}.section-title i{width:26px;height:2px;background:var(--green)}.section-title a{margin-left:auto;font-size:10px}.products{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.card{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff;transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:0 14px 30px #12202c1c}.cover{position:relative;height:150px;display:grid;place-items:center;overflow:hidden;color:#fff;background:#172028}.cover:before,.cover:after{content:'';position:absolute}.cover:before{inset:0;background:radial-gradient(circle at 65%,var(--tone,#45f20d),transparent 44%),linear-gradient(135deg,#10171d,#46515a);opacity:.9}.cover:after{width:90px;height:190px;background:#11171c;transform:skew(-13deg) rotate(18deg);box-shadow:0 0 45px #000}.cover>span{position:absolute;z-index:3;left:8px;top:8px;padding:5px 8px;border-radius:4px;background:var(--green);color:#071006;font-size:9px;font-weight:800}.cover strong{position:relative;z-index:2;text-align:center;font-size:17px;letter-spacing:.08em;text-shadow:0 2px 10px #000}.cover strong small{display:block;font-size:8px;letter-spacing:.2em}.steel{--tone:#ec7d32}.aether{--tone:#a89c70}.blackout{--tone:#78848b}.abyss{--tone:#d6ae6d}.neon{--tone:#d829e7}.card-text{padding:11px}.card-text h3{margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.card-text p{margin:0;color:var(--muted);font-size:8px}.card-text b{display:block;margin-top:10px;padding-top:8px;border-top:1px solid #edf0f2;font-size:8px}.categories-section{padding-top:32px}.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.categories a{display:flex;align-items:center;gap:12px;padding:15px;border-radius:7px;background:linear-gradient(120deg,#10161b,#1a2127);color:#fff}.categories a:hover{box-shadow:inset 0 0 0 1px var(--green)}.categories b{display:grid;place-items:center;width:42px;height:42px;border:1px solid #54f42955;border-radius:50%;color:var(--green);font-size:21px}.categories strong,.categories small{display:block}.categories strong{font-size:12px}.categories small{color:#bcc5ca;font-size:8px}.account-info{width:min(var(--max),calc(100% - 48px));margin:35px auto 0}.account-info>div{display:flex;align-items:center;gap:20px;padding:25px 30px;border-radius:8px;background:linear-gradient(110deg,#10171c,#1b282f);color:#fff}.account-info>div>span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #45f20d66;border-radius:50%;color:var(--green);font-size:30px}.account-info h2{margin:0;font-size:17px}.account-info p{margin:5px 0 0;color:#aeb9bf;font-size:9px}.account-info a{margin-left:auto;padding:11px 15px;border-radius:5px;background:var(--green);color:#071006;font-size:9px;font-weight:800}.benefits{width:min(var(--max),calc(100% - 48px));margin:20px auto;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;background:#fff}.benefits div{display:flex;align-items:center;gap:13px;padding:20px 24px;border-right:1px solid var(--line)}.benefits div:last-child{border:0}.benefits>div>b{font-size:30px}.benefits strong,.benefits small{display:block}.benefits strong{font-size:11px}.benefits small{color:var(--muted);font-size:8px}body>footer{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;margin-top:12px;padding:30px max(30px,calc((100vw - var(--side) - var(--max))/2));background:linear-gradient(110deg,#080c10,#141b20);color:#fff}body>footer .logo{font-size:17px}body>footer .logo svg{width:34px}body>footer h3{font-size:10px}body>footer p,body>footer a{display:block;margin:6px 0;color:#9ca8af;font-size:8px}.copy{grid-column:1/-1!important;padding-top:12px;border-top:1px solid #ffffff12;text-align:center}
@media(max-width:1200px){.products{grid-template-columns:repeat(3,1fr)}.hero-visual{left:43%}.categories{grid-template-columns:repeat(3,1fr)}.hero aside{display:none}}
@media(max-width:760px){:root{--side:0px}header{transform:translateX(-100%);width:220px;transition:.3s}header.open{transform:none}.menu{display:block;position:fixed;z-index:70;left:12px;top:12px;width:42px;height:42px;border:0;border-radius:6px;background:#0d1318;color:#fff;font-size:21px}main,body>footer{margin-left:0}.hero{height:540px}.hero-copy{margin-left:24px;padding-top:80px;width:calc(100% - 48px)}.hero h1{font-size:43px}.hero-visual{left:50%;opacity:.5}.fighter{left:0}.products{grid-template-columns:repeat(2,1fr)}.categories{grid-template-columns:repeat(2,1fr)}.benefits{grid-template-columns:1fr 1fr}.benefits div{border-bottom:1px solid var(--line)}body>footer{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.hero h1{font-size:37px}.products{gap:8px}.cover{height:120px}.content,.account-info{width:min(var(--max),calc(100% - 48px));margin:35px auto 0}.account-info>div{display:flex;align-items:center;gap:20px;padding:25px 30px;border-radius:8px;background:linear-gradient(110deg,#10171c,#1b282f);color:#fff}.account-info>div>span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #45f20d66;border-radius:50%;color:var(--green);font-size:30px}.account-info h2{margin:0;font-size:17px}.account-info p{margin:5px 0 0;color:#aeb9bf;font-size:9px}.account-info a{margin-left:auto;padding:11px 15px;border-radius:5px;background:var(--green);color:#071006;font-size:9px;font-weight:800}.benefits{width:calc(100% - 24px)}.categories{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}.benefits div{border-right:0}body>footer{grid-template-columns:1fr;gap:20px}.hero-visual{left:62%}}@media(max-width:600px){.account-info>div{align-items:flex-start;flex-wrap:wrap}.account-info a{margin-left:0}.account-info{width:calc(100% - 24px)}}