/* ==========================================================================
   Home page sections (design coordinates: 1rem = 10px at 1728px)
   ========================================================================== */

/* ---------- 01 Hero ---------- */
.hero { position: relative; height: 108rem; overflow: hidden; color: #fff;
	background: radial-gradient(51.84rem 54rem at 17.28rem 21.6rem, rgba(110, 194, 227, .06), transparent),
		radial-gradient(60.48rem 54rem at 129.6rem 48.6rem, rgba(249, 112, 20, .1), transparent),
		linear-gradient(180deg, #06142a 0%, #06142a 55%, #0a1e3a 100%); }
.hero__media { position: absolute; left: 59rem; top: 17.6rem; width: 106rem; height: 66.25rem; }
.hero__m { position: absolute; inset: 0; clip-path: url(#clip-hero-m); overflow: hidden; }
.hero__m img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.hero__tint { position: absolute; inset: 0; background: radial-gradient(53rem 33.125rem at 50% 50%, rgba(5, 15, 33, .15), rgba(5, 15, 33, .45)); pointer-events: none; }
.js .hero__media { --p: 0; clip-path: polygon(0 100%, calc(var(--p) * 140%) 100%, calc(var(--p) * 140% - 40%) 0, 0 0); }
.js .hero__media.is-revealed { clip-path: none; }
@media (prefers-reduced-motion: reduce) { .js .hero__media { clip-path: none; } }
.hero__play { position: absolute; left: 58rem; top: 27.525rem; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.hero__play-ring { position: relative; display: block; width: 11.2rem; height: 11.2rem; border-radius: 50%; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .7s var(--ease-out); }
.hero__play-ring svg { width: 100%; height: 100%; }
.hero__play-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); animation: ring-pulse 2.6s var(--ease-out) infinite; }
@keyframes ring-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.hero__play:hover .hero__play-ring { transform: scale(1.08); }
.hero__play-label { font-weight: 600; font-size: var(--t-small); letter-spacing: .08em; }
.hero__title { position: absolute; left: 15.4rem; top: 22rem; width: 76rem; z-index: 2; }
.hero__btns { position: absolute; left: 15.4rem; top: 56rem; display: flex; gap: 1.4rem; align-items: center; z-index: 2; }
.hero__panel { position: absolute; z-index: 3; left: 15.4rem; top: 67.6rem; width: 52rem; height: 25rem; padding: 4.6rem 4.8rem; }
.hero__panel p { width: 40rem; font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 15px); line-height: 3rem; letter-spacing: -.01em; }
.hero__chevrons { position: absolute; left: 41.9rem; top: 18.3rem; width: 5.2rem; height: 2.6rem; overflow: hidden; }
.hero__chevrons svg { width: 100%; height: 100%; }
.hero__chevrons svg path { animation: chev 1.8s var(--ease-out) infinite; }
.hero__chevrons svg path + path { animation-delay: .15s; }
@keyframes chev { 0%, 60%, 100% { transform: translateX(0); opacity: 1; } 30% { transform: translateX(6px); opacity: .6; } }
.hero__ticker { position: absolute; left: 15.4rem; top: 96.2rem; display: flex; align-items: center; gap: 1.6rem; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); }
.hero__ticker i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ---------- 01b Quick links ---------- */
.quick-links { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 12.4rem; background: #f1f1f1 url("../../svg/diagonal-texture.svg") -14rem 0 / 200rem 12.4rem no-repeat; border-bottom: 1px solid var(--line-dark); }
.quick-links__item { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 5.6rem; color: var(--text-strong); overflow: hidden; isolation: isolate; }
.quick-links__item + .quick-links__item { border-left: 1px solid var(--line-dark); }
.quick-links__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .6); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out); }
.quick-links__item:first-child::before { transform: none; }
.quick-links:hover .quick-links__item:first-child:not(:hover)::before { transform: scaleY(0); }
.quick-links__item:hover::before { transform: none; }
.quick-links__text { font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 18px); line-height: 3.2rem; letter-spacing: -.015em; }
.quick-links__arrow { width: 2.2rem; height: 2.2rem; transition: transform .6s var(--ease-out); }
.quick-links__arrow svg { width: 100%; height: 100%; overflow: visible; }
.quick-links__arrow path { transition: stroke .3s; }
.quick-links__item:first-child .quick-links__arrow path { stroke: var(--orange); }
.quick-links:hover .quick-links__item:first-child:not(:hover) .quick-links__arrow path { stroke: #1F2938; }
.quick-links__item:hover .quick-links__arrow path { stroke: var(--orange); }
.quick-links__item:hover .quick-links__arrow { transform: translate(.4rem, -.4rem) rotate(45deg); }

/* ---------- 01c Rack intro ---------- */
.rack-intro { position: relative; height: 90rem; overflow: hidden;
	background: radial-gradient(51.84rem 45rem at 17.28rem 18rem, rgba(110, 194, 227, .14), transparent),
		radial-gradient(60.48rem 49.5rem at 129.6rem 49.5rem, rgba(249, 112, 20, .16), transparent), #f2f2f2; }
.rack-intro__copy { position: absolute; left: 19.4rem; top: 13.4rem; z-index: 2; }
.rack-intro__copy .eyebrow { margin-bottom: 1.6rem; }
.rack-intro__title { width: 64rem; font-size: 8.4rem; line-height: 8.8rem; letter-spacing: -.03em; color: var(--text-strong); }
.rack-intro__text { width: 56rem; margin: 3.6rem 0 4rem; font-size: max(2rem, 16px); line-height: 3.4rem; color: rgba(31, 41, 55, .65); }
.rack-intro__text strong { font-weight: 600; color: rgba(31, 41, 55, .9); }
.rack-intro__visual { position: absolute; left: 51.4rem; top: 7.5rem; width: 107.2rem; height: 67.1rem; }
.rack-intro__image { position: absolute; inset: 0; }
.rack-intro__image img { width: 100%; height: 100%; object-fit: cover; }
.float-card { position: absolute; display: flex; border: 1px solid rgba(255, 255, 255, .9); border-radius: 1.6rem; background: linear-gradient(160deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .38) 71%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2.4rem 4.8rem rgba(5, 20, 51, .12); color: #1f2938; will-change: transform; }
.float-card--scan { left: 30.6rem; top: 7.5rem; align-items: center; gap: 1.6rem; padding: 1.8rem 2.6rem 1.8rem 1.8rem; }
.float-card__icon { width: 4.8rem; height: 4.8rem; flex: none; }
.float-card__icon svg { width: 100%; height: 100%; }
.float-card--scan strong { display: block; font-family: var(--f-head); font-weight: 600; font-size: max(1.8rem, 14px); line-height: 1.2; }
.float-card--scan small { display: block; margin-top: .2rem; font-size: var(--t-small); color: rgba(31, 41, 56, .6); white-space: pre; }
.float-card--stat { left: 36.6rem; top: 44.5rem; width: 25rem; flex-direction: column; gap: .6rem; padding: 2.2rem 2.4rem; }
.float-card__label { font-weight: 600; font-size: max(1.1rem, 10px); color: #f97014; }
.float-card--stat strong { font-family: var(--f-head); font-weight: 600; font-size: 4rem; line-height: 1.2; letter-spacing: -.03em; }
.float-card--stat > small:not(.float-card__label) { font-size: var(--t-small); color: rgba(31, 41, 56, .6); }
.float-card__chart { position: relative; display: flex; align-items: flex-end; gap: .8rem; height: 3.6rem; width: 20.2rem; }
.float-card__chart i { width: 2.2rem; border-radius: 3px; background: #f97014; transform-origin: bottom; }
.float-card__chart i:nth-child(1) { height: 1.4rem; opacity: .25; }
.float-card__chart i:nth-child(2) { height: 2rem; opacity: .33; }
.float-card__chart i:nth-child(3) { height: 1.6rem; opacity: .41; }
.float-card__chart i:nth-child(4) { height: 2.6rem; opacity: .49; }
.float-card__chart i:nth-child(5) { height: 2.2rem; opacity: .57; }
.float-card__chart i:nth-child(6) { height: 3rem; opacity: .65; }
.float-card__chart i:nth-child(7) { height: 3.6rem; opacity: 1; }
.float-card--badge { left: 93.6rem; top: 3.5rem; align-items: center; gap: 1rem; padding: 1.2rem 2rem 1.2rem 1.6rem; border-radius: 80px; font-weight: 600; font-size: var(--t-small); }
.float-card--badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* ---------- 02 About ---------- */
.about-band { position: relative; padding: 12rem 0 12rem; color: #fff; background: radial-gradient(60.48rem 37.5rem at 158.98rem 6.25rem, rgba(249, 112, 20, .1), transparent), var(--canvas); }
.about-band__grid { position: relative; display: grid; grid-template-columns: 80rem 54rem; min-height: 38.5rem; }
.about-band__left .eyebrow { margin-bottom: 1.2rem; }
.about-band__left .h2 { width: 62rem; }
.about-band__sub { width: 36rem; margin-top: 2.4rem; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); }
.about-band .pills { position: absolute; left: 0; top: 33.8rem; }
.about-band__mark { position: absolute; left: 38rem; top: 17.4rem; width: 29rem; height: 11.6rem; pointer-events: none; }
.about-band__mark svg { width: 100%; height: 100%; }
.about-band__right { padding-top: 3.2rem; }
.about-band__right .body-lg { margin-bottom: 2rem; }
.about-band__text { font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); }
.about-band__right .btn-row { position: absolute; top: 33.3rem; }

/* ---------- 03 Solutions slider ---------- */
.sol-slider { position: relative; padding: 0 0 17.5rem; color: #fff; overflow: hidden;
	background: radial-gradient(51.84rem 49.15rem at 164.16rem 88.47rem, rgba(249, 112, 20, .08), transparent), radial-gradient(60.48rem 58.98rem at 8.64rem 29.49rem, rgba(110, 194, 227, .1), transparent), var(--canvas); }
.sol-slider__head { display: flex; justify-content: space-between; align-items: flex-start; height: 12rem; }
.sol-slider__head .eyebrow { margin-bottom: 1.2rem; }
.sol-slider__head .h2 { white-space: nowrap; }
.sol-slider__intro { width: 42rem; margin-top: 4.8rem; line-height: 2.4rem; }
.sol-slider__track { margin-top: 8rem; padding-left: var(--gutter); cursor: grab; user-select: none; }
.sol-slider__track.is-dragging { cursor: grabbing; }
.sol-slider__rail { display: flex; gap: 2.8rem; width: max-content; padding-right: var(--gutter); will-change: transform; }
.sol-card { display: block; width: 34.4rem; flex: none; color: #fff; }
.sol-card__media { position: relative; display: block; height: 40rem; overflow: hidden; clip-path: polygon(4.4rem 0, 100% 0, 100% 100%, 0 100%, 0 4.4rem); }
.sol-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease-out); pointer-events: none; }
.sol-card:hover .sol-card__media img { transform: scale(1.08); }
.sol-card__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 31, 59, 0) 55%, rgba(10, 31, 59, .55) 100%); }
.sol-card__tag { position: absolute; right: 1.6rem; top: 1.6rem; display: flex; }
.sol-card__tag span { padding: .8rem 1.2rem; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--t-small); line-height: 2rem; transition: background .4s; }
.sol-card:hover .sol-card__tag span + span { background: var(--orange); }
.sol-card__tags { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem; font-size: var(--t-small); line-height: 2rem; color: var(--text-muted-inv); }
.sol-card__tags span { display: inline-flex; align-items: center; gap: .6rem; }
.sol-card__tags i { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.sol-card__title { display: block; width: 32.4rem; margin-top: 1.2rem; font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; }
.sol-card__text { display: block; width: 32.4rem; margin-top: 1rem; font-size: var(--t-small); line-height: 2rem; color: var(--text-muted-inv); }
.sol-card__more { display: inline-flex; gap: 1rem; margin-top: 1.8rem; font-family: var(--f-head); font-weight: 600; font-size: max(1.6rem, 14px); line-height: 2rem; letter-spacing: -.005em; }
.sol-card__more b { font-weight: 600; color: var(--orange); transition: transform .5s var(--ease-out); }
.sol-card:hover .sol-card__more b { transform: translateX(.6rem); }
.sol-slider__progress { position: absolute; left: 0; right: 0; bottom: 10rem; height: 2px; background: var(--line-inv); margin-inline: auto; }
.sol-slider__progress span { position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: var(--orange); }

/* ---------- 03b Hub strip ---------- */
.hub-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--grey-50); border-top: 1px solid var(--line-dark); }
.hub-strip__item { position: relative; height: 56rem; padding: 5.6rem; color: var(--text-strong); overflow: hidden; isolation: isolate; }
.hub-strip__item + .hub-strip__item { border-left: 1px solid var(--line-dark); }
.hub-strip__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--canvas); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path .8s var(--ease-io); }
.hub-strip__item:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.hub-strip__icon { position: absolute; left: 28rem; top: 5.6rem; width: 9.6rem; height: 9.6rem; transition: transform .8s var(--ease-out); }
.hub-strip__icon img { width: 100%; height: 100%; object-fit: contain; }
.hub-strip__item:hover .hub-strip__icon { transform: translateY(-.6rem) rotate(-6deg) scale(1.06); }
.hub-strip__title { position: absolute; left: 5.6rem; top: 34.2rem; width: 33.6rem; font-family: var(--f-head); font-weight: 600; font-size: max(3rem, 21px); line-height: 3.6rem; letter-spacing: -.015em; transition: color .5s; }
.hub-strip__text { position: absolute; left: 5.6rem; top: 43.2rem; width: 32.2rem; font-size: var(--t-body); line-height: 2.4rem; opacity: .85; transition: color .5s; }
.hub-strip__item:hover .hub-strip__title, .hub-strip__item:hover .hub-strip__text { color: #fff; }
.hub-strip__go { position: absolute; left: 5.6rem; top: 5.6rem; width: 4.8rem; height: 4.8rem; padding: 1.3rem; border-radius: 50%; background: var(--orange); opacity: 0; transform: scale(.5) rotate(-45deg); transition: opacity .4s, transform .7s var(--ease-out); }
.hub-strip__go svg { width: 100%; height: 100%; overflow: visible; }
.hub-strip__item:hover .hub-strip__go { opacity: 1; transform: none; }

/* ---------- 05 Why choose us ---------- */
.why { position: relative; height: 86rem; color: #fff; background: radial-gradient(51.84rem 43rem at 17.28rem 8.6rem, rgba(110, 194, 227, .08), transparent), radial-gradient(60.48rem 47.3rem at 50% 47.3rem, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.why__head { position: absolute; left: 0; right: 0; top: 12rem; text-align: center; }
.why__head .eyebrow { margin-bottom: 1.2rem; }
.why__grid { position: absolute; left: 19.4rem; top: 29rem; width: 131rem; height: 47rem; }
.why__col { position: absolute; top: 0; width: 30rem; display: flex; flex-direction: column; gap: 2rem; }
.why__col:first-child { left: 0; }
.why__col:last-child { left: 101rem; }
.feature { display: flex; flex-direction: column; gap: 1.4rem; min-height: 15rem; }
.feature__icon { width: 3.6rem; height: 3.6rem; transition: transform .6s var(--ease-out); }
.feature__icon img { width: 100%; height: 100%; }
.feature:hover .feature__icon { transform: rotate(-12deg) scale(1.12); }
.feature h3 { white-space: nowrap; }
.feature p { font-size: var(--t-small); line-height: 2rem; color: var(--text-muted-inv); }
.why__centre { position: absolute; left: 41rem; top: 1rem; width: 52rem; height: 42rem; }
.why__lines { position: absolute; inset: 0; background-image: linear-gradient(var(--line-inv) 1px, transparent 1px), linear-gradient(90deg, var(--line-inv) 1px, transparent 1px); background-size: 6.5rem 7rem; background-position: 0 0; border-right: 1px solid var(--line-inv); border-bottom: 1px solid var(--line-inv); }
.why__img { position: absolute; left: 4rem; top: 2rem; width: 44rem; height: 40rem; clip-path: polygon(3rem 0, 100% 0, 100% 35rem, 37rem 100%, 0 100%, 0 7rem); overflow: hidden; }
.why__img img { width: 100%; height: 100%; object-fit: cover; }
.why__tint { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(249, 112, 20, 0), rgba(249, 112, 20, .55)); }

/* ---------- 06 Scale banner ---------- */
.scale-banner { position: relative; height: 79rem; color: #fff; background: var(--canvas); }
.scale-banner__media { position: absolute; left: 5.55rem; top: -.05rem; width: 161.7rem; height: 66.6rem; clip-path: url(#clip-banner); overflow: hidden; }
.scale-banner__img { position: absolute; inset: -6% 0; }
.scale-banner__img img { width: 100%; height: 100%; object-fit: cover; }
.scale-banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 20, 42, .85) 0%, rgba(6, 20, 42, .3) 60%, rgba(6, 20, 42, .15) 100%); }
.scale-banner__title { position: absolute; left: 15.2rem; top: 8.8rem; display: flex; gap: 1.4rem; }
.scale-banner__mark { width: 15rem; height: 6rem; margin-top: 2.6rem; flex: none; }
.scale-banner__mark svg { width: 100%; height: 100%; }
.scale-banner h2 { width: 90rem; font-size: 8.8rem; line-height: 9.2rem; letter-spacing: -.03em; }
.stats { position: absolute; left: 15.6rem; top: 57.5rem; display: flex; height: 19.5rem; }
.stat { position: relative; display: flex; flex-direction: column; gap: .8rem; width: 35.4rem; height: 100%; padding: 3.6rem 4rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2rem 4rem rgba(3, 13, 31, .35); overflow: hidden; isolation: isolate; transition: border-color .5s; }
.stat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange); clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease-io); }
.stat.is-active::before { clip-path: inset(0 0 0 0); }
.stat.is-active { border-color: var(--orange); }
.stat strong { font-family: var(--f-head); font-weight: 600; font-size: 5.2rem; line-height: 6.5rem; letter-spacing: -.025em; white-space: nowrap; }
.stat span { width: 27.4rem; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); transition: color .5s; }
.stat.is-active span { color: #fff; }

/* ---------- 07 Process tabs ---------- */
.process { position: relative; height: 78rem; color: #fff; background: radial-gradient(60.48rem 46.8rem at 129.6rem 39rem, rgba(249, 112, 20, .1), transparent), var(--canvas); }
.process__copy { position: absolute; left: 19.4rem; top: 16rem; width: 60rem; }
.process__copy .h2 { margin-bottom: 4.8rem; }
.tabs { position: relative; display: inline-flex; gap: 3.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line-inv); margin-bottom: 3.2rem; }
.tabs__btn { padding-top: 1rem; font-family: var(--f-head); font-weight: 600; font-size: max(1.7rem, 14px); line-height: 2.2rem; letter-spacing: -.01em; color: rgba(255, 255, 255, .55); transition: color .3s; }
.tabs__btn:hover, .tabs__btn.is-active { color: #fff; }
.tabs__bar { position: absolute; left: 0; bottom: -1px; height: 3px; width: 6.3rem; background: var(--orange); transition: transform .6s var(--ease-out), width .6s var(--ease-out); }
.process__texts { position: relative; width: 54rem; min-height: 7.2rem; margin-bottom: 4rem; }
.process__text { position: absolute; inset: 0 auto auto 0; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); opacity: 0; transform: translateY(1rem); transition: opacity .5s, transform .6s var(--ease-out); pointer-events: none; }
.process__text.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.process__visual { position: absolute; left: 89.4rem; top: 14rem; width: 64rem; height: 48rem; }
.process__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-inv) 1px, transparent 1px), linear-gradient(90deg, var(--line-inv) 1px, transparent 1px); background-size: 6.4rem 6.857rem; border-right: 1px solid var(--line-inv); border-bottom: 1px solid var(--line-inv); }
.process__images { position: absolute; left: 0; top: 2.4rem; width: 60rem; height: 43rem; clip-path: polygon(5.6rem 0, 100% 0, 100% calc(100% - 5.6rem), calc(100% - 5.6rem) 100%, 0 100%, 0 5.6rem); overflow: hidden; }
.process__img { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease-io); }
.process__img.is-active { clip-path: inset(0 0 0 0); z-index: 1; }
.process__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.process__img.is-active img { transform: scale(1); }
.process__card { position: absolute; left: 33rem; top: 19.6rem; width: 30rem; z-index: 2; padding: 2.8rem 3.2rem 3.2rem; background: linear-gradient(90deg, rgba(249, 112, 20, .85), rgba(249, 112, 20, .35)); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.process__card-inner { display: none; }
.process__card-inner.is-active { display: block; animation: card-in .7s var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(1.2rem); } }
.process__card-title { font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; margin-bottom: 1.4rem; }
.process__card ul { display: flex; flex-direction: column; gap: 1.4rem; }
.process__card li { display: flex; align-items: center; gap: 1rem; font-size: var(--t-small); line-height: 2rem; }
.process__card li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; flex: none; }

