:root{

    --pine-bg:#181818;
    --pine-bg-light:#222222;

    --pine-primary:#7A1838;

    --pine-white:#ffffff;

    --pine-text:#f5f5f5;

    --pine-muted:#b8b8b8;

    --pine-border:rgba(255,255,255,.12);

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body{

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

    background:var(--pine-bg);

    color:var(--pine-white);

}


.pine-navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:18px 0;

    background:rgba(24,24,24,.85);

    backdrop-filter:blur(15px);

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

}



.navbar-brand img{

    width:40px;

    height:auto;

}




.nav-link{

    color:white!important;

    font-size:15px;

    font-weight:500;

    margin:0 12px;

    transition:.3s;

}



.nav-link:hover{

    color:#7A1838!important;

}




.pine-btn{


background:var(--pine-primary);

color:white!important;

padding:12px 28px;

border-radius:50px;

font-weight:600;

transition:.3s;


}



.pine-btn:hover{


background:#a32650;

transform:translateY(-3px);


}





.navbar-toggler{


border:none;


}



.navbar-toggler:focus{


box-shadow:none;


}




@media(max-width:991px){


.navbar-collapse{


background:white;

padding:20px;

margin-top:15px;

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.1);


}


.nav-link{

padding:12px 0;

}


.pine-btn{

display:inline-block;

margin-top:10px;

}


}

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


.pine-hero{

padding-top:160px;

padding-bottom:120px;

overflow:hidden;

background:

radial-gradient(
circle at top right,
rgba(122,24,56,.25),
transparent 35%
);

}





.hero-content{

animation:fadeUp .8s ease;

}





.hero-badge{


display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:50px;

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

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

color:white;

font-size:14px;

margin-bottom:25px;


}



.hero-badge i{

color:#7A1838;

}




.hero-content h1{


font-size:65px;

line-height:1.08;

font-weight:800;

color:white;

letter-spacing:-2px;


}



.hero-content p{


font-size:18px;

line-height:1.7;

color:#bdbdbd;

max-width:540px;

margin:25px 0 35px;


}




.hero-buttons{


display:flex;

gap:15px;

flex-wrap:wrap;


}



.store-btn{


background:white;

color:#111;

padding:12px 28px;

border-radius:50px;

font-weight:600;

transition:.3s;


}



.store-btn:hover{


transform:translateY(-3px);

}




/* STATS */


.hero-stats{


display:flex;

gap:50px;

margin-top:60px;


}



.hero-stats h3{


color:white;

font-size:32px;

font-weight:700;


}



.hero-stats p{


font-size:14px;

margin:0;

color:#aaa;


}






/* PHONE AREA */


.hero-phone-area{


position:relative;

text-align:center;

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


}

a {
    text-decoration: none;
}

.hero-phone{

max-width:100%;

position:relative;

z-index:2;


}




/* FLOATING CARDS */


.floating-card{


position:absolute;

z-index:3;

background:white;

color:#111;

padding:15px 22px;

border-radius:18px;

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

font-size:14px;

font-weight:600;


}



.floating-card i{


color:#7A1838;

margin-right:8px;


}



.card-location{


top:100px;

left:20px;


}



.card-booking{


bottom:120px;

right:20px;


}






@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}




@keyframes fadeUp{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}






@media(max-width:991px){


.hero-content{

text-align:center;

}


.hero-content h1{

font-size:45px;

}



.hero-content p{

margin-left:auto;

margin-right:auto;

}



.hero-buttons{

justify-content:center;

}



.hero-stats{

justify-content:center;

gap:30px;

}



.hero-phone-area{

margin-top:70px;

}



}






@media(max-width:576px){


.hero-content h1{

font-size:38px;

}


.hero-stats{

display:none;

}


.floating-card{

font-size:12px;

padding:12px;

}


}

/* =====================================
   APP SHOWCASE SECTION
===================================== */


.pine-showcase{

padding:120px 0;

background:#181818;

overflow:hidden;

}




.section-heading{

max-width:750px;

margin:auto;

}



.section-badge{


display:inline-flex;

align-items:center;

gap:10px;

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

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

padding:10px 20px;

border-radius:50px;

color:white;

font-size:14px;

margin-bottom:25px;


}



.section-badge i{

color:#7A1838;

}



