/**
 * XCHEV — Tokyo-night OLED showroom.
 * Dark canvas, electric teal + magenta. Precise, not neon-gamer.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  font-family: var(--xc-sans);
  font-size: var(--xc-fs-md);
  font-weight: 400;
  line-height: var(--xc-lh-body);
  color: var(--xc-text);
  background: var(--xc-bg);
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 42% at 0% 0%, rgba(60, 232, 216, 0.14), transparent 58%),
    radial-gradient(ellipse 42% 48% at 100% 8%, rgba(255, 77, 141, 0.12), transparent 52%),
    radial-gradient(ellipse 48% 38% at 78% 100%, rgba(139, 124, 255, 0.1), transparent 56%);
}

.xc-main,
.xc-footer {
  position: relative;
  z-index: 1;
}

body.is-locked {
  overflow: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--xc-sans);
  font-weight: 500;
  line-height: var(--xc-lh-tight);
  letter-spacing: 0.01em;
  color: var(--xc-text);
  overflow-wrap: anywhere;
}

p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

:focus-visible {
  outline: 2px solid var(--xc-cyan);
  outline-offset: 2px;
}

::selection {
  background: var(--xc-cyan);
  color: var(--xc-graphite);
}

.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;
}

[hidden] {
  display: none !important;
}

/* ----- Skip / container / type ----- */

.xc-skip {
  position: absolute;
  left: var(--xc-pad);
  top: -5rem;
  z-index: var(--xc-z-skip);
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  padding: 0.65rem 1rem;
  font-size: var(--xc-fs-sm);
  min-height: var(--xc-touch);
  display: inline-flex;
  align-items: center;
}

.xc-skip:focus {
  top: 0.75rem;
}

.xc-container {
  width: 100%;
  max-width: var(--xc-container);
  margin-inline: auto;
  padding-inline: var(--xc-pad);
}

.xc-container--wide {
  max-width: var(--xc-wide);
}

.xc-section {
  padding: var(--xc-section) 0;
  position: relative;
}

.xc-section--tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.xc-section--dark {
  background:
    radial-gradient(ellipse 70% 80% at 0% 50%, rgba(255, 77, 141, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 70% at 100% 40%, rgba(60, 232, 216, 0.12), transparent 50%),
    var(--xc-charcoal);
  color: var(--xc-white);
}

.xc-section--dark h1,
.xc-section--dark h2,
.xc-section--dark h3,
.xc-section--dark h4,
.xc-section--dark .xc-h2,
.xc-section--dark .xc-lead {
  color: var(--xc-white);
}

.xc-section--dark .xc-kicker {
  color: var(--xc-cyan);
}

.xc-section--dark .xc-muted,
.xc-section--dark .xc-lead {
  color: rgba(246, 247, 245, 0.72);
}

.xc-section--grid {
  background-image:
    linear-gradient(var(--xc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--xc-line) 1px, transparent 1px);
  background-size: var(--xc-grid) var(--xc-grid);
  background-position: center top;
}

.xc-section--dark.xc-section--grid {
  background-image:
    linear-gradient(var(--xc-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--xc-line-light) 1px, transparent 1px);
  background-color: var(--xc-charcoal);
}

.xc-kicker {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  font-weight: 400;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-cyan);
  margin-bottom: 0.85rem;
  display: block;
}

.xc-h2 {
  font-size: var(--xc-h2);
  font-weight: 500;
  line-height: 1.28;
  margin-bottom: 1rem;
  max-width: 22ch;
}

.xc-lead {
  font-size: var(--xc-fs-lg);
  line-height: 1.85;
  color: var(--xc-muted);
  max-width: 38rem;
}

.xc-head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.xc-head--row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.xc-muted {
  color: var(--xc-muted);
}

.xc-meta {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-gray);
}

.xc-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-gray);
}

.xc-stat strong,
.xc-stat__num {
  font-weight: 500;
  color: var(--xc-text);
  letter-spacing: 0.08em;
}

.xc-section--dark .xc-stat strong,
.xc-section--dark .xc-stat__num {
  color: var(--xc-white);
}

.xc-quote {
  font-family: var(--xc-serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--xc-text);
  max-width: 28rem;
}

.xc-note {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
  line-height: 1.7;
  max-width: 42rem;
}

.xc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
}

/* ----- Media / motion helpers ----- */

.xc-media {
  overflow: hidden;
  position: relative;
  background: var(--xc-surface);
  border-radius: var(--xc-radius);
}

.xc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(60, 232, 216, 0.08), transparent 42%, rgba(255, 77, 141, 0.1) 100%);
  mix-blend-mode: overlay;
}

.xc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--xc-ease);
}

.xc-media:hover img,
.xc-media:focus-within img {
  transform: scale(1.04);
}

.xc-split {
  display: grid;
  gap: 1.5rem;
}

.xc-split--reverse {
  direction: ltr;
}

.xc-fade-up {
  animation: xc-rise 0.8s var(--xc-ease) both;
}

.xc-fade {
  animation: xc-in 0.7s var(--xc-ease) both;
}

@keyframes xc-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes xc-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-aos] {
  --aos-duration: var(--xc-aos);
}

/* ----- Buttons ----- */

.xc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: var(--xc-touch);
  padding: 0.7rem 1.35rem;
  border-radius: var(--xc-radius);
  border: 1px solid var(--xc-cyan);
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  font-size: var(--xc-fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  transition:
    background var(--xc-duration) var(--xc-ease),
    color var(--xc-duration) var(--xc-ease),
    border-color var(--xc-duration) var(--xc-ease),
    box-shadow var(--xc-duration) var(--xc-ease);
}

.xc-btn .xc-arrow,
.xc-btn svg {
  transition: transform var(--xc-duration) var(--xc-ease);
  flex-shrink: 0;
}

.xc-btn:hover .xc-arrow,
.xc-btn:focus-visible .xc-arrow,
.xc-btn:hover svg,
.xc-btn:focus-visible svg {
  transform: translateX(4px);
}

.xc-btn:hover,
.xc-btn:focus-visible {
  background: var(--xc-white);
  border-color: var(--xc-white);
  color: var(--xc-graphite);
  box-shadow: var(--xc-glow-cyan);
}

.xc-btn--ghost {
  background: transparent;
  color: var(--xc-white);
  border-color: var(--xc-line-strong);
}

.xc-btn--ghost:hover,
.xc-btn--ghost:focus-visible {
  background: var(--xc-cyan-soft);
  color: var(--xc-cyan);
  border-color: var(--xc-cyan);
  box-shadow: none;
}

.xc-btn--light {
  background: var(--xc-white);
  color: var(--xc-graphite);
  border-color: var(--xc-white);
}

