:root {
  --ink: #08070d;
  --ink-soft: #121019;
  --paper: #f7f7fb;
  --white: #ffffff;
  --violet: #6814ef;
  --violet-bright: #8b2cf5;
  --magenta: #d20cff;
  --cyan: #00bafc;
  --lime: #9afc72;
  --muted: #a7a3b1;
  --line: rgba(255,255,255,.11);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; overflow-x: hidden; background: var(--ink); color: var(--white); font-family: Inter, Arial, sans-serif; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--violet); color: #fff; }

/* Header, mega menu and footer now come from css/shell.css. */
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg,#000,transparent 82%); pointer-events: none; }

.ai-hero { position: relative; min-height: 920px; padding: 176px max(5vw,34px) 100px; display: grid; grid-template-columns: minmax(0,1fr) minmax(560px,.92fr); align-items: center; gap: clamp(50px,6vw,105px); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 82% 38%,rgba(66,10,156,.32),transparent 25%), linear-gradient(135deg,#09080e 0%,#0e0c16 48%,#07070b 100%); }
.ai-hero:after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 220px; background: linear-gradient(transparent,#08070d); }
.hero-grid { z-index: -3; opacity: .55; mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.18)); }
.hero-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero-glow-one { width: 360px; height: 360px; left: -180px; top: 250px; background: rgba(0,186,252,.12); }
.hero-glow-two { width: 500px; height: 500px; right: -280px; bottom: -120px; background: rgba(210,12,255,.14); }
.hero-copy { position: relative; z-index: 4; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; color: #c8c3cf; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.eyebrow i { width: 43px; height: 2px; background: linear-gradient(90deg,var(--cyan),var(--magenta)); }
.hero-copy h1 { margin: 0; font: 800 clamp(63px,7vw,112px)/.9 Poppins, sans-serif; letter-spacing: -.072em; }
/* The gradient is painted into the element's own box and then clipped to the
   glyphs, so anything the box does not cover simply is not painted. This span is
   an inline-block, so its box is line-height tall — and the heading runs at a
   line-height below 1. The "g" in "moving." drops 24px below the baseline while
   the box only reached 11.8px past it, so its tail was cut clean off. The
   padding gives the box room to paint into; the negative margin takes the same
   amount back out of the layout, so nothing below the heading shifts. */
.hero-copy h1 span { display: inline-block; padding-bottom: .16em; margin-bottom: -.16em; color: transparent; background: linear-gradient(90deg,#fff 5%,#9e65ff 53%,#00bafc 108%); background-clip: text; }
.hero-intro { max-width: 690px; margin: 35px 0 0; color: #bbb7c3; font-size: clamp(16px,1.45vw,20px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 40px; }
.button { height: 60px; padding: 0 24px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; font: 600 11px Poppins, sans-serif; transition: transform .25s, box-shadow .25s, border-color .25s; }
.button-primary { background: linear-gradient(135deg,#5d0de2,#981cf4); color:#fff; box-shadow: inset 0 1px rgba(255,255,255,.2),0 18px 35px rgba(91,15,206,.27); }
.button-primary span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.button-primary:hover { transform: translateY(-3px); box-shadow: inset 0 1px rgba(255,255,255,.25),0 24px 43px rgba(91,15,206,.37); }
.button-ghost { padding-inline: 11px; color: #d2ced8; }
.button-ghost:hover { color: #fff; }
.play-small { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: var(--cyan); font-size: 9px; font-style: normal; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0; margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); }
.hero-proof span { padding: 0 22px; color: #847f8d; font-size: 10px; letter-spacing: .02em; }
.hero-proof span:first-child { padding-left: 0; }
.hero-proof span + span { border-left: 1px solid rgba(255,255,255,.11); }
.hero-proof b { margin-right: 5px; color: #fff; font: 700 15px Poppins, sans-serif; }

.hero-system { position: relative; min-height: 640px; display: grid; place-items: center; perspective: 1200px; }
.system-orbit { position: absolute; border: 1px solid rgba(139,44,245,.24); border-radius: 50%; animation: spin 24s linear infinite; }
.system-orbit:after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.orbit-one { width: 590px; height: 590px; transform: rotateX(66deg) rotateZ(18deg); }
.orbit-one:after { left: 61px; top: 76px; }.orbit-two { width: 470px; height: 470px; border-color: rgba(0,186,252,.17); animation-direction: reverse; }
.orbit-two:after { right: 52px; bottom: 67px; background: var(--magenta); box-shadow: 0 0 20px var(--magenta); }
.command-panel { position: relative; z-index: 4; width: min(100%,560px); padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 31px; background: linear-gradient(145deg,rgba(27,23,38,.95),rgba(10,9,16,.98)); box-shadow: 0 45px 120px rgba(0,0,0,.55),0 0 90px rgba(94,23,224,.13); transform: rotateY(-5deg) rotateX(2deg); }
.command-panel:before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(135deg,rgba(0,186,252,.45),transparent 28%,transparent 65%,rgba(210,12,255,.35)); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; }
.command-top { height: 48px; padding: 0 9px 0 13px; display: flex; align-items: center; justify-content: space-between; color: #85808f; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.command-top div { display: flex; align-items: center; gap: 9px; }
.command-top > span { font: 700 8px Poppins, sans-serif; letter-spacing: .14em; color: #fff; }.command-top > span span { color: #9d5cff; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 1.6s infinite; }
.command-message { min-height: 155px; padding: 24px; border-radius: 22px; display: grid; grid-template-columns: 48px 1fr; gap: 15px; background: radial-gradient(circle at 100% 0,rgba(104,20,239,.18),transparent 45%),#12101a; border: 1px solid rgba(255,255,255,.07); }
.avatar { width: 45px; height: 45px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; background: #0d0b13; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.avatar img { width: 60px; height: 68px; object-fit: contain; }
.command-message small { color: #8d8796; font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.command-message p { margin: 9px 0 0; color: #f2eff6; font-size: 13px; line-height: 1.65; }
.command-workflow { margin-top: 11px; padding: 19px 20px 14px; border-radius: 22px; background: #0e0c14; border: 1px solid rgba(255,255,255,.07); }
.workflow-head { display: flex; justify-content: space-between; margin-bottom: 12px; color: #736e7d; font-size: 7px; font-weight: 700; letter-spacing: .15em; }
.workflow-head b { color: var(--lime); font-size: 7px; }
.workflow-row { min-height: 55px; padding: 8px 6px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; color: #686472; border-top: 1px solid rgba(255,255,255,.06); transition: .35s; }
.workflow-row > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; font-size: 7px; }
.workflow-row strong { font: 500 10px Poppins, sans-serif; }.workflow-row small { font-size: 7px; }
.workflow-row.active { color: #fff; transform: translateX(4px); }.workflow-row.active > span { border-color: var(--violet-bright); background: rgba(104,20,239,.3); box-shadow: 0 0 22px rgba(104,20,239,.25); }.workflow-row.active small { color: var(--cyan); }
.workflow-row.complete { color: #a7a2b0; }.workflow-row.complete > span { color: #07100a; border-color: var(--lime); background: var(--lime); }.workflow-row.complete small { color: var(--lime); }
.command-foot { min-height: 52px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; }
.command-foot p { margin: 0; color: #6d6876; font-size: 8px; }
.pulse-bars { height: 18px; display: flex; align-items: center; gap: 3px; }.pulse-bars i { width: 2px; height: 40%; background: var(--cyan); animation: sound .9s ease-in-out infinite alternate; }.pulse-bars i:nth-child(2){animation-delay:-.2s}.pulse-bars i:nth-child(3){animation-delay:-.4s}.pulse-bars i:nth-child(4){animation-delay:-.6s}.pulse-bars i:nth-child(5){animation-delay:-.8s}
.signal-card { position: absolute; z-index: 6; min-width: 180px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; display: grid; grid-template-columns: 8px 1fr; gap: 8px 10px; align-items: center; background: rgba(16,14,23,.86); backdrop-filter: blur(15px); color: #817b8b; font-size: 7px; font-weight: 700; letter-spacing: .12em; box-shadow: 0 20px 50px rgba(0,0,0,.27); animation: float 5s ease-in-out infinite; }
.signal-card i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }.signal-card b { grid-column: 2; color: #fff; font: 600 13px Poppins, sans-serif; letter-spacing: 0; }
.signal-card-one { left: -6%; top: 13%; }.signal-card-two { right: -5%; bottom: 12%; animation-delay: -2.5s; }.signal-card-two i { background: var(--lime); box-shadow: 0 0 12px var(--lime); }

.ticker { position: relative; z-index: 8; height: 62px; overflow: hidden; display: flex; align-items: center; background: #fff; color: #121019; transform: rotate(-1deg) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.ticker-track { width:max-content;display:flex;animation:marquee 45s linear infinite;will-change:transform; }
.ticker-group { flex:none;display:flex;align-items:center; }
.ticker span { white-space: nowrap; padding: 0 25px; font: 700 11px Poppins, sans-serif; letter-spacing: .11em; }.ticker b { margin-left: 38px; color: var(--violet); }
.light-section { color: #0c0b12; background: var(--paper); }
.section-kicker { display: flex; align-items: center; gap: 12px; color: #777282; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.section-kicker span { min-width: 31px; height: 31px; padding: 0 7px; border: 1px solid #d9d7e1; border-radius: 9px; display: grid; place-items: center; color: #1a1720; font-size: 7px; }
.dark-kicker { color: #8c8795; }.dark-kicker span { color: #fff; border-color: rgba(255,255,255,.13); }
.split-heading { margin-top: 33px; display: grid; grid-template-columns: 1.28fr .72fr; align-items: end; gap: 7vw; }
.split-heading h2,.products-heading h2,.video-copy h2,.outcomes-copy h2,.how-heading h2,.industry-copy h2,.contact-copy h2 { margin: 0; font: 700 clamp(49px,5.8vw,84px)/.98 Poppins,sans-serif; letter-spacing: -.06em; }
.split-heading h2 em,.products-heading h2 em,.video-copy h2 em,.outcomes-copy h2 em,.how-heading h2 em,.industry-copy h2 em,.contact-copy h2 em { font-style: normal; color: transparent; background: linear-gradient(90deg,#6f20e9,#9a2ff5 58%,#00a9e8); background-clip: text; }
.split-heading p { margin: 0 0 25px; color: #6c6875; font-size: 15px; line-height: 1.8; }.split-heading a { display: inline-flex; align-items: center; gap: 18px; color: #16131c; font: 600 10px Poppins,sans-serif; }.split-heading a span { width: 33px; height: 33px; border: 1px solid #d6d4df; border-radius: 50%; display: grid; place-items: center; }

.workforce-intro { padding: 135px max(5vw,34px) 150px; }
.workforce-map { position: relative; min-height: 410px; margin-top: 95px; display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.workforce-map article { position: relative; z-index: 2; min-height: 330px; padding: 28px 25px; border: 1px solid #e0dee7; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 20px 50px rgba(21,14,42,.05); transition: transform .35s,box-shadow .35s; }
.workforce-map article:hover { transform: translateY(-9px); box-shadow: 0 28px 65px rgba(21,14,42,.11); }.workforce-map article:nth-of-type(2),.workforce-map article:nth-of-type(4) { margin-top: 46px; }
.workforce-map article > span { position: absolute; right: 24px; top: 23px; color: #bbb7c3; font-size: 8px; font-weight: 700; }.workforce-map article small { color: #7a27eb; font-size: 8px; font-weight: 700; letter-spacing: .14em; }.workforce-map h3 { margin: 85px 0 15px; font: 700 25px/1.12 Poppins,sans-serif; letter-spacing: -.045em; }.workforce-map article p { margin: 0; color: #716d7a; font-size: 12px; line-height: 1.7; }
.map-line { position: absolute; left: 7%; right: 7%; top: 49%; height: 1px; background: linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta)); }.map-line:after { content:""; position:absolute; width:12px;height:12px;border-radius:50%;top:-6px;left:0;background:var(--cyan);box-shadow:0 0 23px var(--cyan);animation:travel 7s linear infinite; }
.map-core { position: absolute; z-index: 5; width: 74px; height: 74px; left: 50%; top: 49%; transform: translate(-50%,-50%); border-radius: 24px; display: grid; place-items: center; background: #0d0b13; box-shadow: 0 15px 45px rgba(61,12,146,.35); overflow: hidden; }.map-core img { width: 92px; height: 105px; object-fit: contain; }

/* The copy column carries a two-line heading ("Show the story." /
   "Do not over-explain it.", split by the <br> in the markup). At .65fr it was
   too narrow to hold either line, so the heading broke across four or five
   lines and hyphenated mid-word. The split below keeps the video the larger
   element while giving the heading room; the matching size is set on
   .video-copy h2 in the Typography alignment block at the end of this file.
   Below 1050px the section already stacks (see the media block further down),
   and the heading gets the full column. */
.video-section { position: relative; padding: 145px max(5vw,34px); display: grid; grid-template-columns: .9fr 1.1fr; column-gap: clamp(36px,3.4vw,64px); row-gap: 50px; align-items: center; background: radial-gradient(circle at 80% 42%,rgba(91,21,208,.18),transparent 27%),#09080e; }
/* Size lives in the Typography alignment block at the end of this file, which
   is where all the section headings are set. */
.video-copy h2 { margin-top: 28px; }.video-copy p { margin: 27px 0 0; color: #aaa6b2; font-size: 14px; line-height: 1.8; }.video-notes { margin-top: 36px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.1); }.video-notes span { padding: 20px 9px 0; color: #77717f; font-size: 8px; letter-spacing: .07em; }.video-notes span:first-child { padding-left: 0; }.video-notes b { display: block; margin-bottom: 8px; color: #fff; font-size: 8px; }
.video-stage { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 30px; background: #0b0910; box-shadow: 0 45px 90px rgba(0,0,0,.45); }.video-stage:before { content:""; position:absolute; z-index:4; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); pointer-events:none; }.video-stage video { width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.64); }.video-stage.playing video { animation:filmZoom 12s ease-in-out infinite alternate; filter:saturate(1.05) brightness(.53); }.video-shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,10,.45),transparent 50%),linear-gradient(0deg,rgba(6,5,10,.65),transparent 50%);pointer-events:none; }.video-badge { position:absolute;left:25px;top:23px;padding:10px 13px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(8,7,13,.55);backdrop-filter:blur(10px);color:#b0abb8;font-size:7px;font-weight:700;letter-spacing:.13em; }.video-badge i { display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#f12556;box-shadow:0 0 10px #f12556; }.video-play { position:absolute;z-index:5;left:50%;top:50%;width:84px;height:84px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:rgba(8,7,13,.38);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:.35s; }.video-play:hover { transform:translate(-50%,-50%) scale(1.08);background:rgba(104,20,239,.65); }.video-play span { width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6814ef;font-size:14px; }/* Sits on top of the video, so it needs its own light colour. The section was
   later flipped to a light theme (.video-section{color:#111019}); without this
   the headline inherited near-black and disappeared into the dark poster. */
.video-title { position:absolute;z-index:3;left:28px;bottom:33px;color:#fff; }.video-title small { color:#b0abb8;font-size:7px;font-weight:700;letter-spacing:.15em; }.video-title strong { display:block;margin-top:10px;font:600 clamp(19px,2.2vw,34px)/1.15 Poppins,sans-serif;letter-spacing:-.04em; }.video-progress { position:absolute;z-index:4;left:28px;right:28px;bottom:16px;height:2px;background:rgba(255,255,255,.18); }.video-progress i { display:block;width:22%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta)); }.video-stage.playing .video-progress i { animation:progress 12s linear infinite; }.film-overlay { position:absolute;z-index:4;inset:0;pointer-events:none; }.film-line { position:absolute;left:50%;top:50%;width:90%;text-align:center;transform:translate(-50%,-50%);opacity:0;font:700 clamp(25px,4.2vw,65px)/1 Poppins,sans-serif;letter-spacing:-.055em;text-shadow:0 5px 35px #000; }.playing .film-line { animation:filmText 12s both infinite; }.playing .line-two { animation-delay:4s; }.playing .line-three { animation-delay:8s; }.playing .video-title,.playing .video-play { opacity:0; }.playing:hover .video-play { opacity:1; }

.video-stage.playing .video-progress i { animation-duration:18s;animation-iteration-count:1; }.playing .video-title,.playing .video-badge { opacity:0; }.playing .video-play { opacity:0; }.playing:hover .video-play { opacity:1; }
.products-section { padding: 145px max(5vw,34px); background: #0c0b12; }.products-heading { margin-top: 30px;display:flex;align-items:end;justify-content:space-between;gap:60px; }.products-heading h2 { font-size:clamp(49px,5.6vw,82px); }.products-heading p { max-width:400px;margin:0 0 8px;color:#9893a1;font-size:14px;line-height:1.75; }.product-tabs { margin-top:70px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1); }.product-tabs button { min-height:92px;padding:15px 17px;border:0;border-right:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;background:transparent;color:#77717f;text-align:left;font:600 10px Poppins,sans-serif;cursor:pointer;transition:.3s; }.product-tabs button span { color:#5c5764;font:700 7px Inter,sans-serif; }.product-tabs button i { color:#514c59;font-style:normal; }.product-tabs button:hover,.product-tabs button.active { color:#fff;background:linear-gradient(135deg,rgba(104,20,239,.3),rgba(255,255,255,.03)); }.product-tabs button.active span,.product-tabs button.active i { color:var(--cyan); }
.product-display { min-height:610px;margin-top:40px;padding:55px;display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw;align-items:center;border:1px solid rgba(255,255,255,.09);border-radius:31px;background:radial-gradient(circle at 90% 15%,rgba(101,24,218,.16),transparent 28%),#0f0d16;overflow:hidden; }.product-copy { animation:productIn .5s both; }.product-copy > small { color:var(--cyan);font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }.product-copy h3 { margin:18px 0 18px;font:700 clamp(30px,3.3vw,49px)/1.07 Poppins,sans-serif;letter-spacing:-.055em; }.product-copy > p { margin:0;color:#aaa6b2;font-size:14px;line-height:1.78; }.product-copy ul { margin:28px 0 35px;padding:0;list-style:none; }.product-copy li { padding:11px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px;color:#d4d0d9;font-size:10px; }.product-copy li span { width:21px;height:21px;border-radius:7px;display:grid;place-items:center;background:rgba(154,252,114,.12);color:var(--lime);font-size:8px; }
.product-ui { position:relative;min-height:475px;padding:17px;border:1px solid rgba(255,255,255,.12);border-radius:27px;background:linear-gradient(145deg,#191621,#09080e);box-shadow:0 35px 75px rgba(0,0,0,.4);animation:productIn .55s both; }.product-ui-top { height:45px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;color:#77717f;font-size:7px;font-weight:700;letter-spacing:.13em; }.product-ui-top>span { display:flex;align-items:center;gap:8px; }.product-ui-top i { width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 11px var(--lime); }.product-ui-top b { color:#fff;font:700 7px Poppins,sans-serif;letter-spacing:.12em; }.product-ui-top b span { color:#9c53fc; }.ui-canvas { position:relative;min-height:355px;padding:27px;border:1px solid rgba(255,255,255,.07);border-radius:21px;background:radial-gradient(circle at 90% 0,rgba(104,20,239,.18),transparent 38%),#0e0c14;overflow:hidden; }.product-stat { position:absolute;right:-16px;bottom:-21px;min-width:185px;padding:16px 18px;border:1px solid rgba(255,255,255,.13);border-radius:18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:rgba(19,16,28,.9);backdrop-filter:blur(16px);box-shadow:0 20px 45px rgba(0,0,0,.3); }.product-stat strong { font:700 23px Poppins,sans-serif; }.product-stat span { max-width:70px;color:#77717f;font-size:7px;line-height:1.4;text-transform:uppercase;letter-spacing:.08em; }.product-stat i { color:var(--lime);font-style:normal; }
.ui-message { max-width:80%;padding:14px 16px;border-radius:17px;font-size:10px;line-height:1.6; }.ui-message.customer { margin-left:auto;background:#fff;color:#211d28;border-bottom-right-radius:5px; }.ui-message.agent { margin-top:20px;display:grid;grid-template-columns:37px 1fr;gap:10px;background:#1b1724;border-bottom-left-radius:5px; }.ui-message.agent img { width:37px;height:42px;object-fit:contain; }.ui-message.agent p { margin:0; }.ui-action { position:absolute;left:27px;right:27px;bottom:27px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:15px;display:grid;grid-template-columns:1fr auto;gap:6px;background:rgba(255,255,255,.035); }.ui-action small { grid-column:1/-1;color:#77717f;font-size:6px;letter-spacing:.14em; }.ui-action b { font:600 11px Poppins,sans-serif; }.ui-action span { color:var(--cyan);font-size:7px; }
.voice-orb { position:relative;width:155px;height:155px;margin:10px auto 20px;border:1px solid rgba(139,44,245,.3);border-radius:50%;display:grid;place-items:center; }.voice-orb:before,.voice-orb:after,.voice-orb i { content:"";position:absolute;border:1px solid rgba(0,186,252,.16);border-radius:50%;animation:voicePulse 2.2s ease-out infinite; }.voice-orb:before { inset:18px; }.voice-orb:after { inset:-18px;animation-delay:-.7s; }.voice-orb i { inset:-38px;animation-delay:-1.3s; }.voice-orb span { width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6214e4,#b527f4);font:700 20px Poppins,sans-serif;box-shadow:0 0 45px rgba(109,31,238,.4); }.voice-call { text-align:center; }.voice-call small { color:#716c79;font-size:6px;letter-spacing:.14em; }.voice-call strong { display:block;margin-top:8px;font:600 15px Poppins,sans-serif; }.voice-wave { height:31px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:4px; }.voice-wave i { width:2px;height:30%;background:var(--cyan);animation:sound .8s ease-in-out infinite alternate; }.voice-wave i:nth-child(3n){height:90%;animation-delay:-.3s}.voice-wave i:nth-child(2n){height:55%;animation-delay:-.6s}
.inbox-list { width:48%;display:flex;flex-direction:column;gap:8px; }.inbox-list>span { min-height:70px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;display:grid;grid-template-columns:34px 1fr;gap:3px 10px;align-items:center;background:rgba(255,255,255,.025); }.inbox-list>span.active { border-color:rgba(134,43,243,.55);background:rgba(104,20,239,.14); }.inbox-list i { grid-row:1/3;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#211b2c;color:var(--cyan);font:700 7px Inter,sans-serif;font-style:normal; }.inbox-list b { font:600 10px Poppins,sans-serif; }.inbox-list small { color:#77717f;font-size:7px; }.inbox-detail { position:absolute;left:53%;right:23px;top:27px;bottom:27px;padding:25px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:#13101b; }.inbox-detail small { color:var(--lime);font-size:6px;letter-spacing:.12em; }.inbox-detail h4 { margin:35px 0 10px;font:600 21px Poppins,sans-serif; }.inbox-detail p { margin:0;color:#918c99;font-size:9px;line-height:1.7; }.inbox-detail>b { position:absolute;left:25px;bottom:25px;color:var(--cyan);font:600 8px Poppins,sans-serif; }
.lead-score { display:flex;align-items:center;gap:17px; }.lead-score>span { width:82px;height:82px;border:6px solid #7821ec;border-right-color:var(--cyan);border-radius:50%;display:grid;place-items:center;font:700 24px Poppins,sans-serif; }.lead-score small { display:block;color:#77717f;font-size:6px;letter-spacing:.13em; }.lead-score b { display:block;margin-top:5px;font:600 15px Poppins,sans-serif; }.pipeline { margin-top:25px; }.pipeline>span { position:relative;margin-top:9px;padding:14px 15px;display:grid;grid-template-columns:1fr auto;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:13px;color:#aaa6b2;font-size:8px; }.pipeline i { position:absolute;z-index:-1;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(104,20,239,.34),rgba(0,186,252,.07)); }.pipeline b { color:#fff; }
.rating-card { padding:24px;display:flex;align-items:center;gap:19px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03); }.rating-card>span { font:700 53px Poppins,sans-serif;letter-spacing:-.06em; }.rating-card b { display:block;color:#f7c84f;letter-spacing:.15em; }.rating-card small { display:block;margin-top:7px;color:#77717f;font-size:6px;letter-spacing:.15em; }.review-card { margin-top:16px;padding:25px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#15121d; }.review-card>small { color:#77717f;font-size:6px;letter-spacing:.13em; }.review-card p { margin:20px 0;color:#e1dde6;font:500 13px/1.7 Poppins,sans-serif; }.review-card>span { padding-top:15px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;color:var(--lime);font-size:7px; }.review-card>span b { color:var(--cyan); }

.outcomes-section { min-height:900px;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);color:#0c0b12; }.outcomes-image { position:relative;overflow:hidden;min-height:800px;background:#0c0b12; }.outcomes-image:after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(8,7,13,.62)),linear-gradient(0deg,rgba(8,7,13,.45),transparent 50%); }.outcomes-image>img { width:100%;height:100%;object-fit:cover;filter:contrast(1.08) brightness(.73); }.image-scan { position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);box-shadow:0 0 24px var(--cyan);animation:scan 6s ease-in-out infinite; }/* Sits on the dark photo, so it needs its own light colour — same trap the
   video headline was in. The section was later flipped to a light theme
   (.outcomes-section{color:#0c0b12}), and the "360" had no colour of its own,
   so it inherited near-black onto a near-black badge and vanished. The small
   print beside it was unaffected because it already set its own colour. */
.outcomes-stamp { position:absolute;z-index:3;right:35px;bottom:35px;width:155px;height:155px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:9px;background:rgba(8,7,13,.55);backdrop-filter:blur(12px);color:#fff; }.outcomes-stamp span { font:700 30px Poppins,sans-serif; }.outcomes-stamp small { color:#aaa6b2;font-size:6px;line-height:1.4;letter-spacing:.12em; }.outcomes-copy { padding:135px clamp(40px,7vw,115px);display:flex;flex-direction:column;justify-content:center; }.outcomes-copy h2 { margin-top:30px;font-size:clamp(49px,5.3vw,80px); }.outcomes-copy>p { margin:30px 0 35px;color:#6d6876;font-size:14px;line-height:1.85; }.outcome-list>div { padding:20px 0 20px 47px;border-top:1px solid #dedce5;position:relative; }.outcome-list>div>span { position:absolute;left:0;top:23px;color:#8c32ed;font-size:7px;font-weight:700; }.outcome-list h3 { margin:0;font:600 15px Poppins,sans-serif; }.outcome-list p { margin:7px 0 0;color:#777280;font-size:10px;line-height:1.65; }

.how-section { padding:145px max(5vw,34px);background:#09080e; }.how-heading { margin-top:30px;display:flex;align-items:end;justify-content:space-between;gap:80px; }.how-heading h2 { font-size:clamp(50px,5.6vw,84px); }.how-heading p { max-width:430px;margin:0 0 10px;color:#9a95a2;font-size:14px;line-height:1.8; }.how-grid { margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr); }.how-grid article { position:relative;min-height:390px;padding:28px;border:1px solid rgba(255,255,255,.09);margin-right:-1px;background:rgba(255,255,255,.018);transition:.35s; }.how-grid article:first-child { border-radius:25px 0 0 25px; }.how-grid article:last-child { border-radius:0 25px 25px 0; }.how-grid article:hover { z-index:2;transform:translateY(-8px);border-color:rgba(130,38,241,.55);background:linear-gradient(145deg,rgba(104,20,239,.22),rgba(255,255,255,.02)); }.how-grid article>span { position:absolute;right:25px;top:24px;color:#5e5966;font-size:8px;font-weight:700; }.how-grid article small { color:var(--cyan);font-size:7px;font-weight:700;letter-spacing:.15em; }.how-grid h3 { margin:85px 0 18px;font:600 23px/1.15 Poppins,sans-serif;letter-spacing:-.045em; }.how-grid p { margin:0;color:#8d8895;font-size:11px;line-height:1.75; }.how-grid article>i { position:absolute;left:28px;bottom:26px;padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:#625d6a;font-size:6px;font-weight:700;letter-spacing:.12em;font-style:normal; }

.industry-section { padding:145px max(5vw,34px);display:grid;grid-template-columns:.73fr 1.27fr;gap:8vw;background:#f5f4f8;color:#0c0b12; }.industry-copy { position:sticky;top:140px;align-self:start; }.industry-copy h2 { margin-top:30px;font-size:clamp(48px,5vw,76px); }.industry-copy p { margin:28px 0 0;color:#6f6a77;font-size:14px;line-height:1.8; }.industry-list { border-top:1px solid #d7d5df; }.industry-list>div { min-height:105px;padding:0 15px;display:grid;grid-template-columns:50px 1fr 210px 32px;gap:20px;align-items:center;border-bottom:1px solid #d7d5df;transition:.3s; }.industry-list>div:hover { padding-left:27px;background:#fff;box-shadow:0 18px 45px rgba(24,16,43,.07); }.industry-list span { color:#9334ed;font-size:7px;font-weight:700; }.industry-list strong { font:600 clamp(15px,1.7vw,24px) Poppins,sans-serif;letter-spacing:-.025em; }.industry-list small { color:#7d7884;font-size:7px;letter-spacing:.08em; }.industry-list b { width:32px;height:32px;border:1px solid #d8d5df;border-radius:50%;display:grid;place-items:center;color:#7a27eb;font-size:10px; }

.contact-section { position:relative;padding:140px max(5vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;overflow:hidden;background:radial-gradient(circle at 12% 90%,rgba(0,186,252,.12),transparent 28%),radial-gradient(circle at 89% 14%,rgba(126,24,234,.28),transparent 25%),#09080e; }.contact-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent); }.contact-copy,.contact-form { position:relative;z-index:2; }.contact-copy h2 { margin-top:30px;font-size:clamp(49px,5.6vw,84px); }.contact-copy>p { max-width:650px;margin:28px 0 0;color:#a6a1ad;font-size:15px;line-height:1.8; }.contact-proof { margin-top:35px;padding-top:23px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:22px; }.contact-proof span { color:#817b89;font-size:8px;letter-spacing:.08em; }.contact-proof span:before { content:"✓";margin-right:8px;color:var(--lime); }
.contact-form { padding:32px;border:1px solid rgba(255,255,255,.13);border-radius:29px;display:grid;grid-template-columns:1fr 1fr;gap:17px;background:rgba(17,14,24,.82);backdrop-filter:blur(18px);box-shadow:0 35px 85px rgba(0,0,0,.35); }.form-head { grid-column:1/-1;padding-bottom:19px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:#7e7987;font-size:7px;font-weight:700;letter-spacing:.14em; }.contact-form label { color:#817c89;font-size:7px;font-weight:700;letter-spacing:.1em; }.contact-form label:nth-of-type(4) { grid-column:1/-1; }.contact-form input,.contact-form select { width:100%;height:54px;margin-top:8px;padding:0 15px;border:1px solid rgba(255,255,255,.11);border-radius:12px;outline:0;background:#0e0c14;color:#fff;font:500 10px Inter,sans-serif; }.contact-form input:focus,.contact-form select:focus { border-color:#8b2cf5;box-shadow:0 0 0 3px rgba(139,44,245,.11); }.contact-form .button { grid-column:1/-1;width:100%;border:0;cursor:pointer; }.contact-form>small { grid-column:1/-1;text-align:center;color:#686371;font-size:7px; }.form-success { grid-column:1/-1;padding:17px;border:1px solid rgba(154,252,114,.2);border-radius:13px;background:rgba(154,252,114,.07); }.form-success b { color:var(--lime);font:600 11px Poppins,sans-serif; }.form-success p { margin:5px 0 0;color:#a8a3af;font-size:8px;line-height:1.5; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; transform: scale(.75); } }
@keyframes sound { to { height: 100%; } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes travel { to { left:100%; } }
@keyframes progress { from { width:0; } to { width:100%; } }
@keyframes filmZoom { to { transform:scale(1.08); } }
@keyframes filmText { 0%,8%{opacity:0;transform:translate(-50%,-42%)} 15%,26%{opacity:1;transform:translate(-50%,-50%)} 32%,100%{opacity:0;transform:translate(-50%,-58%)} }
@keyframes productIn { from { opacity:0;transform:translateY(15px); } to { opacity:1;transform:none; } }
@keyframes voicePulse { 0%{transform:scale(.76);opacity:0} 35%{opacity:1} 100%{transform:scale(1.1);opacity:0} }
@keyframes scan { 0%,100%{top:5%;opacity:.2} 50%{top:95%;opacity:1} }

@media (max-width: 1050px) {
  .ai-hero { grid-template-columns: 1fr; padding-top: 170px; }
  .hero-copy { max-width: 790px; }.hero-system { width: min(100%,700px); margin: 0 auto; }
  .video-section { grid-template-columns:1fr; }.video-copy { max-width:720px; }.product-display { grid-template-columns:1fr; }.product-copy { max-width:720px; }.outcomes-section { grid-template-columns:1fr; }.outcomes-image { min-height:650px; }.industry-section { grid-template-columns:1fr; }.industry-copy { position:static;max-width:720px; }.contact-section { grid-template-columns:1fr; }.contact-copy { max-width:850px; }
}
@media (max-width: 820px) {
  .ai-hero { min-height: auto; padding: 145px 22px 82px; gap: 55px; }.hero-copy h1 { font-size: clamp(55px,16vw,78px); line-height: 1.02; }.hero-intro { font-size: 15px; }.hero-proof { gap: 18px; }.hero-proof span { padding: 0; }.hero-proof span + span { border: 0; }.hero-system { min-height: 560px; }.command-panel { transform: none; }.signal-card-one { left: -3%; top: 5%; }.signal-card-two { right: -2%; bottom: 5%; }
  .workforce-intro,.video-section,.products-section,.how-section,.industry-section,.contact-section { padding:100px 22px; }.split-heading,.products-heading,.how-heading { grid-template-columns:1fr;display:grid;gap:27px; }.workforce-map { grid-template-columns:1fr 1fr; }.workforce-map article:nth-of-type(2),.workforce-map article:nth-of-type(4) { margin-top:0; }.map-line,.map-core { display:none; }.product-tabs { grid-template-columns:1fr 1fr; }.product-tabs button { border-bottom:1px solid rgba(255,255,255,.08); }.product-display { padding:30px; }.outcomes-copy { padding:100px 35px; }.how-grid { grid-template-columns:1fr 1fr; }.how-grid article,.how-grid article:first-child,.how-grid article:last-child { border-radius:0; }.industry-list>div { grid-template-columns:38px 1fr 32px; }.industry-list small { display:none; }
}
@media (max-width: 540px) {
  .hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.hero-proof { display: grid; grid-template-columns: 1fr 1fr; }.hero-proof span:last-child { grid-column: 1/-1; }.hero-system { min-height: 520px; }.system-orbit { display: none; }.command-panel { padding: 9px; border-radius: 24px; }.command-message { padding: 18px; grid-template-columns: 42px 1fr; }.signal-card { min-width: 145px; }.signal-card-one { left: 0; top: -13px; }.signal-card-two { right: 0; bottom: -25px; }.ticker { height: 55px; }
  .split-heading h2,.products-heading h2,.video-copy h2,.outcomes-copy h2,.how-heading h2,.industry-copy h2,.contact-copy h2 { font-size:43px; }.workforce-map { grid-template-columns:1fr; }.workforce-map article { min-height:265px; }.workforce-map h3 { margin-top:65px; }.video-notes { grid-template-columns:1fr; }.video-notes span { padding-left:0; }.video-stage { border-radius:20px; }.video-play { width:66px;height:66px; }.video-play span { width:44px;height:44px; }.video-title { left:20px;bottom:28px; }.video-title strong { font-size:18px; }.video-badge { left:16px;top:15px; }.product-tabs { grid-template-columns:1fr; }.product-display { padding:19px; }.product-ui { min-height:450px; }.ui-canvas { padding:18px; }.product-stat { right:-7px; }.inbox-list { width:100%; }.inbox-detail { display:none; }.outcomes-image { min-height:520px; }.outcomes-copy { padding:85px 22px; }.how-grid { grid-template-columns:1fr; }.how-grid article { min-height:330px; }.industry-list>div { padding-inline:4px;gap:8px; }.industry-list strong { font-size:14px; }.contact-form { grid-template-columns:1fr;padding:22px; }.contact-form label:nth-of-type(4),.contact-form .button,.contact-form>small,.form-success,.form-head { grid-column:1; }
}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; } }

/* Homepage-aligned conversion and footer treatment */
.form-promise{grid-column:1/-1;padding:17px;border:1px solid rgba(139,44,245,.3);border-radius:16px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:13px;background:linear-gradient(90deg,rgba(104,20,239,.17),rgba(0,186,252,.04))}.form-promise>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#5d0de2,#981cf4);font:700 10px Poppins,sans-serif}.form-promise b{display:block;font:600 11px Poppins,sans-serif}.form-promise small{display:block;margin-top:4px;color:#8f8997;font-size:8px}.form-promise i{color:var(--lime);font:700 7px Inter,sans-serif;font-style:normal;letter-spacing:.12em}
@media(max-width:560px){.form-promise{grid-template-columns:38px 1fr}.form-promise i{display:none}}

/* Cleaner homepage-aligned page balance */
:root{--paper:#f8f7fb;--paper-violet:#f1eef8;--brand-purple:#6d24d9;--brand-purple-deep:#4f159f}
.split-heading h2 em,.products-heading h2 em,.video-copy h2 em,.outcomes-copy h2 em,.how-heading h2 em,.industry-copy h2 em,.contact-copy h2 em{background:none;color:var(--brand-purple)}
.ai-hero{background:radial-gradient(circle at 82% 38%,rgba(104,20,239,.25),transparent 27%),radial-gradient(circle at 8% 75%,rgba(0,186,252,.08),transparent 25%),linear-gradient(135deg,#111019 0%,#171221 52%,#0c0b12 100%)}
.ai-hero:after{background:linear-gradient(transparent,#111019)}
.workforce-intro{background:#fff}
.workforce-map article{background:#fbfafe;border-color:#e9e5f0;box-shadow:0 18px 44px rgba(54,34,90,.055)}

.video-section{color:#111019;background:linear-gradient(135deg,#f7f5fa 0%,#fff 54%,#f0ebf8 100%)}
.video-section:before{content:"";position:absolute;right:-9vw;top:-14vw;width:38vw;height:38vw;border-radius:50%;background:rgba(109,36,217,.08);filter:blur(5px);pointer-events:none}
.video-section .dark-kicker{color:#777282}.video-section .dark-kicker span{color:#1a1720;border-color:#d9d5e2}
.video-copy p{color:#696572}.video-notes{border-color:#ddd8e5}.video-notes span{color:#77717f}.video-notes b{color:#18141f}
.video-stage{border-color:#d9d2e2;box-shadow:0 35px 80px rgba(37,21,67,.18)}

.products-section{background:linear-gradient(145deg,#17121f,#0d0c13 70%)}
.products-heading h2 em{color:#a871f4}.products-section .dark-kicker span{background:rgba(255,255,255,.04)}
.product-display{background:radial-gradient(circle at 88% 13%,rgba(117,39,222,.16),transparent 30%),#15121d}

.outcomes-section{background:#fff}.outcomes-image>img{filter:contrast(1.02) brightness(.86) saturate(.86)}
.how-section{color:#111019;background:var(--paper-violet)}
.how-section .dark-kicker{color:#777282}.how-section .dark-kicker span{color:#1a1720;border-color:#d8d2e2;background:rgba(255,255,255,.5)}
.how-heading p{color:#696472}
.how-grid{gap:14px}
.how-grid article,.how-grid article:first-child,.how-grid article:last-child{margin-right:0;border:1px solid #ded8e7;border-radius:24px;background:rgba(255,255,255,.72);box-shadow:0 18px 45px rgba(48,29,82,.045)}
.how-grid article:hover{border-color:#b99ade;background:#fff;box-shadow:0 24px 55px rgba(48,29,82,.10)}
.how-grid article>span{color:#aaa3b2}.how-grid article small{color:var(--brand-purple)}.how-grid p{color:#6e6876}.how-grid article>i{border-color:#d9d2e2;color:#81798a;background:#fff}
.industry-section{background:#fff}

.contact-section{color:#111019;background:radial-gradient(circle at 86% 10%,rgba(109,36,217,.12),transparent 26%),linear-gradient(135deg,#f8f7fb,#efebf7)}
.contact-grid{background-image:linear-gradient(rgba(61,38,94,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(61,38,94,.035) 1px,transparent 1px);mask-image:linear-gradient(90deg,#000,transparent 88%)}
.contact-section .dark-kicker{color:#777282}.contact-section .dark-kicker span{color:#1a1720;border-color:#d5cfe0;background:rgba(255,255,255,.6)}
.contact-copy>p{color:#686371}.contact-proof{border-color:#d9d3e2}.contact-proof span{color:#6f6878}.contact-proof span:before{color:var(--brand-purple)}
.contact-form{border-color:#ddd5e7;background:rgba(255,255,255,.86);box-shadow:0 30px 75px rgba(46,27,79,.13)}
.form-head{border-color:#e2dce9;color:#756d7e}.contact-form label{color:#716a79}.contact-form input,.contact-form select{border-color:#ded8e5;background:#faf9fc;color:#16121c}.contact-form input:focus,.contact-form select:focus{background:#fff}.contact-form>small{color:#88818f}
.form-promise{border-color:#d8caea;background:linear-gradient(90deg,#f0e8fb,#f8f6fb)}.form-promise small{color:#756d7e}.form-success{border-color:#b9dda9;background:#f0faec}.form-success b{color:#34741d}.form-success p{color:#65705f}


/* Premium conversion form */
.contact-form{position:relative;display:block;padding:11px;border-color:#d8cfe7;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,244,251,.94));box-shadow:0 36px 90px rgba(46,27,79,.17),0 2px 0 #fff inset;overflow:hidden}
.contact-form:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#4f159f 0 55%,#1682a7 82%,#236f43)}
.contact-form:after{content:"";position:absolute;width:210px;height:210px;right:-130px;top:58px;border-radius:50%;background:rgba(109,36,217,.09);pointer-events:none}
.form-head,.form-promise,.form-fields,.form-next,.form-submit,.contact-form>small,.form-success{position:relative;z-index:1}
.form-head{margin:0;padding:21px 22px 19px;border-color:#e5dfeb;color:#655d6e;align-items:center;font-size:8px}
.form-progress{display:flex;align-items:center;gap:5px}.form-progress i{width:20px;height:3px;border-radius:20px;background:#dcd5e5}.form-progress i:first-child{width:34px;background:#5a18b3}
.form-promise{margin:10px 10px 0;padding:20px 22px;border-color:#cfc0e3;border-radius:20px;background:linear-gradient(110deg,#eee6f9 0%,#f8f5fb 62%,#edf6f4);box-shadow:0 12px 30px rgba(73,38,119,.07)}
.form-promise>span{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#5112ba,#7a21e5);color:#fff;box-shadow:0 10px 24px rgba(89,22,184,.24)}
.form-promise b{font-size:12px;color:#17121d}.form-promise small{font-size:9px;color:#756d7e}.form-promise i{padding:8px 10px;border:1px solid rgba(35,111,67,.28);border-radius:999px;background:rgba(35,111,67,.1);color:#236f43;font-size:7px}
.form-fields{margin:5px 10px 0;padding:21px 22px 5px;display:grid;grid-template-columns:1fr 1fr;gap:17px 18px}
.contact-form label{color:#5f5867;font-size:8px}.contact-form label>span{display:block;margin-bottom:8px}
.contact-form input,.contact-form select{height:58px;margin-top:0;padding:0 17px;border-color:#dcd5e5;border-radius:15px;background:rgba(255,255,255,.78);color:#16121c;font-size:11px;box-shadow:0 7px 18px rgba(46,27,79,.035),0 1px 0 #fff inset;transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
.contact-form input:hover,.contact-form select:hover{border-color:#bfaed2;background:#fff}.contact-form input:focus,.contact-form select:focus{border-color:#6d24d9;background:#fff;box-shadow:0 0 0 4px rgba(109,36,217,.1),0 12px 25px rgba(46,27,79,.08);transform:translateY(-1px)}
.field-wide{grid-column:1 / -1!important}
.form-next{margin:12px 32px 7px;padding:14px 16px;display:grid;grid-template-columns:28px 1fr 28px 1fr;gap:10px;align-items:center;border:1px solid #e4dde9;border-radius:15px;background:rgba(255,255,255,.56)}
.form-next>span,.form-next>i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#5b18b7;color:#fff;font:700 7px Inter,sans-serif;font-style:normal}.form-next>i{background:#e8e1f0;color:#6b6274}
.form-next p{margin:0}.form-next b{display:block;color:#292230;font:600 8px Poppins,sans-serif}.form-next small{display:block;margin-top:3px;color:#827a89;font-size:7px}
.contact-section .contact-form .form-submit{width:calc(100% - 20px);min-height:64px;margin:4px 10px 0;border:0;border-radius:18px;background:linear-gradient(100deg,#4f159f,#6e19db 58%,#891cf0);color:white!important;-webkit-text-fill-color:white;font-size:12px;box-shadow:0 18px 36px rgba(79,21,159,.27)}
.contact-section .contact-form .form-submit span{color:white!important;-webkit-text-fill-color:white}.contact-form .form-submit:hover{box-shadow:0 23px 44px rgba(79,21,159,.36)}
.contact-form>small{display:block;color:#777080;padding:12px 0 11px;text-align:center}.form-success{margin:10px;border-color:#a6ccb5;background:#edf7f1}.form-success b{color:#236f43}.form-success p{color:#65705f}
@media(max-width:560px){.contact-form{padding:8px}.form-head{padding-inline:13px}.form-progress{display:none}.form-promise{padding:16px}.form-promise i{display:none}.form-fields{padding:18px 10px 4px;grid-template-columns:1fr}.field-wide{grid-column:1}.form-next{margin-inline:18px;grid-template-columns:28px 1fr}.form-next>i,.form-next>i+p{display:none}.contact-form .form-submit{min-height:60px;font-size:10px}}

/* Keep the poster visible until the film actually starts.
   The video element renders a near-black first frame once it is cached, which
   otherwise leaves this section looking empty on repeat visits. */
.video-stage { background-image: url('../assets/ai-workforce-customer-journey.jpg'); background-size: cover; background-position: center; }
.video-stage video { opacity: 0; transition: opacity .45s ease; }
.video-stage.video-started video { opacity: 1; }

/* ===================================================================
   Typography alignment with the homepage (css/style.css)
   -------------------------------------------------------------------
   The handover shipped its own type scale, which ran roughly 12-15%
   larger on headings and much smaller in the footer than the homepage.
   Everything below re-maps this page onto the homepage's scale so the
   two read as one site. Values mirror css/style.css exactly, including
   the clamp() formulas, so both pages scale identically.
   =================================================================== */

/* --- Headings ---------------------------------------------------- */
.hero-copy h1 { font: 800 clamp(58px,6vw,88px)/.98 Poppins, sans-serif; letter-spacing: -.065em; }

.split-heading h2,
.products-heading h2,
.how-heading h2,
.industry-copy h2,
.contact-copy h2 { font: 700 clamp(45px,5vw,72px)/1.06 Poppins, sans-serif; letter-spacing: -.06em; }

/* The video section is the one split where the heading shares its row with a
   16:9 stage, so its column is narrower than the others and the shared size
   above breaks "Do not over-explain it." across three lines. Same family,
   weight, line-height and tracking — smaller ceiling, sized to the column.
   Measured to clear on one line at 1060, 1100, 1200, 1440 and 1920px; below
   1050px the section stacks and the heading gets the full column. */
.video-copy h2 { font: 700 clamp(34px,3.6vw,48px)/1.06 Poppins, sans-serif; letter-spacing: -.06em; }

/* Same story in the outcomes section: the heading is written as two lines
   ("Less waiting." / "More movement.") but shares its row with a full-height
   photo, so its column is about 520px however wide the page gets — the text
   half is pinned to the 1260px content column while the photo takes the rest.
   At the shared size "More movement." needed 573px and dropped to three lines. */
.outcomes-copy h2 { font: 700 clamp(40px,3.9vw,58px)/1.06 Poppins, sans-serif; letter-spacing: -.06em; }

.product-copy h3 { font: 600 clamp(29px,3vw,42px)/1.16 Poppins, sans-serif; letter-spacing: -.04em; }

.workforce-map h3,
.how-grid h3 { font: 600 24px/1.15 Poppins, sans-serif; letter-spacing: -.04em; }

.outcome-list h3 { font: 600 16px/1.4 Poppins, sans-serif; letter-spacing: -.02em; }

/* --- Body copy --------------------------------------------------- */
.hero-intro { font-size: 18px; line-height: 1.75; }

.split-heading p,
.video-copy p,
.products-heading p,
.outcomes-copy > p,
.how-heading p,
.industry-copy p,
.contact-copy > p { font-size: 16px; line-height: 1.8; }

.how-grid p,
.outcome-list p { font-size: 13px; line-height: 1.65; }

/* --- Eyebrow / kicker -------------------------------------------- */
.section-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1.5; }
.section-kicker span { font-size: 10px; letter-spacing: .09em; }

/* --- Buttons ------------------------------------------------------ */
/* Nav type is set by css/shell.css, shared with the homepage. */
.button { font-size: 13px; }

/* --- Matching responsive steps (mirrors css/style.css) ----------- */
@media (max-width: 1100px) {
  .hero-copy h1 { font-size: 64px; }
}
@media (max-width: 820px) {
  .hero-copy h1 { font-size: clamp(50px,13vw,74px); line-height: 1.02; }
  .split-heading p,
  .video-copy p,
  .products-heading p,
  .outcomes-copy > p,
  .how-heading p,
  .industry-copy p,
  .contact-copy > p { font-size: 15px; }
}
@media (max-width: 540px) {
  .hero-copy h1 { font-size: 48px; }
}

/* Below 1050px the video section stacks, so its heading gets the full column
   back and can take the same size as the other section headings again. The
   slope keeps "Do not over-explain it." on one line all the way down — without
   it the line breaks and strands "it." on a line of its own. */
@media (max-width: 1050px) {
  .video-copy h2 { font-size: clamp(24px,8vw,46px); }
  .outcomes-copy h2 { font-size: clamp(30px,9vw,58px); }
}


/* ===================================================================
   Layout width alignment with the homepage
   -------------------------------------------------------------------
   The homepage constrains content to a 1320px box with 30px padding,
   giving a 1260px text column (css/style.css .section). This page's
   sections were full-bleed and ran ~1713px wide at 1920px.

   Uses the homepage.s own formula, so the content column is identical
   at every viewport width: min(1260px, viewport - 60px), with a 24px
   gutter below 820px to match .section there too.
   =================================================================== */
.ai-hero,
.workforce-intro,
.video-section,
.products-section,
.how-section,
.industry-section,
.contact-section {
  padding-left: max(30px, calc((100% - 1260px) / 2));
  padding-right: max(30px, calc((100% - 1260px) / 2));
}

/* The outcomes section is the exception: it is a full-bleed split, and its photo
   half is meant to run to the page edge like the sections above and below it.
   Constraining the section itself (max-width: 1260px; margin: auto) lined the
   text up correctly but turned the whole section into a floating card, with the
   photo stopping short and white gutters down both sides — a visible step in and
   back out of the page rhythm.

   So the section stays full-bleed and the 1260px column is applied to the text
   half alone. The copy sits in the right-hand grid track, so its own width is
   half the page; calc(100% - 630px) resolves against that track and lands its
   right edge exactly where every other section's content ends. Percentages beat
   50vw here because vw counts the scrollbar and would sit ~7px wide of it.
   Below 1051px the section stacks and the responsive padding rules take over. */
@media (min-width: 1051px) {
  .outcomes-copy { padding-right: max(40px, calc(100% - 630px)); }
}

/* Mirror the homepage's narrower mobile gutter (css/style.css .section). */
@media (max-width: 820px) {
  .ai-hero,
  .workforce-intro,
  .video-section,
  .products-section,
  .how-section,
  .industry-section,
  .contact-section { padding-left: 24px; padding-right: 24px; }
}

/* ===================================================================
   Consent checkbox
   .contact-form input styles every input as a full-width 58px field,
   which was stretching the consent checkbox to 248x58px. Reset it.
   =================================================================== */
.contact-form .field-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 10px 0; color: #5f5867; font-size: 12px; line-height: 1.55;
}
.contact-form .field-consent input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px; height: 18px; min-width: 18px;
  margin: 1px 0 0; padding: 0;
  border-radius: 4px;
  background: initial; box-shadow: none;
  accent-color: #6814ef;
  transform: none;
}
.contact-form .field-consent input[type="checkbox"]:hover,
.contact-form .field-consent input[type="checkbox"]:focus {
  background: initial; box-shadow: none; transform: none;
}

/* ===================================================================
   Logo aspect ratio
   The width/height attributes added for PageSpeed win wherever the CSS
   sets only a width, which was stretching the wordmark logo to 300px
   tall (should be ~164px). height:auto restores the true ratio.
   The outcomes panel is excluded: it uses object-fit:cover by design.
   =================================================================== */
.avatar img,
.ui-message.agent img,
.brand-e img { height: auto; }