/* ============================================================
   LOGIZENT — Cyber Security Hero Section  |  hero.css
   Prefix: lzcs-   (LogiZent Cyber Security)
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Design Tokens ── */
:root {
  --lzcs-bg:          #040c12;
  --lzcs-bg2:         #071520;
  --lzcs-accent:      #ff6b00;       /* orange — matches LogiZent brand */
  --lzcs-cyan:        #00ffe0;
  --lzcs-white:       #e8f4f8;
  --lzcs-muted:       #5a7a8a;
  --lzcs-border:      rgba(0, 255, 224, 0.15);
  --lzcs-glow-orange: rgba(255, 107, 0, 0.35);
  --lzcs-glow-cyan:   rgba(0, 255, 224, 0.25);

  --lzcs-font-display: 'Orbitron', sans-serif;
  --lzcs-font-mono:    'Share Tech Mono', monospace;
  --lzcs-font-body:    'DM Sans', sans-serif;

  --lzcs-radius:    8px;
  --lzcs-gap:       clamp(1.5rem, 4vw, 3rem);
}

/* ── Reset scoped to section ── */
.lzcs-hero *,
.lzcs-hero *::before,
.lzcs-hero *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   HERO WRAPPER
   ============================================================ */
.lzcs-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: var(--lzcs-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: var(--lzcs-font-body);
  color: var(--lzcs-white);

  /* subtle radial glow behind content */
  background-image:
    radial-gradient(ellipse 60% 55% at 20% 50%, rgba(255,107,0,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 45%, rgba(0,255,224,.05) 0%, transparent 70%);
}

/* ── Canvas (particle network) ── */
.lzcs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Hex grid overlay ── */
.lzcs-hex-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.lzcs-hex-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, 52px);
  gap: 4px;
  width: 100%;
  height: 100%;
  opacity: 0.04;
}

.lzcs-hex-cell {
  width: 48px;
  height: 54px;
  background: transparent;
  border: 1px solid var(--lzcs-cyan);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition: background 0.4s, opacity 0.4s;
}

.lzcs-hex-cell.lzcs-hex--lit {
  background: rgba(0,255,224,0.12);
  opacity: 0.5;
}

/* ── Scan-line sweep ── */
.lzcs-scanline {
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--lzcs-cyan), transparent);
  opacity: 0.3;
  z-index: 2;
  animation: lzcs-scan 6s linear infinite;
}

@keyframes lzcs-scan {
  0%   { top: -4px; }
  100% { top: calc(100% + 4px); }
}

/* ── Data ribbons (left & right) ── */
.lzcs-ribbon {
  position: absolute;
  top: 0;
  width: 22px;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.lzcs-ribbon--l { left: 0; }
.lzcs-ribbon--r { right: 0; transform: scaleY(-1); }

.lzcs-ribbon span {
  writing-mode: vertical-lr;
  font-family: var(--lzcs-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--lzcs-cyan);
  opacity: 0.25;
  animation: lzcs-ribbon-scroll 12s linear infinite;
  line-height: 1.6;
  white-space: nowrap;
}

@keyframes lzcs-ribbon-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ── HUD corner brackets ── */
.lzcs-hud-tl,
.lzcs-hud-tr,
.lzcs-hud-bl,
.lzcs-hud-br {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 3;
  opacity: 0.5;
}

.lzcs-hud-tl {
  top: 16px; left: 16px;
  border-top: 2px solid var(--lzcs-cyan);
  border-left: 2px solid var(--lzcs-cyan);
}
.lzcs-hud-tr {
  top: 16px; right: 16px;
  border-top: 2px solid var(--lzcs-accent);
  border-right: 2px solid var(--lzcs-accent);
}
.lzcs-hud-bl {
  bottom: 16px; left: 16px;
  border-bottom: 2px solid var(--lzcs-cyan);
  border-left: 2px solid var(--lzcs-cyan);
}
.lzcs-hud-br {
  bottom: 16px; right: 16px;
  border-bottom: 2px solid var(--lzcs-accent);
  border-right: 2px solid var(--lzcs-accent);
}

/* ============================================================
   LAYOUT CONTAINER
   ============================================================ */
.lzcs-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lzcs-gap);
  align-items: center;
}

/* ============================================================
   LEFT COLUMN
   ============================================================ */
.lzcs-left {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.5vh, 2rem);
}

/* STATUS BADGE */
.lzcs-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid var(--lzcs-border);
  border-radius: 100px;
  background: rgba(0, 255, 224, 0.04);
  width: fit-content;
  opacity: 0;
  transform: translateY(12px);
  animation: lzcs-fade-up 0.6s ease forwards 0.2s;
}

.lzcs-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: lzcs-pulse-dot 1.4s ease-in-out infinite;
}

@keyframes lzcs-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

.lzcs-badge__label {
  font-family: var(--lzcs-font-mono);
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  letter-spacing: 0.12em;
  color: var(--lzcs-cyan);
}

/* HEADLINE */
.lzcs-headline {
  font-family: var(--lzcs-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.lzcs-headline__line {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
}

.lzcs-headline__line[data-lzcs-reveal="0"] { animation: lzcs-fade-up 0.7s cubic-bezier(.22,1,.36,1) forwards 0.4s; }
.lzcs-headline__line[data-lzcs-reveal="1"] { animation: lzcs-fade-up 0.7s cubic-bezier(.22,1,.36,1) forwards 0.55s; }
.lzcs-headline__line[data-lzcs-reveal="2"] { animation: lzcs-fade-up 0.7s cubic-bezier(.22,1,.36,1) forwards 0.7s; }

.lzcs-headline__plain  { color: var(--lzcs-white); }
.lzcs-headline__accent {
  color: var(--lzcs-accent);
  position: relative;
  display: inline-block;
}

/* glitch effect */
.lzcs-headline__accent::before,
.lzcs-headline__accent::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  color: var(--lzcs-accent);
}

.lzcs-headline__accent::before {
  color: var(--lzcs-cyan);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  animation: lzcs-glitch-1 4s steps(2) infinite;
}

.lzcs-headline__accent::after {
  color: #ff0050;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  animation: lzcs-glitch-2 4s steps(2) infinite;
}

@keyframes lzcs-glitch-1 {
  0%,90%,100% { transform: translate(0,0); opacity: 0; }
  91%         { transform: translate(-4px, 1px); opacity: 0.8; }
  93%         { transform: translate(3px, -1px); opacity: 0.8; }
  95%         { transform: translate(0,0); opacity: 0; }
}

@keyframes lzcs-glitch-2 {
  0%,92%,100% { transform: translate(0,0); opacity: 0; }
  93%         { transform: translate(4px, 2px); opacity: 0.7; }
  95%         { transform: translate(-2px, -1px); opacity: 0.7; }
  97%         { transform: translate(0,0); opacity: 0; }
}

/* SUB TEXT */
.lzcs-sub {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(232, 244, 248, 0.65);
  max-width: 520px;
  opacity: 0;
  transform: translateY(12px);
  animation: lzcs-fade-up 0.7s ease forwards 0.85s;
}

/* TERMINAL LINE */
.lzcs-terminal {
  font-family: var(--lzcs-font-mono);
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  color: var(--lzcs-cyan);
  background: rgba(0,255,224,0.03);
  border: 1px solid rgba(0,255,224,0.12);
  border-radius: var(--lzcs-radius);
  padding: 10px 16px;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  opacity: 0;
  animation: lzcs-fade-up 0.6s ease forwards 1.05s;
}

.lzcs-terminal__prompt { color: var(--lzcs-accent); flex-shrink: 0; }
.lzcs-terminal__text   { color: var(--lzcs-cyan); }

.lzcs-terminal__cursor {
  color: var(--lzcs-cyan);
  animation: lzcs-blink 0.9s step-end infinite;
}

@keyframes lzcs-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* CTA BUTTONS */
.lzcs-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  opacity: 0;
  transform: translateY(12px);
  animation: lzcs-fade-up 0.7s ease forwards 1.2s;
}

