/* Modern hero: product-tech look */
.front-hero {
    position: relative;
    color: #fff;
    padding: clamp(64px, 8vw, 108px) 0;
    background:
        radial-gradient(900px 420px at 75% 20%, rgba(56, 189, 248, .14), transparent 60%),
        radial-gradient(700px 360px at 15% 70%, rgba(200, 255, 0, .10), transparent 55%),
        linear-gradient(180deg, rgba(11, 22, 51, 1) 0%, rgba(7, 12, 30, 1) 100%);
    overflow: hidden;
}

/* subtle animated grid sheen */
.front-hero::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .06) 0px,
            rgba(255, 255, 255, .06) 1px,
            transparent 1px,
            transparent 12px);
    opacity: .10;
    transform: translateX(-30%);
    animation: heroSheen 10s linear infinite;
    pointer-events: none;
}

@keyframes heroSheen {
    0% {
        transform: translateX(-40%);
    }

    100% {
        transform: translateX(40%);
    }
}

.front-hero__inner {
    position: relative;
    z-index: 1;
}

.front-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.front-hero__copy {
    max-width: 860px;
}

.front-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    letter-spacing: .04em;
}

.front-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c8ff00;
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .12);
}

.front-hero__title {
    margin: 14px 0 12px;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.front-hero__titleAccent {
    color: rgba(255, 255, 255, .92);
}

.front-hero__lead {
    margin: 0;
    max-width: 760px;
    font-size: clamp(16px, 2vw, 19px);
    color: rgba(255, 255, 255, .84);
}

.front-hero__actions {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.front-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
}

.front-hero__mini {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 760px;
}

.mini {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mini strong {
    font-weight: 850;
    color: rgba(255, 255, 255, .92);
}

.mini span {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

/* Right panel: simplified + ordered */
.front-hero__panel {
    display: block;
}

.panel {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .05);
}

.panel__lights {
    display: flex;
    gap: 6px;
}

.panel__lights span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}

.panel__title {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    font-weight: 750;
}

.panel__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Modules */
.module {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    border-radius: 18px;
    padding: 12px;
}

.module--accent {
    border-color: rgba(200, 255, 0, .24);
    background: rgba(200, 255, 0, .06);
}

.module__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.module__tag {
    width: 36px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid rgba(200, 255, 0, .45);
    background: rgba(200, 255, 0, .10);
    color: rgba(255, 255, 255, .92);
}

.module__title {
    font-weight: 850;
    color: rgba(255, 255, 255, .92);
    letter-spacing: -0.01em;
}

/* Chips inside module */
.module__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mchip {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
}

/* Flow */
.flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    margin-bottom: 10px;
}

.flow__node {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
}

.flow__node--lime {
    border-color: rgba(200, 255, 0, .45);
    background: rgba(200, 255, 0, .12);
    color: rgba(255, 255, 255, .92);
}

.flow__arrow {
    width: 14px;
    height: 1px;
    background: rgba(255, 255, 255, .22);
    position: relative;
}

.flow__arrow::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(200, 255, 0, .65);
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .10);
}

/* Rows (clean table-like) */
.module__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

.row__k {
    font-size: 12px;
    color: rgba(255, 255, 255, .74);
}

.row__v {
    font-size: 12px;
    color: rgba(255, 255, 255, .92);
    font-weight: 750;
    text-align: right;
}

/* Metrics */
.module__metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.metric {
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric__k {
    font-size: 12px;
    color: rgba(255, 255, 255, .74);
}

.metric__v {
    font-weight: 850;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    letter-spacing: -0.01em;
}

/* Responsive */
@media (max-width: 920px) {
    .panel {
        display: none;
    }
}

@media (min-width: 920px) {
    .front-hero {
        padding: clamp(80px, 8vw, 120px) 0;
    }

    .front-hero__grid {
        grid-template-columns: 1.15fr .85fr;
        gap: 22px;
        align-items: center;
    }

    .front-hero__actions {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .front-hero__mini {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .front-hero {
        margin-top: 50px;
    }
}

/* WHO WE HELP – hero-like aesthetic (dark glass, lime/cyan accents) */
.front-who-help--dark {
    position: relative;
    color: #fff;
    padding: clamp(58px, 7vw, 96px) 0;
    background:
        radial-gradient(900px 420px at 75% 20%, rgba(56, 189, 248, .14), transparent 60%),
        radial-gradient(700px 360px at 15% 70%, rgba(200, 255, 0, .10), transparent 55%),
        linear-gradient(180deg, rgba(11, 22, 51, 1) 0%, rgba(7, 12, 30, 1) 100%);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* subtle animated sheen grid (like hero, but calmer) */
.front-who-help--dark::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .06) 0px,
            rgba(255, 255, 255, .06) 1px,
            transparent 1px,
            transparent 14px);
    opacity: .10;
    transform: translateX(-25%);
    animation: whSheen 12s linear infinite;
    pointer-events: none;
}

@keyframes whSheen {
    0% {
        transform: translateX(-35%);
    }

    100% {
        transform: translateX(35%);
    }
}

.front-who-help__inner {
    position: relative;
    z-index: 1;
}

.front-who-help__head {
    max-width: 980px;
    margin-bottom: 16px;
}

.front-who-help__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    letter-spacing: .06em;
}

