:root {
  --bg: #08111f;
  --panel: #0d1b2e;
  --panel-2: #0d2138;
  --panel-3: #10263a;
  --border: #173d5d;
  --border-2: #1e5477;
  --text: #f4fbff;
  --muted: #b8cad8;
  --soft: #7fa1ba;
  --accent: #00ddb2;
  --brand: #f04a43;
  --button-dark: #13283e;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --radius: 28px;
  --container: 1300px;
  --text-1: #87aec4;
	--text-2: #000;
}
body.light-mode {
  --bg: #ffffff;
  --panel: #f5f5f5;
  --panel-2: #eaeaea;
  --panel-3: #dddddd;
  --border: #cccccc;
  --border-2: #bbbbbb;
  --text: #000000;
  --muted: #555555;
  --soft: #777777;
  --accent: #00b894;
  --button-dark: #dddddd;
  --text-1: #000;
	--text-2: #000;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body:not(.light-mode) {
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(0, 221, 178, 0.1),
      transparent 120px
    ),
    radial-gradient(
      circle at 79% 26%,
      rgba(0, 221, 178, 0.08),
      transparent 130px
    ),
    var(--bg);
	margin: 0;
  font-family: font-family: 'Poppins', sans-serif !important;
  color: var(--text);
  line-height: 1.5;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  line-height: 1.5;
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(0, 221, 178, 0.1),
      transparent 120px
    ),
    radial-gradient(
      circle at 79% 26%,
      rgba(0, 221, 178, 0.08),
      transparent 130px
    ),
    radial-gradient(
      circle at 84% 40%,
      rgba(0, 221, 178, 0.08),
      transparent 120px
    ),
    radial-gradient(
      circle at 78% 57%,
      rgba(0, 221, 178, 0.06),
      transparent 120px
    ),
    radial-gradient(
      circle at 83% 74%,
      rgba(0, 221, 178, 0.05),
      transparent 120px
    ),
    radial-gradient(
      circle at 80% 90%,
      rgba(0, 221, 178, 0.05),
      transparent 120px
    ),
    var(--bg);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  padding: 0px 0px;
  border-bottom: 1px solid #173d5d;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand);
  position: relative;
  box-shadow: 0 10px 24px rgba(240, 74, 67, 0.25);
  flex: 0 0 auto;
}
.brand-mark::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 16px;
  background: #d9d9d9;
  border-radius: 50% 50% 42% 42%;
}
.brand-mark::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 13px;
  width: 12px;
  height: 4px;
  background: #1f6fe5;
  border-radius: 999px;
}
.brand-copy strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}
.brand-copy small {
  color: var(--soft);
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  color: #c3d5e2;
  font-size: 0.92rem;
}
.nav a:hover,
.reference-link:hover,
.udemy-link:hover,
.blog-link:hover {
  color: var(--accent);
}
main section {
  padding-top: 40px !important;
}
.hero-card,
.chart-card,
.about-card,
.cta-card,
.emerging-section,
.udemy-section,
.blog-preview-section {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card {
  padding: 42px;
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: 32px;
  align-items: center;
}
.hero-text h1 {
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
}
.hero-text h1 .accent {
  display: block;
  color: var(--accent);
}
.hero-text p {
  max-width: 640px;
  /* color: #d0dfeb; */
  font-size: 1.2rem;
  margin: 22px 0 26px;
}
.hero-actions,
.cta-actions,
.udemy-actions,
.blog-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-actions {
  margin-bottom: 28px;
}
.cta-actions,
.udemy-actions,
.blog-actions {
  margin-top: 24px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 14px 22px;
  border-radius: 18px;
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--accent);
  color: #042d27;
}
.btn-secondary {
  background: var(--button-dark);
  color: var(--text-1);
  border: 1px solid #24547c;
}
.hero-list,
.chart-side ul,
.blog-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.hero-list li,
.chart-side li,
.blog-meta li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* color: #d8e7f2; */
}
.hero-list li::before,
.chart-side li::before,
.blog-meta li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  margin-top: 6px;
}
.monitor-card {
  border: 1px solid #1b4363;
  border-radius: 28px;
  /* background: #0a1422; */
  padding: 24px;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}
.monitor-card h3 {
  margin: 0 0 22px;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}
