:root {
  --paper: #f7f2e8;
  --paper-deep: #eee7da;
  --ink: #191426;
  --ink-soft: #4f495b;
  --purple: #9645ed;
  --purple-deep: #6f24bd;
  --lime: #66ef00;
  --lime-soft: #d8ff9f;
  --pink: #ff72ab;
  --peach: #ffd9bf;
  --sky: #cceeff;
  --white: #fffdf8;
  --line: rgba(25, 20, 38, .14);
  --shadow: 0 24px 70px rgba(39, 25, 63, .13);
  --radius-sm: 16px;
  --radius-md: 26px;
  --radius-lg: 42px;
  --container: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Manrope", system-ui, sans-serif; letter-spacing: -.045em; line-height: 1.02; }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 132px 0; }

.skip-link {
  position: fixed;
  left: 20px;
  top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
}
.skip-link:focus { top: 16px; }
.scroll-line { position: fixed; inset: 0 0 auto; height: 3px; z-index: 1000; }
.scroll-line span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--lime), var(--purple)); transform: scaleX(0); transform-origin: left; }

.site-nav {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
}
.nav-shell {
  width: min(1240px, calc(100vw - 32px));
  height: 66px;
  margin: 0 auto;
  padding: 0 10px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255, 253, 248, .84);
  border: 1px solid rgba(25, 20, 38, .10);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(39, 25, 63, .08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transition: box-shadow .25s ease, transform .25s ease;
}
.site-nav.scrolled .nav-shell { box-shadow: 0 16px 50px rgba(39, 25, 63, .14); }
.brand img { width: 118px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.nav-links a, .text-link { font-size: 14px; font-weight: 650; position: relative; }
.nav-links a::after, .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1.5px;
  background: currentColor;
  transition: right .2s ease;
}
.nav-links a:hover::after, .text-link:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.menu-button { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: var(--ink); position: relative; }
.menu-button span { position: absolute; left: 13px; width: 18px; height: 1.5px; background: #fff; transition: transform .25s ease, top .25s ease; }
.menu-button span:first-child { top: 17px; }
.menu-button span:last-child { top: 25px; }
.menu-button[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button span { font-size: 18px; transition: transform .2s ease; }
.button:hover { transform: translateY(-3px); }
.button:hover span { transform: translate(2px, -2px); }
.button-small { min-height: 46px; padding: 0 18px; border-radius: 13px; font-size: 13px; }
.button-large { min-height: 64px; padding-inline: 30px; font-size: 16px; }
.button-primary { color: var(--ink); background: var(--lime); box-shadow: 0 12px 34px rgba(102, 239, 0, .26); }
.button-primary:hover { box-shadow: 0 18px 38px rgba(102, 239, 0, .34); }
.button-soft { color: var(--ink); background: transparent; border-color: var(--line); }
.button-soft:hover { background: rgba(255,255,255,.45); }
.button-ink { color: #fff; background: var(--ink); }
.button-ink:hover { box-shadow: 0 14px 32px rgba(25, 20, 38, .24); }
.button-lime { color: var(--ink); background: var(--lime); }

.hero {
  position: relative;
  min-height: 880px;
  padding: 168px 0 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(102,239,0,.22), transparent 23%),
    radial-gradient(circle at 83% 30%, rgba(150,69,237,.19), transparent 27%),
    linear-gradient(180deg, #faf7f0 0%, var(--paper) 84%);
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(25,20,38,.09) 0 .6px, transparent .8px 4px),
    repeating-radial-gradient(circle at 74% 68%, rgba(255,255,255,.55) 0 .7px, transparent .9px 5px);
  background-size: 9px 11px, 13px 15px;
  mix-blend-mode: multiply;
}
.hero-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero-copy { padding-bottom: 86px; }
.overline, .section-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(102,239,0,.17); }
.hero h1 { max-width: 650px; margin-bottom: 30px; font-size: clamp(58px, 6.2vw, 94px); font-weight: 800; }
.circled { position: relative; z-index: 0; white-space: nowrap; }
.circled::after { content: ""; position: absolute; z-index: -1; inset: 3% -6% -1% -5%; border: 3px solid var(--purple); border-radius: 50% 42% 48% 45%; transform: rotate(-3deg); }
.hero-intro { max-width: 610px; margin-bottom: 34px; color: var(--ink-soft); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: 0; margin-top: 40px; color: var(--ink-soft); font-size: 13px; }
.hero-proof span { padding: 0 18px; border-right: 1px solid var(--line); }
.hero-proof span:first-child { padding-left: 0; }
.hero-proof span:last-child { border: 0; }
.hero-proof strong { display: block; color: var(--ink); font: 800 16px/1.4 "Manrope", sans-serif; }

.hero-stage { --stage-rotate-x: 0deg; --stage-rotate-y: 0deg; min-height: 680px; position: relative; isolation: isolate; transform: perspective(1200px) rotateY(var(--stage-rotate-y)) rotateX(var(--stage-rotate-x)); transform-style: preserve-3d; transition: transform .18s ease-out; }
.hero-stage::before { content: ""; position: absolute; width: 530px; height: 530px; left: 50%; top: 18px; border-radius: 50%; background: var(--purple); opacity: .91; z-index: -2; transform: translateX(-50%); }
.hero-stage::after { content: ""; position: absolute; width: 185px; height: 185px; right: 18px; bottom: 30px; border-radius: 50%; background: var(--lime); z-index: -1; }
.stage-orbit { position: absolute; border: 1px solid rgba(25,20,38,.2); border-radius: 50%; z-index: -1; }
.orbit-one { width: 610px; height: 610px; right: -55px; top: -20px; }
.orbit-two { width: 660px; height: 360px; right: -110px; top: 120px; transform: rotate(-17deg); }
.phone { position: absolute; overflow: hidden; padding: 9px; background: #100c18; border: 1px solid rgba(255,255,255,.15); border-radius: 42px; box-shadow: 0 35px 90px rgba(31, 18, 53, .3); }
.phone > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 34px; }
.phone-speaker { position: absolute; z-index: 2; top: 16px; left: 50%; width: 82px; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #100c18; }
.hero-phone-wrap { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; }
.phone-hero { position: relative; width: 328px; height: 672px; top: 0; transform: rotate(2deg); }
.demo-profile { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 34px; color: #fff; background: #f7eaf0; font-family: "DM Sans", sans-serif; }
.demo-topbar { height: 48px; flex: 0 0 48px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; background: #fff8fb; }
.demo-liam .demo-topbar { background: #f5f1e4; }
.demo-topbar img { width: 70px; height: auto; }
.demo-topbar span { width: 21px; height: 21px; border-radius: 8px; background: var(--pink); }
.demo-liam .demo-topbar span { background: #21bd63; }
.demo-cover { height: 228px; flex: 0 0 228px; padding: 12px 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.demo-cover::before { content: ""; position: absolute; inset: 0; opacity: .6; background: radial-gradient(circle at 16% 22%, rgba(255,255,255,.2) 0 3px, transparent 4px), radial-gradient(circle at 82% 68%, rgba(255,255,255,.14) 0 5px, transparent 6px); background-size: 38px 41px, 57px 52px; }
.demo-mia .demo-cover { background: radial-gradient(circle at 18% 25%, #295e45 0 8%, transparent 9%), radial-gradient(circle at 76% 16%, #254f3e 0 11%, transparent 12%), radial-gradient(circle at 81% 82%, #3e1850 0 15%, transparent 16%), linear-gradient(145deg, #173a2c, #07120f 55%, #26102d); }
.demo-liam .demo-cover { background: radial-gradient(ellipse at 18% 26%, #737b78 0 7%, transparent 8%), radial-gradient(ellipse at 65% 18%, #555d5c 0 9%, transparent 10%), radial-gradient(ellipse at 40% 73%, #7a7770 0 8%, transparent 9%), radial-gradient(ellipse at 86% 70%, #3f4747 0 10%, transparent 11%), linear-gradient(155deg, #7f8c8c, #263132 55%, #17201f); background-size: 84px 62px, 96px 72px, 78px 65px, 110px 84px, auto; }
.demo-cover > * { position: relative; z-index: 1; }
.demo-avatar { width: 62px; height: 62px; margin-bottom: 5px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.92); border-radius: 21px; color: #fff; background: linear-gradient(145deg, var(--pink), var(--purple)); box-shadow: 0 8px 22px rgba(0,0,0,.28); font: 800 17px "Manrope", sans-serif; }
.demo-liam .demo-avatar { background: linear-gradient(145deg, #49d97f, #168d4a); }
.demo-cover > strong { margin-bottom: 2px; font: 800 21px/1.1 "Manrope", sans-serif; letter-spacing: -.04em; }
.demo-cover > b { font: 750 11px/1.3 "Manrope", sans-serif; }
.demo-cover > p { max-width: 235px; margin: 6px auto 4px; color: rgba(255,255,255,.82); font-size: 9px; line-height: 1.35; }
.demo-cover > small { color: rgba(255,255,255,.72); font-size: 8px; }
.demo-badges { margin-top: 7px; display: flex; justify-content: center; gap: 5px; }
.demo-badges span { padding: 4px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(15,8,25,.52); font-size: 7px; font-weight: 750; }
.demo-badges span:last-child { color: #21131a; background: #ffd56a; border-color: #ffd56a; }
.demo-body { flex: 1; min-height: 0; padding: 13px; display: flex; flex-direction: column; gap: 8px; color: #2b2030; background: #faedf3; }
.demo-liam .demo-body { color: #30322b; background: #f0eee2; }
.demo-identity { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; text-align: left; }
.demo-identity strong, .demo-identity small { display: block; }
.demo-identity strong { font: 800 12px "Manrope", sans-serif; }
.demo-identity small { color: #827486; font-size: 7px; }
.demo-identity i { padding: 5px 7px; border-radius: 999px; color: #167f46; background: rgba(35,190,100,.12); font-size: 6px; font-style: normal; font-weight: 800; white-space: nowrap; }
.demo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.demo-stats span { min-width: 0; min-height: 54px; padding: 8px 3px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(43,32,48,.11); border-radius: 12px; background: rgba(255,255,255,.34); }
.demo-stats strong, .demo-stats small { display: block; white-space: nowrap; }
.demo-stats strong { font: 800 13px "Manrope", sans-serif; }
.demo-stats small { margin-top: 1px; color: #837788; font-size: 6px; }
.demo-primary, .demo-secondary { min-height: 34px; display: grid; place-items: center; border-radius: 10px; font: 800 8px "Manrope", sans-serif; text-align: center; }
.demo-primary { color: #fff; background: linear-gradient(100deg, var(--pink), var(--purple)); }
.demo-liam .demo-primary { background: linear-gradient(100deg, #20bd62, #6578ef); }
.demo-secondary { border: 1px solid rgba(43,32,48,.13); background: rgba(255,255,255,.34); }
.demo-social { color: #827486; text-align: center; font-size: 7px; font-weight: 700; }
.demo-about { margin-top: 2px; padding: 10px; display: grid; gap: 4px; border: 1px solid rgba(43,32,48,.09); border-radius: 12px; text-align: left; background: rgba(255,255,255,.28); }
.demo-about small { color: #8f8093; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.demo-about strong { font: 750 9px "Manrope", sans-serif; }
.demo-about span { display: block; width: 100%; height: 4px; border-radius: 3px; background: rgba(43,32,48,.09); }
.demo-about span:last-child { width: 70%; }
.surface-card { position: absolute; z-index: 3; padding: 14px 17px; border: 1px solid rgba(25,20,38,.1); background: rgba(255,253,248,.93); border-radius: 17px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.search-float { top: 70px; left: 50%; width: 270px; margin-left: -330px; display: flex; align-items: center; gap: 10px; transform: rotate(-1deg); }
.search-glass { width: 15px; height: 15px; border: 2px solid var(--ink); border-radius: 50%; position: relative; flex: 0 0 auto; }
.search-glass::after { content: ""; position: absolute; width: 6px; height: 2px; right: -5px; bottom: -2px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-soft); }
.profile-float { left: 50%; bottom: 112px; margin-left: -314px; display: flex; align-items: center; gap: 10px; transform: rotate(1deg); }
.profile-initial { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--pink); font: 800 14px "Manrope", sans-serif; }
.profile-float strong, .profile-float small { display: block; white-space: nowrap; }
.profile-float strong { font: 750 12px "Manrope", sans-serif; }
.profile-float small { color: var(--ink-soft); font-size: 11px; }
.availability-dot { width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #2fcf63; }
.rating-float { left: 50%; top: 210px; margin-left: 158px; display: grid; min-width: 122px; text-align: center; transform: rotate(3deg); }
.rating-float strong { font: 800 28px "Manrope", sans-serif; line-height: 1; }
.rating-float span { color: #f7a900; font-size: 12px; letter-spacing: 1px; }
.rating-float small { color: var(--ink-soft); font-size: 10px; }
.scribble-note { position: absolute; z-index: 3; left: 50%; bottom: 38px; margin-left: 175px; font: 600 27px/1 "Caveat", cursive; transform: rotate(-7deg); }
.scribble-note::before { content: "↖"; display: block; margin-left: -22px; font: 28px/1 sans-serif; transform: rotate(-12deg); }

.neighbourhood-rail { position: relative; z-index: 5; width: 100%; overflow: hidden; color: #fff; background: var(--ink); border-block: 1px solid rgba(255,255,255,.08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rail-track { width: max-content; display: flex; animation: marquee 34s linear infinite; font: 700 13px "Manrope", sans-serif; letter-spacing: .025em; }
.rail-group { flex: 0 0 auto; display: flex; align-items: center; gap: 28px; padding: 16px 28px; }
.rail-group i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); }
.neighbourhood-rail:hover .rail-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-kicker { margin-bottom: 45px; color: var(--ink-soft); }
.section-kicker span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 10px; }
.manifesto-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 90px; align-items: end; margin-bottom: 70px; }
.manifesto-heading h2 { margin: 0; font-size: clamp(52px, 6vw, 82px); }
.manifesto-heading h2 span { color: var(--purple); }
.manifesto-heading p { max-width: 470px; margin: 0 0 9px; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.bento-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.bento { min-height: 380px; padding: 38px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.card-copy { position: relative; z-index: 2; max-width: 440px; }
.mini-label { margin-bottom: 13px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bento h3 { margin-bottom: 13px; font-size: clamp(28px, 3vw, 42px); }
.bento p:not(.mini-label) { color: var(--ink-soft); line-height: 1.6; }
.bento-map { min-height: 510px; background: var(--lime-soft); }
.bento-map .card-copy { max-width: 390px; }
.mini-map { position: absolute; right: -40px; bottom: -80px; width: 540px; height: 350px; border: 1px solid rgba(25,20,38,.13); border-radius: 48% 52% 0 0; background: #f8f6e8; transform: rotate(-5deg); overflow: hidden; }
.mini-map::before, .mini-map::after { content: ""; position: absolute; border-radius: 50%; background: rgba(204,238,255,.8); }
.mini-map::before { width: 180px; height: 120px; right: 30px; top: 15px; }
.mini-map::after { width: 120px; height: 200px; left: -30px; bottom: -30px; }
.road { position: absolute; z-index: 1; display: block; height: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(25,20,38,.05); border-radius: 12px; }
.road-a { width: 590px; left: -20px; top: 170px; transform: rotate(-12deg); }
.road-b { width: 390px; left: 120px; top: 70px; transform: rotate(58deg); }
.road-c { width: 330px; left: 60px; bottom: 35px; transform: rotate(28deg); }
.map-label { position: absolute; z-index: 2; color: #77736e; font-size: 10px; font-weight: 700; }
.label-a { left: 95px; top: 93px; }
.label-b { right: 80px; bottom: 74px; }
.map-pin { position: absolute; z-index: 3; width: 54px; height: 54px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50% 50% 50% 12px; color: #fff; background: var(--purple); box-shadow: 0 8px 20px rgba(25,20,38,.2); transform: rotate(-45deg); }
.map-pin b { font: 800 11px "Manrope", sans-serif; transform: rotate(45deg); }
.pin-a { left: 170px; top: 110px; }
.pin-b { right: 95px; top: 135px; background: var(--pink); }
.pin-c { left: 270px; bottom: 40px; background: var(--ink); }
.you-pin { position: absolute; z-index: 4; left: 242px; top: 170px; display: grid; width: 48px; height: 48px; place-items: center; border: 6px solid rgba(150,69,237,.2); border-radius: 50%; color: #fff; background: var(--purple); font-size: 9px; font-weight: 800; }
.bento-conversation { background: var(--sky); }
.message-stack { position: absolute; left: 38px; right: 38px; bottom: 32px; display: grid; gap: 9px; }
.bubble { max-width: 78%; padding: 12px 15px; border-radius: 17px; font-size: 12px; box-shadow: 0 8px 22px rgba(41,75,91,.08); }
.bubble-in { background: #fff; border-bottom-left-radius: 4px; }
.bubble-out { margin-left: auto; color: #fff; background: var(--purple); border-bottom-right-radius: 4px; }
.typing { width: 56px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; background: rgba(255,255,255,.65); }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-soft); animation: type 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .12s; }.typing i:nth-child(3) { animation-delay: .24s; }
@keyframes type { 50% { transform: translateY(-3px); opacity: .35; } }
.bento-proof, .bento-fair { min-height: 310px; }
.bento-proof { display: flex; align-items: flex-end; gap: 34px; background: var(--peach); }
.proof-mark { flex: 0 0 auto; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; color: #fff; background: var(--purple); font: 800 44px "Manrope", sans-serif; box-shadow: inset 0 0 0 13px rgba(255,255,255,.2); }
.bento-fair { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; color: #fff; background: var(--ink); }
.bento-fair p:not(.mini-label) { color: rgba(255,255,255,.65); }
.zero { font: 800 clamp(72px, 9vw, 126px)/.8 "Manrope", sans-serif; color: var(--lime); letter-spacing: -.08em; }
.zero sup { font-size: .35em; vertical-align: top; }

.how { color: #fff; background: var(--ink); }
.section-kicker-light { color: rgba(255,255,255,.55); }
.section-kicker-light span { color: var(--lime); border-color: rgba(255,255,255,.2); }
.how-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.how-title h2 { margin-bottom: 24px; font-size: clamp(46px, 5.5vw, 76px); }
.how-title em { color: var(--lime); font-style: normal; }
.how-title p { color: rgba(255,255,255,.55); font-size: 18px; }
.steps-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.steps-list li { min-height: 148px; padding: 29px 0; display: grid; grid-template-columns: 54px 1fr 48px; gap: 22px; align-items: start; border-bottom: 1px solid rgba(255,255,255,.16); transition: padding .25s ease, background .25s ease; }
.steps-list li:hover { padding-left: 16px; padding-right: 12px; background: rgba(255,255,255,.035); }
.step-number { color: var(--lime); font: 700 12px "Manrope", sans-serif; }
.steps-list h3 { margin-bottom: 9px; font-size: 26px; }
.steps-list p { margin: 0; color: rgba(255,255,255,.58); }
.step-arrow { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; font-size: 19px; transition: color .2s, background .2s, transform .2s; }
.steps-list li:hover .step-arrow { color: var(--ink); background: var(--lime); transform: rotate(-8deg); }

.profiles { background: #fbf8f2; }
.profile-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 104px; align-items: center; }
.profile-showcase { min-height: 730px; position: relative; }
.profile-showcase::before { content: ""; position: absolute; inset: 60px 10px 40px; border-radius: 46% 54% 44% 56%; background: var(--lime-soft); transform: rotate(-4deg); }
.colour-swatch { position: absolute; border-radius: 50%; }
.swatch-green { width: 125px; height: 125px; left: -25px; top: 30px; background: var(--lime); }
.swatch-pink { width: 160px; height: 160px; right: -10px; bottom: 22px; background: var(--pink); }
.profile-phone-pair { position: absolute; inset: 58px 0 24px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.phone-back, .phone-front { position: relative; width: 274px; height: 610px; flex: 0 0 274px; top: auto; left: auto; right: auto; }
.phone-back { transform: rotate(-4deg); }
.phone-front { z-index: 2; transform: rotate(4deg); }
.profile-caption { position: absolute; z-index: 5; font: 600 25px/1 "Caveat", cursive; }
.caption-one { top: 5px; left: 180px; transform: rotate(-5deg); }
.caption-one::after { content: "↙"; display: block; margin: 2px 0 0 2px; font: 22px sans-serif; }
.profile-copy h2 { max-width: 550px; margin-bottom: 25px; font-size: clamp(48px, 5.5vw, 74px); }
.profile-copy > p { max-width: 560px; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.tick-list { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tick-list li { display: grid; grid-template-columns: 38px 1fr; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tick-list li > span { grid-row: span 2; padding-top: 4px; color: var(--purple); font: 800 10px "Manrope", sans-serif; }
.tick-list strong { font: 800 16px "Manrope", sans-serif; }
.tick-list small { color: var(--ink-soft); font-size: 14px; }

.business { padding-top: 30px; background: #fbf8f2; }
.business-panel { min-height: 650px; display: grid; grid-template-columns: .86fr 1.14fr; gap: 70px; align-items: center; padding: 72px; border-radius: 52px; color: #fff; background: var(--purple); overflow: hidden; position: relative; }
.business-panel::before { content: ""; position: absolute; width: 420px; height: 420px; left: -120px; bottom: -230px; border-radius: 50%; background: rgba(102,239,0,.85); }
.business-copy { position: relative; z-index: 2; }
.business-copy h2 { margin-bottom: 24px; font-size: clamp(45px, 5vw, 68px); }
.business-copy > p { max-width: 490px; margin-bottom: 32px; color: rgba(255,255,255,.72); font-size: 18px; }
.business-board { align-self: stretch; padding: 30px; color: var(--ink); background: #fffdf8; border-radius: 30px; box-shadow: 0 36px 80px rgba(44,14,72,.28); transform: rotate(1.7deg); }
.board-top { display: flex; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.board-top span { color: var(--ink-soft); font-size: 12px; }
.board-top strong { font: 800 14px "Manrope", sans-serif; }
.board-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.board-stats > div { padding: 17px; border-radius: 17px; background: var(--paper); }
.board-stats span, .board-stats small { display: block; color: var(--ink-soft); font-size: 10px; }
.board-stats strong { display: inline-block; margin: 4px 8px 3px 0; font: 800 33px "Manrope", sans-serif; }
.board-stats .up { display: inline; color: #289f54; }
.board-bars { height: 172px; padding: 15px 15px 0; display: flex; align-items: end; justify-content: space-between; gap: 10px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 49px, rgba(25,20,38,.07) 50px); }
.board-bars i { width: 11%; height: var(--h); display: block; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--purple), #c78cff); transition: height .6s ease; }
.board-note { margin-top: 22px; padding: 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; }
.board-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--ink); font: 800 11px "Manrope", sans-serif; }
.board-note strong, .board-note small { display: block; }
.board-note strong { font: 750 11px "Manrope", sans-serif; }
.board-note small { color: var(--ink-soft); font-size: 10px; }
.board-note b { margin-left: auto; color: var(--purple); font-size: 9px; }

.principles { padding-bottom: 80px; }
.principles-intro { margin-bottom: 44px; color: var(--ink-soft); font: 600 24px "Caveat", cursive; }
.principle-row { min-height: 150px; display: grid; grid-template-columns: 70px 1.1fr .9fr; gap: 30px; align-items: center; border-top: 1px solid var(--line); }
.principle-row:last-child { border-bottom: 1px solid var(--line); }
.principle-row > span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; font-weight: 700; }
.principle-row h3 { margin: 0; font-size: clamp(31px, 4vw, 53px); transition: color .2s, transform .2s; }
.principle-row p { max-width: 430px; margin: 0; color: var(--ink-soft); font-size: 16px; }
.principle-row:hover h3 { color: var(--purple); transform: translateX(7px); }

.faq { background: var(--paper-deep); }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 110px; }
.faq-title { position: sticky; top: 115px; align-self: start; }
.faq-title h2 { margin-bottom: 22px; font-size: clamp(45px, 5vw, 68px); }
.faq-title p { color: var(--ink-soft); }
.faq-title a { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 4px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font: 750 18px "Manrope", sans-serif; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; }
.faq-list summary span::before, .faq-list summary span::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; height: 1px; background: var(--ink); transition: transform .2s; }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 650px; padding: 0 50px 28px 0; color: var(--ink-soft); line-height: 1.65; }

.final-cta { padding: 120px 0 130px; text-align: center; background: var(--lime); overflow: hidden; position: relative; }
.final-cta::before, .final-cta::after { content: ""; position: absolute; border: 2px solid var(--ink); border-radius: 50%; opacity: .17; }
.final-cta::before { width: 430px; height: 430px; left: -210px; top: -190px; }
.final-cta::after { width: 530px; height: 280px; right: -220px; bottom: -170px; transform: rotate(-20deg); }
.hand-note { margin-bottom: 22px; font: 600 29px "Caveat", cursive; transform: rotate(-3deg); }
.final-cta h2 { max-width: 900px; margin: 0 auto 20px; font-size: clamp(54px, 7vw, 98px); }
.final-cta .container > p:not(.hand-note) { margin-bottom: 35px; font-size: 20px; }
.final-actions { display: flex; justify-content: center; align-items: center; gap: 30px; }
.plain-arrow { font-weight: 800; }
.plain-arrow span { display: inline-block; margin-left: 7px; transition: transform .2s; }
.plain-arrow:hover span { transform: translateX(5px); }

footer { padding: 80px 0 28px; color: #fff; background: var(--ink); }
.footer-top { min-height: 200px; display: flex; justify-content: space-between; gap: 60px; }
.footer-brand img { width: 150px; margin-bottom: 23px; }
.footer-brand p { color: rgba(255,255,255,.62); font: 700 23px/1.2 "Manrope", sans-serif; }
.footer-links { display: flex; gap: 100px; }
.footer-links div { min-width: 120px; display: flex; flex-direction: column; gap: 12px; }
.footer-links span { margin-bottom: 5px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a { color: rgba(255,255,255,.8); font-size: 14px; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.42); font-size: 12px; }
.footer-bottom a { color: var(--lime); }

.reveal { opacity: 1; transform: none; }
.has-js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero h1 { font-size: clamp(56px, 7.2vw, 78px); }
  .hero-stage { transform: scale(.88) perspective(1200px) rotateY(var(--stage-rotate-y)) rotateX(var(--stage-rotate-x)); transform-origin: center; }
  .nav-links { gap: 20px; }
  .profile-layout { gap: 54px; }
  .profile-showcase { transform: scale(.9); transform-origin: center; }
  .business-panel { padding: 54px; gap: 40px; }
}

@media (max-width: 860px) {
  :root { --container: min(100% - 36px, 700px); }
  .section { padding: 96px 0; }
  .text-link, .nav-actions .button { display: none; }
  .menu-button { display: block; }
  .nav-links { position: fixed; top: 92px; left: 16px; right: 16px; height: calc(100dvh - 108px); padding: 40px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; visibility: hidden; opacity: 0; transform: translateY(-12px); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
  .nav-links.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav-links a { width: 100%; padding: 19px 4px; border-bottom: 1px solid var(--line); font: 800 26px "Manrope", sans-serif; }
  .hero { padding-top: 146px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 10px; }
  .hero h1 { max-width: 710px; }
  .hero-stage { min-height: 680px; transform: scale(.9) perspective(1200px) rotateY(var(--stage-rotate-y)) rotateX(var(--stage-rotate-x)); transform-origin: center top; }
  .neighbourhood-rail { margin-top: -34px; }
  .manifesto-heading { grid-template-columns: 1fr; gap: 30px; }
  .bento-grid { grid-template-columns: 1fr; }
  .how-layout, .profile-layout, .business-panel, .faq-layout { grid-template-columns: 1fr; }
  .how-layout { gap: 50px; }
  .profile-showcase { max-width: 610px; width: 100%; margin: 0 auto -30px; transform: none; }
  .business-panel { padding: 48px; }
  .business-copy { max-width: 620px; }
  .principle-row { grid-template-columns: 55px 1fr; padding: 25px 0; }
  .principle-row p { grid-column: 2; padding-bottom: 16px; }
  .faq-layout { gap: 50px; }
  .faq-title { position: static; }
}

@media (max-width: 600px) {
  :root { --container: calc(100% - 32px); }
  .site-nav { top: 10px; }
  .nav-shell { width: calc(100% - 20px); height: 60px; border-radius: 17px; }
  .brand img { width: 102px; }
  .nav-links { top: 80px; left: 10px; right: 10px; height: calc(100dvh - 90px); }
  .hero { min-height: 0; padding-top: 124px; }
  .hero h1 { margin-bottom: 24px; font-size: clamp(48px, 14vw, 66px); }
  .hero-intro { font-size: 17px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hero-proof span { padding: 0 10px; font-size: 10px; }
  .hero-proof strong { font-size: 13px; }
  .hero-stage { min-height: 600px; left: 50%; width: 520px; margin-left: -260px; transform: scale(.73) perspective(1200px) rotateY(var(--stage-rotate-y)) rotateX(var(--stage-rotate-x)); }
  .neighbourhood-rail { margin-top: -166px; }
  .section { padding: 80px 0; }
  .section-kicker { margin-bottom: 30px; }
  .manifesto-heading { margin-bottom: 42px; }
  .manifesto-heading h2 { font-size: 48px; }
  .manifesto-heading p { font-size: 16px; }
  .bento { min-height: 360px; padding: 27px; border-radius: 28px; }
  .bento-map { min-height: 500px; }
  .mini-map { right: -125px; }
  .bento-proof, .bento-fair { min-height: 300px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .proof-mark { width: 72px; height: 72px; font-size: 30px; }
  .bento-fair { flex-direction: column-reverse; }
  .how-title h2 { font-size: 48px; }
  .steps-list li { grid-template-columns: 36px 1fr; }
  .step-arrow { display: none; }
  .steps-list h3 { font-size: 22px; }
  .profile-showcase { min-height: 590px; width: 480px; left: 50%; margin-left: -240px; transform: scale(.76); transform-origin: center top; }
  .profile-copy { margin-top: -130px; }
  .profile-copy h2 { font-size: 48px; }
  .business { padding-top: 0; }
  .business .container { width: 100%; }
  .business-panel { padding: 50px 24px 24px; border-radius: 0; gap: 48px; }
  .business-copy h2 { font-size: 46px; }
  .business-board { padding: 20px; transform: none; }
  .board-note { align-items: flex-start; }
  .board-note b { display: none; }
  .principle-row { grid-template-columns: 42px 1fr; gap: 12px; }
  .principle-row h3 { font-size: 32px; }
  .principle-row p { font-size: 14px; }
  .faq-list summary { font-size: 16px; }
  .final-cta { padding: 88px 0 96px; }
  .final-cta h2 { font-size: 50px; }
  .final-actions { flex-direction: column; }
  .footer-top { flex-direction: column; }
  .footer-links { gap: 56px; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .has-js .reveal { opacity: 1; transform: none; }
  .rail-track { animation: none; }
  .rail-group[aria-hidden="true"] { display: none; }
}