.elementor-23 .elementor-element.elementor-element-a3fb747{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-fb110fe *//*=========================================
  HAVIONEDGE WORD COUNTER
  PART 1 - GLOBAL FOUNDATION
==========================================*/


/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



/*=========================================
        ROOT VARIABLES
==========================================*/

:root{

    /* Brand Colors */

    --primary:#2563eb;

    --primary-dark:#1d4ed8;

    --primary-soft:#eff6ff;


    /* Status Colors */

    --success:#16a34a;

    --danger:#dc2626;

    --warning:#f59e0b;

    --purple:#7c3aed;


    /* Text */

    --heading:#0f172a;

    --text:#334155;

    --muted:#64748b;


    /* Background */

    --background:#f5f9ff;

    --white:#ffffff;


    /* Border */

    --border:#dbeafe;


    /* Shadows */

    --shadow-sm:
    0 5px 18px rgba(15,23,42,.05);


    --shadow-md:
    0 12px 35px rgba(37,99,235,.10);


    --shadow-lg:
    0 20px 50px rgba(15,23,42,.12);


    /* Radius */

    --radius-sm:12px;

    --radius-md:20px;

    --radius-lg:30px;


    /* Animation */

    --transition:.3s ease;

}



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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins',sans-serif;

    background:

    radial-gradient(
        circle at top right,
        rgba(37,99,235,.08),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(96,165,250,.08),
        transparent 35%
    ),

    var(--background);


    color:var(--text);

    font-size:15px;

    line-height:1.7;

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

}



/*=========================================
        BASIC ELEMENTS
==========================================*/

img{

    max-width:100%;

    display:block;

}


button,
textarea,
input{

    font-family:'Poppins',sans-serif;

}


button{

    cursor:pointer;

}


a{

    text-decoration:none;

    color:inherit;

}



/*=========================================
        MAIN CONTAINER
==========================================*/

.container{

    width:min(92%,1200px);

    margin:auto;

    padding:40px 0 70px;

}



/*=========================================
        COMMON CARD SYSTEM
==========================================*/

.section-card{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.section-card:hover{

    box-shadow:var(--shadow-md);

}



/*=========================================
        TEXT SELECTION
==========================================*/

::selection{

    background:var(--primary);

    color:#ffffff;

}



/*=========================================
        SCROLLBAR
==========================================*/

::-webkit-scrollbar{

    width:9px;

}


::-webkit-scrollbar-track{

    background:#eff6ff;

}


::-webkit-scrollbar-thumb{

    background:#93c5fd;

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}
/*=========================================
        HERO SECTION
        Premium Landing Style
==========================================*/


.hero{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:75px 40px 65px;

    background:

    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbff 45%,
        #eff6ff 100%
    );


    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    margin-bottom:35px;

}



/* Background Glow */

.hero::before{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    background:rgba(37,99,235,.10);

    border-radius:50%;

    top:-180px;

    right:-120px;

    filter:blur(10px);

}



.hero::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:rgba(96,165,250,.08);

    border-radius:50%;

    bottom:-120px;

    left:-100px;

    filter:blur(8px);

}



/*=========================================
        BADGE
==========================================*/


.badge{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:9px 20px;

    background:#eff6ff;

    color:var(--primary);

    border:1px solid #bfdbfe;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

    letter-spacing:.3px;

}



.badge::before{

    content:"";

    width:9px;

    height:9px;

    background:#22c55e;

    border-radius:50%;

    box-shadow:
    0 0 0 5px rgba(34,197,94,.15);

}



/*=========================================
        TITLE
==========================================*/


.hero h1{

    position:relative;

    z-index:2;

    margin-top:22px;

    color:var(--heading);

    font-size:clamp(32px,5vw,52px);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

}



.hero h1 span{

    color:var(--primary);

}



/*=========================================
        DESCRIPTION
==========================================*/


.hero p{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:20px auto 0;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;

}



/*=========================================
        OPTIONAL HERO BUTTONS
==========================================*/


.hero-buttons{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}



.hero-buttons a{

    padding:13px 28px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}



/* Primary */

.hero-buttons .primary{

    background:var(--primary);

    color:#ffffff;

    box-shadow:
    0 12px 25px rgba(37,99,235,.25);

}



.hero-buttons .primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}



/* Secondary */

.hero-buttons .secondary{

    background:#ffffff;

    color:var(--primary);

    border:1px solid var(--border);

}



.hero-buttons .secondary:hover{

    background:var(--primary-soft);

}



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


