*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:#02050b;
color:#fff;
font-family:"Inter",sans-serif;
overflow-x:hidden;
padding-top:114px;
}

a{
text-decoration:none;
color:inherit;
}

.container{
width:92%;
max-width:1580px;
margin:auto;
}

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 12% 16%,rgba(0,255,200,.12),transparent 34%),
radial-gradient(circle at 86% 18%,rgba(0,120,255,.15),transparent 36%),
radial-gradient(circle at 50% 100%,rgba(0,255,180,.06),transparent 46%);
z-index:-4;
}

body::after{
content:"";
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
background-size:74px 74px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 82%);
z-index:-3;
}

.royal-header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
background:rgba(1,5,10,.78);
backdrop-filter:blur(24px);
border-bottom:1px solid rgba(255,255,255,.06);
}

.header-glow{
position:absolute;
top:-120px;
left:8%;
width:420px;
height:220px;
background:rgba(0,255,200,.12);
filter:blur(90px);
pointer-events:none;
}

.header-topbar{
height:36px;
background:rgba(7,15,24,.72);
border-bottom:1px solid rgba(255,255,255,.045);
position:relative;
z-index:2;
}

.topbar-inner{
height:36px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.topbar-left{
display:flex;
align-items:center;
gap:9px;
color:#aeb7c2;
font-size:12px;
font-weight:600;
}

.live-dot{
width:9px;
height:9px;
border-radius:50%;
background:#00ff88;
box-shadow:0 0 14px #00ff88;
}

.topbar-left span:not(.live-dot){
color:#4b5662;
}

.topbar-right{
display:flex;
align-items:center;
gap:18px;
}

.topbar-right a{
color:#8e99a5;
font-size:12px;
transition:.3s;
}

.topbar-right a:hover{
color:#00ffd0;
}

.main-navbar{
position:relative;
z-index:3;
}

.nav-inner{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

.royal-logo{
display:flex;
align-items:center;
gap:14px;
min-width:260px;
}

.logo-mark{
width:48px;
height:48px;
border-radius:16px;
background:linear-gradient(135deg,rgba(0,255,200,.22),rgba(0,168,255,.12));
border:1px solid rgba(0,255,200,.30);
display:flex;
align-items:center;
justify-content:center;
color:#00ffd0;
font-family:"Orbitron",sans-serif;
font-weight:900;
font-size:16px;
box-shadow:0 0 25px rgba(0,255,200,.15);
}

.royal-logo strong{
display:block;
font-family:"Orbitron",sans-serif;
color:#00ffd0;
font-size:22px;
letter-spacing:1px;
line-height:1;
}

.royal-logo span{
display:block;
color:#89939f;
font-size:11px;
margin-top:6px;
letter-spacing:1px;
text-transform:uppercase;
}

.main-menu{
display:flex;
align-items:center;
justify-content:center;
gap:28px;
}

.main-menu > a,
.dropdown-trigger{
color:#c9d0d8;
font-size:14px;
font-weight:700;
transition:.3s;
position:relative;
}

.main-menu > a:hover,
.dropdown-trigger:hover,
.main-menu > a.active{
color:#00ffd0;
}

.main-menu > a::after,
.dropdown-trigger::after{
content:"";
position:absolute;
left:0;
bottom:-12px;
width:0;
height:2px;
background:#00ffd0;
box-shadow:0 0 15px #00ffd0;
transition:.3s;
}

.main-menu > a:hover::after,
.dropdown-trigger:hover::after,
.main-menu > a.active::after{
width:100%;
}

.menu-dropdown{
position:relative;
}

.dropdown-panel{
position:absolute;
top:36px;
left:50%;
transform:translateX(-50%) translateY(15px);
width:360px;
padding:18px;
border-radius:22px;
background:rgba(7,13,22,.96);
border:1px solid rgba(0,255,200,.12);
box-shadow:0 30px 70px rgba(0,0,0,.35);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.3s;
}

.menu-dropdown:hover .dropdown-panel{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}

.dropdown-panel a{
display:block;
padding:16px;
border-radius:16px;
transition:.25s;
}

.dropdown-panel a:hover{
background:rgba(0,255,200,.06);
}

.dropdown-panel strong{
display:block;
color:white;
font-size:14px;
margin-bottom:5px;
}

.dropdown-panel span{
color:#89939f;
font-size:12px;
}

.nav-actions{
display:flex;
align-items:center;
gap:14px;
min-width:240px;
justify-content:flex-end;
}

.login-link{
color:#9ba5b0;
font-size:14px;
font-weight:700;
transition:.3s;
}

.login-link:hover{
color:#00ffd0;
}

.client-panel-btn{
padding:14px 24px;
border-radius:15px;
background:linear-gradient(90deg,#00ffd0,#00a8ff);
color:black;
font-size:14px;
font-weight:900;
box-shadow:0 0 30px rgba(0,255,200,.25);
transition:.3s;
}

.client-panel-btn:hover{
transform:translateY(-3px);
box-shadow:0 0 45px rgba(0,255,200,.35);
}

.hero{
position:relative;
min-height:96vh;
overflow:hidden;
display:flex;
align-items:center;
background:#02050b;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(2,5,11,.98),rgba(2,5,11,.73),rgba(2,5,11,.96)),
url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2200&auto=format&fit=crop");
background-size:cover;
background-position:center;
z-index:-4;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 74% 28%,rgba(0,255,200,.20),transparent 34%),
radial-gradient(circle at 18% 82%,rgba(0,120,255,.16),transparent 38%),
linear-gradient(90deg,rgba(0,0,0,.28),transparent 45%,rgba(0,0,0,.32));
z-index:-3;
}

.hero-grid-lines{
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:78px 78px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);
z-index:-2;
}

.hero-orb-one{
position:absolute;
right:6%;
top:13%;
width:470px;
height:470px;
border-radius:50%;
background:rgba(0,255,200,.13);
filter:blur(125px);
pointer-events:none;
}

.hero-orb-two{
position:absolute;
left:-140px;
bottom:6%;
width:460px;
height:460px;
border-radius:50%;
background:rgba(0,120,255,.12);
filter:blur(135px);
pointer-events:none;
}

.hero-grid{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:74px;
align-items:center;
padding:105px 0 95px;
}

.badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 22px;
border-radius:999px;
background:rgba(0,255,200,.08);
border:1px solid rgba(0,255,200,.18);
color:#00ffd0;
font-size:12px;
font-weight:900;
letter-spacing:1px;
margin-bottom:30px;
box-shadow:inset 0 0 22px rgba(0,255,200,.035);
}

