/* ============================================================
   Traffic Blast Max — 90s Early Web Theme
   Beveled buttons, tiled backgrounds, Times New Roman
   ============================================================ */

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

/* ── Google Fonts — classic web stack ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  /* 90s Retro palette — schemecolor.com/90s-retro.php
   * Magenta Pink #D1439E | Spicy Yellow #F8E924 | True Purple #54276F
   * Sydney #1DA5BE       | Blue Pot #131C5A        | Lime Green #38CD2C */
  --magenta:     #D1439E;  /* hot pink — accents, badges, highlights */
  --yellow:      #F8E924;  /* bright yellow — headings, labels, emphasis */
  --purple:      #54276F;  /* true purple — secondary buttons, accents */
  --teal:        #1DA5BE;  /* sydney teal — primary buttons, links */
  --navy:        #131C5A;  /* blue pot — sidebar, headers, dark surfaces */
  --lime:        #38CD2C;  /* lime green — success, active */
  --silver:      #C0C0C0;  /* silver — window surfaces, panels */
  --silver-2:    #D8D8D8;  /* lighter silver */
  --silver-3:    #EEEEEE;  /* lightest silver */
  --text:        #000000;  /* black — readable on light backgrounds */
  --text-light:  #FFFFFF;  /* white — readable on dark backgrounds */
  --text-muted:  #555555;  /* muted — secondary info on light bg */
  --text-muted-light: #999999;  /* muted — secondary info on dark bg */
  --border:      #808080;  /* gray — panel borders */
  --border-light:#FFFFFF;  /* white — beveled highlight edge */
  --border-dark: #404040;  /* dark gray — beveled shadow edge */
  --green-btn:   #38CD2C;  /* lime green — go/success buttons */
  --red-btn:     #D1439E;  /* magenta pink — stop/cancel buttons */
  --blue-link:   #1DA5BE;  /* sydney teal — unvisited links */
  --blue-visited:#54276F;  /* true purple — visited links */
  --shadow-glow: 0 0 10px rgba(29,165,190,0.3);  /* teal glow */

  /* Background */
  --bg:          #1DA5BE;  /* sydney teal — main page background */
  --bg-dark:     #004040;  /* dark teal — inset/darker bg variant */

  /* Fonts */
  --font: 'Times New Roman', Times, 'MS Gothic', serif;
  --font-sans: Verdana, Geneva, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --font-pixel: 'VT323', monospace;
  --font-sans: Verdana, Geneva, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --font-pixel: 'VT323', monospace;
}

/* ── Base ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23155f6e'/%3E%3Crect width='2' height='2' fill='%231DA5BE' opacity='0.5'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
  padding-top: 0;
}

/* ── Custom scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: var(--silver); border: 1px solid var(--border-dark); }
::-webkit-scrollbar-thumb { background: var(--silver-2); border: 2px outset var(--silver); }
::-webkit-scrollbar-thumb:active { background: var(--silver); border: 2px inset var(--silver); }

/* ── Text selection ────────────────────────────────────── */
::selection { background: var(--navy); color: var(--text-light); }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.25;
}
h1 { font-size: 2.2rem; font-weight: bold; }
h2 { font-size: 1.6rem; font-weight: bold; }
h3 { font-size: 1.2rem; font-weight: bold; }

a { color: var(--blue-link); text-decoration: underline; }
a:visited { color: var(--blue-visited); }
a:hover { color: var(--red-btn); }
a img { border: none; }

/* ── Container ─────────────────────────────────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ── NAVBAR ────────────────────────────────────────────── */
.navbar {
  background: var(--navy);
  border-bottom: 3px solid var(--yellow);
  padding: 6px 0;
  font-family: var(--font-sans);
}
.navbar .container {
  display: flex;
  align-items: center;
  gap: 0;
}
.navbar-brand {
  font-family: var(--font-pixel);
  font-size: 1.4rem;
  color: var(--yellow) !important;
  text-decoration: none !important;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
  padding: 4px 8px;
  border: 2px groove var(--yellow);
}
.navbar-nav {
  display: flex;
  list-style: none;
  margin-left: auto;
  gap: 0;
}
.navbar-nav li a {
  color: var(--text-light) !important;
  text-decoration: none !important;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  display: block;
  border: 1px solid transparent;
}
.navbar-nav li a:hover {
  background: var(--yellow);
  color: var(--text) !important;
  border-color: var(--yellow);
}
.navbar-nav li a.text-sunflower { color: var(--yellow) !important; }
.navbar-nav li a.text-sunflower:hover { background: var(--yellow); color: var(--text) !important; }

