/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;font-family:'Segoe UI','Open Sans',Arial,Helvetica,sans-serif;font-size:16px;color:#1A237E;background:#F5F5F5}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit}
:focus-visible{outline:3px solid #7BC043;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}

/* ===== CSS VARIABLES ===== */
:root{
  --primary:#7BC043;
  --primary-dark:#5a9e2a;
  --secondary:#1A237E;
  --secondary-light:#2c3a9e;
  --accent:#FFD700;
  --accent-dark:#e6c200;
  --cta:#FF5722;
  --bg-light:#F5F5F5;
  --bg-dark:#0D1B2A;
  --text-primary:#1A237E;
  --text-on-dark:#FFFFFF;
  --text-muted:#6b7280;
  --border-width:4px;
  --shadow-strong:8px 8px 0 rgba(26,35,126,0.25);
  --shadow-soft:4px 4px 0 rgba(26,35,126,0.12);
  --sidebar-width:250px;
  --sidebar-width-mobile:0px;
  --font-heading:Impact,'Bebas Neue','Arial Black',sans-serif;
  --font-body:'Segoe UI','Open Sans',Arial,Helvetica,sans-serif;
  --content-max:1200px;
  --spacing-xs:8px;
  --spacing-sm:16px;
  --spacing-md:24px;
  --spacing-lg:32px;
  --spacing-xl:48px;
  --radius:0px;
  --transition:0.25s ease;
}

/* ===== SKIP LINK ===== */
.skip-link{
  position:fixed;top:-100%;left:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);
  background:var(--primary);color:#fff;font-weight:700;z-index:9999;border:var(--border-width) solid #fff;
  transition:top 0.2s ease
}
.skip-link:focus{top:var(--spacing-sm)}

/* ===== SIDEBAR / HEADER ===== */
.site-sidebar{
  position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;
  background:transparent;color:var(--text-on-dark);
  border-right:var(--border-width) solid var(--primary);
  z-index:1000;display:flex;flex-direction:column;
  transition:background 0.35s ease,box-shadow 0.35s ease;
  padding:0;overflow-y:auto;
  box-shadow:none
}
.site-sidebar.scrolled{
  background:var(--secondary);
  box-shadow:4px 0 20px rgba(0,0,0,0.3);
}
.sidebar-inner{
  display:flex;flex-direction:column;height:100%;
  padding:var(--spacing-lg) var(--spacing-md);
  position:relative;
}
.sidebar-brand{margin-bottom:var(--spacing-xl)}
.brand{
  font-family:var(--font-heading);font-size:32px;font-weight:700;
  color:var(--primary);letter-spacing:1px;text-transform:uppercase;
  display:block;line-height:1.1;text-shadow:2px 2px 0 rgba(0,0,0,0.15);
  transition:color 0.2s ease;
}
.brand:hover{color:var(--accent)}

/* Navigation */
.nav-wrap{flex:1}
.nav-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}
.nav-item{}
.nav-link{
  display:block;padding:10px 12px;font-family:var(--font-heading);
  font-size:18px;font-weight:700;color:var(--text-on-dark);
  border-left:4px solid transparent;transition:all 0.2s ease;
  text-transform:uppercase;letter-spacing:0.5px;
  text-shadow:1px 1px 0 rgba(0,0,0,0.1);
}
.nav-link:hover,.nav-link:focus-visible{
  color:var(--accent);border-left-color:var(--accent);
  padding-left:16px;
}
.nav-link[aria-current="page"]{
  color:var(--accent);border-left-color:var(--accent);
  background:rgba(255,215,0,0.08);
}

/* Hamburger toggle – hidden on desktop */
.nav-toggle{
  display:none;position:absolute;top:24px;right:16px;
  width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;z-index:1100;
}
.hamburger-line{
  display:block;width:28px;height:3px;background:var(--primary);
  border-radius:0;transition:all 0.3s ease;
}

