/* Atumix homepage refresh: modern, conversion-focused presentation */
:root {
    --atumix-ink: #19032C;
    --atumix-deep: #260844;
    --atumix-panel: rgba(59, 19, 89, 0.78);
    --atumix-purple: #9b6cff;
    --atumix-pink: #fc50c7;
    --atumix-cyan: #4fddff;
    --atumix-text-soft: #d8cbeb;
    --atumix-border: rgba(255, 255, 255, 0.18);
}

body {
    background: var(--atumix-ink);
    color: #fff;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.site {
    overflow: clip;
}

.site-header {
    position: absolute;
    top: 24px;
}

.site-header .row-header {
    align-items: center;
}

.site-header .custom-logo {
    width: 172px;
    height: auto;
}

.site-header .main-navigation li a {
    min-width: auto;
    padding: 0 16px;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.86);
}

.site-header .main-navigation li a:hover,
.site-header .main-navigation li a:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.home-claim-wrapper {
    min-height: 780px;
    isolation: isolate;
    background:
        radial-gradient(circle at 73% 38%, rgba(79, 221, 255, 0.19), transparent 24%),
        radial-gradient(circle at 35% 72%, rgba(252, 80, 199, 0.18), transparent 31%),
        linear-gradient(135deg, #120221 0%, #21083c 48%, #110322 100%);
}

.home-claim-wrapper::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    opacity: 0.32;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.home-claim-wrapper::before {
    height: 430px;
    background: linear-gradient(180deg, transparent 0%, var(--atumix-ink) 94%);
}

.row-claim {
    min-height: 630px;
    align-items: center;
}

.hero-copy {
    z-index: 2;
    width: min(610px, 56%);
    padding: 160px 0 96px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--atumix-cyan);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 28px;
    height: 1px;
    content: '';
    background: currentColor;
}

