/*==================================================
                ZYRACARDS v5
====================================================*/

:root{

    --bg:#06070A;

    --surface:#111319;

    --surface-2:#171B24;

    --card:#1E2430;

    --gold:#FFD54A;

    --gold-light:#FFE589;

    --white:#FFFFFF;

    --text:#D8DCE7;

    --muted:#9AA3B2;

    --border:rgba(255,255,255,.08);

    --glass:rgba(255,255,255,.04);

    --shadow:

    0 30px 80px rgba(0,0,0,.45);

    --radius:22px;

    --transition:.35s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:

    radial-gradient(circle at top,#1A1F2E 0%,#090A0F 55%,#050507 100%);

    color:var(--text);

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

    overflow-x:hidden;

    min-height:100vh;

}

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

img{

    max-width:100%;

    display:block;

}

button{

    font:inherit;

    border:none;

    cursor:pointer;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

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

.container{

    width:min(1320px,92%);

    margin:auto;

}

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

section{

    position:relative;

    padding:120px 0;

}

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

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header h2{

    font-size:52px;

    line-height:1.1;

    color:var(--white);

    margin:18px 0;

}

.section-header p{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    line-height:1.8;

    font-size:17px;

}

/*==================================================
            TAG
====================================================*/

.section-tag,

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    border:1px solid rgba(255,213,74,.20);

    background:

    rgba(255,213,74,.08);

    color:var(--gold);

    font-size:14px;

    font-weight:700;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    color:#111;

    background:

    linear-gradient(

        135deg,

        var(--gold),

        var(--gold-light)

    );

    box-shadow:

    0 15px 40px rgba(255,213,74,.25);

}

.btn-primary:hover{

    transform:

    translateY(-3px);

}

.btn-secondary,

.btn-outline{

    color:var(--white);

    background:transparent;

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

}

.btn-outline:hover,

.btn-secondary:hover{

    border-color:var(--gold);

    color:var(--gold);

}

/*==================================================
            LOGO
====================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--white);

    font-size:26px;

    font-weight:800;

}

.logo-icon{

    width:46px;

    height:46px;

    border-radius:16px;

    display:grid;

    place-items:center;

    background:

    linear-gradient(

        135deg,

        var(--gold),

        #FFB800

    );

    color:#111;

    font-size:20px;

    box-shadow:

    0 10px 30px rgba(255,213,74,.25);

}

.gold{

    color:var(--gold);

}


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

.navbar{

    position:fixed;

    top:24px;

    left:50%;

    transform:translateX(-50%);

    width:min(1320px,92%);

    z-index:1000;

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

    border-radius:24px;

    background:rgba(10,12,18,.72);

    backdrop-filter:blur(22px);

    transition:var(--transition);

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:78px;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:40px;

}

.nav-menu a{

    color:var(--muted);

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--gold);

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:16px;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:170px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:100px;

    align-items:center;

}

.hero-content h1{

    margin:28px 0;

    font-size:74px;

    line-height:1.05;

    font-weight:900;

    color:var(--white);

    letter-spacing:-3px;

}

.hero-content h1 span{

    background:linear-gradient(
        135deg,
        var(--gold),
        #FFD96A,
        #FFFFFF
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-content p{

    max-width:620px;

    font-size:19px;

    line-height:1.9;

    color:var(--muted);

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin:42px 0;

}

.hero-rating{

    display:flex;

    align-items:center;

    gap:18px;

}

.stars{

    color:var(--gold);

    font-size:22px;

    letter-spacing:2px;

}

.hero-rating span{

    color:var(--muted);

}

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

.hero-preview{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
                PHONE
====================================================*/

.phone{

    position:relative;

    width:320px;

    height:650px;

    border-radius:42px;

    background:#11141C;

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    box-shadow:

        0 35px 90px rgba(0,0,0,.45),

        0 0 0 10px rgba(255,255,255,.02);

}

.phone-notch{

    position:absolute;

    top:16px;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:28px;

    border-radius:20px;

    background:#060606;

}

.phone-banner{

    height:170px;

    background:linear-gradient(
        135deg,
        #FFD54A,
        #FFB800
    );

}

.phone-avatar{

    width:96px;

    height:96px;

    border-radius:50%;

    margin:-48px auto 18px;

    border:5px solid #11141C;

    background:linear-gradient(
        135deg,
        #ffffff,
        #d8d8d8
    );

}

.phone-profile{

    text-align:center;

}

.phone-profile h3{

    color:white;

    font-size:26px;

}

.phone-profile p{

    color:var(--muted);

    margin-top:6px;

}

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

.phone-links{

    padding:28px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.link-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 20px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.05);

    transition:var(--transition);

}

