/*
 Theme Name:   GeneratePress Child - Neo Brutalism
 Theme URI:    https://malwarebusters.id
 Description:  Child theme dari GeneratePress dengan desain Neo-Brutalism. 
               Mengadopsi estetika garis tebal, shadow offset, tipografi berat, 
               dan warna blok solid yang bold.
 Author:       MalwareBusters
 Author URI:   https://malwarebusters.id
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  generatepress-child
 Tags:         neo-brutalism, bold, malware, security
*/

/* ==========================================================
   1. IMPORT GOOGLE FONTS
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==========================================================
   2. CSS VARIABLES (Design Tokens)
   ========================================================== */
:root {
  /* Warna Utama */
  --nb-primary:        #1a1a1a;   /* Hitam utama */
  --nb-primary-light:  #2d2d2d;   /* Hitam agak terang */
  --nb-accent:         #FFD600;   /* Kuning mencolok */
  --nb-accent-hover:   #FFC400;
  --nb-secondary:      #FF6B35;   /* Oranye aksen */
  --nb-danger:         #F03A30;   /* Merah seperti di React */
  --nb-bg:             #FFFDF7;   /* Off-white / krem */
  --nb-card:           #FFFFFF;
  --nb-text:           #1a1a1a;
  --nb-text-muted:     #555555;

  /* Border & Shadow */
  --nb-border-width:   3px;
  --nb-border:         var(--nb-border-width) solid var(--nb-primary);
  --nb-radius:         0px;       /* Neo-brutal = no border radius */

  --nb-shadow-sm:      3px 3px 0 var(--nb-primary);
  --nb-shadow:         5px 5px 0 var(--nb-primary);
  --nb-shadow-lg:      8px 8px 0 var(--nb-primary);

  /* Tipografi */
  --nb-font:           'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --nb-font-heading:   'Archivo Black', 'Space Grotesk', sans-serif;
  --nb-font-size-base: 16px;

  /* Container — sama persis dengan proyek React (Tailwind: max-width 1400px, padding 2rem) */
  --nb-container:      1400px;
  --nb-container-pad:  2rem;      /* 32px kiri + kanan = 64px total */

  /* Section padding */
  --nb-section-pad:    80px 0;

  /* Transition */
  --nb-transition:     transform 0.1s ease, box-shadow 0.1s ease;
}

/* ==========================================================
   3. RESET & BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family:      var(--nb-font);
  font-size:        var(--nb-font-size-base);
  background-color: var(--nb-bg);
  color:            var(--nb-text);
  line-height:      1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--nb-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover {
  opacity: 0.75;
}

/* ==========================================================
   4. TIPOGRAFI
   ========================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--nb-font-heading);
  font-weight:    900;
  letter-spacing: -0.02em;
  margin-top:     0;
  margin-bottom:  1rem;
  color:          var(--nb-primary);
  line-height:    1.15;
  text-transform: uppercase;
}

h1 { font-size: clamp(2rem,   5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1rem;
  max-width: 70ch;
}

strong, b {
  font-weight: 700;
}

/* ==========================================================
   5. UTILITY CLASSES (Neo-Brutalism System)
   ========================================================== */

/* --- Border --- */
.nb-border {
  border:  var(--nb-border);
  border-radius: var(--nb-radius);
}

/* --- Shadow --- */
.nb-shadow-sm { box-shadow: var(--nb-shadow-sm); }
.nb-shadow    { box-shadow: var(--nb-shadow);    }
.nb-shadow-lg { box-shadow: var(--nb-shadow-lg); }

/* --- Card / Box --- */
.nb-card {
  background:   var(--nb-card);
  border:       var(--nb-border);
  box-shadow:   var(--nb-shadow);
  padding:      2rem;
  border-radius: var(--nb-radius);
}

/* --- Hover Effect (shift + shadow grow) --- */
.nb-hover {
  transition: var(--nb-transition);
  cursor: pointer;
}
.nb-hover:hover {
  transform:  translate(-3px, -3px);
  box-shadow: var(--nb-shadow-lg);
}

