/*
 * MartCode brand layer on top of Techwind 3.2.0 (Tailwind CSS 4, precompiled).
 *
 * Loaded after tailwind.min.css. Techwind's utilities read --color-primary*,
 * so redefining the variables re-brands every bg-primary / text-primary use
 * without touching the theme file. Everything else here is a component the
 * precompiled CSS cannot provide: a class that is not in tailwind.min.css does
 * nothing, silently (tests/Unit/Theme/TemplateCssClassCoverageTest).
 *
 * Contrast (WCAG AA) was checked for every text/background pair below.
 */

/* ---------------------------------------------------------------- tokens */

:root {
    --color-primary: #6d3fe8;      /* white text on it: 5.96:1 */
    --color-primary-200: #d9ccfb;
    --color-primary-300: #bda6f7;
    --color-primary-500: #8a63ef;
    --color-primary-700: #5a2fd0;
    --color-primary-800: #4a26a8;

    --mc-ink: #16132b;             /* headings */
    --mc-text: #3f3b56;            /* body copy, 10.9:1 on white */
    --mc-muted: #6b6785;           /* secondary copy, 5.4:1 on white */
    --mc-line: #e6e3f0;
    --mc-surface: #f6f5fb;

    --mc-magenta: #e03fd8;
    --mc-violet: #8f7ce8;
    --mc-blue: #5b8def;
    --mc-cyan: #22c9d4;
    --mc-gradient: linear-gradient(120deg, var(--mc-magenta) 0%, var(--mc-violet) 50%, var(--mc-cyan) 100%);

    --mc-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --mc-radius: 0.75rem;
    --mc-nav-offset: 6rem;         /* sticky nav height + breathing room for #anchors */

    /* Phase 3 design system (docs/plans/phase-3-multi-page-premium-site.md,
       section 6). Ratios are WCAG 2.1 contrast against the pair named. */

    /* Surfaces. Text on --mc-surface-2: --mc-ink 15.6:1, --mc-text 9.2:1,
       --mc-muted 4.65:1. */
    --mc-bg: #ffffff;
    --mc-surface-2: #efedf8;

    /* The footer, the only dark block on the site (owner, 27.10.2026;
       DarkBlockTest). Ratios against --mc-footer-bg. */
    --mc-footer-bg: #0f172a;
    --mc-footer-heading: #ffffff;  /* 17.85:1 */
    --mc-footer-text: #e5e7eb;     /* 14.42:1 */
    --mc-footer-link: #cbd5e1;     /* 12.02:1 */
    --mc-footer-muted: #aab4c3;    /* 8.52:1 */
    --mc-footer-line: #1e293b;     /* the rule above the bottom row, decoration */

    /* Group accents (config/content/services.yaml groups). Each works as text
       on white and on its soft tint, and carries white text. */
    --mc-accent-build: #5a2fd0;          /* violet; 7.6:1 with white, 6.6:1 on its tint */
    --mc-accent-build-soft: #f1ecfd;
    --mc-accent-modernize: #a3229c;      /* magenta; 6.4:1 with white, 5.6:1 on its tint */
    --mc-accent-modernize-soft: #fcebfb;
    --mc-accent-operate: #0e7490;        /* cyan; 5.4:1 with white, 4.9:1 on its tint */
    --mc-accent-operate-soft: #e6f7f8;

    /* Fluid type scale: 375 px viewport at the low end, 1280 px at the high end. */
    --mc-step-0: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);      /* body */
    --mc-step-1: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);    /* lead */
    --mc-step-2: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);       /* card title */
    --mc-step-3: clamp(1.5rem, 1.29rem + 0.9vw, 2rem);          /* h2 */
    --mc-step-4: clamp(1.875rem, 1.51rem + 1.55vw, 2.75rem);    /* page h1 */
    --mc-step-5: clamp(2.25rem, 1.63rem + 2.65vw, 3.75rem);     /* display */
    --mc-tracking-display: -0.02em;
    --mc-tracking-mono: 0.08em;
    --mc-measure: 65ch;

    /* Space, shape, depth. Shadows are violet-tinted, three steps. */
    --mc-section-space: clamp(4rem, 8vw, 7.5rem);
    --mc-card-radius: 1rem;
    --mc-shadow-1: 0 1px 2px rgba(45, 22, 120, 0.06), 0 1px 3px rgba(45, 22, 120, 0.08);
    --mc-shadow-2: 0 12px 28px -14px rgba(45, 22, 120, 0.28);
    --mc-shadow-3: 0 30px 60px -30px rgba(40, 20, 90, 0.45);

    /* The light hero family (home hero and page-hero): white at the top, a
       faint lavender in the middle, white again where the next section
       starts, so no edge shows. --mc-text on --mc-hero-tint 9.6:1,
       --mc-muted 4.8:1 (used only away from the clouds). */
    --mc-hero-tint: #f4f1fd;
    --mc-hero-bg: linear-gradient(180deg, #fbfaff 0%, var(--mc-hero-tint) 62%, var(--mc-bg) 100%);
    --mc-glass-line: rgba(143, 124, 232, 0.24);
    --mc-shadow-glass: 0 1px 2px rgba(45, 22, 120, 0.05), 0 28px 56px -30px rgba(76, 45, 170, 0.38);
}