.section-heading h2{


font-size:52px;

line-height:1.15;

font-weight:800;

color:white;

margin-bottom:20px;


}



.section-heading p{


font-size:18px;

color:#aaa;

line-height:1.7;


}




/* PHONE SHOWCASE */

.phone-showcase{
    height:600px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:70px 0;
}


.phone-card{
    position:absolute;
    transition:.5s ease;
    z-index:1;
}


.phone-card img{

    width:290px;
    border-radius:35px;

    box-shadow:
    0 40px 80px rgba(0,0,0,.5);

}



/* LEFT PHONE */

.phone-left{

    transform:translateX(-260px) rotate(-12deg);

    opacity:.8;

}



/* CENTER PHONE */

.phone-center{

    z-index:3;

}


.phone-center img{

    width:340px;

}



/* RIGHT PHONE */

.phone-right{

    transform:translateX(260px) rotate(12deg);

    opacity:.8;

}



/* HOVER EFFECT */

.phone-card:hover{

    z-index:10;

    transform:
    translateY(-25px)
    scale(1.08)
    rotate(0deg);

    opacity:1;

}



/* Hide other phones when one is active */

.phone-showcase:has(.phone-card:hover)
.phone-card:not(:hover){

    opacity:.25;

    transform:scale(.95);

}

/* =====================================
   PREMIUM FEATURE CARDS
===================================== */


.showcase-features{

    margin-top:180px;

    position:relative;

}




.showcase-card{


    height:100%;

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );


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


    padding:45px 35px;


    border-radius:32px;


    backdrop-filter:blur(15px);


    transition:.5s ease;


}




/* Glow effect */

.showcase-card::before{


    content:"";

    position:absolute;


    width:120px;

    height:120px;


    background:#7A1838;


    filter:blur(80px);


    opacity:.35;


    top:-40px;

    right:-40px;


}





.showcase-card:hover{


    transform:translateY(-15px);


    border-color:#7A1838;


    box-shadow:

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


}





/* ICON */


.feature-icon{


    width:75px;

    height:75px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:


    linear-gradient(
        135deg,
        #7A1838,
        #a83259
    );


    color:white;


    font-size:28px;


    border-radius:24px;


    margin-bottom:30px;


    box-shadow:

    0 15px 35px rgba(122,24,56,.45);


    transition:.4s ease;


}



.showcase-card:hover .feature-icon{


    transform:

    rotate(-8deg)
    scale(1.1);


}




.showcase-card h4{


    color:white;


    font-size:24px;


    font-weight:700;


    margin-bottom:15px;


    letter-spacing:-.5px;


}





.showcase-card p{


    color:#b5b5b5;


    font-size:16px;


    line-height:1.8;


    margin:0;


}





/* Card number decoration */

.showcase-card::after{


    content:"";


    position:absolute;


    bottom:-30px;


    right:-20px;


    font-size:120px;


    font-weight:800;


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


}





/* MOBILE */


@media(max-width:991px){


.showcase-card{

    margin-bottom:25px;

}



}

/* =====================================
   HOW PINE WORKS
===================================== */


.pine-how-work{

    padding:120px 0;

    background:#181818;

}





.steps-wrapper{


    margin-top:80px;


    display:grid;


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


    gap:35px;


    position:relative;


}





/* CONNECTING LINE */


.steps-wrapper::before{


    content:"";


    position:absolute;


    top:90px;


    left:15%;


    width:70%;


    height:2px;


    background:

    linear-gradient(
        90deg,
        transparent,
        #7A1838,
        transparent
    );


    opacity:.6;


}





.pine-step{


    position:relative;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );


    border:

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


    padding:45px 35px;


    border-radius:32px;


    text-align:center;


    backdrop-filter:blur(15px);


    transition:.4s ease;


}





.pine-step:hover{


    transform:translateY(-12px);


    border-color:#7A1838;


    box-shadow:

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


}




.step-number{


    position:absolute;


    top:20px;


    right:25px;


    font-size:60px;


    font-weight:800;


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


}





.step-icon{


    width:85px;


    height:85px;


    margin:0 auto 30px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:


    linear-gradient(
        135deg,
        #7A1838,
        #a83259
    );


    border-radius:28px;


    color:white;


    font-size:32px;


    box-shadow:

    0 20px 40px rgba(122,24,56,.4);


}




