html,
body {
overflow-x: hidden
}
.v-container {
--v-bg: #F6F8FF;
--v-bg-secondary: #FFFFFF;
--v-text: #182033;
--v-text-soft: #56607A;
--v-text-strong: #0F172A;
--v-border: rgba(91, 105, 150, .16);
--v-border-strong: rgba(80, 92, 248, .22);
--v-card-bg: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 248, 255, .98));
--v-card-shadow: 0 18px 42px rgba(31, 41, 55, .08);
--v-card-shadow-hover: 0 22px 50px rgba(80, 92, 248, .14);
--v-btn-outline-bg: rgba(255, 255, 255, .9);
--v-btn-outline-color: #2C3550;
--v-btn-outline-border: rgba(80, 92, 248, .24);
--v-hero-overlay: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(243, 247, 255, .96) 52%, #F6F8FF 100%), radial-gradient(circle at center, rgba(80, 92, 248, .10) 0%, rgba(80, 92, 248, 0) 52%, rgba(246, 248, 255, 0) 100%);
--v-hero-image: none;
--v-hero-badge-bg: rgba(255, 255, 255, .88);
--v-hero-badge-border: rgba(80, 92, 248, .16);
--v-stat-bg: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 248, 255, .98));
--v-stat-border: rgba(80, 92, 248, .14);
--v-stat-label: #6A7390;
--v-social-bg: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(245, 248, 255, .96));
--v-social-border: rgba(80, 92, 248, .16);
--v-social-icon: #4D5B7C;
--v-feature-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%);
--v-feature-border: rgba(80, 92, 248, .16);
--v-feature-bottom-bg: rgba(244, 247, 255, .95);
--v-feature-bottom-border: rgba(80, 92, 248, .16);
--v-feedback-bg: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 249, 255, .98));
--v-feedback-border: rgba(80, 92, 248, .14);
--v-video-border: rgba(80, 92, 248, .14);
--v-video-shadow: 0 16px 34px rgba(31, 41, 55, .12);
--v-glow-1: radial-gradient(circle, #505CF8 0%, rgba(80, 92, 248, 0) 70%);
--v-glow-2: radial-gradient(circle, #D54FF7 0%, rgba(213, 79, 247, 0) 72%);
background-color: var(--v-bg);
color: var(--v-text);
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
box-sizing: border-box;
position: relative;
isolation: isolate
}
.v-theme-dark .v-container {
--v-bg: #00031C;
--v-bg-secondary: #0B1033;
--v-text: #FFFFFF;
--v-text-soft: #E5E9FF;
--v-text-strong: #FFFFFF;
--v-border: rgba(255, 255, 255, .08);
--v-border-strong: rgba(126, 137, 255, .2);
--v-card-bg: linear-gradient(155deg, rgba(80, 92, 248, .14), rgba(0, 3, 28, .82));
--v-card-shadow: 0 8px 24px rgba(0, 0, 0, .24);
--v-card-shadow-hover: 0 18px 40px rgba(80, 92, 248, .18), 0 0 26px rgba(213, 79, 247, .14);
--v-btn-outline-bg: rgba(255, 255, 255, .04);
--v-btn-outline-color: #FFFFFF;
--v-btn-outline-border: rgba(213, 79, 247, .55);
--v-hero-overlay: linear-gradient(180deg, rgba(0, 3, 28, .2) 0%, rgba(0, 3, 28, .72) 52%, #00031C 100%), radial-gradient(circle at center, rgba(80, 92, 248, .22) 0%, rgba(0, 3, 28, .05) 46%, rgba(0, 3, 28, .95) 100%);
--v-hero-image: url('images/background.png');
--v-hero-badge-bg: rgba(255, 255, 255, .06);
--v-hero-badge-border: rgba(255, 255, 255, .1);
--v-stat-bg: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
--v-stat-border: rgba(255, 255, 255, .08);
--v-stat-label: #D7DBFF;
--v-social-bg: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
--v-social-border: rgba(255, 255, 255, .1);
--v-social-icon: #FFFFFF;
--v-feature-bg: linear-gradient(135deg, rgba(18, 28, 103, .96) 0%, rgba(24, 30, 108, .9) 42%, rgba(11, 17, 70, .94) 100%);
--v-feature-border: rgba(104, 120, 255, .22);
--v-feature-bottom-bg: rgba(5, 10, 38, .52);
--v-feature-bottom-border: rgba(98, 113, 245, .38);
--v-feedback-bg: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
--v-feedback-border: rgba(255, 255, 255, .08);
--v-video-border: rgba(255, 255, 255, .08);
--v-video-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 20px rgba(80, 92, 248, .12);
}
.v-container * {
box-sizing: border-box
}
.v-container::before,
.v-container::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
filter: blur(70px);
opacity: .35
}
.v-container::before {
width: 340px;
height: 340px;
left: -80px;
top: 120px;
background: var(--v-glow-1);
animation: vFloatGlow1 8s ease-in-out infinite
}
.v-container::after {
width: 320px;
height: 320px;
right: -60px;
top: 420px;
background: var(--v-glow-2);
animation: vFloatGlow2 9s ease-in-out infinite
}
.v-theme-light .v-container::before,
.v-theme-light .v-container::after {
opacity: .18
}
.v-theme-light .v-container .v-particles {
display: none
}
.v-section {
padding: 42px 10px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
z-index: 1
}
.v-title-h1,
.v-title-h2,
.v-card-title,
.v-gradient-text,
.v-feature-title {
background: linear-gradient(90deg, #505CF8 0%, #7A63FF 35%, #D54FF7 70%, #505CF8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: vGradientFlow 5s linear infinite
}
.v-title-h1 {
font-size: 28px;
font-weight: 800;
text-align: center;
margin-bottom: 10px;
line-height: 1.15;
text-shadow: 0 0 24px rgba(80, 92, 248, .08)
}
.v-title-h2 {
font-size: 22px;
font-weight: 800;
text-align: center;
margin-bottom: 22px;
text-transform: uppercase;
letter-spacing: .8px;
line-height: 1.35;
padding-top: 6px;
padding-bottom: 2px;
overflow: visible;
}
.v-title-decor {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 22px;
width: 100%
}
.v-title-decor .v-title-h2 {
margin-bottom: 0
}
.v-title-decor img {
display: block;
width: 42px;
height: auto;
flex: 0 0 auto;
opacity: .95;
filter: drop-shadow(0 0 10px rgba(213, 79, 247, .18))
}
.v-text {
font-size: 14px;
line-height: 1.65;
color: var(--v-text-soft);
text-align: center;
margin-bottom: 18px
}
.v-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: all .35s ease;
text-align: center;
margin: 8px;
min-width: 100%;
max-width: 100%;
position: relative;
overflow: hidden;
gap: 10px;
text-decoration: none
}
.v-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .22) 45%, transparent 65%);
transform: translateX(-120%);
transition: transform .7s ease
}
.v-btn:hover::before {
transform: translateX(120%)
}
.v-btn-primary {
background: linear-gradient(90deg, #505CF8 0%, #7A63FF 45%, #D54FF7 100%);
color: #FFFFFF;
box-shadow: 0 10px 30px rgba(213, 79, 247, .28), 0 0 20px rgba(80, 92, 248, .18)
}
.v-btn-primary:hover {
box-shadow: 0 14px 35px rgba(213, 79, 247, .32), 0 0 28px rgba(80, 92, 248, .22);
transform: translateY(-3px) scale(1.03)
}
.v-btn-outline {
background: var(--v-btn-outline-bg);
color: var(--v-btn-outline-color);
border: 1px solid var(--v-btn-outline-border);
backdrop-filter: blur(10px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06)
}
.v-btn-outline:hover {
background: rgba(213, 79, 247, .08);
transform: translateY(-3px) scale(1.03);
box-shadow: 0 10px 28px rgba(213, 79, 247, .16)
}
.v-btn-text {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
z-index: 2;
flex-wrap: wrap
}
.v-btn-icon {
width: 14px;
height: 14px;
display: inline-block;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(213, 79, 247, .3))
}
.v-hero {
min-height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 58px 10px 48px;
background: var(--v-hero-overlay), var(--v-hero-image) center/cover no-repeat;
position: relative;
overflow: hidden
}
.v-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(80, 92, 248, .18) 0%, transparent 28%), radial-gradient(circle at 80% 18%, rgba(213, 79, 247, .16) 0%, transparent 25%), radial-gradient(circle at 50% 82%, rgba(130, 94, 255, .14) 0%, transparent 22%);
mix-blend-mode: screen
}
.v-hero::after {
content: none
}
.v-hero-inner {
position: relative;
z-index: 2;
width: 100%;
display: flex;
flex-direction: column;
align-items: center
}
.v-theme-toggle-wrap {
position: fixed;
top: 180px;
right: 18px;
z-index: 9999
}
.v-theme-toggle {
width: 52px;
height: 52px;
border-radius: 999px;
border: 1px solid rgba(80, 92, 248, .18);
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 14px 34px rgba(31, 41, 55, .12), 0 0 16px rgba(80, 92, 248, .08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .35s ease;
pointer-events: auto;
}
.v-theme-toggle:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 18px 38px rgba(31, 41, 55, .14), 0 0 20px rgba(213, 79, 247, .12)
}
.v-theme-toggle svg {
width: 22px;
height: 22px;
display: block
}
.v-theme-toggle .v-icon-sun {
display: block
}
.v-theme-toggle .v-icon-moon {
display: none
}
.v-theme-dark .v-theme-toggle {
background: rgba(9, 12, 37, .88);
border-color: rgba(255, 255, 255, .12);
box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 16px rgba(80, 92, 248, .16)
}
.v-theme-dark .v-theme-toggle .v-icon-sun {
display: none
}
.v-theme-dark .v-theme-toggle .v-icon-moon {
display: block
}
.v-hero-avatar-wrap {
position: relative;
margin-bottom: 18px
}
.v-hero-avatar-wrap::before,
.v-hero-avatar-wrap::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%
}
.v-hero-avatar-wrap::before {
width: 170px;
height: 170px;
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 0 0 10px rgba(80, 92, 248, .08), 0 0 38px rgba(213, 79, 247, .18);
animation: vPulseRing 3.2s ease-out infinite
}
.v-hero-avatar-wrap::after {
width: 150px;
height: 150px;
border: 1px dashed rgba(213, 79, 247, .35);
animation: vRotate 18s linear infinite
}
.v-theme-light .v-hero-avatar-wrap::before {
border-color: rgba(80, 92, 248, .16);
box-shadow: 0 0 0 10px rgba(80, 92, 248, .06), 0 0 28px rgba(213, 79, 247, .08)
}
.v-theme-light .v-hero-avatar-wrap::after {
border-color: rgba(213, 79, 247, .24)
}
.v-hero-avatar {
width: 132px;
height: 132px;
border-radius: 50%;
background-color: #505CF8;
background-image: var(--wpr-bg-943aba08-7769-469c-95e6-3fbd457d898e);
background-size: cover;
background-position: center;
border: 4px solid rgba(255, 255, 255, .4);
box-shadow: 0 0 0 5px rgba(213, 79, 247, .14), 0 0 30px rgba(213, 79, 247, .18), 0 0 65px rgba(80, 92, 248, .14);
position: relative;
z-index: 2;
animation: vAvatarFloat 4.8s ease-in-out infinite
}
.v-theme-dark .v-hero-avatar {
border-color: rgba(255, 255, 255, .22);
box-shadow: 0 0 0 5px rgba(213, 79, 247, .2), 0 0 30px rgba(213, 79, 247, .45), 0 0 65px rgba(80, 92, 248, .32)
}
.v-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--v-hero-badge-bg);
border: 1px solid var(--v-hero-badge-border);
backdrop-filter: blur(12px);
font-size: 11px;
font-weight: 700;
color: var(--v-text-strong);
margin-bottom: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
text-align: center;
flex-wrap: wrap;
justify-content: center
}
.v-hero-badge-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #D54FF7;
box-shadow: 0 0 10px #D54FF7, 0 0 18px #D54FF7;
animation: vBlink 1.4s ease-in-out infinite
}
.v-hero-mid-action {
margin: 2px 0 8px;
width: 100%;
display: flex;
justify-content: center;
align-items: center
}
.v-hero-mid-action .v-btn {
margin: 0;
min-width: 100%;
max-width: 100%
}
.v-hero-quick-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 14px 0 18px;
width: 100%
}
.v-hero-quick-actions .v-btn {
margin: 0;
min-width: 100%
}
.v-stats-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 22px 0;
width: 100%;
position: relative;
z-index: 2
}
.v-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 0;
width: 100%
}
.v-hero-actions .v-btn {
margin: 0;
min-width: 100%
}
.v-stat-box {
background: var(--v-stat-bg);
border: 1px solid var(--v-stat-border);
border-radius: 16px;
padding: 14px 12px;
text-align: center;
min-width: calc(50% - 5px);
backdrop-filter: blur(14px);
box-shadow: var(--v-card-shadow);
transition: all .35s ease
}
.v-stat-box:hover {
transform: translateY(-5px) scale(1.03);
border-color: rgba(213, 79, 247, .34);
box-shadow: var(--v-card-shadow-hover)
}
.v-stat-num {
font-size: 20px;
font-weight: 700;
color: var(--v-text-strong);
margin-bottom: 5px;
text-shadow: 0 0 15px rgba(213, 79, 247, .12)
}
.v-stat-label {
font-size: 10px;
color: var(--v-stat-label);
text-transform: uppercase;
letter-spacing: .8px
}
.v-grid-2,
.v-grid-3 {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 1200px;
position: relative;
z-index: 1
}
.v-card,
.v-feedback-card,
.v-video-mockup,
.v-feature-card {
opacity: 0;
transform: translateY(30px)
}
.v-card {
background: var(--v-card-bg);
border: 1px solid var(--v-border-strong);
border-radius: 20px;
padding: 22px 16px;
transition: all .35s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
box-shadow: var(--v-card-shadow)
}
.v-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 30%, transparent 70%, rgba(213, 79, 247, .08));
opacity: .7
}
.v-card::after {
content: "";
position: absolute;
width: 140px;
height: 140px;
right: -30px;
top: -30px;
background: radial-gradient(circle, rgba(213, 79, 247, .16) 0%, rgba(213, 79, 247, 0) 70%);
filter: blur(10px)
}
.v-card:hover {
transform: translateY(-8px) scale(1.01);
border-color: rgba(213, 79, 247, .34);
box-shadow: var(--v-card-shadow-hover)
}
.v-card-icon {
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center
}
.v-card-icon img {
width: 36px;
height: 36px;
display: block;
object-fit: contain;
filter: drop-shadow(0 0 14px rgba(213, 79, 247, .24))
}
.v-card-title {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
line-height: 1.3
}
.v-video-grid {
width: 100%;
max-width: 1360px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
position: relative;
z-index: 1
}
.v-video-mockup {
width: 100%;
max-width: none;
aspect-ratio: 9/16;
background: #111;
border-radius: 24px;
border: 1px solid var(--v-video-border);
position: relative;
overflow: hidden;
box-shadow: var(--v-video-shadow);
margin: 0 auto;
transition: all .35s ease;
cursor: pointer
}
.v-video-mockup::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(80, 92, 248, .28), rgba(213, 79, 247, .4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 4
}
.v-video-mockup:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 18px 42px rgba(31, 41, 55, .16), 0 0 24px rgba(213, 79, 247, .12)
}
.v-theme-dark .v-video-mockup:hover {
box-shadow: 0 18px 42px rgba(0, 0, 0, .7), 0 0 24px rgba(213, 79, 247, .18)
}
.v-video-bg {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: #0f1124
}
.v-video-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 3, 28, .06) 45%, rgba(0, 3, 28, .82) 100%);
pointer-events: none;
z-index: 2
}
.v-video-bg video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: .96;
background: #0f1124;
transition: transform .45s ease;
object-position: center
}
.v-video-mockup:hover .v-video-bg video {
transform: scale(1.03)
}
.v-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 58px;
height: 58px;
background: linear-gradient(135deg, rgba(80, 92, 248, .95), rgba(213, 79, 247, .92));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #FFF;
cursor: pointer;
z-index: 3;
box-shadow: 0 0 24px rgba(213, 79, 247, .35);
animation: vPlayPulse 2s ease-in-out infinite;
transition: transform .25s ease, opacity .25s ease
}
.v-play-btn:hover {
transform: translate(-50%, -50%) scale(1.08)
}
.v-video-mockup.v-playing .v-play-btn {
opacity: 0;
pointer-events: none
}
.v-video-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
z-index: 3
}
.v-video-views {
font-size: 11px;
color: #F4E6FF
}
.v-feedback-card {
background: var(--v-feedback-bg);
border-radius: 18px;
padding: 22px 18px;
border: 1px solid var(--v-feedback-border);
text-align: left;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
transition: all .35s ease;
box-shadow: var(--v-card-shadow)
}
.v-feedback-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #505CF8, #D54FF7)
}
.v-feedback-card:hover {
transform: translateY(-6px);
border-color: rgba(213, 79, 247, .35);
box-shadow: var(--v-card-shadow-hover)
}
.v-feedback-text {
font-style: italic;
font-size: 14px;
margin-bottom: 18px;
color: var(--v-text);
line-height: 1.7
}
.v-feedback-user {
display: flex;
align-items: center;
gap: 12px
}
.v-feedback-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background-color: #505CF8;
background-image: var(--wpr-bg-bc2ef08c-d1ed-4701-9d6a-1f16f3d94396);
background-size: cover;
background-position: center;
box-shadow: 0 0 18px rgba(80, 92, 248, .18)
}
.v-feedback-name {
font-weight: 800;
font-size: 14px
}
.v-animate {
opacity: 0;
transform: translateY(34px) scale(.98);
transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1)
}
.v-visible {
opacity: 1;
transform: translateY(0) scale(1)
}
.v-delay-1 {
transition-delay: .08s
}
.v-delay-2 {
transition-delay: .16s
}
.v-delay-3 {
transition-delay: .24s
}
.v-delay-4 {
transition-delay: .32s
}
.v-delay-5 {
transition-delay: .40s
}
.v-particles {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.v-particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(163, 51, 242, 0.2));
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 10px rgba(163, 51, 242, 0.1);
opacity: 0;
animation: vRisingBubble linear infinite;
}
.v-particle:nth-child(1) {
left: 8%;
top: 82%;
animation-duration: 9s;
animation-delay: -1s
}
.v-particle:nth-child(2) {
left: 18%;
top: 74%;
animation-duration: 11s;
animation-delay: -4s
}
.v-particle:nth-child(3) {
left: 28%;
top: 88%;
animation-duration: 10s;
animation-delay: -2s
}
.v-particle:nth-child(4) {
left: 40%;
top: 78%;
animation-duration: 12s;
animation-delay: -6s
}
.v-particle:nth-child(5) {
left: 52%;
top: 84%;
animation-duration: 9s;
animation-delay: -3s
}
.v-particle:nth-child(6) {
left: 64%;
top: 80%;
animation-duration: 13s;
animation-delay: -5s
}
.v-particle:nth-child(7) {
left: 76%;
top: 86%;
animation-duration: 10s;
animation-delay: -7s
}
.v-particle:nth-child(8) {
left: 88%;
top: 75%;
animation-duration: 12s;
animation-delay: -2s
}
.v-particle:nth-child(9) {
left: 12%;
top: 92%;
animation-duration: 11s;
animation-delay: -3s
}
.v-particle:nth-child(10) {
left: 22%;
top: 85%;
animation-duration: 9s;
animation-delay: -6s
}
.v-particle:nth-child(11) {
left: 34%;
top: 94%;
animation-duration: 13s;
animation-delay: -4s
}
.v-particle:nth-child(12) {
left: 46%;
top: 88%;
animation-duration: 10s;
animation-delay: -8s
}
.v-particle:nth-child(13) {
left: 58%;
top: 93%;
animation-duration: 12s;
animation-delay: -5s
}
.v-particle:nth-child(14) {
left: 69%;
top: 87%;
animation-duration: 9s;
animation-delay: -2s
}
.v-particle:nth-child(15) {
left: 81%;
top: 91%;
animation-duration: 11s;
animation-delay: -7s
}
.v-particle:nth-child(16) {
left: 92%;
top: 84%;
animation-duration: 12s;
animation-delay: -4s
}
.v-mini-highlight {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .74);
border: 1px solid rgba(80, 92, 248, .14);
margin-bottom: 16px;
font-size: 12px;
font-weight: 700;
color: #47506A;
flex-wrap: wrap;
justify-content: center;
text-align: center;
box-shadow: 0 10px 24px rgba(31, 41, 55, .06)
}
.v-container.v-theme-dark .v-mini-highlight {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .08);
color: #DDE1FF;
box-shadow: none
}
.v-mini-highlight-icon {
width: 15px;
height: 15px;
display: block;
object-fit: contain;
flex: 0 0 auto;
filter: drop-shadow(0 0 8px rgba(213, 79, 247, .26))
}
.v-about-text {
max-width: 1100px;
margin: 0 auto 24px
}
.v-about-gallery {
width: 100%;
max-width: 1200px;
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 6px
}
.v-about-gallery-main,
.v-about-gallery-side {
display: grid;
gap: 14px
}
.v-about-gallery-main,
.v-about-gallery-side {
grid-template-columns: 1fr
}
.v-about-photo-link,
.v-feature-link {
display: block;
width: 100%;
text-decoration: none;
color: inherit
}
.v-about-photo {
position: relative;
overflow: hidden;
border-radius: 20px;
min-height: 220px;
background: #E8EDFF;
border: 1px solid rgba(80, 92, 248, .12);
box-shadow: 0 16px 40px rgba(31, 41, 55, .08), 0 0 24px rgba(80, 92, 248, .04);
isolation: isolate;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}
.v-container.v-theme-dark .v-about-photo {
background: #0b1033;
border-color: rgba(255, 255, 255, .08);
box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 24px rgba(80, 92, 248, .08)
}
.v-about-photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 28%, rgba(0, 3, 28, .08) 58%, rgba(0, 3, 28, .84) 100%);
z-index: 2
}
.v-about-photo::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 18% 18%, rgba(80, 92, 248, .22), transparent 32%), radial-gradient(circle at 82% 22%, rgba(213, 79, 247, .18), transparent 28%);
z-index: 1;
pointer-events: none
}
.v-about-photo:hover {
transform: translateY(-6px);
border-color: rgba(213, 79, 247, .28);
box-shadow: 0 20px 48px rgba(31, 41, 55, .12), 0 0 28px rgba(213, 79, 247, .08)
}
.v-container.v-theme-dark .v-about-photo:hover {
box-shadow: 0 20px 48px rgba(0, 0, 0, .42), 0 0 28px rgba(213, 79, 247, .12)
}
.v-about-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease, filter .45s ease;
filter: saturate(1.02) contrast(1.02)
}
.v-about-photo:hover img {
transform: scale(1.06)
}
.v-about-photo-main {
min-height: 200px;
}
.v-about-photo-small {
min-height: 130px;
}
.v-about-photo-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .82);
border: 1px solid rgba(80, 92, 248, .14);
backdrop-filter: blur(10px);
font-size: 11px;
font-weight: 700;
color: #2C3550
}
.v-container.v-theme-dark .v-about-photo-badge {
background: rgba(8, 14, 45, .68);
border-color: rgba(255, 255, 255, .1);
color: #EEF1FF
}
.v-about-photo-badge img,
.v-about-mini-stat img {
width: 14px;
height: 14px;
display: inline-block;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(213, 79, 247, .24))
}
.v-about-photo-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 16px
}
.v-about-photo-title {
font-size: 18px;
font-weight: 800;
line-height: 1.25;
margin-bottom: 8px;
color: #FFFFFF;
text-shadow: 0 6px 20px rgba(0, 0, 0, .4)
}
.v-about-photo-desc {
font-size: 13px;
line-height: 1.6;
color: #E5E9FF;
opacity: .95;
max-width: 100%
}
.v-about-mini-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px
}
.v-about-mini-stat {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .14);
font-size: 11px;
font-weight: 700;
color: #F0F2FF;
backdrop-filter: blur(8px)
}
.v-feature-grid {
width: 100%;
max-width: 1240px;
display: grid;
grid-template-columns: 1fr;
gap: 16px
}
.v-feature-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
padding: 22px 18px;
border-radius: 18px;
background: var(--v-feature-bg);
border: 1px solid var(--v-feature-border);
box-shadow: var(--v-card-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}
.v-feature-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 24%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .08) 100%);
pointer-events: none
}
.v-feature-card::after {
content: "";
position: absolute;
inset: -20% auto auto -12%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(80, 92, 248, .18) 0%, rgba(80, 92, 248, 0) 72%);
pointer-events: none
}
.v-feature-card:hover {
transform: translateY(-8px);
border-color: rgba(213, 79, 247, .4);
box-shadow: var(--v-card-shadow-hover)
}
.v-feature-top {
position: relative;
z-index: 2
}
.v-feature-title {
font-size: 20px;
font-weight: 800;
line-height: 1.25;
margin-bottom: 12px
}
.v-feature-desc {
font-size: 14px;
line-height: 1.6;
color: var(--v-text-soft);
max-width: 100%
}
.v-feature-bottom {
position: relative;
z-index: 2;
margin-top: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 12px 10px 14px;
border-radius: 14px;
background: var(--v-feature-bottom-bg);
border: 1px solid var(--v-feature-bottom-border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02)
}
.v-feature-meta {
font-size: 12px;
font-weight: 800;
color: var(--v-text-strong);
white-space: nowrap
}
.v-feature-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0F7BFF 0%, #1C9BFF 100%);
box-shadow: 0 8px 18px rgba(15, 123, 255, .24)
}
.v-feature-icon img {
width: 16px;
height: 16px;
object-fit: contain;
filter: brightness(0) invert(1)
}
.v-social-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 10px 0 12px;
width: 100%;
position: relative;
z-index: 2
}
.v-social-link {
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--v-social-bg);
border: 1px solid var(--v-social-border);
backdrop-filter: blur(12px);
box-shadow: 0 10px 26px rgba(31, 41, 55, .08), inset 0 1px 0 rgba(255, 255, 255, .05);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
text-decoration: none
}
.v-social-link:hover {
transform: translateY(-4px) scale(1.06);
border-color: rgba(213, 79, 247, .55);
box-shadow: 0 16px 34px rgba(80, 92, 248, .12), 0 0 20px rgba(213, 79, 247, .1)
}
.v-social-link svg {
width: 20px;
height: 20px;
display: block;
fill: var(--v-social-icon)
}
.v-social-link-zalo span {
font-size: 12px;
font-weight: 800;
letter-spacing: .3px;
color: var(--v-social-icon);
line-height: 1;
text-transform: uppercase
}
@keyframes vGradientFlow {
0% {
background-position: 0% center
}
100% {
background-position: 200% center
}
}
@keyframes vAvatarFloat {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-10px)
}
}
@keyframes vPulseRing {
0% {
transform: translate(-50%, -50%) scale(.94);
opacity: .6
}
70% {
transform: translate(-50%, -50%) scale(1.12);
opacity: 0
}
100% {
transform: translate(-50%, -50%) scale(1.12);
opacity: 0
}
}
@keyframes vFloatGlow1 {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(40px)
}
}
@keyframes vFloatGlow2 {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-35px)
}
}
@keyframes vRotate {
from {
transform: translate(-50%, -50%) rotate(0deg)
}
to {
transform: translate(-50%, -50%) rotate(360deg)
}
}
@keyframes vPlayPulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1)
}
50% {
transform: translate(-50%, -50%) scale(1.09)
}
}
@keyframes vBlink {
0%,
100% {
opacity: 1
}
50% {
opacity: .4
}
}
@keyframes vRisingBubble {
0% {
transform: translateY(110vh) translateX(0) scale(0.5);
opacity: 0;
}
15% {
opacity: 0.6;
}
50% {
transform: translateY(50vh) translateX(30px) scale(1.1);
}
85% {
opacity: 0.4;
}
100% {
transform: translateY(-10vh) translateX(-20px) scale(1.4);
opacity: 0;
}
}
@media (min-width:768px) {
.v-section {
padding: 60px 20px
}
.v-title-h1 {
font-size: 40px
}
.v-title-h2 {
font-size: 30px
}
.v-title-decor {
gap: 12px;
margin-bottom: 26px
}
.v-title-decor img {
width: 72px
}
.v-text {
font-size: 16px
}
.v-btn {
min-width: auto;
max-width: none;
font-size: 14px;
padding: 13px 22px
}
.v-hero {
min-height: 100vh;
padding: 72px 20px 56px
}
.v-hero-avatar {
width: 190px;
height: 190px
}
.v-hero-avatar-wrap::before {
width: 235px;
height: 235px
}
.v-hero-avatar-wrap::after {
width: 210px;
height: 210px
}
.v-hero-badge {
font-size: 12px;
padding: 9px 16px
}
.v-hero-mid-action .v-btn {
min-width: 220px;
max-width: max-content
}
.v-hero-quick-actions .v-btn {
min-width: calc(33.333% - 7px)
}
.v-grid-2 {
flex-direction: row;
flex-wrap: wrap
}
.v-grid-2>.v-card {
flex: 1 1 calc(50% - 8px)
}
.v-grid-3 {
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.v-grid-3>.v-card,
.v-grid-3>.v-feedback-card {
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px)
}
.v-video-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px
}
.v-stat-box {
padding: 18px 20px;
min-width: 150px
}
.v-stat-num {
font-size: 23px
}
.v-stat-label {
font-size: 11px
}
.v-social-row {
gap: 12px
}
.v-social-link {
width: 52px;
height: 52px
}
.v-social-link svg {
width: 22px;
height: 22px
}
.v-about-gallery {
grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
align-items: stretch;
gap: 18px
}
.v-about-gallery-side {
grid-template-rows: repeat(2, minmax(0, 1fr));
height: 100%;
gap: 18px
}
.v-about-photo-main {
min-height: 0;
height: 100%
}
.v-about-photo-small {
min-height: 0;
height: 100%
}
.v-about-photo {
border-radius: 24px
}
.v-about-photo-main {
min-height: 210px
}
.v-about-photo-title {
font-size: 20px
}
.v-about-photo-desc {
font-size: 14px
}
.v-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px
}
.v-feature-card {
min-height: 245px;
padding: 24px 22px
}
.v-feature-title {
font-size: 21px
}
.v-feature-desc {
font-size: 14px
}
}
@media (min-width:1024px) {
.v-section {
padding: 78px 40px
}
.v-title-h1 {
font-size: 52px
}
.v-title-h2 {
font-size: 38px
}
.v-text {
font-size: 18px
}
.v-title-decor img {
width: 92px
}
.v-grid-2>.v-card {
flex: 1 1 calc(33.333% - 20px)
}
.v-grid-3>.v-card,
.v-grid-3>.v-feedback-card {
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px)
}
.v-hero-avatar {
width: 220px;
height: 220px
}
.v-hero-avatar-wrap::before {
width: 270px;
height: 270px
}
.v-hero-avatar-wrap::after {
width: 240px;
height: 240px
}
.v-stat-box {
padding: 20px 32px;
min-width: 132px
}
.v-feature-grid {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.v-video-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px
}
.v-social-row {
gap: 14px
}
.v-social-link {
width: 56px;
height: 56px
}
.v-social-link svg {
width: 24px;
height: 24px
}
.v-hero-quick-actions {
max-width: 1100px;
margin: 14px auto 18px;
justify-content: center
}
.v-hero-quick-actions .v-btn {
min-width: 220px;
max-width: 340px;
flex: unset
}
.v-about-photo-main {
min-height: 220px
}
.v-about-photo-small {
min-height: 135px
}
}
@media (max-width:767px) {
.v-title-decor img:first-child,
.v-title-decor img:last-child {
width: 36px
}
.v-text[style*="font-size:20px"] {
font-size: 16px !important;
line-height: 1.55 !important
}
.v-stats-row {
gap: 10px
}
.v-video-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.v-video-info {
padding: 12px
}
.v-play-btn {
width: 52px;
height: 52px;
font-size: 18px
}
.v-theme-toggle-wrap {
top: 66px;
right: 10px
}
.v-theme-toggle {
width: 36px;
height: 36px
}
}
@media (max-width:479px) {
.v-title-h1 {
font-size: 26px
}
.v-title-h2 {
font-size: 20px
}
.v-text {
font-size: 13.5px
}
.v-hero {
padding: 80px 10px 42px
}
.v-hero-avatar {
width: 124px;
height: 124px
}
.v-hero-avatar-wrap::before {
width: 162px;
height: 162px
}
.v-hero-avatar-wrap::after {
width: 142px;
height: 142px
}
.v-stat-box {
min-width: calc(50% - 5px);
padding: 12px 10px
}
.v-stat-num {
font-size: 18px
}
.v-about-photo-main {
min-height: 185px
}
.v-about-photo-small {
min-height: 118px
}
.v-about-photo-content {
padding: 12px
}
.v-about-photo-title {
font-size: 15px;
line-height: 1.2;
margin-bottom: 4px
}
.v-about-photo-desc {
font-size: 11.5px;
line-height: 1.35
}
.v-about-mini-stats {
gap: 6px;
margin-top: 10px
}
.v-about-mini-stat {
padding: 6px 9px;
font-size: 10px;
gap: 6px
}
.v-about-photo-badge {
top: 10px;
left: 10px;
padding: 6px 10px;
font-size: 10px
}
.v-card,
.v-feedback-card,
.v-feature-card {
padding-left: 14px;
padding-right: 14px
}
.v-video-mockup {
border-radius: 20px
}
.v-video-mockup::before {
border-radius: 20px
}
.v-play-btn {
width: 48px;
height: 48px;
font-size: 16px
}
.v-video-views {
font-size: 10px
}
}
.v-show-video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none
}
/* New Section & Card Styles with Theme Awareness */
.v-highlight-card,
.v-category-card,
.v-testimonial-card {
background: var(--v-card-bg);
border: 1px solid var(--v-border-strong);
box-shadow: var(--v-card-shadow);
transition: all 0.3s ease;
}
.v-highlight-card h3,
.v-category-card h3,
.v-testimonial-card span {
color: var(--v-text-strong) !important;
}
.v-highlight-card p,
.v-category-card p,
.v-testimonial-card p {
color: var(--v-text-soft) !important;
}
.v-theme-dark .v-highlight-card,
.v-theme-dark .v-category-card,
.v-theme-dark .v-testimonial-card {
background: linear-gradient(155deg, rgba(80, 92, 248, 0.12), rgba(0, 3, 28, 0.85));
border-color: rgba(255, 255, 255, 0.08);
}
.v-theme-dark .v-highlight-card h3 {
color: #fff !important;
}
.v-theme-dark .v-category-card .v-gradient-text {
background: linear-gradient(90deg, #fff 0%, #d7dbff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* About Section Grid Fix */
.v-about-grid-new {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 25px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 991px) {
.v-about-grid-new {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.v-about-card-large {
min-height: 400px !important;
}
}
/* Theme Toggle Mobile Adjustment */
@media (max-width: 768px) {
.v-theme-toggle-wrap {
top: auto !important;
bottom: 100px !important;
right: 20px !important;
}
.v-title-h2 {
font-size: 24px !important;
}
}
/* Video Grid Mobile Fix */
@media (max-width: 600px) {
.v-video-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.v-video-card {
border-radius: 16px !important;
}
.v-play-btn {
width: 45px !important;
height: 45px !important;
}
.v-btn-full-mobile {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
display: block !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
}
/* Premium Pill Button */
.v-btn-pill-premium {
background: linear-gradient(90deg, #6366f1, #ec4899);
border-radius: 100px !important;
padding: 12px 40px !important;
color: #fff !important;
text-decoration: none !important;
display: inline-block;
transition: all 0.4s ease;
border: none !important;
box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4);
max-width: 90vw;
}
.v-btn-pill-premium:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 35px rgba(168, 85, 247, 0.5);
}
.v-btn-inner-vertical {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
/* Responsive Premium Button */
.v-btn-inner-responsive {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-direction: row;
}
.v-btn-text-content {
font-size: 16px;
font-weight: 800;
text-align: center;
line-height: 1.2;
}
.v-btn-subtext {
font-size: 14px;
font-weight: 600;
opacity: 0.9;
margin-left: 5px;
}
@media (max-width: 768px) {
.v-btn-inner-responsive {
flex-direction: column;
gap: 8px;
}
.v-btn-subtext {
display: block;
margin-left: 0;
margin-top: 4px;
}
.v-btn-pill-premium {
padding: 15px 30px !important;
}
}
/* Highlights Grid Mobile Fix */
@media (max-width: 991px) {
.v-highlights-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.v-highlight-card {
padding: 30px 20px !important;
}
}
/* Categories Grid Mobile Fix */
@media (max-width: 991px) {
.v-categories-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.v-category-card {
padding: 30px 20px !important;
min-height: auto !important;
}
}
/* Testimonials Grid Mobile Fix */
@media (max-width: 991px) {
.v-testimonials-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.v-testimonial-card {
padding: 25px 25px 25px 35px !important;
}
}
/* Mobile Header & Sidebar */
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
.v-btn-shop-header {
background: #a333f2;
color: #fff !important;
padding: 8px 18px;
border-radius: 20px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
display: none;
}
.v-menu-toggle {
background: none;
border: none;
color: #a333f2;
font-size: 24px;
cursor: pointer;
display: none;
padding: 5px;
}
.v-sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.v-sidebar-overlay.active {
opacity: 1;
visibility: visible;
}
.v-sidebar { visibility: hidden;
position: fixed;
top: 0;
right: -280px;
width: 280px;
height: 100vh;
background: #05081b;
z-index: 2001;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
.v-sidebar.active { visibility: visible;
right: 0;
}
.v-sidebar-header {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.v-sidebar-brand {
color: #fff;
font-weight: 800;
font-size: 18px;
}
.v-sidebar-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
font-size: 20px;
cursor: pointer;
}
.v-sidebar-nav {
padding: 20px 0;
display: flex;
flex-direction: column;
}
.v-sidebar-link {
padding: 12px 25px;
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 15px;
transition: all 0.2s ease;
}
.v-sidebar-link:hover, .v-sidebar-link.active {
color: #a333f2;
background: rgba(163, 51, 242, 0.05);
}
@media (max-width: 768px) {
.d-none-mobile { display: none !important; }
.d-block-mobile { display: block !important; }
.v-menu-toggle { display: flex !important; }
.v-btn-shop-header { display: block !important; }
.header-search { display: none !important; }
}