.badge::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#00ff88;
box-shadow:0 0 14px #00ff88;
}

.hero h1{
font-family:"Orbitron",sans-serif;
font-size:82px;
line-height:.98;
font-weight:900;
letter-spacing:-2px;
margin-bottom:30px;
}

.hero h1 span{
color:#00ffd0;
text-shadow:0 0 38px rgba(0,255,200,.55);
}

.hero p{
max-width:860px;
color:#c7ced6;
font-size:18px;
line-height:1.9;
margin-bottom:38px;
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:42px;
}

.btn-main,
.btn-outline{
padding:18px 38px;
border-radius:16px;
font-weight:900;
font-size:15px;
transition:.3s;
}

.btn-main{
background:linear-gradient(90deg,#00ffd0,#00a8ff);
color:#000;
box-shadow:0 0 35px rgba(0,255,200,.30);
}

.btn-main:hover,
.btn-outline:hover{
transform:translateY(-4px);
}

.btn-outline{
border:1px solid rgba(255,255,255,.14);
color:#fff;
background:rgba(255,255,255,.03);
backdrop-filter:blur(12px);
}

.hero-metrics{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}

.metric{
position:relative;
overflow:hidden;
padding:22px;
border-radius:20px;
background:rgba(8,14,24,.84);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(14px);
}

.metric::after{
content:"";
position:absolute;
right:-35px;
top:-35px;
width:90px;
height:90px;
background:rgba(0,255,200,.10);
filter:blur(25px);
}

.metric h3{
position:relative;
z-index:2;
color:#00ffd0;
font-family:"Orbitron",sans-serif;
font-size:23px;
margin-bottom:8px;
}

.metric p{
position:relative;
z-index:2;
margin:0;
color:#aeb7c2;
font-size:12px;
line-height:1.5;
}

.control-room{
position:relative;
height:690px;
}

.node-card{
position:absolute;
right:0;
top:0;
width:610px;
min-height:560px;
padding:34px;
border-radius:42px;
background:
linear-gradient(145deg,rgba(4,10,18,.96),rgba(2,5,11,.97)),
radial-gradient(circle at 50% 0%,rgba(0,255,200,.20),transparent 42%);
border:1px solid rgba(0,255,200,.18);
box-shadow:0 45px 130px rgba(0,0,0,.55),0 0 90px rgba(0,255,200,.16);
backdrop-filter:blur(18px);
}

.node-card::before{
content:"";
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;
opacity:.16;
pointer-events:none;
}

.node-head{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:34px;
}

.node-head small{
color:#00ffd0;
font-size:12px;
font-weight:900;
letter-spacing:1px;
}

.node-head h3{
font-family:"Orbitron",sans-serif;
font-size:30px;
margin-top:8px;
}

.node-status{
color:#00ff88;
font-size:12px;
font-weight:900;
padding:9px 14px;
border-radius:999px;
background:rgba(0,255,136,.08);
border:1px solid rgba(0,255,136,.16);
}

.node-visual{
position:relative;
z-index:2;
height:300px;
display:flex;
align-items:center;
justify-content:center;
}

.rack-orbit{
position:absolute;
width:330px;
height:330px;
border-radius:50%;
border:1px dashed rgba(0,255,200,.25);
animation:spin 24s linear infinite;
}

.server-rack{
width:250px;
height:300px;
border-radius:36px;
background:
linear-gradient(145deg,rgba(0,255,200,.13),rgba(0,120,255,.08)),
#06101a;
border:1px solid rgba(0,255,200,.28);
padding:30px;
display:flex;
flex-direction:column;
gap:17px;
box-shadow:0 0 75px rgba(0,255,200,.24),inset 0 0 35px rgba(0,255,200,.035);
transform:perspective(900px) rotateY(-10deg) rotateX(4deg);
}

.server-rack div{
height:42px;
border-radius:13px;
background:linear-gradient(90deg,rgba(0,255,200,.16),rgba(0,168,255,.08));
border:1px solid rgba(0,255,200,.18);
position:relative;
}

.server-rack div::after{
content:"";
position:absolute;
right:15px;
top:50%;
width:9px;
height:9px;
border-radius:50%;
background:#00ff88;
box-shadow:0 0 12px #00ff88;
transform:translateY(-50%);
}

.node-stats{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:34px;
}

.node-stats div{
background:#0a111b;
border:1px solid rgba(255,255,255,.06);
border-radius:18px;
padding:20px;
}

.node-stats small{
display:block;
color:#8e98a3;
font-size:11px;
margin-bottom:8px;
}

.node-stats strong{
display:block;
font-family:"Orbitron",sans-serif;
color:#00ffd0;
font-size:19px;
}

.speed-mini{
position:absolute;
left:0;
bottom:22px;
width:380px;
padding:22px;
border-radius:30px;
background:rgba(6,12,22,.88);
border:1px solid rgba(0,255,200,.16);
backdrop-filter:blur(18px);
box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 55px rgba(0,255,200,.11);
}

.speed-mini img{
width:100%;
border-radius:20px;
display:block;
margin-bottom:16px;
}

.speed-mini strong{
display:block;
font-family:"Orbitron",sans-serif;
font-size:18px;
color:#00ffd0;
margin-bottom:6px;
}

.speed-mini span{
color:#aeb7c2;
font-size:13px;
}

.floating-pill{
position:absolute;
left:16px;
top:68px;
padding:16px 18px;
border-radius:999px;
background:rgba(0,255,200,.08);
border:1px solid rgba(0,255,200,.18);
color:#dffff8;
font-size:13px;
font-weight:800;
backdrop-filter:blur(14px);
box-shadow:0 0 36px rgba(0,255,200,.10);
}

.section{
padding:120px 0;
}

.section-header{
text-align:center;
margin-bottom:70px;
}

.section-title{
font-family:"Orbitron",sans-serif;
font-size:58px;
line-height:1.1;
margin-bottom:20px;
}

.section-title span{
color:#00ffd0;
}

.section-sub{
max-width:940px;
margin:auto;
color:#b8b8b8;
font-size:17px;
line-height:1.9;
}

.dedicated-products{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
perspective:1400px;
}

.gaming-card{
position:relative;
overflow:hidden;
min-height:690px;
padding:28px;
border-radius:34px;
background:
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
radial-gradient(circle at 18% 0%,rgba(0,255,208,.20),transparent 34%),
radial-gradient(circle at 88% 12%,rgba(0,168,255,.16),transparent 36%),
#07101a;
border:1px solid rgba(255,255,255,.09);
box-shadow:0 28px 90px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);
transition:.45s cubic-bezier(.2,.8,.2,1);
isolation:isolate;
}

