/* ==========================================================================
   MARKETING ARLEK — main.css
   Single production CSS file.
   Navy (#121C27) + Orange (#FF3C00) palette.
   Fonts: Space Grotesk (headings) + Inter (body).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESET (minimal)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

fieldset {
    border: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address {
    font-style: normal;
}

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (:root)
   -------------------------------------------------------------------------- */
:root {
    /* ===== COLORS ===== */
    --ma-primary:       #FF3C00;
    --ma-primary-hover: #D45A15;
    --ma-primary-light: #FFF3EC;
    --ma-primary-dark:  #B84E12;

    --ma-dark:          #121C27;
    --ma-dark-surface:  #0D151E;

    --ma-bg:            #FFFFFF;
    --ma-bg-alt:        #F7F6F5;
    --ma-surface:       #FFFFFF;
    --ma-border:        #E5E2E0;

    --ma-text:          #0A1119;
    --ma-text-body:     #4B535D;
    --ma-text-muted:    #8A909A;

    /* Dark section context */
    --ma-dark-text:     #FFFFFF;
    --ma-dark-muted:    rgba(255,255,255,0.45);
    --ma-dark-border:   rgba(255,255,255,0.08);

    /* State */
    --ma-success:       #5FBD74;
    --ma-error:         #EF4444;

    /* ===== TYPOGRAPHY ===== */
    --ma-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ma-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ma-text-xs:   0.8125rem;   /* 13px */
    --ma-text-sm:   0.9375rem;   /* 15px */
    --ma-text-base: 1.125rem;    /* 18px */
    --ma-text-lg:   1.25rem;     /* 20px */
    --ma-text-xl:   1.4375rem;   /* 23px */
    --ma-text-2xl:  1.75rem;     /* 28px */
    --ma-text-3xl:  2.25rem;     /* 36px */
    --ma-text-4xl:  2.625rem;    /* 42px */
    --ma-text-5xl:  3.5rem;      /* 56px */

    --ma-leading-tight:   1.15;
    --ma-leading-snug:    1.3;
    --ma-leading-normal:  1.7;
    --ma-leading-relaxed: 1.8;

    /* ===== SPACING (4px base) ===== */
    --ma-space-1:  0.25rem;   /*  4px */
    --ma-space-2:  0.5rem;    /*  8px */
    --ma-space-3:  0.75rem;   /* 12px */
    --ma-space-4:  1rem;      /* 16px */
    --ma-space-5:  1.25rem;   /* 20px */
    --ma-space-6:  1.5rem;    /* 24px */
    --ma-space-8:  2rem;      /* 32px */
    --ma-space-10: 2.5rem;    /* 40px */
    --ma-space-12: 3rem;      /* 48px */
    --ma-space-16: 4rem;      /* 64px */
    --ma-space-20: 5rem;      /* 80px */
    --ma-space-24: 6rem;      /* 96px */
    --ma-space-32: 8rem;      /* 128px */

    --ma-section-padding: clamp(4rem, 8vw, 7.5rem);  /* ~64-120px */

    /* Containers */
    --ma-container:        1292px;
    --ma-container-narrow: 800px;
    --ma-container-wide:   1440px;

    /* ===== BORDER RADIUS ===== */
    --ma-radius-sm:   4px;
    --ma-radius-md:   8px;
    --ma-radius-lg:   12px;
    --ma-radius-xl:   16px;
    --ma-radius-pill:  50px;
    --ma-radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --ma-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --ma-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --ma-shadow-lg: 0 12px 32px rgba(0,0,0,0.1);
    --ma-shadow-xl: 0 24px 48px rgba(0,0,0,0.12);
    --ma-shadow-primary: 0 15px 35px -12px rgba(255, 60, 0, 0.4);

    /* ===== MOTION ===== */
    --ma-duration-fast: 150ms;
    --ma-duration-base: 300ms;
    --ma-duration-slow: 500ms;
    --ma-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ma-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
    font-family: var(--ma-font-body);
    font-size: var(--ma-text-base);
    line-height: var(--ma-leading-normal);
    color: var(--ma-text-body);
    background-color: var(--ma-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ma-font-heading);
    color: var(--ma-text);
    letter-spacing: -0.015em;
    font-weight: 700;
}

h1 {
    font-size: clamp(2.25rem, 1.8rem + 2.2vw, var(--ma-text-5xl));
    line-height: var(--ma-leading-tight);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 1.4rem + 1.7vw, var(--ma-text-4xl));
    line-height: var(--ma-leading-tight);
}

h3 {
    font-size: clamp(1.375rem, 1.2rem + 0.9vw, var(--ma-text-3xl));
    line-height: var(--ma-leading-snug);
}

h4 {
    font-size: clamp(1.125rem, 1rem + 0.6vw, var(--ma-text-2xl));
    line-height: var(--ma-leading-snug);
}

h5 {
    font-size: var(--ma-text-xl);
    line-height: var(--ma-leading-snug);
}

h6 {
    font-size: var(--ma-text-lg);
    line-height: var(--ma-leading-snug);
    font-weight: 600;
}

p {
    margin-bottom: var(--ma-space-6);
    max-width: 65ch;
}

.ma-lead {
    font-size: var(--ma-text-lg);
    line-height: 1.6;
    color: var(--ma-text-body);
}

.ma-small,
small {
    font-size: var(--ma-text-sm);
}

