/* ═══════════════════════════════════════════════════════════════════════ VELTIO SHARED DESIGN SYSTEM — assets/css/veltio.css Single source of truth for all Veltio static pages (Phase 1/2 build). HARD RULES 1. Class-only selectors. Element selectors limited to the reset/base block below. Every component is a class so this file can later be mechanically scoped under `.veltio-lp` for the WordPress/Avada port. 2. No raw hex outside inline SVG art — use tokens (var(--…)) everywhere. 3. SKY #21b2eb IS NEVER USED AS TEXT COLOR ON A LIGHT/WHITE BACKGROUND (contrast ~1.4:1 — fails WCAG at any size). Legal uses only: a) background fill with --navy-950 or --granite text on top b) accent / underline / marker on a DARK NAVY background c) outlined display type (stroke only, transparent fill) on navy If you need bright accent text on a light section, use --sky-ink or --polaris instead, or put the bright accent on a navy chip/badge. 4. Motion = transform/opacity only. No animation libraries. Everything must degrade cleanly: no-JS shows all content (`.js`-gated), and `prefers-reduced-motion: reduce` forces final states everywhere (see the bottom of this file). ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────── TOKENS ───────────────────────── */ :root{ /* Brand palette — Veltio Brand Book (Updated July 2026), locked. Names + hex are the brand book's OWN values (p.6). Earlier builds mislabeled these (Polaris was set to Summit's blue; Summit held a neutral grey) — corrected here so the whole site is brand-accurate. */ --polaris:#0e3259; /* dark navy — primary brand / dark surfaces / text */ --summit:#14589f; /* mid blue — headings, secondary accents */ --sky:#21b2eb; /* bright blue — emphasis / highlights */ --sun:#21b2eb; /* legacy Sun token mapped to Veltio Sky */ --granite:#404040; /* near-black text */ --stratus:#f4f4f6; /* "Fog" — soft off-white section background */ --slate:#717171; /* neutral grey for muted/secondary text (not a brand hue) */ /* Navy ramp (dark sections / hero) — anchored on Veltio Polaris #0e3259 so every dark section reads as brand navy, with a touch of depth at the deep end for gradients. */ --navy-950:#071d33; --navy-900:#0b2a49; --navy-800:var(--polaris); --navy-700:#164a80; --navy-600:#1d5a97; --navy-500:#2a6bab; /* Support */ --sun-deep:#21b2eb; --sun-glow:rgba(33,178,235,.18); --sky-300:#6cc6ea; --sky-ink:#0a70a0; --ice:#e9f4fb; --mist:#f4f8fc; --line:#dfe6ee; --line-soft:#e9eef5; --ink:#1a2430; /* Semantic aliases */ --bg:#ffffff; --surface:#ffffff; --brand:var(--polaris); --accent:var(--sun); --focus-ring:var(--sky); --muted:var(--slate); /* Layout — 4px grid. Every gap/padding below should resolve to one of these. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --section-pad:clamp(72px,9vw,140px); --gutter:24px; --wrap:1200px; --wrap-wide:1360px; /* The canonical text column. .section-head and .wrap--text both resolve to THIS content width, so a heading and the prose under it share one left edge and one measure (.wrap is border-box + padding, so the modifier has to add the gutters back or it lands 48px narrower than the heading). */ --measure:820px; --measure-wide:900px; /* One rhythm for every full-bleed hero (was 4 different hand-typed pairs). */ --hero-top:clamp(128px,14vh,152px); --hero-bot:clamp(96px,17vh,200px); /* Compact heroes on light pages sit BELOW a solid nav (no overlay pull), so they need their own — but single — top value. */ --hero-light-top:clamp(64px,8vw,104px); /* One card padding (was 22/20, 26/24, 28/26, 30/28, 30/32, 32/30, 34/30). */ --card-pad:30px 28px; --r-sm:10px; --r-md:16px; --r-lg:24px; --shadow-sm:0 10px 26px rgba(4,16,31,.10); --shadow-md:0 20px 50px rgba(4,16,31,.14); --shadow-lg:0 30px 80px rgba(4,16,31,.30); /* Fluid type — Roboto Flex variable, weights up to 1000 */ --t-display:clamp(46px,7.5vw,104px); --t-h1:clamp(38px,5vw,68px); --t-h2:clamp(31px,3.9vw,52px); --t-h3:20px; --t-lead:clamp(17px,1.4vw,21px); --t-body:16.5px; --t-small:14px; --t-eyebrow:13px; --ff:'Roboto Flex','Helvetica Neue',Arial,sans-serif; } /* Dark scope: drop-in remap so light components (cards, forms, pills) read correctly inside a navy section. Apply alongside .bg-navy. */ .theme-dark{ --bg:var(--navy-950); --surface:rgba(255,255,255,.05); --ink:#eaf2fa; --muted:#a9bfd6; --line:rgba(255,255,255,.15); --line-soft:rgba(255,255,255,.10); --mist:rgba(255,255,255,.04); --focus-ring:var(--sky-300); color:var(--ink); } /* ───────────────────────── RESET / BASE ───────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* overflow-x:CLIP, not hidden. `hidden` forces the other axis to `auto`, which turns these into scroll containers — and a sticky element inside a scrollport that never scrolls simply never sticks. That silently broke the sticky nav, #program's sticky panel, and the funnel/FAQ rails site-wide. `clip` gives the same horizontal guard without creating a scroll container. */ html{scroll-behavior:smooth;overflow-x:clip} body{ font-family:var(--ff); font-size:var(--t-body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:opacity .22s ease; position:relative; overflow-x:clip; } body.leaving{opacity:0} img{max-width:100%;display:block} svg{display:block} a{color:var(--polaris);text-decoration:none} ul,ol{list-style:none} button{font-family:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font-family:inherit} ::selection{background:var(--sun-glow)} h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;text-wrap:balance} p{text-wrap:pretty} /* ───────────────────────── BRANDED SCROLLBAR ───────────────────────── Track stays transparent so the same rule reads correctly on light pages and on the fully-dark Platform page — the page background shows through instead of cutting a light strip down a navy layout. */ html{scrollbar-color:var(--polaris) transparent;scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--sky),var(--polaris)); border:3px solid transparent;background-clip:padding-box;border-radius:99px; } ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--sun),var(--sky));background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* Skip link */ .skip-link{position:fixed;top:-60px;left:12px;z-index:200;background:var(--navy-950);color:#fff;padding:12px 20px;border-radius:var(--r-sm);font-weight:700;font-size:14px;transition:top .2s ease} .skip-link:focus{top:12px} /* Focus rings */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2.5px solid var(--focus-ring); outline-offset:3px; border-radius:4px; } /* Grain overlay — static SVG feTurbulence, ~3.5%, NEVER animated */ .grain{position:relative} .grain::after{ content:""; position:fixed; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ───────────────────────── UTILITIES ───────────────────────── */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter)} /* Measure modifiers. These cap the CHILDREN, not the container — the wrap keeps the main grid so every page's h1 shares one left edge. (Capping the container instead re-centres a narrower box and shunts the headline inward: that produced three different h1 left edges across the site — 137/263/303.) Children land at --measure, exactly matching .section-head. */ .wrap--text > *{max-width:var(--measure)} .wrap--narrow > *{max-width:var(--measure-wide)} .wrap--text.center > *,.wrap--narrow.center > *{margin-left:auto;margin-right:auto} /* Shared hero copy block — replaces per-page inline padding/gap. */ .hero-copy{padding:var(--hero-top) var(--gutter) var(--hero-bot);display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start} /* Lighter, more refined display weight for the hero headline (note 1: reduce the boldness to align with the brand). Roboto Flex at ~600 reads as the brand's clean semibold rather than the old near-black 800/1000. */ .hero-title{font-size:clamp(42px,6.4vw,88px);font-weight:600;letter-spacing:-.015em} /* ── Hero: copy + 3D brand medallion ───────────────────────────────────── Two-column hero. The logo is presented as a beveled silver "coin" seen in 3D perspective, with the mark floating above the disc surface (translateZ under preserve-3d) and a soft cast shadow — a real 3D read, not a flat PNG. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.5vw,64px);align-items:center; padding:var(--hero-top) var(--gutter) var(--hero-bot)} .hero-grid .hero-copy{padding:0} .hero-logo3d{display:flex;align-items:center;justify-content:center;perspective:1100px} .hero-medallion{position:relative;width:min(360px,78%);aspect-ratio:1;border-radius:50%; transform-style:preserve-3d; transform:rotateX(14deg) rotateY(-18deg); background:radial-gradient(circle at 34% 26%,#ffffff 0%,#eef2f7 42%,#d6dee8 78%,#c2ccd8 100%); box-shadow: 0 46px 90px -24px rgba(4,16,31,.70), 0 14px 30px rgba(4,16,31,.38), inset 0 5px 10px rgba(255,255,255,.95), inset 0 -14px 26px rgba(11,42,73,.16), inset 0 0 0 1.5px rgba(255,255,255,.55); animation:medallion-float 6.5s ease-in-out infinite;will-change:transform} /* Rim ring for extra depth on the coin edge. */ .hero-medallion::after{content:"";position:absolute;inset:5%;border-radius:50%; box-shadow:inset 0 0 0 2px rgba(20,88,159,.14),inset 0 6px 14px rgba(11,42,73,.12);pointer-events:none} /* Specular sheen sweeping the top-left. */ .hero-medallion::before{content:"";position:absolute;inset:0;border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 38%); pointer-events:none;transform:translateZ(1px)} .hero-medallion-face{position:absolute;inset:15%;transform:translateZ(46px);transform-style:preserve-3d} .hero-medallion-face img{width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 10px 14px rgba(4,16,31,.28))} @keyframes medallion-float{ 0%,100%{transform:rotateX(14deg) rotateY(-18deg) translateY(0)} 50%{transform:rotateX(11deg) rotateY(-14deg) translateY(-14px)}} @media(max-width:940px){ .hero-grid{grid-template-columns:1fr;gap:clamp(24px,6vw,40px);justify-items:center} .hero-copy{align-items:flex-start} .hero-medallion{width:min(240px,58vw);transform:rotateX(12deg) rotateY(-14deg)} } @media(prefers-reduced-motion:reduce){ .hero-medallion{animation:none} } /* Padding only — for heroes with their own inner layout (e.g. Platform's two-column). Keeps the shared top rhythm; --tight trims the bottom where artwork already fills the space. */ .hero-pad{padding:var(--hero-top) var(--gutter) var(--hero-bot)} .hero-pad--tight{padding-bottom:clamp(72px,10vh,112px)} section{padding:var(--section-pad) 0;position:relative} .bg-mist{background:var(--mist)} .bg-ice{background:var(--ice)} .bg-fog{background:var(--stratus)} /* Guarantee card (#why) — Veltio Polaris panel with a large check badge near the headline (review note 8). */ .card.guarantee-card,.guarantee-card{padding:38px 34px;background:var(--polaris);color:#fff;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08)} .guarantee-check{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%; background:var(--sun);color:var(--navy-950);margin-bottom:18px;box-shadow:0 10px 26px var(--sun-glow)} .guarantee-check svg{width:36px;height:36px} .guarantee-head{font-size:26px;font-weight:750;line-height:1.3;margin-top:2px} .guarantee-sub{font-size:15px;line-height:1.6;color:#c4d4e5;margin-top:14px} .bg-navy{background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);color:#eaf2fa;position:relative;overflow:hidden} /* Plain links on navy inherit the light body colour — but never buttons: .bg-navy a (0,1,1) would otherwise outrank .btn-sun (0,1,0) and paint the primary CTA near-white on the former Sun accent. Buttons own their colour. */ .bg-navy a:not(.btn){color:inherit} [hidden]{display:none !important} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .tex-grid{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background-image:linear-gradient(rgba(108,198,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,198,234,.05) 1px,transparent 1px);background-size:54px 54px} .rel{position:relative} .z1{position:relative;z-index:1} /* ───────────────────────── SCROLL PROGRESS ───────────────────────── */ .scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--polaris));z-index:100;width:0%} /* ───────────────────────── EYEBROW / SECTION HEAD ───────────────────────── */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-eyebrow);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-ink)} .eyebrow::before{content:"";width:22px;height:2px;background:var(--sky-ink);border-radius:2px} .theme-dark .eyebrow,.bg-navy .eyebrow{color:var(--sun)} .theme-dark .eyebrow::before,.bg-navy .eyebrow::before{background:var(--sun)} .eyebrow.muted{color:var(--muted)} .eyebrow.muted::before{background:var(--sky-ink)} .section-head{max-width:var(--measure);display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-7)} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center} /* Section titles use the display-h2 scale. The --t-h2 token existed but was never wired to anything, so every section heading fell back to the 24.75px UA default — leaving titles barely larger than their lead (review note 8). This restores a clear title↔subtitle hierarchy site-wide. */ .section-head h2,.split-2 .reveal-left>h2,.split-2 .reveal-right>h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em} .lead{font-size:var(--t-lead);font-weight:500;line-height:1.6;color:var(--muted)} /* ───────────────────────── BUTTONS ───────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:17px;font-weight:750;padding:16px 30px;border-radius:var(--r-sm);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background-color .15s ease;cursor:pointer;border:0;line-height:1.2} .btn:hover{transform:translateY(-2px)} .btn-sun,.btn-navy,.btn-outline{position:relative} .btn-sun::after,.btn-navy::after,.btn-outline::after{content:"→";display:inline-block;transition:transform .18s ease;margin-left:1px} .btn-sun:hover::after,.btn-navy:hover::after,.btn-outline:hover::after{transform:translateX(4px)} .btn-sun{background:var(--sun);color:var(--navy-950);box-shadow:0 10px 26px var(--sun-glow)} .btn-sun:hover{background:var(--sun-deep);box-shadow:0 14px 34px rgba(33,178,235,.4)} .btn-navy{background:var(--navy-800);color:#fff;box-shadow:0 10px 26px rgba(4,16,31,.35)} .btn-navy:hover{background:var(--navy-900)} .btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn-ghost{font-weight:650;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:transform .15s ease,text-decoration-color .15s ease;padding:16px 0} .btn-ghost:hover{transform:translateX(3px);text-decoration-color:currentColor} .form-card .btn::after{display:none} .btn:disabled{opacity:.7;cursor:default;transform:none} /* ───────────────────────── NAV ───────────────────────── */ .nav{position:sticky;top:0;z-index:80;transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease} .nav--light{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)} .nav--light.scrolled{box-shadow:0 4px 20px rgba(4,16,31,.08);border-bottom-color:transparent} .nav--dark{background:transparent;border-bottom:1px solid transparent} .nav--dark.scrolled{background:rgba(4,16,31,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.3)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px;max-width:var(--wrap-wide);margin:0 auto;min-height:44px} /* .nav--overlay: for a transparent dark nav that must float on top of a full-bleed hero directly below it in the DOM. Sticky nav still occupies flow space (pushing the hero down), so we pull the hero back up by the nav's own box height via a matching negative margin — the nav (z-index 80, transparent until .scrolled) then floats visually over the hero's top edge instead of leaving a blank body-background gap above it. */ .nav--overlay{margin-bottom:-72px} .brand{display:flex;align-items:center;gap:12px} .brand img{height:36px;width:auto} .nav--dark .brand img{filter:brightness(0) invert(1)} .nav-links{display:flex;align-items:center;gap:26px} .nav-links a:not(.btn){font-size:15px;font-weight:600;color:var(--muted);position:relative;padding-bottom:3px} .nav--dark .nav-links a:not(.btn){color:#c4d4e5} .nav-links a:not(.btn):hover{color:var(--polaris)} .nav--dark .nav-links a:not(.btn):hover{color:#fff} /* [data-sect-active] = "you are somewhere in this section" on a hub link whose own page you are NOT on. Styled identically to the current-page state, but carries no aria-current — since the children are in the dropdown now, the real page claims aria-current and the hub only takes the highlight. */ .nav-links a[aria-current="page"],.nav-links a[data-sect-active]{color:var(--polaris);font-weight:750} .nav--dark .nav-links a[aria-current="page"],.nav--dark .nav-links a[data-sect-active]{color:#fff} .nav-links a[aria-current="page"]::after,.nav-links a[data-sect-active]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sky)} .nav--dark .nav-links a[aria-current="page"]::after,.nav--dark .nav-links a[data-sect-active]::after{background:var(--sun)} .nav-links .btn{font-size:14.5px;padding:11px 20px} /* .nav-dd: hub link + child menu. No JS — :hover opens for pointers and :focus-within opens when tabbing in, so the children stay reachable by keyboard. The trigger itself stays a real link to the hub page, so the parent is never a dead end for touch or no-hover devices. */ .nav-dd{position:relative;display:flex;align-items:center} .nav-dd > a{display:inline-flex;align-items:center} .nav-dd-caret{width:10px;height:10px;margin-left:5px;transition:transform .18s ease;flex:none} .nav-dd:hover .nav-dd-caret,.nav-dd:focus-within .nav-dd-caret{transform:rotate(180deg)} .nav-dd-menu{position:absolute;top:100%;left:-14px;padding-top:14px;min-width:264px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s} .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease} .nav-dd-menu-inner{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 44px rgba(4,16,31,.16);padding:8px;display:flex;flex-direction:column} .nav-dd-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:14.5px;font-weight:650;color:var(--granite)} .nav-dd-menu a small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:2px;line-height:1.35} .nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:var(--ice);color:var(--polaris)} .nav-dd-menu a[aria-current="page"],.nav-dd-menu a[data-sect-active]{background:var(--ice);color:var(--polaris);font-weight:750} /* The menu panel is a light card on both nav themes, so its own links must opt out of the dark nav's inherited near-white link colour. */ .nav--dark .nav-dd-menu a:not(.btn){color:var(--granite)} .nav--dark .nav-dd-menu a:not(.btn):hover,.nav--dark .nav-dd-menu a:not(.btn):focus-visible{color:var(--polaris)} .nav-dd-menu a[aria-current="page"]::after{display:none} @media(prefers-reduced-motion:reduce){ .nav-dd-menu{transition:none} .nav-dd-caret{transition:none} } .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border-radius:8px} .hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .25s ease} .nav--light .hamburger{color:var(--navy-900)} .nav--dark .hamburger{color:#fff} .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1080px){ .nav-links{display:none} .hamburger{display:flex} } .nav-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:120;background:var(--navy-950);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s} .nav-overlay.open{opacity:1;visibility:visible;transition:opacity .3s ease} .nav-overlay-top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px} .nav-overlay-top .brand img{filter:brightness(0) invert(1);height:32px} .nav-overlay-close{color:#fff;width:42px;height:42px;border-radius:8px;font-size:22px;display:flex;align-items:center;justify-content:center} .nav-overlay-links{display:flex;flex-direction:column;justify-content:center;flex:1;gap:2px;padding:0 40px} .nav-overlay-links a{font-size:clamp(30px,8vw,52px);font-weight:800;letter-spacing:-.02em;color:#eaf2fa;padding:10px 0;position:relative;display:inline-block;width:max-content;opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .4s ease} .nav-overlay.open .nav-overlay-links a{opacity:1;transform:none} .nav-overlay-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .nav-overlay-links a:hover::after,.nav-overlay-links a:focus-visible::after{transform:scaleX(1)} .nav-overlay-links a[aria-current="page"],.nav-overlay-links a[data-sect-active]{color:var(--sun)} /* Overlay children: the desktop dropdown has no touch affordance, so on the hamburger side the children are always-visible sub-links under their hub rather than a nested disclosure. */ .nav-overlay-links{overflow-y:auto} .nav-overlay-group{display:flex;flex-direction:column} .nav-overlay-sub{display:flex;flex-wrap:wrap;gap:4px 18px;padding:2px 0 10px} .nav-overlay-sub a{font-size:15px;font-weight:600;letter-spacing:0;color:#9db4cd;padding:5px 0} .nav-overlay-sub a::after{bottom:2px;height:2px} .nav-overlay-sub a:hover{color:#eaf2fa} .nav-overlay-foot{padding:24px 40px 40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .nav-overlay-foot .btn-sun{width:max-content} @media(prefers-reduced-motion:reduce){ .nav-overlay-links a{transition:none} } /* ───────────────────────── HERO / DECOR ───────────────────────── */ .deco-contour{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;opacity:.35} .deco-star{position:absolute;pointer-events:none;animation:spark-float 5s ease-in-out infinite} @keyframes spark-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(8deg)}} .deco-growthline{position:absolute;pointer-events:none} .ridge-divider{display:block;width:100%;height:clamp(40px,8vw,110px)} /* ------------------------- MOUNTAIN MOTIF ------------------------- The mark is mountains + arrow + north star, so these are the brand expressed as texture. All decorative: pointer-events:none, aria-hidden in markup, and they sit behind .z1 content. */ /* Repeating peak silhouette band — anchors a section's bottom edge. */ .tex-peaks{position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;z-index:0; background-repeat:repeat-x;background-position:bottom center;background-size:360px 140px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140'%3E%3Cpath d='M0 140 L64 54 L110 90 L176 22 L226 72 L286 36 L360 110 L360 140 Z' fill='none' stroke='%2314589f' stroke-opacity='.18' stroke-width='1.5'/%3E%3C/svg%3E")} .theme-dark .tex-peaks,.bg-navy .tex-peaks{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140'%3E%3Cpath d='M0 140 L64 54 L110 90 L176 22 L226 72 L286 36 L360 110 L360 140 Z' fill='none' stroke='%236cc6ea' stroke-opacity='.20' stroke-width='1.5'/%3E%3C/svg%3E")} /* Topographic rings — a summit seen from above. */ .tex-topo{position:absolute;inset:0;pointer-events:none;z-index:0; background-repeat:no-repeat;background-position:center;background-size:min(760px,90%) auto; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%2314589f' stroke-opacity='.12' stroke-width='1.5'%3E%3Cellipse cx='300' cy='300' rx='250' ry='190'/%3E%3Cellipse cx='300' cy='300' rx='198' ry='148'/%3E%3Cellipse cx='300' cy='300' rx='146' ry='108'/%3E%3Cellipse cx='300' cy='300' rx='94' ry='68'/%3E%3Cellipse cx='300' cy='300' rx='44' ry='30'/%3E%3C/g%3E%3C/svg%3E")} .theme-dark .tex-topo,.bg-navy .tex-topo{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%236cc6ea' stroke-opacity='.14' stroke-width='1.5'%3E%3Cellipse cx='300' cy='300' rx='250' ry='190'/%3E%3Cellipse cx='300' cy='300' rx='198' ry='148'/%3E%3Cellipse cx='300' cy='300' rx='146' ry='108'/%3E%3Cellipse cx='300' cy='300' rx='94' ry='68'/%3E%3Cellipse cx='300' cy='300' rx='44' ry='30'/%3E%3C/g%3E%3C/svg%3E")} /* Layered range — parallax-able silhouettes on a section floor. */ .deco-range{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;pointer-events:none;z-index:0} /* ───────────────────────── GHOST NUMERALS / OVERLAP / SPLIT-STICKY ───────────────────────── */ .sect-num{position:absolute;top:.2em;right:0;font-size:clamp(90px,14vw,220px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.10;pointer-events:none;z-index:0;letter-spacing:-.02em} .theme-dark .sect-num,.bg-navy .sect-num{color:#fff;opacity:.14} .overlap-up{position:relative;z-index:2;margin-top:-92px} .split-sticky{display:grid;grid-template-columns:.9fr 1.3fr;gap:64px;align-items:start} .split-sticky .sticky-panel{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px} @media(max-width:900px){ .split-sticky{grid-template-columns:1fr;gap:40px} .split-sticky .sticky-panel{position:static} } .split-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media(max-width:860px){.split-2{grid-template-columns:1fr;gap:36px}} /* ───────────────────────── PILLAR ROWS (build-rows pattern) ───────────────────────── */ .pillar-rows{display:flex;flex-direction:column} .pillar-row{position:relative;display:flex;align-items:flex-start;gap:var(--space-5);padding:28px 20px 28px 16px;border-bottom:1px solid var(--line-soft);border-radius:12px;transition:background-color .25s ease,transform .25s ease} .pillar-row:first-child{border-top:1px solid var(--line-soft)} /* The step numerals were a 15px transparent outline at 50% opacity — invisible on navy, and their 52px box left a phantom indent. Now a real display numeral that fills in on hover. */ /* Solid, not outlined. The old 15px transparent + text-stroke numeral was invisible on navy, and -webkit-text-stroke is unreliable with var() colours (the shorthand drops them to black). A solid numeral is legible and needs no vendor-prefixed paint. */ .pillar-row .num{flex:0 0 auto;width:auto;min-width:58px;font-size:34px;line-height:1;font-weight:900; font-variation-settings:"opsz" 60;letter-spacing:-.02em;color:var(--polaris);opacity:.85; transition:color .25s ease,opacity .25s ease,transform .25s ease} .theme-dark .pillar-row .num,.bg-navy .pillar-row .num{color:var(--sky-300)} .pillar-row:hover{background:rgba(14,156,213,.06);transform:translateX(4px)} .theme-dark .pillar-row:hover,.bg-navy .pillar-row:hover{background:rgba(255,255,255,.05)} .pillar-row:hover .num{color:var(--sun);opacity:1;transform:scale(1.04)} /* Rising accent rail — the three pillars read as a climb, not a list */ .pillar-row::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px; background:var(--sun);transform:scaleY(0);transform-origin:top;transition:transform .3s ease} .pillar-row:hover::before{transform:scaleY(1)} .theme-dark .pillar-row,.bg-navy .pillar-row{border-color:rgba(255,255,255,.15)} .pillar-row-body{display:flex;flex-direction:column;gap:6px} .pillar-row-body b{font-size:19px;font-weight:750} .pillar-row-body p{font-size:15px;line-height:1.55;color:var(--muted)} @media(prefers-reduced-motion:reduce){ .pillar-row,.pillar-row .num,.pillar-row::before{transition:none} .pillar-row:hover{transform:none} } /* ───────────────────────── CARDS ───────────────────────── */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)} .pain{display:flex;gap:14px;align-items:flex-start;padding:24px;border:1.5px solid var(--line-soft);border-radius:12px;background:var(--surface);transition:border-color .18s,box-shadow .18s,transform .18s} .pain:hover{border-color:var(--sky-300);box-shadow:0 14px 32px rgba(14,156,213,.12);transform:translateY(-3px)} .pain .icon{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;box-shadow:0 6px 16px rgba(4,16,31,.22)} .pain .icon svg{width:22px;height:22px} /* Distinct accent per pain point so the icons carry more visual interest (review note 3) — drawn from the brand palette. */ .pain-grid .pain:nth-child(1) .icon{background:var(--summit)} .pain-grid .pain:nth-child(2) .icon{background:var(--sky)} .pain-grid .pain:nth-child(3) .icon{background:var(--sun);color:var(--navy-950)} .pain-grid .pain:nth-child(4) .icon{background:var(--polaris)} .pain-body{display:flex;flex-direction:column;gap:5px} .pain-body b{font-size:16.5px;font-weight:750} .pain-body p{font-size:14.5px;line-height:1.5;color:var(--muted)} .pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} @media(max-width:560px){.pain-grid{grid-template-columns:1fr}} /* Reusable card grids — auto-fit is intentionally backstopped with an explicit single-column media query: some rendering environments do not reliably collapse minmax()-based auto-fit tracks at narrow container widths, which otherwise causes horizontal overflow on mobile. */ .card-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} .card-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} @media(max-width:680px){.card-grid-2{grid-template-columns:1fr}} @media(max-width:560px){.card-grid-3{grid-template-columns:1fr}} .case-card{display:flex;flex-direction:column;gap:16px;padding:34px 30px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--sky);border-radius:var(--r-md);box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease} /* Client logo at the top of each result card (review note 7). Fixed-height band with the logo left-aligned and vertically centred, so the client name and stat below share one baseline across all three cards even though the logos themselves have very different aspect ratios. */ .case-card .case-logo{height:50px;display:flex;align-items:center;justify-content:flex-start} .case-card .case-logo img{max-height:40px;max-width:100%;width:auto;object-fit:contain;object-position:left center} .case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .case-card .client{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-ink)} .case-card .count{font-size:44px;font-weight:900;letter-spacing:-.02em;color:var(--navy-900)} .case-card .result{font-size:16px;line-height:1.5;color:var(--ink);font-weight:550} .case-card .case-link{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--polaris);display:inline-flex;align-items:center;gap:6px} .case-card .case-link::after{content:"→";transition:transform .18s ease} .case-card:hover .case-link::after{transform:translateX(4px)} .industry-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--surface);border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease} .industry-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .industry-card .photo{position:relative;overflow:hidden;aspect-ratio:4/3} .industry-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .industry-card:hover .photo img{transform:scale(1.04)} .industry-card .photo::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(4,16,31,0) 40%,rgba(4,16,31,.55) 100%)} .industry-card .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:14px} .industry-card .body h3{font-size:24px;font-weight:800;position:relative;display:inline-block;width:max-content} .industry-card .body h3::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--sky);transform:scaleX(.28);transform-origin:left;transition:transform .3s ease} .industry-card:hover .body h3::after{transform:scaleX(1)} /* Service examples as plain, star-separated text — not tappable-looking pills (review note 6). */ .industry-card .svc-pills{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14.5px;font-weight:600;color:var(--granite)} .industry-card .svc-pills span{background:none;padding:0;border-radius:0} .industry-card .svc-pills span + span::before{content:"★";color:var(--sun);margin-right:10px;font-size:10px;vertical-align:2px} /* The explore link reads as a clear, clickable button (review note 6). */ .industry-card .card-link{align-self:flex-start;font-size:15px;font-weight:750;color:#fff;background:var(--summit); padding:12px 22px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:8px;margin-top:8px; box-shadow:0 8px 20px rgba(20,88,159,.22);transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease} .industry-card .card-link::after{content:"→";transition:transform .18s ease} .industry-card:hover .card-link{background:var(--polaris);box-shadow:0 12px 26px rgba(14,50,89,.28)} .industry-card:hover .card-link::after{transform:translateX(4px)} .cap-card{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .cap-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--sky-300)} .cap-card .icon{width:44px;height:44px;border-radius:11px;background:var(--ice);color:var(--polaris);display:flex;align-items:center;justify-content:center} .cap-card .icon svg{width:22px;height:22px} .cap-card h3{font-size:18px;font-weight:750} .cap-card p{font-size:14.5px;line-height:1.55;color:var(--muted)} .cap-card .cap-link{font-size:14px;font-weight:700;color:var(--polaris);margin-top:auto} .stat-tile{background:var(--surface);padding:30px 26px;display:flex;flex-direction:column;gap:6px} .stat-tile b{font-size:34px;font-weight:850;letter-spacing:-.02em;color:var(--navy-900)} .stat-tile b i{font-style:normal;color:var(--sky-ink)} .stat-tile span{font-size:14.5px;line-height:1.45;color:var(--muted);font-weight:550} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:3px solid var(--sky);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)} @media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}} /* ───────────────────────── MARQUEE ───────────────────────── */ .marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marquee-track{display:flex;align-items:center;gap:18px;width:max-content;animation:marquee-scroll 34s linear infinite} .marquee-track:hover{animation-play-state:paused} .marquee .client-logo{flex:0 0 auto;width:264px;height:140px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:22px 30px;box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease} .marquee .client-logo:hover{border-color:var(--line);box-shadow:var(--shadow-md);transform:translateY(-2px)} .marquee .client-logo img{max-height:88px;max-width:100%;width:auto;object-fit:contain;opacity:1;transition:opacity .2s ease} .marquee .client-logo:hover img{opacity:1} @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:640px){.marquee .client-logo{width:196px;height:106px;padding:16px 20px}.marquee .client-logo img{max-height:64px}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none;overflow-x:auto;flex-wrap:nowrap}} /* ───────────────────────── TICKER ───────────────────────── */ .ticker{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:9vw;font-weight:900;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--line);z-index:0;pointer-events:none;user-select:none;overflow:hidden} .ticker-track{display:inline-block;animation:ticker-drift 40s linear infinite} @keyframes ticker-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker{display:none}} /* ───────────────────────── FORM SYSTEM ───────────────────────── */ .form-card{background:var(--surface);border-radius:var(--r-md);border-top:4px solid var(--sky);padding:36px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:18px;color:var(--ink)} .form-card h3{font-size:22px;font-weight:800} .form-card .sub{font-size:14.5px;color:var(--muted);margin-top:-10px} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .f-field{display:flex;flex-direction:column;gap:6px} .f-field label{font-size:13.5px;font-weight:750} .f-field input,.f-field select,.f-field textarea{font-family:inherit;font-size:15.5px;color:var(--ink);padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;background:var(--mist);outline:none;transition:border-color .15s,box-shadow .15s;width:100%} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(14,156,213,.15)} .f-field textarea{resize:vertical;min-height:88px} .form-card .btn{width:100%;font-size:16.5px} .form-note{font-size:13px;color:var(--muted);text-align:center} .form-fields{display:flex;flex-direction:column;gap:18px} .form-fields[hidden]{display:none} .form-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 4px} .form-success[hidden]{display:none} .form-success-icon{width:52px;height:52px;border-radius:50%;background:var(--ice);color:var(--polaris);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin-bottom:6px} .form-success p{font-size:15px;line-height:1.55;color:var(--muted)} @media(max-width:900px){.f-row{grid-template-columns:1fr}} /* ───────────────────────── FAQ ───────────────────────── */ .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .15s} .faq-item[open]{box-shadow:0 12px 32px rgba(4,16,31,.08);border-color:var(--sky-300)} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:17px;font-weight:700;cursor:pointer;list-style:none;transition:background-color .15s} .faq-item summary:hover{background:var(--mist)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--ice);color:var(--polaris);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;transition:transform .2s} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item .a{padding:0 24px 22px;font-size:16px;line-height:1.65;color:var(--muted)} .faq-list{display:flex;flex-direction:column;gap:12px} /* ───────────────────────── FAB / BACK-TO-TOP ───────────────────────── */ .fab{position:fixed;right:24px;bottom:24px;z-index:60;opacity:0;transform:translateY(16px) scale(.94);pointer-events:none;transition:opacity .25s ease,transform .25s ease} .fab.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .fab .btn{padding:14px 22px;font-size:15px;box-shadow:0 14px 34px var(--sun-glow)} @media(max-width:640px){.fab{left:20px;right:20px;bottom:16px}.fab .btn{width:100%}} .back-to-top{position:fixed;left:24px;bottom:24px;z-index:60;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--polaris);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;box-shadow:var(--shadow-sm);opacity:0;transform:translateY(16px) scale(.94);pointer-events:none;transition:opacity .25s ease,transform .25s ease,border-color .2s ease} .back-to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .back-to-top:hover{border-color:var(--sky)} @media(max-width:640px){.back-to-top{left:16px;bottom:16px;width:40px;height:40px}} /* ───────────────────────── FOOTER ───────────────────────── */ .footer{background:linear-gradient(90deg,var(--sun),var(--sky)) top/100% 3px no-repeat,var(--navy-950);padding:64px 0 32px;color:#c4d4e5} .footer a{color:#9db4cd;font-size:14.5px;transition:color .15s} .footer a:hover{color:#fff} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px 28px;padding-bottom:40px} .footer-col{display:flex;flex-direction:column;gap:14px} .footer-col h4{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#eaf2fa;margin-bottom:2px} /* padding + reduced gap keeps the 27px visual pitch but lifts each link's tap target from 17px to 25px (WCAG 2.2 SC 2.5.8 outright, not via the spacing exception) */ .footer-col nav{display:flex;flex-direction:column;gap:2px} .footer-col nav a{padding:4px 0} .footer .brand img{height:32px;filter:brightness(0) invert(1)} .footer-tagline{font-size:14.5px;line-height:1.6;color:#9db4cd;max-width:32ch} .footer-social{display:flex;gap:14px;margin-top:4px} .footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center} .footer-social a:hover{border-color:var(--sky-300)} .footer-social svg{width:16px;height:16px} .footer-legal{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding-top:24px} .footer-legal span{font-size:13px;color:#6f8aa8} .footer-legal nav{display:flex;gap:22px} @media(max-width:1080px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:36px 28px}} @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr}} /* ───────────────────────── DASHBOARD ILLUSTRATION (platform teaser) ───────────────────────── */ .dash-chip{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s ease,transform .5s ease} .js .reveal.in .dash-chip{opacity:1;transform:none} .js .reveal.in .dash-chip:nth-of-type(2){transition-delay:.15s} .dash-line{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.1s ease} .js .reveal.in .dash-line{stroke-dashoffset:0} /* ───────────────────────── PATTERN LIBRARY ───────────────────────── Decorative fills. All are pointer-events:none and sit behind content; pair with .rel on the parent and .z1 on the content. */ .tex-dots{position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(currentColor 1px,transparent 1px); background-size:22px 22px;color:var(--polaris);opacity:.10} .theme-dark .tex-dots,.bg-navy .tex-dots{color:var(--sky-300);opacity:.14} .tex-diag{position:absolute;inset:0;pointer-events:none; background-image:repeating-linear-gradient(-45deg,currentColor 0 1px,transparent 1px 11px); color:var(--polaris);opacity:.07} .theme-dark .tex-diag,.bg-navy .tex-diag{color:var(--sky-300);opacity:.10} /* Soft brand orb — a cheap way to add depth behind a section */ .deco-orb{position:absolute;pointer-events:none;border-radius:50%;filter:blur(64px);opacity:.5;z-index:0} .deco-orb--sky{background:radial-gradient(circle,rgba(14,156,213,.5),transparent 70%)} .deco-orb--sun{background:radial-gradient(circle,rgba(33,178,235,.32),transparent 70%)} /* Edge-fade mask for horizontally scrolling strips */ .mask-x{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} /* ───────────────────────── SECTION DOT NAV ───────────────────────── Right-rail progress dots. Hidden under 1180px and for no-JS (the JS adds .ready once it has sections to track). */ .sect-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:70; display:none;flex-direction:column;gap:14px;opacity:0;transition:opacity .3s ease} .sect-nav.ready{opacity:1} @media(min-width:1180px){.sect-nav{display:flex}} .sect-nav a{position:relative;width:10px;height:10px;border-radius:50%; background:var(--line);border:1.5px solid transparent;transition:transform .2s ease,background-color .2s ease} .bg-navy .sect-nav a{background:rgba(255,255,255,.3)} .sect-nav a::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px); white-space:nowrap;font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase; background:var(--navy-950);color:#fff;padding:5px 10px;border-radius:6px; opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease} .sect-nav a:hover::after,.sect-nav a:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)} .sect-nav a:hover{transform:scale(1.35);background:var(--sky)} .sect-nav a.current{background:var(--sun);transform:scale(1.3);box-shadow:0 0 0 4px var(--sun-glow)} /* ───────────────────────── CURSOR SPOTLIGHT ───────────────────────── A soft brand glow that tracks the pointer across dark sections. Driven by --mx/--my custom props from one rAF-throttled listener. Fine pointers only (never fires on touch) and killed under reduced-motion. */ .spot{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(14,156,213,.16),transparent 70%)} @media(hover:hover) and (pointer:fine){.spot-host:hover .spot{opacity:1}} /* ───────────────────────── COMPARISON TABLE ───────────────────────── */ .vs{display:grid;grid-template-columns:1.3fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .vs>div{padding:18px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;font-size:15px} .vs .vs-h{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--mist);color:var(--muted)} .vs .vs-h--veltio{background:var(--navy-950);color:#fff} .vs .vs-h--veltio span{color:var(--sun)} .vs-row{font-weight:650;color:var(--ink)} .vs-cell{justify-content:center;color:var(--muted);font-size:14px;text-align:center} .vs-cell--veltio{background:rgba(33,178,235,.06);font-weight:700;color:var(--ink)} .vs-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800} .vs-mark--yes{background:var(--ice);color:var(--polaris)} .vs-mark--no{background:#f4e6e2;color:#9c3a1c} /* darkened from #b4472a: was 4.45:1, just under AA for 12px text */ .vs>div:nth-last-child(-n+3){border-bottom:0} @media(max-width:760px){ .vs{grid-template-columns:1fr} .vs .vs-h:first-child{display:none} .vs>div{border-bottom:1px solid var(--line-soft)} .vs-row{background:var(--mist);font-weight:800} .vs-cell{justify-content:flex-start;text-align:left} .vs-cell::before{content:attr(data-label);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--summit);margin-right:8px} } /* ───────────────────────── TABS ───────────────────────── */ .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .tab{font-family:inherit;font-size:14.5px;font-weight:750;padding:11px 20px;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);color:#c4d4e5; transition:background-color .18s,border-color .18s,color .18s,transform .18s} .tab:hover{transform:translateY(-2px);border-color:var(--sky-300)} .tab[aria-selected="true"]{background:var(--sun);border-color:var(--sun);color:var(--navy-950)} .tabpanel[hidden]{display:none} .tabpanel{animation:tab-in .35s ease} @keyframes tab-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ───────────────────────── MOTION: REVEAL SYSTEM ───────────────────────── */ .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .js .reveal.in{opacity:1;transform:none} .js .reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .6s ease} .js .reveal-left.in{opacity:1;transform:none} .js .reveal-right{opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease} .js .reveal-right.in{opacity:1;transform:none} .js .reveal-scale{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s ease} .js .reveal-scale.in{opacity:1;transform:none} .js .reveal-clip{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .6s ease,clip-path .6s ease} .js .reveal-clip.in{opacity:1;clip-path:inset(0 0 0% 0)} /* Kinetic hero type */ .kt-line{display:block;overflow:hidden;padding-bottom:.28em;margin-bottom:-.28em} /* .js-gated like .reveal: an ungated opacity:0 here leaves the hero H1 permanently invisible when JS is off (nothing ever adds .kt-in). */ .kt-word{display:inline-block} .js .kt-word{opacity:0;transform:translateY(100%);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .js .kt-in .kt-word{opacity:1;transform:none} .kt-em{font-style:normal;color:var(--sun);font-variation-settings:'wght' 500;transition:font-variation-settings .9s ease} .js .kt-in .kt-em{font-variation-settings:'wght' 720} /* Count-up target (final value already in markup for no-JS/SEO) */ .count{font-variant-numeric:tabular-nums} /* ───────────────────────── CASE STUDY PAGES ───────────────────────── Shared by the four /results// pages. Lives here rather than in four page-scoped