/* Base Styles */
:root {
    --primary-color: #6c5ce7;
    --secondary-color: #00cec9;
    --accent-color: #fd79a8;
    --dark-bg: #0f1121;
    --dark-card-bg: #1a1c34;
    --dark-text: #f8f9fa;
    --light-bg: #f8f9fa;
    --light-card-bg: #ffffff;
    --light-text: #2d3436;
    --gradient-1: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    --gradient-2: linear-gradient(135deg, #fd79a8 0%, #6c5ce7 100%);
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    transition: var(--transition);
}

/* Theme Styles */
body.dark-theme {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

body.light-theme {
    background-color: var(--light-bg);
    color: var(--light-text);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.8rem;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.section-header p {
    font-size: 1.2rem;
    opacity: 0.8;
}

.gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* Links and Buttons */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

.btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    margin: 10px 5px;
}

.btn-primary {
    background: var(--gradient-1);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-glow {
    background: var(--gradient-2);
    color: white;
    box-shadow: 0 0 20px rgba(253, 121, 168, 0.7);
    animation: pulse 2s infinite;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Header */
header {
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    background: rgba(15, 17, 33, 0.9);
    backdrop-filter: blur(10px);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-text);
}

.logo .highlight {
    color: var(--primary-color);
}

.main-nav {
    display: flex;
    list-style: none;
    align-items: center;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: var(--dark-text);
    font-weight: 500;
    position: relative;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-color);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.theme-toggle button {
    background: transparent;
    border: none;
    color: var(--dark-text);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.theme-toggle button:hover {
    color: var(--primary-color);
}

.mobile-nav-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--dark-text);
    cursor: pointer;
}

/* Hero Section */
.hero {
    padding: 160px 0 80px;
    position: relative;
    background: var(--dark-bg);
    overflow: hidden;
}

.dark-theme .hero {
    background: linear-gradient(180deg, var(--dark-bg) 0%, rgba(15, 17, 33, 0.9) 100%);
}

.light-theme .hero {
    background: linear-gradient(180deg, var(--light-bg) 0%, rgba(248, 249, 250, 0.9) 100%);
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hero-content {
    flex: 1;
}

.hero h1 {
    margin-bottom: 20px;
}

.subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.8;
}

.cta-buttons {
    margin-bottom: 40px;
}

.hero-stats {
    display: flex;
    gap: 30px;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.hero-image {
    flex: 1;
    position: relative;
}

.dashboard-preview {
    width: 100%;
    height: 400px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><rect width="800" height="600" fill="%231a1c34" rx="10" ry="10"/><rect width="750" height="40" x="25" y="20" fill="%23262842" rx="5" ry="5"/><circle cx="50" cy="40" r="8" fill="%23fd79a8"/><circle cx="75" cy="40" r="8" fill="%23fdcb6e"/><circle cx="100" cy="40" r="8" fill="%2300cec9"/><rect width="350" height="200" x="25" y="80" fill="%23262842" rx="5" ry="5"/><rect width="350" height="200" x="25" y="300" fill="%23262842" rx="5" ry="5"/><rect width="350" height="420" x="400" y="80" fill="%23262842" rx="5" ry="5"/><polyline points="50,240 100,180 150,200 200,150 250,170 300,120 350,160" stroke="%236c5ce7" stroke-width="3" fill="none"/><polyline points="50,460 100,440 150,460 200,420 250,440 300,400 350,420" stroke="%2300cec9" stroke-width="3" fill="none"/></svg>') center/contain;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    animation: float 3s infinite alternate ease-in-out;
}

.card1 {
    top: 20%;
    right: 10%;
}

.card2 {
    bottom: 20%;
    left: 10%;
}

.card-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-content i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

/* Partners Banner */
.partners-banner {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px 0;
    margin-top: 50px;
    text-align: center;
}

.partners-banner p {
    opacity: 0.6;
    margin-bottom: 20px;
}

.partners-logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.partner-logo {
    height: 40px;
    width: 120px;
    opacity: 0.7;
    transition: var(--transition);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.partner-logo:hover {
    opacity: 1;
}
/* Benefits Section */
.benefits {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .benefits {
    background: var(--light-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: var(--dark-card-bg);
    border-radius: var(--border-radius);
    padding: 30px;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.light-theme .benefit-card {
    background: var(--light-card-bg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.benefit-card:hover {
    transform: translateY(-10px);
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon i {
    font-size: 1.5rem;
    color: white;
}

.benefit-card h3 {
    margin-bottom: 15px;
}

.benefit-card p {
    opacity: 0.8;
}

/* How It Works Section */
.how-it-works {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--dark-bg), var(--dark-card-bg));
}

.light-theme .how-it-works {
    background: linear-gradient(180deg, var(--light-bg), rgba(248, 249, 250, 0.7));
}

.steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.step {
    flex: 1;
    min-width: 250px;
    padding: 0 20px;
    text-align: center;
    position: relative;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    right: -30px;
    width: 60px;
    height: 2px;
    background: var(--gradient-1);
}

.step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 auto 20px;
}

.step-content h3 {
    margin-bottom: 10px;
}

.workflow-diagram {
    text-align: center;
    margin-top: 50px;
}

/* Features Section */
.features {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .features {
    background: var(--light-bg);
}

.features-container {
    display: flex;
    flex-direction: column;
}

.feature-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 25px;
    border: none;
    background: transparent;
    color: var(--dark-text);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
    margin: 0 10px;
}

.light-theme .tab-btn {
    color: var(--light-text);
}

.tab-btn.active {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.tab-btn:hover {
    color: var(--primary-color);
}

.feature-content {
    position: relative;
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s forwards;
}

.tab-content.active {
    display: flex;
    flex-wrap: wrap;
}

.feature-image {
    flex: 1;
    min-width: 300px;
    height: 350px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.feature-details {
    flex: 1;
    min-width: 300px;
    padding: 0 30px;
}

.feature-details h3 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.feature-details p {
    margin-bottom: 20px;
}

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

.feature-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.feature-list i {
    color: var(--secondary-color);
    margin-right: 10px;
}
/* Performance Section */
.performance {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--dark-card-bg), var(--dark-bg));
}

.light-theme .performance {
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.7), var(--light-bg));
}

.performance-data {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.performance-chart {
    flex: 2;
    min-width: 300px;
    background: var(--dark-card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .performance-chart {
    background: var(--light-card-bg);
}

.performance-stats {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-card {
    background: var(--dark-card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .stat-card {
    background: var(--light-card-bg);
}

.stat-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.stat-card p {
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Pricing Section */
.pricing {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .pricing {
    background: var(--light-bg);
}

.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    margin: 0 15px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-card-bg);
    transition: var(--transition);
    border-radius: 34px;
}

.light-theme .slider {
    background-color: #ddd;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: var(--primary-color);
    transition: var(--transition);
    border-radius: 50%;
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.save-badge {
    background-color: var(--accent-color);
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-left: 5px;
}

.pricing-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.pricing-card {
    background: var(--dark-card-bg);
    border-radius: var(--border-radius);
    padding: 40px 30px;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    transition: var(--transition);
    position: relative;
    box-shadow: var(--box-shadow);
}

.light-theme .pricing-card {
    background: var(--light-card-bg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pricing-card.highlight {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(108, 92, 231, 0.3);
    border: 2px solid var(--primary-color);
}

.pricing-card:hover {
    transform: translateY(-10px);
}

.pricing-card.highlight:hover {
    transform: scale(1.05) translateY(-10px);
}

.popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pricing-card h3 {
    margin-bottom: 30px;
}

.price {
    margin-bottom: 30px;
}

.price .currency {
    font-size: 1.5rem;
    vertical-align: top;
}

.price .amount {
    font-size: 3rem;
    font-weight: 700;
}

.price .period {
    font-size: 1rem;
    opacity: 0.7;
}

.features-list {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
}

.features-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.light-theme .features-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.features-list i {
    margin-right: 10px;
}

.features-list li.not-included {
    opacity: 0.5;
}

/* Security Section */
.security {
    padding: 100px 0;
    background: var(--dark-card-bg);
}

.light-theme .security {
    background: rgba(248, 249, 250, 0.7);
}

.security-features {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.security-feature {
    flex: 1;
    min-width: 300px;
    text-align: center;
    padding: 20px;
}

.security-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--dark-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 2px solid var(--primary-color);
}

.light-theme .security-icon {
    background: var(--light-bg);
}

.security-icon i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.security-certifications {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.light-theme .security-certifications {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.security-certifications h3 {
    margin-bottom: 30px;
}

.certification-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.certification-logo {
    height: 60px;
    width: 120px;
    opacity: 0.8;
    transition: var(--transition);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.certification-logo:hover {
    opacity: 1;
}

/* Testimonials Section */
.testimonials {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .testimonials {
    background: var(--light-bg);
}

.testimonials-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.testimonial-navigation {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: space-between;
}

.prev-btn, .next-btn {
    background: var(--dark-card-bg);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.light-theme .prev-btn, .light-theme .next-btn {
    background: var(--light-card-bg);
}

.prev-btn:hover, .next-btn:hover {
    background: var(--primary-color);
    color: white;
}

.testimonials-container {
    display: flex;
    overflow: hidden;
}

.testimonial-card {
    flex-shrink: 0;
    width: 100%;
    padding: 30px;
    background: var(--dark-card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin: 0 15px;
}

.light-theme .testimonial-card {
    background: var(--light-card-bg);
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.testimonial-info h4 {
    margin-bottom: 5px;
}

.testimonial-info .role {
    opacity: 0.7;
    font-size: 0.9rem;
}

.testimonial-rating {
    display: flex;
    margin-bottom: 15px;
}

.testimonial-rating i {
    color: #fdcb6e;
    margin-right: 2px;
}

.testimonial-content p {
    font-style: italic;
    line-height: 1.8;
}
/* FAQ Section */
.faq {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .faq {
    background: var(--light-bg);
}

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

.faq-item {
    margin-bottom: 20px;
    background: var(--dark-card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.light-theme .faq-item {
    background: var(--light-card-bg);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}

.light-theme .faq-question:hover {
    background: rgba(0, 0, 0, 0.05);
}

.faq-question h3 {
    margin: 0;
    font-size: 1.2rem;
}

.faq-question i {
    transition: var(--transition);
}

.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-bottom: 20px;
}

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

/* CTA Section */
.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-card-bg) 100%);
    text-align: center;
}

.light-theme .cta-section {
    background: linear-gradient(135deg, var(--light-bg) 0%, rgba(248, 249, 250, 0.7) 100%);
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    margin-bottom: 20px;
}

.cta-content p {
    margin-bottom: 30px;
    font-size: 1.2rem;
}

.cta-disclaimer {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 20px;
}

/* Footer */
footer {
    padding: 80px 0 30px;
    background: var(--dark-card-bg);
}

.light-theme footer {
    background: rgba(248, 249, 250, 0.9);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-column p {
    opacity: 0.8;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dark-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.light-theme .social-icons a {
    background: var(--light-bg);
}

.social-icons a:hover {
    background: var(--primary-color);
    color: white;
}

.footer-column h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    opacity: 0.8;
    transition: var(--transition);
}

.footer-column ul li a:hover {
    opacity: 1;
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.light-theme .footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-bottom p {
    opacity: 0.7;
}

.payment-methods {
    display: flex;
    gap: 15px;
    align-items: center;
}

.payment-icon {
    width: 40px;
    height: 25px;
    opacity: 0.7;
    transition: var(--transition);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.payment-icon:hover {
    opacity: 1;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dark-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--box-shadow);
}

.light-theme .modal-content {
    background: var(--light-card-bg);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--primary-color);
}

.modal-content h2 {
    margin-bottom: 30px;
    text-align: center;
}

.wallet-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wallet-option {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.light-theme .wallet-option {
    background: rgba(0, 0, 0, 0.05);
}

.wallet-option:hover {
    background: rgba(108, 92, 231, 0.2);
}

.wallet-logo {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 121, 168, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(253, 121, 168, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(253, 121, 168, 0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* Responsive Styles */
@media screen and (max-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero .container {
        flex-direction: column;
    }
    
    .step:not(:last-child)::after {
        display: none;
    }
    
    .step {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    header {
        padding: 15px 0;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-nav-toggle {
        display: block;
    }
    
    .hero {
        padding: 120px 0 60px;
    }
    
    .hero-stats {
        justify-content: space-between;
        width: 100%;
    }
    
    .benefit-card, .pricing-card {
        min-width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .feature-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .tab-btn {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .wallet-options {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }
}
/* Page Header */
.page-header {
    padding: 160px 0 60px;
    background: linear-gradient(180deg, var(--dark-bg) 0%, rgba(15, 17, 33, 0.9) 100%);
    text-align: center;
}

.light-theme .page-header {
    background: linear-gradient(180deg, var(--light-bg) 0%, rgba(248, 249, 250, 0.9) 100%);
}

/* About Page Styles */
.about-story {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .about-story {
    background: var(--light-bg);
}

.about-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.about-content {
    flex: 1;
    min-width: 300px;
}

.about-image {
    flex: 1;
    min-width: 300px;
    height: 400px;
}

.mission-image {
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect width="400" height="400" fill="%231a1c34" rx="10" ry="10"/><circle cx="200" cy="200" r="150" fill="none" stroke="%236c5ce7" stroke-width="10" stroke-dasharray="30 15" stroke-dashoffset="25"/><circle cx="200" cy="200" r="100" fill="none" stroke="%2300cec9" stroke-width="10" stroke-dasharray="30 15"/><rect width="80" height="80" x="160" y="160" fill="%231a1c34" stroke="%23fd79a8" stroke-width="5" rx="5" ry="5"/></svg>') center/cover;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.about-values {
    padding: 100px 0;
    background: var(--dark-card-bg);
}

.light-theme .about-values {
    background: rgba(248, 249, 250, 0.7);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.value-card {
    background: var(--dark-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}

.light-theme .value-card {
    background: var(--light-card-bg);
}

.value-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.value-icon i {
    font-size: 2rem;
    color: white;
}

.about-team {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .about-team {
    background: var(--light-bg);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.team-member {
    background: var(--dark-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
}

.light-theme .team-member {
    background: var(--light-card-bg);
}

.member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--gradient-1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.member-initial {
    font-size: 3rem;
    font-weight: 700;
    color: white;
}

.member-role {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.member-bio {
    font-size: 0.9rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.member-social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.member-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dark-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.light-theme .member-social a {
    background: rgba(0, 0, 0, 0.05);
}

.about-investors {
    padding: 100px 0;
    background: var(--dark-card-bg);
}

.light-theme .about-investors {
    background: rgba(248, 249, 250, 0.7);
}

.investors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.investor-logo {
    height: 80px;
    background: var(--dark-bg);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: var(--transition);
}

.light-theme .investor-logo {
    background: var(--light-card-bg);
}

.investor-logo:hover {
    opacity: 1;
    transform: translateY(-5px);
}

/* Contact Page Styles */
.contact-section {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .contact-section {
    background: var(--light-bg);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.contact-form-container {
    background: var(--dark-card-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .contact-form-container {
    background: var(--light-card-bg);
}

.contact-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--dark-text);
}

.light-theme .form-group input,
.light-theme .form-group select,
.light-theme .form-group textarea {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.05);
    color: var(--light-text);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
}

.form-success i {
    font-size: 3rem;
    color: #00b894;
    margin-bottom: 20px;
}

.contact-info-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-info-card {
    background: var(--dark-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .contact-info-card {
    background: var(--light-card-bg);
}

.contact-info-card h3 {
    margin-bottom: 20px;
}

.contact-info-item {
    display: flex;
    margin-bottom: 20px;
}

.contact-info-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 20px;
    margin-top: 5px;
}

.contact-info-item h4 {
    margin-bottom: 5px;
}

.social-channels h4 {
    margin-bottom: 15px;
}

.faq-quick-links {
    background: var(--dark-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .faq-quick-links {
    background: var(--light-card-bg);
}

.faq-quick-links h3 {
    margin-bottom: 20px;
}

.faq-quick-links ul {
    list-style: none;
}

.faq-quick-links ul li {
    margin-bottom: 15px;
}

.faq-quick-links ul li a {
    display: flex;
    align-items: center;
}

.faq-quick-links ul li i {
    margin-right: 10px;
    color: var(--primary-color);
}

.location-section {
    padding: 100px 0;
    background: var(--dark-card-bg);
}

.light-theme .location-section {
    background: rgba(248, 249, 250, 0.7);
}

.office-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 50px;
}

.office-map {
    flex: 2;
    min-width: 300px;
}

.map-placeholder {
    width: 100%;
    height: 400px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><rect width="800" height="400" fill="%231a1c34" rx="10" ry="10"/><circle cx="300" cy="150" r="10" fill="%236c5ce7"/><circle cx="450" cy="200" r="10" fill="%2300cec9"/><circle cx="600" cy="100" r="10" fill="%23fd79a8"/><path d="M100,50 L700,50 L700,350 L100,350 Z" fill="none" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M200,50 L200,350" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M300,50 L300,350" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M400,50 L400,350" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M500,50 L500,350" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M600,50 L600,350" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M100,150 L700,150" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/><path d="M100,250 L700,250" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.3"/></svg>') center/cover;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.offices-list {
    flex: 1;
    min-width: 300px;
}

.office-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--dark-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .office-item {
    background: var(--light-card-bg);
}

.office-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.office-icon i {
    color: white;
    font-size: 1.5rem;
}

.office-details h3 {
    margin-bottom: 10px;
}

/* Legal Pages Styles */
.legal-content {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .legal-content {
    background: var(--light-bg);
}

.legal-document {
    background: var(--dark-card-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .legal-document {
    background: var(--light-card-bg);
}

.last-updated {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.light-theme .last-updated {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.legal-section {
    margin-bottom: 40px;
}

.legal-section h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.legal-section p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.legal-section ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.legal-section ul li {
    margin-bottom: 10px;
    line-height: 1.6;
}
/* Partners Section and Slider */
.partners-section {
    padding: 60px 0;
    background: var(--dark-card-bg);
    overflow: hidden;
}

.light-theme .partners-section {
    background: rgba(248, 249, 250, 0.7);
}

.partners-slider {
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
}

.partners-track {
    display: flex;
    animation: scroll 30s linear infinite;
}

.partner-logo {
    min-width: 180px;
    height: 80px;
    margin: 0 30px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
}

.light-theme .partner-logo {
    background-color: rgba(0, 0, 0, 0.03);
}

.partner-logo:hover {
    transform: translateY(-5px);
}

.partner-logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
    opacity: 0.8;
    transition: var(--transition);
}

.partner-logo:hover::before {
    opacity: 1;
}

.partner-logo.binance::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M27.5,64l17.75-17.75L63,64l17.75-17.75L98.5,64,63,99.5,27.5,64z M14.75,64,63,112.25,111.25,64,63,15.75,14.75,64z M64,34.5l8.75,8.75-8.75,8.75-8.75-8.75L64,34.5z M64,76l8.75,8.75-8.75,8.75-8.75-8.75L64,76z" fill="%23F0B90B"/></svg>');
}

.partner-logo.coinbase::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z M64,36c-15.464,0-28,12.536-28,28s12.536,28,28,28s28-12.536,28-28S79.464,36,64,36z" fill="%231652F0"/></svg>');
}

.partner-logo.kucoin::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z M77,51l-13,13l-13-13l-13,13l13,13l-13,13l13,13l13-13l13,13l13-13l-13-13l13-13L77,51z" fill="%2326A17B"/></svg>');
}

.partner-logo.bybit::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M24,32h80v64H24V32z M64,40L40,64l24,24l24-24L64,40z" fill="%23FCD535"/></svg>');
}

.partner-logo.blockchain::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z M53,40v16h22V40H53z M53,72v16h22V72H53z M40,56v16h22V56H40z M66,56v16h22V56H66z" fill="%233D89F5"/></svg>');
}

.partner-logo.kraken::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z M64,40c-6.627,0-12,5.373-12,12c0,2.249,0.62,4.353,1.689,6.156C48.815,61.381,46,67.262,46,74c0,1.657,1.343,3,3,3s3-1.343,3-3c0-5.708,2.429-10.847,6.313-14.422C60.037,61.15,61.955,62,64,62c6.627,0,12-5.373,12-12S70.627,40,64,40z" fill="%235741D9"/></svg>');
}

.partner-logo.okx::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z M45,45v15h15V45H45z M68,45v15h15V45H68z M45,68v15h15V68H45z M68,68v15h15V68H68z" fill="%23CCCCCC"/></svg>');
}

.partner-logo.gate::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M25,40h78v10H25V40z M25,58h78v10H25V58z M25,76h78v10H25V76z" fill="%232354E6"/></svg>');
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Help Page Styles */
.help-section {
    padding: 100px 0;
    background: var(--dark-bg);
}

.light-theme .help-section {
    background: var(--light-bg);
}

.help-container {
    display: flex;
    gap: 40px;
}

.help-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    background: var(--dark-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.light-theme .help-sidebar {
    background: var(--light-card-bg);
}

.help-nav {
    list-style: none;
}

.help-nav li {
    margin-bottom: 15px;
}

.help-nav a {
    display: block;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.help-nav a:hover, .help-nav a.active {
    background: rgba(108, 92, 231, 0.2);
    color: var(--primary-color);
}

.help-content {
    flex: 1;
    min-width: 0;
}

.help-section-title {
    margin-bottom: 40px;
}

.guide-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
}

.step-number {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin-top: 10px;
}

.step-content {
    flex: 1;
}

.info-box {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: var(--dark-card-bg);
    border-left: 5px solid var(--primary-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin: 30px 0;
}

.light-theme .info-box {
    background: var(--light-card-bg);
}

.info-box.warning {
    border-left-color: #e17055;
}

.info-box.success {
    border-left-color: #00b894;
}

.info-icon {
    color: var(--primary-color);
    font-size: 1.8rem;
    flex-shrink: 0;
}

.info-box.warning .info-icon {
    color: #e17055;
}

.info-box.success .info-icon {
    color: #00b894;
}

.wallet-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.wallet-option-card {
    background: var(--dark-card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.light-theme .wallet-option-card {
    background: var(--light-card-bg);
}

.wallet-option-card:hover {
    transform: translateY(-5px);
}

.wallet-option-logo {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    margin: 0 auto 15px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.wallet-option-logo.metamask {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M108.2,21.4l-38.9,33.1l7-15.9L108.2,21.4z" fill="%23E2761B"/><path d="M19.8,21.4l38.6,33.4l-6.7-16.2L19.8,21.4z" fill="%23E4761B"/><path d="M93.1,84.3l-11.8,17.3l25,7.3l7.2-24.7L93.1,84.3z" fill="%23E4761B"/><path d="M34.9,84.3l7.2,24.7l25-7.3l-11.8-17.3L34.9,84.3z" fill="%23E4761B"/><path d="M58.1,63.5l-6,8.9l21.3,0.9l-0.7-22.8L58.1,63.5z" fill="%23E4761B"/><path d="M69.9,63.5l-14.3-13l-0.7,22.8l21.3-0.9L69.9,63.5z" fill="%23E4761B"/><path d="M67.1,101.7l12.7-6.2l-11-8.5L67.1,101.7z" fill="%23E4761B"/><path d="M48.2,95.5l12.7,6.2l-1.7-14.7L48.2,95.5z" fill="%23E4761B"/></svg>');
}

.wallet-option-logo.trust {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16l40,24v24c0,22-17,42-40,48c-23-6-40-26-40-48V40L64,16z" fill="%233375BB"/><path d="M82,59.1L67.8,73.3L46,51.5l9-9l12.8,12.8l5.2-5.2L82,59.1z" fill="%23FFFFFF"/></svg>');
}

.wallet-option-logo.rainbow {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.5,0,48,21.5,48,48s-21.5,48-48,48S16,90.5,16,64S37.5,16,64,16z" fill="%23001E59"/><path d="M36,64c0-15.5,12.5-28,28-28c7.7,0,14.7,3.1,19.8,8.2L76,52c-3.1-3.1-7.5-5-12-5c-9.7,0-17.5,7.8-17.5,17.5S54.3,82,64,82c9.7,0,17.5-7.8,17.5-17.5c0-2.6-0.5-5-1.5-7.2l8.8-8.8c3.1,5,4.7,10.9,4.7,17c0,17.9-14.6,32.5-32.5,32.5S28.5,82.4,28.5,64.5C28.5,44.9,43.1,30.3,63,30.3c9.6,0,18.5,3.8,25,10.2l-8.8,8.8C75.1,44.9,69.8,42,64,42c-12.1,0-22,9.9-22,22s9.9,22,22,22c12.1,0,22-9.9,22-22c0-3.3-0.7-6.5-2.1-9.5l8.8-8.8c3.8,5.6,5.8,12.3,5.8,19.2c0,19.3-15.7,35-35,35s-35-15.7-35-35S44.7,30,64,30c10.3,0,19.9,4.5,26.5,12.3L81.2,51C76.4,44.8,70.5,40.8,64,40.8c-12.8,0-23.3,10.4-23.3,23.3c0,12.8,10.4,23.3,23.3,23.3c12.8,0,23.3-10.4,23.3-23.3c0-3.5-0.8-6.7-2.1-9.7l8.8-8.8c2.3,5.7,3.5,11.9,3.5,18.4c0,26.5-21.5,48-48,48S16,90.5,16,64S37.5,16,64,16c14.2,0,27.5,6.2,36.8,17l-8.8,8.8C84.7,32,74.8,26,64,26c-21,0-38,17-38,38s17,38,38,38s38-17,38-38c0-5.7-1.3-11.2-3.5-16l8.8-8.8c3.8,7.4,5.7,15.6,5.7,24.2c0,29.3-23.7,53-53,53S8,93.3,8,64S31.7,11,61,11c15.7,0,30.4,6.9,40.5,19L92.8,39C85.2,28.7,74.9,23,64,23c-22.6,0-41,18.4-41,41s18.4,41,41,41s41-18.4,41-41c0-6.1-1.3-11.9-3.7-17.2l8.8-8.8c3.9,7.9,6.1,16.7,6.1,25.9c0,31.9-25.8,57.8-57.8,57.8S11,96.4,11,64.5S36.8,6.7,68.7,6.7c17.1,0,33.1,7.5,44.1,20.5L104,36C95.4,25.6,80.3,19,64,19c-24.8,0-45,20.2-45,45s20.2,45,45,45s45-20.2,45-45c0-6.7-1.5-13.1-4.1-18.9l8.8-8.8c4.1,8.3,6.3,17.6,6.3,27.1C120,94.9,95.4,120,64.5,120S8,95.4,8,64.5S32.6,9,63.5,9c18.6,0,35.9,8.1,47.8,22.2l-8.8,8.8C91.8,27.5,78.3,20,64,20c-24.3,0-44,19.7-44,44s19.7,44,44,44s44-19.7,44-44c0-6.5-1.4-12.7-4-18.3l8.8-8.8c4,8.1,6.2,17.1,6.2,26.6c0,32.6-26.4,59-59,59S11,96.6,11,64S37.4,5,70,5c19.9,0,38.6,9.5,50.4,25.5L111.7,39C102.5,25.9,84.1,19,64,19c-24.8,0-45,20.2-45,45s20.2,45,45,45s45-20.2,45-45" fill="%230062FF"/></svg>');
}

.token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.token-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.token-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.token-logo.eth {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16l-0.3,1v59.2l0.3,0.3l27.1-16L64,16z" fill="%23343434"/><path d="M64,16L36.9,60.5L64,76.5V16z" fill="%238C8C8C"/><path d="M64,83.5l-0.3,0.4v20.7l0.3,1l27.1-38.3L64,83.5z" fill="%233C3C3B"/><path d="M64,105.7V83.5l-27.1-16.3L64,105.7z" fill="%238C8C8C"/><path d="M64,76.5l27.1-16L64,44.7V76.5z" fill="%23141414"/><path d="M36.9,60.5L64,76.5V44.7L36.9,60.5z" fill="%23393939"/></svg>');
}

.token-logo.bnb {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M27.5,64l17.75-17.75L63,64l17.75-17.75L98.5,64,63,99.5,27.5,64z M14.75,64,63,112.25,111.25,64,63,15.75,14.75,64z M64,34.5l8.75,8.75-8.75,8.75-8.75-8.75L64,34.5z M64,76l8.75,8.75-8.75,8.75-8.75-8.75L64,76z" fill="%23F0B90B"/></svg>');
}

.token-logo.usdt {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z" fill="%2326A17B"/><path d="M72,46h17v11H39V46h17v-6h16V46z M63.5,68c14.5,0,25.5-3,25.5-6.5S78,55,63.5,55S38,58,38,61.5S49,68,63.5,68z M63.5,83c13.5,0,24.5-3,24.5-6.5S77,70,63.5,70S39,73,39,76.5S50,83,63.5,83z" fill="%23FFFFFF"/></svg>');
}

.token-logo.usdc {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z" fill="%232775CA"/><path d="M71,78.5h9.5V65c5.2-1.4,8.9-4.8,8.9-11.1c0-8.5-5.6-12.3-14.5-12.3c-6,0-11.6,2-15.9,5l3.7,7.6c3.5-2.2,7.2-3.7,11.2-3.7c4.3,0,6.3,2,6.3,5c0,3.9-3.7,5.2-7.6,5.2h-4.7v7.6h3.1V78.5z M53,78.2c8.9,0,15.9-3.5,19.9-6.1l-3.9-7.3c-3.3,2.3-8.7,4.9-15.2,4.9c-10.6,0-18-7.4-18-17.6c0-10.1,7.4-17.4,18-17.4c6.5,0,11.9,2.5,15.2,4.9l3.9-7.3c-3.9-2.5-11-6.1-19.9-6.1C40,26.1,28,36.7,28,52.1C28,67.5,40,78.2,53,78.2z" fill="%23FFFFFF"/></svg>');
}

.token-logo.matic {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z" fill="%238247E5"/><path d="M83,57.4v18.1L64.7,86.6L46.5,75.5V53.4L64.7,42.3l18.2,11l11.1-6.4L64.7,28.9L35.4,46.9v34.1l29.3,17.1l29.3-17.1V51.1L83,57.4z M76.1,69.2V58.2l11.1-6.5v22.3L76.1,69.2z" fill="%23FFFFFF"/></svg>');
}

.token-logo.avax {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z" fill="%23E84142"/><path d="M81.9,83h10.9c1.3,0,2-1.5,1.1-2.4L65.3,47c-0.6-0.7-1.7-0.7-2.3,0L55.3,56c-0.6,0.7-0.6,1.6,0,2.3L72.9,81c0.9,1,0.2,2.5-1.1,2.5H52.3c-0.7,0-1.4-0.4-1.8-0.9l-8.5-12c-0.6-0.9-2-0.9-2.6,0l-4.8,6.8c-0.9,1.3,0.1,3,1.6,3h47.5C83.6,80.3,83,81.5,81.9,83z" fill="%23FFFFFF"/></svg>');
}

.token-logo.other {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64,16c26.51,0,48,21.49,48,48s-21.49,48-48,48s-48-21.49-48-48S37.49,16,64,16z" fill="%236c5ce7"/><text x="64" y="76" font-family="Arial" font-size="50" fill="white" text-anchor="middle">+</text></svg>');
}

.numbered-steps {
    counter-reset: step-counter;
    list-style-type: none;
    margin: 20px 0;
    padding: 0;
}

.numbered-steps li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 40px;
}

.numbered-steps li::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.image-container {
    margin: 30px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.guide-image {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    text-align: center;
    padding: 15px;
    background: var(--dark-card-bg);
    margin: 0;
    font-style: italic;
    opacity: 0.8;
}

.light-theme .image-caption {
    background: var(--light-card-bg);
}

/* Media queries for the help section */
@media screen and (max-width: 992px) {
    .help-container {
        flex-direction: column;
    }
    
    .help-sidebar {
        width: 100%;
        position: static;
    }
}

@media screen and (max-width: 768px) {
    .guide-step {
        flex-direction: column;
    }
    
    .step-number {
        margin: 0 auto 20px;
    }
    
    .info-box {
        flex-direction: column;
    }
}
/* Security Audit Logos */
.security-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.audit-logo {
    width: 180px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius);
    padding: 15px;
    transition: var(--transition);
    position: relative;
}

.light-theme .audit-logo {
    background-color: rgba(0, 0, 0, 0.03);
}

.audit-logo:hover {
    transform: translateY(-5px);
}

.audit-logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    opacity: 0.9;
    transition: var(--transition);
}

.audit-logo:hover::before {
    opacity: 1;
}

.audit-logo.certik::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60"><path d="M27,15h12l-12,30h-12L27,15z M46,15h12l-12,30h-12L46,15z M65,15h12l-12,30h-12L65,15z M120,15h12l-12,30h-12L120,15z M95,15v30h10V33.75h10V25h-10v-2.5h12.5V15H95z M165,15h-15v30h15c8.25,0,15-6.75,15-15S173.25,15,165,15z M165,37.5h-5V22.5h5c4.125,0,7.5,3.375,7.5,7.5S169.125,37.5,165,37.5z M195,15v30h22.5v-7.5H205V15H195z M235,15v30h-10V15H235z" fill="%23FFFFFF"/></svg>');
}

.audit-logo.hacken::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60"><path d="M30,15v30h8V34h14v-8H38V23h16v-8H30z M60,15v30h8V15H60z M75,15v30h8V28.5l14,16.5h10l-16-18l14-12h-9.5l-12.5,11V15H75z M115,15v30h28v-8h-20v-4h18v-6h-18v-4h20v-8H115z M152.5,15v30h8V32.5h5L173,45h9.5l-9-13c5-1,8.5-5.5,8.5-10.75C182,16,177,15,172,15H152.5z M160.5,26V22h10c2,0,3.5,1,3.5,2s-1.5,2-3.5,2H160.5z M192.5,15v30h8V35h5c6,0,12.5-3,12.5-10s-6.5-10-12.5-10H192.5z M200.5,27V23h5c2,0,4.5,1,4.5,2s-2.5,2-4.5,2H200.5z M225,15v30h8V15H225z M245,15v30h28v-8h-20V15H245z" fill="%23FFFFFF"/></svg>');
}

.audit-logo.peckshield::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60"><path d="M38.75,14.844L30,20.25v10.5L38.75,36l8.75-5.25v-10.5L38.75,14.844z M70,15h-15v30h7.5v-10H70c5.625,0,10-4.375,10-10S75.625,15,70,15z M67.5,27.5h-5V22.5h5c1.375,0,2.5,1.125,2.5,2.5S68.875,27.5,67.5,27.5z M92.5,15h-7.5v30h7.5V15z M112.5,15h-7.5v30h7.5V15z M145,15h-30v7.5h11.25V45h7.5V22.5H145V15z M175,22.5c0-1.375-0.25-2.625-0.75-3.75c-0.5-1.125-1.25-2.125-2.25-3S169.75,14.5,168.5,14c-1.25-0.5-2.625-0.75-4.125-0.75c-1.5,0-2.875,0.25-4.125,0.75c-1.25,0.5-2.375,1.125-3.25,2s-1.75,1.875-2.25,3S154,21.125,154,22.5V45h7.5V22.5c0-0.625,0.25-1.25,0.75-1.75s1.125-0.75,1.875-0.75s1.375,0.25,1.875,0.75S167.5,21.875,167.5,22.5V45H175V22.5z M205,37.5c0-1.375-0.25-2.625-0.75-3.75c-0.5-1.125-1.25-2.125-2.25-3s-2.25-1.5-3.5-2s-2.625-0.75-4.125-0.75c-1.5,0-2.875,0.25-4.125,0.75c-1.25,0.5-2.375,1.125-3.25,2s-1.75,1.875-2.25,3S184,36.125,184,37.5V45h7.5v-7.5c0-0.625,0.25-1.25,0.75-1.75s1.125-0.75,1.875-0.75s1.375,0.25,1.875,0.75s0.75,1.125,0.75,1.75V45h7.5V37.5z M194.375,27.344c4.375,0,7.75-2.812,7.75-6.172S198.75,15,194.375,15s-7.75,2.812-7.75,6.172S190,27.344,194.375,27.344z M226.25,15h-15v30h7.5v-10h7.5c5.625,0,10-4.375,10-10S231.875,15,226.25,15z M223.75,27.5h-5V22.5h5c1.375,0,2.5,1.125,2.5,2.5S225.125,27.5,223.75,27.5z M257.5,15l-10,15.938V15h-7.5v30h7.5l10-16.875V45h7.5V15H257.5z M280,15h-7.5v30h7.5V15z" fill="%23FFFFFF"/></svg>');
}

.audit-logo.slowmist::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60"><path d="M50,12.5c-9.625,0-17.5,7.875-17.5,17.5s7.875,17.5,17.5,17.5c4.5,0,8.625-1.75,11.75-4.5l-5.5-5.5c-1.75,1.5-4,2.5-6.25,2.5c-5.375,0-9.75-4.375-9.75-10s4.375-10,9.75-10s9.75,4.375,9.75,10h-10v7.5h17.5v-7.5C67.5,20.375,59.625,12.5,50,12.5z M87.5,15H70v30h17.5c8.25,0,15-6.75,15-15S95.75,15,87.5,15z M87.5,37.5h-10V22.5h10c4.125,0,7.5,3.375,7.5,7.5S91.625,37.5,87.5,37.5z M140,32.5L135,45h-7.5l-10-30h8.75l5.25,17.5l4.375-12.5h7.75L148,32.5l5-17.5h8.75l-10,30h-7.5L140,32.5z M185,15h-17.5v30h17.5c8.25,0,15-6.75,15-15S193.25,15,185,15z M185,37.5h-10V22.5h10c4.125,0,7.5,3.375,7.5,7.5S189.125,37.5,185,37.5z M207.5,45V15h7.5v22.5h15V45H207.5z" fill="%23FFFFFF"/></svg>');
}

.audit-logo.trailofbits::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60"><path d="M40,15v7.5h-10V45h-7.5V22.5h-10V15H40z M52.5,15v12.5h12.5v-5h-5V15H52.5z M90,15H70v30h7.5V32.5h12.5c4.125,0,7.5-3.875,7.5-8.75S94.125,15,90,15z M87.5,25h-10v-2.5h10c1.375,0,2.5,0.625,2.5,1.25S88.875,25,87.5,25z M115,15h-15v30h15c8.25,0,15-6.75,15-15S123.25,15,115,15z M115,37.5h-7.5V22.5h7.5c4.125,0,7.5,3.375,7.5,7.5S119.125,37.5,115,37.5z M145,15h-7.5v30h20v-7.5h-12.5V15z M187.5,15h-20v30h20c8.25,0,15-6.75,15-15S195.75,15,187.5,15z M187.5,37.5h-12.5V22.5h12.5c4.125,0,7.5,3.375,7.5,7.5S191.625,37.5,187.5,37.5z M237.5,15H220v30h17.5c8.25,0,15-6.75,15-15S245.75,15,237.5,15z M237.5,37.5h-10V22.5h10c4.125,0,7.5,3.375,7.5,7.5S241.625,37.5,237.5,37.5z M267.5,15H250v30h7.5V35H270v-7.5h-12.5v-5h15V15z" fill="%23FFFFFF"/></svg>');
}

.audit-logo.quantstamp::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60"><path d="M30,30c0,8.25,6.75,15,15,15V15C36.75,15,30,21.75,30,30z M75,30c0-8.25-6.75-15-15-15v30C68.25,45,75,38.25,75,30z M45,30c0,0,0,0,0,0h30c0,0,0,0,0,0H45z M120,15h-10v7.5h-7.5V15h-10v7.5H85V45h7.5V30h7.5v15h10V30h7.5v15H125V22.5h-5V15z M135,15v30h7.5V15H135z M177.5,15h-7.5l-10,30h7.5l1.875-5.625H180l1.875,5.625H190L180,15H177.5z M171.875,32.5l3.75-11.25l3.75,11.25H171.875z M212.5,15h-7.5l-10,15V15h-7.5v30h7.5v-7.5l3.75-5l7.5,12.5H215L203.75,27.5L212.5,15z M217.5,15v7.5H225v22.5h7.5V22.5h7.5V15H217.5z M260,22.5c0-1.375-0.25-2.625-0.75-3.75s-1.25-2.125-2.25-3s-2.25-1.5-3.5-2S250.875,13,249.375,13s-2.875,0.25-4.125,0.75s-2.375,1.125-3.25,2s-1.75,1.875-2.25,3S239,21.125,239,22.5V45h7.5V22.5c0-0.625,0.25-1.25,0.75-1.75S248.375,20,249.125,20s1.375,0.25,1.875,0.75s0.75,1.125,0.75,1.75V45H260V22.5z M267.5,15V45h7.5V37.5H280c6.875,0,12.5-5,12.5-11.25S286.875,15,280,15H267.5z M275,30v-7.5h5c1.875,0,3.75,1.25,3.75,3.75S281.875,30,280,30H275z" fill="%23FFFFFF"/></svg>');
}


.hidden{
    display: none!important;
}