@font-face {
font-family: 'Kalameh';
src: url('/assets/fonts/KalamehWeb_Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Kalameh';
src: url('/assets/fonts/KalamehWeb_Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Kalameh';
src: url('/assets/fonts/KalamehWeb_Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Kalameh';
src: url('/assets/fonts/KalamehWeb_Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

:root {
--bg-primary: #f5f6f8;
--bg-secondary: #ffffff;
--bg-tertiary: #eef0f4;
--text-primary: #1a1a2e;
--text-secondary: #4a4a68;
--text-muted: #7a7a98;
--accent-primary: #6366f1;
--accent-secondary: #8b5cf6;
--accent-tertiary: #a855f7;
--accent-glow: rgba(99, 102, 241, 0.25);
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
--border-color: rgba(99, 102, 241, 0.12);
--border-glow: rgba(99, 102, 241, 0.35);
--shadow-soft: 0 4px 20px rgba(99, 102, 241, 0.08);
--shadow-medium: 0 15px 50px rgba(99, 102, 241, 0.12);
--shadow-strong: 0 25px 80px rgba(99, 102, 241, 0.18);
}

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

html {
scroll-behavior: smooth;
}

body {
font-family: 'Kalameh', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.9;
overflow-x: hidden;
direction: rtl;
font-size: clamp(16px, 1vw, 18px);
}

.animated-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}

.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.5;
animation: orbFloat 30s ease-in-out infinite;
}

.bg-orb-1 {
width: 600px;
height: 600px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.15));
top: -200px;
right: -150px;
}

.bg-orb-2 {
width: 500px;
height: 500px;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.1));
bottom: 10%;
left: -150px;
animation-delay: -10s;
}

.bg-orb-3 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
top: 50%;
right: 20%;
animation-delay: -20s;
}

@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(50px, -60px) scale(1.1); }
66% { transform: translate(-40px, 40px) scale(0.95); }
}

.grid-pattern {
position: fixed;
inset: 0;
background-image: 
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 1;
}

.main-content {
position: relative;
z-index: 10;
}

.internal-nav {
position: fixed;
left: 25px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 14px;
}

.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.25);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

.nav-dot:hover,
.nav-dot.active {
background: var(--gradient-primary);
transform: scale(1.4);
box-shadow: 0 0 20px var(--accent-glow);
}

.nav-dot::before {
content: attr(data-label);
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
background: var(--bg-secondary);
padding: 8px 16px;
border-radius: 8px;
font-size: clamp(12px, 0.8vw, 14px);
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border-color);
}

.nav-dot:hover::before {
opacity: 1;
visibility: visible;
right: 30px;
}

.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding-top: 15vh;
}

.hero-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}

.hero-content {
position: relative;
z-index: 10;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
border: 1px solid var(--border-glow);
border-radius: 100px;
font-size: clamp(14px, 0.9vw, 16px);
font-weight: 600;
color: var(--accent-primary);
margin-bottom: 30px;
animation: fadeInUp 0.8s ease;
}

.hero-badge svg {
width: 18px;
height: 18px;
}

.hero-title {
font-size: clamp(48px, 6vw, 78px);
font-weight: 900;
line-height: 1.15;
margin-bottom: 28px;
animation: fadeInUp 0.8s ease 0.1s both;
}

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

.hero-subtitle {
font-size: clamp(20px, 1.5vw, 24px);
color: var(--text-secondary);
margin-bottom: 40px;
line-height: 1.9;
animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease 0.3s both;
}

.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 38px;
border-radius: 100px;
font-family: 'Kalameh', sans-serif;
font-size: clamp(16px, 1.1vw, 19px);
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}

.btn-primary {
background: var(--gradient-primary);
color: white;
box-shadow: 0 15px 40px -8px var(--accent-glow);
}

.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 50px -8px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
background: var(--bg-secondary);
color: var(--text-primary);
border: 2px solid var(--border-color);
box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
border-color: var(--accent-primary);
transform: translateY(-3px);
}

.btn svg {
width: 20px;
height: 20px;
}

