/* ============================================================
   Clout public site — brand layer on top of Bootstrap 5.3
   Layout/grid/components come from Bootstrap; this file only
   provides brand colours, fonts and the bespoke visuals.
   No global reset / no body rules (Bootstrap reboot handles that).
   All classes are namespaced `clout-` to avoid collisions.
   ============================================================ */

:root {
    --c-brand:    #bc0000;
    --c-brand-dk: #9a0000;
    --c-brand-tnt:#fde8e8;
    --c-brand-lt: #fff5f5;
    --c-dark:     #111827;
    --c-body:     #374151;
    --c-muted:    #6b7280;
    --c-border:   #e5e7eb;
    --c-bg:       #f9fafb;
    --c-gold:     #f59e0b;
    --f-display:  'Plus Jakarta Sans', sans-serif;
    --f-body:     'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

/* Typography scoped to public pages only (body.clout-public) */
.clout-public { font-family: var(--f-body); color: var(--c-body); }
.clout-public h1, .clout-public h2, .clout-public h3,
.clout-public .clout-display { font-family: var(--f-display); }

/* === BRAND BUTTONS === */
.btn-clout {
    background: var(--c-brand);
    color: #fff;
    font-weight: 700;
    border: 1.5px solid var(--c-brand);
}
.btn-clout:hover, .btn-clout:focus { background: var(--c-brand-dk); border-color: var(--c-brand-dk); color: #fff; }
.btn-clout-ghost {
    color: var(--c-body);
    font-weight: 600;
    border: 1.5px solid var(--c-border);
    background: #fff;
}
.btn-clout-ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn-clout-white { background: #fff; color: var(--c-brand); font-weight: 700; border: none; transition: transform .15s; }
.btn-clout-white:hover, .btn-clout-white:focus { background: #fff; color: var(--c-brand); transform: translateY(-2px); }

/* === NAV === */
.clout-nav {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
}
.clout-nav .navbar-brand img { height: 40px; width: auto; }
.clout-nav .nav-link { font-size: .875rem; font-weight: 500; color: var(--c-body); }
.clout-nav .nav-link:hover { color: var(--c-brand); }
.clout-nav .navbar-toggler:focus { box-shadow: none; }

/* Mobile nav (below the lg expand breakpoint) — solid panel, big tap targets */
@media (max-width: 991.98px) {
    .clout-nav .navbar-collapse {
        background: #fff;
        border-top: 1px solid var(--c-border);
        margin-top: .5rem;
        padding: .5rem 0 1rem;
        box-shadow: 0 14px 24px rgba(0,0,0,.07);
    }
    .clout-nav .navbar-nav { width: 100%; gap: 0; }
    .clout-nav .navbar-collapse .nav-link {
        display: block;
        width: 100%;
        padding: .75rem .25rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--c-border);
    }
    .clout-nav .navbar-collapse .btn {
        display: block;
        width: 100%;
        margin: .75rem 0 0;
        padding: .7rem 1rem;
    }
}

/* === HERO === */
.clout-eyebrow {
    display: inline-flex; align-items: center;
    background: var(--c-brand-lt); color: var(--c-brand);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: .4rem .875rem; border-radius: 999px;
}
.clout-h1 {
    font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800;
    color: var(--c-dark); line-height: 1.15; letter-spacing: -.03em;
}
.clout-h1 .accent { color: var(--c-brand); }
.clout-hero__sub { font-size: 1.05rem; color: var(--c-muted); line-height: 1.75; max-width: 500px; }
.clout-hero__note { font-size: .78rem; color: var(--c-muted); }

/* Hero mockup card */
.clout-hw { position: relative; }
.clout-hw::before {
    content: ''; position: absolute; bottom: -40px; left: -30px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--c-brand-tnt) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.clout-hw__inner { position: relative; z-index: 1; }
.clout-hw__notif {
    position: absolute; top: -14px; right: -18px; z-index: 2;
    background: var(--c-brand); color: #fff; font-size: .7rem; font-weight: 700;
    padding: .45rem .875rem; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(188,0,0,.3); white-space: nowrap;
}
.clout-hw__card {
    background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
    width: 320px; max-width: 100%;
}
.clout-hw__title { font-family: var(--f-display); font-size: .82rem; font-weight: 700; color: var(--c-dark); }
.clout-hw__badge { background: #d1fae5; color: #065f46; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; }
.clout-hw__num { font-family: var(--f-display); font-size: 2.75rem; font-weight: 800; color: var(--c-dark); line-height: 1; }
.clout-hw__stars { color: var(--c-gold); font-size: .9rem; letter-spacing: .05em; }
.clout-hw__count { font-size: .72rem; color: var(--c-muted); }
.clout-hw__review { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: .625rem .75rem; }
.clout-hw__name { font-size: .72rem; font-weight: 600; color: var(--c-dark); }
.clout-hw__rstars { font-size: .6rem; color: var(--c-gold); }
.clout-hw__text { font-size: .68rem; color: var(--c-muted); line-height: 1.45; }
.clout-hw__tag { font-size: .65rem; color: #d97706; font-weight: 600; }

/* === TRUST STRIP === */
.clout-trust { background: var(--c-bg); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.clout-trust__label { font-size: .78rem; font-weight: 500; color: var(--c-muted); }
.clout-trust__item { font-size: .82rem; font-weight: 600; color: var(--c-body); }

/* === SECTIONS === */
.clout-sec { padding: 5rem 0; }
.clout-eyebrow-text { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-brand); }
.clout-h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); font-weight: 800; color: var(--c-dark); line-height: 1.2; letter-spacing: -.025em; }
.clout-lead { font-size: 1rem; color: var(--c-muted); line-height: 1.7; }

/* Problems (dark) */
.clout-sec--dark { background: var(--c-dark); }
.clout-sec--dark .clout-h2 { color: #fff; }
.clout-prob { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 1.75rem; height: 100%; }
.clout-prob__icon { font-size: 2rem; line-height: 1; }
.clout-prob__h3 { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.35; }
.clout-prob__p { font-size: .85rem; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* How it works */
.clout-step__num { width: 56px; height: 56px; background: var(--c-brand); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; }
.clout-step__h3 { font-size: 1.05rem; font-weight: 700; color: var(--c-dark); }
.clout-step__p { font-size: .875rem; color: var(--c-muted); line-height: 1.65; }

/* Features */
.clout-sec--features { background: var(--c-bg); }
.clout-feat { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 1.625rem; height: 100%; transition: box-shadow .2s, border-color .2s; }
.clout-feat:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); border-color: var(--c-brand-tnt); }
.clout-feat__icon { width: 44px; height: 44px; background: var(--c-brand-lt); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.clout-feat__h3 { font-size: .975rem; font-weight: 700; color: var(--c-dark); }
.clout-feat__p { font-size: .84rem; color: var(--c-muted); line-height: 1.65; }

/* Pricing */
.clout-pricing-card { background: #fff; border: 2px solid var(--c-brand); border-radius: 12px; padding: 2.5rem; max-width: 480px; }
.clout-pricing__badge { background: var(--c-brand); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem 1.125rem; border-radius: 999px; }
.clout-pricing__dollar { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; color: var(--c-brand); }
.clout-pricing__num { font-family: var(--f-display); font-size: 3.5rem; font-weight: 800; color: var(--c-dark); letter-spacing: -.03em; line-height: 1; }
.clout-pricing__period { font-size: 1rem; color: var(--c-muted); }
.clout-pricing__sub { font-size: .82rem; color: var(--c-muted); }
.clout-pricing__includes { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.clout-pricing__list { list-style: none; margin: 0; padding: 0; }
.clout-pricing__list li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: var(--c-body); }
.clout-pricing__check { color: var(--c-brand); font-weight: 700; flex-shrink: 0; }
.clout-pricing__fn { font-size: .75rem; color: var(--c-muted); }

/* Testimonials */
.clout-sec--social { background: var(--c-bg); }
.clout-testi { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 1.625rem; height: 100%; display: flex; flex-direction: column; }
.clout-testi__stars { color: var(--c-gold); font-size: .875rem; letter-spacing: .05em; }
.clout-testi__quote { font-size: .9rem; color: var(--c-body); line-height: 1.65; font-style: italic; flex: 1; }
.clout-testi__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-brand-tnt); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: .875rem; color: var(--c-brand); flex-shrink: 0; }
.clout-testi__name { font-family: var(--f-display); font-size: .85rem; font-weight: 700; color: var(--c-dark); }
.clout-testi__biz { font-size: .75rem; color: var(--c-muted); }

/* FAQ — Bootstrap accordion, brand tweaks */
.clout-faq .accordion-button { font-family: var(--f-display); font-weight: 600; color: var(--c-dark); }
.clout-faq .accordion-button:not(.collapsed) { background: var(--c-bg); color: var(--c-dark); box-shadow: none; }
.clout-faq .accordion-button:focus { box-shadow: none; border-color: var(--c-border); }
.clout-faq .accordion-body { font-size: .875rem; color: var(--c-muted); line-height: 1.75; background: var(--c-bg); }

/* Final CTA */
.clout-final { background: var(--c-brand); padding: 7rem 0; position: relative; overflow: hidden; }
.clout-final::before {
    content: 'CLOUT'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-display); font-size: clamp(10rem, 25vw, 22rem);
    font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,0.07);
    pointer-events: none; user-select: none; white-space: nowrap; line-height: 1;
}
.clout-final__inner { position: relative; z-index: 1; }
.clout-final__h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1.1; }
.clout-final__p { font-size: 1.05rem; color: rgba(255,255,255,0.78); max-width: 460px; line-height: 1.7; }
.clout-final__sub { color: rgba(255,255,255,0.6); font-size: .8rem; }

/* === FOOTER === */
.clout-footer { background: #0d1117; color: rgba(255,255,255,0.55); padding: 3.5rem 0 2rem; }
.clout-footer__logo img { height: 36px; width: auto; }
.clout-footer__tagline { font-size: .85rem; line-height: 1.6; max-width: 220px; }
.clout-footer__legal { font-size: .7rem; color: rgba(255,255,255,0.3); line-height: 1.6; }
.clout-footer__col-title { font-family: var(--f-display); font-size: .72rem; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: .08em; }
.clout-footer__links { list-style: none; margin: 0; padding: 0; }
.clout-footer__links li { margin-bottom: .5rem; }
.clout-footer__links a { font-size: .84rem; color: rgba(255,255,255,0.5); text-decoration: none; }
.clout-footer__links a:hover { color: rgba(255,255,255,0.9); text-decoration: none; }
.clout-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); font-size: .75rem; }
.clout-footer__bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }
.clout-footer__bottom a:hover { color: rgba(255,255,255,0.8); text-decoration: none; }