/* =========================================================================
   Dynambo marketing site — brand design system
   Kept in step with the SaaS app (src/Dynambo.Web/wwwroot/css/site.css) for a
   consistent look and feel: a darker-blue primary with grey/black/white
   neutrals, no gradients or purple/pink, and a teal accent that matches the
   app's dashboard accent. The --dyn-navy* variable names are kept so existing
   markup still works; they now hold the SaaS blue values.
   ========================================================================= */

:root {
    /* Brand — darker blue, matching the SaaS app's --dyn-primary family. */
    --dyn-navy: #1b4f8a;             /* SaaS --dyn-primary (deep medium-blue) */
    --dyn-navy-700: #163f6f;         /* SaaS --dyn-primary-dark */
    --dyn-navy-900: #0f2f55;         /* SaaS --dyn-primary-darker */
    --dyn-primary-soft: #e8eef6;     /* SaaS --dyn-primary-soft (cool light tint) */

    /* Teal accent — matches the SaaS dashboard teal for a consistent accent. */
    --dyn-teal: #17b3a3;             /* SaaS --dash-teal */
    --dyn-teal-600: #0f9c8d;
    --dyn-teal-100: #ddf3f0;

    /* CTA accent — warm amber that pops against the blue scheme (matches the
       SaaS dashboard amber). Used for the primary marketing call-to-action. */
    --dyn-accent: #f5a623;           /* SaaS --dash-amber */
    --dyn-accent-600: #e0940f;       /* darker amber for hover/active */

    /* Neutrals — grey / black / white, matching the SaaS app. */
    --dyn-coral: #f2695f;            /* SaaS --dash-coral (kept for rare highlights) */
    --dyn-ink: #1c2330;              /* SaaS --dyn-ink */
    --dyn-muted: #667085;            /* SaaS --dyn-muted */
    --dyn-bg-soft: #f4f6f8;          /* SaaS --dyn-bg */
    --dyn-border: #e4e8ee;           /* SaaS --dyn-line */

    /* Map Bootstrap theme colours onto the brand palette. */
    --bs-primary: var(--dyn-navy);
    --bs-primary-rgb: 27, 79, 138;
    --bs-link-color: var(--dyn-navy-700);
    --bs-link-hover-color: var(--dyn-navy-900);
    --bs-border-radius: 0.85rem;

    --dyn-font-display: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --dyn-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--dyn-font-body);
    color: var(--dyn-ink);
    background-color: #fff;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

h1, h2, h3, h4, h5, .display-heading {
    font-family: var(--dyn-font-display);
    color: var(--dyn-navy);
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--dyn-navy);
    color: #fff;
    border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Visible focus outline for keyboard users (accessibility). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 3px solid var(--dyn-teal);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ Buttons */
.btn { border-radius: 0.65rem; font-weight: 500; }
.btn-lg { border-radius: 0.8rem; }
.btn-primary {
    --bs-btn-bg: var(--dyn-navy);
    --bs-btn-border-color: var(--dyn-navy);
    --bs-btn-hover-bg: var(--dyn-navy-700);
    --bs-btn-hover-border-color: var(--dyn-navy-700);
    --bs-btn-active-bg: var(--dyn-navy-900);
    --bs-btn-active-border-color: var(--dyn-navy-900);
    box-shadow: 0 2px 10px rgba(27, 79, 138, .28);
}

/* Primary call-to-action (Join Waitlist / Start Free Trial). Warm amber so it
   stands out clearly against the blue scheme; dark ink label for legibility. */
.btn-accent {
    --bs-btn-color: var(--dyn-ink);
    --bs-btn-bg: var(--dyn-accent);
    --bs-btn-border-color: var(--dyn-accent);
    --bs-btn-hover-color: var(--dyn-ink);
    --bs-btn-hover-bg: var(--dyn-accent-600);
    --bs-btn-hover-border-color: var(--dyn-accent-600);
    --bs-btn-active-color: var(--dyn-ink);
    --bs-btn-active-bg: var(--dyn-accent-600);
    --bs-btn-active-border-color: var(--dyn-accent-600);
    --bs-btn-focus-shadow-rgb: 245, 166, 35;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(245, 166, 35, .35);
}

.btn-outline-light-navy {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.6);
    --bs-btn-hover-color: var(--dyn-navy);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* ------------------------------------------------------------------ Navbar */
.navbar-dyn {
    background-color: #fff;
    border-bottom: 1px solid var(--dyn-border);
}
.navbar-dyn .navbar-brand {
    font-family: var(--dyn-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--dyn-navy);
}
.navbar-dyn .nav-link { color: var(--dyn-ink); font-weight: 500; }
.navbar-dyn .nav-link:hover,
.navbar-dyn .nav-link.active { color: var(--dyn-teal-600); }

/* ------------------------------------------------------------------ Hero */
/* Solid brand blue — no gradient, matching the SaaS app's flat surfaces. */
.hero {
    background-color: var(--dyn-navy);
    color: #fff;
}
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, 0.88); }

/* ------------------------------------------------------------------ Sections */
.section { padding: 4.5rem 0; }
.section-soft { background-color: var(--dyn-bg-soft); }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dyn-teal-600);
}

/* ------------------------------------------------------------------ Cards */
.feature-card {
    height: 100%;
    border: 1px solid var(--dyn-border);
    border-radius: 0.9rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 41, 0.1);
}
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--dyn-teal-100);
    color: var(--dyn-teal-600);
    font-size: 1.4rem;
    line-height: 1;
}
/* When centered with the .mx-auto utility, the chip must be block-level for
   margin:auto to take effect (mx-auto has no effect on an inline element). */
.feature-icon.mx-auto {
    display: flex;
}
/* Keep the Bootstrap icon glyph optically centered within the chip. */
.feature-icon > .bi { display: block; line-height: 1; }

/* ------------------------------------------------------------------ Pricing */
.pricing-card {
    height: 100%;
    border: 1px solid var(--dyn-border);
    border-radius: 1rem;
}
.pricing-card.featured {
    border-color: var(--dyn-teal);
    box-shadow: 0 0.75rem 2rem rgba(23, 179, 163, 0.18);
}
.pricing-badge {
    background: var(--dyn-teal);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}
.price-amount { font-size: 2.5rem; font-weight: 700; color: var(--dyn-navy); }
.comparison-table th { color: var(--dyn-navy); }
.comparison-table .bi-check-lg { color: var(--dyn-teal-600); }
.comparison-table .bi-dash { color: var(--dyn-muted); }

/* ------------------------------------------------------------------ Footer */
.footer-dyn {
    background-color: var(--dyn-navy-900);
    color: rgba(255, 255, 255, 0.75);
}
.footer-dyn h2, .footer-dyn h3, .footer-dyn .footer-heading {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.footer-dyn a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer-dyn a:hover { color: #fff; }

/* ------------------------------------------------------------------ Forms */
.form-honeypot {
    position: absolute !important;
    left: -5000px;
    height: 0;
    width: 0;
    overflow: hidden;
}
.field-validation-error { color: #b02a37; font-size: 0.875rem; }
.input-validation-error { border-color: #b02a37; }