/* Athena threat-scenario flip cards. Corporate, calm, cinematic. Deep navy + cyan + silver + gold,
   amber for risk, red only as a minimal signal. No horror. Flips on hover, keyboard focus and tap;
   the back scrolls within the card so content never bleeds; reduced motion disables the 3D turn. */

/* Hero is a full-bleed automation banner behind a legibility veil. The generous top padding clears
   the 68px fixed header (the page has no body offset) so the kicker never tucks under the bar. */
.sc-hero { position: relative; box-sizing: border-box; min-height: 460px; padding: 150px 24px 92px; text-align: center; overflow: hidden; background-color: #05080D;
  background-image: url(/assets/scenarios-hero.jpg);
  background-image: -webkit-image-set(url(/assets/scenarios-hero.webp) type("image/webp"), url(/assets/scenarios-hero.jpg) type("image/jpeg"));
  background-image: image-set(url(/assets/scenarios-hero.webp) type("image/webp"), url(/assets/scenarios-hero.jpg) type("image/jpeg"));
  background-size: cover; background-position: center 46%; background-repeat: no-repeat; }
.sc-hero-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(72% 80% at 50% 50%, transparent 0%, rgba(5,8,13,0.46) 100%),
  linear-gradient(180deg, rgba(5,8,13,0.9) 0%, rgba(5,8,13,0.46) 40%, rgba(5,8,13,0.54) 62%, #05080D 100%); }
.sc-hero-in { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.sc-kicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #3EE0F0; margin-bottom: 18px; }
.sc-h1 { font-family: 'Saira', 'Manrope', sans-serif; font-size: clamp(32px, 5vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 20px; text-shadow: 0 2px 30px rgba(5,8,13,0.72); }
.sc-h1 i { font-style: normal; color: #3EE0F0; }
.sc-lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: #C0CAD9; max-width: 660px; margin: 0 auto; text-shadow: 0 1px 16px rgba(5,8,13,0.8); }

.sc-wrap { max-width: 1240px; margin: 0 auto; padding: 8px 24px 96px; }
.sc-filter { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 8px auto 40px; max-width: 1080px; }
.sc-chip { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #9fb0c8; background: rgba(17,25,39,0.6); border: 1px solid rgba(40,56,80,0.8); border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sc-chip:hover { color: #EDF2F7; border-color: rgba(62,224,240,0.4); }
.sc-chip.is-on { color: #05080D; background: #3EE0F0; border-color: #3EE0F0; font-weight: 600; }
.sc-ct { opacity: 0.7; font-variant-numeric: tabular-nums; }
.sc-chip.is-on .sc-ct { opacity: 0.55; }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: 20px; }
.sc-card { position: relative; aspect-ratio: 3 / 4; perspective: 1400px; cursor: pointer; border: 0; background: none; outline: none; }
.sc-card:focus-visible { outline: 2px solid #3EE0F0; outline-offset: 4px; border-radius: 18px; }
.sc-card[hidden] { display: none; }
.sc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sc-card:hover .sc-inner, .sc-card:focus-within .sc-inner, .sc-card.is-flipped .sc-inner { transform: rotateY(180deg); }
.sc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; overflow: hidden; border: 1px solid rgba(40,56,80,0.85); background: #0a1422; }

.sc-front { box-shadow: 0 20px 60px -28px rgba(0,0,0,0.7); }
.sc-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #0a1422; background-image: linear-gradient(135deg, #0c1d33 0%, #070d18 100%); }
.sc-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,13,0.10) 0%, rgba(5,8,13,0.30) 42%, rgba(5,8,13,0.82) 78%, rgba(5,8,13,0.96) 100%); }
.sc-fx { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 18px; }
.sc-cat { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #3EE0F0; margin-bottom: 9px; }
.sc-title { font-family: 'Saira', 'Manrope', sans-serif; font-size: 21px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; color: #fff; margin: 0 0 8px; }
.sc-impact { font-size: 13.5px; line-height: 1.45; color: #c2cde0; margin: 0 0 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-sev { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.sc-sev-critical { color: #ff8f86; background: rgba(210,56,47,0.16); border: 1px solid rgba(210,56,47,0.4); }
.sc-sev-high { color: #f4c24a; background: rgba(238,158,58,0.14); border: 1px solid rgba(238,158,58,0.38); }
.sc-sev-medium { color: #8fe6f4; background: rgba(62,224,240,0.12); border: 1px solid rgba(62,224,240,0.34); }
.sc-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7a93; }

.sc-back { transform: rotateY(180deg); background: linear-gradient(165deg, #0c1726 0%, #070d18 100%); }
.sc-bk-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 18px 17px 18px; scrollbar-width: thin; scrollbar-color: rgba(62,224,240,0.3) transparent; }
.sc-bk-scroll::-webkit-scrollbar { width: 7px; }
.sc-bk-scroll::-webkit-scrollbar-thumb { background: rgba(62,224,240,0.22); border-radius: 7px; }
.sc-q { font-family: 'Saira', 'Manrope', sans-serif; font-size: 16px; line-height: 1.25; font-weight: 700; color: #fff; margin: 8px 0 12px; }
.sc-sum { font-size: 12.5px; line-height: 1.5; color: #aab7cc; margin: 0 0 14px; }
.sc-block { margin: 0 0 12px; }
.sc-block b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #3EE0F0; margin-bottom: 4px; }
.sc-block p { font-size: 12px; line-height: 1.46; color: #aeb9cc; margin: 0; }
.sc-out b { color: #E6C36A; }
.sc-ul { margin: 2px 0 0; padding: 0 0 0 16px; }
.sc-ul li { font-size: 12px; line-height: 1.4; color: #aeb9cc; margin-bottom: 3px; }
.sc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.sc-tl { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7a93; width: 100%; margin-bottom: 1px; }
.sc-tag { font-size: 10.5px; color: #9fb6cc; background: rgba(40,56,80,0.45); border: 1px solid rgba(40,56,80,0.9); border-radius: 6px; padding: 3px 8px; }
.sc-tag-f { color: #b6a8e6; border-color: rgba(122,104,214,0.4); background: rgba(122,104,214,0.1); }
.sc-hero-tag { font-size: 10.5px; color: #8fe6f4; background: rgba(62,224,240,0.1); border: 1px solid rgba(62,224,240,0.34); border-radius: 6px; padding: 3px 8px; }

.sc-empty { text-align: center; color: #6b7a93; padding: 60px 0; font-size: 15px; }

@media (max-width: 600px) { .sc-grid { grid-template-columns: 1fr; gap: 16px; } .sc-card { aspect-ratio: 4 / 5; } }

@media (prefers-reduced-motion: reduce) {
  .sc-inner { transition: none; }
  .sc-card:hover .sc-inner, .sc-card:focus-within .sc-inner { transform: none; }
  .sc-card.is-flipped .sc-inner { transform: rotateY(180deg); }
}