:root {
    /* Trust Tech Blue Palette */
    --bg-color: #F8F9FA;
    --hero-bg: #1E3A8A;
    --primary-color: #00B4D8;
    --primary-hover: #0096B4;

    --text-color: #212529;
    --text-secondary: #6C757D;
    --text-inverse: #FFFFFF;

    --glass-bg: #FFFFFF;
    --glass-border: #E9ECEF;

    --nav-height: 80px;
    --container-width: 1200px;
    --transition-speed: 0.3s;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-speed);
}

ul {
    list-style: none;
}

img,
svg,
iconify-icon {
    display: block;
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* === HEADER & NAV === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    /* Light glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-speed);
}

.header__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 101;
}

.logo__image {
    height: 48px;
    /* Fit within 80px header with padding */
    width: auto;
    object-fit: contain;
}

/* .logo__text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hero-bg); 
} */

.nav__list {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav__link {
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
}

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

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
}

.nav__link:hover::after {
    width: 100%;
}

.nav {
    margin-left: auto;
    /* Push nav and phone to the right */
}

/* Persistent Phone Link */
.header__phone {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 700;
    margin-left: 40px;
    /* Space between nav and phone */
}

/* On Desktop: Nav should be center or right? 
   Currently header is flex, space-between. 
   With Logo, Nav, Phone, Toggle (hidden):
   It will be: Logo | Nav | Phone.
   To make it look like part of menu, keep them close?
   Or Logo (Left) ... Nav (Right) Phone (Right).
   Let's check layout.
*/

.header__phone:hover {
    color: var(--hero-bg);
}

.nav__toggle,
.nav__close {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
}

.nav__toggle,
.nav__close {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
}

/* === HERO SECTION === */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Hero background with image overlay */
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.75) 100%), url('assets/hero_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Abstract Graphic / shapes */
.hero__graphic {
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.2) 0%, rgba(255, 255, 255, 0.02) 60%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.hero__container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero__content {
    max-width: 650px;
}

.hero__logo-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-color);
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.hero__heading {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.2s forwards;
    color: var(--text-inverse);
    /* White text on Hero */
}

.hero__subheading {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    /* Light text on Hero */
    margin-bottom: 40px;
    max-width: 90%;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.4s forwards;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-speed);
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.6s forwards;
}

.btn--primary {
    background-color: var(--primary-color);
    color: #fff;
    /* White text on cyan button */
}

.btn--primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.4);
}

.btn--primary:active {
    transform: translateY(0);
}

.hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Glass Card simulating the Tagli visual */
.hero__panel-visual {
    width: 360px;
    /* Slightly wider than the previous circle */
    height: auto;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* Deep shadow */
    border: 4px solid rgba(255, 255, 255, 0.2);
    animation: float 6s ease-in-out infinite;
    transform-origin: center center;
}

.hero__panel-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero__heading {
        font-size: 2.8rem;
    }

    .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__content {
        margin: 0 auto;
        order: 1;
    }

    .hero__visual {
        order: 2;
        margin-top: 40px;
        display: none;
    }

    .hero__subheading {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 992px) {

    /* Make the NAV container the sliding panel, not just the list */
    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Vertical top */
        align-items: center;
        /* Horizontal center */
        padding-top: 100px;
        /* Space from top */
        transition: right var(--transition-speed);
        z-index: 105;
    }

    /* When nav has active class (toggled by JS), slide in */
    .nav.active {
        right: 0;
    }

    /* Reset list styles inside the panel */
    .nav__list {
        display: flex;
        flex-direction: column;
        gap: 40px;
        /* Increased gap */
        text-align: center;
        /* Horizontal center */
        align-items: center;
        /* Horizontal center */
        width: 100%;
    }

    .nav__link {
        font-size: 1.5rem;
        /* Increased font size */
    }

    .nav__toggle {
        display: block;
        z-index: 102;
    }

    .nav__close {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        /* Moved slightly for better touch area */
        font-size: 32px;
    }

    .header__phone {
        margin-left: auto;
        /* Push to the right, next to hamburger */
        margin-right: 20px;
        /* Space between phone and hamburger */
        font-size: 1rem;
        /* Restore font size */
    }

    /* On very small screens, maybe hide text if needed, but user requested visibility. 
       Let's trust flex wrap or shrinking if needed, but fitting is priority. */
    @media (max-width: 400px) {
        .logo__text {
            display: none;
            /* Hide logo text on tiny screens to prioritize phone? Or shrink? */
            /* Better to keep logo icon if exists, but text is "SystemCore". 
               Let's shorten phone spacing. */
        }

        .header__phone {
            margin-right: 10px;
            font-size: 0.8rem;
        }
    }

    .hero__heading {
        font-size: 2.2rem;
    }

    .btn {
        width: 100%;
    }
}

