/* Vyapari — site chrome.
   The palette is lifted from lib/core/constants/app_colors.dart so the site
   and the app read as one product. */

:root {
  --void-top: #0e1a3e;
  --void-mid: #15275d;
  --void-lit: #1c3b78;
  --void-bottom: #0a1330;
  --surface: #16295e;
  --surface-rim: rgba(227, 176, 75, 0.28);
  --gold: #e3b04b;
  --gold-bright: #f7de86;
  --gold-pale: #ead9ac;
  --gold-deep: #9c6c24;
  --ink: #f6efe0;
  --ink-muted: #a8b6dc;
  --measure: 68ch;
  --shell: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

:target { scroll-margin-top: 6rem; }
section[id], h2[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void-bottom);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-bright); }
a:hover { color: var(--gold-pale); }

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 19, 48, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(227, 176, 75, 0.16);
}

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}

.masthead img { display: block; height: 52px; width: auto; }

.masthead nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.masthead nav a { color: var(--ink-muted); text-decoration: none; }
.masthead nav a:hover { color: var(--gold-bright); }

/* The store link, so it stays reachable while the masthead is stuck to the
   top. Below the breakpoint four items do not fit beside the wordmark, and
   the hero badge is one scroll away, so it drops out rather than wrapping. */
.nav-cta {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--surface-rim);
  background: rgba(227, 176, 75, 0.12);
  white-space: nowrap;
}

.masthead nav a.nav-cta { color: var(--gold-bright); }

.masthead nav a.nav-cta:hover {
  color: var(--void-bottom);
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

@media (max-width: 760px) {
  .nav-cta { display: none; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(120% 90% at 50% 8%, var(--void-lit) 0%,
                    var(--void-mid) 42%, var(--void-top) 76%,
                    var(--void-bottom) 100%);
}

.hero h1 {
  margin: 0 auto 0.6rem;
  max-width: 16ch;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero .mark {
  display: block;
  width: min(360px, 74vw);
  height: auto;
  margin: 0 auto clamp(1.5rem, 4vw, 2.4rem);
}

.lede {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--surface-rim);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- buttons */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.2rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  border: 1px solid var(--surface-rim);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.badge small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* The one store you can actually buy from reads as a button; the other stays
   a muted placeholder. */
.badge--live {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--void-bottom);
}

.badge--live small { opacity: 0.78; }

.badge--live:hover {
  color: var(--void-bottom);
  background: var(--gold-pale);
  border-color: var(--gold-pale);
}

/* -------------------------------------------------------------- sections */

section { padding-block: clamp(3rem, 8vw, 5.5rem); }

h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
}

.section-lede {
  margin: 0 0 2.6rem;
  max-width: var(--measure);
  color: var(--ink-muted);
}

.features {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card {
  padding: 1.5rem;
  border: 1px solid var(--surface-rim);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface), var(--void-top));
}

.card h3 {
  margin: 0 0 0.45rem;
  color: var(--gold-pale);
  font-size: 1.08rem;
}

.card p { margin: 0; color: var(--ink-muted); font-size: 0.97rem; }

/* ----------------------------------------------------------- screenshots */

.shots {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.shots figure { margin: 0; }

.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--surface-rim);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.shots figcaption {
  margin-top: 0.7rem;
  color: var(--ink-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* ---------------------------------------------------------------- policy */

.policy { padding-block: clamp(2.5rem, 6vw, 4rem); }

.policy .shell { max-width: 78ch; }

.policy h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 0.4rem; }

.policy h2 {
  margin: 2.6rem 0 0.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(227, 176, 75, 0.16);
  font-size: 1.3rem;
  color: var(--gold-pale);
}

.policy h3 {
  margin: 1.6rem 0 0.4rem;
  font-size: 1.02rem;
  color: var(--ink);
}

.policy p, .policy li { color: var(--ink-muted); }
.policy strong { color: var(--ink); font-weight: 600; }
.policy ul { padding-left: 1.15rem; }
.policy li { margin-bottom: 0.45rem; }

.stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--surface-rim);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.callout {
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgba(227, 176, 75, 0.07);
}

.callout p:last-child { margin-bottom: 0; }

/* Scrollable on a narrow screen rather than forcing the page sideways. */
.table-wrap { overflow-x: auto; margin: 1.2rem 0; }

table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

th, td {
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(227, 176, 75, 0.14);
}

th { color: var(--gold-pale); font-weight: 600; }
td { color: var(--ink-muted); }

/* ---------------------------------------------------------------- footer */

footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid rgba(227, 176, 75, 0.16);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
}

footer nav { display: flex; gap: 1.4rem; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }