/* Branding Colors */
:root {
  --color-primary: #102A43;
  /* Deep Navy - Trust, Authority */
  --color-primary-dark: #0A1C2E;
  /* Darker Navy for contrast */
  --color-primary-light: #1F7A8C;
  /* Teal - Calm, Structure */
  --color-accent: #F5A623;
  /* Amber - Action, Energy */
  --color-accent-hover: #D48C1B;
  --color-accent-light: #FFF8E1;
  /* Light Amber background */
  --color-bg: #F7F8FA;
  /* Off-white / Light Grey - Airiness */
  --color-bg-white: #FFFFFF;
  --color-text: #111827;
  /* Near black */
  --color-text-muted: #4B5563;
  /* Grey text */
  --color-border: #E5E7EB;
  --color-success: #10B981;
  --color-danger: #EF4444;

  --font-main: 'Inter', system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 1px 2px 0 rgba(16, 42, 67, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(16, 42, 67, 0.1), 0 2px 4px -1px rgba(16, 42, 67, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(16, 42, 67, 0.1), 0 4px 6px -2px rgba(16, 42, 67, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(16, 42, 67, 0.1), 0 10px 10px -5px rgba(16, 42, 67, 0.04);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  /* Increased line-height for readability */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
  /* Extra Bold per branding */
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

h4 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
  font-size: 1.125rem;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-highlight {
  color: var(--color-accent);
}

.text-primary {
  color: var(--color-primary);
}

.text-white {
  color: #fff;
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}


/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  /* Increased horizontal padding */
  width: 100%;
}

.section {
  padding: 5rem 0;
  /* Increased vertical padding */
}

.section-sm {
  padding: 3rem 0;
}

.section-lg {
  padding: 8rem 0;
}

.bg-white {
  background-color: var(--color-bg-white);
}

.bg-light {
  background-color: var(--color-bg);
}

.bg-navy {
  background-color: var(--color-primary);
  color: #fff;
}

.bg-navy p {
  color: rgba(255, 255, 255, 0.8);
}

.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy h4,
.bg-navy strong {
  color: #fff !important;
}

.bg-navy li {
  color: rgba(255, 255, 255, 0.9);
}

.bg-soft-red {
  background-color: rgba(239, 68, 68, 0.05);
  /* Very light red */
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.bg-soft-green {
  background-color: rgba(16, 185, 129, 0.05);
  /* Very light green */
  border: 1px solid rgba(16, 185, 129, 0.2);
}


/* Grid Systems */
.grid {
  display: grid;
  gap: 2rem;
  /* Increased gap */
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
  /* Mobile default */
}


/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Flex Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.gap-4 {
  gap: 2rem;
}

/* Components */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 6px rgba(245, 166, 35, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(245, 166, 35, 0.3);
}

.btn-large {
  padding: 1.25rem 2.5rem;
  font-size: 1.25rem;
}

.btn-sm {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

.btn-full {
  width: 100%;
}

/* Glow Animation */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(245, 166, 35, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
  }
}

.btn-pulse {
  animation: pulse-glow 2s infinite;
}

/* Cards */
.card {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  /* Increased padding */
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
  /* Equal height in grid */
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(31, 122, 140, 0.3);
}

.card-icon {
  width: 56px;
  /* Slightly larger */
  height: 56px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

/* Icon Box (For "The Truth" section) */
.icon-box {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}

.icon-box:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.icon-box-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.icon-box-text {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}


/* Specific Section Styles */

/* Header */
header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo {
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-primary);
  letter-spacing: -0.03em;
}

/* Hero */
.hero {
  background: var(--color-primary);
  /* Reduced top padding, increased bottom padding */
  padding: 4rem 0 8rem 0;
  position: relative;
  overflow: hidden;
}

.hero-content {
  color: #fff;
  z-index: 2;
  position: relative;
}

/* Fix: Ensure headings and paragraphs in hero are white */
.hero h1,
.hero h2,
.hero h3,
.hero p {
  color: #fff;
}

.hero-tag {
  display: inline-block;
  background: rgba(245, 166, 35, 0.15);
  color: var(--color-accent);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(245, 166, 35, 0.3);
}

.hero-visual {
  position: relative;
  /* Removed border radius/box shadow from container to let the inner mockup handle it if needed, 
     but keeping it for the main wrapper is fine. 
     Actually, let's keep the container as the wrapper and style the inside. */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 4px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 3rem;
  background: #0A1C2E;
  /* Dark Navy Background */
}

/* New Literal Dashboard Styles */
.dashboard-mockup {
  padding: 2rem;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: 'Inter', sans-serif;
  /* Ensure clean font */
}

.window-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.control-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dashboard-header {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
}

.dashboard-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid transparent;
  transition: transform 0.2s;
}

.dashboard-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
}

.dashboard-item.active {
  border-left-color: var(--color-success);
}

.dashboard-item.pending {
  border-left-color: var(--color-accent);
}

.item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
}

.item-content {
  flex: 1;
}

.item-title {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
}

.item-status {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  display: block;
  margin-top: 2px;
}

.floating-card {
  background: #fff;
  color: #102A43;
  padding: 1.25rem;
  border-radius: 12px;
  margin-top: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transform: translateX(20px);
  border-left: 4px solid var(--color-accent);
  position: relative;
  z-index: 10;
}

/* Helper for dark cards to ensure text contrast */
.card[style*="background: var(--color-primary"] h3,
.card[style*="background: var(--color-primary"] p,
.card[style*="background: var(--color-primary"] li {
  color: #fff !important;
}

/* Comparison Cards (For You / Not For You) */
.comparison-card {
  border-top: 4px solid transparent;
}

.comparison-card.good {
  border-color: var(--color-success);
}

.comparison-card.bad {
  border-color: var(--color-danger);
}

.check-list {
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.check-list li::before {
  position: absolute;
  left: 0;
  top: 2px;
  font-weight: bold;
}

.check-list.good li::before {
  content: "✓";
  color: var(--color-success);
}

.check-list.bad li::before {
  content: "✕";
  color: var(--color-danger);
}

/* Timeline (Solution) */
.timeline-item {
  position: relative;
  padding-left: 3rem;
  padding-bottom: 4rem;
  /* More spacing */
  border-left: 2px solid var(--color-border);
}

.timeline-item:last-child {
  border-left-color: transparent;
}

.timeline-number {
  position: absolute;
  left: -1.05rem;
  /* Center on line */
  top: 0;
  width: 2rem;
  height: 2rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 4px solid var(--color-bg-white);
}

/* FAQ */
.faq-details {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-details[open] {
  box-shadow: var(--shadow-md);
  border-color: rgba(16, 42, 67, 0.1);
}

.faq-summary {
  padding: 1.5rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  background: transparent;
  transition: background 0.2s;
}

.faq-summary:hover {
  background: rgba(0, 0, 0, 0.01);
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  margin-left: 1rem;
  transition: transform 0.2s;
}

.faq-details[open] .faq-summary::after {
  content: "−";
  /* Using proper minus sign for vertical centering */
  transform: rotate(180deg);
}

.faq-body {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  border-top: 1px solid transparent;
}

.faq-details[open] .faq-body {
  border-top-color: var(--color-border);
  padding-top: 1.5rem;
  /* Add padding when open */
}

/* Footer */
footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.9);
  padding: 4rem 0;
  font-size: 0.95rem;
  text-align: center;
}

footer h3 {
  color: #fff;
  margin-bottom: 1.5rem;
}

footer p {
  color: rgba(255, 255, 255, 0.9);
}

footer a {
  color: #fff;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

footer a:hover {
  color: var(--color-accent);
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .logo {
    font-size: 1.1rem;
  }

  .btn-sm {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.75rem !important;
  }

  .section {
    padding: 4rem 0;
  }
}

/* Desktop Media Query */
@media (min-width: 768px) {
  h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
  }

  h2 {
    font-size: 2.75rem;
  }

  .section {
    padding: 7rem 0;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

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

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


  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
  }

  .bento-col-4 {
    grid-column: span 4;
  }

  .bento-col-6 {
    grid-column: span 6;
  }

  .bento-col-8 {
    grid-column: span 8;
  }

  .hero {
    /* Adjusted desktop padding: less top, more bottom */
    padding: 6rem 0 10rem 0;
    text-align: left;
  }

  .hero-visual {
    margin-top: 0;
    height: 100%;
  }

  footer {
    text-align: left;
  }
}