:root{
    --win-primary:#507d72;
    --win-primary-dark:#3f655c;
    --win-primary-light:#6f988e;
    --win-soft:#f4f8f6;
    --win-soft-2:#edf4f1;
    --win-text:#0f1720;
    --win-muted:#667085;
    --win-border:#d9e4df;
    --win-white:#ffffff;
    --win-heading:#10231d;
    --win-gradient:linear-gradient(135deg, #507d72 0%, #6f988e 100%);
    --win-shadow:0 18px 60px rgba(18, 35, 30, 0.08);
    --win-shadow-lg:0 24px 80px rgba(18, 35, 30, 0.12);
    --color-primary:#507d72;
}

/* =========================================================
   Genel
========================================================= */
html{
    scroll-behavior: smooth;
}

body{
    color: var(--win-text);
    background-color: #fff;
}

img{
    max-width: 100%;
    height: auto;
}

a,
button,
input,
textarea,
select{
    transition: all .3s ease;
}

a{
    color: var(--win-text);
}

a:hover{
    color: var(--win-primary);
    text-decoration: none;
}

p{
    color: var(--win-muted);
}

::selection{
    background: var(--win-primary);
    color: #fff;
}

.bg-heading-color{
    background-color: var(--win-heading) !important;
}

/* =========================================================
   Ortak Başlıklar
========================================================= */
.common-heading .tagline,
.title-tag{
    color: var(--win-primary);
    font-weight: 700;
}

.common-heading .title{
    color: var(--win-text);
}

.common-heading.heading-white .title,
.heading-white .title{
    color: #fff !important;
}

.common-heading.heading-white p,
.heading-white p{
    color: rgba(255,255,255,.75) !important;
}

/* =========================================================
   Butonlar
========================================================= */
.template-btn{
    background: var(--win-primary);
    border: 1px solid var(--win-primary);
    color: #fff !important;
    box-shadow: none;
}

.template-btn:hover{
    background: var(--win-primary-dark);
    border-color: var(--win-primary-dark);
    color: #fff !important;
    transform: translateY(-2px);
}

.template-btn.bordered-btn{
    background: transparent;
    color: var(--win-primary) !important;
    border: 1px solid rgba(80,125,114,.25);
}

.template-btn.bordered-btn:hover{
    background: var(--win-primary);
    border-color: var(--win-primary);
    color: #fff !important;
}

/* =========================================================
   Header
========================================================= */
.wintegron-header{
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(16, 35, 29, 0.05);
}

.wintegron-header .brand-logo img,
.wintegron-header .mobile-logo img,
.mobile-logo img{
    max-height: 44px;
    width: auto;
}

.wintegron-header .nav-menu > ul > li{
    margin-right: 4px;
}

.wintegron-header .nav-menu > ul > li > a{
    color: var(--win-text);
    font-weight: 600;
}

.wintegron-header .nav-menu > ul > li:hover > a,
.wintegron-header .nav-menu > ul > li.active > a{
    color: var(--win-primary);
}

.wintegron-header .nav-menu ul li .sub-menu{
    border-radius: 18px;
    border: 1px solid rgba(80,125,114,.12);
    box-shadow: 0 16px 45px rgba(18,35,30,.09);
    overflow: hidden;
}

.wintegron-header .nav-menu ul li .sub-menu li a:hover{
    color: var(--win-primary);
    background-color: rgba(80,125,114,.06);
}

.wintegron-header .header-extra .template-btn{
    padding: 15px 24px;
}

.mobile-slide-panel .panel-inner{
    background: #fff;
}

.mobile-slide-panel .mobile-menu ul li a{
    color: var(--win-text);
}

.mobile-slide-panel .mobile-menu ul li a:hover{
    color: var(--win-primary);
}

/* =========================================================
   Hero
========================================================= */
.wintegron-hero{
    position: relative;
    padding-top: 170px;
    padding-bottom: 120px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(111,152,142,.18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(80,125,114,.08), transparent 28%),
        linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
}

.wintegron-hero:before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: rgba(80,125,114,.06);
    filter: blur(30px);
    border-radius: 50%;
    pointer-events: none;
}

.wintegron-hero-content{
    position: relative;
    z-index: 2;
}

.wintegron-hero-content .title-tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

.wintegron-hero-content .title-tag span{
    display: inline-block;
    padding: 6px 12px;
    background: rgba(80,125,114,.10);
    border-radius: 999px;
    color: var(--win-primary);
}

.wintegron-hero-content .hero-title{
    font-size: 62px;
    line-height: 1.08;
    margin-bottom: 24px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.wintegron-hero-content .hero-text{
    font-size: 18px;
    line-height: 1.9;
    color: var(--win-muted);
    max-width: 620px;
    margin-bottom: 35px;
}

.wintegron-hero .hero-btns{
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.wintegron-hero .hero-btns li{
    margin: 0;
}

.wintegron-hero-mini{
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.wintegron-hero-mini .mini-item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--win-text);
    font-weight: 500;
}

.wintegron-hero-mini .mini-item i{
    color: var(--win-primary);
    font-size: 16px;
}

/* =========================================================
   Hero Mockup
========================================================= */
.wintegron-mockup{
    position: relative;
    padding: 20px 0 20px 30px;
}

.mockup-main-card{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(80,125,114,.16);
    box-shadow: var(--win-shadow-lg);
    border-radius: 28px;
    padding: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 2;
}

.mockup-card-header{
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.mockup-card-header .dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(80,125,114,.35);
}

.mockup-grid{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 18px;
}

.mockup-box{
    background: #fff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 22px;
    padding: 22px;
    min-height: 180px;
    box-shadow: 0 10px 35px rgba(18,35,30,0.05);
}

.mockup-box-lg{
    grid-row: span 2;
    min-height: 380px;
    background: var(--win-gradient);
    color: #fff;
}

.mockup-box-lg .mockup-label,
.mockup-box-lg h5,
.mockup-box-lg p{
    color: #fff;
}

.mockup-label{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--win-primary);
    margin-bottom: 14px;
}

.mockup-box h5{
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--win-text);
}

.mockup-box p{
    color: var(--win-muted);
    line-height: 1.8;
    margin-bottom: 0;
}

.mockup-lines{
    margin-top: 30px;
}

.mockup-lines span{
    display: block;
    height: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.35);
    margin-bottom: 12px;
}

.mockup-lines span:nth-child(1){ width: 92%; }
.mockup-lines span:nth-child(2){ width: 78%; }
.mockup-lines span:nth-child(3){ width: 65%; }

