/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:var(--base-size,18px);-webkit-text-size-adjust:100%}
body{font-family:var(--font-body,'Noto Sans SC',sans-serif);background:var(--color-neutral-light,#F5F5F5);color:var(--color-neutral-dark,#0D0D0D);line-height:1.6;min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--color-accent,#E53935);outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}

/* ===== CSS Variables ===== */
:root{
  --color-primary:#1A3A5C;
  --color-primary-light:#2B5A8C;
  --color-secondary:#4CAF50;
  --color-accent:#E53935;
  --color-accent-light:#FF8A80;
  --color-neutral-dark:#0D0D0D;
  --color-neutral-light:#F5F5F5;
  --color-highlight:#FFD700;
  --font-heading:'PingFang SC',sans-serif;
  --font-body:'Noto Sans SC',sans-serif;
  --border-width:3px;
  --shadow-strong:8px 8px 0 rgba(0,0,0,0.25);
  --radius:4px;
  --max-width:1280px;
  --base-size:18px;
  --space-unit:8px;
}

/* ===== Utility ===== */
.container{max-width:var(--max-width);margin:0 auto;padding:0 calc(var(--space-unit)*3)}@media(max-width:768px){.container{padding:0 calc(var(--space-unit)*2)}}

/* ===== Skip Link ===== */
.skip-link{position:absolute;top:-1000px;left:0;z-index:9999;padding:12px 24px;background:var(--color-accent,#E53935);color:#fff;font-weight:700;font-size:16px;border-radius:0 0 var(--radius) 0;transition:top 0.2s}
.skip-link:focus{top:0}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.15)}

/* Brand Bar */
.brand-bar{background:var(--color-primary,#1A3A5C);border-bottom:4px solid var(--color-accent,#E53935);padding:16px 0}
.brand-bar__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand-name{font-family:var(--font-heading,'PingFang SC',sans-serif);font-size:2rem;font-weight:700;font-style:italic;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.3);letter-spacing:1px}
.brand-tagline{font-size:1rem;color:var(--color-highlight,#FFD700);font-weight:400;letter-spacing:2px;text-transform:uppercase;margin-left:auto;margin-right:24px}
@media(max-width:768px){
  .brand-name{font-size:1.6rem}
  .brand-tagline{font-size:0.85rem;margin-right:12px}
}

/* Nav Toggle */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle__line{display:block;width:28px;height:3px;background:#fff;border-radius:2px;transition:transform 0.3s,opacity 0.3s}
@media(max-width:768px){
  .nav-toggle{display:flex}
  .brand-tagline{display:none}
}

/* Nav Bar */
.nav-bar{background:var(--color-neutral-dark,#0D0D0D);border-bottom:var(--border-width) solid var(--color-primary-light,#2B5A8C);transition:max-height 0.4s ease,opacity 0.3s ease}
.nav-bar__inner{display:flex;align-items:center;gap:0;overflow-x:auto}
.nav-bar a{display:block;padding:14px 24px;font-family:var(--font-heading,'PingFang SC',sans-serif);font-size:1.05rem;font-weight:600;color:#fff;white-space:nowrap;border-bottom:3px solid transparent;transition:background 0.25s,color 0.25s,border-color 0.25s}
.nav-bar a:hover{background:rgba(76,175,80,0.15);color:var(--color-secondary,#4CAF50);border-bottom-color:var(--color-secondary,#4CAF50)}
.nav-bar a[aria-current="page"]{color:var(--color-accent,#E53935);border-bottom-color:var(--color-accent,#E53935);background:rgba(229,57,53,0.08)}
@media(max-width:768px){
  .nav-bar{max-height:0;opacity:0;overflow:hidden;border-bottom-width:0}
  .nav-bar[data-open]{max-height:600px;opacity:1;border-bottom-width:var(--border-width)}
  .nav-bar__inner{flex-direction:column;align-items:stretch;padding:8px 0}
  .nav-bar a{padding:14px 24px;border-left:4px solid transparent;border-bottom:none}
  .nav-bar a:hover{background:rgba(76,175,80,0.15);border-left-color:var(--color-secondary,#4CAF50);border-bottom:none}
  .nav-bar a[aria-current="page"]{border-left-color:var(--color-accent,#E53935);border-bottom:none}
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}
}

/* ===== Footer ===== */
.site-footer{background:var(--color-primary,#1A3A5C);color:#fff;padding:48px 0 32px;margin-top:64px;border-top:4px solid var(--color-accent,#E53935)}
.footer__inner{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px}
.footer-brand{grid-column:1/-1}
.footer-brand__name{font-family:var(--font-heading,'PingFang SC',sans-serif);font-size:2rem;font-weight:700;font-style:italic;color:#fff;display:block}
.footer-brand__tagline{font-size:0.95rem;color:var(--color-highlight,#FFD700);margin-top:4px;letter-spacing:1px;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.footer-links a{font-size:1rem;color:var(--color-secondary,#4CAF50);border-bottom:1px solid transparent;transition:color 0.25s,border-color 0.25s}
.footer-links a:hover{color:var(--color-accent-light,#FF8A80);border-bottom-color:var(--color-accent-light,#FF8A80)}
.footer-contact{font-size:0.95rem;color:rgba(255,255,255,0.85);letter-spacing:0.5px;line-height:1.6;align-self:end;text-align:right}
.footer-copyright{grid-column:1/-1;font-size:0.85rem;color:rgba(255,255,255,0.6);text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,0.15);margin-top:16px}
@media(max-width:768px){
  .footer__inner{grid-template-columns:1fr;gap:24px}
  .footer-links{justify-content:center}
  .footer-contact{text-align:center;align-self:center}
  .footer-brand{text-align:center}
  .footer-brand__name{font-size:1.6rem}
}

/* ===== Scroll to Top ===== */
.scroll-top{position:fixed;bottom:32px;right:32px;z-index:999;width:52px;height:52px;border-radius:50%;background:var(--color-accent,#E53935);color:#fff;border:3px solid var(--color-neutral-dark,#0D0D0D);box-shadow:var(--shadow-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.6rem;opacity:0;visibility:hidden;transform:scale(0.8);transition:opacity 0.35s,transform 0.35s,visibility 0.35s,background 0.25s}
.scroll-top[data-visible]{opacity:1;visibility:visible;transform:scale(1)}
.scroll-top:hover{background:var(--color-secondary,#4CAF50);border-color:var(--color-primary,#1A3A5C)}
.scroll-top:active{transform:scale(0.92)}
@media(prefers-reduced-motion:reduce){.scroll-top{transition:none}}
@media(max-width:768px){.scroll-top{bottom:20px;right:20px;width:44px;height:44px;font-size:1.3rem}}

/* ===== Shared Components ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;font-family:var(--font-heading,'PingFang SC',sans-serif);font-size:1rem;font-weight:700;border:var(--border-width) solid transparent;border-radius:var(--radius);cursor:pointer;transition:background 0.25s,color 0.25s,border-color 0.25s,box-shadow 0.25s,transform 0.15s;text-align:center;line-height:1.2}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-strong)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn-primary{background:var(--color-accent,#E53935);color:#fff;border-color:var(--color-accent,#E53935)}
.btn-primary:hover{background:var(--color-accent-light,#FF8A80);border-color:var(--color-accent-light,#FF8A80);color:var(--color-neutral-dark)}
.btn-secondary{background:var(--color-secondary,#4CAF50);color:#fff;border-color:var(--color-secondary,#4CAF50)}
.btn-secondary:hover{background:#66BB6A;border-color:#66BB6A}
.btn-outline{background:transparent;color:var(--color-primary,#1A3A5C);border-color:var(--color-primary,#1A3A5C)}
.btn-outline:hover{background:var(--color-primary,#1A3A5C);color:#fff}

.section-title{font-family:var(--font-heading,'PingFang SC',sans-serif);font-size:2.4rem;font-weight:700;font-style:italic;color:var(--color-primary,#1A3A5C);margin-bottom:24px;padding-bottom:12px;border-bottom:4px solid var(--color-accent,#E53935);display:inline-block}
@media(max-width:768px){.section-title{font-size:1.8rem}}

.card{background:#fff;border:var(--border-width) solid var(--color-primary-light,#2B5A8C);border-radius:var(--radius);box-shadow:var(--shadow-strong);padding:24px;transition:border-color 0.3s,box-shadow 0.3s}
.card:hover{border-color:var(--color-accent,#E53935);box-shadow:8px 8px 0 rgba(229,57,53,0.2)}
.card__title{font-family:var(--font-heading,'PingFang SC',sans-serif);font-size:1.3rem;font-weight:700;font-style:italic;margin-bottom:12px}
.card__text{font-size:1rem;line-height:1.6}

.badge{display:inline-block;padding:4px 14px;font-size:0.8rem;font-weight:700;border-radius:20px;background:var(--color-primary-light,#2B5A8C);color:#fff;letter-spacing:0.5px}
.badge--accent{background:var(--color-accent,#E53935)}
.badge--secondary{background:var(--color-secondary,#4CAF50)}
.badge--highlight{background:var(--color-highlight,#FFD700);color:var(--color-neutral-dark)}

/* ===== Image Placeholder Base ===== */
.img-placeholder{background:var(--color-neutral-light,#F5F5F5);border:2px dashed var(--color-primary-light,#2B5A8C);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--color-primary-light,#2B5A8C);font-size:0.9rem;aspect-ratio:16/9;width:100%}

/* ===== Breadcrumb ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px 16px;padding:16px 0;font-size:0.9rem;color:var(--color-primary-light,#2B5A8C)}
.breadcrumb a{color:var(--color-primary,#1A3A5C);border-bottom:1px solid transparent;transition:color 0.2s,border-color 0.2s}
.breadcrumb a:hover{color:var(--color-accent,#E53935);border-bottom-color:var(--color-accent,#E53935)}
.breadcrumb span{color:var(--color-neutral-dark,#0D0D0D);font-weight:600}
.breadcrumb li+li::before{content:"/";margin-right:16px;color:var(--color-primary-light,#2B5A8C)}

/* ===== Responsive Helpers ===== */
@media(max-width:480px){
  .brand-name{font-size:1.3rem}
  .nav-bar a{padding:12px 20px;font-size:0.95rem}
  .section-title{font-size:1.5rem}
  .card{padding:16px}
}
@media(min-width:769px) and (max-width:1024px){
  .nav-bar a{padding:14px 18px;font-size:1rem}
}