:root {
    --page-bg: #eef1f5;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #1f2937;
    --muted: #4b5563;
    --heading: #111827;
    --border: #d7dde6;
    --accent: #2563EB;
    --accent-dark: #1D4ED8;
}

body{
    background: var(--page-bg);
    color: var(--text);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
}

.main-heading {
    text-align: center;
    color: var(--heading);
    font-size: 2.5rem;
    font-weight: 600;
    margin: 20px 0 40px;
    opacity: 0; /* Initially hidden to allow for animation */
    animation: heading-load-animation 1.2s ease-out 0.5s forwards; /* Delayed start for sequential effect */
}
.sub-heading{
    text-align: center;
    color: var(--muted);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 20px 0 40px;
    opacity: 0; /* Initially hidden to allow for animation */
    animation: heading-load-animation 1.2s ease-out 0.7s forwards; /* Delayed start for sequential effect */

}
.main-text {
    text-align: center;
    color: var(--muted);
    font-size: 1rem; /* 18px */
    line-height: 1.75; /* 28px */
    max-width: 800px;
    margin: 0 auto 40px;
    opacity: 0; /* Initially hidden to allow for animation */
    animation: heading-load-animation 1.2s ease-out 0.9s forwards; /* Delayed start for sequential effect */
}


@keyframes heading-load-animation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 
.nav-logo {
    position: absolute;
    top: 18px;
    left: 28px;
    z-index: 20;
    display: block;
    width: 185px;
    height: auto;
    border-radius: 20%;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: logo-load-animation 1s ease-out forwards, logo-float 4s ease-in-out 1s infinite;
    transform-origin: left center;
}

.nav-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
}
 
/* This defines the animation steps */
@keyframes logo-load-animation {
    from {
        opacity: 0;
        transform: scale(0.85) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes logo-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes nav-load-animation {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav{

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 122px;
    padding: 24px 24px 24px 235px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    transition: transform 10s ease;
    border: none;
    animation: nav-load-animation 1s ease-out forwards;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
    gap: 1rem; /* Add space between navigation items */
    flex-wrap: wrap;
}

.nav li {
    position: relative;
}

.nav a {
    color: var(--text);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.nav a:hover {
    background-color: #e2e8f0;
    transform: translateY(-3px);
}
.nav a.active {
    background-color: var(--accent); /* Active link color */
    color: #fff; /* Active link text color */
}
.nav a.active:hover {
    background-color: var(--accent-dark); /* Darker shade for active link on hover */
    transform: translateY(0); /* No lift effect on active link */
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 220px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 12px;
    color: var(--text);
}
.nav a:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.5); /* Custom focus ring */
}

/* Footer Styles */
footer {
    background-color: var(--surface);
    color: var(--muted);
    padding: 50px 20px;
    margin-top: 80px; /* Space above the footer */
    border-top: 1px solid var(--border);
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.footer-section {
    flex: 1;
    min-width: 220px; /* Ensures sections don't get too squished on smaller screens */
}

.footer-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--heading);
    position: relative;
    padding-bottom: 10px;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #3B82F6; /* A blue accent color */
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section a, .social-links a {
    color: #CBD5E1; /* slate-300 */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover, .social-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-logo {
    width: 100px;
    height: auto;
    border-radius: 15%;
    margin-bottom: 20px;
}

.copyright {
    font-size: 0.875rem;
    color: #94A3B8; /* slate-400 */
}

.social-links a {
    margin-right: 15px;
}
.nav a:focus-visible {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.5); /* Custom focus ring */
}

    /* Mission Section */
.mission-section {
    max-width: 1200px;
    margin: 80px auto 0; /* Space above, no space below to group with Vision section */
    padding: 0 20px;
    text-align: center;
}

.mission-heading {
    color: #CBD5E1; /* slate-300 */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    opacity: 0;
    animation: heading-load-animation 1.2s ease-out 1.1s forwards;
}

.mission-statement {
    color: #E2E8F0; /* slate-200 */
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    animation: heading-load-animation 1.2s ease-out 1.3s forwards;
    font-style: italic;
    text-align: center;
}

/* Image Showcase Section */
.image-showcase {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

.showcase-heading {
    color: #CBD5E1; /* slate-300 */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
    /* Animation to match other headings */
    opacity: 0;
    animation: heading-load-animation 1.2s ease-out 1.5s forwards;
}

.vision-statement {
    color: #E2E8F0; /* slate-200 */
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 700px; /* Slightly narrower than main text */
    margin: -20px auto 50px; /* Negative top margin to pull it closer to the heading, more bottom margin */
    opacity: 0;
    animation: heading-load-animation 1.2s ease-out 1.7s forwards;
    font-style: italic;
    text-align: center;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.gallery-item {
    position: relative;
    flex-basis: 350px; /* Control the base size of items */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 40px 20px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item:hover .overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Generic Page Styles for subpages */
.page-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    color: #CBD5E1;
    text-align: center;
    min-height: calc(100vh - 450px); /* Ensure content pushes footer down on short pages */
}

.page-container .main-heading,
.page-container .main-text {
    opacity: 1;
    animation: none;
}

/* About Page Specific Styles */
.about-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 60px 0;
    text-align: left;
}

.about-section.reverse {
    flex-direction: row-reverse;
}

.about-content {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

.about-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #E2E8F0; /* slate-200 */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.about-content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #3B82F6; /* A blue accent color */
}

.about-content p {
    color: #CBD5E1; /* slate-300 */
    line-height: 1.75;
    font-size: 1rem;
}

.about-image {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Services Page Specific Styles */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    text-align: left;
}

.service-card {
    background-color: #1a2436; /* Darker card background */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.service-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.service-content {
    padding: 25px;
    flex-grow: 1; /* Allows content to fill available space */
}

.service-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #E2E8F0; /* slate-200 */
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.service-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 3px;
    background-color: #3B82F6; /* Blue accent */
}

.service-content p {
    color: #CBD5E1; /* slate-300 */
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Address Showcase & Cards (for Services & Contact pages) */
.address-showcase {
    text-align: center;
    margin: 100px auto;
    padding: 0 20px;
    max-width: 1200px;
}

.address-heading {
    color: #CBD5E1; /* slate-300 */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.address-card {
    background-color: #1a2436;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: left;
    border: 1px solid #334155;
    opacity: 0; /* Initially hidden for animation */
    animation: heading-load-animation 1s ease-out forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.address-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Staggered animation for multiple cards */
.address-card:nth-child(1) {
    animation-delay: 0.2s;
}

.address-card:nth-child(2) {
    animation-delay: 0.4s;
}

.address-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #E2E8F0; /* slate-200 */
    margin-bottom: 15px;
}

.address-card p {
    color: #E2E8F0; /* slate-200 */
    line-height: 1.6;
    margin-bottom: 10px;
}

.address-card a {
    color: #60A5FA; /* Light blue for links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.address-card a:hover {
    color: #3B82F6;
    text-decoration: underline;
}

/* Contact Page Specific Styles */
.contact-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    text-align: left;
    margin-top: 60px;
}

.contact-form-container, .address-container {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
}

.address-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form {
    background-color: #1a2436;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #CBD5E1; /* slate-300 */
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #2c3a52;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #E2E8F0; /* slate-200 */
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 120px;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background-color: #3B82F6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse-shadow-animation 2.5s infinite 2s;
}

.btn-submit:hover {
    background-color: #2563EB;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    animation: none; /* Stop the pulse on hover to apply a static shadow */
}

@keyframes pulse-shadow-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Partner Page Grid Styles */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 60px;
    text-align: left;
}

