.storm-desk-section { position: relative; overflow: hidden; padding: 150px 0; background: #040d1d; }
.storm-desk-section::before { content: ""; position: absolute; inset: 0; opacity: .48; background: radial-gradient(ellipse at 72% 55%, rgba(22, 125, 174, .18), transparent 33%), linear-gradient(90deg, rgba(26, 223, 239, .08) 1px, transparent 1px), linear-gradient(rgba(26, 223, 239, .08) 1px, transparent 1px); background-size: auto, 75px 75px, 75px 75px; mask-image: linear-gradient(90deg, transparent, black 27%, black 84%, transparent); }
.storm-desk-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .75fr 1.25fr; gap: 72px; align-items: center; }
.storm-desk-copy h2 { margin: 16px 0 22px; font-size: clamp(42px, 4.15vw, 66px); line-height: 1.04; letter-spacing: -.07em; }
.storm-desk-copy > p:not(.eyeline) { max-width: 455px; color: #aac0d8; font-size: 16px; line-height: 1.72; }
.desk-tabs { display: grid; gap: 3px; max-width: 355px; margin-top: 35px; padding-left: 1px; border-left: 1px solid rgba(109, 226, 241, .27); }
.desk-tabs button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 0; background: transparent; color: #8ca8c5; font: 600 13px var(--display); text-align: left; cursor: pointer; transition: color .25s, background .25s, transform .25s; }
.desk-tabs button::after { content: "→"; opacity: 0; color: var(--cyan); transform: translateX(-7px); transition: opacity .25s, transform .25s; }
.desk-tabs button:hover, .desk-tabs button:focus-visible { color: #efffff; outline: 0; background: rgba(33, 220, 239, .06); }
.desk-tabs button[aria-selected="true"] { color: #ecffff; background: linear-gradient(90deg, rgba(26, 228, 240, .15), transparent); transform: translateX(8px); }
.desk-tabs button[aria-selected="true"]::after { opacity: 1; transform: none; }
.desk-showcase { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.desk-ambient { position: absolute; inset: 6% 0; background: radial-gradient(ellipse, rgba(33, 227, 244, .25), transparent 59%); filter: blur(20px); animation: desk-bloom 5s ease-in-out infinite; }
.desk-screen { position: relative; z-index: 2; overflow: hidden; width: 100%; border: 1px solid rgba(113, 237, 248, .47); border-radius: 8px; background: #06172d; box-shadow: -25px 35px 85px rgba(0, 0, 0, .55), 0 0 55px rgba(35, 221, 240, .11); transform: perspective(1400px) rotateY(-6deg) rotateX(1deg); transform-origin: 35% 50%; transition: opacity .28s ease, transform .38s cubic-bezier(.2, .8, .2, 1), filter .28s ease; }
.desk-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 18%); }
.desk-screen.is-switching { opacity: .2; transform: perspective(1400px) rotateY(-8deg) rotateX(1deg) scale(.975); filter: saturate(.5); }
.desk-screen-bar { height: 29px; display: flex; align-items: center; gap: 5px; padding: 0 12px; color: #8eaac5; background: #071d38; font: 8px var(--mono); letter-spacing: .1em; }
.desk-screen-bar span { width: 5px; height: 5px; border-radius: 50%; background: #42637d; }.desk-screen-bar b { margin: auto; font-weight: 500; }.desk-screen-bar i { color: #25f1ae; font-style: normal; font-size: 7px; }
.desk-screen img { display: block; width: 100%; min-height: 370px; max-height: 470px; object-fit: cover; object-position: center; }
.desk-screen-caption { position: absolute; right: 18px; bottom: 17px; left: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(109, 234, 244, .27); background: rgba(3, 16, 34, .85); backdrop-filter: blur(9px); color: #cdebf1; font: 9px var(--mono); letter-spacing: .07em; }
.desk-screen-caption span { color: var(--cyan); }.desk-screen-caption b { margin-right: auto; font-weight: 500; }.desk-screen-caption i { color: var(--cyan); font-style: normal; font-size: 15px; }
.desk-orbit-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 5px; padding: 9px 11px; border: 1px solid rgba(88, 230, 244, .28); background: rgba(5, 21, 42, .9); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); color: #a7c7dc; font: 8px var(--mono); letter-spacing: .1em; animation: card-drift 5s ease-in-out infinite; }
.desk-orbit-card i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.desk-orbit-card b { color: #ecffff; font-weight: 500; }.card-one { top: 8%; right: -30px; }.card-two { bottom: 12%; left: -42px; animation-delay: -2.4s; }
@keyframes desk-bloom { 50% { transform: scale(1.08); opacity: .56; } }
@keyframes card-drift { 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .storm-desk-section { padding: 105px 0; }.storm-desk-layout { grid-template-columns: 1fr; gap: 44px; }.desk-showcase { max-width: 730px; width: calc(100% - 24px); margin-inline: auto; }.desk-screen { transform: none; }.desk-screen img { min-height: auto; }.card-one { right: -12px; }.card-two { left: -12px; } }
@media (max-width: 620px) { .storm-desk-section { padding: 85px 0; }.desk-showcase { min-height: auto; }.desk-tabs { max-width: none; }.desk-screen { border-radius: 5px; }.desk-screen-bar { height: 22px; font-size: 6px; }.desk-screen img { max-height: 265px; }.desk-screen-caption { right: 8px; bottom: 8px; left: 8px; padding: 7px 8px; font-size: 7px; }.desk-orbit-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .desk-ambient, .desk-orbit-card { animation: none; }.desk-screen { transform: none; transition: none; } }