/* Momnt case study, part 1: tokens, hero, brief and the swipe stack.
   Part 2 (case-momnt-2.css): admin panel, team tools, results chat, responsive.
   Shared pieces: case-study.css, case-contact.css.
   The member journey, Moments flow and admin rows live in case-momnt-3.css. */

:root {
  --accent: #ff6a13;
  --mo-black: #170703;
  --mo-night: #0f0402;
  --mo-brown: #2b1b13;
  --mo-copper: #ab511b;
  --mo-amber: #f2a65a;
  --mo-cream: #fff6ef;
  --mo-text: rgb(255 244 236 / 74%);
  --mo-line: rgb(255 214 190 / 14%);
  --cs-ink: #1e120c;
  --cs-muted: #5a4a40;
  --cs-faint: #8b7a70;
  --cs-line: rgb(30 18 12 / 12%);
  --cs-bg: #fbf6f2;
  --cs-dark: var(--mo-black);
  --cs-dot-dark: var(--accent);
  --cf-dots: rgb(30 18 12 / 9%);
  --cf-glow: rgb(255 106 19 / 16%);
  --cf-btn: #1e120c;
  --cf-btn-icon: #ff6a13;
  --cf-btn-icon-fg: #1e120c;
  --cf-sent: #1e120c;
  --cf-sent-fg: #ff6a13;
}

a:hover { color: var(--accent); }
.mo-hero, .mo-two, .mo-admin, .mo-out { color: var(--mo-cream); }
.mo-hero .cs-kicker, .mo-two .cs-kicker { color: rgb(255 244 236 / 60%); }

/* ---------- hero: copy, centred phone, meta ---------- */
.mo-hero { position: relative; overflow: hidden; padding: clamp(128px, 11vw, 168px) var(--gutter) clamp(56px, 6vw, 96px); background: var(--mo-black); }
.mo-hero__glow { position: absolute; inset: 0; background: radial-gradient(42% 52% at 50% 46%, rgb(255 106 19 / 34%), transparent 70%), linear-gradient(115deg, transparent 30%, rgb(255 106 19 / 10%) 31%, transparent 42%), linear-gradient(115deg, transparent 58%, rgb(242 166 90 / 8%) 59%, transparent 66%); pointer-events: none; }
.mo-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, .8fr); gap: 40px; align-items: end; }
.mo-hero__copy { display: grid; gap: 24px; align-self: center; }
.mo-mark { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--mo-cream); }
.mo-mark__logo { display: block; width: auto; height: 22px; }
.mo-mark__wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.mo-mark__wave i { width: 3px; border-radius: 3px; background: var(--accent); animation: mo-wave 1.4s ease-in-out infinite; }
.mo-mark__wave i:nth-child(1), .mo-mark__wave i:nth-child(5) { height: 8px; }
.mo-mark__wave i:nth-child(2), .mo-mark__wave i:nth-child(4) { height: 15px; animation-delay: .2s; }
.mo-mark__wave i:nth-child(3) { height: 22px; animation-delay: .4s; }
.mo-hero__title { font-weight: 600; font-size: clamp(36px, 3.7vw, 62px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.mo-hero__lead { max-width: 440px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--mo-text); }
.mo-hero__phone { margin: 0; }
.mo-hero__phone img { display: block; width: 100%; height: auto; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent); mask-composite: intersect; }
.mo-hero__meta { display: grid; gap: 0; margin: 0; padding-bottom: 12px; }
.mo-hero__meta > div { padding: 16px 0; border-top: 1px solid var(--mo-line); }
.mo-hero__meta dt { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-amber); }
.mo-hero__meta dd { margin: 0; font-size: 15px; line-height: 1.45; }
@keyframes mo-wave { 50% { transform: scaleY(.45); } }

/* ---------- brief: one product, two sides ---------- */
.mo-two { background: linear-gradient(180deg, var(--mo-black), #241008 60%, var(--mo-black)); }
.mo-two__head { display: grid; justify-items: center; gap: 18px; max-width: 820px; margin: 0 auto; text-align: center; }
.mo-two__head .cs-kicker { margin: 0; }
.mo-two__lead { max-width: 680px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--mo-text); }
.mo-two__shot { margin: clamp(40px, 5vw, 64px) 0 0; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 106 19 / 30%), 0 40px 120px -40px rgb(255 106 19 / 45%); }
.mo-two__shot img { display: block; width: 100%; height: auto; }
.mo-two__sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 48px; }
.mo-two__sides > div { display: grid; gap: 10px; }
.mo-two__sides > div:last-child { text-align: right; justify-items: end; }
.mo-two__sides p { max-width: 440px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--mo-text); }
.mo-two__sides .mo-two__tag { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--mo-cream); }
.mo-two__heart { width: 56px; height: 56px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23170703'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.4 2.9 4.5 6.6 4.5c2.1 0 3.6 1.2 4.4 2.6.8-1.4 2.3-2.6 4.4-2.6 3.7 0 5.7 3.9 4.2 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 0 0 10px rgb(255 106 19 / 14%), 0 0 40px rgb(255 106 19 / 60%); }

/* ---------- signature: the swipe stack ---------- */

/* The two buttons breathe: a halo that swells and settles, out of step with each other. */

/* Live stack (JS on): every card shares one cell; --d is its depth below the top card. */