/* =====================================================
   HeroicGamez - Global Stylesheet
   Optimized for SEO, Performance & Core Web Vitals
   ===================================================== */

/* =========================
   1. CSS RESET (Lightweight)
   ========================= */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     min-height: 100vh;
     line-height: 1.6;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
     background-color: #0b1220;
     color: #e5e7eb;
     text-rendering: optimizeLegibility;
   }
   
   /* =========================
      2. TYPOGRAPHY (SEO-friendly)
      ========================= */
   h1, h2, h3, h4, h5, h6 {
     line-height: 1.25;
     font-weight: 700;
     color: #ffffff;
   }
   
   h1 { font-size: 2.25rem; }
   h2 { font-size: 1.75rem; }
   h3 { font-size: 1.4rem; }
   
   p {
     margin-bottom: 1rem;
     max-width: 75ch;
   }
   
   a {
     color: #38bdf8;
     text-decoration: none;
   }
   
   a:hover {
     text-decoration: underline;
   }
   
   /* =========================
      3. LAYOUT UTILITIES
      ========================= */
   .container {
     width: 100%;
     max-width: 1200px;
     margin-inline: auto;
     padding: 1.25rem;
   }
   
   .grid {
     display: grid;
     gap: 1.25rem;
   }
   
   .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
   .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
   
   .hg-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

   
   .center {
     text-align: center;
   }
   
   /* =========================
      4. NAVIGATION
      ========================= */
   .navbar {
     background: #020617;
     border-bottom: 1px solid #1e293b;
   }
   
   .navbar a {
     color: #e5e7eb;
     font-weight: 500;
   }
   
   .navbar a:hover {
     color: #38bdf8;
   }
   
   /* =========================
      5. BUTTONS (Fast Render)
      ========================= */
   .btn {
     display: inline-block;
     padding: 0.6rem 1.1rem;
     border-radius: 6px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     transition: background 0.15s ease;
   }
   
   .btn-primary {
     background: #22c55e;
     color: #052e16;
   }
   
   .btn-primary:hover {
     background: #16a34a;
   }
   
   .btn-outline {
     background: transparent;
     border: 1px solid #334155;
     color: #e5e7eb;
   }
   
   .btn-outline:hover {
     background: #020617;
   }
   
   /* =========================
      6. CARDS (Hosting Plans)
      ========================= */
   .card {
     background: #020617;
     border: 1px solid #1e293b;
     border-radius: 10px;
     padding: 1.25rem;
     transition: transform 0.15s ease;
   }
   
   .card:hover {
     transform: translateY(-3px);
   }
   
   /* =========================
      7. TABLES (Comparison Pages)
      ========================= */
   table {
     width: 100%;
     border-collapse: collapse;
   }
   
   th, td {
     padding: 0.75rem;
     border-bottom: 1px solid #1e293b;
     text-align: left;
   }
   
   th {
     background: #020617;
   }
   
   /* =========================
      8. PERFORMANCE HELPERS
      ========================= */
   img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   .lazy {
     content-visibility: auto;
   }
   
   /* =========================
      9. FOOTER
      ========================= */
   footer {
     background: #020617;
     border-top: 1px solid #1e293b;
     margin-top: 3rem;
     padding: 2rem 1rem;
     font-size: 0.9rem;
     color: #94a3b8;
   }
   
   /* =========================
      10. RESPONSIVE (Mobile First)
      ========================= */
   @media (max-width: 768px) {
     h1 { font-size: 1.9rem; }
     h2 { font-size: 1.5rem; }
   }

   .img-responsive {
    max-width: 100%;
    height: auto;
  }

.pricing-item,
.pricing-item * {
  text-align: initial;
}

.pricing-item .text-right,
.pricing-item .text-right * {
  text-align: right;
}

.pricing-item .min-w-0,
.pricing-item .min-w-0 * {
  text-align: left;
}

.pricing-item p {
  max-width: none;
  margin-bottom: 0;
}


body { outline: 10px solid hotpink !important; }