/* =========================================================
   SpectraFlux Apartamenty Inwestycyjne — style.css
   Design: gradient_modern (modern gradients, smooth transitions)
   Layout: Mobile-first, ONLY Flexbox (no grid/columns)
   Typography: Georgia (display), Arial (body)
   ========================================================= */

/* ---------------------- CSS RESET / NORMALIZE ---------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: #0B3351; background-color: #FFFFFF; }
img { max-width: 100%; height: auto; display: block; }
a { color: #0B3351; text-decoration: none; }
ul, ol { padding-left: 1.2rem; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px 0; font-family: Georgia, 'Times New Roman', serif; color: #0B3351; }
p { margin: 0 0 12px 0; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
:root {
  /* Brand colors with fallbacks */
  --color-primary: #0B3351; /* deep blue */
  --color-secondary: #2E7D6B; /* modern green */
  --color-accent: #F6F3EC; /* warm light accent */
  --color-text: #0B3351;
  --color-muted: #6B7C8C;
  --color-white: #FFFFFF;
  --shadow-1: 0 6px 18px rgba(11,51,81,0.12);
  --shadow-2: 0 10px 30px rgba(11,51,81,0.18);
}

/* ---------------------- TYPOGRAPHY SCALE (Mobile-first) ---------------------- */
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.25; }
h3 { font-size: 18px; line-height: 1.3; }
body, input, button { font-size: 16px; }
.small { font-size: 14px; }

/* ---------------------- GLOBAL CONTAINERS (FLEX ONLY) ---------------------- */
.container { display: flex; width: 100%; justify-content: center; padding: 0 16px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1180px; }

/* Sections spacing (global) */
section { margin-bottom: 60px; padding: 40px 20px; }
/* Mandatory spacing & alignment patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; }
.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; }

/* ---------------------- HEADER ---------------------- */
header { position: sticky; top: 0; z-index: 1000; background: #FFFFFF; border-bottom: 1px solid rgba(11,51,81,0.08); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
header img { height: 32px; width: auto; }
header nav { display: none; gap: 16px; align-items: center; }
header nav a { padding: 8px 10px; border-radius: 10px; color: var(--color-text); transition: color 0.2s ease, background-color 0.2s ease; }
header nav a:hover { background-color: var(--color-accent); }
.cta-bar { display: none; gap: 10px; align-items: center; }
.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background-color: var(--color-accent); transition: transform 0.2s ease, background-color 0.2s ease; }
.mobile-menu-toggle:hover { transform: translateY(-1px); background-color: #EFEAE0; }

/* ---------------------- MOBILE MENU (overlay) ---------------------- */
.mobile-menu { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; padding: 20px; background: #FFFFFF; border-left: 1px solid rgba(11,51,81,0.08);
  transform: translateX(100%); transition: transform 0.35s ease; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--color-accent); margin-bottom: 10px; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border-radius: 12px; font-size: 18px; color: var(--color-text); background-color: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); transition: background-color 0.2s; }
.mobile-nav a:hover { background-color: var(--color-accent); }

