/* ============================================================
   Innovative T3K — Managed IT Services
   Modern MSP website stylesheet
   ============================================================ */

:root {
  /* Palette: matched to xnetworks.gy — deep navy + cyan/violet gradient accent */
  --navy-950: #050914;
  --navy-900: #0a1630;
  --navy-800: #0d1f45;
  --navy-700: #142a52;
  --navy-600: #1c3a68;
  --slate-500: #93a7c9;
  --slate-300: #c3d0ec;
  --slate-100: #eef4ff;
  --white: #ffffff;
  --teal-500: #22e3ff;
  --teal-400: #6eeeff;
  --teal-glow: rgba(34, 227, 255, 0.35);
  --violet-500: #8b5cf6;
  --amber-500: #ffd166;
  --accent-grad: linear-gradient(90deg, #22e3ff, #8b5cf6);

  /* Light/dark theme chrome tokens (used by dark surfaces: header, hero,
     footer, CTA band, why-panel, about-visual, featured card). Overridden
     in body.light below. Gradient accent itself is untouched in both modes. */
  --chrome-bg-1: var(--navy-950);
  --chrome-bg-2: var(--navy-900);
  --chrome-bg-3: var(--navy-800);
  --chrome-bg-4: var(--navy-700);
  --chrome-text: var(--white);
  --chrome-text-muted: var(--slate-300);
  --chrome-text-faint: var(--slate-500);
  --chrome-border: rgba(255,255,255,0.08);
  --chrome-border-soft: rgba(255,255,255,0.06);
  --chrome-overlay: rgba(255,255,255,0.06);
  --chrome-overlay-strong: rgba(255,255,255,0.08);
  --chrome-ring: rgba(255,255,255,0.15);
  --chrome-header-bg: rgba(10,14,35,0.72);
  --chrome-glass-bg: rgba(9,14,28,0.72);

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(10, 17, 32, 0.08);
  --shadow-md: 0 12px 32px rgba(10, 17, 32, 0.12);
  --shadow-lg: 0 24px 64px rgba(10, 17, 32, 0.18);
  --container: 1200px;
}

/* Light mode: flips the dark chrome surfaces (header/hero/footer/CTA/
   why-panel/about-visual/featured card) to light equivalents. The brand
   gradient (--accent-grad / shimmer wordmark & footer credit) is untouched
   and intentionally identical in both modes. */
html.light, body.light {
  --chrome-bg-1: #eef3fb;
  --chrome-bg-2: #e4ecf8;
  --chrome-bg-3: #d8e3f3;
  --chrome-bg-4: #c7d6ec;
  --chrome-text: var(--navy-950);
  --chrome-text-muted: #44536e;
  --chrome-text-faint: #5b6c89;
  --chrome-border: rgba(10,22,48,0.1);
  --chrome-border-soft: rgba(10,22,48,0.06);
  --chrome-overlay: rgba(10,22,48,0.05);
  --chrome-overlay-strong: rgba(10,22,48,0.07);
  --chrome-ring: rgba(10,22,48,0.15);
  --chrome-header-bg: rgba(255,255,255,0.82);
  --chrome-glass-bg: rgba(255,255,255,0.78);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 88px; }

body {
  font-family: var(--font-body);
  color: var(--navy-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-950);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-500);
  background: rgba(34, 227, 255, 0.1);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 16px; }
.section-head p { color: var(--slate-500); font-size: 1.08rem; }

section { padding: 96px 0; position: relative; }
.section-tight { padding: 64px 0; }
.bg-light { background: var(--slate-100); }
.bg-navy { background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color: var(--white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy .section-head p { color: var(--slate-300); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-grad);
  color: var(--navy-950);
  box-shadow: 0 8px 24px var(--teal-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--teal-glow); background: var(--teal-400); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-outline-navy {
  background: transparent;
  color: var(--navy-900);
  border: 1.5px solid var(--navy-700);
}
.btn-outline-navy:hover { background: var(--navy-900); color: var(--white); }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

.form-submit-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-submit-row .btn { flex: 1 1 200px; justify-content: center; }
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #063d1f; font-weight: 700;
}
.btn-whatsapp:hover { filter: brightness(1.06); }
.btn-whatsapp svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .form-submit-row { flex-direction: column; }
}
@media (max-width: 400px) {
  .btn-lg { padding: 12px 20px; font-size: 0.9rem; }
  .form-submit-row .btn { flex: 1 1 auto; min-height: 44px; }
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--chrome-header-bg);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--chrome-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display);
  color: var(--chrome-text-muted);
}
.brand-word {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-word b { color: transparent; }
.brand small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--chrome-text-muted); letter-spacing: 0.12em; text-transform: uppercase; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: nowrap;
}
.nav-links a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--chrome-text-muted);
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--chrome-text); }

.nav-tools { position: relative; }
.nav-tools summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--chrome-text-muted);
  transition: color 0.2s ease;
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
}
.nav-tools summary::-webkit-details-marker { display: none; }
.nav-tools summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}
.nav-tools[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-tools summary:hover { color: var(--chrome-text); }
.nav-tools-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--chrome-bg-2);
  border: 1px solid var(--chrome-bg-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 190px;
  z-index: 1001;
}
.nav-tools-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--chrome-text-muted);
  white-space: nowrap;
}
.nav-tools-menu a:hover { background: var(--chrome-overlay); color: var(--chrome-text); }
.xlocal-hidden { display: none !important; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: flex; align-items: center; gap: 8px;
  color: var(--chrome-text); font-weight: 600; font-size: 0.92rem;
  white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; stroke: var(--teal-500); }
.header-wa {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  color: #25D366; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.35);
  transition: background 0.2s ease, transform 0.15s ease;
}
.header-wa:hover { background: rgba(37,211,102,0.22); transform: translateY(-1px); }
.header-wa svg { width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--chrome-overlay-strong);
  border: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--chrome-text); border-radius: 2px; transition: 0.25s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Theme toggle — matches header-wa / nav-toggle button sizing & style */
.theme-toggle {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--chrome-overlay-strong);
  border: 1px solid var(--chrome-border);
  color: var(--chrome-text);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background: var(--chrome-overlay); transform: translateY(-1px); }


/* Hero */
.hero {
  padding: 180px 0 120px;
  background: radial-gradient(circle at 15% 20%, rgba(34,227,255,0.18), transparent 45%),
              radial-gradient(circle at 85% 0%, rgba(39,67,104,0.5), transparent 50%),
              linear-gradient(160deg, var(--chrome-bg-1) 0%, var(--chrome-bg-2) 55%, var(--chrome-bg-3) 100%);
  color: var(--chrome-text);
  overflow: hidden;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  color: var(--chrome-text);
  margin-bottom: 22px;
}
.hero h1 span {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Hidden diagnostics shortcut: looks and behaves exactly like the surrounding heading text */
.hero h1 span.hp-plain {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  cursor: inherit;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--chrome-text-muted);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 28px; }
.hero-trust-item { display: flex; align-items: center; gap: 10px; color: var(--chrome-text-muted); font-size: 0.88rem; }
.hero-trust-item svg { width: 20px; height: 20px; stroke: var(--teal-500); flex-shrink: 0; }