.partner-card {
    background-color: #1a2436;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: heading-load-animation 1s ease-out forwards;
}

.partner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.partner-card:hover img {
    transform: scale(1.05);
}

.partner-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.partner-content {
    padding: 25px;
    flex-grow: 1;
}

.partner-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.partner-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 3px;
    background-color: #3B82F6;
}

.partner-content p {
    color: #CBD5E1;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Staggered animation for partner cards */
.partner-card:nth-child(1) { animation-delay: 0.1s; }
.partner-card:nth-child(2) { animation-delay: 0.2s; }
.partner-card:nth-child(3) { animation-delay: 0.3s; }
.partner-card:nth-child(4) { animation-delay: 0.4s; }
.partner-card:nth-child(5) { animation-delay: 0.5s; }
.partner-card:nth-child(6) { animation-delay: 0.6s; }

/* Policy Page Styles */
.policy-content {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.policy-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #CBD5E1; /* slate-300 */
}

/* Testimonials Section */
.testimonials-section {
    max-width: 100%; /* Allow it to span full width */
    margin: 100px 0;
    padding: 0;
    text-align: center;
}

.testimonials-heading {
    color: #CBD5E1; /* slate-300 */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 50px;
    opacity: 0;
    animation: heading-load-animation 1.2s ease-out 0.5s forwards;
}

.testimonials-container {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.testimonials-container:hover .testimonials-list {
    animation-play-state: paused;
}

.testimonials-list {
    --gap: 20px;
    display: flex;
    gap: var(--gap);
    list-style: none;
    padding: 20px 0;
    margin: 0;
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - (var(--gap) / 2)));
    }
}

.testimonial-card {
    background-color: #1a2436;
    border: 1px solid #334155;
    border-radius: 15px;
    padding: 30px;
    width: 380px;
    flex-shrink: 0;
    text-align: left;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.testimonial-card blockquote {
    margin: 0;
    padding: 0 0 0 20px;
    color: #CBD5E1;
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    border-left: 3px solid #3B82F6;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.author-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #334155;
}

.author-name {
    color: #E2E8F0;
    font-weight: 600;
    margin: 0;
}

.author-title {
    color: #94A3B8;
    font-size: 0.875rem;
    margin: 0;
}

/* Download Button Styles */
.download-button-container {
    margin-top: 30px;
    text-align: center;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(45deg, #2196F3, #00BCD4);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.download-text {
    margin-right: 10px;
}

.download-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.download-btn:hover .download-icon {
    transform: translateY(3px);
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #1a2436;
}

.nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.nav-links a:hover {
    background-color: #334155;
    transform: translateY(-3px);
}

/* Light gray theme and new page surfaces */
.page-container,
.mission-heading,
.showcase-heading,
.address-heading,
.testimonials-heading,
.about-content h2,
.service-content h3,
.partner-content h3,
.address-card h3,
.author-name {
    color: var(--heading);
}

.mission-statement,
.vision-statement,
.about-content p,
.service-content p,
.partner-content p,
.policy-content p,
.address-card p,
.testimonial-card blockquote,
.footer-section a,
.social-links a,
.main-text {
    color: var(--muted);
}

.service-card,
.partner-card,
.address-card,
.contact-form,
.testimonial-card,
.specialization-card,
.feature-panel {
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
}

.service-card:hover,
.partner-card:hover,
.address-card:hover,
.specialization-card:hover,
.feature-panel:hover {
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.13);
}

.service-content h3::after,
.partner-content h3::after,
.about-content h2::after,
.footer-section h4::after,
.testimonial-card blockquote {
    border-color: var(--accent);
}

.service-content h3::after,
.partner-content h3::after,
.about-content h2::after,
.footer-section h4::after {
    background-color: var(--accent);
}

.form-group label,
.author-title,
.copyright {
    color: var(--muted);
}

.form-group input,
.form-group textarea {
    background-color: var(--surface-soft);
    border-color: var(--border);
    color: var(--text);
}

.gallery-item,
.about-image img {
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.13);
}

.home-hero {
    max-width: 1120px;
    margin: 60px auto 80px;
    padding: 0 20px;
    text-align: center;
}

.home-hero .main-heading {
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    margin-bottom: 14px;
}

.home-hero .sub-heading {
    max-width: 760px;
    margin: 0 auto 26px;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 500;
}

.home-hero .motto-line {
    display: inline-block;
    max-width: 900px;
    padding: 10px 18px;
    color: #0f172a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.35rem, 2.7vw, 2.15rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
    background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(20,184,166,0.12));
    border: 1px solid rgba(37,99,235,0.18);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-secondary {
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--surface);
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-3px);
}

.btn-secondary:hover {
    background: var(--accent);
    color: #fff;
}

.specialization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 54px;
    text-align: left;
}

.specialization-card,
.feature-panel {
    border-radius: 12px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.specialization-card:hover,
.feature-panel:hover {
    transform: translateY(-8px);
}

.specialization-card h2,
.feature-panel h2,
.feature-panel h3 {
    color: var(--heading);
    margin-top: 0;
}

.specialization-card p,
.feature-panel p,
.feature-panel li {
    color: var(--muted);
    line-height: 1.7;
}

.specialization-card a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.feature-list {
    display: grid;
    gap: 18px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.feature-list li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 18px;
}

@media (max-width: 820px) {
    .nav-logo {
        position: relative;
        top: auto;
        left: auto;
        width: 180px;
        margin: 20px 0 8px 18px;
    }

    .nav {
        min-height: auto;
        padding: 18px;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        margin-top: 8px;
    }
}

/* Specialization detail pages */
.specialization-detail {
    max-width: 1180px;
    text-align: left;
}

.specialization-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 42px;
    align-items: center;
    margin: 36px 0 44px;
}

.hero-copy .main-heading,
.hero-copy .main-text {
    text-align: left;
}

.hero-copy .main-heading {
    margin-bottom: 16px;
}

