/*==================================================
    PIGGYNEST MODERN VISUAL LAYER
==================================================*/

:root{
    --primary:#3157D5;
    --primary-dark:#1E328A;
    --primary-light:#7BA4FF;
    --secondary:#1FBF75;
    --warning:#F4B23E;
    --accent:#F97363;
    --ink:#111827;
    --surface:#FFFFFF;
    --surface-warm:#FFF8EA;
    --surface-mint:#EEFDF5;
    --surface-blue:#EEF4FF;
    --border:#E6EAF2;
    --gradient-primary:linear-gradient(135deg,#233A8B 0%,#3157D5 50%,#4BA3FF 100%);
    --gradient-soft:linear-gradient(180deg,#FFFFFF 0%,#F6F8FC 100%);
    --gradient-dark:linear-gradient(135deg,#101727 0%,#1D2B55 58%,#3157D5 100%);
    --shadow-xs:0 2px 10px rgba(17,24,39,.05);
    --shadow-sm:0 10px 24px rgba(17,24,39,.07);
    --shadow-md:0 18px 42px rgba(17,24,39,.10);
    --shadow-lg:0 28px 70px rgba(17,24,39,.14);
    --shadow-xl:0 38px 90px rgba(17,24,39,.18);
    --radius-sm:8px;
    --radius-md:8px;
    --radius-lg:8px;
    --radius-xl:8px;
}

body{
    background:
        linear-gradient(90deg,rgba(49,87,213,.035) 1px,transparent 1px),
        linear-gradient(180deg,rgba(49,87,213,.035) 1px,transparent 1px),
        #F7F9FD;
    background-size:56px 56px;
    color:var(--ink);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74) 48%,rgba(255,255,255,.96));
}

.container{
    width:min(100% - 48px,var(--container));
}

.section-header{
    max-width:820px;
}

.section-badge,
.hero-badge,
.journey-step,
.cta-badge{
    border-radius:999px;
    border:1px solid rgba(49,87,213,.14);
    background:rgba(255,255,255,.72);
    box-shadow:0 8px 24px rgba(17,24,39,.06);
    color:#27419C;
}

.section-title{
    font-size:3.4rem;
    letter-spacing:0;
}

.section-title span{
    color:#3157D5;
}

.section-description{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}

.btn-primary-custom,
.btn-start{
    border-radius:8px;
    background:var(--gradient-primary);
    box-shadow:0 14px 32px rgba(49,87,213,.26);
}

.btn-secondary-custom,
.btn-login{
    border-radius:8px;
    border-color:rgba(35,58,139,.14);
    background:rgba(255,255,255,.9);
}

.btn-primary-custom:hover,
.btn-secondary-custom:hover,
.btn-start:hover,
.btn-login:hover{
    transform:translateY(-3px);
}

/*==================================================
    NAVIGATION
==================================================*/

.pn-navbar{
    top:18px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.72);
    background:rgba(255,255,255,.78);
    box-shadow:0 18px 55px rgba(17,24,39,.10);
}

.pn-navbar.scrolled{
    border-radius:8px;
    background:rgba(255,255,255,.94);
}

.brand-title{
    letter-spacing:0;
}

.brand-piggy{
    color:#121826;
}

