/* ==========================================================================
   MH Prime — styles v3  ·  "CRM style" — modern SaaS/admin design language
   Mirrors the MH Prime CRM: Inter · navy brand scale #2c4c80 + gold #b08d57 ·
   cool slate gradient backdrop · white rounded-2xl cards w/ soft shadows ·
   KPI tiles · pills · gradient bars. Card-based, active, product-feel.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Brand navy scale (from the CRM's resources/brand-theme.js) */
  --brand-50:#f3f6fb; --brand-100:#e4ebf5; --brand-200:#c4d3e8; --brand-300:#93aed3;
  --brand-400:#5c82b6; --brand-500:#3a619b; --brand-600:#2c4c80; --brand-700:#243d67;
  --brand-800:#1f3253; --brand-900:#152238; --brand-950:#0d1626;
  --gold:#b08d57; --gold-600:#9a7a49;

  /* Slate neutrals */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;

  /* Semantic accents (KPI tiles / pills) */
  --emerald-50:#ecfdf5; --emerald-600:#059669; --emerald-700:#047857;
  --amber-50:#fffbeb;  --amber-600:#d97706;  --amber-700:#b45309;
  --rose-50:#fff1f2;   --rose-500:#f43f5e;   --rose-600:#e11d48;  --rose-700:#be123c;
  --violet-50:#f5f3ff; --violet-600:#7c3aed; --violet-700:#6d28d9;
  --sky-50:#f0f9ff;    --sky-600:#0284c7;    --sky-700:#0369a1;

  --font-sans:"Inter","Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Scale */
  --fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 2vw, 2.9rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1rem;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 2rem);
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* Radii (Tailwind xl/2xl) */
  --r-2xl: 1rem; --r-xl: .75rem; --r-lg: .625rem; --r-sm: .5rem; --r-pill: 999px;

  /* Shadows (from the CRM) */
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 30px rgba(15,23,42,.06);
  --shadow-soft: 0 1px 3px rgba(15,23,42,.06);
  --shadow-lift: 0 1px 2px rgba(15,23,42,.05), 0 18px 40px -18px rgba(15,23,42,.18);
  --shadow-float: 0 30px 70px -28px rgba(21,34,56,.35);

  /* Motion — snappy, app-like */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms; --dur: 250ms; --dur-slow: 550ms;
}

/* -------------------------------------------------------------------- BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0; color: var(--slate-900);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  /* CRM .app-bg — cool slate gradient */
  background:
    radial-gradient(1200px 520px at 12% -8%, #dfe6f2 0%, rgba(223,230,242,0) 60%),
    radial-gradient(1000px 460px at 88% -12%, #e8edf5 0%, rgba(232,237,245,0) 55%),
    linear-gradient(180deg, #eef1f7 0%, #f5f7fb 40%, #f4f6fa 100%);
  background-attachment: fixed;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-200); border-radius: 6px; }
::selection { background: var(--brand-100); color: var(--brand-800); }

.skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -100px; z-index: 200;
  background: var(--brand-900); color: #fff; padding: .6rem 1rem; border-radius: var(--r-lg); font-weight: 600; font-size: .85rem;
  transition: inset-block-start var(--dur-fast) var(--ease); }
.skip-link:focus { inset-block-start: 1rem; }

/* --------------------------------------------------------------------- TYPE */
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--slate-900); letter-spacing: -.02em; line-height: 1.1; }
.display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--slate-500); font-weight: 400; }
.eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); margin: 0 0 1.25rem; }
.eyebrow .dot { inline-size: 22px; block-size: 1px; border-radius: 0; background: var(--gold); }
.text-gold { color: var(--gold); }
.text-brand { color: var(--brand-600); }
strong { font-weight: 700; color: var(--slate-900); }

