/*
Theme Name: Hongrongfa B2B
Theme URI: https://energyhf.com
Author: 深圳鸿荣发电子实业有限公司
Description: Custom B2B website theme for a Shenzhen battery manufacturer. Flexbox layout, token based design system.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: hongrongfa
*/

/* ==========================================================================
   Design tokens. Every visual value used below is defined here.
   Note: media query breakpoints cannot read custom properties (CSS limitation),
   so breakpoint widths are the only literal lengths outside :root.
   ========================================================================== */
:root {
  /* Color */
  --color-navy-950: #08141f;
  --color-navy-900: #0c1e30;
  --color-navy-800: #12293f;
  --color-navy-700: #1d3d5e;
  --color-navy-100: #e5ebf1;
  --color-steel: #9aabbd;
  --color-steel-light: #c9d4df;
  --color-ink: #121a22;
  --color-text: #2b343e;
  --color-muted: #5d6975;
  --color-line: #d8dee5;
  --color-line-dark: #223c56;
  --color-surface: #f2f4f7;
  --color-white: #ffffff;
  --color-accent: #f2a900;
  --color-accent-hover: #ffbb24;
  --color-accent-ink: #0c1e30;
  --color-accent-on-light: #8f5e00;
  --color-accent-soft: #fdf3dc;
  --color-on-dark-line: rgba(255, 255, 255, 0.3);
  --color-shadow: rgba(12, 30, 48, 0.08);
  --color-focus: #f2a900;

  /* Typography */
  --font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
  --font-heading: "IBM Plex Sans", "Inter", "Arial", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.375rem;
  --font-size-hero: 3.25rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* Spacing */
  --space-none: 0;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --section-pad: var(--space-4xl);
  --gutter: var(--space-xl);
  --gap-cards: var(--space-lg);

  /* Shape */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;
  --border-width-strong: 3px;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* Elevation */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 10px 28px var(--color-shadow);

  /* Size */
  --container-width: 77.5rem;
  --measure: 46rem;
  --measure-narrow: 36rem;
  --full: 100%;
  --viewport-height: 100vh;
  --header-height: 4.5rem;
  --scroll-offset: 6rem;
  --touch-target: 2.75rem;
  --button-height: 3rem;
  --button-height-sm: 2.5rem;
  --input-height: 3rem;
  --textarea-height: 9rem;
  --icon-sm: 1.125rem;
  --icon-md: 1.5rem;
  --icon-box: 3rem;
  --logo-mark: 2.5rem;
  --eyebrow-line: 1.75rem;
  --step-size: 2.75rem;
  --step-line-min: 1.5rem;
  --marker-width: 2.25rem;
  --sr-size: 1px;
  --clip-hidden: inset(50%);
  --menu-max-height: calc(100vh - var(--header-height));

  /* Flex column bases */
  --basis-2: calc((100% - var(--gap-cards)) / 2);
  --basis-3: calc((100% - 2 * var(--gap-cards)) / 3);
  --basis-4: calc((100% - 3 * var(--gap-cards)) / 4);
  --basis-scroll: 78%;
  --basis-hero-text: 50%;
  --basis-hero-media: 44%;
  --basis-split-main: 46%;
  --basis-split-aside: 48%;
  --basis-media: 42%;
  --thumb-size: 7.5rem;
  --basis-footer-brand: 24%;
  --basis-footer-col: 13%;
  --basis-footer-contact: 19%;
  --basis-contact-guide: 40%;
  --basis-contact-form: 54%;

  /* Ratios */
  --ratio-product: 4 / 3;
  --ratio-application: 3 / 2;
  --ratio-square: 1 / 1;

  /* Motion & layers */
  --transition: 160ms ease;
  --z-header: 100;
  --header-top: var(--wp-admin--admin-bar--height, 0);
}

@media (max-width: 1199px) {
  :root {
    --font-size-hero: 2.875rem;
    --font-size-3xl: 2.125rem;
    --gutter: var(--space-lg);
    --section-pad: 5rem;
  }
}

