/*
 * Landing Page Layout
 * Landing-specific styles on top of marmaris-core.css
 * Shared theming (colors, fonts, buttons, gradients) comes from theme.marmar.is
 */

/* ===== Body font override: landing uses serif body text ===== */

body {
    font-family: var(--marmaris-font-serif, "PT Serif", Georgia, serif);
}

/* ===== Navigation ===== */

#mainNav .navbar-brand,
#mainNav .navbar-brand.logo-font,
.navbar-brand.logo-font {
    font-family: var(--marmaris-font-logo, 'Cera Pro', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 1.5rem;
    color: var(--marmaris-primary);
    letter-spacing: 0.1em !important;
}

#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:active {
    color: var(--marmaris-primary-hover);
}

#mainNav {
    background-color: #fff;
}

#mainNav .navbar-nav .nav-link {
    font-family: var(--marmaris-font-sans, "Lato", sans-serif);
    font-weight: 700;
    font-variant: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--marmaris-secondary);
}

#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active {
    color: var(--marmaris-primary);
}

/* ===== Masthead / Hero ===== */

.masthead-circuit {
    position: relative;
    margin-top: 2rem;
}

.circuit-svg {
    width: 100%;
    max-width: 500px;
    opacity: 0.35;
    filter: grayscale(100%);
    margin-left: auto;
    display: block;
}

/* ===== Platform section device mockup ===== */

.features-device-mockup .circle,
.features-device-mockup svg circle {
    fill: #e9ecef;
}

.features-device-mockup .shape-1 rect,
.features-device-mockup .shape-2 circle {
    fill: #dee2e6;
}

.masthead .circle,
.features-device-mockup .circle {
    fill: url(#circleGradient);
}

/* ===== CTA Section ===== */

.cta {
    background: linear-gradient(135deg, var(--marmaris-gray-800, #252F4A) 0%, var(--marmaris-primary, #8b0000) 100%);
}

/* ===== Quote section ===== */

.quote-section {
    background: linear-gradient(135deg, var(--marmaris-primary) 0%, var(--marmaris-complementary) 100%);
}

/* ===== Subtle backgrounds ===== */

.bg-subtle {
    background-color: #f5f5f5;
}

/* ===== Section spacing ===== */

section {
    padding: 5rem 0;
}

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

@media (max-width: 768px) {
    .engine-card {
        margin-bottom: 1.5rem;
    }

    h1.display-1 {
        font-size: 2.5rem;
    }
}