/* For business: a calm daylight page in the same navy, paper and gold as appvantix.com, so the step from the arcade to the work side is a clear one. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-opsz.woff2) format("woff2"); }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url(/fonts/silk-700.woff2) format("woff2"); }
:root { --ink: #0B1240; --steel: #44506B; --paper: #F4F6FF; --white: #FFFFFF; --line: #D9DEF2; --accent: #2F52E0; --accent-d: #2240B8; --gold: #FFC233; color-scheme: light; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-d); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--ink); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 10px; z-index: 10; padding: 8px 12px; background: var(--ink); color: #fff; }

.bar, main, .foot { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px 0; }
.bar .mark { font: 700 13px/1 "Silkscreen", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.bar .mark::before { content: "\25C0\00A0\00A0"; color: var(--accent); }
.bar .back { font-size: 15px; font-weight: 500; color: var(--steel); text-decoration: none; padding: 10px 2px; }
.bar .back:hover { color: var(--ink); text-decoration: underline; }

.intro { padding-block: clamp(56px, 9vw, 110px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
h1 { margin: 0 0 22px; max-width: 14em; font-weight: 800; font-size: clamp(2.3rem, 5.8vw, 4.2rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.lead { margin: 0; max-width: 34em; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; color: var(--steel); text-wrap: pretty; }

.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.product.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.product.flip .copy { order: 2; }
h2 { margin: 0 0 6px; font-weight: 750; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.025em; }
.who { margin: 0 0 14px; font-weight: 600; color: var(--accent-d); }
.copy p { margin: 0 0 16px; max-width: 34em; text-wrap: pretty; }
.copy .cta { margin: 24px 0 18px; }
.button { display: inline-block; padding: 14px 22px; font-weight: 650; font-size: 16px; line-height: 1.2; color: #fff; background: var(--accent); border-radius: 10px; text-decoration: none; box-shadow: 0 1px 2px rgba(11,18,64,.2), 0 6px 14px -6px rgba(47,82,224,.55); transition: background .15s, transform .15s; }
.button:hover { background: var(--accent-d); transform: translateY(-1px); }
.more { font-size: 15px; color: var(--steel); }

.shot { margin: 0; border-radius: 14px; overflow: hidden; background: #0d1117; box-shadow: 0 1px 2px rgba(11,18,64,.12), 0 24px 48px -24px rgba(11,18,64,.45); }
.shot.light { background: var(--white); border: 1px solid var(--line); }
.shot img { display: block; width: 100%; height: auto; }

.contact { padding-block: clamp(48px, 7vw, 80px); }
.contact h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.contact p { margin: 8px 0 0; color: var(--steel); }
.foot { padding-block: 28px 56px; border-top: 1px solid var(--line); font-size: 14px; color: #2F3A58; }
.foot p { margin: 0 0 6px; }
.foot a { color: #2F3A58; }

@media (max-width: 820px) { .product, .product.flip { grid-template-columns: 1fr; } .product.flip .copy { order: 0; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover { transform: none; } }