/* ════════════════════════════════════════════
   HELPAG.AI CLONE – style.css
   ════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --red: #e8192c;
  --red-glow: #ff2035;
  --dark: #050608;
  --nav-h: 56px;
  --footer-h: 40px;
  --cube-sz: 200px;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  /* Playful, slightly overshooting curve — used only when panels are
     deploying outward, so the split reads as alive rather than mechanical. */
  --ease-out-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Crisp, symmetric curve — used when panels return home, so the
     reassembly feels precise and intentional rather than floppy. */
  --ease-in-out-crisp: cubic-bezier(0.65, 0, 0.35, 1);
}

html,
body {
  height: 100%;
  font-family: 'Google Sans', sans-serif;
  background: var(--dark);
  color: #fff;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 2px;
}

/* ════════ NAVBAR ════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(5, 6, 8, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 100;
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: relative;
}

.logo-link {
  text-decoration: none;
  color: inherit;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  white-space: nowrap;
  color: #fff;
}

.logo-red {
  color: var(--red);
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s var(--ease-smooth);
  white-space: nowrap;
  position: relative;
  padding: 8px 0;
  letter-spacing: 0.2px;
}

.nav-link:hover {
  color: #fff;
}

.nav-link.active {
  color: #fff;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
}

.ask-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  height: 36px;
  border: 1px solid var(--red);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.ask-btn:hover {
  background: rgba(232, 25, 44, 0.12);
  box-shadow: 0 0 16px rgba(232, 25, 44, 0.35);
  scale: 1.02;
}

.ask-btn sup {
  font-size: 0.6rem;
  color: var(--red);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse-ping 1.6s ease-in-out infinite;
}

@keyframes pulse-ping {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.8);
    opacity: 0.4;
  }
}

/* ════════ MOBILE NAV TOGGLE + MENU ════════ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 101;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth), background 0.3s var(--ease-smooth);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  background: rgba(5, 6, 8, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 150;
  transition: max-height 0.4s var(--ease-smooth);
  display: none;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 4px;
}

.mobile-nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s var(--ease-smooth);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: #fff;
}

.mobile-menu .ask-btn {
  margin: 12px 24px 20px;
  width: calc(100% - 48px);
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu.open {
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }

  .nav-inner .ask-btn:not(.mobile-ask-btn) {
    display: none;
  }
}

@media (max-width: 400px) {
  .nav-inner {
    padding: 0 16px;
  }

  .logo {
    font-size: 1.05rem;
  }
}

/* ════════ SITE FOOTER ════════ */
.site-footer {
  /* background: rgba(5, 6, 8, 0.95); */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 24px;
}

.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.site-footer-inner a {
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
  transition: color 0.3s var(--ease-smooth);
}

.site-footer-inner a:hover {
  color: var(--red-glow);
  text-decoration: underline;
}

/* Homepage: the hero is locked to a single viewport with no page scroll
   (see body.home-page below), so the footer is a slim bar pinned to the
   bottom of the screen instead of content the user would have to scroll
   to reach. The hero's own height is trimmed by --footer-h so nothing
   sits underneath it. */
body.home-page .site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(8px);
  z-index: 90;
}

body.home-page .site-footer .site-footer-inner {
  padding: 0;
  font-size: 0.7rem;
}

body.home-page .hero {
  min-height: calc(100vh - var(--footer-h));
}

/* ════════ HERO ════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  /* Best-effort: browsers that can interpolate a grid-track change will
     ease it; the cube's own transform below is what guarantees the
     visible 2s glide regardless of grid-animation support. */
  transition: grid-template-columns 2s var(--ease-smooth);
}

/* Simple Tech Moving Dots */
.tech-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.tech-dots-1 {
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: panDots1 30s linear infinite;
}

.tech-dots-2 {
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
  background-size: 120px 120px;
  animation: panDots2 50s linear infinite;
}

@keyframes panDots1 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 50px;
  }
}

@keyframes panDots2 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 120px;
  }
}

/* AI Y2K Cyber Grid Floor */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 60vh;
  background-image:
    linear-gradient(rgba(255, 80, 120, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 80, 120, 0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(600px) rotateX(78deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(transparent 0%, black 80%);
  -webkit-mask-image: linear-gradient(transparent 0%, black 80%);
  z-index: 0;
  pointer-events: none;
}



.floor-glow {
  position: absolute;
  bottom: 0%;
  left: 30%;
  right: 10%;
  height: 300px;
  background: radial-gradient(ellipse at 50% 80%, rgba(232, 25, 44, 0.25) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* ── LEFT COPY ── */
.hero-left {
  position: relative;
  z-index: 10;
  padding: 60px 0 60px max(24px, calc((100vw - 1400px) / 2 + 24px));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 25, 44, 0.08);
  border: 1px solid rgba(232, 25, 44, 0.3);
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  width: max-content;
  box-shadow: 0 0 15px rgba(232, 25, 44, 0.2);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red);
}

.headline {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #fff;
}

.headline-red {
  color: var(--red);
}

.subtext {
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
}

.subtext-red {
  color: var(--red);
  font-style: italic;
}

.cta-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 4px;
}

.btn-primary {
  padding: 10px 18px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.btn-primary:hover {
  background: #c41225;
  box-shadow: 0 0 24px rgba(232, 25, 44, 0.5);
  transform: translateY(-1px);
}

.btn-ghost {
  padding: 10px 16px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}



/* ════════ CUBE SCENE ════════ */
.cube-scene {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: calc(100vh - var(--nav-h));
}

/* ── orbital rings ── */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
}

.ring-1 {
  width: 420px;
  height: 420px;
  border-color: rgba(232, 25, 44, 0.4);
  box-shadow: 0 0 12px rgba(232, 25, 44, 0.2);
  transform: rotateX(70deg) rotateY(0deg);
  animation: orbitRing 6s linear infinite;
}

.ring-2 {
  width: 380px;
  height: 380px;
  border-color: rgba(255, 255, 255, 0.12);
  transform: rotateX(70deg) rotateY(25deg);
  animation: orbitRing 9s linear infinite reverse;
}

.ring-3 {
  width: 460px;
  height: 460px;
  border-color: rgba(232, 25, 44, 0.18);
  transform: rotateX(72deg) rotateY(-15deg);
  animation: orbitRing 12s linear infinite;
}

/* Red Energy Pulses on Rings */
.ring::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #ff5555;
  border-radius: 50%;
  box-shadow: 0 0 20px 8px rgba(255, 0, 0, 1);
}

@keyframes orbitRing {
  from {
    transform: rotateX(70deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(70deg) rotateZ(360deg);
  }
}

/* ── platform ── */
.platform {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  width: 440px;
  height: 440px;
  transform-style: preserve-3d;
}

.plat-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 4px solid #1a1a20;
  /* Dark metallic rim */
  background: radial-gradient(circle, #2a2a30 0%, #050608 90%);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.9),
    0 10px 30px rgba(80, 5, 10, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Specular highlight for metallic edge */
.plat-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.neon-track {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255, 40, 40, 0.9);
  box-shadow:
    0 0 15px rgba(255, 20, 20, 0.9),
    inset 0 0 10px rgba(255, 20, 20, 0.6);
  pointer-events: none;
  animation: spinTrack 10s linear infinite;
}

@keyframes spinTrack {
  to {
    transform: rotate(360deg);
  }
}

/* Sizes and Z-stacking */
.plat-r1 {
  width: 440px;
  height: 440px;
  transform: translate(-50%, -50%) translateZ(0px);
}

.plat-r1 .neon-track {
  inset: 20px;
  -webkit-mask-image: repeating-conic-gradient(black 0deg, black 40deg, transparent 40deg, transparent 45deg);
  mask-image: repeating-conic-gradient(black 0deg, black 40deg, transparent 40deg, transparent 45deg);
  animation-duration: 25s;
}

.plat-r2 {
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%) translateZ(22px);
}

.plat-r2 .neon-track {
  inset: 16px;
  -webkit-mask-image: repeating-conic-gradient(black 0deg, black 60deg, transparent 60deg, transparent 66deg);
  mask-image: repeating-conic-gradient(black 0deg, black 60deg, transparent 60deg, transparent 66deg);
  animation-duration: 18s;
  animation-direction: reverse;
}

.plat-r3 {
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%) translateZ(44px);
}

.plat-r3 .neon-track {
  inset: 12px;
  -webkit-mask-image: repeating-conic-gradient(black 0deg, black 90deg, transparent 90deg, transparent 100deg);
  mask-image: repeating-conic-gradient(black 0deg, black 90deg, transparent 90deg, transparent 100deg);
  animation-duration: 12s;
}

.plat-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff4444 0%, #cc0000 100%);
  box-shadow:
    0 0 30px 10px rgba(255, 40, 40, 0.8),
    0 0 60px 20px rgba(255, 0, 0, 0.5),
    inset 0 0 15px #660000;
  transform: translate(-50%, -50%) translateZ(66px);
  animation: pulseCore 3s ease-in-out infinite;
}

@keyframes pulseCore {

  0%,
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) translateZ(66px) scale(0.95);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(66px) scale(1.05);
  }
}

/* ── CUBE WRAPPER & ANTIGRAVITY MOTION ── */
.cube-wrapper {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -52%) rotate(0deg);
  width: var(--cube-sz);
  height: var(--cube-sz);
  perspective: 900px;
  cursor: pointer;
  /* Antigravity Rule: buttery smooth state changes */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* Antigravity Rule: layered, soft, diffused drop-shadows */
  filter:
    drop-shadow(0 20px 40px rgba(232, 25, 44, 0.3)) drop-shadow(0 40px 80px rgba(232, 25, 44, 0.15)) drop-shadow(0 0 100px rgba(232, 25, 44, 0.1));
}

.cube-wrapper:hover {
  transform: translate(-50%, -60%) rotate(0deg) scale(1.1);
  filter:
    drop-shadow(0 40px 60px rgba(232, 25, 44, 0.3)) drop-shadow(0 60px 100px rgba(232, 25, 44, 0.2)) drop-shadow(0 0 120px rgba(232, 25, 44, 0.4));
}

/* ── ANTIGRAVITY FLOAT ── */
.cube-float {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Antigravity Rule: Weightlessness */
  animation: antigravityFloat 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes antigravityFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-30px);
  }
}

/* ── THE CUBE ── */
.cube {
  width: var(--cube-sz);
  height: var(--cube-sz);
  position: relative;
  transform-style: preserve-3d;
  animation: swayCube 12s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth);
}

.cube-wrapper:hover .cube {
  animation-play-state: paused;
}

@keyframes swayCube {

  0%,
  100% {
    transform: rotateX(-12deg) rotateY(-25deg) rotateZ(4deg);
  }

  33% {
    transform: rotateX(-18deg) rotateY(15deg) rotateZ(-3deg);
  }

  66% {
    transform: rotateX(-8deg) rotateY(25deg) rotateZ(6deg);
  }
}

/* ── faces ── */
.face {
  position: absolute;
  width: var(--cube-sz);
  height: var(--cube-sz);
  /* Darker Tinted Red Base (keeps translucency for glass blur) */
  background: linear-gradient(135deg, rgba(80, 0, 0, 0.3) 0%, rgba(30, 0, 0, 0.2) 50%, rgba(100, 0, 0, 0.4) 100%);
  /* Intense Lighting Neon Edges */
  border: 1.5px solid rgba(255, 100, 100, 0.9);
  border-top: 2px solid rgba(255, 200, 200, 1);
  border-left: 2px solid rgba(255, 200, 200, 1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  /* Strong layered blur effect */
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  /* Intense Red Edge Glows */
  box-shadow:
    inset 0 0 25px rgba(255, 40, 40, 0.8),
    /* bright inner edge glow */
    inset 0 0 80px rgba(120, 0, 0, 0.4),
    /* darker volumetric center */
    0 0 25px rgba(255, 40, 40, 0.8),
    /* bright outer edge glow */
    0 0 60px rgba(255, 0, 0, 0.5);
  /* ambient red glow */
}

/* Clean Polished Glass Specular Highlight/Sheen */
.face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.1) 20%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 50, 50, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Inner volumetric glow */
.face::after {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 20, 50, 0.3) 0%, transparent 60%);
  filter: blur(15px);
  pointer-events: none;
  z-index: 0;
}

/* Assigning standard transforms for each face (unified colors are now in .face) */
.face-front {
  transform: translateZ(calc(var(--cube-sz)/2));
}

.face-back {
  transform: rotateY(180deg) translateZ(calc(var(--cube-sz)/2));
}

.face-left {
  transform: rotateY(-90deg) translateZ(calc(var(--cube-sz)/2));
}

.face-right {
  transform: rotateY(90deg) translateZ(calc(var(--cube-sz)/2));
}

.face-top {
  transform: rotateX(90deg) translateZ(calc(var(--cube-sz)/2));
}

.face-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--cube-sz)/2));
}

/* Y2K cyber wireframe grid lines on each face */
.face-grid {
  display: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
}

