/* styles.css */* {    margin: 0;    padding: 0;    box-sizing: border-box;}body {    font-family: 'Inter', sans-serif;    line-height: 1.6;    color: #333;    background-color: #fff;}.container {    width: 90%;    max-width: 1200px;    margin: 0 auto;}/* Header */.header {    background-color: #fff;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);    position: fixed;    width: 100%;    top: 0;    z-index: 1000;}.header .container {    display: flex;    justify-content: space-between;    align-items: center;    padding: 1rem 0;}.logo {    display: flex;    align-items: center;    text-decoration: none;}.logo-icon {    margin-right: 10px;}.logo-text {    font-size: 1.5rem;    font-weight: 700;    color: #007BFF;}.nav {    display: flex;    align-items: center;}.nav a {    text-decoration: none;    color: #333;    margin: 0 1rem;    font-weight: 500;    transition: color 0.3s;}.nav a:hover {    color: #007BFF;}.btn-primary, .btn-secondary {    padding: 0.75rem 1.5rem;    border-radius: 50px;    text-decoration: none;    font-weight: 600;    transition: all 0.3s;    cursor: pointer;    border: none;    font-size: 1rem;}.btn-primary {    background-color: #007BFF;    color: white;}.btn-primary:hover {    background-color: #0056b3;    transform: translateY(-2px);    box-shadow: 0 4px 12px rgba(0,123,255,0.3);}.btn-secondary {    background-color: transparent;    color: #007BFF;    border: 2px solid #007BFF;}.btn-secondary:hover {    background-color: #007BFF;    color: white;}.mobile-menu {    display: none;    font-size: 1.5rem;    cursor: pointer;}/* Hero Section */.hero {    padding: 10rem 0 5rem;    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);}.hero-main-image {    width: 100%;    max-width: 400px;    height: auto;    border-radius: 15px;    box-shadow: 0 10px 30px rgba(0,0,0,0.3);    margin-bottom: 20px;    transition: transform 0.3s ease;}.hero-main-image:hover {    transform: scale(1.05);}.hero-stats {    display: flex;    gap: 2rem;    margin: 2rem 0;    flex-wrap: wrap;}.stat-item {    text-align: center;    padding: 1rem;    background: rgba(255,255,255,0.1);    border-radius: 10px;    backdrop-filter: blur(10px);    border: 1px solid rgba(255,255,255,0.2);    min-width: 100px;}.stat-number {    display: block;    font-size: 2rem;    font-weight: 700;    color: #fff;    margin-bottom: 0.5rem;}.stat-label {    display: block;    font-size: 0.9rem;    color: rgba(255,255,255,0.9);    font-weight: 500;}.hero .container {    display: flex;    align-items: center;    justify-content: space-between;}.hero-content {    flex: 1;    padding-right: 2rem;}.hero-title {    font-size: 3rem;    font-weight: 800;    margin-bottom: 1rem;    color: #212529;}.hero-subtitle {    font-size: 1.5rem;    color: #007BFF;    margin-bottom: 1.5rem;    font-weight: 600;}.hero-description {    font-size: 1.1rem;    margin-bottom: 2rem;    color: #495057;}.hero-buttons {    display: flex;    gap: 1rem;}.hero-image {    flex: 1;    display: flex;    justify-content: center;    align-items: center;}.logo-visual {    animation: float 3s ease-in-out infinite;}@keyframes float {    0% { transform: translateY(0px); }    50% { transform: translateY(-10px); }    100% { transform: translateY(0px); }}/* Sections */.section-padding {    padding: 5rem 0;}.bg-light {    background-color: #f8f9fa;}.section-header {    text-align: center;    margin-bottom: 3rem;}.section-header h2 {    font-size: 2.5rem;    margin-bottom: 1rem;    color: #212529;}.section-header p {    font-size: 1.2rem;    color: #6c757d;    max-width: 700px;    margin: 0 auto;}/* Problem Section */.problem-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 2rem;}.problem-card {    text-align: center;    padding: 2rem;    background: white;    border-radius: 10px;    box-shadow: 0 5px 15px rgba(0,0,0,0.05);    transition: transform 0.3s, box-shadow 0.3s;}.problem-card:hover {    transform: translateY(-5px);    box-shadow: 0 10px 25px rgba(0,0,0,0.1);}.problem-icon {    font-size: 2.5rem;    color: #007BFF;    margin-bottom: 1rem;}.problem-card h3 {    font-size: 1.3rem;    margin-bottom: 1rem;    color: #212529;}/* Solution Section */.solution-content {    display: flex;    gap: 3rem;    align-items: center;}.solution-text {    flex: 1;}.solution-text blockquote {    font-size: 1.2rem;    font-style: italic;    color: #007BFF;    border-left: 4px solid #007BFF;    padding-left: 1rem;    margin-bottom: 2rem;}.solution-benefits {    display: flex;    flex-direction: column;    gap: 1rem;}.benefit-item {    display: flex;    align-items: center;    gap: 0.5rem;}.benefit-item i {    color: #28A745;}.solution-image {    flex: 1;    border-radius: 10px;    overflow: hidden;    box-shadow: 0 10px 30px rgba(0,0,0,0.1);}.solution-image img {    width: 100%;    max-width: 500px;    height: auto;    border-radius: 15px;    box-shadow: 0 15px 35px rgba(0,0,0,0.15);    transition: transform 0.3s ease, box-shadow 0.3s ease;    display: block;}.solution-image img:hover {    transform: translateY(-5px);    box-shadow: 0 20px 40px rgba(0,0,0,0.2);}/* Framework Section */.framework {    background-color: #f8f9fa;}.framework-content {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 3rem;    align-items: center;    margin-top: 3rem;}.framework-text h3 {    font-size: 1.8rem;    color: #2563eb;    margin-bottom: 1rem;}.framework-benefits {    margin: 2rem 0;}.benefit-item {    display: flex;    align-items: center;    gap: 1rem;    margin-bottom: 1rem;    padding: 0.8rem;    background: white;    border-radius: 8px;    box-shadow: 0 2px 8px rgba(0,0,0,0.05);    transition: transform 0.3s ease;}.benefit-item:hover {    transform: translateX(10px);}.benefit-item i {    color: #2563eb;    font-size: 1.2rem;    width: 20px;}.framework-image {    width: 100%;    max-width: 500px;    height: auto;    border-radius: 15px;    box-shadow: 0 15px 35px rgba(0,0,0,0.15);    transition: transform 0.3s ease;}.framework-image:hover {    transform: scale(1.05);}/* Gallery Section */.gallery {    background-color: white;}.gallery-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));    gap: 2rem;    margin-top: 3rem;}/* Responsive Design */@media (max-width: 768px) {    .hero .container {        flex-direction: column;        text-align: center;    }        .hero-stats {        justify-content: center;        gap: 1rem;    }        .stat-item {        min-width: 80px;        padding: 0.8rem;    }        .framework-content {        grid-template-columns: 1fr;        gap: 2rem;        text-align: center;    }        .gallery-grid {        grid-template-columns: 1fr;    }        .benefit-item {        justify-content: center;    }        .hero-main-image {        max-width: 300px;    }        .framework-image {        max-width: 400px;    }}.gallery-item {    position: relative;    border-radius: 15px;    overflow: hidden;    box-shadow: 0 10px 30px rgba(0,0,0,0.1);    transition: transform 0.3s ease, box-shadow 0.3s ease;    cursor: pointer;}.gallery-item:hover {    transform: translateY(-10px);    box-shadow: 0 20px 40px rgba(0,0,0,0.2);}.gallery-item img {    width: 100%;    height: 250px;    object-fit: cover;    transition: transform 0.3s ease;}.gallery-item:hover img {    transform: scale(1.1);}.gallery-overlay {    position: absolute;    bottom: 0;    left: 0;    right: 0;    background: linear-gradient(transparent, rgba(0,0,0,0.8));    color: white;    padding: 2rem;    transform: translateY(100%);    transition: transform 0.3s ease;}.gallery-item:hover .gallery-overlay {    transform: translateY(0);}.gallery-overlay h3 {    font-size: 1.25rem;    font-weight: 600;    margin-bottom: 0.5rem;}.gallery-overlay p {    font-size: 0.9rem;    opacity: 0.9;}/* How It Works */.steps {    display: flex;    justify-content: space-between;    flex-wrap: wrap;    gap: 2rem;}.step {    flex: 1;    min-width: 250px;    text-align: center;    position: relative;    padding: 2rem;}.step-number {    width: 50px;    height: 50px;    background: #007BFF;    color: white;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.5rem;    font-weight: bold;    margin: 0 auto 1.5rem;}.step h3 {    font-size: 1.3rem;    margin-bottom: 1rem;    color: #212529;}/* Benefits */.benefits-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 3rem;}.benefits-results, .benefits-impact {    background: white;    padding: 2rem;    border-radius: 10px;    box-shadow: 0 5px 15px rgba(0,0,0,0.05);}.benefits-results h3, .benefits-impact h3 {    font-size: 1.5rem;    margin-bottom: 1.5rem;    color: #212529;    text-align: center;}.benefits-results ul, .benefits-impact ul {    list-style: none;}.benefits-results li, .benefits-impact li {    padding: 0.75rem 0;    border-bottom: 1px solid #eee;    display: flex;    align-items: center;}.benefits-results li:before, .benefits-impact li:before {    content: "✓";    color: #28A745;    font-weight: bold;    margin-right: 10px;}/* Plans */.plans-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;}.plan-card {    background: white;    border-radius: 10px;    box-shadow: 0 5px 20px rgba(0,0,0,0.1);    padding: 2rem;    position: relative;    transition: transform 0.3s;    border: 2px solid #f8f9fa;}.plan-card:hover {    transform: translateY(-10px);    box-shadow: 0 15px 30px rgba(0,0,0,0.15);}.plan-card.popular {    border-color: #007BFF;    transform: scale(1.05);}.plan-card.popular:hover {    transform: scale(1.05) translateY(-10px);}.popular-badge {    position: absolute;    top: -12px;    right: 20px;    background: #007BFF;    color: white;    padding: 0.5rem 1rem;    border-radius: 20px;    font-size: 0.8rem;    font-weight: 600;}.plan-header {    text-align: center;    margin-bottom: 2rem;}.plan-header h3 {    font-size: 1.5rem;    margin-bottom: 1rem;    color: #212529;}.plan-price {    font-size: 2rem;    font-weight: 700;    color: #007BFF;}.plan-price span {    font-size: 1rem;    color: #6c757d;}.plan-features {    list-style: none;    margin-bottom: 2rem;}.plan-features li {    padding: 0.75rem 0;    border-bottom: 1px solid #eee;    display: flex;    align-items: center;}.plan-features li:before {    content: "✓";    color: #28A745;    font-weight: bold;    margin-right: 10px;}.plan-features li.not-included:before {    content: "✗";    color: #dc3545;}.plan-features li.not-included {    color: #6c757d;}.plan-btn {    width: 100%;    margin-bottom: 1rem;}.plan-note {    text-align: center;    color: #6c757d;    font-size: 0.9rem;}/* Cases */.cases-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;}.case-card {    background: white;    border-radius: 10px;    padding: 2rem;    box-shadow: 0 5px 15px rgba(0,0,0,0.05);    position: relative;    transition: transform 0.3s;}.case-card:hover {    transform: translateY(-5px);    box-shadow: 0 10px 25px rgba(0,0,0,0.1);}.case-logo {    width: 60px;    height: 60px;    background: #007BFF;    color: white;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.5rem;    font-weight: bold;    margin-bottom: 1.5rem;}.case-card h3 {    font-size: 1.3rem;    margin-bottom: 0.5rem;    color: #212529;}.case-result {    color: #007BFF;    font-weight: 600;    margin-bottom: 1.5rem;}.case-card blockquote {    font-style: italic;    color: #495057;    border-left: 3px solid #007BFF;    padding-left: 1rem;}/* CTA */.cta {    background: linear-gradient(135deg, #007BFF 0%, #0056b3 100%);    color: white;    text-align: center;}.cta h2 {    font-size: 2.5rem;    margin-bottom: 1rem;}.cta p {    font-size: 1.2rem;    margin-bottom: 2rem;    max-width: 700px;    margin-left: auto;    margin-right: auto;}.btn-large {    padding: 1rem 2rem;    font-size: 1.1rem;}/* Contact */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.contact-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.15);
}

