/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;font-weight:400;line-height:1.6;color:#333;background:#F5F5F7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:#1A73E8;text-decoration:none;transition:color 0.25s ease}
a:hover{color:#FF6B35}
ul{list-style:none}
:focus-visible{outline:3px solid #FF6B35;outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}

/* === CSS Variables === */
:root{--color-orange:#FF6B35;--color-blue:#1A73E8;--color-gold:#FFD700;--color-dark:#1C1C1E;--color-light:#F5F5F7;--color-white:#FFFFFF;--color-text:#333333;--color-gray:#8E8E93;--color-border:#E0E0E0;--font-heading:'Montserrat','SF Pro Display','Helvetica Neue',Arial,sans-serif;--font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:48px;--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 8px 24px rgba(0,0,0,0.10);--shadow-lg:0 16px 48px rgba(0,0,0,0.14);--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-xxl:4rem;--max-width:1280px;--header-height:72px;--transition:0.3s cubic-bezier(0.4,0,0.2,1)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;line-height:1.2;color:var(--color-text)}
h1{font-size:3rem;letter-spacing:-0.02em}
h2{font-size:2.25rem;letter-spacing:-0.01em}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
@media(max-width:768px){h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.25rem}}

/* === Skip Link === */
.skip-link{position:absolute;top:-100%;left:var(--spacing-sm);padding:0.75rem 1.5rem;background:var(--color-orange);color:#fff;border-radius:0 0 var(--radius-sm) var(--radius-sm);z-index:10000;font-weight:700;font-size:0.95rem;transition:top 0.25s}
.skip-link:focus{top:0;outline:none}

/* === Page Container === */
.page-container{width:100%;max-width:var(--max-width);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}
@media(min-width:1024px){.page-container{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}}

/* === Site Header === */
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.05);z-index:1000;transition:background var(--transition),box-shadow var(--transition)}
.site-header.scrolled{background:rgba(255,255,255,0.98);box-shadow:0 2px 20px rgba(0,0,0,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;position:relative}

/* === Brand === */
.brand{flex-shrink:0}
.brand-link{display:flex;align-items:baseline;gap:0;font-family:var(--font-heading);font-weight:900;font-size:1.65rem;letter-spacing:-0.03em;color:var(--color-text);transition:opacity 0.25s}
.brand-link:hover{opacity:0.85;color:var(--color-text)}
.brand-main{color:var(--color-text)}
.brand-accent{color:var(--color-gold);text-shadow:0 0 1px rgba(255,215,0,0.3)}
.site-footer .brand-accent{color:var(--color-gold)}

/* === Navigation === */
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:0.25rem}
.nav-link{display:inline-block;padding:0.5rem 1rem;font-family:var(--font-body);font-weight:500;font-size:0.95rem;color:var(--color-blue);border-radius:var(--radius-full);transition:background var(--transition),color var(--transition);position:relative}
.nav-link::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:3px;background:var(--color-orange);border-radius:3px;transition:width var(--transition)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{width:60%}
.nav-link:hover{background:rgba(255,107,53,0.08);color:var(--color-orange)}
.nav-link[aria-current="page"]{color:var(--color-orange);font-weight:600}

/* === Nav Toggle (Mobile) === */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:8px;gap:5px;border-radius:var(--radius-sm);transition:background 0.2s}
.nav-toggle:hover{background:rgba(0,0,0,0.05)}
.nav-toggle-bar{display:block;width:26px;height:3px;background:var(--color-text);border-radius:3px;transition:transform var(--transition),opacity var(--transition)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

/* === Mobile Nav Responsive === */
@media(max-width:768px){
  .nav-toggle{display:flex}
  .main-nav{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:stretch;padding:var(--spacing-lg) var(--spacing-md);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity 0.35s ease,visibility 0.35s ease,transform 0.35s ease;overflow-y:auto;z-index:999}
  .main-nav[data-open]{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-list{flex-direction:column;gap:0.5rem;width:100%}
  .nav-link{display:block;padding:1rem 1.25rem;font-size:1.2rem;border-radius:var(--radius-md);text-align:center;border:1px solid transparent}
  .nav-link:hover{background:rgba(255,107,53,0.08);border-color:rgba(255,107,53,0.15)}
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{background:rgba(255,107,53,0.08);border-color:var(--color-orange)}
}

/* === Scroll Progress === */
.scroll-progress{position:fixed;top:var(--header-height);left:0;right:0;height:4px;background:transparent;z-index:999;pointer-events:none}
.scroll-progress::after{content:'';display:block;width:0;height:100%;background:linear-gradient(90deg,var(--color-orange),var(--color-gold));border-radius:0 4px 4px 0;transition:width 0.1s linear}

/* === Site Footer === */
.site-footer{background:var(--color-dark);color:rgba(255,255,255,0.85);padding:var(--spacing-xxl) 0 0;margin-top:var(--spacing-xxl)}
.footer-inner{width:100%;max-width:var(--max-width);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:var(--spacing-xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid rgba(255,255,255,0.10)}
.footer-brand{font-family:var(--font-heading);font-weight:900;font-size:1.5rem;margin-bottom:var(--spacing-sm)}
.footer-trust{font-size:0.95rem;line-height:1.7;color:rgba(255,255,255,0.65);max-width:320px}
.footer-heading{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--spacing-sm)}
.footer-links{display:flex;flex-direction:column;gap:0.6rem}
.footer-link{color:rgba(255,255,255,0.7);font-size:0.95rem;transition:color 0.25s,padding-left 0.25s}
.footer-link:hover{color:var(--color-orange);padding-left:4px}
.footer-contact-list{display:flex;flex-direction:column;gap:0.75rem}
.footer-contact-item{font-size:0.95rem;color:rgba(255,255,255,0.7)}
.footer-contact-item a{color:rgba(255,255,255,0.85);transition:color 0.25s}
.footer-contact-item a:hover{color:var(--color-orange)}
.footer-contact-email::before{content:'✉ ';color:var(--color-gold)}
.footer-contact-phone::before{content:'☏ ';color:var(--color-gold)}
.footer-contact-address::before{content:'⌂ ';color:var(--color-gold)}
.footer-contact-note{font-size:0.85rem;color:rgba(255,255,255,0.5);margin-top:var(--spacing-sm);line-height:1.6}
.footer-bottom{padding:var(--spacing-md) 0}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);font-size:0.85rem;color:rgba(255,255,255,0.5)}
.footer-icp{order:1}
.footer-copyright{order:2}
@media(max-width:768px){
  .footer-main{grid-template-columns:1fr;gap:var(--spacing-lg);text-align:center}
  .footer-trust{margin:0 auto}
  .footer-links{align-items:center}
  .footer-contact-list{align-items:center}
  .footer-bottom-inner{justify-content:center;text-align:center}
  .footer-icp,.footer-copyright{order:0;width:100%}
}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 2rem;font-family:var(--font-body);font-weight:600;font-size:1rem;border-radius:var(--radius-full);border:none;cursor:pointer;transition:all var(--transition);min-height:48px}
.btn-primary{background:var(--color-orange);color:#fff;box-shadow:0 4px 16px rgba(255,107,53,0.30)}
.btn-primary:hover{background:#e55a2b;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,0.40)}
.btn-secondary{background:transparent;color:var(--color-blue);border:2px solid var(--color-blue)}
.btn-secondary:hover{background:var(--color-blue);color:#fff;transform:translateY(-2px)}
.btn-gold{background:var(--color-gold);color:var(--color-dark);box-shadow:0 4px 16px rgba(255,215,0,0.30)}
.btn-gold:hover{background:#e6c200;transform:translateY(-2px)}

/* === Cards === */
.card{background:var(--color-white);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}

/* === Grid === */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}
@media(max-width:768px){.grid{grid-template-columns:1fr}}
@media(min-width:769px)and(max-width:1023px){.grid{grid-template-columns:repeat(2,1fr)}}

/* === Hero Title === */
.hero-title{font-family:var(--font-heading);font-weight:900;font-size:clamp(2.5rem,6vw,4rem);line-height:1.1;letter-spacing:-0.03em;color:var(--color-text)}

/* === Color Blocks === */
.color-block{padding:var(--spacing-xl);border-radius:var(--radius-lg);min-height:200px;display:flex;align-items:center;justify-content:center}
.color-block-orange{background:var(--color-orange);color:#fff}
.color-block-blue{background:var(--color-blue);color:#fff}
.color-block-gold{background:var(--color-gold);color:var(--color-dark)}

/* === Content Area === */
.content-area{max-width:800px;margin:0 auto;padding:var(--spacing-xl) var(--spacing-md)}
.content-area p{margin-bottom:1.25rem;font-size:1.0625rem;line-height:1.75}

/* === Scroll Top Button === */
.scroll-top-btn{position:fixed;bottom:2rem;right:2rem;width:52px;height:52px;border-radius:50%;background:var(--color-orange);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,107,53,0.35);opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity 0.4s ease,visibility 0.4s ease,transform 0.4s ease,background 0.25s;z-index:900}
.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top-btn:hover{background:#e55a2b;transform:translateY(-4px);box-shadow:0 8px 28px rgba(255,107,53,0.45)}
.scroll-top-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.5}
@media(prefers-reduced-motion:reduce){.scroll-top-btn{transition:none!important;transform:none!important}}

/* === Breadcrumbs (placeholder) === */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem;padding:var(--spacing-sm) 0;font-size:0.9rem;color:var(--color-gray)}
.breadcrumbs a{color:var(--color-blue)}
.breadcrumbs a:hover{color:var(--color-orange)}
.breadcrumbs .current{color:var(--color-gray);font-weight:500}

/* === Image Container Base === */
.img-container{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--color-light)}
.img-container img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.img-container:hover img{transform:scale(1.04)}
.img-container .img-placeholder{display:flex;align-items:center;justify-content:center;min-height:200px;background:linear-gradient(135deg,var(--color-light),#e8e8ed);color:var(--color-gray);font-size:0.9rem}

/* === Utility === */
.text-center{text-align:center}
.text-gold{color:var(--color-gold)}
.text-orange{color:var(--color-orange)}
.text-blue{color:var(--color-blue)}
.text-gray{color:var(--color-gray)}
.mt-sm{margin-top:var(--spacing-sm)}
.mt-md{margin-top:var(--spacing-md)}
.mt-lg{margin-top:var(--spacing-lg)}
.mt-xl{margin-top:var(--spacing-xl)}
.mb-sm{margin-bottom:var(--spacing-sm)}
.mb-md{margin-bottom:var(--spacing-md)}
.mb-lg{margin-bottom:var(--spacing-lg)}
.mb-xl{margin-bottom:var(--spacing-xl)}
.p-sm{padding:var(--spacing-sm)}
.p-md{padding:var(--spacing-md)}
.p-lg{padding:var(--spacing-lg)}
.flex{display:flex}
.flex-center{align-items:center;justify-content:center}
.gap-sm{gap:var(--spacing-sm)}
.gap-md{gap:var(--spacing-md)}
.gap-lg{gap:var(--spacing-lg)}

/* === Responsive Adjustments === */
@media(max-width:480px){
  :root{--header-height:62px}
  .brand-link{font-size:1.35rem}
  .btn{padding:0.6rem 1.5rem;font-size:0.9rem;min-height:44px}
  .card{padding:var(--spacing-md)}
  .scroll-top-btn{bottom:1.25rem;right:1.25rem;width:46px;height:46px}
}
@media(min-width:769px)and(max-width:1023px){
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-col-brand{grid-column:1/-1;text-align:center}
  .footer-trust{margin:0 auto}
}

/* === Reduced Motion Overrides === */
@media(prefers-reduced-motion:reduce){
  .nav-link::after{transition:none}
  .scroll-progress::after{transition:none}
  .card,.btn,.scroll-top-btn{transition:none!important}
  .card:hover,.btn:hover,.scroll-top-btn:hover{transform:none!important}
  .img-container img{transition:none}
  .img-container:hover img{transform:none}
  .footer-link:hover{padding-left:0}
}

/* === Focus Visible for All Interactive === */
a:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible,.scroll-top-btn:focus-visible{outline:3px solid var(--color-orange);outline-offset:2px;border-radius:var(--radius-sm)}
.skip-link:focus-visible{outline:3px solid #fff;outline-offset:-3px}