body{margin:0;background:#09090b;color:#fafafa;font-family:Inter,sans-serif}
html{scroll-behavior:smooth;}
nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 8%;

    border-bottom:1px solid #27272a;

}
nav a{

    color:#a1a1aa;

    text-decoration:none;

    margin-left:24px;

    transition:.2s;

}

nav a:hover{

    color:white;

}
.brand{

    color:#fff;

    text-decoration:none;

    font-weight:800;

    font-size:1.3rem;

}

.brand:hover{

    color:#fff;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:32px;

}

.nav-links a{

    color:#a1a1aa;

    text-decoration:none;

    font-weight:500;

    transition:.2s;

}

.nav-links a:hover{

    color:#fff;

}

@media(max-width:700px){

    nav{

        flex-direction:column;

        gap:15px;

    }

    .nav-links{

        gap:20px;

    }

}
.hero{text-align:center;padding:70px 20px}
.eyebrow{color:#60a5fa;letter-spacing:.25em;font-size:.8rem}
h1{font-size:3rem;margin:.4em 0}
.ip{font-size:3.4rem;font-weight:800;margin:20px 0}
button{background:#2563eb;color:#fff;border:none;padding:14px 28px;border-radius:999px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:20px 8%}
.card,.tools{background:#18181b;border:1px solid #27272a;border-radius:18px}
.card{

    padding:30px;

    height:100%;

    overflow:hidden;

    box-sizing:border-box;

}
.tools{margin:40px 8%;padding:24px}
.tool{display:flex;justify-content:space-between;padding:16px 0;border-top:1px solid #27272a;color:#fafafa;text-decoration:none}
.tool:first-of-type{border-top:none}
footer{text-align:center;padding:40px;color:#71717a}
@media(max-width:700px){h1{font-size:2.2rem}.ip{font-size:2.2rem}nav{flex-direction:column;gap:10px}}
/* -------------------------
   Promo Card
-------------------------- */

.promo,
.seo {
    max-width: 1100px;
    margin: 50px auto;
    padding: 40px;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 18px;
    box-sizing: border-box;
}

.promo h2,
.seo h2 {
    font-size: 2rem;
    margin: 0 0 15px;
}

.promo p,
.seo p {
    color: #b4b4b8;
    font-size: 1.05rem;
    line-height: 1.8;
}

.promo a {
    display: inline-block;
    margin-top: 18px;
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
}

.promo a:hover {
    color: white;
}

.logo {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.tagline {
    margin-top: 20px;
    color: #a1a1aa;
    font-size: 1rem;
}
.promo-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.promo-link:hover .promo{
    transform:translateY(-3px);
    transition:.2s;
}
footer {
    margin-top: 60px;
    padding: 40px;
    text-align: center;
    color: #71717a;
}

/* ===========================
   TOOLBOX
=========================== */

.tool-grid{

    max-width:1200px;

    margin:50px auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

    padding:0 20px;

}

.tool-card{

    position:relative;

    background:#18181b;

    border:1px solid #27272a;

    border-radius:20px;

    padding:30px;

    transition:all .25s ease;

}

.tool-card.live{

    cursor:pointer;

}

.tool-card.live:hover{

    transform:translateY(-4px);

    border-color:#3b82f6;

    background:#1d1d22;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 0 1px rgba(59,130,246,.15);

}
.tool-card h2{

    margin-top:25px;

    margin-bottom:15px;

}

.tool-card p{

    color:#b4b4b8;

    line-height:1.7;

}

.tool-card span{

    display:inline-block;

    margin-top:25px;

    color:#60a5fa;

    font-weight:600;

}

.badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:6px 12px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}

.live-badge{

    background:#166534;

    color:#dcfce7;

}
.soon-badge{

    background:#27272a;

    color:#a1a1aa;

}
a.tool-card{
    text-decoration:none;
    color:inherit;
    display:block;
}

a.tool-card:hover{
    color:inherit;
}

a.tool-card h2,
a.tool-card p{
    color:inherit;
    text-decoration:none;
}

a.tool-card span{
    color:#60a5fa;
}
.dns-record{

    padding:12px 0;

    border-bottom:1px solid #27272a;

    font-family:monospace;

}

.dns-record:last-child{

    border-bottom:none;

}
.dns-record{

    display:block;

    width:100%;

    margin:0;

    padding:14px 0;

    border-bottom:1px solid #2d2d2d;

    color:#e4e4e7;

    font-size:16px;

    line-height:1.5;

    text-align:left;

    overflow-wrap:anywhere;

}

.dns-record:last-child{

    border-bottom:none;

}

.dns-table{

    width:100%;

    border-collapse:collapse;

    margin-top:15px;

}

.dns-table th{

    text-align:left;

    padding:12px;

    border-bottom:1px solid #27272a;

    color:#d4d4d8;

}

.dns-table td{

    padding:12px;

    border-bottom:1px solid #27272a;

}
input{

    background:#111;

    color:white;

    border:1px solid #333;

    border-radius:14px;

    padding:16px;

    font-size:16px;

    transition:.2s;

}

input:focus{

    outline:none;

    border-color:#3b82f6;

    box-shadow:0 0 0 3px rgba(59,130,246,.15);

}
.card h2{margin-top:0;}
.card h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0 0 24px;

}
.card{overflow:hidden;}

.cidr-grid{

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

    gap:24px;

    align-items:stretch;

}

@media(max-width:900px){

    .cidr-grid{

        grid-template-columns:1fr;

    }

}
#results{

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

}
.card{

    transition:border-color .2s ease;

}

.card:hover{

    border-color:#3b3b45;

}
/* Homepage Tool Preview */

.promo .tool-grid{

    padding:0;

    margin:30px 0;

}

.promo .tool-card{

    padding:22px;

}

.promo .tool-card h2{

    font-size:1.35rem;

    margin-top:0;

}

.promo .tool-card p{

    font-size:.95rem;

    line-height:1.6;

}
.learning-links{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.learning-links a{

    color:#60a5fa;

    text-decoration:none;

}

.learning-links a:hover{

    color:white;

}