.link-card:hover{

    transform:translateY(-3px);

    border-color:rgba(255,213,74,.28);

}

.link-card span{

    font-size:22px;

}

.link-card p{

    flex:1;

    color:white;

    font-weight:600;

}

.link-card i{

    color:var(--gold);

    font-style:normal;

}

/*==================================================
            FLOATING CARDS
====================================================*/

.floating-card{

    position:absolute;

    padding:14px 22px;

    border-radius:18px;

    background:rgba(18,20,28,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    color:white;

    font-weight:600;

    box-shadow:0 15px 45px rgba(0,0,0,.35);

}

.card-1{

    top:80px;

    left:-50px;

}

.card-2{

    right:-70px;

    top:240px;

}

.card-3{

    left:-30px;

    bottom:90px;

}

/*==================================================
                IDENTITY
====================================================*/

.identity{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.015),
        transparent
    );

}

.identity-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:110px;

    align-items:center;

}

.identity-content h2{

    margin:22px 0;

    font-size:60px;

    line-height:1.1;

    color:var(--white);

    letter-spacing:-2px;

}

.identity-content h2 span{

    color:var(--gold);

}

.identity-content p{

    margin:30px 0;

    color:var(--muted);

    line-height:1.9;

    font-size:18px;

}

/*==================================================
            IDENTITY LIST
====================================================*/

.identity-list{

    display:grid;

    gap:18px;

}

.identity-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 24px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.06);

    transition:var(--transition);

}

.identity-item:hover{

    transform:translateX(8px);

    border-color:rgba(255,213,74,.28);

}

.identity-item i{

    color:var(--gold);

    font-style:normal;

    font-size:18px;

}

.identity-item span{

    color:white;

    font-weight:600;

}

/*==================================================
            IDENTITY PREVIEW
====================================================*/

.identity-preview{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.identity-phone{

    width:310px;

    padding:34px;

    border-radius:36px;

    background:

    linear-gradient(
        180deg,
        #161B24,
        #0F1218
    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 35px 90px rgba(0,0,0,.40);

}

.identity-avatar{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    font-weight:700;

    color:#111;

    background:

    linear-gradient(
        135deg,
        var(--gold),
        #FFB800
    );

}

.identity-phone h3{

    margin-top:22px;

    text-align:center;

    color:white;

    font-size:28px;

}

.identity-phone p{

    margin-top:8px;

    text-align:center;

    color:var(--muted);

}

.identity-links{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:34px;

}

.identity-links div{

    padding:16px 20px;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.05);

    color:white;

    transition:var(--transition);

}

.identity-links div:hover{

    transform:translateX(6px);

    border-color:rgba(255,213,74,.25);

}

/*==================================================
        FLOATING SOCIALS
====================================================*/

.floating-social{

    position:absolute;

    padding:14px 22px;

    border-radius:18px;

    background:rgba(18,20,28,.86);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 15px 40px rgba(0,0,0,.35);

    color:white;

    font-weight:600;

}

.instagram{

    left:-40px;

    top:40px;

}

.github{

    right:-50px;

    top:180px;

}

.discord{

    left:-20px;

    bottom:140px;

}

.spotify{

    right:-60px;

    bottom:60px;

}

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

.features{

    position:relative;

}

.features-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}

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

.feature-card{

    padding:36px;

    border-radius:28px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.06);

    transition:var(--transition);

    overflow:hidden;

    position:relative;

}

.feature-card:hover{

    transform:

    translateY(-10px);

    border-color:

    rgba(255,213,74,.25);

    box-shadow:

    0 25px 70px rgba(0,0,0,.35);

}

.feature-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    background:

    linear-gradient(
        135deg,
        var(--gold),
        #FFB800
    );

    color:#111;

    margin-bottom:28px;

}