/* === PROBLEMS SECTION === */
.problems {
    padding: 100px 0;
    position: relative;
    z-index: 10;
    background-color: var(--bg-color);
    /* Explicitly set */
}

.problems__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.problems__content {
    flex: 1;
    max-width: 500px;
    position: sticky;
    top: 120px;
}

.section-tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--text-color);
}

.section-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.problems__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

.problem-card {
    background: #fff;
    border: 1px solid var(--glass-border);
    padding: 32px;
    border-radius: 24px;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(30px);
}

.problem-card:hover {
    background: #fff;
    border-color: var(--primary-color);
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    /* Lighter shadow for light theme */
}

.problem-card__icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 180, 216, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--primary-color);
}

.problem-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
}

/* Responsive for Problems */
@media (max-width: 992px) {
    .problems__container {
        flex-direction: column;
    }

    .problems__content {
        position: static;
        max-width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .problems__grid {
        width: 100%;
    }
}

/* === ADVANTAGES SECTION === */
.advantages {
    padding: 100px 0;
    background-color: #fff;
    /* White background to contrast with light grey problems/body */
}

.text-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.advantages__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.advantage-card {
    background-color: var(--bg-color);
    /* Light grey card on white section */
    padding: 30px;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    opacity: 0;
    transform: translateY(20px);
}

.advantage-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.15);
}

.advantage-card__icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 180, 216, 0.1);
    color: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-card__icon {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
}

.advantage-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-color);
}

.advantage-card__text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 992px) {
    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .advantages__grid {
        grid-template-columns: 1fr;
    }
}

/* === PROCESS SECTION === */
.process {
    padding: 100px 0;
    background-color: var(--bg-color);
}

.process__container {
    max-width: 800px;
    /* Limit width for centered timeline */
    margin: 0 auto;
}

.timeline {
    position: relative;
    padding-left: 20px;
    margin-left: 20px;
    border-left: 2px solid var(--glass-border);
    margin-top: 60px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 30px;
    opacity: 0;
    transform: translateX(-20px);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -36px;
    /* Align with border center */
    top: 0;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-marker {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.2);
}

.timeline-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-color);
}

.timeline-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* === GALLERY SECTION === */
.gallery {
    padding: 100px 0;
    background-color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 items side-by-side */
    gap: 30px;
    margin-top: 60px;
}

.gallery-item {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: 400px;
    /* Fixed height for uniformity */
    opacity: 0;
    transform: translateY(20px);
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Back to cover for uniform boxes */
    transition: transform 0.5s ease;
}

/* Specific adjustment for floor cabinet or tall items if needed, 
   but "cover" is best for uniform boxes. 
   If floor cabinet needs contain, we can specificy it, but let's try cover first 
   or allow object-position adjustments */

.gallery-item:nth-child(3) .gallery-image {
    object-fit: cover;
    /* Use cover to fill the area and remove grey bars */
    object-position: center bottom;
    /* Anchor to bottom to ensure base is visible, cropping top if needed, or center */
    /* Let's try center center or center bottom. Usually panel content is top/mid. */
    /* Given the image is portrait/square and container is squareish, cover should work well. */
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.gallery-overlay span {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Responsive Process & Gallery */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        margin-left: 16px;
    }
}

/* === PRICING SECTION === */
.pricing {
    padding: 100px 0;
    background-color: var(--bg-color);
    /* Alternate background */
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.pricing-card {
    background-color: var(--bg-color);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.pricing-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.pricing-card__icon {
    font-size: 40px;
    color: var(--primary-color);
}

.pricing-card__percent {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hero-bg);
    background: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.pricing-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-color);
}

.pricing-card__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pricing__cta {
    background-color: var(--hero-bg);
    padding: 60px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
}

.pricing__cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.pricing__cta-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .pricing__grid {
        grid-template-columns: 1fr;
    }

    .pricing__cta {
        padding: 40px;
    }
}

/* === QUIZ FORM SECTION === */
.quiz-section {
    padding: 100px 0;
    background-color: var(--bg-color);
}

