.brand-mark{width:38px;height:38px;display:block;filter:drop-shadow(0 5px 9px #06152f20)}
.brand-name{font-weight:900;letter-spacing:-1.2px}.brand-pi{color:var(--green)}.brand-period{color:var(--orange)}
.hero{gap:clamp(24px,4vw,58px)}
.hero-art{min-height:410px;background:radial-gradient(ellipse at 76% 45%,#24664a 0,#06152f 54%,#123628 100%);isolation:isolate}
.hero-art:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 46%,#d6f56a12,transparent 30%);pointer-events:none}
.art-grid{opacity:.55;background-size:38px 38px;mask-image:radial-gradient(ellipse at 55% 50%,#000 4%,transparent 82%)}
.art-top{letter-spacing:.12em;font-weight:800;font-size:10px;color:#e1eadd}
.art-top .art-step{color:#d6f56a;letter-spacing:.04em}
.route-stage{position:absolute;inset:58px 18px 46px;z-index:1}
.route-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-line{fill:none;stroke:#d6f56a8a;stroke-width:2;stroke-dasharray:5 9;stroke-linecap:round;animation:route-dash 9s linear infinite}
.route-halo{fill:none;stroke:#ffffff22;stroke-width:1}
.route-beacon{fill:#d6f56a;filter:drop-shadow(0 0 8px #d6f56a)}
.route-card{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;min-width:174px;padding:12px 14px;border:1px solid #ffffffd9;border-radius:15px;background:#fffefa;color:#18261e;box-shadow:0 17px 38px #071a104d}
.route-card strong{display:block;font-size:12px;line-height:1.25}
.route-card small{display:block;margin-top:4px;color:#788178;font-size:10px;white-space:nowrap}
.route-glyph{width:33px;height:33px;flex:none;display:grid;place-items:center;border-radius:10px;background:#e8f2d5;color:#195c40;font-size:16px;font-weight:850}
.route-task{left:1%;top:8%;transform:rotate(-4deg);animation:float-card 5.2s ease-in-out infinite}
.route-source{right:0;top:16%;transform:rotate(3deg);animation:float-card 5.8s ease-in-out -1.3s infinite}
.route-result{left:16%;bottom:3%;transform:rotate(2deg);animation:float-card 6.1s ease-in-out -2.1s infinite}
.mini-art{position:absolute;z-index:1;width:122px;height:91px;padding:10px 11px;border:1px solid #ffffffb5;border-radius:15px;background:linear-gradient(145deg,#fffefa,#f0efe7);box-shadow:0 18px 34px #04180f45;color:#26352b;transform-style:preserve-3d}
.mini-label{display:block;color:#677368;font-size:8px;font-weight:900;letter-spacing:.12em}
.mini-art svg{display:block;width:100%;height:56px;margin-top:4px;overflow:visible}
.mini-art svg path{fill:none;stroke:#879287;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini-art svg circle{fill:#91ad83}
.mini-art svg .code-accent{stroke:#d97554}.mini-art svg .doc-accent{stroke:#7e98c1}.mini-art svg .chart-accent{stroke:#df7958;stroke-width:3}.mini-art svg .chart-dot{fill:#df7958}
.mini-code{left:39%;top:1%;width:112px;height:82px;rotate:-7deg;animation:float-art 6s ease-in-out -1.6s infinite}
.mini-doc{right:0;bottom:8%;rotate:6deg;animation:float-art 6.8s ease-in-out -.7s infinite}
.mini-chart{display:none}
.route-core{position:absolute;left:46%;top:38%;z-index:3;width:108px;height:108px;display:grid;place-items:center;border:1px solid #d6f56a8a;border-radius:50%;background:#f8f7ef;box-shadow:0 0 0 12px #d6f56a0c,0 0 0 27px #ffffff08;animation:core-breathe 3.6s ease-in-out infinite}
.route-core img{width:54px;height:54px}
.route-caption{display:none}
.art-footer{position:absolute;z-index:2;left:24px;bottom:18px;color:#c5d2c5;font-size:10px;letter-spacing:.04em}
.art-footer b{color:#fff}
.hero-copy-reveal{animation:copy-arrive .75s cubic-bezier(.2,.8,.2,1) both}
.hero-art-reveal{animation:art-arrive .9s cubic-bezier(.2,.8,.2,1) .12s both}
.btn,.topic,.skill-card{transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease,background-color .22s ease}
.btn:hover,.topic:hover,.skill-card:hover{transform:translateY(-3px)}
@keyframes route-dash{to{stroke-dashoffset:-112}}
@keyframes float-card{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes float-art{0%,100%{translate:0 0;scale:1}50%{translate:0 -7px;scale:1.025}}
@keyframes core-breathe{0%,100%{box-shadow:0 0 0 10px #d6f56a0d,0 0 0 25px #ffffff07}50%{box-shadow:0 0 0 15px #d6f56a18,0 0 0 34px #ffffff0a}}
@keyframes copy-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes art-arrive{from{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:900px){.hero-art{min-height:340px}.route-stage{inset:52px 12px 40px}.route-core{left:43%;top:35%;width:92px;height:92px}.route-core img{width:46px;height:46px}.route-task{left:0}.route-source{right:0}.route-result{left:10%}}
@media(max-width:620px){.hero-art{min-height:290px}.route-stage{inset:48px 9px 38px}.route-card{min-width:142px;padding:9px 10px;gap:7px}.route-card strong{font-size:10px}.route-card small{font-size:9px}.route-glyph{width:28px;height:28px}.route-task{top:6%;left:-2%}.route-source{top:15%;right:-2%}.route-result{left:4%;bottom:2%}.mini-art{width:92px;height:70px;padding:8px 9px;border-radius:12px}.mini-art svg{height:39px;margin-top:3px}.mini-label{font-size:7px}.mini-code{display:none}.mini-doc{right:-2%;bottom:3%}.mini-chart{display:none}.route-core{left:41%;top:38%;width:78px;height:78px}.route-core img{width:40px;height:40px}.route-caption{font-size:8px;top:calc(100% + 6px)}.art-footer{left:15px;bottom:13px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.route-beacon{visibility:hidden}}

/* Full-bleed illustrated hero: a moving field of skill-shaped artifacts. */
.topbar.wrap{width:min(1700px,calc(100% - 28px));margin:12px auto 0;padding:0 18px;border:1px solid #e8e3d9;border-radius:999px;background:#ffffffeF;box-shadow:0 8px 28px #352a1a08;backdrop-filter:blur(16px);position:relative;z-index:5}
.hero{width:100%;max-width:none;min-height:max(640px,calc(100svh - 88px));margin:0;padding:60px clamp(24px,3.5vw,58px);display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden}
.hero-copy-reveal{position:relative;z-index:2;width:min(650px,52vw);padding:34px 0 54px;margin-left:0;animation:copy-arrive .8s cubic-bezier(.16,1,.3,1) both}
.hero .eyebrow{color:#563dfc;letter-spacing:.15em;font-size:11px}
.hero h1{max-width:760px;margin:25px 0 23px;font-size:clamp(56px,7.1vw,104px);line-height:.9;letter-spacing:-.075em;font-weight:850;text-wrap:balance}
.hero h1 span{color:#06152f;text-shadow:3px 4px 0 #c5c7ff;white-space:nowrap}
.hero p{max-width:560px;font-size:clamp(16px,1.45vw,19px);line-height:1.7;color:#64655f}
.hero .searchbox{max-width:590px;min-height:62px;border-radius:999px;border-color:#e3ded4;box-shadow:0 16px 38px #4c37220c;padding:8px 9px 8px 22px}
.hero .searchbox button{border-radius:999px;padding:12px 17px}
.hero .quick{max-width:590px;gap:8px;margin-top:18px}
.hero .quick button{background:#ffffffc9;border-color:#e2ddd3;border-radius:999px;padding:7px 12px;font-size:12px}
.hero-visual{position:absolute;z-index:0;inset:-8% 0 -8% 28%;overflow:hidden;pointer-events:none;mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.hero-visual::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,var(--paper) 0%,#f6f8ffed 14%,#f6f8ffb8 36%,#f6f8ff00 67%),linear-gradient(0deg,#f6f8ffaa,transparent 17%,transparent 83%,#f6f8ffaa)}
.mosaic-symbols{position:absolute;width:0;height:0;overflow:hidden}
.mosaic-wall{position:absolute;top:-8%;right:-12%;width:min(82vw,1400px);height:116%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(118px,13.8vw,206px);gap:clamp(10px,1.4vw,22px);transform:rotate(-18deg) scale(1.06);transform-origin:56% 50%;animation:mosaic-drift 28s ease-in-out infinite alternate}
.mosaic-tile{display:grid;place-items:center;min-width:0;min-height:0;border:1px solid #372f2513;border-radius:clamp(18px,2.2vw,32px);box-shadow:0 16px 38px #3c2b1c0b;animation:tile-float 7s ease-in-out infinite;translate:0 0}
.mosaic-tile svg{width:64%;height:65%;overflow:visible;fill:none;stroke:#292b27;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #fff7)}
.tile-lilac{background:#c5b8df}.tile-sage{background:#a8c8b4}.tile-coral{background:#df7656}.tile-blue{background:#80a5d3}.tile-cream{background:#e5c69c}
.mosaic-tile:nth-child(6n+1){animation-delay:-2.2s}.mosaic-tile:nth-child(6n+2){animation-delay:-4.5s}.mosaic-tile:nth-child(6n+3){animation-delay:-1.1s}.mosaic-tile:nth-child(6n+4){animation-delay:-5.6s}.mosaic-tile:nth-child(6n+5){animation-delay:-3.4s}
.motion-toggle{position:absolute;z-index:3;right:clamp(22px,4vw,64px);bottom:26px;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #ded8cb;border-radius:999px;background:#ffffffd9;color:#51574f;font-size:11px;font-weight:750;letter-spacing:.04em;backdrop-filter:blur(10px);cursor:pointer;transition:background-color .18s ease,transform .18s ease}
.motion-toggle:hover{background:#fffefa;transform:translateY(-1px)}.motion-toggle:focus-visible{outline:3px solid #563dfc;outline-offset:3px}.motion-indicator{width:7px;height:7px;border-radius:50%;background:#563dfc;box-shadow:0 0 0 3px #563dfc20}
.motion-paused .mosaic-wall,.motion-paused .mosaic-tile{animation-play-state:paused}
@keyframes mosaic-drift{from{translate:0 -12px}to{translate:12px 24px}}
@keyframes tile-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:900px){.hero{min-height:calc(100svh - 78px);padding:52px 28px}.hero-copy-reveal{width:min(620px,66vw);margin-left:0}.hero-visual{inset:-4% -10% -5% 22%;opacity:.82}.mosaic-wall{right:-20%;width:98vw;grid-auto-rows:clamp(128px,20vw,190px)}.hero-visual::after{background:linear-gradient(90deg,var(--paper) 0%,#f6f8ffe6 18%,#f6f8ff8a 46%,transparent 76%),linear-gradient(0deg,#f6f8ffb0,transparent 18%,transparent 82%,#f6f8ffb0)}}
@media(max-width:620px){.topbar.wrap{width:calc(100% - 16px);height:60px;margin-top:8px;padding:0 10px;gap:10px}.topbar .nav-right{gap:6px}.hero{min-height:calc(100svh - 68px);padding:42px 18px 54px;align-items:flex-start}.hero-copy-reveal{width:100%;padding:28px 0 22px}.hero h1{font-size:clamp(54px,15vw,76px);letter-spacing:-.075em;margin:20px 0 17px}.hero p{max-width:460px;font-size:15px;line-height:1.58;margin-bottom:18px}.hero .searchbox{min-height:56px;padding-left:15px}.hero .searchbox button{font-size:12px;padding:10px 12px}.hero .quick{max-width:440px;gap:6px;margin-top:12px}.hero .quick button{font-size:10px;padding:6px 9px}.hero-visual{inset:20% -33% -11% 5%;opacity:.66;mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 90%,transparent 100%)}.hero-visual::after{background:linear-gradient(180deg,var(--paper) 0%,#f6f8ffef 9%,#f6f8ffad 28%,#f6f8ff00 57%),linear-gradient(90deg,#f6f8ffb0,transparent 52%)}.mosaic-wall{top:4%;right:-20%;width:122vw;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(112px,33vw,150px);gap:10px;transform:rotate(-18deg) scale(1.03);transform-origin:center}.mosaic-tile{border-radius:20px}.mosaic-tile svg{width:65%;height:62%;stroke-width:2.4}.motion-toggle{right:14px;bottom:14px;padding:8px 10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.mosaic-wall,.mosaic-tile,.hero-copy-reveal{animation:none!important;translate:none!important}.mosaic-tile{transform:none!important}.motion-toggle{display:none}}

/* Square cards, alternating isometric lanes, and integrated pi details. */
.hero-visual{inset:-6% -4% -8% 28%}
.mosaic-wall{--wall-width:940px;--mosaic-gap:18px;--tile-h:calc((var(--wall-width) - var(--mosaic-gap)*3)/4);position:absolute;left:73%;top:50%;right:auto;width:var(--wall-width);height:calc((var(--tile-h) + var(--mosaic-gap))*12);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:var(--mosaic-gap);transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-37deg);transform-origin:center;animation:none;translate:none}
.mosaic-column{min-width:0;position:relative}
.mosaic-track{display:flex;flex-direction:column;animation:skill-conveyor 56s linear infinite;translate:none}
.mosaic-set{display:flex;flex-direction:column;gap:var(--mosaic-gap);padding-bottom:var(--mosaic-gap);flex:none}
.mosaic-tile{position:relative;height:var(--tile-h);aspect-ratio:1;flex:none;animation:none!important;translate:none;border-radius:24px;box-shadow:0 12px 22px #3c2b1c0b;padding-top:14px}
.mosaic-tile svg{width:72%;height:68%;stroke-width:2.4;filter:none}
.tile-pi{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#c7c6ff;color:#06152f}
.pi-tile-glyph{font:italic 110px/.9 Georgia,'Times New Roman',serif}.tile-pi small{font:600 14px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.08em;margin-top:8px}
@keyframes skill-conveyor{from{transform:translateY(0)}to{transform:translateY(-25%)}}
.pi-edge-row{position:absolute;left:calc(100% - var(--tile-h)*2);top:calc(50% - var(--tile-h)*2.4);display:flex;align-items:center;gap:20px;width:760px;height:72px;transform:rotate(90deg);transform-origin:0 0;color:#0924ef;pointer-events:none;background:var(--paper);box-shadow:0 0 0 12px var(--paper)}
.pi-edge-mark{flex:none;font:500 42px/58px ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.pi-edge-stream{position:relative;flex:1;height:58px;overflow:hidden;font:500 42px/58px ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;mask-image:linear-gradient(90deg,#000 90%,transparent)}
.pi-digit-chunk{position:absolute;top:0;left:0;width:32ch;white-space:nowrap;transform:translateX(calc(var(--slot)*32ch));animation:pi-number-flow 64s linear infinite}
@keyframes pi-number-flow{from{transform:translateX(96ch)}to{transform:translateX(-32ch)}}
.motion-paused .mosaic-track,.motion-paused .pi-digit-chunk,.motion-suspended .mosaic-track,.motion-suspended .pi-digit-chunk{animation-play-state:paused}
.topbar .nav a,.topbar .btn{white-space:nowrap}
@media(max-width:1280px){.topbar .top-search{display:none}.topbar .nav-right{margin-left:auto}}
@media(max-width:1100px) and (min-width:621px){.topbar .nav{gap:16px;font-size:13px}.mosaic-wall{--wall-width:900px;left:85%}}
@media(max-width:620px){.hero-visual{inset:26% -40% -15% -4%;opacity:.8}.mosaic-wall{--wall-width:720px;left:79%;top:58%;--mosaic-gap:13px;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-37deg)}.mosaic-tile{border-radius:20px}.pi-tile-glyph{font-size:84px}.tile-pi small{font-size:11px}.pi-edge-row{left:calc(100% - var(--tile-h)*2);width:640px;height:58px}.pi-edge-stream{font-size:34px}.pi-edge-mark{font-size:34px}}
@media(prefers-reduced-motion:reduce){.mosaic-track{animation:none!important;transform:translateY(-12.5%)}.pi-digit-chunk{animation:none!important;transform:translateX(calc(var(--slot)*32ch))}.mosaic-wall{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-37deg)!important}}