/* Ephemis — brand site styles. Hand-written, no build step. */

:root {
  --ink:        #26344b;   /* deep navy from the app icon */
  --ink-2:      #131c2c;
  --ink-3:      #0a1120;   /* near-black sky */
  --accent:     #1d6297;   /* sky-blue accent */
  --accent-2:   #4f9bd4;
  --star:       #dfe7f2;
  --moon:       #f2e9cf;
  --bg:         #f6f8fb;
  --surface:    #ffffff;
  --text:       #1f2a3d;
  --text-soft:  #55627a;
  --border:     #e3e8f0;
  /* score bands (from the app) */
  --sc-great:   #3fae6f;
  --sc-solid:   #4f9bd4;
  --sc-weak:    #e0a53c;
  --sc-comp:    #d96b5b;
  --radius:     16px;
  --maxw:       1080px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:    #6aa9d9;
    --accent-2:  #8cc0e8;
    --bg:        #0b111d;
    --surface:   #131d2e;
    --text:      #e7edf6;
    --text-soft: #9aa7bd;
    --border:    #24314a;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--bg);
  line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(160%) blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700;
  font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--text-soft); font-size: 0.95rem; font-weight: 500; }
.nav a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 620px) { .nav { gap: 14px; } .nav .nav-hide { display: none; } }