.monitor-grid {
  position: absolute;
  inset: 78px 18px 18px;
  background-image:
    linear-gradient(rgba(18, 48, 75, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 48, 75, 0.9) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.65;
  border-radius: 20px;
}
.monitor-svg {
  position: absolute;
  inset: 135px 40px 55px;
  width: calc(100% - 80px);
  height: calc(100% - 190px);
  z-index: 1;
}
.mini-stat {
  position: absolute;
  left: 42px;
  width: 255px;
  padding: 4px;
  /* background: rgba(14, 33, 53, 0.95); */
  border: 1px solid #1f5274;
  border-radius: 18px;
  z-index: 2;
	text-align: center;
}
.mini-stat span {
  display: block;
  color: var(--text-1);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.mini-stat strong {
  font-size: 1.6rem;
}
.mini-stat.alerts {
  top: 110px;
}
.mini-stat.labs {
  top: 230px;
}
.mini-stat.mode {
  top: 350px;
}
.section-title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 2.8vw, 2.65rem);
  letter-spacing: -0.02em;
}
.section-lead {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 1.05rem;
}
.reference-line {
  margin-top: -10px;
  margin-bottom: 20px;
  color: var(--soft);
  font-size: 0.95rem;
}
.reference-link,
.udemy-link,
.blog-link {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stats-grid,
.feature-grid,
.testimonial-grid,
.about-mini-grid,
.emerging-grid {
  display: grid;
  gap: 22px;
}
.stats-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 36px;
}
.stat-card,
.feature-card,
.testimonial-card,
.about-mini-card,
.emerging-item,
.blog-card,
.blog-mini-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.stat-card,
.feature-card,
.testimonial-card,
.about-mini-card,
.emerging-item,
.blog-card,
.blog-mini-card {
  background: var(--panel);
}

body.light-mode .navbar {
  background-color: #ffffff !important;
}

body.light-mode .nav-link {
  color: #000 !important;
}
.stat-card small {
  color: #87aec4;
  display: block;
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.stat-card span {
  color: #a9c0d0;
  display: block;
  margin-bottom: 6px;
}
.stat-card strong {
  color: var(--accent);
  font-size: 2.1rem;
  line-height: 1.1;
}
.chart-card {
  padding: 30px;
  display: grid;
  grid-template-columns: 1.6fr 0.7fr;
  gap: 28px;
  align-items: start;
}
.chart-headline {
  margin: 0;
  font-size: 1.5rem;
}
.chart-subtitle {
  color: var(--text-1);
  font-size: 0.95rem;
  margin: 6px 0 18px;
}
.chart-wrap {
  border-radius: 20px;
  overflow: hidden;
}
.chart-side {
  /* background: var(--panel-3); */
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 22px;
}
.chart-side h3 {
  margin: 0 0 14px;
  font-size: 1.5rem;
}
.feature-grid,
.testimonial-grid,
.about-mini-grid,
.emerging-grid {
  grid-template-columns: repeat(3, 1fr);
}
.feature-card h3,
.testimonial-card h3,
.emerging-item h3,
.blog-card h3,
.blog-mini-card h3 {
  margin: 0 0 10px;
}
.feature-card h3,
.about-mini-card h3,
.emerging-item h3,
.blog-mini-card h3 {
  color: var(--accent);
}
.feature-card p,
.testimonial-card p,
.emerging-item p,
.about-card p,
.udemy-section p,
.blog-card p,
.blog-mini-card p {
  color: var(--text-1);
  margin: 0;
}
.emerging-section,
.blog-preview-section {
  padding: 28px;
}
.emerging-visual {
  height: 130px;
  border-radius: 18px;
  margin-bottom: 16px;
  border: 1px solid #1a4361;
  /* background: linear-gradient(
    180deg,
    rgba(11, 22, 38, 0.9),
    rgba(9, 19, 32, 0.98)
  ); */
  position: relative;
  overflow: hidden;
}
.emerging-visual.ai::before,
.emerging-visual.space::before,
.emerging-visual.auto::before {
  content: "";
  position: absolute;
  inset: 0;
}
.emerging-visual.ai::before {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 221, 178, 0.16),
      transparent 45%
    ),
    linear-gradient(
      90deg,
      transparent 49%,
      rgba(0, 221, 178, 0.32) 50%,
      transparent 51%
    ),
    linear-gradient(
      transparent 49%,
      rgba(0, 221, 178, 0.32) 50%,
      transparent 51%
    );
  background-size:
    auto,
    40px 100%,
    100% 40px;
}
.emerging-visual.space::before {
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 28px,
      rgba(0, 221, 178, 0.85) 29px,
      transparent 32px
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 54px,
      rgba(0, 221, 178, 0.45) 55px,
      transparent 58px
    ),
    radial-gradient(circle at 50% 50%, rgba(0, 221, 178, 0.22), transparent 70%);
}
.emerging-visual.auto::before {
  background:
    linear-gradient(transparent 68%, rgba(0, 221, 178, 0.18) 68%),
    radial-gradient(
      circle at 32% 78%,
      rgba(0, 221, 178, 0.85) 0 10px,
      transparent 11px
    ),
    radial-gradient(
      circle at 68% 78%,
      rgba(0, 221, 178, 0.85) 0 10px,
      transparent 11px
    ),
    linear-gradient(
      180deg,
      transparent 40%,
      rgba(0, 221, 178, 0.25) 40% 60%,
      transparent 60%
    );
}
.emerging-label {
  position: absolute;
  inset: auto 0 16px;
  text-align: center;
  color: var(--text-1);
  font-weight: 700;
}
.blog-preview-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 22px;
}
.blog-card {
  /* background: linear-gradient(
    180deg,
    rgba(13, 33, 56, 0.98),
    rgba(13, 27, 46, 0.98)
  ); */
  border-color: #204d70;
}
.blog-badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 221, 178, 0.12);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.blog-card h3 {
  font-size: 1.75rem;
  line-height: 1.2;
}
.blog-mini-grid {
  display: grid;
  gap: 18px;
}
.about-card {
  padding: 30px;
}
.about-card > p {
  max-width: 1100px;
  font-size: 1.07rem;
}
.about-mini-grid {
  margin-top: 30px;
}
.about-mini-card p,
.testimonial-card small {
  color: var(--text-1);
}
.cta-card,
.udemy-section {
  padding: 34px;
}
.site-footer {
  padding: 24px 0 0px !important;
  color: #6f8aa0;
  font-size: 0.92rem;
}
@media (max-width: 1200px) {
  .hero-card,
  .chart-card,
  .blog-preview-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-grid,
  .testimonial-grid,
  .about-mini-grid,
  .emerging-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .hero-card,
  .chart-card,
  .about-card,
  .cta-card,
  .emerging-section,
  .udemy-section,
  .blog-preview-section {
    padding: 24px;
  }
  .monitor-card {
    min-height: 448px;
  }
  .mini-stat {
    width: calc(100% - 84px);
  }
}
@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }
  .site-header {
    padding-top: 18px;
  }
  .hero-text h1 {
    font-size: 2.4rem;
  }
  .brand-copy strong {
    font-size: 1.7rem;
  }
  .btn {
    width: 100%;
  }
  .nav {
    gap: 14px;
    font-size: 0.86rem;
  }
}