.lzcs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--lzcs-font-display);
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.lzcs-btn:hover { transform: translateY(-2px); }

.lzcs-btn__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
}

/* PRIMARY */
.lzcs-btn--primary {
  background: var(--lzcs-accent);
  color: #fff;
  box-shadow: 0 0 24px var(--lzcs-glow-orange);
}

.lzcs-btn--primary:hover {
  box-shadow: 0 0 40px rgba(255,107,0,0.6);
}

.lzcs-btn__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.lzcs-btn--primary:hover .lzcs-btn__glow { opacity: 1; }

/* GHOST */
.lzcs-btn--ghost {
  border: 1px solid rgba(0,255,224,0.35);
  color: var(--lzcs-cyan);
  background: transparent;
}

.lzcs-btn--ghost:hover {
  border-color: var(--lzcs-cyan);
  background: rgba(0,255,224,0.06);
  box-shadow: 0 0 20px var(--lzcs-glow-cyan);
}

/* STATS */
.lzcs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  animation: lzcs-fade-up 0.7s ease forwards 1.4s;
}

.lzcs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lzcs-stat__num {
  font-family: var(--lzcs-font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--lzcs-white);
  line-height: 1;
}

.lzcs-stat__unit {
  font-family: var(--lzcs-font-display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--lzcs-accent);
  font-weight: 700;
}

.lzcs-stat__label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lzcs-muted);
  font-family: var(--lzcs-font-mono);
}

.lzcs-stat__divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--lzcs-border), transparent);
}

/* ============================================================
   RIGHT COLUMN — AI Orb
   ============================================================ */
.lzcs-right {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: lzcs-fade-in 1s ease forwards 0.6s;
}

.lzcs-orb-wrap {
  position: relative;
  width: clamp(260px, 36vw, 440px);
  height: clamp(260px, 36vw, 440px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RINGS */
.lzcs-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
}

.lzcs-ring--1 {
  inset: 0;
  border-width: 1px;
  border-top-color: var(--lzcs-cyan);
  border-right-color: rgba(0,255,224,0.3);
  animation: lzcs-spin 8s linear infinite;
  box-shadow: 0 0 20px var(--lzcs-glow-cyan) inset;
}

.lzcs-ring--2 {
  inset: 10%;
  border-width: 1px;
  border-top-color: var(--lzcs-accent);
  border-left-color: rgba(255,107,0,0.3);
  animation: lzcs-spin-rev 12s linear infinite;
}

.lzcs-ring--3 {
  inset: 20%;
  border-width: 1px;
  border-top-color: rgba(0,255,224,0.4);
  border-bottom-color: rgba(255,107,0,0.2);
  animation: lzcs-spin 18s linear infinite;
}

@keyframes lzcs-spin     { to { transform: rotate(360deg); } }
@keyframes lzcs-spin-rev { to { transform: rotate(-360deg); } }

/* CENTRAL SHIELD */
.lzcs-shield {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: lzcs-float 4s ease-in-out infinite;
}

@keyframes lzcs-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.lzcs-shield__core {
  position: relative;
  padding: 12px;
  background: radial-gradient(circle, rgba(0,255,224,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.lzcs-shield__svg {
  width: clamp(90px, 14vw, 160px);
  filter: drop-shadow(0 0 20px rgba(0,255,224,0.4)) drop-shadow(0 0 40px rgba(255,107,0,0.2));
}

/* FLOATING CHIPS */
.lzcs-chip {
  position: absolute;
  background: rgba(4, 12, 18, 0.85);
  border: 1px solid var(--lzcs-border);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--lzcs-font-mono);
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  color: var(--lzcs-cyan);
  letter-spacing: 0.08em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(0,255,224,0.08);
  animation: lzcs-chip-float 4s ease-in-out infinite;
}

.lzcs-chip--1 { top: 8%; left: 0; animation-delay: 0s; }
.lzcs-chip--2 { top: 12%; right: -4%; animation-delay: 0.8s; }
.lzcs-chip--3 { bottom: 14%; left: -2%; animation-delay: 1.6s; }
.lzcs-chip--4 { bottom: 8%; right: 0; animation-delay: 2.4s; }

@keyframes lzcs-chip-float {
  0%,100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-7px); opacity: 0.8; }
}

/* THREAT TICKER */
.lzcs-ticker {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(4,12,18,0.9);
  border: 1px solid rgba(255,107,0,0.3);
  border-radius: var(--lzcs-radius);
  padding: 8px 20px;
  white-space: nowrap;
}

.lzcs-ticker__label {
  font-family: var(--lzcs-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--lzcs-muted);
}

.lzcs-ticker__num {
  font-family: var(--lzcs-font-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  color: var(--lzcs-accent);
  letter-spacing: 0.12em;
}

/* ============================================================
   SCROLL HINT
   ============================================================ */
.lzcs-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  animation: lzcs-fade-in 1s ease forwards 2.4s;
}

.lzcs-scroll-hint__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--lzcs-cyan), transparent);
  animation: lzcs-scroll-line 1.5s ease-in-out infinite;
}

@keyframes lzcs-scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.lzcs-scroll-hint__text {
  font-family: var(--lzcs-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--lzcs-muted);
}

/* ============================================================
   SHARED KEYFRAMES
   ============================================================ */
