/* ========================================================================== Witty Owls: site stylesheet. Design option B, "Clear Blue" Light, corporate, one accent (deep blue #1D4ED8). Inter variable (self-hosted, Latin subset, wght 400-700) with a metric-matched Arial fallback (CLS 0). CLASS REFERENCE (used consistently across every page) -------------------------------------------------------------------------- Global / layout html.no-js / html.js Set by site.js. Without JS the nav is always open and nothing is hidden by the reveal motion. .skip-link "Skip to content" link, visible on focus. .container Centred column (max 1200px) with side padding. .section A page section (vertical rhythm). White by default. .section--tint Soft blue-grey band (#EFF4FB). Consecutive sections alternate white / tint on every page. (.section--alt is kept as an alias of --tint.) .section--navy The ONE deep navy band per page. Home: "How we work". Inner pages: the final .cta-band is navy. Inside it, text, eyebrows, links, .icon-tile, .steps (numbers + connecting line), .card and .btn--secondary switch to dark-surface variants (all AA on #0B1F4B). .section--compact Tighter vertical padding (services blocks). .check-list Checkmark list. --2col splits it on desktop. .ticks Small blue-tick bullets for lists inside cards. .section__head Heading group (eyebrow + h2 + lede). .section__head--split puts the lede on the right. .eyebrow Small blue label above a heading. .lede Larger intro paragraph. .note Small, muted supporting text. .actions Row of buttons/links (wraps). .icon Inline SVG icon (uses the sprite in ). .icon-tile Rounded blue-tint tile holding an .icon. [data-reveal] Fades/slides in on scroll (site.js, motion-safe). .split-layout Two columns: sticky .section__head left, content right (home "Why" and FAQ). Stacks under 960px. Header / nav .site-header Sticky white bar. .is-scrolled adds the hairline. .brand Logo link. .brand__logo (img) + .brand__name. .nav-toggle Mobile menu button (hidden until JS runs). .site-nav Main nav (#site-nav). .site-nav__list, .site-nav__cta. .site-nav.is-open Mobile menu open state (full-width sheet). [aria-current="page"] Current page link in the nav. Buttons .btn Base. .btn--primary (solid blue), .btn--secondary (white + border), .btn--light (white on dark band), .btn--ghost-light (outline on dark band). .link-arrow / .card__link Text link with a sliding arrow. Heroes .hero Home hero. .hero__content, .hero__actions. .hero-visual Decorative product-UI collage (aria-hidden): .mock-window (dashboard), .mock-code (editor), .mock-metric (release toast), .mock-chat (AI chat with .mock-chat__source chip), .mock-phone. .page-hero Compact intro band on every inner page. Content blocks .trust-strip Value facts under the hero (check icons). .card-grid Responsive grid. --2 / --3 / --4, --bento (3 + 4). .card White card. .card__title, .card__link. a.card / .card--link lift on hover. .pillar, .service-card, .audience (.audience__engagement) .chips / .chip Tech stack pills. .stack-group = label + chips. .steps / .step Numbered process with a connecting line. .demo-card Demo card. .demo-card__thumb (screenshot frame, WebP in /assets/work/). .demo-grid = 2-up grid. .pricing-card Plan card. __price (with __from + __unit spans), __list, __badge. --featured (blue border), --custom (secondary). .compare Comparison table wrapper. .faq / .faq__item

accordion with a rotating chevron. .contact-card Contact channel card. .contact-card__actions. .cta-band Final call to action. Deep navy on inner pages (their one navy band). .cta-band--light is the tinted variant used on Home, where "How we work" is the navy band. .cta-band__logo. .cta-band__actions One primary button plus two secondary contact routes (.btn--route, icon + label): WhatsApp and Email. Stacks tidily on mobile. .service Services page block: .service__layout (intro left, .service__panel card right), .service__cols. .compare Stacks into labelled cards under 720px (td[data-label]). .feature-list Icon + text rows (security, factors, payments). .prose, .values, .not-found (inner pages) Footer .site-footer Deep navy footer. __inner, __about, __nav, __services, __contact, __title, __bottom, __place, __legal. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); } /* Arial, reshaped to Inter's metrics so the swap causes no layout shift. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } :root { --blue: #1D4ED8; --blue-hover: #1E40AF; --blue-500: #3B82F6; --blue-900: #172554; --navy: #0B1F4B; --tint: #EFF6FF; --tint-2: #DBEAFE; --tint-3: #BFDBFE; --ink: #0F172A; --ink-2: #334155; --text-2: #475569; --muted: #64748B; --line: #E2E8F0; --line-2: #CBD5E1; --bg: #FFFFFF; --bg-alt: #F8FAFC; --bg-tint: #EFF4FB; --line-tint: #E1E8F3; --ok: #16A34A; --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --sh-xs: 0 1px 2px rgba(15, 23, 42, .06); --sh-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px -1px rgba(15, 23, 42, .06); --sh-md: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -4px rgba(15, 23, 42, .10), 0 16px 32px -12px rgba(29, 78, 216, .12); --sh-lg: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -8px rgba(15, 23, 42, .14), 0 32px 64px -24px rgba(29, 78, 216, .28); --ease: cubic-bezier(.2, .7, .2, 1); --t: 180ms; --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(72px, 9vw, 120px); --header-h: 68px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; overflow-x: clip; } img, svg { display: block; max-width: 100%; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } img { height: auto; } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; } h3, h4 { text-wrap: pretty; } h1 { font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4.25rem); line-height: 1.04; letter-spacing: -.038em; } h2 { font-size: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; } h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.012em; font-weight: 650; } p { margin: 0; text-wrap: pretty; } p + p { margin-top: 1em; } ul, ol { margin: 0; padding: 0; } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--blue-hover); } strong { font-weight: 650; } ::selection { background: var(--tint-2); color: var(--blue-900); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; box-shadow: var(--sh-md); } .skip-link:focus { top: 12px; color: #fff; } .container { width: 100%; max-width: calc(1200px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-y) 0; position: relative; } .section--alt, .section--tint { --muted: #56657A; background: var(--bg-tint); border-block: 1px solid var(--line-tint); } .section--tint + .section--tint, .section--alt + .section--alt { border-top: 0; } .section--compact { padding: clamp(56px, 7vw, 88px) 0; } .section__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 56px); } .section__head .lede { margin-top: 16px; } .section__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 64px; align-items: end; } .section__head--split > * { grid-column: 1; } .section__head--split .eyebrow { justify-self: start; } .section__head--split .lede { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-bottom: 6px; } .section__head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); } .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--blue-500)); } .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--text-2); max-width: 64ch; } .note { font-size: .9375rem; color: var(--muted); } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 48px); } .actions--center { justify-content: center; } .split-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 32px 72px; align-items: start; } .split-layout > .section__head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; } .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 18px; height: 18px; } .icon-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 11px; color: var(--blue); background: linear-gradient(180deg, #F5F9FF, var(--tint-2)); box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .12), 0 1px 2px rgba(29, 78, 216, .08); } /* ---------- Buttons ---------- */ .btn { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--line-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; font: 600 .9688rem/1.2 var(--font); letter-spacing: -.005em; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 10px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { --btn-bg: var(--blue); --btn-fg: #fff; --btn-bd: transparent; background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 4px 12px -2px rgba(29, 78, 216, .45), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn--primary:hover { --btn-bg: var(--blue-hover); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 8px 20px -4px rgba(29, 78, 216, .5), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn--secondary { box-shadow: var(--sh-xs); } .btn--secondary:hover { --btn-bd: #94A3B8; color: var(--ink); background: var(--bg-alt); } .btn--light { --btn-bg: #fff; --btn-fg: var(--blue-900); --btn-bd: transparent; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .35); } .btn--light:hover { --btn-bg: var(--tint); color: var(--blue-900); } .btn--ghost-light { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .28); } .btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: rgba(255, 255, 255, .5); color: #fff; } .btn .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--t) var(--ease); } .btn:hover .icon { transform: translateX(3px); } .cta-band .btn:focus-visible, .site-footer a:focus-visible { outline-color: #fff; } .link-arrow, .card__link { display: inline-block; font-weight: 600; font-size: .9375rem; color: var(--blue); text-decoration: none; } .link-arrow::after, .card__link::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t) var(--ease); } .link-arrow:hover::after, .card__link:hover::after, .card:hover .card__link::after { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 6px 20px -12px rgba(15, 23, 42, .18); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; } .brand:hover { color: var(--ink); } .brand__logo { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 2px 6px -1px rgba(29, 78, 216, .4); } .site-nav { display: flex; align-items: center; gap: 28px; } .site-nav__list { display: flex; gap: 4px; list-style: none; } .site-nav__list a { position: relative; display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); } .site-nav__list a:hover { color: var(--ink); background: var(--bg-alt); } .site-nav__list a[aria-current="page"] { color: var(--blue); } .site-nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--blue); } .site-nav__cta { min-height: 40px; padding: 8px 16px; font-size: .9375rem; } .nav-toggle { display: none; align-items: center; gap: 10px; min-height: 42px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 600 .9375rem/1 var(--font); cursor: pointer; } .nav-toggle::before { content: ""; width: 16px; height: 12px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; } .nav-toggle[aria-expanded="true"]::before { background: none; width: 14px; height: 14px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l10 10M12 2L2 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l10 10M12 2L2 12'/%3E%3C/svg%3E") center / contain no-repeat; background-color: currentColor; } @media (max-width: 960px) { .js .nav-toggle:not([hidden]) { display: inline-flex; } .site-header { background: #fff; } .js .site-nav { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49; display: flex; flex-direction: column; align-items: stretch; gap: 20px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 12px var(--gutter) 28px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .25); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t); } .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .js .site-nav__list { flex-direction: column; gap: 0; } .js .site-nav__list li + li { border-top: 1px solid var(--line); } .js .site-nav__list a { padding: 15px 4px; font-size: 1.0625rem; color: var(--ink); border-radius: 0; } .js .site-nav__list a:hover { background: none; color: var(--blue); } .js .site-nav__list a[aria-current="page"]::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); } .js .site-nav__cta { min-height: 50px; font-size: 1rem; } .no-js .site-header__inner { flex-wrap: wrap; padding-block: 10px; } .no-js .site-nav { flex-wrap: wrap; gap: 8px 16px; } .no-js .site-nav__list { flex-wrap: wrap; } } /* ---------- Home hero ---------- */ .hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(48px, 7vw, 96px) 0 clamp(96px, 10vw, 150px); background: radial-gradient(60% 70% at 85% 30%, rgba(59, 130, 246, .16), transparent 70%), radial-gradient(40% 50% at 10% 0%, rgba(219, 234, 254, .9), transparent 70%), linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(29, 78, 216, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(29, 78, 216, .07) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 35%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 35%, #000 20%, transparent 75%); } .hero > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 72px); align-items: center; } .hero .eyebrow { padding: 6px 14px 6px 8px; border-radius: 999px; margin-bottom: 24px; background: rgba(255, 255, 255, .8); border: 1px solid var(--tint-3); box-shadow: 0 1px 2px rgba(29, 78, 216, .08); font-size: .75rem; letter-spacing: .07em; } .hero .eyebrow::before { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--blue) 0 3px, var(--tint-2) 3.5px); } .hero h1 { max-width: 13ch; } .hero__accent { background: linear-gradient(95deg, var(--blue) 10%, #2563EB 55%, var(--blue-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero .lede { margin-top: 24px; max-width: 54ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero__actions .btn { min-height: 50px; padding-inline: 22px; font-size: 1rem; } /* ---------- Hero collage (decorative mini product UIs) ---------- */ .hero-visual { position: relative; width: 600px; max-width: 100%; height: 560px; justify-self: end; font-size: 13px; line-height: 1.45; } .hero-visual > * { position: absolute; margin: 0; border-radius: 14px; } .mock-window { top: 0; left: 72px; right: 0; height: 332px; background: #fff; border: 1px solid #DCE4F0; box-shadow: var(--sh-lg); overflow: hidden; z-index: 1; } .mock-window__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; background: linear-gradient(#FBFCFE, #F4F7FB); border-bottom: 1px solid var(--line); } .mock-window__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DCE6; } .mock-window__url { margin-left: 14px; flex: 1; max-width: 220px; height: 18px; border-radius: 6px; background: #fff; border: 1px solid var(--line); position: relative; } .mock-window__url::before { content: ""; position: absolute; left: 8px; top: 6px; width: 60%; height: 4px; border-radius: 2px; background: #E2E8F0; } .mock-window__body { display: grid; grid-template-columns: 112px 1fr; height: calc(100% - 38px); } .mock-window__side { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border-right: 1px solid #EEF2F7; background: #FBFCFE; } .mock-window__side b { display: block; height: 8px; border-radius: 4px; background: #E6EBF2; } .mock-window__side b:nth-child(2n) { width: 78%; } .mock-window__side b.is-active { background: var(--blue); width: 86%; box-shadow: 0 0 0 5px var(--tint); } .mock-window__main { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mock-kpis > span { display: grid; gap: 7px; padding: 10px 11px; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; } .mock-kpis > span::before { content: ""; width: 55%; height: 5px; border-radius: 3px; background: #E2E8F0; } .mock-kpis > span::after { content: ""; width: 75%; height: 10px; border-radius: 4px; background: #CBD5E1; } .mock-kpis > span:first-child::after { background: linear-gradient(90deg, var(--blue), var(--blue-500)); } .mock-chart { width: 100%; height: auto; flex: 1; min-height: 0; overflow: visible; } .mock-rows { display: grid; gap: 8px; } .mock-rows span { height: 7px; border-radius: 4px; background: #EEF2F7; } .mock-rows span:last-child { width: 70%; } .mock-metric { top: 64px; left: 0; z-index: 5; width: 236px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid #DCE4F0; box-shadow: var(--sh-lg); } .mock-metric__icon { grid-row: span 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #ECFDF3; color: var(--ok); box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .18); } .mock-metric__icon svg { width: 20px; height: 20px; } .mock-metric__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mock-metric__value { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .mock-metric__trend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #15803D; font-weight: 500; } .mock-metric__trend::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } .mock-code { top: 252px; left: 0; z-index: 2; width: 384px; background: linear-gradient(180deg, #0F2557, var(--navy)); color: #CBD5E1; border: 1px solid #1E3A8A; box-shadow: 0 24px 48px -16px rgba(11, 31, 75, .55), 0 2px 6px rgba(11, 31, 75, .2); overflow: hidden; } .mock-code__tabs { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .07); } .mock-code__tabs i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .mock-code__file { margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #E2E8F0; font: 500 11.5px/1.4 var(--mono); } .mock-code pre { margin: 0; padding: 14px 16px 16px; font: 12.25px/1.75 var(--mono); white-space: pre; overflow: hidden; counter-reset: ln; } .mock-code .l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 1.4em; margin-right: 14px; text-align: right; color: #475C8A; } .mock-code .k { color: #93C5FD; } .mock-code .f { color: #fff; font-weight: 600; } .mock-code .v { color: #FCD9A6; } .mock-code .p { color: #7C8DB5; } .mock-code .caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -3px; background: #60A5FA; border-radius: 1px; } .mock-phone { top: 176px; right: -6px; z-index: 3; width: 150px; height: 300px; padding: 7px; border-radius: 28px; background: #0F172A; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .6), inset 0 0 0 1.5px #334155; } .mock-phone__screen { position: relative; height: 100%; border-radius: 22px; background: #fff; overflow: hidden; padding: 26px 11px 12px; display: flex; flex-direction: column; gap: 10px; } .mock-phone__screen::before { content: ""; position: absolute; top: 7px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 8px; background: #0F172A; } .mock-phone__title { height: 8px; width: 62%; border-radius: 4px; background: #CBD5E1; } .mock-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px 6px; border-radius: 10px; background: var(--bg-alt); border: 1px solid #EEF2F7; } .mock-cal i { aspect-ratio: 1; border-radius: 50%; background: #E2E8F0; transform: scale(.55); } .mock-cal i.is-on { background: var(--blue); transform: scale(1); box-shadow: 0 0 0 2px var(--tint-2); } .mock-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mock-slots i { height: 20px; border-radius: 7px; border: 1px solid var(--line); background: #fff; } .mock-slots i.is-on { border-color: var(--blue); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue); } .mock-phone__btn { margin-top: auto; height: 26px; border-radius: 8px; background: var(--blue); box-shadow: 0 4px 10px -3px rgba(29, 78, 216, .55); } .mock-chat { bottom: 0; left: 212px; z-index: 4; width: 312px; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid #DCE4F0; box-shadow: var(--sh-lg); } .mock-chat__head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #EEF2F7; } .mock-chat__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue)); } .mock-chat__avatar svg { width: 14px; height: 14px; } .mock-chat__head::after { content: ""; width: 90px; height: 7px; border-radius: 4px; background: #E2E8F0; } .mock-chat__bubble { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; } .mock-chat__bubble + .mock-chat__bubble { margin-top: 0; } .mock-chat__bubble--user { align-self: flex-end; color: #fff; background: var(--blue); border-bottom-right-radius: 4px; } .mock-chat__bubble--bot { align-self: flex-start; color: var(--ink); background: var(--bg-alt); border: 1px solid #E8EDF4; border-bottom-left-radius: 4px; } .mock-chat__source { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 8px; padding: 4px 9px 4px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--tint-3); color: var(--blue); font-size: 11.5px; font-weight: 600; } .mock-chat__source svg { width: 13px; height: 13px; } @media (prefers-reduced-motion: no-preference) { .hero-visual > * { animation: mock-in .7s var(--ease) both; } .hero-visual > .mock-window { animation-delay: .05s; } .hero-visual > .mock-code { animation-delay: .18s; } .hero-visual > .mock-phone { animation-delay: .28s; } .hero-visual > .mock-chat { animation-delay: .38s; } .hero-visual > .mock-metric { animation-delay: .5s; } .mock-code .caret { animation: blink 1.1s steps(1) 6; } } @keyframes mock-in { from { opacity: 0; transform: translateY(14px); } } @keyframes blink { 50% { opacity: 0; } } /* ---------- Trust strip (overlaps the hero) ---------- */ .trust { position: relative; z-index: 2; margin-top: clamp(-72px, -6vw, -48px); } .trust-strip { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: 8px; } .trust-strip li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-size: .9688rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); } .trust-strip li + li { border-left: 1px solid var(--line); } .trust-strip .icon-tile { width: 40px; height: 40px; border-radius: 10px; } .trust-strip .icon { width: 21px; height: 21px; } /* ---------- Cards & grids ---------- */ .card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--bento { grid-template-columns: repeat(12, minmax(0, 1fr)); } .card-grid--bento > * { grid-column: span 3; } .card-grid--bento > :nth-child(-n+3) { grid-column: span 4; } .card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); color: var(--text-2); font-size: .9688rem; line-height: 1.6; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .card p + p { margin-top: 0; } .card__title { color: var(--ink); text-wrap: pretty; } .card .icon-tile { margin-bottom: 6px; transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .card:hover .icon-tile { color: #fff; background: linear-gradient(180deg, var(--blue-500), var(--blue)); box-shadow: 0 6px 14px -4px rgba(29, 78, 216, .5); } .card__link { margin-top: auto; padding-top: 8px; text-wrap: balance; } .card:has(.card__link):hover, a.card:hover { transform: translateY(-3px); border-color: var(--tint-3); box-shadow: var(--sh-md); } .card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card:focus-within:has(.card__link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; } .card__link:focus-visible { outline: none; } /* Pillars: a quiet top rule that lights up on hover */ .pillar { padding-top: 32px; overflow: hidden; } .pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-500)); transform: scaleX(.18); transform-origin: left; transition: transform .35s var(--ease); } .pillar:hover::before { transform: none; } /* Services */ .service-card { gap: 14px; } .service-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .service-card__top .icon-tile { margin: 0; } .service-card__top .card__title { font-size: 1.0625rem; } .card-grid--bento > :nth-child(-n+3) .card__title { font-size: 1.1875rem; } /* Chips */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #F1F5F9; border: 1px solid #E5EAF1; color: var(--ink-2); font-size: .8125rem; font-weight: 500; line-height: 1.4; white-space: nowrap; } .stack-group { display: grid; grid-template-columns: 160px 1fr; gap: 12px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); } .stack-group > :first-child { font-size: .875rem; font-weight: 600; color: var(--ink); } /* Audience */ .audience__engagement { margin-top: auto !important; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: .875rem; color: var(--muted); } .audience__engagement a { display: block; margin-top: 2px; font-weight: 600; font-size: .9375rem; text-decoration: none; } .audience__engagement a:hover { text-decoration: underline; } .audience { padding-bottom: 24px; } @supports (grid-template-rows: subgrid) { .audience { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; } .audience__engagement { margin-top: 4px !important; } } /* ---------- Steps ---------- */ .steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 40px 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); } .step { position: relative; counter-increment: step; color: var(--text-2); font-size: .9375rem; line-height: 1.6; } .step::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: #fff; color: var(--blue); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px var(--tint-3), 0 0 0 6px #fff, 0 4px 10px -2px rgba(29, 78, 216, .2); position: relative; z-index: 1; } .step:first-child::before { background: var(--blue); color: #fff; box-shadow: 0 0 0 6px #fff, 0 6px 14px -3px rgba(29, 78, 216, .55); } .step:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: -18px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--tint-3) 0 6px, transparent 6px 11px); } .step:first-child::after { background: linear-gradient(90deg, var(--blue), var(--tint-3)); } .step__title { font-size: 1rem; margin-bottom: 8px; } /* ---------- Demo cards ---------- */ .demo-grid { gap: 24px; } .demo-card { padding: 12px 12px 26px; } .demo-card > :not(.demo-card__thumb) { margin-inline: 16px; } .demo-card .card__title { margin-top: 12px; font-size: 1.1875rem; } .demo-card__thumb { position: relative; overflow: hidden; margin-bottom: 4px; padding: 26px 26px 0; border-radius: 10px; border: 1px solid #E3EAF5; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--tint) 55%, var(--tint-2) 100%); aspect-ratio: 16 / 9; } .demo-card__thumb::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(29, 78, 216, .14) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); } .demo-card__thumb img { position: relative; width: 100%; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 10px 30px -8px rgba(15, 23, 42, .25); transition: transform .35s var(--ease); } .demo-card:hover .demo-card__thumb img { transform: translateY(-6px) scale(1.012); } .demo-card__meta { font-size: .875rem; color: var(--muted); } /* ---------- Pricing ---------- */ .pricing-grid { align-items: stretch; } .pricing-card { padding: 32px; } .pricing-card .card__title { font-size: 1.0625rem; color: var(--ink-2); } .pricing-card__price { margin: 4px 0 6px; font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; } .pricing-card__from { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-right: 2px; } .pricing-card__unit { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); } .pricing-card__list { list-style: none; display: grid; gap: 10px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); } .pricing-card__list li { position: relative; padding-left: 28px; } .pricing-card__list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: #ECFDF3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; } .pricing-card--featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--sh-md); background: linear-gradient(180deg, #F6F9FF, #fff 40%); } .pricing-card__badge { position: absolute; top: -12px; left: 32px; padding: 4px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .04em; box-shadow: 0 4px 10px -3px rgba(29, 78, 216, .55); } .pricing-card--custom { background: var(--bg-alt); box-shadow: none; border-style: dashed; } /* ---------- Comparison table (how-we-work) ---------- */ .compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-xs); } .compare table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .compare thead th { background: var(--bg-alt); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); } .compare tbody th { color: var(--ink); font-weight: 600; position: sticky; left: 0; background: #fff; } .compare tr:last-child > * { border-bottom: 0; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 12px; } .faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .faq__item:hover { border-color: var(--line-2); } .faq__item[open] { border-color: var(--tint-3); box-shadow: var(--sh-sm); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0313rem; letter-spacing: -.01em; color: var(--ink); border-radius: var(--r); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s var(--ease), background-color var(--t) var(--ease); } .faq__item[open] summary::after { transform: rotate(180deg); background-color: var(--tint-2); } .faq__item > p { padding: 0 22px 22px; color: var(--text-2); max-width: 66ch; } @media (prefers-reduced-motion: no-preference) { .faq__item[open] > p { animation: faq-in .3s var(--ease); } } @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } } /* ---------- Contact cards (contact page) ---------- */ .contact-card { align-items: flex-start; } .contact-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; } /* ---------- CTA band (the one deep-blue band) ---------- */ .cta-band { position: relative; isolation: isolate; overflow: clip; padding: clamp(72px, 9vw, 112px) 0; text-align: center; color: #C7D2FE; background: radial-gradient(50% 80% at 50% 0%, rgba(59, 130, 246, .45), transparent 70%), radial-gradient(45% 70% at 0% 100%, rgba(29, 78, 216, .22), transparent 70%), radial-gradient(45% 70% at 100% 100%, rgba(29, 78, 216, .22), transparent 70%), linear-gradient(180deg, #1E3A8A 0%, var(--blue-900) 100%); } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 48px 48px; background-position: center -1px; -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 10%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 90% at 50% 10%, #000, transparent 75%); } .cta-band__logo { width: 56px; height: 56px; margin: 0 auto 28px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 10px rgba(255, 255, 255, .06), 0 16px 40px -8px rgba(0, 0, 0, .5); } .cta-band h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); max-width: 18ch; margin-inline: auto; } .cta-band p { max-width: 52ch; margin: 16px auto 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); color: #DBEAFE; } .cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px !important; } .cta-band__actions .btn { min-height: 50px; padding-inline: 22px; font-size: 1rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy); color: #A5B4CF; font-size: .9375rem; padding-top: clamp(56px, 7vw, 80px); border-top: 1px solid rgba(255, 255, 255, .06); } .site-footer a { color: #DCE4F2; text-decoration: none; transition: color var(--t) var(--ease); } .site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; padding-bottom: 56px; } .site-footer .brand, .site-footer .brand:hover { color: #fff; text-decoration: none; } .site-footer .brand__logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); } .site-footer__about p { margin-top: 16px; max-width: 38ch; line-height: 1.65; } .site-footer__title { margin-bottom: 16px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7D8FB3; } .site-footer ul { list-style: none; display: grid; gap: 10px; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; position: relative; padding-top: 24px; padding-bottom: 28px; font-size: .875rem; color: #8A9BBD; } .site-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, .1); } .site-footer__bottom p { margin: 0; } .site-footer__place { margin-right: auto !important; display: inline-flex; align-items: center; gap: 10px; } .site-footer__place::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); } .site-footer__legal { order: 3; } /* ---------- Inner-page building blocks ---------- */ .page-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); background: radial-gradient(50% 90% at 90% 0%, rgba(59, 130, 246, .14), transparent 70%), linear-gradient(180deg, #F5F8FF, #fff); border-bottom: 1px solid #EEF2F7; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(29, 78, 216, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(29, 78, 216, .06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 100% at 85% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 100% at 85% 0%, #000, transparent 70%); } .page-hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); max-width: 20ch; } .page-hero .lede { margin-top: 20px; } .page-hero .actions { margin-top: 32px; } .prose { max-width: 68ch; } .prose h2 { font-size: 1.5rem; margin: 2em 0 .6em; } .prose h3 { margin: 1.6em 0 .5em; } .prose p, .prose ul, .prose ol { color: var(--ink-2); } .prose ul, .prose ol { padding-left: 1.25em; margin: 1em 0; } .prose li + li { margin-top: .4em; } .values { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; } .not-found { text-align: center; padding: clamp(80px, 12vw, 140px) 0; } .not-found__owl { width: 72px; height: 72px; margin: 0 auto 24px; } .engage { gap: 10px; } /* ---------- Scroll reveal (only when JS is on and motion is OK) ---------- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); } .js [data-reveal].is-in { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1279px) { .hero-visual { zoom: .9; } } @media (max-width: 1120px) { .hero-visual { zoom: .8; } .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--bento > *, .card-grid--bento > :nth-child(-n+3) { grid-column: auto; } .card-grid--bento > :first-child { grid-column: 1 / -1; } .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-strip li:nth-child(3) { border-left: 0; } .trust-strip li:nth-child(n+3) { border-top: 1px solid var(--line); } .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__about { grid-column: 1 / -1; } } @media (max-width: 960px) { :root { --header-h: 64px; } .hero > .container { grid-template-columns: minmax(0, 1fr); } .hero h1 { max-width: 16ch; } .hero-visual { zoom: 1; justify-self: center; margin-top: 8px; } .split-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .split-layout > .section__head { position: static; margin-bottom: 40px; } .section__head--split { display: block; max-width: 720px; } .section__head--split .lede { margin-top: 16px; padding: 0; } .card-grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .pricing-grid { gap: 28px; } .steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 24px; } .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; padding-bottom: 28px; } .step:last-child { padding-bottom: 0; } .step::before { grid-row: span 2; margin: 0; } .step:not(:last-child)::after { top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--tint-3) 0 6px, transparent 6px 11px); } .step:first-child::after { background: linear-gradient(180deg, var(--blue), var(--tint-3)); } .step__title { margin-top: 10px; } .service__cols { grid-template-columns: minmax(0, 1fr); } .stack-group { grid-template-columns: minmax(0, 1fr); gap: 8px; } } @media (max-width: 720px) { body { font-size: 1rem; } .card { padding: 24px; } .card-grid--2, .card-grid--4 { grid-template-columns: minmax(0, 1fr); } .card-grid--bento { grid-template-columns: minmax(0, 1fr); } .card-grid--bento > :first-child { grid-column: auto; } .demo-card { padding: 10px 10px 22px; } .demo-card > :not(.demo-card__thumb) { margin-inline: 12px; } .demo-card__thumb { padding: 16px 16px 0; } .trust { margin-top: -40px; } .trust-strip { grid-template-columns: minmax(0, 1fr); padding: 4px 8px; } .trust-strip li { padding: 14px 10px; } .trust-strip li + li { border-left: 0; border-top: 1px solid var(--line); } .hero { padding-top: 36px; padding-bottom: 88px; } .hero .eyebrow { font-size: .6875rem; letter-spacing: .05em; margin-bottom: 20px; } .hero__actions .btn { flex: 1 1 auto; } /* Collage becomes a compact stack */ .hero-visual { width: 100%; height: auto; display: flex; flex-direction: column; font-size: 12px; margin-top: 16px; } .hero-visual > * { position: relative; inset: auto; width: auto; } .mock-phone { display: none; } .mock-window { height: 200px; margin-left: 28px; } .mock-window__body { grid-template-columns: 56px 1fr; } .mock-window__side { padding: 12px 10px; gap: 8px; } .mock-window__main { padding: 12px; gap: 10px; } .mock-kpis { gap: 6px; } .mock-kpis > span { padding: 7px 8px; } .mock-rows { display: none; } .mock-metric { position: absolute; top: 58px; left: 0; width: 186px; padding: 10px 12px; column-gap: 10px; } .mock-metric__icon { width: 32px; height: 32px; } .mock-metric__value { font-size: 13.5px; } .mock-code { margin: -56px 12px 0 0; } .mock-code pre { font-size: 10px; padding: 10px 12px 12px; } .mock-code .l::before { margin-right: 10px; } .mock-chat { margin: -24px 0 0 40px; padding: 12px; gap: 8px; } .mock-chat__bubble { font-size: 12px; } .faq__item summary { padding: 18px; font-size: 1rem; } .faq__item > p { padding: 0 18px 18px; } .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 420px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); } .hero__actions .btn { width: 100%; } } /* ========================================================================== Rollout additions: alternating sections, navy band, contact-route CTA, inner-page components. (Kept after the responsive block so they win.) ========================================================================== */ /* ---------- Navy band: the one deep band per page ---------- */ .section--navy { --muted: #A9B8D6; isolation: isolate; overflow: clip; color: #C7D2EA; border-block: 0; background: radial-gradient(50% 70% at 88% 0%, rgba(59, 130, 246, .30), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgba(29, 78, 216, .22), transparent 70%), linear-gradient(180deg, var(--blue-900) 0%, var(--navy) 100%); } .section--navy::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; background-position: center -1px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 85% 10%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 85% 10%, #000, transparent 75%); } .section--navy h2, .section--navy h3, .section--navy .card__title, .section--navy strong { color: #fff; } .section--navy p, .section--navy .lede { color: #C7D2EA; } .section--navy .eyebrow { color: #93C5FD; } .section--navy .eyebrow::before { background: linear-gradient(90deg, #60A5FA, #93C5FD); } .section--navy a:not(.btn) { color: #93C5FD; } .section--navy a:not(.btn):hover { color: #fff; } .section--navy :focus-visible { outline-color: #fff; } .section--navy ::selection { background: #1E40AF; color: #fff; } .section--navy .icon-tile { color: #BFDBFE; background: rgba(147, 197, 253, .12); box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .3); } .section--navy .card { background: rgba(255, 255, 255, .04); border-color: rgba(147, 197, 253, .18); box-shadow: none; color: #C7D2EA; } .section--navy .btn--secondary { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .32); box-shadow: none; } .section--navy .btn--secondary:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: rgba(255, 255, 255, .55); color: #fff; background: var(--btn-bg); } .section--navy .steps { background: rgba(255, 255, 255, .035); border-color: rgba(147, 197, 253, .2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } .section--navy .step { color: #C7D2EA; } .section--navy .step::before { background: #12306C; color: #BFDBFE; box-shadow: inset 0 0 0 1.5px rgba(147, 197, 253, .5); } .section--navy .step:first-child::before { background: #2563EB; color: #fff; box-shadow: 0 0 0 5px rgba(59, 130, 246, .22), 0 8px 18px -4px rgba(37, 99, 235, .8); } .section--navy .step:not(:last-child)::after { background: repeating-linear-gradient(90deg, rgba(147, 197, 253, .55) 0 6px, transparent 6px 11px); } .section--navy .step:first-child::after { background: linear-gradient(90deg, #60A5FA, rgba(147, 197, 253, .55)); } /* ---------- CTA band variants + contact routes ---------- */ .cta-band--light { color: var(--text-2); border-top: 1px solid var(--line-tint); background: radial-gradient(50% 80% at 50% 0%, rgba(59, 130, 246, .14), transparent 70%), var(--bg-tint); } .cta-band--light::before { background-image: linear-gradient(rgba(29, 78, 216, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, .06) 1px, transparent 1px); } .cta-band--light h2 { color: var(--ink); } .cta-band--light p { color: var(--text-2); } .cta-band--light .cta-band__logo { box-shadow: 0 0 0 1px rgba(29, 78, 216, .15), 0 0 0 10px rgba(29, 78, 216, .06), 0 16px 32px -10px rgba(29, 78, 216, .45); } .cta-band--light .btn:focus-visible { outline-color: var(--blue); } .cta-band__actions { max-width: 640px; margin-inline: auto !important; } .btn--route .icon { width: 20px; height: 20px; stroke-width: 1.8; } .btn--route:hover .icon { transform: none; } .cta-band__note { margin-top: 20px !important; font-size: .9375rem !important; } @media (max-width: 560px) { .cta-band__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cta-band__actions .btn:first-child { grid-column: 1 / -1; } .cta-band__actions .btn { padding-inline: 12px; } } /* ---------- Inner pages: hero + shared lists ---------- */ .page-hero { background: radial-gradient(50% 90% at 90% 0%, rgba(59, 130, 246, .14), transparent 70%), linear-gradient(180deg, #F2F6FF, #F7F9FE); border-bottom: 1px solid var(--line-tint); } .page-hero .note { margin-top: 16px; } .ticks { list-style: none; display: grid; gap: 10px; } .ticks li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: .9688rem; line-height: 1.55; } .ticks li::before { content: ""; position: absolute; left: 0; top: .22em; width: 18px; height: 18px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: inset 0 0 0 1px var(--tint-3); } .check-list { list-style: none; display: grid; gap: 12px; max-width: 860px; } .check-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .check-list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); color: var(--ink-2); } .check-list li::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px var(--tint-3); } .check-list + .note, .feature-list + .note { margin-top: 24px; } .feature-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; } .feature-list li { display: flex; align-items: flex-start; gap: 16px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); color: var(--text-2); font-size: .9688rem; line-height: 1.6; } .feature-list li > p { margin: 0; } .feature-list strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.0313rem; } .callout { display: flex; align-items: flex-start; gap: 16px; margin-top: 32px; padding: 20px 22px; background: var(--tint); border: 1px solid var(--tint-2); border-radius: var(--r-lg); color: var(--ink-2); font-size: .9688rem; } .callout code { font: 500 .875em/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--tint-3); color: var(--blue-900); } .callout a { overflow-wrap: anywhere; } .split-layout .prose { max-width: 64ch; } .prose > p:first-child { margin-top: 0; } .prose p { font-size: 1.0625rem; line-height: 1.7; } /* ---------- Services page ---------- */ .service__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 64px; align-items: start; } .service__intro { position: sticky; top: calc(var(--header-h) + 32px); } .service__intro .icon-tile { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 22px; } .service__intro .icon-tile .icon { width: 26px; height: 26px; } .service__intro .eyebrow { display: flex; } .service__intro h2 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.375rem); } .service__intro > p:not(.eyebrow) { margin-top: 18px; color: var(--text-2); font-size: 1.0625rem; } .service__intro > p.service__demo { margin-top: 20px; } .service__panel { padding: 32px; gap: 0; } .service__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } .service__cols h3, .service__panel .stack-group > h3 { margin-bottom: 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .service__panel .stack-group { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; padding: 24px 0 0; } .engage .note { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-2); } /* ---------- Buttons inside cards ---------- */ .card__cta { align-self: flex-start; margin-top: auto; } .pricing-card .card__cta { align-self: stretch; } .pricing-card__list { margin-bottom: 16px; } .pricing-card--featured .card__title { color: var(--blue); } .pricing-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 16px 48px; align-items: center; } .pricing-card--wide .pricing-card__list { margin: 0; padding: 4px 0 4px 40px; border-top: 0; border-left: 1px solid var(--line-2); } .pricing-card--wide .card__cta { margin: 0; align-self: center; } .pricing-card__main { display: grid; gap: 8px; } /* ---------- Work page: large demo cards ---------- */ .demo-card--lg { padding: 14px 14px 28px; } .demo-card--lg > :not(.demo-card__thumb) { margin-inline: 18px; } .demo-card--lg .card__title { font-size: 1.3125rem; } .demo-card--lg .demo-card__meta { padding: 12px 14px; border-radius: 10px; background: var(--bg-alt); border: 1px solid #EEF2F7; color: var(--text-2); } .demo-card--lg .note { display: flex; align-items: center; gap: 8px; color: var(--muted); } .demo-card--lg .note .icon { width: 18px; height: 18px; color: var(--blue); } .demo-card--lg .card__cta { margin-top: 8px; } .demo-card--lg .card__cta::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } .demo-card--lg:hover { transform: translateY(-3px); border-color: var(--tint-3); box-shadow: var(--sh-md); } .demo-card--lg:focus-within:has(.card__cta:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; } .demo-card--lg .card__cta:focus-visible { outline: none; } .custom-demo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; padding: 36px; } .custom-demo .icon-tile { width: 56px; height: 56px; border-radius: 14px; margin: 0; } .custom-demo .icon-tile .icon { width: 28px; height: 28px; } .custom-demo h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .custom-demo p { margin-top: 8px; color: var(--text-2); } .custom-demo .actions { margin: 0; } /* ---------- Steps variants ---------- */ .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .steps--detailed { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 880px; padding: 40px; } .steps--detailed .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 24px; padding-bottom: 32px; } .steps--detailed .step:last-child { padding-bottom: 0; } .steps--detailed .step::before { grid-row: span 2; margin: 0; } .steps--detailed .step:not(:last-child)::after { top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--tint-3) 0 6px, transparent 6px 11px); } .steps--detailed .step:first-child::after { background: linear-gradient(180deg, var(--blue), var(--tint-3)); } .steps--detailed .step__title { margin-top: 10px; font-size: 1.0625rem; } /* ---------- Contact cards ---------- */ .contact-card .icon-tile { margin-bottom: 6px; } .contact-card .card__title { font-size: 1.1875rem; } .contact-card__actions .btn { flex: 1 1 auto; } .contact-card--primary { border-color: var(--tint-3); background: linear-gradient(180deg, #F6F9FF, #fff 45%); box-shadow: 0 0 0 1px var(--tint-3), var(--sh-sm); } .contact-card__email { overflow-wrap: anywhere; white-space: normal; } /* ---------- Values (about) ---------- */ .values-grid .card__title { font-size: 1.0625rem; } /* ---------- 404 ---------- */ .not-found h1, .not-found .lede { margin-inline: auto; } .not-found .eyebrow { justify-content: center; } .not-found .actions { justify-content: center; } /* ---------- Responsive (additions) ---------- */ @media (max-width: 1120px) { .pricing-card--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pricing-card--wide .card__cta { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 960px) { .service__layout { grid-template-columns: minmax(0, 1fr); } .service__intro { position: static; } .check-list--2col { grid-template-columns: minmax(0, 1fr); } .steps--3 { grid-template-columns: minmax(0, 1fr); gap: 0; } .section--navy .step:not(:last-child)::after { background: repeating-linear-gradient(180deg, rgba(147, 197, 253, .55) 0 6px, transparent 6px 11px); } .section--navy .step:first-child::after { background: linear-gradient(180deg, #60A5FA, rgba(147, 197, 253, .55)); } .pricing-card--wide { display: flex; } .pricing-card--wide .pricing-card__list { margin-top: 8px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); } .pricing-card--wide .card__cta { align-self: stretch; } .custom-demo { grid-template-columns: minmax(0, 1fr); padding: 28px; } .card-grid--3.contact-grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 720px) { .service__panel { padding: 24px; } .service__cols { grid-template-columns: minmax(0, 1fr); } .steps--detailed { padding: 28px 22px; } .steps--detailed .step { column-gap: 18px; } .card-grid--3.contact-grid { grid-template-columns: minmax(0, 1fr); } .demo-card--lg { padding: 10px 10px 24px; } .demo-card--lg > :not(.demo-card__thumb) { margin-inline: 12px; } .callout { flex-direction: column; gap: 12px; } .feature-list li { padding: 18px; } /* Comparison table becomes one labelled card per model */ .compare { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; } .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; } .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .compare tbody { display: grid; gap: 16px; } .compare tr { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); overflow: hidden; } .compare tbody th { position: static; padding: 14px 18px; background: var(--tint); color: var(--blue-900); font-size: 1.0313rem; border-bottom: 1px solid var(--tint-2); } .compare td { padding: 12px 18px; } .compare tr:last-child > * { border-bottom: 1px solid var(--line); } .compare tr > td:last-child { border-bottom: 0; } .compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } } .feature-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 720px) { .feature-list--2 { grid-template-columns: minmax(0, 1fr); } } .prose > h2:first-child { margin-top: 0; }