@media(max-width:768px){


    .hero{

        padding:55px 22px;

        border-radius:22px;

    }


    .hero h1{

        font-size:34px;

    }


    .hero p{

        font-size:14px;

    }


}


@media(max-width:480px){


    .hero h1{

        font-size:28px;

    }


    .hero-buttons{

        flex-direction:column;

    }


    .hero-buttons a{

        width:100%;

    }

}
/*=========================================
        STATS DASHBOARD
        Premium Analytics Cards
==========================================*/


.stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin:35px 0;

}



/*=========================================
        CARD
==========================================*/


.card{

    position:relative;

    overflow:hidden;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:24px;

    padding:28px 22px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



/* Top Line */

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #60a5fa
    );

}



/* Background Circle */

.card::after{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    background:rgba(37,99,235,.06);

    border-radius:50%;

    top:-55px;

    right:-45px;

}



/* Hover */

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

    border-color:#bfdbfe;

}



/*=========================================
        CARD TITLE
==========================================*/


.card h4{

    position:relative;

    z-index:2;

    color:var(--muted);

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.7px;

    margin-bottom:15px;

}



/*=========================================
        NUMBER
==========================================*/


.card h2{

    position:relative;

    z-index:2;

    color:var(--primary);

    font-size:34px;

    font-weight:800;

    line-height:1;

}



/* Optional Description */

.card p{

    position:relative;

    z-index:2;

    margin-top:12px;

    color:var(--muted);

    font-size:13px;

}



/*=========================================
        DIFFERENT CARD COLORS
==========================================*/


/* Words */

.card:nth-child(1)::before{

    background:linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );

}


.card:nth-child(1) h2{

    color:#2563eb;

}



/* Characters */

.card:nth-child(2)::before{

    background:linear-gradient(
        90deg,
        #16a34a,
        #4ade80
    );

}


.card:nth-child(2) h2{

    color:#16a34a;

}



/* Sentences */

.card:nth-child(3)::before{

    background:linear-gradient(
        90deg,
        #f59e0b,
        #fbbf24
    );

}


.card:nth-child(3) h2{

    color:#d97706;

}



/* Reading Time */

.card:nth-child(4)::before{

    background:linear-gradient(
        90deg,
        #7c3aed,
        #c084fc
    );

}


.card:nth-child(4) h2{

    color:#7c3aed;

}



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


@media(max-width:1000px){


    .stats{

        grid-template-columns:repeat(2,1fr);

    }


}



@media(max-width:600px){


    .stats{

        grid-template-columns:1fr;

        gap:18px;

    }


    .card{

        padding:24px 20px;

    }


    .card h2{

        font-size:30px;

    }


}
/*=========================================
        EDITOR SECTION
        Premium Writing Workspace
==========================================*/


.editor{

    position:relative;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:28px;

    padding:30px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.editor:hover{

    box-shadow:var(--shadow-md);

}



/*=========================================
        LIVE STATUS
==========================================*/


.live{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:9px 16px;

    margin-bottom:20px;

    background:#f0fdf4;

    color:var(--success);

    border:1px solid #bbf7d0;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}



.live span{

    width:10px;

    height:10px;

    background:#22c55e;

    border-radius:50%;

    animation:pulseLive 1.8s infinite;

}



/* Live Animation */

@keyframes pulseLive{


    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.5);

    }


    70%{

        box-shadow:0 0 0 12px rgba(34,197,94,0);

    }


    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }


}



/*=========================================
        TEXT AREA
==========================================*/


textarea{

    width:100%;

    min-height:340px;

    resize:vertical;

    outline:none;

    border:2px solid #e2e8f0;

    border-radius:22px;

    padding:25px;

    background:#fbfdff;

    color:var(--text);

    font-size:15px;

    line-height:1.9;

    transition:var(--transition);

}



/* Focus */

textarea:focus{

    background:#ffffff;

    border-color:var(--primary);

    box-shadow:

    0 0 0 5px rgba(37,99,235,.12);

}



/* Placeholder */

textarea::placeholder{

    color:#94a3b8;

}



/* Scrollbar */

textarea::-webkit-scrollbar{

    width:10px;

}



textarea::-webkit-scrollbar-track{

    background:#eff6ff;

    border-radius:20px;

}



textarea::-webkit-scrollbar-thumb{

    background:#93c5fd;

    border-radius:20px;

}



textarea::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}



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


@media(max-width:768px){


    .editor{

        padding:22px;

        border-radius:22px;

    }


    textarea{

        min-height:260px;

        padding:18px;

        font-size:14px;

    }


}
/*=========================================
        ACTION BUTTONS
        Premium Toolbar Design
==========================================*/


