/* Visual direction and component rules: see /DESIGN-STANDARD.md. */

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

:root {
  --tm-color-primary: #45D4C5;
  --tm-color-primary-hover: #57D9CD;
  --tm-color-primary-soft: rgba(69, 212, 197, 0.14);
  --tm-color-secondary: #F72568;
  --tm-color-secondary-hover: #F83D78;
  --tm-color-secondary-soft: rgba(247, 37, 104, 0.14);
  --tm-color-bg: #050b12;
  --tm-color-bg-soft: #0b1622;
  --tm-color-surface: #101b28;
  --tm-color-surface-soft: #0b1622;
  --tm-color-surface-raised: #172433;
  --tm-color-text: #ffffff;
  --tm-color-text-muted: #aab5c2;
  --tm-color-text-on-primary: #000000;
  --tm-color-text-on-secondary: #000000;
  --tm-color-text-on-primary-button: #000000;
  --tm-color-text-on-secondary-button: #000000;
  --tm-color-text-on-primary-button-hover: #000000;
  --tm-color-text-on-secondary-button-hover: #000000;
  --tm-color-border: rgba(255, 255, 255, 0.12);
  --tm-color-border-strong: rgba(255, 255, 255, 0.22);
  --tm-color-focus: rgba(69, 212, 197, 0.92);
  --tm-color-success: #48d590;
  --tm-color-warning: #facc15;
  --tm-color-danger: #f87171;
  --tm-color-info: #45D4C5;
  --tm-color-info-soft: rgba(69, 212, 197, 0.22);
  --tm-color-info-border: #b8dbea;
  --tm-color-disabled: #536170;
  --tm-theme-primary-background: var(--tm-color-primary);
  --tm-theme-secondary-background: var(--tm-color-secondary);
  --tm-theme-primary: var(--tm-color-primary);
  --tm-theme-secondary: var(--tm-color-secondary);
  --tm-theme-primary-button-hover: var(--tm-color-primary-hover);
  --tm-theme-secondary-button-hover: var(--tm-color-secondary-hover);
  --tm-theme-highlight: var(--tm-color-primary);
  /* Compatibility aliases keep older consumers on the approved semantic brand system. */
  --tm-color-accent: var(--tm-color-primary);
  --tm-color-highlight: var(--tm-theme-highlight);
  --tm-gradient-brand: var(--tm-gradient-accent);
  --tm-gradient-accent: linear-gradient(135deg, var(--tm-color-primary), var(--tm-color-secondary));
  --tm-gradient-primary-action: linear-gradient(135deg, var(--tm-color-primary), var(--tm-color-secondary));
  --tm-gradient-secondary-action: linear-gradient(135deg, var(--tm-color-secondary), var(--tm-color-primary));
  --tm-button-primary-background: var(--tm-gradient-primary-action);
  --tm-button-secondary-background: var(--tm-gradient-secondary-action);
  --tm-color-brand-depth: color-mix(in srgb, var(--tm-color-primary) 12%, var(--tm-color-bg));
  --tm-theme-primary-button: var(--tm-theme-primary);
  --tm-theme-secondary-button: var(--tm-theme-secondary);
  --tm-color-page: var(--tm-color-bg);
  --tm-color-surface-light: var(--tm-color-surface-raised);
  --tm-color-media: #18232e;
  --tm-color-link: var(--tm-color-primary);
  --tm-color-price: var(--tm-color-primary);
  --tm-color-supporting-accent: #45D4C5;
  --tm-color-muted: #aab5c2;
  --tm-color-text-muted: var(--tm-color-muted);
  --tm-shadow-card: 0 18px 45px rgba(0, 0, 0, 0.24);
  --tm-shadow-soft: var(--tm-shadow-card);
  --tm-shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.2);
  --tm-radius-xs: 6px;
  --tm-radius-sm: 8px;
  --tm-radius-md: 14px;
  --tm-radius-lg: 22px;
  --tm-container-width: 1440px;
  --tm-width-content: var(--tm-container-width);
  --tm-width-narrow: 900px;
  --tm-page-gutter: clamp(20px, 4vw, 64px);
  --tm-space-2xs: 4px;
  --tm-space-xs: 8px;
  --tm-space-sm: 12px;
  --tm-space-md: 20px;
  --tm-space-lg: 32px;
  --tm-space-xl: 48px;
  --tm-space-2xl: 72px;
  --tm-space-3xl: 104px;
  --tm-spacing-xs: var(--tm-space-xs);
  --tm-spacing-sm: 16px;
  --tm-spacing-md: 24px;
  --tm-spacing-lg: 40px;
  --tm-spacing-xl: var(--tm-space-2xl);
  --tm-visible-sticky-header-height: 124px;
  --tm-sticky-panel-gap: 24px;
  --tm-sticky-panel-top: var(--tm-sticky-panel-gap);
  --tm-section-spacing: clamp(56px, 7vw, 96px);
  --tm-space-section: var(--tm-section-spacing);
  --tm-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tm-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.has-sticky-header-visible {
  --tm-sticky-panel-top: calc(var(--tm-visible-sticky-header-height, 124px) + var(--tm-sticky-panel-gap, 24px));
}