/* AI text */
.text-face {
  position: absolute;
  width: var(--cube-sz);
  height: var(--cube-sz);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  /* Hides the text when looking at the INSIDE of the face, preventing backward 'IA' completely */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ai-text {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: -2px;
  color: #ff6a6a;
  text-shadow:
    0 0 10px rgba(255, 40, 40, 0.9),
    0 0 30px rgba(255, 20, 20, 0.7),
    0 0 60px rgba(200, 10, 10, 0.5);
  line-height: 1;
}

/* corner accents */
.corner {
  display: none;
}

/* edge glow on hover */
.cube-wrapper:hover .face {
  box-shadow:
    inset 0 0 120px rgba(150, 0, 10, 0.9),
    inset 0 0 40px rgba(200, 0, 20, 0.8),
    0 0 80px rgba(180, 0, 10, 0.7);
}

/* ── sparks ── */
.sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--red-glow);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(232, 25, 44, 0.8);
  animation: sparkFloat var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes sparkFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(var(--dx, 20px), var(--dy, -40px)) scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: translate(var(--dx2, -10px), var(--dy2, -80px)) scale(0);
    opacity: 0;
  }
}

/* ════════ RIGHT COPY ════════ */
.hero-right {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px 0 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
  min-width: 360px;
}

.right-content {
  width: 100%;
  max-width: 600px;
}

.right-title {
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.right-text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 20px;
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.right-title.is-swapping,
.right-text.is-swapping {
  opacity: 0;
  transform: translateY(12px);
}

.right-text::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--red);
  margin-top: 14px;
}

.btn-start-now {
  margin-top: 14px;
  background: transparent;
  color: #ffffff;
  border: 1px solid var(--red);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s var(--ease-smooth);
}

.btn-start-now:hover {
  background: rgba(232, 25, 44, 0.1);
  box-shadow: 0 0 10px rgba(232, 25, 44, 0.3);
}

/* ════════ HERO BADGES ════════ */
.hero-badges {
  margin-top: 32px;
  width: 650px;
  max-width: 100%;
  height: auto;
  opacity: 0.85;
  transition: opacity 0.35s var(--ease-smooth);
}

.hero-badges:hover {
  opacity: 1;
}

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }

  .hero-right {
    display: none;
  }

  .hero-left {
    padding-left: 32px;
  }
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .cube-scene {
    height: 60vh;
  }

  .hero-left {
    padding: 40px 24px 20px;
  }

  .nav-links {
    display: none;
  }
}

/* ════════ CUBE SPLIT ADD-ON ════════
   The original cube above is untouched.
   These six temporary cuboids use one shared, exact slice height
   for BOTH their vertical walls and their top/bottom cut faces.
*/
.split-cube {
  position: absolute;
  inset: 0;
  width: var(--cube-sz);
  height: var(--cube-sz);
  transform-style: preserve-3d;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  /* Neutral resting pose — identical to the fixed angle script.js eases
     the plain cube toward before the handoff, so revealing this element
     is invisible: both objects are at the exact same angle at that instant. */
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.split-cube.is-visible {
  visibility: visible;
  opacity: 1;
}

/* "AI" branding, positioned on the assembled stack's outer front face at
   the exact same depth as each slice's front wall. Present at full
   strength through the cube→layers crossfade (so the two objects read as
   the same branded cube), then dissolves away right as the layers start
   separating — by the time there's daylight between them, the text is
   already gone. Reuses .ai-text so the type treatment matches exactly. */
.split-cube-brand {
  position: absolute;
  inset: 0;
  width: var(--cube-sz);
  height: var(--cube-sz);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(calc(var(--cube-sz) / 2 + 2px));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  z-index: 30;
  opacity: 1;
  transition: opacity 0.45s var(--ease-smooth);
  transition-delay: 0.25s;
}

.split-cube.is-deploying .split-cube-brand,
.split-cube.is-fixed .split-cube-brand,
.split-cube.is-collapsing .split-cube-brand {
  opacity: 0;
  transition-delay: 0s;
}

.cube-slice {
  --slice-h: calc(var(--cube-sz) / 6);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cube-sz);
  height: var(--slice-h);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  box-sizing: border-box;
  will-change: transform, height;
  transition:
    transform 1.15s cubic-bezier(.16, 1, .3, 1),
    height 1.15s cubic-bezier(.16, 1, .3, 1);
}

/*
 * Every face is border-box.
 * This is important: the visible border is included inside the
 * exact slice dimensions instead of increasing the slice size.
 */
.slice-face {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(80, 0, 0, 0.3) 0%, rgba(30, 0, 0, 0.2) 50%, rgba(100, 0, 0, 0.4) 100%);
  border: 1.5px solid rgba(255, 100, 100, 0.9);
  border-top: 2px solid rgba(255, 200, 200, 1);
  border-left: 2px solid rgba(255, 200, 200, 1);
  border-radius: 4px;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  box-shadow:
    inset 0 0 25px rgba(255, 40, 40, 0.8),
    inset 0 0 80px rgba(120, 0, 0, 0.4),
    0 0 25px rgba(255, 40, 40, 0.8),
    0 0 60px rgba(255, 0, 0, 0.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slice-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.1) 20%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 50, 50, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

.slice-face::after {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 20, 50, 0.3) 0%, transparent 60%);
  filter: blur(15px);
  pointer-events: none;
  z-index: 0;
}

/*
 * Vertical walls:
 * their height is the SAME --slice-h as the actual cuboid.
 */
.slice-front,
.slice-back,
.slice-left,
.slice-right {
  width: var(--cube-sz);
  height: var(--slice-h);
  left: 50%;
  top: 50%;
}

.slice-front {
  transform: translate(-50%, -50%) translateZ(calc(var(--cube-sz) / 2));
}

.slice-back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--cube-sz) / 2));
}

.slice-left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--cube-sz) / 2));
}

.slice-right {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--cube-sz) / 2));
}

/*
 * Top and bottom are the two cut surfaces of the SAME cuboid.
 * Their distance from the slice centre is exactly half of the
 * CURRENT slice height.
 *
 * JS updates --slice-h whenever the slice becomes thin.
 * Therefore these surfaces never float above/below their slice.
 */
.slice-top,
.slice-bottom {
  width: var(--cube-sz);
  height: var(--cube-sz);
  left: 50%;
  top: 50%;
}

.slice-top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--slice-h) / 2));
}

.slice-bottom {
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--slice-h) / 2));
}

/* Fades out in step with the split-cube fading in (both share the same
   0.5s window), so the handoff is a genuine cross-dissolve rather than
   one object popping out while the other fades up. */
.cube.split-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ════════ CUBE → LAYER TRANSITION ════════
   The original cube styling above is intentionally untouched.
   These rules only control the transition layout and the split state.
*/
.hero-left {
  transition:
    opacity 0.65s var(--ease-smooth),
    transform 0.75s var(--ease-smooth);
}

.hero-right {
  /* JS controls this state; do not rely on hover. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition:
    opacity 0.6s var(--ease-smooth),
    visibility 0s linear 0.6s,
    transform 0.7s var(--ease-smooth);
}

.hero.is-transforming .hero-left,
.hero.is-transformed .hero-left {
  opacity: 0;
  transform: translateX(-55px);
  pointer-events: none;
}

.hero.is-transforming .hero-right,
.hero.is-transformed .hero-right {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0.35s;
}

/* Move only the cube itself to the left. The original cube-scene
   geometry, perspective and cube styling remain unchanged.
   A short delay lets the hero copy lead the exit by a beat, so the
   two moves read as a sequence instead of everything happening at once. */
.hero.is-transforming .cube-wrapper,
.hero.is-transformed .cube-wrapper {
  transform:
    translate(calc(-50% - 30vw), -52%) rotate(0deg) scale(0.94);
  transition: transform 2s var(--ease-smooth), filter 2s var(--ease-smooth);
  transition-delay: 0.09s;
}

/* Prevent the hover enlargement from fighting the transformed position. */
.hero.is-transforming .cube-wrapper:hover,
.hero.is-transformed .cube-wrapper:hover {
  transform:
    translate(calc(-50% - 30vw), -52%) rotate(0deg) scale(0.94);
}

/* Once the cube has moved, remove the old hero-only atmosphere from
   the cube area so the six layers become the visual focus. */
.hero.is-transforming .cube-scene .ring,
.hero.is-transformed .cube-scene .ring,
.hero.is-transforming .cube-scene .platform,
.hero.is-transformed .cube-scene .platform,
.hero.is-transforming .cube-scene .sparks,
.hero.is-transformed .cube-scene .sparks {
  opacity: 0;
}

.cube-scene .ring,
.cube-scene .platform,
.cube-scene .sparks {
  transition: opacity 0.65s var(--ease-smooth);
}

/* ── Split-layer visual hierarchy ── */
.cube-slice {
  transition:
    transform 1.15s var(--ease-smooth),
    height 1.15s var(--ease-smooth),
    opacity 0.35s var(--ease-smooth);
}

/* While idle/browsing (not mid deploy or collapse), a layer-selection
   scale bump should feel like an instant, snappy response — not the slow
   1.15s used for the deploy/collapse position moves. */
.split-cube.is-fixed .cube-slice {
  transition:
    transform 0.45s var(--ease-out-spring),
    height 1.15s var(--ease-smooth),
    opacity 0.35s var(--ease-smooth);
}

/* Inactive layers use the original glass character but lose the red cast. */
.cube-slice:not(.active) .slice-face {
  background:
    linear-gradient(135deg,
      rgba(105, 115, 125, 0.20) 0%,
      rgba(35, 40, 45, 0.18) 50%,
      rgba(120, 130, 140, 0.16) 100%);
  border-color: rgba(215, 222, 230, 0.55);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(255, 255, 255, 0.06);
}

.cube-slice:not(.active) .slice-face::before {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.05) 24%,
      transparent 55%);
}

.cube-slice:not(.active) .slice-face::after {
  background:
    radial-gradient(circle, rgba(190, 205, 220, 0.08) 0%, transparent 62%);
}

/* Active first layer: same geometry, red accent only. */
.cube-slice.active .slice-face {
  background:
    linear-gradient(135deg,
      rgba(90, 0, 8, 0.32) 0%,
      rgba(35, 5, 8, 0.22) 50%,
      rgba(110, 0, 12, 0.34) 100%);

  border-color: rgba(255, 85, 90, 0.9);
  border-top-color: rgba(255, 205, 205, 1);
  border-left-color: rgba(255, 205, 205, 1);
  box-shadow:
    inset 0 0 25px rgba(255, 40, 40, 0.65),
    0 0 22px rgba(255, 35, 45, 0.55),
    0 0 48px rgba(255, 0, 0, 0.22);
}

.slice-label {
  position: absolute;
  z-index: 5;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translateZ(calc(var(--cube-sz) / 2 + 2px));
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
  transition: color 0.35s var(--ease-smooth), text-shadow 0.35s var(--ease-smooth);
}

.cube-slice.active .slice-label {
  color: var(--red-glow);
  text-shadow:
    0 0 8px rgba(255, 30, 40, 0.75),
    0 0 18px rgba(255, 20, 30, 0.35);
}

/* A thin, subtle central energy line appears only after the split. */
.split-cube::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -28px;
  width: 1px;
  height: calc(100% + 56px);
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(255, 30, 40, 0.15) 8%,
      rgba(255, 30, 40, 0.65) 50%,
      rgba(255, 30, 40, 0.15) 92%,
      transparent 100%);
  box-shadow: 0 0 10px rgba(255, 25, 35, 0.28);
  opacity: 0;
  transition: opacity 0.5s var(--ease-smooth);
  pointer-events: none;
}

.split-cube.is-visible::after {
  opacity: 1;
}

@media (max-width: 1024px) {

  .hero.is-transforming .cube-wrapper,
  .hero.is-transformed .cube-wrapper,
  .hero.is-transforming .cube-wrapper:hover,
  .hero.is-transformed .cube-wrapper:hover {
    transform:
      translate(calc(-50% - 24vw), -52%) rotate(0deg) scale(0.88);
  }
}

@media (max-width: 768px) {

  .hero.is-transforming .cube-wrapper,
  .hero.is-transformed .cube-wrapper,
  .hero.is-transforming .cube-wrapper:hover,
  .hero.is-transformed .cube-wrapper:hover {
    transform:
      translate(-50%, -52%) rotate(0deg) scale(0.78);
  }

  .hero.is-transforming .hero-right,
  .hero.is-transformed .hero-right {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FINAL 7-LAYER INTERACTION OVERRIDES
   - seven equal solid layers
   - fixed after split (no mouse movement / no sway)
   - full selected layer becomes the red active layer
   - labels have a small glass badge, but selection belongs to the layer
   - top mini cube returns to the initial cube
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --layer-count: 7;
  --layer-h: calc(var(--cube-sz) / var(--layer-count));
  --layer-glass: rgba(150, 160, 170, 0.10);
  --layer-glass-strong: rgba(185, 195, 205, 0.16);
  --layer-border: rgba(225, 232, 238, 0.52);
  --layer-active: rgba(232, 25, 44, 0.72);
}

/* Split container is a static 3D object after transition. */
.split-cube {
  width: var(--cube-sz);
  height: var(--cube-sz);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: none !important;
  transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth);
}