.pine-step h3{


    color:white;


    font-size:25px;


    font-weight:700;


    margin-bottom:15px;


}




.pine-step p{


    color:#aaa;


    line-height:1.8;


    font-size:16px;


}





@media(max-width:991px){


.steps-wrapper{


    grid-template-columns:1fr;


}


.steps-wrapper::before{


    display:none;


}



}

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


.pine-marketplace{

    padding:120px 0;

    background:#181818;

}





.marketplace-wrapper{


    margin-top:70px;


}





.market-card{


    height:100%;


    padding:50px 45px;


    border-radius:35px;


    background:


    linear-gradient(
        145deg,
        rgba(255,255,255,.09),
        rgba(255,255,255,.03)
    );


    border:

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


    transition:.5s ease;


    position:relative;


    overflow:hidden;


}





.market-card::before{


    content:"";


    position:absolute;


    width:180px;

    height:180px;


    background:#7A1838;


    filter:blur(100px);


    opacity:.3;


    right:-50px;


    top:-50px;


}





.market-card:hover{


    transform:translateY(-12px);


    border-color:#7A1838;


    box-shadow:

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


}





.market-icon{


    width:85px;


    height:85px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:28px;


    background:

    linear-gradient(
        135deg,
        #7A1838,
        #a83259
    );


    color:white;


    font-size:32px;


    margin-bottom:30px;


    box-shadow:

    0 20px 45px rgba(122,24,56,.45);


}





.market-card h3{


    color:white;


    font-size:32px;


    font-weight:800;


    margin-bottom:15px;


}





.market-card p{


    color:#aaa;


    font-size:17px;


    line-height:1.8;


    margin-bottom:30px;


}




.market-card ul{


    list-style:none;


    padding:0;


    margin-bottom:35px;


}



.market-card li{


    color:#ddd;


    margin-bottom:18px;


    font-size:16px;


    display:flex;


    align-items:center;


    gap:12px;


}




.market-card li i{


    color:#7A1838;


    font-size:18px;


}





.market-btn{


    display:inline-flex;


    align-items:center;


    gap:12px;


    background:#7A1838;


    color:white!important;


    padding:14px 28px;


    border-radius:50px;


    font-weight:600;


    transition:.3s;


}



.market-btn:hover{


    background:#a83259;


    transform:translateX(5px);


}





@media(max-width:991px){


.market-card{

    margin-bottom:25px;

}


}

/* =====================================
   PREMIUM FEATURES GRID
===================================== */


.feature-grid {

    margin-top:70px;

    display:grid;

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

    gap:30px;

}



/* Remove bootstrap column spacing issue */

.feature-grid > div {

    width:100%;

}





.feature-box {


    height:100%;


    min-height:270px;


    padding:40px 35px;


    border-radius:30px;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,0.09),
        rgba(255,255,255,0.03)
    );


    border:

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


    position:relative;


    overflow:hidden;


    transition:all .4s ease;


}





/* Background glow */

.feature-box::before {


    content:"";


    position:absolute;


    width:160px;


    height:160px;


    top:-60px;


    right:-60px;


    background:#7A1838;


    opacity:.18;


    filter:blur(70px);


    transition:.4s;


}





.feature-box:hover::before {


    opacity:.4;


}





.feature-box:hover {


    transform:translateY(-12px);


    border-color:#7A1838;


    box-shadow:


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


}





/* ICON */


.feature-circle {


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:24px;


    background:


    linear-gradient(
        135deg,
        #7A1838,
        #a83259
    );


    color:white;


    font-size:28px;


    margin-bottom:28px;


    box-shadow:


    0 15px 40px rgba(122,24,56,.45);


}





.feature-box h4 {


    color:white;


    font-size:24px;


    font-weight:700;


    margin-bottom:15px;


}





.feature-box p {


    color:#aaa;


    font-size:16px;


    line-height:1.8;


    margin:0;


}






/* TABLET */

@media(max-width:991px){


.feature-grid {


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


}


}




/* MOBILE */

@media(max-width:576px){


.feature-grid {


    grid-template-columns:1fr;


}


}

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


.pine-download{


padding:120px 0;


background:


radial-gradient(
circle at center,
rgba(122,24,56,.25),
transparent 45%
);


}





