/* Color Variables - Dark Black & Torquoise Theme */
:root {
    --primary-torquoise: #00E5B4;
    --secondary-torquoise: #00D4AA;
    --accent-torquoise: #00BFA5;
    --urgent-red: #DC2626;
    --neutral-dark: #000000;
    --neutral-charcoal: #1A1A1A;
    --neutral-medium: #6B7280;
    --neutral-light: #F8F9FA;
    --white: #FFFFFF;
    --black: #000000;
    --text-secondary: rgba(0, 0, 0, 0.62);
    --background-dark: #000000;
    --background-light: #F8F9FA;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

/* Smooth scrolling for navigation links */
.nav-link {
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-torquoise, #00E5B4);
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--white);
    background-color: var(--black);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--white);
}

h1 {
    font-size: 120px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -2%;
    text-align: center;
}

h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.0833333333333333em;
    letter-spacing: -2%;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: 24px;
    line-height: 1.3333333333333333em;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    line-height: 1.2em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--primary-torquoise);
    color: var(--white);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::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;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background: var(--secondary-torquoise);
    color: var(--white);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 229, 180, 0.4);
}

.btn-outline {
    background: rgba(0, 0, 0, 0.3);
    color: var(--white);
    border: 1.5px solid var(--primary-torquoise);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 180, 0.1), transparent);
    transition: left 0.5s;
}

.btn-outline:hover::before {
    left: 100%;
}

.btn-outline:hover {
    background: var(--primary-torquoise);
    color: var(--white);
    border-color: var(--primary-torquoise);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 229, 180, 0.3);
}

.btn-large {
    padding: 12px 24px;
    font-size: 20px;
}

.btn-small {
    padding: 12px 16px;
    font-size: 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    margin: 24px 48px 0;
    z-index: 1000;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 229, 180, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInFromLeft 0.8s ease-out;
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(30px) !important;
    box-shadow: 0px 8px 32px 0px rgba(0, 229, 180, 0.15) !important;
    border: 1px solid rgba(0, 229, 180, 0.3) !important;
}

/* Ensure navbar stays dark on scroll - override any conflicting styles */
.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.98) !important;
}

.navbar.scrolled .container {
    background-color: transparent !important;
}

/* Fix button text visibility on dark navbar */
.navbar .btn-outline {
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--white) !important;
    border-color: var(--primary-torquoise) !important;
    backdrop-filter: blur(10px) !important;
}

.navbar .btn-outline:hover {
    background: var(--primary-torquoise) !important;
    color: var(--white) !important;
    border-color: var(--primary-torquoise) !important;
    transform: translateY(-1px) !important;
}

.navbar .btn-primary {
    background: var(--primary-torquoise) !important;
    color: var(--white) !important;
}

.navbar .btn-primary:hover {
    background: var(--secondary-torquoise) !important;
    color: var(--white) !important;
}

/* Ensure navigation links are visible on dark navbar */
.navbar .nav-link {
    color: var(--white) !important;
}

.navbar .nav-link:hover {
    color: var(--primary-torquoise) !important;
}

.navbar .brand-text {
    color: var(--primary-torquoise) !important;
}

.navbar .brand-subtext {
    color: var(--neutral-medium) !important;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px 16px 32px;
    gap: 96px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.logo {
    width: 36px;
    height: 36px;
}

.brand-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-text {
    font-family: 'Sen', serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -4%;
    color: var(--primary-torquoise);
}

.brand-subtext {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    color: var(--neutral-medium);
    margin-top: -2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3333333333333333em;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-torquoise);
}

.chevron {
    width: 16px;
    height: 16px;
}

.button-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--black) 0%, #0a0a0a 50%, var(--black) 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 229, 180, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(0, 229, 180, 0.02) 50%, transparent 100%);
    pointer-events: none;
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 0;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 120px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -2%;
    text-align: center;
    color: var(--white);
    margin-bottom: 0;
    animation: slideInFromLeft 1.2s ease-out 0.3s both;
    text-shadow: 
        0 0 20px rgba(0, 229, 180, 0.3),
        0 0 40px rgba(0, 229, 180, 0.1);
    position: relative;
    z-index: 2;
}

/* Removed flashy pseudo-element animations for professional look */

.hero-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4em;
    text-align: center;
    color: var(--neutral-medium);
    margin: 0;
    max-width: 800px;
    animation: slideInFromRight 1.2s ease-out 0.6s both;
}