@media (max-width: 1023px) {
  :root {
    --font-size-hero: 2.5rem;
    --section-pad: 4.5rem;
    --basis-split-main: 100%;
    --basis-split-aside: 100%;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-hero: 2.125rem;
    --font-size-3xl: 1.75rem;
    --font-size-2xl: 1.5rem;
    --font-size-xl: 1.3125rem;
    --font-size-lead: 1.0625rem;
    --gutter: var(--space-md);
    --gap-cards: var(--space-md);
    --section-pad: var(--space-3xl);
    --header-height: 3.75rem;
    --scroll-offset: 4.5rem;
    --logo-mark: 2.25rem;
  }
}

@media (max-width: 389px) {
  :root {
    --font-size-hero: 1.875rem;
    --basis-scroll: 86%;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: var(--full);
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}

body {
  margin: var(--space-none);
  display: flex;
  flex-direction: column;
  min-height: var(--viewport-height);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

img,
svg {
  display: block;
  max-width: var(--full);
}

img {
  height: auto;
}

a {
  color: var(--color-navy-700);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

h1,
h2,
h3,
h4 {
  margin: var(--space-none);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: var(--space-none);
}

ul,
ol {
  padding: var(--space-none);
  list-style: none;
}

.container {
  width: var(--full);
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  display: block;
  height: var(--sr-size);
  overflow: hidden;
  clip-path: var(--clip-hidden);
  white-space: nowrap;
}

.skip-link:focus {
  height: auto;
  clip-path: none;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: var(--weight-semibold);
}

.visually-hidden {
  width: var(--sr-size);
  height: var(--sr-size);
  overflow: hidden;
  clip-path: var(--clip-hidden);
  white-space: nowrap;
}

.text-accent {
  color: var(--color-accent-on-light);
}

.icon {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon--md {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--button-height);
  padding-inline: var(--space-lg);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.button-small {
  min-height: var(--button-height-sm);
  padding-inline: var(--space-md);
  font-size: var(--font-size-sm);
}

.button-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.button-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.button-secondary {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button-secondary:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.button-secondary--light {
  border-color: var(--color-on-dark-line);
  color: var(--color-white);
}

.button-secondary--light:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy-900);
}

.button-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-700);
  text-decoration: none;
}

.button-text:hover {
  color: var(--color-accent-on-light);
}

.button-text--light,
.section--dark .button-text {
  color: var(--color-accent);
}

/* ==========================================================================
   Shared text components
   ========================================================================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-navy-700);
}

.eyebrow__line {
  flex: none;
  width: var(--eyebrow-line);
  height: var(--border-width-strong);
  background: var(--color-accent);
}

.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--outline {
  border: var(--border-width) solid var(--color-line);
  color: var(--color-muted);
}

.badge--demo {
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent);
  color: var(--color-accent-on-light);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tag {
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-white);
}

.tag-list--dark .tag {
  background: transparent;
  border-color: var(--color-line-dark);
  color: var(--color-steel-light);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
}

.check-list__marker {
  display: flex;
  flex: none;
  color: var(--color-accent-on-light);
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.link-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-navy-700);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-line);
}

.link-list__link:hover {
  color: var(--color-accent-on-light);
  border-color: var(--color-accent);
}

/* ==========================================================================
   Header component
   ========================================================================== */
.site-header {
  position: sticky;
  top: var(--header-top);
  z-index: var(--z-header);
  background: var(--color-navy-950);
  border-bottom: var(--border-width) solid var(--color-line-dark);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-right: auto;
  color: var(--color-white);
  text-decoration: none;
}

.brand__mark {
  width: var(--logo-mark);
  height: var(--logo-mark);
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.brand__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

.brand__sub {
  font-size: var(--font-size-xs);
  line-height: var(--leading-tight);
  color: var(--color-steel);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  border-bottom: var(--border-width-strong) solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-steel-light);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-white);
  border-bottom-color: var(--color-accent);
}

