/* =========================================================================
   Home tool cards — the four feature cards on the home page.

   Every selector is namespaced .tc so nothing here can collide with the rest
   of the site. Each card sets three variables:
     --a     accent (icon, ticks, dot)
     --grad  the card gradient
     --glow  the corner highlight tint

   The cards are dark by design in both themes: they are the one deliberately
   inverted surface on the page, so there is no separate dark block for them
   beyond the page furniture they sit on.
   ========================================================================= */

.tc-grid{
  --gap:20px;
  display:flex;flex-wrap:wrap;gap:var(--gap);align-items:stretch;
  font-family:var(--font-body,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
}
.tc-grid *{box-sizing:border-box}
.tc{
  flex:0 1 calc(50% - (var(--gap) / 2));min-width:0;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:16px;padding:20px 22px 17px;color:#fff;letter-spacing:-.005em;
  background:var(--grad);
  box-shadow:0 2px 4px rgba(6,40,34,.12),0 22px 46px -26px rgba(6,40,34,.55);
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s;
}
.tc:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(6,40,34,.14),0 30px 58px -26px rgba(6,40,34,.62)}
.tc::before{                                  /* soft corner orb */
  content:"";position:absolute;right:-70px;top:-96px;width:266px;height:266px;border-radius:50%;
  background:var(--glow);pointer-events:none;
}
.tc::after{                                   /* faint technical grid */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
}
.tc > *{position:relative;z-index:1}

/* Row ratios: 60/40. The 2px slack stops sub-pixel rounding from wrapping a row. */
.tc--w60{flex:0 1 calc(60% - 11px)}
.tc--w40{flex:0 1 calc(40% - 11px)}