.hero-visual {
    width: 100%;
    height: 600px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-video-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 600px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 229, 180, 0.3);
    border-radius: 16px;
    box-shadow: 
        0px 12px 27px 0px rgba(0, 0, 0, 0.3), 
        0px 50px 50px 0px rgba(0, 229, 180, 0.1), 
        0px 112px 67px 0px rgba(0, 0, 0, 0.2), 
        0px 199px 80px 0px rgba(0, 0, 0, 0), 
        0px 311px 87px 0px rgba(0, 0, 0, 0);
    animation: scaleIn 1.5s ease-out 0.9s both, float 6s ease-in-out infinite 2s;
    transition: all 0.4s ease;
    overflow: hidden;
}

.dashboard-video-container:hover {
    transform: translateY(-5px);
    box-shadow: 
        0px 12px 40px 0px rgba(0, 0, 0, 0.5), 
        0px 0px 0px 1px rgba(0, 229, 180, 0.2);
}

/* Dashboard Image Wrapper */
.dashboard-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.dashboard-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.1);
}

/* Play Button Overlay */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.play-button {
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.play-button:hover {
    transform: scale(1.1);
}

.play-button svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.play-text {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

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

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 80%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.close-modal:hover {
    background: rgba(0, 0, 0, 0.8);
}

.video-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

.dashboard-video,
.dashboard-video-iframe,
.dashboard-video-iframe-fallback,
.dashboard-video-iframe-alt {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    z-index: 1;
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-thumbnail-wrapper:hover {
    transform: scale(1.02);
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    transition: all 0.3s ease;
    background: #1a1a1a;
    display: block;
}

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

.video-thumbnail-wrapper:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.play-button-large {
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.video-thumbnail-wrapper:hover .play-button-large {
    transform: scale(1.1);
}

.play-button-large svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.play-text-large {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Video Player Styles */
.video-player {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
    position: relative;
}

.video-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #333;
}

.video-player-header h3 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.close-video-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-video-btn:hover {
    color: #00e5b4;
}

.video-iframe {
    width: 100%;
    height: calc(100% - 60px);
    border: none;
    border-radius: 0 0 16px 16px;
    object-fit: contain;
    background: #000;
}

.video-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 60px);
    background: #1a1a1a;
    color: white;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top: 4px solid #00e5b4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.video-loading p {
    color: #ccc;
    font-size: 16px;
    margin: 0;
}


.dashboard-video:hover,
.dashboard-video-iframe:hover {
    transform: scale(1.02);
}

.dashboard-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(0, 0, 0, 0.1) 0%, 
        rgba(0, 229, 180, 0.05) 50%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    border-radius: 16px;
    pointer-events: none;
    z-index: 2;
}

.video-fallback {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 16px;
}

.fallback-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    opacity: 0.8;
}

.fallback-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 20px 40px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 180, 0.3);
    backdrop-filter: blur(10px);
}

.fallback-overlay p {
    color: var(--primary-torquoise);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

/* Legacy dashboard-mockup styles for backward compatibility */
.dashboard-mockup {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 500px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 229, 180, 0.3);
    border-radius: 16px;
    box-shadow: 
        0px 12px 27px 0px rgba(0, 0, 0, 0.3), 
        0px 50px 50px 0px rgba(0, 229, 180, 0.1), 
        0px 112px 67px 0px rgba(0, 0, 0, 0.2), 
        0px 199px 80px 0px rgba(0, 0, 0, 0), 
        0px 311px 87px 0px rgba(0, 0, 0, 0);
    animation: scaleIn 1.5s ease-out 0.9s both, float 6s ease-in-out infinite 2s;
    transition: all 0.4s ease;
}

.dashboard-mockup:hover {
    transform: translateY(-5px);
    box-shadow: 
        0px 12px 40px 0px rgba(0, 0, 0, 0.5), 
        0px 0px 0px 1px rgba(0, 229, 180, 0.2);
}

.mockup-container {
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Simplified mockup design - removed header */

.mockup-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    padding: 40px;
    height: 100%;
}

