/** Shopify CDN: Minification failed

Line 1275:0 Unexpected "{"
Line 1275:1 Expected identifier but found "%"
Line 1276:0 Unexpected "{"
Line 1277:0 Expected identifier but found "\"name\""
Line 1304:0 Unexpected "{"
Line 1305:0 Expected identifier but found "\"type\""
Line 1308:1 Unexpected ","
Line 1311:0 Expected identifier but found "\"type\""
Line 1314:1 Unexpected ","
Line 1317:0 Expected identifier but found "\"type\""
... and 10 more hidden warnings

**/


/* PART1*/



/* =========================
 GLOBAL
========================= */


.ms-tech-page{
background:
radial-gradient(
circle at 20% 10%,
rgba(124,58,237,.15),
transparent 35%
),
radial-gradient(
circle at 80% 40%,
rgba(14,165,233,.12),
transparent 40%
),
#08090d;
color:white;
overflow:hidden;
}

/* =========================
 HERO
========================= */


.ms-tech-hero{
height:100vh;
min-height:760px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.ms-hero-video{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:.55;
}

.ms-hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(8,9,13,.2),
#08090d
);
}

.ms-tech-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
}

.glow-1{
width:500px;
height:500px;
background:#7c3aed;
top:-200px;
left:-150px;
opacity:.3;
}

.glow-2{
width:450px;
height:450px;
background:#0ea5e9;
right:-150px;
bottom:-100px;
opacity:.2;
}

.ms-hero-content{
position:relative;
max-width:900px;
text-align:center;
z-index:2;
padding:20px;
}

.tech-label{
font-size:13px;
letter-spacing:3px;
color:#9ca3af;
margin-bottom:25px;
}

.ms-hero-content h1{
font-size:88px;
line-height:1;
font-weight:700;
letter-spacing:-3px;
margin:0;
}

.ms-hero-content h1 span{
display:block;
background:
linear-gradient(
90deg,
#fff,
#9ca3af
);

-webkit-background-clip:text;
color:transparent;
}

.hero-desc{
font-size:20px;
line-height:1.6;
color:#cbd5e1;
max-width:650px;
margin:35px auto;
}

.hero-btn{
display:inline-flex;
padding:16px 35px;
border:1px solid rgba(255,255,255,.25);
border-radius:50px;
color:white;
text-decoration:none;
font-size:14px;
letter-spacing:1px;
transition:.3s;
}

.hero-btn:hover{
background:white;
color:#000;
}

/* =========================
 INTRO
========================= */

.tech-intro{
padding:140px 20px;
text-align:center;
}

.intro-inner{
max-width:900px;
margin:auto;
}

.tech-intro h2{
font-size:72px;
line-height:1.05;
margin:20px 0;
}

.tech-intro p:last-child{
font-size:20px;
color:#a1a1aa;
line-height:1.7;
}

/* =========================
 ANT SECTION
========================= */

.tech-block{
padding:120px 0;
}

.tech-container{
max-width:1300px;
margin:auto;
padding:0 40px;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:90px;
align-items:center;
}

.tech-video{
position:relative;
border-radius:24px;
overflow:hidden;
}

.tech-video video{
width:100%;
display:block;
}

.video-placeholder{
height:650px;
display:flex;
align-items:center;
justify-content:center;
background:#111827;
color:#666;
font-size:30px;
}

.video-glow{
position:absolute;
inset:-40px;
background:#2563eb;
filter:blur(100px);
opacity:.15;
z-index:-1;
}

.tech-number{
font-size:14px;
color:#818cf8;
letter-spacing:3px;
}

.tech-content h3{
font-size:80px;
margin:10px 0;
}

.tech-content h4{
font-size:18px;
letter-spacing:3px;
color:#9ca3af;
}

.tech-content p{
font-size:18px;
line-height:1.8;
color:#cbd5e1;
}

.tech-feature{
margin-top:40px;
}

.tech-feature div{
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.08);
color:#e5e7eb;
}

.tech-feature span{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background:#6366f1;
margin-right:15px;
}

/* =========================
 ANIMATION
========================= */

.reveal{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:none;
}

/* =========================
 MOBILE
========================= */

@media(max-width:768px){
.ms-hero-content h1{
font-size:48px;
}

.tech-intro h2{
font-size:42px;
}

.tech-container{
grid-template-columns:1fr;
padding:0 20px;
gap:40px;
}

.tech-content h3{
font-size:55px;
}

}


/* =========================
 FTR
========================= */

