/* ==========================================================
   LISTFORGE LANDING PAGE
   Tokens: ink #12231C, forge-green #0E6544, ember #C17817,
   paper #F6F8F5, paper-deep #EDF2ED, line #D8E3DC
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

.lf-landing{

    --lf-ink:#12231C;
    --lf-green:#0E6544;
    --lf-green-deep:#0A4E35;
    --lf-ember:#C17817;
    --lf-paper:#F6F8F5;
    --lf-paper-deep:#EDF2ED;
    --lf-line:#D8E3DC;

    position:relative;
    font-family:'Work Sans', sans-serif;
    color:var(--lf-ink);
    background:var(--lf-paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

.lf-landing *{
    box-sizing:border-box;
}

.lf-landing h1,
.lf-landing h2,
.lf-landing h3{
    font-family:'Fraunces', serif;
    color:var(--lf-ink);
    margin:0;
    text-align:inherit;
}

.lf-landing p{
    margin:0;
}

.lf-landing a{
    text-decoration:none;
}

.lf-landing .lf-eyebrow{
    display:block;
    text-align:center;
    font-size:14px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--lf-green);
    margin-bottom:22px;
}

.lf-landing .lf-section-title{
    text-align:center;
    font-size:48px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.015em;
    margin-bottom:72px;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

/* ==========================================================
   AMBIENT GLOW DECORATIONS
========================================================== */

.lf-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    z-index:0;
}

.lf-glow-a{
    width:520px;
    height:520px;
    top:-180px;
    right:-160px;
    background:radial-gradient(circle, rgba(14,101,68,.14), transparent 70%);
}

.lf-glow-b{
    width:420px;
    height:420px;
    bottom:-160px;
    left:-140px;
    background:radial-gradient(circle, rgba(193,120,23,.10), transparent 70%);
}

.lf-nav,
.lf-hero,
.lf-section,
.lf-final-cta,
.lf-footer{
    position:relative;
    z-index:1;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.lf-reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
}

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

@media (prefers-reduced-motion:reduce){

    .lf-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}

/* ==========================================================
   BUTTONS
========================================================== */

.lf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 28px;
    border-radius:11px;
    font-size:15px;
    font-weight:600;
    font-family:'Work Sans', sans-serif;
    transition:.2s ease;
    cursor:pointer;
    border:1.5px solid transparent;
    white-space:nowrap;
}

.lf-btn-primary{
    background:var(--lf-green);
    color:#fff;
}

.lf-btn-primary:hover{
    background:var(--lf-green-deep);
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(14,101,68,.25);
}

.lf-btn-ghost{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.25);
}

.lf-btn-ghost:hover{
    border-color:#4EDBA0;
    color:#4EDBA0;
}

.lf-btn-large{
    padding:18px 36px;
    font-size:16px;
    margin-top:12px;
}

.lf-btn-small{
    padding:9px 18px;
    font-size:13.5px;
}

/* ==========================================================
   NAV
========================================================== */

.lf-nav{
    padding:18px 32px;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    margin:0 !important;
    z-index:50;
    background:rgba(246,248,245,.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--lf-line);
}

.lf-nav-inner{
    max-width:1320px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.lf-nav-logo{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:19px;
}

.lf-nav-links{
    display:flex;
    gap:28px;
}

.lf-nav-links a{
    font-size:14px;
    font-weight:500;
    color:#43574C;
}

.lf-nav-links a:hover{
    color:var(--lf-green);
}

/* ==========================================================
   HERO
========================================================== */

.lf-hero{
    padding:150px 32px 90px;
    overflow:hidden;
    background:var(--lf-ink);
    position:relative;
}

.lf-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(14,101,68,.35) 1.5px, transparent 1.5px);
    background-size:34px 34px;
    opacity:.5;
    pointer-events:none;
}

/* ==========================================================
   ANIMATED EMBERS
========================================================== */

