/* ============================================================ APS — Automated Process Services Visual system: Geist + Geist Mono, dark-first, signal accent. ============================================================ */ /* Fonts are loaded from the HTML with preconnect — an @import here would block first paint on the Google Fonts round-trip. */ /* ---------- Tokens ---------- */ :root { --accent-h: 258; /* dark theme (default) */ --bg: oklch(0.165 0.008 260); --bg-grad: oklch(0.19 0.012 262); --panel: oklch(0.205 0.010 260); --surface: oklch(0.232 0.012 260); --surface-2: oklch(0.262 0.013 260); --border: oklch(0.305 0.012 260); --border-strong: oklch(0.40 0.014 260); --text: oklch(0.965 0.004 260); --muted: oklch(0.74 0.012 260); --faint: oklch(0.56 0.012 260); --accent: oklch(0.70 0.16 var(--accent-h)); --accent-dim: oklch(0.77 0.135 var(--accent-h)); --accent-soft: oklch(0.70 0.16 var(--accent-h) / 0.16); --accent-line: oklch(0.70 0.16 var(--accent-h) / 0.32); --accent-ink: oklch(0.16 0.035 var(--accent-h)); --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 18px 50px -20px oklch(0 0 0 / 0.6); --shadow-lift: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 34px 70px -28px oklch(0 0 0 / 0.7); --maxw: 1400px; --pad: clamp(18px, 3.2vw, 44px); --r: 16px; --ff: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; } [data-theme="light"] { --bg: oklch(0.975 0.004 250); --bg-grad: oklch(0.955 0.008 250); --panel: oklch(0.985 0.003 250); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.004 250); --border: oklch(0.905 0.007 255); --border-strong: oklch(0.84 0.01 255); --text: oklch(0.215 0.012 262); --muted: oklch(0.46 0.014 262); --faint: oklch(0.62 0.012 262); --accent: oklch(0.55 0.17 var(--accent-h)); --accent-dim: oklch(0.49 0.16 var(--accent-h)); --accent-soft: oklch(0.55 0.17 var(--accent-h) / 0.10); --accent-line: oklch(0.55 0.17 var(--accent-h) / 0.22); --accent-ink: oklch(0.99 0.01 var(--accent-h)); --shadow-card: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 20px 44px -26px oklch(0.2 0.04 260 / 0.22); --shadow-lift: 0 1px 2px oklch(0.2 0.02 260 / 0.06), 0 34px 64px -30px oklch(0.2 0.04 260 / 0.30); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { font-family: var(--ff); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .5s ease, color .5s ease; } ::selection { background: var(--accent); color: var(--accent-ink); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ---------- Shared layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-dim); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: rotate(45deg); } .section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); } .section-head h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; margin-top: 18px; text-wrap: balance; } .section-head p { color: var(--muted); font-size: clamp(16px, 1.7vw, 19px); margin-top: 18px; max-width: 580px; text-wrap: pretty; } section { padding-block: clamp(40px, 5vw, 76px); position: relative; } /* ---------- Buttons ---------- */ .btn { font-family: var(--ff); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: transform .18s cubic-bezier(.2,.7,.3,1), background .2s, border-color .2s, box-shadow .2s, color .2s; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, white), var(--accent) 58%, color-mix(in oklab, var(--accent) 92%, black)); color: var(--accent-ink); font-weight: 600; border-color: color-mix(in oklab, var(--accent) 80%, black); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0 0 0 / 0.18), 0 12px 26px -12px var(--accent); } .btn-primary:hover { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.26), 0 0 0 4px var(--accent-soft), 0 16px 32px -12px var(--accent); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-dim); transform: translateY(-2px); } .btn .arrow { transition: transform .2s; } .btn:hover .arrow { transform: translate(3px, -3px); } /* ---------- Nav ---------- */ header.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; } header.nav.scrolled { background: color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border); } .nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 600; } .brand .mark { width: 30px; height: 30px; position: relative; flex: none; } .brand .mark i { position: absolute; inset: 0; border: 1.6px solid var(--accent); border-radius: 6px; } .brand .mark i:nth-child(1) { transform: rotate(0deg); opacity: .35; } .brand .mark i:nth-child(2) { transform: rotate(45deg) scale(.72); background: var(--accent-soft); } .brand .mark::after { content: ""; position: absolute; inset: 42% 42% auto auto; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); top: 11px; left: 11px; } .brand b { font-size: 18px; letter-spacing: 0.02em; font-weight: 700; } .brand .sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; display: block; line-height: 1; margin-top: 2px; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a.lnk { font-size: 14.5px; color: var(--muted); padding: 8px 13px; border-radius: 8px; transition: color .2s, background .2s; font-weight: 450; white-space: nowrap; } .nav-links a.lnk:hover { color: var(--text); background: var(--surface); } .nav-links a.lnk[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); } .nav-right { display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .2s, border-color .2s, transform .2s; } .theme-toggle:hover { color: var(--accent-dim); border-color: var(--accent); transform: rotate(-12deg); } .theme-toggle svg { width: 17px; height: 17px; } [data-theme="light"] .theme-toggle .ico-sun { display: none; } [data-theme="light"] .theme-toggle .ico-moon { display: block; } .theme-toggle .ico-sun { display: block; } .theme-toggle .ico-moon { display: none; } .nav-burger { display: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; place-items: center; gap: 5px; flex-direction: column; } .nav-burger span { display: block; width: 16px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; } header.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); } header.nav.menu-open .nav-burger span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { padding-top: clamp(132px, 16vh, 200px); padding-bottom: clamp(40px, 6vw, 76px); position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero-bg .grid { position: absolute; inset: -2px; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 72%); opacity: .5; } .hero-bg .glow { position: absolute; width: 64vw; height: 64vw; max-width: 820px; max-height: 820px; right: -10%; top: -30%; background: radial-gradient(circle at 60% 40%, var(--accent-soft) 0%, transparent 62%), radial-gradient(circle at 30% 70%, oklch(0.62 0.17 305 / 0.10) 0%, transparent 58%); filter: blur(8px); } /* second aurora, low left, cooler hue — gives the hero depth without weight */ .hero-bg::after { content: ""; position: absolute; width: 50vw; height: 42vw; max-width: 640px; max-height: 520px; left: -12%; bottom: -32%; background: radial-gradient(ellipse at 40% 60%, oklch(0.66 0.13 220 / 0.10) 0%, transparent 62%); filter: blur(10px); } .hero-bg .flow { position: absolute; height: 1px; left: 0; right: 0; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .hero-bg .flow { animation: flow 7s linear infinite; } .hero-bg .flow.f1 { top: 30%; animation-delay: 0s; } .hero-bg .flow.f2 { top: 54%; animation-delay: 2.4s; } .hero-bg .flow.f3 { top: 72%; animation-delay: 4.6s; } } @keyframes flow { 0% { transform: translateX(-30%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .hero-inner { position: relative; z-index: 1; text-align: center; max-width: 980px; margin-inline: auto; } .hero h1 { font-size: clamp(40px, 6.5vw, 78px); font-weight: 600; line-height: 0.98; letter-spacing: -0.035em; margin-top: 26px; text-wrap: balance; } .hero h1 .accent { background: linear-gradient(94deg, var(--accent) 10%, oklch(0.60 0.19 305) 55%, oklch(0.62 0.16 230) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="light"] .hero h1 .accent { background-image: linear-gradient(94deg, var(--accent) 10%, oklch(0.50 0.21 300) 55%, oklch(0.52 0.16 235) 100%); } .hero .lede { font-size: clamp(17px, 2.1vw, 22px); color: var(--muted); max-width: 660px; margin: 26px auto 0; text-wrap: pretty; } .hero-cta { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; justify-content: center; } .hero-stats { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: clamp(40px, 6vw, 68px); border: 1px solid var(--border); border-radius: 18px; background: color-mix(in oklab, var(--panel) 72%, transparent); backdrop-filter: blur(10px) saturate(130%); box-shadow: var(--shadow-card); overflow: hidden; } .hero-stats .stat { position: relative; padding: clamp(15px, 1.9vw, 21px) clamp(24px, 3.4vw, 48px); text-align: center; min-width: 132px; } .hero-stats .stat + .stat { border-left: 1px solid var(--border); } .hero-stats .stat .n { font-size: clamp(21px, 2.5vw, 29px); font-weight: 600; letter-spacing: -0.01em; font-family: var(--mono); color: var(--text); display: inline-flex; align-items: center; gap: 9px; } .hero-stats .stat .n::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .hero-stats .stat .l { color: var(--muted); font-size: 13px; margin-top: 7px; letter-spacing: .01em; } @media (max-width: 480px) { .hero-stats { flex-direction: column; width: 100%; } .hero-stats .stat { width: 100%; } .hero-stats .stat + .stat { border-left: none; border-top: 1px solid var(--border); } } /* reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Products ---------- */ .products { background: linear-gradient(to bottom, transparent, var(--bg-grad) 40%, transparent); } .prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .prod-grid .card.wide { grid-column: span 2; } .card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } .card .shot { position: relative; aspect-ratio: 16 / 10; background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; } .card.wide { flex-direction: row; align-items: stretch; } .card.wide .shot { aspect-ratio: auto; flex: 1 1 52%; border-bottom: none; border-right: 1px solid var(--border); min-height: 340px; } .card.wide .card-body { flex: 1 1 48%; } .card .shot image-slot { width: 100%; height: 100%; } .card .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--panel) 60%, transparent)); } .card .tag { position: absolute; z-index: 2; top: 14px; left: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-dim); background: color-mix(in oklab, var(--bg) 70%, transparent); border: 1px solid var(--accent-line); padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px); } .card-body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; flex: 1; } .card-body .ctitle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .card-body h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.02em; } .card-body .role { font-family: var(--mono); font-size: 12.5px; color: var(--faint); } .card-body p { color: var(--muted); font-size: 15.5px; text-wrap: pretty; } .feat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .feat span { font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 5px 11px; border-radius: 8px; } .card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; } .card-link { font-weight: 500; font-size: 15px; color: var(--accent-dim); display: inline-flex; align-items: center; gap: 7px; } .card-link .arrow { transition: transform .2s; } .card:hover .card-link .arrow { transform: translateX(4px); } .status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); display: inline-flex; align-items: center; gap: 7px; } .status::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .status.soon::before { background: var(--faint); box-shadow: none; } /* coming soon card */ .card.soon { background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--surface) 50%, transparent) 14px 15px), var(--panel); border-style: dashed; align-items: center; justify-content: center; text-align: center; min-height: 240px; } .card.soon:hover { transform: translateY(-4px); border-color: var(--accent-line); } .card.soon .card-body { align-items: center; } /* ---------- Dark band ---------- Scoped re-declaration of the theme tokens: any component dropped inside a .section-dark renders on the dark palette in BOTH themes. Used for the flagship showcase and the footer to give the page depth and rhythm. */ .section-dark { --bg: oklch(0.145 0.010 262); --bg-grad: oklch(0.17 0.014 262); --panel: oklch(0.185 0.012 260); --surface: oklch(0.215 0.013 260); --surface-2: oklch(0.245 0.014 260); --border: oklch(0.285 0.013 260); --border-strong: oklch(0.38 0.015 260); --text: oklch(0.965 0.004 260); --muted: oklch(0.74 0.012 260); --faint: oklch(0.56 0.012 260); --accent: oklch(0.72 0.155 var(--accent-h)); --accent-dim: oklch(0.78 0.13 var(--accent-h)); --accent-soft: oklch(0.72 0.155 var(--accent-h) / 0.16); --accent-line: oklch(0.72 0.155 var(--accent-h) / 0.32); --accent-ink: oklch(0.16 0.035 var(--accent-h)); --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 18px 50px -20px oklch(0 0 0 / 0.6); --shadow-lift: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 34px 70px -28px oklch(0 0 0 / 0.7); background: var(--bg); color: var(--text); color-scheme: dark; } /* ---------- CRM Showcase ---------- */ .showcase { background: linear-gradient(to bottom, transparent, var(--bg-grad) 45%, transparent); } .showcase.section-dark { background: linear-gradient(180deg, var(--bg), var(--bg-grad) 55%, var(--bg)); border-block: 1px solid var(--border); padding-block: clamp(56px, 7vw, 104px); overflow: hidden; } .showcase.section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 58px 58px; opacity: .4; mask-image: radial-gradient(110% 95% at 24% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(110% 95% at 24% 0%, #000, transparent 70%); } .showcase.section-dark::after { content: ""; position: absolute; pointer-events: none; width: 56vw; height: 56vw; max-width: 720px; max-height: 720px; right: -12%; top: -24%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); filter: blur(10px); } .showcase .wrap { position: relative; z-index: 1; } .showcase-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .showcase-copy h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 16px; } .showcase-copy .role-line { font-family: var(--mono); color: var(--accent-dim); font-size: 15px; margin-top: 14px; } .showcase-copy > p:not(.role-line) { color: var(--muted); font-size: clamp(16px, 1.7vw, 18.5px); margin-top: 16px; max-width: 480px; text-wrap: pretty; } .showcase-copy .feat { margin-top: 22px; } .showcase-stage { display: flex; flex-direction: column; gap: 14px; position: relative; } /* halo behind the browser frame so the demo reads as the hero object */ .showcase-stage::before { content: ""; position: absolute; inset: -8% -10%; z-index: 0; pointer-events: none; background: radial-gradient(52% 52% at 50% 46%, var(--accent-soft), transparent 70%); filter: blur(22px); } .showcase-stage .browser, .showcase-stage .stage-cap { position: relative; z-index: 1; } .stage-cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); text-align: center; } .browser { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-lift); position: relative; } .browser::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.04) inset; } .browser-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--border); } .browser-bar .dots { display: flex; gap: 7px; flex: none; } .browser-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); } .browser-bar .url { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--faint); background: var(--bg); border: 1px solid var(--border); padding: 5px 12px; border-radius: 7px; flex: 1; max-width: 280px; justify-content: center; } .browser-bar .bar-spacer { flex: none; width: 41px; } .browser-screen { position: relative; aspect-ratio: 16 / 10; background: var(--bg); } .vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .crm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 2; } .crm-video.ready { display: block; } .vid-ph { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; cursor: pointer; background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--bg) 30%, transparent), color-mix(in oklab, var(--bg) 72%, transparent) 72%); } .vid-ph.hide { display: none; } .vid-ph .play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 8px var(--accent-soft), 0 16px 36px -12px var(--accent); animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 8px var(--accent-soft), 0 16px 36px -12px var(--accent); } 50% { box-shadow: 0 0 0 16px transparent, 0 16px 36px -12px var(--accent); } } @media (prefers-reduced-motion: reduce) { .vid-ph .play { animation: none; } } .vid-ph-t { font-size: 16px; font-weight: 600; } .vid-ph-s { font-family: var(--mono); font-size: 12px; color: var(--faint); } .vid-ph-s code { background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; color: var(--accent-dim); } /* ---------- Apps page header ---------- */ .page-hero { padding-top: clamp(130px, 16vh, 180px); padding-bottom: clamp(20px, 4vw, 48px); position: relative; overflow: hidden; } .page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin-top: 22px; text-wrap: balance; max-width: 800px; } .page-hero p { color: var(--muted); font-size: clamp(16px, 1.9vw, 20px); margin-top: 22px; max-width: 560px; text-wrap: pretty; } .app-pricing { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 4px; } .app-pricing a { color: var(--accent-dim); display: inline-flex; align-items: center; gap: 6px; } .app-pricing a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- About ---------- */ .about { } .about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; } .about-copy h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; margin-top: 18px; text-wrap: balance; } .about-copy p { color: var(--muted); font-size: clamp(16px, 1.7vw, 18.5px); margin-top: 20px; max-width: 520px; text-wrap: pretty; } .principles { display: grid; gap: 14px; } .principle { display: flex; gap: 16px; padding: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; transition: border-color .3s, transform .3s; } .principle:hover { border-color: var(--border-strong); transform: translateX(4px); } .principle .pn { font-family: var(--mono); color: var(--accent-dim); font-size: 14px; font-weight: 600; flex: none; } .principle h4 { font-size: 16.5px; font-weight: 600; } .principle p { color: var(--muted); font-size: 14.5px; margin-top: 5px; text-wrap: pretty; } /* ---------- Showcase shot gallery ---------- */ .shot-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); } .shot-gallery .gshot { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); } .shot-gallery .gshot .tag { position: absolute; z-index: 2; top: 11px; left: 11px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dim); background: color-mix(in oklab, var(--bg) 70%, transparent); border: 1px solid var(--accent-line); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px); } .shot-gallery image-slot { width: 100%; height: 100%; } /* extra shots stacked behind a tile — present for the lightbox, hidden in grid */ .shot-extra { display: none !important; } /* "+N more" badge on a tile that fans out in the lightbox */ .more-badge { position: absolute; z-index: 3; right: 10px; bottom: 10px; pointer-events: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; font-weight: 500; color: var(--text); background: color-mix(in oklab, var(--bg) 60%, transparent); border: 1px solid var(--border-strong); padding: 4px 9px 4px 7px; border-radius: 999px; backdrop-filter: blur(6px); } .more-badge svg { opacity: .8; } .card-body .more-badge { font-size: 10px; right: 7px; bottom: 7px; padding: 3px 7px 3px 6px; } /* baked-in product screenshots (replace drag-drop slots) */ .shot-img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .card.wide .shot .shot-img { object-position: top left; } /* slowly pan the wide CRM hero image (products page) so both halves are seen */ @keyframes shot-pan { from { object-position: left center; } to { object-position: right center; } } .card.wide .shot > .shot-img { animation: shot-pan 11s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .card.wide .shot > .shot-img { animation: none; } } /* ---------- Clickable shots (open in lightbox) ---------- */ .shot-zoomable { cursor: zoom-in; } .shot-zoomable .shot-img { transition: transform .5s cubic-bezier(.2,.7,.2,1); } .shot-zoomable:hover .shot-img { transform: scale(1.045); } .shot-zoom { position: absolute; z-index: 4; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; pointer-events: none; color: var(--text); background: color-mix(in oklab, var(--bg) 64%, transparent); border: 1px solid var(--border-strong); border-radius: 8px; backdrop-filter: blur(6px); opacity: 0; transform: translateY(-3px); transition: opacity .22s, transform .22s; } .shot-zoomable:hover .shot-zoom { opacity: 1; transform: translateY(0); } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: color-mix(in oklab, var(--bg) 82%, #000); backdrop-filter: blur(14px) saturate(120%); opacity: 0; transition: opacity .26s ease; } .lightbox.open { display: flex; opacity: 1; } .lb-stage { position: relative; max-width: min(1180px, 100%); width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: center; } .lb-frame { position: relative; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: 0 40px 120px -30px #000; background: var(--bg); max-height: 78vh; } .lb-frame img, .lb-frame video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--bg); } .lb-cap { display: flex; align-items: center; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .lb-cap .lb-count { color: var(--accent-dim); } .lb-cap .lb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); } .lb-btn { appearance: none; border: 1px solid var(--border-strong); cursor: pointer; background: color-mix(in oklab, var(--panel) 80%, transparent); color: var(--text); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; backdrop-filter: blur(10px); transition: background .2s, border-color .2s, transform .2s; } .lb-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .lb-btn:active { transform: scale(.94); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .lb-prev { left: clamp(8px, 2vw, 24px); } .lb-next { right: clamp(8px, 2vw, 24px); } .lb-close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); z-index: 3; width: 44px; height: 44px; } @media (max-width: 680px) { .lb-nav { top: auto; bottom: -64px; transform: none; } .lb-prev { left: calc(50% - 56px); } .lb-next { right: calc(50% - 56px); } .lb-stage { gap: 64px; } } @media (prefers-reduced-motion: reduce) { .shot-zoomable:hover .shot-img { transform: none; } .lightbox { transition: none; } } .card-body .shot-gallery { grid-template-columns: repeat(2, 1fr); margin-top: 4px; gap: 10px; } .card-body .shot-gallery .gshot { border-radius: 9px; } .card-body .shot-gallery .tag { font-size: 9px; top: 8px; left: 8px; padding: 3px 7px; } /* ---------- Roadmap / In development ---------- */ .roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; } .dev-card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 13px; box-shadow: var(--shadow-card); transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s; } .dev-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .65; } .dev-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 44% at 50% 0%, var(--accent-soft), transparent 72%); opacity: 0; transition: opacity .35s; } .dev-card:hover { transform: translateY(-4px); border-color: var(--accent-line); } .dev-card:hover::after { opacity: .6; } .dev-card .dev-top { display: flex; align-items: center; justify-content: space-between; } .dev-idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--faint); } .dev-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; } .dev-card p { color: var(--muted); font-size: 15px; text-wrap: pretty; } .dev-card .enq { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 500; color: var(--accent-dim); display: inline-flex; align-items: center; gap: 7px; } .dev-card .enq .arrow { transition: transform .2s; } .dev-card:hover .enq .arrow { transform: translateX(4px); } /* ---------- Tailored band ---------- */ .tailor-wrap { padding-top: 0; } .tailor { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(40px, 6vw, 84px); border: 1px solid var(--accent-line); background: radial-gradient(130% 150% at 100% 0%, var(--accent-soft), transparent 58%), var(--panel); box-shadow: var(--shadow-card); } .tailor .grid-bg { position: absolute; inset: 0; z-index: 0; opacity: .45; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(90% 120% at 0% 100%, #000, transparent 70%); -webkit-mask-image: radial-gradient(90% 120% at 0% 100%, #000, transparent 70%); } .tailor > * { position: relative; z-index: 1; } .tailor h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.03; margin-top: 16px; max-width: 760px; text-wrap: balance; } .tailor p { color: var(--muted); font-size: clamp(16px, 1.8vw, 19px); margin-top: 18px; max-width: 600px; text-wrap: pretty; } .tailor-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .tailor-points span { font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 9px 15px; border-radius: 10px; display: inline-flex; align-items: center; gap: 9px; } .tailor-points span::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); flex: none; } /* accent-highlighted run of body copy */ .tailor p .hl { color: var(--accent); font-weight: 500; } /* "In development" placeholders (Spaces and any unreleased product) */ .shot .soon-fill { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; text-align: center; padding: 22px; background: repeating-linear-gradient(135deg, transparent 0 20px, color-mix(in oklab, var(--surface) 50%, transparent) 20px 21px); } .gshot.soon { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in oklab, var(--surface) 55%, transparent) 13px 14px); } .soon-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dim); background: color-mix(in oklab, var(--bg) 62%, transparent); border: 1px solid var(--accent-line); padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(6px); } .soon-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: soon-pulse 2.2s ease-in-out infinite; } @keyframes soon-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { .soon-badge i { animation: none; } } .soon-note { font-family: var(--mono); font-size: 12px; color: var(--faint); } .soon-mini { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } @media (max-width: 560px) { .roadmap-grid { grid-template-columns: 1fr; } } @media (max-width: 1000px) { .shot-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .shot-gallery { grid-template-columns: 1fr 1fr; } } /* ---------- Engagement steps ---------- */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .step { position: relative; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow-card); transition: border-color .3s, transform .3s cubic-bezier(.2,.7,.3,1); } .step:hover { border-color: var(--border-strong); transform: translateY(-4px); } .step .sn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--accent-dim); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 2px; } .step .sn::before { content: ""; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); } .step h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .step p { color: var(--muted); font-size: 14.5px; text-wrap: pretty; } @media (max-width: 880px) { .steps-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } } /* ---------- Contact ---------- */ .contact { } .contact-card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: clamp(40px, 6vw, 84px); box-shadow: var(--shadow-card); } .contact-card .grid-bg { position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); } .contact-card > * { position: relative; z-index: 1; } .contact-card h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin-top: 18px; max-width: 640px; text-wrap: balance; } .contact-card p { color: var(--muted); font-size: clamp(16px, 1.8vw, 19px); margin-top: 18px; max-width: 520px; } .contact-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; } .contact-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); } .contact-meta .item .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .contact-meta .item .v { font-size: 16px; margin-top: 5px; } .contact-meta .item a.v:hover { color: var(--accent-dim); } /* ---------- Footer ---------- */ footer.foot { position: relative; overflow: hidden; border-top: 1px solid var(--border); padding-block: clamp(48px, 6vw, 76px) 26px; margin-top: clamp(16px, 3vw, 32px); } footer.foot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(80% 110% at 100% 100%, #000, transparent 68%); -webkit-mask-image: radial-gradient(80% 110% at 100% 100%, #000, transparent 68%); } footer.foot .wrap { position: relative; z-index: 1; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(30px, 4.5vw, 64px); align-items: start; } .foot-brand .brand { margin-bottom: 0; } .foot-brand > p { color: var(--muted); font-size: 14.5px; margin-top: 16px; max-width: 300px; text-wrap: pretty; } .foot-contact { display: flex; flex-direction: column; gap: 7px; margin-top: 20px; } .foot-contact a { font-family: var(--mono); font-size: 13px; color: var(--muted); transition: color .2s; } .foot-contact a:hover { color: var(--accent-dim); } .foot-col h5 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); margin-bottom: 15px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .foot-col a { color: var(--muted); font-size: 14.5px; transition: color .2s; } .foot-col a:hover { color: var(--text); } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(38px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--border); color: var(--faint); font-size: 13px; font-family: var(--mono); } @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: span 2; } } @media (max-width: 440px) { .foot-grid { grid-template-columns: 1fr; } .foot-brand { grid-column: span 1; } } /* ============================================================ Pricing page (CRM) ============================================================ */ .pricing { padding-top: clamp(20px, 3vw, 40px); } /* page-hero & showcase CTAs are left-aligned, unlike the centered home hero */ .page-hero .hero-cta, .showcase-copy .hero-cta { justify-content: flex-start; } /* --- Main pricing card --- */ .price-card { position: relative; overflow: hidden; max-width: 880px; margin-inline: auto; background: radial-gradient(130% 150% at 100% 0%, var(--accent-soft), transparent 55%), var(--panel); border: 1px solid var(--accent-line); border-radius: 22px; box-shadow: var(--shadow-lift); display: grid; grid-template-columns: 1.02fr 0.98fr; } .price-left { padding: clamp(28px, 3.4vw, 44px); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; } .price-offer { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink); background: var(--accent); padding: 7px 13px; border-radius: 999px; white-space: nowrap; } .price-offer i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); } .price-name { font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dim); } .price-amt { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .price-amt .cur { font-size: clamp(26px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; } .price-amt .num { font-size: clamp(50px, 7vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: .9; } .price-amt .per { color: var(--muted); font-size: 15px; } .price-from { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: -6px; } .price-lead { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dim); margin: 2px 0 2px; } .price-sub { color: var(--muted); font-size: 14px; text-wrap: pretty; } .price-cta { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 10px; } .price-cta .btn { width: 100%; justify-content: center; } .price-right { padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 15px; } .price-incl-h { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); } .incl-list { display: flex; flex-direction: column; gap: 12px; } .incl-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text); list-style: none; line-height: 1.35; } .incl-list li svg { color: var(--accent); flex: none; margin-top: 1px; } .price-foot { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 13px; text-wrap: pretty; border-top: 1px solid var(--border); } /* --- Key migration message --- */ .mig-key { text-align: center; max-width: 780px; margin: 0 auto clamp(38px, 5vw, 58px); } .mig-key .big { font-size: clamp(28px, 4.6vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; } .mig-key .big .accent { color: var(--accent); } .mig-key p { color: var(--muted); font-size: clamp(16px, 1.7vw, 18.5px); margin-top: 18px; text-wrap: pretty; } /* --- Migration steps: Export -> Map -> Preview -> Import --- */ .mig-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .mig-step { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); } .mig-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 75%); opacity: .6; } .mig-step .sn { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--faint); display: inline-flex; align-items: center; gap: 8px; } .mig-step .sn::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); } .mig-step h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .mig-step p { color: var(--muted); font-size: 14px; text-wrap: pretty; } /* --- Staged import order + reassurance --- */ .mig-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(20px, 2.6vw, 30px); align-items: start; } .stage-card, .reassure-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow-card); } .stage-card h4, .reassure-card h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 9px; } .stage-card h4::before, .reassure-card h4::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); } .stage-list { display: flex; flex-direction: column; gap: 0; counter-reset: stg; } .stage-list li { list-style: none; display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); } .stage-list li:last-child { border-bottom: none; } .stage-list li::before { counter-increment: stg; content: counter(stg); width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-ink); background: var(--accent); } .stage-list li b { font-weight: 500; font-size: 15px; } .stage-list li span { color: var(--faint); font-size: 13px; margin-left: auto; font-family: var(--mono); } .reassure-list { display: flex; flex-direction: column; gap: 12px; } .reassure-list li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text); } .reassure-list li svg { color: var(--accent); flex: none; margin-top: 1px; } /* --- Who it's for --- */ .aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .aud-item { display: flex; align-items: center; gap: 13px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 17px 19px; font-size: 15px; color: var(--text); transition: border-color .25s, transform .25s; } .aud-item:hover { border-color: var(--accent-line); transform: translateY(-2px); } .aud-item .ad { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); flex: none; box-shadow: 0 0 10px var(--accent); } /* --- Why APS CRM --- */ .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .why-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); transition: transform .3s, border-color .3s; } .why-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .why-card .wn { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent-dim); } .why-card h4 { font-size: 18.5px; font-weight: 600; letter-spacing: -0.02em; } .why-card p { color: var(--muted); font-size: 14.5px; text-wrap: pretty; } /* --- FAQ --- */ .faq-list { max-width: 840px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .faq { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .25s; } .faq[open] { border-color: var(--border-strong); } .faq summary { cursor: pointer; list-style: none; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 500; font-size: 16.5px; transition: color .2s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-dim); } .faq summary .chev { flex: none; color: var(--accent-dim); transition: transform .25s; } .faq[open] summary .chev { transform: rotate(180deg); } .faq .faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 72ch; text-wrap: pretty; } /* ---------- Tweaks panel host ---------- */ #tweaks { position: fixed; z-index: 200; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .nav-links { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px var(--pad) 18px; background: color-mix(in oklab, var(--bg) 94%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); display: none; } header.nav.menu-open { background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border); } header.nav.menu-open .nav-links { display: flex; } .nav-links a.lnk { padding: 12px 12px; font-size: 16px; border-radius: 10px; } .nav-burger { display: grid; } .card.wide { flex-direction: column; } .card.wide .shot { border-right: none; border-bottom: 1px solid var(--border); flex: none; min-height: 0; aspect-ratio: 16/10; } } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .showcase-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .prod-grid { grid-template-columns: 1fr; } .prod-grid .card.wide { grid-column: span 1; } .hero h1 { font-size: clamp(38px, 12vw, 60px); } } /* ---------- Mobile polish ---------- */ @media (max-width: 620px) { /* declutter the bar: burger + theme only (pricing CTA lives in the menu's Contact link + throughout the page) */ .nav-right .btn-primary { display: none; } .nav-inner { gap: 12px; } } @media (max-width: 540px) { .brand .sub { display: none; } /* avoid the long tagline overflowing the bar */ .tailor, .contact-card { padding: clamp(26px, 7vw, 40px); } .tailor { border-radius: 18px; } section { padding-block: clamp(34px, 9vw, 56px); } } /* ---------- Pricing responsive ---------- */ @media (max-width: 860px) { .mig-steps { grid-template-columns: repeat(2, 1fr); } .mig-detail { grid-template-columns: 1fr; } } @media (max-width: 720px) { .price-card { grid-template-columns: 1fr; } .price-left { border-right: none; border-bottom: 1px solid var(--border); } } @media (max-width: 460px) { .mig-steps { grid-template-columns: 1fr; } } @media (max-width: 400px) { .hero-cta .btn, .contact-actions .btn { width: 100%; justify-content: center; } .feat { gap: 7px; } }