:root {
	--primary: #5E2BFF;
	--primary-dark: #3A00CC;
	--purple-mid: #B44BFF;
	--accent: #FF6B6B;
	--gradient: linear-gradient(135deg, #00C6FF 0%, #5E2BFF 45%, #FF6B6B 100%);
	--gradient-text: linear-gradient(120deg, #00C6FF 0%, #7B4FFF 50%, #FF6B6B 100%)
}

[data-theme="light"] {
	--bg: #F5F4FA;
	--bg2: #FFFFFF;
	--bg3: #EEECFB;
	--card-bg: #FFFFFF;
	--card-border: rgba(94, 43, 255, 0.1);
	--text: #1A1A35;
	--muted: #4A4A6A;
	--header-bg: rgba(255, 255, 255, 0.94);
	--header-shadow: 0 2px 20px rgba(94, 43, 255, 0.07);
	--divider: rgba(94, 43, 255, 0.07);
	--badge-bg: rgba(94, 43, 255, 0.06);
	--badge-border: rgba(94, 43, 255, 0.18);
	--toggle-bg: #EAE6FF;
	--toggle-icon: #5E2BFF;
	--card-num: rgba(94, 43, 255, 0.18)
}

[data-theme="dark"] {
	--bg: #0D0D1A;
	--bg2: #13132A;
	--bg3: #1A1A30;
	--card-bg: #1F1F3D;
	--card-border: rgba(255, 255, 255, 0.08);
	--text: #E8E8F5;
	--muted: #A8A8CC;
	--header-bg: rgba(13, 13, 26, 0.95);
	--header-shadow: 0 2px 20px rgba(94, 43, 255, 0.2);
	--divider: rgba(255, 255, 255, 0.06);
	--badge-bg: rgba(94, 43, 255, 0.18);
	--badge-border: rgba(94, 43, 255, 0.45);
	--toggle-bg: #2A2A4A;
	--toggle-icon: #B44BFF;
	--card-num: rgba(180, 75, 255, 0.4)
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

html {
	scroll-behavior: smooth
}

body {
	font-family: 'DM Sans', sans-serif;
	background: var(--bg);
	color: var(--text);
	overflow-x: hidden;
	transition: background .35s, color .35s
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	padding: 12px 0;
	transition: background .3s, box-shadow .3s
}

#header.scrolled {
	background: var(--header-bg);
	backdrop-filter: blur(14px);
	box-shadow: var(--header-shadow)
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem
}

.logo-img {
	height: 44px;
	width: auto;
	display: block;
	filter: drop-shadow(0 0 8px rgba(180, 75, 255, .3));
	transition: filter .3s, transform .3s
}

.logo-img:hover {
	transform: scale(1.04);
	filter: drop-shadow(0 0 14px rgba(180, 75, 255, .6))
}

nav ul {
	list-style: none;
	display: flex;
	gap: 1.8rem
}

nav ul li a {
	color: var(--muted);
	text-decoration: none;
	font-size: .88rem;
	font-weight: 500;
	transition: color .2s
}

nav ul li a:hover {
	color: var(--text)
}

.theme-toggle {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--toggle-bg);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: var(--toggle-icon);
	transition: background .3s, transform .2s;
	flex-shrink: 0
}

.theme-toggle:hover {
	transform: rotate(20deg) scale(1.1)
}

#hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding: 110px 0 70px
}

[data-theme="dark"] #hero {
	background: linear-gradient(135deg, #0D0D1A 0%, #1a0a3a 50%, #0D0D1A 100%)
}

[data-theme="light"] #hero {
	background: linear-gradient(135deg, #f0edff 0%, #e8f4ff 40%, #f5f4fa 100%)
}

.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none
}

.orb1 {
	width: 500px;
	height: 500px;
	background: rgba(94, 43, 255, .2);
	top: -100px;
	right: -100px
}

.orb2 {
	width: 350px;
	height: 350px;
	background: rgba(0, 198, 255, .12);
	bottom: -50px;
	left: -80px
}

.orb3 {
	width: 250px;
	height: 250px;
	background: rgba(180, 75, 255, .18);
	top: 50%;
	left: 38%
}

[data-theme="light"] .orb1 {
	background: rgba(94, 43, 255, .1)
}

[data-theme="light"] .orb2 {
	background: rgba(0, 198, 255, .07)
}

