/* ───────────────────────────────────────────────────────────────
   Near-black ink on white, one pale blue band, and no accent hue:
   colour is spent only where it means something — the gap column.
   Nothing is boxed. Every panel is transparent, separated by space
   and type weight instead of chrome.
   ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #ffffff;
  --ink: #222326;
  --ink-2: rgba(31, 32, 37, 0.6);
  --ink-3: rgba(31, 32, 37, 0.4);
  --rule: rgba(31, 32, 37, 0.1);
  --dark: #1f2025;
  --band: #ebf0f8;
  --band-2: #f3f6f7;
  /* Semantic only, for the gap column — not an accent. */
  --up: #16a34a;
  --down: #dc2626;

  --gutter: clamp(20px, 4.5vw, 64px);
  --measure: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, system-ui, 'Inter', 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ─────────────────────────── Pills ─────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0) scale(0.985); }

.pill-dark { background: var(--dark); color: #fff; }
.pill-dark:hover { background: #2c2d33; }
.pill-light { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-light:hover { background: var(--ink); color: #fff; }


/* ─────────────────────────── Nav ─────────────────────────── */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.3s ease;
}
.nav.stuck { background: rgba(255, 255, 255, 0.92); }

.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark { width: 22px; height: 22px; flex: none; display: block; }

.nav-links { display: flex; gap: 4px; margin-left: 18px; }
.nav-links a { padding: 10px 14px; border-radius: 999px; font-size: 17px; color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

/* The mark sits between the links and the CTA, and keeps its own left auto on
   phones so it — not the button — is what takes up the slack when the links go. */
.nav-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-x:hover { color: var(--ink); background: rgba(31, 32, 37, 0.06); }
.nav-x svg { display: block; }

.nav-cta { margin-left: 10px; height: 44px; padding: 0 20px; }

@media (max-width: 720px) {
  .nav { left: var(--gutter); right: var(--gutter); transform: none; padding-left: 18px; }
  .nav-links { display: none; }
  .nav-x { margin-left: auto; }
  .nav-cta { margin-left: 6px; }
}

/* ─────────────────────────── Hero ─────────────────────────── */

.hero {
  position: relative;
  padding: 168px var(--gutter) 0;
  text-align: center;
  overflow: hidden;
  background: var(--paper);
}

/*
  The blossom now sits at its own colour rather than being driven to red, and
  the clip is masked so it dissolves into the page along the bottom edge
  instead of ending on a hard line. `saturate` cannot tint a neutral, so the
  white it was shot on stays exactly the page white.
*/
.petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.02);
  pointer-events: none;
  opacity: 1;
  transition: opacity 900ms linear;
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
}

/* Keeps the type on paper without greying it. */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 42%, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.72) 55%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0) 24%),
    linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0) 30%);
}

.hero-copy { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: clamp(46px, 7.4vw, 96px); letter-spacing: -0.03em; line-height: 1; }
/* The second line carries the weight; no accent colour on the page. */
.hero h1 em { font-style: normal; color: var(--ink); }

.hero-sub {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.35;
  color: var(--ink-2);
}
.hero-btn { margin-top: 34px; }

/*
  The contract address. People copy it far more often than they read it, so the
  whole row is the button and the label sits in the same pill rather than above
  it. Mono digits keep the string scannable against a forgery.
*/
.ca {
  position: relative;
  z-index: 2;
  /* Block-level so it takes its own line under the button rather than sitting
     beside it on the hero's centred line. */
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 32, 37, 0.05);
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ca:hover { background: rgba(31, 32, 37, 0.09); color: var(--ink); }
.ca-label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.ca-addr {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.5vw, 13.5px);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-action {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.ca.copied { background: rgba(31, 32, 37, 0.09); color: var(--ink); }

.ca-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.ca-foot:hover { color: var(--ink); }

.rating { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }

.hero-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 20px auto -2px;
  max-width: 760px;
  /*
    Taller than the handsets need, because they are rotated: the corners of a
    rotated box reach past its own height, and a mask is sized to the element's
    box — anything outside it is masked away. Too short a stage and the tops get
    sliced flat. The slack sits above them; `flex-end` keeps them on the floor.
  */
  height: clamp(380px, 56vw, 580px);
  /*
    Masking the stage — shadows included — lets the handsets dissolve into the
    page instead of meeting the section edge on a hard horizontal line.
    `no-repeat` matters: the default would tile the gradient and band them.
  */
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}
.phone {
  position: relative;
  border-radius: 42px;
  background: #0f1013;
  padding: 7px;
  box-shadow: 0 30px 70px rgba(31, 32, 37, 0.2);
  overflow: hidden;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 36px; }