.xc-btn--light:hover,
.xc-btn--light:focus-visible {
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  border-color: var(--xc-cyan);
  box-shadow: var(--xc-glow-cyan);
}

.xc-stage .xc-btn--ghost,
.xc-section--dark .xc-btn--ghost {
  color: var(--xc-white);
  border-color: rgba(246, 247, 245, 0.45);
}

.xc-stage .xc-btn--ghost:hover,
.xc-stage .xc-btn--ghost:focus-visible,
.xc-section--dark .xc-btn--ghost:hover,
.xc-section--dark .xc-btn--ghost:focus-visible {
  background: rgba(246, 247, 245, 0.12);
  color: var(--xc-white);
  border-color: var(--xc-white);
}

.xc-section--dark .xc-btn:not(.xc-btn--ghost):not(.xc-btn--light) {
  background: var(--xc-magenta);
  color: var(--xc-white);
  border-color: var(--xc-magenta);
}

.xc-section--dark .xc-btn:not(.xc-btn--ghost):not(.xc-btn--light):hover {
  background: var(--xc-white);
  color: var(--xc-graphite);
  border-color: var(--xc-white);
  box-shadow: var(--xc-glow-magenta);
}

.xc-section--dark .xc-btn--ghost {
  color: var(--xc-white);
  border-color: var(--xc-line-light-strong);
}

.xc-section--dark .xc-btn--ghost:hover,
.xc-section--dark .xc-btn--ghost:focus-visible {
  background: var(--xc-white);
  color: var(--xc-graphite);
  border-color: var(--xc-white);
}

.xc-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--xc-fs-sm);
  font-weight: 500;
  color: var(--xc-cyan);
  min-height: var(--xc-touch);
}

.xc-textlink .xc-arrow {
  transition: transform var(--xc-duration) var(--xc-ease);
}

.xc-textlink:hover .xc-arrow,
.xc-textlink:focus-visible .xc-arrow {
  transform: translateX(4px);
}

.xc-section--dark .xc-textlink {
  color: var(--xc-magenta);
}

.xc-icon-btn {
  width: var(--xc-touch);
  height: var(--xc-touch);
  min-width: var(--xc-touch);
  min-height: var(--xc-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--xc-text);
  border-radius: var(--xc-radius);
  border: 1px solid transparent;
  transition: border-color var(--xc-duration) var(--xc-ease), background var(--xc-duration) var(--xc-ease);
}

.xc-icon-btn:hover,
.xc-icon-btn:focus-visible {
  border-color: var(--xc-line);
  background: var(--xc-cyan-soft);
}

.xc-header.is-solid .xc-icon-btn,
.xc-header:not(.is-overlay) .xc-icon-btn {
  color: var(--xc-text);
}

/* ----- Header ----- */

.xc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--xc-z-header);
  height: var(--xc-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--xc-duration) var(--xc-ease),
    border-color var(--xc-duration) var(--xc-ease);
}

.xc-header.is-solid,
.xc-header.is-overlay.is-solid,
body.is-locked .xc-header,
.xc-header.is-open {
  background: rgba(7, 9, 14, 0.92);
  border-bottom-color: rgba(60, 232, 216, 0.28);
  backdrop-filter: blur(16px);
  z-index: calc(var(--xc-z-drawer) + 2);
}

body.is-locked .xc-header .xc-logo,
body.is-locked .xc-header .xc-icon-btn,
body.is-locked .xc-header .xc-hamburger,
body.is-locked .xc-header .xc-menu-btn,
.xc-header.is-open .xc-logo,
.xc-header.is-open .xc-icon-btn,
.xc-header.is-open .xc-hamburger {
  color: var(--xc-text);
}

.xc-header:not(.is-overlay) {
  background: rgba(7, 9, 14, 0.88);
  border-bottom-color: var(--xc-line);
  backdrop-filter: blur(16px);
}

.xc-header__bar,
.xc-header__inner {
  height: 100%;
  max-width: var(--xc-wide);
  margin-inline: auto;
  padding-inline: var(--xc-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.xc-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--xc-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--xc-text);
  min-height: var(--xc-touch);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.xc-logo__mark {
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.xc-logo__mark svg {
  width: 1.75rem;
  height: 1.75rem;
  max-width: none;
}

.xc-logo__jp {
  font-family: var(--xc-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--xc-gray);
  font-weight: 400;
}

.xc-header.is-overlay:not(.is-solid) .xc-logo,
.xc-header.is-overlay:not(.is-solid) .xc-icon-btn,
.xc-header.is-overlay:not(.is-solid) .xc-hamburger,
.xc-header.is-overlay:not(.is-solid) .xc-header__finder {
  color: var(--xc-white);
}

.xc-header.is-overlay:not(.is-solid) .xc-nav__link {
  color: var(--xc-white);
}

.xc-header.is-overlay:not(.is-solid) .xc-nav__link::after {
  background: var(--xc-white);
}

.xc-nav {
  display: none;
}

.xc-nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem 1.05rem;
}

.xc-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--xc-touch);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--xc-text);
  padding-bottom: 0.15rem;
}

.xc-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.55rem;
  width: 100%;
  height: 1px;
  background: var(--xc-cyan);
  transform-origin: left center;
  transition: transform var(--xc-duration) var(--xc-ease);
}

.xc-nav__link:hover::after,
.xc-nav__link:focus-visible::after,
.xc-nav__link.is-active::after {
  transform: scaleX(1);
}

