/* Daeza v13: one screen, no scrolling. A clay model of an office network and the Microsoft cloud;
   every tab lights, labels and animates the parts a service covers. Colours come from the theme
   set on :root by app.js (Midnight by default, chosen by Ealia 31 Oct). */
:root{
  --bg1:#0b1020;--bg2:#1c2747;--ink:#f2f5fb;--ink2:#c3cbe0;--mute:#8e99b8;--sheet:#121a31;--line:#3a4875;--pill:#18223f;--btn:#f2f5fb;--btnInk:#0b1020;--acc:#7cc4ff;
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(120% 90% at 65% 30%,var(--bg2),var(--bg1) 75%);color:var(--ink);font:400 17px/1.5 var(--font);-webkit-font-smoothing:antialiased;transition:background .6s,color .6s}
::selection{background:var(--btn);color:var(--btnInk)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}

/* under construction strip: sits above the bar and pushes it down */
.notice{position:fixed;top:0;left:0;right:0;z-index:7;margin:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:calc(env(safe-area-inset-top,0px) + 8px) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:var(--pill);border-bottom:1px solid var(--line);color:var(--ink2);font:500 13px/1.35 var(--font);text-align:center;transition:background .6s,border-color .6s,color .6s}
.notice .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc);animation:npulse 2.4s ease-in-out infinite}
@keyframes npulse{50%{opacity:.35}}
.reduce .notice .dot{animation:none}
@media(prefers-reduced-motion:reduce){.notice .dot{animation:none}}
.notice~.bar{top:36px}
@media(min-width:761px){.notice~.tabs{top:calc(env(safe-area-inset-top,0px) + 50px)}}
@media(max-width:420px){.notice{font-size:12px}.notice~.bar{top:50px}}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 22px) max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));pointer-events:none}
.bar>*{pointer-events:auto}
.wm{font:700 19px/1 var(--font);letter-spacing:.32em;text-decoration:none}
.talk{background:var(--btn);color:var(--btnInk);border:0;border-radius:999px;padding:12px 20px;font:500 14px/1 var(--font);transition:opacity .3s}
.talk:hover{opacity:.85}

/* tabs: one pill control, the light pill slides between tabs */
.tabs{position:fixed;z-index:6;display:flex;gap:2px;background:var(--pill);border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 10px 30px -18px rgba(5,8,20,.6);transition:background .6s,border-color .6s}
.tab{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;background:none;border:0;border-radius:999px;padding:10px 18px;font:500 14px/1 var(--font);white-space:nowrap;color:var(--ink2);transition:color .35s;-webkit-tap-highlight-color:transparent}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--btnInk)}
.ind{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:0;border-radius:999px;background:var(--btn);transition:transform .6s var(--ease),width .6s var(--ease),background .6s}
.ind.snap{transition:none}
@media(min-width:761px){.tabs{top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;translate:-50% 0}}
@media(max-width:760px){
  .tabs{left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);padding:4px}
  .tab{padding:14px 0;font-size:12.5px;min-height:44px}
  .tab[data-tab="home"]{display:none}
  .ind{top:4px;bottom:4px}
  .talk{padding:10px 15px;font-size:13px}
}

/* panel: open text on desktop, a bottom sheet on phones */
.panel{position:fixed;z-index:4}
@media(min-width:761px){.panel{left:max(40px,6vw);top:50%;translate:0 -50%;width:min(500px,38vw);max-height:76svh;overflow:auto;scrollbar-width:none}}
@media(max-width:760px){
  .panel{left:0;right:0;bottom:0;max-height:54svh;overflow:auto;scrollbar-width:none;background:var(--sheet);border-radius:26px 26px 0 0;box-shadow:0 -20px 50px -30px rgba(5,8,20,.6);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px);transition:background .6s}
}
.panel::-webkit-scrollbar{display:none}
.sec{padding:0}
.sec[hidden],.pane[hidden]{display:none}
@media(max-width:760px){.sec{padding:22px 20px 6px}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facts{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.facts li{font-size:14px;color:var(--mute);max-width:14em;line-height:1.35}
.facts b{display:block;font:600 20px/1.1 var(--font);letter-spacing:-.02em;color:var(--ink);margin-bottom:3px}
@media(max-width:760px){.facts{gap:8px 18px;margin-bottom:20px}.facts li{font-size:12.5px;max-width:10em}.facts b{font-size:17px}}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:13px 28px 13px 0;position:relative;font:500 15px/1.35 var(--font);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.svc .d a{color:var(--acc)}

.ttl{margin:0 0 18px;font:600 clamp(34px,4.9vw,68px)/.98 var(--font);letter-spacing:-.045em;text-wrap:balance}
@media(max-width:760px){.ttl{font-size:30px;margin-bottom:12px}}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em 0;margin-right:.2em}
.wd>span{display:inline-block}
.lead{margin:0 0 24px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink2);max-width:30em}
@media(max-width:760px){.lead{font-size:15.5px;margin-bottom:18px}}