/* ---------------------- HERO SECTIONS (gradient_modern) ---------------------- */
.hero-section { color: #FFFFFF; padding: 24px; border-radius: 16px; box-shadow: var(--shadow-1);
  background-color: var(--color-primary); /* fallback */
  background-image: linear-gradient(135deg, #0B3351 0%, #145B8A 50%, #2E7D6B 100%);
}
.hero-section h1, .hero-section p, .hero-section li, .hero-section a { color: #ffffff; }
.brand-logo-lockup img { height: 38px; }
.social-proof-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #E6F0F3; opacity: 0.95; }

/* ---------------------- BUTTONS ---------------------- */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; font-weight: 700; letter-spacing: 0.2px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; border: 1px solid transparent; }
.btn-primary { color: #FFFFFF; background-color: var(--color-secondary); background-image: linear-gradient(135deg, #2E7D6B 0%, #236354 100%); box-shadow: 0 8px 20px rgba(46,125,107,0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-secondary { color: var(--color-primary); background-color: #78a59a; border-color: rgba(11,51,81,0.12); }
.btn-secondary:hover { background-color: #EFEAE0; transform: translateY(-2px); }
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------- INLINE LISTS / CHIPS ---------------------- */
.value-points-inline, .benefit-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.value-points-inline li, .benefit-bullets li { display: flex; align-items: center; padding: 8px 12px; border-radius: 999px; background-color: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #FFFFFF; }

/* ---------------------- FEATURE / SERVICE CARDS ---------------------- */
.feature-grid, .service-cards, .feature-cards, .case-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div, .service-cards > div, .feature-cards > div, .case-grid > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px; background-color: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feature-grid > div:hover, .service-cards > div:hover, .feature-cards > div:hover, .case-grid > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* ---------------------- STATS / BADGES / TRUST ---------------------- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-badges span { padding: 6px 10px; border-radius: 999px; background-color: var(--color-accent); border: 1px solid rgba(11,51,81,0.1); color: var(--color-primary); }
.stat-items { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.stat-items > div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); }
.stat-items strong { color: var(--color-secondary); font-size: 18px; }

/* ---------------------- PROCESSES / STEPS ---------------------- */
.process-steps { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 0; list-style: none; }
.process-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background-color: #FFFFFF; border: 1px solid rgba(11,51,81,0.10); box-shadow: var(--shadow-1); }
.process-steps li strong { color: var(--color-primary); }

/* ---------------------- TEXT SECTIONS ---------------------- */
.text-section { display: flex; flex-direction: column; gap: 12px; }
.text-section ul { margin: 0; padding-left: 18px; }
.esg-note, .sla-highlights, .risk-return-matrix, .location-tiers, .data-refresh-cadence, .sample-insights, .risk-management, .pros-cons, .disclaimer, .founder-note, .certifications, .partners-affiliations, .esg-commitments, .rating-summary, .expected-response-time, .meeting-options, .sla, .office-info, .availability-slots, .definitions, .scope, .user-obligations, .availability, .liability-limitations, .ip-rights, .termination, .complaints-procedure, .purposes-description, .storage-durations, .third-party-cookies, .consent-mechanism, .withdraw-consent, .browser-settings, .privacy-contact-email, .kpi-snippets, .kpi-tiles, .outcome-metrics, .kpi-tiles span, .kpi-snippets span { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); }

/* ---------------------- TESTIMONIALS (dark text on light) ---------------------- */
.testimonial-card { background-color: var(--color-accent); color: var(--color-text); border: 1px solid rgba(11,51,81,0.12); border-radius: 14px; box-shadow: var(--shadow-1); }
.testimonial-card p { margin: 0; }
.testimonial-meta { color: var(--color-muted); font-style: italic; }
.before-after-metrics, .media-mentions, .media-quotes blockquote { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); color: var(--color-text); }
.media-quotes { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------- CONTACT / UTILITY ---------------------- */
.contact-details-inline, .contact-info-inline, .contact-channels { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.contact-details-inline > div, .contact-channels > div, .contact-info-inline > span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #8ac59e; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); }
.map-placeholder { display: flex; justify-content: center; align-items: center; padding: 20px; border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); }
.gdpr-consent { display: flex; align-items: center; gap: 8px; color: var(--color-muted); }
.success-icon img { width: 64px; height: 64px; }
.recommended-links a { color: var(--color-secondary); font-weight: 600; }
.office-hours { color: var(--color-muted); }

/* ---------------------- TABLES ---------------------- */
table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-1); background: #FFFFFF; }
thead { background: var(--color-accent); }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid rgba(11,51,81,0.08); }
tr:hover td { background: #FAF8F3; }

/* ---------------------- BLOCKS / GROUPS ---------------------- */
.kpi-tiles, .outcome-metrics, .kpi-snippets, .partner-logos, .stats-row, .playbooks { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kpi-tiles span, .outcome-metrics span, .kpi-snippets span, .partner-logos span, .stats-row span { display: inline-flex; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.08); box-shadow: var(--shadow-1); }
.team-bios ul, .our-values-list ul, .culture-points ul, .playbooks ul, .faq-list ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; }
.timeline-steps ol { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 0; list-style: none; }
.timeline-steps ol li { padding: 10px 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.12); box-shadow: var(--shadow-1); }