/* ------------------------------------------------------------------ base */

body {
    font-family: var(--mc-font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--mc-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

[id] {
    scroll-margin-top: var(--mc-nav-offset);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
pre:focus-visible {
    outline: 3px solid var(--color-primary-300);
    outline-offset: 2px;
}

/* On the light heroes the ring takes the stronger violet: --color-primary
   3.4:1 at the clouds' worst point (non-text contrast, 3:1). */
.hero :focus-visible,
.page-hero :focus-visible {
    outline-color: var(--color-primary);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: #fff;
    color: var(--mc-ink);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(22, 19, 43, 0.18);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------- brand */

.brand-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.brand-logo__mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.brand-logo__word {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mc-ink);
}

.brand-logo--light .brand-logo__word {
    color: #fff;
}

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.btn--primary:hover {
    background: var(--color-primary-700);
    color: #fff;
}

.btn--ghost {
    background: #fff;
    border-color: var(--mc-line);
    color: var(--mc-ink);
}

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

.btn--sm {
    padding: 0.6rem 1rem;
    font-size: 0.9375rem;
}

.btn[disabled] {
    opacity: 0.65;
    cursor: progress;
}

/* ---------------------------------------------------------------- navbar */

#topnav .buy-button {
    line-height: 74px;
}

#topnav .buy-button .btn {
    line-height: 1.2;
    vertical-align: middle;
}

@media (min-width: 992px) {
    /* Techwind sizes the megamenu for five columns; this site has three. */
    #topnav .navigation-menu > li .submenu.megamenu {
        width: auto;
        min-width: 46rem;
        flex-wrap: wrap;
    }

    #topnav .navigation-menu > li .submenu.megamenu > li {
        width: 33.333%;
    }

    /* Wrap onto its own line instead of shrinking into the column row. */
    #topnav .navigation-menu > li .submenu.megamenu > li.megamenu-all {
        flex: 0 0 100%;
    }
}

/* The navbar over the light heroes (spec section 6): transparent at the top
   of the page on every width, so the hero's background runs behind it;
   Techwind's own white bar under 992px is lifted. After 50px of scroll
   app.js adds .nav-sticky: light glass with a hairline. With the mobile menu
   open the bar is opaque white, like the menu under it. Worst case on the
   glass (82% white over the clouds' peak, #f8f2fd): --mc-ink 16.4:1,
   --color-primary 5.4:1. */
#topnav {
    background-color: transparent;
    box-shadow: none;
}

#topnav.nav-sticky {
    background-color: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--mc-line);
    box-shadow: 0 8px 24px -18px rgba(45, 22, 120, 0.35);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #topnav.nav-sticky {
        background-color: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
    }
}

#topnav:has(#isToggle.open) {
    background-color: #fff;
}

/* One row on phones: below 480px the header button gives way (the hero has
   the primary action, the menu's Contact entry the same link), so the logo,
   the language link and the menu toggle fit on one 74px row down to 320px. */
@media (max-width: 479.98px) {
    #topnav .buy-button .btn {
        display: none;
    }
}