body.has-sticky-header-hidden {
  --tm-sticky-panel-top: var(--tm-sticky-panel-gap, 24px);
}

html,
body {
  height: 100%;
}

html {
  background: #000;
}

body {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tm-color-text);
}

.tm-site {
  min-width: 320px;
  overflow-x: clip;
  color: var(--tm-color-text);
}

.tm-site :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--tm-color-focus, #45D4C5);
  outline-offset: 3px;
}

.tm-site :where(input, select, textarea) {
  color-scheme: dark;
}

.tm-container,
.tm-module__inner {
  width: min(calc(100% - (var(--tm-page-gutter) * 2)), var(--tm-container-width));
  margin-inline: auto;
}

.tm-container--narrow {
  max-width: var(--tm-width-narrow);
}

.tm-container--wide {
  --tm-container-width: 1600px;
}

.tm-container--full {
  width: 100%;
  max-width: none;
}

.tm-section,
.tm-module {
  position: relative;
  color: var(--tm-color-text);
}

.tm-section--compact {
  --tm-section-spacing: var(--tm-space-xl);
}

.tm-section--spacious {
  --tm-section-spacing: var(--tm-space-3xl);
}

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

.tm-section--dark {
  background: #02070d;
}

.tm-section--gradient {
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--tm-color-primary) 14%, transparent), transparent 30rem),
    linear-gradient(135deg, var(--tm-color-bg-soft), var(--tm-color-bg) 55%, color-mix(in srgb, var(--tm-color-primary) 9%, var(--tm-color-bg)));
}

.tm-grid {
  display: grid;
  gap: var(--tm-space-lg);
}

.tm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

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

.tm-display,
.tm-heading-xl,
.tm-heading-lg,
.tm-heading-md,
.tm-heading-sm {
  font-family: var(--tm-font-heading);
  color: var(--tm-color-text);
}

.tm-display { font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 800; line-height: 1.02; }
.tm-heading-xl { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 750; line-height: 1.08; }
.tm-heading-lg { font-size: clamp(1.65rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.12; }
.tm-heading-md { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; }
.tm-heading-sm { font-size: 1rem; font-weight: 700; }
.tm-body-lg { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; }
.tm-body { font-size: 1rem; line-height: 1.65; }
.tm-body-sm,
.tm-meta { font-size: 0.875rem; line-height: 1.55; color: var(--tm-color-muted); }
.tm-eyebrow { color: var(--tm-color-highlight, var(--tm-color-primary)); font: 700 0.75rem/1.2 var(--tm-font-heading); letter-spacing: 0.14em; text-transform: uppercase; }
.tm-price { font-family: var(--tm-font-heading); font-weight: 700; }

.tm-card {
  overflow: hidden;
  border: 1px solid var(--tm-color-border);
  border-radius: var(--tm-radius-md);
  background: var(--tm-color-surface-raised);
  box-shadow: var(--tm-shadow-subtle);
}

.tm-card--interactive {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.tm-card--interactive:hover {
  border-color: color-mix(in srgb, var(--tm-color-primary) 50%, transparent);
  box-shadow: var(--tm-shadow-card);
  transform: translateY(-2px);
}

.tm-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-xs);
  padding: var(--tm-space-sm) var(--tm-space-md);
  border: 1px solid transparent;
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
}

