/* ==========================================================
   ZOVAN SPEED TEST — shared stylesheet
   Breakpoints:  mobile < 640   |   tablet 640–1023   |   desktop >= 1024
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --brand:#1B4FE8; --brand-lt:#5B87FF; --brand-dk:#0A247F; --navy:#0B1533;
  --bg:#060A16; --surface:#0E1526; --surface-2:#131C31;
  --border:#1C2743; --border-lt:#26324F;
  --dl:#2F6BFF; --ul:#7FA8FF; --ping:#C7D6F5;
  --ok:#3DD68C; --warn:#FFC65C; --bad:#FF8A8A;
  --text:#EAF0FA; --muted:#67769B; --muted2:#98A8C7;
  --footer-bg:#040711; --footer-surface:#0C1322;
  --r:12px; --r-sm:9px;
  --wrap:1180px;
}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
svg.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.i.fill{fill:currentColor;stroke:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

/* ---------------- logo ---------------- */
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.logo-mark{width:30px;height:30px;flex-shrink:0}
.lw-name{font-size:1rem;font-weight:700;letter-spacing:.2em;color:#fff;line-height:1;display:block}
.lw-sub{display:flex;align-items:center;gap:6px;font-size:.46rem;font-weight:600;letter-spacing:.3em;color:var(--brand-lt);margin-top:4px;line-height:1}
.lw-sub i{display:block;width:12px;height:1px;background:currentColor;opacity:.55}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:200;background:rgba(6,10,22,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-menu{display:flex;align-items:center;gap:.4rem}
.nav-menu a{
  text-decoration:none;color:var(--muted2);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  padding:.55rem .9rem;border-radius:999px;transition:.2s;white-space:nowrap;
}
.nav-menu a:hover{color:#fff;background:rgba(47,107,255,.1)}
.nav-menu a.active{color:#fff;background:rgba(47,107,255,.16)}
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  cursor:pointer;align-items:center;justify-content:center;font-size:20px;
}
.nav-toggle:focus-visible,.nav-menu a:focus-visible{outline:2px solid var(--brand-lt);outline-offset:2px}

/* ---------------- ads ---------------- */
.ad-top{width:100%;display:flex;align-items:center;justify-content:center;background:rgba(14,21,38,.5);border-bottom:1px solid var(--border);min-height:90px;padding:8px 0;overflow:hidden}
.ad-inline{margin:2rem auto;display:flex;justify-content:center;min-height:100px;width:100%}
.layout{display:flex;gap:1.5rem;max-width:var(--wrap);margin:0 auto;width:100%;padding:0 1.5rem;flex:1;align-items:flex-start}
.main{flex:1;min-width:0;padding:2rem 0 3.5rem;display:flex;flex-direction:column;align-items:center}
.rail{width:160px;flex-shrink:0;padding:2rem 0}
.rail-ad{width:160px;min-height:600px;background:rgba(14,21,38,.45);border:1px dashed var(--border);border-radius:var(--r);position:sticky;top:80px;overflow:hidden;display:flex;justify-content:center}

/* ---------------- page heads ---------------- */
.page-head{width:100%;max-width:760px;text-align:center;margin-bottom:2rem}
.eyebrow{font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-lt);margin-bottom:.7rem}
h1{font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
h3{font-size:.86rem;font-weight:700}
.lead{font-size:.85rem;color:var(--muted2);line-height:1.75;margin-top:.8rem;max-width:560px;margin-left:auto;margin-right:auto}

/* ---------------- buttons ---------------- */
.btn{
  font-family:inherit;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:.68rem;
  border-radius:999px;cursor:pointer;transition:.2s;padding:.75rem 1.35rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid transparent;
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:#2A5DF5;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--muted2);border-color:var(--border-lt)}
.btn-ghost:hover{color:#fff;border-color:var(--brand)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn:focus-visible{outline:2px solid var(--brand-lt);outline-offset:3px}

/* ---------------- cards / forms ---------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem}
.card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.card-ic{width:38px;height:38px;border-radius:11px;background:rgba(47,107,255,.1);color:var(--brand-lt);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.card-sub{font-size:.66rem;color:var(--muted);margin-top:3px;line-height:1.5}

.field{margin-bottom:.9rem}
.field label{display:block;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.input,.select,.textarea{
  width:100%;background:var(--bg);border:1px solid var(--border-lt);border-radius:var(--r-sm);
  padding:.72rem .9rem;color:var(--text);font-family:inherit;font-size:.82rem;transition:border-color .2s;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.textarea{min-height:130px;resize:vertical;line-height:1.6}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A8C7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:15px;padding-right:2.2rem}
.row{display:flex;gap:.7rem;flex-wrap:wrap}
.row .field{flex:1;min-width:180px}
.hint{font-size:.62rem;color:var(--muted);line-height:1.6;margin-top:.5rem}
.err-text{font-size:.64rem;color:var(--bad);margin-top:.35rem;display:none}
.field.invalid .input,.field.invalid .textarea{border-color:var(--bad)}
.field.invalid .err-text{display:block}

/* ---------------- result blocks ---------------- */
.out{margin-top:1rem;border-top:1px solid var(--border);padding-top:1rem;display:none}
.out.on{display:block}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(28,39,67,.6);font-size:.75rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted);flex-shrink:0}
.kv .v{color:#fff;font-weight:600;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .7rem;border-radius:999px}
.badge.ok{background:rgba(61,214,140,.12);color:var(--ok)}
.badge.bad{background:rgba(255,138,138,.12);color:var(--bad)}
.badge.warn{background:rgba(255,198,92,.12);color:var(--warn)}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--brand-lt);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- prose (legal pages) ---------------- */
.prose{max-width:760px;width:100%;font-size:.84rem;line-height:1.85;color:var(--muted2)}
.prose h2{color:#fff;margin:2rem 0 .7rem;font-size:1rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1rem}
.prose ul{margin:0 0 1rem 1.1rem}
.prose li{margin-bottom:.45rem}
.prose strong{color:#fff;font-weight:600}
.prose a{color:var(--brand-lt)}
.updated{font-size:.62rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.6rem}

/* ---------------- footer ---------------- */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--border);margin-top:auto}
.f-top{max-width:var(--wrap);margin:0 auto;padding:2.6rem 1.5rem 2rem;display:flex;gap:2.5rem;justify-content:space-between;flex-wrap:wrap}
.f-blurb{font-size:.7rem;color:var(--muted);line-height:1.8;max-width:270px;margin-top:1rem}
.f-cols{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:2rem;flex:1;min-width:280px}
.f-col-t{font-size:.57rem;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:.9rem}
.f-col a{display:block;font-size:.72rem;color:var(--muted2);text-decoration:none;padding:.28rem 0;transition:color .2s}
.f-col a:hover{color:var(--brand-lt)}
.f-bar{border-top:1px solid var(--border)}
.f-bar-in{max-width:var(--wrap);margin:0 auto;padding:1.1rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.66rem;color:var(--muted)}
.f-disc{max-width:var(--wrap);margin:0 auto;padding:1rem 1.5rem 1.8rem;border-top:1px solid var(--border);font-size:.62rem;color:var(--muted);line-height:1.7;text-align:center;opacity:.85}

/* ==========================================================
   TABLET  (640 – 1023)
   ========================================================== */
@media (max-width:1023px){
  .rail{display:none}
  .layout{padding:0 1.25rem}
  .f-cols{grid-template-columns:repeat(3,1fr);gap:1.4rem}
}

/* ==========================================================
   MOBILE  (< 640)
   ========================================================== */
@media (max-width:639px){
  html{scroll-padding-top:68px}
  .wrap,.layout{padding:0 1.05rem}
  .nav-in{padding:0 1.05rem;height:60px}
  .nav-toggle{display:flex}
  .nav-menu{
    position:absolute;top:60px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--border);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem;
    display:none;box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  .nav-menu.open{display:flex}
  .nav-menu a{padding:.85rem 1rem;border-radius:var(--r-sm);font-size:.85rem}
  .main{padding:1.5rem 0 2.5rem}
  .ad-top{min-height:60px}
  .f-top{padding:2rem 1.05rem 1.5rem;gap:1.8rem}
  .f-cols{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .f-bar-in,.f-disc{padding-left:1.05rem;padding-right:1.05rem}
  .card{padding:1.15rem}
  .row .field{min-width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ==========================================================
   READABILITY + MOBILE PATCH — bigger, bolder, clearer text
   (added on top; safe to tweak the numbers below)
   ========================================================== */
html{font-size:103%}                 /* gentle site-wide lift for every rem size */

/* nav links — bigger + bold */
.nav-menu a{font-size:.9rem;font-weight:700}

/* headings + intro copy */
.eyebrow{font-size:.66rem}
h2{font-size:1.2rem}
h3{font-size:.95rem}
.lead{font-size:.95rem}
.lw-sub{font-size:.55rem}

/* buttons + forms + small labels (were very tiny) */
.btn{font-size:.76rem}
.card-sub{font-size:.74rem}
.field label{font-size:.66rem}
.hint{font-size:.7rem}
.input,.select,.textarea{font-size:.9rem}
.kv{font-size:.84rem}
.updated{font-size:.66rem}

/* legal / prose pages */
.prose{font-size:.95rem}
.prose h2{font-size:1.18rem}

/* footer — bigger + bolder links */
.f-blurb{font-size:.78rem}
.f-col-t{font-size:.66rem}
.f-col a{font-size:.84rem;font-weight:600}
.f-bar-in{font-size:.74rem}
.f-disc{font-size:.7rem}

@media (max-width:639px){
  .nav-menu a{font-size:1rem;font-weight:700}   /* easy tap targets */
  .lead{font-size:.92rem}
  .prose{font-size:.98rem}
  .f-cols{grid-template-columns:repeat(2,1fr);gap:1.3rem}
  .f-col a{font-size:.9rem}
}

/* ==========================================================
   COLORFUL CARD ICONS (tools page) — ovvொru tool-um thani color
   ========================================================== */
#tool-ip .card-ic{color:#5B87FF;background:rgba(91,135,255,.12)}
#tool-dns .card-ic{color:#A78BFA;background:rgba(167,139,250,.12)}
#tool-ping .card-ic{color:#FFC65C;background:rgba(255,198,92,.12)}
#tool-port .card-ic{color:#3DD68C;background:rgba(61,214,140,.12)}
#tool-v6 .card-ic{color:#35D0C3;background:rgba(53,208,195,.12)}
#tool-browser .card-ic{color:#FF8FB0;background:rgba(255,143,176,.12)}