@charset "UTF-8";
:root{
    --blue:#4d8fe5;
    --blue-dark:#2c6fc7;
    --ink:#20344e;
    --muted:#728398;
    --line:#dce7f2;
    --pale:#edf6ff;
    --white:#fff;
    --sans:"Inter","Segoe UI","Microsoft YaHei",sans-serif;
    --mono:"Cascadia Code","Consolas",monospace
}
*,*::before,*::after{
    box-sizing:border-box
}
body,h1,h2,h3,p{
    margin:0
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:95px
}
body{
    font-family:var(--sans);
    color:var(--ink);
    background:white;
    -webkit-font-smoothing:antialiased
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round
}
button,a{
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible{
    outline:3px solid #377cda;
    outline-offset:6px
}
::selection{
    background:#bedcff;
    color:#20344e
}
.container{
    width:min(1240px,calc(100% - 112px));
    margin-inline:auto
}
.svg-library{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link{
    position:fixed;
    top:-70px;
    left:20px;
    background:white;
    padding:12px 20px;
    z-index:110
}
.skip-link:focus{
    top:12px
}
.navbar{
    height:82px;
    position:fixed;
    inset:0 0 auto;
    z-index:100;
    border-bottom:1px solid #d7e4f099;
    background:#f7fbffeb;
    backdrop-filter:blur(16px)
}
.nav-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:23px;
    font-weight:750;
    letter-spacing:-1px
}
.brand-mark{
    height:31px;
    width:29px;
    color:var(--blue);
    stroke-width:1.8
}
.brand-blue{
    color:var(--blue)
}
.nav-links{
    display:flex;
    gap:32px;
    align-items:center
}
.nav-links a{
    font-size:13px;
    color:#63778e;
    position:relative;
    padding-block:30px
}
.nav-links a:hover,.nav-links .is-active{
    color:var(--blue-dark)
}
.nav-links .is-active::after{
    content:"";
    position:absolute;
    bottom:19px;
    left:50%;
    width:4px;
    height:4px;
    background:var(--blue);
    border-radius:50%
}
.nav-actions{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:155px;
    justify-content:flex-end
}
.nav-login{
    font-size:13px;
    display:flex;
    align-items:center;
    gap:18px;
    border:1px solid #cbdff3;
    background:#ffffff8c;
    border-radius:6px;
    padding:11px 16px;
    max-width:245px;
    overflow-wrap:anywhere;
    transition:background .2s
}
.nav-login:hover{
    background:white
}
.nav-login span{
    color:var(--blue);
    font-size:17px
}
.menu-toggle{
    display:none
}
.hero{
    position:relative;
    padding-top:82px;
    background:radial-gradient(ellipse at 83% 44%,#d1e7ff80,transparent 49%),linear-gradient(115deg,#f6faff 1%,#edf6ff 55%,#e5f1ff 100%);
    overflow:hidden;
    min-height:780px;
    min-height:max(780px,100svh);
    display:flex;
    flex-direction:column
}
.hero-grid{
    flex:1;
    display:grid;
    grid-template-columns:1.12fr 1fr;
    align-items:center;
    gap:24px;
    padding-top:70px;
    padding-bottom:75px
}
.eyebrow{
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    letter-spacing:2px;
    color:var(--blue-dark);
    display:flex;
    align-items:center;
    gap:10px;
    line-height:1.7
}
.small-line{
    display:inline-block;
    width:24px;
    height:1px;
    background:var(--blue)
}
h1{
    margin-top:30px;
    font-weight:650;
    letter-spacing:-5px;
    line-height:1.13
}
.hero-brand{
    display:block;
    font-size:clamp(68px,6.8vw,100px)
}
.hero-brand>span{
    color:var(--blue)
}
.hero-for{
    display:flex;
    align-items:center;
    gap:17px;
    font-size:clamp(48px,5.15vw,74px);
    font-weight:500;
    letter-spacing:-3.5px;
    margin-top:8px
}
.client-stage{
    display:inline-grid;
    align-items:center;
    position:relative;
    width:max-content;
    flex-shrink:0;
    height:1.28em;
    padding:0 .05em;
    background:transparent;
    border-radius:0;
    isolation:isolate;
    perspective:600px;
    overflow:hidden;
    letter-spacing:-2px
}
.client-name{
    grid-area:1/1;
    display:block;
    color:#91cfff;
    line-height:1.15;
    white-space:nowrap;
    will-change:transform,opacity;
    transform-origin:50% 50%
}
.client-cover{
    position:absolute;
    inset:0;
    background:#a8d6ff;
    z-index:2;
    pointer-events:none;
    opacity:0
}
.title-dot{
    color:var(--blue);
    margin-left:-14px;
    align-self:flex-end
}
.hero-tagline{
    font-size:22px;
    letter-spacing:1px;
    margin-top:30px;
    font-weight:500
}
.hero-description{
    font-size:14px;
    line-height:1.95;
    color:var(--muted);
    margin-top:15px
}
.hero-actions{
    display:flex;
    align-items:center;
    gap:32px;
    margin-top:32px
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    border-radius:5px;
    font-size:14px;
    padding:16px 23px;
    transition:background .2s,transform .2s;
    min-height:51px
}
.button svg{
    width:19px;
    height:19px
}
.primary{
    background:var(--blue);
    color:white;
    box-shadow:0 6px 15px #4786db18
}
.primary:hover{
    background:var(--blue-dark);
    transform:translateY(-2px)
}
.text-link{
    font-size:13px;
    display:inline-flex;
    gap:13px;
    align-items:center
}
.text-link:hover{
    color:var(--blue-dark)
}
.text-link span{
    color:var(--blue);
    font-size:19px
}
.hero-note{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:29px;
    font-size:11px;
    color:#8091a6
}
.hero-note svg{
    width:15px;
    height:15px;
    color:#7097c3
}
.hero-note i{
    height:3px;
    width:3px;
    border-radius:50%;
    background:#b1c4da
}
.hero-bottom{
    border-top:1px solid #d3e3f2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:21px;
    padding-bottom:24px;
    gap:20px;
    font-size:10px;
    color:#8395ab;
    letter-spacing:.5px
}
.scroll-cue{
    display:flex;
    align-items:center;
    gap:20px
}
.scroll-arrow{
    font-size:20px;
    color:#6890bd
}
.live-status{
    display:flex;
    align-items:center;
    gap:8px
}
.status-dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#7bbda4;
    box-shadow:0 0 0 4px #7bbda410;
    flex-shrink:0
}
.live-status strong{
    color:var(--ink);
    font-family:var(--mono);
    font-size:12px;
    font-weight:500;
    margin-left:5px
}
.hero-index{
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:1.5px
}
.hero-art{
    position:relative;
    min-width:0;
    width:100%;
    height:460px;
    display:flex;
    align-items:center;
    justify-content:center
}
.orbit{
    position:absolute;
    border:1px solid #bad7f57a;
    border-radius:50%;
    width:355px;
    height:355px;
    transform:rotate(-22deg)
}
.orbit-one:after,.orbit-two:after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    border:2px solid #edf6ff;
    background:#8bb9ee;
    border-radius:50%;
    top:35%;
    left:0
}
.orbit-two{
    width:435px;
    height:435px;
    border-style:dashed;
    border-color:#bbd8f45c;
    transform:rotate(45deg)
}
.orbit-two:after{
    width:6px;
    height:6px;
    background:#b1c9e5;
    left:18px;
    top:25%
}
.orbit-three{
    width:510px;
    height:510px;
    border-color:#d6e5f55e
}
.shield-object{
    position:relative;
    width:267px;
    height:320px;
    transform:rotate(9deg);
    filter:drop-shadow(7px 26px 20px #5995db29);
    animation:shield-float 7s ease-in-out infinite
}
.main-shield{
    width:100%;
    height:100%;
    stroke:none;
    overflow:visible
}
.art-label{
    position:absolute;
    display:flex;
    align-items:center;
    border:1px solid #ffffffed;
    background:#fafdffde;
    box-shadow:0 12px 35px #4477a910;
    backdrop-filter:blur(9px);
    border-radius:7px;
    z-index:2
}
.label-top{
    top:53px;
    left:6px;
    gap:12px;
    padding:15px 17px;
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:1px;
    transform:rotate(-5deg);
    color:#7092b5
}
.label-tick{
    color:#65ab94;
    margin-left:10px
}
.label-bottom{
    bottom:48px;
    right:-5px;
    gap:13px;
    padding:17px 18px;
    transform:rotate(3deg)
}
.mini-icon{
    height:35px;
    width:35px;
    display:grid;
    place-items:center;
    color:var(--blue);
    background:#e8f2ff;
    border-radius:5px
}
.mini-icon svg{
    height:20px;
    width:20px
}
.label-bottom strong{
    display:block;
    font-size:12px;
    font-weight:600
}
.label-bottom div>span{
    font-size:10px;
    color:#8c9cb0;
    display:block;
    margin-top:6px
}
.label-check{
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid #b7d7cd;
    width:20px;
    height:20px;
    color:#70ad98;
    font-size:11px;
    margin-left:12px
}
.art-cross{
    position:absolute;
    color:#8fb7e2;
    font-size:21px;
    font-weight:300
}
.cross-one{
    top:18px;
    right:59px
}
.cross-two{
    bottom:61px;
    left:30px;
    font-size:16px
}
.cross-three{
    right:7px;
    top:49%;
    font-size:14px
}
.connection-line{
    position:absolute;
    width:50px;
    height:70px;
    border:1px solid #a9c9ec;
    border-bottom:0;
    border-left:0;
    opacity:.6
}
.line-one{
    top:87px;
    left:108px
}
.line-two{
    bottom:100px;
    right:123px;
    transform:rotate(180deg)
}
.art-coordinate{
    position:absolute;
    bottom:-5px;
    font-family:var(--mono);
    font-size:8px;
    letter-spacing:2px;
    color:#8da8c7
}
.mono{
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:1px
}
@keyframes shield-float{
    0%,100%{
        transform:translateY(0) rotate(9deg)
    }
    50%{
        transform:translateY(-12px) rotate(6deg)
    }
}
.clients-section{
    padding:60px 0 64px;
    border-bottom:1px solid var(--line);
    background:white;
    scroll-margin-top:20px
}
.clients-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.clients-heading .eyebrow{
    font-size:9px
}
.clients-heading h2{
    font-size:19px;
    font-weight:550;
    letter-spacing:-.5px
}
.clients-heading>p:last-child{
    font-size:12px;
    color:var(--muted)
}
.client-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:37px
}
.client-item{
    display:flex;
    align-items:center;
    gap:14px;
    border-right:1px solid var(--line);
    padding:4px 30px
}
.client-item:first-child{
    padding-left:0
}
.client-item:last-child{
    border:0;
    padding-right:0
}
.client-item strong{
    font-size:23px;
    font-weight:550;
    letter-spacing:-.8px
}
.client-symbol{
    font-family:var(--sans);
    font-size:34px;
    line-height:1;
    width:45px;
    font-weight:700;
    letter-spacing:-3px
}
.pyrion{
    color:#72adef;
    font-style:italic;
    position:relative
}
.pyrion>span{
    font-size:19px;
    position:absolute;
    top:-1px;
    left:18px
}
.musang{
    color:#86b9a2
}
.plasma{
    color:#f1a35c;
    font-size:44px;
    font-weight:400
}
.cis{
    color:#9caec3;
    font-size:31px
}
.client-number{
    margin-left:auto;
    font-family:var(--mono);
    font-size:9px;
    color:#a1b2c6
}
.section-space{
    padding:105px 0
}
.section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:43px
}
.section-heading h2{
    font-size:34px;
    font-weight:550;
    letter-spacing:-1px;
    margin-top:14px;
    line-height:1.4
}
.section-heading>p{
    font-size:13px;
    line-height:1.9;
    color:var(--muted);
    padding-bottom:3px
}
.features-section{
    background:#f8fbff
}
.feature-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}
.feature-main{
    background:#eaf3fe;
    border:1px solid #dbe9f9;
    border-radius:9px;
    padding:30px 32px;
    overflow:hidden
}
.feature-caption{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#89a4c3
}
.feature-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    background:#f5faff;
    border:1px solid #d8e6f7;
    color:var(--blue);
    border-radius:9px;
    flex-shrink:0
}
.feature-icon svg{
    width:22px;
    height:22px
}
.feature-main h3{
    font-size:22px;
    font-weight:550;
    letter-spacing:-.5px;
    margin-top:27px
}
.feature-main>p{
    font-size:12px;
    line-height:1.95;
    color:#7a8da5;
    margin-top:13px;
    max-width:390px
}
.encryption-diagram{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px 5px 28px
}
.diagram-node{
    width:77px;
    height:80px;
    background:#ffffffbd;
    border:1px solid #ccdef3;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#769ac5;
    box-shadow:0 8px 20px #658cb810
}
.diagram-node>svg{
    width:29px;
    height:29px
}
.diagram-node>span{
    font-family:var(--mono);
    font-size:8px;
    letter-spacing:.6px
}
.server-node{
    background:#5795e4;
    color:white;
    border-color:#5795e4
}
.encrypted-path{
    position:relative;
    width:135px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px
}
.encrypted-path>span{
    font-family:var(--mono);
    font-size:7px;
    letter-spacing:1.5px;
    color:#89a6c6
}
.encrypted-path>div{
    display:flex;
    gap:9px
}
.encrypted-path i{
    width:5px;
    height:5px;
    background:#a3c5ed;
    border-radius:50%
}
.encrypted-path>svg{
    width:14px;
    height:14px;
    color:#7c9dbf
}
.feature-foot{
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.feature-foot span{
    font-family:var(--mono);
    font-size:8px;
    letter-spacing:.5px;
    padding:7px 9px;
    background:#ffffff73;
    border:1px solid #d1e2f6;
    border-radius:4px;
    color:#7692b5
}
.feature-stack{
    display:flex;
    flex-direction:column;
    gap:24px
}
.feature-small{
    display:flex;
    gap:23px;
    background:white;
    border:1px solid var(--line);
    border-radius:9px;
    padding:32px;
    flex:1
}
.feature-small .mono{
    color:#92a7c0;
    font-size:8px
}
.feature-small h3{
    font-size:19px;
    font-weight:550;
    letter-spacing:-.5px;
    margin-top:13px;
    line-height:1.6
}
.feature-small p{
    font-size:12px;
    line-height:1.9;
    color:#7f90a6;
    margin-top:10px
}
.feature-inline{
    border-top:1px solid var(--line);
    margin-top:30px;
    padding-top:24px;
    display:flex;
    gap:10px;
    align-items:center;
    color:#7c90aa
}
.feature-inline>svg{
    width:16px;
    height:16px;
    color:var(--blue)
}
.feature-inline p{
    font-size:11px
}
.feature-inline .mono{
    margin-left:auto;
    font-size:8px;
    color:#8da5c2
}
.start-section{
    background:white
}
.start-section .section-heading{
    margin-bottom:55px
}
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px
}
.step{
    position:relative;
    border-top:1px solid #d8e7f6;
    padding-top:24px
}
.step-number{
    font-family:var(--mono);
    font-size:36px;
    color:#a6c7ed;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.step-number>span{
    font-size:20px;
    color:#93b3d7
}
.step h3{
    font-weight:550;
    font-size:19px;
    margin-top:25px
}
.step p{
    font-size:12px;
    line-height:2;
    color:var(--muted);
    margin-top:14px
}
.step>a{
    font-size:11px;
    color:var(--blue-dark);
    display:inline-flex;
    align-items:center;
    gap:25px;
    margin-top:23px
}
.step>a:hover{
    gap:32px
}
.cta-section{
    background:#eaf4ff;
    border-top:1px solid #dceafa;
    border-bottom:1px solid #dceafa;
    overflow:hidden
}
.cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-block:66px;
    position:relative;
    gap:30px
}
.cta-inner h2{
    font-size:38px;
    font-weight:550;
    letter-spacing:-1px;
    line-height:1.55;
    margin-top:16px
}
.cta-action{
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
    z-index:1;
    margin-right:35px
}
.cta-action>span{
    font-size:11px;
    color:#8099b6
}
.cta-watermark{
    position:absolute;
    width:300px;
    height:300px;
    right:200px;
    bottom:-80px;
    transform:rotate(15deg);
    stroke:#d7e8fb;
    stroke-width:.6;
    pointer-events:none
}
.site-footer{
    background:#fafcff;
    padding-top:49px
}
.footer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-bottom:38px
}
.footer-top .brand{
    font-size:22px
}
.footer-top>div>p{
    font-size:11px;
    color:#8a9aad;
    margin-top:14px
}
.footer-top nav{
    display:flex;
    gap:29px;
    font-size:11px;
    color:#7c8ca1
}
.footer-top nav a:hover{
    color:var(--blue)
}
.back-top{
    display:grid;
    place-items:center;
    border:1px solid #d7e4f2;
    border-radius:5px;
    width:36px;
    height:36px;
    color:#7f9abd
}
.footer-bottom{
    border-top:1px solid #e1eaf4;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-block:23px;
    color:#95a4b7;
    font-size:10px
}
.footer-bottom .mono{
    font-size:8px
}
@media(min-width:1600px){
    .hero-grid{
        padding-top:100px;
        padding-bottom:110px
    }
    .hero-art{
        transform:scale(1.1)
    }
}
@media(max-width:1150px){
    .container{
        width:calc(100% - 72px)
    }
    .hero-grid{
        grid-template-columns:1.15fr 1fr;
        gap:0
    }
    .hero-art{
        transform:scale(.85);
        transform-origin:center right
    }
    .hero-brand{
        font-size:76px
    }
    .hero-for{
        font-size:56px;
        gap:14px
    }
    .client-stage{
        letter-spacing:-2px
    }
    .hero-index{
        font-size:8px
    }
    .clients-heading{
        flex-wrap:wrap
    }
    .clients-heading>p:last-child{
        width:100%
    }
    .client-item{
        padding-inline:20px
    }
    .client-item strong{
        font-size:20px
    }
    .client-number{
        display:none
    }
    .feature-small{
        padding:25px;
        gap:16px
    }
    .feature-small h3{
        font-size:17px
    }
    .feature-main{
        padding:28px
    }
    .section-heading h2{
        font-size:30px
    }
}
@media(max-width:900px){
    .nav-links{
        gap:20px
    }
    .nav-links a{
        font-size:12px
    }
    .nav-actions{
        min-width:auto
    }
    .nav-login{
        padding:9px 12px
    }
    .hero-grid{
        grid-template-columns:1.2fr .8fr
    }
    .hero-brand{
        font-size:68px
    }
    .hero-for{
        font-size:49px;
        letter-spacing:-2.5px;
        gap:12px
    }
    .hero-art{
        transform:scale(.7);
        transform-origin:60% center
    }
    .hero-art .label-bottom{
        right:-55px
    }
    .hero-art .label-top{
        left:-45px
    }
    .hero-tagline{
        font-size:19px
    }
    .hero-description{
        font-size:12px
    }
    .hero-note{
        font-size:10px;
        gap:8px
    }
    .hero-index{
        display:none
    }
    .feature-layout{
        gap:18px
    }
    .feature-stack{
        gap:18px
    }
    .feature-small{
        flex-direction:column;
        gap:16px
    }
    .feature-small .feature-icon{
        display:none
    }
    .feature-small h3{
        margin-top:10px
    }
    .feature-inline .mono{
        display:none
    }
    .steps{
        gap:25px
    }
    .client-symbol{
        font-size:28px;
        width:30px
    }
    .plasma{
        font-size:36px
    }
    .client-item{
        gap:12px
    }
    .client-item strong{
        font-size:18px
    }
    .clients-heading h2{
        font-size:18px
    }
    .clients-heading .eyebrow{
        font-size:8px
    }
    .section-heading>p{
        font-size:11px
    }
    .cta-watermark{
        right:130px
    }
}
@media(max-width:700px){
    .container{
        width:calc(100% - 40px)
    }
    html{
        scroll-padding-top:85px
    }
    .navbar{
        height:68px
    }
    .brand{
        font-size:21px
    }
    .brand-mark{
        width:25px;
        height:28px
    }
    .nav-inner{
        gap:14px
    }
    .nav-actions{
        gap:14px
    }
    .nav-login{
        font-size:11px;
        gap:12px;
        max-width:175px;
        padding:9px 12px
    }
    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        padding:8px 2px;
        border:0;
        background:transparent;
        width:26px;
        height:35px;
        color:var(--ink)
    }
    .menu-toggle span{
        height:1.5px;
        width:22px;
        background:currentColor;
        transition:transform .2s
    }
    .menu-toggle[aria-expanded=true] span:first-child{
        transform:translateY(3.75px) rotate(45deg)
    }
    .menu-toggle[aria-expanded=true] span:last-child{
        transform:translateY(-3.75px) rotate(-45deg)
    }
    .nav-links{
        display:none;
        position:absolute;
        top:67px;
        left:0;
        right:0;
        background:#f8fbff;
        border-bottom:1px solid var(--line);
        padding:12px 20px 20px;
        box-shadow:0 18px 22px #29466908
    }
    .nav-links.is-open{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    .nav-links a{
        font-size:14px;
        padding:13px 5px
    }
    .nav-links .is-active::after{
        display:none
    }
    .hero{
        min-height:auto;
        padding-top:68px
    }
    .hero-grid{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        padding-top:60px;
        padding-bottom:22px;
        gap:5px
    }
    .eyebrow{
        font-size:8px;
        letter-spacing:1.5px
    }
    h1{
        margin-top:24px;
        letter-spacing:-3px
    }
    .hero-brand{
        font-size:clamp(57px,13vw,82px)
    }
    .hero-for{
        font-size:clamp(37px,8.9vw,58px);
        gap:12px;
        letter-spacing:-2px
    }
    .client-stage{
        letter-spacing:-1.5px;
        border-radius:4px
    }
    .title-dot{
        margin-left:-10px
    }
    .hero-tagline{
        margin-top:25px;
        font-size:19px;
        letter-spacing:.5px
    }
    .hero-description{
        font-size:12px;
        margin-top:13px
    }
    .hero-actions{
        gap:27px;
        margin-top:25px
    }
    .button{
        font-size:12px;
        padding:14px 20px;
        gap:25px
    }
    .text-link{
        font-size:12px
    }
    .hero-note{
        margin-top:23px;
        font-size:10px
    }
    .hero-art{
        height:330px;
        flex:none;
        transform:scale(.76);
        width:100%;
        margin-top:-3px;
        margin-bottom:-20px;
        transform-origin:center center
    }
    .shield-object{
        width:235px;
        height:285px
    }
    .orbit-one{
        width:300px;
        height:300px
    }
    .orbit-two{
        width:365px;
        height:365px
    }
    .orbit-three{
        width:430px;
        height:430px
    }
    .hero-art .label-top{
        top:17px;
        left:0
    }
    .hero-art .label-bottom{
        bottom:14px;
        right:-2px
    }
    .art-coordinate{
        bottom:-26px
    }
    .cross-one{
        top:-20px;
        right:25px
    }
    .cross-two{
        left:10px;
        bottom:35px
    }
    .connection-line{
        display:none
    }
    .hero-bottom{
        padding-block:17px;
        font-size:9px
    }
    .hero-bottom .scroll-cue{
        gap:12px
    }
    .live-status{
        gap:7px
    }
    .live-unit{
        display:none
    }
    .clients-section{
        padding-block:44px
    }
    .clients-heading{
        display:block
    }
    .clients-heading h2{
        margin-top:11px;
        font-size:21px
    }
    .clients-heading>p:last-child{
        font-size:11px;
        line-height:1.9;
        margin-top:11px
    }
    .client-list{
        grid-template-columns:1fr 1fr;
        row-gap:28px;
        margin-top:29px
    }
    .client-item{
        padding:4px 16px;
        gap:15px
    }
    .client-item:nth-child(odd){
        padding-left:0
    }
    .client-item:nth-child(even){
        border-right:0
    }
    .client-item strong{
        font-size:20px
    }
    .client-symbol{
        width:35px
    }
    .section-space{
        padding-block:65px
    }
    .section-heading{
        display:block;
        margin-bottom:28px
    }
    .section-heading h2{
        font-size:28px;
        margin-top:10px
    }
    .section-heading>p{
        margin-top:17px;
        font-size:12px
    }
    .feature-layout{
        grid-template-columns:1fr
    }
    .feature-main{
        padding:25px
    }
    .feature-main h3{
        font-size:21px;
        margin-top:23px
    }
    .feature-small{
        flex-direction:row;
        padding:25px 22px;
        gap:18px
    }
    .feature-small .feature-icon{
        display:grid;
        width:36px;
        height:36px
    }
    .feature-small h3{
        font-size:17px
    }
    .feature-small p{
        font-size:11px
    }
    .feature-inline{
        align-items:flex-start;
        line-height:1.9;
        margin-top:23px;
        padding-top:19px;
        gap:7px
    }
    .feature-inline>svg{
        flex-shrink:0;
        margin-top:2px
    }
    .feature-inline p{
        font-size:10px
    }
    .start-section .section-heading{
        margin-bottom:32px
    }
    .start-section .section-heading>.text-link{
        margin-top:17px;
        font-size:11px
    }
    .steps{
        grid-template-columns:1fr;
        gap:29px
    }
    .step{
        padding-top:20px;
        display:grid;
        grid-template-columns:65px 1fr;
        column-gap:15px
    }
    .step-number{
        grid-row:1/4;
        align-self:start;
        font-size:30px;
        display:block
    }
    .step-number>span{
        display:none
    }
    .step h3{
        font-size:18px;
        margin-top:0
    }
    .step p{
        font-size:11px;
        margin-top:11px
    }
    .step>a{
        margin-top:15px
    }
    .cta-inner{
        padding-block:42px;
        flex-direction:column;
        align-items:flex-start;
        gap:27px
    }
    .cta-inner h2{
        font-size:30px
    }
    .cta-action{
        align-items:flex-start;
        margin:0
    }
    .cta-action>span{
        font-size:10px
    }
    .cta-watermark{
        right:-70px;
        bottom:-70px;
        opacity:.7;
        width:260px;
        height:260px
    }
    .site-footer{
        padding-top:33px
    }
    .footer-top{
        flex-wrap:wrap;
        gap:25px;
        padding-bottom:28px;
        align-items:flex-start
    }
    .footer-top>div{
        flex:1
    }
    .footer-top nav{
        order:3;
        width:100%;
        gap:23px;
        font-size:11px;
        flex-wrap:wrap
    }
    .footer-top>div>p{
        font-size:10px
    }
    .footer-bottom{
        font-size:9px;
        padding-block:20px
    }
    .footer-bottom .mono{
        display:none
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*::before,*::after{
        animation:none!important;
        transition:none!important
    }
    .client-name{
        will-change:auto
    }
}

/* Fixed black theme; the client name has no persistent background. */
:root { color-scheme:dark; background:#000; }
:root[data-theme="dark"] { color-scheme:dark; --blue:#87baff; --blue-dark:#a9ceff; --ink:#e4edf9; --muted:#a0b1c8; --line:#292929; --pale:#000; --white:#f3f8ff; }
[data-theme="dark"] body { background:#000000; }
[data-theme="dark"] .navbar { background:#000000ef; border-color:var(--line); }
[data-theme="dark"] .hero { background:#000000; }
[data-theme="dark"] .nav-links a { color:#a5b8d1; }
[data-theme="dark"] .nav-links a:hover,[data-theme="dark"] .nav-links .is-active { color:var(--blue); }
[data-theme="dark"] .hero-bottom { border-color:#292929; color:#a2b5cd; }
[data-theme="dark"] .hero-note { color:#a2b6d0; }
[data-theme="dark"] .hero-note svg { color:#9bbce6; }
[data-theme="dark"] .art-label { background:#111111ed; border-color:#3f6084; box-shadow:0 12px 35px #02091333; color:#bed7f6; }
[data-theme="dark"] .label-bottom div>span { color:#a9c0dd; }
[data-theme="dark"] .mini-icon { background:#1a1a1a; }
[data-theme="dark"] .orbit { border-color:#577eaa42; }
[data-theme="dark"] .art-coordinate,[data-theme="dark"] .art-cross { color:#789cc6; }
[data-theme="dark"] .clients-section,[data-theme="dark"] .start-section { background:#000000; }
[data-theme="dark"] .features-section,[data-theme="dark"] .site-footer { background:#000000; }
[data-theme="dark"] .feature-main { background:#0c0c0c; border-color:#292929; }
[data-theme="dark"] .feature-small { background:#0c0c0c; border-color:#292929; }
[data-theme="dark"] .feature-icon { background:#181818; border-color:#303030; }
[data-theme="dark"] .feature-main>p,[data-theme="dark"] .feature-small p,[data-theme="dark"] .feature-inline { color:#a9bcd5; }
[data-theme="dark"] .feature-caption,[data-theme="dark"] .feature-small .mono,[data-theme="dark"] .feature-inline .mono { color:#93b0d3; }
[data-theme="dark"] .diagram-node { background:#181818; border-color:#303030; color:#b2d3fc; }
[data-theme="dark"] .server-node { background:#528dda; color:white; }
[data-theme="dark"] .feature-foot span { background:#181818; border-color:#303030; color:#b9d4f4; }
[data-theme="dark"] .step,[data-theme="dark"] .footer-bottom { border-color:var(--line); }
[data-theme="dark"] .cta-section { background:#080808; border-color:#292929; }
[data-theme="dark"] .cta-watermark { stroke:#294664; }
[data-theme="dark"] .cta-action>span,[data-theme="dark"] .footer-top>div>p,[data-theme="dark"] .footer-top nav,[data-theme="dark"] .footer-bottom { color:#9bb0ca; }
[data-theme="dark"] .primary { background:#6ca5f1; color:#0c1b30; }
[data-theme="dark"] .primary:hover { background:#91bfff; }
[data-theme="dark"] .back-top { border-color:#3a5576; color:#b9d7fc; }
[data-theme="dark"] .skip-link { background:#151515; }
@media(max-width:700px) {
    .nav-actions { gap:8px; }
    .nav-login { max-width:140px; }
    [data-theme="dark"] .nav-links { background:#000000; border-color:var(--line); }
}
@media(max-width:380px) {
    .nav-inner { gap:8px; }
    .brand { gap:6px; font-size:18px; }
    .brand-mark { width:22px; }
    .nav-login { padding:8px; gap:0; max-width:101px; }
    .nav-login>span { display:none; }
    .nav-actions { gap:6px; }
}

[data-theme="dark"] .nav-login { background:#101010; border-color:#333; color:#dbeaff; }
[data-theme="dark"] .nav-login:hover { background:#202020; }

/* Scroll-bound solar reveal. All orbits remain flat, circular and front-facing. */
.solar-section { position:relative; padding:0; border:0; background:#000; scroll-margin-top:0; }
.solar-section.solar-enhanced { height:310svh; }
.solar-viewport { position:relative; height:100svh; min-height:640px; overflow:hidden; isolation:isolate; background:#000; }
.solar-enhanced .solar-viewport { position:sticky; top:0; min-height:0; }
.solar-stars { position:absolute; inset:0; pointer-events:none; opacity:var(--solar-reveal,1); background-image:radial-gradient(1px 1px at 12% 18%,#b6d5ff99 99%,transparent),radial-gradient(1px 1px at 79% 23%,#fff9 99%,transparent),radial-gradient(1px 1px at 31% 72%,#cbe1ff66 99%,transparent),radial-gradient(1.5px 1.5px at 88% 76%,#cbe1ff99 99%,transparent),radial-gradient(1px 1px at 16% 85%,#fff5 99%,transparent),radial-gradient(1px 1px at 63% 13%,#fff7 99%,transparent),radial-gradient(1px 1px at 52% 89%,#cbe1ff77 99%,transparent); background-size:470px 430px; }
.solar-heading { position:absolute; top:max(112px,12%); left:0; right:0; text-align:center; z-index:3; opacity:var(--solar-reveal,1); transform:translateY(calc((1 - var(--solar-reveal,1))*20px)); pointer-events:none; }
.solar-heading .eyebrow { justify-content:center; font-size:9px; letter-spacing:2.5px; }
.solar-heading h2 { margin-top:13px; font-size:clamp(24px,2.8vw,38px); font-weight:500; letter-spacing:1px; }
.solar-heading>p:not(.eyebrow) { font-size:12px; color:#8e9db1; margin-top:13px; letter-spacing:.5px; }
.solar-system { position:absolute; width:min(65svh,660px,76vw); aspect-ratio:1; left:50%; top:55%; transform:translate(-50%,-50%); }
.solar-orbits { position:absolute; inset:0; opacity:var(--solar-reveal,1); transform:scale(var(--orbit-scale,1)); }
.planet-orbit { position:absolute; width:var(--orbit-size); height:var(--orbit-size); left:calc((100% - var(--orbit-size))/2); top:calc((100% - var(--orbit-size))/2); border:1px solid #91cfff2b; border-radius:50%; animation:planet-revolution var(--period) linear infinite; }
.planet-orbit::after { content:''; position:absolute; inset:4px; border:1px solid #91cfff06; border-radius:50%; pointer-events:none; }
.planet-anchor { position:absolute; top:50%; left:100%; transform:translate(-50%,-50%); }
.planet-counter { animation:planet-upright var(--period) linear infinite; }
.planet-button { position:relative; width:48px; height:48px; border:0; padding:0; background:transparent; display:grid; place-items:center; color:var(--planet-color); cursor:pointer; border-radius:50%; touch-action:manipulation; }
.planet-sphere { display:block; width:25px; height:25px; border-radius:50%; background:radial-gradient(circle at 30% 26%,#f0f9ff 0%,#91cfff 19%,#3774ac 53%,#08101e 94%); box-shadow:0 0 19px #91cfff21,inset -4px -3px 8px #0008; transition:box-shadow .25s; }
.sphere-musang { width:29px; height:29px; background:radial-gradient(circle at 30% 25%,#e2ffe9,#a8e6bf 20%,#42755e 55%,#091910 95%); box-shadow:0 0 19px #a8e6bf20,inset -4px -3px 8px #0008; }
.sphere-plasma { width:34px; height:34px; background:radial-gradient(circle at 30% 25%,#fff2d0,#ffae58 20%,#a94d20 55%,#211005 95%); box-shadow:0 0 23px #ffae5825,inset -4px -3px 8px #0008; }
.sphere-cis { width:22px; height:22px; background:radial-gradient(circle at 30% 25%,#fff,#dce5ed 20%,#79828d 55%,#141820 95%); box-shadow:0 0 19px #ffffff20,inset -4px -3px 8px #0008; }
.planet-name { position:absolute; left:50%; top:calc(100% + 1px); transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:500; letter-spacing:.3px; text-shadow:0 2px 5px #000,0 0 12px #000; }
.planet-button[aria-pressed="true"] .planet-sphere { box-shadow:0 0 0 5px #000,0 0 0 6px var(--planet-color),0 0 25px color-mix(in srgb,var(--planet-color) 35%,transparent); }
.solar-sun { --sun-size:clamp(72px,8vw,104px); position:absolute; width:var(--sun-size); height:var(--sun-size); left:50%; top:50%; margin-left:calc(var(--sun-size)/-2); margin-top:calc(var(--sun-size)/-2); transform:translateY(var(--sun-y,0px)) scale(var(--sun-scale,1)); transform-origin:center; z-index:2; pointer-events:none; }
.sun-globe { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 38% 29%,#fff 0%,#edfaff 13%,#b5dcff 35%,#7db4f0 53%,#2d5684 74%,#070c13 98%); box-shadow:inset -6px -7px 12px #07142399,0 0 18px #93cfff55,0 0 55px #77baff2b,0 0 110px #69aaff14; }
.sun-globe::after { content:''; position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(ellipse at 20% 25%,transparent 0 7%,#fff1 8%,transparent 10% 14%); mix-blend-mode:soft-light; }
.sun-name { position:absolute; top:calc(100% + 17px); left:50%; transform:translateX(-50%); font-size:15px; font-weight:650; letter-spacing:-.3px; white-space:nowrap; opacity:var(--solar-reveal,1); text-shadow:0 2px 8px #000; }
.sun-name>span { color:#91cfff; }
.sun-name small { display:block; text-align:center; color:#7087a3; font-family:var(--mono); font-size:7px; letter-spacing:2px; margin-top:7px; }
.solar-caption { position:absolute; bottom:11%; left:max(32px,calc((100vw - 1240px)/2)); opacity:var(--solar-reveal,1); }
.solar-coordinate { color:#6785a8; font-size:8px; letter-spacing:2px; }
.solar-caption p { color:#9bb0c9; font-size:12px; margin-top:13px; }
.solar-detail { position:absolute; right:max(32px,calc((100vw - 1240px)/2)); bottom:10%; width:237px; border-left:1px solid #91cfff38; padding:5px 0 5px 20px; opacity:var(--solar-reveal,1); background:linear-gradient(90deg,#000c,transparent); }
.solar-detail .eyebrow { font-size:8px; letter-spacing:2px; color:#819cbf; }
.solar-detail h3 { font-size:24px; font-weight:500; margin-top:9px; color:var(--selected-planet,#91cfff); }
.solar-detail>p { color:#94a5bb; font-size:11px; line-height:1.9; margin-top:10px; }
.solar-detail .text-link { font-size:10px; margin-top:12px; }
.solar-scroll { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:16px; color:#7990ad; font-size:10px; letter-spacing:1px; white-space:nowrap; }
.solar-scroll>span:last-child { font-size:18px; }
.solar-progress { position:absolute; bottom:0; left:0; right:0; height:1px; background:#142030; }
.solar-progress>span { display:block; height:100%; background:#91cfff; transform:scaleX(var(--solar-progress,1)); transform-origin:left; }
@keyframes planet-revolution { from { transform:rotate(var(--phase)); } to { transform:rotate(calc(var(--phase) + 360deg)); } }
@keyframes planet-upright { from { transform:rotate(calc(-1 * var(--phase))); } to { transform:rotate(calc(-1 * var(--phase) - 360deg)); } }
@media(max-width:900px) {
    .solar-caption { left:30px; bottom:8%; }
    .solar-detail { right:30px; bottom:8%; width:210px; }
}
@media(max-width:700px) {
    .solar-section.solar-enhanced { height:280svh; }
    .solar-heading { top:98px; }
    .solar-heading .eyebrow { font-size:8px; }
    .solar-heading h2 { font-size:26px; }
    .solar-heading>p:not(.eyebrow) { font-size:10px; }
    .solar-system { width:min(53svh,82vw); top:51%; }
    .solar-sun { --sun-size:52px; }
    .planet-sphere { width:18px; height:18px; }
    .sphere-musang { width:21px; height:21px; }
    .sphere-plasma { width:25px; height:25px; }
    .sphere-cis { width:17px; height:17px; }
    .planet-button { width:34px; height:34px; }
    .planet-name { font-size:10px; top:calc(100% + 1px); }
    .sun-name { font-size:12px; top:calc(100% + 11px); }
    .sun-name small { font-size:6px; letter-spacing:1px; margin-top:5px; }
    .solar-caption { display:none; }
    .solar-detail { left:24px; right:24px; bottom:8%; width:auto; padding:0 0 0 15px; }
    .solar-detail h3 { font-size:20px; margin-top:5px; }
    .solar-detail>p { margin-top:5px; font-size:10px; }
    .solar-detail .text-link { margin-top:6px; }
    .solar-scroll { bottom:17px; font-size:9px; }
}
@media(max-height:650px) and (min-width:701px) {
    .solar-heading { top:95px; }
    .solar-heading h2 { font-size:24px; margin-top:7px; }
    .solar-heading>p:not(.eyebrow) { margin-top:7px; }
    .solar-system { width:min(60svh,50vw); top:57%; }
    .solar-caption,.solar-detail { bottom:10%; }
}
@media(prefers-reduced-motion:reduce) {
    .solar-section.solar-enhanced { height:auto; }
    .solar-enhanced .solar-viewport { position:relative; min-height:640px; }
    .planet-orbit { transform:rotate(var(--phase)); }
    .planet-counter { transform:rotate(calc(-1 * var(--phase))); }
    .solar-progress { display:none; }
}
.solar-orbits { opacity:var(--orbit-reveal,1); }
@media(max-width:700px) {
    .planet-orbit { width:var(--compact-orbit-size); height:var(--compact-orbit-size); left:calc((100% - var(--compact-orbit-size))/2); top:calc((100% - var(--compact-orbit-size))/2); }
}
.solar-heading { transform:translate3d(0,calc((1 - var(--solar-reveal,1))*20px),0); will-change:opacity,transform; }

/* Surface rotation and orbital motion stay independent of scroll progress. */
.sun-globe { animation:solar-surface-rotation 48s linear infinite; }
@keyframes solar-surface-rotation { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
/* Orbit borders do not block pointer access to planets on inner tracks. */
.planet-orbit { pointer-events:none; transition:border-color .25s,box-shadow .25s; }
.planet-button { pointer-events:auto; }
.planet-orbit.is-selected { border-color:color-mix(in srgb,var(--planet-color) 80%,transparent); box-shadow:0 0 12px color-mix(in srgb,var(--planet-color) 14%,transparent),inset 0 0 12px color-mix(in srgb,var(--planet-color) 8%,transparent); }
.planet-orbit.is-selected::after { border-color:color-mix(in srgb,var(--planet-color) 13%,transparent); }
.planet-button[aria-pressed="true"] .planet-name { text-shadow:0 0 12px color-mix(in srgb,var(--planet-color) 50%,transparent),0 2px 5px #000; }
.orbit-hit-area { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.orbit-hit-area circle { fill:none; stroke:transparent; stroke-width:14px; vector-effect:non-scaling-stroke; pointer-events:stroke; cursor:pointer; }

/* Generous orbit targets retain a thin visible orbit. */
.orbit-hit-area circle { stroke-width:32px; }
@media(pointer:coarse) { .orbit-hit-area circle { stroke-width:38px; } }

/* Planet surfaces: rotating terrain beneath fixed atmospheric light and shadow. */
.planet-sphere { position:relative; isolation:isolate; border:1px solid #ffffff20; }
.planet-sphere::before,.planet-sphere::after { content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.planet-sphere::before { opacity:.85; animation:planet-surface-drift 75s linear infinite; }
.planet-sphere::after { background:radial-gradient(circle at 28% 22%,#fff5,transparent 40%),radial-gradient(circle at 35% 32%,transparent 35%,#0005 67%,#000d 100%); box-shadow:inset 1px 1px 2px #fff7,inset -2px -2px 5px #0008; z-index:2; }
.sphere-pyrion::before { background:radial-gradient(ellipse at 32% 35%,#b9edffb3 0 8%,transparent 15%),radial-gradient(ellipse at 65% 62%,#153f79b3 0 12%,transparent 19%),radial-gradient(ellipse at 35% 71%,#73b9c7a3 0 12%,transparent 21%),radial-gradient(ellipse at 62% 28%,#f0fbffb3 0 7%,transparent 19%),repeating-linear-gradient(158deg,transparent 0 11%,#e5f7ff26 12% 14%,transparent 17% 23%); }
.sphere-musang::before { background:radial-gradient(ellipse at 38% 30%,#35654bc9 0 12%,transparent 17%),radial-gradient(ellipse at 54% 45%,#437155c9 0 17%,transparent 24%),radial-gradient(ellipse at 25% 75%,#c2dc9cbb 0 10%,transparent 18%),radial-gradient(ellipse at 80% 22%,#e5f5d4bb 0 4%,transparent 10%),repeating-linear-gradient(135deg,#c4ffe316 0 3%,transparent 5% 12%); }
.sphere-plasma::before { background:radial-gradient(ellipse at 65% 62%,#ffdc9b 0 5%,#aa4e2c8c 7% 10%,transparent 13%),repeating-linear-gradient(172deg,#ffd28a63 0 5%,#a74d3529 7% 11%,transparent 13% 18%,#fff1bd42 20% 23%,transparent 26% 30%); }
.sphere-cis::before { background:radial-gradient(circle at 33% 37%,#44505b8c 0 7%,#eff6ff42 8% 10%,transparent 12%),radial-gradient(circle at 67% 58%,#404a568c 0 11%,#e4edf342 12% 14%,transparent 17%),radial-gradient(circle at 42% 75%,#545d678c 0 5%,#fff3 6% 8%,transparent 10%),radial-gradient(circle at 71% 23%,#525e6d73 0 4%,#fff3 5% 7%,transparent 9%),repeating-radial-gradient(ellipse at 17% 45%,#eff6ff17 0 2%,transparent 3% 7%); }
.planet-button[data-planet="Plasma"]::after { content:''; position:absolute; width:135%; height:29%; left:-17.5%; top:35%; border:2px solid #ffc0776b; border-left-color:#ffdc9b26; border-radius:50%; transform:rotate(-24deg); pointer-events:none; box-shadow:0 1px 2px #0005; }
@keyframes planet-surface-drift { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Focus a planet without freezing the orbital system or locking page scroll. */
.solar-focus-panel { position:absolute; inset:0; z-index:8; pointer-events:none; }
.solar-focus-panel[hidden] { display:none; }
.solar-back { position:absolute; top:max(105px,12%); left:max(24px,calc((100vw - 1240px)/2)); display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid #ffffff24; background:#0d1116; color:#cad6e7; border-radius:5px; font-size:12px; cursor:pointer; z-index:3; }
.solar-back:hover { border-color:var(--planet-color); }
.focus-escape { margin-left:15px; padding:3px 4px; border:1px solid #ffffff21; border-radius:3px; font:8px var(--mono); color:#71829a; }
.focus-planet-info { position:absolute; left:62%; top:50%; transform:translateY(-50%); width:min(320px,30%); }
.focus-planet-info .eyebrow { font-size:9px; color:var(--planet-color); letter-spacing:2px; }
.focus-planet-info h3 { color:var(--planet-color); font-size:clamp(38px,4.2vw,62px); font-weight:550; letter-spacing:-2px; margin:17px 0 18px; }
.focus-planet-info>p:not(.eyebrow) { font-size:13px; color:#9bacc3; line-height:2; }
.focus-capabilities { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.focus-capabilities span { padding:6px 8px; border:1px solid #ffffff1c; border-radius:3px; font-size:10px; color:#99acc5; }
.focus-planet-info .button { margin-top:30px; font-size:12px; }
.focus-coordinate { position:absolute; left:50%; bottom:31px; transform:translateX(-50%); font-size:8px; letter-spacing:2px; color:#69809f; white-space:nowrap; }
.solar-heading,.solar-detail,.solar-caption { transition:opacity .3s; }
.solar-focused .solar-heading,.solar-focused .solar-detail,.solar-focused .solar-caption,.solar-focused .solar-scroll { opacity:0; pointer-events:none; }
.solar-focused .solar-orbits { pointer-events:none; }
.solar-focused .planet-button,.solar-focused .orbit-hit-area circle { pointer-events:none; }
@media(max-width:700px) {
    .solar-back { top:93px; left:24px; padding:9px 12px; font-size:11px; }
    .focus-planet-info { left:24px; right:24px; top:auto; bottom:10%; transform:none; width:auto; }
    .focus-planet-info h3 { font-size:36px; margin:9px 0 11px; letter-spacing:-1px; }
    .focus-planet-info>p:not(.eyebrow) { font-size:11px; }
    .focus-capabilities { margin-top:14px; gap:8px; }
    .focus-capabilities span { font-size:9px; }
    .focus-planet-info .button { margin-top:18px; padding:13px 18px; min-height:44px; }
    .focus-coordinate { bottom:22px; font-size:6px; letter-spacing:1.5px; }
}
@media(max-height:650px) and (max-width:700px) {
    .solar-back { top:82px; }
    .focus-planet-info { bottom:8%; }
    .focus-planet-info h3 { font-size:28px; margin:6px 0; }
    .focus-capabilities { margin-top:10px; }
    .focus-planet-info .button { margin-top:12px; }
}

/* The camera transforms the original system, including its star, planets and orbits. */
.solar-camera { position:absolute; inset:0; transform-origin:0 0; --camera-scale:1; }
.solar-back,.focus-planet-info { pointer-events:auto; }
.focus-planet-info { background:linear-gradient(90deg,#000d,#0007); backdrop-filter:blur(5px); padding:22px; border-left:1px solid color-mix(in srgb,var(--planet-color) 35%,transparent); }
.solar-focused .planet-name,.solar-focused .sun-name { opacity:0; }
.solar-camera .planet-orbit { border-width:calc(1px / var(--camera-scale)); }
.solar-camera .planet-orbit::after { inset:calc(4px / var(--camera-scale)); border-width:calc(1px / var(--camera-scale)); }
.solar-camera .planet-orbit.is-selected { box-shadow:0 0 calc(12px / var(--camera-scale)) color-mix(in srgb,var(--planet-color) 14%,transparent),inset 0 0 calc(12px / var(--camera-scale)) color-mix(in srgb,var(--planet-color) 8%,transparent); }
.solar-camera .planet-sphere { border-width:calc(1px / var(--camera-scale)); }
.solar-focused .planet-button[aria-pressed="true"] .planet-sphere { box-shadow:0 0 0 calc(2px / var(--camera-scale)) #000,0 0 0 calc(3px / var(--camera-scale)) var(--planet-color),0 0 calc(24px / var(--camera-scale)) color-mix(in srgb,var(--planet-color) 25%,transparent); }
@media(max-width:700px) { .focus-planet-info { padding:16px; } }
/* Vector strokes stay thin at every camera magnification. */
.solar-camera .planet-orbit,.solar-camera .planet-orbit.is-selected { border-color:transparent; }
.orbit-hit-area .orbit-visible-line { stroke:#91cfff2b; stroke-width:1px; vector-effect:non-scaling-stroke; pointer-events:none; transition:stroke .25s; }
.planet-orbit.is-selected .orbit-visible-line { stroke:color-mix(in srgb,var(--planet-color) 80%,transparent); }
.solar-focused .planet-orbit::after { opacity:0; }
.solar-camera .planet-sphere { border:0; }
.solar-camera .orbit-visible-line { stroke-width:calc(1px / var(--camera-scale)); }
/* Near view: fade tracks with the same progress as the camera movement and zoom. */
.solar-camera .orbit-visible-line { opacity:calc(1 - var(--focus-progress,0)); }
.solar-focused .planet-orbit.is-selected { box-shadow:none; }
.solar-focused .planet-button[aria-pressed="true"] .planet-sphere { box-shadow:none; }
.planet-3d-surface { display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:50%; z-index:3; pointer-events:none; opacity:var(--focus-progress,0); }
.has-3d-surface::before { opacity:calc(.85 * (1 - var(--focus-progress,0))); }
.has-3d-surface::after { opacity:calc(1 - var(--focus-progress,0)); }

/* GuardIRC emits its own steady light; the star's lighting does not rotate. */
.sun-globe { animation:none; background:radial-gradient(circle at 50% 50%,#fff 0%,#f1fbff 25%,#c9eaff 52%,#94caff 76%,#6caefa 93%,#c5ecff 100%); box-shadow:0 0 12px #c7eaff88,0 0 34px #91cfff5c,0 0 76px #78baff2b,0 0 125px #69aaff14; }
.sun-globe::after { animation:none; opacity:.22; }

/* Feature rows retain their positions; explanations use a shared area below. */
.client-feature-list[hidden],.client-profile-source[hidden],.planet-light-rig[hidden] { display:none; }
.has-client-features { width:min(410px,35%); left:59%; max-height:calc(100% - 210px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#33475e transparent; }
.has-client-features h3 { font-size:40px; margin:10px 0 12px; }
.has-client-features>p:not(.eyebrow) { font-size:11px; line-height:1.8; color:#9baec6; }
.has-client-features .focus-capabilities { display:none; }
.has-client-features .button { margin-top:13px; min-height:42px; padding:12px 17px; font-size:11px; }
.client-feature-list { position:relative; margin-top:18px; padding-bottom:100px; }
.client-feature-item { border-bottom:1px solid #91cfff1a; }
.client-feature-trigger { display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; background:none; color:#b7c7dc; border:0; cursor:pointer; text-align:left; font-size:12px; line-height:1.35; }
.feature-order { color:#5d799e; font:9px var(--mono); min-width:18px; }
.feature-expand { margin-left:auto; color:#637e9d; font-size:15px; font-weight:300; }
.client-feature-item.is-active .client-feature-trigger,.client-feature-item.is-active .feature-order { color:var(--planet-color); }
.client-feature-item.is-active .feature-expand { color:var(--planet-color); transform:rotate(45deg); }
.client-feature-detail { position:absolute; left:0; right:0; bottom:0; height:86px; padding:12px 0 0; color:#a6b7ce; font-size:11px; line-height:1.85; }
.client-feature-detail[hidden] { display:none; }
.client-feature-list::after { content:'悬浮查看介绍，点亮这个世界。'; position:absolute; left:0; right:0; bottom:0; height:86px; padding-top:15px; font-size:10px; letter-spacing:.5px; color:#627c9b; pointer-events:none; }
.client-feature-list.has-active-feature::after { display:none; }
.client-profile-source { display:inline-flex; align-items:center; gap:12px; margin:0 14px 0 0; font-size:10px; color:#9cc6fa; }
.client-profile-source:hover { color:#d8eaff; }
.planet-light-rig { position:absolute; inset:0; pointer-events:none; color:var(--planet-color); opacity:clamp(0,calc((var(--focus-progress,0) - .5)*2),1); }
.light-rays { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.light-ray { stroke:var(--planet-color); stroke-width:1; stroke-dasharray:3 7; opacity:.08; transition:opacity .24s; }
.light-ray.is-active { opacity:.65; stroke-dasharray:none; }
.light-source { position:absolute; width:7px; height:7px; border-radius:50%; border:1px solid #91cfff40; background:#05090e; transform:translate(-50%,-50%); transition:background .24s,box-shadow .24s; }
.light-source::before { content:attr(data-label); position:absolute; right:15px; top:-2px; color:#516b8b; font:8px var(--mono); }
.light-source.is-active { border-color:var(--planet-color); background:#e6f4ff; box-shadow:0 0 8px var(--planet-color),0 0 20px color-mix(in srgb,var(--planet-color) 40%,transparent); }
.light-source.is-active::before { color:var(--planet-color); }
@media(max-width:1100px) and (min-width:701px) {
    .has-client-features { left:56%; width:40%; padding:17px; max-height:calc(100% - 190px); }
    .has-client-features h3 { font-size:34px; }
}
@media(max-width:700px) {
    .focus-planet-info.has-client-features { left:20px; right:20px; top:45%; bottom:43px; transform:none; width:auto; max-height:none; padding:12px; overscroll-behavior:contain; }
    .has-client-features .eyebrow { font-size:7px; }
    .has-client-features h3 { font-size:25px; margin:6px 0 7px; }
    .has-client-features>p:not(.eyebrow) { font-size:9px; line-height:1.65; }
    .client-feature-list { margin-top:10px; padding-bottom:90px; }
    .client-feature-trigger { padding:7px 0; font-size:10px; gap:8px; }
    .feature-order { font-size:8px; min-width:16px; }
    .client-feature-detail { height:80px; padding-top:10px; font-size:10px; line-height:1.8; }
    .client-feature-list::after { height:80px; font-size:9px; }
    .client-profile-source { font-size:9px; }
    .has-client-features .button { font-size:10px; margin-top:10px; min-height:36px; padding:10px 13px; }
    .light-source { width:6px; height:6px; }
    .light-source::before { font-size:7px; right:11px; }
}
@media(max-height:700px) and (max-width:700px) {
    .focus-planet-info.has-client-features { top:48%; bottom:34px; }
}
/* Feature lights run down the RIGHT side of the planet. */
.light-source::before { right:auto; left:14px; }
@media(max-width:700px) { .light-source::before { right:auto; left:11px; } }
/* Site entry is one uninterrupted approach to the same procedural surface coordinate. */
.planet-landing-status { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); width:min(360px,calc(100% - 48px)); text-align:center; color:#eff7ff; pointer-events:none; padding:18px; border:1px solid #d6edff26; border-radius:7px; background:#06121ab8; backdrop-filter:blur(12px); }
.planet-landing-status[hidden] { display:none; }
.planet-landing-status .eyebrow { justify-content:center; font-size:8px; letter-spacing:2px; color:#abd2f4; }
.planet-landing-status strong { display:block; font-size:17px; font-weight:500; margin:12px 0 9px; }
#landingCoordinates { font-size:10px; letter-spacing:1px; color:#bdd2e4; }
.landing-timer { display:block; width:100%; height:1px; background:#dbedff21; margin-top:19px; }
.landing-timer i { display:block; width:100%; height:100%; background:#d9efff; transform:scaleX(0); transform-origin:left; }
.solar-landing .focus-planet-info,.solar-landing .planet-light-rig,.solar-landing .focus-coordinate { opacity:0; pointer-events:none; }
.focus-planet-info { transition:opacity .3s; }
.solar-landing .planet-3d-surface { border-radius:0; }
.solar-landing .planet-button[data-planet="Plasma"]::after { opacity:0; }
@media(max-width:700px) { .planet-landing-status { bottom:6%; padding:16px; } .planet-landing-status strong { font-size:15px; } }
/* Quiet, wallpaper-like landing captions leave the landscape unobstructed. */
.planet-landing-status { left:max(32px,calc((100vw - 1240px)/2)); bottom:7%; width:330px; padding:0; transform:none; text-align:left; background:none; backdrop-filter:none; border:0; text-shadow:0 2px 16px #122b45; }
.planet-landing-status .eyebrow { justify-content:flex-start; color:#dbf0ff; }
.planet-landing-status strong { font-size:22px; margin:13px 0 9px; }
#landingCoordinates { color:#e0edf4; }
.landing-timer { width:180px; background:#ffffff30; margin-top:20px; }
.solar-landing .solar-viewport::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:7; background:linear-gradient(0deg,#06152466,transparent 35%,transparent 80%,#07111d22); }
.solar-landing .solar-back { opacity:.6; transition:opacity .25s; }
.solar-landing .solar-back:hover,.solar-landing .solar-back:focus-visible { opacity:1; }
@media(max-width:700px) { .planet-landing-status { left:24px; bottom:7%; width:calc(100% - 48px); padding:0; } .planet-landing-status strong { font-size:18px; } }