/* =========================================================
   LEADJEN MEDIA — Blog & Insights
   Design tokens:
   Display  Fraunces (characterful serif, used for h1/h2/h3)
   Body/UI  Inter
   Sage     #e8e4d9 / #f5e8c8   (page background, warmth)
   Navy     #1a2744 / #1a2744   (ink, primary text, depth)
   Gold     #f5c842 / #f59e0b   (accent, CTAs, the "growth" signal)
   Signature: an animated upward "growth line" sparkline that
   draws itself in on hover across cards + the hero mockup —
   a literal nod to traffic/leads going up, this blog's subject.
========================================================= */

/* =========================
   RESET
========================= */

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

:root{
    --sage:#f7f7f7;
    --sage-deep:#eeeeee;
    --cream:#0f0f0f;
    --gold:#f5a623;
    --gold-deep:#ffb52e;
    --navy:#111111;
    --navy-deep:#0f0f0f;
    --ink:#111111;
    --ink-soft:#6b7280;
    --ink-faint:#9ca3af;
    --paper:#ffffff;

    --shadow-sm: 0 2px 10px rgba(26,39,68,.06);
    --shadow-md: 0 10px 28px rgba(26,39,68,.10);
    --shadow-lg: 0 22px 50px rgba(26,39,68,.16);

    --ease: cubic-bezier(.22,.9,.32,1);
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f7f7f7;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(245,200,66,.18), transparent 45%),
        radial-gradient(circle at 90% 0%, rgba(138, 155, 190, 0.06), transparent 40%);
    color:var(--navy);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

a{
    text-decoration:none;
    color:inherit;
}

img, svg{
    display:block;
}

/* Visible, deliberate focus state for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
li:focus-visible{
    outline:2px solid var(--navy-deep);
    outline-offset:3px;
    border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

/* =========================
   HERO SECTION
========================= */
.hero{
    position:relative;
    max-width:1200px;
    margin:24px auto 0;
    padding:72px clamp(24px,4vw,60px);
    min-height:320px;
    border-radius:32px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.75), transparent 28%),
        linear-gradient(135deg, #fffaf0 0%, #f8e8c6 42%, #f2c96f 100%);
    border:1px solid rgba(17,24,39,.07);
    box-shadow:
        0 24px 70px rgba(17,24,39,.10),
        inset 0 1px 0 rgba(255,255,255,.8);

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
    overflow:hidden;
    isolation:isolate;
}


/* Background pattern */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:32px;

    background:
    radial-gradient(
        circle at 85% 20%,
        rgba(245,166,35,.30),
        transparent 34%
    ),
    radial-gradient(
        circle at 15% 80%,
        rgba(255,255,255,.45),
        transparent 28%
    ),
    linear-gradient(
        120deg,
        rgba(255,255,255,.30) 0%,
        rgba(255,255,255,.06) 100%
    );

    pointer-events:none;
}



/* Hero content */
.hero-text{
    position:relative;
    z-index:2;
    max-width:560px;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-self:flex-start;
    margin-top:10px;
    animation:rise .8s var(--ease) both;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(17,24,39,.08);
    color:#8a4b00;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:4px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 16px;
    border-radius:999px;
    font-weight:700;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:#111827;
    color:#fff;
    box-shadow:0 12px 24px rgba(17,24,39,.15);
}

.btn-secondary{
    background:rgba(255,255,255,.72);
    color:#111827;
    border:1px solid rgba(17,24,39,.08);
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    max-width:480px;
    margin-top:8px;
}

.hero-stat{
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.7);
    border:1px solid rgba(17,24,39,.06);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

.hero-stat strong{
    display:block;
    font-size:1rem;
    color:#111827;
}

.hero-stat span{
    font-size:.82rem;
    color:#4b5563;
}