/* ── BUTTONS — 90s beveled style ──────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: bold;
  padding: 6px 18px;
  border: 3px outset var(--silver-2);
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  text-align: center;
  background: var(--silver);
  color: var(--text) !important;
  border-radius: 0;
  transition: none;
  box-shadow: none;
}
.btn:hover { background: var(--silver-3); }
.btn:active {
  border-style: inset;
  background: var(--silver);
}

.btn-blast {
  background: var(--green-btn);
  color: var(--text-light) !important;
  border-color: var(--green-btn) var(--border-dark) var(--border-dark) var(--green-btn);
  border-width: 3px;
  border-style: outset;
  font-size: 14px;
  padding: 8px 20px;
  text-shadow: 1px 1px 0 #000;
}
.btn-blast:hover { background: var(--lime); color: var(--text-light) !important; }
.btn-blast:active { border-style: inset; }

.btn-ghost {
  background: var(--silver);
  color: var(--text) !important;
  border-color: var(--silver-2) var(--border-dark) var(--border-dark) var(--silver-2);
}
.btn-ghost:hover { background: var(--silver-2); color: var(--text) !important; }
.btn-ghost:active { border-style: inset; }

.btn-primary {
  background: var(--navy);
  color: var(--text-light) !important;
  border-color: var(--navy) var(--border-dark) var(--border-dark) var(--navy);
  font-size: 13px;
  padding: 6px 16px;
}
.btn-primary:hover { background: var(--purple); color: var(--text-light) !important; }
.btn-primary:active { border-style: inset; }

.btn-success { background: var(--green-btn); color: var(--text-light) !important; border-color: var(--lime) var(--border-dark) var(--border-dark) var(--lime); }
.btn-success:hover { background: var(--lime); color: var(--text-light) !important; }
.btn-success:active { border-style: inset; }

.btn-danger { background: var(--red-btn); color: var(--text-light) !important; border-color: var(--red-btn) var(--border-dark) var(--border-dark) var(--red-btn); }
.btn-danger:hover { background: var(--magenta); color: var(--text-light) !important; }
.btn-danger:active { border-style: inset; }

.btn-sm { font-size: 12px; padding: 3px 10px; }
.btn-lg { font-size: 15px; padding: 10px 24px; }
.btn-full { width: 100%; display: block; }

.btn.disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── HERO ──────────────────────────────────────────────── */
.hero-launch {
  background: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23000099' stroke-width='2' opacity='0.4'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%23000099' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='100' cy='100' r='40' fill='none' stroke='%23000099' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
  border-bottom: 4px solid var(--yellow);
  padding: 40px 0 30px;
  position: relative;
  overflow: hidden;
}

.hero-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border: 2px outset var(--yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.hero-headline {
  font-family: var(--font);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: var(--text-light) !important;
  text-shadow: 3px 3px 0 var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
  font-weight: bold;
}
.hero-headline .text-gradient {
  color: var(--yellow) !important;
  text-shadow: 2px 2px 0 #000;
}

.hero-sub {
  font-size: 15px;
  color: var(--text-muted-light);
  margin-bottom: 22px;
  line-height: 1.6;
  font-family: var(--font-sans);
}

.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted-light);
  font-family: var(--font-sans);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted-light);
}
.trust-item svg { color: var(--yellow); }

/* ── MARQUEE ───────────────────────────────────────────── */
.marquee-bar {
  background: var(--yellow);
  border-top: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: bold;
  color: var(--text);
}
.marquee-bar marquee { color: var(--text); }
.marquee-bar b { color: var(--navy); }

/* ── SECTIONS ───────────────────────────────────────────── */
.section {
  padding: 32px 0;
  background: var(--silver-3);
  border-top: 2px solid var(--border-light);
  border-bottom: 2px solid var(--border-dark);
}