.xc-header__utils {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.xc-hamburger,
.xc-menu-btn {
  width: var(--xc-touch);
  height: var(--xc-touch);
  min-width: var(--xc-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.xc-hamburger__lines,
.xc-menu-btn__lines {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 0.75rem;
}

.xc-hamburger > span:not(.xc-hamburger__lines),
.xc-hamburger__lines span,
.xc-menu-btn__lines span {
  position: absolute;
  left: 0;
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--xc-duration) var(--xc-ease), top var(--xc-duration) var(--xc-ease), bottom var(--xc-duration) var(--xc-ease);
}

.xc-hamburger > span:not(.xc-hamburger__lines):first-of-type {
  top: 50%;
  transform: translateY(calc(-50% - 4px));
}

.xc-hamburger > span:not(.xc-hamburger__lines):last-of-type {
  top: 50%;
  bottom: auto;
  transform: translateY(calc(-50% + 4px));
}

.xc-hamburger__lines span:first-child,
.xc-menu-btn__lines span:first-child {
  top: 0;
}

.xc-hamburger__lines span:last-child,
.xc-menu-btn__lines span:last-child {
  top: auto;
  bottom: 0;
}

.xc-hamburger[aria-expanded="true"] > span:not(.xc-hamburger__lines):first-of-type,
.xc-hamburger.is-open > span:not(.xc-hamburger__lines):first-of-type,
.xc-menu-btn[aria-expanded="true"] .xc-menu-btn__lines span:first-child,
.xc-hamburger[aria-expanded="true"] .xc-hamburger__lines span:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.xc-hamburger[aria-expanded="true"] > span:not(.xc-hamburger__lines):last-of-type,
.xc-hamburger.is-open > span:not(.xc-hamburger__lines):last-of-type,
.xc-menu-btn[aria-expanded="true"] .xc-menu-btn__lines span:last-child,
.xc-hamburger[aria-expanded="true"] .xc-hamburger__lines span:last-child {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(-45deg);
}

/* ----- Drawer ----- */

.xc-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--xc-z-drawer);
  background: var(--xc-surface);
  color: var(--xc-text);
  overflow-y: auto;
  padding: calc(var(--xc-header) + 1.25rem) var(--xc-pad) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.xc-drawer[hidden] {
  display: none !important;
}

.xc-drawer.is-open {
  visibility: visible;
}

.xc-drawer__label,
.xc-drawer__kicker {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-gray);
  margin-bottom: 0.65rem;
}

.xc-drawer__group {
  border-top: 1px solid var(--xc-line);
  padding-top: 0.85rem;
}

.xc-drawer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--xc-touch);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  gap: 1rem;
}

.xc-drawer__toggle::after {
  content: "+";
  font-family: var(--xc-mono);
  font-size: 1.1rem;
  color: var(--xc-gray);
  transition: transform var(--xc-duration) var(--xc-ease);
}

.xc-drawer__toggle[aria-expanded="true"]::after {
  content: "–";
}

.xc-drawer__group .xc-drawer__panel,
.xc-drawer__toggle + .xc-drawer__panel {
  display: none;
  padding: 0.25rem 0 0.75rem;
}

.xc-drawer__toggle[aria-expanded="true"] + .xc-drawer__panel,
.xc-drawer__group.is-open .xc-drawer__panel {
  display: block;
}

.xc-drawer__panel a,
.xc-drawer__list a {
  display: flex;
  align-items: center;
  min-height: var(--xc-touch);
  padding-inline: 0.15rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--xc-line);
}

.xc-drawer__panel a:last-child,
.xc-drawer__list a:last-child {
  border-bottom: 0;
}

.xc-drawer__foot {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
}

/* ----- Search ----- */

.xc-search {
  position: fixed;
  inset: 0;
  z-index: var(--xc-z-search);
  background: var(--xc-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--xc-header) + 1rem) var(--xc-pad) 2rem;
}

.xc-search[hidden] {
  display: none !important;
}

.xc-search__panel,
.xc-search__dialog {
  width: min(100%, 36rem);
  background: var(--xc-surface);
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius-md);
  padding: 1.25rem 1.25rem 0.5rem;
  box-shadow: var(--xc-shadow-md);
}

.xc-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.xc-search__title {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  font-weight: 400;
}

.xc-search__label {
  display: block;
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
  margin-bottom: 0.4rem;
}

.xc-search__input {
  width: 100%;
  min-height: var(--xc-touch);
  border: 1px solid var(--xc-line-strong);
  border-radius: var(--xc-radius);
  background: var(--xc-surface-2);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
  color: var(--xc-text);
}

.xc-search__input:focus {
  outline: 2px solid var(--xc-cyan);
  outline-offset: 2px;
  border-color: var(--xc-cyan);
}

.xc-search__results {
  max-height: min(50vh, 22rem);
  overflow-y: auto;
}

.xc-search__results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--xc-touch);
  padding: 0.45rem 0.15rem;
  border-bottom: 1px solid var(--xc-line);
  font-size: 0.9375rem;
}

.xc-search__results em,
.xc-search__results .xc-meta {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.14em;
  color: var(--xc-gray);
}

.xc-search__results a[hidden] {
  display: none !important;
}

/* ----- Homepage hero .xc-stage ----- */

.xc-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-areas: "stack";
  background: var(--xc-graphite);
  color: var(--xc-white);
  overflow: hidden;
}

.xc-stage__visual {
  position: absolute;
  inset: 0;
  grid-area: stack;
  min-height: 100svh;
  overflow: hidden;
  background: var(--xc-charcoal);
}

.xc-stage__visual img {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  object-fit: cover;
  animation: xc-ken 22s var(--xc-ease) forwards;
  filter: saturate(1.12) contrast(1.08);
}

@keyframes xc-ken {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.xc-stage__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(180deg, rgba(7, 9, 14, 0.28) 0%, rgba(7, 9, 14, 0.18) 38%, rgba(7, 9, 14, 0.88) 100%),
    linear-gradient(90deg, rgba(7, 9, 14, 0.72) 0%, rgba(7, 9, 14, 0.28) 48%, rgba(255, 77, 141, 0.2) 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 47px,
      rgba(60, 232, 216, 0.08) 47px,
      rgba(60, 232, 216, 0.08) 48px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 47px,
      rgba(255, 77, 141, 0.07) 47px,
      rgba(255, 77, 141, 0.07) 48px
    );
}

.xc-stage__copy {
  position: relative;
  z-index: 2;
  grid-area: stack;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--xc-header) + 2rem) var(--xc-pad) 2.75rem;
  background: transparent;
  max-width: 42rem;
}

.xc-stage__label,
.xc-stage .xc-kicker {
  color: var(--xc-cyan);
}

.xc-stage h1 {
  font-size: var(--xc-h1);
  color: var(--xc-white);
  font-weight: 500;
  max-width: 14ch;
  margin: 0.35rem 0 1rem;
}

.xc-stage__text {
  color: rgba(246, 247, 245, 0.78);
  max-width: 32rem;
  margin-bottom: 1.5rem;
  line-height: 1.85;
}

.xc-techline {
  position: relative;
  height: 1px;
  width: min(100%, 12rem);
  background: var(--xc-line-light);
  margin: 1.15rem 0 1.5rem;
  overflow: hidden;
}

.xc-techline::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: linear-gradient(90deg, var(--xc-cyan), var(--xc-magenta));
  animation: xc-scan 2.6s var(--xc-ease) infinite;
}

@keyframes xc-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

.xc-stage__index {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: rgba(246, 247, 245, 0.55);
  margin-bottom: 0.75rem;
}

/* ----- Ecosystem ----- */

.xc-eco {
  display: grid;
  gap: 1.25rem;
}

.xc-eco__visual {
  position: relative;
  overflow: hidden;
  order: -1;
  min-height: 16rem;
  background: var(--xc-surface);
  border: 1px solid var(--xc-line);
}

