/* ==========================================================
   FriendVilla UI Framework (FV)
   ========================================================== */

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

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

:root{

    --fv-primary:#6366F1;
    --fv-primary-hover:#4F46E5;

    --fv-success:#10B981;
    --fv-danger:#EF4444;
    --fv-warning:#F59E0B;

    --fv-dark:#0F172A;
    --fv-text:#334155;
    --fv-muted:#64748B;

    --fv-white:#FFFFFF;
    --fv-bg:#F8FAFC;

    --fv-border:#E2E8F0;

    --fv-radius-sm:10px;
    --fv-radius:16px;
    --fv-radius-lg:22px;
    --fv-radius-xl:28px;

    --fv-shadow-sm:0 4px 12px rgba(15,23,42,.05);
    --fv-shadow:0 12px 30px rgba(15,23,42,.08);
    --fv-shadow-lg:0 20px 60px rgba(15,23,42,.12);

    --fv-transition:.3s ease;

}

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--fv-bg);

    color:var(--fv-text);

    overflow-x:hidden;

}

a{

    text-decoration:none;

    transition:var(--fv-transition);

}

img{

    max-width:100%;

}

::selection{

    background:var(--fv-primary);

    color:#fff;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.fv-title{

    color:var(--fv-dark);

    font-weight:800;

    line-height:1.2;

}

.fv-title-xl{

    font-size:3.4rem;

}

.fv-title-lg{

    font-size:2.5rem;

}

.fv-title-md{

    font-size:2rem;

}

.fv-title-sm{

    font-size:1.5rem;

}

.fv-text{

    color:var(--fv-muted);

    line-height:1.8;

}

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

.fv-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    border:none;

    border-radius:14px;

    padding:.8rem 1.7rem;

    font-weight:600;

    transition:var(--fv-transition);

    cursor:pointer;

}

.fv-btn-primary{

    background:var(--fv-primary);

    color:#fff;

}

.fv-btn-primary:hover{

    background:var(--fv-primary-hover);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(99,102,241,.25);

}

.fv-btn-outline{

    border:2px solid var(--fv-primary);

    color:var(--fv-primary);

    background:#fff;

}

.fv-btn-outline:hover{

    background:var(--fv-primary);

    color:#fff;

}

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

.fv-card{

    background:#fff;

    border-radius:22px;

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

    border:1px solid rgba(226,232,240,.7);

    overflow:hidden;

}

/* ==========================================================
   INPUT
========================================================== */

.fv-input{

    height:58px;

    border-radius:16px;

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

    box-shadow:none;

    transition:var(--fv-transition);

}

.fv-input:focus{

    border-color:var(--fv-primary);

    box-shadow:0 0 0 .2rem rgba(99,102,241,.12);

}

/* ==========================================================
   NAVBAR
========================================================== */

.fv-navbar{

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.82);

    border-bottom:1px solid rgba(255,255,255,.5);

    transition:.3s;

}

.fv-navbar .navbar-brand{

    font-weight:800;

    color:var(--fv-dark);

}

.fv-navbar .nav-link{

    color:var(--fv-text);

    font-weight:500;

    position:relative;

    margin:0 .6rem;

}

.fv-navbar .nav-link:hover{

    color:var(--fv-primary);

}

.fv-navbar .nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:100%;

    height:2px;

    background:var(--fv-primary);

    transform:scaleX(0);

    transition:.3s;

}

.fv-navbar .nav-link:hover::after{

    transform:scaleX(1);

}

/* ==========================================================
   SECTION
========================================================== */

.fv-section{

    padding:90px 0;

}

/* ==========================================================
   UTILITIES
========================================================== */

.fv-bg{

    background:var(--fv-bg);

}

.fv-white{

    background:#fff;

}

.fv-shadow{

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

}

.fv-radius{

    border-radius:22px;

}

.fv-radius-lg{

    border-radius:28px;

}

.fv-text-primary{

    color:var(--fv-primary);

}

.fv-text-muted{

    color:var(--fv-muted);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--fv-primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eef2ff;

}

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

@media(max-width:992px){

    .fv-title-xl{

        font-size:2.6rem;

    }

    .fv-title-lg{

        font-size:2rem;

    }

    .fv-section{

        padding:70px 0;

    }

}

@media(max-width:768px){

    .fv-title-xl{

        font-size:2rem;

    }

    .fv-title-lg{

        font-size:1.6rem;

    }

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

.fv-hero{

    padding:90px 0;

}

.fv-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    background:#EEF2FF;

    color:var(--fv-primary);

    padding:10px 18px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

}