.mockup-placeholder {
    background: rgba(0, 229, 180, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 229, 180, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.mockup-placeholder:hover {
    background: rgba(0, 229, 180, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 229, 180, 0.15);
}

.mockup-placeholder:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
}

.mockup-placeholder:nth-child(2) {
    grid-column: 1 / 3;
    grid-row: 2;
}

.mockup-placeholder:nth-child(3) {
    grid-column: 3;
    grid-row: 1 / 3;
}

/* Section Styles */
.section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -2%;
    text-align: center;
    margin-bottom: 24px;
    color: var(--white);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.section-subtitle {
    font-size: 1.25rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Offer Section */
.offer-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--black) 0%, #1a1a1a 50%, var(--black) 100%);
    position: relative;
}

.offer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0, 229, 180, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.offer-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.offer-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white);
    margin: 0;
    text-align: center;
    max-width: 800px;
}

/* Features Section */
.features-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f0f0f 0%, var(--black) 50%, #1a1a1a 100%);
    position: relative;
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(0, 229, 180, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.features-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.features-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.features-text .section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.0625em;
    letter-spacing: -2%;
    text-align: center;
    color: var(--white);
}

.features-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    color: var(--white);
    margin: 0;
    max-width: 900px;
}

.features-visual {
    width: 100%;
    height: 756px;
}

.dashboard-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    border: 1.5px solid rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0.1);
}

/* Scarcity Section */
.scarcity-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--black) 0%, #0d0d0d 50%, var(--black) 100%);
    position: relative;
}

.scarcity-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 229, 180, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.scarcity-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.scarcity-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white);
    margin: 0;
    text-align: center;
    max-width: 800px;
}

/* Guarantee Section */
.guarantee-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a1a1a 0%, var(--black) 50%, #0f0f0f 100%);
    position: relative;
    display: flex;
    align-items: center;
}

.guarantee-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(0, 229, 180, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.guarantee-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
}

.guarantee-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.guarantee-text .section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.0625em;
    letter-spacing: -2%;
    text-align: center;
    color: var(--white);
}

.guarantee-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    color: var(--white);
    margin: 0;
    max-width: 800px;
}

/* Testimonials Section */
.testimonials-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--black) 0%, #0d0d0d 50%, #1a1a1a 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(0, 229, 180, 0.07) 0%, transparent 60%);
    pointer-events: none;
}

.testimonials-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.testimonials-section .section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.0833333333333333em;
    letter-spacing: -2%;
    text-align: center;
    color: var(--white);
}

.testimonials-grid {
    display: flex;
    gap: 24px;
    width: 100%;
    overflow-x: auto;
    padding: 0 0 24px 0;
}

.testimonial-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(26, 26, 26, 0.9) 100%);
    border: 1.5px solid rgba(0, 229, 180, 0.2);
    border-radius: 16px;
    padding: 24px;
    width: 288px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0px 8px 32px 0px rgba(0, 229, 180, 0.1);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(0, 229, 180, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.testimonial-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3333333333333333em;
    color: var(--white);
}

.testimonial-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3333333333333333em;
    color: rgba(20, 28, 46, 0.62);
}

.testimonial-quote {
    display: flex;
    gap: 12px;
    padding: 0 0 8px;
    opacity: 0.8;
}

.quote-line {
    width: 0;
    height: 100%;
    border: 1.5px solid rgba(73, 85, 110, 0.2);
    border-radius: 1px;
}

.testimonial-quote p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--white);
    margin: 0;
}

/* How It Works Section */
.how-it-works-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f0f0f 0%, var(--black) 50%, #1a1a1a 100%);
    position: relative;
}

.how-it-works-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 40% 60%, rgba(0, 229, 180, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.how-it-works-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.how-it-works-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white);
    margin: 0;
    text-align: center;
    max-width: 800px;
}

/* Final CTA Section */
.final-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a1a1a 0%, var(--black) 50%, #0d0d0d 100%);
    position: relative;
    display: flex;
    align-items: center;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 60% 40%, rgba(0, 229, 180, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.final-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
}

.final-cta-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.final-cta-text .section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.0625em;
    letter-spacing: -2%;
    text-align: center;
    color: var(--white);
}

.final-cta-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    color: var(--white);
    margin: 0;
    max-width: 800px;
}

/* Footer */
.footer {
    background: var(--black);
    padding: 80px 0 50px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-top: 1px solid rgba(0, 229, 180, 0.15);
}

.footer-divider {
    display: none;
}

