@font-face {
  font-family: Inter;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  color: #f3faf3;
  background: #112620;
  --mint: #beefb1;
  --muted: #b3c9bd;
  --line: #ffffff29;
}

* { box-sizing: border-box; }
body { margin: 0; }
p, h1, figure { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 96px);
}

.top, .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.top { padding-block: 25px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 750; letter-spacing: -.05em; }
.brand-icon, .avatar { display: grid; place-items: center; background: var(--mint); }
.brand-icon { width: 38px; height: 38px; border-radius: 12px; }
.workspace-link { padding: 10px 12px; border-radius: 7px; font-size: 14px; text-underline-offset: 4px; text-decoration-color: #ffffff66; }
.workspace-link span { margin-left: 4px; color: var(--mint); }
.workspace-link:hover { background: #ffffff10; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 6vw, 88px);
  flex: 1;
  padding-block: clamp(56px, 10vh, 124px);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #beefb15c;
  border-radius: 99px;
  color: var(--mint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.status span { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 3px #beefb123; }
h1 { margin-block: 26px 22px; font-size: clamp(46px, 6.25vw, 96px); line-height: .99; font-weight: 650; letter-spacing: -.055em; }
h1 em { color: var(--mint); font-style: normal; }
.description { max-width: 38ch; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; }

.preview {
  padding: clamp(16px, 3.3vw, 48px);
  border: 1px solid #6c9c82;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at top right, #b6dfa8b3, transparent 65%),
    repeating-linear-gradient(135deg, #e0ffe51a 0 1px, transparent 1px 14px),
    #477862;
}

.preview figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
  text-shadow: 0 1px 4px #13251e;
}

.conversation {
  background: #f7fbf6;
  color: #142d23;
  border-radius: 18px;
  box-shadow: 0 18px 40px #08251957;
}

.conversation-header { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid #dce9df; font-size: 13px; }
.avatar { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; }
.conversation-header small { display: block; margin-top: 3px; color: #466356; }
.messages { display: grid; gap: 10px; padding: 18px 15px; }
.message { max-width: 86%; padding: 10px 12px; border-radius: 13px; font-size: 13px; line-height: 1.5; }
.visitor { justify-self: end; background: #deebdf; border-bottom-right-radius: 3px; }
.assistant { justify-self: start; background: #21513d; color: #fff; border-bottom-left-radius: 3px; }
.conversation-footer { display: flex; gap: 6px; align-items: center; padding: 11px 15px; border-top: 1px solid #dce9df; color: #466356; font-size: 11px; font-weight: 650; }
.conversation-footer span { color: #21513d; }

.bottom { padding-block: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .preview { width: 100%; max-width: 520px; }
  h1 { max-width: 11ch; font-size: clamp(46px, 10vw, 72px); }
}

@media (max-width: 380px) {
  .workspace-link { padding-inline: 0; font-size: 13px; }
  h1 { font-size: clamp(40px, 12vw, 46px); }
}