/* /dolby-atmos/ — the page's OWN stylesheet, sifted out of the 138KB
   block WordPress served it in: every rule whose selector names a class
   this page's markup uses, and nothing belonging to Elementor. */
.atmos-page img,.atmos-page svg,.atmos-page video{max-width:100%;height:auto}
.atmos-page{
			--swiper-theme-color: #007aff
		}
.atmos-page{
			--swiper-navigation-size: 44px
		}
.atmos-page{
			--direction-multiplier: 1
		}
.atmos-page{
			--page-title-display: block
		}
.atmos-page{
			--se-primary: #C5E86C;
			--se-primary-dim: rgba(197, 232, 108, .6);
			--se-nexus: #3DA5D9;
			--se-nexus-dim: rgba(61, 165, 217, .6);
			--se-bg: #1a1f23;
			--se-frame: #262C31;
			--se-inner: #2E343A;
			--se-text: #ffffff;
			--se-text-dim: rgba(255, 255, 255, .7)
		}
.atmos-banner{
			position: relative;
			width: 100%;
			min-height: 480px;
			height: 100vh;
			background: linear-gradient(180deg, #0d1114 0, #1a1f23 50%, #0d1114 100%);
			overflow: hidden;
			cursor: pointer;
			display: block
		}
.atmos-banner::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 1px;
			background: linear-gradient(90deg, transparent 0, rgba(197, 232, 108, .4) 20%, rgba(197, 232, 108, .6) 50%, rgba(197, 232, 108, .4) 80%, transparent 100%);
			z-index: 30
		}
.atmos-banner::after{
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			background: linear-gradient(90deg, transparent 0, rgba(61, 165, 217, .3) 20%, rgba(197, 232, 108, .5) 50%, rgba(61, 165, 217, .3) 80%, transparent 100%);
			z-index: 30
		}
#particleCanvas{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1
		}
.node{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 70px;
			height: 70px;
			z-index: 10
		}
.node-left{
			left: 8%
		}
.node-right{
			right: 8%
		}
.node-ring{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			border: 2px solid var(--se-primary);
			opacity: .3
		}
.node-ring-1{
			width: 70px;
			height: 70px;
			animation: 3s ease-out infinite pulse-ring
		}
.node-ring-2{
			width: 90px;
			height: 90px;
			animation: 3s ease-out .5s infinite pulse-ring
		}
.node-ring-3{
			width: 110px;
			height: 110px;
			animation: 3s ease-out 1s infinite pulse-ring
		}
.node-right .node-ring{
			border-color: var(--se-nexus)
		}
.node-right .node-ring-1{
			animation: 2.5s ease-out infinite pulse-ring-out
		}
.node-right .node-ring-2{
			animation: 2.5s ease-out .4s infinite pulse-ring-out
		}
.node-right .node-ring-3{
			animation: 2.5s ease-out .8s infinite pulse-ring-out
		}