.section-title {
  font-family: var(--font);
  text-align: center;
  font-size: 1.6rem;
  color: var(--navy);
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 var(--border-light);
}
.section-eyebrow {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.section-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  font-family: var(--font-sans);
}

/* ── HOW IT WORKS — retro table style ───────────────────── */
.launch-sequence {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 2px solid var(--border);
}
.launch-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--silver);
  border-bottom: 2px solid var(--border);
  position: relative;
}
.launch-step:last-child { border-bottom: none; }
.launch-step:nth-child(even) { background: var(--silver-2); }
.launch-step-num {
  font-family: var(--font-pixel);
  font-size: 2rem;
  color: var(--navy);
  min-width: 50px;
  text-shadow: 2px 2px 0 var(--border-light);
  line-height: 1;
  flex-shrink: 0;
}
.launch-step-body h3 {
  font-family: var(--font);
  color: var(--navy);
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.launch-step-body p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-family: var(--font-sans);
}

/* ── PACKAGES — beveled cards ───────────────────────────── */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.package-card {
  background: var(--silver);
  border: 3px outset var(--silver-2);
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: none;
}
.package-card:hover { background: var(--silver-2); }
.package-card.selected {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow);
  background: var(--silver-2);
}
.package-card.popular::before {
  content: "★ BEST VALUE ★";
  display: block;
  background: var(--red-btn);
  color: var(--text-light);
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  font-family: var(--font-sans);
  padding: 3px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
  border-bottom: 2px outset var(--red-btn);
}
.package-header {
  background: var(--navy);
  padding: 10px 14px;
  border-bottom: 3px solid var(--navy);
  text-align: center;
}
.package-name {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: bold;
  color: var(--yellow);
  text-shadow: 1px 1px 0 #000;
}
.package-price {
  font-family: var(--font-pixel);
  font-size: 1.8rem;
  color: var(--text-light);
  text-shadow: 2px 2px 0 var(--navy);
  line-height: 1.1;
}
.package-price span { font-size: 0.9rem; }
.package-body {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.package-feature {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.package-feature::before {
  content: "▸";
  color: var(--navy);
  font-size: 11px;
}
.package-views {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: bold;
  color: var(--navy);
  text-align: center;
  padding: 6px;
  background: var(--silver-3);
  border: 1px inset var(--border);
  margin-top: auto;
}

/* ── ORDER FORM ────────────────────────────────────────── */
#order-section {
  background: var(--silver-2);
  border-top: 3px solid var(--border-dark);
  border-bottom: 3px solid var(--border-dark);
}
.order-form-wrap {
  background: var(--silver);
  border: 3px double var(--border);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
.form-title {
  font-family: var(--font);
  font-size: 1.4rem;
  color: var(--navy);
  text-align: center;
  margin-bottom: 4px;
  font-weight: bold;
}
.form-subtitle {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-family: var(--font-sans);
}

/* Classic HTML form elements */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  margin-bottom: 4px;
}
.form-label small {
  font-weight: normal;
  color: var(--text-muted);
  font-size: 11px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--text-light);
  color: var(--text);
  border: 2px inset var(--silver);
  border-radius: 0;
  box-sizing: border-box;
  display: block;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 2px dotted var(--navy);
  outline-offset: 1px;
}

/* ── Promo code ────────────────────────────────────────── */
.promo-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.promo-wrap .form-input { flex: 1; }

/* ── Order summary ──────────────────────────────────────── */
.order-summary {
  background: var(--navy);
  border: 3px outset var(--navy);
  padding: 14px;
  margin-bottom: 14px;
  color: var(--text-light);
  font-family: var(--font-sans);
}
.order-summary-title {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--yellow);
  margin-bottom: 8px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 0 var(--navy);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--navy);
  color: var(--text-muted-light);
}
.summary-row:last-child { border-bottom: none; }
.summary-row.total {
  font-weight: bold;
  font-size: 15px;
  color: var(--text-light);
  padding-top: 6px;
  margin-top: 4px;
  border-top: 2px solid var(--navy);
}
.summary-row.total .summary-val { color: var(--yellow); }

