/* Mè — Design & Investment Proposal, cinematic scroll site
   Tokens sourced directly from design/DESIGN-SPEC.md (Glow dark mode + accents). */

@font-face { font-display: swap; }

:root{
  --night: #050506;
  --night-2: #101013;
  --night-3: #16161a;
  --ink: #F3F1EE;
  --muted: #8C8A86;
  --muted-2: #6B6863;
  --hairline: rgba(255,255,255,0.14);
  --hairline-strong: rgba(255,255,255,0.24);
  --glass-bg: rgba(255,255,255,0.055);
  --glass-bg-2: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.14);
  --warm-light: #E9A47A;
  --warm-deep: #D97A55;
  --cool-light: #9DB4C8;
  --voice: #8B7CF6;
  --bubble-teal: #7DD3C0;
  --bubble-pink: #F5A3B3;
  --bubble-amber: #F6C177;
  --bubble-lilac: #B9A7F5;
  --font-display: 'Onest', -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing: border-box; }
html{ background: var(--night); }
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto; }

body{
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--warm-light); color: var(--night); }

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

/* film grain, very subtle, cheap texture over the whole page */
.grain{
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- signature instrument: the dot + line scroll rail ---------- */
.rail{
  position: fixed; top: 0; right: 40px; bottom: 0; width: 1px; z-index: 50;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--hairline) 6%, var(--hairline) 94%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.rail-dot{
  position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--warm-light);
  box-shadow: 0 0 0 6px rgba(233,164,122,0.14);
}
@media (max-width: 860px){ .rail{ display: none; } }

/* ---------- top nav ---------- */
.topnav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 56px; pointer-events: none;
}
.topnav .brand{ display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.topnav .brand svg{ width: 26px; height: 26px; }
.topnav .brand span{ font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.topnav .meta{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); pointer-events: auto; }

/* ---------- layout primitives ---------- */
.sec{
  position: relative;
  min-height: 100vh;
  padding: 180px 9vw 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  overflow: hidden;
}
.sec-inner{ max-width: 1360px; width: 100%; margin: 0 auto; }
.eyebrow{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-light); display: flex; align-items: center; gap: 12px;
}
.eyebrow::before{ content: ""; width: 22px; height: 1px; background: var(--warm-light); }

h1,h2,h3,p{ margin: 0; }

.headline{ font-size: clamp(44px, 6.4vw, 104px); line-height: 1.04; letter-spacing: -0.01em; }
.headline .l1{ font-weight: 300; display: block; }
.headline .l2{ font-weight: 500; display: block; }

.lede{ font-size: clamp(18px, 1.7vw, 24px); line-height: 1.55; color: var(--muted); max-width: 760px; font-weight: 300; }

.reveal{ opacity: 0; transform: translateY(28px); }

/* ---------- glass ---------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
}
.glass-strong{ background: var(--glass-bg-2); }
.chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 400;
  background: rgba(255,255,255,0.12); color: var(--ink);
}
.pill-btn{
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 12px 20px 28px; border-radius: 999px;
  background: var(--glass-bg-2); border: 1px solid var(--glass-border);
  font-size: 17px; color: var(--ink); width: fit-content;
}
.pill-btn .arrow{
  width: 40px; height: 40px; border-radius: 50%; background: var(--warm-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pill-btn .arrow svg{ width: 16px; height: 16px; }

/* ---------- dot + line device ---------- */
.dot-line{ display: flex; flex-direction: column; align-items: center; gap: 0; }
.dot-line .dot{
  width: 12px; height: 12px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08);
}
.dot-line .line{ width: 1px; height: 90px; background: linear-gradient(to bottom, var(--hairline-strong), transparent); }

