/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;font-weight:400;line-height:1.6;color:#ffffff;background-color:#0b0e16;min-height:100vh;overflow-x:hidden}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid #39ff14;outline-offset:2px}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* CSS Variables */
:root{
  --bg-dark:#0b0e16;
  --surface-dark:#131724;
  --card-dark:#1a1f30;
  --neon-green:#39ff14;
  --electric-blue:#00d4ff;
  --metal-gold:#ffd700;
  --text-primary:#ffffff;
  --text-secondary:#b0b8d1;
  --text-on-neon:#000000;
  --border-subtle:#2a2f45;
  --hover-glow:rgba(57,255,20,0.3);
  --header-width:220px;
  --header-width-tablet:180px;
  --z-header:1000;
  --z-progress:1001;
  --z-nav-toggle:1002;
  --z-skip:1003;
}

/* Skip link */
.skip-link{position:absolute;top:-100px;left:8px;padding:8px 16px;background:#131724;color:#39ff14;border:1px solid #39ff14;z-index:var(--z-skip);font-weight:700;transition:top .2s}
.skip-link:focus{top:8px}

/* Header – left rail */
.site-header{
  position:fixed;top:0;left:0;width:var(--header-width);height:100vh;background:var(--surface-dark);
  display:flex;flex-direction:column;padding:24px 16px;z-index:var(--z-header);
  border-right:1px solid var(--border-subtle);overflow-y:auto
}
.brand-link{font-size:1.5rem;font-weight:900;letter-spacing:.08em;color:var(--neon-green);text-transform:uppercase}
.brand-link:hover{text-shadow:0 0 8px var(--neon-green)}
.nav-toggle{display:none;position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:8px;z-index:var(--z-nav-toggle)}
.nav-toggle-line{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:all .3s}
.side-nav{margin-top:40px;flex:1}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-list a{display:block;padding:10px 12px;font-size:.95rem;font-weight:600;letter-spacing:.03em;color:var(--text-secondary);border-radius:4px;transition:background .2s,color .2s}
.nav-list a:hover,.nav-list a:focus-visible{background:var(--hover-glow);color:var(--neon-green)}
.nav-list a[aria-current="page"]{color:var(--neon-green);background:rgba(57,255,20,0.1);border-left:3px solid var(--neon-green)}
.header-actions{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.btn-primary{display:inline-block;padding:10px 20px;background:var(--neon-green);color:var(--text-on-neon);font-weight:800;letter-spacing:.05em;border-radius:6px;transition:box-shadow .2s,transform .2s;text-align:center}
.btn-primary:hover{box-shadow:0 0 20px var(--neon-green);transform:scale(1.02)}
.btn-apple-icon{font-size:1.4rem;transition:transform .2s;opacity:.8}
.btn-apple-icon:hover{transform:scale(1.15);opacity:1}

/* Reading progress bar */
.reading-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--neon-green),var(--electric-blue));z-index:var(--z-progress);width:0%;transition:width .1s linear}

/* Main content offset */
body > main{margin-left:var(--header-width);min-height:100vh;padding:0}
/* For home page specific box framing, we use .box-frame class */

/* Footer */
.site-footer{
  background:var(--surface-dark);border-top:1px solid var(--border-subtle);
  margin-left:var(--header-width);padding:40px 32px 24px;color:var(--text-secondary)
}
.footer-inner{display:flex;flex-wrap:wrap;gap:32px;max-width:1200px;margin:0 auto}
.footer-brand{flex:1 1 260px}
.footer-logo{font-size:1.6rem;font-weight:900;letter-spacing:.08em;color:var(--neon-green)}
.footer-tagline{margin-top:8px;font-size:.9rem}
.footer-links{display:flex;flex-direction:column;gap:8px;flex:1 1 160px}
.footer-links a{font-weight:600;color:var(--electric-blue);transition:color .2s}
.footer-links a:hover{color:var(--neon-green)}
.footer-contact{flex:1 1 240px;display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.footer-legal{width:100%;padding-top:16px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--text-secondary)}
.trust-statement{font-style:italic}
.footer-copyright{width:100%;text-align:center;padding-top:16px;font-size:.8rem;opacity:.7}

/* General container */
.container{max-width:1200px;margin:0 auto;padding:32px 24px}

/* Box frame (for featured sections) */
.box-frame{position:relative;padding:32px;border:1px solid var(--border-subtle);background:var(--card-dark)}
.box-frame::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:1px dashed rgba(0,212,255,.3);pointer-events:none}
.box-frame.accent-green{border-color:var(--neon-green)}
.box-frame.accent-blue{border-color:var(--electric-blue)}

/* Utilities */
.text-neon{color:var(--neon-green)}
.text-blue{color:var(--electric-blue)}
.text-gold{color:var(--metal-gold)}
.bg-surface{background:var(--surface-dark)}

/* Responsive */
@media(max-width:1024px){
  .site-header{width:var(--header-width-tablet);padding:20px 12px}
  body > main,.site-footer{margin-left:var(--header-width-tablet)}
  .brand-link{font-size:1.2rem}
}
@media(max-width:768px){
  .site-header{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;padding:12px 16px;border-right:none;border-bottom:1px solid var(--border-subtle);z-index:var(--z-header)}
  .site-header .brand{flex:1}
  .nav-toggle{display:block}
  .side-nav{position:fixed;top:0;left:0;width:280px;height:100vh;background:var(--surface-dark);transform:translateX(-100%);transition:transform .3s ease;padding:80px 20px 20px;border-right:1px solid var(--border-subtle);margin-top:0;overflow-y:auto;z-index:var(--z-nav-toggle)}
  .side-nav[data-open]{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.5)}
  .nav-list a{padding:14px 12px}
  .header-actions{display:none}/* actions move to drawer or other place */
  body > main,.site-footer{margin-left:0}
  .site-footer{padding:32px 16px 20px}
  .footer-inner{flex-direction:column}
  .reading-progress{top:auto;bottom:0}/* optional adjustment */
}