.node-core{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 44px;
			height: 44px;
			background: radial-gradient(circle at 40% 40%, #e3ff9c, var(--se-primary) 60%, #9bc33d);
			border-radius: 50%;
			box-shadow: 0 0 30px rgba(197, 232, 108, .5), 0 0 60px rgba(197, 232, 108, .3), inset 0 -4px 12px rgba(0, 0, 0, .2)
		}
.node-right .node-core{
			background: radial-gradient(circle at 40% 40%, #7fd8f7, var(--se-nexus) 60%, #2589b8);
			box-shadow: 0 0 30px rgba(61, 165, 217, .5), 0 0 60px rgba(61, 165, 217, .3), inset 0 -4px 12px rgba(0, 0, 0, .2)
		}
.node-inner{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 16px;
			height: 16px;
			background: #fff;
			border-radius: 50%;
			box-shadow: 0 0 15px rgba(255, 255, 255, .8)
		}
.node-label{
			position: absolute;
			bottom: -28px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 9px;
			font-weight: 600;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: rgba(255, 255, 255, .4);
			white-space: nowrap
		}
.content-layer{
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 60px 20px;
			z-index: 20;
			pointer-events: none
		}
.content-void{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30px 60px
		}
.badge-row{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			margin-bottom: 20px;
			flex-wrap: wrap
		}
.badge-logo{
			height: 22px;
			width: auto;
			display: block;
			opacity: .9
		}
.certified-text{
			font-size: 13px;
			font-weight: 400;
			letter-spacing: .2px;
			color: rgba(255, 255, 255, .7)
		}
.headline{
			font-size: clamp(28px, 4vw, 44px);
			font-weight: 700;
			color: var(--se-text);
			line-height: 1.15;
			margin-bottom: 16px;
			max-width: 600px
		}
.dolby-inline{
			display: inline-flex;
			align-items: center;
			justify-content: center
		}
.dolby-inline img{
			height: clamp(44px, 6vw, 72px);
			width: auto;
			display: inline-block;
			vertical-align: middle
		}
.subheadline{
			font-size: clamp(14px, 1.5vw, 17px);
			font-weight: 400;
			color: var(--se-text-dim);
			line-height: 1.6;
			max-width: 500px;
			margin-bottom: 24px
		}
.stats-row{
			display: flex;
			gap: 32px;
			margin-bottom: 24px;
			justify-content: center
		}
.stat-item{
			text-align: center
		}
.stat-value{
			font-size: 24px;
			font-weight: 700;
			color: var(--se-primary);
			line-height: 1;
			margin-bottom: 4px;
			text-transform: uppercase;
			letter-spacing: .5px
		}
.stat-label{
			font-size: 11px;
			font-weight: 500;
			color: rgba(255, 255, 255, .5);
			text-transform: uppercase;
			letter-spacing: .5px
		}
.cta-container{
			pointer-events: auto;
			background: 0 0 !important;
			border: 0 !important
		}
/* Stack the hero CTA buttons vertically */
		.atmos-banner .cta-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
		}
.cta-button{
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 14px 28px;
			background: linear-gradient(135deg, var(--se-primary), #e3ff9c);
			color: var(--se-bg);
			font-size: 14px;
			font-weight: 700;
			text-decoration: none;
			border-radius: 8px;
			transition: all .3s cubic-bezier(.23, 1, .32, 1);
			box-shadow: 0 4px 20px rgba(197, 232, 108, .3)
		}
.cta-button:hover{
			transform: translateY(-2px);
			box-shadow: 0 8px 30px rgba(197, 232, 108, .4)
		}
.cta-button svg{
			transition: transform .3s ease
		}
.cta-button:hover svg{
			transform: translateX(4px)
		}
@media (max-width:768px){.atmos-banner{
				min-height: 520px;
				height: 100vh
			}
.content-layer{
				padding: 40px 20px;
				justify-content: center
			}
.content-void{
				padding: 20px 30px
			}
.node{
				width: 50px;
				height: 50px
			}
.node-left{
				left: 5%
			}
.node-right{
				right: 5%
			}
.node-core{
				width: 32px;
				height: 32px
			}
.node-inner{
				width: 12px;
				height: 12px
			}
.node-ring-1{
				width: 50px;
				height: 50px
			}
.node-ring-2{
				width: 65px;
				height: 65px
			}
.node-ring-3{
				width: 80px;
				height: 80px
			}
.node-label{
				display: none
			}
.stats-row{
				gap: 20px
			}
.stat-value{
				font-size: 20px
			}}
.atmos-page{
			--se-bg: #262C31;
			--se-bg-dark: #1a1d20;
			--se-bg-darker: #0D0F12;
			--se-primary: #C5E86C;
			--se-primary-dim: rgba(197, 232, 108, .6);
			--se-cyan: #3DA5D9;
			--se-gold: #F7B226;
			--se-magenta: #E45B8B;
			--text: #ffffff;
			--text-secondary: rgba(255, 255, 255, .6);
			--text-tertiary: rgba(255, 255, 255, .4)
		}
@media (prefers-reduced-motion:reduce){.fade-in{
				transition: opacity .3s ease;
				transform: none
			}}
.page-wrapper{
			position: relative;
			background: linear-gradient(135deg, var(--se-bg-darker) 0%, var(--se-bg-dark) 50%, var(--se-bg-darker) 100%);
			overflow: hidden
		}
.fade-in{
			opacity: 0;
			transform: translateY(24px);
			transition: opacity .6s ease-out, transform .6s ease-out
		}
.fade-in.visible{
			opacity: 1;
			transform: translateY(0)
		}
.fade-in-delay-1{
			transition-delay: 0.1s
		}
.fade-in-delay-2{
			transition-delay: 0.2s
		}
.stagger-children .fade-in:first-child{
			transition-delay: 0s
		}
.stagger-children .fade-in:nth-child(2){
			transition-delay: 0.1s
		}
.stagger-children .fade-in:nth-child(3){
			transition-delay: 0.2s
		}
.stagger-children .fade-in:nth-child(4){
			transition-delay: 0.3s
		}
.stagger-children .fade-in:nth-child(5){
			transition-delay: 0.4s
		}
.stagger-children .fade-in:nth-child(6){
			transition-delay: 0.5s
		}
.intro{
			padding: 120px 48px;
			background: 0 0;
			text-align: center;
			overflow: hidden
		}
.intro-container{
			max-width: 900px;
			margin: 0 auto
		}
.intro-lead{
			font-size: clamp(1.5rem, 3vw, 2rem);
			font-weight: 400;
			color: var(--text);
			line-height: 1.6;
			margin-bottom: 28px
		}
.intro-lead strong{
			color: var(--se-primary);
			font-weight: 600
		}
.intro-body{
			font-size: clamp(1rem, 1.5vw, 1.1875rem);
			color: var(--text-secondary);
			line-height: 1.75;
			max-width: 780px;
			margin: 0 auto
		}
@media (max-width:768px){.intro{
				padding: 80px 24px
			}
.intro-lead{
				font-size: 1.375rem
			}
.intro-body{
				font-size: 1rem
			}}
.insight{
			padding: 120px 48px;
			background: 0 0;
			overflow: hidden
		}
.insight-container{
			max-width: 1440px;
			margin: 0 auto
		}
.section-heading{
			text-align: center;
			font-size: .875rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .15em;
			color: var(--text-tertiary);
			margin-bottom: 64px
		}
.insight-grid{
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px
		}
.insight-card{
			background: var(--se-bg);
			border-radius: 12px;
			padding: 40px;
			display: flex;
			flex-direction: column;
			align-items: center
		}
.insight-card.traditional{
			border: 1px solid rgba(255, 255, 255, .06)
		}
.insight-card.source-connect{
			border: 1px solid rgba(197, 232, 108, .15)
		}
.insight-diagram{
			width: 100%;
			max-width: 280px;
			margin-bottom: 32px
		}
.insight-diagram svg{
			width: 100%;
			height: auto;
			display: block
		}
.insight-text{
			text-align: center
		}
.insight-text h3{
			font-size: 1.25rem;
			font-weight: 600;
			margin-bottom: 12px;
			color: var(--text)
		}
.insight-card.traditional .insight-text h3{
			color: var(--text-secondary)
		}
.insight-card.source-connect .insight-text h3{
			color: var(--se-primary)
		}
.insight-text p{
			font-size: .9375rem;
			line-height: 1.6;
			color: var(--text-secondary)
		}
@media (max-width:768px){.insight{
				padding: 80px 24px
			}
.insight-grid{
				grid-template-columns: 1fr;
				gap: 32px
			}
.insight-card{
				padding: 32px 24px
			}}
.no-limits{
			padding: 120px 48px;
			background: 0 0;
			overflow: hidden
		}
.no-limits-container{
			max-width: 1200px;
			margin: 0 auto
		}
.no-limits-grid{
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 80px;
			align-items: center
		}
.no-limits-content{
			max-width: 480px
		}
.no-limits-eyebrow{
			font-size: .75rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .15em;
			color: var(--se-cyan);
			margin-bottom: 16px
		}
.no-limits-headline{
			font-size: clamp(1.75rem, 3vw, 2.25rem);
			font-weight: 700;
			letter-spacing: -.02em;
			line-height: 1.2;
			margin-bottom: 24px;
			color: var(--text)
		}
.no-limits-headline em{
			font-style: normal;
			color: var(--se-primary)
		}
.no-limits-body{
			font-size: 1rem;
			line-height: 1.75;
			color: var(--text-secondary);
			margin-bottom: 32px
		}
.no-limits-callout{
			padding: 20px 24px;
			background: rgba(197, 232, 108, .06);
			border-left: 3px solid var(--se-primary);
			border-radius: 0 8px 8px 0
		}
.no-limits-callout p{
			font-size: .9375rem;
			line-height: 1.6;
			color: var(--text);
			font-weight: 500
		}
.no-limits-visual{
			position: relative
		}
.no-limits-visual svg{
			width: 100%;
			height: auto;
			display: block
		}
@media (max-width:1000px){.no-limits-grid{
				grid-template-columns: 1fr;
				gap: 48px
			}
.no-limits-content{
				max-width: 100%
			}
.no-limits-visual{
				max-width: 500px;
				margin: 0 auto
			}}
@media (max-width:768px){.no-limits{
				padding: 80px 24px
			}
.no-limits-headline{
				font-size: 1.5rem
			}
.no-limits-body{
				font-size: .9375rem
			}}
.flow{
			padding: 120px 48px;
			background: 0 0;
			overflow: hidden
		}
.flow-container{
			max-width: 1400px;
			margin: 0 auto;
			overflow: visible
		}
.flow-grid{
			display: flex;
			align-items: stretch;
			justify-content: center;
			gap: 0;
			flex-wrap: nowrap
		}
.flow-step{
			flex: 0 0 340px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center
		}
.flow-step-render{
			justify-content: flex-start
		}
.flow-step-render .flow-diagram{
			margin-top: 40px;
			margin-bottom: auto
		}
.flow-step-render .flow-title{
			margin-top: auto
		}
.flow-number{
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: var(--se-bg);
			border: 2px solid rgba(197, 232, 108, .4);
			color: var(--se-primary);
			font-size: 1rem;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 24px
		}
.flow-diagram{
			width: 280px;
			height: 200px;
			margin-bottom: 24px
		}
.flow-diagram-wide{
			width: 340px;
			height: 160px
		}
.flow-diagram svg{
			width: 100%;
			height: 100%;
			display: block;
			overflow: visible
		}
.flow-title{
			font-size: 1.25rem;
			font-weight: 600;
			color: var(--text);
			margin-bottom: 10px
		}
.flow-desc{
			font-size: .9375rem;
			line-height: 1.6;
			color: var(--text-tertiary);
			max-width: 280px
		}
.flow-connector{
			flex: 0 0 60px;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			margin-top: 160px
		}
.flow-connector svg{
			width: 50px;
			height: 20px
		}
@media (max-width:1300px){.flow-container{
				max-width: 100%;
				padding: 0 24px
			}
.flow-step{
				flex: 0 0 280px
			}
.flow-diagram{
				width: 240px;
				height: 180px
			}
.flow-diagram-wide{
				width: 280px;
				height: 140px
			}
.flow-connector{
				flex: 0 0 40px;
				margin-top: 150px
			}
.flow-step-render .flow-diagram{
				margin-top: 35px
			}}
@media (max-width:1100px){.flow-step{
				flex: 0 0 240px
			}
.flow-diagram{
				width: 200px;
				height: 160px
			}
.flow-diagram-wide{
				width: 240px;
				height: 120px
			}
.flow-connector{
				flex: 0 0 30px;
				margin-top: 130px
			}
.flow-desc{
				max-width: 220px;
				font-size: .875rem
			}
.flow-step-render .flow-diagram{
				margin-top: 30px
			}}
@media (max-width:900px){.flow{
				padding: 80px 24px
			}
.flow-grid{
				flex-direction: column;
				align-items: center;
				gap: 48px
			}
.flow-step{
				flex: none;
				width: 100%;
				max-width: 360px
			}
.flow-diagram{
				width: 280px;
				height: 200px
			}
.flow-diagram-wide{
				width: 320px;
				height: 150px
			}
.flow-desc{
				max-width: 300px;
				font-size: .9375rem
			}
.flow-connector{
				transform: rotate(90deg);
				padding-top: 0;
				flex: 0 0 30px
			}
.flow-connector svg{
				width: 40px
			}
.flow-step-render .flow-diagram{
				margin-top: 0;
				margin-bottom: 24px
			}
.flow-step-render .flow-title{
				margin-top: 0
			}}
@media (max-width:480px){.flow{
				padding: 60px 20px
			}
.flow-grid{
				gap: 40px
			}
.flow-step{
				max-width: 100%
			}
.flow-number{
				width: 32px;
				height: 32px;
				font-size: .875rem;
				margin-bottom: 20px
			}
.flow-diagram{
				width: 100%;
				max-width: 260px;
				height: 180px
			}
.flow-diagram-wide{
				width: 100%;
				max-width: 300px;
				height: 130px
			}
.flow-title{
				font-size: 1.125rem
			}
.flow-desc{
				font-size: .875rem;
				max-width: 100%;
				padding: 0 12px
			}}
.sync{
			padding: 100px 48px;
			background: 0 0;
			overflow: hidden
		}
.sync-container{
			max-width: 1100px;
			margin: 0 auto
		}
.sync-grid{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40px;
			max-width: 900px;
			margin: 0 auto
		}
.sync-card{
			background: var(--se-bg-dark);
			border: 1px solid rgba(255, 255, 255, .06);
			border-radius: 12px;
			padding: 40px 36px;
			text-align: center
		}
.sync-card-icon{
			width: 56px;
			height: 56px;
			margin: 0 auto 20px;
			background: rgba(197, 232, 108, .08);
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center
		}
.sync-card-icon svg{
			width: 28px;
			height: 28px;
			color: var(--se-primary)
		}
.sync-card h3{
			font-size: 1.125rem;
			font-weight: 600;
			color: var(--text);
			margin-bottom: 12px
		}
.sync-card p{
			font-size: .875rem;
			line-height: 1.6;
			color: var(--text-tertiary)
		}
@media (max-width:700px){.sync-grid{
				grid-template-columns: 1fr;
				max-width: 400px
			}}
@media (max-width:768px){.sync{
				padding: 80px 24px
			}
.sync-card{
				padding: 32px 28px
			}}
.testimonial{
			padding: 120px 48px;
			background: 0 0;
			overflow: hidden
		}
.testimonial-container{
			max-width: 900px;
			margin: 0 auto;
			text-align: center
		}
.testimonial-quote-mark{
			width: 48px;
			height: 48px;
			margin: 0 auto 32px;
			opacity: .3
		}
.testimonial-quote-mark svg{
			width: 100%;
			height: 100%;
			color: var(--se-primary)
		}
.testimonial-quote{
			font-size: clamp(1.125rem, 2vw, 1.375rem);
			font-weight: 400;
			line-height: 1.8;
			color: var(--text);
			margin-bottom: 40px;
			font-style: italic
		}
.testimonial-quote strong{
			color: var(--se-primary);
			font-weight: 600;
			font-style: normal
		}
.testimonial-author{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px
		}
.testimonial-name{
			font-size: 1rem;
			font-weight: 700;
			color: var(--text)
		}
.testimonial-title{
			font-size: .875rem;
			color: var(--text-tertiary)
		}
.testimonial-company{
			font-size: .875rem;
			font-weight: 600;
			color: var(--se-cyan);
			text-transform: uppercase;
			letter-spacing: .05em
		}
@media (max-width:768px){.testimonial{
				padding: 80px 24px
			}
.testimonial-quote{
				font-size: 1rem;
				line-height: 1.75
			}
.testimonial-quote-mark{
				width: 36px;
				height: 36px;
				margin-bottom: 24px
			}}
.specs{
			padding: 100px 48px;
			background: 0 0;
			overflow: hidden
		}
.specs-container{
			max-width: 900px;
			margin: 0 auto
		}
.specs-grid{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 48px 32px
		}
.spec-item{
			text-align: center
		}
.spec-value{
			font-size: 1.75rem;
			font-weight: 700;
			color: var(--text);
			letter-spacing: -.02em;
			margin-bottom: 8px
		}
.spec-label{
			font-size: .8125rem;
			color: var(--text-tertiary);
			text-transform: uppercase;
			letter-spacing: .08em
		}
@media (max-width:768px){.specs{
				padding: 80px 24px
			}
.specs-grid{
				grid-template-columns: repeat(2, 1fr);
				gap: 40px 24px
			}}
@media (max-width:480px){.specs-grid{
				grid-template-columns: 1fr;
				gap: 32px
			}}
.features{
			padding: 120px 48px;
			background: 0 0;
			overflow: hidden
		}
.features-container{
			max-width: 1300px;
			margin: 0 auto
		}
.features-subtitle{
			text-align: center;
			font-size: 1rem;
			color: var(--text-secondary);
			max-width: 600px;
			margin: -40px auto 64px;
			line-height: 1.6
		}
.features-grid{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 28px
		}
.feature-card{
			position: relative;
			background: linear-gradient(145deg, rgba(38, 44, 49, .6), rgba(26, 31, 35, .8));
			border: 1px solid rgba(255, 255, 255, .06);
			border-radius: 16px;
			padding: 32px 28px;
			transition: all .4s cubic-bezier(.4, 0, .2, 1);
			overflow: hidden
		}
.feature-card::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, var(--se-primary), var(--se-cyan));
			opacity: 0;
			transition: opacity .4s ease
		}