[data-theme="light"] .orb3 {
	background: rgba(180, 75, 255, .09)
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--badge-bg);
	border: 1px solid var(--badge-border);
	border-radius: 100px;
	padding: 6px 16px;
	font-size: .78rem;
	font-weight: 700;
	color: var(--purple-mid);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 1.5rem
}

.hero-badge .dot {
	width: 8px;
	height: 8px;
	background: var(--purple-mid);
	border-radius: 50%;
	animation: pulse 2s infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .5;
		transform: scale(.8)
	}
}

.hero-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(2.8rem, 6.5vw, 5.2rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -2px;
	color: var(--text);
	margin-bottom: 1.2rem
}

.hero-title .gradient-text {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.hero-subtitle {
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--muted);
	max-width: 500px;
	line-height: 1.75;
	margin-bottom: 2.5rem
}

.btn-primary-custom {
	background: var(--gradient);
	border: none;
	border-radius: 50px;
	padding: 13px 32px;
	font-size: .92rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	transition: transform .2s, box-shadow .2s
}

.btn-primary-custom:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(94, 43, 255, .35);
	color: #fff
}

.btn-outline-custom {
	border: 1.5px solid var(--badge-border);
	border-radius: 50px;
	padding: 12px 26px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	display: inline-block;
	margin-left: 10px;
	transition: border-color .2s, color .2s
}

.btn-outline-custom:hover {
	border-color: var(--primary);
	color: var(--primary)
}

.hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 360px
}

.waveform {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 140px
}

.bar {
	width: 6px;
	border-radius: 3px;
	background: var(--gradient);
	animation: wave 1.3s ease-in-out infinite
}

.bar:nth-child(1) {
	height: 28%;
	animation-delay: 0s
}

.bar:nth-child(2) {
	height: 55%;
	animation-delay: .08s
}

.bar:nth-child(3) {
	height: 82%;
	animation-delay: .16s
}

.bar:nth-child(4) {
	height: 100%;
	animation-delay: .24s
}

.bar:nth-child(5) {
	height: 72%;
	animation-delay: .32s
}

.bar:nth-child(6) {
	height: 50%;
	animation-delay: .4s
}

.bar:nth-child(7) {
	height: 88%;
	animation-delay: .32s
}

.bar:nth-child(8) {
	height: 62%;
	animation-delay: .24s
}

.bar:nth-child(9) {
	height: 78%;
	animation-delay: .16s
}

.bar:nth-child(10) {
	height: 42%;
	animation-delay: .08s
}

.bar:nth-child(11) {
	height: 28%;
	animation-delay: 0s
}

.bar:nth-child(12) {
	height: 58%;
	animation-delay: .12s
}

.bar:nth-child(13) {
	height: 94%;
	animation-delay: .2s
}

.bar:nth-child(14) {
	height: 68%;
	animation-delay: .28s
}

.bar:nth-child(15) {
	height: 48%;
	animation-delay: .36s
}

@keyframes wave {

	0%,
	100% {
		transform: scaleY(1)
	}

	50% {
		transform: scaleY(.25)
	}
}

.hero-card {
	position: absolute;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 14px 18px;
	font-size: .82rem;
	font-weight: 500;
	box-shadow: 0 8px 30px rgba(94, 43, 255, .1)
}

[data-theme="dark"] .hero-card {
	background: rgba(255, 255, 255, .07)
}

.hero-card.top-left {
	top: 20px;
	left: 0
}

.hero-card.bot-right {
	bottom: 30px;
	right: 0
}

.icon-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--badge-bg);
	border-radius: 100px;
	padding: 4px 10px;
	margin-bottom: 6px;
	font-size: .78rem;
	color: var(--purple-mid)
}

section {
	padding: 90px 0
}

.section-label {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: .75rem
}

.section-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--text);
	margin-bottom: 1rem
}

.section-lead {
	font-size: 1.02rem;
	color: var(--muted);
	max-width: 560px;
	line-height: 1.75
}

.section-divider {
	height: 1px;
	background: var(--divider)
}

#about {
	background: var(--bg2)
}

.about-text p {
	color: var(--muted);
	line-height: 1.8;
	font-size: 1rem;
	margin-bottom: 1rem
}

.about-text strong {
	color: var(--text);
	font-weight: 600
}

.project-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--badge-bg);
	border: 1px solid var(--badge-border);
	border-radius: 12px;
	padding: 12px 18px;
	margin-top: 1rem;
	font-size: .875rem;
	color: var(--muted)
}

.project-badge i {
	color: var(--primary);
	font-size: 1.2rem
}

#diagram {
	background: var(--bg)
}