.site-header__quick,
.nav-toggle {
  display: none;
}

.nav-toggle {
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: var(--space-none);
  border: var(--border-width) solid var(--color-line-dark);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.nav-toggle__close {
  display: none;
}

.site-header.is-open .nav-toggle__open {
  display: none;
}

.site-header.is-open .nav-toggle__close {
  display: block;
}

@media (max-width: 1199px) {
  .site-nav,
  .site-nav__list {
    gap: var(--space-md);
  }
}

/* Tablet and mobile header: compact bar + in-flow expandable menu */
@media (max-width: 1023px) {
  .site-header__bar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .site-header__quick,
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    order: 3;
    flex: 1 0 var(--full);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    max-height: var(--menu-max-height);
    overflow-y: auto;
    padding-bottom: var(--space-lg);
  }

  .site-header.is-open .site-nav {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-none);
    border-top: var(--border-width) solid var(--color-line-dark);
  }

  .site-nav__link {
    min-height: var(--button-height);
    font-size: var(--font-size-lg);
    border-bottom: var(--border-width) solid var(--color-line-dark);
  }

  .site-nav__link.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-line-dark);
  }

  .site-nav__cta {
    width: var(--full);
  }
}

/* Small phones: keep logo, quote button and menu toggle on one row */
@media (max-width: 479px) {
  .site-header__bar {
    gap: var(--space-xs);
  }

  .brand__sub {
    display: none;
  }

  .site-header__quick {
    padding-inline: var(--space-sm);
  }
}

/* ==========================================================================
   Sections & headings
   ========================================================================== */
.section {
  padding-block: var(--section-pad);
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-navy-900);
  color: var(--color-steel);
}

.section--dark .section-heading__title,
.section--dark .card-feature__title {
  color: var(--color-white);
}

.section--dark .text-accent,
.hero .text-accent,
.page-hero .text-accent,
.cta-band .text-accent {
  color: var(--color-accent);
}

.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow {
  color: var(--color-steel-light);
}

.section--dark .section-heading__intro,
.section--dark .card-feature__text {
  color: var(--color-steel);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.section-heading--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
}

.section-heading--split .button-text {
  flex: none;
  white-space: nowrap;
}

.section-heading__main {
  display: flex;
  flex-direction: column;
  max-width: var(--measure);
}

.section-heading__title {
  font-size: var(--font-size-3xl);
}