.feature-card:hover{
			transform: translateY(-6px);
			border-color: rgba(197, 232, 108, .2);
			box-shadow: 0 20px 50px rgba(0, 0, 0, .25), 0 0 0 1px rgba(197, 232, 108, .08)
		}
.feature-card:hover::before{
			opacity: 1
		}
.feature-icon{
			width: 52px;
			height: 52px;
			background: linear-gradient(135deg, rgba(197, 232, 108, .12), rgba(61, 165, 217, .08));
			border-radius: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px
		}
.feature-icon svg{
			width: 26px;
			height: 26px;
			color: var(--se-primary)
		}
.feature-card h3{
			font-size: 1.125rem;
			font-weight: 600;
			color: var(--text);
			margin-bottom: 10px
		}
.feature-card p{
			font-size: .875rem;
			line-height: 1.65;
			color: var(--text-tertiary)
		}
@media (max-width:1100px){.features-grid{
				grid-template-columns: repeat(2, 1fr)
			}}
@media (max-width:700px){.features{
				padding: 80px 24px
			}
.features-grid{
				grid-template-columns: 1fr
			}
.features-subtitle{
				margin-bottom: 48px
			}}
.workflow{
			padding: 120px 48px;
			background: 0 0;
			overflow: hidden
		}
.workflow-container{
			max-width: 1200px;
			margin: 0 auto
		}