.split-cube.is-fixed {
  animation: none !important;
}

/* Seven layers: their DOM top positions remain the original assembled
   positions. JS applies only the final Y translation during separation. */
.cube-slice {
  --slice-h: var(--layer-h);
  height: var(--layer-h);
  width: var(--cube-sz);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 1.15s var(--ease-smooth),
    height 1.15s var(--ease-smooth),
    filter 0.35s var(--ease-smooth),
    opacity 0.35s var(--ease-smooth);
  outline: none;
}

/* Deploying: panels ease outward with a gentle overshoot, then settle —
   gives the separation a light, energetic quality instead of a flat slide.
   Duration + max stagger (450ms) is sized to land inside the 2s FORM
   window driven by JS. */
.split-cube.is-deploying .cube-slice {
  transition:
    transform 1.45s var(--ease-out-spring),
    height 1.45s var(--ease-out-spring),
    filter 0.35s var(--ease-smooth),
    opacity 0.35s var(--ease-smooth);
}

/* Collapsing: panels return home on a crisp, symmetric curve with no
   overshoot — reads as precise and mechanical, the opposite personality
   of the deploy, so returning to the cube feels deliberate. Slightly
   quicker than the deploy so it still lands inside its own 2s window. */
.split-cube.is-collapsing .cube-slice {
  transition:
    transform 1.25s var(--ease-in-out-crisp),
    height 1.25s var(--ease-in-out-crisp),
    filter 0.35s var(--ease-smooth),
    opacity 0.35s var(--ease-smooth);
}

.cube-slice:hover {
  filter: none;
}

.cube-slice:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .7);
  outline-offset: 5px;
}

/* Inactive layers: sleek obsidian dark metallic plates */
.cube-slice:not(.active) .slice-face {
  background: linear-gradient(135deg, #181c24 0%, #0c0e12 55%, #14171f 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-top: 1.5px solid rgba(255, 255, 255, 0.65);
  border-left: 1.5px solid rgba(255, 255, 255, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 18px rgba(0, 0, 0, 0.92),
    0 4px 16px rgba(0, 0, 0, 0.7);
}

.cube-slice:not(.active) .slice-face::before {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.05) 25%,
      transparent 55%,
      rgba(255, 255, 255, 0.02) 100%);
}

.cube-slice:not(.active) .slice-face::after {
  background: radial-gradient(circle, rgba(205, 215, 225, 0.05), transparent 64%);
}

/* Active layer: glowing neon red obsidian plate */
.cube-slice.active .slice-face {
  background:
    linear-gradient(135deg,
      rgba(90, 8, 14, 0.95) 0%,
      rgba(28, 4, 7, 0.95) 45%,
      rgba(110, 10, 18, 0.95) 100%);
  border: 1.5px solid #ff1a2d;
  border-top: 2px solid #ff7b88;
  border-left: 2px solid #ff7b88;
  box-shadow:
    inset 0 0 25px rgba(255, 26, 45, 0.7),
    inset 0 1px 0 rgba(255, 220, 220, 0.4),
    0 0 22px rgba(255, 26, 45, 0.65),
    0 0 50px rgba(255, 0, 20, 0.35);
}

.cube-slice.active .slice-face::before {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 180, 180, 0.1) 22%,
      transparent 55%,
      rgba(255, 40, 50, 0.15) 100%);
}

/* Remove the old central line because the new central red light is a
   separate physical element. */
.split-cube::after {
  display: none;
}

/* ── Center energy light beneath the stack ── */
.layer-core-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(4px);
  background: radial-gradient(circle,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 80, 90, .96) 10%,
      rgba(232, 25, 44, .76) 32%,
      rgba(232, 25, 44, .18) 62%,
      transparent 75%);
  box-shadow:
    0 0 18px rgba(255, 35, 45, .85),
    0 0 45px rgba(255, 20, 30, .55),
    0 0 85px rgba(255, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-smooth);
  z-index: 1;
}

.hero.is-split .layer-core-light {
  opacity: 1;
}

/* ── Small cube above the seven layers ──
   Seed state: collapsed to a speck at the cube's own core. It grows and
   travels up to its resting spot above the stack only once the layers
   start forming (.is-split), in sync with the rod and the slice breakdown. */
.layer-top-cube {
  position: absolute;
  left: 50%;
  top: -67%;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  transform-style: preserve-3d;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transform:
    translate(-50%, -50%) translateY(150px) translateZ(190px) rotateX(-14deg) rotateY(-45deg) scale(0.12);
  transition:
    opacity 0.6s var(--ease-smooth),
    visibility 0.6s var(--ease-smooth),
    transform 1.85s var(--ease-out-spring);
}

.hero.is-split .layer-top-cube {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform:
    translate(-50%, -50%) translateY(0) translateZ(190px) rotateX(-14deg) rotateY(-45deg) scale(1);
}

.hero.is-split .layer-top-cube:hover {
  transform:
    translate(-50%, -50%) translateY(0) translateZ(190px) rotateX(-14deg) rotateY(-45deg) scale(1.08);
}

.mini-face {
  position: absolute;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 45, 60, 1);
  background: rgba(232, 25, 44, 0.19);
  box-shadow:
    inset 0 0 10px rgba(255, 40, 55, 0.72),
    0 0 15px rgba(255, 35, 45, 0.62),
    0 0 30px rgba(255, 20, 30, 0.28);
  backdrop-filter: blur(6px);
}

.mini-code {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 32, 48, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mini-front {
  transform: translateZ(18px);
}

.mini-right {
  transform: rotateY(90deg) translateZ(18px);
}

.mini-top {
  transform: rotateX(90deg) translateZ(18px);
}

/* Static split state: no float, no sway, no mouse rotation. */
.hero.is-transformed .split-cube,
.hero.is-transforming .split-cube {
  animation: none !important;
}

.hero.is-transformed .cube-scene {
  cursor: default;
}

/* The split object's rotation is handled by the single is-split transition
   rule further down (keeps the camera-angle logic in one place). */

/* Hide the old automatic cube sway while the transition is active. */
.hero.is-transforming .cube,
.hero.is-transformed .cube {
  animation-play-state: paused !important;
}

@media (max-width: 1024px) {
  .layer-top-cube {
    top: 20%;
  }
}

@media (max-width: 768px) {
  .layer-top-cube {
    top: 17%;
  }
}

/* Final alignment: the stack is viewed from a clean 45° side angle while
   retaining enough downward tilt to keep every top surface visible.
   (Rotation itself is applied by the single is-split rule further down.) */

/* The split stack must remain completely still after the transition. */
.hero.is-transformed .cube-float,
.hero.is-transforming .cube-float {
  animation: none !important;
  transform: translateY(0) !important;
}

/* The core light belongs to the moving cube-wrapper, so it stays directly
   beneath the center of the seven-layer stack. */
.hero.is-split .layer-core-light {
  transform: translate(-50%, -50%) translateZ(0);
}


/* ══════════════════════════════════════════════════════════════════════
   FINAL VISUAL FIXES
   ══════════════════════════════════════════════════════════════════════ */

/* Hover must never dim, brighten, hide, or otherwise alter a layer. */
.cube-slice,
.cube-slice:hover,
.cube-slice:focus,
.cube-slice:active {
  opacity: 1 !important;
  filter: none !important;
}

/* Camera angle: the cube starts each transform at the SAME neutral pose
   the plain cube settles into before the handoff (rotateX(-20) rotateY(0)
   — see .split-cube base rule and freezeAndSettleCube() in script.js), so
   there's no visible jump at the swap. It only eases to the isometric
   layer-stack angle once the layers actually start forming (.is-split). */
.hero.is-split .split-cube {
  transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg);
  transition: transform 1.85s var(--ease-out-spring);
}

/* The inactive material is neutral glass. Red is introduced only through
   directional light/reflection rather than a red fill on every face. */
.cube-slice:not(.active) .slice-front,
.cube-slice:not(.active) .slice-left,
.cube-slice:not(.active) .slice-right {
  background:
    linear-gradient(145deg,
      rgba(220, 230, 238, .13) 0%,
      rgba(85, 95, 105, .09) 48%,
      rgba(190, 200, 210, .07) 100%);
  border-color: rgba(220, 228, 235, .48);
  border-top-color: rgba(255, 255, 255, .72);
  border-left-color: rgba(255, 255, 255, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 18px rgba(255, 255, 255, .035),
    0 0 9px rgba(255, 255, 255, .025);
}

/* Very subtle red reflection on the lit/front/side surfaces only. */
.cube-slice:not(.active) .slice-front::after,
.cube-slice:not(.active) .slice-left::after,
.cube-slice:not(.active) .slice-right::after {
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(232, 25, 44, .13) 0%,
      rgba(232, 25, 44, .045) 28%,
      transparent 68%);
  filter: blur(13px);
}

.cube-slice:not(.active) .slice-front::before,
.cube-slice:not(.active) .slice-left::before,
.cube-slice:not(.active) .slice-right::before {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .24) 0%,
      rgba(255, 255, 255, .045) 25%,
      transparent 55%,
      rgba(255, 35, 45, .035) 100%);
}

/* Back face stays neutral: no red wash/reflection. */
.cube-slice:not(.active) .slice-back,
.cube-slice:not(.active) .slice-top,
.cube-slice:not(.active) .slice-bottom {
  background:
    linear-gradient(145deg,
      rgba(210, 220, 230, .09) 0%,
      rgba(45, 52, 60, .07) 55%,
      rgba(175, 185, 195, .06) 100%);
  border-color: rgba(205, 215, 225, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 16px rgba(255, 255, 255, .025);
}

/* Selected layer: red light is concentrated on the visible front and side
   walls. Its hidden/back face remains neutral instead of becoming a red box. */
.cube-slice.active .slice-front,
.cube-slice.active .slice-left,
.cube-slice.active .slice-right {
  background:
    linear-gradient(145deg,
      rgba(92, 0, 10, .28) 0%,
      rgba(42, 8, 12, .20) 46%,
      rgba(105, 0, 12, .18) 100%);
  border-color: rgba(255, 65, 75, .86);
  border-top-color: rgba(255, 188, 188, .96);
  border-left-color: rgba(255, 145, 145, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 220, .18),
    inset 0 0 18px rgba(255, 35, 45, .20),
    0 0 14px rgba(255, 30, 40, .34),
    0 0 30px rgba(255, 0, 0, .10);
  /* Same "supplying power" cadence as the small cube above the stack —
     the selected layer visibly reads as the one currently energised. */
  animation: layerActiveGlow 2.4s ease-in-out infinite;
}

@keyframes layerActiveGlow {

  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 220, .18),
      inset 0 0 18px rgba(255, 35, 45, .20),
      0 0 14px rgba(255, 30, 40, .34),
      0 0 30px rgba(255, 0, 0, .10);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 235, 235, .30),
      inset 0 0 26px rgba(255, 60, 70, .38),
      0 0 26px rgba(255, 45, 55, .58),
      0 0 55px rgba(255, 10, 10, .24);
  }
}

.cube-slice.active .slice-front::after,
.cube-slice.active .slice-left::after,
.cube-slice.active .slice-right::after {
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(255, 35, 45, .20) 0%,
      rgba(255, 35, 45, .06) 30%,
      transparent 70%);
  filter: blur(12px);
}

.cube-slice.active .slice-back,
.cube-slice.active .slice-top,
.cube-slice.active .slice-bottom {
  background:
    linear-gradient(145deg,
      rgba(205, 215, 225, .09) 0%,
      rgba(42, 48, 56, .07) 55%,
      rgba(175, 185, 195, .055) 100%);
  border-color: rgba(205, 215, 225, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 16px rgba(255, 255, 255, .02);
}

/* Ensure the red reflection never leaks through the back-face pseudo layers. */
.cube-slice .slice-back::before,
.cube-slice .slice-back::after,
.cube-slice .slice-top::before,
.cube-slice .slice-top::after,
.cube-slice .slice-bottom::before,
.cube-slice .slice-bottom::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Central rod going through layers ── */
.center-rod {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 10;
}

.center-rod-panel {
  position: absolute;
  left: -7px;
  top: -220px;
  width: 10px;
  padding: 2px;
  height: 420px;
  background: linear-gradient(to bottom,
      rgba(255, 32, 48, 0) 0%,
      rgba(255, 32, 48, 0.3) 1%,
      rgba(255, 32, 48, 0.3) 100%,
      rgba(255, 32, 48, 0) 100%);
  border: 1px solid rgba(255, 32, 48, 0.9);
  box-shadow:
    0 0 15px rgba(255, 32, 48, 0.6),
    0 0 30px rgba(255, 32, 48, 0.3);
  border-radius: 7px;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 1.2s var(--ease-smooth), transform 1.85s var(--ease-out-spring);
}

/* Seed: collapsed flat at the centre point — grows up AND down at once
   as soon as the layers start forming. */
.center-rod-p1 {
  transform: rotateY(0deg) scaleY(0);
}

.center-rod-p2 {
  transform: rotateY(90deg) scaleY(0);
}

.hero.is-split .center-rod-panel {
  opacity: 1;
}

.hero.is-split .center-rod-p1 {
  transform: rotateY(0deg) scaleY(1);
}

.hero.is-split .center-rod-p2 {
  transform: rotateY(90deg) scaleY(1);
}

/* 3D Central Circular Hole on every layer.
   Hidden while assembled/crossfading — it only appears once the layers
   actually start separating, so the handoff shows a clean solid block
   rather than a stack that's already visibly perforated. */
.slice-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  background: #0a0c10;
  transform: translate(-50%, -50%) translateZ(1px);
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.95),
    inset 0 0 10px rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s var(--ease-smooth);
}