.hero-stats {
display: flex;
gap: 40px;
margin-top: 50px;
animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-stat {
text-align: center;
}

.hero-stat-value {
font-size: clamp(36px, 3vw, 44px);
font-weight: 900;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero-stat-label {
font-size: clamp(13px, 0.9vw, 15px);
color: var(--text-muted);
margin-top: 4px;
}

.hero-visual {
position: relative;
animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-image-wrapper {
position: relative;
border-radius: 30px;
overflow: hidden;
box-shadow: var(--shadow-strong);
}

.hero-image {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}

.hero-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(26, 26, 46, 0.8) 100%);
}

.hero-floating-card {
position: absolute;
background: var(--bg-secondary);
border-radius: 20px;
padding: 20px;
box-shadow: var(--shadow-medium);
border: 1px solid var(--border-color);
animation: floatCard 5s ease-in-out infinite;
}

.hero-floating-card-1 {
top: 30px;
left: -40px;
}

.hero-floating-card-2 {
bottom: 60px;
right: -40px;
animation-delay: -2.5s;
}

@keyframes floatCard {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}

.floating-card-icon {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}

.floating-card-icon svg {
width: 24px;
height: 24px;
color: white;
}

.hero-floating-card h4 {
font-size: clamp(15px, 1vw, 17px);
font-weight: 700;
margin-bottom: 4px;
}

.hero-floating-card p {
font-size: clamp(12px, 0.85vw, 14px);
color: var(--text-muted);
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.section {
padding: 120px 40px;
position: relative;
}

.container {
max-width: 1400px;
margin: 0 auto;
}

.section-header {
text-align: center;
margin-bottom: 80px;
}

.section-label {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: clamp(13px, 0.85vw, 15px);
font-weight: 700;
color: var(--accent-primary);
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 20px;
}

.section-label::before,
.section-label::after {
content: '';
width: 35px;
height: 2px;
background: var(--gradient-primary);
}

.section-title {
font-size: clamp(36px, 5vw, 58px);
font-weight: 900;
margin-bottom: 20px;
}

.section-desc {
font-size: clamp(19px, 1.3vw, 22px);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
}

#what-is-vineh .intro-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}

.intro-content h3 {
font-size: clamp(34px, 3vw, 40px);
font-weight: 900;
margin-bottom: 25px;
line-height: 1.4;
}

.intro-content p {
font-size: clamp(18px, 1.2vw, 21px);
color: var(--text-secondary);
margin-bottom: 20px;
line-height: 2;
text-align: justify;
}

.intro-highlight {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.06));
border-right: 4px solid var(--accent-primary);
padding: 25px 28px;
border-radius: 0 18px 18px 0;
margin: 30px 0;
}

.intro-highlight p {
font-size: clamp(17px, 1.15vw, 20px);
font-weight: 600;
color: var(--text-primary);
margin: 0;
}

.intro-icons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}

.intro-icon-item {
text-align: center;
padding: 25px 15px;
background: var(--bg-secondary);
border-radius: 20px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}

.intro-icon-item:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-medium);
border-color: var(--accent-primary);
}

.intro-icon-item svg {
width: 40px;
height: 40px;
color: var(--accent-primary);
margin-bottom: 12px;
}

.intro-icon-item h4 {
font-size: clamp(15px, 1vw, 17px);
font-weight: 700;
margin-bottom: 6px;
}

.intro-icon-item p {
font-size: clamp(13px, 0.9vw, 15px);
color: var(--text-muted);
margin: 0;
}

.intro-visual {
position: relative;
}

.intro-main-image {
border-radius: 30px;
overflow: hidden;
box-shadow: var(--shadow-strong);
}

.intro-main-image img {
width: 100%;
height: 450px;
object-fit: cover;
}

.intro-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}

.intro-gallery-item {
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
}

.intro-gallery-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-medium);
}

.intro-gallery-item img {
width: 100%;
height: 100px;
object-fit: cover;
}

#how-it-works {
background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(99, 102, 241, 0.03) 50%, var(--bg-secondary) 100%);
overflow: hidden;
position: relative;
}

#how-it-works::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}

#how-it-works::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}

.process-flow {
position: relative;
padding: 80px 0;
}