/* --- Tag / Badge --- */
.nb-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  border:         var(--nb-border);
  box-shadow:     var(--nb-shadow-sm);
  background:     var(--nb-accent);
  color:          var(--nb-primary);
  font-weight:    700;
  font-size:      0.8rem;
  padding:        4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius:  var(--nb-radius);
}

/* ==========================================================
   6. BUTTONS
   ========================================================== */
.nb-btn,
.button,
button[type="submit"],
input[type="submit"] {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  font-family:      var(--nb-font);
  font-weight:      700;
  font-size:        1rem;
  text-transform:   uppercase;
  letter-spacing:   0.5px;
  padding:          14px 28px;
  border:           var(--nb-border);
  box-shadow:       var(--nb-shadow);
  border-radius:    var(--nb-radius);
  cursor:           pointer;
  transition:       var(--nb-transition);
  text-decoration:  none;
}

/* Primary Button */
.nb-btn,
.nb-btn-primary,
.button {
  background: var(--nb-primary);
  color:      var(--nb-accent);
}

.nb-btn:hover,
.nb-btn-primary:hover,
.button:hover {
  transform:  translate(-3px, -3px);
  box-shadow: var(--nb-shadow-lg);
  color:      var(--nb-accent);
  opacity:    1;
}

/* Accent Button (kuning) */
.nb-btn-accent {
  background: var(--nb-accent);
  color:      var(--nb-primary);
}
.nb-btn-accent:hover {
  transform:  translate(-3px, -3px);
  box-shadow: var(--nb-shadow-lg);
  color:      var(--nb-primary);
  opacity:    1;
}

/* Outline Button */
.nb-btn-outline {
  background: transparent;
  color:      var(--nb-primary);
  border:     var(--nb-border);
}
.nb-btn-outline:hover {
  background: var(--nb-primary);
  color:      var(--nb-accent);
  transform:  translate(-3px, -3px);
  box-shadow: var(--nb-shadow-lg);
  opacity:    1;
}

/* WhatsApp Button */
.nb-btn-wa {
  background: #25D366;
  color:      #fff;
  border-color: #1DA851;
}
.nb-btn-wa:hover {
  background: #1DA851;
  color:      #fff;
  transform:  translate(-3px, -3px);
  box-shadow: var(--nb-shadow-lg);
  opacity:    1;
}

/* ==========================================================
   7. LAYOUT - GENERATEPRESS FULL-WIDTH OVERRIDE
   ========================================================== */

/* Hapus constraint width bawaan GP di level site */
.site,
.site-inner,
.inside-site-inner {
  max-width: none !important;
  padding:   0 !important;
}

/* Hapus padding artikel GP agar template PHP kita yang kontrol */
.inside-article,
.entry-content,
.page-content {
  padding:    0 !important;
  max-width:  none !important;
  margin-bottom: 0 !important;
}

/* Content area full width, tanpa sidebar */
.content-area,
#primary {
  width:     100% !important;
  max-width: none !important;
  float:     none !important;
}

.site-content {
  padding:    0 !important;
  overflow-x: hidden;
}

.site-main {
  margin: 0 !important;
}

/* Container konten — mengikuti breakpoint Tailwind persis seperti React project dengan !important */
.grid-container {
  width:         100% !important;
  padding-left:  var(--nb-container-pad) !important;
  padding-right: var(--nb-container-pad) !important;
  margin-left:   auto !important;
  margin-right:  auto !important;
}

/* sm: 640px */
@media (min-width: 640px) {
  .grid-container { max-width: 640px !important; }
}
/* md: 768px */
@media (min-width: 768px) {
  .grid-container { max-width: 768px !important; }
}
/* lg: 1024px */
@media (min-width: 1024px) {
  .grid-container { max-width: 1024px !important; }
}
/* xl: 1280px */
@media (min-width: 1280px) {
  .grid-container { max-width: 1200px !important; }
}
/* 2xl: 1536px */
@media (min-width: 1536px) {
  .grid-container { max-width: 1200px !important; }
}

/* site-container GP (header/footer) biarkan full width */
.site-container {
  max-width: none;
  padding:   0;
}

/* ==========================================================
   7b. LUCIDE SVG ICON STYLES
   ========================================================== */
