/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;}
body{min-height:100vh;background:#0D0D1A;color:#EAEAEA;font-family:'Noto Sans SC','PT Mono','Courier New',monospace,'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:1rem;overflow-x:hidden;}
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;}
:focus-visible{outline:3px solid #FFD700;outline-offset:3px;border-radius:4px;}
/* ===== VARIABLES ===== */
:root{--color-red:#E53935;--color-blue:#1565C0;--color-gold:#FFD700;--color-bg:#0D0D1A;--color-card:#1A1A2E;--color-text:#EAEAEA;--color-muted:#9E9E9E;--color-border:#FFD700;--font-heading:'Montserrat','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;--font-body:'Noto Sans SC','PT Mono','Courier New',monospace,'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;--nav-height:64px;--capsule-radius:48px;--transition:0.25s cubic-bezier(0.25,0.46,0.45,0.94);}
/* ===== SKIP LINK ===== */
.skip-link{position:absolute;top:-100%;left:1rem;background:#FFD700;color:#0D0D1A;padding:0.5rem 1.2rem;border-radius:0 0 8px 8px;font-weight:700;z-index:10000;transition:top 0.2s;}
.skip-link:focus{top:0;}
/* ===== HEADER / NAV CAPSULE ===== */
.site-header{position:fixed;top:1.2rem;left:0;right:0;z-index:9999;display:flex;justify-content:center;pointer-events:none;}
.nav-capsule{pointer-events:auto;background:rgba(13,13,26,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid rgba(255,215,0,0.6);border-radius:var(--capsule-radius);box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 0 1px rgba(255,215,0,0.15);display:flex;align-items:center;justify-content:space-between;width:auto;min-width:0;max-width:1200px;padding:0 1.6rem;height:var(--nav-height);margin:0 1.2rem;flex-grow:1;transition:border-color var(--transition),box-shadow var(--transition);}
.nav-capsule:hover{border-color:#FFD700;box-shadow:0 8px 48px rgba(255,215,0,0.18),0 0 0 1px rgba(255,215,0,0.3);}
.nav-brand{font-family:var(--font-heading);font-weight:800;font-size:1.6rem;font-style:italic;background:linear-gradient(135deg,#E53935 0%,#1565C0 70%,#FFD700 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0.04em;flex-shrink:0;margin-right:2rem;text-shadow:none;}
.nav-list{display:flex;gap:0.4rem;align-items:center;}
.nav-list li a{display:block;padding:0.4rem 0.9rem;border-radius:32px;font-family:var(--font-body);font-size:0.88rem;font-weight:500;color:#EAEAEA;transition:background var(--transition),color var(--transition),box-shadow var(--transition);white-space:nowrap;letter-spacing:0.02em;}
.nav-list li a:hover,.nav-list li a:focus-visible{background:rgba(229,57,53,0.2);color:#FFD700;box-shadow:inset 0 0 0 1px rgba(255,215,0,0.3);}
.nav-list li a[aria-current="page"]{background:linear-gradient(135deg,rgba(229,57,53,0.25),rgba(21,101,192,0.25));color:#FFD700;box-shadow:inset 0 0 0 2px #FFD700;font-weight:700;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,215,0,0.4);background:rgba(229,57,53,0.1);transition:background var(--transition),border-color var(--transition);padding:0.4rem;gap:4px;}
.nav-toggle:hover,.nav-toggle:focus-visible{background:rgba(229,57,53,0.25);border-color:#FFD700;}
.toggle-bar{display:block;width:20px;height:2px;background:#EAEAEA;border-radius:2px;transition:transform var(--transition),opacity var(--transition);}
/* ===== NAV DRAWER (MOBILE) ===== */
.nav-drawer{position:fixed;top:0;right:0;width:100%;max-width:360px;height:100vh;background:#0D0D1A;border-left:4px solid #FFD700;box-shadow:-20px 0 60px rgba(0,0,0,0.8);transform:translateX(100%);transition:transform var(--transition);z-index:9998;padding:6rem 2rem 2rem;overflow-y:auto;}
.nav-drawer[data-open]{transform:translateX(0);}
.drawer-list{display:flex;flex-direction:column;gap:0.6rem;}
.drawer-link{display:block;padding:0.9rem 1.2rem;border-radius:12px;font-family:var(--font-heading);font-weight:700;font-size:1.3rem;color:#EAEAEA;border:1px solid transparent;transition:background var(--transition),border-color var(--transition),color var(--transition);}
.drawer-link:hover,.drawer-link:focus-visible{background:rgba(229,57,53,0.15);border-color:rgba(255,215,0,0.4);color:#FFD700;}
.drawer-link[aria-current="page"]{background:linear-gradient(135deg,rgba(229,57,53,0.2),rgba(21,101,192,0.2));border-color:#FFD700;color:#FFD700;}
/* ===== FOOTER ===== */
.site-footer{background:#0D0D1A;border-top:4px solid #FFD700;padding:3rem 1.5rem 2rem;margin-top:4rem;}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:start;}
.footer-brand{display:flex;flex-direction:column;gap:0.5rem;}
.footer-logo{font-family:var(--font-heading);font-weight:800;font-size:1.8rem;font-style:italic;background:linear-gradient(135deg,#E53935,#1565C0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.footer-tagline{font-size:1rem;color:#FFD700;font-weight:500;letter-spacing:0.08em;}
.footer-nav{display:flex;flex-direction:column;gap:0.8rem;padding-top:0.3rem;}
.footer-link{font-size:0.95rem;color:#EAEAEA;border-left:3px solid transparent;padding-left:0.8rem;transition:border-color var(--transition),color var(--transition);}
.footer-link:hover,.footer-link:focus-visible{border-left-color:#FFD700;color:#FFD700;}
.footer-info{display:flex;flex-direction:column;gap:0.4rem;font-size:0.88rem;color:#9E9E9E;line-height:1.6;}
.footer-contact{margin:0;}
.footer-icp{color:#9E9E9E;font-size:0.82rem;}
/* ===== PROGRESS BAR ===== */
.progress-bar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,#E53935,#1565C0,#FFD700);width:0%;z-index:10001;border-radius:0 2px 2px 0;transition:width 0.1s linear;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.progress-bar{transition:none;}}
/* ===== BENTO GRID ===== */
.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;padding:1.2rem 0;}
.bento-item{background:#1A1A2E;border:2px solid rgba(255,215,0,0.25);border-radius:16px;padding:1.6rem;box-shadow:0 8px 24px rgba(0,0,0,0.3);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);}
.bento-item:hover{border-color:rgba(255,215,0,0.6);box-shadow:0 12px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(255,215,0,0.15);transform:translateY(-4px);}
.bento-item.featured{grid-column:span 2;grid-row:span 2;border-color:#FFD700;}
/* ===== FRAME VIEWPORT ===== */
.frame-viewport{border:4px solid #FFD700;border-radius:20px;padding:2.5rem;position:relative;background:#1A1A2E;box-shadow:inset 0 0 40px rgba(255,215,0,0.05),0 12px 48px rgba(0,0,0,0.5);}
.frame-viewport::before{content:'';position:absolute;top:-12px;left:2rem;width:60px;height:6px;background:linear-gradient(90deg,#E53935,#1565C0);border-radius:3px;}
/* ===== MONO INDEX ===== */
.mono-index{font-family:'PT Mono','Courier New',monospace;font-size:0.92rem;color:#FFD700;background:rgba(255,215,0,0.08);padding:0.1rem 0.5rem;border-radius:4px;border-left:2px solid #E53935;}
/* ===== GOLD DIVIDER ===== */
.gold-divider{height:4px;background:linear-gradient(90deg,#FFD700,transparent);border-radius:2px;margin:2rem 0;width:100%;max-width:120px;}
.gold-divider.angled{transform:skew(-12deg);max-width:180px;}
/* ===== BUTTONS ===== */
.btn-primary{display:inline-block;font-family:var(--font-heading);font-weight:700;font-size:1rem;padding:0.8rem 2rem;border-radius:40px;background:linear-gradient(135deg,#E53935,#c62828);color:#fff;border:2px solid transparent;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);text-align:center;}
.btn-primary:hover,.btn-primary:focus-visible{background:linear-gradient(135deg,#c62828,#b71c1c);border-color:#FFD700;box-shadow:0 0 24px rgba(255,215,0,0.25);}
.btn-ghost{display:inline-block;font-family:var(--font-heading);font-weight:600;font-size:0.95rem;padding:0.6rem 1.6rem;border-radius:40px;color:#EAEAEA;border:2px solid rgba(255,215,0,0.4);background:transparent;transition:background var(--transition),border-color var(--transition),color var(--transition);text-align:center;}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,215,0,0.1);border-color:#FFD700;color:#FFD700;}
/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:0.4rem 0.8rem;align-items:center;padding:0.8rem 0;font-size:0.85rem;color:#9E9E9E;}
.breadcrumb a{color:#EAEAEA;transition:color var(--transition);}
.breadcrumb a:hover{color:#FFD700;}
.breadcrumb .sep{color:#FFD700;font-weight:700;}
.breadcrumb .current{color:#FFD700;font-weight:600;}
/* ===== CONTENT CONTAINER ===== */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem;}
.section{padding:4rem 0;}
.section-title{font-family:var(--font-heading);font-weight:800;font-size:2rem;font-style:italic;margin-bottom:1.5rem;border-left:6px solid #E53935;padding-left:1.2rem;background:linear-gradient(135deg,#EAEAEA 60%,#9E9E9E);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .nav-capsule{margin:0 1rem;padding:0 1.2rem;}
  .nav-list li a{padding:0.35rem 0.7rem;font-size:0.82rem;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:1.5rem;}
}
@media (max-width:768px){
  .site-header{top:0.8rem;}
  .nav-capsule{border-radius:40px;padding:0 1rem;height:56px;margin:0 0.6rem;}
  .nav-brand{font-size:1.4rem;margin-right:1rem;}
  .nav-list{display:none;}
  .nav-toggle{display:flex;}
  .nav-drawer{max-width:100%;}
  .footer-inner{grid-template-columns:1fr;gap:1.8rem;text-align:center;}
  .footer-nav{align-items:center;}
  .footer-link{padding-left:0;border-left:none;border-bottom:2px solid transparent;padding-bottom:0.3rem;}
  .footer-link:hover{border-bottom-color:#FFD700;border-left-color:transparent;}
  .bento-item.featured{grid-column:span 1;grid-row:span 1;}
  .frame-viewport{padding:1.5rem;}
  .section-title{font-size:1.6rem;}
}
@media (max-width:480px){
  .nav-capsule{margin:0 0.4rem;padding:0 0.8rem;height:50px;border-radius:32px;}
  .nav-brand{font-size:1.2rem;}
  .container{padding:0 1rem;}
  .section{padding:2.5rem 0;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}
  html{scroll-behavior:auto;}
  .bento-item:hover{transform:none;}
}