.mockup-chart{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 110px;
    margin-top: 24px;
}

.mockup-chart span{
    display: block;
    width: 18%;
    border-radius: 12px 12px 0 0;
    background: var(--win-gradient);
}

.mockup-chart span:nth-child(1){ height: 35%; }
.mockup-chart span:nth-child(2){ height: 55%; }
.mockup-chart span:nth-child(3){ height: 80%; }
.mockup-chart span:nth-child(4){ height: 65%; }

.floating-badge{
    position: absolute;
    background: #fff;
    color: var(--win-text);
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow: 0 12px 35px rgba(15,23,32,0.12);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(80,125,114,.14);
    z-index: 3;
}

.floating-badge i{
    color: var(--win-primary);
    margin-right: 8px;
}

.badge-one{
    top: 40px;
    right: -10px;
}

.badge-two{
    left: 0;
    bottom: 20px;
}

/* =========================================================
   Value Strip
========================================================= */
.wintegron-value-strip{
    margin-top: -10px;
    padding-bottom: 30px;
    position: relative;
    z-index: 3;
}

.value-strip-item{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 15px 40px rgba(18,35,30,0.05);
    margin-bottom: 24px;
    height: 100%;
}

.value-strip-item h4{
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 12px;
    color: var(--win-text);
}

.value-strip-item p{
    color: var(--win-muted);
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   Products
========================================================= */
.wintegron-products-section{
    background: var(--win-soft);
}

.win-product-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 24px;
    padding: 36px 30px;
    height: 100%;
    box-shadow: 0 15px 50px rgba(18,35,30,.06);
    position: relative;
    transition: .35s ease;
}

.win-product-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(18,35,30,.10);
}

.win-product-card.featured{
    border-color: rgba(80,125,114,.35);
    box-shadow: 0 20px 65px rgba(18,35,30,.10);
}

.featured-badge{
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--win-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
}

.product-icon{
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--win-primary);
    margin-bottom: 24px;
}

.win-product-card h3{
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 14px;
    color: var(--win-text);
}

.win-product-card p{
    color: var(--win-muted);
    line-height: 1.8;
}

.win-product-card ul{
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.win-product-card ul li{
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    color: var(--win-text);
}

.win-product-card ul li:before{
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--win-primary);
    font-weight: 700;
}

.product-link{
    color: var(--win-primary);
    font-weight: 700;
}

.product-link:hover{
    color: var(--win-primary-dark);
}

/* =========================================================
   Choose Cards
========================================================= */
.choose-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 34px 30px;
    height: 100%;
    box-shadow: 0 10px 40px rgba(18,35,30,.05);
    transition: .3s ease;
}

.choose-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 55px rgba(18,35,30,.09);
}

.choose-step{
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--win-primary);
    margin-bottom: 18px;
}

.choose-card h4{
    font-size: 24px;
    line-height: 1.45;
    margin-bottom: 16px;
    color: var(--win-text);
}

.choose-card p{
    color: var(--win-muted);
    line-height: 1.8;
    margin-bottom: 20px;
}

.choose-card a{
    color: var(--win-primary);
    font-weight: 700;
}

.choose-card a:hover{
    color: var(--win-primary-dark);
}

