/* Interval — shared styling for the site.
   Dark, calm, and the same gradient the app icon and screenshots use. */

:root {
  --page: #101015;
  --panel: #1a181f;
  --line: #2b2932;
  --ink: #f1eff6;
  --muted: #9b97a8;
  --accent: #AFA9EC;
  --grad: linear-gradient(102deg,
      #7BB0E0 0%, #8B7BD4 24%, #A472C4 45%,
      #C06E9C 65%, #CE7566 83%, #E09250 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 620px at 50% 8%, rgba(139,123,212,0.16), transparent 70%),
    linear-gradient(160deg, #16151C 0%, #0F0F13 45%, #181320 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 680px; }

.gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- header ---------- */

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0;
}

.top img { width: 38px; height: 38px; border-radius: 10px; }
.top span { font-weight: 600; letter-spacing: -0.2px; }
.top nav { margin-left: auto; display: flex; gap: 22px; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */

.hero { text-align: center; padding: 56px 0 20px; }

.hero h1 {
  font-size: clamp(44px, 7vw, 78px);
  line-height: 1.05;
  letter-spacing: -2.4px;
  font-weight: 600;
  margin: 0 0 20px;
}

.hero p {
  color: var(--muted);
  font-size: clamp(17px, 2.2vw, 20px);
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- phone ---------- */

.phone {
  --w: 300px;
  width: var(--w);
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(150deg, #6E6A7E, #34323F 20%, #2A2833 55%, #3C3946 85%, #5E5A6C);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  flex: none;
}

.phone img {
  display: block;
  width: 100%;
  border-radius: 42px;
  border: 2px solid #14131a;
}

.hero .phone { margin: 48px auto 0; --w: 320px; }

/* ---------- features ---------- */

.feature {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding: 88px 0;
  border-top: 1px solid var(--line);
}

.feature:nth-child(even) { flex-direction: row-reverse; }
.feature .text { flex: 1; }

.feature h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -1.2px;
  font-weight: 600;
  margin: 0 0 14px;
}

.feature p { color: var(--muted); margin: 0 0 14px; }
.feature ul { color: var(--muted); margin: 0; padding-left: 20px; }
.feature li { margin-bottom: 7px; }

/* ---------- plain pages ---------- */

.doc { padding: 40px 0 100px; }
.doc h1 { font-size: 42px; letter-spacing: -1.4px; margin: 0 0 10px; font-weight: 600; }
.doc .lede { color: var(--muted); margin: 0 0 12px; font-size: 18px; }
.doc h2 { font-size: 21px; letter-spacing: -0.3px; margin: 40px 0 10px; }
.doc p, .doc li { color: #d9d5e4; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--accent); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 26px 0;
}

footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 64px;
  color: var(--muted);
  font-size: 15px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

footer a { color: var(--muted); }

@media (max-width: 760px) {
  .feature, .feature:nth-child(even) {
    flex-direction: column;
    text-align: left;
    padding: 64px 0;
  }
  .phone { --w: 260px; }
  .top nav { gap: 16px; }
}