/* =========================================================
   Components & sections
   ========================================================= */

/* ---------------- NAV ---------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--line-thick);
}
.nav__inner {
  display: flex; align-items: stretch; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto;
}
.nav__brand {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem var(--gutter);
  border-right: var(--line);
}
.nav__mark {
  width: 38px; height: 38px; flex: none;
  background: var(--ink); color: var(--acid);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .78rem;
  letter-spacing: -.03em;
}
.nav__name { line-height: 1.1; }
/* logo variants (swapped via Tweaks for comparison) */
.nav__logo2 { font-family: var(--gothic); font-weight: 900; font-size: 1.55rem; letter-spacing: -.02em; flex: none; }
.nav__logo2 i { color: var(--blue); font-style: normal; }
.nav__logo3 { display: inline-flex; align-items: center; gap: .12em; font-family: var(--gothic); font-weight: 900; font-size: 1.45rem; letter-spacing: -.01em; flex: none; }
.nav__logo3 .sl { color: var(--blue); font-family: var(--mono); font-weight: 700; }
.nav__name b { font-family: var(--gothic); font-weight: 900; font-size: 1.02rem; letter-spacing: .02em; display: block; }
.nav__name span { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.nav__links {
  display: flex; align-items: stretch; margin-left: auto;
}
.nav__links a {
  display: flex; align-items: center; padding: 0 1.2rem;
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  border-left: var(--line);
  transition: background .16s, color .16s;
}
.nav__links a:hover { background: var(--ink); color: var(--paper); }
.nav__links a.cta { background: var(--blue); color: #fff; font-weight: 700; }
.nav__links a.cta:hover { background: var(--ink); }
.nav__burger { display: none; }

@media (max-width: 880px) {
  .nav__inner { flex-wrap: wrap; }
  .nav__brand { border-right: none; flex: 1 1 auto; }
  .nav__name span { display: none; }
  .nav__links {
    width: 100%; margin-left: 0; border-top: var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { padding: .9rem 1rem; white-space: nowrap; flex: none; }
  .nav__links a:first-child { border-left: none; }
}

/* ---------------- HERO ---------------- */
.hero { position: relative; border-bottom: var(--line-thick); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1fr; max-width: var(--maxw); margin: 0 auto;
  position: relative; z-index: 2;
}
.hero__main { padding: clamp(2rem,6vw,5.5rem) var(--gutter) clamp(1.5rem,3vw,2.5rem); }
.hero__eyebrow {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 4vw, 2.8rem);
}
.hero__eyebrow .tag {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  border: var(--line); padding: .35em .7em; background: var(--paper-3);
}
.hero__eyebrow .tag.blue { background: var(--blue); color: #fff; border-color: var(--blue); }

.hero h1 {
  font-family: var(--gothic); font-weight: 900;
  font-size: clamp(2.6rem, 8.5vw, 8rem);
  line-height: .96; letter-spacing: -.01em;
  text-wrap: balance;
}
.hero h1 .em { color: var(--blue); }
.hero h1 .mn { font-family: var(--mincho); font-weight: 800; font-style: normal; }
.hero h1 .out {
  -webkit-text-stroke: 2px var(--ink); color: transparent;
}

.hero__foot {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gutter);
  align-items: end; margin-top: clamp(1.8rem, 4vw, 3rem);
}
.hero__lead { font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 46ch; line-height: 1.7; }
.hero__lead b { font-weight: 700; }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 760px){
  .hero__foot { grid-template-columns: 1fr; align-items: start; }
  .hero__cta { justify-content: flex-start; }
}

/* ---------------- MARQUEE ---------------- */
.marquee {
  border-top: var(--line); background: var(--ink); color: var(--paper);
  overflow: hidden; white-space: nowrap; position: relative; z-index: 2;
}
.marquee__track { display: inline-flex; gap: 0; animation: scroll-x 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .7rem 1.4rem; display: inline-flex; align-items: center; gap: 1.4rem;
}
.marquee__track span::after { content: "◆"; color: var(--acid); font-size: .6rem; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------------- STAT BAR ---------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--line-thick);
}
.stat {
  padding: clamp(1.4rem,3vw,2.4rem) var(--gutter);
  border-left: var(--line);
}
.stat:first-child { border-left: none; }
.stat__num { font-family: var(--gothic); font-weight: 900; font-size: clamp(2.2rem,4.5vw,3.6rem); line-height: 1; letter-spacing: -.02em; }
.stat__num .u { font-family: var(--mono); font-size: .9rem; font-weight: 700; margin-left: .25em; color: var(--blue); }
.stat__lab { margin-top: .6rem; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 760px){ .stats { grid-template-columns: repeat(2,1fr);} .stat{ border-left: var(--line);} .stat:nth-child(odd){border-left:none;} .stat:nth-child(n+3){border-top:var(--line);} }