.footer-content {
    display: flex;
    gap: 80px;
    width: 100%;
    align-items: flex-start;
    padding: 0 20px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.footer-logo .logo {
    width: 36px;
    height: 36px;
}

.footer-logo .brand-text {
    font-family: 'Sen', serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -4%;
    color: var(--primary-torquoise);
}

.footer-logo .brand-subtext {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    color: var(--neutral-medium);
    margin-top: -2px;
}

.social-links {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.social-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 180, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 229, 180, 0.2);
    cursor: default;
}

.social-link:hover {
    background: rgba(0, 229, 180, 0.2);
    transform: translateY(-2px);
    border-color: var(--primary-torquoise);
}

.social-link img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.footer-links {
    display: flex;
    gap: 56px;
    flex: 2;
    justify-content: flex-end;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 140px;
}

.footer-column h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--white);
    margin: 0 0 4px 0;
    letter-spacing: 0.5px;
}

.footer-column a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--neutral-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 2px 0;
}

.footer-column a:hover {
    color: var(--primary-torquoise);
    transform: translateX(4px);
}

.footer-link-disabled {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--neutral-medium);
    padding: 2px 0;
    cursor: default;
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .container {
        padding: 0 24px;
    }
    
    .navbar {
        margin: 16px 24px 0;
    }
    
    .hero .container {
        padding: 48px 24px 0;
    }
    
    .hero-title {
        font-size: 80px;
    }
    
    .dashboard-video-container,
    .dashboard-mockup {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 900px;
        height: 550px;
        margin: 0 auto;
    }
    
    .mockup-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    
    .mockup-placeholder:nth-child(1),
    .mockup-placeholder:nth-child(2),
    .mockup-placeholder:nth-child(3) {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    .navbar {
        margin: 12px 16px 0;
    }
    
    .navbar .container {
        padding: 12px 16px;
        gap: 24px;
    }
    
    .nav-links {
        display: none;
    }
    
    .hero .container {
        padding: 32px 16px 0;
        gap: 64px;
    }
    
    .hero-content {
        gap: 48px;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .section-title {
        font-size: 32px;
        margin-bottom: 16px;
    }
    
    .offer-text,
    .features-description,
    .scarcity-text,
    .guarantee-description,
    .how-it-works-text,
    .final-cta-description {
        font-size: 20px;
        line-height: 1.4em;
    }
    
    .features-text .section-title,
    .guarantee-text .section-title,
    .final-cta-text .section-title {
        font-size: 40px;
    }
    
    .dashboard-video-container,
    .dashboard-mockup {
        height: 450px;
    }
    
    .mockup-container {
        padding: 20px;
    }
    
    /* Simplified responsive design */
    
    .testimonials-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .testimonial-card {
        width: 100%;
        max-width: 400px;
    }
    
    .footer {
        padding: 60px 0 40px;
        margin-top: 40px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 50px;
        align-items: center;
        text-align: center;
        padding: 0 10px;
    }
    
    .footer-brand {
        min-width: auto;
        align-items: center;
    }
    
    .footer-links {
        flex-direction: row;
        gap: 32px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-column {
        min-width: 120px;
        text-align: center;
    }
    
    .guarantee-content,
    .final-cta-content {
        width: 100%;
        padding: 48px 16px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 36px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .features-text .section-title,
    .guarantee-text .section-title,
    .final-cta-text .section-title {
        font-size: 32px;
    }
    
    p, .offer-text, .features-description, .scarcity-text, .guarantee-description, .how-it-works-text, .final-cta-description {
        font-size: 18px;
    }
    
    .testimonial-quote p {
        font-size: 16px;
    }
    
    .btn {
        font-size: 16px;
        padding: 10px 20px;
    }
    
    .btn-large {
        font-size: 18px;
        padding: 12px 24px;
    }
}

/* Enhanced Animations and Motion Graphics */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 229, 180, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 229, 180, 0.6);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes glassShimmer {
    0% {
        background: rgba(255, 255, 255, 0.05);
    }
    50% {
        background: rgba(255, 255, 255, 0.1);
    }
    100% {
        background: rgba(255, 255, 255, 0.05);
    }
}

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

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

@keyframes morphing {
    0%, 100% {
        border-radius: 20px;
        transform: scale(1) rotate(0deg);
    }
    25% {
        border-radius: 50px;
        transform: scale(1.1) rotate(90deg);
    }
    50% {
        border-radius: 10px;
        transform: scale(0.9) rotate(180deg);
    }
    75% {
        border-radius: 30px;
        transform: scale(1.05) rotate(270deg);
    }
}

@keyframes wave {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(10px) translateY(-5px);
    }
    50% {
        transform: translateX(0) translateY(-10px);
    }
    75% {
        transform: translateX(-10px) translateY(-5px);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes matrix {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes energy {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(0, 229, 180, 0.3),
            0 0 40px rgba(0, 229, 180, 0.1),
            inset 0 0 20px rgba(0, 229, 180, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(0, 229, 180, 0.6),
            0 0 80px rgba(0, 229, 180, 0.3),
            inset 0 0 40px rgba(0, 229, 180, 0.2);
    }
}

@keyframes liquid {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: rotate(90deg);
    }
    50% {
        border-radius: 50% 20% 60% 80% / 40% 70% 50% 20%;
        transform: rotate(180deg);
    }
    75% {
        border-radius: 40% 80% 20% 50% / 70% 40% 80% 60%;
        transform: rotate(270deg);
    }
}

@keyframes neonPulse {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(0, 229, 180, 0.5),
            0 0 10px rgba(0, 229, 180, 0.3),
            0 0 15px rgba(0, 229, 180, 0.2),
            0 0 20px rgba(0, 229, 180, 0.1);
    }
    50% {
        text-shadow: 
            0 0 10px rgba(0, 229, 180, 0.8),
            0 0 20px rgba(0, 229, 180, 0.6),
            0 0 30px rgba(0, 229, 180, 0.4),
            0 0 40px rgba(0, 229, 180, 0.2);
    }
}

@keyframes hologram {
    0%, 100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: hue-rotate(0deg);
    }
    25% {
        opacity: 0.8;
        transform: translateY(-2px) scale(1.02);
        filter: hue-rotate(90deg);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-4px) scale(1.05);
        filter: hue-rotate(180deg);
    }
    75% {
        opacity: 0.8;
        transform: translateY(-2px) scale(1.02);
        filter: hue-rotate(270deg);
    }
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.slide-in-left {
    animation: slideInFromLeft 0.8s ease-out;
}

.slide-in-right {
    animation: slideInFromRight 0.8s ease-out;
}

.scale-in {
    animation: scaleIn 0.6s ease-out;
}

.float {
    animation: float 3s ease-in-out infinite;
}

.glow {
    animation: glow 2s ease-in-out infinite;
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.glass-shimmer {
    animation: glassShimmer 3s ease-in-out infinite;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.morphing {
    animation: morphing 8s ease-in-out infinite;
}

.wave {
    animation: wave 4s ease-in-out infinite;
}

.energy {
    animation: energy 3s ease-in-out infinite;
}

.liquid {
    animation: liquid 10s ease-in-out infinite;
}

.neon-pulse {
    animation: neonPulse 2s ease-in-out infinite;
}

.hologram {
    animation: hologram 6s ease-in-out infinite;
}

/* Default Cursor Styles */
* {
    cursor: default;
}

body {
    cursor: default;
}

/* Interactive element cursors */
a, button, .btn, .nav-link, input, textarea, select, [role="button"] {
    cursor: pointer;
}

input[type="text"], input[type="email"], input[type="tel"], textarea {
    cursor: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Image protection */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow form inputs to be selectable */
input, textarea, select {
    pointer-events: auto;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Custom Cursor Animation (alongside default cursor) */
.custom-cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background: rgba(0, 229, 180, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: all 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 229, 180, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cursor-trail {
    position: fixed;
    width: 3px;
    height: 3px;
    background: rgba(0, 229, 180, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    opacity: 0.6;
    animation: ripple 0.6s ease-out forwards;
    box-shadow: 0 0 4px rgba(0, 229, 180, 0.3);
}

.cursor-hover {
    transform: scale(1.5);
    background: rgba(0, 229, 180, 0.9);
    box-shadow: 0 0 12px rgba(0, 229, 180, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.cursor-click {
    transform: scale(0.8);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Enhanced Motion Graphics and Particle Effects */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 0%, rgba(0, 229, 180, 0.02) 50%, transparent 100%),
        radial-gradient(circle at 20% 80%, rgba(0, 229, 180, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 229, 180, 0.02) 0%, transparent 50%);
    pointer-events: none;
    animation: shimmer 8s ease-in-out infinite, wave 12s ease-in-out infinite;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0, 229, 180, 0.01) 25%, transparent 50%, rgba(0, 229, 180, 0.01) 75%, transparent 100%);
    pointer-events: none;
    animation: liquid 15s ease-in-out infinite;
    z-index: 1;
}

/* Floating particles effect */
@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-torquoise);
    border-radius: 50%;
    animation: floatParticle 15s linear infinite;
    pointer-events: none;
}

.particle:nth-child(1) { left: 5%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 15%; animation-delay: 1s; animation-duration: 15s; }
.particle:nth-child(3) { left: 25%; animation-delay: 2s; animation-duration: 18s; }
.particle:nth-child(4) { left: 35%; animation-delay: 3s; animation-duration: 14s; }
.particle:nth-child(5) { left: 45%; animation-delay: 4s; animation-duration: 16s; }
.particle:nth-child(6) { left: 55%; animation-delay: 5s; animation-duration: 13s; }
.particle:nth-child(7) { left: 65%; animation-delay: 6s; animation-duration: 17s; }
.particle:nth-child(8) { left: 75%; animation-delay: 7s; animation-duration: 15s; }
.particle:nth-child(9) { left: 85%; animation-delay: 8s; animation-duration: 14s; }
.particle:nth-child(10) { left: 95%; animation-delay: 9s; animation-duration: 16s; }
.particle:nth-child(11) { left: 10%; animation-delay: 10s; animation-duration: 13s; }
.particle:nth-child(12) { left: 30%; animation-delay: 11s; animation-duration: 17s; }
.particle:nth-child(13) { left: 50%; animation-delay: 12s; animation-duration: 15s; }
.particle:nth-child(14) { left: 70%; animation-delay: 13s; animation-duration: 14s; }
.particle:nth-child(15) { left: 90%; animation-delay: 14s; animation-duration: 16s; }

/* Different particle types */
.particle.small {
    width: 2px;
    height: 2px;
    animation-duration: 20s;
}

.particle.medium {
    width: 4px;
    height: 4px;
    animation-duration: 15s;
}

.particle.large {
    width: 6px;
    height: 6px;
    animation-duration: 12s;
}

.particle.energy {
    background: radial-gradient(circle, var(--primary-torquoise) 0%, transparent 70%);
    animation: matrix 15s linear infinite, energy 3s ease-in-out infinite;
}

.particle.morphing {
    border-radius: 50%;
    animation: matrix 15s linear infinite, morphing 8s ease-in-out infinite;
}

/* Enhanced glass morphism for sections */
.features-section, .testimonials-section, .guarantee-section {
    position: relative;
    overflow: hidden;
}

.features-section::before, .testimonials-section::before, .guarantee-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 229, 180, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 229, 180, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 229, 180, 0.04) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite, wave 8s ease-in-out infinite;
}

.features-section::after, .testimonials-section::after, .guarantee-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 0%, rgba(0, 229, 180, 0.02) 25%, transparent 50%, rgba(0, 229, 180, 0.02) 75%, transparent 100%);
    pointer-events: none;
    animation: shimmer 12s ease-in-out infinite, liquid 20s ease-in-out infinite;
    z-index: 1;
}