.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 480px;
  margin: 0 auto;
}
.hero-visual .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--chrome-ring);
  animation: spin 40s linear infinite;
}
.hero-visual .ring.r2 { inset: 40px; animation-duration: 30s; animation-direction: reverse; }
.hero-visual .core {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual .core-card {
  background: var(--chrome-overlay);
  border: 1px solid var(--chrome-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(10px);
  width: 78%;
  box-shadow: var(--shadow-lg);
}
.hero-visual .node {
  position: absolute;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--chrome-bg-3);
  border: 1px solid rgba(34,227,255,0.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px var(--teal-glow);
  animation: float 6s ease-in-out infinite;
}
.hero-visual .node svg { width: 24px; height: 24px; stroke: var(--teal-400); }
.hero-visual .node .node-wifi { width: 30px; height: 30px; stroke: none; }
.service-icon .svc-wifi { width: 30px; height: 30px; stroke: none; }
.hero-visual .n1 { top: 4%; left: 8%; animation-delay: 0s; }
.hero-visual .n2 { top: 10%; right: 2%; animation-delay: 1.2s; }
.hero-visual .n3 { bottom: 6%; left: 2%; animation-delay: 2.1s; }
.hero-visual .n4 { bottom: 0%; right: 12%; animation-delay: 0.6s; }
.hero-visual .core { z-index: 1; }
.hero-visual .core-card { background: var(--chrome-glass-bg); backdrop-filter: blur(10px); }
@keyframes wifiFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) { .hero-visual .hero-wifi { animation: none; } }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Stats bar */
.stats-bar {
  background: var(--chrome-bg-2);
  border-top: 1px solid var(--chrome-border);
  border-bottom: 1px solid var(--chrome-border);
  padding: 40px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--teal-500); margin-bottom: 6px; }
.stat p { color: var(--chrome-text-muted); font-size: 0.88rem; }

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--white);
  border: 1px solid rgba(15, 27, 47, 0.08);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-500);
}
.service-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-icon svg { width: 26px; height: 26px; stroke: var(--teal-500); }
.service-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.service-card p { color: var(--slate-500); font-size: 0.95rem; margin-bottom: 16px; }
.service-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; color: var(--navy-800); }
.service-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.service-card:hover .service-link svg { transform: translateX(4px); }
.service-card.featured { background: linear-gradient(160deg, var(--chrome-bg-1), var(--chrome-bg-3)); border-color: var(--chrome-bg-4); }
.service-card.featured h3, .service-card.featured p { color: var(--chrome-text); }
.service-card.featured p { color: var(--chrome-text-muted); }
.service-card.featured .service-icon { background: rgba(34,227,255,0.15); }
.service-card.featured .service-link { color: var(--teal-400); }

/* Why us / process */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.process-list { display: flex; flex-direction: column; gap: 28px; }
.process-item { display: flex; gap: 22px; }
.process-num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  border: 1px solid rgba(15,27,47,0.1);
}
.process-item h4 { font-size: 1.08rem; margin-bottom: 6px; }
.process-item p { color: var(--slate-500); font-size: 0.95rem; }

.why-panel {
  background: var(--chrome-bg-1);
  border-radius: var(--radius-lg);
  padding: 44px;
  color: var(--chrome-text);
}
.why-panel h3 { color: var(--chrome-text); margin-bottom: 20px; font-size: 1.3rem; }
.why-panel ul { display: flex; flex-direction: column; gap: 16px; }
.why-panel li { display: flex; gap: 12px; align-items: flex-start; color: var(--chrome-text-muted); font-size: 0.95rem; }
.why-panel li svg { width: 20px; height: 20px; stroke: var(--teal-500); flex-shrink: 0; margin-top: 2px; }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,27,47,0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stars { display: flex; gap: 3px; }
.stars svg { width: 16px; height: 16px; fill: var(--amber-500); stroke: none; }
.testimonial-card p.quote { color: var(--navy-800); font-size: 0.97rem; flex-grow: 1; }
.testimonial-meta { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-800);
  color: var(--teal-400);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display); font-size: 0.85rem;
}
.testimonial-meta .name { font-weight: 600; font-size: 0.9rem; }
.testimonial-meta .date { color: var(--slate-500); font-size: 0.8rem; }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.about-visual {
  background: linear-gradient(160deg, var(--chrome-bg-2), var(--chrome-bg-4));
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--chrome-text);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.about-visual::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  background: var(--teal-500);
  filter: blur(90px);
  opacity: 0.35;
  top: -60px; right: -60px;
  border-radius: 50%;
}
.about-visual .quote-mark { font-family: var(--font-display); font-size: 4rem; color: var(--teal-500); line-height: 1; }
.about-visual blockquote { font-size: 1.15rem; font-weight: 500; color: var(--chrome-text); position: relative; z-index: 1; }
.about-visual cite { color: var(--chrome-text-muted); font-size: 0.85rem; display: block; margin-top: 16px; font-style: normal; }

.about-copy h2 { margin-bottom: 20px; }
.about-copy p { color: var(--slate-500); margin-bottom: 18px; font-size: 1.02rem; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.about-tags span {
  background: var(--slate-100);
  color: var(--navy-800);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid rgba(15,27,47,0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy-900);
  cursor: pointer;
}
.faq-question svg { width: 18px; height: 18px; stroke: var(--navy-700); transition: transform 0.25s ease; flex-shrink: 0; margin-left: 16px; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer p { padding: 0 26px 22px; color: var(--slate-500); font-size: 0.95rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--chrome-bg-1), var(--chrome-bg-4));
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  color: var(--chrome-text);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--teal-500);
  filter: blur(110px);
  opacity: 0.3;
  right: -80px; top: -80px;
}
.cta-band h2 { color: var(--chrome-text); font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 520px; position: relative; z-index: 1; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item .icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-item .icon svg { width: 22px; height: 22px; stroke: var(--navy-800); }
.contact-item h4 { font-size: 1rem; margin-bottom: 4px; }
.contact-item p, .contact-item a { color: var(--slate-500); font-size: 0.95rem; }
.contact-item a:hover { color: var(--teal-500); }

.contact-form {
  background: var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--navy-800); }
.field-hint { font-size: 0.8rem; color: var(--slate-500); margin-top: -2px; }
dialog.enq .form-group label { color: var(--slate-300); }
dialog.enq .field-hint { color: var(--slate-500); }
/* Option lists inherit the select's light text but render on the platform's
   own (white) popup background, making entries invisible. Every select on the
   site needs an explicit option colour pair, not just the one that showed it. */
select option,
select optgroup {
  background-color: #0b1222;
  color: #e8f1ff;
}
select option:checked,
select option:hover {
  background-color: #22e3ff;
  color: #0b1222;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  border: 1px solid rgba(15,27,47,0.15);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--teal-500);
}
.form-note { font-size: 0.8rem; color: var(--slate-500); margin-top: 10px; text-align: center; }
.form-note.err { color: #f87171; }
.form-success { display: none; background: rgba(34,227,255,0.12); color: var(--navy-900); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.9rem; margin-top: 16px; font-weight: 600; }
.form-success.visible { display: block; }

/* Footer */
.site-footer { background: var(--chrome-bg-1); color: var(--chrome-text-muted); padding: 72px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .brand {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.footer-brand p { color: var(--chrome-text-muted); font-size: 0.92rem; max-width: 300px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--chrome-overlay);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.footer-social a:hover { background: var(--teal-500); }
.footer-social a svg { width: 18px; height: 18px; stroke: var(--chrome-text); }
.footer-col h4 { color: var(--chrome-text); font-size: 0.95rem; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.9rem; color: var(--chrome-text-muted); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--teal-500); }
.footer-bottom {
  border-top: 1px solid var(--chrome-border);
  padding-top: 28px;
  padding-right: 110px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--chrome-text-faint);
}
@media (max-width: 640px) { .footer-bottom { padding-right: 0; } }
.footer-ip-tag {
  font-size: inherit;
  color: inherit;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--teal-500);
  color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 900;
  border: none;
  cursor: pointer;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 20px; height: 20px; }