.nb-icon {
  display:        inline-block;
  vertical-align: middle;
  flex-shrink:    0;
}

.nb-icon svg {
  display: block;
}

/* Icon di dalam feature card */
.nb-feature-card__icon .nb-icon svg,
.nb-feature-card__icon svg {
  width:  40px;
  height: 40px;
  color:  var(--nb-danger);
}

/* Icon di dalam step */
.nb-step__icon .nb-icon svg,
.nb-step__icon svg {
  width:  40px;
  height: 40px;
  color:  var(--nb-danger);
}

/* Icon di dalam hero badge */
.nb-hero__badge .nb-icon svg {
  width:  16px;
  height: 16px;
}

/* Icon di dalam button */
.nb-btn .nb-icon svg,
.nb-btn svg {
  width:  20px;
  height: 20px;
}

/* Icon check di feature list */
.nb-pricing-card__features li .nb-icon svg {
  width:  18px;
  height: 18px;
  color:  var(--nb-accent);
}

/* Icon stats hero */
.nb-hero__stat .nb-icon svg {
  width:  18px;
  height: 18px;
  color:  var(--nb-accent);
}

/* Icon clock di pricing duration */
.nb-pricing-card__duration .nb-icon svg {
  width:  16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ==========================================================
   8. CUSTOM HEADER (100% REACT CLONE)
   ========================================================== */
.nb-custom-header {
  background:     var(--nb-bg);
  border-bottom:  var(--nb-border);
  position:       sticky;
  top:            0;
  z-index:        999;
}

.nb-custom-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     1rem;
  padding-bottom:  1rem;
}

.nb-logo {
  display:      flex;
  align-items:  center;
  gap:          0.5rem;
  font-family:  var(--nb-font-heading);
  font-weight:  900;
  font-size:    1.25rem;
  color:        var(--nb-text);
  text-decoration: none;
}

.nb-logo__icon {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  background:   var(--nb-danger);
  color:        #fff;
  padding:      0.5rem;
  border:       var(--nb-border);
  box-shadow:   var(--nb-shadow-sm);
}

.nb-nav-links {
  display:      none; /* Hidden by default (mobile) */
  align-items:  center;
  gap:          1.5rem;
  font-weight:  600;
}

@media (min-width: 768px) {
  .nb-nav-links {
    display: flex;
  }
}

.nb-nav-link {
  color:           var(--nb-text);
  text-decoration: none;
  text-underline-offset: 4px;
}

.nb-nav-link:hover {
  text-decoration: underline;
}

.nb-btn-nav {
  font-family:  var(--nb-font);
  font-weight:  700;
  border-radius: 0;
  padding:      0.5rem 1rem;
  background:   var(--nb-primary);
  color:        #fff;
  border:       var(--nb-border);
  box-shadow:   var(--nb-shadow-sm);
  text-decoration: none;
  transition:   transform 0.15s, box-shadow 0.15s;
}

.nb-btn-nav:hover {
  transform:  translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--nb-text);
}

.nb-custom-footer {
  background: var(--nb-bg);
  border-top: var(--nb-border);
  padding:    2rem 0;
  margin-top: auto;
}

/* Reset wrapper site-footer bawaan GeneratePress */
.site-footer {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--nb-text) !important;
}

/* ==========================================================
   9. HERO SECTION
   ========================================================== */
.nb-hero {
  padding:         var(--nb-section-pad);
  background:      var(--nb-bg);
  border-bottom:   var(--nb-border);
}

.nb-hero__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         3rem;
  align-items: center;
}

.nb-hero__badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  border:         var(--nb-border);
  box-shadow:     var(--nb-shadow-sm);
  background:     var(--nb-secondary);
  color:          #fff;
  font-weight:    700;
  font-size:      0.8rem;
  padding:        4px 12px;
  text-transform: uppercase;
  margin-bottom:  1.25rem;
}

.nb-hero__title {
  font-family:    var(--nb-font-heading);
  font-size:      clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight:    900;
  line-height:    1.1;
  text-transform: uppercase;
  margin-bottom:  1.25rem;
}

