:root {
    --navy: #0a1730;
    --blue: #1769e0;
    --cyan: #29b8ca;
    --ink: #162033;
    --muted: #607088;
    --soft: #f2f6fb;
    --white: #fff;
    --line: #dce5f0;
    --radius: 18px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: #fff
}

.container {
    width: min(1120px, calc(100% - 40px));
    margin: auto
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.nav-wrap {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 28px
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 800;
    color: var(--navy);
    text-decoration: none
}

.logo-brand {
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo-brand svg {
    display:block;
    width:280px;
    height:auto;
}
@media (max-width:850px) {

    .logo-brand svg {
        width:220px;
    }

}

@media (max-width:560px) {

    .logo-brand svg {
        width:180px;
    }

}
.main-nav {
    margin-left: auto;
    display: flex;
    gap: 24px
}

.main-nav a,
.languages a,
footer a {
    color: var(--ink);
    text-decoration: none
}

.main-nav a:hover,
.languages a:hover {
    color: var(--blue)
}

.languages {
    display: flex;
    gap: 8px;
    font-size: .78rem
}

.languages a {
    padding: 5px;
    border-radius: 6px
}

.menu-button {
    display: none;
    border: 0;
    background: none;
    font-size: 1.5rem
}

.hero {
    padding: 85px 0 28px;
    background: radial-gradient(circle at 85% 20%, #d8f4f8 0, transparent 28%), linear-gradient(180deg, #f8fbff, #fff)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 70px
}

h1,
h2,
h3 {
    color: var(--navy);
    line-height: 1.13;
    margin-top: 0
}

h1 {
    font-size: clamp(2.6rem, 5.5vw, 5rem);
    letter-spacing: -.055em;
    margin-bottom: 24px
}

h2 {
    font-size: clamp(2rem, 3.7vw, 3.25rem);
    letter-spacing: -.035em;
    margin-bottom: 18px
}

h3 {
    font-size: 1.2rem
}

.eyebrow {
    color: var(--blue);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .79rem
}

.lead {
    font-size: 1.23rem;
    color: var(--muted);
    max-width: 720px
}

.lead.small {
    font-size: 1.08rem
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 11px;
    text-decoration: none;
    font-weight: 760;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit
}

.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #1051b9);
    box-shadow: 0 12px 30px #1769e030
}

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

.light {
    background: #fff;
    color: var(--blue)
}

.whatsapp {
    background: #1fa855;
    color: #fff
}

.full {
    width: 100%
}

.hero-card {
    height: 390px;
    border-radius: 32px;
    position: relative;
    background: linear-gradient(145deg, #0a1730, #17345d);
    box-shadow: 0 30px 70px #0a173035;
    overflow: hidden
}

.hero-card:before,
.hero-card:after {
    content: "";
    position: absolute;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    inset: 18%;
}

.hero-card:after {
    inset: 34%
}

.center-node,
.node {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 30px #0004
}

.center-node {
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--blue), var(--cyan))
}

.node {
    width: 68px;
    height: 68px;
    background: #ffffff17;
    border: 1px solid #ffffff35
}

.n1 {
    left: 10%;
    top: 13%
}

.n2 {
    right: 10%;
    top: 16%
}

.n3 {
    left: 13%;
    bottom: 12%
}

.n4 {
    right: 12%;
    bottom: 11%
}

.benefits {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 42px 0 12px;
    color: var(--muted);
    font-weight: 650
}

.benefits span::first-letter {
    color: var(--cyan)
}

.section {
    padding: 100px 0
}

.section-intro {
    color: var(--muted);
    max-width: 680px;
    margin-bottom: 42px
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: .2s
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px #0a173012
}

.card p,
.steps p,
.cases p {
    color: var(--muted)
}

.icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eaf2ff;
    color: var(--blue);
    font-weight: 850;
    margin-bottom: 22px
}

.dark {
    background: var(--navy)
}

.dark h2,
.dark h3 {
    color: #fff
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 50px
}

.steps article {
    border-top: 1px solid #ffffff33;
    padding-top: 24px
}

.steps b {
    color: var(--cyan);
    font-size: 1.8rem
}

.steps p {
    color: #b8c5d8
}

.cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.cases article {
    padding: 30px;
    background: var(--soft);
    border-radius: var(--radius)
}

.cases span {
    color: var(--blue);
    font-weight: 900
}

.soft {
    background: var(--soft)
}

.about {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 70px;
    align-items: center
}
.about-text {
    line-height: 1.8;
    max-width: 800px;
}
.expertise-block {
    margin-bottom: 2rem;
}

.expertise-block h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.expertise-tags span {
    display: inline-flex;
    align-items: center;
}
.portrait {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 30% 70% 60% 40%;
    font-size: 5rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--blue))
}

.cta {
    text-align: center;
    padding: 80px 0;
    color: #fff;
    background: linear-gradient(120deg, var(--blue), #0a4aaa, var(--cyan))
}

.cta h2 {
    color: #fff
}

.cta p {
    max-width: 680px;
    margin: 0 auto 28px
}

.page-top {
    min-height: 70vh
}

.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px
}

