/* CyberFirst: optional WebGL attack globe widget */
.attack-globe { position:relative; overflow:hidden; padding:40px 0 110px; background:var(--bg); }
.attack-globe::before { content:''; position:absolute; top:18%; left:50%; width:720px; height:520px; border-radius:50%; background:rgba(14,165,233,.08); filter:blur(120px); transform:translateX(-50%); pointer-events:none; }
.attack-globe__inner { position:relative; display:grid; grid-template-columns:minmax(280px,.72fr) minmax(520px,1.28fr); align-items:center; gap:clamp(34px,5vw,76px); }
.attack-globe__content { max-width:520px; margin:0; text-align:left; }
.attack-globe__title { margin-bottom:18px; font-size:clamp(30px,4.5vw,48px); font-weight:800; line-height:1.08; letter-spacing:-.03em; }
.attack-globe__description { color:var(--text-muted); font-size:16px; line-height:1.7; }
.attack-globe__legend { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px 18px; margin-top:26px; }
.attack-globe__legend-item { display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); font-size:12.5px; }
.attack-globe__legend-dot { width:8px; height:8px; border-radius:50%; box-shadow:0 0 12px currentColor; }
.attack-globe__legend-dot--source { color:#fbbf24; background:currentColor; }
.attack-globe__legend-dot--route { color:#f97316; background:currentColor; }
.attack-globe__legend-dot--target { color:#ef3b0b; background:currentColor; }
.attack-globe__stage { position:relative; min-height:520px; max-width:680px; margin:0; overflow:hidden; border:1px solid rgba(56,189,248,.22); border-radius:28px; background:radial-gradient(circle at 50% 50%,rgba(14,116,144,.24),transparent 48%),radial-gradient(circle at 50% 100%,rgba(37,99,235,.15),transparent 52%),#020a12; box-shadow:0 28px 80px rgba(2,8,23,.34),inset 0 0 80px rgba(var(--accent-2-rgb), .04); isolation:isolate; }
.attack-globe__stage::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.34) 100%); }
.attack-globe__canvas { display:block; width:100%; height:520px; touch-action:pan-y; }
.attack-globe__fallback { position:absolute; inset:50% auto auto 50%; width:max-content; max-width:80%; color:rgba(226,232,240,.7); transform:translate(-50%,-50%); }

@media (max-width:1024px) {
  .attack-globe { padding-bottom:80px; }
  .attack-globe__content { max-width:680px; }
  .attack-globe__stage,.attack-globe__canvas { min-height:470px; height:470px; }
}
@media (max-width:820px) {
  .attack-globe { padding-bottom:80px; }
  .attack-globe__inner { grid-template-columns:1fr; gap:30px; }
  .attack-globe__content { max-width:680px; }
  .attack-globe__stage { width:100%; max-width:none; }
  .attack-globe__stage,.attack-globe__canvas { min-height:430px; height:430px; }
}

.attack-globe__features {
  display:flex;
  flex-direction:column;
  width:max-content;
  max-width:100%;
  gap:10px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}
.attack-globe__feature {
  box-sizing:border-box;
  width:100%;
  position:relative;
  padding:9px 12px 9px 30px;
  border:1px solid rgba(249,115,22,.26);
  border-radius:10px;
  color:var(--text-muted);
  background:color-mix(in srgb,var(--surface) 76%,rgba(249,115,22,.05));
  font-size:12.5px;
  line-height:1.25;
  white-space:nowrap;
}
.attack-globe__feature::before {
  content:'';
  position:absolute;
  top:50%;
  left:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f97316;
  box-shadow:0 0 11px rgba(249,115,22,.58);
  transform:translateY(-50%);
}
html[data-theme="light"] .attack-globe__stage {
  border-color:rgba(8,94,120,.28);
  /* Светлый фон отключён: используется базовый тёмный фон виджета. */
  /* background:radial-gradient(circle at 50% 48%,rgba(14,145,180,.18),transparent 50%),radial-gradient(circle at 50% 100%,rgba(37,99,235,.09),transparent 56%),#e3f1f6; */
  /* box-shadow:0 22px 54px rgba(15,74,98,.16),inset 0 0 70px rgba(8,100,130,.08); */
}
html[data-theme="light"] .attack-globe__stage::before {
  background:radial-gradient(circle at center,#001035c2 42%,rgb(0 0 0) 100%);
}
html[data-theme="light"] .attack-globe__fallback { color:#cbd5e1; }
@media (max-width:600px) {
  .attack-globe {
    padding:24px 0 56px;
  }
  .attack-globe::before {
    top:44%;
    width:300px;
    height:300px;
    filter:blur(80px);
  }
  .attack-globe__inner {
    gap:24px;
  }
  .attack-globe__content {
    width:100%;
    max-width:none;
    margin:0;
  }
  .attack-globe__title {
    margin-bottom:14px;
    font-size:clamp(27px,8vw,32px);
    line-height:1.12;
    letter-spacing:-.025em;
  }
  .attack-globe__description {
    font-size:14px;
    line-height:1.6;
  }
  .attack-globe__features {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:18px;
  }
  .attack-globe__feature {
    width:100%;
    padding:10px 12px 10px 30px;
    font-size:12px;
  }
  .attack-globe__stage {
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:1 / 1;
    border-radius:16px;
    box-shadow:0 18px 44px rgba(2,8,23,.28),inset 0 0 50px rgba(var(--accent-2-rgb), .04);
  }
  .attack-globe__canvas {
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:1 / 1;
  }
}

@media (max-width:380px) {
  .attack-globe { padding-bottom:44px; }
  .attack-globe__inner { gap:20px; }
  .attack-globe__title { font-size:26px; }
  .attack-globe__description { font-size:13.5px; }
  .attack-globe__feature { padding-block:9px; }
}