/* ============================================================
   VisualProfits.com — Shared Stylesheet
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f5f5;
    color: #222;
}

/* ===== TOP BANNER ===== */
.top-banner {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: bold;
}
.top-banner a { color: #ffcc00; text-decoration: none; }
.top-banner a:hover { text-decoration: underline; }

/* ===== HEADER ===== */
.header {
    background: #fff;
    text-align: center;
    padding: 22px 20px 18px;
    border-bottom: 4px solid #2ecc40;
}
.header .logo-text {
    font-size: 32px;
    font-weight: 900;
    color: #111;
    letter-spacing: -1px;
}
.header .logo-text span { color: #2ecc40; }
.header .tagline {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== SITE NAV ===== */
.site-nav {
    background: #111;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 3px solid #2ecc40;
    position: sticky;
    top: 0;
    z-index: 200;
}
.site-nav a {
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 12px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.site-nav a:hover, .site-nav a.active {
    background: #2ecc40;
    color: #000;
}

/* ===== HERO ===== */
.hero {
    background: #fff;
    text-align: center;
    padding: 36px 20px 30px;
    border-bottom: 1px solid #e8e8e8;
}
.hero .eyebrow {
    display: inline-block;
    background: #2ecc40;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 18px;
}
.hero h1 {
    font-size: 34px;
    font-weight: 900;
    color: #111;
    line-height: 1.2;
    max-width: 760px;
    margin: 0 auto 14px;
}
.hero h1 span { color: #2ecc40; }
.hero .subhead {
    font-size: 18px;
    color: #444;
    max-width: 640px;
    margin: 0 auto 10px;
    line-height: 1.6;
}
.hero .proof-line {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}

/* ===== HERO OPT-IN ===== */
.hero-optin {
    max-width: 560px;
    margin: 28px auto 0;
    background: #fff;
    border-radius: 10px;
    padding: 24px 26px 18px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    border: 2px solid #e0e0e0;
}
.optin-cta-label {
    font-size: 15px;
    font-weight: 900;
    color: #cc0000;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.hero-optin-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.af-form-hero input[type="text"],
.af-form-hero input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    color: #222;
    outline: none;
    transition: border-color 0.2s;
}
.af-form-hero input[type="text"]:focus,
.af-form-hero input[type="email"]:focus { border-color: #e85d04; }
.af-form-hero input[type="text"]::placeholder,
.af-form-hero input[type="email"]::placeholder { color: #aaa; }
.af-form-hero input[type="submit"] {
    width: 100%;
    padding: 16px;
    font-size: 17px;
    font-weight: 900;
    background: linear-gradient(135deg, #e85d04, #cc0000);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.2s, transform 0.1s;
    box-shadow: 0 4px 14px rgba(204,0,0,0.35);
}
.af-form-hero input[type="submit"]:hover { opacity: 0.92; transform: translateY(-1px); }
.hero-privacy {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 10px;
}

/* ===== PROOF STRIP ===== */
.proof-strip {
    background: #111;
    padding: 14px 20px;
    text-align: center;
}
.proof-strip p {
    color: #ffcc00;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.proof-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.proof-logos .stat-pill {
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}
.proof-logos .stat-pill span { color: #2ecc40; }

/* ===== MAIN LAYOUT ===== */
.main-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

/* ===== SECTION LABELS ===== */
.section-label {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 10px;
}
.section-title {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.3;
}
.section-sub {
    text-align: center;
    font-size: 15px;
    color: #666;
    margin-bottom: 30px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ===== PROOF CARDS ===== */
.proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 40px;
}
.proof-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    border: 1px solid #e8e8e8;
}
.proof-card-stat {
    background: #f9f9f9;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #2ecc40;
    gap: 6px;
}
.proof-card-stat .big-num { font-size: 38px; font-weight: 900; color: #2ecc40; }
.proof-card-stat .big-label { font-size: 13px; color: #888; font-weight: bold; }
.proof-card-stat .big-sub { font-size: 12px; color: #aaa; }
.proof-card-body { padding: 14px 16px; }
.proof-card-body .brand { font-size: 15px; font-weight: bold; color: #111; margin-bottom: 3px; }
.proof-card-body .followers { font-size: 22px; font-weight: 900; color: #2ecc40; margin-bottom: 4px; }
.proof-card-body .platform { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.proof-card-body .desc { font-size: 13px; color: #555; line-height: 1.5; }

/* ===== BENEFITS BOX ===== */
.benefits-box {
    background: #fff;
    border-radius: 8px;
    border: 2px solid #2ecc40;
    padding: 28px 30px;
    margin-bottom: 36px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
.benefits-box h3 {
    font-size: 20px;
    font-weight: 900;
    color: #111;
    margin-bottom: 18px;
    text-align: center;
}
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.benefit-item:last-child { margin-bottom: 0; }
.benefit-check {
    background: #2ecc40;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.benefit-text { font-size: 15px; color: #333; line-height: 1.5; }
.benefit-text strong { color: #111; }

/* ===== OPTIN FORM (mid/bottom) ===== */
.optin-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 36px 30px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    margin-bottom: 36px;
    border: 2px solid #e0e0e0;
}
.optin-wrap .form-eyebrow {
    display: inline-block;
    background: #ffcc00;
    color: #111;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 14px;
    border-radius: 3px;
    margin-bottom: 14px;
}
.optin-wrap h2 {
    font-size: 26px;
    font-weight: 900;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.3;
}
.optin-wrap h2 span { color: #cc0000; }
.optin-wrap > p {
    font-size: 15px;
    color: #555;
    margin-bottom: 24px;
    line-height: 1.6;
}
#af-form-container { max-width: 480px; margin: 0 auto; }
.optin-wrap .privacy-note { font-size: 12px; color: #999; margin-top: 14px; }
.optin-wrap .privacy-note a { color: #aaa; }

/* ===== NUMBERS ROW ===== */
.numbers-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.number-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border-bottom: 3px solid #2ecc40;
}
.number-card .big { font-size: 32px; font-weight: 900; color: #2ecc40; }
.number-card .label { font-size: 13px; color: #666; margin-top: 4px; line-height: 1.4; }

/* ===== DIRECTORY TABLE ===== */
.dir-section {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dir-section-header {
    background: #111;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.dir-section-header h3 { font-size: 18px; font-weight: 900; color: #fff; }
.dir-section-header .count-pill {
    background: #2ecc40;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
}
.dir-table-wrap { overflow-x: auto; }
table.dir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.dir-table thead tr { background: #f5f5f5; }
table.dir-table thead th {
    padding: 10px 13px;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}
table.dir-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
table.dir-table tbody tr:last-child { border-bottom: none; }
table.dir-table tbody tr:hover { background: #f9fff9; }
table.dir-table tbody td { padding: 9px 13px; vertical-align: middle; }
.creator-name { font-weight: bold; color: #111; font-size: 13px; }
.handle-link { font-family: monospace; font-size: 12px; color: #0066cc; text-decoration: none; }
.handle-link:hover { text-decoration: underline; }
.metric { font-weight: 900; color: #2ecc40; white-space: nowrap; font-size: 14px; }
.desc-cell { color: #666; font-size: 12px; line-height: 1.4; max-width: 280px; }
.web-link { font-size: 12px; color: #2ecc40; text-decoration: none; font-weight: bold; }
.web-link:hover { text-decoration: underline; }

/* ===== NICHE TAGS ===== */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid;
}
.t-finance  { background: #fffbe6; border-color: #f0c040; color: #7a5c00; }
.t-science  { background: #edfff0; border-color: #2ecc40; color: #1a6b28; }
.t-world    { background: #e8f4ff; border-color: #4a9eff; color: #004080; }
.t-tech     { background: #f5eeff; border-color: #9b59b6; color: #5b2d8e; }
.t-geo      { background: #e8fffe; border-color: #1abc9c; color: #0d6e5a; }
.t-health   { background: #fff3e8; border-color: #e67e22; color: #7a3d00; }
.t-dataviz  { background: #ffe8f0; border-color: #e91e63; color: #880033; }
.t-culture  { background: #fffde8; border-color: #f39c12; color: #7a4e00; }
.t-env      { background: #edfff0; border-color: #27ae60; color: #145a32; }
.t-econ     { background: #fef9e7; border-color: #d4ac0d; color: #6e5500; }
.t-news     { background: #eaf2ff; border-color: #2980b9; color: #1a4a6e; }
.t-sport    { background: #f5eeff; border-color: #8e44ad; color: #4a1a6e; }

/* ===== BOTTOM PROOF PILLS ===== */
.bottom-proof {
    text-align: center;
    padding: 10px 0 0;
    margin-bottom: 40px;
}
.bottom-proof .label {
    font-size: 13px;
    color: #999;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
.proof-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.proof-pill {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.proof-pill span { color: #2ecc40; }

/* ===== FOOTER ===== */
.footer {
    background: #111;
    color: #666;
    text-align: center;
    padding: 20px;
    font-size: 12px;
    line-height: 1.7;
}
.footer strong { color: #e55; }
.footer a { color: #888; }

/* ===== RESPONSIVE ===== */
@media (max-width: 680px) {
    .hero h1 { font-size: 24px; }
    .proof-grid { grid-template-columns: 1fr; }
    .numbers-row { grid-template-columns: 1fr 1fr; }
    .optin-wrap { padding: 24px 18px; }
    .optin-wrap h2 { font-size: 20px; }
    .benefits-box { padding: 20px 18px; }
    .site-nav a { font-size: 11px; padding: 10px 10px; }
    table.dir-table { font-size: 12px; }
}