/* Harson.ai — dark studio. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Syne:wght@700;800&display=swap");

:root {
  --bg: #080906;
  --bg-2: #10120c;
  --ink: #f4f2e8;
  --muted: #9b9c8a;
  --line: #2a2d22;
  --lime: #d6ff3a;
  --lime-ink: #14160c;
  --heat: #ff7a1a;
  --paper: #161810;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; }
html, body { background: var(--bg); color: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
  background-image:
    radial-gradient(1200px 500px at 80% -10%, rgba(214,255,58,0.08), transparent 55%),
    linear-gradient(180deg, #0c0e08 0%, var(--bg) 40%);
}

a { color: var(--lime); text-underline-offset: 0.18em; }
a:hover { color: #f2ff9a; }
.wrap {
  width: min(68rem, calc(100% - 2.4rem));
  margin: 0 auto;
}
.wrap.narrow { width: min(42rem, calc(100% - 2.4rem)); }

header {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(8,9,6,0.86);
  backdrop-filter: blur(12px);
}
header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.4rem;
}
.mark {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.mark img {
  height: 2.1rem;
  width: auto;
  display: block;
}
.mark:hover { opacity: 0.92; }
.brand-hero {
  display: block;
  margin: 0 0 1.35rem;
  line-height: 0;
}
.brand-hero img {
  width: min(19rem, 74vw);
  height: auto;
  display: block;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.05rem;
  font-size: 0.92rem;
  font-weight: 500;
}
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

main { flex: 1; padding: 2.6rem 0 4rem; }
.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 600;
  margin: 0 0 0.85rem;
}
h1 {
  font-family: Syne, sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-size: clamp(2.4rem, 7vw, 5.1rem);
  margin: 0 0 1.1rem;
  /* 14ch gives the headline its shape on a wide screen. On a phone the same
     limit forces a five-line stack, so let it use the column it has. */
  max-width: 14ch;
}
@media (max-width: 640px) { h1 { max-width: none; } }
h1.page {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  max-width: none;
  line-height: 1.05;
}
h2 {
  font-family: Syne, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 2rem 0 0.55rem;
}
.lede {
  margin: 0 0 1.8rem;
  color: var(--muted);
  font-size: 1.18rem;
  max-width: 36rem;
}
p { margin: 0 0 0.95rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 3.2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-lime { background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover { color: var(--lime-ink); filter: brightness(1.05); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }

.grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.1rem;
}
.grid.solo { grid-template-columns: 1fr; max-width: 38rem; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.3rem 1.35rem 1.4rem;
}
.card.hot { border-color: rgba(255,122,26,0.45); }
.card h2 { margin-top: 0.2rem; font-size: 1.55rem; }
.card p:last-child { margin-bottom: 0; }
.tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--heat);
  font-weight: 700;
  margin: 0 0 0.45rem;
}

.meta {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.8rem;
}
.meta li {
  margin: 0;
  padding: 0.95rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
}
.meta span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.legal p { color: #d8d8cc; }
.legal h2 { color: var(--lime); font-family: Figtree, sans-serif; font-size: 1.02rem; letter-spacing: 0; font-weight: 700; }
.updated { color: var(--muted); font-size: 0.92rem; }

footer {
  border-top: 1px solid var(--line);
  padding: 1.2rem 0 1.6rem;
  font-size: 0.82rem;
  color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; }
footer a { color: var(--muted); }
.note { color: var(--muted); font-size: 0.92rem; }

.phones {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 1.8rem;
  justify-content: center;
  align-items: flex-end;
  margin: 0.4rem 0 2.6rem;
}
.phone {
  width: min(16.5rem, 46vw);
  text-align: center;
}
.phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.4rem;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
  background: #0b1524;
}
.phone figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}
.store-soon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2.2rem;
}
.store-soon span {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.store-soon em {
  font-style: normal;
  color: var(--lime);
  margin-left: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------
   The proof strip. Most visitors arrive from a Play listing asking
   "are these people real?", so the checkable facts sit above the
   fold rather than in a footer nobody reaches. Deliberately plain:
   a claim in a quiet row reads as a fact, the same claim in a
   glowing card reads as marketing.
   --------------------------------------------------------------- */
.proof {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem 2rem;
  font-size: 0.95rem;
}
.proof li { margin: 0; color: var(--ink); }
.proof span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

/* "Live" is the single most valuable word on this page — it is the
   difference between a studio that ships and one that talks. It gets
   the lime; everything else in this family stays heat-orange. */
.tag-live { color: var(--lime); }

/* How we build. Four short claims, each verifiable in a shipped app. */
.how { margin: 3.4rem 0 0; }
.section-head {
  font-family: Syne, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.9rem 3rem;
}
.how-grid h3 {
  font-family: Syne, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.how-grid p { color: var(--muted); margin: 0; font-size: 0.97rem; }
@media (max-width: 720px) { .how-grid { grid-template-columns: 1fr; } }

/* Nothing on this page depends on motion, but the fade-in on the cards
   should still be honest about a reader who has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ===============================================================
   THE HERO
   The reticle is the one strong decision on this page. It is the
   same geometry the ballistics app draws, at true mil spacing, so
   it is the studio's actual work rather than borrowed ornament.
   It lives on its own plane and moves slower than the text: that
   rate difference is what reads as depth. Kept very low contrast —
   it is a watermark, not a subject, and the headline must win.
   =============================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--line);
}
.hero-inner { position: relative; z-index: 1; }

.hero-art {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -6%;
  translate: 0 -50%;
  width: min(62rem, 104vmin);
  aspect-ratio: 1;
  color: var(--lime);
  opacity: 0.2;
  pointer-events: none;
  /* Fades out toward the text so nothing competes with the headline. */
  mask-image: radial-gradient(closest-side, #000 42%, rgba(0,0,0,0.35) 72%, transparent 100%);
}
.hero-art .reticle { width: 100%; height: 100%; display: block; }

/* Depth: the reticle drifts and rotates a touch as the hero scrolls past,
   while the text moves at page rate. Small distances on purpose — parallax
   you can notice is parallax that is overdone. Scroll-driven animation runs
   on the compositor, so this costs nothing in JavaScript. */
@keyframes reticle-drift {
  from { transform: translate3d(0, -6%, 0) rotate(-3deg) scale(1.04); }
  to   { transform: translate3d(0, 6%, 0) rotate(3deg) scale(1.0); }
}
@supports (animation-timeline: view()) {
  .hero-art {
    animation: reticle-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

/* Bigger, tighter, and allowed to break onto its own lines. The old h1 was
   sized like a section heading on a page whose whole job is a first
   impression. */
.hero h1 {
  font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  max-width: 18ch;
  margin: 0 0 1.4rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--lime);
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 38rem; }
.hero .hero-actions { margin-bottom: 0; }

@media (max-width: 760px) {
  .hero { padding: 2.6rem 0 3.2rem; }
  .hero-art { right: -40%; opacity: 0.1; }
}