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

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out forwards;
}

/* Service Card Styles */
.service-card {
    @apply bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300;
}

.pricing-card {
    @apply bg-white rounded-3xl overflow-hidden shadow-lg border border-slate-100;
}

/* Hero Diagram Logic */
.hero-diagram-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-node {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    z-index: 10;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 45, 98, 0.15);
}

.node {
    position: absolute;
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.node .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.node:hover .icon-box {
    transform: scale(1.2) rotate(10deg);
}

/* Tooltip Labels */
.node::after {
    content: attr(data-label);
    position: absolute;
    bottom: -25px;
    font-size: 11px;
    font-weight: 800;
    color: #002D62;
    white-space: nowrap;
    opacity: 0.8;
}

/* Circle Layout Math */
.node-1 { transform: rotate(0deg) translate(160px) rotate(0deg); }
.node-2 { transform: rotate(45deg) translate(160px) rotate(-45deg); }
.node-3 { transform: rotate(90deg) translate(160px) rotate(-90deg); }
.node-4 { transform: rotate(135deg) translate(160px) rotate(-135deg); }
.node-5 { transform: rotate(180deg) translate(160px) rotate(-180deg); }
.node-6 { transform: rotate(225deg) translate(160px) rotate(-225deg); }
.node-7 { transform: rotate(270deg) translate(160px) rotate(-270deg); }
.node-8 { transform: rotate(315deg) translate(160px) rotate(-315deg); }

.lines-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Responsive adjustments for diagram */
@media (max-width: 640px) {
    .central-node { width: 100px; height: 100px; }
    .node { width: 45px; height: 45px; }
    .node-1 { transform: rotate(0deg) translate(110px) rotate(0deg); }
    .node-2 { transform: rotate(45deg) translate(110px) rotate(-45deg); }
    .node-3 { transform: rotate(90deg) translate(110px) rotate(-90deg); }
    .node-4 { transform: rotate(135deg) translate(110px) rotate(-135deg); }
    .node-5 { transform: rotate(180deg) translate(110px) rotate(-180deg); }
    .node-6 { transform: rotate(225deg) translate(110px) rotate(-225deg); }
    .node-7 { transform: rotate(270deg) translate(110px) rotate(-270deg); }
    .node-8 { transform: rotate(315deg) translate(110px) rotate(-315deg); }
}