/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
a{text-decoration:none;color:inherit}
table{border-collapse:collapse;border-spacing:0}
:focus-visible{outline:2px solid #8A2BE2;outline-offset:2px}

/* === VARIABLES === */
:root{
  --c-bg-dark:#0A0A0A;
  --c-bg-deep:#1A1A1A;
  --c-bg-warm:#F5E6C8;
  --c-bg-warm-light:#FCF5E8;
  --c-neon-purple:#8A2BE2;
  --c-neon-blue:#00BFFF;
  --c-neon-gold:#FFD700;
  --c-text-dark:#2F2F2F;
  --c-text-light:#BFBFBF;
  --c-text-white:#FFFFFF;
  --c-error:#FF4444;
  --c-success:#44FF44;
  --c-border-subtle:rgba(138,43,226,0.2);
  --c-glow-purple:0 0 12px rgba(138,43,226,0.6);
  --c-glow-blue:0 0 12px rgba(0,191,255,0.5);
  --c-glow-gold:0 0 12px rgba(255,215,0,0.5);
  --font-heading:'Arial Black','Impact',sans-serif;
  --font-body:-apple-system,'Open Sans','Roboto',sans-serif;
  --font-mono:'Courier New',monospace;
  --fs-hero:clamp(2.5rem,5vw,3.5rem);
  --fs-h1:clamp(2rem,4vw,3rem);
  --fs-h2:clamp(1.5rem,3vw,2.25rem);
  --fs-h3:clamp(1.125rem,2vw,1.5rem);
  --fs-body:1rem;
  --fs-small:0.75rem;
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-xxl:64px;
  --container-max:1200px;
  --radius:0;
  --transition-fast:0.2s ease;
  --transition-medium:0.3s ease;
  --z-header:100;
  --z-progress:110;
  --z-nav-mobile:90;
  --z-skip:200;
}

/* === BASE TYPOGRAPHY === */
body{font-family:var(--font-body);font-size:var(--fs-body);color:var(--c-text-dark);background:var(--c-bg-warm)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.2;letter-spacing:-0.01em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p,li{font-family:var(--font-body);line-height:1.7;max-width:70ch}
code,.mono{font-family:var(--font-mono)}
::selection{background:var(--c-neon-purple);color:var(--c-text-white)}

/* === CONTAINER === */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding-left:var(--space-md);padding-right:var(--space-md)}
@media(min-width:768px){.container{padding-left:var(--space-lg);padding-right:var(--space-lg)}}
@media(min-width:1024px){.container{padding-left:var(--space-xl);padding-right:var(--space-xl)}}

/* === SKIP LINK === */
.skip-link{
  position:fixed;top:var(--space-xs);left:var(--space-xs);z-index:var(--z-skip);
  padding:var(--space-xs) var(--space-sm);
  background:var(--c-bg-deep);color:var(--c-text-white);
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:700;
  transform:translateY(-120%);transition:transform var(--transition-fast);
  border:1px solid var(--c-neon-gold)
}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--c-neon-gold);outline-offset:2px}

/* === HEADER === */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--transition-medium),border-color var(--transition-medium),box-shadow var(--transition-medium);
  padding:var(--space-sm) 0
}
.site-header[data-scrolled]{
  background:var(--c-bg-warm);
  border-color:var(--c-border-subtle);
  box-shadow:0 2px 20px rgba(0,0,0,0.08)
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.site-logo{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-heading);font-size:var(--fs-h3);color:var(--c-text-white);transition:color var(--transition-fast)}
.site-header[data-scrolled] .site-logo{color:var(--c-text-dark)}
.site-logo__icon{
  display:inline-block;width:28px;height:28px;
  background:linear-gradient(135deg,var(--c-neon-purple),var(--c-neon-blue));
  clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
  box-shadow:var(--c-glow-purple)
}
.site-logo__icon--small{width:20px;height:20px}
.site-logo__text{white-space:nowrap}
.site-header[data-scrolled] .site-logo__icon{box-shadow:none}

