/* ==========================================================================
   Storefront Stylesheet: I Built a Real Web App With AI
   Design System: Command-Center Aesthetic (Derived from Book Cover Artwork)
   Palette:
     --color-bg:    #0B1220 (Midnight Navy - Primary page background)
     --color-navy:  #1A3C67 (Deep Navy - Cards, panels, nav bar)
     --color-cyan:  #33D6FF (Electric Cyan - Primary CTA, links, glow highlights)
     --color-blue:  #1EA7FF (Signal Blue - Secondary highlights, borders)
     --color-sky:   #88DAF5 (Sky Glow - Subtle decorative glows, accents)
     --color-red:   #9B2C2C (Command Red - Secondary brand accent)
     --color-text:  #F7FAFC (Off White - Headings & readable body text)
     --color-muted: #A9B7CC (Steel Gray - Labels, secondary text)
   ========================================================================== */

:root {
  /* Core Palette */
  --color-bg: #0B1220;
  --color-navy: #1A3C67;
  --color-cyan: #33D6FF;
  --color-blue: #1EA7FF;
  --color-sky: #88DAF5;
  --color-red: #9B2C2C;
  --color-text: #F7FAFC;
  --color-muted: #A9B7CC;

  /* Surfaces & Functional Elevations */
  --color-surface-panel: #111C30;
  --color-surface-card: #152540;
  --color-surface-hover: #1B3153;
  --color-border-subtle: rgba(51, 214, 255, 0.22);
  --color-border-glow: rgba(51, 214, 255, 0.45);
  --color-glow-sky: rgba(136, 218, 245, 0.35);

  /* Bootstrap Color Overrides */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-cyan);
  --bs-link-color: var(--color-cyan);
  --bs-link-hover-color: var(--color-sky);
  --bs-secondary-color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Base & Typography
   -------------------------------------------------------------------------- */
html {
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  min-width: 320px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

p, li, td, th {
  overflow-wrap: break-word;
}

p.lead {
  color: var(--color-sky);
  font-weight: 500;
}

.text-muted,
.text-secondary {
  color: var(--color-muted) !important;
}

.text-uppercase {
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-sky);
}

/* --------------------------------------------------------------------------
   Accessibility: Skip Link & Focus States (WCAG 2.2 AA)
   -------------------------------------------------------------------------- */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-cyan);
  color: #0B1220;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #0B1220, 0 0 16px var(--color-cyan);
}

/* Unified High-Visibility Focus Rings */
:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible {
  outline: 2px solid var(--color-cyan) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.9), 0 0 10px rgba(51, 214, 255, 0.6) !important;
}

/* --------------------------------------------------------------------------
   Navigation: Sticky Header & Command-Center Styling
   -------------------------------------------------------------------------- */
#site-navigation {
  background-color: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color 0.25s ease, border-color 0.25s ease;
  z-index: 1030;
}

.navbar-brand {
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
}

.navbar-brand:hover,
.navbar-brand:focus-visible {
  color: var(--color-cyan);
}

.navbar-brand span {
  color: var(--color-cyan);
  padding: 0 0.2rem;
}

.navbar-nav .nav-link {
  color: var(--color-muted);
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--color-cyan);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-cyan);
}

.navbar-toggler {
  border: 1px solid var(--color-border-subtle);
  padding: 0.45rem 0.65rem;
  background-color: var(--color-navy);
}

.navbar-toggler:hover {
  border-color: var(--color-cyan);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2333D6FF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile dropdown panel */
@media (max-width: 991.98px) {
  #primaryNavigation {
    background-color: var(--color-surface-panel);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  }

  .navbar-nav .nav-item {
    padding: 0.25rem 0;
  }

  .navbar-nav .nav-item.ms-lg-2 {
    margin-top: 0.75rem;
    margin-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Interactive Buttons (Primary & Secondary Outlines)
   -------------------------------------------------------------------------- */
.btn {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.35rem;
  border-radius: 6px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary Button: Electric Cyan, Dark midnight text (#0B1220 contrast 10.88:1) */
.btn-primary {
  background-color: var(--color-cyan) !important;
  border: 1px solid var(--color-cyan) !important;
  color: #0B1220 !important;
  box-shadow: 0 0 16px rgba(51, 214, 255, 0.35);
}

.btn-primary:hover {
  background-color: var(--color-sky) !important;
  border-color: var(--color-sky) !important;
  color: #0B1220 !important;
  box-shadow: 0 0 24px rgba(51, 214, 255, 0.65);
}

/* Secondary / Outline Button: Signal Blue / Cyan border */
.btn-outline-primary {
  background-color: transparent !important;
  border: 2px solid var(--color-cyan) !important;
  color: var(--color-cyan) !important;
  box-shadow: inset 0 0 8px rgba(51, 214, 255, 0.15);
}

.btn-outline-primary:hover {
  background-color: rgba(51, 214, 255, 0.12) !important;
  border-color: var(--color-sky) !important;
  color: var(--color-text) !important;
  box-shadow: 0 0 16px rgba(51, 214, 255, 0.35);
}

.btn-lg {
  padding: 0.85rem 1.75rem;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   Hero Section (#book) & Book Cover Glow
   -------------------------------------------------------------------------- */
#book {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: radial-gradient(circle at 80% 20%, rgba(26, 60, 103, 0.45) 0%, transparent 60%);
}

#book h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--color-text);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#book .lead {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  margin-bottom: 1.25rem;
}

/* Prominent hero book cover with soft sky glow */
#book img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6),
              0 0 35px var(--color-glow-sky),
              0 0 65px rgba(51, 214, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#book img:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7),
              0 0 45px var(--color-glow-sky),
              0 0 85px rgba(51, 214, 255, 0.35);
}

/* --------------------------------------------------------------------------
   Value Strip (#value)
   -------------------------------------------------------------------------- */
#value {
  background-color: var(--color-surface-panel);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

#value li {
  position: relative;
}

#value li p {
  background-color: rgba(26, 60, 103, 0.35);
  border: 1px solid rgba(51, 214, 255, 0.15);
  border-left: 3px solid var(--color-cyan);
  padding: 0.85rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  height: 100%;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Cards: What You'll Learn (#learn) & Product Options (#products)
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-cyan);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(51, 214, 255, 0.25);
}

.card-body {
  padding: 1.5rem;
  color: var(--color-text);
}

.card-title {
  color: var(--color-cyan);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.card-text {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Highlight price figures in product cards */
#products .h4 {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

#products .card {
  border: 1px solid rgba(51, 214, 255, 0.25);
}

#products .card:hover {
  border-color: var(--color-cyan);
}

/* --------------------------------------------------------------------------
   Process Section (#process): IDEA -> BUILD -> GOVERN -> SHIP
   -------------------------------------------------------------------------- */
#process ol {
  padding-left: 0;
  list-style: none;
  counter-reset: step-counter;
}

