/* ───────────────────────────────────────────────
   Inspyred Technologies — THREAT DEFENCE skin
   scoped to body.defense (Virus & Spyware page only)
   antivirus / scanner console: green = clean, red = threat
   loaded AFTER styles.css + service.css to override
   ─────────────────────────────────────────────── */

body.defense {
  --bg: #060b0a;
  --panel: #0c1512;
  --panel-2: #0f1d18;
  --line: #1f3a31;
  --green: #33f6a8;     /* clean / protected */
  --green-dim: #1f7d5a;
  --danger: #ff4d4d;    /* threat */
  --danger-soft: #ff7a5c;
  --amber: #ffc24b;     /* scanning / warning */
  --cyan: #36e0ff;
  --txt: #bfe9d8;
  --txt-dim: #7fae9d;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* virus germ as a reusable mask (white = visible) */
  --germ: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='white'%20stroke='white'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.5'/%3E%3Cpath%20d='M12%207V2M12%2017v5M17%2012h5M7%2012H2M15.5%208.5l3.5-3.5M8.5%208.5L5%205M15.5%2015.5l3.5%203.5M8.5%2015.5L5%2019'/%3E%3Cg%20stroke='none'%3E%3Ccircle%20cx='12'%20cy='2'%20r='1.6'/%3E%3Ccircle%20cx='12'%20cy='22'%20r='1.6'/%3E%3Ccircle%20cx='22'%20cy='12'%20r='1.6'/%3E%3Ccircle%20cx='2'%20cy='12'%20r='1.6'/%3E%3Ccircle%20cx='19'%20cy='5'%20r='1.6'/%3E%3Ccircle%20cx='5'%20cy='5'%20r='1.6'/%3E%3Ccircle%20cx='19'%20cy='19'%20r='1.6'/%3E%3Ccircle%20cx='5'%20cy='19'%20r='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  background:
    radial-gradient(circle at 50% -8%, rgba(51,246,168,.10), transparent 45%),
    var(--bg);
  color: var(--txt);
}

