*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} :root{ --bg:#f0f0ee; --bg2:#e8e8e6; --white:#ffffff; --black:#111112; --g200:#d8d8d4; --g300:#c0c0bc; --g400:#949490; --g500:#70706c; --g600:#4a4a48; --border:#dcdcda; --blue:#32b46f; --violet:#14855a; --grad:linear-gradient(110deg,#32b46f 0%,#14855a 100%); --teal:#32b46f; --rose:#e11d48; --amber:#23a065; --green:#32b46f; --orange:#14855a; /* Vertical rhythm. One scale for the whole site, redefined at the two breakpoints, so every section steps together instead of each carrying its own numbers. */ --sp-section:7rem; --sp-gutter:3.5rem; --rh-eyebrow:1.25rem; /* eyebrow -> heading */ --rh-head:1rem; /* heading -> subline */ --rh-sub:3.5rem; /* subline -> content */ --rh-cta:3rem; /* content -> CTA */ --font:'Montserrat',sans-serif; --font-display:'Montserrat',sans-serif; --font-body:'Inter',sans-serif; } /* overflow-x:hidden turns into a scroll container, which silently disables position:sticky anywhere on the page. overflow-x:clip clips identically WITHOUT creating a scroll container, so sticky keeps working. The hidden declaration stays first as a fallback for browsers that don't support clip. */ body{font-family:var(--font);background:var(--bg);color:var(--black);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased} /* ── EYEBROW LABELS ── */ .eyebrow-text{ display:inline-flex;align-items:center;gap:7px; padding:6px 14px;border:1px solid rgba(50,180,111,.38);border-radius:999px; color:var(--blue);background:rgba(50,180,111,.055); font-size:10.5px;font-weight:800;letter-spacing:.1em;line-height:1.35; } .eyebrow-text::before{ content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto; box-shadow:0 0 0 4px rgba(50,180,111,.08); } /* ── GRID TEXTURE ── */ .grid-bg{ position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(0,0,0,0.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.055) 1px,transparent 1px); background-size:68px 68px; } /* ── NAV ── */ nav{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:1rem 3.5rem; background:rgba(240,240,238,0.9); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--border); } .logo{display:flex;align-items:center;line-height:1;text-decoration:none;flex-shrink:0} .logo img{height:44px;width:auto;display:block} .logo:hover{opacity:.82;transition:opacity .2s} .nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center} @media(max-width:1240px){.nav-links{gap:1.1rem}.nav-links a{font-size:11.5px}} .nav-links a{font-size:12.5px;color:var(--g500);text-decoration:none;font-weight:600;letter-spacing:.01em;transition:color .15s} .nav-links a:hover{color:var(--black)} .nav-btn{border-radius:6px; background:var(--black);color:#fff;border:none; padding:9px 22px; font-family:var(--font);font-size:11.5px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;cursor:pointer; text-decoration:none;transition:opacity .2s; } .nav-btn:hover{opacity:.82} /* ── BUTTONS ── */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font);font-weight:600;font-size:13px; letter-spacing:.06em;text-transform:uppercase; text-decoration:none;cursor:pointer;border:none; transition:all .2s;border-radius:8px; } .btn-black{background:var(--black);color:#fff;padding:15px 30px;border-radius:8px} .btn-black:hover{opacity:.84;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.2)} .btn-ghost{background:var(--white);color:var(--black);padding:14px 29px;border:1.5px solid var(--border);border-radius:8px} .btn-ghost:hover{border-color:var(--g400);transform:translateY(-1px)} .btn-sm{font-size:13px;padding:10px 18px} .btn-outline2{background:transparent;color:var(--black);padding:14px 29px;border:1.5px solid var(--border);border-radius:8px} .btn-outline2:hover{border-color:var(--black);transform:translateY(-1px)} /* ── SECTION BASE ── */ section{padding:var(--sp-section) var(--sp-gutter);border-bottom:1px solid var(--border);position:relative} /* ── Homepage section headings: smaller + slightly bolder ── Scoped to the homepage's 9 section IDs (all verified unique to home-body.php) because the bare .sec-h class is shared by 15 other pages, which must keep their current size. The hero (.hero-h) and final CTA (.cta-h) are deliberately excluded — they keep their existing large display sizes. Responsive overrides mirror this further down. */ #functions .sec-h,#unify .sec-h,#method .sec-h,#solutions .sec-h,#tech .sec-h, #cases .sec-h,#industries .sec-h,#why .sec-h,#dashboards .sec-h{ font-size:clamp(30px,4vw,46px); font-weight:700; } .sec-h{ font-size:clamp(30px,4vw,46px);font-weight:700; letter-spacing:-.02em;line-height:1.15; text-align:center;margin-bottom:var(--rh-head); } .sec-sub{ font-size:17px;color:var(--g500);text-align:center; max-width:560px;margin:0 auto var(--rh-sub);line-height:1.6;font-weight:400; } .sec-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:var(--rh-cta)} /* ── Headings: one solid tone, no per-word emphasis ─────────────────────────── Every heading on this page reads as a single block: no gradient, no faded second half, no coloured word, and no weight or spacing change between spans. The span rules are listed with their real classes rather than relying on !important, because partials/style.php declares .sec-h .fade and friends at two-class specificity; this file is page-scoped and loads after it, so equal specificity wins here and nowhere else on the site. Listing the bare `span` alongside them keeps it true for any heading added later. Black is the default. The four dark sections keep white: #method (#03080c), #tech (#0A1310), #why (#05070a) and #cta (var(--black)) would render a black heading invisible. */ .hero-h,.sec-h,.why-h{color:var(--black)} .hero-h span,.hero-h .grad,.hero-h .grad-os,.hero-h .grad-ai,.hero-h .ghost,.hero-h .solid, .sec-h span,.sec-h .g,.sec-h .fade, .why-h span, .cta-h span,.cta-h .fade,.cta-h .gr,.cta-h .gr2,.cta-h .gr3{ color:inherit; -webkit-text-fill-color:currentColor; background:none;-webkit-background-clip:border-box;background-clip:border-box; font-weight:inherit;font-style:inherit;letter-spacing:inherit; opacity:1;display:inline;padding-right:0; } #method .sec-h,#tech .sec-h,.why-h,.cta-h{color:#fff} /* ── HERO ── */ /* White hero, two columns: copy on the left, live industry dashboard on the right. */ #hero{ min-height:100vh;display:flex;align-items:center;justify-content:center; padding:7rem 3.5rem 4rem;overflow:hidden;border-bottom:1px solid var(--border); position:relative;color:var(--black); background-color:#FFFFFF; /* the artwork below carries its own glow and grid */ } /* Architectural planning grid: two 1px linear-gradient rules on a 36px pitch, laid in a pseudo-element so it can be masked independently of the glow above. The radial mask keeps the lines legible through the middle and dissolves them smoothly before they reach any edge, which is what separates this from a dashboard grid. Sits at z-index 0 behind .hero-grid (z-index 2) and takes no pointer events. */ /* Hero artwork: a band from under the header down past the trust metrics. It replaces the CSS grid that used to live here rather than layering over it, because the image is itself a perspective grid and the two would moire against each other. cover with a top anchor keeps the artwork's own glow at the top of the band; the mask fades it out before the band ends, so there is no hard horizontal edge across the page where it stops. */ #hero::before{ content:'';position:absolute;top:0;left:0;right:0;height:660px;z-index:0;pointer-events:none; background-image:url('/assets/img/hero-bg.webp'); background-size:cover;background-position:center top;background-repeat:no-repeat; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%); } /* ══════════ HERO — star dust + green shooting stars ══════════ The markup for this existed but had NO styles at all, so nothing rendered. Purely decorative: aria-hidden in the markup, pointer-events:none here, and pinned behind .hero-grid (z-index:2) so it can never obstruct the copy or the dashboard. */ .hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} /* faint static starfield, painted with layered radial gradients (no extra DOM nodes) */ .hero-dust{ position:absolute;inset:0; background-image: radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.55),transparent), radial-gradient(1.5px 1.5px at 27% 62%,rgba(160,240,200,.45),transparent), radial-gradient(1px 1px at 41% 28%,rgba(255,255,255,.40),transparent), radial-gradient(1.5px 1.5px at 58% 74%,rgba(255,255,255,.35),transparent), radial-gradient(1px 1px at 68% 22%,rgba(160,240,200,.45),transparent), radial-gradient(1.5px 1.5px at 81% 54%,rgba(255,255,255,.45),transparent), radial-gradient(1px 1px at 91% 32%,rgba(255,255,255,.35),transparent), radial-gradient(1px 1px at 34% 88%,rgba(160,240,200,.35),transparent), radial-gradient(1.5px 1.5px at 74% 90%,rgba(255,255,255,.30),transparent); animation:hero-twinkle 6s ease-in-out infinite; } @keyframes hero-twinkle{0%,100%{opacity:.38}50%{opacity:.72}} /* Shooting star: a small head with a tapering tail drawn as a gradient, travelling on a diagonal. Only transform + opacity animate, so it stays on the compositor. The angle comes from --a: the keyframes own `transform`, so a rotate() set directly on the element would simply be overridden once the animation runs. */ .hero-star{ /* short, thin runner — the long bright streaks were dominating the hero */ position:absolute;width:68px;height:1.5px;border-radius:2px; /* bright head at the 100% end; with the negative rotate that end is the TOP-RIGHT, so the faint trail fades away behind it toward the bottom-left */ background:linear-gradient(90deg,rgba(82,187,132,0) 0%,rgba(82,187,132,.22) 62%,rgba(82,187,132,.8) 92%,rgba(217,247,231,.9) 100%); filter:drop-shadow(0 0 4px rgba(82,187,132,.16)); opacity:0; animation:hero-shoot 16s linear infinite; will-change:transform,opacity; } /* Only THREE run at a time, and every path stays right of 44% — that is where the copy column ends, so a runner can never cross the heading, paragraph, CTAs or stats. They travel through the negative space: the column gap, the strip below the dashboard and the empty area above it. */ .hero-star:nth-child(2){--a:-21deg;top:104%;left:46%;animation-duration:15s;animation-delay:0s} .hero-star:nth-child(3){--a:-19deg;top:12%; left:56%;animation-duration:19s;animation-delay:6s; width:56px} .hero-star:nth-child(4){--a:-23deg;top:118%;left:50%;animation-duration:17s;animation-delay:11s;width:76px} /* the remaining four stay in the markup but are switched off, keeping this to a CSS-only change with no edits to the hero HTML */ .hero-star:nth-child(n+5){display:none} /* short, calm arc through the negative space; fades in and out so it never pops */ @keyframes hero-shoot{ 0% {transform:translate3d(0,0,0) rotate(var(--a,-22deg)); opacity:0} 10% {opacity:0} 22% {opacity:.55} 62% {opacity:.55} 82% {opacity:0} 100%{transform:translate3d(42vw,-26vh,0) rotate(var(--a,-22deg)); opacity:0} } @media(max-width:820px){ .hero-star{width:100px !important} .hero-dust{opacity:.4} } /* decorative only — switch it off entirely when reduced motion is requested */ @media(prefers-reduced-motion:reduce){ .hero-star{display:none} .hero-dust{animation:none;opacity:.45} } /* two columns again: copy left, live dashboard right */ .hero-grid{ display:grid;grid-template-columns:minmax(0,1fr); gap:2.75rem;justify-items:center;max-width:1400px;width:100%;margin:0 auto; position:relative;z-index:2; } .hero-left{text-align:center;max-width:860px;width:100%} /* Centred stack: the eyebrow and paragraph are width-constrained, so they need auto side margins to sit centre rather than left. The stat row keeps its own left alignment so each icon and label pair reads exactly as it did before. */ #hero .hero-eyebrow{margin-left:auto;margin-right:auto} #hero .hero-p{margin-left:auto;margin-right:auto} #hero .hero-btns{justify-content:center} /* style.php is inlined site wide and also styles .hstat, giving it a border-right. Dropping the declaration from this file only stopped it competing, so the shared rule kept winning. These are scoped to #hero so they beat it on specificity. */ #hero .hero-stats{text-align:left;border-top:none} #hero .hstat{border-right:none;border-bottom:none} .hero-right{display:flex;flex-direction:column;max-width:840px;width:88%;margin-left:auto;margin-right:auto;animation:fu .7s ease .3s both} /* Grid fades toward the hero's outer edges instead of hard-cutting */ .hero-grid-bg{ -webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 42%,#000 35%,transparent 85%); mask-image:radial-gradient(ellipse 68% 62% at 50% 42%,#000 35%,transparent 85%); } /* Animated technical grid — thin green data-flow lines travelling along grid paths, thickening at mid-travel; no dots, no glow, minimal and slow. */ .grid-energy{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .ge-path{position:absolute;opacity:0} .ge-h{width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(50,180,111,.18) 35%,rgba(50,180,111,.65) 50%,rgba(50,180,111,.18) 65%,transparent)} .ge-v{width:1px;height:150px;background:linear-gradient(180deg,transparent,rgba(50,180,111,.18) 35%,rgba(50,180,111,.65) 50%,rgba(50,180,111,.18) 65%,transparent)} .ge-p1{top:9%;left:-150px;animation:geLineX 10s ease-in-out infinite} .ge-p2{top:93%;left:-150px;animation:geLineX 12s ease-in-out infinite 3s} .ge-p3{left:3%;top:-150px;animation:geLineY 11s ease-in-out infinite 1.5s} .ge-p4{left:97%;top:-150px;animation:geLineY 13s ease-in-out infinite 5s} @keyframes geLineX{0%{transform:translateX(0) scaleY(1);opacity:0}10%{opacity:1}50%{transform:translateX(calc(50vw + 75px)) scaleY(2.6)}90%{opacity:1}100%{transform:translateX(calc(100vw + 150px)) scaleY(1);opacity:0}} @keyframes geLineY{0%{transform:translateY(0) scaleX(1);opacity:0}10%{opacity:1}50%{transform:translateY(calc(50vh + 75px)) scaleX(2.6)}90%{opacity:1}100%{transform:translateY(calc(100vh + 150px)) scaleX(1);opacity:0}} .hero-glow-r{position:absolute;top:-80px;right:-80px;width:540px;height:540px;background:radial-gradient(circle,rgba(50,180,111,.12) 0%,transparent 65%);pointer-events:none;z-index:0} .hero-glow-l{position:absolute;bottom:-60px;left:-60px;width:420px;height:420px;background:radial-gradient(circle,rgba(50,180,111,.08) 0%,transparent 65%);pointer-events:none;z-index:0} /* Eyebrow — soft green glassmorphism pill */ .hero-eyebrow{ display:inline-flex;align-items:center;gap:9px; padding:9px 18px 9px 14px;width:fit-content; background:rgba(127,127,127,.10);border:1px solid rgba(127,127,127,.22); border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 1px 3px rgba(0,0,0,.03); margin-bottom:1.75rem;animation:fu .7s ease both; } .hero-eicon{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 0 3px rgba(127,127,127,.18)} .hero-etxt{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:inherit;font-weight:600} /* BIG DISPLAY TYPE */ .hero-h{ font-family:var(--font-display); font-size:clamp(34px,4.2vw,60px); font-weight:700;line-height:1.08;letter-spacing:-.02em; color:var(--black); margin-bottom:1.5rem;animation:fu .7s ease .1s both; } .grad-os{color:var(--violet);font-style:normal;display:inline-block} .grad-ai{color:var(--violet);font-style:normal;display:inline-block} .hero-p{font-family:var(--font-body);font-size:18px;color:var(--g500);max-width:540px;line-height:1.6;font-weight:400;margin-bottom:2.25rem;animation:fu .7s ease .2s both} .hero-btns{display:flex;gap:14px;flex-wrap:wrap;animation:fu .7s ease .3s both;margin-bottom:2.75rem} .hero-btns .btn{font-family:var(--font-body);font-weight:600;padding:15px 30px;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease} .hero-btns .btn-primary{background:var(--blue);color:#fff;border-radius:6px} .hero-btns .btn-primary:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 10px 24px rgba(50,180,111,.35)} .hero-btns .btn-ghost{transform:translateY(0)} .hero-btns .btn-ghost:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)} /* Group-centred, not four equal cells. flex:1 gave every metric a quarter of the row and left-aligned its content inside that quarter, so the visible mass sat left of centre while the row itself was full width. Sizing each to its content and centring the group fixes it, and a single gap replaces the padding-right/last-child pair so the spacing between metrics is equal by construction. */ /* max-width and margin-top are reset explicitly: partials/style.php caps this row at 700px and adds margin-top:4rem, and since that margin collapses with the buttons' margin-bottom the gap above was 64px rather than the 44px intended. */ .hero-stats{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2.5rem;width:100%;max-width:none;margin-top:0;padding-top:0;animation:fu .7s ease .4s both} .hstat{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0} /* shared rule adds 1.5rem each side */ /* "Core functions" wrapped to two lines while its neighbours stayed on one, which made the first metric taller than the rest and threw the row off its baseline. */ .hstat-l{white-space:nowrap} .hstat-ico{width:50px;height:50px;border-radius:12px;background:rgba(50,180,111,.1);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0} .hstat-n{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1} .hstat-n.gr{color:inherit} /* the sibling stats are unstyled, so this one matched them in green only */ .hstat-l{font-family:var(--font-body);font-size:13.5px;color:var(--g500);margin-top:2px;font-weight:500} /* The hero is light, so it uses the base component colours. Only the stacking order and the dark-only decoration need a hero-scoped rule. */ #hero .hero-grid{z-index:2} /* Starfield, shooting stars, ambient glows and the technical grid were drawn for the near-black hero and have no place on white. Hidden rather than deleted, so the markup and their animations are left untouched. */ #hero .hero-stars, #hero .grid-bg, #hero .hero-glow-r, #hero .hero-glow-l{display:none} /* Industry tabs — compact selector above the dashboard window */ .ind-tabs{display:flex;flex-wrap:wrap;gap:3px;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:4px;width:100%;margin-bottom:14px} .ind-tab{flex:1 1 auto;white-space:nowrap;font-family:var(--font-body);font-size:11px;font-weight:600;padding:8px 10px;border:none;border-radius:7px;background:transparent;color:var(--g400);cursor:pointer;transition:all .2s ease;white-space:nowrap;text-align:center} .ind-tab:hover:not(.active){background:var(--bg);color:var(--black)} .ind-tab.active{background:var(--black);color:#fff} #tabProgressWrap{height:2px;background:var(--border);margin-bottom:1.25rem;border-radius:2px;overflow:hidden} #tabProgress{height:100%;width:0;background:var(--blue);transition:width .06s linear} /* Dashboard window — one product-preview window, content swapped per industry */ /* ── Hero application preview ────────────────────────────────────────────── A full product screen rather than a compressed card: fixed sidebar, top bar, greeting, four KPI cards, a real plotted chart and an insight strip. Every industry renders through the same template, so the frame never moves between tabs and only the content inside it changes. */ .dash-window{ background:#fff;border:1px solid #e6eaee;border-radius:18px;overflow:hidden; box-shadow:0 24px 60px rgba(16,32,48,.10); transition:opacity .3s ease; } .dash-window.switching{opacity:0} .ap-shell{display:grid;grid-template-columns:182px minmax(0,1fr);background:#fff;text-align:left} /* sidebar */ .ap-side{display:flex;flex-direction:column;background:#fbfcfd;border-right:1px solid #eceff2;padding:13px 10px 11px} .ap-brand{display:flex;align-items:center;gap:8px;padding:0 5px 13px} .ap-brand-mark{width:26px;height:26px;border-radius:8px;background:#eef4ff;color:#3b82f6;display:flex;align-items:center;justify-content:center;flex:none} .ap-brand-svg{width:16px;height:16px} .ap-brand-name{display:block;font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#0f172a;line-height:1.1} .ap-brand-suite{display:block;font-family:var(--font-body);font-size:10px;color:#8a94a4;margin-top:2px} .ap-nav{display:flex;flex-direction:column;gap:4px;flex:1;justify-content:flex-start} .ap-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;font-family:var(--font-body);font-size:12px;font-weight:500;color:#5b6472} .ap-nav-item.is-active{background:#eef4ff;color:#2563eb;font-weight:600} .ap-nav-ico{width:15px;height:15px;flex:none} .ap-side-foot{padding:10px 9px 0;font-family:var(--font-body);font-size:10px;color:#a3abb8} /* top bar */ .ap-main{display:flex;flex-direction:column;min-width:0} .ap-top{display:flex;align-items:center;gap:10px;height:42px;padding:0 13px;border-bottom:1px solid #eceff2;background:#fff;flex:none} .ap-search{flex:1;display:flex;align-items:center;gap:7px;height:27px;padding:0 10px;border:1px solid #e6eaee;border-radius:10px;background:#fbfcfd;font-family:var(--font-body);font-size:13px;color:#98a1af} .ap-search-ico{width:12px;height:12px;flex:none} .ap-top-right{display:flex;align-items:center;gap:13px;flex:none} .ap-bell{position:relative;color:#5b6472;display:flex} .ap-bell-ico{width:14px;height:14px} .ap-bell-dot{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:#ef4444;border:1.5px solid #fff} .ap-user{display:flex;align-items:center;gap:8px;padding-left:13px;border-left:1px solid #eceff2} .ap-avatar{width:23px;height:23px;border-radius:50%;background:#dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:12.5px;font-weight:700;flex:none} .ap-user-name{display:block;font-family:var(--font-body);font-size:11px;font-weight:600;color:#0f172a;line-height:1.2} .ap-user-role{display:block;font-family:var(--font-body);font-size:9.5px;color:#8a94a4} .ap-chev{width:11px;height:11px;color:#98a1af;flex:none} /* content column */ .ap-content{padding:12px 13px 13px;display:flex;flex-direction:column;gap:9px;min-width:0} .ap-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px} .ap-greet{font-family:var(--font-body);font-size:8.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8a94a4;margin-bottom:5px} .ap-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.02em;color:#0f172a;line-height:1.2;margin-bottom:4px} .ap-sub{font-family:var(--font-body);font-size:10px;color:#7c8697;line-height:1.5} .ap-page-meta{display:flex;align-items:center;gap:12px;flex:none} .ap-live{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:#e9f8ef;color:#15803d;font-family:var(--font-body);font-size:10.5px;font-weight:600} .ap-live i{width:7px;height:7px;border-radius:50%;background:#22c55e} .ap-select{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e6eaee;border-radius:8px;background:#fff;font-family:var(--font-body);font-size:10.5px;font-weight:500;color:#475569} .ap-cal{width:11px;height:11px;color:#64748b;flex:none} /* KPI cards */ .ap-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .ap-kpi{border:1px solid #eceff2;border-radius:10px;padding:10px;min-height:84px;display:flex;flex-direction:column} .ap-t-blue{background:#eff5ff} .ap-t-green{background:#eefbf3} .ap-t-peach{background:#fef3ec} .ap-t-yellow{background:#fefaeb} .ap-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px} .ap-kpi-ico{width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;flex:none} .ap-kpi-svg{width:16px;height:16px} .ap-t-blue .ap-kpi-ico{color:#2563eb} .ap-t-green .ap-kpi-ico{color:#16a34a} .ap-t-peach .ap-kpi-ico{color:#ea580c} .ap-t-yellow .ap-kpi-ico{color:#ca8a04} .ap-kpi-label{font-family:var(--font-body);font-size:10.5px;color:#64748b;margin-bottom:4px} .ap-kpi-value{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.025em;color:#0f172a;line-height:1.05;margin-bottom:9px} .ap-kpi-foot{display:flex;align-items:center;gap:7px;margin-top:auto} .ap-delta{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.9);font-family:var(--font-body);font-size:10px;font-weight:600;color:#15803d} .ap-delta-note{font-family:var(--font-body);font-size:10px;color:#8a94a4} /* chart */ .ap-card{border:1px solid #eceff2;border-radius:10px;background:#fff;padding:11px 12px} .ap-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .ap-card-title{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:-.01em;color:#0f172a} .ap-plot{display:flex;gap:10px} .ap-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:112px;font-family:var(--font-body);font-size:9px;color:#98a1af;text-align:right;flex:none;min-width:34px} .ap-grid{position:relative;flex:1;height:112px;display:flex;flex-direction:column;justify-content:space-between;min-width:0} .ap-gridline{display:block;height:1px;background:#f1f4f7} .ap-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2.2%;padding:0 1%} .ap-bar-col{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%} .ap-bar{display:block;width:100%;background:#bfdbfe;border-radius:7px 7px 0 0} .ap-bar.is-peak{background:#3b82f6} .ap-xaxis{display:flex;gap:2.2%;padding:8px 1% 0;margin-left:36px} .ap-xaxis span{flex:1;text-align:center;font-family:var(--font-body);font-size:10px;color:#7c8697} /* AI insight */ .ap-ai{display:flex;align-items:center;gap:10px;min-height:47px;padding:8px 11px;border-radius:10px;background:#f3f1fd;border:1px solid #e9e5fb} .ap-ai-ico{width:25px;height:25px;border-radius:9px;background:#ffffff;color:#7c3aed;display:flex;align-items:center;justify-content:center;flex:none} .ap-ai-svg{width:16px;height:16px} .ap-ai-body{flex:1;min-width:0} .ap-ai-label{font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7c3aed;margin-bottom:5px} .ap-ai-text{font-family:var(--font-body);font-size:10.5px;color:#3f3d56;line-height:1.5} .ap-ai-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;background:#fff;border:1px solid #e2ddf7;font-family:var(--font-body);font-size:11px;font-weight:600;color:#6d28d9;flex:none} .ap-ai-arrow{width:11px;height:11px} @media(max-width:1180px){ .ap-shell{grid-template-columns:1fr;min-height:0} .ap-side{flex-direction:row;align-items:center;gap:18px;border-right:none;border-bottom:1px solid #eceff2;padding:14px 18px;overflow-x:auto} .ap-brand{padding:0;flex:none} .ap-nav{flex-direction:row;gap:4px} .ap-nav-item{padding:8px 11px;white-space:nowrap} .ap-side-foot{display:none} .ap-kpi{min-height:0} } @media(max-width:900px){ .ap-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .ap-page-head{flex-direction:column} .ap-content{padding:20px} .ap-yaxis,.ap-grid{height:210px} } @media(max-width:560px){ .ap-top{height:auto;padding:12px 16px;gap:12px;flex-wrap:wrap} .ap-search{order:2;flex:1 1 100%} .ap-user-txt{display:none} .ap-title{font-size:20px} .ap-kpi-value{font-size:25px} .ap-yaxis,.ap-grid{height:180px} .ap-ai{flex-wrap:wrap} } /* Product frame (legacy, unused by the current hero) */ .hero-product-frame{background:var(--white);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.10)} .hpf-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border)} .hpf-url{display:flex;align-items:center;gap:5px;flex:1;background:var(--white);border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-size:10px;color:var(--g400);font-weight:500;max-width:260px} .hpf-body{display:flex;height:340px} .hpf-sidebar{width:140px;flex-shrink:0;background:var(--black);padding:16px 12px;display:flex;flex-direction:column;gap:0} .hpf-logo-sm{font-size:14px;font-weight:900;letter-spacing:.04em;margin-bottom:20px;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:inherit} .hpf-nav-items{display:flex;flex-direction:column;gap:3px} .hpf-nav{display:flex;align-items:center;gap:7px;font-size:10px;color:rgba(255,255,255,.45);padding:7px 8px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.02em} .hpf-nav.active{background:rgba(50,180,111,.25);color:#fff;border-left:2px solid var(--blue)} .hpf-nav:hover:not(.active){background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)} .hpf-main{flex:1;padding:16px;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;gap:12px} .hpf-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .hpf-kpi{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:10px 12px} .hpf-kv{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:3px} .hpf-kl{font-size:8.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:5px} .hpf-ktag{font-size:8px;font-weight:700;padding:2px 7px;display:inline-block} .hpf-charts-row{display:flex;gap:10px;flex:1;min-height:0} .hpf-chart-box{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:11px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .hpf-chart-head{display:flex;justify-content:space-between;align-items:center} .hpf-chart-title{font-size:10px;font-weight:800;letter-spacing:-.01em} .hpf-chart-sub{font-size:8.5px;color:var(--g400);font-weight:500} @media(prefers-reduced-motion:reduce){ .ge-path{display:none} .dash-window{animation:none;transition:none} .hero-h,.hero-p,.hero-btns,.hero-stats,.hero-eyebrow,.hero-right{animation:none} } /* ── MARQUEE ── */ .mq-wrap{ position:relative;overflow:hidden;isolation:isolate; border-top:1px solid var(--border);border-bottom:1px solid var(--border); background:linear-gradient(90deg,#f7faf8 0%,var(--white) 18%,var(--white) 82%,#f7faf8 100%); } .mq-wrap::before,.mq-wrap::after{ content:"";position:absolute;top:0;bottom:0;width:clamp(36px,7vw,112px);z-index:1;pointer-events:none; } .mq-wrap::before{left:0;background:linear-gradient(90deg,#f7faf8 8%,rgba(247,250,248,0))} .mq-wrap::after{right:0;background:linear-gradient(270deg,#f7faf8 8%,rgba(247,250,248,0))} .mq-track{display:flex;width:max-content;animation:marquee 34s linear infinite;will-change:transform} .mq-wrap:hover .mq-track{animation-play-state:paused} .mq-item{ display:flex;align-items:center;gap:.7rem;min-height:64px;padding:0 clamp(1.6rem,3vw,3.25rem); border-right:1px solid var(--border);white-space:nowrap; } .mq-icon{width:18px;height:18px;color:var(--black);stroke-width:3;flex-shrink:0} .mq-item span{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--g600)} /* ── FUNCTIONS (homepage) — minimal editorial cards, single row. Namespaced "cf-" (Core Functions) — deliberately NOT reusing .fn-* below, which is a separate shared card system still used as-is on the About Us services grid. Desktop: sticky-pinned section — page-scroll drives the row's translateX (JS). The sticky box is sized to its natural content height (no forced 100vh, no extra padding) so the pin duration matches only the actual horizontal overflow — that mismatch was the earlier bug that produced a large dead-space gap. Mobile / prefers-reduced-motion: falls back to plain touch/swipe overflow-x scroll. ── */ /* ══════════════════ HOW WE WORK — dark split layout ══════════════════ Every rule here is scoped under #method on purpose: .fn-grid/.fn-card/.fn-icon/ .fn-num/.fn-name/.fn-desc/.fn-tag are a SHARED card system also used by the About Us services grid, which must keep its original light styling. */ /* Flat dark section. The bolt artwork that filled this background is gone, and the left-to-right scrim went with it: it existed only to hold the copy legible over the image, and over a solid colour it just makes the section unevenly dark. */ #method{ /* NOTE: no overflow:hidden here — it would turn this into a clipping context and disable position:sticky on the stage cards. */ color:#fff;position:relative; background-color:#03080c; } #method .mth-head{grid-column:1;grid-row:1} /* left column: same content, left-aligned instead of the global centred treatment */ #method .eyebrow{justify-content:flex-start} #method .sec-h{text-align:left;color:#fff;margin-bottom:1.1rem} #method .sec-sub{text-align:left;margin:0 0 2.5rem;color:rgba(255,255,255,.62);max-width:620px} /* faint ambient wash. It used to brighten as the sticky deck advanced; with the deck gone nothing sets data-stage, so it is simply static now. */ #method::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(58% 55% at 78% 50%,rgba(50,180,111,.38) 0%,transparent 70%); opacity:.16; } /* 2x2 grid. Replaces the scroll-driven sticky deck: four equal cards, read at a glance, no per-frame JS. grid-auto-rows:1fr keeps both rows the same height regardless of how much copy each card carries, so the four read as one block. */ #method .fn-grid{ display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr; grid-column:1;grid-row:2; gap:18px;max-width:940px; background:transparent;border:none;border-radius:0;overflow:visible;padding-bottom:0; } #method .fn-card{ position:static;overflow:visible; background:#080E12; border:1px solid rgba(255,255,255,.07); border-radius:16px;padding:1.9rem 1.75rem; box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; transition:background .25s ease,border-color .25s ease; } #method .fn-card:hover{background:#0B1319;border-color:rgba(50,180,111,.30)} /* White glyph in a small bordered tile. The border is a touch lighter than the card's own so the tile reads as sitting on the card rather than as a second card; the fill is barely there for the same reason. margin-bottom is unchanged, so the gap between the icon and the title is exactly what it was - the card grows only by the tile itself. */ #method .fn-icon{ width:46px;height:46px;flex:none;margin-bottom:1.15rem; display:flex;align-items:center;justify-content:center; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.14); box-shadow:none; color:#fff; } #method .fn-icon svg{width:26px;height:26px;display:block} /* up from 22px; the 46px tile is unchanged */ #method .fn-name{color:#fff;font-size:19px;margin-bottom:.5rem} #method .fn-desc{color:rgba(255,255,255,.55);font-size:14.5px;margin-bottom:1.15rem} #method .fn-tags{margin-bottom:0} #method .fn-tag{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:rgba(255,255,255,.5)} /* ── Right panel ────────────────────────────────────────────────────────────── Two rows, two columns. The heading block owns row 1 across the left column only; the card grid and the panel share row 2. Sharing a row is what aligns them exactly: the row is sized by the taller of the two and both stretch into it, so the height is never hardcoded and cannot drift when the copy changes. */ #method .mth-wrap{ position:relative;z-index:3; display:grid; grid-template-columns:minmax(0,1fr) 34%; grid-template-rows:auto auto; column-gap:3rem; } #method .mth-panel{ grid-column:2;grid-row:2;min-width:0; background:#fff;border-radius:24px; padding:2.25rem 2rem 2.5rem; display:flex;flex-direction:column;align-items:center; text-align:center; } /* Reference sets this flush left, plain black, no underline and no full stop. */ #method .mth-panel-h{ font-family:var(--font-display); font-size:clamp(19px,2.08vw,30px);font-weight:700;letter-spacing:-.022em;line-height:1.26; color:#0F0F0F;margin:0;width:100%;text-align:left; } /* Sits between heading and button and absorbs the leftover height, so the button stays pinned to the foot whatever height the card grid gives this panel. */ #method .mth-stack{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; width:100%;padding:1.5rem 0; /* Chip widths are percentages of this box, so it has to be capped. Below 900px the panel spans the full page width, and an uncapped stack stretched the chips into thin bars: same percentages over far more width, fonts already at their floor. */ max-width:400px;margin-left:auto;margin-right:auto; } /* Chips are sized by percentage width rather than by their text, which is what gives the reference its stepped silhouette: Measure widest, Understand and Scale matched and narrowest. Hugging the text instead would make width depend on word length. */ #method .mth-chip{ display:block;width:100%;box-sizing:border-box; background:linear-gradient(135deg,#5E5E5E 0%,#3B3B3B 100%); color:#fff; font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.2; /* line-height plus padding has to clear the ascender of the display face; too tight and the glyphs render outside their own chip background. */ border-radius:12px;padding:.26em .5em; box-shadow:0 12px 26px rgba(0,0,0,.26); white-space:nowrap;text-align:center; } /* Each chip overlaps the one above it, so z-index climbs downward. Negative margins are in em so the overlap scales with the chip rather than drifting at small widths. Loosened from -.20em: the words still overlap, but each one clears the shadow of the one above it instead of being tucked under it. */ #method .mth-chip-1{width:56%;font-size:clamp(17px,1.87vw,27px);transform:rotate(-3deg);z-index:1} #method .mth-chip-2{width:83%;font-size:clamp(27px,3.05vw,44px);transform:rotate(1.8deg);margin-top:-.05em;z-index:2} #method .mth-chip-3{width:75%;font-size:clamp(21px,2.36vw,34px);transform:rotate(-1.8deg);margin-top:-.05em;z-index:3} #method .mth-chip-4{width:56%;font-size:clamp(19px,2.15vw,31px);transform:rotate(2.6deg);margin-top:-.05em;z-index:4} /* Wide button, as in the reference. #0B8043 rather than the brand #32B46F: white on the brand green is 2.3:1, and on the reference's lighter green 3.0:1, both under the 4.5:1 this bold label needs. This shade clears it at 5.0:1. */ #method .mth-cta{ width:72%;max-width:270px;justify-content:center; background:#0B8043;color:#fff;border:1px solid #0B8043; border-radius:9px;padding:.85rem 1rem; font-family:var(--font-body);font-size:16px;font-weight:700; text-transform:none;letter-spacing:-.005em; transition:background .2s ease,border-color .2s ease; } #method .mth-cta:hover{background:#096B38;border-color:#096B38} @media(max-width:900px){ #method .mth-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto} #method .mth-head{grid-column:1;grid-row:1} #method .fn-grid{grid-column:1;grid-row:2} #method .mth-panel{grid-column:1;grid-row:3;width:100%;margin-top:2rem;padding:2.25rem 1.75rem} /* Chip width is a percentage of the stack while font-size is a clamp on vw, so the two decouple once the panel goes full width and the fonts hit their floor: same widths, smaller text, chips flatten into bars. Pin both here so the reference proportion holds. Measure stays ~7.2:1, as it is in the reference at 275x66. */ #method .mth-stack{padding:1.75rem 0;max-width:340px} #method .mth-chip-1{font-size:24px} #method .mth-chip-2{font-size:39px} #method .mth-chip-3{font-size:31px} #method .mth-chip-4{font-size:29px} } /* The duplicated "01 — AUDIT" labels were removed from these four cards, so retune the vertical rhythm for the icon → title → description → tags stack. The shared .fn-tags rule carries margin-bottom:1.1rem to clear an "Explore module" link that doesn't exist in this section — zero it out so the cards don't end on a dead gap. .fn-desc keeps its inherited flex:1, which pins the tag row to the card foot so all four align on the same baseline regardless of description length. */ /* premium dark CTA with green hover glow */ /* one column below 900: two cards side by side get too cramped to read */ @media(max-width:900px){ #method .fn-grid{grid-template-columns:1fr;grid-auto-rows:auto;max-width:none} } @media(max-width:560px){ #method .fn-grid{gap:14px} #method .fn-card{padding:1.5rem} } #functions{background:var(--white)} /* The cards read as this heading's content, so they sit closer than the standard subheading-to-content step used between unrelated blocks. */ #functions .sec-sub{margin-bottom:2rem} .cf-scroll-outer{position:relative;width:100%} /* Pinned to the middle of the viewport rather than just under the nav: the sticky box spans the full screen height and centres the row and its CTA inside it, so the cards sit at eye level for the whole horizontal run. */ /* 78vh rather than 100vh. The row is centred inside this box, so a full-viewport box left (100vh - content)/2 of dead space above the cards - 208px on an 855px viewport, which is most of the gap under the subheading. Shortening the box shrinks that padding while keeping the pinned block near the middle of the screen. The runway is derived from sticky.offsetHeight in JS, so the scroll distance follows automatically. min-height keeps the 436px of content from being clipped on short viewports, and max-height caps the dead space on tall ones, where 78vh would otherwise grow it back. */ /* One source of truth for the pinned height, because the sticky offset below is derived from it and the two must not drift apart. */ .cf-scroll-outer{--cf-pin-h:clamp(480px,78vh,620px)} /* top centres the pinned box in the viewport instead of pinning it flush to the top. At top:0 a 620px box in an 855px viewport parked the cards at y 92-528 with 327px of empty screen beneath them. This changes only where the box sticks, never where it sits in normal flow, so the spacing under the heading is untouched. JS reads the same offset back off the element, so the horizontal progress stays in step with it. */ .cf-scroll-sticky{position:sticky;top:calc((100vh - var(--cf-pin-h)) / 2);height:var(--cf-pin-h);width:100%;display:flex;flex-direction:column;justify-content:center;overflow:hidden} /* The CTA is pinned inside the sticky box alongside the row, so it can no longer scroll into view while the horizontal run is still in progress - which is what left a growing gap of unconsumed scroll distance between the cards and the buttons. */ .cf-scroll-sticky .sec-cta{margin-top:2.25rem;flex:none} .cf-row{ display:flex;gap:20px;width:max-content;flex:none; overflow-x:hidden; /* Roomy enough for the cards' 20px-blur shadow to fall inside the row, since .cf-scroll-sticky clips with overflow:hidden. Negative margins cancel the extra padding so the section keeps its original spacing. */ padding:16px 16px 28px;margin:-16px -16px -14px; scrollbar-width:none;-ms-overflow-style:none; will-change:transform; } .cf-row::-webkit-scrollbar{display:none} .cf-card{ flex:0 0 320px;width:320px;min-height:300px;scroll-snap-align:start; background:#FFFFFF;border:1px solid #F0F0F0;border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.06); padding:26px;display:flex;flex-direction:column; } .cf-icon{width:28px;height:28px;color:#111111;flex-shrink:0;margin-bottom:16px} .cf-icon svg{width:100%;height:100%} .cf-name{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:#111111;margin-bottom:.6rem} .cf-desc{font-family:var(--font-body);font-size:16px;font-weight:400;color:#777777;line-height:1.58;margin-bottom:1.1rem} .cf-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1.2rem;margin-top:auto} .cf-tag{font-family:var(--font-body);font-size:11px;border:1px solid #E3E3E1;border-radius:8px;padding:3px 7px;color:#8a8a86;background:#fff;text-transform:uppercase;letter-spacing:.05em;font-weight:600} .cf-arrow{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:5px;border:none;background:none;cursor:pointer;padding:0;transition:gap .2s} .cf-arrow:hover{gap:9px} @media(max-width:768px),(prefers-reduced-motion:reduce){ .cf-scroll-outer{height:auto !important} .cf-scroll-sticky{position:static;height:auto;overflow:visible} .cf-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;transform:none !important} } /* ── Shared card system (About Us services grid) ── */ .fn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:0} .fn-card{background:var(--white);padding:1.85rem;display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:default;transition:background .2s;border-radius:12px} .fn-card:hover{background:#fafafa} .fn-card:hover .fn-arrow{opacity:1;transform:translateX(0)} .fn-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.10)} .fn-icon svg{width:26px;height:26px} .fn-num{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem} .fn-name{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:.45rem} .fn-desc{font-size:15px;color:var(--g500);line-height:1.6;flex:1;font-weight:400;margin-bottom:1.1rem} .fn-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:1.1rem} .fn-tag{font-size:11px;border:1px solid var(--border);border-radius:8px;padding:2.5px 6px;color:var(--g400);background:var(--bg);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .fn-arrow{opacity:0;transform:translateX(-4px);transition:all .2s;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:5px;font-family:var(--font);border:none;background:none;cursor:pointer;padding:0} /* ── SOLUTIONS (2-COL) ── */ .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1.5px solid var(--border);border-radius:12px;overflow:hidden} .sol-card{background:var(--white);padding:2.3rem 1.9rem;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .2s} .sol-card:hover{background:#fafafa} .sol-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.15rem;flex-shrink:0;background:#1c9558;box-shadow:0 4px 12px rgba(0,0,0,.10)} .sol-label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:.45rem} .sol-name{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:.5rem} .sol-tag{font-size:16px;font-weight:400;color:var(--g600);line-height:1.55;margin-bottom:.8rem} .sol-desc{font-size:16px;color:var(--g500);line-height:1.6;font-weight:400;margin-bottom:1.5rem} .sol-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.6rem;flex:1} .sol-list li{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--g600);font-weight:500;line-height:1.5} .sol-check{width:16px;height:16px;border-radius:50%;background:rgba(50,180,111,.14);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px} .sol-metrics{display:flex;gap:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);margin-bottom:1.5rem} .sol-metric-v{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--blue);line-height:1} .sol-metric-l{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--g400);font-weight:600;margin-top:5px} .sol-arrow{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--blue);display:inline-flex;align-items:center;gap:6px;transition:gap .2s;font-family:var(--font);border:none;background:none;cursor:pointer;padding:0} .sol-card:hover .sol-arrow{gap:11px} @media(max-width:1024px){.sol-grid{grid-template-columns:1fr}} @media(max-width:960px){.sol-card{padding:2.1rem 1.6rem}} /* ══════════════ SOLUTIONS — 3-card stacked deck (homepage only) ══════════════ Scoped to #solutions on purpose: .sol-list and .sol-check are SHARED with the /home-2 and /marketing-solutions pages, which must keep their original styling. #solutions exists only on the homepage, so nothing here can leak. */ /* centered single-column track — never full-width, never a grid */ #solutions .sol-grid{ display:flex;flex-direction:column;gap:34px; max-width:1320px;margin-inline:auto; background:transparent;border:none;border-radius:0; overflow:visible; /* any clipping here would kill sticky */ padding-bottom:8vh; /* lets card 03 hold its stuck position briefly */ } /* internal card layout: centred pill on top, then a two-column split — left = title/tagline/description/metrics/CTA, right = the 4 checklist items. Placement is explicit so no markup reordering is needed. */ #solutions .sol-card{ position:sticky; /* real sticky stack, not simulated overlap */ background:var(--white); border:1px solid #DFE3E0;border-radius:32px; padding:2.7rem 3.25rem 3rem; overflow:visible; box-shadow:0 -2px 16px rgba(0,0,0,.03),0 18px 44px rgba(0,0,0,.08); transition:box-shadow .35s ease,border-color .35s ease; /* opacity/scale are driven per-frame from scroll position in JS, so they are deliberately NOT transitioned here — a transition would lag behind the scroll. Shrinking from the top edge keeps the card's visible sliver steady as it recedes. */ transform-origin:top center; will-change:opacity,transform; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); grid-template-rows:auto auto auto auto auto; column-gap:4.5rem; align-content:start; } #solutions .sol-head{grid-column:1/-1;justify-self:center;margin-bottom:1.85rem} #solutions .sol-name {grid-column:1;grid-row:2} #solutions .sol-tag {grid-column:1;grid-row:3} #solutions .sol-desc {grid-column:1;grid-row:4} #solutions .sol-metrics{grid-column:1;grid-row:5} #solutions .sol-arrow {grid-column:1;grid-row:6} #solutions .sol-list {grid-column:2;grid-row:2/-1} /* pill badge: icon + label, centred at the top of the card */ #solutions .sol-head{ display:inline-flex;align-items:center;gap:10px; background:rgba(50,180,111,.09); border:1px solid rgba(50,180,111,.18); border-radius:999px;padding:9px 20px 9px 16px; } /* same icon artwork, restyled from a filled green tile to a green line mark on the pill. The SVGs paint in white for the old dark tile, so recolour those fills/strokes. */ #solutions .sol-icon{ width:22px;height:22px;min-width:22px;border-radius:0;margin:0; background:none;box-shadow:none; } #solutions .sol-icon svg{width:22px;height:22px} #solutions .sol-icon svg [fill="white"]{fill:var(--blue)} #solutions .sol-icon svg [fill^="rgba(255,255,255"]{fill:rgba(50,180,111,.45)} #solutions .sol-icon svg [stroke^="rgba(255,255,255"]{stroke:rgba(50,180,111,.5)} #solutions .sol-label{ font-size:15px;font-weight:700;letter-spacing:-.01em;text-transform:none; color:var(--blue);margin:0;white-space:nowrap; } /* left column */ #solutions .sol-name{font-size:clamp(30px,3vw,42px);line-height:1.1;letter-spacing:-.03em;margin-bottom:1rem} #solutions .sol-tag{font-size:17px;font-weight:650;color:var(--blue);line-height:1.45;margin-bottom:1.25rem} #solutions .sol-desc{font-size:15.5px;line-height:1.7;color:var(--g500);margin-bottom:1.9rem} /* metrics: no top rule — just the two figures split by a vertical divider */ #solutions .sol-metrics{border-top:none;padding-top:0;gap:0;margin-bottom:1.8rem;align-items:center} #solutions .sol-metrics>div{padding-right:2rem} #solutions .sol-metrics>div+div{padding-right:0;padding-left:2rem;border-left:1px solid var(--border)} #solutions .sol-metric-v{font-size:34px;letter-spacing:-.03em} #solutions .sol-metric-l{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--g500);font-weight:500;margin-top:6px} /* CTA becomes a solid green pill button */ #solutions .sol-arrow{ justify-self:start;text-transform:none;letter-spacing:-.01em; font-size:13px;font-weight:600;color:#fff; background:#1c9558; padding:14px 26px;border-radius:12px; box-shadow:0 10px 24px rgba(50,180,111,.32); transition:box-shadow .25s ease,transform .25s ease,gap .2s ease; } #solutions .sol-card:hover .sol-arrow{gap:10px} #solutions .sol-arrow:hover{box-shadow:0 14px 30px rgba(50,180,111,.42);transform:translateY(-2px)} /* right column: each checklist item is its own small card */ #solutions .sol-list{display:flex;flex-direction:column;gap:12px;margin:0;align-self:stretch} #solutions .sol-list li{ background:rgba(255,255,255,.88);border:1px solid #E5E9E6;border-radius:20px; min-height:88px;padding:17px 24px;gap:18px;align-items:center;flex:1; color:var(--black);line-height:1.45; box-shadow:0 6px 18px rgba(12,28,20,.035); } #solutions .sol-check{ width:50px;height:50px;min-width:50px;margin-top:0; background:#f0f3f1;border:none;color:var(--black); } #solutions .sol-check svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #solutions .sol-card:nth-child(1) .sol-list li:first-child .sol-check svg{fill:currentColor;stroke:none} #solutions .sol-benefit{display:flex;flex-direction:column;gap:3px;padding-left:24px;border-left:1px solid #E1E5E2} #solutions .sol-benefit strong{font-size:18.5px;line-height:1.2;font-weight:750;letter-spacing:-.02em} #solutions .sol-benefit small{font-size:14.5px;line-height:1.4;color:var(--g500);font-weight:500} /* Staggered sticky offsets (30px apart) are what produce the stack: each card parks 30px lower than the one before, so the previous card's top edge stays visible behind it. top values clear the ~77px fixed nav. z-index brings each card forward in turn. */ #solutions .sol-card:nth-child(1){top:96px;z-index:1} #solutions .sol-card:nth-child(2){top:126px;z-index:2} #solutions .sol-card:nth-child(3){top:156px;z-index:3} /* restrained hover — no transform, which would fight the sticky positioning */ #solutions .sol-card:hover{ border-color:rgba(50,180,111,.45); box-shadow:0 -2px 18px rgba(0,0,0,.03),0 26px 58px rgba(0,0,0,.11),0 0 0 1px rgba(50,180,111,.08); } @media(max-width:900px){ #solutions .sol-grid{max-width:90%} /* collapse the two columns into one stacked flow */ #solutions .sol-card{grid-template-columns:minmax(0,1fr);column-gap:0;padding:2.5rem 2.25rem 2.7rem} #solutions .sol-name,#solutions .sol-tag,#solutions .sol-desc, #solutions .sol-metrics,#solutions .sol-arrow,#solutions .sol-list{grid-column:1} #solutions .sol-name{grid-row:2} #solutions .sol-tag{grid-row:3} #solutions .sol-desc{grid-row:4} #solutions .sol-list{grid-row:5;margin-bottom:1.6rem} #solutions .sol-metrics{grid-row:6} #solutions .sol-arrow{grid-row:7} #solutions .sol-list li{flex:none} } @media(max-width:640px){ #solutions .sol-grid{max-width:none;width:calc(100% - 32px);gap:24px} #solutions .sol-card{padding:1.9rem 1.4rem 2.1rem;border-radius:20px} #solutions .sol-card:nth-child(1){top:88px} #solutions .sol-card:nth-child(2){top:108px} #solutions .sol-card:nth-child(3){top:128px} #solutions .sol-head{margin-bottom:1.8rem} #solutions .sol-list li{padding:14px 16px;gap:12px} #solutions .sol-check{width:44px;height:44px;min-width:44px} #solutions .sol-benefit{padding-left:15px} #solutions .sol-benefit strong{font-size:15px} #solutions .sol-benefit small{font-size:12.5px} #solutions .sol-metric-v{font-size:28px} #solutions .sol-arrow{width:100%;justify-content:center} } @media(prefers-reduced-motion:reduce){ #solutions .sol-card{transition:none} } .fn-cta-card{background:var(--black) !important;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.25rem;padding:2.5rem 2rem} .fn-cta-card:hover{background:#1a1a1c !important} /* ── INDUSTRIES VISUAL GRID ── */ .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ind-card{background:var(--white);border-radius:10px;border:1.5px solid var(--border);overflow:hidden;display:flex;flex-direction:column;transition:all .2s;opacity:0;transform:translateY(50px)} .ind-card.in{opacity:1;transform:translateY(0)} .ind-card:hover{box-shadow:0 6px 28px rgba(0,0,0,.1);border-color:var(--g300)} .ind-card-top{ padding:2rem 1.75rem 1.75rem; position:relative; min-height:140px; display:flex;flex-direction:column;justify-content:flex-end; background:var(--bg) !important; background-image: linear-gradient(rgba(50,180,111,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(50,180,111,0.07) 1px, transparent 1px) !important; background-size:32px 32px !important; border-bottom:1px solid var(--border); } .ind-emoji{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;box-shadow:0 4px 16px rgba(50,180,111,.3)} .ind-card-title{font-size:16px;font-weight:800;color:var(--black);letter-spacing:-.01em;margin-bottom:.3rem} .ind-card-tag{font-size:10px;color:var(--g400);font-weight:600;text-transform:uppercase;letter-spacing:.08em} .ind-card-body{padding:1.5rem 1.75rem;flex:1;display:flex;flex-direction:column;gap:1rem} .ind-problems,.ind-solutions{display:flex;flex-direction:column;gap:6px} .ind-prob-label,.ind-sol-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:3px} .ind-prob-label{color:#14855a} .ind-sol-label{color:#32b46f} .ind-prob,.ind-sol{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;font-weight:400} .ind-prob{color:var(--g600)} .ind-sol{color:var(--g600)} .ind-cta{margin-top:auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--blue);display:flex;align-items:center;gap:5px;padding-top:.75rem;transition:gap .2s;font-family:var(--font);border:none;background:none;cursor:pointer;width:100%;justify-content:flex-start} .ind-cta:hover{gap:9px} @media(max-width:960px){.ind-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.ind-grid{grid-template-columns:1fr}} .ind-card.d2{transition-delay:.1s} .ind-card.d3{transition-delay:.2s} .ind-card{transition:opacity .65s ease, transform .65s ease, box-shadow .2s, transform .2s;} /* ══════════════ INDUSTRIES — sticky card stack (section 8) ══════════════ All six cards share one sticky offset so each pins at the SAME centred spot and the next simply swaps in over it; z-index ascends so later cards come forward. The gap between cards in normal flow is what supplies the scroll distance per reveal. Per-card colour comes from --c1/--c2/--base set inline on each article. */ #industries{background:var(--white);color:var(--black);position:relative} #industries .sec-h{color:var(--black)} #industries .sec-sub{color:var(--g500)} /* .ind-scroll is the tall scroll runway; .ind-viewport pins inside it and holds all six cards absolutely centred on top of each other. JS then reads scroll progress and lays them out as prev-left / active-centre / next-right via translate+scale+opacity. */ .ind-scroll{position:relative;height:560vh} /* Pinned BELOW the 77px fixed nav (not at top:0) — otherwise the cards centre against the full viewport and their top edge slides underneath the header. */ .ind-viewport{ position:sticky;top:77px;height:calc(100vh - 77px); display:flex;align-items:center;justify-content:center; overflow:hidden; /* keeps far-off cards from spilling sideways */ } .ind-scard{ position:absolute;top:50%;left:50%; width:min(400px,84vw); transform:translate(-50%,-50%); /* JS overwrites with the full transform */ border-radius:20px;overflow:hidden; /* Frosted glass over a faint green tint. The cards sit stacked on top of each other, so the translucency and blur actually pick up the card behind, which is what makes it read as glass rather than as a flat wash. */ border:1px solid rgba(50,180,111,.18); background:rgba(238,251,244,.72); backdrop-filter:blur(16px) saturate(1.08); -webkit-backdrop-filter:blur(16px) saturate(1.08); box-shadow:0 24px 60px rgba(16,32,48,.10),inset 0 1px 0 rgba(255,255,255,.7); will-change:transform,opacity; backface-visibility:hidden; } /* min-height fills the card toward the bottom of the pinned viewport. The cap subtracts the 77px nav plus breathing room, so the card can never grow into the header or past the bottom edge. Content centres in whatever extra space is left. */ .ind-scard-inner{ padding:1.9rem 1.6rem 2rem; min-height:min(620px,calc(100vh - 155px)); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; } /* hero visual slot — the app-icon style tile from the reference */ .ind-visual{ width:104px;height:104px;border-radius:24px;margin-bottom:1.3rem; display:flex;align-items:center;justify-content:center;flex-shrink:0; /* Solid Drawlead green tile carrying the industry's own glyph in white. */ background:#1c9558; border:1px solid rgba(28,149,88,.9); box-shadow:0 10px 24px rgba(28,149,88,.22); } .ind-visual svg{width:54px;height:54px;stroke:#fff;fill:none} /* ── Industry marks: green on a soft tint ───────────────────────────────────── The tile was a saturated #1c9558 plate carrying white glyphs. It is a subtle tint now, so the glyphs invert to green to stay readable on it. The recolour is a per-alpha remap rather than a blanket fill. These marks are built from layered shapes at graded opacity - the construction roof is a polygon at .3 sitting over the buildings behind it - so flattening them all to full strength would paint the front shape straight over the composition. Each alpha maps to green at a slightly higher one, which reads bolder while keeping the depth. Scoped to #industries because includes/industries.php also feeds the nav mega-menu and all twenty industry pages, which keep the white-on-green treatment. */ #industries .ind-visual{ background:rgba(50,180,111,.12); border:1px solid rgba(50,180,111,.22); box-shadow:none; } #industries .ind-visual svg{stroke:#1c9558;fill:none} #industries .ind-visual svg [fill="rgba(255,255,255,.9)"] {fill:rgba(28,149,88,1)} #industries .ind-visual svg [fill="rgba(255,255,255,.85)"] {fill:rgba(28,149,88,.95)} #industries .ind-visual svg [fill="rgba(255,255,255,.8)"] {fill:rgba(28,149,88,.92)} #industries .ind-visual svg [fill="rgba(255,255,255,.75)"] {fill:rgba(28,149,88,.88)} #industries .ind-visual svg [fill="rgba(255,255,255,.7)"] {fill:rgba(28,149,88,.82)} #industries .ind-visual svg [fill="rgba(255,255,255,.65)"] {fill:rgba(28,149,88,.76)} #industries .ind-visual svg [fill="rgba(255,255,255,.6)"] {fill:rgba(28,149,88,.70)} #industries .ind-visual svg [fill="rgba(255,255,255,.5)"] {fill:rgba(28,149,88,.58)} #industries .ind-visual svg [fill="rgba(255,255,255,.4)"] {fill:rgba(28,149,88,.46)} #industries .ind-visual svg [fill="rgba(255,255,255,.3)"] {fill:rgba(28,149,88,.34)} #industries .ind-visual svg [fill="rgba(255,255,255,.2)"] {fill:rgba(28,149,88,.24)} #industries .ind-visual svg [fill="rgba(255,255,255,.15)"] {fill:rgba(28,149,88,.18)} #industries .ind-visual svg [stroke="white"] {stroke:rgba(28,149,88,1)} #industries .ind-visual svg [stroke="rgba(255,255,255,.9)"] {stroke:rgba(28,149,88,1)} #industries .ind-visual svg [stroke="rgba(255,255,255,.85)"]{stroke:rgba(28,149,88,.95)} #industries .ind-visual svg [stroke="rgba(255,255,255,.75)"]{stroke:rgba(28,149,88,.88)} #industries .ind-visual svg [stroke="rgba(255,255,255,.7)"] {stroke:rgba(28,149,88,.82)} #industries .ind-visual svg [stroke="rgba(255,255,255,.6)"] {stroke:rgba(28,149,88,.70)} #industries .ind-visual svg [stroke="rgba(20,133,90,.4)"] {stroke:rgba(20,133,90,.55)} .ind-scard-title{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--black);margin-bottom:.3rem} .ind-scard-tag{font-family:var(--font-body);font-size:16px;font-weight:400;color:var(--g500);margin-bottom:1.5rem} .ind-block{width:100%;text-align:left;margin-bottom:1.25rem} .ind-block-label{ display:flex;align-items:center;gap:10px; font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--black);margin-bottom:.6rem; } .ind-rule{width:4px;height:18px;border-radius:2px;flex-shrink:0} .ind-rule-p{background:var(--rose)} /* red marks the problems; grey read as disabled */ .ind-rule-s{background:var(--blue)} .ind-line{ display:flex;align-items:flex-start;gap:10px;padding:4.5px 0 4.5px 13px; font-family:var(--font-body);font-size:13.5px;font-weight:400;line-height:1.5; color:var(--g500); } .ind-line svg{flex-shrink:0;margin-top:3px;opacity:.85;width:13px;height:13px} /* A filled button rather than a text link. #14855a, not the lighter #1c9558 used on the icon tile: white on that is 3.7:1, under the 4.5:1 this label needs, while this shade clears it at 4.6:1. */ .ind-scard-cta{ display:inline-flex;align-items:center;gap:8px;margin-top:.85rem; padding:11px 20px;border-radius:10px; background:#14855a;color:#fff;text-decoration:none; font-family:var(--font-body);font-size:14.5px;font-weight:600; transition:background .2s ease,gap .2s ease; } .ind-scard-cta span{font-size:18px;line-height:1} .ind-scard-cta:hover{background:#0f6f4a;gap:12px} /* the cross marks belong to the problems block, so they follow its red rule */ .ind-block:has(.ind-rule-p) .ind-line svg{color:var(--rose);opacity:1} @media(max-width:700px){ .ind-scard{width:min(340px,88vw);border-radius:22px} .ind-scard-inner{padding:1.4rem 1.2rem 1.5rem} } /* short windows: keep filling the height, but shrink the parts so nothing clips */ @media(max-height:760px){ .ind-scard-inner{min-height:calc(100vh - 145px);padding:1.3rem 1.3rem 1.4rem} .ind-visual{width:76px;height:76px;border-radius:19px;margin-bottom:.8rem} .ind-visual svg{width:40px;height:40px} .ind-scard-title{font-size:21px} .ind-scard-tag{margin-bottom:.9rem;font-size:11.5px} .ind-block{margin-bottom:.85rem} .ind-block-label{font-size:15px;margin-bottom:.45rem} .ind-line{font-size:12px;padding:3px 0 3px 11px} .ind-scard-cta{font-size:13.5px;margin-top:.25rem} } @media(max-height:600px){ .ind-scard-inner{min-height:calc(100vh - 130px);padding:1.1rem 1.1rem 1.2rem} .ind-visual{width:60px;height:60px;border-radius:16px;margin-bottom:.6rem} .ind-visual svg{width:32px;height:32px} .ind-scard-title{font-size:18px} .ind-line{font-size:11px;padding:2px 0 2px 10px} .ind-block{margin-bottom:.65rem} } /* no scroll-driven carousel under reduced motion — plain stacked cards, normal flow */ @media(prefers-reduced-motion:reduce){ .ind-scroll{height:auto} .ind-viewport{position:static;height:auto;display:flex;flex-direction:column;align-items:center;gap:26px;overflow:visible} .ind-scard{position:static;transform:none !important;opacity:1 !important} } /* ── TECH ── */ .tech-icon-new{ width:56px;height:56px;border-radius:14px; display:flex;align-items:center;justify-content:center; margin-bottom:.25rem;flex-shrink:0; box-shadow:0 8px 24px rgba(0,0,0,.3); } /* Dark base. This used to be var(--white) with a full-bleed ::before overlay painting the artwork and its scrim on top; with the overlay gone the white would show straight through under white card text, so the section owns the colour now. #0A1310 is the scrim gradient own opaque end, so the tone is unchanged. */ #tech{background:#0A1310} /* ══════ TECH — static card grid ══════ padding-top is zeroed because .tech-head supplies it; the global section rule still provides the bottom padding, which the pin used to carry. */ #tech{position:relative;padding-top:0} /* Static 3-up grid, six cards in two rows. Was a horizontal scroll-jack: all six in one absolutely-positioned slot, moved per frame from scroll position, with only the active one legible. Now every card is readable at once and no JS runs. The .tech-track and .tech-pin wrappers are gone from the markup along with it. */ .tech-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; width:100%;max-width:1180px;height:auto; background:transparent;border:none;border-radius:0;overflow:visible; margin:0 auto 2.5rem; } #tech .tech-card{position:relative;width:auto;margin:0;transition:background .2s,border-color .2s,transform .2s} /* Centred composition. The card slot is centred with the copy, otherwise a 460px left-anchored slot under centred text reads as a mistake. Centring the slot only shifts its origin; the cards are placed by transform from it, so the horizontal travel is unaffected. */ #tech .sec-h,#tech .sec-sub{text-align:center;margin-left:auto;margin-right:auto} #tech .eyebrow{justify-content:center} #tech .sec-cta{justify-content:center;margin-top:0} /* Copy and diagram sit above the runway in normal flow; only the cards and CTA are pinned. #tech zeroes its own vertical padding because the pin used to supply all of it, so these two blocks carry their own. The artwork is transparent PNG and blends straight onto the section colour with no plate behind it. */ #tech .tech-head{padding:7rem 0 0} #tech .tech-shot{max-width:1180px;margin:0 auto;padding:1rem 0 0} /* matches .tech-grid so their edges line up */ #tech .tech-shot img{display:block;width:100%;height:auto} @media(max-width:900px){ #tech .tech-head{padding:4.5rem 0 0} #tech .tech-shot{padding:.5rem 0 0} } /* #tech-scoped on purpose. A later @media(max-width:960px) block re-asserts two columns on bare .tech-grid, so an unscoped rule here loses on source order even though it matches. The id raises specificity above it. */ @media(max-width:760px){ #tech .tech-grid{grid-template-columns:1fr} } .tech-card{background:#12201a;padding:2.25rem 2rem;display:flex;flex-direction:column;gap:.85rem;transition:all .2s;border-radius:12px;border:1px solid rgba(255,255,255,.08);} .tech-card:hover{background:#1a2e24;border-color:rgba(255,255,255,.18);transform:translateY(-2px)} .tech-icon{width:50px;height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center} .tech-icon svg{width:24px;height:24px} .tech-name{font-size:20px;font-weight:600;letter-spacing:-.015em;color:#fff} .tech-desc{font-size:16px;color:rgba(255,255,255,.45);line-height:1.6;font-weight:400} .tech-tags{display:flex;flex-wrap:wrap;gap:4px} .t-tag{font-size:11px;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:2.5px 6px;color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);text-transform:uppercase;letter-spacing:.06em;font-weight:600} /* ── #tech cards: chrome off, icons in bordered boxes ───────────────────────── The reference has no card surface: each item sits directly on the section background. Removing only the padding would have pushed the copy against the card border, so the background and border go with it. The grid gap grows to carry the separation the card edges used to provide. */ #tech .tech-card{background:none;border:none;border-radius:0;padding:0;box-shadow:none;gap:.7rem} #tech .tech-card:hover{background:none;border-color:transparent;transform:none} #tech .tech-grid{gap:2.75rem 2.5rem} /* Icon box: dark with a hairline border rather than the solid green plate, matching the reference. The glyphs were already filled shapes but drawn at 0.5-0.95 white, which is what made them read soft; they go to full strength and up from 26px to 28px. */ #tech .tech-icon-new{ width:48px;height:48px;border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.15); box-shadow:none;margin-bottom:.35rem; } #tech .tech-icon-new svg{width:28px;height:28px} #tech .tech-icon-new svg [fill^="rgba(255,255,255"]{fill:#fff} #tech .tech-icon-new svg [stroke^="rgba(255,255,255"]{stroke:#fff} /* ── CASES ── */ #cases{background:var(--bg)} /* ══════════ CASE STUDIES — scroll-driven horizontal gallery (homepage only) ══════════ Vertical scroll drives a horizontal transition: the active card sits centred, the outgoing card exits LEFT, the incoming card enters from the RIGHT. Not a stack and not a looping carousel — position is a pure function of scroll progress. overflow-x is CLIPPED (not hidden) so off-screen cards never create a horizontal scrollbar, and without making this a scroll container (which would break sticky). */ #cases{ background:#FFFFFF; background-image:radial-gradient(circle at 50% 42%,rgba(50,180,111,.035),transparent 55%); } /* ══════════ CASE STUDIES — horizontal track driven by vertical scroll ══════════ The tall .cases-scroll runway supplies the scroll distance; .cases-pin sticks inside it so the section holds still while cards travel horizontally. No arrows, no dots, no timers — JS maps scroll progress straight to each card's transform. overflow-x is CLIPPED (not hidden) so off-screen cards never create a horizontal scrollbar, and without making this a scroll container (which would break sticky). */ .cases-scroll{position:relative;height:420vh;overflow-x:hidden;overflow-x:clip} .cases-pin{ position:sticky;top:0;height:100vh; display:flex;align-items:center;justify-content:center; overflow-x:hidden;overflow-x:clip; } .cases-track{position:relative;width:100%;height:420px} /* ── Glassmorphism industry card ── Each card sets --acc / --acc2 / --atm inline, so one rule set serves all three industries. The card body is frosted glass sitting over an industry-tinted atmosphere, with a soft 3D orb above it. */ .case-card{ position:absolute;top:50%;left:50%; width:min(940px,92vw);min-height:360px; transform:translate(-50%,-50%); /* JS overwrites with the full transform */ border-radius:20px;overflow:hidden; display:flex;flex-direction:row;align-items:stretch; /* industry atmosphere sits behind the frosted panel and shows through it */ background: radial-gradient(circle at 50% 18%,var(--atm,rgba(56,185,118,.18)) 0%,transparent 55%), linear-gradient(180deg,#FDFEFD 0%,#F4F7F5 100%); border:1px solid rgba(255,255,255,.55); box-shadow:0 14px 46px rgba(20,40,30,.08),inset 0 1px 0 rgba(255,255,255,.7); /* transform/opacity are set per-frame from scroll position, so they are deliberately NOT transitioned — a transition would lag behind the scroll and feel disconnected */ transition:box-shadow .4s ease,border-color .4s ease; will-change:transform,opacity; } .case-card.is-active{ border-color:rgba(255,255,255,.75); box-shadow:0 18px 54px rgba(20,40,30,.10),0 0 0 1px var(--atm,rgba(56,185,118,.18)),inset 0 1px 0 rgba(255,255,255,.8); } /* ── top industry visual: soft 3D glass orb ── */ /* ── 40% visual panel (right). Order flips it after the content without touching the markup, which still has the visual first. Fills its panel edge to edge. ── */ .case-screen{ order:2;flex:0 0 40%;width:40%; position:relative;overflow:hidden; border:none;padding:0;height:auto; display:flex;align-items:center;justify-content:center; background: radial-gradient(circle at 32% 24%,rgba(255,255,255,.55) 0%,transparent 46%), linear-gradient(150deg,var(--acc2,#9BE3C0) 0%,var(--acc,#38B976) 62%,var(--acc,#38B976) 100%); } /* Photo fill. Absolute rather than a flex child so it covers the panel edge to edge regardless of the centring on .case-screen. Cards with no photo keep the orb. */ .case-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 50%;display:block; } /* soft light bloom inside the panel — reads as depth rather than a flat fill */ .case-orb{ display:block;width:78%;aspect-ratio:1;height:auto;border-radius:50%; background: radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.28) 20%,transparent 46%), radial-gradient(circle at 62% 72%,rgba(255,255,255,.22) 0%,transparent 62%); box-shadow:inset 0 -14px 34px rgba(0,0,0,.07),inset 0 12px 28px rgba(255,255,255,.4); opacity:.95; } /* ── 60% frosted glass content panel (left) ── */ .case-body{ /* margin sits OUTSIDE the flex basis, so it's subtracted here — otherwise 60% + 28px + 40% would overflow the card and break the split */ order:1;flex:0 0 calc(60% - 28px);width:calc(60% - 28px); position:relative;margin:14px;padding:34px; display:flex;flex-direction:column;justify-content:center; background:rgba(255,255,255,.62); /* PERF: no backdrop-filter here. Blurring a live backdrop on an element that transforms every frame is extremely expensive and was the main source of jank. A more opaque panel gives the same frosted look for near-zero cost. */ border:1px solid rgba(255,255,255,.35);border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 18px rgba(20,40,30,.04); } .case-tag{ font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600; padding:6px 13px;border-radius:999px;display:inline-flex;align-self:flex-start; color:var(--acc,#38B976); background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.55); margin-bottom:20px; } .case-title{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:#171717;margin-bottom:14px} .case-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:32px} .case-list li{ font-size:13.5px;color:rgba(64,64,64,.78);padding:6px 0;line-height:1.6;font-weight:400; display:flex;align-items:flex-start;gap:9px; } .case-list li::before{content:'→';font-weight:600;font-size:11px;flex-shrink:0;color:var(--acc,#38B976);margin-top:3px} /* ── glass CTA ── */ #cases .case-card .btn-outline2{ align-self:flex-start; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.55); color:#171717;border-radius:11px; padding:11px 20px;font-weight:600;font-size:11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease,color .25s ease; } #cases .case-card .btn-outline2:hover{ background:rgba(255,255,255,.55); border-color:var(--acc,#38B976);color:var(--acc,#38B976); transform:translateY(-2px); box-shadow:0 8px 22px -6px var(--atm,rgba(56,185,118,.18)),inset 0 1px 0 rgba(255,255,255,.7); } @media(max-width:1000px){ .cases-scroll{height:380vh} .cases-track{height:400px} .case-card{width:min(720px,88vw);min-height:320px} .case-body{padding:28px} } /* below this the 60/40 split gets too cramped — stack it: visual on top, content below */ @media(max-width:680px){ .cases-scroll{height:340vh} .cases-track{height:560px} .case-card{width:calc(100vw - 56px);min-height:0;flex-direction:column} .case-screen{order:1;flex:0 0 168px;width:100%;height:168px} .case-orb{width:132px} .case-img{object-position:50% 38%} .case-body{order:2;flex:1 1 auto;width:auto;margin:12px;padding:24px} .case-title{font-size:18px} } /* reduced motion: no horizontal sweep — plain readable stack in normal flow */ @media(prefers-reduced-motion:reduce){ .cases-scroll{height:auto;overflow:visible} .cases-pin{position:static;height:auto;display:block} .cases-track{height:auto;display:flex;flex-direction:column;gap:22px;align-items:center;padding:1rem 0} .case-card{position:static;transform:none !important;opacity:1 !important;visibility:visible !important} } .cs-bar{display:flex;align-items:center;gap:4px;padding:7px 10px;background:var(--bg);border-bottom:1px solid var(--border)} .cs-dot{width:7px;height:7px;border-radius:50%} .cs-title{margin-left:auto;font-size:8px;font-weight:700;letter-spacing:.06em;color:var(--g400);text-transform:uppercase} .cs-body{padding:10px 12px;display:flex;gap:8px;height:calc(180px - 30px)} .cs-sidebar{width:60px;flex-shrink:0;display:flex;flex-direction:column;gap:4px} .cs-nav-item{height:8px;background:var(--border);border-radius:2px;width:100%} .cs-nav-item.active{background:#32b46f;width:80%} .cs-main{flex:1;display:flex;flex-direction:column;gap:6px;overflow:hidden} .cs-krow{display:flex;gap:4px} .cs-k{flex:1;background:var(--white);border:1px solid var(--border);border-radius:4px;padding:5px;display:flex;flex-direction:column;gap:2px} .cs-kv{font-size:9px;font-weight:800;color:#32b46f;line-height:1} .cs-kl{font-size:6.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.04em;font-weight:600} .cs-chart{display:flex;flex-direction:column;gap:3px;flex:1} .cs-lbl{font-size:6.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.06em;font-weight:700} .cs-bars-row{display:flex;align-items:flex-end;gap:2px;height:36px} .cs-bar-i{flex:1;background:rgba(50,180,111,.15);border-radius:1px 1px 0 0} .cs-bar-hi{background:#32b46f !important} .cs-hbar-r{display:flex;align-items:center;gap:4px;font-size:7px;color:var(--g500)} .cs-hbar-r span:first-child{width:38px;font-weight:600;font-size:6.5px} .cs-track2{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden} .cs-fill2{height:100%;background:#32b46f;border-radius:2px} .cs-list-r{display:flex;flex-direction:column;gap:3px} .cs-list-item{display:flex;align-items:center;gap:4px;font-size:7.5px;color:var(--g500)} .cs-dot2{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:#32b46f} .cs-badge-s{margin-left:auto;font-size:6px;padding:1.5px 4px;border-radius:2px;font-weight:700;background:rgba(50,180,111,.1);color:#32b46f} .cs-funnel{display:flex;flex-direction:column;gap:2px} .cs-fbar2{border-radius:2px;height:14px;display:flex;align-items:center;padding:0 6px;font-size:7px;font-weight:600;color:#32b46f} /* ── INDUSTRIES ── */ #industries{background:var(--white)} /* ── WHY ── */ #why{background:var(--bg)} /* ══════════════ WHY DRAWLEAD — centred editorial layout (section 9) ══════════════ Scoped under #why (homepage-only id). The legacy .why-card/.why-icon/.why-name/ .why-desc rules below are left untouched because the About Us page still uses them. */ #why{background:#05070a;color:#fff;overflow:hidden} .why-h{ font-family:var(--font-display); font-size:clamp(44px,7vw,92px);font-weight:700;letter-spacing:-.035em;line-height:1; /* 700 like every other heading on the page */ text-align:center;color:#fff;margin-bottom:1.6rem; } .why-lead{ font-family:var(--font-body);font-size:clamp(16px,1.7vw,21px);font-weight:400;line-height:1.6; color:rgba(255,255,255,.82);text-align:center;max-width:640px;margin:0 auto 4.5rem; } /* 3 + 2 layout: a 6-column grid where each item spans 2, and the last row is offset by one column so the two items sit centred beneath the three above */ .why-feats{display:grid;grid-template-columns:repeat(6,1fr);gap:2.6rem 2rem;max-width:1020px;margin:0 auto} .why-feat{grid-column:span 2;text-align:center;display:flex;flex-direction:column;align-items:center} .why-feat:nth-child(4){grid-column:2/4} .why-feat:nth-child(5){grid-column:4/6} .why-fico{width:34px;height:34px;color:rgba(255,255,255,.62);margin-bottom:1rem} .why-fico svg{width:100%;height:100%;display:block} .why-fname{font-family:var(--font-body);font-size:20px;font-weight:600;color:#fff;margin-bottom:.6rem} .why-fdesc{font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.65;color:rgba(255,255,255,.5);max-width:280px} @media(max-width:820px){ .why-feats{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.6rem;max-width:600px} .why-feat,.why-feat:nth-child(4),.why-feat:nth-child(5){grid-column:span 1} .why-lead{margin-bottom:3rem} } @media(max-width:520px){ .why-feats{grid-template-columns:1fr;max-width:340px} .why-feat,.why-feat:nth-child(4),.why-feat:nth-child(5){grid-column:span 1} } .why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .why-card{background:#12201a;border-radius:10px;border:1.5px solid rgba(255,255,255,.1);padding:1.85rem;display:flex;flex-direction:column;gap:.7rem;transition:all .2s;overflow:hidden;position:relative} .why-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.4);border-color:rgba(255,255,255,.25)} .why-bar{height:3px;margin:-1.85rem -1.85rem 1rem;border-radius:8px; 0 0} .why-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.12)} .why-icon svg{width:24px;height:24px} .why-name{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:#fff} .why-desc{font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.55;font-weight:400} /* ── DASHBOARDS ── */ #dashboards{background:var(--white)} /* ── DASHBOARD GRID ── */ .dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .dash-card{ background:var(--white); border-radius:10px; border:1.5px solid var(--border); overflow:hidden; transition:opacity .65s ease, transform .65s ease, box-shadow .2s; opacity:0; transform:translateY(64px); } .dash-card:hover{ box-shadow:0 12px 40px rgba(0,0,0,.09); transform:translateY(-2px) !important; } .dash-card.visible{ opacity:1; transform:translateY(0); } .dash-card.visible.d2{transition-delay:.13s} .dash-card.visible.d3{transition-delay:.26s} .dash-card.visible.d1{transition-delay:0s} .dash-top{display:none} .dash-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--border);background:var(--bg)} .dash-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.2)} .dash-ico svg{width:18px;height:18px} .dash-mod-name{font-size:12px;font-weight:800;letter-spacing:-.01em} .dash-body{padding:15px} .d-krow{display:flex;gap:6px;margin-bottom:12px} .d-k{flex:1;background:var(--bg);border-radius:8px;padding:8px 7px;border:1px solid var(--border)} .d-kv{font-size:13px;font-weight:800;line-height:1;margin-bottom:2px} .d-kl{font-size:7.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .d-lbl{font-size:8.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:7px} .d-bars{display:flex;align-items:flex-end;gap:4px;height:54px;margin-bottom:12px} .d-bar{flex:1;background:var(--border);border-radius:7px 7px 0 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden} .d-bar span{font-size:6.5px;color:var(--g400);padding-bottom:2px;font-weight:600} .d-hr{height:1px;background:var(--border);margin:10px 0} .d-rows{display:flex;flex-direction:column;gap:5px} .d-row{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--g500)} .d-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .d-val{margin-left:auto;font-size:10.5px;font-weight:700} .d-hbars{display:flex;flex-direction:column;gap:7px} .d-hbar{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--g500)} .d-hbar span:first-child{width:62px;font-weight:600;font-size:8.5px} .d-track{flex:1;height:4px;background:var(--border);border-radius:8px;overflow:hidden} .d-fill{height:100%;border-radius:8px;} .d-hbar span:last-child{width:20px;text-align:right;font-size:8.5px;font-weight:700} .d-status{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px} .d-sbox{border-radius:6px;padding:8px 5px;text-align:center} .d-sv{font-size:14px;font-weight:800;line-height:1} .d-sl{font-size:7px;color:var(--g400);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-top:2px} .d-funnel{display:flex;flex-direction:column;gap:4px;margin-bottom:12px} .d-fbar{border-radius:8px;height:20px;display:flex;align-items:center;padding:0 9px;font-size:9.5px;font-weight:600} .d-channels{display:flex;flex-direction:column;gap:8px} .d-ch{display:flex;align-items:center;gap:7px} .d-ch-ico{width:20px;height:20px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .d-ch-ico svg{width:11px;height:11px} .d-ch-name{font-size:9px;color:var(--g500);width:55px;font-weight:600} .d-ch-pct{font-size:9px;font-weight:800;width:26px} .d-ch-track{flex:1;height:3.5px;background:var(--border);border-radius:8px;overflow:hidden} .d-ch-fill{height:100%;border-radius:8px;} /* ── #dashboards: full product mock-ups ─────────────────────────────────────── Six cards, each a detailed picture of a real screen: module header with a period control, three tinted KPI tiles carrying a delta line, a labelled main visual, and a dated activity list. Two columns, not three. The KPI tile alone needs ~150px for a label, a 27px value, a delta line and its icon; at three columns the card is ~430px and the tiles collapse. At two the card is ~575px, which is where this layout works. Every rule is scoped to #dashboards on purpose: .dash-* and .d-* are a shared card system used by eleven other templates. Green text on white needs #14855a to clear 4.5:1 — #32b46f is only 2.3:1 and fails, so the brand green is kept for fills and swapped for #14855a wherever it carries a word or a number. */ #dashboards .dash-grid{grid-template-columns:repeat(2,1fr);gap:26px;max-width:1180px;margin:0 auto} #dashboards .dash-card{ background:#fff;border:1px solid #e6eaef;border-radius:16px; box-shadow:0 10px 30px rgba(16,32,48,.06); display:flex;flex-direction:column; } #dashboards .dash-card:hover{box-shadow:0 18px 46px rgba(16,32,48,.10)} /* ── card header ── */ #dashboards .dash-head{ background:#fff;border-bottom:1px solid #eceff2; padding:18px 20px;gap:13px;align-items:center; } #dashboards .dash-ico{ width:46px;height:46px;border-radius:13px;background:#1c9558;box-shadow:none; } #dashboards .dash-ico svg{width:24px;height:24px} #dashboards .dash-titles{min-width:0} #dashboards .dash-mod-name{ font-family:var(--font-display);font-size:19px;font-weight:700; letter-spacing:-.02em;color:#0f172a;line-height:1.2; } #dashboards .dash-mod-sub{ font-family:var(--font-body);font-size:12.5px;color:#64748b; line-height:1.35;margin-top:2px; } #dashboards .dash-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0} #dashboards .dash-sel{ display:inline-flex;align-items:center;gap:6px; border:1px solid #e2e8f0;border-radius:9px;padding:7px 11px; font-family:var(--font-body);font-size:12.5px;font-weight:600;color:#334155; white-space:nowrap; } #dashboards .dash-sel svg{width:13px;height:13px;color:#64748b} #dashboards .dash-kebab{display:inline-flex;color:#94a3b8} #dashboards .dash-kebab svg{width:15px;height:15px} #dashboards .dash-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} /* ── KPI tiles ── */ #dashboards .d-krow{gap:11px;margin-bottom:20px} /* Three-row grid, not a flex row: the delta line ("18% vs last year") has to span the full tile and pass UNDER the icon, or it wraps at ~100px and the tiles go ragged. .d-k-txt is display:contents so its children join this grid. */ #dashboards .d-k{ display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:8px;align-items:start; border:1px solid;border-radius:12px;padding:13px 13px 12px; } #dashboards .d-k-txt{display:contents} #dashboards .d-k-g{background:#eefbf3;border-color:#dcf3e6} #dashboards .d-k-b{background:#eff5ff;border-color:#dfe9fe} #dashboards .d-k-o{background:#fef5ee;border-color:#fbe5d7} #dashboards .d-kl{ grid-column:1;grid-row:1; display:flex;align-items:center;gap:4px; font-family:var(--font-body);font-size:12px;font-weight:500;color:#5a6675; letter-spacing:0;text-transform:none;line-height:1.2;margin-bottom:5px; } #dashboards .d-kl .d-i{width:12px;height:12px;flex:none;color:#8a94a4} #dashboards .d-kv{ grid-column:1;grid-row:2; font-family:var(--font-display);font-size:26px;font-weight:700; letter-spacing:-.03em;color:#0f172a;line-height:1.05;margin-bottom:5px; } #dashboards .d-kd{grid-column:1/-1;grid-row:3;font-family:var(--font-body);font-size:11.5px;color:#5a6675;line-height:1.2} #dashboards .d-kd .d-up{color:#0f7048;font-weight:700} #dashboards .d-kd .d-down{color:#b42318;font-weight:700} #dashboards .d-k-ico{ grid-column:2;grid-row:1/3;align-self:center; width:34px;height:34px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; } #dashboards .d-k-ico svg{width:17px;height:17px} #dashboards .d-k-g .d-k-ico{background:#d3f1e0;color:#14855a} #dashboards .d-k-b .d-k-ico{background:#dbe8fe;color:#2563eb} #dashboards .d-k-o .d-k-ico{background:#fbe0cd;color:#c2410c} /* ── heading inside a card ── */ #dashboards .d-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px} #dashboards .d-sec-t{ font-family:var(--font-display);font-size:16px;font-weight:700; letter-spacing:-.02em;color:#0f172a; } #dashboards .d-sec-a{ display:inline-flex;align-items:center;gap:6px;flex-shrink:0; font-family:var(--font-body);font-size:12.5px;font-weight:600;color:#14855a; } #dashboards .d-sec-a svg{width:13px;height:13px} #dashboards .d-lbl{display:none} /* ── bar chart with a real axis ── */ #dashboards .d-chart{--dch:150px;display:flex;gap:10px;margin-bottom:22px} #dashboards .d-yax{position:relative;height:var(--dch);width:34px;flex:none} #dashboards .d-yax span{ position:absolute;right:0;transform:translateY(-50%); font-family:var(--font-body);font-size:10px;color:#64748b;white-space:nowrap; } #dashboards .d-yax span:nth-child(1){top:0} #dashboards .d-yax span:nth-child(2){top:33.333%} #dashboards .d-yax span:nth-child(3){top:66.666%} #dashboards .d-yax span:nth-child(4){top:100%} #dashboards .d-plotwrap{flex:1;min-width:0} #dashboards .d-plot{position:relative;height:var(--dch);border-left:1px solid #e6eaef} #dashboards .d-grid{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between; } #dashboards .d-grid i{display:block;height:0;border-top:1px dashed #e2e8f0} #dashboards .d-bars{ position:absolute;inset:0;display:flex;align-items:flex-end;gap:0; height:auto;margin:0;padding:0 6px; } #dashboards .d-bar{ flex:1;margin:0 8px;background:#cbd5e1;border-radius:5px 5px 0 0; display:block;overflow:visible; } #dashboards .d-bar-hi{background:#2aa35f} #dashboards .d-xax{display:flex;padding:8px 6px 0 7px} #dashboards .d-xax span{ flex:1;text-align:center; font-family:var(--font-body);font-size:11px;color:#64748b; } /* ── activity rows ── */ #dashboards .d-rows{gap:0} /* carries the closing heading AND its list to the card floor together */ #dashboards .d-sec-push{margin-top:auto} #dashboards .d-row{ display:flex;align-items:center;gap:11px;padding:11px 0; border-top:1px solid #f1f4f7; font-family:var(--font-body);font-size:13px;color:#0f172a; } #dashboards .d-row:first-child{border-top:0;padding-top:2px} #dashboards .d-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#22a35f} #dashboards .d-dot-w{background:#e8a33d} #dashboards .d-row-txt{min-width:0;flex:1} #dashboards .d-row-t{font-size:13.5px;font-weight:600;color:#0f172a;line-height:1.25} #dashboards .d-row-s{font-size:11.5px;color:#64748b;line-height:1.3;margin-top:2px} #dashboards .d-row-v{ font-family:var(--font-display);font-size:13.5px;font-weight:700; color:#14855a;white-space:nowrap;flex:none; } #dashboards .d-row-v-w{color:#8f5410} #dashboards .d-row-d{ font-family:var(--font-body);font-size:11.5px;color:#64748b; white-space:nowrap;flex:none;width:82px;text-align:right; } /* ── funnel ── */ #dashboards .d-funnel{gap:7px;margin-bottom:22px} #dashboards .d-fbar{ height:38px;border-radius:9px;padding:0 14px;gap:10px; background:#e6f7ee;color:#0f172a; font-family:var(--font-body);font-size:13px;font-weight:600; } #dashboards .d-fbar b{font-family:var(--font-display);font-weight:700;margin-left:auto} #dashboards .d-fbar em{font-style:normal;font-size:11.5px;color:#47535f;width:38px;text-align:right} #dashboards .d-fbar-2{background:#cdefdd} #dashboards .d-fbar-3{background:#a8e2c4} #dashboards .d-fbar-4{background:#14855a;color:#fff} #dashboards .d-fbar-4 em{color:rgba(255,255,255,.82)} /* ── task status ── */ #dashboards .d-status{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px} #dashboards .d-sbox{ border-radius:12px;padding:13px 12px 12px;text-align:left; background:#eefbf3;border:1px solid #dcf3e6; } #dashboards .d-sv{ font-family:var(--font-display);font-size:23px;font-weight:700; letter-spacing:-.03em;color:#0f172a;line-height:1; } #dashboards .d-sl{ font-family:var(--font-body);font-size:11.5px;font-weight:500;color:#5a6675; text-transform:none;letter-spacing:0;margin-top:4px; } #dashboards .d-sbar{height:4px;border-radius:4px;background:rgba(15,23,42,.07);margin-top:9px;overflow:hidden} #dashboards .d-sbar i{display:block;height:100%;border-radius:4px;background:#22a35f} #dashboards .d-sbox-2{background:#eff5ff;border-color:#dfe9fe} #dashboards .d-sbox-2 .d-sbar i{background:#2563eb} #dashboards .d-sbox-3{background:#fef5ee;border-color:#fbe5d7} #dashboards .d-sbox-3 .d-sbar i{background:#c2410c} #dashboards .d-sbox-4{background:#fdf0f0;border-color:#f8dcdc} #dashboards .d-sbox-4 .d-sbar i{background:#b42318} /* ── department bars ── */ #dashboards .d-hbars{gap:13px;margin-bottom:22px} #dashboards .d-hbar{gap:12px;font-family:var(--font-body);color:#334155} #dashboards .d-hbar span:first-child{width:96px;font-size:12.5px;font-weight:500;color:#475569} #dashboards .d-hbar span:last-child{ width:28px;text-align:right; font-family:var(--font-display);font-size:13px;font-weight:700;color:#0f172a; } #dashboards .d-track{height:8px;border-radius:8px;background:#eef1f5} #dashboards .d-fill{background:#22a35f} /* ── channels ── */ #dashboards .d-channels{gap:14px;margin-bottom:22px} #dashboards .d-ch{gap:12px} #dashboards .d-ch-ico{ width:36px;height:36px;border-radius:11px;flex:none; background:#eefbf3;color:#14855a; } #dashboards .d-ch-ico svg{width:19px;height:19px} #dashboards .d-ch-txt{flex:1;min-width:0} #dashboards .d-ch-name{ width:auto;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:#0f172a;line-height:1.25; } #dashboards .d-ch-sub{font-family:var(--font-body);font-size:11.5px;color:#64748b;margin-top:2px} #dashboards .d-ch-right{width:112px;flex:none} #dashboards .d-ch-pct{ width:auto;text-align:right; font-family:var(--font-display);font-size:13.5px;font-weight:700;color:#0f172a;margin-bottom:5px; } #dashboards .d-ch-track{height:6px;border-radius:6px;background:#eef1f5;flex:none} #dashboards .d-ch-fill{background:#22a35f} /* ── radar ── */ #dashboards .d-radar{display:flex;align-items:center;gap:18px;margin-bottom:22px} #dashboards .d-radar svg{width:170px;height:134px;flex:none} #dashboards .d-radar-key{ flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,1fr); gap:9px 14px;align-content:center; } #dashboards .d-rk{ display:flex;align-items:center;gap:7px; font-family:var(--font-body);font-size:12.5px;color:#64748b; } #dashboards .d-rk b{ margin-left:auto;font-family:var(--font-display);font-size:12.5px;font-weight:700;color:#0f172a; } #dashboards .d-rk .d-dot{width:7px;height:7px} @media(max-width:1120px){ #dashboards .dash-grid{grid-template-columns:1fr;max-width:660px} } @media(max-width:640px){ #dashboards .dash-head{padding:15px 15px;gap:10px;flex-wrap:wrap} #dashboards .dash-mod-name{font-size:17px} #dashboards .dash-sel{display:none} #dashboards .dash-body{padding:15px} #dashboards .d-krow{flex-direction:column;gap:9px} #dashboards .d-kv{font-size:23px} #dashboards .d-status{grid-template-columns:repeat(2,1fr)} #dashboards .d-radar{flex-direction:column;gap:14px} #dashboards .d-radar svg{width:150px;height:118px} #dashboards .d-radar-key{width:100%} #dashboards .d-row-d{display:none} #dashboards .d-hbar span:first-child{width:78px;font-size:11.5px} } /* ── CTA ── */ /* Base #cta stays dark & full-bleed — About Us and /home-2 both use this section and have no .cta-card wrapper, so changing the base here would blow out their CTAs. */ /* ══════════ CTA INTRO — continuous letter train (white, scroll-driven) ══════════ Lead-in above the Final CTA. Nothing here targets #cta, so the existing CTA UI is entirely unaffected. TWO COPIES, ONE VISIBLE. The static heading is the DEFAULT and is what renders with no JS, no GSAP, a thrown error or reduced motion. The animated train only appears once the JS has added .ci-anim to the section — and the JS removes that class again in its catch block, so a failure can never leave the heading missing. overflow-x is CLIPPED (not hidden) so glyphs can sit past both viewport edges without a horizontal scrollbar — and without creating a scroll container, which would break position:sticky elsewhere on the page. */ #cta-intro{ position:relative;background:#FFFFFF; padding:7rem 3.5rem; overflow-x:hidden;overflow-x:clip; } /* ── default: plain oversized heading ── */ .ci-static-head{max-width:1400px;margin:0 auto} .ci-line{ font-family:var(--font-display); font-size:clamp(52px,8.6vw,132px); font-weight:800;letter-spacing:-.035em;line-height:1.04; color:var(--black);margin:0; } .ci-g{color:#33B470} /* ── animated state ── ScrollTrigger pins this section and supplies its own spacer for the scroll runway, so the section itself is exactly one viewport tall while the train runs. */ #cta-intro.ci-anim{height:100vh;padding:0} #cta-intro.ci-anim .ci-static-head{display:none} .ci-train{display:none} #cta-intro.ci-anim .ci-train{display:block;position:absolute;inset:0;overflow:hidden} /* The JS writes viewport-space x values (landX comes from the CTA card's bounding rect, launchX from window.innerWidth), so the glyph origin must sit at viewport x = 0 and the vertical middle. left:0 + top:50% puts it exactly there; y = 0 is the baseline. */ .ci-track{ position:absolute;left:0;top:50%;width:100%;height:0; font-family:var(--font-display); font-size:clamp(56px,10vw,168px); font-weight:800;letter-spacing:-.035em;line-height:1; color:var(--black);white-space:nowrap; } /* Laid out but never painted: this is the only thing that knows the real kerning, and the JS reads offsetLeft/offsetWidth off its spans. It must keep participating in layout, so visibility — never display:none, which would zero every measurement. */ .ci-measure{ position:absolute;left:0;top:0; visibility:hidden;pointer-events:none;white-space:nowrap; } /* the glyphs actually flown. All stacked at the origin; only transform moves them. */ .ci-stage{position:absolute;left:0;top:0} .ci-ch{ position:absolute;left:0;top:0; display:inline-block;white-space:pre; transform:translate3d(0,0,0); opacity:0; will-change:transform,opacity; } @media(max-width:1024px){ #cta-intro{padding:5.5rem 2rem} .ci-line{font-size:clamp(42px,8.6vw,100px)} .ci-track{font-size:clamp(46px,10vw,116px)} } @media(max-width:560px){ #cta-intro{padding:4.5rem 1.5rem} .ci-line{font-size:clamp(26px,8.4vw,56px);letter-spacing:-.03em} } /* reduced motion: the JS returns before adding .ci-anim, so the static heading is already what shows. Nothing extra to undo here. */ #cta{ padding:9rem 3.5rem;text-align:center;position:relative; overflow:hidden;background:var(--black);border-bottom:none; } /* Framed variant (homepage): light page ground with the dark treatment moved onto the inset .cta-card, so white space frames it on all four sides. */ #cta.cta-framed{ padding:6rem 3.5rem;background:var(--white);overflow:visible; } /* still used by the About Us and /home-2 CTAs — do not remove */ .cta-card{ position:relative;overflow:hidden; max-width:1180px;margin:0 auto; padding:6rem 3rem;border-radius:44px; border:1px solid rgba(51,180,112,.22); /* deep green-black base with the glow concentrated behind the headline, fading out toward the edges */ background: radial-gradient(70% 58% at 50% 44%,rgba(51,180,112,.20) 0%,rgba(30,120,80,.09) 40%,transparent 72%), radial-gradient(120% 90% at 50% 50%,#0a2018 0%,#04120c 55%,#020806 100%); box-shadow:inset 0 0 130px rgba(51,180,112,.07),0 40px 90px rgba(0,0,0,.16); } /* eyebrow pill above the headline */ .cta-eyebrow{ display:inline-flex;align-items:center;gap:9px;position:relative; padding:8px 18px;border-radius:999px;margin-bottom:2rem; background:rgba(51,180,112,.10);border:1px solid rgba(51,180,112,.26); font-family:var(--font-body);font-size:13px;font-weight:600;color:#4ecb87; } .cta-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#33B470;box-shadow:0 0 0 3px rgba(51,180,112,.18)} @media(max-width:820px){ #cta.cta-framed{padding:3.5rem 1.25rem} .cta-card{padding:4rem 1.5rem;border-radius:32px} } .cta-grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:68px 68px} .cta-glow{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:760px;height:620px;background:radial-gradient(circle,rgba(51,180,112,.16) 0%,rgba(51,180,112,.07) 38%,transparent 68%);pointer-events:none} .cta-h{font-size:clamp(38px,6vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#fff;margin-bottom:1.25rem;position:relative} /* One tone across the whole CTA heading. These four carried a faded white and two greens as flat colours, not gradients, so the earlier conversion never touched them, and they sit after the heading block near the top of this file, so they had to be neutralised here rather than there. */ .cta-h .fade,.cta-h .gr,.cta-h .gr2,.cta-h .gr3{color:inherit;display:inline;padding-right:0} .cta-p{font-size:16px;color:rgba(255,255,255,.48);margin-bottom:2.5rem;font-weight:400;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.65;position:relative} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative} .cta-btn-w{background:#fff;color:var(--black);padding:15px 32px;border-radius:8px;font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px} .cta-btn-w:hover{background:#e8e8e4;transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,255,255,.14)} .cta-btn-g{background:transparent;color:rgba(255,255,255,.7);padding:14px 31px;border-radius:8px;font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:1.5px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px} .cta-btn-g:hover{border-color:rgba(255,255,255,.55);color:#fff;transform:translateY(-1px)} .cta-note{margin-top:2.5rem;font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.22);font-weight:500;position:relative} /* ── FOOTER ── */ footer{padding:2.75rem 3.5rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;background:var(--white);border-top:1.5px solid var(--border)} .ft-logo{font-size:19px;font-weight:800;letter-spacing:.04em;margin-bottom:.5rem} .ft-sub{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--g400);font-weight:600;line-height:2} .ft-links{display:flex;flex-direction:column;gap:9px} .ft-links a{font-size:12.5px;color:var(--g500);text-decoration:none;font-weight:500;transition:color .15s} .ft-links a:hover{color:var(--black)} .ft-contact{font-size:11.5px;color:var(--g400);line-height:2.2;font-weight:500} .ft-copy{margin-top:.85rem;font-size:10.5px;color:var(--g300);font-weight:500} /* ── REVEAL ── */ .rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease} .rv.in{opacity:1;transform:translateY(0)} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s} /* ── KEYFRAMES ── */ @keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── RESPONSIVE ── */ /* ── TABLET ── */ @media(max-width:960px){ nav{padding:1rem 1.5rem} .nav-links{display:none} .logo img{height:38px} :root{--sp-section:5rem;--sp-gutter:1.5rem;--rh-sub:2.75rem;--rh-cta:2.5rem} #hero{padding:6rem 1.5rem 3rem} .hero-grid{grid-template-columns:1fr;gap:3rem} .hero-left{text-align:center} .hero-eyebrow{justify-content:center} .hero-h{font-size:clamp(34px,6vw,48px);text-align:center} .hero-p{margin-left:auto;margin-right:auto} .hero-btns{justify-content:center} .hero-right{max-width:560px} .ind-tabs{margin-left:auto;margin-right:auto} .hero-stats{gap:1.75rem;max-width:560px;margin:0 auto} .hstat{flex:0 0 auto} .fn-grid{grid-template-columns:repeat(2,1fr)} .tech-grid{grid-template-columns:repeat(2,1fr)} .dash-grid{grid-template-columns:1fr} .why-grid{grid-template-columns:repeat(2,1fr)} .ind-grid{grid-template-columns:repeat(2,1fr)} footer{grid-template-columns:1fr;gap:2.5rem} #cta{padding:5rem 1.5rem} .cta-h{font-size:clamp(34px,6vw,52px)} .hpf-body{height:auto;flex-direction:column} .hpf-sidebar{width:100%;flex-direction:row;padding:10px;gap:8px;overflow-x:auto} .hpf-main{padding:12px} .hpf-kpi-row{grid-template-columns:repeat(2,1fr)} .hpf-charts-row{flex-direction:column} .sec-h{font-size:clamp(28px,5vw,40px)} /* ID-scoped so it outranks the homepage rule above (which has higher specificity) */ #functions .sec-h,#unify .sec-h,#method .sec-h,#solutions .sec-h,#tech .sec-h, #cases .sec-h,#industries .sec-h,#why .sec-h,#dashboards .sec-h{font-size:clamp(26px,4.6vw,38px)} } /* ── MOBILE ── */ @media(max-width:560px){ nav{padding:.9rem 1.25rem} .logo img{height:32px} :root{--sp-section:4rem;--sp-gutter:1.25rem;--rh-eyebrow:1rem;--rh-sub:2.25rem;--rh-cta:2rem} #hero{padding:5.5rem 1.25rem 3rem} .hero-h{font-size:clamp(30px,9vw,40px);letter-spacing:-.02em;line-height:1.05} .hero-p{font-size:15px;max-width:100%} .hero-btns{flex-direction:column;align-items:center;width:100%} .hero-btns .btn{width:100%;justify-content:center} .fn-grid,.why-grid,.ind-grid{grid-template-columns:1fr} .cf-card{width:280px;flex-basis:280px} .tech-grid{grid-template-columns:1fr} .dash-grid{grid-template-columns:1fr} .hpf-body{height:auto;flex-direction:column} .hpf-sidebar{display:none} .hpf-main{padding:12px} .hpf-kpi-row{grid-template-columns:repeat(2,1fr);gap:6px} .hpf-charts-row{flex-direction:column;gap:8px} .hpf-chart-box{padding:10px} /* One scrollable row rather than a wrapped block, so the five industries stay in a single line the user swipes through instead of stacking unevenly. */ .ind-tabs{flex-wrap:nowrap;width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .ind-tabs::-webkit-scrollbar{display:none} .ind-tab{flex:0 0 auto} .hero-stats{gap:1.5rem;max-width:100%} .hstat{flex:0 0 auto} .hstat-n{font-size:24px} .sec-h{font-size:clamp(26px,7vw,34px);letter-spacing:-.02em} #functions .sec-h,#unify .sec-h,#method .sec-h,#solutions .sec-h,#tech .sec-h, #cases .sec-h,#industries .sec-h,#why .sec-h,#dashboards .sec-h{font-size:clamp(23px,5.6vw,30px)} .sec-sub{font-size:16px} .sec-cta{flex-direction:column;align-items:center} .sec-cta .btn{width:100%;max-width:360px;justify-content:center} footer{grid-template-columns:1fr;padding:2rem 1.25rem;gap:2rem} #cta{padding:4.5rem 1.25rem} .cta-h{font-size:clamp(30px,8vw,42px)} .cta-btns{flex-direction:column;align-items:center} .cta-btn-w,.cta-btn-g{width:100%;max-width:360px;justify-content:center} .why-grid{grid-template-columns:1fr} .ind-chip{font-size:12px;padding:8px 14px} .cs-body{height:calc(160px - 28px)} .mq-wrap{display:none} .fn-cta-card{padding:2rem 1.5rem} .dash-card{margin:0} } /* ══════════════════ ABOUT PAGE ══════════════════ */ #about-hero{min-height:auto;padding-top:9.5rem;text-align:center} #about-hero .sec-h{margin-left:auto;margin-right:auto} .story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start} .story-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:2.1rem 2rem;box-shadow:0 12px 40px rgba(0,0,0,.05)} .story-card-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-weight:700;margin-bottom:1.3rem} .story-facts{list-style:none;display:flex;flex-direction:column} .story-facts li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border);font-size:12.5px} .story-facts li:last-child{border-bottom:none} .story-facts li span{color:var(--g400);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px} .story-facts li strong{color:var(--black);font-weight:700;text-align:right} .story-tagline{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--border);font-size:13px;font-weight:800;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:inherit} .story-tagline span{background:none;-webkit-text-fill-color:var(--g400);color:var(--g400);font-weight:600} .founder-card{display:flex;gap:2.75rem;background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:2.75rem;align-items:flex-start;box-shadow:0 12px 40px rgba(0,0,0,.05)} .founder-avatar{width:118px;height:118px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;font-weight:800;letter-spacing:-.02em;flex-shrink:0;box-shadow:0 12px 32px rgba(50,180,111,.35)} .founder-name{font-size:23px;font-weight:800;letter-spacing:-.01em} .founder-title{font-size:13px;color:var(--blue);font-weight:700;margin-top:.2rem;margin-bottom:.3rem} .founder-loc{font-size:10.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:1.3rem} .founder-bio{font-size:14px;color:var(--g500);line-height:1.75;margin-bottom:1.3rem;font-weight:400} .founder-quote{border-left:3px solid var(--blue);padding:.15rem 0 .15rem 1.15rem;font-size:15.5px;font-weight:600;color:var(--black);font-style:italic;margin-bottom:1.4rem;line-height:1.5} .founder-quote cite{display:block;margin-top:.5rem;font-size:10.5px;font-style:normal;color:var(--g400);font-weight:700;text-transform:uppercase;letter-spacing:.06em} .founder-skills{display:flex;flex-wrap:wrap;gap:6px} .why-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .industry-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:840px;margin:0 auto} .ind-chip2{font-size:13px;font-weight:700;color:var(--g600);background:var(--white);border:1.5px solid var(--border);border-radius:30px;padding:10px 22px;transition:all .2s;cursor:default} .ind-chip2:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)} @media(max-width:960px){ .story-grid{grid-template-columns:1fr;gap:2.5rem} .founder-card{flex-direction:column;align-items:center;text-align:center;padding:2.25rem} .founder-skills{justify-content:center} .founder-quote{text-align:left} .why-grid-4{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ #about-hero{padding-top:7.5rem} .why-grid-4{grid-template-columns:1fr} .founder-card{padding:1.75rem} .founder-avatar{width:96px;height:96px;font-size:30px} .industry-chips{gap:8px} .ind-chip2{padding:9px 16px;font-size:12px} .story-facts li strong{text-align:right;font-size:12px} } /* ══════════════════ BLOG ══════════════════ */ #blog-hero{min-height:auto;padding-top:9.5rem;text-align:center} #blog-hero .sec-h{margin-left:auto;margin-right:auto} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .blog-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:all .2s} .blog-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.09);border-color:var(--g300);transform:translateY(-2px)} .blog-card-img{height:190px;background:var(--bg2);border-bottom:1.5px solid var(--border);position:relative;overflow:hidden} .blog-card-img img{width:100%;height:100%;object-fit:cover;display:block} .blog-card-img.placeholder{display:flex;align-items:center;justify-content:center} .blog-card-img.placeholder::after{content:'Drawlead';font-size:15px;font-weight:800;letter-spacing:-.01em;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:inherit} .blog-card-body{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .blog-card-date{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--g400);font-weight:700} .blog-card-title{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.3} .blog-card-excerpt{font-size:12.5px;color:var(--g500);line-height:1.6;flex:1} .blog-card-arrow{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-top:.4rem} /* Single post */ #post-hero{padding-top:9.5rem;padding-bottom:2rem;text-align:center} .post-meta{font-size:11.5px;color:var(--g400);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem} .post-featured{max-width:920px;margin:0 auto 1rem;border-radius:14px;overflow:hidden;border:1.5px solid var(--border)} .post-featured img{width:100%;display:block} #post-body{padding-top:2rem} .post-content{max-width:720px;margin:0 auto;font-size:15.5px;line-height:1.85;color:var(--g600)} .post-content h2{font-size:26px;font-weight:800;letter-spacing:-.015em;margin:2rem 0 1rem;color:var(--black)} .post-content h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:1.75rem 0 .9rem;color:var(--black)} .post-content p{margin-bottom:1.25rem} .post-content ul,.post-content ol{margin:0 0 1.25rem 1.4rem} .post-content li{margin-bottom:.5rem} .post-content a{color:var(--blue);font-weight:600} .post-content blockquote{border-left:3px solid var(--blue);padding:.2rem 0 .2rem 1.3rem;font-style:italic;color:var(--black);font-weight:600;margin:1.5rem 0} .post-content img{max-width:100%;border-radius:10px;margin:1.5rem auto;display:block} .post-back{max-width:720px;margin:2.5rem auto 0} .post-back a{font-size:12.5px;font-weight:700;color:var(--g500);text-decoration:none} .post-back a:hover{color:var(--blue)} /* Sticky sidebar (blog post + case study pages) */ .post-layout{display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:start;max-width:1180px;margin:0 auto} .post-main{min-width:0} .post-sidebar{position:sticky;top:104px} .sidebar-card{background:var(--black);border-radius:16px;padding:2rem 1.75rem} .sidebar-card-title{font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff;margin-bottom:1.5rem} .sidebar-post{display:block;text-decoration:none;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.12)} .sidebar-post:last-of-type{border-bottom:none;margin-bottom:1.5rem} .sidebar-post-title{font-size:14.5px;font-weight:700;line-height:1.4;color:#fff;margin-bottom:.4rem;transition:color .15s} .sidebar-post:hover .sidebar-post-title{color:var(--blue)} .sidebar-post-excerpt{font-size:12px;color:rgba(255,255,255,.5);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sidebar-cta{background:#fff;border-radius:12px;padding:1.5rem 1.4rem} .sidebar-cta-img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:1rem;display:block} .sidebar-cta-title{font-size:17px;font-weight:800;color:var(--black);margin-bottom:.5rem} .sidebar-cta-text{font-size:12.5px;color:var(--g500);line-height:1.6;margin-bottom:1.1rem} .sidebar-cta-btn{width:100%;justify-content:center;padding:13px 18px;font-size:11.5px} @media(max-width:960px){ .blog-grid{grid-template-columns:repeat(2,1fr)} .post-layout{grid-template-columns:1fr} .post-sidebar{position:static;top:auto;max-width:480px;margin:0 auto} } @media(max-width:560px){ .blog-grid{grid-template-columns:1fr} #blog-hero{padding-top:7.5rem} #post-hero{padding-top:7.5rem} .post-content{font-size:14.5px} } /* ══════════════════ CASE STUDIES ══════════════════ */ .cs-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:1.1rem 0 .6rem} .cs-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--bg2);color:var(--g600);border:1.5px solid var(--border);border-radius:999px;padding:6px 14px} .cs-client{font-size:11.5px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.05em} .cs-card-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)} .cs-filter-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:2.5rem} .cs-filter-tab{ font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.01em; background:var(--white);color:var(--g500);border:1.5px solid var(--border);border-radius:999px; padding:9px 20px;cursor:pointer;transition:all .15s; } .cs-filter-tab:hover{border-color:var(--g300);color:var(--black)} .cs-filter-tab.active{background:var(--black);color:#fff;border-color:var(--black)} #cs-shots{max-width:920px;margin:0 auto;padding:0 0 1rem} .cs-shot-desktop{border-radius:14px;overflow:hidden;border:1.5px solid var(--border);margin-bottom:16px} .cs-shot-desktop img{width:100%;display:block} .cs-shots-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cs-shot-row-item{border-radius:14px;overflow:hidden;border:1.5px solid var(--border);background:var(--bg2)} .cs-shot-row-item img{width:100%;display:block} #cs-body{padding-top:2rem} .cs-block{max-width:720px;margin:0 auto 2.25rem} .cs-block-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:.6rem} .cs-block-text{font-size:15.5px;line-height:1.85;color:var(--g600)} .cs-testimonial{max-width:720px;margin:0 auto 2.25rem;background:var(--bg2);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;padding:1.75rem 2rem} .cs-testimonial-text{font-size:17px;font-style:italic;font-weight:600;color:var(--black);line-height:1.6;margin-bottom:.75rem} .cs-testimonial-author{font-size:12px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.04em} .cs-team{max-width:720px;margin:0 auto 2.25rem} .cs-team-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:.6rem} .cs-team-list li{font-size:12.5px;font-weight:700;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;padding:8px 14px;color:var(--g600)} .cs-links{max-width:720px;margin:0 auto 2.25rem;display:flex;flex-wrap:wrap;gap:12px} #cs-cta{text-align:center;padding:4.5rem 0;max-width:640px;margin:0 auto} #cs-cta .sec-sub{margin-bottom:1.6rem} #cs-more{padding:3rem 0 4rem} #cs-more .sec-h{margin-bottom:2rem} @media(max-width:560px){ .cs-shots-row{grid-template-columns:1fr} } /* ══════════════════ SERVICE LANDING PAGES ══════════════════ */ #svc-hero{padding-top:9.5rem;padding-bottom:1rem;text-align:center} #svc-hero .sec-h,#svc-hero .sec-sub{margin-left:auto;margin-right:auto} .svc-hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:1.8rem} .svc-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:1180px;margin:0 auto} .svc-benefit{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;transition:border-color .15s} .svc-benefit:hover{border-color:var(--g300)} .svc-benefit-check{width:34px;height:34px;border-radius:10px;background:rgba(50,180,111,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0} .svc-benefit-text{font-size:13px;color:var(--g600);font-weight:600;line-height:1.55} .svc-tracks{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:920px;margin:0 auto} .svc-track{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:2rem 1.9rem} .svc-track-title{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:1.2rem;display:flex;align-items:center;gap:10px;color:var(--black)} .svc-track .sol-list{margin-bottom:0} #service-cta{text-align:center;padding:4.5rem 0;max-width:640px;margin:0 auto} #service-cta .sec-sub{margin-bottom:1.6rem} @media(max-width:960px){ .svc-benefits{grid-template-columns:repeat(2,1fr)} .svc-tracks{grid-template-columns:1fr} } @media(max-width:560px){ #svc-hero{padding-top:7.5rem} .svc-benefits{grid-template-columns:1fr} } /* ══════════════════ PLATFORM MODULE PAGES ══════════════════ */ .pboard-section{background:var(--bg2)} .pboard{max-width:640px;margin:0 auto;background:var(--white);border:1.5px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.08);overflow:hidden} .pboard-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)} .pboard-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .pboard-title{font-size:11px;font-weight:800;color:var(--g500);margin-left:6px} .pboard-body{padding:1.5rem 1.6rem} .pboard-list{max-width:640px;margin:0 auto;background:var(--white);border:1.5px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.08);overflow:hidden} .pboard-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)} .pboard-row:last-child{border-bottom:none} .pboard-row-label{font-size:13px;font-weight:700;color:var(--black)} .pboard-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:999px;flex-shrink:0} .pboard-status-good{background:#e9f9f0;color:#0f7a4c} .pboard-status-pending{background:#eaf1fe;color:#1d5fd6} .pboard-status-warn{background:#fdf3e3;color:#a8631a} .pain-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .pain-item{display:flex;align-items:flex-start;gap:14px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem} .pain-icon{width:26px;height:26px;border-radius:50%;background:#fdecef;color:#b3123a;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pain-text{font-size:13.5px;color:var(--g600);font-weight:500;line-height:1.6;padding-top:2px} .svc-connect-grid{grid-template-columns:repeat(3,1fr);max-width:1180px} .connect-text{font-size:12.5px;color:var(--g500);line-height:1.6;margin-bottom:1rem} @media(max-width:960px){ .svc-connect-grid{grid-template-columns:1fr} } /* ══════════════════ STEP TIMELINE (shared: Home 2.0, Analyze) ══════════════════ */ .h2-steps{position:relative;display:flex;justify-content:space-between;gap:1.5rem;max-width:1080px;margin:0 auto} .h2-steps::before{content:'';position:absolute;top:26px;left:6%;right:6%;height:2px;background:var(--border);z-index:0} .h2-step{position:relative;z-index:1;flex:1;text-align:center;display:flex;flex-direction:column;align-items:center} .h2-step-n{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:1.1rem;box-shadow:0 8px 18px rgba(20,133,90,.25)} .h2-step-name{font-size:15px;font-weight:800;margin-bottom:.4rem} .h2-step-desc{font-size:12px;color:var(--g500);line-height:1.55;max-width:190px} @media(max-width:800px){.h2-steps{flex-direction:column;gap:2.2rem}.h2-steps::before{display:none}} /* ══════════════════ DRAWLEAD ANALYZE ══════════════════ */ #az-hero{padding-top:9.5rem;text-align:center} .az-form-card{max-width:640px;margin:2.5rem auto 0;background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.08);text-align:left} .az-input-row{display:flex;gap:10px;flex-wrap:wrap} .az-url-input{flex:1;min-width:220px;padding:14px 18px;border-radius:8px;border:1.5px solid var(--border);font-family:var(--font);font-size:14px;color:var(--black);background:var(--bg)} .az-url-input:focus{outline:none;border-color:var(--blue)} .az-form-hint{margin-top:.9rem;font-size:11.5px;color:var(--g400);text-align:center} .az-error{background:#fdecef;color:#b3123a;border:1px solid #f6c3cf;border-radius:8px;padding:10px 14px;font-size:12.5px;font-weight:600;margin-bottom:1.1rem} @media(max-width:560px){.az-input-row{flex-direction:column}.az-input-row .btn{width:100%;justify-content:center}} #az-report-hero{padding:9.5rem 3.5rem 2.5rem;text-align:center} .az-report-url{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--g500);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:7px 16px;margin-bottom:1.3rem;word-break:break-all} .az-tabs{display:flex;justify-content:center;gap:0;border:1.5px solid var(--border);background:var(--white);border-radius:10px;width:fit-content;margin:0 auto;overflow:hidden} .az-tab{font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:13px 26px;border:none;background:transparent;color:var(--g400);cursor:pointer;transition:all .15s} .az-tab.active{background:var(--black);color:#fff} .az-panel{display:none;padding:0 3.5rem 6rem} .az-panel.active{display:block} .az-preview{max-width:1100px;margin:0 auto;background:var(--bg);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.1)} .az-preview-hero{background:#0a1310;color:#fff;padding:4rem 2.5rem;text-align:center;position:relative;overflow:hidden} .az-preview-kicker{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#34a87c;margin-bottom:1rem;position:relative} .az-preview-h1{font-size:clamp(24px,4vw,38px);font-weight:800;margin-bottom:1rem;letter-spacing:-.02em;line-height:1.15;position:relative} .az-preview-sub{font-size:14px;color:rgba(255,255,255,.6);max-width:580px;margin:0 auto 1.8rem;line-height:1.6;position:relative} .az-preview-cta{background:#fff;color:var(--black);padding:14px 28px;border-radius:8px;font-family:var(--font);font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border:none;display:inline-block;position:relative} .az-preview-body{padding:3rem 2.5rem} .az-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;max-width:1000px;margin:0 auto} .az-preview-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:1.5rem} .az-preview-card-title{font-weight:800;font-size:14px;margin-bottom:.6rem;color:var(--black)} .az-preview-card-text{font-size:12.5px;color:var(--g500);line-height:1.6} .az-preview-stats{display:flex;justify-content:center;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap} .az-preview-stat{font-size:13px;font-weight:800;color:var(--g600);background:var(--white);border:1px solid var(--border);border-radius:999px;padding:8px 18px} .az-score-wrap{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;max-width:900px;margin:0 auto 3rem} .az-score-ring{--pct:0;width:160px;height:160px;border-radius:50%;background:conic-gradient(#32b46f calc(var(--pct)*1%),var(--g200) 0);display:flex;align-items:center;justify-content:center;flex-shrink:0} .az-score-ring-inner{width:130px;height:130px;border-radius:50%;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center} .az-score-value{font-size:38px;font-weight:800;line-height:1} .az-score-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--g400);font-weight:700;margin-top:4px} .az-audience-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:1.6rem 2rem;min-width:260px} .az-audience-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--g400);font-weight:700;margin-bottom:.5rem} .az-audience-value{font-size:19px;font-weight:800;margin-bottom:.7rem} .az-audience-match{display:flex;align-items:center;gap:10px} .az-audience-match-track{flex:1;height:6px;border-radius:999px;background:var(--border);overflow:hidden} .az-audience-match-fill{height:100%;border-radius:999px;background:var(--grad)} .az-audience-match-value{font-size:11.5px;font-weight:800;color:var(--blue);flex-shrink:0} .az-subscores{max-width:640px;margin:0 auto 3.5rem} .az-subscore-row{display:flex;align-items:center;gap:14px;margin-bottom:16px} .az-subscore-label{width:170px;font-size:12.5px;font-weight:700;color:var(--g600);flex-shrink:0} .az-subscore-track{flex:1;height:8px;border-radius:999px;background:var(--border);overflow:hidden} .az-subscore-fill{height:100%;border-radius:999px;background:var(--grad)} .az-subscore-value{width:36px;text-align:right;font-size:12px;font-weight:800;color:var(--black);flex-shrink:0} .az-changes{max-width:800px;margin:0 auto 2.5rem} .az-change-item{display:flex;align-items:flex-start;gap:14px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:12px} .az-change-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:13px} .az-change-icon-fixed{background:#e9f9f0;color:#0f7a4c} .az-change-icon-kept{background:#eaf1fe;color:#1d5fd6} .az-change-title{font-size:13.5px;font-weight:800;color:var(--black);margin-bottom:.3rem} .az-change-reason{font-size:12.5px;color:var(--g500);line-height:1.6} .az-changes-heading{font-size:14px;font-weight:800;color:var(--black);margin:2.5rem 0 1.2rem;max-width:800px;margin-left:auto;margin-right:auto} @media(max-width:800px){ .az-panel{padding:0 1.5rem 4rem} .az-score-wrap{gap:1.5rem} .az-subscore-label{width:120px;font-size:11.5px} } /* ══════════════════ BOOKING POPUP ══════════════════ */ /* Every button[data-book] utility class (.btn, .nav-btn, .cta-btn-w/g, .fn-arrow, .sol-arrow, .ind-cta) already declares its own background, border, font, and padding — so no blanket