.nb-hero__title mark {
  background:  var(--nb-accent);
  color:       var(--nb-primary);
  padding:     0 8px;
  display:     inline-block;
  border:      var(--nb-border);
  box-shadow:  var(--nb-shadow-sm);
  transform:   rotate(-1deg);
}

.nb-hero__desc {
  font-size:    1.1rem;
  line-height:  1.7;
  margin-bottom: 2rem;
  max-width:    52ch;
}

.nb-hero__cta {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
}

.nb-hero__stats {
  display:     flex;
  flex-wrap:   wrap;
  gap:         1.5rem;
  margin-top:  1.5rem;
  font-size:   0.875rem;
  font-weight: 600;
}

.nb-hero__stat {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.nb-hero__stat::before {
  content:     "✓";
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  width:       20px;
  height:      20px;
  border:      2px solid var(--nb-primary);
  background:  var(--nb-accent);
  font-weight: 700;
  font-size:   0.75rem;
  flex-shrink: 0;
}

/* Mock Terminal (visual card di hero) */
.nb-hero__visual {
  position: relative;
}

.nb-terminal {
  border:       var(--nb-border);
  box-shadow:   var(--nb-shadow-lg);
  background:   var(--nb-card);
  padding:      1.5rem;
  transform:    rotate(2deg);
}

.nb-hero__bug-badge {
  position:     absolute;
  bottom:       -1.5rem;
  left:         -1.5rem;
  background:   var(--nb-danger);
  color:        #fff;
  padding:      1rem;
  border:       var(--nb-border);
  box-shadow:   var(--nb-shadow);
  transform:    rotate(-3deg);
  display:      none; /* Hidden di mobile by default */
}

@media (min-width: 640px) {
  .nb-hero__bug-badge {
    display:    block;
  }
}

.nb-hero__bug-badge p {
  font-family:  var(--nb-font-heading);
  font-weight:  900;
  font-size:    0.875rem;
  margin:       0;
}

.nb-terminal__bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 1rem;
}

.nb-terminal__dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  border:        2px solid var(--nb-primary);
}