/* ---------------- SECTION HEADER ---------------- */
.shead {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gutter);
  padding: clamp(2.4rem,5vw,4.5rem) 0 clamp(1.4rem,3vw,2.4rem);
  align-items: start;
}
.shead__idx { font-family: var(--mono); font-weight: 700; font-size: .9rem; padding-top: .6rem; }
.shead__idx::before { content: ""; display:block; width: 46px; height: 8px; background: var(--blue); margin-bottom: .8rem; }
.shead h2 {
  font-family: var(--gothic); font-weight: 900;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance;
}
.shead p { margin-top: 1rem; max-width: 60ch; color: var(--ink-soft); font-size: 1.02rem; }
@media (max-width: 640px){ .shead { grid-template-columns: 1fr; gap: .6rem; } }

/* ---------------- ABOUT / split text ---------------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: var(--line-thick); }
.about__col { padding: clamp(2rem,4vw,3.6rem) var(--gutter); border-left: var(--line); }
.about__col:first-child { border-left: none; }
.about__col h3 { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.3rem,2.4vw,1.8rem); margin-bottom: 1rem; line-height: 1.2; }
.about__col h3 .num { font-family: var(--mono); color: var(--blue); margin-right: .6rem; }
.about__col p { color: var(--ink-soft); }
.about__big {
  font-family: var(--mincho); font-weight: 800; font-size: clamp(1.5rem,3vw,2.3rem);
  line-height: 1.5; letter-spacing: .01em;
}
.about__big mark { background: var(--acid); padding: 0 .15em; }
@media (max-width: 760px){ .about { grid-template-columns: 1fr; } .about__col { border-left: none; } .about__col + .about__col { border-top: var(--line); } }

/* ---------------- THEMES GRID ---------------- */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--line); border-bottom: var(--line-thick); }
.theme {
  position: relative; padding: clamp(1.6rem,2.4vw,2.2rem) clamp(1.4rem,2vw,1.8rem);
  border-left: var(--line); border-bottom: var(--line);
  min-height: 230px; display: flex; flex-direction: column;
  background: var(--paper); cursor: pointer; overflow: hidden;
  transition: background .22s, color .22s;
}
.theme:nth-child(4n+1){ border-left: none; }
.theme__no { font-family: var(--mono); font-size: .72rem; opacity: .6; }
.theme__ja { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.3rem,1.8vw,1.6rem); margin-top: auto; line-height: 1.15; }
.theme__en { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55; margin-top: .4rem; }
.theme__arrow {
  position: absolute; top: clamp(1.4rem,2vw,1.8rem); right: clamp(1.2rem,2vw,1.6rem);
  font-size: 1.2rem; transition: transform .22s; opacity: .4;
}
.theme:hover { background: var(--ink); color: var(--paper); }
.theme:hover .theme__no, .theme:hover .theme__en { opacity: .8; }
.theme:hover .theme__ja { color: var(--acid); }
.theme:hover .theme__arrow { transform: translate(4px,-4px); opacity: 1; }
@media (max-width: 900px){ .themes { grid-template-columns: repeat(2,1fr);} .theme:nth-child(4n+1){border-left:var(--line);} .theme:nth-child(2n+1){border-left:none;} }
@media (max-width: 520px){ .themes { grid-template-columns: 1fr;} .theme{border-left:none!important; min-height: 150px;} }