strong, b {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. LAYOUT — Containers
   -------------------------------------------------------------------------- */
.ma-container {
    width: min(92%, var(--ma-container));
    margin-inline: auto;
    padding-inline: var(--ma-space-6);
}

.ma-container--narrow {
    width: min(92%, var(--ma-container-narrow));
    margin-inline: auto;
    padding-inline: var(--ma-space-6);
}

.ma-container--wide {
    width: min(95%, var(--ma-container-wide));
    margin-inline: auto;
    padding-inline: var(--ma-space-6);
}

main {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   4. SECTIONS
   -------------------------------------------------------------------------- */
.ma-section {
    padding-block: var(--ma-section-padding);
    position: relative;
}

.ma-section--light {
    background-color: var(--ma-bg);
}

.ma-section--alt {
    background-color: var(--ma-bg-alt);
}

.ma-section--dark {
    background-color: var(--ma-dark);
    color: var(--ma-dark-text);
}

.ma-section--dark h1,
.ma-section--dark h2,
.ma-section--dark h3,
.ma-section--dark h4,
.ma-section--dark h5,
.ma-section--dark h6 {
    color: var(--ma-dark-text);
}

.ma-section--dark p,
.ma-section--dark li {
    color: var(--ma-dark-muted);
}

.ma-section--dark .ma-section-label {
    color: var(--ma-primary);
}

.ma-section--tight {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Section header group */
.ma-section__head {
    margin-bottom: var(--ma-space-16);
    max-width: 680px;
}

.ma-section__head--center {
    text-align: center;
    margin-inline: auto;
}

/* Section label (eyebrow) */
.ma-section-label {
    display: inline-block;
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ma-primary);
    margin-bottom: var(--ma-space-4);
}

/* Section title */
.ma-section-title {
    margin-bottom: var(--ma-space-6);
}

.ma-section-title__accent {
    color: var(--ma-primary);
}

/* Section subtitle (lead) */
.ma-section-subtitle {
    font-size: var(--ma-text-lg);
    line-height: 1.6;
    color: var(--ma-text-body);
    max-width: 600px;
}

.ma-section__head--center .ma-section-subtitle {
    margin-inline: auto;
}

.ma-section--dark .ma-section-subtitle {
    color: var(--ma-dark-muted);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ma-space-2);
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 14px 26px;
    border: 2px solid transparent;
    border-radius: var(--ma-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--ma-duration-fast) var(--ma-ease-out),
        color var(--ma-duration-fast) var(--ma-ease-out),
        border-color var(--ma-duration-fast) var(--ma-ease-out),
        transform var(--ma-duration-base) var(--ma-ease-out),
        box-shadow var(--ma-duration-base) var(--ma-ease-out);
}

.ma-btn:active {
    transform: scale(0.97);
}

.ma-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--ma-duration-fast) var(--ma-ease-out);
}

.ma-btn:hover svg {
    transform: translateX(3px);
}

/* Primary (orange solid) */
.ma-btn--primary {
    background-color: var(--ma-primary);
    color: #FFFFFF;
    border-color: var(--ma-primary);
    box-shadow: var(--ma-shadow-primary);
}

.ma-btn--primary:hover {
    background-color: var(--ma-primary-hover);
    border-color: var(--ma-primary-hover);
}

.ma-btn--primary:focus-visible {
    outline: 3px solid var(--ma-primary-light);
    outline-offset: 2px;
}

/* Outline (navy border) */
.ma-btn--outline {
    background-color: transparent;
    color: var(--ma-dark);
    border-color: var(--ma-border);
}

.ma-btn--outline:hover {
    background-color: var(--ma-dark);
    color: var(--ma-dark-text);
    border-color: var(--ma-dark);
}

.ma-btn--outline:focus-visible {
    outline: 3px solid var(--ma-border);
    outline-offset: 2px;
}

/* Light (for dark sections) */
.ma-btn--light {
    background-color: #FFFFFF;
    color: var(--ma-dark);
    border-color: #FFFFFF;
}

.ma-btn--light:hover {
    background-color: var(--ma-primary);
    color: #FFFFFF;
    border-color: var(--ma-primary);
    box-shadow: var(--ma-shadow-primary);
}

/* Block (full width) */
.ma-btn--block {
    width: 100%;
}

/* Large */
.ma-btn--lg {
    padding: 16px 32px;
    font-size: var(--ma-text-base);
}

/* --------------------------------------------------------------------------
   6. HEADER (sticky + scrolled)
   -------------------------------------------------------------------------- */
.ma-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    transition:
        background-color var(--ma-duration-base) var(--ma-ease-out),
        box-shadow var(--ma-duration-base) var(--ma-ease-out),
        padding var(--ma-duration-base) var(--ma-ease-out);
    padding-block: var(--ma-space-5);
}

.ma-header.scrolled {
    background-color: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--ma-border);
    padding-block: var(--ma-space-3);
}

.ma-header__container {
    width: min(92%, var(--ma-container));
    margin-inline: auto;
    padding-inline: var(--ma-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ma-space-8);
}

/* Logo */
.ma-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 10;
}

.ma-header__logo-img {
    width: 180px;
    height: auto;
    transition: opacity var(--ma-duration-fast);
}

.ma-header__logo:hover .ma-header__logo-img {
    opacity: 0.85;
}

.ma-header__logo-text {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-lg);
    font-weight: 500;
    color: var(--ma-dark);
    letter-spacing: -0.01em;
}

.ma-header__logo-text strong {
    font-weight: 700;
}

/* Nav */
.ma-header__nav {
    display: flex;
    align-items: center;
    gap: var(--ma-space-10);
}

.ma-header__menu {
    display: flex;
    align-items: center;
    gap: var(--ma-space-8);
}

.ma-header__link {
    font-family: var(--ma-font-body);
    font-size: var(--ma-text-sm);
    font-weight: 500;
    color: var(--ma-text-body);
    position: relative;
    padding-block: var(--ma-space-2);
    transition: color var(--ma-duration-fast);
}

.ma-header__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--ma-primary);
    transition: width var(--ma-duration-base) var(--ma-ease-out);
}

.ma-header__link:hover,
.ma-header__link.active {
    color: var(--ma-text);
}

