/* Club YAP home page.
 *
 * The look is the app's own: chunky ink outlines, solid offset shadows (the
 * "sticker" style of the App Store art), a soft lavender / pink / blue wash,
 * Nunito, and the logo's green and blue as the accents. */

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

:root {
  --ink: #13171A;
  --ink-2: #3B3F44;
  --muted: #6B7078;
  --paper: #FBFBFD;
  --white: #FFFFFF;
  --lav: #EEEAF8;
  --lav-2: #D9CCF5;
  --pink: #F4C8E2;
  --sky: #C4D6FC;
  --green: #08B02A;
  --green-soft: #DDF5E2;
  --blue: #0F37FE;
  --blue-soft: #E3E8FF;
  --yellow: #FEC800;
  --yellow-soft: #FFF3C4;
  --red: #E2384D;

  --line: 3px;
  --r: 22px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --font: 'Nunito', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Courier Prime', ui-monospace, 'SF Mono', Menlo, monospace;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- shared pieces ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-weight: 800; font-size: 14px; white-space: nowrap;
}
.pill-soft { background: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pill-ink { background: var(--ink); color: var(--white); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px;
  font: 800 17px/1 var(--font); text-decoration: none;
  border: var(--line) solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-ink { background: var(--ink); color: var(--white); box-shadow: 5px 5px 0 var(--lav-2); }
.btn-ghost { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-paper { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { border-color: var(--white); }

.card {
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.eyebrow {
  display: inline-block;
  font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
}

.num {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  border: var(--line) solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900; font-size: 16px; background: var(--lav);
}
.num-green { background: var(--green); color: var(--white); }
.num-blue { background: var(--blue); color: var(--white); }
.num-yellow { background: var(--yellow); }

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; font-weight: 900; }
h2 { font-size: clamp(34px, 5vw, 56px); }
h3 { font-size: clamp(24px, 2.6vw, 32px); }
h2 em, h1 em { font-style: normal; color: var(--blue); }

.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); font-weight: 600; }

.section { padding: 120px 0; position: relative; }
.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section-head h2 { margin: 12px 0 18px; }

/* Phones: a dark bezel with side buttons and one flat lavender shadow. The
   screen holds the screenshots at their own 1206 x 2622 ratio, so nothing in
   them is cropped. */
.phone {
  position: relative;
  width: 280px;
  padding: 10px;
  border-radius: 50px;
  background: var(--ink);
  box-shadow: 14px 14px 0 var(--lav-2), 0 30px 60px -20px rgba(19, 23, 26, .35);
}
.phone::before, .phone::after {
  content: ''; position: absolute; width: 4px; border-radius: 0 3px 3px 0; background: var(--ink);
}
.phone::before { right: -4px; top: 24%; height: 13%; }
.phone::after { left: -4px; top: 19%; height: 8%; border-radius: 3px 0 0 3px; box-shadow: 0 64px 0 var(--ink); }
.phone > img, .phone .screen {
  display: block; width: 100%; aspect-ratio: 1206 / 2622;
  border-radius: 40px; background: #000; object-fit: cover;
}
.phone .screen { position: relative; overflow: hidden; }
.phone .screen > img { width: 100%; height: 100%; display: block; }
/* Feature 01's phone scrolls the feed too, a whole screen at a time: French
   clip, then three German ones with a word tapped, and back to the French
   (the fifth is the first again, so the loop is seamless). Feed shots only. */
.demo-track { height: 100%; animation: demo 14s cubic-bezier(.7, 0, .2, 1) infinite; }
.demo-track img { width: 100%; height: 100%; display: block; object-fit: cover; }
@keyframes demo {
  0%, 19% { transform: translateY(0); }
  25%, 44% { transform: translateY(-100%); }
  50%, 69% { transform: translateY(-200%); }
  75%, 94% { transform: translateY(-300%); }
  100% { transform: translateY(-400%); }
}

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 253, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: rgba(19, 23, 26, .1); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 76px; }
.nav-brand img { height: 46px; width: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { color: var(--ink-2); font-weight: 800; font-size: 15px; text-decoration: none; }
.nav-links a:hover { color: var(--blue); }

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

.hero {
  position: relative;
  padding: 56px 0 120px;
  background:
    radial-gradient(ellipse 60% 70% at 0% 85%, rgba(244, 200, 226, .55), transparent 70%),
    radial-gradient(ellipse 55% 75% at 100% 70%, rgba(196, 214, 252, .7), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, #F4F2FA 60%, var(--lav) 100%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(40px, 5.6vw, 76px); margin: 22px 0 22px; letter-spacing: -0.035em; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 em { font-style: normal; color: var(--blue); }
.squiggle { position: relative; display: inline-block; color: var(--green); white-space: nowrap; }
.squiggle svg { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: .28em; overflow: visible; }
.squiggle path { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 1.1s .5s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero .lead { max-width: 540px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px; margin-top: 24px; }
.steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 16px;
  background: var(--white); border: 2px solid var(--ink);
  font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.2;
}
.steps b { display: block; font-size: 16px; font-weight: 900; color: var(--ink); }
.step-n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  border: 2px solid var(--ink); font-weight: 900; font-size: 14px;
}
.s1 { background: var(--green); color: var(--white); }
.s2 { background: var(--blue); color: var(--white); }
.s3 { background: var(--yellow); }

.flags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.flags li { position: relative; }
.flags img { width: 46px; height: 34px; object-fit: contain; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.flags li:hover img { transform: translateY(-5px) rotate(-6deg) scale(1.12); }
.flags li > span:last-child {
  position: absolute; left: 50%; top: -30px; transform: translate(-50%, 4px);
  background: var(--ink); color: var(--white); font-size: 12px; font-weight: 800;
  padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.flags li:hover > span:last-child { opacity: 1; transform: translate(-50%, 0); }
.more-tile {
  display: grid; place-items: center; height: 34px; padding: 0 10px;
  border: 2.5px solid var(--ink); border-radius: 6px; background: var(--white);
  font-weight: 900; font-size: 13px; white-space: nowrap;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-art { position: relative; height: 680px; display: grid; place-items: center; }
.phone-hero { width: 300px; transform: rotate(-4deg); z-index: 3; }
.blob { position: absolute; border-radius: 50%; }
.blob-a { width: 420px; height: 420px; background: var(--yellow-soft); left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px dashed rgba(19,23,26,.12); }
.blob-b { width: 170px; height: 170px; background: var(--green-soft); right: 2%; top: 4%; }

/* The feed: the video band between the fixed status bar and tab bar slides
   up to the next clip, holds, slides again, and loops (the third slide is the
   first again, so the jump back is invisible). Band = rows 370-2200 of 2622. */
.feed { position: absolute; left: 0; right: 0; top: 14.11%; height: 69.8%; overflow: hidden; background: #000; }
.feed-track { height: 100%; animation: feed 17s cubic-bezier(.7, 0, .2, 1) infinite; }
.feed-track img { width: 100%; height: 100%; display: block; object-fit: cover; }
@keyframes feed {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-100%); }
  40%, 56% { transform: translateY(-200%); }
  60%, 76% { transform: translateY(-300%); }
  80%, 96% { transform: translateY(-400%); }
  100% { transform: translateY(-500%); }
}

.swipe-hint {
  position: absolute; z-index: 5; right: 1%; top: 44%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 10px 9px; border-radius: 20px;
  background: var(--white); border: var(--line) solid var(--ink); box-shadow: var(--shadow-sm);
  font-weight: 900; font-size: 12px; line-height: 1.15; text-align: center; transform: rotate(4deg);
}
.swipe-arrow {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: var(--white); font-size: 17px;
  animation: nudge 9s cubic-bezier(.7, 0, .2, 1) infinite;
}
@keyframes nudge {
  0%, 30%, 52%, 78%, 100% { transform: translateY(0); }
  38%, 86% { transform: translateY(-6px); }
}

.floater {
  position: absolute; z-index: 4; width: 104px; height: 104px; object-fit: contain;
  filter: drop-shadow(3px 4px 0 rgba(19,23,26,.12));
  animation: bob 6s ease-in-out infinite;
}
.f1 { left: 2%; top: 60px; animation-delay: -1s; --rot: -8deg; }
.f2 { right: 2%; top: 110px; width: 96px; animation-delay: -3s; --rot: 10deg; }
.f3 { left: 0; top: 430px; width: 116px; animation-delay: -2s; --rot: 6deg; }
.f4 { right: 3%; top: 520px; width: 88px; animation-delay: -4s; --rot: -6deg; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--rot, 0deg) * -0.6)); }
}


/* ---------- problems ---------- */

.problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.problem { padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.problem h3 { font-size: 25px; }
.problem p { color: var(--ink-2); font-weight: 600; }
.problem .num { background: var(--lav); }
.problem > :last-child { margin-top: auto; }

.vs { display: grid; gap: 10px; padding-top: 8px; }
.bubble { padding: 10px 14px; border-radius: 16px; font-weight: 800; border: 2.5px solid var(--ink); max-width: 90%; }
.bubble small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; opacity: .65; margin-bottom: 2px; }
.bubble-fake { font-family: var(--mono); font-weight: 400; background: #F2F1EE; color: var(--muted); border-color: #C9C7C2; border-bottom-left-radius: 4px; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.bubble-fake small { font-family: var(--font); text-decoration: none; }
.bubble-real { background: var(--green); color: var(--white); justify-self: end; border-bottom-right-radius: 4px; transform: rotate(-1.5deg); }

.culture-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 8px; }
.culture-row img { width: 100%; aspect-ratio: 1; object-fit: contain; }

.meters { display: grid; gap: 14px; padding-top: 8px; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-weight: 800; font-size: 14px; }
.meter span { grid-column: 1 / 3; color: var(--ink-2); }
.meter .bar { height: 14px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--white); overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--lav-2); }
.meter em { font-style: normal; font-weight: 900; }
.meter.unknown .bar { background: repeating-linear-gradient(-45deg, #EEE 0 6px, var(--white) 6px 12px); }
.meter.unknown em { color: var(--red); font-size: 20px; }

/* ---------- bridge ---------- */

.bridge {
  padding: 110px 0;
  background: var(--ink); color: var(--white);
  text-align: center; position: relative; overflow: hidden;
}
.bridge::before, .bridge::after {
  content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,55,254,.45), transparent 65%);
  left: -160px; top: -200px;
}
.bridge::after { background: radial-gradient(circle, rgba(8,176,42,.35), transparent 65%); left: auto; right: -160px; top: auto; bottom: -220px; }
.bridge-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bridge img { width: 220px; height: auto; background: var(--white); padding: 14px 22px; border-radius: 28px; border: var(--line) solid var(--white); box-shadow: 8px 8px 0 var(--blue); transform: rotate(-3deg); }
.bridge h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.25; max-width: 860px; }
.hl-g { color: #3BD45A; }
.hl-b { color: #7C93FF; }
.hl { color: var(--yellow); }

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

.how {
  background:
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(196,214,252,.5), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(244,200,226,.45), transparent 70%),
    var(--paper);
}
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.feature + .feature { margin-top: 140px; }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 500px; }
.feature-copy h3 { font-size: clamp(32px, 4vw, 48px); }
.feature-copy p { font-size: 19px; color: var(--ink-2); font-weight: 600; }
.feature.flip .feature-copy { justify-self: end; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chips li {
  padding: 8px 14px; border-radius: 999px; background: var(--white);
  border: 2px solid var(--ink); font-weight: 800; font-size: 14px;
}
.chips li::before { content: '✓'; color: var(--green); margin-right: 7px; font-weight: 900; }

.feature-art { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 560px; }
.feature-art::before {
  content: ''; position: absolute; width: 440px; height: 440px; border-radius: 50%;
  background: var(--lav); z-index: -2;
}
.feature:nth-child(1) .feature-art::before { background: var(--green-soft); }
.feature:nth-child(3) .feature-art::before { background: var(--yellow-soft); }
.phone-tilt-l { transform: rotate(-4deg); }
.phone-tilt-r { transform: rotate(4deg); }
.feature-badge { position: absolute; width: 120px; right: 12%; top: 30px; animation: bob 7s ease-in-out infinite; --rot: 10deg; }
.badge-left { right: auto; left: 4%; top: auto; bottom: 40px; --rot: -6deg; }
.star-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; --k: 1; }
.star-field img { position: absolute; height: auto; left: calc(50% + var(--x) * var(--k) * 1px); top: calc(50% + var(--y) * var(--k) * 1px); translate: -50% -50%; animation: bob 7s ease-in-out infinite; }

