/* Approved AI-Friendly Hosting composition. Every AI mark is an independent asset. */
.ai-home .dragon-header{min-height:64px;width:min(1100px,calc(100% - 48px))}.ai-home header.site{border:0}.ai-home #company-name{font-size:30px;letter-spacing:-1.4px}.ai-home #navlinks{font-size:16px;gap:28px}.ai-home #navlinks .menu-branch:last-child a{border:1.5px solid #ff001a;color:#f00018;border-radius:40px;padding:9px 22px;margin-left:30px}
.ai-hero{position:relative;height:960px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 89%,#eff9ff 0,white 61%);color:#050506}.ai-hero-copy{position:relative;z-index:12;text-align:center;padding:22px 20px 0;pointer-events:none}.ai-hero-copy a{pointer-events:auto}.ai-hero h1{font-size:96px;letter-spacing:-5.5px;line-height:1.13;font-weight:800;white-space:nowrap;margin:0}.ai-hero h1 span{color:#ff0018}.ai-slogan{font-size:52px;letter-spacing:-2px;font-weight:800;line-height:1.25;margin:4px 0 1px}.ai-description{font-size:26px;line-height:1.45;color:#4b4b50;margin:0 0 15px}.ai-hero .dragon-actions{gap:20px}.ai-hero .dragon-button{min-height:64px;font-size:23px;padding:12px 34px;background:#ff0018;border:2px solid #ff0018;box-shadow:none}.ai-hero .dragon-outline{background:white;color:#101014;border-color:#101014;padding-inline:28px}.ai-scene{position:absolute;inset:0;width:1536px;left:50%;margin-left:-768px;pointer-events:none}.ai-server-stage{position:absolute;width:1180px;height:auto;left:178px;top:390px;z-index:3;max-width:none}.ai-scene .mascot-parallax{width:500px;left:518px;bottom:110px;z-index:7;transform:none}.ai-scene .mascot-float{animation:dragon-idle 6s ease-in-out infinite}.ai-orbits{position:absolute;inset:0;width:1536px;height:960px;z-index:4;filter:drop-shadow(0 0 6px #ff697a);opacity:.8}.ai-agent{position:absolute;z-index:9;margin:0;text-align:center;animation:ai-float var(--duration) ease-in-out var(--delay) infinite;--delay:0s;--lift:-13px}.ai-agent img{width:100%;height:auto;display:block;filter:drop-shadow(0 9px 7px #6d78ad12)}.ai-agent figcaption{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-1px;color:#07144d;margin-top:-4px}.ai-agent--claude{left:334px;top:224px;width:180px;--duration:5.4s;--delay:-1.1s}.ai-agent--chatgpt{left:1035px;top:240px;width:190px;--duration:6.8s;--delay:-3.2s;--lift:-18px}.ai-agent--deepseek{left:232px;top:468px;width:190px;--duration:6.2s;--delay:-2.4s}.ai-agent--gemini{left:1150px;top:456px;width:180px;--duration:4.9s;--delay:-.4s;--lift:-16px}.ai-agent--copilot{left:1045px;top:625px;width:155px;--duration:7.1s;--delay:-4.1s}.ai-speech{position:absolute;left:865px;top:353px;width:240px;z-index:10;margin:0;padding:18px 16px 22px;text-align:center;border-radius:48% 48% 42% 35%;background:linear-gradient(135deg,white,#f0faff);color:#052282;border:2px solid #d8f0ff;box-shadow:0 0 13px #53bcff69;font-family:DragonSpeech,cursive;font-size:28px;line-height:1.28;transform:rotate(-6deg)}.ai-speech:after{content:'';position:absolute;width:30px;height:26px;background:#f6fcff;left:28px;bottom:-16px;clip-path:polygon(0 0,100% 0,0 100%)}
.ai-wall{position:absolute;top:20px;width:380px;height:800px;z-index:1;overflow:hidden;border-radius:6px;mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);box-shadow:0 5px 20px #6577aa10}.ai-wall--left{left:-13px;transform:perspective(1100px) rotateY(26deg) rotateZ(2deg);transform-origin:left center}.ai-wall--right{right:-13px;transform:perspective(1100px) rotateY(-26deg) rotateZ(-2deg);transform-origin:right center}.ai-wall-track{animation:ai-gallery 48s linear infinite}.ai-wall--right .ai-wall-track{animation-direction:reverse}.ai-wall-group{display:grid;gap:14px;padding-bottom:14px}.ai-web-panel{border:7px solid #f1f3fa;border-radius:8px;overflow:hidden;background:#f1f3fa;box-shadow:0 4px 12px #45609c1a}.ai-web-panel img{display:block;width:100%;height:252px;object-fit:cover}.ai-motion-toggle{position:absolute;right:24px;bottom:20px;z-index:15;min-height:44px;padding:8px 16px;border-radius:30px;border:1px solid #d7dce7;background:#ffffffd9;color:#3e465b;font:inherit;font-size:12px;cursor:pointer}.ai-hero[data-paused=true] *,.ai-hero[data-suspended=true] *{animation-play-state:paused!important}@keyframes ai-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 var(--lift);rotate:1deg}}@keyframes ai-gallery{to{transform:translateY(-50%)}}
@media(min-width:761px) and (max-width:1300px){.ai-home .dragon-header{width:calc(100% - 48px)}.ai-home #navlinks{gap:18px}.ai-home #navlinks .menu-branch:last-child a{margin-left:0}.ai-hero{height:850px}.ai-scene{transform:scale(.84);transform-origin:center top;top:42px}.ai-hero h1{font-size:78px}.ai-slogan{font-size:42px}.ai-description{font-size:22px}.ai-hero .dragon-button{font-size:19px;min-height:56px}.ai-hero-copy{padding-top:20px}}
@media(min-width:761px) and (max-width:1000px){.ai-home #company-name{font-size:24px}.ai-home #navlinks{gap:13px;font-size:13px}.ai-home #navlinks .menu-branch:last-child a{padding:8px 12px}.ai-hero{height:770px}.ai-scene{transform:scale(.72);top:70px}.ai-hero h1{font-size:66px}.ai-slogan{font-size:36px}.ai-description{font-size:19px}}
@media(max-width:760px){.ai-home .dragon-header{width:calc(100% - 32px);padding-block:12px;gap:8px}.ai-home #company-name{font-size:26px}.ai-home #navlinks{font-size:12px;gap:8px 14px}.ai-home #navlinks .menu-branch:last-child a{font-size:11px;margin:0;padding:5px 9px}.ai-hero{height:800px}.ai-hero-copy{padding:27px 16px 0}.ai-hero h1{font-size:clamp(36px,8vw,60px);letter-spacing:-2px;white-space:normal;line-height:1.1}.ai-hero h1 span{display:block}.ai-slogan{font-size:clamp(23px,5.8vw,37px);letter-spacing:-1px;line-height:1.4;margin:9px 0 4px}.ai-description{font-size:15px;max-width:340px;margin:0 auto 16px;line-height:1.6}.ai-hero .dragon-actions{gap:10px;flex-wrap:wrap}.ai-hero .dragon-button{font-size:14px;min-height:46px;padding:10px 17px}.ai-scene{top:290px;transform:scale(.49);transform-origin:center top}.ai-wall{opacity:.38}.ai-wall--left{left:230px}.ai-wall--right{right:230px}.ai-agent--claude{left:395px;top:180px}.ai-agent--chatgpt{left:985px;top:210px}.ai-agent--deepseek{left:350px;top:420px}.ai-agent--gemini{left:1025px;top:440px}.ai-agent--copilot{left:1015px;top:650px}.ai-speech{top:315px;left:850px;width:230px;font-size:27px}.ai-motion-toggle{bottom:12px;right:16px;font-size:11px}.ai-hero .ai-scene .mascot-parallax{width:500px;left:518px;bottom:110px}}
@media(max-width:380px){.ai-hero{height:750px}.ai-scene{transform:scale(.43);top:305px}.ai-hero .dragon-button{font-size:12px;padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.ai-hero *{animation:none!important}}
.ai-scene{height:960px;bottom:auto}.ai-server-stage{top:440px}.ai-speech{left:855px;width:225px;font-size:26px}
.ai-agent figcaption{text-shadow:0 0 5px white,0 0 9px white,0 1px 3px white}.ai-agent--copilot{left:1065px}
@media(max-width:760px){.ai-hero{height:740px}.ai-scene{top:230px}.ai-agent--claude{left:410px}.ai-agent--deepseek{left:400px;width:170px}.ai-agent--gemini{left:980px;width:145px}.ai-agent--copilot{left:990px;width:145px}.ai-agent--chatgpt{left:1005px;width:165px}.ai-speech{left:805px;width:210px;top:305px;font-size:26px}}
@media(max-width:380px){.ai-hero{height:690px}.ai-scene{top:245px}}
@media(max-width:760px){.ai-speech{left:785px;width:235px;font-size:24px}}
/* Compact revision approved from the smaller concept preview. */
@media(min-width:761px){
 .ai-hero{height:870px}.ai-hero-copy{padding-top:46px}.ai-hero h1{font-size:82px;letter-spacing:-4.5px}.ai-slogan{font-size:44px}.ai-description{font-size:22px;margin-bottom:15px}.ai-hero .dragon-button{font-size:20px;min-height:56px;padding:10px 28px}
 .ai-scene{top:0;transform:none}.ai-composition{position:absolute;inset:0;width:1536px;height:960px;transform:translateY(164px) scale(.68);transform-origin:center top}.ai-wall{top:160px;height:800px}.ai-wall--left{left:100px;transform:scale(.72) perspective(1100px) rotateY(26deg) rotateZ(2deg)}.ai-wall--right{right:100px;transform:scale(.72) perspective(1100px) rotateY(-26deg) rotateZ(-2deg)}
}
@media(min-width:1001px) and (max-height:850px){
 .ai-hero{height:650px}.ai-hero-copy{padding-top:18px}.ai-hero h1{font-size:66px}.ai-slogan{font-size:35px}.ai-description{font-size:18px;margin-bottom:12px}.ai-hero .dragon-button{font-size:17px;min-height:48px;padding:8px 24px}.ai-composition{transform:translateY(123px) scale(.53)}.ai-wall{top:125px}.ai-wall--left{left:210px;transform:scale(.56) perspective(1100px) rotateY(26deg) rotateZ(2deg)}.ai-wall--right{right:210px;transform:scale(.56) perspective(1100px) rotateY(-26deg) rotateZ(-2deg)}
}
@media(min-width:761px) and (max-width:1000px){.ai-hero{height:740px}.ai-hero-copy{padding-top:28px}.ai-hero h1{font-size:60px}.ai-slogan{font-size:34px}.ai-description{font-size:18px}.ai-composition{transform:translateY(180px) scale(.55)}.ai-wall{top:190px}.ai-wall--left{left:200px;transform:scale(.53) perspective(1100px) rotateY(26deg) rotateZ(2deg)}.ai-wall--right{right:200px;transform:scale(.53) perspective(1100px) rotateY(-26deg) rotateZ(-2deg)}}
@media(max-width:760px){.ai-hero{height:660px}.ai-scene{top:250px;transform:scale(.39)}.ai-composition{position:absolute;inset:0;width:1536px;height:960px}.ai-wall{opacity:.38}.ai-motion-toggle{bottom:8px}}
@media(max-width:380px){.ai-hero{height:640px}.ai-scene{top:260px;transform:scale(.36)}}
@media(min-width:761px){.ai-wall--left{transform-origin:left top}.ai-wall--right{transform-origin:right top}}
/* Three-server composition: 10% larger than the compact version. */
.ai-center-server{position:absolute;left:608px;top:220px;width:320px;height:620px;object-fit:fill;z-index:2;max-width:none}
.ai-orbits path{stroke-dasharray:12 10;animation:ai-data-flow 2s linear infinite;stroke-linecap:round}.ai-orbits path:nth-of-type(2){animation-direction:reverse;animation-duration:2.6s}
@keyframes ai-data-flow{to{stroke-dashoffset:-44}}
@media(min-width:761px){.ai-composition{transform:translateY(120px) scale(.748)}.ai-wall--left{left:175px;transform:scale(.792) perspective(1100px) rotateY(26deg) rotateZ(2deg)}.ai-wall--right{right:175px;transform:scale(.792) perspective(1100px) rotateY(-26deg) rotateZ(-2deg)}}
@media(min-width:1001px) and (max-height:850px){.ai-composition{transform:translateY(90px) scale(.583)}.ai-wall--left{left:260px;transform:scale(.616) perspective(1100px) rotateY(26deg) rotateZ(2deg)}.ai-wall--right{right:260px;transform:scale(.616) perspective(1100px) rotateY(-26deg) rotateZ(-2deg)}}
@media(min-width:761px) and (max-width:1000px){.ai-composition{transform:translateY(145px) scale(.605)}.ai-wall--left{left:245px;transform:scale(.583) perspective(1100px) rotateY(26deg) rotateZ(2deg)}.ai-wall--right{right:245px;transform:scale(.583) perspective(1100px) rotateY(-26deg) rotateZ(-2deg)}}
@media(max-width:760px){.ai-hero{height:690px}.ai-scene{top:230px;transform:scale(.429)}}
@media(max-width:380px){.ai-hero{height:670px}.ai-scene{top:240px;transform:scale(.396)}}
@media(prefers-reduced-motion:reduce){.ai-orbits path{animation:none}}

/* Review variant: hide gallery walls and lower the central server, retaining its floor baseline. */
.ai-hero .ai-wall{display:none}.ai-center-server{top:300px;height:540px}
/* Approved pearl studio: separate white hardware, reflective floor and dimensional light. */
.ai-hero{background:#dfebf9 url('./pearl-studio-v1/background.webp') center/100% 100% no-repeat}.ai-server-stage{filter:drop-shadow(0 6px 5px #3e587a18)}.ai-center-server{filter:drop-shadow(0 5px 6px #3e587a18)}
.ai-composition::after{content:'';position:absolute;left:518px;top:835px;width:500px;height:120px;background:url('./assets/dragon-dragie-whole.webp') center bottom/500px auto no-repeat;transform:scaleY(-1);opacity:.08;filter:blur(3px);mask-image:linear-gradient(to top,#000,transparent);z-index:1;pointer-events:none}
@media(max-width:760px){.ai-hero{background-size:auto 100%;background-position:center}}
@media(min-width:761px){.ai-speech{left:825px;width:245px;font-size:24px}}
/* Tighter server grouping and another 10% illustration increase. */
@media(min-width:761px){.ai-composition{transform:translateY(78px) scale(.8228)}}
@media(min-width:1001px) and (max-height:850px){.ai-composition{transform:translateY(65px) scale(.6413)}.ai-hero{height:680px}}
@media(min-width:761px) and (max-width:1000px){.ai-composition{transform:translateY(112px) scale(.6655)}}
@media(max-width:760px){.ai-scene{top:207px;transform:scale(.4719)}.ai-hero{height:710px}}
@media(max-width:380px){.ai-scene{top:220px;transform:scale(.4356)}.ai-hero{height:690px}}
/* Approved seven-agent composition. Cursor glyph is 80% of the standard 190px mark. */
.ai-center-server{width:432px;left:552px}
.ai-agent--grok{left:120px;top:405px;width:190px;--duration:5.8s;--delay:-1.8s;--lift:-15px}
.ai-agent--cursor{left:1285px;top:405px;width:152px;--duration:7.6s;--delay:-3.7s;--lift:-12px}
.ai-agent--deepseek{left:250px;top:590px;width:190px}.ai-agent--gemini{top:560px}.ai-agent--copilot{top:675px}
.ai-orbits path:nth-of-type(3){animation-duration:3.4s}
@media(max-width:760px){.ai-agent--grok{left:360px;top:350px;width:145px}.ai-agent--cursor{left:1015px;top:370px;width:116px}.ai-agent--deepseek{left:395px;top:605px;width:155px}.ai-agent--chatgpt{left:990px;width:150px}.ai-agent--gemini{left:980px;top:530px;width:145px}.ai-agent--copilot{left:990px;top:710px;width:145px}}
@media(min-width:761px){.ai-agent--cursor{top:365px}.ai-agent--gemini{left:1200px;top:535px}.ai-agent--copilot{top:720px}}
@media(max-width:760px){.ai-agent--grok{left:400px}}
/* More visible independent movement, and one dedicated flowing connection per agent. */
.ai-agent{--lift:-27px;--tilt:8deg;animation-duration:calc(var(--duration) * .85)}
.ai-agent--chatgpt{--lift:-32px;--tilt:7deg}.ai-agent--gemini{--lift:-30px;--tilt:10deg}.ai-agent--grok{--lift:-28px;--tilt:9deg}.ai-agent--cursor{--lift:-24px;--tilt:9deg}
@keyframes ai-float{0%,100%{translate:0 4px;rotate:calc(0deg - var(--tilt))}50%{translate:0 var(--lift);rotate:var(--tilt)}}
.ai-connections--mobile{display:none}.ai-orbits{filter:none;opacity:.75}.ai-orbits path{stroke-dasharray:10 10;animation:ai-data-flow 1.8s linear infinite;stroke-width:2.5}.ai-orbits path:nth-child(even){animation-duration:2.4s}.ai-orbits path[data-agent=copilot]{animation-duration:2.1s}
@keyframes ai-data-flow{to{stroke-dashoffset:-40}}
@media(max-width:760px){.ai-connections--desktop{display:none}.ai-connections--mobile{display:inline}}
@media(prefers-reduced-motion:reduce){.ai-agent,.ai-orbits path{animation:none!important}}
/* Each connection inherits its destination agent's brand palette. */
.ai-orbits path[data-agent=claude]{stroke:#ed8b35}.ai-orbits path[data-agent=chatgpt]{stroke:#00a47c}.ai-orbits path[data-agent=grok]{stroke:#414955}.ai-orbits path[data-agent=cursor]{stroke:#6b7080}.ai-orbits path[data-agent=deepseek]{stroke:#2868f5}.ai-orbits path[data-agent=gemini]{stroke:url(#orbit-gemini)}.ai-orbits path[data-agent=copilot]{stroke:url(#orbit-copilot)}
/* Soft directional shadows keep the separate moving artwork dimensional. */
.ai-agent img{filter:drop-shadow(3px 10px 7px #233b663b) drop-shadow(0 2px 2px #172b4624)}
.ai-scene .mascot-float{filter:drop-shadow(4px 12px 9px #24456840)}
.ai-scene .mascot-parallax::before{content:'';position:absolute;width:55%;height:28px;left:25%;bottom:8px;background:radial-gradient(ellipse,#223a5c55,transparent 70%);filter:blur(5px);transform:scaleX(1.2);z-index:-1;pointer-events:none}
/* Mascot alone grows 10%, with the same baseline on its podium. */
.ai-hero .ai-scene .mascot-parallax{width:550px;left:493px;bottom:110px}.ai-composition::after{left:493px;width:550px;background-size:550px auto}
/* Small, staggered activity indicators aligned to the hardware's existing cyan lights. */
.ai-server-leds{position:absolute;inset:0;width:1536px;height:960px;z-index:5;pointer-events:none;fill:#a4f7ff}.ai-server-leds rect{filter:drop-shadow(0 0 3px #16cafa);animation:server-activity var(--led-speed,2.8s) ease-in-out var(--led-delay,0s) infinite}.ai-leds--left{--led-speed:2.8s;--led-delay:-.4s}.ai-leds--right{--led-speed:3.7s;--led-delay:-1.8s}.ai-leds--center{--led-speed:2.3s;--led-delay:-1.2s}.ai-server-leds rect:nth-child(even){animation-delay:-2.1s;animation-duration:4.1s}
@keyframes server-activity{0%,100%{opacity:.2}18%,28%{opacity:.9}45%,70%{opacity:.35}82%{opacity:.7}}
@media(prefers-reduced-motion:reduce){.ai-server-leds rect{animation:none;opacity:.45}}
/* Reduce the current 550px mascot by 5%, preserving its floor baseline. */
.ai-hero .ai-scene .mascot-parallax{width:522.5px;left:506.75px;bottom:110px}.ai-composition::after{left:506.75px;width:522.5px;background-size:522.5px auto}
/* The illustration itself is the native mouse/touch/keyboard motion control. */
.ai-motion-surface{position:absolute;inset:0;z-index:11;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;color:transparent}.ai-motion-surface[hidden]{display:none}.ai-motion-surface:focus-visible{outline-offset:-6px}
.ai-hero .dragon-button{position:relative;isolation:isolate;overflow:hidden;gap:10px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s,color .25s,border-color .25s}
.ai-hero .dragon-button::after{content:'';position:absolute;z-index:-1;top:-60%;bottom:-60%;left:-50%;width:30%;background:linear-gradient(90deg,transparent,#ffffff45,transparent);transform:skewX(-20deg);opacity:0;pointer-events:none;transition:transform .65s ease,opacity .2s}
.ai-hero .dragon-outline span[aria-hidden]{transition:transform .25s}
@media(hover:hover) and (pointer:fine){.ai-hero .dragon-button:hover{transform:translateY(-3px);box-shadow:0 10px 22px #ed142c30}.ai-hero .dragon-button:hover::after{transform:translateX(600%) skewX(-20deg);opacity:1}.ai-hero .dragon-outline:hover{background:#131c2e;color:white;border-color:#131c2e;box-shadow:0 10px 22px #17253c29}.ai-hero .dragon-outline:hover span[aria-hidden]{transform:translate(2px,-2px)}}
.ai-hero .dragon-button:active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.ai-hero .dragon-button,.ai-hero .dragon-button::after,.ai-hero .dragon-outline span[aria-hidden]{transition:none}.ai-hero .dragon-button:hover{transform:none}.ai-hero .dragon-button::after{display:none}}