.gaming-card::before{
content:"";
position:absolute;
inset:-2px;
border-radius:36px;
padding:1px;
background:linear-gradient(135deg,rgba(0,255,208,.85),rgba(0,168,255,.18),rgba(255,47,137,.38),rgba(0,255,208,.55));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:.26;
transition:.45s;
pointer-events:none;
z-index:-1;
}

.gaming-card::after{
content:"";
position:absolute;
top:-120%;
left:-35%;
width:42%;
height:260%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
transform:rotate(22deg);
opacity:0;
transition:.75s;
pointer-events:none;
}

.gaming-card:hover{
transform:translateY(-12px) rotateX(2deg) rotateY(-2deg);
border-color:rgba(0,255,208,.38);
box-shadow:0 42px 120px rgba(0,0,0,.50),0 0 60px rgba(0,255,208,.13),inset 0 0 0 1px rgba(255,255,255,.04);
}

.gaming-card:hover::before{
opacity:.72;
}

.gaming-card:hover::after{
left:115%;
opacity:1;
}

.gaming-card.featured{
background:
linear-gradient(180deg,rgba(0,255,208,.085),rgba(255,255,255,.018)),
radial-gradient(circle at 20% 0%,rgba(0,255,208,.30),transparent 34%),
radial-gradient(circle at 90% 14%,rgba(0,168,255,.24),transparent 36%),
#07101a;
box-shadow:0 38px 120px rgba(0,0,0,.46),0 0 70px rgba(0,255,208,.15);
}

