/* ============================================================
   Illumio page — custom animated sections (Network365 house style)
   Depends on n365.css tokens (--accent, --bg-*, --crit, --ok ...)
   ============================================================ */
:root{
  --teal:#2bc4b4; --teal-soft:rgba(43,196,180,0.12);
  --breach:#ff5a5a; --breach-soft:rgba(255,90,90,0.12);
}

/* shared section intro spacing already from .sect / .sect-head */
.eyebrow.red{ color:var(--breach); }
.eyebrow.teal{ color:var(--teal); }

/* generic 2-col explainer: visual + copy */
.ix{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:54px; align-items:center; }
.ix.rev-cols{ grid-template-columns:0.95fr 1.05fr; }
.ix.rev-cols .ix-copy{ order:2; } .ix.rev-cols .ix-visual{ order:1; }
.ix-copy h2{ font-size:clamp(1.26rem,2.81vw,1.9rem); margin:14px 0 16px; }
.ix-copy > p{ color:var(--text-secondary); font-size:1.05rem; margin-bottom:22px; max-width:30em; }
@media (max-width:900px){ .ix,.ix.rev-cols{ grid-template-columns:1fr; gap:36px; }
  .ix.rev-cols .ix-copy{ order:1; } .ix.rev-cols .ix-visual{ order:2; }
  .ix > *{ min-width:0; } .viz{ overflow-x:auto; } }

/* keypoint list (reused) */
.kpl{ display:flex; flex-direction:column; gap:14px; }
.kp{ display:flex; gap:13px; }
.kp .kc{ width:26px; height:26px; border-radius:8px; background:var(--accent-soft); border:1px solid var(--border); display:grid; place-items:center; flex:0 0 auto; margin-top:2px; }
.kp .kc svg{ width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:2.4; }
.kp.teal .kc{ background:var(--teal-soft); border-color:rgba(43,196,180,0.3); } .kp.teal .kc svg{ stroke:var(--teal); }
.kp b{ color:var(--text-primary); font-size:0.98rem; } .kp p{ color:var(--text-secondary); font-size:0.92rem; line-height:1.5; }