.ftr-section{
position:relative;
padding:160px 20px;
text-align:center;
overflow:hidden;
}

.ftr-bg-glow{
position:absolute;
width:600px;
height:600px;
background:#6366f1;
filter:blur(160px);
opacity:.15;
top:-200px;
left:50%;
transform:translateX(-50%);
}

.ftr-inner{
max-width:1200px;
margin:auto;
}

.ftr-inner h2{
font-size:120px;
margin:10px 0;
letter-spacing:-5px;
}

.ftr-inner h3{
font-size:35px;
font-weight:500;
}

.ftr-desc{
max-width:650px;
margin:30px auto 70px;
font-size:20px;
color:#cbd5e1;
line-height:1.7;
}

.ftr-video{
max-width:1100px;
margin:auto;
border-radius:30px;
overflow:hidden;
}

.ftr-video video{
width:100%;
display:block;
}

.ftr-points{
display:flex;
justify-content:center;
gap:70px;
margin-top:50px;
}

.ftr-points div{
font-size:15px;
color:#ddd;
}

.ftr-points strong{
display:block;
font-size:40px;
color:#6366f1;
}

/* =========================
 DI2
========================= */

.di2-section{
padding:140px 0;
}

.di2-container{
max-width:1300px;
margin:auto;
padding:0 40px;
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
align-items:center;
}

.di2-content h2{
font-size:100px;
margin:0;
}

.di2-content h3{
font-size:28px;
}

.di2-content p{
font-size:18px;
line-height:1.8;
color:#cbd5e1;
}

.di2-media{
border-radius:28px;
overflow:hidden;
}

.di2-media video{
width:100%;
}

.di2-line{
margin-top:45px;
display:flex;
align-items:center;
gap:20px;
color:#fff;
}

.di2-line span{
width:12px;
height:12px;
background:#6366f1;
border-radius:50%;
}

.di2-line i{
height:1px;
width:80px;
background:#555;
}

/* =========================
 MAGICLOCK
========================= */

.magiclock-section{
padding:160px 20px;
position:relative;
text-align:center;
}

.magiclock-container{
max-width:1300px;
margin:auto;
}

.magiclock-title h2{
font-size:90px;
margin:20px 0;
}

.magiclock-title p:last-child{
font-size:20px;
color:#cbd5e1;
}

.magiclock-video{
margin-top:70px;
border-radius:35px;
overflow:hidden;
}

.magiclock-video video{
width:100%;
}

.magiclock-bottom{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:60px;
}

.magiclock-bottom div{
padding:35px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
border-radius:20px;
}

.magiclock-bottom h4{
font-size:16px;
letter-spacing:2px;
}

.magiclock-bottom p{
color:#9ca3af;
line-height:1.6;
}

@media(max-width:768px){
.ftr-inner h2{
font-size:80px;
}

.ftr-points{
flex-direction:column;
gap:20px;
}

.di2-container{
grid-template-columns:1fr;
padding:0 20px;
}

.di2-content h2{
font-size:70px;
}

.magiclock-title h2{
font-size:55px;
}

.magiclock-bottom{
grid-template-columns:1fr;
}

}

/* =================================
 PELOTON
================================= */

.peloton-section{
height:100vh;
min-height:800px;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}

.peloton-video-wrap{
position:absolute;
inset:0;
}

.peloton-video{
width:100%;
height:100%;
object-fit:cover;
opacity:.6;
}

.peloton-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(8,9,13,.15),
#08090d
);
}

.peloton-content{
position:relative;
z-index:2;
text-align:center;
max-width:900px;
padding:20px;
}

.peloton-content h2{
font-size:100px;
line-height:1;
letter-spacing:-4px;
margin:20px 0;
}

.peloton-content h2 span{
display:block;
background:
linear-gradient(
90deg,
#fff,
#818cf8
);
-webkit-background-clip:text;
color:transparent;
}

.peloton-content>p{
font-size:28px;
}

.peloton-desc{
font-size:18px!important;
color:#cbd5e1;
max-width:650px;
margin:30px auto;
}

.sync-animation{
display:flex;
justify-content:center;
gap:20px;
margin-top:60px;
}

.sync-light{
width:16px;
height:16px;
border-radius:50%;
background:#444;
box-shadow:
0 0 0 transparent;
}

.sync-light.active{
background:#fff;
box-shadow:
0 0 40px #fff;
animation:
pulse 1.5s infinite;
}