.game-top{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
margin-bottom:22px;
}

.game-icon{
position:relative;
width:76px;
height:76px;
border-radius:24px;
background:linear-gradient(135deg,rgba(0,255,208,.18),rgba(0,168,255,.10));
border:1px solid rgba(0,255,208,.28);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 34px rgba(0,255,208,.14),inset 0 0 24px rgba(0,255,208,.045);
}

.game-icon svg{
width:37px;
height:37px;
stroke:#00ffd0;
filter:drop-shadow(0 0 12px rgba(0,255,208,.55));
}

.game-icon::after{
content:"";
position:absolute;
right:10px;
bottom:10px;
width:10px;
height:10px;
border-radius:50%;
background:#00ff88;
box-shadow:0 0 16px #00ff88;
}

.game-badge{
padding:10px 14px;
border-radius:999px;
background:rgba(0,255,208,.10);
border:1px solid rgba(0,255,208,.18);
color:#00ffd0;
font-size:11px;
font-weight:950;
letter-spacing:.7px;
text-transform:uppercase;
white-space:nowrap;
}

.game-badge.hot{
background:linear-gradient(90deg,#00ffd0,#00a8ff);
color:#00110f;
box-shadow:0 0 28px rgba(0,255,208,.25);
}

.game-title{
position:relative;
z-index:2;
margin-bottom:22px;
}

.game-title h3{
font-family:"Orbitron",sans-serif;
font-size:30px;
line-height:1.08;
letter-spacing:-.8px;
margin-bottom:10px;
}

.game-title p{
color:#aeb7c2;
font-size:14px;
line-height:1.7;
}

.game-live{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:20px;
}

.live-chip{
padding:12px 10px;
border-radius:16px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
text-align:center;
}

.live-chip small{
display:block;
color:#7f8b98;
font-size:10px;
font-weight:800;
text-transform:uppercase;
margin-bottom:5px;
}

.live-chip strong{
display:block;
color:#fff;
font-size:12px;
font-weight:900;
}

.game-specs{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin:22px 0;
}

.spec-pill{
position:relative;
overflow:hidden;
padding:15px;
border-radius:18px;
background:#0a131d;
border:1px solid rgba(255,255,255,.065);
}

.spec-pill::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,255,208,.08),transparent 55%);
opacity:.75;
}

.spec-pill span{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:8px;
color:#8f9aa7;
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.5px;
margin-bottom:8px;
}

.spec-pill svg{
width:15px;
height:15px;
stroke:#00ffd0;
}

.spec-pill strong{
position:relative;
z-index:2;
display:block;
color:#fff;
font-size:14px;
font-weight:950;
}

.power-bars{
position:relative;
z-index:2;
display:grid;
gap:13px;
margin:24px 0;
}

.power-row{
display:grid;
grid-template-columns:76px 1fr 38px;
gap:10px;
align-items:center;
}

.power-row span,
.power-row strong{
color:#9aa5b1;
font-size:11px;
font-weight:900;
text-transform:uppercase;
}

.power-row strong{
color:#00ffd0;
text-align:right;
}

.bar{
height:9px;
border-radius:999px;
background:rgba(255,255,255,.075);
overflow:hidden;
box-shadow:inset 0 0 10px rgba(0,0,0,.38);
}

.bar i{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#00ffd0,#00a8ff);
box-shadow:0 0 18px rgba(0,255,208,.35);
}

.game-footer{
position:relative;
z-index:2;
margin-top:auto;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.075);
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
}

.price-wrap small{
display:block;
color:#8f9aa7;
font-size:11px;
font-weight:800;
text-transform:uppercase;
margin-bottom:4px;
}

.game-price{
font-family:"Orbitron",sans-serif;
font-size:34px;
line-height:1;
color:#00ffd0;
text-shadow:0 0 28px rgba(0,255,208,.42);
white-space:nowrap;
}

.game-price em{
font-family:"Inter",sans-serif;
font-style:normal;
font-size:13px;
color:#8f9aa7;
}