/* ── SUBMIT BUTTON ─────────────────────────────────────── */
.btn-submit {
  width: 100%;
  background: var(--green-btn);
  color: var(--text-light) !important;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: 3px outset var(--green-btn);
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn-submit:hover { background: var(--lime); }
.btn-submit:active { border-style: inset; }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  border-top: 3px solid var(--yellow);
  padding: 16px 0;
  text-align: center;
}
.footer-content p {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted-light);
}
.footer-links {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.footer-links a { color: var(--yellow) !important; }

/* ── Toast Container ─────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── TOAST NOTIFICATIONS ───────────────────────────────── */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: bold;
  border: 3px outset var(--silver-2);
  z-index: 9999;
  max-width: 300px;
  color: var(--text);
}
.toast.success { background: #C8FFC8; border-color: var(--green-btn); color: var(--green-btn); }
.toast.error { background: #FFD8E8; border-color: var(--red-btn); color: var(--red-btn); }
.toast.info { background: #C8C8FF; border-color: var(--navy); color: var(--navy); }

/* ── ALERTS / MESSAGES ─────────────────────────────────── */
.alert {
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  border: 2px outset;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert.hidden { display: none; }
.alert-success { background: #C8FFC8; border-color: var(--green-btn); color: var(--green-btn); }
.alert-error { background: #FFD8E8; border-color: var(--red-btn); color: var(--red-btn); }
.alert-warning { background: #FFFFC8; border-color: var(--yellow); color: #664400; }
.alert-info { background: #C8C8FF; border-color: var(--navy); color: var(--navy); }

/* ── CHECKBOXES & RADIOS ───────────────────────────────── */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
  cursor: pointer;
  accent-color: var(--navy);
}

/* ── PROMO BANNER ──────────────────────────────────────── */
.promo-banner {
  background: repeating-linear-gradient(
    -45deg,
    var(--yellow),
    var(--yellow) 10px,
    var(--yellow) 10px,
    var(--yellow) 20px
  );
  padding: 8px;
  text-align: center;
  border-top: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
}
.promo-banner-text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: bold;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 var(--sunflower-light);
}

/* ── MISC UTILITIES ────────────────────────────────────── */
.text-sunflower { color: var(--yellow); }
.text-gradient { background: linear-gradient(to bottom, var(--yellow), var(--petal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hidden { display: none !important; }
.flex { display: flex; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ── LIVE COUNTER (Blast counter in hero) ──────────────── */
.blast-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  border: 2px outset var(--navy);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #00FF00;
  margin-top: 10px;
}
.blast-counter .dot {
  width: 8px;
  height: 8px;
  background: #00FF00;
  border-radius: 50%;
  animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── PACKAGES / BLAST CARDS ────────────────────────────── */
.blast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.blast-card {
  background: var(--silver);
  border: 3px outset var(--silver-2);
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  position: relative;
  font-family: var(--font-sans);
}
.blast-card:hover { background: var(--silver-2); }
.blast-card:active { border-style: inset; }
.blast-card-popular { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }

.blast-popular-badge {
  background: var(--red-btn);
  color: var(--text-light);
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-sans);
  border-bottom: 2px outset var(--red-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.blast-name {
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  border-bottom: 3px solid var(--navy);
  text-shadow: 1px 1px 0 #000;
}
.blast-price {
  font-family: var(--font-pixel);
  font-size: 2rem;
  color: var(--text);
  text-align: center;
  padding: 10px 8px 4px;
  line-height: 1;
}
.blast-price-sub {
  font-size: 0.75rem;
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-weight: normal;
}
.blast-views {
  text-align: center;
  padding: 6px 8px;
  background: var(--silver-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.blast-views-num {
  display: block;
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  color: var(--navy);
}
.blast-views-label {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.blast-meta {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px;
  font-family: var(--font-sans);
  background: var(--silver-2);
}
.blast-desc {
  font-size: 11px;
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font-sans);
  line-height: 1.4;
  flex: 1;
}
.blast-select-btn {
  margin: 10px auto;
  width: calc(60% - 20px);
  font-size: 12px;
  font-weight: bold;
  font-family: var(--font-sans);
}

/* ── WHAT YOU GET ──────────────────────────────────────── */
.what-you-get {
  background: var(--silver);
  border: 2px inset var(--silver-2);
  padding: 14px;
}
.wyg-header {
  font-family: var(--font);
  font-weight: bold;
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wyg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 16px;
}
.wyg-item {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.wyg-item svg { color: var(--green-btn); flex-shrink: 0; }

/* ── SECTION VARIANTS ───────────────────────────────────── */
.section-dark  { background: var(--silver-3); }
.section-darker{ background: var(--silver-2); border-top: 3px solid var(--border-dark); border-bottom: 3px solid var(--border-dark); }


/* ── SECTION EXTRAS ────────────────────────────────────── */
.section-eyebrow {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-family: var(--font-sans);
}
.section-subtitle {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-family: var(--font-sans);
}
.section-dark  { background: var(--silver-3); }
.section-darker{ background: var(--silver-2); border-top: 3px solid var(--border-dark); border-bottom: 3px solid var(--border-dark); }

/* ── CAMPAIGN STEPS ─────────────────────────────────────── */
.campaign-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  background: var(--silver);
  border: 2px inset var(--silver-2);
  padding: 10px;
}
.camp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.camp-step-num {
  width: 32px;
  height: 32px;
  border: 3px outset var(--silver-2);
  background: var(--silver-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.camp-step.active .camp-step-num {
  background: var(--navy);
  color: var(--yellow);
  border-color: var(--navy);
}
.camp-step-label {
  font-size: 10px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.camp-step.active .camp-step-label { color: var(--navy); font-weight: bold; }
.camp-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 18px;
}

/* ── ORDER LAYOUT ───────────────────────────────────────── */
.order-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 700px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-package-panel { display: none; }
}

/* ── ORDER PACKAGE PANEL ────────────────────────────────── */
.order-package-panel {
  background: var(--silver);
  border: 3px outset var(--silver-2);
  font-family: var(--font-sans);
}
.pkg-panel-header {
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--font);
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  padding: 6px;
  border-bottom: 3px solid var(--navy);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pkg-panel-body { padding: 12px; }
.pkg-panel-name {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--navy);
  margin-bottom: 4px;
}
.pkg-panel-price {
  font-family: var(--font-pixel);
  font-size: 1.8rem;
  color: var(--text);
  line-height: 1;
}
.pkg-panel-views {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.pkg-panel-days {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  margin-bottom: 8px;
}
.pkg-panel-divider {
  border-top: 1px dotted var(--border);
  margin: 8px 0;
}
.pkg-panel-note {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  line-height: 1.4;
}

/* ── FORM SECTION HEADINGS ──────────────────────────────── */
.form-section-heading {
  font-family: var(--font);
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 4px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--navy);
  color: var(--yellow);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: bold;
  border: 2px outset var(--navy);
  flex-shrink: 0;
}
.form-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-family: var(--font-sans);
}
.required { color: var(--red-btn); }
.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--font-sans);
  line-height: 1.4;
}
.form-label-opt { font-weight: normal; color: var(--text-muted); font-size: 11px; }
.form-label small { display: block; font-weight: normal; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* ── UTILITY ────────────────────────────────────────────── */
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }
.mb-3 { margin-bottom: 14px; }
.mb-4 { margin-bottom: 20px; }

/* ── PAYMENT OPTIONS ───────────────────────────────────── */
.payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.payment-option {
  border: 3px outset var(--silver-2);
  background: var(--silver);
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
}
.payment-option:hover { background: var(--silver-2); }
.payment-option.selected {
  border-color: var(--navy);
  background: var(--silver-2);
}
.payment-name {
  font-weight: bold;
  font-size: 12px;
  color: var(--navy);
  font-family: var(--font-sans);
}
.payment-desc {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.payment-icon { display: flex; align-items: center; justify-content: center; }

/* ── ORDER SUMMARY ──────────────────────────────────────── */
.order-summary {
  background: var(--navy);
  border: 3px outset var(--navy);
  padding: 12px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
}
.order-summary-title {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--yellow);
  margin-bottom: 8px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 0 var(--navy);
}
.order-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--navy);
  color: var(--text-muted-light);
  font-family: var(--font-sans);
}
.order-summary-row:last-child { border-bottom: none; }
.order-summary-row.total {
  font-weight: bold;
  font-size: 14px;
  color: var(--text-light);
  padding-top: 6px;
  margin-top: 4px;
  border-top: 2px solid var(--navy);
}
.order-summary-row.total .value { color: var(--yellow); }

/* ── BUTTON BLOCK ───────────────────────────────────────── */
.btn-block { width: 100%; display: block; }

@media (max-width: 600px) {
  .trust-grid { grid-template-columns: 1fr !important; }
  .trust-headline { border-right: none; border-bottom: 2px solid var(--border); }
  .trust-stat-card { border-right: none !important; }
  .trust-stat-card:nth-child(even) { border-right: none; }
  .trust-stat-card:nth-last-child(-n+2) { border-bottom: 2px solid var(--border); }
  .trust-stat-card:last-child { border-bottom: none; }
  .payment-options { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; }
  .blast-grid { grid-template-columns: 1fr; }
}

/* ── SECONDARY BUTTON ──────────────────────────────────── */
.btn-secondary {
  background: var(--silver-2);
  color: var(--text) !important;
  border-color: var(--silver-2) var(--border-dark) var(--border-dark) var(--silver-2);
}
.btn-secondary:hover { background: var(--silver-3); color: var(--text) !important; }
.btn-secondary:active { border-style: inset; }

/* ── UTILITIES & MISSING CLASSES ─────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); font-family: var(--font-sans); font-size: 13px; }
.text-left { text-align: left; }
.page { padding: 24px 0; min-height: calc(100vh - 50px); }
.container-sm { max-width: 600px; margin: 0 auto; padding: 0 12px; }
.card {
  background: var(--silver);
  border: 3px outset var(--silver-2);
  padding: 16px;
  font-family: var(--font-sans);
}
.card-title {
  font-family: var(--font);
  font-weight: bold;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.mb-2 { margin-bottom: 10px; }
.mb-4 { margin-bottom: 20px; }

/* ── CARD BODY ─────────────────────────────────────────── */
.card-body { padding: 12px; }

/* ── BORDER RADIUS ─────────────────────────────────────── */
.border-radius { border-radius: 0 !important; }

/* ── BADGE ─────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: bold;
  border: 2px outset;
  border-radius: 0;
}
.badge-pending { background: #FFFFC8; border-color: var(--yellow); color: #664400; }
.badge-active, .badge-in_progress { background: #C8FFC8; border-color: var(--green-btn); color: var(--green-btn); }
.badge-paused { background: #FFFFC8; border-color: var(--yellow); color: #664400; }
.badge-completed { background: #C8C8FF; border-color: var(--navy); color: var(--navy); }

/* ── ORDER DETAIL TABLE ───────────────────────────────── */
.order-detail-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; }
.order-detail-table td { padding: 5px 8px; vertical-align: top; }

/* ══════════════════════════════════════════════════════════════
   ADMIN AREA — Retro Styling
   90s Early Web: beveled panels, silver-gray layout, navy sidebar
   ══════════════════════════════════════════════════════════════ */

/* ── Admin Layout ──────────────────────────────────────── */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--silver-3);
}

/* ── Admin Sidebar ────────────────────────────────────── */
.admin-sidebar {
  width: 210px;
  min-height: 100vh;
  background: var(--navy);
  border-right: 3px solid var(--yellow);
  flex-shrink: 0;
  font-family: var(--font-sans);
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.admin-sidebar-brand {
  padding: 8px 14px 10px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 6px;
}

.admin-sidebar-brand .brand-name {
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  color: var(--yellow);
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 1px;
  display: block;
}

.admin-sidebar-brand .brand-sub {
  font-size: 10px;
  color: var(--text-muted-light);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-sidebar-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted-light);
  padding: 10px 14px 4px;
  margin-top: 4px;
}

.admin-nav {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.admin-nav li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-muted-light);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.admin-nav li a:hover {
  background: #000055;
  color: var(--text-light);
  border-left-color: var(--yellow);
}

.admin-nav li a.active {
  background: #000055;
  color: var(--yellow);
  border-left-color: var(--yellow);
  font-weight: bold;
}

/* ── Admin Main Content ───────────────────────────────── */
.admin-main {
  flex: 1;
  padding: 20px;
  overflow-x: hidden;
  min-width: 0;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}

.admin-header h2 {
  font-family: var(--font);
  font-size: 1.4rem;
  color: var(--navy);
  text-shadow: 1px 1px 0 var(--border-light);
  margin: 0;
}

/* ── Admin Stat Cards ─────────────────────────────────── */
.stat-card {
  background: var(--silver);
  border: 2px outset var(--silver-2);
  padding: 12px 14px;
  text-align: center;
  font-family: var(--font-sans);
}

.stat-card.highlight {
  border-color: var(--yellow);
  background: var(--silver-3);
}

.stat-value {
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  color: var(--navy);
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

/* ── Admin Grid ───────────────────────────────────────── */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
  .admin-sidebar { width: 160px; }
  .admin-layout { flex-direction: column; }
}

/* ── Admin Table ──────────────────────────────────────── */
.table-wrapper {
  background: var(--silver);
  border: 2px inset var(--silver-2);
  overflow-x: auto;
  padding: 0;
}

table.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13px;
}

table.table thead tr {
  background: var(--navy);
}

table.table thead th {
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--yellow);
  border-right: 1px solid var(--navy);
  white-space: nowrap;
}

table.table thead th:last-child { border-right: none; }

table.table tbody tr {
  border-bottom: 1px solid var(--border);
  background: var(--silver);
}

table.table tbody tr:nth-child(even) {
  background: var(--silver-2);
}

table.table tbody tr:hover {
  background: #FFFFC8;
}

table.table tbody td {
  padding: 7px 12px;
  color: var(--text);
  vertical-align: middle;
}

table.table tbody td a {
  color: var(--blue-link);
}

.col-actions { text-align: right; white-space: nowrap; }

/* ── Admin Form Select ────────────────────────────────── */
.form-select {
  padding: 5px 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--text-light);
  color: var(--text);
  border: 2px inset var(--silver);
  border-radius: 0;
  cursor: pointer;
}

.form-select:focus {
  outline: 2px dotted var(--navy);
  outline-offset: 1px;
}

/* ── Admin Button Small ───────────────────────────────── */
.btn-sm { font-size: 12px; padding: 3px 10px; }

/* ── Admin Page Body Override ──────────────────────────── */
/* Admin pages need their own body bg to contrast with sidebar */
body.admin-body {
  background: var(--silver-3);
  color: var(--text);
}

/* ── TRUST & TRANSPARENCY — full retro styling ──────────── */
.trust-section {
  background: var(--silver);
  border-top: 3px outset var(--border-light);
  border-bottom: 3px outset var(--border-dark);
  padding: 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  border: 2px solid var(--border);
  background: var(--silver-2);
}
.trust-headline {
  padding: 20px 24px;
  border-right: 2px solid var(--border);
  background: var(--silver);
}
.trust-headline .section-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--magenta);
  font-weight: bold;
  margin-bottom: 6px;
}
.trust-headline h2 {
  font-family: var(--font);
  font-size: 1.4rem;
  color: var(--yellow);
  margin-bottom: 10px;
  line-height: 1.3;
}
.trust-headline > p {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.5;
}
.trust-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--silver-3);
  border: 1px solid var(--border);
  padding: 10px 12px;
}
.trust-point-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--navy);
  border: 2px outset var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
}
.trust-point strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: bold;
  color: var(--navy);
  margin-bottom: 3px;
}
.trust-point p {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
}
.trust-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--silver-2);
  border: none;
}
.trust-stat-card {
  padding: 14px 10px;
  text-align: center;
  background: var(--silver);
  border-right: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.trust-stat-card:nth-child(even) { border-right: none; }
.trust-stat-card:nth-last-child(-n+2) { border-bottom: none; }
.trust-stat-val {
  font-family: var(--font-pixel);
  font-size: 2rem;
  color: var(--lime);
  text-shadow: 2px 2px 0 var(--border-dark);
  line-height: 1;
  display: block;
}
.trust-stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  display: block;
}