/* ===== MOBILE NAV (max-width:768px) ===== */
@media(max-width:768px){
  .site-sidebar{
    width:100%;height:auto;min-height:64px;
    border-right:none;border-bottom:var(--border-width) solid var(--primary);
    background:var(--secondary);
  }
  .site-sidebar.scrolled{background:var(--secondary);box-shadow:none}
  .sidebar-inner{
    flex-direction:row;align-items:center;padding:12px var(--spacing-md);
    height:auto;
  }
  .sidebar-brand{margin-bottom:0;flex-shrink:0}
  .brand{font-size:24px}
  .nav-toggle{display:flex;position:static;margin-left:auto}
  .nav-wrap{
    position:fixed;top:0;left:-80%;width:80%;max-width:320px;height:100vh;
    background:var(--secondary);border-right:var(--border-width) solid var(--primary);
    padding:80px var(--spacing-md) var(--spacing-md);
    transition:left 0.35s ease;z-index:1050;
    box-shadow:4px 0 20px rgba(0,0,0,0.4);
    overflow-y:auto;
  }
  .nav-wrap[data-open]{left:0}
  .nav-list{gap:var(--spacing-xs)}
  .nav-link{font-size:20px;padding:14px 12px}
  /* overlay when open */
  .nav-wrap[data-open]::before{
    content:'';position:fixed;top:0;left:0;width:100vw;height:100vh;
    background:rgba(0,0,0,0.4);z-index:-1;pointer-events:none;
  }
  /* hamburger animation when open */
  [data-nav-toggle][aria-expanded="true"] .hamburger-line:nth-child(1){
    transform:rotate(45deg) translate(5px,6px)
  }
  [data-nav-toggle][aria-expanded="true"] .hamburger-line:nth-child(2){
    opacity:0
  }
  [data-nav-toggle][aria-expanded="true"] .hamburger-line:nth-child(3){
    transform:rotate(-45deg) translate(5px,-6px)
  }
}

/* ===== MAIN CONTENT AREA ===== */
#main-content{
  margin-left:var(--sidebar-width);min-height:100vh;
  position:relative;
}
@media(max-width:768px){
  #main-content{margin-left:0;padding-top:64px}
}

/* ===== CONTENT CONTAINER ===== */
.content-container{
  max-width:var(--content-max);margin:0 auto;padding:0 var(--spacing-md);
  width:100%;
}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--bg-dark);color:var(--text-on-dark);
  border-top:var(--border-width) solid var(--primary);
  padding:var(--spacing-xl) 0;margin-top:0;
}
.footer-container{
  max-width:var(--content-max);margin:0 auto;padding:0 var(--spacing-md);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-lg);
}
.footer-brand-area{}
.footer-brand{
  font-family:var(--font-heading);font-size:28px;color:var(--primary);
  text-transform:uppercase;margin-bottom:var(--spacing-sm);
}
.footer-tagline{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.7);max-width:300px}
.footer-contact-area{}
.footer-contact-item{font-size:14px;margin-bottom:6px;color:rgba(255,255,255,0.8)}
.footer-contact-item a{color:var(--accent);transition:color 0.2s}
.footer-contact-item a:hover{color:var(--primary)}
.footer-note{font-size:13px;color:rgba(255,255,255,0.55);margin-top:var(--spacing-sm);line-height:1.5}
.footer-links-area{display:flex;flex-direction:column;gap:var(--spacing-xs)}
.footer-link{
  font-family:var(--font-heading);font-size:16px;text-transform:uppercase;
  color:var(--text-on-dark);padding:6px 0;border-left:3px solid transparent;padding-left:12px;
  transition:all 0.2s ease;
}
.footer-link:hover{color:var(--accent);border-left-color:var(--accent);padding-left:16px}
.footer-icp-area{
  grid-column:1 / -1;text-align:center;padding-top:var(--spacing-md);
  border-top:1px solid rgba(255,255,255,0.1);margin-top:var(--spacing-sm);
}
.footer-icp{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:4px}
.footer-copy{font-size:13px;color:rgba(255,255,255,0.4)}
@media(max-width:768px){
  .footer-container{grid-template-columns:1fr;gap:var(--spacing-md)}
  .footer-brand-area{order:1}
  .footer-contact-area{order:2}
  .footer-links-area{order:3;flex-direction:row;flex-wrap:wrap;gap:var(--spacing-sm)}
  .footer-link{padding-left:0;border-left:none;border-bottom:2px solid transparent;padding-bottom:4px}
  .footer-link:hover{border-bottom-color:var(--accent);padding-left:0}
  .footer-icp-area{order:4}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 28px;font-family:var(--font-heading);font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.5px;
  border:var(--border-width) solid var(--primary);background:var(--primary);
  color:var(--text-on-dark);box-shadow:var(--shadow-strong);
  transition:all 0.2s ease;cursor:pointer;line-height:1.2;
}
.btn:hover,.btn:focus-visible{
  background:var(--primary-dark);border-color:var(--primary-dark);
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(26,35,126,0.3);
}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--text-primary)}
.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-secondary{background:var(--secondary);border-color:var(--secondary);color:var(--text-on-dark)}
.btn-secondary:hover{background:var(--secondary-light);border-color:var(--secondary-light)}

