:root {
    --primary-color: #007bff;
    --dark-bg: #343a40;
    --light-bg: #f8f9fa;
    --text-color: #333;
    --secondary-text-color: #6c757d;
    --header-bg: rgba(23, 26, 33, 0.85);
}
html { scroll-behavior: smooth; }
body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 0; padding: 0; color: var(--text-color); background-color: var(--light-bg); }
h2 { text-align: center; font-size: 2.5em; margin-bottom: 40px; font-weight: 600; }
.full-page-section { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 120px 20px 80px 20px; box-sizing: border-box; background-color: var(--light-bg); scroll-margin-top: 70px; }
.full-page-section.alt-bg { background-color: #ffffff; }
.content-wrapper { width: 100%; max-width: 1200px; text-align: center; }

/* --- Header --- */
#main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 15px 0; background-color: rgba(23, 26, 33, 0.2); backdrop-filter: blur(5px); transition: background-color 0.4s ease; }
#main-header.scrolled { background-color: var(--header-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.header-container { width: 85%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8em; font-weight: 700; color: #fff; text-decoration: none; }
#main-header nav ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; }
#main-header nav a { color: #f8f9fa; text-decoration: none; font-weight: 500; padding: 5px 10px; border-radius: 5px; transition: transform 0.2s ease, background-color 0.2s ease; display: inline-block; }
#main-header nav a:hover { transform: scale(1.1); background-color: rgba(255, 255, 255, 0.15); }
.menu-toggle { display: none; background: none; border: none; color: white; font-size: 24px; cursor: pointer; z-index: 1100; }

/* --- Hero Section --- */
#hero { position: relative; background: linear-gradient(135deg, #6e8efb, #a777e3, #e73c7e, #ee7752); background-size: 400% 400%; animation: gradientBG 15s ease infinite; color: #fff; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 20px; scroll-margin-top: 70px; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
.hero-main-container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: auto; position: relative; z-index: 2; gap: 40px; }
.hero-text-content { flex: 1 1 55%; text-align: left; }
.hero-text-content h1 { font-size: 5.5em; margin-bottom: 60px; color: #fff; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
.hero-text-content p { font-size: 1.1em; margin-bottom: 100px; font-weight: 300; line-height: 1.7; }
.hero-text-content .app-store-badges { display: flex; flex-wrap: wrap; gap: 30px; }
.hero-text-content .app-store-badges .badge img { height: 85px; transition: transform 0.2s ease; }
.hero-text-content .app-store-badges .badge img:hover { transform: scale(1.05); }
.hero-image-content { flex: 1 1 80%; display: flex; justify-content: center; align-items: center; }
.hero-image-content img { max-width: 100%; max-height: 75vh; height: auto; border-radius: 25px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); object-fit: contain; }


/* --- Features Section (Cards) --- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px; }
.feature-card { background: #fff; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); overflow: hidden; text-align: center; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); }
.alt-bg .feature-card { background: var(--light-bg); }
.feature-card .card-image-placeholder { width: 100%; height: 200px; background-color: #e9ecef; position: relative; }
.feature-card .card-image-placeholder::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 30px; background-size: cover; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z' class='shape-fill' fill='%23FFFFFF'%3E%3C/path%3E%3C/svg%3E"); }
#functionalities .feature-card .card-image-placeholder::after, .alt-bg .feature-card .card-image-placeholder::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z' class='shape-fill' fill='%23f8f9fa'%3E%3C/path%3E%3C/svg%3E"); }
.feature-card .card-image-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.feature-card h3 { font-size: 1.6em; margin: 40px 20px 10px 20px; color: var(--dark-bg); }
.feature-card p { font-size: 1em; padding: 0 30px 30px 30px; color: var(--secondary-text-color); flex-grow: 1; }
/* .mesame { } */