@keyframes lzcs-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lzcs-fade-in {
  to { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape */
@media (max-width: 1024px) {
  .lzcs-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lzcs-left {
    align-items: center;
  }

  .lzcs-sub,
  .lzcs-badge {
    max-width: 560px;
  }

  .lzcs-right {
    display: none; /* hide orb on smaller screens to save space */
  }

  .lzcs-stats {
    justify-content: center;
  }

  .lzcs-cta-row {
    justify-content: center;
  }

  .lzcs-terminal {
    max-width: 90%;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .lzcs-headline {
    font-size: clamp(1.7rem, 8vw, 2.8rem);
  }

  .lzcs-stats {
    gap: 1rem;
  }

  .lzcs-hud-tl,
  .lzcs-hud-tr,
  .lzcs-hud-bl,
  .lzcs-hud-br {
    width: 20px;
    height: 20px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .lzcs-hero {
    min-height: 100dvh;
  }

  .lzcs-badge__label {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }

  .lzcs-cta-row {
    flex-direction: column;
    width: 100%;
  }

  .lzcs-btn {
    width: 100%;
    justify-content: center;
  }

  .lzcs-ribbon { display: none; }

  .lzcs-stat__divider { display: none; }

  .lzcs-stats {
    flex-direction: column;
    gap: 0.8rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lzcs-scanline,
  .lzcs-ring,
  .lzcs-shield,
  .lzcs-chip,
  .lzcs-ribbon span {
    animation: none !important;
  }
}
/*Hero Section CSS By Rishabh Ends*/

/*Feature Section CSS bY Rishabh Starts*/
/* ============================================================
   LOGIZENT — Cyber Security Sticky Scroll Section
   File: cyber-features.css
   Prefix: lzft-  (LogiZent Features)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Design tokens (match hero) ── */
:root {
  --lzft-bg:        #040c12;
  --lzft-bg2:       #061520;
  --lzft-accent:    #ff6b00;
  --lzft-cyan:      #00ffe0;
  --lzft-green:     #00ff88;
  --lzft-white:     #e8f4f8;
  --lzft-muted:     #4a6878;
  --lzft-border:    rgba(0,255,224,.14);

  --lzft-font-d:    'Orbitron', sans-serif;
  --lzft-font-m:    'Share Tech Mono', monospace;
  --lzft-font-b:    'DM Sans', sans-serif;

  --lzft-ease:      cubic-bezier(.22,1,.36,1);
  --lzft-panels:    6;  /* total panel count */
}

/* ── Reset ── */
.lzft-root *, .lzft-root *::before, .lzft-root *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ============================================================
   ROOT — tall enough to scroll through all panels
   ============================================================ */
.lzft-root {
  position: relative;
  /* 100vh per panel × panels */
  height: calc(var(--lzft-panels) * 100vh);
  background: var(--lzft-bg);
  font-family: var(--lzft-font-b);
  color: var(--lzft-white);
}

/* ── Ambient canvas ── */
.lzft-ambient {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s;
}
.lzft-root.lzft-active .lzft-ambient { opacity: 1; }

/* ── Grid lines ── */
.lzft-gridlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(1.5rem,5vw,4rem);
  opacity: 0;
  transition: opacity .5s;
}
.lzft-root.lzft-active .lzft-gridlines { opacity: 1; }
.lzft-gridlines span {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,255,224,.06), transparent);
}

/* ============================================================
   STICKY CONTAINER
   ============================================================ */
.lzft-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
}

/* ============================================================
   PANELS
   ============================================================ */
.lzft-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--lzft-ease), transform .7s var(--lzft-ease);
  transform: translateY(40px);
  will-change: opacity, transform;
}

.lzft-panel.lzft-panel--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lzft-panel.lzft-panel--exit-up   { opacity: 0; transform: translateY(-40px); }
.lzft-panel.lzft-panel--exit-down { opacity: 0; transform: translateY(40px); }

.lzft-panel__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  padding: clamp(4rem,8vh,6rem) clamp(1.25rem,5vw,4rem);
}

/* ── Layout variants ── */
.lzft-layout--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem,3vh,2.5rem);
}

.lzft-layout--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}

.lzft-layout--reverse { direction: rtl; }
.lzft-layout--reverse > * { direction: ltr; }

/* ============================================================
   PANEL 0 — CENTER / INTRO
   ============================================================ */
.lzft-radar-wrap {
  position: relative;
  width: clamp(200px,28vw,340px);
  height: clamp(200px,28vw,340px);
  flex-shrink: 0;
}

.lzft-radar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0,255,224,.2);
}

.lzft-radar__ping {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--lzft-accent);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 12px var(--lzft-accent);
}

.lzft-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  max-width: 680px;
}

.lzft-eyebrow {
  font-family: var(--lzft-font-m);
  font-size: clamp(.6rem,1vw,.75rem);
  letter-spacing: .2em;
  color: var(--lzft-cyan);
  opacity: .7;
}

.lzft-section-title {
  font-family: var(--lzft-font-d);
  font-size: clamp(2rem,5vw,3.8rem);
  font-weight: 900;
  line-height: 1.08;
  display: flex;
  flex-direction: column;
}

.lzft-section-desc {
  font-size: clamp(.9rem,1.5vw,1.05rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: .02em;
  color: rgba(232,244,248,.6);
  max-width: 580px;
}

.lzft-accent { color: var(--lzft-accent); }

/* Scroll cue */
.lzft-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
}

.lzft-scroll-cue__arrow {
  display: block;
  width: 20px; height: 20px;
  border-right: 2px solid var(--lzft-cyan);
  border-bottom: 2px solid var(--lzft-cyan);
  transform: rotate(45deg);
  animation: lzft-bounce-arrow 1.6s ease-in-out infinite;
}

@keyframes lzft-bounce-arrow {
  0%,100% { transform: rotate(45deg) translateY(0); opacity: 1; }
  50%      { transform: rotate(45deg) translateY(6px); opacity: .5; }
}

.lzft-scroll-cue__label {
  font-family: var(--lzft-font-m);
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--lzft-muted);
}

/* ============================================================
   CONTENT TYPOGRAPHY
   ============================================================ */
.lzft-panel-tag {
  font-family: var(--lzft-font-m);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--lzft-muted);
  margin-bottom: .5rem;
}

.lzft-panel-title {
  font-family: var(--lzft-font-d);
  font-size: clamp(1.7rem,3.5vw,2.9rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.lzft-panel-desc {
  font-size: clamp(.85rem,1.4vw,1rem);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(232,244,248,.62);
  margin-bottom: 1.6rem;
  max-width: 500px;
}

.lzft-feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.8rem;
}

.lzft-feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(.8rem,1.3vw,.95rem);
  color: rgba(232,244,248,.78);
  letter-spacing: .015em;
}

.lzft-feat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lzft-cyan);
  box-shadow: 0 0 8px var(--lzft-cyan);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Stat pills */
.lzft-stat-pills {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.lzft-pill {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  border: 1px solid var(--lzft-border);
  border-radius: 8px;
  background: rgba(0,255,224,.03);
}

.lzft-pill strong {
  font-family: var(--lzft-font-d);
  font-size: clamp(1.2rem,2.2vw,1.7rem);
  font-weight: 900;
  color: var(--lzft-white);
}

.lzft-pill span {
  font-family: var(--lzft-font-m);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--lzft-muted);
  text-transform: uppercase;
}

/* ============================================================
   CTA BUTTONS (final panel)
   ============================================================ */
