/* Glitra Shield Studio — gradient_modern style.css */
/* Reset & Normalize */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #1F2937; background-color: #FFFFFF; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1F2937; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit; }
button { background: none; border: none; cursor: pointer; }
:focus { outline: 2px solid #8B5CF6; outline-offset: 2px; }

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

/* CSS Variables (with fallbacks where applied) */
:root {
  --color-primary: #1F2937; /* Slate 800 */
  --color-secondary: #8B5CF6; /* Violet 500 */
  --color-accent: #F9FAFB; /* Accent light */
  --color-muted: #6B7280; /* Gray 500 */
  --color-border: #E5E7EB; /* Gray 200 */
  --radius-sm: 8px; 
  --radius-md: 12px; 
  --radius-lg: 16px; 
  --shadow-sm: 0 2px 8px rgba(31,41,55,0.08);
  --shadow-md: 0 8px 24px rgba(31,41,55,0.12);
  --shadow-lg: 0 16px 40px rgba(31,41,55,0.16);
  --gradient-1: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  --gradient-2: linear-gradient(135deg, #1F2937 0%, #374151 100%);
}

/* Layout helpers */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 0; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; }
section { padding: 40px 0; }

/* MANDATORY spacing classes */
.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; }

/* Typography scale */
h1, .h1 { font-family: Montserrat, Inter, system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.2; margin: 0; }
h2, .h2 { font-family: Montserrat, Inter, system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3; margin: 0; }
h3, .h3 { font-weight: 700; font-size: 20px; margin: 0; }
h4, .h4 { font-weight: 600; font-size: 18px; margin: 0; }
p { margin: 0; font-size: 16px; color: var(--color-primary); }
small { color: var(--color-muted); }
.kicker { color: var(--color-secondary); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

/* Modern buttons */
.cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: var(--radius-lg); font-weight: 600; transition: all .25s ease; gap: 8px; }
.cta.primary { color: #FFFFFF; background-color: #8B5CF6; background-image: var(--gradient-1); box-shadow: var(--shadow-sm); }
.cta.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cta.secondary { color: var(--color-secondary); background-color: #FFFFFF; border: 2px solid #8B5CF6; }
.cta.secondary:hover { background-color: #F3E8FF; transform: translateY(-1px); }
button, .btn { transition: all .2s ease; }

/* Header */
header { position: sticky; top: 0; z-index: 50; background-color: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--color-border); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; height: 64px; }
header a img { height: 28px; width: auto; }
header nav { display: none; align-items: center; gap: 14px; }
header nav a { padding: 8px 10px; border-radius: 8px; color: var(--color-primary); font-weight: 500; }
header nav a:hover { background-color: var(--color-accent); }
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--color-primary); background-color: #FFFFFF; box-shadow: var(--shadow-sm); }
.mobile-menu-toggle:hover { box-shadow: var(--shadow-md); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 100vw; background: #FFFFFF; transform: translateX(100%); transition: transform .35s ease; z-index: 100; display: flex; flex-direction: column; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; margin: 14px 16px 0; width: 40px; height: 40px; border-radius: 10px; background-color: var(--color-accent); color: var(--color-primary); }
.mobile-nav { display: flex; flex-direction: column; padding: 20px; gap: 12px; }
.mobile-nav a { padding: 14px 12px; border-radius: 10px; background-color: #FFFFFF; border: 1px solid var(--color-border); }
.mobile-nav a:hover { background-color: var(--color-accent); }
body.menu-open { overflow: hidden; }

/* Hero sections - gradient_modern look */
.hero, .hero-about, .hero-pricing, .hero-blog, .hero-contact, .hero-privacy, .hero-rodo, .hero-cookies, .hero-terms, .hero-thank-you, .hero-konsultacja { padding: 80px 0; color: #0B1020; background-color: #F5F7FF; background-image: linear-gradient(180deg, #F5F7FF 0%, #FFFFFF 100%); position: relative; }
.hero .content-wrapper, .hero-about .content-wrapper, .hero-pricing .content-wrapper, .hero-blog .content-wrapper, .hero-contact .content-wrapper, .hero-privacy .content-wrapper, .hero-rodo .content-wrapper, .hero-cookies .content-wrapper, .hero-terms .content-wrapper, .hero-thank-you .content-wrapper, .hero-konsultacja .content-wrapper { gap: 16px; }
.hero h1, .hero-about h1, .hero-pricing h1, .hero-blog h1, .hero-contact h1, .hero-privacy h1, .hero-rodo h1, .hero-cookies h1, .hero-terms h1, .hero-thank-you h1, .hero-konsultacja h1 { font-size: 32px; }

/* Decorative gradient bar */
.hero::before, .hero-about::before, .hero-pricing::before, .hero-blog::before, .hero-contact::before, .hero-privacy::before, .hero-rodo::before, .hero-cookies::before, .hero-terms::before, .hero-thank-you::before, .hero-konsultacja::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background-color: #8B5CF6; background-image: var(--gradient-1); }

/* Stats & badges */
.trust-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--color-muted); font-weight: 600; }
.trust-badges img { width: 22px; height: 22px; }
.stats-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.stats-row > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: #FFFFFF; box-shadow: var(--shadow-sm); min-width: 140px; }
.stats-row strong { font-size: 20px; }
.stats-row span { color: var(--color-muted); font-size: 14px; }

/* Features and lists */
.features .content-wrapper, .services .content-wrapper, .services-scope .content-wrapper, .features-unique .content-wrapper, .features-industries .content-wrapper, .features-topics .content-wrapper, .features-included .content-wrapper, .addons .content-wrapper, .features-next .content-wrapper { gap: 20px; }
.feature-grid, .service-cards, .platform-tags, .service-list, .proof-points, .kpis, .industry-list, .category-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.feature-grid li, .service-cards li, .service-list li, .proof-points li, .kpis li, .industry-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #FFFFFF; box-shadow: var(--shadow-sm); }
.feature-grid img, .service-cards img { width: 22px; height: 22px; }
.platform-tags li { padding: 8px 12px; background: #F3E8FF; color: #6D28D9; border-radius: 999px; border: 1px solid #E9D5FF; font-weight: 600; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 12px; padding-left: 0; }
.timeline li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed #C4B5FD; border-radius: var(--radius-md); background: #FFFFFF; }

/* Tools, badges, chips */
.tools-used ul { display: flex; flex-wrap: wrap; gap: 10px; }
.tools-used ul li { padding: 6px 10px; border-radius: 999px; background: #EEF2FF; color: #3730A3; border: 1px solid #E0E7FF; font-weight: 600; }
.turnaround-badge, .response-time-badge, .turnaround-info, .effective-date-badge, .last-updated { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; font-weight: 700; font-size: 12px; }
.supporting-stat { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; font-weight: 700; }

/* Cards and content blocks */
.card, .testimonial-card, .category-grid > div, .portfolio-casestudies .content-wrapper > div, .portfolio .content-wrapper > div, .faq .faq-list > div, .faq-list > div, .pricing-cards > div, .addons .content-wrapper > ul li, .services-scope .use-cases ul li, .deliverables-matrix ul li, .blog-list article { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.card:hover, .pricing-cards > div:hover, .blog-list article:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Testimonial sections — ensure dark text on light bg */
.testimonials, .testimonials-slider, .testimonials-about, .testimonials-thankyou { background: #FAFAFF; }
.testimonial-card { flex-direction: column; align-items: flex-start; color: #111827; background: #FFFFFF; border-color: #E5E7EB; }
.testimonial-card p { font-size: 16px; }
.testimonial-card span { color: var(--color-muted); font-weight: 600; }
.logo-row { display: flex; align-items: center; gap: 8px; color: #111827; font-weight: 700; }
.logo-row img { width: 18px; height: 18px; }

/* FAQ */
.faq .faq-list, .faq-list { display: flex; flex-wrap: wrap; gap: 16px; }
.faq .faq-list > div, .faq-list > div { flex: 1 1 260px; }

/* Portfolio filters */
.portfolio-preview span button, .portfolio .content-wrapper button, .hero .content-wrapper button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: #FFFFFF; }
.portfolio-preview span button:hover, .portfolio .content-wrapper button:hover, .hero .content-wrapper button:hover { border-color: #C4B5FD; background: #F3E8FF; color: #6D28D9; }

/* Pricing */
.hero-pricing { background-color: #F9FAFB; background-image: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%); }
.pricing-details .pricing-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.pricing-details .pricing-cards > div { flex: 1 1 280px; }
.pricing-details h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.pricing-details h3 span { color: #6D28D9; background: #F3E8FF; border: 1px solid #E9D5FF; border-radius: 999px; padding: 4px 8px; font-weight: 700; font-size: 12px; }
.feature-comparison { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.feature-comparison th, .feature-comparison td { border: 1px solid var(--color-border); padding: 10px; text-align: left; }
.feature-comparison tr:nth-child(even) { background: #FAFAFA; }

/* Blog */
.hero-blog input[type="search"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border); background: #FFFFFF; }
.blog-list .content-wrapper > div { display: flex; flex-wrap: wrap; gap: 16px; }
.blog-list article { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.read-time, .author { color: var(--color-muted); font-size: 12px; }
.pagination { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F3E8FF; color: #6D28D9; border: 1px solid #E9D5FF; border-radius: 999px; font-weight: 700; }

/* About & Team */
.pillar-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.pillar-grid > div { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.tool-stack-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tool-stack-list li { padding: 6px 10px; border-radius: 999px; background: #EEF2FF; border: 1px solid #E0E7FF; color: #3730A3; font-weight: 600; }

/* Contact */
.social-links { display: flex; align-items: center; gap: 12px; }
.social-links a { display: inline-flex; padding: 8px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--color-border); }
.social-links a:hover { background: #F9FAFB; }

/* Footer */
footer { background: #0F172A; color: #E5E7EB; }
footer a { color: #E5E7EB; opacity: 0.9; }
footer a:hover { opacity: 1; }
footer .container { padding: 20px; }
footer .content-wrapper { display: flex; flex-direction: column; gap: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter-signup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.newsletter-signup input { padding: 10px 12px; border-radius: 10px; border: 1px solid #334155; background: #111827; color: #E5E7EB; }
.newsletter-signup button { padding: 10px 14px; border-radius: 10px; background-image: var(--gradient-1); color: #FFFFFF; }
.brand-badge img { width: 36px; height: 36px; }

/* Tables in legal pages */
.legal-general ul, .legal-processing ul, .legal-sharing ul, .legal-user-rights ul, .legal-retention ul, .legal-security ul, .legal-cookies-definition ul, .legal-cookies-usage ul, .legal-cookies-consent ul, .legal-cookies-types ul, .legal-scope ul, .legal-user-rights ul, .legal-ip ul, .legal-liability ul, .legal-changes ul { display: flex; flex-direction: column; gap: 10px; }

/* Forms and inputs */
input[type="email"], input[type="text"], input[type="search"], textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: #FFFFFF; transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus { border-color: #C4B5FD; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); }
label { display: flex; align-items: center; gap: 8px; }

/* Section CTAs & compliance note */
.section-cta, .cta, .cta-about, .cta-blog, .cta-goals, .cta-pricing, .cta-contact, .cta-thank-you, .cta-konsultacja { background: #FFFFFF; }
.compliance-note { display: block; font-size: 12px; color: var(--color-muted); }

/* Generic cards and grid helpers (flex-only) */
.card-grid, .card-row, .row { display: flex; flex-wrap: wrap; gap: 20px; }
.card-grid > * { flex: 1 1 260px; }

/* Header/footer link spacing in compact areas */
header nav .cta.primary, header nav .cta.secondary { margin-left: 4px; }

/* Micro-cases, use-cases, deliverables */
.micro-cases, .use-cases, .deliverables-matrix { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #FFFFFF; box-shadow: var(--shadow-sm); }
.use-cases ul, .deliverables-matrix ul { display: flex; flex-wrap: wrap; gap: 10px; }
.use-cases ul li, .deliverables-matrix ul li { background: #F9FAFB; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; }

/* Blog categories */
.category-grid > div { flex: 1 1 260px; }

/* Contact and info pills */
.support-hours, .response-time-badge { display: inline-flex; align-items: center; gap: 8px; }

/* Brand tint sections */
.pricing-teaser, .pricing-overview, .features-included, .addons, .metrics, .portfolio-preview, .portfolio, .portfolio-casestudies, .features, .services, .faq, .faq-pricing, .faq-contact, .careers, .resources-downloads, .newsletter, .contact-details, .contact-form-explained, .prepare-brief, .contact-privacy, .contact-rodo, .contact-cookies, .contact-terms, .contact-full, .contact-konsultacja { background: #FFFFFF; }

/* Cookie Consent Banner & Modal */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; }
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-accept { background-image: var(--gradient-1); color: #FFFFFF; padding: 10px 14px; border-radius: 10px; }
.cookie-reject { background: #FFFFFF; color: #1F2937; border: 2px solid #1F2937; padding: 10px 14px; border-radius: 10px; }
.cookie-settings { background: #FFFFFF; color: #6D28D9; border: 2px solid #E9D5FF; padding: 10px 14px; border-radius: 10px; }

.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.6); z-index: 130; display: none; align-items: center; justify-content: center; }
.cookie-modal-overlay.show { display: flex; }
.cookie-modal { width: min(720px, 92vw); background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; transform: translateY(10px); transition: transform .25s ease; }
.cookie-modal-overlay.show .cookie-modal { transform: translateY(0); }
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: #F9FAFB; }
.cookie-category small { font-size: 12px; color: var(--color-muted); }
.cookie-modal .footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Mobile-first responsive adjustments already defaulted to column & wrapping */

/* Desktop and larger screens */
@media (min-width: 768px) {
  h1, .h1 { font-size: 40px; }
  h2, .h2 { font-size: 28px; }
  .text-image-section { flex-direction: row; }
}

@media (min-width: 992px) {
  header nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  .hero, .hero-about, .hero-pricing, .hero-blog, .hero-contact, .hero-privacy, .hero-rodo, .hero-cookies, .hero-terms, .hero-thank-you, .hero-konsultacja { padding: 100px 0; }
  .hero h1, .hero-about h1, .hero-pricing h1, .hero-blog h1, .hero-contact h1, .hero-privacy h1, .hero-rodo h1, .hero-cookies h1, .hero-terms h1, .hero-thank-you h1, .hero-konsultacja h1 { font-size: 48px; }
  .content-wrapper { gap: 20px; }
  footer .content-wrapper { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Accessibility & states */
a:hover, button:hover { filter: none; }
.cta:active { transform: translateY(0); }

/* Utility spacing (8/16/24/32 system) */
.mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; }
.mt-24 { margin-top: 24px; } .mb-24 { margin-bottom: 24px; }
.mt-32 { margin-top: 32px; } .mb-32 { margin-bottom: 32px; }

/* Ensuring no overlapping: give sections breathing room */
main > section + section { margin-top: 10px; }

/* Brand accents for headings */
.content-wrapper h2 { position: relative; padding-top: 6px; }
.content-wrapper h2::after { content: ""; display: block; width: 42px; height: 4px; border-radius: 2px; background-image: var(--gradient-1); background-color: #8B5CF6; margin-top: 8px; }

/* Brand badge alignment */
.brand-badge { display: flex; align-items: center; justify-content: flex-end; }

/* Ensure all custom lists look consistent across pages */
ul li::marker, ol li::marker { content: ""; }
ol { counter-reset: step; }
ol li { position: relative; padding-left: 0; }

/* Images in text lines */
p img, li img { display: inline-block; vertical-align: middle; margin-right: 8px; }

/* Containers inside sections align center by default */
main > section > .container { align-items: stretch; }

/* Prevent any accidental absolute content positioning except decorative */
/* No absolute positioning used for content cards; only decorative in heroes above */

/* Final check: Only flexbox used for layouts; No grid or columns used */