.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin:30px 0;

}



/*=========================================
        BASE BUTTON
==========================================*/


.buttons button{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:145px;

    height:52px;

    padding:0 26px;

    border-radius:15px;

    font-size:14px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    border:1px solid transparent;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}



/* Shine Effect */

.buttons button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    transition:.6s;

}



.buttons button:hover::before{

    left:130%;

}



.buttons button:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}



.buttons button:active{

    transform:scale(.96);

}



/*=========================================
        CUT BUTTON
==========================================*/


#cut{

    background:#fef2f2;

    color:#dc2626;

    border-color:#fecaca;

}



#cut:hover{

    background:#dc2626;

    color:#ffffff;

}



/*=========================================
        COPY BUTTON
==========================================*/


#copy{

    background:#eff6ff;

    color:#2563eb;

    border-color:#bfdbfe;

}



#copy:hover{

    background:#2563eb;

    color:#ffffff;

}



/*=========================================
        PASTE BUTTON
==========================================*/


#paste{

    background:#f0fdf4;

    color:#16a34a;

    border-color:#bbf7d0;

}



#paste:hover{

    background:#16a34a;

    color:#ffffff;

}



/*=========================================
        DOWNLOAD BUTTON
==========================================*/


#download{

    background:#f5f3ff;

    color:#7c3aed;

    border-color:#ddd6fe;

}



#download:hover{

    background:#7c3aed;

    color:#ffffff;

}



/*=========================================
        BUTTON FOCUS
==========================================*/


.buttons button:focus-visible{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(37,99,235,.20);

}



/*=========================================
        MOBILE
==========================================*/


@media(max-width:600px){


    .buttons{

        flex-direction:column;

        width:100%;

    }


    .buttons button{

        width:100%;

        min-width:unset;

    }


}
/*=========================================
        KEYWORD ANALYSIS
        Premium SEO Dashboard
==========================================*/


.keyword-box{

    margin-top:40px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:28px;

    padding:32px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.keyword-box:hover{

    box-shadow:var(--shadow-md);

}



/*=========================================
        TITLE
==========================================*/


.keyword-box h2{

    color:var(--heading);

    font-size:26px;

    font-weight:750;

    margin-bottom:10px;

}



.keyword-box p{

    color:var(--muted);

    font-size:14px;

    line-height:1.8;

}



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


.keyword-filter{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0;

}



.keyword-filter button{

    padding:10px 20px;

    background:#f8fbff;

    color:var(--primary);

    border:1px solid var(--border);

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    transition:var(--transition);

}



.keyword-filter button:hover,

.keyword-filter button.active{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:

    0 10px 20px rgba(37,99,235,.18);

}



/*=========================================
        TABLE WRAPPER
==========================================*/


.table-wrapper{

    overflow-x:auto;

    border-radius:20px;

    border:1px solid #edf2ff;

}



/*=========================================
        TABLE
==========================================*/


table{

    width:100%;

    min-width:650px;

    border-collapse:collapse;

}



thead{

    background:

    linear-gradient(
        90deg,
        #eff6ff,
        #f8fbff
    );

}



th{

    padding:16px;

    text-align:left;

    color:var(--heading);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}



td{

    padding:16px;

    color:var(--muted);

    font-size:14px;

    border-bottom:1px solid #eef2ff;

}



tbody tr{

    transition:.25s;

}



tbody tr:hover{

    background:#f8fbff;

}



tbody tr:last-child td{

    border-bottom:none;

}



/*=========================================
        RANK BADGES
==========================================*/


.rank-1,
.rank-2,
.rank-3{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}



/* 🥇 TOP 1 */

.rank-1{

    background:

    linear-gradient(
        135deg,
        #facc15,
        #eab308
    );

    box-shadow:

    0 8px 20px rgba(234,179,8,.30);

}



/* 🥈 TOP 2 */

.rank-2{

    background:

    linear-gradient(
        135deg,
        #cbd5e1,
        #94a3b8
    );

    box-shadow:

    0 8px 20px rgba(148,163,184,.30);

}



/* 🥉 TOP 3 */

.rank-3{

    background:

    linear-gradient(
        135deg,
        #fb923c,
        #ea580c
    );

    box-shadow:

    0 8px 20px rgba(234,88,12,.30);

}



/*=========================================
        KEYWORD BADGE
==========================================*/


.keyword-badge{

    display:inline-flex;

    padding:6px 14px;

    border-radius:50px;

    background:#eff6ff;

    color:var(--primary);

    font-size:12px;

    font-weight:600;

}



/*=========================================
        MOBILE
==========================================*/


@media(max-width:768px){


    .keyword-box{

        padding:22px;

        border-radius:22px;

    }


    .keyword-filter{

        flex-direction:column;

    }


    .keyword-filter button{

        width:100%;

    }


    th,
    td{

        padding:14px;

    }


}
/*=========================================
        SEO CONTENT SECTION
        Premium Article Design
==========================================*/


.seo-content{

    margin-top:40px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:30px;

    padding:45px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.seo-content:hover{

    box-shadow:var(--shadow-md);

}



/*=========================================
        HEADINGS
==========================================*/


.seo-content h2{

    position:relative;

    color:var(--heading);

    font-size:30px;

    font-weight:800;

    line-height:1.4;

    letter-spacing:-.5px;

    margin:45px 0 20px;

}



.seo-content h2:first-child{

    margin-top:0;

}



/* Heading Accent */

.seo-content h2::after{

    content:"";

    display:block;

    width:60px;

    height:4px;

    margin-top:12px;

    border-radius:20px;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        #60a5fa
    );

}



/*=========================================
        PARAGRAPHS
==========================================*/


.seo-content p{

    color:var(--muted);

    font-size:15px;

    line-height:2;

    margin-bottom:22px;

}



/*=========================================
        IMPORTANT WORDS
==========================================*/


.seo-content strong,

.seo-content b{

    color:var(--primary);

    font-weight:650;

}



/*=========================================
        LISTS
==========================================*/


.seo-content ul{

    margin:25px 0 30px;

    padding:0;

}



.seo-content li{

    position:relative;

    color:var(--muted);

    font-size:15px;

    line-height:1.9;

    padding-left:35px;

    margin-bottom:12px;

}



/* Custom Check */

.seo-content li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:3px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#eff6ff;

    color:var(--primary);

    font-size:12px;

    font-weight:700;

}



