/*
 * ANCORA — landing page (ancora247.com).
 *
 * The app itself lives on app.ancora247.com and is built by Vite; this
 * page is deliberately plain HTML and CSS with no build step. A marketing
 * page needs to be real HTML in the response (the app is a client-rendered
 * SPA, which search engines see as an empty div) and it needs to paint
 * instantly on mobile data — both argue against shipping the app's ~1 MB
 * React bundle to someone who has not decided to use it yet.
 *
 * PALETTE: copied from src/styles/tokens.css, which stays the source of
 * truth — that file starts with `@import "tailwindcss"`, so it cannot be
 * linked from a plain page. Dark theme only here: the landing page is one
 * deliberate impression, not a themed app surface. If the brand gold moves,
 * move it in tokens.css first, then mirror it below.
 */

:root {
  --canvas: #08111b;
  --surface: #101b2a;
  --surface-2: #182638;
  --line: rgba(238, 226, 200, 0.1);
  --ink: #f2eee5;
  --ink-dim: #9ea8b6;
  --accent: #d4b47a;
  --accent-ink: #08111b;
  --anchor-hi: #efd6a2;
  --anchor-lo: #b8905a;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --page: 1080px;
  --gutter: clamp(20px, 5vw, 48px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* The launch scene in one gesture: first light low on the horizon, the
     rest of the page sinking into midnight. Two soft pools rather than a
     photograph, so the page stays a few kilobytes. */
  background-image:
    radial-gradient(90% 55% at 50% 0%, rgba(212, 180, 122, 0.13), transparent 70%),
    radial-gradient(70% 45% at 50% 42%, rgba(24, 38, 56, 0.85), transparent 75%);
  background-repeat: no-repeat;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

/* ---------- wordmark ---------- */

/*
 * The wordmark is ANCOR followed by the anchor standing in for the final A
 * (docs/brand.md) — the anchor already has an A's silhouette, and its ring
 * rises above the cap line like an ascender.
 *
 * Sizing mirrors AnchorLetter in src/components/ui/anchor-mark.jsx: K =
 * 0.018327em per drawing unit, so the 72-unit drawing is 1.32em tall, and
 * the bottom of the arms (y = 58 of 72) lands on the baseline — hence the
 * 14 units, 0.257em, of overhang below it.
 */
.mark {
  display: inline-block;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.mark-glyph {
  height: 1.32em;
  width: auto;
  vertical-align: -0.257em;
  /* The tracking puts a full letter-space after the R; pull it back so the
     gap before the anchor matches the gaps between the letters. */
  margin-left: -0.1em;
}

.mark-sm {
  font-size: 18px;
}

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

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-solid {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -14px rgba(212, 180, 122, 0.75);
}

.btn-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  padding: 10px 18px;
  font-size: 14px;
}

/* Header controls: the language switcher beside the "Open the app" pill. */
.head-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239ea8b6' stroke-width='1.5' fill='none'/></svg>")
    no-repeat right 12px center,
    rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 560;
  padding: 10px 30px 10px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.lang-select:hover {
  border-color: rgba(238, 226, 200, 0.22);
}
.lang-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- layout ---------- */

.site-head,
main > section,
.site-foot {
  width: min(var(--page), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
}

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

.hero {
  text-align: center;
  padding-block: clamp(48px, 9vw, 104px) clamp(64px, 11vw, 132px);
}

.hero-glyph svg {
  width: clamp(58px, 9vw, 76px);
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(212, 180, 122, 0.28));
}

.eyebrow {
  margin-top: 26px;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  margin-top: 18px;
  font-size: clamp(42px, 8.5vw, 74px);
  line-height: 1.06;
}

.lede {
  max-width: 34rem;
  margin: 24px auto 0;
  color: var(--ink-dim);
  font-size: clamp(16px, 2vw, 17.5px);
}

.cta {
  margin-top: 38px;
}

.cta-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ---------- section furniture ---------- */

main > section:not(.hero) {
  padding-block: clamp(56px, 9vw, 96px);
  border-top: 1px solid var(--line);
}

main > section h2 {
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.18;
}

.section-lede {
  max-width: 36rem;
  margin-top: 14px;
  color: var(--ink-dim);
}

/* ---------- the four moments ---------- */

.moments {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.moments li {
  background: linear-gradient(180deg, var(--surface), var(--canvas));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px 26px;
}

.moment-time {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.moments h3 {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.25;
}

.moments p {
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--ink-dim);
}

/* ---------- features ---------- */

.grid {
  margin-top: 38px;
  display: grid;
  gap: 30px 34px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.grid h3 {
  font-size: 23px;
  /* A hairline of gold instead of an icon set: one accent, used sparingly,
     is the whole visual argument of the brand. */
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}

.grid p {
  margin-top: 9px;
  color: var(--ink-dim);
  font-size: 14.5px;
}

/* ---------- privacy ---------- */

.privacy p {
  max-width: 40rem;
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: clamp(15.5px, 2vw, 17px);
}

/* ---------- closing ---------- */

.closing {
  text-align: center;
}

.closing-glyph svg {
  width: 46px;
  height: auto;
  opacity: 0.9;
}

.closing-line {
  max-width: 30rem;
  margin: 22px auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3.8vw, 30px);
  line-height: 1.38;
}

.closing-ref {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.closing .btn {
  margin-top: 34px;
}

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

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 40px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.site-foot nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
}

.site-foot nav a {
  color: var(--ink-dim);
  text-decoration: none;
}

.site-foot nav a:hover {
  color: var(--accent);
}

.foot-note {
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* Respect a reduced-motion preference: the only motion here is the smooth
   scroll and the button nudge, but both should yield. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn {
    transition: none;
  }
}