:root{--yellow:#f5c400;--yellow2:#ffd633;--ink:#11120f;--muted:#777970;--paper:#f5f5f1;--line:#dedfd8;--dark:#171813}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}.announcement{height:34px;background:var(--yellow);display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:1.2px}.announcement .dot,.eyebrow span{width:7px;height:7px;background:#171813;border-radius:50%;display:inline-block}.announcement-muted{opacity:.65}.site-header{height:78px;padding:0 6.5%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #eee}.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-1px}.brand-mark{width:34px;height:34px;background:var(--yellow);display:grid;place-items:center;font-family:'Barlow Condensed';font-size:26px;font-weight:900;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}.yellow{color:#d2a900}.nav{display:flex;gap:34px;font-size:12px;font-weight:700;color:#62645d}.nav a:hover,.nav a.active{color:#111}.nav-cta{font-size:11px;font-weight:900;letter-spacing:.7px;background:#171813;color:white;padding:14px 19px}.nav-cta span{color:var(--yellow);margin-left:10px}.menu-toggle{display:none;background:none;border:0;font-size:24px}.hero{min-height:620px;background:var(--dark);color:#fff;position:relative;overflow:hidden;padding:100px 8% 70px}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(90deg,black,transparent 85%)}.hero:after {
  display: none;
}.hero-content{position:relative;z-index:2;max-width:690px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2px;font-weight:900;color:var(--yellow);display:flex;align-items:center;gap:10px}.eyebrow span{background:var(--yellow);box-shadow:0 0 12px var(--yellow)}h1,h2,h3,p{margin-top:0}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(76px,10vw,142px);line-height:.82;letter-spacing:-2px;margin:27px 0 26px;font-weight:900}h1 em{font-style:normal;color:var(--yellow)}.hero-copy{font-size:15px;color:#b7b9af;line-height:1.8;max-width:460px}.hero-actions{display:flex;gap:12px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:17px 22px;font-size:10px;font-weight:900;letter-spacing:1px}.button-yellow{background:var(--yellow);color:#151610}.button-yellow:hover,.rank-button:hover{background:var(--yellow2);transform:translateY(-2px)}.button-outline{border:1px solid #55574d;color:#fff}.hero-meta{margin-top:58px;color:#85877e;font-size:9px;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:12px}.hero-meta i{width:3px;height:3px;border-radius:50%;background:var(--yellow)}.live-dot{width:6px;height:6px;border-radius:50%;background:#a9d86a}.hero-side{position:absolute;z-index:1;right:13%;top:27%;width:260px;height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column}.hero-emblem{width:180px;height:180px;border:2px solid var(--yellow);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 55px rgba(245,196,0,.12)}.hero-emblem span{font-family:'Barlow Condensed';font-size:105px;font-weight:900;color:var(--yellow);line-height:1;transform:rotate(-45deg)}.hero-emblem b,.hero-emblem small{transform:rotate(-45deg);font-size:10px;letter-spacing:2px}.hero-emblem small{font-size:7px;color:#999}.side-caption{position:absolute;bottom:-5px;right:-25px;font-family:'Barlow Condensed';font-size:28px;line-height:.9;color:#fff;text-align:right}.side-caption strong{color:var(--yellow)}.hero-bottom{position:absolute;bottom:22px;left:8%;right:8%;display:flex;justify-content:space-between;color:#77796f;font-size:9px;font-weight:800;letter-spacing:1.2px}.connect-section{padding:65px 8%;display:flex;justify-content:space-between;align-items:center;gap:35px;background:var(--yellow)}.section-kicker{color:#8a6e00}.connect-section h2,.section h2,.community h2{font-family:'Barlow Condensed';font-size:46px;line-height:.95;letter-spacing:-.5px;margin:12px 0 0}.connect-section h2 span,.section h2 span,.community h2 span{color:#fff;text-shadow:1px 1px 0 #171813}.server-card{background:#fff;padding:22px 25px;display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:420px;box-shadow:0 10px 25px #9c7d0026}.server-label{display:block;font-size:9px;font-weight:900;letter-spacing:1.4px;color:#888}.server-card strong{display:block;font-size:20px;letter-spacing:-.5px;margin:5px 0}.server-card small{font-size:10px;color:#777}.copy-button{background:#171813;color:white;border:0;padding:14px 16px;font-size:9px;font-weight:900;letter-spacing:1px;cursor:pointer;white-space:nowrap}.copy-button span{color:var(--yellow);margin-left:8px}.section{padding:100px 8%}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.section-heading>p{max-width:280px;color:#777970;font-size:12px;line-height:1.7;margin:0}.section h2 span{color:#c39d00;text-shadow:none}.mode-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.mode-card{grid-column:span 2;background:#fff;border:1px solid var(--line);min-height:290px;position:relative;overflow:hidden}.mode-featured{grid-column:span 2}.mode-card:nth-child(4),.mode-card:nth-child(5){grid-column:span 3}.mode-number{position:absolute;top:16px;left:17px;font-size:10px;font-weight:900;color:#a2a49b;z-index:2}.mode-art{height:150px;background:#1d2018;position:relative;overflow:hidden;display:grid;place-items:center}.mode-art:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(245,196,0,.12))}.block{position:absolute;width:68px;height:68px;background:#e4bd25;transform:rotate(45deg);box-shadow:12px 12px 0 #8f7415}.block-a{left:33%;top:32px}.block-b{left:48%;top:12px;background:#777e68}.block-c{left:55%;top:70px;background:#c99f16}.sky-art{background:#242c35}.island{width:110px;height:45px;background:#668d45;clip-path:polygon(10% 0,90% 0,100% 25%,78% 100%,20% 100%,0 25%);position:absolute;top:58px}.island-two{transform:scale(.5);left:12%;top:18px;background:#d5b34b}.duel-art{background:#25251f}.sword{font-size:66px;color:var(--yellow);text-shadow:5px 5px #725c12}.fire-art{background:#30241b}.fire-art span{font-size:90px;color:var(--yellow);text-shadow:0 0 35px #ed7b13}.pvp-art{background:#20271e}.pvp-art span{font-family:'Barlow Condensed';font-size:100px;font-weight:900;color:var(--yellow)}.mode-info{padding:20px}.mode-info h3{font-family:'Barlow Condensed';font-size:25px;margin:0 0 6px}.mode-info p{font-size:11px;color:#777970;line-height:1.6;min-height:35px;margin-bottom:14px}.mode-status{font-size:8px;font-weight:900;letter-spacing:1px;color:#8b7000;background:#fff4bf;padding:7px 9px}.ranks{background:#ecece6}.rank-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.rank-card{background:#fff;padding:24px;border:1px solid #dedfd8;position:relative;min-height:300px;display:flex;flex-direction:column}.rank-top{display:flex;justify-content:space-between;align-items:center}.rank-gem{font-size:23px;color:#d5a900}.rank-duration{font-size:8px;letter-spacing:1px;font-weight:900;color:#999}.rank-card h3{font-family:'Barlow Condensed';font-size:36px;margin:23px 0 8px}.rank-card p{font-size:11px;color:#777970;line-height:1.7;min-height:55px}.rank-price{font-size:27px;font-weight:900;margin-top:auto;margin-bottom:18px}.rank-price small{font-size:10px;font-weight:500;color:#888}.rank-button{background:var(--yellow);padding:14px;text-align:center;font-size:9px;letter-spacing:1px;font-weight:900;display:flex;justify-content:space-between;transition:.2s}.rank-button.disabled{background:#e6e6e0;color:#85877f;cursor:default}.rank-button.disabled:hover{transform:none}.rank-emerald .rank-gem{color:#18a36b}.rank-ruby .rank-gem{color:#d52b68}.rank-special .rank-gem{color:#23a6a6}.store-notice{font-size:10px;color:#85877f;margin-top:18px}.community{padding-top:70px;padding-bottom:70px}.community-box{background:#171813;color:#fff;padding:55px 6%;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}.community-box:after{content:"V";position:absolute;right:25%;top:-95px;font-family:'Barlow Condensed';font-size:330px;color:#ffffff08;font-weight:900}.community-mark{width:95px;height:95px;background:var(--yellow);color:#171813;display:grid;place-items:center;font-family:'Barlow Condensed';font-size:75px;font-weight:900;flex-shrink:0}.community h2{font-size:42px;margin:10px 0}.community h2 span{color:var(--yellow);text-shadow:none}.community p{color:#a4a69c;font-size:11px;max-width:390px;line-height:1.7;margin:0}footer{background:#fff;border-top:1px solid var(--line);padding:28px 8%;display:flex;align-items:center;justify-content:space-between}footer>span,footer>a:last-child{font-size:9px;color:#85877f;font-weight:800;letter-spacing:.8px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--yellow);padding:13px 20px;font-size:11px;font-weight:900;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:850px){.hero-side{right:5%;opacity:.35}.hero-content{max-width:600px}.connect-section{align-items:flex-start;flex-direction:column}.server-card{min-width:0;width:100%}.rank-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:flex-start;flex-direction:column;gap:15px}.community-box{flex-wrap:wrap}.community-box .button{margin-left:125px}}@media(max-width:600px){.site-header{height:65px;padding:0 5%}.menu-toggle{display:block}.nav{display:none;position:absolute;z-index:10;top:99px;left:0;right:0;background:#fff;padding:22px;flex-direction:column;gap:20px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.nav-cta{display:none}.hero{padding:85px 6% 75px;min-height:600px}.hero-side{right:-40px;top:35%;transform:scale(.7);opacity:.2}.hero-meta{flex-wrap:wrap;margin-top:38px}.hero-bottom{left:6%;right:6%;font-size:7px}.connect-section,.section{padding:65px 6%}.connect-section h2,.section h2{font-size:39px}.server-card{padding:17px;gap:12px;flex-wrap:wrap}.server-card strong{font-size:17px}.copy-button{width:100%}.mode-grid{display:block}.mode-card,.mode-card:nth-child(n){margin-bottom:13px}.rank-grid{grid-template-columns:1fr}.community-box{padding:35px 25px}.community-mark{width:65px;height:65px;font-size:50px}.community h2{font-size:34px}.community-box .button{margin-left:0}footer{padding:25px 6%;gap:15px;flex-wrap:wrap}footer>span{order:3;width:100%}.announcement{font-size:8px;letter-spacing:.5px}}

/* VYROXMC logo integration + animated entrance */
.brand-logo{width:42px;height:42px;object-fit:cover;border-radius:7px;border:1px solid rgba(245,196,0,.35)}
.hero-emblem{transform:none;width:260px;height:auto;border:0;box-shadow:none;gap:10px}
.hero-emblem img{width:220px;height:220px;object-fit:cover;border:2px solid var(--yellow);box-shadow:0 0 55px rgba(245,196,0,.2);animation:logoFloat 4s ease-in-out infinite}
.hero-emblem b,.hero-emblem small{transform:none}
.community-mark{background:transparent;width:100px;height:100px}
.community-mark img{width:100%;height:100%;object-fit:cover;border:2px solid var(--yellow)}
.intro-screen{position:fixed;inset:0;z-index:9999;background:#100b03;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:opacity .8s ease,visibility .8s ease}
.intro-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,196,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(245,196,0,.055) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse,black,transparent 75%)}
.intro-glow{position:absolute;width:min(70vw,560px);aspect-ratio:1;border-radius:50%;background:rgba(245,196,0,.17);filter:blur(90px);animation:glowPulse 2.6s ease-in-out infinite}
.intro-logo{position:relative;width:min(64vw,360px);aspect-ratio:1;object-fit:cover;border:2px solid rgba(245,196,0,.8);box-shadow:0 0 35px rgba(245,196,0,.24);animation:introReveal 1.15s cubic-bezier(.2,.8,.2,1) both}
.intro-wordmark{position:relative;margin-top:22px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(36px,7vw,64px);font-weight:900;letter-spacing:5px;color:#fff;animation:wordReveal 1s .35s both}
.intro-wordmark span{color:var(--yellow)}
.intro-loading{position:relative;margin-top:18px;width:130px;height:3px;background:#51421a;overflow:hidden}
.intro-loading span{display:block;height:100%;width:40%;background:var(--yellow);animation:loadingSweep 1.4s ease-in-out infinite}
.intro-skip{position:absolute;bottom:28px;right:30px;border:1px solid #806b2b;background:transparent;color:#d8c78c;padding:10px 14px;font-size:9px;font-weight:800;letter-spacing:1.4px;cursor:pointer}
.intro-screen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
@keyframes introReveal{0%{opacity:0;transform:scale(.72) rotate(-7deg);filter:blur(8px)}65%{opacity:1;transform:scale(1.04) rotate(1deg);filter:blur(0)}100%{transform:scale(1) rotate(0)}}
@keyframes wordReveal{from{opacity:0;transform:translateY(16px);letter-spacing:12px}to{opacity:1;transform:translateY(0);letter-spacing:5px}}
@keyframes glowPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes loadingSweep{from{transform:translateX(-120%)}to{transform:translateX(350%)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:600px){.hero-emblem{right:-40px}.hero-emblem img{width:170px;height:170px}.intro-skip{bottom:18px;right:18px}.brand-logo{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.intro-logo,.intro-wordmark,.intro-glow,.intro-loading span,.hero-emblem img{animation:none!important}.intro-screen{transition:none}}
.mode-card .mode-art {
  height: 190px;
  overflow: hidden;
  background: #171208;
}

.mode-card .mode-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.mode-card:hover .mode-art img {
  transform: scale(1.07);
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.88),
    rgba(0, 0, 0, 0.48)
  );
  z-index: -1;
  pointer-events: none;
}

.hero-grid,
.hero-content,
.hero-side,
.hero-bottom {
  position: relative;
  z-index: 1;
}

/* Keep the headline and buttons on the left */
.hero-content {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  align-self: center;
}

/* Keep the logo and FIND YOUR GAME on the right */

.hero-side {
  position: absolute;
  z-index: 2;
  right: 13%;
  top: 18%;
  width: 260px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.hero-video {
  z-index: -2;
}

.hero-overlay {
  z-index: -1;
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-content {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-side {
    grid-column: 1;
    grid-row: 2;
    margin-top: 30px;
  }

  .hero-bottom {
    grid-column: 1;
    grid-row: 3;
  }
}