/* Public homepage shell, measured against sanniaokeji.com on 2026-09-13.
   Isolated header/footer rules; the concept's content and effects stay local. */
:root{--live-shell:min(1440px,calc(100vw - 56px));--live-font:"PingFang SC","Noto Sans SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif}
main .wrap{width:var(--live-shell);max-width:1440px;margin-inline:auto}
.shell{width:var(--live-shell);margin-inline:auto}
.hero{padding-top:96px;min-height:100svh}
.live-header{position:absolute;z-index:80;inset:0 0 auto;height:96px;border:0;background:transparent;color:#292627;font-family:var(--live-font);font-size:16px;line-height:1.65;transition:background .25s,box-shadow .25s}
.live-header.is-scrolled{position:fixed;height:76px;background:#ffffffdb;box-shadow:0 12px 40px #29262714;backdrop-filter:blur(20px) saturate(160%)}
.live-header .header-inner{display:grid;grid-template-columns:186px minmax(0,1fr) auto;align-items:center;gap:clamp(26px,3vw,54px);height:100%;max-width:1440px}
.live-header .brand{position:relative;display:block;aspect-ratio:1582/444;width:164px;min-width:164px;overflow:hidden}
.live-header .brand .brand-logo{position:absolute;display:block;top:0;left:0;width:151.71%;max-width:none;height:auto;transform:translate(-17.04%,-37.67%)}
.live-header .site-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(19px,2vw,33px);height:100%;white-space:nowrap}
.live-header .site-nav>a{display:inline-flex;align-items:center;position:relative;height:100%;color:#3e3a39;font:600 16px/1.65 "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;letter-spacing:0;transition:color .2s}
.live-header .site-nav>a:hover,.live-header .site-nav>a:focus-visible,.live-header .site-nav>a.is-current{color:#009fe8}
.live-header .site-nav>a.is-current:before{position:absolute;bottom:24px;left:50%;width:5px;height:5px;border-radius:50%;background:#009fe8;content:"";transform:translateX(-50%)}
.live-header .header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:0;border-radius:999px;color:white;background:#292627;font-size:13px;font-weight:650;letter-spacing:.02em;transition:background .2s,transform .2s}
.live-header .header-cta b{font-weight:700;margin-left:3px}
.live-header .header-cta:hover,.live-header .header-cta:focus-visible{color:white;background:#009fe8;transform:translateY(-2px)}
.live-header .nav-toggle{display:none}
.live-header .nav-close-label{display:none}
.live-header .nav-toggle.is-open .nav-open-label{display:none}
.live-header .nav-toggle.is-open .nav-close-label{display:inline}

.live-footer{position:relative;overflow:hidden;isolation:isolate;color:#d4e2e8;background:#07151c;font:16px/1.65 var(--live-font)}
.live-footer:before{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#87d0f409 1px,transparent 1px),linear-gradient(90deg,#87d0f409 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,#000,transparent 76%);content:""}
.live-footer:after{position:absolute;z-index:-1;top:-330px;right:-260px;width:720px;height:720px;border:1px solid #87d0f41f;border-radius:50%;box-shadow:0 0 0 95px #009fe806,0 0 0 190px #009fe804;content:""}
.live-footer .shell{position:relative;z-index:1}
.live-footer .footer-v2-directory{display:grid;grid-template-columns:minmax(270px,1.16fr) minmax(170px,.62fr) minmax(170px,.62fr) minmax(270px,.92fr);gap:clamp(38px,6vw,90px);padding:clamp(58px,6vw,82px) 0;border-bottom:1px solid #ffffff1f}
.live-footer .footer-v2-brand-block{max-width:360px}
.live-footer .footer-v2-logo{display:flex;align-items:center;justify-content:flex-start;gap:15px;width:auto;height:auto;background:transparent}
.live-footer .footer-v2-logo img{position:static;display:block;width:60px;min-width:60px;max-width:60px;height:60px;padding:0;object-fit:contain;filter:none;transform:none}
.live-footer .footer-v2-word{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.live-footer .footer-v2-word b{color:#fff;font-size:22px;font-weight:720;letter-spacing:.02em}
.live-footer .footer-v2-word small{margin-top:5px;color:#87d0f4;font:700 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;white-space:nowrap}
.live-footer .footer-v2-brand-block>p{max-width:345px;margin:29px 0 0;color:#b8c9cf;font-size:15px;line-height:1.85}
.live-footer .footer-v2-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}
.live-footer .footer-v2-tags span{padding:7px 9px;border:1px solid #87d0f429;border-radius:999px;color:#a5bec9;font:700 10px/1.65 Arial,sans-serif;letter-spacing:.06em}
.live-footer .footer-v2-column{display:flex;flex-direction:column;align-items:flex-start}
.live-footer .footer-v2-column>p,.live-footer .footer-v2-contact>p:first-child{margin:0 0 24px;color:#87d0f4;font:600 12px/1.5 Arial,sans-serif;letter-spacing:.1em}
.live-footer .footer-v2-column>a{position:relative;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:9px;width:100%;min-height:48px;border-bottom:1px solid #ffffff14;color:#e0e9ed;font-size:15px;font-weight:500;line-height:1.6;transition:color .2s,padding-left .2s,border-color .2s}
.live-footer .footer-v2-column>a>span{color:#8aa4af;font:11px/1.6 Arial,sans-serif;letter-spacing:.04em}
.live-footer .footer-v2-column>a:after{position:absolute;right:0;color:#466773;content:"↗";opacity:0;transform:translate(-5px,5px);transition:opacity .2s,transform .2s}
.live-footer .footer-v2-column>a:hover,.live-footer .footer-v2-column>a:focus-visible{padding-left:5px;border-color:#87d0f43d;color:#87d0f4}
.live-footer .footer-v2-column>a:hover:after,.live-footer .footer-v2-column>a:focus-visible:after{opacity:1;transform:none}
.live-footer .footer-v2-contact{font-style:normal}
.live-footer .footer-v2-contact>a{display:block;width:max-content;max-width:100%}
.live-footer .footer-v2-phone{color:#d4e2e8;font:700 clamp(23px,2.2vw,32px)/1.65 Arial,sans-serif;letter-spacing:-.035em}
.live-footer .footer-v2-mail{margin-top:9px;color:#87d0f4;font:14px/1.65 Arial,sans-serif}
.live-footer .footer-v2-contact-address{max-width:330px;margin:31px 0 0;color:#b8c9cf;font-size:14px;line-height:1.8}
.live-footer .footer-v2-contact>small{display:block;margin-top:17px;color:#b8c9cf;font-size:14px;line-height:1.8;letter-spacing:0}
.live-footer .footer-v2-contact>a:hover,.live-footer .footer-v2-contact>a:focus-visible{color:#fff}
.live-footer .footer-v2-signature{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;padding:clamp(42px,5vw,70px) 0 clamp(34px,4vw,52px);overflow:hidden;border-bottom:1px solid #ffffff1f}
.live-footer .footer-v2-signature>span{display:block;margin:0 0 -.14em -.055em;color:#87d0f41f;font-family:"Arial Black",Arial,sans-serif;font-size:clamp(92px,14.6vw,222px);font-weight:900;letter-spacing:-.09em;line-height:.72;white-space:nowrap}
.live-footer .footer-v2-signature>b{padding-bottom:4px;color:#65818d;font:700 10px/1.65 Arial,sans-serif;letter-spacing:.18em;white-space:nowrap}
.live-footer .footer-v2-legal{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:20px 0 24px;color:#a5bac3;font-size:12px;line-height:1.7}
.live-footer .footer-v2-legal>p{margin:0}
.live-footer .footer-v2-legal>div{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:11px 22px}
.live-footer .footer-v2-legal a:hover,.live-footer .footer-v2-legal a:focus-visible{color:#87d0f4}

@media(min-width:981px) and (max-width:1600px){main .wrap{width:calc(100% - 112px);max-width:1440px}}
@media(min-width:1081px) and (max-width:1280px){.live-header .header-inner{gap:18px}.live-header .site-nav{gap:16px}.live-header .site-nav>a{font-size:15px}.live-header .header-cta{padding-inline:16px}}
@media(min-width:1101px) and (max-width:1280px){.live-footer .footer-v2-directory{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.7fr) minmax(0,1fr);gap:30px}}
@media(max-width:1100px){.live-footer .footer-v2-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.live-footer .footer-v2-brand-block{max-width:440px}.live-footer .footer-v2-contact-address{max-width:420px}}
@media(max-width:1080px){
 :root{--live-shell:min(calc(100% - 36px),1000px)}
 .live-header .header-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
 .live-header .brand{flex:0 1 auto;width:min(148px,46vw);min-width:0}
 .live-header .header-cta{display:none}
 .live-header .nav-toggle{position:relative;z-index:6;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;min-width:58px;height:40px;padding:0 14px;border:1px solid #29262729;border-radius:999px;color:#2c2928;background:#ffffffe0;font:16px/1.65 var(--live-font)}
 .live-header .site-nav{position:fixed;top:76px;right:18px;left:18px;z-index:20;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;width:auto;height:auto;max-height:calc(100dvh - 100px);overflow-y:auto;padding:16px;border:0;border-radius:22px;background:#202b30fa;box-shadow:0 28px 70px #141f2447;white-space:normal}
 .live-header .site-nav.is-open{display:flex}
 .live-header .site-nav>a{width:100%;height:auto;min-height:46px;padding:10px 14px;border-radius:12px;color:#ffffffc7;white-space:normal}
 .live-header .site-nav>a:hover,.live-header .site-nav>a:focus-visible,.live-header .site-nav>a.is-current{color:#fff;background:#ffffff14}
 .live-header .site-nav>a:before{display:none}
 .live-footer .footer-v2-directory{gap:32px 24px}
}
@media(max-width:980px){.live-header.is-scrolled{height:68px}}
@media(max-width:900px){.live-header .nav-toggle{font-size:11px}}
@media(max-width:720px){
 :root{--live-shell:calc(100vw - 32px)}
 main .wrap,.live-header .shell{width:calc(100% - 40px);max-width:none}
 .hero{min-height:0}
 .live-header .brand{width:min(132px,42vw)}
 .live-footer{font-size:15px}
 .live-footer .footer-v2-directory{width:calc(100% - 40px);grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 22px;padding:54px 0 62px}
 .live-footer .footer-v2-brand-block,.live-footer .footer-v2-contact{grid-column:1/-1;max-width:none}
 .live-footer .footer-v2-logo{gap:12px}.live-footer .footer-v2-logo img{width:48px;min-width:48px;max-width:48px;height:48px}
 .live-footer .footer-v2-word b{font-size:18px}.live-footer .footer-v2-word small{font-size:9px}
 .live-footer .footer-v2-brand-block>p{max-width:340px;font-size:14px}
 .live-footer .footer-v2-column>p{font-size:11px;margin-bottom:16px}
 .live-footer .footer-v2-column>a{grid-template-columns:20px minmax(0,1fr);gap:6px;font-size:14px}
 .live-footer .footer-v2-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:baseline}
 .live-footer .footer-v2-contact>p:first-child{grid-area:1/1/auto/-1;margin:0 0 4px;font-size:11px}
 .live-footer .footer-v2-contact .footer-v2-phone{grid-area:2/1;margin:0;font-size:22px;white-space:nowrap}
 .live-footer .footer-v2-contact .footer-v2-mail{grid-area:2/2;margin:0;font-size:14px;white-space:nowrap}
 .live-footer .footer-v2-contact .footer-v2-contact-address{grid-area:3/1/auto/-1;max-width:none;margin:3px 0 0;font-size:13px;line-height:1.85}
 .live-footer .footer-v2-contact>small{grid-area:4/1/auto/-1;margin:0;font-size:13px;line-height:1.6}
 .live-footer .footer-v2-signature{display:block;padding:47px 0 34px}.live-footer .footer-v2-signature>span{margin-bottom:-.08em;font-size:22.6vw;line-height:.8}.live-footer .footer-v2-signature>b{display:block;margin-top:25px}
 .live-footer .footer-v2-legal{align-items:flex-start;flex-direction:column;gap:13px;padding:19px 0 25px}.live-footer .footer-v2-legal>div{justify-content:flex-start;gap:8px 15px}
}
@media(max-width:420px){.live-footer .footer-v2-contact{grid-template-columns:minmax(0,1fr);row-gap:9px}.live-footer .footer-v2-contact .footer-v2-mail{grid-area:3/1}.live-footer .footer-v2-contact .footer-v2-contact-address{grid-row:4;margin-top:8px}.live-footer .footer-v2-contact>small{grid-row:5}}
@media(max-width:390px){:root{--live-shell:calc(100vw - 28px)}}
@media(prefers-reduced-motion:reduce){.live-header *,.live-footer *,.live-footer *:after{transition:none!important}}