/* ------------------------------------------------------------------ LAYOUT */
.container { inline-size: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section__head { max-inline-size: 60ch; margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { margin-inline: auto; }
.section__head .lead { margin-block-start: 1rem; }

/* Buttons (CRM .btn) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  font-family: inherit; font-weight: 600; font-size: .9375rem; line-height: 1; border-radius: var(--r-xl);
  padding: .8rem 1.25rem; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.btn svg { inline-size: 1.15em; block-size: 1.15em; }
.btn--primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--brand-700); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn--ghost { background: #fff; color: var(--slate-700); border-color: var(--slate-200); }
.btn--ghost:hover { background: var(--slate-50); border-color: var(--slate-300); transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: #241a08; }
.btn--gold:hover { background: var(--gold-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn--wa { background: #1FA855; color: #fff; }
.btn--wa:hover { background: #18904a; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn--lg { padding: .95rem 1.5rem; font-size: 1rem; }
.btn--block { inline-size: 100%; }

/* Pills (CRM .pill) */
.pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: var(--r-pill); padding: .2rem .6rem; font-size: .6875rem; font-weight: 700; }
.pill-navy { background: var(--brand-50); color: var(--brand-700); }
.pill-green { background: var(--emerald-50); color: var(--emerald-700); }
.pill-amber { background: var(--amber-50); color: var(--amber-700); }
.pill-rose { background: var(--rose-50); color: var(--rose-700); }
.pill-violet { background: var(--violet-50); color: var(--violet-700); }
.pill-sky { background: var(--sky-50); color: var(--sky-700); }

/* Card (CRM .v2card) */
.card { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); }
.card-pad { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }

