/* ═══════════════════════════════════════════════════════════
   JOEWECA · Fiscora ERP + DL-Stock — style.css
   ═══════════════════════════════════════════════════════════ */

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --navy:    #0d1f4a;
  --blue:    #1a3fa0;
  --gold:    #d6b24a;
  --gold2:   #f0cc6a;
  --ink:     #0a0f1e;
  --slate:   #5b6a85;
  --mist:    #e8edf8;
  --card-bg: #f7faff;
  --border:  rgba(13,31,74,.10);
  --shadow:  0 20px 60px rgba(13,31,74,.12);
  --r:       16px;
  --fh: 'DM Sans', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'DM Mono', monospace;
}

html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: #fff; color: var(--ink); overflow-x: hidden; }

/* noise grain */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── NAVBAR ─────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:70px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.5rem,5vw,4rem);
  background:rgba(255,255,255,.88); backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid rgba(13,31,74,.07); transition:box-shadow .3s;
}
.nav.scrolled { box-shadow:0 4px 30px rgba(13,31,74,.10); }
.nav-logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.nav-logo img { height:30px; width:auto; }
.nav-wordmark { font-family:var(--fh); font-weight:800; font-size:1.1rem; color:var(--navy); letter-spacing:.06em; }
.nav-links { display:flex; align-items:center; gap:.2rem; list-style:none; }
.nav-links a { font-size:.85rem; font-weight:600; color:var(--navy); padding:.45rem .75rem; border-radius:8px; text-decoration:none; transition:all .2s; }
.nav-links a:hover { background:var(--navy); color:#fff; }
.nav-ctas { display:flex; gap:.6rem; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; }

/* ─── MOBILE MENU ────────────────────────────────────────── */
.mobile-menu { display:none; position:fixed; inset:0; z-index:999; background:rgba(6,12,28,.97); flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:var(--fh); font-size:1.6rem; font-weight:800; color:#fff; text-decoration:none; transition:color .2s; }
.mobile-menu a:hover { color:var(--gold); }
.mobile-close { position:absolute; top:1.5rem; right:1.5rem; font-size:1.8rem; color:#fff; background:none; border:none; cursor:pointer; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--fb); font-weight:600; font-size:.88rem; padding:.6rem 1.2rem; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:all .22s; }
.btn-ghost   { color:var(--navy); background:transparent; border:1.5px solid rgba(13,31,74,.22); }
.btn-ghost:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--blue); transform:translateY(-1px); box-shadow:0 8px 24px rgba(13,31,74,.28); }
.btn-gold    { background:var(--gold); color:var(--navy); font-weight:700; }
.btn-gold:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 10px 28px rgba(214,178,74,.4); }
.btn-lg { padding:.85rem 1.8rem; font-size:1rem; border-radius:12px; }

