html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.gradient-text{background:linear-gradient(90deg,#2563eb,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-grid{background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:45px 45px}
.glass{background:rgba(255,255,255,.88);backdrop-filter:blur(18px)}
.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}
.reveal.show{opacity:1;transform:none}
/* ==========================================
   ABOUT PAGE TECHNOLOGY ANIMATION
========================================== */

.about-tech-orbit {
    animation: aboutMainFloat 6s ease-in-out infinite;
}


/* Main floating movement */

@keyframes aboutMainFloat {

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

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

}


/* Cards */

.about-orbit-card {

    position: absolute;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 145px;

    padding: 12px 14px;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid #dbeafe;

    border-radius: 16px;

    box-shadow:
        0 15px 35px rgba(37, 99, 235, 0.12);

    backdrop-filter: blur(10px);
}


/* Icon */

.about-orbit-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;
}


.about-orbit-icon svg {

    width: 18px;
    height: 18px;

}


/* Card positions */

.about-card-1 {

    top: 5%;
    left: 8%;

    animation: aboutFloatOne 4.5s ease-in-out infinite;

}


.about-card-2 {

    top: 12%;
    right: -3%;

    animation: aboutFloatTwo 5s ease-in-out infinite;

}


.about-card-3 {

    top: 45%;
    right: -8%;

    animation: aboutFloatOne 5.5s ease-in-out infinite;

}


.about-card-4 {

    bottom: 5%;
    right: 5%;

    animation: aboutFloatTwo 4.6s ease-in-out infinite;

}


.about-card-5 {

    bottom: 8%;
    left: 3%;

    animation: aboutFloatOne 5.2s ease-in-out infinite;

}


.about-card-6 {

    top: 43%;
    left: -8%;

    animation: aboutFloatTwo 4.8s ease-in-out infinite;

}



/* Floating animations */

@keyframes aboutFloatOne {

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

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

}


@keyframes aboutFloatTwo {

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

    50% {
        transform: translateY(10px);
    }

}



/* Mobile handling */

@media (max-width: 1024px) {

    .about-orbit-card {
        min-width: 125px;
        padding: 10px;
    }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .about-tech-orbit,
    .about-orbit-card {

        animation: none !important;

    }

}