.ma-header__link:hover::after,
.ma-header__link.active::after {
    width: 100%;
}

.ma-header__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-2);
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--ma-primary);
    padding: 10px 22px;
    border-radius: var(--ma-radius-pill);
    transition:
        background-color var(--ma-duration-fast) var(--ma-ease-out),
        transform var(--ma-duration-base) var(--ma-ease-out),
        box-shadow var(--ma-duration-base) var(--ma-ease-out);
}

.ma-header__cta:hover {
    background-color: var(--ma-primary-hover);
    box-shadow: var(--ma-shadow-primary);
}

.ma-header__cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--ma-duration-fast) var(--ma-ease-out);
}

.ma-header__cta:hover svg {
    transform: translateX(3px);
}

/* Hamburger */
.ma-header__hamburger {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--ma-dark);
    -webkit-tap-highlight-color: transparent;
}

.ma-header__hamburger-close {
    display: none;
}

.ma-header__hamburger[aria-expanded="true"] .ma-header__hamburger-icon {
    display: none;
}

.ma-header__hamburger[aria-expanded="true"] .ma-header__hamburger-close {
    display: block;
}

/* --------------------------------------------------------------------------
   7. MOBILE MENU (fullscreen overlay)
   -------------------------------------------------------------------------- */
.ma-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    visibility: hidden;
}

.ma-mobile-menu[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}

.ma-mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(13, 21, 30, 0.6);
    opacity: 0;
    transition: opacity var(--ma-duration-base) var(--ma-ease-out);
}

.ma-mobile-menu[aria-hidden="false"] .ma-mobile-menu__overlay {
    opacity: 1;
}

.ma-mobile-menu__content {
    position: absolute;
    top: 0;
    right: 0;
    width: min(380px, 85vw);
    height: 100%;
    background-color: var(--ma-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--ma-space-16) var(--ma-space-10);
    transform: translateX(100%);
    transition: transform var(--ma-duration-slow) var(--ma-ease-out);
}

.ma-mobile-menu[aria-hidden="false"] .ma-mobile-menu__content {
    transform: translateX(0);
}

.ma-mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-2);
    margin-bottom: var(--ma-space-10);
}

.ma-mobile-menu__link {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-3xl);
    font-weight: 700;
    color: var(--ma-dark);
    display: block;
    padding-block: var(--ma-space-3);
    transition: color var(--ma-duration-fast);
    letter-spacing: -0.02em;
}

.ma-mobile-menu__link:hover {
    color: var(--ma-primary);
}

.ma-mobile-menu__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-3);
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-lg);
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--ma-primary);
    padding: 16px 32px;
    border-radius: var(--ma-radius-pill);
    margin-bottom: var(--ma-space-10);
    transition:
        background-color var(--ma-duration-fast) var(--ma-ease-out),
        box-shadow var(--ma-duration-base) var(--ma-ease-out);
}

.ma-mobile-menu__cta:hover {
    background-color: var(--ma-primary-hover);
    box-shadow: var(--ma-shadow-primary);
}

.ma-mobile-menu__cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ma-mobile-menu__contact {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-4);
    border-top: 1px solid var(--ma-border);
    padding-top: var(--ma-space-8);
}

.ma-mobile-menu__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-3);
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
    transition: color var(--ma-duration-fast);
}

.ma-mobile-menu__contact-link:hover {
    color: var(--ma-primary);
}

.ma-mobile-menu__contact-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ma-primary);
}

/* --------------------------------------------------------------------------
   8. PRELOADER
   -------------------------------------------------------------------------- */
.ma-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--ma-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--ma-duration-slow) var(--ma-ease-out);
}

.ma-preloader.loaded {
    opacity: 0;
    pointer-events: none;
}

.ma-preloader__inner {
    width: 80px;
    height: 3px;
    background-color: var(--ma-border);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.ma-preloader__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: var(--ma-primary);
    border-radius: 3px;
    animation: ma-preloader-slide 1s var(--ma-ease-in-out) infinite;
}

@keyframes ma-preloader-slide {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

/* --------------------------------------------------------------------------
   9. HERO SECTION
   -------------------------------------------------------------------------- */
.ma-hero {
    position: relative;
    min-height: clamp(520px, 75vh, 850px);
    display: flex;
    align-items: center;
    padding-top: calc(var(--ma-section-padding) + 80px); /* header offset */
    padding-bottom: var(--ma-section-padding);
    background-color: var(--ma-dark);
    color: var(--ma-dark-text);
    overflow: hidden;
}

.ma-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ma-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(13, 21, 30, 0.92) 0%,
        rgba(13, 21, 30, 0.75) 50%,
        rgba(13, 21, 30, 0.55) 100%
    );
}

.ma-hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.ma-hero__label {
    display: inline-block;
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ma-primary);
    margin-bottom: var(--ma-space-6);
}

.ma-hero__title {
    color: #FFFFFF;
    margin-bottom: var(--ma-space-6);
}

.ma-hero__title span {
    color: var(--ma-primary);
}

.ma-hero__text {
    font-size: var(--ma-text-lg);
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--ma-space-10);
    max-width: 540px;
    line-height: 1.6;
}

.ma-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--ma-space-4);
    flex-wrap: wrap;
}

/* Trust strip below hero */
.ma-hero__trust {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--ma-space-10);
    margin-top: var(--ma-space-16);
    padding-top: var(--ma-space-8);
    border-top: 1px solid var(--ma-dark-border);
}

.ma-hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--ma-space-3);
    font-size: var(--ma-text-sm);
    color: rgba(255,255,255,0.55);
}

.ma-hero__trust-item svg {
    width: 20px;
    height: 20px;
    color: var(--ma-primary);
    flex-shrink: 0;
}