/* Responsive */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 380px; margin-top: 40px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-visual { min-height: 320px; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.mobile-only-cta { display: none; }

@media (max-width: 1180px) and (min-width: 861px) {
  .nav-links { gap: 18px; }
  .nav-links a, .nav-tools summary { font-size: 0.85rem; }
  .header-phone span { display: none; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .header-phone span { display: none; }
  .header-actions .btn-primary { display: none; }
  .mobile-only-cta { display: inline-flex; margin-top: 8px; align-self: flex-start; }
  .site-header.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--chrome-bg-1);
    padding: 24px;
    gap: 18px;
    border-bottom: 1px solid var(--chrome-border);
  }
  .site-header.menu-open .nav-links a { font-size: 1rem; }
  .nav-tools-menu { position: static; transform: none; margin-top: 8px; box-shadow: none; }
  .nav-tools[open] summary::after { margin-top: -3px; }
  .site-header.menu-open .nav-links::after {
    content: "";
    display: block;
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .brand-word { font-size: 1rem; }
  .brand small { font-size: 0.56rem; }
  .header-inner { padding: 14px 16px; }
}

@media (max-width: 680px) {
  section { padding: 64px 0; }
  .hero { padding: 150px 0 80px; }
  .services-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 28px; flex-direction: column; text-align: center; justify-content: center; }
  .cta-band .cta-actions { justify-content: center; }
  .why-panel { padding: 30px; }
}

/* ============================================================
   Enquiry extras: speed test dialog, location/speed buttons,
   success toast + confetti (adapted from the xnetworks.gy pattern)
   ============================================================ */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.opt { color: var(--slate-500); font-weight: 400; font-size: 0.82em; }