.claim-txt {
    position: static;
    margin: 0;
    font-size: clamp(45px, 5.3vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.claim-txt em {
    color: #d7b6ff;
    font-style: normal;
}

.hero-summary {
    max-width: 520px;
    margin: 28px 0 34px;
    color: var(--atumix-text-soft);
    font-size: 19px;
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.primary-btn,
.secondary-btn {
    display: inline-flex;
    min-height: 52px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.primary-btn {
    border-color: var(--atumix-pink);
    background: linear-gradient(105deg, #b743ff, #f344c0);
    box-shadow: 0 12px 35px rgba(207, 53, 216, 0.28);
}

.primary-btn:hover,
.primary-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 42px rgba(207, 53, 216, 0.45);
}

.secondary-btn {
    border-color: var(--atumix-border);
    background: rgba(255, 255, 255, 0.05);
}

.secondary-btn:hover,
.secondary-btn:focus-visible {
    border-color: var(--atumix-cyan);
    background: rgba(79, 221, 255, 0.12);
}

.claim-head {
    position: absolute;
    z-index: 1;
    right: -8%;
    bottom: 1%;
    max-width: min(58%, 690px);
    margin: 0;
    opacity: 0.72;
    filter: drop-shadow(0 20px 55px rgba(78, 26, 129, 0.55));
}

.aboutus-home-wrapper {
    padding: 155px 0 120px;
}

.aboutus-home-wrapper::before {
    opacity: 0.14;
}

.aboutus-header {
    max-width: 780px;
    margin-bottom: 30px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.aboutus-home-wrapper article {
    max-width: 650px;
    margin-left: auto;
}

.aboutus-home-wrapper article h3 {
    margin: 0;
    color: var(--atumix-text-soft);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.65;
}

.services-section,
.process-section,
.faq-section {
    position: relative;
    padding: 76px 0;
}

.services-section {
    background: transparent;
}

.section-heading {
    max-width: 690px;
    margin-bottom: 50px;
}

.section-heading h2 {
    margin: 0 0 15px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.section-heading p {
    max-width: 590px;
    margin: 0;
    color: var(--atumix-text-soft);
    font-size: 18px;
    line-height: 1.55;
}

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

.service-card {
    min-height: 315px;
    padding: 32px;
    border: 1px solid var(--atumix-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.service-card:hover {
    border-color: rgba(79, 221, 255, 0.68);
    background: linear-gradient(145deg, rgba(79, 221, 255, 0.13), rgba(185, 67, 255, 0.09));
    transform: translateY(-7px);
}

.service-number {
    display: flex;
    width: 42px;
    height: 42px;
    margin-bottom: 55px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(79, 221, 255, 0.5);
    border-radius: 50%;
    color: var(--atumix-cyan);
    font-size: 13px;
    font-weight: 700;
}

.service-card h3 {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.1;
}

.service-card p {
    margin: 0;
    color: var(--atumix-text-soft);
    line-height: 1.55;
}

.home-specs-excerpt {
    padding: 76px 0;
    background: transparent;
}

.home-specs-excerpt::before {
    display: none;
}

.home-specs-excerpt::after,
.home-specs-excerpt .container::before,
.specs-head-ornament {
    display: none;
}

.home-specs-excerpt .section-heading {
    position: relative;
    z-index: 2;
}

.home-specs-excerpt .section-title {
    margin: 0 0 14px;
    font-size: clamp(36px, 4.3vw, 56px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.pricing-lead {
    max-width: 630px;
    margin: 0;
    color: var(--atumix-text-soft);
    font-size: 18px;
    line-height: 1.55;
}

.specs-default-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 16px;
}

.default-spec-block.pricing-card {
    display: flex;
    min-height: 520px;
    padding: 29px 24px 24px;
    flex-direction: column;
    border: 1px solid var(--atumix-border) !important;
    border-radius: 22px;
    background: rgba(56, 18, 84, 0.8) !important;
    box-shadow: none;
}

.default-spec-block.pricing-card:hover {
    border-color: rgba(79, 221, 255, 0.65) !important;
    transform: translateY(-5px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.default-spec-block.pricing-card.is-featured {
    position: relative;
    border-color: rgba(252, 80, 199, 0.85) !important;
    background: linear-gradient(165deg, rgba(142, 56, 171, 0.82), rgba(59, 19, 89, 0.92)) !important;
    box-shadow: 0 16px 45px rgba(25, 3, 44, 0.28);
}

.package-badge {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 15px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(252, 80, 199, 0.18);
    color: #ffd1f3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.default-spec-block .spec-title::before {
    display: none;
}

.default-spec-block .spec-title {
    margin: 0 0 12px;
    font-size: 25px;
    line-height: 1.12;
}

.package-price {
    display: block;
    margin-top: 10px;
    color: var(--atumix-cyan);
    font-size: 35px;
    letter-spacing: -0.05em;
}

.package-for {
    min-height: 42px;
    margin: 0 0 20px;
    color: #e5d8f4;
    font-size: 14px;
    line-height: 1.45;
}

.default-spec-block.pricing-card :is(aside, .package-details) {
    min-height: 0;
    margin: 0 0 25px;
}

.default-spec-block.pricing-card :is(aside, .package-details) p {
    color: var(--atumix-text-soft) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.default-spec-block.pricing-card ul {
    margin: 0;
}

.default-spec-block.pricing-card li {
    margin-bottom: 8px !important;
    color: #fff;
    font-size: 14px !important;
    line-height: 1.4;
}

.default-spec-block.pricing-card li span {
    color: var(--atumix-cyan) !important;
    font-size: 14px !important;
}

.default-spec-block.pricing-card .order-now-btn {
    width: 100%;
    min-width: 0;
    margin: auto 0 0;
}

.default-spec-block.pricing-card.is-featured .order-now-btn {
    border-color: transparent;
}

.process-section {
    border-bottom: 0;
}

.portfolio-section {
    padding: 76px 0;
    background: transparent;
}

.portfolio-section::before {
    opacity: 0.11;
}

.portfolio-section .infoblock {
    max-width: 44.17%;
}

.portfolio-section .infoblock h2 {
    margin: 0 0 20px;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.portfolio-section .infoblock p {
    color: var(--atumix-text-soft);
    font-size: 17px;
    line-height: 1.55;
}

.responsive-showcase {
    position: relative;
    width: 52.44%;
    flex: 0 0 52.44%;
    left: -50px;
    isolation: isolate;
}

.responsive-showcase .linkedin-profile-img {
    position: relative;
    z-index: 1;
    left: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    opacity: 0.72;
    filter: saturate(0.9) brightness(0.94) contrast(0.98);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 53%, rgba(0, 0, 0, 0.72) 73%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 53%, rgba(0, 0, 0, 0.72) 73%, transparent 100%);
}

#showcase-particles {
    position: absolute;
    z-index: 2;
    inset: 7% 4% 13%;
    overflow: hidden;
    opacity: 0.7;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 78%, transparent);
    mask-composite: intersect;
    pointer-events: none;
}

#showcase-particles canvas {
    opacity: 0.18;
    position: relative !important;
}

.faq-section {
    padding-bottom: 76px;
}
@media (max-width: 767px) {
    .responsive-showcase {
        width: 100%;
        flex-basis: 100%;
        left: 0;
    }
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 22px;
}

.faq-grid details {
    border-bottom: 1px solid var(--atumix-border);
}

.faq-grid summary {
    display: flex;
    padding: 21px 30px 21px 0;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    list-style: none;
}

.faq-grid summary::-webkit-details-marker {
    display: none;
}

.faq-grid summary::after {
    margin-left: auto;
    color: var(--atumix-cyan);
    content: '+';
    font-size: 25px;
    font-weight: 300;
}

.faq-grid details[open] summary::after {
    content: '−';
}

.faq-grid p {
    max-width: 480px;
    margin: -2px 0 20px;
    color: var(--atumix-text-soft);
    line-height: 1.55;
}

.contact-cta-wrapper {
    padding: 80px 0;
    border-top: 0;
    background: transparent;
}

.cta-content {
    max-width: 760px;
    font-size: clamp(32px, 4vw, 51px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.cta-content p {
    margin: 0;
}

.contact-note {
    margin: 20px 0 0;
    color: var(--atumix-text-soft);
    font-size: 17px;
}

.contact-cta-wrapper .buttons-grid {
    gap: 14px;
}

.contact-cta-wrapper .buttons-grid a:first-of-type {
    margin-right: 0;
}

.contact-cta-wrapper .bordered-btn {
    min-width: 245px;
}

@media (max-width: 1024px) {
    .site-header .main-navigation li a {
        min-width: 0;
    }

    .hero-copy {
        width: 65%;
    }

    .claim-head {
        right: -20%;
        max-width: 68%;
    }

    .service-grid,
    .specs-default-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767px) {
    .site-header {
        top: 20px;
    }

    .site-header .custom-logo {
        width: 128px;
    }

    .site-header .main-navigation li a {
        padding: 0;
    }

    .home-claim-wrapper {
        min-height: 760px;
    }

    .row-claim {
        min-height: 760px;
    }

    .hero-copy {
        width: 100%;
        padding: 130px 0 320px;
    }

    .claim-txt {
        font-size: clamp(43px, 13vw, 61px);
    }

    .hero-summary {
        max-width: 450px;
        margin: 21px 0 28px;
        font-size: 17px;
    }

    .hero-actions {
        gap: 10px;
    }

    .primary-btn,
    .secondary-btn {
        min-height: 48px;
        padding: 0 18px;
        font-size: 13px;
    }

    .claim-head {
        right: -31%;
        bottom: -1%;
        max-width: 116%;
        margin: 0;
        transform: none;
    }

    .aboutus-home-wrapper,
    .services-section,
    .process-section,
    .portfolio-section,
    .faq-section {
        padding: 78px 0;
    }

    .aboutus-header,
    .section-heading h2 {
        font-size: 36px;
    }

    .aboutus-home-wrapper article h3 {
        font-size: 17px;
    }

    .section-heading {
        margin-bottom: 32px;
    }

    .section-heading p {
        font-size: 16px;
    }

    .service-grid,
    .specs-default-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 0;
        padding: 26px;
    }

    .service-number {
        margin-bottom: 35px;
    }

    .home-specs-excerpt {
        padding: 82px 0;
    }

    .default-spec-block.pricing-card {
        min-height: 0;
        padding: 26px;
    }

    .package-for {
        min-height: 0;
    }

    .portfolio-section .row-linkedin-img-left {
        gap: 35px;
    }

    .portfolio-section .infoblock {
        max-width: 100%;
    }

    .portfolio-section .infoblock h2 {
        font-size: 35px;
    }

    .faq-grid summary {
        padding: 17px 24px 17px 0;
        font-size: 16px;
    }

    .contact-cta-wrapper {
        padding: 76px 0;
    }

    .contact-note {
        font-size: 16px;
    }
}

/* Keep the original, established Atumix header and hero treatment. */
.site {
    max-height: 100%;
    overflow: hidden;
}

.site-header {
    top: 44px;
}

.site-header .row-header {
    align-items: center;
}

.site-header .custom-logo {
    width: 210px;
}

html[lang="en-US"] .site-header .main-navigation li a {
    min-width: 150px;
    padding: 0;
    border-color: #fff;
    color: #fff;
}

.home-claim-wrapper {
    min-height: 92vh;
    background: url(wp-content/themes/ts/assets/svg/claim-bg.svg) no-repeat center;
    background-size: cover;
}

.home-claim-wrapper::after {
    display: none;
}

.home-claim-wrapper::before {
    height: 350px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--atumix-ink) 85%);
}

.row-claim {
    min-height: initial;
    align-items: center;
    margin-top: auto;
}

.claim-txt {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
    color: #fff;
    font-size: 61px;
    font-weight: 400;
    line-height: 68px;
    letter-spacing: normal;
}

.claim-txt span {
    color: #987ED4;
}

.claim-head {
    position: static;
    right: auto;
    bottom: auto;
    max-width: 51.2%;
    margin-top: 40px;
    margin-left: auto;
    opacity: 0.69;
    filter: none;
}

.home-claim-wrapper .more-btn {
    position: absolute;
    left: 0;
    bottom: 0;
}

@media (max-width: 767px) {
    .site-header {
        top: 44px;
    }

    .site-header .custom-logo-link {
        max-width: 145px;
    }

    .site-header .custom-logo {
        width: 210px;
    }

    .home-claim-wrapper,
    .row-claim {
        min-height: 92vh;
    }

    .claim-head {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        max-width: 200%;
        margin-bottom: 180px;
        margin-left: auto;
        transform: translate(-34px, 40px) scale(0.98);
        transform-origin: center;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.55) 88%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.55) 88%, transparent 100%);
    }

    .claim-txt {
        z-index: 2;
        margin-bottom: 75px;
        font-size: 30px;
        line-height: 42px;
    }

    .claim-txt br {
        display: none;
    }

    .home-claim-wrapper .more-btn {
        bottom: 10px;
        min-width: 220px;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* A concise, stacked About section replaces the disconnected two-column layout. */
.aboutus-home-wrapper {
    padding: 100px 0 76px;
    background: transparent;
}

.aboutus-header {
    max-width: 820px;
    margin: 0 0 32px;
}

.aboutus-home-wrapper article {
    max-width: 760px;
    margin: 0;
}

.aboutus-home-wrapper article h3 {
    padding-left: 23px;
    border-left: 2px solid var(--atumix-pink);
    color: #e3d8f0;
    font-size: 19px;
    line-height: 1.65;
}

/* The original footer ornament is a large lavender shape that reads as a hard color block after the new sections. */
.home .site-footer::before {
    display: none;
}

/* Animated border and lift use Atumix colors and remain motion-safe. */
@property --service-card-angle {
    syntax: "<angle>";
    initial-value: 0turn;
    inherits: false;
}

.service-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(145deg, rgba(69, 27, 102, 0.96), rgba(42, 12, 68, 0.96)) padding-box,
        conic-gradient(from var(--service-card-angle), rgba(79, 221, 255, 0.12), rgba(252, 80, 199, 0.1), rgba(155, 108, 255, 0.12), rgba(79, 221, 255, 0.12)) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.service-card::before {
    position: absolute;
    width: 230px;
    height: 230px;
    top: -120px;
    right: -80px;
    content: '';
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgba(79, 221, 255, 0.25), transparent 68%);
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.service-card h3,
.service-card p,
.service-number {
    position: relative;
    z-index: 1;
}

.service-card h3::after {
    display: inline-block;
    margin-left: 10px;
    color: var(--atumix-cyan);
    content: '↗';
    font-size: 0.8em;
    opacity: 0;
    transform: translate(-6px, 4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
    .service-card:hover {
        border-color: transparent;
        background:
            linear-gradient(145deg, rgba(82, 33, 119, 0.98), rgba(48, 15, 77, 0.98)) padding-box,
            conic-gradient(from var(--service-card-angle), var(--atumix-cyan), var(--atumix-pink), var(--atumix-purple), var(--atumix-cyan)) border-box;
        box-shadow: 0 20px 45px rgba(1, 0, 16, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        animation: service-card-border 2.5s linear infinite;
        transform: translateY(-8px);
    }

    .service-card:hover::before,
    .service-card:focus-within::before {
        opacity: 1;
    }

    .service-card:hover h3::after,
    .service-card:focus-within h3::after {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes service-card-border {
    to {
        --service-card-angle: 1turn;
    }
}

@media (max-width: 767px) {
    .aboutus-home-wrapper {
        padding: 78px 0;
    }

    .aboutus-header {
        margin-bottom: 24px;
    }

    .aboutus-home-wrapper article h3 {
        padding-left: 17px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card h3::after {
        transition: none;
    }

    .service-card:hover {
        animation: none;
        transform: none;
    }
}

/* Restore the original package-section curve without restoring the removed full-width color overlays. */
.home-specs-excerpt::after {
    display: block;
}

/* Interactive project-flow orbit. */
.process-section {
    overflow: hidden;
}

.process-experience {
    position: relative;
}

.process-instruction {
    margin: -20px 0 32px;
    color: var(--atumix-text-soft);
    font-size: 15px;
}

.process-orbit {
    position: relative;
    isolation: isolate;
    width: min(100%, 920px);
    min-height: 530px;
    margin: 0 auto;
}

.process-orbit::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    content: '';
    opacity: 0.7;
    background: radial-gradient(circle, rgba(101, 53, 150, 0.28), rgba(25, 3, 44, 0) 68%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.process-orbit-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.process-orbit-ring {
    fill: none;
    stroke: rgba(79, 221, 255, 0.13);
}

.process-orbit-ring--outer {
    stroke-width: 1;
}

.process-orbit-ring--inner {
    stroke-width: 1.5;
}

.process-orbit-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.17);
    stroke-dasharray: 2 12;
    stroke-linecap: round;
    stroke-width: 3;
}

.process-traveller {
    transform-box: fill-box;
    transform-origin: center;
}

.process-packet-tail--one {
    fill: var(--atumix-cyan);
    opacity: 0.55;
}

.process-packet-tail--two {
    fill: #a987ff;
    opacity: 0.72;
}

.process-packet-tail--three {
    fill: var(--atumix-pink);
    opacity: 0.9;
}

.process-core {
    position: absolute;
    top: 51%;
    left: 50%;
    display: grid;
    width: min(38vw, 270px);
    min-height: 170px;
    place-content: center;
    padding: 25px;
    border: 1px solid rgba(155, 108, 255, 0.36);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 25%, rgba(94, 42, 134, 0.76), rgba(31, 6, 56, 0.9) 72%);
    box-shadow: 0 0 0 10px rgba(79, 221, 255, 0.035), 0 18px 55px rgba(0, 0, 0, 0.26);
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
}

.process-core-kicker {
    color: var(--atumix-cyan);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.process-core strong {
    margin: 5px 0 8px;
    color: #fff;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1;
}

.process-core p {
    margin: 0;
    color: #e7dff1;
    font-size: 12px;
    line-height: 1.4;
}

.process-node {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(41, 10, 70, 0.76);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.process-node span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(79, 221, 255, 0.8);
    border-radius: 50%;
    background: var(--atumix-ink);
    color: var(--atumix-cyan);
    font-size: 10px;
}

.process-node::after {
    position: absolute;
    top: 50%;
    left: -8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    content: '';
    background: var(--atumix-cyan);
    box-shadow: 0 0 0 5px rgba(79, 221, 255, 0.13), 0 0 22px var(--atumix-cyan);
    transform: translateY(-50%);
}

.process-node--discover {
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
}

.process-node--design {
    top: 47%;
    right: 3%;
}

.process-node--build {
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
}

.process-node--launch {
    top: 47%;
    left: 3%;
}

/* Keep the four status dots directional while tightening the desktop left/right waypoints around the core. */
@media (min-width: 768px) {
    .process-node--design {
        right: 12%;
    }

    .process-node--launch {
        left: 12%;
    }
}

.process-node--design::after {
    right: auto;
    left: -8px;
}

.process-node--discover::after {
    top: auto;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.process-node--build::after {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.process-node--launch::after {
    right: -8px;
    left: auto;
}

.process-node.is-active,
.process-node:hover,
.process-node:focus-visible {
    border-color: rgba(252, 80, 199, 0.8);
    background: rgba(81, 23, 113, 0.95);
    box-shadow: 0 10px 30px rgba(252, 80, 199, 0.2), 0 0 0 4px rgba(252, 80, 199, 0.08);
    outline: 0;
    transform: translateY(-4px);
}

.process-node--discover.is-active,
.process-node--discover:hover,
.process-node--discover:focus-visible,
.process-node--build.is-active,
.process-node--build:hover,
.process-node--build:focus-visible {
    transform: translate(-50%, -4px);
}

.process-node.is-active span,
.process-node:hover span,
.process-node:focus-visible span {
    border-color: var(--atumix-pink);
    color: var(--atumix-pink);
}

.process-node.is-active::after,
.process-node:hover::after,
.process-node:focus-visible::after {
    background: var(--atumix-pink);
    box-shadow: 0 0 0 5px rgba(252, 80, 199, 0.13), 0 0 22px var(--atumix-pink);
}

@media (max-width: 767px) {
    .process-instruction {
        margin: -10px 0 22px;
    }

    .process-orbit {
        min-height: 380px;
    }

    .process-core {
        width: 180px;
        min-height: 145px;
        padding: 20px;
    }

    .process-core p {
        font-size: 11px;
    }

    .process-node {
        gap: 6px;
        padding: 7px 10px 7px 7px;
        font-size: 11px;
    }

    .process-node span {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }

    .process-node::after {
        width: 10px;
        height: 10px;
    }

    .process-node--discover {
        top: 14%;
        left: 50%;
    }

    .process-node--design {
        top: 46%;
        right: 0;
        left: auto;
    }

    .process-node--build {
        bottom: 12%;
        left: 50%;
    }

    .process-node--launch {
        top: 46%;
        right: auto;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-packet-tail,
    .process-traveller {
        display: none;
    }

    .process-node {
        transition: none;
    }
}

/* The original tablet rule wraps the header menu into two rows at 768px. */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-header .row-header {
        align-items: center;
    }

    .site-header .main-navigation {
        margin-top: 0;
        transform: translateY(-4px);
    }

    .site-header .main-navigation ul {
        display: flex;
        width: auto;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .site-header .main-navigation ul li,
    .site-header .main-navigation ul li:first-of-type,
    .site-header .main-navigation ul li:nth-of-type(2) {
        flex-basis: auto;
        margin: 0;
    }

    html[lang="en-US"] .site-header .main-navigation li a {
        width: auto;
        min-width: 0;
        padding: 0 13px;
    }
}

@media (min-width: 1025px) {
    .site-header .main-navigation {
        transform: translateY(-8px);
    }
}

@media (max-width: 767px) {
    footer .leftcol-logo-linkedin {
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: center;
    }

    footer .custom-logo-link {
        display: block;
        max-width: 210px;
        margin: 0 6px 0 0;
        flex: 0 1 210px;
    }

    footer .sm-footer-linkedin {
        margin-top: 0;
        flex: 0 0 36px;
    }

    #chatbot-trigger {
        right: 14px;
        bottom: 14px;
        width: 56px;
        height: 56px;
    }

    #chatbot-trigger img {
        width: 48px;
        height: auto;
    }
}