/* ============================================================
   JELL Capital Investments — Design System
   Brand palette: deep navy base, warm gold accent, off-white
   surfaces, near-black text. Boutique investment-firm feel.
   Fraunces display + DM Sans body.
   ============================================================ */

/* ---------- Type scale ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.2rem + 4vw, 4.5rem);

  /* spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;  --space-32: 8rem;

  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem; --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1220px;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
}

/* ---------- Light (default) ---------- */
:root, [data-theme='light'] {
  --color-bg: #F7F5EF;          /* off-white */
  --color-surface: #ffffff;     /* white card */
  --color-surface-2: #ffffff;
  --color-surface-offset: #EDEAE0;
  --color-divider: #E0DCCF;
  --color-border: #D5D0C0;      /* soft warm gray */

  --color-text: #14181F;        /* near-black */
  --color-text-muted: #565E6B;
  --color-text-faint: #8C93A0;
  --color-text-inverse: #F7F5EF;

  --color-primary: #B68F32;     /* gold (readable on light) */
  --color-primary-hover: #9E7B26;
  --color-primary-active: #84661C;
  --color-primary-soft: #F1E7CC;

  --color-gold: #C9A646;        /* brand gold for navy surfaces */
  --color-secondary: #0B1A3A;   /* deep navy */
  --color-secondary-hover: #142a55;
  --color-secondary-soft: #E3E7F0;

  --color-ink: #0B1A3A;         /* deep navy for dark sections */

  --shadow-sm: 0 1px 2px rgba(11,26,58,.08);
  --shadow-md: 0 6px 22px rgba(11,26,58,.12);
  --shadow-lg: 0 20px 50px rgba(11,26,58,.20);
}

