/*
  Sparse Flash Urban Intelligence — Warm Friendly UI
  - Mobile-first, flexbox-only layouts
  - Soft, warm aesthetics with brand colors
  - Accessible typography and interactions
  - Includes mobile menu and cookie consent UI
*/

/* =============================
   CSS Reset & Base Normalize
============================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Tahoma, Geneva, sans-serif; color: #1F2937; background: #FFFDFB; line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0 0 0 1.2rem; }

/* =============================
   Design Tokens (CSS Variables)
============================= */
:root {
  /* Brand */
  --primary: #0A3D62; /* deep trustworthy blue */
  --secondary: #166F6B; /* teal */
  --accent: #F5F7FA; /* cool soft */
  /* Warm Friendly Aesthetic */
  --warm-0: #FFFFFF;
  --warm-1: #FFF7F0; /* soft peach */
  --warm-2: #FDEAD9; /* peach sand */
  --warm-3: #F8DCC7; /* warm highlight */
  --ink: #24323F; /* primary body text */
  --muted: #6B7280; /* secondary text */
  --line: #E7E5E4; /* subtle divider */
  /* Feedback */
  --success: #2D936C;
  --danger: #C2410C;
  --warning: #F59E0B;
  /* Effects */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(10,61,98,0.08);
  --shadow: 0 6px 20px rgba(10,61,98,0.10);
  --shadow-lg: 0 12px 32px rgba(10,61,98,0.12);
  /* Typography */
  --display-font: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --body-font: Verdana, Tahoma, Geneva, sans-serif;
}

/* =============================
   Global Layout Helpers
============================= */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.section { margin-bottom: 60px; padding: 40px 20px; } /* mandatory spacing pattern */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* =============================
   Typography
============================= */
h1, h2, h3, h4 { font-family: var(--display-font); color: var(--primary); margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }

