/* ============================================================ AI Convo - marketing site Track B · Light. One accent (AI Convo blue). DM Sans brand voice, Space Grotesk display for type contrast. ============================================================ */ /* ============================================================ SELF-HOSTED BRAND FONTS 2026-07-26 (Kimi, performance pass): these were previously loaded from fonts.googleapis.com via a in the of all 60 pages. Lighthouse measured that third-party stylesheet as the single biggest render-blocking resource on mobile (897 ms on the homepage) AND named the two font files as the cause of the homepage's only layout shift (CLS 0.158: .hero-ctas jumped when DM Sans and Space Grotesk swapped in). Both problems come from the same root: the font request could not start until a cross-origin CSS round trip (DNS + TLS + fetch to a second origin) had finished. Files are byte-identical to what Google served (same v17 / v22 woff2 builds, same unicode-range split, latin + latin-ext). Both families are SIL Open Font License 1.1, so self-hosting is permitted - see assets/fonts/OFL-NOTICE.txt. The two latin files are preloaded from each page's ; latin-ext is left to unicode-range so it only downloads if a page actually renders an extended-latin character. Rendering is unchanged: same families, same weight ranges, same font-display:swap behaviour. ============================================================ */ @font-face{ font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap; src:url("assets/fonts/dm-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap; src:url("assets/fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'DM Sans';font-style:italic;font-weight:400 700;font-display:swap; src:url("assets/fonts/dm-sans-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'DM Sans';font-style:italic;font-weight:400 700;font-display:swap; src:url("assets/fonts/dm-sans-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap; src:url("assets/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap; src:url("assets/fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* accent - the single saturated brand colour */ --accent:#1A7EFB; --accent-deep:#0B5BD3; --accent-ink:#0A3F94; --tint:#EAF2FF; --tint-2:#F3F8FF; /* neutrals */ --ink:#0C1220; --ink-2:#33405A; --muted:#69748A; --line:#E4EAF3; --line-soft:#EEF2F9; /* surfaces */ --canvas:#F6F8FC; --paper:#FFFFFF; --band:#0C1428; /* deep navy band for contrast moments */ /* semantic */ --ok:#12B981; --hot:#FF5B5B; --amber:#FF9F43; /* radius */ --r-xl:28px; --r-lg:22px; --r:16px; --r-sm:11px; --pill:999px; /* shadow - soft, one system */ --sh-xs:0 1px 2px rgba(16,32,64,.05); --sh-sm:0 4px 14px -6px rgba(16,42,92,.14); --sh:0 16px 40px -18px rgba(16,42,92,.22); --sh-lg:0 40px 90px -34px rgba(12,40,100,.34); --sh-accent:0 18px 44px -16px rgba(26,126,251,.45); --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} ::selection{background:var(--accent);color:#fff} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .display{font-family:"Space Grotesk","DM Sans",sans-serif} .tnum{font-variant-numeric:tabular-nums} /* ---------- reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ========================================================= BUTTONS ========================================================= */ .btn{ display:inline-flex;align-items:center;gap:9px; font-weight:600;font-size:15px;line-height:1; padding:14px 22px;border-radius:var(--pill); border:1px solid transparent;cursor:pointer; transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .18s,color .18s,border-color .18s; white-space:nowrap; } .btn svg{width:18px;height:18px} .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)} .btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 24px 54px -16px rgba(26,126,251,.55)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--sh-sm)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:#1a2438;transform:translateY(-2px);box-shadow:var(--sh)} .btn-lg{padding:17px 28px;font-size:16px} .btn-block{width:100%;justify-content:center} /* ========================================================= TOP BAR + NAV ========================================================= */ .announce{ background:var(--ink);color:#dfe7f5; font-size:13.5px;text-align:center;padding:9px 16px; letter-spacing:.01em; } .announce b{color:#fff} .announce a{color:#9dc4ff;font-weight:600} .announce a:hover{color:#fff} .nav{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s,box-shadow .3s; } .nav.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(16,42,92,.4)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px} /* gap only separates the lockup from an optional suffix word (e.g. "Inbox"). The lockup itself is a single element, so on nav/footer the gap is inert. */ .logo{display:flex;align-items:center;gap:10px;font-family:"DM Sans",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);flex-shrink:0} /* AI Convo 2026 logotype: ONE integrated lockup image. The blue mark and the "AICONVO" letters are kerned as a single piece of artwork, so this must NEVER be rebuilt from a separate icon plus a separate wordmark with a CSS gap: that reassembly cannot reproduce the logo (it pulls the blue stroke away from the "A", which it visually completes). See BRAND-TRUTH.md. Height drives the scale; width:auto preserves the locked 6.025:1 ratio. */ .logo img{height:24px;width:auto;max-width:none;flex-shrink:0;border-radius:0;display:block} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{ font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap; padding:9px 13px;border-radius:var(--r-sm);transition:color .16s,background .16s; } .nav-links a:hover{color:var(--accent-deep);background:var(--tint-2)} .nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0} .nav-cta .login{font-size:14.5px;font-weight:600;padding:9px 6px;color:var(--ink);white-space:nowrap} .nav-cta .btn{white-space:nowrap} .nav-cta .login:hover{color:var(--accent-deep)} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer} .burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s} .mobile-menu{ display:none;flex-direction:column;gap:2px;padding:14px 24px 22px; background:#fff;border-bottom:1px solid var(--line); } .mobile-menu a{padding:13px 6px;font-weight:600;font-size:16px;border-bottom:1px solid var(--line-soft)} .mobile-menu a.btn{border:1px solid transparent;margin-top:12px;justify-content:center} /* .open only takes effect where the burger exists (<=860px). Without this the menu stays overlaid on desktop if a visitor opens it then rotates/resizes. */ @media (max-width:860px){ .mobile-menu.open{display:flex} } /* Nav-only breakpoint: the full nav carries 9 links (Agentic added 2026-07-26). Measured intrinsic need: logo 139 + links 794 + CTAs 177 + gaps 40 = ~1150px of content, which only fits once the container reaches its 1180px max. At viewport 1200-1250 the container is still below that, so the links and the "Log in" label wrapped to a second line and the whole bar looked broken. The switch to the hamburger is therefore at 1260px, the point where the one-line nav genuinely fits with a little slack. Below it, the hamburger keeps everything clean. Common laptop widths (1280, 1366, 1440+) still get the full nav. Independent of the section layout breakpoints further down. */ @media (max-width:1260px){ .nav-links,.nav-cta .login,.nav-cta .btn{display:none} .burger{display:flex} .mobile-menu.open{display:flex} } /* ========================================================= SECTION SCAFFOLD ========================================================= */ .section{padding:60px 0} .section.tight{padding:44px 0} .band-soft{background:var(--canvas)} .band-tint{background:linear-gradient(180deg,#fff 0%,var(--tint-2) 100%)} /* ========================================================= SECTION DEPTH UTILITIES (Dex, 2026-07-25, polish pass) Zero-image, on-brand depth for the flattest card-grid bands. Nick asked to lift plain, text/card-only sections. The fresh photographic overlays he also wants are pending an image-gen top-up (Higgsfield credits / OpenAI key), so these CSS-only treatments carry the visual lift in the meantime, using the SAME radial-glow vocabulary already established by .newband and .hero (one saturated accent, colour as a soft focal glow on otherwise calm chrome - not scattered in the UI). - .band-aurora: faint brand-blue aurora, adds a sense of light and depth behind a card grid without touching legibility. - .band-dots: hairline dot-grid texture, an engineered/technical feel; layer it under a grid for a subtle "built" texture. Both paint on a ::before at z-index:-1 inside an isolated stacking context, so existing card content stays fully above them with no per-child z-index edits. overflow:hidden keeps the soft glows from bleeding past the band edges. */ .band-aurora{position:relative;isolation:isolate;overflow:hidden} .band-aurora::before{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background: radial-gradient(760px 460px at 10% -8%, rgba(26,126,251,.09), transparent 62%), radial-gradient(820px 520px at 100% 8%, rgba(26,126,251,.06), transparent 60%), radial-gradient(600px 600px at 88% 108%, rgba(11,91,211,.05), transparent 60%); } /* Dark-band variant: warmer, brighter accent so it reads on --band */ .newband.band-aurora::before,.band-aurora.on-dark::before{ background: radial-gradient(720px 460px at 8% -10%, rgba(26,126,251,.22), transparent 60%), radial-gradient(780px 520px at 102% 10%, rgba(26,126,251,.14), transparent 58%), radial-gradient(620px 620px at 90% 112%, rgba(120,180,255,.08), transparent 60%); } .band-dots{position:relative;isolation:isolate;overflow:hidden} .band-dots::before{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background-image:radial-gradient(rgba(26,126,251,.22) 1.15px, transparent 1.25px); background-size:24px 24px; -webkit-mask:radial-gradient(1180px 680px at 50% -4%, #000 0%, transparent 80%); mask:radial-gradient(1180px 680px at 50% -4%, #000 0%, transparent 80%); opacity:.7; } .section-head{max-width:720px;margin:0 auto 40px;text-align:center} .section-head.left{margin-left:0;text-align:left} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-deep);background:var(--tint); padding:7px 14px;border-radius:var(--pill);margin-bottom:20px; } .eyebrow .dotg{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(26,126,251,.18)} h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.08} .section-head h2{ font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:clamp(30px,4.4vw,46px);color:var(--ink); } .section-head p{margin:18px auto 0;font-size:18px;color:var(--muted);max-width:600px} .section-head.left p{margin-left:0} /* ========================================================= HERO ========================================================= */ .hero{position:relative;overflow:hidden;padding:72px 0 84px;background:#0a1020} /* Photo swap (Dex, 2026-07-24): the original sme-hero.webp composed its subject right-of-centre, which the .hero-card (opaque, right column) then sat directly on top of - her face was fully hidden behind the form on common desktop widths (confirmed empirically at 1280/1440/1920). Background-position alone can't fix this: at cover, the image is always scaled edge-to-edge to the full viewport width here (no horizontal slack), so background-position-x is a no-op - the only lever is a new photo composed for this exact layout. sme-hero-retail.webp is a fresh, purpose-generated shot (higgsfield/GPT Image 2) with the subject held inside the left ~48% of frame and calm, open, out-of-focus retail space across the right ~50%+ where the lead-form card sits. sme-hero.webp itself is left untouched - it's still the featured image + thumbnail for the "How Much Does an AI Chatbot Cost" blog post across ~8 other pages. Her original photo now lives on about.html instead (the "Who we build for" .who-grid section there), so the shot isn't wasted, just moved off the surface where the card was covering it. */ .hero::before{content:"";position:absolute;inset:0;background: linear-gradient(105deg,rgba(7,14,30,.94) 0%,rgba(9,20,44,.80) 38%,rgba(9,20,44,.30) 68%,rgba(9,20,44,.12) 100%), url("assets/img/sme-hero-retail.webp") center/cover no-repeat; pointer-events:none} /* 2026-07-26 (Kimi, performance pass): mobile gets a 1080px-wide build of the SAME photo instead of the 1920px desktop file (113 KB -> 46 KB). This is the page's LCP element, and on Lighthouse's throttled mobile profile those 67 KB were roughly a third of a second of pure transfer time on the critical path. 1080px still exceeds the device pixels a 412px-wide phone viewport needs at ~2.6x DPR, and this breakpoint's gradient sits at .86-.92 opacity over the photo, so the image is nearly fully veiled here anyway - there is no visible difference, only fewer bytes. Desktop is untouched and still gets the full 1920px file. If the hero photo is ever swapped, regenerate BOTH files and update the two media-scoped preloads in index.html to match. */ @media(max-width:1024px){.hero::before{background: linear-gradient(180deg,rgba(7,14,30,.92) 0%,rgba(9,20,44,.86) 55%,rgba(9,20,44,.90) 100%), url("assets/img/sme-hero-retail-mobile.webp") center/cover no-repeat}} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center} .hero-copy{max-width:600px} .hero .eyebrow{background:rgba(26,126,251,.18);color:#bcd8ff;border:1px solid rgba(120,180,255,.28)} .hero h1{ font-family:"Space Grotesk",sans-serif;font-weight:700;color:#fff; font-size:clamp(38px,5.6vw,62px);letter-spacing:-.03em;margin-top:6px; } .hero h1 .grad{ background:linear-gradient(100deg,#4d9bff 0%,#7cc0ff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero .sub{font-size:19px;line-height:1.62;color:#c9d6ee;margin:22px 0 0;max-width:560px} .hero .sub b{color:#fff;font-weight:600} .hero .hchip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#dbe6fb} .hero .hchip svg{color:#6fb0ff} /* the confirmed 150+ SME count gets a slightly brighter, accent-tinted pill so it reads as the headline stat, not just another checkmark claim in the row (Nick, 2026-07-25: "trusted by 150+ SMEs... strong trust signal"). */ .hero .hchip-stat{background:rgba(26,126,251,.22);border-color:rgba(120,180,255,.45)} .hchip-stat strong{font-family:"Space Grotesk",sans-serif;font-weight:700} .hero .supported{border-top-color:rgba(255,255,255,.14)} .hero .supported .lab{color:#9fb0cc} .hero .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)} .hero .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .hchip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:var(--pill);box-shadow:var(--sh-xs)} .hchip svg{width:15px;height:15px;color:var(--accent)} .supported{display:flex;align-items:center;gap:16px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .supported .lab{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .supported img{height:46px;width:auto;opacity:.95} /* hero form card */ .hero-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-lg);padding:30px;position:relative; } .hero-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(26,126,251,.35),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .hero-card h3{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:700} .hero-card .fsub{font-size:14.5px;color:var(--muted);margin:6px 0 20px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .field{margin-bottom:12px} .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px} .field input,.field textarea{ width:100%;font-size:16px;font-family:inherit;color:var(--ink); padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--tint-2);transition:border-color .16s,box-shadow .16s,background .16s; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(26,126,251,.14)} .field textarea{resize:vertical;min-height:74px} .consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--muted);margin:6px 0 16px;line-height:1.5} .consent input{margin-top:2px;accent-color:var(--accent)} /* 2026-07-27: real server-verified lead submission (api/submit-lead.js). Inline status line shown per-form after submit (loading state is handled via the submit button's own disabled/text swap in app.js). */ .lead-form-status{font-size:13px;line-height:1.5;margin-top:10px;min-height:0} .lead-form-status:empty{margin-top:0} .lead-form-status.ok{color:var(--ok);font-weight:600} .lead-form-status.err{color:var(--hot);font-weight:600} /* reCAPTCHA v3: Nick wants the default floating badge hidden and the required Google disclosure shown instead, in our own footer typography (see .foot-bottom .rc-disclosure below) - this is Google's own documented alternative to displaying the badge (developers.google.com/recaptcha/docs/faq). */ .grecaptcha-badge{visibility:hidden!important} .floating-lead{ position:absolute;top:-18px;right:22px;z-index:3; display:flex;align-items:center;gap:10px; background:var(--ink);color:#fff;border-radius:14px;padding:11px 14px; box-shadow:var(--sh);font-size:13px; } .floating-lead .tick{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ok)} .floating-lead .tick svg{width:15px;height:15px;color:#fff} .floating-lead b{display:block;font-weight:700} .floating-lead span{color:#9fb0cc;font-size:11.5px} /* ========================================================= CLIENT LOGO WALL ========================================================= */ .clients{padding:70px 0 76px;background:var(--paper);border-top:1px solid var(--line-soft)} .clients .kicker{text-align:center;margin-bottom:8px} .clients h2{ text-align:center;font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:clamp(24px,3.2vw,34px);margin-bottom:6px; } .clients .csub{text-align:center;color:var(--muted);font-size:16px;margin-bottom:44px} .marquee{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .marquee + .marquee{margin-top:26px} .mrow{display:flex;gap:22px;width:max-content;animation:scrollx 60s linear infinite} .mrow.rev{animation-direction:reverse;animation-duration:72s} .marquee:hover .mrow{animation-play-state:paused} @keyframes scrollx{to{transform:translateX(-50%)}} /* 2026-07-25 (Dex): Nick flagged the boxed logo look ("can you stop putting the logo in the box"). The per-logo white card, hairline border, rounded corners, box-shadow and hover-lift are all removed, so every mark now sits clean and borderless directly on the white section, reading as one continuous logo strip rather than a grid of framed tiles. The fixed cell width/height + place-items:center are kept purely for even spacing and a shared vertical centre line, not for any visible frame. The .boost drop-shadow legibility assist for pale marks (below) is retained. */ .logo-cell{ flex:0 0 auto;width:150px;height:80px;display:grid;place-items:center; padding:0 14px; } /* 2026-07-24 (Dex, round 2): Nick reported "the logo will appear invisible then when I hover over it, it will show." Real cause was every one of the 44 cards sitting at grayscale(1)+opacity:.62 by default, only reaching full color/opacity on :hover. A trusted-by wall exists so a visitor instantly recognises real client brands; dimming every mark until a hover defeats that, and on mobile there is no reliable hover at all, so touch visitors never saw a legible logo. Fix: every logo now renders in full, real color at full opacity AT REST, no interaction required. Hover is kept as a subtle card-level lift only (border/shadow/translateY above), it is no longer a visibility toggle on the image itself. */ .logo-cell img{max-height:44px;max-width:118px;width:auto;height:auto;object-fit:contain;opacity:1;filter:none} /* A small number of marks (SmartBed, Workforce Network, Hair Rich Salon, Coffee Beans Supplies) are themselves pale-yellow or pale-grey in their own artwork, so real color at rest already fixes 4 of the original 8 "boosted" logos (Breakthrough Resources SG, HMMM Consultancy, Uncle Leong Seafood, Mochiolics all read clearly now on plain full color, so they've been dropped from BOOST in app.js). The remaining pale ones still need a contrast assist even in full color, because the underlying logo art itself is low-contrast on white: a soft dark hairline (drop-shadow hugging the mark's own silhouette) gives them an edge without a dark background or any opacity dimming. No hover-state change: legibility no longer depends on interaction. */ .logo-cell.boost img{filter:drop-shadow(0 0 1px rgba(12,18,32,.5)) drop-shadow(0 0 1px rgba(12,18,32,.3))} /* ========================================================= PSG / SMEs GO DIGITAL STRIP ========================================================= */ .psg-strip{background:var(--canvas)} .psg-inner{ display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center; background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); padding:30px 38px;box-shadow:var(--sh-sm); } .psg-inner img{height:96px;width:auto} .psg-inner-2col{grid-template-columns:auto 1fr} .psg-inner .txt h3{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:700;margin-bottom:6px} .psg-inner .txt p{color:var(--muted);font-size:15.5px;margin:0;max-width:640px} .psg-inner .txt b{color:var(--accent-deep)} /* ========================================================= WHO WE ARE ========================================================= */ .who-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center} .who-visual{position:relative} .who-visual .frame{ border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line); box-shadow:var(--sh);background:linear-gradient(160deg,#eaf2ff,#fff) } .who-visual .frame img{width:100%;height:auto} .who-visual .badge{ position:absolute;bottom:-20px;left:-20px;background:#fff;border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px;display:flex;gap:13px;align-items:center; } .who-visual .badge .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--accent-deep)} .who-visual .badge .ic svg{width:22px;height:22px} .who-visual .badge b{font-family:"Space Grotesk",sans-serif;font-size:19px;display:block} .who-visual .badge span{font-size:12.5px;color:var(--muted)} .who-copy h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(28px,3.8vw,42px)} .who-copy p{color:var(--ink-2);font-size:16.5px;margin:18px 0 0} .who-copy .pill-fund{ display:inline-flex;gap:10px;align-items:center;margin-top:24px; background:var(--tint);border:1px solid #cfe1ff;color:var(--accent-ink); border-radius:var(--pill);padding:11px 18px;font-weight:600;font-size:14.5px; } .who-copy .pill-fund svg{width:18px;height:18px} .who-actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap} /* ========================================================= WHY AI CONVO - reason cards ========================================================= */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .why-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:30px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s; } .why-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#cfe1ff} .why-card .ic{ width:64px;height:64px;border-radius:18px;margin-bottom:20px; background:linear-gradient(150deg,var(--tint),#fff);border:1px solid var(--line-soft); display:grid;place-items:center;overflow:hidden; } .why-card .ic img{width:42px;height:42px;object-fit:contain} .why-card .ic svg{width:30px;height:30px;color:var(--accent)} .why-card h3{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700;margin-bottom:9px} .why-card p{color:var(--muted);font-size:15px;margin:0} /* ========================================================= ROI MINI-CALCULATOR (implementation/ROI guide, Step 5) Live client-side calc: inputs left, computed output right. ========================================================= */ .roi-calc{ display:grid;grid-template-columns:1fr 1fr; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--sh-sm); } .roi-inputs{padding:30px;border-right:1px solid var(--line-soft)} .roi-inputs .field{margin-bottom:16px} .roi-hint{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45} .roi-hint a{color:var(--accent-deep);font-weight:600} .roi-output{padding:30px;background:var(--tint-2);display:flex;flex-direction:column;gap:16px} .roi-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-2)} .roi-row span{display:flex;flex-direction:column;gap:3px} .roi-row small{font-size:12px;font-weight:400;color:var(--muted)} .roi-row b{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap} .roi-gap{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .roi-gap-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .roi-gap-amt{font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:700;margin:6px 0 8px;color:var(--ink)} .roi-gap-amt.is-positive{color:var(--ok)} .roi-gap-note{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55} .roi-footnote{max-width:760px;margin:16px 0 0;font-size:12.5px;color:var(--muted)} @media (max-width:760px){ .roi-calc{grid-template-columns:1fr} .roi-inputs{border-right:none;border-bottom:1px solid var(--line-soft)} .roi-gap-amt{font-size:30px} } /* ========================================================= WHAT'S NEW (additive - new platform differentiators) ========================================================= */ .newband{background:var(--band);color:#eaf0fb;position:relative;overflow:hidden} .newband::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(26,126,251,.28),transparent 68%);top:-260px;right:-160px;pointer-events:none} .newband .eyebrow{background:rgba(26,126,251,.16);color:#8fbcff} .newband .section-head h2{color:#fff} .newband .section-head p{color:#a9b6cf} .new-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1} .new-card{ background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);padding:26px;transition:background .22s,border-color .22s,transform .22s; } .new-card:hover{background:rgba(255,255,255,.075);border-color:rgba(26,126,251,.5);transform:translateY(-4px)} .new-card .ci{width:46px;height:46px;border-radius:12px;background:rgba(26,126,251,.16);color:#8fbcff;display:grid;place-items:center;margin-bottom:16px} .new-card .ci svg{width:23px;height:23px} .new-card h3{font-family:"Space Grotesk",sans-serif;font-size:17.5px;color:#fff;font-weight:600;margin-bottom:8px} .new-card p{color:#a9b6cf;font-size:14.5px;margin:0} .new-card .tag{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fbcff} /* seventh "flagship" upgrade: a full-width feature card so 7 cards lay out as 2 rows of 3 + 1 wide band, no orphan */ .new-card--feature{grid-column:1/-1;display:flex;align-items:center;gap:22px;background:rgba(26,126,251,.09);border-color:rgba(26,126,251,.34)} .new-card--feature:hover{background:rgba(26,126,251,.12);border-color:rgba(26,126,251,.5)} .new-card--feature .ci{margin-bottom:0;flex:0 0 auto} .new-card--feature .nf-text h3{margin-bottom:6px} .new-card--feature .nf-text p{max-width:820px} @media (max-width:600px){ .new-card--feature{flex-direction:column;align-items:flex-start;gap:14px} } /* ========================================================= WHERE AI CONVO LIVES - channels ========================================================= */ .channels-intro{max-width:680px;margin:0 auto 40px;text-align:center} .channel{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; padding:36px 0; } .channel + .channel{border-top:1px solid var(--line)} .channel.flip .ch-visual{order:2} .ch-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .ch-kick{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--accent-deep)} .ch-badge-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#0e8a5f;background:#dcfaee;border:1px solid #a9edd0;padding:4px 10px;border-radius:var(--pill)} .ch-badge-live .pl{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(18,185,129,.24)} .ch-badge-soon{font-size:11.5px;font-weight:700;color:#9a6a11;background:#fff3dc;border:1px solid #ffe0a6;padding:4px 10px;border-radius:var(--pill)} .channel h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(22px,2.8vw,30px);font-weight:700} .channel .cdesc{color:var(--ink-2);font-size:16px;margin:14px 0 22px} .core-lab{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .core-list{list-style:none;margin:0;padding:0;display:grid;gap:11px} .core-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)} .core-list li svg{flex:0 0 auto;width:21px;height:21px;color:var(--accent);margin-top:1px} /* channel brand-icon badge: the real platform mark, sized to read at a glance */ .ch-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px} .ch-icon svg{width:22px;height:22px;display:block} .ch-icon--web{background:var(--tint);color:var(--accent-deep);box-shadow:inset 0 0 0 1px rgba(11,91,211,.12)} .ch-icon--wa{background:#E3F8EC;box-shadow:inset 0 0 0 1px rgba(7,94,84,.18)} .ch-icon--fb{background:#E7F1FE;color:#1877F2;box-shadow:inset 0 0 0 1px rgba(24,119,242,.20)} .ch-icon--ig{background:linear-gradient(135deg,#fff2df,#ffe3ef 38%,#f6def8 68%,#e8eaff 100%);box-shadow:inset 0 0 0 1px rgba(193,53,132,.20)} .ch-icon--tg{background:#E5F3FB;box-shadow:inset 0 0 0 1px rgba(14,90,135,.20)} /* kicker: the icon carries the true saturated brand hue; the label text uses an accessible deep shade of the same brand colour (4.5:1+ against white) instead of the generic site accent */ .ch-kick--wa{color:#075E54} .ch-kick--fb{color:#0A58CA} .ch-kick--ig{color:#C13584} .ch-kick--tg{color:#0E5A87} .ch-visual{position:relative;display:grid;place-items:center;min-height:280px} .ch-canvas{ width:100%;border-radius:var(--r-xl);border:1px solid var(--line); background:linear-gradient(160deg,#eef5ff,#fff);box-shadow:var(--sh); padding:34px;display:grid;place-items:center; } .ch-canvas.soon{background:linear-gradient(160deg,#fff7ea,#fff)} .ch-canvas img{max-height:300px;width:auto} /* chat mock inside website channel */ .chatmock{width:100%;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden} .chatmock .top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft);background:var(--tint-2)} .chatmock .ava{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-family:"Space Grotesk",sans-serif} .chatmock .nm{font-weight:700;font-size:14px} .chatmock .st{font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:5px} .chatmock .st .pl{width:6px;height:6px;border-radius:50%;background:var(--ok)} .chatmock .body{padding:16px;display:grid;gap:9px} .bub{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.45} .bub.bot{background:var(--tint-2);border:1px solid var(--line-soft);border-bottom-left-radius:5px;justify-self:start} .bub.user{background:var(--accent);color:#fff;border-bottom-right-radius:5px;justify-self:end} .bub.user b{font-weight:700} .lead-evt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#0e8a5f;background:#dcfaee;border:1px solid #a9edd0;border-radius:10px;padding:9px 12px;margin-top:4px} .lead-evt svg{width:15px;height:15px} /* ========================================================= STATS - Why brands love us Update (Dex, 2026-07-25, full-bleed pass): Nick flagged white side margins on this photo panel on index.html. Same technique as the psg-funding.html photo panels: the panel is now a direct child of its
(not nested inside .container) so the bg photo + scrim run edge-to-edge; .stats-panel-inner carries .container so the eyebrow/heading/stat-grid/footnote stay centered at the normal max-width and stay readable. Following the same precedent as psg-benefits-panel, border-radius and box-shadow are dropped at full-bleed (a rounded corner sitting exactly at the viewport edge reads as broken, not intentional). .stats-panel is only ever used on index.html, so this is a safe sitewide-class edit that in practice only affects this one page. ========================================================= */ .stats-panel{ position:relative;isolation:isolate;overflow:hidden; padding:68px 0 52px; } .stats-panel-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; } .stats-panel-scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg, rgba(6,12,28,.82) 0%, rgba(6,14,32,.6) 38%, rgba(6,14,32,.72) 68%, rgba(4,9,22,.94) 100%), linear-gradient(90deg, rgba(4,9,22,.35) 0%, rgba(4,9,22,0) 30%, rgba(4,9,22,0) 70%, rgba(4,9,22,.35) 100%); } .stats-panel-inner{position:relative;z-index:1} .stats-hero{text-align:center;margin-bottom:52px} .stats-hero .big{font-family:"Space Grotesk",sans-serif;font-size:clamp(30px,4.6vw,50px);font-weight:700;color:#fff} .stats-hero .big em{font-style:normal;color:#6EB2FF} .stats-hero p{color:rgba(255,255,255,.76);font-size:17px;margin-top:10px} .stats-panel .eyebrow{background:rgba(255,255,255,.12);color:#d7e9ff;border:1px solid rgba(255,255,255,.22)} .stats-panel .eyebrow .dotg{background:#6EB2FF;box-shadow:0 0 0 4px rgba(110,178,255,.25)} .stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px} .stat{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:26px 18px;text-align:center;transition:transform .22s,box-shadow .22s,border-color .22s; } .stat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#cfe1ff} .stat .ic{width:48px;height:48px;margin:0 auto 14px;display:grid;place-items:center} .stat .ic img{width:44px;height:44px;object-fit:contain} .stat .n{font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:700;color:var(--accent-deep);letter-spacing:-.02em} .stat .l{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.35} .stats-panel .stat{ background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 8px 26px -12px rgba(0,0,0,.45); } .stats-panel .stat:hover{border-color:rgba(255,255,255,.38);box-shadow:0 16px 40px -14px rgba(0,0,0,.55)} .stats-panel .stat .ic{background:rgba(255,255,255,.10);border-radius:12px} .stats-panel .stat .n{color:#fff} .stats-panel .stat .l{color:rgba(255,255,255,.72)} /* ========================================================= FAQ ========================================================= */ .faq-wrap{max-width:820px;margin:0 auto;display:grid;gap:12px} .q{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s} .q[open]{border-color:#bcd6ff;box-shadow:var(--sh-sm)} .q-head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 22px;cursor:pointer;font-weight:600;font-size:16.5px;color:var(--ink); list-style:none; } .q-head::-webkit-details-marker{display:none} .q-head .plus{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent-deep);display:grid;place-items:center;font-size:20px;line-height:1;transition:transform .25s,background .2s} .q[open] .q-head .plus{transform:rotate(45deg);background:var(--accent);color:#fff} .q-body{padding:0 22px 22px;color:var(--muted);font-size:15.5px;line-height:1.62} /* ========================================================= FINAL CTA Update (Dex, 2026-07-25, full-bleed pass): Nick flagged white side margins on the final-CTA photo panel on index.html. The plain gradient `.final` card (no .photo modifier) is a shared component used as a contained, rounded card on 13 other pages (about.html, pricing.html, channels.html, how-it-works.html, every solutions/features/industries/guides page) - it stays untouched. The `.photo` modifier is only ever used on index.html, so the full-bleed override below is scoped to `.final.photo` specifically: it zeroes the inherited border-radius/padding so the real photo runs edge-to-edge (same "no rounded corners at the viewport edge" precedent as psg-benefits-panel), while .final-inner - already carrying its own responsive horizontal padding - is additionally capped at the site's normal content max-width and centered, so the copy+form grid doesn't stretch full-bleed itself. HTML: .final.photo moved to be a direct child of its
instead of nested inside .container. ========================================================= */ .final{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--accent-deep),#123a8f 55%,#0c1428);border-radius:var(--r-xl);padding:8px} .final.photo{background: linear-gradient(100deg,rgba(8,20,44,.93) 0%,rgba(11,40,110,.78) 42%,rgba(11,40,110,.28) 74%,rgba(11,40,110,.10) 100%), url("assets/img/sme-cta.webp") center right/cover no-repeat} @media(max-width:860px){.final.photo{background: linear-gradient(180deg,rgba(8,20,44,.92),rgba(11,40,110,.90)), url("assets/img/sme-cta.webp") center/cover no-repeat}} .final.photo{border-radius:0;padding:0} .final.photo .final-inner{max-width:var(--maxw);margin:0 auto} .final-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:44px 48px} .final-orb{position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(93,169,255,.45),transparent 68%);top:-180px;right:-100px} .final .fc{position:relative;z-index:1;color:#fff} .final .fc .eyebrow{background:rgba(255,255,255,.14);color:#cfe0ff} .final h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,3.8vw,42px);font-weight:700;color:#fff} .final h2 span{color:#bcd0ff} .final .fc p{color:#c4d2ee;font-size:17px;margin:16px 0 26px;max-width:460px} .final .fc .note{font-size:13.5px;color:#9fb2d8;margin-top:16px} .final .fc .btn-primary{background:#fff;color:var(--accent-deep);box-shadow:0 18px 40px -14px rgba(0,0,0,.4)} .final .fc .btn-primary:hover{background:#eef4ff} .final .fc .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .final .fc .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} .final-card{position:relative;z-index:1;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:26px} .final-card h3{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700} .final-card .fsub{font-size:13.5px;color:var(--muted);margin:5px 0 18px} /* ========================================================= FOOTER ========================================================= */ footer{background:var(--ink);color:#aeb9cf;padding:40px 0 20px} /* 4 tracks (brand, Company, Solutions, Resources) since the Legal column was retired (Nick, 2026-07-25: PDPA link + Legal column removed, links moved to foot-bottom). Resources gets extra width + a wider gap ahead of it so it sits further right in the freed space instead of packed tight against Solutions. */ .foot-grid{display:grid;grid-template-columns:1.8fr .9fr 1fr 1.1fr;gap:34px} .foot-brand .logo{color:#fff} .foot-blurb{font-size:14.5px;line-height:1.6;margin:12px 0 0;max-width:340px;color:#93a0ba} /* team teaser pill - honest, verified counts only (10 human + 20 AI, live on about.html), links through to the real team section (Nick, 2026-07-25: "flex our strength") */ .foot-team{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;padding:8px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--pill);transition:background .15s,border-color .15s} .foot-team:hover{background:rgba(26,126,251,.16);border-color:var(--accent)} .foot-team svg{width:14px;height:14px;flex:0 0 auto;transition:transform .15s} .foot-team:hover svg{transform:translateX(2px)} /* contact row: address/phone/email side-by-side (was a 3-line vertical stack) - wraps to multiple lines only when the viewport can't fit them all. Given a brighter chip treatment (Nick, 2026-07-25: local presence should read as more prominent, it's real and was too easy to miss). Still one horizontal row (Nick, 2026-07-24: "make the footer height much smaller, contact info horizontal") - never regress back to a vertical stack. */ .foot-contact{margin-top:16px;display:flex;flex-wrap:wrap;column-gap:22px;row-gap:8px;font-size:14.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);padding:12px 16px} .foot-contact div{display:flex;gap:8px;align-items:center} .foot-contact svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto} .foot-contact a:hover{color:var(--accent)} footer h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 13px} footer .fcol a{display:block;font-size:14.5px;color:#93a0ba;padding:4px 0;transition:color .15s} footer .fcol a:hover{color:#fff} /* trust strip - the IMDA/PSG claim as plain typography (Nick, 2026-07-25: the government lockup image is a trademark risk as a promo footer badge, removed site-wide - text only, zero government marks), the confirmed pen-test line, and the quiet Freemansland parent credit. One compact row, not one column each, to protect the compact footer height Nick locked in. */ .foot-trust{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09)} .foot-trust-text{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;line-height:1.5;color:#93a0ba;max-width:620px} .foot-trust-item{color:#c7d0e2} .foot-trust-icon{width:15px;height:15px;color:var(--accent);vertical-align:-3px;margin-right:5px} .foot-trust-dot{color:rgba(255,255,255,.28)} /* the confirmed 150+ SME count as a fourth trust item, kept as its own chip (not folded into foot-trust-text's max-width run) so it never gets squeezed and reads as a number stat, not another text claim (Nick, 2026-07-25). */ .foot-trust-stat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#fff;background:rgba(26,126,251,.16);border:1px solid rgba(26,126,251,.36);padding:6px 14px;border-radius:var(--pill);flex:0 0 auto;white-space:nowrap} .foot-trust-stat strong{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14.5px;color:#fff} /* bottom bar: copyright + Privacy Policy/Terms links (moved here from the retired Legal column) on the left, social icons on the right. */ .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;color:#7c88a2} .foot-bottom a{color:#93a0ba;margin:0 2px;transition:color .15s} .foot-bottom a:hover{color:#fff} .foot-bottom .foot-trust-dot{margin:0 6px} /* Required reCAPTCHA v3 disclosure (badge is hidden - see .grecaptcha-badge above). Same scale/colour as the Privacy Policy / Terms line it sits beside, deliberately low-key rather than Google's default floating logo. */ .foot-bottom .rc-disclosure{color:#7c88a2} .foot-bottom .rc-disclosure a{color:#93a0ba} .foot-bottom .rc-disclosure a:hover{color:#fff} .foot-social{display:flex;gap:10px} .foot-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .18s} .foot-social a:hover{background:var(--accent)} .foot-social svg{width:18px;height:18px;color:#cdd6e8} /* ========================================================= GENERIC PAGE HEADER (sub-pages) ========================================================= */ .page-hero{background:linear-gradient(180deg,#fff,#F1F6FF);padding:72px 0 60px;text-align:center;border-bottom:1px solid var(--line-soft)} .page-hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(32px,4.6vw,52px);font-weight:700} .page-hero p{font-size:18px;color:var(--muted);max-width:640px;margin:18px auto 0} .page-hero .crumb{font-size:13px;color:var(--muted);margin-bottom:14px} .page-hero .crumb a{color:var(--accent-deep);font-weight:600} /* value cards (about) */ .val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .val-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;transition:transform .22s,box-shadow .22s} .val-card:hover{transform:translateY(-4px);box-shadow:var(--sh)} .val-card .ic{width:56px;height:56px;border-radius:14px;background:var(--tint);display:grid;place-items:center;margin-bottom:16px} .val-card .ic img{width:34px;height:34px;object-fit:contain} .val-card h3{font-family:"Space Grotesk",sans-serif;font-size:18px;margin-bottom:8px} .val-card p{font-size:14.5px;color:var(--muted);margin:0} /* ========================================================= TEAM (about) - real leadership + BD photo grid, then a dark "newband" style section introducing the 20-person AI workforce. auto-fit/auto-fill grids so both collapse cleanly on mobile without extra breakpoint overrides. ========================================================= */ .team-group{margin-top:8px} .team-group + .team-group{margin-top:40px} .team-group-label{ font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13px; letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep); margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line); } .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px} .team-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:24px 16px;text-align:center;transition:transform .22s,box-shadow .22s,border-color .22s; } .team-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#cfe1ff} .team-photo{width:84px;height:84px;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:var(--tint);border:3px solid var(--tint)} .team-photo img{width:100%;height:100%;object-fit:cover;display:block} .team-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);margin:0} .team-role{font-size:12.5px;color:var(--muted);margin:4px 0 0} .ai-team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;position:relative;z-index:1} .ai-team-card{ background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg); padding:18px 12px;text-align:center;transition:transform .2s,border-color .2s,background .2s; } .ai-team-card:hover{transform:translateY(-3px);border-color:rgba(26,126,251,.5);background:rgba(255,255,255,.075)} .ai-team-photo{width:52px;height:52px;border-radius:50%;overflow:hidden;margin:0 auto 10px;background:rgba(26,126,251,.16)} .ai-team-photo img{width:100%;height:100%;object-fit:cover;display:block} .ai-team-card.lead{border-color:rgba(26,126,251,.55);background:rgba(26,126,251,.09)} .ai-team-card.lead .ai-team-photo{width:64px;height:64px;box-shadow:0 0 0 3px rgba(26,126,251,.5)} .ai-team-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13.5px;color:#fff;margin:0} .ai-team-role{font-size:11px;color:#a9b6cf;margin:3px 0 0;line-height:1.35} .ai-team-note{position:relative;z-index:1;font-size:13.5px;color:#a9b6cf;margin:26px 0 0;text-align:center} .ai-team-note b{color:#fff} @media (max-width:600px){ .team-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px} .team-photo{width:68px;height:68px} .ai-team-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px} .ai-team-photo{width:44px;height:44px} .ai-team-card.lead .ai-team-photo{width:54px;height:54px} } /* pricing page */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} .plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;position:relative;transition:transform .22s,box-shadow .22s} .plan:hover{transform:translateY(-5px);box-shadow:var(--sh)} .plan.pop{border-color:var(--accent);box-shadow:var(--sh-accent)} .plan .badge-top{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:6px 16px;border-radius:var(--pill);letter-spacing:.04em} .plan .pn{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:700} .plan .pp{font-family:"Space Grotesk",sans-serif;font-size:44px;font-weight:700;margin:14px 0 2px;letter-spacing:-.02em} .plan .pp small{font-size:16px;color:var(--muted);font-weight:500} .plan .pyr{font-size:13.5px;color:var(--muted)} .plan .pd{font-size:14.5px;color:var(--ink-2);margin:14px 0 20px;padding-bottom:20px;border-bottom:1px solid var(--line-soft)} .plan ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px} .plan ul li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2)} .plan ul li svg{width:19px;height:19px;color:var(--accent);flex:0 0 auto;margin-top:1px} /* comparison table */ .cmp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:14.5px} .cmp-table th,.cmp-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top} .cmp-table thead th{background:var(--canvas);font-family:"Space Grotesk",sans-serif;font-size:15px} .cmp-table thead th:not(:first-child){text-align:center} .cmp-table td:not(:first-child){text-align:center} .cmp-table .feat b{display:block} .cmp-table .feat span{color:var(--muted);font-size:12.5px;font-weight:400} .cmp-table .yes{color:var(--accent);font-weight:700} .cmp-table .no{color:#c4ccda} .cmp-scroll{overflow-x:auto} /* how it works steps */ .hiw-step{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:36px 0;align-items:start} .hiw-step + .hiw-step{border-top:1px solid var(--line)} .hiw-step .num{font-family:"Space Grotesk",sans-serif;font-size:52px;font-weight:700;color:var(--tint);line-height:1;-webkit-text-stroke:1.5px var(--accent)} .hiw-step h3{font-family:"Space Grotesk",sans-serif;font-size:23px;margin-bottom:10px} .hiw-step p{color:var(--ink-2);font-size:16px;margin:0} /* psg feature icons - frosted glass cards over the benefits photo panel (Dex, 2026-07-24) */ .psg-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .psg-feat .pf{ background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:var(--r-lg); padding:26px;text-align:center;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 8px 26px -12px rgba(0,0,0,.45);transition:transform .22s,box-shadow .22s,border-color .22s; } .psg-feat .pf:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.38);box-shadow:0 16px 40px -14px rgba(0,0,0,.55)} .psg-feat .pf .ic-wrap{width:60px;height:60px;margin:0 auto 14px;border-radius:16px;background:rgba(255,255,255,.12);display:grid;place-items:center} .psg-feat .pf img{width:40px;height:40px;object-fit:contain;margin:0} .psg-feat .pf h3{font-family:"Space Grotesk",sans-serif;font-size:16px;margin-bottom:6px;color:#fff} .psg-feat .pf p{font-size:13.5px;color:rgba(255,255,255,.74);margin:0} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start} .contact-info .ci-item{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line-soft)} .contact-info .ci-item .ic{width:46px;height:46px;border-radius:12px;background:var(--tint);color:var(--accent-deep);display:grid;place-items:center;flex:0 0 auto} .contact-info .ci-item .ic svg{width:22px;height:22px} .contact-info .ci-item b{display:block;font-family:"Space Grotesk",sans-serif;font-size:15px} .contact-info .ci-item span,.contact-info .ci-item a{color:var(--muted);font-size:14.5px} .contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh);padding:34px} .prose{max-width:760px;margin:0 auto} .prose h2{font-family:"Space Grotesk",sans-serif;font-size:26px;margin:34px 0 12px} .prose h3{font-family:"Space Grotesk",sans-serif;font-size:19px;margin:24px 0 8px} .prose p,.prose li{color:var(--ink-2);font-size:16px;line-height:1.7} .prose ul{padding-left:20px} .prose li{margin-bottom:8px} /* ========================================================= IMAGE-OVERLAY BANDS (headline over photo + glass cards) ========================================================= */ .imgband{position:relative;overflow:hidden;background:#0a1020;color:#fff} .imgband > .container{position:relative;z-index:1} .imgband::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none} /* scrim variants - keep white text ≥4.5:1 */ .imgband.scrim-left::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,14,30,.92) 0%,rgba(9,20,44,.72) 46%,rgba(9,20,44,.24) 74%,rgba(9,20,44,.08) 100%);pointer-events:none} .imgband.scrim-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,30,.78),rgba(9,20,44,.86));pointer-events:none} .imgband .eyebrow{background:rgba(26,126,251,.20);color:#bcd8ff;border:1px solid rgba(120,180,255,.30)} .imgband h2{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#fff;font-size:clamp(30px,4.4vw,48px);line-height:1.08;letter-spacing:-.02em} .imgband h2 .grad{background:linear-gradient(100deg,#4d9bff,#8fc6ff);-webkit-background-clip:text;background-clip:text;color:transparent} .imgband p.lead{color:#c9d6ee;font-size:18px;line-height:1.6;margin:16px 0 0;max-width:560px} /* omnichannel band (phone) */ .omni-band{padding:66px 0} .omni-band::before{background-image:url("assets/img/sme-omnichannel.webp")} .omni-inner{max-width:600px} .omni-band .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.32)} .omni-band .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} /* frosted glass card (over any photo) */ .glass{background:rgba(255,255,255,.09);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:22px 24px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)} .glass h3{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:600;color:#fff;margin-bottom:6px} .glass p{color:#c2cfe8;font-size:14px;margin:0} .glass-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px} /* ========================================================= ROADMAP badge + channel photo frames ========================================================= */ .ch-badge-road{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#5a74c0;background:#eef2fe;border:1px solid #d3ddf7;padding:4px 10px;border-radius:var(--pill)} .ch-badge-road .pl{width:6px;height:6px;border-radius:50%;background:#9db0e6} .ch-photo{width:100%;aspect-ratio:3/2;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);position:relative;background:var(--tint-2)} .ch-photo img{width:100%;height:100%;object-fit:cover;display:block} .ch-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(26,126,251,.10),transparent 55%);pointer-events:none} /* each channel's own brand colour bleeds faintly into its photo, not just the generic site accent */ .channel.ch-wa .ch-photo::after{background:linear-gradient(160deg,rgba(37,211,102,.18),transparent 55%)} .channel.ch-fb .ch-photo::after{background:linear-gradient(160deg,rgba(24,119,242,.16),transparent 55%)} .channel.ch-ig .ch-photo::after{background:linear-gradient(160deg,rgba(214,41,118,.14),transparent 55%)} .channel.ch-tg .ch-photo::after{background:linear-gradient(160deg,rgba(38,165,228,.16),transparent 55%)} .ch-photo .chip{position:absolute;left:16px;bottom:16px;z-index:2} .ch-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(10,16,32,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:600;padding:7px 12px;border-radius:var(--pill)} .ch-chip svg{width:16px;height:16px;flex:none} /* who-we-are photo swap */ .who-visual .frame img{width:100%;height:auto;display:block} /* ========================================================= BLOG ========================================================= */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s} .post-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#cfe1ff} .post-card .thumb{aspect-ratio:16/10;overflow:hidden;position:relative;background:linear-gradient(160deg,var(--tint),#fff)} .post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .post-card:hover .thumb img{transform:scale(1.05)} .post-card .pc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .post-card .pc-tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:10px} .post-card h3{font-family:"Space Grotesk",sans-serif;font-size:18px;line-height:1.28;margin-bottom:10px} .post-card p{font-size:14px;color:var(--muted);margin:0 0 16px;flex:1} .post-card .pc-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-top:auto} .post-card .pc-meta .dotm{width:3px;height:3px;border-radius:50%;background:var(--muted)} .post-card .read{color:var(--accent-deep);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px} .post-card .read svg{width:15px;height:15px} /* featured post */ .post-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;margin-bottom:40px;box-shadow:var(--sh-sm)} .post-feat .thumb{min-height:320px;overflow:hidden} .post-feat .thumb img{width:100%;height:100%;object-fit:cover} .post-feat .pf-body{padding:40px 44px;display:flex;flex-direction:column;justify-content:center} .post-feat .pc-tag{color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px} .post-feat h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(24px,3vw,32px);line-height:1.16;margin-bottom:14px} .post-feat p{color:var(--muted);font-size:16px;margin:0 0 22px} /* article page */ .article{max-width:760px;margin:0 auto} .article .art-hero{aspect-ratio:16/8;border-radius:var(--r-xl);overflow:hidden;margin-bottom:34px;border:1px solid var(--line);box-shadow:var(--sh-sm)} .article .art-hero img{width:100%;height:100%;object-fit:cover} .article h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,3.8vw,42px);line-height:1.14;letter-spacing:-.02em;margin-bottom:14px} .article .art-meta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line)} .article .art-meta .pill{background:var(--tint);color:var(--accent-deep);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:var(--pill)} .art-body h2{font-family:"Space Grotesk",sans-serif;font-size:24px;margin:34px 0 12px;letter-spacing:-.01em} .art-body h3{font-family:"Space Grotesk",sans-serif;font-size:19px;margin:26px 0 8px} .art-body h4{font-family:"Space Grotesk",sans-serif;font-size:16.5px;margin:22px 0 6px;color:var(--ink-2)} .art-body p{color:var(--ink-2);font-size:16.5px;line-height:1.75;margin:0 0 16px} .art-body ul,.art-body ol{padding-left:22px;margin:0 0 18px;color:var(--ink-2)} .art-body li{font-size:16.5px;line-height:1.7;margin-bottom:9px} .art-body strong{color:var(--ink);font-weight:600} .art-body a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px} .art-cta{margin-top:44px;padding:34px 36px;border-radius:var(--r-xl);background:linear-gradient(150deg,var(--accent-deep),#123a8f 60%,#0c1428);color:#fff;text-align:center} .art-cta h3{font-family:"Space Grotesk",sans-serif;font-size:24px;color:#fff;margin-bottom:8px} .art-cta p{color:#c4d2ee;font-size:15.5px;margin:0 auto 20px;max-width:440px} .art-cta .btn-primary{background:#fff;color:var(--accent-deep)} .art-cta .btn-primary:hover{background:#eef4ff} .art-faq{margin-top:48px} .art-faq>h2{font-family:"Space Grotesk",sans-serif;font-size:24px;margin:0 0 16px;letter-spacing:-.01em;color:var(--ink)} .art-faq .faq-wrap{max-width:none;margin:0} .art-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--accent-deep);margin-bottom:26px} .art-back svg{width:16px;height:16px} .related-wrap{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)} .related-wrap h3{font-family:"Space Grotesk",sans-serif;font-size:22px;margin-bottom:24px;text-align:center} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1024px){ .glass-row{grid-template-columns:1fr} .blog-grid{grid-template-columns:repeat(2,1fr)} .post-feat{grid-template-columns:1fr} .post-feat .thumb{min-height:220px} .post-feat .pf-body{padding:30px} .hero-grid{grid-template-columns:1fr;gap:44px} .hero-card{max-width:520px} .who-grid{grid-template-columns:1fr;gap:40px} .why-grid{grid-template-columns:repeat(2,1fr)} .new-grid{grid-template-columns:repeat(2,1fr)} .stat-grid{grid-template-columns:repeat(3,1fr)} .final-inner{grid-template-columns:1fr;gap:30px} .val-grid{grid-template-columns:repeat(2,1fr)} .psg-feat{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .nav-links,.nav-cta .login,.nav-cta .btn{display:none} .burger{display:flex} .section{padding:48px 0} .channel{grid-template-columns:1fr;gap:26px} .channel.flip .ch-visual{order:0} .blog-grid{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto} .psg-inner,.psg-inner-2col{grid-template-columns:1fr;text-align:center;justify-items:center} .contact-grid{grid-template-columns:1fr;gap:34px} .article .art-hero{aspect-ratio:16/10} input,select,textarea{font-size:16px !important} .foot-grid{grid-template-columns:repeat(3,1fr);gap:22px} .foot-brand{grid-column:1/-1} } @media (max-width:600px){ .container{padding:0 18px} .why-grid,.new-grid,.stat-grid,.val-grid,.psg-feat,.blog-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:26px} .foot-brand{grid-column:1/-1} .foot-trust{flex-direction:column;align-items:flex-start;gap:12px} .foot-contact{font-size:13.5px;padding:11px 14px} .final-inner{padding:32px 24px} .who-visual .badge{left:0} .supported{flex-wrap:wrap} .hiw-step{grid-template-columns:1fr;gap:10px} .stat .n{font-size:30px} .omni-band{padding:44px 0} .art-body p,.art-body li{font-size:16px} .stats-panel{padding:40px 0 26px} .stats-hero{margin-bottom:32px} } /* app-preview: 2-up panels that must collapse on small screens */ .an-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media (max-width:860px){ .an-2col{grid-template-columns:1fr} } /* ========================================================= PRICING - Monthly/Annual toggle (Dex, 2026-07-24) One global switch drives every card's price + note together. ========================================================= */ .billing-toggle-wrap{display:flex;justify-content:center;margin:0 0 40px} .billing-toggle{ position:relative;display:inline-grid;grid-template-columns:1fr 1fr;gap:2px; background:var(--tint-2);border:1px solid var(--line);border-radius:var(--pill); padding:5px; } .billing-toggle .bt-thumb{ position:absolute;top:5px;left:5px;z-index:0; width:calc(50% - 5px);height:calc(100% - 10px); background:#fff;border-radius:var(--pill);box-shadow:var(--sh-sm); transition:transform .3s var(--ease); } .billing-toggle.is-annual .bt-thumb{transform:translateX(calc(100% + 2px))} .bt-opt{ position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;justify-content:center; border:none;background:transparent;cursor:pointer;font-family:inherit; font-size:14.5px;font-weight:600;color:var(--muted); padding:10px 20px;border-radius:var(--pill);transition:color .2s; } .bt-opt.is-active{color:var(--ink)} .bt-opt .bt-save{ display:inline-flex;align-items:center;font-size:11.5px;font-weight:700; color:#0e8a5f;background:#dcfaee;border:1px solid #a9edd0; padding:2px 8px;border-radius:var(--pill); } .plan .price-note.save{color:#0e8a5f;font-weight:600} @media (max-width:600px){ .billing-toggle{width:100%;max-width:340px} .bt-opt{padding:10px 12px;font-size:13.5px} } /* ========================================================= PRICING - compare-table mobile discoverability (Dex, 2026-07-24) Purely additive wrapper around the existing .cmp-scroll/.cmp-table (that pair is shared with channels.html - untouched here). ========================================================= */ .cmp-wrap{position:relative} .cmp-hint{ display:none;align-items:center;gap:6px; font-size:12.5px;font-weight:700;color:var(--accent-deep); margin:0 0 10px;letter-spacing:.02em;transition:opacity .25s; } .cmp-hint svg{width:14px;height:14px;animation:cmpNudge 1.4s ease-in-out infinite} @keyframes cmpNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} .cmp-fade{ display:none;position:absolute;top:0;right:0;bottom:0;width:46px;z-index:2; background:linear-gradient(90deg,rgba(255,255,255,0),#fff 85%); pointer-events:none;transition:opacity .25s;border-radius:0 var(--r-lg) var(--r-lg) 0; } .cmp-wrap.at-end .cmp-fade{opacity:0} .cmp-wrap.scrolled .cmp-hint{opacity:0} @media (max-width:860px){ .cmp-hint{display:inline-flex} .cmp-fade{display:block} } /* ========================================================= HOW IT WORKS - data-insights dashboard mockup (Dex, 2026-07-24) Same card language as .chatmock, adapted for a chart preview. Clearly labelled illustrative - no invented performance numbers. ========================================================= */ .statmock-wrap{display:flex;justify-content:center;margin:0 0 44px} .statmock{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden} .statmock .top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft);background:var(--tint-2)} .statmock .ava{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:0 0 auto} .statmock .ava svg{width:18px;height:18px} .statmock .nm{font-weight:700;font-size:14px} .statmock .st{font-size:11.5px;color:var(--muted)} .statmock .body{padding:22px 20px 18px} .sm-chart{display:flex;align-items:flex-end;gap:8px;height:96px} .sm-chart i{flex:1;display:block;height:var(--h);min-height:6px;background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-radius:6px 6px 2px 2px} .sm-days{display:flex;gap:8px;margin-top:8px} .sm-days span{flex:1;text-align:center;font-size:11px;color:var(--muted)} .sm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)} .sm-tag{font-size:11.5px;font-weight:600;color:var(--accent-deep);background:var(--tint);border:1px solid #cfe1ff;padding:5px 11px;border-radius:var(--pill)} /* ========================================================= PSG FUNDING PAGE - real-photo overlay treatments (Dex, 2026-07-24) Brings "Benefits of a pre-approved solution" and "Boost productivity with tailored solutions" in line with the who-we-are / USPS stats-panel pattern already shipped on index.html: real hyperrealistic photo + dark scrim + frosted glass content on top. All classes below are new and scoped to psg-funding.html only - .psg-feat/.pf above is likewise page-exclusive (confirmed via repo grep) so it was safe to restyle directly; .why-grid/.why-card/.imgband/.glass are shared with index.html/how-it-works.html and are intentionally left untouched - this page uses its own .psg-glass-grid/.psg-glass-card instead. Update (Dex, 2026-07-24): Nick reviewed live and asked for these two panels full-width - they were sitting inside `.container`, capping width and showing as a contained rounded card on white. Restructured in psg-funding.html so each panel/band is now a direct child of its `.section` (sibling to `.container`, same technique as `.imgband` on index.html/channels.html) so the photo+scrim bleeds edge-to-edge, with its own `.container` wrapping only the inner card grid so that content stays centered/readable at normal reading width. Dropped the outer border-radius/box-shadow/horizontal padding that made sense on a floating card but not on a full-bleed band; vertical padding and all inner card styling/copy unchanged. ========================================================= */ /* Update (Dex, 2026-07-24, gap-vs-seam pass): Nick reviewed the full-bleed restructure live and flagged the transition between these two panels as "weird" - the plain white gap between two consecutive dark photo bands read as an accidental hole, and panel 1's heading sat outside its panel (on white) while panel 2's sat inside its own scrim, an inconsistent pattern. Decision: JOIN, not separate. These two panels now share one wrapper (`.psg-photo-story`, padding:0 - the old `.section` 60px pad on both the outer wrapper of each panel is what created the doubled white gap) so panel 2 begins the instant panel 1 ends: one continuous dark passage, no seam. Both scrims already fade to near-black at their touching edges (94%/80% opacity), so the join reads as one considered dark section, not two competing photos. Heading placement was also unified: panel 1's heading moved from the plain-white `.container` above the panel into the scrim alongside its cards, matching panel 2's (and the site's own established index.html USPs stats-panel) pattern - see the color overrides below this block. Two full-bleed dark moments back-to-back with no distinct divider would have read repetitive; one continuous dark passage carrying two card groups reads intentional. */ .psg-photo-story{padding:0} /* Section 1: "Benefits of a pre-approved solution" - full-bleed photo panel */ .psg-benefits-panel{ position:relative;isolation:isolate;overflow:hidden; padding:60px 0 48px; } .psg-benefits-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .psg-benefits-scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg, rgba(6,12,28,.86) 0%, rgba(6,14,32,.66) 42%, rgba(6,14,32,.78) 70%, rgba(4,9,22,.94) 100%), linear-gradient(90deg, rgba(4,9,22,.32) 0%, rgba(4,9,22,0) 30%, rgba(4,9,22,0) 70%, rgba(4,9,22,.32) 100%); } .psg-benefits-inner{position:relative;z-index:1} .psg-benefits-inner .section-head h2{color:#fff} .psg-benefits-inner .eyebrow{background:rgba(26,126,251,.20);color:#bcd8ff;border:1px solid rgba(120,180,255,.30)} /* Section 2: "Boost productivity with tailored solutions" - full-bleed photo band + frosted cards */ .psg-setup-band{ position:relative;isolation:isolate;overflow:hidden; padding:60px 0; } .psg-setup-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .psg-setup-scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg, rgba(6,12,28,.80) 0%, rgba(6,14,32,.58) 40%, rgba(6,14,32,.74) 72%, rgba(4,9,22,.92) 100%), linear-gradient(100deg, rgba(4,9,22,.30) 0%, rgba(4,9,22,0) 40%, rgba(4,9,22,0) 70%, rgba(4,9,22,.30) 100%); } .psg-setup-inner{position:relative;z-index:1} .psg-setup-inner .section-head h2{color:#fff} .psg-setup-inner .section-head p{color:rgba(255,255,255,.78)} .psg-setup-inner .eyebrow{background:rgba(26,126,251,.20);color:#bcd8ff;border:1px solid rgba(120,180,255,.30)} .psg-glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px} .psg-glass-card{ background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:var(--r-lg); padding:26px 24px;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 8px 26px -12px rgba(0,0,0,.45);transition:transform .22s,box-shadow .22s,border-color .22s; } .psg-glass-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.38);box-shadow:0 16px 40px -14px rgba(0,0,0,.55)} .psg-glass-card .ic{ width:52px;height:52px;border-radius:14px;margin-bottom:16px; background:rgba(255,255,255,.12);display:grid;place-items:center; } .psg-glass-card .ic svg{width:26px;height:26px} .psg-glass-card h3{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:9px} .psg-glass-card p{color:rgba(255,255,255,.80);font-size:14.5px;line-height:1.55;margin:0} @media (max-width:1024px){ .psg-glass-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .psg-benefits-panel{padding:44px 0 36px} .psg-setup-band{padding:44px 0} } @media (max-width:600px){ .psg-glass-grid{grid-template-columns:1fr} .psg-benefits-panel{padding:36px 0 30px} .psg-setup-band{padding:36px 0} }