.game-btn{
height:56px;
padding:0 24px;
border-radius:17px;
background:linear-gradient(90deg,#00ffd0,#00a8ff);
color:#00100e;
font-size:13px;
font-weight:950;
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
box-shadow:0 0 30px rgba(0,255,208,.22);
transition:.3s;
}

.game-btn:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 0 44px rgba(0,255,208,.36);
}

.game-bg-code{
position:absolute;
right:-20px;
bottom:18px;
font-family:"Orbitron",sans-serif;
font-size:84px;
font-weight:900;
color:rgba(255,255,255,.025);
line-height:1;
pointer-events:none;
z-index:1;
}

.game-card-noise{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 85%);
opacity:.18;
pointer-events:none;
z-index:0;
}

.note-box{
margin-top:28px;
padding:24px 28px;
border-radius:24px;
background:rgba(0,255,200,.055);
border:1px solid rgba(0,255,200,.14);
color:#b8c2cc;
font-size:14px;
line-height:1.8;
}

.upgrade-section{
position:relative;
overflow:hidden;
border-radius:42px;
padding:76px;
background:
radial-gradient(circle at 12% 20%,rgba(0,255,200,.13),transparent 35%),
radial-gradient(circle at 92% 20%,rgba(0,120,255,.14),transparent 35%),
#050b13;
border:1px solid rgba(0,255,200,.12);
display:grid;
grid-template-columns:1fr 1fr;
gap:62px;
align-items:center;
}

.speedtest-card{
position:relative;
overflow:hidden;
border-radius:34px;
border:1px solid rgba(0,255,200,.22);
background:#0a1020;
box-shadow:0 0 60px rgba(0,255,200,.16),0 35px 95px rgba(0,0,0,.38);
}

.speedtest-card img{
width:100%;
display:block;
}

.speedtest-card::after{
content:"10GB PORT UPGRADE";
position:absolute;
left:22px;
bottom:22px;
padding:12px 16px;
border-radius:999px;
background:rgba(0,255,200,.11);
border:1px solid rgba(0,255,200,.22);
color:#00ffd0;
font-family:"Orbitron",sans-serif;
font-size:12px;
font-weight:900;
letter-spacing:1px;
backdrop-filter:blur(12px);
}

.upgrade-content h2{
font-family:"Orbitron",sans-serif;
font-size:56px;
line-height:1.1;
margin-bottom:24px;
}

.upgrade-content h2 span{
color:#00ffd0;
}

.upgrade-content p{
color:#bfc6cf;
font-size:16px;
line-height:1.9;
margin-bottom:28px;
}

.upgrade-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.upgrade-list div{
padding:16px;
border-radius:16px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.06);
color:#d8dde3;
font-size:13px;
font-weight:700;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.feature-card{
position:relative;
overflow:hidden;
padding:34px;
border-radius:28px;
background:#091018;
border:1px solid rgba(255,255,255,.06);
transition:.35s;
}

.feature-card::before{
content:"";
position:absolute;
width:220px;
height:220px;
right:-100px;
top:-100px;
background:radial-gradient(circle,rgba(0,255,200,.10),transparent 65%);
}

.feature-card:hover{
transform:translateY(-8px);
border-color:#00ffd0;
box-shadow:0 0 35px rgba(0,255,200,.08);
}

.feature-card span{
position:relative;
z-index:2;
display:flex;
width:60px;
height:60px;
border-radius:18px;
background:rgba(0,255,200,.08);
border:1px solid rgba(0,255,200,.18);
align-items:center;
justify-content:center;
font-size:28px;
margin-bottom:22px;
}

.feature-card h3{
position:relative;
z-index:2;
font-family:"Orbitron",sans-serif;
font-size:20px;
margin-bottom:14px;
}

.feature-card p{
position:relative;
z-index:2;
color:#b8b8b8;
font-size:13px;
line-height:1.8;
}

.enterprise-box{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
padding:90px;
border-radius:42px;
background:
radial-gradient(circle at 20% 20%,rgba(0,255,200,.12),transparent 35%),
radial-gradient(circle at 80% 30%,rgba(0,120,255,.10),transparent 35%),
#050b13;
border:1px solid rgba(0,255,200,.10);
}

.enterprise-box h2{
font-family:"Orbitron",sans-serif;
font-size:60px;
line-height:1.08;
margin-bottom:28px;
}

.enterprise-box h2 span{
color:#00ffd0;
}

.enterprise-box p{
color:#bfc6cf;
font-size:17px;
line-height:1.95;
}

.enterprise-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.enterprise-card{
padding:24px;
border-radius:24px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.06);
}

.enterprise-card h3{
color:#00ffd0;
font-family:"Orbitron",sans-serif;
font-size:20px;
margin-bottom:12px;
}