.split-cube.is-deploying .slice-ring,
.split-cube.is-fixed .slice-ring,
.split-cube.is-collapsing .slice-ring {
  opacity: 1;
}

.slice-ring::before {
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ff1a2d;
  background: #050609;
  box-shadow:
    0 0 12px rgba(255, 26, 45, 0.75),
    inset 0 0 10px rgba(255, 26, 45, 0.85);
}

.cube-slice.active .slice-ring::before {
  border-color: #ff3b4a;
  box-shadow:
    0 0 20px rgba(255, 40, 60, 0.95),
    inset 0 0 14px rgba(255, 30, 50, 0.95);
  animation: layerRingGlow 2.4s ease-in-out infinite;
}

@keyframes layerRingGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 40, 60, .95), inset 0 0 14px rgba(255, 30, 50, .95);
  }

  50% {
    box-shadow: 0 0 34px rgba(255, 75, 95, 1), inset 0 0 22px rgba(255, 65, 85, 1);
  }
}

.slice-ring::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff3b4a 0%, #aa0010 100%);
  box-shadow: 0 0 12px #ff2035;
}

/* ══════════════════════════════════════════════════════════════════════
   ENERGY FLOW — a minimal gradient light signal: CODE CUBE → CENTRAL ROD
   → SELECTED LAYER → radial ripple → fade → repeat. It lives inside the
   rod's own crossed planes (the same preserve-3d box the static
   .center-rod-panel already occupies), so it shares that exact depth and
   rotation instead of sitting on top as a flat overlay. Only one signal
   travels at a time; nothing is ever left glowing behind it.
   ══════════════════════════════════════════════════════════════════════ */

.energy-signal {
  position: absolute;
  left: -7px;
  top: -220px;
  width: 10px;
  height: 420px;
  pointer-events: none;
  overflow: visible;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.5s var(--ease-smooth);
}

.hero.is-split .energy-signal {
  opacity: 1;
}

.energy-signal.energy-p1 {
  transform: rotateY(0deg);
}

.energy-signal.energy-p2 {
  transform: rotateY(90deg);
}

/* Both layers travel together (JS animates their `transform` in lockstep):
   a soft, wider, blurred glow behind a thin, crisp gradient core. Neither
   is visible until the travel animation sets its opacity — there is no
   idle/static state, so nothing lingers between signals. */
.energy-signal-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 64px;
  margin-left: -8px;
  border-radius: 8px;
  opacity: 0;
  filter: blur(6px);
  background: linear-gradient(to bottom,
      rgba(255, 32, 48, 0) 0%,
      rgba(255, 32, 48, .22) 45%,
      rgba(255, 60, 70, .5) 78%,
      rgba(255, 110, 120, .6) 100%);
}

.energy-signal-core {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 64px;
  margin-left: -1.5px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(to bottom,
      rgba(255, 32, 48, 0) 0%,
      rgba(255, 32, 48, .18) 32%,
      rgba(255, 55, 65, .6) 62%,
      rgba(255, 120, 130, .9) 85%,
      #ffffff 100%);
}

.energy-signal-head {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffd9dc 40%, rgba(255, 50, 60, .9) 75%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .9), 0 0 14px 4px rgba(255, 40, 55, .75);
}

/* Code cube (energy source): a continuous, subtle "supplying power" glow —
   never a dramatic repeating flash. */
.hero.is-split .layer-top-cube .mini-face {
  animation: codeCubeSupply 2.4s ease-in-out infinite;
}

@keyframes codeCubeSupply {

  0%,
  100% {
    box-shadow: inset 0 0 10px rgba(255, 40, 55, .72), 0 0 15px rgba(255, 35, 45, .62), 0 0 30px rgba(255, 20, 30, .28);
  }

  50% {
    box-shadow: inset 0 0 16px rgba(255, 100, 110, .9), 0 0 28px rgba(255, 45, 55, .8), 0 0 48px rgba(255, 20, 30, .4);
  }
}

/* Per-layer ripple anchor, reusing the same ring the rod already passes
   through. Inert by default — it only plays a single, short radial-spread
   animation at the moment the travelling signal arrives; it never idles
   in a "selected" state on its own. */
.energy-fx {
  position: absolute;
  inset: -22px;
  pointer-events: none;
  z-index: 12;
}

.energy-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 70, 80, .9);
  box-shadow: 0 0 10px rgba(255, 40, 55, .6);
  opacity: 0;
}

@media (max-width: 768px) {
  .energy-signal {
    width: 8px;
    left: -6px;
  }

  .energy-signal-glow {
    width: 11px;
    height: 46px;
    margin-left: -5.5px;
  }

  .energy-signal-core {
    height: 46px;
  }

  .energy-fx {
    inset: -14px;
  }

  .energy-ripple {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-split .layer-top-cube .mini-face {
    animation: none !important;
  }

  .cube-slice.active .slice-front,
  .cube-slice.active .slice-left,
  .cube-slice.active .slice-right,
  .cube-slice.active .slice-ring::before {
    animation: none !important;
  }
}

/* Sidebar Tab navigation and Card Grid */
.sidebar-tabs-container {
  margin-top: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 2px;
}

.sidebar-tabs {
  display: flex;
  gap: 24px;
}

.tab-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s var(--ease-smooth);
}

.tab-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tab-btn.active {
  color: var(--red);
  font-weight: 600;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
  padding-top: 8px;
  width: 100%;
  max-height: 270px;
  overflow: auto;
}

.info-card {
  position: relative;
  border-radius: 8px;
  min-height: 125px;
  perspective: 1200px;
  transition: transform 0.3s var(--ease-smooth);
  animation: card-in 0.4s var(--ease-smooth) backwards;
}

.info-card:nth-child(2) {
  animation-delay: 0.04s;
}

.info-card:nth-child(3) {
  animation-delay: 0.08s;
}

.info-card:nth-child(4) {
  animation-delay: 0.12s;
}

.info-card:nth-child(5) {
  animation-delay: 0.16s;
}

.info-card:nth-child(6) {
  animation-delay: 0.2s;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-card:hover {
  transform: translateY(-3px);
}

/* Flip mechanics: the inner wrapper rotates 180deg on hover, the two faces
   are stacked exactly on top of each other and each hides its own backside
   (backface-visibility) so the front (icon/circuit) never bleeds through
   while the red back face is showing, and vice versa. */
.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 125px;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-smooth);
  will-change: transform;
}

.info-card:hover .card-flip-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 12px;
}

.card-face-front {
  background: rgba(10, 11, 15, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.info-card:hover .card-face-front {
  border-color: rgba(232, 25, 44, 0.3);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(232, 25, 44, 0.1);
}

/* Back face: same glowing neon-red obsidian glass treatment used by the
   template's active cube layer — deep red-black gradient, bright edge
   highlight, red glow — rather than a flat/bright red. Text content only. */
.card-face-back {
  background:
    linear-gradient(135deg,
      rgb(90, 8, 13) 0%,
      /* rgb(28, 4, 7) 45%, */
      rgba(110, 10, 18, 0.97) 100%);
  border: 0.5px solid #ff818b;
  /* border-top: 2px solid #ff7b88;
  border-left: 2px solid #ff7b88; */
  box-shadow:
    inset 0 0 25px rgba(255, 26, 45, 0.35),
    inset 0 1px 0 rgba(255, 220, 220, 0.25),
    0 0 22px rgba(255, 26, 45, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.5);
  transform: rotateY(180deg);
}

.card-back-text {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  word-wrap: break-word;
}

.card-icon-container {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hex-poly {
  fill: rgba(232, 25, 44, 0.05);
  stroke: var(--red);
  stroke-width: 2;
  transition: fill 0.3s var(--ease-smooth), stroke 0.3s var(--ease-smooth);
}

.info-card:hover .hex-poly {
  fill: rgba(232, 25, 44, 0.15);
  stroke: #ff3b4a;
  filter: drop-shadow(0 0 4px rgba(232, 25, 44, 0.6));
}

.hex-icon-group {
  color: rgba(255, 255, 255, 0.95);
  transition: color 0.3s var(--ease-smooth);
}

.info-card:hover .hex-icon-group {
  color: #fff;
}

.card-title {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  word-wrap: break-word;
}

.layer-navigator {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.82rem;
}

.layer-nav-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth);
  padding: 6px 0;
}

.layer-nav-btn:hover:not(:disabled) {
  color: var(--red);
}

.layer-nav-btn:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}

.nav-arrow {
  font-size: 1rem;
  line-height: 1;
}

.nav-divider {
  color: rgba(255, 255, 255, 0.15);
  font-weight: 300;
  user-select: none;
}

.hero-right {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 45px;
  border-left: 1px solid rgba(232, 25, 44, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
  min-width: 380px;
}

/* Tag badge on the right notched edge of each slice — kept flush with the
   slice's right edge so the stack of tags reads as one column lined up
   with the info panel on the right side of the layout. */
.slice-label {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 30;
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  padding: 5px 9px;
  background: rgba(246, 245, 245, 0.153);
  border: none;
  border-color: rgba(255, 70, 80, 0.58);
  box-shadow: 0 0 10px rgba(255, 30, 40, 0.18);
  text-shadow: 0 0 8px rgba(255, 50, 60, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(-50%) translateZ(calc(var(--cube-sz) / 2 + 3px));
  transition:
    opacity 0.6s var(--ease-smooth) 0.15s,
    color 0.35s var(--ease-smooth),
    font-size 0.35s var(--ease-smooth),
    background 0.35s var(--ease-smooth),
    border-color 0.35s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth),
    text-shadow 0.35s var(--ease-smooth);
}

.hero.is-transformed .slice-label {
  opacity: 1;
}

.cube-slice.active .slice-label {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  background: rgba(150, 0, 12, 0.36);
  border-color: rgba(255, 70, 80, 0.58);
  box-shadow: 0 0 10px rgba(255, 30, 40, 0.18);
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.9);
}

.layer-nav-btn#btnNextLayer:not(:disabled) {
  color: var(--red);
  font-weight: 600;
}

/* =========================================================
   3D SPLIT CUBE - ORTHOGRAPHIC PARALLEL PERSPECTIVE
   ========================================================= */

.hero.is-transformed .cube-wrapper {
  perspective: 4000px !important;
}

/* (Split-cube rotation handled by the single .is-split rule above.) */

/* ══════════════════════════════════════════════════════════════════════
   TWO-COLUMN PAGE LAYOUT (split/transformed state)
   Once split, .hero-left (the marketing intro) and .cube-scene share the
   same grid cell instead of .hero-left keeping its own 1.15fr track while
   invisible — that leftover track was the "dead space" in the middle of
   the page. .cube-scene becomes a real left column and .hero-right a real
   right column, so the stack centers naturally inside its own column via
   its existing top:48%/left:50% rule. This replaces every earlier
   translate(-50% - Nvw) viewport-relative hack for the cube-wrapper.
   ══════════════════════════════════════════════════════════════════════ */

.hero.is-transformed,
.hero.is-transforming {
  grid-template-columns: minmax(420px, 0.9fr) minmax(480px, 1.1fr);
}

.hero.is-transformed .hero-left,
.hero.is-transforming .hero-left,
.hero.is-transformed .cube-scene,
.hero.is-transforming .cube-scene {
  grid-column: 1;
  grid-row: 1;
}

.hero.is-transformed .hero-right,
.hero.is-transforming .hero-right {
  grid-column: 2;
  grid-row: 1;
}

.hero.is-transforming .cube-wrapper,
.hero.is-transformed .cube-wrapper,
.hero.is-transforming .cube-wrapper:hover,
.hero.is-transformed .cube-wrapper:hover {
  transform: translate(-50%, -52%) rotate(0deg);
  transition: transform 2s var(--ease-smooth);
  transition-delay: 0.09s;
}

.right-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 90, 100, 0.85);
  margin-bottom: 10px;
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}

.right-eyebrow.is-swapping,
.btn-start-now.is-swapping {
  opacity: 0;
  transform: translateY(12px);
}

@media (max-width: 1024px) {

  .hero.is-transforming .cube-wrapper,
  .hero.is-transformed .cube-wrapper,
  .hero.is-transforming .cube-wrapper:hover,
  .hero.is-transformed .cube-wrapper:hover {
    transform: translate(-50%, -52%) rotate(0deg) scale(0.88);
  }
}