.section-heading__intro {
  margin-top: var(--space-md);
  font-size: var(--font-size-lead);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .section-heading {
    margin-bottom: var(--space-xl);
  }

  .section-heading--split {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero {
  background: var(--color-navy-950);
  color: var(--color-steel);
  padding-block: var(--space-3xl) var(--space-4xl);
  overflow: hidden;
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.hero__content {
  display: flex;
  flex-direction: column;
  flex: 0 1 var(--basis-hero-text);
}

.hero__title {
  font-size: var(--font-size-hero);
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

.hero__text {
  margin-top: var(--space-lg);
  max-width: var(--measure-narrow);
  font-size: var(--font-size-lead);
  color: var(--color-steel-light);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.hero__media {
  flex: 0 1 var(--basis-hero-media);
}

.hero__media img {
  width: var(--full);
}

.fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border-width) solid var(--color-line-dark);
}

.fact-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-steel-light);
}

.fact-list__icon {
  color: var(--color-accent);
}

@media (max-width: 1023px) {
  .hero__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__content,
  .hero__media {
    flex: 1 1 auto;
  }

  .hero__media {
    max-width: var(--measure-narrow);
  }
}

/* Mobile hero: short headline block, full-width CTAs, image after the actions, facts as a swipe row */
@media (max-width: 767px) {
  .hero {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .hero__inner {
    gap: var(--space-xl);
  }

  .hero__text {
    margin-top: var(--space-md);
  }

  .hero__actions {
    flex-direction: column;
    margin-top: var(--space-lg);
    gap: var(--space-sm);
  }

  .hero__actions .button {
    width: var(--full);
  }

  .fact-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: var(--space-lg);
    padding-bottom: var(--space-2xs);
    gap: var(--space-xs);
    scroll-snap-type: x mandatory;
  }

  .fact-list__item {
    flex: none;
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width) solid var(--color-line-dark);
    border-radius: var(--radius-sm);
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Inner page hero, breadcrumb, jump navigation
   ========================================================================== */
.page-hero {
  background: var(--color-navy-950);
  color: var(--color-steel-light);
  padding-block: var(--space-2xl) var(--space-3xl);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
}

.page-hero__title {
  max-width: var(--measure);
  font-size: var(--font-size-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

.page-hero__lead {
  max-width: var(--measure);
  margin-top: var(--space-md);
  font-size: var(--font-size-lead);
}

.breadcrumb {
  margin-bottom: var(--space-xl);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
}

.breadcrumb__link {
  color: var(--color-steel);
}

.breadcrumb__sep {
  color: var(--color-line-dark);
}

.breadcrumb__current {
  color: var(--color-steel-light);
}

.jump-nav {
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-line);
}

.jump-nav__list {
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
}

.jump-nav__item {
  flex: none;
}

.jump-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--button-height);
  border-bottom: var(--border-width-strong) solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.jump-nav__link:hover {
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .page-hero {
    padding-block: var(--space-lg) var(--space-2xl);
  }

  .breadcrumb {
    margin-bottom: var(--space-lg);
  }

  .jump-nav__list {
    gap: var(--space-lg);
    scroll-snap-type: x proximity;
  }

  .jump-nav__item {
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   Card rows (flex wrap)
   ========================================================================== */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-cards);
}

.card-row--3 > * {
  flex: 0 1 var(--basis-3);
}

.card-row--4 > * {
  flex: 0 1 var(--basis-4);
}

@media (max-width: 1023px) {
  .card-row--3 > *,
  .card-row--4 > * {
    flex-basis: var(--basis-2);
  }
}

@media (max-width: 767px) {
  .card-row--3 > *,
  .card-row--4 > * {
    flex-basis: var(--full);
  }

  /* Horizontal swipe row on mobile */
  .card-row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-sm);
  }

  .card-row--scroll > * {
    flex: 0 0 var(--basis-scroll);
    scroll-snap-align: start;
  }
}

.scroll-hint {
  display: none;
}

@media (max-width: 767px) {
  .scroll-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-steel);
  }
}

/* ==========================================================================
   Product card
   ========================================================================== */
.card-product {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.card-product:hover {
  border-color: var(--color-steel);
  box-shadow: var(--shadow-md);
}

.card-product__media {
  display: flex;
  aspect-ratio: var(--ratio-product);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-line);
}

.card-product__media img {
  width: var(--full);
  height: var(--full);
  object-fit: cover;
}

.card-product__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.card-product__type,
.card-product__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.card-product__title {
  font-size: var(--font-size-lg);
}

.card-product__link {
  color: var(--color-ink);
  text-decoration: none;
}

.card-product__link:hover {
  color: var(--color-navy-700);
}

.card-product__text,
.card-product__spec {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.card-product__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--color-line);
}

.card-product__more,
.card-product__actions {
  margin-top: auto;
}

.card-product__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-sm);
}

/* Mobile: compact product cards become a horizontal list item (thumbnail + text) */
@media (max-width: 767px) {
  .card-product--compact {
    flex-direction: row;
  }

  .card-product--compact .card-product__media {
    flex: 0 0 var(--thumb-size);
    width: var(--thumb-size);
    aspect-ratio: auto;
    align-self: stretch;
    border-bottom: var(--space-none);
    border-right: var(--border-width) solid var(--color-line);
  }

  .card-product--compact .card-product__body {
    padding: var(--space-md);
    gap: var(--space-2xs);
  }

  .card-product--compact .card-product__title {
    font-size: var(--font-size-md);
  }

  .card-product--compact .card-product__text,
  .card-product--compact .card-product__meta {
    display: none;
  }

  .card-product--full .card-product__body {
    padding: var(--space-md);
  }
}

