/* Breezy Moon Fiscale Academie - style.css
   Design: tech_futuristic (solid-color variant for compatibility)
   Constraints: Flexbox-only layouts (no CSS Grid/Columns), mobile-first
   Brand: Primary #0B3C5D, Secondary #2C7A7B, Accent #F4F7FB; Fonts: Georgia (display), Verdana (body)
===================================================================== */
/* 1) RESET & NORMALIZE */
* { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.25rem; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
:focus-visible { outline: 2px solid #2C7A7B; outline-offset: 2px; }

/* 2) THEME TOKENS (with fallbacks) */
:root {
  --color-bg: #0A1220;           /* deep tech navy */
  --color-surface: #0E1B2C;      /* elevated surface */
  --color-surface-2: #11263D;    /* card surface */
  --color-text: #E6EEF7;         /* primary text on dark */
  --color-muted: #B7C7D9;        /* muted text */
  --color-primary: #0B3C5D;      /* brand primary */
  --color-secondary: #2C7A7B;    /* brand secondary (neon accent) */
  --color-accent: #F4F7FB;       /* brand accent (light) */
  --color-border: rgba(188, 222, 232, 0.25);
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px;
  --shadow-soft: 0 8px 20px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 0 0 rgba(44,122,123,0.0), 0 0 24px rgba(44,122,123,0.25);
  --container-max: 1200px;
}

/* 3) BASE TYPOGRAPHY */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* brand body */
  font-size: 16px; line-height: 1.7;
}
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; /* brand display */
  letter-spacing: 0.3px; color: #FFFFFF; }
.tagline { color: var(--color-secondary); font-weight: 600; letter-spacing: 0.6px; }

/* Type scale */
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.3; }
p { color: var(--color-text); }
small, .muted { color: var(--color-muted); font-size: 14px; }

@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }
}

/* 4) GLOBAL LAYOUT UTILITIES (Flexbox-only) */
.container {
  width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
}
.content-wrapper {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between;
}
/* Ensure headings span full width inside flexible wrappers */
.content-wrapper > h1, .content-wrapper > h2, .content-wrapper > h3,
.content-wrapper > p, .content-wrapper > ol, .content-wrapper > ul,
.content-wrapper > nav, .content-wrapper > .logo { flex: 1 1 100%; }

/* MANDATORY SPACING AND ALIGNMENT PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.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; }

/* Default section styling to match tech_futuristic */
main section { margin-bottom: 60px; }
main section .container { background: transparent; }

/* 5) HEADER & NAV */
header { position: sticky; top: 0; z-index: 1000; background: rgba(11, 60, 93, 0.92); box-shadow: var(--shadow-soft); }
header .container { padding-top: 14px; padding-bottom: 14px; }
header .content-wrapper { align-items: center; }
.logo img { height: 36px; filter: drop-shadow(0 0 8px rgba(44,122,123,0.25)); }

.main-nav { display: none; gap: 16px; align-items: center; }
.main-nav a { color: #E8F4F7; padding: 8px 10px; border-radius: 8px; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.main-nav a:hover { background: rgba(44,122,123,0.15); color: #FFFFFF; transform: translateY(-1px); }

.button.primary { margin-left: 0; }

.mobile-menu-toggle {
  margin-left: auto; font-size: 24px; width: 44px; height: 44px; border-radius: 12px; color: #FFFFFF;
  background: rgba(44,122,123,0.18); border: 1px solid rgba(188,222,232,0.25);
  display: flex; align-items: center; justify-content: center; transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mobile-menu-toggle:hover { background: rgba(44,122,123,0.28); box-shadow: var(--shadow-glow); transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; background: rgba(10,18,32,0.98); color: #FFFFFF; z-index: 10000;
  transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; padding: 20px; gap: 14px;
}
.mobile-menu[aria-hidden="false"], .mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end; font-size: 22px; width: 42px; height: 42px; border-radius: 10px; color: #FFFFFF;
  background: rgba(44,122,123,0.25); border: 1px solid rgba(188,222,232,0.25);
  display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease;
}
.mobile-menu-close:hover { background: rgba(44,122,123,0.35); transform: rotate(90deg); }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mobile-nav a { padding: 14px 12px; border-radius: 10px; background: rgba(17,38,61,0.85); border: 1px solid rgba(188,222,232,0.2);
  transition: background .2s ease, transform .2s ease; }
.mobile-nav a:hover { background: rgba(44,122,123,0.22); transform: translateX(4px); }

/* Desktop switch */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  header .content-wrapper { flex-wrap: nowrap; gap: 20px; }
  header .content-wrapper > .logo { flex: 0 0 auto; }
  header .content-wrapper > .main-nav { margin-left: 20px; }
  header .content-wrapper > .button.primary { margin-left: auto; }
}