@media (max-width: 768px) {

  .hero.is-transformed,
  .hero.is-transforming {
    grid-template-columns: 1fr;
  }

  .hero.is-transformed .hero-right,
  .hero.is-transforming .hero-right {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 24px 24px 56px;
    border-left: none;
    border-top: 1px solid rgba(232, 25, 44, 0.25);
    min-width: 0;
    width: 100%;
  }

  .hero.is-transformed .cube-scene,
  .hero.is-transforming .cube-scene {
    grid-row: 1;
  }

  .hero.is-transforming .cube-wrapper,
  .hero.is-transformed .cube-wrapper,
  .hero.is-transforming .cube-wrapper:hover,
  .hero.is-transformed .cube-wrapper:hover {
    transform: translate(-50%, -52%) rotate(0deg) scale(0.72);
  }

  .right-content {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   INITIAL-STATE CUBE HOVER PREVIEW
   Shown only while the un-split hero cube is hovered — mirrors the small
   "Build" summary that later becomes the full right-column content once
   the cube is split. Purely decorative (aria-hidden); never shown once
   the stack has been split.
   ══════════════════════════════════════════════════════════════════════ */

.cube-hover-preview {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 230px;
  width: 240px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-smooth), visibility 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}


.cube-hover-preview::before {
  content: '';
  position: absolute;
  right: 0%;
  top: 0;
  width: 540px;
  height: 100%;
  pointer-events: auto;
}

.cube-wrapper:hover .cube-hover-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.hero.is-transformed .cube-hover-preview,
.hero.is-transforming .cube-hover-preview {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hover-preview-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
}

.hover-preview-dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red);
}

.hover-preview-text {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

.hover-preview-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
}

@media (max-width: 1024px) {
  .cube-hover-preview {
    display: none;
  }
}



/* ════════════════════════════════════════════
   KEY RISKS — CHIPSET COMET CIRCUIT
   Thin as the hexagon border. Always live: every
   card cycles its own signal pulses on a loop
   (driven by GSAP in script.js, CSS keyframe
   fallback below), not gated behind hover.
   ════════════════════════════════════════════ */

.info-card.circuit-card {
  position: relative;
}

.info-card.circuit-card .circuit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.info-card.circuit-card .circuit-trace,
.info-card.circuit-card .circuit-flow {
  fill: none;
  stroke: rgba(255, 82, 82, 1);
  /* Set per-card by layoutRiskCircuit() in script.js to the hexagon's own
     rendered border thickness, so the traces are exactly as thick as it. */
  stroke-width: var(--circuit-stroke-width, 1.15px);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/* Same physical thickness as the hexagon border. Always faintly visible —
   the circuit is a living part of the card, not a hover reveal — and
   brightens briefly while its signal (.circuit-flow) is pulsing through it. */
.info-card.circuit-card .circuit-trace {
  opacity: 0.14;
  transition: opacity 2420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.info-card.circuit-card .circuit-trace.is-active,
.info-card.circuit-card:hover .circuit-trace {
  opacity: 0.62;
}

/* The signal is a comet, not a dot: several progressively shorter dashes form its tail. */
.info-card.circuit-card .circuit-flow {
  opacity: 0;
  stroke-linecap: butt;
  stroke-dashoffset: 0;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  pointer-events: none;
}

.info-card.circuit-card .circuit-flow-tail {
  stroke: rgba(255, 65, 65, 0.34);
  stroke-dasharray: 3 6 7 7 13 180;
}

.info-card.circuit-card .circuit-flow-mid {
  stroke: rgba(255, 74, 74, 0.58);
  stroke-dasharray: 5 8 11 160;
}

.info-card.circuit-card .circuit-flow-core {
  stroke: rgba(255, 122, 122, 0.96);
  stroke-dasharray: 14 190;
}

.info-card.circuit-card .circuit-flow.is-flowing {
  animation-name: riskChipsetSignal;
  animation-duration: var(--flow-duration, 1.25s);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes riskChipsetSignal {
  0% {
    stroke-dashoffset: 145;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  55% {
    opacity: 0.92;
  }

  82% {
    opacity: 0.42;
  }

  100% {
    stroke-dashoffset: -90;
    opacity: 0;
  }
}

.info-card.circuit-card .card-icon-container,
.info-card.circuit-card .card-title {
  position: relative;
  z-index: 2;
}

.info-card.circuit-card:hover {
  z-index: 5;
}

@media (max-width: 768px) {
  .info-card.circuit-card .circuit-svg {
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-card.circuit-card .circuit-trace {
    opacity: 0.14;
    transition: none;
  }

  .info-card.circuit-card .circuit-trace.is-active,
  .info-card.circuit-card:hover .circuit-trace {
    opacity: 0.14;
  }

  .info-card.circuit-card .circuit-flow.is-flowing {
    animation: none;
    opacity: 0;
  }

  .card-flip-inner {
    transition: none;
  }
}

/* ════════════════════════════════════════════
   HOME PAGE — lock the hero to one viewport, no page scrollbar
   ════════════════════════════════════════════ */
body.home-page {
  overflow: hidden;
}

@media (max-width: 768px) {
  body.home-page {
    overflow-y: auto;
    padding-bottom: var(--footer-h);
  }
}

/* ════════════════════════════════════════════
   AI SECURITY — page-specific styles
   Built on the tokens in style.css (--red, --red-glow,
   --dark, Google Sans, --ease-smooth). This file only adds
   what's new for this page: the governance bar, the three
   capability panels, and the radial AI-in-SecOps hub.
   ════════════════════════════════════════════ */

:root {
  --panel-bg: rgba(14, 5, 7, 0.6);
  --panel-border: rgba(255, 255, 255, 0.07);
  --tile-bg: linear-gradient(155deg, rgba(232, 25, 44, 0.16) 0%, rgba(90, 8, 14, 0.22) 100%);
  --tile-border: rgba(255, 70, 80, 0.18);
}

.aisec-main {
  position: relative;
  padding: calc(var(--nav-h) + 56px) 24px 120px;
  max-width: 1360px;
  margin: 0 auto;
  overflow: hidden;
}

/* Ambient backdrop glow, quiet and slow — echoes the hero's atmosphere
   without competing with the content. */
.aisec-main::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 900px 500px at 18% 8%, rgba(232, 25, 44, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(232, 25, 44, 0.07), transparent 60%);
  pointer-events: none;
}

/* ── Intro header ── */
.aisec-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 64px;
}

.aisec-header-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  /* max-width: 420px; */
  /* flex: 1 1 420px; */
}

.aisec-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  width: max-content;
  transition: color 0.25s var(--ease-smooth), gap 0.25s var(--ease-smooth);
}

.aisec-back:hover {
  color: #fff;
  gap: 10px;
}

.aisec-h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.aisec-h1 .accent {
  color: var(--red-glow);
}

.aisec-sub {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* ── Header visual: a diagram of the framework itself (the four pillar
   sections orbiting a central AI core), not a stock photo — echoes the
   dark/obsidian-red glass treatment used by the cube and info-cards. ── */
.aisec-hero-visual {
  flex: 1 1 380px;
  width: 100%;
  max-width: 750px;
  min-width: 0;
}

.aisec-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.aisec-visual-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: aisecVisualFloat 7s var(--ease-smooth) infinite;
}

@keyframes aisecVisualFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.aisec-visual-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.aisec-visual-ring-inner {
  stroke: rgba(232, 25, 44, 0.18);
  stroke-dasharray: 1 5;
}

.aisec-spokes line {
  stroke: rgba(255, 70, 80, 0.25);
  stroke-width: 1.25;
  stroke-dasharray: 3 5;
}

.aisec-core-poly {
  fill: url(#aisecNodeFill);
  stroke: var(--red-glow);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(255, 32, 53, 0.55));
}

.aisec-core-label {
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.02em;
}

.aisec-node-poly {
  fill: url(#aisecNodeFill);
  stroke: rgba(255, 90, 100, 0.55);
  stroke-width: 1.5;
  transition: stroke 0.3s var(--ease-smooth), filter 0.3s var(--ease-smooth);
}

.aisec-node:hover .aisec-node-poly {
  stroke: #ff7b88;
  filter: drop-shadow(0 0 8px rgba(255, 26, 45, 0.6));
}

.aisec-node-icon {
  stroke: rgba(255, 255, 255, 0.9);
}

.aisec-node-icon-dot {
  fill: rgba(255, 255, 255, 0.9);
}

.aisec-node-label {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  fill: rgba(255, 255, 255, 0.75);
  text-anchor: middle;
}

@media (max-width: 860px) {
  .aisec-header {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 32px;
  }

  .aisec-hero-visual {
    order: -1;
    width: min(420px, 100%);
    max-width: 100%;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aisec-visual-svg {
    animation: none;
  }
}

/* ── Reveal-on-scroll (shared by every major block) ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════ GOVERNANCE BAR ══════════════ */
.gov-panel {
  position: relative;
  background: var(--panel-bg);
  /* border: 1px solid var(--panel-border); */
  border-radius: 20px;
  padding: 32px clamp(20px, 4vw, 44px) 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.gov-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  /* background: linear-gradient(120deg, rgba(255,70,80,0.5), rgba(255,70,80,0) 40%, rgba(255,70,80,0) 60%, rgba(255,70,80,0.35)); */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.gov-head {
  text-align: center;
  margin-bottom: 24px;
}

.gov-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
}

.gov-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gov-desc {
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
  margin-top: 4px;
}

.gov-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Flip mechanics — same recipe as the home page's "key risks" cards
   (.info-card / .card-flip-inner / .card-face): a perspective wrapper,
   an inner face that rotates 180deg on hover, and two faces stacked
   exactly on top of each other, each hiding its own backside so the
   front (icon + title) never bleeds through the back (description). */
.gov-pill {
  position: relative;
  min-height: 220px;
  perspective: 1200px;
  transition: transform 0.3s var(--ease-smooth);
}

.gov-pill:hover {
  transform: translateY(-4px);
}

.gov-pill-flip {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-smooth);
  will-change: transform;
}

.gov-pill:hover .gov-pill-flip {
  transform: rotateY(180deg);
}

.gov-pill-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px 30px;
}

.gov-pill-face-front {
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.gov-pill:hover .gov-pill-face-front {
  border-color: #ff5a68;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(232, 25, 44, 0.22);
}

/* Back face: same glowing neon-red obsidian glass treatment used by the
   home page's card back and the hero cube's active layer. */
.gov-pill-face-back {
  background: linear-gradient(135deg, rgb(90, 8, 13) 0%, rgba(110, 10, 18, 0.97) 100%);
  border: 0.5px solid #ff818b;
  box-shadow:
    inset 0 0 25px rgba(255, 26, 45, 0.35),
    inset 0 1px 0 rgba(255, 220, 220, 0.25),
    0 0 22px rgba(255, 26, 45, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.5);
  transform: rotateY(180deg);
}

.gov-pill-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

.gov-pill-back-text {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.55;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
  .gov-pills {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ══════════════ CONNECTOR ══════════════ */
.aisec-connector {
  width: 100%;
  height: 90px;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

.aisec-connector path {
  fill: none;
  stroke: rgb(90, 5, 5);
  stroke-width: 1.5;
}

.aisec-connector .connector-glow {
  stroke: rgba(255, 70, 80, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 6 260;
  animation: connectorFlow 3.4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 50, 60, 0.9));
}

@keyframes connectorFlow {
  to {
    stroke-dashoffset: -266;
  }
}

/* ══════════════ THREE-COLUMN ROW ══════════════ */
.aisec-columns {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}

.sec-panel {
  background: linear-gradient(rgb(32, 1, 8), rgba(50, 1, 1, 0.17));
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 26px 20px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  height: 100%;
}

.sec-head {
  text-align: center;
  margin-bottom: 20px;
}

.sec-title {
  font-size: 1.14rem;
  font-weight: 800;
}

.sec-desc {
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.76rem;
  margin-top: 4px;
  line-height: 1.4;
}

.sec-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sec-tile {
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  padding: 14px 10px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.sec-tile:hover {
  transform: translateY(-3px);
  border-color: #ff5a68;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(232, 25, 44, 0.24);
}

/* ── Center column: AI in SecOps hub ── */
.secops-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secops-orbit-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 28px auto 0;
}

.orbit-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.orbit-lines line {
  stroke: rgba(255, 70, 80, 0.28);
  stroke-width: 1;
}

.orbit-lines .pulse {
  stroke: rgba(255, 120, 130, 0.9);
  stroke-width: 1.6;
  stroke-dasharray: 5 220;
  filter: drop-shadow(0 0 3px rgba(255, 60, 70, 0.9));
  animation: orbitPulse 2.6s linear infinite;
}

@keyframes orbitPulse {
  to {
    stroke-dashoffset: -225;
  }
}

.ai-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(circle at 50% 50%, #7a0d16 0%, #3d060c 60%, #1c0206 100%);
  box-shadow:
    0 0 0 1px rgba(255, 90, 100, 0.35),
    0 0 30px rgba(232, 25, 44, 0.35),
    0 0 70px rgba(232, 25, 44, 0.15),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  animation: hubGlow 2.6s ease-in-out infinite;
  z-index: 3;
}

/* Faint internal circuitry texture, clipped to the circle by .ai-hub's
   own overflow:hidden — reads as "there's something intricate in there"
   without competing with the label. */
.ai-hub-mesh {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px);
  background-size: 12px 12px, 12px 12px, 12px 12px;
  animation: hubMeshDrift 18s linear infinite;
}
@keyframes hubMeshDrift {
  to { transform: rotate(360deg); }
}

/* Glassy highlight, top-left, like light catching a polished sphere. */
.ai-hub-sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.22), transparent 52%);
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes hubGlow {

  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 90, 100, 0.35),
      0 0 30px rgba(232, 25, 44, 0.32),
      0 0 70px rgba(232, 25, 44, 0.14),
      inset 0 0 30px rgba(0, 0, 0, 0.5);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(255, 120, 130, 0.55),
      0 0 48px rgba(232, 25, 44, 0.55),
      0 0 90px rgba(232, 25, 44, 0.22),
      inset 0 0 30px rgba(0, 0, 0, 0.5);
  }
}

