/* 
* Main stylesheet
* Version: 1.0.0
*/

/* ====================
   BASE VARIABLES

   This palette predates the brand tokens and was a second, unrelated hardcoded blue: the portal
   painted the vendor blue while these pages painted a lighter one of their own, and neither had
   anything to do with the Brand.PrimaryColor a client had set. Every variable below now resolves
   from the --brand-* namespace (defaults in brand-tokens.css, overridden per install by
   IBrandTokenService) so there is one answer to "what colour is this company" instead of three.

   There are no var() fallbacks here, and that is deliberate rather than an oversight. A fallback is
   a second copy of the colour, which is the exact thing this sheet was guilty of - and the copy it
   held was a different blue from the token defaults, so leaving them in would mean the marketing
   pages silently reverted to an off-brand palette on any load where the token sheet was late or
   missing. _FrontLayout links brand-tokens.css ahead of this file, so the names always resolve.

   --accent is not derived from --primary: it is the contrast colour the CTAs are built on, and
   deriving both from one hue collapses the call to action into the block it should stand out from.
   It lives in brand-tokens.css alongside the other values that are intentionally brand-independent.
===================== */
:root {
    --primary: var(--brand-500);
    --primary-dark: var(--brand-700);
    --primary-light: var(--brand-300);
    --dark: var(--brand-ink);
    --accent: var(--brand-accent);
    --accent-dark: var(--brand-accent-strong);
    --bg: var(--brand-surface-muted);
    --text: var(--brand-ink-strong);
    --light: var(--brand-surface-sunken);
    --gray: var(--brand-ink-muted);
    --white: var(--brand-surface);
    --border-radius: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --header-height: 80px;
}

/* ==================== 
   RESET & BASE STYLES 
===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    padding-top: var(--header-height);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

p {
    margin-bottom: 1.5rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

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

/* ==================== 
   LAYOUT & CONTAINERS 
===================== */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    padding: 5rem 0;
}

/* ==================== 
   HEADER & NAVIGATION 
===================== */
header {
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    font-size: 1.7rem;
}

/* The banner is wide and short; cap the height so it sits inside the fixed header and let the
   width follow. max-width keeps a very long wordmark from pushing the nav off a phone screen. */
.logo-img {
    display: block;
    height: 60px;
    width: auto;
    max-width: min(360px, 60vw);
    object-fit: contain;
}

nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--gray);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

    .nav-link:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -4px;
        left: 0;
        background-color: var(--primary);
        transition: width 0.3s ease;
    }

    .nav-link:hover {
        color: var(--primary);
    }

        .nav-link:hover:after,
        .nav-link.active:after {
            width: 100%;
        }

    .nav-link.active {
        color: var(--primary);
        font-weight: 600;
    }

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--dark);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ==================== 
   BUTTONS 
===================== */
.btn {
    background: var(--primary);
    /* Not "white". The primary is whatever the client picked, so the only safe foreground is the
       one derived from it by contrast ratio - a courier who chooses a pale colour would otherwise
       get white labels on a near-white button, from a settings page that gave no warning. */
    color: var(--brand-on-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
}

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

    .btn.accent {
        background: var(--accent);
        /* Overrides .btn's foreground: this one sits on the accent, not the primary, and the two
           are independent colours that will not agree about black or white. */
        color: var(--brand-on-accent);
    }

        .btn.accent:hover {
            background: var(--accent-dark);
        }

.cta {
    background: var(--accent);
    /* Was "white", which on the default orange is 2.80:1 - a WCAG AA failure on the single most
       important element of the marketing page. The derived foreground is 7.49:1 there and stays
       legible for whatever accent a client picks. */
    color: var(--brand-on-accent);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow);
}

    .cta:hover {
        background: var(--accent-dark);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

/* ==================== 
   HERO SECTIONS 
===================== */
.hero-section {
    background: var(--primary);
    /* Not plain white. This is a full-bleed field of the brand colour, so it is the one place a
       client picking something pale would end up with invisible copy; --brand-on-primary is
       chosen by contrast ratio against whatever they set. */
    color: var(--brand-on-primary, white);
    padding: 7rem 0 5rem;
    position: relative;
    overflow: hidden;
}

    .hero-section:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================== 
   SECTION TITLES 
===================== */
.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

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

.section-subtitle {
    text-align: center;
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto 4rem auto;
    font-size: 1.125rem;
}

/* ==================== 
   CARDS & FEATURES 
===================== */
.feature-grid, .stats-grid, .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.value-card, .feature-card, .stat-card, .team-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .value-card:hover, .feature-card:hover, .stat-card:hover, .team-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-lg);
    }

    .value-card:before, .feature-card:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        background: var(--primary);
        top: 0;
        left: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

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

