@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

:root {
  /* Colors based on dark theme #0F1021, #59057B, #AB0E86, #ECE852 */
  --primary-color: #59057B;
  --secondary-color: #AB0E86;
  --accent-color: #830a67;
  --light-color: #F2F2F2;
  --dark-color: #0F1021;
  --hover-color: #72099e;
  --background-color: #0F1021;
  --text-color: #F2F2F2;
  --border-color: rgba(236, 232, 82, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.6);
  --highlight-color: #ECE852;
  
  --main-font: 'Playfair Display', serif;
  --alt-font: 'Work Sans', sans-serif;
}

html {
    scroll-behavior: smooth;
}

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

*, *::before, *::after {
    box-sizing: inherit;
}

/* Neuromorphism for Dark Theme & Hover */
.feature-item, .faq-item {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255,255,255,0.08);
}

.faq-item:hover {
    transform: translateX(8px);
    background-color: rgba(255,255,255,0.08);
}

.btn-hover:hover {
    background-color: var(--hover-color) !important;
}

.hover\:text-underline:hover {
    text-decoration: underline;
}

/* Form Styles */
input::placeholder, textarea::placeholder {
    color: rgba(242, 242, 242, 0.5);
}

input:focus, textarea:focus {
    border-color: var(--highlight-color) !important;
}

/* Mobile Menu Logic (No JS) */
.mobile-menu-btn {
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .navigation {
        display: none;
        width: 100%;
        margin-top: 15px;
        background: rgba(0,0,0,0.2);
        padding: 10px;
        border-radius: 8px;
    }
    
    .navigation ul {
        flex-direction: column;
        gap: 15px !important;
    }
    
    .navigation li {
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 10px;
    }
    
    #menu-toggle:checked ~ .navigation {
        display: block;
    }
    
    header {
        flex-wrap: wrap;
    }

    .content-img, .content-text {
        max-width: 100% !important;
    }
}