/* ─────────────────────────────────────────────────────────────────────────────
   META LEADS CRM — Marketing Website Stylesheet
   Design System: Bootstrap 5 + Custom SCSS-like CSS
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Google Font Import ─────────────────────────────────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── CSS Custom Properties (Design Tokens) ──────────────────────────────────*/
:root {
    /* Colors */
    --clr-primary:       #0d6efd;
    --clr-primary-dark:  #0a58ca;
    --clr-primary-light: #e7f0ff;
    --clr-accent:        #00d2ff;
    --clr-success:       #198754;
    --clr-warning:       #ffc107;
    --clr-danger:        #dc3545;
    --clr-dark:          #0f172a;
    --clr-body:          #3d4a5c;
    --clr-muted:         #6b7280;
    --clr-border:        #e5e7eb;
    --clr-bg-light:      #f8fafc;
    --clr-white:         #ffffff;

    /* Typography */
    --font-base:         'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base:    1rem;
    --line-height-base:  1.7;

    /* Spacing */
    --section-py:        100px;

    /* Borders */
    --radius-sm:         0.375rem;
    --radius-md:         0.75rem;
    --radius-lg:         1rem;
    --radius-xl:         1.5rem;
    --radius-pill:       50rem;

    /* Shadows */
    --shadow-sm:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:         0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:         0 10px 40px rgba(0,0,0,.10);
    --shadow-xl:         0 20px 60px rgba(0,0,0,.12);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-slow:   500ms ease;
}

/* ─── Base Reset & Body ───────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family:    var(--font-base);
    font-size:      var(--font-size-base);
    color:          var(--clr-body);
    line-height:    var(--line-height-base);
    background:     var(--clr-white);
    overflow-x:     hidden;
}

img { max-width: 100%; height: auto; }
a  { transition: color var(--transition-fast); }

/* ─── Typography ──────────────────────────────────────────────────────────────*/
h1, h2, h3, h4, h5, h6 {
    font-family:   var(--font-base);
    color:         var(--clr-dark);
    line-height:   1.25;
    font-weight:   700;
    letter-spacing: -0.02em;
}

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

.lead { font-size: 1.15rem; line-height: 1.75; }

/* ─── Layout Helpers ──────────────────────────────────────────────────────────*/
.section-padding { padding: var(--section-py) 0; }
.section-padding-sm { padding: 60px 0; }

/* ─── Navbar ──────────────────────────────────────────────────────────────────*/
.navbar-marketing {
    padding:           1.25rem 0;
    background:        rgba(255, 255, 255, 0.92);
    backdrop-filter:   blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:     1px solid rgba(0,0,0,.05);
    transition:        padding var(--transition-base), box-shadow var(--transition-base);
    z-index:           1030;
}

.navbar-marketing.scrolled {
    padding:    0.75rem 0;
    box-shadow: var(--shadow-md);
}

.navbar-marketing .navbar-brand {
    font-weight: 800;
    font-size:   1.35rem;
    letter-spacing: -0.03em;
    color:       var(--clr-dark) !important;
    text-decoration: none;
}

.navbar-marketing .nav-link {
    font-weight:   500;
    font-size:     0.925rem;
    color:         var(--clr-body);
    padding:       0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition:    color var(--transition-fast), background var(--transition-fast);
}

.navbar-marketing .nav-link:hover,
.navbar-marketing .nav-link.active {
    color:      var(--clr-primary);
    background: var(--clr-primary-light);
}

.navbar-marketing .dropdown-menu {
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-lg);
    padding:       0.5rem;
    animation:     dropdownFade 0.2s ease;
}

.navbar-marketing .dropdown-item {
    border-radius: var(--radius-sm);
    font-size:     0.9rem;
    font-weight:   500;
    padding:       0.6rem 1rem;
    transition:    background var(--transition-fast), color var(--transition-fast);
}

.navbar-marketing .dropdown-item:hover {
    background: var(--clr-primary-light);
    color:      var(--clr-primary);
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Buttons ─────────────────────────────────────────────────────────────────*/
.btn {
    font-weight:    600;
    font-size:      0.95rem;
    letter-spacing: 0.01em;
    border-radius:  var(--radius-md);
    transition:     all var(--transition-base);
}

.btn-primary {
    background:  var(--clr-primary);
    border-color: var(--clr-primary);
    color:  #fff;
}

.btn-primary:hover {
    background:  var(--clr-primary-dark);
    border-color: var(--clr-primary-dark);
    transform:   translateY(-2px);
    box-shadow:  0 8px 20px rgba(13,110,253,.35);
}

.btn-primary:active { transform: translateY(0); }

.btn-outline-primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 20px rgba(13,110,253,.2);
}

.btn-light:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-lg  { padding: 0.85rem 2rem; font-size: 1rem; }
.btn-sm  { padding: 0.4rem 1rem;  font-size: 0.85rem; }

/* ─── Cards ───────────────────────────────────────────────────────────────────*/
.card-modern {
    border:        none;
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-md);
    transition:    transform var(--transition-base), box-shadow var(--transition-base);
    background:    var(--clr-white);
    overflow:      hidden;
}

.card-modern:hover {
    transform:  translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* ─── Hero Section ────────────────────────────────────────────────────────────*/
.hero-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    background:     var(--clr-primary-light);
    color:          var(--clr-primary);
    border-radius:  var(--radius-pill);
    padding:        0.4rem 1rem;
    font-size:      0.85rem;
    font-weight:    600;
    margin-bottom:  1.25rem;
    border:         1px solid rgba(13,110,253,.15);
}

.hero-image-wrapper {
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-xl);
    border:        1px solid rgba(0,0,0,.06);
}

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

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