.loc-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; text-align: center; }
.loc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  color: #0e7f99; background: rgba(34,227,255,0.12); border: 1px solid rgba(14,165,200,0.45);
  border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.loc-btn:hover { background: rgba(34,227,255,0.2); border-color: rgba(14,165,200,0.65); color: #0a6277; }
.loc-btn:disabled { opacity: 0.6; cursor: default; }
.loc-btn svg { width: 16px; height: 16px; }
.loc-note { flex-basis: 100%; text-align: center; font-size: 0.82rem; color: var(--slate-500); }
.loc-note:empty { display: none; }
.loc-note.ok { color: #4ade80; }
.loc-note.err { color: #f87171; }
.loc-note.hint { color: var(--slate-500); }

/* ---- Email verification widget (homepage Get in Touch + IT Hardware Request) ---- */
.ev-row { display: flex; gap: 6px; align-items: stretch; }
.ev-row input { flex: 1; min-width: 0; }
.ev-btn {
  flex-shrink: 0; padding: 0 11px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  color: #0e7f99; background: rgba(34,227,255,0.12); border: 1px solid rgba(14,165,200,0.45);
  border-radius: 10px; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ev-btn:hover { background: rgba(34,227,255,0.2); border-color: rgba(14,165,200,0.65); color: #0a6277; }
.ev-btn:disabled { opacity: 0.55; cursor: default; }
.ev-btn.ev-btn-verify {
  color: #15803d; background: rgba(22,163,74,0.16); border: 1px solid rgba(22,163,74,0.55);
}
.ev-btn.ev-btn-verify:hover { background: rgba(22,163,74,0.28); border-color: rgba(22,163,74,0.8); color: #0f5c2b; }
.ev-code-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ev-code-row input {
  width: 150px; letter-spacing: 3px; font-weight: 700; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ev-note { font-size: 0.82rem; color: var(--slate-500, #6b7a99); display: block; margin-top: 6px; }
.ev-note:empty { margin-top: 0; }
.ev-note.ok { color: #16a34a; font-weight: 600; }
.ev-note.err { color: #dc2626; font-weight: 600; }
.ev-verified-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: #16a34a;
  margin-top: 6px;
}
.ev-row input.ev-field-error, .form-group input.ev-field-error {
  border: 2px solid #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.16);
}
.ev-btn.ev-btn-error {
  border: 2px solid #ef4444; color: #ef4444; background: rgba(239,68,68,0.12);
  animation: evPulse 0.9s ease 2;
}
@keyframes evPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}
@keyframes evCheckPop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  55% { transform: scale(1.45) rotate(8deg); opacity: 1; }
  75% { transform: scale(0.9) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes evCheckBurst {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.ev-check {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff;
  font-size: 12px; font-weight: 900; flex-shrink: 0; margin-right: 2px;
  animation: evCheckPop 0.55s cubic-bezier(.34,1.56,.64,1);
}
.ev-check::before, .ev-check::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #4ade80; animation: evCheckBurst 0.6s ease-out both;
  pointer-events: none;
}
.ev-check::after { animation-delay: 0.1s; border-color: #22e3ff; }
@media (prefers-reduced-motion: reduce) { .ev-check, .ev-check::before, .ev-check::after { animation: none; } }
/* Centered validation modal: pops in like the success toast, but flagged red for an error.
   Shared by the "verify your email" and "phone number invalid" checks -- one modal, reused
   via showEvModal(text), so both read the exact same way. */
.ev-modal {
  position: fixed; inset: 0; z-index: 2300; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 24px; max-width: none; max-height: none; width: 100%; height: 100%; border: none;
  background: rgba(5,9,20,0.62); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.ev-modal::backdrop { background: transparent; }
.ev-modal.show {
  opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease;
}
.ev-modal-card {
  width: min(380px, 100%); border-radius: 18px; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, #121a2e, #0b1120); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
  transform: scale(0.82); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.ev-modal.show .ev-modal-card { transform: scale(1); }
.ev-modal-bar { height: 5px; background: var(--accent-grad); }
.ev-modal-icon {
  width: 52px; height: 52px; margin: 26px auto 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 900;
  color: #fff; background: #ef4444; box-shadow: 0 0 0 7px rgba(239,68,68,0.15);
}
.ev-modal-text { padding: 12px 28px 20px; font-size: 1.05rem; font-weight: 700; color: #eef4ff; line-height: 1.4; }
.ev-modal-countdown { margin: 0 0 18px; width: calc(100% - 40px); margin-inline: auto; animation-play-state: paused; }
.ev-modal.show .ev-modal-countdown { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .ev-modal, .ev-modal-card { transition: none; } }

dialog.enq {
  width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px); margin: auto; padding: 28px;
  overflow-y: auto; text-align: left; color: var(--slate-300);
  background: var(--navy-900); border: 1px solid var(--navy-700); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
dialog.enq::backdrop { background: rgba(5,9,20,0.75); backdrop-filter: blur(4px); }
dialog.enq .form-row { gap: 10px; }
dialog.enq .logo-mini {
  display: block;
  margin-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
dialog.enq .logo-mini b {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
dialog.enq h2 { font-size: 1.3rem; margin-bottom: 4px; color: var(--white); font-family: var(--font-display); }
dialog.enq .lead { color: var(--slate-300); font-size: 0.92rem; margin-bottom: 16px; line-height: 1.5; }
dialog.enq .fine { margin-top: 14px; font-size: 0.78rem; line-height: 1.45; color: var(--slate-500); }
dialog.enq .fine b { color: var(--slate-300); font-weight: 600; }
dialog.enq p.agree { margin-top: 14px; font-size: 0.84rem; line-height: 1.45; color: var(--slate-500); }
dialog.enq p.agree b { color: var(--white); font-weight: 600; }
dialog.enq p.agree a { color: var(--teal-500); }
dialog.enq.ipinfo { width: min(520px, calc(100% - 24px)); }
dialog.enq.ipinfo .logo-mini { font-size: 1.3rem; margin-bottom: 18px; }
dialog.enq.support { width: min(620px, calc(100% - 24px)); }
dialog.enq.support .logo-mini { font-size: 1.3rem; margin-bottom: 18px; }
dialog.enq.support .form-group { margin-bottom: 12px; }
dialog.enq.support textarea { min-height: 120px; resize: vertical; }

/* ---- Password Gen tool ---- */
dialog.enq.pwgen { width: min(560px, calc(100% - 24px)); }
dialog.enq.pwgen .logo-mini { font-size: 1.3rem; margin-bottom: 18px; }
.pw-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.pw-tab { flex: 1; font: inherit; font-size: 0.86rem; font-weight: 600; padding: 9px 6px; cursor: pointer;
  color: var(--slate-300); background: none; border: 0; border-radius: 9px; transition: background 0.2s ease, color 0.2s ease; }
.pw-tab:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.pw-tab.active { color: var(--navy-950); background: var(--accent-grad); }
.pw-hint { margin-top: 14px; line-height: 1.5; }
.pw-len-combo { display: flex; align-items: center; gap: 12px; }
.pw-len-combo input[type="range"] { flex: 1; }
.pw-len-combo input[type="number"] {
  width: 72px; flex-shrink: 0; padding: 8px 6px; text-align: center;
  font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--white);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(34,227,255,0.35); border-radius: 10px;
}
.pw-len-combo input[type="number"]:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(34,227,255,0.2); }
dialog.enq.pwgen select { width: 100%; }
dialog.enq.pwgen .pp-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 8px; }
dialog.enq.pwgen .pp-row select { padding: 11px 8px; font-size: 0.86rem; }
dialog.enq.pwgen .pp-row .form-group { margin-bottom: 8px; }
.pp-pos { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pp-pos button { font: inherit; font-size: 0.7rem; width: 34px; height: 28px; padding: 0; cursor: pointer; flex-shrink: 0;
  color: var(--navy-950); background: var(--accent-grad); border: 0; border-radius: 9px; }
.pp-pos button:disabled { opacity: 0.3; cursor: default; }
.pp-pos span { flex: 1; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--teal-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pos.idle { opacity: 0.45; }
.hy-sliders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hy-sliders .pw-range-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-nostore { font-weight: 700; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (max-width: 480px) { dialog.enq.pwgen .pp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } dialog.enq.pwgen .pp-row .pp-custom-group { grid-column: 1 / -1; } }
.pw-out-wrap { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pw-out {
  flex: 1; min-height: 52px; display: flex; align-items: center; padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.5px; color: var(--white); word-break: break-all; line-height: 1.35;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(34,227,255,0.35); border-radius: 12px;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.pw-out.erasing { filter: blur(6px); opacity: 0.25; }
.pw-out.stealth { color: transparent; text-shadow: 0 0 9px rgba(34,227,255,0.9); user-select: none; -webkit-user-select: none; letter-spacing: 2px; }
.pw-stealth { display: flex; align-items: center; gap: 12px; margin-top: 12px; cursor: pointer; user-select: none; }
.pw-stealth input { position: absolute; opacity: 0; width: 0; height: 0; }
.pw-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 99px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); transition: background 0.25s ease, border-color 0.25s ease; }
.pw-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--slate-300); transition: transform 0.25s ease, background 0.25s ease; }
.pw-stealth input:checked + .pw-switch { background: var(--accent-grad); border-color: transparent; }
.pw-stealth input:checked + .pw-switch::after { transform: translateX(18px); background: var(--navy-950); }
.pw-stealth input:focus-visible + .pw-switch { box-shadow: 0 0 0 3px rgba(34,227,255,0.35); }
.pw-stealth-txt { font-size: 0.88rem; color: var(--slate-300); line-height: 1.3; }
.pw-stealth-txt b { color: var(--white); }
.pw-stealth-txt small { display: block; font-size: 0.75rem; color: var(--slate-500); }
.pw-copy {
  flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  color: var(--teal-500); background: rgba(34,227,255,0.08); border: 1px solid rgba(34,227,255,0.4); border-radius: 12px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pw-copy:hover { background: rgba(34,227,255,0.18); }
.pw-copy:active { transform: scale(0.94); }
.pw-copy:disabled { opacity: 0.4; cursor: default; }
.pw-copy svg { width: 20px; height: 20px; }
.pw-meter { height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pw-meter-bar { height: 100%; width: 0; border-radius: 99px; background: #f87171; transition: width 0.35s ease, background 0.35s ease; }
.pw-strength { margin-top: 8px; font-size: 0.82rem; color: var(--slate-500); }
.pw-strength b { color: var(--white); }
.pw-ctrl { margin-top: 18px; }
.pw-range-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--slate-300); margin-bottom: 8px; }
.pw-range-label b { color: var(--teal-500); font-weight: 700; }
#pw-len, #pp-words, #un-len, #hy-words, #hy-rand { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #22e3ff var(--pw-fill, 20%), rgba(255,255,255,0.12) var(--pw-fill, 20%)); }
#pw-len::-webkit-slider-thumb, #pp-words::-webkit-slider-thumb, #un-len::-webkit-slider-thumb, #hy-words::-webkit-slider-thumb, #hy-rand::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-grad); border: 2px solid var(--navy-900); box-shadow: 0 0 0 3px rgba(34,227,255,0.25); cursor: pointer; }
#pw-len::-moz-range-thumb, #pp-words::-moz-range-thumb, #un-len::-moz-range-thumb, #hy-words::-moz-range-thumb, #hy-rand::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-grad); border: 2px solid var(--navy-900); box-shadow: 0 0 0 3px rgba(34,227,255,0.25); cursor: pointer; }
.pw-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; }
.pw-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: var(--slate-300); user-select: none; }
.pw-chk input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; flex-shrink: 0; cursor: pointer;
  border: 1px solid rgba(34,227,255,0.45); background: rgba(255,255,255,0.05); display: grid; place-items: center; }
.pw-chk input:checked { background: var(--accent-grad); border-color: transparent; }
.pw-chk input:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--navy-950); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
dialog.enq.pwgen .form-row { margin-top: 16px; }
dialog.enq.pwgen .form-group input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* explosion overlay — fixed to the viewport so it works even when the dialog scrolls on small screens */
.pw-boom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(5,9,20,0.94); z-index: 5; padding: 24px; overflow: hidden; }
.pw-boom[hidden] { display: none; }
.pw-boom-core { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(34,227,255,0.55), rgba(139,92,246,0.45) 50%, rgba(248,113,113,0.5));
  animation: pwFlash 0.55s ease-out forwards; }
@keyframes pwFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}
.pw-boom-msg { position: relative; z-index: 1; animation: pwMsgIn 0.5s ease 0.45s both; }
.pw-boom-msg .logo-mini { font-size: 1.3rem; margin-bottom: 22px; }
@keyframes pwMsgIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: none; } }
.pw-boom-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--white); }
.pw-boom-sub { margin-top: 8px; font-size: 0.92rem; color: var(--slate-300); max-width: 360px; line-height: 1.5; }
.pw-boom-count { margin-top: 14px; font-size: 0.8rem; color: var(--slate-500); }
.pw-boom-msg .countdown-bar { max-width: 220px; margin: 10px auto 0; }
.pw-boom-actions { justify-content: center; margin-top: 18px; }
.pw-boom-actions .go { min-width: 180px; padding: 14px 32px; font-size: 1rem; font-weight: 700;
  background: var(--accent-grad); color: var(--navy-950); box-shadow: 0 0 0 1px rgba(34,227,255,0.35), 0 10px 30px rgba(139,92,246,0.45); }
.pw-boom-actions .go:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(34,227,255,0.6), 0 14px 36px rgba(34,227,255,0.45); }
.pw-spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 22px; border-radius: 0; pointer-events: none; transform-origin: center;
  clip-path: polygon(50% 0, 100% 35%, 60% 100%, 0 70%);
  animation: pwSpark 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
@keyframes pwSpark { 0% { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.3); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot, 0deg) + 540deg)) scale(0.2); opacity: 0; } }
/* ---- Case Converter ---- */
.cc-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; margin: 14px 0 4px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.cc-styles .pw-tab { flex: none; width: 100%; font-size: 0.78rem; padding: 9px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caseconv textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; line-height: 1.5; resize: vertical; }
.caseconv #cc-out { background: #f2fbfe; border-color: rgba(34,227,255,0.45); }
.cc-out-group { margin-top: 14px; }
.cc-stats { margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.3px; color: var(--slate-500); text-align: right; }
@media (max-width: 560px) { .cc-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- WiFi QR Code ---- */
.wq-pass-row { display: flex; gap: 8px; align-items: stretch; }
.wq-pass-row input { flex: 1; min-width: 0; }
.wq-eye { flex: 0 0 auto; font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0 14px; cursor: pointer;
  color: var(--teal-400); background: rgba(34,227,255,0.08); border: 1px solid rgba(34,227,255,0.3);
  border-radius: 10px; transition: background 0.2s ease, color 0.2s ease; }
.wq-eye:hover { background: rgba(34,227,255,0.18); color: var(--white); }
.wq-stage { margin-top: 18px; display: flex; justify-content: center; }
.wq-card { display: none; flex-direction: column; align-items: center; gap: 0; padding: 12px;
  background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.28); }