/* ==========================================================================
   Application card
   ========================================================================== */
.card-application {
  display: flex;
  flex-direction: column;
  background: var(--color-navy-800);
  border: var(--border-width) solid var(--color-line-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition);
}

.card-application:hover {
  border-color: var(--color-accent);
}

.card-application__media {
  display: flex;
  aspect-ratio: var(--ratio-application);
  border-bottom: var(--border-width) solid var(--color-line-dark);
}

.card-application__media img {
  width: var(--full);
  height: var(--full);
  object-fit: cover;
}

.card-application__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-xs);
  padding: var(--space-lg);
}

.card-application__title {
  font-size: var(--font-size-lg);
  color: var(--color-white);
}

.card-application__text {
  font-size: var(--font-size-sm);
  color: var(--color-steel);
}

.card-application .button-text {
  margin-top: auto;
}

@media (max-width: 767px) {
  .card-application__body {
    padding: var(--space-md);
  }
}

/* ==========================================================================
   Feature card (open layout, no box)
   ========================================================================== */
.card-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: var(--border-width-strong) solid var(--color-navy-900);
}

.section--dark .card-feature {
  border-top-color: var(--color-accent);
}

.card-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: var(--radius-sm);
  background: var(--color-navy-900);
  color: var(--color-accent);
}

.section--dark .card-feature__icon {
  background: var(--color-navy-800);
}

.card-feature__title {
  font-size: var(--font-size-lg);
}

.card-feature__text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .card-feature {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-md);
    padding-top: var(--space-md);
  }

  .card-feature__icon {
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .card-feature__title {
    flex: 1 1 auto;
    font-size: var(--font-size-md);
  }

  .card-feature__text {
    flex: 1 0 var(--full);
  }
}

/* ==========================================================================
   Split layout & panel
   ========================================================================== */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.split--top {
  align-items: flex-start;
}

.split__main {
  display: flex;
  flex-direction: column;
  flex: 0 1 var(--basis-split-main);
}

.split__aside {
  flex: 0 1 var(--basis-split-aside);
}

.split__text {
  margin-top: var(--space-md);
  font-size: var(--font-size-md);
  color: var(--color-muted);
}

.split__text + .split__text {
  margin-top: var(--space-sm);
}

.split__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.panel {
  padding: var(--space-xl);
  background: var(--color-navy-900);
  border-radius: var(--radius-sm);
  color: var(--color-steel);
}

.panel--light {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-line);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.panel__title {
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .split {
    gap: var(--space-xl);
  }

  .split__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .split__actions .button {
    width: var(--full);
  }

  .split__actions .button-text {
    justify-content: center;
  }

  .panel {
    padding: var(--space-lg) var(--space-md);
  }
}

/* ==========================================================================
   Option list (numbered, real HTML markers)
   ========================================================================== */
.option-list {
  display: flex;
  flex-direction: column;
}

.option-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--border-width) solid var(--color-line);
}

.option-list__item:first-child {
  border-top: var(--border-width) solid var(--color-line);
}

.list-marker {
  flex: 0 0 var(--marker-width);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-accent-on-light);
}

.option-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.option-list__title {
  font-size: var(--font-size-md);
  line-height: var(--leading-snug);
}

.option-list__text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.option-list--dark .option-list__item {
  border-color: var(--color-line-dark);
}

.option-list--dark .list-marker {
  color: var(--color-accent);
}

.option-list--dark .option-list__title {
  color: var(--color-white);
}

.option-list--dark .option-list__text {
  color: var(--color-steel);
}

.option-list--compact .option-list__item {
  padding-block: var(--space-sm);
}

/* ==========================================================================
   Process (numbered steps with HTML connector lines)
   ========================================================================== */
.process {
  display: flex;
  gap: var(--space-lg);
}

.process__step {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: var(--space-md);
}

