/*
  Component stylesheet for reusable interface pieces.
  Use this file for buttons, cards, navigation, forms, and shared UI components.
  Do not store customer data, CRM data, emails, secrets, or private company records here.
*/

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.brand span {
  display: inline-block;
  background:
    linear-gradient(108deg, transparent 0%, transparent 44%, rgba(255, 255, 255, 0.72) 49%, rgba(255, 255, 255, 0.18) 53%, transparent 59%, transparent 100%),
    linear-gradient(180deg, #050505 0%, #000000 46%, #0a0a0a 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: #000000;
  -webkit-text-fill-color: transparent;
  font-family: "Russo One", "Arial Black", Impact, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.22rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
  text-shadow: 0 0 0 #000000, 0 7px 12px rgba(0, 0, 0, 0.16);
  text-transform: uppercase;
  transform: scaleX(1.08);
  transform-origin: left center;
  white-space: nowrap;
  -webkit-text-stroke: 0.28px #000000;
  animation: brand-shine-pass 5.4s ease-in-out infinite;
}

@keyframes brand-shine-pass {
  0%,
  58% {
    background-position: 130% 0, 0 0;
  }

  76%,
  100% {
    background-position: -120% 0, 0 0;
  }
}

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

.nav {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.nav a {
  position: relative;
  display: inline-flex;
  padding: 6px 0;
  text-decoration: none;
  transition: color 180ms ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-shine);
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav a:hover::after,
.nav a:focus-visible::after {
  width: 100%;
}

.language-picker {
  display: inline-flex;
  grid-column: 3;
  align-items: center;
  justify-self: end;
}

.language-select {
  width: 54px;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 8px 18px rgba(48, 35, 20, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.language-select:hover,
.language-select:focus-visible {
  border-color: rgba(216, 114, 36, 0.42);
  background: rgba(255, 247, 237, 0.94);
  outline: none;
  box-shadow: 0 12px 26px rgba(48, 35, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.button {
  --button-bg: transparent;
  --button-color: currentColor;
  --button-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--button-border);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-color);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.15;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.button.solid {
  --button-bg: var(--orange-shine);
  --button-color: var(--white);
  --button-border: rgba(168, 77, 22, 0.24);
  box-shadow: var(--shadow-button), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.button.ghost,
.button.glass,
.button.outline {
  --button-color: var(--ink);
  --button-border: var(--line);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.99);
}

.button.solid:hover {
  box-shadow: 0 18px 36px rgba(216, 114, 36, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.button.ghost:hover,
.button.glass:hover,
.button.outline:hover {
  --button-border: rgba(216, 114, 36, 0.42);
  background: rgba(255, 247, 237, 0.94);
  box-shadow: 0 12px 26px rgba(48, 35, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.eyebrow,
.section-kicker {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  text-align: left;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.value-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.value-badges span,
.demo-label {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(216, 114, 36, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 237, 0.72), rgba(238, 138, 56, 0.18)),
    var(--soft);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(216, 114, 36, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, border-color 180ms ease;
}

.value-badges span::after {
  content: "";
  position: absolute;
  inset: -70% auto -70% -45%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  transform: rotate(18deg);
  animation: badge-shine 3.4s ease-in-out infinite;
}

.value-badges span:nth-child(2)::after {
  animation-delay: 0.45s;
}

.value-badges span:nth-child(3)::after {
  animation-delay: 0.9s;
}

.value-badges span:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 114, 36, 0.62);
  box-shadow: 0 18px 42px rgba(216, 114, 36, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.value-badges span::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px rgba(216, 114, 36, 0.86);
}

.value-badges span {
  z-index: 0;
}

.value-badges span > * {
  position: relative;
  z-index: 1;
}

@keyframes badge-shine {
  0%,
  36% {
    transform: translateX(0) rotate(18deg);
    opacity: 0;
  }

  52% {
    opacity: 1;
  }

  82%,
  100% {
    transform: translateX(340%) rotate(18deg);
    opacity: 0;
  }
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  line-height: 1.45;
}

.check-list li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--orange);
  clip-path: polygon(42% 72%, 18% 48%, 28% 38%, 42% 52%, 72% 20%, 82% 30%);
}

.price-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
  width: min(100%, 760px);
  margin-top: 28px;
}

.price-strip > div {
  min-height: 82px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--shine);
  box-shadow: 0 18px 44px rgba(48, 35, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.price-strip span,
.technical-highlight span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.price-strip strong,
.technical-highlight strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.price-strip p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.note-strip {
  margin: 16px 0 0;
  padding: 18px 20px;
  border: 1px solid rgba(216, 114, 36, 0.3);
  border-radius: 8px;
  background: rgba(255, 247, 237, 0.92);
  color: var(--ink);
  font-weight: 900;
}

details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 0 0 rgba(48, 35, 20, 0);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

details[open] {
  border-color: rgba(216, 114, 36, 0.34);
  box-shadow: var(--shadow-card);
}

summary {
  position: relative;
  min-height: 72px;
  padding: 24px 28px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

summary::after {
  content: "+";
  position: absolute;
  right: 28px;
  top: 50%;
  color: var(--orange-dark);
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 180ms ease;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

details p {
  margin: 0;
  padding: 0 28px 28px;
  color: var(--muted);
  line-height: 1.6;
}