/* A quieter atmospheric background replaces the square grid. */
body{background-image:radial-gradient(ellipse at 90% 10%,#008b9f16,transparent 47%),radial-gradient(ellipse at 5% 45%,#6850d414,transparent 48%),radial-gradient(ellipse at 65% 85%,#075a7212,transparent 45%)}
body::before{background-image:radial-gradient(circle at 20% 18%,#94d8ef44 0 1px,transparent 2px),radial-gradient(circle at 75% 38%,#a99bea33 0 1px,transparent 2px),radial-gradient(circle at 42% 75%,#94d8ef33 0 1px,transparent 2px);background-size:227px 263px,313px 347px,389px 401px;mask-image:linear-gradient(#000,transparent 90%)}
body::after{content:"";position:fixed;width:110vw;height:90vw;left:22vw;top:-48vw;border:1px solid #77bcd709;border-radius:50%;box-shadow:0 0 0 70px #77bcd703,0 0 0 170px #77bcd703;pointer-events:none;z-index:-1}
html[data-theme=light] body{background-image:radial-gradient(ellipse at 90% 10%,#37b1c518,transparent 47%),radial-gradient(ellipse at 5% 45%,#a599e418,transparent 48%)}
.offers{scroll-margin-top:22px;--dept-accent:var(--accent)}
.department-scene{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:180px;margin:16px 0 28px;padding:24px 36px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:linear-gradient(120deg,var(--panel),var(--field));isolation:isolate}
.department-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 50%,var(--dept-accent),transparent 65%);opacity:.08;z-index:-1}
.scene-copy{max-width:480px}.scene-copy p{color:var(--muted);font-size:14px;margin:8px 0}.scene-copy .scene-title{color:var(--ink);font-size:clamp(23px,3vw,32px);line-height:1.2;letter-spacing:-.7px;margin:0 0 12px}.scene-graphic{width:300px;flex-shrink:0;color:var(--dept-accent)}.scene-graphic svg{display:block;width:100%;height:auto}
html[data-theme=light] .scene-graphic{color:#37637d}
.scene-graphic svg *{transform-box:fill-box;transform-origin:center}.scene-graphic .draw{stroke-dasharray:600;stroke-dashoffset:600;animation:trace 1.5s ease-out forwards}
.scene-graphic .pulse{animation:node-light 1.6s ease-out}.scene-graphic .rise{animation:career-rise 1.3s ease-out}.scene-graphic .paint{animation:studio-paint 1.5s ease-out}.scene-graphic .bars{transform-origin:center bottom;animation:business-grow 1.3s ease-out}.scene-graphic .assemble rect{animation:kit-fit 1.1s backwards}.scene-graphic .assemble rect:nth-child(2n){animation-delay:.15s}.scene-graphic .assemble rect:nth-child(3n){animation-delay:.3s}.scene-graphic .pages{animation:study-open 1.4s ease-out}.scene-graphic .heart{animation:personal-heart 1.5s ease-out}.scene-graphic .build{animation:create-build 1.4s ease-out}.scene-graphic .compass{animation:life-direction 1.8s ease-out}.scene-graphic .wave path{animation:creator-wave 1.5s ease-out;transform-origin:center}.scene-graphic .wave path:nth-child(2n){animation-delay:.12s}.scene-graphic .play{animation:node-light 1.3s ease-out}.scene-graphic .gear{animation:tech-turn 1.8s ease-out}.scene-graphic .translate{animation:language-bridge 1.6s ease-out}.scene-graphic .points{animation:data-resolve 1.4s ease-out}.scene-graphic .rings{animation:access-expand 1.7s ease-out}
.offers .offer{animation-duration:.65s;animation-timing-function:ease-out;animation-fill-mode:backwards;animation-delay:calc(var(--order,0)*70ms);border-top:2px solid var(--dept-accent)}
.offers[data-active-department=ai] .offer{animation-name:node-light}
.offers[data-active-department=career] .offer{animation-name:career-rise}
.offers[data-active-department=studio] .offer{animation-name:studio-paint}
.offers[data-active-department=business] .offer{animation-name:business-grow;transform-origin:bottom}
.offers[data-active-department=kits] .offer{animation-name:kit-fit}
.offers[data-active-department=study] .offer{animation-name:study-open}
.offers[data-active-department=personal] .offer{animation-name:personal-heart}
.offers[data-active-department=create] .offer{animation-name:create-build}
.offers[data-active-department=life] .offer{animation-name:life-arrive}
.offers[data-active-department=creator] .offer{animation-name:creator-reveal}
.offers[data-active-department=tech] .offer{animation-name:tech-lock}
.offers[data-active-department=language] .offer{animation-name:language-bridge}
.offers[data-active-department=data] .offer{animation-name:data-resolve}
.offers[data-active-department=accessibility] .offer{animation-name:access-expand}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes node-light{from{opacity:0;filter:brightness(1.8)}to{opacity:1;filter:brightness(1)}}
@keyframes career-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes studio-paint{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes business-grow{from{opacity:0;transform:scaleY(.88)}to{opacity:1;transform:scaleY(1)}}
@keyframes kit-fit{from{opacity:0;transform:translate(14px,-14px) scale(.94)}to{opacity:1;transform:translate(0) scale(1)}}
@keyframes study-open{from{opacity:0;transform:perspective(700px) rotateY(-12deg)}to{opacity:1;transform:perspective(700px) rotateY(0)}}
@keyframes personal-heart{0%{opacity:0;transform:scale(.92)}65%{opacity:1;transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes create-build{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes life-direction{from{transform:rotate(-65deg)}to{transform:rotate(0)}}
@keyframes life-arrive{from{opacity:0;transform:translate(-18px,12px)}to{opacity:1;transform:translate(0)}}
@keyframes creator-wave{0%{transform:scaleY(.3)}40%{transform:scaleY(1)}70%{transform:scaleY(.6)}100%{transform:scaleY(1)}}
@keyframes creator-reveal{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes tech-turn{from{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}
@keyframes tech-lock{from{opacity:0;transform:translateX(18px)}75%{transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}
@keyframes language-bridge{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes data-resolve{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes access-expand{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@media(max-width:700px){.department-scene{padding:24px;gap:14px;flex-direction:column;align-items:start}.scene-graphic{width:220px;align-self:center}.scene-copy .scene-title{font-size:25px}}
@media(prefers-reduced-motion:reduce){.offers .offer,.scene-graphic svg *{animation:none!important;opacity:1;transform:none;filter:none;clip-path:none}.scene-graphic .draw{stroke-dashoffset:0}}