.eyebrow {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.hero-badges,
.industry-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-badges span,
.industry-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.visual-gallery-section {
    margin: 30px 0;
}

.section-intro {
    max-width: 780px;
    margin-bottom: 24px;
}

.section-intro h2 {
    color: var(--heading);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    margin: 0 0 12px;
}

.section-intro p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

.visual-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.image-card {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15,23,42,0.12);
    transform-style: preserve-3d;
    animation: imageCardFloat 6s ease-in-out infinite;
}

.image-card:nth-child(2) {
    animation-delay: 0.35s;
}

.image-card:nth-child(3) {
    animation-delay: 0.7s;
}

.image-card img {
    width: 100%;
    height: 240px;
    display: block;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.02);
    transform: scale(1.04);
    transition: transform 0.55s ease, filter 0.55s ease;
}

.image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, transparent 28%, rgba(255,255,255,0.94) 62%),
        radial-gradient(circle at 18% 18%, rgba(37,99,235,0.18), transparent 28%);
    pointer-events: none;
}

.image-card div {
    position: relative;
    z-index: 2;
    padding: 22px;
}

.image-card h3 {
    color: var(--heading);
    margin: 0 0 10px;
    font-size: 1.25rem;
}

.image-card p {
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.image-card:hover img {
    transform: scale(1.11);
    filter: saturate(1.06) contrast(1.04);
}

.talent-gallery .image-card:nth-child(1) {
    transform: rotateZ(-1.2deg);
}

.talent-gallery .image-card:nth-child(2) {
    transform: translateY(18px) rotateZ(1deg);
}

.talent-gallery .image-card:nth-child(3) {
    transform: rotateZ(-0.5deg);
}

.product-gallery .image-card:nth-child(1) {
    transform: rotateX(1deg) rotateZ(1deg);
}

.product-gallery .image-card:nth-child(2) {
    transform: translateY(18px) rotateZ(-1deg);
}

.product-gallery .image-card:nth-child(3) {
    transform: rotateX(-1deg) rotateZ(0.8deg);
}

.ai-3d-stage {
    position: relative;
    min-height: 390px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,250,252,0.72)),
        radial-gradient(circle at 28% 20%, rgba(37,99,235,0.16), transparent 32%),
        radial-gradient(circle at 74% 70%, rgba(20,184,166,0.18), transparent 30%);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.13);
    overflow: hidden;
    perspective: 900px;
}

.ai-3d-stage::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 12px;
    background-image:
        linear-gradient(rgba(31,41,55,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,41,55,0.08) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: rotateX(58deg) rotateZ(-18deg) translateY(58px);
    transform-origin: center bottom;
}

.orbit {
    position: absolute;
    inset: 58px;
    border: 2px solid rgba(37,99,235,0.22);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-one {
    animation: orbitTilt 9s linear infinite;
}

.orbit-two {
    inset: 88px 42px;
    border-color: rgba(20,184,166,0.24);
    animation: orbitTiltReverse 11s linear infinite;
}

.talent-core {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border-radius: 26px;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    color: #fff;
    box-shadow: 0 22px 42px rgba(37, 99, 235, 0.32);
    transform: translate(-50%, -50%) rotateX(18deg) rotateY(-22deg);
    animation: cubeFloat 4.8s ease-in-out infinite;
}

.talent-core span {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.talent-core strong {
    font-size: 2.25rem;
    line-height: 1;
}

.talent-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 96px;
    height: 62px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 14px;
    background: rgba(255,255,255,0.94);
    color: var(--heading);
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(15,23,42,0.13);
    transform: rotateX(18deg) rotateY(-16deg);
}

.node-source {
    left: 34px;
    top: 82px;
    animation: nodeFloat 5.2s ease-in-out infinite;
}

.node-screen {
    right: 42px;
    top: 64px;
    animation: nodeFloat 4.7s ease-in-out 0.4s infinite;
}

.node-hire {
    right: 86px;
    bottom: 56px;
    animation: nodeFloat 5s ease-in-out 0.7s infinite;
}

.wire,
.data-line {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.85), transparent);
    transform-origin: left center;
    animation: dataPulse 2.6s ease-in-out infinite;
}

.wire-a {
    left: 112px;
    top: 144px;
    width: 170px;
    transform: rotate(18deg);
}

.wire-b {
    right: 100px;
    top: 134px;
    width: 160px;
    transform: rotate(158deg);
}

.wire-c {
    left: 226px;
    bottom: 118px;
    width: 190px;
    transform: rotate(22deg);
}

.split-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
    margin: 28px 0;
}

.visual-split {
    align-items: center;
}

.compact-list {
    display: grid;
    gap: 12px;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.7;
}

.sketch-card {
    position: relative;
    min-height: 360px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.75)),
        radial-gradient(circle at 30% 30%, rgba(37,99,235,0.13), transparent 32%),
        radial-gradient(circle at 76% 74%, rgba(20,184,166,0.14), transparent 30%);
    box-shadow: 0 20px 44px rgba(15,23,42,0.11);
    overflow: hidden;
    perspective: 900px;
}

.hci-blueprint {
    position: relative;
    min-height: 430px;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.76)),
        radial-gradient(circle at 18% 24%, rgba(37,99,235,0.18), transparent 30%),
        radial-gradient(circle at 80% 78%, rgba(20,184,166,0.18), transparent 32%);
    box-shadow: 0 22px 48px rgba(15,23,42,0.13);
    perspective: 1000px;
}

.hci-blueprint::before {
    content: "";
    position: absolute;
    inset: 20px;
    border-radius: 14px;
    background-image:
        linear-gradient(rgba(31,41,55,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,41,55,0.07) 1px, transparent 1px);
    background-size: 30px 30px;
    transform: rotateX(62deg) rotateZ(-20deg) translateY(64px);
    transform-origin: center bottom;
}

.screen-panel {
    position: absolute;
    z-index: 2;
    width: 190px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 16px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 18px 34px rgba(15,23,42,0.13);
    transform: rotateX(18deg) rotateY(-18deg);
    animation: screenHover 5.2s ease-in-out infinite;
}

.screen-panel span {
    display: block;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.screen-panel strong {
    display: block;
    color: var(--heading);
    font-size: 1.2rem;
    margin: 10px 0 6px;
}

.screen-panel small {
    color: var(--muted);
    line-height: 1.4;
}

.candidate-screen,
.user-screen {
    left: 28px;
    top: 48px;
}

.recruiter-screen,
.model-screen {
    right: 34px;
    top: 128px;
    animation-delay: 0.35s;
}

.manager-screen,
.agent-screen {
    left: 82px;
    bottom: 44px;
    animation-delay: 0.7s;
}

.blueprint-line {
    position: absolute;
    z-index: 1;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.8), rgba(20,184,166,0.75), transparent);
    transform-origin: left center;
    animation: dataPulse 2.4s ease-in-out infinite;
}

.line-alpha {
    left: 182px;
    top: 138px;
    width: 210px;
    transform: rotate(16deg);
}