.fv-shortener{

    display:flex;

    gap:15px;

}

.fv-shortener .fv-input{

    flex:1;

}

.fv-preview-card{

    background:#fff;

    border-radius:24px;

    padding:25px;

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

    animation:floatCard 5s ease-in-out infinite;

}

.fv-browser{

    display:flex;

    gap:8px;

    margin-bottom:20px;

}

.fv-browser span{

    width:12px;

    height:12px;

    border-radius:50%;

}

.fv-browser span:nth-child(1){

    background:#EF4444;

}

.fv-browser span:nth-child(2){

    background:#F59E0B;

}

.fv-browser span:nth-child(3){

    background:#10B981;

}

.fv-demo-link{

    background:#F8FAFC;

    border-radius:12px;

    padding:15px;

    text-align:center;

    font-weight:600;

    color:var(--fv-dark);

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@media(max-width:992px){

    .fv-shortener{

        flex-direction:column;

    }

}
/*=========================================================
RESULT
=========================================================*/

.fv-result{

    margin-bottom:70px;

}

.fv-success-icon{

    font-size:60px;

    color:var(--fv-success);

}

.fv-result-link{

    display:flex;

    gap:15px;

}

.fv-result-link .fv-input{

    flex:1;

}

@media(max-width:768px){

.fv-result-link{

flex-direction:column;

}

}
/*=========================================================
STATISTICS
=========================================================*/

.fv-stat-card{

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

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

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

    transition:var(--fv-transition);

    height:100%;

}

.fv-stat-card:hover{

    transform:translateY(-8px);

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

}

.fv-stat-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF2FF;

    color:var(--fv-primary);

    font-size:30px;

    margin-bottom:20px;

}

.fv-stat-number{

    font-size:2rem;

    font-weight:800;

    color:var(--fv-dark);

}

.fv-stat-title{

    margin-top:8px;

    color:var(--fv-muted);

    font-weight:500;

}
/*=========================================================
PUBLIC LINKS
=========================================================*/

.fv-tabs{

    gap:10px;

}

.fv-tabs .nav-link{

    border-radius:30px;

    padding:10px 22px;

    color:var(--fv-text);

    font-weight:600;

}

.fv-tabs .nav-link.active{

    background:var(--fv-primary);

}

.fv-live-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 0;

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

}

.fv-live-card:last-child{

    border-bottom:none;

}

.fv-live-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#EEF2FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--fv-primary);

    font-size:22px;

    flex-shrink:0;

}

.fv-live-url{

    font-weight:700;

    color:var(--fv-dark);

    word-break:break-all;

}

.fv-live-url:hover{

    color:var(--fv-primary);

}

.fv-live-meta{

    margin-top:6px;

    color:var(--fv-muted);

    font-size:.9rem;

}

@media(max-width:768px){

.fv-live-card{

align-items:flex-start;

}

.fv-live-card .btn{

margin-left:auto;

}

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

.fv-feature-card{

    background:#fff;

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

    border-radius:22px;

    padding:35px 28px;

    height:100%;

    text-align:center;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.fv-feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#6366F1,#8B5CF6);

    transform:scaleX(0);

    transition:.35s;

}

.fv-feature-card:hover{

    transform:translateY(-8px);

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

}

.fv-feature-card:hover::before{

    transform:scaleX(1);

}

.fv-feature-icon{

    width:75px;

    height:75px;

    margin:auto auto 22px;

    border-radius:20px;

    background:#EEF2FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--fv-primary);

    font-size:32px;

    transition:.35s;

}

.fv-feature-card:hover .fv-feature-icon{

    background:var(--fv-primary);

    color:#fff;

    transform:rotate(-8deg) scale(1.08);

}

.fv-feature-card h5{

    font-weight:700;

    color:var(--fv-dark);

    margin-bottom:14px;

}

.fv-feature-card p{

    color:var(--fv-muted);

    margin:0;

    font-size:.95rem;

    line-height:1.7;

}
/*=========================================================
BUILT FOR EVERYONE
=========================================================*/

.fv-user-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

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

    text-align:center;

    transition:var(--fv-transition);

    height:100%;

}

.fv-user-card:hover{

    transform:translateY(-8px);

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

}

.fv-user-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF2FF;

    font-size:42px;

    margin-bottom:25px;

}

.fv-user-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.fv-user-card p{

    margin:0;

}
/*=========================================================
WHY SHORTEASY
=========================================================*/

.fv-why-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.fv-why-item:last-child{

    margin-bottom:0;

}

