/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;background:#0B1A2A;color:#FFFFFF;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid #00A88E;outline-offset:2px;border-radius:4px}

/* ===== CSS Variables ===== */
:root{--clr-primary:#00A88E;--clr-primary-dark:#007A64;--clr-accent:#FF6B35;--clr-accent-light:#FF8C5A;--clr-metal:#C0C0C0;--clr-bg-dark:#0B1A2A;--clr-bg-medium:#112B3F;--clr-text-light:#FFFFFF;--clr-text-muted:#B0BEC5;--clr-success:#4CAF50;--clr-warning:#FFC107;--clr-error:#F44336;--font-heading:'Montserrat Black','Arial Black','Helvetica Neue',Arial,sans-serif;--font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;--max-width:1280px;--header-h:64px;--nav-w:280px;--radius:6px;--glow:0 0 12px rgba(0,168,142,0.3);--transition:0.25s cubic-bezier(0.4,0,0.2,1)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}}

/* ===== Skip Link ===== */
.skip-link{position:fixed;top:-100%;left:1rem;z-index:9999;padding:0.75rem 1.5rem;background:#00A88E;color:#fff;font-weight:700;border-radius:0 0 6px 6px;transition:top 0.2s}
.skip-link:focus{top:0}

/* ===== Header ===== */
.site-header{position:relative;background:linear-gradient(135deg,#0B1A2A 0%,#112B3F 100%);border-bottom:2px solid rgba(0,168,142,0.25);z-index:100}
.header-beam{height:3px;background:linear-gradient(90deg,transparent,#00A88E 20%,#FF6B35 80%,transparent);opacity:0.6}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0 1.25rem;height:var(--header-h);gap:1rem}
.header-brand{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.logo{display:flex;align-items:center;gap:0.5rem;font-family:var(--font-heading);font-weight:900;font-size:1.5rem;color:#FFFFFF;text-shadow:0 0 18px rgba(0,168,142,0.5);letter-spacing:0.02em;position:relative}
.logo-mark{display:inline-block;width:10px;height:10px;background:#FF6B35;transform:skewX(-20deg);box-shadow:0 0 8px rgba(255,107,53,0.6)}
.logo-text{background:linear-gradient(135deg,#FFFFFF 60%,#00A88E);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tagline{display:none;font-size:0.75rem;color:var(--clr-text-muted);letter-spacing:0.08em;text-transform:uppercase;border-left:1px solid rgba(192,192,192,0.3);padding-left:0.75rem}
@media(min-width:640px){.tagline{display:inline-block}}

/* Navigation */
.nav-wrapper{position:fixed;top:0;right:-100%;width:var(--nav-w);height:100vh;background:linear-gradient(180deg,#0B1A2A,#112B3F);border-left:2px solid rgba(0,168,142,0.25);padding:5rem 1.5rem 2rem;transition:right 0.3s cubic-bezier(0.4,0,0.2,1);z-index:200;overflow-y:auto}
.nav-wrapper[data-open]{right:0}
.nav-list{display:flex;flex-direction:column;gap:0.25rem}
.nav-list a{display:block;padding:0.7rem 1rem;font-family:var(--font-heading);font-weight:700;font-size:1rem;color:#B0BEC5;border-radius:var(--radius);transition:all var(--transition);position:relative;letter-spacing:0.04em}
.nav-list a:hover,.nav-list a:focus-visible{color:#FFFFFF;background:rgba(0,168,142,0.12)}
.nav-list a[aria-current="page"]{color:#00A88E;background:rgba(0,168,142,0.08);box-shadow:inset 3px 0 0 #00A88E;text-shadow:0 0 6px rgba(0,168,142,0.3)}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;border:1px solid rgba(192,192,192,0.25);border-radius:var(--radius);background:rgba(0,0,0,0.2);transition:all var(--transition)}
.nav-toggle:hover{border-color:#00A88E;background:rgba(0,168,142,0.1)}
.toggle-bar{display:block;width:22px;height:2px;background:#C0C0C0;border-radius:2px;transition:all var(--transition)}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);background:#FF6B35}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:#FF6B35}
.header-actions{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}

/* Desktop Navigation */
@media(min-width:900px){
  .nav-wrapper{position:static;width:auto;height:auto;background:none;border:none;padding:0;overflow:visible}
  .nav-list{flex-direction:row;gap:0.125rem}
  .nav-list a{padding:0.5rem 0.9rem;font-size:0.9rem;border-radius:var(--radius);color:#B0BEC5;background:transparent}
  .nav-list a:hover,.nav-list a:focus-visible{color:#FFFFFF;background:rgba(0,168,142,0.15)}
  .nav-list a[aria-current="page"]{color:#00A88E;background:rgba(0,168,142,0.1);box-shadow:inset 0 -3px 0 #00A88E;text-shadow:0 0 6px rgba(0,168,142,0.3)}
  .nav-toggle{display:none}
}

/* Overlay for mobile nav */
.nav-wrapper[data-open]::before{content:'';position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:-1}
@media(min-width:900px){.nav-wrapper[data-open]::before{display:none}}

/* ===== Buttons ===== */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1.25rem;font-family:var(--font-heading);font-weight:700;font-size:0.85rem;background:#00A88E;color:#FFFFFF;border-radius:var(--radius);transition:all var(--transition);text-shadow:none;letter-spacing:0.03em;box-shadow:0 2px 8px rgba(0,168,142,0.3)}
.btn-primary:hover,.btn-primary:focus-visible{background:#007A64;box-shadow:0 4px 16px rgba(0,168,142,0.45);transform:translateY(-1px)}
.btn-accent{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1.25rem;font-family:var(--font-heading);font-weight:700;font-size:0.85rem;background:#FF6B35;color:#FFFFFF;border-radius:var(--radius);transition:all var(--transition);text-shadow:none;letter-spacing:0.03em;box-shadow:0 2px 8px rgba(255,107,53,0.3)}
.btn-accent:hover,.btn-accent:focus-visible{background:#e55a2b;box-shadow:0 4px 16px rgba(255,107,53,0.45);transform:translateY(-1px)}
.btn-cta{font-size:0.8rem;padding:0.45rem 1.1rem}

/* ===== Footer ===== */
.site-footer{background:linear-gradient(180deg,#0B1A2A 0%,#0a1420 100%);border-top:2px solid rgba(0,168,142,0.2);position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#00A88E 20%,#FF6B35 60%,transparent);opacity:0.3}
.footer-inner{display:grid;grid-template-columns:1fr;gap:2rem;max-width:var(--max-width);margin:0 auto;padding:2.5rem 1.25rem 1.5rem}
@media(min-width:640px){.footer-inner{grid-template-columns:1fr 1fr 1.5fr;gap:2.5rem}}
.footer-logo{font-family:var(--font-heading);font-weight:900;font-size:1.4rem;color:#FFFFFF;text-shadow:0 0 12px rgba(0,168,142,0.4);display:inline-block;margin-bottom:0.25rem}
.footer-tagline{font-size:0.8rem;color:var(--clr-text-muted);letter-spacing:0.06em;margin-bottom:0.5rem}
.footer-trust{font-size:0.75rem;color:var(--clr-metal);opacity:0.7;border-left:2px solid #00A88E;padding-left:0.75rem;margin-top:0.5rem}
.footer-heading{font-family:var(--font-heading);font-weight:700;font-size:0.85rem;color:#00A88E;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;position:relative;display:inline-block}
.footer-heading::after{content:'';display:block;width:60%;height:2px;background:#FF6B35;margin-top:4px;opacity:0.6}
.footer-links ul{display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{font-size:0.88rem;color:var(--clr-text-muted);transition:color var(--transition);padding:0.15rem 0}
.footer-links a:hover,.footer-links a:focus-visible{color:#00A88E;text-shadow:0 0 6px rgba(0,168,142,0.2)}
.footer-contact p{font-size:0.85rem;color:var(--clr-text-muted);margin-bottom:0.35rem;line-height:1.5}
.footer-contact a{color:var(--clr-metal);transition:color var(--transition)}
.footer-contact a:hover,.footer-contact a:focus-visible{color:#00A88E}
.contact-note{font-size:0.75rem!important;color:rgba(176,190,197,0.6)!important;margin-top:0.5rem!important;border-top:1px solid rgba(192,192,192,0.15);padding-top:0.5rem}
.footer-bottom{border-top:1px solid rgba(192,192,192,0.12);margin-top:0}
.footer-bottom-inner{display:flex;flex-direction:column;align-items:center;gap:0.35rem;max-width:var(--max-width);margin:0 auto;padding:1rem 1.25rem;text-align:center}
@media(min-width:480px){.footer-bottom-inner{flex-direction:row;justify-content:space-between}}
.copyright{font-size:0.78rem;color:var(--clr-text-muted);opacity:0.7}
.icp{font-size:0.75rem;color:var(--clr-text-muted);opacity:0.5}

/* ===== General Utilities ===== */
.section-container{max-width:var(--max-width);margin:0 auto;padding:2rem 1.25rem}
.section-container--wide{max-width:1400px}

/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem 0.5rem;padding:0.6rem 0;font-size:0.82rem;color:var(--clr-text-muted)}
.breadcrumb a{color:var(--clr-text-muted);transition:color var(--transition)}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:#00A88E}
.breadcrumb .sep{color:rgba(192,192,192,0.3);font-size:0.7rem}
.breadcrumb .current{color:#FFFFFF;font-weight:600}

/* ===== Card Grid ===== */
.card-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:480px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1120px){.card-grid{grid-template-columns:repeat(4,1fr)}}

.card{background:rgba(17,43,63,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(192,192,192,0.1);border-radius:var(--radius);padding:1.25rem;transition:all var(--transition);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#00A88E,#FF6B35);opacity:0;transition:opacity var(--transition)}
.card:hover,.card:focus-within{border-color:rgba(0,168,142,0.3);box-shadow:0 8px 24px rgba(0,0,0,0.4),0 0 12px rgba(0,168,142,0.08);transform:translateY(-2px)}
.card:hover::before,.card:focus-within::before{opacity:1}
.card-title{font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:#FFFFFF;margin-bottom:0.5rem}
.card-text{font-size:0.88rem;color:var(--clr-text-muted);line-height:1.6}
.card-img{width:100%;aspect-ratio:16/9;background:rgba(192,192,192,0.06);border-radius:4px;margin-bottom:0.75rem;display:flex;align-items:center;justify-content:center;color:rgba(192,192,192,0.2);font-size:0.75rem;border:1px dashed rgba(192,192,192,0.08)}

/* ===== Tags & Badges ===== */
.tag-label{display:inline-flex;align-items:center;padding:0.2rem 0.6rem;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#00A88E;border:1px solid rgba(0,168,142,0.3);border-radius:2px;background:rgba(0,168,142,0.06)}
.tag-label--accent{color:#FF6B35;border-color:rgba(255,107,53,0.3);background:rgba(255,107,53,0.06)}
.tag-label--metal{color:#C0C0C0;border-color:rgba(192,192,192,0.2);background:rgba(192,192,192,0.04)}
.stat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;padding:0 0.5rem;font-family:var(--font-heading);font-weight:900;font-size:1.1rem;color:#00A88E;background:rgba(0,168,142,0.1);border:1px solid rgba(0,168,142,0.2);border-radius:4px;text-shadow:0 0 8px rgba(0,168,142,0.2)}
.stat-badge--accent{color:#FF6B35;background:rgba(255,107,53,0.1);border-color:rgba(255,107,53,0.2);text-shadow:0 0 8px rgba(255,107,53,0.2)}

/* ===== Scroll Progress ===== */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,#00A88E,#FF6B35);z-index:9999;transition:width 0.1s linear;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scroll-progress{display:none}}

/* ===== Image Container Base ===== */
.img-container{position:relative;overflow:hidden;background:rgba(17,43,63,0.4);border-radius:4px;display:flex;align-items:center;justify-content:center;color:rgba(192,192,192,0.15);font-size:0.7rem}
.img-container--16x9{aspect-ratio:16/9}
.img-container--4x3{aspect-ratio:4/3}
.img-container--1x1{aspect-ratio:1/1}
.img-container img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.img-container:hover img{transform:scale(1.03)}

/* ===== Responsive Helpers ===== */
@media(max-width:480px){:root{--header-h:56px}}
@media(min-width:900px){.header-inner{padding:0 2rem}.footer-inner{padding:3rem 2rem 1.5rem}.section-container{padding:3rem 2rem}}
@media(min-width:1200px){.header-inner{padding:0 2.5rem}.footer-inner{padding:4rem 2.5rem 2rem}.section-container{padding:4rem 2.5rem}}