.nb-terminal__dot--red    { background: #FF5F57; }
.nb-terminal__dot--yellow { background: #FFBD2E; }
.nb-terminal__dot--green  { background: #28C840; }

.nb-terminal__filename {
  font-family:  monospace;
  font-size:    0.75rem;
  margin-left:  8px;
  color:        var(--nb-text-muted);
}

.nb-terminal__body {
  font-family: monospace;
  font-size:   0.875rem;
  line-height: 1.8;
}

.nb-terminal__line--danger { color: #CC0000; font-weight: 700; }
.nb-terminal__line--success { color: #1A7A1A; font-weight: 700; }

/* ==========================================================
   10. SECTION BASE
   ========================================================== */
.nb-section {
  padding: var(--nb-section-pad);
}

.nb-section--dark {
  background: var(--nb-primary);
  color:      var(--nb-bg);
}

.nb-section--dark h2,
.nb-section--dark h3,
.nb-section--dark h4 {
  color: var(--nb-bg);
}

.nb-section--accent {
  background:   var(--nb-accent);
  border-top:   var(--nb-border);
  border-bottom: var(--nb-border);
}

.nb-section__header {
  text-align:    center;
  margin-bottom: 3.5rem;
}

.nb-section__title {
  margin-bottom: 1rem;
}

.nb-section__subtitle {
  font-size:  1.1rem;
  max-width:  65ch;
  margin:     0 auto;
  opacity:    0.8;
}

/* ==========================================================
   11. CARDS GRID
   ========================================================== */
.nb-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   1.5rem;
}

.nb-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.nb-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Feature Card */
.nb-feature-card {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow);
  background:    var(--nb-card);
  padding:       1.75rem;
  border-radius: var(--nb-radius);
  transition:    var(--nb-transition);
}

.nb-feature-card:hover {
  transform:  translate(-3px, -3px);
  box-shadow: var(--nb-shadow-lg);
}

.nb-feature-card__icon {
  display:       inline-block;
  margin-bottom: 1rem;
}

.nb-feature-card__title {
  font-size:     1.1rem;
  color:         var(--nb-primary) !important; /* Paksa hitam walaupun di section gelap */
  font-weight:   700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.nb-feature-card__desc {
  font-size: 0.9rem;
  color:     var(--nb-text-muted);
  max-width: none;
}

/* ==========================================================
   12. PRICING CARDS
   ========================================================== */
.nb-pricing-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
  align-items:           start;
}

.nb-pricing-card {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow);
  padding:       2rem;
  position:      relative;
  border-radius: var(--nb-radius);
  background:    var(--nb-card);
}

.nb-pricing-card--featured {
  background:  var(--nb-primary);
  color:       var(--nb-bg);
  transform:   translateY(-12px);
  box-shadow:  var(--nb-shadow-lg);
}

.nb-pricing-card--featured h3,
.nb-pricing-card--featured .nb-pricing-card__price,
.nb-pricing-card--featured li {
  color: var(--nb-bg);
}

.nb-pricing-card__badge {
  position:       absolute;
  top:            -14px;
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--nb-accent);
  color:          var(--nb-primary);
  border:         var(--nb-border);
  box-shadow:     var(--nb-shadow-sm);
  padding:        2px 14px;
  font-weight:    700;
  font-size:      0.75rem;
  text-transform: uppercase;
  white-space:    nowrap;
}

.nb-pricing-card__name {
  font-size:     1.5rem;
  font-weight:   700;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.nb-pricing-card__duration {
  font-size:     0.875rem;
  font-weight:   600;
  opacity:       0.7;
  margin-bottom: 1.25rem;
}

.nb-pricing-card__price {
  font-size:     2.75rem;
  font-weight:   700;
  line-height:   1;
  margin-bottom: 1.5rem;
}

.nb-pricing-card__price span {
  font-size:    1.25rem;
  font-weight:  600;
  vertical-align: super;
}

.nb-pricing-card__features {
  list-style: none;
  padding:    0;
  margin:     0 0 1.75rem;
}

.nb-pricing-card__features li {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size:     0.9rem;
  font-weight:   500;
}

.nb-pricing-card--featured .nb-pricing-card__features li {
  border-bottom-color: rgba(255,255,255,0.12);
}

.nb-pricing-card__features li::before {
  content:     "✓";
  font-weight: 700;
  color:       var(--nb-accent);
  flex-shrink: 0;
}

.nb-pricing-card--featured .nb-pricing-card__features li::before {
  color: var(--nb-accent);
}

/* ==========================================================
   13. STEPS / PROCESS
   ========================================================== */
.nb-steps {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5rem;
}

.nb-step {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow);
  background:    var(--nb-card);
  padding:       1.75rem 1.5rem;
  position:      relative;
  border-radius: var(--nb-radius);
}

.nb-step__number {
  position:        absolute;
  top:             -16px;
  left:            -16px;
  width:           44px;
  height:          44px;
  border:          var(--nb-border);
  box-shadow:      var(--nb-shadow-sm);
  background:      var(--nb-accent);
  color:           var(--nb-primary);
  font-weight:     700;
  font-size:       1.1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.nb-step__icon {
  font-size:     2rem;
  margin-bottom: 1rem;
  margin-top:    0.5rem;
}

.nb-step__title {
  font-size:     1.05rem;
  font-weight:   700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.nb-step__desc {
  font-size:  0.875rem;
  color:      var(--nb-text-muted);
  max-width:  none;
}

/* ==========================================================
   14. TESTIMONIALS
   ========================================================== */
.nb-testimonial {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow);
  padding:       1.75rem;
  border-radius: var(--nb-radius);
  background:    var(--nb-card);
}

.nb-testimonial__stars {
  display:       flex;
  gap:           2px;
  margin-bottom: 0.75rem;
  color:         var(--nb-accent);
  font-size:     1rem;
}

.nb-testimonial__text {
  font-style:    italic;
  font-size:     0.95rem;
  margin-bottom: 1rem;
  max-width:     none;
}

.nb-testimonial__name {
  font-weight:   700;
  font-size:     0.9rem;
  text-transform: uppercase;
}

.nb-testimonial__role {
  font-size:   0.8rem;
  color:       var(--nb-text-muted);
  font-weight: 500;
}

/* ==========================================================
   15. FAQ (Details/Summary)
   ========================================================== */
.nb-faq {
  max-width: 800px;
  margin:    0 auto;
}

.nb-faq__item {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow-sm);
  background:    var(--nb-card);
  margin-bottom: 1rem;
  border-radius: var(--nb-radius);
}

.nb-faq__item summary {
  font-weight:   700;
  font-size:     1rem;
  cursor:        pointer;
  padding:       1.25rem 1.5rem;
  list-style:    none;
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.nb-faq__item summary::after {
  content:         "+";
  width:           28px;
  height:          28px;
  border:          var(--nb-border);
  background:      var(--nb-primary);
  color:           var(--nb-accent);
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      transform 0.2s;
}

.nb-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.nb-faq__answer {
  padding:     0 1.5rem 1.25rem;
  font-size:   0.95rem;
  line-height: 1.7;
  color:       var(--nb-text-muted);
}

/* ==========================================================
   16. CTA SECTION
   ========================================================== */
.nb-cta {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow-lg);
  background:    var(--nb-primary);
  color:         var(--nb-bg);
  padding:       4rem;
  text-align:    center;
  border-radius: var(--nb-radius);
}

.nb-cta h2 {
  color:         var(--nb-bg);
  margin-bottom: 1rem;
}

.nb-cta p {
  max-width:     60ch;
  margin:        0 auto 2rem;
  opacity:       0.85;
  font-size:     1.1rem;
}

/* ==========================================================
   17. STATS BLOCK
   ========================================================== */
.nb-stats {
  border:        var(--nb-border);
  box-shadow:    var(--nb-shadow-lg);
  background:    var(--nb-accent);
  padding:       3rem;
  transform:     rotate(-1deg);
}

.nb-stats__item {
  margin-bottom: 1.5rem;
}

.nb-stats__number {
  font-size:   3.5rem;
  font-weight: 700;
  line-height: 1;
}

.nb-stats__label {
  font-size:   1rem;
  font-weight: 600;
  margin-top:  4px;
}

/* ==========================================================
   18. FOOTER (GeneratePress Override)
   ========================================================== */
.site-footer {
  background:    var(--nb-primary) !important;
  border-top:    var(--nb-border);
  color:         var(--nb-bg) !important;
  padding:       2rem 0;
}

.site-footer a {
  color: var(--nb-accent);
}

.site-footer a:hover {
  color:   var(--nb-accent-hover);
  opacity: 1;
}

/* ==========================================================
   19. WORDPRESS CORE (Comments, Forms)
   ========================================================== */
.wp-block-button__link,
.wp-element-button {
  font-family:    var(--nb-font) !important;
  font-weight:    700 !important;
  border-radius:  var(--nb-radius) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
  font-family:   var(--nb-font);
  border:        var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow:    var(--nb-shadow-sm);
  padding:       10px 14px !important;
  background:    var(--nb-card);
  transition:    box-shadow 0.15s;
}

input:focus,
textarea:focus,
select:focus {
  outline:    none;
  box-shadow: var(--nb-shadow);
}

/* ==========================================================
   20. RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .nb-grid--3,
  .nb-pricing-grid,
  .nb-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .nb-pricing-card--featured {
    transform: none;
  }
}

@media (max-width: 768px) {
  :root {
    --nb-section-pad: 60px 0;
    --nb-shadow:      4px 4px 0 var(--nb-primary);
    --nb-shadow-lg:   6px 6px 0 var(--nb-primary);
  }

  .nb-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .nb-terminal {
    transform: none;
  }

  .nb-grid--3,
  .nb-grid--4,
  .nb-pricing-grid,
  .nb-steps {
    grid-template-columns: 1fr;
  }

  .nb-pricing-card--featured {
    transform: none;
  }

  .nb-cta {
    padding: 2.5rem 1.5rem;
  }

  .nb-stats {
    transform: none;
    padding:   2rem;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .nb-btn,
  .button {
    width: 100%;
    justify-content: center;
  }
}