/* Language switcher beside the CTA: the other market's code as a small link. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--mc-ink);
    text-decoration: none;
    border-radius: 0.375rem;
    vertical-align: middle;
}

.lang-switch:hover {
    color: var(--color-primary);
    background: var(--mc-surface);
}

#topnav .navigation-menu .megamenu-head {
    color: var(--mc-muted);
    font-weight: 600;
}

/* The group accent as a dot before the column head (spec section 6, site-nav). */
#topnav .navigation-menu .megamenu-head::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--mc-accent-build);
}

#topnav .navigation-menu .megamenu-head--modernize::before {
    background: var(--mc-accent-modernize);
}

#topnav .navigation-menu .megamenu-head--operate::before {
    background: var(--mc-accent-operate);
}

/* "All services": a full-width row under the three group columns. */
#topnav .navigation-menu > li .submenu.megamenu > li.megamenu-all {
    width: 100%;
}

/* ------------------------------------------------------------------ hero */

/* Home hero, the same family as the inner-page header (.page-hero): light
   from the top of the page (behind the transparent navbar), three soft
   brand-colour light clouds behind the content, which is aligned to the
   container. The clouds are radial gradients, not filter: blur, and drift
   on transform only (motion section below).
   Worst case, where the violet (30%) and magenta (16%) clouds overlap their
   peaks on --mc-hero-tint (#d7b7f2): --mc-ink 10.3:1, --mc-text 6.1:1,
   --color-primary-800 5.6:1, the focus ring (--color-primary) 3.4:1.
   --mc-muted is never used on the clouds (3.2:1 there). */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(6rem + clamp(2rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5rem);
    background: var(--mc-hero-bg);
}

.hero::before,
.hero__orb {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* Magenta, behind the headline. */
.hero::before {
    top: -14rem;
    left: -16rem;
    width: 48rem;
    height: 38rem;
    background: radial-gradient(closest-side, rgba(224, 63, 216, 0.16), transparent);
}

/* Violet, behind the product card. */
.hero__orb--violet {
    top: -8rem;
    right: -14rem;
    width: 58rem;
    height: 46rem;
    background: radial-gradient(closest-side, rgba(143, 124, 232, 0.3), transparent);
}

/* Cyan, low across the middle. */
.hero__orb--cyan {
    bottom: 1rem;
    left: 18%;
    width: 52rem;
    height: 36rem;
    background: radial-gradient(closest-side, rgba(34, 201, 212, 0.2), transparent);
}

.hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.hero__eyebrow {
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--color-primary-800);
}

.hero__title {
    max-width: 16ch;
    margin-top: 1.25rem;
    font-size: var(--mc-step-5);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: var(--mc-tracking-display);
    overflow-wrap: break-word;
    color: var(--mc-ink);
}

.hero__lead {
    max-width: 36rem;
    margin-top: 1.5rem;
    font-size: var(--mc-step-1);
    line-height: 1.6;
    color: var(--mc-text);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

/* The secondary action on the clouds: white glass, --mc-ink 15.4:1. */
.hero__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--mc-glass-line);
}

/* The product card and the terminal, layered: on desktop the terminal
   overlaps the card's bottom padding only, never its text. */
.hero__visual {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

/* Below 992px the clouds shrink to the narrow column, behind the headline
   and behind the cards. */
@media (max-width: 991.98px) {
    .hero::before {
        top: 3rem;
        left: -14rem;
        width: 32rem;
        height: 26rem;
    }

    .hero__orb--violet {
        top: 30rem;
        right: -18rem;
        width: 38rem;
        height: 34rem;
    }

    .hero__orb--cyan {
        bottom: 2rem;
        left: -12rem;
        width: 34rem;
        height: 26rem;
    }
}

@media (min-width: 992px) {
    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 4rem;
    }

    .hero__visual {
        gap: 0;
    }
}

/* White glass: the product card and the terminal. Opaque enough without
   backdrop-filter; translucent and blurred where it is supported. Worst case
   on the glass (72% white over the clouds' peak, #f4ebfb): --mc-ink 15.6:1,
   --mc-text 9.2:1, --mc-muted 4.6:1, --color-primary-700 6.6:1. */
.glass {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--mc-glass-line);
    border-radius: var(--mc-card-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--mc-shadow-glass);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }
}

