:root{color-scheme:dark}
/* site shell: sections are drawn at their design size and scaled to the screen (see js/app.js) */
/* ponytail: stage scaling keeps the approved mockups pixel-exact; text does not reflow with browser font size. Re-lay out per section if that matters. */
html.ready{scroll-behavior:smooth}   /* switched on after the first jump, see app.js */
body{overflow-x:hidden;overflow-y:auto}
main{display:block}
a{color:inherit;text-decoration:none}

.sec{position:relative;overflow:hidden;height:calc(var(--sh) * var(--s) * 1px);background-color:var(--navy)}
.sec .scaler{position:absolute;left:50%;top:0;width:calc(var(--sw) * 1px);height:calc(var(--sh) * 1px);transform:translateX(-50%) scale(var(--s));transform-origin:50% 0}
.sec .scaler .hero{width:100%;height:100%;min-height:0}

/* one fixed menu for the whole page */
#topnav{position:fixed;left:0;right:0;top:0;z-index:100;height:calc(var(--nh) * var(--s) * 1px);pointer-events:none}
#topnav::before{content:"";position:absolute;inset:0;background:rgba(6,8,24,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);opacity:0;transition:opacity .3s}
#topnav.scrolled::before{opacity:1}
#topnav .navstage{position:absolute;left:50%;top:0;width:calc(var(--sw) * 1px);height:calc(var(--nh) * 1px);transform:translateX(-50%) scale(var(--s));transform-origin:50% 0;pointer-events:auto}
#topnav .nav{top:14px;left:20px;right:20px;height:48px}
#topnav .logo{font-size:21px}
#topnav .nav-btn{margin-left:auto;height:40px;padding:0 16px;font-size:14px}
#topnav .links a{opacity:.86;transition:opacity .2s} #topnav .links a:hover{opacity:1}
html.lap #topnav .nav{top:24px;left:80px;right:80px;height:60px}
html.lap #topnav .logo{font-size:24px}
html.lap #topnav .nav-btn{height:48px;padding:0 22px;font-size:15px}

/* phase 2: forms */
button{font-family:inherit;color:inherit}
#s-booking .card{height:auto!important}
#s-booking input.field{width:100%;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
#s-booking input.field::placeholder{color:#7d78a3}
#s-booking input.field:focus{border-color:rgba(165,139,255,.8);box-shadow:0 0 0 3px rgba(138,107,255,.22)}
#s-booking input.field.bad{border-color:rgba(255,110,130,.8);box-shadow:0 0 0 3px rgba(255,80,110,.18)}
#s-booking .lab .opt{font-style:normal;color:#7d78a3}
#s-booking .opts button{color:inherit;cursor:pointer;transition:background .2s,color .2s,transform .12s}
#s-booking .opts button:active{transform:scale(.95)}
#s-booking button.go{border:0;color:#fff;cursor:pointer;transition:transform .12s,filter .2s} #s-booking button.go:hover{filter:brightness(1.08)} #s-booking button.go:active{transform:scale(.97)}
#s-booking .bk-note{margin:-2px 0 12px;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.4;color:#e7e2ff;background:rgba(138,107,255,.16);border:1px solid rgba(165,139,255,.35)}
#s-booking .bk-err{display:block;min-height:16px;margin-top:6px;text-align:center;font-size:12.5px;color:#ff9db0}
#s-booking .ok .again{display:block;margin-top:12px;font-size:14px;color:#d9d3ff;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#s-booking .foot nav a,#s-booking .foot .soc a{color:inherit}
#s-faq button.qh{width:100%;background:none;border:0;text-align:left;cursor:pointer}
#s-faq .qa{transition:height .38s cubic-bezier(.2,.7,.2,1)}
#s-faq .qh i{transition:transform .3s}
#s-faq .q.open .qh i{transform:rotate(45deg)}
#s-faq .q.open{--rim:linear-gradient(140deg,#fff,#ff9ad8 28%,#8a6bff 55%,#5fd4ff 80%,#fff)}

[hidden]{display:none!important}

/* phase 2: services + recovery */
#s-services .svc,#s-services .it .hd,#s-services .it .lk,#s-recovery #act,#s-recovery #prot,#s-recovery #emp{cursor:pointer}
#s-services .svc{transition:box-shadow .3s,filter .3s}
#s-services .svc:hover{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 30px 80px rgba(120,80,255,.35)}
#s-services .svc:hover .more,#s-services .it .lk:hover{text-decoration:underline;text-underline-offset:4px}
#s-recovery #prot:hover,#s-recovery #act:hover{filter:brightness(1.08)}
:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}

