@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --brand-dark: #123D70;
    --brand-darker: #0e315a;
    --brand-light: #ffffff;
    --brand-accent: #38bdf8; /* sky-400 */
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--brand-dark);
    color: var(--brand-light);
    font-family: 'Poppins', sans-serif;
}

#main-header.header-scrolled {
    background-color: rgba(14, 49, 90, 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.animated-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-image {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 25%);
    mask-image: linear-gradient(to top, transparent 0%, black 25%);
}

.section-image {
    -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}

.solution-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    height: 100%;
}

.solution-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.solution-card h3 {
    @apply text-xl font-bold mb-3 text-sky-300;
}

.solution-card p {
    @apply text-gray-300;
}

.value-item {
    @apply bg-white/5 p-6 rounded-lg border border-white/10 grid md:grid-cols-3 gap-4 items-center transition-all duration-300;
}

.value-item:hover {
    @apply bg-white/10 border-white/20;
}

.value-item h3 {
    @apply text-2xl font-bold text-sky-300;
}
.value-item h3 span {
    @apply text-lg font-normal text-gray-300;
}

.value-item div:last-child {
    @apply md:col-span-2 text-gray-300;
}

.advantage-item {
    @apply bg-white/5 p-6 rounded-2xl flex flex-col items-center text-center transition-all duration-300;
}

.advantage-item:hover {
    @apply bg-white/10 scale-105;
}

.advantage-icon {
    @apply bg-sky-500/20 text-sky-300 rounded-full h-16 w-16 flex items-center justify-center mb-6;
}

.advantage-icon i {
    @apply h-8 w-8;
}

strong {
    @apply font-semibold text-white;
}