/*=========================================
        LINKS
==========================================*/


.seo-content a{

    color:var(--primary);

    font-weight:600;

    border-bottom:1px dashed #93c5fd;

    transition:.25s;

}



.seo-content a:hover{

    color:var(--primary-dark);

    border-bottom-style:solid;

}



/*=========================================
        INFO BOX (OPTIONAL)
==========================================*/


.seo-info{

    margin:30px 0;

    padding:25px;

    background:#f8fbff;

    border-left:4px solid var(--primary);

    border-radius:18px;

    color:var(--muted);

    line-height:1.8;

}



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


@media(max-width:768px){


    .seo-content{

        padding:28px 22px;

        border-radius:22px;

    }


    .seo-content h2{

        font-size:23px;

    }


    .seo-content p,

    .seo-content li{

        font-size:14px;

    }


}
/*=========================================
        FAQ SECTION
        Premium Accordion UI
==========================================*/


.faq{

    margin-top:40px;

}



/*=========================================
        FAQ TITLE (OPTIONAL)
==========================================*/


.faq-title{

    color:var(--heading);

    font-size:28px;

    font-weight:800;

    margin-bottom:25px;

}



/*=========================================
        QUESTION
==========================================*/


.faq h3{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    background:#ffffff;

    color:#1e3a8a;

    border:1px solid var(--border);

    border-radius:18px;

    padding:20px 24px;

    margin-top:16px;

    font-size:16px;

    font-weight:650;

    cursor:pointer;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



/* Plus Icon */

.faq h3::after{

    content:"+";

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border-radius:50%;

    background:#eff6ff;

    color:var(--primary);

    font-size:22px;

    font-weight:500;

}



/* Hover */

.faq h3:hover{

    transform:translateY(-3px);

    background:#f8fbff;

    border-color:#bfdbfe;

    box-shadow:var(--shadow-md);

}



/*=========================================
        ACTIVE QUESTION
==========================================*/


.faq h3.active{

    background:var(--primary);

    color:#ffffff;

    border-color:var(--primary);

}



.faq h3.active::after{

    content:"−";

    background:#ffffff;

    color:var(--primary);

}



/*=========================================
        ANSWER
==========================================*/


.faq p{

    background:#f8fbff;

    border-left:4px solid var(--primary);

    border-radius:0 16px 16px 0;

    padding:18px 24px;

    margin:12px 0 5px;

    color:var(--muted);

    font-size:14px;

    line-height:1.9;

}



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


@media(max-width:768px){


    .faq-title{

        font-size:23px;

    }


    .faq h3{

        padding:16px 18px;

        font-size:14px;

        border-radius:15px;

    }


    .faq h3::after{

        width:28px;

        height:28px;

        font-size:19px;

    }


    .faq p{

        padding:15px 18px;

        font-size:13px;

    }


}
/*=========================================
        LSI CONTENT BOX
        Premium Info Card
==========================================*/


.lsi-content{

    position:relative;

    overflow:hidden;

    margin-top:30px;

    padding:30px;

    background:

    linear-gradient(
        135deg,
        #ffffff,
        #f1f7ff
    );

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



.lsi-content:hover{

    box-shadow:var(--shadow-md);

}



/* Decorative Glow */

.lsi-content::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-90px;

    right:-70px;

    background:rgba(37,99,235,.10);

    border-radius:50%;

}



/* Heading */

.lsi-content h3{

    position:relative;

    color:var(--heading);

    font-size:22px;

    font-weight:750;

    margin-bottom:12px;

}



/* Paragraph */

.lsi-content p{

    position:relative;

    color:var(--muted);

    font-size:15px;

    line-height:1.9;

}



/*=========================================
        TOAST NOTIFICATION
==========================================*/


#toast{

    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    min-width:260px;

    max-width:420px;

    padding:15px 22px;

    background:#0f172a;

    color:#ffffff;

    border-radius:16px;

    font-size:14px;

    font-weight:500;

    box-shadow:

    0 20px 45px rgba(15,23,42,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s ease;

    z-index:9999;

}



/* Success Icon */

#toast::before{

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    background:#22c55e;

    color:#ffffff;

    border-radius:50%;

    font-weight:700;

}