/* phase 2: network */
#s-network-orbit .finger,#s-network-orbit .mouse{display:none}
#s-network-orbit .netwin.open,#s-network-orbit .szpop.open{pointer-events:auto}
#s-network-orbit .chip,#s-network-orbit .wrow,#s-network-orbit #seg span,#s-network-orbit .nw-head .x,#s-network-orbit .choose,#s-network-orbit .ncard,
#s-network-orbit .sz-labels span,#s-network-orbit .sz-track,#s-network-orbit .ups-add,#s-network-orbit .ups-no{cursor:pointer}
#s-network-orbit button.cta{border:0;cursor:pointer}
#s-network-orbit #wheel{touch-action:none;cursor:ns-resize}
#s-network-orbit #orbit{touch-action:pan-y}
#s-network-orbit .chip{transition:filter .2s} #s-network-orbit .chip:hover{filter:brightness(1.15)}
#s-network-orbit .choose{transition:filter .2s} #s-network-orbit .choose:hover{filter:brightness(1.15)}
#s-network-orbit .sz-field input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:#f2eef0;font-family:inherit;font-size:16px}
#s-network-orbit .sz-field input::placeholder{color:#7d78a3}
#s-network-orbit .sz-field:focus-within{border-color:rgba(165,139,255,.8);box-shadow:0 0 0 3px rgba(138,107,255,.22)}
#s-network-orbit .sz-go{border:0;cursor:pointer;font-family:inherit} #s-network-orbit .sz-go:disabled{cursor:default}
#s-network-orbit .sz-x{position:absolute;right:14px;top:14px;z-index:5;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);cursor:pointer}
#s-network-orbit .sz-track .thumb{cursor:grab;touch-action:none}
html.lap #s-network-orbit .nc-row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
html.lap #s-network-orbit .nc-row::-webkit-scrollbar{display:none}
html.lap #s-network-orbit .ncard{scroll-snap-align:start;transition:filter .2s} html.lap #s-network-orbit .ncard:hover{filter:brightness(1.12)}
html.mob #s-network-orbit .nc-row{touch-action:pan-y}

#topnav{transition:opacity .25s}
body.modal-open #topnav{opacity:0;pointer-events:none}
#s-network-orbit #orbit{cursor:grab;user-select:none;-webkit-user-select:none}
#s-network-orbit #orbit.grabbing{cursor:grabbing}
#s-network-orbit #orbit .chip{-webkit-user-drag:none}

.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}
:root{--s:1;--sw:1440;--sh:900;--nh:108}   /* fallbacks until app.js measures the screen */

/* gradient text that survives browser "force dark" modes (Chrome auto-dark, Samsung Internet): text colours + alpha masks instead of background-clip:text */
#s-opening .hl span{background:none;-webkit-background-clip:border-box;background-clip:border-box;position:relative;color:#8a6bff}
#s-opening .hl.r span{color:#4fb4ff}
#s-opening .hl span i{position:absolute;inset:0;font-style:normal;pointer-events:none}
#s-opening .hl.l span i:nth-of-type(1){color:#d9d0ff;-webkit-mask-image:linear-gradient(180deg,#000 46%,transparent 100%);mask-image:linear-gradient(180deg,#000 46%,transparent 100%)}
#s-opening .hl.l span i:nth-of-type(2){color:#fff;-webkit-mask-image:linear-gradient(180deg,#000 8%,transparent 46%);mask-image:linear-gradient(180deg,#000 8%,transparent 46%)}
#s-opening .hl.r span i:nth-of-type(1){color:#8a6bff;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
#s-opening .hl.r span i:nth-of-type(2){color:#ffc9ee;-webkit-mask-image:linear-gradient(180deg,#000 34%,transparent 74%);mask-image:linear-gradient(180deg,#000 34%,transparent 74%)}
#s-opening .hl.r span i:nth-of-type(3){color:#fff;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 34%);mask-image:linear-gradient(180deg,#000 0%,transparent 34%)}
#s-services .head h2,#s-network-orbit .head h2,#s-recovery .head h2,#s-faq .head h2,#s-booking .head h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#f1edff}