/* ---------- ring gauge ---------- */
.ring{
  width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.32);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; flex-shrink: 0;
}
.ring .v{ font-size: 26px; font-weight: 300; }
.ring .l{ font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ================= HERO ================= */
.hero{ padding-top: 0; justify-content: flex-end; padding-bottom: 120px; }
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.08); will-change: transform; }
.hero-media .scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,6,0.55) 0%, rgba(5,5,6,0.15) 30%, rgba(5,5,6,0.25) 62%, rgba(5,5,6,0.94) 100%),
    linear-gradient(90deg, rgba(5,5,6,0.5) 0%, rgba(5,5,6,0) 40%);
}
.hero-content{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 36px; }
.hero-tag{ font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,241,238,0.7); }
.hero .headline{ color: var(--ink); }
.hero-meta{ display: flex; gap: 40px; flex-wrap: wrap; }
.hero-meta .item{ display: flex; flex-direction: column; gap: 6px; }
.hero-meta .item .k{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hero-meta .item .val{ font-size: 17px; color: var(--ink); }
.scroll-cue{ position: absolute; bottom: 48px; left: 9vw; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1; }
.scroll-cue .line{ width: 1px; height: 46px; background: linear-gradient(to bottom, var(--hairline-strong), transparent); }
.scroll-cue span{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ================= IDEA ================= */
.idea-grid{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.idea-grid .lede{ max-width: none; font-size: clamp(20px, 2vw, 26px); color: var(--ink); font-weight: 300; }
.who-card{ padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.who-card .t{ font-size: 20px; font-weight: 500; color: var(--warm-light); }
.who-card p{ font-size: 17px; line-height: 1.6; color: var(--muted); font-weight: 300; }
.brief-quote{ margin-top: 24px; padding: 48px; display: flex; flex-direction: column; gap: 18px; }
.brief-quote p{ font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; font-weight: 300; font-style: italic; color: var(--ink); }

/* ================= PHASE 1 ================= */
.phase-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.price-badge{ display: flex; align-items: center; gap: 20px; }
.price-badge .amt{ font-size: 40px; font-weight: 300; }
.price-badge .status{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-light); padding: 8px 16px; border: 1px solid var(--hairline-strong); border-radius: 999px; }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.list-block{ display: flex; flex-direction: column; gap: 20px; }
.list-block .h{ font-size: 15px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.list-block.dim .h{ color: var(--muted-2); }
.list-row{ display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; }
.list-row svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.list-row p{ font-size: 17px; line-height: 1.5; color: var(--ink); font-weight: 300; }
.list-block.dim .list-row p{ color: var(--muted); }
.list-block.dim .list-row svg{ opacity: 0.55; }

/* ================= PROOF ================= */
.proof-row{ display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.phone{ display: flex; flex-direction: column; align-items: center; gap: 20px; }
.phone-frame{
  width: 216px; height: 468px; border-radius: 34px; overflow: hidden;
  border: 6px solid #1c1b1a; box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.phone-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.phone .cap{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.proof-note{ text-align: center; font-size: 15px; color: var(--muted-2); max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ================= BRIDGE ================= */
.bridge{ align-items: center; text-align: center; background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.05) 0%, transparent 55%); }
.bridge .headline{ max-width: 1180px; }
.bridge .lede{ max-width: 880px; margin: 0 auto; }

/* ================= PHASE 2 ================= */
.pillars{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pillar{ padding: 32px 26px; display: flex; flex-direction: column; gap: 18px; }
.pillar svg{ width: 30px; height: 30px; color: var(--warm-light); }
.pillar .t{ font-size: 19px; font-weight: 500; color: var(--ink); }
.pillar p{ font-size: 15px; line-height: 1.5; color: var(--muted); font-weight: 300; }
.trust{ padding: 36px 44px; display: flex; flex-direction: column; gap: 16px; }
.trust-row{ display: flex; align-items: center; gap: 20px; }
.trust-row svg{ width: 28px; height: 28px; color: var(--warm-light); flex-shrink: 0; }
.trust p{ font-size: 18px; line-height: 1.5; color: var(--ink); font-weight: 300; }
.trust .ref{ padding-left: 48px; font-size: 15px; color: var(--muted); }
.trust .ref a{ color: var(--warm-light); border-bottom: 1px solid rgba(233,164,122,0.4); }

/* ================= INVESTMENT ================= */
.phases{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; position: relative; }
.phase-card{ padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.phase-card .node{ width: 12px; height: 12px; border-radius: 50%; background: var(--hairline-strong); margin-bottom: 8px; }
.phase-card.proposed .node{ background: var(--warm-light); }
.phase-card .t{ font-size: 22px; font-weight: 500; }
.phase-card .desc{ font-size: 16px; line-height: 1.55; color: var(--muted); font-weight: 300; }
.phase-card .price{ font-size: 44px; font-weight: 300; margin-top: 8px; }
.phase-card .status{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.phase-card.proposed .status{ color: var(--warm-light); }
.compare-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-card{ padding: 30px 34px; display: flex; flex-direction: column; gap: 12px; }
.compare-card .h{ font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.compare-card p{ font-size: 19px; line-height: 1.5; color: var(--ink); font-weight: 300; }
.compare-card.terms{ background: var(--glass-bg-2); }
.compare-card.terms .h{ color: var(--warm-light); }
.compare-card b{ font-weight: 500; }
.excl-note{ font-size: 15px; color: var(--muted-2); }

/* ================= NEXT STEPS ================= */
.steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step{ display: flex; flex-direction: column; gap: 16px; }
.step .num{ font-size: clamp(48px, 5vw, 72px); font-weight: 300; color: var(--warm-light); font-family: var(--font-mono); }
.step p{ font-size: 19px; line-height: 1.4; color: var(--ink); font-weight: 300; }
.cta-row{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; margin-top: 24px; }

footer{
  padding: 64px 9vw 56px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 13px; color: var(--muted-2);
  letter-spacing: 0.04em;
}

@media (max-width: 1100px){
  .idea-grid{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: repeat(2, 1fr); }
  .two-col{ grid-template-columns: 1fr; }
  .phases{ grid-template-columns: 1fr; }
  .compare-row{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .sec{ padding: 140px 7vw 100px; }
  .topnav{ padding: 20px 24px; }
  .pillars{ grid-template-columns: 1fr; }
  .proof-row{ gap: 24px; }
  .phone-frame{ width: 168px; height: 364px; }
}