/* === 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%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
table{border-collapse:collapse;border-spacing:0}
:focus-visible{outline:2px solid #1E90FF;outline-offset:2px;border-radius:2px}

/* === VARIABLES === */
:root{
  --clr-primary:#1E90FF;
  --clr-primary-dark:#1873CC;
  --clr-accent:#FF6B35;
  --clr-accent-light:#FF8C42;
  --clr-highlight:#39FF14;
  --clr-bg:#1A1A2E;
  --clr-surface:#16213E;
  --clr-text:#FFFFFF;
  --clr-text-secondary:#B0B0B0;
  --clr-border:#2A2A4A;
  --clr-overlay:rgba(26,26,46,0.92);
  --font-heading:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-mono:'Fira Code','Cascadia Code','JetBrains Mono',monospace;
  --size-ratio:1.25;
  --size-xs:calc(0.75rem * var(--size-ratio));
  --size-sm:calc(0.875rem * var(--size-ratio));
  --size-base:1rem;
  --size-md:calc(1rem * var(--size-ratio));
  --size-lg:calc(1.25rem * var(--size-ratio));
  --size-xl:calc(1.5rem * var(--size-ratio));
  --size-2xl:calc(2rem * var(--size-ratio));
  --size-3xl:calc(2.5rem * var(--size-ratio));
  --space-unit:0.25rem;
  --space-xs:calc(var(--space-unit) * 1);
  --space-sm:calc(var(--space-unit) * 2);
  --space-md:calc(var(--space-unit) * 4);
  --space-lg:calc(var(--space-unit) * 6);
  --space-xl:calc(var(--space-unit) * 8);
  --space-2xl:calc(var(--space-unit) * 12);
  --max-width:1200px;
  --header-h:60px;
  --progress-h:3px;
  --radius-sm:4px;
  --radius-md:8px;
  --transition-fast:200ms ease;
  --transition-base:300ms ease;
  --shadow-glow-blue:0 0 12px rgba(30,144,255,0.35);
  --shadow-glow-orange:0 0 12px rgba(255,107,53,0.35);
  --shadow-panel:0 8px 32px rgba(0,0,0,0.5);
}

/* === BASE TYPOGRAPHY === */
body{font-family:var(--font-body);font-size:var(--size-base);color:var(--clr-text);background:var(--clr-bg);line-height:1.7}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;font-style:italic;line-height:1.2;letter-spacing:-0.01em;color:var(--clr-text)}
h1{font-size:var(--size-3xl);margin-bottom:var(--space-md)}
h2{font-size:var(--size-2xl);margin-bottom:var(--space-sm)}
h3{font-size:var(--size-xl);margin-bottom:var(--space-sm)}
h4{font-size:var(--size-lg);margin-bottom:var(--space-xs)}
p{margin-bottom:var(--space-md);color:var(--clr-text-secondary)}
a{color:var(--clr-primary);transition:color var(--transition-fast)}
a:hover{color:var(--clr-accent-light)}
code,.mono{font-family:var(--font-mono);font-weight:500}
::selection{background:var(--clr-primary);color:var(--clr-bg)}

/* === SKIP LINK === */
.skip-link{position:absolute;top:-100%;left:0;z-index:10000;padding:var(--space-sm) var(--space-md);background:var(--clr-primary);color:#fff;font-weight:600;border-radius:0 0 var(--radius-sm) 0;transition:top var(--transition-fast)}
.skip-link:focus{top:0;outline:none}

/* === CONTAINER === */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding-left:20px;padding-right:20px}