.flow-line {
position: absolute;
top: 50%;
left: 5%;
right: 5%;
height: 4px;
background: linear-gradient(90deg, var(--bg-tertiary), rgba(99, 102, 241, 0.15), var(--bg-tertiary));
border-radius: 4px;
transform: translateY(-50%);
z-index: 1;
}

.flow-line::before {
content: '';
position: absolute;
inset: -8px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
border-radius: 12px;
filter: blur(8px);
}

.flow-line-progress {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: var(--gradient-primary);
border-radius: 4px;
width: 0;
transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 0 60px rgba(139, 92, 246, 0.3);
}

.flow-line.animated .flow-line-progress {
width: 100%;
}

.flow-particles {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
z-index: 2;
width: 90%;
}

.flow-particle {
position: absolute;
width: 18px;
height: 18px;
background: var(--gradient-primary);
border-radius: 50%;
box-shadow: 0 0 30px var(--accent-primary), 0 0 60px rgba(99, 102, 241, 0.5);
opacity: 0;
}

.flow-particle::before {
content: '';
position: absolute;
inset: -4px;
background: inherit;
border-radius: 50%;
opacity: 0.4;
animation: particleGlow 1s ease-in-out infinite;
}

@keyframes particleGlow {
0%, 100% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(1.5); opacity: 0.1; }
}

.flow-line.animated .flow-particle {
animation: flowParticle 4s ease-in-out infinite;
}

.flow-particle:nth-child(1) { animation-delay: 0s; }
.flow-particle:nth-child(2) { animation-delay: 0.8s; }
.flow-particle:nth-child(3) { animation-delay: 1.6s; }
.flow-particle:nth-child(4) { animation-delay: 2.4s; }
.flow-particle:nth-child(5) { animation-delay: 3.2s; }

@keyframes flowParticle {
0% {
right: 0;
opacity: 0;
transform: translateY(-50%) scale(0.3);
}
5% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
95% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
100% {
right: calc(100% - 18px);
opacity: 0;
transform: translateY(-50%) scale(0.3);
}
}

.process-steps-flow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
position: relative;
z-index: 10;
}

.process-step-flow {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

.step-circle {
position: relative;
width: 160px;
height: 160px;
margin-bottom: 35px;
}

.step-circle-outer {
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
animation: pulseOuter 4s ease-in-out infinite;
}

.step-circle-outer::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), transparent);
animation: pulseOuterGlow 4s ease-in-out infinite;
}

@keyframes pulseOuter {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.2); opacity: 0.3; }
}

@keyframes pulseOuterGlow {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.4); opacity: 0; }
}

.step-circle-ring {
position: absolute;
inset: 12px;
border-radius: 50%;
border: 3px dashed transparent;
background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
            linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary)) border-box;
animation: spinRing 25s linear infinite;
}

.step-circle-ring::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));
filter: blur(6px);
opacity: 0;
transition: opacity 0.4s ease;
}

.process-step-flow:hover .step-circle-ring::before {
opacity: 1;
}

@keyframes spinRing {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.step-circle-inner {
position: absolute;
inset: 25px;
border-radius: 50%;
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 
    var(--shadow-medium),
    inset 0 2px 10px rgba(255, 255, 255, 0.8),
    inset 0 -2px 10px rgba(99, 102, 241, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid var(--border-color);
}

.process-step-flow:hover .step-circle-inner {
background: var(--gradient-primary);
border-color: transparent;
transform: scale(1.12) rotate(-5deg);
box-shadow: 
    0 20px 50px -10px var(--accent-glow),
    0 0 40px rgba(99, 102, 241, 0.3);
}

.step-circle-inner svg {
width: 50px;
height: 50px;
color: var(--accent-primary);
transition: all 0.5s ease;
filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.2));
}

.process-step-flow:hover .step-circle-inner svg {
color: white;
transform: scale(1.1);
filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
}

.step-number-flow {
position: absolute;
top: -8px;
right: -8px;
width: 48px;
height: 48px;
background: var(--gradient-primary);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(20px, 1.4vw, 24px);
font-weight: 900;
color: white;
box-shadow: 
    0 12px 35px -8px var(--accent-glow),
    0 0 20px rgba(99, 102, 241, 0.3);
z-index: 5;
border: 3px solid var(--bg-secondary);
transition: all 0.4s ease;
}

