/* ============================================================
   FORNAX SOC 2026 — visual upgrade
   Drop-in stylesheet. Load AFTER style.css on any page:
     <link rel="stylesheet" href="assets/fornax-soc.css" />
   Adds: cyber background field, ASUS-style service bento,
   and the Threat Monitor dashboard component (.soc-*).
   Fully dark/light aware via body.light-mode.
   ============================================================ */

/* ---------- 1. Cyber background field (all pages) ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,  rgba(38,90,190,.16), transparent 42%),
    radial-gradient(circle at 90% 92%, rgba(60,50,160,.14), transparent 46%),
    radial-gradient(130% 100% at 50% -10%, #10131c 0%, #0a0b0f 55%, #06070a 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(120,150,220,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 18%, #000 40%, transparent 88%);
          mask-image:radial-gradient(120% 90% at 50% 18%, #000 40%, transparent 88%);
}
body.light-mode::before{
  background:
    radial-gradient(circle at 12% 8%,  rgba(70,120,200,.10), transparent 42%),
    radial-gradient(circle at 90% 92%, rgba(120,110,210,.08), transparent 46%),
    radial-gradient(130% 100% at 50% -10%, #ffffff 0%, #f4f4f1 55%, #e9ebef 100%);
}
body.light-mode::after{ background-image:radial-gradient(rgba(40,70,130,.09) 1px, transparent 1px); }
/* let sections sit on the field (header/footer keep their own bg) */
.site-bg{ display:none; }

/* ---------- 2. Home "Core Security Services" bento ---------- */
.services-preview .cards{
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(150px,auto);
  grid-template-areas:
    "a b d"
    "a c d"
    "a c e";
  gap:16px;
}
.services-preview .cards > *:nth-child(1){ grid-area:a; }
.services-preview .cards > *:nth-child(2){ grid-area:b; }
.services-preview .cards > *:nth-child(3){ grid-area:c; }
.services-preview .cards > *:nth-child(4){ grid-area:d; }
.services-preview .cards > *:nth-child(5){ grid-area:e; }
.services-preview .cards > *{ height:100%; }

/* softer corners + subtle depth on marketing cards (dark + light via vars) */
.services-preview .card,
.feature-grid .card,
.steps .card,
.services-page .cards .card{
  border-radius:12px;
}
.services-preview .card:hover,
.feature-grid .card:hover{
  border-color:var(--line-strong);
  box-shadow:0 24px 50px -34px rgba(0,0,0,.8);
}

@media (max-width:860px){
  .services-preview .cards{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }
  .services-preview .cards > *{ grid-area:auto !important; }
}