.brand-nest{
    background:linear-gradient(135deg,#3157D5,#1FBF75);
    background-clip:text;
    -webkit-background-clip:text;
}

.nav-link{
    border-radius:8px;
    font-size:15px;
}

.nav-link:hover,
.nav-link.active{
    background:#F2F6FF;
}

.nav-link::after{
    display:none;
}

.scroll-progress-bar{
    background:linear-gradient(90deg,#1FBF75,#F4B23E,#3157D5);
}

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

.hero-section{
    min-height:100vh;
    padding-top:170px;
    background:
        radial-gradient(circle at 78% 20%,rgba(31,191,117,.16),transparent 28%),
        radial-gradient(circle at 12% 82%,rgba(244,178,62,.16),transparent 26%),
        linear-gradient(135deg,#FFFFFF 0%,#F7FAFF 48%,#FFF9EE 100%);
}

.hero-section::before{
    content:"";
    position:absolute;
    inset:120px 4vw auto;
    height:calc(100% - 190px);
    border:1px solid rgba(49,87,213,.08);
    border-radius:8px;
    pointer-events:none;
}

.hero-blob{
    opacity:.22;
    filter:blur(80px);
}

.hero-title{
    max-width:720px;
    font-size:5.1rem;
    letter-spacing:0;
}

.hero-title span{
    background:linear-gradient(135deg,#233A8B 0%,#3157D5 45%,#1FBF75 100%);
    background-clip:text;
    -webkit-background-clip:text;
}

.hero-description{
    color:#344154;
}

.trust-item,
.floating-card,
.stats-card,
.feature-image img,
.learning-content,
.journey-card,
.showcase-feature,
.testimonial-card,
.accordion-item,
.cta-card{
    border-radius:8px;
}

.trust-item{
    border-color:rgba(31,191,117,.18);
}

.hero-visual{
    isolation:isolate;
}

.hero-visual::before,
.hero-visual::after{
    border-radius:8px;
    border-style:solid;
    transform:rotate(10deg);
    animation:none;
}

.hero-visual::before{
    width:520px;
    height:620px;
    background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(238,244,255,.42));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 34px 85px rgba(35,58,139,.12);
}

.hero-visual::after{
    width:430px;
    height:530px;
    background:rgba(255,248,234,.46);
}

.hero-phone{
    filter:drop-shadow(0 42px 72px rgba(35,58,139,.24));
}

.floating-card{
    border:1px solid rgba(255,255,255,.74);
    box-shadow:0 22px 52px rgba(17,24,39,.13);
}

.floating-icon,
.feature-icon,
.stats-icon,
.learning-icon,
.journey-dot,
.feature-circle{
    border-radius:8px;
    background:linear-gradient(135deg,#3157D5,#1FBF75);
}

.scroll-indicator{
    border-radius:8px;
}

html{
    scroll-padding-top:110px;
}

/*==================================================
    ICON POLISH
==================================================*/

.floating-icon,
.feature-icon,
.learning-icon,
.journey-dot,
.feature-circle,
.trust-banner-icon,
.cta-coin{
    font-size:0;
}

.stats-icon i,
.floating-icon i,
.feature-icon i,
.learning-icon i,
.journey-dot i,
.feature-circle i,
.trust-banner-icon i,
.cta-coin i{
    font-size:1em;
}

.floating-icon::before,
.feature-icon::before,
.learning-icon::before,
.journey-dot::before,
.feature-circle::before,
.trust-banner-icon::before,
.cta-coin::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:28px;
    line-height:1;
}

.savings-card .floating-icon::before{
    content:"\f51e";
}

.trophy-card .floating-icon::before{
    content:"\f091";
}

.goal-card .floating-icon::before{
    content:"\f140";
}

.features-section .feature-row:nth-of-type(2) .feature-icon::before{
    content:"\f4d3";
}

.features-section .feature-row:nth-of-type(3) .feature-icon::before{
    content:"\f140";
}

.features-section .feature-row:nth-of-type(4) .feature-icon::before{
    content:"\f0c0";
}

.feature-bottom > i{
    margin-right:10px;
}

.learning-section .learning-step:nth-of-type(2) .learning-icon::before{
    content:"\f4c0";
}

.learning-section .learning-step:nth-of-type(4) .learning-icon::before{
    content:"\f140";
}

.learning-section .learning-step:nth-of-type(6) .learning-icon::before{
    content:"\f201";
}

.learning-section .learning-step:nth-of-type(8) .learning-icon::before{
    content:"\f091";
}

.journey-wrapper .journey-item:nth-child(1) .journey-dot::before{
    content:"\f156";
}

.journey-wrapper .journey-item:nth-child(2) .journey-dot::before{
    content:"\f4d3";
}

.journey-wrapper .journey-item:nth-child(3) .journey-dot::before{
    content:"\f140";
}

.journey-wrapper .journey-item:nth-child(4) .journey-dot::before{
    content:"\f058";
}

.journey-wrapper .journey-item:nth-child(5) .journey-dot::before{
    content:"\f091";
}

.showcase-info.left .showcase-feature:nth-child(1) .feature-circle::before{
    content:"\f4d3";
}

.showcase-info.left .showcase-feature:nth-child(2) .feature-circle::before{
    content:"\f140";
}

.showcase-info.right .showcase-feature:nth-child(1) .feature-circle::before{
    content:"\f091";
}

.showcase-info.right .showcase-feature:nth-child(2) .feature-circle::before{
    content:"\f505";
}

.trust-banner-icon::before{
    content:"\f4d3";
}

.coin-1::before{
    content:"\f51e";
}

.coin-2::before{
    content:"\f156";
}

.coin-3::before{
    content:"\f4d3";
}

/*==================================================
    SECTIONS
==================================================*/

.stats-section,
.learning-section,
.showcase-section,
.testimonials-section,
.faq-section{
    background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%);
}

.features-section,
.timeline-section{
    background:#FFFFFF;
}

.stats-section::before,
.stats-section::after,
.features-section::before,
.features-section::after,
.learning-section::before,
.learning-section::after,
.timeline-section::before,
.timeline-section::after,
.showcase-section::before,
.showcase-section::after,
.testimonials-section::before,
.testimonials-section::after,
.faq-section::before,
.faq-section::after{
    opacity:.35;
}

.stats-card,
.learning-content,
.journey-card,
.showcase-feature,
.testimonial-card,
.accordion-item{
    border:1px solid rgba(230,234,242,.9);
    box-shadow:0 18px 48px rgba(17,24,39,.075);
}

.stats-card:hover,
.learning-content:hover,
.journey-card:hover,
.showcase-feature:hover,
.testimonial-card:hover,
.accordion-item:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 70px rgba(17,24,39,.12);
}

.stats-card:nth-child(1) .stats-icon,
.row .col-lg-3:nth-child(1) .stats-icon{
    background:linear-gradient(135deg,#3157D5,#4BA3FF);
}

.row .col-lg-3:nth-child(2) .stats-icon{
    background:linear-gradient(135deg,#1FBF75,#7DDA9B);
}

.row .col-lg-3:nth-child(3) .stats-icon{
    background:linear-gradient(135deg,#F4B23E,#F97363);
}

.row .col-lg-3:nth-child(4) .stats-icon{
    background:linear-gradient(135deg,#233A8B,#8B5CF6);
}

.stats-number{
    color:#233A8B;
}

.trust-banner,
.feature-bottom,
.showcase-banner,
.testimonial-bottom{
    border-radius:8px;
    background:var(--gradient-dark);
    box-shadow:0 32px 72px rgba(17,24,39,.16);
}

.feature-row{
    gap:80px;
}

.feature-image img{
    border:1px solid rgba(230,234,242,.9);
    background:#fff;
}

.feature-content li{
    padding:10px 0;
}

.learning-line,
.journey-wrapper::before{
    background:linear-gradient(180deg,#1FBF75,#3157D5,#F4B23E);
}

.learning-quote{
    border-radius:8px;
    background:var(--gradient-dark);
}

.showcase-phones::before{
    content:"";
    position:absolute;
    inset:60px 42px 52px;
    border-radius:8px;
    background:linear-gradient(135deg,rgba(49,87,213,.10),rgba(31,191,117,.08),rgba(244,178,62,.10));
    border:1px solid rgba(49,87,213,.08);
}

.phone-left,
.phone-right{
    filter:drop-shadow(0 24px 42px rgba(17,24,39,.14));
}

.testimonial-card.featured{
    border:1px solid rgba(49,87,213,.24);
    box-shadow:0 34px 78px rgba(49,87,213,.16);
}

.testimonial-user img{
    border-radius:8px;
    border-color:#EAF0FF;
}

.accordion-button,
.accordion-button:not(.collapsed),
.accordion-body{
    background:#FFFFFF;
}

.accordion-button:not(.collapsed){
    color:#233A8B;
}

/*==================================================
    CTA + FOOTER
==================================================*/

.cta-section{
    background:
        linear-gradient(135deg,rgba(31,191,117,.18),transparent 32%),
        linear-gradient(315deg,rgba(244,178,62,.18),transparent 34%),
        var(--gradient-dark);
}

.cta-card{
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
}

.cta-title span{
    color:#FFE08A;
}

.cta-title{
    font-size:4rem;
}

.cta-floating-card{
    border-radius:8px;
}

.footer-section{
    background:linear-gradient(135deg,#0D1220 0%,#141F3A 54%,#122A3F 100%);
}

.footer-social a{
    border-radius:8px;
}

.footer-newsletter form{
    border-radius:8px;
}

#backToTop{
    border-radius:8px;
}

@media(max-width:991px){
    .container{
        width:min(100% - 32px,var(--container));
    }

    .pn-navbar,
    .pn-navbar.scrolled{
        border-radius:8px;
    }

    .navbar-collapse{
        border-radius:8px;
    }

    .hero-section::before{
        inset:105px 16px auto;
        height:calc(100% - 150px);
    }

    .section-title{
        font-size:2.55rem;
    }

    .hero-title{
        font-size:3.35rem;
    }

    .cta-title{
        font-size:3rem;
    }
}

@media(max-width:767px){
    .hero-section{
        padding-top:120px;
    }

    .hero-section::before{
        display:none;
    }

    .section-badge,
    .hero-badge{
        font-size:12px;
        padding:9px 14px;
    }

    .hero-title{
        font-size:2.35rem;
    }

    .section-title{
        font-size:2.05rem;
    }

    .cta-title{
        font-size:2.35rem;
    }

    .showcase-phones::before{
        inset:44px 10px 52px;
    }

    .trust-banner,
    .feature-bottom,
    .learning-quote,
    .showcase-banner,
    .testimonial-bottom,
    .cta-card{
        border-radius:8px;
    }
}