.xc-eco__visual img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
}

.xc-eco__nodes {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.xc-eco__nodes::-webkit-scrollbar {
  height: 2px;
}

.xc-eco__nodes::-webkit-scrollbar-thumb {
  background: var(--xc-cyan);
}

.xc-eco__node {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 9.5rem;
  min-height: var(--xc-touch);
  padding: 0.85rem 1rem;
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  background: var(--xc-surface);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color var(--xc-duration) var(--xc-ease), background var(--xc-duration) var(--xc-ease), box-shadow var(--xc-duration) var(--xc-ease);
}

.xc-eco__node .xc-kicker,
.xc-eco__en {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-gray);
  margin: 0;
}

.xc-eco__node strong,
.xc-eco__node h3 {
  font-size: 0.9375rem;
  font-weight: 500;
}

.xc-eco__node.is-active {
  border-color: var(--xc-cyan);
  background: var(--xc-cyan-soft);
  box-shadow: var(--xc-glow-cyan);
}

.xc-eco__node.is-active::before,
.xc-eco__tick {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--xc-cyan);
  border-radius: 1px;
}

.xc-eco__node.is-active .xc-eco__en {
  color: var(--xc-cyan);
}

.xc-eco__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
  line-height: 1.7;
}

/* ----- Category explorer ----- */

.xc-explorer {
  display: grid;
  gap: 0.75rem;
}

.xc-explorer__item {
  display: grid;
  grid-template-rows: auto 1fr;
  color: inherit;
  border: 1px solid var(--xc-line);
  background: var(--xc-surface);
  overflow: hidden;
  transition: border-color var(--xc-duration) var(--xc-ease), box-shadow var(--xc-duration) var(--xc-ease);
}

.xc-explorer__item:hover,
.xc-explorer__item:focus-visible {
  border-color: var(--xc-cyan);
  box-shadow: var(--xc-glow-cyan);
}

.xc-explorer__item .xc-media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.xc-explorer__item--lg .xc-media {
  aspect-ratio: 4 / 5;
  min-height: 16rem;
}

.xc-explorer__body {
  padding: 0.95rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.xc-explorer__item h3 {
  font-size: var(--xc-h3);
}

.xc-explorer__item p {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
}

.xc-explorer__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: var(--xc-fs-sm);
  font-weight: 500;
}

.xc-explorer__more .xc-arrow {
  transition: transform var(--xc-duration) var(--xc-ease);
}

.xc-explorer__item:hover .xc-explorer__more,
.xc-explorer__item:focus-visible .xc-explorer__more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xc-explorer__item:hover .xc-arrow,
.xc-explorer__item:focus-visible .xc-arrow {
  transform: translateX(4px);
}

/* ----- Device finder ----- */

.xc-finder {
  display: grid;
  gap: 1.5rem;
}

.xc-finder__steps {
  display: grid;
  gap: 1.35rem;
}

.xc-finder__step {
  border-top: 1px solid var(--xc-line);
  padding-top: 1rem;
}

.xc-finder__step-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.xc-finder__n {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  color: var(--xc-cyan);
}

.xc-finder__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.xc-finder__opt {
  min-height: var(--xc-touch);
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  background: var(--xc-surface);
  color: var(--xc-text);
  text-align: left;
  font-size: var(--xc-fs-sm);
  transition: border-color var(--xc-duration) var(--xc-ease), background var(--xc-duration) var(--xc-ease);
}

.xc-finder__opt.is-active,
.xc-finder__opt[aria-pressed="true"] {
  border-color: var(--xc-cyan);
  background: var(--xc-cyan-soft);
  box-shadow: inset 2px 0 0 var(--xc-cyan);
}

.xc-finder__result {
  border: 1px solid var(--xc-line);
  padding: 1.25rem;
  background: var(--xc-surface);
  display: grid;
  gap: 1rem;
}

.xc-finder__result img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.xc-finder__result h3 {
  margin: 0.25rem 0 0.5rem;
}

/* ----- Charging sequence ----- */

.xc-charge-flow {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}

.xc-charge-flow__item {
  flex: 0 0 min(78%, 18rem);
  scroll-snap-align: start;
  border: 1px solid var(--xc-line);
  background: var(--xc-surface);
}

.xc-charge-flow__item .xc-media,
.xc-charge-flow__item img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.xc-charge-flow__body {
  padding: 0.95rem 1rem 1.15rem;
}

.xc-charge-flow__item h3 {
  font-size: 1.05rem;
  margin: 0.2rem 0 0.4rem;
}

.xc-charge-flow__item p {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
}

.xc-charge-flow__arrow {
  display: none;
  align-self: center;
  font-family: var(--xc-mono);
  color: var(--xc-cyan);
  letter-spacing: 0;
  flex-shrink: 0;
}

/* ----- Carousel ----- */

.xc-swiper {
  position: relative;
}

.xc-swiper .swiper-slide,
.xc-swiper__slide {
  height: auto;
  display: flex;
  flex-direction: column;
  background: var(--xc-surface);
  border: 1px solid var(--xc-line);
}

.xc-swiper__slide .xc-media,
.xc-swiper .swiper-slide img,
.xc-swiper__slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.xc-swiper__body {
  padding: 1rem 1.05rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.xc-swiper__body h3 {
  font-size: var(--xc-h3);
}

.xc-swiper__body p {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
}

.xc-swiper__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.15rem;
}

.xc-swiper__progress {
  flex: 1;
  height: 1px;
  background: var(--xc-line);
  position: relative;
  overflow: hidden;
}

.xc-swiper__progress span,
.xc-swiper__progress .swiper-pagination-progressbar-fill {
  display: block;
  height: 100%;
  background: var(--xc-cyan);
  transform-origin: left center;
}

.xc-swiper .swiper-pagination-progressbar {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--xc-line);
  top: auto;
  left: auto;
}

.xc-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--xc-cyan);
}

.xc-swiper__nav,
.xc-swiper-nav {
  display: flex;
  gap: 0.35rem;
}

.xc-swiper__btn,
.xc-swiper-btn {
  width: var(--xc-touch);
  height: var(--xc-touch);
  border: 1px solid var(--xc-line-strong);
  border-radius: var(--xc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--xc-text);
  background: var(--xc-surface);
}

.xc-swiper__btn:hover,
.xc-swiper-btn:hover,
.xc-swiper__btn:focus-visible,
.xc-swiper-btn:focus-visible {
  border-color: var(--xc-cyan);
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  box-shadow: var(--xc-glow-cyan);
}

