/* === RESET === */
*,*::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{min-height:100vh;background:var(--light-bg);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input{font:inherit;color:inherit;border:none;outline:none}
/* === VARIABLES === */
:root{--primary:#0B3D91;--primary-dark:#082A6B;--accent:#FF6B35;--accent-dark:#E55A2B;--gold:#D4AF37;--gold-light:#E8C94A;--dark-bg:#0A1D3A;--dark-bg-alt:#0F2A4A;--light-bg:#F4F6F9;--light-bg-alt:#E8ECF2;--text-primary:#1A1A2E;--text-secondary:#5A5A7A;--text-inverse:#FFFFFF;--text-inverse-dim:#C8D0DC;--success:#00C853;--warning:#FF1744;--info:#00B0FF;--font-heading:'Montserrat Black','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;--font-body:'Roboto Light','Segoe UI',Arial,'PingFang SC','Microsoft YaHei',sans-serif;--header-bg:var(--primary);--header-text:var(--text-inverse);--footer-bg:var(--dark-bg);--footer-text:var(--text-inverse-dim);--max-width:1200px;--max-width-narrow:800px;--max-width-wide:1400px;--gap:1.5rem;--gap-sm:0.75rem;--gap-lg:2.5rem;--radius:4px;--radius-card:8px;--shadow-card:0 4px 12px rgba(10,29,58,0.12);--shadow-card-hover:0 8px 24px rgba(10,29,58,0.2);--transition-fast:0.2s ease;--transition-base:0.3s ease;--header-height-desktop:140px;--nav-height:52px}
/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.4;color:var(--text-primary);font-weight:900}
h1{font-size:3rem;letter-spacing:-0.02em}
h2{font-size:2.5rem;letter-spacing:-0.015em}
h3{font-size:2rem;letter-spacing:-0.01em}
h4{font-size:1.5rem}
h5{font-size:1.25rem}
h6{font-size:1rem}
body,p{font-family:var(--font-body);font-weight:300;font-size:1rem;line-height:1.6;color:var(--text-primary)}
small,.text-small{font-size:0.875rem;line-height:1.5;color:var(--text-secondary)}
.text-accent{color:var(--accent)}.text-gold{color:var(--gold)}.text-primary{color:var(--primary)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}
/* === CONTAINER === */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--gap)}
.container-narrow{max-width:var(--max-width-narrow);margin:0 auto;padding:0 var(--gap)}
.container-wide{max-width:var(--max-width-wide);margin:0 auto;padding:0 var(--gap)}
/* === SKIP LINK === */
.skip-link{position:absolute;top:-100%;left:1rem;padding:0.75rem 1.5rem;background:var(--accent);color:var(--text-inverse);z-index:10000;font-family:var(--font-heading);font-size:0.875rem;border-radius:var(--radius);transition:top var(--transition-fast)}
.skip-link:focus{top:0.5rem;outline:2px solid var(--gold);outline-offset:2px}
/* === PROGRESS BAR === */
.progress-bar{position:fixed;top:0;left:0;width:0;height:4px;background:var(--accent);z-index:9999;transition:width 0.1s linear;pointer-events:none}
@media(prefers-reduced-motion:reduce){.progress-bar{transition:none}}
/* === SITE HEADER === */
.site-header{background:var(--header-bg);color:var(--header-text);position:relative;z-index:1000;box-shadow:0 2px 16px rgba(10,29,58,0.3)}
.header-inner{max-width:var(--max-width-wide);margin:0 auto;padding:0 var(--gap);position:relative}
.brand-masthead{display:flex;flex-direction:column;align-items:center;padding:1rem 0 0.25rem;position:relative}
.brand-frame{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 2rem}
.brand-corner{position:absolute;width:20px;height:20px;border-color:var(--gold);border-style:solid}
.brand-corner--tl{top:0;left:0;border-width:3px 0 0 3px}
.brand-corner--tr{top:0;right:0;border-width:3px 3px 0 0}
.brand-corner--bl{bottom:0;left:0;border-width:0 0 3px 3px}
.brand-corner--br{bottom:0;right:0;border-width:0 3px 3px 0}
.brand-name{font-family:var(--font-heading);font-size:2.2rem;color:var(--text-inverse);letter-spacing:0.04em;line-height:1.2;transition:opacity var(--transition-fast)}
.brand-name:hover{opacity:0.92}
.brand-tagline{font-size:0.75rem;color:var(--gold);letter-spacing:0.3em;text-transform:uppercase;margin-top:0.15rem;font-weight:300;opacity:0.85}
.header-nav-area{display:flex;align-items:center;justify-content:center;padding:0.25rem 0 0.75rem;position:relative}
.nav{display:flex;align-items:center;gap:0;width:100%;justify-content:center}
.nav-list{display:flex;align-items:center;gap:0.25rem;flex-wrap:wrap;justify-content:center}
.nav-link{display:block;padding:0.5rem 1rem;font-family:var(--font-heading);font-size:0.85rem;color:var(--text-inverse);letter-spacing:0.04em;text-transform:uppercase;border-radius:var(--radius);transition:background var(--transition-fast),color var(--transition-fast);position:relative}
.nav-link::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--accent);transition:width var(--transition-base)}
.nav-link:hover::after,.nav-link:focus-visible::after{width:60%}
.nav-link[aria-current="page"]{color:var(--accent)}
.nav-link[aria-current="page"]::after{width:60%;background:var(--accent)}
.nav-link:hover{background:rgba(255,255,255,0.08)}
.search-box{display:flex;align-items:center;margin-left:1.5rem;border:1px solid rgba(212,175,55,0.3);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition-fast);background:rgba(255,255,255,0.06)}
.search-box:focus-within{border-color:var(--gold);background:rgba(255,255,255,0.1)}
.search-input{background:transparent;padding:0.4rem 0.75rem;color:var(--text-inverse);font-size:0.8rem;width:140px;transition:width var(--transition-base)}
.search-input::placeholder{color:var(--text-inverse-dim);opacity:0.6}
.search-input:focus{width:180px}
.search-btn{padding:0.4rem 0.75rem;background:var(--accent);color:var(--text-inverse);font-family:var(--font-heading);font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;transition:background var(--transition-fast)}
.search-btn:hover,.search-btn:focus-visible{background:var(--accent-dark)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;padding:8px;border-radius:var(--radius);background:rgba(255,255,255,0.08);transition:background var(--transition-fast);position:absolute;right:0;top:50%;transform:translateY(-50%)}
.nav-toggle:hover{background:rgba(255,255,255,0.16)}
.nav-toggle-line{display:block;width:24px;height:2.5px;background:var(--text-inverse);border-radius:2px;transition:transform var(--transition-base),opacity var(--transition-base)}
.nav-toggle-line+.nav-toggle-line{margin-top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.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:translateY(-7.5px) rotate(-45deg)}
/* === SITE FOOTER === */
.site-footer{background:var(--footer-bg);color:var(--footer-text);position:relative}
.footer-gold-bar{height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));opacity:0.6}
.footer-inner{max-width:var(--max-width-wide);margin:0 auto;padding:2.5rem var(--gap);display:grid;grid-template-columns:1.8fr 1fr 1.2fr;gap:2.5rem}
.footer-brand-name{font-size:1.6rem;color:var(--text-inverse);display:inline-block;margin-bottom:0.75rem}
.footer-trust{font-size:0.875rem;line-height:1.7;color:var(--text-inverse-dim);max-width:420px;opacity:0.85}
.footer-col-heading{font-family:var(--font-heading);font-size:0.85rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid rgba(212,175,55,0.2)}
.footer-links{display:flex;flex-direction:column;gap:0.6rem}
.footer-link{font-size:0.9rem;color:var(--footer-text);transition:color var(--transition-fast);display:inline-block}
.footer-link:hover,.footer-link:focus-visible{color:var(--accent)}
.footer-contact-list{display:flex;flex-direction:column;gap:0.6rem}
.footer-contact-item{font-size:0.9rem;display:flex;flex-wrap:wrap;gap:0.25rem}
.footer-contact-label{color:var(--gold);opacity:0.8;font-weight:400}
.footer-contact-value{color:var(--footer-text);word-break:break-all}
.footer-contact-value a{color:var(--accent);transition:color var(--transition-fast)}
.footer-contact-value a:hover{color:var(--gold)}
.footer-bottom{background:var(--dark-bg-alt);border-top:1px solid rgba(212,175,55,0.08)}
.footer-bottom-inner{max-width:var(--max-width-wide);margin:0 auto;padding:1rem var(--gap);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;font-size:0.8rem;color:var(--text-inverse-dim);opacity:0.7}
/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.6rem 1.5rem;font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.04em;border-radius:var(--radius);transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer}
.btn-accent{background:var(--accent);color:var(--text-inverse)}
.btn-accent:hover,.btn-accent:focus-visible{background:var(--accent-dark);box-shadow:0 4px 12px rgba(255,107,53,0.35)}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--accent);color:var(--text-inverse)}
.btn-sm{padding:0.35rem 1rem;font-size:0.75rem}
/* === CARD === */
.card{background:var(--light-bg);border-radius:var(--radius-card);padding:1.5rem;box-shadow:var(--shadow-card);border:1px solid var(--light-bg-alt);transition:box-shadow var(--transition-base),transform var(--transition-base);position:relative}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.card-heading{font-family:var(--font-heading);font-size:1.1rem;margin-bottom:0.75rem;color:var(--text-primary)}
.card-body{font-size:0.95rem;line-height:1.6;color:var(--text-secondary)}
.card-footer{margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--light-bg-alt);font-size:0.85rem}
/* === TAG === */
.tag{display:inline-flex;align-items:center;padding:0.2rem 0.75rem;font-family:var(--font-heading);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;border-radius:var(--radius);background:var(--light-bg-alt);color:var(--text-secondary)}
.tag-gold{background:rgba(212,175,55,0.15);color:var(--gold)}
.tag-accent{background:rgba(255,107,53,0.15);color:var(--accent)}
.tag-info{background:rgba(0,176,255,0.12);color:var(--info)}
/* === DATA DISPLAY === */
.data-display{display:flex;flex-direction:column;align-items:center;padding:1rem 0}
.data-number{font-family:var(--font-heading);font-size:3.5rem;line-height:1;color:var(--primary);letter-spacing:-0.03em}
.data-number.accent{color:var(--accent)}.data-number.gold{color:var(--gold)}
.data-label{font-size:0.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.25rem}
/* === BREADCRUMB === */
.breadcrumb{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text-secondary);padding:0.75rem 0;flex-wrap:wrap}
.breadcrumb a{color:var(--primary);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .breadcrumb-current{color:var(--text-secondary);font-weight:400}
/* === SECTION DIVIDER === */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:2.5rem 0;position:relative;border:none;opacity:0.4}
.section-divider::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--gold);border-radius:50%;opacity:0.6}
.section-divider.diagonal{height:30px;background:transparent;overflow:hidden;position:relative}
.section-divider.diagonal::after{content:'';position:absolute;top:0;left:-10%;width:120%;height:100%;background:linear-gradient(135deg,transparent 45%,var(--gold) 45%,var(--gold) 55%,transparent 55%);opacity:0.2}
/* === GOLD BAR === */
.gold-bar{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.3}
/* === RESPONSIVE: TABLET === */
@media(max-width:1024px){
.brand-name{font-size:1.8rem}
.brand-frame{padding:0.4rem 1.5rem}
.brand-corner{width:16px;height:16px}
.nav-link{font-size:0.78rem;padding:0.4rem 0.75rem}
.search-input{width:110px}
.search-input:focus{width:140px}
.footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
.footer-col--brand{grid-column:1/-1}
}
/* === RESPONSIVE: MOBILE === */
@media(max-width:768px){
.site-header{position:sticky;top:0;z-index:1000}
.header-inner{padding:0 1rem}
.brand-masthead{padding:0.6rem 0 0.15rem}
.brand-frame{padding:0.3rem 1rem}
.brand-name{font-size:1.3rem}
.brand-corner{width:12px;height:12px;border-width:2px}
.brand-tagline{font-size:0.6rem;letter-spacing:0.2em}
.header-nav-area{padding:0 0 0.6rem;justify-content:flex-start}
.nav{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:var(--dark-bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:5rem 2rem 2rem;transform:translateX(-100%);transition:transform var(--transition-base);z-index:998;overflow-y:auto}
.nav[data-open]{transform:translateX(0)}
.nav-list{flex-direction:column;align-items:stretch;gap:0.25rem}
.nav-link{padding:0.75rem 1rem;font-size:1rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-link::after{display:none}
.nav-link[aria-current="page"]{background:rgba(255,107,53,0.15);border-left:3px solid var(--accent);color:var(--accent)}
.search-box{margin-left:0;margin-top:1.5rem;width:100%;border-color:rgba(212,175,55,0.2)}
.search-input{width:100%;padding:0.6rem 0.75rem;font-size:0.9rem}
.search-input:focus{width:100%}
.search-btn{padding:0.6rem 1.25rem}
.nav-toggle{display:flex;position:relative;transform:none;top:auto;right:auto;margin-left:auto;z-index:999}
.footer-inner{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1rem}
.footer-bottom-inner{flex-direction:column;text-align:center;gap:0.5rem}
.footer-trust{max-width:100%}
.footer-col-heading{margin-bottom:0.75rem}
.data-number{font-size:2.5rem}
h1{font-size:2.2rem}h2{font-size:1.8rem}h3{font-size:1.5rem}
}
/* === ACCESSIBILITY === */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@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}}
@media(prefers-color-scheme:dark){body{background:var(--dark-bg-alt);color:var(--text-inverse)}.card{background:var(--dark-bg);border-color:rgba(255,255,255,0.06);color:var(--text-inverse-dim)}.card-heading{color:var(--text-inverse)}.breadcrumb{color:var(--text-inverse-dim)}.breadcrumb a{color:var(--info)}}
/* === UTILITY === */
.text-center{text-align:center}.text-right{text-align:right}.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.5rem}.mb-1{margin-bottom:0.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2.5rem}.flex{display:flex}.flex-center{align-items:center;justify-content:center}.flex-wrap{flex-wrap:wrap}.gap-1{gap:0.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
/* === IMAGE CONTAINER (reusable placeholder) === */
.img-container{position:relative;overflow:hidden;background:var(--light-bg-alt);border-radius:var(--radius-card);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:0.85rem}
.img-container img{width:100%;height:100%;object-fit:cover}
.img-container.poster{aspect-ratio:3/4}
.img-container.wide{aspect-ratio:21/9}
.img-container.square{aspect-ratio:1/1}