/* fans4me landing page — custom, replaces the stock LinkStack home.
   Themed light + dark. Every colour is declared as a token on the bare :root
   (complete light palette) and only redefined inside the dark block, so the
   page never renders one theme's text on the other theme's ground. */

:root {
  /* brand constants — identical in both themes */
  --f4m-ink: #0e2b23;
  --f4m-lime: #d2e823;
  --f4m-cream: #f4f1ea;

  /* themed tokens — light */
  --f4m-ground: #f4f1ea;
  --f4m-surface: #ffffff;
  --f4m-text: #0e2b23;
  --f4m-text-soft: #4a5d57;
  --f4m-rule: rgba(20, 52, 43, 0.08);
  --f4m-rule-strong: rgba(20, 52, 43, 0.22);

  --f4m-accent: #1f6f5c;           /* eyebrow text, hover fills */
  --f4m-chip: rgba(31, 111, 92, 0.10);

  --f4m-grad-a: #1f6f5c;           /* headline gradient */
  --f4m-grad-b: #35a883;
  --f4m-grad-c: #7cc47f;

  --f4m-btn-solid-bg: #0e2b23;     /* "primary" button */
  --f4m-btn-solid-fg: #f4f1ea;
  --f4m-btn-solid-hover: #1f6f5c;

  --f4m-phone-frame: #0e2b23;
  --f4m-phone-ring: transparent;

  --f4m-closer-bg: #0e2b23;
  --f4m-closer-fg: #f4f1ea;
  --f4m-closer-muted: rgba(244, 241, 234, 0.72);

  --f4m-glow-a: rgba(210, 232, 35, 0.55);
  --f4m-glow-b: rgba(31, 111, 92, 0.18);

  --f4m-shadow: 0 18px 50px rgba(14, 43, 35, 0.16);
  --f4m-shadow-deep: 0 30px 70px rgba(14, 43, 35, 0.32);

  --f4m-radius: 22px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f4m-ground: #0b211b;
    --f4m-surface: #12332a;
    --f4m-text: #f4f1ea;
    --f4m-text-soft: #a8bdb4;
    --f4m-rule: rgba(244, 241, 234, 0.10);
    --f4m-rule-strong: rgba(244, 241, 234, 0.26);

    /* lime carries the accent on a dark ground — mid green loses contrast */
    --f4m-accent: #d2e823;
    --f4m-chip: rgba(210, 232, 35, 0.12);

    --f4m-grad-a: #d2e823;
    --f4m-grad-b: #9fd66a;
    --f4m-grad-c: #6fc79a;

    --f4m-btn-solid-bg: #f4f1ea;
    --f4m-btn-solid-fg: #0e2b23;
    --f4m-btn-solid-hover: #d2e823;

    --f4m-phone-frame: #061511;
    --f4m-phone-ring: rgba(244, 241, 234, 0.14);

    /* lifted off the ground so the closing card still reads as a card */
    --f4m-closer-bg: #173c31;
    --f4m-closer-fg: #f4f1ea;
    --f4m-closer-muted: rgba(244, 241, 234, 0.68);

    --f4m-glow-a: rgba(210, 232, 35, 0.30);
    --f4m-glow-b: rgba(31, 111, 92, 0.30);

    --f4m-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    --f4m-shadow-deep: 0 30px 70px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --f4m-ground: #0b211b;
  --f4m-surface: #12332a;
  --f4m-text: #f4f1ea;
  --f4m-text-soft: #a8bdb4;
  --f4m-rule: rgba(244, 241, 234, 0.10);
  --f4m-rule-strong: rgba(244, 241, 234, 0.26);

  --f4m-accent: #d2e823;
  --f4m-chip: rgba(210, 232, 35, 0.12);

  --f4m-grad-a: #d2e823;
  --f4m-grad-b: #9fd66a;
  --f4m-grad-c: #6fc79a;

  --f4m-btn-solid-bg: #f4f1ea;
  --f4m-btn-solid-fg: #0e2b23;
  --f4m-btn-solid-hover: #d2e823;

  --f4m-phone-frame: #061511;
  --f4m-phone-ring: rgba(244, 241, 234, 0.14);

  --f4m-closer-bg: #173c31;
  --f4m-closer-fg: #f4f1ea;
  --f4m-closer-muted: rgba(244, 241, 234, 0.68);

  --f4m-glow-a: rgba(210, 232, 35, 0.30);
  --f4m-glow-b: rgba(31, 111, 92, 0.30);

  --f4m-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  --f4m-shadow-deep: 0 30px 70px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--f4m-ground);
  color: var(--f4m-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; }

.f4m-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
.f4m-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.f4m-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--f4m-text);
}
.f4m-brand img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.f4m-nav-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- buttons ---------- */
.f4m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  white-space: nowrap;
}
.f4m-btn:active { transform: translateY(1px); }
.f4m-btn:focus-visible { outline: 2px solid var(--f4m-accent); outline-offset: 3px; }

.f4m-btn-primary { background: var(--f4m-btn-solid-bg); color: var(--f4m-btn-solid-fg); }
.f4m-btn-primary:hover { background: var(--f4m-btn-solid-hover); color: var(--f4m-btn-solid-fg); box-shadow: var(--f4m-shadow); }

