.hero {
  position: relative;
  padding: clamp(2rem, 6vw, 4rem);
  border: 0;
  border-bottom: 2px solid rgba(15, 23, 42, 0.14);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

.hero-slides {
  position: relative;
  height: clamp(21rem, 31vw, 37rem);
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Below the split-layout stacking breakpoint, let each slide size itself
   naturally instead of forcing a fixed height — squeezing stacked content
   (text column + full API panel) into one fixed box gets cramped. */
@media (max-width: 900px) {
  .hero-slides {
    height: auto;
    overflow: visible;
  }

  .hero-slide.active {
    position: relative;
  }
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.hero-title + .hero-title {
  margin-top: -1.25rem;
}

.hero-title .accent {
  color: var(--primary);
}

/* Slide 0's staggered diagonal composition needs generous width to breathe —
   below 1024px it falls back to the plain stacked title (safe at any size)
   so it never wraps or overlaps when the window is resized. */
@media (min-width: 1024px) {
  .hero-slide[data-index='0'] {
    align-items: flex-start;
    padding-right: clamp(1rem, 9vw, 9rem);
  }

  .hero-slide[data-index='0'] .hero-title {
    font-size: clamp(3.36rem, 6vw, 6rem);
    line-height: 0.96;
    letter-spacing: 0.05em;
    margin: 0;
    width: fit-content;
    max-width: 100%;
    text-shadow: 0 10px 30px rgba(79, 70, 229, 0.08);
    transform: translateX(3ch);
  }

  .hero-slide[data-index='0'] .hero-title + .hero-title {
    margin-top: 1em;
    margin-left: clamp(3rem, 12vw, 10.5rem);
    transform: translateX(5.6ch);
  }

  .hero-slide[data-index='0'] .hero-subtitle {
    margin: clamp(2.5rem, 5vw, 3.75rem) 0 1.5rem;
    transform: translateX(15ch);
  }

  .hero-think-net {
    position: absolute;
    right: clamp(0rem, 1vw, 1rem);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(16rem, 24vw, 32rem);
    height: clamp(16rem, 24vw, 32rem);
    pointer-events: none;
  }

  .hero-think-net svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .think-line {
    stroke: #a78bfa;
    stroke-width: 1;
    stroke-dasharray: 5 7;
    opacity: 0;
    animation: thinkLineFade 2s ease-in-out infinite,
      thinkLineFlow 1.4s linear infinite;
    animation-delay: var(--d, 0s), 0s;
  }

  .think-dot {
    position: absolute;
    width: var(--size, 0.625rem);
    height: var(--size, 0.625rem);
    border-radius: 50%;
    background: radial-gradient(circle, #c4b5fd, #7c3aed);
    box-shadow: 0 0 12px 2px rgba(124, 58, 237, 0.6);
    animation: thinkDotFloat 2.4s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
  }

  @keyframes thinkDotFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    25% { transform: translate(0.3rem, -0.6rem) scale(1.2); opacity: 0.9; }
    50% { transform: translate(-0.25rem, -0.9rem) scale(1); opacity: 1; }
    75% { transform: translate(-0.4rem, -0.3rem) scale(1.15); opacity: 0.85; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  }

  @keyframes thinkLineFade {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.55; }
  }

  @keyframes thinkLineFlow {
    to { stroke-dashoffset: -24; }
  }

  @media (prefers-reduced-motion: reduce) {
    .think-dot,
    .think-line {
      animation: none;
      opacity: 0.4;
    }
  }
}

@media (max-width: 1023px) {
  .hero-think-net {
    display: none;
  }
}

/* The staggered diagonal composition above is hand-tuned for the 8-glyph
   Chinese slogan — a 6rem font size and ch-based translateX offsets sized
   for single-character-wide glyphs. English (or any non-Chinese) copy is
   several words long and overflowed off the top of the slide under those
   same offsets. Higher specificity than the 1024px rules above, so it
   only takes over when the active language isn't Chinese, falling back to
   the same modest heading treatment slides 1-3 already use. */
html:not([lang^='zh']) .hero-slide[data-index='0'] .hero-title {
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  transform: none;
  text-shadow: none;
}

html:not([lang^='zh']) .hero-slide[data-index='0'] .hero-title + .hero-title {
  margin-top: 0.25em;
  margin-left: 0;
  transform: none;
}

html:not([lang^='zh']) .hero-slide[data-index='0'] .hero-subtitle {
  margin: 1.5rem 0;
  transform: none;
}

.hero-slide[data-index='0'] .hero-title .accent {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 40%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-slide[data-index='0'] .hero-title .char-1 {
  font-size: 1.18em;
}

.hero-slide[data-index='0'] .hero-title .char-2 {
  font-size: 1.12em;
}

.hero-slide[data-index='0'] .hero-title .char-3 {
  font-size: 1.18em;
}

.hero-slide[data-index='0'] .hero-title .char-4 {
  font-size: 1.12em;
}

.hero-word-gap {
  display: inline-block;
  width: 1ch;
}

.hero-subtitle {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  color: var(--muted-foreground);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.15em;
  animation: typewriterBlink 0.85s steps(1) infinite;
}

@keyframes typewriterBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor {
    animation: none;
  }
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1e1b4b, #7c3aed);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(124, 58, 237, 0.6);
}

.hero-cta svg {
  width: 1rem;
  height: 1rem;
}

.hero-cta-outline {
  background: transparent;
  color: var(--foreground);
  border: 1.5px solid var(--border);
  box-shadow: none;
}

.hero-cta-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: none;
}

/* Slide 1 — split layout: headline + live API console panel */

.hero-slide[data-index='1'] {
  align-items: stretch;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
}

.hero-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.375rem, 0.6vw, 0.5rem) clamp(0.875rem, 1.2vw, 1.125rem);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
  font-weight: 600;
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}

