/* =====================================================================
   HOME PAGE STYLES — Cosmic Compliance Test Lab (CCTL)
   ===================================================================== */

/* =========================
   HERO
   ========================= */
.hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 50%, #2d5a8f 100%);
    color: white;
    overflow: hidden;
    padding: 4rem 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
        url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url("#grid#grid")"/></svg>');
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(10, 22, 40, 0.3) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    padding: 0 1rem;
}

.hero-title {
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.15;
}

.hero-subtitle {
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    font-weight: 500;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.hero-description {
    font-size: clamp(0.9375rem, 2vw, 1.25rem);
    max-width: 800px;
    margin: 0 auto 2.5rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

.btn-hero {
    margin-top: 1rem;
    padding: 1.125rem 2.5rem;
    font-size: 1.0625rem;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.4);
    display: inline-block;
    max-width: 100%;
}

@media (max-width: 480px) {
    .hero { min-height: 60vh; padding: 3rem 0; }
    .btn-hero { width: 100%; padding: 1rem 1.5rem; }
}

/* =========================
   FEATURE CARDS
   ========================= */
.features-section {
    padding: 4rem 0;
    background: linear-gradient(to bottom, white 0%, #f8fafc 100%);
    margin-top: -3rem;
    position: relative;
    z-index: 10;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.16);
    border-color: var(--color-accent);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    color: white;
    position: relative;
    transition: all 0.3s ease;
}

.feature-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
    z-index: -1;
    animation: pulse 2s ease-in-out infinite;
}

.feature-card:hover .feature-icon {
    transform: rotateY(360deg);
}

.feature-card h3 {
    font-size: 1.375rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.feature-card p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .features-section { padding: 3rem 0; margin-top: -2rem; }
    .feature-card { padding: 2rem 1.5rem; }
}

/* =========================
   BADGES
   ========================= */
.badges-section {
    padding: 3rem 0;
    background: var(--color-primary);
    color: white;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.badge-item p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* =========================
   ABOUT SECTION
   ========================= */
.about-section {
    background: linear-gradient(to bottom, white 0%, #f8fafc 100%);
}

.about-section .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.about-section .tagline {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--color-accent);
    margin-top: 0.75rem;
}

.about-two-column {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.about-image-collage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

.collage-image-1 {
    position: relative;
    width: 100%;
    min-height: 480px;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.collage-image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.collage-accent {
    position: absolute;
    width: 160px;
    height: 160px;
    top: -15px;
    right: -15px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.02) 100%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.about-content-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.about-description-main {
    font-size: 1rem;
    line-height: 1.8;
}

.about-description-main p {
    margin-bottom: 1.25rem;
    color: var(--color-text);
}

.about-description-main p:last-child {
    margin-bottom: 0;
}

.core-principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.principle-card {
    background: white;
    padding: 1.5rem 1.25rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.principle-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.principle-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.16);
    border-color: var(--color-accent);
}

.principle-card:hover::before {
    transform: scaleX(1);
}

.principle-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    transition: all 0.3s ease;
}

.principle-icon svg {
    width: 26px;
    height: 26px;
}

.principle-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
    z-index: -1;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0; }
}

.principle-card:hover .principle-icon {
    transform: rotateY(360deg);
}