.ai-hub-label {
  position: relative;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff8f4 0%, #ffb199 55%, #ff4550 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255, 100, 90, 0.65);
}

/* Radar-style sweeping ring around the hub — a bright arc rotating
   continuously, reading as "actively processing" rather than decorative. */
.ai-hub-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.ai-hub-ring-outer {
  width: 42%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255,70,80,0) 0deg,
    rgba(255,70,80,0) 290deg,
    rgba(255,140,145,0.9) 335deg,
    rgba(255,70,80,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 5px rgba(255,70,80,0.8));
  animation: hubRingSpin 5s linear infinite;
}
.ai-hub-ring-inner {
  width: 35%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
@keyframes hubRingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hub-mesh, .ai-hub-ring-outer {
    animation: none !important;
  }
}

.orbit-item {
  position: absolute;
  width: 132px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 2px;
}

.secops-cycle {
  margin-top: 18px;
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.45);
  animation: cycleSpin 6s linear infinite;
}

@keyframes cycleSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Mobile fallback for the orbit: becomes a simple wrapped list ── */
.secops-col.is-compact .secops-orbit-wrap {
  aspect-ratio: auto;
  max-width: 100%;
}

.secops-col.is-compact .orbit-lines {
  display: none;
}

.secops-col.is-compact .ai-hub-ring {
  display: none;
}

.secops-col.is-compact .ai-hub {
  position: static;
  transform: none;
  width: 96px;
  margin: 0 auto 22px;
}

.secops-col.is-compact .orbit-item {
  position: static;
  transform: none;
  width: auto;
  display: inline-block;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 4px;
}

.secops-col.is-compact .orbit-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* The richer icon+title+sub orbit card needs its flex column restored —
   the generic rule above turns every .orbit-item into inline-block. */
.secops-col.is-compact .orbit-item-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.secops-col.is-compact .orbit-item-card:hover {
  transform: translateY(-3px);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1080px) {
  .aisec-columns {
    grid-template-columns: 1fr;
  }

  .aisec-connector {
    display: none;
  }

  .sec-panel {
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .sec-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gov-panel {
    padding: 26px 16px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ai-hub,
  .secops-cycle,
  .aisec-connector .connector-glow,
  .orbit-lines .pulse {
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gov-pill-flip {
    transition: none;
  }
}

/* ════════════════════════════════════════════
   HELPAG.AI – Ecosystem Partners Stylesheet
   Built on style.css design tokens (--red, --red-glow, --dark, --ease-smooth)
   ════════════════════════════════════════════ */

.partners-page {
  position: relative;
  min-height: 100vh;
  background: var(--dark);
  color: #fff;
  overflow-x: hidden;
}

/* ── Ambient Background Atmospheric Glows ── */
.partners-bg-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(232, 25, 44, 0.12) 0%, rgba(232, 25, 44, 0.04) 45%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}

.partners-main {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-h) + 64px) 24px 120px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Header Copy & Titles ── */
.ecosystem-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ecosystem-eyebrow {
  margin-bottom: 16px;
}

.ecosystem-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 16px;
}

.ecosystem-title .accent-red {
  color: var(--red-glow);
  background: linear-gradient(135deg, #ffffff 30%, var(--red-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ecosystem-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  max-width: 580px;
  font-weight: 400;
}

/* ── Ecosystem Grid Section Container ── */
.grid-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Ambient Circuit Lines SVG behind grid */
.network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.pulse-path {
  animation: pulseFlow 4s linear infinite;
}

@keyframes pulseFlow {
  to {
    stroke-dashoffset: -240;
  }
}

/* ── Glass Grid Box Structure ── */
.partner-grid-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(8, 10, 14, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 
    0 30px 90px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 50px rgba(232, 25, 44, 0.06);
  overflow: hidden;
}

/* Faint inner highlight border */
.partner-grid-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%, rgba(232, 25, 44, 0.2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) fill-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

/* ── Individual Partner Cell ── */
.partner-cell {
  position: relative;
  min-height: 146px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}

/* Remove right border on 5th column items for desktop */
@media (min-width: 1025px) {
  .partner-cell:nth-child(5n) {
    border-right: none;
  }
}

/* Dynamic Radial Glow inside Cell */
.cell-glow-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(232, 25, 44, 0.18) 0%,
    rgba(232, 25, 44, 0.04) 45%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
  pointer-events: none;
}

/* Subtle mouse shine overlay */
.cell-shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 100px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.07) 0%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  pointer-events: none;
}

/* Proximity glow for neighboring cells */
.partner-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(232, 25, 44, 0.1) 0%,
    transparent 80%
  );
  opacity: var(--prox-opacity, 0);
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

.cell-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.4s var(--ease-smooth);
}

/* Partner Logo SVG Mark */
.partner-mark {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth), filter 0.4s var(--ease-smooth);
}

.partner-mark svg {
  width: 100%;
  height: 100%;
}

/* Partner Name */
.partner-name {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 12px;
  transition: color 0.4s var(--ease-smooth), letter-spacing 0.4s var(--ease-smooth);
}

/* Partner Category Sub-label */
.partner-category {
  font-size: 0.62rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
  opacity: 0.85;
  transition: color 0.4s var(--ease-smooth), opacity 0.4s var(--ease-smooth);
}

/* Border Edge Red Light Highlight on Hover */
.cell-border-highlight {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  transition: border-color 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}

/* ── HOVER INTERACTIONS ── */
.partner-cell:hover {
  border-color: rgba(255, 50, 65, 0.25);
}

.partner-cell:hover .cell-glow-bg,
.partner-cell:hover .cell-shine {
  opacity: 1;
}

.partner-cell:hover .cell-content {
  transform: scale(1.04) translateY(-2px);
}

.partner-cell:hover .partner-mark {
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(255, 42, 59, 0.65));
}

.partner-cell:hover .partner-name {
  color: #ffffff;
  letter-spacing: 0.16em;
}

.partner-cell:hover .partner-category {
  color: rgba(255, 180, 190, 0.85);
  opacity: 1;
}

.partner-cell:hover .cell-border-highlight {
  border-color: rgba(232, 25, 44, 0.4);
  box-shadow: inset 0 0 16px rgba(232, 25, 44, 0.15);
}

/* ── Ecosystem Footer CTA Bar ── */
.ecosystem-cta-section {
  margin-top: 80px;
  text-align: center;
  padding: 48px 32px;
  background: rgba(12, 14, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.ecosystem-cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

.cta-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.cta-subtext {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* ── REVEAL STAGGER ANIMATIONS ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-smooth) var(--stagger-delay, 0ms),
              transform 0.6s var(--ease-smooth) var(--stagger-delay, 0ms);
}

.reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE DESIGN ── */

/* Tablet Breakpoint (3 Columns) */
@media (max-width: 1024px) {
  .partner-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .partner-cell:nth-child(5n) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .partner-cell:nth-child(3n) {
    border-right: none;
  }
  .partner-cell {
    min-height: 136px;
    padding: 20px 12px;
  }
}

/* Mobile Breakpoint (2 Columns) */
@media (max-width: 640px) {
  .partners-main {
    padding: calc(var(--nav-h) + 40px) 16px 80px;
  }
  .ecosystem-header {
    margin-bottom: 36px;
  }
  .partner-grid-container {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 12px;
  }
  .partner-cell:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .partner-cell:nth-child(2n) {
    border-right: none;
  }
  .partner-cell {
    min-height: 120px;
    padding: 16px 8px;
  }
  .partner-mark {
    width: 28px;
    height: 28px;
  }
  .partner-name {
    font-size: 0.7rem;
    margin-top: 8px;
  }
  .partner-category {
    font-size: 0.58rem;
  }
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-item,
  .partner-cell,
  .pulse-path {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════
   SECURITY FOR AI — 4-tab interface
   Built entirely on the existing tokens (--red, --red-glow,
   --dark, --tile-bg, --tile-border, --panel-bg, --panel-border,
   --ease-smooth) and the .gov-panel / .sec-tile / .ai-hub /
   .orbit-item / .aisec-connector components already defined
   above. No new palette, no new card shape.
   ════════════════════════════════════════════ */

@keyframes aisecFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Tabs ── */
.aisec-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.aisec-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.aisec-tab-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.aisec-tab:hover {
  color: #fff;
  border-color: rgba(255, 70, 80, 0.4);
}

.aisec-tab.active {
  color: var(--red-glow);
  border-color: var(--red);
  background: rgba(232, 25, 44, 0.08);
  box-shadow: 0 0 18px rgba(232, 25, 44, 0.2);
}

/* ── Panels ── */
.aisec-tab-panels {
  position: relative;
}

.aisec-tab-panel:not([hidden]) {
  animation: aisecFadeIn 0.5s var(--ease-smooth);
}

.aisec-panel-head {
  text-align: left;
  margin-bottom: 32px;
}

.aisec-panel-head-center {
  text-align: center;
}

.aisec-panel-h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.aisec-panel-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* ══════════════ TAB 1 — AI in SecOps ══════════════ */
.secops-view-default,
.secops-view-detail {
  width: 100%;
}

.secops-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secops-orbit-wrap {
  max-width: 620px;
}

/* Hub is now an interactive <button> — reset native button chrome while
   keeping every visual rule already defined on .ai-hub. */
.ai-hub-clickable {
  appearance: none;
  border: none;
  margin: 0;
  padding: 0 12%;
  font-family: inherit;
  cursor: pointer;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.ai-hub-label-secops {
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  line-height: 1.15;
}

.ai-hub-clickable:hover .ai-hub-sheen {
  opacity: 1.4;
}

.ai-hub-clickable:focus-visible {
  outline: 2px solid var(--red-glow);
  outline-offset: 4px;
}

.ai-hub-brain {
  position: relative;
  width: 26%;
  color: #ffd7d2;
  filter: drop-shadow(0 0 8px rgba(255, 100, 90, 0.6));
}

.ai-hub-brain svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.ai-hub-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

.ai-hub-brand-icon {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.ai-hub-label-sm {
  font-size: clamp(0.72rem, 1.6vw, 0.92rem);
  letter-spacing: 0.01em;
}

/* Richer orbit card: icon chip + title + small red subtitle,
   in place of the plain text used elsewhere. */
.orbit-item-card {
  width: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  padding: 12px 10px;
  transition: transform 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.orbit-item-card:hover {
  transform: translate(-50%, -50%) translateY(-3px);
  border-color: #ff5a68;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(232, 25, 44, 0.24);
}

.orbit-item-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, #7a0d16 0%, #3d060c 60%, #1c0206 100%);
  box-shadow: 0 0 0 1px rgba(255, 90, 100, 0.3), 0 0 10px rgba(232, 25, 44, 0.3);
}

.orbit-item-icon svg {
  width: 15px;
  height: 15px;
  stroke: #ffb199;
  fill: none;
  stroke-width: 1.7;
}

.orbit-item-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.orbit-item-sub {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 120, 128, 0.85);
}

/* ── Back control — matches the .btn-ghost style used on the home page ── */
.aisec-back.aisec-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  margin-bottom: 24px;
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.aisec-back.aisec-back:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Quad grid ── */
.quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.quad-card {
  position: relative;
  /* background: var(--tile-bg); */
  border: 1px solid var(--tile-border);
  border-radius: 14px;
  padding: 22px 24px 24px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.quad-card:hover {
  transform: translateY(-3px);
  /* border-color: #ff5a68; */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(232, 25, 44, 0.2);
}

.quad-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 120, 128, 0.5);
}

.quad-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 16px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, #7a0d16 0%, #3d060c 60%, #1c0206 100%);
  box-shadow: 0 0 0 1px rgba(255, 90, 100, 0.3), 0 0 16px rgba(232, 25, 44, 0.3);
}

.quad-icon svg {
  width: 22px;
  height: 22px;
  stroke: #ffb199;
  fill: none;
  stroke-width: 1.6;
}

.quad-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.quad-bullets {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}

.quad-bullets li {
  position: relative;
  padding-left: 13px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}

.quad-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  background: var(--red-glow);
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(255, 70, 80, 0.7);
}

/* ── Help AG SOC Engineering as a Service ──
   Ported from reference/AI FOR SECURITY/helpag-soc-engineering-as-a-
   service.png: five steps on a glowing connector, one open at a time —
   the open step widens into a statement + bullet list, the rest collapse
   to a slim number + title tile. Same accordion-reveal technique used
   elsewhere on this page (grid-template-rows 0fr → 1fr), restyled on
   the site's own tokens instead of the reference's stock photography. */
.soc-caas {
  border-top: 1px solid var(--panel-border);
  padding-top: 36px;
  text-align: center;
}

.soc-caas-head h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  margin-bottom: 10px;
}