.line-beta {
    left: 190px;
    bottom: 138px;
    width: 250px;
    transform: rotate(-28deg);
    animation-delay: 0.5s;
}

.blueprint-pulse {
    position: absolute;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 8px rgba(37,99,235,0.12);
    animation: pulseTravel 4.2s linear infinite;
}

.pulse-one {
    left: 178px;
    top: 128px;
}

.pulse-two {
    left: 220px;
    bottom: 136px;
    animation-delay: 1.1s;
}

.product-blueprint .screen-panel {
    border-color: rgba(20,184,166,0.28);
}

.product-blueprint .screen-panel span {
    color: #0f766e;
}

.hiring-stack {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78%, 320px);
    height: 240px;
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-28deg);
    transform-style: preserve-3d;
}

.stack-layer {
    position: absolute;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    height: 58px;
    border: 1px solid rgba(37,99,235,0.26);
    border-radius: 12px;
    background: rgba(255,255,255,0.92);
    color: var(--heading);
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(15,23,42,0.12);
    animation: stackLift 4s ease-in-out infinite;
}

.stack-layer:nth-child(1) { top: 0; }
.stack-layer:nth-child(2) { top: 54px; animation-delay: 0.2s; }
.stack-layer:nth-child(3) { top: 108px; animation-delay: 0.4s; }
.stack-layer:nth-child(4) { top: 162px; animation-delay: 0.6s; }

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.process-grid div {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.process-grid h3 {
    margin: 0 0 8px;
    color: var(--heading);
}

.process-grid p {
    margin: 0;
}

.product-stage {
    transform-style: preserve-3d;
}

.product-cube {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 22px 44px rgba(37,99,235,0.28);
    transform-style: preserve-3d;
}

.cube-main {
    left: 50%;
    top: 50%;
    width: 126px;
    height: 126px;
    font-size: 2.2rem;
    transform: translate(-50%, -50%) rotateX(24deg) rotateY(-28deg);
    animation: cubeFloat 4.6s ease-in-out infinite;
}

.cube-ml,
.cube-genai,
.cube-agent {
    width: 86px;
    height: 70px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(37,99,235,0.24);
    color: var(--heading);
}

.cube-ml {
    left: 52px;
    top: 72px;
    animation: nodeFloat 4.8s ease-in-out infinite;
}

.cube-genai {
    right: 46px;
    top: 88px;
    animation: nodeFloat 5.1s ease-in-out 0.25s infinite;
}

.cube-agent {
    right: 92px;
    bottom: 62px;
    animation: nodeFloat 4.4s ease-in-out 0.5s infinite;
}

.product-ring {
    position: absolute;
    inset: 62px 44px;
    border: 3px solid rgba(37,99,235,0.18);
    border-radius: 50%;
    transform: rotateX(66deg) rotateZ(-16deg);
    animation: orbitTilt 10s linear infinite;
}

.line-one {
    left: 106px;
    top: 130px;
    width: 180px;
    transform: rotate(20deg);
}

.line-two {
    right: 92px;
    top: 146px;
    width: 170px;
    transform: rotate(154deg);
}

.line-three {
    left: 220px;
    bottom: 112px;
    width: 180px;
    transform: rotate(20deg);
}

.product-map {
    min-height: 420px;
}

.domain-core {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    padding: 18px;
    border-radius: 30px;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    color: #fff;
    font-weight: 900;
    text-align: center;
    transform: translate(-50%, -50%) rotateX(18deg) rotateY(-20deg);
    box-shadow: 0 22px 42px rgba(37,99,235,0.30);
    animation: cubeFloat 5s ease-in-out infinite;
}

.domain-orbit span {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 94px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    color: var(--heading);
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15,23,42,0.10);
    animation: domainFloat 4.8s ease-in-out infinite;
}

.domain-orbit span:nth-child(1) { left: 36px; top: 54px; }
.domain-orbit span:nth-child(2) { right: 32px; top: 64px; animation-delay: 0.2s; }
.domain-orbit span:nth-child(3) { left: 24px; top: 186px; animation-delay: 0.4s; }
.domain-orbit span:nth-child(4) { right: 46px; top: 194px; animation-delay: 0.6s; }
.domain-orbit span:nth-child(5) { left: 62px; bottom: 52px; animation-delay: 0.8s; }
.domain-orbit span:nth-child(6) { right: 28px; bottom: 62px; animation-delay: 1s; }
.domain-orbit span:nth-child(7) { left: 50%; top: 22px; transform: translateX(-50%); animation-delay: 1.2s; }

@keyframes orbitTilt {
    from { transform: rotateX(64deg) rotateZ(0deg); }
    to { transform: rotateX(64deg) rotateZ(360deg); }
}

@keyframes orbitTiltReverse {
    from { transform: rotateX(58deg) rotateZ(360deg); }
    to { transform: rotateX(58deg) rotateZ(0deg); }
}

@keyframes cubeFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

@keyframes nodeFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes dataPulse {
    0%, 100% { opacity: 0.35; filter: saturate(1); }
    50% { opacity: 1; filter: saturate(1.5); }
}

@keyframes stackLift {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes domainFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes imageCardFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes screenHover {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

@keyframes pulseTravel {
    0% { opacity: 0; translate: 0 0; }
    12% { opacity: 1; }
    60% { opacity: 1; translate: 150px 34px; }
    100% { opacity: 0; translate: 230px -28px; }
}

@media (max-width: 920px) {
    .specialization-hero,
    .split-section,
    .visual-gallery {
        grid-template-columns: 1fr;
    }

    .ai-3d-stage,
    .sketch-card,
    .hci-blueprint {
        min-height: 340px;
    }

    .image-card,
    .talent-gallery .image-card:nth-child(1),
    .talent-gallery .image-card:nth-child(2),
    .talent-gallery .image-card:nth-child(3),
    .product-gallery .image-card:nth-child(1),
    .product-gallery .image-card:nth-child(2),
    .product-gallery .image-card:nth-child(3) {
        transform: none;
    }
}

@media (max-width: 560px) {
    .ai-3d-stage,
    .sketch-card,
    .hci-blueprint {
        min-height: 300px;
    }

    .talent-node,
    .cube-ml,
    .cube-genai,
    .cube-agent {
        width: 78px;
        height: 54px;
        font-size: 0.78rem;
    }

    .talent-core,
    .cube-main {
        width: 108px;
        height: 108px;
    }

    .domain-orbit span {
        min-width: 76px;
        font-size: 0.72rem;
    }

    .screen-panel {
        width: 150px;
        min-height: 92px;
        padding: 13px;
    }

    .recruiter-screen,
    .model-screen {
        right: 14px;
    }

    .manager-screen,
    .agent-screen {
        left: 28px;
    }
}

/* AI Lab, Case Studies, and Industries */
.ai-lab-page,
.case-page,
.industries-page {
    max-width: 1180px;
    text-align: left;
}

.lab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: 36px;
    align-items: center;
    margin: 42px 0;
}

.lab-hero .main-heading,
.lab-hero .main-text {
    text-align: left;
}

.lab-orbit-visual {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.76)),
        radial-gradient(circle at 24% 20%, rgba(37,99,235,0.18), transparent 30%),
        radial-gradient(circle at 78% 76%, rgba(20,184,166,0.18), transparent 32%);
    box-shadow: 0 24px 52px rgba(15,23,42,0.13);
    perspective: 1000px;
}