.principle-icon.precision  { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.principle-icon.innovation { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.principle-icon.excellence { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.principle-icon.security   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }

.principle-card h4 {
    font-size: 1rem;
    color: var(--color-primary);
    margin-bottom: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.principle-bar {
    width: 45px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    margin: 0 auto;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.principle-card:hover .principle-bar {
    width: 75px;
}

@media (max-width: 1024px) {
    .about-two-column { gap: 2.5rem; }
    .collage-image-1 { min-height: 420px; }
}

@media (max-width: 900px) {
    .about-two-column {
        grid-template-columns: 1fr;
    }
    .about-image-collage {
        max-width: 600px;
        margin: 0 auto;
    }
    .collage-image-1 { min-height: 380px; }
    .collage-accent { display: none; }
}

@media (max-width: 480px) {
    .collage-image-1 { min-height: 300px; border-radius: 1rem; }
    .core-principles-grid { gap: 1rem; }
    .principle-card { padding: 1.25rem 1rem; }
    .principle-icon { width: 50px; height: 50px; }
    .principle-icon svg { width: 22px; height: 22px; }
}

@media (max-width: 360px) {
    .core-principles-grid { grid-template-columns: 1fr; }
}

/* =========================
   WHY CHOOSE US (values + facilities)
   ========================= */
.why-choose-section {
    position: relative;
    background: #f8fafc;
}

.section-header-center {
    text-align: center;
    margin-bottom: 3rem;
}

.section-label-light {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.section-title-light {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.section-subtitle-light {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
}

.why-choose-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.values-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
    align-items: start;
    padding-top: 1.5rem;
}

.value-card-wrap:nth-child(2),
.value-card-wrap:nth-child(4) {
    margin-top: 2.5rem;
}

.value-card-wrap {
    position: relative;
}

.value-card-modern {
    background: white;
    padding: 2.75rem 1.5rem 2rem;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.value-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.value-card-wrap:hover .value-card-modern {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.16);
    border-color: var(--color-accent);
}

.value-card-wrap:hover .value-card-modern::before {
    transform: scaleX(1);
}
.value-number {
    position: absolute;
    top: -30px;
    left: 24px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-display);
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35);
    z-index: 1;
    transition: transform 0.3s ease;
}

.value-card-wrap:hover .value-number {
    transform: rotateY(360deg);
}

.value-card-modern h3 {
    font-size: 1.3125rem;
    margin: 0 0 0.75rem;
    color: var(--color-primary);
}

.value-card-modern p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
    font-size: 0.9375rem;
}

.facilities-text-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.facilities-content-text {
    max-width: 560px;
}

.facilities-content-text .section-label {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.facilities-heading-light {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.facilities-description-light {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.team-expertise-light {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.75rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 5rem;
    border: 1px solid #bae6fd;
    transition: all 0.3s ease;
    max-width: 100%;
}

.team-expertise-light:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.2);
}

.team-expertise-light svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.team-expertise-light h4 {
    color: var(--color-primary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

@media (max-width: 968px) {
    .why-choose-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: stretch;
    }
    .facilities-text-section {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .values-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 1.5rem;
    }
    .value-card-wrap:nth-child(2),
    .value-card-wrap:nth-child(4) {
        margin-top: 0;
    }
    .value-card-modern { padding: 2.5rem 1.5rem 1.75rem; }
}

@media (max-width: 480px) {
    .facilities-content-text { max-width: 100%; }
    .team-expertise-light { width: 100%; justify-content: center; text-align: center; }
    .value-number { width: 64px; height: 64px; font-size: 1.5rem; top: -24px; left: 20px; }
}

/* Optional "About Us" style badge row (kept for pages that use it) */
.about-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.about-badge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 0.75rem;
    border: 1px solid #cbd5e0;
}

.badge-check {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.about-badge-item p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .about-badges { grid-template-columns: 1fr; }
}

/* =========================
   SERVICES
   ========================= */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.service-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
    position: relative;
    flex: 1 1 320px;
    max-width: 360px;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover::before { transform: scaleX(1); }

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15);
    border-color: var(--color-accent);
}

.service-card-inner {
    padding: 2.5rem 1.75rem 2rem;
    text-align: center;
}

.service-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    color: white;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.service-icon svg {
    width: 28px;
    height: 28px;
}

.service-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.service-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
    z-index: -1;
    animation: pulse 2s ease-in-out infinite;
}

.service-card:hover .service-icon {
    transform: rotateY(360deg);
}

.service-title {
    font-size: 1.3125rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    line-height: 1.3;
}

.service-description {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-accent);
    font-family: var(--font-display);
    transition: gap 0.3s ease;
}

.service-link svg { transition: transform 0.3s ease; }
.service-link:hover { gap: 1rem; }
.service-link:hover svg { transform: translateX(4px); }

