/* A mobile-first motion identity for the public homepage. */
.wp-cinematic { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #071326; }
.wp-network-canvas { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.wp-cinematic-vignette { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 75% 45%, #16458135 0, transparent 55%), linear-gradient(90deg, #071326e0 0, #07132695 37%, #07132615 70%, #07132644), linear-gradient(0deg, #071326 0, transparent 25%); }
.wp-cinematic-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: 'copy stage' 'actions stage' 'controls controls'; column-gap: 20px; max-width: 1320px; padding: 66px 40px 28px; margin: auto; }
.wp-cinematic-copy { grid-area: copy; align-self: end; z-index: 1; }
.wp-cinematic-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: #9ac9e6; font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.wp-cinematic-kicker > span { width: 6px; height: 6px; background: #90ebf3; border-radius: 50%; box-shadow: 0 0 18px #81e7ff; }
.wp-cinematic h1 { margin: 0; color: #fff; font-size: clamp(58px, 6.2vw, 86px); font-weight: 700; line-height: 1.03; letter-spacing: -.055em; }
.wp-cinematic h1 > span { display: inline-block; white-space: nowrap; color: #8ce7fa; background: linear-gradient(100deg, #a1eeff 0%, #70bbff 55%, #aab3ff 100%); background-clip: text; -webkit-text-fill-color: transparent; }
.wp-cinematic-intro { max-width: 440px; margin-top: 26px; color: #adbed5; font-size: 17px; line-height: 1.8; text-wrap: pretty; }
.wp-cinematic-actions { grid-area: actions; align-self: start; display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 28px; z-index: 1; }
.wp-cinematic-primary { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 14px 23px; color: #08192d; background: #b6eeff; border: 1px solid #d3f6ff; border-radius: 10px; box-shadow: 0 0 32px #7bd6ff18; font-size: 14px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.wp-cinematic-primary:hover { color: #08192d; background: #e2faff; transform: translateY(-2px); box-shadow: 0 0 35px #7bd6ff38; }
.wp-cinematic-primary i, .wp-cinematic-secondary i { font-size: 18px; }
.wp-cinematic-secondary { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #d7e5f5; font-size: 13px; font-weight: 600; }
.wp-cinematic-secondary:hover { color: #9fedff; }
.wp-cinematic :focus-visible { outline: 2px solid #a1eeff; outline-offset: 5px; }
.wp-network-stage { grid-area: stage; position: relative; align-self: center; width: 100%; min-width: 0; aspect-ratio: 1.12; display: grid; align-items: center; justify-items: center; }
.wp-stage-halo { position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #326ac22b 0, #168db415 35%, transparent 68%); animation: wp-halo-breathe 9s ease-in-out infinite alternate; }
.wp-stage-orbit { position: absolute; width: 89%; aspect-ratio: 1; border: 1px solid #5284b927; border-radius: 50%; transform: rotateX(62deg) rotateZ(-25deg); }
.wp-stage-orbit::after { content: ''; position: absolute; top: 12%; left: 12%; width: 5px; height: 5px; background: #76e9f8; box-shadow: 0 0 17px #6acaff; border-radius: 50%; }
.wp-stage-orbit-one { animation: wp-orbit-one 28s linear infinite; }
.wp-stage-orbit-two { width: 78%; border-style: dashed; border-color: #80b9d51f; animation: wp-orbit-two 35s linear infinite reverse; }
.wp-network-map { position: relative; width: 100%; max-width: 650px; overflow: visible; filter: drop-shadow(0 15px 22px #0002); }
.wp-network-map text { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.wp-map-grid { opacity: .55; }
.wp-map-wires { opacity: .65; }
.wp-map-signals path { stroke-dasharray: 4 96; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px #72dfff); animation: wp-wire-travel 4s linear infinite; }
.wp-visual-scene { opacity: 0; transform: translateY(14px) scale(.97); transform-origin: 240px 170px; transition: opacity .65s ease, transform .65s ease; }
.wp-cinematic[data-scene='0'] .wp-scene-connect, .wp-cinematic[data-scene='1'] .wp-scene-time, .wp-cinematic[data-scene='2'] .wp-scene-insight { opacity: 1; transform: translateY(0) scale(1); }
.wp-floating-node { animation: wp-node-float 6s ease-in-out infinite alternate; }
.wp-float-two { animation-delay: -2.1s; animation-duration: 7s; }
.wp-float-three { animation-delay: -3.5s; animation-duration: 8s; }
.wp-float-four { animation-delay: -1.2s; animation-duration: 7.5s; }
.wp-core-ring { transform-origin: 240px 170px; animation: wp-core-spin 30s linear infinite; }
.wp-cinematic[data-motion][data-scene='0'] .wp-scene-connect, .wp-cinematic[data-motion][data-scene='1'] .wp-scene-time { --wp-brand-ring-animation: wp-brand-ring-draw; --wp-brand-bar-animation: wp-brand-bar-rise; --wp-brand-tick-animation: wp-brand-tick-draw; }
.wp-brand-ring { stroke-dasharray: 100; stroke-dashoffset: 0; animation: var(--wp-brand-ring-animation, none) 7.5s ease-in-out infinite; }
.wp-brand-bar { transform-box: fill-box; transform-origin: center bottom; animation: var(--wp-brand-bar-animation, none) 7.5s cubic-bezier(.22, 1, .36, 1) infinite both; }
.wp-brand-bar-two { animation-delay: .14s; }
.wp-brand-bar-three { animation-delay: .28s; }
.wp-brand-tick { stroke-dasharray: 100; stroke-dashoffset: 0; animation: var(--wp-brand-tick-animation, none) 7.5s ease-in-out infinite; }
.wp-insight-line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.wp-cinematic[data-scene='2'] .wp-insight-line { animation: wp-chart-reveal 2.5s ease both; }
.wp-chart-dot { animation: wp-chart-pulse 2s ease-in-out infinite alternate; }
.wp-illustration-label { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #7790ad; white-space: nowrap; }
.wp-story-controls { grid-area: controls; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; margin-top: 24px; border-top: 1px solid #9bc4ff23; }
.wp-story-caption { display: flex; align-items: center; gap: 22px; min-width: 0; }
.wp-story-number { flex-shrink: 0; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: #779bbd; }
.wp-story-text { min-height: 44px; }
.wp-story-text p { color: #e5f2ff; font-size: 14px; font-weight: 600; line-height: 1.6; }
.wp-story-text > span { display: block; color: #89a1bd; margin-top: 5px; font-size: 12px; line-height: 1.6; }
.wp-story-buttons, .wp-story-steps { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.wp-story-buttons[hidden] { display: none; }
.wp-story-buttons { gap: 22px; }
.wp-story-step { display: flex; align-items: center; width: 36px; height: 44px; cursor: pointer; }
.wp-story-step span { display: block; width: 100%; height: 3px; background: #45607e; border-radius: 4px; transition: background .3s; }
.wp-story-step:hover span { background: #a1eeff; }
.wp-story-step[aria-pressed='true'] span { background: #9fedff; box-shadow: 0 0 12px #80d9ff44; }
.wp-motion-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #42617c; border-radius: 50%; color: #b9d7ec; font-size: 18px; cursor: pointer; }
.wp-motion-toggle:hover { color: #fff; border-color: #9fedff; background: #9fedff10; }
.wp-motion-toggle[hidden] { display: none; }
.wp-cinematic:not([data-motion='running']) *, .wp-cinematic:not([data-motion='running']) *::before, .wp-cinematic:not([data-motion='running']) *::after { animation-play-state: paused !important; }
@keyframes wp-wire-travel { to { stroke-dashoffset: 0; } }
@keyframes wp-node-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes wp-halo-breathe { from { transform: scale(.92); opacity: .65; } to { transform: scale(1.12); opacity: 1; } }
@keyframes wp-orbit-one { from { transform: rotateX(62deg) rotateZ(-25deg); } to { transform: rotateX(62deg) rotateZ(335deg); } }
@keyframes wp-orbit-two { from { transform: rotateX(48deg) rotateY(30deg) rotateZ(0); } to { transform: rotateX(48deg) rotateY(30deg) rotateZ(360deg); } }
@keyframes wp-core-spin { to { transform: rotate(360deg); } }
@keyframes wp-brand-ring-draw { 0% { stroke-dashoffset: 100; opacity: .35; } 20%, 87% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .35; } }
@keyframes wp-brand-bar-rise { 0%, 6%, 100% { transform: scaleY(.18); opacity: .35; } 25%, 88% { transform: scaleY(1); opacity: 1; } }
@keyframes wp-brand-tick-draw { 0%, 25% { stroke-dashoffset: 100; opacity: 0; } 42%, 87% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wp-chart-reveal { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes wp-chart-pulse { from { opacity: .4; } to { opacity: 1; } }
@media (min-width: 1440px) { .wp-cinematic-inner { padding-block: 85px 34px; } }
@media (max-width: 1023px) {
    .wp-cinematic-inner { padding: 48px 28px 24px; grid-template-columns: 1fr 1fr; column-gap: 8px; }
    .wp-cinematic h1 { font-size: clamp(46px, 6.3vw, 65px); }
    .wp-cinematic-kicker { letter-spacing: .1em; font-size: 9px; }
    .wp-cinematic-intro { font-size: 15px; }
    .wp-cinematic-actions { gap: 15px; }
    .wp-cinematic-primary { padding-inline: 17px; font-size: 12px; }
    .wp-network-stage { aspect-ratio: .9; }
}
@media (max-width: 699px) {
    .wp-cinematic-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'stage' 'actions' 'controls'; padding: 32px 24px 20px; }
    .wp-cinematic-copy { text-align: center; }
    .wp-cinematic-kicker { justify-content: center; font-size: 9px; letter-spacing: .12em; margin-bottom: 18px; }
    .wp-cinematic h1 { font-size: clamp(40px, 12.1vw, 65px); line-height: 1.04; }
    .wp-cinematic-intro { max-width: 350px; margin: 18px auto 0; font-size: 14px; line-height: 1.75; }
    .wp-cinematic-vignette { background: linear-gradient(0deg, #071326 0, #07132600 23%, #07132633 50%, #071326ab 77%, #07132670), radial-gradient(ellipse at 50% 54%, #13528045, transparent 65%); }
    .wp-network-stage { width: calc(100% + 24px); margin-left: -12px; max-width: 460px; justify-self: center; aspect-ratio: 1.53; margin-top: 5px; }
    .wp-network-map { width: 100%; }
    .wp-stage-orbit { width: 70%; }
    .wp-stage-orbit-two { width: 62%; }
    .wp-illustration-label { bottom: -1px; font-size: 8px; letter-spacing: .08em; }
    .wp-cinematic-actions { justify-content: center; margin-top: 28px; gap: 18px; }
    .wp-cinematic-primary { min-height: 48px; padding: 12px 16px; gap: 10px; font-size: 12px; }
    .wp-cinematic-secondary { font-size: 12px; }
    .wp-story-controls { flex-wrap: wrap; gap: 8px; padding-top: 17px; margin-top: 26px; }
    .wp-story-caption { width: 100%; gap: 10px; }
    .wp-story-number { font-size: 8px; }
    .wp-story-text { min-height: 22px; }
    .wp-story-text p { font-size: 12px; }
    .wp-story-text > span { display: none; }
    .wp-story-buttons { width: 100%; justify-content: space-between; }
    .wp-story-step { width: 33px; height: 36px; }
    .wp-motion-toggle { width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 359px) {
    .wp-cinematic-inner { padding-inline: 18px; padding-top: 26px; }
    .wp-cinematic h1 { font-size: 39px; }
    .wp-cinematic-kicker { font-size: 8px; }
    .wp-cinematic-actions { gap: 12px; }
    .wp-cinematic-primary { padding-inline: 12px; font-size: 11px; }
    .wp-cinematic-secondary { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .wp-cinematic *, .wp-cinematic *::before, .wp-cinematic *::after { animation: none !important; transition: none !important; }
    .wp-map-signals path { stroke-dashoffset: 50; }
    .wp-insight-line { stroke-dashoffset: 0; }
}