html {
  scroll-behavior: smooth;
}

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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
overflow-x: hidden;
}

.phone-input-box {
  width: 100%;
  display: inline-block;
  position: relative;
  margin-bottom: 24px !important;
}

.phone-input-box input[type=tel]#phone_num {
  padding: 20px 24px 20px 48px !important;
}

#message.custom-txtarea {
  resize: none;
}


.spinner {
  display: none;
  margin-top: 16px;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  font-weight: 500;
}


.status-message {
  width: 100%;
  display: inline-block;
  padding: 20px;
  text-align: left;
  background: #000000;
  color: #ffffff;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  display: none;
  max-width: 100%;
  text-align: center;
  margin-top: 8px;
}


.status-message.success {
  background: #000000;
}

.status-message.error {
  background: #ef3c3c;
  max-width: 100%;
  padding: 16px;
  font-size: 14px;
  border-radius: 4px;
  color: #ffffff;
}
/* Hero Container */
.hero-container {
position: relative;
min-height: 100vh;
background: linear-gradient(
135deg,
#000000 0%,
#07004e 50%,
#4b00ff 100%
);
overflow: hidden;
}

/* Animated Background */
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
}

.hero-bg::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(100, 100, 255, 0.1) 1px,
transparent 1px
);
background-size: 50px 50px;
animation: drift 20s linear infinite;
}

@keyframes drift {
to {
transform: translate(50px, 50px);
}
}

/* Floating Orbs */
.orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.6;
animation: float 10s ease-in-out infinite;
}

.orb1 {
width: 300px;
height: 300px;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
top: -150px;
right: -150px;
animation-delay: 0s;
}

.orb2 {
width: 200px;
height: 200px;
background: linear-gradient(
135deg,
#f093fb 0%,
#f5576c 100%
);
bottom: -100px;
left: -100px;
animation-delay: 2s;
}

.orb3 {
width: 250px;
height: 250px;
background: linear-gradient(
135deg,
#4facfe 0%,
#00f2fe 100%
);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 4s;
}

@keyframes float {
0%,
100% {
transform: translate(0, 0) scale(1);
}

33% {
transform: translate(30px, -30px)
scale(1.1);
}

66% {
transform: translate(-20px, 20px)
scale(0.9);
}
}

/* Main Content */
.hero-content {
position: relative;
z-index: 10;
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
text-align: center;
}

/* Badge */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 10px 28px;
margin-bottom: 35px;
color: #fff;
font-size: 15px;
font-weight: 600;
animation: slideInDown 0.8s ease-out;
position: relative;
}

.badge::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
left: 16px;
animation: pulse 2s infinite;
}

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

50% {
opacity: 0.5;
transform: scale(1.2);
}
}

@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Main Headline */
.headline {
font-size: clamp(36px, 7vw, 72px);
font-weight: 900;
color: #fff;
line-height:normal;
margin-bottom: 24px;
animation: slideInUp 0.8s ease-out 0.2s
both;
letter-spacing: -0.02em;
}

.headline-gradient {
background: linear-gradient(
135deg,
#667eea 0%,
#1366c5 25%,
#f9e601 50%,
#4facfe 75%,
#00f2fe 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s linear infinite;
display: inline-block;
}

@keyframes shimmer {
to {
background-position: 200% center;
}
}

/* Subheadline */
.subheadline {
font-size: clamp(18px, 2.5vw, 26px);
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
margin-bottom: 45px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
animation: slideInUp 0.8s ease-out 0.4s
both;
}

@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* CTA Section */
.cta-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
margin-bottom: 50px;
animation: slideInUp 0.8s ease-out 0.6s
both;
}

/* CTA Button */
.cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
color: #fff;
padding: 22px 65px;
font-size: 19px;
font-weight: 700;
text-decoration: none;
border-radius: 60px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 12px 35px
rgba(102, 126, 234, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cta-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}

.cta-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 45px
rgba(102, 126, 234, 0.7);
}

.cta-button:hover::before {
left: 100%;
}

.cta-arrow {
font-size: 24px;
animation: arrowBounce 1.5s ease-in-out
infinite;
}

@keyframes arrowBounce {
0%,
100% {
transform: translateX(0);
}

50% {
transform: translateX(5px);
}
}

/* Urgency Text */
.urgency-text {
display: flex;
align-items: center;
gap: 10px;
background: rgba(244, 63, 94, 0.15);
border: 1px solid rgba(244, 63, 94, 0.3);
padding: 12px 24px;
border-radius: 30px;
color: #fff;
font-size: 15px;
font-weight: 600;
animation: fadeIn 0.8s ease-out 0.8s both;
}

.fire-emoji {
font-size: 20px;
animation: flame 1s ease-in-out infinite;
}

@keyframes flame {
0%,
100% {
transform: scale(1) rotate(0deg);
}

25% {
transform: scale(1.1) rotate(-5deg);
}

75% {
transform: scale(1.1) rotate(5deg);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

/* Value Proposition */
.value-prop {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(220px, 1fr)
);
gap: 20px;
margin-top: 50px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
animation: slideInUp 0.8s ease-out 1s both;
}

.value-item {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 16px 20px;
border-radius: 15px;
color: rgba(255, 255, 255, 0.95);
font-size: 15px;
font-weight: 500;
transition: all 0.3s ease;
}

.value-item:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2);
}

.value-icon {
width: 28px;
height: 28px;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.value-icon::after {
content: "✓";
color: #fff;
font-weight: bold;
font-size: 16px;
}

/* Video Preview */
.video-preview {
max-width: 850px;
margin: 60px auto 0;
position: relative;
animation: slideInUp 0.8s ease-out 1.2s
both;
}

.video-wrapper {
position: relative;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 12px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}

.video-placeholder {
width: 100%;
background: linear-gradient(
135deg,
rgba(102, 126, 234, 0.2) 0%,
rgba(118, 75, 162, 0.2) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
overflow: hidden;
}

/* Trust Indicators */
.trust-indicators {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin-top: 40px;
flex-wrap: wrap;
animation: fadeIn 0.8s ease-out 1.4s both;
}

.trust-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
}

.trust-number {
font-size: 20px;
font-weight: 700;
color: #fff;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
.hero-content {
padding: 40px 16px;
}

.badge {
font-size: 13px;
padding: 8px 20px;
}

.headline {
margin-bottom: 20px;
}

.subheadline {
margin-bottom: 35px;
}

.cta-button {
padding: 18px 45px;
font-size: 17px;
width: 100%;
max-width: 320px;
}

.urgency-text {
font-size: 14px;
padding: 10px 20px;
}

.value-prop {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 40px;
}

.value-item {
padding: 14px 16px;
font-size: 14px;
}

.video-preview {
margin-top: 45px;
}

.trust-indicators {
gap: 25px;
margin-top: 30px;
}

.trust-item {
font-size: 13px;
}
}

/* Desktop Enhancement */
@media (min-width: 1200px) {
.hero-content {
padding: 80px 20px;
}

.headline {
margin-bottom: 28px;
}

.cta-button {
padding: 24px 75px;
font-size: 20px;
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* How It Works Section */
.hiw-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#1a1a2e 0%,
#16213e 50%,
#0f3460 100%
);
overflow: hidden;
}

/* Animated Background */
.hiw-bg-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Moving Grid */
.hiw-grid {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(
rgba(100, 255, 218, 0.03) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(100, 255, 218, 0.03) 1px,
transparent 1px
);
background-size: 100px 100px;
animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
0% {
transform: translate(0, 0);
}

100% {
transform: translate(100px, 100px);
}
}

/* Floating Particles */
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #64ffda;
border-radius: 50%;
opacity: 0.6;
animation: particleFloat 15s infinite
ease-in-out;
}

.particle:nth-child(2) {
left: 20%;
top: 80%;
animation-delay: 2s;
animation-duration: 20s;
}

.particle:nth-child(3) {
left: 40%;
top: 40%;
animation-delay: 4s;
animation-duration: 18s;
}

.particle:nth-child(4) {
left: 60%;
top: 70%;
animation-delay: 1s;
animation-duration: 22s;
}

.particle:nth-child(5) {
left: 80%;
top: 20%;
animation-delay: 3s;
animation-duration: 16s;
}

.particle:nth-child(6) {
left: 90%;
top: 60%;
animation-delay: 5s;
animation-duration: 19s;
}

@keyframes particleFloat {
0%,
100% {
transform: translateY(0) translateX(0);
opacity: 0;
}

10%,
90% {
opacity: 0.6;
}

50% {
transform: translateY(-100px)
translateX(50px);
}
}

/* Gradient Orbs */
.hiw-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
animation: orbFloat 10s ease-in-out
infinite;
}

.hiw-orb1 {
width: 400px;
height: 400px;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
top: -200px;
left: -200px;
animation-delay: 0s;
}

.hiw-orb2 {
width: 300px;
height: 300px;
background: linear-gradient(
135deg,
#f093fb 0%,
#f5576c 100%
);
bottom: -150px;
right: -150px;
animation-delay: 3s;
}

@keyframes orbFloat {
0%,
100% {
transform: translate(0, 0) scale(1);
}

33% {
transform: translate(30px, -30px)
scale(1.1);
}

66% {
transform: translate(-20px, 20px)
scale(0.9);
}
}

/* Container */
.hiw-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.hiw-header {
text-align: center;
margin-bottom: 80px;
animation: hiwFadeInDown 0.8s ease-out;
}

.hiw-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(100, 255, 218, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(100, 255, 218, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.hiw-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(100, 255, 218, 0.2),
transparent
);
animation: badgeShine 3s infinite;
}

@keyframes badgeShine {
to {
left: 100%;
}
}

.hiw-badge-icon {
width: 24px;
height: 24px;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: #0a0a0a;
animation: iconPulse 2s ease-in-out
infinite;
}

@keyframes iconPulse {
0%,
100% {
transform: scale(1);
}

50% {
transform: scale(1.1);
}
}

.hiw-badge-text {
color: #64ffda;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.hiw-title {
font-size: clamp(32px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.hiw-gradient-text {
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 50%,
#f093fb 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: textShimmer 3s linear infinite;
}

@keyframes textShimmer {
to {
background-position: 200% center;
}
}

.hiw-subtitle {
font-size: clamp(18px, 2.5vw, 26px);
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
max-width: 700px;
margin: 0 auto;
line-height: 1.5;
}

/* Process Timeline */
.process-timeline {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 80px;
padding: 0 40px;
}

/* Connection Line */
.timeline-line {
position: absolute;
top: 50px;
left: 12%;
right: 12%;
height: 3px;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
}

.timeline-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(
90deg,
#64ffda 0%,
#4facfe 50%,
#f093fb 100%
);
width: 0%;
animation: progressFill 4s ease-out 0.5s
forwards;
box-shadow: 0 0 30px
rgba(100, 255, 218, 0.6);
}

@keyframes progressFill {
to {
width: 100%;
}
}

/* Process Steps */
.process-step {
flex: 1;
position: relative;
z-index: 2;
text-align: center;
animation: stepFadeIn 0.6s ease-out
backwards;
cursor: pointer;
transition: transform 0.3s ease;
}

.process-step:hover {
transform: translateY(-10px);
}

.process-step:nth-child(1) {
animation-delay: 0.2s;
}

.process-step:nth-child(2) {
animation-delay: 0.4s;
}

.process-step:nth-child(3) {
animation-delay: 0.6s;
}

.process-step:nth-child(4) {
animation-delay: 0.8s;
}

.process-step:nth-child(5) {
animation-delay: 1s;
}

@keyframes stepFadeIn {
from {
opacity: 0;
transform: translateY(40px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Step Number */
.step-number {
width: 100px;
height: 100px;
margin: 0 auto 24px;
background: linear-gradient(
145deg,
#1a1a2e 0%,
#0f3460 100%
);
border: 3px solid rgba(100, 255, 218, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 900;
color: #64ffda;
position: relative;
transition: all 0.4s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.step-number::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
padding: 5px;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 50%,
#f093fb 100%
);
-webkit-mask: linear-gradient(#fff 0 0)
content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}

.process-step:hover .step-number::before {
opacity: 1;
}

.process-step:hover .step-number {
transform: scale(1.15);
border-color: transparent;
box-shadow: 0 20px 40px
rgba(100, 255, 218, 0.3);
}

/* Step Icon */
.step-icon {
position: absolute;
top: -15px;
right: -15px;
width: 40px;
height: 40px;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 5px 15px
rgba(100, 255, 218, 0.4);
}

/* Step Content */
.step-title {
font-size: 22px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
line-height: 1.2;
}

.step-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
max-width: 200px;
margin: 0 auto;
}

/* Visual Demo */
.visual-demo {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 32px;
padding: 80px;
position: relative;
overflow: hidden;
animation: demoFadeIn 0.8s ease-out 1.5s
backwards;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.visual-demo::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 25%,
#f093fb 50%,
#64ffda 75%,
#4facfe 100%
);
border-radius: 32px;
opacity: 0.5;
z-index: -1;
animation: borderRotate 10s linear
infinite;
background-size: 300% 300%;
}

@keyframes borderRotate {
0% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0% 50%;
}
}

@keyframes demoFadeIn {
from {
opacity: 0;
transform: scale(0.9) translateY(30px);
}

to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

/* Demo Content */
.demo-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
}

.demo-text {
flex: 1;
}

.demo-headline {
font-size: clamp(28px, 4vw, 48px);
font-weight: 800;
color: #fff;
margin-bottom: 24px;
line-height: 1.1;
}

.demo-highlight {
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}

.demo-subtitle {
font-size: clamp(16px, 2vw, 20px);
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin-bottom: 40px;
}

.demo-stats {
display: flex;
gap: 40px;
flex-wrap: wrap;
}

.stat-item {
text-align: center;
position: relative;
}

.stat-number {
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
line-height: 1;
}

.stat-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
}

/* Demo Visual */
.demo-visual {
flex: 1;
position: relative;
max-width: 600px;
}

.demo-mockup {
width: 100%;
aspect-ratio: 16/10;
background: linear-gradient(
145deg,
#1a1a2e 0%,
#0f3460 100%
);
border-radius: 24px;
border: 1px solid rgba(100, 255, 218, 0.2);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.mockup-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(100, 255, 218, 0.1) 0%,
transparent 60%
);
animation: glowRotate 15s linear infinite;
}