.lab-orbit-visual::before {
    content: "";
    position: absolute;
    inset: 22px;
    background-image:
        linear-gradient(rgba(31,41,55,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,41,55,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    transform: rotateX(62deg) rotateZ(-20deg) translateY(64px);
    transform-origin: center bottom;
}

.lab-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 146px;
    height: 146px;
    border-radius: 32px;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    color: #fff;
    font-weight: 900;
    text-align: center;
    transform: translate(-50%, -50%) rotateX(18deg) rotateY(-20deg);
    box-shadow: 0 22px 42px rgba(37,99,235,0.30);
    animation: cubeFloat 4.8s ease-in-out infinite;
}

.lab-ring {
    position: absolute;
    border: 2px solid rgba(37,99,235,0.22);
    border-radius: 50%;
}

.lab-ring-a {
    inset: 64px;
    animation: orbitTilt 9s linear infinite;
}

.lab-ring-b {
    inset: 92px 42px;
    border-color: rgba(20,184,166,0.24);
    animation: orbitTiltReverse 11s linear infinite;
}

.lab-node {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    min-width: 86px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: var(--heading);
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15,23,42,0.13);
    animation: nodeFloat 4.8s ease-in-out infinite;
}

.lab-node:nth-of-type(1) { left: 36px; top: 62px; }
.lab-node:nth-of-type(2) { right: 38px; top: 82px; animation-delay: 0.2s; }
.lab-node:nth-of-type(3) { left: 48px; bottom: 86px; animation-delay: 0.4s; }
.lab-node:nth-of-type(4) { right: 42px; bottom: 78px; animation-delay: 0.6s; }
.lab-node:nth-of-type(5) { left: 50%; top: 28px; transform: translateX(-50%); animation-delay: 0.8s; }

.trend-panel,
.lab-roadmap {
    margin: 34px 0;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.86);
    box-shadow: 0 18px 42px rgba(15,23,42,0.10);
}

.trend-panel h2,
.lab-roadmap h2 {
    color: var(--heading);
    margin-top: 0;
}

.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.trend-grid div {
    padding: 18px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    line-height: 1.6;
}

.trend-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.trend-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.lab-capability-grid,
.case-grid,
.industry-grid-large {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 34px 0;
}

.lab-card,
.case-card,
.industry-grid-large article {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15,23,42,0.11);
    animation: imageCardFloat 6s ease-in-out infinite;
}

.lab-card {
    padding: 24px;
}

.lab-card h2,
.case-card h2,
.industry-grid-large h2 {
    color: var(--heading);
}

.lab-card p,
.case-card p,
.industry-grid-large p,
.lab-card li {
    color: var(--muted);
    line-height: 1.65;
}

.lab-card ul {
    padding-left: 18px;
}

.case-card img,
.industry-grid-large img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 0.55s ease;
}

.case-card:hover img,
.industry-grid-large article:hover img {
    transform: scale(1.11);
}

.case-card div,
.industry-grid-large article {
    padding-bottom: 0;
}

.case-card div {
    padding: 22px;
}

.case-card span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37,99,235,0.10);
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.industry-grid-large article h2,
.industry-grid-large article p {
    padding-left: 22px;
    padding-right: 22px;
}

.industry-grid-large article p {
    padding-bottom: 22px;
}

.roadmap-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.roadmap-steps span {
    display: grid;
    place-items: center;
    min-height: 62px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(20,184,166,0.10));
    color: var(--heading);
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(15,23,42,0.08);
}

@media (max-width: 980px) {
    .lab-hero,
    .lab-capability-grid,
    .case-grid,
    .industry-grid-large {
        grid-template-columns: 1fr;
    }

    .roadmap-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* News & Podcast page */
.news-page {
    max-width: 1180px;
    text-align: left;
}

.news-hero {
    margin: 42px 0 48px;
    text-align: center;
}

.news-hero .main-heading,
.news-hero .main-text {
    text-align: center;
}

.news-grid-section {
    margin: 30px 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.news-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15,23,42,0.11);
    animation: imageCardFloat 6s ease-in-out infinite;
}

.news-card:nth-child(2),
.news-card:nth-child(5) {
    animation-delay: 0.35s;
}

.news-card:nth-child(3),
.news-card:nth-child(6) {
    animation-delay: 0.7s;
}

.news-card img {
    width: 100%;
    height: 190px;
    display: block;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 0.55s ease;
}

.news-card:hover img {
    transform: scale(1.11);
}

.news-card div {
    padding: 22px;
}

.news-tag {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37,99,235,0.10);
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.news-card h3 {
    color: var(--heading);
    font-size: 1.18rem;
    margin: 14px 0 10px;
}

.news-card p {
    color: var(--muted);
    line-height: 1.65;
}

.news-card a {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.news-image-wall {
    margin: 42px 0;
}

.image-wall-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.image-wall-grid article {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.12);
    animation: imageCardFloat 6s ease-in-out infinite;
}

.image-wall-grid article:nth-child(2) { animation-delay: 0.25s; }
.image-wall-grid article:nth-child(3) { animation-delay: 0.5s; }
.image-wall-grid article:nth-child(4) { animation-delay: 0.75s; }

.image-wall-grid img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: block;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 0.55s ease;
}

.image-wall-grid article:hover img {
    transform: scale(1.12);
}

.image-wall-grid article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 32%, rgba(15,23,42,0.78));
}

.image-wall-grid span {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    color: #fff;
    font-weight: 900;
}

.podcast-feature,
.ats-showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 30px;
    align-items: center;
    margin: 42px 0;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.84);
    box-shadow: 0 18px 42px rgba(15,23,42,0.10);
}

.podcast-copy h2,
.ats-showcase h2 {
    color: var(--heading);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin: 0 0 14px;
}

.podcast-copy p,
.ats-showcase p {
    color: var(--muted);
    line-height: 1.75;
}