.contact-note {
    margin-top: 40px;
    padding: 22px;
    border-left: 4px solid var(--cyan);
    background: var(--soft)
}

.form-card {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 22px 55px #0a173012
}

label {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 17px
}

input,
textarea {
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1px solid #cbd7e5;
    border-radius: 10px;
    font: inherit;
    background: #fff
}

input:focus,
textarea:focus {
    outline: 3px solid #1769e020;
    border-color: var(--blue)
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 500
}

.check input {
    width: auto;
    margin-top: 5px
}

.hp {
    position: absolute;
    left: -9999px
}

.notice {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 18px
}

.success {
    background: #e9f8ef;
    color: #15723b
}

.error {
    background: #fff0f0;
    color: #a92b2b
}

.success-mark {
    margin: 0 auto 25px;
    width: 85px;
    height: 85px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f8ee;
    color: #159147;
    font-size: 2.5rem
}

.narrow {
    max-width: 760px
}

.center {
    text-align: center
}

.text-link {
    display: block;
    margin-top: 24px;
    color: var(--blue)
}

footer {
    padding: 55px 0;
    background: #071225;
    color: #aebbd0
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 30px
}

.footer-grid strong {
    color: #fff
}

.footer-grid div:nth-child(2) {
    display: flex;
    flex-direction: column
}

.footer-grid a {
    color: #c4d0e0
}

.cookie {
    display: none;
    position: fixed;
    z-index: 50;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 720px;
    margin: auto;
    padding: 15px 18px;
    border-radius: 13px;
    background: #071225;
    color: #fff;
    box-shadow: 0 14px 44px #0005;
    align-items: center;
    gap: 20px
}

.cookie.show {
    display: flex
}

.cookie button {
    margin-left: auto;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--cyan);
    font-weight: 700;
    color: #06242a
}