@keyframes glowRotate {
to {
transform: rotate(360deg);
}
}

.mockup-content {
text-align: center;
padding: 40px;
position: relative;
z-index: 1;
}

.agency-logo {
font-size: clamp(32px, 5vw, 40px);
font-weight: 900;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 16px;
letter-spacing: -0.02em;
line-height:normal;
}

.revenue-display {
font-size: clamp(28px, 4vw, 24px);
font-weight: 700;
color: #fff;
margin-bottom: 16px;
line-height:normal;
}

.revenue-growth {
font-size: 18px;
color: #64ffda;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.growth-arrow {
font-size: 24px;
animation: arrowBounce 1.5s ease-in-out
infinite;
}

@keyframes arrowBounce {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-5px);
}
}

/* CTA Section */
.hiw-cta {
text-align: center;
margin-top: 80px;
animation: ctaFadeIn 0.8s ease-out 2s
backwards;
}

@keyframes ctaFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.hiw-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
color: #0a0a0a;
padding: 24px 60px;
font-size: 20px;
font-weight: 800;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(100, 255, 218, 0.4);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}

.hiw-cta-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}

.hiw-cta-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 50px
rgba(100, 255, 218, 0.6);
}

.hiw-cta-button:hover::before {
left: 100%;
}

.cta-arrow {
font-size: 24px;
transition: transform 0.3s ease;
}

.hiw-cta-button:hover .cta-arrow {
transform: translateX(5px);
}

.hiw-trust {
margin-top: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.process-timeline {
flex-direction: column;
gap: 40px;
padding: 0;
}

.timeline-line {
top: 50px;
left: 50%;
right: auto;
width: 3px;
height: calc(100% - 100px);
transform: translateX(-50%);
}

.timeline-progress {
width: 100%;
height: 0%;
animation: progressFillVertical 4s
ease-out 0.5s forwards;
}

@keyframes progressFillVertical {
to {
height: 100%;
}
}

.demo-content {
flex-direction: column;
text-align: center;
gap: 50px;
}

.demo-stats {
justify-content: center;
}

.visual-demo {
padding: 60px 40px;
}
}

@media (max-width: 640px) {
.hiw-section {
padding: 60px 16px;
}

.hiw-header {
margin-bottom: 50px;
}

.hiw-title {
margin-bottom: 16px;
}

.step-number {
width: 80px;
height: 80px;
font-size: 28px;
}

.step-icon {
width: 32px;
height: 32px;
font-size: 16px;
top: -10px;
right: -10px;
}

.step-title {
font-size: 18px;
min-height: auto;
margin-bottom: 8px;
}

.step-description {
font-size: 14px;
max-width: 100%;
}

.visual-demo {
padding: 30px 20px;
border-radius: 20px;
}

.demo-content {
gap: 30px;
}

.demo-stats {
gap: 30px;
}

.stat-item {
flex: 1;
min-width: 80px;
}

.hiw-cta-button {
padding: 20px 40px;
font-size: 16px;
width: 100%;
max-width: 320px;
}

.demo-mockup {
border-radius: 16px;
}

.mockup-content {
padding: 24px;
}

.revenue-growth {
font-size: 16px;
}

/* Optimize animations for mobile */
.hiw-grid {
animation: none;
opacity: 0.5;
}

.particle {
animation: none;
display: none;
}

.hiw-orb {
animation: none;
opacity: 0.2;
}
}

/* Ultra Mobile (small phones) */
@media (max-width: 380px) {
.step-number {
width: 70px;
height: 70px;
font-size: 24px;
}

.step-title {
font-size: 16px;
}

.hiw-cta-button {
padding: 18px 30px;
font-size: 15px;
}
}

/* Case Study Section - All classes prefixed with 'cs-' to avoid conflicts */
.cs-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a1a2e 100%
);
overflow: hidden;
}

/* Background Effects */
.cs-bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.05;
background-image: radial-gradient(
circle at 20% 50%,
rgba(120, 119, 198, 0.3) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 50%,
rgba(255, 119, 198, 0.3) 0%,
transparent 50%
);
}

/* Container */
.cs-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Section Header */
.cs-header {
text-align: center;
margin-bottom: 80px;
animation: csFadeInUp 0.8s ease-out;
}

.cs-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 50px;
padding: 10px 24px;
margin-bottom: 20px;
color: #4ade80;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.cs-success-icon {
width: 20px;
height: 20px;
background: #4ade80;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.cs-success-icon::after {
content: "✓";
color: #0a0a0a;
font-size: 12px;
font-weight: bold;
}

.cs-title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
color: #fff;
line-height: 1.1;
margin-bottom: 16px;
}

.cs-highlight {
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* Case Study Content */
.cs-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}

/* Video Side */
.cs-video-column {
position: relative;
animation: csSlideInLeft 0.8s ease-out
0.2s both;
}

.cs-video-wrapper {
position: relative;
background: #000;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-video-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(74, 222, 128, 0.2) 0%,
transparent 70%
);
animation: csRotate 20s linear infinite;
pointer-events: none;
}

@keyframes csRotate {
to {
transform: rotate(360deg);
}
}

.cs-video-container {
position: relative;
width: 100%;
background: #111;
}

/* Story Side */
.cs-story-column {
animation: csSlideInRight 0.8s ease-out
0.4s both;
}

.cs-story-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}

.cs-avatar {
width: 80px;
height: 80px;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: bold;
color: #fff;
box-shadow: 0 10px 30px
rgba(74, 222, 128, 0.3);
}

.cs-story-meta {
flex: 1;
}

.cs-person-name {
font-size: 24px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}

.cs-person-location {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
gap: 6px;
}

/* Results Box */
.cs-results-box {
background: rgba(74, 222, 128, 0.05);
border: 2px solid rgba(74, 222, 128, 0.2);
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}

.cs-results-box::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(74, 222, 128, 0.1),
transparent
);
animation: csShimmer 3s infinite;
}

@keyframes csShimmer {
to {
left: 100%;
}
}

.cs-result-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.cs-result-item:last-child {
margin-bottom: 0;
}

.cs-result-label {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
}

.cs-result-value {
font-size: 28px;
font-weight: 800;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* Story Content */
.cs-story-content {
color: rgba(255, 255, 255, 0.85);
font-size: 17px;
line-height: 1.7;
margin-bottom: 30px;
}

.cs-story-quote {
background: rgba(255, 255, 255, 0.05);
border-left: 4px solid #4ade80;
border-radius: 8px;
padding: 24px;
margin: 30px 0;
font-style: italic;
font-size: 18px;
color: #fff;
position: relative;
}

.cs-quote-mark {
position: absolute;
top: -10px;
left: 20px;
font-size: 60px;
color: #4ade80;
opacity: 0.3;
font-family: Georgia, serif;
}

/* CTA Button */
.cs-story-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
color: #0a0a0a;
padding: 18px 40px;
font-size: 17px;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px
rgba(74, 222, 128, 0.4);
}

.cs-story-cta:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px
rgba(74, 222, 128, 0.6);
}

/* Animations - Prefixed with 'cs' */
@keyframes csFadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes csSlideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes csSlideInRight {
from {
opacity: 0;
transform: translateX(50px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

/* Mobile Responsive */
@media (max-width: 768px) {
.cs-section {
padding: 60px 16px;
}

.cs-header {
margin-bottom: 50px;
}

.cs-content {
grid-template-columns: 1fr;
gap: 40px;
}

.cs-video-column {
order: 2;
}

.cs-story-column {
order: 1;
}

.cs-story-header {
flex-direction: column;
text-align: center;
}

.cs-avatar {
width: 70px;
height: 70px;
font-size: 32px;
}

.cs-results-box {
padding: 20px;
}

.cs-result-value {
font-size: 24px;
}

.cs-story-content {
font-size: 16px;
}

.cs-story-quote {
padding: 20px;
font-size: 16px;
}

.cs-story-cta {
width: 100%;
justify-content: center;
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Testimonials Section */
.testimonials-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0f3460 0%,
#16213e 30%,
#1a1a2e 100%
);
overflow: hidden;
}

/* Background Effects */
.testimonials-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
background-image: radial-gradient(
circle at 20% 50%,
rgba(100, 255, 218, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(79, 172, 254, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 50% 20%,
rgba(240, 147, 251, 0.1) 0%,
transparent 50%
);
}

/* Container */
.testimonials-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.testimonials-header {
text-align: center;
margin-bottom: 80px;
animation: testFadeInDown 0.8s ease-out;
}

.testimonials-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 215, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.testimonials-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 215, 0, 0.3),
transparent
);
animation: goldShine 3s infinite;
}

@keyframes goldShine {
to {
left: 100%;
}
}

.badge-icon {
font-size: 20px;
animation: starPulse 2s ease-in-out
infinite;
}

@keyframes starPulse {
0%,
100% {
transform: scale(1) rotate(0deg);
}

50% {
transform: scale(1.2) rotate(180deg);
}
}

.badge-text {
color: #ffd700;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.testimonials-title {
font-size: clamp(32px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.title-highlight {
background: linear-gradient(
135deg,
#ffd700 0%,
#ffed4e 50%,
#ffd700 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: goldShimmer 3s linear infinite;
}

@keyframes goldShimmer {
to {
background-position: 200% center;
}
}

.testimonials-subtitle {
font-size: clamp(18px, 2.5vw, 26px);
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
max-width: 800px;
margin: 0 auto;
line-height: 1.5;
}

/* Stats Bar */
.stats-bar {
display: flex;
justify-content: center;
gap: 60px;
margin: 40px 0 60px;
flex-wrap: wrap;
animation: statsFadeIn 0.8s ease-out 0.3s
backwards;
}

@keyframes statsFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

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

.stat-value {
font-size: clamp(32px, 4vw, 48px);
font-weight: 900;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}

.stat-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}

/* Grid Layout */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(320px, 1fr)
);
gap: 24px;
animation: gridFadeIn 0.8s ease-out 0.5s
backwards;
}

@keyframes gridFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}

to {
opacity: 1;
transform: scale(1);
}
}

/* Testimonial Card */
.testimonial-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
animation: cardEntry 0.6s ease-out
backwards;
}

.testimonial-card:nth-child(1) {
animation-delay: 0.1s;
}

.testimonial-card:nth-child(2) {
animation-delay: 0.12s;
}

.testimonial-card:nth-child(3) {
animation-delay: 0.14s;
}

.testimonial-card:nth-child(4) {
animation-delay: 0.16s;
}

.testimonial-card:nth-child(5) {
animation-delay: 0.18s;
}

.testimonial-card:nth-child(6) {
animation-delay: 0.2s;
}

.testimonial-card:nth-child(7) {
animation-delay: 0.22s;
}

.testimonial-card:nth-child(8) {
animation-delay: 0.24s;
}

.testimonial-card:nth-child(9) {
animation-delay: 0.26s;
}

.testimonial-card:nth-child(10) {
animation-delay: 0.28s;
}

.testimonial-card:nth-child(11) {
animation-delay: 0.3s;
}

.testimonial-card:nth-child(12) {
animation-delay: 0.32s;
}

.testimonial-card:nth-child(13) {
animation-delay: 0.34s;
}