.wq-card.on { display: flex; }
.wq-card canvas { display: block; width: 280px; height: auto; }
.wq-caption { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 260px; margin-top: -16px; }
.wq-cap-ssid { font-weight: 800; font-size: 1rem; color: #0b1222; word-break: break-word; text-align: center; }
.wq-cap-sub { font-size: 0.7rem; letter-spacing: 0.3px; color: #64748b; text-align: center; }
.wq-cap-credit { font-size: 0.7rem; letter-spacing: 0.3px; color: #64748b; text-align: center; text-transform: uppercase; }
.wq-empty { font-size: 0.82rem; color: var(--slate-500); text-align: center; margin: 10px 0; }
.wifiqr .pw-hint { margin-top: 14px; }

/* ---- IT Request wizard ---- */
.wiz-bar { display: flex; gap: 6px; list-style: none; margin: 18px 0 20px; padding: 0; }
.wiz-bar li { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 0.72rem;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--slate-500); }
.wiz-bar li span { width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 0.72rem; font-weight: 700;
  background: rgba(255,255,255,0.08); color: var(--slate-300); }
.wiz-bar li.on { color: var(--white); }
.wiz-bar li.on span { background: var(--accent-grad); color: var(--navy-950); }
.wiz-bar li.done span { background: #4ade80; color: #052e16; }
@media (max-width: 560px) { .wiz-bar li { font-size: 0; gap: 0; } .wiz-bar li span { font-size: 0.72rem; } }

/* the dialog borrows .spd for its width, which also carries a section
   padding meant for the speed-test layout -- neutralise it here */
.itreq .wiz-step { padding: 0; margin: 0; }
/* Wider than the standard dialog -- this wizard has several side-by-side
   fields (email + Send code, phone, etc.) that felt cramped at the default
   480px dialog width. */
dialog.itreq { width: min(640px, calc(100% - 24px)); }
.wiz-step { display: none; }
.wiz-step.on { display: block; animation: ir-in 0.18s ease-out; }
@keyframes ir-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ir-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px; }
.ir-seg-btn { border: 0; background: transparent; color: var(--slate-300); cursor: pointer;
  padding: 8px 18px; border-radius: 7px; font-size: 0.85rem; font-weight: 600; font-family: inherit; }
.ir-seg-btn.on { background: var(--accent-grad); color: var(--navy-950); font-weight: 700; }

.ir-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ir-card { text-align: left; cursor: pointer; font-family: inherit; padding: 13px 14px;
  border-radius: 11px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); color: var(--slate-300); transition: border-color .15s, background .15s; }
.ir-card b { display: block; color: var(--white); font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }
.ir-card span { display: block; font-size: 0.74rem; line-height: 1.35; }
.ir-card:hover { border-color: rgba(34,227,255,0.45); background: rgba(34,227,255,0.06); }
.ir-card.on { border-color: #22e3ff; background: rgba(34,227,255,0.12); }
.ir-card.on b { color: #22e3ff; }

.ir-sub { display: block; margin: 16px 0 8px; font-size: 0.78rem; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--slate-300); }
.itreq .req { color: #22e3ff; }
.ir-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ir-review { display: flex; flex-direction: column; gap: 0; margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; overflow: hidden; }
.ir-review .r { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 9px 13px;
  font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ir-review .r:last-child { border-bottom: 0; }
.ir-review .r span { color: var(--slate-500); }
.ir-review .r b { color: var(--white); font-weight: 600; word-break: break-word; }
.ir-review .r.head { background: rgba(34,227,255,0.08); grid-template-columns: 1fr; }
.ir-review .r.head b { color: #22e3ff; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.72rem; }

.ir-done { margin-top: 16px; padding: 16px; border-radius: 12px; text-align: center;
  background: rgba(74,222,128,0.12); border: 1px solid #4ade80; }
.ir-done b { display: block; font-size: 1.05rem; color: #bbf7d0; font-weight: 800; letter-spacing: 0.4px; }
.ir-done .ref { display: inline-block; margin: 9px 0 6px; padding: 7px 14px; border-radius: 8px;
  background: rgba(0,0,0,0.3); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem; letter-spacing: 1px; }
.ir-done span { display: block; font-size: 0.78rem; color: var(--slate-300); }
.itreq textarea { width: 100%; resize: vertical; }
.ir-sub em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--slate-500); }
/* The form inputs are LIGHT (white background, dark text). Setting
   color-scheme:dark here made the browser paint the date text white on that
   white background -- the date was being entered, just invisible. Match the
   other inputs instead and leave the picker icon in its native dark form. */
.itreq input[type="date"] { color-scheme: light; color: #0b1222; background: #fff; }
.itreq input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; }
.itreq input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---- Ping Test ---- */
.pg-results { margin-top: 18px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pg-target { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem; font-weight: 600; color: var(--white); word-break: break-all; }
.pg-org { margin-top: 4px; font-size: 0.78rem; font-weight: 600; color: #4ade80; }
.pg-verdict { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pg-verdict.up   { color: #052e16; background: #4ade80; }
.pg-verdict.down { color: #fff;    background: #ef4444; }
.pg-verdict.wait { color: var(--navy-950); background: var(--teal-500); }
.pg-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;
  font-size: 0.8rem; color: var(--slate-300); }
.pg-summary b { color: var(--white); font-weight: 700; }
.pg-dns { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--slate-500); }
.pg-dns i { font-style: normal; color: var(--slate-300); }
.pg-dns .r-used i { color: #4ade80; font-weight: 700; }
.pg-dns .r-stale i { color: #fbbf24; }
.pg-dns .r-none i { color: var(--slate-500); }

.pg-replies { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.pg-reply { display: grid; grid-template-columns: 54px 1fr 70px; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; color: var(--slate-300); }
.pg-reply .pg-seq { color: var(--slate-500); }
.pg-reply .pg-ms  { text-align: right; color: var(--white); font-weight: 600; }
.pg-reply > span:nth-child(2) { display: block; width: 100%; }
.pg-bar { display: block; height: 8px; border-radius: 999px; background: var(--accent-grad); min-width: 3px; }
.pg-reply.lost .pg-bar { background: #ef4444; }
.pg-reply.lost .pg-ms  { color: #fca5a5; }
.pingtool .pw-hint { margin-top: 14px; }

/* ---- Ping Test: multi-host mode ---- */
.pg-multi-check-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: -4px; margin-bottom: 14px; }
.pg-multi-check { margin: 0; }
.pg-stepper { display: flex; align-items: center; gap: 6px; }
.pg-step-btn {
  width: 28px; height: 28px; border-radius: 7px; line-height: 1; font-size: 1rem; font-weight: 700;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--white); cursor: pointer;
}
.pg-step-btn:hover:not(:disabled) { border-color: var(--teal-500); }
.pg-step-btn:disabled { opacity: 0.4; cursor: default; }
#pg-multi-count {
  width: 42px; text-align: center; padding: 5px 2px; border-radius: 7px;
  background: rgba(255,255,255,0.05); color: var(--white); border: 1px solid rgba(255,255,255,0.18); font-size: 0.86rem;
}
.pg-stepper-cap { color: var(--slate-500); font-size: 0.74rem; white-space: nowrap; }
.pg-lock-btn {
  width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 1px solid transparent;
  font-size: 0.95rem; cursor: pointer; opacity: 0.55;
}
.pg-lock-btn:hover { opacity: 1; border-color: rgba(255,255,255,0.18); }
.pg-lock-box { margin: -6px 0 14px; display: flex; justify-content: flex-end; }
#pg-lock-code {
  width: 120px; padding: 6px 10px; border-radius: 7px; font-size: 0.8rem; text-align: center;
  background: rgba(255,255,255,0.05); color: var(--white); border: 1px solid rgba(255,255,255,0.18);
  letter-spacing: 1px;
}
.pg-multi-base-group { margin-bottom: 14px; }
.pg-multi-base-group .mini-hint { color: var(--slate-500); font-weight: 400; font-size: 0.78rem; }
.pg-multi-base-hint code {
  background: rgba(255,255,255,0.08); color: var(--white); border-radius: 4px;
  padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem;
}
.pg-multi { margin-bottom: 16px; }
.pg-multi-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pg-multi-row { display: flex; gap: 8px; align-items: center; }
.pg-multi-row .pg-multi-input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05); color: var(--white);
  border: 1px solid rgba(255,255,255,0.15); font-size: 0.86rem;
  transition: border-color 0.2s ease;
}
.pg-multi-row .pg-multi-input:focus { outline: none; border-color: var(--teal-500); }
/* brief glow + scale when a subdomain box is auto-expanded with the base
   domain on tab-out, so the fill-in is noticeable, not silent */
@keyframes pg-autofill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,0.55); border-color: var(--teal-500); background: rgba(34,211,238,0.12); }
  60%  { box-shadow: 0 0 0 7px rgba(34,211,238,0); border-color: var(--teal-500); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); background: rgba(255,255,255,0.05); }
}
#pg-host.pg-auto-filled, .pg-multi-row .pg-multi-input.pg-auto-filled { animation: pg-autofill-pulse 0.7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  #pg-host.pg-auto-filled, .pg-multi-row .pg-multi-input.pg-auto-filled { animation: none; border-color: var(--teal-500); }
}
.pg-multi-remove {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; line-height: 1;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: var(--slate-300); font-size: 1.1rem; cursor: pointer;
}
.pg-multi-remove:hover:not(:disabled) { border-color: #ef4444; color: #fca5a5; }
.pg-multi-remove:disabled { opacity: 0.35; cursor: default; }
.pg-multi-results { display: flex; flex-direction: column; gap: 12px; }
.pg-multi-card {
  padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
}
.pg-multi-note { margin-top: 8px; color: #fca5a5; min-height: 1em; }

/* ---- Ping Test: multi-host GRID (desktop only, >2 hosts) ----
   Below this breakpoint the extra classes JS adds (.pg-grid-mode, .pg-wide)
   are inert and every card keeps stacking and scrolling exactly as before
   -- this block is additive, not a fork. All hosts' full results stay
   visible at once; nothing is hidden behind a tab to click through. */
@media (min-width: 820px) {
  dialog.enq.pingtool.pg-wide { width: min(980px, calc(100% - 24px)); }
  .pg-multi-results.pg-grid-mode {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px; align-items: start;
  }
  .pg-multi-results.pg-grid-mode .pg-multi-card { margin: 0; }
}

/* Confetti canvas is appended INSIDE the dialog: a modal lives in the
   browser's top layer, so a sibling elsewhere in the DOM would render
   underneath it no matter how high its z-index. */
.pg-confetti {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; border-radius: inherit;
}
dialog.pingtool { position: fixed; }

/* Same-IP celebration popup: full-viewport overlay (position: fixed, not
   absolute -- see the long comment on pgSameIpPopup in script.js for why
   fixed is required: the dialog itself scrolls, and an absolutely
   positioned child would be laid out relative to that scrolled content
   instead of what's actually on screen). z-index 60 keeps it above the
   confetti's 50 so the burst visibly plays behind the card. Lives inside
   the dialog for the same top-layer reason as .pg-confetti. */
.pg-sameip {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(7, 12, 24, 0.62); backdrop-filter: blur(3px);
  animation: pgSameipFadeIn 0.22s ease-out;
}
.pg-sameip.pg-sameip-out { animation: pgSameipFadeOut 0.22s ease-in forwards; }
@keyframes pgSameipFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pgSameipFadeOut { from { opacity: 1; } to { opacity: 0; } }
.pg-sameip-card {
  position: relative; max-width: 400px; width: 100%; text-align: center;
  padding: 30px 24px 22px; border-radius: 18px;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px rgba(34,227,255,0.55), 0 0 0 3px rgba(139,92,246,0.22),
              0 0 60px rgba(34,227,255,0.15), 0 18px 50px rgba(0,0,0,0.55);
  animation: pgSameipPop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: hidden;
}
/* faint scanning sweep across the card -- a small, cheap touch that reads
   as "live diagnostic instrument" rather than a static graphic */
.pg-sameip-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(34,227,255,0.09) 50%, transparent 60%);
  background-size: 220% 220%; animation: pgSameipSweep 3.6s linear infinite;
}
@keyframes pgSameipSweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes pgSameipPop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pg-sameip-close {
  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; z-index: 2;
  border-radius: 50%; border: 0; background: rgba(255,255,255,0.08);
  color: var(--slate-300); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.pg-sameip-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.pg-sameip-badge {
  position: relative; z-index: 1; display: inline-block; margin-bottom: 12px;
  padding: 3px 11px; border-radius: 999px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 1.6px; color: var(--navy-950); background: var(--accent-grad);
  box-shadow: 0 0 16px rgba(34,227,255,0.5);
}
.pg-sameip-msg {
  position: relative; z-index: 1; font-size: 0.92rem; font-weight: 600; color: var(--slate-100);
  line-height: 1.35; margin: 2px 6px 14px;
}
.pg-sameip-addr {
  position: relative; z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.5px;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  word-break: break-all; margin-bottom: 8px;
}
.pg-sameip-sub { position: relative; z-index: 1; font-size: 0.76rem; color: var(--slate-500); line-height: 1.3; margin-bottom: 16px; }
/* technical readout -- aggregated sent/received/loss/min/max/jitter across
   every host in the run, styled like a diagnostic instrument panel:
   monospace values, hairline grid, a colour-coded loss figure. */
.pg-sameip-stats {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.08);   /* shows through the gaps as hairlines */
  border: 1px solid rgba(255,255,255,0.1);
}
.pg-sameip-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 11px; background: rgba(255,255,255,0.03);
}
.pg-sameip-stat-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--slate-500);
}
.pg-sameip-stat-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem; font-weight: 700; color: var(--slate-100);
}
.pg-sameip-stat-val.good { color: #4ade80; }
.pg-sameip-stat-val.bad { color: #f87171; }
.pg-sameip-card .countdown-bar { margin-top: 18px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .pg-sameip, .pg-sameip-card, .pg-sameip-card::before { animation: none; }
}

/* ---- Standard countdown bar for any popup/toast that auto-dismisses on a
   timer. Set the element's own duration with an inline
   `style="--countdown-ms: <ms>ms"` so the bar always matches the real
   setTimeout it rides next to -- never hardcode a duration only in CSS,
   or the two will drift the next time someone tunes the timeout. Reuse
   this one class rather than a bespoke bar per popup. */
.countdown-bar {
  height: 3px; border-radius: 999px; background: var(--accent-grad);
  width: 100%; transform-origin: left; opacity: 0.85;
  animation: countdownShrink var(--countdown-ms, 10000ms) linear forwards;
}
@keyframes countdownShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .countdown-bar { animation: none; opacity: 0.35; }
}

.pg-found {
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: rgba(74, 222, 128, 0.12); border: 1px solid #4ade80;
  border-left: 4px solid #4ade80;
}
.pg-found b {
  display: block; color: #bbf7d0; font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.2px; font-variant-numeric: tabular-nums;
}
.pg-found span {
  display: block; margin-top: 4px; font-size: 0.74rem; color: var(--slate-300);
  font-variant-numeric: tabular-nums;
}

.pg-retry {
  display: block; margin-top: 12px; padding: 12px;
  border: 1px solid rgba(34, 227, 255, 0.35); border-radius: 10px;
  background: rgba(34, 227, 255, 0.07);
}
.pg-retry-lead { display: block; font-size: 0.78rem; color: var(--slate-300); margin-bottom: 9px; }
.pg-retry-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pg-retry-row select {
  flex: 1 1 170px; min-width: 150px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.06); color: var(--white);
  border: 1px solid rgba(255,255,255,0.18); font-size: 0.82rem;
}
.pg-retry-btn { padding: 8px 20px !important; font-size: 0.82rem !important; }
.pg-retry-btn.stop { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.pg-retry-status {
  display: block; margin-top: 9px; font-size: 0.76rem; color: var(--teal-500);
  font-variant-numeric: tabular-nums; min-height: 1em;
}
@media (max-width: 520px) { .pg-retry-row select, .pg-retry-btn { flex: 1 1 100%; } }

/* amber = the name resolves now, but to an address we cannot ping.
   Distinct from red (nothing resolving) so a state change is visible
   without reading the text. */
#pg-note.pg-warn {
  display: block; margin: 12px 0 0; padding: 10px 12px;
  color: #fde68a; background: rgba(251, 191, 36, 0.14);
  border: 1px solid #fbbf24; border-left: 4px solid #fbbf24; border-radius: 8px;
  font-weight: 700; font-size: 0.82rem; line-height: 1.4; letter-spacing: 0.2px;
  animation: pg-shake 0.3s ease-out;
}
.pg-retry.pg-retry-warn {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.07);
}
/* the countdown stays green throughout -- it reports the watch is alive and
   ticking, which is unchanged regardless of what DNS is currently returning.
   Colour-coding it too made the timer look like part of the problem. */

