/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Inter,Roboto,sans-serif;font-weight:400;font-size:1rem;line-height:1.6;color:#FFFFFF;background:#0B1D3A;min-height:100vh;display:flex;flex-direction:column}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid #FF6B35;outline-offset:2px;border-radius:2px}
::selection{background:#FF6B35;color:#FFFFFF}
/* ===== CSS VARIABLES ===== */
:root{
  --color-primary:#0B1D3A;
  --color-primary-light:#1A2D4A;
  --color-accent:#FF6B35;
  --color-accent-light:#FF8C4D;
  --color-secondary:#00D4FF;
  --color-text-primary:#FFFFFF;
  --color-text-secondary:#B0C4DE;
  --color-bg-dark:#060F1E;
  --color-bg-light:#F4F4F4;
  --color-border:#2C3E50;
  --color-hover:#FF6B35;
  --font-heading:800 2.5rem/1.2 Inter,Roboto,sans-serif;
  --font-subheading:700 1.5rem/1.3 Inter,Roboto,sans-serif;
  --font-body:400 1rem/1.6 Inter,Roboto,sans-serif;
  --font-small:300 0.875rem/1.5 Inter,Roboto,sans-serif;
  --letter-spacing-heading:0.05em;
  --letter-spacing-subheading:0.03em;
  --max-width:1200px;
  --header-height:72px;
  --progress-height:4px;
  --transition:0.25s ease;
}
/* ===== SKIP LINK ===== */
.skip-link{
  position:absolute;top:-100%;left:0;z-index:1000;
  background:#FF6B35;color:#FFFFFF;padding:0.75rem 1.5rem;
  font-weight:700;font-size:1rem;border-radius:0 0 4px 0;
  transition:top 0.25s ease;
}
.skip-link:focus{top:0;outline:none}
/* ===== PAGE CONTAINER ===== */
.page-container{width:100%;max-width:var(--max-width);margin:0 auto;padding:2rem 1.5rem;flex:1}
@media(min-width:768px){.page-container{padding:3rem 2.5rem}}
@media(min-width:1024px){.page-container{padding:4rem 3rem}}
/* ===== HEADER (FRAMED NAVIGATION) ===== */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--color-primary);
  border-bottom:4px solid var(--color-accent);
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.header__container{
  max-width:var(--max-width);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;height:var(--header-height);
  position:relative;
}
/* logo */
.header__logo a{
  display:flex;align-items:center;gap:0.5rem;
  font-weight:800;font-size:1.5rem;letter-spacing:0.05em;
  color:var(--color-accent);transition:color var(--transition);
}
.header__logo a:hover,.header__logo a:focus-visible{color:var(--color-accent-light)}
.logo__mark{
  display:inline-block;width:10px;height:10px;
  background:var(--color-accent);transform:rotate(45deg);
  flex-shrink:0;
}
.logo__text{white-space:nowrap}
/* toggle (mobile) */
.header__toggle{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:44px;height:44px;gap:5px;padding:8px;
  background:transparent;border:1px solid var(--color-border);border-radius:4px;
  transition:border-color var(--transition);
}
.header__toggle:hover,.header__toggle:focus-visible{border-color:var(--color-accent)}
.toggle__bar{display:block;width:24px;height:2px;background:#FFFFFF;border-radius:1px;transition:transform var(--transition),opacity var(--transition)}
.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)}
/* nav */
.header__nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;background:var(--color-primary);border-top:1px solid var(--color-border);padding:1rem 1.5rem 1.5rem;z-index:950}
.header__nav[data-open]{display:block}
.nav__list{display:flex;flex-direction:column;gap:0.25rem}
.nav__link{
  display:block;padding:0.75rem 1rem;
  font-weight:600;font-size:1rem;letter-spacing:0.03em;
  color:var(--color-text-primary);border-radius:4px;
  border-bottom:2px solid transparent;
  transition:color var(--transition),background var(--transition),border-color var(--transition);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--color-accent);background:rgba(255,107,53,0.08)}