.feature-card h3{

    color:white;

    font-size:26px;

    margin-bottom:18px;

}

.feature-card p{

    color:var(--muted);

    line-height:1.8;

    font-size:16px;

}


/*==================================================
                    THEMES
====================================================*/

.themes{

    position:relative;

}

.themes-grid{

    display:grid;

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

    gap:40px;

    align-items:start;

}


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

.theme-card{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.08);

    transition:.4s ease;

}

.theme-card:hover{

    transform:
    translateY(-12px);

    border-color:
    rgba(255,213,74,.25);

    box-shadow:
    0 30px 70px rgba(0,0,0,.35);

}


/*==================================================
                HEADER
====================================================*/

.theme-header{

    padding:28px;

    text-align:center;

    color:white;

    font-size:26px;

    font-weight:800;

}


/*==================================================
                DEVICE
====================================================*/

.theme-device{

    display:flex;

    justify-content:center;

    padding:10px 30px 40px;

    position:relative;

}


/*==================================================
                PHONE
====================================================*/

.theme-screen{

    position:relative;

    width:280px;

    min-height:560px;

    border-radius:42px;

    overflow:hidden;

    background:#11141C;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

    transition:.35s ease;

}

.theme-card:hover .theme-screen{

    transform:

    scale(1.02);

}


/*==================================================
                BANNER
====================================================*/

.profile-banner{

    height:170px;

}


/*==================================================
                AVATAR
====================================================*/

.profile-avatar{

    width:96px;

    height:96px;

    border-radius:50%;

    margin:-48px auto 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    color:white;

    border:5px solid #11141C;

}


/*==================================================
                PROFILE
====================================================*/

.profile-info{

    text-align:center;

    margin-bottom:26px;

}

.profile-info h3{

    color:white;

    font-size:26px;

}

.profile-info p{

    margin-top:6px;

    color:var(--muted);

}


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

.theme-button{

    display:block;

    width:82%;

    margin:auto;

    padding:15px;

    border-radius:999px;

    border:none;

    background:

    linear-gradient(
        135deg,
        var(--gold),
        #FFB800
    );

    color:#111;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.theme-button:hover{

    transform:

    scale(1.03);

}


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

.theme-links{

    padding:28px;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.theme-link{

    padding:16px 18px;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.05);

    color:white;

    transition:.3s;

}

.theme-link:hover{

    transform:

    translateX(6px);

}


/*==================================================
            GITHUB
====================================================*/

.github-widget{

    margin:28px;

    padding:22px;

    border-radius:20px;

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

    border:1px solid rgba(255,255,255,.06);

}

.widget-title{

    color:white;

    font-weight:700;

    margin-bottom:18px;

}

.widget-stats{

    display:grid;

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

    gap:16px;

    text-align:center;

}

.widget-stats strong{

    display:block;

    color:var(--gold);

    font-size:22px;

}

.widget-stats span{

    color:var(--muted);

    font-size:13px;

}


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

.status-online{

    width:max-content;

    margin:0 auto 20px;

    padding:8px 18px;

    border-radius:999px;

    background:#14D36E22;

    color:#49F28D;

    font-size:13px;

    font-weight:700;

}


/*==================================================
            POST
====================================================*/

.post-card{

    margin:26px;

    padding:22px;

    border-radius:20px;

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

    border:1px solid rgba(255,255,255,.06);

}

.post-user{

    color:white;

    font-weight:700;

    margin-bottom:16px;

}

.post-card p{

    color:var(--text);

    line-height:1.7;

}

.post-stats{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    color:var(--muted);

}


/*==================================================
                LOVE THEME v2
====================================================*/

.love-theme{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

/*=========================================
            BACKGROUND GLOW
=========================================*/

.love-theme::before{

    content:"";

    position:absolute;

    inset:-30%;

    background:

    radial-gradient(

        circle,

        rgba(255,90,170,.25),

        transparent 70%

    );

    filter:blur(80px);

    animation:

    loveGlow

    8s

    ease-in-out

    infinite;

    z-index:-2;

}

@keyframes loveGlow{

    0%{

        transform:

        scale(1)

        rotate(0deg);

    }

    50%{

        transform:

        scale(1.2)

        rotate(180deg);

    }

    100%{

        transform:

        scale(1)

        rotate(360deg);

    }

}

/*=========================================
            PREMIUM BORDER
=========================================*/

.love-theme::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

    padding:2px;

    background:

    linear-gradient(

        135deg,

        #ff5ca8,

        #ff84d8,

        #ff5ca8,

        #b84dff,

        #ff5ca8

    );

    background-size:400%;

    animation:

    loveBorder

    8s

    linear

    infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0)

        content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