.testimonial-card:nth-child(14) {
animation-delay: 0.36s;
}

.testimonial-card:nth-child(15) {
animation-delay: 0.38s;
}

.testimonial-card:nth-child(16) {
animation-delay: 0.4s;
}

.testimonial-card:nth-child(17) {
animation-delay: 0.42s;
}

.testimonial-card:nth-child(18) {
animation-delay: 0.44s;
}

.testimonial-card:nth-child(19) {
animation-delay: 0.46s;
}

@keyframes cardEntry {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.testimonial-card:hover {
transform: translateY(-10px);
border-color: rgba(100, 255, 218, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Video Thumbnail */
.video-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(
135deg,
#1a1a2e 0%,
#0f3460 100%
);
overflow: hidden;
}

.testimonial-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}

.testimonial-card:hover .video-overlay {
background: rgba(0, 0, 0, 0.1);
}

.play-btn-wrapper {
position: relative;
z-index: 2;
}

.play-btn {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
cursor: pointer;
}

.testimonial-card:hover .play-btn {
transform: scale(1.15);
background: #fff;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.play-icon {
width: 0;
height: 0;
border-left: 22px solid #0a0a0a;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
margin-left: 4px;
}

/* Success Badge */
.success-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(
135deg,
#ffd700 0%,
#ffed4e 100%
);
color: #0a0a0a;
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 5px 15px
rgba(255, 215, 0, 0.4);
z-index: 3;
}

/* Card Content */
.card-content {
padding: 24px;
}

.person-info {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}

.person-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #0a0a0a;
flex-shrink: 0;
}

.person-details {
flex: 1;
}

.person-name {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 2px;
text-transform: capitalize;
}

.person-location {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
gap: 4px;
}

.result-summary {
background: rgba(100, 255, 218, 0.05);
border: 1px solid rgba(100, 255, 218, 0.1);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}

.result-amount {
font-size: 28px;
font-weight: 800;
background: linear-gradient(
135deg,
#64ffda 0%,
#4facfe 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 4px;
}

.result-timeframe {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}

.testimonial-excerpt {
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
font-style: italic;
}

/* Video Modal */
.video-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}

.video-modal.active {
display: flex;
}

.modal-content {
position: relative;
max-width: 1000px;
width: 100%;
background: #000;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.modal-video {
width: 100%;
display: block;
}

.close-modal {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}

.close-modal:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}

.close-modal::before,
.close-modal::after {
content: "";
position: absolute;
width: 20px;
height: 2px;
background: #fff;
}

.close-modal::before {
transform: rotate(45deg);
}

.close-modal::after {
transform: rotate(-45deg);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.testimonials-grid {
grid-template-columns: repeat(
auto-fit,
minmax(300px, 1fr)
);
gap: 20px;
}

.stats-bar {
gap: 40px;
}
}

@media (max-width: 768px) {
.testimonials-section {
padding: 60px 16px;
}

.testimonials-header {
margin-bottom: 50px;
}

.stats-bar {
gap: 30px;
margin: 30px 0 40px;
}

.testimonials-grid {
grid-template-columns: 1fr;
gap: 16px;
}

.stat-block {
min-width: 100px;
}
}

@media (max-width: 480px) {
.testimonials-title {
margin-bottom: 16px;
}

.card-content {
padding: 20px;
}

.person-avatar {
width: 40px;
height: 40px;
font-size: 18px;
}

.person-name {
font-size: 16px;
}

.result-amount {
font-size: 24px;
}

.testimonial-excerpt {
font-size: 14px;
}

.play-btn {
width: 60px;
height: 60px;
}

.play-icon {
border-left-width: 18px;
border-top-width: 12px;
border-bottom-width: 12px;
}
}

@keyframes testFadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Revenue Section */
.revenue-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#1a1a2e 0%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Elements */
.revenue-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Money Particles */
.money-particle {
position: absolute;
color: #64ffda;
font-size: 24px;
opacity: 0.1;
animation: floatUp 15s linear infinite;
}

.money-particle:nth-child(1) {
left: 10%;
animation-delay: 0s;
}

.money-particle:nth-child(2) {
left: 20%;
animation-delay: 2s;
}

.money-particle:nth-child(3) {
left: 30%;
animation-delay: 4s;
}

.money-particle:nth-child(4) {
left: 40%;
animation-delay: 1s;
}

.money-particle:nth-child(5) {
left: 50%;
animation-delay: 3s;
}

.money-particle:nth-child(6) {
left: 60%;
animation-delay: 5s;
}

.money-particle:nth-child(7) {
left: 70%;
animation-delay: 2.5s;
}

.money-particle:nth-child(8) {
left: 80%;
animation-delay: 4.5s;
}

.money-particle:nth-child(9) {
left: 90%;
animation-delay: 1.5s;
}

@keyframes floatUp {
0% {
transform: translateY(100vh)
rotate(0deg);
opacity: 0;
}

10% {
opacity: 0.1;
}

90% {
opacity: 0.1;
}

100% {
transform: translateY(-100vh)
rotate(360deg);
opacity: 0;
}
}

/* Container */
.revenue-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.revenue-header {
text-align: center;
margin-bottom: 80px;
animation: revFadeIn 0.8s ease-out;
}

.revenue-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(255, 215, 0, 0.1) 0%,
rgba(100, 255, 218, 0.1) 100%
);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.revenue-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 215, 0, 0.3),
transparent
);
animation: moneyShine 3s infinite;
}

@keyframes moneyShine {
to {
left: 100%;
}
}

.revenue-badge-icon {
font-size: 20px;
animation: coinFlip 2s ease-in-out
infinite;
}

@keyframes coinFlip {
0%,
100% {
transform: rotateY(0deg);
}

50% {
transform: rotateY(180deg);
}
}

.revenue-badge-text {
color: #ffd700;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.revenue-title {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.revenue-highlight {
background: linear-gradient(
135deg,
#ffd700 0%,
#64ffda 50%,
#ffd700 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: revenueShimmer 3s linear
infinite;
}

@keyframes revenueShimmer {
to {
background-position: 200% center;
}
}

.revenue-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.5;
}

/* Revenue Calculator */
.revenue-calculator {
background: rgba(100, 255, 218, 0.05);
border: 1px solid rgba(100, 255, 218, 0.2);
border-radius: 20px;
padding: 30px;
margin-bottom: 60px;
text-align: center;
animation: calcFadeIn 0.8s ease-out 0.3s
backwards;
}

.calc-title {
font-size: 20px;
color: #64ffda;
margin-bottom: 20px;
font-weight: 600;
}

.calc-display {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.calc-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
}

.calc-number {
font-size: 32px;
font-weight: 800;
color: #ffd700;
}

.calc-result {
font-size: 42px;
font-weight: 900;
background: linear-gradient(
135deg,
#ffd700 0%,
#64ffda 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 20px;
}

/* Feature Cards */
.feature-cards {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(350px, 1fr)
);
gap: 30px;
margin-bottom: 60px;
}

.feature-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
animation: cardFadeIn 0.6s ease-out
backwards;
}

.feature-card:nth-child(1) {
animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
animation-delay: 0.3s;
}

.feature-card:hover {
transform: translateY(-5px);
border-color: rgba(100, 255, 218, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Card Header */
.card-header {
padding: 30px 30px 20px;
position: relative;
z-index: 2;
}

.card-icon {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
#ffd700 0%,
#64ffda 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 20px;
box-shadow: 0 10px 20px
rgba(255, 215, 0, 0.2);
}

.card-title {
font-size: 24px;
font-weight: 800;
color: #fff;
margin-bottom: 12px;
}

.card-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
margin-bottom: 20px;
}

/* Benefit Pills */
.benefit-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.benefit-pill {
background: rgba(100, 255, 218, 0.1);
border: 1px solid rgba(100, 255, 218, 0.2);
border-radius: 20px;
padding: 6px 16px;
font-size: 13px;
color: #64ffda;
font-weight: 600;
}

/* Card Content */
.card-content {
padding: 0 30px 30px;
}

.gif-placeholder,
.video-container {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(
135deg,
rgba(100, 255, 218, 0.1) 0%,
rgba(255, 215, 0, 0.1) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
}

.gif-placeholder::before,
.video-container::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transition: left 0.5s;
}

.gif-placeholder:hover,
.video-container:hover {
border-color: rgba(100, 255, 218, 0.3);
color: rgba(255, 255, 255, 0.6);
}

.gif-placeholder:hover::before,
.video-container:hover::before {
left: 100%;
}

.feature-list {
list-style: none;
}

.feature-list li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
line-height: 1.6;
}

.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #64ffda;
font-weight: bold;
font-size: 18px;
}

/* Revenue Stream Visual */
.revenue-stream {
text-align: center;
margin-top: 60px;
padding: 40px;
background: rgba(255, 215, 0, 0.02);
border-radius: 24px;
border: 1px solid rgba(255, 215, 0, 0.1);
animation: streamFadeIn 0.8s ease-out 0.5s
backwards;
}

.stream-title {
font-size: 28px;
font-weight: 800;
color: #fff;
margin-bottom: 30px;
}

.stream-flow {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}

.stream-item {
text-align: center;
}

.stream-number {
font-size: 48px;
font-weight: 900;
background: linear-gradient(
135deg,
#ffd700 0%,
#64ffda 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}

.stream-label {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
}

.stream-arrow {
font-size: 32px;
color: #64ffda;
animation: arrowPulse 1.5s ease-in-out
infinite;
}

@keyframes arrowPulse {
0%,
100% {
transform: translateX(0);
}

50% {
transform: translateX(10px);
}
}

/* Animations */
@keyframes revFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes calcFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}

to {
opacity: 1;
transform: scale(1);
}
}

@keyframes cardFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes streamFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Mobile Responsive */
@media (max-width: 768px) {
.revenue-section {
padding: 60px 16px;
}

.revenue-header {
margin-bottom: 50px;
}

.revenue-calculator {
padding: 20px;
}

.calc-display {
flex-direction: column;
gap: 15px;
}

.calc-item {
font-size: 16px;
}

.calc-number {
font-size: 24px;
}

.calc-result {
font-size: 32px;
}

.feature-cards {
grid-template-columns: 1fr;
gap: 20px;
}

.card-header {
padding: 24px 24px 16px;
}

.card-content {
padding: 0 24px 24px;
}

.stream-flow {
flex-direction: column;
}

.stream-arrow {
transform: rotate(90deg);
}

@keyframes arrowPulse {
0%,
100% {
transform: translateY(0) rotate(90deg);
}

50% {
transform: translateY(10px)
rotate(90deg);
}
}
}

@media (max-width: 480px) {
.revenue-title {
margin-bottom: 16px;
}

.card-title {
font-size: 20px;
}

.card-subtitle {
font-size: 14px;
}

.benefit-pill {
font-size: 12px;
padding: 4px 12px;
}

.stream-number {
font-size: 36px;
}

.gif-placeholder {
font-size: 14px;
}
}




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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* AI Army Section */
.ai-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a0033 50%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Elements */
.ai-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Neural Network Animation */
.neural-network {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.05;
}

.neural-line {
position: absolute;
height: 1px;
background: linear-gradient(
90deg,
transparent,
#64ffda,
transparent
);
animation: neuralPulse 3s linear infinite;
}

.neural-line:nth-child(1) {
top: 20%;
left: -100%;
width: 200%;
animation-delay: 0s;
}

.neural-line:nth-child(2) {
top: 40%;
left: -100%;
width: 200%;
animation-delay: 0.5s;
}

.neural-line:nth-child(3) {
top: 60%;
left: -100%;
width: 200%;
animation-delay: 1s;
}

.neural-line:nth-child(4) {
top: 80%;
left: -100%;
width: 200%;
animation-delay: 1.5s;
}

@keyframes neuralPulse {
to {
transform: translateX(50%);
}
}

/* Floating Dots */
.ai-dot {
position: absolute;
width: 6px;
height: 6px;
background: #64ffda;
border-radius: 50%;
opacity: 0;
animation: dotFloat 4s ease-in-out
infinite;
}

.ai-dot:nth-child(5) {
top: 10%;
left: 20%;
animation-delay: 0s;
}

.ai-dot:nth-child(6) {
top: 30%;
left: 80%;
animation-delay: 1s;
}

.ai-dot:nth-child(7) {
top: 50%;
left: 50%;
animation-delay: 2s;
}

.ai-dot:nth-child(8) {
top: 70%;
left: 30%;
animation-delay: 3s;
}

.ai-dot:nth-child(9) {
top: 90%;
left: 70%;
animation-delay: 4s;
}

@keyframes dotFloat {
0%,
100% {
opacity: 0;
transform: scale(0);
}

50% {
opacity: 0.6;
transform: scale(1);
}
}