/* Product panel: Delta, Sigma and Epsilon carry their Greek letters, each
   tile a stop of the logo gradient (white on the tiles, decoration-sized
   600 weight: 3.4:1 at the lightest stop, large text). */
.product-panel {
    position: relative;
    padding: clamp(1.25rem, 4vw, 1.75rem);
}

.product-panel__title {
    font-family: var(--mc-font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--mc-muted);
}

.product-panel__list {
    display: grid;
    gap: 0.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.product-panel__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 0;
    border-top: 1px solid var(--mc-line);
}

.product-panel__item:first-child {
    border-top: 0;
}

.product-panel__glyph {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--mc-magenta), var(--mc-violet));
    box-shadow: 0 6px 14px -8px rgba(90, 47, 208, 0.6);
}

.product-panel__item:nth-child(2) .product-panel__glyph {
    background: linear-gradient(135deg, var(--mc-violet), var(--mc-blue));
}

.product-panel__item:nth-child(3) .product-panel__glyph {
    background: linear-gradient(135deg, var(--mc-blue), var(--mc-cyan));
}

.product-panel__text {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.product-panel__name {
    font-weight: 600;
    color: var(--mc-ink);
}

.product-panel__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mc-muted);
}

.product-panel__note {
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mc-line);
    font-size: 0.8125rem;
    color: var(--mc-muted);
}

/* The deploy terminal: this site's pipeline, one line per step, on glass.
   The command in --mc-ink, each finished step in --mc-text after a cyan
   dot (decoration, not text). */
.hero-terminal {
    position: relative;
    margin: 0;
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--mc-text);
    overflow: hidden;
}

.hero-terminal__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.75rem;
    color: var(--mc-muted);
    border-bottom: 1px solid var(--mc-line);
}

.hero-terminal__dots {
    display: inline-flex;
    gap: 0.35rem;
}

.hero-terminal__dots span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--mc-magenta);
    opacity: 0.55;
}

.hero-terminal__dots span:nth-child(2) {
    background: var(--mc-violet);
}

.hero-terminal__dots span:nth-child(3) {
    background: var(--mc-cyan);
}

.hero-terminal__lines {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 1rem 1.1rem 1.15rem;
    list-style: none;
}

/* The caret after the last line (decoration). */
.hero-terminal__lines::after {
    content: "";
    width: 0.5rem;
    height: 2px;
    margin-top: 0.6rem;
    background: var(--color-primary);
}

.hero-terminal__line {
    overflow-wrap: anywhere;
}

.hero-terminal__line:first-child {
    color: var(--mc-ink);
    font-weight: 500;
}

/* A wrapped line hangs under its text, not under the dot. */
.hero-terminal__line:not(:first-child) {
    display: grid;
    grid-template-columns: 0.4rem minmax(0, 1fr);
    column-gap: 0.65rem;
}

.hero-terminal__line:not(:first-child)::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: calc((1.6em - 0.4rem) / 2);
    border-radius: 50%;
    background: var(--mc-cyan);
}

@media (min-width: 992px) {
    .product-panel {
        padding-bottom: 3.25rem;
    }

    .hero-terminal {
        margin: -1.75rem 0 0 2rem;
    }
}

/* --------------------------------------------------------------- section */

.section {
    padding: 5rem 0;
}

.section--surface {
    background: var(--mc-surface);
}

.section__head {
    max-width: 42rem;
    margin-bottom: 3rem;
}

.section__title {
    font-size: clamp(1.875rem, 1.6vw + 1.2rem, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--mc-ink);
}

.section__lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    color: var(--mc-text);
}

@media (min-width: 992px) {
    .section {
        padding: 6.5rem 0;
    }
}

.section__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-weight: 600;
    color: var(--color-primary-700);
    text-decoration: none;
}

.section__more:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------- code diff */

/* The legacy-to-Symfony diff on the modernization page, a light code panel
   in the hero terminal's family. On --mc-bg-code (#fbfaff): --mc-ink
   17.4:1, --mc-muted 5.2:1; the removed lines #9f1239 on their rose tint
   at least 7.0:1, the added lines #155e75 on their cyan tint at least 6.5:1. */
.code-diff {
    position: relative;
    margin: 0;
    background: #fbfaff;
    color: var(--mc-ink);
    border: 1px solid var(--mc-glass-line);
    border-radius: 1rem;
    box-shadow: var(--mc-shadow-glass);
    overflow: hidden;
}