body.defense ::selection { background: var(--green); color: #04150e; }
body.defense .grain { display: none; }

/* scanner grid + sweeping scanline overlays */
.scan-grid {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: .6;
  background-image:
    linear-gradient(rgba(51,246,168,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,246,168,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask: radial-gradient(circle at 50% 28%, #000 25%, transparent 78%);
  mask: radial-gradient(circle at 50% 28%, #000 25%, transparent 78%);
}
.scan-sweep {
  position: fixed; left: 0; right: 0; top: 0;
  height: 160px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(51,246,168,.10) 60%, rgba(51,246,168,.18), transparent);
  animation: sweep 5.5s linear infinite;
}
@keyframes sweep { 0% { transform: translateY(-200px); } 100% { transform: translateY(100vh); } }

body.defense main, body.defense .nav, body.defense .foot { position: relative; z-index: 2; }

/* ── NAV ── */
body.defense .nav {
  background: rgba(6,11,10,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--green-dim);
  box-shadow: 0 0 22px rgba(51,246,168,.18);
}
body.defense .nav-links a {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--txt-dim);
}
body.defense .nav-links a:hover { color: var(--green); }
body.defense .nav-links a::after { background: var(--green); box-shadow: 0 0 6px var(--green); }
body.defense .phone-pill {
  background: var(--green);
  color: #04150e;
  border-radius: 6px;
  font-family: var(--mono);
  box-shadow: 0 0 16px rgba(51,246,168,.5);
}
body.defense .phone-pill .phone-prompt { color: #06311f; }
body.defense .phone-dot { background: #04150e; box-shadow: 0 0 0 3px rgba(4,21,14,.3); }

/* ── HUD / status bar + progress ── */
.def-hud {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--txt-dim);
  border: 1px solid var(--line);
  background: rgba(12,21,18,.6);
  padding: 11px 14px;
  margin: 0 0 12px;
}
.def-hud .ok { color: var(--green); }
.def-hud .scanning { color: var(--amber); }
.def-hud .count { color: var(--cyan); }
.def-hud .led {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  margin-right: 6px; vertical-align: middle;
  animation: blink 1.4s steps(1) infinite;
}
.def-progress {
  height: 9px;
  max-width: 460px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  margin: 0 0 26px;
}
.def-progress span {
  display: block; height: 100%; width: 6%;
  background: linear-gradient(90deg, var(--green-dim), var(--green));
  box-shadow: 0 0 10px var(--green);
  animation: scanprog 3.4s ease-in-out infinite;
}
@keyframes scanprog { 0% { width: 4%; } 75% { width: 100%; } 100% { width: 100%; } }
@keyframes blink { 50% { opacity: 0; } }

/* ── HERO ── */
body.defense .sp-crumbs,
body.defense .sp-crumbs a { color: var(--cyan); }
body.defense .sp-crumbs .here { color: var(--green); }
body.defense .sp-crumbs .sep { color: var(--line); }
body.defense .sp-crumbs a:hover { color: var(--green); border-bottom-color: var(--green); }

body.defense .sp-hero-icon {
  background: var(--panel);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(255,77,77,.45);
}
body.defense .sp-h1 {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--green);
  text-shadow: 0 0 10px rgba(51,246,168,.6), 0 0 26px rgba(51,246,168,.3);
}
.sp-h1-sub {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  text-transform: none;
  font-size: clamp(12px, 1.6vw, 16px);
  color: var(--danger);
  margin-top: 16px;
  letter-spacing: .02em;
}
body.defense .sp-lede { color: var(--txt-dim); }

/* ── buttons ── */
body.defense .btn {
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .03em;
}
body.defense .btn-primary {
  background: var(--green);
  color: #04150e;
  border: 1px solid #aeffd9;
  box-shadow: 0 0 16px rgba(51,246,168,.5);
}
body.defense .btn-primary:hover {
  background: #5effc0;
  color: #04150e;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(51,246,168,.7);
}
body.defense .btn-ghost {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 10px rgba(54,224,255,.25), inset 0 0 12px rgba(54,224,255,.12);
}
body.defense .btn-ghost:hover { background: var(--cyan); color: #03131a; transform: translateY(-2px); }

/* ── scanner band: virus locked & neutralized ── */
.scan-band {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 28px 34px;
  display: grid;
  justify-items: center;
}
.scanner { display: grid; justify-items: center; gap: 16px; }
.reticle {
  position: relative;
  width: 168px; height: 168px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--green) 0 0) center/100% 1px no-repeat,
    linear-gradient(var(--green) 0 0) center/1px 100% no-repeat,
    rgba(12,21,18,.5);
  background-blend-mode: normal;
}
.reticle::before {
  content: ""; position: absolute; inset: 26px;
  border: 2px dashed var(--green);
  border-radius: 50%;
  opacity: .8;
  animation: spin 9s linear infinite;
}
.reticle::after {
  content: ""; position: absolute; inset: 8px;
  background:
    linear-gradient(var(--green) 0 0) left top/16px 2px no-repeat,
    linear-gradient(var(--green) 0 0) left top/2px 16px no-repeat,
    linear-gradient(var(--green) 0 0) right top/16px 2px no-repeat,
    linear-gradient(var(--green) 0 0) right top/2px 16px no-repeat,
    linear-gradient(var(--green) 0 0) left bottom/16px 2px no-repeat,
    linear-gradient(var(--green) 0 0) left bottom/2px 16px no-repeat,
    linear-gradient(var(--green) 0 0) right bottom/16px 2px no-repeat,
    linear-gradient(var(--green) 0 0) right bottom/2px 16px no-repeat;
}
@keyframes spin { to { transform: rotate(360deg); } }
.germ-big {
  width: 78px; height: 78px;
  color: var(--danger);
  filter: drop-shadow(0 0 10px rgba(255,77,77,.8));
  animation: jitter .22s steps(2) infinite;
  z-index: 1;
}
@keyframes jitter {
  0% { transform: translate(0,0); }
  50% { transform: translate(1px,-1px); }
  100% { transform: translate(-1px,1px); }
}
.x-strike { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.x-strike i {
  position: absolute; top: 50%; left: 50%;
  width: 104px; height: 4px;
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}
.x-strike i:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg) scaleX(0); animation: stamp1 3.2s ease-in-out infinite; }
.x-strike i:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg) scaleX(0); animation: stamp2 3.2s ease-in-out infinite; }
@keyframes stamp1 {
  0%,28% { transform: translate(-50%,-50%) rotate(45deg) scaleX(0); }
  42%,78% { transform: translate(-50%,-50%) rotate(45deg) scaleX(1); }
  92%,100% { transform: translate(-50%,-50%) rotate(45deg) scaleX(0); }
}
@keyframes stamp2 {
  0%,32% { transform: translate(-50%,-50%) rotate(-45deg) scaleX(0); }
  46%,78% { transform: translate(-50%,-50%) rotate(-45deg) scaleX(1); }
  92%,100% { transform: translate(-50%,-50%) rotate(-45deg) scaleX(0); }
}
.scan-status {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 8px rgba(51,246,168,.5);
}
.scan-status .dot {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 9px var(--green);
  margin-right: 8px;
  animation: blink 1.1s steps(1) infinite;
}