.lf-embers{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.lf-embers span{
    position:absolute;
    bottom:-20px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#C17817;
    box-shadow:0 0 8px 2px rgba(193,120,23,.8);
    opacity:0;
    animation:lf-ember-rise linear infinite;
}

.lf-embers span:nth-child(1){ left:6%;  width:3px; height:3px; animation-duration:9s;  animation-delay:0s;   }
.lf-embers span:nth-child(2){ left:14%; width:5px; height:5px; animation-duration:12s; animation-delay:1.5s; background:#4EDBA0; box-shadow:0 0 8px 2px rgba(78,219,160,.7); }
.lf-embers span:nth-child(3){ left:22%; width:3px; height:3px; animation-duration:8s;  animation-delay:3s;   }
.lf-embers span:nth-child(4){ left:33%; width:4px; height:4px; animation-duration:11s; animation-delay:.8s;  }
.lf-embers span:nth-child(5){ left:41%; width:3px; height:3px; animation-duration:10s; animation-delay:4s;   background:#4EDBA0; box-shadow:0 0 8px 2px rgba(78,219,160,.7); }
.lf-embers span:nth-child(6){ left:52%; width:5px; height:5px; animation-duration:13s; animation-delay:2.2s; }
.lf-embers span:nth-child(7){ left:61%; width:3px; height:3px; animation-duration:9s;  animation-delay:5s;   }
.lf-embers span:nth-child(8){ left:69%; width:4px; height:4px; animation-duration:11s; animation-delay:1s;   background:#4EDBA0; box-shadow:0 0 8px 2px rgba(78,219,160,.7); }
.lf-embers span:nth-child(9){ left:78%; width:3px; height:3px; animation-duration:8s;  animation-delay:3.6s; }
.lf-embers span:nth-child(10){ left:86%; width:4px; height:4px; animation-duration:12s; animation-delay:.3s; }
.lf-embers span:nth-child(11){ left:92%; width:3px; height:3px; animation-duration:10s; animation-delay:2.8s; }
.lf-embers span:nth-child(12){ left:48%; width:3px; height:3px; animation-duration:14s; animation-delay:4.6s; }

@keyframes lf-ember-rise{

    0%{
        transform:translate(0, 0);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{
        transform:translate(14px, -260px);
    }

    90%{
        opacity:.4;
    }

    100%{
        transform:translate(-10px, -520px);
        opacity:0;
    }

}

@media (prefers-reduced-motion:reduce){

    .lf-embers{
        display:none;
    }

}

.lf-hero-inner{
    max-width:1320px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.lf-hero-badge{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    color:#9AD9BE;
    background:rgba(14,101,68,.25);
    border:1px solid rgba(14,101,68,.5);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:22px;
}

.lf-hero-title-accent{
    background:linear-gradient(90deg, #4EDBA0, #C17817);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.lf-landing .lf-hero-title{
    font-size:clamp(30px, 3.6vw, 50px);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-.015em;
    margin-bottom:0 !important;
    color:#fff;
}

.lf-hero-sub{
    font-size:17px;
    color:#9FB3A8;
    max-width:480px;
    margin:32px 0 44px !important;
}

.lf-hero-actions{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:0 !important;
}

.lf-trust-strip{
    list-style:none;
    margin:32px 0 0 !important;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.lf-trust-strip li{
    font-size:13px;
    color:#8AA398;
    font-weight:500;
}

/* ==========================================================
   FORGE VISUAL (signature element)
========================================================== */

.lf-forge{
    display:flex;
    flex-direction:column;
    gap:0;
    position:relative;
}

.lf-forge-card{
    background:#fff;
    border:1px solid var(--lf-line);
    border-radius:16px;
    padding:22px 24px;
    box-shadow:0 16px 40px rgba(18,35,28,.06);
    position:relative;
}

.lf-forge-label{
    display:block;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:#8AA398;
    margin-bottom:10px;
}

.lf-forge-raw .lf-forge-scrawl{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:17px;
    color:#5B6E64;
    font-weight:400;
}

.lf-forge-track{
    position:relative;
    height:56px;
    margin-left:32px;
    border-left:2px dashed var(--lf-line);
}

.lf-ember{
    position:absolute;
    left:-6px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--lf-ember);
    box-shadow:0 0 0 4px rgba(193,120,23,.18), 0 0 14px rgba(193,120,23,.7);
    animation:lf-ember-travel 2.6s ease-in-out infinite;
}

@keyframes lf-ember-travel{
    0%{ top:0; opacity:0; }
    12%{ opacity:1; }
    88%{ opacity:1; }
    100%{ top:100%; opacity:0; }
}

.lf-forge-result{
    border-color:var(--lf-green);
    box-shadow:0 20px 46px rgba(14,101,68,.12);
}

.lf-forge-badge{
    position:absolute;
    top:-12px;
    right:20px;
    background:var(--lf-ember);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    padding:5px 12px;
    border-radius:999px;
    box-shadow:0 8px 18px rgba(193,120,23,.35);
}

.lf-result-title{
    display:block;
    font-family:'Fraunces', serif;
    font-size:18px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:14px;
}

.lf-result-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:14px;
}

.lf-result-tags span{
    font-size:11.5px;
    font-weight:600;
    color:var(--lf-green);
    background:var(--lf-paper-deep);
    padding:5px 11px;
    border-radius:999px;
}

.lf-result-desc{
    font-size:13.5px;
    color:#5B6E64;
}

/* ==========================================================
   SECTIONS (generic)
========================================================== */

.lf-section{
    padding:120px 40px;
}

.lf-section-alt{
    background:var(--lf-paper-deep);
}

.lf-section-inner{
    max-width:1320px;
    margin:0 auto;
    text-align:center;
}

.lf-capability-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    text-align:left;
}

.lf-capability{
    background:#fff;
    border:1px solid var(--lf-line);
    border-top:3px solid transparent;
    border-radius:16px;
    padding:32px 28px;
    transition:.25s;
}

.lf-capability:hover{
    border-top-color:var(--lf-green);
    transform:translateY(-4px);
    box-shadow:0 20px 44px rgba(18,35,28,.08);
}

.lf-capability-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    font-size:22px;
    background:var(--lf-paper-deep);
    border-radius:14px;
    margin-bottom:18px;
}

.lf-landing .lf-capability h3{
    font-size:19px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:12px;
}

.lf-capability p{
    font-size:14.5px;
    line-height:1.65;
    color:#516156;
}

/* ==========================================================
   FEATURES
========================================================== */

.lf-feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:48px;
    text-align:left;
}

.lf-feature{
    background:#fff;
    border:1px solid var(--lf-line);
    border-top:3px solid transparent;
    border-radius:16px;
    padding:36px 32px;
    transition:.25s;
}

.lf-feature:hover{
    border-top-color:var(--lf-green);
}

.lf-feature:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 44px rgba(18,35,28,.08);
}

.lf-feature-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    font-size:20px;
    background:var(--lf-paper-deep);
    border-radius:12px;
    margin-bottom:18px;
}

.lf-landing .lf-feature h3{
    font-size:19px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:12px;
}

.lf-feature p{
    font-size:15px;
    color:#516156;
}

/* ==========================================================
   SCREENSHOTS
========================================================== */

.lf-showcase{
    max-width:100%;
    margin:0 auto 64px;
}

.lf-showcase:last-child{
    margin-bottom:0;
}

.lf-browser-frame{
    background:#fff;
    border:1px solid var(--lf-line);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(18,35,28,.10);
}

.lf-browser-bar{
    display:flex;
    align-items:center;
    gap:7px;
    padding:14px 18px;
    background:var(--lf-paper-deep);
    border-bottom:1px solid var(--lf-line);
}

.lf-browser-bar span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--lf-line);
}