/* Container */
.ai-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.ai-header {
text-align: center;
margin-bottom: 80px;
animation: aiFadeIn 0.8s ease-out;
}

.ai-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(147, 51, 234, 0.1) 0%,
rgba(100, 255, 218, 0.1) 100%
);
backdrop-filter: blur(10px);
border: 1px solid rgba(147, 51, 234, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.ai-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(147, 51, 234, 0.3),
transparent
);
animation: purpleShine 3s infinite;
}

@keyframes purpleShine {
to {
left: 100%;
}
}

.ai-badge-icon {
font-size: 20px;
animation: robotPulse 2s ease-in-out
infinite;
}

@keyframes robotPulse {
0%,
100% {
transform: scale(1);
}

50% {
transform: scale(1.2);
}
}

.ai-badge-text {
color: #9333ea;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.ai-title {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.ai-highlight {
background: linear-gradient(
135deg,
#9333ea 0%,
#64ffda 50%,
#9333ea 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: aiShimmer 3s linear infinite;
}

@keyframes aiShimmer {
to {
background-position: 200% center;
}
}

.ai-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
max-width: 800px;
margin: 0 auto;
line-height: 1.5;
}

/* Stats Row */
.ai-stats {
display: flex;
justify-content: center;
gap: 60px;
margin: 50px 0 80px;
flex-wrap: wrap;
animation: statsFadeIn 0.8s ease-out 0.3s
backwards;
}

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

.stat-number {
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
background: linear-gradient(
135deg,
#9333ea 0%,
#64ffda 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}

.stat-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}

/* Main Content Split */
.ai-split {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(500px, 1fr)
);
gap: 40px;
margin-bottom: 80px;
}

/* AI Service Card */
.ai-service {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 32px;
padding: 50px;
position: relative;
overflow: hidden;
animation: serviceFadeIn 0.8s ease-out
backwards;
transition: all 0.3s ease;
}

.ai-service:first-child {
animation-delay: 0.2s;
}

.ai-service:last-child {
animation-delay: 0.4s;
}

.ai-service:hover {
transform: translateY(-5px);
border-color: rgba(147, 51, 234, 0.3);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

/* Service Glow */
.service-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(147, 51, 234, 0.1) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

.ai-service:hover .service-glow {
opacity: 1;
}

/* Service Header */
.service-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}

.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(
135deg,
#9333ea 0%,
#64ffda 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
flex-shrink: 0;
box-shadow: 0 15px 30px
rgba(147, 51, 234, 0.3);
}

.service-meta {
flex: 1;
}

.service-title {
font-size: 28px;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
}

.service-tagline {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
}

/* Key Metric */
.key-metric {
background: rgba(147, 51, 234, 0.1);
border: 1px solid rgba(147, 51, 234, 0.2);
border-radius: 20px;
padding: 24px;
margin-bottom: 30px;
text-align: center;
}

.metric-value {
font-size: 48px;
font-weight: 900;
background: linear-gradient(
135deg,
#9333ea 0%,
#64ffda 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}

.metric-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
}

/* Feature Grid */
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}

.feature-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid
rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 20px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.feature-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(147, 51, 234, 0.2);
}

.feature-icon {
width: 40px;
height: 40px;
background: rgba(147, 51, 234, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}

.feature-title {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}

.feature-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}

/* Results List */
.results-list {
list-style: none;
}

.results-list li {
position: relative;
padding-left: 30px;
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 1.6;
}

.results-list li::before {
content: "→";
position: absolute;
left: 0;
color: #64ffda;
font-weight: bold;
font-size: 20px;
}

/* Call to Action Button */
.service-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
#9333ea 0%,
#64ffda 100%
);
color: #fff;
padding: 16px 32px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px
rgba(147, 51, 234, 0.3);
cursor: pointer;
}

.service-cta:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px
rgba(147, 51, 234, 0.5);
}

/* Bottom CTA */
.ai-bottom-cta {
text-align: center;
margin-top: 60px;
animation: bottomCtaFadeIn 0.8s ease-out
0.6s backwards;
}

.bottom-cta-title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
}

.bottom-cta-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}

.bottom-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#9333ea 0%,
#64ffda 100%
);
color: #fff;
padding: 24px 60px;
font-size: 20px;
font-weight: 800;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(147, 51, 234, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}

.bottom-cta-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 50px
rgba(147, 51, 234, 0.6);
}

/* Video Modal Styles */
.video-container {
background: rgba(147, 51, 234, 0.1);
border: 1px solid rgba(147, 51, 234, 0.3);
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
position: relative;
}

.demo-video {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}

/* Animations */
@keyframes aiFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes statsFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}

to {
opacity: 1;
transform: scale(1);
}
}

@keyframes serviceFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes bottomCtaFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.ai-split {
grid-template-columns: 1fr;
gap: 30px;
}

.ai-service {
padding: 40px;
}
}

@media (max-width: 768px) {
.ai-section {
padding: 60px 16px;
}

.ai-header {
margin-bottom: 50px;
}

.ai-stats {
gap: 40px;
margin: 40px 0 60px;
}

.feature-grid {
grid-template-columns: 1fr;
gap: 16px;
}

.service-header {
flex-direction: column;
text-align: center;
}

.service-icon {
width: 70px;
height: 70px;
font-size: 32px;
}

.service-title {
font-size: 24px;
}

.metric-value {
font-size: 36px;
}

.ai-service {
padding: 30px 20px;
border-radius: 20px;
}

.bottom-cta-button {
padding: 20px 40px;
font-size: 16px;
}
}

@media (max-width: 480px) {
.stat-number {
font-size: 32px;
}

.feature-item {
padding: 16px;
}

.feature-title {
font-size: 16px;
}

.feature-desc {
font-size: 13px;
}

.bottom-cta-title {
font-size: 24px;
}

.bottom-cta-subtitle {
font-size: 16px;
}
}


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

html {
background: #0a0a0a;
}

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
color: #fff;
margin: 0;
}

/* Pricing Section */
.pricing-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a0033 25%,
#330033 50%,
#1a0033 75%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Effects */
.pricing-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Explosive Particles */
.explosion-particle {
position: absolute;
width: 4px;
height: 4px;
background: #ffd700;
border-radius: 50%;
opacity: 0;
}

@keyframes explode {
0% {
opacity: 0;
transform: translate(0, 0) scale(0);
}

20% {
opacity: 1;
transform: translate(var(--x), var(--y))
scale(1);
}

100% {
opacity: 0;
transform: translate(
calc(var(--x) * 3),
calc(var(--y) * 3)
)
scale(0);
}
}

.explosion-particle:nth-child(1) {
--x: -50px;
--y: -50px;
animation: explode 3s infinite;
}

.explosion-particle:nth-child(2) {
--x: 50px;
--y: -50px;
animation: explode 3s infinite 0.2s;
}

.explosion-particle:nth-child(3) {
--x: -50px;
--y: 50px;
animation: explode 3s infinite 0.4s;
}

.explosion-particle:nth-child(4) {
--x: 50px;
--y: 50px;
animation: explode 3s infinite 0.6s;
}

.explosion-particle:nth-child(5) {
--x: 0;
--y: -70px;
animation: explode 3s infinite 0.8s;
}

.explosion-particle:nth-child(6) {
--x: -70px;
--y: 0;
animation: explode 3s infinite 1s;
}

.explosion-particle:nth-child(7) {
--x: 70px;
--y: 0;
animation: explode 3s infinite 1.2s;
}

.explosion-particle:nth-child(8) {
--x: 0;
--y: 70px;
animation: explode 3s infinite 1.4s;
}

/* Value Stack Glow */
.value-glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.2) 0%,
transparent 60%
);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: glowPulse 3s ease-in-out
infinite;
}

@keyframes glowPulse {
0%,
100% {
opacity: 0.3;
transform: translate(-50%, -50%)
scale(1);
}

50% {
opacity: 0.6;
transform: translate(-50%, -50%)
scale(1.2);
}
}

/* Container */
.pricing-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.pricing-header {
text-align: center;
margin-bottom: 60px;
animation: priceFadeIn 0.8s ease-out;
}

.pricing-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(255, 0, 0, 0.2) 0%,
rgba(255, 215, 0, 0.2) 100%
);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 0, 0, 0.3);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
animation: badgePulse 2s ease-in-out
infinite;
}

@keyframes badgePulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 20px
rgba(255, 0, 0, 0.3);
}

50% {
transform: scale(1.05);
box-shadow: 0 0 40px
rgba(255, 0, 0, 0.5);
}
}

.pricing-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 215, 0, 0.4),
transparent
);
animation: urgentShine 2s infinite;
}

@keyframes urgentShine {
to {
left: 100%;
}
}

.pricing-badge-icon {
font-size: 20px;
animation: alarmBell 0.5s ease-in-out
infinite alternate;
}

@keyframes alarmBell {
0% {
transform: rotate(-10deg);
}

100% {
transform: rotate(10deg);
}
}

.pricing-badge-text {
color: #ff4444;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.pricing-title {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.pricing-highlight {
background: linear-gradient(
135deg,
#ff4444 0%,
#ffd700 50%,
#ff4444 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: urgentShimmer 2s linear
infinite;
}

@keyframes urgentShimmer {
to {
background-position: 200% center;
}
}

.pricing-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
max-width: 800px;
margin: 0 auto;
line-height: 1.5;
}

/* Offer Stack Container */
.offer-stack-container {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: start;
margin-bottom: 60px;
}

/* Value Stack */
.value-stack {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 32px;
padding: 40px;
position: relative;
overflow: hidden;
animation: stackSlideIn 0.8s ease-out 0.3s
backwards;
}

@keyframes stackSlideIn {
from {
opacity: 0;
transform: translateX(-50px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

.stack-title {
font-size: 24px;
font-weight: 800;
color: #fff;
margin-bottom: 30px;
text-align: center;
}

/* Value Items */
.value-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
margin-bottom: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid
rgba(255, 255, 255, 0.05);
border-radius: 16px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
animation: itemFadeIn 0.5s ease-out
backwards;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

.value-item:nth-child(2) {
animation-delay: 0.1s;
}

.value-item:nth-child(3) {
animation-delay: 0.2s;
}

.value-item:nth-child(4) {
animation-delay: 0.3s;
}

.value-item:nth-child(5) {
animation-delay: 0.4s;
}

.value-item:nth-child(6) {
animation-delay: 0.5s;
}

.value-item:nth-child(7) {
animation-delay: 0.6s;
}

.value-item:nth-child(8) {
animation-delay: 0.7s;
}

.value-item:nth-child(9) {
animation-delay: 0.8s;
}

.value-item:nth-child(10) {
animation-delay: 0.9s;
}

@keyframes itemFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.value-item:hover {
transform: translateX(10px);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 215, 0, 0.2);
}

.value-icon {
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}

.value-content {
flex: 1;
}

.value-name {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}

.value-description {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.4;
}

.value-price {
font-size: 20px;
font-weight: 800;
color: #ffd700;
white-space: nowrap;
}

/* Total Value */
.total-value {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid
rgba(255, 215, 0, 0.3);
text-align: center;
}

.total-label {
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
}

.total-amount {
font-size: 48px;
font-weight: 900;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: line-through;
text-decoration-color: rgba(
255,
255,
255,
0.3
);
text-decoration-thickness: 3px;
}

/* Pricing Card */
.pricing-card {
background: linear-gradient(
135deg,
rgba(255, 215, 0, 0.1) 0%,
rgba(255, 107, 107, 0.1) 100%
);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 32px;
padding: 50px 40px;
position: relative;
overflow: hidden;
animation: cardBounceIn 0.8s ease-out 0.5s
backwards;
box-shadow: 0 30px 60px
rgba(255, 215, 0, 0.2);
}

@keyframes cardBounceIn {
from {
opacity: 0;
transform: scale(0.8) translateY(50px);
}

to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.pricing-card::before {
content: "LIMITED TIME";
position: absolute;
top: 30px;
right: -35px;
background: #ff4444;
color: #fff;
padding: 8px 50px;
font-size: 12px;
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 5px 15px
rgba(255, 68, 68, 0.5);
}

.price-container {
text-align: center;
margin-bottom: 30px;
}

.price-label {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
}

.price-amount {
font-size: 72px;
font-weight: 900;
color: #fff;
line-height: 1;
margin-bottom: 10px;
position: relative;
display: inline-block;
}

.price-currency {
font-size: 36px;
vertical-align: top;
}

.price-period {
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
}

.savings-badge {
display: inline-block;
background: #4ade80;
color: #000;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
margin-top: 10px;
animation: savingsPulse 2s ease-in-out
infinite;
}

@keyframes savingsPulse {
0%,
100% {
transform: scale(1);
}

50% {
transform: scale(1.05);
}
}

/* CTA Button */
.cta-container {
text-align: center;
margin-top: 30px;
}

.cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
color: #000;
padding: 24px 60px;
font-size: 22px;
font-weight: 900;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(255, 215, 0, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
animation: ctaPulse 1.5s ease-in-out
infinite;
}

@keyframes ctaPulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 15px 40px
rgba(255, 215, 0, 0.4);
}

50% {
transform: scale(1.05);
box-shadow: 0 20px 50px
rgba(255, 215, 0, 0.6);
}
}

.cta-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.5s;
}