.code-diff::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--mc-gradient);
}

.code-diff__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    color: var(--mc-muted);
    border-bottom: 1px solid var(--mc-line);
}

.code-diff__dots {
    display: inline-flex;
    gap: 0.35rem;
    margin-right: 0.4rem;
}

.code-diff__dots span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--mc-magenta);
    opacity: 0.55;
}

.code-diff__dots span:nth-child(2) {
    background: var(--mc-violet);
}

.code-diff__dots span:nth-child(3) {
    background: var(--mc-cyan);
}

.code-diff__file {
    color: var(--mc-ink);
}

.code-diff__arrow {
    font-size: 0.875rem;
}

.code-diff__body {
    margin: 0;
    padding: 1rem 0;
    overflow-x: auto;
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* Flex column: whitespace-only text between the spans is not rendered. */
.code-diff__body code {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

.code-diff__line {
    padding: 0 1.1rem;
    white-space: pre;
}

.code-diff__line--del {
    color: #9f1239;
    background: rgba(244, 63, 94, 0.06);
}

.code-diff__line--add {
    color: #155e75;
    background: rgba(34, 201, 212, 0.07);
}

.code-diff__caption {
    padding: 0.9rem 1.1rem 1.1rem;
    font-size: 0.875rem;
    color: var(--mc-text);
    border-top: 1px solid var(--mc-line);
}

/* --------------------------------------------------------------- contact */

.contact {
    display: grid;
    gap: 3rem;
}

@media (min-width: 992px) {
    .contact {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 5rem;
        align-items: start;
    }
}

.contact-channels {
    display: grid;
    gap: 0;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.contact-channel {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 0.75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--mc-line);
}

.contact-channel > i {
    grid-row: span 2;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--color-primary);
}

.contact-channel__label {
    font-size: 0.875rem;
    color: var(--mc-muted);
}

.contact-channel__value {
    font-weight: 500;
    color: var(--mc-ink);
    text-decoration: none;
}

a.contact-channel__value:hover {
    color: var(--color-primary);
}

.contact-form {
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: 1rem;
    box-shadow: 0 24px 48px -36px rgba(40, 20, 90, 0.35);
}

.contact-form__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--mc-ink);
}

.contact-form__submit {
    width: 100%;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .contact-form {
        padding: 2.5rem;
    }
}

.form-status {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
}

.form-status:empty {
    display: none;
}

.form-status[data-state="success"] {
    color: #0b6b4f;
    background: #e7f8f2;
}

.form-status[data-state="error"] {
    color: #9c1340;
    background: #fdecef;
}

.form-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-field--wide {
        grid-column: 1 / -1;
    }
}

.form-field {
    display: grid;
    gap: 0.4rem;
    align-content: start;
}

.form-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--mc-ink);
}

.form-label__required {
    color: #b3134f;
}

.form-control {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: 1rem;
    color: var(--mc-ink);
    background: #fff;
    border: 1px solid #cfcadf;
    border-radius: 0.5rem;
}

.form-control:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-primary-200);
    outline-offset: 0;
}

.form-control[aria-invalid="true"] {
    border-color: #b3134f;
}

.form-control--textarea {
    min-height: 8.5rem;
    resize: vertical;
}

.form-help {
    font-size: 0.875rem;
    color: var(--mc-muted);
}

.form-error {
    font-size: 0.875rem;
    color: #b3134f;
}

.form-error:empty {
    display: none;
}

.form-check {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.9375rem;
}

.form-check input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    accent-color: var(--color-primary);
}