/* Decorative accent */
.ma-hero::before {
    content: '';
    position: absolute;
    right: -5%;
    bottom: -15%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 60, 0, 0.08) 0%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.ma-card {
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-lg);
    padding: var(--ma-space-8);
    box-shadow: var(--ma-shadow-sm);
    transition:
        transform var(--ma-duration-base) var(--ma-ease-out),
        box-shadow var(--ma-duration-base) var(--ma-ease-out);
}

.ma-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ma-shadow-lg);
}

.ma-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ma-primary-light);
    border-radius: var(--ma-radius-md);
    margin-bottom: var(--ma-space-6);
    color: var(--ma-primary);
    transition: background-color var(--ma-duration-fast);
}

.ma-card:hover .ma-card__icon {
    background-color: var(--ma-primary);
    color: #FFFFFF;
}

.ma-card__icon svg {
    width: 24px;
    height: 24px;
}

.ma-card__title {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xl);
    font-weight: 600;
    color: var(--ma-text);
    margin-bottom: var(--ma-space-3);
    line-height: var(--ma-leading-snug);
}

.ma-card__text {
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
    line-height: 1.6;
    margin-bottom: 0;
}

.ma-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-2);
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 600;
    color: var(--ma-primary);
    margin-top: var(--ma-space-6);
    transition: gap var(--ma-duration-fast) var(--ma-ease-out);
}

.ma-card__link:hover {
    gap: var(--ma-space-3);
}

.ma-card__link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. SERVICES GRID (3 columns)
   -------------------------------------------------------------------------- */
.ma-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ma-space-6);
}

.ma-services-grid .ma-card {
    position: relative;
}

/* Orange top accent on service cards */
.ma-services-grid .ma-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--ma-space-8);
    right: var(--ma-space-8);
    height: 3px;
    background-color: var(--ma-primary);
    border-radius: 0 0 3px 3px;
    opacity: 0;
    transition: opacity var(--ma-duration-fast);
}

.ma-services-grid .ma-card:hover::before {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   12. STATS / COUNTER BAR
   -------------------------------------------------------------------------- */
.ma-stats {
    background-color: var(--ma-dark);
    padding-block: clamp(3rem, 5vw, 5rem);
}

.ma-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ma-space-8);
    text-align: center;
}

.ma-stats__item {
    position: relative;
}

.ma-stats__number {
    font-family: var(--ma-font-heading);
    font-size: clamp(2rem, 1.6rem + 2vw, var(--ma-text-5xl));
    font-weight: 700;
    color: var(--ma-primary);
    line-height: 1;
    margin-bottom: var(--ma-space-2);
    letter-spacing: -0.02em;
}

.ma-stats__label {
    font-size: var(--ma-text-sm);
    color: var(--ma-dark-muted);
    letter-spacing: 0.02em;
}

/* Divider between stats (desktop) */
.ma-stats__item + .ma-stats__item::before {
    display: none;
}

/* --------------------------------------------------------------------------
   13. CTA SECTION (dark bg, strong call)
   -------------------------------------------------------------------------- */
.ma-cta-section {
    background-color: var(--ma-dark);
    padding-block: var(--ma-section-padding);
    position: relative;
    overflow: hidden;
}

.ma-cta-section::after {
    content: '';
    position: absolute;
    left: -10%;
    top: -30%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 60, 0, 0.1) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.ma-cta-section__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 660px;
    margin-inline: auto;
}

.ma-cta-section__label {
    display: inline-block;
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ma-primary);
    margin-bottom: var(--ma-space-4);
}

.ma-cta-section__title {
    color: #FFFFFF;
    margin-bottom: var(--ma-space-6);
}

.ma-cta-section__text {
    font-size: var(--ma-text-lg);
    color: var(--ma-dark-muted);
    margin-bottom: var(--ma-space-10);
    margin-inline: auto;
    max-width: 520px;
    line-height: 1.6;
}

.ma-cta-section__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ma-space-4);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   14. BLOG GRID (3 columns, card-based)
   -------------------------------------------------------------------------- */
.ma-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ma-space-8);
}

.ma-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-lg);
    overflow: hidden;
    transition:
        transform var(--ma-duration-base) var(--ma-ease-out),
        box-shadow var(--ma-duration-base) var(--ma-ease-out);
}

.ma-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ma-shadow-lg);
}

.ma-blog-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--ma-bg-alt);
}

.ma-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ma-duration-slow) var(--ma-ease-out);
}

.ma-blog-card:hover .ma-blog-card__image img {
    transform: scale(1.04);
}

.ma-blog-card__body {
    padding: var(--ma-space-6) var(--ma-space-6) var(--ma-space-8);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ma-blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--ma-space-3);
    font-size: var(--ma-text-xs);
    color: var(--ma-text-muted);
    margin-bottom: var(--ma-space-3);
}

.ma-blog-card__category {
    font-weight: 600;
    color: var(--ma-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ma-blog-card__title {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xl);
    font-weight: 600;
    color: var(--ma-text);
    line-height: var(--ma-leading-snug);
    margin-bottom: var(--ma-space-3);
    transition: color var(--ma-duration-fast);
}

.ma-blog-card:hover .ma-blog-card__title {
    color: var(--ma-primary);
}

.ma-blog-card__excerpt {
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
    line-height: 1.6;
    margin-bottom: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ma-blog-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-2);
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 600;
    color: var(--ma-primary);
    margin-top: auto;
    padding-top: var(--ma-space-5);
    transition: gap var(--ma-duration-fast) var(--ma-ease-out);
}

.ma-blog-card__read-more:hover {
    gap: var(--ma-space-3);
}

.ma-blog-card__read-more svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   15. SINGLE POST (article typography)
   -------------------------------------------------------------------------- */
.ma-article {
    max-width: 720px;
    margin-inline: auto;
    padding-block: var(--ma-section-padding);
}

.ma-article__header {
    margin-bottom: var(--ma-space-12);
}