.hero-text h1{

    font-family:'Fraunces',serif;

    font-size:3.5rem;

    font-weight:800;

    font-style:italic;

    color:#111827;

    line-height:1.1;

    letter-spacing:-1px;
    text-shadow:0 1px 0 rgba(255,255,255,.45);

    margin:0 0 18px 0;
    text-align:left;
    transform:translateY(-2px);

}



.hero-text h1 span{

    color:#f5a623;

}



.hero-text p{

    max-width:500px;

    color:#4b5563;

    font-size:17px;
    font-weight:500;
    line-height:1.7;

}



/* Small accent line */
.hero-text::after{

    content:"";

    display:block;

    width:790px;

    height:4px;

    margin-top:25px;

    background:#111827;
    border-radius:10px;

}



/* Animation */

@keyframes rise{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* Optional glow circle */

.hero::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-140px;
    bottom:-170px;

    background:
        radial-gradient(circle, rgba(245,166,35,.36) 0%, rgba(245,166,35,.18) 38%, rgba(245,166,35,0) 70%);

    opacity:.95;
    filter:blur(80px);
    border-radius:50%;

}
/* =========================
   HERO MOCKUP
========================= */

.hero-illustration{
    width:min(320px, 100%);
    height:240px;
    position:relative;
    z-index:1;
    animation:rise .8s .1s var(--ease) both;
}