.cta-button:hover {
transform: translateY(-3px) scale(1.02);
}

.cta-button:hover::before {
left: 100%;
}

.cta-subtext {
margin-top: 16px;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}

/* Guarantee */
.guarantee-section {
text-align: center;
margin-top: 60px;
padding: 40px;
background: rgba(255, 255, 255, 0.02);
border-radius: 24px;
animation: guaranteeFadeIn 0.8s ease-out
0.7s backwards;
}

@keyframes guaranteeFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.guarantee-icon {
font-size: 60px;
margin-bottom: 20px;
}

.guarantee-title {
font-size: 28px;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}

.guarantee-text {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

/* Urgency Timer */
.urgency-timer {
position: fixed;
bottom: 20px;
right: 20px;
background: #ff4444;
color: #fff;
padding: 16px 24px;
border-radius: 12px;
font-weight: 700;
box-shadow: 0 10px 30px
rgba(255, 68, 68, 0.5);
z-index: 100;
animation: timerSlideIn 0.5s ease-out;
}

@keyframes timerSlideIn {
from {
transform: translateX(100%);
}

to {
transform: translateX(0);
}
}

/* Ensure dark theme on all devices */
@supports (-webkit-touch-callout: none) {
/* iOS specific fixes */
.value-item {
background-color: rgba(
26,
26,
46,
0.95
) !important;
-webkit-backdrop-filter: blur(10px);
}

.value-stack {
background-color: rgba(
10,
10,
10,
0.95
) !important;
}
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.offer-stack-container {
grid-template-columns: 1fr;
gap: 40px;
}

.pricing-card {
order: -1;
}
}

@media (max-width: 768px) {
.pricing-section {
padding: 60px 16px;
}

.value-stack {
padding: 30px 20px;
}

.value-item {
flex-direction: column;
text-align: center;
padding: 20px;
background: rgba(
255,
255,
255,
0.03
) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

.price-amount {
font-size: 56px;
}

.total-amount {
font-size: 36px;
}

.cta-button {
padding: 20px 40px;
font-size: 18px;
}

.urgency-timer {
bottom: 10px;
right: 10px;
left: 10px;
text-align: center;
}
}

@media (max-width: 480px) {
.pricing-title {
margin-bottom: 16px;
}

.value-name {
font-size: 16px;
}

.value-price {
font-size: 18px;
}

.guarantee-title {
font-size: 24px;
}
}

@keyframes priceFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
color: #fff;
}

/* Simple checkout header */
.checkout-header {
background: #0a0a0a;
padding: 60px 20px;
text-align: center;
}

/* Small inline badge */
.secure-badge {
display: inline-block;
font-size: 14px;
color: #ffd700;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 30px;
}

/* Main title */
.checkout-title {
font-size: 42px;
font-weight: 900;
line-height: 1.2;
margin-bottom: 20px;
}

.gradient-text {
background: linear-gradient(
135deg,
#ffd700 0%,
#64ffda 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* Subtitle */
.checkout-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
max-width: 600px;
margin: 0 auto 40px;
}

/* Trust points */
.trust-points {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}

.trust-point {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}

.check {
color: #64ffda;
margin-right: 5px;
}

/* Timer */
.timer-box {
background: rgba(255, 68, 68, 0.1);
border: 1px solid rgba(255, 68, 68, 0.3);
display: inline-block;
padding: 16px 32px;
border-radius: 8px;
margin-bottom: 40px;
}

.timer-text {
color: #ff6b6b;
font-size: 14px;
font-weight: 600;
}

.timer {
color: #ffd700;
font-size: 18px;
font-weight: 700;
margin-left: 10px;
}

/* Security row */
.security-row {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 40px;
}

.security-item {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}

/* Arrow */
.arrow {
font-size: 30px;
color: #64ffda;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(10px);
}
}

/* Mobile */
@media (max-width: 768px) {
.checkout-title {
font-size: 28px;
}

.checkout-subtitle {
font-size: 16px;
}

.trust-points {
flex-direction: column;
gap: 10px;
}

.security-row {
flex-direction: column;
gap: 10px;
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Integration Section */
.integration-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#001a33 30%,
#003366 50%,
#001a33 70%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Network */
.network-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Connection Lines */
.connection-line {
position: absolute;
height: 1px;
background: linear-gradient(
90deg,
transparent,
#4a9eff,
transparent
);
opacity: 0.2;
animation: connectionPulse 4s linear
infinite;
}

.connection-line:nth-child(1) {
top: 20%;
left: -100%;
width: 200%;
animation-delay: 0s;
}

.connection-line:nth-child(2) {
top: 40%;
left: -100%;
width: 200%;
animation-delay: 1s;
}

.connection-line:nth-child(3) {
top: 60%;
left: -100%;
width: 200%;
animation-delay: 2s;
}

.connection-line:nth-child(4) {
top: 80%;
left: -100%;
width: 200%;
animation-delay: 3s;
}

@keyframes connectionPulse {
to {
transform: translateX(50%);
}
}

/* Data Nodes */
.data-node {
position: absolute;
width: 8px;
height: 8px;
background: #4a9eff;
border-radius: 50%;
opacity: 0;
animation: nodeFlow 6s linear infinite;
}

.data-node:nth-child(5) {
top: 15%;
left: 10%;
animation-delay: 0s;
}

.data-node:nth-child(6) {
top: 25%;
left: 90%;
animation-delay: 1s;
}

.data-node:nth-child(7) {
top: 45%;
left: 5%;
animation-delay: 2s;
}

.data-node:nth-child(8) {
top: 65%;
left: 95%;
animation-delay: 3s;
}

.data-node:nth-child(9) {
top: 85%;
left: 15%;
animation-delay: 4s;
}

.data-node:nth-child(10) {
top: 75%;
left: 85%;
animation-delay: 5s;
}

@keyframes nodeFlow {
0%,
100% {
opacity: 0;
transform: scale(0);
}

20%,
80% {
opacity: 0.8;
transform: scale(1);
}

50% {
opacity: 1;
transform: scale(1.5);
}
}

@keyframes glowPulse {
0%,
100% {
opacity: 0.3;
transform: translate(-50%, -50%)
scale(1);
}

50% {
opacity: 0.6;
transform: translate(-50%, -50%)
scale(1.2);
}
}

/* Value Stack Glow */
.value-glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(
circle,
rgba(74, 158, 255, 0.2) 0%,
transparent 60%
);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: glowPulse 3s ease-in-out
infinite;
}

/* Container */
.integration-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.integration-header {
text-align: center;
margin-bottom: 80px;
animation: intFadeIn 0.8s ease-out;
}

.integration-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(74, 158, 255, 0.1) 0%,
rgba(100, 255, 218, 0.1) 100%
);
backdrop-filter: blur(10px);
border: 1px solid rgba(74, 158, 255, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.integration-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(74, 158, 255, 0.3),
transparent
);
animation: techShine 3s infinite;
}

@keyframes techShine {
to {
left: 100%;
}
}

.integration-badge-icon {
font-size: 20px;
animation: linkRotate 3s ease-in-out
infinite;
}

@keyframes linkRotate {
0%,
100% {
transform: rotate(0deg);
}

50% {
transform: rotate(180deg);
}
}

.integration-badge-text {
color: #4a9eff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.integration-title {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.integration-highlight {
background: linear-gradient(
135deg,
#4a9eff 0%,
#64ffda 50%,
#4a9eff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: intShimmer 3s linear infinite;
}

@keyframes intShimmer {
to {
background-position: 200% center;
}
}

.integration-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
max-width: 800px;
margin: 0 auto;
line-height: 1.5;
}

/* Central Hub Visual */
.hub-container {
position: relative;
max-width: 900px;
margin: 0 auto 80px;
padding: 60px 20px;
animation: hubFadeIn 0.8s ease-out 0.3s
backwards;
}

@keyframes hubFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}

to {
opacity: 1;
transform: scale(1);
}
}

/* Central Hub */
.central-hub {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(
135deg,
#1a1a2e 0%,
#003366 100%
);
border: 3px solid rgba(74, 158, 255, 0.3);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 50px
rgba(74, 158, 255, 0.3);
z-index: 10;
animation: hubPulse 3s ease-in-out
infinite;
}

@keyframes hubPulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 20px 50px
rgba(74, 158, 255, 0.3);
}

50% {
transform: scale(1.05);
box-shadow: 0 30px 70px
rgba(74, 158, 255, 0.5);
}
}

.hub-logo {
font-size: 32px;
color: #fff;
}

/* Orbiting Integrations */
.orbit-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
animation: orbitRotate 30s linear infinite;
}

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

.integration-node {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
animation: counterRotate 30s linear
infinite;
}

@keyframes counterRotate {
to {
transform: rotate(-360deg);
}
}

.integration-node:hover {
transform: scale(1.2) rotate(-360deg);
background: rgba(74, 158, 255, 0.1);
border-color: rgba(74, 158, 255, 0.5);
box-shadow: 0 10px 30px
rgba(74, 158, 255, 0.4);
}

/* Node Positions */
.node1 {
top: -50px;
left: 50%;
transform: translateX(-50%);
}

.node2 {
top: 20%;
right: -50px;
}

.node3 {
bottom: 20%;
right: -50px;
}

.node4 {
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}

.node5 {
bottom: 20%;
left: -50px;
}

.node6 {
top: 20%;
left: -50px;
}

.integration-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
color: #fff;
position: relative;
}

/* Connection Beams */
.connection-beam {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#4a9eff,
transparent
);
transform-origin: left center;
opacity: 0.3;
}

.beam1 {
transform: translate(0, -50%) rotate(0deg);
}

.beam2 {
transform: translate(0, -50%)
rotate(60deg);
}

.beam3 {
transform: translate(0, -50%)
rotate(120deg);
}

.beam4 {
transform: translate(0, -50%)
rotate(180deg);
}

.beam5 {
transform: translate(0, -50%)
rotate(240deg);
}

.beam6 {
transform: translate(0, -50%)
rotate(300deg);
}

/* Feature Grid */
.integration-features {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(350px, 1fr)
);
gap: 30px;
margin-bottom: 60px;
}

.feature-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px;
transition: all 0.3s ease;
animation: featureSlideIn 0.6s ease-out
backwards;
}

.feature-card:nth-child(1) {
animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
animation-delay: 0.3s;
}

@keyframes featureSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.feature-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.03);
border-color: rgba(74, 158, 255, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-icon-wrapper {
width: 70px;
height: 70px;
background: linear-gradient(
135deg,
#4a9eff 0%,
#64ffda 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 24px;
box-shadow: 0 10px 20px
rgba(74, 158, 255, 0.3);
}

.feature-title {
font-size: 24px;
font-weight: 800;
color: #fff;
margin-bottom: 12px;
}

.feature-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin-bottom: 20px;
}

.feature-list {
list-style: none;
}

.feature-list li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
}

.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #64ffda;
font-weight: bold;
font-size: 18px;
}

/* Bottom CTA */
.integration-cta {
text-align: center;
margin-top: 60px;
animation: ctaFadeIn 0.8s ease-out 0.5s
backwards;
}

.cta-title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
}

.cta-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}

.cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#4a9eff 0%,
#64ffda 100%
);
color: #000;
padding: 24px 60px;
font-size: 20px;
font-weight: 800;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(74, 158, 255, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}

.cta-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 50px
rgba(74, 158, 255, 0.6);
}

@keyframes ctaFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Mobile Responsive */
@media (max-width: 768px) {
.integration-section {
padding: 60px 16px;
}

.integration-header {
margin-bottom: 50px;
}

.hub-container {
padding: 40px 20px;
}

.central-hub {
width: 150px;
height: 150px;
}

.hub-logo {
font-size: 36px;
}

.orbit-container {
width: 320px;
height: 320px;
animation: none;
}

.integration-node {
width: 70px;
height: 70px;
animation: none;
}

.integration-icon {
font-size: 20px;
}

.connection-beam {
display: none;
}

.integration-features {
grid-template-columns: 1fr;
}

.cta-button {
padding: 20px 40px;
font-size: 16px;
}
}

