:root {
    --glass-bg: rgba(15, 23, 42, 0.5);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-soft: rgba(255, 255, 255, 0.09);
}

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    object-fit: cover;
}

.glass-panel {
    background: linear-gradient(140deg, var(--glass-bg), var(--glass-soft));
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 45px rgba(2, 6, 23, 0.28);
}

.section-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

.cta-green {
    background: #25d366;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 25px rgba(37, 211, 102, 0.35);
}

.carousel-track {
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.gradient-text {
    background: linear-gradient(90deg, #bae6fd, #93c5fd, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-green {
    background: linear-gradient(90deg, #34d399, #10b981, #6ee7b7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mock-bar {
    background: linear-gradient(to top, #0ea5e9, #7c3aed);
    border-radius: 4px 4px 0 0;
}

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-icon {
    transition: transform 0.2s ease;
}

.card-link {
    display: block;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.card-link:hover {
    transform: translateY(-3px);
    border-color: rgba(125, 211, 252, 0.45);
}

.nav-link {
    color: rgba(203, 213, 225, 0.9);
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: rgb(125, 211, 252);
}

.breadcrumb a {
    color: rgba(148, 163, 184, 0.95);
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: rgb(125, 211, 252);
}

#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#mobileMenu.open {
    max-height: 320px;
}