.lf-browser-frame img{
    display:block;
    width:100%;
    height:auto;
}

.lf-showcase-caption{
    text-align:center;
    font-size:14.5px;
    color:#516156;
    margin-top:20px !important;
}

/* ==========================================================
   STEPS
========================================================== */

.lf-steps{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:64px;
    text-align:center;
    position:relative;
}

.lf-steps-4{
    grid-template-columns:repeat(4, 1fr);
    gap:40px;
}

.lf-steps::before{
    content:"";
    position:absolute;
    top:30px;
    left:16%;
    right:16%;
    height:2px;
    background:repeating-linear-gradient(90deg, var(--lf-line) 0 8px, transparent 8px 16px);
    z-index:0;
}

.lf-steps-4::before{
    left:8%;
    right:8%;
}

.lf-step{
    position:relative;
    z-index:1;
}

.lf-step-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--lf-green);
    color:#fff;
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:24px;
    margin:0 auto 26px;
}

.lf-landing .lf-step h3{
    font-size:20px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:12px;
}

.lf-step p{
    font-size:15px;
    color:#516156;
}

/* ==========================================================
   PRICING
========================================================== */

.lf-pricing-inner{
    text-align:center;
}

.lf-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-bottom:48px;
    text-align:left;
}

.lf-pricing-note{
    color:#64748B;
    font-size:14px;
    margin:-24px 0 28px;
}