/* Keep your existing testimonial-card styles */

/* Swiper spacing fix */
.testimonial-slider {
  padding: 20px 10px 50px;
}

/* Card full height */
.swiper-slide {
  height: auto;
}

/* Arrows color */
.swiper-button-prev,
.swiper-button-next {
  color: #00ddb2;
}

/* Pagination dots */
.swiper-pagination-bullet {
  background: #7fa1ba;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #00ddb2;
}
/* ===============================
HAMBURGER MENU
=============================== */

.menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
}

/* Desktop menu */
.nav {
  display: flex;
}

/* Mobile styles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #0d1b2e;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    display: none; /* hidden by default */
    border-top: 1px solid var(--border);
  }

  .nav.active {
    display: flex;
  }

  .menu-list li {
    list-style: none;
  }

  .menu-list a {
    font-size: 1.1rem;
    color: #fff;
  }

  .header-inner {
    position: relative;
  }
}
/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.chart-card {
  display: flex;
  gap: 30px;
  flex-wrap: wrap; /* allows stacking on mobile */
}

.chart-wrap {
  flex: 2;
  min-width: 300px;
  overflow-x: auto; /* prevent chart overflow */
}

.chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 860px;
}

.chart-side {
  flex: 1;
  min-width: 250px;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .chart-card {
    flex-direction: column; /* stack chart and side notes */
    gap: 20px;
  }
  .chart-side {
    margin-top: 20px;
  }
  .stats-grid {
    grid-template-columns: 1fr; /* single column stats on mobile */
    gap: 12px;
  }
  .section-title {
    font-size: 1.5rem;
  }
  .section-lead {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.3rem;
  }
  .section-lead {
    font-size: 0.95rem;
  }
  .stat-card strong {
    font-size: 1.2rem;
  }
  .chart-side h3 {
    font-size: 1rem;
  }
}
.chart-wrap {
  flex: 2;
  min-width: 0; /* allows flex shrink on mobile */
  overflow-x: auto; /* horizontal scroll instead of overflow */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

.chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 860px; /* optional, keeps desktop size */
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  min-width: 0; /* prevent grid from expanding */
}

/* Ensure logo and toggle are aligned on mobile */
.navbar-brand {
  display: flex;
  align-items: center;
}

/* Optional: adjust navbar padding */
.navbar {
  padding: 0.75rem 1rem;
}

/* Dropdown fix */
.navbar-nav .dropdown-menu {
  background-color: var(--panel); /* match your theme */
  border-radius: 0.5rem;
}

/* Mobile menu links color */
.navbar-nav .nav-link {
  color: var(--text);
}

.navbar-nav .nav-link:hover {
  color: var(--accent);
}
.chart-wrap
{
	margin: 5px !important;
}