/* === NAVIGATION === */
.primary-nav__list{display:flex;align-items:center;gap:var(--space-xxs)}
.primary-nav__list a{
  display:block;padding:var(--space-xs) var(--space-sm);
  font-family:var(--font-heading);font-size:var(--fs-small);font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  color:var(--c-text-white);transition:color var(--transition-fast),text-shadow var(--transition-fast);
  position:relative;white-space:nowrap
}
.site-header[data-scrolled] .primary-nav__list a{color:var(--c-text-dark)}
.primary-nav__list a::after{
  content:'';position:absolute;bottom:2px;left:var(--space-sm);right:var(--space-sm);
  height:2px;background:var(--c-neon-purple);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition-fast)
}
.primary-nav__list a:hover::after,
.primary-nav__list a:focus-visible::after{transform:scaleX(1)}
.primary-nav__list a:hover,
.primary-nav__list a:focus-visible{text-shadow:0 0 8px rgba(138,43,226,0.4)}
.site-header[data-scrolled] .primary-nav__list a:hover,
.site-header[data-scrolled] .primary-nav__list a:focus-visible{color:var(--c-neon-purple);text-shadow:none}
.primary-nav__list a[aria-current="page"]{color:var(--c-neon-gold);text-shadow:0 0 12px rgba(255,215,0,0.3)}
.primary-nav__list a[aria-current="page"]::after{transform:scaleX(1);background:var(--c-neon-gold)}
.site-header[data-scrolled] .primary-nav__list a[aria-current="page"]{color:var(--c-neon-purple);text-shadow:none}
.site-header[data-scrolled] .primary-nav__list a[aria-current="page"]::after{background:var(--c-neon-purple)}

/* === NAV TOGGLE (mobile) === */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,0.2);cursor:pointer;padding:var(--space-xs);transition:border-color var(--transition-fast)}
.site-header[data-scrolled] .nav-toggle{border-color:rgba(47,47,47,0.2)}
.nav-toggle__bar{display:block;width:22px;height:2px;background:var(--c-text-white);transition:transform var(--transition-medium),opacity var(--transition-fast)}
.site-header[data-scrolled] .nav-toggle__bar{background:var(--c-text-dark)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:767px){
  .nav-toggle{display:flex}
  .primary-nav{
    position:fixed;top:0;right:0;bottom:0;width:300px;max-width:80vw;
    background:var(--c-bg-deep);padding:var(--space-xl) var(--space-lg);
    transform:translateX(100%);transition:transform var(--transition-medium);
    z-index:var(--z-nav-mobile);
    border-left:2px solid var(--c-neon-purple);
    box-shadow:-4px 0 30px rgba(0,0,0,0.6);
    overflow-y:auto
  }
  .primary-nav[data-open]{transform:translateX(0)}
  .primary-nav__list{flex-direction:column;align-items:stretch;gap:var(--space-xs)}
  .primary-nav__list a{
    color:var(--c-text-white);font-size:var(--fs-body);
    padding:var(--space-sm) var(--space-xs);
    border-bottom:1px solid rgba(255,255,255,0.06)
  }
  .primary-nav__list a::after{display:none}
  .primary-nav__list a:hover,.primary-nav__list a:focus-visible{color:var(--c-neon-gold);text-shadow:0 0 10px rgba(255,215,0,0.3)}
  .primary-nav__list a[aria-current="page"]{color:var(--c-neon-gold);text-shadow:0 0 10px rgba(255,215,0,0.3)}
  .site-header[data-scrolled] .primary-nav__list a[aria-current="page"]{color:var(--c-neon-gold)}
  /* backdrop overlay */
  .primary-nav[data-open]::before{
    content:'';position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);z-index:-1
  }
}

