:root {
  --bg: #f6f7f7;
  --surface: #ffffff;
  --surface-soft: #f1f2f1;
  --ink: #111827;
  --muted: #667085;
  --line: #e4e7eb;
  --brand: #383333;
  --brand-strong: #242020;
  --accent: #1d6b55;
  --accent-soft: #e8f3ef;
  --warning: #a16207;
  --danger: #b42318;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --shadow-sm: 0 10px 30px rgba(17, 24, 39, .06);
  --shadow: 0 24px 70px rgba(17, 24, 39, .12);
  --container: min(1180px, calc(100% - 40px));
  --header-h: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { flex: 0 0 auto; }
code { padding: .15rem .35rem; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: .9em; }
.container { width: var(--container); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 999; padding: 10px 14px; border-radius: 10px; background: #fff; color: #111; box-shadow: var(--shadow-sm); }
.skip-link:focus { top: 16px; }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  color: #fff;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled,
body:not(.home-page) .site-header {
  color: var(--ink);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  border-color: rgba(17,24,39,.08);
  box-shadow: 0 8px 30px rgba(17,24,39,.05);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 800; letter-spacing: -.04em; }
.site-header.scrolled .brand-mark, body:not(.home-page) .brand-mark { background: var(--brand); border-color: var(--brand); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.brand-copy small { margin-top: 5px; font-size: 11px; opacity: .68; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.desktop-nav a, .text-link { font-size: 14px; font-weight: 600; opacity: .83; transition: opacity .2s, color .2s; }
.desktop-nav a:hover, .text-link:hover { opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 15px; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); align-items: center; justify-content: center; cursor: pointer; }
.site-header.scrolled .menu-toggle, body:not(.home-page) .menu-toggle { background: #f1f2f3; }
.menu-close-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-open-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-icon { display: inline-flex; }
.mobile-menu { display: none; }

/* Buttons */
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid transparent; border-radius: 13px; font-size: 14px; font-weight: 750; transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-1px); }
.button-sm { min-height: 40px; padding-inline: 15px; border-radius: 11px; }
.button-lg { min-height: 52px; padding-inline: 22px; border-radius: 15px; }
.button-full { width: 100%; }
.button-primary { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 10px 22px rgba(56,51,51,.18); }
.button-primary:hover { background: #252121; }
.button-secondary { color: var(--ink); background: #fff; border-color: var(--line); }
.button-secondary:hover { border-color: #c9ced5; background: #fafafa; }
.button-light { color: var(--ink); background: #fff; border-color: #fff; box-shadow: 0 14px 35px rgba(0,0,0,.16); }
.button-dark-ghost { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.button-dark-ghost:hover { background: rgba(255,255,255,.12); }

/* Shared headings */
.section { padding: 106px 0; }
.section-soft { background: #eef0ef; }
.section-heading { max-width: 720px; }
.section-heading.centered { margin: 0 auto 52px; text-align: center; }
.section-heading h2, .workflow-copy h2, .security-card h2, .faq-copy h2, .final-cta h2, .blog-hero h1, .post-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(2.15rem, 4.3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.section-heading p, .workflow-copy > p, .security-card p, .faq-copy > p { margin: 20px 0 0; color: var(--muted); font-size: 18px; }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 46px; }
.eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; color: #326f5c; background: var(--accent-soft); border: 1px solid #d7ebe4; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow-dark { color: #e5e7eb; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: 930px; padding: calc(var(--header-h) + 92px) 0 50px; color: #fff; background: radial-gradient(circle at 74% 20%, #33453d 0, transparent 32%), linear-gradient(135deg, #0b0d12 0%, #171719 48%, #202422 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 86%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-glow-one { width: 430px; height: 430px; right: -120px; top: 120px; background: rgba(49,110,89,.18); }
.hero-glow-two { width: 380px; height: 380px; left: -180px; bottom: -80px; background: rgba(109,94,85,.12); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.95fr) minmax(540px,1.05fr); align-items: center; gap: 72px; }
.hero-copy h1 { max-width: 680px; margin: 23px 0 0; font-size: clamp(3.5rem, 6.2vw, 6.6rem); line-height: .92; letter-spacing: -.075em; }
.hero-lead { max-width: 650px; margin: 30px 0 0; color: #c7cbd1; font-size: 20px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 28px; color: #cbd0d5; font-size: 13px; }
.hero-trust div { display: inline-flex; align-items: center; gap: 7px; }
.hero-product { position: relative; }
.app-window { overflow: hidden; border-radius: 24px; background: #f8f8f7; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 38px 100px rgba(0,0,0,.38); }
.hero-window { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: center; }
.window-topbar { height: 50px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e7eb; color: #344054; }
.window-dots { display: flex; gap: 5px; }
.window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #d0d5dd; }
.window-title { font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.window-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--brand); font-size: 9px; font-weight: 800; }
.app-layout { min-height: 475px; display: grid; grid-template-columns: 58px 1fr; }
.app-sidebar { padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 9px; background: #fff; border-right: 1px solid #e5e7eb; color: #667085; }
.mini-logo { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 11px; color: #fff; background: var(--brand); font-size: 13px; font-weight: 800; }
.side-item { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; }
.side-item.active { color: #fff; background: var(--brand); }
.app-content { padding: 20px; color: var(--ink); }
.preview-heading { display: flex; align-items: center; justify-content: space-between; }
.preview-kicker { color: #667085; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.preview-heading h3 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.04em; }
.preview-filter { padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; color: #667085; font-size: 9px; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 16px; }
.mini-metric { min-height: 92px; padding: 13px; border: 1px solid #e5e7eb; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(17,24,39,.035); }
.mini-metric span, .mini-metric small { display: block; color: #7a8492; font-size: 8px; }
.mini-metric strong { display: block; margin: 7px 0 5px; font-size: 16px; }
.mini-metric small { color: #26785e; }
.preview-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 10px; margin-top: 10px; }
.chart-card, .agenda-card { min-height: 218px; padding: 13px; border: 1px solid #e5e7eb; border-radius: 15px; background: #fff; }
.card-caption { display: flex; align-items: center; justify-content: space-between; color: #344054; font-size: 9px; font-weight: 750; }
.card-caption small { color: #98a2b3; font-weight: 500; }
.chart-bars { height: 145px; display: flex; align-items: flex-end; gap: 9px; padding: 20px 6px 0; border-bottom: 1px solid #eceef1; background: linear-gradient(to bottom, transparent 24%, #f5f6f7 25%, transparent 26%, transparent 49%, #f5f6f7 50%, transparent 51%, transparent 74%, #f5f6f7 75%, transparent 76%); }
.chart-bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg,#477e6d,#b5d1c7); }
.appointment { display: flex; gap: 9px; align-items: center; margin-top: 15px; }
.appointment i { width: 8px; height: 8px; border-radius: 50%; background: #3a846c; box-shadow: 0 0 0 4px #e7f2ee; }
.appointment strong, .appointment small { display: block; }
.appointment strong { font-size: 8px; }
.appointment small { margin-top: 2px; color: #98a2b3; font-size: 7px; }
.floating-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(20,22,24,.85); backdrop-filter: blur(15px); color: #e9eaec; box-shadow: 0 20px 50px rgba(0,0,0,.25); font-size: 11px; font-weight: 700; }
.chip-top { top: -24px; right: 42px; }
.chip-bottom { left: -32px; bottom: 36px; }
.hero-capabilities { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 74px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.06); }
.hero-capabilities div { padding: 23px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.hero-capabilities div:last-child { border-right: 0; }
.hero-capabilities strong, .hero-capabilities span { display: block; }
.hero-capabilities strong { font-size: 19px; }
.hero-capabilities span { margin-top: 4px; color: #aeb5bc; font-size: 12px; }

/* Feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.feature-card { min-height: 318px; padding: 25px; display: flex; flex-direction: column; border: 1px solid #dde1e4; border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 10px 35px rgba(17,24,39,.045); transition: transform .25s, box-shadow .25s, border-color .25s; transition-delay: var(--delay,0ms); }
.feature-card:hover { transform: translateY(-5px); border-color: #c8cecf; box-shadow: 0 24px 50px rgba(17,24,39,.09); }
.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--brand); }
.feature-meta { margin-top: 24px; color: #6a746f; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.feature-card h3 { margin: 9px 0 0; font-size: 20px; letter-spacing: -.03em; }
.feature-card p { margin: 13px 0 0; color: var(--muted); font-size: 14px; }
.feature-card a { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; color: #365e51; font-size: 13px; font-weight: 750; }

/* Workflow */
.workflow-section { overflow: hidden; color: #fff; background: #151719; }
.workflow-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 85px; align-items: center; }
.workflow-copy > p { color: #b2b8bf; }
.workflow-list { margin-top: 38px; display: grid; gap: 21px; }
.workflow-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.workflow-list > div > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #dfe5e2; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: 11px; font-weight: 800; }
.workflow-list strong { font-size: 15px; }
.workflow-list p { margin: 4px 0 0; color: #929aa3; font-size: 13px; }
.workflow-visual { position: relative; min-height: 520px; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-lines path { fill: none; stroke: rgba(117,170,151,.35); stroke-width: 2; stroke-dasharray: 7 7; }
.flow-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: rgba(255,255,255,.075); backdrop-filter: blur(14px); box-shadow: 0 20px 45px rgba(0,0,0,.2); }
.flow-node span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #e9f2ee; background: rgba(75,137,116,.24); }
.flow-node strong { font-size: 13px; }
.flow-node-main { left: 50%; top: 50%; width: 245px; padding: 20px; display: grid; grid-template-columns: 50px 1fr; transform: translate(-50%,-50%); background: #f8f8f7; color: var(--ink); border-color: #fff; }
.flow-node-main span { width: 50px; height: 50px; background: var(--brand); color: #fff; }
.flow-node-main strong, .flow-node-main small { display: block; }
.flow-node-main small { grid-column: 2; margin-top: -7px; color: #6b7280; font-size: 10px; }
.flow-node-a { left: 3%; top: 9%; }
.flow-node-b { right: 2%; top: 9%; }
.flow-node-c { left: 3%; bottom: 9%; }
.flow-node-d { right: 2%; bottom: 9%; }

/* Demos */
.demos-section { background: #fff; }
.demo-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 7px; margin: 42px 0 24px; border: 1px solid var(--line); border-radius: 15px; background: #f6f7f7; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display:none; }
.demo-tab { min-width: max-content; padding: 10px 16px; border: 0; border-radius: 10px; color: #667085; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
.demo-tab.active { color: #fff; background: var(--brand); box-shadow: 0 8px 20px rgba(56,51,51,.18); }
.demo-stage { overflow: hidden; border: 1px solid #dde1e4; border-radius: 28px; background: #f4f5f4; box-shadow: var(--shadow-sm); }
.demo-panel { display: none; grid-template-columns: 340px 1fr; gap: 28px; min-height: 640px; padding: 28px; }
.demo-panel.active { display: grid; }
.demo-copy { align-self: center; padding: 20px; }
.demo-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--brand); font-size: 12px; font-weight: 800; }
.demo-copy h3 { margin: 20px 0 0; font-size: 32px; line-height: 1.06; letter-spacing: -.05em; }
.demo-copy > p { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.check-list { display: grid; gap: 11px; margin: 24px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 8px; color: #4b5563; font-size: 13px; }
.check-list svg { color: var(--accent); }
.demo-screen { display: flex; align-items: center; min-width: 0; }
.demo-window { width: 100%; border-color: #d8dcdf; box-shadow: 0 25px 65px rgba(17,24,39,.14); }
.demo-screen-image { padding: 12px; }
.demo-screen-image img { width: 100%; border-radius: 20px; border: 1px solid #d8dcdf; box-shadow: 0 25px 65px rgba(17,24,39,.12); }
.demo-dashboard-content, .calendar-preview, .medical-preview, .stock-preview { min-height: 505px; padding: 22px; color: var(--ink); background: #f8f8f7; }
.demo-page-title, .calendar-toolbar, .stock-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.demo-page-title small, .calendar-toolbar small, .stock-hero small { display:block; color:#7b8491; font-size:9px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.demo-page-title strong, .calendar-toolbar strong, .stock-hero strong { display:block; margin-top:5px; font-size:19px; }
.demo-page-title > span, .calendar-actions span, .calendar-actions b, .stock-hero > span { padding:8px 10px; border-radius:9px; border:1px solid #e1e4e8; background:#fff; font-size:9px; font-weight:700; }
.demo-metric-grid, .stock-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:17px; }
.demo-metric-grid > div, .stock-metrics > div { padding:13px; min-height:78px; border:1px solid #e2e5e8; border-radius:14px; background:#fff; }
.demo-metric-grid small, .stock-metrics small { display:block; color:#7b8491; font-size:8px; }
.demo-metric-grid strong, .stock-metrics strong { display:block; margin-top:8px; font-size:15px; }
.demo-chart-area { display:grid; grid-template-columns:1.35fr .65fr; gap:10px; margin-top:10px; }
.demo-chart-main, .demo-side-list { min-height:285px; padding:14px; border:1px solid #e2e5e8; border-radius:15px; background:#fff; }
.demo-chart-main > span, .demo-side-list > span { font-size:9px; font-weight:750; }
.demo-chart-main svg { width:100%; margin-top:28px; overflow:visible; }
.demo-chart-main .area { fill:rgba(47,126,99,.13); }
.demo-chart-main .line { fill:none; stroke:#2f7e63; stroke-width:3; }
.demo-side-list > div { display:flex; align-items:center; gap:8px; padding:13px 0; border-bottom:1px solid #eef0f2; }
.demo-side-list i { width:7px; height:7px; border-radius:50%; background:#3e8b70; }
.demo-side-list strong, .demo-side-list small { display:block; font-size:9px; }
.demo-side-list small { margin-top:3px; color:#98a2b3; }
.calendar-actions { display:flex; gap:7px; }
.calendar-actions b { color:#fff; background:var(--brand); border-color:var(--brand); }
.calendar-grid { display:grid; grid-template-columns:46px repeat(5,1fr); margin-top:17px; border:1px solid #e2e5e8; border-radius:14px; background:#fff; overflow:hidden; }
.time-column { display:grid; grid-template-rows:repeat(6,1fr); padding-top:35px; border-right:1px solid #edf0f2; color:#98a2b3; font-size:7px; text-align:center; }
.day-column { position:relative; min-height:420px; border-right:1px solid #edf0f2; background:repeating-linear-gradient(to bottom, transparent 0, transparent 67px, #f0f2f4 68px); }
.day-column:last-child { border-right:0; }
.day-column.today { background-color:#f5f8f7; }
.day-column > strong { display:block; height:35px; padding:11px 5px; color:#667085; font-size:7px; text-align:center; }
.event-card { position:absolute; left:7px; right:7px; min-height:66px; padding:8px; border-radius:9px; border-left:3px solid; box-shadow:0 7px 15px rgba(17,24,39,.07); }
.event-card b, .event-card span, .event-card small { display:block; }
.event-card b { font-size:7px; }
.event-card span { margin-top:4px; font-size:8px; font-weight:750; }
.event-card small { margin-top:3px; font-size:6px; opacity:.7; }
.event-a { color:#28634f; background:#e9f5f0; border-color:#39856b; }
.event-b { color:#6a4e1c; background:#fff5db; border-color:#c9932c; }
.event-c { color:#344d78; background:#eaf0fb; border-color:#5f7faf; }
.now-line { position:absolute; left:0; right:0; height:1px; background:#db4242; }
.now-line::before { content:""; position:absolute; left:-3px; top:-3px; width:7px; height:7px; border-radius:50%; background:#db4242; }
.medical-filter { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.medical-filter > div { padding:12px; border:1px solid #e2e5e8; border-radius:13px; background:#fff; }
.medical-filter small, .medical-filter strong { display:block; }
.medical-filter small { color:#7b8491; font-size:7px; }
.medical-filter strong { margin-top:5px; font-size:10px; }
.medical-layout { display:grid; grid-template-columns:170px 1fr; gap:10px; margin-top:10px; }
.patient-summary, .medical-note { min-height:385px; padding:15px; border:1px solid #e2e5e8; border-radius:15px; background:#fff; }
.patient-summary { text-align:center; }
.patient-avatar { width:50px; height:50px; display:grid; place-items:center; margin:0 auto 9px; border-radius:16px; color:#fff; background:var(--brand); font-size:13px; font-weight:800; }
.patient-summary > strong, .patient-summary > small { display:block; }
.patient-summary > strong { font-size:11px; }
.patient-summary > small { margin-top:3px; color:#98a2b3; font-size:7px; }
.patient-summary > div { margin-top:16px; padding-top:12px; border-top:1px solid #eef0f2; text-align:left; }
.patient-summary b, .patient-summary p { display:block; margin:0; }
.patient-summary b { color:#667085; font-size:7px; text-transform:uppercase; }
.patient-summary p { margin-top:5px; font-size:8px; }
.note-header { display:flex; align-items:center; justify-content:space-between; }
.note-header small, .note-header strong { display:block; }
.note-header small { color:#667085; font-size:7px; }
.note-header strong { margin-top:4px; font-size:11px; }
.note-header > span, .history-row > span { padding:7px 9px; border-radius:8px; color:#fff; background:var(--brand); font-size:7px; font-weight:750; }
.note-editor { min-height:190px; margin-top:15px; padding:13px; border:1px solid #e2e5e8; border-radius:12px; }
.note-editor small { color:#667085; font-size:7px; font-weight:700; }
.note-editor p { margin:15px 0 0; color:#4b5563; font-size:9px; line-height:1.7; }
.history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; padding:11px; border-radius:11px; background:#f6f7f7; }
.history-row > div { display:flex; align-items:center; gap:8px; }
.history-row i { width:8px; height:8px; border-radius:50%; background:#42866f; }
.history-row strong, .history-row small { display:block; font-size:7px; }
.history-row small { margin-top:3px; color:#98a2b3; }
.history-row > span { color:#4b5563; background:#fff; border:1px solid #e2e5e8; }
.stock-hero { padding:14px; border-radius:15px; color:#fff; background:linear-gradient(135deg,#1a1b1e,#25332e); }
.stock-hero small { color:#c7d0cc; }
.stock-hero > span { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.stock-metrics .warning { background:#fff7ed; border-color:#fed7aa; }
.stock-table { margin-top:10px; overflow:hidden; border:1px solid #e2e5e8; border-radius:14px; background:#fff; }
.stock-table-head, .stock-table > div:not(.stock-table-head) { display:grid; grid-template-columns:1.35fr 1fr .55fr .7fr; gap:8px; align-items:center; min-height:48px; padding:0 12px; border-bottom:1px solid #eef0f2; font-size:8px; }
.stock-table-head { min-height:38px; color:#667085; background:#f7f8f8; font-weight:750; }
.stock-table > div:last-child { border-bottom:0; }
.stock-table b { font-size:8px; }
.stock-table em { width:fit-content; padding:4px 6px; border-radius:999px; color:#29735b; background:#eaf5f1; font-style:normal; font-size:7px; }
.stock-table em.low { color:#9a5e08; background:#fff3d6; }

/* Security */
.security-section { color:#fff; background:linear-gradient(135deg,#202022,#121416); }
.security-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:68px; align-items:center; }
.security-card { display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start; }
.security-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); }
.security-card h2 { font-size:clamp(2.3rem,4vw,3.8rem); }
.security-card p { color:#aeb5bc; }
.security-points { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.security-points > div { min-height:175px; padding:22px; border:1px solid rgba(255,255,255,.1); border-radius:19px; background:rgba(255,255,255,.055); }
.security-points > div > span { width:41px; height:41px; display:grid; place-items:center; border-radius:13px; color:#dce9e4; background:rgba(62,132,108,.2); }
.security-points strong { display:block; margin-top:18px; font-size:14px; }
.security-points p { margin:8px 0 0; color:#929aa3; font-size:12px; }

/* Pricing */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.pricing-card { position:relative; padding:30px; border:1px solid #dde1e4; border-radius:24px; background:#fff; box-shadow:0 12px 35px rgba(17,24,39,.05); }
.pricing-card.featured { color:#fff; background:linear-gradient(145deg,#1f2022,#34312f); border-color:#34312f; transform:translateY(-10px); box-shadow:0 30px 65px rgba(17,24,39,.22); }
.pricing-badge { position:absolute; top:18px; right:18px; padding:6px 9px; border-radius:999px; color:#1f5f4b; background:#dff2ea; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.pricing-head h3 { margin:0; font-size:24px; }
.pricing-head p { min-height:50px; margin:10px 0 0; color:#737d89; font-size:13px; }
.pricing-card.featured .pricing-head p { color:#bfc5ca; }
.price { display:flex; align-items:flex-end; gap:5px; margin:28px 0 24px; }
.price strong { font-size:42px; line-height:1; letter-spacing:-.05em; }
.price span { color:#818a96; font-size:12px; }
.pricing-card ul { display:grid; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.pricing-card li { display:flex; gap:9px; align-items:flex-start; color:#596270; font-size:13px; }
.pricing-card li svg { margin-top:2px; color:#28735b; }
.pricing-card.featured li { color:#d3d7da; }
.pricing-card.featured .button-primary { color:var(--ink); background:#fff; border-color:#fff; }
.pricing-note { margin:25px auto 0; max-width:720px; color:#7b8491; font-size:12px; text-align:center; }

/* Blog cards */
.blog-section { background:#fff; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.blog-card { overflow:hidden; border:1px solid #e0e3e6; border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(17,24,39,.045); }
.blog-card-top { display:flex; align-items:center; justify-content:space-between; padding:15px 18px 0; }
.blog-card-top span { padding:5px 8px; border-radius:999px; color:#2d6c58; background:#e8f3ef; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.blog-card-top small { color:#8b94a0; font-size:10px; }
.blog-visual { height:150px; display:grid; place-items:center; margin:14px 18px 0; border-radius:16px; color:#eaf0ed; background:radial-gradient(circle at 75% 20%,#3d5d51,transparent 35%),linear-gradient(135deg,#17191b,#2d2a29); }
.blog-visual span { width:60px; height:60px; display:grid; place-items:center; border-radius:18px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.07); }
.blog-content { padding:20px; }
.blog-content time { color:#8b94a0; font-size:10px; }
.blog-content h3 { margin:9px 0 0; font-size:19px; line-height:1.18; letter-spacing:-.03em; }
.blog-content p { min-height:65px; margin:12px 0 0; color:var(--muted); font-size:13px; }
.blog-content a { display:inline-flex; align-items:center; gap:7px; margin-top:18px; color:#315f50; font-size:12px; font-weight:800; }

/* FAQ */
.faq-section { background:#f4f5f4; }
.faq-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:75px; align-items:start; }
.faq-copy { position:sticky; top:120px; }
.faq-copy .button { margin-top:26px; }
.faq-list { display:grid; gap:10px; }
.faq-item { overflow:hidden; border:1px solid #dde1e4; border-radius:16px; background:#fff; }
.faq-item button { width:100%; padding:19px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:0; background:transparent; text-align:left; font-size:14px; font-weight:750; cursor:pointer; }
.faq-item button svg { transition:transform .2s; }
.faq-item.open button svg { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-answer p { margin:0; padding:0 20px 20px; color:var(--muted); font-size:13px; }
.faq-item.open .faq-answer { max-height:220px; }

/* CTA and footer */
.final-cta { padding:80px 0; color:#fff; background:#121416; }
.final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:48px; padding:48px; border:1px solid rgba(255,255,255,.1); border-radius:28px; background:radial-gradient(circle at 85% 15%,rgba(47,126,99,.24),transparent 30%),rgba(255,255,255,.045); }
.final-cta h2 { max-width:720px; font-size:clamp(2.2rem,4vw,4rem); }
.final-cta p { margin:18px 0 0; max-width:680px; color:#aeb5bc; font-size:16px; }
.final-cta-actions { display:flex; flex-direction:column; gap:10px; min-width:245px; }
.site-footer { color:#d7dadd; background:#0c0e10; }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:52px; padding:72px 0 48px; }
.brand-light .brand-mark { background:#fff; color:var(--brand); }
.footer-brand p { max-width:340px; margin:22px 0 0; color:#858e98; font-size:13px; }
.footer-grid h3 { margin:0 0 16px; color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-grid a, .footer-grid span { color:#8f98a2; font-size:12px; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:22px 0 28px; border-top:1px solid rgba(255,255,255,.08); color:#68717b; font-size:11px; }

/* Blog pages */
.page-main { padding-top:var(--header-h); }
.blog-hero, .post-hero { padding:95px 0 65px; background:linear-gradient(135deg,#eef0ef,#fff); }
.blog-hero p, .post-hero p { max-width:730px; margin:20px 0 0; color:var(--muted); font-size:18px; }
.blog-archive { padding:72px 0 110px; }
.blog-archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.post-meta { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:22px; color:#7b8491; font-size:12px; }
.post-layout { display:grid; grid-template-columns:minmax(0,760px) 280px; gap:60px; align-items:start; padding:70px 0 110px; }
.post-content { font-size:17px; line-height:1.78; }
.post-content h2 { margin:38px 0 12px; font-size:28px; letter-spacing:-.035em; }
.post-content p { color:#4b5563; }
.post-sidebar { position:sticky; top:110px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.post-sidebar strong { display:block; font-size:15px; }
.post-sidebar p { margin:9px 0 18px; color:var(--muted); font-size:12px; }
.not-found { min-height:70vh; display:grid; place-items:center; padding-top:var(--header-h); text-align:center; }
.not-found h1 { font-size:64px; margin:0; }
.not-found p { color:var(--muted); }

/* Reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.22s; }

/* Responsive */
@media (max-width: 1080px) {
  :root { --container:min(calc(100% - 34px), 960px); }
  .desktop-nav { gap:18px; }
  .hero-grid { grid-template-columns:1fr; gap:70px; }
  .hero-copy { max-width:820px; }
  .hero-product { max-width:850px; margin:0 auto; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .workflow-grid, .security-grid { grid-template-columns:1fr; }
  .workflow-copy { max-width:760px; }
  .workflow-visual { max-width:700px; width:100%; margin:0 auto; }
  .demo-panel { grid-template-columns:1fr; }
  .demo-copy { padding:8px; max-width:720px; }
  .pricing-grid { grid-template-columns:1fr; max-width:720px; margin:0 auto; }
  .pricing-card.featured { transform:none; }
  .blog-grid, .blog-archive-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.4fr repeat(2,1fr); }
  .footer-grid > div:last-child { grid-column:2 / 4; }
  .post-layout { grid-template-columns:1fr; }
  .post-sidebar { position:static; }
}

@media (max-width: 820px) {
  :root { --header-h:68px; --container:min(calc(100% - 28px), 720px); }
  .desktop-nav, .desktop-only { display:none !important; }
  .menu-toggle { display:inline-flex; }
  .mobile-menu { position:absolute; top:100%; left:0; right:0; display:block; max-height:0; overflow:hidden; background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 20px 35px rgba(17,24,39,.12); transition:max-height .3s ease; }
  .mobile-menu.open { max-height:520px; border-top:1px solid var(--line); }
  .mobile-nav { display:grid; gap:4px; padding-block:14px 20px; }
  .mobile-nav > a { padding:11px 8px; border-radius:9px; font-size:14px; font-weight:700; }
  .mobile-nav > a:hover { background:#f3f4f4; }
  .mobile-nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .section { padding:78px 0; }
  .hero { min-height:auto; padding-top:calc(var(--header-h) + 70px); }
  .hero-copy h1 { font-size:clamp(3.2rem,14vw,5.5rem); }
  .hero-lead { font-size:17px; }
  .hero-window { transform:none; }
  .floating-chip { display:none; }
  .hero-capabilities { grid-template-columns:repeat(2,1fr); }
  .hero-capabilities div:nth-child(2) { border-right:0; }
  .hero-capabilities div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.1); }
  .section-heading-row { align-items:flex-start; flex-direction:column; }
  .demo-panel { min-height:0; padding:18px; }
  .security-card { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; gap:42px; }
  .faq-copy { position:static; }
  .final-cta-inner { flex-direction:column; align-items:flex-start; padding:32px; }
  .final-cta-actions { width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .footer-grid > div:last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}

@media (max-width: 620px) {
  :root { --container:calc(100% - 22px); }
  .brand-copy small { display:none; }
  .hero-copy h1 { font-size:3.25rem; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }
  .hero-trust { display:grid; gap:10px; }
  .app-layout { grid-template-columns:44px 1fr; min-height:390px; }
  .app-content { padding:12px; }
  .metric-row { grid-template-columns:1fr; }
  .metric-row .mini-metric:nth-child(n+2) { display:none; }
  .preview-grid { grid-template-columns:1fr; }
  .agenda-card { display:none; }
  .hero-capabilities { grid-template-columns:1fr; }
  .hero-capabilities div { border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .hero-capabilities div:last-child { border-bottom:0; }
  .feature-grid, .security-points, .blog-grid, .blog-archive-grid { grid-template-columns:1fr; }
  .flow-node-main { width:210px; }
  .flow-node-a, .flow-node-c { left:0; }
  .flow-node-b, .flow-node-d { right:0; }
  .demo-tabs { margin-inline:-4px; }
  .demo-copy h3 { font-size:27px; }
  .demo-screen { overflow-x:auto; }
  .demo-window { min-width:680px; }
  .demo-screen-image { overflow:visible; }
  .demo-screen-image img { min-width:700px; }
  .pricing-card { padding:24px; }
  .section-heading h2, .workflow-copy h2, .security-card h2, .faq-copy h2, .final-cta h2, .blog-hero h1, .post-hero h1 { font-size:2.55rem; }
  .mobile-nav-actions { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand, .footer-grid > div:last-child { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* Hero — prévia da nova tela Welcome */
.welcome-preview { padding: 13px; background: #f7f8fa; }
.welcome-preview-hero { position: relative; overflow: hidden; min-height: 280px; padding: 16px; border: 1px solid #273345; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#07111e 0%,#111827 52%,#15143a 100%); box-shadow: 0 14px 34px rgba(15,23,42,.14); }
.welcome-preview-glow { position: absolute; border-radius: 999px; filter: blur(34px); pointer-events: none; }
.welcome-preview-glow-one { width: 150px; height: 150px; right: -42px; top: -48px; background: rgba(56,189,248,.20); }
.welcome-preview-glow-two { width: 170px; height: 170px; left: 35%; bottom: -92px; background: rgba(139,92,246,.18); }
.welcome-preview-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(225px,.94fr); gap: 16px; align-items: center; }
.welcome-preview-copy { min-width: 0; }
.welcome-preview-pill { width: fit-content; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #dbeafe; background: rgba(255,255,255,.08); font-size: 7px; font-weight: 800; letter-spacing: .02em; }
.welcome-preview-copy h3 { max-width: 310px; margin: 12px 0 0; color: #fff; font-size: 20px; line-height: 1.08; letter-spacing: -.045em; }
.welcome-preview-copy p { max-width: 315px; margin: 8px 0 0; color: #aeb8c8; font-size: 8px; line-height: 1.55; }
.welcome-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.welcome-preview-actions span { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #fff; background: rgba(255,255,255,.09); font-size: 7px; font-weight: 800; }
.welcome-preview-actions span:first-child { color: #111827; background: #fff; }
.welcome-preview-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.welcome-stat { position: relative; min-height: 73px; padding: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.085); backdrop-filter: blur(9px); }
.welcome-stat > span, .welcome-stat > small, .welcome-stat > strong { display: block; }
.welcome-stat > span { max-width: 82%; color: #9ba8bb; font-size: 6px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.welcome-stat > strong { margin-top: 5px; color: #fff; font-size: 18px; letter-spacing: -.04em; }
.welcome-stat > small { color: #8f9bad; font-size: 6px; }
.welcome-stat > svg { position: absolute; right: 8px; top: 9px; padding: 4px; box-sizing: content-box; border-radius: 7px; }
.welcome-stat-sky > svg { color: #bae6fd; background: rgba(56,189,248,.16); }
.welcome-stat-emerald > svg { color: #a7f3d0; background: rgba(52,211,153,.16); }
.welcome-stat-rose > svg { color: #fecdd3; background: rgba(251,113,133,.16); }
.welcome-stat-violet > svg { color: #ddd6fe; background: rgba(167,139,250,.16); }
.welcome-environment { grid-column: 1 / -1; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 43px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.085); }
.welcome-environment > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #bae6fd; background: rgba(255,255,255,.08); }
.welcome-environment small, .welcome-environment strong { display: block; }
.welcome-environment small { color: #7e8ba0; font-size: 5.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.welcome-environment strong { margin-top: 2px; color: #fff; font-size: 7px; }
.welcome-environment em { color: #7f8b9e; font-size: 5.5px; font-style: normal; }
.welcome-preview-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 13px 1px 8px; }
.welcome-preview-section-heading span, .welcome-preview-section-heading strong { display: block; }
.welcome-preview-section-heading span { color: #607086; font-size: 6px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.welcome-preview-section-heading strong { margin-top: 2px; color: #111827; font-size: 10px; }
.welcome-preview-section-heading small { color: #8a94a3; font-size: 6px; }
.welcome-financial-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.welcome-financial-card { min-width: 0; min-height: 70px; padding: 9px; border: 1px solid; border-radius: 11px; background: #fff; }
.welcome-financial-card span, .welcome-financial-card strong, .welcome-financial-card small { display: block; }
.welcome-financial-card span { font-size: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.welcome-financial-card strong { margin-top: 7px; color: #111827; font-size: 11px; letter-spacing: -.02em; }
.welcome-financial-card small { margin-top: 3px; color: #7b8593; font-size: 6px; }
.financial-emerald { border-color: #d1fae5; background: linear-gradient(135deg,#ecfdf5,#fff); }
.financial-emerald span { color: #047857; }
.financial-amber { border-color: #fde68a; background: linear-gradient(135deg,#fffbeb,#fff); }
.financial-amber span { color: #b45309; }
.financial-rose { border-color: #fecdd3; background: linear-gradient(135deg,#fff1f2,#fff); }
.financial-rose span { color: #be123c; }
.financial-sky { border-color: #bae6fd; background: linear-gradient(135deg,#f0f9ff,#fff); }
.financial-sky span { color: #0369a1; }

@media (max-width: 620px) {
  .welcome-preview { padding: 9px; }
  .welcome-preview-hero { min-height: 268px; padding: 12px; }
  .welcome-preview-layout { grid-template-columns: 1fr; }
  .welcome-preview-copy p, .welcome-preview-actions { display: none; }
  .welcome-preview-copy h3 { max-width: none; font-size: 16px; }
  .welcome-preview-summary { margin-top: 2px; }
  .welcome-stat { min-height: 61px; }
  .welcome-environment em { display: none; }
  .welcome-financial-grid { grid-template-columns: repeat(2,1fr); }
  .welcome-financial-card:nth-child(n+3) { display: none; }
  .welcome-preview-section-heading small { display: none; }
}


.demo-welcome-preview { padding: 18px; background: #f7f8fa; }
.demo-welcome-preview .welcome-preview-hero { min-height: 296px; }
.demo-welcome-preview .welcome-preview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.demo-welcome-preview .mini-card { padding: 12px; border: 1px solid #e3e7ee; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.04); }
.demo-welcome-preview .mini-card small, .demo-welcome-preview .mini-card strong, .demo-welcome-preview .mini-card p { display:block; }
.demo-welcome-preview .mini-card small { color:#7b8491; font-size:7px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.demo-welcome-preview .mini-card strong { margin-top:6px; color:#111827; font-size:12px; }
.demo-welcome-preview .mini-card p { margin:5px 0 0; color:#718092; font-size:7px; }
.calendar-grid-week { grid-template-columns: 46px repeat(7,1fr); }
.stock-chart-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 10px; margin-top: 10px; }
.stock-chart-card { min-height: 188px; padding: 14px; border:1px solid #e2e5e8; border-radius: 14px; background:#fff; }
.stock-chart-card > span, .finance-card > span { font-size:9px; font-weight: 750; color:#111827; }
.stock-bars { display:grid; gap: 14px; margin-top: 18px; }
.stock-bars > div, .finance-bars > div { display:grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items:center; }
.stock-bars label, .finance-bars label { color:#667085; font-size:8px; font-weight:700; }
.stock-bars b, .finance-bars b { height: 8px; border-radius: 999px; background: linear-gradient(90deg,#2f7e63,#78b79c); }
.stock-bars small, .finance-bars small { color:#98a2b3; font-size:8px; }
.stock-chart-card-donut { display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:10px; }
.stock-donut { position:relative; width: 120px; height:120px; display:grid; place-items:center; margin:18px auto 0; border-radius:50%; background: conic-gradient(#2f7e63 0 48%, #7fb99f 48% 75%, #c9e8db 75% 91%, #e4f1ea 91% 100%); }
.stock-donut::after { content:''; position:absolute; inset:18px; border-radius:50%; background:#fff; }
.stock-donut strong, .stock-donut small { position:relative; z-index:1; display:block; text-align:center; }
.stock-donut strong { font-size:14px; }
.stock-donut small { margin-top:4px; color:#98a2b3; font-size:8px; }
.stock-legend { display:grid; gap:9px; }
.stock-legend div { display:flex; align-items:center; gap:8px; font-size:8px; color:#667085; }
.stock-legend i { width:10px; height:10px; border-radius:50%; }
.stock-legend .tone-a { background:#2f7e63; }
.stock-legend .tone-b { background:#7fb99f; }
.stock-legend .tone-c { background:#c9e8db; }
.stock-legend .tone-d { background:#e4f1ea; border:1px solid #d8e7df; }
.finance-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 10px; }
.finance-card { min-height: 150px; padding:14px; border:1px solid #e2e5e8; border-radius:15px; background:#fff; }
.finance-bars { display:grid; gap: 14px; margin-top: 18px; }
.finance-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.finance-pills span { padding:8px 10px; border-radius:999px; border:1px solid #e2e5e8; background:#f7f8f8; color:#667085; font-size:8px; font-weight:700; }
.settings-preview { min-height: 505px; padding: 22px; color: var(--ink); background: #f8f8f7; }
.settings-head, .settings-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.settings-head small, .settings-head strong { display:block; }
.settings-head small { color:#7b8491; font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.settings-head strong { margin-top:5px; font-size:18px; }
.settings-head > span { padding:8px 10px; border:1px solid #e1e4e8; border-radius:10px; background:#fff; color:#667085; font-size:9px; font-weight:700; }
.settings-toolbar { margin-top:16px; padding:12px 14px; border:1px solid #e2e5e8; border-radius:14px; background:#fff; color:#667085; font-size:9px; }
.settings-toolbar button { min-height:34px; padding:0 14px; border:0; border-radius:10px; color:#fff; background:var(--brand); font-size:9px; font-weight:800; }
.settings-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 10px; }
.settings-block { min-height: 315px; padding: 15px; border:1px solid #e2e5e8; border-radius:15px; background:#fff; }
.settings-block-head strong, .settings-block-head small { display:block; }
.settings-block-head strong { font-size:11px; }
.settings-block-head small { margin-top:4px; color:#98a2b3; font-size:8px; }
.settings-block label { display:flex; align-items:center; gap:9px; padding:11px 0; border-bottom:1px solid #eef0f2; color:#4b5563; font-size:9px; }
.settings-block label:last-child { border-bottom:0; }
.settings-block input { accent-color: var(--brand); }
@media (max-width: 1100px) {
  .demo-welcome-preview .welcome-preview-grid, .finance-grid, .settings-grid, .stock-chart-grid { grid-template-columns:1fr; }
  .calendar-grid-week { min-width: 940px; }
}
@media (max-width: 767px) {
  .demo-welcome-preview { padding: 10px; }
  .demo-welcome-preview .welcome-preview-grid { grid-template-columns:1fr 1fr; }
  .stock-chart-card-donut { grid-template-columns:1fr; }
  .settings-head, .settings-toolbar { align-items:flex-start; flex-direction:column; }
}


.demo-screen-shot { align-items: stretch; }
.demo-shot-card { width: 100%; padding: 12px; border-radius: 24px; background: linear-gradient(180deg,#f7f8fa 0%,#eef1f4 100%); border: 1px solid #dde1e4; box-shadow: 0 18px 45px rgba(17,24,39,.08); }
.demo-shot-card img { display:block; width:100%; height:auto; border-radius: 18px; border: 1px solid #d8dcdf; box-shadow: 0 20px 48px rgba(17,24,39,.12); }
.demo-shot-login { background: linear-gradient(180deg,#f7f8fa 0%,#f1f3f5 100%); }
.finance-shot-stage { position: relative; width: 100%; min-height: 640px; padding: 20px 10px 10px 10px; }
.finance-shot-stage::before { content:''; position:absolute; inset: 18px 12px 0; border-radius: 28px; background: radial-gradient(circle at top right, rgba(47,126,99,.12), transparent 32%), linear-gradient(180deg,#f7f8fa 0%,#edf1f4 100%); border:1px solid #dde1e4; box-shadow: 0 18px 45px rgba(17,24,39,.08); }
.finance-shot { position: absolute; overflow: hidden; border-radius: 22px; background:#fff; border: 1px solid #d8dcdf; box-shadow: 0 24px 58px rgba(17,24,39,.14); }
.finance-shot img { display:block; width:100%; height:auto; }
.finance-shot-back { left: 32px; right: 20px; bottom: 18px; z-index: 1; }
.finance-shot-front { left: 0; right: 56px; top: 0; z-index: 2; }

@media (max-width: 1100px) {
  .finance-shot-stage { min-height: 520px; }
  .finance-shot-front { right: 28px; }
  .finance-shot-back { left: 20px; }
}

@media (max-width: 767px) {
  .demo-shot-card { padding: 8px; border-radius: 18px; }
  .demo-shot-card img { border-radius: 14px; }
  .finance-shot-stage { min-height: auto; padding: 0; display: grid; gap: 12px; }
  .finance-shot-stage::before { display:none; }
  .finance-shot { position: static; border-radius: 18px; }
  .finance-shot-front, .finance-shot-back { left:auto; right:auto; top:auto; bottom:auto; }
}