p, li { font-size: 16px; color: var(--ink); }
strong { color: var(--primary); }
.lead, .hero p { font-size: 18px; color: #2B3540; }
.small { font-size: 14px; color: var(--muted); }

/* Links */
a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
a:hover { color: #125955; }
a.button { text-decoration: none; }

/* Focus states */
:focus-visible { outline: 3px solid #FBC38B; outline-offset: 2px; border-radius: 6px; }

/* =============================
   Buttons
============================= */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 14px; font-weight: 700; font-family: var(--display-font);
  color: #fff; background: var(--primary);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: #0B456E; }
.button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.button.secondary { background: var(--warm-2); color: #2C2A29; border: 1px solid #F4D8C5; }
.button.secondary:hover { background: #FADFCB; }
.button.ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }

/* =============================
   Header & Navigation
============================= */
header { background: var(--warm-1); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; align-items: center; gap: 14px; }
.main-nav a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 10px; transition: background .2s ease, color .2s ease; }
.main-nav a:hover { background: #FFEFE3; color: #1E2B35; }
.main-nav .button { padding: 10px 14px; }

/* Mobile menu */
.mobile-menu-toggle { font-size: 22px; width: 40px; height: 40px; border-radius: 10px; background: var(--warm-2); color: #2B2B2B; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.mobile-menu-toggle:hover { background: #FADFCB; }
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(36,50,63,0.35);
  display: flex; justify-content: flex-end; align-items: stretch;
  transform: translateX(100%);
  transition: transform .35s ease, background .35s ease;
  z-index: 9999;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .mobile-nav {
  background: #FFF;
  width: 85%; max-width: 360px; padding: 20px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-lg);
}
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; font-size: 20px; color: #2B2B2B; background: var(--accent); margin-bottom: 10px; }
.mobile-nav a {
  display: flex; align-items: center; padding: 14px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.mobile-nav a:hover { background: var(--warm-1); }

/* =============================
   Hero Section
============================= */
.hero { background: var(--warm-1); border-bottom: 1px solid var(--line); }
.hero .content-wrapper { padding: 40px 0; }
.hero h1 { color: var(--primary); font-size: 32px; }
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* Stats & KPI */
.stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.kpi { background: #FFF; border: 1px solid #F2E7DD; border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; min-width: 140px; box-shadow: var(--shadow-sm); }
.kpi strong { font-size: 22px; color: #1E2B35; line-height: 1.2; }
.kpi span { font-size: 14px; color: var(--muted); }
.kpi-tiles { display: flex; flex-wrap: wrap; gap: 16px; }

/* Trust list */
.trust { display: flex; flex-direction: column; gap: 8px; }
.trust ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trust li { display: flex; align-items: center; gap: 8px; background: #FFF; border: 1px solid #F2E7DD; border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow-sm); }
.trust img { width: 18px; height: 18px; }

/* =============================
   Feature Grid & Cards
============================= */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature {
  flex: 1 1 100%;
  background: #FFF; border: 1px solid #F1E6DA; border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: #FFFCF9; }
.feature img { width: 36px; height: 36px; }

/* Service list */
.service-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.service-list li {
  background: #FFF; border: 1px solid #F1E6DA; border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
}

/* Process steps */
.process-steps { display: flex; flex-direction: column; gap: 10px; counter-reset: step; padding-left: 0; list-style: none; }
.process-steps li { background: var(--warm-1); border: 1px solid #F1E6DA; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); position: relative; display: flex; align-items: center; gap: 10px; }
.process-steps li::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 20px; background: var(--secondary); color: #FFF; font-weight: 700; }

/* Feature list */
.feature-list { display: flex; flex-direction: column; gap: 10px; padding-left: 0; list-style: none; }
.feature-list li { background: #FFF; border: 1px solid #F1E6DA; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); }

/* Checklists */
.checklist { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; background: #FFF; border: 1px solid #F1E6DA; border-radius: 12px; padding: 10px 12px; }
.checklist li::before { content: '✔'; color: var(--success); font-weight: 700; }

/* Text blocks */
.text-section {
  background: #FFF; border: 1px solid #F1E6DA; border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.text-section h3 { margin-bottom: 6px; }

/* Contact cards side-by-side */
.contact-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.contact-cards .text-section { flex: 1 1 260px; }
.text-section p img { display: inline-block; vertical-align: middle; margin-right: 8px; width: 16px; height: 16px; }

/* Case snippets */
.case-snippets { display: flex; flex-direction: column; gap: 8px; }
.diagram-legend, .policy-highlights { background: var(--warm-1); border: 1px solid #F1E6DA; padding: 12px 14px; border-radius: 12px; }

/* =============================
   Testimonials (High Contrast)
============================= */
.testimonial-card {
  background: #FFFFFF; color: #111827;
  border: 1px solid #E7E5E4; border-radius: 16px; box-shadow: var(--shadow);
}
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: #334155; }

/* =============================
   Footer
============================= */
footer { background: #FFF; border-top: 1px solid var(--line); margin-top: 40px; }
footer .content-wrapper { padding: 30px 0; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand .logo img { height: 32px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav > div { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; background: var(--warm-1); border: 1px solid #F1E6DA; border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); }
.footer-nav h4 { margin: 0 0 4px; color: var(--primary); }
.footer-nav a { color: #263645; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.footer-nav a:hover { background: #FFEFE3; }

/* =============================
   Cookie Consent Banner & Modal
============================= */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: -200px; z-index: 9998;
  background: #FFFFFF; border-top: 1px solid #E7E5E4; box-shadow: 0 -6px 20px rgba(10,61,98,0.12);
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  transition: bottom .35s ease;
}
.cookie-banner.show { bottom: 0; }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .button { padding: 10px 14px; }
.cookie-actions .button.reject { background: #FFEDE3; color: #2C2A29; border: 1px solid #F4D8C5; }
.cookie-actions .button.reject:hover { background: #FFE3D1; }
.cookie-actions .button.settings { background: var(--secondary); }

/* Cookie Preferences Modal */
.cookie-modal {
  position: fixed; inset: 0; background: rgba(17,24,39,0.45); display: none;
  align-items: center; justify-content: center; padding: 20px; z-index: 10000;
}
.cookie-modal.open { display: flex; }
.cookie-modal .modal-panel {
  background: #FFFFFF; width: 100%; max-width: 680px; border-radius: 16px; border: 1px solid #E7E5E4; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
}
.cookie-modal header { display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; padding: 0; }
.cookie-modal h3 { margin: 0; }
.cookie-category { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #F1E6DA; border-radius: 12px; background: #FFFCF9; }
.cookie-footer { display: flex; gap: 10px; justify-content: flex-end; }

/* Toggle switch */
.cookie-toggle { display: flex; align-items: center; gap: 8px; }
.cookie-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-switch { width: 46px; height: 26px; border-radius: 20px; background: #E5E7EB; position: relative; transition: background .2s ease; }
.cookie-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFF; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.cookie-toggle input:checked + .cookie-switch { background: #34D399; }
.cookie-toggle input:checked + .cookie-switch::after { transform: translateX(20px); }
.cookie-note { font-size: 14px; color: var(--muted); }

/* =============================
   Utilities
============================= */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #FFEFE3; border: 1px solid #F4D8C5; color: #3A2F28; border-radius: 999px; font-size: 12px; font-weight: 700; }
.divider { height: 1px; background: var(--line); width: 100%; }

/* =============================
   Responsive Layouts (Flex-only)
============================= */
@media (min-width: 600px) {
  .feature { flex: 1 1 calc(50% - 10px); }
  .kpi { min-width: 180px; }
}

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .hero .content-wrapper { padding: 60px 0; }
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  .text-image-section { flex-direction: row; }
  .feature { flex: 1 1 calc(50% - 10px); }
  .feature-grid { gap: 24px; }
  .service-list { gap: 16px; }
  .contact-cards { gap: 24px; }
}

@media (min-width: 1024px) {
  .feature { flex: 1 1 calc(25% - 18px); }
  .footer-nav { gap: 24px; }
}

/* =============================
   Page-specific small touches
============================= */
/* Ensure adequate spacing between sections */
main > section { padding: 30px 0; }

/* Accent backgrounds for certain sections for rhythm */
main > section:nth-child(odd) .content-wrapper:not(.hero .content-wrapper) { background: transparent; }

/* Headers inside sections */
main h2 { border-left: 6px solid var(--warm-3); padding-left: 10px; }

/* Lists inside features */
.feature ul { margin: 0; padding-left: 1.1rem; }
.feature li { margin: 4px 0; }

/* KPI groups inside sections */
.kpi-tiles .kpi { background: var(--warm-1); }

/* =============================
   Accessibility & States
============================= */
button:focus-visible, .button:focus-visible, a:focus-visible { box-shadow: 0 0 0 3px #FFD9B8; }
[hidden] { display: none !important; }

/* =============================
   Specific class support from HTML
============================= */
/* content-grouping wrappers in pages */
.case-snippets p, .policy-highlights p, .diagram-legend p { margin: 0; }

/* KPI and stats in hero/platform pages */
.stats .kpi { flex: 1 1 160px; }

/* Footer brand on home */
.footer-brand p { color: #2B3540; }

/* Reduce underline on nav links for cleaner look */
.main-nav a { text-decoration: none; }

/* =============================
   Print basics
============================= */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}