/* ---------------------- CTA INLINE ---------------------- */
.cta-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------- FOOTER ---------------------- */
footer { background: #0B3351; color: #FFFFFF; padding: 30px 0; }
footer .content-wrapper { gap: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px; }
footer nav a { color: #DDE7EE; padding: 6px 8px; border-radius: 8px; transition: background-color 0.2s ease; }
footer nav a:hover { background-color: rgba(255,255,255,0.08); }
footer .newsletter-signup { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; }
footer .social-links { display: flex; gap: 10px; align-items: center; }
footer .social-links a { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.08); align-items: center; justify-content: center; }
footer .copyright-notice { color: #C7D7E3; }

/* ---------------------- COOKIE CONSENT BANNER ---------------------- */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1300; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; color: var(--color-text); background: #FFFFFF; border: 1px solid rgba(11,51,81,0.12); box-shadow: var(--shadow-2); transition: transform 0.3s ease, opacity 0.3s ease; }
.cookie-banner.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
.cookie-banner .cookie-text { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn-accept { background-color: var(--color-secondary); color: #FFFFFF; padding: 10px 14px; border-radius: 999px; border: 1px solid transparent; }
.cookie-buttons .btn-reject { background-color: var(--color-accent); color: var(--color-primary); padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(11,51,81,0.12); }
.cookie-buttons .btn-settings { background-color: #FFFFFF; color: var(--color-primary); padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(11,51,81,0.12); }
.cookie-buttons button:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(11,51,81,0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.cookie-modal.open { opacity: 1; pointer-events: all; }
.cookie-modal .modal-card { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 640px; padding: 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.12); box-shadow: var(--shadow-2); transform: translateY(20px); transition: transform 0.25s ease; }
.cookie-modal.open .modal-card { transform: translateY(0); }
.cookie-modal .modal-header { display: flex; justify-content: space-between; align-items: center; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 10px; }
.cookie-modal .category { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.1); }
.cookie-modal .category .note { color: var(--color-muted); font-size: 14px; }
.cookie-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------------------- UTILITIES ---------------------- */
.muted { color: var(--color-muted); }
.rounded { border-radius: 12px; }
.shadow { box-shadow: var(--shadow-1); }
.centered { display: flex; align-items: center; justify-content: center; }
.divider { height: 1px; background: rgba(11,51,81,0.08); width: 100%; }

/* ---------------------- RESPONSIVE ---------------------- */
@media (min-width: 600px) {
  .content-wrapper { gap: 24px; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}

@media (min-width: 768px) {
  /* Header: show nav and cta on tablet+ */
  header nav { display: flex; }
  .cta-bar { display: flex; }
  .mobile-menu-toggle { display: none; }

  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }

  .text-image-section { flex-direction: row; }
  .hero-section { padding: 32px; }
}

@media (min-width: 992px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  .content-wrapper { gap: 28px; }
}

/* ---------------------- PAGE-SPECIFIC TWEAKS ---------------------- */
/* Analytics page quotes and partners */
.partner-logos span { background: #FFFFFF; }
.media-quotes blockquote { font-style: italic; border-left: 4px solid var(--color-secondary); padding-left: 12px; }

/* Thank you page */
.recommended-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Privacy/RODO helpers */
.gdpr-request-placeholder, .dedicated-privacy { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(11,51,81,0.12); box-shadow: var(--shadow-1); }

/* ---------------------- ACCESSIBILITY / FOCUS ---------------------- */
a, button, .btn-primary, .btn-secondary, .mobile-menu-toggle, .mobile-menu-close, .mobile-nav a { outline: none; }
a:focus-visible, button:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible, .mobile-nav a:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 3px; }

/* ---------------------- HOVER MICRO-INTERACTIONS ---------------------- */
.feature-grid > div:hover h3, .service-cards > div:hover h3, .feature-cards > div:hover h3, .case-grid > div:hover h3 { color: var(--color-secondary); }

/* ---------------------- ENSURE NO OVERLAPPING ---------------------- */
section .content-wrapper > * { margin-right: 0; }

/* ---------------------- FORMS (placeholders in content) ---------------------- */
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-secondary); }

/* ---------------------- SOCIAL ICONS SIZE ---------------------- */
.social-links img { width: 18px; height: 18px; }

/* ---------------------- MAP/IMAGE PLACEHOLDERS ---------------------- */
.map-placeholder img { width: 100%; max-width: 820px; opacity: 0.9; }

/* ---------------------- ADDITIONAL FLEX HELPERS FOR LIST GROUPS ---------------------- */
.add-ons-list { display: flex; flex-direction: column; gap: 8px; }
.deliverables-list ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; }
.media-mentions p { margin: 0; }

/* ---------------------- GRADIENT ACCENTS (subtle, with solid fallbacks) ---------------------- */
/* Light gradient stripe for important blocks */
.sla-highlights, .expected-response-time, .rating-summary, .data-refresh-cadence { background-color: #FFFFFF; background-image: linear-gradient(90deg, rgba(46,125,107,0.12) 0%, rgba(11,51,81,0.08) 100%); }

/* ---------------------- PRINT SAFE ---------------------- */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; color: #000000; }
}