/* SWI orbital studio: code-native artwork, local preview 23 September 2026. */
.hero__grid.hero__grid--orbit {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 3.8vw, 68px);
}

.hero__grid--orbit .hero__content { max-width: 760px; }
.hero__grid--orbit h1 { font-size: clamp(3rem, 4.65vw, 5.3rem); }

.swi-orbit {
    --orbit-accent: #70c9ff;
    --orbit-intro-duration: 4.4s;
    position: relative;
    width: 100%;
    max-width: 650px;
    aspect-ratio: 1;
    margin: 44px auto 0;
    isolation: isolate;
    container-type: inline-size;
}
.swi-orbit[data-mode="app"] { --orbit-accent: #c4a4ff; }
.swi-orbit[data-mode="data"] { --orbit-accent: #b2b8ff; }
.swi-orbit__ambient {
    position: absolute;
    inset: 7%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, #623db515, #229fee08 40%, transparent 70%);
}
.swi-orbit__eyebrow {
    position: absolute;
    top: -1%;
    right: 4%;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #9e98b4;
    font-size: clamp(8px, 1.6cqi, 10px);
    font-weight: 600;
    letter-spacing: .18em;
}
.swi-orbit__eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #cfa9fc; box-shadow: 0 0 10px #ae75e8; }
.swi-orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.swi-orbit__rings circle { fill: none; }
.swi-orbit__rings > circle:first-of-type { fill: url(#orbit-center); }
.swi-orbit__ticks { stroke: #8f79c8; stroke-opacity: .3; stroke-width: 9; stroke-dasharray: .13 .87; }
.swi-orbit__tick-reveal { stroke: #fff; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 0; }
.swi-orbit__track { stroke: #7187a6; stroke-opacity: .18; stroke-width: 1; }
.swi-orbit__track--outer { stroke-dasharray: 1; stroke-dashoffset: 0; }
.swi-orbit__track--inner { stroke: #72c4f6; stroke-opacity: .24; stroke-dasharray: 2 9; }
.swi-orbit__ring-layer { transform-origin: 300px 300px; }
.swi-orbit__arc { stroke: url(#orbit-spectrum); stroke-linecap: round; fill: none; transform-origin: 300px 300px; }
.swi-orbit__arc--outer { stroke-width: 2.5; stroke-dasharray: 30 20 12 38; animation: orbit-turn 55s linear infinite; }
.swi-orbit__arc--inner { stroke: #e1d9fb; stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 23 48 13 16; animation: orbit-turn 70s linear infinite reverse; }
.swi-orbit__satellite { transform-origin: 300px 300px; animation: orbit-turn 30s linear infinite; }
.swi-orbit__satellite--two { animation-duration: 43s; animation-direction: reverse; }
.swi-orbit__rings .swi-orbit__satellite-halo { fill: #9f8ee817; }
.swi-orbit__satellite circle:last-child { fill: var(--orbit-accent); }
.swi-orbit__crosshair { fill: none; stroke: #c5c0dd; stroke-width: 1; opacity: .35; }
.swi-orbit__core {
    position: absolute;
    inset: 24% 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.swi-orbit__logo { display: block; width: 8cqi; height: 10.53cqi; max-width: 54px; max-height: 71px; object-fit: contain; filter: drop-shadow(0 0 20px #8570eb38); margin-bottom: 1.5cqi; }
.swi-orbit__brand { color: #b4aec6; font-size: clamp(7px, 1.5cqi, 9px); letter-spacing: .2em; margin: 0 0 1.5cqi; }
.swi-orbit__copy { width: 100%; min-height: 12cqi; }
.swi-orbit__copy h2 { color: #f5f3ff; font-size: clamp(17px, 4.4cqi, 27px); line-height: 1.12; letter-spacing: -.04em; margin: 0 0 1.2cqi; }
.swi-orbit__copy p { color: #b2abc6; max-width: 25ch; margin: 0 auto; font-size: clamp(10px, 2.3cqi, 14px); line-height: 1.5; }
.swi-orbit__graph { width: 70%; height: auto; overflow: visible; margin: 1cqi 0; }
.swi-orbit__graph-grid { fill: none; stroke: #8a80b4; stroke-opacity: .1; stroke-width: 1; }
.swi-orbit__graph-area { fill: var(--orbit-accent); opacity: .045; transition: fill .7s; }
.swi-orbit__graph-line { fill: none; stroke: var(--orbit-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px #8caff550); animation: orbit-graph 12s ease-in-out infinite; transition: stroke .7s; }
.swi-orbit__detail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; color: #f0c863; font-size: clamp(10px, 2cqi, 12px); font-weight: 600; text-decoration: none; }
.swi-orbit__detail:hover { color: #fff3bf; }
.swi-orbit__services {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: orbit-turn 120s linear infinite;
}
.swi-orbit__node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5cqi;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: #cfc9e4;
    background: radial-gradient(circle at 33% 23%, #282844, #111222 78%);
    box-shadow: 0 12px 32px #0004;
    cursor: pointer;
    pointer-events: auto;
    animation: orbit-turn 120s linear infinite reverse;
    transition: background .5s, box-shadow .5s, color .5s;
    -webkit-tap-highlight-color: transparent;
}
.swi-orbit__node--web { left: 12.19%; top: 12.19%; width: 24%; }
.swi-orbit__node--app { left: 74.26%; top: 29.55%; width: 22%; }
.swi-orbit__node--data { left: 29.05%; top: 73.76%; width: 23%; }
.swi-orbit[data-interacting="true"] .swi-orbit__services { animation-play-state: paused; }
.swi-orbit[data-interacting="true"] .swi-orbit__node { animation-play-state: paused, running; }
.swi-orbit__node svg { width: 6cqi; height: 6cqi; max-width: 32px; max-height: 32px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.swi-orbit__node > span:not(.swi-orbit__node-dot) { font-size: clamp(10px, 2.15cqi, 13px); font-weight: 600; letter-spacing: -.01em; }
.swi-orbit__node-dot { width: 4px; height: 4px; background: currentColor; opacity: .45; border-radius: 50%; }
.swi-orbit__node[aria-pressed="true"] { color: #bfe8ff; background: radial-gradient(circle at 33% 23%, #284862, #142c45 78%); box-shadow: 0 0 40px #4ea7ed13, 0 12px 32px #0003; }
.swi-orbit__node--app[aria-pressed="true"] { color: #e0cdff; background: radial-gradient(circle at 33% 23%, #4a3867, #211934 78%); }
.swi-orbit__node--data[aria-pressed="true"] { color: #d4d8ff; background: radial-gradient(circle at 33% 23%, #373f6d, #1b203b 78%); }
.swi-orbit__node:hover { color: #fff; box-shadow: 0 0 32px #9287e51c, 0 12px 32px #0003; }
.swi-orbit button:focus-visible, .swi-orbit a:focus-visible { outline: 2px solid #ffcf53; outline-offset: 5px; }
.swi-orbit__signature { position: absolute; bottom: -6%; left: 25%; width: 50%; text-align: center; color: #928aa9; font-size: clamp(8px, 1.5cqi, 10px); font-weight: 600; letter-spacing: .18em; margin: 0; }
.swi-orbit__signature span { color: #e9c369; padding: 0 7px; }
.swi-orbit__motion { position: absolute; left: 4%; bottom: 7%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #8275ac45; border-radius: 50%; background: #15132299; color: #b9afcf; cursor: pointer; }
.swi-orbit__motion[hidden] { display: none; }
.swi-orbit__motion svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.swi-orbit__play-icon { display: none; }
.swi-orbit[data-paused="true"] .swi-orbit__pause-icon { display: none; }
.swi-orbit[data-paused="true"] .swi-orbit__play-icon { display: block; }
.swi-orbit[data-running="false"] * { animation-play-state: paused !important; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes orbit-graph {
    0%, 35%, 80%, 100% { stroke-dashoffset: 0; opacity: 1; }
    45% { stroke-dashoffset: 0; opacity: 0; }
    46% { stroke-dashoffset: 1; opacity: 0; }
    55% { stroke-dashoffset: 1; opacity: .3; }
}
/* A single, non-blocking introduction. Rotation and counter-rotation share
   the same delay so the labels remain upright throughout the hand-off. */
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
    .swi-orbit[data-enhanced="true"] .swi-orbit__logo {
        animation: orbit-logo-enter .45s ease-out both;
    }
    .swi-orbit[data-enhanced="true"] [data-orbit-reveal] {
        animation: orbit-soft-enter var(--reveal-duration, .3s) ease-out var(--reveal-delay) both;
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__ring-layer {
        animation-name: orbit-rings-enter;
        animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__track--outer {
        animation: orbit-stroke-enter .5s ease-out .6s both;
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__tick-reveal {
        animation: orbit-stroke-enter .6s ease-out 1.35s both;
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__arc,
    .swi-orbit[data-enhanced="true"] .swi-orbit__satellite,
    .swi-orbit[data-enhanced="true"] .swi-orbit__services { animation-delay: var(--orbit-intro-duration); }
    .swi-orbit[data-enhanced="true"] .swi-orbit__graph-line {
        animation: orbit-graph 12s ease-in-out var(--orbit-intro-duration) infinite,
            orbit-stroke-enter .6s ease-out 2.5s backwards;
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__node {
        animation: orbit-turn 120s linear var(--orbit-intro-duration) infinite reverse,
            orbit-node-enter .42s cubic-bezier(.22, 1, .36, 1) var(--enter-delay) both;
    }
    .swi-orbit__node--web { --enter-delay: 3s; --enter-x: 8cqi; --enter-y: 8cqi; }
    .swi-orbit__node--app { --enter-delay: 3.34s; --enter-x: -10cqi; --enter-y: 3cqi; }
    .swi-orbit__node--data { --enter-delay: 3.68s; --enter-x: 3cqi; --enter-y: -10cqi; }
    .swi-orbit[data-enhanced="true"] .swi-orbit__node svg {
        animation: orbit-soft-enter .2s ease-out calc(var(--enter-delay) + .16s) both;
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__node-label {
        animation: orbit-soft-enter .2s ease-out calc(var(--enter-delay) + .28s) both;
    }
    .swi-orbit[data-enhanced="true"] .swi-orbit__node-dot {
        --reveal-opacity: .45;
        animation: orbit-soft-enter .15s ease-out calc(var(--enter-delay) + .38s) both;
    }
    .swi-orbit[data-enhanced="true"][data-interacting="true"] .swi-orbit__node { animation-play-state: paused, running; }
}
@keyframes orbit-logo-enter {
    from { opacity: 0; transform: translateY(8px) scale(.86); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes orbit-rings-enter {
    from { opacity: 0; transform: scale(.92) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes orbit-node-enter {
    from { opacity: 0; translate: var(--enter-x) var(--enter-y); scale: .65; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes orbit-soft-enter {
    from { opacity: 0; }
    to { opacity: var(--reveal-opacity, 1); }
}
@keyframes orbit-stroke-enter {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@media (max-width: 1000px) {
    .hero__grid.hero__grid--orbit { grid-template-columns: 1fr; gap: 0; }
    .hero__grid--orbit .hero__content { max-width: 820px; }
    .hero__grid--orbit h1 { font-size: clamp(2.65rem, 7vw, 4.5rem); }
    .swi-orbit { display: none; }
}
@media (max-width: 640px) {
    .hero__grid--orbit h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
    .swi-orbit *, .swi-orbit *::before, .swi-orbit *::after { animation: none !important; transition: none !important; }
    .swi-orbit__motion { display: none; }
    .swi-orbit__node:hover { transform: none; }
}