/* ---------------- REPORTS ---------------- */
.reports { border-bottom: var(--line-thick); }
.filters { display: flex; flex-wrap: wrap; gap: 0; border-top: var(--line); border-bottom: var(--line); }
.filters button {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .85rem 1.2rem; background: var(--paper); border: none; border-right: var(--line);
  cursor: pointer; transition: background .16s, color .16s;
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filters button:hover { background: var(--blue); color: #fff; }

.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.report {
  border-left: var(--line); border-bottom: var(--line);
  padding: clamp(1.6rem,2.5vw,2.2rem); display: flex; flex-direction: column;
  min-height: 320px; background: var(--paper); transition: background .2s, color .2s; cursor: pointer;
}
.report:nth-child(3n+1){ border-left: none; }
.report__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.report__cat { background: var(--paper-3); border: var(--line); padding: .2em .55em; }
.report:hover { background: var(--ink); color: var(--paper); }
.report:hover .report__cat { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.report h3 { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.25rem,1.8vw,1.55rem); line-height: 1.22; margin-top: 1.4rem; text-wrap: balance; }
.report p { color: var(--ink-soft); font-size: .92rem; margin-top: .8rem; }
.report:hover p { color: color-mix(in srgb, var(--paper) 75%, transparent); }
.report__foot { margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: space-between; align-items: flex-end; }
.report__read { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; gap: .4em; }
.report:hover .report__read .a { color: var(--acid); }
.report__pages { font-family: var(--mono); font-size: .68rem; opacity: .55; }
@media (max-width: 900px){ .report-grid { grid-template-columns: repeat(2,1fr);} .report:nth-child(3n+1){border-left:var(--line);} .report:nth-child(2n+1){border-left:none;} }
@media (max-width: 560px){ .report-grid { grid-template-columns: 1fr;} .report{border-left:none!important;} }

/* ---------------- USE CASES (signature band) ---------------- */
.usecases { background: var(--ink); color: var(--paper); border-top: var(--line-thick); border-bottom: var(--line-thick); position: relative; }
.usecases::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--acid); z-index: 3; }
.uc-head { padding: clamp(2.6rem,5vw,4.4rem) var(--gutter) clamp(1.4rem,3vw,2.2rem); }
.uc-head__lab { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--acid); font-weight: 700; }
.uc-head__title { font-family: var(--gothic); font-weight: 900; font-size: clamp(2.2rem,5.5vw,4rem); line-height: 1.02; letter-spacing: -.01em; margin-top: 1rem; text-wrap: balance; }
.uc-head__title .em { color: var(--acid); }
.uc-head__sub { margin-top: 1.1rem; max-width: 60rem; font-size: 1.05rem; color: color-mix(in srgb, var(--paper) 72%, transparent); }

.usecase-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--line); }
.usecase { padding: clamp(2rem,4vw,3.4rem) var(--gutter) clamp(2.4rem,4vw,3.6rem); border-left: 2px solid color-mix(in srgb, var(--paper) 20%, transparent); position: relative; overflow: hidden; transition: background .2s; }
.usecase:first-child { border-left: none; }
.usecase:hover { background: color-mix(in srgb, var(--paper) 5%, transparent); }
.usecase__tag { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--acid); font-weight: 700; }
.usecase h3 { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.8rem,3.4vw,2.7rem); line-height: 1.08; margin: 1rem 0 1.2rem; }
.usecase__lead { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.usecase ul { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin-top: 1.8rem; }
.usecase li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding-bottom: .9rem; border-bottom: 1px dashed color-mix(in srgb, var(--paper) 24%, transparent); }
.usecase li .k { font-family: var(--mono); font-weight: 700; color: color-mix(in srgb, var(--blue) 55%, white); }
.usecase__num { position: absolute; top: -1.6rem; right: .8rem; font-family: var(--gothic); font-weight: 900; font-size: 11rem; line-height: 1; color: color-mix(in srgb, var(--blue) 26%, transparent); pointer-events: none; }
@media (max-width: 760px){ .usecase-grid { grid-template-columns: 1fr;} .usecase { border-left: none;} .usecase + .usecase { border-top: 2px solid color-mix(in srgb, var(--paper) 20%, transparent);} }

