/*
|--------------------------------------------------------------------------
| THRIVEVIN DESIGN SYSTEM   
|--------------------------------------------------------------------------
*/

:root {

    /* Brand */
    --tv-primary: #F06B14;
    --tv-primary-rgb: 240,107,20;
    --tv-primary-dark: #D85E0D;
    --tv-primary-border: #E06712;

    /* Backgrounds */
    --tv-bg: #0B0F14;
    --tv-card: #111519;
    --tv-card-border: #15191D;

    /* Text */
    --tv-text: #7A7D82;
    --tv-text-small: #ffffff;
    --tv-text-light: #626467;

    /* Radius */
    --tv-radius-sm: 8px;
    --tv-radius-md: 12px;
    --tv-radius-lg: 16px;

    /* Shadows */
    --tv-shadow:
        0 4px 12px rgba(0,0,0,.15);

    /* Animation */
    --tv-transition: .2s ease;
}


body {
    background: var(--tv-bg);
    color: var(--tv-text);
    margin: 0;
    font-family: system-ui, sans-serif;
}


.text-main {
    color: var(--tv-text);
}

.text-small {
    color: var(--tv-text-small);
    font-size: .9rem;
}

.text-white {
    color: var(--tv-text-light);
}



.topbar nav{
    display:flex;
    gap:12px;
}


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

    padding:4px 60px;
}

.logo{
    font-size:1rem;
    font-weight:700;
    color:#fff;
}

.nav{
    display:flex;
    gap:32px;
}

.nav a{
    color:#fff;
    text-decoration:none;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:16px;
}



.hero{
    max-width: 1500px;
    margin: 0 auto;

     display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(40px,6vw,100px);

    padding:60px clamp(30px,6vw,120px) 0;
}

.hero-content{
    flex:1;
    max-width:none;
}

.hero h1{
    font-size:clamp(3rem,6vw,6rem);
    line-height:1.0;
}

.headline-line{
    white-space: nowrap;
}



.orange{
    color:#ff7a1a;
}

.hero-buttons{
    display:flex;
    gap:16px;
    margin-top:32px;
}

.primary-btn,
.cta-btn{
    background:#ff7a1a;
    color:white;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
}

.secondary-btn{
    border:1px solid #444;
    padding:14px 24px;
    border-radius:10px;
    color:white;
    text-decoration:none;
}

.hero-stats{
    display:flex;
    gap:60px;
    margin-top:50px;
}

.hero-visual{
    display:flex;
    align-items:center;
    position:relative;
}





@media (max-width: 900px){

    .hero{
        flex-direction:column;
        text-align:center;
        padding:100px 20px 0;
    }

.headline-line{
        white-space: normal;
    }

    .hero h1{
        font-size: clamp(2.2rem, 9vw, 3.5rem);
        line-height:1.05;
    }


    .hero-content{
        max-width:100%;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-stats{
        justify-content:center;
        flex-wrap:wrap;
        gap:30px;
    }

    .hero-visual{
        margin-top:40px;
        justify-content:center;
    }
}




 .side-panel{
    flex:0 0 350px;
}

.phone-preview-wrapper {
        position: sticky;
        top: 30px;
    }

    .phone-preview {
    height: calc(100dvh - 170px);
    aspect-ratio: 9 / 19.5;
    width: auto;
}

.phone-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: 30px;
}




.website-preview{
    width:500px;
    height:660px;

    margin-left:-40px;
    background:white;
    color:black;
    border-radius:18px;
    overflow:hidden;

    display:flex;
    flex-direction:column;
}

.site-image{
    height:220px;
    background:#405d47;
}

.link-card{
    background:#1f2937;
    padding:12px;
    border-radius:10px;
    margin-top:12px;
}

.feature-bar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:30px 60px;
    border-top:1px solid rgba(255,255,255,.1);
}


.preview-label{
    display:inline-block;
    margin-bottom:12px;
align-items:center;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;

    color:#ff7a1a;
}




.links {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.links a {
    font-size: 13px;
    color: #4da3ff;
    text-decoration: none;
}

.link {
    display: block;
    width: calc(100% - 20px);
    max-width: 500px;
    margin: 14px auto;
    padding: 16px 20px;

    box-sizing: border-box;

    border-radius: 16px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        rgba(var(--tv-primary-rgb), .20) 45%,
        rgba(var(--tv-primary-rgb), .10)
    );

    border: 1px solid rgba(var(--tv-primary-rgb), .35);

    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    text-align: center;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 5px 12px rgba(0,0,0,.35);

    backdrop-filter: blur(6px);

    transition: all .22s ease;
}

.link:hover {
    transform: translateY(-3px);

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

    box-shadow:
        0 0 24px rgba(var(--tv-primary-rgb), .70),
        0 10px 24px rgba(0,0,0,.45);
}



/* =========================
  FOOTER only section 
========================= */


footer.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;

    background: rgba(15, 15, 20, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid rgba(255,255,255,0.08);
}



/* makes whole footer clickable */
.footer-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* inner layout */
.footer-inner{
    max-width:95%;
    margin:0 auto;

    padding:4px 16px;

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

    min-height:36px;
}

.footer-save-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 10px;
    margin:0;

    line-height:1;

    font-size:13px;
}

/* =========================
  FOOTER only section END
========================= */




/* =========================
  dashboard header section only section 
========================= */



.creator-header{
    position:relative;
    overflow:hidden;
    border-radius:18px;
}

#banner-preview{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.avatar-wrap{
    position:absolute;
    left:30px;
    bottom:-42px;
    z-index:10;
}

.creator-meta{
    margin-left:170px;
    margin-top:20px;
}

.upgrade-mobile{
    margin-left:auto;
}

/* =========================
  dashboard header section only section END
========================= */