@media (max-width: 480px) {
.integration-title {
margin-bottom: 16px;
}

.feature-card {
padding: 30px 20px;
}

.feature-title {
font-size: 20px;
}

.cta-title {
font-size: 24px;
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Comparison Section */
.comparison-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a0a2e 30%,
#16213e 60%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Effects */
.comparison-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Victory Lines */
.victory-line {
position: absolute;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#ffd700,
transparent
);
opacity: 0.3;
animation: victoryPulse 3s linear infinite;
}

.victory-line:nth-child(1) {
top: 20%;
left: -100%;
width: 200%;
animation-delay: 0s;
}

.victory-line:nth-child(2) {
top: 40%;
left: -100%;
width: 200%;
animation-delay: 0.5s;
}

.victory-line:nth-child(3) {
top: 60%;
left: -100%;
width: 200%;
animation-delay: 1s;
}

.victory-line:nth-child(4) {
top: 80%;
left: -100%;
width: 200%;
animation-delay: 1.5s;
}

@keyframes victoryPulse {
to {
transform: translateX(50%);
}
}

/* Container */
.comparison-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.comparison-header {
text-align: center;
margin-bottom: 80px;
animation: compFadeIn 0.8s ease-out;
}

.comparison-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(255, 215, 0, 0.1) 0%,
rgba(147, 51, 234, 0.1) 100%
);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.comparison-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 215, 0, 0.3),
transparent
);
animation: goldShine 3s infinite;
}

@keyframes goldShine {
to {
left: 100%;
}
}

.comparison-badge-icon {
font-size: 20px;
animation: trophyBounce 2s ease-in-out
infinite;
}

@keyframes trophyBounce {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-5px);
}
}

.comparison-badge-text {
color: #ffd700;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.comparison-title {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.comparison-highlight {
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.comparison-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.5;
}

/* Price Killer Badge */
.price-killer {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ff4444;
color: #fff;
padding: 12px 24px;
border-radius: 30px;
font-size: 18px;
font-weight: 700;
margin-bottom: 60px;
animation: pricePulse 2s ease-in-out
infinite;
}

@keyframes pricePulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 10px 30px
rgba(255, 68, 68, 0.3);
}

50% {
transform: scale(1.05);
box-shadow: 0 15px 40px
rgba(255, 68, 68, 0.5);
}
}

/* Comparison Table */
.comparison-table {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 32px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
animation: tableSlideIn 0.8s ease-out 0.3s
backwards;
}

@keyframes tableSlideIn {
from {
opacity: 0;
transform: translateY(50px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* Table Header */
.table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
background: rgba(147, 51, 234, 0.1);
padding: 30px;
border-bottom: 1px solid
rgba(255, 255, 255, 0.1);
}

.header-feature {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}

.header-CallMira {
text-align: center;
font-size: 24px;
font-weight: 800;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}

.header-CallMira::after {
content: "👑";
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
animation: crownFloat 3s ease-in-out
infinite;
}

@keyframes crownFloat {
0%,
100% {
transform: translateX(-50%)
translateY(0);
}

50% {
transform: translateX(-50%)
translateY(-10px);
}
}

.header-others {
text-align: center;
font-size: 18px;
color: rgba(255, 255, 255, 0.4);
}

/* Feature Rows */
.feature-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
padding: 24px 30px;
border-bottom: 1px solid
rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
animation: rowFadeIn 0.5s ease-out
backwards;
}

.feature-row:nth-child(odd) {
background: rgba(255, 255, 255, 0.01);
}

.feature-row:hover {
background: rgba(255, 255, 255, 0.03);
transform: translateX(10px);
}

/* Stagger row animations */
.feature-row:nth-child(1) {
animation-delay: 0.1s;
}

.feature-row:nth-child(2) {
animation-delay: 0.15s;
}

.feature-row:nth-child(3) {
animation-delay: 0.2s;
}

.feature-row:nth-child(4) {
animation-delay: 0.25s;
}

.feature-row:nth-child(5) {
animation-delay: 0.3s;
}

.feature-row:nth-child(6) {
animation-delay: 0.35s;
}

.feature-row:nth-child(7) {
animation-delay: 0.4s;
}

.feature-row:nth-child(8) {
animation-delay: 0.45s;
}

@keyframes rowFadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

.feature-name {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #fff;
}

.feature-icon {
width: 36px;
height: 36px;
background: rgba(255, 215, 0, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}

.feature-benefit {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin-top: 4px;
font-weight: 400;
}

.check-cell {
display: flex;
align-items: center;
justify-content: center;
}

.check-yes {
width: 40px;
height: 40px;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: #000;
box-shadow: 0 5px 15px
rgba(74, 222, 128, 0.4);
animation: checkPop 0.6s ease-out
backwards;
}

.check-no {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: rgba(255, 255, 255, 0.3);
}

@keyframes checkPop {
0% {
transform: scale(0) rotate(-180deg);
}

50% {
transform: scale(1.2) rotate(10deg);
}

100% {
transform: scale(1) rotate(0deg);
}
}

/* Bottom Summary */
.comparison-summary {
text-align: center;
margin-top: 60px;
animation: summaryFadeIn 0.8s ease-out
0.6s backwards;
}

@keyframes summaryFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.summary-title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
}

.summary-list {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 40px;
}

.summary-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
}

.summary-icon {
width: 30px;
height: 30px;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}

.comparison-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
color: #000;
padding: 24px 60px;
font-size: 20px;
font-weight: 800;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(255, 215, 0, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}

.comparison-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 50px
rgba(255, 215, 0, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
.comparison-section {
padding: 60px 16px;
}

.comparison-header {
margin-bottom: 50px;
}

.price-killer {
font-size: 16px;
padding: 10px 20px;
}

.table-header,
.feature-row {
grid-template-columns: 2fr 1fr 1fr;
padding: 20px 16px;
gap: 10px;
}

.header-CallMira,
.header-others {
font-size: 14px;
}

.feature-name {
font-size: 14px;
}

.feature-icon {
width: 28px;
height: 28px;
font-size: 16px;
}

.feature-benefit {
font-size: 12px;
}

.check-yes,
.check-no {
width: 32px;
height: 32px;
font-size: 18px;
}

.summary-list {
flex-direction: column;
gap: 20px;
}

.comparison-cta {
padding: 20px 40px;
font-size: 16px;
}
}

@media (max-width: 480px) {
.comparison-title {
margin-bottom: 16px;
}

.feature-row {
grid-template-columns: 1fr;
gap: 16px;
text-align: center;
}

.feature-name {
justify-content: center;
margin-bottom: 8px;
}

.check-cell {
display: none;
}

.header-CallMira::after,
.header-others {
display: none;
}
}

@keyframes compFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}




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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* YouTube Section */
.youtube-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a0a0a 30%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Elements */
.youtube-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Play Button Particles */
.play-particle {
position: absolute;
width: 40px;
height: 40px;
background: #ff0000;
clip-path: polygon(
20% 30%,
20% 70%,
60% 50%
);
opacity: 0.1;
animation: playFloat 10s linear infinite;
}

.play-particle:nth-child(1) {
top: 10%;
left: 5%;
animation-delay: 0s;
transform: scale(0.6);
}

.play-particle:nth-child(2) {
top: 70%;
left: 10%;
animation-delay: 2s;
transform: scale(0.8);
}

.play-particle:nth-child(3) {
top: 30%;
left: 90%;
animation-delay: 4s;
transform: scale(0.7);
}

.play-particle:nth-child(4) {
top: 80%;
left: 85%;
animation-delay: 6s;
transform: scale(0.5);
}

.play-particle:nth-child(5) {
top: 50%;
left: 50%;
animation-delay: 8s;
transform: scale(0.9);
}

@keyframes playFloat {
0% {
opacity: 0;
transform: translateY(100px)
rotate(0deg);
}

20% {
opacity: 0.1;
}

80% {
opacity: 0.1;
}

100% {
opacity: 0;
transform: translateY(-100px)
rotate(360deg);
}
}

/* Container */
.youtube-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Header */
.youtube-header {
text-align: center;
margin-bottom: 60px;
animation: ytFadeIn 0.8s ease-out;
}

@keyframes ytFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.youtube-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 0, 0, 0.2);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.youtube-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 0, 0, 0.3),
transparent
);
animation: redShine 3s infinite;
}

@keyframes redShine {
to {
left: 100%;
}
}

.youtube-badge-icon {
width: 24px;
height: 24px;
background: #ff0000;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.youtube-badge-icon::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid #fff;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 2px;
}

.youtube-badge-text {
color: #ff0000;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.youtube-title {
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.youtube-highlight {
background: linear-gradient(
135deg,
#ff0000 0%,
#ff6b6b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.youtube-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.5;
}

/* Stats Row */
.youtube-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 60px;
flex-wrap: wrap;
animation: statsFadeIn 0.8s ease-out 0.3s
backwards;
}

@keyframes statsFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}

to {
opacity: 1;
transform: scale(1);
}
}

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

.stat-value {
font-size: 42px;
font-weight: 900;
background: linear-gradient(
135deg,
#ff0000 0%,
#ff6b6b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}

.stat-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}

/* Video Grid */
.video-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(350px, 1fr)
);
gap: 30px;
margin-bottom: 60px;
}

.video-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
animation: videoSlideIn 0.6s ease-out
backwards;
text-decoration: none;
display: block;
}

.video-card:nth-child(1) {
animation-delay: 0.1s;
}

.video-card:nth-child(2) {
animation-delay: 0.2s;
}

.video-card:nth-child(3) {
animation-delay: 0.3s;
}

.video-card:nth-child(4) {
animation-delay: 0.4s;
}

.video-card:nth-child(5) {
animation-delay: 0.5s;
}

@keyframes videoSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.video-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 0, 0, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.video-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background-size: cover;
background-position: center;
}

.video-thumbnail::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255, 0, 0, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.video-thumbnail::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 25px solid #fff;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
margin-left: 5px;
z-index: 1;
}

.video-card:hover .video-thumbnail::after {
transform: translate(-50%, -50%)
scale(1.2);
background: #ff0000;
}

.video-duration {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}

.video-content {
padding: 24px;
}

.video-title {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
line-height: 1.3;
}

.video-views {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}

/* YouTube CTA */
.youtube-cta-container {
text-align: center;
margin-top: 60px;
animation: ctaFadeIn 0.8s ease-out 0.5s
backwards;
}

@keyframes ctaFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.youtube-cta-text {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 24px;
}

.youtube-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: #ff0000;
color: #fff;
padding: 20px 50px;
font-size: 18px;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(255, 0, 0, 0.3);
position: relative;
overflow: hidden;
}

.youtube-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s;
}

.youtube-button:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px
rgba(255, 0, 0, 0.5);
}

.youtube-button:hover::before {
left: 100%;
}

.yt-icon {
width: 24px;
height: 24px;
background: #fff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.yt-icon::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid #ff0000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 2px;
}

.subscribe-note {
margin-top: 16px;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}

/* View More Button */
.view-more-container {
text-align: center;
margin-top: 40px;
}

.view-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: 2px solid rgba(255, 0, 0, 0.3);
color: #ff0000;
padding: 16px 40px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
cursor: pointer;
}