.xc-swiper__btn:disabled,
.xc-swiper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.xc-section--dark .xc-swiper__slide,
.xc-section--dark .xc-swiper .swiper-slide {
  background: var(--xc-surface-2);
  border-color: var(--xc-line-light);
  color: var(--xc-white);
}

.xc-section--dark .xc-swiper__body p {
  color: rgba(246, 247, 245, 0.7);
}

.xc-section--dark .xc-swiper__btn,
.xc-section--dark .xc-swiper-btn {
  background: transparent;
  color: var(--xc-white);
  border-color: var(--xc-line-light-strong);
}

/* ----- Smart desk ----- */

.xc-desk {
  display: grid;
  gap: 0.75rem;
}

.xc-desk__main {
  min-height: 16rem;
}

.xc-desk__main img,
.xc-desk__side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xc-desk__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.xc-desk__side .xc-media {
  min-height: 8.5rem;
  aspect-ratio: 1 / 1;
}

.xc-desk__copy {
  padding-top: 0.5rem;
}

.xc-desk__copy p + p {
  margin-top: 0.85rem;
}

/* ----- Travel ----- */

.xc-travel {
  display: grid;
  gap: 1.25rem;
}

.xc-travel__row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.xc-travel__row .xc-media,
.xc-travel__fig {
  flex: 0 0 72%;
  scroll-snap-align: start;
  min-height: 12rem;
}

.xc-travel__row img,
.xc-travel__fig img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.xc-travel__copy p + p {
  margin-top: 0.85rem;
}

/* ----- Guides ----- */

.xc-guides {
  display: grid;
  gap: 0.85rem;
}

.xc-guide,
.xc-guides__card {
  display: grid;
  border: 1px solid var(--xc-line);
  background: var(--xc-surface);
  overflow: hidden;
  transition: border-color var(--xc-duration) var(--xc-ease), box-shadow var(--xc-duration) var(--xc-ease);
}

.xc-guides__card:hover,
.xc-guides__card:focus-visible,
.xc-guide:hover {
  border-color: var(--xc-magenta);
  box-shadow: var(--xc-glow-magenta);
}

.xc-guide .xc-media,
.xc-guides__card .xc-media,
.xc-guide img,
.xc-guides__card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
}

.xc-guide__body,
.xc-guides__body {
  padding: 1rem 1.05rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.xc-guide h3,
.xc-guides__card h3 {
  font-size: var(--xc-h3);
}

.xc-guide p,
.xc-guides__card p {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
}

.xc-filters,
.xc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.xc-chip,
.xc-filters button {
  min-height: var(--xc-touch);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  background: var(--xc-surface);
  color: var(--xc-text);
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
}

.xc-chip.is-active,
.xc-filters button.is-active,
.xc-chip[aria-pressed="true"] {
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  border-color: var(--xc-cyan);
}

/* ----- Journal ----- */

.xc-journal {
  display: grid;
  gap: 1.25rem;
}

.xc-journal__feature {
  display: grid;
  gap: 1rem;
  border-bottom: 1px solid var(--xc-line);
  padding-bottom: 1.5rem;
}

.xc-journal__feature .xc-media,
.xc-journal__feature img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.xc-journal__feature h2,
.xc-journal__feature h3 {
  font-size: var(--xc-h2);
  max-width: 18ch;
}

.xc-journal__side {
  display: grid;
  gap: 0;
}

.xc-journal__side a,
.xc-journal__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--xc-line);
  min-height: var(--xc-touch);
}

.xc-journal__side img {
  width: 6.5rem;
  height: 4.6rem;
  object-fit: cover;
}

.xc-journal__side h3 {
  font-size: 1rem;
}

.xc-journal-grid {
  display: grid;
  gap: 0.85rem;
}

/* ----- Final CTA ----- */

.xc-cta {
  position: relative;
  min-height: 22rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--xc-white);
}

.xc-cta__media {
  position: absolute;
  inset: 0;
}

.xc-cta img,
.xc-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xc-cta__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(7, 9, 14, 0.82) 0%, rgba(7, 9, 14, 0.45) 48%, rgba(255, 77, 141, 0.28) 100%);
}

.xc-cta__inner,
.xc-cta .xc-container {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.xc-cta .xc-btn--ghost {
  color: var(--xc-white);
  border-color: rgba(238, 244, 251, 0.45);
}

.xc-cta .xc-btn--ghost:hover,
.xc-cta .xc-btn--ghost:focus-visible {
  background: rgba(238, 244, 251, 0.12);
  color: var(--xc-white);
}

.xc-cta h2 {
  color: var(--xc-white);
  max-width: 16ch;
  margin-bottom: 0.85rem;
}

.xc-cta p {
  color: rgba(238, 244, 251, 0.78);
  max-width: 32rem;
  margin-bottom: 1.35rem;
}

/* ----- Inner page hero ----- */

.xc-pagehero {
  position: relative;
  display: grid;
  grid-template-areas: "media" "copy";
  min-height: 22rem;
  max-height: 70vh;
  background: var(--xc-graphite);
  color: var(--xc-white);
  overflow: hidden;
}

.xc-pagehero__media {
  grid-area: media;
  min-height: 12rem;
  position: relative;
  overflow: hidden;
}

.xc-pagehero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 14, 0.35), rgba(255, 77, 141, 0.18));
}

.xc-pagehero__media img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  max-height: 36vh;
  object-fit: cover;
}

.xc-pagehero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(7, 9, 14, 0.55), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0, transparent 47px, rgba(60, 232, 216, 0.09) 47px, rgba(60, 232, 216, 0.09) 48px),
    repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(255, 77, 141, 0.08) 47px, rgba(255, 77, 141, 0.08) 48px);
}

.xc-pagehero__copy {
  grid-area: copy;
  padding: 1.5rem var(--xc-pad) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.xc-pagehero h1 {
  color: var(--xc-white);
  font-size: var(--xc-h1);
  max-width: 16ch;
  margin: 0.4rem 0 0.75rem;
}

.xc-pagehero .xc-lead,
.xc-pagehero p {
  color: rgba(246, 247, 245, 0.76);
  max-width: 34rem;
}

.xc-bc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 247, 245, 0.62);
}

.xc-bc a {
  color: inherit;
}

.xc-bc a:hover,
.xc-bc a:focus-visible {
  color: var(--xc-white);
}

.xc-bc li + li::before,
.xc-bc__sep {
  content: "/";
  margin-right: 0.55rem;
  color: rgba(246, 247, 245, 0.38);
}

.xc-bc ol,
.xc-bc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.15rem;
}

.xc-pagehero--light {
  background: var(--xc-graphite);
  color: var(--xc-white);
  border-bottom: 1px solid var(--xc-line);
  overflow: hidden;
  max-height: none;
}