.form-check a {
    color: var(--color-primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp-field {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------------- legal */

.legal__body {
    max-width: 46rem;
}

.legal__body h2 {
    margin-top: 2.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mc-ink);
}

.legal__body > h2:first-child {
    margin-top: 0;
}

.legal__body p {
    margin-top: 0.75rem;
}

.legal__body ul {
    margin-top: 0.75rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.legal__body li {
    margin-top: 0.4rem;
}

/* ------------------------------------------------------------ breadcrumb */

.breadcrumb {
    margin-bottom: 1.5rem;
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '\203A';           /* › */
    margin-right: 0.5rem;
    color: var(--mc-muted);
}

.breadcrumb__link {
    color: var(--mc-muted);     /* 5.4:1 on white */
    text-decoration: none;
}

.breadcrumb__link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb__current {
    color: var(--mc-ink);
}

/* ----------------------------------------------------------------- error */

.error-page {
    padding-top: 10rem;
    min-height: 70vh;
}

.error-page__code {
    font-family: var(--mc-font-mono);
    font-size: 1rem;
    color: var(--mc-muted);
}

.error-page__title {
    margin-top: 0.5rem;
    font-size: clamp(2rem, 2vw + 1.2rem, 2.75rem);
    font-weight: 600;
    color: var(--mc-ink);
}

.error-page__text {
    max-width: 36rem;
    margin: 1rem 0 2rem;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    font-size: 0.9375rem;
    color: var(--mc-footer-text);
    background: var(--mc-footer-bg);
}

.site-footer__main {
    display: grid;
    gap: 2.5rem;
    padding: 4rem 0 3rem;
}

@media (min-width: 768px) {
    .site-footer__main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .site-footer__main {
        grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr);
        gap: 2.5rem;
    }
}

.site-footer__tagline {
    max-width: 22rem;
    margin-top: 1.25rem;
    color: var(--mc-footer-link);
}

.site-footer__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mc-footer-heading);
}

/* The registry details under the contact channels, in the same column. */
.site-footer__title--group {
    margin-top: 2rem;
}

.site-footer__links {
    display: grid;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.site-footer__links a {
    color: var(--mc-footer-link);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--mc-footer-heading);
    text-decoration: underline;
}

.site-footer__company {
    display: grid;
    gap: 0.35rem;
    margin-top: 1.1rem;
    font-style: normal;
    color: var(--mc-footer-muted);
}

.site-footer__bottom {
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--mc-footer-muted);
    border-top: 1px solid var(--mc-footer-line);
}

/* ---------------------------------------------------------- grid items */

/* Grid children default to min-width: auto, so one long word (an e-mail
   address, the MERSİS number) can stretch its track and push the layout
   sideways on phones. */
.hero__copy,
.contact__intro,
.site-footer__brand,
.site-footer__col {
    min-width: 0;
}

/* ---------------------------------------------------------------- motion */

/* Spec section 6, Motion. Everything below is inside no-preference, so with
   prefers-reduced-motion nothing moves and nothing starts hidden; without
   JavaScript (no .js on <html>, js/motion.js adds it) nothing starts hidden
   either. Only transform and opacity animate, except the terminal's typing
   (clip-path on five short lines).
   .reveal: fades up once when it enters the viewport (.is-visible); the
   hidden start has no transition, so adding .js never fades content out.
   Siblings stagger through nth-child: the CSP forbids style="". */
@media screen and (prefers-reduced-motion: no-preference) {
    .hero::before {
        animation: mc-drift-a 34s ease-in-out infinite alternate;
    }

    .hero__orb--violet {
        will-change: transform;
        animation: mc-drift-b 40s ease-in-out infinite alternate;
    }

    .hero__orb--cyan {
        animation: mc-drift-c 28s ease-in-out infinite alternate;
    }

    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
    }

    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .js .reveal:nth-child(2).is-visible { transition-delay: 0.08s; }
    .js .reveal:nth-child(3).is-visible { transition-delay: 0.16s; }
    .js .reveal:nth-child(4).is-visible { transition-delay: 0.24s; }
    .js .reveal:nth-child(n+5).is-visible { transition-delay: 0.32s; }

    /* The terminal types its lines in one after another once it is
       visible: each line is uncovered left to right in steps, the caret
       blinks four times after the last one, then stays (WCAG 2.2.2: no
       blinking past five seconds). */
    .js .hero-terminal .hero-terminal__line {
        clip-path: inset(0 100% 0 0);
    }

    .js .hero-terminal.is-visible .hero-terminal__line {
        animation: mc-type 0.6s steps(24, end) forwards;
    }

    .js .hero-terminal.is-visible .hero-terminal__line:nth-child(1) { animation-delay: 0.5s; }
    .js .hero-terminal.is-visible .hero-terminal__line:nth-child(2) { animation-delay: 1.3s; }
    .js .hero-terminal.is-visible .hero-terminal__line:nth-child(3) { animation-delay: 1.9s; }
    .js .hero-terminal.is-visible .hero-terminal__line:nth-child(4) { animation-delay: 2.5s; }
    .js .hero-terminal.is-visible .hero-terminal__line:nth-child(5) { animation-delay: 3.1s; }
    .js .hero-terminal.is-visible .hero-terminal__line:nth-child(n+6) { animation-delay: 3.7s; }

    .hero-terminal__lines::after {
        animation: mc-caret 1.1s steps(1, end) 4;
    }
}