/* ===== CARD ===== */
.card{
  background:#fff;border:var(--border-width) solid var(--primary);
  box-shadow:var(--shadow-soft);padding:var(--spacing-md);
  transition:box-shadow 0.2s ease,transform 0.2s ease;
}
.card:hover{box-shadow:var(--shadow-strong);transform:translate(-2px,-2px)}

/* ===== IMAGE CONTAINER ===== */
.img-container{
  background:var(--bg-light);aspect-ratio:16/9;width:100%;
  display:flex;align-items:center;justify-content:center;
  border:2px dashed #ccc;color:var(--text-muted);font-size:14px;
  overflow:hidden;position:relative;
}
.img-container.portrait{aspect-ratio:3/4}
.img-container.square{aspect-ratio:1/1}

/* ===== TAG LABEL ===== */
.tag-label{
  display:inline-block;background:var(--accent);color:var(--text-primary);
  font-family:var(--font-heading);font-size:13px;font-weight:700;text-transform:uppercase;
  padding:4px 12px;letter-spacing:0.5px;border:2px solid var(--accent-dark);
}

/* ===== SECTION MARKER ===== */
.section-marker{
  font-family:var(--font-heading);font-size:24px;font-weight:700;
  text-transform:uppercase;color:var(--text-primary);
  padding-left:var(--spacing-sm);border-left:var(--border-width) solid var(--primary);
  margin-bottom:var(--spacing-md);line-height:1.2;
}

/* ===== SCROLL-TOP BUTTON ===== */
.scroll-top{
  position:fixed;bottom:32px;right:32px;width:52px;height:52px;
  background:var(--secondary);color:var(--text-on-dark);border:var(--border-width) solid var(--primary);
  font-size:24px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-strong);z-index:900;cursor:pointer;
  opacity:0;visibility:hidden;transition:all 0.3s ease;
  line-height:1;font-family:var(--font-heading);
}
.scroll-top.visible{opacity:1;visibility:visible}
.scroll-top:hover{background:var(--primary);transform:translate(-2px,-2px)}
@media(prefers-reduced-motion:reduce){.scroll-top{transition:none!important}}

/* ===== UTILITY ===== */
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.mt-sm{margin-top:var(--spacing-sm)}
.mt-md{margin-top:var(--spacing-md)}
.mt-lg{margin-top:var(--spacing-lg)}
.mb-sm{margin-bottom:var(--spacing-sm)}
.mb-md{margin-bottom:var(--spacing-md)}
.mb-lg{margin-bottom:var(--spacing-lg)}

/* ===== RESPONSIVE GRID ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-md)}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--spacing-md)}
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media(min-width:769px)and(max-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
}

/* ===== BREADCRUMB ===== */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm) 0;
  font-size:14px;color:var(--text-muted);
}
.breadcrumb a{color:var(--secondary);transition:color 0.2s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{margin:0 4px;color:var(--text-muted)}

/* ===== RESPONSIVE FOOTNOTES ===== */
@media(max-width:480px){
  .brand{font-size:20px}
  .nav-link{font-size:18px}
  .footer-container{padding:0 var(--spacing-sm)}
  .scroll-top{width:44px;height:44px;font-size:20px;bottom:20px;right:20px}
}