.xc-pagehero__media {
  position: relative;
}

.xc-pagehero--light h1 {
  color: var(--xc-white);
}

.xc-pagehero--light .xc-lead,
.xc-pagehero--light p,
.xc-pagehero--light .xc-bc {
  color: var(--xc-muted);
}

/* ----- FAQ ----- */

.xc-faq {
  display: block;
  border-top: 1px solid var(--xc-line);
}

.xc-faq__item {
  border-bottom: 1px solid var(--xc-line);
}

.xc-faq__q,
.xc-faq summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.95rem 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.xc-faq summary::-webkit-details-marker {
  display: none;
}

.xc-faq__q::after,
.xc-faq summary::after {
  content: "+";
  font-family: var(--xc-mono);
  color: var(--xc-cyan);
  flex-shrink: 0;
}

.xc-faq__q[aria-expanded="true"]::after,
.xc-faq details[open] summary::after {
  content: "–";
}

.xc-faq__a {
  display: none;
  padding: 0 0 1.15rem;
  color: var(--xc-muted);
  line-height: var(--xc-lh-prose);
  max-width: 42rem;
}

.xc-faq__q[aria-expanded="true"] + .xc-faq__a,
.xc-faq__item.is-open .xc-faq__a,
.xc-faq details[open] .xc-faq__a {
  display: block;
}

.xc-faq details .xc-faq__a {
  display: block;
}

/* ----- Compare ----- */

.xc-compare-wrap {
  overflow-x: auto;
}

.xc-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--xc-fs-sm);
  display: none;
}

.xc-compare th,
.xc-compare td {
  border: 1px solid var(--xc-line);
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.xc-compare thead th {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--xc-gray);
  background: var(--xc-surface);
}

.xc-compare tbody th {
  font-weight: 500;
  white-space: nowrap;
}

.xc-compare a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xc-compare-cards {
  display: grid;
  gap: 0.75rem;
}

.xc-compare-card {
  border: 1px solid var(--xc-line);
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--xc-surface);
}

.xc-compare-card h3 {
  margin-bottom: 0.75rem;
}

.xc-compare-card dl {
  display: grid;
  gap: 0.55rem;
}

.xc-compare-card dt {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-gray);
}

.xc-compare-card dd {
  font-size: var(--xc-fs-sm);
  margin-bottom: 0.35rem;
}

/* ----- Article / prose ----- */

.xc-article {
  max-width: 42rem;
  margin-inline: auto;
}

.xc-article__hero {
  margin: 1.25rem 0 1.75rem;
}

.xc-article__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.xc-article__hero figcaption,
.xc-figure figcaption {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-gray);
  margin-top: 0.55rem;
}

.xc-prose,
.xc-article__body {
  font-size: 1rem;
  line-height: var(--xc-lh-prose);
  color: var(--xc-text);
}

.xc-prose h2,
.xc-article__body h2 {
  font-size: var(--xc-h3);
  margin: 2.1rem 0 0.7rem;
  line-height: 1.4;
}

.xc-prose h3,
.xc-article__body h3 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
}

.xc-prose p,
.xc-article__body p {
  margin-bottom: 1.15rem;
}

.xc-prose ul,
.xc-prose ol,
.xc-article__body ul,
.xc-article__body ol {
  margin: 0 0 1.15rem 1.15rem;
  list-style: disc;
}

.xc-prose ol,
.xc-article__body ol {
  list-style: decimal;
}

.xc-prose li,
.xc-article__body li {
  margin-bottom: 0.35rem;
}

.xc-prose blockquote,
.xc-article blockquote {
  font-family: var(--xc-serif);
  font-size: 1.15rem;
  line-height: 1.75;
  border-left: 1px solid var(--xc-cyan);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--xc-text);
}

.xc-take {
  border: 1px solid var(--xc-line);
  padding: 1.25rem 1.2rem;
  margin: 1.75rem 0;
  background: var(--xc-surface);
}

.xc-take h2,
.xc-take h3 {
  font-size: var(--xc-fs-sm);
  font-family: var(--xc-mono);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.xc-take li {
  padding: 0.35rem 0 0.35rem 1rem;
  position: relative;
  font-size: var(--xc-fs-sm);
}

.xc-take li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--xc-cyan);
}

.xc-related {
  display: grid;
  gap: 0.75rem;
}

.xc-related a {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.9rem;
  align-items: center;
  border: 1px solid var(--xc-line);
  padding: 0.65rem;
  min-height: var(--xc-touch);
  background: var(--xc-surface);
  transition: border-color var(--xc-duration) var(--xc-ease);
}

.xc-related a:hover,
.xc-related a:focus-visible {
  border-color: var(--xc-cyan);
}

.xc-related img {
  width: 6.5rem;
  height: 4.6rem;
  object-fit: cover;
}

/* ----- Forms ----- */

.xc-form {
  display: grid;
  gap: 1rem;
}

.xc-form__field,
.xc-field {
  display: grid;
  gap: 0.4rem;
}

.xc-form label,
.xc-field label {
  font-size: var(--xc-fs-sm);
  font-weight: 500;
}

.xc-form input,
.xc-form textarea,
.xc-form select,
.xc-field input,
.xc-field textarea,
.xc-field select {
  width: 100%;
  min-height: var(--xc-touch);
  border: 1px solid var(--xc-line-strong);
  border-radius: var(--xc-radius);
  background: var(--xc-surface-2);
  color: var(--xc-text);
  padding: 0.65rem 0.8rem;
}

.xc-form textarea,
.xc-field textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.7;
}

.xc-form input:focus,
.xc-form textarea:focus,
.xc-form select:focus {
  outline: 2px solid var(--xc-cyan);
  outline-offset: 2px;
  border-color: var(--xc-cyan);
}

.xc-form .is-error input,
.xc-form .is-error textarea,
.xc-form__field.is-error input,
.xc-form__field.is-error textarea {
  border-color: var(--xc-error);
  background: var(--xc-error-soft);
}

.xc-form__error {
  font-size: var(--xc-fs-sm);
  color: var(--xc-error);
}

.xc-form__note,
.xc-form .is-demo,
.xc-form__demo {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
}

.xc-form.is-demo .xc-btn,
.xc-form .is-demo {
  position: relative;
}

.xc-form__ok {
  border: 1px solid var(--xc-cyan);
  background: var(--xc-cyan-soft);
  padding: 1rem 1.1rem;
  font-size: var(--xc-fs-sm);
}

.xc-contact,
.xc-company {
  display: grid;
  gap: 1.75rem;
}

.xc-company table,
.xc-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--xc-fs-sm);
}

