body{
margin:0;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
background:#020617;
color:#fff;
}

p{
font-size:16px;
line-height:1.8;
margin-bottom:16px;
color:#cbd5e1;
}

a{
color:#cbd5f5;
text-decoration:none;
transition:0.2s;
}

a:hover{
color:#22d3ee;
text-shadow:0 0 3px rgba(34,211,238,0.5);
}

a:active{
color:#8b5cf6;
}

.site-header{
width:100%;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.header-inner{
max-width:1400px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 35px;
width:100%;
box-sizing:border-box;
}

.logo-area{
display:flex;
align-items:center;
margin-right:auto;
margin-top: 5px;
}

.menuDesktop{
display:flex;
align-items:center;
gap:30px;
margin-left:auto;
}

.menuDesktop a{
color:#fff;
text-decoration:none;
font-size:14px;
opacity:.8;
transition:.2s;
}

.container{
max-width:1200px;
margin:auto;
padding:5px;
}

.post-container{
max-width:900px;
margin:0 auto;
padding:20px 16px;
box-sizing:border-box;
}

.post-container h1{
font-size:32px;
line-height:1.2;
font-weight:700;
margin-bottom:20px;
letter-spacing:-0.3px;
}

.post-container h2{
font-size:22px;
line-height:1.3;
margin-top:35px;
margin-bottom:15px;
font-weight:600;
border-left:3px solid #6366f1;
padding-left:10px;
}

.post-container h3{
font-size:20px;
margin-top:25px;
margin-bottom:10px;
font-weight:600;
}

.post-container h4{
font-size:18px;
margin-top:20px;
margin-bottom:8px;
font-weight:500;
}

.post-container h5{
font-size:16px;
margin-top:15px;
margin-bottom:6px;
font-weight:500;
opacity:0.9;
}

.post-container ul,
.post-container ol{
margin-left:20px;
margin-bottom:20px;
}

.post-container li{
margin-bottom:8px;
}

.post-content{
margin-top:30px;
}

@media(max-width:600px){

.post-container{
padding:15px;
}

.post-container h1{
font-size:26px;
}

.post-container h2{
font-size:22px;
}

.post-container h3{
font-size:18px;
}

}

.hero{
    width:100%;
    padding:20px 10px 0px;
    position:relative;
    z-index:1;

    box-sizing:border-box;
}

.hero-grid{
  width:100%;
  max-width:1400px;
  margin:0 auto;

  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;

  align-items:start;
}

.cardspeed{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:24px;
  background:transparent;
  backdrop-filter:blur(4px);
}

.hero-text{
display:flex;
flex-direction:column;
justify-content:center;
min-height:700px;
}

.hero h1{
font-size:48px;
line-height:1.2;
letter-spacing:-0.3px;
}

ul{
padding:0;
margin:0;
line-height:1.2;
}

.slot-sticky{
  position:sticky;
  top:120px;

  width:300px;
  min-height:600px;

  margin-left:auto;

  border-radius:20px;

  overflow:hidden;
}

/* DESKTOP */

.desktop-slot{
    position:relative;
    width:320px;
    display:block;
}

.mobile-slot{
    display:none;
}

/* RESPONSIVE */

@media (max-width:980px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .desktop-slot{
        display:none !important;
    }

    .mobile-slot{
        display:block !important;
    }

}

#speedtest-container{
position:relative;
width:100%;
max-width:613px;
min-height:568px;
margin:0 auto;
overflow:hidden;
}

#speedtest-frame{
display:block;
width:100%;
border:none;
border-radius:16px;
opacity:0;
transform:scale(0.96);
filter:blur(6px);
transition:
opacity 0.6s ease,
transform 0.6s ease,
filter 0.6s ease;
}

.card{
background:linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,0.05);
border-radius:16px;
padding:20px;
margin-top:20px;
box-shadow:0 0 40px rgba(0,0,0,0.5);
}

.card h2, .analyze-box h2,
.history-box h2,
.improve-box h2{
font-size:1.3rem;
line-height:1.4;
margin:5px 0 12px;
font-weight:700;
letter-spacing:-0.02em;
}

@media(max-width:600px){

.card h2,
.history-box h2,
.improve-box h2{
font-size:1.15rem;
line-height:1.35;
}

}