@keyframes loveBorder{

    from{

        background-position:0%;

    }

    to{

        background-position:400%;

    }

}

/*=========================================
            PHONE
=========================================*/

.love-theme .theme-screen{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

        180deg,

        #18131b,

        #101015

    );

}

/*=========================================
            AURORA
=========================================*/

.love-banner{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

        135deg,

        #ff5ca8,

        #ff8fc7,

        #ff6fb8,

        #ffb2df

    );

    background-size:300%;

    animation:

    loveAurora

    12s

    linear

    infinite;

}

@keyframes loveAurora{

    0%{

        background-position:0%;

    }

    50%{

        background-position:100%;

    }

    100%{

        background-position:0%;

    }

}

/*=========================================
        SHINE
=========================================*/

.love-banner::before{

    content:"";

    position:absolute;

    inset:-30%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:

    rotate(20deg)

    translateX(-250%);

    animation:

    loveShine

    6s

    linear

    infinite;

}

@keyframes loveShine{

    to{

        transform:

        rotate(20deg)

        translateX(260%);

    }

}

/*=========================================
            AVATAR
=========================================*/

.love-theme .profile-avatar{

    background:

    linear-gradient(

        135deg,

        #ff4f95,

        #ff85d1

    );

    box-shadow:

    0 0 20px rgba(255,90,170,.35),

    0 0 50px rgba(255,90,170,.25);

    animation:

    avatarPulse

    2.5s

    ease-in-out

    infinite;

}

@keyframes avatarPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

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

.love-theme .theme-button{

    background:

    linear-gradient(

        135deg,

        #ff4f95,

        #ff78c8

    );

    color:white;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 15px 40px rgba(255,90,170,.25);

}

.love-theme .theme-button:hover{

    transform:

    translateY(-4px)

    scale(1.03);

    box-shadow:

    0 20px 60px rgba(255,90,170,.4);

}

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

.love-theme .theme-link{

    backdrop-filter:

    blur(20px);

    background:

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

    border:

    1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.love-theme .theme-link:hover{

    transform:

    translateX(8px);

    border-color:

    rgba(255,90,170,.4);

    box-shadow:

    0 10px 30px rgba(255,90,170,.18);

}

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

.love-theme .theme-header{

    color:#ffd6ea;

    text-shadow:

    0 0 15px rgba(255,90,170,.35);

}


/*==================================================
            LOVE BLOOM
====================================================*/

.love-blur{

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,95,170,.35),

        transparent 70%

    );

    filter:blur(55px);

    left:50%;

    top:40%;

    transform:translate(-50%,-50%);

    animation:

    bloomMove

    7s

    ease-in-out

    infinite;

    pointer-events:none;

}

@keyframes bloomMove{

    0%{

        transform:

        translate(-50%,-50%)

        scale(1);

    }

    50%{

        transform:

        translate(-50%,-50%)

        scale(1.25);

    }

    100%{

        transform:

        translate(-50%,-50%)

        scale(1);

    }

}

/*==================================================
            HEARTS
====================================================*/

.love-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.love-heart{

    position:absolute;

    color:#ff5ca8;

    opacity:0;

    user-select:none;

    animation:

    floatHeart

    linear

    infinite;

}

@keyframes floatHeart{

    0%{

        transform:

        translateY(100px)

        scale(.3)

        rotate(0deg);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:

        translateY(-620px)

        scale(1)

        rotate(360deg);

        opacity:0;

    }

}

/*==================================================
            SPARKLES
====================================================*/

.love-sparkles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.sparkle{

    position:absolute;

    color:white;

    opacity:0;

    animation:

    sparkle

    4s

    ease-in-out

    infinite;

}