/* ─── HERO ───────────────────────────────────────────────── */
.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:7rem clamp(1.5rem,5vw,4rem) 4rem; position:relative; overflow:hidden; }
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 5% 0%,rgba(26,63,160,.09),transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 10%,rgba(214,178,74,.18),transparent 55%),#fff;
}
.hero-grid-lines {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(13,31,74,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(13,31,74,.04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 20%,rgba(0,0,0,.3) 70%,transparent 100%);
}
.hero-inner { position:relative; max-width:1200px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

.hero-eyebrow { display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.eyebrow-dot  { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:pulsedot 2s infinite; }
@keyframes pulsedot { 0%,100%{box-shadow:0 0 0 0 rgba(214,178,74,.5)} 50%{box-shadow:0 0 0 8px rgba(214,178,74,0)} }
.eyebrow-text { font-family:var(--fm); font-size:.8rem; color:var(--navy); letter-spacing:.08em; font-weight:500; }

.hero h1 { font-family:var(--fh); font-weight:800; font-size:clamp(2.2rem,4vw,4rem); line-height:1.04; letter-spacing:-.03em; color:var(--ink); margin-bottom:1.2rem; max-width:13ch; }
.hero-title .accent { color:var(--blue); position:relative; }
.hero-title .accent::after { content:''; position:absolute; bottom:-6px; left:0; width:64%; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:3px; }
.hero-desc { font-size:1.05rem; color:var(--slate); line-height:1.7; max-width:50ch; margin-bottom:2rem; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.5rem; }
.trust-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.trust-label { font-size:.78rem; color:var(--slate); font-weight:600; margin-right:.4rem; }
.trust-tag   { font-size:.78rem; font-weight:700; color:var(--navy); background:var(--mist); border:1px solid var(--border); padding:.3rem .75rem; border-radius:999px; }

/* ─── HERO CARD ──────────────────────────────────────────── */
.hero-card { background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:0 22px 64px rgba(13,31,74,.14); overflow:hidden; transform:perspective(1000px) rotateY(-2deg) rotateX(1deg); transition:transform .5s ease; }
.hero-card:hover { transform:perspective(1000px) rotateY(0) rotateX(0); }
.card-header-bar { background:var(--navy); padding:1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; }
.card-dots { display:flex; gap:6px; }
.card-dots span { width:10px; height:10px; border-radius:50%; }
.card-dots span:nth-child(1){background:#ff5f57} .card-dots span:nth-child(2){background:#febc2e} .card-dots span:nth-child(3){background:#28c840}
.card-title-bar  { font-family:var(--fb); font-size:.73rem; color:rgba(255,255,255,.78); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.card-live-badge { display:flex; align-items:center; gap:5px; font-size:.7rem; color:#8ff5b4; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.card-live-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:#28c840; animation:pulsedot 1.5s infinite; }
.card-body-area { padding:1.3rem; }
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem; }
.metric-tile { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:.85rem; }
.metric-tile .label { font-size:.67rem; color:#66758f; font-weight:700; margin-bottom:.35rem; letter-spacing:.08em; text-transform:uppercase; }
.metric-tile .value { font-family:var(--fh); font-size:1.32rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.metric-tile .delta { font-size:.7rem; color:#15803d; font-weight:700; margin-top:.25rem; }
.metric-tile .delta.neg { color:#dc2626; }
.mini-chart { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:.85rem; }
.mini-chart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.mini-chart-title  { font-size:.72rem; font-weight:700; color:var(--navy); letter-spacing:.05em; text-transform:uppercase; }
.mini-chart-period { font-size:.68rem; color:#6a7892; font-family:var(--fm); }
.bar-chart { display:flex; align-items:flex-end; gap:5px; height:50px; }
.bar { flex:1; border-radius:4px 4px 0 0; background:var(--blue); opacity:.2; transition:all .4s; }
.bar.active { opacity:1; } .bar.gold { background:var(--gold); opacity:.8; }
.bar.animate { animation:growBar 1s ease forwards; opacity:1; }
@keyframes growBar { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1)} }
.alert-row { display:flex; align-items:center; gap:.6rem; background:rgba(214,178,74,.1); border:1px solid rgba(214,178,74,.3); border-radius:10px; padding:.6rem .85rem; margin-top:.7rem; }
.alert-icon { font-size:.9rem; }
.alert-text { font-size:.72rem; color:var(--navy); font-weight:700; }
.alert-tag  { margin-left:auto; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--gold); color:var(--navy); padding:.2rem .5rem; border-radius:999px; }

/* ─── FLOATING STATS ─────────────────────────────────────── */
.floating-stat { position:absolute; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.7rem 1rem; box-shadow:0 12px 35px rgba(13,31,74,.12); display:flex; align-items:center; gap:.6rem; animation:float 4s ease-in-out infinite; }
.floating-stat .fs-icon { font-size:.58rem; font-weight:800; color:var(--blue); background:rgba(26,63,160,.10); border:1px solid rgba(26,63,160,.18); border-radius:999px; padding:.2rem .45rem; letter-spacing:.05em; }
.floating-stat .fs-val  { font-family:var(--fh); font-size:1rem; font-weight:800; color:var(--navy); }
.floating-stat .fs-label{ font-size:.7rem; color:var(--slate); }
.fs1 { top:15%; right:-10%; animation-delay:0s; }
.fs2 { bottom:15%; left:-8%; animation-delay:1.5s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ─── SCROLL CUE ─────────────────────────────────────────── */
.scroll-cue { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--slate); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.scroll-mouse  { width:22px; height:34px; border:2px solid var(--slate); border-radius:12px; display:flex; justify-content:center; padding-top:5px; }
.scroll-wheel  { width:3px; height:6px; background:var(--gold); border-radius:2px; animation:scrollW 1.5s infinite; }
@keyframes scrollW { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(8px)} }

/* ─── STATS BANNER ───────────────────────────────────────── */
.stats-banner { background:var(--navy); padding:3.5rem clamp(1.5rem,5vw,4rem); }
.stats-inner  { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item  { text-align:center; }
.stat-num   { font-family:var(--fh); font-size:clamp(2rem,3.5vw,3rem); font-weight:800; color:var(--gold); }
.stat-desc  { font-size:.88rem; color:rgba(255,255,255,.6); margin-top:.4rem; font-weight:500; }
.counting   { display:inline-block; }

/* ─── SECTIONS ───────────────────────────────────────────── */
.section       { padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); }
.section-inner { max-width:1200px; margin:0 auto; }
.bg-mist       { background:var(--card-bg); }

.section-eyebrow { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.eyebrow-line    { width:28px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow-word    { font-family:var(--fm); font-size:.75rem; font-weight:500; color:var(--blue); letter-spacing:.1em; text-transform:uppercase; }

h2.section-title { font-family:var(--fh); font-weight:800; font-size:clamp(1.9rem,3.5vw,2.9rem); line-height:1.12; letter-spacing:-.025em; color:var(--ink); margin-bottom:1rem; }
.section-sub     { font-size:1.05rem; color:var(--slate); max-width:52ch; line-height:1.7; }

/* ─── FEATURES GRID ──────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3.5rem; }
.feat-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r); padding:1.6rem; position:relative; overflow:hidden; transition:all .3s; }
.feat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--gold)); opacity:0; transition:opacity .3s; }
.feat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(26,63,160,.2); }
.feat-card:hover::before { opacity:1; }
.feat-icon  { width:48px; height:48px; border-radius:12px; background:var(--navy); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.feat-title { font-family:var(--fh); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:.5rem; }
.feat-desc  { font-size:.9rem; color:var(--slate); line-height:1.65; }
.feat-link  { display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700; color:var(--blue); margin-top:.85rem; text-decoration:none; transition:gap .2s; }
.feat-link:hover { gap:.6rem; }

/* ─── SPLIT ──────────────────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.split.reverse { direction:rtl; }
.split.reverse > * { direction:ltr; }
.checklist { list-style:none; margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.checklist li { display:flex; align-items:flex-start; gap:.75rem; font-size:.95rem; color:var(--slate); line-height:1.5; }
.checklist li::before { content:'✓'; flex-shrink:0; width:22px; height:22px; border-radius:6px; background:rgba(26,63,160,.1); color:var(--blue); font-weight:700; font-size:.75rem; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.checklist li b { color:var(--ink); }

/* ─── VISUAL PANEL ───────────────────────────────────────── */
.visual-panel { background:#fff; border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.vp-header { background:var(--navy); padding:1rem 1.3rem; display:flex; align-items:center; gap:.6rem; }
.vp-icon  { font-size:1.1rem; }
.vp-title { font-size:.85rem; font-weight:700; color:rgba(255,255,255,.9); }
.vp-body  { padding:1.3rem; }
.table-custom { width:100%; border-collapse:collapse; font-size:.85rem; }
.table-custom thead th { font-size:.72rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.06em; padding:0 .8rem .6rem; border-bottom:1px solid var(--border); }
.table-custom tbody td { padding:.7rem .8rem; border-bottom:1px solid rgba(13,31,74,.05); color:var(--ink); }
.table-custom tbody tr:last-child td { border-bottom:none; }
.badge-step { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:var(--navy); color:#fff; font-size:.7rem; font-weight:800; }

/* ─── MODULES ────────────────────────────────────────────── */
.modules-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:3rem; }
.module-card { border:1px solid var(--border); border-radius:var(--r); padding:1.4rem; background:#fff; transition:all .3s; position:relative; overflow:hidden; }
.module-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:0; background:linear-gradient(to top,rgba(26,63,160,.05),transparent); transition:height .3s; }
.module-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(13,31,74,.1); border-color:rgba(26,63,160,.2); }
.module-card:hover::after { height:100%; }
.module-icon { font-size:1.6rem; margin-bottom:.85rem; }
.module-name { font-family:var(--fh); font-weight:700; font-size:1.02rem; color:var(--ink); margin-bottom:.4rem; }
.module-desc { font-size:.88rem; color:var(--slate); line-height:1.6; }
.module-tag  { display:inline-block; font-size:.68rem; font-weight:700; color:var(--blue); background:rgba(26,63,160,.08); padding:.2rem .55rem; border-radius:999px; margin-top:.75rem; }

/* ─── CAPABILITIES SUMMARY ───────────────────────────────── */
.cap-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.2rem; }
.cap-summary-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.2rem; box-shadow:0 8px 26px rgba(13,31,74,.06); }
.cap-summary-card h3 { font-family:var(--fh); font-size:.96rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin-bottom:.45rem; }
.cap-summary-card p { font-size:.84rem; line-height:1.6; color:var(--slate); }
.cap-summary-pills { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.25rem; }
.cap-summary-pills span { font-size:.67rem; font-weight:800; color:var(--blue); background:#fff; border:1px solid rgba(26,63,160,.2); border-radius:999px; letter-spacing:.03em; text-transform:uppercase; padding:.25rem .6rem; }

/* ─── WORKFLOW TABS ──────────────────────────────────────── */
.wf-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; background:#fff; border:1px solid var(--border); border-radius:14px; padding:.5rem; }
.wf-tab  { flex:1; min-width:fit-content; padding:.6rem 1rem; border-radius:10px; border:none; background:transparent; font-family:var(--fb); font-size:.85rem; font-weight:700; color:var(--slate); cursor:pointer; transition:all .22s; white-space:nowrap; }
.wf-tab:hover  { background:var(--card-bg); color:var(--navy); }
.wf-tab.active { background:var(--navy); color:#fff; }
.wf-panels { position:relative; }
.wf-panel  { display:none; }
.wf-panel.active { display:block; }
.wf-split { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.wf-info  { padding-top:.5rem; }
.wf-step-badge  { display:inline-block; font-family:var(--fm); font-size:.72rem; font-weight:500; color:var(--blue); background:rgba(26,63,160,.08); border:1px solid rgba(26,63,160,.15); padding:.25rem .7rem; border-radius:999px; margin-bottom:1rem; }
.wf-panel-title { font-family:var(--fh); font-weight:800; font-size:1.55rem; color:var(--ink); letter-spacing:-.02em; line-height:1.2; margin-bottom:.85rem; }
.wf-panel-desc  { font-size:.95rem; color:var(--slate); line-height:1.7; margin-bottom:1rem; }
.wf-actions-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1.3rem; }
.wf-action-row  { display:flex; align-items:flex-start; gap:.85rem; }
.wf-action-icon { flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; }
.wf-action-icon.income  { background:rgba(22,163,74,.12);  color:#16a34a; }
.wf-action-icon.expense { background:rgba(220,38,38,.10);  color:#dc2626; }
.wf-action-icon.transfer{ background:rgba(126,34,206,.10); color:#7e22ce; }
.wf-action-icon.journal { background:rgba(214,178,74,.15); color:#b45309; }
.wf-action-name { font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:.15rem; }
.wf-action-desc { font-size:.82rem; color:var(--slate); line-height:1.5; }

/* ─── MOCKUP CHROME ──────────────────────────────────────── */
.wf-mockup    { position:relative; }
.mockup-chrome{ border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 20px 60px rgba(13,31,74,.12); background:#fff; }
.mockup-bar   { background:#f1f3f9; border-bottom:1px solid var(--border); padding:.6rem 1rem; display:flex; align-items:center; gap:.75rem; }
.m-dots { display:flex; gap:5px; }
.m-dots span { width:9px; height:9px; border-radius:50%; }
.m-dots span:nth-child(1){background:#ff5f57} .m-dots span:nth-child(2){background:#febc2e} .m-dots span:nth-child(3){background:#28c840}
.m-url    { flex:1; font-family:var(--fm); font-size:.68rem; color:var(--slate); background:#fff; border:1px solid var(--border); border-radius:6px; padding:.2rem .6rem; text-align:center; }
.m-period { display:flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; color:#16a34a; white-space:nowrap; }
.m-period-dot { width:7px; height:7px; border-radius:50%; background:#16a34a; animation:pulsedot 1.5s infinite; }
.mockup-body  { padding:1rem; }
.m-section-title { font-family:var(--fh); font-weight:800; font-size:.82rem; color:var(--navy); margin-bottom:.6rem; }

.m-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-bottom:.75rem; }
.m-kpi  { display:flex; align-items:center; gap:.5rem; background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:.55rem .65rem; }
.m-kpi-icon  { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0; }
.m-kpi-label { font-size:.65rem; color:var(--slate); font-weight:600; }
.m-kpi-val   { font-family:var(--fh); font-size:.88rem; font-weight:800; }
.m-kpi-val.green{color:#16a34a} .m-kpi-val.red{color:#dc2626} .m-kpi-val.blue{color:var(--blue)} .m-kpi-val.purple{color:#7e22ce}

.m-quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; }
.m-qa { border-radius:10px; padding:.7rem .5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; min-height:75px; border:1px solid rgba(0,0,0,.06); }
.income-bg{background:rgba(22,163,74,.08)} .expense-bg{background:rgba(220,38,38,.07)} .transfer-bg{background:rgba(126,34,206,.07)} .journal-bg{background:rgba(214,178,74,.12)}
.m-qa-badge { font-size:.55rem; font-weight:800; padding:.12rem .4rem; border-radius:4px; align-self:flex-end; }
.income-badge{background:#16a34a;color:#fff} .expense-badge{background:#dc2626;color:#fff} .transfer-badge{background:#7e22ce;color:#fff} .journal-badge{background:#b45309;color:#fff}
.m-qa-icon { font-size:1.1rem; font-weight:900; line-height:1; }
.red-icon{color:#dc2626} .purple-icon{color:#7e22ce} .gold-icon{color:#b45309}
.m-qa-name { font-size:.65rem; font-weight:700; color:var(--ink); line-height:1.2; }

/* Approval mockup */
.m-approval-list { display:flex; flex-direction:column; gap:.45rem; margin-bottom:.75rem; }
.m-approval-item { display:flex; align-items:center; justify-content:space-between; background:var(--card-bg); border:1px solid var(--border); border-radius:9px; padding:.55rem .7rem; gap:.5rem; }
.m-appr-left { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; }
.m-appr-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.m-appr-name { font-size:.72rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-appr-meta { font-size:.62rem; color:var(--slate); }
.m-appr-badge { font-size:.6rem; font-weight:800; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.m-appr-badge.pending{background:#fef9c3;color:#854d0e} .m-appr-badge.approved{background:#dcfce7;color:#166534} .m-appr-badge.rejected{background:#fee2e2;color:#991b1b}
.m-approval-chain { background:rgba(26,63,160,.05); border:1px solid rgba(26,63,160,.12); border-radius:9px; padding:.65rem .8rem; }
.m-chain-title { font-size:.65rem; font-weight:700; color:var(--slate); margin-bottom:.45rem; }
.m-chain-steps { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.m-chain-step  { font-size:.65rem; font-weight:700; color:var(--slate); background:#fff; border:1px solid var(--border); border-radius:6px; padding:.25rem .55rem; }
.m-chain-step.done  { color:#16a34a; border-color:#16a34a; }
.m-chain-step.active{ color:var(--blue); border-color:var(--blue); background:rgba(26,63,160,.06); }
.m-chain-arrow { font-size:.75rem; color:var(--slate); }

/* Assets mockup */
.m-asset-table  { background:var(--card-bg); border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-top:.65rem; }
.m-asset-header { display:grid; grid-template-columns:2fr 1.2fr 1fr .8fr; gap:.5rem; padding:.45rem .7rem; border-bottom:1px solid var(--border); }
.m-asset-header span { font-size:.62rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; }
.m-asset-row { display:grid; grid-template-columns:2fr 1.2fr 1fr .8fr; gap:.5rem; padding:.5rem .7rem; border-bottom:1px solid rgba(13,31,74,.04); font-size:.7rem; color:var(--ink); align-items:center; }
.m-asset-row:last-child { border-bottom:none; }
.m-status { font-size:.58rem; font-weight:800; padding:.15rem .4rem; border-radius:4px; }
.m-status.active-s{background:#dcfce7;color:#166534} .m-status.depr-s{background:#f3f4f6;color:#6b7280}
.m-run-depr { display:flex; align-items:center; gap:.4rem; background:var(--navy); color:#fff; font-size:.72rem; font-weight:700; padding:.55rem .85rem; border-radius:8px; margin-top:.6rem; cursor:pointer; width:fit-content; }

/* Fiscal mockup */
.m-fiscal-cards { display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:.5rem; margin-bottom:.75rem; }
.m-fiscal-card  { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:.7rem; }
.m-fiscal-card.ytd { background:rgba(26,63,160,.03); }
.m-fiscal-label { font-size:.62rem; font-weight:700; color:var(--slate); margin-bottom:.3rem; }
.m-fiscal-year  { font-family:var(--fh); font-size:1rem; font-weight:800; color:var(--ink); }
.m-fiscal-range { font-size:.62rem; color:var(--slate); margin-top:.15rem; }
.m-fiscal-open  { font-size:.65rem; font-weight:800; color:#16a34a; background:#dcfce7; padding:.15rem .5rem; border-radius:4px; display:inline-block; margin-top:.4rem; }
.m-ytd-row { display:flex; justify-content:space-between; font-size:.68rem; padding:.2rem 0; border-bottom:1px solid rgba(13,31,74,.06); color:var(--slate); }
.m-ytd-row:last-child { border-bottom:none; }
.m-ytd-row .green{color:#16a34a;font-weight:700} .m-ytd-row .red{color:#dc2626;font-weight:700} .m-ytd-row .blue{color:var(--blue);font-weight:700}
.m-period-bar   { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:.7rem; }
.m-period-label { font-size:.65rem; font-weight:700; color:var(--slate); margin-bottom:.5rem; }
.m-months { display:grid; grid-template-columns:repeat(12,1fr); gap:.25rem; }
.m-month  { font-size:.58rem; font-weight:700; text-align:center; padding:.3rem .1rem; border-radius:5px; border:1px solid var(--border); color:var(--slate); background:#fff; }
.m-month .m-month-status { font-size:.55rem; margin-top:.1rem; }
.m-month.closed  { background:#dcfce7; border-color:#16a34a; color:#166534; }
.m-month.active-m{ background:rgba(26,63,160,.1); border-color:var(--blue); color:var(--blue); }

/* AI chat mockup */
.m-ai-layout { display:grid; grid-template-columns:130px 1fr; height:280px; }
.m-ai-sidebar { background:#f8faff; border-right:1px solid var(--border); padding:.75rem .6rem; display:flex; flex-direction:column; gap:.35rem; }
.m-ai-sidebar-title { font-size:.65rem; font-weight:800; color:var(--slate); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.m-ai-convo { font-size:.68rem; font-weight:600; color:var(--slate); padding:.35rem .5rem; border-radius:6px; }
.m-ai-convo.active-c { background:rgba(26,63,160,.08); color:var(--navy); font-weight:700; }
.m-ai-new  { font-size:.68rem; font-weight:700; color:var(--blue); margin-top:auto; padding:.35rem .5rem; }
.m-ai-chat { display:flex; flex-direction:column; gap:.6rem; padding:.8rem; overflow:hidden; }
.m-ai-msg  { font-size:.72rem; line-height:1.5; }
.m-ai-msg.user-msg { align-self:flex-end; background:var(--blue); color:#fff; padding:.5rem .75rem; border-radius:10px 10px 3px 10px; max-width:80%; }
.m-ai-msg.ai-msg   { display:flex; gap:.45rem; color:var(--ink); }
.m-ai-avatar { flex-shrink:0; width:22px; height:22px; border-radius:6px; background:rgba(214,178,74,.2); display:flex; align-items:center; justify-content:center; font-size:.7rem; }
.m-mini-bars { display:flex; flex-direction:column; gap:.25rem; margin:.35rem 0; }
.m-mini-bars > div { display:flex; align-items:center; gap:.4rem; font-size:.65rem; }
.m-mini-bars > div > span { width:24px; text-align:right; color:var(--slate); }
.m-mbar { height:12px; border-radius:3px; background:rgba(26,63,160,.2); display:flex; align-items:center; padding:0 5px; font-size:.58rem; font-weight:700; color:var(--navy); }
.m-mbar.active-bar { background:var(--blue); color:#fff; }
.m-ai-chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:auto; }
.m-ai-chips span { font-size:.62rem; font-weight:700; background:var(--card-bg); border:1px solid var(--border); border-radius:999px; padding:.2rem .55rem; color:var(--navy); cursor:pointer; }
.m-ai-input { font-size:.72rem; color:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:8px; padding:.45rem .65rem; background:#fff; }

/* ─── CAPABILITY TAB ─────────────────────────────────────── */
.capability-mockup { border-color:rgba(13,31,74,.13); }
.capability-mockup .m-period { font-size:.62rem; }
.capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.cap-card { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:.7rem .75rem; }
.cap-card-wide { grid-column:1 / -1; background:rgba(26,63,160,.06); border-color:rgba(26,63,160,.18); }
.cap-title { font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); font-weight:800; margin-bottom:.25rem; }
.cap-copy { font-size:.72rem; line-height:1.5; color:var(--slate); }
.capability-foot { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.cap-pill { font-size:.63rem; font-weight:800; color:var(--blue); border:1px solid rgba(26,63,160,.22); border-radius:999px; padding:.22rem .55rem; background:#fff; letter-spacing:.03em; text-transform:uppercase; }

/* ─── IMPLEMENTATION STEPS ───────────────────────────────── */
.impl-section { margin-top:5rem; }
.impl-steps { display:flex; align-items:flex-start; }
.impl-step  { flex:1; background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.4rem; transition:all .3s; }
.impl-step:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.impl-step.featured-step { background:var(--navy); border-color:var(--navy); }
.impl-step.featured-step .impl-num  { color:var(--gold); }
.impl-step.featured-step .impl-week { color:rgba(255,255,255,.5); }
.impl-step.featured-step .impl-title{ color:#fff; }
.impl-step.featured-step .impl-desc { color:rgba(255,255,255,.6); }
.impl-num   { font-family:var(--fh); font-size:1.8rem; font-weight:800; color:var(--blue); opacity:.4; line-height:1; margin-bottom:.4rem; }
.impl-week  { font-family:var(--fm); font-size:.72rem; color:var(--slate); margin-bottom:.4rem; }
.impl-title { font-family:var(--fh); font-weight:800; font-size:1rem; color:var(--ink); margin-bottom:.5rem; }
.impl-desc  { font-size:.85rem; color:var(--slate); line-height:1.6; }
.impl-arrow { font-size:1.3rem; color:var(--gold); padding:1.5rem .5rem; align-self:flex-start; margin-top:1.2rem; flex-shrink:0; }

/* ─── AI SECTION ─────────────────────────────────────────── */
.ai-bg  { background:linear-gradient(135deg,var(--navy) 0%,#0a1836 100%); }
.ai-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); }
.ai-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(214,178,74,.15); border:1px solid rgba(214,178,74,.3); padding:.35rem .85rem; border-radius:999px; margin-bottom:1.2rem; }
.ai-badge span { font-size:.78rem; font-weight:700; color:var(--gold); font-family:var(--fm); }
.ai-title { font-family:var(--fh); font-weight:800; font-size:clamp(1.9rem,3vw,2.7rem); color:#fff; line-height:1.15; letter-spacing:-.02em; margin-bottom:1rem; }
.ai-sub   { font-size:1rem; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:2rem; }
.ai-feats { display:flex; flex-direction:column; gap:.8rem; }
.ai-feat  { display:flex; align-items:flex-start; gap:.85rem; }
.ai-feat-icon  { width:36px; height:36px; border-radius:10px; background:rgba(214,178,74,.15); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ai-feat-title { font-weight:700; font-size:.9rem; color:#fff; margin-bottom:.2rem; }
.ai-feat-desc  { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.55; }
.chat-panel  { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:20px; overflow:hidden; }
.chat-header { padding:1rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.6rem; }
.chat-avatar { width:32px; height:32px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:var(--navy); }
.chat-name   { font-size:.85rem; font-weight:700; color:#fff; }
.chat-status { font-size:.72rem; color:#28c840; margin-top:1px; }
.chat-body   { padding:1.3rem; display:flex; flex-direction:column; gap:1rem; }
.chat-msg    { max-width:85%; }
.msg-label   { font-size:.68rem; color:rgba(255,255,255,.35); margin-bottom:.3rem; font-weight:600; }
.msg-user    { background:var(--blue); border-radius:16px 16px 4px 16px; padding:.75rem 1rem; font-size:.88rem; color:#fff; }
.msg-ai      { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:16px 16px 16px 4px; padding:.75rem 1rem; font-size:.88rem; color:rgba(255,255,255,.9); line-height:1.6; }
.chat-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.4rem; }
.cm-tile  { background:rgba(255,255,255,.06); border-radius:10px; padding:.6rem; text-align:center; }
.cm-val   { font-family:var(--fh); font-size:1rem; font-weight:800; color:var(--gold); }
.cm-label { font-size:.65rem; color:rgba(255,255,255,.45); margin-top:.15rem; }

/* ─── PRICING ────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; }
.price-card   { border:1px solid var(--border); border-radius:var(--r); padding:1.6rem; background:#fff; transition:all .3s; position:relative; }
.price-card.featured { background:var(--navy); border-color:var(--navy); }
.price-card.featured .price-tier { color:var(--gold); }
.price-card.featured .price-for  { color:rgba(255,255,255,.6); }
.price-card.featured .price-list li { color:rgba(255,255,255,.75); }
.price-card.featured .price-list li::before { color:var(--gold); background:rgba(214,178,74,.15); }
.price-featured-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--navy); font-size:.68rem; font-weight:800; padding:.2rem .9rem; border-radius:0 0 8px 8px; letter-spacing:.04em; }
.price-tier { font-family:var(--fh); font-weight:800; font-size:1.15rem; color:var(--ink); margin-bottom:.3rem; }
.price-for  { font-size:.82rem; color:var(--slate); margin-bottom:1.2rem; line-height:1.5; }
.price-divider { height:1px; background:rgba(13,31,74,.08); margin:1rem 0; }
.price-card.featured .price-divider { background:rgba(255,255,255,.1); }
.price-list { list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.4rem; }
.price-list li { display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--slate); }
.price-list li::before { content:'✓'; flex-shrink:0; width:18px; height:18px; border-radius:5px; background:rgba(26,63,160,.08); color:var(--blue); font-size:.65rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.price-cta { display:block; text-align:center; padding:.65rem 1rem; border-radius:10px; font-weight:700; font-size:.88rem; text-decoration:none; border:2px solid rgba(13,31,74,.18); color:var(--navy); transition:all .2s; }
.price-cta:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.price-card.featured .price-cta { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.price-card.featured .price-cta:hover { background:var(--gold2); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list { margin-top:2.5rem; display:flex; flex-direction:column; gap:.75rem; }
.faq-item { border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-q { width:100%; text-align:left; padding:1.1rem 1.3rem; font-family:var(--fb); font-weight:700; font-size:.97rem; color:var(--ink); background:transparent; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:background .2s; }
.faq-q:hover { background:var(--card-bg); }
.faq-q.open  { background:var(--card-bg); }
.faq-arrow   { flex-shrink:0; width:22px; height:22px; border-radius:6px; background:rgba(13,31,74,.07); display:flex; align-items:center; justify-content:center; font-size:.75rem; transition:transform .3s; }
.faq-q.open .faq-arrow { transform:rotate(180deg); background:var(--navy); color:#fff; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease,padding .3s; font-size:.92rem; color:var(--slate); line-height:1.7; }
.faq-a.open { max-height:300px; padding:0 1.3rem 1.1rem; }

/* ─── CTA ────────────────────────────────────────────────── */
.cta-section { background:linear-gradient(135deg,#f0f5ff 0%,#fff8e8 100%); border-top:1px solid var(--border); padding:clamp(4rem,7vw,7rem) clamp(1.5rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:-60%; left:-20%; width:140%; height:200%; background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(26,63,160,.07),transparent); pointer-events:none; }
.cta-inner  { position:relative; max-width:680px; margin:0 auto; }
.cta-kicker { font-family:var(--fm); font-size:.78rem; color:var(--blue); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.cta-title  { font-family:var(--fh); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.03em; color:var(--ink); margin-bottom:1rem; line-height:1.1; }
.cta-sub    { font-size:1rem; color:var(--slate); line-height:1.7; margin-bottom:2.2rem; }
.cta-actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.email-copy  { display:flex; align-items:center; gap:.5rem; margin-top:1.4rem; justify-content:center; font-size:.88rem; color:var(--slate); }
.email-copy a { color:var(--navy); font-weight:700; text-decoration:none; }
.email-copy a:hover { text-decoration:underline; }
.copy-btn { background:var(--card-bg); border:1px solid var(--border); border-radius:6px; padding:.25rem .6rem; font-size:.75rem; font-weight:700; cursor:pointer; color:var(--navy); transition:all .2s; }
.copy-btn:hover { background:var(--navy); color:#fff; }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer { background:#060c1c; padding:3rem clamp(1.5rem,5vw,4rem) 2rem; }
.footer-inner    { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-logo     { display:flex; align-items:center; gap:.55rem; }
.footer-logo img { height:26px; width:auto; }
.footer-wordmark { font-family:var(--fh); font-weight:800; color:#fff; font-size:1rem; letter-spacing:.06em; }
.footer-copy     { font-size:.8rem; color:rgba(255,255,255,.35); margin-top:.4rem; }
.footer-links    { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a  { font-size:.85rem; color:rgba(255,255,255,.55); text-decoration:none; font-weight:600; transition:color .2s; }
.footer-links a:hover { color:#fff; }

/* ─── REVEAL ─────────────────────────────────────────────── */
.reveal { opacity:1; transform:none; }
body.js-loaded .reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
body.js-loaded .reveal.visible { opacity:1; transform:none; }
body.js-loaded .reveal-delay-1 { transition-delay:.10s; }
body.js-loaded .reveal-delay-2 { transition-delay:.20s; }
body.js-loaded .reveal-delay-3 { transition-delay:.30s; }
body.js-loaded .reveal-delay-4 { transition-delay:.40s; }

/* ─── UTILS ──────────────────────────────────────────────── */
.counting { display:inline-block; }
.blink { animation:blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .hero-inner    { grid-template-columns:1fr; gap:2.5rem; }
  .hero-card     { transform:none; max-width:520px; }
  .fs1,.fs2      { display:none; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .split         { grid-template-columns:1fr; gap:2.5rem; }
  .split.reverse { direction:ltr; }
  .ai-inner      { grid-template-columns:1fr; }
  .pricing-grid  { grid-template-columns:repeat(2,1fr); }
  .stats-inner   { grid-template-columns:repeat(2,1fr); }
  .wf-split      { grid-template-columns:1fr; gap:1.8rem; }
  .cap-summary-grid { grid-template-columns:repeat(2,1fr); }
  .impl-steps    { flex-direction:column; }
  .impl-arrow    { transform:rotate(90deg); align-self:center; }
  .m-fiscal-cards{ grid-template-columns:1fr; }
  .m-ai-layout   { grid-template-columns:1fr; height:auto; }
  .m-ai-sidebar  { display:none; }
}
@media (max-width:768px) {
  .nav-links,.nav-ctas { display:none; }
  .hamburger     { display:flex; }
  .features-grid { grid-template-columns:1fr; }
  .modules-grid  { grid-template-columns:1fr; }
  .cap-summary-grid { grid-template-columns:1fr; }
  .pricing-grid  { grid-template-columns:1fr; }
  .stats-inner   { grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  .wf-tab        { font-size:.75rem; padding:.5rem .65rem; }
  .m-quick-actions { grid-template-columns:repeat(2,1fr); }
  .m-kpis        { grid-template-columns:repeat(2,1fr); }
  .m-asset-header,.m-asset-row { grid-template-columns:2fr 1fr 1fr; }
  .m-asset-header span:nth-child(2),.m-asset-row span:nth-child(2) { display:none; }
  .capability-grid { grid-template-columns:1fr; }
  .cap-card-wide { grid-column:auto; }
}