/* ==========================================================================
   Evoryx Theme — landing styles
   Colors/fonts are also exposed as presets in theme.json.
   ========================================================================== */

:root {
	--evx-ink: #0D1030;
	--evx-bg: #F7F6FB;
	--evx-line: #E6E4F0;
	--evx-text: #4A4E6A;
	--evx-text-2: #5A5E7A;
	--evx-text-3: #3B3F5C;
	--evx-purple: #7B4BF0;
	--evx-display: Unbounded, sans-serif;
	--evx-body: "Be Vietnam Pro", system-ui, sans-serif;
	--evx-rainbow: linear-gradient(90deg, #2FA8F6, #7B4BF0, #E0369B, #F07A2A);
	--evx-ease: cubic-bezier(.2, .7, .2, 1);
}

.wp-site-blocks { overflow-x: clip; }
body .wp-site-blocks > *,
main.evx-main > * { margin-block-start: 0; margin-block-end: 0; }

.evx-header,
.hero-bg,
.sec { line-height: normal; color: var(--evx-ink); font-family: var(--evx-body); }

.evx-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1288px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* ---------- Typography ---------- */
.evx-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--eyebrow, var(--evx-purple)); }
.evx-h1 { margin: 0; font-family: var(--evx-display); font-weight: 600; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.08; letter-spacing: -.02em; }
.evx-h2 { margin: 0; font-family: var(--evx-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -.015em; }
.evx-h2--sm { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.evx-h3 { margin: 0; font-family: var(--evx-body); font-size: 21px; font-weight: 700; line-height: normal; letter-spacing: normal; }
.evx-h3--20 { font-size: 20px; }
.evx-h3--sm { font-size: 18px; }
.evx-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--evx-text); }
.evx-text--lg { font-size: 17px; }
.evx-lead { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.65; color: var(--evx-text); }
.evx-strong { font-weight: 600; }
.evx-gradient-text {
	background: var(--grad, linear-gradient(90deg, #2FA8F6, #7B4BF0 40%, #E0369B 70%, #F07A2A));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.evx-bignum { font-family: var(--evx-display); font-size: 40px; font-weight: 600; }
.evx-bignum--44 { font-size: 44px; align-self: flex-start; }

/* ---------- Section heads ---------- */
.evx-head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.evx-head--split .evx-head__main { max-width: 640px; }
.evx-head--left { max-width: 720px; }
.evx-head--center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.evx-head--center .evx-head__main { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.evx-head--center .evx-eyebrow { margin: 0; }
.evx-head--center .evx-h2 { max-width: 760px; }

/* ---------- Layout ---------- */
.evx-section { padding-block: 104px; }
.evx-stack { display: flex; flex-direction: column; gap: 56px; }
.evx-stack--48 { gap: 48px; }
.evx-stack--40 { gap: 40px; }
.evx-band > .evx-container { padding-block: 104px; }
.evx-band--96 > .evx-container { padding-block: 96px; }
.evx-band--white { background: #FFFFFF; border-top: 1px solid var(--evx-line); border-bottom: 1px solid var(--evx-line); }
.evx-band--dark { background: var(--evx-ink); color: #FFFFFF; }
.evx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); gap: var(--gap, 20px); }
.evx-grid--tight { --gap: 16px; }
.evx-gradient-border { background: linear-gradient(var(--angle, 135deg), #2FA8F6, #7B4BF0 45%, #E0369B 75%, #F07A2A); }
.evx-rainbow-line { height: 3px; border-radius: 3px; margin: 0 8px 8px; background: var(--evx-rainbow); }

/* ---------- Buttons ---------- */
.evx-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 26px; border-radius: 999px;
	font-size: 16px; font-weight: 600; text-decoration: none;
	box-sizing: border-box;
}
.evx-btn--dark, .evx-btn--dark:hover { background: var(--evx-ink); color: #FFFFFF; }
.evx-btn--light, .evx-btn--light:hover { background: #FFFFFF; color: var(--evx-ink); border: 1px solid #D9D6E6; }
.evx-btn--white, .evx-btn--white:hover { background: #FFFFFF; color: var(--evx-ink); }
.evx-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding: 0 22px; box-sizing: border-box;
	border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.evx-pill--outline, .evx-pill--outline:hover { border: 1.5px solid #D9D6E6; color: var(--evx-ink); }
.evx-pill--dark, .evx-pill--dark:hover { background: var(--evx-ink); color: #FFFFFF; }
.evx-pill--white, .evx-pill--white:hover { background: #FFFFFF; color: var(--evx-ink); }

/* ---------- Icons, chips ---------- */
.evx-ic {
	width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg); color: var(--fg);
}
.evx-ic--48 { width: 48px; height: 48px; }
.evx-ic--44 { width: 44px; height: 44px; border-radius: 12px; }
.evx-ic--34 { width: 34px; height: 34px; border-radius: 10px; }
.evx-check-badge {
	width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: #E9F8EF; color: #16804A;
}
.evx-check-badge--20 { width: 20px; height: 20px; }
.evx-check-badge--warn { background: #FEF4E2; color: #B5560E; font-size: 12px; font-weight: 700; }
.evx-dot-sm { width: 8px; height: 8px; border-radius: 50%; }
.evx-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.evx-tag { background: var(--bg); color: var(--fg); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }

/* ==========================================================================
   Header
   ========================================================================== */
.evx-site-header { position: sticky; top: 0; z-index: 20; }
.admin-bar .evx-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .evx-site-header { top: 0; } }

.evx-header {
	position: relative; z-index: 20;
	background: rgba(247, 246, 251, .86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--evx-line);
}
.evx-nav { max-width: 1288px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box; }
.evx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.evx-brand__mark { display: block; width: 54px; height: 44px; overflow: hidden; flex-shrink: 0; }
.evx-brand__mark img { display: block; width: 93px; height: auto; margin-left: -20px; margin-top: -7px; mix-blend-mode: multiply; }
.evx-brand__name { font-family: var(--evx-display); font-weight: 700; font-size: 20px; letter-spacing: .06em; color: var(--evx-ink); }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
.nav-links > a { color: var(--evx-ink); text-decoration: none; }
.nav-links > a:hover { color: var(--evx-purple); }
.evx-nav__actions { display: flex; align-items: center; gap: 10px; }
.evx-nav__login { text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 16px; color: var(--evx-ink); }
.evx-nav__login:hover { color: var(--evx-purple); }
.evx-nav__demo, .evx-nav__demo:hover {
	text-decoration: none; font-size: 15px; font-weight: 600; color: #FFFFFF; background: var(--evx-ink);
	padding: 12px 20px; border-radius: 999px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center;
}
@media (max-width: 860px) { .nav-links { display: none; } .hide-sm { display: none !important; } }
@media (max-width: 520px) { .hide-xs { display: none !important; } }

/* Services dropdown */
.svc-wrap { position: relative; }
.svc-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--evx-ink); cursor: pointer; transition: color .2s; }
.svc-btn:hover, .svc-btn.open { color: var(--evx-purple); }
.svc-btn svg { transition: transform .3s var(--evx-ease); }
.svc-btn.open svg { transform: rotate(180deg); }
.svc-panel { position: absolute; top: calc(100% + 16px); left: -24px; width: 400px; padding: 10px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--evx-line); box-shadow: 0 30px 60px -20px rgba(13, 16, 48, .3); z-index: 25; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity .25s ease, transform .35s var(--evx-ease), visibility 0s linear .35s; }
.svc-panel::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--evx-rainbow); }
.svc-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .25s ease, transform .35s var(--evx-ease), visibility 0s; }
.svc-it { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--evx-ink); opacity: 0; translate: 0 8px; transition: background .2s, opacity .3s ease, translate .4s var(--evx-ease); }
.svc-panel.open .svc-it { opacity: 1; translate: 0 0; }
.svc-panel.open .svc-it:nth-child(2) { transition-delay: .06s; }
.svc-it:hover { background: #F5F3FB; color: var(--evx-ink); }
.svc-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-tx { display: flex; flex-direction: column; gap: 4px; }
.svc-tx b { font-size: 15px; font-weight: 700; }
.svc-tx small { font-size: 13px; line-height: 1.5; color: var(--evx-text-2); font-weight: 400; }
.svc-back { display: none; }
.svc-back.open { display: block; position: fixed; inset: 0; z-index: 19; border: 0; padding: 0; margin: 0; background: transparent; cursor: default; }

/* Mobile menu */
.menu-btn { display: none; position: relative; width: 46px; height: 46px; border-radius: 14px; border: 1px solid #E2DFEE; background: #FFFFFF; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .3s, border-color .3s; }
.menu-btn .bar { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--evx-ink); transition: top .35s var(--evx-ease), transform .35s var(--evx-ease), opacity .2s, background .3s; }
.menu-btn .bar:nth-child(1) { top: 16px; }
.menu-btn .bar:nth-child(2) { top: 22px; right: 19px; }
.menu-btn .bar:nth-child(3) { top: 28px; }
.menu-btn.open { background: var(--evx-ink); border-color: var(--evx-ink); }
.menu-btn.open .bar { background: #FFFFFF; }
.menu-btn.open .bar:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-btn.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn.open .bar:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.m-panel, .m-backdrop { display: none; }
@media (max-width: 860px) {
	.menu-btn { display: inline-block; }
	.m-panel { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 10px); background: #FFFFFF; border: 1px solid var(--evx-line); border-radius: 24px; padding: 12px 8px; box-shadow: 0 30px 60px -20px rgba(13, 16, 48, .35); opacity: 0; visibility: hidden; transform: translateY(-14px) scale(.97); transform-origin: top right; pointer-events: none; transition: opacity .3s ease, transform .4s var(--evx-ease), visibility 0s linear .4s; max-height: calc(100vh - 100px); overflow-y: auto; }
	.m-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .3s ease, transform .4s var(--evx-ease), visibility 0s; }
	.m-backdrop { display: block; position: fixed; inset: 0; z-index: 19; border: 0; padding: 0; margin: 0; background: rgba(13, 16, 48, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .35s; }
	.m-backdrop.open { opacity: 1; pointer-events: auto; }
}
.m-nav { display: flex; flex-direction: column; }
.m-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; text-decoration: none; color: var(--evx-ink); min-height: 56px; box-sizing: border-box; opacity: 0; translate: -16px 0; transition: opacity .35s ease, translate .45s var(--evx-ease), background .2s; }
a.m-item:hover { background: #F5F3FB; color: var(--evx-ink); }
.m-panel.open .m-item { opacity: 1; translate: 0 0; }
.m-panel.open .m-item:nth-child(1) { transition-delay: .05s; }
.m-panel.open .m-item:nth-child(2) { transition-delay: .1s; }
.m-panel.open .m-item:nth-child(3) { transition-delay: .15s; }
.m-panel.open .m-item:nth-child(4) { transition-delay: .2s; }
.m-panel.open .m-item:nth-child(5) { transition-delay: .25s; }
.m-panel.open .m-cta { transition-delay: .3s; }
.m-item.m-svc { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.m-item.m-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 8px 4px; min-height: 0; }
.m-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-tx b { font-size: 16px; font-weight: 700; }
.m-tx small { font-size: 13px; color: var(--evx-text-2); }
.m-chev, .m-svc-chev { display: inline-flex; color: #9A9DB5; }
.m-chev { transition: translate .2s; }
a.m-item:hover .m-chev { translate: 3px 0; color: var(--evx-purple); }
.m-svc-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px; border: 0; border-radius: 16px; background: transparent; font: inherit; color: var(--evx-ink); text-align: left; cursor: pointer; }
.m-svc-btn:hover { background: #F5F3FB; }
.m-svc-chev { transition: transform .3s var(--evx-ease); }
.m-svc-chev.up { transform: rotate(180deg); color: var(--evx-purple); }
.m-svc-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--evx-ease); }
.m-svc-list.open { grid-template-rows: 1fr; }
.m-svc-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 4px; margin-left: 30px; padding-left: 16px; border-left: 1px solid var(--evx-line); }
.m-svc-list.open .m-svc-inner { padding-top: 2px; padding-bottom: 6px; }
.m-sub { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border-radius: 12px; text-decoration: none; color: var(--evx-ink); font-size: 15px; font-weight: 600; }
.m-sub:hover { background: #F5F3FB; color: var(--evx-ink); }
.m-sub-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scroll-bar { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--evx-rainbow); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-bg { background: var(--evx-bg) var(--hero-bg, none) center top / cover no-repeat; }
.evx-hero { box-sizing: border-box; max-width: 1288px; margin: 0 auto; padding: 80px 24px 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.evx-hero__copy { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.evx-hero__lead { margin: 0; font-size: 19px; line-height: 1.65; color: var(--evx-text); max-width: 580px; }
.evx-hero__visual { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; position: relative; }
.evx-hero__visual--app { flex-basis: 420px; display: block; }
.evx-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: #FFFFFF; border: 1px solid var(--evx-line); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--evx-text-3); }
.evx-badge__tag { background: var(--evx-ink); color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
.evx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.evx-bullets { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 8px; }
.evx-bullets > div { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--evx-text-3); }
.evx-bullets--check { gap: 14px 28px; padding-top: 4px; }

/* Livestream phone mockup */
.evx-phone { width: 340px; max-width: 100%; padding: 3px; border-radius: 40px; background: linear-gradient(160deg, #2FA8F6, #7B4BF0 45%, #E0369B 75%, #F07A2A); box-shadow: 0 40px 80px -30px rgba(76, 40, 160, .45); box-sizing: border-box; }
.evx-phone__screen { position: relative; height: 620px; border-radius: 37px; background: #12163A; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; box-sizing: border-box; }
.evx-host { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.evx-phone__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: linear-gradient(180deg, rgba(18, 22, 58, 0) 0%, rgba(18, 22, 58, .85) 70%); }
.evx-phone__top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.evx-phone__row { display: flex; align-items: center; gap: 8px; }
.evx-live { display: inline-flex; align-items: center; gap: 6px; background: #E0369B; color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 6px; letter-spacing: .06em; }
.evx-dot { width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.evx-chip-glass { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 12px; padding: 5px 10px; border-radius: 6px; }
.tk-eq { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.tk-bar { display: block; width: 2px; height: 12px; border-radius: 2px; }
.evx-phone__bottom { position: relative; display: flex; flex-direction: column; gap: 10px; }
.evx-captions { min-height: 58px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
.evx-captions p { display: none; margin: 0; text-align: center; color: #FFFFFF; font-size: 14px; font-weight: 600; line-height: 1.45; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); background: rgba(13, 16, 48, .45); padding: 6px 10px; border-radius: 10px; }
.evx-captions p.is-active { display: block; }
.evx-chat { align-self: flex-start; max-width: 85%; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 14px; }
.evx-chat--host { align-self: flex-end; max-width: 88%; background: #FFFFFF; color: var(--evx-ink); }
.evx-product { display: flex; align-items: center; gap: 12px; background: #FFFFFF; color: var(--evx-ink); border-radius: 16px; padding: 10px; margin-top: 4px; }
.evx-product img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; object-position: 50% 68%; flex-shrink: 0; }
.evx-product__info { flex: 1; min-width: 0; }
.evx-product__name { font-size: 13px; font-weight: 600; }
.evx-product__price { font-size: 14px; font-weight: 700; color: #C41E7F; }
.evx-product__buy { background: var(--evx-ink); color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 9px 12px; border-radius: 10px; }
.evx-heart { position: absolute; right: 18px; bottom: 210px; width: var(--s, 24px); height: var(--s, 24px); opacity: 0; animation: evx-float 3.2s ease-out infinite; }
.evx-heart svg { display: block; width: 100%; height: 100%; fill: var(--c); }
.evx-heart.d2 { right: 34px; animation-delay: 1.1s; }
.evx-heart.d3 { right: 12px; animation-delay: 2.1s; }

/* Content AI app mockup */
.evx-app-wrap { --angle: 150deg; border-radius: 26px; padding: 3px; box-shadow: 0 40px 80px -30px rgba(76, 40, 160, .45); }
.evx-app { border-radius: 23px; background: #0E1132; color: #E6E7F5; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.evx-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.evx-app__title { display: flex; align-items: center; gap: 10px; }
.evx-app__title b { font-size: 15px; color: #FFFFFF; }
.evx-app__dots { display: flex; gap: 5px; }
.evx-app__dots span { width: 9px; height: 9px; border-radius: 50%; background: #3A3F70; }
.evx-app__tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.evx-app__tabs button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #A9ACC8; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.evx-app__tabs button[aria-selected="true"] { background: var(--evx-purple); color: #FFFFFF; }
.evx-app__body { display: flex; gap: 14px; flex-wrap: wrap; }
.evx-app__form { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.evx-app__label { font-size: 12px; color: #9EA2C6; }
.evx-app__prompt { min-height: 92px; padding: 12px; border-radius: 12px; background: #0B0D26; border: 1px solid rgba(160, 130, 255, .4); font-size: 13px; line-height: 1.6; color: #E6E7F5; }
.caret { display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #B49BFF; animation: caret-blink 1s steps(1) infinite; }
.evx-app__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.evx-app__chips span { font-size: 11px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #C3C6E0; }
.evx-app__go { height: 42px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #5B7CFA, #7B4BF0 50%, #C23B9E); color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.evx-app__result { flex: 0 0 132px; display: flex; flex-direction: column; gap: 8px; }
.evx-app__preview { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #12163A; }
.evx-app__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.evx-app__preview-shade { position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(180deg, rgba(8, 10, 30, 0), rgba(8, 10, 30, .85)); }
.evx-app__caption { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 10px; font-weight: 700; line-height: 1.35; color: #FFFFFF; }
.evx-app__play { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--evx-ink); display: flex; align-items: center; justify-content: center; }
.evx-app__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); flex-wrap: wrap; }
.evx-app__logos { display: flex; align-items: center; gap: 8px; }
.evx-app__logos img { width: 26px; height: 26px; box-sizing: border-box; }
.evx-app__logos img.is-boxed { background: #FFFFFF; border-radius: 7px; padding: 3px; }
.evx-app__logos img.is-yt { padding: 4px 3px; }
.evx-toast { position: absolute; left: -28px; bottom: 36px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 20px 40px -18px rgba(13, 16, 48, .35); border: 1px solid var(--evx-line); }
.evx-toast__tx { display: flex; flex-direction: column; gap: 2px; }
.evx-toast__tx b { font-size: 13px; color: var(--evx-ink); }
.evx-toast__tx span { font-size: 12px; color: var(--evx-text-2); }

/* Platforms strip */
.evx-platforms { box-sizing: border-box; max-width: 1288px; margin: 0 auto; padding: 8px 24px 72px; }
.evx-platforms__title { margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6A6E8A; text-align: center; }
.plat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.plat { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .85); border: 1px solid var(--evx-line); border-radius: 18px; padding: 12px 14px; min-height: 64px; box-sizing: border-box; min-width: 0; transition: transform .2s, box-shadow .2s, opacity .9s var(--evx-ease), translate .9s var(--evx-ease); }
.plat:hover { transition-delay: 0s; transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(13, 16, 48, .25); }
.plat img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.plat__mark { width: 36px; height: 36px; border-radius: 10px; background: #1C2A8C; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--evx-display); font-weight: 700; font-size: 14px; }
.plat__name { font-size: 15px; font-weight: 600; color: var(--evx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1100px) { .plat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.plat-grid .plat { padding: 10px 12px; gap: 10px; min-height: 56px; }
}

/* ==========================================================================
   Cards & content blocks
   ========================================================================== */
.evx-card { box-sizing: border-box; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.evx-card--soft { background: var(--evx-bg); }
.evx-card--line { background: #FFFFFF; border: 1px solid var(--evx-line); }
.evx-card--14 { gap: 14px; }
.evx-card--28 { padding: 28px; gap: 14px; }
.evx-card--30 { padding: 30px; }
.evx-card--audience { border-radius: 22px; padding: 26px; gap: 12px; }
.evx-card--audience b { font-size: 18px; }
.evx-card--audience span { font-size: 15px; line-height: 1.6; color: var(--evx-text); }

/* Process steps */
.evx-step { box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--evx-line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 18px; min-height: 150px; }
.evx-step__top { display: flex; justify-content: space-between; align-items: center; }
.evx-step__num { font-family: var(--evx-display); font-weight: 600; font-size: 15px; color: var(--c); }
.evx-step__line { width: 28px; height: 2px; border-radius: 2px; background: var(--c); }
.evx-step__title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.evx-step__desc { font-size: 14px; line-height: 1.55; color: var(--evx-text-2); }

/* Savings / compare */
.evx-segment { display: flex; gap: 6px; background: rgba(255, 255, 255, .08); padding: 6px; border-radius: 999px; }
.evx-segment__btn { border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 20px; border-radius: 999px; background: transparent; color: #C9CBE0; }
.evx-segment__btn[aria-selected="true"] { background: #FFFFFF; color: var(--evx-ink); }
.evx-compare { display: flex; flex-wrap: wrap; gap: 20px; }
.evx-compare[hidden] { display: none; }
.evx-compare__old { box-sizing: border-box; flex: 1 1 420px; min-width: 0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.evx-compare__new-wrap { flex: 1 1 420px; min-width: 0; padding: 2px; border-radius: 28px; }
.evx-compare__new { height: 100%; box-sizing: border-box; background: #151A47; border-radius: 26px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.evx-compare__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.evx-compare__title { margin: 0; font-family: var(--evx-body); font-size: 20px; font-weight: 600; letter-spacing: normal; line-height: normal; }
.evx-compare__total { font-family: var(--evx-display); font-size: 22px; font-weight: 600; }
.evx-compare__list { display: flex; flex-direction: column; }
.evx-compare__row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 16px; }
.evx-compare__row--check { justify-content: flex-start; align-items: center; gap: 14px; }
.evx-check-circle { width: 26px; height: 26px; border-radius: 50%; background: rgba(123, 75, 240, .3); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.evx-compare__cta { margin-top: auto; align-self: flex-start; }

/* Feature cards */
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1100px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }
.evx-feat { box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--evx-line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.evx-feat--dark { background: var(--evx-ink); border-color: var(--evx-ink); color: #FFFFFF; }
.evx-feat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.evx-feat__num { font-family: var(--evx-display); font-size: 14px; font-weight: 600; color: var(--c); }
.evx-feat__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--c); }
.evx-feat__title { margin: 0; font-family: var(--evx-display); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: normal; }
.evx-quote { margin-top: auto; background: var(--evx-bg); border-radius: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--evx-text-3); border: 1px dashed #D9D6E6; }
.evx-assets { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.evx-assets > div { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg); color: var(--fg); font-size: 13px; font-weight: 600; }

/* Enterprise split */
.evx-split { display: flex; flex-wrap: wrap; gap: 56px; }
.evx-split__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.evx-split__intro .evx-eyebrow { margin: 0; }
.evx-split__grid { flex: 2 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px 40px; }
.evx-benefit { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--c); }

/* SEO block */
.evx-seo { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.evx-seo__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.evx-seo__list { display: flex; flex-direction: column; gap: 14px; }
.evx-seo__item { display: flex; gap: 16px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.evx-seo__tx { display: flex; flex-direction: column; gap: 4px; }
.evx-seo__tx b { font-size: 17px; }
.evx-seo__tx span { font-size: 15px; line-height: 1.6; color: #C9CBE0; }
.evx-seo__visual { flex: 1 1 380px; min-width: 0; }
.evx-score-card { border-radius: 24px; background: #FFFFFF; color: var(--evx-ink); padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.evx-score-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.evx-score-card__kw { display: flex; flex-direction: column; gap: 4px; }
.evx-score-card__kw span { font-size: 12px; color: #6A6E8A; }
.evx-score-card__kw b { font-size: 17px; }
.evx-score { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#16804A 0 var(--pct), var(--evx-line) var(--pct) 100%); display: flex; align-items: center; justify-content: center; }
.evx-score > span { width: 60px; height: 60px; border-radius: 50%; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.evx-score b { font-size: 20px; color: #16804A; line-height: 1; }
.evx-score small { font-size: 9px; color: #6A6E8A; }
.evx-score-card__text { padding: 14px; border-radius: 14px; background: var(--evx-bg); font-size: 14px; line-height: 1.6; color: var(--evx-text-3); }
.evx-score-card__checks { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.evx-score-card__checks > div { display: flex; align-items: center; gap: 10px; }

/* Pricing */
.evx-pricing { align-items: stretch; }
.evx-price { box-sizing: border-box; border-radius: 26px; border: 1px solid var(--evx-line); background: var(--evx-bg); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.evx-price--table { gap: 14px; }
.evx-price-wrap { --angle: 150deg; border-radius: 26px; padding: 2px; }
.evx-price--featured { height: 100%; border: 0; border-radius: 24px; background: var(--evx-ink); color: #FFFFFF; }
.evx-price--featured .evx-price__list { color: #D4D6EA; }
.evx-price__name { font-size: 18px; }
.evx-price__amount { font-family: var(--evx-display); font-size: 38px; font-weight: 600; }
.evx-price__top { display: flex; justify-content: space-between; align-items: center; }
.evx-price__badge { font-size: 11px; font-weight: 700; color: var(--evx-ink); background: #F59A5C; padding: 4px 10px; border-radius: 999px; }
.evx-price__from { display: flex; align-items: baseline; gap: 8px; }
.evx-price__from > span:first-child { font-size: 15px; color: #C9CBE0; }
.evx-price__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--evx-text-3); }
.evx-price__list li { display: flex; gap: 10px; }
.evx-price__cta { margin-top: auto; font-size: 16px; }
.evx-price--featured .evx-price__cta { font-weight: 700; }
.evx-price__note { font-size: 14px; color: var(--evx-text-2); }
.evx-price__rows { display: flex; flex-direction: column; }
.evx-price__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--evx-line); font-size: 15px; }

/* FAQ */
.evx-faq-sec { max-width: 928px; }
.evx-faq { display: flex; flex-direction: column; gap: 12px; }
.evx-faq__item { border-radius: 18px; background: #FFFFFF; border: 1px solid var(--evx-line); overflow: hidden; transition: border-color .2s; }
.evx-faq__item.is-open { border-color: #B49BFF; }
.evx-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--evx-ink); text-align: left; cursor: pointer; }
.faq-ic { width: 32px; height: 32px; border-radius: 50%; background: #F2EEFD; color: #6A35D9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .3s var(--evx-ease), background .2s; }
.is-open .faq-ic { transform: rotate(45deg); background: var(--evx-purple); color: #FFFFFF; }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--evx-ease); }
.is-open .faq-body { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; min-height: 0; }
.faq-body p { margin: 0; padding: 0 22px 20px; font-size: 15px; line-height: 1.7; color: var(--evx-text); }

/* CTA */
.evx-cta-wrap { padding-bottom: 104px; }
.evx-cta { background: var(--evx-ink); border-radius: 36px; padding: clamp(40px, 6vw, 80px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.evx-cta__line { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--evx-rainbow); }
.evx-cta__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.evx-cta__lead { margin: 0; font-size: 18px; line-height: 1.65; color: #C9CBE0; max-width: 520px; }
.evx-cta__note { font-size: 14px; color: #A9ACC8; }
.evx-cta__form { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.evx-cta__form label { font-size: 14px; color: #C9CBE0; }
.evx-cta__row { display: flex; flex-wrap: wrap; gap: 10px; }
.evx-cta__row input { flex: 1 1 220px; min-width: 0; min-height: 52px; box-sizing: border-box; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #FFFFFF; font: inherit; font-size: 16px; }
.evx-cta__row input::placeholder { color: rgba(255, 255, 255, .55); }
.evx-cta__row button { min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; background: #FFFFFF; color: var(--evx-ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.evx-cta__links { display: flex; flex-direction: column; gap: 12px; }
.evx-cta__links .evx-btn { justify-content: center; min-height: 56px; padding: 0 30px; font-weight: 700; }
.evx-cta__more, .evx-cta__more:hover { text-decoration: none; text-align: center; font-size: 14px; font-weight: 600; color: #C9B8FF; }

/* ==========================================================================
   Footer
   ========================================================================== */
.evx-footer { border-top: 1px solid var(--evx-line); background: #FFFFFF; }
.evx-footer__inner { padding-top: 72px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 56px; }
.evx-footer__top { display: flex; flex-wrap: wrap; gap: 48px; }
.evx-footer__brand { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.evx-footer__brand img { width: 220px; height: auto; mix-blend-mode: multiply; }
.evx-footer__cols { flex: 3 1 600px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.evx-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.evx-footer__col a { color: var(--evx-ink); text-decoration: none; }
.evx-footer__col a:hover { color: var(--evx-purple); }
.evx-footer__heading { font-weight: 700; font-size: 14px; letter-spacing: .06em; color: #6A6E8A; }
.evx-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--evx-line); font-size: 14px; color: #6A6E8A; }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes evx-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-220px) scale(1.1); opacity: 0; } }
@keyframes evx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes evx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes evx-in { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tk-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ap-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes evx-up { from { opacity: 0; translate: 0 48px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes evx-right { from { opacity: 0; translate: 64px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes evx-down { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
@keyframes evx-bar { from { scale: 0 1; } to { scale: 1 1; } }

.evx-host { animation: evx-breathe 5s ease-in-out infinite; transform-origin: 50% 40%; }
.evx-dot { animation: evx-pulse 1.2s ease-in-out infinite; }
.evx-msg { animation: evx-in .6s ease-out both; }
.evx-msg.m2 { animation-delay: .8s; }
.evx-msg.m3 { animation-delay: 1.6s; }
.tk-bar { transform-origin: 50% 50%; animation: tk-eq .9s ease-in-out infinite; }
.tk-bar.b2 { animation-delay: .15s; }
.tk-bar.b3 { animation-delay: .3s; }
.tk-bar.b4 { animation-delay: .45s; }

@media (prefers-reduced-motion: no-preference) {
	.ap-float { animation: ap-float 5s ease-in-out infinite; }
	.ld { animation: evx-up .9s var(--evx-ease) both; }
	.ld.d2 { animation-delay: .12s; }
	.ld.d3 { animation-delay: .24s; }
	.ld.d4 { animation-delay: .36s; }
	.ld.d5 { animation-delay: .48s; }
	.ld-r { animation: evx-right 1.1s var(--evx-ease) .3s both; }
	.ld-down { animation: evx-down .8s var(--evx-ease) both; }
	.rv, .rv-item, .rv-l, .rv-r, .rv-zoom { transition: opacity .9s var(--evx-ease), translate .9s var(--evx-ease), scale .9s var(--evx-ease); }
	.anim-on .sec:not(.in) .rv, .anim-on .sec:not(.in) .rv-item { opacity: 0; translate: 0 48px; }
	.anim-on .sec:not(.in) .rv-l { opacity: 0; translate: -72px 0; }
	.anim-on .sec:not(.in) .rv-r { opacity: 0; translate: 72px 0; }
	.anim-on .sec:not(.in) .rv-zoom { opacity: 0; scale: .9; }
	.rv.d2 { transition-delay: .15s; }
	.rv.d3 { transition-delay: .3s; }
	.rv-r { transition-delay: .15s; }
	.rv-item:nth-child(1) { transition-delay: .12s; }
	.rv-item:nth-child(2) { transition-delay: .21s; }
	.rv-item:nth-child(3) { transition-delay: .30s; }
	.rv-item:nth-child(4) { transition-delay: .39s; }
	.rv-item:nth-child(5) { transition-delay: .48s; }
	.rv-item:nth-child(6) { transition-delay: .57s; }
	.rv-item:nth-child(7) { transition-delay: .66s; }
	.rv-item:nth-child(8) { transition-delay: .75s; }
	@supports (animation-timeline: scroll()) {
		.scroll-bar { display: block; transform-origin: 0 50%; animation: evx-bar linear both; animation-timeline: scroll(root); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.svc-panel, .svc-it, .svc-btn svg, .m-svc-list, .m-svc-chev, .m-panel, .m-item, .menu-btn .bar, .m-backdrop, .faq-body, .faq-ic { transition: none !important; }
	.evx-heart, .evx-host, .evx-dot, .evx-msg, .tk-bar, .caret { animation: none; opacity: 1; }
	.evx-heart { display: none; }
}

@media print {
	.anim-on .sec .rv, .anim-on .sec .rv-item, .anim-on .sec .rv-l, .anim-on .sec .rv-r, .anim-on .sec .rv-zoom { opacity: 1 !important; translate: none !important; scale: none !important; }
}