.lf-price-card{
    background:#fff;
    border:1px solid var(--lf-line);
    border-radius:16px;
    padding:34px 30px;
}

.lf-price-card-highlight{
    border-color:var(--lf-green);
    border-top:3px solid var(--lf-green);
    box-shadow:0 16px 36px rgba(14,101,68,.1);
}

.lf-price-label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8AA398;
    margin-bottom:10px;
}

.lf-price-value{
    display:block;
    font-family:'Fraunces', serif;
    font-size:30px;
    font-weight:600;
    color:var(--lf-green);
    margin-bottom:10px;
}

.lf-price-card p{
    font-size:14.5px;
    color:#516156;
}

/* ==========================================================
   FAQ
========================================================== */

.lf-faq-list{
    max-width:720px;
    margin:0 auto;
    text-align:left;
}

.lf-faq-item{
    border-bottom:1px solid var(--lf-line);
}

.lf-faq-question{
    width:100%;
    background:none;
    border:none;
    padding:22px 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    font-weight:600;
    color:var(--lf-ink);
    cursor:pointer;
    text-align:left;
}

.lf-faq-icon{
    flex-shrink:0;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--lf-paper-deep);
    color:var(--lf-green);
    font-size:16px;
    transition:.25s;
}

.lf-faq-item.lf-faq-open .lf-faq-icon{
    transform:rotate(45deg);
}

.lf-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.lf-faq-answer p{
    font-size:14.5px;
    color:#516156;
    padding:0 4px 22px;
}

/* ==========================================================
   FINAL CTA
========================================================== */

.lf-final-cta{
    background:var(--lf-ink);
    padding:100px 32px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.lf-final-cta::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(14,101,68,.35) 1.5px, transparent 1.5px);
    background-size:34px 34px;
    opacity:.5;
    pointer-events:none;
}

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

.lf-landing .lf-final-cta h2{
    color:#fff;
    font-size:34px;
    font-weight:600;
    line-height:1.2;
    margin-bottom:16px;
}

.lf-final-cta p{
    color:#B7C7BE;
    font-size:15.5px;
    margin-bottom:30px;
}

/* ==========================================================
   FOOTER
========================================================== */

.lf-footer{
    padding:36px 32px;
    border-top:1px solid var(--lf-line);
}

.lf-footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1320px;
    margin:0 auto;
    flex-wrap:wrap;
    gap:16px;
}

.lf-footer-logo{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:16px;
}