@keyframes pulse{
0%{
opacity:.3;
}
50%{
opacity:1;
}
100%{
opacity:.3;
}
}

/* =================================
 GENTLEBEAM
================================= */

.gentle-section{
padding:160px 20px;
}

.gentle-container{
max-width:1300px;
margin:auto;
}

.gentle-header{
text-align:center;
}

.gentle-header h2{
font-size:90px;
margin:20px 0;
}

.gentle-header p:last-child{
font-size:35px;
color:#fff;
}

.beam-compare{
margin-top:90px;
display:grid;
grid-template-columns:1fr 80px 1fr;
align-items:center;
}

.beam-card{
padding:50px 35px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
border-radius:30px;
text-align:center;
}

.beam-title{
font-size:14px;
letter-spacing:3px;
color:#aaa;
margin-bottom:50px;
}

.beam-light{
height:220px;
position:relative;
overflow:hidden;
}

.beam-light:before{
content:"";
position:absolute;
left:0;
top:80px;
width:100%;
height:40px;
background:
linear-gradient(
90deg,
rgba(255,255,255,.8),
transparent
);
filter:blur(12px);
}

.normal:before{
transform:
rotate(-15deg);
}

.gentle:before{
transform:
rotate(-5deg);
}

.beam-divider{
height:200px;
width:1px;
background:
rgba(255,255,255,.2);
}

.beam-card p{
color:#9ca3af;
line-height:1.7;
}

.gentle-video{
margin-top:90px;
border-radius:35px;
overflow:hidden;
}

.gentle-video video{
width:100%;
}

@media(max-width:768px){
.peloton-content h2{
font-size:60px;
}

.beam-compare{
grid-template-columns:1fr;
gap:30px;
}

.beam-divider{
display:none;
}

.gentle-header h2{
font-size:55px;
}
}



/* =================================
 CUT OFF
================================= */

.cutoff-section{
padding:160px 20px;
}

.cutoff-container{
max-width:1300px;
margin:auto;
}

.cutoff-header{
text-align:center;
}

.cutoff-header h2{
font-size:90px;
margin:20px 0;
}

.cutoff-header p:last-child{
font-size:26px;
color:#cbd5e1;
}

.cutoff-stage{
height:600px;
margin-top:90px;
position:relative;
background:
linear-gradient(
180deg,
#111827,
#050505
);

border-radius:40px;
overflow:hidden;
}

.road-bg{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
transparent 49%,
rgba(255,255,255,.08) 50%,
transparent 51%
);
}

.road-line{
position:absolute;
bottom:40px;
left:0;
width:100%;
height:2px;
background:
rgba(255,255,255,.15);
}

.beam-effect{
position:absolute;
bottom:120px;
left:50%;
transform:translateX(-50%);
width:80%;
}

.beam-upper{
height:150px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

clip-path:
polygon(
50% 100%,
0 0,
100% 0
);
opacity:.25;
}

.beam-lower{
height:90px;
background:
linear-gradient(
90deg,
transparent,
#fff,
transparent
);

clip-path:
polygon(
50% 0,
10% 100%,
90% 100%
);

opacity:.45;
}

.beam-label{
position:absolute;
bottom:50px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:50px;
}

.beam-label div{
font-size:14px;
color:#ddd;
}

.beam-label span{
display:inline-block;
width:8px;
height:8px;
background:#6366f1;
border-radius:50%;
margin-right:12px;
}

.cutoff-video{
margin-top:80px;
border-radius:35px;
overflow:hidden;
}

.cutoff-video video{
width:100%;
}


/* =================================
 RADAR
================================= */

.radar-section{
height:100vh;
min-height:850px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.radar-video-wrap{
position:absolute;
inset:0;
}

.radar-video{
width:100%;
height:100%;
object-fit:cover;
opacity:.55;
}

.radar-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(8,9,13,.2),
#08090d
);
}

.radar-content{
position:relative;
z-index:2;
text-align:center;
max-width:950px;
padding:20px;
}

.radar-content h2{
font-size:110px;
line-height:1;
letter-spacing:-5px;
}

.radar-content h2 span{
display:block;
background:
linear-gradient(
90deg,
white,
#818cf8
);
-webkit-background-clip:text;
color:transparent;
}

.radar-main{
font-size:35px;
}

.radar-desc{
max-width:650px;
margin:30px auto;
font-size:18px;
color:#cbd5e1;
line-height:1.7;
}

/* RADAR ANIMATION */

.radar-scan{
position:relative;
height:180px;
margin-top:60px;
}