.download-wrapper{


padding:70px;


border-radius:45px;


background:


linear-gradient(
145deg,
rgba(255,255,255,.09),
rgba(255,255,255,.03)
);


border:

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


overflow:hidden;


position:relative;


}





.download-wrapper::before{


content:"";


position:absolute;


width:300px;


height:300px;


background:#7A1838;


filter:blur(150px);


opacity:.25;


right:-100px;


bottom:-100px;


}





.download-content{


position:relative;


z-index:2;


}





.download-content h2{


font-size:52px;


line-height:1.15;


font-weight:800;


color:white;


margin:25px 0;


letter-spacing:-1px;


}





.download-content p{


color:#aaa;


font-size:18px;


line-height:1.8;


max-width:560px;


margin-bottom:40px;


}





.download-buttons{


display:flex;


gap:20px;


flex-wrap:wrap;


}





.store-download{


display:flex;


align-items:center;


gap:15px;


background:#fff;


color:#111!important;


padding:14px 25px;


border-radius:18px;


min-width:190px;


transition:.3s;


}




.store-download i{


font-size:35px;


}




.store-download span{


display:block;


font-size:12px;


line-height:1;


}




.store-download strong{


display:block;


font-size:20px;


}




.store-download:hover{


transform:translateY(-5px);


}





/* PHONE */


.download-phone{


text-align:center;


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


}


.download-phone img{


max-width:100%;


filter:

drop-shadow(
0 40px 60px rgba(0,0,0,.5)
);


}





@keyframes downloadFloat{


0%,100%{


transform:translateY(0);


}


50%{


transform:translateY(-20px);


}


}






@media(max-width:991px){


.download-wrapper{


padding:45px 25px;


}


.download-content{


text-align:center;


}



.download-content h2{


font-size:40px;


}



.download-content p{


margin-left:auto;

margin-right:auto;


}



.download-buttons{


justify-content:center;


}



.download-phone{


margin-top:60px;


}


}





@media(max-width:576px){


.download-content h2{


font-size:32px;


}


.store-download{


width:100%;


justify-content:center;


}


}

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


.pine-faq{


padding:120px 0;

background:#181818;


}





.faq-wrapper{


max-width:850px;

margin:70px auto 0;


}




.accordion-item{


background:


linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);


border:

1px solid rgba(255,255,255,.12)!important;


border-radius:22px!important;


margin-bottom:18px;


overflow:hidden;


}




.accordion-button{


background:transparent!important;


color:white!important;


font-size:18px;


font-weight:600;


padding:25px 30px;


box-shadow:none!important;


display:flex;


align-items:center;


gap:18px;


}





.accordion-button i{


width:40px;


height:40px;


display:flex;


align-items:center;


justify-content:center;


background:#7A1838;


border-radius:12px;


font-size:16px;


}




.accordion-button::after{


filter:

brightness(0) invert(1);


}





.accordion-button:not(.collapsed){


background:rgba(122,24,56,.15)!important;


}





.accordion-body{


color:#aaa;


font-size:16px;


line-height:1.8;


padding:

0 30px 28px 88px;


}





.accordion-button:hover{


color:white!important;


}




@media(max-width:576px){


.accordion-button{


font-size:15px;


padding:20px;


}


.accordion-body{


padding:

0 20px 25px;


}


}

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


.pine-footer{


background:#111;

position:relative;

overflow:hidden;


}




.pine-footer::before{


content:"";

position:absolute;


width:500px;

height:500px;


background:#7A1838;


filter:blur(180px);


opacity:.15;


top:-200px;


left:50%;


transform:translateX(-50%);


}





/* CTA */


.footer-cta{


text-align:center;


padding:70px 30px;


border-radius:40px;


background:


linear-gradient(
145deg,
rgba(255,255,255,.09),
rgba(255,255,255,.03)
);


border:

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


position:relative;


overflow:hidden;


animation:footerFloat 6s ease-in-out infinite;


}





.footer-cta h2{


position:relative;


color:white;


font-size:50px;


font-weight:800;


max-width:750px;


margin:auto;


}



.footer-cta p{


color:#aaa;


font-size:18px;


margin:25px auto 40px;


max-width:550px;


}




.footer-buttons{


display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;


}





