:root{
    --bg:#07110f;
    --panel:#0e1d19;
    --panel2:#10251f;
    --line:#203b34;
    --text:#f4f8f6;
    --muted:#91a79f;
    --accent:#18a67d;
    --accent2:#0f766e;
    --max:1000px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 25% -10%, rgba(24,166,125,.2), transparent 34%),
        var(--bg);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.topbar{
    max-width:var(--max);
    margin:auto;
    padding:24px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    font-size:29px;
    font-weight:900;
    letter-spacing:-1px;
}
.logo span{color:#47d0a7}
nav{
    display:flex;
    gap:22px;
    color:#c8d7d2;
    font-size:14px;
}
main{
    max-width:900px;
    margin:auto;
    padding:42px 20px 80px;
}
.hero{
    text-align:center;
    padding:34px 0 30px;
}
.eyebrow,.label{
    color:#66dab7;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}
.hero h1{
    margin:12px 0;
    font-size:clamp(44px,8vw,76px);
    line-height:1;
    letter-spacing:-3px;
}
.hero p{
    max-width:680px;
    margin:auto;
    color:var(--muted);
    font-size:18px;
    line-height:1.65;
}
.panel{
    margin-top:20px;
    padding:27px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(15,31,26,.98),rgba(10,23,19,.98));
    box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}
.ip-card h2{
    margin:8px 0 0;
    font-size:clamp(29px,5vw,48px);
    letter-spacing:-1.5px;
    word-break:break-all;
}
.button{
    padding:13px 18px;
    border-radius:13px;
    cursor:pointer;
    font-weight:850;
}
.secondary{
    color:#eef7f4;
    background:#122a23;
    border:1px solid var(--line);
}
.grid{
    display:grid;
    gap:12px;
    margin-top:24px;
}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.stat{
    min-width:0;
    padding:17px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#091712;
}
.stat span{
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-size:12px;
}
.stat strong{
    display:block;
    overflow-wrap:anywhere;
    font-size:17px;
}
.small-note{
    margin:18px 0 0;
    color:#81978f;
    font-size:12.5px;
    line-height:1.65;
}
.section-heading h2{
    margin:7px 0 6px;
    font-size:30px;
}
.section-heading p{
    margin:0;
    max-width:720px;
    color:var(--muted);
    line-height:1.65;
}
.network-line{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:12px;
    padding:16px 17px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#091712;
}
.network-line span{color:var(--muted)}
.network-line strong{text-align:right;overflow-wrap:anywhere}
.accuracy-box,.error-box{
    margin-top:18px;
    padding:16px 17px;
    border-radius:14px;
    line-height:1.55;
}
.accuracy-box{
    border:1px solid #315a4d;
    background:#0e2921;
    color:#cce8df;
}
.accuracy-box strong{margin-right:5px}
.error-box{
    border:1px solid #604b2c;
    background:#271f11;
    color:#ead7b7;
}
.attribution{
    margin:16px 0 0;
    color:#758a82;
    font-size:12px;
}
.attribution a{
    color:#85dfc2;
    text-decoration:underline;
}
.tech-row{
    margin-top:18px;
}
.tech-row span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:8px;
}
.tech-row code{
    display:block;
    padding:15px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#081410;
    color:#cde4dc;
    white-space:normal;
    overflow-wrap:anywhere;
}
.faq{
    margin-top:38px;
}
.faq h2{
    font-size:29px;
}
details{
    border-top:1px solid var(--line);
    padding:18px 0;
}
summary{
    cursor:pointer;
    font-weight:850;
}
details p{
    margin-bottom:0;
    color:var(--muted);
    line-height:1.65;
}
footer{
    max-width:var(--max);
    margin:auto;
    padding:25px 20px 38px;
    border-top:1px solid #142721;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#71867e;
    font-size:12px;
}
@media(max-width:680px){
    nav{display:none}
    main{padding-top:15px}
    .hero{text-align:left}
    .hero h1{letter-spacing:-2px}
    .hero p{font-size:16px}
    .panel{padding:19px}
    .panel-top{align-items:flex-start;flex-direction:column}
    .button{width:100%}
    .grid.three,.grid.two{grid-template-columns:1fr}
    .network-line{flex-direction:column;gap:6px}
    .network-line strong{text-align:left}
    footer{flex-direction:column;gap:5px}
}