@keyframes mc-drift-a {
    to { transform: translate3d(9rem, 5rem, 0) scale(1.12); }
}

@keyframes mc-drift-b {
    to { transform: translate3d(-11rem, 6rem, 0) scale(0.9); }
}

@keyframes mc-drift-c {
    to { transform: translate3d(-7rem, -4rem, 0) scale(1.15); }
}

@keyframes mc-type {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes mc-caret {
    50% { opacity: 0; }
}

/* ---------------------------------------------------------------- print */

/* The motion block above is screen-only already; this states the print
   result outright, so a later change to that media query cannot print a
   page with hidden blocks or half-typed terminal lines. */
@media print {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-terminal__line {
        clip-path: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/*
 * Consent banner (docs/plans/ip-3-share-seo-speed-analytics.md, 3.4). Fixed, so
 * showing it never shifts the layout. The two buttons look the same on purpose:
 * rejecting must be as easy as allowing.
 */
.consent-banner {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 50;
    max-width: 36rem;
    margin-inline: auto;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.2);
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner__title {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.consent-banner__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.consent-banner__text a {
    color: var(--color-primary-700);
    text-decoration: underline;
}

.consent-banner__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.consent-banner__button {
    flex: 1 1 0;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.consent-banner__button:hover {
    border-color: var(--color-primary-700);
    background: var(--color-primary-700);
}

.consent-banner__button:focus-visible,
.site-footer__link-button:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* The footer's "Cookie preferences" is a button that looks like its links. */
.site-footer__link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.site-footer__link-button:hover {
    text-decoration: underline;
}

/* Contact form result (İP-5): the native <dialog>, in the site's look. */
.contact-dialog {
    width: min(26rem, calc(100vw - 2rem));
    /* The reset zeroes every margin; the browser centres a modal dialog with this one. */
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--mc-radius);
    background: #fff;
    color: var(--mc-text);
    box-shadow: 0 24px 60px rgba(22, 19, 43, 0.28);
}

.contact-dialog::backdrop {
    background: rgba(22, 19, 43, 0.55);
}

.contact-dialog__body {
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
}

.contact-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.contact-dialog[data-state="success"] .contact-dialog__icon {
    color: #0b6b4f;
    background: #e7f8f2;
}

.contact-dialog[data-state="success"] .contact-dialog__icon::before {
    content: "\2713";
}

.contact-dialog[data-state="error"] .contact-dialog__icon {
    color: #9c1340;
    background: #fdecef;
}

.contact-dialog[data-state="error"] .contact-dialog__icon::before {
    content: "!";
}

.contact-dialog__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--mc-ink);
}

.contact-dialog__message {
    margin: 0 0 1.5rem;
    line-height: 1.55;
}

.contact-dialog__actions {
    margin: 0;
}

.contact-dialog__actions .btn {
    min-width: 8rem;
}

.contact-form__recaptcha {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--mc-muted);
}

/* Google allows hiding the badge while the form shows its notice. */
.grecaptcha-badge {
    visibility: hidden;
}

/* The dialog's booking link stays hidden until contact-form.js offers it (.btn sets display). */
.contact-dialog__actions .btn[hidden] {
    display: none;
}

/* The privacy notice of the contact form, in a dialog instead of a new tab (contact-form.js). */
.legal-dialog {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(85vh, 52rem);
}

.legal-dialog[open] {
    display: flex;
    flex-direction: column;
}

.legal-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(22, 19, 43, 0.1);
}

.legal-dialog__title {
    margin: 0;
    font-size: 1.125rem;
}

.legal-dialog__close {
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.legal-dialog__content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    text-align: left;
}