.lf-footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 22px;
}

.lf-footer-links a{
    font-size:13.5px;
    color:#5B6E64;
}

.lf-footer-links a:hover{
    color:var(--lf-green);
}

.lf-footer-copy{
    font-size:13px;
    color:#7A8C82;
}

.lf-footer-disclaimer{
    max-width:1320px;
    margin:20px auto 0 !important;
    font-size:11.5px;
    color:#9CACA2;
    text-align:center;
    line-height:1.5;
}

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

@media (max-width:1180px){

    .lf-steps-4{
        grid-template-columns:repeat(2, 1fr);
    }

    .lf-steps-4::before{
        display:none;
    }

}

@media (max-width:960px){

    .lf-hero-inner{
        grid-template-columns:1fr;
    }

    .lf-feature-grid,
    .lf-steps,
    .lf-capability-grid,
    .lf-benefit-grid,
    .lf-pricing-grid{
        grid-template-columns:1fr;
    }

    .lf-section-title{
        font-size:30px;
    }

    .lf-nav-links{
        display:none;
    }

}

@media (max-width:600px){

    .lf-hero{
        padding:110px 20px 56px;
    }

    .lf-section{
        padding:64px 20px;
    }

    .lf-hero-sub{
        max-width:none;
    }

    .lf-final-cta h2{
        font-size:26px;
    }

    .lf-footer-inner{
        flex-direction:column;
        text-align:center;
    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .lf-ember{
        animation:none;
        top:50%;
        opacity:1;
    }

}

/* ==========================================================
   FOOTER SEO CONTENT
========================================================== */

.lf-seo-content{
    background:var(--lf-paper-deep);
}

.lf-seo-copy{
    max-width:820px;
    margin:0 auto;
    text-align:left;
}

.lf-seo-copy h2{
    font-size:24px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:20px;
    color:var(--lf-ink);
}

.lf-seo-copy p{
    font-size:14px;
    line-height:1.75;
    color:#5B6E64;
    margin-bottom:18px;
}

.lf-seo-copy p:last-child{
    margin-bottom:0;
}

/* ==========================================================
   TEXT BLOCK (Why ListForge / Why SEO Matters)
========================================================== */

.lf-textblock{
    max-width:820px;
    margin:0 auto;
    text-align:left;
}

.lf-textblock p{
    font-size:17px;
    line-height:1.8;
    color:#43574C;
    margin-bottom:22px;
}

.lf-textblock p:last-child{
    margin-bottom:0;
}

/* ==========================================================
   BENEFIT GRID
========================================================== */

.lf-benefit-grid{
    max-width:1000px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    text-align:left;
}

.lf-benefit{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    border:1px solid var(--lf-line);
    border-radius:14px;
    padding:20px 22px;
    transition:.25s;
}

.lf-benefit:hover{
    border-color:#BFE3D1;
    box-shadow:0 14px 32px rgba(18,35,28,.07);
    transform:translateY(-2px);
}

.lf-benefit-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    font-size:20px;
    background:var(--lf-paper-deep);
    border-radius:12px;
}

.lf-benefit p{
    font-size:14.5px;
    font-weight:600;
    color:#334155;
    line-height:1.4;
}

/* ==========================================================
   PILL GRID (Who Is It For)
========================================================== */

.lf-pill-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    max-width:820px;
    margin:0 auto;
}

.lf-pill-grid span{
    background:#fff;
    border:1px solid var(--lf-line);
    color:#334155;
    font-size:15px;
    font-weight:600;
    padding:12px 22px;
    border-radius:999px;
    transition:.2s;
    cursor:default;
}

.lf-pill-grid span:hover{
    border-color:var(--lf-green);
    background:var(--lf-paper-deep);
    color:var(--lf-green);
    transform:translateY(-2px);
}

@media (max-width:600px){

    .lf-benefit-grid{
        grid-template-columns:1fr;
    }

}