.workflow-subtitle{
			text-align: center;
			font-size: 1rem;
			color: var(--text-secondary);
			max-width: 500px;
			margin: -40px auto 64px;
			line-height: 1.6
		}
.workflow-diagram{
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			gap: 40px;
			align-items: stretch
		}
.workflow-side{
			display: flex;
			flex-direction: column;
			gap: 24px
		}
.workflow-side-label{
			font-size: .75rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .15em;
			margin-bottom: 8px;
			padding-bottom: 12px;
			border-bottom: 1px solid rgba(255, 255, 255, .1)
		}
.workflow-send .workflow-side-label{
			color: var(--se-primary);
			text-align: right;
			border-color: rgba(197, 232, 108, .2)
		}
.workflow-receive .workflow-side-label{
			color: var(--se-cyan);
			border-color: rgba(61, 165, 217, .2)
		}
.workflow-item{
			display: flex;
			gap: 16px;
			align-items: flex-start;
			flex: 1
		}
.workflow-send .workflow-item{
			flex-direction: row-reverse;
			text-align: right
		}
.workflow-step-num{
			width: 32px;
			height: 32px;
			min-width: 32px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .8125rem;
			font-weight: 600
		}
.workflow-send .workflow-step-num{
			background: rgba(197, 232, 108, .1);
			border: 1px solid rgba(197, 232, 108, .3);
			color: var(--se-primary)
		}
