:root {
	--red: #701893;
	--red-dark: #1308AD;
	--red-soft: #F2E9F8;
	--grad: linear-gradient(135deg, #701893, #1308AD);
	--card-grad: linear-gradient(135deg, #721184, #1308AD);
	--navy: #101F38;
	--navy-2: #182B4C;
	--ink: #1B2436;
	--ink-soft: #5B6675;
	--ink-faint: #8A93A3;
	--white: #FFFFFF;
	--bg-alt: #F5F7FA;
	--bg-alt-2: #EEF2F7;
	--line: #E4E9F1;
	--line-soft: #EDF1F6;
	--teal: #0E9F8E;
	--amber: #F2A63B;
	--radius: 18px;
	--radius-sm: 12px;
	--shadow-sm: 0 1px 2px rgba(16, 31, 56, .06), 0 2px 8px rgba(16, 31, 56, .05);
	--shadow-md: 0 6px 20px rgba(16, 31, 56, .08), 0 2px 6px rgba(16, 31, 56, .05);
	--shadow-lg: 0 24px 60px rgba(16, 31, 56, .14);
	--maxw: 1180px;
}

* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; background: var(--white); color: var(--ink); font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif; font-optical-sizing: auto; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
h1, h2, h3, h4 {font-family: 'Nunito Sans', sans-serif; color: var(--navy); margin: 0; letter-spacing: -0.02em; line-height: 1.15; font-weight: 800;}
p {margin: 0;}
a {color: inherit; text-decoration: none;}
img, svg {display: block; max-width: 100%;}
.wrap {max-width: var(--maxw); margin: 0 auto; padding: 0 28px;}
.eyebrow {display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); background: var(--red-soft); padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;}
.eyebrow .dot {width: 7px; height: 7px; border-radius: 50%; background: var(--red);}
.eyebrow.on-dark {color: #fff; background: rgba(255, 255, 255, .22);}
.eyebrow.on-dark .dot {background: #fff;}
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 15.5px; padding: 14px 26px; border-radius: 12px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; border: 1px solid transparent; white-space: nowrap;}
.btn svg {width: 17px; height: 17px;}
.btn-primary {background: var(--grad); color: #fff; box-shadow: 0 10px 24px rgba(90, 20, 150, .30);}
.btn-primary:hover {filter: brightness(1.08) saturate(1.08); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(90, 20, 150, .40);}
.btn-white {background: #fff; color: var(--navy); box-shadow: 0 12px 28px rgba(0, 0, 0, .22);}
.btn-white:hover {background: #fff; color: var(--navy); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .28);}
.btn-ghost {background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm);}
.btn-ghost:hover {border-color: #c9d3e0; transform: translateY(-2px);}
.btn-ghost-dark {background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .24);}
.btn-ghost-dark:hover {background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5);}
.logo {display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 21px; color: var(--navy); letter-spacing: -0.03em;}
.logo-mark {width: 34px; height: 34px; border-radius: 9px; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 18px; box-shadow: 0 6px 14px rgba(90, 20, 150, .35);}

/**** heroshot ****/
.hero {position: relative; overflow: hidden; background: var(--white); padding: 132px 0 60px;}
.hero::before {content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(680px 420px at 88% -8%, rgba(90, 20, 150, .10), transparent 60%), radial-gradient(560px 480px at 4% 12%, rgba(16, 31, 56, .06), transparent 60%);}
.hero .wrap {position: relative; z-index: 1;}
.hero-grid {display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;}

@media (max-width:940px) {
	.hero-grid {grid-template-columns: 1fr; gap: 40px;}
}

.hero h1 {font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; margin-bottom: 20px;}
.hero h1 .hl {background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; white-space: nowrap;}
.hero p.lede {font-size: 18.5px; color: var(--ink-soft); max-width: 540px; margin-bottom: 30px; font-weight: 600;}
.hero-ctas {display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px;}
.hero-trust {display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--ink-faint); font-size: 13.5px; font-weight: 700;}
.hero-trust .pill {display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft);}
.hero-trust svg {width: 16px; height: 16px; color: var(--teal);}
.hero-card {background: var(--card-grad); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 24px; position: relative;}
.hero-card .hc-top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;}
.hc-badge {font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff;}
.hc-live {display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: #fff;}
.hc-live .blink {width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite;}

@keyframes pulse {
	0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);}
	70% {box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

.route-svg {width: 100%; height: auto; margin: 6px 0 4px;}
.route-path {stroke-dasharray: 7 7; stroke-dashoffset: 520; animation: dash 2.4s ease-out forwards;}

@keyframes dash {
	to {stroke-dashoffset: 0;}
}

.route-dot {opacity: 0; animation: fadeDot .5s forwards;}

@keyframes fadeDot {
	to {opacity: 1;}
}

.hc-stats {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;}
.hc-stat {background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px 16px;}
.hc-stat b {display: block; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.02em;}
.hc-stat span {font-size: 12.5px; color: #fff; font-weight: 700;}

/**** sections ****/
section {padding: 88px 0;}
.section-head {max-width: 680px; margin: 0 auto 52px; text-align: center;}
.section-head.left {margin-left: 0; text-align: left;}
.section-head h2 {font-size: clamp(28px, 3.2vw, 40px); font-weight: 900;}
.section-head p {color: var(--ink-soft); font-size: 17px; margin-top: 14px; font-weight: 600;}

/**** quick answer card ****/
.qa {margin-top: -28px; position: relative; z-index: 3;}
.qa-card {background: var(--card-grad); color: #fff; border-radius: 22px; padding: 34px 38px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; position: relative; overflow: hidden;}
.qa-card::after {content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 20, 150, .28), transparent 70%);}
.qa-icon {width: 58px; height: 58px; border-radius: 15px; background: #fff; display: flex; align-items: center; justify-content: center; color: #a826c4; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(90, 20, 150, .4);}
.qa-icon svg {width: 28px; height: 28px;}
.qa-body {position: relative; z-index: 1;}
.qa-body h3 {color: #fff; font-size: 19px; margin-bottom: 8px;}
.qa-body p {color: #fff; font-size: 16px; font-weight: 600;}

@media (max-width:640px) {
	.qa-card {grid-template-columns: 1fr; padding: 28px 24px;}
}

/**** bento feature grid ****/
.bento {display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;}
.feat {background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; position: relative; overflow: hidden;}
.feat:hover {transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d7deea;}
.feat.span3 {grid-column: span 3;}
.feat.span2 {grid-column: span 2;}
.feat.span6 {grid-column: span 6;}

@media (max-width:900px) {
	.bento {grid-template-columns: repeat(2, 1fr);}
	.feat.span3, .feat.span2, .feat.span6 {grid-column: span 2;}
}

@media (max-width:560px) {
	.bento {grid-template-columns: 1fr;}
	.feat.span3, .feat.span2, .feat.span6 {grid-column: span 1;}
}

.feat .num {position: absolute; top: 20px; right: 24px; font-size: 34px; font-weight: 900; color: var(--bg-alt-2); letter-spacing: -0.03em;}
.feat-ico {width: 48px; height: 48px; border-radius: 13px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 18px;}
.feat-ico svg {width: 24px; height: 24px;}
.feat .tag {display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); background: rgba(14, 159, 142, .1); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;}
.feat h3 {font-size: 19px; margin-bottom: 10px;}
.feat p {color: var(--ink-soft); font-size: 15px; font-weight: 600; margin-bottom: 12px;}
.feat ul {margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14.5px; font-weight: 600;}
.feat li {margin-bottom: 7px;}
.feat .flink {display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--red); margin-top: 14px;}
.feat .flink svg {width: 15px; height: 15px; transition: transform .18s;}
.feat .flink:hover svg {transform: translateX(3px);}

/**** channels ****/
.channels {background: var(--navy); color: #fff; border-radius: 0; position: relative; overflow: hidden; --slant: clamp(28px, 4.5vw, 90px); /* responsive diagonal height */ padding-top: 170px; /* padding-bottom: 170px; */ padding-bottom: 0;}
.channels::before {content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: calc(var(--slant) + 1px); background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 1; pointer-events: none;}
/* .channels::after {content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: calc(var(--slant) + 1px); background: var(--bg-alt); clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 1; pointer-events: none;} */
.channels .container {position: relative; z-index: 2;}
.channels>canvas {z-index: 0;}
#companyCarousel ul.scroll2 {margin: 0;}

@media (max-width:640px) {
	.channels {--slant: 24px; padding-top: 112px; padding-bottom: 112px;}
}

.channels .section-head h2 {color: #fff;}
.channels .section-head p {color: #B7C1D4;}
.ch-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}

@media (max-width:820px) {
	.ch-grid {grid-template-columns: 1fr;}
}

.ch-card {background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); padding: 30px 28px; transition: transform .2s, background .2s;}
.ch-card:hover {transform: translateY(-4px); background: rgba(255, 255, 255, .08);}
.ch-card .pct {display: inline-block; font-weight: 800; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .2); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;}
.ch-card h3 {color: #fff; font-size: 20px; margin-bottom: 10px;}
.ch-card p {color: #B7C1D4; font-size: 15px; font-weight: 600;}
.ch-more {display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-weight: 800; color: #fff; font-size: 15px;}
.ch-more svg {width: 16px; height: 16px; color: #fff;}

/**** stats band ****/
.stats-band {background: var(--bg-alt);}
.stats-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}

@media (max-width:760px) {
	.stats-grid {grid-template-columns: 1fr 1fr;}
}

.stat {background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: var(--shadow-sm);}
.stat b {display: block; font-size: 38px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px;}
.stat span {font-size: 14.5px; color: var(--ink-soft); font-weight: 700;}

/**** logo marqee ****/
.marquee-wrap {overflow: hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.marquee {display: flex; width: max-content; animation: scroll 40s linear infinite; will-change: transform;}
.marquee:hover {animation-play-state: paused;}
.marquee-group {display: flex; flex: 0 0 auto;}

@keyframes scroll {
	to {transform: translateX(-50%);}
}

.marquee span {font-size: 22px; font-weight: 900; color: #B6C0CE; letter-spacing: -0.02em; white-space: nowrap; margin-right: 56px;}
.takeaways {background: linear-gradient(135deg, var(--bg-alt), #fff); border: 1px solid var(--line); border-radius: 24px; padding: 44px 48px; box-shadow: var(--shadow-sm);}
.takeaways h2 {font-size: 26px; margin-bottom: 26px;}
.tk-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 22px;}

@media (max-width:700px) {
	.tk-grid {grid-template-columns: 1fr;}
	.takeaways {padding: 34px 26px;}
}

.tk {display: flex; gap: 16px;}
.tk .mk {width: 34px; height: 34px; border-radius: 10px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; flex-shrink: 0;}
.tk p {font-size: 15.5px; color: var(--ink); font-weight: 600;}

#ecosystem {padding-bottom: 0;}

/**** cta ****/
.cta-band {padding-bottom: 100px; padding-top: 0;}
.cta {background: radial-gradient(360px 340px at 100% 100%, rgba(90, 20, 150, .30), transparent 65%), var(--card-grad); border-radius: 26px; padding: 56px 52px; color: #fff; display: grid; grid-template-columns: 1.35fr .65fr; gap: 34px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); opacity: 0.5;}
.cta::before {content: ""; position: absolute; left: -30px; top: -40px; width: min(46%, 420px); height: 82%; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .32) 1.5px, transparent 1.6px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 22% 30%, #000 0%, #000 40%, transparent 70%); mask-image: radial-gradient(circle at 22% 30%, #000 0%, #000 40%, transparent 70%);}
.cta::after {content: ""; position: absolute; right: -30px; bottom: -40px; width: min(46%, 420px); height: 82%; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .32) 1.5px, transparent 1.6px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 78% 70%, #000 0%, #000 40%, transparent 70%); mask-image: radial-gradient(circle at 78% 70%, #000 0%, #000 40%, transparent 70%);}
.cta>* {position: relative; z-index: 1;}
.cta h2 {color: #fff; font-size: 30px; margin-bottom: 12px;}
.cta p {color: #C6CFDF; font-size: 16px; font-weight: 600;}
.cta .cta-action {display: flex; justify-content: flex-end;}

@media (max-width:760px) {
	.cta {grid-template-columns: 1fr; padding: 40px 28px;}
	.cta .cta-action {justify-content: flex-start;}
}

.reveal {opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;}
.reveal.visible {opacity: 1; transform: translateY(0);}

/**** Header tweaks ****/
html {scroll-padding-top: 104px;}
header {background: rgba(0, 0, 0, 0.758); box-shadow: 0 6px 22px rgba(16, 31, 56, .22);}
header.header-active {box-shadow: 0 8px 26px rgba(16, 31, 56, .34);}
.navbar-toggler {background: transparent; border: 0; padding: 0; cursor: pointer; line-height: 0;}
.navbar-toggler-icon {background-image: none; width: auto; height: auto;}
header .material-icons {font-size: 20px; line-height: 1;}

@media (max-width:991px) {
	.hero {padding-top: 44px;}
}