.ladder { width: 100%; max-width: 440px; padding: 24px 24px 22px; transform: rotate(1.5deg); }
.ladder-head { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 15px; margin-bottom: 16px; }
.ladder-head img { width: 34px; height: 25px; }
.ladder ol { list-style: none; display: grid; gap: 8px; }
.ladder li {
  position: relative; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 12px; font-weight: 800; overflow: hidden; isolation: isolate;
}
.ladder li::before {
  content: ''; position: absolute; inset: 0; z-index: -1; width: var(--w);
  background: var(--blue-soft); border-radius: 12px;
  transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.ladder li:nth-child(-n+3)::before { background: #C9D2FF; }
.in .ladder li::before, .no-motion .ladder li::before { transform: scaleX(1); }
.ladder li:nth-child(2)::before { transition-delay: .08s; }
.ladder li:nth-child(3)::before { transition-delay: .16s; }
.ladder li:nth-child(4)::before { transition-delay: .24s; }
.ladder li:nth-child(5)::before { transition-delay: .32s; }
.ladder li:nth-child(6)::before { transition-delay: .40s; }
.ladder li:nth-child(7)::before { transition-delay: .48s; }
.ladder li:nth-child(8)::before { transition-delay: .56s; }
.ladder b { font-weight: 900; color: var(--blue); font-size: 14px; }
.ladder span { font-size: 18px; }
.ladder em { font-style: normal; color: var(--muted); font-size: 14px; font-weight: 700; }
.ladder li.later { opacity: .55; }
.ladder li.later:first-of-type, .ladder li:nth-child(7) { margin-top: 6px; border-top: 2px dashed rgba(19,23,26,.15); border-radius: 0 0 12px 12px; }

/* ---------- culture explorer ---------- */

.culture {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(217,204,245,.55), transparent 70%),
    linear-gradient(180deg, var(--paper), var(--lav));
}
.explorer { padding: 18px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  border: 2.5px solid transparent; background: var(--paper);
  font: 800 15px var(--font); color: var(--ink-2); cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.tab img { width: 30px; height: 22px; object-fit: contain; }
.tab:hover { background: var(--lav); }
.tab[aria-selected="true"] { background: var(--white); border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }

.explorer-body {
  display: grid; grid-template-columns: 220px 1fr 340px; gap: 28px;
  padding: 26px; border-radius: 16px; background: var(--paper);
  border: 2px solid rgba(19,23,26,.08);
}
.explorer-side { display: flex; flex-direction: column; gap: 10px; }
.landmark { width: 100%; height: 190px; object-fit: contain; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.landmark.swap { opacity: 0; transform: translateY(14px) scale(.9); }
.explorer-title { font-size: 26px; }
.explorer-hint { color: var(--muted); font-weight: 700; font-size: 15px; }

.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-content: start; }
.sticker {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; border-radius: 18px; cursor: pointer;
  background: var(--white); border: 2.5px solid rgba(19,23,26,.12);
  font: 800 14px/1.2 var(--font); color: var(--ink); text-align: center;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), border-color .15s, box-shadow .15s;
  animation: tile-in .45s cubic-bezier(.3,1.4,.5,1) both;
}
.sticker img { width: 84px; height: 84px; object-fit: contain; }
.sticker:hover { transform: translateY(-4px) rotate(-2deg); border-color: var(--ink); }
.sticker[aria-pressed="true"] { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--yellow-soft); }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(.85); } }