.nav__link[aria-current="page"]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
@media(min-width:768px){
  .header__toggle{display:none}
  .header__nav{display:flex!important;position:static;background:transparent;border:none;padding:0;align-items:center}
  .nav__list{flex-direction:row;gap:0.25rem}
  .nav__link{padding:0.5rem 1rem;font-size:0.95rem;border-bottom-width:3px}
  .nav__link[aria-current="page"]{border-bottom-color:var(--color-accent)}
}
@media(min-width:1024px){
  .nav__link{padding:0.6rem 1.2rem;font-size:1rem}
}
/* ===== FOOTER ===== */
.site-footer{
  background:var(--color-bg-dark);
  border-top:3px solid var(--color-accent);
  margin-top:auto;
}
.footer__container{max-width:var(--max-width);margin:0 auto;padding:2.5rem 1.5rem 1.5rem}
.footer__top{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}
.footer__logo{font-weight:800;font-size:1.5rem;letter-spacing:0.05em;color:var(--color-accent);transition:color var(--transition)}
.footer__logo:hover,.footer__logo:focus-visible{color:var(--color-accent-light)}
.footer__trust{color:var(--color-text-secondary);font-size:0.9rem;line-height:1.6;margin-top:0.75rem;max-width:32ch}
.footer__heading{font-weight:700;font-size:1rem;letter-spacing:0.03em;color:var(--color-text-primary);margin-bottom:0.75rem;position:relative;padding-bottom:0.5rem}
.footer__heading::after{content:'';position:absolute;bottom:0;left:0;width:28px;height:2px;background:var(--color-accent)}
.footer__link-list{display:flex;flex-direction:column;gap:0.5rem}
.footer__link-list a{color:var(--color-text-secondary);font-size:0.9rem;transition:color var(--transition);padding:0.25rem 0}
.footer__link-list a:hover,.footer__link-list a:focus-visible{color:var(--color-accent)}
.footer__contact-item{color:var(--color-text-secondary);font-size:0.9rem;line-height:1.8}
.footer__contact-item a{color:var(--color-text-secondary);transition:color var(--transition)}
.footer__contact-item a:hover,.footer__contact-item a:focus-visible{color:var(--color-accent)}
.footer__response p{color:var(--color-text-secondary);font-size:0.875rem;line-height:1.6}
.footer__bottom{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border);text-align:center}
.footer__copyright{color:var(--color-text-secondary);font-size:0.8rem}
.footer__icp{color:var(--color-text-secondary);font-size:0.75rem;letter-spacing:0.02em}
@media(min-width:640px){.footer__top{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){
  .footer__top{grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
  .footer__bottom{flex-direction:row;justify-content:space-between}
}
/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.75rem 1.75rem;font-weight:700;font-size:1rem;letter-spacing:0.03em;
  border-radius:4px;transition:all var(--transition);text-align:center;
  border:2px solid transparent;cursor:pointer;
}
.btn--primary{background:var(--color-accent);color:#FFFFFF;border-color:var(--color-accent)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--color-accent-light);border-color:var(--color-accent-light);color:#FFFFFF}
.btn--outline{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--color-accent);color:#FFFFFF}
.btn--accent{background:transparent;color:var(--color-secondary);border-color:var(--color-secondary)}
.btn--accent:hover,.btn--accent:focus-visible{background:var(--color-secondary);color:var(--color-primary)}
/* ===== SECTION (exhibition layout) ===== */
.section{margin-bottom:3rem;padding:1.5rem 0;border-bottom:1px solid var(--color-border)}
.section:last-of-type{border-bottom:none}
.section__number{font-weight:800;font-size:3rem;letter-spacing:0.08em;color:var(--color-accent);opacity:0.3;line-height:1;margin-bottom:0.25rem}
.section__title{font-weight:800;font-size:1.75rem;letter-spacing:0.05em;color:var(--color-text-primary);margin-bottom:1rem}
.section__content{font-size:1rem;line-height:1.7;color:var(--color-text-secondary);max-width:72ch}
@media(min-width:768px){
  .section{padding:2.5rem 0;margin-bottom:4rem}
  .section__number{font-size:4rem}
  .section__title{font-size:2.25rem}
}
/* ===== GRID ===== */
.grid{display:grid;grid-template-columns:repeat(var(--grid-cols,1),1fr);gap:1.5rem}
.grid__item{min-width:0}
@media(min-width:640px){.grid{--grid-cols:2}}
@media(min-width:1024px){.grid{--grid-cols:3}}
/* ===== IMAGE FRAME ===== */
.img-frame{
  position:relative;overflow:hidden;
  background:var(--color-primary-light);
  border:1px solid var(--color-border);border-radius:4px;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
}
.img-frame__img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.img-frame:hover .img-frame__img{transform:scale(1.03)}
/* ===== PROGRESS BAR ===== */
.progress-bar{
  position:fixed;top:var(--header-height,72px);left:0;z-index:800;
  width:0%;height:var(--progress-height,4px);
  background:var(--color-accent);
  transition:width 0.15s linear;
  pointer-events:none;
}
/* ===== BACK TO TOP ===== */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:800;
  width:48px;height:48px;border-radius:50%;
  background:var(--color-accent);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;box-shadow:0 2px 12px rgba(0,0,0,0.3);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--transition),visibility var(--transition),transform var(--transition),background var(--transition);
}
.back-to-top[data-visible]{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover,.back-to-top:focus-visible{background:var(--color-accent-light)}
.back-to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* ===== UTILITY ===== */
.text-accent{color:var(--color-accent)}
.text-secondary{color:var(--color-secondary)}
.text-muted{color:var(--color-text-secondary)}
.bg-dark{background:var(--color-bg-dark)}
.bg-primary{background:var(--color-primary)}
.bg-light{background:var(--color-bg-light);color:var(--color-primary)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ===== RESPONSIVE ===== */
@media(max-width:639px){
  :root{--header-height:64px}
  .header__container{padding:0 1rem;height:var(--header-height)}
  .header__logo a{font-size:1.25rem}
}
@media(min-width:640px)and (max-width:1023px){
  :root{--header-height:68px}
}
/* ===== ACCESSIBILITY :focus-visible ===== */
a:focus-visible,.btn:focus-visible,.header__toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}
/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}
  .img-frame__img{transform:none!important}
  .back-to-top{transition:none!important}
}