[data-theme='dark'] {
  --color-bg: #0A1530;          /* deep navy base */
  --color-surface: #122146;
  --color-surface-2: #16284f;
  --color-surface-offset: #0E1C3C;
  --color-divider: #21315c;
  --color-border: #2b3d6b;

  --color-text: #ECEFF6;
  --color-text-muted: #A9B3C9;
  --color-text-faint: #6B7795;
  --color-text-inverse: #0A1530;

  --color-primary: #C9A646;     /* gold reads brilliantly on navy */
  --color-primary-hover: #D8B85E;
  --color-primary-active: #E5C975;
  --color-primary-soft: #1d2c52;

  --color-gold: #C9A646;
  --color-secondary: #C9A646;
  --color-secondary-hover: #D8B85E;
  --color-secondary-soft: #16284f;

  --color-ink: #060E22;         /* deepest navy for footer/bands */

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 22px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0A1530; --color-surface: #122146; --color-surface-2: #16284f;
    --color-surface-offset: #0E1C3C; --color-divider: #21315c; --color-border: #2b3d6b;
    --color-text: #ECEFF6; --color-text-muted: #A9B3C9; --color-text-faint: #6B7795;
    --color-text-inverse: #0A1530; --color-primary: #C9A646; --color-primary-hover: #D8B85E;
    --color-primary-active: #E5C975; --color-primary-soft: #1d2c52; --color-gold: #C9A646;
    --color-secondary: #C9A646; --color-secondary-hover: #D8B85E; --color-secondary-soft: #16284f; --color-ink: #060E22;
  }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html {
  -webkit-text-size-adjust:none; text-size-adjust:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scroll-behavior:smooth;
  scroll-padding-top: 5rem;
}
body {
  min-height:100dvh; line-height:1.6;
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--color-text); background:var(--color-bg);
}
img,picture,video,svg { display:block; max-width:100%; height:auto; }
ul[role='list'] { list-style:none; }
input,button,textarea,select { font:inherit; color:inherit; }
h1,h2,h3,h4 { text-wrap:balance; line-height:1.1; font-family:var(--font-display); font-weight:540; letter-spacing:-0.01em; }
p,li { text-wrap:pretty; }
a { color:inherit; }
button { cursor:pointer; background:none; border:none; }
::selection { background: var(--color-primary-soft); color:var(--color-text); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
a,button,input,textarea,select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Layout helpers ---------- */
.wrap { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:var(--space-6); }
.wrap--narrow { max-width:var(--content-narrow); }
.wrap--default { max-width:var(--content-default); }
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.eyebrow {
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-primary);
  display:inline-flex; align-items:center; gap:var(--space-2);
}
.eyebrow::before { content:''; width:1.75rem; height:1px; background:var(--color-primary); display:inline-block; }
.lede { font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; line-height:1.55; }
h1.display { font-size:var(--text-3xl); }
h2.display { font-size:var(--text-2xl); }
.muted { color:var(--color-text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  padding:0.85em 1.6em; border-radius:var(--radius-full); text-decoration:none;
  border:1.5px solid transparent; white-space:nowrap;
}
.btn-primary { background:var(--color-ink); color:#fff; }
.btn-primary:hover { background:var(--color-secondary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-gold { background:var(--color-gold); color:#0B1A3A; }
.btn-gold:hover { background:#d8b85e; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--color-secondary); color:#fff; }
.btn-secondary:hover { background:var(--color-secondary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline { background:transparent; border-color:var(--color-border); color:var(--color-text); }
.btn-outline:hover { border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); }
.btn-ghost-light { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(4px); }
.btn-ghost-light:hover { background:rgba(255,255,255,.22); transform:translateY(-2px); }
.btn-lg { padding:1em 2em; font-size:var(--text-base); }
.btn-block { width:100%; }

/* ---------- Header (always navy) ---------- */
.header {
  position:sticky; top:0; z-index:60;
  background: color-mix(in oklab, #0B1A3A 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,166,70,.16);
  transition: border-color .3s, box-shadow .3s;
}
.header--scrolled { border-bottom-color:rgba(201,166,70,.34); box-shadow:0 6px 22px rgba(0,0,0,.28); }
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); height:4.75rem; }
.brand { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; color:#fff; }
.brand__logo { height:2.5rem; width:auto; border-radius:6px; flex-shrink:0; }
.brand__name { font-family:var(--font-display); font-weight:600; font-size:1.12rem; letter-spacing:-0.01em; line-height:1; color:#fff; }
.brand__sub { display:block; font-family:var(--font-body); font-size:0.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--color-gold); margin-top:3px; }
.nav { display:flex; align-items:center; gap:var(--space-1); }
.nav a {
  font-size:var(--text-sm); font-weight:500; text-decoration:none; color:rgba(255,255,255,.78);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
}
.nav a:hover, .nav a[aria-current="page"] { color:var(--color-gold); }
.header__actions { display:flex; align-items:center; gap:var(--space-3); }
.theme-toggle { width:2.4rem; height:2.4rem; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-full); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.22); }
.theme-toggle:hover { color:var(--color-gold); border-color:var(--color-gold); }
.header .btn-gold { color:#0B1A3A; }
.menu-btn { display:none; width:2.6rem; height:2.6rem; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-sm); }

.mobile-nav { display:none; position:fixed; inset:0; z-index:70; background:#0B1A3A; padding:var(--space-6); flex-direction:column; }
.mobile-nav.open { display:flex; }
.mobile-nav__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-8); }
.mobile-nav .brand { color:#fff; }
.mobile-nav .menu-btn { color:#fff; border-color:rgba(255,255,255,.25); }
.mobile-nav a:not(.brand) { font-family:var(--font-display); font-size:var(--text-lg); text-decoration:none; color:rgba(255,255,255,.9); padding:var(--space-3) 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-nav a:not(.brand):hover { color:var(--color-gold); }
.mobile-nav .btn { margin-top:var(--space-6); }

@media (max-width: 900px) {
  .nav, .header__actions .btn { display:none; }
  .menu-btn { display:inline-flex; }
}

/* ---------- Hero ---------- */
.hero { position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero::after { content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(7,16,40,.62) 0%, rgba(7,16,40,.42) 40%, rgba(7,16,40,.82) 100%); }
.hero__inner { position:relative; z-index:2; padding-block: clamp(var(--space-24), 16vw, 11rem); }
.hero h1 { font-size:var(--text-3xl); color:#fff; max-width:16ch; }
.hero .lede { color:rgba(255,255,255,.9); margin-top:var(--space-5); font-size:var(--text-lg); }
.hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8); }
.hero .eyebrow { color:var(--color-gold); }
.hero .eyebrow::before { background:var(--color-gold); }

/* page hero (interior) */
.pagehero { position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.pagehero__bg { position:absolute; inset:0; z-index:0; }
.pagehero__bg img { width:100%; height:100%; object-fit:cover; }
.pagehero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,16,40,.55), rgba(7,16,40,.78)); }
.pagehero__inner { position:relative; z-index:2; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.pagehero h1 { color:#fff; font-size:var(--text-2xl); max-width:18ch; }
.pagehero .lede { color:rgba(255,255,255,.9); margin-top:var(--space-4); }
.pagehero .eyebrow { color:var(--color-gold); } .pagehero .eyebrow::before{ background:var(--color-gold); }

/* solid page header (no image) */
.solidhead { background:var(--color-ink); color:#fff; position:relative; overflow:hidden; }
.solidhead::after { content:''; position:absolute; right:-8%; top:-40%; width:42%; height:180%; background:radial-gradient(circle, rgba(201,166,70,.14), transparent 70%); pointer-events:none; }
.solidhead__inner { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); position:relative; z-index:1; }
.solidhead h1 { color:#fff; font-size:var(--text-2xl); max-width:20ch; }
.solidhead .lede { color:rgba(255,255,255,.82); margin-top:var(--space-4); }
.solidhead .eyebrow { color:var(--color-gold); } .solidhead .eyebrow::before{ background:var(--color-gold); }

/* ---------- Cards / generic ---------- */
.card { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); }
.grid { display:grid; gap:var(--space-6); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* value props */
.vprop { padding:var(--space-6); }
.vprop__icon { width:3rem; height:3rem; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--color-primary-soft); color:var(--color-primary); margin-bottom:var(--space-4); }
.vprop h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.vprop p { color:var(--color-text-muted); font-size:var(--text-sm); }

/* split section */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-8),5vw,var(--space-20)); align-items:center; }
@media (max-width:860px){ .split { grid-template-columns:1fr; } }
.split img { border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; }

/* dual path */
.paths { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
@media (max-width:760px){ .paths { grid-template-columns:1fr; } }
.path-card { position:relative; overflow:hidden; border-radius:var(--radius-lg); min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-8); color:#fff; isolation:isolate; }
.path-card img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.path-card::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,16,40,.18), rgba(7,16,40,.85)); }
.path-card > * { position:relative; z-index:2; }
.path-card h3 { color:#fff; font-size:var(--text-xl); }
.path-card p { color:rgba(255,255,255,.88); font-size:var(--text-sm); margin:var(--space-2) 0 var(--space-5); }
.path-card .btn { align-self:flex-start; }

/* ---------- Forms ---------- */
.field { margin-bottom:var(--space-5); }
.field label { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2); }
.field .req { color:var(--color-primary); }
.input, .select, .textarea {
  width:100%; padding:0.8em 1em; font-size:var(--text-base);
  background:var(--color-surface-2); border:1.5px solid var(--color-border); border-radius:var(--radius-md);
  color:var(--color-text);
}
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft); }
.textarea { min-height:8rem; resize:vertical; }
.field-error { color:var(--color-primary); font-size:var(--text-xs); margin-top:var(--space-1); display:none; }
.field.invalid .input,.field.invalid .select,.field.invalid .textarea { border-color:var(--color-primary); }
.field.invalid .field-error { display:block; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
@media (max-width:560px){ .form-row { grid-template-columns:1fr; } }
.form-success { display:none; text-align:center; padding:var(--space-10) var(--space-6); }
.form-success.show { display:block; }
.form-success__icon { width:4rem; height:4rem; margin:0 auto var(--space-5); border-radius:var(--radius-full); background:var(--color-secondary-soft); color:var(--color-secondary); display:flex; align-items:center; justify-content:center; }
.form-success h3 { font-size:var(--text-xl); margin-bottom:var(--space-2); }
.form-card { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:clamp(var(--space-6),4vw,var(--space-10)); box-shadow:var(--shadow-sm); }

/* newsletter */
.newsletter-form { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.newsletter-form .input { flex:1 1 12rem; }
.newsletter-success { display:none; color:var(--color-secondary); font-weight:600; }
.newsletter-success.show { display:flex; align-items:center; gap:var(--space-2); }

/* ---------- Newsletter band ---------- */
.band { background:var(--color-ink); color:#fff; border-radius:var(--radius-xl); padding:clamp(var(--space-8),5vw,var(--space-16)); position:relative; overflow:hidden; }
.band::after { content:''; position:absolute; left:-6%; bottom:-60%; width:36%; height:170%; background:radial-gradient(circle, rgba(201,166,70,.16), transparent 70%); pointer-events:none; }
.band > * { position:relative; z-index:1; }
.band h2 { color:#fff; }
.band p { color:rgba(255,255,255,.8); }
.band .input { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; }
.band .input::placeholder { color:rgba(255,255,255,.55); }

/* ---------- Stats / social proof ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); text-align:center; }
@media (max-width:680px){ .stats { grid-template-columns:repeat(2,1fr); } }
.stat__num { font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-primary); line-height:1; }
.stat__label { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-2); }

/* ---------- Listings ---------- */
.listing-card { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.listing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.listing-card__media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.listing-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.listing-card:hover .listing-card__media img { transform:scale(1.05); }
.badge { position:absolute; top:var(--space-3); left:var(--space-3); font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; padding:0.35em 0.7em; border-radius:var(--radius-full); }
.badge--cash { background:var(--color-gold); color:#0B1A3A; }
.badge--pkg { background:#0B1A3A; color:var(--color-gold); }
.listing-card__body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.listing-card__loc { font-size:var(--text-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-primary); }
.listing-card__title { font-family:var(--font-display); font-size:var(--text-lg); line-height:1.15; }
.listing-card__price { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-text); }
.listing-card__mo { font-size:var(--text-sm); color:var(--color-text-muted); }
.listing-card__actions { display:flex; gap:var(--space-3); margin-top:auto; padding-top:var(--space-4); }
.listing-card__actions .btn { flex:1; padding:0.7em 1em; }

/* filters */
.filters { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:flex-end; }
.filters .field { margin:0; flex:1 1 9rem; min-width:8rem; }
.filters label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); }
.filters .select, .filters .input { padding:0.6em 0.8em; font-size:var(--text-sm); }
.filter-check { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; padding-bottom:0.6em; }
.filter-check input { width:1.1rem; height:1.1rem; accent-color:var(--color-primary); }
.results-meta { display:flex; justify-content:space-between; align-items:center; margin:var(--space-8) 0 var(--space-5); flex-wrap:wrap; gap:var(--space-3); }
.results-count { font-size:var(--text-sm); color:var(--color-text-muted); }
.no-results { text-align:center; padding:var(--space-16); color:var(--color-text-muted); }

/* ---------- Modal ---------- */
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(7,16,40,.6); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:var(--space-4); }
.modal-backdrop.open { display:flex; }
.modal { background:var(--color-bg); border-radius:var(--radius-lg); max-width:480px; width:100%; max-height:90dvh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal__head { padding:var(--space-6) var(--space-6) 0; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); }
.modal__head h3 { font-size:var(--text-lg); }
.modal__head p { font-size:var(--text-sm); color:var(--color-text-muted); }
.modal__close { width:2.2rem; height:2.2rem; flex-shrink:0; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); }
.modal__close:hover { background:var(--color-surface-offset); color:var(--color-primary); }
.modal__body { padding:var(--space-5) var(--space-6) var(--space-6); }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:var(--space-2); background:var(--color-surface-offset); padding:var(--space-1); border-radius:var(--radius-full); width:fit-content; margin:0 auto var(--space-12); }
.tab { padding:0.7em 1.6em; border-radius:var(--radius-full); font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); }
.tab.active { background:var(--color-primary); color:#fff; box-shadow:var(--shadow-sm); }
.tab-panel { display:none; } .tab-panel.active { display:block; }

/* steps */
.steps { display:grid; gap:var(--space-6); }
.step { display:flex; gap:var(--space-5); padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); }
.step__num { flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; }
.step h3 { font-size:var(--text-lg); margin-bottom:var(--space-1); }
.step p { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- Testimonials ---------- */
.tcard { padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-4); }
.tcard__stars { color:var(--color-primary); display:flex; gap:2px; }
.tcard blockquote { font-family:var(--font-display); font-size:var(--text-lg); line-height:1.4; }
.tcard__who { display:flex; align-items:center; gap:var(--space-3); margin-top:auto; }
.tcard__avatar { width:2.6rem; height:2.6rem; border-radius:var(--radius-full); background:var(--color-secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); }
.tcard__name { font-weight:700; font-size:var(--text-sm); }
.tcard__role { font-size:var(--text-xs); color:var(--color-text-muted); }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom:1px solid var(--color-divider); }
.faq-q { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-5) 0; font-family:var(--font-display); font-size:var(--text-lg); font-weight:540; }
.faq-q:hover { color:var(--color-primary); }
.faq-icon { flex-shrink:0; width:1.6rem; height:1.6rem; position:relative; transition:transform .3s; }
.faq-icon::before,.faq-icon::after { content:''; position:absolute; background:var(--color-primary); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-icon::before { width:1rem; height:2px; }
.faq-icon::after { width:2px; height:1rem; transition:transform .3s; }
.faq-item.open .faq-icon::after { transform:translate(-50%,-50%) scaleY(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a__inner { padding-bottom:var(--space-5); color:var(--color-text-muted); font-size:var(--text-base); }

/* ---------- Footer ---------- */
.footer { background:var(--color-ink); color:#fff; padding-block:var(--space-20) var(--space-8); }
.footer a { color:rgba(255,255,255,.7); text-decoration:none; font-size:var(--text-sm); }
.footer a:hover { color:#fff; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; gap:var(--space-10); }
@media (max-width:860px){ .footer__grid { grid-template-columns:1fr 1fr; gap:var(--space-8); } }
@media (max-width:520px){ .footer__grid { grid-template-columns:1fr; } }
.footer .brand__name { color:#fff; }
.footer .brand__logo { height:2.4rem; border-radius:6px; }
.footer__col h4 { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:var(--space-4); }
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.footer__tag { color:rgba(255,255,255,.65); font-size:var(--text-sm); margin:var(--space-4) 0; max-width:34ch; }
.footer__social { display:flex; gap:var(--space-3); margin-top:var(--space-4); }
.footer__social a { width:2.4rem; height:2.4rem; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; }
.footer__social a:hover { background:var(--color-primary); border-color:var(--color-primary); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:var(--space-16); padding-top:var(--space-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-xs); color:rgba(255,255,255,.5); }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Misc content ---------- */
.prose p { color:var(--color-text-muted); margin-bottom:var(--space-4); max-width:68ch; }
.prose h2 { font-size:var(--text-xl); margin:var(--space-10) 0 var(--space-4); }
.prose h3 { font-size:var(--text-lg); margin:var(--space-6) 0 var(--space-2); }
.pull { font-family:var(--font-display); font-size:var(--text-xl); line-height:1.3; color:var(--color-text); border-left:3px solid var(--color-primary); padding-left:var(--space-6); margin:var(--space-10) 0; max-width:30ch; }
.tag-row { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tag { font-size:var(--text-xs); font-weight:600; padding:0.4em 0.8em; border-radius:var(--radius-full); background:var(--color-secondary-soft); color:var(--color-secondary); }
.factgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
@media (max-width:640px){ .factgrid { grid-template-columns:1fr; } }
.fact { padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md); }
.fact__num { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-primary); }
.fact__label { font-size:var(--text-sm); color:var(--color-text-muted); }
.contact-info { display:flex; flex-direction:column; gap:var(--space-5); }
.contact-info__item { display:flex; gap:var(--space-4); align-items:flex-start; }
.contact-info__item svg { color:var(--color-primary); flex-shrink:0; margin-top:3px; }
.contact-info__item strong { display:block; }
.contact-info__item span { color:var(--color-text-muted); font-size:var(--text-sm); }