/* Shared site chrome: header, footer and the mobile menu.
   Extracted from the homepage on 2026-09-20 so every landing page renders
   the identical header and footer. Loaded last, so it wins over page CSS. */
:root {
            --primary: #343579;
            --primary-light: #5a5f9e;
            --accent: #9196FF;
            --accent-light: #E9EAFF;
            --orange: #FF6B6B;
            --text-dark: #1a1a1a;
            --text-medium: #555;
            --text-light: #666;
            --bg-light: #f8f9fa;
            --white: #ffffff;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 20px rgba(52, 53, 121, 0.12);
            --shadow-lg: 0 10px 40px rgba(52, 53, 121, 0.2);
        }
html {
            scroll-behavior: smooth;
        }
body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }
.navbar.scrolled {
            padding: 0.75rem 0;
            box-shadow: var(--shadow-md);
        }
.nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
.logo img {
            height: 60px;
            width: auto;
        }
.nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }
.nav-links a {
            color: var(--text-dark);
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }
.nav-links a:hover {
            color: var(--primary);
        }
.nav-cta {
            background: var(--orange);
            color: white !important;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 600;
        }
.nav-cta:hover {
            background: #ff5252;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        }
.nav-login {
            background: var(--primary);
            color: white !important;
            font-weight: 600;
            padding: 0.75rem 1.25rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
.nav-login:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--primary);
        }
.footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2rem;
            margin-bottom: 3rem;
        }
.footer-section h3 {
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1.125rem;
        }
.footer-section p {
            opacity: 0.8;
            line-height: 1.6;
        }
.footer-section a {
            display: block;
            opacity: 0.8;
            margin-bottom: 0.75rem;
            transition: opacity 0.3s ease;
        }
.footer-section a:hover {
            opacity: 1;
        }
.footer-contact,
        .footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
.footer-disclaimer {
            max-width: 1200px;
            margin: 0 auto 2rem;
            padding: 1.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 8px;
            text-align: center;
        }
.footer-disclaimer p {
            font-size: 0.875rem;
            opacity: 0.7;
            line-height: 1.6;
            margin: 0;
        }
.footer-legal {
            max-width: 1200px;
            margin: 0 auto 2rem;
            text-align: center;
            font-size: 0.875rem;
        }
.footer-legal a {
            opacity: 0.7;
            transition: opacity 0.3s ease;
            display: inline;
        }
.footer-legal a:hover {
            opacity: 1;
        }
.footer-legal .separator {
            margin: 0 0.75rem;
            opacity: 0.4;
        }
.footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            opacity: 0.6;
        }
@media (max-width: 640px) {
  .footer-content {
                grid-template-columns: 1fr;
            }
  .footer-legal {
                font-size: 0.75rem;
            }
  .footer-legal .separator {
                display: none;
            }
  .footer-legal a {
                display: block;
                margin: 0.5rem 0;
            }
}

/* The hamburger had no behaviour anywhere on the site: below 968px the links were
   hidden and the button did nothing. It now opens the same links as a panel. */
.navbar { position: relative; }
.mobile-menu-btn { line-height: 1; padding: 0.25rem 0.5rem; }
@media (max-width: 968px) {
  /* The breakpoint from the homepage. It has to live in this file too: media
     queries add no specificity, so the unconditional .mobile-menu-btn rule above
     would otherwise win over a page's own override and hide the button. */
  .nav-links { display: none; }
  .mobile-menu-btn { display: block; }

  .navbar.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.5rem 1.5rem;
    margin: 0;
    list-style: none;
    z-index: 1000;
  }
  .navbar.nav-open .nav-links li { width: 100%; }
  .navbar.nav-open .nav-links a { display: block; width: 100%; padding: 0.6rem 0; }
}

/* Cookie consent banner. Shown only to European visitors, or to anyone who opens
   "Cookie settings" in the footer. It pads the body while visible (see consent.js)
   so it never covers the end of the page. */
.tvd-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tvd-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.tvd-consent-text {
    margin: 0;
    flex: 1 1 260px;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.tvd-consent-text a {
    color: var(--accent);
    text-decoration: underline;
}
.tvd-consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}
.tvd-consent-actions button {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.tvd-consent-accept {
    background: var(--accent);
    color: var(--white);
    border: 2px solid var(--accent);
}
.tvd-consent-accept:hover {
    background: var(--accent-light);
    color: var(--primary);
}
.tvd-consent-reject {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}
.tvd-consent-reject:hover {
    background: var(--white);
    color: var(--primary);
}
.tvd-cookie-settings {
    cursor: pointer;
}

@media (max-width: 640px) {
    .tvd-consent-inner {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
    .tvd-consent-text {
        flex-basis: 100%;
        font-size: 0.875rem;
    }
    .tvd-consent-actions {
        width: 100%;
    }
    .tvd-consent-actions button {
        flex: 1 1 0;
    }
}