:root {
  color-scheme: light;
  --ink: #0b1320;
  --accent: #31d7a4;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--ink);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.teaser {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.visual {
  position: relative;
  overflow: hidden;
  padding: 42px 54px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 78% 52%, rgba(49, 215, 164, .15), transparent 22%),
    linear-gradient(145deg, #0b1320, #0c1725 56%, #102335);
  color: #fff;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 82%);
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.visual::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(49,215,164,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(49,215,164,.024), 0 0 0 160px rgba(49,215,164,.02);
  pointer-events: none;
}

.brand, .visual-content { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 22px; font-weight: 760; letter-spacing: -.04em; }
.brand-tag { margin-top: 5px; color: #8f9bad; font-size: 8px; font-weight: 750; letter-spacing: .16em; }

.visual-content { margin: auto 0; padding: 80px 0; max-width: 720px; }
h1 { margin: 0; font-size: clamp(3rem, 6.2vw, 6.25rem); line-height: .96; letter-spacing: -.065em; font-weight: 690; }
.visual-lead { max-width: 590px; margin: 32px 0 0; color: #9aa6b7; font-size: 17px; line-height: 1.65; }


@media (max-width: 950px) {
  .teaser { grid-template-columns: 1fr; }
  .visual { padding: 32px 28px; }
  .visual-content { padding: 64px 0 24px; }
  h1 { font-size: clamp(2.8rem, 8vw, 4.5rem); }
}

@media (max-width: 380px) {
  .visual { padding: 28px 22px; }
}