.hero{position:relative;overflow:hidden;background:#07111f}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 36%,rgba(30,155,255,.25),transparent 27%),radial-gradient(circle at 18% 82%,rgba(34,211,153,.12),transparent 25%),linear-gradient(135deg,#07111f,#0b2038 55%,#081522)}
.hero:after{content:"YOHU";position:absolute;right:-.03em;bottom:-.22em;font-size:min(31vw,440px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);pointer-events:none}
.hero-copy:before{content:"";position:absolute;width:240px;height:1px;left:-90px;top:-32px;background:linear-gradient(90deg,transparent,#69c8ff,transparent);box-shadow:0 0 24px #48b8ff;animation:scan-line 5s ease-in-out infinite}.hero .btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.hero .btn:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(70,178,255,.22)}.hero .btn:after{content:"";position:absolute;inset:-2px auto -2px -45%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .55s}.hero .btn:hover:after{left:115%}
.hero-inner{position:relative;z-index:1;min-height:680px}.hero h1{letter-spacing:0}.hero h1 em{display:inline-block;background:linear-gradient(90deg,#8bd3ff,#77f2c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stage{position:relative;height:500px;display:grid;place-items:center;perspective:1100px}.orbit{position:absolute;border:1px solid rgba(138,204,255,.2);border-radius:50%;animation:orbit-spin 22s linear infinite}.orbit.one{width:410px;height:410px;transform:rotateX(66deg)}.orbit.two{width:330px;height:330px;transform:rotateX(66deg) rotateZ(52deg);animation-direction:reverse;animation-duration:16s}
.stage-core{position:relative;z-index:3;width:190px;height:190px;border-radius:30%;padding:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 70px rgba(61,173,255,.18);backdrop-filter:blur(20px);animation:icon-float 5s ease-in-out infinite}.stage-core img{width:100%;height:100%;border-radius:25%}.satellite{position:absolute;z-index:4;width:76px;height:76px;border-radius:23%;box-shadow:0 18px 45px rgba(0,0,0,.38);animation:icon-float 4.6s ease-in-out infinite}.satellite.s1{left:3%;top:18%;animation-delay:-1s}.satellite.s2{right:4%;top:9%;animation-delay:-2.2s}.satellite.s3{right:0;bottom:18%;animation-delay:-.5s}.satellite.s4{left:8%;bottom:9%;animation-delay:-3s}.stage-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#9fb7cf;font-size:11px;letter-spacing:.16em}
@keyframes icon-float{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-16px) rotate(-2deg)}}@keyframes orbit-spin{to{transform:rotateX(66deg) rotateZ(360deg)}}
@keyframes scan-line{0%,100%{transform:translateX(0);opacity:.25}50%{transform:translateX(330px);opacity:1}}
.catalog .feature{position:relative;isolation:isolate;border:0;background:linear-gradient(135deg,#fff,#f4f9ff);box-shadow:0 30px 90px rgba(19,49,82,.15)}.catalog .feature:before{content:"";position:absolute;inset:0 50% 0 0;background:radial-gradient(circle at center,rgba(47,145,235,.18),transparent 58%);z-index:-1}.feature-media{background:transparent}.feature-media img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.catalog .feature:hover .feature-media img{transform:scale(1.06) rotate(-3deg)}
.card{position:relative;overflow:hidden;border-color:rgba(21,56,91,.09);transition:transform .35s,box-shadow .35s}.card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent,#2b83e6);transform:scaleX(0);transform-origin:left;transition:transform .35s}.card:after{content:"";position:absolute;width:170px;height:170px;right:-90px;top:-100px;border-radius:50%;background:color-mix(in srgb,var(--accent,#2b83e6) 13%,transparent);transition:transform .4s}.card:hover{transform:translateY(-9px);box-shadow:0 28px 65px rgba(18,45,77,.16)}.card:hover:before{transform:scaleX(1)}.card:hover:after{transform:scale(1.35)}.card img{position:relative;z-index:1;transition:transform .35s}.card:hover img{transform:scale(1.08) rotate(-4deg)}.card-link{display:flex;justify-content:space-between;align-items:center}.card-link span{font-size:19px;transition:transform .25s}.card:hover .card-link span{transform:translateX(5px)}
.card:nth-child(1){--accent:#ff5e67}.card:nth-child(2){--accent:#34a7ff}.card:nth-child(3){--accent:#7b8cff}.card:nth-child(4){--accent:#ff6f91}.card:nth-child(5){--accent:#39c5ff}.card:nth-child(6){--accent:#ff9a4d}.card:nth-child(7){--accent:#41d18b}.card:nth-child(8){--accent:#a993ff}.card:nth-child(9){--accent:#ffc94d}
.contact-band{position:relative;overflow:hidden;background:#07111f;color:#fff;padding:96px 0}.contact-band:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 50%,rgba(39,144,255,.28),transparent 28%),radial-gradient(circle at 85% 60%,rgba(46,225,165,.17),transparent 24%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.035) 35.1%,rgba(255,255,255,.035) 50%,transparent 50.1%);background-size:auto,auto,70px 70px}.contact-inner{position:relative;width:min(1220px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:80px;align-items:center}.contact-band .kicker{color:#77ddba}.contact-band h2{font-size:clamp(36px,5vw,66px);line-height:1.08;letter-spacing:0;margin:10px 0 18px}.contact-band p{max-width:610px;color:#9fb4c9;line-height:1.8;margin:0}.contact-mail{display:inline-flex;align-items:center;gap:16px;min-height:72px;margin-top:30px;padding:0 24px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.075);box-shadow:0 24px 65px rgba(0,0,0,.3);backdrop-filter:blur(18px);font-weight:750;transition:transform .3s,border-color .3s,box-shadow .3s}.contact-mail:before{content:"@";display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#3ba8ff,#47dea8);color:#07111f;font-size:21px;font-weight:900}.contact-mail:hover{transform:translateY(-5px);border-color:#71d9b4;box-shadow:0 26px 70px rgba(48,190,165,.2)}.wechat-card{position:relative;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045));box-shadow:0 35px 90px rgba(0,0,0,.4),0 0 60px rgba(62,214,130,.09);backdrop-filter:blur(24px);transform:rotate(1.5deg);transition:transform .4s,box-shadow .4s}.wechat-card:hover{transform:rotate(0) translateY(-8px);box-shadow:0 42px 100px rgba(0,0,0,.48),0 0 80px rgba(62,214,130,.16)}.wechat-head{display:flex;align-items:center;gap:13px;padding:2px 2px 15px}.wechat-head strong,.wechat-head small{display:block}.wechat-head strong{font-size:16px}.wechat-head small{margin-top:3px;color:#91a9bd;font-size:11px}.wechat-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#16c267;color:#fff;font-size:13px;font-weight:800;box-shadow:0 10px 30px rgba(22,194,103,.3)}.wechat-qr{overflow:hidden;border-radius:15px;background:#fff;aspect-ratio:520/698}.wechat-qr img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s}.wechat-card:hover .wechat-qr img{transform:scale(1.025)}.wechat-card>p{margin:13px 0 0;text-align:center;color:#9eb4c7;font-size:12px;letter-spacing:.08em}
body.detail-page{--accent:#4da8ff;background:#070f1b;color:#eff7ff}.detail-page .nav{color:#eaf5ff}.detail-page .hero{background:#07111f;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}.detail-page .hero:before{background:radial-gradient(circle at 20% 45%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 25%),radial-gradient(circle at 80% 30%,rgba(62,184,255,.18),transparent 30%),linear-gradient(135deg,#07101d,#0b1929)}.detail-page .hero img{position:relative;animation:icon-float 5s ease-in-out infinite;box-shadow:0 35px 100px rgba(0,0,0,.52),0 0 85px color-mix(in srgb,var(--accent) 24%,transparent)}.detail-page .hero-inner:before{content:"";position:absolute;width:330px;height:330px;left:-36px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:50%;animation:ring-pulse 4s ease-in-out infinite}.detail-page .content{position:relative}.detail-page .content h2,.detail-page .side h3{color:#fff}.detail-page .content p,.detail-page .feature span,.detail-page footer{color:#91a8bd}.detail-page .feature{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.05);transition:transform .3s,border-color .3s}.detail-page .feature:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.detail-page .feature strong{color:#f4f9ff}.detail-page .side{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 17%,#101b29),#0c1724);border:1px solid rgba(255,255,255,.1);position:sticky;top:24px}.detail-page .side a,.detail-page .back{color:var(--accent)}.detail-page footer{border-color:rgba(255,255,255,.1)}@keyframes ring-pulse{50%{transform:scale(1.07);opacity:.5}}
@media(max-width:850px){.hero-stage{height:420px}.hero-inner{min-height:auto}.stage-core{width:160px;height:160px}.orbit.one{width:340px;height:340px}.orbit.two{width:270px;height:270px}}
@media(max-width:850px){.contact-inner{grid-template-columns:1fr;max-width:620px}.wechat-card{width:min(370px,100%);justify-self:center}.contact-mail{justify-self:start}}
@media(max-width:750px){.detail-page .hero-inner:before{width:235px;height:235px;left:-22px;top:-22px}}
@media(max-width:560px){.hero-stage{height:340px}.stage-core{width:138px;height:138px}.satellite{width:60px;height:60px}.orbit.one{width:285px;height:285px}.orbit.two{width:225px;height:225px}.stage-label{display:none}}
@media(max-width:560px){.contact-band{padding:70px 0}.contact-inner{width:calc(100% - 30px);gap:42px}.contact-mail{width:100%;padding:0 14px;font-size:14px}.wechat-card{padding:14px;border-radius:20px;transform:none}.hero-copy:before{display:none}}
.contact-band{padding:72px 0;background:#091522}.contact-band:after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-240px;border:1px solid rgba(101,198,255,.12);border-radius:50%;box-shadow:0 0 0 28px rgba(101,198,255,.025),0 0 0 56px rgba(101,198,255,.018);pointer-events:none}.contact-inner{padding:44px 48px;border:1px solid rgba(162,211,240,.16);border-radius:28px;background:linear-gradient(120deg,rgba(19,42,61,.92),rgba(8,23,36,.88));box-shadow:0 28px 80px rgba(0,0,0,.3);overflow:hidden}.contact-copy{position:relative;z-index:1}.contact-band h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:14px}.contact-band p{font-size:14px}.contact-mail{margin-top:24px;min-height:58px;padding:0 18px;border-radius:13px;background:rgba(255,255,255,.06);font-size:14px}.contact-mail:before{width:32px;height:32px;border-radius:9px;font-size:17px}.wechat-card{position:relative;z-index:1;width:184px;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.055);box-shadow:0 16px 40px rgba(0,0,0,.28);transform:none}.wechat-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.35)}.wechat-qr{width:158px;height:158px;margin:auto;border-radius:8px}.wechat-card>p{margin:10px 0 1px;color:#a8bdcc;font-size:11px}.contact-band .kicker{font-size:11px}
@media(max-width:850px){.contact-band{padding:58px 0}.contact-inner{padding:34px 28px;gap:30px}.wechat-card{justify-self:start}}
@media(max-width:560px){.contact-inner{padding:30px 20px;border-radius:22px}.wechat-card{width:174px}.wechat-qr{width:148px;height:148px}}
.catalog .feature,.catalog .card{cursor:pointer}.catalog .feature:focus-visible,.catalog .card:focus-visible{outline:3px solid #52b8ff;outline-offset:4px}.catalog .feature-link,.catalog .card-link{pointer-events:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
.contact-inner{grid-template-columns:minmax(0,1fr) 190px;gap:64px}.wechat-card{width:190px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;transform:none}.wechat-card:hover{transform:none;box-shadow:none}.wechat-qr{width:180px;height:180px;aspect-ratio:1;border-radius:6px}.wechat-qr img{object-fit:cover}.wechat-card:hover .wechat-qr img{transform:none}.wechat-card>p{margin-top:10px;color:#91a9bd;font-size:12px;letter-spacing:0}
@media(max-width:850px){.contact-inner{grid-template-columns:1fr}.wechat-card{width:190px;justify-self:start}}
@media(max-width:560px){.wechat-card{width:170px}.wechat-qr{width:160px;height:160px}}
.detail-page a{text-decoration:none}.detail-page .nav{position:relative;z-index:10}.detail-page .brand,.detail-page .back{display:flex;align-items:center;text-decoration:none;transition:color .25s,opacity .25s}.detail-page .brand:hover,.detail-page .back:hover{color:#fff}.detail-page .back{padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.04)}.detail-page .back:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.section-label{margin-bottom:12px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.16em}.product-visual{position:relative;min-height:250px;margin:34px 0 54px;padding:38px;display:flex;align-items:center;gap:34px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 16%,#101d2a),#0b1622);box-shadow:0 25px 70px rgba(0,0,0,.26)}.product-visual:after{content:"YOHU";position:absolute;right:-12px;bottom:-32px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);font-size:108px;font-weight:900;line-height:1}.visual-glow{position:absolute;width:260px;height:260px;left:-40px;border-radius:50%;background:color-mix(in srgb,var(--accent) 20%,transparent);filter:blur(45px)}.product-visual img{position:relative;z-index:1;width:132px;height:132px;border-radius:28%;box-shadow:0 18px 48px rgba(0,0,0,.38);animation:icon-float 5s ease-in-out infinite}.visual-copy{position:relative;z-index:1;display:flex;flex-direction:column}.visual-copy span,.feature-heading span{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.14em}.visual-copy strong{margin:8px 0 10px;color:#fff;font-size:28px}.visual-copy small{color:#8ea5b9}.feature-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 18px}.feature-heading h2{margin:7px 0 0}.feature-heading>b{color:rgba(255,255,255,.1);font-size:58px;line-height:.8}.detail-page .feature-list{gap:16px}.detail-page .feature{position:relative;min-height:210px;padding:24px;overflow:hidden}.detail-page .feature:after{content:"";position:absolute;right:-45px;bottom:-55px;width:120px;height:120px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:50%;transition:transform .35s}.detail-page .feature:hover:after{transform:scale(1.25)}.feature-icon{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.feature-icon i{position:relative;display:block;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}.feature-icon i:before,.feature-icon i:after{content:"";position:absolute;background:var(--accent)}.feature-icon i:before{width:16px;height:2px;left:12px;top:19px}.feature-icon i:after{width:2px;height:16px;left:19px;top:12px}.feature-icon b{color:rgba(255,255,255,.2);font-size:13px}.detail-page .feature em{display:block;margin-top:18px;color:var(--accent);font-size:9px;font-style:normal;font-weight:800;letter-spacing:.14em}.detail-page .side{padding:30px}.detail-page .side:before{content:"APP STORE";display:block;margin-bottom:17px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.15em}.detail-page .side a{padding:13px 0;border-top:1px solid rgba(255,255,255,.09);transition:padding-left .25s,color .25s}.detail-page .side a:hover{padding-left:6px;color:#fff}
@media(max-width:750px){.product-visual{min-height:220px;padding:28px;gap:23px}.product-visual img{width:100px;height:100px}.visual-copy strong{font-size:22px}.detail-page .back{padding:8px 10px}.detail-page .brand span{display:none}}
@media(max-width:480px){.product-visual{align-items:flex-start;flex-direction:column}.detail-page .feature{min-height:190px}.visual-copy small{line-height:1.6}}
.detail-page .feature-icon i{font-style:normal;color:var(--accent);font-size:20px;text-align:center;line-height:40px}.detail-page .feature-icon i:before,.detail-page .feature-icon i:after{content:none}.detail-page .feature-1{--accent:#5ab0ff}.detail-page .feature-2{--accent:#a98cff;transform:translateY(12px)}.detail-page .feature-3{--accent:#49d7a1}.detail-page .feature-4{--accent:#ffb85c;transform:translateY(-6px)}.detail-page .feature-2:hover{transform:translateY(7px)}.detail-page .feature-4:hover{transform:translateY(-11px)}.detail-page .feature-1:before{content:"BROWSE"}.detail-page .feature-2:before{content:"SCAN"}.detail-page .feature-3:before{content:"SAVE"}.detail-page .feature-4:before{content:"LOCK"}.detail-page .feature:before{position:absolute;right:22px;top:23px;color:color-mix(in srgb,var(--accent) 42%,transparent);font-size:9px;font-weight:800;letter-spacing:.15em}.detail-page .feature-2 .feature-icon i{border-radius:50%}.detail-page .feature-3 .feature-icon i{border-radius:8px 16px 8px 16px}.detail-page .feature-4 .feature-icon i{border-radius:50% 50% 12px 12px}.detail-page .feature-1:after{right:-45px;bottom:-55px}.detail-page .feature-2:after{right:auto;left:-55px;bottom:-65px}.detail-page .feature-3:after{right:-20px;bottom:-85px;border-radius:20px;transform:rotate(22deg)}.detail-page .feature-4:after{right:-60px;bottom:-30px;border-radius:50% 10% 50% 50%}
@media(max-width:750px){.detail-page .feature-2,.detail-page .feature-4{transform:none}.detail-page .feature-2:hover,.detail-page .feature-4:hover{transform:translateY(-5px)}}
.detail-page .feature-list{align-items:stretch}.detail-page .feature,.detail-page .feature-1,.detail-page .feature-2,.detail-page .feature-3,.detail-page .feature-4{height:100%;transform:none}.detail-page .feature:hover,.detail-page .feature-1:hover,.detail-page .feature-2:hover,.detail-page .feature-3:hover,.detail-page .feature-4:hover{transform:translateY(-5px)}.detail-page .feature em{display:none}
.detail-page .feature:before{content:attr(data-label)!important;text-transform:uppercase}.product-health .product-visual{background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 19%,#10202a),#0a1720)}.product-time .product-visual{background:linear-gradient(130deg,#251618,#111a25)}.product-time .product-visual:after{content:"TIME"}.product-privacy .product-visual{background:linear-gradient(130deg,#121a2c,#090f19)}.product-privacy .product-visual:after{content:"PRIVATE";font-size:82px}.product-outdoor .product-visual{background:linear-gradient(130deg,#10271e,#0a1820)}.product-outdoor .product-visual:after{content:"ROUTE";font-size:88px}.product-tool .product-visual{background:linear-gradient(130deg,#252016,#111923)}.product-tool .product-visual:after{content:"TOOLS";font-size:88px}.product-time .feature-1{--accent:#ff6b63}.product-time .feature-2{--accent:#ffb84c}.product-time .feature-3{--accent:#df78ff}.product-time .feature-4{--accent:#62a8ff}.product-health .feature-1{--accent:#51d8a5}.product-health .feature-2{--accent:#52b5ff}.product-health .feature-3{--accent:#ff8e75}.product-health .feature-4{--accent:#b18cff}.product-privacy .feature-1{--accent:#768cff}.product-privacy .feature-2{--accent:#b27aff}.product-privacy .feature-3{--accent:#4bc8d9}.product-privacy .feature-4{--accent:#ffb657}.product-outdoor .feature-1{--accent:#4fd391}.product-outdoor .feature-2{--accent:#ff6d7c}.product-outdoor .feature-3{--accent:#55b8ff}.product-outdoor .feature-4{--accent:#ffb34f}.product-tool .feature-1{--accent:#ffc34f}.product-tool .feature-2{--accent:#ff805f}.product-tool .feature-3{--accent:#52b7ff}.product-tool .feature-4{--accent:#9c8cff}
