/* CSS Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Enhanced mobile viewport */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
position: relative;
width: 100%;
}
/* Remove underlines from all links */
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Improved touch scrolling */
body {
-webkit-overflow-scrolling: touch;
overscroll-behavior: none;
overflow-x: hidden;
position: relative;
width: 100%;
min-height: 100vh;
}
:root {
/* Colors */
--sage-green: #A3B3A3;
--gold: #D4B896;
--dark-gray: #4A4A4A;
--light-gray: #8A8A8A;
--cream: #F5F3F0;
--white: #FFFFFF;
--red: #FF5F56;
--yellow: #FFBD2E;
--green: #27CA3F;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--h1-size: 4rem;
--h2-size: 2.5rem;
--h3-size: 1.25rem;
--body-size: 1.125rem;
--small-size: 0.875rem;
/* Spacing */
--section-padding: 5rem 0;
--container-padding: 0 2rem;
--max-width: 1400px;
/* Consistent spacing scale */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 5rem;
/* Consistent typography scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
/* Shadows */
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--dark-gray);
background-color: #FFFFFF;
overflow-x: hidden;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--container-padding);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-image {
width: 32px;
height: 32px;
object-fit: contain;
}
.logo-icon {
width: 32px;
height: 32px;
position: relative;
}
.logo-circle {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--sage-green), var(--gold));
border-radius: 50%;
position: relative;
}
.logo-circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
}
.logo-text {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
}
.nav-menu {
display: flex;
gap: 2rem;
}
.nav-link {
text-decoration: none;
color: #36454F;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-link:hover {
color: var(--dark-gray);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--sage-green);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.nav-buttons {
display: flex;
align-items: center;
gap: 1rem;
}
.btn-primary {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
transform: translateY(-1px);
}
.hamburger {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
padding: 8px;
min-width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
}
.hamburger span {
width: 24px;
height: 2px;
background: var(--dark-gray);
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
padding: 6rem 0 4rem;
min-height: 100vh;
display: flex;
align-items: center;
background-image: url('hero background3.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
}
/* Flip Card Styles */
.flip-card {
background-color: transparent;
width: 280px;
height: 450px;
perspective: 1000px;
margin: 0 auto;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
cursor: pointer;
}
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 20px;
}
.flip-card-back {
transform: rotateY(180deg);
}
/* Achievement Card (Front) */
.achievement-card {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
width: 100%;
height: auto;
border-radius: 20px;
padding: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
transform: perspective(1000px) rotateX(1deg) rotateY(-0.5deg);
transition: transform 0.3s ease;
}
.achievement-card:hover {
transform: perspective(1000px) rotateX(0.5deg) rotateY(-0.2deg) translateY(-3px);
}
.card-header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 0.5rem;
}
.level-badge {
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
box-shadow:
0 8px 16px rgba(139, 92, 246, 0.5),
0 4px 8px rgba(139, 92, 246, 0.3),
0 2px 4px rgba(139, 92, 246, 0.2),
inset 0 2px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transform: translateZ(10px);
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
color: #6b7280;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.card-title {
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #4b5563 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.8rem;
margin-top: -0.8rem;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
letter-spacing: 0.5px;
transform: translateZ(15px);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.character-container {
margin-bottom: 1rem;
margin-top: 0.3rem;
}
.character-image {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #f59e0b 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 10px 20px rgba(0, 0, 0, 0.2),
0 5px 10px rgba(0, 0, 0, 0.1),
inset 0 3px 6px rgba(255, 255, 255, 0.5),
inset 0 -3px 6px rgba(0, 0, 0, 0.15);
border: 4px solid rgba(255, 255, 255, 0.8);
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
}
50% {
transform: translateY(-8px) rotate(1deg) scale(1.02);
}
}
.character-placeholder {
font-size: 3rem;
}
.character-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.card-quote {
font-style: italic;
color: #4b5563;
font-size: 0.85rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.progress-section {
width: 100%;
}
.progress-text {
color: #4b5563;
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
.progress-bar {
width: 100%;
height: 8px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
border-radius: 6px;
overflow: hidden;
margin-bottom: 0.8rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(139, 92, 246, 0.2);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
border-radius: 6px;
transition: width 0.4s ease;
box-shadow:
0 2px 4px rgba(139, 92, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.stats-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
color: #6b7280;
font-size: 0.7rem;
cursor: pointer;
padding: 0.2rem 0.4rem;
border-radius: 15px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.6) 100%);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: all 0.3s ease;
transform: translateZ(5px);
}
.stats-link:hover {
transform: translateY(-1px) translateZ(8px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
}
.refresh-icon {
font-size: 0.9rem;
}
/* Progress Card (Back) */
.progress-card {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
width: 100%;
height: auto;
border-radius: 20px;
padding: 0.5rem;
display: flex;
flex-direction: column;
position: relative;
transform: perspective(1000px) rotateX(1deg) rotateY(0.5deg);
transition: transform 0.3s ease;
overflow: hidden;
}
.progress-card:hover {
transform: perspective(1000px) rotateX(0.5deg) rotateY(0.2deg) translateY(-3px);
}
.progress-header {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
margin-bottom: 0.2rem;
}
.progress-content {
flex: 1;
display: flex;
flex-direction: column;
}
.patience-badge {
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
color: white;
padding: 0.3rem 0.6rem;
border-radius: 15px;
font-size: 0.65rem;
font-weight: 600;
text-align: center;
margin: 0 auto 0.5rem;
width: fit-content;
box-shadow:
0 6px 12px rgba(139, 92, 246, 0.4),
0 3px 6px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transform: translateZ(10px);
}
.progress-quote {
font-style: italic;
color: #374151;
font-size: 0.8rem;
margin-bottom: 0.8rem;
line-height: 1.3;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transform: translateZ(5px);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.level-progress-section {
flex: 1;
}
.level-progress-title {
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
text-align: center;
margin-bottom: 0.75rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transform: translateZ(8px);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.progress-metric {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
border-radius: 6px;
padding: 0.3rem;
margin-bottom: 0.3rem;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.1),
0 2px 4px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
transform: translateZ(3px);
transition: transform 0.2s ease;
}
.progress-metric:hover {
transform: translateZ(6px) translateY(-1px);
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.15),
0 3px 6px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.metric-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.metric-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 600;
}
.metric-icon.purple {
background: #8b5cf6;
color: white;
}
.metric-icon.pink {
background: #ec4899;
color: white;
}
.metric-icon.teal {
background: #14b8a6;
color: white;
}
.metric-label {
font-size: 0.75rem;
font-weight: 600;
color: #374151;
text-align: right;
}
.info-icon {
width: 16px;
height: 16px;
border-radius: 50%;
background: #d1d5db;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
}
.metric-stats {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 0.5rem;
}
.metric-numbers {
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
}
.metric-subtext {
font-size: 0.65rem;
color: #6b7280;
}
.metric-progress-bar {
width: 100%;
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.metric-progress-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease;
}
.metric-progress-fill.purple {
background: #8b5cf6;
}
.metric-progress-fill.pink {
background: #ec4899;
}
.metric-progress-fill.teal {
background: #14b8a6;
}
.hero-container {
position: relative;
z-index: 2;
}
.hero-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--container-padding);
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
padding-left: 2rem;
padding-right: 4rem;
}
.hero-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 1rem;
max-width: 85%;
color: white;
text-align: left;
}
/* Mobile override for hero title */
@media (max-width: 768px) {
.hero-title {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto 1.5rem auto !important;
width: 100% !important;
}
.hero-title .title-line {
text-align: center !important;
}
}
.title-line {
display: block;
white-space: nowrap;
}
.title-line.dark {
color: white;
}
.title-line.gold {
color: var(--gold);
}
.title-line.sage {
color: var(--sage-green);
}
.title-line.gradient {
background: linear-gradient(135deg, var(--sage-green), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: var(--body-size);
color: white;
margin-bottom: 1.5rem;
line-height: 1.6;
max-width: 85%;
text-align: left;
}
/* Mobile override for hero description */
@media (max-width: 768px) {
.hero-description {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto 2rem auto !important;
width: 100% !important;
}
}
/* Trust Banner */
.trust-banner {
display: inline-block;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border: 1px solid rgba(31, 162, 160, 0.3);
border-radius: 50px;
padding: 0.5rem 1rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.3);
}
.trust-content {
display: flex;
align-items: center;
gap: 0.5rem;
}
.trust-icon {
font-size: 1rem;
color: white;
}
.trust-text {
font-size: 0.875rem;
font-weight: 500;
color: white;
}
/* Benefit Chips */
.benefit-chips {
display: flex;
gap: 1rem;
margin: 1rem 0;
flex-wrap: wrap;
justify-content: center;
}
.chip {
background: rgba(163, 179, 163, 0.1);
border: 1px solid rgba(163, 179, 163, 0.2);
border-radius: 25px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--sage-green);
transition: all 0.3s ease;
}
.chip:hover {
background: rgba(163, 179, 163, 0.15);
transform: translateY(-1px);
}
/* Hero Buttons */
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
justify-content: center;
align-items: center;
}
.btn-primary-hero {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6);
background-size: 300% 300%;
color: white;
border: 2px solid white;
border-radius: 12px;
padding: 1.25rem 5rem;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(163, 179, 163, 0.3);
min-width: 360px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
animation: gradientShift 10s ease-in-out infinite;
}
.btn-primary-hero:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(163, 179, 163, 0.4);
}
/* Video Demo Container */
.video-demo-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
background: white;
}
.demo-video {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
.video-play-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(31, 162, 160, 0.9), rgba(43, 179, 176, 0.8));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
opacity: 1;
transition: opacity 0.3s ease;
border-radius: 16px;
cursor: pointer;
}
.video-play-btn {
background: rgba(255, 255, 255, 0.2);
border: 3px solid white;
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
}
.video-play-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.play-icon {
font-size: 2rem;
color: white;
margin-left: 4px; /* Slight offset to center the triangle */
}
.video-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.video-description {
font-size: 1rem;
opacity: 0.9;
max-width: 300px;
line-height: 1.4;
}
/* Video Controls */
.video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-radius: 0 0 16px 16px;
}
.control-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
color: white;
font-size: 1.2rem;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.time-display {
color: white;
font-size: 0.875rem;
font-weight: 500;
opacity: 0.9;
margin-left: 0.5rem;
}
/* Demo Link */
.demo-link-container {
text-align: center;
margin: 0;
}
.demo-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0 0 1rem 0;
}
.demo-link {
color: var(--sage-green);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
}
.demo-link:hover {
color: var(--gold);
transform: translateX(4px);
}
/* Scroll Down Link */
.scroll-down-container {
text-align: center;
margin: 0.5rem 0 1rem 0;
}
.scroll-down-link {
color: var(--light-gray);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.scroll-down-link:hover {
color: var(--sage-green);
transform: translateY(2px);
}
.scroll-text {
font-size: 0.875rem;
}
.scroll-arrow {
font-size: 1.25rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-3px);
}
60% {
transform: translateY(-2px);
}
}
.btn-text {
font-weight: 600;
}
.btn-icon {
font-size: 1.25rem;
}
/* Privacy and Donation Lines */
.hero-features {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-top: -0.5rem;
flex-wrap: nowrap;
}
.feature-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
text-align: center;
}
.feature-icon {
width: 12px;
height: 12px;
color: var(--primary-color);
flex-shrink: 0;
margin-top: -2px;
}
.feature-text {
font-size: 0.75rem;
font-weight: 400;
color: var(--medium-gray);
white-space: nowrap;
line-height: 1.2;
}
.hero-features-simple {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-top: -0.5rem;
flex-wrap: wrap;
}
.feature-item-simple {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
}
.feature-icon-simple {
width: 12px;
height: 12px;
color: white;
flex-shrink: 0;
}
.hero-features-simple .feature-text {
font-size: 0.75rem;
font-weight: 400;
color: white;
white-space: nowrap;
}
.learn-more-link {
text-align: center;
margin-top: 1rem;
}
.learn-link {
color: white;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s ease;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.learn-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.learn-link:hover {
color: #8B5CF6;
}
.learn-link:hover::after {
width: 100%;
}
/* Beta Access Banner */
.beta-banner {
background: linear-gradient(135deg, rgba(163, 179, 163, 0.15), rgba(212, 184, 150, 0.15));
backdrop-filter: blur(10px);
border-radius: 50px;
padding: 0.75rem 1.5rem;
margin: 0 0 1.25rem 0;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(163, 179, 163, 0.3);
display: inline-flex;
align-items: center;
}
.beta-banner:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(163, 179, 163, 0.2), rgba(212, 184, 150, 0.2));
border-color: rgba(163, 179, 163, 0.4);
box-shadow: 0 4px 12px rgba(163, 179, 163, 0.15);
}
.beta-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.beta-text {
color: var(--sage-green);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.2px;
}
.beta-arrow {
color: var(--sage-green);
font-size: 1rem;
font-weight: 400;
transition: all 0.3s ease;
}
.beta-banner:hover .beta-arrow {
transform: translateX(2px);
}
.hero-buttons {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.btn-chrome-container,
.btn-play-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
align-items: flex-start;
}
.btn-chrome {
background: var(--sage-green);
color: white;
border: 2px solid var(--light-gray);
padding: 1.25rem 2.5rem;
border-radius: 12px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
white-space: nowrap;
animation: breathing 3s ease-in-out infinite;
min-width: 200px;
}
.btn-main-text {
font-size: 1rem;
font-weight: 600;
line-height: 1;
}
.btn-sub-text {
font-size: 0.75rem;
font-weight: 400;
color: var(--light-gray);
line-height: 1.2;
text-align: center;
opacity: 0.8;
}
.btn-donation-text {
font-size: 0.75rem;
font-weight: 500;
color: var(--sage-green);
line-height: 1.2;
text-align: center;
margin-top: 0.25rem;
opacity: 0.9;
}
@keyframes breathing {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.chrome-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.btn-chrome:hover {
background: #8FA68F;
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.btn-play {
background: transparent;
border: 2px solid var(--light-gray);
color: var(--dark-gray);
padding: 1.25rem 2.5rem;
border-radius: 12px;
font-size: 1.125rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
min-width: 200px;
margin-top: 0;
}
.btn-play:hover {
border-color: var(--sage-green);
color: var(--sage-green);
transform: translateY(-1px);
}
.play-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-tagline {
margin-top: 1.5rem;
text-align: left;
}
.tagline-text {
font-size: 0.875rem;
color: var(--light-gray);
margin: 0;
font-weight: 400;
letter-spacing: 0.2px;
opacity: 0.8;
}
.hero-privacy {
margin-top: 1rem;
}
.privacy-note {
font-size: 0.85rem;
color: var(--light-gray);
margin: 0;
text-align: center;
font-style: italic;
opacity: 0.8;
}
/* Demo Mockup */
.hero-visual {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: -4rem;
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.video-demo-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.card-description {
position: absolute;
top: 100%;
right: 0;
margin-top: -1rem;
text-align: center;
max-width: 280px;
padding: 0 1rem;
z-index: 10;
transform: translateX(1rem);
}
.card-description p {
color: rgba(255, 255, 255, 0.95);
font-size: 0.9rem;
line-height: 1.5;
font-weight: 400;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin: 0;
}
.demo-mockup {
position: relative;
}
/* Free Badge */
.free-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, var(--sage-green), var(--gold));
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(163, 179, 163, 0.3);
z-index: 10;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes breathe {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.free-badge {
animation: none;
}
.circle-outer {
animation: none;
}
}
.browser-frame {
background: white;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
width: 400px;
height: 500px;
position: relative;
transition: transform 0.3s ease;
}
.browser-frame:hover {
transform: translateY(-4px);
}
.browser-header {
background: #f1f3f4;
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #e8eaed;
position: relative;
z-index: 2;
}
.browser-dots {
display: flex;
gap: 6px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot.red {
background: var(--red);
}
.dot.yellow {
background: var(--yellow);
}
.dot.green {
background: var(--green);
}
.browser-url {
background: white;
padding: 0.5rem 0.75rem;
border-radius: 4px;
flex: 1;
font-size: 0.875rem;
position: relative;
}
.url-text {
color: var(--dark-gray);
}
.cursor {
color: var(--dark-gray);
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.typing {
overflow: hidden;
white-space: nowrap;
animation: typing 2s steps(11, end) infinite;
}
@keyframes typing {
0% { width: 0; }
50% { width: 6.5em; }
100% { width: 6.5em; }
}
.browser-content {
padding: 1.5rem;
height: calc(100% - 80px);
position: relative;
}
.chatgpt-interface {
height: 100%;
display: flex;
flex-direction: column;
background: white;
}
.chat-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #e5e5e5;
}
.chat-header h2 {
font-size: 1rem;
color: #1f1f1f;
margin: 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.version {
color: #6b7280;
font-weight: 400;
font-size: 0.875rem;
}
.chat-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 1.5rem;
position: relative;
}
.welcome-section {
text-align: center;
margin-bottom: 2rem;
}
.welcome-title {
font-size: 1.625rem;
font-weight: 400;
color: #1f1f1f;
margin: 0;
letter-spacing: -0.025em;
white-space: nowrap;
}
.chat-input-container {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
right: 1.5rem;
}
.chat-input {
background: white;
border: 1px solid #d1d5db;
border-radius: 1.5rem;
padding: 0.875rem 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.chat-input:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.input-field {
flex: 1;
border: none;
outline: none;
font-size: 1rem;
color: #1f1f1f;
background: transparent;
}
.input-field::placeholder {
color: #9ca3af;
}
.input-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mic-btn,
.attach-btn {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
padding: 0.375rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.mic-btn:hover,
.attach-btn:hover {
background: #e5e7eb;
}
.mic-btn svg,
.attach-btn svg {
width: 16px;
height: 16px;
}
/* Intention Selection Overlay */
.intention-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #8B9FE8, #B794D4);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
opacity: 0;
transform: scale(0.92) translateY(10px);
transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.intention-popup {
background: white;
width: 420px;
max-height: 600px;
border-radius: 20px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow-y: auto;
}
.intention-header {
display: flex;
justify-content: flex-end;
margin-bottom: 0.5rem;
}
.intention-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.intention-subtitle {
font-size: 0.875rem;
color: var(--light-gray);
margin-bottom: 1.5rem;
line-height: 1.4;
}
.intention-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.intention-option {
background: #f8f9fa;
border-radius: 12px;
padding: 1rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
border: 2px solid transparent;
text-align: left;
}
.intention-option:hover {
background: #f0f0f0;
transform: translateY(-2px);
}
.intention-option.selected {
background: #e8f4fd;
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.intention-option.selected .intention-sparkle {
opacity: 1;
animation: sparkle 2s ease-in-out infinite;
}
.intention-icon {
font-size: 1.25rem;
margin-bottom: 0.375rem;
display: block;
}
.intention-info h4 {
font-size: 0.875rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 0.15rem;
}
.intention-info p {
font-size: 0.75rem;
color: var(--light-gray);
margin: 0;
line-height: 1.2;
}
.intention-sparkle {
position: absolute;
top: 0.75rem;
right: 0.75rem;
font-size: 0.875rem;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes sparkle {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(90deg) scale(1.1); }
50% { transform: rotate(180deg) scale(1); }
75% { transform: rotate(270deg) scale(1.1); }
}
/* Breathing Overlay */
.breathing-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f8f6f1;
display: flex;
align-items: center;
justify-content: center;
z-index: 11;
opacity: 0;
transform: scale(0.95);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-radius: 12px;
}
.breathing-popup {
background: transparent;
width: 100%;
height: 100%;
padding: 1.5rem;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.timer {
font-size: 1rem;
font-weight: 600;
color: var(--dark-gray);
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
color: var(--light-gray);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.breathing-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 0.5rem;
}
.breathing-subtitle {
font-size: 0.875rem;
color: var(--light-gray);
margin-bottom: 1.5rem;
line-height: 1.4;
}
.breathing-circle {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto 0.75rem;
}
.circle-outer, .circle-middle, .circle-inner {
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-outer {
width: 160px;
height: 160px;
background: rgba(255, 235, 59, 0.3);
animation: breathe 6s ease-in-out infinite;
}
.circle-middle {
width: 120px;
height: 120px;
background: rgba(255, 235, 59, 0.5);
animation: breathe-medium 12s ease-in-out infinite 0.5s;
}
.circle-inner {
width: 80px;
height: 80px;
background: #FFD54F;
display: flex;
align-items: center;
justify-content: center;
animation: breathe-fast 12s ease-in-out infinite 1s;
}
@keyframes breathe-slow {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes breathe-medium {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes breathe-fast {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.2); }
}
.breathe-text {
color: white;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
}
.breathing-quote {
font-size: 0.875rem;
color: var(--light-gray);
font-style: italic;
margin: 0;
}
/* Intention Input Box (popup within breathing screen) */
.intention-input-box {
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
background: white;
border-radius: 8px;
padding: 0.875rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 5;
}
.intention-input-form {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.intention-textarea {
width: 100%;
min-height: 50px;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-family: inherit;
font-size: 0.8rem;
color: var(--dark-gray);
background: #fafafa;
resize: vertical;
box-sizing: border-box;
}
.intention-textarea::placeholder {
color: #9ca3af;
font-style: italic;
}
.intention-textarea:focus {
outline: none;
border-color: var(--sage-green);
box-shadow: 0 0 0 2px rgba(163, 179, 163, 0.2);
background: white;
}
.begin-intention-btn {
background: #B8860B;
color: white;
border: none;
padding: 0.625rem 1rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.begin-intention-btn:hover {
background: #9A7109;
transform: translateY(-1px);
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed !important;
top: 100% !important;
left: 0 !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px) !important;
flex-direction: column !important;
padding: 2rem !important;
gap: 1rem !important;
transform: translateY(-100%) !important;
opacity: 0 !important;
visibility: hidden !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
z-index: 999 !important;
display: flex !important;
}
.nav-menu.active {
transform: translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
}
.hamburger {
display: flex !important;
z-index: 1001 !important;
position: relative !important;
background: none !important;
border: none !important;
outline: none !important;
cursor: pointer !important;
padding: 8px !important;
min-width: 44px !important;
min-height: 44px !important;
}
.hamburger:focus {
outline: 2px solid #1FA2A0 !important;
outline-offset: 2px !important;
}
.hamburger:hover {
background: rgba(0, 0, 0, 0.05) !important;
border-radius: 4px !important;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.nav-link {
font-size: 1.125rem;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}
.nav-link:last-child {
border-bottom: none;
}
.hero-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
padding: 0 1rem;
}
.hero-title {
font-size: 2.5rem;
text-align: center !important;
margin: 0 auto 1.5rem auto;
max-width: 100%;
}
.hero-description {
text-align: center !important;
margin: 0 auto 2rem auto;
max-width: 100%;
font-size: 1.125rem;
line-height: 1.6;
}
.hero-buttons {
justify-content: center;
margin: 2rem auto;
width: 100%;
}
.btn-primary-hero {
width: 100%;
max-width: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.benefit-chips {
flex-direction: column;
gap: 0.75rem;
margin: 1.5rem 0;
}
.chip {
text-align: center;
padding: 0.75rem 1rem;
}
.btn-primary-hero {
width: 100%;
justify-content: center;
}
.privacy-line {
flex-direction: column;
gap: 0.25rem;
text-align: center;
}
.hero-tagline {
margin-top: 1.25rem;
}
.tagline-text {
font-size: 0.8rem;
}
.hero-privacy {
text-align: center;
}
.privacy-note {
font-size: 0.8rem;
}
/* Beta Banner Mobile Styles */
.beta-banner {
margin: 0 0 1rem 0;
padding: 0.625rem 1.25rem;
border-radius: 40px;
}
.beta-text {
font-size: 0.85rem;
letter-spacing: 0.15px;
}
.beta-arrow {
font-size: 0.9rem;
}
.browser-frame {
width: 350px;
height: 450px;
}
.breathing-popup {
width: 280px;
height: 360px;
padding: 1.25rem;
}
.breathing-circle {
width: 130px;
height: 130px;
}
.circle-outer {
width: 130px;
height: 130px;
}
.circle-middle {
width: 95px;
height: 95px;
}
.circle-inner {
width: 65px;
height: 65px;
}
.intention-popup {
width: 350px;
max-height: 520px;
padding: 1.25rem;
}
.intention-title {
font-size: 1.125rem;
}
.intention-subtitle {
font-size: 0.8rem;
}
.intention-option {
padding: 0.875rem;
}
.intention-icon {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
text-align: center !important;
margin: 0 auto 1rem auto;
max-width: 100%;
}
.hero-description {
text-align: center !important;
margin: 0 auto 1.5rem auto;
max-width: 100%;
font-size: 1rem;
line-height: 1.5;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.video-demo-container {
width: 100%;
max-width: 300px;
margin: 2rem auto 0 auto;
border-radius: 12px;
overflow: hidden;
}
.demo-video {
width: 100%;
height: auto;
display: block;
}
.hero-visual {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
}
.video-play-btn {
width: 60px;
height: 60px;
}
.play-icon {
font-size: 1.5rem;
}
.video-title {
font-size: 1.25rem;
}
.video-description {
font-size: 0.9rem;
max-width: 250px;
}
.video-controls {
padding: 0.75rem;
gap: 0.75rem;
}
.control-btn {
width: 36px;
height: 36px;
font-size: 1rem;
}
.time-display {
font-size: 0.8rem;
}
.btn-chrome,
.btn-play {
width: 100%;
justify-content: center;
padding: 0.875rem 1.5rem;
}
.btn-content {
align-items: center;
text-align: center;
}
.btn-main-text {
font-size: 0.9rem;
}
.btn-sub-text {
font-size: 0.7rem;
}
.hero-tagline {
margin-top: 1rem;
}
.tagline-text {
font-size: 0.8rem;
line-height: 1.4;
}
/* Beta Banner Small Mobile Styles */
.beta-banner {
margin: 0 0 1rem 0;
padding: 0.5rem 1rem;
border-radius: 30px;
}
.beta-text {
font-size: 0.8rem;
letter-spacing: 0.1px;
}
.beta-arrow {
font-size: 0.85rem;
}
.browser-frame {
width: 100%;
max-width: 320px;
height: 400px;
}
.breathing-popup {
width: 260px;
height: 320px;
padding: 1rem;
}
.breathing-title {
font-size: 1.05rem;
}
.breathing-subtitle {
font-size: 0.75rem;
}
.breathing-circle {
width: 100px;
height: 100px;
}
.circle-outer {
width: 100px;
height: 100px;
}
.circle-middle {
width: 75px;
height: 75px;
}
.circle-inner {
width: 50px;
height: 50px;
}
.breathe-text {
font-size: 0.875rem;
}
.intention-popup {
width: 320px;
max-height: 480px;
padding: 1rem;
}
.intention-title {
font-size: 1rem;
line-height: 1.3;
}
.intention-subtitle {
font-size: 0.7rem;
margin-bottom: 1.25rem;
}
.intention-grid {
gap: 0.625rem;
}
.intention-option {
padding: 0.75rem;
}
.intention-icon {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.intention-info h4 {
font-size: 0.8rem;
}
.intention-info p {
font-size: 0.65rem;
}
/* ChatGPT Interface Mobile Styles */
.chat-header {
padding: 0.75rem 1rem;
}
.chat-content {
padding: 1.5rem 1rem;
}
.welcome-title {
font-size: 1.25rem;
}
.chat-input-container {
left: 1rem;
right: 1rem;
bottom: 1rem;
}
.chat-input {
padding: 0.75rem 1rem;
gap: 0.5rem;
}
.input-field {
font-size: 0.9rem;
}
.mic-btn svg,
.attach-btn svg {
width: 14px;
height: 14px;
}
/* Intention Input Box Mobile Styles */
.intention-input-box {
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
padding: 0.75rem;
}
.intention-textarea {
min-height: 40px;
padding: 0.5rem;
font-size: 0.75rem;
}
.begin-intention-btn {
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
border-radius: 8px;
}
}
/* How It Works Section */
.how-it-works {
padding: var(--section-padding);
background: var(--white);
position: relative;
z-index: 1;
margin-bottom: 0;
}
.section-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--container-padding);
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
/* Reduced spacing for problem section specifically */
.mindful-ai-matters .section-header {
margin-bottom: 1.5rem;
}
.section-bubble {
display: inline-block;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border: 1px solid rgba(31, 162, 160, 0.3);
border-radius: 20px;
padding: 0.5rem 1.25rem;
font-size: 0.85rem;
font-weight: 600;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.2);
}
.section-bubble:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.3);
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
}
.section-title {
font-size: var(--h2-size);
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 1rem;
line-height: 1.2;
}
.section-subtitle {
font-size: var(--body-size);
color: #1FA2A0;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.section-subtitle.single-line {
white-space: nowrap;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.step-card {
background: var(--cream);
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(163, 179, 163, 0.1);
}
.step-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
background: rgba(255, 255, 255, 0.8);
}
.step-icon {
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
font-size: 3rem;
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--sage-green), rgba(163, 179, 163, 0.8));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
font-weight: 700;
color: white;
box-shadow: 0 4px 15px rgba(163, 179, 163, 0.3);
transition: all 0.3s ease;
}
.step-card:hover .step-number {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(163, 179, 163, 0.4);
}
.step-content {
text-align: center;
}
.step-title {
font-size: 1.375rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.step-description {
font-size: 1rem;
color: var(--light-gray);
line-height: 1.6;
margin-bottom: 1rem;
}
/* Step Details for expandable content */
.step-details {
margin-top: 1rem;
}
.step-details .expand-details {
margin-top: 0.5rem;
}
.step-details .learn-more-btn {
background: none;
border: 1px solid var(--sage-green);
color: var(--sage-green);
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.step-details .learn-more-btn:hover {
background: var(--sage-green);
color: white;
transform: translateY(-1px);
}
.step-details .detailed-info {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
margin-top: 0.5rem;
}
.step-details .detailed-info.expanded {
max-height: 200px;
}
.step-details .detailed-info p {
font-size: 0.9rem;
color: var(--light-gray);
padding: 1rem;
background: rgba(163, 179, 163, 0.05);
border-radius: 8px;
margin: 0;
line-height: 1.5;
text-align: left;
}
.section-cta {
text-align: center;
}
.btn-primary.large {
padding: 1.25rem 3rem;
font-size: 1.125rem;
border-radius: 12px;
font-weight: 600;
box-shadow: var(--shadow-soft);
}
.btn-primary.large:hover {
box-shadow: var(--shadow-medium);
}
/* Features Section */
.features {
padding: var(--section-padding) !important;
padding-top: 0.5rem !important;
padding-bottom: 2rem !important;
background: white;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
.features .section-container {
padding-bottom: 2rem !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.features .section-header {
margin-top: 0;
}
.features .section-title {
color: #1FA2A0;
}
.features .section-subtitle {
color: #1FA2A0;
}
.features .section-bubble {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
border: 1px solid rgba(31, 162, 160, 0.3);
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.feature-card {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(163, 179, 163, 0.1);
text-align: center;
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
border-color: rgba(163, 179, 163, 0.2);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 1.5rem;
display: block;
text-align: center;
line-height: 1;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.feature-title {
font-size: 1.125rem;
font-weight: 600;
color: white !important;
margin-bottom: 0.75rem;
line-height: 1.3;
text-align: center;
}
.feature-description {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.6;
margin: 0;
margin-bottom: 1.5rem;
text-align: center;
}
/* Feature Expand Styles */
.feature-expand {
margin-top: 2rem;
}
.expand-btn {
background: none;
border: 1px solid var(--sage-green);
color: var(--sage-green);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 auto;
}
.expand-btn:hover {
background: var(--sage-green);
color: var(--white);
transform: translateY(-1px);
}
.expand-btn::after {
content: '▼';
font-size: 0.75rem;
transition: transform 0.3s ease;
}
.expand-btn.expanded::after {
transform: rotate(180deg);
}
.sub-features {
display: none;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(163, 179, 163, 0.1);
}
.sub-features.show {
display: block;
}
.sub-feature {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.5rem;
border-radius: 6px;
background: rgba(163, 179, 163, 0.05);
transition: background 0.3s ease;
}
.sub-feature:hover {
background: rgba(163, 179, 163, 0.1);
}
.sub-feature:last-child {
margin-bottom: 0;
}
.sub-icon {
font-size: 1rem;
flex-shrink: 0;
margin-top: 0.125rem;
}
.sub-text {
font-size: 0.875rem;
color: white;
line-height: 1.5;
font-weight: 400;
}
/* Responsive Design for New Sections */
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
}
.section-subtitle {
font-size: 1rem;
}
.section-bubble {
font-size: 0.8rem;
padding: 0.4rem 1rem;
letter-spacing: 0.3px;
}
.section-subtitle.single-line {
white-space: normal;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.step-card {
padding: 2rem 1.5rem;
}
.step-content {
text-align: center;
}
.step-title {
font-size: 1.25rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.feature-card {
padding: 1.5rem;
}
.btn-primary.large {
padding: 1rem 2rem;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 1.75rem;
}
.section-subtitle {
font-size: 0.95rem;
}
.section-bubble {
font-size: 0.75rem;
padding: 0.375rem 0.875rem;
letter-spacing: 0.25px;
margin-bottom: 0.75rem;
}
.section-subtitle.single-line {
white-space: normal;
}
.step-card {
padding: 1.5rem 1rem;
}
.step-icon {
height: 60px;
margin-bottom: 1rem;
}
.step-number {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.step-title {
font-size: 1.125rem;
}
.step-description {
font-size: 0.9rem;
}
.feature-card {
padding: 1.25rem;
}
.feature-icon {
font-size: 1.75rem;
}
.feature-title {
font-size: 1rem;
color: white !important;
}
.feature-description {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9) !important;
}
.btn-primary.large {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
width: 100%;
max-width: 280px;
}
}
/* Why Mindful AI Use Matters Section */
.mindful-ai-matters {
padding: var(--section-padding);
background: #FFFFFF;
position: relative;
z-index: 1;
margin-top: 0;
clear: both;
}
.mindful-ai-matters::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
z-index: 1;
}
.mindful-ai-matters .section-container {
position: relative;
z-index: 2;
}
.vs-text {
color: var(--light-gray);
font-weight: 400;
font-size: 0.9em;
}
.comparison-section {
margin-top: 3rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.comparison-headers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.comparison-header {
text-align: center;
padding: 1rem 1.5rem;
border-radius: 12px;
}
.decline-header {
background: linear-gradient(135deg, rgba(231, 76, 60, 0.08), rgba(243, 156, 18, 0.08));
border-left: 4px solid #E74C3C;
}
.recovery-header {
background: linear-gradient(135deg, rgba(163, 179, 163, 0.1), rgba(39, 174, 96, 0.08));
border-left: 4px solid var(--sage-green);
}
.comparison-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
.comparison-grid {
display: grid;
gap: 1rem;
}
.comparison-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.5rem;
align-items: center;
margin-bottom: 1rem;
position: relative;
}
.comparison-row::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(90deg,
rgba(231, 76, 60, 0.03) 0%,
rgba(163, 179, 163, 0.03) 50%,
rgba(39, 174, 96, 0.03) 100%);
border-radius: 12px;
z-index: -1;
}
.comparison-item {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.25rem;
transition: all 0.3s ease;
border: 1px solid rgba(163, 179, 163, 0.15);
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.decline-item {
border-left: 4px solid #E74C3C;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), rgba(243, 156, 18, 0.03));
}
.recovery-item {
border-left: 4px solid var(--sage-green);
background: linear-gradient(135deg, rgba(163, 179, 163, 0.05), rgba(39, 174, 96, 0.03));
}
.comparison-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.row-connector {
font-size: 1.25rem;
color: var(--sage-green);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
border: 2px solid rgba(163, 179, 163, 0.3);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.comparison-row:hover .row-connector {
background: var(--sage-green);
color: white;
border-color: var(--sage-green);
transform: scale(1.1);
}
.recovery-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
text-align: center;
}
.comparison-stat {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 0.75rem;
line-height: 1.2;
}
.decline-item .comparison-stat {
color: #E74C3C;
}
.recovery-item .comparison-stat {
color: var(--sage-green);
}
.decline-source {
font-size: 0.75rem;
color: #E74C3C;
font-weight: 500;
font-style: italic;
margin: 0.5rem 0 0 0;
opacity: 0.9;
}
.comparison-sub-header {
font-size: 0.85rem;
color: var(--sage-green);
font-weight: 500;
margin-bottom: 0.5rem;
font-style: italic;
line-height: 1.3;
}
.comparison-description {
font-size: 0.95rem;
color: var(--light-gray);
line-height: 1.6;
margin: 0;
flex: 1;
}
.comparison-tagline {
margin-top: 2rem;
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(15px);
border-radius: 12px;
border: 1px solid rgba(163, 179, 163, 0.2);
}
.comparison-tagline p {
font-size: 1.125rem;
color: var(--dark-gray);
margin: 0;
line-height: 1.6;
}
.comparison-tagline strong {
color: var(--sage-green);
}
.research-references {
margin: 3rem 0;
padding: 2rem;
background: rgba(245, 243, 240, 0.8);
border-radius: 12px;
border: 1px solid rgba(163, 179, 163, 0.15);
}
.references-title {
font-size: 1rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1rem;
text-align: center;
}
.references-list {
display: grid;
gap: 0.75rem;
}
.reference-item {
font-size: 0.85rem;
color: var(--light-gray);
line-height: 1.4;
margin: 0;
}
.reference-item sup {
color: var(--sage-green);
font-weight: 600;
margin-right: 0.5rem;
}
.reference-item em {
color: var(--dark-gray);
font-style: italic;
}
@media (max-width: 1024px) {
.comparison-headers {
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.comparison-header {
padding: 0.875rem 1.25rem;
}
.comparison-header h3 {
font-size: 1.125rem;
}
.comparison-row {
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.comparison-item {
padding: 1.25rem;
}
.comparison-stat {
font-size: 1.25rem;
}
.comparison-sub-header {
font-size: 0.85rem;
}
.comparison-description {
font-size: 0.9rem;
}
.decline-source {
font-size: 0.75rem;
margin: 0.625rem 0 0 0;
}
.row-connector {
width: 28px;
height: 28px;
font-size: 1.125rem;
}
.recovery-icon {
font-size: 1.375rem;
margin-bottom: 0.625rem;
}
.research-references {
margin: 2.5rem 0;
padding: 1.75rem;
}
.references-title {
font-size: 0.95rem;
}
.reference-item {
font-size: 0.8rem;
}
.comparison-tagline {
margin-top: 2.5rem;
padding: 1.75rem;
}
.comparison-tagline p {
font-size: 1.05rem;
}
}
@media (max-width: 768px) {
.comparison-headers {
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 1.25rem;
}
.comparison-header {
padding: 0.75rem 1rem;
}
.comparison-header h3 {
font-size: 1rem;
}
.comparison-row {
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 1.25rem;
}
.comparison-row::before {
background: linear-gradient(180deg,
rgba(231, 76, 60, 0.03) 0%,
rgba(163, 179, 163, 0.03) 50%,
rgba(39, 174, 96, 0.03) 100%);
}
.comparison-item {
padding: 1.25rem;
}
.comparison-stat {
font-size: 1rem;
margin-bottom: 0.625rem;
}
.comparison-sub-header {
font-size: 0.75rem;
margin-bottom: 0.5rem;
}
.comparison-description {
font-size: 0.875rem;
}
.decline-source {
font-size: 0.7rem;
margin: 0.5rem 0 0 0;
}
.row-connector {
transform: rotate(90deg);
width: 24px;
height: 24px;
font-size: 1rem;
margin: 0.375rem auto;
}
.recovery-icon {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.research-references {
margin: 2rem 0;
padding: 1.5rem;
}
.references-title {
font-size: 0.9rem;
}
.reference-item {
font-size: 0.75rem;
}
.comparison-tagline {
margin-top: 2rem;
padding: 1.5rem;
}
.comparison-tagline p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.mindful-ai-matters {
padding: 3rem 0;
}
.vs-text {
display: block;
margin: 0.5rem 0;
}
.comparison-headers {
gap: 0.75rem;
margin-bottom: 1rem;
}
.comparison-header {
padding: 0.625rem 0.875rem;
}
}
/* Enhanced Mindful AI Section - New Features */
/* Personal Connection Section */
.personal-connection {
margin: 0.5rem 0 1rem;
padding: 1rem;
position: relative;
z-index: 2;
}
.connection-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.connection-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
/* Modern Pain Points Section */
.pain-points-section {
margin: 3rem 0;
}
.pain-points-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.pain-point-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.5rem 2rem;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border: 1px solid rgba(31, 162, 160, 0.3);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(31, 162, 160, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
color: white;
}
.pain-point-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #a3b3a3, #d4b896, #a3b3a3);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.pain-point-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(163, 179, 163, 0.2);
border-color: rgba(163, 179, 163, 0.3);
}
.pain-point-card:hover::before {
transform: scaleX(1);
}
.pain-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
transition: all 0.4s ease;
filter: grayscale(0.2);
}
.pain-point-card:hover .pain-icon {
transform: scale(1.1) rotate(5deg);
filter: grayscale(0);
}
.pain-title {
font-size: 1.375rem;
font-weight: 700;
color: white !important;
margin: 0 0 1rem 0;
line-height: 1.3;
letter-spacing: -0.02em;
}
.pain-description {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0;
line-height: 1.7;
font-weight: 400;
max-width: 100%;
letter-spacing: 0.01em;
}
.connection-icon {
font-size: 2rem;
flex-shrink: 0;
animation: subtlePulse 3s ease-in-out infinite;
}
.connection-item p {
margin: 0;
font-size: 1.1rem;
color: var(--dark-gray);
font-weight: 500;
}
/* Research Stats Section */
.research-stats-section {
padding: var(--section-padding);
background: linear-gradient(135deg, rgba(231, 76, 60, 0.02), rgba(163, 179, 163, 0.03));
border-top: 1px solid rgba(163, 179, 163, 0.1);
border-bottom: 1px solid rgba(163, 179, 163, 0.1);
}
.stats-header {
text-align: center;
margin-bottom: 3rem;
}
.stats-header h2 {
font-size: 2.25rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1rem;
line-height: 1.2;
}
.stats-header p {
font-size: 1.2rem;
color: var(--light-gray);
margin: 0;
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
padding: 1rem 0;
}
.stat-block {
text-align: center;
background: #FFFFFF;
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 2.5rem 1.5rem;
border: 1px solid rgba(163, 179, 163, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}
.stat-block::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #E74C3C, #C0392B);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.stat-block:hover::after {
transform: scaleX(1);
}
.stat-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(231, 76, 60, 0.02) 0%, transparent 70%);
border-radius: 20px;
z-index: 0;
}
.stat-block:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 50px rgba(231, 76, 60, 0.15);
background: rgba(255, 255, 255, 0.98);
border: 2px solid rgba(231, 76, 60, 0.1);
}
.stat-block:hover .stat-number {
animation: statBounce 0.6s ease-in-out;
color: #C0392B;
}
.stat-block:hover .stat-effect {
color: #2C3E50;
font-weight: 600;
}
.stat-block:hover .stat-cause {
color: #0F7A78;
font-weight: 500;
}
@keyframes statBounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) scale(1);
}
40% {
transform: translateY(-10px) scale(1.05);
}
60% {
transform: translateY(-5px) scale(1.02);
}
}
.stat-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
display: block;
line-height: 1.3;
margin-bottom: 1rem;
position: relative;
z-index: 1;
opacity: 0.9;
width: 100%;
text-align: center;
padding: 0;
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
color: #E74C3C;
display: block;
line-height: 1;
margin-bottom: 0.25rem;
position: relative;
z-index: 1;
margin-top: 0;
text-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
overflow: hidden;
animation: statPulse 2s ease-in-out infinite;
transition: all 0.3s ease;
}
.stat-number::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: statShimmer 3s ease-in-out infinite;
z-index: 2;
}
.stat-number:hover {
transform: scale(1.05);
color: #C0392B;
text-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}
@keyframes statPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
@keyframes statShimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.stat-effect {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-gray);
display: block;
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
line-height: 1.2;
}
.stat-cause {
font-size: 0.85rem;
color: #1FA2A0;
display: block;
margin-bottom: 1rem;
position: relative;
z-index: 1;
font-style: italic;
}
.stat-label {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
display: block;
margin-bottom: 1rem;
line-height: 1.3;
position: relative;
z-index: 1;
}
.stat-source {
font-size: 0.7rem;
color: #1FA2A0;
font-weight: 500;
margin: 0;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
transition: all 0.3s ease;
}
.stat-block:hover .stat-source {
color: #0F7A78;
font-weight: 600;
}
/* Additional visual enhancements */
.stat-block {
position: relative;
}
.stat-block::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #E74C3C, #C0392B, #E74C3C);
border-radius: 22px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-block:hover::before {
opacity: 0.1;
}
/* Enhanced typography for better readability */
.stat-effect {
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.stat-cause {
font-weight: 500;
letter-spacing: 0.3px;
transition: all 0.3s ease;
}
/* Info Icon Styling */
.info-icon {
font-size: 0.75rem;
color: var(--sage-green);
cursor: pointer !important;
opacity: 0.8;
transition: all 0.3s ease;
padding: 6px;
border-radius: 50%;
background: rgba(163, 179, 163, 0.2);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 6px;
user-select: none;
border: 1px solid rgba(163, 179, 163, 0.3);
position: relative;
z-index: 100;
pointer-events: auto !important;
}
.info-icon:hover {
opacity: 1 !important;
background: rgba(163, 179, 163, 0.3) !important;
transform: scale(1.2) !important;
border-color: rgba(163, 179, 163, 0.5) !important;
box-shadow: 0 2px 8px rgba(163, 179, 163, 0.3) !important;
}
.info-icon:active {
transform: scale(0.9) !important;
}
/* Popup Styling */
.info-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
backdrop-filter: blur(5px);
}
.info-popup.active {
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.popup-content {
background: white;
border-radius: 12px;
padding: 1rem;
max-width: 280px;
width: 90%;
margin: 1rem;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
animation: slideIn 0.3s ease-out;
}
.info-popup .popup-close {
position: absolute !important;
top: 0.5rem !important;
right: 0.5rem !important;
left: auto !important;
font-size: 1.2rem !important;
color: #666 !important;
cursor: pointer !important;
background: rgba(255, 255, 255, 0.9) !important;
border: none !important;
padding: 0.25rem !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
font-weight: bold !important;
z-index: 1001 !important;
}
.info-popup .popup-close:hover {
background: rgba(0, 0, 0, 0.1) !important;
color: var(--dark-gray) !important;
}
/* Hide info icon when popup is active */
.info-popup.active {
z-index: 1000;
}
.info-popup.active ~ .info-icon {
opacity: 0 !important;
visibility: hidden !important;
transition: all 0.3s ease;
}
/* Alternative approach - hide info icon when popup is active */
.stat-source:has(.info-popup.active) .info-icon {
opacity: 0 !important;
visibility: hidden !important;
transition: all 0.3s ease;
}
.popup-content p {
margin: 0;
font-size: 0.85rem !important;
color: #1FA2A0 !important;
line-height: 1.4 !important;
padding-right: 0.5rem;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Research Summary */
.research-summary {
margin: 4rem 0 0;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border-radius: 12px;
border-left: 4px solid #1A8B89;
position: relative;
clear: both;
color: white;
}
.research-badge {
display: block !important;
background: linear-gradient(135deg, #4FD1C7, #5ED5CC, #6ED9D1) !important;
color: white !important;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
margin: 0 auto 1rem auto;
animation: shimmer 2s ease-in-out infinite;
text-align: center;
width: fit-content;
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.3);
}
.research-summary p {
margin: 0 0 1.5rem 0;
font-size: 1.1rem;
color: white;
line-height: 1.6;
text-align: center;
}
/* AI Reward System Section */
.reward-system-section {
margin: 2rem 0;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.05), rgba(163, 179, 163, 0.08));
border-radius: 12px;
border-left: 4px solid #E74C3C;
}
.reward-system-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0 0 0.75rem 0;
line-height: 1.3;
}
.reward-system-description {
font-size: 1rem;
color: var(--light-gray);
margin: 0;
line-height: 1.6;
font-weight: 400;
}
/* Research Conclusion */
.research-conclusion {
margin: 2rem 0 0.5rem 0;
text-align: center;
}
.research-conclusion p {
font-size: 1.2rem;
color: white;
font-weight: 500;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
/* Reset Section - From AI Overload to Human Reset */
.reset-section {
margin: 3rem 0;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 16px;
border: 1px solid rgba(163, 179, 163, 0.2);
text-align: center;
}
.reset-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1rem;
line-height: 1.3;
}
.reset-subtitle {
font-size: 1.1rem;
color: var(--light-gray);
margin-bottom: 2.5rem;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.flip-grid-title {
font-size: 1.375rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1.5rem;
}
.flip-legend {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
font-size: 1rem;
font-weight: 500;
}
.overload-legend {
color: #C53A4A;
}
.reset-legend {
color: #3BAA57;
}
.flip-legend .arrow {
font-size: 1.5rem;
color: var(--sage-green);
}
/* Column Headers */
.column-headers {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1.5rem;
align-items: center;
max-width: 900px;
margin: 2rem auto 1rem;
padding: 0 1.5rem;
}
.decline-header,
.rituals-header {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
text-align: center;
padding: 0.75rem 1rem;
border-radius: 12px;
border: 2px solid;
}
.decline-header {
color: #C53A4A;
background: rgba(197, 58, 74, 0.08);
border-color: rgba(197, 58, 74, 0.3);
}
.rituals-header {
color: #3BAA57;
background: rgba(59, 170, 87, 0.08);
border-color: rgba(59, 170, 87, 0.3);
}
.header-spacer {
width: 2rem;
text-align: center;
}
/* Horizontal Flow Grid */
.horizontal-flow-grid {
display: grid;
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.flow-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1.5rem;
align-items: center;
padding: 1.5rem;
background: linear-gradient(90deg,
rgba(197, 58, 74, 0.08) 0%,
rgba(163, 179, 163, 0.05) 50%,
rgba(59, 170, 87, 0.08) 100%);
border-radius: 20px;
border: 1px solid rgba(163, 179, 163, 0.1);
transition: all 0.4s ease;
opacity: 0;
transform: translateY(20px);
animation: flowFadeIn 0.6s ease-out forwards;
}
.flow-row:nth-child(1) { animation-delay: 0.2s; }
.flow-row:nth-child(2) { animation-delay: 0.4s; }
.flow-row:nth-child(3) { animation-delay: 0.6s; }
.flow-row:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.before-card,
.after-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
border-radius: 16px;
transition: all 0.3s ease;
text-align: left;
}
.before-card {
background: linear-gradient(135deg,
rgba(197, 58, 74, 0.1) 0%,
rgba(197, 58, 74, 0.05) 100%);
border: 1px solid rgba(197, 58, 74, 0.2);
}
.after-card {
background: linear-gradient(135deg,
rgba(59, 170, 87, 0.1) 0%,
rgba(59, 170, 87, 0.05) 100%);
border: 1px solid rgba(59, 170, 87, 0.2);
transform: translateY(0);
transition: all 0.4s ease;
}
.flow-row:hover .after-card {
transform: translateY(-2px);
}
.state-icon {
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.25rem;
transition: all 0.3s ease;
}
.flow-row:hover .state-icon {
transform: scale(1.1);
}
.state-content h5 {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.before-card .state-content h5 {
color: #C53A4A;
}
.after-card .state-content h5 {
color: #3BAA57;
}
.state-content p {
font-size: 0.9rem;
color: #777;
margin: 0;
line-height: 1.5;
font-weight: 400;
}
.flow-arrow {
font-size: 2rem;
color: var(--sage-green);
text-align: center;
animation: arrowPulse 2s ease-in-out infinite;
transition: all 0.3s ease;
}
.flow-row:hover .flow-arrow {
transform: translateX(4px);
color: #3BAA57;
}
@keyframes flowFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes arrowPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
/* Responsive Design for Horizontal Flow */
@media (max-width: 768px) {
.column-headers {
grid-template-columns: 1fr;
gap: 1rem;
padding: 0 1rem;
margin: 1.5rem auto 1rem;
}
.decline-header,
.rituals-header {
font-size: 1rem;
padding: 0.625rem 0.875rem;
}
.header-spacer {
display: none;
}
.flow-row {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
.before-card,
.after-card {
padding: 1rem;
}
.flow-arrow {
font-size: 1.5rem;
transform: rotate(90deg);
margin: 0.5rem 0;
}
.flow-row:hover .flow-arrow {
transform: rotate(90deg) translateY(-4px);
}
.state-content h5 {
font-size: 1rem;
}
.state-content p {
font-size: 0.85rem;
}
}
/* Solution Bridge Transition */
.solution-bridge {
text-align: center;
margin: 3rem 0 2rem;
padding: 1.5rem 0;
position: relative;
}
.solution-bridge::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--sage-green), var(--gold));
border-radius: 1px;
}
.solution-bridge p {
font-size: 1.25rem;
font-weight: 500;
color: var(--dark-gray);
margin: 0;
padding-top: 1rem;
font-style: italic;
}
/* Final Solution Transition */
.final-transition {
margin-top: 4rem;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(163, 179, 163, 0.08), rgba(212, 184, 150, 0.08));
border-radius: 20px;
text-align: center;
border: 1px solid rgba(163, 179, 163, 0.15);
position: relative;
overflow: hidden;
}
.final-transition::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(163, 179, 163, 0.05) 0%, transparent 70%);
border-radius: 20px;
z-index: 0;
}
.transition-content {
position: relative;
z-index: 1;
}
.final-transition h3 {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1rem;
line-height: 1.3;
}
/* Solution Overview Section */
.solution-overview {
padding: 2rem 0 5rem 0;
background: #FFFFFF;
backdrop-filter: blur(15px);
border-top: 1px solid rgba(163, 179, 163, 0.1);
border-bottom: 1px solid rgba(163, 179, 163, 0.1);
}
.solution-overview .section-container {
max-width: none !important;
width: 100% !important;
padding: 0 2rem !important;
margin: 0 !important;
}
#level-up-mindfulness {
margin-top: 4rem;
}
.value-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin: 2rem 0;
width: 100%;
justify-content: center;
}
.ritual-word {
color: white;
font-weight: 600;
}
.mindfulness-highlight {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
display: inline;
animation: gradientShift 10s ease-in-out infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes colorShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Ritual Cycle Section */
.ritual-cycle {
margin: 4rem 0;
text-align: center;
padding: 3rem 1.5rem;
background: linear-gradient(135deg, rgba(245, 243, 240, 0.9), rgba(255, 255, 255, 0.95));
border-radius: 24px;
border: 1px solid rgba(163, 179, 163, 0.2);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.ritual-cycle::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(163, 179, 163, 0.3), transparent);
}
.ritual-cycle::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(163, 179, 163, 0.3), transparent);
}
.cycle-header {
margin-bottom: 3rem;
position: relative;
}
.cycle-title {
font-size: 2rem;
font-weight: 800;
color: var(--dark-gray);
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--dark-gray), #2c3e50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cycle-subtitle {
font-size: 1.1rem;
color: var(--light-gray);
margin: 0;
font-weight: 500;
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
.cycle-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: nowrap;
max-width: 1000px;
margin: 0 auto;
overflow-x: auto;
padding: 0 1rem;
position: relative;
}
.cycle-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
min-width: 140px;
}
.cycle-image {
margin-bottom: 0.5rem;
flex-shrink: 0;
padding: 1.5rem 1rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
border: 1px solid rgba(163, 179, 163, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.cycle-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(163, 179, 163, 0.08), rgba(212, 184, 150, 0.05));
border-radius: 16px;
z-index: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.cycle-step:hover::before {
opacity: 1;
}
.cycle-step:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 15px 30px rgba(163, 179, 163, 0.2);
background: rgba(255, 255, 255, 0.95);
border-color: rgba(163, 179, 163, 0.3);
}
.cycle-number {
font-size: 1rem;
font-weight: 900;
color: white;
background: linear-gradient(135deg, var(--sage-green), #7A8F7A);
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
box-shadow: 0 4px 15px rgba(163, 179, 163, 0.4);
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.cycle-step:hover .cycle-number {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(163, 179, 163, 0.5);
}
/* Animated Demo Styles */
.cycle-demo {
max-width: 600px;
width: 100%;
margin: 0 auto;
padding: 2rem 0;
position: relative;
}
/* Search Demo Styles */
.search-demo {
max-width: 600px;
margin: 0 auto;
}
.internet-search {
margin-bottom: 1.5rem;
}
.search-container {
max-width: 500px;
margin: 0 auto;
}
.search-field {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border: 1px solid #e5e7eb;
border-radius: 24px;
background: white;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 48px;
}
.search-field:hover {
border-color: #a3b3a3;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.search-icon {
color: #6b7280;
font-size: 1.2rem;
margin-right: 0.75rem;
}
.search-placeholder {
flex: 1;
color: #9ca3af;
font-size: 0.95rem;
text-align: left;
}
.search-actions {
display: flex;
align-items: center;
margin-left: 1rem;
}
.camera-icon {
color: #6b7280;
font-size: 1.1rem;
cursor: pointer;
transition: color 0.3s ease;
}
.camera-icon:hover {
color: #a3b3a3;
}
/* ChatGPT Interface Styles */
.chatgpt-interface {
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
max-width: 450px;
width: 100%;
margin: 0 auto;
border: 1px solid rgba(163, 179, 163, 0.2);
height: 400px;
overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.chatgpt-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
}
.model-selector {
display: flex;
align-items: center;
gap: 0.5rem;
color: #374151;
font-weight: 500;
font-size: 0.9rem;
}
.browser-tabs {
display: flex;
background: #f1f3f4;
border-bottom: 1px solid #dadce0;
padding: 0;
margin: 0;
}
.tab {
display: flex;
align-items: center;
background: white;
border: 1px solid #dadce0;
border-bottom: none;
border-radius: 8px 8px 0 0;
padding: 0.5rem 1rem;
margin-right: 0.25rem;
position: relative;
}
.tab.active {
background: white;
z-index: 1;
}
.tab-title {
font-size: 0.85rem;
color: #3c4043;
margin-right: 0.5rem;
}
.close-tab {
color: #5f6368;
font-size: 0.9rem;
cursor: pointer;
}
.new-tab {
background: #f1f3f4;
border: 1px solid #dadce0;
border-radius: 4px;
padding: 0.5rem 0.75rem;
margin: 0.25rem;
color: #5f6368;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.browser-toolbar {
display: flex;
align-items: center;
background: white;
padding: 0.5rem;
gap: 0.75rem;
}
.nav-buttons {
display: flex;
gap: 0.25rem;
}
.nav-btn {
background: none;
border: none;
color: #5f6368;
font-size: 1rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
}
.nav-btn:hover {
background: #f1f3f4;
}
.search-bar {
flex: 1;
display: flex;
align-items: center;
background: white;
border: 2px solid #4285f4;
border-radius: 24px;
padding: 0.5rem 1rem;
max-width: 600px;
}
.google-logo {
background: linear-gradient(45deg, #4285f4, #34a853, #fbbc05, #ea4335);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
font-size: 1.1rem;
margin-right: 0.75rem;
}
.search-bar input {
border: none;
outline: none;
flex: 1;
font-size: 0.9rem;
color: #3c4043;
}
.google-search-demo {
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
max-width: 450px;
width: 100%;
margin: 0 auto;
border: 1px solid rgba(163, 179, 163, 0.2);
min-height: 400px;
box-sizing: border-box;
}
.chrome-browser-header {
background: #f1f3f4;
border-bottom: 1px solid #dadce0;
}
.google-search-interface {
text-align: center;
padding: 0.5rem;
position: relative;
min-height: 200px;
}
.google-top-right-links {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 1rem;
align-items: center;
}
.mail-link, .images-link {
color: #3c4043;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
}
.mail-link:hover, .images-link:hover {
text-decoration: underline;
}
.app-launcher-icon, .profile-icon-top-right {
color: #5f6368;
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
}
.app-launcher-icon:hover, .profile-icon-top-right:hover {
background: #f1f3f4;
}
.google-logo-search-bar {
width: 20px;
height: 20px;
margin-right: 0.75rem;
object-fit: contain;
}
.google-logo-small {
background: linear-gradient(45deg, #4285f4, #34a853, #fbbc05, #ea4335);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
font-size: 1.1rem;
margin-right: 0.75rem;
}
.google-logo-large-img {
width: 150px;
height: 51px;
margin: 1rem 0 1rem 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.google-logo-large {
font-size: 5rem;
font-weight: 400;
color: #4285f4;
margin: 8rem 0 2rem 0;
font-family: 'Product Sans', Arial, sans-serif;
letter-spacing: -0.1em;
}
.search-box {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.search-box input {
width: 100%;
padding: 1rem 3rem 1rem 1.5rem;
border: 1px solid #dadce0;
border-radius: 24px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.search-box input:focus {
border-color: #4285f4;
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}
.search-box {
position: relative;
}
.search-box::after {
content: "🔍";
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #5f6368;
font-size: 1.1rem;
}
.chatgpt-content {
padding: 0;
text-align: center;
}
.gpt-screen {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.gpt-image {
width: 100%;
height: auto;
max-width: 100%;
border-radius: 0 0 16px 16px;
object-fit: cover;
}
.input-container {
max-width: 600px;
margin: 0 auto;
}
.input-field {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
border: 1px solid #e5e7eb;
border-radius: 24px;
background: white;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 56px;
}
.input-field:hover {
border-color: #a3b3a3;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.plus-icon {
color: #000000;
font-size: 1.5rem;
font-weight: 300;
margin-right: 1rem;
}
.placeholder-text {
flex: 1;
color: #9ca3af;
font-size: 1rem;
text-align: left;
}
.input-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-left: 1rem;
}
.mic-icon {
color: #000000;
font-size: 1.2rem;
cursor: pointer;
transition: color 0.3s ease;
}
.mic-icon:hover {
color: #a3b3a3;
}
.sound-waves {
width: 28px;
height: 28px;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.sound-waves:hover {
background: #e5e7eb;
}
.demo-container {
position: relative;
height: 500px;
margin-bottom: 2rem;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.demo-step {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(100px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.demo-step.active {
opacity: 1;
transform: translateX(0);
z-index: 2;
}
.demo-step:not(.active) {
opacity: 0;
transform: translateX(100px);
z-index: 1;
}
.demo-step-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
transition: filter 0.3s ease;
}
.demo-step-background.blurred {
filter: blur(3px);
}
.demo-modal-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateY(20px);
width: 100%;
max-width: 350px;
height: 300px;
background: transparent;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transition: all 0.3s ease;
border: none;
}
.demo-modal-overlay.active {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.demo-modal {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
padding: 1rem;
max-width: 350px;
width: 100%;
margin: 0 auto;
border: 1px solid rgba(163, 179, 163, 0.2);
min-height: 250px;
position: relative;
z-index: 10;
box-sizing: border-box;
backdrop-filter: blur(10px);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.modal-header h3 {
margin: 0;
color: #1f2937;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
flex: 1;
}
.close-btn {
background: none;
border: none;
font-size: 1.2rem;
color: #6b7280;
cursor: pointer;
padding: 0.25rem;
}
.modal-content {
text-align: center;
}
.modal-content p {
color: #4b5563;
margin-bottom: 0.25rem;
line-height: 1.6;
font-size: 0.85rem;
}
.step-text {
font-size: 0.9rem;
color: #6b7280;
}
.intention-subtext {
font-size: 0.7rem;
color: #6b7280;
margin-bottom: 0;
}
.weather-options {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
margin-bottom: 1.25rem;
justify-content: center;
}
.weather-btn {
padding: 0.6rem 0.4rem;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.75rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.weather-icon {
font-size: 1.1rem;
}
.weather-text {
font-size: 0.8rem;
font-weight: 500;
}
.weather-btn:hover {
border-color: #a3b3a3;
background: #f9fafb;
}
.weather-btn.selected {
border-color: #a3b3a3;
background: #f0f4f0;
box-shadow: 0 2px 4px rgba(163, 179, 163, 0.2);
}
.intention-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.125rem;
margin-bottom: 0;
}
.intention-btn {
padding: 0.375rem;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
font-size: 0.9rem;
line-height: 1.4;
}
.intention-btn:hover {
border-color: #a3b3a3;
background: #f9fafb;
}
.intention-btn.selected {
border-color: #a3b3a3;
background: #f0f4f0;
box-shadow: 0 2px 4px rgba(163, 179, 163, 0.2);
}
.intention-btn small {
display: block;
color: #6b7280;
font-size: 0.65rem;
margin-top: 0.25rem;
}
.show-all-intentions-btn {
background: #f8f9fa;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 0.375rem 1rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 0;
width: 100%;
}
.show-all-intentions-btn:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
.show-all-btn {
background: #a3b3a3;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.3s ease;
}
.show-all-btn:hover {
background: #8a9a8a;
}
.breathing-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #a3b3a3 0%, #7a9a7a 50%, #5d8a5d 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem auto 2.5rem auto;
position: relative;
animation: breathe 6s ease-in-out infinite;
box-shadow: 0 4px 20px rgba(163, 179, 163, 0.3);
}
.breath-ring {
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border: 2px solid rgba(163, 179, 163, 0.6);
border-radius: 50%;
animation: breathe 6s ease-in-out infinite;
}
.breath-ring::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border: 1px solid rgba(163, 179, 163, 0.4);
border-radius: 50%;
animation: breathe 6s ease-in-out infinite;
}
.breath-ring::after {
content: '';
position: absolute;
top: -16px;
left: -16px;
right: -16px;
bottom: -16px;
border: 1px solid rgba(163, 179, 163, 0.2);
border-radius: 50%;
animation: breathe 6s ease-in-out infinite;
}
.breath-text {
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.breath-timer {
position: absolute;
top: 1rem;
left: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--sage-green);
z-index: 10;
}
.affirmation {
text-align: center;
font-style: italic;
color: #4b5563;
margin: 1rem 0;
}
.snooze-btn {
background: transparent;
color: #a3b3a3;
border: 2px solid #a3b3a3;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
}
.snooze-btn:hover {
background: #a3b3a3;
color: white;
}
.reflection-form {
margin-bottom: 1.5rem;
}
/* Demo Step Labels */
.demo-step-labels {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
z-index: 1000;
}
.step-label {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1.5rem !important;
font-weight: 700;
color: white !important;
transition: opacity 0.3s ease;
opacity: 0;
white-space: nowrap;
}
.step-label.active {
opacity: 1;
}
.step-label:hover {
background: rgba(163, 179, 163, 0.15);
border-color: rgba(163, 179, 163, 0.3);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.demo-step-labels {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.step-label {
font-size: 1.2rem;
padding: 0.4rem 0.8rem;
}
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #374151;
font-weight: 500;
font-size: 0.9rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 0.9rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #a3b3a3;
}
.form-group textarea {
height: 80px;
resize: vertical;
}
.reflection-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Reflection Features Styling */
.reflection-features {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: rgba(163, 179, 163, 0.05);
border-radius: 12px;
border: 1px solid rgba(163, 179, 163, 0.1);
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(163, 179, 163, 0.1);
transform: translateY(-2px);
}
.feature-icon {
font-size: 1.5rem;
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(163, 179, 163, 0.1);
border-radius: 50%;
}
.feature-content h4 {
margin: 0 0 0.25rem 0;
color: #1f2937;
font-size: 1rem;
font-weight: 600;
}
.feature-content p {
margin: 0;
color: #6b7280;
font-size: 0.875rem;
line-height: 1.4;
}
/* Modern Reflection Screen */
.reflection-demo {
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 1rem;
max-width: 450px;
width: 100%;
margin: 0 auto;
border: 1px solid rgba(163, 179, 163, 0.2);
min-height: 300px;
box-sizing: border-box;
}
.reflection-header {
text-align: center;
margin-bottom: 1rem;
}
.reflection-header h3 {
margin: 0 0 0.5rem 0;
color: #1f2937;
font-size: 1.1rem;
font-weight: 600;
}
.reflection-subtitle {
margin: 0;
color: #6b7280;
font-size: 0.9rem;
}
.reflection-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.reflection-card {
background: rgba(163, 179, 163, 0.05);
border-radius: 10px;
padding: 0.75rem;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(163, 179, 163, 0.1);
}
.reflection-card:hover {
background: rgba(163, 179, 163, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 179, 163, 0.2);
}
.reflection-icon {
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.reflection-card h4 {
margin: 0 0 0.25rem 0;
color: #1f2937;
font-size: 0.9rem;
font-weight: 600;
}
.reflection-card p {
margin: 0;
color: #6b7280;
font-size: 0.75rem;
line-height: 1.3;
}
.save-btn {
background: #8b5cf6;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.3s ease;
}
.save-btn:hover {
background: #7c3aed;
}
.skip-btn {
background: white;
color: #6b7280;
border: 2px solid #e5e7eb;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.skip-btn:hover {
border-color: #a3b3a3;
background: #f9fafb;
}
.cycle-progress {
margin-top: 2rem;
}
.progress-bar {
height: 4px;
background: #e5e7eb;
border-radius: 2px;
margin-bottom: 1rem;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #a3b3a3, #8a9a8a);
border-radius: 2px;
width: 25%;
transition: width 0.5s ease;
}
.progress-steps {
display: flex;
justify-content: space-between;
align-items: center;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.progress-step.active .step-number {
background: #a3b3a3;
color: white;
}
.step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e5e7eb;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.step-label {
font-size: 0.8rem;
color: #6b7280;
font-weight: 500;
text-align: center;
}
@keyframes breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes countdown {
0% { content: "6"; }
16.67% { content: "5"; }
33.33% { content: "4"; }
50% { content: "3"; }
66.67% { content: "2"; }
83.33% { content: "1"; }
100% { content: "6"; }
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.cycle-step:hover .cycle-icon {
transform: scale(1.05);
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}
.cycle-text {
font-size: 0.9rem;
color: #000000;
font-weight: 400;
text-align: center;
line-height: 1.4;
position: relative;
z-index: 1;
max-width: 120px;
transition: color 0.3s ease;
}
.cycle-highlight {
color: #000000;
font-weight: 700;
}
.cycle-step:hover .cycle-text {
color: #000000;
}
.cycle-step:hover .cycle-highlight {
color: #000000;
}
.cycle-arrow {
font-size: 1.5rem;
color: var(--sage-green);
font-weight: 800;
margin: 0 0.5rem;
filter: drop-shadow(0 2px 4px rgba(163, 179, 163, 0.3));
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.cycle-arrow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(163, 179, 163, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.cycle-arrow:hover {
transform: scale(1.15);
color: #7A8F7A;
}
.cycle-arrow:hover::before {
width: 2.5rem;
height: 2.5rem;
}
.value-card {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
border: 1px solid rgba(31, 162, 160, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
color: white;
box-shadow: 0 8px 32px rgba(31, 162, 160, 0.2);
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(163, 179, 163, 0.03) 0%, transparent 70%);
border-radius: 16px;
z-index: 0;
}
.value-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 35px rgba(31, 162, 160, 0.3);
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
}
.card-tag {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: linear-gradient(135deg, var(--sage-green), rgba(163, 179, 163, 0.9));
color: white;
padding: 0.375rem 0.75rem;
border-radius: 16px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
box-shadow: 0 2px 8px rgba(163, 179, 163, 0.3);
transition: all 0.3s ease;
z-index: 3;
}
.value-card:hover .card-tag {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(163, 179, 163, 0.4);
}
.value-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
position: relative;
z-index: 1;
}
.value-title {
font-size: 1.25rem;
font-weight: 600;
color: white !important;
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
}
.value-description {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.5;
margin: 0 0 1rem 0;
position: relative;
z-index: 1;
}
/* Value Card Details */
.value-details {
position: relative;
z-index: 1;
}
.value-details .expand-details {
margin-top: 1rem;
}
.value-details .learn-more-btn {
background: none;
border: 1px solid white;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.value-details .learn-more-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.8);
}
.value-details .detailed-info {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
margin-top: 1rem;
}
.value-details .detailed-info.expanded {
max-height: 150px;
}
.value-details .detailed-info p {
font-size: 0.9rem;
color: var(--dark-gray);
padding: 1rem;
background: rgba(163, 179, 163, 0.08);
border-radius: 8px;
margin: 0 0 0.5rem 0;
line-height: 1.5;
text-align: left;
}
.value-details .detailed-info p:last-child {
margin-bottom: 0;
}
/* Recovery Journey */
.recovery-journey {
margin: 4rem 0 3rem;
text-align: center;
}
.recovery-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 3rem;
}
.recovery-icon {
font-size: 2rem;
background: linear-gradient(135deg, rgba(163, 179, 163, 0.15), rgba(212, 184, 150, 0.15));
padding: 0.75rem;
border-radius: 50%;
border: 1px solid rgba(163, 179, 163, 0.2);
}
.recovery-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
.recovery-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.recovery-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 2.5rem 2rem;
border: 1px solid rgba(163, 179, 163, 0.15);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.recovery-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(163, 179, 163, 0.03) 0%, transparent 70%);
border-radius: 16px;
z-index: 0;
}
.recovery-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
}
.timeline-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
position: relative;
z-index: 1;
}
.timeline-period {
font-size: 0.875rem;
font-weight: 600;
color: var(--sage-green);
letter-spacing: 0.5px;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.timeline-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1rem;
line-height: 1.3;
position: relative;
z-index: 1;
}
.timeline-description {
font-size: 1rem;
color: var(--light-gray);
line-height: 1.6;
margin: 0;
position: relative;
z-index: 1;
}
.research-transition {
text-align: center;
margin-top: 3rem;
padding: 2rem 0;
border-top: 1px solid rgba(163, 179, 163, 0.15);
}
.research-transition p {
font-size: 1.1rem;
color: var(--light-gray);
font-style: italic;
margin: 0;
}
/* Research Evidence Section Updates */
.research-evidence-section {
margin-top: 2rem;
}
.evidence-header {
text-align: center;
margin-bottom: 3rem;
}
.evidence-header h3 {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1rem;
}
.evidence-header p {
font-size: 1.1rem;
color: var(--light-gray);
margin: 0;
}
.research-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.research-stat-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 2rem;
border-left: 4px solid #E74C3C;
border: 1px solid rgba(231, 76, 60, 0.15);
transition: all 0.3s ease;
position: relative;
}
.research-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(231, 76, 60, 0.1);
}
.research-stat-card .stat-display {
margin-bottom: 1rem;
position: relative;
}
.research-stat-card .stat-arrow {
font-size: 2rem;
color: #E74C3C;
font-weight: bold;
margin-left: 0.25rem;
}
.research-stat-card .stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #E74C3C;
display: block;
}
.research-stat-card .stat-label {
font-size: 1rem;
font-weight: 500;
color: var(--dark-gray);
margin-top: 0.25rem;
display: block;
}
.research-stat-card .stat-description {
font-size: 0.95rem;
color: var(--light-gray);
line-height: 1.5;
margin-bottom: 1.5rem;
}
.research-stat-card .study-source {
font-size: 0.85rem;
color: var(--sage-green);
font-weight: 500;
margin: 0 0 0.5rem 0;
}
/* Enhanced Statistics */
.clickable-stat {
cursor: pointer;
transition: all 0.3s ease;
}
.clickable-stat:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.stat-icon {
font-size: 2rem;
margin-bottom: 1rem;
text-align: center;
animation: iconFloat 4s ease-in-out infinite;
}
.comparison-stat {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
display: block;
}
.stat-label {
font-size: 1rem;
font-weight: 500;
margin-top: 0.25rem;
opacity: 0.8;
}
/* Progress Bars */
.progress-bar {
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin: 1rem 0;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #E74C3C, #F39C12);
border-radius: 4px;
width: 0;
transition: width 2s ease-out;
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmerProgress 3s infinite;
}
/* Study Details */
.study-details {
margin-top: 1rem;
}
.expand-details {
margin-top: 0.5rem;
}
.learn-more-btn {
background: none;
border: 1px solid white;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer !important;
transition: all 0.3s ease;
font-weight: 500;
position: relative;
z-index: 100;
pointer-events: auto !important;
display: inline-block;
}
.learn-more-btn:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
transform: translateY(-1px) !important;
border-color: rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}
.detailed-info {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
margin-top: 0.5rem;
}
.detailed-info.expanded {
max-height: 200px;
}
.detailed-info p {
font-size: 0.9rem;
color: var(--light-gray);
padding: 1rem;
background: rgba(163, 179, 163, 0.05);
border-radius: 8px;
margin: 0;
line-height: 1.5;
}
/* Animated Arrows */
.animated-arrow {
animation: arrowPulse 2s ease-in-out infinite;
}
/* Brain Health Meters */
.brain-health-meter {
margin-top: 1rem;
}
.meter-label {
font-size: 0.875rem;
color: var(--sage-green);
font-weight: 500;
margin-bottom: 0.5rem;
}
.meter-bar {
width: 100%;
height: 12px;
background: rgba(163, 179, 163, 0.2);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.meter-fill {
height: 100%;
background: linear-gradient(90deg, var(--sage-green), #27AE60);
border-radius: 6px;
width: 0;
transition: width 2.5s ease-out;
position: relative;
}
.meter-fill::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: shimmerProgress 3s infinite 1s;
}
/* Recovery Timeline */
.recovery-timeline {
margin: 3rem 0;
padding: 3rem 2rem;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(163, 179, 163, 0.2);
position: relative;
z-index: 2;
}
.timeline-header {
text-align: center;
margin-bottom: 3rem;
}
.timeline-header h3 {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0 0 0.5rem 0;
}
.timeline-header p {
font-size: 1.1rem;
color: var(--light-gray);
margin: 0;
}
.timeline-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
position: relative;
}
.timeline-grid::before {
content: '';
position: absolute;
top: 50%;
left: 16.66%;
right: 16.66%;
height: 2px;
background: linear-gradient(90deg, var(--sage-green), transparent, var(--sage-green));
z-index: 1;
}
.timeline-item {
text-align: center;
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease-out forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.2s; }
.timeline-item:nth-child(2) { animation-delay: 0.4s; }
.timeline-item:nth-child(3) { animation-delay: 0.6s; }
.timeline-marker {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.timeline-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--sage-green), #27AE60);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 700;
border: 4px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 15px rgba(163, 179, 163, 0.3);
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-number {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(163, 179, 163, 0.4);
}
.timeline-content h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0 0 0.5rem 0;
}
.timeline-content p {
margin: 0 0 0.75rem 0;
line-height: 1.6;
}
.timeline-content p:first-of-type {
font-weight: 600;
color: var(--sage-green);
font-size: 1rem;
}
.timeline-content p:last-child {
color: var(--light-gray);
font-size: 0.95rem;
}
/* Actionable Insights */
.actionable-insights {
margin: 3rem 0 2rem;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(163, 179, 163, 0.05), rgba(212, 184, 150, 0.05));
border-radius: 20px;
border: 1px solid rgba(163, 179, 163, 0.15);
position: relative;
z-index: 2;
}
.insights-header {
text-align: center;
margin-bottom: 3rem;
}
.insights-header h3 {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.insight-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 2rem;
border: 1px solid rgba(163, 179, 163, 0.2);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.insight-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(163, 179, 163, 0.02) 0%, transparent 70%);
border-radius: 16px;
z-index: 0;
transition: opacity 0.3s ease;
}
.insight-card:hover::before {
opacity: 0.5;
}
.insight-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
}
.insight-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
display: block;
animation: subtlePulse 4s ease-in-out infinite;
}
.insight-content {
position: relative;
z-index: 2;
}
.insight-content h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0 0 1rem 0;
}
.insight-content p {
font-size: 1rem;
color: var(--light-gray);
line-height: 1.6;
margin: 0 0 1.5rem 0;
}
.insight-action {
background: var(--sage-green);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.insight-action:hover {
background: #8FA68F;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(163, 179, 163, 0.3);
}
/* Animations */
@keyframes subtlePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
@keyframes shimmer {
0%, 100% { background: var(--sage-green); }
50% { background: #27AE60; }
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes shimmerProgress {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes arrowPulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Medium screen adjustments for 2x2 grid */
@media (max-width: 1024px) {
.value-cards-grid {
max-width: 650px;
gap: 1.25rem;
}
.value-card {
padding: 1.25rem;
}
}
/* Responsive styles for enhanced features */
@media (max-width: 1024px) {
.personal-connection {
margin: 2rem 0;
padding: 1.5rem;
}
.connection-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.timeline-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.timeline-grid::before {
display: none;
}
.insights-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.timeline-number {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
}
@media (max-width: 768px) {
.personal-connection {
margin: 1.5rem 0;
padding: 1.25rem;
}
.connection-header h3 {
font-size: 1.25rem;
}
.connection-item {
padding: 1.25rem;
gap: 0.75rem;
}
.connection-item.dark-card {
padding: 2rem 1.25rem !important;
min-height: 260px !important;
gap: 0.75rem !important;
}
.connection-icon {
font-size: 1.75rem;
}
.connection-item p {
font-size: 1rem;
}
.research-summary {
margin: 1.5rem 0 2rem;
padding: 1.25rem 1.5rem;
}
.research-summary p {
font-size: 1rem;
}
/* Modern Pain Points Mobile */
.pain-points-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.pain-point-card {
padding: 2rem 1.5rem;
}
.pain-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.pain-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
color: white !important;
}
.pain-description {
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9) !important;
}
.recovery-timeline {
margin: 3rem 0;
padding: 2rem 1.5rem;
}
.timeline-header h3 {
font-size: 1.5rem;
}
.timeline-header p {
font-size: 1rem;
}
.timeline-grid {
gap: 2.5rem;
}
.timeline-number {
width: 45px;
height: 45px;
font-size: 1.125rem;
}
.timeline-content h4 {
font-size: 1.125rem;
}
.actionable-insights {
margin: 3rem 0 1.5rem;
padding: 2rem 1.5rem;
}
.insights-header h3 {
font-size: 1.5rem;
}
.insight-card {
padding: 1.5rem;
}
.insight-icon {
font-size: 2.5rem;
margin-bottom: 1.25rem;
}
.insight-content h4 {
font-size: 1.125rem;
}
.stat-icon {
font-size: 1.75rem;
}
.stat-number {
font-size: 1.75rem;
}
.stat-label {
font-size: 0.95rem;
}
.progress-bar {
height: 6px;
}
.meter-bar {
height: 10px;
}
.learn-more-btn {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.detailed-info p {
font-size: 0.85rem;
padding: 0.75rem;
}
.comparison-header h3 {
font-size: 0.95rem;
}
.comparison-row {
gap: 0.75rem;
margin-bottom: 1rem;
}
.comparison-item {
padding: 1rem;
}
.comparison-stat {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.comparison-sub-header {
font-size: 0.7rem;
margin-bottom: 0.375rem;
}
.comparison-description {
font-size: 0.8rem;
line-height: 1.5;
}
.decline-source {
font-size: 0.6rem;
margin: 0.25rem 0 0 0;
}
.row-connector {
width: 20px;
height: 20px;
font-size: 0.875rem;
margin: 0.25rem auto;
}
.recovery-icon {
font-size: 1.125rem;
margin-bottom: 0.375rem;
}
.research-references {
margin: 1.5rem 0;
padding: 1.25rem;
}
.references-title {
font-size: 0.85rem;
margin-bottom: 0.875rem;
}
.reference-item {
font-size: 0.7rem;
line-height: 1.3;
}
.comparison-tagline {
margin-top: 1.5rem;
padding: 1.25rem;
}
.comparison-tagline p {
font-size: 0.9rem;
line-height: 1.5;
}
}
/* Pricing Section - Clean Version */
.pricing {
padding: var(--section-padding);
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
position: relative;
overflow: hidden;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
.pricing::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(31, 162, 160, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(43, 179, 176, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.title-purple {
color: #1FA2A0;
}
.pricing-toggle {
display: inline-flex;
background: #f1f5f9;
border-radius: 8px;
padding: 4px;
margin: 1.5rem auto 0;
}
.toggle-btn {
padding: 8px 20px;
border: none;
background: transparent;
color: #64748b;
font-weight: 500;
font-size: 0.9rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.toggle-btn.active {
background: #8b5cf6;
color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.savings-badge {
background: #10b981;
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
margin-left: 8px;
position: relative;
top: -1px;
}
.yearly-savings {
margin-bottom: 1rem;
padding: 8px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 6px;
text-align: center;
}
.savings-text {
color: #059669;
font-size: 0.85rem;
font-weight: 500;
}
.pricing-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 3rem 0;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.pricing-card {
background: var(--white);
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card.free {
padding: 2rem;
}
.pricing-card.pro {
padding: 2rem;
border-color: #8b5cf6;
box-shadow: 0 10px 40px rgba(139, 92, 246, 0.1);
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.pricing-card.pro:hover {
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
}
.featured-badge {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #8b5cf6;
color: white;
padding: 8px;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 16px 16px 0 0;
}
.card-header {
text-align: left;
margin-bottom: 2rem;
padding-top: 0.5rem;
}
.pro .card-header {
padding-top: 2rem;
}
.plan-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 0.5rem;
}
.plan-description {
font-size: 0.9rem;
color: #64748b;
margin: 0 0 1.5rem 0;
line-height: 1.4;
}
.plan-price {
margin-bottom: 1.5rem;
}
.price {
font-size: 3rem;
font-weight: 700;
color: var(--dark-gray);
line-height: 1;
}
.period {
font-size: 1rem;
color: #64748b;
font-weight: 400;
display: block;
margin-top: 0.25rem;
}
.card-features {
margin-bottom: 0;
}
.features-title {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
margin-top: 2rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding: 0;
}
.feature-item.included .feature-check {
color: #22c55e;
font-weight: bold;
}
.feature-item.excluded .feature-check {
color: #94a3b8;
font-weight: bold;
}
.feature-item.excluded .feature-text {
color: #94a3b8;
}
.feature-check {
font-size: 1rem;
flex-shrink: 0;
margin-top: 2px;
}
.feature-text {
font-size: 0.9rem;
color: var(--dark-gray);
line-height: 1.4;
margin: 0;
}
.btn-pricing {
width: 100%;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 0;
}
.btn-pricing.free {
background: #f8fafc;
color: var(--dark-gray);
border: 1px solid #e2e8f0;
}
.btn-pricing.free:hover {
background: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.btn-pricing.pro {
background: #8b5cf6;
color: white;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.btn-pricing.pro:hover {
background: #7c3aed;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
/* Trust Badges */
.trust-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin: 3rem auto 0;
flex-wrap: wrap;
text-align: center;
width: 100%;
position: relative;
z-index: 1;
}
.trust-badge {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
font-size: 0.9rem;
font-weight: 500;
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg, #22c55e, #16a34a);
border: 1px solid rgba(22, 163, 74, 0.2);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
position: relative;
overflow: hidden;
}
.trust-badge::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 ease;
}
.trust-badge:hover::before {
left: 100%;
}
.trust-badge:hover {
background: linear-gradient(135deg, #16a34a, #15803d);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}
.trust-icon {
font-size: 1rem;
color: white;
}
.trust-text {
font-weight: 500;
color: white;
}
/* Responsive Design for Pricing Section */
@media (max-width: 768px) {
.pricing-cards {
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.pricing-card.free,
.pricing-card.pro {
padding: 1.5rem;
}
.pro .card-header {
padding-top: 1.5rem;
}
.plan-name {
font-size: 1.25rem;
}
.price {
font-size: 2.5rem;
}
.trust-badges {
gap: 1rem;
justify-content: center;
text-align: center;
}
.trust-badge {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.pricing-toggle {
margin: 1rem auto 0;
}
.toggle-btn {
padding: 6px 16px;
font-size: 0.85rem;
}
.savings-badge {
font-size: 0.7rem;
padding: 3px 6px;
margin-left: 6px;
}
.savings-text {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.pricing {
padding: 3rem 0;
}
.pricing-card.free,
.pricing-card.pro {
padding: 1.25rem;
}
.card-header {
margin-bottom: 1.5rem;
}
.pro .card-header {
padding-top: 1.25rem;
}
.plan-name {
font-size: 1.125rem;
}
.price {
font-size: 2rem;
}
.period {
font-size: 0.9rem;
}
.plan-description {
font-size: 0.85rem;
}
.features-title {
font-size: 0.7rem;
}
.feature-item {
margin-bottom: 0.625rem;
}
.feature-text {
font-size: 0.85rem;
}
.btn-pricing {
padding: 10px 20px;
font-size: 0.85rem;
}
.trust-indicators {
flex-direction: column;
gap: 1rem;
align-items: center;
margin-top: 2rem;
}
.trust-item {
font-size: 0.85rem;
}
.pricing-toggle {
margin: 0.75rem auto 0;
}
.toggle-btn {
padding: 5px 12px;
font-size: 0.8rem;
}
.savings-badge {
font-size: 0.65rem;
padding: 2px 5px;
margin-left: 4px;
}
.savings-text {
font-size: 0.75rem;
}
.featured-badge {
font-size: 0.7rem;
padding: 6px;
}
}
/* Zensai Section */
.zensai-section {
padding: var(--section-padding);
padding-bottom: 0;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
position: relative;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
.zensai-section .section-container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--container-padding);
}
.zensai-section .section-title {
color: white;
text-align: center;
}
.zensai-section .section-subtitle {
color: rgba(255, 255, 255, 0.9);
text-align: center;
max-width: none;
}
/* New Zensai Section Styles */
.zensai-content-layout {
display: flex;
align-items: flex-start;
gap: 0.25rem;
margin-top: 2rem;
}
.zensai-text-content {
flex: 1;
max-width: 50%;
}
.featured-zensai-card {
flex: 1;
display: flex;
justify-content: center;
max-width: 50%;
}
.levels-hint {
text-align: left;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 2rem;
}
.supporting-line {
text-align: left;
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
font-weight: 500;
margin-top: 1rem;
margin-bottom: 3rem;
}
.mini-level-teasers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 100%;
}
.teaser-card {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(163, 179, 163, 0.1);
text-align: center;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
transition: none !important;
}
.teaser-card * {
transition: none !important;
}
.teaser-card:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(31, 162, 160, 0.3);
}
.teaser-card .card-header {
margin-bottom: 0.5rem;
}
.teaser-card .level-badge {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.teaser-card .card-title {
font-size: 1.1rem;
font-weight: 700;
color: #1FA2A0;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.teaser-card .character-container {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.teaser-card .character-image {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #f59e0b 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.teaser-card .character-emoji {
font-size: 2rem;
}
.teaser-card .character-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.teaser-card .card-quote {
font-size: 0.8rem;
color: #4A5568;
line-height: 1.4;
font-style: italic;
text-align: center;
margin-top: auto;
}
/* Journey Progress Line */
.journey-progress {
position: relative;
margin: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.progress-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #1FA2A0, #8b5cf6);
border-radius: 1px;
transform: translateY(-50%);
z-index: 1;
}
.progress-line::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 8px solid #8b5cf6;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.progress-label {
background: rgba(255, 255, 255, 0.9);
color: #1FA2A0;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(31, 162, 160, 0.2);
}
.journey-progress:hover .progress-line {
background: linear-gradient(90deg, #1FA2A0, #8b5cf6, #a855f7);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}
.journey-progress:hover .progress-label {
background: linear-gradient(135deg, #1FA2A0, #8b5cf6);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
/* Responsive Design for New Zensai Section */
@media (max-width: 768px) {
.zensai-content-layout {
flex-direction: column;
gap: 2rem;
}
.zensai-text-content {
max-width: 100%;
}
.featured-zensai-card {
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
/* Fix section centering on mobile */
.zensai-section,
.features,
.pricing,
.faq,
.founder-story,
.footer {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.zensai-section .section-container,
.features .section-container,
.pricing .section-container,
.faq .section-container,
.founder-story .section-container,
.footer .footer-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
.zensai-content-layout {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
.zensai-text-content {
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
}
.levels-hint,
.supporting-line {
text-align: center;
}
.mini-level-teasers {
grid-template-columns: 1fr;
gap: 1rem;
}
.teaser-card {
padding: 1rem;
}
}
@media (max-width: 480px) {
.supporting-line {
font-size: 1rem;
margin-bottom: 2rem;
}
.levels-hint {
font-size: 0.8rem;
margin-bottom: 1.5rem;
}
.teaser-item {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.teaser-icon {
font-size: 1.5rem;
}
}
/* FAQ Section */
.faq {
padding: var(--section-padding);
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
position: relative;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
.faq::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.5;
z-index: 1;
}
.faq .section-container {
position: relative;
z-index: 2;
}
.faq .section-title {
color: white;
}
.faq .section-subtitle {
color: rgba(255, 255, 255, 0.9);
}
.faq .section-bubble {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: #FFFFFF;
backdrop-filter: blur(10px);
border-radius: 16px;
margin-bottom: 1rem;
border: 1px solid rgba(163, 179, 163, 0.2);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.faq-item:hover {
border-color: rgba(163, 179, 163, 0.25);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.faq-question {
width: 100%;
background: none;
border: none;
padding: 1.75rem 2rem;
text-align: left;
cursor: pointer !important;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
position: relative;
z-index: 100;
pointer-events: auto !important;
}
.faq-question:hover {
background: rgba(163, 179, 163, 0.05);
}
.faq-question[aria-expanded="true"] {
background: rgba(163, 179, 163, 0.08);
}
.question-text {
font-size: 1.125rem;
font-weight: 600;
color: var(--dark-gray);
line-height: 1.4;
flex: 1;
}
.faq-quick-answer {
padding: 0 2rem 1rem;
font-size: 0.875rem;
color: #1FA2A0;
font-weight: 500;
line-height: 1.4;
margin-top: -0.5rem;
opacity: 0.9;
}
.faq-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--sage-green), rgba(163, 179, 163, 0.8));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 300;
color: white;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(163, 179, 163, 0.3);
}
.faq-question[aria-expanded="true"] .faq-icon {
transform: rotate(45deg);
background: linear-gradient(135deg, var(--gold), rgba(212, 184, 150, 0.9));
box-shadow: 0 4px 12px rgba(212, 184, 150, 0.4);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
opacity: 0;
}
.faq-answer.active {
max-height: 500px;
opacity: 1;
}
.answer-content {
padding: 0 2rem 1.75rem 2rem;
border-top: 1px solid rgba(163, 179, 163, 0.1);
margin-top: 0;
animation: fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.answer-content p {
font-size: 1rem;
color: #1FA2A0;
line-height: 1.7;
margin: 1rem 0 0 0;
}
.faq-cta {
text-align: center;
margin-top: 4rem;
padding: 3rem 2rem;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(163, 179, 163, 0.2);
}
.faq-cta-text {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1.5rem;
}
.faq-contact {
font-size: 0.95rem;
color: var(--light-gray);
margin-top: 1rem;
margin-bottom: 0;
}
.contact-link {
color: var(--sage-green);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.contact-link:hover {
color: #8FA68F;
text-decoration: underline;
}
.contact-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--sage-green);
transition: width 0.3s ease;
}
.contact-link:hover::after {
width: 100%;
}
/* Responsive Design for FAQ Section */
@media (max-width: 768px) {
.faq {
padding: 4rem 0;
}
.faq-item {
margin-bottom: 0.75rem;
border-radius: 12px;
}
.faq-question {
padding: 1.5rem 1.5rem;
gap: 0.75rem;
}
.question-text {
font-size: 1rem;
line-height: 1.3;
word-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
.faq-icon {
width: 28px;
height: 28px;
font-size: 1.125rem;
}
.answer-content {
padding: 0 1.5rem 1.5rem 1.5rem;
}
.answer-content p {
font-size: 0.95rem;
line-height: 1.6;
}
.faq-cta {
margin-top: 3rem;
padding: 2rem 1.5rem;
border-radius: 16px;
}
.faq-cta-text {
font-size: 1.125rem;
margin-bottom: 1.25rem;
}
.faq-contact {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.faq {
padding: 3rem 0;
}
.faq-item {
margin-bottom: 0.625rem;
border-radius: 10px;
}
.faq-question {
padding: 1.25rem 1.25rem;
gap: 0.625rem;
}
.question-text {
font-size: 0.95rem;
line-height: 1.25;
word-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
.faq-icon {
width: 24px;
height: 24px;
font-size: 1rem;
}
.answer-content {
padding: 0 1.25rem 1.25rem 1.25rem;
}
.answer-content p {
font-size: 0.875rem;
line-height: 1.5;
}
.faq-cta {
margin-top: 2.5rem;
padding: 1.5rem 1.25rem;
border-radius: 12px;
}
.faq-cta-text {
font-size: 1rem;
margin-bottom: 1rem;
}
.faq-contact {
font-size: 0.85rem;
margin-top: 0.75rem;
}
}
/* Founder Story Section */
.founder-story {
padding: 0.5rem 0;
background: #FFFFFF;
}
.founder-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: center;
max-width: 1000px;
margin: 3rem auto 0;
}
.founder-image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.founder-photo {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--sage-green);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.founder-text {
padding: 1rem 0;
}
.founder-quote {
font-size: 1.25rem;
line-height: 1.7;
color: var(--dark-gray);
font-style: italic;
margin: 0;
position: relative;
padding-left: 2rem;
padding-right: 2rem;
}
.founder-quote::before {
content: '"';
font-size: 4rem;
color: var(--sage-green);
position: absolute;
top: -0.5rem;
left: 0;
font-family: serif;
line-height: 1;
}
.founder-quote::after {
content: '"';
font-size: 4rem;
color: var(--sage-green);
position: absolute;
bottom: -0.5rem;
right: 0;
font-family: serif;
line-height: 1;
}
.linkedin-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.founder-linkedin {
display: flex;
align-items: center;
gap: 0.5rem;
color: #0077b5;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0.5rem 1rem;
border: 1px solid #0077b5;
border-radius: 25px;
transition: all 0.3s ease;
}
.founder-linkedin:hover {
background: #0077b5;
color: white;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.founder-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.founder-photo {
width: 150px;
height: 150px;
}
.founder-quote {
font-size: 1.1rem;
}
}
/* Footer */
.footer {
background: var(--dark-gray);
color: white;
padding: 2rem 0 1rem;
margin-top: 2rem;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.footer-container {
width: 100%;
margin: 0;
padding: 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
gap: 2rem;
}
.footer-brand {
justify-self: center;
text-align: center;
}
.footer-contact-email {
color: #1FA2A0 !important;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-contact-email:hover {
color: #2BB3B0 !important;
}
.footer-actions {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
justify-self: end;
}
.footer-cta {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
text-decoration: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
text-align: center;
min-width: 160px;
}
.footer-cta:hover {
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(31, 162, 160, 0.3);
}
.footer-support {
color: var(--sage-green);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
text-align: center;
}
.footer-support:hover {
color: var(--gold);
transform: translateX(4px);
}
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.footer-logo .logo-circle {
background: linear-gradient(135deg, var(--sage-green), var(--gold));
}
.footer-logo .logo-text {
color: white;
font-size: 1.25rem;
font-weight: 600;
}
.footer-tagline {
font-size: 0.95rem;
color: white;
line-height: 1.5;
margin: 0;
text-align: center;
margin-bottom: 1rem;
}
.footer-community {
font-size: 0.9rem;
color: var(--sage-green);
line-height: 1.4;
margin: 0;
margin-bottom: 1rem;
font-weight: 500;
}
.footer-about-link {
color: var(--sage-green);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
margin-top: 0.5rem;
}
.footer-about-link:hover {
color: var(--gold);
transform: translateX(4px);
}
.footer-donation-link {
color: var(--sage-green);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
margin-top: 0.5rem;
margin-left: 1rem;
}
.footer-donation-link:hover {
color: var(--gold);
transform: translateX(4px);
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-column {
display: flex;
flex-direction: column;
}
.footer-title {
font-size: 1rem;
font-weight: 600;
color: white;
margin-bottom: 1rem;
letter-spacing: 0.5px;
}
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li {
margin-bottom: 0.5rem;
}
.footer-link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
display: block;
padding: 0.25rem 0;
}
.footer-link:hover {
color: var(--sage-green);
transform: translateX(4px);
}
.footer-bottom {
display: flex;
justify-content: center;
align-items: center;
padding-top: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright {
font-size: 0.875rem;
color: white;
margin: 0;
text-align: center;
}
/* Footer Contact Section */
.footer-contact {
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
}
.footer-contact-content {
text-align: center;
}
.footer-contact-title {
font-size: 0.9rem;
font-weight: 600;
color: white;
margin: 0 0 0.5rem 0;
}
.footer-contact-email {
color: var(--sage-green);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
}
.footer-contact-email:hover {
color: var(--gold);
transform: translateY(-2px);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.footer-badges {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.footer-badge {
background: rgba(163, 179, 163, 0.1);
border: 1px solid rgba(163, 179, 163, 0.2);
border-radius: 20px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
color: var(--sage-green);
font-weight: 500;
}
.footer-made-with {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
font-style: italic;
}
/* Responsive Design for Footer */
@media (max-width: 768px) {
.footer {
padding: 2.5rem 0 1.25rem;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
}
.footer-brand {
text-align: center;
justify-self: center;
}
.footer-actions {
align-items: center;
justify-self: center;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.footer-badges {
justify-content: center;
}
}
@media (max-width: 480px) {
.footer {
padding: 2rem 0 1rem;
}
.footer-content {
gap: 2rem;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
}
.footer-links {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.footer-column {
text-align: center;
}
.footer-title {
font-size: 0.95rem;
margin-bottom: 0.75rem;
}
.footer-link {
font-size: 0.85rem;
}
.footer-link:hover {
transform: none;
}
.footer-copyright,
.footer-made-with {
font-size: 0.8rem;
}
.footer-tagline {
font-size: 0.875rem;
}
/* Footer Contact Mobile Styles */
.footer-contact {
justify-self: center;
margin: 1rem 0;
}
.footer-contact-title {
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
.footer-contact-email {
font-size: 0.85rem;
}
}
/* Small tablet adjustments - switch to 2x2 grid */
@media (max-width: 900px) {
.value-cards-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 700px;
gap: 1.25rem;
}
}
@media (max-width: 480px) {
/* Solution Overview Mobile */
.value-cards-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.25rem;
margin: 1.5rem 0;
max-width: 100%;
}
.value-card {
padding: 1.25rem;
}
.value-icon {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.value-title {
font-size: 1.125rem;
color: white !important;
}
/* Research Stats Mobile */
.research-stats-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.research-stat-card {
padding: 1.5rem;
}
.research-stat-card .stat-number {
font-size: 2rem;
}
.research-stat-card .stat-arrow {
font-size: 1.5rem;
}
.evidence-header h3 {
font-size: 1.5rem;
}
/* Connection Grid Mobile */
.connection-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.connection-item {
padding: 1.25rem;
}
.connection-item.dark-card {
padding: 2rem 1.25rem !important;
min-height: 260px !important;
gap: 0.75rem !important;
}
.connection-icon {
font-size: 1.75rem;
}
.connection-item p {
font-size: 1rem;
}
/* Research Stats Section Mobile */
.stats-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.stat-block {
padding: 2rem 1.5rem;
}
.stat-number {
font-size: 3rem;
}
.stat-label {
font-size: 1.1rem;
}
.stat-source {
font-size: 0.8rem;
}
}
/* Demo Link */
.demo-link-container {
text-align: center;
padding: 0.25rem 0;
max-width: var(--max-width);
margin: 2rem auto 0 auto;
}
.demo-link {
display: inline-block;
color: #1FA2A0;
text-decoration: none;
font-weight: 600;
font-size: 1.125rem;
padding: 0.75rem 1.5rem;
border: 2px solid #1FA2A0;
border-radius: 8px;
transition: all 0.3s ease;
background: rgba(31, 162, 160, 0.05);
}
.demo-link:hover {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.3);
}
/* New Pricing Section Styles */
.pricing-toggle-new {
display: flex;
align-items: center;
justify-content: center;
margin: 2rem 0;
}
.toggle-container {
background: #f8f9fa;
border-radius: 12px;
padding: 0.25rem;
display: flex;
gap: 0.25rem;
}
.toggle-btn-new {
padding: 0.75rem 1.5rem;
border: none;
background: transparent;
color: var(--dark-gray);
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.875rem;
}
.toggle-btn-new.active {
background: white;
color: var(--dark-gray);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pricing-cards-new {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin: 3rem auto;
max-width: 900px;
justify-content: center;
justify-items: center;
position: relative;
z-index: 1;
}
.pricing-card-new {
background: white !important;
border-radius: 20px !important;
padding: 2.5rem 2rem !important;
border: 1px solid rgba(31, 162, 160, 0.1) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: center !important;
width: 100% !important;
max-width: 400px !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.pricing-card-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1FA2A0, #2BB3B0, #3FC5B9);
opacity: 0;
transition: opacity 0.3s ease;
}
.pricing-card-new:hover::before {
opacity: 1;
}
.pricing-card-new:hover {
transform: translateY(-12px) !important;
box-shadow: 0 24px 80px rgba(31, 162, 160, 0.2) !important;
border-color: rgba(31, 162, 160, 0.3) !important;
}
.card-header-new {
display: flex;
flex-direction: column;
align-items: center;
}
.plan-name-new {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.info-icon {
font-size: 0.875rem;
color: var(--light-gray);
cursor: pointer;
}
.plan-description-new {
color: var(--light-gray);
font-size: 0.875rem;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.plan-price-new {
margin-bottom: 1.5rem;
}
.price-new {
font-size: 2rem;
font-weight: 700;
color: var(--dark-gray);
display: block;
}
.original-price {
font-size: 0.875rem;
color: var(--light-gray);
text-decoration: line-through;
margin-left: 0.5rem;
}
.btn-pricing-new {
width: 100% !important;
padding: 1rem 1.5rem !important;
border: none !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
margin-top: 1.5rem !important;
position: relative !important;
overflow: hidden !important;
}
.btn-pricing-new::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 ease;
}
.btn-pricing-new:hover::before {
left: 100%;
}
.btn-pricing-new.basic {
background: var(--dark-gray) !important;
color: white !important;
}
.btn-pricing-new.pro {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
}
.btn-pricing-new.enterprise {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.urgency-callout {
margin: 0.5rem 0;
}
.urgency-text {
font-size: 0.75rem;
color: #ff6b6b;
font-weight: 600;
font-style: italic;
}
.button-microcopy {
font-size: 0.75rem;
color: var(--light-gray);
margin-top: 0.5rem;
font-weight: 500;
}
.enterprise-savings {
margin: 0.5rem 0;
}
.savings-text {
font-size: 0.75rem;
color: var(--sage-green);
font-weight: 600;
}
.enterprise-subtitle {
font-size: 0.75rem;
color: var(--light-gray);
margin-top: 0.25rem;
font-weight: 500;
}
.trust-tagline {
text-align: center;
margin: 2rem 0;
padding: 1rem;
}
.trust-tagline p {
font-size: 0.75rem;
color: #9ca3af;
margin: 0;
font-weight: 400;
}
/* Strong Final CTA Section */
.faq-cta {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 20px;
margin: 3rem 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.final-cta-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 1rem;
line-height: 1.2;
}
.final-cta-subtitle {
font-size: 1.25rem;
color: #1FA2A0;
margin-bottom: 2rem;
line-height: 1.5;
}
.final-cta-highlights {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin: 2rem 0;
}
.highlight-item {
font-size: 1rem;
color: var(--dark-gray);
font-weight: 500;
text-align: center;
line-height: 1.4;
}
.final-cta-btn {
background: linear-gradient(135deg, #1FA2A0 0%, #2BB3B0 50%, #3FC5B9 100%);
color: white;
border: none;
padding: 1rem 2.25rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin: 1.5rem 0 0.75rem;
box-shadow: 0 6px 20px rgba(163, 179, 163, 0.25);
}
.final-cta-ritual {
font-size: 0.875rem;
color: #1FA2A0;
font-weight: 500;
text-align: center;
margin: 0.75rem 0 1.5rem;
opacity: 0.9;
}
.final-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.35);
background: linear-gradient(135deg, #1A8B89 0%, #1FA2A0 50%, #2BB3B0 100%);
}
.final-cta-guarantee {
font-size: 0.875rem;
color: var(--light-gray);
margin: 1rem 0;
font-weight: 500;
}
.faq-contact {
font-size: 0.875rem;
color: var(--light-gray);
margin-top: 1.5rem;
}
.contact-link {
color: var(--sage-green);
text-decoration: none;
font-weight: 600;
}
.contact-link:hover {
text-decoration: underline;
}
/* Mobile Responsive for Final CTA */
@media (max-width: 768px) {
.final-cta-title {
font-size: 2rem;
}
.final-cta-subtitle {
font-size: 1.125rem;
}
.final-cta-stats {
gap: 2rem;
}
.stat-number {
font-size: 1.75rem;
}
.final-cta-btn {
padding: 1rem 2rem;
font-size: 1rem;
}
}
/* Feature Comparison Table */
.feature-comparison-simple {
margin: 3rem 0;
}
.feature-comparison-simple .comparison-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 1.5rem;
text-align: center;
}
.comparison-table-simple {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
max-width: 600px;
margin: 0 auto;
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border-bottom: 1px solid #f3f4f6;
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-row.header {
background: #f8f9fa;
font-weight: 600;
color: var(--dark-gray);
}
.comparison-row > div {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.comparison-row .feature-name {
justify-content: flex-start;
text-align: left;
font-weight: 500;
color: var(--dark-gray);
}
.comparison-row .feature-basic {
color: var(--light-gray);
}
.comparison-row .feature-pro {
color: var(--sage-green);
font-weight: 600;
}
.founding-special {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
.founding-special .original-price {
font-size: 0.875rem;
color: var(--light-gray);
text-decoration: line-through;
}
.special-badge {
background: #ff6b6b;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.yearly-discount {
margin-top: 0.5rem;
}
.discount-badge {
background: var(--sage-green);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-pricing-new:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}
.btn-pricing-new.basic:hover {
background: #2c3e50 !important;
box-shadow: 0 8px 25px rgba(44, 62, 80, 0.3) !important;
}
.btn-pricing-new.pro:hover {
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0) !important;
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.3) !important;
}
/* Feature Comparison Table */
.feature-comparison {
margin: 4rem 0;
}
.comparison-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 2rem;
text-align: center;
}
.comparison-table {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.table-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
border-bottom: 1px solid #e9ecef;
}
.table-row:last-child {
border-bottom: none;
}
.feature-column,
.plan-column {
padding: 1rem;
font-weight: 600;
color: var(--dark-gray);
display: flex;
align-items: center;
}
.feature-name,
.feature-value {
padding: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.feature-name {
font-weight: 500;
color: var(--dark-gray);
}
.feature-value {
font-weight: 600;
color: var(--sage-green);
justify-content: center;
}
.feature-value:contains("-") {
color: var(--light-gray);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.pricing-cards-new {
grid-template-columns: 1fr;
gap: 1rem;
}
.table-header,
.table-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.feature-column,
.plan-column,
.feature-name,
.feature-value {
padding: 0.75rem;
justify-content: center;
text-align: center;
}
}
/* Sticky CTA Button */
.sticky-cta {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
padding: 1rem 0;
z-index: 1002;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transform: translateY(-100%);
transition: transform 0.3s ease;
display: block;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.sticky-cta.show {
transform: translateY(0);
}
.sticky-cta-btn {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: block;
margin: 0 auto;
max-width: 140px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sticky-cta-btn:hover {
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.3);
}
/* Keep It Free Donation Button */
.keep-free-cta {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
padding: 1rem 0;
z-index: 1002;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transform: translateY(-100%);
transition: transform 0.3s ease;
display: block;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.keep-free-cta.show {
transform: translateY(0);
}
.keep-free-btn {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 auto;
max-width: 300px;
box-shadow: 0 2px 8px rgba(31, 162, 160, 0.3);
}
.btn-text-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.125rem;
}
.keep-free-btn .btn-text {
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
.keep-free-btn .btn-subtext {
font-size: 0.75rem;
font-weight: 500;
opacity: 0.9;
line-height: 1;
}
.keep-free-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.4);
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
}
.keep-free-btn .btn-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.keep-free-btn .btn-text {
font-weight: 700;
font-size: 0.875rem;
}
.keep-free-btn .btn-subtext {
font-size: 0.75rem;
opacity: 0.9;
font-weight: 500;
}
/* Comparison Link and Popup */
.comparison-link-container {
text-align: center;
margin: 1rem 0;
}
.comparison-link {
background: transparent;
border: 2px solid #1FA2A0;
color: #1FA2A0;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer !important;
transition: all 0.3s ease;
font-size: 0.875rem;
position: relative;
z-index: 100;
pointer-events: auto !important;
display: inline-block;
box-shadow: none;
}
.comparison-link:hover {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.3);
border-color: transparent;
}
/* Comparison Popup */
.comparison-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 10000;
backdrop-filter: blur(5px);
}
.comparison-popup.active {
display: flex;
}
.comparison-popup-content {
background: white;
border-radius: 16px;
max-width: 900px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: popupSlideIn 0.3s ease-out;
}
@keyframes popupSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid #e9ecef;
position: relative;
}
/* Desktop popup close button styling */
.popup-close.desktop-close {
background: #f8f9fa !important;
border: 1px solid #e9ecef !important;
border-radius: 50% !important;
width: 2rem !important;
height: 2rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1rem !important;
font-weight: bold !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
position: static !important;
margin: 0 !important;
}
.popup-close.desktop-close:hover {
background: #e9ecef !important;
color: #1FA2A0 !important;
transform: scale(1.1) !important;
}
.popup-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-gray);
margin: 0;
flex: 1;
text-align: center;
}
.popup-close {
background: #f8f9fa !important;
border: none !important;
font-size: 1.5rem !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
padding: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
font-weight: bold !important;
position: relative !important;
z-index: 10001 !important;
opacity: 1 !important;
visibility: visible !important;
}
.popup-close:hover {
background: #e9ecef !important;
color: var(--dark-gray) !important;
transform: scale(1.1) !important;
}
#comparison-close {
background: #f8f9fa !important;
border: none !important;
font-size: 1.5rem !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
padding: 0 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
font-weight: bold !important;
position: relative !important;
z-index: 10001 !important;
opacity: 1 !important;
visibility: visible !important;
}
.comparison-table-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 2rem;
}
.comparison-column {
padding: 1.5rem;
border-radius: 12px;
}
.comparison-column.without {
background: #f8f9fa;
border: 1px solid #e9ecef;
}
.comparison-column.with {
background: #f0f8f0;
border: 1px solid #d4edda;
}
.column-header {
text-align: center;
margin-bottom: 2rem;
}
.column-header h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-gray);
margin: 0 0 0.5rem 0;
}
.mode-badge {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
color: white;
}
.mode-badge.reactive {
background: #dc3545;
}
.mode-badge.intentional {
background: var(--sage-green);
}
.comparison-points {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.comparison-point {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.point-emoji {
font-size: 1.5rem;
flex-shrink: 0;
}
.point-content h5 {
font-size: 1rem;
font-weight: 600;
color: var(--dark-gray);
margin: 0 0 0.5rem 0;
}
.point-content p {
font-size: 0.875rem;
color: var(--light-gray);
margin: 0;
line-height: 1.4;
}
/* Mobile Responsive for Popup */
@media (max-width: 768px) {
.comparison-table-container {
grid-template-columns: 1fr;
gap: 1rem;
}
.comparison-popup-content {
width: 95%;
max-height: 95vh;
}
.popup-header {
padding: 1rem 1rem 0.5rem !important;
margin: 0 !important;
border-bottom: none !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Show popup title on mobile */
.popup-title {
display: block !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--dark-gray) !important;
margin: 0 !important;
text-align: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure mobile close button is visible and positioned correctly */
.comparison-popup-content {
position: relative !important;
}
.popup-close.mobile-close {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
z-index: 10001 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.5rem !important;
height: 2.5rem !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #e9ecef !important;
border-radius: 50% !important;
font-size: 1.2rem !important;
font-weight: bold !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
margin: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
transition: all 0.2s ease !important;
}
.popup-close.mobile-close:hover {
background: white !important;
border-color: #1FA2A0 !important;
color: #1FA2A0 !important;
transform: scale(1.1) !important;
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.2) !important;
}
/* Hide desktop close button on mobile */
.popup-close.desktop-close {
display: none !important;
}
/* Position mobile close button at top right of popup */
.comparison-popup-content {
position: relative !important;
}
/* Show and position mobile close button at top right */
.popup-close.mobile-close {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
z-index: 10001 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.5rem !important;
height: 2.5rem !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #e9ecef !important;
border-radius: 50% !important;
font-size: 1.2rem !important;
font-weight: bold !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
margin: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
transition: all 0.2s ease !important;
}
.popup-close.mobile-close:hover {
background: white !important;
border-color: #1FA2A0 !important;
color: #1FA2A0 !important;
transform: scale(1.1) !important;
box-shadow: 0 4px 12px rgba(31, 162, 160, 0.2) !important;
}
/* Style column header title container */
.column-header-title {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.column-header-title h4 {
margin: 0 !important;
text-align: left !important;
}
/* Remove any spacing above column header */
.column-header {
margin-top: 0 !important;
padding-top: 1rem !important;
}
.comparison-table-container {
padding: 1.5rem;
}
.comparison-column {
padding: 1rem;
}
}
/* FORCE PRICING STYLES - HIGH SPECIFICITY */
.pricing .pricing-cards-new .pricing-card-new {
background: white !important;
border-radius: 20px !important;
padding: 2.5rem 2rem !important;
border: 1px solid rgba(31, 162, 160, 0.1) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: center !important;
width: 100% !important;
max-width: 400px !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.pricing .pricing-cards-new .pricing-card-new::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
.pricing .pricing-cards-new .pricing-card-new:hover::before {
opacity: 1 !important;
}
.pricing .pricing-cards-new .pricing-card-new:hover {
transform: translateY(-12px) !important;
box-shadow: 0 24px 80px rgba(31, 162, 160, 0.2) !important;
border-color: rgba(31, 162, 160, 0.3) !important;
}
.pricing .pricing-cards-new .btn-pricing-new {
width: 100% !important;
padding: 1rem 1.5rem !important;
border: none !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
margin-top: 1.5rem !important;
position: relative !important;
overflow: hidden !important;
}
.pricing .pricing-cards-new .btn-pricing-new::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
transition: left 0.5s ease !important;
}
.pricing .pricing-cards-new .btn-pricing-new:hover::before {
left: 100% !important;
}
.pricing .pricing-cards-new .btn-pricing-new.basic {
background: var(--dark-gray) !important;
color: white !important;
}
.pricing .pricing-cards-new .btn-pricing-new.pro {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
}
.pricing .pricing-cards-new .btn-pricing-new:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}
.pricing .pricing-cards-new .btn-pricing-new.basic:hover {
background: #2c3e50 !important;
box-shadow: 0 8px 25px rgba(44, 62, 80, 0.3) !important;
}
.pricing .pricing-cards-new .btn-pricing-new.pro:hover {
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0) !important;
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.3) !important;
}
/* Enhanced button hover effects */
.btn-pricing-new.basic:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.4) !important;
background: linear-gradient(135deg, #1A8B89, #1FA2A0) !important;
}
.btn-pricing-new.pro:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.3) !important;
background: #1FA2A0 !important;
color: white !important;
}
/* Clean Mobile Hero Styles */
@media (max-width: 768px) {
/* Show trust banner on mobile */
.trust-banner {
display: inline-block !important;
margin-bottom: 1.5rem !important;
}
/* Hide hero features on mobile */
.hero-features-simple {
display: none !important;
}
/* Hide learn-more-link on mobile */
.learn-more-link {
display: none !important;
}
.hero-visual {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin-top: 1rem !important;
width: 100% !important;
min-height: 400px !important;
}
.cycle-demo {
width: 95% !important;
max-width: 95% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
position: relative !important;
margin: 0 auto !important;
overflow: hidden !important;
contain: layout !important;
}
.demo-container {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
position: relative !important;
overflow: hidden !important;
height: auto !important;
min-height: 300px !important;
contain: layout !important;
}
/* Ensure demo steps are visible on mobile */
.demo-step {
display: block !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
overflow: hidden !important;
contain: layout !important;
}
.demo-step.active {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Make demo screens wider on mobile */
.google-search-demo,
.chatgpt-interface,
.demo-step-background,
.reflection-demo {
width: 100% !important;
max-width: 100% !important;
}
.gpt-image,
.google-logo-large-img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* Prevent horizontal scrolling and layout shifts */
* {
max-width: 100%;
word-wrap: break-word;
}
.section-container {
overflow-x: hidden;
position: relative;
}
.hero {
overflow-x: hidden;
position: relative;
}
/* Fix any elements that might cause horizontal scroll */
.demo-container,
.cycle-demo,
.demo-step {
overflow-x: hidden !important;
overflow-y: hidden !important;
position: relative !important;
contain: layout !important;
will-change: auto !important;
}
/* Ensure images don't break layout */
img {
max-width: 100%;
height: auto;
}
/* Fix any wide elements */
.stats-grid,
.features-grid,
.pricing-cards-new {
overflow-x: hidden;
}
/* Enhanced mobile buttons */
.btn-primary-hero {
width: 100% !important;
padding: 1rem 2rem !important;
font-size: 1.125rem !important;
margin-bottom: 1rem !important;
}
/* Trust indicators */
.trust-indicators {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.trust-icon {
font-size: 1rem;
}
/* Enhanced button styling */
.btn-primary-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border: none;
border-radius: 12px;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(31, 162, 160, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-primary-hero:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.4);
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
}
.btn-primary-hero:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(31, 162, 160, 0.3);
}
.btn-arrow {
font-size: 1.25rem;
transition: transform 0.3s ease;
}
.btn-primary-hero:hover .btn-arrow {
transform: translateX(3px);
}
/* Enhanced CTA styling */
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
flex-wrap: wrap;
}
.final-cta-btn {
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
font-size: 1.125rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 200px;
justify-content: center;
}
.final-cta-btn.primary {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
border: none;
box-shadow: 0 4px 15px rgba(31, 162, 160, 0.3);
}
.final-cta-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.4);
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
}
.final-cta-btn.secondary {
background: transparent;
color: #1FA2A0;
border: 2px solid #1FA2A0;
}
.final-cta-btn.secondary:hover {
background: #1FA2A0;
color: white;
transform: translateY(-2px);
}
.final-trust-signals {
display: flex;
justify-content: center;
gap: 2rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.trust-signal {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #6B7280;
font-weight: 500;
}
.trust-signal .trust-icon {
font-size: 1rem;
}
/* Consistent Section Formatting */
.section-header {
text-align: center;
margin-bottom: var(--space-3xl);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.section-title {
font-size: var(--text-5xl);
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--space-md);
color: var(--dark-gray);
}
.section-subtitle {
font-size: var(--text-xl);
line-height: 1.6;
color: #6B7280;
margin-bottom: var(--space-lg);
}
.section-bubble {
display: inline-block;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
padding: var(--space-xs) var(--space-md);
border-radius: 25px;
font-size: var(--text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-md);
}
/* Consistent Card Formatting */
.feature-card {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border-radius: 16px;
padding: var(--space-xl);
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
border: 1px solid rgba(31, 162, 160, 0.3);
}
.value-card {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border-radius: 16px;
padding: var(--space-xl);
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
border: 1px solid rgba(31, 162, 160, 0.3);
}
.pain-point-card {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
border-radius: 16px;
padding: var(--space-xl);
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
border: 1px solid rgba(31, 162, 160, 0.3);
}
.value-card:hover, .feature-card:hover, .pain-point-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
/* Consistent Button Formatting */
.btn-primary, .btn-primary-hero, .final-cta-btn.primary {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
color: white;
border: none;
border-radius: 12px;
padding: var(--space-sm) var(--space-lg);
font-weight: 600;
font-size: var(--text-lg);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(31, 162, 160, 0.3);
}
.btn-primary:hover, .btn-primary-hero:hover, .final-cta-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(31, 162, 160, 0.4);
background: linear-gradient(135deg, #1A8B89, #1FA2A0, #2BB3B0);
}
/* Accessibility improvements */
.keyboard-navigation *:focus {
outline: 2px solid #1FA2A0 !important;
outline-offset: 2px !important;
}
.keyboard-navigation button:focus,
.keyboard-navigation .nav-link:focus,
.keyboard-navigation .faq-question:focus {
outline: 2px solid #1FA2A0 !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px rgba(31, 162, 160, 0.2) !important;
}
/* Skip to content link for screen readers */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #1FA2A0;
color: white;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 10000;
}
.skip-link:focus {
top: 6px;
}
/* Mobile navigation improvements */
.nav-menu {
position: fixed;
top: 100%;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-link {
font-size: 1.125rem;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* Mobile hero improvements */
.hero {
padding: 5rem 0 3rem;
min-height: 100vh;
text-align: center;
}
.hero-container {
max-width: 100%;
padding: 0 1.5rem;
}
/* Mobile demo improvements */
.demo-container {
margin: 2rem 0;
padding: 0 1rem;
}
/* Mobile section spacing */
.section-container {
padding: 0 1.5rem;
}
/* Mobile cards */
.feature-card {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
}
.value-card {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
}
.pain-point-card {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9);
}
/* Mobile pricing cards */
.pricing-cards-new {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
margin: 2rem 0 !important;
}
.pricing-card-new {
max-width: 100% !important;
margin: 0 !important;
}
/* Mobile FAQ improvements */
.faq-question {
padding: 1rem !important;
font-size: 1rem !important;
}
.question-text {
word-wrap: break-word !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
-ms-hyphens: auto !important;
overflow-wrap: break-word !important;
}
.faq-answer {
padding: 0 1rem 1rem !important;
}
/* Fix FAQ centering on mobile */
.faq {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.faq .section-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
.faq-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* Trust Features Mobile Styles */
.trust-features-cards {
display: grid !important;
}
.trust-features-mobile {
display: none !important;
}
/* Comparison Popup Close Button Styles */
.popup-close.desktop-close {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f8f9fa !important;
border: 1px solid #e9ecef !important;
border-radius: 50% !important;
width: 2rem !important;
height: 2rem !important;
font-size: 1rem !important;
font-weight: bold !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
position: static !important;
margin: 0 !important;
}
.popup-close.desktop-close:hover {
background: #e9ecef !important;
color: #1FA2A0 !important;
transform: scale(1.1) !important;
}
.popup-close.mobile-close {
display: none !important;
}
/* Hide mobile close button on desktop */
@media (min-width: 769px) {
.popup-close.mobile-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Hide desktop close button on desktop */
.popup-close.desktop-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* Additional desktop override */
.comparison-popup .popup-close.mobile-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Force hide mobile close button on desktop with maximum specificity */
.comparison-popup .comparison-table-container .comparison-column .column-header .column-header-title .popup-close.mobile-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
/* Alternative approach - hide the entire column header title on desktop */
@media (min-width: 769px) {
.comparison-popup .column-header-title {
display: flex !important;
justify-content: center !important;
}
.comparison-popup .column-header-title .popup-close.mobile-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Force intentional mode badge to teal on desktop */
.mode-badge.intentional {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
}
}
/* FINAL OVERRIDE - Force hide all close buttons on desktop */
@media (min-width: 769px) {
.comparison-popup .popup-close.desktop-close,
.comparison-popup .popup-close.mobile-close,
.comparison-popup .column-header-title .popup-close.mobile-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* Force intentional mode badge to teal on desktop */
.comparison-popup .mode-badge.intentional,
.mode-badge.intentional {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
border: none !important;
}
}
/* MOBILE OVERRIDE - Force mobile close button to show */
@media (max-width: 768px) {
.popup-close.mobile-close {
display: flex !important;
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
z-index: 10001 !important;
width: 2.5rem !important;
height: 2.5rem !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #e9ecef !important;
border-radius: 50% !important;
font-size: 1.2rem !important;
font-weight: bold !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
margin: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
transition: all 0.2s ease !important;
align-items: center !important;
justify-content: center !important;
}
/* Force intentional mode badge to show teal on mobile */
.mode-badge.intentional {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
}
/* Additional mobile override for intentional mode badge */
.comparison-popup .mode-badge.intentional,
.comparison-column .mode-badge.intentional {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
border: none !important;
}
}
/* FINAL MOBILE OVERRIDE - Must be last */
@media (max-width: 768px) {
/* Force popup header to show on mobile */
.comparison-popup .popup-header {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 1rem 1rem 0 !important;
margin: 0 !important;
margin-top: 8rem !important;
margin-bottom: 0 !important;
border-bottom: none !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
}
/* Additional mobile override for popup header margin */
.popup-header {
margin-top: 8rem !important;
}
/* Force popup title to show on mobile */
.comparison-popup .popup-title {
display: block !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--dark-gray) !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
text-align: center !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
}
/* Force intentional mode badge to teal on mobile */
.comparison-popup .mode-badge.intentional,
.comparison-column .mode-badge.intentional,
.mode-badge.intentional {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
border: none !important;
background-color: #1FA2A0 !important;
}
}
.column-header-title {
display: block !important;
}
@media (max-width: 768px) {
.trust-features-cards {
display: none !important;
}
.trust-features-mobile {
display: block !important;
}
}
/* Mobile sticky CTA */
.sticky-cta {
bottom: 1rem !important;
right: 1rem !important;
left: 1rem !important;
width: auto !important;
}
.sticky-cta-btn {
width: 100% !important;
padding: 1rem !important;
font-size: 1.125rem !important;
}
}
/* Extra small devices */
@media (max-width: 480px) {
.hero-title {
font-size: 1.75rem !important;
text-align: center !important;
margin: 0 auto 1rem auto !important;
max-width: 100% !important;
}
.hero-description {
text-align: center !important;
margin: 0 auto 1.5rem auto !important;
max-width: 100% !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
.section-title {
font-size: 2rem !important;
}
.btn-primary-hero {
font-size: 1rem !important;
padding: 0.875rem 1.5rem !important;
}
.nav-container {
padding: 0 1rem;
}
.section-container {
padding: 0 1rem;
}
}
/* FINAL MOBILE HERO OVERRIDE - MUST BE LAST */
@media (max-width: 768px) {
.hero {
padding: 8rem 0 4rem !important;
}
.hero-content {
text-align: center !important;
padding-top: 4rem !important;
}
.hero-title {
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto 2rem auto !important;
}
.hero-title .title-line {
text-align: center !important;
}
.hero-description {
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto 2.5rem auto !important;
}
.hero-buttons {
margin: 3rem auto !important;
}
/* Make both buttons same size on mobile */
.btn-gradient-hero {
width: 100% !important;
max-width: 300px !important;
min-width: 360px !important;
padding: 1.25rem 2.5rem !important;
margin: 0 auto !important;
}
}
/* FINAL MOBILE HERO OVERRIDE FOR SMALL SCREENS */
@media (max-width: 480px) {
.hero {
padding: 6rem 0 3rem !important;
}
.hero-content {
text-align: center !important;
padding-top: 3rem !important;
}
.hero-title {
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto 1.5rem auto !important;
font-size: 2rem !important;
}
.hero-title .title-line {
text-align: center !important;
}
.hero-description {
text-align: center !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto 2rem auto !important;
font-size: 1rem !important;
}
.hero-buttons {
margin: 2.5rem auto !important;
}
/* Make both buttons same size on small mobile */
.btn-gradient-hero {
width: 100% !important;
max-width: 300px !important;
min-width: 360px !important;
padding: 1.25rem 2.5rem !important;
margin: 0 auto !important;
}
}
/* Gradient Hero Button Styles */
.btn-gradient-hero {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
color: white !important;
border: 2px solid transparent !important;
border-radius: 12px !important;
padding: 1.25rem 2.5rem !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
margin-top: 1rem !important;
width: 100% !important;
max-width: 300px !important;
box-shadow: 0 4px 20px rgba(163, 179, 163, 0.3) !important;
min-width: 360px !important;
animation: gradientShift 10s ease-in-out infinite !important;
}
.btn-gradient-hero:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 30px rgba(163, 179, 163, 0.4) !important;
background-size: 400% 400% !important;
}
/* Ensure gradient animation works on mobile */
@media (max-width: 768px) {
.btn-gradient-hero {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
}
}
/* Force gradient animation for all screen sizes - same as mindfulness text */
.btn-gradient-hero {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
color: white !important;
border: 2px solid transparent !important;
position: relative !important;
overflow: hidden !important;
}
.btn-gradient-hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
border-radius: 12px !important;
z-index: -1 !important;
}
.btn-gradient-hero .btn-text,
.btn-gradient-hero .btn-arrow {
color: white !important;
position: relative !important;
z-index: 1 !important;
}
/* ULTRA SPECIFIC OVERRIDE - MUST BE LAST */
a.btn-gradient-hero {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
color: white !important;
border: 2px solid transparent !important;
position: relative !important;
overflow: hidden !important;
}
a.btn-gradient-hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
border-radius: 12px !important;
z-index: -1 !important;
}
a.btn-gradient-hero .btn-text,
a.btn-gradient-hero .btn-arrow {
color: white !important;
position: relative !important;
z-index: 1 !important;
}
/* FINAL OVERRIDE - FORCE GRADIENT ANIMATION */
.hero-buttons a.btn-gradient-hero {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
color: white !important;
border: 2px solid transparent !important;
position: relative !important;
overflow: hidden !important;
}
.hero-buttons a.btn-gradient-hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
border-radius: 12px !important;
z-index: -1 !important;
}
.hero-buttons a.btn-gradient-hero .btn-text,
.hero-buttons a.btn-gradient-hero .btn-arrow {
color: white !important;
position: relative !important;
z-index: 1 !important;
}
/* Watch Demo Button Styles */
.btn-watch-demo {
background: transparent;
color: white;
border: 2px solid white;
border-radius: 12px;
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
width: 100%;
max-width: 300px;
box-shadow: 0 4px 20px rgba(163, 179, 163, 0.3);
min-width: 360px;
}
.btn-watch-demo:hover {
background: white;
color: #1FA2A0;
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(163, 179, 163, 0.4);
}
.btn-play-icon {
font-size: 0.9rem;
}
/* Mobile Video Modal */
.mobile-video-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
align-items: center;
justify-content: center;
}
.mobile-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.mobile-video-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.mobile-video-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 2rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: all 0.3s ease;
}
.mobile-video-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.mobile-video {
width: 100%;
height: auto;
max-height: 80vh;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Mobile-specific styles for Watch Demo button */
@media (max-width: 768px) {
/* Hide demo image/video on mobile */
.hero-visual {
display: none !important;
}
.btn-watch-demo {
display: flex !important;
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
margin: 1rem auto 0 auto;
width: 100% !important;
max-width: 300px !important;
min-width: 360px !important;
}
}
@media (min-width: 769px) {
.btn-watch-demo {
display: none !important;
}
}
/* WORKING SOLUTION - ANIMATED GRADIENT BACKGROUND */
.hero-buttons a[class*="btn-gradient-hero"] {
background: linear-gradient(90deg, #8b5cf6, #3b82f6, #f59e0b, #ec4899, #6366f1, #8b5cf6) !important;
background-size: 300% 300% !important;
animation: gradientShift 10s ease-in-out infinite !important;
color: white !important;
border: 2px solid transparent !important;
position: relative !important;
overflow: hidden !important;
}
.hero-buttons a[class*="btn-gradient-hero"] .btn-text,
.hero-buttons a[class*="btn-gradient-hero"] .btn-arrow {
color: white !important;
position: relative !important;
z-index: 2 !important;
}
/* ULTIMATE OVERRIDE - Must be last in file */
@media (min-width: 769px) {
/* Hide mobile close buttons on desktop */
.comparison-popup .popup-close.mobile-close,
.comparison-popup .column-header-title .popup-close.mobile-close,
.popup-close.mobile-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
z-index: -1 !important;
}
/* Show and style desktop close button */
.comparison-popup .popup-close.desktop-close,
.popup-close.desktop-close {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f8f9fa !important;
border: 1px solid #e9ecef !important;
border-radius: 50% !important;
width: 2rem !important;
height: 2rem !important;
font-size: 1rem !important;
font-weight: bold !important;
color: var(--dark-gray) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
position: static !important;
margin: 0 !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 10 !important;
}
.comparison-popup .popup-close.desktop-close:hover,
.popup-close.desktop-close:hover {
background: #e9ecef !important;
color: #1FA2A0 !important;
transform: scale(1.1) !important;
}
/* Force intentional mode badge to teal on desktop */
.comparison-popup .mode-badge.intentional,
.mode-badge.intentional,
.comparison-column .mode-badge.intentional {
background: linear-gradient(135deg, #1FA2A0, #2BB3B0, #3FC5B9) !important;
color: white !important;
border: none !important;
background-color: #1FA2A0 !important;
}
/* Remove extra space under title on desktop */
.comparison-popup .popup-header {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.comparison-popup .popup-title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}