.lzft-final-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.lzft-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 6px;
  font-family: var(--lzft-font-d);
  font-size: clamp(.7rem,1.1vw,.8rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.lzft-cta-btn:hover { transform: translateY(-2px); }

.lzft-cta-btn--primary {
  background: var(--lzft-accent);
  color: #fff;
  box-shadow: 0 0 24px rgba(255,107,0,.35);
}
.lzft-cta-btn--primary:hover { box-shadow: 0 0 40px rgba(255,107,0,.55); }

.lzft-cta-btn--ghost {
  border: 1px solid rgba(0,255,224,.35);
  color: var(--lzft-cyan);
  background: transparent;
}
.lzft-cta-btn--ghost:hover { background: rgba(0,255,224,.06); }

/* ============================================================
   VISUAL WRAPPERS
   ============================================================ */
.lzft-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lzft-vis-wrap {
  position: relative;
  width: clamp(240px,34vw,440px);
  height: clamp(240px,34vw,440px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Neural canvas ── */
.lzft-neural {
  width: 100%; height: 100%;
  border-radius: 12px;
  border: 1px solid var(--lzft-border);
  background: rgba(4,12,18,.7);
}

/* HUD overlay */
.lzft-vis-hud {
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(4,12,18,.92);
  border: 1px solid rgba(0,255,224,.2);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 170px;
}

.lzft-hud-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--lzft-font-m);
  font-size: .65rem;
  letter-spacing: .08em;
}

.lzft-hud-key   { color: var(--lzft-muted); }
.lzft-hud-val   { color: var(--lzft-white); }
.lzft-hud-val--green  { color: var(--lzft-green); }
.lzft-hud-val--orange { color: var(--lzft-accent); }

/* ── Zero-Trust Orb ── */
.lzft-zt-core {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lzft-zt-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}

.lzft-zt-ring--1 {
  inset: 0;
  border-color: rgba(0,255,224,.18);
  animation: lzft-spin 10s linear infinite;
}
.lzft-zt-ring--2 {
  inset: 14%;
  border-color: rgba(255,107,0,.2);
  animation: lzft-spin-rev 16s linear infinite;
}
.lzft-zt-ring--3 {
  inset: 28%;
  border-color: rgba(0,255,224,.3);
  animation: lzft-spin 22s linear infinite;
}

@keyframes lzft-spin     { to { transform: rotate(360deg); } }
@keyframes lzft-spin-rev { to { transform: rotate(-360deg); } }

.lzft-zt-center {
  position: relative; z-index: 2;
  background: radial-gradient(circle, rgba(0,255,224,.08), transparent 70%);
  border-radius: 50%;
  padding: 10px;
}
.lzft-zt-center svg { width: 72px; height: auto; }

.lzft-zt-node {
  position: absolute;
  width: 38px; height: 38px;
  background: rgba(4,12,18,.9);
  border: 1px solid var(--lzft-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  backdrop-filter: blur(6px);
  animation: lzft-orbit-node 12s linear infinite;
  z-index: 3;
}

/* Position nodes on circle perimeter */
.lzft-zt-node--1 { animation-delay: 0s; }
.lzft-zt-node--2 { animation-delay: -2s; }
.lzft-zt-node--3 { animation-delay: -4s; }
.lzft-zt-node--4 { animation-delay: -6s; }
.lzft-zt-node--5 { animation-delay: -8s; }
.lzft-zt-node--6 { animation-delay: -10s; }

@keyframes lzft-orbit-node {
  from { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

.lzft-vis-label {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--lzft-font-m);
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--lzft-cyan);
  opacity: .5;
  white-space: nowrap;
}

/* ── SOC Screen ── */
.lzft-soc-screen {
  width: 100%;
  height: 100%;
  background: #020a10;
  border: 1px solid rgba(0,255,224,.2);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(0,255,224,.08), inset 0 0 40px rgba(0,255,224,.03);
}

.lzft-soc-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0,255,224,.05);
  border-bottom: 1px solid rgba(0,255,224,.1);
  flex-shrink: 0;
}

.lzft-soc-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.lzft-soc-dot--red    { background: #ff5f56; }
.lzft-soc-dot--yellow { background: #ffbd2e; }
.lzft-soc-dot--green  { background: #27c93f; }

.lzft-soc-title {
  font-family: var(--lzft-font-m);
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--lzft-muted);
  margin-left: 6px;
}

.lzft-soc-body {
  flex: 1;
  padding: 10px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lzft-soc-entry {
  font-family: var(--lzft-font-m);
  font-size: .65rem;
  letter-spacing: .04em;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: 3px;
  display: flex;
  gap: 8px;
  animation: lzft-soc-in .3s var(--lzft-ease) both;
}

@keyframes lzft-soc-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lzft-soc-entry--info    { color: var(--lzft-cyan); background: rgba(0,255,224,.04); }
.lzft-soc-entry--warn    { color: #ffbd2e; background: rgba(255,189,46,.04); }
.lzft-soc-entry--threat  { color: #ff5f56; background: rgba(255,95,86,.06); }
.lzft-soc-entry--blocked { color: var(--lzft-green); background: rgba(0,255,136,.04); }

.lzft-soc-bar {
  height: 3px;
  background: rgba(0,255,224,.08);
  flex-shrink: 0;
}

.lzft-soc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lzft-cyan), var(--lzft-accent));
  width: 0;
  transition: width .5s ease;
}

/* ── Cloud canvas ── */
.lzft-cloud-anim {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--lzft-border);
  background: rgba(4,12,18,.7);
}

.lzft-cloud-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lzft-cloud-lbl {
  position: absolute;
  font-family: var(--lzft-font-m);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--lzft-cyan);
  background: rgba(4,12,18,.85);
  padding: 3px 8px;
  border: 1px solid rgba(0,255,224,.2);
  border-radius: 4px;
  animation: lzft-lbl-pulse 3s ease-in-out infinite;
}

.lzft-cloud-lbl:nth-child(2) { animation-delay: .6s; }
.lzft-cloud-lbl:nth-child(3) { animation-delay: 1.2s; }
.lzft-cloud-lbl:nth-child(4) { animation-delay: 1.8s; }
.lzft-cloud-lbl:nth-child(5) { animation-delay: 2.4s; }

@keyframes lzft-lbl-pulse {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; box-shadow: 0 0 10px rgba(0,255,224,.2); }
}

/* ── Compliance grid ── */
.lzft-comp-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  width: 100%;
  padding: 10px;
}

.lzft-comp-card {
  background: rgba(4,12,18,.9);
  border: 1px solid var(--lzft-border);
  border-radius: 10px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: border-color .3s, box-shadow .3s;
  animation: lzft-card-in .5s var(--lzft-ease) both;
}

.lzft-comp-card:hover {
  border-color: var(--lzft-cyan);
  box-shadow: 0 0 16px rgba(0,255,224,.12);
}

.lzft-comp-icon { font-size: 1.4rem; }

.lzft-comp-name {
  font-family: var(--lzft-font-d);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--lzft-white);
}

.lzft-comp-status {
  font-family: var(--lzft-font-m);
  font-size: .55rem;
  letter-spacing: .1em;
  color: var(--lzft-green);
}

.lzft-comp-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}

.lzft-comp-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lzft-cyan), var(--lzft-accent));
  transition: width 1.2s var(--lzft-ease);
}

@keyframes lzft-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PROGRESS DOTS
   ============================================================ */
.lzft-progress {
  position: absolute;
  right: clamp(1rem,3vw,2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

.lzft-progress__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,255,224,.2);
  border: 1px solid rgba(0,255,224,.3);
  cursor: pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
  padding: 0;
}

.lzft-progress__dot--active {
  background: var(--lzft-accent);
  border-color: var(--lzft-accent);
  transform: scale(1.5);
  box-shadow: 0 0 10px rgba(255,107,0,.5);
}

/* ============================================================
   PANEL COUNTER
   ============================================================ */
.lzft-panel-counter {
  position: absolute;
  left: clamp(1rem,3vw,2.5rem);
  bottom: clamp(1.5rem,4vh,2.5rem);
  font-family: var(--lzft-font-d);
  font-size: clamp(.7rem,1.2vw,.85rem);
  letter-spacing: .1em;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 20;
}

