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

/* ===== VARIABLES ===== */
:root{
  --color-primary:#0A1F44;
  --color-secondary:#D4AF37;
  --color-accent:#E63946;
  --color-neutral:#FFFFFF;
  --color-gray-dark:#2C3E50;
  --color-gray-light:#ECF0F1;
  --color-success:#27AE60;
  --color-warning:#F39C12;
  --color-text-light:#FFFFFF;
  --color-text-dark:#0A1F44;
  --color-border:rgba(212,175,55,0.3);
  --font-heading:'Montserrat','Helvetica Neue','Arial','sans-serif';
  --font-body:'Inter','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Helvetica Neue','sans-serif';
  --font-data:'JetBrains Mono','Courier New','monospace';
  --fw-heading:800;
  --fw-body:400;
  --fw-bold:700;
  --fs-h1:clamp(2.5rem,5.5vw,4.5rem);
  --fs-h2:clamp(1.75rem,3.5vw,3rem);
  --fs-h3:clamp(1.25rem,2.5vw,2rem);
  --fs-h4:clamp(1rem,1.8vw,1.5rem);
  --fs-body:clamp(0.875rem,1.1vw,1rem);
  --fs-small:clamp(0.75rem,0.9vw,0.8125rem);
  --fs-data:clamp(0.75rem,1vw,1rem);
  --spacing-xs:0.25rem;
  --spacing-sm:0.5rem;
  --spacing-md:1rem;
  --spacing-lg:2rem;
  --spacing-xl:3rem;
  --spacing-2xl:5rem;
  --container-max:1200px;
  --header-height:auto;
  --border-radius:4px;
  --transition-fast:0.2s ease;
  --transition-smooth:0.4s cubic-bezier(0.25,0.46,0.45,0.94)
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}

/* ===== CONTAINER & GRID ===== */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--spacing-md)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--spacing-lg)}
.grid__col{grid-column:span 12}
@media(min-width:768px){.grid__col--6{grid-column:span 6}}
@media(min-width:1024px){.grid__col--4{grid-column:span 4}.grid__col--3{grid-column:span 3}}

/* ===== SKIP LINK ===== */
.skip-link{position:fixed;top:-100%;left:0;z-index:10000;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-secondary);color:var(--color-primary);font-weight:var(--fw-bold);font-size:var(--fs-small);transition:top var(--transition-fast)}.skip-link:focus{top:0}

/* ===== PROGRESS BAR ===== */
.progress-bar{position:fixed;top:0;left:0;z-index:9999;width:0%;height:3px;background:linear-gradient(90deg,var(--color-secondary),var(--color-accent));transition:width 0.1s linear;will-change:width}@media(prefers-reduced-motion:reduce){.progress-bar{transition:none}}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:1000;background:var(--color-primary);color:var(--color-text-light);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0}
.header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:clamp(1.2rem,2vw,1.75rem);letter-spacing:-0.5px;color:var(--color-secondary);text-transform:uppercase}
.brand__tagline{font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-small);letter-spacing:3px;color:var(--color-neutral);text-transform:uppercase;opacity:0.7}

/* ===== NAV ===== */
.nav{flex:0 0 100%;order:3;margin-top:var(--spacing-sm)}@media(min-width:1024px){.nav{flex:1 1 auto;order:0;margin-top:0;margin-left:var(--spacing-lg)}}
.nav__list{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-md);justify-content:center}
.nav__link{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-small);letter-spacing:0.5px;color:var(--color-neutral);padding:var(--spacing-xs) var(--spacing-sm);border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast);text-transform:uppercase;white-space:nowrap}
.nav__link:hover,.nav__link:focus-visible{color:var(--color-secondary)}
.nav__link[aria-current="page"]{color:var(--color-secondary);border-bottom-color:var(--color-secondary)}

/* Mobile nav */
.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;background:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius);padding:6px;order:2;z-index:1100}@media(min-width:1024px){.nav-toggle{display:none}}
.nav-toggle__bar{display:block;width:20px;height:2px;background:var(--color-neutral);border-radius:1px;transition:transform var(--transition-fast),opacity var(--transition-fast)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) 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(-6px) rotate(-45deg)}

@media(max-width:1023px){
  .nav{position:fixed;top:0;right:0;z-index:1050;width:100%;height:100vh;height:100dvh;background:var(--color-primary);display:flex;align-items:center;justify-content:center;transform:translateX(100%);transition:transform var(--transition-smooth);visibility:hidden}
  .nav[data-open]{transform:translateX(0);visibility:visible}
  .nav__list{flex-direction:column;align-items:center;gap:var(--spacing-lg)}
  .nav__link{font-size:var(--fs-h4);border-bottom-width:3px}
  .header__cta{order:1;margin-left:auto}@media(max-width:1023px){.header__cta{font-size:var(--fs-small);padding:var(--spacing-xs) var(--spacing-sm)}}
}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-small);letter-spacing:0.75px;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius);transition:all var(--transition-fast);text-transform:uppercase;white-space:nowrap;min-height:40px}
.btn--primary{background:var(--color-secondary);color:var(--color-primary);border:2px solid var(--color-secondary)}
.btn--primary:hover,.btn--primary:focus-visible{background:transparent;color:var(--color-secondary)}
.btn--outline{background:transparent;color:var(--color-secondary);border:2px solid var(--color-secondary)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--color-secondary);color:var(--color-primary)}