@media (max-width: 480px) {
    .service-card { flex-basis: 100%; max-width: 100%; }
}

/* =========================
   WE ARE CERTIFIED
   Mobile-first: each property is set exactly once per breakpoint tier
   (base / 640px+ / 900px+ / 1200px+), so there's no ambiguity about
   which rule wins at a given width.
   ========================= */
.certified-section {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 5rem;
    color: white;
}

.certified-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.certified-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.certified-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(10, 22, 40, 0.88) 0%, rgba(10, 22, 40, 0.6) 45%, rgba(10, 22, 40, 0.8) 100%);
    z-index: 1;
}

.certified-section .container {
    position: relative;
    z-index: 2;
}

/* Base (phones): intro + cert grid stack in one centered column */
.certified-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.certified-intro {
    max-width: 480px;
}

.certified-label {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.25rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.certified-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
    transform: translateX(-50%);
}

.certified-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    color: white;
    margin: 0.5rem 0 1.25rem;
}

.certified-description {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 380px;
    margin: 0 auto;
}

/* Certificate showcase — base: 2 columns, no stagger (stagger only
   makes sense in the single-row 5-across desktop layout below) */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    width: 100%;
    justify-items: center;
}

.cert-card {
    width: 100%;
    max-width: 160px;
    background: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(14, 165, 233, 0.3);
}

.cert-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 0.25rem;
    display: block;
}

/* 640px+: 3-up cert grid, roomier images */
@media (min-width: 640px) {
    .certs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .cert-card img {
        height: 155px;
    }
}

/* 900px+: intro sits left, cert grid sits right, everything left-aligns */
@media (min-width: 900px) {
    .certified-section {
        padding: 4rem 0 6rem;
    }
    .certified-top {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        gap: 2rem;
    }
    .certified-intro {
        flex: 1 1 320px;
        margin: 0;
    }
    .certified-label::after {
        left: 0;
        transform: none;
    }
    .certified-description {
        margin: 0;
    }
    .certs-grid {
        flex: 2 1 600px;
        width: auto;
    }
}

/* 1200px+: full 5-across showcase with the playful stagger on card 2 */
@media (min-width: 1200px) {
    .certs-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
    .cert-card {
        max-width: 150px;
    }
    .cert-card img {
        height: 180px;
    }
    .cert-card:nth-child(2) {
        transform: translateY(-14px);
    }
    .cert-card:nth-child(2):hover {
        transform: translateY(-22px);
    }
}

/* Overlapping stats bar — pulled up over the bottom edge of the photo.
   The overlap is always kept smaller than certified-section's own
   bottom padding above, so it only ever floats into empty background,
   never over the cert cards themselves. */
.certified-stats-section {
    position: relative;
    z-index: 10;
    margin-top: -2.5rem;
    padding-bottom: 2rem;
}

.certified-stats-bar {
    background: white;
    border: 2px solid var(--color-accent);
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    max-width: 1050px;
    margin: 0 auto;
}

/* Base: everything stacks in one centered column */
.certified-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.stat-block {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-display);
    line-height: 1;
}

.stat-block-label {
    display: block;
    margin-top: 0.4rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.build-trust {
    text-align: center;
}

.build-trust h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin: 0;
}

.build-trust .accent-underline {
    position: relative;
    display: inline-block;
}

.build-trust .accent-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

/* 640px+: 2x2 stat grid, slightly roomier bar */
@media (min-width: 640px) {
    .certified-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .certified-stats-bar {
        padding: 1.75rem 2rem;
    }
}

/* 900px+: overlap can be deeper since there's more bottom padding
   above to absorb it (see the safety comment above) */
@media (min-width: 900px) {
    .certified-stats-section {
        margin-top: -5rem;
    }
}

/* 1100px+: all 4 items in one row, "Build trust" reads left-aligned
   in its own column like a natural sentence, not centered */
@media (min-width: 1100px) {
    .certified-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .build-trust {
        text-align: left;
    }
}

/* =========================
   CERTIFICATIONS
   ========================= */
.certifications-section {
    text-align: center;
}