.episode-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.episode-card {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(15,23,42,0.07);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.episode-card:hover,
.episode-card.active {
    transform: translateY(-3px);
    border-color: rgba(37,99,235,0.35);
    box-shadow: 0 16px 30px rgba(37,99,235,0.13);
}

.episode-card span {
    display: block;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.episode-card strong {
    display: block;
    color: var(--heading);
    margin: 5px 0;
    font-size: 1rem;
}

.episode-card small {
    color: var(--muted);
    line-height: 1.4;
}

.audio-briefing-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.audio-episode {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(15,23,42,0.07);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.audio-episode:hover,
.audio-episode.active {
    transform: translateY(-3px);
    border-color: rgba(37,99,235,0.35);
    box-shadow: 0 16px 30px rgba(37,99,235,0.13);
}

.audio-episode span {
    display: block;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.audio-episode strong {
    display: block;
    color: var(--heading);
    margin: 5px 0;
}

.audio-episode small {
    color: var(--muted);
}

.tecg-audio-player {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.76)),
        radial-gradient(circle at 20% 20%, rgba(37,99,235,0.18), transparent 30%),
        radial-gradient(circle at 78% 76%, rgba(20,184,166,0.18), transparent 32%);
    box-shadow: 0 24px 52px rgba(15,23,42,0.13);
    perspective: 1000px;
}

.audio-stage {
    position: absolute;
    inset: 28px 28px 138px;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,0.20);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(15,23,42,0.9), rgba(37,99,235,0.70)),
        radial-gradient(circle at 70% 28%, rgba(20,184,166,0.48), transparent 28%);
}

.audio-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: screenScan 7s linear infinite;
}

.audio-orbit {
    position: absolute;
    border: 2px solid rgba(255,255,255,0.22);
    border-radius: 50%;
}

.audio-orbit.orbit-one {
    inset: 38px 80px;
    animation: orbitTilt 9s linear infinite;
}

.audio-orbit.orbit-two {
    inset: 74px 42px;
    animation: orbitTiltReverse 11s linear infinite;
}

.audio-host {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 142px;
    height: 132px;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 24px;
    color: #fff;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 32px rgba(0,0,0,0.18);
    animation: speakerFloat 4.8s ease-in-out infinite;
}

.audio-host span {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.audio-host strong {
    font-size: 1.15rem;
}

.host-left {
    left: 42px;
    top: 54px;
}

.host-right {
    right: 42px;
    top: 92px;
    animation-delay: 0.5s;
}

.audio-title {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 3;
    max-width: 82%;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--heading);
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
}

.audio-controls {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 52px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
}

.audio-play-button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.audio-play-button:hover {
    transform: scale(1.06);
    background: var(--accent-dark);
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
}

.audio-wave span {
    width: 8px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(#2563eb, #14b8a6);
    animation: waveBounce 1.2s ease-in-out infinite;
    animation-play-state: paused;
    opacity: 0.55;
}

.audio-wave span:nth-child(2) { animation-delay: 0.1s; }
.audio-wave span:nth-child(3) { animation-delay: 0.2s; }
.audio-wave span:nth-child(4) { animation-delay: 0.3s; }
.audio-wave span:nth-child(5) { animation-delay: 0.4s; }
.audio-wave span:nth-child(6) { animation-delay: 0.5s; }
.audio-wave span:nth-child(7) { animation-delay: 0.6s; }
.audio-wave span:nth-child(8) { animation-delay: 0.7s; }

.tecg-audio-player.is-speaking .audio-wave span {
    animation-play-state: running;
    opacity: 1;
}

.audio-duration {
    color: var(--heading);
    font-weight: 900;
}

.audio-progress {
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.audio-progress span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
    transition: width 0.4s linear;
}

.audio-status {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 16px;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.video-podcast-card,
.real-video-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.76)),
        radial-gradient(circle at 22% 18%, rgba(37,99,235,0.18), transparent 30%),
        radial-gradient(circle at 78% 78%, rgba(20,184,166,0.18), transparent 32%);
    box-shadow: 0 24px 52px rgba(15,23,42,0.13);
    perspective: 1000px;
}

.real-podcast-grid {
    display: grid;
    gap: 18px;
}

.real-video-card {
    min-height: auto;
    padding: 16px;
    background: var(--surface);
    animation: imageCardFloat 6s ease-in-out infinite;
}

.real-video-card:nth-child(2) {
    animation-delay: 0.35s;
}

.real-video-card:nth-child(3) {
    animation-delay: 0.7s;
}

.video-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #0f172a;
    box-shadow: 0 16px 30px rgba(15,23,42,0.16);
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.real-video-card h3 {
    color: var(--heading);
    margin: 14px 0 8px;
}

.real-video-card p {
    color: var(--muted);
    line-height: 1.6;
}

.real-video-card a {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.podcast-source-panel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 210px;
    overflow: hidden;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(15,23,42,0.96), rgba(37,99,235,0.72)),
        radial-gradient(circle at 70% 30%, rgba(20,184,166,0.48), transparent 28%);
}

.podcast-source-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: screenScan 7s linear infinite;
}

.podcast-source-panel span,
.podcast-source-panel strong,
.podcast-source-panel small {
    position: relative;
    z-index: 2;
}

.podcast-source-panel span {
    font-weight: 900;
    letter-spacing: 0.16em;
}

.podcast-source-panel strong {
    font-size: 1.45rem;
}

.human-podcast-feature {
    align-items: stretch;
}

.human-video-visual {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(15,23,42,0.14);
}

.human-video-visual img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.04);
    animation: solutionImageDrift 8s ease-in-out infinite;
}