.fv-why-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:#EEF2FF;

    color:var(--fv-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    flex-shrink:0;

    transition:.3s;

}

.fv-why-item:hover .fv-why-icon{

    background:var(--fv-primary);

    color:#fff;

    transform:rotate(-10deg);

}

.fv-why-item h5{

    font-weight:700;

    margin-bottom:8px;

    color:var(--fv-dark);

}

.fv-why-item p{

    margin:0;

    color:var(--fv-muted);

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

.fv-price-card{

    position:relative;

    background:#fff;

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

    border-radius:24px;

    padding:40px;

    transition:.35s;

    height:100%;

}

.fv-price-card:hover{

    transform:translateY(-10px);

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

}

.fv-price{

    font-size:48px;

    font-weight:800;

    color:var(--fv-primary);

    margin:25px 0;

}

.fv-price span{

    font-size:18px;

    color:var(--fv-muted);

}

.fv-price-list{

    list-style:none;

    padding:0;

    margin:30px 0;

}

.fv-price-list li{

    padding:12px 0;

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

}

.fv-price-list i{

    color:var(--fv-success);

    margin-right:10px;

}

.fv-price-popular{

    border:2px solid var(--fv-primary);

    transform:scale(1.04);

}

.fv-popular{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    background:var(--fv-primary);

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

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

.fv-faq .accordion-item{

    border:none;

    border-radius:18px !important;

    overflow:hidden;

    margin-bottom:18px;

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

}

.fv-faq .accordion-button{

    background:#fff;

    color:var(--fv-dark);

    font-weight:600;

    padding:22px 26px;

    box-shadow:none;

}

.fv-faq .accordion-button:not(.collapsed){

    background:#EEF2FF;

    color:var(--fv-primary);

}

.fv-faq .accordion-button:focus{

    box-shadow:none;

}

.fv-faq .accordion-body{

    color:var(--fv-muted);

    line-height:1.8;

    padding:24px 26px;

}
/*=========================================================
CTA
=========================================================*/

.fv-cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#6366F1,#4F46E5);

    border-radius:32px;

    padding:70px;

    box-shadow:0 30px 70px rgba(79,70,229,.25);

}

.fv-cta::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-70px;

    top:-70px;

}

.fv-cta::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    left:-60px;

    bottom:-60px;

}

.fv-cta>*{

    position:relative;

    z-index:2;

}

.fv-btn-light{

    background:#fff;

    color:var(--fv-primary);

    border:2px solid #fff;

}

.fv-btn-light:hover{

    background:#f8fafc;

    color:var(--fv-primary);

}

.fv-btn-outline-light{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.4);

}

.fv-btn-outline-light:hover{

    background:#fff;

    color:var(--fv-primary);

}

@media(max-width:768px){

.fv-cta{

padding:40px 30px;

text-align:center;

}

.fv-btn-light,

.fv-btn-outline-light{

width:100%;

margin-top:12px;

}

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

.fv-final-cta{

    background:linear-gradient(135deg,#6366F1,#4338CA);

    border-radius:32px;

    padding:70px;

    position:relative;

    overflow:hidden;

}

.fv-final-cta::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-120px;

    right:-120px;

}

.fv-final-cta::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-100px;

    left:-80px;

}

.fv-final-cta>*{

    position:relative;

    z-index:2;

}

.fv-final-shortener{

    max-width:850px;

    margin:auto;

    background:#fff;

    border-radius:22px;

    padding:14px;

    display:flex;

    gap:15px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.fv-final-shortener .fv-input{

    border:none;

    box-shadow:none;

}

.fv-final-shortener .fv-input:focus{

    box-shadow:none;

}

@media(max-width:992px){

.fv-final-shortener{

flex-direction:column;

}

.fv-final-cta{

padding:50px 30px;

}

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

.fv-footer{

    background:#fff;

    padding:90px 0 35px;

    margin-top:80px;

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

}

.fv-footer h5{

    font-weight:700;

    margin-bottom:20px;

    color:var(--fv-dark);

}

.fv-footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.fv-footer ul li{

    margin-bottom:12px;

}

.fv-footer ul a{

    color:var(--fv-muted);

    transition:.3s;

}

.fv-footer ul a:hover{

    color:var(--fv-primary);

    padding-left:5px;

}

.fv-social{

    display:flex;

    gap:12px;

}

.fv-social a{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#EEF2FF;

    color:var(--fv-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    transition:.3s;

}

.fv-social a:hover{

    background:var(--fv-primary);

    color:#fff;

    transform:translateY(-4px);

}