:root {
  /* Brand palette — change these values to retheme the entire site. */
  --navy-950: #071d2c;
  --navy-900: #0b2538;
  --navy-800: #12374d;
  --navy-700: #174b64;
  --teal-600: #159c83;
  --teal-500: #20b596;
  --teal-400: #36c5a2;
  --teal-100: #dff7f0;
  --coral-500: #ff8066;
  --cream-100: #f6f4ed;
  --cream-50: #fbfaf7;
  --white: #ffffff;
  --ink: #102f40;
  --muted: #61717b;
  --line: #dce3e2;
  --shadow: 0 24px 70px rgba(7, 29, 44, 0.16);
  --radius-lg: 24px;
  --radius-md: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; color: var(--ink); background: var(--cream-50); font-family: "DM Sans", sans-serif; line-height: 1.6; }
body.menu-open, body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
svg { display: block; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 10px 16px; background: var(--white); border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; background: rgba(251,250,247,.88); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); transition: box-shadow .25s, border-color .25s; }
.site-header.scrolled { border-color: rgba(16,47,64,.08); box-shadow: 0 8px 30px rgba(7,29,44,.06); }
.nav-wrap { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: -.25px; }
.brand-text strong { color: var(--teal-600); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--navy-900); color: var(--teal-400); border-radius: 50%; }
.brand-mark svg { width: 26px; fill: var(--teal-400); stroke: currentColor; stroke-width: 1.2; }
.site-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; }
.site-nav > a:not(.button) { position: relative; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--teal-500); transition: right .2s; }
.site-nav > a:hover::after, .site-nav > a.active::after { right: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 8px; color: var(--white); background: var(--teal-600); font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(21,156,131,.18); transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { background: var(--teal-500); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(21,156,131,.24); }
.button-small { min-height: 42px; padding: 0 19px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }

.hero { position: relative; min-height: 790px; padding: 160px 0 100px; overflow: hidden; background: linear-gradient(105deg, var(--cream-50) 0%, var(--cream-100) 100%); }
.hero::after { content: ""; position: absolute; width: 540px; height: 540px; right: -150px; top: 80px; border-radius: 50%; background: rgba(32,181,150,.07); }
.hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 10px; color: var(--teal-600); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }
.eyebrow > span { width: 28px; height: 2px; background: currentColor; }
h1, h2, h3 { margin-top: 0; font-family: Manrope, sans-serif; line-height: 1.12; }
h1 { margin-bottom: 26px; color: var(--navy-900); font-size: clamp(50px, 5.5vw, 76px); letter-spacing: -4px; }
h1 em, h2 em { color: var(--teal-600); font-style: normal; }
.hero-lede { max-width: 600px; margin: 0 0 34px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.text-link { color: var(--navy-900); font-weight: 700; }
.text-link span { margin-left: 8px; color: var(--teal-600); }
.trust-line { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 48px; padding-top: 23px; border-top: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.trust-line > span { color: #8b989e; }
.trust-line strong { color: var(--navy-800); }

.hero-visual { position: relative; min-width: 660px; transform: perspective(1200px) rotateY(-2deg); }
.app-window { display: flex; height: 465px; overflow: hidden; border: 1px solid rgba(18,55,77,.1); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.app-sidebar { width: 68px; flex: none; padding: 22px 0; display: flex; flex-direction: column; align-items: center; gap: 26px; background: var(--navy-900); }
.mini-logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--teal-400); color: var(--navy-950); font-weight: 800; }
.side-icon { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-radius: 5px; }
.side-icon.active { background: var(--teal-400); border-color: var(--teal-400); box-shadow: 0 0 0 8px rgba(54,197,162,.12); }
.app-content { min-width: 0; flex: 1; padding: 28px; background: #f5f7f7; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.app-topbar > div { display: grid; }
.app-topbar .caption { color: var(--teal-600); font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.app-topbar strong { font: 700 18px Manrope, sans-serif; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); font-size: 11px; font-weight: 800; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric-grid article { padding: 16px; border-radius: 11px; background: var(--white); box-shadow: 0 5px 16px rgba(7,29,44,.04); }
.metric-grid span, .metric-grid small { display: block; color: #819099; font-size: 10px; }
.metric-grid strong { display: block; margin: 3px 0; color: var(--navy-900); font: 700 19px Manrope, sans-serif; }
.metric-grid small { color: var(--teal-600); }
.chart-card { margin-top: 16px; padding: 17px 20px 13px; border-radius: 12px; background: var(--white); }
.chart-heading { display: flex; justify-content: space-between; font-size: 11px; }
.chart-heading span { color: #8d999e; }
.area-chart { width: 100%; height: 180px; overflow: visible; }
.grid-line { stroke: #e7ecec; stroke-width: 1; }
.chart-fill { fill: url(#chartFill); }
.chart-line { fill: none; stroke: var(--teal-500); stroke-width: 4; stroke-linecap: round; }
.chart-labels { display: flex; justify-content: space-between; color: #9aa5aa; font-size: 9px; }
.floating-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: var(--white); box-shadow: 0 15px 40px rgba(7,29,44,.16); }
.floating-card small, .floating-card strong { display: block; }
.floating-card small { color: #839098; font-size: 9px; }
.floating-card strong { color: var(--navy-900); font-size: 12px; }
.allocation-card { top: 70px; right: -54px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 0 5px var(--teal-100); }
.up-pill { padding: 3px 7px; border-radius: 12px; background: var(--teal-100); color: var(--teal-600); font-size: 9px; font-weight: 800; }
.approved-card { left: -35px; bottom: 38px; }
.check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); font-weight: 800; }
.hero-orbit { position: absolute; z-index: 0; border: 1px solid rgba(21,156,131,.12); border-radius: 50%; }
.orbit-one { width: 620px; height: 620px; top: 100px; right: -210px; }
.orbit-two { width: 390px; height: 390px; top: 215px; right: -95px; }

.value-strip { color: var(--white); background: var(--navy-900); }
.value-grid { min-height: 130px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.value-grid > div { display: flex; align-items: center; gap: 18px; padding: 15px 34px; border-right: 1px solid rgba(255,255,255,.13); }
.value-grid > div:first-child { padding-left: 0; }
.value-grid > div:last-child { border: 0; }
.value-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid rgba(54,197,162,.35); border-radius: 50%; color: var(--teal-400); font-size: 20px; }
.value-grid p { margin: 0; color: #9fb0b9; font-size: 12px; line-height: 1.65; }
.value-grid strong { color: var(--white); font-size: 14px; }

.section { padding: 120px 0; }
.section-heading { max-width: 590px; }
.section-heading.centered { margin: 0 auto 60px; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
h2 { margin-bottom: 22px; color: var(--navy-900); font-size: clamp(38px, 4vw, 54px); letter-spacing: -2.5px; }
.section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.75; }
.product { background: var(--white); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.feature-card { position: relative; min-height: 430px; padding: 42px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cream-50); }
.feature-wide { grid-column: 1 / -1; min-height: 450px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; }
.feature-wide.reverse { grid-template-columns: 1fr 1fr; }
.feature-number { position: absolute; right: 28px; top: 22px; color: #bdc7c7; font: 700 11px Manrope, sans-serif; letter-spacing: 1px; }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 11px; background: var(--teal-100); color: var(--teal-600); font-size: 22px; font-weight: 800; }
.feature-card h3 { margin-bottom: 14px; font-size: 25px; letter-spacing: -.8px; }
.feature-card p { color: var(--muted); font-size: 15px; }
.feature-card ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 9px; font-size: 13px; font-weight: 600; }
.feature-card li::before { content: "✓"; margin-right: 9px; color: var(--teal-600); }
.feature-demo { padding: 25px; border-radius: 16px; background: var(--white); box-shadow: 0 18px 45px rgba(7,29,44,.1); transform: rotate(1deg); }
.demo-bar { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); font-size: 12px; }
.demo-bar span { color: var(--teal-600); }
.progress-row { display: flex; justify-content: space-between; margin-top: 18px; font-size: 11px; }
.progress-track { height: 7px; margin: 8px 0 19px; overflow: hidden; border-radius: 8px; background: #e7eeee; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--teal-500); }
.table-row { display: grid; grid-template-columns: 1.4fr .55fr .6fr; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf0f0; font-size: 11px; }
.table-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.table-head { color: #8a979d; font-size: 9px; text-transform: uppercase; }
.person { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-style: normal; font-weight: 800; }
.person.coral { background: #ffe2dc; color: #bd503b; }.person.green { background: var(--teal-100); color: var(--teal-600); }.person.blue { background: #ddeef8; color: #367b9c; }
.vesting-demo { margin-top: 44px; padding: 24px; border-radius: 14px; background: var(--white); box-shadow: 0 15px 40px rgba(7,29,44,.07); }
.vesting-demo > div:first-child { display: flex; justify-content: space-between; font-size: 11px; }
.vesting-line { position: relative; margin: 24px 8px 10px; display: flex; justify-content: space-between; }
.vesting-line::before { content: ""; position: absolute; z-index: 0; left: 2px; right: 2px; top: 5px; height: 3px; background: var(--teal-400); }
.vesting-line i { z-index: 1; width: 13px; height: 13px; border: 3px solid var(--white); border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 2px var(--teal-500); }
.vesting-years { display: flex; justify-content: space-between; color: #859399; font-size: 9px; }
.dark-card { color: var(--white); border-color: var(--navy-900); background: var(--navy-900); }
.dark-card h3 { color: var(--white); }.dark-card p { color: #afbec5; }.dark-card .feature-number { color: #567080; }
.statement-demo { margin-top: 36px; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.05); }
.statement-title { display: flex; justify-content: space-between; align-items: end; font-size: 10px; }
.statement-title strong { font: 700 20px Manrope, sans-serif; }
.stacked-bar { height: 13px; display: flex; overflow: hidden; margin: 18px 0 10px; border-radius: 10px; }
.stacked-bar span { width: 60%; background: var(--teal-400); }.stacked-bar i { width: 23%; background: var(--coral-500); }.stacked-bar b { width: 17%; background: #6e90a2; }
.legend { display: flex; justify-content: space-between; color: #aab9c0; font-size: 9px; }
.capability-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.capability-tags span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); color: var(--navy-700); font-size: 10px; font-weight: 700; }
.integration-demo { min-height: 235px; display: flex; align-items: center; justify-content: center; transform: rotate(-1deg); }
.system-node { width: 120px; padding: 16px 10px; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: var(--cream-50); font-size: 12px; font-weight: 700; }
.system-node small { display: block; margin-top: 3px; color: #8c999e; font-size: 8px; font-weight: 400; }
.center-node { padding: 12px 10px; color: var(--white); background: var(--navy-900); }
.center-node .mini-logo { margin: 0 auto 7px; }
.flow-line { position: relative; width: 52px; height: 2px; background: var(--teal-500); }
.flow-line i { position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-top: 2px solid var(--teal-500); border-right: 2px solid var(--teal-500); transform: rotate(45deg); }

.workflow { color: var(--white); background: var(--navy-900); }
.workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; }
.workflow .section-heading { position: sticky; top: 130px; align-self: start; }
.workflow h2 { color: var(--white); }.workflow .section-heading > p:not(.eyebrow) { color: #9fb0b9; }.eyebrow.light { color: var(--teal-400); }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { min-height: 145px; display: grid; grid-template-columns: 70px 1fr; gap: 25px; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.steps li:first-child { padding-top: 0; }.steps li > span { color: var(--teal-400); font: 700 12px Manrope, sans-serif; }
.steps h3 { margin: 0 0 8px; color: var(--white); font-size: 21px; }.steps p { margin: 0; color: #9fb0b9; }

.about { background: var(--cream-100); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.about-art { position: relative; min-height: 500px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-900); }
.planet { position: relative; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--teal-400), var(--teal-600) 45%, var(--navy-800) 100%); box-shadow: -25px 35px 70px rgba(0,0,0,.35); }
.planet::after { content: ""; position: absolute; inset: -55px -120px; border: 2px solid rgba(54,197,162,.55); border-radius: 50%; transform: rotate(-18deg); }
.planet i { position: absolute; width: 10px; height: 10px; right: -69px; top: 43px; border-radius: 50%; background: var(--coral-500); box-shadow: 0 0 20px var(--coral-500); }
.about-art::before, .about-art::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.about-art::before { width: 420px; height: 420px; }.about-art::after { width: 650px; height: 650px; }
.about-quote { position: absolute; z-index: 2; left: 28px; bottom: 24px; max-width: 255px; padding: 16px 19px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #dbe5e8; background: rgba(7,29,44,.72); backdrop-filter: blur(8px); font: 600 13px Manrope, sans-serif; }
.about .section-heading { max-width: none; }.about .section-heading > p:not(.eyebrow) { margin: 0 0 16px; }
.about-signature { display: grid; margin-top: 32px; }.about-signature span { color: var(--teal-600); font: 800 24px Manrope, sans-serif; letter-spacing: 4px; }.about-signature small { color: #89969c; }

.contact { padding: 115px 0; color: var(--white); background: var(--navy-800); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; }
.contact h2 { color: var(--white); font-size: clamp(38px, 4vw, 55px); }
.contact-copy > p:not(.eyebrow) { color: #b7c7cd; font-size: 17px; }
.contact-email { display: inline-flex; gap: 15px; margin-top: 25px; color: var(--teal-400); font-weight: 700; }
.contact-form { padding: 38px; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 25px 60px rgba(0,0,0,.17); }
.contact-form label { display: grid; gap: 7px; margin-bottom: 17px; color: var(--navy-800); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--ink); background: #fafbfa; font-size: 14px; text-transform: none; transition: border .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-100); }
.contact-form textarea { resize: vertical; }
.button-full { width: 100%; }
.form-note { margin: 10px 0 0; color: #8b989e; text-align: center; font-size: 10px; }

.site-footer { padding: 40px 0 22px; color: #94a8b2; background: var(--navy-950); font-size: 12px; }
.footer-main { display: flex; align-items: center; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { color: var(--white); }.footer-links { display: flex; gap: 28px; align-items: center; }.footer-links a:hover, .footer-links button:hover { color: var(--teal-400); }
.footer-links button { padding: 0; border: 0; background: none; cursor: pointer; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; }
.privacy-dialog { width: min(calc(100% - 32px), 660px); max-height: 86vh; padding: 42px; border: 0; border-radius: 20px; color: var(--ink); background: var(--white); box-shadow: var(--shadow); }
.privacy-dialog::backdrop { background: rgba(7,29,44,.76); backdrop-filter: blur(4px); }
.privacy-dialog h2 { margin-bottom: 4px; font-size: 36px; }.privacy-dialog .updated { margin: 0 0 27px; color: #8a979d; font-size: 12px; }.privacy-content h3 { margin: 23px 0 5px; font-size: 16px; }.privacy-content p { margin: 0; color: var(--muted); font-size: 14px; }.privacy-content a { color: var(--teal-600); text-decoration: underline; }
.dialog-close { position: absolute; right: 18px; top: 14px; border: 0; background: none; color: var(--muted); font-size: 28px; cursor: pointer; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } * { animation: none !important; } }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }.hero { padding-top: 145px; }.hero-copy { max-width: 700px; }.hero-visual { min-width: 0; width: min(100%, 720px); margin: 10px auto 0; }.trust-line { max-width: 650px; }
  .about-grid, .contact-grid { gap: 60px; }.workflow-grid { gap: 70px; }
}
@media (max-width: 820px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .menu-toggle { z-index: 2; display: grid; gap: 5px; cursor: pointer; }.menu-toggle span:not(.sr-only) { width: 24px; height: 2px; display: block; background: var(--navy-900); transition: transform .2s, opacity .2s; }.menu-toggle[aria-expanded="true"] span:nth-last-child(3) { transform: translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-last-child(2) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 78px 0 auto; display: grid; gap: 0; padding: 18px 20px 26px; border-bottom: 1px solid var(--line); background: var(--cream-50); box-shadow: 0 20px 35px rgba(7,29,44,.1); transform: translateY(-130%); transition: transform .25s; }.site-nav.open { transform: translateY(0); }.site-nav > a { padding: 14px; }.site-nav .button { margin-top: 8px; }
  .hero { min-height: auto; padding-bottom: 80px; }.hero-grid { gap: 45px; }h1 { letter-spacing: -3px; }.hero-visual { transform: none; }.app-window { height: 420px; }.allocation-card { right: -5px; }.approved-card { left: -5px; }.trust-line { font-size: 10px; }
  .value-grid { grid-template-columns: 1fr; padding: 18px 0; }.value-grid > div, .value-grid > div:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }.value-grid > div:last-child { border: 0; }
  .section { padding: 85px 0; }.feature-wide, .feature-wide.reverse { grid-template-columns: 1fr; }.workflow-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }.workflow .section-heading { position: static; }.about-art { min-height: 420px; }.contact-grid { gap: 45px; }
}
@media (max-width: 600px) {
  .brand-text { font-size: 13px; }.nav-wrap { height: 70px; }.site-nav { top: 70px; }
  .hero { padding-top: 120px; }.hero-lede { font-size: 16px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 17px; }.text-link { text-align: center; }.trust-line { gap: 12px 15px; }.trust-line > span { width: 100%; }
  .hero-visual { width: calc(100% + 10px); }.app-window { height: 360px; border-radius: 16px; }.app-sidebar { width: 45px; padding-top: 18px; gap: 21px; }.app-sidebar .mini-logo { width: 25px; height: 25px; }.side-icon { width: 14px; height: 14px; }.app-content { padding: 17px 13px; }.app-topbar { margin-bottom: 15px; }.app-topbar strong { font-size: 13px; }.metric-grid { gap: 6px; }.metric-grid article { padding: 9px 7px; }.metric-grid strong { font-size: 13px; }.metric-grid small { display: none; }.chart-card { padding: 12px; }.area-chart { height: 145px; }.floating-card { display: none; }
  .feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 0; padding: 28px 22px; }.feature-wide { grid-column: auto; gap: 28px; }.feature-demo { padding: 16px; }.table-row { grid-template-columns: 1.35fr .5fr .6fr; font-size: 9px; }.person { display: none; }.integration-demo { min-height: 190px; padding: 15px 8px; }.system-node { width: 83px; padding: 12px 5px; font-size: 9px; }.flow-line { width: 20px; }
  .steps li { grid-template-columns: 42px 1fr; gap: 12px; }.about-art { min-height: 340px; }.planet { width: 130px; height: 130px; }.about-quote { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .contact-form { padding: 25px 20px; }.field-row { grid-template-columns: 1fr; gap: 0; }.contact-email { font-size: 13px; }
  .footer-main, .footer-bottom { align-items: flex-start; flex-direction: column; gap: 25px; }.footer-links { width: 100%; flex-wrap: wrap; gap: 20px; }.privacy-dialog { padding: 32px 22px; }
}