.detail {
  align-self: start; position: relative;
  padding: 24px; border-radius: 20px;
  background: var(--white); border: var(--line) solid var(--ink); box-shadow: var(--shadow);
  animation: tile-in .35s ease both;
}
.detail .kind {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--lav); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.detail h4 { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 10px 0 8px; }
.detail .blurb { color: var(--ink-2); font-weight: 600; }
.say {
  margin: 16px 0; padding: 14px 16px; border-radius: 16px 16px 16px 4px;
  background: var(--blue); color: var(--white);
}
.say small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.say strong { display: block; font-size: 21px; font-weight: 900; line-height: 1.25; margin: 2px 0; }
.say span { font-size: 14px; opacity: .85; font-weight: 700; font-family: var(--mono); }
.effect { font-size: 15px; font-weight: 700; color: var(--ink); padding-left: 14px; border-left: 4px solid var(--green); }

.culture { padding-bottom: 0; }
.skyline {
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
  margin-top: 50px; padding: 40px 16px 0; overflow: hidden;
}
.skyline img { width: clamp(64px, 11vw, 150px); height: auto; margin: 0 -6px -4px; transition: transform .3s cubic-bezier(.3,1.6,.5,1); transform-origin: bottom; }
.skyline img:nth-child(even) { width: clamp(56px, 9.5vw, 128px); }
.skyline img:hover { transform: translateY(-10px) rotate(-3deg); }