.view-more-btn:hover {
background: rgba(255, 0, 0, 0.1);
border-color: #ff0000;
transform: translateY(-2px);
box-shadow: 0 10px 30px
rgba(255, 0, 0, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
.youtube-section {
padding: 60px 16px;
}

.youtube-header {
margin-bottom: 40px;
}

.youtube-stats {
gap: 40px;
}

.video-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.youtube-button {
padding: 18px 40px;
font-size: 16px;
}
}

@media (max-width: 480px) {
.youtube-title {
margin-bottom: 16px;
}

.stat-value {
font-size: 32px;
}

.video-title {
font-size: 16px;
}

.youtube-cta-text {
font-size: 18px;
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Guarantee Section */
.guarantee-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a1a2e 30%,
#0f0f1f 70%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Elements */
.guarantee-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Shield Animation */
.shield-glow {
position: absolute;
width: 800px;
height: 800px;
background: radial-gradient(
circle,
rgba(74, 222, 128, 0.1) 0%,
transparent 50%
);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: shieldPulse 4s ease-in-out
infinite;
}

@keyframes shieldPulse {
0%,
100% {
opacity: 0.3;
transform: translate(-50%, -50%)
scale(0.8);
}

50% {
opacity: 0.6;
transform: translate(-50%, -50%)
scale(1.2);
}
}

/* Trust Particles */
.trust-particle {
position: absolute;
width: 4px;
height: 4px;
background: #4ade80;
border-radius: 50%;
opacity: 0;
animation: trustFloat 8s linear infinite;
}

.trust-particle:nth-child(2) {
top: 20%;
left: 10%;
animation-delay: 0s;
}

.trust-particle:nth-child(3) {
top: 80%;
left: 20%;
animation-delay: 1s;
}

.trust-particle:nth-child(4) {
top: 40%;
left: 90%;
animation-delay: 2s;
}

.trust-particle:nth-child(5) {
top: 60%;
left: 80%;
animation-delay: 3s;
}

.trust-particle:nth-child(6) {
top: 30%;
left: 50%;
animation-delay: 4s;
}

@keyframes trustFloat {
0% {
opacity: 0;
transform: translateY(50px) scale(0);
}

20% {
opacity: 1;
transform: translateY(0) scale(1);
}

80% {
opacity: 1;
transform: translateY(-50px) scale(1);
}

100% {
opacity: 0;
transform: translateY(-100px) scale(0);
}
}

/* Container */
.guarantee-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 10;
}

/* Main Shield */
.shield-container {
text-align: center;
margin-bottom: 80px;
animation: shieldFadeIn 0.8s ease-out;
}

@keyframes shieldFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.shield-icon {
width: 150px;
height: 150px;
margin: 0 auto 30px;
background: linear-gradient(
135deg,
#1a1a2e 0%,
#2a2a3e 100%
);
border: 3px solid rgba(74, 222, 128, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
position: relative;
box-shadow: 0 20px 50px
rgba(74, 222, 128, 0.2);
animation: shieldRotate 20s linear
infinite;
}

@keyframes shieldRotate {
to {
transform: rotate(360deg);
}
}

.shield-icon::before {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
padding: 10px;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 50%,
#4ade80 100%
);
-webkit-mask: linear-gradient(#fff 0 0)
content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
to {
transform: rotate(360deg);
}
}

/* Guarantee Content */
.guarantee-title {
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.guarantee-highlight {
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.guarantee-subtitle {
font-size: clamp(20px, 2.5vw, 28px);
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
max-width: 800px;
margin: 0 auto 60px;
line-height: 1.5;
}

/* Guarantee Grid */
.guarantee-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(300px, 1fr)
);
gap: 30px;
margin-bottom: 80px;
}

.guarantee-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px;
text-align: center;
transition: all 0.3s ease;
animation: cardSlideIn 0.6s ease-out
backwards;
position: relative;
overflow: hidden;
}

.guarantee-card:nth-child(1) {
animation-delay: 0.1s;
}

.guarantee-card:nth-child(2) {
animation-delay: 0.2s;
}

.guarantee-card:nth-child(3) {
animation-delay: 0.3s;
}

@keyframes cardSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.guarantee-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.03);
border-color: rgba(74, 222, 128, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(74, 222, 128, 0.1) 0%,
transparent 50%
);
opacity: 0;
transition: opacity 0.3s ease;
}

.guarantee-card:hover .card-glow {
opacity: 1;
}

.card-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 10px 30px
rgba(74, 222, 128, 0.3);
}

.card-title {
font-size: 24px;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}

.card-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}

/* Trust Badges */
.trust-badges {
text-align: center;
margin-bottom: 60px;
animation: badgesFadeIn 0.8s ease-out 0.5s
backwards;
}

@keyframes badgesFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}

to {
opacity: 1;
transform: scale(1);
}
}

.badges-title {
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.badges-container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}

.trust-badge {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
}

.trust-badge:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(74, 222, 128, 0.3);
}

/* Final CTA */
.final-cta {
text-align: center;
padding: 80px 40px;
background: rgba(74, 222, 128, 0.02);
border-radius: 32px;
border: 1px solid rgba(74, 222, 128, 0.1);
position: relative;
overflow: hidden;
animation: ctaFadeIn 0.8s ease-out 0.7s
backwards;
}

@keyframes ctaFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.cta-bg-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(74, 222, 128, 0.05) 0%,
transparent 50%
);
animation: ctaGlowRotate 20s linear
infinite;
}

@keyframes ctaGlowRotate {
to {
transform: rotate(360deg);
}
}

.cta-content {
position: relative;
z-index: 1;
}

.cta-title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 900;
color: #fff;
margin-bottom: 20px;
line-height: 1.1;
}

.cta-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}

.final-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#4ade80 0%,
#22d3ee 100%
);
color: #000;
padding: 28px 80px;
font-size: 24px;
font-weight: 900;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 20px 50px
rgba(74, 222, 128, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
animation: buttonPulse 2s ease-in-out
infinite;
}

@keyframes buttonPulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 20px 50px
rgba(74, 222, 128, 0.4);
}

50% {
transform: scale(1.05);
box-shadow: 0 25px 60px
rgba(74, 222, 128, 0.6);
}
}

.final-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.5s;
}

.final-button:hover {
transform: translateY(-3px) scale(1.02);
animation-play-state: paused;
}

.final-button:hover::before {
left: 100%;
}

.button-arrow {
font-size: 28px;
transition: transform 0.3s ease;
}

.final-button:hover .button-arrow {
transform: translateX(5px);
}

.cta-guarantee {
margin-top: 24px;
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
}

.guarantee-strong {
color: #4ade80;
font-weight: 700;
}

/* Success Counter */
.success-counter {
text-align: center;
margin-top: 60px;
padding: 30px;
background: rgba(255, 255, 255, 0.02);
border-radius: 20px;
animation: counterFadeIn 0.8s ease-out
0.9s backwards;
}

@keyframes counterFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.counter-text {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
}

.counter-number {
font-size: 32px;
font-weight: 900;
color: #4ade80;
margin: 0 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
.guarantee-section {
padding: 60px 16px;
}

.shield-icon {
width: 120px;
height: 120px;
font-size: 48px;
}

.guarantee-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.guarantee-card {
padding: 30px 20px;
}

.badges-container {
gap: 20px;
}

.trust-badge {
width: 80px;
height: 80px;
font-size: 12px;
}

.final-cta {
padding: 50px 20px;
}

.final-button {
padding: 24px 50px;
font-size: 20px;
width: 100%;
max-width: 400px;
}
}

@media (max-width: 480px) {
.guarantee-title {
margin-bottom: 16px;
}

.card-icon {
width: 60px;
height: 60px;
font-size: 28px;
}

.card-title {
font-size: 20px;
}

.final-button {
padding: 20px 40px;
font-size: 18px;
}

.counter-number {
font-size: 24px;
}
}



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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Affiliate Section */
.affiliate-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#1a0033 30%,
#330066 50%,
#1a0033 70%,
#0a0a0a 100%
);
overflow: hidden;
}

/* Background Elements */
.affiliate-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Money Rain */
.money-rain {
position: absolute;
font-size: 24px;
opacity: 0.1;
animation: moneyFall 8s linear infinite;
}

.money-rain:nth-child(1) {
left: 10%;
animation-delay: 0s;
}

.money-rain:nth-child(2) {
left: 20%;
animation-delay: 1s;
}

.money-rain:nth-child(3) {
left: 30%;
animation-delay: 2s;
}

.money-rain:nth-child(4) {
left: 40%;
animation-delay: 3s;
}

.money-rain:nth-child(5) {
left: 50%;
animation-delay: 4s;
}

.money-rain:nth-child(6) {
left: 60%;
animation-delay: 5s;
}

.money-rain:nth-child(7) {
left: 70%;
animation-delay: 6s;
}

.money-rain:nth-child(8) {
left: 80%;
animation-delay: 7s;
}

.money-rain:nth-child(9) {
left: 90%;
animation-delay: 8s;
}

@keyframes moneyFall {
0% {
transform: translateY(-100px)
rotate(0deg);
opacity: 0;
}

10% {
opacity: 0.1;
}

90% {
opacity: 0.1;
}

100% {
transform: translateY(100vh)
rotate(360deg);
opacity: 0;
}
}

/* Container */
.affiliate-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 10;
text-align: center;
}

/* Header */
.affiliate-header {
margin-bottom: 60px;
animation: affFadeIn 0.8s ease-out;
}

@keyframes affFadeIn {
from {
opacity: 0;
transform: translateY(-30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.affiliate-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(147, 51, 234, 0.2) 0%,
rgba(255, 215, 0, 0.2) 100%
);
backdrop-filter: blur(10px);
border: 1px solid rgba(147, 51, 234, 0.3);
border-radius: 50px;
padding: 12px 28px;
margin-bottom: 28px;
position: relative;
overflow: hidden;
}

.affiliate-badge::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 215, 0, 0.4),
transparent
);
animation: partnerShine 3s infinite;
}

@keyframes partnerShine {
to {
left: 100%;
}
}

.affiliate-badge-icon {
font-size: 20px;
animation: handshake 2s ease-in-out
infinite;
}

@keyframes handshake {
0%,
100% {
transform: rotate(0deg);
}

25% {
transform: rotate(-10deg);
}

75% {
transform: rotate(10deg);
}
}

.affiliate-badge-text {
color: #ffd700;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.affiliate-title {
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}

.affiliate-highlight {
background: linear-gradient(
135deg,
#9333ea 0%,
#ffd700 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.affiliate-subtitle {
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
max-width: 700px;
margin: 0 auto;
line-height: 1.5;
}

/* Commission Box */
.commission-box {
background: linear-gradient(
135deg,
rgba(147, 51, 234, 0.1) 0%,
rgba(255, 215, 0, 0.1) 100%
);
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 32px;
padding: 50px;
margin: 60px auto;
max-width: 900px;
position: relative;
overflow: hidden;
animation: commissionSlideIn 0.8s ease-out
0.3s backwards;
}

@keyframes commissionSlideIn {
from {
opacity: 0;
transform: scale(0.9);
}

to {
opacity: 1;
transform: scale(1);
}
}

.commission-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.1) 0%,
transparent 50%
);
animation: commissionGlow 4s ease-in-out
infinite;
}

@keyframes commissionGlow {
0%,
100% {
opacity: 0.3;
transform: scale(1);
}

50% {
opacity: 0.6;
transform: scale(1.1);
}
}

.commission-content {
position: relative;
z-index: 1;
}

.commission-amount {
font-size: clamp(48px, 8vw, 96px);
font-weight: 900;
background: linear-gradient(
135deg,
#ffd700 0%,
#ff6b6b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 16px;
line-height: 1;
}

.commission-type {
font-size: 24px;
color: #fff;
font-weight: 700;
margin-bottom: 16px;
}

.commission-math {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 40px;
}

.commission-math strong {
color: #ffd700;
font-size: 22px;
}

/* Benefits Grid */
.affiliate-benefits {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(250px, 1fr)
);
gap: 30px;
margin-bottom: 40px;
}

.benefit-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
animation: benefitFadeIn 0.6s ease-out
backwards;
}

.benefit-item:nth-child(1) {
animation-delay: 0.1s;
}

.benefit-item:nth-child(2) {
animation-delay: 0.2s;
}

.benefit-item:nth-child(3) {
animation-delay: 0.3s;
}

@keyframes benefitFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.benefit-icon {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
transform: scale(1.1);
background: rgba(255, 215, 0, 0.1);
border-color: #ffd700;
}

.benefit-text {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}

/* CTA Button */
.affiliate-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(
135deg,
#9333ea 0%,
#ffd700 100%
);
color: #fff;
padding: 24px 60px;
font-size: 20px;
font-weight: 800;
text-decoration: none;
border-radius: 60px;
transition: all 0.3s ease;
box-shadow: 0 15px 40px
rgba(147, 51, 234, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}

.affiliate-cta::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}

.affiliate-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 50px
rgba(147, 51, 234, 0.6);
}

.affiliate-cta:hover::before {
left: 100%;
}

.affiliate-note {
margin-top: 20px;
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
.affiliate-section {
padding: 60px 16px;
}

.commission-box {
padding: 40px 20px;
}

.commission-amount {
font-size: 56px;
}

.commission-type {
font-size: 20px;
}

.affiliate-benefits {
grid-template-columns: 1fr;
gap: 20px;
}

.affiliate-cta {
padding: 20px 40px;
font-size: 18px;
}
}

@media (max-width: 480px) {
.affiliate-title {
margin-bottom: 16px;
}

.commission-amount {
font-size: 48px;
}

.benefit-icon {
width: 60px;
height: 60px;
font-size: 28px;
}

.benefit-text {
font-size: 16px;
}
}




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

body {
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
}

/* Footer Section */
.footer-section {
position: relative;
background: #000;
border-top: 1px solid
rgba(255, 255, 255, 0.1);
overflow: hidden;
}

/* Main Footer */
.footer-main {
padding: 80px 20px 40px;
background: linear-gradient(
180deg,
#0a0a0a 0%,
#000 100%
);
}

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

/* Footer Grid */
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}

/* Company Info */
.footer-company {
animation: footerFadeIn 0.6s ease-out;
}

@keyframes footerFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.footer-logo {
font-size: 32px;
font-weight: 900;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
}

.footer-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
margin-bottom: 24px;
max-width: 350px;
}