.badge-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--primary);
}

.hero-split-title {
  font-size: clamp(1.5rem, 2.6vw, 2.75rem);
  line-height: 1.25;
  margin-bottom: clamp(0.75rem, 1.2vw, 1.25rem);
}

.hero-split-title .hero-line {
  display: block;
}

.hero-split-title .hero-line:first-child {
  font-size: clamp(2rem, 3.1vw, 3.25rem);
  line-height: 1.8;
}

.hero-split-title .hero-line:last-child {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: 1.35;
}

.hero-slide[data-index='1'] .hero-subtitle,
.hero-slide[data-index='2'] .hero-subtitle {
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  line-height: 1.6;
  max-width: 30rem;
  margin-bottom: clamp(1.25rem, 1.8vw, 1.75rem);
}

/* A modest desktop-only emphasis once the two-column split layout is active.
   Earlier this used large ch-based translateX offsets (4ch/14ch) plus a
   5.2rem headline and a 1.2x-scaled panel — at nearly every common desktop
   width (tested 901-1700px) those shifts pushed the left column's text out
   past its own grid track and under the opaque right-column panel, hiding
   words entirely. Kept the bigger headline as a modest bump; dropped the
   horizontal offsets and panel scaling so the two columns can no longer
   collide regardless of viewport width. */
@media (min-width: 901px) {
  .hero-slide[data-index='1'] .hero-split-left,
  .hero-slide[data-index='2'] .hero-split-left {
    transform: translate(1.5rem, -0.4rem);
  }

  .hero-slide[data-index='1'] .hero-split-title .hero-line:first-child,
  .hero-slide[data-index='2'] .hero-split-title .hero-line:first-child {
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.5;
  }

  .hero-slide[data-index='1'] .hero-split-title .hero-line:first-child .accent-gradient,
  .hero-slide[data-index='2'] .hero-split-title .hero-line:first-child .accent-gradient {
    margin-left: 1ch;
  }
}

.accent-gradient {
  background: linear-gradient(135deg, #7c3aed, #4f46e5, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1vw, 1rem);
}

.hero-split-actions .hero-cta {
  padding: clamp(0.75rem, 1.1vw, 1.0625rem) clamp(1.125rem, 2.2vw, 2.125rem);
  font-size: clamp(0.875rem, 1vw, 1.0625rem);
}

.hero-split-right {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

.api-panel {
  width: 100%;
  max-width: clamp(24rem, 22vw, 36rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.25);
}

.api-panel-tabs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1rem, 1.2vw, 1.375rem);
  padding: clamp(0.625rem, 0.8vw, 0.875rem) clamp(1rem, 1.3vw, 1.375rem);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  overflow-x: auto;
}

.api-tab {
  color: #64748b;
  font-weight: 500;
}

.api-tab.active {
  color: #16a34a;
  font-weight: 700;
}

.api-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #64748b;
  white-space: nowrap;
}

.status-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #22c55e;
}

.api-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(0.625rem, 0.8vw, 0.9375rem) clamp(1rem, 1.3vw, 1.375rem) 0.25rem;
}

.api-endpoint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  color: #0f172a;
  margin-bottom: clamp(0.625rem, 0.8vw, 0.9375rem);
}

.api-method {
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
  font-weight: 700;
}

.api-section-label {
  font-size: clamp(0.625rem, 0.65vw, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}

.api-code {
  margin: 0 0 0.5rem;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.6875rem, 0.8vw, 0.8125rem);
  line-height: 1.3;
  color: #334155;
  white-space: pre;
  overflow-x: auto;
}