.legal-dialog__actions {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(22, 19, 43, 0.1);
}

/* The booking calendar of a meeting request (contact-form.js); its head reuses .legal-dialog__head. */
.booking-dialog {
    width: min(64rem, calc(100vw - 2rem));
    height: min(90vh, 52rem);
}

.booking-dialog[open] {
    display: flex;
    flex-direction: column;
}

.booking-dialog__note {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--mc-muted);
}

.booking-dialog__frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
}

/* ------------------------------------------------------------- page-hero */

/* Inner page header (layout/page.html.twig), the same on every inner page
   and the same family as the home hero: light from the top of the page,
   behind the transparent navbar, with the home hero's three clouds as a
   still background (no motion here: the page's own content is the point).
   Breadcrumb, eyebrow, h1 and lead sit in .page-hero__panel, a plain
   child of .container, so they line up with the content below.
   Worst case, at the violet cloud's peak (24%) on --mc-hero-tint
   (#dcd5f8): --mc-ink 12.8:1, --mc-text 7.6:1, --color-primary-800 7.0:1;
   the breadcrumb (--mc-muted) sits at the top left, away from the violet
   peak: 4.7:1 at worst, under the faint magenta. */
.page-hero {
    position: relative;
    padding: calc(6rem + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3rem, 6vw, 4.5rem);
    background:
        radial-gradient(42rem 26rem at 96% 0, rgba(143, 124, 232, 0.24), transparent 70%),
        radial-gradient(34rem 22rem at 52% 0, rgba(224, 63, 216, 0.06), transparent 70%),
        radial-gradient(34rem 16rem at 72% 55%, rgba(34, 201, 212, 0.09), transparent 70%),
        var(--mc-hero-bg);
}

/* The content box: no surface of its own any more, the header is the
   surface. Kept as the hook PagesTest and contact-form.js read. */
.page-hero__panel {
    position: relative;
}

.page-hero__eyebrow {
    font-family: var(--mc-font-mono);
    font-size: 0.8125rem;
    letter-spacing: var(--mc-tracking-mono);
    text-transform: uppercase;
    color: var(--color-primary-800);
}

.page-hero__title {
    max-width: 24ch;
    margin-top: 0.75rem;
    font-size: var(--mc-step-4);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--mc-tracking-display);
    overflow-wrap: break-word;
    color: var(--mc-ink);
}

.page-hero__lead {
    max-width: var(--mc-measure);
    margin-top: 1.25rem;
    font-size: var(--mc-step-1);
    line-height: 1.6;
    color: var(--mc-text);
}

.page-hero__eyebrow::before,
.hero__eyebrow::before,
.capability-section__eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    margin-right: 0.75rem;
    vertical-align: middle;
    background: var(--mc-gradient);
}


/* -------------------------------------------------------------- cta-band */

/* The band at the end of every inner page, in the heroes' family: a faint
   lavender surface (--mc-hero-tint) with a still violet and cyan cloud, a
   hairline border and the gradient line on top. Worst case, at the violet
   cloud's peak (16%, #e4defa): --mc-ink 13.9:1, --mc-text 8.2:1; the
   ghost button is white (--mc-ink 15.6:1), the primary button white on
   --color-primary 6.0:1, the focus ring (--color-primary) 4.6:1. */
.cta-band {
    padding: var(--mc-section-space) 0;
}

.cta-band__inner {
    position: relative;
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    padding: clamp(2rem, 5vw, 3.5rem);
    background:
        radial-gradient(36rem 22rem at 100% 0, rgba(143, 124, 232, 0.16), transparent 70%),
        radial-gradient(30rem 18rem at 0 100%, rgba(34, 201, 212, 0.08), transparent 70%),
        var(--mc-hero-tint);
    border: 1px solid var(--mc-glass-line);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-glass);
    overflow: hidden;
}

.cta-band__inner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--mc-gradient);
}

.cta-band__title {
    max-width: 28ch;
    font-size: var(--mc-step-3);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: var(--mc-tracking-display);
    color: var(--mc-ink);
}

.cta-band__text {
    max-width: var(--mc-measure);
    color: var(--mc-text);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cta-band :focus-visible {
    outline-color: var(--color-primary);
}