/* =========================================================
   Why Section
========================================================= */
.wintegron-why-section .fancy-icon-box{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.wintegron-why-section .fancy-icon-box .box-icon{
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    margin-bottom: 20px;
}

.wintegron-why-section .fancy-icon-box .box-icon img{
    display: none;
}

.wintegron-why-section .fancy-icon-box .box-content .title{
    color: #fff;
    margin-bottom: 12px;
}

.wintegron-why-section .fancy-icon-box .box-content p{
    color: rgba(255,255,255,.76);
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   FAQ
========================================================= */
.wintegron-faq-section{
    background: #fff;
}

.wintegron-faq-section .accordion-item{
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(18,35,30,.04);
    background: #fff;
}

.wintegron-faq-section .accordion-button{
    background: #fff;
    color: var(--win-text);
    font-weight: 700;
    font-size: 18px;
    padding: 24px 26px;
    box-shadow: none;
}

.wintegron-faq-section .accordion-button:not(.collapsed){
    color: var(--win-primary);
    background: rgba(80,125,114,.04);
    box-shadow: none;
}

.wintegron-faq-section .accordion-button:focus{
    border-color: transparent;
    box-shadow: none;
}

.wintegron-faq-section .accordion-body{
    padding: 0 26px 24px;
    color: var(--win-muted);
    line-height: 1.9;
    background: rgba(80,125,114,.02);
}

/* =========================================================
   CTA
========================================================= */
.wintegron-cta{
    background: linear-gradient(180deg, #ffffff 0%, #f3f8f6 100%);
}

.cta-inner{
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 30px;
    padding: 60px 40px;
    box-shadow: 0 18px 70px rgba(18,35,30,.08);
}

.cta-inner h2{
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 18px;
    color: var(--win-text);
}

.cta-inner p{
    color: var(--win-muted);
    font-size: 17px;
    line-height: 1.9;
    max-width: 680px;
    margin: 0 auto 28px;
}

/* =========================================================
   Footer
========================================================= */
.wintegron-footer{
    background: #0f1715;
    color: rgba(255,255,255,.72);
    position: relative;
}

.wintegron-footer:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.06);
}

.wintegron-footer .footer-widget p,
.wintegron-footer .footer-widget li,
.wintegron-footer .footer-widget a{
    color: rgba(255,255,255,.72);
}

.wintegron-footer .widget-title{
    color: #fff;
    font-size: 18px;
    margin-bottom: 22px;
}

.wintegron-footer .footer-links{
    list-style: none;
    padding: 0;
    margin: 0;
}

.wintegron-footer .footer-links li{
    margin-bottom: 12px;
}

.wintegron-footer .footer-links li a:hover{
    color: #fff;
}

.footer-contact-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li{
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact-list li i{
    color: var(--win-primary-light);
    width: 18px;
    text-align: center;
}

.footer-socials{
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-socials a{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255,255,255,.03);
}

.footer-socials a:hover{
    background: var(--win-primary);
    border-color: var(--win-primary);
    color: #fff;
    transform: translateY(-2px);
}

.footer-copyright{
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 20px;
}

.footer-copyright p{
    color: rgba(255,255,255,.55);
}

/* =========================================================
   Back to Top
========================================================= */
.back-to-top{
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--win-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 35px rgba(18,35,30,.20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    z-index: 99;
}

.back-to-top:hover{
    background: var(--win-primary-dark);
    color: #fff;
}

.back-to-top.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================================================
   Yardımcı küçük iyileştirmeler
========================================================= */
.m-b-20{
    margin-bottom: 20px;
}

.m-b-25{
    margin-bottom: 25px;
}

.m-b-30{
    margin-bottom: 30px;
}

.m-b-40{
    margin-bottom: 40px;
}

.m-b-50{
    margin-bottom: 50px;
}

.m-b-60{
    margin-bottom: 60px;
}

.m-t-20{
    margin-top: 20px;
}

.p-t-100{
    padding-top: 100px;
}

.p-b-100{
    padding-bottom: 100px;
}

.p-t-125{
    padding-top: 125px;
}

.p-b-125{
    padding-bottom: 125px;
}

.p-b-90{
    padding-bottom: 90px;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1399px){
    .wintegron-hero-content .hero-title{
        font-size: 56px;
    }
}

@media (max-width: 1199px){
    .wintegron-hero-content .hero-title{
        font-size: 50px;
    }

    .cta-inner h2{
        font-size: 40px;
    }
}

@media (max-width: 991px){
    .wintegron-hero{
        padding-top: 140px;
        padding-bottom: 90px;
    }

    .wintegron-hero-content{
        margin-bottom: 50px;
    }

    .wintegron-hero-content .hero-title{
        font-size: 42px;
    }

    .wintegron-hero-content .hero-text{
        font-size: 17px;
    }

    .mockup-grid{
        grid-template-columns: 1fr;
    }

    .mockup-box-lg{
        grid-row: auto;
        min-height: 260px;
    }

    .badge-one,
    .badge-two{
        position: static;
        display: inline-block;
        margin-top: 15px;
        margin-right: 10px;
    }

    .cta-inner h2{
        font-size: 34px;
    }

    .p-t-125{
        padding-top: 100px;
    }

    .p-b-125{
        padding-bottom: 100px;
    }
}

@media (max-width: 767px){
    .wintegron-hero{
        padding-top: 125px;
        padding-bottom: 80px;
    }

    .wintegron-hero-content .hero-title{
        font-size: 34px;
        line-height: 1.15;
    }

    .wintegron-hero-content .hero-text{
        font-size: 16px;
        line-height: 1.8;
    }

    .mockup-main-card{
        padding: 18px;
        border-radius: 22px;
    }

    .mockup-box{
        padding: 18px;
        min-height: auto;
    }

    .mockup-box h5{
        font-size: 20px;
    }

    .cta-inner{
        padding: 40px 24px;
        border-radius: 24px;
    }

    .cta-inner h2{
        font-size: 28px;
    }

    .cta-inner p{
        font-size: 16px;
    }

    .win-product-card,
    .choose-card,
    .value-strip-item{
        padding: 28px 22px;
    }

    .choose-card h4,
    .win-product-card h3{
        font-size: 22px;
    }

    .wintegron-faq-section .accordion-button{
        font-size: 16px;
        padding: 20px 20px;
    }

    .wintegron-faq-section .accordion-body{
        padding: 0 20px 20px;
    }

    .footer-socials{
        gap: 10px;
    }

    .footer-socials a{
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 575px){
    .wintegron-hero-content .hero-title{
        font-size: 30px;
    }

    .wintegron-hero-mini{
        gap: 12px 16px;
    }

    .value-strip-item h4{
        font-size: 18px;
    }

    .product-icon{
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .back-to-top{
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

/* Yeni suite section */
.wintegron-suite-section{
    background: linear-gradient(180deg, #ffffff 0%, #f5f8f7 100%);
}

.suite-left{
    padding-right: 24px;
}

.suite-kicker{
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--win-primary);
    background: rgba(80,125,114,.10);
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.suite-left h2{
    font-size: 46px;
    line-height: 1.15;
    color: var(--win-text);
    margin-bottom: 18px;
    letter-spacing: -0.03em;
}

.suite-left > p{
    font-size: 17px;
    line-height: 1.9;
    color: var(--win-muted);
    margin-bottom: 30px;
    max-width: 620px;
}

.suite-flow-clean{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.suite-flow-item{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 20px;
    padding: 22px 22px;
    box-shadow: 0 12px 35px rgba(18,35,30,.05);
}

.suite-flow-no{
    min-width: 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--win-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.suite-flow-content h5{
    font-size: 22px;
    color: var(--win-text);
    margin-bottom: 8px;
}

.suite-flow-content p{
    margin-bottom: 0;
    color: var(--win-muted);
    line-height: 1.8;
}

.suite-ecosystem-card{
    background: #ffffff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 20px 60px rgba(18,35,30,.08);
    position: relative;
    overflow: hidden;
}

.suite-ecosystem-card:before{
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: rgba(80,125,114,.08);
    border-radius: 50%;
    filter: blur(10px);
}

.suite-ecosystem-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.suite-ecosystem-card h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.suite-ecosystem-card p{
    color: var(--win-muted);
    line-height: 1.9;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
}

.suite-ecosystem-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    position: relative;
    z-index: 1;
}

.ecosystem-mini-card{
    background: var(--win-soft);
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 20px 18px;
    text-align: center;
}

.ecosystem-mini-card i{
    display: block;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 12px;
}

.ecosystem-mini-card span{
    display: block;
    color: var(--win-text);
    font-weight: 600;
}

.suite-ecosystem-bottom{
    margin-top: 26px;
    position: relative;
    z-index: 1;
}

@media (max-width: 1199px){
    .suite-left h2{
        font-size: 40px;
    }

    .suite-ecosystem-card h3{
        font-size: 30px;
    }
}

@media (max-width: 991px){
    .suite-left{
        padding-right: 0;
    }

    .suite-left h2{
        font-size: 34px;
    }

    .suite-ecosystem-card{
        margin-top: 10px;
    }
}

@media (max-width: 767px){
    .suite-left h2{
        font-size: 28px;
    }

    .suite-ecosystem-card{
        padding: 24px;
    }

    .suite-ecosystem-card h3{
        font-size: 26px;
    }

    .suite-flow-item{
        padding: 18px;
    }

    .suite-flow-content h5{
        font-size: 20px;
    }

    .suite-ecosystem-grid{
        grid-template-columns: 1fr;
    }
}

/* Product hero */
.wintegron-product-hero .inner-hero-content h1{
    max-width: 680px;
}

.product-hero-mockup{
    position: relative;
    padding-left: 24px;
}

.product-mockup-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 22px 65px rgba(18,35,30,.10);
    position: relative;
}

.product-mockup-top{
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.product-mockup-top span{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(80,125,114,.35);
}

.integration-visual{
    position: relative;
    min-height: 420px;
    background: linear-gradient(180deg, #f8fbfa 0%, #eef6f3 100%);
    border-radius: 24px;
    overflow: hidden;
}

.integration-core{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--win-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 18px 24px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(80,125,114,.25);
    z-index: 2;
}

.integration-node{
    position: absolute;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 18px;
    padding: 14px 18px;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(18,35,30,.07);
    z-index: 2;
}

.integration-node i{
    display: block;
    color: var(--win-primary);
    font-size: 20px;
    margin-bottom: 8px;
}

.integration-node span{
    color: var(--win-text);
    font-weight: 600;
    font-size: 14px;
}

.node-left-top{
    top: 45px;
    left: 30px;
}

.node-right-top{
    top: 45px;
    right: 30px;
}

.node-left-bottom{
    bottom: 45px;
    left: 30px;
}

.node-right-bottom{
    bottom: 45px;
    right: 30px;
}

.integration-line{
    position: absolute;
    background: rgba(80,125,114,.18);
    z-index: 1;
}

.line-1{
    width: 140px;
    height: 2px;
    top: 108px;
    left: 170px;
}

.line-2{
    width: 140px;
    height: 2px;
    top: 108px;
    right: 170px;
}

.line-3{
    width: 140px;
    height: 2px;
    bottom: 108px;
    left: 170px;
}

.line-4{
    width: 140px;
    height: 2px;
    bottom: 108px;
    right: 170px;
}

.product-floating-note{
    position: absolute;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    color: var(--win-text);
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 12px 35px rgba(18,35,30,.10);
    font-weight: 600;
    font-size: 14px;
    z-index: 3;
}

.product-floating-note i{
    color: var(--win-primary);
    margin-right: 8px;
}

.note-one{
    top: 20px;
    right: 0;
}

.note-two{
    bottom: 10px;
    left: 0;
}

/* Feature section */
.feature-content h2{
    font-size: 44px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.feature-content > p{
    font-size: 17px;
    line-height: 1.9;
    color: var(--win-muted);
    margin-bottom: 26px;
}

.feature-list-block{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.feature-list-item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(18,35,30,.04);
}

.feature-list-item i{
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.feature-list-item h5{
    font-size: 21px;
    margin-bottom: 8px;
    color: var(--win-text);
}

.feature-list-item p{
    margin-bottom: 0;
    line-height: 1.8;
    color: var(--win-muted);
}

.feature-side-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 50px rgba(18,35,30,.06);
}

.feature-side-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.feature-side-card h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 16px;
}

.feature-side-card p{
    line-height: 1.9;
    color: var(--win-muted);
    margin-bottom: 26px;
}

.feature-side-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.feature-side-mini{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
}

.feature-side-mini strong{
    display: block;
    color: var(--win-primary);
    font-size: 22px;
    margin-bottom: 6px;
}

.feature-side-mini span{
    color: var(--win-text);
    font-weight: 600;
}

/* Flow section */
.wintegron-flow-section .flow-card{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
}

.wintegron-flow-section .flow-no{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 18px;
}

.wintegron-flow-section .flow-card h4{
    color: #fff;
    margin-bottom: 12px;
    font-size: 24px;
}

.wintegron-flow-section .flow-card p{
    color: rgba(255,255,255,.74);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Scenario cards */
.scenario-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 30px 28px;
    box-shadow: 0 14px 40px rgba(18,35,30,.05);
    height: 100%;
}

.scenario-card h4{
    font-size: 24px;
    line-height: 1.35;
    color: var(--win-text);
    margin-bottom: 14px;
}

.scenario-card p{
    margin-bottom: 0;
    line-height: 1.85;
    color: var(--win-muted);
}

/* Why product */
.why-product-card h2{
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.why-product-card p{
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 24px;
    color: var(--win-muted);
}

.large-info-card{
    padding: 36px 34px;
}

.large-info-card h4{
    font-size: 28px;
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 1199px){
    .feature-content h2,
    .why-product-card h2{
        font-size: 36px;
    }

    .feature-side-card h3{
        font-size: 30px;
    }

    .integration-line{
        display: none;
    }
}

@media (max-width: 991px){
    .product-hero-mockup{
        padding-left: 0;
    }

    .integration-visual{
        min-height: 520px;
    }

    .feature-side-card{
        margin-top: 10px;
    }
}

@media (max-width: 767px){
    .integration-visual{
        min-height: 560px;
    }

    .integration-core{
        font-size: 18px;
        padding: 16px 20px;
    }

    .integration-node{
        min-width: 130px;
        padding: 12px 14px;
    }

    .node-left-top,
    .node-right-top{
        top: 30px;
    }

    .node-left-bottom,
    .node-right-bottom{
        bottom: 30px;
    }

    .node-left-top,
    .node-left-bottom{
        left: 15px;
    }

    .node-right-top,
    .node-right-bottom{
        right: 15px;
    }

    .feature-content h2,
    .why-product-card h2{
        font-size: 30px;
    }

    .feature-side-card h3{
        font-size: 26px;
    }

    .feature-side-grid{
        grid-template-columns: 1fr;
    }

    .feature-list-item{
        padding: 18px;
    }

    .feature-list-item h5{
        font-size: 19px;
    }

    .scenario-card{
        padding: 24px 22px;
    }

    .scenario-card h4{
        font-size: 21px;
    }

    .large-info-card{
        padding: 28px 24px;
    }

    .product-floating-note{
        position: static;
        display: inline-block;
        margin-top: 14px;
        margin-right: 10px;
    }
}

/* Wintegron 2.0 Hero */
.wintegron-2-hero{
    background:
        radial-gradient(circle at top right, rgba(80,125,114,.14), transparent 28%),
        radial-gradient(circle at bottom left, rgba(111,152,142,.12), transparent 25%),
        linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
}

.w2-hero-mockup{
    position: relative;
    padding-left: 24px;
}

.w2-main-panel{
    background: #fff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 22px 65px rgba(18,35,30,.10);
    position: relative;
    z-index: 2;
}

.w2-panel-top{
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.w2-panel-top span{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(80,125,114,.35);
}

.w2-panel-body{
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    background: linear-gradient(180deg, #f8fbfa 0%, #eef6f3 100%);
    border-radius: 24px;
    padding: 18px;
}

.w2-sidebar{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.w2-channel{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--win-text);
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(18,35,30,.04);
}

.w2-channel i{
    color: var(--win-primary);
    font-size: 18px;
}

.w2-channel.active{
    background: var(--win-gradient);
    color: #fff;
    border-color: transparent;
}

.w2-channel.active i{
    color: #fff;
}

.w2-chat-area{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(18,35,30,.04);
}

.w2-chat-header{
    margin-bottom: 18px;
}

.w2-chat-header strong{
    display: block;
    color: var(--win-text);
    font-size: 18px;
    margin-bottom: 4px;
}

.w2-chat-header span{
    color: var(--win-muted);
    font-size: 14px;
}

.w2-chat-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.w2-message{
    max-width: 82%;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
}

.w2-message.inbound{
    background: #f3f7f5;
    color: var(--win-text);
    border: 1px solid rgba(80,125,114,.08);
}

.w2-message.outbound{
    background: var(--win-gradient);
    color: #fff;
    margin-left: auto;
}

.w2-chat-footer{
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.w2-tag{
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
}

.w2-floating-card{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 35px rgba(18,35,30,.10);
    z-index: 3;
}

.w2-floating-card i{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--win-primary);
}

.w2-floating-card strong{
    display: block;
    color: var(--win-text);
    font-size: 14px;
}

.w2-floating-card span{
    display: block;
    color: var(--win-muted);
    font-size: 13px;
}

.automation-card{
    top: 26px;
    right: -6px;
}

.ai-card{
    left: 0;
    bottom: 8px;
}

/* Channel cards */
.channel-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 30px 28px;
    box-shadow: 0 14px 40px rgba(18,35,30,.05);
    height: 100%;
    transition: .3s ease;
}

.channel-card:hover{
    transform: translateY(-4px);
}

.channel-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.channel-card h4{
    font-size: 26px;
    margin-bottom: 14px;
    color: var(--win-text);
}

.channel-card p{
    margin-bottom: 0;
    line-height: 1.85;
}

.whatsapp-card .channel-icon{
    background: rgba(37,211,102,.12);
    color: #25D366;
}

.instagram-card .channel-icon{
    background: rgba(193,53,132,.12);
    color: #C13584;
}

.facebook-card .channel-icon{
    background: rgba(24,119,242,.12);
    color: #1877F2;
}

/* W2 automation */
.w2-automation-card{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
}

.w2-automation-card .flow-no{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 18px;
}

.w2-automation-card h4{
    color: #fff;
    margin-bottom: 12px;
    font-size: 24px;
}

.w2-automation-card p{
    color: rgba(255,255,255,.74);
    line-height: 1.8;
    margin-bottom: 0;
}

/* AI visual */
.w2-ai-visual{
    position: relative;
    padding-right: 24px;
}

.ai-core-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 50px rgba(18,35,30,.06);
    position: relative;
    z-index: 2;
}

.ai-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.ai-core-card h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 14px;
}

.ai-core-card p{
    color: var(--win-muted);
    line-height: 1.9;
    margin-bottom: 26px;
}

.ai-bars{
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 170px;
}

.ai-bars span{
    display: block;
    flex: 1;
    border-radius: 18px 18px 0 0;
    background: var(--win-gradient);
}

.ai-bars span:nth-child(1){height: 36%;}
.ai-bars span:nth-child(2){height: 54%;}
.ai-bars span:nth-child(3){height: 82%;}
.ai-bars span:nth-child(4){height: 66%;}

.ai-float-box{
    position: absolute;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 35px rgba(18,35,30,.10);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    font-weight: 600;
    color: var(--win-text);
}

.ai-float-box i{
    color: var(--win-primary);
}

.ai-box-1{
    top: 20px;
    right: 0;
}

.ai-box-2{
    left: 0;
    bottom: 20px;
}

/* Responsive */
@media (max-width: 1199px){
    .w2-panel-body{
        grid-template-columns: 1fr;
    }

    .ai-core-card h3{
        font-size: 30px;
    }
}

@media (max-width: 991px){
    .w2-hero-mockup,
    .w2-ai-visual{
        padding-left: 0;
        padding-right: 0;
    }

    .w2-floating-card,
    .ai-float-box{
        position: static;
        display: inline-flex;
        margin-top: 14px;
        margin-right: 10px;
    }
}

@media (max-width: 767px){
    .w2-main-panel{
        padding: 18px;
    }

    .w2-panel-body{
        padding: 14px;
    }

    .w2-chat-area{
        padding: 14px;
    }

    .channel-card{
        padding: 24px 22px;
    }

    .channel-card h4{
        font-size: 22px;
    }

    .ai-core-card{
        padding: 26px 22px;
    }

    .ai-core-card h3{
        font-size: 26px;
    }

    .w2-automation-card{
        padding: 24px 20px;
    }

    .w2-automation-card h4{
        font-size: 21px;
    }
}

/* Ads hero */
.ads-hero{
    background:
        radial-gradient(circle at top right, rgba(80,125,114,.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(111,152,142,.10), transparent 24%),
        linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
}

.ads-hero-mockup{
    position: relative;
    padding-left: 24px;
}

.ads-main-dashboard{
    background: #fff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 22px 65px rgba(18,35,30,.10);
    position: relative;
    z-index: 2;
}

.ads-dashboard-top{
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ads-dashboard-top span{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(80,125,114,.35);
}

.ads-dashboard-body{
    background: linear-gradient(180deg, #f8fbfa 0%, #eef6f3 100%);
    border-radius: 24px;
    padding: 18px;
}

.ads-kpi-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.ads-kpi-box{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 8px 24px rgba(18,35,30,.04);
}

.ads-kpi-box small{
    display: block;
    color: var(--win-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.ads-kpi-box strong{
    color: var(--win-text);
    font-size: 24px;
    line-height: 1.2;
}

.ads-chart-row{
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ads-chart-box{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(18,35,30,.04);
}

.chart-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.chart-head strong{
    color: var(--win-text);
    font-size: 17px;
}

.chart-head span{
    color: var(--win-muted);
    font-size: 13px;
}

.ads-chart-bars{
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 160px;
}

.ads-chart-bars span{
    display: block;
    flex: 1;
    border-radius: 16px 16px 0 0;
    background: var(--win-gradient);
}

.ads-chart-bars span:nth-child(1){height: 34%;}
.ads-chart-bars span:nth-child(2){height: 48%;}
.ads-chart-bars span:nth-child(3){height: 62%;}
.ads-chart-bars span:nth-child(4){height: 54%;}
.ads-chart-bars span:nth-child(5){height: 84%;}
.ads-chart-bars span:nth-child(6){height: 72%;}

.ads-donut-placeholder{
    width: 150px;
    height: 150px;
    margin: 10px auto 0;
    border-radius: 50%;
    background:
        conic-gradient(#507d72 0 68%, rgba(80,125,114,.14) 68% 100%);
    position: relative;
}

.ads-donut-placeholder:before{
    content: "";
    position: absolute;
    inset: 22px;
    background: #fff;
    border-radius: 50%;
}

.ads-donut-center{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--win-text);
    z-index: 1;
}

.ads-table-box{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(18,35,30,.04);
}

.ads-table-row{
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(80,125,114,.08);
    color: var(--win-text);
    font-size: 14px;
}

.ads-table-row:last-child{
    border-bottom: 0;
}

.ads-table-row.head{
    background: rgba(80,125,114,.05);
    font-weight: 700;
}

.ads-floating-card{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 35px rgba(18,35,30,.10);
    z-index: 3;
}

.ads-floating-card i{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--win-primary);
}

.ads-floating-card strong{
    display: block;
    color: var(--win-text);
    font-size: 14px;
}

.ads-floating-card span{
    display: block;
    color: var(--win-muted);
    font-size: 13px;
}

.ads-float-one{
    top: 24px;
    right: -6px;
}

.ads-float-two{
    left: 0;
    bottom: 8px;
}

/* Problem cards */
.problem-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 30px 28px;
    box-shadow: 0 14px 40px rgba(18,35,30,.05);
    height: 100%;
    transition: .3s ease;
}

.problem-card:hover{
    transform: translateY(-4px);
}

.problem-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 20px;
}

.problem-card h4{
    font-size: 24px;
    margin-bottom: 14px;
    color: var(--win-text);
}

.problem-card p{
    margin-bottom: 0;
    line-height: 1.85;
}

/* Ads side card */
.ads-side-card{
    background: linear-gradient(180deg, #f8fbfa 0%, #eef6f3 100%);
}

/* Reporting section */
.ads-reporting-section .report-card{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
}

.ads-reporting-section .flow-no{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 18px;
}

.ads-reporting-section .report-card h4{
    color: #fff;
    margin-bottom: 12px;
    font-size: 24px;
}

.ads-reporting-section .report-card p{
    color: rgba(255,255,255,.74);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Insight visual */
.ads-insight-visual{
    position: relative;
    padding-right: 24px;
}

.insight-core-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 50px rgba(18,35,30,.06);
    position: relative;
    z-index: 2;
}

.insight-core-card h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 14px;
}

.insight-core-card p{
    color: var(--win-muted);
    line-height: 1.9;
    margin-bottom: 26px;
}

.insight-lines span{
    display: block;
    height: 12px;
    border-radius: 999px;
    background: rgba(80,125,114,.14);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.insight-lines span:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--win-gradient);
}

.insight-lines span:nth-child(1):after{width: 82%;}
.insight-lines span:nth-child(2):after{width: 68%;}
.insight-lines span:nth-child(3):after{width: 91%;}
.insight-lines span:nth-child(4):after{width: 60%;}

/* Responsive */
@media (max-width: 1199px){
    .ads-chart-row{
        grid-template-columns: 1fr;
    }

    .insight-core-card h3{
        font-size: 30px;
    }
}

@media (max-width: 991px){
    .ads-hero-mockup,
    .ads-insight-visual{
        padding-left: 0;
        padding-right: 0;
    }

    .ads-floating-card,
    .ai-float-box{
        position: static;
        display: inline-flex;
        margin-top: 14px;
        margin-right: 10px;
    }
}

@media (max-width: 767px){
    .ads-main-dashboard{
        padding: 18px;
    }

    .ads-dashboard-body{
        padding: 14px;
    }

    .ads-kpi-row{
        grid-template-columns: 1fr;
    }

    .ads-table-row{
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }

    .problem-card{
        padding: 24px 22px;
    }

    .problem-card h4{
        font-size: 21px;
    }

    .insight-core-card{
        padding: 26px 22px;
    }

    .insight-core-card h3{
        font-size: 26px;
    }

    .ads-reporting-section .report-card{
        padding: 24px 20px;
    }

    .ads-reporting-section .report-card h4{
        font-size: 21px;
    }
}

/* Solutions hero */
.solutions-hero{
    background:
        radial-gradient(circle at top right, rgba(80,125,114,.10), transparent 28%),
        radial-gradient(circle at bottom left, rgba(111,152,142,.10), transparent 24%),
        linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
}

/* Approach cards */
.solution-approach-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 30px 28px;
    box-shadow: 0 14px 40px rgba(18,35,30,.05);
    height: 100%;
    transition: .3s ease;
}

.solution-approach-card:hover{
    transform: translateY(-4px);
}

.solution-approach-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 20px;
}

.solution-approach-card h4{
    font-size: 24px;
    margin-bottom: 14px;
    color: var(--win-text);
}

.solution-approach-card p{
    margin-bottom: 0;
    line-height: 1.85;
}

/* Solution blocks */
.solution-block{
    padding: 42px 0;
    border-bottom: 1px solid rgba(80,125,114,.08);
}

.solution-block:last-child{
    border-bottom: 0;
}

.solution-block-content h2{
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.solution-block-content p{
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 24px;
    color: var(--win-muted);
}

.solution-block-actions{
    margin-top: 28px;
}

.solution-visual-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 50px rgba(18,35,30,.06);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-visual-card.soft-green{
    background: linear-gradient(180deg, #f5faf8 0%, #e9f4ef 100%);
}

.solution-visual-card.soft-blue{
    background: linear-gradient(180deg, #f6fbfb 0%, #edf5f6 100%);
}

.solution-visual-card.soft-purple{
    background: linear-gradient(180deg, #faf8fb 0%, #f2eef6 100%);
}

/* Visual types */
.solution-visual-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.solution-mini-box{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
}

.solution-mini-box i{
    display: block;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 12px;
}

.solution-mini-box span{
    display: block;
    color: var(--win-text);
    font-weight: 600;
}

.solution-centered-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    background: var(--win-gradient);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 24px;
}

.solution-lines{
    width: 100%;
}

.solution-lines span{
    display: block;
    height: 12px;
    border-radius: 999px;
    background: rgba(80,125,114,.14);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.solution-lines span:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--win-gradient);
}

.solution-lines span:nth-child(1):after{width: 88%;}
.solution-lines span:nth-child(2):after{width: 72%;}
.solution-lines span:nth-child(3):after{width: 93%;}
.solution-lines span:nth-child(4):after{width: 61%;}

.sales-visual-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sales-visual-item{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--win-text);
    font-weight: 600;
}

.sales-visual-item i{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--win-primary);
}

.sales-visual-item.active{
    border-color: rgba(80,125,114,.22);
    box-shadow: 0 10px 26px rgba(18,35,30,.06);
}

.support-stack{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.support-stack-item{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 20px 20px;
    text-align: left;
}

.support-stack-item strong{
    display: block;
    color: var(--win-text);
    font-size: 18px;
    margin-bottom: 6px;
}

.support-stack-item span{
    display: block;
    color: var(--win-muted);
}

.marketing-metrics{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.marketing-metric{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
}

.marketing-metric small{
    display: block;
    color: var(--win-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.marketing-metric strong{
    display: block;
    color: var(--win-text);
    font-size: 28px;
    line-height: 1.2;
}

.agency-mini-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.agency-box{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
}

.agency-box i{
    display: block;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 12px;
}

.agency-box span{
    display: block;
    color: var(--win-text);
    font-weight: 600;
}

/* Final section */
.solutions-final-section{
    position: relative;
    overflow: hidden;
}

.solutions-final-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 60px rgba(0,0,0,.12);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.solutions-final-item{
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 18px 18px;
    margin-bottom: 14px;
}

.solutions-final-item strong{
    display: block;
    color: #fff;
    font-size: 17px;
    margin-bottom: 6px;
}

.solutions-final-item span{
    display: block;
    color: rgba(255,255,255,.72);
}

.solutions-final-action{
    margin-top: 24px;
}

/* Responsive */
@media (max-width: 1199px){
    .solution-block-content h2{
        font-size: 36px;
    }
}

@media (max-width: 991px){
    .solution-block{
        padding: 32px 0;
    }

    .solution-block-content h2{
        font-size: 32px;
    }

    .solution-visual-card{
        min-height: auto;
    }
}

@media (max-width: 767px){
    .solution-approach-card,
    .solution-visual-card{
        padding: 24px 22px;
    }

    .solution-block-content h2{
        font-size: 28px;
    }

    .solution-block-content p{
        font-size: 16px;
    }

    .solution-visual-grid,
    .marketing-metrics,
    .agency-mini-grid{
        grid-template-columns: 1fr;
    }

    .solutions-final-card{
        padding: 24px 22px;
    }
}

/* About hero */
.about-hero{
    background:
        radial-gradient(circle at top right, rgba(80,125,114,.10), transparent 28%),
        radial-gradient(circle at bottom left, rgba(111,152,142,.10), transparent 24%),
        linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
}

/* Story section */
.about-story-content h2{
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.about-story-content p{
    font-size: 17px;
    line-height: 1.9;
    color: var(--win-muted);
    margin-bottom: 18px;
}

.about-story-visual{
    position: relative;
    padding-left: 24px;
}

.about-story-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 50px rgba(18,35,30,.06);
    position: relative;
    z-index: 2;
}

.about-story-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.about-story-card h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 16px;
}

.about-story-card p{
    color: var(--win-muted);
    line-height: 1.9;
    margin-bottom: 24px;
}

.about-story-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.about-story-mini{
    background: #fff;
    border: 1px solid rgba(80,125,114,.08);
    border-radius: 18px;
    padding: 20px 18px;
    text-align: center;
}

.about-story-mini strong{
    display: block;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 6px;
}

.about-story-mini span{
    display: block;
    color: var(--win-text);
    font-weight: 600;
}

.about-float{
    position: absolute;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow: 0 12px 35px rgba(18,35,30,.10);
    font-weight: 600;
    color: var(--win-text);
    z-index: 3;
}

.about-float i{
    color: var(--win-primary);
    margin-right: 8px;
}

.about-float-1{
    top: 18px;
    right: 0;
}

.about-float-2{
    left: 0;
    bottom: 20px;
}

/* Principles */
.about-principle-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 30px 26px;
    box-shadow: 0 14px 40px rgba(18,35,30,.05);
    height: 100%;
    transition: .3s ease;
}

.about-principle-card:hover{
    transform: translateY(-4px);
}

.about-principle-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(80,125,114,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--win-primary);
    font-size: 24px;
    margin-bottom: 20px;
}

.about-principle-card h4{
    font-size: 24px;
    margin-bottom: 14px;
    color: var(--win-text);
}

.about-principle-card p{
    margin-bottom: 0;
    line-height: 1.85;
}

/* Product summary */
.about-products-summary .about-product-box{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
}

.about-product-no{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 18px;
}

.about-products-summary .about-product-box h4{
    color: #fff;
    margin-bottom: 12px;
    font-size: 24px;
}

.about-products-summary .about-product-box p{
    color: rgba(255,255,255,.74);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Vision / mission */
.about-vision-card h2{
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.about-vision-card p{
    font-size: 17px;
    line-height: 1.9;
    color: var(--win-muted);
    margin-bottom: 18px;
}

.about-mission-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 18px 50px rgba(18,35,30,.06);
}

.about-mission-card h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 16px;
}

.about-mission-card p{
    color: var(--win-muted);
    line-height: 1.9;
    margin-bottom: 22px;
}

/* Responsive */
@media (max-width: 1199px){
    .about-story-content h2,
    .about-vision-card h2{
        font-size: 36px;
    }

    .about-story-card h3,
    .about-mission-card h3{
        font-size: 30px;
    }
}

@media (max-width: 991px){
    .about-story-visual{
        padding-left: 0;
    }

    .about-float{
        position: static;
        display: inline-block;
        margin-top: 14px;
        margin-right: 10px;
    }

    .about-mission-card{
        margin-top: 10px;
    }

    .about-story-content h2,
    .about-vision-card h2{
        font-size: 32px;
    }
}

@media (max-width: 767px){
    .about-story-card,
    .about-mission-card{
        padding: 24px 22px;
    }

    .about-story-content h2,
    .about-vision-card h2{
        font-size: 28px;
    }

    .about-story-card h3,
    .about-mission-card h3{
        font-size: 26px;
    }

    .about-story-grid{
        grid-template-columns: 1fr;
    }

    .about-principle-card{
        padding: 24px 22px;
    }

    .about-principle-card h4{
        font-size: 21px;
    }
}

/* Contact hero */
.contact-hero{
    background:
        radial-gradient(circle at top right, rgba(80,125,114,.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(111,152,142,.10), transparent 25%),
        linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
}

/* Form card */
.contact-form-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 28px;
    padding: 36px;
    box-shadow: 0 20px 60px rgba(18,35,30,.06);
}

.contact-form-card h2{
    font-size: 34px;
    margin-bottom: 24px;
}

/* Form */
.wintegron-form .form-group{
    margin-bottom: 18px;
}

.wintegron-form label{
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--win-muted);
}

.wintegron-form input,
.wintegron-form select,
.wintegron-form textarea{
    width: 100%;
    border: 1px solid rgba(80,125,114,.15);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    transition: .2s;
}

.wintegron-form input:focus,
.wintegron-form select:focus,
.wintegron-form textarea:focus{
    border-color: var(--win-primary);
}

/* Side */
.contact-info-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 20px;
}

.contact-info-item{
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-info-item i{
    color: var(--win-primary);
    font-size: 18px;
    margin-top: 4px;
}

.contact-highlight-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 20px;
}

.contact-mini-cta{
    background: #fff;
    border: 1px dashed rgba(80,125,114,.2);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
}

.small-btn{
    padding: 10px 16px;
    font-size: 13px;
}

/* FAQ fix */
.wintegron-faq-section .accordion{
    width: 100%;
}

.wintegron-faq-section .accordion-item{
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(18,35,30,.04);
    background: #fff;
}

.wintegron-faq-section .accordion-header{
    margin: 0;
    width: 100%;
}

.wintegron-faq-section .accordion-button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    color: var(--win-text);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    padding: 24px 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
}

.wintegron-faq-section .accordion-button:not(.collapsed){
    color: var(--win-primary);
    background: rgba(80,125,114,.04);
    box-shadow: none;
}

.wintegron-faq-section .accordion-button:focus{
    border: 0;
    outline: 0;
    box-shadow: none;
}

.wintegron-faq-section .accordion-button::after{
    flex-shrink: 0;
    margin-left: 18px;
}

.wintegron-faq-section .accordion-collapse{
    border: 0;
}

.wintegron-faq-section .accordion-body{
    padding: 0 26px 24px;
    color: var(--win-muted);
    line-height: 1.9;
    background: rgba(80,125,114,.02);
}

@media (max-width: 767px){
    .wintegron-faq-section .accordion-button{
        font-size: 16px;
        padding: 20px 20px;
    }

    .wintegron-faq-section .accordion-body{
        padding: 0 20px 20px;
    }
}

/* Login hero */
.login-hero{
    background:
        radial-gradient(circle at top right, rgba(80,125,114,.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(111,152,142,.10), transparent 24%),
        linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
}

/* Login main */
.login-main-section{
    background: linear-gradient(180deg, #ffffff 0%, #f6faf8 100%);
}

.login-info-side h2{
    font-size: 44px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--win-text);
    letter-spacing: -0.03em;
}

.login-info-side > p{
    font-size: 17px;
    line-height: 1.9;
    color: var(--win-muted);
    margin-bottom: 28px;
}

.login-feature-list{
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.login-feature-item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(18,35,30,.04);
}

.login-feature-item i{
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.login-feature-item h5{
    font-size: 21px;
    margin-bottom: 8px;
    color: var(--win-text);
}

.login-feature-item p{
    margin-bottom: 0;
    color: var(--win-muted);
    line-height: 1.8;
}

.login-side-card{
    background: linear-gradient(180deg, #f7fbf9 0%, #edf6f2 100%);
    border: 1px solid rgba(80,125,114,.10);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 16px 45px rgba(18,35,30,.05);
}

.login-side-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

.login-side-card h4{
    font-size: 28px;
    line-height: 1.3;
    color: var(--win-text);
    margin-bottom: 12px;
}

.login-side-card p{
    margin-bottom: 0;
    color: var(--win-muted);
    line-height: 1.85;
}

/* Login form card */
.login-form-card{
    background: #fff;
    border: 1px solid rgba(80,125,114,.12);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 22px 65px rgba(18,35,30,.08);
}

.login-form-top{
    margin-bottom: 26px;
}

.login-form-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(80,125,114,.10);
    color: var(--win-primary);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

.login-form-top h3{
    font-size: 34px;
    line-height: 1.2;
    color: var(--win-text);
    margin-bottom: 10px;
}

.login-form-top p{
    color: var(--win-muted);
    line-height: 1.8;
    margin-bottom: 0;
}

.wintegron-login-form .form-group{
    margin-bottom: 18px;
}

.wintegron-login-form label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--win-muted);
    margin-bottom: 8px;
}

.input-icon-wrap{
    position: relative;
}

.input-icon-wrap > i{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--win-primary);
    font-size: 15px;
}

.input-icon-wrap input{
    width: 100%;
    height: 56px;
    border: 1px solid rgba(80,125,114,.15);
    border-radius: 14px;
    padding: 0 16px 0 46px;
    font-size: 15px;
    color: var(--win-text);
    background: #fff;
    outline: none;
    transition: .2s ease;
}

.input-icon-wrap input:focus{
    border-color: var(--win-primary);
    box-shadow: 0 0 0 4px rgba(80,125,114,.08);
}

.password-wrap input{
    padding-right: 52px;
}

.password-toggle-btn{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--win-muted);
    padding: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.password-toggle-btn:hover{
    color: var(--win-primary);
}

.login-form-row{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.forgot-link{
    font-size: 14px;
    font-weight: 600;
    color: var(--win-primary);
}

.forgot-link:hover{
    color: var(--win-primary-dark);
}

.w-100{
    width: 100%;
}

/* Responsive */
@media (max-width: 1199px){
    .login-info-side h2{
        font-size: 38px;
    }
}

@media (max-width: 991px){
    .login-info-side h2{
        font-size: 32px;
    }

    .login-form-card{
        margin-top: 10px;
    }
}

@media (max-width: 767px){
    .login-info-side h2{
        font-size: 28px;
    }

    .login-form-card{
        padding: 24px 22px;
        border-radius: 22px;
    }

    .login-form-top h3{
        font-size: 28px;
    }

    .login-side-card{
        padding: 24px 22px;
    }

    .login-side-card h4{
        font-size: 24px;
    }

    .login-feature-item{
        padding: 18px;
    }

    .login-feature-item h5{
        font-size: 19px;
    }
}