/* lime keeps ink text in both themes — it is a constant, not a themed pair */
.f4m-btn-lime { background: var(--f4m-lime); color: var(--f4m-ink); }
.f4m-btn-lime:hover { transform: translateY(-2px); box-shadow: var(--f4m-shadow); }

.f4m-btn-ghost { background: transparent; color: var(--f4m-text); border-color: var(--f4m-rule-strong); }
.f4m-btn-ghost:hover { border-color: var(--f4m-text); background: var(--f4m-chip); }

.f4m-btn-sm { padding: 10px 20px; font-size: 14px; }

/* ---------- hero ---------- */
.f4m-hero {
  display: grid;
  /* Copy column is intentionally wider than the phone column so the headline
     line "Everything you are." fits on one line at desktop widths. */
  grid-template-columns: 1.14fr .86fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0 90px;
}
.f4m-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--f4m-chip);
  color: var(--f4m-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 8px 15px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.f4m-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.f4m-hero h1 {
  /* Sized so the longest line clears the copy column without re-wrapping.
     text-wrap: balance keeps the two lines even at in-between widths. */
  font-size: clamp(2.3rem, 4.5vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--f4m-text);
}
.f4m-hero h1 em {
  font-style: normal;
  background: linear-gradient(105deg, var(--f4m-grad-a), var(--f4m-grad-b) 55%, var(--f4m-grad-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.f4m-lead {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--f4m-text-soft);
  margin: 0 0 32px;
  max-width: 30em;
}
.f4m-lead p { margin: 0 0 10px; }
.f4m-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.f4m-meta { font-size: 14px; color: var(--f4m-text-soft); display: flex; gap: 20px; flex-wrap: wrap; }
.f4m-meta strong { color: var(--f4m-text); }

/* ---------- phone ---------- */
.f4m-phone-stage { display: flex; justify-content: center; position: relative; }
.f4m-blob {
  position: absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 35% 30%, var(--f4m-glow-a), var(--f4m-glow-b) 60%, transparent 72%);
  filter: blur(6px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.f4m-phone {
  position: relative;
  z-index: 1;
  width: 316px;
  height: 640px;
  background: var(--f4m-phone-frame);
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--f4m-shadow-deep), 0 0 0 1px var(--f4m-phone-ring);
  overflow: hidden;
}
/* The preview page lays out for a real phone viewport, so rendering it into a
   292px-wide iframe clipped the link buttons. Instead render at a true 390px
   width and scale the whole frame down to fit (292/390 = 0.74872).
   Absolutely positioned because transform does not shrink the layout box. */
.f4m-phone iframe {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 390px;
  height: 823px;
  transform: scale(0.74872);
  transform-origin: top left;
  border: 0;
  border-radius: 44px;
  background: #fff;
  display: block;
}
.f4m-notch {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 104px; height: 6px;
  background: rgba(255,255,255,.28);
  border-radius: 99px;
  z-index: 2;
}

/* ---------- features ---------- */
.f4m-features { padding: 0 0 90px; }
.f4m-features h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 12px;
  text-align: center;
  color: var(--f4m-text);
}
.f4m-sub { text-align: center; color: var(--f4m-text-soft); margin: 0 auto 44px; max-width: 34em; line-height: 1.6; }
.f4m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.f4m-card {
  background: var(--f4m-surface);
  border: 1px solid var(--f4m-rule);
  border-radius: var(--f4m-radius);
  padding: 30px 26px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.f4m-card:hover { transform: translateY(-4px); box-shadow: var(--f4m-shadow); }
.f4m-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--f4m-lime);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.f4m-card h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; color: var(--f4m-text); }
.f4m-card p { margin: 0; color: var(--f4m-text-soft); font-size: 15px; line-height: 1.6; }

/* ---------- closing CTA ---------- */
.f4m-closer {
  background: var(--f4m-closer-bg);
  border-radius: 32px;
  padding: 66px 40px;
  text-align: center;
  color: var(--f4m-closer-fg);
  margin-bottom: 70px;
}
.f4m-closer h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--f4m-closer-fg);
}
.f4m-closer p { color: var(--f4m-closer-muted); margin: 0 auto 30px; max-width: 30em; line-height: 1.6; }

/* ---------- footer ---------- */
.f4m-footer {
  border-top: 1px solid var(--f4m-rule);
  padding: 30px 0 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--f4m-text-soft);
}
.f4m-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.f4m-footer a { color: var(--f4m-text-soft); }
.f4m-footer a:hover { color: var(--f4m-text); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .f4m-hero { grid-template-columns: 1fr; gap: 44px; padding-bottom: 60px; }
  .f4m-lead { margin-left: auto; margin-right: auto; }
  .f4m-hero-copy { text-align: center; }
  .f4m-cta, .f4m-meta { justify-content: center; }
  .f4m-grid { grid-template-columns: 1fr; }
  .f4m-nav-actions .f4m-hide-sm { display: none; }
}
@media (max-width: 420px) {
  .f4m-phone { width: 280px; height: 570px; }
  /* content box 256px wide -> 256/390 = 0.65641; height 546/0.65641 = 832px */
  .f4m-phone iframe { height: 832px; transform: scale(0.65641); }
  .f4m-closer { padding: 46px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .f4m-btn, .f4m-card { transition: none; }
}