/* Professional dashboard mockup with subtle animations */
.dashboard-mockup {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 500px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 229, 180, 0.2);
    border-radius: 16px;
    box-shadow: 
        0px 8px 32px 0px rgba(0, 0, 0, 0.4), 
        0px 0px 0px 1px rgba(0, 229, 180, 0.1);
    animation: scaleIn 1.2s ease-out 0.9s both;
    transition: all 0.3s ease;
}

.dashboard-mockup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(0, 229, 180, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(0, 229, 180, 0.03) 0%, transparent 50%);
    border-radius: 16px;
    pointer-events: none;
    z-index: 1;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-torquoise);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Video Loading States */
.dashboard-video-container.loading {
    opacity: 0.8;
}

.dashboard-video-container.loading::after {
    content: "Loading Dashboard Demo...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-torquoise);
    font-size: 16px;
    font-weight: 600;
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 180, 0.3);
    backdrop-filter: blur(10px);
}

.dashboard-video-container.loaded {
    opacity: 1;
}

.dashboard-video-container.error {
    opacity: 0.9;
}

.dashboard-video-container.error::after {
    content: "Video unavailable - showing preview";
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--neutral-medium);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 229, 180, 0.2);
    backdrop-filter: blur(10px);
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success States */
.success {
    background: #4CAF50;
    color: white;
}