.radar-circle{
width:160px;
height:160px;
border-radius:50%;
border:
1px solid rgba(99,102,241,.5);
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
animation:
radarPulse 2s infinite;
}

.vehicle{
position:absolute;
right:20%;
top:70px;
font-size:14px;
color:#fff;
}

.distance{
position:absolute;
color:#818cf8;
font-size:14px;
}

.d1{
right:35%;
top:40px;
}

.d2{
right:30%;
top:80px;
}

.d3{
right:25%;
top:120px;
}

@keyframes radarPulse{
0%{
transform:translateX(-50%) scale(.7);
opacity:.3;
}
50%{
opacity:1;
}
100%{
transform:translateX(-50%) scale(1.2);
opacity:0;
}
}

@media(max-width:768px){
.cutoff-header h2{
font-size:55px;
}

.cutoff-stage{
height:420px;
}

.beam-label{
flex-direction:column;
gap:10px;
}

.radar-content h2{
font-size:65px;
}

.radar-main{
font-size:24px;
}
}


/* =================================
 SUMMARY
================================= */

.tech-summary{
padding:180px 20px;
position:relative;
overflow:hidden;
}

.summary-glow{
position:absolute;
width:700px;
height:700px;
background:#6366f1;
filter:blur(180px);
opacity:.15;
left:50%;
top:-300px;
transform:translateX(-50%);
}

.summary-container{
max-width:1300px;
margin:auto;
text-align:center;
}

.summary-container h2{
font-size:90px;
line-height:1.05;
letter-spacing:-4px;
margin:30px 0;
}

.summary-desc{
max-width:750px;
margin:40px auto 90px;
font-size:20px;
line-height:1.8;
color:#cbd5e1;
}

.tech-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:25px;
}

.tech-item{
text-align:left;
padding:40px 35px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
border-radius:25px;
text-decoration:none;
color:white;
transition:.4s;
position:relative;
overflow:hidden;
}

.tech-item:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
135deg,
rgba(99,102,241,.25),
transparent
);
opacity:0;
transition:.4s;
}

.tech-item:hover{
transform:
translateY(-10px);
border-color:
rgba(255,255,255,.3);
}

.tech-item:hover:before{
opacity:1;
}

.tech-item span{
font-size:13px;
color:#818cf8;
letter-spacing:3px;
}

.tech-item h3{
font-size:35px;
margin:20px 0 10px;
position:relative;
}

.tech-item p{
color:#9ca3af;
position:relative;
}

/* =================================
 FINAL CTA
================================= */

.tech-final{
padding:160px 20px;
text-align:center;
background:
linear-gradient(
180deg,
transparent,
rgba(99,102,241,.08)
);
}

.final-inner h2{
font-size:85px;
line-height:1.1;
letter-spacing:-3px;
}

.final-inner p{
font-size:22px;
color:#cbd5e1;
margin:35px 0 50px;
}

.final-btn{
display:inline-flex;
padding:18px 45px;
border-radius:50px;
background:white;
color:#000;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.final-btn:hover{
transform:
translateY(-5px);
}

@media(max-width:900px){
.tech-grid{
grid-template-columns:
repeat(2,1fr);
}
}

@media(max-width:768px){
.summary-container h2{
font-size:50px;
}

.summary-desc{
font-size:17px;
}

.tech-grid{
grid-template-columns:1fr;
}

.final-inner h2{
font-size:48px;
}
}





{% schema %}
{
"name":"Technology Ecosystem Part 1",

"settings":[

{
"type":"url",
"id":"hero_video",
"label":"Hero Video"
},

{
"type":"url",
"id":"ant_video",
"label":"ANT+ Video"
}

],


"presets":[
{
"name":"Technology Ecosystem Part 1"
}
]

}

{
"type":"url",
"id":"ftr_video",
"label":"FTR Video"
},

{
"type":"url",
"id":"di2_video",
"label":"Di2 Video"
},

{
"type":"url",
"id":"magiclock_video",
"label":"MAGICLOCK Video"
}

{
"type":"url",
"id":"peloton_video",
"label":"PELOTONSYNC FLASH Video"
},

{
"type":"url",
"id":"gentlebeam_video",
"label":"GENTLEBEAM Video"
}


{
"type":"url",
"id":"cutoff_video",
"label":"CUT-OFF BEAM Video"
},

{
"type":"url",
"id":"radar_video",
"label":"RADAR Rear Light Video"
}

{% endschema %}