:root {
–primary: #00f5d4;
–primary-dark: #00c4a7;
–secondary: #9b5de5;
–tertiary: #f15bb5;
–accent: #fee440;
–dark-950: #000814;
–dark-900: #001d3d;
–dark-800: #003566;
–dark-700: #0a1628;
–text-primary: #ffffff;
–text-secondary: #b8c5d6;
–text-muted: #6b7a8f;
–gradient-main: linear-gradient(135deg, #00f5d4 0%, #9b5de5 50%, #f15bb5 100%);
–gradient-dark: linear-gradient(180deg, #000814 0%, #001d3d 50%, #000814 100%);
–gradient-card: linear-gradient(145deg, rgba(0, 53, 102, 0.3) 0%, rgba(0, 29, 61, 0.5) 100%);
–glass: rgba(255, 255, 255, 0.02);
–glass-border: rgba(255, 255, 255, 0.06);
–glow-primary: rgba(0, 245, 212, 0.4);
–glow-secondary: rgba(155, 93, 229, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: ‘Heebo’, sans-serif;
background: var(–dark-950);
color: var(–text-primary);
overflow-x: hidden;
line-height: 1.7;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(–dark-950);
}
::-webkit-scrollbar-thumb {
background: var(–primary);
border-radius: 3px;
}
/* Animated Background */
.bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background: var(–dark-950);
}
.bg-mesh {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
background:
radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0, 245, 212, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(155, 93, 229, 0.15), transparent),
radial-gradient(ellipse 50% 30% at 50% 80%, rgba(241, 91, 181, 0.1), transparent);
}
.floating-orb {
position: fixed;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 {
width: 500px;
height: 500px;
background: var(–primary);
top: -10%;
right: -10%;
animation-delay: 0s;
}
.orb-2 {
width: 400px;
height: 400px;
background: var(–secondary);
bottom: 20%;
left: -10%;
animation-delay: -7s;
}
.orb-3 {
width: 300px;
height: 300px;
background: var(–tertiary);
top: 50%;
right: 20%;
animation-delay: -14s;
}
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(50px, -30px) scale(1.1); }
50% { transform: translate(-30px, 50px) scale(0.9); }
75% { transform: translate(-50px, -20px) scale(1.05); }
}
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
}
/* Navigation */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 24px 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.scrolled {
background: rgba(0, 8, 20, 0.85);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(–glass-border);
padding: 16px 0;
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-family: ‘Rubik’, sans-serif;
font-size: 2rem;
font-weight: 900;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
}
.nav-links {
display: flex;
gap: 48px;
list-style: none;
}
.nav-links a {
color: var(–text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
position: relative;
}
.nav-links a::before {
content: ”;
position: absolute;
bottom: -8px;
right: 0;
width: 0;
height: 2px;
background: var(–gradient-main);
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(–primary);
}
.nav-links a:hover::before {
width: 100%;
}
.nav-cta {
background: var(–gradient-main);
color: var(–dark-950);
padding: 14px 32px;
border-radius: 100px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 0 40px var(–glow-primary);
}
.nav-cta:hover {
transform: translateY(-3px);
box-shadow: 0 0 60px var(–glow-primary);
}
.nav-mobile-toggle {
display: none;
background: none;
border: none;
color: var(–text-primary);
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding: 140px 0 100px;
overflow: hidden;
}
.hero-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.hero-bg-video iframe {
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
border: none;
pointer-events: none;
opacity: 0.2;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg,
rgba(0,8,20,0.9) 0%,
rgba(0,8,20,0.85) 50%,
rgba(0,8,20,0.95) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 100px;
align-items: center;
}
.hero-text {
max-width: 700px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(0, 245, 212, 0.1) 0%, rgba(155, 93, 229, 0.1) 100%);
border: 1px solid rgba(0, 245, 212, 0.2);
padding: 12px 24px;
border-radius: 100px;
font-size: 0.9rem;
color: var(–primary);
margin-bottom: 32px;
animation: fadeSlideUp 0.8s ease;
}
.hero-eyebrow i {
animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
}
.hero-title {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 900;
line-height: 1.05;
margin-bottom: 28px;
letter-spacing: -2px;
animation: fadeSlideUp 0.8s ease 0.1s backwards;
}
.hero-title .gradient-text {
display: block;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.35rem;
color: var(–text-secondary);
line-height: 1.9;
margin-bottom: 20px;
animation: fadeSlideUp 0.8s ease 0.2s backwards;
}
.hero-quote {
font-style: italic;
color: var(–accent);
font-size: 1.1rem;
margin-bottom: 40px;
padding-right: 20px;
border-right: 3px solid var(–accent);
animation: fadeSlideUp 0.8s ease 0.25s backwards;
}
.hero-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
animation: fadeSlideUp 0.8s ease 0.3s backwards;
}
.btn {
padding: 20px 44px;
border-radius: 16px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
}
.btn-primary {
background: var(–gradient-main);
color: var(–dark-950);
box-shadow: 0 8px 40px var(–glow-primary);
}
.btn-primary:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 16px 60px var(–glow-primary);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.03);
color: var(–text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(–primary);
transform: translateY(-3px);
}
.hero-visual {
position: relative;
animation: fadeSlideUp 0.8s ease 0.4s backwards;
}
.hero-image-wrapper {
position: relative;
z-index: 2;
}
.hero-image {
width: 400px;
height: 400px;
border-radius: 32px;
object-fit: cover;
border: 2px solid rgba(0, 245, 212, 0.3);
box-shadow:
0 50px 100px rgba(0, 0, 0, 0.5),
0 0 100px var(–glow-primary);
}
.hero-image-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: var(–gradient-main);
border-radius: 50%;
filter: blur(100px);
opacity: 0.3;
z-index: -1;
}
.hero-badge {
position: absolute;
background: rgba(0, 8, 20, 0.8);
backdrop-filter: blur(20px);
border: 1px solid var(–glass-border);
padding: 18px 26px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 16px;
animation: floatBadge 5s ease-in-out infinite;
z-index: 3;
}
.hero-badge.badge-1 {
top: 5%;
left: -20%;
animation-delay: 0s;
}
.hero-badge.badge-2 {
bottom: 10%;
right: -15%;
animation-delay: -2.5s;
}
.hero-badge.badge-3 {
top: 45%;
left: -30%;
animation-delay: -1.25s;
}
@keyframes floatBadge {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
.hero-badge-icon {
width: 50px;
height: 50px;
background: var(–gradient-main);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-badge-icon i {
font-size: 1.4rem;
color: var(–dark-950);
}
.hero-badge-text strong {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: var(–text-primary);
}
.hero-badge-text span {
font-size: 0.85rem;
color: var(–text-muted);
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stats Strip */
.stats-strip {
padding: 80px 0;
position: relative;
z-index: 10;
}
.stats-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: linear-gradient(135deg, rgba(0, 53, 102, 0.4) 0%, rgba(0, 29, 61, 0.6) 100%);
border: 1px solid var(–glass-border);
border-radius: 32px;
overflow: hidden;
backdrop-filter: blur(20px);
}
.stat-item {
text-align: center;
padding: 50px 30px;
position: relative;
transition: all 0.4s ease;
}
.stat-item:not(:last-child)::after {
content: ”;
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 1px;
background: linear-gradient(180deg, transparent, var(–glass-border), transparent);
}
.stat-item:hover {
background: rgba(0, 245, 212, 0.05);
}
.stat-number {
font-family: ‘Rubik’, sans-serif;
font-size: 4rem;
font-weight: 900;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 12px;
}
.stat-label {
color: var(–text-secondary);
font-size: 1.05rem;
font-weight: 500;
}
/* Section Styling */
.section {
padding: 140px 0;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 80px;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, rgba(0, 245, 212, 0.08) 0%, rgba(155, 93, 229, 0.08) 100%);
border: 1px solid rgba(0, 245, 212, 0.15);
padding: 12px 28px;
border-radius: 100px;
font-size: 0.9rem;
color: var(–primary);
margin-bottom: 24px;
}
.section-title {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
font-weight: 900;
margin-bottom: 20px;
letter-spacing: -1px;
}
.section-title .highlight {
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 1.2rem;
color: var(–text-secondary);
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
}
/* Pain Section */
.pain-section {
background: linear-gradient(180deg, var(–dark-950) 0%, rgba(0, 29, 61, 0.3) 50%, var(–dark-950) 100%);
}
.pain-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.pain-card {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 28px;
padding: 44px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.pain-card::before {
content: ”;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: var(–gradient-main);
opacity: 0;
transition: opacity 0.4s ease;
}
.pain-card:hover {
transform: translateY(-12px);
border-color: rgba(0, 245, 212, 0.3);
box-shadow:
0 30px 80px rgba(0, 245, 212, 0.1),
inset 0 0 60px rgba(0, 245, 212, 0.02);
}
.pain-card:hover::before {
opacity: 1;
}
.pain-icon {
width: 80px;
height: 80px;
background: rgba(0, 245, 212, 0.08);
border: 1px solid rgba(0, 245, 212, 0.15);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
transition: all 0.4s ease;
}
.pain-card:hover .pain-icon {
background: var(–gradient-main);
border-color: transparent;
transform: scale(1.1) rotate(-5deg);
}
.pain-icon i {
font-size: 2rem;
color: var(–primary);
transition: color 0.4s ease;
}
.pain-card:hover .pain-icon i {
color: var(–dark-950);
}
.pain-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 16px;
}
.pain-card p {
color: var(–text-secondary);
line-height: 1.8;
font-size: 1.05rem;
}
/* Dream Section */
.dream-section {
background: var(–dark-900);
position: relative;
overflow: hidden;
}
.dream-section::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(0, 245, 212, 0.1), transparent),
radial-gradient(ellipse 50% 50% at 100% 50%, rgba(155, 93, 229, 0.1), transparent);
}
.dream-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
position: relative;
z-index: 2;
}
.dream-video-wrapper {
position: relative;
border-radius: 32px;
overflow: hidden;
border: 1px solid var(–glass-border);
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}
.dream-video-wrapper::before {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, var(–primary), transparent 30%);
animation: videoGlow 4s linear infinite;
opacity: 0.3;
}
@keyframes videoGlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dream-video-wrapper video {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 2;
}
.dream-text h2 {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 900;
margin-bottom: 28px;
letter-spacing: -1px;
}
.dream-text .highlight {
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dream-text > p {
font-size: 1.2rem;
color: var(–text-secondary);
line-height: 1.9;
margin-bottom: 36px;
}
.dream-features {
list-style: none;
margin-bottom: 44px;
}
.dream-features li {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
font-size: 1.15rem;
color: var(–text-secondary);
}
.dream-features li i {
width: 32px;
height: 32px;
background: rgba(0, 245, 212, 0.15);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(–primary);
font-size: 0.9rem;
flex-shrink: 0;
margin-top: 2px;
}
/* Results Section */
.results-section {
position: relative;
}
.results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.result-card {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 28px;
padding: 50px 40px;
text-align: center;
transition: all 0.4s ease;
}
.result-card:hover {
transform: translateY(-10px);
border-color: var(–primary);
box-shadow: 0 30px 60px rgba(0, 245, 212, 0.1);
}
.result-number {
font-family: ‘Rubik’, sans-serif;
font-size: 5rem;
font-weight: 900;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 16px;
}
.result-label {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 12px;
}
.result-desc {
color: var(–text-secondary);
font-size: 1rem;
line-height: 1.7;
}
/* About Section */
.about-section {
background: linear-gradient(180deg, var(–dark-950) 0%, rgba(0, 29, 61, 0.2) 50%, var(–dark-950) 100%);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.about-text .section-eyebrow {
margin-bottom: 20px;
}
.about-text h2 {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
margin-bottom: 28px;
letter-spacing: -1px;
}
.about-text p {
font-size: 1.15rem;
color: var(–text-secondary);
line-height: 1.9;
margin-bottom: 24px;
}
.about-quote {
background: linear-gradient(135deg, rgba(0, 245, 212, 0.08) 0%, rgba(155, 93, 229, 0.08) 100%);
border-right: 4px solid var(–primary);
border-radius: 0 20px 20px 0;
padding: 32px;
margin: 36px 0;
font-size: 1.25rem;
font-style: italic;
color: var(–text-primary);
line-height: 1.8;
}
.expertise-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.expertise-item {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 20px;
padding: 26px 28px;
display: flex;
align-items: center;
gap: 18px;
transition: all 0.3s ease;
}
.expertise-item:hover {
border-color: var(–primary);
transform: translateX(-8px);
background: rgba(0, 245, 212, 0.05);
}
.expertise-item i {
width: 50px;
height: 50px;
background: rgba(0, 245, 212, 0.1);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: var(–primary);
}
.expertise-item span {
font-weight: 600;
font-size: 1.05rem;
}
/* Process Section */
.process-section {
background: var(–dark-900);
}
.process-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
position: relative;
}
.process-timeline::before {
content: ”;
position: absolute;
top: 70px;
left: 12%;
right: 12%;
height: 3px;
background: linear-gradient(90deg, var(–primary), var(–secondary), var(–tertiary));
border-radius: 3px;
opacity: 0.3;
}
.process-step {
text-align: center;
position: relative;
}
.process-number {
width: 140px;
height: 140px;
background: var(–gradient-card);
border: 2px solid var(–glass-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 36px;
font-family: ‘Rubik’, sans-serif;
font-size: 3.5rem;
font-weight: 900;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
transition: all 0.4s ease;
}
.process-step:hover .process-number {
transform: scale(1.15);
border-color: var(–primary);
box-shadow: 0 0 60px var(–glow-primary);
}
.process-step h3 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 14px;
}
.process-step p {
color: var(–text-secondary);
font-size: 1rem;
line-height: 1.7;
max-width: 240px;
margin: 0 auto;
}
/* Courses Section */
.courses-section {
background: linear-gradient(180deg, var(–dark-950) 0%, rgba(0, 29, 61, 0.3) 50%, var(–dark-950) 100%);
}
.courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.course-card {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 28px;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-card:hover {
transform: translateY(-14px);
border-color: var(–primary);
box-shadow: 0 40px 80px rgba(0, 245, 212, 0.15);
}
.course-media {
position: relative;
height: 220px;
overflow: hidden;
}
.course-media iframe {
width: 100%;
height: 100%;
border: none;
}
.course-badge {
position: absolute;
top: 18px;
left: 18px;
background: var(–gradient-main);
color: var(–dark-950);
padding: 10px 22px;
border-radius: 100px;
font-weight: 800;
font-size: 0.95rem;
z-index: 5;
}
.course-content {
padding: 36px;
}
.course-content h3 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 14px;
}
.course-content p {
color: var(–text-secondary);
line-height: 1.8;
margin-bottom: 28px;
font-size: 1.05rem;
}
.course-content .btn {
width: 100%;
justify-content: center;
padding: 18px;
}
/* Testimonials Section */
.testimonials-section {
position: relative;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.testimonial-card {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 28px;
padding: 40px;
transition: all 0.4s ease;
}
.testimonial-card:hover {
border-color: var(–primary);
box-shadow: 0 30px 60px rgba(0, 245, 212, 0.1);
transform: translateY(-8px);
}
.testimonial-stars {
color: var(–accent);
margin-bottom: 24px;
font-size: 1.1rem;
}
.testimonial-text {
font-size: 1.1rem;
color: var(–text-secondary);
line-height: 1.9;
margin-bottom: 28px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 16px;
}
.testimonial-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(–gradient-main);
display: flex;
align-items: center;
justify-content: center;
color: var(–dark-950);
font-weight: 800;
font-size: 1.3rem;
}
.testimonial-info h5 {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 4px;
}
.testimonial-info span {
font-size: 0.9rem;
color: var(–text-muted);
}
/* Media Section */
.media-section {
background: var(–dark-900);
}
.media-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.media-card {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 24px;
padding: 36px 24px;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
.media-card:hover {
border-color: var(–primary);
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 245, 212, 0.1);
}
.media-card i {
font-size: 2.8rem;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 18px;
}
.media-card h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 8px;
color: var(–text-primary);
}
.media-card p {
font-size: 0.85rem;
color: var(–text-muted);
}
/* Press Section */
.press-section {
padding: 100px 0;
position: relative;
}
.press-card {
background: linear-gradient(135deg, rgba(0, 245, 212, 0.05) 0%, rgba(155, 93, 229, 0.05) 100%);
border: 1px solid rgba(0, 245, 212, 0.15);
border-radius: 28px;
padding: 50px 60px;
display: flex;
align-items: center;
gap: 60px;
max-width: 1000px;
margin: 0 auto;
}
.press-icon {
width: 120px;
height: 120px;
background: var(–gradient-main);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.press-icon i {
font-size: 3rem;
color: var(–dark-950);
}
.press-content h3 {
font-family: ‘Rubik’, sans-serif;
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 16px;
}
.press-content p {
color: var(–text-secondary);
font-size: 1.15rem;
line-height: 1.8;
margin-bottom: 24px;
}
.press-content a {
color: var(–primary);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease;
}
.press-content a:hover {
gap: 16px;
}
/* FAQ Section */
.faq-section {
background: linear-gradient(180deg, var(–dark-950) 0%, rgba(0, 29, 61, 0.3) 50%, var(–dark-950) 100%);
}
.faq-list {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 20px;
margin-bottom: 18px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: rgba(0, 245, 212, 0.3);
}
.faq-question {
width: 100%;
padding: 30px 36px;
background: transparent;
border: none;
text-align: right;
font-size: 1.15rem;
font-weight: 600;
color: var(–text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family: ‘Heebo’, sans-serif;
transition: color 0.3s ease;
}
.faq-question:hover {
color: var(–primary);
}
.faq-question i {
color: var(–primary);
transition: transform 0.4s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq-answer-content {
padding: 0 36px 30px;
color: var(–text-secondary);
line-height: 1.9;
font-size: 1.05rem;
}
.faq-item.active .faq-answer {
max-height: 400px;
}
/* Video Showcase */
.video-showcase {
padding: 140px 0;
position: relative;
}
.video-wrapper {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
.video-container {
border-radius: 32px;
overflow: hidden;
border: 2px solid var(–glass-border);
box-shadow:
0 60px 120px rgba(0, 0, 0, 0.5),
0 0 100px rgba(0, 245, 212, 0.1);
position: relative;
}
.video-container video {
width: 100%;
height: auto;
display: block;
}
.video-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: var(–gradient-main);
filter: blur(150px);
opacity: 0.2;
z-index: -1;
}
/* CTA Section */
.cta-section {
padding: 180px 0;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 60% 60% at 30% 50%, rgba(0, 245, 212, 0.15), transparent),
radial-gradient(ellipse 60% 60% at 70% 50%, rgba(155, 93, 229, 0.15), transparent);
}
.cta-content {
text-align: center;
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 900;
margin-bottom: 28px;
letter-spacing: -1px;
}
.cta-content h2 .highlight {
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content > p {
font-size: 1.3rem;
color: var(–text-secondary);
margin-bottom: 48px;
line-height: 1.8;
}
.cta-buttons {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
/* Footer */
.footer {
background: var(–dark-900);
padding: 100px 0 40px;
border-top: 1px solid var(–glass-border);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: 60px;
margin-bottom: 70px;
}
.footer-brand .nav-logo {
margin-bottom: 24px;
display: inline-block;
}
.footer-brand > p {
color: var(–text-secondary);
line-height: 1.9;
margin-bottom: 28px;
font-size: 1.05rem;
}
.footer-social {
display: flex;
gap: 14px;
}
.footer-social a {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(–glass-border);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(–text-primary);
font-size: 1.2rem;
transition: all 0.3s ease;
}
.footer-social a:hover {
background: var(–primary);
border-color: var(–primary);
color: var(–dark-950);
transform: translateY(-4px);
}
.footer-column h4 {
font-weight: 700;
margin-bottom: 28px;
font-size: 1.15rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 16px;
}
.footer-links a {
color: var(–text-secondary);
text-decoration: none;
transition: all 0.3s ease;
font-size: 1rem;
}
.footer-links a:hover {
color: var(–primary);
padding-right: 8px;
}
.footer-contact a {
display: flex;
align-items: center;
gap: 14px;
color: var(–text-secondary);
text-decoration: none;
margin-bottom: 18px;
transition: color 0.3s ease;
font-size: 1rem;
}
.footer-contact a:hover {
color: var(–primary);
}
.footer-contact i {
color: var(–primary);
width: 22px;
}
.footer-bottom {
padding-top: 40px;
border-top: 1px solid var(–glass-border);
text-align: center;
color: var(–text-muted);
font-size: 0.95rem;
}
/* Responsive */
@media (max-width: 1280px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 70px;
}
.hero-text {
max-width: 100%;
}
.hero-subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-quote {
border-right: none;
border-bottom: 3px solid var(–accent);
padding-right: 0;
padding-bottom: 20px;
}
.hero-buttons {
justify-content: center;
}
.hero-visual {
margin-top: 20px;
}
.hero-badge {
display: none;
}
.pain-grid,
.courses-grid,
.testimonials-grid,
.results-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.nav-links {
display: none;
}
.nav-mobile-toggle {
display: block;
}
.nav-cta {
padding: 10px 16px;
font-size: 0.8rem;
border-radius: 50px;
box-shadow: 0 0 20px var(–glow-primary);
}
.nav-cta i {
display: none;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
.stat-item:not(:last-child)::after {
display: none;
}
.about-content,
.dream-content {
grid-template-columns: 1fr;
text-align: center;
gap: 60px;
}
.about-quote {
border-right: none;
border-bottom: 4px solid var(–primary);
border-radius: 20px 20px 0 0;
}
.expertise-grid {
max-width: 500px;
margin: 0 auto;
}
.process-timeline {
grid-template-columns: repeat(2, 1fr);
}
.process-timeline::before {
display: none;
}
.media-grid {
grid-template-columns: repeat(3, 1fr);
}
.press-card {
flex-direction: column;
text-align: center;
padding: 40px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.section {
padding: 100px 0;
}
.nav-cta {
padding: 8px 14px;
font-size: 0.75rem;
font-weight: 600;
}
.nav-content {
gap: 10px;
}
.nav-logo {
font-size: 1.5rem;
}
.pain-grid,
.courses-grid,
.testimonials-grid,
.results-grid {
grid-template-columns: 1fr;
}
.stats-container {
grid-template-columns: 1fr;
padding: 40px 30px;
}
.stat-number {
font-size: 3rem;
}
.hero-image {
width: 300px;
height: 300px;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
justify-content: center;
}
.expertise-grid {
grid-template-columns: 1fr;
}
.process-timeline {
grid-template-columns: 1fr;
gap: 50px;
}
.media-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.footer-social {
justify-content: center;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 1.8rem;
}
.media-grid {
grid-template-columns: 1fr;
}
.result-number {
font-size: 3.5rem;
}
.nav-cta {
padding: 6px 12px;
font-size: 0.7rem;
white-space: nowrap;
}
.nav-logo {
font-size: 1.3rem;
}
.nav-mobile-toggle {
font-size: 1.2rem;
padding: 5px;
}
}
/* Video Carousel Section */
.video-carousel-section {
background: linear-gradient(180deg, var(–dark-900) 0%, var(–dark-950) 50%, var(–dark-900) 100%);
}
.carousel-wrapper {
max-width: 1000px;
margin: 0 auto;
}
.carousel-video-container {
position: relative;
border-radius: 24px;
overflow: hidden;
border: 2px solid var(–glass-border);
box-shadow:
0 40px 80px rgba(0, 0, 0, 0.5),
0 0 80px rgba(0, 245, 212, 0.1);
margin-bottom: 30px;
}
.carousel-video {
width: 100%;
height: 500px;
border: none;
display: block;
}
.carousel-controls {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
}
.carousel-btn {
background: var(–gradient-main);
border: none;
color: var(–dark-950);
padding: 14px 28px;
border-radius: 100px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
font-family: ‘Heebo’, sans-serif;
}
.carousel-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 40px var(–glow-primary);
}
.carousel-play-pause {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(–glass-border);
color: var(–text-primary);
}
.carousel-play-pause:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(–primary);
}
.carousel-progress {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
margin-bottom: 24px;
overflow: hidden;
}
.carousel-progress-bar {
width: 0%;
height: 100%;
background: var(–gradient-main);
border-radius: 3px;
transition: width 0.1s linear;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.carousel-dot:hover {
background: rgba(255, 255, 255, 0.4);
}
.carousel-dot.active {
background: var(–primary);
transform: scale(1.3);
border-color: var(–primary);
box-shadow: 0 0 20px var(–glow-primary);
}
.carousel-counter {
text-align: center;
font-size: 1.1rem;
color: var(–text-secondary);
font-weight: 600;
}
.carousel-counter span {
color: var(–primary);
font-weight: 800;
}
@media (max-width: 768px) {
.carousel-video {
height: 300px;
}
.carousel-controls {
flex-wrap: wrap;
}
.carousel-btn {
padding: 12px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.carousel-video {
height: 220px;
}
.carousel-dot {
width: 10px;
height: 10px;
}
}

/* Podcast Section */
.podcast-section {
background: linear-gradient(180deg, var(–dark-950) 0%, rgba(30, 215, 96, 0.05) 50%, var(–dark-950) 100%);
}
.podcast-container {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
align-items: center;
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 32px;
padding: 40px;
transition: all 0.4s ease;
}
.podcast-container:hover {
border-color: #1DB954;
box-shadow: 0 30px 80px rgba(30, 215, 96, 0.1);
}
.podcast-embed {
border-radius: 12px;
overflow: hidden;
}
.podcast-info {
text-align: center;
}
.podcast-stats {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.podcast-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.podcast-stat i {
font-size: 1.8rem;
color: #1DB954;
}
.podcast-stat span {
font-size: 0.9rem;
color: var(–text-secondary);
}
.podcast-description {
color: var(–text-secondary);
line-height: 1.8;
margin-bottom: 25px;
font-size: 1.05rem;
}
.podcast-btn {
background: linear-gradient(135deg, #1DB954, #1ed760) !important;
color: white !important;
border: none !important;
}
.podcast-btn:hover {
box-shadow: 0 10px 30px rgba(30, 215, 96, 0.3);
transform: translateY(-3px);
}
@media (max-width: 1024px) {
.podcast-container {
grid-template-columns: 1fr;
gap: 30px;
padding: 30px;
}
}
@media (max-width: 768px) {
.podcast-stats {
gap: 20px;
}
.podcast-stat i {
font-size: 1.5rem;
}
}

/* Products Showcase Section */
.products-showcase {
background: linear-gradient(180deg, var(–dark-950) 0%, rgba(0, 29, 61, 0.3) 50%, var(–dark-950) 100%);
}
.product-showcase-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
background: var(–gradient-card);
border: 1px solid var(–glass-border);
border-radius: 32px;
padding: 50px;
margin-bottom: 40px;
transition: all 0.4s ease;
}
.product-showcase-card:hover {
border-color: var(–primary);
box-shadow: 0 30px 80px rgba(0, 245, 212, 0.1);
}
.product-showcase-card.reverse {
direction: ltr;
}
.product-showcase-card.reverse .product-showcase-content {
direction: rtl;
}
.product-badge {
display: inline-block;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 20px;
}
.product-badge.hot {
background: linear-gradient(135deg, #ef4444, #f97316);
color: white;
}
.product-badge.new {
background: linear-gradient(135deg, var(–primary), var(–secondary));
color: var(–dark-950);
}
.product-badge.affiliate {
background: linear-gradient(135deg, #22c55e, #10b981);
color: white;
}
.product-badge.game {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
}
.product-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.product-title i {
color: var(–primary);
}
.product-subtitle {
font-size: 1.15rem;
color: var(–text-secondary);
margin-bottom: 30px;
line-height: 1.7;
}
.product-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.product-feature {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(0, 245, 212, 0.05);
border-radius: 12px;
border: 1px solid rgba(0, 245, 212, 0.1);
}
.product-feature i {
color: var(–primary);
font-size: 1.1rem;
}
.product-feature span {
font-size: 0.95rem;
color: var(–text-secondary);
}
.product-stats {
display: flex;
gap: 30px;
margin-bottom: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
}
.product-stat {
text-align: center;
}
.product-stat strong {
display: block;
font-size: 1.8rem;
font-weight: 800;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.product-stat span {
font-size: 0.85rem;
color: var(–text-muted);
}
.product-btn {
width: fit-content;
}
.product-showcase-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.product-showcase-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.product-showcase-card:hover .product-showcase-image img {
transform: scale(1.03);
}
@media (max-width: 1024px) {
.product-showcase-card {
grid-template-columns: 1fr;
padding: 30px;
gap: 30px;
}
.product-showcase-card.reverse {
direction: rtl;
}
.product-features-grid {
grid-template-columns: 1fr;
}
.product-stats {
flex-wrap: wrap;
justify-content: center;
}
.product-title {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
.product-stats {
gap: 20px;
}
.product-stat strong {
font-size: 1.4rem;
}
}

/* Paid Courses Section */
.paid-courses-section {
padding: 140px 0;
position: relative;
background: linear-gradient(180deg, #000814 0%, rgba(0, 29, 61, 0.4) 50%, #000814 100%);
}
.paid-courses-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
}
.paid-courses-section .section-header {
text-align: center;
margin-bottom: 80px;
}
.paid-courses-section .section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, rgba(155, 93, 229, 0.15) 0%, rgba(241, 91, 181, 0.15) 100%);
border: 1px solid rgba(155, 93, 229, 0.3);
padding: 12px 28px;
border-radius: 100px;
font-size: 0.9rem;
color: #9b5de5;
margin-bottom: 24px;
}
.paid-courses-section .section-title {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
font-weight: 900;
margin-bottom: 20px;
letter-spacing: -1px;
color: #ffffff;
}
.paid-courses-section .section-title .highlight {
background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.paid-courses-section .section-subtitle {
font-size: 1.2rem;
color: #b8c5d6;
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
}
.paid-courses-section .price-highlight {
display: inline-block;
background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
color: #ffffff;
padding: 8px 24px;
border-radius: 100px;
font-weight: 800;
font-size: 1.3rem;
margin-top: 16px;
box-shadow: 0 10px 40px rgba(155, 93, 229, 0.3);
}
.paid-courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.paid-course-card {
background: linear-gradient(145deg, rgba(155, 93, 229, 0.1) 0%, rgba(0, 29, 61, 0.5) 100%);
border: 1px solid rgba(155, 93, 229, 0.2);
border-radius: 20px;
padding: 28px 32px;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.paid-course-card::before {
content: ”;
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.paid-course-card:hover {
transform: translateX(-8px) translateY(-4px);
border-color: rgba(155, 93, 229, 0.5);
box-shadow:
0 20px 60px rgba(155, 93, 229, 0.2),
inset 0 0 40px rgba(155, 93, 229, 0.03);
}
.paid-course-card:hover::before {
opacity: 1;
}
.paid-course-card.premium-card {
background: linear-gradient(145deg, rgba(241, 91, 181, 0.15) 0%, rgba(155, 93, 229, 0.2) 100%);
border: 2px solid rgba(241, 91, 181, 0.4);
}
.paid-course-card.premium-card:hover {
border-color: #f15bb5;
box-shadow:
0 20px 60px rgba(241, 91, 181, 0.25),
inset 0 0 40px rgba(241, 91, 181, 0.05);
}
.paid-course-icon {
width: 60px;
height: 60px;
background: rgba(155, 93, 229, 0.15);
border: 1px solid rgba(155, 93, 229, 0.25);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.4s ease;
}
.paid-course-card:hover .paid-course-icon {
background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
border-color: transparent;
transform: scale(1.1) rotate(-5deg);
}
.paid-course-icon i {
font-size: 1.6rem;
color: #9b5de5;
transition: color 0.4s ease;
}
.paid-course-card:hover .paid-course-icon i {
color: #ffffff;
}
.paid-course-content {
flex: 1;
}
.paid-course-content h3 {
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 6px;
transition: color 0.3s ease;
}
.paid-course-card:hover .paid-course-content h3 {
color: #9b5de5;
}
.paid-course-content p {
font-size: 0.95rem;
color: #b8c5d6;
line-height: 1.6;
margin: 0;
}
.paid-course-price {
background: linear-gradient(135deg, #9b5de5 0%, #f15bb5 100%);
color: #ffffff;
padding: 8px 16px;
border-radius: 12px;
font-weight: 800;
font-size: 0.9rem;
flex-shrink: 0;
text-align: center;
min-width: 70px;
}
.paid-course-price span {
display: block;
font-size: 0.7rem;
font-weight: 500;
opacity: 0.9;
}
.paid-course-arrow {
width: 40px;
height: 40px;
background: rgba(155, 93, 229, 0.1);
border: 1px solid rgba(155, 93, 229, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.4s ease;
}
.paid-course-arrow i {
color: #9b5de5;
font-size: 0.9rem;
transition: all 0.4s ease;
}
.paid-course-card:hover .paid-course-arrow {
background: #9b5de5;
border-color: #9b5de5;
transform: translateX(-5px);
}
.paid-course-card:hover .paid-course-arrow i {
color: #ffffff;
}
/* Responsive */
@media (max-width: 1024px) {
.paid-courses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.paid-courses-section {
padding: 100px 0;
}
.paid-courses-section .container {
padding: 0 20px;
}
.paid-courses-grid {
grid-template-columns: 1fr;
}
.paid-course-card {
padding: 24px;
flex-wrap: wrap;
}
.paid-course-price {
order: -1;
margin-bottom: 10px;
}
}

/* Free Courses Section */
.free-courses-section {
padding: 140px 0;
position: relative;
background: linear-gradient(180deg, #000814 0%, rgba(0, 29, 61, 0.3) 50%, #000814 100%);
}
.free-courses-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
}
.free-courses-section .section-header {
text-align: center;
margin-bottom: 80px;
}
.free-courses-section .section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, rgba(0, 245, 212, 0.08) 0%, rgba(155, 93, 229, 0.08) 100%);
border: 1px solid rgba(0, 245, 212, 0.15);
padding: 12px 28px;
border-radius: 100px;
font-size: 0.9rem;
color: #00f5d4;
margin-bottom: 24px;
}
.free-courses-section .section-title {
font-family: ‘Rubik’, sans-serif;
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
font-weight: 900;
margin-bottom: 20px;
letter-spacing: -1px;
color: #ffffff;
}
.free-courses-section .section-title .highlight {
background: linear-gradient(135deg, #00f5d4 0%, #9b5de5 50%, #f15bb5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.free-courses-section .section-subtitle {
font-size: 1.2rem;
color: #b8c5d6;
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
}
.free-courses-section .section-subtitle .value-highlight {
color: #fee440;
font-weight: 700;
}
.free-courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.free-course-card {
background: linear-gradient(145deg, rgba(0, 53, 102, 0.3) 0%, rgba(0, 29, 61, 0.5) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
padding: 28px 32px;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.free-course-card::before {
content: ”;
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #00f5d4 0%, #9b5de5 50%, #f15bb5 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.free-course-card:hover {
transform: translateX(-8px) translateY(-4px);
border-color: rgba(0, 245, 212, 0.4);
box-shadow:
0 20px 60px rgba(0, 245, 212, 0.15),
inset 0 0 40px rgba(0, 245, 212, 0.02);
}
.free-course-card:hover::before {
opacity: 1;
}
.free-course-icon {
width: 60px;
height: 60px;
background: rgba(0, 245, 212, 0.08);
border: 1px solid rgba(0, 245, 212, 0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.4s ease;
}
.free-course-card:hover .free-course-icon {
background: linear-gradient(135deg, #00f5d4 0%, #9b5de5 50%, #f15bb5 100%);
border-color: transparent;
transform: scale(1.1) rotate(-5deg);
}
.free-course-icon i {
font-size: 1.6rem;
color: #00f5d4;
transition: color 0.4s ease;
}
.free-course-card:hover .free-course-icon i {
color: #000814;
}
.free-course-content {
flex: 1;
}
.free-course-content h3 {
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 6px;
transition: color 0.3s ease;
}
.free-course-card:hover .free-course-content h3 {
color: #00f5d4;
}
.free-course-content p {
font-size: 0.95rem;
color: #b8c5d6;
line-height: 1.6;
margin: 0;
}
.free-course-arrow {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.4s ease;
}
.free-course-arrow i {
color: #6b7a8f;
font-size: 0.9rem;
transition: all 0.4s ease;
}
.free-course-card:hover .free-course-arrow {
background: #00f5d4;
border-color: #00f5d4;
transform: translateX(-5px);
}
.free-course-card:hover .free-course-arrow i {
color: #000814;
}
/* Responsive */
@media (max-width: 1024px) {
.free-courses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.free-courses-section {
padding: 100px 0;
}
.free-courses-section .container {
padding: 0 20px;
}
.free-courses-grid {
grid-template-columns: 1fr;
}
.free-course-card {
padding: 24px;
}
}

/* WhatsApp Popup Styles */
.wa-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 8, 20, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.wa-popup-overlay.active {
opacity: 1;
visibility: visible;
}
.wa-popup-container {
position: relative;
width: 90%;
max-width: 440px;
background: linear-gradient(145deg, rgba(0, 53, 102, 0.95) 0%, rgba(0, 29, 61, 0.98) 100%);
border: 2px solid rgba(37, 211, 102, 0.3);
border-radius: 28px;
padding: 40px 32px;
text-align: center;
transform: scale(0.8) translateY(50px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 50px 100px rgba(0, 0, 0, 0.5),
0 0 80px rgba(37, 211, 102, 0.15);
}
.wa-popup-overlay.active .wa-popup-container {
transform: scale(1) translateY(0);
}
/* Close button */
.wa-popup-close {
position: absolute;
top: 16px;
left: 16px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 100;
}
.wa-popup-close:hover {
background: rgba(255, 255, 255, 0.25);
border-color: #ffffff;
transform: rotate(90deg);
}
.wa-popup-close-icon {
color: #ffffff;
font-size: 20px;
font-weight: bold;
line-height: 1;
}
/* Secret badge */
.wa-popup-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(37, 211, 102, 0.2) 0%, rgba(0, 245, 212, 0.2) 100%);
border: 1px solid rgba(37, 211, 102, 0.4);
padding: 8px 20px;
border-radius: 100px;
font-size: 0.85rem;
color: #25D366;
font-weight: 700;
margin-bottom: 24px;
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
50% { box-shadow: 0 0 20px 5px rgba(37, 211, 102, 0.2); }
}
/* WhatsApp icon */
.wa-popup-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
animation: iconFloat 3s ease-in-out infinite;
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.wa-popup-icon i {
font-size: 40px;
color: #ffffff;
}
/* Title */
.wa-popup-title {
font-family: ‘Rubik’, sans-serif;
font-size: 1.8rem;
font-weight: 900;
color: #ffffff;
margin-bottom: 14px;
line-height: 1.3;
}
.wa-popup-title .secret-word {
color: #25D366;
text-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
}
/* Description */
.wa-popup-desc {
font-size: 1rem;
color: #b8c5d6;
line-height: 1.7;
margin-bottom: 28px;
}
/* Features */
.wa-popup-features {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 28px;
text-align: right;
}
.wa-popup-feature {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(37, 211, 102, 0.08);
border: 1px solid rgba(37, 211, 102, 0.15);
border-radius: 12px;
transition: all 0.3s ease;
}
.wa-popup-feature:hover {
background: rgba(37, 211, 102, 0.15);
transform: translateX(-5px);
}
.wa-popup-feature-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wa-popup-feature-icon i {
font-size: 14px;
color: #ffffff;
}
.wa-popup-feature span {
font-size: 0.95rem;
color: #ffffff;
font-weight: 500;
}
/* CTA Button */
.wa-popup-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 18px 36px;
background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
color: #ffffff;
font-size: 1.15rem;
font-weight: 800;
font-family: ‘Heebo’, sans-serif;
text-decoration: none;
border-radius: 16px;
border: none;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
position: relative;
overflow: hidden;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.wa-popup-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 ease;
}
.wa-popup-cta:hover::before {
left: 100%;
}
.wa-popup-cta:hover {
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(37, 211, 102, 0.5);
background: linear-gradient(135deg, #25D366 0%, #00f5d4 100%);
}
.wa-popup-cta i {
font-size: 24px;
color: #ffffff;
animation: ctaIconPulse 1.5s ease-in-out infinite;
}
.wa-popup-cta span {
color: #ffffff;
}
@keyframes ctaIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Urgency */
.wa-popup-urgency {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
padding: 10px 20px;
background: rgba(241, 91, 181, 0.1);
border: 1px solid rgba(241, 91, 181, 0.2);
border-radius: 10px;
}
.wa-popup-urgency-dot {
width: 8px;
height: 8px;
background: #f15bb5;
border-radius: 50%;
animation: urgencyPulse 1s ease-in-out infinite;
}
@keyframes urgencyPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.wa-popup-urgency span {
font-size: 0.85rem;
color: #f15bb5;
font-weight: 600;
}
/* Later link */
.wa-popup-later {
display: block;
margin-top: 16px;
color: #6b7a8f;
font-size: 0.85rem;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease;
}
.wa-popup-later:hover {
color: #b8c5d6;
}
/* Responsive */
@media (max-width: 768px) {
.wa-popup-container {
padding: 32px 24px;
margin: 16px;
border-radius: 22px;
max-width: 360px;
}
.wa-popup-close {
width: 32px;
height: 32px;
top: 12px;
left: 12px;
}
.wa-popup-close-icon {
font-size: 18px;
}
.wa-popup-badge {
padding: 6px 16px;
font-size: 0.8rem;
margin-bottom: 18px;
}
.wa-popup-icon {
width: 65px;
height: 65px;
margin-bottom: 18px;
}
.wa-popup-icon i {
font-size: 32px;
}
.wa-popup-title {
font-size: 1.5rem;
margin-bottom: 10px;
}
.wa-popup-desc {
font-size: 0.9rem;
margin-bottom: 20px;
}
.wa-popup-features {
gap: 10px;
margin-bottom: 22px;
}
.wa-popup-feature {
padding: 10px 14px;
gap: 10px;
}
.wa-popup-feature-icon {
width: 28px;
height: 28px;
}
.wa-popup-feature-icon i {
font-size: 12px;
}
.wa-popup-feature span {
font-size: 0.85rem;
}
.wa-popup-cta {
padding: 16px 28px;
font-size: 1rem;
border-radius: 14px;
}
.wa-popup-cta i {
font-size: 20px;
}
.wa-popup-urgency {
padding: 8px 16px;
margin-top: 16px;
}
.wa-popup-urgency span {
font-size: 0.8rem;
}
.wa-popup-later {
margin-top: 12px;
font-size: 0.8rem;
}
}
@media (max-width: 380px) {
.wa-popup-container {
padding: 28px 20px;
max-width: 320px;
}
.wa-popup-title {
font-size: 1.3rem;
}
.wa-popup-feature span {
font-size: 0.8rem;
}
}

✕

ערוץ סודי ובלעדי

הצטרפו לערוץ הסודי שלי!

תוכן בלעדי שלא תמצאו בשום מקום אחר 🔥
רק למי שבפנים!

טיפים וסודות שלא משתפים בשום מקום
עדכונים ראשונים על הזדמנויות חמות
גישה ישירה אליי ולקהילה הסגורה

הצטרפו עכשיו! לחצו עליי 👆

כרגע אונליין – הצטרפו לפני שתפספסו!
אולי מאוחר יותר

         דרופשיפינג TestaMInd ליאור טסטא   84 Google ביקורות   כתוב ביקורת                 פורסם ב-        Leon Pom     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. קורסים הכי שווים
המון ידע סופר חשוב         פורסם ב-        אודליה פנקר     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. "לאחר מאבק להרים את העסק שלי, יצרתי קשר עם ליאור טסטה. כבר מהשיחה הראשונה הבנתי שמדובר באדם מקצועי שיודע בדיוק מה הוא עושה. ליאור מוביל אותי בביטחון ובמומחיות, ומבחינתי זאת רק ההתחלה תודה על הליווי והעזרה         פורסם ב-        moshe ben hemo     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. אלוף הארץ בכל מה שקשור לשיווק פרסום שיווק שותפים אוטומציות מערכות הביקורת הכי שווה בארץ ההמלצה הכי חמה בארץ         פורסם ב-        ben fitoussi     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. ליאור הכי טוב שיש!! איש ישר עם כל כך הרבה ידע שרק כיף ללמוד הדרך להצלחה בטוחה איתך אני שמח שבחרתי בך❤️         פורסם ב-        נתנאל NETANEL מלכה MALKA     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. אחלה ליאור שבעולם תמיד כאן בשבילי ועוזר בכל         פורסם ב-        asaf eden     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. תותח על, סופר מקצועי, ענייניו על ידע נרחב הוא ממש מתייחס לעולם שיווק כמו משחק מחשב אז כן זה כיף ביותר ללמוד ממנו. רק טיפ קטן ממליץ קודם לצפות בהכל ואז לחזור מהתחלה ולהתחיל לתרגל זה יעזור מאוד בתהליך הלמידה. בקיצר מומלץ בחום. תודה רבה ליאור 🙏         פורסם ב-        Ran Melamdovski     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. מספר 1, חברים ליאור הוא פשוט הצגה בעולם הזה!
שירות מצוין ותוצאות מעולות, אחרי מספר עבודות שבחנתי את ליאור הוא פשוט הפתיע אותי לטובה ב-ע-נ-ק! אני ממליץ בחום         פורסם ב-        amit joliyan     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. הבן אדם מקצוען בתחום, מעלה סרטונים חשובים לקהילה שווה לעקוב אחריו בכל פלטפורמה. עוזר לאנשים שמתעניינים בתחום שיווק שותפים / אוטומציות / איביי / אטסי / שופיפיי / בניית קהילות ועוד...
בקיצור הבחור אלוף כל שקל שתשלמו תרוויחו פי כמה. והכי חשוב הוא מדבר איתך בגובה העיניים ורוצה לעזור בכל שאלה ובקשה.         פורסם ב-        מירי לוי     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. ממליצה בהרבה חום ואהבה על המורה מספר 1 בארץ ליאור טסטא ..אלוף!! בן אדם אמין ,מקצועי , סבלני תמיד זמין לכל שאלה שלי לא משנה באיזו שעה ,נותן לי בטחון והמחירים שלו שווים לכל כיס ...שמחה מאוד שסוף סוף אחרי הרבה בזבוז כספים ואנשים שעבדו עליי פגשתי את האדם הכי אמין ביקום ..ליאור היקר תודה על הכל ,בזכותך התקדמתי בחיים מאחת שלא ידעה להפעיל מחשב אלוף !!!!         פורסם ב-        ziva dagan     Trustindex מוודא שהמקור המקורי של הסקירה הוא Google. אני ממש כועסת על עצמי שלא הגעתי לליאור חצי שנה לפני.אחרי שרכשתי שני קורסים באלפי ש"ח שכל כוחו היה לשווא. לליאור הגעתי במקרה בעקבות סרטון  נכנסתי לאתר ולא האמנתי. ידע מקצועי הכי מתקדם
אוטומציה לתהליכי עבודה )מהמתקדמים שיש בשוק ) שהוא מפתח בעצמו( שלא לדבר על העלות האפסית
של חלק מהקורסים). תומך גם בקורס שנרכש ב100 ש"ח ויש הרבה כאילו. יש קורסים חינמיים. ליאור מחלק מהידע שלו באהבה. חשוב לו לשתף ושאנשים יצליחו לא ראיתי הכשרה בתחום הדיגיטל שהיא ברמה גבוהה ממנו בארץ האיש פנומן. זו אינה המלצה של "על הדרך" זו המלצה משנת חיים. *אלוף*