.wh-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c8ff00;
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .12);
}

.front-who-help__title {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.6vw, 42px);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.front-who-help__titleAccent {
    color: rgba(255, 255, 255, .92);
    display: inline-block;
    margin-left: 6px;
}

.front-who-help__lead {
    margin: 0;
    max-width: 860px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(15px, 1.6vw, 18px);
}

/* Grid */
.front-who-help__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
}

/* Cards (glass) – lighter than hero panel */
.wh-card {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.wh-card::after {
    content: "";
    position: absolute;
    inset: auto -35% -45% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, .14), transparent 60%);
    opacity: .35;
    transform: rotate(8deg);
    pointer-events: none;
}

.wh-card--accent {
    border-color: rgba(200, 255, 0, .24);
    background: rgba(200, 255, 0, .06);
}

.wh-card--accent::after {
    background: radial-gradient(circle at 30% 30%, rgba(200, 255, 0, .16), transparent 60%);
}

/* Card header */
.wh-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.wh-kicker {
    width: 40px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .86);
    letter-spacing: .06em;
}

.wh-kicker--lime {
    border-color: rgba(200, 255, 0, .45);
    background: rgba(200, 255, 0, .10);
    color: rgba(255, 255, 255, .92);
}

.wh-ico {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .90);
}

.wh-ico svg {
    width: 20px;
    height: 20px;
}

.wh-ico--lime {
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .08) inset;
    border-color: rgba(200, 255, 0, .25);
}

.wh-ico--cyan {
    box-shadow: 0 0 0 6px rgba(56, 189, 248, .08) inset;
    border-color: rgba(56, 189, 248, .25);
}

/* Text */
.wh-card__title {
    margin: 0 0 6px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.25;
}

.wh-card__desc {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Tags (subtle chips) */
.wh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wh-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
}

/* Footer */
.front-who-help__footer {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wh-note {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .78);
}

.wh-note strong {
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
}

.wh-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wh-cta__hint {
    color: rgba(255, 255, 255, .70);
    font-size: 12px;
}

/* Responsive */
@media (min-width: 900px) {
    .front-who-help__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
        align-items: stretch;
    }

    .wh-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .wh-cta__hint {
        text-align: right;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .front-who-help--dark::before {
        animation: none;
    }
}

/* === SECTION === */
.front-clients {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 0;
    color: #fff;
    background:
        radial-gradient(900px 420px at 75% 20%, rgba(56, 189, 248, .14), transparent 60%),
        radial-gradient(700px 360px at 15% 70%, rgba(200, 255, 0, .10), transparent 55%),
        linear-gradient(180deg, rgba(11, 22, 51, 1), rgba(7, 12, 30, 1));
    overflow: hidden;
}

.front-clients::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .06) 0px,
            rgba(255, 255, 255, .06) 1px,
            transparent 1px,
            transparent 12px);
    opacity: .10;
    animation: sheen 10s linear infinite;
    pointer-events: none;
}

@keyframes sheen {
    from {
        transform: translateX(-40%);
    }

    to {
        transform: translateX(40%);
    }
}

.front-clients__inner {
    position: relative;
    z-index: 1;
}

/* === HEAD === */
.front-clients__head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 24px;
}

.front-clients__badge {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
}

.front-clients__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c8ff00;
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .12);
}

.front-clients__title {
    margin: 14px auto 10px;
    font-size: clamp(26px, 3.6vw, 42px);
    letter-spacing: -.03em;
}

.front-clients__lead {
    color: rgba(255, 255, 255, .86);
    max-width: 780px;
    margin: 0 auto 14px;
}

/* === SWITCH === */
.fc-switch {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
}

.fc-switch__btn {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font-weight: 850;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fc-switch__btn:hover {
    transform: translateY(-1px);
}

.fc-switch__btn.is-active {
    background: #c8ff00;
    color: #0b1633;
    border-color: rgba(200, 255, 0, .55);
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .08);
}

