/*
 * SerasMac V4 — shared shell
 * Applies to every v2 public surface after the legacy refinement layers.
 */

:root {
  --sm-v4-porcelain: #f3efe6;
  --sm-v4-paper: #fffcf6;
  --sm-v4-limestone: #ddd5c8;
  --sm-v4-forest: #102724;
  --sm-v4-forest-soft: #1c3430;
  --sm-v4-mineral: #176e66;
  --sm-v4-mineral-deep: #0f574f;
  --sm-v4-brass: #b48652;
  --sm-v4-oxide: #a34f3e;
  --sm-v4-mist: #dce7e2;
  --sm-v4-ink: #142724;
  --sm-v4-ink-soft: #53635f;
  --sm-v4-line: rgba(16,39,36,.14);
  --sm-v4-line-strong: rgba(16,39,36,.25);
  --sm-v4-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

body {
  background: var(--sm-v4-porcelain);
}

.sm-main {
  overflow: clip;
}

/* Header */
.sm-header {
  position: relative;
  z-index: 240;
}

.sm-header__utility {
  padding: .55rem 0;
  color: rgba(255,252,246,.66);
  background: var(--sm-v4-forest);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sm-header__util-link {
  gap: .55rem;
  color: rgba(255,252,246,.66);
  font-family: var(--sm-v4-mono);
  font-size: .59rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sm-header__util-link:hover,
.sm-header__util-link:focus-visible {
  color: var(--sm-v4-paper);
}

.sm-header__bar {
  padding: .75rem 0;
  border-bottom: 1px solid rgba(16,39,36,.1);
  background: rgba(255,252,246,.94);
  backdrop-filter: blur(18px) saturate(1.1);
}

.sm-header.stuck .sm-header__bar {
  box-shadow: 0 12px 36px rgba(16,39,36,.08);
}

.sm-brand {
  gap: .85rem;
}

.sm-brand__name {
  color: var(--sm-v4-forest);
  font-size: clamp(1.55rem,2vw,1.9rem);
  font-weight: 600;
  letter-spacing: -.055em;
}

.sm-brand__tagline {
  max-width: 17ch;
  padding-left: .9rem;
  color: rgba(16,39,36,.52);
  border-left-color: var(--sm-v4-brass);
  font-family: var(--sm-v4-mono);
  font-size: .54rem;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.sm-nav__list {
  gap: .15rem;
}

.sm-nav__link {
  position: relative;
  min-height: 46px;
  padding: .7rem .8rem;
  color: rgba(16,39,36,.7);
  border-radius: 0;
  background: transparent;
  font-size: .76rem;
  font-weight: 650;
}

.sm-nav__link::after {
  content: "";
  position: absolute;
  right: .8rem;
  bottom: .45rem;
  left: .8rem;
  height: 1px;
  background: var(--sm-v4-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.sm-nav__link:hover,
.sm-nav__link:focus-visible {
  color: var(--sm-v4-forest);
  background: transparent;
}

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

.sm-header__actions .sm-btn {
  min-height: 48px;
  padding-inline: 1.15rem;
  color: var(--sm-v4-paper);
  border: 1px solid var(--sm-v4-forest);
  border-radius: 2px;
  background: var(--sm-v4-forest);
  box-shadow: none;
  font-size: .75rem;
}

.sm-header__actions .sm-btn:hover,
.sm-header__actions .sm-btn:focus-visible {
  color: #fff;
  border-color: var(--sm-v4-mineral);
  background: var(--sm-v4-mineral);
}

.sm-nav-toggle,
.sm-nav-drawer__close {
  border-color: var(--sm-v4-line-strong);
  border-radius: 2px;
  background: var(--sm-v4-paper);
}

.sm-nav-drawer {
  width: min(420px,90vw);
  color: var(--sm-v4-paper);
  background: var(--sm-v4-forest);
  box-shadow: -30px 0 80px rgba(5,20,18,.35);
}

.sm-nav-drawer__head,
.sm-nav-drawer__cta {
  border-color: rgba(255,255,255,.12);
}

.sm-nav-drawer .sm-brand__name {
  color: var(--sm-v4-paper);
}

.sm-nav-drawer__close {
  color: var(--sm-v4-paper);
  border-color: rgba(255,255,255,.22);
  background: transparent;
}

.sm-nav-drawer__list {
  padding-top: 1.4rem;
}

.sm-nav-drawer__link {
  min-height: 60px;
  color: rgba(255,252,246,.72);
  border-color: rgba(255,255,255,.12);
  font-family: var(--sm-font-display);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -.025em;
}

.sm-nav-drawer__link:hover,
.sm-nav-drawer__link:focus-visible {
  color: var(--sm-v4-brass);
}

.sm-nav-drawer__cta .sm-btn {
  color: var(--sm-v4-forest);
  border-radius: 2px;
  background: var(--sm-v4-paper);
}

.sm-nav-overlay {
  background: rgba(5,20,18,.62);
  backdrop-filter: blur(4px);
}

/* Shared utility page heroes */
.sm-page-hero {
  position: relative;
  overflow: hidden;
  color: var(--sm-v4-forest);
  background:
    radial-gradient(circle at 86% 12%, rgba(23,110,102,.13), transparent 28%),
    linear-gradient(137deg,#fffdf8 0%,var(--sm-v4-porcelain) 64%,#e7efeb 100%);
}

.sm-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16,39,36,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,39,36,.035) 1px,transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom,#000,transparent 90%);
}

.sm-page-hero > .sm-container {
  position: relative;
  z-index: 1;
}

.sm-page-hero--utility,
.sm-page-hero--compact {
  padding-block: clamp(4.5rem,8vw,8rem);
}

.sm-breadcrumb {
  color: rgba(16,39,36,.45);
  font-family: var(--sm-v4-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sm-breadcrumb a {
  color: inherit;
}

.sm-breadcrumb a:hover,
.sm-breadcrumb a:focus-visible {
  color: var(--sm-v4-mineral);
}

.sm-eyebrow {
  margin-top: 2rem;
  color: var(--sm-v4-mineral);
  font-size: .67rem;
  letter-spacing: .15em;
}

.sm-page-hero__title {
  max-width: 12ch;
  margin-top: 1rem;
  color: var(--sm-v4-forest);
  font-size: clamp(3.7rem,7.5vw,7.2rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .9;
  text-wrap: balance;
}

.sm-page-hero--compact .sm-page-hero__title {
  max-width: 14ch;
}

.sm-page-hero__subtitle {
  max-width: 760px;
  margin-top: 1.7rem;
  color: var(--sm-v4-ink-soft);
  font-size: clamp(1rem,1.45vw,1.22rem);
  line-height: 1.78;
}

.sm-page-hero__actions {
  margin-top: 2rem;
}

.sm-page-hero__actions .sm-btn {
  border-radius: 2px;
  box-shadow: none;
}

/* Footer */
.sm-footer {
  position: relative;
  padding: clamp(5rem,8vw,8rem) 0 2rem;
  color: rgba(255,252,246,.62);
  background:
    radial-gradient(circle at 85% 10%,rgba(23,110,102,.28),transparent 27%),
    linear-gradient(145deg,#17342f,#0a201d);
}

.sm-footer::before {
  content: "CN → TR / BUYER SIDE CONTROL";
  display: block;
  width: min(100% - clamp(2rem,5vw,5rem),1240px);
  margin: 0 auto clamp(3rem,6vw,5.5rem);
  padding-bottom: 1rem;
  color: rgba(255,255,255,.3);
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--sm-v4-mono);
  font-size: .58rem;
  letter-spacing: .13em;
}

.sm-footer__grid {
  grid-template-columns: minmax(260px,1.5fr) repeat(3,minmax(150px,1fr));
  gap: clamp(2rem,5vw,5rem);
  padding-bottom: clamp(3rem,6vw,5rem);
  border-bottom-color: rgba(255,255,255,.13);
}

.sm-footer .sm-brand__name--light {
  color: var(--sm-v4-paper);
  font-size: clamp(2.6rem,5vw,4.8rem);
  font-weight: 500;
}

.sm-footer__desc {
  max-width: 410px;
  margin-top: 1.4rem;
  color: rgba(255,252,246,.64);
  font-family: var(--sm-font-display);
  font-size: clamp(1.25rem,2vw,1.75rem);
  line-height: 1.25;
}

.sm-footer__operator {
  margin-top: 1.2rem;
  color: rgba(255,252,246,.4);
  font-family: var(--sm-v4-mono);
  font-size: .56rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sm-footer__heading {
  margin-bottom: 1rem;
  color: var(--sm-v4-brass);
  font-family: var(--sm-v4-mono);
  font-size: .56rem;
  letter-spacing: .12em;
}

.sm-footer__links {
  gap: .25rem;
}

.sm-footer__links a {
  min-height: 38px;
  color: rgba(255,252,246,.6);
  font-size: .76rem;
}

.sm-footer__links a:hover,
.sm-footer__links a:focus-visible {
  color: var(--sm-v4-paper);
}

.sm-footer__bottom {
  padding-top: 1.4rem;
}

.sm-footer__copy,
.sm-footer__legal a {
  color: rgba(255,252,246,.35);
  font-family: var(--sm-v4-mono);
  font-size: .54rem;
  letter-spacing: .04em;
}

@media (max-width:1080px) {
  .sm-header__bar {
    padding-block: .65rem;
  }
}

@media (max-width:780px) {
  .sm-page-hero--utility,
  .sm-page-hero--compact {
    padding-block: 3.5rem 4.5rem;
  }

  .sm-page-hero__title {
    font-size: clamp(3.1rem,14vw,5rem);
  }

  .sm-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sm-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width:520px) {
  .sm-brand__name {
    font-size: 1.55rem;
  }

  .sm-page-hero__actions,
  .sm-page-hero__actions .sm-btn {
    width: 100%;
  }

  .sm-footer__grid {
    grid-template-columns: 1fr;
  }

  .sm-footer__brand {
    grid-column: auto;
  }
}