:root{
  --di-primary:#1d4ed8;
  --di-primary-soft:#eff4ff;
  --di-teal:#0d9488;
  --di-ink:#0f172a;
  --di-muted:#5b6b82;
  --di-bg:#ffffff;
  --di-soft:#f6f8fb;
  --di-border:#e4e9f1;
  --di-radius:1rem;
  --di-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px -12px rgba(29,78,216,.18);
}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--di-ink);background:var(--di-bg);
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
main{flex:1}
h1,h2,h3{letter-spacing:-.02em}

/* Header */
.site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.site-header .navbar-brand{letter-spacing:-.02em;font-size:1.3rem}
.brand-mark{color:var(--di-primary)}
.site-header .nav-link{font-weight:500;color:var(--di-ink)}
.site-header .nav-link:hover,.site-header .nav-link.active{color:var(--di-primary)}
.btn-primary{background:var(--di-primary);border-color:var(--di-primary)}
.btn-primary:hover{background:#1e40af;border-color:#1e40af}
.btn-outline-primary{color:var(--di-primary);border-color:#bfd0f7}
.btn-outline-primary:hover{background:var(--di-primary);border-color:var(--di-primary)}

/* Hero */
.hero{
  background:
    radial-gradient(48rem 22rem at 85% -10%,#e3edff 0%,transparent 60%),
    radial-gradient(40rem 20rem at 5% 0%,#e6faf6 0%,transparent 55%),
    linear-gradient(180deg,#fbfcff 0%,#fff 100%);
  border-bottom:1px solid var(--di-border);
}
.hero h1{font-weight:800}
.hero .lead{max-width:38rem}

/* Cards */
.card{border:1px solid var(--di-border);border-radius:var(--di-radius);box-shadow:var(--di-shadow)}
.tool-card{
  border:1px solid var(--di-border);border-radius:var(--di-radius);
  background:#fff;height:100%;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--di-shadow);border-color:#c4d4f7}
.tool-card .icon{
  width:46px;height:46px;border-radius:.9rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--di-primary-soft);font-size:1.3rem;
}

/* Results */
.result-table{margin-bottom:0}
.result-table td,.result-table th{vertical-align:middle;padding:.65rem .9rem}
.result-table th{width:40%;color:var(--di-muted);font-weight:600}
.result-table tbody tr:nth-child(odd){background:#fafcff}
pre.report{background:#0f172a;color:#e2e8f0;border-radius:.75rem;padding:1rem;max-height:320px;overflow:auto;font-size:.82rem}

/* Sections */
.section-soft{background:var(--di-soft);border-top:1px solid var(--di-border);border-bottom:1px solid var(--di-border)}
.faq details{border:1px solid var(--di-border);border-radius:.8rem;padding:.95rem 1.1rem;background:#fff}
.faq summary{font-weight:600;cursor:pointer}
.faq details[open]{box-shadow:var(--di-shadow)}

/* Content */
.breadcrumb{background:transparent;padding:.75rem 0;margin-bottom:0}
.article-content{line-height:1.75}
.article-content h2{margin-top:1.8rem;font-size:1.35rem}
.article-content img{max-width:100%;height:auto;border-radius:.75rem;border:1px solid var(--di-border)}
.article-content table{width:100%;margin:1rem 0;border:1px solid var(--di-border);border-radius:.75rem;overflow:hidden}
.article-content th,.article-content td{padding:.6rem .8rem;border-bottom:1px solid var(--di-border);text-align:left}
.article-content thead th{background:var(--di-soft)}
.toc{background:var(--di-soft);border:1px solid var(--di-border);border-radius:.75rem;padding:1rem 1.25rem}
.ad-placeholder .ad-slot{min-height:90px;border:1px dashed var(--di-border);border-radius:.75rem;background:#fff}
.table-responsive{border-radius:.75rem;border:1px solid var(--di-border)}
.site-footer{font-size:.95rem}

/* IP hero + fact cards (my-ip) */
.ip-hero{background:linear-gradient(180deg,#f1f6ff 0%,#fff 100%);border-color:#d7e3fa}
.ip-hero-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(2rem,6vw,3.25rem);font-weight:800;letter-spacing:-.02em;margin:.25rem 0;
  overflow-wrap:anywhere;
}
.ip-facts{margin:0}
.ip-facts>div{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--di-border)}
.ip-facts>div:last-child{border-bottom:0}
.ip-facts dt{color:var(--di-muted);font-weight:500;font-size:.9rem;flex-shrink:0}
.ip-facts dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere;font-size:.92rem}
.cta-strip{background:var(--di-soft)}

/* Mega menu */
.mega-menu{border:1px solid var(--di-border);border-radius:1rem;box-shadow:0 24px 60px -20px rgba(15,23,42,.28)}
@media(min-width:992px){
  .navbar .position-static .mega-menu{left:0;right:0;width:100%;margin-top:.5rem}
}
.mega-item{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .7rem;border-radius:.75rem;text-decoration:none;color:var(--di-ink)}
.mega-item:hover{background:var(--di-primary-soft)}
.mega-item strong{display:block;font-size:.92rem}
.mega-item small{color:var(--di-muted);display:block;line-height:1.35}
.mega-icon{width:38px;height:38px;flex-shrink:0;border-radius:.7rem;background:var(--di-primary-soft);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem}
.mega-feat{display:block;text-decoration:none;color:var(--di-ink);border:1px solid var(--di-border);border-radius:.9rem;padding:.8rem;height:100%;transition:border-color .15s ease,box-shadow .15s ease}
.mega-feat:hover{border-color:#c4d4f7;box-shadow:var(--di-shadow)}
.mega-feat strong{display:block;font-size:.92rem;margin-top:.45rem}
.mega-feat small{color:var(--di-muted);line-height:1.35;display:block}

/* Shared hero + fact cards (all tools) */
.panel-hero{background:linear-gradient(180deg,#f1f6ff 0%,#fff 100%);border-color:#d7e3fa}
.panel-hero-value{font-size:clamp(1.6rem,4.5vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin:.25rem 0;overflow-wrap:anywhere}

/* Homepage live snapshot */
.snapshot-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.snap-fact{background:var(--di-soft);border:1px solid var(--di-border);border-radius:.75rem;padding:.5rem .75rem;height:100%}
.snap-fact span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--di-muted);font-weight:700}
.snap-fact strong{font-size:.93rem;overflow-wrap:anywhere}

/* Motion respect + mobile */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tool-card:hover{transform:none}}
@media(max-width:576px){
  .result-table th{width:46%}
  .hero h1{font-size:2rem}
  .display-5{font-size:2.1rem}
}