/* === PANELS (smooth swap) === */
.fc-panels {
    margin-top: 18px;
}

.fc-panel {
    transition: opacity .22s ease, transform .22s ease;
    opacity: 0;
    transform: translateY(8px);
}

.fc-panel.is-active {
    opacity: 1;
    transform: translateY(0);
}

.fc-panel.is-leave {
    opacity: 0;
    transform: translateY(6px);
}

/* === STAGGER ITEMS (enter) === */
[data-stagger-item] {
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition:
        opacity .45s cubic-bezier(.2, .9, .2, 1),
        transform .55s cubic-bezier(.2, .9, .2, 1);
    transition-delay: var(--stagger-delay, 0ms);
    will-change: opacity, transform;
}

[data-stagger-item].is-enter {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .front-clients::before {
        animation: none;
    }

    .fc-panel,
    [data-stagger-item],
    .fc-switch__btn {
        transition: none !important;
    }

    [data-stagger-item] {
        opacity: 1;
        transform: none;
    }
}

/* === PROJECTS (modern case studies grid) === */
.fc-projects {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.fc-project {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    min-height: 200px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
    isolation: isolate;
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.fc-project:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 255, 0, .22);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
}

.fc-project__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .58;
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.02);
}

.fc-project__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 300px at 20% 10%, rgba(200, 255, 0, .10), transparent 55%),
        linear-gradient(180deg, rgba(7, 12, 30, .15), rgba(7, 12, 30, .92));
}

.fc-project__content {
    position: relative;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fc-project__titlebox {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
}

.fc-project__title {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.fc-project__arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(200, 255, 0, .12);
    border: 1px solid rgba(200, 255, 0, .22);
    color: #c8ff00;
    font-weight: 900;
    transform: translateY(1px);
}

.fc-project__desc {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .88);
    max-width: 70ch;
}

/* lepsza siatka na desktop + gotowe pod więcej case studies */
@media(min-width:900px) {
    .fc-projects {
        grid-template-columns: 1.2fr .8fr;
        grid-auto-rows: 1fr;
    }

    .fc-projects .fc-project:first-child {
        grid-row: span 2;
        min-height: 420px;
    }
}

/* === LOGOS (2 per row, bigger, elegant cards) === */
.fc-logos {
    max-width: 980px;
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* zawsze 2 w wierszu */
    gap: 18px;
}

.fc-logo {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.fc-logo__card {
    width: 100%;
    height: 120px;
    /* większe, premium */
    display: grid;
    place-items: center;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .16);
    background:
        radial-gradient(900px 200px at 50% 20%, rgba(56, 189, 248, .08), transparent 55%),
        rgba(255, 255, 255, .05);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.fc-logo__card:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 255, 0, .22);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .30);
    background:
        radial-gradient(900px 200px at 50% 20%, rgba(200, 255, 0, .10), transparent 55%),
        rgba(255, 255, 255, .055);
}

.fc-logo img {
    max-height: 62px;
    /* większe logo */
    max-width: 82%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 18px 42px rgba(0, 0, 0, .38));
    opacity: .96;
}

.fc-logo figcaption {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .86);
    text-align: center;
}

/* jeśli chcesz na większych ekranach dać więcej oddechu */
@media(min-width:900px) {
    .fc-logos {
        gap: 22px;
    }

    .fc-logo__card {
        height: 132px;
    }

    .fc-logo img {
        max-height: 68px;
    }
}

/* ==========================================================================
   PILLARS / WHAT WE DO – Process rail (DARK, cohesive with hero-like sections)
   ========================================================================== */

.front-whatwedo-rail {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0;
    overflow: hidden;
}

/* DARK variant (use this for consistency with front-who-help--dark) */
.front-whatwedo-rail--dark {
    color: #fff;
    background:
        radial-gradient(900px 420px at 80% 20%, rgba(56, 189, 248, .14), transparent 60%),
        radial-gradient(700px 360px at 15% 70%, rgba(200, 255, 0, .10), transparent 55%),
        linear-gradient(180deg, rgba(11, 22, 51, 1) 0%, rgba(7, 12, 30, 1) 100%);
}

/* subtle animated sheen grid (calm, like hero / who-we-help) */
.front-whatwedo-rail--dark::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .06) 0px,
            rgba(255, 255, 255, .06) 1px,
            transparent 1px,
            transparent 14px);
    opacity: .10;
    transform: translateX(-25%);
    animation: wrailSheen 14s linear infinite;
    pointer-events: none;
}