#lzftPanelCurrent { color: var(--lzft-accent); font-weight: 700; }
.lzft-panel-counter__sep { color: var(--lzft-muted); }
.lzft-panel-counter__total { color: var(--lzft-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .lzft-layout--split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lzft-layout--reverse { direction: ltr; }
  .lzft-vis-wrap {
    width: clamp(180px,60vw,320px);
    height: clamp(180px,60vw,320px);
  }
  .lzft-zt-node { display: none; } /* too cramped on mobile */
}

@media (max-width: 768px) {
  .lzft-panel-title { font-size: clamp(1.4rem,6vw,2rem); }
  .lzft-section-title { font-size: clamp(1.6rem,7vw,2.6rem); }
  .lzft-comp-grid { grid-template-columns: repeat(2,1fr); }
  .lzft-progress { display: none; }
}

@media (max-width: 480px) {
  .lzft-vis-wrap { display: none; }
  .lzft-panel__inner { padding-top: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lzft-zt-ring, .lzft-zt-node,
  .lzft-scroll-cue__arrow,
  .lzft-cloud-lbl { animation: none !important; }
  .lzft-panel { transition: none !important; }
}

/*Feature Section CSS By Rishabh Ends*/

/*Military War Room Section CSS By Rishabh Starts*/
/* ============================================================
   LOGIZENT — Threat Intelligence War Room Section
   File: war-room.css
   Prefix: lzwr-  (LogiZent War Room)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Design tokens ── */
:root {
  --lzwr-bg:        #02080d;
  --lzwr-bg-panel:  rgba(4, 14, 22, 0.92);
  --lzwr-red:       #ff3b3b;
  --lzwr-orange:    #ff6b00;
  --lzwr-cyan:      #00ffe0;
  --lzwr-green:     #00ff88;
  --lzwr-yellow:    #ffbd2e;
  --lzwr-white:     #ddeef5;
  --lzwr-muted:     #3d6070;
  --lzwr-border:    rgba(0,255,224,.1);
  --lzwr-border-r:  rgba(255,59,59,.15);

  --lzwr-font-d:    'Orbitron', sans-serif;
  --lzwr-font-m:    'Share Tech Mono', monospace;
  --lzwr-font-b:    'DM Sans', sans-serif;
}

/* ── Reset ── */
.lzwr-root *, .lzwr-root *::before, .lzwr-root *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ============================================================
   ROOT
   ============================================================ */
.lzwr-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--lzwr-bg);
  font-family: var(--lzwr-font-b);
  color: var(--lzwr-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Deep room background */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,59,59,.04) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(0,255,224,.04) 0%, transparent 60%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(0,255,224,.03) 39px,
      rgba(0,255,224,.03) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(0,255,224,.03) 39px,
      rgba(0,255,224,.03) 40px
    );
}

/* Red alert pulse */
.lzwr-alert-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  animation: lzwr-alert 6s ease-in-out infinite;
}
@keyframes lzwr-alert {
  0%,100% { box-shadow: inset 0 0 0px rgba(255,59,59,0); }
  50%      { box-shadow: inset 0 0 80px rgba(255,59,59,.07); }
}

/* Scanlines */
.lzwr-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0,0,0,.08) 3px,
    rgba(0,0,0,.08) 4px
  );
}

/* Corner brackets */
.lzwr-corner {
  position: absolute;
  width: 36px; height: 36px;
  z-index: 5;
}
.lzwr-corner--tl { top:0; left:0;   border-top: 2px solid var(--lzwr-red); border-left: 2px solid var(--lzwr-red); }
.lzwr-corner--tr { top:0; right:0;  border-top: 2px solid var(--lzwr-cyan); border-right: 2px solid var(--lzwr-cyan); }
.lzwr-corner--bl { bottom:0; left:0; border-bottom: 2px solid var(--lzwr-cyan); border-left: 2px solid var(--lzwr-cyan); }
.lzwr-corner--br { bottom:0; right:0; border-bottom: 2px solid var(--lzwr-red); border-right: 2px solid var(--lzwr-red); }

/* ============================================================
   STATUS BAR
   ============================================================ */
.lzwr-statusbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(1.5rem,4vw,3rem);
  border-bottom: 1px solid var(--lzwr-border-r);
  background: rgba(255,59,59,.04);
  flex-shrink: 0;
  gap: 1rem;
  flex-wrap: wrap;
}

.lzwr-statusbar__left,
.lzwr-statusbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lzwr-statusbar__center {
  display: flex;
  align-items: center;
}

.lzwr-sb-logo {
  font-family: var(--lzwr-font-d);
  font-size: clamp(.6rem,1.1vw,.75rem);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--lzwr-red);
  text-shadow: 0 0 12px rgba(255,59,59,.5);
}

.lzwr-sb-item {
  font-family: var(--lzwr-font-m);
  font-size: clamp(.55rem,.9vw,.68rem);
  letter-spacing: .1em;
  color: var(--lzwr-muted);
}

.lzwr-sb-item strong { color: var(--lzwr-white); }

.lzwr-sb-div { color: var(--lzwr-muted); }

.lzwr-sb-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 4px;
}
.lzwr-sb-dot--red {
  background: var(--lzwr-red);
  box-shadow: 0 0 8px var(--lzwr-red);
  animation: lzwr-pulse-red 1.2s ease-in-out infinite;
}
@keyframes lzwr-pulse-red {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* ============================================================
   MAIN GRID
   ============================================================ */
.lzwr-grid {
  position: relative;
  z-index: 10;
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 0;
  min-height: 0;
}

/* ============================================================
   PANELS (shared)
   ============================================================ */
.lzwr-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(.8rem,2vh,1.4rem) clamp(.8rem,2vw,1.4rem);
  gap: 1rem;
}

.lzwr-panel--left  { border-right: 1px solid var(--lzwr-border); background: rgba(2,8,13,.6); }
.lzwr-panel--right { border-left: 1px solid var(--lzwr-border); background: rgba(2,8,13,.6); }
.lzwr-panel--center { background: transparent; }

/* Panel header */
.lzwr-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--lzwr-border);
  flex-shrink: 0;
}

.lzwr-panel__header--center {
  padding: 0 0 .6rem;
}