.ma-article__category {
    display: inline-block;
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ma-primary);
    margin-bottom: var(--ma-space-4);
}

.ma-article__title {
    margin-bottom: var(--ma-space-6);
}

.ma-article__meta {
    display: flex;
    align-items: center;
    gap: var(--ma-space-4);
    font-size: var(--ma-text-sm);
    color: var(--ma-text-muted);
}

.ma-article__meta-sep {
    color: var(--ma-border);
}

/* Article content typography */
.ma-article__content h2 {
    font-size: clamp(1.5rem, 1.3rem + 1vw, var(--ma-text-3xl));
    margin-top: var(--ma-space-12);
    margin-bottom: var(--ma-space-6);
}

.ma-article__content h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, var(--ma-text-2xl));
    margin-top: var(--ma-space-10);
    margin-bottom: var(--ma-space-5);
}

.ma-article__content h4 {
    font-size: var(--ma-text-xl);
    margin-top: var(--ma-space-8);
    margin-bottom: var(--ma-space-4);
}

.ma-article__content p {
    margin-bottom: var(--ma-space-6);
    max-width: none;
}

.ma-article__content ul,
.ma-article__content ol {
    padding-left: var(--ma-space-6);
    margin-bottom: var(--ma-space-6);
}

.ma-article__content ul {
    list-style: disc;
}

.ma-article__content ol {
    list-style: decimal;
}

.ma-article__content li {
    margin-bottom: var(--ma-space-2);
    padding-left: var(--ma-space-2);
}

.ma-article__content blockquote {
    border-left: 3px solid var(--ma-primary);
    padding-left: var(--ma-space-6);
    margin-block: var(--ma-space-8);
    font-style: italic;
    color: var(--ma-text);
}

.ma-article__content a {
    color: var(--ma-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--ma-duration-fast);
}

.ma-article__content a:hover {
    color: var(--ma-primary-hover);
}

.ma-article__content img {
    border-radius: var(--ma-radius-md);
    margin-block: var(--ma-space-8);
}

.ma-article__content table {
    width: 100%;
    margin-block: var(--ma-space-8);
    font-size: var(--ma-text-sm);
}

.ma-article__content th,
.ma-article__content td {
    padding: var(--ma-space-3) var(--ma-space-4);
    border-bottom: 1px solid var(--ma-border);
    text-align: left;
}

.ma-article__content th {
    font-weight: 600;
    color: var(--ma-text);
    background-color: var(--ma-bg-alt);
}

.ma-article__content code {
    background-color: var(--ma-bg-alt);
    padding: 2px 6px;
    border-radius: var(--ma-radius-sm);
    font-size: 0.875em;
}

.ma-article__content pre {
    background-color: var(--ma-dark);
    color: var(--ma-dark-text);
    padding: var(--ma-space-6);
    border-radius: var(--ma-radius-md);
    overflow-x: auto;
    margin-block: var(--ma-space-8);
}

.ma-article__content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: var(--ma-text-sm);
}

/* --------------------------------------------------------------------------
   16. FORM STYLES
   -------------------------------------------------------------------------- */
.ma-form {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-5);
}

.ma-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-2);
}

.ma-form__label {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 500;
    color: var(--ma-text);
}

.ma-form__label .ma-form__required {
    color: var(--ma-primary);
    margin-left: 2px;
}

.ma-form__input,
.ma-form__textarea,
.ma-form__select {
    width: 100%;
    padding: 14px var(--ma-space-4);
    font-family: var(--ma-font-body);
    font-size: var(--ma-text-sm);
    color: var(--ma-text);
    background-color: var(--ma-bg);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    transition:
        border-color var(--ma-duration-fast),
        box-shadow var(--ma-duration-fast);
    -webkit-appearance: none;
    appearance: none;
}

.ma-form__input:focus,
.ma-form__textarea:focus,
.ma-form__select:focus {
    outline: none;
    border-color: var(--ma-primary);
    box-shadow: 0 0 0 3px var(--ma-primary-light);
}

.ma-form__input::placeholder,
.ma-form__textarea::placeholder {
    color: var(--ma-text-muted);
}

.ma-form__textarea {
    min-height: 140px;
    resize: vertical;
}

.ma-form__select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238A909A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Checkboxes inline */
.ma-form__checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ma-space-4);
}

.ma-form__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-2);
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
    cursor: pointer;
}

.ma-form__checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ma-primary);
    cursor: pointer;
}

/* Validation states */
.ma-form__group--error .ma-form__input,
.ma-form__group--error .ma-form__textarea,
.ma-form__group--error .ma-form__select {
    border-color: var(--ma-error);
}

.ma-form__group--error .ma-form__input:focus,
.ma-form__group--error .ma-form__textarea:focus,
.ma-form__group--error .ma-form__select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ma-form__error {
    font-size: var(--ma-text-xs);
    color: var(--ma-error);
    display: none;
}

.ma-form__group--error .ma-form__error {
    display: block;
}

.ma-form__group--success .ma-form__input,
.ma-form__group--success .ma-form__textarea,
.ma-form__group--success .ma-form__select {
    border-color: var(--ma-success);
}

/* Honeypot */
.ma-form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Submit */
.ma-form__submit {
    align-self: flex-start;
    margin-top: var(--ma-space-2);
}

/* Message */
.ma-form__message {
    padding: var(--ma-space-4) var(--ma-space-5);
    border-radius: var(--ma-radius-sm);
    font-size: var(--ma-text-sm);
    display: none;
}

.ma-form__message--success {
    display: block;
    background-color: rgba(95, 189, 116, 0.1);
    border: 1px solid var(--ma-success);
    color: #2d7a3e;
}

.ma-form__message--error {
    display: block;
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid var(--ma-error);
    color: #b91c1c;
}

