:root { color-scheme:light; --ink:#261c20; --muted:#596779; --line:#dce2e9; --blue:#c72535; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.65 system-ui,-apple-system,Arial,sans-serif; color:var(--ink); background:#f8f9fb; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible { outline:2px solid #c72535; outline-offset:5px; }
.poster { max-width:1600px; margin:auto; background:white; }
header { padding:20px 5%; display:flex; gap:26px; justify-content:space-between; align-items:center; background:#19171b; color:white; border-bottom:1px solid #ffffff20; }
header img { display:block; width:min(300px,65vw); height:auto; }
header nav { display:flex; gap:22px; font-size:.8rem; }
header nav a,.header-link { text-decoration:none; }
.header-link { font-size:.85rem; padding:10px 14px; border:1px solid #6d8997; border-radius:4px; white-space:nowrap; }
.hero { display:grid; grid-template-columns:1fr 1.08fr; gap:50px; align-items:center; background:#19171b; color:#f7f9ff; padding:80px 5% 90px; }
h1,h2,h3 { margin:0; letter-spacing:-.045em; line-height:1.12; }
h1 { font-size:clamp(2.8rem,5.1vw,5.2rem); margin:24px 0; }
h1 span { color:#ff9aa4; }
h2 { font-size:clamp(2rem,3.2vw,3.2rem); }
h3 { font-size:1.45rem; }
p { color:var(--muted); }
.hero p { color:#bac8d8; }
.eyebrow,.number,.tags { font:600 .68rem/1.6 ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.12em; }
.eyebrow,.number { color:var(--blue); }
.hero .eyebrow { color:#ff9aa4; }
.intro { max-width:44ch; font-size:1.1rem; }
.button { display:inline-block; margin-top:12px; padding:12px 20px; border-radius:4px; color:white; background:var(--blue); text-decoration:none; font-weight:700; }
.hero .button { background:#ffb1b9; color:#122737; }
.product-preview { overflow:hidden; background:#f6f8fb; border:1px solid #8e9daf; border-radius:10px; box-shadow:0 28px 70px #0005; color:var(--ink); }
.preview-top { display:flex; justify-content:space-between; gap:8px; padding:12px 16px; font-size:.65rem; background:white; border-bottom:1px solid var(--line); }
.preview-body { display:grid; grid-template-columns:105px minmax(0,1fr); min-height:335px; }
.preview-body aside { display:flex; flex-direction:column; gap:15px; font-size:.65rem; padding:22px 10px; background:#eaf0f4; border-right:1px solid var(--line); }
.preview-body aside strong { font-size:1.3rem; color:var(--blue); margin-bottom:12px; }
.selected { color:var(--blue); font-weight:700; }
.preview-content { padding:24px 20px; }
.hero .preview-caption { color:var(--blue); font:700 .6rem/1.5 ui-monospace,monospace; }
.preview-content h2 { font-size:clamp(1rem,2vw,1.5rem); letter-spacing:-.03em; }
.preview-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-block:20px; }
.preview-metrics div { display:grid; gap:5px; background:white; padding:12px; border:1px solid var(--line); border-radius:5px; }
.preview-metrics small { font-size:.6rem; color:var(--muted); }
.preview-metrics strong { font-size:1.2rem; }
.preview-table { font-size:.65rem; background:white; border:1px solid var(--line); }
.preview-table>div { display:flex; justify-content:space-between; gap:10px; padding:10px; border-bottom:1px solid var(--line); }
.preview-table em { color:var(--blue); font-style:normal; }
.preview-note { font-size:.6rem; color:var(--muted); margin-top:12px; }
.platforms { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:22px 5%; background:#edf2f5; border-bottom:1px solid var(--line); font:600 .75rem/1.6 ui-monospace,monospace; color:#566578; }
.section { padding:80px 5%; border-bottom:1px solid var(--line); }
.section-heading { max-width:720px; }
.section-heading>p:last-child { max-width:58ch; }
.capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin-top:30px; }
.capabilities article { display:flex; flex-direction:column; padding:28px 0; border-top:1px solid var(--line); }
.number { margin-bottom:15px; }
.capabilities p { font-size:.95rem; }
.tags { margin-top:auto; font-size:.6rem; color:#677786; }
#business-systems { background:#f5f7f8; }
.stack { background:#f2eaeb; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin-top:34px; }
.steps b { display:block; color:var(--blue); font-size:1.5rem; margin-bottom:16px; }
.steps h3 { font-size:1.2rem; }
.steps p { font-size:.9rem; }
.team { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.team>div { position:sticky; top:30px; }
.team>div>p:last-child { max-width:46ch; }
.founder { margin:0; border:1px solid var(--line); background:#fafbfc; }
.founder-photo { display:block; width:100%; height:auto; max-height:600px; object-fit:cover; object-position:center 25%; }
.founder-bio { padding:28px; }
.founder a { display:block; margin-top:14px; color:var(--blue); }
.bio-source { font-size:.75rem; }
.contact { background:#19171b; color:white; }
.contact h2 { font-size:clamp(2.8rem,5vw,5rem); }
.contact p { max-width:50ch; color:#bac8d8; }
.contact .eyebrow { color:#ff9aa4; }
.email { display:block; margin-top:20px; overflow-wrap:anywhere; }
footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 5%; background:#19171b; color:#dae4ef; border-top:1px solid #ffffff25; font-size:.8rem; }
footer img { width:min(280px,80vw); height:auto; }
footer p { color:#bac8d8; }
@media(max-width:1050px) { header{flex-wrap:wrap}header nav{order:3;width:100%}.hero{gap:28px}.capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}.team{gap:30px} }
@media(max-width:760px) { .hero,.team{grid-template-columns:1fr}.hero{padding-block:44px}.product-preview{max-width:600px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.team>div{position:static}.founder{max-width:580px}.section{padding-block:48px} }
@media(max-width:480px) { .capabilities,.steps{grid-template-columns:1fr}.preview-body{grid-template-columns:70px minmax(0,1fr)}.preview-body aside{font-size:.6rem}.preview-content{padding:18px 12px}.preview-metrics div{padding:8px}.preview-top{font-size:.55rem}.preview-table{font-size:.58rem}footer{flex-direction:column;align-items:flex-start}header nav{flex-wrap:wrap;gap:12px 20px} }
@media print { .poster{max-width:none}.section{break-inside:avoid}.team>div{position:static}*{print-color-adjust:exact} }

/* Laptop product presentation. */
.hero { grid-template-columns: .85fr 1.15fr; gap: 44px; padding-block: 88px 70px; background: #f5f2f2; color: #261c20; }
.hero p { color: #526174; }
.hero .eyebrow { color: #c72535; }
.hero h1 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.hero h1 span { color: #c72535; }
.hero .button { background: #c72535; color: white; }
.laptop { width: 100%; min-width: 0; padding-top: 14px; }
.laptop-screen { padding: 12px 10px 15px; background: #20262e; border: 2px solid #52606f; border-radius: 18px 18px 5px 5px; box-shadow: 0 24px 45px #1b2e4026; }
.laptop-screen::before { content: ""; display: block; width: 4px; height: 4px; background: #687f85; border-radius: 50%; margin: -7px auto 7px; }
.laptop .product-preview { border: 0; border-radius: 3px; box-shadow: none; }
.laptop-base { height: 15px; background: linear-gradient(#c6ced5, #7d8a96); border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%; margin: 0 -4%; position: relative; }
.laptop-base::before { content: ""; display: block; width: 18%; height: 5px; background: #6e7b87; border-radius: 0 0 5px 5px; margin: auto; }
.hero .laptop-caption { font: 600 .58rem/1.6 ui-monospace, monospace; letter-spacing: .12em; text-align: center; margin-top: 22px; color: #627282; }
.erp-chart { height: 70px; display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 0; margin-bottom: 15px; background: repeating-linear-gradient(to top, #dce2e9 0 1px, transparent 1px 20px); }
.erp-chart span { flex: 1; height: var(--bar); background: #cc3344; border-radius: 2px 2px 0 0; }
.preview-body { min-height: 375px; }
#business-systems .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#business-systems .capabilities article:last-child { grid-column: 1 / -1; }
#business-systems .capabilities article:last-child p { max-width: 65ch; }
.team { background: #f5f2f2; }
.founder-photo { max-height: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-block: 44px; }.laptop { max-width: 650px; margin-inline: auto; }.hero-copy { max-width: 650px; } }
@media (max-width: 480px) { #business-systems .capabilities { grid-template-columns: 1fr; }.hero { gap: 22px; }.laptop-screen { padding: 10px 5px; border-radius: 11px 11px 4px 4px; }.preview-metrics strong { font-size: 1rem; }.preview-body { min-height: 330px; }.preview-content { padding: 14px 9px; }.erp-chart { height: 55px; } }

.founder-photo { aspect-ratio: auto; width: 100%; height: auto; object-fit: contain; }

/* Detailed illustrative CRM and ERP dashboard. */
.laptop .preview-body { grid-template-columns: 92px minmax(0, 1fr); min-height: 0; }
.laptop .preview-body aside { gap: 15px; padding: 18px 10px; font-size: .57rem; }
.laptop .preview-top { font-size: .58rem; padding: 11px; }
.preview-top strong span { font-weight: 400; color: #718094; }
.laptop .preview-content { padding: 16px 12px; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.laptop .preview-caption { margin: 0 0 5px; font-size: .5rem; }
.laptop .preview-content h2 { font-size: 1.1rem; }
.period { font-size: .5rem; border: 1px solid #dce2e9; padding: 4px; background: white; border-radius: 3px; white-space: nowrap; }
.laptop .preview-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-block: 14px; }
.laptop .preview-metrics div { padding: 8px 6px; gap: 4px; }
.laptop .preview-metrics strong { font-size: .98rem; letter-spacing: -.04em; }
.laptop .preview-metrics small { font-size: .48rem; }
.preview-metrics div>span { font-size: .43rem; color: #69798a; }
.dashboard-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-bottom: 10px; }
.dashboard-panel { position: relative; padding: 11px 9px; background: white; border: 1px solid #dce2e9; border-radius: 4px; min-width: 0; }
.dashboard-panel h3 { font-size: .64rem; letter-spacing: -.02em; margin: 0 0 10px; }
.laptop .erp-chart { height: 74px; margin: 0 0 0 22px; gap: 9px; padding: 0 4px; }
.chart-scale { position: absolute; top: 34px; bottom: 25px; left: 8px; display: flex; flex-direction: column; justify-content: space-between; color: #778494; font-size: .4rem; }
.chart-months { display: flex; justify-content: space-around; margin: 4px 0 0 24px; font-size: .4rem; color: #778494; }
.pipeline>div { display: flex; justify-content: space-between; padding-block: 4px; font-size: .52rem; border-bottom: 1px solid #edf0f3; }
.orders table { width: 100%; border-collapse: collapse; text-align: left; font-size: .5rem; }
.orders th { font-weight: 500; color: #6e7c8c; }
.orders td,.orders th { padding: 7px 3px; border-bottom: 1px solid #edf0f3; }
.orders td:nth-child(3),.orders th:nth-child(3) { text-align: right; padding-right: 8px; }
.order-status { display: inline-block; padding: 2px 4px; background: #e8f3ee; color: #2c6650; border-radius: 3px; }
.order-status.pending { color: #8a631a; background: #fbf3df; }
.inventory-alert { display: grid; gap: 2px; border-left: 2px solid #c72535; margin-top: 10px; padding: 6px 8px; background: #f9edef; font-size: .5rem; }
.inventory-alert span { color: #6d6b76; font-size: .46rem; }
@media(max-width:480px) {
  .laptop .preview-body { grid-template-columns: 66px minmax(0,1fr); }
  .laptop .preview-body aside { font-size: .5rem; padding-inline: 6px; }
  .laptop .preview-content { padding: 12px 7px; }
  .laptop .preview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-panels { grid-template-columns: 1fr; }
  .pipeline { display: none; }
  .laptop .preview-content h2 { font-size: .85rem; }
  .laptop .preview-top { font-size: .45rem; }
  .orders td,.orders th { padding-inline: 1px; }
  .order-status { padding-inline: 2px; }
}

.hero { position: relative; isolation: isolate; overflow: hidden; background: #12080d; color: #fff; }
.matrix-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: .62; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #12080dee, #12080d88 55%, #12080d33); }
.hero h1 { text-shadow: 0 3px 25px #000; }
.hero h1 span { color: #ff7d8d; }
.hero .eyebrow { color: #ff9aa4; }
.hero p { color: #d2c3cd; }
.hero .button { background: #c72535; color: white; }
.hero .laptop-caption { color: #e2bac1; }
.hero .preview-content .preview-caption { color: #c72535; }
.laptop .product-preview { color: #261c20; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.devices-hero { margin: 0; min-width: 0; }
.devices-hero img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; border-radius: 8px; box-shadow: 0 20px 60px #0006; border: 1px solid #ffffff30; }
.devices-hero figcaption { margin-top: 12px; color: #efdfe3; font-size: .75rem; line-height: 1.6; }
.devices-hero figcaption span { color: #baa7af; font-size: .65rem; }
.hero { grid-template-columns: .72fr 1.28fr; gap: 34px; }
@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; }.devices-hero { width: 100%; } }

/* Place the original founder photograph on the left without altering it. */
.team > .founder { grid-column: 1; grid-row: 1; }
.team > div { grid-column: 2; grid-row: 1; }
@media (max-width: 760px) {
  .team > .founder, .team > div { grid-column: auto; grid-row: auto; }
}