.tc--audit{
  --a:#7ff0c6; --glow:rgba(255,255,255,.08);
  --grad:radial-gradient(70% 60% at 88% -8%,rgba(255,255,255,.17),rgba(255,255,255,0) 60%),
         linear-gradient(150deg,#12806f 0%,#0d6a5c 58%,#0a5a4e 100%);
}
.tc--inspect{
  --a:#8fe8cd; --glow:rgba(255,255,255,.07);
  --grad:radial-gradient(70% 60% at 88% -8%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),
         linear-gradient(152deg,#0f7364 0%,#0a5347 58%,#06342c 100%);
}
.tc--net{
  --a:#7fd6f0; --glow:rgba(127,214,240,.12);
  --grad:radial-gradient(70% 60% at 88% -8%,rgba(127,214,240,.2),rgba(255,255,255,0) 60%),
         linear-gradient(150deg,#0f6f80 0%,#0a4a63 58%,#062f42 100%);
}
.tc--speed{
  --a:#ffd479; --glow:rgba(255,212,121,.12);
  --grad:radial-gradient(70% 60% at 88% -8%,rgba(255,212,121,.17),rgba(255,255,255,0) 60%),
         linear-gradient(150deg,#137a72 0%,#123f57 58%,#0d2340 100%);
}

/* The second band sits between two normal sections, so it needs its own breathing
   room rather than borrowing the spotlight's. */
.qdt-home-measure{padding-top:22px}

/* ---------- header ---------- */
.tc-top{display:flex;align-items:center;margin-bottom:12px}
.tc-ico{
  width:34px;height:34px;border-radius:9px;flex:none;margin-right:10px;
  display:flex;align-items:center;justify-content:center;color:var(--a);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
}
.tc-tag{
  display:inline-flex;align-items:center;font-family:var(--font-mono,ui-monospace,Menlo,monospace);
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.19);border-radius:99px;padding:5px 11px;
}
.tc-tag i{width:6px;height:6px;border-radius:50%;background:var(--a);margin-right:8px;flex:none}

.tc h2{margin:0;font-family:var(--font-display,inherit);font-size:21px;font-weight:800;
  letter-spacing:-.03em;line-height:1.2;color:#fff}
.tc h2 em{font-style:normal;color:var(--a)}
.tc-lede{margin:8px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72);max-width:52ch}
.tc-lede b{color:#fff;font-weight:600}

/* ---------- url field + button ---------- */
.tc-form{display:flex;gap:8px;margin:13px 0 0;flex-wrap:wrap}
.tc-field{flex:1 1 200px;min-width:0;position:relative;display:flex;align-items:center}
.tc-field > svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9aa8a4;pointer-events:none}
.tc-field input{
  width:100%;border:1px solid rgba(255,255,255,.5);border-radius:11px;background:#fff;
  color:#0a2b25;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:13.5px;
  padding:11px 12px 11px 39px;outline:none;transition:box-shadow .16s,border-color .16s;
}
.tc-field input::placeholder{color:#a8b3af}
.tc-field input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.tc-go{
  flex:none;cursor:pointer;border:0;border-radius:10px;padding:11px 17px;background:#07231d;
  color:#fff;font-family:var(--font-display,inherit);font-size:14px;font-weight:700;letter-spacing:-.01em;
  display:inline-flex;align-items:center;box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
  transition:transform .16s cubic-bezier(.2,.8,.25,1),background .16s;
}
.tc-go svg{margin-left:9px;transition:transform .18s cubic-bezier(.2,.8,.25,1)}
.tc-go:hover{background:#03120e;transform:translateY(-2px)}
.tc-go:hover svg{transform:translateX(4px)}
.tc-go:active{transform:none}
.tc :focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* ---------- chips ---------- */
.tc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tc-chips span{
  font-size:12px;font-weight:600;color:rgba(255,255,255,.86);background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:4px 10px;
  transition:background .16s,border-color .16s;
}
.tc:hover .tc-chips span{background:rgba(255,255,255,.16)}

/* ---------- stat strip ---------- */
.tc-strip{display:flex;flex-wrap:wrap;margin:13px 0 0;padding:11px 0 0;border-top:1px solid rgba(255,255,255,.15)}
.tc-strip div{flex:1 1 90px;min-width:0;padding-right:14px}
.tc-strip b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--a);
  line-height:1;font-variant-numeric:tabular-nums}
.tc-strip span{display:block;font-size:11.6px;color:rgba(255,255,255,.55);margin-top:4px}

/* ---------- checklist ---------- */
.tc-list{list-style:none;margin:13px 0 0;padding:12px 0 0;display:flex;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15)}
.tc-list li{flex:0 0 50%;min-width:0;display:flex;align-items:center;
  padding:4px 12px 4px 0;font-size:12.8px;color:rgba(255,255,255,.9);line-height:1.4}
.tc-list svg{margin:0 8px 0 0;color:var(--a);flex:none}
.tc-list b{font-weight:600}
.tc-list small{display:none}          /* labels carry it; the detail lives on the tool page */

/* ---------- radar panel (network card) ---------- */
.tc-radar{
  margin:13px 0 0;border-radius:12px;padding:11px;display:flex;align-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.tc-radar-svg{flex:none;margin-right:13px}
.tc-ring{animation:tcPulse 2.8s ease-out infinite}
.tc-ring:nth-of-type(2){animation-delay:.9s}
.tc-ring:nth-of-type(3){animation-delay:1.8s}
@keyframes tcPulse{0%{opacity:.65}70%{opacity:.06}100%{opacity:.06}}
.tc-metrics{flex:1 1 auto;min-width:0}
.tc-metric{display:flex;align-items:baseline;padding:1.5px 0;font-size:12.2px}
.tc-metric span{color:rgba(255,255,255,.58);flex:1 1 auto}
.tc-metric b{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums}
.tc-metric u{text-decoration:none;color:rgba(255,255,255,.42);font-size:11px;margin-left:4px}

/* ---------- gauge (speed card) ---------- */
.tc-gauge{margin:12px 0 0;display:flex;align-items:center}
.tc-gauge-svg{flex:none;margin-right:15px}
.tc-gauge-read{flex:1 1 auto;min-width:0}
.tc-gauge-read .big{font-size:28px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.tc-gauge-read .big u{text-decoration:none;font-size:14px;font-weight:700;color:var(--a);margin-left:6px}
.tc-gauge-read .sm{font-size:12px;color:rgba(255,255,255,.55);margin-top:5px}
.tc-quad{display:flex;flex-wrap:wrap;margin:11px 0 0}
.tc-quad div{flex:0 0 50%;padding:3px 10px 3px 0;font-size:12.2px;display:flex;align-items:baseline}
.tc-quad span{color:rgba(255,255,255,.58);flex:1 1 auto}
.tc-quad b{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-weight:600;
  font-variant-numeric:tabular-nums}

/* ---------- advice line ---------- */
.tc-advice{margin:12px 0 0;padding:10px 13px;border-radius:10px;font-size:12.2px;line-height:1.5;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);display:flex}
.tc-advice svg{margin:2px 10px 0 0;color:var(--a);flex:none}
.tc-advice b{color:#fff;font-weight:600}

/* ---------- footer ---------- */
.tc-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13)}
.tc-trust{display:inline-flex;align-items:flex-start;font-size:11.4px;line-height:1.45;
  color:rgba(255,255,255,.58);margin-right:auto;padding-right:12px;max-width:34ch}
.tc-trust svg{margin:2px 8px 0 0;color:var(--a);flex:none}
.tc-trust b{color:rgba(255,255,255,.88);font-weight:600}
.tc-more{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;
  white-space:nowrap;margin-top:2px}
.tc-more:hover{border-bottom-color:#fff;color:#fff}
.tc-more svg{margin-left:7px;transition:transform .18s cubic-bezier(.2,.8,.25,1)}
.tc-more:hover svg{transform:translateX(4px)}

@media (max-width:960px){
  .tc,.tc--w60,.tc--w40{flex:1 1 100%}
}
@media (max-width:520px){
  .tc{padding:22px 19px 18px;border-radius:15px}
  .tc h2{font-size:21px}
  .tc-list li,.tc-quad div{flex:0 0 100%}
  .tc-go{width:100%;justify-content:center}
  .tc-field{flex:1 1 100%}
  .tc-radar,.tc-gauge{flex-direction:column;align-items:flex-start}
  .tc-radar-svg,.tc-gauge-svg{margin:0 0 12px 0}
}
@media (prefers-reduced-motion:reduce){
  .tc,.tc *{transition:none!important;animation:none!important}
}