/* ---------- panel chrome shared by visuals ---------- */
.viz{ position:relative; background:linear-gradient(180deg,#12161d,#0c0e13); border:1px solid var(--border);
  border-radius:18px; padding:24px; box-shadow:0 44px 100px -50px #000, inset 0 1px 0 rgba(255,255,255,0.03); }
.viz-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.viz-head .vt{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; }
.viz-head .vt .dot{ width:8px; height:8px; border-radius:50%; background:var(--breach); box-shadow:0 0 10px var(--breach); animation:pulseDot 1.8s infinite; }
.viz-head .vt.safe .dot{ background:var(--teal); box-shadow:0 0 10px var(--teal); }
.viz-head .vmeta{ font-family:var(--mono); font-size:10.5px; color:var(--accent); }
@keyframes pulseDot{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ============================================================
   1. HYBRID STACK  +  lateral movement chain
   ============================================================ */
.stack{ display:flex; flex-direction:column; gap:10px; }
.layer{ position:relative; background:var(--bg-3); border:1px solid var(--line); border-radius:12px;
  padding:15px 18px; font-weight:600; color:var(--text-secondary); text-align:center; font-size:1.02rem;
  letter-spacing:.01em; transition:.3s; }
.layer .lx{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-family:var(--mono);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#5a6472; }
.layer.net{ background:var(--breach-soft); border:2px solid var(--breach); padding:16px 16px 18px; color:var(--text-primary);
  box-shadow:0 0 0 4px rgba(255,90,90,0.06); }
.layer.net .net-cap{ font-size:1.18rem; font-weight:600; margin-bottom:4px; }
.layer.net .risk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--breach);
  display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 14px; }
.layer.net .risk .ar{ width:30px; height:2px; background:var(--breach); position:relative; opacity:.5; }
.layer.net .risk .ar::after{ content:''; position:absolute; top:-3px; width:8px; height:8px; border-top:2px solid var(--breach); }
.layer.net .risk .ar.l::after{ left:0; border-left:2px solid var(--breach); transform:rotate(-45deg); }
.layer.net .risk .ar.r::after{ right:0; border-right:2px solid var(--breach); transform:rotate(45deg); }

/* node chain */
.chain{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:4px 6px; }
.chain .wire{ position:absolute; left:6%; right:6%; top:50%; height:2px; background:repeating-linear-gradient(90deg,rgba(255,90,90,.4) 0 8px,transparent 8px 14px); }
.chain .pulse{ position:absolute; top:50%; left:6%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--breach); box-shadow:0 0 14px 4px var(--breach); }
.node{ position:relative; z-index:2; width:38px; height:38px; border-radius:10px; background:#0c0f15; border:1px solid rgba(255,90,90,.4);
  display:grid; place-items:center; }
.node svg{ width:19px; height:19px; stroke:var(--breach); fill:none; stroke-width:1.7; }
.node.hit{ animation:nodeHit .5s ease; }
@keyframes nodeHit{ 0%{box-shadow:0 0 0 0 rgba(255,90,90,.6); border-color:var(--breach);} 100%{box-shadow:0 0 0 12px rgba(255,90,90,0); } }
@media (prefers-reduced-motion:no-preference){
  .chain.run .pulse{ animation:travel 5.2s linear infinite; }
}
@keyframes travel{ 0%{left:6%;} 100%{left:94%;} }

/* ============================================================
   2. SEGMENTATION  flat -> contained
   ============================================================ */
.segviz .seg-toggle{ display:inline-flex; background:#0a0c11; border:1px solid var(--line); border-radius:10px; padding:4px; gap:4px; }
.segviz .seg-toggle button{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary);
  background:none; border:none; padding:7px 14px; border-radius:7px; cursor:pointer; transition:.2s; }
.segviz .seg-toggle button.on{ background:var(--accent); color:#1a0f05; font-weight:600; }
.seg-stage{ position:relative; margin-top:8px; }
.seg-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:11px; }
.cell{ aspect-ratio:1; border-radius:10px; background:#0c0f15; border:1px solid var(--line); display:grid; place-items:center; position:relative; transition:border-color .4s,background .4s,box-shadow .4s; }
.cell svg{ width:46%; height:46%; stroke:#5a6472; fill:none; stroke-width:1.6; transition:stroke .4s; }
.cell.seed{ }
.cell.infected{ background:rgba(255,90,90,.14); border-color:var(--breach); box-shadow:0 0 18px -2px rgba(255,90,90,.5); }
.cell.infected svg{ stroke:var(--breach); }
.cell.safe{ border-color:rgba(43,196,180,.45); }
.cell.safe svg{ stroke:var(--teal); }
.cell .ring{ position:absolute; inset:-4px; border-radius:12px; border:1.5px dashed var(--teal); opacity:0; transition:opacity .4s; }
.seg-stage.contained .cell .ring{ opacity:.85; }
.seg-cap{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-family:var(--mono); font-size:11px; }
.seg-cap .scount{ color:var(--breach); } .seg-cap.contained-cap .scount{ color:var(--teal); }
.seg-cap .slbl{ color:var(--text-secondary); }

/* ============================================================
   5. PLATFORM — Insights + Segmentation on AI graph
   ============================================================ */
.plat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; position:relative; }
.pcard{ background:var(--bg-3); border:1px solid var(--line); border-radius:16px; padding:26px; position:relative; overflow:hidden; }
.pcard.ins{ border-color:rgba(89,176,255,.3); }
.pcard.seg{ border-color:var(--border); }
.pcard .ptag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.pcard.ins .ptag{ color:var(--info); } .pcard.seg .ptag{ color:var(--accent); }
.pcard h3{ font-size:1.3rem; margin:8px 0 8px; }
.pcard p{ color:var(--text-secondary); font-size:0.93rem; line-height:1.55; }
.pcard ul{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.pcard li{ display:flex; gap:9px; font-size:0.88rem; color:var(--text-secondary); align-items:flex-start; }
.pcard li svg{ width:14px; height:14px; flex:0 0 auto; margin-top:3px; fill:none; stroke-width:2.4; }
.pcard.ins li svg{ stroke:var(--info); } .pcard.seg li svg{ stroke:var(--accent); }
.pcard .pglow{ position:absolute; width:200px; height:200px; border-radius:50%; filter:blur(60px); opacity:.18; top:-60px; right:-50px; pointer-events:none; }
.pcard.ins .pglow{ background:var(--info); } .pcard.seg .pglow{ background:var(--accent); }
.plat-base{ grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:14px;
  background:#22272f; border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:2px; position:relative; }
.plat-base::before,.plat-base::after{ content:''; position:absolute; top:-14px; width:2px; height:14px; background:repeating-linear-gradient(180deg,var(--accent) 0 4px,transparent 4px 8px); }
.plat-base::before{ left:25%; } .plat-base::after{ right:25%; }
.plat-base .gicon{ width:30px; height:30px; border-radius:8px; background:var(--accent); display:grid; place-items:center; }
.plat-base .gicon svg{ width:17px; height:17px; stroke:#1a0f05; fill:none; stroke-width:2; }
.plat-base b{ font-size:1.05rem; } .plat-base span{ font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); display:block; }
@media (max-width:560px){ .plat{ grid-template-columns:1fr; } }

/* quote chip */
.qchip{ background:var(--bg-panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; padding:20px 22px; margin-top:22px; }
.qchip p{ font-size:1.02rem; color:var(--text-primary); line-height:1.55; }
.qchip p .hl{ color:var(--accent); }
.qchip .qa{ margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--text-secondary); }

/* ============================================================
   6. INSIGHTS pipeline + AI Security Graph
   ============================================================ */
.pipe{ display:grid; grid-template-columns:auto auto 1fr auto auto; gap:14px; align-items:center; }
.pstage{ background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:18px 16px; text-align:center; min-width:120px; }
.pstage .pi-ic{ width:46px; height:46px; margin:0 auto 12px; border-radius:12px; background:var(--accent-soft); border:1px solid var(--border); display:grid; place-items:center; }
.pstage .pi-ic svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.6; }
.pstage h4{ font-size:0.92rem; margin-bottom:5px; } .pstage p{ font-family:var(--mono); font-size:9.5px; color:var(--text-secondary); line-height:1.4; }
.pstage.proc{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; min-width:210px; }
.pstage.proc .micro{ background:#0c0f15; border:1px solid var(--line); border-radius:9px; padding:9px 6px; }
.pstage.proc .micro svg{ width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.6; margin-bottom:4px; }
.pstage.proc .micro span{ font-family:var(--mono); font-size:8px; letter-spacing:.02em; color:var(--text-secondary); display:block; line-height:1.25; }
.pstage.proc .proc-h{ grid-column:1/-1; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.parrow{ position:relative; height:2px; background:rgba(255,138,30,.25); min-width:22px; }
.parrow::after{ content:''; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); transform:rotate(45deg); }
.parrow .spark{ position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
@media (prefers-reduced-motion:no-preference){ .pipe.run .parrow .spark{ animation:sparkmove 1.8s linear infinite; } }
@keyframes sparkmove{ 0%{left:0; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{left:100%; opacity:0;} }
.graph-wrap{ min-width:150px; }
.graph{ width:100%; height:auto; }
.graph .edge{ stroke:rgba(255,138,30,.35); stroke-width:1.4; }
.graph .gnode{ fill:#0c0f15; stroke:var(--info); stroke-width:1.6; }
.graph .gnode.sql{ stroke:#a855f7; } .graph .gnode.up{ stroke:var(--teal); }
@media (prefers-reduced-motion:no-preference){
  .graph.run .edge{ stroke-dasharray:4 4; animation:dash 22s linear infinite; }
  .graph.run .gnode{ animation:nodeBreathe 3.4s ease-in-out infinite; }
}
@keyframes dash{ to{ stroke-dashoffset:-200; } }
@keyframes nodeBreathe{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
@media (max-width:1000px){ .pipe{ grid-template-columns:1fr; gap:18px; } .parrow{ transform:rotate(90deg); margin:0 auto; } .parrow::after{ } }

/* ============================================================
   3. PROACTIVE / REACTIVE observability flow
   ============================================================ */
.obs{ display:flex; flex-direction:column; gap:30px; }
.obs-track{ position:relative; }
.obs-rail{ display:flex; align-items:flex-start; gap:0; }
.obs-lead{ flex:0 0 auto; width:120px; display:flex; align-items:center; gap:10px; padding-top:30px; }
.obs-lead .badge{ font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.06em; }
.obs-lead.pro .badge{ color:var(--accent); } .obs-lead.re .badge{ color:var(--breach); }
.obs-steps{ flex:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; }
.ostep{ position:relative; text-align:center; padding:0 10px; opacity:0; transform:translateY(14px); }
.ostep.in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
.ostep .ring{ width:74px; height:74px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center;
  background:var(--teal-soft); border:1px solid rgba(43,196,180,.3); position:relative; z-index:2; }
.ostep .ring svg{ width:34px; height:34px; stroke:var(--teal); fill:none; stroke-width:1.5; }
.obs-track.pro .ostep .ring{ background:var(--accent-soft); border-color:var(--border); } .obs-track.pro .ostep .ring svg{ stroke:var(--accent); }
.ostep .ot{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-primary); font-weight:600; }
.ostep .od{ font-size:0.82rem; color:var(--text-secondary); margin-top:5px; line-height:1.4; }
.ostep:not(:last-child)::after{ content:''; position:absolute; top:37px; left:calc(50% + 42px); right:calc(-50% + 42px); height:2px;
  background:linear-gradient(90deg,var(--teal),rgba(43,196,180,.2)); z-index:1; transform:scaleX(0); transform-origin:left; }
.obs-track.pro .ostep:not(:last-child)::after{ background:linear-gradient(90deg,var(--accent),rgba(255,138,30,.2)); }
.ostep.in:not(:last-child)::after{ transform:scaleX(1); transition:transform .5s ease .15s; }
@media (max-width:860px){ .obs-rail{ flex-direction:column; gap:14px; } .obs-lead{ width:auto; padding-top:0; }
  .obs-steps{ grid-auto-flow:row; grid-auto-columns:auto; gap:18px; } .ostep::after{ display:none!important; } }

/* ============================================================
   11. PCE / VEN real-time adaptive policy
   ============================================================ */
.pce{ display:grid; grid-template-columns:1fr auto 1fr; gap:26px; align-items:center; }
.env-col{ display:flex; flex-direction:column; gap:12px; }
.env{ background:var(--bg-3); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.env .eh{ background:var(--accent); color:#1a0f05; font-weight:600; font-size:0.86rem; padding:8px 14px; text-align:center; letter-spacing:.01em; }
.env .ebody{ display:flex; gap:8px; padding:13px; flex-wrap:wrap; justify-content:center; }
.wl{ width:40px; height:40px; border-radius:9px; background:#0c0f15; border:1px solid var(--line); display:grid; place-items:center; position:relative; }
.wl svg{ width:20px; height:20px; stroke:var(--text-secondary); fill:none; stroke-width:1.5; }
.wl .ven{ position:absolute; right:-5px; bottom:-5px; width:16px; height:16px; border-radius:5px; background:var(--accent); display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg-3); }
.wl .ven svg{ width:9px; height:9px; stroke:#1a0f05; stroke-width:2.6; }
@media (prefers-reduced-motion:no-preference){ .pce.run .wl .ven{ animation:venBlink 2.6s ease-in-out infinite; } }
@keyframes venBlink{ 0%,100%{ box-shadow:0 0 0 2px var(--bg-3); } 50%{ box-shadow:0 0 0 2px var(--bg-3),0 0 10px 2px rgba(255,138,30,.7); } }
.pce-core{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.pce-loop{ position:relative; width:120px; height:120px; }
.pce-loop svg{ width:100%; height:100%; }
.pce-loop .lp{ stroke:var(--accent); stroke-width:2.4; fill:none; }
@media (prefers-reduced-motion:no-preference){ .pce.run .pce-loop{ animation:spin 7s linear infinite; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.pce-loop .ltxt{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:9px; color:var(--accent); text-align:center; letter-spacing:.04em; }
.pce-engine{ background:var(--accent); color:#1a0f05; font-weight:700; border-radius:12px; padding:12px 16px; font-size:0.9rem; box-shadow:0 16px 40px -16px rgba(255,138,30,.8); }
.pce-engine small{ display:block; font-family:var(--mono); font-size:9px; font-weight:600; opacity:.8; }
.pce-flow{ font-family:var(--mono); font-size:10px; color:var(--text-secondary); }
@media (max-width:860px){ .pce{ grid-template-columns:1fr; } }

/* ============================================================
   12. WORKLOAD COVERAGE pills
   ============================================================ */
.cov-rail{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.cov-pill{ font-weight:600; font-size:0.92rem; padding:11px 20px; border-radius:999px; white-space:nowrap; }
.cov-pill.dark{ background:#22303a; color:#cdd5dd; } .cov-pill.org{ background:var(--accent); color:#1a0f05; }
.cov-pill.orgs{ background:rgba(255,138,30,.16); color:var(--accent); border:1px solid var(--border); }
.cov-pill.blue{ background:rgba(89,176,255,.16); color:var(--info); border:1px solid rgba(89,176,255,.3); }
.cov-sep{ width:18px; height:2px; background:var(--line); }
.cov-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.covc{ background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:20px 16px; text-align:center; transition:.2s; }
.covc:hover{ border-color:var(--border); transform:translateY(-3px); }
.covc .ci{ display:flex; gap:9px; justify-content:center; margin-bottom:13px; min-height:30px; align-items:center; }
.covc .ci svg{ width:26px; height:26px; stroke:var(--text-secondary); fill:none; stroke-width:1.5; }
.covc h4{ font-size:0.92rem; margin-bottom:5px; } .covc p{ font-size:0.8rem; color:var(--text-secondary); line-height:1.4; }
.covc .mode{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-top:8px; display:block; }
@media (max-width:980px){ .cov-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .cov-grid{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   9. ZERO TRUST use-cases radial -> orbit
   ============================================================ */
.zt{ display:grid; grid-template-columns:1fr 1.1fr; gap:46px; align-items:center; }
.zt-core{ position:relative; aspect-ratio:1; max-width:420px; margin:0 auto; width:100%; }
.zt-ring{ position:absolute; border-radius:50%; border:1px solid var(--line); }
.zt-ring.r1{ inset:0; } .zt-ring.r2{ inset:16%; border-color:rgba(255,138,30,.18); } .zt-ring.r3{ inset:32%; border-style:dashed; border-color:rgba(43,196,180,.2); }
@media (prefers-reduced-motion:no-preference){ .zt-core.run .zt-ring.r1{ animation:spin 60s linear infinite; } .zt-core.run .zt-ring.r3{ animation:spin 40s linear infinite reverse; } }
.zt-hub{ position:absolute; inset:34%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff9f45,var(--accent));
  display:grid; place-items:center; text-align:center; color:#1a0f05; box-shadow:0 20px 50px -20px rgba(255,138,30,.8); z-index:3; }
.zt-hub b{ font-size:0.78rem; font-weight:700; line-height:1.2; } .zt-hub .lg{ width:26px; height:26px; margin:0 auto 4px; }
.zt-hub .lg svg{ width:100%; height:100%; fill:#1a0f05; }
.zt-orb{ position:absolute; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--border); display:grid; place-items:center; z-index:4; transition:.25s; }
.zt-orb svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.5; }
.zt-orb:hover{ border-color:var(--accent); box-shadow:0 0 20px -4px rgba(255,138,30,.6); transform:scale(1.08); }
.zt-orb .tip{ position:absolute; bottom:120%; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono);
  font-size:9.5px; background:#0a0c11; border:1px solid var(--line); border-radius:6px; padding:3px 8px; color:var(--text-primary);
  opacity:0; pointer-events:none; transition:.2s; }
.zt-orb:hover .tip{ opacity:1; }
.zt-uc{ display:flex; flex-direction:column; gap:12px; }
.zt-uc .ucr{ display:flex; align-items:center; gap:12px; background:var(--bg-3); border:1px solid var(--line); border-radius:11px; padding:13px 16px; transition:.2s; }
.zt-uc .ucr:hover{ border-color:var(--border); }
.zt-uc .ucr .ui{ width:34px; height:34px; border-radius:9px; background:var(--accent-soft); border:1px solid var(--border); display:grid; place-items:center; flex:0 0 auto; }
.zt-uc .ucr .ui svg{ width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.7; }
.zt-uc .ucr b{ font-size:0.95rem; } .zt-uc .ucr span{ display:block; font-size:0.82rem; color:var(--text-secondary); }
@media (max-width:900px){ .zt{ grid-template-columns:1fr; gap:34px; } }

/* ============================================================
   4. WHY ILLUMIO hexagons
   ============================================================ */
.hexgrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hexc{ display:grid; grid-template-columns:auto 1fr; gap:18px; background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:26px; transition:.2s; }
.sect.alt .hexc{ background:var(--bg-3); }
.hexc:hover{ border-color:var(--border); transform:translateY(-3px); }
.hex{ width:48px; height:54px; flex:0 0 auto; background:var(--accent); color:#1a0f05; font-family:var(--mono); font-weight:700; font-size:1.2rem;
  display:grid; place-items:center; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); margin-top:2px; }
.hexc h3{ font-size:1.16rem; margin-bottom:9px; line-height:1.2; } .hexc p{ color:var(--text-secondary); font-size:0.93rem; line-height:1.55; }
@media (max-width:780px){ .hexgrid{ grid-template-columns:1fr; } }

/* metric strip */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.metric{ background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; }
.metric b{ display:block; font-family:var(--mono); font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:600; color:var(--accent); letter-spacing:-.02em; }
.metric span{ font-size:0.86rem; color:var(--text-secondary); }
@media (max-width:680px){ .metrics{ grid-template-columns:1fr 1fr; gap:14px; } }

/* reduce hero headline */
.hero h1{ font-size:clamp(1.4rem,2.96vw,1.98rem); }

/* ============================================================
   USE CASES BY SEGMENT
   ============================================================ */
.segus{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.suc{ background:var(--bg-3); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; transition:.2s; }
.suc:hover{ border-color:var(--border); transform:translateY(-3px); }
.suc .sh{ display:flex; align-items:center; gap:11px; margin-bottom:5px; }
.suc .sh .si{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); border:1px solid var(--border); display:grid; place-items:center; flex:0 0 auto; }
.suc .sh .si svg{ width:21px; height:21px; stroke:var(--accent); fill:none; stroke-width:1.6; }
.suc h3{ font-size:1.05rem; line-height:1.15; }
.suc .smode{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin:3px 0 18px; }
.suc ul{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:auto; }
.suc li{ display:flex; gap:10px; }
.suc li .lc{ width:20px; height:20px; border-radius:6px; background:var(--teal-soft); border:1px solid rgba(43,196,180,.3); display:grid; place-items:center; flex:0 0 auto; margin-top:1px; }
.suc li .lc svg{ width:11px; height:11px; stroke:var(--teal); fill:none; stroke-width:2.8; }
.suc li b{ font-size:0.88rem; display:block; color:var(--text-primary); }
.suc li span{ font-size:0.78rem; color:var(--text-secondary); line-height:1.45; display:block; margin-top:2px; }
@media (max-width:1000px){ .segus{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .segus{ grid-template-columns:1fr; } }

/* ============================================================
   USE CASES BY INDUSTRY
   ============================================================ */
.indus{ display:flex; flex-direction:column; gap:14px; }
.indrow{ display:grid; grid-template-columns:268px 1fr; gap:26px; align-items:center; background:var(--bg-3); border:1px solid var(--line); border-radius:16px; padding:22px 24px; transition:.2s; }
.sect.alt .indrow{ background:var(--bg-panel); }
.indrow:hover{ border-color:var(--border); transform:translateY(-2px); }
.ind-id{ display:flex; gap:14px; align-items:flex-start; }
.ind-id .ii{ width:46px; height:46px; border-radius:12px; background:var(--accent-soft); border:1px solid var(--border); display:grid; place-items:center; flex:0 0 auto; }
.ind-id .ii svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.6; }
.ind-id h3{ font-size:1.1rem; line-height:1.15; }
.ind-id p{ font-size:0.82rem; color:var(--text-secondary); line-height:1.4; margin-top:4px; }
.ind-uc{ display:flex; flex-wrap:wrap; gap:9px; }
.ind-uc .uc{ display:flex; align-items:center; gap:8px; background:var(--bg-3); border:1px solid var(--line); border-radius:9px; padding:9px 13px; font-size:0.85rem; color:var(--text-secondary); }
.sect.alt .ind-uc .uc{ background:var(--bg-3); }
.ind-uc .uc svg{ width:13px; height:13px; stroke:var(--teal); fill:none; stroke-width:2.8; flex:0 0 auto; }
.ind-uc .uc b{ color:var(--text-primary); font-weight:500; }
@media (max-width:820px){ .indrow{ grid-template-columns:1fr; gap:16px; } }

/* ============================================================
   HERO — RESOURCE TRAFFIC MAP (live, animated)
   ============================================================ */
.rtm{ position:relative; background:linear-gradient(180deg,#11151c,#0b0d12); border:1px solid var(--border);
  border-radius:18px; padding:18px 18px 16px; box-shadow:0 50px 110px -50px #000, inset 0 1px 0 rgba(255,255,255,.04); }
.rtm-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rtm-title{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; }
.rtm-title .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulseDot 1.8s infinite; }
.rtm.detected .rtm-title .dot, .rtm.contained .rtm-title .dot{ background:var(--breach); box-shadow:0 0 10px var(--breach); }
.rtm.contained .rtm-title .dot{ background:var(--accent); box-shadow:0 0 10px var(--accent); }
.rtm-qbtn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; color:#6b7686; border:1px solid var(--line); border-radius:8px; padding:6px 10px; transition:.35s; white-space:nowrap; }
.rtm-qbtn svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
.rtm.contained .rtm-qbtn{ color:var(--accent); border-color:var(--border); background:var(--accent-soft); box-shadow:0 0 18px -6px var(--accent); }
.rtm-sub{ font-family:var(--mono); font-size:10.5px; color:#6b7686; margin:9px 0 8px; display:flex; align-items:center; gap:7px; }
.rtm-sub svg{ width:13px; height:13px; stroke:var(--info); fill:none; stroke-width:1.6; }
.rtm-sub b{ color:#c7d0da; }
.rtm-stage{ position:relative; border:1px solid rgba(255,255,255,.04); border-radius:12px; background:radial-gradient(120% 100% at 30% 0%,rgba(89,176,255,.05),transparent 60%); overflow:hidden; }
.map{ width:100%; height:auto; display:block; }
.map .cont{ fill:rgba(89,176,255,0.04); stroke:rgba(89,176,255,.18); stroke-width:1.1; }
.map .cont.az{ fill:rgba(89,176,255,0.055); }
.map .clabel{ fill:#5f6a7a; font-family:var(--mono); font-size:8.5px; letter-spacing:.03em; }
.map .vmbox{ fill:#0e1925; stroke:var(--info); stroke-width:1.6; }
.map .vmico{ stroke:var(--info); fill:none; stroke-width:1.5; }
.map .vmlbl{ fill:#c7d0da; font-family:var(--mono); font-size:8.5px; text-anchor:middle; }
.map .vmsub{ fill:#566072; font-family:var(--mono); font-size:7px; text-anchor:middle; }
.map .globe{ stroke:#8a93a3; fill:#0c0f15; stroke-width:1.4; }
.map .gmer{ stroke:#8a93a3; fill:none; stroke-width:1.1; }
.rtm.detected .map .globe, .rtm.contained .map .globe{ stroke:var(--breach); }
.rtm.detected .map .gmer, .rtm.contained .map .gmer{ stroke:var(--breach); }
.map .badge5 circle{ fill:#2a3340; }
.map .badge5 text{ fill:#fff; font-family:var(--mono); font-size:9px; font-weight:600; text-anchor:middle; }
/* flows */
.map .flow{ fill:none; stroke:var(--teal); stroke-width:2.4; stroke-linecap:round; opacity:.85; transition:stroke .45s,opacity .45s; }
.rtm.detected .map .flow.entry, .rtm.contained .map .flow.entry{ stroke:var(--breach); }
.rtm.detected .map .flow.entry{ filter:drop-shadow(0 0 5px rgba(255,90,90,.7)); }
.rtm.contained .map .flow.entry{ opacity:.35; stroke-dasharray:4 5; }
.rtm.contained .map .flow.lateral{ stroke:#3a4250; opacity:.45; stroke-dasharray:3 5; }
.map .pkt{ fill:#eafff9; }
.map .pkt.bad{ fill:#ff9a9a; }
.rtm.detected .map .pkt.bad{ fill:var(--breach); }
.rtm.contained .map .pkt{ opacity:0; transition:opacity .3s; }
/* focused VM + quarantine ring */
.map .qring{ fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 6; opacity:0; transform-box:fill-box; transform-origin:center; }
.rtm.contained .map .qring{ opacity:1; }
@media (prefers-reduced-motion:no-preference){ .rtm.contained .map .qring{ animation:spin 9s linear infinite; } }
.map .focusbox{ transition:stroke .4s; }
.rtm.detected .map .focusbox{ stroke:var(--breach); }
.rtm.contained .map .focusbox{ stroke:var(--accent); }
/* X block badge on entry path */
.map .xblock{ opacity:0; transition:opacity .4s; transform-box:fill-box; transform-origin:center; }
.rtm.contained .map .xblock{ opacity:1; }
@media (prefers-reduced-motion:no-preference){ .rtm.contained .map .xblock{ animation:nodeHit .5s ease; } }
.map .xblock circle{ fill:#1a0c0c; stroke:var(--breach); stroke-width:1.5; }
.map .xblock path{ stroke:var(--breach); stroke-width:2.2; fill:none; }
/* footer status */
.rtm-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:10px; }
.rtm-state{ color:var(--teal); display:inline-flex; align-items:center; gap:7px; transition:color .4s; }
.rtm.detected .rtm-state{ color:var(--breach); }
.rtm.contained .rtm-state{ color:var(--accent); }
.rtm-meta{ color:#566072; }
@media (max-width:560px){ .rtm-sub{ font-size:9.5px; } }

/* ============================================================
   CONTAINER SEGMENTATION — kubernetes cluster viz
   ============================================================ */
.kube{ width:100%; height:auto; display:block; }
.kube .ns{ fill:rgba(89,176,255,0.04); stroke:rgba(89,176,255,0.28); stroke-width:1.3; }
.kube .nslabel{ fill:var(--info); font-family:var(--mono); font-size:11px; letter-spacing:.02em; }
.kube .ingress{ fill:#0c0f15; stroke:var(--accent); stroke-width:1.4; }
.kube .inglabel{ fill:var(--accent); font-family:var(--mono); font-size:9.5px; }
.kube .allow{ stroke:var(--teal); stroke-width:1.5; fill:none; }
.kube .block{ stroke:var(--breach); stroke-width:1.6; fill:none; stroke-dasharray:4 4; }
.kube .pcore{ fill:#0c0f15; stroke:var(--teal); stroke-width:1.7; }
.kube .pbadge{ fill:var(--accent); }
.kube .pcheck{ stroke:#1a0f05; stroke-width:1.7; fill:none; }
.kube .xmk{ stroke:var(--breach); stroke-width:2.2; }
.kube .xbg{ fill:#0a0c11; }
.kube .pod{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .kube.run .allow{ stroke-dasharray:5 6; animation:kflow 3s linear infinite; }
  .kube.run .pod{ animation:podpop .55s cubic-bezier(.34,1.5,.5,1) backwards; }
  .kube.run .pod:nth-of-type(1){ animation-delay:.05s } .kube.run .pod:nth-of-type(2){ animation-delay:.18s }
  .kube.run .pod:nth-of-type(3){ animation-delay:.31s } .kube.run .pod:nth-of-type(4){ animation-delay:.44s }
  .kube.run .pod:nth-of-type(5){ animation-delay:.57s } .kube.run .pod:nth-of-type(6){ animation-delay:.7s }
  .kube.run .pod:nth-of-type(7){ animation-delay:.83s } .kube.run .pod:nth-of-type(8){ animation-delay:.96s }
  .kube.run .pbadge{ animation:nodeBreathe 2.4s ease-in-out infinite; }
  .kube.run .xmk,.kube.run .xbg{ animation:pulseDot 1.5s infinite; }
}
@keyframes kflow{ to{ stroke-dashoffset:-110; } }
@keyframes podpop{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:scale(1); } }
.kchip{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--mono); font-size:11px;
  background:var(--teal-soft); border:1px solid rgba(43,196,180,.3); color:var(--teal); padding:7px 13px; border-radius:999px; }
.kgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
@media (max-width:820px){ .kgrid{ grid-template-columns:1fr; } }

/* ============================================================
   DEVSECOPS pipeline
   ============================================================ */
.dso{ position:relative; }
.dso-track{ display:grid; grid-template-columns:repeat(5,1fr); position:relative; }
.dso-line{ position:absolute; top:31px; left:10%; right:10%; height:3px; background:var(--line); border-radius:2px; z-index:1; overflow:hidden; }
.dso-line .fill{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--accent),var(--teal)); border-radius:2px; }
.dso .packet{ position:absolute; top:25px; left:10%; width:15px; height:15px; margin-left:-7px; border-radius:5px; background:#fff; box-shadow:0 0 14px var(--accent); z-index:3; opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .dso.run .dso-line .fill{ animation:dsofill 4.5s ease-in-out infinite; }
  .dso.run .packet{ animation:dpacket 4.5s ease-in-out infinite; }
}
@keyframes dsofill{ 0%{width:0} 70%{width:100%} 100%{width:100%} }
@keyframes dpacket{ 0%{left:10%; opacity:0} 6%{opacity:1} 92%{opacity:1; left:90%} 100%{left:90%; opacity:0} }
.dstep{ text-align:center; position:relative; z-index:2; padding:0 6px; }
.dnode{ width:64px; height:64px; border-radius:50%; margin:0 auto 13px; display:grid; place-items:center; background:var(--bg-3); border:1.5px solid var(--border); position:relative; }
.dnode svg{ width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.6; }
.dstep.enf .dnode{ border-color:rgba(43,196,180,.4); } .dstep.enf .dnode svg{ stroke:var(--teal); }
.dven{ position:absolute; right:-5px; bottom:-5px; width:22px; height:22px; border-radius:7px; background:var(--accent); display:grid; place-items:center; box-shadow:0 0 0 3px var(--bg-panel); }
.dven svg{ width:12px; height:12px; stroke:#1a0f05; stroke-width:2.6; }
.dstep .dlbl{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-primary); font-weight:600; }
.dstep .dsub{ font-size:0.8rem; color:var(--text-secondary); margin-top:5px; line-height:1.4; }
.dso-groups{ display:grid; grid-template-columns:3fr 2fr; gap:18px; margin-top:26px; }
.dgroup{ border-top:2px solid; padding-top:13px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.dgroup.def{ border-color:var(--accent); color:var(--accent); } .dgroup.enf{ border-color:var(--teal); color:var(--teal); }
@media (max-width:760px){ .dso-track{ grid-template-columns:1fr 1fr; gap:24px 0; } .dso-line,.dso .packet{ display:none; } .dso-groups{ grid-template-columns:1fr; } }

/* ============================================================
   CHECK POINT INTEGRATION
   ============================================================ */
:root{ --cp:#e6007e; --cp-soft:rgba(230,0,126,0.12); }
.intg{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.intg-side{ background:var(--bg-3); border:1px solid var(--line); border-radius:16px; padding:26px; }
.intg-side.cp{ border-color:rgba(230,0,126,.3); }
.intg-side.il{ border-color:var(--border); }
.intg-side .ihead{ display:flex; align-items:center; gap:11px; margin-bottom:6px; }
.intg-side .imark{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; }
.intg-side.cp .imark{ background:var(--cp-soft); border:1px solid rgba(230,0,126,.4); } .intg-side.cp .imark svg{ stroke:var(--cp); }
.intg-side.il .imark{ background:var(--accent-soft); border:1px solid var(--border); } .intg-side.il .imark svg{ stroke:var(--accent); }
.intg-side .imark svg{ width:17px; height:17px; fill:none; stroke-width:1.8; }
.intg-side h3{ font-size:1.12rem; }
.intg-side .isub{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:16px; }
.intg-side.cp .isub{ color:var(--cp); } .intg-side.il .isub{ color:var(--accent); }
.ipill{ display:flex; align-items:center; gap:10px; background:#0c0f15; border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin-bottom:9px; font-size:0.9rem; }
.ipill .pdot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.intg-side.cp .ipill .pdot{ background:var(--cp); } .intg-side.il .ipill .pdot{ background:var(--accent); }
.intg-side .iaxis{ font-family:var(--mono); font-size:10px; color:var(--text-secondary); margin-top:14px; display:flex; align-items:center; gap:7px; }
.intg-side .iaxis svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }
.intg-join{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 22px; gap:14px; }
.intg-cross{ position:relative; width:78px; height:78px; }
.intg-cross svg{ width:100%; height:100%; }
.intg-cross .ns{ stroke:var(--cp); stroke-width:2.4; fill:none; }
.intg-cross .ew{ stroke:var(--accent); stroke-width:2.4; fill:none; }
@media (prefers-reduced-motion:no-preference){ .intg.run .intg-cross .ns{ animation:pulseDot 2s infinite; } .intg.run .intg-cross .ew{ animation:pulseDot 2s infinite .6s; } }
.intg-join .jbadge{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; text-align:center; color:var(--text-secondary); }
.intg-join .jzt{ background:var(--accent); color:#1a0f05; font-weight:700; font-size:0.82rem; padding:8px 14px; border-radius:999px; white-space:nowrap; }
@media (max-width:860px){ .intg{ grid-template-columns:1fr; gap:16px; } .intg-join{ flex-direction:row; padding:6px 0; } .intg-cross{ width:60px; height:60px; } }
.intg-ben{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
@media (max-width:820px){ .intg-ben{ grid-template-columns:1fr; } }