.workflow-receive .workflow-step-num{
			background: rgba(61, 165, 217, .1);
			border: 1px solid rgba(61, 165, 217, .3);
			color: var(--se-cyan)
		}
.workflow-item-content h4{
			font-size: 1rem;
			font-weight: 600;
			color: var(--text);
			margin-bottom: 6px
		}
.workflow-item-content p{
			font-size: .875rem;
			line-height: 1.55;
			color: var(--text-tertiary)
		}
.workflow-center{
			position: relative;
			width: 60px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 40px 0
		}
.workflow-line{
			position: absolute;
			top: 0;
			bottom: 0;
			width: 3px;
			background: linear-gradient(180deg, var(--se-primary) 0%, var(--se-cyan) 50%, var(--se-primary) 100%);
			border-radius: 2px;
			opacity: .6
		}
.workflow-node-center{
			position: relative;
			z-index: 1;
			width: 40px;
			height: 40px;
			background: var(--se-bg-dark);
			border: 2px solid var(--se-primary);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 20px rgba(197, 232, 108, .3)
		}
.workflow-node-center svg{
			color: var(--se-primary);
			width: 16px;
			height: 16px
		}
.workflow-arrows{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			display: flex;
			justify-content: center
		}
.workflow-arrows .arrow-right{
			position: absolute;
			left: calc(50% + 30px);
			width: 24px;
			height: 24px;
			color: var(--se-cyan);
			opacity: .6;
			animation: 2s ease-in-out infinite arrow-pulse
		}