.cert-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.cert-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 1rem;
    border: 2px dashed #cbd5e0;
}

@media (max-width: 480px) {
    .cert-placeholder { width: 90px; height: 90px; }
}

/* =========================
   STATS
   ========================= */
.stats-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item {
    padding: 1rem;
}

.stat-number {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
}

.stat-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.stats-tagline {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 480px) {
    .stats-section { padding: 3rem 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* =========================
   TESTIMONIALS
   ========================= */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--color-accent);
}

.testimonial-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.testimonial-author {
    color: var(--color-accent);
    font-weight: 600;
}

/* =========================
   CTA
   ========================= */
.cta-section {
    background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    color: white;
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.cta-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 800px;
    margin: 0 auto 3rem;
    color: rgba(255, 255, 255, 0.9);
}

.benefits-section h4 {
    color: white;
    margin-bottom: 1.5rem;
}

.cta-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.benefit-item {
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.appointment-text {
    max-width: 700px;
    margin: 2rem auto;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 480px) {
    .cta-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 360px) {
    .cta-benefits-grid { grid-template-columns: 1fr; }
}

/* =========================
   SCROLL / FADE-IN ANIMATIONS
   ========================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-out; }
.animate-fade-in-delay { animation: fadeIn 0.8s ease-out 0.2s both; }
.animate-fade-in-delay-2 { animation: fadeIn 0.8s ease-out 0.4s both; }

.fade-in-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scroll.delay-1 { transition-delay: 0.1s; }
.fade-in-scroll.delay-2 { transition-delay: 0.2s; }
.fade-in-scroll.delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .principle-icon::after,
    .fade-in-scroll,
    .animate-fade-in,
    .animate-fade-in-delay,
    .animate-fade-in-delay-2 {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .stats-grid { gap: 1.5rem; }
    .testimonials-grid { grid-template-columns: 1fr; }
}

.hero img,
.about-image-collage img,
.feature-icon img,
.gallery-item img,
.collage-image-1 img {
    max-width: 100%;
}

/* ==========================
   Gallery Section
========================== */

.gallery-section{
    padding:5rem 0;
    background:#fff;
    overflow:hidden;
}

.gallery-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:2.5rem;
}

.gallery-title h2{
    font-size:2.4rem;
    color:var(--color-primary);
    margin-top:.5rem;
}

.gallery-btn{
    text-decoration:none;
    color:var(--color-accent);
    font-weight:700;
    font-size:1rem;
    transition:.3s;
}

.gallery-btn:hover{
    color:var(--color-primary);
    transform:translateX(5px);
}

.gallery-slider{
    overflow:hidden;
    width:100%;
}

.gallery-track{
    display:flex;
    gap:1.5rem;
    width:max-content;
    animation:galleryScroll 35s linear infinite;
}

.gallery-slider:hover .gallery-track{
    animation-play-state:paused;
}

.gallery-card{
    width:320px;
    height:220px;
    flex-shrink:0;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.4s;
}

.gallery-card:hover{
    transform:translateY(-8px);
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.gallery-card:hover img{
    transform:scale(1.08);
}

@keyframes galleryScroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* ==========================
   Responsive
========================== */

@media(max-width:768px){

.gallery-header{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
}

.gallery-title h2{
    font-size:2rem;
}

.gallery-card{
    width:240px;
    height:170px;
}

.gallery-track{
    gap:1rem;
}

}

@media(max-width:480px){

.gallery-card{
    width:190px;
    height:140px;
}

.gallery-title h2{
    font-size:1.7rem;
}

}
/* =========================
   TESTIMONIALS (Swiper)
   ========================= */
.testimonial-section {
    padding: 5rem 0;
    background: #f8fbff;
}

.testimonialSwiper {
    margin-top: 3rem;
    padding-bottom: 3rem; /* room for pagination dots */
}

.testimonial-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 620px;
    min-height: 320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 3px solid var(--color-accent);
}
.testimonial-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 auto 1.5rem;
    max-width: 480px;
}

.testimonial-card img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0.5rem auto 1rem;
    border-radius: 50%;
    background: #f0f9ff;
    padding: 0.5rem;
}

