:root{

--bg:#020617;
--bg2:#0f172a;
--card:#111827;
--card2:#1e293b;
--border:#334155;

--primary:#3b82f6;
--primary2:#2563eb;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--text:#f8fafc;
--muted:#94a3b8;

--radius:18px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.6;

}

a{

color:inherit;
text-decoration:none;

}

img{

display:block;
max-width:100%;

}

.container{

width:min(1280px,92%);
margin:auto;

}

section{

padding:80px 0;

}

.navbar{

position:sticky;

top:0;

z-index:999;

background:rgba(2,6,23,.75);

backdrop-filter:blur(18px);

border-bottom:1px solid var(--border);

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

height:72px;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-weight:800;

font-size:24px;

}

.logo-dot{

width:12px;
height:12px;

background:var(--primary);

border-radius:999px;

box-shadow:0 0 18px var(--primary);

}

.menu{

display:flex;

gap:28px;

list-style:none;

}

.menu a{

color:var(--muted);

transition:.25s;

font-weight:500;

}

.menu a:hover{

color:white;

}

.nav-actions{

display:flex;

gap:10px;

}

.nav-actions button{

background:var(--card);

border:1px solid var(--border);

color:white;

padding:10px 16px;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.nav-actions button:hover{

background:var(--primary);

}

.hero{

padding-top:120px;

padding-bottom:80px;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:center;

}

.badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:#172554;

border:1px solid #1d4ed8;

border-radius:999px;

margin-bottom:30px;

font-size:14px;

}

.hero h1{

font-size:68px;

font-weight:900;

line-height:1.05;

margin-bottom:30px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

font-size:20px;

color:var(--muted);

max-width:650px;

margin-bottom:40px;

}

.search-box{

display:flex;

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

overflow:hidden;

}

.search-box input{

flex:1;

padding:22px;

background:transparent;

border:none;

outline:none;

font-size:18px;

color:white;

}

.search-box button{

width:170px;

background:linear-gradient(
90deg,
var(--primary),
var(--primary2)
);

border:none;

color:white;

font-weight:700;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

opacity:.92;

}

.popular{

display:flex;

gap:10px;

margin-top:28px;

flex-wrap:wrap;

align-items:center;

}

.popular span{

color:var(--muted);

font-size:14px;

}

.quick-ip{

background:#172554;

border:1px solid #2563eb;

color:white;

padding:8px 14px;

border-radius:999px;

cursor:pointer;

transition:.25s;

}

.quick-ip:hover{

background:#2563eb;

}

.card{

background:linear-gradient(
180deg,
#111827,
#0f172a
);

border:1px solid var(--border);

border-radius:24px;

padding:28px;

box-shadow:

0 20px 40px rgba(0,0,0,.35);

}

.hero-card{

position:relative;

overflow:hidden;

}

.hero-card::before{

content:"";

position:absolute;

width:220px;
height:220px;

right:-70px;
top:-70px;

border-radius:999px;

background:rgba(59,130,246,.12);

filter:blur(20px);

}

.card-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.online{

background:#052e16;

color:#4ade80;

padding:6px 14px;

border-radius:999px;

font-size:12px;

font-weight:700;

}

#publicIP{

font-size:42px;

font-weight:800;

margin-bottom:30px;

word-break:break-word;

color:#60a5fa;

}

.grid-info{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.grid-info div{

padding:18px;

background:rgba(255,255,255,.03);

border-radius:14px;

border:1px solid var(--border);

}

.grid-info label{

display:block;

font-size:13px;

color:var(--muted);

margin-bottom:8px;

}

.grid-info strong{

font-size:17px;

font-weight:700;

}

.tools{

padding-top:40px;

}

.tools h2{

font-size:42px;

font-weight:800;

margin-bottom:10px;

text-align:center;

}

.tools> .container>p{

text-align:center;

color:var(--muted);

margin-bottom:50px;

font-size:18px;

}

.tool-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

}

.tool-card{

position:relative;

padding:28px;

border-radius:22px;

background:linear-gradient(
180deg,
rgba(17,24,39,.95),
rgba(15,23,42,.95)
);

border:1px solid var(--border);

transition:.3s;

cursor:pointer;

overflow:hidden;

}

.tool-card::before{

content:"";

position:absolute;

left:-40px;

top:-40px;

width:120px;

height:120px;

border-radius:999px;

background:rgba(59,130,246,.12);

transition:.3s;

}

.tool-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:

0 20px 40px rgba(37,99,235,.18);

}

.tool-card:hover::before{

transform:scale(1.5);

}

.tool-card .icon{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

border-radius:18px;

background:#172554;

margin-bottom:22px;

}

.tool-card h3{

font-size:22px;

margin-bottom:10px;

font-weight:700;

}

.tool-card p{

color:var(--muted);

font-size:15px;

line-height:1.7;

}

.stats{

padding-top:90px;

padding-bottom:90px;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

}

.stats-grid>div{

background:var(--card);

border:1px solid var(--border);

padding:40px;

border-radius:20px;

text-align:center;

transition:.3s;

}

.stats-grid>div:hover{

transform:translateY(-5px);

border-color:var(--primary);

}

.stats-grid h2{

font-size:48px;

font-weight:900;

color:var(--primary);

margin-bottom:10px;

}

.stats-grid p{

font-size:18px;

color:var(--muted);

}

.cta{

padding-top:40px;

padding-bottom:100px;

}

.cta-box{

padding:70px;

border-radius:30px;

text-align:center;

background:

linear-gradient(
135deg,
#1d4ed8,
#2563eb,
#1e3a8a
);

}

.cta-box h2{

font-size:48px;

font-weight:900;

margin-bottom:20px;

}

.cta-box p{

font-size:20px;

opacity:.9;

margin-bottom:35px;

}

.primary-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

border-radius:16px;

background:white;

color:#1d4ed8;

font-weight:700;

font-size:18px;

transition:.3s;

}

.primary-button:hover{

transform:translateY(-4px);

box-shadow:

0 20px 50px rgba(255,255,255,.25);

}

.footer{

border-top:1px solid var(--border);

padding:60px 0;

margin-top:40px;

}

.footer .container{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:40px;

}

.footer strong{

font-size:26px;

display:block;

margin-bottom:10px;

}

.footer p{

color:var(--muted);

max-width:420px;

}

.footer div:last-child{

display:grid;

grid-template-columns:repeat(2,auto);

gap:14px 40px;

}

.footer a{

color:var(--muted);

transition:.25s;

}

.footer a:hover{

color:white;

}

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

}

.tool-grid{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.hero h1{

font-size:52px;

}

}

@media(max-width:768px){

.navbar .container{

height:auto;

padding:16px 0;

flex-wrap:wrap;

gap:18px;

}

.menu{

width:100%;

overflow:auto;

padding-bottom:10px;

}

.hero{

padding-top:70px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.search-box{

flex-direction:column;

}

.search-box button{

width:100%;

height:60px;

}

.tool-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.grid-info{

grid-template-columns:1fr;

}

.footer .container{

flex-direction:column;

}

.footer div:last-child{

grid-template-columns:1fr;

}

.cta-box{

padding:40px 24px;

}

.cta-box h2{

font-size:34px;

}

}