/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.skip-link{position:fixed;top:-100%;left:0;z-index:999;padding:0.5rem 1rem;background:var(--color-accent);color:var(--color-bg);font-weight:700;transition:top 0.2s}
.skip-link:focus{top:0}
/* Variables */
:root{
  --color-primary:#0D0D0D;
  --color-secondary:#FFFFFF;
  --color-accent:#1A5CFF;
  --color-accent-secondary:#7B2FF7;
  --color-accent-highlight:#39FF14;
  --color-bg:#050505;
  --color-surface:#1A1A1A;
  --color-text:#FFFFFF;
  --color-text-secondary:#B3B3B3;
  --glass:rgba(255,255,255,0.05);
  --overlay:rgba(0,0,0,0.6);
  --font-heading:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:3rem;
  --space-xl:4rem;
  --radius:0.25rem;
  --max-width:1280px;
  --nav-height:64px;
}
/* Container */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-sm);width:100%}
@media(min-width:768px){.container{padding:0 var(--space-md)}}
/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-height);background:rgba(5,5,5,0.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass);transition:background 0.4s,box-shadow 0.4s}
.site-header[data-scrolled]{background:rgba(5,5,5,0.95);box-shadow:0 2px 20px rgba(0,0,0,0.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand-wrap{display:flex;align-items:center;gap:var(--space-sm)}
.brand{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;color:var(--color-secondary);text-decoration:none;text-shadow:0 0 8px var(--color-accent),0 0 20px var(--color-accent-secondary);letter-spacing:0.05em}
.tagline{font-size:0.75rem;color:var(--color-text-secondary);display:none}
@media(min-width:768px){.tagline{display:inline}}
.nav-toggle{background:none;border:none;color:var(--color-secondary);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;position:relative;z-index:10}
@media(min-width:768px){.nav-toggle{display:none}}
.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{display:block;width:24px;height:2px;background:var(--color-secondary);border-radius:2px;transition:all 0.3s;content:'';position:absolute}
.nav-toggle-icon{position:relative;background:var(--color-secondary)}
.nav-toggle-icon::before{top:-8px}
.nav-toggle-icon::after{top:8px}
[aria-expanded="true"] .nav-toggle-icon{background:transparent}
[aria-expanded="true"] .nav-toggle-icon::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .nav-toggle-icon::after{top:0;transform:rotate(-45deg)}
.nav{display:none;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;background:var(--color-bg);flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-xl);opacity:0;transition:opacity 0.3s}
.nav[data-open]{display:flex;opacity:1}
@media(min-width:768px){
  .nav{display:flex;position:static;background:transparent;flex-direction:row;gap:var(--space-md);padding:0;opacity:1;justify-content:flex-end}
}
.nav-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-md);text-align:center}
@media(min-width:768px){
  .nav-list{flex-direction:row;gap:var(--space-sm)}
}
.nav-link{font-family:var(--font-heading);font-weight:500;font-size:1.1rem;color:var(--color-text-secondary);text-decoration:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);transition:color 0.2s,background 0.2s}
.nav-link:hover,.nav-link:focus{color:var(--color-secondary);background:var(--glass)}
.nav-link[aria-current="page"]{color:var(--color-accent);text-shadow:0 0 8px var(--color-accent);border-bottom:2px solid var(--color-accent);background:transparent}
@media(min-width:768px){
  .nav-link{font-size:0.95rem}
}
/* Footer */
.site-footer{background:var(--color-primary);border-top:1px solid var(--color-accent-secondary);padding:var(--space-lg) 0}
.footer-inner{display:grid;grid-template-columns:1fr;gap:var(--space-md)}
@media(min-width:768px){
  .footer-inner{grid-template-columns:2fr 1fr 1fr;align-items:start}
}
.footer-brand .brand{font-size:1.5rem}
.trust-statement{margin-top:var(--space-sm);color:var(--color-text-secondary);font-size:0.875rem;max-width:400px}
.footer-links{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-link{color:var(--color-text-secondary);text-decoration:none;font-size:0.9rem;transition:color 0.2s}
.footer-link:hover,.footer-link:focus{color:var(--color-accent)}
.footer-info{display:flex;flex-direction:column;gap:var(--space-xs);font-size:0.8rem;color:var(--color-text-secondary)}
.contact-line a{color:var(--color-accent);text-decoration:none}
.icp,.copyright{opacity:0.8}
/* Progress Bar */
.progress-bar{position:fixed;top:var(--nav-height);left:0;right:0;z-index:99;height:3px;background:transparent;pointer-events:none}
.progress-bar::after{content:'';display:block;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-highlight));width:0%;transition:width 0.1s linear;will-change:width}
[data-scrolled] .progress-bar::after{width:var(--progress,0%)}
/* Utility Classes */
.glow-text{color:var(--color-secondary);text-shadow:0 0 10px var(--color-accent),0 0 30px var(--color-accent-secondary),0 0 60px var(--color-accent-highlight)}
.glass-panel{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:var(--space-md)}
.btn{display:inline-flex;align-items:center;gap:var(--space-xs);font-family:var(--font-heading);font-weight:600;font-size:0.95rem;padding:0.75rem 1.5rem;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:all 0.3s;text-align:center}
.btn[data-variant="primary"]{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent)}
.btn[data-variant="primary"]:hover,.btn[data-variant="primary"]:focus{background:var(--color-accent-secondary);border-color:var(--color-accent-secondary)}
.btn[data-variant="outline"]{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}
.btn[data-variant="outline"]:hover,.btn[data-variant="outline"]:focus{background:var(--color-accent);color:var(--color-bg)}
.btn[data-variant="ghost"]{background:transparent;color:var(--color-text-secondary);border-color:transparent}
.btn[data-variant="ghost"]:hover,.btn[data-variant="ghost"]:focus{color:var(--color-secondary);background:var(--glass)}
.section-title{font-family:var(--font-heading);font-size:2rem;font-weight:700;margin-bottom:var(--space-md);position:relative;display:inline-block}
.section-title::after{content:'';display:block;width:60%;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-secondary));margin-top:var(--space-xs);clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%)}
.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-md);padding:var(--space-md) 0}
@media(min-width:768px){
  .bento-grid{grid-template-columns:repeat(4,1fr)}
}
.bento-card{background:var(--color-surface);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:var(--space-md);transition:transform 0.3s,box-shadow 0.3s;position:relative;overflow:hidden}
.bento-card[data-accent]{border-color:var(--color-accent);box-shadow:0 0 20px rgba(26,92,255,0.15)}
.bento-card[data-accent="secondary"]{border-color:var(--color-accent-secondary)}
.bento-card[data-accent="highlight"]{border-color:var(--color-accent-highlight);box-shadow:0 0 20px rgba(57,255,20,0.15)}
.bento-card[data-span="2"]{grid-column:span 2}
.bento-card[data-span="3"]{grid-column:span 3}
.bento-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.4)}
@media(min-width:768px){
  .bento-card[data-span="2"]{grid-column:span 2}
  .bento-card[data-span="3"]{grid-column:span 3}
}
/* Responsive images placeholder */
.img-container{position:relative;overflow:hidden;background:var(--color-surface);min-height:200px;border-radius:var(--radius)}
.img-container::before{content:'';display:block;padding-bottom:56.25%;background:linear-gradient(135deg,var(--color-surface),var(--color-primary))}
/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto}
}