.process-step-flow:hover .step-number-flow {
transform: scale(1.15) rotate(10deg);
box-shadow: 
    0 15px 40px -8px var(--accent-glow),
    0 0 30px rgba(99, 102, 241, 0.4);
}

.step-content-card {
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
border-radius: 28px;
padding: 32px 22px;
text-align: center;
border: 1px solid var(--border-color);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
position: relative;
overflow: hidden;
}

.step-content-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}

.step-content-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}

.process-step-flow:hover .step-content-card::before {
transform: scaleX(1);
transform-origin: left;
}

.process-step-flow:hover .step-content-card::after {
opacity: 1;
}

.process-step-flow:hover .step-content-card {
border-color: var(--accent-primary);
box-shadow: 
    var(--shadow-strong),
    0 0 40px rgba(99, 102, 241, 0.1);
transform: translateY(-12px);
}

.step-content-card h3 {
font-size: clamp(18px, 1.3vw, 22px);
font-weight: 800;
margin-bottom: 14px;
color: var(--text-primary);
position: relative;
z-index: 1;
transition: all 0.4s ease;
}

.process-step-flow:hover .step-content-card h3 {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.step-content-card p {
font-size: clamp(13px, 0.95vw, 16px);
color: var(--text-secondary);
line-height: 1.8;
position: relative;
z-index: 1;
}

.step-image-preview {
width: 60px;
height: 60px;
border-radius: 16px;
overflow: hidden;
margin: 18px auto 0;
box-shadow: var(--shadow-medium);
position: relative;
z-index: 1;
transition: all 0.4s ease;
border: 3px solid transparent;
}

.process-step-flow:hover .step-image-preview {
transform: scale(1.1) rotate(-3deg);
border-color: var(--accent-primary);
box-shadow: 
    var(--shadow-strong),
    0 0 20px rgba(99, 102, 241, 0.2);
}

.step-image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.process-step-flow:hover .step-image-preview img {
transform: scale(1.2);
}

.step-arrow {
position: absolute;
top: 80px;
left: -18px;
width: 44px;
height: 44px;
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-medium);
border: 2px solid var(--border-color);
z-index: 5;
transition: all 0.4s ease;
}

.step-arrow::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: var(--gradient-primary);
opacity: 0;
z-index: -1;
transition: opacity 0.4s ease;
}

.process-step-flow:hover .step-arrow {
border-color: var(--accent-primary);
transform: scale(1.15);
}

.process-step-flow:hover .step-arrow::before {
opacity: 0.2;
}

.step-arrow svg {
width: 22px;
height: 22px;
color: var(--accent-primary);
transform: rotate(180deg);
transition: all 0.4s ease;
}

.process-step-flow:hover .step-arrow svg {
color: var(--accent-secondary);
transform: rotate(180deg) translateX(-3px);
}

.process-step-flow:first-child .step-arrow {
display: none;
}

.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.feature-card {
background: var(--bg-secondary);
border-radius: 28px;
padding: 40px 35px;
border: 1px solid var(--border-color);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}

.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}

.feature-card:hover::before {
transform: scaleX(1);
transform-origin: left;
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-strong);
border-color: var(--border-glow);
}

.feature-icon-wrapper {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}

.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
flex-shrink: 0;
}

.feature-card:hover .feature-icon {
background: var(--gradient-primary);
transform: rotate(-8deg) scale(1.1);
}

.feature-icon svg {
width: 35px;
height: 35px;
color: var(--accent-primary);
transition: color 0.4s ease;
}

.feature-card:hover .feature-icon svg {
color: white;
}

.feature-badge {
font-size: clamp(11px, 0.8vw, 13px);
font-weight: 700;
color: var(--accent-primary);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
padding: 6px 14px;
border-radius: 50px;
}

.feature-title {
font-size: clamp(22px, 1.5vw, 26px);
font-weight: 800;
margin-bottom: 15px;
}

.feature-desc {
font-size: clamp(15px, 1.1vw, 18px);
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 20px;
}

.use-cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}