/* === SITE HEADER === */
.site-header{position:sticky;top:0;z-index:9000;background:var(--clr-bg);border-bottom:2px solid var(--clr-primary);box-shadow:var(--shadow-glow-blue),var(--shadow-panel);height:var(--header-h);display:flex;flex-direction:column}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px;width:100%}
.header__brand{display:flex;align-items:baseline;gap:4px;font-family:var(--font-heading);font-weight:800;font-style:italic;letter-spacing:-0.02em}
.brand__name{font-size:var(--size-xl);background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand__suffix{font-size:var(--size-sm);color:var(--clr-text);font-weight:400;font-style:normal;opacity:0.8}
.header__nav{display:flex;align-items:center}
.nav__list{display:flex;gap:var(--space-xs)}
.nav__item{position:relative}
.nav__link{display:block;padding:var(--space-xs) var(--space-sm);font-family:var(--font-heading);font-weight:600;font-size:var(--size-sm);color:var(--clr-text-secondary);letter-spacing:0.02em;transition:color var(--transition-fast),box-shadow var(--transition-fast);position:relative;white-space:nowrap}
.nav__link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--clr-primary);box-shadow:var(--shadow-glow-blue);transition:width var(--transition-base);border-radius:1px}
.nav__link:hover{color:var(--clr-text)}
.nav__link:hover::after{width:80%}
.nav__link[aria-current="page"]{color:var(--clr-highlight);text-shadow:0 0 12px rgba(57,255,20,0.25)}
.nav__link[aria-current="page"]::after{width:80%;background:var(--clr-highlight);box-shadow:0 0 12px rgba(57,255,20,0.4)}
.header__toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;padding:6px;border-radius:var(--radius-sm);transition:background var(--transition-fast);background:transparent;border:1px solid var(--clr-border)}
.header__toggle:hover{background:var(--clr-surface)}
.toggle__bar{display:block;width:22px;height:2px;background:var(--clr-text);border-radius:1px;transition:transform var(--transition-base),opacity var(--transition-base)}
.header__toggle[aria-expanded="true"] .toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header__toggle[aria-expanded="true"] .toggle__bar:nth-child(2){opacity:0}
.header__toggle[aria-expanded="true"] .toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* === SCROLL PROGRESS === */
.header__progress{position:fixed;top:0;left:0;height:var(--progress-h);width:0%;background:linear-gradient(90deg,var(--clr-primary),var(--clr-accent),var(--clr-highlight));z-index:9999;border-radius:0 2px 2px 0;box-shadow:0 0 12px rgba(30,144,255,0.5);pointer-events:none;transition:width 80ms linear;will-change:width}

/* === SITE FOOTER === */
.site-footer{background:var(--clr-surface);border-top:2px solid var(--clr-accent);box-shadow:0 -4px 20px rgba(255,107,53,0.15);padding:var(--space-xl) 0 var(--space-lg);margin-top:var(--space-2xl)}
.footer__inner{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.footer__primary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--clr-border)}
.footer__brand{display:flex;flex-direction:column;gap:var(--space-xs)}
.footer__logo{font-family:var(--font-heading);font-weight:800;font-style:italic;font-size:var(--size-lg);background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.02em}
.footer__logo-suffix{font-weight:400;font-style:normal;font-size:var(--size-sm);-webkit-text-fill-color:var(--clr-text-secondary);color:var(--clr-text-secondary);margin-left:4px}
.footer__tagline{font-size:var(--size-sm);color:var(--clr-text-secondary);margin:0;opacity:0.7}
.footer__links{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm)}
.footer__link{color:var(--clr-text-secondary);font-size:var(--size-sm);font-weight:500;transition:color var(--transition-fast);padding:var(--space-xs) 0}
.footer__link:hover{color:var(--clr-primary);text-shadow:0 0 8px rgba(30,144,255,0.2)}
.footer__link-sep{color:var(--clr-border);font-size:var(--size-sm);user-select:none}
.footer__contact{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg);margin-bottom:var(--space-md);padding:var(--space-sm) 0;font-size:var(--size-sm);color:var(--clr-text-secondary)}
.contact__item{position:relative;padding-left:var(--space-sm)}
.contact__item::before{content:'◆';position:absolute;left:-4px;top:0;font-size:8px;color:var(--clr-accent);opacity:0.6}
.footer__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;font-size:var(--size-xs);color:var(--clr-text-secondary);opacity:0.6}
.footer__trust{flex:1 1 100%;margin-top:var(--space-xs);font-style:italic;opacity:0.5}
.footer__copyright{text-align:center;padding-top:var(--space-md);font-size:var(--size-xs);color:var(--clr-text-secondary);opacity:0.5;border-top:1px solid var(--clr-border);margin-top:var(--space-sm)}