/* ── section heads ── */
body.defense .sp-tag {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--danger);
}
body.defense .sp-h2 {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--green);
  text-shadow: 0 0 10px rgba(51,246,168,.35);
}
body.defense .sp-section-tint {
  background: linear-gradient(180deg, transparent, rgba(255,77,77,.07), transparent);
}

/* ── prose ── */
body.defense .sp-prose p { color: var(--txt); }
body.defense .sp-prose em {
  color: var(--green);
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(51,246,168,.4);
}

/* ── threat report (quick facts) ── */
body.defense .sp-quickcard {
  background: var(--panel);
  border: 1px solid var(--green-dim);
  border-radius: 6px;
  box-shadow: 0 0 22px rgba(51,246,168,.15), inset 0 0 40px rgba(0,0,0,.5);
}
body.defense .sp-quickcard h2 {
  font-family: var(--mono);
  color: var(--green);
}
body.defense .sp-facts > div { border-top: 1px dashed var(--line); }
body.defense .sp-facts dt { color: var(--cyan); }
body.defense .sp-facts dd { font-family: var(--mono); font-size: 15px; color: #eafff4; }

/* ── feature cards = threats handled ── */
body.defense .sp-features li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: 6px;
}
body.defense .sp-features li:hover {
  border-color: var(--green);
  border-left-color: var(--green);
  box-shadow: 0 0 20px rgba(51,246,168,.3);
  transform: translateY(-4px);
}
body.defense .sp-f-key { font-family: var(--mono); color: var(--danger); letter-spacing: .08em; }
body.defense .sp-features h3 { font-family: var(--mono); font-weight: 700; color: #eafff4; }
body.defense .sp-features p { color: var(--txt-dim); }

/* ── symptom checklist with virus-germ bullets ── */
body.defense .sp-checks li { color: var(--txt); padding-left: 36px; }
body.defense .sp-checks li::before {
  content: "";
  left: 0; top: 0;
  width: 22px; height: 22px;
  background: var(--danger);
  -webkit-mask: var(--germ) left center / contain no-repeat;
  mask: var(--germ) left center / contain no-repeat;
  animation: pulse-threat 1.6s ease-in-out infinite;
}
body.defense .sp-checks li:nth-child(2n)::before { background: var(--danger-soft); }
body.defense .sp-checks li:nth-child(3n)::before { background: var(--amber); }
@keyframes pulse-threat { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* ── FAQ = support log ── */
body.defense .sp-faq details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
body.defense .sp-faq details[open] { border-color: var(--green); box-shadow: 0 0 16px rgba(51,246,168,.25); }
body.defense .sp-faq summary { font-family: var(--mono); font-weight: 700; color: #eafff4; }
body.defense .sp-faq summary::after { color: var(--green); }
body.defense .sp-faq p { color: var(--txt-dim); }

/* ── related chips ── */
body.defense .sp-related { border-top: 1px dashed var(--line); }
body.defense .sp-related .sp-related-label { color: var(--green); }
body.defense .sp-related a {
  background: var(--panel);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  color: var(--cyan);
}
body.defense .sp-related a:hover { background: var(--cyan); color: #03131a; transform: translateY(-1px); }

/* ── CTA ── */
body.defense .cta-card {
  background: linear-gradient(180deg, #0b1713, #060d0b);
  border: 1px solid var(--green-dim);
  border-radius: 6px;
  box-shadow: 0 0 34px rgba(51,246,168,.2);
}
body.defense .cta-prompt { font-family: var(--mono); color: var(--green); }
body.defense .cta-title {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.08;
  color: #eafff4;
  text-shadow: 0 0 12px rgba(51,246,168,.4);
}
body.defense .cta-title span { color: var(--green); font-style: normal; }
body.defense .cta-sub { color: var(--txt); }
body.defense .cta-meta { border-top-color: var(--line); }
body.defense .cta-meta dt { color: var(--cyan); }
body.defense .cta-meta dd { font-family: var(--mono); color: #eafff4; }

/* ── footer ── */
body.defense .foot { background: rgba(6,11,10,.82); border-top: 1px solid var(--green-dim); }
body.defense .foot-tag { color: var(--txt-dim); }
body.defense .foot-links a, body.defense .foot-social a { color: var(--txt-dim); }
body.defense .foot-links a:hover, body.defense .foot-social a:hover { color: var(--green); border-bottom-color: var(--green); }
body.defense .foot-fine { color: #6f9586; border-top-color: var(--line); }
body.defense .foot-prompt { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .scan-sweep, .def-progress span, .reticle::before, .germ-big,
  .x-strike i, .scan-status .dot, .def-hud .led, .sp-checks li::before { animation: none !important; }
  .x-strike i { transform: translate(-50%,-50%) rotate(45deg) scaleX(1); }
  .x-strike i:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg) scaleX(1); }
}