/* === FOOTER === */
.site-footer{
  background:var(--c-bg-deep);color:var(--c-text-light);
  padding:var(--space-xl) 0 var(--space-lg);
  border-top:2px solid var(--c-neon-purple);
  position:relative;overflow:hidden
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-neon-blue),var(--c-neon-gold),var(--c-neon-purple),transparent);
  opacity:0.4
}
.site-footer__inner{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}
@media(min-width:768px){
  .site-footer__inner{grid-template-columns:1fr 1fr 1.5fr;align-items:start}
}
.site-footer__brand{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-heading);font-size:var(--fs-h3);color:var(--c-text-white)}
.site-footer__nav{display:flex;flex-direction:column;gap:var(--space-xs)}
.site-footer__nav a{
  font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--c-neon-blue);transition:color var(--transition-fast),text-shadow var(--transition-fast);
  padding:var(--space-xxs) 0
}
.site-footer__nav a:hover,.site-footer__nav a:focus-visible{color:var(--c-neon-gold);text-shadow:0 0 8px rgba(255,215,0,0.3)}
.site-footer__info{display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--fs-small);line-height:1.6}
.site-footer__address,.site-footer__email,.site-footer__copyright{margin:0;opacity:0.8}
.site-footer__email{color:var(--c-neon-blue)}
.site-footer__copyright{color:var(--c-text-light);margin-top:var(--space-xs)}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  padding:var(--space-sm) var(--space-lg);
  font-family:var(--font-heading);font-size:var(--fs-small);font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  border:2px solid transparent;cursor:pointer;
  transition:all var(--transition-fast);position:relative;
  text-decoration:none;line-height:1;white-space:nowrap
}
.btn--primary{background:var(--c-neon-purple);color:var(--c-text-white);border-color:var(--c-neon-purple)}
.btn--primary:hover,.btn--primary:focus-visible{background:transparent;color:var(--c-neon-purple);box-shadow:var(--c-glow-purple)}
.btn--outline{background:transparent;color:var(--c-neon-blue);border-color:var(--c-neon-blue)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--c-neon-blue);color:var(--c-bg-deep);box-shadow:var(--c-glow-blue)}
.btn--ghost{background:transparent;color:var(--c-text-dark);border-color:transparent}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--c-neon-purple);text-shadow:0 0 8px rgba(138,43,226,0.3)}
.site-header[data-scrolled] .btn--ghost{color:var(--c-text-white)}
.site-header[data-scrolled] .btn--ghost:hover,.site-header[data-scrolled] .btn--ghost:focus-visible{color:var(--c-neon-gold)}

/* === TAGS === */
.tag{
  display:inline-block;padding:var(--space-xxs) var(--space-sm);
  font-family:var(--font-mono);font-size:var(--fs-small);font-weight:700;
  border:1px solid var(--c-neon-blue);color:var(--c-neon-blue);
  background:transparent;text-transform:uppercase;letter-spacing:0.05em
}

/* === CARDS === */
.card{
  background:var(--c-bg-deep);border:1px solid rgba(255,255,255,0.08);
  padding:var(--space-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)
}
.card:hover,.card:focus-within{border-color:var(--c-neon-purple);box-shadow:var(--c-glow-purple)}
.card__title{font-family:var(--font-heading);font-size:var(--fs-h3);color:var(--c-text-white);margin-bottom:var(--space-sm)}
.card__text{font-size:var(--fs-body);color:var(--c-text-light);line-height:1.6}

/* === GRID === */
.grid{display:grid;gap:var(--space-lg)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:640px){
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:1fr 1fr}
}
@media(min-width:960px){
  .grid--3{grid-template-columns:1fr 1fr 1fr}
  .grid--4{grid-template-columns:1fr 1fr 1fr 1fr}
}