@keyframes wrailSheen {
    0% {
        transform: translateX(-35%);
    }

    100% {
        transform: translateX(35%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-whatwedo-rail--dark::before {
        animation: none;
    }
}

.front-whatwedo-rail__inner {
    position: relative;
    z-index: 1;
}

.front-whatwedo-rail__head {
    max-width: 980px;
    margin-bottom: 18px;
}

.front-whatwedo-rail__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wrail-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c8ff00;
    box-shadow: 0 0 0 6px rgba(200, 255, 0, .12);
}

.front-whatwedo-rail__title {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.6vw, 42px);
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: rgba(255, 255, 255, .96);
}

.front-whatwedo-rail__lead {
    margin: 0;
    max-width: 860px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
}

/* grid */
.front-whatwedo-rail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 18px;
    align-items: start;
}

/* rail */
.wrail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 18px;
}

/* vertical line */
.wrail::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg,
            rgba(200, 255, 0, .60),
            rgba(56, 189, 248, .50),
            rgba(255, 255, 255, .12));
    opacity: .95;
}

.wrail-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: start;
}

.wrail-step__pin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
}

.wrail-step__num {
    width: 46px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: 12px;
    letter-spacing: .10em;
    color: rgba(255, 255, 255, .90);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
}

.wrail-step__pulse {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}

.wrail-step__pulse--lime {
    background: rgba(200, 255, 0, 1);
    box-shadow: 0 0 0 8px rgba(200, 255, 0, .12);
}

.wrail-step__pulse--cyan {
    background: rgba(56, 189, 248, 1);
    box-shadow: 0 0 0 8px rgba(56, 189, 248, .12);
}

/* Text */
.wrail-step__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .92);
}

.wrail-step__desc {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.55;
    max-width: 860px;
}

.wrail-step__meta {
    margin: 0;
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wrail-sep {
    opacity: .55;
}

/* subtle accent for step 2 only */
.wrail-step--accent .wrail-step__title {
    display: inline;
    background: linear-gradient(transparent 72%, rgba(56, 189, 248, .18) 0);
    padding: 0 .10em;
}

/* aside (compact, subtle glass + typography, not a big card) */
.wrail-aside {
    max-width: 520px;
    padding-top: 6px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    border-radius: 16px;
    padding: 14px 16px 14px 18px;
    backdrop-filter: blur(10px);
}

.wrail-aside__k {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.wrail-aside__v {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    line-height: 1.55;
}

.wrail-aside__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.wrail-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.wrail-row__k {
    color: rgba(255, 255, 255, .65);
    font-weight: 850;
    font-size: 13px;
}

.wrail-row__v {
    color: rgba(255, 255, 255, .95);
    font-weight: 900;
    font-size: 13px;
    text-align: right;
    max-width: 70%;
}

.wrail-aside__cta {
    display: inline-flex;
}

.wrail-aside__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .70);
}

/* Desktop layout */
@media (min-width: 980px) {
    .front-whatwedo-rail__grid {
        grid-template-columns: 1.25fr .75fr;
        gap: 30px;
    }

    /* turn rail into horizontal timeline feel */
    .wrail {
        padding-left: 0;
        flex-direction: row;
        gap: 18px;
        align-items: start;
    }

    .wrail::before {
        left: 0;
        right: 0;
        top: 28px;
        bottom: auto;
        height: 2px;
        width: auto;
        background: linear-gradient(90deg,
                rgba(200, 255, 0, .60),
                rgba(56, 189, 248, .50),
                rgba(255, 255, 255, .12));
    }

    .wrail-step {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 6px;
        min-width: 0;
    }

    .wrail-step__pin {
        height: auto;
        padding-top: 0;
    }

    .wrail-step__pulse {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 14px;
        height: 14px;
        margin-left: 2px;
    }

    .wrail-step__num {
        width: 44px;
    }

    .wrail-aside {
        padding: 16px 18px;
    }
}

/* Consultation: hero-like dark, but form-friendly */
.front-consult{
  position: relative;
  color: #fff;
  padding: clamp(64px, 7.5vw, 110px) 0;
  background:
    radial-gradient(900px 420px at 75% 18%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(800px 420px at 12% 75%, rgba(200,255,0,.11), transparent 58%),
    linear-gradient(180deg, rgba(11,22,51,1) 0%, rgba(7,12,30,1) 100%);
  overflow:hidden;
}

/* calm grid sheen */
.front-consult::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 16px
    );
  opacity:.10;
  transform: translateX(-25%);
  animation: fcSheen 14s linear infinite;
  pointer-events:none;
}
@keyframes fcSheen{
  0% { transform: translateX(-35%); }
  100% { transform: translateX(35%); }
}