#pg-note.pg-err {
  display: block; margin: 12px 0 0; padding: 10px 12px;
  color: #fecaca; background: rgba(239, 68, 68, 0.16);
  border: 1px solid #ef4444; border-left: 4px solid #ef4444; border-radius: 8px;
  font-weight: 700; font-size: 0.82rem; line-height: 1.4; letter-spacing: 0.2px;
  animation: pg-shake 0.3s ease-out;
}
@keyframes pg-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.pingtool .go.stop { background: #ef4444; border-color: #ef4444; color: #fff; }
.pingtool .go.stop:hover { background: #dc2626; border-color: #dc2626; }
@keyframes pg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.pg-verdict.wait { animation: pg-pulse 1.1s ease-in-out infinite; }
.pg-reply { animation: pg-in 0.18s ease-out; }
@keyframes pg-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.pw-credit { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: 0.72rem; letter-spacing: 0.4px; color: var(--slate-500); }
.ver-link { font: inherit; color: var(--teal-400); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; transition: color 0.2s ease; }
.ver-link:hover { color: var(--teal-500); text-decoration-style: solid; }
dialog.enq.changelog { width: min(540px, calc(100% - 24px)); }
.chg-list { margin-top: 6px; max-height: 50vh; overflow-y: auto; }

/* ---- hide scrollbars in dialogs; scrolling still works by wheel,
       trackpad, touch-drag, keyboard and scroll-anchoring ---- */
.chg-list,
dialog.enq,
dialog.enq .cc-out,
#cc-out,
.pg-replies {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
}
.chg-list::-webkit-scrollbar,
dialog.enq::-webkit-scrollbar,
dialog.enq .cc-out::-webkit-scrollbar,
#cc-out::-webkit-scrollbar,
.pg-replies::-webkit-scrollbar {
  width: 0; height: 0;          /* Chrome, Safari, Edge */
}
/* keep momentum scrolling smooth on iOS */
.chg-list, dialog.enq { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.chg-rel { padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.chg-rel:first-child { border-top: 0; }
.chg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chg-ver { font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.chg-current { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--navy-950); background: var(--accent-grad); padding: 3px 8px; border-radius: 999px; }
.chg-date { margin-left: auto; font-size: 0.72rem; color: var(--slate-500); }
.chg-rel ul { margin: 0; padding-left: 18px; }
.chg-rel li { font-size: 0.86rem; color: var(--slate-300); line-height: 1.55; margin-bottom: 5px; }
.chg-rel li::marker { color: var(--teal-500); }
@media (max-width: 420px) {
  .pw-toggles { grid-template-columns: 1fr; }
  .pw-out { font-size: 0.92rem; }
  dialog.enq.pwgen .form-row { flex-direction: column; }
}
dialog.enq .ipinfo-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
dialog.enq .ipinfo-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--navy-700);
}
dialog.enq .ipinfo-row:last-child { border-bottom: none; }
dialog.enq .ipinfo-label { font-size: 0.85rem; color: var(--slate-500); flex-shrink: 0; }
dialog.enq .ipinfo-value { font-size: 0.92rem; color: var(--white); font-weight: 600; text-align: right; word-break: break-word; }
dialog.enq .fine code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
dialog.enq .actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
dialog.enq .go { padding: 12px 24px; font: inherit; font-weight: 700; cursor: pointer; color: var(--navy-950); border: 0; border-radius: 999px; background: var(--accent-grad); }
dialog.enq .go:disabled { opacity: 0.45; cursor: default; }
dialog.enq .cancel { padding: 12px 16px; font: inherit; cursor: pointer; color: var(--slate-500); background: none; border: 0; }

.spd-big { margin: 14px 0 12px; min-height: 3.4rem; font-size: 3rem; font-weight: 800; line-height: 1.1; text-align: center;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spd-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.spd-bar { height: 100%; width: 0; border-radius: 99px; background: var(--accent-grad); transition: width 0.25s linear; }
.spd-stats { display: flex; gap: 10px; margin: 16px 0 4px; }
.spd-stats-4 { flex-wrap: wrap; }
.spd-stats-4 > div { flex: 1 1 calc(50% - 5px); }
.cspd-done-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin-bottom: 2px; }
.mode-pick { border: 0; padding: 0; margin: 0 0 16px; }
.form-row[hidden], [hidden] { display: none !important; }
.mode-pick legend { padding: 0; margin-bottom: 10px; font-size: 0.82rem; font-weight: 600; color: var(--slate-300); }
.mode-opt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease; }
.mode-opt:hover { background: rgba(255,255,255,0.07); }
.mode-opt input { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer;
  border: 1px solid rgba(34,227,255,0.5); border-radius: 50%; display: grid; place-items: center; }
.mode-opt input:checked { border-color: var(--teal-500); }
.mode-opt input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-grad); }
.mode-opt:has(input:checked) { border-color: rgba(34,227,255,0.5); background: rgba(34,227,255,0.07); }
.mode-opt b { display: block; font-size: 0.9rem; color: var(--white); font-weight: 600; }
.mode-opt small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--slate-500); line-height: 1.4; }
.spd-stats div { flex: 1; padding: 14px 6px; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(34,227,255,0.25); border-radius: 12px; }
.spd-stats span { display: block; font-size: 1.7rem; font-weight: 800; color: var(--white); }
.spd-stats small { color: var(--slate-500); font-size: 0.75rem; }