/* Show State */

#toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* Error State Optional */

#toast.error::before{

    content:"!";

    background:#ef4444;

}



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


@media(max-width:600px){


    .lsi-content{

        padding:22px;

        border-radius:20px;

    }


    .lsi-content h3{

        font-size:19px;

    }


    .lsi-content p{

        font-size:14px;

    }


    #toast{

        left:15px;

        right:15px;

        bottom:20px;

        min-width:auto;

        justify-content:center;

        text-align:center;

    }


}
/*=========================================
        FINAL RESPONSIVE SYSTEM
        COMPLETE UI POLISH
==========================================*/


/*=========================================
        LARGE DESKTOP
==========================================*/


@media(max-width:1200px){


    .container{

        width:94%;

    }


}



/*=========================================
        TABLET
==========================================*/


@media(max-width:992px){


    .hero{

        padding:55px 30px;

    }


    .stats{

        grid-template-columns:repeat(2,1fr);

    }


    .seo-content{

        padding:35px;

    }


}



/*=========================================
        MOBILE TABLET
==========================================*/


@media(max-width:768px){


    body{

        font-size:14px;

    }


    .container{

        width:94%;

        padding-top:25px;

        padding-bottom:45px;

    }



    /* Hero */

    .hero{

        padding:45px 20px;

        border-radius:22px;

    }


    .hero h1{

        font-size:34px;

    }



    /* Stats */

    .stats{

        grid-template-columns:1fr;

    }



    /* Editor */

    .editor{

        border-radius:22px;

    }



    /* SEO */

    .seo-content{

        padding:25px 20px;

        border-radius:22px;

    }



}



/*=========================================
        SMALL MOBILE
==========================================*/


@media(max-width:480px){


    .container{

        width:92%;

    }



    .hero h1{

        font-size:28px;

    }


    .hero p{

        font-size:13px;

    }



    .card{

        padding:22px 18px;

    }


    .card h2{

        font-size:28px;

    }



    .keyword-box{

        padding:20px;

    }



    .seo-content h2{

        font-size:21px;

    }



}



/*=========================================
        GLOBAL ANIMATION
==========================================*/


@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



.hero,
.card,
.editor,
.keyword-box,
.seo-content,
.faq,
.lsi-content{

    animation:fadeUp .6s ease both;

}



/*=========================================
        BUTTON & CARD SMOOTHNESS
==========================================*/


button,
.card,
.editor,
.keyword-box,
.seo-content,
.lsi-content,
.faq h3{

    will-change:transform;

}



/*=========================================
        ACCESSIBILITY
==========================================*/


button:focus-visible,
textarea:focus-visible,
a:focus-visible{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(37,99,235,.25);

}



/*=========================================
        REDUCE MOTION
==========================================*/


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


    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }


}/* End custom CSS */