/* ---------- Hero: the night sky ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: 68px 0 76px;
  background:
    radial-gradient(120% 90% at 50% -20%, #1c3a5e 0%, var(--ink-2) 42%, var(--ink-3) 100%);
}
/* layered starfields */
.hero .stars, .hero .stars2 {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.hero .stars {
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 22% 42%, #cfe0f5, transparent),
    radial-gradient(1.8px 1.8px at 37% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 52% 34%, #e7f0fb, transparent),
    radial-gradient(1.6px 1.6px at 68% 16%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 79% 40%, #cfe0f5, transparent),
    radial-gradient(1.7px 1.7px at 90% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 15% 60%, #cfe0f5, transparent),
    radial-gradient(1.4px 1.4px at 60% 58%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 85% 62%, #e7f0fb, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.hero .stars2 {
  background-image:
    radial-gradient(1px 1px at 30% 26%, #9db8dc, transparent),
    radial-gradient(1px 1px at 46% 50%, #9db8dc, transparent),
    radial-gradient(1px 1px at 72% 30%, #9db8dc, transparent),
    radial-gradient(1px 1px at 12% 46%, #9db8dc, transparent),
    radial-gradient(1px 1px at 92% 48%, #9db8dc, transparent);
  animation: twinkle 5s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

/* Milky Way soft band */
.hero .milkyway {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 30% at 30% 20%, rgba(120,150,210,.22), transparent 70%);
  transform: rotate(-18deg);
}

/* altitude arc + moon, drawn in SVG, sits behind content */
.hero .skyart { position: absolute; left: 0; right: 0; top: 55px; width: 100%; height: 420px;
  pointer-events: none; opacity: .9; }

.hero .wrap { position: relative; z-index: 2; }
.hero-icon { width: 104px; height: 104px; border-radius: 24px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55); margin-bottom: 24px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.7rem); margin: 0 0 16px;
  letter-spacing: -0.02em; font-weight: 800; }
.hero .tagline { font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  color: #c6d5ec; max-width: 600px; margin: 0 auto 32px; }
.hero .eyebrow { font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 600;
  color: var(--accent-2); margin-bottom: 20px; }

/* coordinate chips floating in the sky */
.coord-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }
.coord-chips .chip {
  font-family: var(--mono); font-size: 0.74rem; color: #bcd0ec;
  border: 1px solid rgba(120,160,210,.35); border-radius: 999px;
  padding: 5px 11px; background: rgba(20,35,60,.4); backdrop-filter: blur(4px);
}
.coord-chips .chip b { color: #fff; font-weight: 600; }

/* mountain horizon at the bottom of the hero */

/* App Store badge */
.appstore {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: #111; padding: 12px 22px; border-radius: 13px;
  font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: transform .15s ease;
}
.appstore:hover { text-decoration: none; transform: translateY(-2px); }
.appstore svg { width: 26px; height: 26px; }
.appstore .small { font-size: 0.68rem; font-weight: 500; opacity: 0.7; display: block; line-height: 1; margin-bottom: 3px; }
.appstore .big { font-size: 1.15rem; line-height: 1; }
.hero .platforms { margin-top: 16px; font-size: 0.85rem; color: #8ba1c1; font-family: var(--mono); }

/* ---------- Sections ---------- */
section { padding: 78px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head .kicker { font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.72rem; color: var(--accent); font-weight: 600; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 8px 0 12px; letter-spacing: -0.02em; }
.section-head p { color: var(--text-soft); font-size: 1.1rem; margin: 0; }

/* Features grid */
.features { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 16px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.feature .ic svg { width: 26px; height: 26px; }
.feature h3 { margin: 0 0 8px; font-size: 1.15rem; }
.feature p { margin: 0; color: var(--text-soft); font-size: 0.97rem; }

/* ---------- Product mock: "tonight" ---------- */
.mock-band { background:
    radial-gradient(90% 120% at 80% -10%, #1c3a5e33, transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink-3)); color: #fff; }
.mock { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch; }
@media (max-width: 780px) { .mock { grid-template-columns: 1fr; } }
.panel {
  background: rgba(19,29,46,.72); border: 1px solid #2b3a58; border-radius: 18px;
  padding: 18px; backdrop-filter: blur(6px); box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.panel .phead { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 0.78rem; color: #9db3d4; margin-bottom: 14px; }
.panel .phead .live { color: var(--accent-2); }
.moonpill { display: inline-flex; align-items: center; gap: 6px; }
.moonpill .dot { width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 65% 40%, var(--moon), #b9b08f); box-shadow: inset -3px 0 3px #0006; }

/* ranked target rows */
.trow { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 8px; border-radius: 12px; }
.trow + .trow { border-top: 1px solid #26344b; }
.trow:hover { background: #ffffff08; }
.trow .rank { font-family: var(--mono); color: #6f83a6; font-size: 0.85rem; text-align: right; }
.trow .name { font-weight: 600; font-size: 1rem; }
.trow .meta { font-family: var(--mono); font-size: 0.72rem; color: #8598ba; margin-top: 2px; }
.trow .stats { display: flex; gap: 14px; align-items: center; }
.trow .stat { text-align: right; }
.trow .stat .v { font-weight: 600; font-size: 0.9rem; }
.trow .stat .k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: .08em;
  text-transform: uppercase; color: #6f83a6; }
@media (max-width: 460px) { .trow .stats .hide-sm { display: none; } }
.badge { min-width: 40px; text-align: center; font-weight: 700; font-size: 0.9rem;
  padding: 5px 8px; border-radius: 9px; color: #06111f; }
.badge.great { background: var(--sc-great); }
.badge.solid { background: var(--sc-solid); }
.badge.weak  { background: var(--sc-weak); }

.chartpanel { display: flex; flex-direction: column; }
.chartpanel .altchart { width: 100%; height: auto; flex: 1; }
.chartpanel .legend { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono);
  font-size: 0.7rem; color: #9db3d4; margin-top: 8px; }
.chartpanel .legend span { display: inline-flex; align-items: center; gap: 6px; }
.chartpanel .legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* Screenshot showcase (device selector + auto pager) */
.showcase { text-align: center; }
.dev-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 36px;
  background: rgba(12,20,34,.6); border: 1px solid #2b3a58; border-radius: 999px;
}
.dev-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: #9db3d4; background: transparent; padding: 9px 22px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.dev-tab:hover { color: #dce7f5; }
.dev-tab.is-active { background: var(--accent); color: #fff; }

.stage {
  display: flex; align-items: center; justify-content: center;
  height: min(66vh, 600px);
}
.stage-img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  border-radius: 18px; box-shadow: 0 26px 64px rgba(0,0,0,.55);
  transition: opacity .18s ease;
}
/* Phone shots get a rounder “device” bezel; tablet/desktop a thin frame. */
.stage[data-device="iphone"] .stage-img { border: 5px solid #0c1220; border-radius: 34px; }
.stage[data-device="ipad"]   .stage-img { border: 6px solid #0c1220; border-radius: 20px; }
.stage[data-device="mac"]    .stage-img { border: 1px solid #2b3a58; border-radius: 12px; }

.stage-cap {
  margin-top: 22px; font-family: var(--mono); font-size: .82rem; color: #cde0f5;
}
.pager { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.pager .dot {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer; border-radius: 50%;
  background: #3a4a68; transition: background .18s ease, transform .18s ease;
}
.pager .dot:hover { background: #5a6f95; }
.pager .dot.is-active { background: var(--accent-2); transform: scale(1.25); }
.shot-note { margin-top: 22px; font-family: var(--mono); font-size: .72rem; color: #6f83a6; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; text-align: center; color: #fff;
  background: radial-gradient(100% 140% at 50% -30%, #235286, var(--ink-3)); }
.cta-band .stars { position: absolute; inset: 0; opacity: .7;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 55% 60%, #cfe0f5, transparent),
    radial-gradient(1.5px 1.5px at 80% 35%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 40% 75%, #e7f0fb, transparent); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 22px; }

/* ---------- Article pages ---------- */
.page-hero { position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: 78px 0 56px;
  background: radial-gradient(120% 120% at 50% -40%, #1c3a5e, var(--ink-2) 60%, var(--ink-3)); }
.page-hero .stars { position: absolute; inset: 0; opacity: .7;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 30%, #cfe0f5, transparent),
    radial-gradient(1.5px 1.5px at 82% 52%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 68% 22%, #e7f0fb, transparent); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.02em; }
.page-hero p { color: #c6d5ec; margin: 10px 0 0; }
.doc { max-width: 760px; margin: 0 auto; padding: 56px 24px 20px; }
.doc h2 { margin: 40px 0 12px; font-size: 1.35rem; letter-spacing: -0.01em; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--text); font-size: 1.02rem; }
.doc ul { padding-left: 20px; }
.doc .muted { color: var(--text-soft); }
.doc .updated { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 8px; font-family: var(--mono); }
.faq { border-top: 1px solid var(--border); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--border); padding: 6px 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; font-size: 1.05rem; }
.faq summary::marker { color: var(--accent); }
.faq details p { margin: 0 0 14px; color: var(--text-soft); }
.contact-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin: 24px 0; text-align: center; }
.contact-card a { font-size: 1.2rem; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--border); padding: 40px 0;
  color: var(--text-soft); font-size: 0.92rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.site-footer .flinks { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer .flinks a { color: var(--text-soft); }
.site-footer .flinks a:hover { color: var(--text); text-decoration: none; }
.site-footer .fbrand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.site-footer .fbrand img { width: 26px; height: 26px; border-radius: 7px; }