@keyframes sparkle{

    0%{

        transform:

        scale(.2)

        rotate(0deg);

        opacity:0;

    }

    50%{

        opacity:1;

    }

    100%{

        transform:

        scale(1.6)

        rotate(180deg);

        opacity:0;

    }

}


/*==================================================
        CURSOR GLOW
==================================================*/

.love-cursor-glow{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,120,200,.35),

        transparent 70%

    );

    filter:blur(35px);

    pointer-events:none;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    transition:

    left .08s linear,

    top .08s linear;

    z-index:1;

}

/*==================================================
        GLASS REFLECTION
==================================================*/

.love-reflection{

    position:absolute;

    inset:-30%;

    background:

    linear-gradient(

        115deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    transform:

    rotate(20deg)

    translateX(-200%);

    animation:

    reflectionMove

    7s

    linear

    infinite;

    pointer-events:none;

}

@keyframes reflectionMove{

    to{

        transform:

        rotate(20deg)

        translateX(240%);

    }

}

/*==================================================
        HEART BURST
==================================================*/

.love-burst{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.burst-heart{

    position:absolute;

    color:#ff5ca8;

    font-size:18px;

    animation:

    burst

    .8s

    ease-out

    forwards;

}

@keyframes burst{

    from{

        opacity:1;

        transform:

        translate(0,0)

        scale(.4);

    }

    to{

        opacity:0;

        transform:

        translate(

            var(--x),

            var(--y)

        )

        scale(1.4);

    }

}

/*==================================================
        FOLLOWERS
==================================================*/

.follow-count{

    text-align:center;

    color:#ffbddf;

    margin-bottom:18px;

    font-weight:700;

    letter-spacing:.5px;

}

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

.love-theme .theme-link{

    position:relative;

    overflow:hidden;

}

.love-theme .theme-link::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    transform:

    translateX(-100%);

    transition:.5s;

}

.love-theme .theme-link:hover::before{

    transform:

    translateX(100%);

}


/*==================================================
            LOVE AURA
====================================================*/

.love-aura{

    position:absolute;

    inset:-35%;

    background:

    radial-gradient(circle,

    rgba(255,120,210,.22),

    transparent 70%);

    filter:blur(90px);

    animation:

    auraFloat 12s ease-in-out infinite;

}

@keyframes auraFloat{

0%,100%{

transform:

scale(1);

}

50%{

transform:

scale(1.3);

}

}

/*==================================================
            FAIRY DUST
====================================================*/

.love-fairy{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.fairy{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:white;

    opacity:.8;

    animation:

    fairyMove linear infinite;

}

@keyframes fairyMove{

0%{

transform:

translateY(320px);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(-420px);

opacity:0;

}

}

/*==================================================
            LIKES
====================================================*/

.love-likes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.like{

    position:absolute;

    color:#ff5ca8;

    font-size:14px;

    animation:

    likeFloat 4s ease-out forwards;

}

@keyframes likeFloat{

0%{

opacity:0;

transform:

translateY(0)

scale(.3);

}

20%{

opacity:1;

}

100%{

opacity:0;

transform:

translateY(-180px)

scale(1.4);

}

}

/*==================================================
            PREMIUM RIBBON
====================================================*/

.love-ribbon{

    position:absolute;

    top:18px;

    right:-34px;

    width:130px;

    text-align:center;

    background:

    linear-gradient(

    135deg,

    #ff5ca8,

    #ff87cb);

    color:white;

    font-size:11px;

    font-weight:700;

    padding:8px;

    transform:

    rotate(45deg);

    letter-spacing:2px;

}

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

.love-theme .profile-info h3{

background:

linear-gradient(

90deg,

#ffffff,

#ffd2ef,

#ffffff);

background-size:250%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:

loveName 6s linear infinite;

}

@keyframes loveName{

from{

background-position:0%;

}

to{

background-position:250%;

}

}

/*==================================================
            GLASS EDGE
====================================================*/

.love-theme .theme-screen{

box-shadow:

0 25px 60px rgba(255,90,170,.18),

inset 0 1px rgba(255,255,255,.18);

}





/*==================================================
            GOLD COLORS
====================================================*/

.gold-banner{

    background:

    linear-gradient(
        135deg,
        #FFD54A,
        #FFB800
    );

}

.gold-theme .profile-avatar{

    background:

    linear-gradient(
        135deg,
        #FFD54A,
        #FFB800
    );

    color:#111;

}


/*==================================================
            CYBER COLORS
====================================================*/

.cyber-banner{

    background:

    linear-gradient(
        135deg,
        #00D9FF,
        #0059FF
    );

}

.cyber-theme .profile-avatar{

    background:

    linear-gradient(
        135deg,
        #00D9FF,
        #0059FF
    );

}

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

.pricing-grid{

    display:grid;

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

    gap:32px;

}

.pricing-card{

    position:relative;

    padding:42px;

    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.08);

    transition:var(--transition);

}

.pricing-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,213,74,.25);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.pricing-card.featured{

    border:2px solid var(--gold);

}

.popular{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 16px;

    border-radius:999px;

    background:var(--gold);

    color:#111;

    font-size:12px;

    font-weight:700;

}

.plan-icon{

    width:74px;

    height:74px;

    display:grid;

    place-items:center;

    border-radius:22px;

    font-size:34px;

    background:linear-gradient(
        135deg,
        var(--gold),
        #FFB800
    );

    color:#111;

    margin-bottom:28px;

}

.price{

    margin:20px 0 8px;

    font-size:48px;

    font-weight:800;

    color:white;

}

.pricing-card span{

    color:var(--muted);

}

.pricing-card ul{

    margin:30px 0;

    display:grid;

    gap:16px;

}

.pricing-card li{

    color:var(--text);

}


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

.footer{

    margin-top:120px;

    border-top:1px solid rgba(255,255,255,.08);

    background:#090B10;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    padding:80px 0;

}

.footer-text{

    margin-top:22px;

    color:var(--muted);

    line-height:1.8;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-links h4{

    color:white;

    margin-bottom:8px;

}

.footer-links a{

    color:var(--muted);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--gold);

}

.footer-bottom{

    padding:30px 0;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom p{

    color:var(--muted);

}

.footer-socials{

    display:flex;

    gap:16px;

}

.footer-socials a{

    width:46px;

    height:46px;

    display:grid;

    place-items:center;

    border-radius:14px;

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

    transition:.3s;

}

.footer-socials a:hover{

    background:var(--gold);

    color:#111;

}


/*==================================================
                CUSTOM CURSOR
====================================================*/

.cursor{

    pointer-events:none;

}

.cursor-dot{

    position:fixed;

    width:8px;

    height:8px;

    background:var(--gold);

    border-radius:50%;

    left:0;

    top:0;

    z-index:99999;

}

.cursor-ring{

    position:fixed;

    width:34px;

    height:34px;

    border:2px solid var(--gold);

    border-radius:50%;

    left:0;

    top:0;

    transform:translate(-50%,-50%);

    transition:

    width .25s,

    height .25s,

    border-color .25s;

    z-index:99998;

}


/*==================================================
                ANIMATIONS
====================================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.phone{

    animation:

    float

    5s

    ease-in-out

    infinite;

}

.floating-card{

    animation:

    float

    6s

    ease-in-out

    infinite;

}

.floating-social{

    animation:

    float

    7s

    ease-in-out

    infinite;

}


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

@media(max-width:1100px){

.hero-grid,

.identity-grid,

.footer-grid{

    grid-template-columns:1fr;

}

.features-grid,

.themes-grid,

.pricing-grid{

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

}

.hero-preview,

.identity-preview{

    margin-top:60px;

}

}

@media(max-width:768px){

.nav-menu{

    display:none;

}

.nav-actions{

    gap:10px;

}

.hero-content h1{

    font-size:54px;

}

.identity-content h2,

.section-header h2{

    font-size:42px;

}

.features-grid,

.themes-grid,

.pricing-grid{

    grid-template-columns:1fr;

}

.phone,

.theme-screen{

    width:290px;

}

.footer-bottom{

    flex-direction:column;

    gap:18px;

}

}

@media(max-width:540px){

section{

    padding:90px 0;

}

.hero-content h1{

    font-size:42px;

}

.hero-buttons{

    flex-direction:column;

}

.btn{

    width:100%;

}

.phone,

.theme-screen,

.identity-phone{

    width:100%;

}

.floating-card,

.floating-social{

    display:none;

}

}