.quiz__container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Form Styles */
.quiz__form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.quiz-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.quiz-step.active {
    display: block;
}

.quiz-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-color);
}

.quiz-step__subtitle {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

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

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-color);
}

.form-select,
.form-input {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--bg-color);
    transition: all 0.3s ease;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
}

/* Custom Radio Cards */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.radio-card {
    cursor: pointer;
    position: relative;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card__content {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.radio-card__title {
    font-weight: 600;
    color: var(--text-color);
}

.radio-card__desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.radio-card input:checked+.radio-card__content {
    border-color: var(--primary-color);
    background-color: rgba(0, 180, 216, 0.05);
}

/* Controls */
.quiz-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.btn--outline:hover {
    border-color: var(--text-color);
    color: var(--text-color);
}

/* Sidebar */
.quiz__sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-box {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
}

.sidebar-box--highlight {
    background: var(--hero-bg);
    color: #fff;
    border: none;
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: inherit;
}

.sidebar-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.sidebar-box--highlight .sidebar-title {
    color: #fff;
}

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

.sidebar-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.sidebar-list iconify-icon {
    color: var(--primary-color);
    font-size: 1.2rem;
}

@media (max-width: 992px) {
    .quiz__container {
        grid-template-columns: 1fr;
    }

    .quiz__sidebar {
        order: -1;
        /* Show info first on mobile ? Or after? Usually after form is key, but context is good. Let's keep after for now or user can decide. */
        order: 1;
    }

    .quiz__sidebar {
        order: -1;
        /* Show info first on mobile ? Or after? Usually after form is key, but context is good. Let's keep after for now or user can decide. */
        order: 1;
    }
}

/* === ABOUT SECTION === */
.about {
    padding: 100px 0;
    background-color: #fff;
    /* Clean white to separate from potentially grey form or footer */
}

.about__header {
    margin-bottom: 60px;
}

.about__description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.125rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.trust-item {
    text-align: center;
    padding: 30px 20px;
    border-radius: 16px;
    background: var(--bg-color);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.trust-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.trust-item__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: rgba(0, 180, 216, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.trust-item__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}

.trust-item__text {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

@media (max-width: 992px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
}



/* === FAQ SECTION === */
.faq {
    padding: 100px 0;
    background-color: var(--bg-color);
    /* Light grey */
}

.faq__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.faq-item__header {
    width: 100%;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
}

.faq-item__question {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
}

.faq-item__header:hover .faq-item__question {
    color: var(--primary-color);
}

.faq-item__icon {
    font-size: 24px;
    color: var(--text-secondary);
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item__header[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.faq-item__header[aria-expanded="true"] .faq-item__question {
    color: var(--primary-color);
}

.faq-item__content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.faq-item__body {
    padding: 0 30px 30px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

/* === FOOTER === */
/* === FOOTER === */
.footer {
    padding: 60px 0 40px;
    background-color: var(--hero-bg);
    color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.footer__logo-img {
    height: 48px;
    width: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    /* Make logo white if it's not already transparent/white friendly */
    /* Or if logo has colors, maybe just keep it. Let's assume white text handles well or use filter. */
    /* If the logo is blue/grey, on blue bg it might be hard to see. 
       Let's try inverting it to represent "white" version or just trust it.
       Actually, user uploaded a blue/white logo. On Dark Blue bg, blue parts disappear.
       Let's add a brightness filter to make it pop or just leave it. 
       Safest is to put it in a white container or filter it to white. 
       Let's filter to white for a clean look. */
    filter: brightness(0) invert(1);
}

.footer__copy {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.6;
}

.footer__title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.footer__address p {
    margin-bottom: 12px;
    font-style: normal;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    /* Align icon with top of multi-line text if needed, or center */
    gap: 8px;
}

.footer__address iconify-icon {
    margin-top: 4px;
    /* Push icon down to align with first line of text */
}

.footer__link--telegram {
    margin-top: 8px;
    color: #fff;
}

.footer__link--telegram iconify-icon {
    font-size: 20px;
}

@media (max-width: 768px) {
    .footer__container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer__logo {
        display: inline-block;
    }

    .footer__links,
    .footer__address {
        align-items: center;
    }
}

/* === MODAL === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal__content {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal.active .modal__content {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

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

.modal__title {
    margin-bottom: 15px;
    color: var(--hero-bg);
    font-size: 1.5rem;
}

.modal__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}