/* ---------------- METHOD ---------------- */
.method { border-bottom: var(--line-thick); }
.steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: var(--line); }
.step { padding: clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,2vw,1.8rem); border-left: var(--line); position: relative; }
.step:first-child { border-left: none; }
.step__no { font-family: var(--mono); font-weight: 700; font-size: .8rem; color: var(--blue); }
.step h4 { font-family: var(--gothic); font-weight: 900; font-size: 1.2rem; margin: 1.2rem 0 .7rem; line-height: 1.2; }
.step p { color: var(--ink-soft); font-size: .9rem; }
.step__bar { height: 6px; background: var(--ink); margin-top: 1.6rem; }
.step:nth-child(1) .step__bar { background: var(--blue); width: 100%; }
.step:nth-child(2) .step__bar { background: var(--blue); width: 75%; }
.step:nth-child(3) .step__bar { background: var(--blue); width: 50%; }
.step:nth-child(4) .step__bar { background: var(--acid); width: 100%; }
@media (max-width: 800px){ .steps { grid-template-columns: repeat(2,1fr);} .step:nth-child(2n+1){border-left:none;} .step:nth-child(n+3){border-top:var(--line);} }
@media (max-width: 460px){ .steps { grid-template-columns: 1fr;} .step{border-left:none;} .step + .step{border-top:var(--line);} }

/* ---------------- CTA ---------------- */
.cta {
  background: var(--ink); color: var(--paper);
  border-bottom: var(--line-thick);
  position: relative; overflow: hidden;
}
.cta__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem,7vw,6rem) var(--gutter); position: relative; z-index: 2; }
.cta__big { font-family: var(--gothic); font-weight: 900; font-size: clamp(2.4rem,7vw,6rem); line-height: .98; letter-spacing: -.01em; }
.cta__big .em { color: var(--acid); }
.cta__big .out { -webkit-text-stroke: 2px var(--paper); color: transparent; }
.cta__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 2.4rem; }
.cta p { max-width: 44ch; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.cta .btn { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.cta .btn:hover { background: var(--paper); border-color: var(--paper); }
.cta__marq { position: absolute; bottom: -2vw; left: 0; right: 0; font-family: var(--gothic); font-weight: 900; font-size: 14vw; line-height: 1; color: color-mix(in srgb, var(--paper) 5%, transparent); white-space: nowrap; z-index: 1; pointer-events: none; }

/* ---------------- FOOTER ---------------- */
.footer { background: var(--paper); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer__cell { padding: clamp(1.8rem,3vw,2.6rem) var(--gutter); border-left: var(--line); }
.footer__cell:first-child { border-left: none; }
.footer__cell h5 { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.2rem; opacity: .6; }
.footer__cell ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer__cell a:hover { color: var(--blue); text-decoration: underline; }
.footer__brand b { font-family: var(--gothic); font-weight: 900; font-size: 1.6rem; display: block; margin-bottom: .8rem; }
.footer__brand p { color: var(--ink-soft); font-size: .9rem; max-width: 38ch; }
.footer__bar { border-top: var(--line); display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 800px){ .footer__top { grid-template-columns: 1fr 1fr; } .footer__cell:nth-child(2n+1){border-left:none;} .footer__cell:nth-child(n+3){border-top:var(--line);} }
@media (max-width: 480px){ .footer__top { grid-template-columns: 1fr; } .footer__cell { border-left: none; border-top: var(--line);} .footer__cell:first-child{border-top:none;} }

/* ---------------- LIVE clock pill ---------------- */
.live { display: inline-flex; align-items: center; gap: .5em; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; }
.live .dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }