/* =========================
   Base Theme
   ========================= */
:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --accent: #06b6d4;
  --btn: #3b82f6;
  --logoH: 48px; /* 46–52 works */
}

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

body {
  background: radial-gradient(1000px 600px at 20% -10%, #0f2337, #0b1220 60%);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  line-height: 1.6;
}

/* =========================
   Layout
   ========================= */
.wrap {
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 24px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================
   Brand Row / Logos
   ========================= */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--logoH);
  flex-wrap: nowrap; /* keep one row on desktop */
}

.logo {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.loidraft-logo { max-height: var(--logoH); }
.intenra-logo  { max-height: calc(var(--logoH) * 0.80); opacity: 0.95; }

.by {
  display: inline-flex;
  align-items: center;
  height: var(--logoH);
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 6px;
}

.wordmark { font-weight: 700; letter-spacing: 0.2px; font-size: 18px; }

.nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
.nav a:hover { color: var(--ink); }

/* =========================
   Hero
   ========================= */
.hero { padding: 64px 24px 24px; }
h1 {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.accent { color: var(--accent); }
.lede { max-width: 740px; color: var(--muted); font-size: 18px; }

/* =========================
   CTA
   ========================= */
.cta {
  margin: 28px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta input {
  flex: 1 1 280px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #23304b;
  background: #0c1830;
  color: var(--ink);
}
.cta button {
  padding: 12px 18px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(90deg, var(--btn), #60a5fa);
  color: white;
  font-weight: 600;
}
.cta .note {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  margin: 6px 2px;
}

/* =========================
   Stats / Features / Updates
   ========================= */
.stats {
  display: flex;
  gap: 16px;
  margin: 30px 0;
  flex-wrap: wrap;
}
.stats > div {
  background: rgba(255,255,255,0.06);
  padding: 14px 16px;
  border-radius: 12px;
}
.stats strong { font-size: 20px; display: block; }
.stats span { color: var(--muted); font-size: 12px; }

.features { padding: 32px 24px; }
.features h2, .updates h2 { margin-top: 12px; }
.features ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding-left: 0;
  list-style: none;
}
.features li {
  background: rgba(255,255,255,0.04);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #1f2a44;
}
.features li span { font-weight: 600; }

.updates article {
  background: rgba(255,255,255,0.04);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #1f2a44;
  max-width: 760px;
}

/* =========================
   Footer
   ========================= */
.footer { color: var(--muted); text-align: center; }
.footer .small a { color: var(--muted); text-decoration: none; }
.footer .small a:hover { color: var(--ink); }

/* =========================
   Mobile Adjustments
   ========================= */
@media (max-width: 740px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .brand {
    flex-wrap: wrap;   /* allow wrap only on phones */
    row-gap: 6px;
    height: auto;
  }

  .loidraft-logo { max-height: 40px; }
  .intenra-logo  { max-height: 32px; }
  .by { height: 24px; margin: 0 4px; }

  .hero { padding: 40px 16px 16px; }

  .cta { flex-direction: column; }
  .cta input, .cta button { width: 100%; }
}

/* Make email input one line tall */
.cta input {
  flex: 1 1 280px;
  padding: 6px 10px;          /* reduce vertical padding */
  height: 40px;               /* enforce single-line height */
  font-size: 16px;            /* readable but compact */
  border-radius: 8px;
  border: 1px solid #23304b;
  background: #0c1830;
  color: var(--ink);
  box-sizing: border-box;
}