.success:hover {
    background: #45a049;
}

/* Error States */
.error {
    border-color: #f44336;
}

.error-message {
    color: #f44336;
    font-size: 14px;
    margin-top: 0.5rem;
}

/* Modal */
.modal { display:none; position:fixed; inset:0; z-index:2000; }
.modal[aria-hidden="false"] { display:block; }
.modal-overlay { position:absolute; inset:0; background: rgba(2,6,13,0.55); backdrop-filter: blur(4px); }
.modal-content { position:relative; margin: 2vh auto; max-width: 600px; max-height: 95vh; background: var(--black); border-radius: 20px; box-shadow: 0 32px 80px rgba(0,229,180,0.25); border: 1px solid rgba(0,229,180,0.3); overflow: hidden; display: flex; flex-direction: column; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 24px 32px; border-bottom: 1px solid rgba(0,229,180,0.15); background: var(--black); }
.modal-header h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight:700; color: var(--white); margin:0; }
.modal-close { background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--white); transition: color 0.3s ease; }
.modal-close:hover { color: var(--primary-torquoise); }
.modal-body { padding: 32px; overflow-y: auto; flex: 1; background: var(--black); }
.modal-footer { padding: 24px 32px; background: var(--black); color: var(--neutral-medium); border-top: 1px solid rgba(0,229,180,0.12); text-align: center; }

