/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;background:#0B1026;color:#E5E7EB;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;color:inherit;font:inherit}
table{border-collapse:collapse;border-spacing:0}
:focus-visible{outline:2px solid #FF6600;outline-offset:2px;border-radius: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}}

/* ===== CSS VARIABLES ===== */
:root{--color-bg-dark:#0B1026;--color-bg-medium:#151A3A;--color-bg-light:#1E2450;--color-primary:#FF6600;--color-primary-hover:#FF8533;--color-primary-dim:#CC5200;--color-purple:#8B5CF6;--color-accent-gradient:linear-gradient(135deg,#8B5CF6,#FF6600);--color-white:#FFFFFF;--color-text-primary:#E5E7EB;--color-text-secondary:#9CA3AF;--color-text-muted:#6B7280;--color-success:#10B981;--color-error:#EF4444;--font-heading:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-accent:'Playfair Display',Georgia,'Times New Roman',serif;--header-h:64px;--max-w:1200px;--gap-sm:8px;--gap-md:16px;--gap-lg:32px;--gap-xl:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--transition-fast:0.2s ease;--transition-med:0.35s ease;--shadow-card:0 4px 20px rgba(0,0,0,0.5)}
@media(max-width:768px){:root{--header-h:56px;--gap-xl:40px}}

/* ===== SKIP LINK ===== */
.skip-link{position:fixed;top:-100%;left:16px;z-index:10000;padding:12px 24px;background:#FF6600;color:#fff;font-weight:700;font-size:14px;border-radius:0 0 8px 8px;transition:top 0.25s ease}
.skip-link:focus{top:0}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{position:fixed;top:0;left:0;z-index:9999;width:0;height:3px;background:linear-gradient(90deg,#8B5CF6,#FF6600);transition:width 0.1s linear;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scroll-progress{display:none}}

/* ===== SITE HEADER ===== */
.site-header{position:sticky;top:0;z-index:1000;background:#0B1026;border-bottom:2px solid #1E2450;box-shadow:0 2px 20px rgba(0,0,0,0.6)}
.header-frame{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);margin:0 auto;padding:0 var(--gap-md);height:var(--header-h);position:relative}
.brand-link{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-0.5px;color:var(--color-white);transition:color var(--transition-fast)}
.brand-link:hover{color:var(--color-primary)}
.brand-icon-shape{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-accent-gradient);border-radius:6px;font-size:20px;line-height:1;color:#fff;transform:skewX(-6deg);box-shadow:0 0 12px rgba(255,102,0,0.3)}
.brand-text{background:var(--color-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-nav{display:flex;align-items:center}
.nav-list{display:flex;gap:4px}
.nav-item{position:relative}
.nav-link{display:block;padding:8px 18px;font-size:15px;font-weight:600;color:var(--color-text-secondary);letter-spacing:0.3px;border-radius:6px;transition:color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast);position:relative}
.nav-link::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%) scaleX(0);width:60%;height:2px;background:#FF6600;transition:transform var(--transition-fast);border-radius:2px}
.nav-link:hover,.nav-link:focus-visible{color:var(--color-white);background:rgba(255,102,0,0.08);box-shadow:0 0 12px rgba(255,102,0,0.15)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:translateX(-50%) scaleX(1)}
.nav-link[aria-current="page"]{color:var(--color-primary);background:rgba(255,102,0,0.06)}
.nav-link[aria-current="page"]::after{transform:translateX(-50%) scaleX(1);background:var(--color-accent-gradient);height:3px}
.header-actions{display:flex;align-items:center;gap:var(--gap-md)}
.version-badge{display:inline-flex;align-items:center;padding:4px 14px;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--color-primary);border:1.5px solid var(--color-primary);border-radius:20px;background:rgba(255,102,0,0.06);text-transform:uppercase;box-shadow:0 0 8px rgba(255,102,0,0.1);transform:skewX(-4deg)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;padding:10px;border-radius:8px;transition:background var(--transition-fast)}
.nav-toggle:hover{background:rgba(255,102,0,0.1)}
.toggle-bar{display:block;width:26px;height:2.5px;background:#E5E7EB;border-radius:2px;transition:transform var(--transition-med),opacity var(--transition-med);transform-origin:center}
.toggle-bar:nth-child(2){margin:6px 0}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
.header-corner{position:absolute;top:0;width:28px;height:28px;border:2px solid #1E2450;border-top:none;pointer-events:none;opacity:0.5}
.header-corner--tl{left:calc((100% - var(--max-w))/2 - 14px);border-right:none;border-radius:0 0 0 12px;transform:skewX(6deg)}
.header-corner--tr{right:calc((100% - var(--max-w))/2 - 14px);border-left:none;border-radius:0 0 12px 0;transform:skewX(-6deg)}
@media(max-width:1024px){.header-corner{display:none}}
@media(max-width:768px){.nav-toggle{display:flex}.header-nav{position:fixed;top:var(--header-h);right:0;width:300px;max-width:85vw;height:calc(100vh - var(--header-h));background:#0B1026;border-left:2px solid #1E2450;box-shadow:-8px 0 30px rgba(0,0,0,0.7);transform:translateX(100%);transition:transform var(--transition-med);overflow-y:auto;padding:var(--gap-lg) var(--gap-md);flex-direction:column;align-items:stretch}.header-nav[data-open]{transform:translateX(0)}.nav-list{flex-direction:column;gap:2px}.nav-link{padding:14px 18px;font-size:18px;border-radius:8px}.nav-link::after{display:none}.header-nav[data-open]::before{content:'';position:fixed;top:var(--header-h);left:0;width:100vw;height:calc(100vh - var(--header-h));background:rgba(0,0,0,0.5);z-index:-1}}
@media(max-width:480px){.brand-text{font-size:18px}.brand-icon-shape{width:30px;height:30px;font-size:16px}.version-badge{font-size:10px;padding:3px 10px}}

/* ===== SITE FOOTER ===== */
.site-footer{background:#0B1026;border-top:2px solid #1E2450;padding:0;margin-top:var(--gap-xl)}
.footer-main{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:var(--gap-lg);max-width:var(--max-w);margin:0 auto;padding:var(--gap-xl) var(--gap-md) var(--gap-lg)}
.footer-brand .brand-link{margin-bottom:var(--gap-sm)}
.footer-desc{color:var(--color-text-secondary);font-size:14px;line-height:1.7;margin-top:var(--gap-sm);max-width:380px}
.footer-nav{display:flex;flex-direction:column;gap:var(--gap-sm)}
.footer-link{color:var(--color-text-secondary);font-size:15px;transition:color var(--transition-fast);padding:4px 0}
.footer-link:hover{color:var(--color-primary)}
.footer-contact .contact-note{color:var(--color-text-secondary);font-size:14px;line-height:1.7;padding:var(--gap-sm) 0}
.footer-meta{max-width:var(--max-w);margin:0 auto;padding:var(--gap-md) var(--gap-md) var(--gap-sm);border-top:1px solid rgba(255,255,255,0.06);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--gap-sm)}
.icp-info{color:var(--color-text-muted);font-size:13px}
.trust-statement{color:var(--color-text-muted);font-size:12px;max-width:500px;font-style:italic}
.channel-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px var(--gap-md);background:rgba(16,185,129,0.12);border-top:1px solid rgba(255,255,255,0.05);font-size:14px;font-weight:600;color:var(--color-text-primary);transition:background var(--transition-med)}
.channel-bar[data-channel-status="ok"]{background:rgba(16,185,129,0.12)}
.channel-bar[data-channel-status="err"]{background:rgba(239,68,68,0.12)}
.channel-dot{width:10px;height:10px;border-radius:50%;background:var(--color-success);box-shadow:0 0 8px rgba(16,185,129,0.5);animation:pulse-dot 2s ease-in-out infinite}
.channel-bar[data-channel-status="err"] .channel-dot{background:var(--color-error);box-shadow:0 0 8px rgba(239,68,68,0.5)}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}
@media(prefers-reduced-motion:reduce){.channel-dot{animation:none}}
.channel-label{font-weight:700}
.channel-bar[data-channel-status="ok"] .channel-label{color:var(--color-success)}
.channel-bar[data-channel-status="err"] .channel-label{color:var(--color-error)}
.channel-bar a{color:var(--color-primary);text-decoration:underline;margin-left:4px}
.channel-bar a:hover{color:var(--color-primary-hover)}
@media(max-width:768px){.footer-main{grid-template-columns:1fr;gap:var(--gap-md);padding:var(--gap-lg) var(--gap-md)}.footer-desc{max-width:100%}.footer-meta{flex-direction:column;align-items:flex-start;gap:6px}.channel-bar{font-size:13px;flex-wrap:wrap;padding:10px var(--gap-md)}}
@media(max-width:480px){.channel-bar{font-size:12px;gap:8px;flex-direction:column;text-align:center}}

/* ===== COMMON COMPONENTS ===== */
.max-w{max-width:var(--max-w);margin:0 auto;padding:0 var(--gap-md)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;font-size:16px;font-weight:700;border-radius:8px;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);cursor:pointer;text-decoration:none;transform:skewX(-3deg);letter-spacing:0.3px}
.btn-primary{background:#FF6600;color:#fff;box-shadow:0 4px 16px rgba(255,102,0,0.3)}
.btn-primary:hover{background:#FF8533;box-shadow:0 6px 24px rgba(255,102,0,0.45);transform:skewX(-3deg) translateY(-2px)}
.btn-outline{background:transparent;color:#FF6600;border:2px solid #FF6600;box-shadow:0 0 12px rgba(255,102,0,0.1)}
.btn-outline:hover{background:rgba(255,102,0,0.1);box-shadow:0 0 20px rgba(255,102,0,0.25);transform:skewX(-3deg) translateY(-2px)}
.section-title{font-family:var(--font-heading);font-weight:800;font-size:32px;color:var(--color-white);letter-spacing:-0.5px;position:relative;padding-bottom:var(--gap-sm);margin-bottom:var(--gap-lg)}
.section-title::before{content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:var(--color-accent-gradient);transform:skewX(-12deg);border-radius:2px}
.section-title.section-title--center{text-align:center}
.section-title.section-title--center::before{left:50%;transform:translateX(-50%) skewX(-12deg)}
@media(max-width:768px){.section-title{font-size:26px}}
.grid-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg)}
.grid-cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap-lg)}
@media(max-width:768px){.grid-cols-2,.grid-cols-3{grid-template-columns:1fr;gap:var(--gap-md)}}
.card{background:#151A3A;border-radius:12px;padding:var(--gap-lg);border:1px solid rgba(255,255,255,0.06);transform:skewX(0);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--color-accent-gradient);transform:skewX(-6deg) translateX(-2px);opacity:0;transition:opacity var(--transition-fast)}
.card:hover{border-color:rgba(255,102,0,0.25);box-shadow:0 8px 32px rgba(255,102,0,0.08);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.tag{display:inline-flex;align-items:center;padding:4px 12px;font-size:12px;font-weight:600;border-radius:20px;letter-spacing:0.5px;text-transform:uppercase}
.tag-ok{background:rgba(16,185,129,0.15);color:var(--color-success);border:1px solid rgba(16,185,129,0.3)}
.tag-err{background:rgba(239,68,68,0.15);color:var(--color-error);border:1px solid rgba(239,68,68,0.3)}
.tag-version{background:rgba(255,102,0,0.1);color:var(--color-primary);border:1px solid rgba(255,102,0,0.2)}
/* ===== IMAGE CONTAINER BASE ===== */
.img-container{position:relative;overflow:hidden;border-radius:10px;background:#1E2450;transform:skewX(-1deg)}
.img-container img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-med)}
.img-container:hover img{transform:scale(1.03)}
.img-container--hero{height:420px;border-radius:14px}
.img-container--card{height:200px;border-radius:10px}
.img-container--wide{height:280px;border-radius:12px}
@media(max-width:768px){.img-container--hero{height:260px}.img-container--card{height:160px}.img-container--wide{height:200px}}
/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px 12px;padding:var(--gap-md) 0;font-size:14px;color:var(--color-text-secondary)}
.breadcrumb a{color:var(--color-text-secondary);transition:color var(--transition-fast);position:relative}
.breadcrumb a::after{content:'/';margin-left:8px;color:var(--color-text-muted)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb span:last-child{color:var(--color-text-primary);font-weight:600}
/* ===== MAIN CONTENT WRAPPER ===== */
#main-content{min-height:60vh;padding-top:var(--gap-md)}
/* ===== UTILITY ===== */
.text-primary{color:var(--color-primary)}
.text-gradient{background:var(--color-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-center{text-align:center}
.mt-lg{margin-top:var(--gap-lg)}
.mb-lg{margin-bottom:var(--gap-lg)}
.py-xl{padding-top:var(--gap-xl);padding-bottom:var(--gap-xl)}