/* OpenDesign: triscord-landing-minimalista-2e04 / telas/site-minimalista.html. */
@import url("./assets/design/tokens.css");

@layer od-layout {
  .od-stack { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  :where(.od-stack, .od-cluster) > * { min-width: 0; }
}

:root {
  color-scheme: dark;
  --ink-950: var(--color-ink-950);
  --ink-900: var(--color-ink-900);
  --ink-800: var(--color-ink-800);
  --ink-700: var(--color-ink-700);
  --ink-500: var(--color-ink-500);
  --ink-200: var(--color-ink-200);
  --brand-400: var(--color-brand-400);
  --brand-300: var(--color-brand-300);
  --brand-500: var(--color-brand-500);
  --radius: var(--radius-lg);
  --landing-space-1: 8px;
  --landing-space-2: 16px;
  --landing-space-3: 24px;
  --landing-space-4: 32px;
  --landing-space-5: 40px;
  --landing-space-6: 48px;
  --landing-space-8: 64px;
  --landing-space-10: 80px;
  --landing-space-12: 96px;
  --page-width: 1152px;
  --type-body: 18px;
  --type-display: clamp(40px, 4vw, 56px);
  --ease-out: var(--ease-out-expo);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink-950); }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink-950);
  color: var(--ink-200);
  font: 400 var(--type-body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 6px;
  border-radius: var(--radius);
}
.container {
  width: min(var(--page-width), calc(100% - var(--landing-space-12)));
  margin-inline: auto;
}
.header { padding-block: var(--landing-space-3); }
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--landing-space-1);
  min-height: var(--landing-space-6);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.brand-image {
  display: block;
  width: var(--landing-space-4);
  height: auto;
  flex: none;
  aspect-ratio: 128 / 128;
  object-fit: contain;
}
main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding-block: var(--landing-space-8) var(--landing-space-12);
}
.hero {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--landing-space-3);
}
.hero-content { grid-column: 1 / -1; --od-gap: 0px; }
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
h1 span { display: block; }
.intro {
  max-width: 440px;
  margin: var(--landing-space-3) 0 0;
  color: var(--ink-500);
  text-wrap: pretty;
}
.actions { --od-gap: var(--landing-space-2); margin-top: var(--landing-space-5); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--landing-space-2) var(--landing-space-3);
  border: 1px solid var(--brand-400);
  border-radius: var(--radius);
  background: var(--brand-400);
  color: var(--ink-950);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.button-secondary {
  border-color: var(--ink-700);
  background: var(--ink-950);
  color: var(--ink-200);
}
.button:active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: var(--ink-950);
  transform: scale(0.98);
  transition-duration: var(--dur-instant);
}
.button-secondary:active {
  background: var(--ink-800);
  border-color: var(--ink-500);
  color: var(--ink-200);
}
@media (hover: hover) {
  .button:hover {
    background: var(--brand-300);
    border-color: var(--brand-300);
    color: var(--ink-950);
  }
  .button-secondary:hover {
    background: var(--ink-900);
    border-color: var(--ink-500);
    color: var(--ink-200);
  }
  .brand:hover { color: var(--brand-300); }
}
@media (min-width: 1440px) {
  main { min-height: 480px; }
}
@media (max-width: 1023px) {
  .hero-content { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .container { width: calc(100% - var(--landing-space-6)); }
  .header { padding-block: var(--landing-space-2); }
  .brand { font-size: 20px; }
  main { padding-block: var(--landing-space-6) var(--landing-space-8); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  h1 { font-size: clamp(32px, 9.2vw, 40px); line-height: 1.2; letter-spacing: -0.035em; }
  .intro { margin-top: var(--landing-space-3); max-width: 32ch; font-size: 16px; }
  .actions { flex-direction: column; align-items: stretch; margin-top: var(--landing-space-4); }
  .button { width: 100%; min-height: 56px; }
}
@media (max-width: 374px) {
  .container { width: calc(100% - var(--landing-space-4)); }
  h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .button:active { transform: none; }
}