.use-case-card {
background: var(--bg-secondary);
border-radius: 30px;
overflow: hidden;
border: 1px solid var(--border-color);
transition: all 0.5s ease;
display: flex;
flex-direction: column;
}

.use-case-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-strong);
border-color: var(--accent-primary);
}

.use-case-image {
height: 260px;
position: relative;
overflow: hidden;
}

.use-case-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}

.use-case-card:hover .use-case-image img {
transform: scale(1.1);
}

.use-case-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(26, 26, 46, 0.95) 100%);
}

.use-case-icon {
position: absolute;
bottom: 20px;
right: 20px;
width: 65px;
height: 65px;
background: var(--gradient-primary);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 35px -8px var(--accent-glow);
}

.use-case-icon svg {
width: 30px;
height: 30px;
color: white;
}

.use-case-content {
padding: 35px;
flex: 1;
}

.use-case-title {
font-size: clamp(26px, 1.8vw, 30px);
font-weight: 800;
margin-bottom: 15px;
}

.use-case-desc {
font-size: clamp(16px, 1.15vw, 19px);
color: var(--text-secondary);
line-height: 1.8;
}

.use-case-stats {
display: flex;
gap: 35px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--border-color);
}

.use-case-stat-value {
font-size: clamp(30px, 2.2vw, 36px);
font-weight: 900;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.use-case-stat-label {
font-size: clamp(13px, 0.95vw, 15px);
color: var(--text-muted);
}

#stats {
padding: 100px 40px;
}

.stats-wrapper {
background: var(--gradient-primary);
border-radius: 40px;
padding: 70px 50px;
position: relative;
overflow: hidden;
}

.stats-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
position: relative;
z-index: 1;
}

.stat-card {
text-align: center;
padding: 35px 20px;
background: rgba(255, 255, 255, 0.12);
border-radius: 24px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}

.stat-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.18);
}

.stat-card-icon {
width: 65px;
height: 65px;
margin: 0 auto 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
}

.stat-card-icon svg {
width: 32px;
height: 32px;
color: white;
}

.stat-card-number {
font-size: clamp(48px, 4vw, 56px);
font-weight: 900;
color: white;
}

.stat-card-label {
font-size: clamp(16px, 1.1vw, 18px);
color: rgba(255, 255, 255, 0.85);
margin-top: 8px;
}

#technology {
background: var(--bg-secondary);
}

.tech-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}

.tech-visual {
position: relative;
}

.tech-diagram {
background: var(--bg-primary);
border-radius: 40px;
padding: 60px;
border: 1px solid var(--border-color);
position: relative;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
}

.tech-center {
width: 140px;
height: 140px;
background: var(--gradient-primary);
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 25px 60px -12px var(--accent-glow);
position: relative;
z-index: 2;
animation: techPulse 3s ease-in-out infinite;
}

@keyframes techPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

.tech-center svg {
width: 65px;
height: 65px;
color: white;
}

.tech-orbit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px dashed rgba(99, 102, 241, 0.3);
border-radius: 50%;
animation: spin 30s linear infinite;
}

.tech-orbit-1 {
width: 280px;
height: 280px;
}

.tech-orbit-2 {
width: 400px;
height: 400px;
animation-direction: reverse;
animation-duration: 40s;
}

@keyframes spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}

.tech-node {
position: absolute;
width: 60px;
height: 60px;
background: var(--bg-secondary);
border: 2px solid var(--border-glow);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
animation: counterSpin 30s linear infinite;
box-shadow: var(--shadow-soft);
}

.tech-orbit-2 .tech-node {
animation-direction: reverse;
animation-duration: 40s;
}

@keyframes counterSpin {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}

.tech-node svg {
width: 28px;
height: 28px;
color: var(--accent-primary);
}

.tech-node-1 { top: -30px; left: 50%; margin-left: -30px; }
.tech-node-2 { bottom: -30px; left: 50%; margin-left: -30px; }
.tech-node-3 { right: -30px; top: 50%; margin-top: -30px; }
.tech-node-4 { left: -30px; top: 50%; margin-top: -30px; }