.contact-card i {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 1rem;
    display: block;
}

.contact-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.contact-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    word-break: break-all;
}

/* Footer */.footer {    background: #212529;    color: #fff;    padding: 3rem 0 1.5rem;}.footer-content {    display: flex;    justify-content: space-between;    flex-wrap: wrap;    gap: 2rem;    margin-bottom: 2rem;}.footer-logo {    flex: 1;    min-width: 250px;}.footer-tagline {    margin-top: 1rem;    color: #adb5bd;}.footer-links {    display: flex;    gap: 3rem;    flex-wrap: wrap;}.footer-column h4 {    margin-bottom: 1rem;    color: #fff;}.footer-column a {    display: block;    color: #adb5bd;    text-decoration: none;    margin-bottom: 0.5rem;    transition: color 0.3s;}.footer-column a:hover {    color: #007BFF;}.footer-bottom {    display: flex;    justify-content: space-between;    align-items: center;    flex-wrap: wrap;    gap: 1rem;    padding-top: 1.5rem;    border-top: 1px solid #495057;    color: #adb5bd;    font-size: 0.9rem;}.footer-legal a {    color: #adb5bd;    text-decoration: none;    margin-left: 1rem;}.footer-legal a:hover {    color: #007BFF;}/* Responsive */@media (max-width: 992px) {    .hero .container {        flex-direction: column;        text-align: center;    }        .hero-content {        padding-right: 0;        margin-bottom: 3rem;    }        .hero-buttons {        justify-content: center;    }        .solution-content {        flex-direction: column;    }        .steps {        flex-direction: column;    }        .step {        width: 100%;    }}@media (max-width: 768px) {    .nav {        display: none;    }        .mobile-menu {        display: block;    }        .hero-title {        font-size: 2.5rem;    }        .hero-subtitle {        font-size: 1.2rem;    }        .section-header h2 {        font-size: 2rem;    }        .plan-card.popular {        transform: scale(1);    }        .plan-card.popular:hover {        transform: translateY(-10px);    }        .footer-content {        flex-direction: column;    }        .footer-links {        gap: 2rem;    }        .footer-bottom {        flex-direction: column;        text-align: center;    }        .footer-legal a {        margin: 0 0.5rem;    }}@media (max-width: 576px) {    .hero {        padding: 8rem 0 3rem;    }        .hero-title {        font-size: 2rem;    }        .hero-buttons {        flex-direction: column;        gap: 1rem;    }        .section-padding {        padding: 3rem 0;    }        .section-header h2 {        font-size: 1.8rem;    }        .section-header p {        font-size: 1rem;    }}