/* ===== CARD ===== */
.card{background:rgba(10,31,68,0.8);border:1px solid var(--color-border);border-radius:0;padding:var(--spacing-lg);position:relative;transition:transform var(--transition-fast),box-shadow var(--transition-fast);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.3);border-color:var(--color-secondary)}
.card__title{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:var(--fs-h3);color:var(--color-secondary);margin-bottom:var(--spacing-sm)}
.card__data{font-family:var(--font-data);font-size:var(--fs-data);color:var(--color-text-light);letter-spacing:-0.5px}

/* ===== SECTION MARKER ===== */
.section-marker{display:flex;align-items:baseline;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}
.section-marker__number{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:var(--fs-h1);color:var(--color-secondary);opacity:0.3;line-height:1;letter-spacing:-2px}
.section-marker__title{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:var(--fs-h2);color:var(--color-text-light);text-transform:uppercase;letter-spacing:-0.5px}

/* ===== FOOTER ===== */
.site-footer{background:var(--color-primary);color:var(--color-text-light);border-top:2px solid var(--color-border);padding:var(--spacing-2xl) 0 var(--spacing-lg)}
.footer__inner{display:flex;flex-direction:column;gap:var(--spacing-2xl)}
.footer__brand{text-align:center;border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-lg)}
.footer__trust{font-family:var(--font-body);font-size:var(--fs-small);color:var(--color-gray-light);max-width:600px;margin:var(--spacing-md) auto 0;opacity:0.7}
.footer__columns{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl)}@media(min-width:768px){.footer__columns{grid-template-columns:repeat(3,1fr)}}
.footer__col{display:flex;flex-direction:column;gap:var(--spacing-md)}
.footer__heading{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:var(--fs-h4);color:var(--color-secondary);letter-spacing:0.5px;text-transform:uppercase;border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-sm)}
.footer__list{display:flex;flex-direction:column;gap:var(--spacing-sm)}
.footer__link{font-family:var(--font-body);font-size:var(--fs-body);color:var(--color-text-light);opacity:0.8;transition:opacity var(--transition-fast),color var(--transition-fast);padding:var(--spacing-xs) 0}
.footer__link:hover,.footer__link:focus-visible{opacity:1;color:var(--color-secondary)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--spacing-sm) var(--spacing-lg);justify-content:center;font-size:var(--fs-small);color:var(--color-gray-light);border-top:1px solid var(--color-border);padding-top:var(--spacing-lg);text-align:center;opacity:0.7}
.footer__copyright,.footer__icp,.footer__address,.footer__note{margin:0}
.footer__note{width:100%;font-style:italic}

/* ===== UTILITIES ===== */
.text-center{text-align:center}
.text-secondary{color:var(--color-secondary)}
.text-accent{color:var(--color-accent)}
.mt-lg{margin-top:var(--spacing-lg)}
.mb-lg{margin-bottom:var(--spacing-lg)}
.py-xl{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}
.diagonal-divide{position:relative;overflow:hidden}
.diagonal-divide::before{content:'';position:absolute;top:0;right:0;width:40%;height:100%;background:rgba(212,175,55,0.05);clip-path:polygon(30% 0,100% 0,100% 100%,0% 100%);pointer-events:none}

/* ===== RESPONSIVE IMAGE CONTAINER ===== */
.img-container{position:relative;overflow:hidden;background:var(--color-gray-dark);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--color-gray-light);font-size:var(--fs-small);border:1px solid var(--color-border)}
.img-container--square{aspect-ratio:1/1}
.img-container--player{aspect-ratio:3/4;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}

/* ===== ACCESSIBLE ===== */
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}.nav{transition:none}.progress-bar{transition:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){
  .header__inner{gap:var(--spacing-xs)}
  .brand__name{font-size:1rem}
  .brand__tagline{font-size:0.625rem;letter-spacing:1px}
  .btn{padding:var(--spacing-xs) var(--spacing-md);font-size:0.75rem}
}
@media(min-width:768px) and (max-width:1023px){
  .nav__link{font-size:var(--fs-small)}
}
@media(min-width:1024px){
  .header__inner{flex-wrap:nowrap}
  .site-header{padding:var(--spacing-sm) 0 var(--spacing-md)}
  .footer__columns{gap:var(--spacing-2xl)}
}