.human-video-overlay {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 16px;
    background: rgba(15,23,42,0.74);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.human-video-overlay span,
.human-video-overlay strong {
    display: block;
}

.human-video-overlay span {
    margin-bottom: 5px;
    color: #bfdbfe;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.human-video-overlay strong {
    font-size: 1.35rem;
}

.podcast-source-panel.source-ai {
    background: radial-gradient(circle at top left, rgba(59,130,246,0.32), transparent 42%), linear-gradient(135deg, #0f172a, #1e3a8a);
}

.podcast-source-panel.source-ml {
    background: radial-gradient(circle at top left, rgba(20,184,166,0.34), transparent 42%), linear-gradient(135deg, #0f172a, #0f766e);
}

.podcast-source-panel.source-data {
    background: radial-gradient(circle at top left, rgba(245,158,11,0.32), transparent 42%), linear-gradient(135deg, #172554, #334155);
}

.podcast-source-panel.source-genai {
    background: radial-gradient(circle at top left, rgba(168,85,247,0.28), transparent 42%), linear-gradient(135deg, #111827, #4c1d95);
}

.now-playing {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 18px;
    z-index: 4;
    min-height: 28px;
    color: var(--heading);
    font-size: 0.86rem;
    font-weight: 900;
}

.podcast-screen {
    position: absolute;
    inset: 54px 30px 118px;
    border: 1px solid rgba(37,99,235,0.20);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(15,23,42,0.88), rgba(37,99,235,0.72)),
        radial-gradient(circle at 70% 30%, rgba(20,184,166,0.48), transparent 28%);
    overflow: hidden;
    transform: rotateX(7deg) rotateY(-5deg);
}

.podcast-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: screenScan 7s linear infinite;
}

.speaker {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 142px;
    height: 132px;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 24px;
    color: #fff;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 32px rgba(0,0,0,0.18);
    animation: speakerFloat 4.8s ease-in-out infinite;
}

.speaker span {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.speaker strong {
    font-size: 1.15rem;
}

.speaker-one {
    left: 42px;
    top: 52px;
}

.speaker-two {
    right: 42px;
    top: 92px;
    animation-delay: 0.5s;
}

.podcast-caption {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 3;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--heading);
    font-weight: 900;
    transform: translateX(-50%);
}

.signal-ring {
    position: absolute;
    z-index: 1;
    border: 2px solid rgba(255,255,255,0.24);
    border-radius: 50%;
    animation: orbitTilt 9s linear infinite;
}

.signal-one {
    inset: 36px 82px;
}

.signal-two {
    inset: 68px 42px;
    animation: orbitTiltReverse 11s linear infinite;
}

.podcast-controls {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
}

.play-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.play-button:hover {
    transform: scale(1.06);
    background: var(--accent-dark);
}

.wave-bars {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
}

.wave-bars span {
    width: 8px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(#2563eb, #14b8a6);
    animation: waveBounce 1.2s ease-in-out infinite;
    animation-play-state: paused;
    opacity: 0.55;
}

.video-podcast-card.is-playing .wave-bars span {
    animation-play-state: running;
    opacity: 1;
}

.video-podcast-card.is-playing .podcast-screen {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 0 32px rgba(37,99,235,0.28);
}

.wave-bars span:nth-child(2) { animation-delay: 0.1s; }
.wave-bars span:nth-child(3) { animation-delay: 0.2s; }
.wave-bars span:nth-child(4) { animation-delay: 0.3s; }
.wave-bars span:nth-child(5) { animation-delay: 0.4s; }
.wave-bars span:nth-child(6) { animation-delay: 0.5s; }
.wave-bars span:nth-child(7) { animation-delay: 0.6s; }
.wave-bars span:nth-child(8) { animation-delay: 0.7s; }

.episode-time {
    color: var(--heading);
    font-weight: 900;
}

.podcast-progress {
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.podcast-progress span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
    transition: width 0.4s linear;
}

.ats-sketch {
    position: relative;
    min-height: 430px;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.74)),
        radial-gradient(circle at 24% 20%, rgba(37,99,235,0.16), transparent 30%),
        radial-gradient(circle at 76% 78%, rgba(20,184,166,0.18), transparent 32%);
    box-shadow: 0 24px 52px rgba(15,23,42,0.13);
    perspective: 1000px;
}

.ats-sketch::before {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 14px;
    background-image:
        linear-gradient(rgba(31,41,55,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,41,55,0.07) 1px, transparent 1px);
    background-size: 30px 30px;
    transform: rotateX(62deg) rotateZ(-20deg) translateY(64px);
    transform-origin: center bottom;
}

.ats-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 136px;
    height: 136px;
    border-radius: 28px;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    color: #fff;
    font-weight: 900;
    text-align: center;
    transform: translate(-50%, -50%) rotateX(18deg) rotateY(-20deg);
    box-shadow: 0 22px 42px rgba(37,99,235,0.30);
    animation: cubeFloat 4.8s ease-in-out infinite;
}

.ats-panel {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 104px;
    height: 60px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 14px;
    background: rgba(255,255,255,0.94);
    color: var(--heading);
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15,23,42,0.13);
    animation: nodeFloat 4.8s ease-in-out infinite;
}

.ats-source { left: 34px; top: 74px; }
.ats-match { right: 44px; top: 84px; animation-delay: 0.25s; }
.ats-quality { left: 48px; bottom: 74px; animation-delay: 0.5s; }
.ats-submit { right: 52px; bottom: 66px; animation-delay: 0.75s; }

.ats-line {
    position: absolute;
    z-index: 1;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.85), rgba(20,184,166,0.8), transparent);
    animation: dataPulse 2.4s ease-in-out infinite;
}

.ats-line-a { left: 124px; top: 138px; width: 190px; transform: rotate(20deg); }
.ats-line-b { right: 126px; top: 150px; width: 178px; transform: rotate(154deg); animation-delay: 0.4s; }
.ats-line-c { left: 176px; bottom: 136px; width: 220px; transform: rotate(10deg); animation-delay: 0.8s; }

@keyframes screenScan {
    from { background-position: 0 0; }
    to { background-position: 60px 60px; }
}

@keyframes speakerFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

@keyframes waveBounce {
    0%, 100% { height: 14px; }
    50% { height: 42px; }
}

@media (max-width: 980px) {
    .news-grid,
    .image-wall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .podcast-feature,
    .ats-showcase {
        grid-template-columns: 1fr;
        padding: 22px;
    }
}

@media (max-width: 620px) {
    .news-grid,
    .image-wall-grid {
        grid-template-columns: 1fr;
    }

    .video-podcast-card,
    .ats-sketch,
    .tecg-audio-player {
        min-height: 360px;
    }

    .speaker {
        width: 112px;
        height: 104px;
    }

    .speaker-one {
        left: 22px;
    }

    .speaker-two {
        right: 22px;
    }

    .audio-host {
        width: 112px;
        height: 104px;
    }

    .host-left {
        left: 22px;
    }

    .host-right {
        right: 22px;
    }

    .ats-panel {
        width: 86px;
        font-size: 0.78rem;
    }
}

/* Solutions page */
.solutions-page {
    max-width: 1180px;
    text-align: left;
}

.solutions-hero {
    margin: 42px 0 50px;
    text-align: center;
}

.solutions-hero .main-heading,
.solutions-hero .main-text {
    text-align: center;
}

.solutions-hero .hero-badges {
    justify-content: center;
}

.solution-topic {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
    gap: 32px;
    align-items: center;
    margin: 34px 0;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 18px 42px rgba(15,23,42,0.10);
}

.solution-topic.reverse {
    grid-template-columns: minmax(340px, 1.05fr) minmax(0, 0.95fr);
}

.solution-topic.reverse .solution-copy {
    order: 2;
}

.solution-topic.reverse .solution-visual {
    order: 1;
}

.solution-copy h2 {
    color: var(--heading);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin: 0 0 14px;
}

.solution-copy p {
    color: var(--muted);
    line-height: 1.75;
}

.solution-visual {
    position: relative;
    min-height: 390px;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.74)),
        radial-gradient(circle at 20% 20%, rgba(37,99,235,0.16), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(20,184,166,0.16), transparent 32%);
    box-shadow: 0 22px 48px rgba(15,23,42,0.12);
    perspective: 1000px;
}