.xc-company th,
.xc-company td,
.xc-spec th,
.xc-spec td {
  border-bottom: 1px solid var(--xc-line);
  padding: 0.8rem 0.4rem;
  text-align: left;
  vertical-align: top;
}

.xc-company th,
.xc-spec th {
  width: 8.5rem;
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--xc-gray);
}

.xc-legal {
  max-width: 42rem;
  margin-inline: auto;
  line-height: var(--xc-lh-prose);
}

.xc-legal h1 {
  font-size: var(--xc-h2);
  margin-bottom: 1rem;
}

.xc-legal h2 {
  font-size: var(--xc-h3);
  margin: 2rem 0 0.65rem;
}

.xc-legal p {
  margin-bottom: 1rem;
}

/* ----- Footer ----- */

.xc-footer {
  background: var(--xc-graphite);
  color: var(--xc-white);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 1.5rem;
  border-top: 1px solid rgba(60, 232, 216, 0.22);
}

.xc-footer__inner {
  max-width: var(--xc-wide);
  margin-inline: auto;
}

.xc-footer a {
  color: rgba(246, 247, 245, 0.78);
}

.xc-footer a:hover,
.xc-footer a:focus-visible {
  color: var(--xc-white);
}

.xc-footer__grid {
  display: grid;
  gap: 1.75rem;
  max-width: var(--xc-wide);
  margin-inline: auto;
  padding-inline: var(--xc-pad);
}

.xc-footer__logo {
  font-family: var(--xc-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  margin-bottom: 0.65rem;
}

.xc-footer__tagline {
  color: rgba(246, 247, 245, 0.7);
  font-size: var(--xc-fs-sm);
  margin-bottom: 0.85rem;
}

.xc-footer__note,
.xc-footer__legal-name,
.xc-footer__hours {
  font-size: 0.75rem;
  color: rgba(246, 247, 245, 0.5);
  line-height: 1.7;
}

.xc-footer__company {
  max-width: var(--xc-wide);
  margin: 2rem auto 0;
  padding-inline: var(--xc-pad);
  font-size: var(--xc-fs-sm);
  color: rgba(246, 247, 245, 0.7);
  display: grid;
  gap: 0.25rem;
}

.xc-logo__word {
  font-family: var(--xc-mono);
  letter-spacing: 0.22em;
  font-size: 0.8125rem;
}

.xc-btn--primary {
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  border-color: var(--xc-cyan);
}

.xc-header__finder {
  display: none;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  min-height: var(--xc-touch);
  align-items: center;
  padding-inline: 0.4rem;
  white-space: nowrap;
}

.xc-nav-toggle {
  display: inline-flex;
}

.xc-drawer {
  background: transparent;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.xc-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.xc-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--xc-overlay-heavy);
  border: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--xc-duration) var(--xc-ease);
}

.xc-drawer.is-open .xc-drawer__backdrop {
  opacity: 1;
}

.xc-drawer__panel {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 22rem);
  height: 100%;
  background: var(--xc-surface);
  color: var(--xc-text);
  overflow-y: auto;
  padding: calc(var(--xc-header) + 0.75rem) 1.25rem 2rem;
  transform: translateX(100%);
  transition: transform var(--xc-duration) var(--xc-ease);
}

.xc-drawer.is-open .xc-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .xc-drawer__backdrop,
  .xc-drawer__panel {
    transition: none;
  }
}

.xc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.xc-drawer__title {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
}

.xc-acc {
  border-top: 1px solid var(--xc-line);
}

.xc-acc__trigger {
  width: 100%;
  min-height: var(--xc-touch);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  text-align: left;
}

.xc-acc__trigger::after {
  content: "+";
  font-family: var(--xc-mono);
  color: var(--xc-gray);
}

.xc-acc__trigger[aria-expanded="true"]::after {
  content: "–";
}

.xc-acc__panel[hidden] {
  display: none !important;
}

.xc-acc__panel:not([hidden]) {
  display: block;
  padding-bottom: 0.5rem;
}

.xc-drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--xc-touch);
  border-bottom: 1px solid var(--xc-line);
  font-size: 0.9375rem;
}

.xc-drawer__actions {
  margin-top: auto;
  display: grid;
  gap: 0.5rem;
  padding-top: 1.5rem;
}

.xc-drawer__search,
.xc-drawer__cta {
  min-height: var(--xc-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--xc-line-strong);
  font-size: 0.875rem;
}

.xc-drawer__cta {
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  border-color: var(--xc-cyan);
}

.xc-search__list {
  list-style: none;
  max-height: min(50vh, 22rem);
  overflow-y: auto;
}

.xc-search__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--xc-touch);
  padding: 0.45rem 0.15rem;
  border-bottom: 1px solid var(--xc-line);
}

.xc-search__item-hint {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--xc-gray);
}

.xc-search__empty {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
  padding: 0.75rem 0 1rem;
}

.xc-search__kicker {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
}

.xc-faq__btn.xc-faq__q {
  background: transparent;
}

.xc-faq__a[hidden] {
  display: none !important;
}

.xc-faq__q[aria-expanded="true"] + .xc-faq__a {
  display: block;
}

.xc-faq__icon {
  display: none;
}

.xc-cta__media {
  position: absolute;
  inset: 0;
}

.xc-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.xc-chip {
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--xc-line);
  font-size: 0.8125rem;
  background: transparent;
}

.xc-chip.is-active,
.xc-chip[aria-pressed="true"] {
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  border-color: var(--xc-cyan);
}

.xc-points {
  border: 1px solid var(--xc-line);
  padding: 1.25rem 1.4rem;
  margin: 2rem 0;
  background: var(--xc-surface);
}

.xc-points h2,
.xc-points h3 {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.xc-points li {
  padding: 0.35rem 0 0.35rem 1rem;
  position: relative;
}

.xc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.45rem;
  height: 1px;
  background: var(--xc-cyan);
}

.xc-related {
  display: grid;
  gap: 1rem;
}

.xc-types {
  display: grid;
  gap: 0.75rem;
}

.xc-type {
  border: 1px solid var(--xc-line);
  padding: 1.15rem 1.2rem;
  background: var(--xc-surface);
}

.xc-type:nth-child(2) {
  border-color: rgba(255, 77, 141, 0.35);
}

.xc-type:nth-child(3) {
  border-color: rgba(139, 124, 255, 0.35);
}

.xc-type h3 {
  font-size: 1.05rem;
  margin: 0.25rem 0 0.4rem;
}

.xc-contact-grid {
  display: grid;
  gap: 2rem;
}

.xc-demo-banner {
  border: 1px solid var(--xc-line);
  border-left: 3px solid var(--xc-magenta);
  padding: 0.85rem 1rem;
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
  margin-bottom: 1.5rem;
  background: var(--xc-magenta-soft);
}