.enterprise-card p{
font-size:13px;
color:#aeb6bf;
line-height:1.7;
}

.cta{
padding:75px;
border-radius:36px;
background:radial-gradient(circle at 80% 50%,rgba(0,255,200,.10),transparent 40%),#091018;
border:1px solid rgba(0,255,200,.14);
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
}

.cta h2{
font-family:"Orbitron",sans-serif;
font-size:50px;
line-height:1.1;
margin-bottom:18px;
}

.cta h2 span{
color:#00ffd0;
}

.cta p{
color:#b9b9b9;
line-height:1.8;
max-width:760px;
}

.royal-footer{
position:relative;
overflow:hidden;
padding:90px 0 35px;
background:
radial-gradient(circle at 15% 20%,rgba(0,255,200,.08),transparent 30%),
radial-gradient(circle at 85% 0%,rgba(0,120,255,.08),transparent 35%),
#02050a;
border-top:1px solid rgba(255,255,255,.06);
}

.footer-glow{
position:absolute;
width:500px;
height:500px;
border-radius:50%;
background:rgba(0,255,200,.10);
filter:blur(150px);
left:-180px;
bottom:-220px;
}

.footer-top{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.3fr .9fr;
gap:50px;
align-items:center;
margin-bottom:70px;
padding-bottom:55px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.footer-brand h3{
font-family:"Orbitron",sans-serif;
color:#00ffd0;
font-size:30px;
margin-bottom:20px;
}

.footer-brand p,
.footer-newsletter p,
.contact-line{
color:#aeb6bf;
font-size:14px;
line-height:1.9;
}

.footer-status{
margin-top:24px;
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:999px;
background:rgba(0,255,136,.07);
border:1px solid rgba(0,255,136,.14);
color:#d5ffe8;
font-size:13px;
font-weight:700;
}

.footer-status span{
width:10px;
height:10px;
border-radius:50%;
background:#00ff88;
box-shadow:0 0 14px #00ff88;
}

.footer-newsletter{
padding:34px;
border-radius:28px;
background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.06);
}

.footer-newsletter h4{
font-family:"Orbitron",sans-serif;
font-size:24px;
margin-bottom:14px;
}

.footer-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:24px;
}

.footer-actions a{
padding:14px 22px;
border-radius:14px;
font-size:14px;
font-weight:800;
}

.footer-actions a:first-child{
background:linear-gradient(90deg,#00ffd0,#00a8ff);
color:black;
}

.footer-actions a:last-child{
border:1px solid rgba(255,255,255,.10);
color:white;
}

.footer-links-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1.2fr;
gap:40px;
margin-bottom:60px;
}

.footer-links-grid h4{
font-family:"Orbitron",sans-serif;
color:#00ffd0;
font-size:17px;
margin-bottom:22px;
}

.footer-links-grid a{
display:block;
color:#a7afb8;
font-size:14px;
margin-bottom:14px;
transition:.3s;
}

.footer-links-grid a:hover{
color:#00ffd0;
transform:translateX(4px);
}

.payment-badges{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
}

.payment-badges span{
padding:8px 12px;
border-radius:10px;
background:#091018;
border:1px solid rgba(255,255,255,.07);
color:#d4d4d4;
font-size:12px;
font-weight:800;
}