.soc-caas-head p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  margin-bottom: 34px;
}

.soc-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0 auto 34px;
  text-align: left;
}

.soc-stepper-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 5px;
  height: 1px;
  background: rgba(255, 70, 80, 0.25);
  z-index: 0;
}

.soc-stepper-line-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 70, 80, 0.9), transparent);
  width: 22%;
  animation: socStepperFlow 4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 50, 60, 0.9));
}

@keyframes socStepperFlow {
  from { transform: translateX(-30%); }
  to { transform: translateX(480%); }
}

/* Same flip mechanics as the AI Governance cards / home page "key risks"
   cards: a perspective wrapper, an inner face that rotates 180deg on
   hover, two faces stacked exactly on top of each other each hiding its
   own backside. Front carries a reference background photo (tinted dark
   red/black to match the site, not shown raw); back reveals the data. */
.soc-step-card {
  position: relative;
  z-index: 1;
  min-height: 240px;
  perspective: 1200px;
}

.soc-step-flip {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-smooth);
  will-change: transform;
}

.soc-step-card:hover .soc-step-flip {
  transform: rotateY(180deg);
}

.soc-step-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
}

.soc-step-face-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--tile-border);
  transition: border-color 0.3s var(--ease-smooth);
}

.soc-step-card:hover .soc-step-face-front {
  border-color: #ff5a68;
}

/* The dark/red overlay is baked into the same background-image list as
   the photo (instead of a separate absolutely-positioned ::before) —
   one flat background layer, nothing else stacked on this 3D face, so
   there's no child stacking context for the backface-visibility culling
   to trip over. Text just sits on top of the element's own background,
   no z-index needed. */
.soc-step-bg-a {
  background-image:
    linear-gradient(180deg, rgba(5, 6, 8, 0.15) 0%, rgba(5, 6, 8, 0.88) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(232, 25, 44, 0.3), transparent 70%),
    url('images/soc-bg-network.jpg');
}

.soc-step-bg-b {
  background-image:
    linear-gradient(180deg, rgba(5, 6, 8, 0.15) 0%, rgba(5, 6, 8, 0.88) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(232, 25, 44, 0.3), transparent 70%),
    url('images/soc-bg-terrain.jpg');
}

.soc-step-num {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 140, 145, 0.9);
  margin-bottom: 4px;
}

.soc-step-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.soc-step-face-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 18px;
  background: linear-gradient(135deg, rgb(90, 8, 13) 0%, rgba(110, 10, 18, 0.97) 100%);
  border: 0.5px solid #ff818b;
  box-shadow:
    inset 0 0 25px rgba(255, 26, 45, 0.35),
    inset 0 1px 0 rgba(255, 220, 220, 0.25),
    0 0 22px rgba(255, 26, 45, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.5);
  transform: rotateY(180deg);
}

.soc-step-statement {
  margin-bottom: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.soc-step-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.soc-step-bullets li {
  position: relative;
  padding-left: 14px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.soc-step-bullets li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: -1px;
  color: #fff;
  font-weight: 800;
  font-size: 0.76rem;
}

.aisec-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Same button language as the home page: .btn-ghost for the secondary
   action, .btn-primary (solid red) for the one that matters most. */
.aisec-cta-ghost,
.aisec-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 4px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.aisec-cta-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.aisec-cta-ghost svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.aisec-cta-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

.aisec-cta-primary {
  background: var(--red);
  border: none;
  font-weight: 600;
  color: #fff;
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.aisec-cta-primary svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.aisec-cta-primary:hover {
  background: #c41225;
  box-shadow: 0 0 24px rgba(232, 25, 44, 0.5);
  transform: translateY(-1px);
}

/* ══════════════ TAB 2 — Defence Against AI Threats ══════════════
   A left-to-right hierarchical tree: root → 3 category branches →
   3 sub-topics each. Pure CSS Grid for layout (explicit rows/columns,
   no JS needed to position nodes) with an SVG overlay whose curves are
   computed from the actual rendered node positions — the same
   measure-then-draw technique already used for the orbit spokes and the
   governance-bar bracket connector elsewhere on this page. Minimal,
   editorial: thin static lines, no glow pulses, no icons. */
.threat-tree {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(200px, 230px) minmax(240px, 1fr);
  grid-template-rows: repeat(7, minmax(64px, auto));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 14px;
  padding: 8px 4px;
}

.threat-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.threat-tree-lines path {
  fill: none;
  stroke: rgba(255, 70, 80, 0.3);
  stroke-width: 1.3;
}

/* A soft point of light travels along each branch, root to node — same
   "pulse along a path" technique as the orbit spokes and the other
   connector lines on this page, using pathLength="1" on the JS-drawn
   paths so one dasharray/animation works uniformly regardless of how
   long any individual curve actually is. */
.threat-tree-lines .threat-tree-pulse {
  stroke: rgba(255, 150, 155, 0.95);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.05 1;
  filter: drop-shadow(0 0 3px rgba(255, 60, 70, 0.85));
  animation: threatTreePulse 3.2s linear infinite;
}

@keyframes threatTreePulse {
  from { stroke-dashoffset: 0.12; }
  to { stroke-dashoffset: -1; }
}

.threat-tree-node {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
}

/* Row/column placement — see the matching inline comments in the HTML
   for which node sits where; grid-row spans are what draw the branch
   structure, the SVG paths just trace lines between the rendered boxes. */
.threat-tree-r-all { grid-column: 1; grid-row: 1 / 8; }
.threat-tree-r-group1 { grid-column: 2; grid-row: 1 / 4; }
.threat-tree-r-group2 { grid-column: 2; grid-row: 4 / 6; }
.threat-tree-r-group3 { grid-column: 2; grid-row: 6 / 8; }
.threat-tree-r1 { grid-column: 3; grid-row: 1; }
.threat-tree-r2 { grid-column: 3; grid-row: 2; }
.threat-tree-r3 { grid-column: 3; grid-row: 3; }
.threat-tree-r4 { grid-column: 3; grid-row: 4; }
.threat-tree-r5 { grid-column: 3; grid-row: 5; }
.threat-tree-r6 { grid-column: 3; grid-row: 6; }
.threat-tree-r7 { grid-column: 3; grid-row: 7; }

/* Root — most prominent node in the hierarchy. */
.threat-tree-root {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 150px;
  padding: 26px 22px;
  border-radius: 18px;
  background: var(--tile-bg);
  border: 1px solid rgba(255, 90, 100, 0.45);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5), 0 0 34px rgba(232, 25, 44, 0.22);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #fff;
}

/* Category — visually strong but a clear step below the root. */
.threat-tree-cat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--tile-bg);
  border: 1px solid #ff5a68;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.threat-tree-cat-num {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--red-glow);
  margin-bottom: 6px;
}

.threat-tree-cat-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}

/* Sub-topic — smaller, lighter, pill-shaped; a clear third tier. */
.threat-tree-child {
  display: flex;
  align-items: center;
  max-width: 320px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 90, 100, 0.5);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .threat-tree {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .threat-tree-root {
    width: 100%;
    margin-bottom: 8px;
  }

  .threat-tree-cat {
    margin-top: 20px;
  }

  .threat-tree-child {
    max-width: none;
    margin-left: 22px;
    border-left: 2px solid var(--tile-border);
    border-radius: 0 999px 999px 0;
  }
}

/* ══════════════ TAB 3 — AI Agent Deployment & Security ══════════════ */
/* Card look borrows from the "Security for AI" explore cards
   (.aisec-explore-card): flat panel, cursor-anchored glow, left accent
   bar on hover. The electric wave lives only inside the gap columns. */
.agent-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
}

.agent-gap {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-gap svg {
  display: block;
  width: 100%;
  height: 14px;
  overflow: visible;
}

.agent-gap path {
  fill: none;
  stroke: rgba(90, 5, 5, 0.7);
  stroke-width: 1;
}

.agent-gap .connector-glow {
  stroke: rgba(255, 70, 80, 0.8);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 6 24;
  animation: agentGapFlow 1.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255, 50, 60, 0.95));
}

@keyframes agentGapFlow {
  to {
    stroke-dashoffset: -30;
  }
}

.agent-step-card {
  --mx: 20%;
  --my: 0%;
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--tile-border);
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.6vw, 26px) clamp(22px, 2.4vw, 28px);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-smooth);
}

.agent-step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 200px at var(--mx) var(--my), rgba(232, 25, 44, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  pointer-events: none;
}

.agent-step-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--red-glow);
  box-shadow: 0 0 10px var(--red-glow);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.agent-step-card:hover {
  border-color: rgba(232, 25, 44, 0.35);
}

.agent-step-card:hover::before,
.agent-step-card:hover::after {
  opacity: 1;
}

.agent-step-icon {
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
}

.agent-step-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--red-glow);
  fill: none;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 7px rgba(255, 58, 68, 0.5));
  transition: filter 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
}

.agent-step-card:hover .agent-step-icon svg {
  filter: drop-shadow(0 0 12px rgba(255, 58, 68, 0.8));
  transform: scale(1.05);
}

.agent-step-title {
  position: relative;
  font-size: 1.06rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.agent-step-bullets {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-step-bullets li {
  position: relative;
  padding-left: 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.agent-step-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--red-glow);
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(255, 70, 80, 0.7);
}

/* ══════════════ TAB 4 — AI Powered Offensive Security ══════════════ */
/* Kill-chain style pipeline: three tactical/HUD panels (sharp corner
   brackets, monospace phase tags) joined by directional chevrons — fits
   an attack-simulation narrative better than the orbit hub it replaces. */
.offense-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.offense-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: var(--red-glow);
  opacity: 0.7;
}

.offense-chevron svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(232, 25, 44, 0.6));
}

.offense-step {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--tile-border);
  border-radius: 3px;
  padding: 28px 24px 26px;
  transition: border-color 0.3s var(--ease-smooth);
}

.offense-step::before,
.offense-step::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--red-glow);
  opacity: 0.45;
  transition: opacity 0.3s var(--ease-smooth), width 0.3s var(--ease-smooth), height 0.3s var(--ease-smooth);
}

.offense-step::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.offense-step::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

.offense-step:hover {
  border-color: rgba(232, 25, 44, 0.35);
}

.offense-step:hover::before,
.offense-step:hover::after {
  opacity: 0.9;
  width: 22px;
  height: 22px;
}

.offense-step-core {
  background: linear-gradient(180deg, rgba(232, 25, 44, 0.07), transparent 60%), var(--panel-bg);
  border-color: rgba(232, 25, 44, 0.3);
}

.offense-step-core::before,
.offense-step-core::after {
  opacity: 0.9;
}

.offense-step-phase {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-glow);
  text-shadow: 0 0 10px rgba(232, 25, 44, 0.5);
  margin-bottom: 14px;
}

.offense-step-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.offense-step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offense-step-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.offense-step-list li::before {
  content: '\25b8';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.72rem;
  color: var(--red-glow);
  text-shadow: 0 0 5px rgba(255, 70, 80, 0.7);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1080px) {
  .quad-grid {
    grid-template-columns: 1fr;
  }

  .agent-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .agent-gap {
    display: none;
  }

  .offense-steps {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 14px;
  }

  .offense-chevron {
    transform: rotate(90deg);
    padding: 0;
  }
}

@media (max-width: 780px) {
  .soc-stepper {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 14px;
  }

  .soc-stepper-line {
    display: none;
  }

  .soc-step-title {
    font-size: 0.82rem;
  }
}