.footer-store-btn{


display:flex;


align-items:center;


gap:12px;


background:#7A1838;


padding:15px 30px;


border-radius:50px;


color:white!important;


font-weight:600;


transition:.4s;


}





.footer-store-btn i{


font-size:25px;


}



.footer-store-btn:hover{


background:#a83259;


transform:translateY(-5px);


}






/* MAIN FOOTER */


.footer-main{


padding:90px 0 50px;


}




.footer-brand img{


width:50px;


margin-bottom:25px;


}




.footer-brand p{


color:#aaa;


line-height:1.8;


max-width:330px;


}





.social-links{


display:flex;


gap:12px;


margin-top:30px;


}



.social-links a{


width:45px;


height:45px;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:#222;


color:white;


transition:.3s;


}




.social-links a:hover{


background:#7A1838;


transform:

translateY(-5px)
rotate(8deg);


}





.pine-footer h5{


color:white;


font-size:18px;


margin-bottom:25px;


}




.pine-footer ul{


list-style:none;


padding:0;


}




.pine-footer li{


margin-bottom:14px;


}



.pine-footer li a{


color:#aaa;


transition:.3s;


}




.pine-footer li a:hover{


color:white;


padding-left:8px;


}





.footer-bottom{


border-top:

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


padding:25px 0;


text-align:center;


}




.footer-bottom p{


margin:0;


color:#777;


font-size:14px;


}





@keyframes footerFloat{


0%,100%{


transform:translateY(0);


}


50%{


transform:translateY(-8px);


}


}







@media(max-width:991px){


.footer-cta h2{


font-size:38px;


}


}




@media(max-width:576px){


.footer-cta{


padding:45px 20px;


}



.footer-cta h2{


font-size:30px;


}


.footer-store-btn{


width:100%;


justify-content:center;


}


}

/* =====================================
   PINE APP SCREENS SHOWCASE
===================================== */


.pine-screens{

padding:120px 0;

background:#181818;

overflow:hidden;

}



.screens-wrapper{

margin-top:100px;

}



.screen-row{


display:flex;

align-items:center;

justify-content:space-between;

gap:100px;

margin-bottom:140px;


}



.screen-row.reverse{


flex-direction:row-reverse;


}



/* IMAGE */


.screen-image{


width:45%;

text-align:center;


}



.phone-frame{


display:inline-block;


position:relative;


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


}



.phone-frame img{


width:330px;


max-width:100%;


border-radius:40px;


box-shadow:


0 50px 100px rgba(0,0,0,.55);


transition:.5s;


}



.phone-frame:hover img{


transform:scale(1.05);


}





/* CONTENT */


.screen-content{


width:55%;


}





.screen-number{


display:inline-flex;


width:60px;

height:60px;


align-items:center;

justify-content:center;


background:#7A1838;


border-radius:20px;


color:white;


font-size:20px;


font-weight:700;


margin-bottom:25px;


}




.screen-content h3{


font-size:42px;


font-weight:800;


color:white;


margin-bottom:20px;


}




.screen-content p{


font-size:18px;


line-height:1.8;


color:#aaa;


max-width:520px;


}




.screen-points{


margin-top:30px;


}




.screen-points div{


display:flex;


align-items:center;


gap:15px;


color:white;


margin-bottom:18px;


font-size:16px;


}




.screen-points i{


width:38px;


height:38px;


display:flex;


align-items:center;


justify-content:center;


background:rgba(122,24,56,.25);


border-radius:12px;


color:#d54b78;


}





/* ANIMATION */


.reveal-left{

animation:slideLeft 1s ease forwards;

}



.reveal-right{

animation:slideRight 1s ease forwards;

}




@keyframes slideLeft{


from{

opacity:0;

transform:translateX(-80px);

}


to{

opacity:1;

transform:translateX(0);

}


}





@keyframes slideRight{


from{

opacity:0;

transform:translateX(80px);

}


to{

opacity:1;

transform:translateX(0);

}


}





@keyframes phoneFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}





@media(max-width:991px){


.screen-row,
.screen-row.reverse{


flex-direction:column;


gap:50px;


margin-bottom:90px;


}



.screen-image,
.screen-content{


width:100%;

text-align:center;


}


.screen-content p{

margin:auto;

}


.screen-content h3{


font-size:32px;


}


}