.phone-back { width: clamp(190px, 25vw, 270px); height: clamp(300px, 44vw, 460px); transform: rotate(-7deg) translate(34px, -14px); }
.phone-front { width: clamp(210px, 27vw, 296px); height: clamp(300px, 46vw, 470px); transform: rotate(4deg) translate(-24px, 6px); z-index: 2; }

/* ────────────────────────── Ticker strip ──────────────────── */

.strip { padding: 56px 0 8px; background: var(--paper); }
.strip-label { text-align: center; font-size: 15px; color: var(--ink-3); margin-bottom: 24px; }
.strip-rail {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: marquee 42s linear infinite; }
.strip-track img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.strip-track span { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 500; color: var(--ink-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────────────────────── Sections ──────────────────────── */

.section { max-width: var(--measure); margin: 0 auto; padding: clamp(76px, 9vw, 132px) var(--gutter); }
.center-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.center-head h2, .split h2, .get h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.03em; }
.section-sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--ink-2); }

.fine { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.fine.center { max-width: 620px; margin: 30px auto 0; text-align: center; }

.band-soft { max-width: none; background: var(--band-2); }
.band-soft > * { max-width: var(--measure); margin-inline: auto; }

.status {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(31, 32, 37, 0.06);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* ────────────────────────── Table ────────────────────────── */

.table { border-top: 1px solid var(--ink); }
.thead, .row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 0.9fr 0.9fr;
  gap: 16px;
  align-items: center;
}
.thead { padding: 14px 0; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.tick { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tick img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.tick .sym { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tick .co { font-size: 15px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.num { text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.num.muted { color: var(--ink-3); }
.gap-pos { color: var(--up); font-weight: 500; }
.gap-neg { color: var(--down); font-weight: 500; }

.skeleton {
  height: 12px; border-radius: 4px; margin-left: auto; width: 68%;
  background: linear-gradient(90deg, rgba(31,32,37,0.06) 25%, rgba(31,32,37,0.03) 50%, rgba(31,32,37,0.06) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ───────────── Product trio — no plate, just the phone ────── */

.cards { display: grid; gap: 40px 28px; grid-template-columns: repeat(3, 1fr); }

.card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.card p { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

.card-shot { margin-top: 26px; display: flex; justify-content: center; }
.card-shot img {
  width: 74%;
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(31, 32, 37, 0.14);
  display: block;
}

/* ─────── Feature grid — transparent, three across, ruled ──── */

.grid { display: grid; gap: 44px 40px; grid-template-columns: repeat(3, 1fr); }
.cell { background: transparent; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.cell h4 { font-size: 20px; letter-spacing: -0.02em; }
.cell p { margin-top: 10px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }

/* ───────────────────────── Split section ─────────────────── */

.split { display: grid; gap: clamp(36px, 6vw, 80px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--ink-2); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

/* Also transparent: a ruled list, not four filled tiles. */
.facts { display: grid; gap: 0; margin: 0; background: transparent; border-radius: 0; }
.facts > div { background: transparent; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts > div:first-child { border-top: 1px solid var(--rule); }
.facts dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 7px 0 0; font-size: 17px; }

/* ─────────────────────────── Get ─────────────────────────── */

.get { text-align: center; padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--band); }
.get .section-sub { max-width: 560px; margin-inline: auto; }
.get-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }

/* ────────────────────────── Footer ───────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
  border-top: 1px solid var(--rule);
}
.footer .fine { max-width: 62ch; }

.x-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.x-link:hover { color: var(--ink); }

/* ───────────────────────── Reveals ───────────────────────── */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .row { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────── Responsive ────────────────────── */

@media (max-width: 900px) {
  .thead, .row { grid-template-columns: minmax(0, 2fr) 1fr 1fr; }
  .tablet-hide { display: none; }
  .cards, .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .thead, .row { grid-template-columns: minmax(0, 1.7fr) 1fr 0.9fr; }
  .phone-hide { display: none; }
  .tick .co { display: none; }
  .cards, .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 132px; }
}