.section-speed{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.section-speedLogo{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
}

.section-speedLogo h2{
margin:0;
}

.section-speedtext{
align-items:center;
}

.section-speedtext2{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
opacity:0.6;
}

.btn{
background:linear-gradient(90deg,#6c63ff,#00d4ff);
padding:14px;
border-radius:10px;
margin-top:15px;
cursor:pointer;
text-align:center;
}

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

@media(max-width:768px){

.grid{
grid-template-columns:1fr 1fr;
}

.hero h1{
font-size:32px;
}

.hero-text{
min-height:auto;
}

}

/* MOBILE */

@media(max-width:768px){

.menuDesktop{
display:none;
}

#menuBtn{
display:flex !important;
align-items:center;
justify-content:center;
}

.header-inner{
padding:10px 20px;
}

.logo-area{
margin-right:0;
}

.logo-area img{
width:230px;
height:auto;
display:block;
}

}

/* FOOTER TABLET */

@media(max-width:900px){

.footer-grid{
grid-template-columns:1fr !important;
gap:25px;
}

}

#network-loader{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    z-index:10;
    transition:opacity .5s ease, transform .5s ease;
    transform:translateY(-70px);
}

.network{
display:flex;
gap:20px;
margin-bottom:20px;
}

.node{
width:12px;
height:12px;
border-radius:50%;
background:#00d4ff;
animation:pulseNode 1.5s infinite;
}

.node:nth-child(2){
animation-delay:0.3s;
}

.node:nth-child(3){
animation-delay:0.6s;
}

.node:nth-child(4){
animation-delay:0.9s;
}

@keyframes pulseNode{

0%{
transform:scale(1);
opacity:0.4;
}

50%{
transform:scale(1.8);
opacity:1;
}

100%{
transform:scale(1);
opacity:0.4;
}

}

#statusText{
font-size:1.20em;
margin-top:10px;
}

.progress-bar{
width:220px;
height:6px;
background:#1e293b;
border-radius:10px;
margin-top:20px;
overflow:hidden;
}

#progress{
height:100%;
width:0%;
background:linear-gradient(90deg,#6c63ff,#00d4ff);
transition:width 0.4s ease;
}

.loader-hide{
opacity:0;
transform:scale(1.05);
pointer-events:none;
}

.analyze-box{
margin-top:20px;
padding:20px;
border-radius:16px;
background:linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,0.05);
}

.analyze-box h3{
margin-bottom:15px;
}

.inputs{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:10px;
}

.inputs input{
font-size:14px;
width:100%;
box-sizing:border-box;
background:#020617;
border:1px solid rgba(255,255,255,0.1);
border-radius:10px;
padding:12px;
color:#fff;
outline:none;
transition:0.3s;
}

.inputs input:focus{
border-color:#00d4ff;
box-shadow:0 0 10px rgba(0,212,255,0.3);
}

.analyze-btn{
margin-top:15px;
width:100%;
padding:14px;
border:none;
border-radius:12px;
background:linear-gradient(90deg,#6c63ff,#00d4ff);
color:#fff;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.analyze-btn:hover{
opacity:0.9;
transform:scale(1.02);
}

@media(max-width:768px){

.analyze-box{
padding:15px;
}

.inputs{
grid-template-columns:1fr;
}

}

.results-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

@media(max-width:768px){

.results-grid{
grid-template-columns:1fr;
}

}

.score-flex{
display:flex;
align-items:center;
gap:20px;
margin-top:15px;
}

.score-ring{
position:relative;
width:110px;
height:110px;
min-width:110px;
min-height:110px;
aspect-ratio:1/1;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:26px;
font-weight:700;
background:#1e293b;
overflow:hidden;
}

.score-ring::before{
content:"";
position:absolute;
width:78px;
height:78px;
background:#020617;
border-radius:50%;
z-index:1;
}

.score-ring span,
.score-ring small{
position:relative;
z-index:2;
}

.btn-primary{
margin-top:15px;
padding:10px 16px;
border:none;
border-radius:10px;
background:linear-gradient(90deg,#6c63ff,#00d4ff);
color:#fff;
cursor:pointer;
}

.btn-secondary{
margin-top:10px;
padding:8px 14px;
border-radius:10px;
background:#0f172a;
border:1px solid rgba(255,255,255,0.1);
color:#fff;
}

.status-flex{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
}

.status-icon{
font-size:42px;
color:#22d3ee;
opacity:0.9;
}

.status-text{
font-size:22px;
font-weight:700;
color:#94a3b8;
transition:all 0.3s ease;
}

.experience{
margin-top:0;
}

.exp-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
}

.exp-card{
padding:20px;
border-radius:16px;
background:linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,0.05);
transition:0.3s;
position:relative;
overflow:hidden;
}