.diagram-container {
	background: var(--bg2);
	border: 1px solid var(--card-border);
	border-radius: 24px;
	padding: 2rem 1.5rem 1.5rem;
	margin-top: 2.5rem
}

#flowCanvas {
	width: 100%;
	display: block
}

.diagram-caption {
	text-align: center;
	margin-top: 1.25rem;
	font-size: .82rem;
	color: var(--muted);
	font-style: italic;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6
}

#how-it-works {
	background: var(--bg2)
}

.component-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.4rem;
	margin-top: 3rem
}

.component-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	padding: 2rem 1.7rem;
	position: relative;
	overflow: hidden;
	transition: transform .25s, border-color .25s, box-shadow .25s
}

.component-card:hover {
	transform: translateY(-6px);
	border-color: rgba(94, 43, 255, .4);
	box-shadow: 0 16px 40px rgba(94, 43, 255, .12)
}

.component-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient);
	opacity: 0;
	transition: opacity .25s
}

.component-card:hover::before {
	opacity: 1
}

.card-number {
	font-family: 'Montserrat', sans-serif;
	font-size: 3rem;
	font-weight: 900;
	color: var(--card-num);
	line-height: 1;
	margin-bottom: .5rem;
	transition: color .35s
}

.card-icon {
	width: 46px;
	height: 46px;
	background: var(--badge-bg);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 1rem;
	color: var(--purple-mid)
}

.component-card h4 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: .65rem
}

.component-card p {
	font-size: .88rem;
	color: var(--muted);
	line-height: 1.7
}

#flow {
	background: var(--bg)
}

.flow-steps {
	display: flex;
	flex-direction: column;
	position: relative;
	max-width: 640px
}

.flow-steps::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--primary), transparent)
}

.flow-step {
	display: flex;
	gap: 1.4rem;
	padding: 0 0 2.4rem
}

.step-dot {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: .9rem;
	color: #fff;
	z-index: 1;
	box-shadow: 0 0 20px rgba(94, 43, 255, .4)
}

.step-content h5 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: .98rem;
	color: var(--text);
	margin-bottom: .35rem;
	padding-top: 10px
}

.step-content p {
	font-size: .88rem;
	color: var(--muted);
	line-height: 1.7
}

#illustrated {
	background: var(--bg2);
	padding: 0
}

.illus-section {
	padding: 60px 0;
	border-bottom: 1px solid var(--divider)
}

.illus-section:last-child {
	border-bottom: none
}

.illus-img-wrap {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	box-shadow: 0 8px 32px rgba(94, 43, 255, .08);
	background: var(--card-bg)
}

.illus-img-wrap img {
	width: 100%;
	height: auto;
	display: block
}

.illus-img-wrap .img-ph {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--badge-bg)
}

.illus-img-wrap .img-ph i {
	font-size: 3rem;
	color: var(--primary);
	opacity: .35
}

.illus-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--badge-bg);
	border: 1px solid var(--badge-border);
	border-radius: 100px;
	padding: 5px 14px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: .9rem
}

.illus-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--text);
	margin-bottom: .75rem;
	line-height: 1.3
}

.illus-body {
	font-size: .93rem;
	color: var(--muted);
	line-height: 1.8
}

.illus-body strong {
	color: var(--text);
	font-weight: 600
}

.illus-caption {
	margin-top: .9rem;
	padding: 10px 14px;
	background: var(--badge-bg);
	border-left: 3px solid var(--primary);
	border-radius: 0 8px 8px 0;
	font-size: .82rem;
	color: var(--muted);
	font-style: italic;
	line-height: 1.5
}

#equipment {
	background: var(--bg);
	padding: 70px 0
}

.equipment-cards {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
	margin-top: 2.5rem
}

.eq-card {
	flex: 1;
	min-width: 200px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform .2s, box-shadow .2s
}

.eq-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(94, 43, 255, .1)
}

.eq-icon {
	font-size: 2.3rem;
	margin-bottom: 1rem;
	background: var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.eq-card h5 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--text);
	margin-bottom: .4rem
}

.eq-card p {
	font-size: .875rem;
	color: var(--muted)
}

#benefits {
	background: var(--bg2)
}

.benefit-tabs {
	display: flex;
	gap: .75rem;
	margin-bottom: 2.5rem
}

.tab-btn {
	padding: 9px 22px;
	border-radius: 100px;
	border: 1.5px solid var(--card-border);
	background: transparent;
	color: var(--muted);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	font-family: 'DM Sans', sans-serif
}