.testimonial-card h4 {
    color: var(--color-primary);
    font-size: 1.0625rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.testimonial-card span {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* Swiper nav arrows */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-accent);
    transition: color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: var(--color-primary);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.5rem;
}

/* Pagination dots */
.swiper-pagination-bullet {
    background: var(--color-accent);
    opacity: 0.3;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 768px) {
    .testimonial-section { padding: 3.5rem 0; }
    .testimonial-card {
        padding: 2rem 1.5rem;
        min-height: 280px;
        border-radius: 1rem;
    }
    .testimonial-content p { font-size: 1rem; }
    .swiper-button-next,
    .swiper-button-prev { display: none; } /* arrows crowd small screens — rely on dots + swipe */
}

@media (max-width: 480px) {
    .testimonial-card { padding: 1.75rem 1.25rem; }
}

/* =========================
   CONSULTATION CTA
   ========================= */
.consult-section {
    position: relative;
    background: linear-gradient(160deg, #0a1628 0%, #132844 55%, #1e3a5f 100%);
    padding: 6rem 0 7rem;
    overflow: hidden;
}

.consult-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.consult-section .container {
    position: relative;
    z-index: 1;
}

.consult-grid {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 4rem;
    align-items: center;
}

/* ---- Left column ---- */
.consult-info .section-label-light {
    margin-bottom: 1rem;
}

.consult-title {
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    font-weight: 700;
    line-height: 1.25;
    color: white;
    margin-bottom: 1.25rem;
    max-width: 460px;
}

.consult-text {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    max-width: 440px;
    margin-bottom: 1.75rem;
}

.consult-phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3rem;
    margin-bottom: 2.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.consult-phone-pill:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.consult-phone-pill .phone-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.consult-phone-pill .phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.consult-phone-pill .phone-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consult-phone-pill .phone-number {
    font-weight: 700;
    color: white;
    font-size: 1.0625rem;
}

/* Benefit chips — reuses the badge-item visual language from your stats section */
.consult-benefits-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1rem;
}

.benefit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 2.75rem;
    list-style: none;
    padding: 0;
}

.benefit-chips li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    font-weight: 500;
}

.benefit-chips svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Lab quick-select — compact icon cards, not competing CTA buttons */
.consult-labs-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1rem;
}

.lab-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    max-width: 460px;
}

.lab-select-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.lab-select-card:hover {
    background: rgba(14, 165, 233, 0.12);
    border-color: var(--color-accent);
    transform: translateY(-4px);
}

.lab-select-card .lab-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.lab-select-card .lab-icon svg {
    width: 20px;
    height: 20px;
}