/* --------------------------------------------------------------------------
   17. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.ma-faq {
    max-width: 800px;
    margin-inline: auto;
}

.ma-faq__item {
    border-bottom: 1px solid var(--ma-border);
}

.ma-faq__item:first-child {
    border-top: 1px solid var(--ma-border);
}

.ma-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ma-space-4);
    padding: var(--ma-space-5) 0;
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-lg);
    font-weight: 600;
    color: var(--ma-text);
    text-align: left;
    cursor: pointer;
    transition: color var(--ma-duration-fast);
    background: none;
    border: none;
}

.ma-faq__question:hover {
    color: var(--ma-primary);
}

.ma-faq__question:focus-visible {
    outline: 2px solid var(--ma-primary);
    outline-offset: 2px;
    border-radius: var(--ma-radius-sm);
}

.ma-faq__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--ma-text-muted);
    transition: transform var(--ma-duration-base) var(--ma-ease-out);
}

.ma-faq__item--open .ma-faq__icon {
    transform: rotate(45deg);
    color: var(--ma-primary);
}

.ma-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ma-duration-base) var(--ma-ease-out);
}

.ma-faq__answer-inner {
    padding-bottom: var(--ma-space-6);
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
    line-height: 1.7;
}

.ma-faq__answer-inner p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. FOOTER (dark, multi-column)
   -------------------------------------------------------------------------- */
.ma-footer {
    background-color: var(--ma-dark);
    color: var(--ma-dark-muted);
    padding-top: var(--ma-section-padding);
}

.ma-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ma-space-10);
    padding-bottom: var(--ma-space-16);
}

.ma-footer__brand {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-xl);
    font-weight: 700;
    color: #FFFFFF;
    display: block;
    margin-bottom: var(--ma-space-6);
}

.ma-footer__address {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-3);
    font-size: var(--ma-text-sm);
}

.ma-footer__address-line {
    display: flex;
    align-items: flex-start;
    gap: var(--ma-space-3);
}

.ma-footer__address-line svg,
.ma-footer__link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ma-primary);
    margin-top: 1px;
}

.ma-footer__heading {
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--ma-space-5);
}

.ma-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-3);
}

.ma-footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-3);
    font-size: var(--ma-text-sm);
    color: var(--ma-dark-muted);
    transition: color var(--ma-duration-fast);
}

.ma-footer__link:hover {
    color: #FFFFFF;
}

.ma-footer__social {
    display: flex;
    gap: var(--ma-space-3);
}

.ma-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: rgba(255,255,255,0.05);
    border-radius: var(--ma-radius-md);
    color: var(--ma-dark-muted);
    transition:
        background-color var(--ma-duration-fast),
        color var(--ma-duration-fast);
}

.ma-footer__social-link:hover {
    background-color: var(--ma-primary);
    color: #FFFFFF;
}

.ma-footer__social-link svg {
    width: 20px;
    height: 20px;
}

/* Footer bottom bar */
.ma-footer__bottom {
    border-top: 1px solid var(--ma-dark-border);
    padding-block: var(--ma-space-6);
}

.ma-footer__bottom p {
    font-size: var(--ma-text-xs);
    color: var(--ma-dark-muted);
    text-align: center;
    margin-bottom: 0;
    max-width: none;
}

.ma-footer__sep {
    margin-inline: var(--ma-space-2);
    opacity: 0.3;
}

.ma-footer__arlek {
    color: var(--ma-dark-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--ma-duration-fast);
}

.ma-footer__arlek:hover {
    color: var(--ma-primary);
}

/* --------------------------------------------------------------------------
   19. FLOATING CTA (phone)
   -------------------------------------------------------------------------- */
.ma-floating-cta {
    position: fixed;
    bottom: var(--ma-space-6);
    right: var(--ma-space-6);
    z-index: 900;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ma-primary);
    color: #FFFFFF;
    border-radius: var(--ma-radius-full);
    box-shadow: var(--ma-shadow-primary);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition:
        opacity var(--ma-duration-base) var(--ma-ease-out),
        transform var(--ma-duration-base) var(--ma-ease-out),
        background-color var(--ma-duration-fast);
}

.ma-floating-cta.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ma-floating-cta:hover {
    background-color: var(--ma-primary-hover);
    transform: translateY(0) scale(1.08);
}

.ma-floating-cta svg {
    width: 24px;
    height: 24px;
}

/* --------------------------------------------------------------------------
   20. SCROLL TO TOP
   -------------------------------------------------------------------------- */
.ma-scroll-top {
    position: fixed;
    bottom: var(--ma-space-6);
    right: calc(var(--ma-space-6) + 56px + var(--ma-space-3));
    z-index: 900;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ma-bg);
    color: var(--ma-dark);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-full);
    box-shadow: var(--ma-shadow-md);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    cursor: pointer;
    transition:
        opacity var(--ma-duration-base) var(--ma-ease-out),
        transform var(--ma-duration-base) var(--ma-ease-out),
        background-color var(--ma-duration-fast),
        color var(--ma-duration-fast);
}

.ma-scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ma-scroll-top:hover {
    background-color: var(--ma-dark);
    color: #FFFFFF;
    border-color: var(--ma-dark);
}

.ma-scroll-top:focus-visible {
    outline: 3px solid var(--ma-primary-light);
    outline-offset: 2px;
}

.ma-scroll-top svg {
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------------------
   21. COOKIE BAR (RODO)
   -------------------------------------------------------------------------- */
.ma-cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background-color: var(--ma-dark);
    transform: translateY(100%);
    transition: transform var(--ma-duration-slow) var(--ma-ease-out);
}

.ma-cookies.visible {
    transform: translateY(0);
}

.ma-cookies.accepted {
    transform: translateY(100%);
}

.ma-cookies__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ma-space-6);
    padding-block: var(--ma-space-5);
}

