/* =========================================================
   MEDICAL MEDIA — Stylesheet
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --primary: #1476C4;
    --primary-dark: #0B3B63;
    --secondary: #35A7E0;
    --accent: #F0B429;
    --dark: #1E2A38;
    --dark-light: #123553;
    --light: #F7FAFC;
    --gray: #64748B;
    --on-dark: #E7EDF3;
    --on-dark-muted: #93A2B5;
    --transition: all 0.3s ease;
}

/* ---------- Reset & base ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    color: var(--dark);
    background-color: #fff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1rem;
}

img {
    display: block;
    max-width: 100%;
}

.mm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Keeps in-page hash jumps (including cross-page, e.g. from a service page
   back to index.html#services) from landing partly behind the fixed header */
section[id], footer[id] {
    scroll-margin-top: 90px;
}

/* ---------- Header & Navigation ---------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(15, 45, 75, 0.06),
        0 8px 32px rgba(15, 45, 75, 0.12);
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Animated aurora — soft blue/white blobs drifting behind the frosted glass.
   Horizontally constrained to sit only behind the nav pill (left/width are
   set by JS to match nav's own bounding box) rather than spanning the whole
   header, so the glow never shows behind the logo or the Contact button.
   The left/width below are just a fallback until that JS runs. */
.header-aurora {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30%;
    width: 40%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    filter: blur(35px);
    opacity: 0;
    animation: aurora-fade var(--fade-duration, 8s) ease-in-out infinite;
    animation-delay: var(--fade-delay, 0s);
}

/* Fixed at different spots along the nav's width, each fading in and out on
   its own cycle (via --fade-duration/--fade-delay) so the glow drifts
   attention across the pill without ever visibly moving position. */
.aurora-blob.b2 {
    left: 42%;
    width: 120px;
    height: 120px;
    background: var(--primary);
    --fade-duration: 9.5s;
    --fade-delay: 3s;
    --peak-opacity: 0.6;
}

.aurora-blob.b3 {
    left: 85%;
    width: 130px;
    height: 130px;
    background: #ffffff;
    --fade-duration: 7s;
    --fade-delay: 5.5s;
    --peak-opacity: 0.75;
}

@keyframes aurora-fade {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--peak-opacity, 0.5); }
}

/* Subtle grain, like Windows Acrylic/Mica — this is what actually reads as
   "glass" rather than flat tinted transparency. Sits above the aurora so the
   glass texture reads on top of the moving color. */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.header-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
}

.logo img {
    height: 50px;
    transition: var(--transition);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

nav {
    transition: var(--transition);
}

/* Pill-shaped nav: icon + label always visible, gradient pill on hover —
   the capsule floats inside the glass header. */
nav ul {
    display: flex;
    list-style: none;
    gap: 4px;
    background: var(--primary-dark);
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(11, 59, 99, 0.25);
}

nav ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 16px;
    border-radius: 50px;
    transition: color 0.3s ease, background 0.35s ease, box-shadow 0.35s ease;
    white-space: nowrap;
}

nav ul li a i {
    font-size: 1rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

nav ul li a:hover,
nav ul li a:focus-visible,
nav ul li a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 14px rgba(20, 118, 196, 0.45);
}

.mobile-menu {
    display: none;
    font-size: 22px;
    color: var(--dark);
    cursor: pointer;
}

/* ---------- Buttons ---------- */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.cta-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(20, 118, 196, 0.3);
}

.cta-button-light {
    background-color: #fff;
    color: var(--primary);
}

.cta-button-light:hover {
    background-color: var(--light);
}

.cta-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 10px 20px rgba(20, 118, 196, 0.3);
}

.cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.7s ease;
}

.cta-primary:hover::before {
    left: 100%;
}

.cta-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