.exp-card:hover{
transform:translateY(-6px) scale(1.02);
transition:0.3s ease;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.exp-card::before{
content:"";
position:absolute;
inset:0;
border-radius:16px;
padding:1px;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.15),transparent);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}

.exp-icon{
font-size:26px;
margin-bottom:10px;
}

.exp-icon svg{
width:36px;
height:36px;
stroke:#fff;
stroke-width:1.5;
opacity:0.9;
}

.exp-card h3{
margin:0;
font-size:16px;
}

.exp-card p{
margin:5px 0;
font-weight:600;
color:#22c55e;
}

.exp-card span{
font-size:12px;
opacity:0.7;
}

.gaming{
box-shadow:0 0 25px rgba(139,92,246,0.25);
}

.gaming .exp-icon svg{
stroke:#8b5cf6;
filter:drop-shadow(0 0 6px #8b5cf6);
}

.streaming{
box-shadow:0 0 25px rgba(236,72,153,0.25);
}

.streaming .exp-icon svg{
stroke:#ec4899;
filter:drop-shadow(0 0 6px #ec4899);
}

.calls{
box-shadow:0 0 25px rgba(59,130,246,0.25);
}

.calls .exp-icon svg{
stroke:#3b82f6;
filter:drop-shadow(0 0 6px #3b82f6);
}

.download{
box-shadow:0 0 25px rgba(34,197,94,0.25);
}

.download .exp-icon svg{
stroke:#22c55e;
filter:drop-shadow(0 0 6px #22c55e);
}

.sub{
font-size:15px;
opacity:0.9;
margin-top:12px;
}

small{
font-size:12px;
display:block;
margin-top:12px;
}

.history-box{
margin-top:30px;
padding:20px;
border-radius:16px;
background:linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,0.05);
box-sizing:border-box;
width:100%;
max-width:100%;
overflow:hidden;
}

.history-table{
width:100%;
border-collapse:collapse;
font-size:13px;
min-width:620px;
}

.history-table th,
.history-table td{
padding:10px;
text-align:left;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.history-table th{
opacity:0.7;
font-weight:500;
}

.view-history{
text-align:center;
margin-top:10px;
color:#00d4ff;
cursor:pointer;
}

.improve-box{
margin-top:30px;
padding:20px;
border-radius:16px;
background:linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,0.05);
}

.improve-item{
display:flex;
align-items:center;
justify-content:flex-start;
padding:14px;
border-radius:12px;
margin-bottom:10px;
text-decoration:none;
color:#fff;
transition:0.3s;
}

.improve-item span{
margin-left:auto;
}

.improve-item:hover{
background:rgba(255,255,255,0.05);
transform:translateX(6px);
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.improve-item .icon{
font-size:20px;
margin-right:15px;
}

.improve-item h2{
margin:0;
font-size:15px;
font-weight:600;
text-align:left;
}

.improve-item p{
margin:2px 0 0 0;
font-size:13px;
opacity:0.65;
text-align:left;
}

.bottom-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-top:5px;
}

@media(max-width:900px){

.bottom-grid{
grid-template-columns:1fr;
}

}

.icon{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
margin-right:14px;
background:rgba(255,255,255,0.03);
}

.icon svg{
width:24px;
height:24px;
stroke-width:1.8;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
overflow:visible;
}

.wifi{
color:#22c55e;
box-shadow:0 0 20px rgba(34,197,94,0.25);
}

.ping{
color:#38bdf8;
box-shadow:0 0 20px rgba(56,189,248,0.25);
}

.speed{
color:#a855f7;
box-shadow:0 0 20px rgba(168,85,247,0.25);
}

.fix{
color:#f59e0b;
box-shadow:0 0 20px rgba(245,158,11,0.25);
}

.delete-btn{
background:rgba(239,68,68,0.1);
border:none;
color:#ef4444;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
transition:0.3s;
}

.delete-btn:hover{
background:#ef4444;
color:#fff;
transform:scale(1.1);
}

.features{
list-style:none;
padding:0;
margin-top:20px;
}

.features li{
display:flex;
align-items:center;
gap:12px;
margin-bottom:0;
color:#cbd5f5;
font-size:14px;
}

.iconF{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
}

.iconF svg{
width:16px;
height:16px;
stroke:#4c84ff;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}

.widget{
margin:5px 0;
}

.gradient-text{
background:linear-gradient(90deg,#8b5cf6,#22d3ee);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
opacity:0.9;
}

.mobile-menu{
display:none;
flex-direction:column;
background:#070e29;
position:absolute;
top:60px;
left:0;
right:0;
width:100%;
z-index:999;
border-top:1px solid rgba(255,255,255,0.05);
box-sizing:border-box;
}

#menuBtn{
display:none;
font-size:28px;
cursor:pointer;
color:#fff;
line-height:1;
user-select:none;
}

.menu-mobile-button{
display:flex;
align-items:center;
}

.menu-item{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:10px;
color:#cbd5f5;
text-decoration:none;
font-size:15px;
transition:all 0.25s ease;
background:rgba(255,255,255,0.02);
}

.menu-item:hover{
background:linear-gradient(90deg,rgba(139,92,246,0.15),rgba(34,211,238,0.15));
color:#fff;
transform:translateX(4px);
}

.iconM{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:rgba(139,92,246,0.1);
}

.iconM svg{
width:16px;
height:16px;
stroke:#03fdfe;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
transition:0.3s;
}

.menu-item:hover .iconM svg{
stroke:#22d3ee;
}

.menuFooter a{
display:inline-block;
padding:1px 0;
margin:5px 0;
line-height:1.2;
text-decoration:none;
}

.table-wrapper{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.footersite{
margin-top:60px;
padding:40px;
border-top:1px solid rgba(255,255,255,0.05);
background:#020617;
}

.footer-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}

/* FOOTER TABLET */
@media(max-width:900px){

.footer-grid{
grid-template-columns:1fr !important;
gap:25px;
}

}

img{
max-width:100%;
height:auto;
}

.img-responsive{
width:70%;
max-width:100%;
height:auto;
display:block;
margin:2rem auto;
border-radius:12px;
box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);
transition:0.3s;
}

.img-responsive:hover{
transform:scale(1.01);
}

@media(max-width:768px){

.img-responsive{
width:100%;
margin:1rem auto;
}

}

.user-isp{
text-transform:none !important;
font-weight:400;
letter-spacing:normal !important;
font-size:inherit;
opacity:.92;
display:inline-block;
}

.user-info{
margin-top:10px;
font-size:15px;
line-height:1.6;
color:#94a3b8;
text-align:center;
font-weight:400;
}

@media(max-width:600px){

.user-info{
font-size:13px;
padding:0 10px;
line-height:1.5;
}

}

.texthome table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin:25px 0;
background:linear-gradient(180deg,#020617,#020617);
border:1px solid rgba(255,255,255,0.05);
border-radius:14px;
overflow:hidden;
}

.texthome table th{
padding:14px;
font-size:14px;
font-weight:600;
text-align:left;
color:#94a3b8;
background:rgba(255,255,255,0.02);
border-bottom:1px solid rgba(255,255,255,0.05);
}

.texthome table td{
padding:14px;
font-size:15px;
color:#e2e8f0;
border-bottom:1px solid rgba(255,255,255,0.04);
}

.texthome table tr:last-child td{
border-bottom:none;
}

.texthome table tr:hover{
background:rgba(99,102,241,0.05);
transition:0.2s;
}

.texthome table td:first-child{
font-weight:600;
color:#ffffff;
}

.texthome table tr:nth-child(even){
background:rgba(255,255,255,0.01);
}

@media(max-width:700px){

.texthome table{
display:block;
overflow-x:auto;
white-space:nowrap;
border-radius:12px;
-webkit-overflow-scrolling:touch;
}

}