/* =====================================
   Brisk Power Ausbau - Soft Pastel UI
   Complete CSS (mobile-first, flexbox-only)
   ===================================== */

/* -----------------------------
   CSS Reset & Base Normalize
----------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { padding-left: 1.2rem; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }

/* -----------------------------
   Theme Variables (Soft Pastel)
----------------------------- */
:root {
  --primary: #1F2937; /* brand dark (text) */
  --secondary: #B45309; /* brand warm accent */
  --accent: #F5F5F4; /* brand light background */

  /* Soft pastel palette */
  --pastel-pink: #FDE2E4;
  --pastel-peach: #FFE5D9;
  --pastel-mint: #E7F3EE;
  --pastel-blue: #E7F0FF;
  --pastel-lavender: #EEE8FF;
  --pastel-yellow: #FFF6D8;

  --surface: #FFFFFF;
  --ink: #1F2937;
  --muted: #6B7280;
  --shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --gap-s: 12px;
  --gap-m: 20px;
  --gap-l: 24px;
  --gap-xl: 32px;
}

/* -----------------------------
   Typography
----------------------------- */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* brand body */
  color: var(--ink);
  background: var(--accent);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3 { font-family: "Arial Black", Arial, Helvetica, sans-serif; /* brand display */ }

h1 { font-size: 32px; line-height: 1.2; letter-spacing: 0.2px; }
h2 { font-size: 24px; line-height: 1.25; margin-bottom: 12px; }
h3 { font-size: 18px; line-height: 1.3; }

p { font-size: 16px; color: var(--ink); }
small, .small { font-size: 14px; color: var(--muted); }
strong { font-weight: 700; }

/* Links */
a { color: var(--primary); transition: color 0.2s ease, opacity 0.2s ease; }
a:hover { color: var(--secondary); }
a:active { opacity: 0.8; }

/* Lists */
ul li, ol li { margin-bottom: 8px; }
ul li img { vertical-align: middle; margin-right: 8px; display: inline-block; }

/* Blockquote */
blockquote { background: var(--pastel-lavender); padding: 16px; border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--primary); }

/* Details / Summary (FAQs) */
details { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 700; position: relative; display: flex; align-items: center; gap: 10px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; font-weight: 700; color: var(--secondary); transition: transform 0.2s ease; }
details[open] summary::after { content: "–"; transform: rotate(180deg); }
details > div { padding: 0 20px 16px 20px; color: var(--ink); }

/* -----------------------------
   Layout Wrappers (Flexbox Only)
----------------------------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

/* Mandatory spacing class (also apply to all section) */
.section { margin-bottom: 60px; padding: 40px 20px; }
section { margin-bottom: 60px; padding: 40px 0; }

/* Flex utility layouts required */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: 20px; }
.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; background: #FAFAFF; border: 1px solid #ECECFE; border-radius: var(--radius-m); box-shadow: var(--shadow); color: var(--primary); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* -----------------------------
   Header & Navigation
----------------------------- */
header { background: var(--surface); border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; z-index: 50; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 20px; gap: var(--gap-m); }
header img { height: 36px; width: auto; }

/* Desktop nav base (hidden on mobile) */
header nav { display: none; align-items: center; gap: 14px; flex-wrap: wrap; }
header nav a { padding: 10px 12px; border-radius: 999px; color: var(--primary); background: transparent; }
header nav a:hover { background: var(--pastel-mint); color: var(--primary); }