/* === 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-weight:600;font-size:var(--size-sm);border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer;border:1px solid transparent;letter-spacing:0.02em;white-space:nowrap}
.btn-primary{background:var(--clr-primary);color:#fff;border-color:var(--clr-primary);box-shadow:0 2px 12px rgba(30,144,255,0.25)}
.btn-primary:hover{background:var(--clr-primary-dark);box-shadow:0 4px 20px rgba(30,144,255,0.4);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--clr-primary);border-color:var(--clr-primary)}
.btn-secondary:hover{background:var(--clr-primary);color:#fff;box-shadow:0 0 16px rgba(30,144,255,0.2)}
.btn-accent{background:var(--clr-accent);color:#fff;border-color:var(--clr-accent);box-shadow:0 2px 12px rgba(255,107,53,0.25)}
.btn-accent:hover{background:var(--clr-accent-light);box-shadow:0 4px 20px rgba(255,107,53,0.4);transform:translateY(-1px)}

/* === BREADCRUMB === */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);padding:var(--space-sm) 0;font-size:var(--size-sm);color:var(--clr-text-secondary)}
.breadcrumb a{color:var(--clr-primary);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--clr-accent-light)}
.breadcrumb .breadcrumb__sep{margin:0 var(--space-xs);color:var(--clr-border);user-select:none}
.breadcrumb .breadcrumb__current{color:var(--clr-text);font-weight:600}

/* === PAGE CONTENT CONTAINER === */
.page-content{max-width:800px;margin:0 auto;padding:var(--space-lg) 20px var(--space-2xl)}
.page-content-wide{max-width:var(--max-width);margin:0 auto;padding:var(--space-lg) 20px var(--space-2xl)}

/* === GRID UTILITIES === */
.grid{display:grid;gap:var(--space-md)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* === CARD BASE === */
.card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.card:hover{border-color:var(--clr-primary);box-shadow:0 4px 24px rgba(30,144,255,0.08)}
.card__title{font-size:var(--size-md);font-weight:700;font-style:italic;margin-bottom:var(--space-xs);color:var(--clr-text)}
.card__text{font-size:var(--size-sm);color:var(--clr-text-secondary);margin:0}

/* === RESPONSIVE === */
@media(max-width:768px){
  :root{--header-h:54px}
  .header__toggle{display:flex}
  .header__nav{position:fixed;top:var(--header-h);left:0;right:0;background:var(--clr-overlay);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:var(--space-md) 20px;max-height:0;overflow:hidden;transition:max-height var(--transition-base),padding var(--transition-base);border-bottom:2px solid var(--clr-primary);box-shadow:var(--shadow-panel)}
  .header__nav[data-open]{max-height:480px;padding:var(--space-md) 20px var(--space-lg)}
  .nav__list{flex-direction:column;gap:var(--space-xs)}
  .nav__link{padding:var(--space-sm) var(--space-md);font-size:var(--size-base);border-radius:var(--radius-sm)}
  .nav__link:hover{background:var(--clr-surface)}
  .nav__link[aria-current="page"]{background:rgba(57,255,20,0.08);border-left:3px solid var(--clr-highlight)}
  .nav__link::after{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer__primary{flex-direction:column;gap:var(--space-md)}
  .footer__links{width:100%}
  .footer__contact{flex-direction:column;gap:var(--space-sm)}
  .footer__meta{flex-direction:column;align-items:flex-start}
  .breadcrumb{font-size:var(--size-xs)}
  .page-content{padding:var(--space-md) 16px var(--space-xl)}
}

@media(min-width:769px) and (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .nav__link{font-size:var(--size-xs);padding:var(--space-xs) var(--space-xs)}
}

/* === PREFERS REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .header__progress{transition:none!important}
  .header__nav{transition:none!important}
  .nav__link::after{transition:none!important}
  .btn:hover{transform:none!important}
  .card:hover{transform:none!important}
  .header__toggle[aria-expanded="true"] .toggle__bar{transition:none!important}
}