/* ---------- FAQ (also used by the generated pages) ---------- */

.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq details { background: var(--white); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; font-weight: 900; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--blue); }
.faq details[open] summary::after { content: '−'; }
.faq details p, .faq details > div { color: var(--ink-2); font-weight: 600; }
.faq details > div { padding: 0 20px 20px; display: grid; gap: 10px; }
.faq details > p { padding: 0 20px 20px; }
.faq details ul { padding-left: 20px; display: grid; gap: 6px; }
.faq details a { font-weight: 800; }
.home-faq { padding-top: 40px; }

/* ---------- closer ---------- */

.closer { background: var(--ink); color: var(--white); padding: 130px 0 120px; border-top: 6px solid var(--ink); position: relative; overflow: hidden; }
.closer::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(15,55,254,.35), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(8,176,42,.25), transparent 40%);
}
.manifesto { list-style: none; position: relative; display: grid; gap: 52px; }
.manifesto li { display: flex; align-items: flex-start; gap: 28px; }
.manifesto li > div > span { display: block; font-size: clamp(30px, 4.6vw, 58px); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; }
.manifesto p { margin-top: 12px; max-width: 760px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; font-weight: 600; color: rgba(255,255,255,.72); }
.manifesto img { width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); object-fit: contain; flex: none; transform: rotate(-6deg); }
.manifesto li:nth-child(2) img { transform: rotate(5deg); }
.manifesto b { font-weight: 900; }
.manifesto .g { color: #3BD45A; }
.manifesto .y { color: var(--yellow); }
.manifesto .b { color: #7C93FF; }
.closer-cta { position: relative; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 64px; padding-left: calc(clamp(56px, 7vw, 96px) + 28px); }

/* ---------- about + footer ---------- */

.about { padding: 80px 0; background: var(--paper); }
.about-inner { max-width: 760px; }
.about h2 { font-size: 26px; margin-bottom: 14px; }
.about p { color: var(--ink-2); font-size: 16px; margin-bottom: 12px; }

.foot { border-top: 1.5px solid rgba(19,23,26,.1); background: var(--paper); padding: 36px 0 48px; }
.foot-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; }
.foot img { height: 40px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot nav a { color: var(--ink-2); font-weight: 800; font-size: 14px; text-decoration: none; }
.foot nav a:hover { color: var(--blue); }
.foot p { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 700; }

/* ---------- scroll reveal (only when JS is on) ---------- */

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .problems .reveal:nth-child(2) { transition-delay: .1s; }
.js .problems .reveal:nth-child(3) { transition-delay: .2s; }
.js .manifesto .reveal:nth-child(2) { transition-delay: .12s; }
.js .manifesto .reveal:nth-child(3) { transition-delay: .24s; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .explorer-body { grid-template-columns: 1fr 1fr; }
  .explorer-side { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; }
  .landmark { width: 120px; height: 110px; flex: none; }
  .sticker-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { padding-top: 32px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { height: 620px; max-width: 520px; width: 100%; margin: 0 auto; }
  .problems { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 40px; }
  .feature.flip .feature-copy { order: 0; justify-self: start; }
  .feature-art { min-height: 0; padding: 20px 0; }
  .feature-art::before { width: 340px; height: 340px; }
  .feature + .feature { margin-top: 100px; }
  .section { padding: 90px 0; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .nav-inner { height: 64px; }
  .nav-brand img { height: 38px; }
  .nav-cta { font-size: 12px; padding: 6px 11px; }
  .hero-art { height: 560px; }
  .phone { width: 230px; padding: 8px; border-radius: 40px; box-shadow: 10px 10px 0 var(--lav-2), 0 24px 40px -18px rgba(19,23,26,.35); }
  .phone > img, .phone .screen { border-radius: 32px; }
  .phone-hero { width: 236px; }
  .floater { width: 72px; height: 72px; }
  .f1 { left: 0; top: 20px; } .f2 { width: 66px; top: 120px; right: 0; }
  .f3 { width: 80px; top: 380px; left: 0; } .f4 { width: 62px; top: 300px; right: 0; }
  .swipe-hint { right: 0; top: 40%; font-size: 11px; padding: 8px 7px 7px; }
  .f4 { top: 470px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .steps li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; font-size: 11px; }
  .steps b { font-size: 15px; }
  .blob-a { width: 300px; height: 300px; }
  .problem { padding: 24px 22px; }
  .bridge { padding: 80px 0; }
  .bridge img { width: 170px; }
  .feature-badge { width: 84px; right: 2%; }
  .badge-left { left: 2%; }
  .star-field { --k: .68; z-index: 1; }
  .star-field img { scale: .62; }
  .explorer { padding: 10px; }
  .explorer-body { grid-template-columns: 1fr; padding: 14px; gap: 18px; }
  .sticker-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sticker { padding: 8px 2px; font-size: 11px; border-radius: 14px; }
  .sticker img { width: 54px; height: 54px; }
  .landmark { width: 90px; height: 84px; }
  .explorer-title { font-size: 22px; }
  .explorer-side { flex-wrap: wrap; gap: 6px 14px; }
  .explorer-hint { font-size: 13px; flex-basis: 100%; }
  .manifesto li { gap: 16px; }
  .closer-cta { padding-left: 0; }
  .foot p { margin-left: 0; width: 100%; }
  .ladder { padding: 18px 14px; }
  .ladder li { grid-template-columns: 52px 1fr auto; padding: 8px 10px; }
  .ladder span { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .feed-track, .demo-track { animation: none; }
  .squiggle path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}