/* ───────────────────────────────────────────────
   Nomo — AI Status · warm status terminal
   ─────────────────────────────────────────────── */

:root {
  --paper: #faf4ec;
  --paper-deep: #f3e9db;
  --ink: #2b2018;
  --ink-soft: #6b5d50;
  --ink-faint: #a3927f;
  --line: #e6d9c7;
  --coral: #ff6f51;
  --coral-deep: #e8532f;
  --peach: #ffb38a;
  --blush: #ffd9c2;
  --ok: #3ba55c;
  --warn: #e8a13a;
  --card: #fffdf9;
  --radius: 18px;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* grain + atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  top: -30vh;
  right: -25vw;
  width: 80vw;
  height: 80vw;
  max-width: 1000px;
  max-height: 1000px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 140, 100, .22), rgba(255, 190, 150, .10) 55%, transparent 75%);
  filter: blur(10px);
}

.page {
  position: relative;
  z-index: 2;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 28px;
}

::selection { background: var(--blush); color: var(--coral-deep); }

/* ── nav ─────────────────────────────────────── */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0 26px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}

.wordmark .dot {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background:
    radial-gradient(120% 120% at 20% 15%, #ffd9b0 0%, #ff9d6e 42%, #ff6f51 75%, #e8532f 100%);
  box-shadow: 0 4px 14px rgba(232, 83, 47, .35), inset 0 1px 2px rgba(255,255,255,.6);
}

.wordmark .name {
  font-weight: 650;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.wordmark .name span {
  color: var(--ink-faint);
  font-weight: 400;
  font-style: italic;
}

nav .links {
  display: flex;
  gap: 26px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
}

nav .links a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

nav .links a:hover,
nav .links a[aria-current="page"] {
  color: var(--coral-deep);
  border-color: var(--coral);
}

/* ── shared reveal animation ─────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: .08s; }
.rise.d2 { animation-delay: .16s; }
.rise.d3 { animation-delay: .26s; }
.rise.d4 { animation-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .pulse::after { animation: none !important; }
}

/* ── hero ────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0 80px;
}

.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--coral);
}

h1 {
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.04;
  font-weight: 560;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

h1 em {
  font-style: italic;
  font-weight: 480;
  color: var(--coral-deep);
}

.hero p.lede {
  margin-top: 24px;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero .cta-row {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: 0 6px 18px rgba(43, 32, 24, .22);
}

.btn-store:hover {
  transform: translateY(-2px);
  background: var(--coral-deep);
  box-shadow: 0 10px 24px rgba(232, 83, 47, .35);
}

.cta-note {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ── status card ─────────────────────────────── */

.status-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 1px 2px rgba(43,32,24,.04),
    0 14px 40px rgba(43,32,24,.10),
    0 30px 80px rgba(232,83,47,.07);
  overflow: hidden;
  transform: rotate(1.4deg);
}

.status-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.status-card header .time { color: var(--ok); }

.service {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 14px;
}

.service:last-of-type { border-bottom: none; }

.service .label { flex: 1; color: var(--ink); }
.service .state { font-size: 12px; color: var(--ink-faint); }

.pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}

.pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  opacity: 0;
  animation: ping 2.6s ease-out infinite;
}

.service:nth-child(3) .pulse::after { animation-delay: .9s; }
.service:nth-child(4) .pulse::after { animation-delay: 1.6s; }
.service:nth-child(5) .pulse::after { animation-delay: .4s; }

.pulse.warn { background: var(--warn); }
.pulse.warn::after { border-color: var(--warn); animation-delay: 1.2s; }

@keyframes ping {
  0%   { transform: scale(.5); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.status-card .uptime {
  display: flex;
  gap: 3px;
  padding: 16px 20px 20px;
  background: linear-gradient(180deg, transparent, rgba(255,179,138,.08));
}

.uptime i {
  flex: 1;
  height: 26px;
  border-radius: 3px;
  background: var(--ok);
  opacity: .82;
}

.uptime i.dim { opacity: .35; }
.uptime i.bad { background: var(--warn); }

.card-caption {
  margin-top: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* ── features ────────────────────────────────── */

.features {
  border-top: 1px solid var(--line);
  padding: 72px 0;
}

.features .section-label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 44px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.feature {
  background: var(--card);
  padding: 34px 32px 38px;
  position: relative;
  transition: background .25s;
}

.feature:hover { background: #fff8f1; }

.feature .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--coral);
  letter-spacing: .1em;
}

.feature h3 {
  margin: 14px 0 10px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.feature p {
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 42ch;
}

/* ── privacy strip ───────────────────────────── */

.privacy-strip {
  margin: 8px 0 88px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 54px 48px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.privacy-strip::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,111,81,.5), transparent 70%);
}

.privacy-strip h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.privacy-strip h2 em { font-style: italic; color: var(--peach); }

.privacy-strip ul {
  list-style: none;
  font-family: var(--mono);
  font-size: 13.5px;
  display: grid;
  gap: 14px;
  position: relative;
}

.privacy-strip li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: #e8ddd2;
}

.privacy-strip li::before {
  content: "✓";
  color: var(--peach);
  flex-shrink: 0;
}

.privacy-strip a {
  color: var(--peach);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── article pages (privacy / support) ───────── */

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 96px;
}

.article .kicker { margin-bottom: 18px; }

.article h1 {
  font-size: clamp(36px, 5vw, 52px);
}

.article .meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 16px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.article .intro {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 36px 0 8px;
}

.article h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 52px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.article h2 .idx {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--coral);
}

.article h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 30px 0 8px;
}

.article p { margin: 14px 0; color: #463a2e; }

.article ul {
  margin: 14px 0 14px 2px;
  list-style: none;
}

.article ul li {
  padding-left: 26px;
  position: relative;
  margin: 9px 0;
  color: #463a2e;
}

.article ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--coral);
}

.article a { color: var(--coral-deep); text-underline-offset: 3px; }

.article .callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 26px 0;
  font-size: 16px;
  color: #463a2e;
}

.article .callout strong { color: var(--ink); }

.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 20px 0;
}

.article th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
  font-weight: 500;
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
}

.article td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #463a2e;
}

.article td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.faq-item summary {
  cursor: pointer;
  font-size: 18.5px;
  font-weight: 600;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--coral);
  font-size: 20px;
  transition: transform .25s;
  flex-shrink: 0;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item .answer { padding: 0 0 20px; color: #463a2e; }
.faq-item .answer p { margin: 0 0 10px; }

.contact-card {
  margin-top: 48px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 38px 40px;
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,111,81,.45), transparent 70%);
}

.contact-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 560;
}

.contact-card p { color: #e8ddd2; margin: 0 0 18px; max-width: 52ch; }

.contact-card .email {
  display: inline-block;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--peach);
  background: rgba(255,179,138,.12);
  border: 1px solid rgba(255,179,138,.35);
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s;
  position: relative;
}

.contact-card .email:hover { background: rgba(255,179,138,.22); }

/* ── footer ──────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

footer .col { max-width: 60ch; }

footer .fineprint {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.65;
}

footer .foot-links {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  flex-shrink: 0;
}

footer .foot-links a {
  color: var(--ink-soft);
  text-decoration: none;
}

footer .foot-links a:hover { color: var(--coral-deep); }

/* ── responsive ──────────────────────────────── */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 40px 0 64px;
  }
  .status-card { transform: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .privacy-strip { grid-template-columns: 1fr; padding: 40px 30px; }
  nav .links { gap: 18px; }
}