@media(max-width:850px) {
    .menu-button {
        display: block;
        margin-left: auto
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        padding: 20px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        flex-direction: column
    }

    .main-nav.open {
        display: flex
    }

    .languages {
        margin-left: 0
    }

    .hero-grid,
    .contact-grid,
    .about {
        grid-template-columns: 1fr
    }

    .hero-card {
        height: 320px
    }

    .cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .steps {
        grid-template-columns: repeat(2, 1fr)
    }

    .benefits {
        gap: 20px;
        flex-wrap: wrap
    }

    .portrait {
        max-width: 280px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .container {
        width: min(100% - 28px, 1120px)
    }

    .languages {
        display: none
    }

    .hero {
        padding-top: 55px
    }

    .hero-card {
        height: 280px
    }

    .cards,
    .cases,
    .steps,
    .two,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .section {
        padding: 70px 0
    }

    h1 {
        font-size: 2.65rem
    }

    .cookie {
        align-items: flex-start;
        flex-direction: column
    }

    .cookie button {
        margin-left: 0
    }
    
}

/* Case study page styles (from case-studies.css). */
.cs-container{width:min(1120px,calc(100% - 2rem));margin-inline:auto}.cs-narrow{width:min(820px,calc(100% - 2rem))}.cs-hero{padding:clamp(4rem,8vw,7rem) 0;background:linear-gradient(135deg,#071f33,#0c4960);color:#fff}.cs-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#77d5d2}.cs-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;margin:.5rem 0 1rem}.cs-lead{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.7;max-width:760px}.cs-section,.cs-article{padding:clamp(3rem,7vw,6rem) 0}.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.cs-card{padding:2rem;border:1px solid #dce6eb;border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(5,31,50,.08)}.cs-card h3{font-size:1.5rem}.cs-card h3 a,.cs-link{color:#073e54}.cs-tags{display:flex;flex-wrap:wrap;gap:.5rem}.cs-tags span,.cs-facts span{padding:.4rem .7rem;border-radius:999px;background:#e7f5f4;color:#07504f;font-size:.85rem}.cs-link{font-weight:700}.cs-cta{padding:4rem 0;background:#edf6f7;text-align:center}.cs-button{display:inline-block;padding:.9rem 1.25rem;border-radius:8px;background:#087b78;color:#fff;text-decoration:none;font-weight:700}.cs-button:hover{background:#05625f}.cs-breadcrumb{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.9rem;margin-bottom:2rem}.cs-breadcrumb a{color:#b9e9e7}.cs-facts{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}.cs-facts span{background:rgba(255,255,255,.12);color:#fff}.cs-article{font-size:1.08rem;line-height:1.8}.cs-article h2{margin-top:3rem;font-size:2rem;color:#082f43}.cs-summary{padding:1.5rem 2rem;background:#edf6f7;border-left:5px solid #087b78;border-radius:10px}.cs-summary h2{margin-top:0}.cs-summary dl{margin:0}.cs-summary dl div{margin:1rem 0}.cs-summary dt{font-weight:800}.cs-summary dd{margin:0}.cs-article blockquote{margin:2rem 0;padding:1.5rem 2rem;border-left:5px solid #e4a836;background:#fff8e8;font-size:1.2rem}.cs-steps{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.cs-steps section{padding:1.25rem;border:1px solid #dce6eb;border-radius:12px}.cs-steps strong{color:#087b78}.cs-steps h3{margin:.25rem 0}.cs-checklist{padding:0;list-style:none}.cs-checklist li{padding:.55rem 0 .55rem 1.8rem;position:relative}.cs-checklist li:before{content:'✓';position:absolute;left:0;color:#087b78;font-weight:900}.cs-credit{margin-top:3rem;padding:2rem;background:#f6f8fa;border-radius:14px}.cs-contact-card{margin-top:3rem;padding:2rem;background:#082f43;color:#fff;border-radius:16px}.cs-contact-card h2{color:#fff;margin-top:0}@media(max-width:700px){.cs-steps{grid-template-columns:1fr}.cs-card,.cs-summary,.cs-credit,.cs-contact-card{padding:1.35rem}}

/* Additional case study layout styles (from mulesoft-api-led-connectivity.css). */
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.case-fact,.case-card,.case-highlight{padding:1.4rem;border-radius:1rem;background:var(--soft,#f4f7fa)}
.case-fact span,.case-fact strong{display:block}
.case-fact span{opacity:.68;font-size:.88rem;margin-bottom:.25rem}
.case-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:3rem;align-items:start}
.case-copy h2{margin-top:2.5rem}.case-copy h2:first-child{margin-top:0}.case-copy li{margin:.65rem 0}
.case-card{position:sticky;top:7rem}.related-card{position:static;margin-top:1rem}.related-card ul{padding-left:1.15rem;margin-bottom:0}.related-card li{margin:.45rem 0}
.case-highlight{padding:1.7rem;margin:2.5rem 0}.case-highlight h2{margin-top:0}
.case-quote{margin:2rem 0;padding:1.25rem 1.5rem;border-left:4px solid var(--accent,#087f8c);border-radius:0 .75rem .75rem 0;background:var(--soft,#f4f7fa);font-size:1.12rem;font-weight:700}
.architecture-flow{display:grid;justify-items:center;gap:.45rem;margin-top:1.5rem;padding:1.25rem;border-radius:.85rem;background:var(--surface,#fff);text-align:center}
.architecture-flow span{width:min(100%,24rem);padding:.65rem 1rem;border:1px solid rgba(0,0,0,.1);border-radius:.65rem;background:#fff;font-weight:700}
.architecture-flow b{color:var(--accent,#087f8c)}.architecture-flow em{width:100%;padding:.55rem;border-top:1px dashed rgba(0,0,0,.28);border-bottom:1px dashed rgba(0,0,0,.28);font-style:normal;opacity:.72}
.rule-highlight{border:1px solid rgba(8,127,140,.22)}
@media(max-width:850px){.case-grid{grid-template-columns:1fr}.case-card{position:static}.case-facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.case-facts{grid-template-columns:1fr}}

/* Case studies dropdown (from case-studies-dropdown.css). */
@media (min-width: 851px) {
    .main-nav {
        align-items: center;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .main-nav > a,
    .nav-dropdown-toggle {
        white-space: nowrap;
    }

    .nav-dropdown,
    .languages {
        flex-shrink: 0;
    }

    .languages {
        align-items: center;
        white-space: nowrap;
    }
}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:.35rem;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;padding:.55rem .15rem}
.nav-dropdown-caret{font-size:.72em;transition:transform .18s ease}
.nav-dropdown-menu{position:absolute;top:calc(100% + .5rem);left:50%;z-index:1000;display:none;min-width:21rem;padding:.55rem;border:1px solid rgba(15,23,42,.09);border-radius:1rem;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.14);transform:translateX(-50%)}
.nav-dropdown-menu::before{content:"";position:absolute;right:0;bottom:100%;left:0;height:.6rem}
.nav-dropdown-link{display:block;padding:.8rem .9rem;border-radius:.7rem;color:inherit;text-decoration:none;line-height:1.35;white-space:normal}
.nav-dropdown-link:hover,.nav-dropdown-link:focus-visible,.nav-dropdown-link.active{background:var(--soft,#f4f7fa);color:var(--accent,#087f8c)}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown:hover .nav-dropdown-caret,.nav-dropdown:focus-within .nav-dropdown-caret,.nav-dropdown.open .nav-dropdown-caret{transform:rotate(180deg)}
.nav-dropdown.is-current>.nav-dropdown-toggle{color:var(--accent,#087f8c)}
@media(max-width:850px){.nav-dropdown{display:block;width:100%}.nav-dropdown-toggle{justify-content:space-between;width:100%;padding:.75rem 0}.nav-dropdown-menu{position:static;min-width:0;width:100%;margin:.15rem 0 .5rem;padding:.35rem;border:0;border-left:2px solid var(--soft,#e5e7eb);border-radius:0;background:transparent;box-shadow:none;transform:none}.nav-dropdown:not(.open) .nav-dropdown-menu{display:none}.nav-dropdown.open .nav-dropdown-menu{display:block}.nav-dropdown-link{padding:.65rem .85rem}}
@media(prefers-reduced-motion:reduce){.nav-dropdown-caret{transition:none}}