/* sub-tabs: text tabs with a sliding accent bar */
.subs{position:relative;display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.sub{background:none;border:0;padding:10px 0 12px;font:500 15px/1 var(--font);color:var(--mute);transition:color .3s}
.sub:hover{color:var(--ink)}
.sub[aria-selected="true"]{color:var(--ink)}
.sbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--acc);border-radius:2px;transition:transform .5s var(--ease),width .5s var(--ease)}
.sbar.snap{transition:none}
@media(max-width:760px){.subs{gap:2px 16px;margin-bottom:14px}.sub{font-size:14px;padding:9px 0 11px}}

.pane h2:not(.vh),.pane h3:not(.vh){margin:0 0 10px;font:600 clamp(22px,2.2vw,30px)/1.08 var(--font);letter-spacing:-.03em}
.pane>p{margin:0 0 14px;max-width:31em;color:var(--ink2)}

/* service lines: numbered, linked both ways to the objects in the model */
.svc{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.svc li{position:relative;padding:13px 0 12px 34px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;cursor:default;transition:background .3s}
.svc li:last-child:nth-child(odd){grid-column:1/-1}
.svc .n{position:absolute;left:0;top:14px;font:600 11px/1 var(--font);letter-spacing:.06em;color:var(--mute);font-variant-numeric:tabular-nums;transition:color .3s}
.svc b{font:600 15px/1.25 var(--font);letter-spacing:-.01em;color:var(--ink);transition:color .3s}
.svc span.d{font-size:13.5px;line-height:1.45;color:var(--mute)}
.svc li.on .n,.svc li:hover .n{color:var(--acc)}
.svc li.on b,.svc li:hover b{color:var(--acc)}
@media(max-width:760px){
  .svc{grid-template-columns:1fr}
  .svc li{padding:11px 0 10px 30px;cursor:pointer}
  .svc span.d{display:none}
  .svc li.open span.d{display:block}
}
.lim{margin:0;padding:0;list-style:none}
.lim li{padding:11px 0;border-top:1px solid var(--line);color:var(--ink2)}
.lim li:last-child{border-bottom:1px solid var(--line)}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:var(--btnInk);border:1px solid var(--btn);border-radius:999px;padding:15px 24px;font:500 15px/1 var(--font);text-decoration:none;transition:opacity .3s,border-color .3s}
.btn:hover{opacity:.86}
.btn.o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.o:hover{border-color:var(--ink);opacity:1}
.btn .ar{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.mail{display:inline-block;font:600 clamp(24px,3vw,38px)/1.1 var(--font);letter-spacing:-.035em;text-decoration:none;margin:2px 0 14px;overflow-wrap:anywhere;background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 2px no-repeat;padding-bottom:4px}
.small{font-size:14px;color:var(--mute);margin:0 0 8px}
.plat{display:none;margin-top:16px}
.mock .plat{display:flex;flex-wrap:wrap;gap:8px}
.gated{border:1px dashed var(--acc);border-radius:12px;padding:8px 12px;font:500 12px/1.35 var(--font);color:var(--ink2)}
.gated i{display:block;font-style:normal;color:var(--mute)}

/* footer: legal line and the theme choice */
.foot{position:fixed;z-index:3;left:max(40px,6vw);right:max(24px,env(safe-area-inset-right,0px));bottom:24px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.foot>*{pointer-events:auto}
.legal{margin:0;font:400 12px/1 var(--font);color:var(--mute)}
.pals{display:flex;gap:8px;align-items:center}
.pal{position:relative;width:26px;height:26px;border-radius:50%;border:0;padding:0;box-shadow:inset 0 0 0 1px rgba(127,140,170,.45);transition:transform .3s var(--ease),box-shadow .3s}
.pal::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--sw)}
.pal:hover{transform:scale(1.08)}
.pal[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(127,140,170,.45),0 0 0 2px var(--bg1),0 0 0 4px var(--ink)}
.pal.midnight{background:#121a31;--sw:#7cc4ff}
.pal.sky{background:#dfe8ff;--sw:#2b4dff}
.pal.mint{background:#d7f0e6;--sw:#5b4bff}
.pal[data-name]:hover::before{content:attr(data-name);position:absolute;bottom:36px;left:50%;translate:-50% 0;background:var(--pill);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:500 12px/1 var(--font);white-space:nowrap}
@media(max-width:760px){.foot{display:none}}
.pals.inpanel{margin-top:22px;gap:14px}
.pals.inpanel .pal{width:44px;height:44px}
.pals.inpanel .pal::after{inset:14px}
.pals.inpanel .pal[data-name]::before{content:none}

/* labels: anchor dot on the object, a leader line, the tag above */
.lbl{position:fixed;left:0;top:0;z-index:3;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .35s}
.lbl.on{opacity:1}
.lbl::before{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.lbl::after{content:"";position:absolute;left:-.5px;bottom:0;width:1px;height:var(--lead,22px);background:linear-gradient(to top,var(--acc),color-mix(in srgb,var(--acc) 30%,transparent))}
.lbl .tag{position:absolute;left:0;bottom:var(--lead,22px);translate:-50% 0;white-space:nowrap;background:var(--pill);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:500 12px/1 var(--font);box-shadow:0 10px 24px -14px rgba(5,8,20,.7);display:flex;gap:7px;align-items:center}
.lbl .tag i{font-style:normal;font-weight:600;font-size:10.5px;color:var(--acc);font-variant-numeric:tabular-nums}
.lbl.hot .tag{border-color:var(--acc)}
.lbl.alert::before{background:#ff4b4b;box-shadow:0 0 0 3px rgba(255,75,75,.25)}
.lbl.alert::after{background:#ff4b4b}
.lbl.alert .tag{border-color:#ff4b4b}

/* motion between tabs: words rise behind a mask, the rest follows */
.swap .wd>span{animation:rise .85s var(--ease) backwards}
@keyframes rise{from{transform:translateY(105%)}}
.swap .wd:nth-child(2)>span{animation-delay:.04s}.swap .wd:nth-child(3)>span{animation-delay:.08s}.swap .wd:nth-child(4)>span{animation-delay:.12s}.swap .wd:nth-child(5)>span{animation-delay:.16s}.swap .wd:nth-child(6)>span{animation-delay:.2s}.swap .wd:nth-child(7)>span{animation-delay:.24s}.swap .wd:nth-child(8)>span{animation-delay:.28s}
.swap .lead,.swap .facts,.swap .subs,.swap .pane,.swap .acts,.swap .small,.swap .mail,.swap .plat,.swap .pals{animation:fadeup .7s .2s var(--ease) backwards}
.swap .subs{animation-delay:.28s}.swap .pane{animation-delay:.34s}.swap .acts{animation-delay:.4s}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}}
.bodyswap .pane:not([hidden]){animation:fadeup .5s var(--ease) backwards}
.bodyswap .svc li{animation:fadeup .5s var(--ease) backwards}
.bodyswap .svc li:nth-child(2){animation-delay:.04s}.bodyswap .svc li:nth-child(3){animation-delay:.08s}.bodyswap .svc li:nth-child(4){animation-delay:.12s}.bodyswap .svc li:nth-child(5){animation-delay:.16s}.bodyswap .svc li:nth-child(6){animation-delay:.2s}
.reduce *,.reduce *::before,.reduce *::after{animation:none!important;transition:none!important}
span.mail{background:none;color:var(--ink2);font-size:clamp(20px,2.2vw,28px)}