.lab-select-card span {
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ---- Right column: form card ---- */
.consult-form-card {
    background: white;
    border-radius: 1.25rem;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.consult-form-header {
    padding: 1.75rem 2.25rem 1.5rem;
    border-bottom: 1px solid #eef2f6;
}

.consult-form-header .form-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 0.35rem;
}

.consult-form-header h3 {
    color: var(--color-primary);
    font-size: 1.375rem;
    margin: 0;
}

.consult-form-body {
    padding: 1.75rem 2.25rem 2.25rem;
}


@media (max-width: 968px) {
    .consult-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .consult-info { text-align: center; }
    .consult-title, .consult-text { margin-left: auto; margin-right: auto; }
    .consult-phone-pill { margin-left: auto; margin-right: auto; }
    .lab-select-grid { margin-left: auto; margin-right: auto; }
    .benefit-chips { justify-content: center; }
    .consult-form-card { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 480px) {
    .consult-section { padding: 4rem 0 5rem; }
    .lab-select-grid { grid-template-columns: 1fr; max-width: 100%; }
    .lab-select-card { flex-direction: row; justify-content: flex-start; text-align: left; padding: 0.85rem 1rem; }
    .consult-form-header, .consult-form-body { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* =========================
   WORK TOGETHER BANNER
   ========================= */
.work-together-section {
    background: linear-gradient(135deg, var(--color-accent) 0%, #0284c7 100%);
    padding: 3.5rem 0;
    text-align: center;
    padding: 20px 0;
}

.work-together-section h2 {
    color: white;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.75rem;
}

.btn-work-together {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-work-together:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.field-error {
    color: #c0392b;
    font-size: 0.85rem;
    display: block;
    margin-top: 4px;
}
.clients-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.clients-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll-left 120s linear infinite;
}

.client-logo {
    flex: 0 0 auto;
    width: 140px;
    height: 80px;
    margin: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


.hero {
    position: relative;
    overflow: hidden;
}

/* ---- Layer 1: Large slow-drifting aurora mesh, fills the whole hero ---- */
.hero::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(circle at 25% 30%, rgba(59,130,246,0.55) 0%, transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(14,165,233,0.45) 0%, transparent 45%),
        radial-gradient(circle at 50% 75%, rgba(37,99,235,0.5) 0%, transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(96,165,250,0.35) 0%, transparent 45%);
    filter: blur(60px);
    animation: auroraDrift 18s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1"/></pattern></defs><rect width="100%25" height="100%25" fill="url("#grid#grid")"/></svg>');
    animation: gridMove 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}


@keyframes auroraDrift {
    0%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
    33%  { transform: translate(4%, -3%) rotate(8deg) scale(1.1); }
    66%  { transform: translate(-3%, 4%) rotate(-6deg) scale(1.05); }
    100% { transform: translate(2%, 2%) rotate(4deg) scale(1.12); }
}
@keyframes gridMove {
    0%   { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

@keyframes conicSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- Layer 3: Fine starfield texture for depth, sits above the aurora ---- */
.hero-overlay {
    position: relative;
}
.hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}
.hero-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(59,130,246,0.12) 0deg,
        rgba(14,165,233,0.08) 60deg,
        transparent 120deg,
        rgba(37,99,235,0.1) 220deg,
        rgba(96,165,250,0.08) 280deg,
        rgba(59,130,246,0.12) 360deg
    );
    transform: translate(-50%, -50%);
    animation: conicSpin 24s linear infinite;
    mix-blend-mode: screen;
    z-index: 1;
    pointer-events: none;
}
/* ---- Hero content sits above all atmosphere layers ---- */
.hero-content {
    position: relative;
    z-index: 2;
}

/* ---- Shimmering holographic title text ---- */
.hero-title {
    background: linear-gradient(100deg, #ffffff 20%, #93c5fd 40%, #ffffff 60%, #67e8f9 80%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleShimmer 5s linear infinite;
}
@keyframes titleShimmer {
    to { background-position: -250% center; }
}

/* ---- CTA button: glowing holographic border, breathing pulse ---- */
.btn-hero {
    position: relative;
    isolation: isolate;
    box-shadow: 0 0 0 rgba(59,130,246,0);
    animation: heroBtnGlow 3s ease-in-out infinite;
}
.btn-hero::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #3b82f6, #67e8f9, #2563eb, #3b82f6);
    z-index: -1;
    filter: blur(8px);
    opacity: 0.7;
    animation: conicSpin 4s linear infinite;
}
@keyframes heroBtnGlow {
    0%, 100% { box-shadow: 0 8px 30px rgba(59,130,246,0.4); }
    50%      { box-shadow: 0 8px 45px rgba(59,130,246,0.7); }
}

/* ---- Feature cards: subtle glass + light sweep on hover ---- */
.feature-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(59,130,246,0.25), transparent);
    transform: rotate(25deg);
    transition: left 0.7s ease;
    pointer-events: none;
}
.feature-card:hover::before { left: 125%; }

/* ---- Reduced motion: everything above collapses to static ---- */
@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero::after,
    .hero-title, .btn-hero, .btn-hero::before,
    .feature-card::before {
        animation: none !important;
    }
    .hero-title {
        -webkit-text-fill-color: initial;
        background: none;
        color: white;
    }
}

@media (max-width: 768px) {
    .hero::after { display: none; } /* conic layer off on mobile — keeps performance smooth */
}