.front-consult__inner{ position:relative; z-index:1; }

.front-consult__head{
  max-width: 980px;
  margin-bottom: 18px;
}

.front-consult__eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  letter-spacing: .06em;
}
.fc-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #c8ff00;
  box-shadow: 0 0 0 6px rgba(200,255,0,.12);
}

.front-consult__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.front-consult__titleAccent{
  color: rgba(255,255,255,.90);
  display:inline-block;
  margin-left: 6px;
}

.front-consult__lead{
  margin: 0;
  max-width: 860px;
  color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
}

/* grid */
.front-consult__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}

/* left card */
.fc-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  padding: 16px;
  overflow:hidden;
}

.fc-card__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.fc-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  letter-spacing: .04em;
}
.fc-badge__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 6px rgba(56,189,248,.12);
}

.fc-time{
  width: 76px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  line-height: 1;
}
.fc-time__num{ font-weight: 950; font-size: 22px; }
.fc-time__unit{ margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.76); letter-spacing:.08em; text-transform:uppercase; }

.fc-card__title{
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.92);
  font-size: 16px;
}

.fc-list{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.fc-list li{
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,.80);
  font-size: 13.5px;
  line-height: 1.45;
}
.fc-check{
  position:absolute;
  left:0;
  top:.25em;
  width: 14px; height: 14px;
  border-radius: 5px;
  background: rgba(200,255,0,.90);
  box-shadow: 0 0 0 6px rgba(200,255,0,.10);
}
.fc-person{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  align-items:center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.fc-person__img{
  width: 72px;
  height: 72px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.fc-person__name{ display:block; font-weight: 950; color: rgba(255,255,255,.92); }
.fc-person__role{ display:block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,.72); }

.fc-person__tags{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.fc-tag{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.76);
  font-size: 12px;
}

.fc-note{
  margin: 12px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 12.5px;
}

/* form */
.fc-form{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  padding: 16px;
  overflow:hidden;
}

.fc-form__top{ margin-bottom: 12px; }
.fc-form__title{
  margin:0 0 4px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  letter-spacing:-0.01em;
  font-size: 16px;
}
.fc-form__sub{
  margin:0;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
}

.fc-fields{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.fc-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.fc-field label{
  font-size: 12px;
  color: rgba(255,255,255,.76);
}
.fc-field input,
.fc-field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline: none;
}
.fc-field textarea{ resize: vertical; min-height: 120px; }

.fc-field input:focus,
.fc-field textarea:focus{
  border-color: rgba(200,255,0,.35);
  box-shadow: 0 0 0 4px rgba(200,255,0,.10);
}

.fc-consent{
  margin-top: 2px;
}

.fc-consent__label{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.35;
}
.fc-consent__label input{
  margin-top: 3px;
}

/* Checkbox w stylu hero */
.fc-consent__label{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  cursor:pointer;
  color: rgba(255,255,255,.78);
}

.fc-consent__label input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.fc-consent__label input[type="checkbox"]::after{
  content:"";
  width: 10px;
  height: 6px;
  border-left: 2px solid rgba(6,16,39,.95);
  border-bottom: 2px solid rgba(6,16,39,.95);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .16s ease;
}

.fc-consent__label input[type="checkbox"]:checked{
  background: #c8ff00;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(200,255,0,.18);
}

.fc-consent__label input[type="checkbox"]:checked::after{
  transform: rotate(-45deg) scale(1);
}

.fc-consent__label input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(200,255,0,.14);
}


.fc-consent a{
  color: rgba(200,255,0,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,255,0,.35);
}
.fc-consent a:hover{
  border-bottom-color: rgba(200,255,0,.70);
}

.fc-submit{
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}

.fc-small{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  text-align:center;
}

/* responsive */
@media (min-width: 980px){
  .front-consult__grid{
    grid-template-columns: 0.95fr 1.05fr;
    gap: 14px;
    align-items: stretch;
  }

  .fc-fields{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 10px;
  }
  .fc-field{ grid-column: 1 / -1; }
  .fc-field--half{ grid-column: span 1; }

  /* fix: apply class by selector (optional) */
  .fc-fields .fc-field:nth-child(2){ grid-column: span 1; }
  .fc-fields .fc-field:nth-child(3){ grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce){
  .front-consult::before{ animation:none; }
}

.fc-hint{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}