.sw-section { position: relative; isolation: isolate; overflow: hidden; padding: 72px 24px 36px; background: #080b10; color: #f4f5f7; }
.sw-section *, .sw-section *::before, .sw-section *::after { box-sizing: border-box; }
.sw-section .sw-grid { position: absolute; inset: 0; z-index: -1; opacity: .35; background: radial-gradient(ellipse at 50% 42%, #92651338, transparent 55%), linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
.sw-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 48px; max-width: 1180px; margin: 0 auto; }
.sw-heading { position: relative; z-index: 2; align-self: center; text-align: left; padding-bottom: 36px; }
.sw-section .sw-eyebrow { margin: 0 0 22px; color: #f0bb39; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.sw-section h2 { color: #f4f5f7; font-size: clamp(42px, 4.8vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; margin: 0; }
.sw-section h2 span { color: #f0bb39; }
.sw-section .sw-intro { max-width: 440px; margin: 24px 0 22px; color: #a6adba; font-size: 17px; line-height: 1.65; }
.sw-platforms { display: flex; gap: 10px; }
.sw-platforms span { border: 1px solid #ffffff24; border-radius: 30px; padding: 7px 15px; font-size: 12px; color: #ced2dc; }
.sw-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; width: 100%; max-width: 540px; justify-self: center; gap: 14px; padding: 55px 0; }
.sw-orbit { position: absolute; left: 50%; top: 48%; border: 1px solid #f0bb3920; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) rotate(-16deg); }
.sw-orbit-outer { width: 94%; height: 75%; }
.sw-orbit-inner { width: 74%; height: 90%; border-color: #ffffff0a; transform: translate(-50%, -50%) rotate(16deg); }
.sw-device { position: relative; margin: 0; width: 26%; max-width: 145px; flex-shrink: 0; }
.sw-device-main { width: 35%; max-width: 195px; z-index: 2; }
.sw-device-left { rotate: -12deg; }
.sw-device-right { rotate: 12deg; }
.sw-case { position: relative; padding: 6px; border: 1px solid #737885; border-radius: 50%; background: linear-gradient(145deg, #72767f, #181c23 28%, #090c11 65%, #535760); box-shadow: 0 30px 60px #0009, inset 0 0 0 3px #101318; }
.sw-case::after { content: ''; position: absolute; right: -6px; top: 43%; width: 6px; height: 13%; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(#646873 0 2px, #242831 2px 4px); }
.sw-case img { display: block; width: 100%; height: auto; border-radius: 50%; }
.sw-device-main .sw-case { box-shadow: 0 35px 75px #000b, 0 0 80px #efb52c12, inset 0 0 0 3px #101318; }
.sw-device figcaption { margin-top: 18px; color: #c0c6d2; text-align: center; font-size: 11px; line-height: 1.5; }
.sw-device figcaption span { color: #f0bb39; margin-right: 7px; font-family: monospace; }
.sw-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 30px 0 34px; border-top: 1px solid #ffffff20; }
.sw-number { color: #f0bb39; font: 11px/1.5 monospace; letter-spacing: .12em; }
.sw-section h3 { color: #f4f5f7; font-size: 21px; font-weight: 500; line-height: 1.3; margin: 12px 0 10px; }
.sw-section .sw-detail p, .sw-section .sw-route p { color: #a6adba; font-size: 15px; line-height: 1.7; margin: 0; }
.sw-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid #ffffff20; padding: 26px 0; }
.sw-route { display: flex; align-items: center; gap: 24px; max-width: 660px; }
.sw-route img { width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0; }
.sw-section .sw-route h3 { margin-top: 0; }
.sw-cta { display: inline-flex; align-items: center; justify-content: center; gap: 26px; flex-shrink: 0; padding: 16px 24px; border-radius: 40px; background: #f0bb39; color: #12100a; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s; }
.sw-cta:hover { background: #ffd36a; color: #12100a; }
.sw-cta:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.sw-section .sw-note { grid-column: 1 / -1; color: #8f98a8; font-size: 12px; line-height: 1.7; margin: 18px 0 0; }
@media (max-width: 900px) {
    .sw-inner { grid-template-columns: minmax(0, 1fr); }
    .sw-heading { padding-bottom: 0; }
    .sw-stage { min-height: 310px; max-width: 480px; }
}
@media (max-width: 767px) {
    .sw-section { padding: 64px 20px 28px; }
    .sw-section .sw-intro { font-size: 16px; }
    .sw-stage { min-height: 290px; gap: 12px; padding: 44px 0; }
    .sw-device { width: 27%; }
    .sw-device-main { width: 39%; }
    .sw-case { padding: 5px; }
    .sw-device figcaption { font-size: 10px; letter-spacing: 0; }
    .sw-device figcaption span { display: block; margin: 0 0 4px; }
    .sw-details { grid-template-columns: 1fr; gap: 26px; padding: 28px 0; }
    .sw-section h3 { font-size: 20px; }
    .sw-footer { align-items: stretch; flex-direction: column; gap: 24px; }
    .sw-route { gap: 16px; }
    .sw-route img { width: 84px; height: 84px; }
    .sw-section .sw-note { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .sw-device { transform: none !important; }
    .sw-cta { transition: none; }
}