.process__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.process__num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--step-size);
  height: var(--step-size);
  border: var(--border-width) solid var(--color-navy-900);
  border-radius: var(--radius-sm);
  background: var(--color-navy-900);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}

.process__line {
  flex: 1 1 auto;
  height: var(--border-width);
  background: var(--color-line);
}

.process__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-right: var(--space-sm);
}

.process__title {
  font-size: var(--font-size-md);
  line-height: var(--leading-snug);
}

.process__text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* Tablet and mobile: vertical timeline */
@media (max-width: 1023px) {
  .process {
    flex-direction: column;
    gap: var(--space-none);
    max-width: var(--measure);
  }

  .process__step {
    flex-direction: row;
    gap: var(--space-md);
  }

  .process__head {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .process__line {
    flex: 1 1 auto;
    width: var(--border-width);
    height: auto;
    min-height: var(--step-line-min);
    margin-bottom: var(--space-xs);
  }

  .process__body {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-lg);
  }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: var(--color-navy-900);
  border-top: var(--border-width-strong) solid var(--color-accent);
  padding-block: var(--space-3xl);
  color: var(--color-steel);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.cta-band__content {
  display: flex;
  flex-direction: column;
  max-width: var(--measure);
}

.cta-band__title {
  font-size: var(--font-size-2xl);
  color: var(--color-white);
}

.cta-band__text {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  color: var(--color-steel-light);
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: var(--space-sm);
}

@media (max-width: 1023px) {
  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .cta-band {
    padding-block: var(--space-2xl);
  }

  .cta-band__inner {
    align-items: stretch;
    gap: var(--space-xl);
  }

  .cta-band__actions {
    flex-direction: column;
  }

  .cta-band__actions .button {
    width: var(--full);
  }
}

/* ==========================================================================
   Key points (icon list)
   ========================================================================== */
.key-points {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--color-line);
}

.key-points__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-line);
}

.key-points__icon {
  color: var(--color-accent-on-light);
}

.key-points__title {
  font-size: var(--font-size-md);
  line-height: var(--leading-snug);
}

.key-points__text {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .key-points__item {
    padding-block: var(--space-md);
  }
}

/* ==========================================================================
   Product detail component
   ========================================================================== */
.product-list,
.application-list {
  display: flex;
  flex-direction: column;
}

.product-detail,
.application-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
  border-bottom: var(--border-width) solid var(--color-line);
}

.product-detail:first-child,
.application-block:first-child {
  padding-top: var(--space-none);
}

.product-detail:last-child,
.application-block:last-child {
  border-bottom: var(--space-none);
  padding-bottom: var(--space-none);
}

.product-detail--reverse,
.application-block--reverse {
  flex-direction: row-reverse;
}

.product-detail__media,
.application-block__media {
  flex: 0 0 var(--basis-media);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.product-detail__media img,
.application-block__media img {
  width: var(--full);
}

.product-detail__body,
.application-block__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-lg);
}

.product-detail__body .eyebrow {
  margin-bottom: var(--space-none);
}

.product-detail__title,
.application-block__title {
  font-size: var(--font-size-2xl);
}

.product-detail__overview,
.application-block__text {
  color: var(--color-muted);
}

.product-detail__cols,
.application-block__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.product-detail__cols > *,
.application-block__cols > * {
  flex: 1 1 var(--basis-2);
}

.product-detail__group,
.application-block__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-detail__label,
.application-block__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

.product-detail__actions,
.application-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-xs);
}

.spec-table {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--color-line);
}

.spec-table__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: var(--border-width) solid var(--color-line);
  font-size: var(--font-size-sm);
}

.spec-table__term {
  color: var(--color-muted);
}

.spec-table__value {
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-align: right;
}