/* ---------- 3. Threat Monitor dashboard (services hero) ---------- */
.soc-monitor{
  --acc:#4b8dff; --neon:#35e0e0; --mag:#ff4d9d; --green:#4be08f;
  --bezel:linear-gradient(#0a0d14,#05070c);
  --scr:radial-gradient(120% 120% at 50% 0%, #0d1622 0%, #070a11 60%, #05070c 100%);
  --ink:#f2f3f7; --ink-soft:rgba(223,232,239,.6);
  --line:rgba(255,255,255,.08); --gtrack:rgba(255,255,255,.07);
  --scanline:rgba(255,255,255,.028);
  display:flex; flex-direction:column; align-items:center;
  font-family:"IBM Plex Mono",monospace;
}
body.light-mode .soc-monitor{
  --bezel:linear-gradient(#e9edf2,#dbe0e7);
  --scr:radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #eef2f7 62%, #e6ebf1 100%);
  --ink:#12151b; --ink-soft:#5a616b;
  --line:rgba(20,24,30,.12); --gtrack:rgba(20,24,30,.1);
  --scanline:rgba(20,30,50,.03);
  --neon:#0fa9a9; --mag:#d6337d; --green:#17a06a;
}
.soc-bezel{
  width:100%; padding:12px; border-radius:14px; background:var(--bezel);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(53,224,224,.06), 0 30px 80px -34px rgba(0,0,0,.9), 0 0 60px -20px rgba(53,224,224,.18);
}
.soc-screen{
  position:relative; border-radius:7px; overflow:hidden; background:var(--scr);
  border:1px solid rgba(53,224,224,.14); padding:16px 16px 14px;
}
.soc-scan{ position:absolute; inset:0; pointer-events:none; z-index:5; opacity:.6;
  background-image:repeating-linear-gradient(var(--scanline) 0 1px, transparent 1px 3px); }
.soc-sweep{ position:absolute; left:0; right:0; top:0; height:26%; pointer-events:none; z-index:4;
  background:linear-gradient(rgba(53,224,224,.10), rgba(53,224,224,0));
  animation:soc-sweep 5.5s linear infinite; }
@keyframes soc-sweep{ 0%{transform:translateY(-100%)} 100%{transform:translateY(600%)} }
.soc-innerglow{ position:absolute; inset:0; pointer-events:none; z-index:6; border-radius:7px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.35); }
.soc-cnr{ position:absolute; width:14px; height:14px; z-index:7; opacity:.7; }
.soc-cnr.tl{ left:8px; top:8px; border-left:1.5px solid var(--neon); border-top:1.5px solid var(--neon); }
.soc-cnr.tr{ right:8px; top:8px; border-right:1.5px solid var(--neon); border-top:1.5px solid var(--neon); }
.soc-cnr.bl{ left:8px; bottom:8px; border-left:1.5px solid var(--neon); border-bottom:1.5px solid var(--neon); }
.soc-cnr.br{ right:8px; bottom:8px; border-right:1.5px solid var(--neon); border-bottom:1.5px solid var(--neon); }
.soc-body{ position:relative; z-index:3; }

.soc-titlebar{ display:flex; justify-content:space-between; align-items:center;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.soc-title{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; color:var(--ink); }
.soc-dot{ width:7px; height:7px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); }
.soc-meta{ display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.1em; color:var(--ink-soft); }
.soc-live{ display:inline-flex; align-items:center; gap:5px; color:var(--green);
  border:1px solid var(--line); border-radius:4px; padding:3px 7px; }
.soc-live i{ width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green);
  animation:soc-blink 1.5s ease-in-out infinite; }
@keyframes soc-blink{ 0%,100%{opacity:1} 50%{opacity:.2} }

.soc-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.soc-kpi{ border:1px solid var(--line); border-radius:6px; padding:11px 12px; }
.soc-kpi.green{ background:rgba(75,224,143,.04); }
.soc-kpi.neon{ border-color:rgba(53,224,224,.18); background:rgba(53,224,224,.05); }
.soc-kpi-l{ font-size:9px; letter-spacing:.12em; color:var(--ink-soft); }
.soc-kpi-v{ font-size:26px; font-weight:600; line-height:1.1; margin-top:6px; }
.soc-kpi-v small{ font-size:13px; opacity:.7; }
.soc-kpi-v.green{ color:var(--green); }
.soc-kpi-v.neon{ color:var(--neon); }
.soc-kpi-v.acc{ color:var(--acc); }

.soc-mid{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; margin-top:12px; }
.soc-panel{ border:1px solid var(--line); border-radius:6px; padding:12px; }
.soc-panel-h{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:.1em; color:var(--ink-soft); }
.soc-bars{ display:flex; align-items:flex-end; gap:4px; height:78px; margin-top:12px; }
.soc-bar{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(var(--neon),rgba(53,224,224,.15)); }
.soc-bar.acc{ background:linear-gradient(var(--acc),rgba(75,141,255,.12)); }
.soc-bar.mag{ background:linear-gradient(var(--mag),rgba(255,77,157,.15)); box-shadow:0 0 10px rgba(255,77,157,.4); }

.soc-gauge{ border:1px solid var(--line); border-radius:6px; padding:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.soc-gauge-l{ align-self:flex-start; font-size:9px; letter-spacing:.1em; color:var(--ink-soft); }
.soc-gauge-ring{ position:relative; width:104px; height:104px; margin-top:6px; border-radius:50%;
  background:conic-gradient(var(--neon) 0 32%, var(--gtrack) 32% 100%);
  -webkit-mask:radial-gradient(circle 40px at center, transparent 39px, #000 40px);
          mask:radial-gradient(circle 40px at center, transparent 39px, #000 40px); }
.soc-gauge-c{ position:absolute; text-align:center; pointer-events:none; }
.soc-gauge-c b{ display:block; font-size:24px; font-weight:600; color:var(--ink); line-height:1; }
.soc-gauge-c span{ font-size:9px; letter-spacing:.14em; color:var(--green); }

.soc-feed{ border:1px solid var(--line); border-radius:6px; padding:11px 12px; margin-top:12px; }
.soc-feed-h{ font-size:9px; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:9px; }
.soc-rows{ display:grid; gap:7px; font-size:10.5px; color:var(--ink); }
.soc-row{ display:flex; align-items:center; gap:9px; }
.soc-time{ font-weight:600; min-width:60px; }
.soc-desc{ flex:1; }
.soc-chip{ border-radius:3px; padding:1px 6px; font-size:9px; border:1px solid currentColor; }
.soc-crit{ color:var(--mag); } .soc-med{ color:#e0932f; } .soc-ok{ color:var(--green); }

.soc-neck{ width:58px; height:14px; background:var(--bezel); border:1px solid var(--line);
  border-top:none; border-radius:0 0 4px 4px; }
.soc-base{ width:150px; height:7px; background:var(--bezel); border:1px solid var(--line);
  border-radius:5px; margin-top:2px; }

/* keep the monitor from stretching too tall inside the hero */
.services-hero-visual.soc-host{ background:transparent; border:none; padding:0; display:block; }

@media (max-width:860px){
  .soc-mid{ grid-template-columns:1fr; }
}

/* ---------- 4. Service-card hover micro-animations (services.html) ---------- */
.services-page .cards.stacked .card{ position:relative; padding-right:196px; overflow:hidden; }
.svc-viz{ position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:152px; height:100px; pointer-events:none; opacity:.5; transition:opacity .3s ease; }
.card:hover .svc-viz, .card.__hov .svc-viz{ opacity:1; }
.svc-viz i, .svc-viz b, .svc-viz s, .svc-viz span{ box-sizing:border-box; font-style:normal; text-decoration:none; }
.svc-viz{ --sv-crit:#ff5a6a; --sv-med:#e0a355; --sv-ok:#4be08f; }
@media (max-width:720px){
  .services-page .cards.stacked .card{ padding-right:22px; }
  .svc-viz{ display:none; }
}

/* 1) Penetration Testing — crosshair scans in and locks, target takes a hit */
.pv-pentest .pt-dot{ position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.pv-pentest .pt-ret{ position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border:1.5px solid var(--accent); border-radius:50%; opacity:0; }
.pv-pentest .pt-ret::before, .pv-pentest .pt-ret::after{ content:""; position:absolute; background:var(--accent); }
.pv-pentest .pt-ret::before{ left:50%; top:-11px; width:1.5px; height:76px; margin-left:-.75px; }
.pv-pentest .pt-ret::after{ top:50%; left:-11px; height:1.5px; width:76px; margin-top:-.75px; }
.pv-pentest .pt-ring{ position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid var(--sv-crit); border-radius:50%; opacity:0; }
.card:hover .pv-pentest .pt-ret, .card.__hov .pv-pentest .pt-ret{ animation:pt-lock 2.4s ease forwards; }
.card:hover .pv-pentest .pt-ring, .card.__hov .pv-pentest .pt-ring{ animation:pt-hit 2.4s ease forwards; }
.card:hover .pv-pentest .pt-dot, .card.__hov .pv-pentest .pt-dot{ animation:pt-blink 2.4s ease forwards; }
@keyframes pt-lock{ 0%{transform:translate(-34px,-20px) scale(2);opacity:0} 25%{opacity:1}
  55%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(0,0) scale(1);opacity:.9} }
@keyframes pt-hit{ 0%,55%{transform:scale(.4);opacity:0} 62%{opacity:.9} 100%{transform:scale(3.4);opacity:0} }
@keyframes pt-blink{ 0%,55%{background:var(--accent);box-shadow:0 0 10px var(--accent)}
  60%{background:var(--sv-crit);box-shadow:0 0 14px var(--sv-crit)}
  100%{background:var(--sv-crit);box-shadow:0 0 10px var(--sv-crit)} }

/* 2) Vulnerability Management — scan line sweeps down, severity dots light up */
.pv-vuln{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:8px 2px; }
.pv-vuln .vl-row{ position:relative; height:8px; border-radius:2px; background:rgba(255,255,255,.06); }
body.light-mode .pv-vuln .vl-row{ background:rgba(20,24,30,.08); }
.pv-vuln .vl-row b{ position:absolute; right:4px; top:50%; width:8px; height:8px; margin-top:-4px;
  border-radius:50%; background:rgba(130,140,160,.5); }
.pv-vuln .vl-scan{ position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent); box-shadow:0 0 10px var(--accent); opacity:0; }
.card:hover .pv-vuln .vl-scan, .card.__hov .pv-vuln .vl-scan{ animation:vl-sweep 2.3s ease forwards; }
.card:hover .pv-vuln .vl-row:nth-child(2) b, .card.__hov .pv-vuln .vl-row:nth-child(2) b{ animation:vl-crit .3s ease .4s forwards; }
.card:hover .pv-vuln .vl-row:nth-child(3) b, .card.__hov .pv-vuln .vl-row:nth-child(3) b{ animation:vl-med .3s ease .9s forwards; }
.card:hover .pv-vuln .vl-row:nth-child(4) b, .card.__hov .pv-vuln .vl-row:nth-child(4) b{ animation:vl-med .3s ease 1.4s forwards; }
.card:hover .pv-vuln .vl-row:nth-child(5) b, .card.__hov .pv-vuln .vl-row:nth-child(5) b{ animation:vl-ok .3s ease 1.9s forwards; }
@keyframes vl-sweep{ 0%{top:-4%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:104%;opacity:0} }
@keyframes vl-crit{ to{background:var(--sv-crit);box-shadow:0 0 8px var(--sv-crit)} }
@keyframes vl-med{ to{background:var(--sv-med);box-shadow:0 0 8px var(--sv-med)} }
@keyframes vl-ok{ to{background:var(--sv-ok);box-shadow:0 0 8px var(--sv-ok)} }

/* 3) MDR / XDR — heartbeat EKG draws across, detection ping */
.pv-mdr{ display:flex; align-items:center; justify-content:center; }
.pv-mdr svg{ width:100%; height:64px; overflow:visible; }
.pv-mdr polyline{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:420; stroke-dashoffset:420; filter:drop-shadow(0 0 5px rgba(75,141,255,.6)); }
.pv-mdr .mdr-ping{ position:absolute; left:42%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border:2px solid var(--sv-ok); border-radius:50%; opacity:0; }
.card:hover .pv-mdr polyline, .card.__hov .pv-mdr polyline{ animation:mdr-draw 2.2s ease forwards; }
.card:hover .pv-mdr .mdr-ping, .card.__hov .pv-mdr .mdr-ping{ animation:mdr-ping 2.2s ease forwards; }
@keyframes mdr-draw{ to{stroke-dashoffset:0} }
@keyframes mdr-ping{ 0%,42%{transform:scale(.3);opacity:0} 50%{opacity:.9} 100%{transform:scale(3);opacity:0} }

/* 4) Security Compliance — checklist ticks off row by row */
.pv-comp{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding:6px; }
.pv-comp .cm-row{ display:flex; align-items:center; gap:10px; }
.pv-comp .cm-box{ position:relative; width:16px; height:16px; flex:none;
  border:1.6px solid var(--accent); border-radius:4px; }
.pv-comp .cm-box::after{ content:""; position:absolute; left:4px; top:1px; width:5px; height:9px;
  border:solid var(--sv-ok); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); opacity:0; }
.pv-comp .cm-line{ flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.09);
  transform:scaleX(0); transform-origin:left; }
body.light-mode .pv-comp .cm-line{ background:rgba(20,24,30,.1); }
.card:hover .pv-comp .cm-row:nth-child(1) .cm-box::after, .card.__hov .pv-comp .cm-row:nth-child(1) .cm-box::after{ animation:cm-check .3s ease .25s forwards; }
.card:hover .pv-comp .cm-row:nth-child(2) .cm-box::after, .card.__hov .pv-comp .cm-row:nth-child(2) .cm-box::after{ animation:cm-check .3s ease .85s forwards; }
.card:hover .pv-comp .cm-row:nth-child(3) .cm-box::after, .card.__hov .pv-comp .cm-row:nth-child(3) .cm-box::after{ animation:cm-check .3s ease 1.45s forwards; }
.card:hover .pv-comp .cm-row:nth-child(1) .cm-box, .card.__hov .pv-comp .cm-row:nth-child(1) .cm-box{ animation:cm-boxon .3s ease .25s forwards; }
.card:hover .pv-comp .cm-row:nth-child(2) .cm-box, .card.__hov .pv-comp .cm-row:nth-child(2) .cm-box{ animation:cm-boxon .3s ease .85s forwards; }
.card:hover .pv-comp .cm-row:nth-child(3) .cm-box, .card.__hov .pv-comp .cm-row:nth-child(3) .cm-box{ animation:cm-boxon .3s ease 1.45s forwards; }
.card:hover .pv-comp .cm-row:nth-child(1) .cm-line, .card.__hov .pv-comp .cm-row:nth-child(1) .cm-line{ animation:cm-fill .4s ease .25s forwards; }
.card:hover .pv-comp .cm-row:nth-child(2) .cm-line, .card.__hov .pv-comp .cm-row:nth-child(2) .cm-line{ animation:cm-fill .4s ease .85s forwards; }
.card:hover .pv-comp .cm-row:nth-child(3) .cm-line, .card.__hov .pv-comp .cm-row:nth-child(3) .cm-line{ animation:cm-fill .4s ease 1.45s forwards; }
@keyframes cm-check{ to{transform:rotate(45deg) scale(1);opacity:1} }
@keyframes cm-boxon{ to{border-color:var(--sv-ok);background:rgba(75,224,143,.14)} }
@keyframes cm-fill{ to{transform:scaleX(1)} }

/* 5) Security Awareness Training — phishing hook blocked by shield */
.pv-phish .ph-mail{ position:absolute; left:50%; top:56%; width:58px; height:38px; margin:-19px 0 0 -29px;
  border:1.6px solid var(--accent); border-radius:4px; background:rgba(75,141,255,.06); }
.pv-phish .ph-mail::before, .pv-phish .ph-mail::after{ content:""; position:absolute; top:-1px;
  width:33px; height:1.6px; background:var(--accent); }
.pv-phish .ph-mail::before{ left:-1px; transform-origin:left; transform:rotate(33deg); }
.pv-phish .ph-mail::after{ right:-1px; transform-origin:right; transform:rotate(-33deg); }
.pv-phish .ph-hook{ position:absolute; left:50%; top:12%; width:11px; height:22px; margin-left:-5px;
  border:2px solid var(--sv-med); border-top:none; border-left:none; border-radius:0 0 0 11px; opacity:0; }
.pv-phish .ph-shield{ position:absolute; left:50%; top:50%; width:32px; height:36px; margin:-18px 0 0 -16px;
  background:var(--sv-ok); opacity:0; clip-path:polygon(50% 0,100% 22%,100% 60%,50% 100%,0 60%,0 22%); }
.pv-phish .ph-shield::after{ content:""; position:absolute; left:11px; top:9px; width:5px; height:10px;
  border:solid #06210f; border-width:0 2px 2px 0; transform:rotate(45deg); }
.card:hover .pv-phish .ph-hook, .card.__hov .pv-phish .ph-hook{ animation:ph-hook 2.5s ease forwards; }
.card:hover .pv-phish .ph-shield, .card.__hov .pv-phish .ph-shield{ animation:ph-shield 2.5s ease forwards; }
.card:hover .pv-phish .ph-mail, .card.__hov .pv-phish .ph-mail{ animation:ph-flash 2.5s ease forwards; }
@keyframes ph-hook{ 0%{transform:translateY(-26px);opacity:0} 18%{opacity:1} 42%{transform:translateY(4px);opacity:1}
  58%{transform:translateY(-30px);opacity:0} 100%{opacity:0} }
@keyframes ph-shield{ 0%,48%{transform:scale(.2) rotate(-12deg);opacity:0}
  62%{transform:scale(1.12) rotate(0);opacity:1} 74%{transform:scale(1)} 100%{transform:scale(1);opacity:1} }
@keyframes ph-flash{ 0%,40%{border-color:var(--accent)} 48%{border-color:var(--sv-crit)}
  72%{border-color:var(--accent)} 100%{border-color:var(--accent)} }