.lzwr-panel__title {
  font-family: var(--lzwr-font-m);
  font-size: clamp(.55rem,.9vw,.7rem);
  letter-spacing: .18em;
  color: var(--lzwr-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.lzwr-panel__badge {
  font-family: var(--lzwr-font-m);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--lzwr-red);
  border: 1px solid rgba(255,59,59,.3);
  border-radius: 100px;
  padding: 2px 8px;
}

.lzwr-blink-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lzwr-red);
  box-shadow: 0 0 6px var(--lzwr-red);
  animation: lzwr-pulse-red 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.lzwr-blink-dot--cyan {
  background: var(--lzwr-cyan);
  box-shadow: 0 0 6px var(--lzwr-cyan);
  animation: lzwr-pulse-cyan 1.8s ease-in-out infinite;
}
@keyframes lzwr-pulse-cyan {
  0%,100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ============================================================
   LEFT — LIVE FEED
   ============================================================ */
.lzwr-feed {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.lzwr-feed-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  background: rgba(255,255,255,.02);
  animation: lzwr-feed-in .3s ease both;
  flex-shrink: 0;
}

@keyframes lzwr-feed-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lzwr-feed-entry--malware  { border-color: var(--lzwr-red); }
.lzwr-feed-entry--phishing { border-color: var(--lzwr-orange); }
.lzwr-feed-entry--ddos     { border-color: var(--lzwr-yellow); }
.lzwr-feed-entry--apt      { border-color: #bf00ff; }
.lzwr-feed-entry--blocked  { border-color: var(--lzwr-green); }

.lzwr-feed-entry__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.lzwr-feed-entry__type {
  font-family: var(--lzwr-font-m);
  font-size: .58rem;
  letter-spacing: .1em;
  font-weight: 700;
}

.lzwr-feed-entry--malware  .lzwr-feed-entry__type { color: var(--lzwr-red); }
.lzwr-feed-entry--phishing .lzwr-feed-entry__type { color: var(--lzwr-orange); }
.lzwr-feed-entry--ddos     .lzwr-feed-entry__type { color: var(--lzwr-yellow); }
.lzwr-feed-entry--apt      .lzwr-feed-entry__type { color: #bf00ff; }
.lzwr-feed-entry--blocked  .lzwr-feed-entry__type { color: var(--lzwr-green); }

.lzwr-feed-entry__time {
  font-family: var(--lzwr-font-m);
  font-size: .53rem;
  color: var(--lzwr-muted);
}

.lzwr-feed-entry__msg {
  font-family: var(--lzwr-font-m);
  font-size: .6rem;
  letter-spacing: .04em;
  color: rgba(221,238,245,.55);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini stats */
.lzwr-mini-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  flex-shrink: 0;
}

.lzwr-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(0,255,224,.03);
  border: 1px solid var(--lzwr-border);
  border-radius: 6px;
  padding: 8px 4px;
}

.lzwr-mini-stat__num {
  font-family: var(--lzwr-font-d);
  font-size: clamp(.9rem,1.5vw,1.1rem);
  font-weight: 700;
  color: var(--lzwr-cyan);
}

.lzwr-mini-stat__label {
  font-family: var(--lzwr-font-m);
  font-size: .5rem;
  letter-spacing: .08em;
  color: var(--lzwr-muted);
  text-align: center;
  text-transform: uppercase;
}

/* ============================================================
   CENTER — MAP
   ============================================================ */
.lzwr-map-wrap {
  flex: 1;
  position: relative;
  border: 1px solid var(--lzwr-border);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(2,8,13,.8);
  min-height: 320px;
}

.lzwr-map-canvas {
  width: 100%; height: 100%;
  display: block;
}

/* Crosshair */
.lzwr-crosshair {
  position: absolute;
  background: rgba(0,255,224,.06);
  pointer-events: none;
}
.lzwr-crosshair--h { top:50%; left:0; width:100%; height:1px; }
.lzwr-crosshair--v { left:50%; top:0; height:100%; width:1px; }

/* Map badge */
.lzwr-map-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(2,8,13,.9);
  border: 1px solid var(--lzwr-border-r);
  border-radius: 6px;
  padding: 8px 14px;
}
.lzwr-map-badge__num {
  font-family: var(--lzwr-font-d);
  font-size: clamp(1.2rem,2.5vw,1.8rem);
  font-weight: 900;
  color: var(--lzwr-red);
  line-height: 1;
}
.lzwr-map-badge__label {
  font-family: var(--lzwr-font-m);
  font-size: .55rem;
  letter-spacing: .12em;
  color: var(--lzwr-muted);
}

/* Classified */
.lzwr-classified {
  position: absolute;
  bottom: 10px; right: 14px;
  font-family: var(--lzwr-font-m);
  font-size: .55rem;
  letter-spacing: .2em;
  color: rgba(255,59,59,.25);
  pointer-events: none;
  user-select: none;
}

/* Map legend */
.lzwr-map-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.lzwr-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--lzwr-font-m);
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--lzwr-muted);
}
.lzwr-legend-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Threat type bars */
.lzwr-threat-types {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-shrink: 0;
  padding-top: .6rem;
  border-top: 1px solid var(--lzwr-border);
  flex-wrap: wrap;
}

.lzwr-tt {
  flex: 1;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lzwr-tt__label {
  font-family: var(--lzwr-font-m);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--lzwr-muted);
}
.lzwr-tt__bar {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.lzwr-tt__fill {
  height: 100%;
  border-radius: 2px;
  width: 0;
  transition: width 1.4s cubic-bezier(.22,1,.36,1);
}
.lzwr-tt__val {
  font-family: var(--lzwr-font-m);
  font-size: .6rem;
  color: var(--lzwr-white);
}

/* ============================================================
   RIGHT — SHIELD SCORE + LAYERS
   ============================================================ */
.lzwr-score-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.lzwr-score-dial {
  width: clamp(120px,14vw,170px);
  height: clamp(120px,14vw,170px);
}

.lzwr-score-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
}

.lzwr-score-num {
  font-family: var(--lzwr-font-d);
  font-size: clamp(1.4rem,2.5vw,2rem);
  font-weight: 900;
  color: var(--lzwr-cyan);
  line-height: 1;
}
.lzwr-score-label {
  font-family: var(--lzwr-font-m);
  font-size: .58rem;
  color: var(--lzwr-muted);
}
.lzwr-score-grade {
  font-family: var(--lzwr-font-d);
  font-size: .65rem;
  font-weight: 700;
  color: var(--lzwr-green);
  letter-spacing: .12em;
  margin-top: 2px;
}

/* Protection layers */
.lzwr-layers {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.lzwr-layers::-webkit-scrollbar { display: none; }

.lzwr-layer__title {
  font-family: var(--lzwr-font-m);
  font-size: .58rem;
  letter-spacing: .15em;
  color: var(--lzwr-muted);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--lzwr-border);
  flex-shrink: 0;
}

.lzwr-layer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  outline: none;
}
.lzwr-layer:hover,
.lzwr-layer:focus {
  border-color: var(--lzwr-border);
  background: rgba(0,255,224,.03);
}
.lzwr-layer:hover .lzwr-layer__desc,
.lzwr-layer:focus .lzwr-layer__desc {
  max-height: 60px;
  opacity: 1;
}

.lzwr-layer__bar-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lzwr-layer__name {
  font-family: var(--lzwr-font-m);
  font-size: .63rem;
  letter-spacing: .07em;
  color: var(--lzwr-white);
}
.lzwr-layer__pct {
  font-family: var(--lzwr-font-d);
  font-size: .65rem;
  font-weight: 700;
  color: var(--lzwr-cyan);
}

.lzwr-layer__track {
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
}
.lzwr-layer__fill {
  height: 100%;
  border-radius: 2px;
  width: 0;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}

.lzwr-layer__desc {
  font-family: var(--lzwr-font-m);
  font-size: .58rem;
  letter-spacing: .04em;
  color: rgba(221,238,245,.45);
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease;
}

/* Audit CTA */
.lzwr-audit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,107,0,.15), rgba(255,59,59,.1));
  border: 1px solid rgba(255,107,0,.35);
  border-radius: 6px;
  font-family: var(--lzwr-font-d);
  font-size: clamp(.6rem,1vw,.72rem);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--lzwr-orange);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.lzwr-audit-btn:hover {
  background: linear-gradient(135deg, rgba(255,107,0,.25), rgba(255,59,59,.2));
  box-shadow: 0 0 24px rgba(255,107,0,.3);
  transform: translateY(-2px);
}
.lzwr-audit-btn__icon {
  font-size: 1rem;
  color: var(--lzwr-red);
}

/* ============================================================
   BOTTOM TICKER
   ============================================================ */
.lzwr-ticker-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--lzwr-border-r);
  background: rgba(255,59,59,.04);
  height: 36px;
  overflow: hidden;
  flex-shrink: 0;
}

.lzwr-ticker-tag {
  flex-shrink: 0;
  font-family: var(--lzwr-font-m);
  font-size: .62rem;
  letter-spacing: .14em;
  color: var(--lzwr-red);
  padding: 0 16px;
  border-right: 1px solid var(--lzwr-border-r);
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(255,59,59,.08);
  animation: lzwr-pulse-red 1.2s ease-in-out infinite;
}

.lzwr-ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.lzwr-ticker-inner {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: lzwr-ticker-scroll 28s linear infinite;
  font-family: var(--lzwr-font-m);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--lzwr-muted);
}

