/* Professional Light Medical DNA Theme */

:root {
    --bg-0: #f5f9ff;
    --bg-1: #edf5ff;
    --bg-2: #e6f4f7;
    --ink-900: #0c233f;
    --ink-700: #36506f;
    --ink-500: #5f7896;
    --line: #d8e6f2;
    --surface: rgba(255, 255, 255, 0.86);
    --surface-solid: #ffffff;
    --shadow-soft: 0 18px 42px rgba(24, 72, 122, 0.08);
    --shadow-hover: 0 22px 56px rgba(20, 92, 138, 0.16);
    --dna-cyan: #00b6d7;
    --dna-blue: #3d7bff;
    --dna-teal: #00b894;
}

@keyframes dnaSceneDrift {
    0%, 100% {
        transform: translateY(0) rotateX(18deg) rotateY(-14deg);
    }
    50% {
        transform: translateY(-12px) rotateX(20deg) rotateY(-6deg);
    }
}

@keyframes dnaSceneGlow {
    0%, 100% {
        filter: saturate(1) brightness(1);
    }
    50% {
        filter: saturate(1.18) brightness(1.08);
    }
}

@keyframes dnaCoilSpin {
    0% {
        transform: rotateY(0deg) rotateZ(-4deg);
    }
    100% {
        transform: rotateY(360deg) rotateZ(-4deg);
    }
}

@keyframes dnaRungPulse {
    0%, 100% {
        opacity: 0.44;
        filter: blur(0.2px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ink-900);
    background:
        radial-gradient(circle at 8% 12%, rgba(61, 123, 255, 0.16), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(0, 182, 215, 0.14), transparent 38%),
        linear-gradient(165deg, var(--bg-0) 0%, var(--bg-1) 56%, var(--bg-2) 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

.glass,
.glass-dark {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.glass:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.glass-dark {
    background: rgba(255, 255, 255, 0.96);
}

.accent-panel,
.accent-panel-secondary {
    border: 1px solid #cde4f6;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(230, 246, 255, 0.78));
    box-shadow: var(--shadow-soft);
}

.gradient-text {
    background: linear-gradient(110deg, var(--dna-blue) 0%, var(--dna-cyan) 55%, var(--dna-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(78, 137, 178, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 137, 178, 0.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    pointer-events: none;
}

.hero-category-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 1rem;
    border: 1px solid #cae4f8;
    padding: 1rem 1.1rem;
    font-weight: 800;
    color: var(--ink-900);
    box-shadow: 0 12px 28px rgba(21, 92, 142, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-category-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(21, 92, 142, 0.18);
}

.hero-category-primary { background: linear-gradient(130deg, #ffffff, #e8f5ff); }
.hero-category-secondary { background: linear-gradient(130deg, #ffffff, #eef9ff); }
.hero-category-tertiary { background: linear-gradient(130deg, #ffffff, #ecfcfa); }
.hero-category-quaternary { background: linear-gradient(130deg, #ffffff, #fff8ea); }

.dna-3d-scene {
    position: absolute;
    right: -4%;
    top: 5%;
    width: 46vw;
    max-width: 580px;
    min-width: 300px;
    height: 82%;
    pointer-events: none;
    perspective: 1200px;
    transform-style: preserve-3d;
    opacity: 0.92;
    z-index: 0;
    animation: dnaSceneDrift 9.5s ease-in-out infinite;
    filter: drop-shadow(0 18px 42px rgba(31, 103, 180, 0.28));
}

.dna-3d-scene::before {
    content: "";
    position: absolute;
    inset: 10% 2% 8%;
    background: radial-gradient(circle at 50% 40%, rgba(61, 123, 255, 0.2), rgba(61, 123, 255, 0));
    filter: blur(10px);
    transform: translateZ(-140px);
}

.dna-helix {
    position: absolute;
    left: 52%;
    top: 50%;
    width: 210px;
    height: 500px;
    transform-style: preserve-3d;
    animation: dnaCoilSpin 16s linear infinite;
}

.dna-helix-main {
    transform: translate(-50%, -50%) rotateX(72deg) rotateY(12deg);
}

.dna-helix-back {
    transform: translate(-50%, -50%) rotateX(72deg) rotateY(-22deg) scale(0.92);
    opacity: 0.28;
    filter: blur(0.2px);
    animation-duration: 20s;
    animation-direction: reverse;
}

.dna-rung {
    position: absolute;
    left: 50%;
    top: calc(12px + (var(--i) * 30px));
    width: 136px;
    height: 4px;
    border-radius: 999px;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateY(calc(var(--i) * 24deg)) translateZ(38px);
    background: linear-gradient(90deg, rgba(0, 182, 215, 0.95), rgba(61, 123, 255, 0.95));
    box-shadow:
        0 0 14px rgba(0, 182, 215, 0.42),
        0 0 22px rgba(61, 123, 255, 0.34);
    animation: dnaRungPulse 3.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
}

.dna-rung::before,
.dna-rung::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 8px;
    border-radius: 3px;
    transform: translateY(-50%);
}

.dna-rung::before {
    left: -8px;
    background: linear-gradient(120deg, #d9f3ff, #3d7bff 72%);
}

.dna-rung::after {
    right: -8px;
    background: linear-gradient(120deg, #d4fff8, #00b6d7 72%);
}

.dna-helix-main .dna-rung {
    animation-name: dnaRungPulse, dnaSceneGlow;
    animation-duration: 3.2s, 4.6s;
    animation-iteration-count: infinite, infinite;
}

.section-shell {
    position: relative;
}

.section-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.review-card {
    background: var(--surface-solid);
    border: 1px solid #d9e7f2;
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(23, 84, 132, 0.08);
}

.test-detail-shell .glass-dark {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #d6e8f6;
    box-shadow: 0 26px 58px rgba(16, 70, 118, 0.24);
}

.test-detail-shell .glass {
    background: #ffffff;
    border-color: #d7e8f4;
}

.test-detail-shell .text-white,
.test-detail-shell .text-white * {
    color: #102842 !important;
}

.test-detail-shell .text-gray-400,
.test-detail-shell .text-gray-400 * {
    color: #567089 !important;
}

.test-detail-shell .text-gray-500,
.test-detail-shell .text-gray-500 * {
    color: #6c8299 !important;
}

.test-detail-shell .text-gray-300,
.test-detail-shell .text-gray-300 * {
    color: #2f4d6b !important;
}

.test-detail-shell .divide-white\/5 {
    border-color: #e4eef5 !important;
}

.test-detail-shell .border-white\/10 {
    border-color: #dbe8f3 !important;
}

.test-detail-shell .hover\:bg-white\/5:hover {
    background: #f2f8ff !important;
}

.test-modal-title {
    color: #ecf6ff !important;
    text-shadow: 0 6px 18px rgba(6, 35, 62, 0.45);
}

.lab-chip {
    background: linear-gradient(140deg, #ffffff, #eff8ff);
    border: 1px solid #cfe5f7;
    color: var(--ink-700);
}

.filter-btn {
    border: 1px solid #cde2f4;
}

.test-card {
    animation: riseIn 0.45s ease both;
}

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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--dna-blue), var(--dna-cyan));
}

@media (max-width: 768px) {
    .glass:hover {
        transform: none;
    }

    .dna-3d-scene {
        width: 72vw;
        min-width: 220px;
        right: -20%;
        top: 16%;
        opacity: 0.42;
    }

    .dna-helix {
        height: 430px;
        width: 170px;
    }

    .dna-rung {
        width: 108px;
        transform: translateX(-50%) rotateY(calc(var(--i) * 24deg)) translateZ(28px);
    }
}