:root { --bg:#02070a; --surface:#071116; --ink:#f4f7f8; --muted:#a9b6bc; --line:#213139; --blue:#08a7ff; --cyan:#16e7e3; --purple:#9d4bff; --gold:#ffd325; --shadow:0 16px 42px rgba(0,0,0,.38); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font:500 16px/1.55 "Montserrat",sans-serif; } button,input,select,textarea { font:inherit; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin-top:0; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }.skip-link { position:fixed; top:-4rem; left:1rem; z-index:20; padding:.7rem 1rem; color:#000; background:#fff; }.skip-link:focus { top:1rem; }
.site-header { min-height:82px; display:flex; align-items:center; gap:30px; padding:0 clamp(24px,5.4vw,92px); border-bottom:1px solid #1f2e36; background:rgba(2,7,10,.93); backdrop-filter:blur(18px); position:sticky; top:0; z-index:10; }.brand-lockup { display:flex; align-items:center; gap:8px; min-width:143px; color:#f6f8f9; }.brand-symbol { display:inline-flex; align-items:center; height:34px; font-weight:800; font-size:31px; letter-spacing:-11px; transform:skew(-10deg); }.brand-symbol b { color:#1979ff; }.brand-symbol i { margin-left:4px; color:#f2cf2a; font-style:normal; }.brand-name { align-self:flex-end; padding-bottom:3px; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }.site-nav { margin-left:auto; display:flex; gap:27px; align-items:center; }.site-nav a { position:relative; color:#e9eff1; font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }.site-nav a:after { content:""; position:absolute; right:0; bottom:-8px; left:0; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .2s ease; }.site-nav a:hover:after,.site-nav a:focus-visible:after { transform:scaleX(1); transform-origin:left; }.button { min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:10px 17px; border:1px solid transparent; border-radius:4px; font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; transition:transform .2s ease,background .2s ease,border-color .2s ease; }.button:hover { transform:translateY(-2px); }.button:focus-visible,.advisory-controls button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }.button-primary { color:#081016; background:var(--gold); box-shadow:0 8px 23px rgba(255,205,32,.19); }.button-secondary { border-color:#45565e; color:#fff; background:rgba(8,19,24,.45); }.header-cta { margin-left:8px; }.menu-toggle { display:none; }
.brand-lockup-image { min-width:0; width:140px; height:54px; gap:0; }.brand-lockup-image img { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.hero { position:relative; min-height:671px; display:grid; grid-template-columns:minmax(310px,.8fr) minmax(550px,1.2fr); gap:2vw; align-items:center; overflow:hidden; padding:70px clamp(24px,7vw,116px) 50px; isolation:isolate; background:radial-gradient(circle at 80% 44%,#063da129,transparent 34%),linear-gradient(120deg,#02070a 21%,#04090e 70%,#02070a); }.hero:after { content:""; position:absolute; z-index:-1; right:0; bottom:-1px; left:0; height:145px; background:linear-gradient(transparent,var(--bg)); }.hero-light { position:absolute; z-index:-1; width:45vw; height:40px; border-radius:50%; opacity:.5; filter:blur(8px); transform:rotate(-23deg); }.hero-light-blue { right:-6%; top:48%; background:#0077ff; box-shadow:0 0 70px #006fff; }.hero-light-purple { right:17%; top:61%; background:#9e31ff; box-shadow:0 0 54px #a638ff; }.hero-copy { max-width:535px; }.eyebrow { margin-bottom:13px; color:#16a9ff; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; } h1 { max-width:540px; margin-bottom:20px; font-size:clamp(40px,4.6vw,72px); font-weight:800; line-height:1.04; letter-spacing:0; text-transform:uppercase; } h1 span,.cta-section h2 span { background:linear-gradient(90deg,#008dff,#7d45ed 45%,#f5cd31); -webkit-background-clip:text; color:transparent; }.hero-summary { max-width:430px; margin-bottom:0; color:#c8d3d7; font-size:14px; line-height:1.7; }.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin:28px 0; }.hero-proof { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:570px; padding:0; margin:0; list-style:none; }.hero-proof li { color:#c1cdd1; font-size:9px; font-weight:700; line-height:1.45; text-transform:uppercase; }.hero-proof li span { display:block; margin-bottom:5px; color:var(--blue); font-size:21px; line-height:1; }
.hero-art { position:relative; z-index:0; isolation:isolate; min-height:505px; align-self:end; }.hero-art>img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.97; }.dashboard-card { position:absolute; z-index:1; min-width:180px; padding:13px 15px; border:1px solid #263c47; border-radius:8px; background:linear-gradient(145deg,rgba(11,23,30,.93),rgba(3,10,15,.84)); box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(12px); }.dashboard-card header { display:flex; justify-content:space-between; gap:12px; color:#d4dde0; font-size:9px; font-weight:600; }.dashboard-card header small { color:var(--blue); }.dashboard-card strong { display:block; margin-top:6px; color:var(--cyan); font-size:25px; line-height:1; }.dashboard-card em { display:block; margin-top:4px; color:#83959d; font-size:8px; font-style:normal; }.card-inventory { top:2%; left:0; width:45%; }.card-value { top:2%; right:1%; width:41%; }.card-roi { bottom:3%; left:13%; }.card-leads { right:0; bottom:3%; }.card-split { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; align-items:end; margin-top:6px; }.card-split label { display:block; color:#83959d; font-size:8px; }.card-roi strong { color:#db92ff; }.card-roi b,.card-leads b { display:block; margin-top:4px; color:#1fdf9a; font-size:9px; }.chart { position:relative; height:48px; overflow:hidden; border-bottom:1px solid #1d3947; }.chart:after,.spark:after { content:""; position:absolute; right:0; bottom:6px; left:0; height:28px; border-top:2px solid var(--cyan); clip-path:polygon(0 80%,11% 63%,20% 78%,33% 31%,43% 71%,53% 48%,62% 67%,73% 18%,83% 48%,100% 0,100% 7%,83% 55%,73% 25%,62% 74%,53% 55%,43% 78%,33% 38%,20% 85%,11% 70%,0 87%); background:var(--cyan); }.bar-chart { display:flex; align-items:end; gap:5px; height:42px; margin-top:8px; }.bar-chart i { display:block; flex:1; height:35%; background:linear-gradient(#157ff8,#1359c5); }.bar-chart i:nth-child(2){height:58%}.bar-chart i:nth-child(3){height:44%}.bar-chart i:nth-child(4){height:78%}.bar-chart i:nth-child(5){height:54%}.bar-chart i:nth-child(6){height:92%}.bar-chart i:nth-child(7){height:71%}.bar-chart i:nth-child(8){height:100%}.spark { position:relative; height:29px; margin-top:8px; border-bottom:1px solid #1d3947; }.spark:after { bottom:3px; height:20px; }.spark-violet:after { border-color:#c755ff; background:#c755ff; }.spark-blue:after { border-color:#18bcff; background:#18bcff; }
.section { padding:98px clamp(24px,7vw,116px); }.section-intro { max-width:670px; margin:0 auto 42px; text-align:center; }.section-intro h2,.integration-copy h2,.dealer-copy h2,.cta-section h2 { margin-bottom:12px; font-size:clamp(30px,3vw,48px); font-weight:800; line-height:1.1; text-transform:uppercase; }.section-intro p:not(.eyebrow),.integration-copy p:not(.eyebrow),.dealer-copy p,.cta-copy p:not(.eyebrow) { color:var(--muted); font-size:14px; }.solutions { position:relative; background:linear-gradient(180deg,var(--bg),#071016 62%,var(--bg)); }.solution-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }.solution-grid article { min-height:287px; padding:23px 18px 19px; border:1px solid #273740; border-radius:6px; background:linear-gradient(150deg,#0c171e,#060c11); box-shadow:inset 0 1px rgba(255,255,255,.025); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }.solution-grid article:hover { transform:translateY(-6px); border-color:#2679ba; box-shadow:0 14px 35px rgba(0,85,162,.18); }.solution-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid currentColor; border-radius:50%; font-size:24px; line-height:1; }.blue-icon { color:#159cff; }.purple-icon { color:#a95cff; }.cyan-icon { color:#0de5e6; }.azure-icon { color:#3979ff; }.gold-icon { color:#ffd327; }.teal-icon { color:#15d8be; }.solution-grid h3 { min-height:50px; margin:23px 0 9px; font-size:13px; line-height:1.22; text-transform:uppercase; }.solution-grid p { min-height:70px; margin-bottom:14px; color:#a7b5ba; font-size:11px; line-height:1.65; }.solution-grid a { color:#1fb7ff; font-size:10px; font-weight:800; text-transform:uppercase; }.solution-grid a:hover { color:var(--gold); }
.integrations { display:grid; grid-template-columns:minmax(360px,.95fr) minmax(310px,.85fr); align-items:center; gap:11%; overflow:hidden; border-top:1px solid var(--line); background:radial-gradient(circle at 24% 44%,#073a8624,transparent 32%); }.integration-orbit { position:relative; width:min(100%,470px); aspect-ratio:1; display:grid; grid-template-columns:repeat(3,1fr); place-items:center; padding:66px; border:1px solid #1a69b8; border-radius:50%; background:radial-gradient(circle at center,#073d8d55,transparent 52%),conic-gradient(from 0deg,transparent,#0c9dff88,transparent 32%,#903cffaa,transparent 58%,#08b5ff88,transparent); box-shadow:0 0 80px #075dc63b,inset 0 0 50px #071648; }.orbit-line { position:absolute; inset:9%; border:1px solid #1966ae77; border-radius:50%; }.orbit-two { inset:20%; transform:rotate(55deg) scaleX(.77); }.partner,.integration-orbit strong { z-index:1; display:grid; place-items:center; width:96px; min-height:72px; padding:8px; border:1px solid #255c93; border-radius:6px; color:#e5f1f6; background:#061723e8; box-shadow:0 0 18px #063e7238; text-align:center; font-size:16px; font-weight:800; line-height:1; }.partner small { margin-top:3px; color:#a8d1ed; font-size:8px; line-height:1.1; }.integration-orbit strong { grid-column:2; grid-row:2; width:103px; color:#fff; border-color:#427fc2; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }.integration-copy { max-width:490px; }.integration-copy .button { margin-top:13px; }
.dealer-section { position:relative; min-height:426px; display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; overflow:hidden; padding:72px clamp(24px,7vw,116px); border-block:1px solid var(--line); background:linear-gradient(90deg,rgba(2,7,10,.98) 0 36%,rgba(2,7,10,.87) 55%,rgba(2,7,10,.3)),url('/images/xo-dealer-advisory.png') center/cover; }.dealer-section:after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:linear-gradient(90deg,transparent,#0a9aff,#b142fa,transparent); opacity:.55; }.dealer-copy,.advisory-card { position:relative; z-index:1; max-width:485px; }.dealer-copy .button { margin-top:9px; }.advisory-card { justify-self:end; padding:27px 30px 20px; border:1px solid #31434b; border-radius:7px; background:rgba(3,11,16,.78); box-shadow:var(--shadow); backdrop-filter:blur(10px); }.quote-mark { margin:0; color:var(--gold); font-size:56px; line-height:.5; }.advisory-quote { min-height:91px; margin:13px 0 17px; color:#f5f7f8; font-size:17px; line-height:1.45; }.advisory-author { display:flex; flex-direction:column; margin-bottom:18px; color:#a9b9bf; font-size:10px; line-height:1.45; }.advisory-author strong { color:var(--gold); text-transform:uppercase; }.advisory-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; }.advisory-controls button { width:32px; height:32px; padding:0; border:1px solid #58717a; border-radius:50%; color:#fff; background:transparent; cursor:pointer; }.advisory-controls button:hover { border-color:var(--gold); color:var(--gold); }.advisory-dots { display:flex; gap:7px; }.advisory-dots span { width:6px; height:6px; border-radius:50%; background:#65757d; }.advisory-dots .is-active { background:#fff; }
.why { background:linear-gradient(180deg,#040b0f,#061117); }.why-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }.why-grid article { min-height:126px; padding-left:18px; border-left:1px solid #314149; }.why-grid article span { color:var(--blue); font-size:28px; }.why-grid article:nth-child(2) span,.why-grid article:nth-child(4) span { color:var(--purple); }.why-grid h3 { margin:9px 0 6px; font-size:11px; line-height:1.3; text-transform:uppercase; }.why-grid p { color:#a9b6bc; font-size:10px; line-height:1.5; }
.cta-section { position:relative; min-height:330px; display:grid; grid-template-columns:minmax(300px,1fr) auto; gap:50px; align-items:center; overflow:hidden; padding:60px clamp(24px,7vw,116px); border-top:1px solid var(--line); background:#02070a; }.cta-section>img { position:absolute; z-index:0; right:11%; bottom:-130%; width:min(735px,52vw); opacity:.85; filter:contrast(1.12) saturate(1.12); }.cta-section:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#02070af5 0 39%,#02070a92 60%,#02070af0); }.cta-glow { position:absolute; z-index:0; right:10%; bottom:7%; width:31vw; height:50px; border-radius:50%; background:#006bff; filter:blur(24px); opacity:.42; }.cta-copy,.cta-actions { position:relative; z-index:1; }.cta-copy { max-width:600px; }.cta-copy h2 { max-width:570px; }.cta-actions { display:flex; flex-direction:column; min-width:207px; gap:11px; }.cta-actions .button { width:100%; }
.site-footer { display:grid; grid-template-columns:180px minmax(180px,1fr) 1.1fr; gap:23px; padding:44px clamp(24px,7vw,116px) 24px; color:#94a4aa; background:#03070a; font-size:11px; }.site-footer .brand-lockup { align-self:start; }.site-footer>p { margin:0; }.site-footer>div { display:flex; justify-content:flex-end; gap:22px; flex-wrap:wrap; }.site-footer a:hover { color:var(--gold); }.copyright { grid-column:1/-1; margin-top:24px!important; padding-top:17px; border-top:1px solid #1e2c32; color:#73858c; }
.reveal { opacity:1; transform:none; }.has-js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }.has-js .reveal.is-visible { opacity:1; transform:none; }.solution-grid .reveal:nth-child(2),.why-grid .reveal:nth-child(2) { transition-delay:.06s; }.solution-grid .reveal:nth-child(3),.why-grid .reveal:nth-child(3) { transition-delay:.12s; }.solution-grid .reveal:nth-child(4),.why-grid .reveal:nth-child(4) { transition-delay:.18s; }.solution-grid .reveal:nth-child(5),.why-grid .reveal:nth-child(5) { transition-delay:.24s; }.solution-grid .reveal:nth-child(6) { transition-delay:.3s; }
@media (max-width:1080px) { .site-nav { gap:14px; }.hero { grid-template-columns:minmax(310px,.8fr) minmax(450px,1.1fr); padding-inline:42px; }.solution-grid { grid-template-columns:repeat(3,1fr); }.why-grid { grid-template-columns:repeat(3,1fr); }.integrations { gap:6%; } }
@media (max-width:780px) { .site-header { min-height:70px; padding:0 20px; }.brand-lockup { min-width:120px; }.brand-symbol { height:28px; font-size:27px; }.brand-name { font-size:9px; }.header-cta { display:none; }.menu-toggle { display:grid; gap:4px; margin-left:auto; padding:11px; border:0; background:transparent; cursor:pointer; }.menu-toggle span:not(.sr-only) { width:22px; height:2px; background:#fff; }.site-nav { display:none; position:absolute; top:70px; right:0; left:0; z-index:4; padding:18px 20px 24px; background:#071116; border-block:1px solid var(--line); }.site-nav.is-open { display:grid; gap:15px; }.hero { grid-template-columns:1fr; min-height:0; gap:25px; padding:59px 24px 43px; }.hero-art { min-height:380px; }.hero-proof { grid-template-columns:repeat(2,1fr); }.dashboard-card { min-width:126px; padding:9px; }.dashboard-card strong { font-size:19px; }.dashboard-card header,.dashboard-card em,.card-split label { font-size:7px; }.card-inventory { width:48%; }.card-value { width:45%; }.section { padding:65px 24px; }.solution-grid { grid-template-columns:repeat(2,1fr); }.solution-grid article { min-height:237px; }.solution-grid h3 { min-height:33px; margin-top:16px; }.solution-grid p { min-height:64px; }.integrations,.dealer-section { grid-template-columns:1fr; }.integrations { gap:35px; }.integration-orbit { margin:auto; }.dealer-section { gap:30px; background:linear-gradient(180deg,rgba(2,7,10,.96),rgba(2,7,10,.86)),url('/images/xo-dealer-advisory.png') center/cover; }.advisory-card { justify-self:start; }.why-grid { grid-template-columns:repeat(2,1fr); }.cta-section { grid-template-columns:1fr; gap:24px; }.cta-section>img { right:-20%; width:100%; opacity:.43; }.cta-actions { width:100%; max-width:300px; }.site-footer { grid-template-columns:1fr; }.site-footer>div { justify-content:flex-start; }.copyright { grid-column:auto; } }
@media (max-width:440px) { h1 { font-size:38px; }.hero-art { min-height:310px; }.hero-proof { grid-template-columns:1fr; }.hero-actions .button { width:100%; }.dashboard-card { min-width:100px; }.dashboard-card strong { font-size:16px; }.card-inventory,.card-value { top:0; }.card-roi,.card-leads { bottom:0; }.solution-grid,.why-grid { grid-template-columns:1fr; }.integration-orbit { transform:scale(.83); margin-block:-34px; }.advisory-card { padding:23px; }.advisory-quote { min-height:110px; }.site-footer>div { display:grid; grid-template-columns:1fr 1fr; gap:11px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.button,.solution-grid article { transition:none; } }

/* Final fidelity pass: stronger product hierarchy and more cinematic compositions. */
.brand-lockup { min-width:174px; gap:10px; }.brand-symbol { height:42px; font-size:39px; letter-spacing:-14px; text-shadow:0 0 15px #0b76ff5c; }.brand-name { padding-bottom:5px; font-size:12px; letter-spacing:1.8px; }
.site-nav { gap:30px; }.site-nav a { color:#f3f6f7; }.site-nav a:first-child:before { content:""; position:absolute; top:50%; left:-18px; width:5px; height:5px; border-radius:50%; background:var(--gold); transform:translateY(-50%); }
.hero { min-height:700px; grid-template-columns:minmax(340px,.76fr) minmax(620px,1.24fr); }.hero-copy { max-width:550px; }.hero-art { min-height:535px; margin-left:-18px; }.hero-art>img { inset:12% -2% -2% 0; width:auto; height:auto; }.hero-art:after { content:""; position:absolute; z-index:0; inset:39% 0 0; background:linear-gradient(90deg,rgba(2,7,10,.28),transparent 38%,rgba(2,7,10,.05)); pointer-events:none; }.hero-dashboard { position:absolute; z-index:1; inset:0 0 0 1%; border:1px solid #314852; border-radius:10px; background:linear-gradient(180deg,rgba(3,12,18,.38),transparent 34%); box-shadow:0 22px 45px rgba(0,0,0,.19),inset 0 1px #ffffff0d; }.dashboard-card { border-color:#355260; background:linear-gradient(145deg,rgba(5,16,24,.95),rgba(2,9,14,.9)); box-shadow:0 10px 24px #00000052,inset 0 1px #ffffff0d; }.card-inventory { top:3%; left:2%; width:44%; }.card-value { top:3%; right:2%; width:40%; }.card-roi { bottom:4%; left:17%; }.card-leads { right:2%; bottom:4%; }.hero-light-blue { right:-2%; top:46%; width:58vw; }.hero-light-purple { right:12%; top:64%; width:42vw; }
.solution-grid article { position:relative; min-height:306px; overflow:hidden; border-color:#30444e; background:linear-gradient(150deg,#0d1920,#050b10); }.solution-grid article:before { content:""; position:absolute; top:0; right:0; left:0; height:2px; background:linear-gradient(90deg,transparent,currentColor,transparent); opacity:.72; }.solution-grid article:nth-child(1){color:#159cff}.solution-grid article:nth-child(2){color:#a95cff}.solution-grid article:nth-child(3){color:#0de5e6}.solution-grid article:nth-child(4){color:#3979ff}.solution-grid article:nth-child(5){color:#ffd327}.solution-grid article:nth-child(6){color:#15d8be}.solution-grid h3,.solution-grid p,.solution-grid a { position:relative; color:inherit; }.solution-grid h3 { color:#f4f8fa; }.solution-grid p { color:#b6c3c8; }.solution-grid a { color:currentColor; }.solution-icon { width:48px; height:48px; border-width:2px; box-shadow:0 0 22px currentColor; }.solution-icon:after { content:""; position:absolute; width:22px; height:2px; background:currentColor; transform:rotate(-43deg); opacity:.82; }.solution-grid article:hover { box-shadow:0 22px 45px color-mix(in srgb,currentColor 14%,transparent); }
.integration-orbit { width:min(100%,500px); border-color:#278ee7; box-shadow:0 0 100px #075dc955,inset 0 0 65px #071648; }.partner { width:104px; min-height:79px; border-color:#3677a8; background:linear-gradient(145deg,#082337ed,#061019ee); box-shadow:0 0 24px #078cf42b; }.partner.cdk { color:#fff; font-size:20px; letter-spacing:-1px; }.partner.reynolds { color:#e9edf0; font-family:Georgia,serif; font-size:24px; }.partner.dealertrack { color:#d5f3ff; font-size:21px; }.partner.ekar { color:#fff; font-size:18px; letter-spacing:-1px; }.partner.pbs { color:#f2f4f6; font-size:18px; }.integration-orbit strong { width:112px; min-height:80px; border-color:#4c9cff; box-shadow:0 0 29px #126dce6e; }
.dealer-section { min-height:455px; background:linear-gradient(90deg,rgba(2,7,10,.98) 0 31%,rgba(2,7,10,.78) 51%,rgba(2,7,10,.1)),url('/images/xo-dealer-advisory.png') center 53%/cover; }.dealer-section:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 65%,#02070a80); }.advisory-card { border-color:#5a717a; background:linear-gradient(145deg,rgba(5,16,20,.78),rgba(2,7,10,.64)); box-shadow:0 24px 50px #00000080; }.advisory-quote { font-size:18px; }.dealer-copy { max-width:460px; }
.why-grid article { min-height:144px; padding-left:22px; border-left-color:#43555e; }.why-grid article span { display:block; margin-bottom:6px; font-size:34px; }.why-grid h3 { font-size:12px; }.why-grid p { font-size:11px; }
.cta-section { min-height:386px; grid-template-columns:minmax(330px,1fr) 230px; }.cta-section>img { right:50%; bottom:-12%; width:min(765px,54vw); height:auto; transform:translateX(50%); opacity:.96; filter:brightness(1.5) contrast(1.2) saturate(1.22); }.cta-section:after { background:linear-gradient(90deg,#02070afb 0 25%,#02070a9e 46%,#02070a9e 57%,#02070afb 83%); }.cta-glow { right:50%; bottom:15%; width:45vw; transform:translateX(50%); background:#087cff; opacity:.62; }.cta-copy { max-width:505px; }.cta-actions { justify-self:end; }
@media (max-width:1080px) { .brand-lockup { min-width:144px; }.brand-symbol { font-size:33px; }.brand-name { font-size:10px; }.site-nav { gap:17px; }.hero { grid-template-columns:minmax(320px,.82fr) minmax(480px,1.1fr); }.hero-art { margin-left:0; }.hero-art>img { inset:12% 0 0; }.hero-proof { grid-template-columns:repeat(2,1fr); } }
@media (max-width:780px) { .brand-lockup { min-width:126px; }.brand-symbol { height:29px; font-size:28px; }.brand-name { padding-bottom:3px; font-size:9px; }.hero { grid-template-columns:1fr; min-height:0; }.hero-art { min-height:380px; margin-left:0; }.hero-art>img { inset:11% 0 0; }.hero-dashboard { inset:0; }.solution-grid article { min-height:250px; }.dealer-section { background:linear-gradient(180deg,rgba(2,7,10,.95),rgba(2,7,10,.7)),url('/images/xo-dealer-advisory.png') center/cover; }.cta-section>img { width:125%; bottom:-3%; }.cta-section:after { background:linear-gradient(90deg,#02070af5,#02070a8a 52%,#02070af5); }.cta-actions { justify-self:start; } }
@media (max-width:780px) { .brand-lockup-image { min-width:0; width:126px; height:49px; } }
.brand-lockup-image { flex:0 0 140px; min-width:0; width:140px; height:54px; }.brand-lockup-image img { mix-blend-mode:screen; }
@media (max-width:780px) { .brand-lockup-image { flex-basis:126px; width:126px; height:49px; } }

/* Ambient motion: make the data surface feel active without competing with copy. */
@keyframes light-drift-blue { 0%,100% { transform:translate3d(0,0,0) rotate(-23deg); opacity:.38; } 50% { transform:translate3d(-8vw,-18px,0) rotate(-20deg); opacity:.68; } }
@keyframes light-drift-purple { 0%,100% { transform:translate3d(0,0,0) rotate(-23deg); opacity:.32; } 50% { transform:translate3d(7vw,20px,0) rotate(-27deg); opacity:.61; } }
@keyframes dashboard-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes line-pulse { 0%,100% { filter:drop-shadow(0 0 0 transparent); opacity:.78; } 50% { filter:drop-shadow(0 0 6px currentColor); opacity:1; } }
@keyframes bar-rise { 0%,100% { scale:1 .78; transform-origin:bottom; opacity:.7; } 50% { scale:1 1; opacity:1; } }
@keyframes orbit-turn { to { rotate:1turn; } }
@keyframes icon-breathe { 0%,100% { box-shadow:0 0 15px currentColor; } 50% { box-shadow:0 0 29px currentColor; } }

.hero-light-blue { animation:light-drift-blue 12s ease-in-out infinite; }
.hero-light-purple { animation:light-drift-purple 15s ease-in-out infinite; }
.dashboard-card { animation:dashboard-float 5.8s ease-in-out infinite; }
.card-value { animation-delay:-1.7s; }.card-roi { animation-delay:-3.4s; }.card-leads { animation-delay:-4.5s; }
.chart:after,.spark:after { animation:line-pulse 3.6s ease-in-out infinite; }
.bar-chart i { animation:bar-rise 2.9s ease-in-out infinite; }.bar-chart i:nth-child(2n) { animation-delay:-1.1s; }.bar-chart i:nth-child(3n) { animation-delay:-.5s; }
.orbit-one { animation:orbit-turn 36s linear infinite; }.orbit-two { animation:orbit-turn 24s linear infinite reverse; }
.solution-icon { animation:icon-breathe 4.8s ease-in-out infinite; }.solution-grid article:nth-child(2) .solution-icon { animation-delay:-.8s; }.solution-grid article:nth-child(3) .solution-icon { animation-delay:-1.6s; }.solution-grid article:nth-child(4) .solution-icon { animation-delay:-2.4s; }.solution-grid article:nth-child(5) .solution-icon { animation-delay:-3.2s; }.solution-grid article:nth-child(6) .solution-icon { animation-delay:-4s; }
@media (prefers-reduced-motion:reduce) { .hero-light-blue,.hero-light-purple,.dashboard-card,.chart:after,.spark:after,.bar-chart i,.orbit-one,.orbit-two,.solution-icon { animation:none; } }

/* The closing CTA becomes a deliberate vertical stack on phone screens. */
@media (max-width:620px) {
  .cta-section { min-height:560px; grid-template-columns:1fr; gap:24px; padding:50px 26px 44px; }
  .cta-section>img { right:50%; bottom:-2%; width:155%; transform:translateX(50%); opacity:.62; }
  .cta-section:after { background:linear-gradient(90deg,#02070af2,#02070a8a 50%,#02070af2); }
  .cta-copy,.cta-actions { justify-self:start; }
  .cta-actions { min-width:0; width:min(100%,300px); }
  .integrations { padding-inline:18px; }
  .integration-orbit { width:100%; padding:32px; transform:none; margin:0 auto; }
  .partner { width:76px; min-height:56px; padding:5px; font-size:14px; }
  .partner small { margin-top:2px; font-size:6px; }
.partner.cdk { font-size:17px; }.partner.reynolds { font-size:18px; }.partner.dealertrack { font-size:17px; }.partner.ekar,.partner.pbs { font-size:15px; }
  .integration-orbit strong { width:84px; min-height:62px; padding:5px; font-size:8px; }
}

/* Integration partners are connected by an intentionally active, but restrained, data field. */
.integration-orbit {
  isolation:isolate;
  overflow:visible;
  background:
    radial-gradient(circle at 50% 49%, rgba(38, 150, 255, .22), transparent 29%),
    radial-gradient(circle at 25% 70%, rgba(48, 114, 255, .16), transparent 44%),
    radial-gradient(circle at 76% 24%, rgba(196, 47, 255, .15), transparent 40%),
    conic-gradient(from 18deg, transparent 0 10%, rgba(14, 157, 255, .7) 17%, transparent 29%, rgba(158, 48, 255, .64) 48%, transparent 61%, rgba(19, 153, 255, .7) 79%, transparent 94%);
}

.integration-orbit::before,
.integration-orbit::after {
  position:absolute;
  z-index:0;
  content:"";
  pointer-events:none;
  border-radius:50%;
}

.integration-orbit::before {
  inset:-12%;
  background:repeating-conic-gradient(from 12deg, transparent 0 11deg, rgba(48, 193, 255, .12) 12deg 13deg, transparent 14deg 25deg), conic-gradient(from 270deg, transparent 0 8%, #0cafff 12% 15%, transparent 18% 37%, #8d31ef 42% 45%, transparent 50% 72%, #168cff 79% 82%, transparent 86%);
  -webkit-mask:radial-gradient(closest-side, transparent 53%, #000 55% 58%, transparent 61%);
  mask:radial-gradient(closest-side, transparent 53%, #000 55% 58%, transparent 61%);
  filter:drop-shadow(0 0 9px rgba(25, 145, 255, .75));
  opacity:.92;
  animation:integration-wisp-clockwise 18s linear infinite;
}

.integration-orbit::after {
  inset:1%;
  background:repeating-conic-gradient(from 100deg, transparent 0 15deg, rgba(125, 57, 255, .12) 16deg 17deg, transparent 18deg 35deg), conic-gradient(from 30deg, transparent 0 16%, #8b35f4 21% 25%, transparent 29% 53%, #08bbff 61% 66%, transparent 71% 88%, #246cff 94% 97%, transparent);
  -webkit-mask:radial-gradient(closest-side, transparent 68%, #000 70% 72%, transparent 75%);
  mask:radial-gradient(closest-side, transparent 68%, #000 70% 72%, transparent 75%);
  filter:drop-shadow(0 0 7px rgba(155, 58, 255, .6));
  opacity:.82;
  animation:integration-wisp-counter 24s linear infinite;
}

.integration-orbit .orbit-line { z-index:1; border-color:rgba(53, 143, 224, .56); box-shadow:0 0 14px rgba(12, 132, 255, .2); }
.integration-orbit .orbit-two { border-color:rgba(138, 73, 231, .56); box-shadow:0 0 16px rgba(157, 55, 255, .28); }
.integration-orbit .partner,
.integration-orbit strong { z-index:2; }
.integration-orbit .partner { border-color:rgba(48, 140, 207, .86); background:linear-gradient(145deg, rgba(7, 28, 43, .97), rgba(3, 12, 22, .97)); box-shadow:0 0 22px rgba(0, 138, 255, .23), inset 0 1px 0 rgba(131, 212, 255, .11); }
.integration-orbit .partner b { display:block; font:inherit; }
.integration-orbit .partner small { color:#d7edf8; font-family:Montserrat, sans-serif; font-weight:700; }
.integration-orbit .partner.cdk { color:#fff; text-shadow:0 0 14px rgba(255, 255, 255, .22); }
.integration-orbit .partner.reynolds { color:#fff; font-family:Montserrat, sans-serif; }
.integration-orbit .reynolds-mark { color:#f6c841; font-family:Georgia, serif; font-size:34px; line-height:.55; text-shadow:0 0 13px rgba(246, 200, 65, .36); }
.integration-orbit .partner.dealertrack { color:#fff; }
.integration-orbit .dealertrack-mark { display:grid; place-items:center; width:29px; height:29px; margin:0 auto 3px; border-radius:3px; color:#fff; background:#2b90dc; box-shadow:0 0 13px rgba(43, 144, 220, .58); font-size:17px; font-weight:800; letter-spacing:-1px; }
.integration-orbit .partner.ekar { color:#f5f8fa; text-shadow:0 0 13px rgba(92, 221, 255, .23); }
.integration-orbit .partner.pbs { color:#fff; text-shadow:0 0 13px rgba(255, 255, 255, .22); }
.integration-orbit strong { background:linear-gradient(145deg, rgba(5, 28, 53, .98), rgba(5, 11, 26, .98)); box-shadow:0 0 31px rgba(19, 115, 255, .62), inset 0 1px 0 rgba(132, 202, 255, .2); }

@keyframes integration-wisp-clockwise { to { transform:rotate(1turn) scale(1.03); } }
@keyframes integration-wisp-counter { to { transform:rotate(-1turn) scale(.98); } }

@media (max-width:620px) {
  .integration-orbit::before { inset:-7%; }
  .integration-orbit::after { inset:4%; }
  .integration-orbit .reynolds-mark { font-size:26px; }
  .integration-orbit .dealertrack-mark { width:24px; height:24px; font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .integration-orbit::before,
  .integration-orbit::after { animation:none; }
}

/* Why XO uses bespoke line illustrations so each promise can be scanned as a distinct benefit. */
.why-grid { gap:0; border-block:1px solid rgba(62, 88, 99, .52); }
.why-grid article {
  display:grid;
  grid-template-columns:58px minmax(0, 1fr);
  grid-template-rows:auto auto;
  column-gap:16px;
  align-content:start;
  min-height:164px;
  padding:26px 24px 22px;
  border-left:1px solid rgba(72, 98, 109, .7);
}
.why-grid article:first-child { border-left:0; }
.why-grid article .why-icon { display:block; grid-row:1 / span 2; grid-column:1; margin:0; }
.why-grid .why-icon img { display:block; width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(28, 145, 255, .22)); }
.why-grid article:nth-child(2) .why-icon img { filter:drop-shadow(0 0 8px rgba(32, 216, 201, .28)); }
.why-grid article:nth-child(4) .why-icon img { filter:drop-shadow(0 0 8px rgba(147, 74, 255, .3)); }
.why-grid h3 { grid-column:2; margin:1px 0 8px; color:#f5f8fa; font-size:15px; font-weight:800; line-height:1.28; letter-spacing:.01em; text-transform:uppercase; }
.why-grid p { grid-column:2; margin:0; color:#b7c5ca; font-size:13px; font-weight:500; line-height:1.55; }

@media (max-width:1080px) {
  .why-grid { gap:0; }
  .why-grid article:nth-child(4) { border-left:0; }
}

@media (max-width:780px) {
  .why-grid article { min-height:148px; padding:22px 18px; }
  .why-grid article:nth-child(3),
  .why-grid article:nth-child(5) { border-left:0; }
  .why-grid article:nth-child(4) { border-left:1px solid rgba(72, 98, 109, .7); }
  .why-grid h3 { font-size:14px; }
  .why-grid p { font-size:12px; }
}

@media (max-width:440px) {
  .why-grid article,
  .why-grid article:nth-child(3),
  .why-grid article:nth-child(4),
  .why-grid article:nth-child(5) { min-height:118px; padding:19px 12px; border-left:0; border-top:1px solid rgba(72, 98, 109, .55); }
  .why-grid article:first-child { border-top:0; }
  .why-grid article { grid-template-columns:50px minmax(0, 1fr); column-gap:13px; }
  .why-grid .why-icon img { width:42px; height:42px; }
  .why-grid h3 { margin-top:0; font-size:13px; }
}

/* Footer navigation mirrors the product architecture and keeps the signup control compact. */
.site-footer {
  display:grid;
  grid-template-columns:minmax(190px, 1.05fr) minmax(550px, 3.4fr) minmax(220px, 1.1fr);
  gap:46px;
  padding:52px clamp(24px, 5vw, 96px) 24px;
  border-top:1px solid #202e34;
  color:#aebbc1;
  background:linear-gradient(110deg, #04080b, #070d12 54%, #05090d);
  font-size:12px;
}
.site-footer > .footer-brand { display:block; }
.footer-brand .brand-lockup-image { display:block; width:157px; height:auto; min-width:0; margin-bottom:18px; }
.footer-brand > p { max-width:185px; margin:0; color:#c2ccd0; font-size:12px; line-height:1.7; }
.footer-social { display:flex; gap:9px; margin-top:24px; }
.footer-social a { display:grid; place-items:center; width:31px; height:31px; border:1px solid #516068; border-radius:50%; color:#d5dee1; font-size:9px; font-weight:800; letter-spacing:0; text-transform:uppercase; transition:border-color .2s ease,color .2s ease,transform .2s ease; }
.footer-social a:hover { transform:translateY(-2px); border-color:#ffc91c; color:#ffc91c; }
.site-footer > .footer-links { display:grid; grid-template-columns:1.45fr .9fr 1.2fr .85fr; align-content:start; justify-content:initial; gap:28px; flex-wrap:nowrap; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-column h2,
.footer-subscribe h2 { margin:0 0 9px; color:#f4f7f8; font-size:11px; font-weight:800; letter-spacing:.08em; line-height:1.1; text-transform:uppercase; }
.footer-column a { color:#b9c6ca; font-size:11px; line-height:1.35; transition:color .2s ease; }
.footer-column a:hover { color:#28b7ff; }
.footer-subscribe { align-self:start; min-width:0; padding-left:34px; border-left:1px solid #2b3a42; }
.footer-subscribe > p { max-width:205px; margin:0 0 17px; color:#b8c5ca; font-size:11px; line-height:1.6; }
.footer-subscribe-form { display:flex; align-items:center; height:43px; border:1px solid #52636b; border-radius:3px; background:#071015; transition:border-color .2s ease,box-shadow .2s ease; }
.footer-subscribe-form:focus-within { border-color:#30b9ff; box-shadow:0 0 0 3px rgba(48,185,255,.13); }
.footer-subscribe-form input { min-width:0; flex:1; height:100%; padding:0 12px; border:0; outline:0; color:#f2f8f9; background:transparent; font:600 11px Montserrat, sans-serif; }
.footer-subscribe-form input::placeholder { color:#83939a; opacity:1; }
.footer-subscribe-form button { display:grid; place-items:center; width:42px; height:100%; padding:0; border:0; color:#e2f5fb; background:transparent; cursor:pointer; font:700 19px Montserrat, sans-serif; transition:color .2s ease,transform .2s ease; }
.footer-subscribe-form button:hover { color:#ffcf21; transform:translate(2px,-1px); }
.footer-subscribe-status { min-height:17px; margin:7px 0 0!important; color:#89e7c6!important; font-size:9px!important; line-height:1.4!important; }
.footer-policies { display:flex; gap:20px; margin-top:12px; }
.footer-policies a { color:#89989e; font-size:9px; }
.footer-policies a:hover { color:#ffc91c; }
.site-footer > .footer-legal { display:flex; grid-column:1 / -1; justify-content:space-between; gap:18px; margin-top:4px; padding-top:19px; border-top:1px solid #1e2c32; color:#73858c; font-size:10px; }

@media (max-width:1080px) {
  .site-footer { grid-template-columns:minmax(180px, .9fr) minmax(400px, 2.4fr); gap:36px; }
  .footer-subscribe { grid-column:2; padding-left:0; border-left:0; }
}

@media (max-width:780px) {
  .site-footer { grid-template-columns:1fr; gap:33px; padding:44px 24px 22px; }
  .site-footer > .footer-links { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 22px; }
  .footer-subscribe { grid-column:auto; max-width:330px; }
}

@media (max-width:440px) {
  .site-footer > .footer-links { grid-template-columns:1fr 1fr; gap:28px 16px; }
  .footer-column { gap:8px; }
  .footer-column a { font-size:10px; }
  .site-footer > .footer-legal { flex-direction:column; gap:7px; }
}

.button[type="button"] { cursor:pointer; }
.contact-modal { width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 32px); margin:auto; padding:0; border:1px solid #3a5664; border-radius:8px; color:var(--ink); background:transparent; box-shadow:0 26px 90px rgba(0,0,0,.72); }
.contact-modal::backdrop { background:rgba(1,5,8,.78); backdrop-filter:blur(6px); }
.contact-modal-panel { position:relative; overflow:auto; max-height:calc(100vh - 32px); padding:36px; background:linear-gradient(145deg,#0c1920,#060c11); }
.contact-modal h2 { margin:0 0 10px; color:#f6f9fa; font-size:clamp(26px,4vw,38px); font-weight:800; line-height:1.08; text-transform:uppercase; }
.modal-copy { max-width:450px; margin:0 0 26px; color:#b5c4c9; font-size:13px; line-height:1.65; }
.modal-copy strong { color:#62caff; }
.modal-close { position:absolute; top:13px; right:13px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #4c626c; border-radius:50%; color:#f4f8f9; background:rgba(7,16,22,.76); cursor:pointer; font-size:24px; line-height:1; }
.modal-close:hover { border-color:var(--gold); color:var(--gold); }
.modal-close:focus-visible,.marketing-form input:focus-visible,.marketing-form textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.marketing-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.marketing-form label { display:grid; gap:7px; color:#d9e3e6; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.marketing-form input,.marketing-form textarea { width:100%; padding:11px 12px; border:1px solid #3a515b; border-radius:4px; color:#f3f9fa; background:#071116; font:500 13px Montserrat,sans-serif; letter-spacing:0; text-transform:none; }
.marketing-form textarea { min-height:92px; resize:vertical; }
.marketing-form .form-wide { grid-column:1 / -1; }
.marketing-form .button { justify-self:start; }
.marketing-form-status { min-height:18px; margin:0; color:#84e5c0; font-size:11px; line-height:1.45; }
.marketing-form .button:disabled { cursor:wait; opacity:.68; transform:none; }

@media (max-width:540px) {
  .contact-modal-panel { padding:31px 22px 24px; }
  .marketing-form { grid-template-columns:1fr; }
  .marketing-form .form-wide { grid-column:auto; }
  .marketing-form .button { width:100%; }
}

/* Product navigation exposes the active XO product without leaving the page. */
.nav-products { position:relative; }.nav-product-toggle { position:relative; padding:0; border:0; color:#e9eff1; background:transparent; font-size:10px; font-weight:800; letter-spacing:.02em; line-height:1.3; text-transform:uppercase; cursor:pointer; }.nav-product-toggle:after { content:""; position:absolute; right:0; bottom:-8px; left:0; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .2s ease; }.nav-product-toggle:hover:after,.nav-product-toggle:focus-visible:after,.nav-products:hover .nav-product-toggle:after,.nav-products:focus-within .nav-product-toggle:after { transform:scaleX(1); transform-origin:left; }.nav-product-toggle:focus-visible,.product-menu a:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }.product-menu { position:absolute; top:calc(100% + 17px); left:50%; z-index:12; min-width:150px; padding:7px; border:1px solid #2d4652; border-radius:5px; background:rgba(5,14,19,.98); box-shadow:0 15px 30px rgba(0,0,0,.36); opacity:0; pointer-events:none; transform:translate(-50%,-6px); transition:opacity .18s ease,transform .18s ease; }.nav-products:hover .product-menu,.nav-products:focus-within .product-menu,.nav-products.is-open .product-menu { opacity:1; pointer-events:auto; transform:translate(-50%,0); }.product-menu a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 11px; border-radius:3px; color:#f6f8f9; font-size:10px; font-weight:800; white-space:nowrap; }.product-menu a:hover { color:#071016; background:var(--gold); }.product-menu a:after { display:none; }.product-menu span { color:var(--blue); font-size:13px; }.product-menu a:hover span { color:inherit; }
@media (max-width:780px) { .nav-products { display:grid; gap:8px; }.nav-product-toggle { justify-self:start; }.product-menu { position:static; min-width:0; width:min(230px,100%); max-height:0; padding:0 7px; overflow:hidden; opacity:0; pointer-events:none; transform:none; transition:max-height .18s ease,opacity .18s ease,padding .18s ease; }.nav-products.is-open .product-menu,.nav-products:focus-within .product-menu { max-height:70px; padding:7px; opacity:1; pointer-events:auto; transform:none; } }

/* Keep the desktop flyout open while the pointer travels from Products to RO Image. */
@media (min-width:781px) { .nav-products:after { content:""; position:absolute; top:100%; right:0; left:0; height:18px; }.product-menu { top:calc(100% + 8px); } }

/* Match the reference hero composition: copy and visual system begin on one horizon. */
@media (min-width:781px) { .hero { align-items:start; padding-top:48px; }.hero-art { align-self:start; margin-top:0; }.hero-art>img { inset:0 -2% -2% 0; } }

/* Desktop hero framing mirrors the reference: a compact dashboard above a centered vehicle. */
@media (min-width:1081px) { .hero-art { background:#03070b url('/images/xo-hero-automotive.png') right 30%/160% auto no-repeat; }.hero-art>img { opacity:0; }.hero-dashboard { inset:0 3% 0 20%; border:0; background:transparent; box-shadow:none; }.card-inventory { left:2%; width:46%; }.card-value { right:2%; width:43%; }.card-roi { left:16%; }.card-leads { right:2%; } }

/* The value proposition always stays above the decorative vehicle layer. */
.hero-copy { position:relative; z-index:2; }

/* The hero proof row uses compact image assets so the value claims stay clear at every breakpoint. */
.hero-proof { max-width:590px; }
.hero-proof li { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; min-height:40px; }
.hero-proof-icon { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(21,156,255,.35)); }
.hero-proof li .hero-proof-label { display:block; margin:0; color:#c1cdd1; font-size:9px; font-weight:700; line-height:1.45; }
@media (max-width:440px) { .hero-proof li { grid-template-columns:30px minmax(0,1fr); min-height:36px; }.hero-proof-icon { width:30px; height:30px; } }

/* Solution cards use their own clear visual language and a type scale that earns the available space. */
.solution-grid article { display:flex; flex-direction:column; min-height:320px; padding:27px 22px 23px; }
.solution-icon-image { width:54px; height:54px; object-fit:contain; flex:0 0 auto; animation:solution-icon-breathe 4.8s ease-in-out infinite; }
@keyframes solution-icon-breathe { 0%,100% { opacity:.88; transform:scale(1); } 50% { opacity:1; transform:scale(1.045); } }
.solution-grid article:nth-child(2) .solution-icon-image { animation-delay:-.8s; }.solution-grid article:nth-child(3) .solution-icon-image { animation-delay:-1.6s; }.solution-grid article:nth-child(4) .solution-icon-image { animation-delay:-2.4s; }.solution-grid article:nth-child(5) .solution-icon-image { animation-delay:-3.2s; }.solution-grid article:nth-child(6) .solution-icon-image { animation-delay:-4s; }
.solution-grid h3 { min-height:58px; margin:24px 0 12px; font-size:14px; line-height:1.32; letter-spacing:.01em; }
.solution-grid p { min-height:78px; margin:0; font-size:12px; line-height:1.65; }
.solution-grid a { margin-top:auto; font-size:10px; letter-spacing:.06em; }
@media (max-width:1080px) { .solution-grid article { min-height:280px; }.solution-grid h3 { min-height:38px; }.solution-grid p { min-height:61px; } }
@media (max-width:780px) { .solution-grid article { min-height:255px; padding:23px 18px 19px; }.solution-icon-image { width:48px; height:48px; }.solution-grid h3 { min-height:37px; margin:18px 0 9px; font-size:13px; }.solution-grid p { min-height:55px; font-size:11px; }.solution-grid a { font-size:9px; } }
@media (max-width:440px) { .solution-grid article { min-height:246px; padding:23px 20px 19px; }.solution-grid h3 { font-size:14px; }.solution-grid p { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .solution-icon-image { animation:none; } }

/* Preserve a deliberate vehicle crop between the desktop composition and the phone stack. */
@media (min-width:781px) and (max-width:1080px) { .hero-art>img { width:100%; height:100%; inset:0; object-fit:cover; object-position:76% center; } }
@media (max-width:780px) { .hero-art>img { width:100%; height:100%; inset:0; object-fit:cover; object-position:74% center; } }

/* Keep the phone CTA copy readable while the vehicle remains a supporting visual. */
@media (max-width:620px) { .cta-section:after { background:linear-gradient(180deg,rgba(2,7,10,.92) 0 36%,rgba(2,7,10,.62) 65%,rgba(2,7,10,.78)),linear-gradient(90deg,#02070af2,#02070a8a 50%,#02070af2); } }