.footer-bottom{
position:relative;
z-index:2;
padding-top:28px;
border-top:1px solid rgba(255,255,255,.06);
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer-bottom p,
.footer-bottom a{
color:#7f8790;
font-size:13px;
}

.footer-bottom div{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.footer-bottom a:hover{
color:#00ffd0;
}

@keyframes spin{
from{
transform:rotate(0);
}

to{
transform:rotate(360deg);
}
}

@media(max-width:1450px){
.hero-grid,
.upgrade-section,
.enterprise-box{
grid-template-columns:1fr;
}

.control-room{
height:720px;
}

.node-card{
right:0;
}

.dedicated-products{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:1300px){
.hero h1{
font-size:56px;
}

.hero-metrics,
.node-stats,
enterprise-grid,
.upgrade-list{
grid-template-columns:repeat(2,1fr);
}

.feature-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:1200px){
.main-menu{
display:none;
}

.royal-logo{
min-width:auto;
}

.footer-top,
.footer-links-grid{
grid-template-columns:1fr 1fr;
}
}

@media(max-width:768px){
.topbar-right{
display:none;
}

.topbar-inner{
justify-content:center;
}

.login-link{
display:none;
}

.royal-logo strong{
font-size:17px;
}

.royal-logo span{
display:none;
}

.client-panel-btn{
padding:12px 18px;
font-size:13px;
}

.hero h1,
.section-title,
.upgrade-content h2,
.enterprise-box h2,
.cta h2{
font-size:38px;
}

.hero-metrics,
.node-stats,
.dedicated-products,
.upgrade-list,
.enterprise-grid,
.feature-grid,
.footer-top,
.footer-links-grid{
grid-template-columns:1fr;
}

.control-room{
height:auto;
display:grid;
gap:22px;
}

.node-card,
.speed-mini,
.floating-pill{
position:relative;
width:100%;
left:auto;
right:auto;
top:auto;
bottom:auto;
}

 .gaming-card{
min-height:auto;
padding:24px;
}

.game-footer{
flex-direction:column;
align-items:stretch;
}

.game-btn{
width:100%;
}


.upgrade-section,
.enterprise-box,
.cta{
padding:35px;
flex-direction:column;
align-items:flex-start;
}

.cta{
display:block;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
}
}


/* =========================================================
   GAMING COMPACT ROW VERSION - vertical list, same WOW style
   ========================================================= */
.dedicated-products{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    perspective:1600px;
}

.gaming-card{
    min-height:0 !important;
    padding:18px 20px !important;
    border-radius:28px !important;
    display:grid !important;
    grid-template-columns:300px 1fr 255px 205px !important;
    gap:18px !important;
    align-items:center !important;
    transform-style:preserve-3d;
    will-change:transform;
}

.gaming-card:hover{
    transform:translateY(-5px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
}

.gaming-card::after{
    width:26%;
    height:210%;
}

.game-card-noise{
    background-size:36px 36px;
    opacity:.13;
}

.game-bg-code{
    right:18px !important;
    bottom:-4px !important;
    font-size:62px !important;
    opacity:.9;
}

.game-top{
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
}

.game-icon{
    width:64px !important;
    height:64px !important;
    border-radius:21px !important;
    flex-shrink:0;
}

.game-icon svg{
    width:31px !important;
    height:31px !important;
}

.game-top .game-badge{
    display:none;
}

.game-title{
    margin:0 !important;
    transform:translateZ(18px);
}

.game-title h3{
    font-size:24px !important;
    margin-bottom:7px !important;
}

.game-title p{
    font-size:13px !important;
    line-height:1.55 !important;
    max-width:360px;
}

.game-top::after{
    content:attr(data-label);
}

.gaming-card .game-top + .game-title{
    margin-left:-6px !important;
}

.game-live{
    margin:0 !important;
    grid-template-columns:repeat(3, minmax(86px,1fr)) !important;
    gap:8px !important;
    transform:translateZ(14px);
}

.live-chip{
    padding:10px 8px !important;
    border-radius:14px !important;
}

.live-chip small{
    font-size:9px !important;
}

.live-chip strong{
    font-size:11px !important;
}

.game-specs{
    margin:0 !important;
    grid-template-columns:repeat(3, minmax(112px,1fr)) !important;
    gap:9px !important;
    transform:translateZ(22px);
}

.spec-pill{
    padding:12px 12px !important;
    border-radius:15px !important;
}

.spec-pill span{
    font-size:9px !important;
    margin-bottom:6px !important;
}

.spec-pill svg{
    width:13px !important;
    height:13px !important;
}

.spec-pill strong{
    font-size:13px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.power-bars{
    margin:0 !important;
    gap:9px !important;
    transform:translateZ(16px);
}

.power-row{
    grid-template-columns:42px 1fr 35px !important;
    gap:8px !important;
}

.power-row span,
.power-row strong{
    font-size:10px !important;
}

.bar{
    height:7px !important;
}

.game-footer{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    justify-content:flex-end !important;
    transform:translateZ(26px);
}

.game-price{
    font-size:30px !important;
}

.price-wrap small{
    font-size:10px !important;
}

.game-btn{
    height:50px !important;
    padding:0 22px !important;
    border-radius:15px !important;
}

.game-badge{
    padding:8px 12px !important;
    font-size:10px !important;
}

/* badge compact in title area */
.game-title::before{
    content:"Gaming Node";
    display:inline-flex;
    margin-bottom:9px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(0,255,208,.10);
    border:1px solid rgba(0,255,208,.18);
    color:#00ffd0;
    font-size:10px;
    font-weight:950;
    letter-spacing:.65px;
    text-transform:uppercase;
}
.gaming-card.featured .game-title::before{
    content:"Best for Gaming";
    background:linear-gradient(90deg,#00ffd0,#00a8ff);
    color:#00110f;
    box-shadow:0 0 28px rgba(0,255,208,.24);
}

@media(max-width:1380px){
    .gaming-card{
        grid-template-columns:270px 1fr 220px 185px !important;
        gap:14px !important;
    }
    .game-specs{
        grid-template-columns:repeat(2, minmax(120px,1fr)) !important;
    }
}

@media(max-width:1080px){
    .gaming-card{
        grid-template-columns:1fr !important;
        gap:16px !important;
        padding:22px !important;
    }
    .game-top{
        justify-content:space-between !important;
    }
    .game-top .game-badge{
        display:inline-flex;
    }
    .game-title p{
        max-width:none;
    }
    .game-footer{
        border-top:1px solid rgba(255,255,255,.075) !important;
        padding-top:16px !important;
        justify-content:space-between !important;
    }
}

@media(max-width:768px){
    .game-live,
    .game-specs{
        grid-template-columns:1fr 1fr !important;
    }
    .game-footer{
        flex-direction:column !important;
        align-items:stretch !important;
    }
}



/* =========================================================
   GAMING COMPACT TABLE V2 - specs full width, no benchmark bars
   ========================================================= */
.power-bars{display:none !important;}

.dedicated-products{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    perspective:1700px;
}

.gaming-card{
    min-height:0 !important;
    padding:18px 20px !important;
    border-radius:28px !important;
    display:grid !important;
    grid-template-columns:74px 270px minmax(520px, 1fr) 215px !important;
    grid-template-areas:
        "icon title specs action"
        "icon live  specs action" !important;
    gap:12px 18px !important;
    align-items:center !important;
    transform-style:preserve-3d;
    will-change:transform;
}

.gaming-card:hover{
    transform:translateY(-5px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
}

.game-top{
    grid-area:icon !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:translateZ(28px);
}

.game-icon{
    width:68px !important;
    height:68px !important;
    border-radius:22px !important;
}

.game-icon svg{
    width:32px !important;
    height:32px !important;
}

.game-top .game-badge{
    display:none !important;
}

.game-title{
    grid-area:title !important;
    margin:0 !important;
    transform:translateZ(20px);
}

.game-title h3{
    font-size:23px !important;
    line-height:1.1 !important;
    margin-bottom:6px !important;
}

.game-title p{
    max-width:255px !important;
    font-size:12px !important;
    line-height:1.45 !important;
    color:#9faab6 !important;
}

.game-title::before{
    margin-bottom:8px !important;
    padding:6px 10px !important;
    font-size:9px !important;
}

.game-live{
    grid-area:live !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:7px !important;
    transform:translateZ(16px);
}

.live-chip{
    padding:9px 7px !important;
    border-radius:13px !important;
}

.live-chip small{
    font-size:8px !important;
    margin-bottom:4px !important;
}

.live-chip strong{
    font-size:10px !important;
}

.game-specs{
    grid-area:specs !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(6, minmax(105px, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    transform:translateZ(24px);
}

.spec-pill{
    min-height:76px;
    padding:13px 12px !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),#09131f !important;
    border:1px solid rgba(0,255,208,.105) !important;
}

.spec-pill::before{
    background:linear-gradient(135deg,rgba(0,255,208,.12),transparent 62%) !important;
}

.spec-pill span{
    font-size:9px !important;
    margin-bottom:7px !important;
}

.spec-pill svg{
    width:13px !important;
    height:13px !important;
}

.spec-pill strong{
    font-size:13px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

.game-footer{
    grid-area:action !important;
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:12px !important;
    transform:translateZ(30px);
}

.price-wrap{
    text-align:right;
}

.price-wrap small{
    font-size:10px !important;
}

.game-price{
    font-size:31px !important;
}

.game-btn{
    height:50px !important;
    width:100% !important;
    padding:0 20px !important;
    border-radius:15px !important;
}

.game-bg-code{
    right:18px !important;
    bottom:-8px !important;
    font-size:64px !important;
}

@media(max-width:1500px){
    .gaming-card{
        grid-template-columns:72px 250px minmax(430px, 1fr) 200px !important;
        gap:12px 14px !important;
    }
    .game-specs{
        grid-template-columns:repeat(3, minmax(128px,1fr)) !important;
    }
}

@media(max-width:1120px){
    .gaming-card{
        grid-template-columns:72px 1fr 200px !important;
        grid-template-areas:
            "icon title action"
            "live live action"
            "specs specs specs" !important;
        padding:20px !important;
    }
    .game-title p{
        max-width:none !important;
    }
    .game-live{
        grid-template-columns:repeat(3, minmax(90px,1fr)) !important;
    }
    .game-specs{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

@media(max-width:768px){
    .gaming-card{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "icon"
            "title"
            "live"
            "specs"
            "action" !important;
    }
    .game-top{
        justify-content:flex-start !important;
    }
    .game-live,
    .game-specs{
        grid-template-columns:1fr 1fr !important;
    }
    .game-footer{
        border-top:1px solid rgba(255,255,255,.075) !important;
        padding-top:16px !important;
    }
    .price-wrap{
        text-align:left;
    }
}