/* =================================================================
   OLTREX — Site-wide shared styles
   ================================================================= */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --off-white:#F8F8F5;
  --blue:#194FA0;
  --blue-deep:#0A2F70;
  --blue-light:#9ECBFF;
  --gray-100:#F5F5F3;
  --gray-200:#EDEDED;
  --gray-300:#BFBFBF;
  --gray-500:#737373;
  --gray-700:#404040;
  --font:'Zen Kaku Gothic New','Noto Sans JP','Helvetica Neue',Arial,sans-serif;
  --font-en:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

body{
  font-family:var(--font);
  color:var(--black);
  background:var(--white);
  overflow-x:hidden;
  line-height:1.8;
  font-weight:400;
  font-size:15px;
}

::selection{background:var(--blue);color:var(--white)}

/* =====================================================================
   Global Header (site-wide, fixed)
   ===================================================================== */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:1.1rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:0.5px solid rgba(0,0,0,0.06);
  transition:background 0.3s;
}
.site-nav.transparent{
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.site-nav.transparent .nav-logo{filter:brightness(0) invert(1)}
.site-nav.transparent .nav-menu a,
.site-nav.transparent .nav-cta{color:var(--white)}
.site-nav.transparent .nav-cta{border-color:var(--white)}

.nav-logo{
  display:block;
  height:24px;
  transition:filter 0.3s;
}
.nav-logo img{display:block;height:100%;width:auto}

.nav-menu{
  display:flex;
  gap:2.2rem;
  align-items:center;
}
.nav-menu a{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--black);
  padding:0.4rem 0;
  position:relative;
  transition:color 0.25s;
}
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;
  height:1px;
  background:currentColor;
  transition:width 0.35s var(--ease);
}
.nav-menu a:hover::after{width:100%}
.nav-menu a.active{color:var(--blue)}

.nav-right{display:flex;align-items:center;gap:1.4rem}
.nav-cta{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--black);
  padding:0.6rem 1.4rem;
  border:1px solid var(--black);
  border-radius:999px;
  transition:background 0.3s,color 0.3s,border-color 0.3s;
}
.nav-cta:hover{background:var(--black);color:var(--white)}
.site-nav.transparent .nav-cta:hover{background:var(--white);color:var(--black)}

/* LICENSE button (secondary CTA) */
.nav-cta-alt{
  border-color:var(--gray-300);
  color:var(--gray-700);
}
.nav-cta-alt:hover{
  background:var(--gray-700);
  color:var(--white);
  border-color:var(--gray-700);
}

/* mobile hamburger */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.5rem;
  width:36px;
  height:36px;
  position:relative;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:1.5px;
  background:var(--black);
  position:absolute;
  left:7px;
  transition:transform 0.35s var(--ease),opacity 0.25s;
}
.nav-toggle span:nth-child(1){top:11px}
.nav-toggle span:nth-child(2){top:17px}
.nav-toggle span:nth-child(3){top:23px}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.site-nav.transparent .nav-toggle span{background:var(--white)}

/* mobile menu overlay */
.mobile-menu{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--white);
  z-index:99;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2rem;
  padding:5rem 2rem;
  transform:translateX(100%);
  transition:transform 0.5s var(--ease);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{
  font-size:22px;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--black);
  padding:0.6rem 0;
}
.mobile-menu .m-en{
  display:block;
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--gray-500);
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:0.3rem;
}

/* =====================================================================
   Page shell (for sub pages)
   ===================================================================== */
.page-hero{
  padding:9rem 2rem 4rem;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  min-height:44vh;
  display:flex;
  align-items:flex-end;
}
.page-hero-inner{
  max-width:1100px;
  margin:0 auto;
  width:100%;
}
.page-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:1.4rem;
}
.page-eyebrow::before{
  content:"";
  width:24px;height:1px;background:var(--blue);
}
.page-title{
  font-family:var(--font-en);
  font-size:clamp(42px,6vw,84px);
  font-weight:900;
  line-height:0.98;
  letter-spacing:-0.025em;
  color:var(--black);
  margin-bottom:0.9rem;
}
.page-title-jp{
  font-size:clamp(15px,1.4vw,19px);
  font-weight:500;
  color:var(--gray-700);
  letter-spacing:0.14em;
}

