/* Tools page: slow 3D orbit of business app icons around the Fred's Web logo. Loads after systems.css and command-home.css. */
.tools-hero{padding-block:clamp(48px,6vw,90px) 0;max-width:var(--max)}
.tools-hero .breadcrumb{margin:0 0 26px;color:#9fb4d6;font-size:14px}
.tools-hero .breadcrumb a{color:#cfe2ff}
.tools-hero h1{font-size:clamp(42px,6vw,88px);line-height:1.02;margin:14px 0 0;max-width:15ch;text-wrap:balance}
.tools-hero h1 span{background:linear-gradient(100deg,#5fb2ff 0%,#bce2ff 45%,#f6c445 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tools-hero .cc-lede{max-width:58ch}
.tools-hero .hero-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px 28px;margin:30px 0 0;padding:0}
.tools-hero .hero-actions .button,.tools-hero .hero-actions .text-link{margin:0;width:auto}

.orbit-section{position:relative;overflow:hidden;margin-top:clamp(-70px,-4vw,0px);padding-block:clamp(10px,3vw,30px) clamp(40px,6vw,90px)}
.orbit-section::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 60% at 50% 48%,rgba(40,120,255,.3),transparent 72%),radial-gradient(ellipse 28% 28% at 50% 50%,rgba(246,196,69,.1),transparent 70%)}
.orbit{--s:min(96vw,980px);--t:clamp(44px,calc(var(--s)*.082),80px);margin:0 auto;width:var(--s);text-align:center}
.o-stage{position:relative;width:var(--s);height:var(--s);perspective:calc(var(--s)*1.6);perspective-origin:50% 50%}
.o-world{position:absolute;inset:0;transform-style:preserve-3d}

.o-glow{position:absolute;left:50%;top:50%;width:calc(var(--s)*.46);height:calc(var(--s)*.46);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(90,165,255,.6),rgba(70,150,255,.14) 52%,transparent 70%);filter:blur(12px)}
.o-core{position:absolute;left:50%;top:50%;width:calc(var(--s)*.2);transform:translate(-50%,-50%) translateZ(1px);filter:drop-shadow(0 10px 28px rgba(0,10,40,.7)) drop-shadow(0 0 26px rgba(95,178,255,.55));animation:o-float 9s ease-in-out infinite}
.o-core img{display:block;width:100%;height:auto}

/* One orbit per bubble: each lies in its own tilted plane, spins at its own speed and direction. */
.o-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(var(--rz)) rotateX(var(--rx))}
.o-line{display:block;position:absolute;left:calc(var(--s)*var(--rad)*-1);top:calc(var(--s)*var(--rad)*-1);width:calc(var(--s)*var(--rad)*2);height:calc(var(--s)*var(--rad)*2);border-radius:50%;border:1px solid rgba(150,210,255,.26);box-shadow:0 0 14px rgba(70,150,255,.14)}
.o-spin{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:o-spin var(--dur) linear infinite var(--dir)}
.o-item{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(var(--a)) translateX(calc(var(--s)*var(--rad)))}
.o-cnt{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:o-spin var(--dur) linear infinite var(--dir-rev)}
.o-face{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(calc(var(--a) * -1)) rotateX(calc(var(--rx) * -1)) rotateZ(calc(var(--rz) * -1))}
@keyframes o-spin{to{transform:rotateZ(360deg)}}
@keyframes o-float{0%,100%{transform:translate(-50%,-50%) translateZ(1px)}50%{transform:translate(-50%,-52%) translateZ(1px)}}

/* See-through glass bubble with the app mark inside */
.bubble{position:absolute;left:calc(var(--t)/-2);top:calc(var(--t)/-2);width:var(--t);height:var(--t);display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(150,205,255,.04) 0,rgba(110,175,255,.1) 58%,rgba(120,190,255,.3) 88%,rgba(190,225,255,.5) 100%);
  border:1px solid rgba(215,238,255,.55);
  box-shadow:inset 0 -9px 20px rgba(70,140,255,.32),inset 0 9px 16px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.06)}
.bubble .halo{display:none}
.bubble{box-shadow:inset 0 -9px 20px rgba(70,140,255,.32),inset 0 9px 16px rgba(255,255,255,.22),inset 0 0 22px color-mix(in srgb,var(--c) 38%,transparent)}
.bubble::before{content:'';position:absolute;left:15%;top:9%;width:42%;height:24%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));transform:rotate(-28deg)}
.bubble::after{content:'';position:absolute;inset:7%;border-radius:50%;border:2px solid transparent;border-bottom-color:rgba(255,255,255,.34);border-right-color:rgba(255,255,255,.2);transform:rotate(-8deg)}
.bubble svg{position:relative;z-index:1;width:54%;height:54%}
.bubble-t b{position:relative;z-index:1;display:block;padding:0 6px;color:#fff;font:700 calc(var(--t)*.19)/1.12 Inter,Arial,sans-serif;letter-spacing:-.01em;text-align:center;text-shadow:0 2px 6px rgba(0,10,40,.6);overflow-wrap:normal;word-break:keep-all}
.bubble-t{border-color:color-mix(in srgb,var(--c) 55%,#fff 45%)}
.bubble-s b{font-size:calc(var(--t)*.16)}

.orbit figcaption{margin-top:6px;color:#a9bad8;font-size:14px}
.orbit .motion-toggle{margin-top:14px}
body.motion-paused .orbit *{animation-play-state:paused!important}

/* Tool list + notes */
.cc-tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(32px,4vw,52px)}
.tl-cat{padding:24px;border:1px solid var(--cc-line);border-radius:18px;background:linear-gradient(165deg,rgba(15,56,128,.42),rgba(6,28,76,.58))}
.tl-cat h3{margin:0 0 14px;font-size:19px}
.tl-cat ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tl-cat li{padding:5px 12px;border:1px solid rgba(140,207,255,.28);border-radius:99px;background:rgba(95,178,255,.08);color:#dbe8fb;font-size:14px;line-height:1.3}
.tools-page .cc-note{margin-top:34px}

@media(max-width:1100px){.cc-tiles-3,.tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cc-tiles-3,.tl-grid{grid-template-columns:minmax(0,1fr)}.orbit{--s:min(98vw,640px);--t:38px}.o-item.m-hide{display:none}.bubble-t b{font-size:calc(var(--t)*.2)}.bubble-s b{font-size:calc(var(--t)*.165)}}
@media(prefers-reduced-motion:reduce){.o-spin,.o-cnt,.o-core{animation:none!important}}
.tools-page .orbit{--s:min(96vw,780px)}
.tools-page .orbit-section{padding-block:0 clamp(24px,3vw,44px)}
.tools-page .tools-hero{padding-block:clamp(26px,3.4vw,48px) 0}
.tools-page .tools-hero h1{font-size:clamp(34px,4.6vw,64px);max-width:20ch}
.tools-page .cc-tabs{margin-top:0}
@media(max-width:760px){.tools-page .orbit{--s:min(98vw,640px);--t:38px}}
.orbit figcaption{max-width:none;margin-inline:auto;text-align:center}
.orbit.is-offscreen *{animation-play-state:paused!important}

.tools-page .orbit-section{margin-top:0}
.tools-page .tools-hero{position:relative;z-index:3}
.orbit figcaption{color:#cbd8ee}