/* ---------- Hero ---------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 160px 0 100px;
    background: linear-gradient(135deg, var(--dark-light) 0%, var(--dark) 100%);
}

.hero .mm-container {
    position: relative;
    z-index: 2;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    animation: float 15s infinite ease-in-out;
}

.shape-1 { width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s; }
.shape-2 { width: 200px; height: 200px; top: 60%; right: 10%; animation-delay: 5s; }
.shape-3 { width: 150px; height: 150px; bottom: 10%; left: 20%; animation-delay: 10s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text {
    position: relative;
    animation: fadeInUp 1s ease;
}

.hero-badge {
    display: inline-block;
    background: rgba(20, 118, 196, 0.15);
    border: 1px solid rgba(53, 167, 224, 0.35);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 25px;
}

.hero-badge span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--secondary);
    letter-spacing: 1px;
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.15;
    margin-bottom: 24px;
}

.title-line {
    display: block;
    color: #fff;
}

.title-highlight {
    display: block;
    background: linear-gradient(to right, var(--secondary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.title-highlight::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.hero-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
    color: var(--on-dark-muted);
}

.hero-text strong {
    color: var(--secondary);
    font-weight: 600;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--on-dark-muted);
    margin-top: 5px;
}

.hero-visual {
    position: relative;
}

.visual-container {
    position: relative;
    width: 100%;
    height: 500px;
}

.main-visual {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 2;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.main-visual:hover .hero-image {
    transform: scale(1.05);
}

.floating-element {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    z-index: 3;
    animation: float-element 8s infinite ease-in-out;
}

.element-1 { top: 10%; right: -10%; animation-delay: 0s; }
.element-2 { bottom: 20%; right: -5%; animation-delay: 2s; }
.element-3 { bottom: 10%; left: -10%; animation-delay: 4s; }

@keyframes float-element {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* ---------- Shared section title ---------- */
.section-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--primary);
}

.section-title p {
    color: var(--gray);
    margin-top: 14px;
}

/* ---------- About ---------- */
.about {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

/* One large ambient orb tucked in the corner — the glass panel below sits on
   top of it, letting the colour bleed softly through. Drifts very slowly so
   the movement reads as alive without ever feeling busy. */
.about::before {
    content: '';
    position: absolute;
    top: -130px;
    right: -130px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    filter: blur(70px);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
    animation: about-orb-drift 22s ease-in-out infinite;
}

@keyframes about-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-160px, 20px) scale(1.08); }
}

.about .mm-container {
    position: relative;
    z-index: 1;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(15, 45, 75, 0.08);
}

.about-image {
    flex: 1;
    animation: fadeInLeft 1s ease;
}

.about-image img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 15px 30px rgba(15, 45, 75, 0.12);
    height: 434px;
    object-fit: cover;
}

.about-text {
    flex: 1;
    animation: fadeInRight 1s ease;
}

/* ---------- Services ---------- */
.services {
    padding: 100px 0;
    background-color: var(--light);
}

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

.service-card {
    display: block;
    background-color: #fff;
    border-radius: 14px;
    padding: 40px 30px;
    box-shadow: 0 5px 20px rgba(15, 45, 75, 0.07);
    transition: var(--transition);
    text-align: center;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    transition: var(--transition);
    z-index: -1;
}

.service-card:hover::before {
    height: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    color: #fff;
    box-shadow: 0 15px 30px rgba(15, 45, 75, 0.18);
}

.service-card:hover .service-icon,
.service-card:hover h3 {
    color: #fff;
}

.service-card:hover p {
    color: rgba(255, 255, 255, 0.85);
}

.service-icon {
    font-size: 2.75rem;
    color: var(--primary);
    margin-bottom: 20px;
    transition: var(--transition);
}

.service-card h3 {
    font-size: 1.35rem;
    margin-bottom: 15px;
    transition: var(--transition);
}

.service-card p {
    color: var(--gray);
    transition: var(--transition);
}