/* ─── Section Badges ──────────────────────────────────────────────────────────*/
.badge {
    font-size:     0.78rem;
    font-weight:   700;
    letter-spacing: 0.03em;
}

/* ─── Feature Cards ───────────────────────────────────────────────────────────*/
.icon-box {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-modern:hover .icon-box {
    transform:  scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(13,110,253,.2);
}

/* ─── Pricing Cards ───────────────────────────────────────────────────────────*/
.pricing-card-popular {
    border:     2px solid var(--clr-primary) !important;
    position:   relative;
}

.pricing-card-popular::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:    linear-gradient(135deg, rgba(13,110,253,.03), rgba(0,210,255,.03));
}

/* ─── Testimonial Cards ───────────────────────────────────────────────────────*/
.testimonial-quote {
    font-size:   1.1rem;
    line-height: 1.7;
    font-style:  italic;
    color:       var(--clr-dark);
}

/* ─── Accordion / FAQ ─────────────────────────────────────────────────────────*/
.accordion-item {
    border-radius: var(--radius-lg) !important;
    overflow:      hidden;
    margin-bottom: 0.75rem;
    box-shadow:    var(--shadow-sm);
    border:        1px solid var(--clr-border) !important;
}

.accordion-button {
    font-weight:   600;
    font-size:     0.95rem;
    color:         var(--clr-dark);
    background:    var(--clr-white);
    padding:       1.1rem 1.5rem;
}

.accordion-button:not(.collapsed) {
    background:  var(--clr-primary);
    color:       #fff;
    box-shadow:  none;
    font-weight: 700;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.accordion-button:focus {
    box-shadow:   none;
    border-color: transparent;
}

.accordion-body {
    font-size:   0.95rem;
    line-height: 1.8;
    color:       var(--clr-muted);
    padding:     1rem 1.5rem 1.25rem;
}

/* ─── Pipeline Kanban ─────────────────────────────────────────────────────────*/
.kanban-column {
    min-width:     220px;
    flex-shrink:   0;
}

/* ─── Blog Cards ──────────────────────────────────────────────────────────────*/
.blog-img-wrap {
    overflow:      hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    height:        200px;
}

.blog-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card-modern:hover .blog-img-wrap img {
    transform: scale(1.07);
}

/* ─── Article / Legal Content ─────────────────────────────────────────────────*/
.blog-article h2,
.blog-article h3 {
    margin-top:  2.5rem;
    margin-bottom: 1rem;
    font-size:   1.5rem;
}

.blog-article p,
.blog-article li {
    color:       #4b5563;
    line-height: 1.88;
    font-size:   1.02rem;
}

.blog-article blockquote {
    border-left:  4px solid var(--clr-primary);
    padding-left: 1.5rem;
    color:        var(--clr-body);
    font-size:    1.1rem;
    font-style:   italic;
}

.legal-content h2  { font-size: 1.35rem; }
.legal-content p,
.legal-content li  { line-height: 1.85; color: #555; font-size: 0.975rem; }

/* ─── Forms ───────────────────────────────────────────────────────────────────*/
.form-control,
.form-select {
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:       0.65rem 1rem;
    font-size:     0.95rem;
    color:         var(--clr-dark);
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--clr-primary);
    box-shadow:   0 0 0 3px rgba(13,110,253,.15);
    outline:      none;
}

.form-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--clr-dark);
    margin-bottom: 0.4rem;
}

/* ─── Footer ──────────────────────────────────────────────────────────────────*/
footer { background: #0f172a !important; }

footer a.hover-white { transition: color var(--transition-fast); }
footer a.hover-white:hover { color: #fff !important; }

/* ─── Tables ──────────────────────────────────────────────────────────────────*/
.table th {
    font-size:      0.8rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table td { vertical-align: middle; }

/* ─── Utility Classes ─────────────────────────────────────────────────────────*/
.letter-spacing       { letter-spacing: 0.12em; }
.text-white-75        { color: rgba(255,255,255,.75) !important; }
.text-white-50        { color: rgba(255,255,255,.5) !important; }
.lh-base              { line-height: 1.7; }
.lh-lg                { line-height: 1.85; }
.fw-medium            { font-weight: 500; }
.rounded-xl           { border-radius: var(--radius-xl) !important; }
.object-fit-cover     { object-fit: cover; }
.z-index-2            { z-index: 2; }
.xs-text              { font-size: 11px; }

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

@keyframes pulse-primary {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,.35); }
    50%       { box-shadow: 0 0 0 12px rgba(13,110,253,0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease both;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Scroll Reveal (JS-triggered) */
.reveal {
    opacity:    0;
    transform:  translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity:   1;
    transform: translateY(0);
}

/* ─── Responsive Overrides ────────────────────────────────────────────────────*/
@media (max-width: 991.98px) {
    :root { --section-py: 70px; }

    .display-3 { font-size: 2.5rem; }
    .display-4 { font-size: 2rem; }
    .display-5 { font-size: 1.75rem; }

    .navbar-marketing .navbar-collapse {
        background:    var(--clr-white);
        border-radius: var(--radius-lg);
        box-shadow:    var(--shadow-lg);
        padding:       1rem;
        margin-top:    0.5rem;
    }
}

@media (max-width: 767.98px) {
    :root { --section-py: 60px; }

    .btn-lg { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
    h1      { font-size: 2rem; }

    .hero-image-wrapper { margin-top: 2rem; }
}

/* ─── Custom Scrollbar ────────────────────────────────────────────────────────*/
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg-light); }
::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* ─── Selection Color ─────────────────────────────────────────────────────────*/
::selection {
    background: rgba(13,110,253,.2);
    color:      var(--clr-dark);
}