#waitlistForm button[type="submit"] {
    width: 100%;
    padding: 16px 24px;
    background: var(--primary-torquoise);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

#waitlistForm button[type="submit"]:hover {
    background: var(--secondary-torquoise);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 229, 180, 0.3);
}

#waitlistForm button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Form Validation Styles */
.error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.error-message::before {
    content: "⚠";
    font-size: 0.75rem;
}

.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Honeypot field - completely hidden */
input[name="website"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Form Notifications */
.form-notification {
    margin: 16px 0;
    border-radius: 12px;
    padding: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 9999;
    display: none;
    min-height: 50px;
    width: 100%;
    background: white;
    border: 2px solid #e5e7eb;
}

/* Ensure notification is visible in modal */
.modal .form-notification {
    position: relative;
    z-index: 10000;
    margin: 20px 0;
}

.form-notification.show {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

.form-notification.success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #22c55e;
    color: #15803d;
}

.form-notification.error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #ef4444;
    color: #dc2626;
}

.notification-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}

.form-notification.success .notification-icon {
    background: #22c55e;
    color: white;
}

.form-notification.success .notification-icon::before {
    content: "✓";
}

.form-notification.error .notification-icon {
    background: #ef4444;
    color: white;
}

.form-notification.error .notification-icon::before {
    content: "⚠";
}

.notification-text {
    flex: 1;
    font-weight: 500;
}

.notification-text strong {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

/* Simple animation for notification appearance */
.form-notification.animate-in {
    animation: fadeIn 0.4s ease forwards;
}

.form-notification.animate-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Form */
/* Form Styling */
#waitlistForm .form-row { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-bottom: 20px; 
}

#waitlistForm label { 
    font-size: 14px; 
    color: var(--white); 
    font-weight: 600; 
    margin-bottom: 4px;
}

#waitlistForm input, #waitlistForm select, #waitlistForm textarea { 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 12px; 
    padding: 14px 16px; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    font-size: 15px; 
    color: var(--white); 
    background: rgba(255, 255, 255, 0.05); 
    outline: none; 
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

#waitlistForm input:focus, #waitlistForm select:focus, #waitlistForm textarea:focus { 
    border-color: var(--primary-torquoise); 
    box-shadow: 0 0 0 3px rgba(0, 229, 180, 0.15); 
    background: rgba(255, 255, 255, 0.08);
}

#waitlistForm input::placeholder, #waitlistForm textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#waitlistForm select {
    cursor: pointer;
}

#waitlistForm select option {
    background: var(--black);
    color: var(--white);
}

#waitlistForm .form-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

#waitlistForm textarea {
    resize: vertical;
    min-height: 80px;
}

@media (max-width: 640px) { 
    #waitlistForm .form-grid { 
        grid-template-columns: 1fr; 
        gap: 16px;
    } 
    
    #waitlistForm .form-row {
        margin-bottom: 16px;
    }
}