/* === SECTION NUMBER === */
.section-number{
  font-family:var(--font-mono);font-size:var(--fs-h1);font-weight:900;
  color:var(--c-neon-gold);line-height:1;display:block;
  text-shadow:0 0 15px rgba(255,215,0,0.15);
  margin-bottom:var(--space-xs)
}

/* === BREADCRUMB === */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);padding:var(--space-sm) 0;font-size:var(--fs-small);color:var(--c-text-light)}
.breadcrumb a{color:var(--c-neon-blue);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--c-neon-purple)}
.breadcrumb span::after{content:'›';margin-left:var(--space-xs);color:var(--c-neon-gold);font-weight:700}
.breadcrumb span:last-child::after{display:none}

/* === PROGRESS BAR === */
.progress-bar{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:transparent;z-index:var(--z-progress);pointer-events:none
}
.progress-bar__fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--c-neon-purple),var(--c-neon-blue),var(--c-neon-gold));
  transition:width 0.1s linear
}

/* === FADE IN (scroll reveal) === */
.fade-in{opacity:1;transform:translateY(0);transition:opacity 0.5s ease,transform 0.5s ease}
.fade-in[data-hidden]{opacity:0;transform:translateY(24px)}
.fade-in[data-hidden][data-delay="1"]{transition-delay:0.1s}
.fade-in[data-hidden][data-delay="2"]{transition-delay:0.2s}
.fade-in[data-hidden][data-delay="3"]{transition-delay:0.3s}
.fade-in[data-hidden][data-delay="4"]{transition-delay:0.4s}
.fade-in[data-hidden][data-delay="5"]{transition-delay:0.5s}

/* === IMAGE CONTAINER === */
.img-container{display:block;width:100%;overflow:hidden;background:var(--c-bg-warm-light);position:relative}
.img-container::before{content:'';display:block}
.img-container--4-3::before{padding-bottom:75%}
.img-container--16-9::before{padding-bottom:56.25%}
.img-container--1-1::before{padding-bottom:100%}
.img-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

/* === RESPONSIVE UTILITY === */
@media(min-width:768px){.hide-md-up{display:none!important}}
@media(max-width:767px){.hide-md-down{display:none!important}}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .fade-in[data-hidden]{opacity:1;transform:translateY(0)}
  .progress-bar{display:none}
  html{scroll-behavior:auto}
}

/* === FOCUS VISIBLE (enhanced) === */
a:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--c-neon-gold);outline-offset:2px}

/* === ACCESSIBLE RICH TEXT === */
.rich-text h2,.rich-text h3,.rich-text h4{margin-top:var(--space-lg);margin-bottom:var(--space-sm)}
.rich-text p{margin-bottom:var(--space-sm)}
.rich-text ul,.rich-text ol{padding-left:var(--space-lg);margin-bottom:var(--space-sm)}
.rich-text li{list-style:disc;margin-bottom:var(--space-xxs)}
.rich-text a{color:var(--c-neon-purple);border-bottom:1px solid transparent;transition:border-color var(--transition-fast)}
.rich-text a:hover{border-color:var(--c-neon-purple)}
.rich-text blockquote{border-left:3px solid var(--c-neon-gold);padding-left:var(--space-md);margin:var(--space-lg) 0;font-style:italic;color:var(--c-text-dark)}

/* === HERO PLACEHOLDER (for page use) === */
.hero-section{
  min-height:100vh;display:flex;align-items:center;
  background:var(--c-bg-deep);color:var(--c-text-white);
  padding:calc(var(--space-xxl) * 1.5) 0 var(--space-xl);
  position:relative;overflow:hidden
}
.hero-section::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--c-neon-purple),var(--c-neon-blue),var(--c-neon-gold),var(--c-neon-purple));
  background-size:200% 100%;animation:heroGlow 4s linear infinite
}
@keyframes heroGlow{0%{background-position:0% 0%}100%{background-position:200% 0%}}
@media(prefers-reduced-motion:reduce){.hero-section::after{animation:none;background-position:0% 0%}}