/* CTA buttons (links used as buttons) */
.cta-primary, a.cta-primary, button.cta-primary {
  background: var(--pastel-peach);
  color: var(--primary);
  border: 2px solid #FFD6C2;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.cta-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: #FFDCCF; }

.cta-secondary, a.cta-secondary, button.cta-secondary {
  background: var(--surface);
  color: var(--secondary);
  border: 2px solid #F4E6D8;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta-secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: #FFF9F3; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--pastel-blue); color: var(--primary); box-shadow: var(--shadow); }
.mobile-menu-toggle:hover { background: #DBE7FF; }

/* Mobile slide-in menu */
.mobile-menu {
  position: fixed; inset: 0; /* top/right/bottom/left */
  background: rgba(31,41,55,0.15);
  display: flex; /* overlay container */
  align-items: stretch; justify-content: flex-end;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 100;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .mobile-nav {
  background: var(--surface);
  width: 88%; max-width: 360px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; overflow-y: auto;
}
.mobile-menu-close {
  position: absolute; top: 14px; right: 14px; /* allowed for controls */
  width: 40px; height: 40px; border-radius: 10px; background: var(--pastel-pink); color: var(--primary); box-shadow: var(--shadow);
}
.mobile-nav a { padding: 14px 12px; border-radius: 10px; background: var(--accent); color: var(--primary); }
.mobile-nav a:hover { background: var(--pastel-mint); }

/* Show desktop nav on wider screens */
@media (min-width: 992px) {
  header nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* -----------------------------
   Hero Sections
----------------------------- */
.hero { background: var(--pastel-blue); border-bottom: 1px solid #E3EAFD; }
.hero .container { padding-top: 32px; padding-bottom: 32px; }
.hero .text-section { display: flex; flex-direction: column; gap: var(--gap-m); }
.hero h1 { color: var(--primary); }
.hero p { color: var(--ink); max-width: 60ch; }

.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* Trust badges */
.trust-badges, .social-proof-badges, .trust-indicators { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trust-badges li, .trust-indicators li { list-style: none; background: var(--surface); padding: 8px 12px; border-radius: 999px; box-shadow: var(--shadow); color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.trust-badges img, .social-proof-badges img { width: 22px; height: 22px; }

/* -----------------------------
   Features, Services, Cases (Cards)
----------------------------- */
.feature-grid, .service-cards, .case-list { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div, .service-cards > div, .case-list > div { flex: 1 1 260px; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.feature-grid img, .service-cards img { width: 36px; height: 36px; }

.metrics-list ul { display: flex; flex-wrap: wrap; gap: 12px; background: var(--pastel-mint); border: 1px solid #D6EAE2; padding: 16px; border-radius: var(--radius-m); }
.metrics-list li { list-style: none; padding: 8px 12px; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); }

/* Ratings summary */
.ratings-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--pastel-yellow); border: 1px solid #FFE9AE; padding: 16px; border-radius: var(--radius-m); box-shadow: var(--shadow); color: var(--primary); }
.ratings-summary .social-proof-badges { margin-left: auto; }

/* -----------------------------
   Process Lists
----------------------------- */
.process-steps, ol { counter-reset: step; }
.process-steps li, .content-wrapper > ol li, section ol li { margin-left: 0; padding-left: 0; }

/* -----------------------------
   Testimonials (Contrast ensured)
----------------------------- */
.testimonials { background: var(--pastel-pink); border-top: 1px solid #FAD1D6; border-bottom: 1px solid #FAD1D6; }
.testimonials .testimonial-card { background: var(--surface); border: 1px solid #F0EAF8; color: var(--primary); }
.testimonial-card p { font-size: 16px; }
.testimonial-source, .testimonial-card span { color: var(--muted); font-size: 14px; }

/* -----------------------------
   Address & Contact blocks
----------------------------- */
address { background: var(--surface); padding: 16px; border-radius: var(--radius-m); box-shadow: var(--shadow); font-style: normal; }
.mini-contact-form { background: var(--pastel-mint); border: 1px solid #D6EAE2; padding: 16px; border-radius: var(--radius-m); box-shadow: var(--shadow); }
.support-channels { display: flex; flex-direction: column; gap: 6px; background: var(--pastel-mint); border: 1px solid #D6EAE2; padding: 16px; border-radius: var(--radius-m); }
.support-channels span { font-weight: 700; color: var(--secondary); }

/* -----------------------------
   CTA Section
----------------------------- */
.cta { background: var(--pastel-peach); border-top: 1px solid #FFD6C2; border-bottom: 1px solid #FFD6C2; }
.cta h2 { color: var(--primary); }
.cta .content-wrapper { align-items: flex-start; }

/* -----------------------------
   Footer
----------------------------- */
footer { background: var(--surface); border-top: 1px solid #E5E7EB; }
footer .content-wrapper { flex-direction: column; gap: 16px; padding: 24px 0; }
.footer-nav, .footer-legal { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a, .footer-legal a { padding: 8px 12px; border-radius: 999px; background: var(--accent); }
.footer-nav a:hover, .footer-legal a:hover { background: var(--pastel-lavender); }
.footer-contact address { background: var(--accent); box-shadow: none; border: 1px solid #EAEAEA; }
copyright, .copyright { color: var(--muted); font-size: 14px; }

/* -----------------------------
   Forms (basic placeholders)
----------------------------- */
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 12px; background: var(--surface); font: inherit; }
input:focus, select:focus, textarea:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px rgba(147,197,253,0.35); outline: none; }
label { font-weight: 700; margin-bottom: 6px; display: inline-block; }

/* -----------------------------
   Mobile-first Responsive Rules
----------------------------- */
@media (min-width: 600px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
}
@media (min-width: 992px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .text-image-section { flex-direction: row; align-items: center; }
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* -----------------------------
   Page-specific minor helpers
----------------------------- */
.values-list, .usp-list { display: flex; flex-wrap: wrap; gap: 10px; }
.values-list li, .usp-list li { list-style: none; background: var(--surface); padding: 10px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.privacy-note { background: var(--pastel-lavender); border: 1px solid #E3DDFD; padding: 12px 14px; border-radius: var(--radius-m); }

/* -----------------------------
   Animations
----------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero .text-section, .cta, .testimonial-card, .feature-grid > div, .service-cards > div, .case-list > div { animation: fadeUp 0.4s ease both; }

/* -----------------------------
   Cookie Consent Banner & Modal
----------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid #E5E7EB;
  box-shadow: 0 -8px 24px rgba(31,41,55,0.08);
  padding: 16px 20px;
  z-index: 90;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex; flex-direction: column; gap: 12px;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: 12px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-accept { background: var(--pastel-mint); border: 2px solid #D6EAE2; color: var(--primary); padding: 10px 14px; border-radius: 999px; font-weight: 700; }
.cookie-accept:hover { background: #DFF0E8; }
.cookie-reject { background: var(--surface); border: 2px solid #E5E7EB; color: var(--primary); padding: 10px 14px; border-radius: 999px; font-weight: 700; }
.cookie-reject:hover { background: #FAFAFA; }
.cookie-settings { background: var(--pastel-peach); border: 2px solid #FFD6C2; color: var(--primary); padding: 10px 14px; border-radius: 999px; font-weight: 700; }
.cookie-settings:hover { background: #FFDCCF; }

/* Cookie Modal */
.cookie-overlay { position: fixed; inset: 0; background: rgba(31,41,55,0.35); display: none; align-items: center; justify-content: center; z-index: 120; }
.cookie-overlay.open { display: flex; }
.cookie-modal { width: min(680px, 92vw); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .option-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--accent); padding: 10px 12px; border-radius: var(--radius-m); }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* -----------------------------
   Accessibility & Micro-interactions
----------------------------- */
[role="button"], .cta-primary, .cta-secondary, .mobile-menu-toggle, .cookie-accept, .cookie-reject, .cookie-settings { transition: transform 0.2s ease, box-shadow 0.2s ease; }
[role="button"]:hover, .cookie-accept:hover, .cookie-reject:hover, .cookie-settings:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* -----------------------------
   Spacing Utilities (8pt scale)
----------------------------- */
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }

/* -----------------------------
   Ensure min spacing between cards/sections
----------------------------- */
.feature-grid > div, .service-cards > div, .case-list > div, .testimonial-card { margin-bottom: 20px; }
section + section { margin-top: 0; }

/* -----------------------------
   Desktop Enhancements
----------------------------- */
@media (min-width: 992px) {
  .container { gap: 32px; }
  .content-wrapper { gap: 28px; }
  .cta .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* -----------------------------
   Readability in Testimonials/Reviews
----------------------------- */
.testimonials p, .testimonials strong, .ratings-summary { color: var(--primary); }

/* -----------------------------
   Additional elements used across pages
----------------------------- */
.text-section { display: flex; flex-direction: column; gap: 12px; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.social-proof-badges li { list-style: none; }

/* End of stylesheet */