.spec-note {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .product-detail,
  .product-detail--reverse,
  .application-block,
  .application-block--reverse {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .product-detail__media,
  .application-block__media {
    flex-basis: auto;
    width: var(--full);
    max-width: var(--measure-narrow);
  }
}

@media (max-width: 767px) {
  .product-detail,
  .application-block {
    padding-block: var(--space-2xl);
    gap: var(--space-lg);
  }

  .product-detail__cols > *,
  .application-block__cols > * {
    flex-basis: var(--full);
  }

  .product-detail__actions,
  .application-block__actions {
    flex-direction: column;
  }

  .product-detail__actions .button,
  .application-block__actions .button {
    width: var(--full);
  }
}

/* ==========================================================================
   Contact page & form (visual mockup)
   ========================================================================== */
.contact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.contact__guide {
  display: flex;
  flex-direction: column;
  flex: 0 1 var(--basis-contact-guide);
  gap: var(--space-lg);
}

.contact__guide .eyebrow {
  margin-bottom: var(--space-none);
}

.contact__guide .split__text {
  margin-top: var(--space-none);
}

.contact__form {
  flex: 0 1 var(--basis-contact-form);
}

.contact-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.contact-card__title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.contact-list__icon {
  color: var(--color-accent);
}

.contact-list--light .contact-list__icon {
  color: var(--color-accent-on-light);
}

.form-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-line);
}

.form-header__title {
  font-size: var(--font-size-xl);
}

.form-header__note {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form__row {
  display: flex;
  gap: var(--space-md);
}

.field {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--basis-2);
  gap: var(--space-xs);
  min-width: var(--space-none);
}

.field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.field__input {
  width: var(--full);
  min-height: var(--input-height);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  transition: border-color var(--transition);
}

.field__input:hover {
  border-color: var(--color-steel);
}

.field__input:focus {
  border-color: var(--color-navy-700);
}

.field__textarea {
  min-height: var(--textarea-height);
  resize: vertical;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-xs);
}

.form__hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .contact {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__guide,
  .contact__form {
    flex: 1 1 auto;
  }

  /* Form first on tablet/mobile so the main action is reachable quickly */
  .contact__form {
    order: -1;
  }
}

@media (max-width: 767px) {
  .form__row {
    flex-direction: column;
  }

  .form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .form__submit {
    width: var(--full);
  }

  .form__hint {
    text-align: center;
  }
}

/* ==========================================================================
   Footer component
   ========================================================================== */
.site-footer {
  background: var(--color-navy-950);
  color: var(--color-steel);
  padding-top: var(--space-3xl);
  font-size: var(--font-size-sm);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xl) var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 var(--basis-footer-brand);
  gap: var(--space-lg);
}

.site-footer__text {
  color: var(--color-steel);
}

.footer-col {
  display: flex;
  flex-direction: column;
  flex: 0 1 var(--basis-footer-col);
  gap: var(--space-md);
}

.footer-col--contact {
  flex-basis: var(--basis-footer-contact);
}

.footer-col__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-col__link {
  color: var(--color-steel);
  text-decoration: none;
}

.footer-col__link:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-lg);
  border-top: var(--border-width) solid var(--color-line-dark);
  font-size: var(--font-size-xs);
}

@media (max-width: 1023px) {
  .site-footer__brand,
  .footer-col--contact {
    flex-basis: var(--basis-2);
  }

  .footer-col {
    flex-grow: 1;
  }
}

/* Mobile footer: brand first, link groups in two columns, larger tap targets */
@media (max-width: 767px) {
  .site-footer {
    padding-top: var(--space-2xl);
  }

  .site-footer__top {
    gap: var(--space-xl) var(--space-md);
  }

  .site-footer__brand,
  .footer-col--contact {
    flex-basis: var(--full);
  }

  .footer-col {
    flex: 0 1 var(--basis-2);
  }

  .footer-col__list {
    gap: var(--space-none);
  }

  .footer-col__link {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
  }

  .site-footer__bottom {
    flex-direction: column;
  }
}

/* ==========================================================================
   Generic content (privacy policy, 404)
   ========================================================================== */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-lg);
  font-size: var(--font-size-xl);
}

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

  .button,
  .card-product,
  .card-application,
  .site-nav__link,
  .field__input {
    transition: none;
  }
}