/* ---------- Service detail pages ---------- */
.breadcrumb {
    padding: 130px 0 10px;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.breadcrumb a:hover {
    gap: 12px;
}

.service-hero {
    padding: 30px 0 60px;
    background: #E9F4FC;
}

.service-hero .icon-badge {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px rgba(20, 118, 196, 0.3);
}

.service-hero h1 {
    font-size: 2.6rem;
    color: var(--primary-dark);
    max-width: 800px;
}

.service-hero .lead {
    font-size: 1.15rem;
    color: var(--gray);
    max-width: 700px;
    margin-top: 10px;
}

.service-content {
    padding: 70px 0;
}

.service-content .content-wrap {
    max-width: 850px;
}

.service-content h2 {
    font-size: 1.7rem;
    color: var(--primary-dark);
    margin-top: 45px;
}

.service-content h2:first-child {
    margin-top: 0;
}

.service-content p {
    color: var(--dark);
    margin-bottom: 18px;
}

.service-content .features {
    margin: 20px 0 30px;
}

/* ---------- Packs / Pricing ---------- */
.packs {
    padding: 100px 0;
    background: #F3F8FD;
    position: relative;
    overflow: hidden;
}

.packs::before,
.packs::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.packs::before {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: rgba(20, 118, 196, 0.16);
}

.packs::after {
    width: 380px;
    height: 380px;
    bottom: -140px;
    right: -100px;
    background: rgba(240, 180, 41, 0.18);
}

.pricing-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
    position: relative;
    z-index: 1;
}

/* Wrapper holds the glow. Kept deliberately free of `transform` so it never
   creates its own stacking context — .pricing-card (or .popular) can use
   transform freely without inverting the paint order and pulling the glow
   in front of the card's own background (a real stacking-context gotcha:
   once an element establishes a stacking context, ITS OWN background becomes
   the floor of that context, so any z-index on a descendant — even -1 —
   paints above it). Keeping the glow one level up, on a non-transformed
   ancestor, sidesteps that entirely. */
.pricing-card-wrap {
    position: relative;
    display: flex;
}