/* new styles */
 .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand-mark{width:38px;height:38px;border-radius:12px;background:var(--brand);position:relative;flex:0 0 auto;box-shadow:0 10px 24px rgba(240,74,67,.25)}
    .brand-mark::before{content:"";position:absolute;top:8px;left:8px;width:22px;height:16px;background:#d9d9d9;border-radius:50% 50% 42% 42%}
    .brand-mark::after{content:"";position:absolute;top:15px;left:13px;width:12px;height:4px;background:#1f6fe5;border-radius:999px}
    .brand-copy strong{display:block;font-size:2rem;line-height:1}
    .brand-copy small{display:block;margin-top:3px;font-size:.82rem;letter-spacing:.02em;color:var(--soft)}
    .nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px;color:#c3d5e2;font-size:.92rem}
    .nav a:hover, .text-link:hover, .reference-link:hover, .footer-link:hover, .udemy-link:hover, .blog-link:hover{color:var(--accent)}
    .nav a.active{color:var(--accent)}

    /* ===== Layout & Sections ===== */
    main section{padding-top:72px}
    .hero-card, .shell, .stats-section, .chart-card, .bug-bounty-card, .about-card, .cta-card, .emerging-section, .udemy-section, .blog-preview-section{
        border:1px solid var(--border-2);background:rgba(13,27,46,.94);border-radius:var(--radius);box-shadow:var(--shadow)
    }
    .shell{padding:30px}
    .hero-card{padding:44px;display:grid;grid-template-columns:1.18fr .92fr;gap:34px;align-items:center}
    .stats-section{padding:30px}
    .chart-card{padding:30px;display:grid;grid-template-columns:1.6fr .7fr;gap:28px;align-items:start}
    .bug-bounty-card{padding:30px}
    .about-card, .cta-card, .udemy-section{padding:34px}
    .emerging-section, .blog-preview-section{padding:28px}
    .site-footer{padding:24px 0 36px;color:#6f8aa0;font-size:.92rem}
    .footer{padding:24px 0 36px;color:#6f8aa0;font-size:.92rem}

		.bug-bounty-card{padding:30px}
    .bounty-grid{grid-template-columns:1.15fr .85fr;align-items:start}
    .bounty-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .bounty-visual{background:var(--panel3);border:1px solid var(--border-2);border-radius:22px;padding:20px}
    .bounty-visual h3{margin:0 0 12px;font-size:1.4rem}
    .bounty-visual svg{width:100%;height:auto}
    .bounty-visual .bounty-line,.bounty-visual .bounty-point,.bounty-visual .bounty-label{opacity:0}
    .bug-bounty-card.is-visible .bounty-line{animation:fadeIn .6s ease .2s forwards}
    .bug-bounty-card.is-visible .bounty-point{animation:popIn .5s ease forwards}
    .bug-bounty-card.is-visible .bp1{animation-delay:.25s}
    .bug-bounty-card.is-visible .bp2{animation-delay:.45s}
    .bug-bounty-card.is-visible .bp3{animation-delay:.65s}
    .bug-bounty-card.is-visible .bounty-label{animation:fadeIn .5s ease forwards}
    .bug-bounty-card.is-visible .bl1{animation-delay:.3s}
    .bug-bounty-card.is-visible .bl2{animation-delay:.5s}
    .bug-bounty-card.is-visible .bl3{animation-delay:.7s}

    /* ===== Hero & Threat Map ===== */
    .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(0,221,178,.12);color:var(--accent);font-size:.86rem;font-weight:700;margin-bottom:18px}
    .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
    .hero-text h1{font-size:clamp(2.7rem,5.4vw,4.9rem);line-height:1.02;margin:0 0 12px;letter-spacing:-.04em;font-weight:bold;}
    .hero-text h1 .accent{display:block;color:var(--accent)}
    .hero-text p{max-width:680px;color:#d0dfeb;font-size:1.16rem;margin:22px 0 24px}
    .hero-micro{color:#a8c8d8;font-size:.98rem;font-weight:700;margin-bottom:22px}
    .threat-embed-card, .threat-card{border:1px solid #1b4363;border-radius:28px;background:#0a1422;padding:24px;min-height:560px;overflow:hidden}
    .threat-embed-card h3, .threat-card h3{margin:0 0 10px;font-size:1.55rem}
    .threat-sub{color:#7fb4c7;font-size:.95rem;margin-bottom:14px}
    .live-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(0,221,178,.10);color:var(--accent);font-size:.85rem;font-weight:700;margin-bottom:14px}
    .live-pill::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(0,221,178,.5);animation:pulse 1.8s infinite}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,221,178,.5)}70%{box-shadow:0 0 0 10px rgba(0,221,178,0)}100%{box-shadow:0 0 0 0 rgba(0,221,178,0)}}
    .threat-frame-wrap{width:100%;height:420px;border-radius:20px;overflow:hidden;border:1px solid #1d4d70;background:#05070d}
    .threat-frame-wrap iframe{width:100%;height:100%;border:none;background:#05070d}
    .frame-fallback{margin-top:16px;padding:16px;border-radius:18px;background:#10263a;border:1px solid var(--border-2);color:#dceaf4;font-size:.92rem}

    /* ===== Buttons & Actions ===== */
    .hero-actions, .section-actions, .blog-actions, .cta-actions, .udemy-actions{display:flex;gap:16px;flex-wrap:wrap}
    .hero-actions{margin-bottom:24px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;padding:14px 22px;border-radius:18px;font-weight:700;font-size:1rem;transition:transform .2s ease}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--accent);color:#042d27}
    .btn-secondary{background:var(--button-dark);color:#edf9ff;border:1px solid #24547c}

    /* ===== Lists ===== */
    .hero-list, .chart-side ul, .blog-meta, .e-list, .bounty-list, .bullet-list, .meta-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
    .hero-list li, .chart-side li, .blog-meta li, .e-list li, .bounty-list li, .bullet-list li, .meta-list li{display:flex;align-items:flex-start;gap:12px;color:#d8e7f2}
    .hero-list li::before, .chart-side li::before, .blog-meta li::before, .e-list li::before, .bounty-list li::before, .bullet-list li::before, .meta-list li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:7px}

    /* ===== Typography & References ===== */
    .section-head{margin-bottom:24px}
    .section-title{margin:0 0 10px;font-size:clamp(2rem,2.9vw,2.7rem);letter-spacing:-.02em;font-weight:bold;}
    .section-lead{margin:0 0 28px;color:var(--muted);max-width:930px;font-size:1.05rem}
    .reference-line{margin-top:-10px;margin-bottom:20px;color:var(--soft);font-size:.95rem}
    .reference-link, .text-link, .footer-link, .udemy-link, .blog-link{color:#cfeaf5;text-decoration:underline;text-underline-offset:3px}
    .small-ref{margin-top:14px;color:var(--soft);font-size:.94rem}
    .ref-title, .hover-title{margin-top:18px;margin-bottom:12px;color:#8fc5da;font-size:.95rem;font-weight:700}
    .ref-card{border:1px solid #204d70;border-radius:14px;background:#0d2138;padding:14px 12px;margin-bottom:12px;color:#cfe9f7;font-size:.88rem}
    .blog-badge{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(0,221,178,.12);color:var(--accent);font-weight:700;font-size:.9rem;margin-bottom:14px}
    .micro-tag{display:inline-block;padding:8px 10px;border-radius:999px;background:rgba(0,221,178,.12);color:var(--accent);font-size:.84rem;font-weight:700;margin-bottom:12px}

    /* ===== Grids ===== */
    .grid-3, .grid-4, .grid-5, .grid-2, .stats-grid, .feature-grid, .testimonial-grid, .about-mini-grid, .emerging-grid, .bounty-grid{display:grid;gap:22px}
    .grid-5, .stats-grid{grid-template-columns:repeat(5,1fr);margin-bottom:36px}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    .grid-3, .feature-grid, .testimonial-grid, .about-mini-grid{grid-template-columns:repeat(3,1fr)}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    .bounty-grid{grid-template-columns:1.15fr .85fr;align-items:start}
    .bounty-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .blog-preview-grid, .blog-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
    .blog-mini-grid{display:grid;gap:18px}
    .emerging-grid{grid-template-columns:repeat(3,1fr)}
    .hover-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

    /* ===== Cards ===== */
    .card, .stat-card, .bounty-stat-card, .feature-card, .testimonial-card, .about-mini-card, .emerging-item, .blog-card, .blog-mini-card, .bounty-visual, .trend-box{
        background:rgba(13,27,46,.95);border:1px solid var(--border-2);border-radius:24px;padding:22px;box-shadow:var(--shadow)
    }
    .stat-card small, .bounty-stat-card small{color:#87aec4;display:block;margin-bottom:16px;font-size:.95rem}
    .stat-card span, .bounty-stat-card span{color:#a9c0d0;display:block;margin-bottom:6px}
    .stat-card strong, .bounty-stat-card strong{color:var(--accent);font-size:2.05rem;line-height:1.1;display:block;min-height:48px}
    .feature-card h3, .testimonial-card h3, .blog-card h3, .blog-mini-card h3, .emerging-item h3, .demo-card h3, .path-card h3, .lab-card h3, .goal-card h3, .community-card h3, .about-card h3{color:var(--accent);font-size:1.42rem;margin:0 0 10px}
    .feature-card p, .testimonial-card p, .about-card p, .udemy-section p, .blog-card p, .blog-mini-card p, .emerging-item p, .card p{margin:0;color:#c7d8e3}
    .blog-card h3{font-size:1.75rem;line-height:1.2}
    .chart-side{background:var(--panel3);border:1px solid var(--border-2);border-radius:20px;padding:22px}
    .chart-side h3{margin:0 0 14px;font-size:1.5rem}
    .bounty-visual, .trend-box{background:var(--panel3);border:1px solid var(--border-2);border-radius:22px;padding:20px}
    .bounty-visual h3, .trend-box h3{margin:0 0 12px;font-size:1.4rem}
    .trend-box .sub, .bounty-visual .sub{color:#88a9be;font-size:.94rem;margin-bottom:14px}
    .testimonial-card small{display:block;margin-bottom:14px;color:#7ea3ba}
    .about-card > p{max-width:1100px;font-size:1.07rem}
    .about-mini-grid{margin-top:30px}
    .about-mini-card p{color:var(--text-1)}
    .emerging-item{background:var(--panel);border-color:var(--border-2)}

    /* ===== Cover & Visuals ===== */
    .cover, .icon-cover{height:205px;border-radius:18px;margin-bottom:16px;border:1px solid #1a4361;background:var(--panel);position:relative;overflow:hidden}
    .cover-title{position:absolute;left:20px;bottom:16px;font-size:1.22rem;font-weight:700;color:#fff}
    .cover.ai::before, .cover.space::before, .cover.auto::before, .icon-cover.ai::before, .icon-cover.space::before, .icon-cover.auto::before{content:"";position:absolute;inset:0}
    .cover.ai::before, .icon-cover.ai::before{background:radial-gradient(circle at 50% 50%, rgba(0,221,178,.08), transparent 35%),linear-gradient(90deg, transparent 49%, rgba(0,221,178,.14) 50%, transparent 51%),linear-gradient(transparent 49%, rgba(0,221,178,.14) 50%, transparent 51%);background-size:auto,52px 100%,100% 34px}
    .cover.space::before, .icon-cover.space::before{background:radial-gradient(circle at 62% 42%, transparent 44px, rgba(0,221,178,.6) 45px, transparent 48px),radial-gradient(circle at 62% 42%, transparent 76px, rgba(29,214,197,.35) 77px, transparent 80px),radial-gradient(circle at 62% 42%, rgba(0,221,178,.08), transparent 55%)}
    .cover.auto::before, .icon-cover.auto::before{background:linear-gradient(transparent 62%, rgba(0,221,178,.12) 62%),linear-gradient(transparent 78%, rgba(0,221,178,.18) 78%),radial-gradient(circle at 50% 70%, rgba(0,221,178,.06), transparent 38%)}
    .brain-node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent)}
    .brain-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border:3px solid var(--accent);border-radius:50%}
    .space-orbit{position:absolute;border-radius:50%;border:2px solid rgba(29,214,197,.6)}
    .auto-car{position:absolute;left:92px;top:84px;width:200px;height:56px;border:2px solid var(--accent);border-radius:14px}
    .auto-wheel{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--accent);top:132px}
    .demo-visual{height:160px;border-radius:18px;margin-bottom:16px;border:1px solid #1a4361;background:#0b1626;position:relative;overflow:hidden}
    .demo-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,221,178,.06), transparent),repeating-linear-gradient(90deg, rgba(0,221,178,.08) 0 1px, transparent 1px 40px),repeating-linear-gradient(0deg, rgba(0,221,178,.08) 0 1px, transparent 1px 34px)}
    .terminal-line{position:absolute;height:4px;background:var(--accent);border-radius:999px}

    /* ===== Animations & Charts ===== */
    .chart-animate polyline, .chart-animate .point, .chart-animate .label, .bounty-line, .bounty-point, .bounty-label{opacity:0;transform-origin:left bottom}
    .chart-card.is-visible .chart-animate polyline, .trend-shell.is-visible .chart-animate polyline, .bounty-shell.is-visible .bounty-line{animation:fadeIn .6s ease .2s forwards}
    .chart-card.is-visible .chart-animate .point, .trend-shell.is-visible .chart-animate .point, .bounty-shell.is-visible .bounty-point{animation:popIn .5s ease forwards}
    .chart-card.is-visible .chart-animate .p1, .trend-shell.is-visible .chart-animate .p1{animation-delay:.25s}
    .chart-card.is-visible .chart-animate .p2, .trend-shell.is-visible .chart-animate .p2{animation-delay:.4s}
    .chart-card.is-visible .chart-animate .p3, .trend-shell.is-visible .chart-animate .p3{animation-delay:.55s}
    .chart-card.is-visible .chart-animate .p4, .trend-shell.is-visible .chart-animate .p4{animation-delay:.7s}
    .chart-card.is-visible .chart-animate .p5, .trend-shell.is-visible .chart-animate .p5{animation-delay:.85s}
    .chart-card.is-visible .chart-animate .label, .trend-shell.is-visible .chart-animate .label, .bounty-shell.is-visible .bounty-label{animation:fadeIn .5s ease forwards}
    .chart-card.is-visible .chart-animate .l1, .trend-shell.is-visible .chart-animate .l1{animation-delay:.3s}
    .chart-card.is-visible .chart-animate .l2, .trend-shell.is-visible .chart-animate .l2{animation-delay:.45s}
    .chart-card.is-visible .chart-animate .l3, .trend-shell.is-visible .chart-animate .l3{animation-delay:.6s}
    .chart-card.is-visible .chart-animate .l4, .trend-shell.is-visible .chart-animate .l4{animation-delay:.75s}
    .chart-card.is-visible .chart-animate .l5, .trend-shell.is-visible .chart-animate .l5{animation-delay:.9s}
    .bug-bounty-card.is-visible .bounty-line{animation:fadeIn .6s ease .2s forwards}
    .bug-bounty-card.is-visible .bounty-point{animation:popIn .5s ease forwards}
    .bug-bounty-card.is-visible .bp1, .bounty-shell.is-visible .bp1{animation-delay:.25s}
    .bug-bounty-card.is-visible .bp2, .bounty-shell.is-visible .bp2{animation-delay:.45s}
    .bug-bounty-card.is-visible .bp3, .bounty-shell.is-visible .bp3{animation-delay:.65s}
    .bug-bounty-card.is-visible .bounty-label, .bounty-shell.is-visible .bounty-label{animation:fadeIn .5s ease forwards}
    .bug-bounty-card.is-visible .bl1, .bounty-shell.is-visible .bl1{animation-delay:.3s}
    .bug-bounty-card.is-visible .bl2, .bounty-shell.is-visible .bl2{animation-delay:.5s}
    .bug-bounty-card.is-visible .bl3, .bounty-shell.is-visible .bl3{animation-delay:.7s}
    @keyframes fadeIn{to{opacity:1}}
    @keyframes popIn{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}

    /* ===== Special Components ===== */
    .proof-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:22px}
    .proof-item{border:1px solid var(--border2);background:rgba(16,38,58,.9);border-radius:18px;padding:16px}
    .proof-item strong{display:block;color:var(--accent);font-size:1.7rem;line-height:1}
    .proof-item span{display:block;color:#b9ccda;font-size:.9rem;margin-top:8px}
    .challenge-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
    .course-panel{background:#0a1422;border:1px solid #1b4363;border-radius:26px;padding:22px}
    .course-panel h3{margin:0 0 12px;color:var(--accent);font-size:1.6rem}
    .course-meta{display:grid;gap:10px;margin:16px 0}
    .course-meta div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(31,84,119,.55);padding-bottom:10px;color:#cfe3ee}
    .course-meta strong{color:var(--text)}
    .phase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
    .phase-card{position:relative;overflow:hidden}
    .phase-card::after{content:"";position:absolute;right:-24px;top:-24px;width:80px;height:80px;border-radius:50%;background:rgba(0,221,178,.08)}
    .phase-card small{display:inline-block;color:#88b2c8;margin-bottom:10px}
    .phase-card h3{color:var(--accent)}
    .compare-table{width:100%;border-collapse:separate;border-spacing:0 12px}
    .compare-table th{text-align:left;color:#8fc5da;font-size:.95rem;padding:0 14px}
    .compare-table td{background:#10263a;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:16px 14px;color:#d8e7f2}
    .compare-table td:first-child{border-left:1px solid var(--border2);border-radius:16px 0 0 16px}
    .compare-table td:last-child{border-right:1px solid var(--border2);border-radius:0 16px 16px 0}
    .good{color:var(--accent);font-weight:700}
    .bad{color:#ff8d86;font-weight:700}
    .mentor-card, .founder-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:center}
    .mentor-visual, .founder-photo{min-height:320px;border-radius:24px;border:1px solid var(--border2);background:radial-gradient(circle at 50% 30%, rgba(0,221,178,.18), transparent 90px),linear-gradient(135deg,#0a1422,#10263a);position:relative;overflow:hidden}
    .mentor-visual::before{content:"V";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:8rem;font-weight:900;color:rgba(0,221,178,.28)}
    .mentor-visual::after{content:"Founder-led practical training";position:absolute;left:24px;right:24px;bottom:24px;color:#dff7ef;font-weight:700;font-size:1.2rem}
    .founder-photo{background:radial-gradient(circle at 50% 35%,rgba(0,221,178,.18),transparent 95px),linear-gradient(145deg,#0a1422,#10263a);display:flex;align-items:center;justify-content:center;color:#88a9be;font-weight:700;text-align:center;padding:24px}
    .funnel-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .funnel-steps .card{border-color:#24547c}
    .urgent-box{border:1px solid rgba(240,74,67,.55);background:linear-gradient(135deg,rgba(240,74,67,.12),rgba(0,221,178,.08));border-radius:24px;padding:22px;margin-top:22px}
    .urgent-box strong{color:#ffaaa5}
    .conversion-band{background:linear-gradient(135deg,rgba(0,221,178,.12),rgba(240,74,67,.08));border:1px solid var(--border2);border-radius:24px;padding:22px;margin-top:20px}
    .conversion-band strong{color:var(--accent)}
    .proof-panel{border:1px dashed #2b6c8f;border-radius:18px;background:rgba(16,38,58,.72);padding:18px;color:#c7d8e3;min-height:140px;display:flex;flex-direction:column;justify-content:center}
    .proof-panel strong{color:var(--accent);display:block;margin-bottom:8px}
    .offer-stack{display:grid;grid-template-columns:1fr 1fr;gap:22px}
    .offer-stack .card{border-color:#265f82}
    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
    .faq-card h3{color:var(--accent)}
    .urgency-card{border:1px solid rgba(0,221,178,.35);background:linear-gradient(135deg,rgba(0,221,178,.14),rgba(13,27,46,.96));border-radius:24px;padding:26px;display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:center}
    .seat-box{background:#0a1422;border:1px solid var(--border2);border-radius:20px;padding:20px;text-align:center}
    .seat-box strong{display:block;color:var(--accent);font-size:2rem}
    .seat-box span{color:#b8cad8}
    .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .trust-proof-card{min-height:190px;border-style:dashed;border-color:#2b6c8f;background:linear-gradient(180deg,rgba(16,38,58,.92),rgba(13,27,46,.95))}
    .trust-proof-card .proof-slot{height:88px;border-radius:16px;background:rgba(0,221,178,.08);border:1px solid rgba(0,221,178,.22);display:flex;align-items:center;justify-content:center;color:#90b3c7;font-weight:700;margin-bottom:16px;text-align:center;padding:12px}
    .lead-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
    .lead-form{background:rgba(16,38,58,.88);border:1px solid var(--border2);border-radius:24px;padding:22px}
    .lead-form label{display:block;color:#c7d8e3;font-weight:700;margin-bottom:8px}
    .lead-form input{width:100%;border:1px solid #24547c;background:#08111f;color:var(--text);border-radius:16px;padding:15px 16px;margin-bottom:14px;font-size:1rem}
    .lead-note{color:#8fb0c4;font-size:.9rem;margin-top:12px}
    .lead-benefit{display:grid;gap:12px;margin-top:18px}
    .lead-benefit div{border:1px solid #204d70;border-radius:16px;background:#0d2138;padding:14px;color:#d8e7f2}
    .countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
    .countdown-box{border:1px solid var(--border2);border-radius:18px;background:rgba(0,221,178,.08);padding:16px;text-align:center}
    .countdown-box strong{display:block;color:var(--accent);font-size:1.9rem;line-height:1}
    .countdown-box span{display:block;color:#a8c8d8;font-size:.84rem;margin-top:6px}

    /* ===== Responsive ===== */
    @media (max-width:1200px){
        .hero-card, .chart-card, .blog-preview-grid, .bounty-grid, .trend-shell, .blog-grid, .grid-5, .grid-4, .grid-3, .grid-2, .challenge-hero, .phase-grid, .proof-strip, .mentor-card, .funnel-steps, .founder-shell, .offer-stack, .faq-grid, .urgency-card, .trust-grid, .lead-shell, .countdown-grid{
            grid-template-columns:1fr
        }
        .stats-grid, .bounty-stats, .hover-stats{grid-template-columns:1fr}
        .emerging-grid, .feature-grid, .testimonial-grid, .about-mini-grid{grid-template-columns:1fr}
    }
    @media (max-width:900px){
        .header-inner{flex-direction:column;align-items:flex-start}
        .hero-card, .stats-section, .chart-card, .bug-bounty-card, .about-card, .cta-card, .emerging-section, .udemy-section, .blog-preview-section, .shell{padding:24px}
        .stats-grid, .bounty-stats{grid-template-columns:1fr}
        .nav{gap:14px;font-size:.86rem}
        .threat-frame-wrap{height:320px}
    }
    @media (max-width:640px){
        .container{width:min(calc(100% - 24px), var(--container))}
        .site-header{padding-top:18px}
        .hero-text h1{font-size:2.4rem}
        .brand-copy strong{font-size:1.7rem}
        .btn{width:100%}
    }