.toast {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,9,20,0.55); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.toast.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.6s ease; }
.toast .card {
  width: min(420px, 100%); padding: 28px 34px 32px; text-align: center; border-radius: 20px;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); border: 1px solid var(--navy-700);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--teal-glow);
  position: relative;
  transform: translateY(10px) scale(0.98); transition: transform 0.6s ease;
}
.toast-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--slate-300); font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.toast-close:hover { background: rgba(255,255,255,0.14); color: var(--white); }
.toast.show .card { transform: none; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2100; pointer-events: none; }
.toast .logo-mini {
  margin: 0 auto 20px;
  padding-bottom: 18px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.toast .logo-mini b {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.toast .check {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.4rem; color: var(--navy-950); background: var(--accent-grad);
  animation: pop 0.7s cubic-bezier(.2,1.4,.4,1) both 0.15s;
}
@keyframes pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.toast h3 { font-size: 1.25rem; margin-bottom: 6px; color: var(--white); font-family: var(--font-display); }
.toast p { color: var(--slate-300); line-height: 1.5; font-size: 0.95rem; }
.toast p + p { margin-top: 10px; }
#toast-text strong { display: block; color: var(--white); font-size: 1rem; margin-bottom: 8px; }
.toast .card .countdown-bar { margin-top: 18px; }

@media (max-width: 480px) {
  .loc-note.hint { display: none; }
}

.pg-local-extra { margin-top: 8px; }
.pg-local-stepper-row { margin-top: 8px; }
#pg-local-count { width: 42px; text-align: center; padding: 5px 2px; border-radius: 7px; background: rgba(255,255,255,0.05); color: var(--white); border: 1px solid rgba(255,255,255,0.18); font-size: 0.86rem; }

/* ---- network scan (find available IPs, xlan-gated, v4.14) ---- */
.pg-scan-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
.pg-scan-row { display: flex; gap: 8px; margin-top: 6px; }
.pg-scan-row input { flex: 1 1 auto; min-width: 0; }
.pg-scan-btn { flex: 0 0 auto; white-space: nowrap; }
.pg-scan-results { margin-top: 12px; }
.pg-scan-status { margin: 0 0 10px; font-size: 0.86rem; color: var(--white); }
.pg-scan-status.pg-scan-err { color: #ff6b6b; font-weight: 600; }
.pg-scan-section { margin-bottom: 12px; }
.pg-scan-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8aa; margin-bottom: 6px; }
.pg-scan-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.pg-scan-grid::-webkit-scrollbar { width: 0; height: 0; }
/* Scan/range chips (v4.26). The slanted outline is drawn as two stacked
   clip-path layers -- the element itself in the edge colour, a ::before
   inset 1px in the fill colour -- because a CSS border on a clip-path
   parallelogram is cut off along both slants, leaving only top and bottom
   lines. Colours come from --chip-edge / --chip-fill per state. */
.pg-scan-ip {
  --chip-edge: rgba(255,255,255,0.18); --chip-fill: #131b2d;
  position: relative; isolation: isolate; display: inline-block;
  font-size: 0.82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 13px; line-height: 1.35;
  color: #9fb0c8; background: var(--chip-edge); border: 0;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  user-select: none; -webkit-user-select: none; -moz-user-select: none;
  transition: transform .1s;
}
.pg-scan-ip::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  background: var(--chip-fill);
  clip-path: polygon(6.5px 0, 100% 0, calc(100% - 6.5px) 100%, 0 100%);
  transition: background .15s;
}
.pg-scan-ip.free { --chip-edge: rgba(34,227,255,0.55); --chip-fill: #0d2636; color: #8ff0ff; cursor: pointer; }
.pg-scan-ip.free:hover { --chip-fill: #12364a; }
.pg-scan-ip.used.copyable { cursor: pointer; }
.pg-scan-ip.used.copyable:hover { --chip-fill: #1b2540; }
.pg-scan-ip.copyable:active, .pg-scan-ip.free:active { transform: scale(0.96); }
.pg-scan-ip:focus-visible { outline: none; --chip-edge: #22e3ff; }
/* range results: alive = green and glowing, dead = red */
.pg-scan-ip.alive { --chip-edge: #22c55e; --chip-fill: #0b2a1b; color: #4ade80; font-weight: 700; animation: pgLiveGlow 2.2s ease-in-out infinite; }
.pg-scan-ip.alive:hover { --chip-fill: #103a25; }
.pg-scan-ip.dead { --chip-edge: rgba(239,68,68,0.7); --chip-fill: #2a1117; color: #fca5a5; }
.pg-scan-ip.dead:hover { --chip-fill: #3a161e; }
@keyframes pgLiveGlow { 0%,100% { text-shadow: 0 0 0 rgba(74,222,128,0); } 50% { text-shadow: 0 0 9px rgba(74,222,128,0.85); } }
.pg-scan-ip.copied { --chip-edge: transparent; --chip-fill: transparent; background: var(--accent-grad); color: #06121a; font-weight: 600; animation: none; }
.pg-scan-label.alive { color: #4ade80; }
.pg-scan-label.dead { color: #f87171; }
@media (prefers-reduced-motion: reduce) { .pg-scan-ip.alive { animation: none; } }

/* ---- quick ping popup on double-click of a scan result (v4.16) ----
   Full-screen fixed overlay + centered card, same proven pattern as
   .pg-sameip so it can never end up hidden/blurred behind the dialog
   content regardless of scroll position. */
.pg-scan-ping-popup {
  position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 9, 18, 0.92); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: pgSameipFadeIn 0.22s ease-out;
  text-align: left;
}
.pg-scan-ping-popup[hidden] { display: none; }
.pg-scan-ping-card {
  position: relative; max-width: 420px; width: 100%;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  box-shadow: 0 0 0 1.5px rgba(34,227,255,0.55), 0 0 0 3px rgba(139,92,246,0.22),
              0 0 60px rgba(34,227,255,0.15), 0 18px 50px rgba(0,0,0,0.55);
  animation: pgSameipPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.pg-scan-ping-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 18px 0;
}
.pg-scan-ping-popup .pg-summary { padding: 10px 18px 0; }
.pg-scan-ping-popup .pg-replies { padding: 10px 18px 14px; max-height: 180px; overflow-y: auto; scrollbar-width: none; }
.pg-scan-ping-popup .pg-replies::-webkit-scrollbar { width: 0; height: 0; }
.pg-scan-ping-target { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 1.05rem; color: var(--white); }
.pg-scan-ping-close {
  background: none; border: none; color: #9fb0c8; font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: 2px 6px; margin-left: auto;
}
.pg-scan-ping-close:hover { color: var(--white); }
.pg-scan-ping-popup .countdown-bar { margin: 4px 18px 16px; width: calc(100% - 36px); }

/* ---- shimmer-sweep wordmark + footer credit (design DNA, Oct 2026; seam-free two-layer version) ---- */
@keyframes shimmerSweep { 0%{background-position:120% 0, 0 0} 55%{background-position:-20% 0, 0 0} 100%{background-position:-20% 0, 0 0} }
@media (prefers-reduced-motion: reduce) { .brand-word, .credit, .pg-scan-shimmer, .pg-scan-summary { animation:none; } }
/* range/scan result summary: theme gradient text + the footer credit's sweep (v4.25) */
.pg-scan-summary {
  display:inline; font-weight:500;
  background:
    linear-gradient(110deg, rgba(234,252,255,0) 40%, rgba(234,252,255,.95) 50%, rgba(234,252,255,0) 60%),
    var(--accent-grad);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  animation:shimmerSweep 6s ease-in-out infinite;
}
.pg-scan-summary b { font-weight:800; color:inherit; }
.brand-word {
  background:
    linear-gradient(110deg, rgba(234,252,255,0) 40%, rgba(234,252,255,.92) 50%, rgba(234,252,255,0) 60%),
    var(--accent-grad);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerSweep 6s ease-in-out infinite;
}
.credit {
  display:inline-block; font-weight:800; letter-spacing:1px;
  background:
    linear-gradient(110deg, rgba(100,116,139,0) 38%, #22e3ff 48%, #8b5cf6 55%, rgba(100,116,139,0) 65%),
    linear-gradient(#64748b, #64748b);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerSweep 6s ease-in-out infinite;
}

/* ---- theme-color shimmer for transient scan-status text (Ping Test, v4.22) ---- */
.pg-scan-shimmer {
  display:inline-block; font-weight:600;
  background:
    linear-gradient(110deg, rgba(234,252,255,0) 40%, rgba(234,252,255,.92) 50%, rgba(234,252,255,0) 60%),
    var(--accent-grad);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:120% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerSweep 2.2s ease-in-out infinite;
}