/* ============================================================
   TESSERA — Marketing site (tesseraem.com)
   Separate from the app stylesheet on purpose: this deploys to
   the root domain, the app deploys to app.tesseraem.com, and
   neither should be able to break the other.
   ============================================================ */

:root {
  /* Brand background ramp — same values as the app icon spec.
     Nothing lighter than #2C374A up top: above that the slate
     quadrant of the mark starts dissolving into the background. */
  --bg-top:     #2C374A;
  --bg:         #0D1117;
  --bg-panel:   #161B22;

  --text:       #FBFBFB;
  --text-muted: #8B929A;
  --text-dim:   #6B727B;

  /* Mosaic quadrant colors, brightest stop of each */
  --blue:       #1C83FD;
  --blue-deep:  #1065CF;
  --red:        #DD232F;
  --green:      #3EBD4A;
  --slate:      #5A6B7F;

  --border:     #232A35;
  --radius:     8px;

  --maxw:       1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* TeX Gyre Heros is the brand face; Helvetica is its metric twin,
     so the system stack lands within a hair of the logotype. */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Mosaic rule: the four quadrant colors as a hairline.
   Used at the very top of the page and above the footer. ---- */
.mosaic-rule {
  height: 3px;
  flex: none;
  background: linear-gradient(
    to right,
    var(--blue)  0%,   var(--blue)  25%,
    var(--red)   25%,  var(--red)   50%,
    var(--green) 50%,  var(--green) 75%,
    var(--slate) 75%,  var(--slate) 100%
  );
}

/* ============================ HEADER ============================ */

.site-header {
  flex: none;
  background: rgba(13, 17, 23, .85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* sits below the mosaic rule, which scrolls away */
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.brand { display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand img {
  height: 44px;   /* wordmark cap height lands ~19px — comfortably legible */
  width: auto;
  display: block;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
}
.btn-primary:hover { background: var(--blue); border-color: var(--blue); }

.btn-ghost {
  background: transparent;
  border-color: #39424F;
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--slate); background: rgba(255,255,255,.04); }

.btn-lg { font-size: 17px; padding: 15px 30px; }

/* ============================= HERO ============================= */

.hero {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  /* Vertical ramp, bright end at the top — same logic as the icon:
     keeps the page dark exactly where the slate tiles need contrast. */
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(44, 55, 74, .85) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 15%, rgba(28, 131, 253, .10) 0%, transparent 65%),
    var(--bg);
}

/* Oversized mark, bled off the right edge as a watermark. */
.hero-mark {
  position: absolute;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
  width: 620px;
  max-width: 60vw;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-inner { max-width: 720px; }

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
}

/* The tagline. Sits between the headline and the detail copy, and is the
   only line here that is fixed wording — sized so it stays the second thing
   you read, ahead of the supporting paragraph. */
.hero p.tagline {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.4;
  font-weight: 400;
  color: #C2C9D2;
  /* Wide enough that the tagline holds one line on desktop — it reads as a
     statement, not a wrapped sentence. Wraps naturally on narrow screens. */
  max-width: 56ch;
}

.hero p.lede {
  margin: 0 0 36px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-note {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--text-dim);
}

/* ============================ FOOTER ============================ */

.site-footer {
  flex: none;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--text-dim);
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text); text-decoration: none; }

/* =========================== RESPONSIVE ========================= */

@media (max-width: 720px) {
  .site-header .wrap { height: 64px; }
  .brand img { height: 34px; }
  .btn { padding: 10px 16px; font-size: 15px; }
  .hero { padding: 64px 0 72px; }
  .hero-mark { right: -160px; opacity: .05; }
  .hero-cta .btn { flex: 1 1 auto; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}