/* Social Links */
.social-links {
display: flex;
gap: 16px;
}

.social-link {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
}

.social-link:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
color: #fff;
}

/* Footer Columns */
.footer-column {
animation: footerFadeIn 0.6s ease-out
backwards;
}

.footer-column:nth-child(2) {
animation-delay: 0.1s;
}

.footer-column:nth-child(3) {
animation-delay: 0.2s;
}

.footer-column:nth-child(4) {
animation-delay: 0.3s;
}

.footer-heading {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 1px;
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 16px;
}

.footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 16px;
transition: all 0.2s ease;
display: inline-block;
}

.footer-links a:hover {
color: #fff;
transform: translateX(5px);
}

/* Newsletter */
.footer-newsletter {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
}

.newsletter-title {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}

.newsletter-text {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
}

.newsletter-form {
display: flex;
gap: 12px;
}

.newsletter-input {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 12px 16px;
color: #fff;
font-size: 14px;
transition: all 0.3s ease;
}

.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}

.newsletter-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}

.newsletter-button {
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.newsletter-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px
rgba(102, 126, 234, 0.4);
}

/* Footer Bottom */
.footer-bottom {
padding: 30px 20px;
border-top: 1px solid
rgba(255, 255, 255, 0.05);
background: #000;
}

.footer-bottom-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}

.copyright {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}

.footer-legal-links {
display: flex;
gap: 30px;
list-style: none;
}

.footer-legal-links a {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s ease;
}

.footer-legal-links a:hover {
color: rgba(255, 255, 255, 0.8);
}

/* Quick Action Bar */
.quick-action-bar {
background: linear-gradient(
135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(118, 75, 162, 0.1) 100%
);
padding: 30px 20px;
text-align: center;
border-bottom: 1px solid
rgba(255, 255, 255, 0.1);
}

.quick-action-content {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}

.quick-action-text {
font-size: 20px;
font-weight: 600;
color: #fff;
}

.quick-action-button {
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
color: #fff;
padding: 16px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px
rgba(102, 126, 234, 0.3);
white-space: nowrap;
}

.quick-action-button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px
rgba(102, 126, 234, 0.5);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}

.footer-company {
grid-column: 1 / -1;
}
}

@media (max-width: 768px) {
.footer-main {
padding: 60px 16px 30px;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 40px;
}

.quick-action-content {
flex-direction: column;
text-align: center;
}

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

.footer-legal-links {
flex-wrap: wrap;
justify-content: center;
}

.newsletter-form {
flex-direction: column;
}

.newsletter-button {
width: 100%;
}
}

@media (max-width: 480px) {
.footer-logo {
font-size: 28px;
}

.quick-action-text {
font-size: 18px;
}

.quick-action-button {
padding: 14px 30px;
font-size: 14px;
}

.social-link {
width: 40px;
height: 40px;
font-size: 18px;
}
}



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

  body {
    font-family: -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #0a0a0a;
  }

  /* Templates Section */
  .templates-section {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(
      180deg,
      #0a0a0a 0%,
      #1a0f33 50%,
      #0a0a0a 100%
    );
    overflow: hidden;
  }

  /* Background Effects */
  .templates-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Connecting Lines Animation */
  .connect-line {
    position: absolute;
    width: 200%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      #ffd700,
      #9333ea,
      transparent
    );
    opacity: 0.3;
    animation: connectFlow 6s linear infinite;
  }

  .connect-line:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
  }

  .connect-line:nth-child(2) {
    top: 50%;
    animation-delay: 2s;
  }

  .connect-line:nth-child(3) {
    top: 80%;
    animation-delay: 4s;
  }

  @keyframes connectFlow {
    0% {
      transform: translateX(-50%);
    }

    100% {
      transform: translateX(0);
    }
  }

  /* Success Particles */
  .success-particle {
    position: absolute;
    font-size: 20px;
    opacity: 0;
    animation: successFloat 4s ease-out
      infinite;
  }

  .success-particle:nth-child(4) {
    left: 10%;
    top: 80%;
    content: "✓";
    animation-delay: 0s;
  }

  .success-particle:nth-child(5) {
    left: 30%;
    top: 60%;
    content: "💰";
    animation-delay: 1s;
  }

  .success-particle:nth-child(6) {
    left: 50%;
    top: 70%;
    content: "🎯";
    animation-delay: 2s;
  }

  .success-particle:nth-child(7) {
    left: 70%;
    top: 80%;
    content: "📈";
    animation-delay: 3s;
  }

  .success-particle:nth-child(8) {
    left: 90%;
    top: 60%;
    content: "🚀";
    animation-delay: 4s;
  }

  @keyframes successFloat {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0);
    }

    20% {
      opacity: 1;
      transform: translateY(-10px) scale(1);
    }

    80% {
      opacity: 1;
      transform: translateY(-60px) scale(1);
    }

    100% {
      opacity: 0;
      transform: translateY(-80px) scale(0.5);
    }
  }

  /* Gradient Orbs */
  .template-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orbFloat 12s ease-in-out
      infinite;
  }

  .template-orb1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #ffed4e 100%
    );
    top: -200px;
    right: -200px;
    animation-delay: 0s;
  }

  .template-orb2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(
      135deg,
      #9333ea 0%,
      #c77dff 100%
    );
    bottom: -150px;
    left: -150px;
    animation-delay: 4s;
  }

  @keyframes orbFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }

    33% {
      transform: translate(30px, -30px)
        scale(1.1);
    }

    66% {
      transform: translate(-20px, 20px)
        scale(0.9);
    }
  }

  /* Container */
  .templates-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }

  /* Header */
  .templates-header {
    text-align: center;
    margin-bottom: 80px;
    animation: tempFadeIn 0.8s ease-out;
  }

  .templates-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.1) 0%,
      rgba(147, 51, 234, 0.1) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 50px;
    padding: 12px 28px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
  }

  .templates-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 215, 0, 0.3),
      transparent
    );
    animation: goldPurpleShine 3s infinite;
  }

  @keyframes goldPurpleShine {
    to {
      left: 100%;
    }
  }

  .templates-badge-icon {
    font-size: 20px;
    animation: iconRotate 3s ease-in-out
      infinite;
  }

  @keyframes iconRotate {
    0%,
    100% {
      transform: rotate(0deg) scale(1);
    }

    50% {
      transform: rotate(10deg) scale(1.1);
    }
  }

  .templates-badge-text {
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .templates-title {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
  }

  .templates-highlight {
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 50%,
      #ffd700 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: goldPurpleShimmer 3s linear
      infinite;
  }

  @keyframes goldPurpleShimmer {
    to {
      background-position: 200% center;
    }
  }

  .templates-subtitle {
    font-size: clamp(18px, 2.5vw, 24px);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* Value Statement */
  .value-statement {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
    padding: 30px;
    margin: 50px auto;
    max-width: 900px;
    text-align: center;
    animation: valueFadeIn 0.8s ease-out 0.3s
      backwards;
    position: relative;
    overflow: hidden;
  }

  .value-statement::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    border-radius: 20px;
    opacity: 0.5;
    z-index: -1;
    animation: borderGlow 3s ease-in-out
      infinite;
  }

  @keyframes borderGlow {
    0%,
    100% {
      opacity: 0.3;
    }

    50% {
      opacity: 0.6;
    }
  }

  .value-text {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .value-metrics {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .value-metric {
    text-align: center;
  }

  .metric-number {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
  }

  .metric-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Template Grid */
  .template-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(400px, 1fr)
    );
    gap: 30px;
    margin-bottom: 80px;
  }

  /* Template Card */
  .template-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    animation: templateCardIn 0.6s ease-out
      backwards;
  }

  .template-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  .template-card:nth-child(2) {
    animation-delay: 0.2s;
  }

  .template-card:nth-child(3) {
    animation-delay: 0.3s;
  }

  .template-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  }

  /* Preview Area */
  .template-preview {
    position: relative;
    width: 100%;
    height: 250px;
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.05) 0%,
      rgba(147, 51, 234, 0.05) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .preview-visual {
    position: relative;
    width: 200px;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .preview-icon {
    font-size: 48px;
    opacity: 0.8;
  }

  .preview-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Card Content */
  .template-content {
    padding: 30px;
  }

  .template-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
  }

  .template-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
  }

  .template-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 20px;
  }

  /* Included Items */
  .included-list {
    list-style: none;
    margin-bottom: 20px;
  }

  .included-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
  }

  .included-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #ffd700;
    font-weight: bold;
    font-size: 18px;
  }

  /* Performance Stats */
  .performance-stats {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid
      rgba(255, 255, 255, 0.1);
  }

  .stat {
    flex: 1;
    text-align: center;
  }

  .stat-value {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
  }

  .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
  }

  /* Timeline Visual */
  .timeline-visual {
    margin: 60px 0;
    padding: 40px;
    background: rgba(147, 51, 234, 0.02);
    border-radius: 24px;
    position: relative;
    animation: timelineFadeIn 0.8s ease-out
      0.5s backwards;
  }

  .timeline-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 40px;
  }

  .timeline-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  .timeline-line {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 215, 0, 0.2);
    z-index: 0;
  }

  .timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(
      90deg,
      #ffd700 0%,
      #9333ea 100%
    );
    width: 0%;
    animation: timelineProgress 3s ease-out 1s
      forwards;
  }

  @keyframes timelineProgress {
    to {
      width: 100%;
    }
  }

  .timeline-step {
    position: relative;
    z-index: 1;
    text-align: center;
    flex: 1;
  }

  .step-circle {
    width: 80px;
    height: 80px;
    background: #1a0f33;
    border: 3px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.3s ease;
  }

  .timeline-step:hover .step-circle {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
    transform: scale(1.1);
  }

  .step-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
  }

  .step-time {
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
    margin-top: 8px;
  }

  /* GHL Section Enhanced */
  .ghl-section {
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.02) 0%,
      rgba(147, 51, 234, 0.02) 100%
    );
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 32px;
    padding: 60px;
    margin-bottom: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: ghlFadeIn 0.8s ease-out 0.6s
      backwards;
  }

  .ghl-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(147, 51, 234, 0.1) 0%,
      transparent 60%
    );
    animation: glowPulse 4s ease-in-out
      infinite;
  }

  @keyframes glowPulse {
    0%,
    100% {
      opacity: 0.5;
    }

    50% {
      opacity: 1;
    }
  }

  .ghl-icon {
    font-size: 80px;
    margin-bottom: 24px;
  }

  .ghl-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
  }

  .ghl-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .ghl-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .ghl-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
  }

  .ghl-feature-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
  }

  /* Bottom CTA */
  .templates-cta {
    text-align: center;
    margin-top: 80px;
    animation: ctaSlideIn 0.8s ease-out 0.7s
      backwards;
  }

  .cta-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
  }

  .cta-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
  }

  .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #9333ea 100%
    );
    color: #fff;
    padding: 24px 60px;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 60px;
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px
      rgba(255, 215, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
  }

  .cta-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 0.5s;
  }

  .cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 50px
      rgba(255, 215, 0, 0.6);
  }

  .cta-button:hover::before {
    left: 100%;
  }

  /* Animations */
  @keyframes tempFadeIn {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes valueFadeIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes templateCardIn {
    from {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes timelineFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes ghlFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes ctaSlideIn {
    from {
      opacity: 0;
      transform: translateY(40px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .templates-section {
      padding: 60px 16px;
    }

    .templates-header {
      margin-bottom: 50px;
    }

    .value-statement {
      padding: 24px;
      margin: 40px auto;
    }

    .value-metrics {
      gap: 30px;
    }

    .metric-number {
      font-size: 28px;
    }

    .template-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .template-preview {
      height: 200px;
    }

    .template-content {
      padding: 24px;
    }

    .timeline-visual {
      padding: 30px 20px;
    }

    .timeline-steps {
      flex-direction: column;
      gap: 40px;
    }

    .timeline-line {
      top: 0;
      left: 50%;
      width: 2px;
      height: 100%;
      transform: translateX(-50%);
    }

    .step-circle {
      width: 70px;
      height: 70px;
      font-size: 28px;
    }

    .ghl-section {
      padding: 40px 20px;
    }

    .ghl-icon {
      font-size: 60px;
    }

    .ghl-title {
      font-size: 28px;
    }

    .ghl-features {
      flex-direction: column;
      gap: 20px;
    }

    .cta-button {
      padding: 20px 40px;
      font-size: 16px;
    }
  }

  @media (max-width: 480px) {
    .value-text {
      font-size: 18px;
    }

    .template-title {
      font-size: 20px;
    }

    .performance-stats {
      flex-direction: column;
      gap: 12px;
    }

    .timeline-title {
      font-size: 24px;
    }

    .cta-title {
      font-size: 28px;
    }
  }