/* --- Product Showcase Section --- */
#product-showcase { display: flex; padding: 0; }
.showcase-column { flex: 1; padding: 80px 5%; display: flex; flex-direction: column; position: relative; }
.left-col { background-color: #26a69a; }
.right-col { background-color: #5c6bc0; }
.showcase-content { display: flex; flex-direction: column; height: 100%; text-align: left; color: white; }
.showcase-content h3 { color: white; text-transform: uppercase; font-weight: 800; margin-bottom: 30px; text-align: left; font-size: 2.2em; }
.showcase-images { text-align: center; margin: 30px 0; height: 450px; }
.showcase-images-mobile { position: relative; }
.showcase-images img { height: 100%; width: auto; object-fit: contain; }
.showcase-images-mobile img { position: absolute; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.mobile-screen-1 { top: 0; left: 0; }
.mobile-screen-2 { top: 10%; left: 35%; }
.showcase-images-admin img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.showcase-features { list-style: none; padding: 0; margin-top: auto; }
.showcase-features li { font-size: 1.1em; font-weight: 600; margin-bottom: 15px; display: flex; align-items: flex-start; gap: 10px; }
.showcase-features li i { font-size: 0.6em; margin-top: 8px; }

/* --- Interactive "How it Works" Section --- */
#how-it-works-interactive { background-color: #f0f2f5; }
#how-it-works-interactive h2 { color: #3b566e; margin-bottom: 20px; }
#how-it-works-interactive h2::after { content: ''; display: block; width: 50px; height: 3px; background-color: #3b566e; margin: 15px auto 60px auto; }
.content-wrapper-large { width: 100%; max-width: 1400px; text-align: center; margin: 0 auto; }
.interactive-layout { display: flex; justify-content: space-around; align-items: center; gap: 30px; }
.feature-tabs-list { flex-basis: 35%; text-align: left; }
.static-tab-info { margin-bottom: 40px; }
.static-tab-info h3 { color: #3b566e; font-size: 1.5em; margin-bottom: 15px; }
.static-tab-info p { color: #7d8d9c; line-height: 1.7; }
.tab-item { display: flex; align-items: center; gap: 20px; padding: 20px 10px; border-left: 4px solid transparent; cursor: pointer; transition: all 0.3s ease; }
.tab-item:not(:last-child) { border-bottom: 1px solid #dfe3e7; }
.tab-icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; background-color: #e3e8ed; color: #7d8d9c; transition: all 0.3s ease; }
.tab-text h4 { margin: 0 0 8px 0; color: #3b566e; font-size: 1.2em; }
.tab-text p { margin: 0; color: #7d8d9c; }
.tab-item.active { border-left-color: #1ebfc9; }
.tab-item.active .tab-icon { color: #fff; background: linear-gradient(135deg, #1de4c7, #1a95e0); transform: scale(1.1); box-shadow: 0 5px 15px rgba(29, 228, 199, 0.4); }
.feature-screens { flex-basis: 30%; position: relative; height: 600px; perspective: 1000px; }
.screen-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }
.screen-content.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 10; }
.feature-screens img { position: absolute; height: 90%; border-radius: 25px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); transition: transform 0.5s ease; max-width: 100%; object-fit: contain; }
.screen-front { top: 0; left: 40%; transform: translateX(-40%) rotateY(15deg); z-index: 1; }
.screen-back { top: 10%; left: 0; transform: translateX(0) rotateY(-10deg) scale(0.95); z-index: 5; }
.screen-content.active .screen-front, .screen-content.active .screen-back { transform: translateX(0) rotateY(0deg); }
.feature-navigator { flex-basis: 10%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.nav-arrow { background: none; border: 1px solid #cdd4da; color: #7d8d9c; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; }
.nav-arrow:hover { background-color: #fff; border-color: #1ebfc9; color: #1ebfc9; }
.nav-dots { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.nav-dot { width: 14px; height: 14px; border: 1px solid #cdd4da; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 0; color: #fff; }
.nav-dot.active { width: 60px; height: 60px; border-color: transparent; background: linear-gradient(135deg, #22E29B, #0EB7D2); box-shadow: 0 5px 15px rgba(34, 226, 155, 0.4); font-size: 24px; }

/* --- Functionalities Section --- */
.section-subtitle { font-size: 1.1em; color: var(--secondary-text-color); max-width: 700px; margin: 0 auto 60px auto; }
.functionalities-layout { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.feature-column { display: flex; flex-direction: column; gap: 40px; flex-basis: 30%; }
.feature-center-image { flex-basis: 30%; }
.feature-center-image img { max-width: 100%; height: auto; }
.functionality-item { display: flex; align-items: center; gap: 20px; }
.feature-column.left .functionality-item { text-align: right; flex-direction: row-reverse; }
.feature-column.right .functionality-item { text-align: left; }
.func-icon { flex-shrink: 0; width: 60px; height: 60px; background-color: var(--primary-color); color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; transition: transform 0.3s ease; }
.functionality-item:hover .func-icon { transform: scale(1.1); }
.func-text h3 { margin: 0 0 8px 0; font-size: 1.3em; color: var(--dark-bg); }
.func-text p { margin: 0; color: var(--secondary-text-color); font-size: 0.95em; }

/* --- Quick View (Swiper) Section --- */
#quick-view .content-wrapper { max-width: 1400px; }
.swiper { width: 100%; height: 50vh; padding-top: 20px; padding-bottom: 100px; }
.swiper-slide { display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center;}
.swiper-slide img { display: block; height: 100%; width: auto; object-fit: contain; border-radius: 20px; }
.swiper-button-next, .swiper-button-prev { color: var(--primary-color); }
.swiper-pagination-bullet { background: var(--primary-color); opacity: 0.5; }
.swiper-pagination-bullet-active { opacity: 1; }

/* --- Footer --- */
footer { background: var(--dark-bg); color: #adb5bd; text-align: center; padding: 40px 20px; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.contact-info { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; border-bottom: 1px solid #495057; padding-bottom: 30px; }
.contact-item { display: flex; align-items: center; gap: 15px; color: #f8f9fa; font-size: 1.1em; }
.contact-item i { font-size: 1.4em; color: var(--primary-color); }
.footer-links { display: flex; justify-content: center; gap: 15px; }
.footer-links a { color: #f8f9fa; text-decoration: none; transition: color 0.3s ease; margin: 0 10px; }
.footer-links a:hover { color: var(--primary-color); }
.footer-links span { color: #6c757d; }
.copyright { margin: 0; font-size: 0.9em; }

/* --- Responsiveness --- */
@media (max-width: 1200px) {
    .interactive-layout { flex-direction: column; gap: 40px; }
    .feature-tabs-list { width: 100%; max-width: 600px; }
    .feature-screens { height: 500px; width: 100%; margin-bottom: 40px; }
    .feature-navigator { flex-direction: row; width: 100%; justify-content: center; }
    .nav-dots { flex-direction: row; }
}
@media (max-width: 992px) {
    #product-showcase { flex-direction: column; }
    .showcase-column { padding: 60px 5%; }
    .showcase-images { height: auto; }
    .hero-main-container { flex-direction: column; text-align: center; gap: 30px; }
    .hero-text-content { text-align: center; order: 2; padding-right: 0; }
    .hero-text-content .app-store-badges { justify-content: center; }
    .hero-image-content { order: 1; width: 60%; max-width: 320px; }
    .card-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .full-page-section { min-height: auto; padding: 100px 20px 60px 20px; }
    .functionalities-layout { flex-direction: column; gap: 60px; }
    .feature-center-image { order: -1; max-width: 250px; }
    .feature-column.left .functionality-item, .feature-column.right .functionality-item { flex-direction: row; text-align: left; }
}
@media (max-width: 768px) {
    h2 { font-size: 2em; }
    #product-showcase .showcase-content h3 { font-size: 1.8em; }
    .card-grid { grid-template-columns: 1fr; }
    .menu-toggle { display: block; }
    #main-nav { position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100vh; background-color: rgba(23, 26, 33, 0.95); backdrop-filter: blur(10px); transform: translateX(100%); transition: transform 0.4s ease-in-out; z-index: 1050; }
    #main-nav.active { transform: translateX(0); }
    #main-nav ul { flex-direction: column; justify-content: center; align-items: center; height: 100%; gap: 20px;  }
    #main-nav a { font-size: 1.2em; }
    .swiper { height: 60vh; }
    .feature-screens { height: 400px; }
    .contact-info { flex-direction: column; gap: 25px; }
}
@media (max-width: 996px) {
    .hero-text-content h1 { font-size: 2.2em; }
    .hero-text-content p { font-size: 1.1em; }
    .hero-text-content .app-store-badges .badge img { height: 50px; }
    .hero-image-content { width: 70%; max-width: 280px; }
    .feature-card h3 { font-size: 1.4em; }
    .showcase-images-mobile img { position: static; height: auto; width: 80%; }
    .showcase-images-mobile { height: auto; }
    .showcase-images-admin img { position: static; height: auto; width: 80%; }
    .showcase-images-admin { height: auto; }
    /* .mobile-screen-2 { display: none; } */
}