/* Vietti marketing site — dark, minimal, matches marketing/helsinki-launch-poster
   and marketing/helsinki-sticker-square: same tokens, same grain texture,
   hairline dividers instead of cards. Flat near-black background, no
   gradient/vignette wash — that read as muddy rather than atmospheric.

   Rebuilt per research/LANDING_PAGE_DESIGN_RESEARCH.md (real screenshots of
   Feeld/Pure vs. text extraction of Tinder/Bumble/Hinge). Three rules from
   that research drive everything below:
     1. The headline dominates - it's the largest thing on the screen by a
        wide margin, everything else is deliberately quieter.
     2. One accent-color hit per screen, used functionally not decoratively:
        pink on the headline's second clause + the primary CTA button, gold
        confined to the founding-offer phrase, separators are neutral.
     3. The one visual motif is real product content, not an abstract
        graphic or stock imagery: a full-width, moving strip of the
        interest tags under the headline (previously a static wrapped
        chip cluster; briefly tried as a placeholder-silhouette photo
        carousel, replaced again because that had motion but no real
        content behind it - this keeps the motion and fixes that). */

:root {
  /* Cooler, closer to true black than the original #12070f — per
     research/LANDING_PAGE_DESIGN_RESEARCH.md, both Grindr (flat #000) and
     Feeld (#0a0a12) converge on near-black rather than a warm maroon tint.
     Keeps a whisper of the brand's plum undertone instead of going fully
     neutral, so it still reads as Vietti's own dark, not a copy. */
  --bg: #0a070c;
  --surface: #1e1019;
  --border: #3d2233;
  --text: #f5eef2;
  --text-muted: #a98da0;
  --accent: #ff2e63;
  --accent-fill: #d6265a;
  --gold: #f5b942;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .12;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
  background-size: 160px 160px;
  background-repeat: repeat;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent-fill);
  color: #fff;
}
.btn-primary:hover { background: var(--accent); }
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn-lg {
  font-size: 17px;
  padding: 14px 30px;
  width: 100%;
  max-width: 340px;
}
.btn-block { width: 100%; }

/* ── header ───────────────────────────────────────────────────── */
.site-header {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.logo-dot { color: var(--accent); }
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 40px 0 40px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(44px, 13vw, 92px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
}
.hero h1 .accent { color: var(--accent); }

.hero-sub {
  /* Default gives the subhead its own breathing room under the headline.
     Pages that run the tag carousel (see below) zero this out, since the
     carousel's own top margin already provides that space - without this
     override a page without the carousel (e.g. a city landing page) would
     have the subhead sitting almost flush against the h1. */
  margin-top: 28px;
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.5;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.tag-carousel + .container .hero-sub {
  margin-top: 0;
}

.hero-offer {
  margin: 22px auto 0;
  max-width: 400px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
}
.hero-offer .gold { color: var(--gold); }
.hero-offer b.gold { font-weight: 700; }

.hero .btn-primary {
  margin-top: 26px;
}

.hero-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── tag carousel: the one visual motif, see HTML comment ────────── */
.tag-carousel {
  margin: 20px 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tag-carousel-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: tag-carousel-scroll 32s linear infinite;
}
@keyframes tag-carousel-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tag-carousel-track { animation: none; }
}
.pill {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  line-height: 1;
  white-space: nowrap;
}
.pill-accent {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── trust ────────────────────────────────────────────────────── */
.trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
  text-align: center;
}
.trust-main {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  max-width: 460px;
  margin: 0 auto;
}
.trust-sub {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── content sections (SEO/value sections below the fold) ───────
   Same restraint as the rest of the page: hairline divider between
   sections, no cards, no boxed grids. Kicker + heading stay centered
   like the hero; body paragraphs are left-aligned within a narrow
   column, multi-sentence prose reads better left-aligned than
   centered even on an otherwise centered page. */
.section {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.section-kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.section h2 {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.section h2 .accent {
  color: var(--accent);
}
.section p {
  text-align: left;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}
.section p + p {
  margin-top: 14px;
}

/* real content (city names), not decoration - same pill as the hero
   carousel, reused deliberately for consistency, just static here */
.city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
  margin: 16px auto 0;
}

/* the section's one visual anchor: a pulled-out line, editorial style,
   left accent border instead of a full pull-quote block */
.section-pull {
  max-width: 480px;
  margin: 20px auto !important;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-size: clamp(18px, 4.5vw, 21px) !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text) !important;
}
.section-pull .accent {
  color: var(--accent);
}
.section .check-list + p,
.section .compare + .section-note {
  margin-top: 18px;
}

/* alternating tint so back-to-back sections read as distinct blocks
   instead of one long repeating strip, no new colors introduced */
.section-alt {
  background: var(--surface);
}

.section-note {
  margin-top: 16px !important;
  font-size: 14px !important;
}
.section-note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.plain-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.plain-list li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}
.plain-list li:first-child {
  border-top: none;
}

.check-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.check-list li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 14px;
  color: var(--text-muted);
}
/* ── event list (Helsinki page's live events section) ────────────
   Same hairline-divider convention as .plain-list, not a card grid, just
   with a small thumbnail per row since this content (unlike everything
   else on the page) has real, licensed photos attached. */
.event-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.event-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.event-item:first-child {
  border-top: none;
}
.event-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  display: block;
}
.event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-info {
  min-width: 0;
}
.event-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
a.event-name:hover {
  text-decoration: underline;
}
.event-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 6px;
  font-weight: 800;
  color: var(--accent);
}

/* free vs Premium, side by side at wider widths, plain text columns
   rather than a boxed comparison table */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 560px;
  margin: 20px auto 0;
  text-align: left;
}
.compare-col h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.compare-col .plain-list {
  max-width: none;
  margin-top: 4px;
}
@media (min-width: 560px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-list {
  max-width: 600px;
  margin: 22px auto 0;
  text-align: left;
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
}
.faq-item[open] summary::after {
  content: '\2212';
}
.faq-item p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── closing CTA ──────────────────────────────────────────────── */
.closing {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.closing h2 {
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.closing p {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-muted);
}
.closing .btn-primary {
  margin-top: 22px;
}

/* ── footer ───────────────────────────────────────────────────── */
.site-footer {
  padding: 40px 0 48px;
  text-align: center;
}
.site-footer p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.site-footer p + p { margin-top: 6px; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }

/* ── age gate ─────────────────────────────────────────────────── */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 2, 5, .82);
  backdrop-filter: blur(6px);
}
.age-gate[hidden] { display: none; }

.age-gate-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.age-gate-logo {
  font-size: 22px;
  margin-bottom: 18px;
}
.age-gate-card h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.age-gate-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 22px;
}
.age-gate-card .btn-lg {
  margin: 0 auto;
}
.age-gate-card .btn-ghost {
  margin-top: 12px;
  width: 100%;
  max-width: 340px;
}

/* ── responsive: desktop ──────────────────────────────────────── */
@media (min-width: 720px) {
  .hero { padding: 72px 0 56px; }
  .pill { font-size: 14px; padding: 9px 18px; }
}