@media (min-width: 1024px) {
  .xc-header__finder {
    display: inline-flex;
  }

  .xc-nav-toggle,
  .xc-hamburger.xc-nav-toggle {
    display: none;
  }

  .xc-contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    align-items: start;
  }

  .xc-types {
    grid-template-columns: repeat(3, 1fr);
  }

  .xc-related {
    grid-template-columns: repeat(3, 1fr);
  }
}

.xc-footer__heading {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  text-transform: uppercase;
  color: var(--xc-cyan);
  margin-bottom: 0.75rem;
}

.xc-footer__col a,
.xc-footer ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: var(--xc-fs-sm);
}

.xc-footer address,
.xc-footer__address {
  font-style: normal;
  font-size: var(--xc-fs-sm);
  line-height: 1.8;
  color: rgba(246, 247, 245, 0.7);
}

.xc-footer__bottom {
  max-width: var(--xc-wide);
  margin: 2rem auto 0;
  padding: 1.15rem var(--xc-pad) 0;
  border-top: 1px solid var(--xc-line-light);
  display: grid;
  gap: 0.5rem;
}

.xc-footer__copy,
.xc-footer__demo {
  font-size: 0.75rem;
  color: rgba(246, 247, 245, 0.5);
}

/* ----- Misc pages / lists ----- */

.xc-list {
  display: grid;
  gap: 0;
}

.xc-list a {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.85rem;
  align-items: center;
  min-height: var(--xc-touch);
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--xc-line);
}

.xc-list__n {
  font-family: var(--xc-mono);
  font-size: var(--xc-fs-kicker);
  letter-spacing: var(--xc-track);
  color: var(--xc-cyan);
}

.xc-mosaic {
  display: grid;
  gap: 0.65rem;
}

.xc-figure img {
  width: 100%;
  object-fit: cover;
}

.xc-compat {
  display: grid;
  gap: 1rem;
}

.xc-compat__brand {
  border: 1px solid var(--xc-line);
  padding: 1.1rem 1.15rem;
}

.xc-compat__models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.xc-compat__models span {
  border: 1px solid var(--xc-line);
  padding: 0.45rem 0.7rem;
  font-size: var(--xc-fs-sm);
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
}

/* ----- Main offset ----- */

.xc-main {
  display: block;
}

body:not(.xc-home) .xc-main {
  padding-top: var(--xc-header);
}

body.is-locked {
  overflow: hidden;
}

html,
body {
  overflow-x: clip;
}

.xc-company table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
}

.xc-company th {
  text-align: left;
  font-weight: 500;
  width: 5.5rem;
  padding: 0.45rem 1rem 0.45rem 0;
  color: var(--xc-gray);
  font-size: var(--xc-fs-sm);
  vertical-align: top;
}

.xc-company td {
  padding: 0.45rem 0;
  font-size: var(--xc-fs-sm);
}

body:not(.xc-home) .xc-pagehero {
  margin-top: 0;
}

body.xc-home .xc-header.is-overlay:not(.is-solid) .xc-logo__jp {
  color: rgba(238, 244, 251, 0.7);
}

/* ----- Signal strip ----- */

.xc-signal {
  position: relative;
  z-index: 2;
  border-block: 1px solid var(--xc-line);
  background: rgba(17, 24, 32, 0.72);
  backdrop-filter: blur(12px);
}

.xc-signal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.xc-signal article {
  padding: 1.15rem 1rem;
  border-right: 1px solid var(--xc-line);
  border-bottom: 1px solid var(--xc-line);
}

.xc-signal article:nth-child(even) {
  border-right: 0;
}

.xc-signal span {
  font-family: var(--xc-mono);
  font-size: 0.625rem;
  letter-spacing: var(--xc-track);
  color: var(--xc-cyan);
  display: block;
  margin-bottom: 0.4rem;
}

.xc-signal article:nth-child(2) span { color: var(--xc-violet); }
.xc-signal article:nth-child(3) span { color: var(--xc-magenta); }
.xc-signal article:nth-child(4) span { color: var(--xc-amber); }

.xc-signal strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
}

.xc-signal p {
  font-size: var(--xc-fs-sm);
  color: var(--xc-muted);
  margin: 0;
}

.xc-charge-flow__item:nth-of-type(1) {
  border-color: rgba(60, 232, 216, 0.4);
}
.xc-charge-flow__item:nth-of-type(2) {
  border-color: rgba(139, 124, 255, 0.4);
}
.xc-charge-flow__item:nth-of-type(3) {
  border-color: rgba(255, 77, 141, 0.45);
}
.xc-charge-flow__item:nth-of-type(4) {
  border-color: rgba(255, 200, 87, 0.4);
}

.xc-charge-flow__item:nth-of-type(2) .xc-kicker { color: var(--xc-violet); }
.xc-charge-flow__item:nth-of-type(3) .xc-kicker { color: var(--xc-magenta); }
.xc-charge-flow__item:nth-of-type(4) .xc-kicker { color: var(--xc-amber); }

.xc-eco__node:nth-child(even).is-active {
  border-color: var(--xc-magenta);
  background: var(--xc-magenta-soft);
  box-shadow: var(--xc-glow-magenta);
}

.xc-eco__node:nth-child(even).is-active .xc-eco__en,
.xc-eco__node:nth-child(even).is-active::before {
  color: var(--xc-magenta);
  background: var(--xc-magenta);
}

.xc-explorer__item:nth-child(even):hover,
.xc-explorer__item:nth-child(even):focus-visible {
  border-color: var(--xc-magenta);
  box-shadow: var(--xc-glow-magenta);
}

@media (min-width: 768px) {
  .xc-signal__row {
    grid-template-columns: repeat(4, 1fr);
  }

  .xc-signal article {
    border-bottom: 0;
  }

  .xc-signal article:nth-child(even) {
    border-right: 1px solid var(--xc-line);
  }

  .xc-signal article:last-child {
    border-right: 0;
  }
}

.xc-marquee {
  overflow: hidden;
  background: var(--xc-cyan);
  color: var(--xc-graphite);
  padding: 0.85rem 0;
}

.xc-marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: xc-marquee 30s linear infinite;
}

.xc-marquee__track span {
  font-family: var(--xc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

@keyframes xc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .xc-stage__visual img,
  .xc-media img,
  .xc-techline::after {
    animation: none !important;
    transform: none !important;
  }

  .xc-media:hover img,
  .xc-explorer__item:hover img {
    transform: none !important;
  }

  [data-aos],
  .xc-fade-up,
  .xc-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}