@media (max-width:900px){.workflow{
				padding: 80px 24px
			}
.workflow-diagram{
				grid-template-columns: 1fr;
				gap: 48px
			}
.workflow-center{
				width: 100%;
				height: 60px;
				padding: 0;
				flex-direction: row
			}
.workflow-line{
				width: 100%;
				height: 3px;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				right: 0;
				bottom: auto
			}
.workflow-receive .workflow-item,
			.workflow-send .workflow-item{
				flex-direction: row;
				text-align: left
			}
.workflow-receive .workflow-side-label,
			.workflow-send .workflow-side-label{
				text-align: left
			}
.workflow-arrows .arrow-right{
				transform: rotate(90deg);
				left: 50%;
				top: calc(50% + 30px)
			}}
.requirements{
			padding: 100px 48px 120px;
			background: 0 0;
			overflow: hidden
		}
.requirements-container{
			max-width: 1000px;
			margin: 0 auto
		}
.requirements-box{
			background: linear-gradient(145deg, rgba(38, 44, 49, .5), rgba(26, 31, 35, .7));
			border: 1px solid rgba(61, 165, 217, .15);
			border-radius: 20px;
			padding: 48px
		}
.requirements-header{
			display: flex;
			align-items: center;
			gap: 16px;
			margin-bottom: 36px
		}