.tok-key {
  color: #2563eb;
}

.tok-str {
  color: #b45309;
}

.tok-num {
  color: #7c3aed;
}

.api-panel-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.625rem, 0.8vw, 0.875rem) clamp(1rem, 1.3vw, 1.375rem);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Slide 2 — real-time monitoring dashboard */

.hero-slide[data-index='2'] {
  align-items: stretch;
}

.hero-dashboard {
  width: 100%;
  max-width: clamp(24rem, 24vw, 38rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.875rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.35);
  background: #0d0d12;
  color: #e4e4e7;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0.875rem 1.25rem;
  background: #17171f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.dash-title .status-dot {
  box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.6);
  animation: dashPulse 1.8s ease-in-out infinite;
}

@keyframes dashPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dash-live {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4ade80;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}

.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1rem 0.875rem;
  background: #0d0d12;
}

.dash-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

.dash-stat-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: #fafafa;
}

.dash-stat-value small {
  font-size: 0.6em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 0.1em;
}

.dash-stat-trend {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
}

.dash-chart {
  flex: 1;
  min-height: 5.5rem;
  padding: 0.75rem 1.25rem 0;
}

.dash-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dash-chart-area {
  fill: url(#dashGradient);
}

.dash-chart-line {
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  .dash-title .status-dot {
    animation: none;
  }
}

/* Slide 3 — three developer commitments */

.hero-slide[data-index='3'] {
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(0.5rem, 1.5vw, 1rem);
}

.hero-commit {
  width: 100%;
}

.hero-commit-head {
  text-align: center;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.hero-commit-head .hero-title {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  margin: 0;
}

.hero-commit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  max-width: 80rem;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .hero-commit-grid {
    grid-template-columns: 1fr;
  }
}

.hero-commit-card {
  position: relative;
  width: 100%;
  max-width: clamp(21rem, 20vw, 26rem);
  transition: transform 0.25s ease;
}

@media (min-width: 901px) {
  .hero-commit-card {
    aspect-ratio: 4 / 4;
  }
}

.commit-shield-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.12))
    drop-shadow(0 22px 38px rgba(15, 23, 42, 0.2));
  transition: filter 0.25s ease;
}

/* Top-to-bottom tint fading into the glass tone, standing in for a light
   source hitting the shield from above — the flat single-tone fill read as
   paper-flat, this reads like a curved/glossy surface catching light.
   Kept nearly opaque on purpose: the shield sits directly over the
   fixed, continuously-animated aurora blobs, and .commit-shield-glass's
   backdrop-filter re-samples them every frame. A low-opacity fill let
   that moving backdrop bleed through, and the per-frame blur/saturate
   recompute over 3 shields at once couldn't stay smooth, so the tint
   visibly stuttered instead of drifting. Opaque fill removes the live
   backdrop as an input, so the shield's own color stays stable. */
.shield-stop-a {
  stop-color: var(--primary);
  stop-opacity: 0.92;
}

.shield-stop-b {
  stop-color: var(--background);
  stop-opacity: 0.97;
}

.commit-shield-bg path {
  stroke: color-mix(in srgb, var(--primary) 55%, white 45%);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.hero-commit-card:hover {
  transform: translateY(-6px);
}

.hero-commit-card:hover .commit-shield-bg {
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.16))
    drop-shadow(0 30px 46px rgba(15, 23, 42, 0.26));
}

/* Real frosted-glass blur, masked to the exact shield silhouette (same path
   as .commit-shield-bg) so the blur only shows inside the shield outline
   instead of bleeding into the transparent corners of its bounding box. */
.commit-shield-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6v6c0 5.2 4 9 9 10 5-1 9-4.8 9-10V6l-9-4Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6v6c0 5.2 4 9 9 10 5-1 9-4.8 9-10V6l-9-4Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.commit-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.625rem) clamp(2rem, 3.25vw, 2.5rem) clamp(2.75rem, 4.5vw, 3.5rem);
}

.commit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.875rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--primary), #a855f7);
  color: #fff;
  flex-shrink: 0;
}

.commit-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.commit-label {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
}

.commit-label small {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted-foreground);
}

.commit-promise {
  display: block;
  margin-bottom: 0.625rem;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: var(--primary);
}

.commit-detail {
  margin: 0;
  max-width: 17rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.commit-detail b {
  font-weight: 700;
  color: var(--foreground);
}

.hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.hero-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
  background: var(--border);
  transition: width 0.3s ease, background 0.3s ease;
}

.hero-dot.active {
  width: 1.75rem;
  background: var(--primary);
}