/* ---------- 09 Logos ---------- */
.logo-grid { padding: 4rem 0 0; background: radial-gradient(77.76rem 33.66rem at 50% 0, rgba(110, 194, 227, .12), transparent), #fcfcfc; }
.logo-grid__title { text-align: center; margin-bottom: 4rem; }
.logo-grid__cells { display: grid; grid-template-columns: repeat(4, 1fr); }
.logo-grid__cell { position: relative; display: grid; place-items: center; height: 23rem; border: 1px solid #d4d4d4; margin: 0 -1px -1px 0; overflow: hidden; }
.logo-grid__hl { position: absolute; inset: 0; background: var(--orange); clip-path: polygon(0 0, 93% 0, 100% 17%, 100% 100%, 0 100%); transform: translateY(101%); transition: transform .7s var(--ease-io); }
.logo-grid__cell:hover .logo-grid__hl, .logo-grid__cell.is-active .logo-grid__hl { transform: none; }
.logo-grid__name { position: relative; font-family: var(--f-head); font-weight: 600; font-size: 3rem; line-height: 4.6rem; letter-spacing: -.02em; color: var(--text-strong); opacity: .85; transition: color .4s, opacity .4s; }
.logo-grid__cell:hover .logo-grid__name, .logo-grid__cell.is-active .logo-grid__name { color: #fff; opacity: 1; }
.logo-grid__cell img { position: relative; max-width: 55%; max-height: 45%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; }
.logo-grid__cell:hover img, .logo-grid__cell.is-active img { filter: brightness(0) invert(1); opacity: 1; }

/* ==========================================================================
   Home – mobile
   ========================================================================== */
@media (max-width: 1023px) {
	.hero { height: auto; min-height: 100svh; padding: 11rem 2rem 4rem; display: flex; flex-direction: column; }
	.hero__media { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1060 / 662.5; order: 3; margin: 4rem 0 0; }
	.hero__play { left: 50%; top: 40%; transform: translate(-50%, -50%); }
	.hero__play-ring { width: 7.2rem; height: 7.2rem; }
	.hero__title, .hero__btns, .hero__panel, .hero__ticker { position: relative; left: auto; top: auto; }
	.hero__title { width: auto; order: 1; }
	.hero__btns { order: 2; margin-top: 3.2rem; flex-wrap: wrap; }
	.hero__panel { order: 4; width: auto; height: auto; margin-top: -4rem; padding: 2.8rem 2.4rem 6rem; }
	.hero__panel p { width: auto; font-size: 16px; line-height: 1.55; }
	.hero__chevrons { left: auto; right: 2.4rem; top: auto; bottom: 2rem; }
	.hero__ticker { order: 5; margin-top: 2.4rem; flex-wrap: wrap; font-size: 13px; gap: 1rem; }

	.quick-links { grid-template-columns: minmax(0, 1fr); height: auto; background-size: cover; }
	.quick-links__item { height: 7.6rem; padding: 0 2rem; }
	.quick-links__item + .quick-links__item { border-left: 0; border-top: 1px solid var(--line-dark); }

	.rack-intro { height: auto; padding: 8rem 2rem 6rem; }
	.rack-intro__copy, .rack-intro__visual { position: relative; left: auto; top: auto; }
	.rack-intro__title { width: auto; font-size: clamp(42px, 11vw, 64px); line-height: 1.05; }
	.rack-intro__text { width: auto; font-size: 17px; line-height: 1.65; margin: 2.4rem 0 3.2rem; }
	.rack-intro__visual { width: 100%; height: auto; aspect-ratio: 1072 / 671; margin-top: 4rem; }
	.float-card--scan { left: 4%; top: 2%; padding: 1rem 1.4rem 1rem 1rem; gap: 1rem; transform: scale(.9); transform-origin: left top; }
	.float-card--stat { left: auto; right: 2%; top: 55%; width: 18rem; padding: 1.4rem; }
	.float-card--stat strong { font-size: 28px; }
	.float-card__chart { width: 100%; }
	.float-card--badge { display: none; }

	.about-band { padding: 8rem 0; }
	.about-band__grid { grid-template-columns: minmax(0, 1fr); gap: 4rem; min-height: 0; }
	.about-band__left .h2 { width: auto; }
	.about-band .pills, .about-band__right .btn-row { position: relative; top: auto; }
	.about-band .pills { margin-top: 3.2rem; }
	.about-band__right { padding-top: 0; }
	.about-band__right .btn-row { margin-top: 3.2rem; }
	.about-band__mark { display: none; }

	.sol-slider { padding-bottom: 10rem; }
	.sol-slider__head { flex-direction: column; height: auto; gap: 2rem; }
	.sol-slider__head .h2 { white-space: normal; }
	.sol-slider__intro { width: auto; margin-top: 0; }
	.sol-slider__track { margin-top: 4.8rem; padding-left: 2rem; }
	.sol-slider__rail { gap: 1.6rem; padding-right: 2rem; }
	.sol-card { width: 78vw; max-width: 34rem; }
	.sol-card__title, .sol-card__text { width: auto; }
	.sol-slider__progress { bottom: 5rem; }

	.hub-strip { grid-template-columns: 1fr 1fr; }
	.hub-strip__item { height: auto; min-height: 30rem; padding: 3.2rem 2rem; display: flex; flex-direction: column; gap: 1.4rem; }
	.hub-strip__item + .hub-strip__item { border-left: 0; }
	.hub-strip__item:nth-child(even) { border-left: 1px solid var(--line-dark); }
	.hub-strip__item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
	.hub-strip__icon, .hub-strip__title, .hub-strip__text { position: relative; left: auto; top: auto; width: auto; }
	.hub-strip__icon { width: 6rem; height: 6rem; margin-bottom: 3.2rem; }
	.hub-strip__title { font-size: 21px; line-height: 1.2; }
	.hub-strip__text { font-size: 14px; }
	.hub-strip__go { display: none; }

	.why { height: auto; padding: 8rem 2rem; }
	.why__head, .why__grid, .why__col, .why__centre { position: relative; left: auto; top: auto; width: auto; height: auto; }
	.why__col:first-child, .why__col:last-child { left: auto; }
	.why__head { text-align: left; margin-bottom: 4rem; }
	.why__grid { display: flex; flex-direction: column; gap: 3.2rem; }
	.why__centre { order: -1; aspect-ratio: 52 / 42; }
	.why__img { left: 7.7%; top: 4.8%; width: 84.6%; height: 95.2%; clip-path: polygon(7% 0, 100% 0, 100% 87%, 84% 100%, 0 100%, 0 17%); }
	.why__lines { background-size: 12.5% 16.67%; }
	.feature { min-height: 0; }
	.feature h3 { white-space: normal; }

	.scale-banner { height: auto; padding: 0 0 6rem; }
	.scale-banner__media { position: relative; left: auto; top: auto; width: 100%; height: 70vw; min-height: 34rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	.scale-banner__title { left: 2rem; right: 2rem; top: 6rem; flex-direction: column; gap: 1.6rem; }
	.scale-banner__mark { width: 9rem; height: 3.6rem; margin: 0; }
	.scale-banner h2 { width: auto; font-size: clamp(40px, 11vw, 64px); line-height: 1.05; }
	.stats { position: relative; left: auto; top: auto; height: auto; display: grid; grid-template-columns: 1fr 1fr; margin: -6rem 2rem 0; }
	.stat { width: auto; padding: 2.4rem 2rem; }
	.stat strong { font-size: 30px; line-height: 1.2; }
	.stat span { width: auto; font-size: 13px; line-height: 1.5; }

	.process { height: auto; padding: 8rem 2rem; display: flex; flex-direction: column; gap: 4.8rem; }
	.process__copy, .process__visual { position: relative; left: auto; top: auto; width: auto; }
	.process__texts { width: auto; }
	.tabs { gap: 2.4rem; max-width: 100%; overflow-x: auto; }
	.process__visual { width: 100%; height: auto; aspect-ratio: 640 / 480; }
	.process__grid { background-size: 10% 14.285%; }
	.process__images { width: 93.75%; height: 89.6%; top: 5%; }
	.process__card { left: auto; right: 0; top: auto; bottom: -3rem; width: 26rem; padding: 2rem; }

	.logo-grid__cells { grid-template-columns: 1fr 1fr; }
	.logo-grid__cell { height: 14rem; }
	.logo-grid__name { font-size: 20px; }
}