:root {
    --color-bg: #0a192f;
    --color-primary-text: #ccd6f6;
    --color-secondary-text: #8892b0;
    --color-gold: #D4AF37;
    --color-green: #64ffda;
    --color-blue: #57a6ff;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-primary-text);
}

.bg-pattern {
    background-image: url('https://r2.flowith.net/files/o/1755076705215-golden_honeycomb_pattern_dark_blue_background_index_2@1024x1024.png');
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}
.bg-pattern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(10, 25, 47, 0.9);
}
.bg-pattern > * {
    position: relative;
    z-index: 1;
}

.nav-link {
    @apply text-gray-300 hover:text-goldenrod transition-colors duration-300 relative py-2;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: width 0.3s ease-in-out;
}
.nav-link.active,
.nav-link:hover {
    color: var(--color-gold);
}
.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

.text-goldenrod { color: var(--color-gold); }
.text-eco-green { color: var(--color-green); }
.text-tech-blue { color: var(--color-blue); }
.bg-goldenrod { background-color: var(--color-gold); }

.page {
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden {
    display: none;
}

.section-title {
    @apply text-4xl md:text-5xl font-bold text-center text-white;
    position: relative;
    padding-bottom: 1rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--color-gold);
    border-radius: 2px;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

#trust-scroller img {
    height: 120px;
    margin: 0 2rem;
    filter: grayscale(100%) brightness(1.5);
    transition: filter 0.3s;
    object-fit: contain;
}
#trust-scroller img:hover {
    filter: grayscale(0%) brightness(1);
}

.hexagon-container {
    position: relative;
    width: 100%;
    padding-bottom: 86.6%; /* For aspect ratio of a regular hexagon */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: var(--color-gold);
    transition: transform 0.3s ease-in-out;
}

.hexagon-container:hover {
    transform: scale(1.05);
}

.hexagon-image {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon-link-wrapper {
    @apply relative flex items-center justify-center text-center p-4 transition-transform duration-300;
    height: 250px;
}

.hexagon-link-bg {
    @apply absolute inset-0 bg-blue-900/20 border border-blue-800/50 transition-all duration-300;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon-link-wrapper:hover .hexagon-link-bg {
    background-color: rgba(212, 175, 55, 0.1);
    border-color: var(--color-gold);
    transform: scale(1.05);
}

.hexagon-link-content {
    @apply relative z-10 flex flex-col items-center justify-center;
}


/* Accordion */
.accordion-item {
    @apply bg-blue-900/20 border border-blue-800/50 rounded-lg overflow-hidden;
}
.accordion-header {
    @apply w-full flex justify-between items-center p-5 text-lg font-semibold text-left text-white bg-blue-900/30 hover:bg-blue-900/50 transition-colors duration-300;
}
.accordion-icon {
    @apply transition-transform duration-300;
}
.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}
.accordion-content {
    @apply max-h-0 overflow-hidden transition-all duration-500 ease-in-out;
}
.accordion-content p {
    @apply p-5 text-gray-400 border-t border-blue-800/50;
}

/* Timeline */
.timeline {
    position: relative;
    list-style: none;
    padding-left: 1.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-gold);
}
.timeline li {
    position: relative;
    padding-bottom: 1rem;
}
.timeline li:last-child {
    padding-bottom: 0;
}
.timeline li::before {
    content: '';
    position: absolute;
    left: -0.375rem; /* (1.5rem / 2) - (2px / 2) approx */
    top: 5px;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-gold);
    border: 2px solid var(--color-bg);
}

.value-card {
    @apply bg-blue-900/20 p-6 rounded-lg border border-blue-800/50 text-white flex items-center justify-center text-center h-32 transition-all duration-300 hover:border-goldenrod hover:bg-blue-900/40;
}


.custom-ol {
    list-style: none;
    counter-reset: steps-counter;
    padding-left: 0;
}
.custom-ol li {
    counter-increment: steps-counter;
    display: flex;
    align-items: flex-start;
}
.custom-ol li::before {
    content: counter(steps-counter);
    @apply mr-4 flex-shrink-0 bg-goldenrod text-bg-dark font-bold w-8 h-8 rounded-full flex items-center justify-center;
}