.browser-mockup{
    position:absolute;
    right:0;
    top:0;
    background:linear-gradient(145deg, #ffffff 0%, #fcfaf7 100%);
    width:196px;
    border-radius:18px;
    padding:14px;
    box-shadow:0 20px 45px rgba(17,24,39,.14);
    transform:rotate(1.2deg);
    border:1px solid rgba(17,24,39,.06);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}

.hero-floating-badge{
    position:absolute;
    top:2px;
    left:18px;
    z-index:3;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:#8a4b00;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    box-shadow:0 10px 24px rgba(17,24,39,.08);
}


.hero-illustration:hover .browser-mockup{
    transform:rotate(0deg) translateY(-3px);
    box-shadow:0 26px 56px rgba(26,39,68,.22);
}

.browser-dots{
    display:flex;
    gap:5px;
}

.browser-dots span{
    width:8px;
    height:8px;
    background:#e2e2e2;
    display:inline-block;
    border-radius:50%;
}

.browser-dots span:nth-child(1){background:#f06363;}
.browser-dots span:nth-child(2){background:#f7c45f;}
.browser-dots span:nth-child(3){background:#5dc98d;}

.browser-label{
    margin-top:9px;
    background:var(--navy-deep);
    color:#fff;
    text-align:center;
    font-size:15px;
    font-weight:800;
    letter-spacing:1.5px;
    padding:7px;
    border-radius:3px;
}

.blog-img-placeholder{
    height:42px;
    margin-top:9px;
    background:linear-gradient(120deg,#3b82c4,#2563eb 60%, var(--gold-deep));
    background-size:220% 100%;
    border-radius:6px;
    position:relative;
    overflow:hidden;
    animation:shimmer 5s linear infinite;
}

@keyframes shimmer{
    0%{background-position:0% 0;}
    100%{background-position:220% 0;}
}

.line{
    height:5px;
    background:#e7e7ec;
    margin-top:7px;
    border-radius:5px;
}

.long{ width:90%; }
.medium{ width:70%; }
.short{ width:50%; }

.speech-bubble{
    position:absolute;
    left:0;
    top:12px;
    background:var(--paper);
    padding:10px 12px;
    border-radius:12px;
    display:flex;
    gap:4px;
    align-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    animation:float 4.5s ease-in-out infinite;
}

.speech-bubble span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold-deep);
    animation:bounceDot 1.2s ease-in-out infinite;
}

.speech-bubble span:nth-child(2){ animation-delay:.15s; }
.speech-bubble span:nth-child(3){ animation-delay:.3s; }

@keyframes bounceDot{
    0%, 80%, 100%{ transform:translateY(0); opacity:.5; }
    40%{ transform:translateY(-4px); opacity:1; }
}

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

.magnifier{
    position:absolute;
    bottom:14px;
    left:64px;
    font-size:34px;
    filter:drop-shadow(0 6px 10px rgba(26,39,68,.25));
    animation:float 5s .3s ease-in-out infinite;
}

.plant{
    position:absolute;
    bottom:-4px;
    right:-2px;
    font-size:30px;
    transform-origin:bottom center;
    animation:sway 6s ease-in-out infinite;
}

@keyframes sway{
    0%, 100%{ transform:rotate(-3deg); }
    50%{ transform:rotate(3deg); }
}

/* =========================
   MAIN GRID
========================= */

.main-layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:45px;
    max-width:1100px;
    margin:48px auto;
    padding:0 25px;
}

/* =========================
   POSTS
========================= */

.posts-list{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.post-card{
    display:grid;
    grid-template-columns:220px 1fr;
    background:var(--paper);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
    opacity:0;
    transform:translateY(22px);
    animation:cardIn .6s var(--ease) forwards;
}

.post-card:nth-child(1){ animation-delay:.05s; }
.post-card:nth-child(2){ animation-delay:.15s; }
.post-card:nth-child(3){ animation-delay:.25s; }
.post-card:nth-child(4){ animation-delay:.35s; }
.post-card:nth-child(5){ animation-delay:.45s; }
.post-card:nth-child(6){ animation-delay:.55s; }
.post-card:nth-child(7){ animation-delay:.65s; }

@keyframes cardIn{
    to{ opacity:1; transform:translateY(0); }
}

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

/* THUMB COLORS */

.post-thumb{
    position:relative;
    padding:22px 18px;
    min-height:175px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    background-size:cover;
    background-position:center;
}

/* signature growth-line sparkline, drawn on card hover */
.post-thumb::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 46' fill='none'%3E%3Cpath d='M2 38 L40 30 L70 34 L100 16 L135 22 L170 6 L218 10' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:bottom -6px left -4px;
    background-size:115% auto;
    opacity:0;
    clip-path:inset(0 100% 0 0);
    transition:opacity .3s ease, clip-path .8s var(--ease);
}

.post-card:hover .post-thumb::after{
    opacity:.35;
    clip-path:inset(0 0 0 0);
}

.seo-bg{
    background-image:
        linear-gradient(150deg, rgba(224,48,48,.82), rgba(192,32,32,.88)),
        url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&q=80");
}
.lead-bg{
    background-image:
        linear-gradient(150deg, rgba(28,28,28,.85), rgba(5,5,5,.9)),
        url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80");
}
.design-bg{
    background-image:
        linear-gradient(150deg, rgba(52,87,166,.82), rgba(31,53,104,.88)),
        url("https://images.unsplash.com/photo-1559028012-481c04fa702d?w=600&q=80");
}
.marketing-bg{
    background-image:
        linear-gradient(150deg, rgba(22,163,107,.82), rgba(13,122,79,.88)),
        url("https://images.unsplash.com/photo-1533750349088-cd871a92f312?w=600&q=80");
}
.ads-bg{
    background-image:
        linear-gradient(150deg, rgba(245,158,11,.82), rgba(194,117,10,.88)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&q=80");
}
.social-bg{
    background-image:
        linear-gradient(150deg, rgba(139,92,246,.82), rgba(109,40,217,.88)),
        url("https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=600&q=80");
}

.thumb-label{
    position:relative;
    z-index:1;
    color:#fff;
    font-family:'Fraunces', serif;
    font-size:15px;
    font-weight:600;
    line-height:1.45;
}

.thumb-icon{
    position:relative;
    z-index:1;
    font-size:34px;
    align-self:flex-end;
    transition:transform .4s var(--ease);
}

.post-card:hover .thumb-icon{
    transform:translateY(-4px) scale(1.06);
}

.seo-text-badge{
    background:#fff;
    color:#e03030;
    padding:5px 10px;
    border-radius:8px;
    font-weight:800;
    font-size:13px;
    margin-left:6px;
}

/* CONTENT */

.post-content{
    padding:26px 28px;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.category-tag{
    font-size:11.5px;
    font-weight:800;
    letter-spacing:1.4px;
    width:fit-content;
}

.category-tag.seo{ color:#2563eb; }
.category-tag.lead{ color:var(--gold-deep); }
.category-tag.design{ color:#2563eb; }
.category-tag.marketing{ color:#0d7a4f; }
.category-tag.ads{ color:#c2750a; }
.category-tag.social{ color:#6d28d9; }

.post-content h2{
    font-family:'Fraunces', serif;
    font-size:21px;
    font-weight:600;
    color:var(--ink);
    line-height:1.3;
}

.post-content h2 a{
    background-image:linear-gradient(var(--gold-deep), var(--gold-deep));
    background-size:0% 2px;
    background-repeat:no-repeat;
    background-position:0 100%;
    transition:background-size .35s var(--ease), color .25s ease;
    padding-bottom:1px;
}

.post-content h2 a:hover{
    background-size:100% 2px;
    color:#111111;
}

.post-content p{
    color:var(--ink-soft);
    line-height:1.65;
    font-size:14.5px;
}

/* excerpt vs full description */

.excerpt{ margin:0; }

.full-description{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .45s var(--ease), opacity .35s ease, margin .45s var(--ease);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.full-description p{ margin:0; }

.post-card.is-expanded .full-description{
    max-height:800px;
    opacity:1;
    margin-top:4px;
}

.post-card.is-expanded .excerpt{
    display:none;
}

.post-meta{
    margin-top:auto;
    display:flex;
    gap:18px;
    align-items:center;
    color:var(--ink-faint);
    font-size:12.5px;
    padding-top:6px;
}

.post-meta i{
    color:var(--gold-deep);
    margin-right:3px;
}

.read-more{
    margin-left:auto;
    color:var(--gold-deep);
    font-weight:700;
    background:none;
    border:none;
    cursor:pointer;
    font-size:13px;
    font-family:inherit;
    padding:6px 4px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border-radius:6px;
    transition:gap .25s var(--ease), color .2s ease;
}

.read-more:hover{
    gap:8px;
    color:#111111;
}

/* =========================
 SIDEBAR
========================= */

.sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.search-box{
    display:flex;
    background:var(--paper);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid transparent;
    transition:box-shadow .3s ease, border-color .3s ease;
}

.search-box:focus-within{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border-color:var(--gold);
}

.search-box input{
    flex:1;
    padding:14px 16px;
    border:none;
    outline:none;
    font-family:inherit;
    font-size:14.5px;
    background:transparent;
}

.search-box button{
    width:50px;
    border:none;
    background:var(--navy-deep);
    color:#fff;
    cursor:pointer;
    transition:background .2s ease;
}

.search-box button:hover{
    background:var(--gold-deep);
}

.sidebar-widget{
    background:var(--paper);
    padding:26px;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
    transition:box-shadow .3s ease;
}

.sidebar-widget:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.sidebar-widget h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    margin-bottom:18px;
    color:var(--ink);
    font-size:18px;
}

.category-list{
    list-style:none;
}

.category-list li{
    display:flex;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:10px;
    margin-bottom:7px;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background .25s ease, color .25s ease, transform .2s ease;
}

.category-list li:hover{
    background:var(--sage-deep);
    transform:translateX(2px);
}

.category-list li.active{
    background:#fff3dc;
    color:#f59e0b;
    font-weight:700;
}

.count{
    background:#edf2ff;
    padding:3px 11px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    transition:transform .25s var(--ease);
}

.category-list li.active .count{
    background:#ffe8b0;
    color:#f59e0b;
}

.category-list li:hover .count{
    transform:scale(1.08);
}

/* POPULAR POSTS */

.popular-posts{
    list-style:none;
}

.popular-posts li{
    display:flex;
    gap:12px;
    margin-bottom:16px;
    padding:6px;
    border-radius:10px;
    transition:background .25s ease;
}

.popular-posts li:hover{
    background:var(--sage-deep);
}

.pop-thumb{
    width:60px;
    height:50px;
    border-radius:9px;
    flex-shrink:0;
    transition:transform .3s var(--ease);
}

.popular-posts li:hover .pop-thumb{
    transform:scale(1.06) rotate(-2deg);
}

.pop-blue{ background:linear-gradient(145deg,#5b9fdc,#2f6cad); }
.pop-dark{ background:linear-gradient(145deg,#334155,#0f172a); }
.pop-red{ background:linear-gradient(145deg,#ec5b5f,#c5292e); }

.pop-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
}

.pop-info a{
    font-size:13.5px;
    font-weight:700;
    line-height:1.35;
    transition:color .2s ease;
}

.pop-info a:hover{
    color:var(--gold-deep);
}

.pop-info span{
    font-size:11.5px;
    color:var(--ink-faint);
}

/* =========================
 RESPONSIVE
========================= */

@media(max-width:900px){
    .main-layout{
        grid-template-columns:1fr;
    }
    .hero{
        flex-direction:column;
        text-align:center;
        padding:48px 32px;
    }
    .hero-text p{
        max-width:100%;
        margin:0 auto;
    }
}

@media(max-width:600px){
    .post-card{
        grid-template-columns:1fr;
    }
    .post-thumb{
        min-height:130px;
    }
    .hero-text h1{
        font-size:2.3rem;
    }
    .hero-illustration{
        display:none;
    }
}

/* =========================================================
   CTA BANNER + FOOTER
========================================================= */

/* -----------------------------
   CTA BANNER
----------------------------- */

.cta-banner{
    position:relative;
    margin:64px auto 0;
    max-width:1100px;
    padding:58px 60px;
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(135deg, #232323, #050505);
    text-align:center;
    box-shadow:0 30px 60px rgba(0,0,0,.25);
}

.cta-pattern{
    position:absolute;
    inset:0;
    opacity:.14;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.9) 18px 20px),
        repeating-linear-gradient(-45deg, transparent 0 18px, rgba(255,255,255,.9) 18px 20px);
    background-size:140px 140px;
    background-position:-20px -20px, 90% 110%;
    -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
    mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
}

.cta-inner{
    position:relative;
    z-index:1;
    max-width:620px;
    margin:0 auto;
}

.cta-eyebrow{
    display:inline-block;
    color:var(--gold);
    font-size:12px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.cta-banner h2{
    font-family:'Fraunces', serif;
    color:#fff;
    font-size:2.5rem;
    font-weight:700;
    line-height:1.25;
    margin-bottom:18px;
}

.cta-banner h2 span{
    color:var(--gold);
    font-style:italic;
}

.cta-banner p{
    color:#cbd5e1;
    font-size:16px;
    line-height:1.65;
    margin-bottom:32px;
}

.cta-btn{
    display:inline-block;
    position:relative;
    background:var(--gold);
    color:#ffffff;
    font-weight:700;
    font-size:15px;
    padding:15px 34px;
    border-radius:30px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease;
    box-shadow:0 10px 24px rgba(245,200,66,.0);
}

.cta-btn:hover{
    background:#25D366; /* WhatsApp Green */
    color:#ffffff;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(37,211,102,.35);
}

.cta-btn:hover i{
    color:#ffffff;
}
/* -----------------------------
   FOOTER
----------------------------- */

.site-footer{
    background:#0f0f0f;
    color:#cbd5e1;
    margin-top:64px;
    padding:72px 25px 0;
}

.footer-inner{
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:50px;
}

.footer-brand h3{
    font-family:'Fraunces', serif;
    color:#fff;
    font-size:21px;
    font-weight:700;
    margin-bottom:14px;
    letter-spacing:.5px;
}

.footer-brand p{
    font-size:14px;
    line-height:1.65;
    color:#94a3b8;
    max-width:280px;
    margin-bottom:22px;
}

.footer-social{
    display:flex;
    gap:10px;
}

.footer-social a{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid #3a3a3a;
    color:#cbd5e1;
    transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--ease);
}

.footer-social a svg{
    width:20px;
    height:20px;
    fill:currentColor;
}

.footer-social a:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:#ffffff;
    transform:translateY(-3px);
}

.footer-col h4{
    color:var(--gold);
    font-size:12px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.footer-col ul{
    list-style:none;
}

.footer-col ul li{
    margin-bottom:12px;
}

.cta-banner a,
.site-footer a{
    text-decoration:none;
    color:inherit;
}

.footer-col ul li a{
    font-size:14px;
    color:#cbd5e1;
    position:relative;
    transition:color .2s ease, padding-left .2s ease;
}

.footer-col ul li a:hover{
    color:var(--gold);
    padding-left:6px;
}

.footer-contact p{
    font-size:14px;
    line-height:1.65;
    color:#cbd5e1;
    margin-bottom:14px;
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.footer-contact p i{
    color:var(--gold);
    margin-top:3px;
}

.footer-contact a{ color:#cbd5e1; }

.footer-contact a:hover{ color:var(--gold); }

.footer-bottom{
    border-top:1px solid #262626;
    padding:24px 0;
    text-align:center;
}

.footer-bottom p{
    font-size:13px;
    color:#64748b;
}

/* -----------------------------
   FOOTER RESPONSIVE
----------------------------- */

@media(max-width:900px){
    .footer-inner{
        grid-template-columns:1fr 1fr;
    }
    .cta-banner{
        margin:44px 15px 0;
        padding:50px 30px;
    }
    .cta-banner h2{
        font-size:1.95rem;
    }
}

@media(max-width:600px){
    .footer-inner{
        grid-template-columns:1fr;
        gap:34px;
    }
    .cta-banner{
        border-radius:14px;
        padding:42px 24px;
    }
}

/* =========================================================
   COVER ART — animated, colored cover graphics inside post-thumb
   Each .post-thumb gets a small SVG scene parked in the upper-right
   icon corner — well clear of .thumb-label — so the heading text
   never sits inside the animated area and never appears to move.
   Colors are deliberate per category, not monochrome white linework.
========================================================= */

.cover-art{
    position:absolute;
    top:14px;
    right:14px;
    width:46%;
    height:62%;
    z-index:0;
    pointer-events:none;
}

.cover-svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.cover-svg circle,
.cover-svg path,
.cover-svg line,
.cover-svg rect{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* label and icon always sit above the art; no ambient/looping
   animation ever touches them (the existing hover-lift on
   .thumb-icon is a separate, deliberate one-off and still works) */
.thumb-label,
.thumb-icon{
    position:relative;
    z-index:2;
    animation:none;
}

/* ---- SEO: gold line chart climbing + cyan magnifier loop ---- */
.cover-seo .seo-line{
    stroke:#ffd44d;
    stroke-width:3.4;
    stroke-dasharray:340;
    stroke-dashoffset:340;
    opacity:.95;
    animation:drawLine 3.6s var(--ease) infinite;
}

.cover-seo .seo-dot{
    fill:#ffd44d;
    stroke:none;
    opacity:0;
    animation:dotPop 3.6s var(--ease) infinite;
}

.cover-seo .orbit-ring{
    stroke:#7dd3fc;
    stroke-width:1.6;
    opacity:.45;
    stroke-dasharray:4 6;
    animation:spin 14s linear infinite;
    transform-origin:170px 38px;
}

.cover-seo .seo-mag{
    stroke:#7dd3fc;
    stroke-width:2.6;
    opacity:.9;
    animation:magBob 3.6s ease-in-out infinite;
    transform-origin:170px 38px;
}

@keyframes drawLine{
    0%{ stroke-dashoffset:340; }
    55%{ stroke-dashoffset:0; }
    100%{ stroke-dashoffset:0; }
}

@keyframes dotPop{
    0%, 50%{ opacity:0; transform:scale(.4); }
    60%{ opacity:1; transform:scale(1.3); }
    70%, 100%{ opacity:.9; transform:scale(1); }
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

@keyframes magBob{
    0%, 100%{ transform:translate(0,0); }
    50%{ transform:translate(-3px,3px); }
}

/* ---- Lead Generation: gold target rings + red dart flying in ---- */
.cover-lead .ring{
    stroke:#ffd44d;
    stroke-width:2.2;
    opacity:.7;
}

.cover-lead .ring-1{ animation:ringPulse 2.6s ease-in-out infinite; }
.cover-lead .ring-2{ animation:ringPulse 2.6s .25s ease-in-out infinite; }
.cover-lead .ring-3{ animation:ringPulse 2.6s .5s ease-in-out infinite; }

.cover-lead .dart-point{
    fill:#ff5d5d;
    stroke:none;
}

.cover-lead .dart-shaft,
.cover-lead .dart-fin{
    stroke:#ff5d5d;
    stroke-width:2.6;
    stroke-dasharray:160;
    stroke-dashoffset:160;
    animation:dartFly 3s var(--ease) infinite;
}

.cover-lead .dart-fin{
    fill:#ff5d5d;
    stroke:none;
    opacity:0;
    animation:finIn 3s var(--ease) infinite;
}

@keyframes ringPulse{
    0%, 100%{ transform:scale(1); opacity:.45; }
    50%{ transform:scale(1.08); opacity:.85; }
}

@keyframes dartFly{
    0%{ stroke-dashoffset:160; opacity:.95; }
    60%{ stroke-dashoffset:0; opacity:.95; }
    100%{ stroke-dashoffset:0; opacity:.95; }
}

@keyframes finIn{
    0%, 55%{ opacity:0; }
    65%, 100%{ opacity:.95; }
}

/* ---- Web Design: sky-blue wireframe drawing + gold cursor click ---- */
.cover-design .wf-screen{
    stroke:#7dd3fc;
    stroke-width:2;
    opacity:.75;
}

.cover-design .wf-line{
    stroke:#e8f3ff;
    stroke-width:2.6;
    stroke-dasharray:80;
    stroke-dashoffset:80;
    animation:wfDraw 3.4s var(--ease) infinite;
}

.cover-design .wf-line-2{ animation-delay:.15s; }
.cover-design .wf-line-3{ animation-delay:.3s; }

.cover-design .wf-btn{
    fill:#ffd44d;
    stroke:none;
    opacity:0;
    animation:btnIn 3.4s var(--ease) infinite;
    animation-delay:.5s;
}

.cover-design .wf-cursor{
    fill:#ffffff;
    stroke:none;
    opacity:.9;
    animation:cursorClick 3.4s var(--ease) infinite;
}

@keyframes wfDraw{
    0%{ stroke-dashoffset:80; }
    45%{ stroke-dashoffset:0; }
    100%{ stroke-dashoffset:0; }
}

@keyframes btnIn{
    0%, 60%{ opacity:0; transform:scale(.6); }
    72%{ opacity:1; transform:scale(1.15); }
    85%, 100%{ opacity:.95; transform:scale(1); }
}

@keyframes cursorClick{
    0%, 100%{ transform:translate(0,0) scale(1); }
    45%{ transform:translate(-4px,3px) scale(1); }
    55%{ transform:translate(-4px,3px) scale(.85); }
    65%{ transform:translate(0,0) scale(1); }
}

/* ---- Digital Marketing: mint broadcast rings + gold rising bars ---- */
.cover-marketing .bcast-rings circle{
    stroke:#6ee7b7;
    stroke-width:2;
    opacity:0;
    transform-origin:170px 42px;
    animation:bcastPing 2.8s ease-out infinite;
}

.cover-marketing .bcast-rings circle:nth-child(2){ animation-delay:.4s; }
.cover-marketing .bcast-rings circle:nth-child(3){ animation-delay:.8s; }

.cover-marketing .bars-bar{
    stroke:#ffd44d;
    stroke-width:8;
    stroke-dasharray:80;
    stroke-dashoffset:80;
    animation:barRise 3.2s var(--ease) infinite;
}

.cover-marketing .bar-2{ animation-delay:.12s; }
.cover-marketing .bar-3{ animation-delay:.24s; }
.cover-marketing .bar-4{ animation-delay:.36s; }

@keyframes bcastPing{
    0%{ opacity:.75; transform:scale(.5); }
    80%{ opacity:0; transform:scale(1.4); }
    100%{ opacity:0; transform:scale(1.4); }
}

@keyframes barRise{
    0%{ stroke-dashoffset:80; opacity:.6; }
    60%{ stroke-dashoffset:0; opacity:1; }
    100%{ stroke-dashoffset:0; opacity:1; }
}

/* ---- Google Ads: gold coin stacks growing + white cursor click ---- */
.cover-ads .coin-stack{
    stroke:#fff3cf;
    stroke-width:7;
    stroke-dasharray:60;
    stroke-dashoffset:60;
    animation:coinGrow 3.2s var(--ease) infinite;
}

.cover-ads .stack-2{ animation-delay:.15s; }
.cover-ads .stack-3{ animation-delay:.3s; }

.cover-ads .coin-top{
    fill:#ffe27a;
    stroke:#fff3cf;
    stroke-width:1.5;
    opacity:0;
    animation:coinCap 3.2s var(--ease) infinite;
}

.cover-ads .coin-top:nth-of-type(1){ animation-delay:0s; }

.cover-ads .ad-cursor{
    fill:#ffffff;
    stroke:none;
    opacity:.9;
    animation:cursorClick 3.2s var(--ease) infinite;
}

@keyframes coinGrow{
    0%{ stroke-dashoffset:60; }
    55%{ stroke-dashoffset:0; }
    100%{ stroke-dashoffset:0; }
}

@keyframes coinCap{
    0%, 45%{ opacity:0; transform:scale(.5); }
    58%{ opacity:1; transform:scale(1.2); }
    70%, 100%{ opacity:.95; transform:scale(1); }
}

/* ---- Social Media: white phone outline + pink/red hearts popping ---- */
.cover-social .phone-body{
    stroke:#e9d8ff;
    stroke-width:2.4;
    opacity:.7;
}

.cover-social .phone-notch{
    stroke:#e9d8ff;
    stroke-width:3;
    opacity:.7;
}

.cover-social .heart-pop{
    fill:#ff5d8f;
    stroke:none;
    opacity:0;
    transform-origin:center;
    animation:heartPop 3s var(--ease) infinite;
}

.cover-social .heart-2{
    fill:#ffd44d;
    animation-delay:.5s;
}

.cover-social .like-spark{
    fill:#ffd44d;
    stroke:none;
    opacity:0;
    animation:sparkle 3s ease-in-out infinite;
}

.cover-social .spark-2{ animation-delay:.6s; }

@keyframes heartPop{
    0%, 15%{ opacity:0; transform:scale(.3) translateY(6px); }
    30%{ opacity:1; transform:scale(1.15) translateY(-2px); }
    45%{ transform:scale(1) translateY(0); }
    75%, 100%{ opacity:0; transform:scale(.9) translateY(-14px); }
}

@keyframes sparkle{
    0%, 40%{ opacity:0; transform:scale(.5); }
    55%{ opacity:1; transform:scale(1.3); }
    70%, 100%{ opacity:0; transform:scale(.6); }
}

/* Respect reduced-motion preference for all cover art */
@media (prefers-reduced-motion: reduce){
    .cover-art *{
        animation:none !important;
    }
}