.ma-cookies__text {
    font-size: var(--ma-text-sm);
    color: var(--ma-dark-muted);
    margin-bottom: 0;
    max-width: none;
    line-height: 1.5;
}

.ma-cookies__link {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--ma-duration-fast);
}

.ma-cookies__link:hover {
    color: var(--ma-primary);
}

.ma-cookies__accept {
    flex-shrink: 0;
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--ma-primary);
    padding: 10px 24px;
    border-radius: var(--ma-radius-pill);
    border: none;
    cursor: pointer;
    transition: background-color var(--ma-duration-fast);
}

.ma-cookies__accept:hover {
    background-color: var(--ma-primary-hover);
}

.ma-cookies__accept:focus-visible {
    outline: 3px solid var(--ma-primary-light);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   22. BREADCRUMBS
   -------------------------------------------------------------------------- */
.ma-breadcrumbs {
    padding-block: var(--ma-space-4);
    font-size: var(--ma-text-xs);
    color: var(--ma-text-muted);
}

.ma-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ma-space-1);
}

.ma-breadcrumbs__sep {
    margin-inline: var(--ma-space-1);
    opacity: 0.5;
}

.ma-breadcrumbs__link {
    color: var(--ma-text-muted);
    transition: color var(--ma-duration-fast);
}

.ma-breadcrumbs__link:hover {
    color: var(--ma-primary);
}

.ma-breadcrumbs__current {
    color: var(--ma-text-body);
    font-weight: 500;
}

/* Dark variant (on hero/dark sections) */
.ma-breadcrumbs--dark {
    color: var(--ma-dark-muted);
}

.ma-breadcrumbs--dark .ma-breadcrumbs__link {
    color: var(--ma-dark-muted);
}

.ma-breadcrumbs--dark .ma-breadcrumbs__link:hover {
    color: #FFFFFF;
}

.ma-breadcrumbs--dark .ma-breadcrumbs__current {
    color: rgba(255,255,255,0.7);
}

/* --------------------------------------------------------------------------
   23. SCROLL ANIMATIONS
   -------------------------------------------------------------------------- */
.ma-anim {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity var(--ma-duration-slow) var(--ma-ease-out),
        transform var(--ma-duration-slow) var(--ma-ease-out);
}

.ma-anim.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.ma-anim-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--ma-duration-slow) var(--ma-ease-out),
        transform var(--ma-duration-slow) var(--ma-ease-out);
}

.ma-anim-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.ma-anim-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.ma-anim-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.ma-anim-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.ma-anim-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.ma-anim-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }

.ma-anim-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Slide-in from left */
.ma-anim--left {
    transform: translateX(-40px);
}

.ma-anim--left.visible {
    transform: translateX(0);
}

/* Slide-in from right */
.ma-anim--right {
    transform: translateX(40px);
}

.ma-anim--right.visible {
    transform: translateX(0);
}

/* Scale up */
.ma-anim--scale {
    transform: scale(0.92);
}

.ma-anim--scale.visible {
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   24. UTILITY CLASSES
   -------------------------------------------------------------------------- */
.ma-text-center { text-align: center; }
.ma-text-left   { text-align: left; }
.ma-text-right  { text-align: right; }

.ma-text-primary { color: var(--ma-primary); }
.ma-text-dark    { color: var(--ma-text); }
.ma-text-muted   { color: var(--ma-text-muted); }
.ma-text-white   { color: #FFFFFF; }

.ma-font-heading { font-family: var(--ma-font-heading); }
.ma-font-body    { font-family: var(--ma-font-body); }
.ma-font-bold    { font-weight: 700; }
.ma-font-semibold { font-weight: 600; }

/* Margin top */
.ma-mt-0  { margin-top: 0; }
.ma-mt-1  { margin-top: var(--ma-space-1); }
.ma-mt-2  { margin-top: var(--ma-space-2); }
.ma-mt-3  { margin-top: var(--ma-space-3); }
.ma-mt-4  { margin-top: var(--ma-space-4); }
.ma-mt-5  { margin-top: var(--ma-space-5); }
.ma-mt-6  { margin-top: var(--ma-space-6); }
.ma-mt-8  { margin-top: var(--ma-space-8); }
.ma-mt-10 { margin-top: var(--ma-space-10); }
.ma-mt-12 { margin-top: var(--ma-space-12); }
.ma-mt-16 { margin-top: var(--ma-space-16); }

/* Margin bottom */
.ma-mb-0  { margin-bottom: 0; }
.ma-mb-1  { margin-bottom: var(--ma-space-1); }
.ma-mb-2  { margin-bottom: var(--ma-space-2); }
.ma-mb-3  { margin-bottom: var(--ma-space-3); }
.ma-mb-4  { margin-bottom: var(--ma-space-4); }
.ma-mb-5  { margin-bottom: var(--ma-space-5); }
.ma-mb-6  { margin-bottom: var(--ma-space-6); }
.ma-mb-8  { margin-bottom: var(--ma-space-8); }
.ma-mb-10 { margin-bottom: var(--ma-space-10); }
.ma-mb-12 { margin-bottom: var(--ma-space-12); }
.ma-mb-16 { margin-bottom: var(--ma-space-16); }

/* Padding */
.ma-pt-0  { padding-top: 0; }
.ma-pb-0  { padding-bottom: 0; }

/* Display */
.ma-hidden { display: none; }
.ma-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;
}

/* --------------------------------------------------------------------------
   25. RESPONSIVE — MOBILE FIRST
   -------------------------------------------------------------------------- */

/* 480px — large mobile */
@media (min-width: 480px) {
    .ma-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ma-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ma-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ma-cookies__inner {
        flex-wrap: nowrap;
    }
}

/* 768px — tablet */
@media (min-width: 768px) {
    .ma-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

    .ma-stats__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Stats dividers */
    .ma-stats__item + .ma-stats__item::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background-color: var(--ma-dark-border);
    }

    .ma-form--inline {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ma-form--inline .ma-form__group {
        flex: 1 1 45%;
    }

    .ma-form--inline .ma-form__group--full {
        flex: 1 1 100%;
    }

    .ma-hero__trust {
        flex-wrap: nowrap;
    }
}

/* 960px — small desktop */
@media (min-width: 960px) {
    .ma-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ma-blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ma-header__hamburger {
        display: none;
    }

    .ma-header__nav {
        display: flex;
    }

    .ma-faq__question {
        font-size: var(--ma-text-xl);
    }
}

/* Below 960px — show hamburger, hide desktop nav */
@media (max-width: 959px) {
    .ma-header__nav {
        display: none;
    }

    .ma-header__hamburger {
        display: flex;
    }

    .ma-hero__content {
        max-width: 100%;
    }

    .ma-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ma-hero__trust {
        flex-direction: column;
        gap: var(--ma-space-4);
        align-items: flex-start;
    }

    .ma-cta-section__actions {
        flex-direction: column;
    }
}

/* 1292px — full desktop */
@media (min-width: 1292px) {
    .ma-container {
        padding-inline: 0;
    }

    .ma-container--wide {
        padding-inline: 0;
    }

    .ma-header__container {
        padding-inline: 0;
    }
}

/* Small mobile tweaks */
@media (max-width: 479px) {
    .ma-cookies__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--ma-space-4);
    }

    .ma-cookies__accept {
        width: 100%;
    }

    .ma-blog-card__body {
        padding: var(--ma-space-5);
    }

    .ma-footer__inner {
        gap: var(--ma-space-8);
    }

    .ma-scroll-top {
        right: var(--ma-space-6);
        bottom: calc(var(--ma-space-6) + 56px + var(--ma-space-3));
    }
}

