:root{--sync-blue:#d38eeb;--aero-mist:#D1ECF1;--skyline-navy:#1F3D5C;--celestial-orchid:#D38EEB;--text:#E6ECFF;--bg:#0b1220;--muted:#95A0C4;--card:#111a2c;--radius:12px}
/* Trademark symbol styling */
.tm{font-weight:300;opacity:0.7;font-size:0.8em;vertical-align:super}
*{box-sizing:border-box;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* Allow text selection for form inputs and specific elements */
input,textarea,button,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
/* Prevent text highlighting */
::selection{background:transparent}
::-moz-selection{background:transparent}
/* Bootstrap Icons should use their own font */
.bi{font-family:'bootstrap-icons'!important}
html,body{margin:0;padding:0}
/* Hide scrollbar while keeping functionality */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body::-webkit-scrollbar{display:none}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 10% -10%, #142039 0%, transparent 60%), linear-gradient(180deg,#0b1220,#0d1426);line-height:1.6;overflow-x:hidden}
html{overflow-x:hidden}
/* Preloader */
body.preloader-active{overflow:hidden;height:100vh}
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0b1220,#0d1426);display:flex;justify-content:center;align-items:center;z-index:99999;transition:opacity 0.5s ease,visibility 0.5s ease;font-family:'Poppins',sans-serif;font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:0.2em;color:#d38eeb;gap:0.1em}
#preloader.fade-out{opacity:0;visibility:hidden;pointer-events:none}
body.preloader-active main,body.preloader-active footer,body.preloader-active header{visibility:hidden}
#preloader span{opacity:0;animation:fadeIn 1.4s infinite}
#preloader span:nth-child(1){animation-delay:0s}
#preloader span:nth-child(2){animation-delay:0.2s}
#preloader span:nth-child(3){animation-delay:0.4s}
#preloader span:nth-child(4){animation-delay:0.6s}
#preloader span:nth-child(5){animation-delay:0.8s}
#preloader span:nth-child(6){animation-delay:1s}
#preloader span:nth-child(7){animation-delay:1.2s}
@keyframes fadeIn{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
/* Immersive cursor effects */
body{cursor:none}
.cursor-dot{position:fixed;width:8px;height:8px;background:#d1ecf1;border-radius:50%;pointer-events:none;z-index:9999;transition:transform .1s ease;mix-blend-mode:difference}
.cursor-outline{position:fixed;width:32px;height:32px;border:2px solid rgba(211,142,235,0.3);border-radius:50%;pointer-events:none;z-index:9998;transition:all .15s ease;mix-blend-mode:difference}
.container{width:min(1120px,92%);margin:0 auto}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(180deg,rgba(11,18,32,0.95),rgba(11,18,32,0.85));backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(174,203,255,0.12);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.site-header .container{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:14px 0;gap:20px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);text-decoration:none;z-index:1}
.brand-logo{height:52px;width:auto;display:block;transition:transform .3s ease}
.brand-logo:hover{transform:scale(1.05)}
@media (min-width: 900px){
  .brand-logo{height:64px}
}
.site-nav{display:flex;align-items:center;justify-content:center;grid-column:2}
.nav-list{display:flex;gap:28px;list-style:none;margin:0;padding:0;justify-content:center}
.header-cta{z-index:1}
.mobile-nav-cta{padding:20px 24px;margin-top:8px;border-top:1px solid rgba(174,203,255,0.08)}
.mobile-cta-link{display:block;padding:12px 20px;background:linear-gradient(135deg,var(--sync-blue),#242e64);color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:700;font-size:15px;transition:all .3s ease;box-shadow:0 4px 16px rgba(36,46,100,0.3)}
.mobile-cta-link:hover{background:linear-gradient(135deg,#c27fde,#1f2d5a);transform:translateY(-2px);box-shadow:0 6px 20px rgba(36,46,100,0.4)}
.nav-link{color:#EAF0FF;text-decoration:none;font-weight:500;font-size:15px;transition:color .3s ease,opacity .3s ease;position:relative;padding:8px 4px}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--sync-blue),var(--celestial-orchid));transition:width .3s ease}
.nav-link:hover{color:var(--sync-blue)}
.nav-link:hover::after{width:100%}
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:101}
.menu-icon{display:block;width:24px;height:3px;background:#EAF0FF;transition:all .3s ease;position:relative}
.menu-icon::before,.menu-icon::after{content:'';position:absolute;width:24px;height:3px;background:#EAF0FF;transition:all .3s ease}
.menu-icon::before{top:-8px}
.menu-icon::after{bottom:-8px}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon{background:transparent}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon::after{bottom:0;transform:rotate(-45deg)}
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:linear-gradient(180deg,rgba(11,18,32,0.98),rgba(11,18,32,0.98));backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(174,203,255,0.1);z-index:100;max-height:0;overflow:hidden;transition:max-height .4s ease}
.mobile-nav.active{display:block;max-height:500px}
.mobile-nav-list{list-style:none;margin:0;padding:24px 0}
.mobile-nav-link{display:block;padding:16px 24px;color:#EAF0FF;text-decoration:none;font-weight:500;transition:all .3s ease;border-bottom:1px solid rgba(174,203,255,0.05)}
.mobile-nav-link:hover{background:rgba(174,203,255,0.05);color:var(--sync-blue);padding-left:32px}
.header-cta{margin-left:auto;padding:10px 16px;font-size:15px;flex-shrink:0}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px}

.hero{background:radial-gradient(1200px 500px at 20% -10%, rgba(36,46,100,0.12), transparent);position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.grid-lines{position:absolute;inset:-50% -20%;background-image:linear-gradient(to right, rgba(174,203,255,0.18) 1px, transparent 1px),linear-gradient(to bottom, rgba(174,203,255,0.15) 1px, transparent 1px);background-size:80px 80px;transform:perspective(600px) rotateX(65deg) translateY(20%);opacity:.6;animation:gridFloat 22s ease-in-out infinite;mask-image:linear-gradient(to bottom, transparent 0%, black 20%, black 60%, transparent 100%)}
.gradient-orbit{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, rgba(207,168,255,0.15) 0%, transparent 70%);top:10%;left:5%;filter:blur(60px);animation:orbit 20s ease-in-out infinite;pointer-events:none}
/* Floating particles */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:3px;height:3px;background:rgba(174,203,255,0.6);border-radius:50%;box-shadow:0 0 6px rgba(174,203,255,0.4);animation:float linear infinite}
.particle:nth-child(1){left:10%;animation-duration:15s;animation-delay:0s;top:20%}
.particle:nth-child(2){left:25%;animation-duration:18s;animation-delay:2s;top:40%;background:rgba(207,168,255,0.5)}
.particle:nth-child(3){left:45%;animation-duration:12s;animation-delay:4s;top:60%}
.particle:nth-child(4){left:65%;animation-duration:20s;animation-delay:1s;top:30%;background:rgba(207,168,255,0.6)}
.particle:nth-child(5){left:80%;animation-duration:16s;animation-delay:3s;top:70%}
.particle:nth-child(6){left:35%;animation-duration:14s;animation-delay:5s;top:15%;background:rgba(174,203,255,0.5)}
.particle:nth-child(7){left:55%;animation-duration:19s;animation-delay:2.5s;top:50%}
.particle:nth-child(8){left:90%;animation-duration:17s;animation-delay:4.5s;top:80%;background:rgba(207,168,255,0.4)}
/* Enhanced immersive effects */
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(211,142,235,0.1) 0%, transparent 50%);animation:glow 8s ease-in-out infinite alternate;pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(45deg, transparent 30%, rgba(174,203,255,0.03) 50%, transparent 70%);animation:scan 12s linear infinite;pointer-events:none}
@keyframes gridFloat{0%,100%{transform:perspective(600px) rotateX(65deg) translateY(20%)}50%{transform:perspective(600px) rotateX(65deg) translateY(25%)}}
@keyframes glow{0%{opacity:0.3}100%{opacity:0.8}}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes orbit{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(100px,-50px) scale(1.1)}50%{transform:translate(150px,30px) scale(0.9)}75%{transform:translate(50px,80px) scale(1.05)}}
@keyframes float{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:0.8}90%{opacity:0.6}100%{transform:translateY(-100vh) translateX(20px);opacity:0}}
@keyframes textGlow{0%{text-shadow:0 0 30px rgba(234,240,255,0.1)}100%{text-shadow:0 0 40px rgba(174,203,255,0.3),0 0 60px rgba(207,168,255,0.2)}}
.hero-content{display:flex;justify-content:center;align-items:center;text-align:center;position:relative;z-index:2}
.hero-brand{font-size:clamp(48px,8vw,72px);font-weight:700;line-height:1;margin:0 0 20px;letter-spacing:-0.02em;position:relative}
.SyncXR{height:clamp(60px,8vw,90px);width:auto;max-width:100%;transform:scale(1.225)}
.hero-sync{color:var(--aero-mist);text-shadow:0 0 20px rgba(209,236,241,0.3)}
.hero-xr{color:var(--celestial-orchid);text-shadow:0 0 20px rgba(211,142,235,0.3)}
/* Hero SVG styling */
.hero-svg{height:clamp(80px,12vw,120px);width:auto;max-width:100%;filter:drop-shadow(0 0 20px rgba(209,236,241,0.3));transition:all 0.3s ease}
.hero-svg:hover{filter:drop-shadow(0 0 30px rgba(211,142,235,0.4));transform:scale(1.02)}
.hero h1{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:0 0 16px;color:#EAF0FF;text-shadow:0 0 30px rgba(234,240,255,0.1);animation:textGlow 4s ease-in-out infinite alternate}
.hero-tagline{font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--muted);max-width:72ch;margin:0 auto;font-weight:400}
/* Hero Credibility Logos */
.hero-credibility{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:40px;flex-wrap:nowrap}
.credibility-logo{height:48px;width:auto;max-width:180px;object-fit:contain;transition:all 0.3s ease}
.credibility-logo:hover{transform:scale(1.05)}
.subhead{font-size:18px;color:var(--muted);max-width:60ch;margin:0 auto 24px}
.hero-cta{margin-top:24px}
.compat-groups-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.compat-group{background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.08);border-radius:16px;padding:24px;transition:transform .25s ease, box-shadow .25s ease;position:relative;overflow:hidden}
.compat-group::after{content:'';position:absolute;top:-100%;right:-100%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(207,168,255,0.08) 0%,transparent 60%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.compat-group:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.3),0 0 16px rgba(207,168,255,0.1)}
.compat-group:hover::after{opacity:1}
.compat-header{margin-bottom:16px}
.compat-group h3{margin:0 0 6px;color:#EAF0FF;font-size:18px;font-weight:700}
.compat-desc{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.compat-logos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.logo-item{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-height:60px}
.compat-logos-grid img{width:100%;height:48px;object-fit:contain;object-position:center;filter:grayscale(100%) brightness(1.2);opacity:.7;transition:all .3s ease;display:block}
.compat-logos-grid img:hover{filter:none;opacity:1;transform:translateY(-1px) scale(1.05)}
.logo-name{font-size:10px;color:var(--muted);font-weight:500;line-height:1.2;margin-top:10px}
/* Infra logos specific styling */
.compat-group:last-child .compat-logos-grid img{filter:grayscale(0%) brightness(1);opacity:1}
.compat-group:last-child .compat-logos-grid img:hover{filter:hue-rotate(180deg) saturate(1.2);transform:translateY(-1px) scale(1.05)}
/* Force Infra logos to specific color */
.compat-group:last-child .compat-logos-grid img{filter:brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(1200%) hue-rotate(180deg) brightness(95%) contrast(95%)}
.compat-group:last-child .compat-logos-grid img:hover{filter:brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(1200%) hue-rotate(180deg) brightness(95%) contrast(95%) hue-rotate(10deg) saturate(1.2);transform:translateY(-1px) scale(1.05)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;border:2px solid transparent;font-weight:700;text-decoration:none;cursor:pointer}
.btn-primary{background:#242e64;color:#fff;border-color:rgba(36,46,100,0.24)}
.btn-accent{background:linear-gradient(180deg,var(--celestial-orchid),#b995ff);color:#121225;border-color:rgba(211,142,235,0.35)}
.btn{box-shadow:0 6px 22px rgba(36,46,100,0.25)}
.btn:hover{filter:brightness(0.96)}
.btn-vr-demo{background:transparent;border:2px solid rgba(207,168,255,0.6);color:#d38eeb;backdrop-filter:blur(8px);position:relative;overflow:hidden}
.btn-vr-demo::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(207,168,255,0.2),transparent);transform:translateX(-100%);transition:transform 0.6s ease}
.btn-vr-demo:hover{background:rgba(207,168,255,0.1);border-color:#cfa8ff;color:#EAF0FF;box-shadow:0 0 24px rgba(207,168,255,0.4);filter:none}
.btn-vr-demo:hover::before{transform:translateX(100%)}

section{padding:56px 0;position:relative;scroll-margin-top:80px}
/* VR-themed section decorations */
section::before{content:'';position:absolute;top:0;left:5%;width:60px;height:60px;border:2px solid rgba(207,168,255,0.15);border-radius:50%;opacity:0.3}
section::after{content:'';position:absolute;bottom:10%;right:8%;width:40px;height:40px;border:2px solid rgba(174,203,255,0.1);border-radius:50%;opacity:0.2}
section:nth-child(even)::before{left:auto;right:5%;border-color:rgba(174,203,255,0.15)}
section:nth-child(even)::after{right:auto;left:8%;border-color:rgba(207,168,255,0.1)}
.audience h2,.outcomes h2,.how h2,.security h2,.proof h2,.cta h2{color:var(--sync-blue);margin:0 0 12px;position:relative}
.audience h2::before,.outcomes h2::before,.how h2::before,.proof h2::before,.cta h2::before{content:'';position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:24px;height:2px;background:linear-gradient(90deg,transparent,rgba(207,168,255,0.5));display:none}
@media (min-width: 900px){
  .audience h2::before,.outcomes h2::before,.how h2::before,.proof h2::before,.cta h2::before{display:block}
}
.audience p{color:var(--skyline-navy);max-width:72ch}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:20px 0 0}
.card{background:linear-gradient(180deg,#0f182b,#0b1324);padding:18px;border-radius:12px;border:1px solid rgba(174,203,255,0.08);transition:transform .25s ease, box-shadow .25s ease;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(207,168,255,0.1) 0%,transparent 50%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,0.45),0 0 20px rgba(207,168,255,0.15)}
.card:hover::before{opacity:1}
.value-cards .card{padding:24px;text-align:center}
.value-icon{font-size:36px;color:#d38eeb;margin-bottom:12px}
.value-cards h3{margin:0 0 8px;color:#EAF0FF;font-size:18px;font-weight:600}
.value-cards p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.how-tagline{color:var(--muted);text-align:center;margin:24px 0 0;font-style:italic;font-size:16px}
/* How It Works - Responsive Grid */
.how-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.how-step-item{background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.1);border-radius:12px;padding:24px;text-align:center;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;position:relative;overflow:hidden}
.how-step-item::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(207,168,255,0.08) 0%,transparent 50%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.how-step-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.4),0 0 20px rgba(207,168,255,0.15);border-color:rgba(174,203,255,0.3)}
.how-step-item:hover::before{opacity:1}
.step-number{margin-bottom:16px;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--sync-blue),var(--skyline-navy),#3d5afe);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 12px 32px rgba(36,46,100,0.4),inset 0 2px 8px rgba(255,255,255,0.1);position:relative;border:2px solid rgba(36,46,100,0.2)}
.step-number i{font-size:28px;color:#fff;z-index:2;transition:all .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.step-num{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;background:var(--aero-mist);color:var(--sync-blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;font-family:'Poppins',sans-serif;box-shadow:0 6px 16px rgba(209,236,241,0.4),inset 0 1px 3px rgba(255,255,255,0.3);z-index:3;border:2px solid rgba(255,255,255,0.2);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.how-step-item:hover .step-number i{color:#d38eeb;transform:scale(1.1)}
.how-step-item h3{margin:0 0 8px;font-size:17px;font-weight:700;color:#EAF0FF}
.how-step-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.bullets{columns:2;gap:24px;list-style:disc;padding-left:20px;margin:20px 0 0;color:var(--muted)}
.bullets li{break-inside:avoid}
.compat{background:linear-gradient(180deg,#0f182b,#0b1220)}
.compat-intro{color:var(--muted);max-width:72ch}
.compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.compat-block{background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.08);border-radius:12px;padding:18px}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 0}
.pill{padding:6px 10px;border-radius:999px;border:1px solid rgba(174,203,255,0.18);color:var(--skyline-navy);background:rgba(174,203,255,0.06)}

.usecase-intro{color:var(--muted);max-width:80ch;margin:8px 0 16px}
.usecase-list{color:var(--muted);max-width:80ch;margin:16px 0 0;padding-left:20px}
.usecase-list li{margin-bottom:8px}

.proof-intro{color:var(--muted);max-width:70ch;margin:8px 0 24px;text-align:left}
.pilot-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;list-style:none;padding:0;margin:24px 0 0}
.pilot-badge{background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.12);padding:24px;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .25s ease, box-shadow .25s ease}
.pilot-badge:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.pilot-badge i{font-size:32px;color:var(--sync-blue)}
.pilot-badge span{color:var(--muted);font-weight:600;font-size:15px}
.logos{display:flex;gap:16px;list-style:none;padding:0;margin:20px 0 0;flex-wrap:wrap}
.logo{flex:1 1 220px;background:linear-gradient(180deg,#0f182b,#0b1324);border:1px dashed rgba(174,203,255,0.18);color:var(--muted);padding:24px;border-radius:12px;text-align:center;font-weight:600}
.cta-intro{color:var(--muted);max-width:65ch;margin:8px 0 20px;text-align:left}

.interest-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.interest-form label{font-weight:600;color:var(--muted)}
.interest-form input,.interest-form textarea{width:100%;padding:12px 12px;border-radius:10px;border:1px solid rgba(174,203,255,0.16);background:#0b1220;color:var(--text);font-family:inherit;font-size:16px}
.interest-form textarea{grid-column:1 / -1}
.interest-form button{grid-column:1 / -1;justify-self:start}

.site-footer{border-top:2px solid rgba(211,142,235,0.15);padding:48px 0 20px;color:var(--muted);background:linear-gradient(180deg,#0b1220,#0a0f18)}
.footer-content{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-logo{display:flex}
.footer-logo img{height:70px;width:auto;filter:brightness(1.1);transition:transform .3s ease;display:block}
.footer-logo:hover img{transform:scale(1.05)}
.footer-tagline{color:var(--muted);font-size:15px;font-style:regular;margin:0;max-width:320px;line-height:1.5}
.footer-contact{display:flex;gap:40px}
.footer-contact-item{display:flex;gap:16px;align-items:flex-start}
.footer-contact-item i{color:var(--sync-blue);font-size:24px;flex-shrink:0;margin-top:4px}
.footer-contact-item>div{display:flex;flex-direction:column;gap:4px}
.contact-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.footer-contact-item a{color:#EAF0FF;text-decoration:none;font-size:16px;font-weight:500;transition:color .3s ease}
.footer-contact-item a:hover{color:var(--sync-blue)}
.footer-bottom{border-top:1px solid rgba(174,203,255,0.08);margin-top:32px;padding-top:24px;text-align:center}
.footer-copyright{color:var(--muted);font-size:14px;margin:0}

/* Scroll to top button */
.scroll-to-top{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.2);color:var(--text);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.scroll-to-top.visible{opacity:1;visibility:visible}
.scroll-to-top:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.4);background:linear-gradient(180deg,#1a2a4a,#0f1a32)}

/* Video Modal */
.video-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .4s ease}
.video-modal.active{opacity:1;visibility:visible}
.video-modal-overlay{position:absolute;inset:0;background:rgba(11,18,32,0.95);backdrop-filter:blur(12px);cursor:pointer}
.video-modal-content{position:relative;width:min(90vw,1200px);height:min(56.25vw,675px);max-height:90vh;background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.2);border-radius:16px;overflow:hidden;transform:scale(0.8) translateY(20px);transition:transform .4s ease;box-shadow:0 24px 48px rgba(0,0,0,0.6),0 0 32px rgba(207,168,255,0.1)}
.video-modal.active .video-modal-content{transform:scale(1) translateY(0)}
.video-modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(11,18,32,0.8);border:1px solid rgba(174,203,255,0.2);color:var(--text);display:grid;place-items:center;cursor:pointer;z-index:10;transition:all .3s ease;backdrop-filter:blur(8px)}
.video-modal-close:hover{background:rgba(174,203,255,0.1);border-color:rgba(174,203,255,0.4);transform:scale(1.1)}
.video-container{width:100%;height:100%;position:relative;overflow:hidden}
.video-container iframe{width:100%;height:100%;border:none;border-radius:16px}

/* Video Preview Section */
.video-preview{background:linear-gradient(180deg,rgba(11,18,32,0.8),rgba(15,24,43,0.9));position:relative;overflow:hidden}
.video-preview::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(207,168,255,0.05) 0%,transparent 70%);pointer-events:none}
.video-preview h2{color:var(--sync-blue);margin:0 0 12px;text-align:center;font-size:clamp(28px,4vw,36px);font-weight:700}
.video-preview-intro{color:var(--muted);text-align:center;font-size:18px;margin:0 auto 32px;max-width:60ch}
.video-preview-container{max-width:1000px;margin:0 auto;position:relative}
.video-wrapper{position:relative;width:100%;height:0;padding-bottom:56.25%;background:linear-gradient(135deg,#0b1220,#1a1a2e);border-radius:20px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.6),0 0 32px rgba(207,168,255,0.15),inset 0 1px 0 rgba(255,255,255,0.1);border:2px solid rgba(174,203,255,0.2);transition:all 0.3s ease}
.video-wrapper:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(0,0,0,0.7),0 0 40px rgba(207,168,255,0.2)}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:18px;filter:brightness(1.05) contrast(1.1) saturate(1.1)}
.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(11,18,32,0.1) 0%,rgba(26,26,46,0.05) 50%,rgba(11,18,32,0.1) 100%);border-radius:18px;pointer-events:none;z-index:1;transition:opacity 0.3s ease}
.video-wrapper:hover .video-overlay{opacity:0.3}

/* Reveal on scroll with enhanced effects */
.reveal{opacity:0;transform:translateY(32px) scale(0.95);transition:opacity .8s ease, transform .8s ease}
.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
/* Staggered reveal animation */
.reveal:nth-child(1){transition-delay:0.1s}
.reveal:nth-child(2){transition-delay:0.2s}
.reveal:nth-child(3){transition-delay:0.3s}
.reveal:nth-child(4){transition-delay:0.4s}

/* Enterprise section */
.enterprise{background:linear-gradient(180deg,#0b1220,#0f182b)}
.enterprise-intro{color:var(--muted);max-width:80ch;margin:8px 0 20px}
.enterprise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:20px 0 0;padding:0}
.enterprise-item{background:linear-gradient(180deg,#0f182b,#0b1324);border:1px solid rgba(174,203,255,0.1);border-radius:12px;padding:18px;transition:box-shadow .25s ease, transform .25s ease}
.enterprise-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.45)}
.enterprise-item h3{margin:0 0 6px;color:#EAF0FF}
.enterprise-item p{margin:0;color:var(--muted)}

/* ============================================
   RESPONSIVE BREAKPOINTS & MOBILE OPTIMIZATION
   Desktop: 1025px+
   Tablet: 768px - 1024px
   Mobile: Below 768px
   ============================================ */

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
  .btn, .card, .how-step-item, .compat-group, .pilot-badge {
    min-height: 44px;
    min-width: 44px;
  }
  .btn { padding: 16px 24px; }
  .scroll-to-top { width: 56px; height: 56px; }
  .video-modal-close { width: 48px; height: 48px; }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .container { max-width: 1400px; }
  .hero-svg { height: clamp(50px, 14vw, 50px); }
  .SyncXR { height: clamp(50px, 8vw, 110px); transform: scale(1.225); }
}

/* Desktop: 1025px - 1439px */
@media (min-width: 1025px) and (max-width: 1439px) {
  .container { max-width: 1200px; }
}

/* Tablet Landscape: 1024px - 1200px */
@media (max-width: 1200px) {
  .container { padding: 0 32px; }
  .compat-groups-grid { grid-template-columns: 1fr; gap: 20px; }
  .compat-group { padding: 20px; }
  .video-preview-container { max-width: 900px; }
}

/* Tablet Portrait: 768px - 1023px */
@media (max-width: 1023px) {
  .container { padding: 0 24px; }
  section { padding: 48px 0; scroll-margin-top: 75px; }
  .hero-svg { height: clamp(70px, 10vw, 100px); }
  .SyncXR { height: clamp(50px, 7vw, 75px); transform: scale(1.225); }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .enterprise-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .how-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .how-step-item { padding: 22px; }
  .step-number { width: 75px; height: 75px; }
  .step-number i { font-size: 26px; }
  .step-num { width: 30px; height: 30px; font-size: 13px; top: -11px; right: -11px; }
  .compat-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .compat-group:nth-child(2) .compat-logos-grid { grid-template-columns: repeat(3, 1fr); }
  .pilot-badges { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .video-wrapper { border-radius: 16px; }
  .video-wrapper iframe { border-radius: 14px; }
  .hero-credibility { gap: 24px; margin-top: 32px; }
  .credibility-logo { height: 40px; max-width: 150px; }
}

/* Show mobile menu, hide desktop nav */
@media (max-width: 1023px) {
  .site-nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .header-cta { display: none; }
  .site-header .container { grid-template-columns: 1fr auto; gap: 12px; }
  .brand { z-index: 1; }
  .mobile-menu-toggle { z-index: 101; }
}

/* Hide mobile menu, show desktop nav */
@media (min-width: 1024px) {
  .mobile-menu-toggle { display: none !important; }
  .mobile-nav { display: none !important; }
}

/* Mobile Landscape / Small Tablet: 600px - 767px */
@media (max-width: 767px) {
  .container { padding: 0 20px; }
  section { padding: 40px 0; scroll-margin-top: 72px; }
  .hero { min-height: 85vh; }
  .hero h1 { font-size: clamp(28px, 5vw, 36px); }
  .hero-tagline { font-size: clamp(15px, 2vw, 17px); }
  .hero-svg { height: clamp(60px, 8vw, 80px); }
  .SyncXR
  .hero-credibility { gap: 16px; margin-top: 28px; }
  .credibility-logo { height: 32px; max-width: 120px; } { height: clamp(45px, 6vw, 65px); transform: scale(1.75); }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .enterprise-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .how-step-item { padding: 20px; }
  .step-number { width: 70px; height: 70px; }
  .step-number i { font-size: 24px; }
  .step-num { width: 28px; height: 28px; font-size: 12px; top: -10px; right: -10px; }
  .how-step-item h3 { font-size: 16px; }
  .interest-form { grid-template-columns: 1fr; gap: 20px; }
  .compat-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .compat-group:nth-child(2) .compat-logos-grid { grid-template-columns: repeat(2, 1fr); }
  .pilot-badges { grid-template-columns: 1fr; gap: 16px; }
  .video-preview-intro { font-size: 16px; margin: 0 auto 24px; }
  .video-wrapper { border-radius: 12px; }
  .video-wrapper iframe { border-radius: 10px; }
  .scroll-to-top { bottom: 20px; right: 20px; }
}

/* Footer responsive styles */
@media (max-width: 1023px) {
  .footer-content { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand { align-items: center; text-align: center; }
  .footer-tagline { max-width: 100%; }
  .footer-contact { flex-direction: column; gap: 24px; }
  .footer-contact-item { justify-content: center; }
}

@media (max-width: 767px) {
  .footer-content { gap: 32px; }
  .footer-logo { justify-content: center; }
  .footer-logo img { height: 55px; }
  .footer-contact-item { flex-direction: column; text-align: center; align-items: center; gap: 12px; }
  .footer-contact-item i { margin-top: 0; }
  .footer-bottom { margin-top: 24px; padding-top: 20px; }
}

/* Mobile Portrait: Below 600px */
@media (max-width: 599px) {
  .container { padding: 0 16px; }
  section { padding: 32px 0; scroll-margin-top: 70px; }
  .hero { min-height: 80vh; }
  .hero h1 { font-size: clamp(24px, 6vw, 32px); }
  .hero-tagline { font-size: clamp(14px, 2vw, 16px); }
  .SyncXR { transform: scale(1.75); }
  .hero-logo { height: clamp(60px, 8vw, 80px); }
  .hero-credibility { gap: 12px; margin-top: 24px; }
  .credibility-logo { height: 28px; max-width: 100px; }
  .subhead { font-size: 16px; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; }
  .how-steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .how-step-item { padding: 18px; }
  .how-step-item h3 { font-size: 15px; }
  .step-number { width: 60px; height: 60px; }
  .step-number i { font-size: 20px; }
  .step-num { width: 24px; height: 24px; font-size: 10px; top: -8px; right: -8px; }
  .compat-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .compat-group:nth-child(2) .compat-logos-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-item img { height: 40px; }
  .logo-name { font-size: 11px; }
  .pilot-badges { gap: 16px; }
  .pilot-badge { padding: 20px; }
  .video-preview h2 { font-size: clamp(24px, 5vw, 28px); }
  .video-preview-intro { font-size: 15px; margin: 0 auto 20px; }
  .video-wrapper { border-radius: 8px; }
  .video-wrapper iframe { border-radius: 6px; }
  .video-modal-content { width: 95vw; height: min(53.4vw, 300px); }
  .video-modal-close { top: 8px; right: 8px; width: 32px; height: 32px; }
  .scroll-to-top { bottom: 16px; right: 16px; width: 48px; height: 48px; }
  .interest-form input, .interest-form textarea { padding: 14px 12px; font-size: 16px; }
  .header-cta { font-size: 12px; padding: 8px 12px; }
  .brand-logo { height: 40px; }
  .site-footer { padding: 32px 0 16px; }
  .footer-content { gap: 24px; }
  .footer-logo img { height: 50px; }
  .footer-tagline { font-size: 14px; }
  .footer-contact-item { font-size: 14px; }
  .footer-contact-item a { font-size: 15px; }
  .contact-label { font-size: 11px; }
  .footer-bottom { margin-top: 20px; padding-top: 16px; }
  .footer-copyright { font-size: 13px; }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100vh; }
  section { padding: 24px 0; }
  .video-preview-container { max-width: 800px; }
}

/* Mobile performance optimizations */
@media (max-width: 767px) {
  /* Reduce animations on mobile for better performance */
  .particle { animation-duration: 20s; }
  .grid-lines { animation-duration: 30s; }
  .gradient-orbit { animation-duration: 25s; }
  
  /* Optimize hover effects for touch devices */
  .card:hover, .how-step-item:hover, .compat-group:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  
  /* Improve touch targets and button styling */
  .btn { 
    min-height: 48px; 
    padding: 14px 20px; 
    font-size: 15px;
    border-radius: 8px;
  }
  .header-cta {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 44px;
  }
  .interest-form input, .interest-form textarea { 
    min-height: 48px; 
    border-radius: 8px;
    font-size: 16px;
  }
  
  /* Optimize video for mobile */
  .video-wrapper { 
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  }
}