.value-icon, .feature-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: inline-block;
}

.value-title, .feature-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ==================== 
   CONTENT GRIDS 
===================== */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
    align-items: center;
}

.content-image {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}

    .content-image img {
        width: 100%;
        height: auto;
        display: block;
        transform: scale(1.02);
        transition: transform 0.5s ease;
    }

    .content-image:hover img {
        transform: scale(1.05);
    }

/* ==================== 
   STATISTICS SECTION 
===================== */
.stats-section {
    padding: 5rem 0;
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.stat-label {
    color: var(--gray);
    font-size: 1.1rem;
}

/* ==================== 
   TEAM SECTION 
===================== */
.team-image {
    height: 250px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .team-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.team-image-placeholder {
    font-size: 5rem;
    color: var(--primary-dark);
}

.team-info {
    padding: 1.5rem;
    text-align: center;
}

.team-name {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.team-role {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ==================== 
   CTA SECTION 
===================== */
.cta-section {
    background: linear-gradient(135deg, var(--dark), var(--brand-ink-soft));
    color: white;
    text-align: center;
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
}

    .cta-section:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

.cta-content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

    .cta-content h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .cta-content p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
        opacity: 0.9;
    }

/* ==================== 
   FOOTER 
===================== */
footer {
    background: var(--dark);
    color: var(--light);
    padding: 5rem 2rem 2rem;
    position: relative;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.footer-col h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: white;
    position: relative;
    padding-bottom: 0.75rem;
}

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

.footer-col p {
    margin-bottom: 1.5rem;
    color: var(--gray);
    line-height: 1.7;
}

.footer-links {
    list-style: none;
}

    .footer-links li {
        margin-bottom: 0.75rem;
    }

.footer-link {
    color: var(--gray);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .footer-link:hover {
        color: white;
        transform: translateX(3px);
    }

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: var(--gray);
    font-size: 0.9rem;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--gray);
}

/* ==================== 
   DECORATIVE ELEMENTS 
===================== */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.15;
    z-index: 1;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: var(--primary-light);
    top: -150px;
    left: -150px;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: var(--accent);
    bottom: -100px;
    right: -100px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==================== 
   ANIMATIONS 
===================== */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ==================== 
   SECTION-SPECIFIC STYLES 
===================== */
.values-section {
    background: var(--primary);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.about-container {
    padding: 5rem 0;
}

/* ==================== 
   RESPONSIVE STYLES 
===================== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.75rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2.25rem;
    }
}

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

    nav {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - var(--header-height));
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        transition: all 0.3s ease;
        z-index: 99;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

        nav.active {
            right: 0;
        }

    .nav-link {
        display: block;
        width: 100%;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .value-card, .feature-card, .stat-card, .team-card {
        padding: 1.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    /* Modal mobile fix: pin header/footer, only body scrolls */
    .modal {
        overflow-y: hidden;
    }

    .modal-dialog {
        height: calc(100% - 1rem);
        max-height: none;
        margin: 0.5rem;
    }

    .modal-content {
        max-height: 100%;
        overflow: hidden;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header,
    .modal-footer {
        flex-shrink: 0;
    }

    .modal-header {
        padding: 0.75rem 1rem;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    section {
        padding: 3rem 0;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .stat-number {
        font-size: 2rem;
    }

    .cta-content h2 {
        font-size: 1.75rem;
    }
}