/* --------------------------------------------------------------------------
   26. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ma-anim,
    .ma-anim-stagger > * {
        opacity: 1;
        transform: none;
    }

    .ma-preloader {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   27. KONSULTACJA PAGE (form + info two-column)
   -------------------------------------------------------------------------- */
.ma-konsultacja-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ma-space-12);
    align-items: start;
}

.ma-konsultacja__form-col h2 {
    margin-bottom: var(--ma-space-3);
}

.ma-konsultacja__info-card,
.ma-konsultacja__trust-card {
    background: var(--ma-bg-alt);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-lg);
    padding: var(--ma-space-8);
    margin-bottom: var(--ma-space-6);
}

.ma-konsultacja__info-card h3,
.ma-konsultacja__trust-card h4 {
    margin-bottom: var(--ma-space-3);
}

.ma-konsultacja__info-card p {
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
    margin-bottom: var(--ma-space-6);
}

.ma-konsultacja__contact-link {
    display: flex;
    align-items: center;
    gap: var(--ma-space-3);
    padding: var(--ma-space-3) 0;
    font-size: var(--ma-text-base);
    font-weight: 500;
    color: var(--ma-text);
    transition: color var(--ma-duration-fast);
}

.ma-konsultacja__contact-link:hover {
    color: var(--ma-primary);
}

.ma-konsultacja__contact-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--ma-primary);
}

.ma-konsultacja__trust-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--ma-space-3);
}

.ma-konsultacja__trust-card li {
    display: flex;
    align-items: center;
    gap: var(--ma-space-3);
    font-size: var(--ma-text-sm);
    color: var(--ma-text-body);
}

.ma-konsultacja__trust-card li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ma-success);
}

@media (min-width: 768px) {
    .ma-konsultacja-grid {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--ma-space-16);
    }
}

/* --------------------------------------------------------------------------
   28. ARTICLE FOOTER CTA BOX
   -------------------------------------------------------------------------- */
.ma-article__footer {
    margin-top: var(--ma-space-16);
    padding-top: var(--ma-space-12);
    border-top: 1px solid var(--ma-border);
}

.ma-article__cta-box {
    background: var(--ma-dark);
    color: #FFFFFF;
    padding: var(--ma-space-10) var(--ma-space-8);
    border-radius: var(--ma-radius-lg);
    text-align: center;
}

.ma-article__cta-box h3 {
    color: #FFFFFF;
    margin-bottom: var(--ma-space-3);
}

.ma-article__cta-box p {
    color: var(--ma-dark-muted);
    margin-inline: auto;
    margin-bottom: var(--ma-space-8);
    max-width: 480px;
}

.ma-article__hero {
    margin-bottom: var(--ma-space-10);
}

.ma-article__hero-img {
    border-radius: var(--ma-radius-lg);
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   29. PAGINATION (wp default + styled)
   -------------------------------------------------------------------------- */
.ma-pagination {
    text-align: center;
}

.ma-pagination .nav-links {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-space-2);
}

.ma-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: var(--ma-space-2) var(--ma-space-3);
    font-family: var(--ma-font-heading);
    font-size: var(--ma-text-sm);
    font-weight: 500;
    color: var(--ma-text-body);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    transition:
        background-color var(--ma-duration-fast),
        color var(--ma-duration-fast),
        border-color var(--ma-duration-fast);
}

.ma-pagination .page-numbers:hover {
    background-color: var(--ma-dark);
    color: #FFFFFF;
    border-color: var(--ma-dark);
}

.ma-pagination .page-numbers.current {
    background-color: var(--ma-primary);
    color: #FFFFFF;
    border-color: var(--ma-primary);
}

.ma-pagination .page-numbers.dots {
    border: none;
    cursor: default;
}

.ma-pagination .page-numbers.dots:hover {
    background: none;
    color: var(--ma-text-body);
}

/* --------------------------------------------------------------------------
   FIN
   -------------------------------------------------------------------------- */