@media (max-width: 640px) {
  .quad-bullets {
    grid-template-columns: 1fr;
  }

  .aisec-tabs {
    gap: 8px;
  }

  .aisec-tab {
    font-size: 0.72rem;
    padding: 8px 12px;
  }

  .soc-stepper {
    grid-template-columns: repeat(2, 1fr);
  }

  .orbit-item-card {
    width: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aisec-tab-panel:not([hidden]) {
    animation: none !important;
  }

  .soc-stepper-line-glow,
  .agent-gap .connector-glow,
  .threat-tree-pulse {
    animation: none !important;
  }

  .soc-step-flip {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════
   SECURITY FOR AI — explore grid + click-to-expand
   detail component (ported from reference/explore-
   section.html: the hairline-divided card grid and its
   "Explore" expand-below-detail interaction). Restyled
   entirely on the site's existing tokens — --red,
   --red-glow, --panel-bg, --panel-border, --tile-border,
   --ease-smooth — no new palette introduced.
   ════════════════════════════════════════════ */

.aisec-explore {
  position: relative;
}

.aisec-explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--tile-border);
  border: 1px solid var(--tile-border);
  border-radius: 18px;
  overflow: hidden;
}

.aisec-explore-card {
  --mx: 20%;
  --my: 0%;
  position: relative;
  background: var(--panel-bg);
  padding: clamp(26px, 3vw, 42px) clamp(22px, 3vw, 38px) clamp(24px, 2.6vw, 34px);
  overflow: hidden;
  transition: background 0.3s var(--ease-smooth);
}

.aisec-explore-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at var(--mx) var(--my), rgba(232, 25, 44, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  pointer-events: none;
}

/* .aisec-explore-card:hover {
  background: rgba(232, 25, 44, 0.05);
} */

.aisec-explore-card:hover::before {
  opacity: 1;
}

.aisec-explore-card.active {
  background: rgba(232, 25, 44, 0.07);
}

.aisec-explore-card.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--red-glow);
  box-shadow: 0 0 10px var(--red-glow);
}

.aisec-explore-step {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

.aisec-explore-icon {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 26px;
}

.aisec-explore-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--red-glow);
  fill: none;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 7px rgba(255, 58, 68, 0.5));
  transition: filter 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
}

.aisec-explore-card:hover .aisec-explore-icon svg {
  filter: drop-shadow(0 0 12px rgba(255, 58, 68, 0.8));
  transform: scale(1.05);
}

.aisec-explore-title {
  position: relative;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}

.aisec-explore-desc {
  position: relative;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 40ch;
  margin-bottom: 26px;
}

/* Matches the .btn-ghost style used on the home page. */
.aisec-explore-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.aisec-explore-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s var(--ease-smooth);
}

.aisec-explore-link:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

.aisec-explore-link:hover svg {
  transform: translateX(3px);
}

.aisec-explore-card.active .aisec-explore-link {
  border-color: var(--red);
  color: var(--red-glow);
}

/* ── Detail: one consistent boxy grid for all four domains ── */
.aisec-explore-detail-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-smooth);
}

.aisec-explore-detail-shell.open {
  grid-template-rows: 1fr;
}

.aisec-explore-detail-inner {
  overflow: hidden;
}

.aisec-explore-detail {
  margin-top: 1px;
  background: var(--panel-bg);
  border: 1px solid var(--tile-border);
  border-top: none;
  border-radius: 0 0 18px 18px;
  opacity: 0;
  transition: opacity 0.28s var(--ease-smooth) 0.08s;
}

.aisec-explore-detail-shell.open .aisec-explore-detail {
  opacity: 1;
}

.aisec-explore-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px) 26px;
}

.aisec-explore-detail-head {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--red-glow);
  margin-bottom: 10px;
}

.aisec-explore-detail-top h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.aisec-explore-tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 52ch;
}

.aisec-explore-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--tile-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}

.aisec-explore-close:hover {
  border-color: var(--red);
  color: #fff;
}

/* Four different detail layouts — one per card — instead of one template
   reused for all of them. Each is picked to fit its own data shape
   (a handful of even groups vs. ten small ones vs. a few dense ones)
   and none of them repeat the bordered-card grid used everywhere else
   on this page (quad-card, agent-step-card, gov-pill…). */
.aisec-explore-groups {
  padding: 6px clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--tile-border);
}

/* Shared bullet-list styling, reused inside whichever layout needs it. */
.aisec-explore-bullets {
  list-style: none;
  columns: 2;
  column-gap: 28px;
}

.aisec-explore-bullets li {
  position: relative;
  break-inside: avoid;
  padding-left: 14px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.aisec-explore-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--red-glow);
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(255, 70, 80, 0.7);
}

@media (max-width: 640px) {
  .aisec-explore-bullets {
    columns: 1;
  }
}

/* ── Layout 1 (Securing AI usage): vertical numbered timeline — a spine
   down the left with a marker per group. ── */
.aisec-timeline {
  position: relative;
  padding-top: 12px;
}

.aisec-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 6px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 70, 80, 0.5), rgba(255, 70, 80, 0.08));
}

.aisec-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 0;
}

.aisec-timeline-item:first-child {
  padding-top: 6px;
}

.aisec-timeline-marker {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--red-glow);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, #7a0d16 0%, #3d060c 60%, #1c0206 100%);
  box-shadow: 0 0 0 1px rgba(255, 90, 100, 0.3), 0 0 12px rgba(232, 25, 44, 0.3);
}

.aisec-timeline-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}

.aisec-timeline-content h4 {
  font-size: 0.96rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ── Layout 2 (Securing AI applications): accordion — the densest data
   set (up to nine bullets per group), so only one section is open at a
   time instead of dumping everything on screen at once. ── */
.aisec-accordion {
  padding-top: 8px;
}

.aisec-accordion-item {
  border-bottom: 1px solid var(--tile-border);
}

.aisec-accordion-item:first-child {
  border-top: 1px solid var(--tile-border);
}

.aisec-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 18px 4px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.aisec-accordion-num {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 120, 128, 0.6);
}

.aisec-accordion-title {
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

.aisec-accordion-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, 0.5);
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s var(--ease-smooth), stroke 0.3s var(--ease-smooth);
}

.aisec-accordion-item.open .aisec-accordion-chevron {
  transform: rotate(180deg);
  stroke: var(--red-glow);
}

.aisec-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-smooth);
}

.aisec-accordion-item.open .aisec-accordion-body {
  grid-template-rows: 1fr;
}

.aisec-accordion-body-inner {
  overflow: hidden;
}

.aisec-accordion-item .aisec-explore-bullets {
  padding: 2px 4px 20px;
}

/* ── Layout 3 (Securing AI agents): a bento-style card grid — five even
   groups suit a grid better than a list. ── */
.aisec-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding-top: 4px;
}

.aisec-detail-card {
  position: relative;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--tile-border);
  border-radius: 14px;
  padding: 24px 22px 22px;
  transition: border-color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.aisec-detail-card:hover {
  border-color: #ff5a68;
  transform: translateY(-3px);
}

.aisec-detail-card-num {
  position: absolute;
  top: -6px;
  right: 6px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  -webkit-text-stroke: 1px rgba(255, 70, 80, 0.14);
  pointer-events: none;
  user-select: none;
}

.aisec-detail-card h4 {
  position: relative;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.aisec-detail-card .aisec-explore-bullets {
  position: relative;
  columns: 1;
}

/* ── Layout 4 (Securing the AI factory): an editorial spec list — no
   boxes, no pills, no grid cells. Two columns of borderless entries
   separated only by a hairline, each a small numbered label followed by
   its items run together as a plain line of text. Ten groups of very
   uneven size (1 to 3 items) don't need to be boxed to look organized —
   letting the typography and whitespace carry it reads calmer and more
   premium than dressing every entry up as its own card. ── */
.aisec-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 44px;
}

.aisec-spec-item {
  padding: 18px 10px 18px 16px;
  border-bottom: 1px solid var(--tile-border);
  border-left: 2px solid transparent;
  transition: border-left-color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth);
}

.aisec-spec-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.aisec-spec-item:hover {
  border-left-color: var(--red-glow);
  background: rgba(232, 25, 44, 0.04);
}

.aisec-spec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.aisec-spec-num {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--red-glow);
}

.aisec-spec-head h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

.aisec-spec-items {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 640px) {
  .aisec-spec-grid {
    grid-template-columns: 1fr;
  }

  .aisec-spec-item:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--tile-border);
  }

  .aisec-spec-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 780px) {
  .aisec-explore-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .aisec-explore-detail-top {
    flex-direction: column;
  }

  .aisec-explore-close {
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aisec-explore-detail-shell {
    transition: none !important;
  }

  .aisec-explore-detail {
    transition: none !important;
  }

  .aisec-explore-icon svg,
  .aisec-explore-link svg {
    transition: none !important;
  }

  .aisec-explore-card:hover .aisec-explore-icon svg {
    transform: none !important;
  }

  .aisec-accordion-body,
  .aisec-accordion-chevron,
  .aisec-detail-card {
    transition: none !important;
  }

  .aisec-detail-card:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════
   PAGE-LEVEL LAYOUT — AI Governance, Security for AI and
   AI for Security are now three separate pages, each reached
   from a pillar card on ai-capabilities.html. A numbered badge
   + oversized watermark on each page's panel keeps them reading
   as one layered framework even though they no longer share a
   single scroll. Built on the same tokens as everything above.
   ════════════════════════════════════════════ */

/* ── Hub page: the three pillar cards ── */
.aisec-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.aisec-pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px) 30px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), background 0.35s var(--ease-smooth);
}

.aisec-pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 20% 0%, rgba(232, 25, 44, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-smooth);
  pointer-events: none;
}

.aisec-pillar-card:hover {
  transform: translateY(-6px);
  border-color: #ff5a68;
  background: rgba(232, 25, 44, 0.05);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45), 0 0 30px rgba(232, 25, 44, 0.22);
}

.aisec-pillar-card:hover::before {
  opacity: 1;
}

.aisec-pillar-card-num {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 120, 128, 0.55);
}

.aisec-pillar-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 24px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, #7a0d16 0%, #3d060c 60%, #1c0206 100%);
  box-shadow: 0 0 0 1px rgba(255, 90, 100, 0.3), 0 0 18px rgba(232, 25, 44, 0.32);
}

.aisec-pillar-card-icon svg {
  display: block;
  width: 28px;
  height: 28px;
  stroke: var(--red-glow);
  fill: none;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 7px rgba(255, 58, 68, 0.5));
  transition: filter 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.aisec-pillar-card:hover .aisec-pillar-card-icon svg {
  filter: drop-shadow(0 0 13px rgba(255, 58, 68, 0.8));
  transform: scale(1.08);
}

.aisec-pillar-card-title {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.aisec-pillar-card-desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 22px;
}

.aisec-pillar-card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.aisec-pillar-card-tags li {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Matches the .btn-ghost style used on the home page. */
.aisec-pillar-card-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

.aisec-pillar-card-cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.25s var(--ease-smooth);
}

.aisec-pillar-card:hover .aisec-pillar-card-cta {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.aisec-pillar-card:hover .aisec-pillar-card-cta svg {
  transform: translateX(4px);
}

/* ── Sub-pages: back link + prev/next footer nav ── */
.aisec-main-sub {
  max-width: 1200px;
}

.aisec-back-top {
  margin-bottom: 24px;
}

.aisec-pillar-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
  padding-top: 26px;
}

.aisec-pillar-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.25s var(--ease-smooth), gap 0.25s var(--ease-smooth);
}

.aisec-pillar-footer-link svg {
  width: 14px;
  height: 14px;
  stroke: var(--red-glow);
  fill: none;
  stroke-width: 2;
}

.aisec-pillar-footer-link:hover {
  color: #fff;
}

.aisec-pillar-footer-link-prev:hover {
  gap: 12px;
}

.aisec-pillar-footer-link-next {
  margin-left: auto;
}

.aisec-pillar-footer-link-next:hover {
  gap: 12px;
}

/* ── Step badge + oversized watermark numeral per panel ── */
.gov-head,
.gov-pills,
.aisec-explore,
.aisec-tabs,
.aisec-tab-panels {
  position: relative;
  z-index: 1;
}

.gov-step-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-glow);
  margin-bottom: 10px;
}

.gov-watermark {
  position: absolute;
  top: 14px;
  right: 30px;
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  -webkit-text-stroke: 1px rgba(255, 70, 80, 0.12);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── AI Governance pill icons ── */
.gov-pill-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(circle at 50% 50%, #7a0d16 0%, #3d060c 60%, #1c0206 100%);
  box-shadow: 0 0 0 1px rgba(255, 90, 100, 0.3), 0 0 16px rgba(232, 25, 44, 0.3);
}

.gov-pill-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  stroke: #ffb199;
  fill: none;
  stroke-width: 1.5;
}

/* ── AI for Security: ambient reference-screenshot backdrops ──
   Each tab panel gets its corresponding reference mockup as a heavily
   blurred, dimmed backdrop — enough to read as mood/texture, never as
   legible UI, so it never competes with or duplicates the live content. */
.aisec-tab-panel {
  position: relative;
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 32px);
}

.aisec-tab-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.aisec-tab-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(46px) saturate(1.3) brightness(0.85);
  transform: scale(1.3);
  opacity: 0.4;
}

.aisec-tab-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 420px at 50% 0%, rgba(5, 6, 8, 0.2), var(--dark) 78%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.35) 0%, rgba(5, 6, 8, 0.82) 100%);
}

.aisec-tab-panel-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 1080px) {
  .aisec-pillars {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .gov-watermark {
    display: none;
  }

  .aisec-pillar-footer-link-next {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aisec-pillar-card,
  .aisec-pillar-card::before,
  .aisec-pillar-card-icon svg,
  .aisec-pillar-card-cta svg {
    transition: none !important;
  }

  .aisec-pillar-card:hover {
    transform: none !important;
  }

  .aisec-pillar-card:hover .aisec-pillar-card-icon svg {
    transform: none !important;
  }
}