/* 6) BUTTONS & LINKS */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: #133652; color: #E8F4F7; font-weight: 700; letter-spacing: 0.3px;
  box-shadow: var(--shadow-glow); transition: background .2s ease, box-shadow .25s ease, transform .2s ease; }
.button:hover { background: #164360; box-shadow: 0 0 0 2px rgba(44,122,123,0.15), 0 0 28px rgba(44,122,123,0.35); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button.primary { background: var(--color-secondary); border-color: rgba(44,122,123,0.6); color: #06121C; }
.button.primary:hover { background: #2F8F90; }
.link { color: #9FE7E5; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.link:hover { color: #C9FCFB; }

/* 7) CARD & CONTENT BLOCKS */
.text-section, .card { flex: 1 1 280px; background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-soft);
  position: relative; }
.text-section:hover, .card:hover { box-shadow: 0 0 0 2px rgba(44,122,123,0.2), 0 10px 30px rgba(0,0,0,0.35); }
.text-section h3 { color: #FFFFFF; }

/* Lists inside text blocks */
.text-section ul, .text-section ol { margin-top: 8px; }
.text-section li { margin-bottom: 8px; }

/* 8) LISTS & INLINE ICONS */
ul { list-style: none; padding-left: 0; }
ul li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
ul li img { width: 20px; height: 20px; filter: drop-shadow(0 0 8px rgba(44,122,123,0.3)); }
ol { padding-left: 22px; }
ol li { margin-bottom: 10px; }

/* 9) HERO/INTRO SECTIONS */
main section:first-of-type .container { padding-top: 40px; padding-bottom: 10px; }
main section:first-of-type .content-wrapper { align-items: flex-start; }
main section:first-of-type h1 + .tagline { margin-top: -6px; }

/* 10) TESTIMONIALS (light on dark rule: readable cards) */
.testimonial-card {
  background: var(--color-accent); color: #0B3C5D; border-radius: var(--radius-md);
  border: 1px solid #DDE7F4; box-shadow: 0 6px 14px rgba(11,60,93,0.15);
}
.testimonial-card p { color: #0B3C5D; }
.testimonial-card strong { color: #0B3C5D; }

/* 11) MEDIA ALIGNMENT FOR TEXT-IMAGE SECTIONS */
.text-image-section { align-items: center; }
.text-image-section > * { flex: 1 1 320px; }
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* 12) GENERIC FLEX UTILITIES (for potential reuse) */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-20 { gap: 20px; }

/* 13) SECTION THEMING */
/* Light-content sections (e.g., FAQs or statistics) retain dark base but use accent borders */
main section .content-wrapper { border-radius: var(--radius-lg); }

/* 14) FOOTER */
footer { background: #081726; padding: 40px 0; border-top: 1px solid rgba(188,222,232,0.2); }
footer .content-wrapper { gap: 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }
footer nav a { color: #D5E7F4; opacity: 0.9; }
footer nav a:hover { opacity: 1; color: #FFFFFF; }
footer .text-section { background: transparent; border: 1px solid rgba(188,222,232,0.12); }
footer .logo img { height: 34px; }

/* 15) FORMS (generic, in case of future forms) */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; background: #0F2236; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(44,122,123,0.6); }

/* 16) RESPONSIVE CONTENT SIZING */
@media (min-width: 768px) {
  .text-section, .card { flex: 1 1 calc(50% - 12px); }
}
@media (min-width: 1100px) {
  .text-section, .card { flex: 1 1 calc(33.333% - 16px); }
}

/* 17) HEADINGS + META SPACING */
.content-wrapper > h1 { margin-top: 8px; }
.content-wrapper > h2 { margin-top: 8px; }
.content-wrapper > p { max-width: 70ch; }

/* 18) ICON TEXT ROWS */
.text-section p img, p img { width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 8px; }

/* 19) CTA BARS */
.cta-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* 20) COOKIE CONSENT BANNER & MODAL (fixed, smooth animations) */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: #0E1B2C; color: var(--color-text);
  border-top: 1px solid rgba(188,222,232,0.25); box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; transform: translateY(120%);
  transition: transform .35s ease;
}
.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: 12px; }
.cookie-actions .button { padding: 10px 14px; }
.cookie-actions .accept { background: var(--color-secondary); color: #06121C; border-color: rgba(44,122,123,0.6); }
.cookie-actions .reject { background: #143044; color: #E6EEF7; }
.cookie-actions .settings { background: transparent; color: #C9FCFB; border-color: rgba(188,222,232,0.35); }
.cookie-actions .settings:hover { background: rgba(44,122,123,0.15); }

/* Cookie Preferences Modal */
.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9500; display: none; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal-overlay.show { display: flex; }
.cookie-modal { width: 100%; max-width: 720px; background: #0E1B2C; color: var(--color-text);
  border: 1px solid rgba(188,222,232,0.3); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 18px; padding: 20px;
}
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 14px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #10243A; border: 1px solid rgba(188,222,232,0.2); border-radius: 12px; padding: 12px 14px; }
.cookie-category .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* Toggle switch */
.toggle { display: flex; align-items: center; gap: 10px; }
.toggle input[type="checkbox"] { appearance: none; width: 46px; height: 26px; border-radius: 26px; background: #31485F; position: relative; outline: none; border: 1px solid rgba(188,222,232,0.25); transition: background .2s ease; }
.toggle input[type="checkbox"]:after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #E6EEF7; transition: transform .2s ease; }
.toggle input[type="checkbox"]:checked { background: #2C7A7B; }
.toggle input[type="checkbox"]:checked:after { transform: translateX(20px); }

/* 21) ACCESSIBILITY HELPERS */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 22) PAGE-SPECIFIC FINESSE */
/* Index hero CTAs */
main .button + .link { margin-left: 8px; }

/* Pricing emphasis */
.text-section strong { color: #C9FCFB; }

/* Contact links */
a[href^="tel:"], a[href^="mailto:"] { color: #9FE7E5; text-decoration: underline; text-underline-offset: 2px; }
a[href^="tel:"]:hover, a[href^="mailto:"]:hover { color: #C9FCFB; }

/* Stats lines */
.content-wrapper > p img { margin-right: 8px; }

/* 23) ENSURE NO OVERLAP & CONSISTENT SPACING */
section .content-wrapper > * { margin-bottom: 0; }
section + section { margin-top: 0; }

/* 24) DESKTOP LAYOUT ENHANCEMENTS */
@media (min-width: 992px) {
  .container { padding-left: 24px; padding-right: 24px; }
  /* Let primary paragraphs remain readable width */
  .content-wrapper > p { flex: 1 1 720px; }
}

/* 25) HIGH-CONTRAST GUARANTEES FOR TESTIMONIAL/REVIEW SECTIONS */
/* Enforce dark text on light backgrounds for any element labeled as testimonial */
[class*="testimonial"] { color: #0B3C5D; }
[class*="testimonial"] p, [class*="testimonial"] strong, [class*="testimonial"] span { color: #0B3C5D; }

/* 26) DECORATIVE EDGE (neon borders) without gradients */
.text-section { box-shadow: inset 0 0 0 1px rgba(44,122,123,0.25), var(--shadow-soft); }
.text-section:hover { box-shadow: inset 0 0 0 2px rgba(44,122,123,0.45), 0 12px 32px rgba(0,0,0,0.45); }

/* 27) HEADER HOVER MICRO GLOW */
header { border-bottom: 1px solid rgba(188,222,232,0.18); }
header .button.primary { box-shadow: 0 0 0 0 rgba(44,122,123,0.0); }
header .button.primary:hover { box-shadow: 0 0 0 2px rgba(44,122,123,0.2), 0 0 24px rgba(44,122,123,0.4); }

/* 28) PRINT STYLES (minimal) */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .text-section, .card, .testimonial-card { box-shadow: none; background: #FFFFFF; border: 1px solid #CCC; }
}

/* 29) SAFETY: Prevent any unintended absolute overlaps */
/* We avoid absolute positioning for content cards as required. Only fixed is used for menu & cookie banners. */

/* END */