.page-body{
  padding:5rem 2rem 6rem;
}
.page-body-inner{
  max-width:820px;
  margin:0 auto;
}
.page-body h2{
  font-size:clamp(22px,2.4vw,30px);
  font-weight:700;
  letter-spacing:0.02em;
  margin:3.5rem 0 1.4rem;
  color:var(--black);
  padding-bottom:0.8rem;
  border-bottom:1px solid var(--gray-200);
}
.page-body h2:first-child{margin-top:0}
.page-body h3{
  font-size:17px;
  font-weight:700;
  color:var(--blue);
  margin:2.4rem 0 0.9rem;
  letter-spacing:0.04em;
}
.page-body p{
  font-size:14.5px;
  line-height:2.0;
  color:var(--gray-700);
  margin-bottom:1.2rem;
}
.page-body p strong{color:var(--black);font-weight:600}
.page-body ul{
  margin:1rem 0 1.6rem 1.4rem;
}
.page-body ul li{
  font-size:14px;
  line-height:1.95;
  color:var(--gray-700);
  padding-left:0.4rem;
  margin-bottom:0.4rem;
}

/* Data table (used in About page) */
.data-table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 2rem;
  font-size:14px;
}
.data-table th,
.data-table td{
  text-align:left;
  padding:1rem 0;
  border-bottom:1px solid var(--gray-200);
  vertical-align:top;
}
.data-table th{
  width:32%;
  color:var(--gray-500);
  font-weight:500;
  letter-spacing:0.06em;
  font-size:12.5px;
  padding-right:1.5rem;
}
.data-table td{color:var(--gray-700);line-height:1.85}

/* CTA banner (bottom of sub pages) */
.cta-banner{
  background:linear-gradient(135deg, #050B1A 0%, var(--blue-deep) 100%);
  color:var(--white);
  padding:5rem 2rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cta-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(38,128,230,0.2), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(38,128,230,0.12), transparent 50%);
  z-index:-1;
}
.cta-banner-inner{
  max-width:720px;
  margin:0 auto;
}
.cta-banner h3{
  font-size:clamp(22px,2.6vw,32px);
  font-weight:700;
  line-height:1.5;
  margin-bottom:1rem;
  letter-spacing:0.04em;
}
.cta-banner p{
  font-size:13.5px;
  color:rgba(255,255,255,0.75);
  line-height:2.0;
  margin-bottom:2rem;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--white);
  padding:1rem 2.4rem;
  border:1px solid var(--white);
  border-radius:999px;
  transition:background 0.3s,color 0.3s;
}
.cta-btn:hover{background:var(--white);color:var(--black)}
.cta-btn .arrow{font-size:16px;transition:transform 0.3s}
.cta-btn:hover .arrow{transform:translateX(4px)}

/* =====================================================================
   Global Footer (site-wide)
   ===================================================================== */
.site-footer{
  background:var(--black);
  color:rgba(255,255,255,0.7);
  padding:5rem 2rem 2.5rem;
}
.footer-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr repeat(3, 1fr);
  gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand .footer-logo{
  width:180px;
  margin-bottom:1.4rem;
  filter:brightness(0) invert(1);
}
.footer-brand .footer-tag{
  font-size:12px;
  letter-spacing:0.14em;
  color:rgba(255,255,255,0.55);
  line-height:1.9;
}
.footer-col-title{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.32em;
  color:var(--blue-light);
  text-transform:uppercase;
  margin-bottom:1.3rem;
}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:0.7rem}
.footer-col a{
  font-size:12.5px;
  color:rgba(255,255,255,0.75);
  transition:color 0.25s;
}
.footer-col a:hover{color:var(--white)}
.footer-bottom{
  max-width:1180px;
  margin:0 auto;
  padding-top:1.6rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:10.5px;
  letter-spacing:0.2em;
  color:rgba(255,255,255,0.5);
}

/* =====================================================================
   Reveal / Fade animations (subtle)
   ===================================================================== */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:900px){
  .site-nav{padding:0.9rem 1.25rem}
  .nav-menu{display:none}
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .nav-logo{height:22px}

  .page-hero{padding:6rem 1.25rem 3rem;min-height:36vh}
  .page-title{font-size:clamp(32px,10vw,52px)}
  .page-body{padding:3.5rem 1.25rem 4rem}
  .page-body h2{font-size:19px;margin:2.5rem 0 1rem}
  .page-body h3{font-size:15px}
  .page-body p{font-size:13.5px;line-height:1.95}

  .data-table th{width:38%;font-size:11.5px}
  .data-table td{font-size:12.5px}

  .cta-banner{padding:3.5rem 1.25rem}
  .cta-banner h3{font-size:19px}
  .cta-banner p{font-size:12.5px}

  .site-footer{padding:3.5rem 1.25rem 2rem}
  .footer-grid{grid-template-columns:1fr;gap:2.2rem;padding-bottom:2rem}
  .footer-brand .footer-logo{width:150px}
  .footer-bottom{flex-direction:column;text-align:center;font-size:10px}
}