:root {
      --background:      hsl(222, 47%, 8%);
      --card:            hsl(222, 45%, 11%);
      --foreground:      hsl(40, 30%, 96%);
      --muted-fg:        hsl(220, 15%, 65%);
      --border:          hsl(222, 35%, 22%);
      --primary:         hsl(43, 67%, 56%);
      --primary-fg:      hsl(222, 60%, 10%);
      --glass-bg:        hsla(222, 45%, 14%, 0.6);
      --gradient-start:  hsl(43, 70%, 60%);
      --gradient-end:    hsl(38, 75%, 48%);
      --neon-glow:       0 0 10px hsl(43 67% 56% / 0.55), 0 0 40px hsl(43 67% 56% / 0.25);
      --icon-glow:       0 0 18px hsl(43 67% 56% / 0.4);
    }
	main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}
/* ── HERO TEXT ── */ 
    .page-hero {
      text-align: center;
      margin-bottom: 3rem;
      animation: fadeUp 0.55s ease both;
	  padding-top: 40px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.375rem 1rem;
      border-radius: 9999px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: var(--primary-fg);
      margin-bottom: 1.25rem;
    }
    h1 {
      font-family: 'Manrope', sans-serif;
      font-size: clamp(1.875rem, 5vw, 3rem);
      font-weight: 800;
      line-height: 1.15;
      color: var(--foreground);
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
    }
    h1 .highlight {
      color: var(--primary);
      text-shadow: var(--neon-glow);
    }
    .hero-sub {
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      color: var(--muted-fg);
      max-width: 42rem;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── FEATURE GRID ── */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 3rem;
    }
    @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

    .feature-card {
      background: var(--glass-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid hsla(222, 35%, 22%, 0.5);
      border-radius: 1rem;
      padding: 1.5rem;
      transition: border-color 0.2s;
      animation: fadeUp 0.5s ease both;
    }
    .feature-card:hover { border-color: hsla(43, 67%, 56%, 0.4); }

    .feature-icon {
      width: 44px; height: 44px;
      border-radius: 0.75rem;
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem;
      box-shadow: var(--icon-glow);
      flex-shrink: 0;
    }
    .feature-icon svg {
      width: 20px; height: 20px;
      stroke: var(--primary-fg);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feature-title {
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--foreground);
      margin-bottom: 0.375rem;
    }
    .feature-desc {
      font-size: 0.8125rem;
      color: var(--muted-fg);
      line-height: 1.65;
    }

    /* ── CTA SECTION ── */
    .cta-section {
      background: var(--glass-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid hsla(222, 35%, 22%, 0.5);
      border-radius: 1rem;
      padding: 2.5rem 2rem;
      text-align: center;
      animation: fadeUp 0.5s 0.55s ease both;
    }
    .cta-section h2 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--foreground);
      margin-bottom: 0.5rem;
      letter-spacing: -0.02em;
    }
    .cta-section p {
      font-size: 0.875rem;
      color: var(--muted-fg);
      margin-bottom: 1.5rem;
    }
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.75rem 1.75rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 600;
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: var(--primary-fg);
      border: none;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 0 20px hsla(43, 67%, 56%, 0.35);
      animation: pulseglow 2.5s ease-in-out infinite;
      transition: opacity 0.15s;
    }
    .btn-cta:hover { opacity: 0.9; color: var(--primary-fg);}
	.feature-card{
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
}

   /* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card{
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

/* stagger cards */
.feature-card:nth-child(1){ animation-delay: .05s; }
.feature-card:nth-child(2){ animation-delay: .10s; }
.feature-card:nth-child(3){ animation-delay: .15s; }
.feature-card:nth-child(4){ animation-delay: .20s; }
.feature-card:nth-child(5){ animation-delay: .25s; }
.feature-card:nth-child(6){ animation-delay: .30s; }
.feature-card:nth-child(7){ animation-delay: .35s; }
.feature-card:nth-child(8){ animation-delay: .40s; }
.feature-card:nth-child(9){ animation-delay: .45s; }

@media screen and (max-width:767px) {
.page-hero {
    margin-top: 30px;
}
}