.tm-button--primary { background: var(--tm-button-primary-background, var(--tm-gradient-primary-action, var(--tm-theme-primary-button, var(--tm-color-primary)))); color: var(--tm-color-text-on-primary-button, #000000); }
.tm-button--primary:hover { background: var(--tm-button-primary-background, var(--tm-gradient-primary-action, var(--tm-theme-primary-button-hover, var(--tm-color-primary-hover)))); color: var(--tm-color-text-on-secondary-button-hover, var(--tm-color-text-on-secondary-button, #000000)); filter: brightness(0.92); transform: translateY(-1px); }
.tm-button--secondary { background: var(--tm-button-secondary-background, var(--tm-gradient-secondary-action, var(--tm-theme-secondary-button, var(--tm-color-secondary)))); border-color: var(--tm-button-secondary-start, var(--tm-color-secondary)); color: var(--tm-color-text-on-secondary-button, #000000); }
.tm-button--secondary:hover { background: var(--tm-button-secondary-background, var(--tm-gradient-secondary-action, var(--tm-theme-secondary-button-hover, var(--tm-color-secondary-hover)))); border-color: var(--tm-button-secondary-start, var(--tm-color-secondary)); color: var(--tm-color-text-on-secondary-button-hover, var(--tm-color-text-on-secondary-button, #000000)); filter: brightness(0.92); }
.tm-button--outline { background: transparent; border-color: var(--tm-button-outline-border, var(--tm-color-border-strong)); color: var(--tm-button-outline-color, var(--tm-color-link)); }
.tm-button--outline:hover { background: var(--tm-color-primary-soft); border-color: var(--tm-button-outline-color, var(--tm-color-primary)); color: var(--tm-button-outline-color, var(--tm-color-primary)); }
.tm-button--ghost,
.tm-button--text { background: transparent; color: var(--tm-button-ghost-color, var(--tm-color-link)); }
.tm-button--ghost:hover,
.tm-button--text:hover { background: var(--tm-color-primary-soft); }
.tm-button--danger { background: var(--tm-color-danger); color: var(--tm-color-text-on-danger, #000000); }
.tm-button--primary:active { background: var(--tm-button-primary-background, var(--tm-gradient-primary-action, var(--tm-theme-primary-button, var(--tm-color-primary)))); filter: brightness(0.84); transform: translateY(0); }
.tm-button--secondary:active { background: var(--tm-button-secondary-background, var(--tm-gradient-secondary-action, var(--tm-theme-secondary-button, var(--tm-color-secondary)))); filter: brightness(0.84); transform: translateY(0); }
.tm-button--outline:active,
.tm-button--ghost:active { background: color-mix(in srgb, var(--tm-color-primary) 18%, transparent); }
.tm-button:disabled,
.tm-button[aria-disabled="true"] { background: var(--tm-color-disabled); border-color: var(--tm-color-disabled); color: var(--tm-color-text); cursor: not-allowed; opacity: 0.72; transform: none; }
.tm-button--small { min-height: 44px; padding: var(--tm-space-xs) var(--tm-space-sm); font-size: 0.8125rem; }
.tm-button--large { min-height: 52px; padding: var(--tm-space-sm) var(--tm-space-lg); }
.tm-button--full { width: 100%; }

.tm-form__control,
.tm-input,
.tm-select,
.tm-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--tm-space-sm) var(--tm-space-md);
  border: 1px solid var(--tm-color-border);
  border-radius: var(--tm-radius-sm);
  background: rgba(3, 9, 17, 0.72);
  color: var(--tm-color-text);
}

.tm-site :where(input, textarea)::placeholder {
  color: rgba(170, 181, 194, 0.62);
}

.tm-form__label {
  display: block;
  margin-bottom: var(--tm-space-xs);
  color: var(--tm-color-text);
  font-weight: 650;
}

.tm-form__error,
.has-error .tm-form__control {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.58);
}

@media (max-width: 900px) {
  .tm-grid--3,
  .tm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tm-grid--2,
  .tm-grid--3,
  .tm-grid--4 { grid-template-columns: 1fr; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tm-font-heading);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--tm-color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: var(--tm-color-link, var(--tm-theme-primary));
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a:hover {
  color: var(--tm-theme-secondary);
}

img,
svg {
  max-width: 100%;
}

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

::selection {
  background: color-mix(in srgb, var(--tm-theme-highlight) 45%, transparent);
  color: var(--tm-color-text);
}

.will-animate-in {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.will-animate-in.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .will-animate-in {
    opacity: 1;
    transform: none;
  }
}