.requirements-icon{
			width: 48px;
			height: 48px;
			background: rgba(61, 165, 217, .1);
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center
		}
.requirements-icon svg{
			width: 24px;
			height: 24px;
			color: var(--se-cyan)
		}
.requirements-header h3{
			font-size: 1.375rem;
			font-weight: 600;
			color: var(--se-cyan)
		}
.requirements-grid{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin-bottom: 40px
		}
.req-item{
			display: flex;
			align-items: flex-start;
			gap: 14px
		}
.req-check{
			width: 26px;
			height: 26px;
			min-width: 26px;
			background: rgba(197, 232, 108, .08);
			border: 1px solid rgba(197, 232, 108, .25);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--se-primary);
			margin-top: 2px
		}
.req-content strong{
			display: block;
			font-size: .9375rem;
			font-weight: 600;
			color: var(--text);
			margin-bottom: 4px
		}
.req-content p{
			font-size: .8125rem;
			line-height: 1.5;
			color: var(--text-tertiary)
		}
@media (max-width:768px){.requirements{
				padding: 80px 24px 100px
			}
.requirements-box{
				padding: 32px 24px
			}
.requirements-grid{
				grid-template-columns: 1fr
			}
.requirements-header{
				flex-direction: column;
				align-items: flex-start;
				gap: 12px
			}}