.lzwr-ticker-inner span { color: var(--lzwr-white); }

@keyframes lzwr-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .lzwr-grid {
    grid-template-columns: 240px 1fr 260px;
  }
}

@media (max-width: 960px) {
  .lzwr-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .lzwr-panel--left,
  .lzwr-panel--right {
    border: none;
    border-top: 1px solid var(--lzwr-border);
  }
  .lzwr-panel--center { order: -1; }
  .lzwr-map-wrap { min-height: 300px; }
  .lzwr-layers { max-height: 280px; }
}

@media (max-width: 600px) {
  .lzwr-statusbar {
    justify-content: center;
    text-align: center;
  }
  .lzwr-statusbar__right { display: none; }
  .lzwr-threat-types { gap: .5rem; }
  .lzwr-mini-stats { grid-template-columns: repeat(3,1fr); }
  .lzwr-corner { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lzwr-alert-pulse,
  .lzwr-blink-dot,
  .lzwr-sb-dot,
  .lzwr-ticker-inner { animation: none !important; }
  .lzwr-layer__fill,
  .lzwr-tt__fill { transition: none !important; }
}

/*Military War Room Section CSS By Rishabh Ends*/

/*Cyber Circle Section CSS By Rishabh Starts*/
/* ============================================================
   LOGIZENT — Cyber Security Circular Progress Section v2
   File: cyber-circle.css   |   Prefix: lzcp2-
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --lzcp2-bg:      #02080d;
  --lzcp2-accent:  #ff6b00;
  --lzcp2-cyan:    #00ffe0;
  --lzcp2-green:   #00ff88;
  --lzcp2-white:   #ddeef5;
  --lzcp2-muted:   #3d6272;
  --lzcp2-border:  rgba(0,255,224,.12);
  --lzcp2-fd:      'Orbitron', sans-serif;
  --lzcp2-fm:      'Share Tech Mono', monospace;
  --lzcp2-fb:      'DM Sans', sans-serif;
  --lzcp2-ease:    cubic-bezier(.22,1,.36,1);
}

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

/* ============================================================
   ROOT — total scroll height
   intro (100vh) + 6 nodes × 110vh + exit (60vh)
   ============================================================ */
.lzcp2-root {
  position: relative;
  height: calc(100vh + 6 * 110vh + 60vh);
  background: var(--lzcp2-bg);
  font-family: var(--lzcp2-fb);
  color: var(--lzcp2-white);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(80,0,200,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 15% 85%, rgba(0,255,224,.04) 0%, transparent 60%);
}

/* ============================================================
   INTRO
   ============================================================ */
.lzcp2-intro {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(5rem,10vh,8rem) clamp(1.5rem,5vw,4rem) clamp(4rem,6vh,6rem);
  gap: 1.2rem;
}

.lzcp2-eyebrow {
  font-family: var(--lzcp2-fm);
  font-size: clamp(.58rem,.9vw,.72rem);
  letter-spacing: .22em;
  color: var(--lzcp2-cyan);
  opacity: .6;
}

.lzcp2-heading {
  font-family: var(--lzcp2-fd);
  font-size: clamp(2rem,5vw,3.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.lzcp2-heading--accent { color: var(--lzcp2-accent); }

.lzcp2-subhead {
  font-size: clamp(.9rem,1.5vw,1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(221,238,245,.55);
  max-width: 600px;
}

/* ============================================================
   STICKY
   ============================================================ */
.lzcp2-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

/* ambient blobs */
.lzcp2-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  animation: lzcp2-breathe 6s ease-in-out infinite;
}
.lzcp2-blob--a {
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(90,0,200,.16) 0%, transparent 70%);
}
.lzcp2-blob--b {
  width: 380px; height: 380px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(0,255,224,.09) 0%, transparent 70%);
  animation-direction: reverse;
}
@keyframes lzcp2-breathe {
  0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%,-50%) scale(1.07); }
}

/* ============================================================
   LAYOUT  (side-by-side on desktop, stack on mobile)
   ============================================================ */
.lzcp2-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1340px;
  padding: 0 clamp(1.5rem,4vw,3.5rem);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem,5vw,6rem);
  align-items: center;
}

/* ============================================================
   RING WRAP
   ============================================================ */
.lzcp2-ring-wrap {
  position: relative;
  /*
    We want the diagram to be as large as comfortably fits in half the viewport.
    Use aspect-ratio + width to keep it square.
  */
  width: min(46vw, 520px, 85vmin);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  margin: 0 auto;
}

/* Decorative outer dashed ring */
.lzcp2-deco-ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px dashed rgba(0,255,224,.1);
  animation: lzcp2-slow-spin 40s linear infinite;
  pointer-events: none;
}
@keyframes lzcp2-slow-spin { to { transform: rotate(360deg); } }

/* SVG fills the wrap */
.lzcp2-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Node groups ── */
.lzcp2-ng { cursor: default; }

/* Default state */
.lzcp2-ng .lzcp2-nr { transition: stroke .3s, stroke-width .3s; }
.lzcp2-ng .lzcp2-ni { transition: fill .3s, stroke .3s; }
.lzcp2-ng .lzcp2-nc { transition: fill .3s, r .3s; }

/* Passed (arc has gone through) */
.lzcp2-ng.lzcp2-passed .lzcp2-nr { stroke: rgba(0,255,224,.65) !important; }
.lzcp2-ng.lzcp2-passed .lzcp2-nc { fill: var(--lzcp2-cyan) !important; }

/* Active */
.lzcp2-ng.lzcp2-active .lzcp2-nr  { stroke: var(--lzcp2-accent) !important; stroke-width: 2 !important; }
.lzcp2-ng.lzcp2-active .lzcp2-ni  { fill: rgba(255,107,0,.28) !important; stroke: var(--lzcp2-accent) !important; }
.lzcp2-ng.lzcp2-active .lzcp2-nc  { fill: var(--lzcp2-accent) !important; }

/* Pulse ring — injected by JS on active node */
.lzcp2-pulse {
  pointer-events: none;
  transform-origin: 0 0;
  animation: lzcp2-pulse-out 1.6s ease-out infinite;
}
@keyframes lzcp2-pulse-out {
  0%   { r: 19;  opacity: .7; }
  100% { r: 36;  opacity: 0;  }
}

/* ── HTML Label overlay ── */
.lzcp2-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lzcp2-lbl {
  position: absolute;
  font-family: var(--lzcp2-fm);
  font-size: clamp(.5rem,.75vw,.68rem);
  letter-spacing: .09em;
  line-height: 1.4;
  color: var(--lzcp2-muted);
  transition: color .35s;
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}
.lzcp2-lbl.lzcp2-lbl-active { color: var(--lzcp2-white); }
.lzcp2-lbl.lzcp2-lbl-passed { color: rgba(0,255,224,.5);  }

/* ── Centre badge ── */
.lzcp2-badge {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(90,0,200,.22);
  border: 1px solid rgba(150,80,255,.32);
  border-radius: 100px;
  padding: clamp(8px,1.4vh,14px) clamp(20px,2.5vw,32px);
  backdrop-filter: blur(16px);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}