#process li {
  position: relative;
  counter-increment: step-counter;
}

#process li::before {
  content: "0" counter(step-counter);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
  background-color: rgba(51, 214, 255, 0.1);
  border: 1px solid rgba(51, 214, 255, 0.3);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.65rem;
}

#process h3 {
  color: var(--color-sky);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

#process p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Inside the Book Preview (#inside-book) & Free Guide (#free-guide)
   -------------------------------------------------------------------------- */
#inside-book ul {
  padding-left: 1.25rem;
  color: var(--color-muted);
}

#inside-book li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

#inside-book li::marker {
  color: var(--color-cyan);
}

#free-guide {
  background-color: var(--color-surface-panel);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

#free-guide cite {
  color: var(--color-cyan);
  font-style: normal;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   About Section (#about)
   -------------------------------------------------------------------------- */
#about {
  position: relative;
}

#about p {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 75ch;
}

/* --------------------------------------------------------------------------
   FAQ Accordion (#faq)
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: var(--color-surface-card);
  --bs-accordion-color: var(--color-text);
  --bs-accordion-border-color: var(--color-border-subtle);
  --bs-accordion-btn-color: var(--color-text);
  --bs-accordion-btn-bg: var(--color-surface-panel);
  --bs-accordion-active-color: var(--color-cyan);
  --bs-accordion-active-bg: var(--color-surface-hover);
  --bs-accordion-btn-focus-box-shadow: none;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-item {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  margin-bottom: 0.75rem;
  border-radius: 6px !important;
  overflow: hidden;
}

.accordion-button {
  background-color: var(--color-surface-panel);
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1.1rem 1.35rem;
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-surface-hover);
  color: var(--color-cyan);
  box-shadow: inset 0 -1px 0 var(--color-border-subtle);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2333D6FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: transform 0.2s ease;
}

.accordion-body {
  background-color: var(--color-surface-card);
  color: var(--color-muted);
  line-height: 1.6;
  padding: 1.25rem 1.35rem;
}

/* --------------------------------------------------------------------------
   Final Call-to-Action Panel (#final-cta)
   Dark panel with cyan border glow
   -------------------------------------------------------------------------- */
#final-cta .container {
  background: linear-gradient(135deg, rgba(26, 60, 103, 0.4) 0%, rgba(11, 18, 32, 0.95) 100%);
  border: 1px solid var(--color-cyan);
  border-radius: 12px;
  padding: 3rem 2rem;
  box-shadow: 0 0 30px rgba(51, 214, 255, 0.22), inset 0 0 20px rgba(51, 214, 255, 0.08);
}

#final-cta h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 0.75rem;
}

#final-cta p {
  color: var(--color-muted);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Footer (#site-footer) & Legal Links
   -------------------------------------------------------------------------- */
#site-footer {
  background-color: #070B14;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-muted);
  font-size: 0.9rem;
}

#site-footer a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

#site-footer a:hover {
  color: var(--color-cyan);
  text-decoration: underline;
}

#site-footer strong {
  color: var(--color-text);
}

.list-inline {
  padding-left: 0;
  margin-bottom: 0;
}

.list-inline-item:not(:last-child) {
  margin-right: 1.25rem;
}

/* --------------------------------------------------------------------------
   Legal & Static Content Pages (privacy, terms, refund, contact, etc.)
   -------------------------------------------------------------------------- */
main.container {
  color: var(--color-text);
}

main.container h1 {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

main.container p {
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

main.container strong {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Mobile & Responsive Adjustments (Down to 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .btn {
    width: 100%;
  }

  .d-flex.flex-wrap.gap-3 > .btn {
    width: 100%;
  }

  #final-cta .container {
    padding: 2rem 1.25rem;
  }

  .card-body {
    padding: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion (Accessibility)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}