.image-hci-card img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    display: block;
    object-fit: cover;
    filter: saturate(0.96) contrast(1.02);
    transform: scale(1.03);
    animation: solutionImageDrift 9s ease-in-out infinite;
}

.image-hci-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(238,241,245,0.94), rgba(238,241,245,0.30), rgba(255,255,255,0.84)),
        radial-gradient(circle at 70% 24%, rgba(37,99,235,0.20), transparent 24%);
}

.hci-overlay,
.metric-overlay,
.process-overlay {
    position: absolute;
    inset: 28px;
    z-index: 2;
}

.hci-overlay span,
.metric-overlay span,
.process-overlay span {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 96px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: var(--heading);
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(15,23,42,0.14);
    animation: domainFloat 4.8s ease-in-out infinite;
}

.hci-overlay span:nth-child(1),
.metric-overlay span:nth-child(1),
.process-overlay span:nth-child(1) {
    left: 4%;
    top: 12%;
}

.hci-overlay span:nth-child(2),
.metric-overlay span:nth-child(2),
.process-overlay span:nth-child(2) {
    right: 6%;
    top: 38%;
    animation-delay: 0.4s;
}

.hci-overlay span:nth-child(3),
.metric-overlay span:nth-child(3),
.process-overlay span:nth-child(3) {
    left: 24%;
    bottom: 10%;
    animation-delay: 0.8s;
}

.process-overlay span:nth-child(4) {
    right: 8%;
    bottom: 8%;
    animation-delay: 1.2s;
}

.risk-sketch,
.cloud-sketch {
    transform-style: preserve-3d;
}

.risk-sketch::before,
.cloud-sketch::before {
    content: "";
    position: absolute;
    inset: 22px;
    background-image:
        linear-gradient(rgba(31,41,55,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,41,55,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    transform: rotateX(62deg) rotateZ(-20deg) translateY(64px);
    transform-origin: center bottom;
}

.shield-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 145px;
    height: 165px;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 900;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    clip-path: polygon(50% 0, 92% 18%, 82% 76%, 50% 100%, 18% 76%, 8% 18%);
    transform: translate(-50%, -50%) rotateX(18deg) rotateY(-18deg);
    box-shadow: 0 24px 46px rgba(37,99,235,0.26);
    animation: cubeFloat 4.8s ease-in-out infinite;
}

.risk-ring {
    position: absolute;
    inset: 66px;
    border: 2px solid rgba(37,99,235,0.22);
    border-radius: 50%;
    animation: orbitTilt 9s linear infinite;
}

.ring-b {
    inset: 88px 46px;
    border-color: rgba(20,184,166,0.24);
    animation: orbitTiltReverse 11s linear infinite;
}

.risk-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 92px;
    height: 52px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 13px;
    background: rgba(255,255,255,0.94);
    color: var(--heading);
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15,23,42,0.13);
    animation: nodeFloat 4.8s ease-in-out infinite;
}

.risk-detect { left: 42px; top: 70px; }
.risk-assess { right: 42px; top: 88px; animation-delay: 0.3s; }
.risk-control { left: 52px; bottom: 76px; animation-delay: 0.6s; }
.risk-report { right: 58px; bottom: 64px; animation-delay: 0.9s; }

.cloud-shape {
    position: absolute;
    left: 50%;
    top: 45%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 190px;
    height: 104px;
    border-radius: 60px;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    color: #fff;
    font-size: 1.55rem;
    font-weight: 900;
    transform: translate(-50%, -50%) rotateX(18deg) rotateY(-18deg);
    box-shadow: 0 24px 46px rgba(37,99,235,0.26);
    animation: cubeFloat 4.8s ease-in-out infinite;
}

.cloud-shape::before,
.cloud-shape::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.cloud-shape::before {
    width: 86px;
    height: 86px;
    left: 32px;
    top: -36px;
}

.cloud-shape::after {
    width: 104px;
    height: 104px;
    right: 22px;
    top: -48px;
}

.cloud-shape span {
    position: relative;
    z-index: 2;
}

.server-block {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 88px;
    height: 58px;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    color: var(--heading);
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(15,23,42,0.13);
    animation: nodeFloat 5s ease-in-out infinite;
}

.server-one { left: 44px; bottom: 74px; }
.server-two { left: 50%; bottom: 42px; transform: translateX(-50%); animation-delay: 0.4s; }
.server-three { right: 44px; bottom: 74px; animation-delay: 0.8s; }

.migration-line {
    position: absolute;
    z-index: 1;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.85), rgba(20,184,166,0.8), transparent);
    animation: dataPulse 2.4s ease-in-out infinite;
}

.migrate-a { left: 126px; bottom: 142px; width: 180px; transform: rotate(-26deg); }
.migrate-b { left: 50%; bottom: 118px; width: 120px; transform: translateX(-50%) rotate(-90deg); animation-delay: 0.4s; }
.migrate-c { right: 126px; bottom: 142px; width: 180px; transform: rotate(-154deg); animation-delay: 0.8s; }

@keyframes solutionImageDrift {
    0%, 100% { transform: scale(1.03) translate3d(0, 0, 0); }
    50% { transform: scale(1.1) translate3d(-10px, -8px, 0); }
}

@media (max-width: 920px) {
    .solution-topic,
    .solution-topic.reverse {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .solution-topic.reverse .solution-copy,
    .solution-topic.reverse .solution-visual {
        order: initial;
    }

    .solution-visual,
    .image-hci-card img {
        min-height: 330px;
    }
}

@media (max-width: 560px) {
    .solution-topic {
        padding: 16px;
    }

    .solution-visual,
    .image-hci-card img {
        min-height: 300px;
    }

    .risk-node,
    .server-block,
    .hci-overlay span,
    .metric-overlay span,
    .process-overlay span {
        min-width: 72px;
        width: auto;
        font-size: 0.76rem;
    }
}

/* Keep the expanded site navigation visible after adding AI Lab, Case Studies, and Industries. */
.nav {
    justify-content: flex-start;
    min-height: 112px;
    padding: 18px 18px 18px 220px;
}

.nav ul {
    justify-content: flex-start;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
}

.nav a {
    display: block;
    padding: 8px 11px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.nav a.nav-feature-link {
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid rgba(37,99,235,0.28);
    box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}

.nav a.nav-feature-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #0f766e);
    transform: translateY(-3px);
}

.nav a.nav-feature-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8, #0f766e);
    border-color: transparent;
}

@media (max-width: 1080px) {
    .nav {
        padding-left: 190px;
    }

    .nav-logo {
        width: 155px;
    }

    .nav a {
        font-size: 0.8rem;
        padding: 7px 9px;
    }
}

@media (max-width: 820px) {
    .nav {
        padding: 12px 16px 18px;
    }

    .nav ul {
        gap: 8px;
    }

    .nav a {
        font-size: 0.82rem;
    }
}