.lzcp2-badge__n {
  font-family: var(--lzcp2-fd);
  font-size: clamp(1.4rem,2.2vw,1.9rem);
  font-weight: 900;
  color: var(--lzcp2-white);
  line-height: 1;
}
.lzcp2-badge__t {
  font-family: var(--lzcp2-fm);
  font-size: clamp(.44rem,.65vw,.6rem);
  letter-spacing: .12em;
  color: rgba(221,238,245,.5);
  text-align: center;
  line-height: 1.35;
}

/* ── Centre Icon slot ── */
.lzcp2-icon-slot {
  position: absolute;
  /* sits in the visual centre of the circle */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38%);
  width: clamp(72px,12vmin,110px);
  height: clamp(72px,12vmin,110px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}
.lzcp2-icon-slot svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(0,255,224,.3));
}
.lzcp2-icon-slot.lzcp2-icon-in { animation: lzcp2-icon-pop .45s var(--lzcp2-ease) both; }
@keyframes lzcp2-icon-pop {
  from { opacity: 0; transform: translate(-50%,-38%) scale(.7); }
  to   { opacity: 1; transform: translate(-50%,-38%) scale(1); }
}

/* ============================================================
   RIGHT PANEL
   ============================================================ */
.lzcp2-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem,2.5vh,2rem);
  max-width: 520px;
}

/* Step counter */
.lzcp2-step-count {
  font-family: var(--lzcp2-fm);
  font-size: clamp(.65rem,1vw,.8rem);
  letter-spacing: .18em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lzcp2-step-count__cur  { color: var(--lzcp2-accent); font-weight: 700; font-size: clamp(.9rem,1.4vw,1.1rem); }
.lzcp2-step-count__sep  { color: var(--lzcp2-muted); }
.lzcp2-step-count__tot  { color: var(--lzcp2-muted); }

/* Text block */
.lzcp2-panel__text {
  min-height: 200px;
}

/* Title */
.lzcp2-pt-title {
  font-family: var(--lzcp2-fd);
  font-size: clamp(1.6rem,3.2vw,2.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--lzcp2-white);
  margin-bottom: clamp(.8rem,1.5vh,1.2rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--lzcp2-ease), transform .5s var(--lzcp2-ease);
}
.lzcp2-pt-title span { color: var(--lzcp2-accent); }
.lzcp2-pt-title.lzcp2-in { opacity: 1; transform: translateY(0); }

/* Description */
.lzcp2-pt-desc {
  font-size: clamp(.85rem,1.4vw,.98rem);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: .015em;
  color: rgba(221,238,245,.62);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--lzcp2-ease) .09s, transform .5s var(--lzcp2-ease) .09s;
}
.lzcp2-pt-desc.lzcp2-in { opacity: 1; transform: translateY(0); }

/* Tags */
.lzcp2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--lzcp2-ease) .18s, transform .45s var(--lzcp2-ease) .18s;
}
.lzcp2-tags.lzcp2-in { opacity: 1; transform: translateY(0); }

.lzcp2-tag {
  font-family: var(--lzcp2-fm);
  font-size: clamp(.52rem,.75vw,.65rem);
  letter-spacing: .1em;
  color: var(--lzcp2-cyan);
  border: 1px solid rgba(0,255,224,.2);
  border-radius: 100px;
  padding: 4px 12px;
  background: rgba(0,255,224,.04);
}

/* Navigation dots */
.lzcp2-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transition: opacity .4s var(--lzcp2-ease) .25s;
}
.lzcp2-dots.lzcp2-in { opacity: 1; }

.lzcp2-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,255,224,.2);
  border: 1px solid rgba(0,255,224,.3);
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.lzcp2-dot.lzcp2-dot-active {
  background: var(--lzcp2-accent);
  border-color: var(--lzcp2-accent);
  transform: scale(1.55);
  box-shadow: 0 0 10px rgba(255,107,0,.5);
}
.lzcp2-dot.lzcp2-dot-passed {
  background: rgba(0,255,224,.45);
  border-color: var(--lzcp2-cyan);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .lzcp2-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lzcp2-ring-wrap {
    width: min(82vw, 420px);
    margin: 0 auto;
  }
  .lzcp2-panel {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
  .lzcp2-step-count { justify-content: center; }
  .lzcp2-tags       { justify-content: center; }
  .lzcp2-dots       { justify-content: center; }
}

@media (max-width: 520px) {
  .lzcp2-ring-wrap { width: min(92vw, 360px); }
  .lzcp2-badge { top: 16%; padding: 7px 18px; }
  .lzcp2-pt-title { font-size: clamp(1.3rem,7vw,1.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lzcp2-blob, .lzcp2-deco-ring, .lzcp2-pulse { animation: none !important; }
  .lzcp2-pt-title, .lzcp2-pt-desc, .lzcp2-tags, .lzcp2-dots { transition: none !important; }
}

/*Cyber Circle Section CSS By Rishabh Ends*/

/*CTA Section CSS By Rishabh Starts*/
.zxq_cta9_wrap {
  width: 100%;
  padding: 100px 6%;
  background: radial-gradient(circle at 70% 40%, rgba(0,255,200,0.08), transparent 40%),
              #050b12;
  position: relative;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
}

.zxq_cta9_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1400px;
  margin: auto;
}

/* LEFT */
.zxq_cta9_left {
  flex: 1;
}

.zxq_cta9_badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(0,255,200,0.3);
  border-radius: 30px;
  font-size: 12px;
  color: #00ffd0;
  margin-bottom: 20px;
}

.zxq_dot {
  width: 8px;
  height: 8px;
  background: #00ffd0;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ffd0;
}

.zxq_cta9_title {
  font-size: 48px;
  line-height: 1.3;
  color: #d7e3ea;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.zxq_cta9_title span {
  color: #ff7a00;
}

.zxq_cta9_desc {
  color: #8aa0ad;
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 30px;
}

/* TERMINAL */
.zxq_cta9_terminal {
  background: rgba(0, 255, 200, 0.05);
  border: 1px solid rgba(0,255,200,0.2);
  padding: 14px 18px;
  font-size: 14px;
  color: #00ffd0;
  border-radius: 8px;
  margin-bottom: 30px;
  font-family: monospace;
}

.zxq_cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #00ffd0;
  margin-left: 5px;
  animation: zxq_blink 1s infinite;
}

@keyframes zxq_blink {
  50% { opacity: 0; }
}

/* BUTTONS */
.zxq_cta9_btns {
  display: flex;
  gap: 20px;
}

.zxq_btn_primary {
  padding: 14px 28px;
  background: linear-gradient(135deg, #ff7a00, #ffae00);
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: 0.3s;
}

.zxq_btn_primary:hover {
  box-shadow: 0 0 20px #ff7a00;
}

.zxq_btn_secondary {
  padding: 14px 28px;
  border: 1px solid #00ffd0;
  color: #00ffd0;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
}

.zxq_btn_secondary:hover {
  background: rgba(0,255,200,0.1);
}

/* RIGHT */
.zxq_cta9_right {
  flex: 1;
  display: flex;
  justify-content: center;
}

.zxq_core_circle {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(0,255,200,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zxq_core_pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #00ffd0;
  animation: zxq_pulse 2s infinite;
}

@keyframes zxq_pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.zxq_core_icon {
  font-size: 50px;
  color: #00ffd0;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .zxq_cta9_inner {
    flex-direction: column;
    text-align: center;
  }

  .zxq_cta9_btns {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .zxq_cta9_title {
    font-size: 32px;
  }

  .zxq_core_circle {
    width: 200px;
    height: 200px;
  }
}
/*CTA Section CSS By Rishabh Ends*/