.tech-info h3 {
font-size: clamp(36px, 3vw, 42px);
font-weight: 900;
margin-bottom: 25px;
line-height: 1.3;
}

.tech-info > p {
font-size: clamp(17px, 1.2vw, 20px);
color: var(--text-secondary);
margin-bottom: 35px;
line-height: 2;
text-align: justify;
}

.tech-list {
display: flex;
flex-direction: column;
gap: 16px;
}

.tech-list-item {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 24px;
background: var(--bg-primary);
border-radius: 18px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}

.tech-list-item:hover {
border-color: var(--accent-primary);
transform: translateX(-8px);
box-shadow: var(--shadow-medium);
}

.tech-list-icon {
width: 52px;
height: 52px;
background: var(--gradient-primary);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.tech-list-icon svg {
width: 24px;
height: 24px;
color: white;
}

.tech-list-text h4 {
font-size: clamp(17px, 1.2vw, 19px);
font-weight: 700;
margin-bottom: 4px;
}

.tech-list-text p {
font-size: clamp(14px, 1vw, 16px);
color: var(--text-muted);
}

.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}

.faq-item {
background: var(--bg-secondary);
border-radius: 20px;
border: 1px solid var(--border-color);
overflow: hidden;
transition: all 0.3s ease;
}

.faq-item:hover {
border-color: var(--accent-primary);
}

.faq-question {
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
gap: 15px;
}

.faq-question h4 {
font-size: clamp(16px, 1.1vw, 18px);
font-weight: 700;
display: flex;
align-items: center;
gap: 14px;
}

.faq-question-icon {
width: 42px;
height: 42px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.faq-question-icon svg {
width: 20px;
height: 20px;
color: var(--accent-primary);
}

.faq-toggle {
width: 36px;
height: 36px;
background: var(--bg-tertiary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}

.faq-toggle svg {
width: 18px;
height: 18px;
color: var(--text-muted);
transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
background: var(--gradient-primary);
}

.faq-item.active .faq-toggle svg {
color: white;
transform: rotate(180deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
max-height: 300px;
}

.faq-answer-content {
padding: 0 28px 24px;
font-size: clamp(15px, 1.05vw, 17px);
color: var(--text-secondary);
line-height: 1.8;
}

#contact {
padding: 120px 40px;
}

.cta-wrapper {
background: var(--bg-secondary);
border-radius: 40px;
padding: 80px 60px;
position: relative;
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-medium);
}

.cta-bg-elements {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}

.cta-bg-gradient {
position: absolute;
width: 450px;
height: 450px;
border-radius: 50%;
filter: blur(100px);
opacity: 0.4;
}

.cta-bg-gradient-1 {
top: -180px;
right: -120px;
background: var(--accent-primary);
}

.cta-bg-gradient-2 {
bottom: -180px;
left: -120px;
background: var(--accent-tertiary);
}

.cta-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.cta-title {
font-size: clamp(36px, 4vw, 54px);
font-weight: 900;
margin-bottom: 22px;
}

.cta-desc {
font-size: clamp(20px, 1.4vw, 24px);
color: var(--text-secondary);
margin-bottom: 45px;
}

.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

.cta-features {
display: flex;
justify-content: center;
gap: 45px;
margin-top: 55px;
}

.cta-feature {
display: flex;
align-items: center;
gap: 12px;
font-size: clamp(15px, 1.05vw, 17px);
color: var(--text-secondary);
}

.cta-feature svg {
width: 22px;
height: 22px;
color: var(--accent-primary);
}
.btn-tutorial-liquid {
    position: relative;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    text-decoration: none;
    margin-top: 16px;
}

.btn-tutorial-liquid::before {
    content: '';
    position: absolute;
    top: 0;
    inset: 0;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.btn-tutorial-liquid:hover::before {
    opacity: 1;
}

.btn-tutorial-liquid:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
}

.btn-tutorial-liquid:active {
    transform: translateY(-1px);
}

.btn-tutorial-liquid span {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-tutorial-liquid svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.btn-tutorial-liquid:hover svg {
    transform: scale(1.15);
}

@media (max-width: 640px) {
    .btn-tutorial-liquid {
        padding: 12px 24px;
        font-size: 14px;
    }
}