/* Icon chip (KPI/feature) */
.chip { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--r-xl); flex: none; }
.chip svg { inline-size: 22px; block-size: 22px; stroke-width: 2; }
.chip-navy { background: var(--brand-50); color: var(--brand-600); }
.chip-green { background: var(--emerald-50); color: var(--emerald-600); }
.chip-amber { background: var(--amber-50); color: var(--amber-600); }
.chip-violet { background: var(--violet-50); color: var(--violet-600); }
.chip-sky { background: var(--sky-50); color: var(--sky-600); }
.chip-gold { background: #f6efe4; color: var(--gold-600); }

/* ----------------------------------------------------------------- HEADER */
.header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border-block-end: 1px solid transparent; }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; block-size: 68px; }
.header.is-solid { background: rgba(255,255,255,.85); backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px); border-block-end-color: var(--slate-200); box-shadow: var(--shadow-soft); }
.brand img { block-size: 30px; inline-size: auto; }
.nav { display: flex; align-items: center; gap: clamp(.75rem, .4rem + 1.2vw, 1.9rem); }
.nav__links { display: flex; gap: clamp(.75rem, .4rem + 1.2vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: .875rem; font-weight: 500; color: var(--slate-600); padding-block: .3rem; transition: color var(--dur-fast); }
.nav__links a:hover { color: var(--brand-600); }
.header__tools { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; }

/* Header over the DARK hero (transparent state) → light chrome */
.brand .logo-light { display: none; }
.header:not(.is-solid) .nav__links a { color: rgba(255,255,255,.82); }
.header:not(.is-solid) .nav__links a:hover { color: #fff; }
.header:not(.is-solid) .brand .logo-dark { display: none; }
.header:not(.is-solid) .brand .logo-light { display: block; }
.header:not(.is-solid) .btn--nav { background: #fff; color: var(--brand-700); }
.header:not(.is-solid) .btn--nav:hover { background: var(--slate-100); }
.header:not(.is-solid) .nav-toggle { color: #fff; border-color: rgba(255,255,255,.32); }

/* ------------------------------------------------------------------- HERO */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(6.5rem, 5.5rem + 5vw, 9rem) clamp(2.75rem, 2rem + 2.5vw, 4rem);
  background: linear-gradient(115deg, #0B0E13 0%, #0F2E4E 60%, #18487B 130%);
}
/* subtle grid overlay, masked toward the illustration */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 80% 30%, black, transparent 70%);
          mask-image: radial-gradient(circle at 80% 30%, black, transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
/* hero foreground reads on the dark ground */
.hero__title { color: #fff; }
.hero__title .hl { color: #dcc194; }
.hero .eyebrow { color: #dcc194; }
.hero .eyebrow .dot { background: #dcc194; }
.hero__sub { color: rgba(255,255,255,.74); }
.hero__trust { color: rgba(255,255,255,.72); }
.hero .btn--primary { background: #fff; color: var(--brand-700); }
.hero .btn--primary:hover { background: var(--slate-100); color: var(--brand-800); }
.hero .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.hero__title { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; max-inline-size: 15ch; }
.hero__title .hl { color: var(--brand-600); position: relative; white-space: nowrap; }
.hero__title .hl::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: .06em; block-size: .12em; border-radius: 3px; background: linear-gradient(90deg, var(--gold), #d8bd8f); }
.hero__sub { max-inline-size: 46ch; margin-block: 1.4rem 2rem; color: var(--slate-500); font-size: var(--fs-lead); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-block-start: 2rem; color: var(--slate-500); font-size: .82rem; }
.hero__trust .i { display: inline-flex; align-items: center; gap: .4rem; }
.hero__trust svg { inline-size: 1rem; block-size: 1rem; color: #dcc194; }

/* ---- Hero animated FX (ported from the React hero) ---------------------- */
.hero__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero .hero__fx { z-index: 0; }                 /* sit behind content (beats .hero > * { z-index:1 }) */
.hero .hero__ripples { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.hero__grid { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.grid-line { stroke: var(--gold, #b08d57); stroke-width: .5; stroke-dasharray: 5 5; opacity: .14; }
.detail-dot { fill: #dcc194; opacity: .3; }

/* corner brackets */
.hero__corner { position: absolute; inline-size: 34px; block-size: 34px; border: 1px solid rgba(176,141,87,.28); }
.hero__corner::before { content: ""; position: absolute; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #dcc194; opacity: .5; }
.hero__corner--tl { inset-block-start: 1.1rem; inset-inline-start: 1.1rem; }
.hero__corner--tr { inset-block-start: 1.1rem; inset-inline-end: 1.1rem; }
.hero__corner--bl { inset-block-end: 1.1rem; inset-inline-start: 1.1rem; }
.hero__corner--br { inset-block-end: 1.1rem; inset-inline-end: 1.1rem; }
.hero__corner--tl::before { inset-block-start: -3px; inset-inline-start: -3px; }
.hero__corner--tr::before { inset-block-start: -3px; inset-inline-end: -3px; }
.hero__corner--bl::before { inset-block-end: -3px; inset-inline-start: -3px; }
.hero__corner--br::before { inset-block-end: -3px; inset-inline-end: -3px; }
@media (min-width: 768px) {
  .hero__corner--tl { inset-block-start: 2rem; inset-inline-start: 2rem; }
  .hero__corner--tr { inset-block-start: 2rem; inset-inline-end: 2rem; }
  .hero__corner--bl { inset-block-end: 2rem; inset-inline-start: 2rem; }
  .hero__corner--br { inset-block-end: 2rem; inset-inline-end: 2rem; }
}

/* floating particles */
.hero__float { position: absolute; inline-size: 3px; block-size: 3px; border-radius: 50%; background: #dcc194; opacity: .3; }

/* mouse-follow gold glow */
.hero__glow {
  position: absolute; inline-size: 22rem; block-size: 22rem; border-radius: 9999px;
  transform: translate(-50%, -50%); opacity: 0; will-change: left, top, opacity;
  background: radial-gradient(circle, rgba(176,141,87,.16), rgba(176,141,87,.06), transparent 70%);
  filter: blur(38px); transition: opacity 300ms var(--ease-out, ease-out);
}

/* click ripple */
.ripple-effect { position: absolute; inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(220,193,148,.55); transform: translate(-50%, -50%); animation: ripple-pop 1s var(--ease-out, ease-out) forwards; }

/* headline word-by-word reveal */
.hero__title .word-animate { display: inline-block; transition: color .3s ease, transform .3s ease; }
.hero__title .word-animate:hover { color: #dcc194; }
/* highlight word reads gold on the dark hero (wins over the base .hl navy) */
.hero__title .hl { color: #dcc194; }

/* keyframes for the hero FX */
@keyframes word-appear { 0% { opacity: 0; transform: translateY(28px) scale(.86); filter: blur(8px); } 55% { opacity: .85; transform: translateY(8px) scale(.97); filter: blur(1.5px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes grid-draw { 0% { stroke-dashoffset: 1000; opacity: 0; } 60% { opacity: .3; } 100% { stroke-dashoffset: 0; opacity: .14; } }
@keyframes pulse-glow { 0%, 100% { opacity: .12; transform: scale(1); } 50% { opacity: .4; transform: scale(1.15); } }
@keyframes hero-float { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { transform: translate(5px, -10px); opacity: .6; } 50% { transform: translate(-3px, -5px); opacity: .4; } 75% { transform: translate(7px, -15px); opacity: .8; } }
@keyframes ripple-pop { 0% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(9); } }

/* motion-gated entrance/animation — static & visible when motion is off */
html.motion .hero__title .word-animate { opacity: 0; animation-name: word-appear; animation-duration: .8s; animation-timing-function: var(--ease-out, ease-out); animation-fill-mode: both; }
html.motion .hero__grid .grid-line { opacity: 0; stroke-dashoffset: 1000; animation-name: grid-draw; animation-duration: 2s; animation-timing-function: var(--ease-out, ease-out); animation-fill-mode: forwards; }
html.motion .hero__grid .detail-dot { opacity: 0; animation-name: pulse-glow; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
html.motion .hero__corner { opacity: 0; animation-name: word-appear; animation-duration: 1s; animation-timing-function: var(--ease-out, ease-out); animation-fill-mode: forwards; }
html.motion .hero__float { animation-name: hero-float; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

/* Hero brand-concept illustration */
.hero-illus { inline-size: 100%; block-size: auto; filter: drop-shadow(0 30px 55px rgba(21,34,56,.16)); }

/* Hero dashboard mockup (echoes the CRM) */
.mockup { position: relative; border-radius: var(--r-2xl); background: #fff; border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-float); overflow: hidden; }
.mockup__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-block-end: 1px solid var(--slate-100); background: var(--slate-50); }
.mockup__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--slate-300); }
.mockup__bar .search { margin-inline-start: .6rem; flex: 1; max-inline-size: 220px; display: flex; align-items: center; gap: .35rem; block-size: 24px; padding-inline: .55rem; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--slate-200); color: var(--slate-400); font-size: .62rem; font-weight: 500; overflow: hidden; }
.mockup__bar .search svg { inline-size: 11px; block-size: 11px; flex: none; }
.mockup__bar .search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup__bar .avatar { margin-inline-start: auto; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--brand-100); }
.mockup__body { padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.mockup__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mkpi { border: 1px solid var(--slate-100); border-radius: var(--r-xl); padding: .7rem .8rem; box-shadow: var(--shadow-soft); background: #fff; }
.mkpi__top { display: flex; align-items: center; justify-content: space-between; }
.mkpi .chip { inline-size: 30px; block-size: 30px; border-radius: var(--r-lg); }
.mkpi .chip svg { inline-size: 15px; block-size: 15px; }
.mkpi__v { font-size: 1.15rem; font-weight: 800; color: var(--slate-900); margin-block-start: .5rem; letter-spacing: -.02em; }
.mkpi__l { font-size: .62rem; font-weight: 500; color: var(--slate-500); }
.mpanel { border: 1px solid var(--slate-100); border-radius: var(--r-xl); padding: .8rem .9rem; }
.mpanel__h { display: flex; align-items: center; justify-content: space-between; margin-block-end: .6rem; }
.mpanel__h b { font-size: .78rem; color: var(--slate-900); font-weight: 700; }
.mpanel__h span { font-size: .62rem; color: var(--slate-400); }
.mbar { display: flex; align-items: center; gap: .5rem; margin-block-start: .45rem; }
.mbar .k { inline-size: 62px; flex: none; font-size: .62rem; color: var(--slate-600); font-weight: 500; }
.mbar .track { flex: 1; block-size: 18px; border-radius: var(--r-lg); background: var(--slate-100); overflow: hidden; }
.mbar .fill { block-size: 100%; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); inline-size: var(--w, 40%);
  display: flex; align-items: center; justify-content: flex-end; padding-inline-end: .4rem; }
.mbar .fill span { font-size: .58rem; font-weight: 700; color: #fff; }
.mrow { display: flex; align-items: center; gap: .6rem; padding-block: .5rem; border-block-start: 1px solid var(--slate-100); }
.mrow:first-of-type { border-block-start: 0; }
.mrow .ava { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; font-size: .68rem; font-weight: 700; flex: none; }
.mrow .nm { flex: 1; min-inline-size: 0; }
.mrow .nm b { display: block; font-size: .72rem; color: var(--slate-900); font-weight: 600; }
.mrow .nm span { font-size: .6rem; color: var(--slate-400); }
/* property listing card inside the mockup */
.mprop { border: 1px solid var(--slate-100); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-soft); background: #fff; }
.mprop__img { position: relative; block-size: 116px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); }
.mprop__glyph { inline-size: 50px; block-size: 50px; color: rgba(255,255,255,.5); }
.mprop__badge { position: absolute; inset-block-start: .55rem; inset-inline-start: .55rem; background: #fff; color: var(--brand-700); box-shadow: var(--shadow-soft); }
.mprop__fav { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; inline-size: 26px; block-size: 26px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--slate-500); }
.mprop__fav svg { inline-size: 13px; block-size: 13px; }
.mprop__info { padding: .75rem .85rem .8rem; }
.mprop__row1 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mprop__price { font-size: 1.1rem; font-weight: 800; color: var(--slate-900); letter-spacing: -.02em; }
.mprop__addr { font-size: .68rem; color: var(--slate-500); margin-block-start: .2rem; }
.mprop__specs { display: flex; gap: 1rem; margin-block-start: .6rem; padding-block-start: .55rem; border-block-start: 1px solid var(--slate-100); }
.mprop__specs span { display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; color: var(--slate-600); font-weight: 600; }
.mprop__specs svg { inline-size: 12px; block-size: 12px; color: var(--slate-400); flex: none; }
.mrow .mthumb { inline-size: 34px; block-size: 34px; border-radius: var(--r-lg); flex: none; display: grid; place-items: center;
  color: rgba(255,255,255,.85); background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); }
.mrow .mthumb svg { inline-size: 17px; block-size: 17px; }
.mrow__price { flex: none; font-size: .74rem; font-weight: 800; color: var(--slate-900); }
.mockup__glow { position: absolute; inset: auto -20% -30% -20%; block-size: 60%; z-index: -1;
  background: radial-gradient(closest-side, rgba(44,76,128,.22), transparent); filter: blur(20px); }

/* --------------------------------------------------------------- KPI STRIP */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, .5rem + 1vw, 1.25rem); }
.kpi { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-2xl); padding: 1.3rem; box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kpi__top { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi__v { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--slate-900); margin-block-start: 0; font-variant-numeric: tabular-nums; }
.kpi__v .sfx { color: var(--gold); }
.kpi__l { font-size: .875rem; color: var(--slate-500); font-weight: 500; margin-block-start: .2rem; }

/* ------------------------------------------------------------- FEATURE GRID */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 1.5rem); }
.feature { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-2xl); padding: clamp(1.4rem, 1rem + 1vw, 2rem); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.feature h3 { font-size: 1.25rem; margin-block: 0 .6rem; }
.feature p { color: var(--slate-500); margin: 0; }

/* --------------------------------------------------------------- APPROACH */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .5rem + 1.5vw, 1.5rem); counter-reset: step; }
.step { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-2xl); padding: 1.6rem; box-shadow: var(--shadow-soft); position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.step__n { inline-size: 42px; block-size: 42px; border-radius: var(--r-xl); display: grid; place-items: center; font-weight: 500; font-size: 1.2rem;
  background: none; border: 1px solid rgba(176,141,87,.55); color: var(--gold-600); margin-block-end: 1rem; }
.step h3 { font-size: 1.0625rem; margin-block-end: .5rem; }
.step p { color: var(--slate-500); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------- CTA BAND */
.band { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: linear-gradient(135deg, var(--brand-800), var(--brand-950)); color: #fff;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.band::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; inline-size: 420px; block-size: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(176,141,87,.28), transparent); }
.band__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; justify-content: space-between; }
.band h2 { color: #fff; max-inline-size: 22ch; }
.band .lead { color: rgba(255,255,255,.72); margin-block-start: .8rem; }
.band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.band .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* --------------------------------------------------------------- ABOUT */
.about__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.about__body .lead { margin-block: 1.2rem; color: var(--slate-600); }
.about__body p { color: var(--slate-500); margin-block: 0 1rem; }
.about__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.5rem; }
.about__badges span { font-size: .8rem; font-weight: 500; color: var(--slate-700); background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-pill); padding: .4rem .9rem; }
.about__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about__panel .kpi { text-align: start; }

/* --------------------------------------------------------------- INSIGHTS */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 1.5rem); }
.insight { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-2xl); padding: clamp(1.4rem, 1rem + 1vw, 1.9rem); box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.insight:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.insight__top { display: flex; align-items: center; gap: .7rem; margin-block-end: 1rem; }
.insight__u { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-600); }
.insight h3 { font-size: 1.15rem; margin-block-end: .5rem; }
.insight p { color: var(--slate-500); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------- PROOF */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 1.5rem); }
.quote { position: relative; background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-2xl); padding: clamp(1.8rem, 1.2rem + 1.8vw, 2.75rem); box-shadow: var(--shadow-card); }
.quote::before { content: "\201C"; position: absolute; inset-block-start: .35rem; inset-inline-start: 1.3rem; font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: 1; color: var(--gold); opacity: .35; }
.quote__stars { display: none; }
.quote p { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.5; color: var(--slate-800); margin: 0 0 1.6rem; font-weight: 400; letter-spacing: -.01em; }
.quote__by { display: flex; align-items: center; gap: .75rem; }
.quote__ava { inline-size: 42px; block-size: 42px; border-radius: 50%; background: #f6efe4; color: var(--gold-600); border: 1px solid rgba(176,141,87,.28); display: grid; place-items: center; font-weight: 600; font-size: .95rem; flex: none; }
.quote__name { font-weight: 700; color: var(--slate-900); font-size: .9rem; }
.quote__role { color: var(--slate-500); font-size: .8rem; }

/* --------------------------------------------------------------- FAQ */
.faq__list { max-inline-size: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: .75rem; }
.faq__item { background: #fff; border: 1px solid var(--slate-100); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem;
  font-weight: 700; font-size: 1.0625rem; color: var(--slate-900); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; inline-size: 20px; block-size: 20px; margin-inline-start: auto; flex: none; border-radius: var(--r-sm);
  background: var(--brand-50) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%232c4c80' stroke-width='2.2'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E");
  transition: transform var(--dur) var(--ease); }
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item[open] summary { color: var(--brand-700); }
.faq__a { padding: 0 1.4rem 1.3rem; }
.faq__a p { color: var(--slate-500); margin: 0; }
.faq__item[open] .faq__a { animation: fade var(--dur) var(--ease); }

/* -------------------------------------------------------------- SERVICES */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.service { border-block-start: 2px solid var(--gold); padding-block-start: 1.15rem; }
.service__t { font-size: 1.15rem; font-weight: 700; color: var(--slate-900); margin: 0 0 .55rem; letter-spacing: -.01em; }
.service p { color: var(--slate-500); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ----------------------------------------------------------- COMMUNITIES */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 1.5rem); perspective: 1200px; }
.area { position: relative; overflow: hidden; background: #fff; border: 1.5px solid var(--slate-200); border-radius: var(--r-2xl); padding: 1.5rem 1.35rem; box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease); }
/* gold accent bar that sweeps in on hover (the DisplayCards "reveal") */
.area::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px;
  background: linear-gradient(180deg, var(--gold), #dcc194); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease-out); }
.area > * { position: relative; z-index: 1; }
.area:hover { transform: translateY(-8px) skewY(-1.5deg); border-color: rgba(176,141,87,.55); box-shadow: 0 26px 55px -22px rgba(21,34,56,.4); }
.area:hover::before { transform: scaleY(1); }
.area__t { font-size: 1.05rem; font-weight: 700; color: var(--brand-700); margin: 0 0 .45rem; letter-spacing: -.01em; }
.area p { color: var(--slate-500); font-size: .875rem; line-height: 1.55; margin: 0; transition: color .4s var(--ease); }
.area:hover p { color: var(--slate-600); }

/* ---- Extend the DisplayCards-inspired hover to the other card grids ----- */
.kpi, .feature, .step, .insight { position: relative; overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease); }
.kpi > *, .feature > *, .step > *, .insight > * { position: relative; z-index: 1; }
.kpi::before, .feature::before, .step::before, .insight::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; z-index: 0;
  background: linear-gradient(180deg, var(--gold), #dcc194); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out); }
.kpi:hover, .feature:hover, .step:hover, .insight:hover {
  transform: translateY(-8px) skewY(-1.5deg); border-color: rgba(176,141,87,.5);
  box-shadow: 0 26px 55px -22px rgba(21,34,56,.4); }
.kpi:hover::before, .feature:hover::before, .step:hover::before, .insight:hover::before { transform: scaleY(1); }
/* colorize touches: step number fills gold, insight label goes gold */
.step:hover .step__n { background: var(--gold); border-color: var(--gold); color: #fff; }
.insight:hover .insight__u { color: var(--gold-600); }
/* testimonials — gentler (no skew); ::before is the quote mark, so accent via ::after */
.quote { overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease); }
.quote::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px;
  background: linear-gradient(180deg, var(--gold), #dcc194); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease-out); }
.quote:hover { transform: translateY(-6px); border-color: rgba(176,141,87,.45); box-shadow: 0 26px 55px -22px rgba(21,34,56,.35); }
.quote:hover::after { transform: scaleY(1); }
/* services — subtle lift (borderless columns keep their editorial style) */
.service { transition: transform .4s var(--ease-out); }
.service:hover { transform: translateY(-4px); }

/* -------------------------------------------------------- COSMETIC POLISH */
/* subtle gold seam between content sections */
.section + .section::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,141,87,.3), transparent); }
/* alternating section grounds for vertical rhythm (cards keep their edge) */
.section--alt { background: #fff; }
.section--alt .feature, .section--alt .step, .section--alt .quote, .section--alt #formCard { border-color: var(--slate-200); }
/* gold accent on card hover */
.feature h3, .insight h3, .area__t, .service__t { transition: color var(--dur-fast) var(--ease); }
.feature:hover h3, .insight:hover h3, .area:hover .area__t, .service:hover .service__t { color: var(--gold-600); }
/* carry the hero's gold-grid texture into the CTA band */
.band__inner { z-index: 1; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 88% 15%, black, transparent 72%); mask-image: radial-gradient(circle at 88% 15%, black, transparent 72%); }
/* KPI number/suffix + label refinement */
.kpi__v .sfx { margin-inline-start: .04em; }
.kpi__l { letter-spacing: .005em; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- CONTACT */
.contact__wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
.contact__list { display: flex; flex-direction: column; gap: .8rem; margin-block-start: 1.8rem; }
.contact__list a, .contact__list div { display: inline-flex; align-items: center; gap: .7rem; color: var(--slate-700); font-size: .95rem; font-weight: 500; }
.contact__list .chip { inline-size: 40px; block-size: 40px; }
.contact__list a:hover { color: var(--brand-600); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-wrap { display: flex; flex-direction: column; gap: .4rem; }
.field-wrap--full { grid-column: 1 / -1; }
.field-wrap label { font-size: .8125rem; font-weight: 600; color: var(--slate-600); }
.field { inline-size: 100%; font-family: inherit; font-size: .95rem; color: var(--slate-800); background: #fff;
  border: 1px solid var(--slate-200); border-radius: var(--r-xl); padding: .7rem .9rem; appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
select.field { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center; padding-inline-end: 2.2rem; }
.field:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); }
.field.err { border-color: var(--rose-500); }
.err-msg { color: var(--rose-600); font-size: .78rem; display: none; }
.field-wrap.has-error .err-msg { display: block; }
.hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; color: var(--slate-600); margin-block-start: 1.1rem; }
.consent input { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .12rem; accent-color: var(--brand-600); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.2rem; }
.form-note { margin-block-start: .9rem; font-size: .78rem; color: var(--slate-400); display: flex; gap: .4rem; align-items: center; }
.form-note svg { inline-size: .95rem; color: var(--brand-500); flex: none; }
.form-success { display: none; text-align: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 1rem; }
.card.is-done .form-body { display: none; }
.card.is-done .form-success { display: block; }
.form-success .chip { inline-size: 56px; block-size: 56px; margin-inline: auto; margin-block-end: 1.1rem; }
.form-success h3 { font-size: 1.4rem; margin-block-end: .5rem; }
.form-success p { color: var(--slate-500); max-inline-size: 34ch; margin-inline: auto; margin-block-end: 1.3rem; }

/* --------------------------------------------------------------- FOOTER */
.footer { background: var(--brand-950); color: rgba(255,255,255,.66); margin-block-start: var(--section-y); border-block-start: 2px solid var(--gold); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 2.5rem; border-block-end: 1px solid rgba(255,255,255,.1); }
.footer__brand img { block-size: 32px; inline-size: auto; max-inline-size: none; margin-block-end: 1.1rem; }
.footer__tagline { font-size: 1.05rem; color: #fff; font-weight: 600; max-inline-size: 24ch; line-height: 1.4; }
.footer h4 { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; font-size: .9rem; }
.footer a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.6rem; font-size: .8rem; color: rgba(255,255,255,.5); }
.footer__totop { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.6); font-weight: 600; }
.footer__totop:hover { color: var(--gold); }
.footer__totop svg { inline-size: 1rem; }
.footer__compliance { max-inline-size: 66ch; line-height: 1.6; }

/* --------------------------------------------------------- MOTION UTILS */
html.motion [data-reveal] { opacity: 0; transform: translateY(16px); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-in[data-reveal-delay="1"] { transition-delay: .06s; }
[data-reveal].is-in[data-reveal-delay="2"] { transition-delay: .12s; }
[data-reveal].is-in[data-reveal-delay="3"] { transition-delay: .18s; }
[data-reveal].is-in[data-reveal-delay="4"] { transition-delay: .24s; }
html.motion .hero__figure { opacity: 0; transform: translateY(20px) scale(.985); }
html.motion .hero.is-ready .hero__figure { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out) .1s, transform 700ms var(--ease-out) .1s; }
html.motion .hero [data-hero] { opacity: 0; transform: translateY(16px); }
html.motion .hero.is-ready [data-hero] { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.motion .hero.is-ready [data-hero="1"] { transition-delay: .05s; }
html.motion .hero.is-ready [data-hero="2"] { transition-delay: .1s; }
html.motion .hero.is-ready [data-hero="3"] { transition-delay: .15s; }
html.motion .mbar .fill { animation: growbar 900ms var(--ease-out) both; }
@keyframes growbar { from { inline-size: 0; } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } }

/* --------------------------------------------------------- RESPONSIVE */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { max-inline-size: 520px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .insights { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .areas { grid-template-columns: 1fr 1fr; }
  .about__wrap, .contact__wrap { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav__links, .header .btn--nav { display: none; }
  .nav-toggle { display: grid; place-items: center; inline-size: 42px; block-size: 42px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-xl); color: var(--slate-700); }
  .features, .proof { grid-template-columns: 1fr; }
  .band__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .services, .areas { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .form-actions .btn { inline-size: 100%; }
  .mockup__kpis { grid-template-columns: 1fr 1fr; }
}

/* Mobile nav sheet */
.nav-sheet { display: none; }
.nav-sheet.is-open { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(255,255,255,.98); backdrop-filter: blur(8px); padding: 90px var(--gutter) 2rem; }
.nav-sheet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.nav-sheet a { font-size: 1.4rem; font-weight: 700; color: var(--slate-900); }
.nav-sheet a:hover { color: var(--brand-600); }
.nav-sheet .btn { margin-block-start: 1.5rem; }