.tab-btn.active {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff
}

.benefit-panel {
	display: none
}

.benefit-panel.active {
	display: block
}

.benefit-list {
	list-style: none
}

.benefit-list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--divider);
	font-size: .93rem;
	color: var(--muted);
	line-height: 1.65
}

.benefit-list li:last-child {
	border-bottom: none
}

.benefit-list li i {
	color: var(--purple-mid);
	font-size: 1.1rem;
	margin-top: 2px;
	flex-shrink: 0
}

#blog {
	background: var(--bg)
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1.4rem;
	margin-top: 2.5rem
}

.blog-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 18px;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s;
	text-decoration: none;
	display: block;
	color: var(--text)
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 36px rgba(94, 43, 255, .12)
}

.blog-thumb {
	height: 155px;
	overflow: hidden;
	background: var(--badge-bg);
	display: flex;
	align-items: center;
	justify-content: center
}

.blog-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.blog-body {
	padding: 1.2rem 1.4rem 1.4rem
}

.blog-tag {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: .45rem
}

.blog-body h5 {
	font-family: 'Montserrat', sans-serif;
	font-size: .93rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: .45rem;
	line-height: 1.4
}

.blog-body p {
	font-size: .82rem;
	color: var(--muted);
	line-height: 1.6
}

.blog-meta {
	font-size: .75rem;
	color: var(--muted);
	margin-top: .7rem
}

#team {
	background: var(--bg2)
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.3rem;
	margin-top: 2.5rem
}

.team-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 18px;
	padding: 1.75rem 1.25rem;
	text-align: center;
	transition: transform .25s, box-shadow .25s
}

.team-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 30px rgba(94, 43, 255, .1)
}

.team-avatar {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	margin: 0 auto 1rem;
	overflow: hidden;
	border: 3px solid var(--badge-bg);
	box-shadow: 0 0 0 3px rgba(94, 43, 255, .14)
}

.team-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.team-card h5 {
	font-family: 'Montserrat', sans-serif;
	font-size: .86rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: .3rem
}

.team-card span {
	font-size: .76rem;
	color: var(--muted);
	line-height: 1.4;
	display: block
}

.team-socials {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: .75rem
}

.team-socials a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--badge-bg);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	text-decoration: none;
	transition: background .2s, color .2s
}

.team-socials a:hover {
	background: var(--primary);
	color: #fff
}

#cta {
	background: var(--bg);
	padding: 80px 0
}

.cta-box {
	background: var(--gradient);
	border-radius: 28px;
	padding: 64px 50px;
	text-align: center;
	position: relative;
	overflow: hidden
}

.cta-box::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 60%);
	pointer-events: none
}

.cta-box h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.1rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 1rem;
	position: relative
}

.cta-box p {
	color: rgba(255, 255, 255, .85);
	font-size: 1.02rem;
	margin-bottom: 2rem;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
	position: relative
}

.cta-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .15);
	border-radius: 100px;
	padding: 5px 16px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
	margin-bottom: 1.25rem;
	position: relative
}

.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	position: relative
}

.btn-cta-white {
	background: #fff;
	border-radius: 50px;
	padding: 13px 28px;
	font-size: .92rem;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: transform .2s, box-shadow .2s
}

.btn-cta-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
	color: var(--primary-dark)
}

.btn-cta-outline {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .6);
	border-radius: 50px;
	padding: 12px 28px;
	font-size: .92rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: transform .2s, background .2s, border-color .2s
}

.btn-cta-outline:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .15);
	border-color: #fff
}

footer {
	background: var(--bg3);
	padding: 40px 0;
	border-top: 1px solid var(--divider)
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem
}

.footer-copy {
	color: var(--muted);
	font-size: .85rem
}

.footer-links {
	display: flex;
	gap: 1.5rem
}

.footer-links a {
	color: var(--muted);
	text-decoration: none;
	font-size: .85rem;
	transition: color .2s
}

.footer-links a:hover {
	color: var(--text)
}

.fade-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease
}

.fade-up.visible {
	opacity: 1;
	transform: translateY(0)
}

@media(max-width:768px) {
	.hero-visual {
		display: none
	}

	.btn-outline-custom {
		margin-left: 0;
		margin-top: 10px;
		display: block;
		text-align: center
	}

	.footer-inner {
		flex-direction: column;
		text-align: center
	}

	.cta-box {
		padding: 40px 24px
	}

	nav ul {
		display: none
	}
}