.cta{
			padding: 100px 48px 120px;
			padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
			background: 0 0;
			text-align: center;
			overflow: hidden
		}
.cta-container{
			max-width: 700px;
			margin: 0 auto;
			background: linear-gradient(145deg, rgba(197, 232, 108, .06), rgba(61, 165, 217, .04));
			border: 1px solid rgba(197, 232, 108, .15);
			border-radius: 24px;
			padding: 56px 48px
		}
.cta-headline{
			font-size: clamp(1.75rem, 4vw, 2.25rem);
			font-weight: 700;
			letter-spacing: -.02em;
			margin-bottom: 16px;
			color: var(--text)
		}
.cta-subline{
			font-size: 1rem;
			color: var(--text-secondary);
			margin-bottom: 36px;
			line-height: 1.65;
			max-width: 520px;
			margin-left: auto;
			margin-right: auto
		}
.cta-buttons{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;
			justify-content: center
		}
.cta-button{
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 16px 32px;
			background: linear-gradient(135deg, var(--se-primary), #d4f080);
			color: var(--se-bg-dark);
			font-family: inherit;
			font-size: 1rem;
			font-weight: 700;
			text-decoration: none;
			border-radius: 50px;
			border: none;
			cursor: pointer;
			transition: all .3s ease;
			box-shadow: 0 10px 30px rgba(197, 232, 108, .25)
		}
.cta-button:hover{
			transform: translateY(-3px);
			box-shadow: 0 15px 40px rgba(197, 232, 108, .35)
		}
.cta-button:active{
			transform: translateY(-1px);
			box-shadow: 0 8px 20px rgba(197, 232, 108, .3)
		}
.cta-button svg{
			width: 18px;
			height: 18px
		}
.cta-button-secondary{
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 16px 32px;
			background: 0 0;
			color: var(--text);
			font-family: inherit;
			font-size: 1rem;
			font-weight: 600;
			text-decoration: none;
			border-radius: 50px;
			border: 1px solid rgba(255, 255, 255, .25);
			cursor: pointer;
			transition: all .3s ease
		}
.cta-button-secondary:hover{
			background: rgba(255, 255, 255, .08);
			border-color: var(--se-primary);
			color: var(--se-primary)
		}
@media (hover:none){.cta-button:hover{
				transform: none;
				box-shadow: 0 10px 30px rgba(197, 232, 108, .25)
			}}
@media (max-width:768px){.cta{
				padding: 80px 24px 100px
			}
.cta-container{
				padding: 40px 28px
			}
.cta-buttons{
				flex-direction: column;
				align-items: center
			}
.cta-button,
			.cta-button-secondary{
				width: 100%;
				max-width: 280px;
				justify-content: center
			}}
/* Video Modal Lightbox Styles */
		.video-modal{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10000;
			background: rgba(0, 0, 0, 0.8);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
			box-sizing: border-box;
		}
.video-modal-content{
			position: relative;
			width: 100%;
			max-width: 1200px;
			background: transparent;
			border-radius: 12px;
			overflow: visible;
			z-index: 2;
			animation: modalFadeIn 0.3s ease-out;
			padding: 0;
			pointer-events: auto;
			cursor: default;
		}
/* Add instruction text */
		.video-modal-instruction{
			position: absolute;
			bottom: -50px;
			left: 50%;
			transform: translateX(-50%);
			color: rgba(255, 255, 255, 0.8);
			font-size: 14px;
			text-align: center;
			z-index: 2;
			pointer-events: none;
		}
.video-wrapper{
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 56.25%; /* 16:9 aspect ratio */
			pointer-events: auto;
		}
.video-wrapper iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
@keyframes modalFadeIn{
			from {
				opacity: 0;
				transform: scale(0.8);
			}
			to {
				opacity: 1;
				transform: scale(1);
			}
		}