.pricing-card-wrap > .pricing-card {
    flex: 1;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 35px 30px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(15, 45, 75, 0.08);
    transition: box-shadow 0.4s ease, transform 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* On hover the glow (see below) is directly behind the card, and
   backdrop-filter samples/blurs whatever is behind an element regardless of
   its own background opacity — so a glass card would blur the glow into a
   wash across the whole surface. Solidifying the card on hover keeps the
   glass look at rest while letting the border glow read cleanly when active. */
.pricing-card-wrap:hover .pricing-card {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Soft rotating glow behind the card. Only the angle is animated (not the
   box itself), so non-square cards never show a rotated-rectangle "blade"
   swinging past the corners. The card's background is fully opaque so the
   glow's center is completely hidden — only the halo beyond the card's own
   edge is ever visible. Note: this relies on the card NOT using
   backdrop-filter, which would blur/leak the glow through regardless of
   background opacity. */
.pricing-card-wrap::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 18px;
    z-index: -1;
    background: conic-gradient(from var(--border-angle), var(--primary), var(--accent), var(--secondary), var(--primary));
    filter: blur(20px);
    opacity: 0;
    animation: spin-border-angle 5s linear infinite;
    transition: opacity 0.45s ease;
}

.pricing-card-wrap:hover::before {
    opacity: 0.9;
}

@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes spin-border-angle {
    to { --border-angle: 360deg; }
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(15, 45, 75, 0.15);
}

.pricing-card .top h3 {
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
}

.price span {
    font-size: 1.6rem;
    font-weight: 700;
}

.subtitle {
    font-size: 0.9rem;
    color: var(--gray);
    margin-top: 5px;
}

.features {
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.features li {
    margin-bottom: 12px;
    color: #444;
    padding-left: 24px;
    position: relative;
    font-size: 0.95rem;
}

.features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
}

.btn {
    display: block;
    text-align: center;
    background: var(--primary);
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

.popular {
    border: 2px solid var(--primary);
    transform: scale(1.04);
}

.popular:hover {
    transform: scale(1.04) translateY(-8px);
}

.badge {
    position: absolute;
    top: 20px;
    right: -48px;
    background: var(--accent);
    color: var(--primary-dark);
    padding: 6px 60px;
    transform: rotate(30deg);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.popular-btn {
    background: var(--primary-dark);
}

.popular-btn:hover {
    background: #062441;
}

.extra-options {
    margin-top: 60px;
    padding-top: 25px;
    border-top: 1px solid #cdd8e7;
}

.extra-options h3 {
    color: var(--primary-dark);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.extra-options ul {
    list-style: none;
    padding: 0;
}

.extra-options li {
    margin-bottom: 10px;
    color: #444;
    padding-left: 18px;
    position: relative;
}

.extra-options li::before {
    content: "•";
    color: var(--primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ---------- Partners ---------- */
.partners {
    padding: 100px 0;
    background: #fff;
}

.partners-carousel {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.partner-track {
    display: flex;
    align-items: center;
    gap: 35px;
    width: max-content;
    animation: partner-scroll 25s linear infinite;
}

.partners-carousel:hover .partner-track {
    animation-play-state: paused;
}

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

.logo-item {
    flex: 0 0 auto;
    width: 180px;
    background: #fff;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 45, 75, 0.06);
    border: 1px solid #eee;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 8px 24px rgba(15, 45, 75, 0.12);
    border-color: var(--primary);
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: var(--transition);
}

/* ---------- CTA ---------- */
.cta {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    text-align: center;
}

.cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta p {
    font-size: 1.15rem;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Footer ---------- */
footer {
    background-color: var(--primary-dark);
    color: #fff;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--accent);
}

.footer-column p, .footer-column a {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    transition: var(--transition);
}

.footer-column a:hover {
    color: #fff;
    padding-left: 5px;
}

.info-contact {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.social-icons a:hover {
    background-color: var(--accent);
    color: var(--primary-dark);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* ---------- Shared animations ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeUp 1s forwards;
}

@keyframes float-particle {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: float-particle linear infinite;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-text h1 { font-size: 2.8rem; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .visual-container { height: 400px; }
    .floating-element { width: 60px; height: 60px; }

    .about-content { flex-direction: column; padding: 20px; }
    .about-text { text-align: center; }

    .about::before {
        top: -80px;
        right: -80px;
        width: 300px;
        height: 300px;
        filter: blur(55px);
    }
}

@media (max-width: 768px) {
    nav { display: none; }
    .mobile-menu { display: block; }

    /* Logo centered in the bar; hamburger stays pinned to the right */
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .nav-actions {
        margin-left: auto;
    }

    .about::before {
        top: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
        filter: blur(40px);
    }

    /* The drifting blue glow is a desktop-only flourish — too busy on a
       small screen, and there's little room around the centered logo. */
    .header-aurora {
        display: none;
    }

    nav.mobile-open {
        display: block !important;
        position: absolute;
        top: 76px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    nav.mobile-open ul {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        gap: 8px;
        background: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    nav.mobile-open ul li a {
        color: var(--dark);
        background: var(--light);
        border-radius: 12px;
        padding: 12px 16px;
        width: 100%;
    }

    nav.mobile-open ul li a:hover,
    nav.mobile-open ul li a:active {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
        box-shadow: none;
    }

    .top-button, .hero-visual {
        display: none !important;
    }

    .hero { padding: 140px 0 80px; }
    .hero-text h1 { font-size: 2.4rem; }
    .section-title h2 { font-size: 2rem; }
    .service-hero h1 { font-size: 2rem; }
    .breadcrumb { padding: 110px 0 10px; }
}

@media (max-width: 576px) {
    .hero-text h1 { font-size: 2.1rem; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .cta-button { width: 100%; max-width: 280px; }
    .hero-stats { flex-direction: column; gap: 20px; }
    .visual-container { height: 300px; }
    .floating-element { width: 50px; height: 50px; }
    .element-1, .element-2, .element-3 { display: none; }
}