/* ============================================================
   Suncoast PEO — app.css  (minify before production deploy)
   Exact palette per 00_BUILD-INSTRUCTION_DEMO-C.md
   ============================================================ */

/* 1. Tokens */
:root {
  --ww:   #FBF8F3;   /* warm-white – primary bg */
  --tl:   #0FA3A3;   /* teal – brand + single CTA */
  --gf:   #0B5563;   /* gulf – headings, dark bg */
  --sd:   #E8D8B7;   /* sand – warm panels */
  --gd:   #F2B53B;   /* gold – small accent only */
  --ink:  #233539;   /* body text */
  --wrap: 1200px;
  --hh:   64px;
  --r-card: 18px;
  --r-pill: 999px;
}

/* 2. Reset */
*,*::before,*::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin:0; background:var(--ww); color:var(--ink); font-family:'Hanken Grotesk','Arial Narrow',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden }
a { color:inherit; text-decoration:none }
img, svg { display:block; max-width:100% }
h1,h2,h3,h4,p { margin:0 }
::selection { background:var(--tl); color:#fff }
:focus-visible { outline:2px solid var(--tl); outline-offset:3px }

/* 3. Layout */
.wrap  { max-width:var(--wrap); margin:0 auto; padding:0 24px }
.section { padding: clamp(56px,8vh,96px) 0 }
.section--dark { background:var(--gf); color:#FBF8F3 }
.section--sand { background:linear-gradient(180deg,var(--ww),#fdfbf6) }
.section-header { max-width:680px; margin-bottom:40px }
.grid-2 { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.grid-4 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px }

/* 4. Typography scale */
.eyebrow { font-family:'IBM Plex Mono','Courier New',monospace; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--tl); display:block; margin-bottom:12px }
.eyebrow--gold { color:var(--gd) }
.eyebrow--muted { color:#7d8a8d }
h2.section-title { font-weight:800; font-size:clamp(28px,3.6vw,42px); line-height:1.08; letter-spacing:-.02em; color:var(--gf); margin-top:12px }
h2.section-title--lt { color:#FBF8F3 }
.section-lead { font-family:'Newsreader',Georgia,'Times New Roman',serif; font-size:18px; line-height:1.55; color:var(--ink); margin-top:14px }
.dummy-badge { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#b9863d; letter-spacing:.08em; background:#fbf2dc; padding:2px 6px; border-radius:5px; vertical-align:middle; margin-right:6px }
.dummy-text { font-family:'Newsreader',Georgia,serif; font-style:italic; color:#5c6b6f; font-size:16px; line-height:1.6 }

/* 5. Buttons */
.btn-primary { display:inline-flex; align-items:center; gap:10px; background:var(--tl); color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:700; font-size:18px; padding:15px 28px; border-radius:var(--r-pill); border:none; cursor:pointer; text-decoration:none; box-shadow:0 8px 22px rgba(15,163,163,.30); transition:background .2s,transform .15s }
.btn-primary:hover { background:#0c8a8a; transform:translateY(-1px) }
.btn-primary--bd { border:1.5px solid rgba(255,255,255,.3) }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; color:var(--gf); font-weight:600; font-size:16px; text-decoration:none; border-bottom:2px solid var(--sd); padding-bottom:2px; transition:border-color .2s }
.btn-secondary:hover { border-color:var(--tl) }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); color:#fff; font-weight:600; font-size:16px; padding:15px 24px; border-radius:var(--r-pill); border:1.5px solid rgba(255,255,255,.35); text-decoration:none; transition:background .2s }
.btn-ghost:hover { background:rgba(255,255,255,.18) }
.btn-nav { display:inline-flex; align-items:center; background:var(--tl); color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:700; font-size:15px; padding:10px 18px; border-radius:var(--r-pill); text-decoration:none; box-shadow:0 4px 14px rgba(15,163,163,.28); transition:background .2s }
.btn-nav:hover { background:#0c8a8a }

/* 6. Header */
.site-header { position:sticky; top:0; z-index:60; height:var(--hh); background:rgba(251,248,243,.86); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--sd); transition:box-shadow .3s }
.site-header.scrolled { box-shadow:0 6px 22px rgba(11,85,99,.10) }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--hh) }
.site-logo { display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none }
.logo-mark { width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 32% 30%,#F2B53B,#0FA3A3 78%); box-shadow:0 2px 8px rgba(15,163,163,.35); display:block; flex:none }
.logo-text { font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--gf) }
.logo-text span { color:var(--tl) }
.main-nav { display:flex; align-items:center; gap:28px }
.nav-link { color:var(--gf); font-weight:500; font-size:15px; text-decoration:none; transition:color .2s }
.nav-link:hover { color:var(--tl) }
.header-actions { display:flex; align-items:center; gap:10px; flex:none }
.btn-burger { display:none; background:var(--gf); color:#fff; border:none; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; cursor:pointer; font-size:18px; line-height:1 }

/* 7. Mobile drawer */
.mobile-drawer { position:fixed; left:0; right:0; top:var(--hh); z-index:55; background:var(--ww); border-bottom:1px solid var(--sd); box-shadow:0 24px 40px rgba(11,85,99,.16); padding:14px 24px 22px; transform:translateY(-130%); transition:transform .42s cubic-bezier(.16,.84,.44,1) }
.mobile-drawer.open { transform:translateY(0) }
.drawer-nav { display:flex; flex-direction:column; gap:2px }
.drawer-link { color:var(--gf); font-weight:600; font-size:17px; padding:12px 4px; border-bottom:1px solid #efe6d4; text-decoration:none; display:block }
.drawer-cta { display:flex; align-items:center; justify-content:center; background:var(--tl); color:#fff; font-weight:700; font-size:17px; padding:14px; border-radius:var(--r-pill); margin-top:14px; text-decoration:none; transition:background .2s }
.drawer-cta:hover { background:#0c8a8a }

/* 8. Hero */
.hero { position:relative; overflow:hidden; background:linear-gradient(180deg,var(--ww) 0%,var(--ww) 55%,#fdfbf6 100%) }
.hero-texture { position:absolute; inset:-10% -5% 0 -5%; pointer-events:none; z-index:0; background:radial-gradient(60% 70% at 82% 8%,rgba(242,181,59,.20),transparent 60%),radial-gradient(55% 60% at 96% 36%,rgba(15,163,163,.16),transparent 62%),radial-gradient(40% 50% at 6% 90%,rgba(232,216,183,.5),transparent 60%) }
.hero-inner { position:relative; z-index:1; padding:clamp(48px,8vh,92px) 0 clamp(40px,6vh,70px) }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center }
.hero-h1 { font-weight:800; font-size:clamp(38px,5.6vw,68px); line-height:1.02; letter-spacing:-.025em; color:var(--gf); margin:0 0 22px }
.hero-sub { font-family:'Newsreader',Georgia,serif; font-size:clamp(18px,1.9vw,23px); line-height:1.5; color:var(--ink); margin:0 0 30px; max-width:34em }
.hero-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:18px }
.hero-trust { margin:0 0 26px; font-size:14.5px; color:#5c6b6f; display:flex; align-items:center; gap:8px }
.trust-dot { width:6px; height:6px; border-radius:50%; background:var(--tl); display:inline-block; flex:none }
.locale-strip { display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.locale-label { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#7d8a8d; margin-right:2px }
.locale-chip { display:inline-block; font-size:14px; font-weight:600; color:var(--gf); background:#fff; border:1px solid var(--sd); padding:7px 15px; border-radius:var(--r-pill); box-shadow:0 1px 2px rgba(11,85,99,.05); text-decoration:none; transition:border-color .2s,color .2s }
.locale-chip:hover { border-color:var(--tl); color:var(--tl) }

/* 9. Your-number panel */
.yn-wrap { position:relative }
.yn-shadow { position:absolute; inset:14px -14px -16px 14px; background:var(--sd); border-radius:24px; opacity:.5; z-index:0 }
.yn-panel { position:relative; z-index:1; background:#fff; border:1px solid #efe6d4; border-radius:22px; box-shadow:0 24px 60px rgba(11,85,99,.14); padding:26px }
.yn-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px }
.yn-lbl { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--tl) }
.yn-badge { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9aa6a8; background:var(--ww); border:1px solid #efe6d4; padding:3px 9px; border-radius:var(--r-pill) }
.yn-title { font-size:21px; font-weight:700; color:var(--gf); letter-spacing:-.01em; margin:0 0 4px }
.yn-sub { font-size:13.5px; line-height:1.5; color:#5c6b6f; margin:0 0 18px }
.yn-rows { display:flex; flex-direction:column; gap:11px }
.yn-row { display:flex; align-items:center; justify-content:space-between; gap:14px }
.yn-row-lbl { font-size:14px; color:var(--ink) }
.skel { border-radius:6px; background:linear-gradient(90deg,var(--sd),#f3ead6,var(--sd)); background-size:200% 100%; animation:shimmer 2.6s ease-in-out infinite }
.yn-hl { padding:11px 13px; background:var(--ww); border:1px solid #efe6d4; border-radius:12px }
.yn-hl .yn-row-lbl { font-weight:600; color:var(--gf) }
.yn-zero { font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:500; color:var(--tl) }
.yn-divider { height:1px; background:#efe6d4; margin:18px 0 16px }
.yn-total { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px }
.yn-total-lbl { font-size:15px; font-weight:700; color:var(--gf) }
.yn-cta { display:flex; align-items:center; justify-content:center; gap:9px; background:var(--tl); color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:700; font-size:17px; padding:14px; border-radius:13px; box-shadow:0 8px 20px rgba(15,163,163,.26); text-decoration:none; transition:background .2s }
.yn-cta:hover { background:#0c8a8a }
.yn-note { margin:14px 0 0; font-size:12px; line-height:1.5; color:#9aa6a8; text-align:center }
.embed-mount { min-height:580px }

/* 10. Trust band */
.trust-band { background:var(--gf); color:#FBF8F3 }
.trust-inner { padding:26px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px }
.trust-item { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:500 }
.trust-diamond { width:7px; height:7px; border-radius:2px; background:var(--gd); transform:rotate(45deg); flex:none }

/* 11. Cards */
.card { background:#fff; border:1px solid #efe6d4; border-radius:var(--r-card); padding:28px; box-shadow:0 8px 26px rgba(11,85,99,.06); transition:transform .25s,box-shadow .25s,border-color .25s; text-decoration:none; color:inherit; display:block }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(11,85,99,.12); border-color:var(--tl) }
.card h3 { font-size:21px; font-weight:700; color:var(--gf); margin-bottom:8px }
.card-num { display:inline-flex; width:44px; height:44px; border-radius:12px; background:var(--ww); border:1px solid var(--sd); align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--tl); margin-bottom:16px; font-size:13px }
.card-link { font-size:14px; font-weight:600; color:var(--tl) }

/* 12. Fact items */
.fact-list { display:flex; flex-direction:column; gap:14px }
.fact-item { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #efe6d4; border-radius:16px; padding:20px 22px; box-shadow:0 8px 26px rgba(11,85,99,.06) }
.fact-item--dk { background:var(--gf); border-color:var(--gf); box-shadow:0 12px 30px rgba(11,85,99,.18) }
.fact-num { font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:500; color:var(--tl); flex:none }
.fact-yr  { font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:500; color:var(--gf); flex:none; width:42px; text-align:center }
.fact-diamond { width:14px; height:14px; border-radius:3px; background:var(--gd); transform:rotate(45deg); flex:none; margin:0 12px }
.fact-lbl { font-weight:700; font-size:16px; color:var(--gf) }
.fact-lbl--lt { color:#FBF8F3 }
.fact-sub { font-size:13.5px; color:#5c6b6f }
.fact-sub--lt { color:#bcd4d8 }

/* 13. Report panel */
.rp { background:#fff; border:1px solid #efe6d4; border-radius:20px; box-shadow:0 18px 44px rgba(11,85,99,.10); padding:26px; overflow:hidden; position:relative }
.rp-badge { position:absolute; top:18px; right:18px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9aa6a8; background:var(--ww); border:1px solid #efe6d4; padding:4px 10px; border-radius:var(--r-pill) }
.rp-brand { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tl); margin-bottom:6px }
.rp-title { font-weight:800; font-size:22px; color:var(--gf); letter-spacing:-.01em; margin-bottom:20px }
.rp-rows { display:flex; flex-direction:column; gap:13px }
.rp-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-bottom:12px; border-bottom:1px dashed #e7ddc9 }
.rp-row-lbl { font-size:14px; color:var(--ink) }
.rp-row--total { border-bottom:none; margin-top:4px; background:var(--ww); border:1px solid #efe6d4; border-radius:12px; padding:13px 15px }
.rp-total-lbl { font-size:15px; font-weight:700; color:var(--gf) }
.rp-note { margin:18px 0 0; font-size:12.5px; color:#9aa6a8; line-height:1.5 }

/* 14. MINI conversion card */
.mini-wrap { display:flex; flex-direction:column; justify-content:center; gap:18px }
.mini-card { background:linear-gradient(150deg,var(--tl),var(--gf)); border-radius:20px; padding:32px; box-shadow:0 18px 44px rgba(15,163,163,.22); color:#fff }
.mini-card .eyebrow { color:#cdeeee; margin-bottom:10px }
.mini-card h3 { font-size:25px; font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:0 0 12px }
.mini-card p { margin:0 0 22px; font-size:15.5px; line-height:1.55; color:#e3f4f4 }
.mini-btn { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--gf); font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:700; font-size:16px; padding:13px 24px; border-radius:var(--r-pill); text-decoration:none; transition:background .2s }
.mini-btn:hover { background:var(--ww) }
.mini-link { font-size:15px; font-weight:600; color:var(--gf); border-bottom:2px solid var(--sd); padding-bottom:3px; text-decoration:none; align-self:center; transition:border-color .2s }
.mini-link:hover { border-color:var(--tl) }

/* 15. Dark section items (why broker) */
.dark-items { display:flex; flex-direction:column; gap:12px }
.dark-item { display:flex; gap:14px; align-items:flex-start; background:rgba(251,248,243,.06); border:1px solid rgba(251,248,243,.14); border-radius:14px; padding:18px 20px }
.dark-item--gold { background:rgba(242,181,59,.12); border-color:rgba(242,181,59,.3) }
.dark-diamond { width:9px; height:9px; border-radius:2px; background:var(--gd); transform:rotate(45deg); flex:none; margin-top:6px }
.dark-heading { font-weight:700; font-size:16px; color:#FBF8F3; margin-bottom:3px }
.dark-sub { font-size:14px; color:#bcd4d8 }
.dark-link { color:var(--gd); text-decoration:underline; font-weight:600 }

/* 16. Steps */
.step { background:#fff; border:1px solid #efe6d4; border-radius:16px; padding:22px 18px }
.step--active { background:var(--tl); border-color:var(--tl) }
.step-n { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--tl); margin-bottom:10px }
.step-n--lt { color:#cdeeee }
.step h3 { font-size:16px; font-weight:700; color:var(--gf); margin-bottom:6px }
.step--active h3 { color:#fff }
.step-text { font-size:13.5px; line-height:1.5; color:#5c6b6f }
.step--active .step-text { color:#e3f4f4 }

/* 17. Deliver grid */
.deliver { background:#fff; border:1px solid #efe6d4; border-radius:14px; padding:22px }
.deliver--cta { background:var(--sd); border-color:#ddc9a0; text-decoration:none; display:flex; flex-direction:column; justify-content:center; transition:background .2s; color:inherit }
.deliver--cta:hover { background:#e0cfa8 }
.deliver h3 { font-size:17px; font-weight:700; color:var(--gf); margin-bottom:7px }
.deliver-sub { font-size:14px; line-height:1.55; color:#5c6b6f }
.deliver-arrow { font-size:14px; font-weight:600; color:var(--tl) }

/* 18. Pillars */
.pillar { background:#fff; border:1px solid #efe6d4; border-radius:16px; padding:22px }
.pillar h3 { font-size:16px; font-weight:700; color:var(--gf); margin-bottom:6px }
.pillar-sub { font-size:13.5px; color:#5c6b6f }

/* 19. Final CTA band */
.fcta { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--gf) 0%,#0d6b76 55%,var(--tl) 130%); border-radius:28px; padding:clamp(40px,6vw,72px); text-align:center; box-shadow:0 24px 60px rgba(11,85,99,.24) }
.fcta-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 80% at 88% 10%,rgba(242,181,59,.22),transparent 60%) }
.fcta-inner { position:relative }
.fcta .eyebrow { color:#9fe0df; justify-content:center }
.fcta h2 { font-weight:800; font-size:clamp(30px,4.4vw,52px); line-height:1.05; letter-spacing:-.02em; color:#fff; max-width:16em; margin:0 auto 16px }
.fcta p { margin:0 auto 30px; font-size:18px; line-height:1.55; color:#cfe9e9; max-width:34em; font-family:'Newsreader',Georgia,serif }
.fcta-btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

/* 20. Footer */
.site-footer { background:var(--gf); color:#cfdee0 }
.footer-wrap { padding:clamp(48px,7vh,76px) 0 0 }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px }
.footer-brand-blurb { font-size:14.5px; line-height:1.6; color:#a9c2c5; max-width:30ch; margin:16px 0 18px }
.footer-chips { display:flex; flex-wrap:wrap; gap:8px }
.footer-chip { display:inline-block; font-size:12.5px; font-weight:600; color:#cfdee0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:5px 12px; border-radius:var(--r-pill); text-decoration:none; transition:border-color .2s,color .2s }
.footer-chip:hover { border-color:#5fd0cf; color:#fff }
h3.footer-col-head { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#5fd0cf; margin:0 0 16px; font-weight:400 }
.footer-links { display:flex; flex-direction:column; gap:11px }
.footer-link { font-size:14.5px; color:#cfdee0; text-decoration:none; transition:color .2s }
.footer-link:hover { color:#fff }
.footer-link--hi { color:#5fd0cf; font-weight:600 }
.footer-disc { font-size:12.5px; line-height:1.65; color:#86a1a5; border-top:1px solid rgba(255,255,255,.1); padding-top:24px }
.footer-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:20px 0 30px; font-size:13px; color:#a9c2c5 }
.footer-bar a { color:#a9c2c5; text-decoration:none; transition:color .2s }
.footer-bar a:hover { color:#fff }
.footer-affil { font-weight:600; color:#cfdee0 }
.footer-credit { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#7d989c }

/* 21. Forms */
.form-field { display:flex; flex-direction:column; gap:5px }
.form-label { font-size:14px; font-weight:600; color:var(--gf) }
.form-input, .form-select, .form-textarea { width:100%; padding:12px 14px; border:1px solid #efe6d4; border-radius:10px; font-size:15px; font-family:'Hanken Grotesk',system-ui,sans-serif; color:var(--ink); background:#fff; transition:border-color .2s }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--tl); outline:none }
.form-select { appearance:none; -webkit-appearance:none }
.form-textarea { resize:vertical }
.form-thanks { display:none; text-align:center; padding:24px; background:#f0faf9; border-radius:14px; border:1px solid #cce8e6; margin-top:8px }
.form-box { max-width:560px; margin:0 auto; background:#fff; border:1px solid #efe6d4; border-radius:22px; padding:32px 28px; box-shadow:0 18px 44px rgba(11,85,99,.10) }
.form-stack { display:flex; flex-direction:column; gap:14px }

/* 22. Exit intent */
.exit-veil { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(11,85,99,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px) }
.exit-veil.open { display:flex }
.exit-box { position:relative; max-width:480px; width:100%; background:var(--ww); border-radius:22px; box-shadow:0 40px 90px rgba(11,40,46,.4); padding:36px 32px; transform:translateY(12px) scale(.98); opacity:0; transition:transform .45s cubic-bezier(.16,.84,.44,1),opacity .35s ease }
.exit-veil.open .exit-box { transform:translateY(0) scale(1); opacity:1 }
.exit-x { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:none; background:var(--sd); color:var(--gf); font-size:18px; cursor:pointer; line-height:1; transition:background .2s }
.exit-x:hover { background:#ddc9a0 }
.exit-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--tl); display:block; margin-bottom:12px }
.exit-title { font-weight:800; font-size:27px; line-height:1.12; letter-spacing:-.01em; color:var(--gf); margin:0 0 12px }
.exit-body { font-family:'Newsreader',Georgia,serif; font-size:15.5px; line-height:1.55; color:var(--ink); margin:0 0 22px }
.exit-cta { display:flex; align-items:center; justify-content:center; gap:9px; background:var(--tl); color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:700; font-size:18px; padding:15px; border-radius:13px; box-shadow:0 8px 20px rgba(15,163,163,.28); text-decoration:none; margin-bottom:18px; transition:background .2s }
.exit-cta:hover { background:#0c8a8a }
.exit-demo { background:#fff; border:1px dashed #d8c9a8; border-radius:12px; padding:14px 16px }
.exit-demo-lbl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#b9863d; margin-bottom:6px; display:block }
.exit-demo-txt { font-size:13px; line-height:1.55; color:#5c6b6f; margin:0 }

/* 23. Scroll reveal */
[data-reveal] { opacity:1 }
[data-reveal].sc-in { animation:scRise .7s cubic-bezier(.16,.84,.44,1) both }

/* 24. Keyframes */
@keyframes scRise   { from { transform:translateY(16px) } to { transform:translateY(0) } }
@keyframes shimmer  { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }

/* 25. Responsive */
@media (max-width:900px) {
  .main-nav, .btn-nav { display:none }
  .btn-burger { display:inline-flex }
  .hero-grid { grid-template-columns:1fr; gap:36px }
  .grid-2  { grid-template-columns:1fr; gap:30px }
  .grid-3  { grid-template-columns:1fr }
  .grid-4  { grid-template-columns:1fr 1fr }
  .grid-5  { grid-template-columns:1fr 1fr }
  .footer-grid { grid-template-columns:1fr 1fr }
}
@media (max-width:560px) {
  .grid-4  { grid-template-columns:1fr }
  .grid-5  { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr }
}