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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.6;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

.container{

    width:min(90%,1280px);

    margin:auto;

}

section{

    padding:100px 0;

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

header.scrolled{

    padding:0;

    box-shadow:0 10px 40px rgba(0,0,0,.06);

}

header{

    position:sticky;
    top:0;
    z-index:1000;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(229,231,235,.7);

}

nav{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:1.6rem;

    font-weight:800;

    color:var(--primary);

}

.logo span{

    color:var(--secondary);

}

.nav-links{

    display:flex;

    gap:40px;

    list-style:none;

}

.nav-links a{

    color:var(--text);

    font-weight:500;

    transition:.25s;

}

.nav-links a:hover{

    color:var(--secondary);

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    border-radius:12px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 12px 25px rgba(37,99,235,.18);

}

.btn-primary:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 20px 45px rgba(37,99,235,.35);

}

.btn-primary:active{

    transform:scale(.97);

}

.btn-primary:hover{

    background:var(--secondary);

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

#hero{

background:

linear-gradient(
135deg,
#F8FAFC,
#FFFFFF,
#F3F8FF,
#FFFFFF);

background-size:300% 300%;

animation:gradientMove 12s ease infinite;

}

.hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    min-height:85vh;

}

.hero-badge{

    display:inline-block;

    background:#EAF2FF;

    color:var(--secondary);

    padding:10px 18px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:30px;

}

.hero h1{

    font-size:4.3rem;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-2px;

    color:var(--primary);

    margin-bottom:30px;

}

.hero p{

    font-size:1.2rem;

    color:var(--gray);

    max-width:600px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-secondary{

    padding:14px 28px;

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

    border-radius:10px;

    font-weight:600;

}
.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.dashboard-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:

    0 40px 80px rgba(15,23,42,.08),

    0 15px 35px rgba(15,23,42,.05);

    transition:.4s;

}

.dashboard-card:hover{

    transform:translateY(-10px);

}

.chart-placeholder{

    height:240px;

    border-radius:18px;

    background:#F8FBFF;

    padding:20px;

    overflow:hidden;

}
.chart{

    width:100%;

    height:100%;

}

.chart-line{

    fill:none;

    stroke:url(#lineGradient);

    stroke-width:6;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:700;

    stroke-dashoffset:700;

    animation:drawLine 2s ease forwards;

}

.chart circle{

    fill:#2563EB;

    opacity:0;

    animation:fadePoints .4s ease forwards;

}

.chart circle:nth-child(3){animation-delay:.6s;}
.chart circle:nth-child(4){animation-delay:1s;}
.chart circle:nth-child(5){animation-delay:1.4s;}
.chart circle:nth-child(6){animation-delay:1.8s;}

.kpis{

    display:flex;

    justify-content:space-between;

}

.kpis{

    display:grid;

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

    gap:20px;

    margin-top:10px;

}

.kpi{

    padding:14px;

    border-radius:12px;

    background:#F8FAFC;

    transition:.3s;

}

.kpi:hover{

    transform:translateY(-4px);

    background:#EEF5FF;

}

.kpi span{

    display:block;

    font-size:.85rem;

    color:var(--gray);

    margin-bottom:8px;

}

.kpi strong{

    font-size:1.4rem;

    color:var(--primary);

}
/*==========================
FLOATING ELEMENTS
==========================*/

.floating-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

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

}

.circle1{

    width:180px;

    height:180px;

    background:rgba(37,99,235,.12);

    top:-40px;

    right:-50px;

}

.circle2{

    width:90px;

    height:90px;

    background:rgba(245,158,11,.18);

    bottom:50px;

    left:-40px;

    animation-delay:2s;

}

.circle3{

    width:50px;

    height:50px;

    background:rgba(11,31,58,.08);

    top:180px;

    right:80px;

    animation-delay:4s;

}
.cash-flow{

    color:#16A34A !important;

    animation:pulse 2s infinite;

}
/*==========================
TRUST SECTION
==========================*/

#trust{

    background:white;

    padding:90px 0;

}

.trust-grid{

    display:grid;

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

    gap:30px;

}

.trust-card{

    background:white;

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

    border-radius:22px;

    padding:35px;

    transition:.35s;

    cursor:pointer;

    position:relative;

    overflow:hidden;
    animation:fadeUp .8s ease;

}

.trust-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(90deg,var(--secondary),var(--accent));

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.trust-card:hover::before{

    transform:scaleX(1);

}

.trust-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.trust-number{

    display:block;

    font-size:3rem;

    font-weight:800;

    color:var(--secondary);

    margin-bottom:20px;

}

.trust-card h3{

    font-size:1.3rem;

    color:var(--primary);

    margin-bottom:15px;

}

.trust-card p{

    color:var(--gray);

    line-height:1.7;

}
/*==========================
SECTION HEADING
==========================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-heading span{

    color:var(--secondary);

    font-weight:700;

    letter-spacing:2px;

    font-size:.9rem;

}

.section-heading h2{

    font-size:3rem;

    color:var(--primary);

    margin:20px 0;

}

.section-heading p{

    color:var(--gray);

    line-height:1.8;

}
/*==========================
SERVICES
==========================*/

#services{

    background:var(--light);

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:white;

    border-radius:24px;

    padding:40px;

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

    transition:.35s;

    position:relative;

    overflow:hidden;

    cursor:pointer;

}
.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(37,99,235,.12),
    transparent 60%);

    opacity:0;

    transition:.4s;

}

.service-card:hover::before{

    opacity:1;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.service-icon{

width:72px;

height:72px;

display:flex;

justify-content:center;

align-items:center;

background:#EEF5FF;

border-radius:18px;

margin-bottom:30px;

transition:.35s;

}

.service-icon img{

width:34px;

height:34px;

transition:.35s;

}

.service-card:hover .service-icon{

transform:rotate(-8deg);

background:#2563EB;

}

.service-card:hover .service-icon img{

filter:

brightness(0)

invert(1);

}

.service-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.service-card p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:25px;

}

.service-card a{

    color:var(--secondary);

    font-weight:600;

}
/*==========================
PROCESS
==========================*/

#process{

    background:white;

}

.process-grid{

    display:grid;

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

    gap:30px;

}

.process-card::after{

    content:"";

    position:absolute;

    top:70px;

    right:-30px;

    width:30px;

    height:2px;

    background:var(--border);

}

.process-card:last-child::after{

    display:none;

}

.process-card{

    position:relative;

    background:white;

    border-radius:24px;

    padding:40px;

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

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.step-number{

    width:70px;

    height:70px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:1.2rem;

    margin-bottom:25px;

    transition:.35s;
}

.process-card:hover .step-number{

    transform:rotate(10deg) scale(1.08);

}

.process-card h3{

    margin-bottom:15px;

    color:var(--primary);

}

.process-card p{

    color:var(--gray);

    line-height:1.8;

}
/*==========================
LIVE DASHBOARD
==========================*/

#live-dashboard{

    background:#F8FAFC;

}

.dashboard-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#EAF2FF;

    color:var(--secondary);

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.dashboard-left h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:25px;

}

.dashboard-left p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:40px;

}

.dashboard-tabs{

    display:flex;

    gap:15px;

}

.tab{

    border:none;

    padding:14px 24px;

    border-radius:10px;

    cursor:pointer;

    background:white;

    transition:.3s;

    font-weight:600;

}

.tab.active{

    background:var(--primary);

    color:white;

}

.dashboard-ui{

    background:white;

    border-radius:24px;

    padding:30px;

    box-shadow:0 25px 70px rgba(15,23,42,.08);

}

.mini-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:25px;

    font-weight:600;

}

#dashboardChart{

    width:100%;

    height:280px;

}

#graphPath{

    fill:none;

    stroke:url(#dashboardGradient);

    stroke-width:6;

    stroke-linecap:round;

}
/*==========================
SCROLL REVEAL
==========================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}
.service-card,
.process-card,
.trust-card{

    position:relative;

    overflow:hidden;

}

.service-card::after,
.process-card::after,
.trust-card::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:radial-gradient(circle,
    rgba(37,99,235,.15),
    transparent 70%);

    pointer-events:none;

    left:var(--x);

    top:var(--y);

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

    opacity:0;

    transition:opacity .3s;

}

.service-card:hover::after,
.process-card:hover::after,
.trust-card:hover::after{

    opacity:1;

}

/*======================================
            INDUSTRIES
======================================*/

#industries{

    padding:120px 0;

    background:#F8FAFC;

}

#industries .section-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:#E8F0FF;

    color:#2563EB;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;

}

#industries h2{

    font-size:3rem;

    line-height:1.15;

    max-width:700px;

    margin-bottom:24px;

    color:#0F172A;

}

#industries .section-description{

    max-width:720px;

    font-size:1.1rem;

    line-height:1.8;

    color:#64748B;

    margin-bottom:40px;

}

.industries-grid{

    display:grid;

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

    gap:30px;

}

.industry-card{

    background:white;

    border-radius:24px;

    padding:40px;

    box-shadow:0 15px 40px rgba(15,23,42,.06);

    transition:.35s;

    border:1px solid rgba(37,99,235,.06);

}

.industry-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(15,23,42,.10);

    border-color:#2563EB;

}

.industry-card h3{

    font-size:1.45rem;

    margin-bottom:18px;

    color:#0F172A;

}

.industry-card p{

    color:#64748B;

    line-height:1.8;

}

/* ==========================
   TESTIMONIALS
========================== */

#testimonials{

    padding:140px 0;

    background:white;

}

.testimonials-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.testimonial-card{

    background:white;

    padding:40px;

    border-radius:28px;

    box-shadow:0 18px 45px rgba(15,23,42,.08);

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

}

.stars{

    font-size:24px;

    color:#FFD54A;

    margin-bottom:25px;

}

.testimonial-text{

    line-height:1.8;

    color:#5A6475;

    margin-bottom:35px;

}

.testimonial-author{

    display:flex;

    align-items:center;

    gap:18px;

}

.author-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#60A5FA);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.testimonial-author span{

    display:block;

    color:#7A8699;

    margin-top:4px;

}

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

#faq{

    padding:140px 0;

    background:#F8FAFC;

}

.faq-wrapper{

    margin-top:70px;

    max-width:900px;

}

.faq-item{

    background:white;

    border-radius:20px;

    margin-bottom:20px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(15,23,42,.06);

}

.faq-question{

    width:100%;

    border:none;

    background:none;

    padding:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

}

.faq-answer{

    display:none;

    padding:0 30px 30px;

    line-height:1.8;

    color:#5A6475;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-icon{

    font-size:28px;

    color:#2563EB;

}

/* ==========================
   FINAL CTA
========================== */

#final-cta{

    padding:140px 0;

    background:white;

}

.cta-box{

    background:linear-gradient(135deg,#0F172A,#2563EB);

    color:white;

    text-align:center;

    padding:90px;

    border-radius:40px;

}

.cta-box h2{

    font-size:54px;

    margin-bottom:25px;

}

.cta-box p{

    max-width:700px;

    margin:0 auto 45px;

    font-size:20px;

    line-height:1.8;

    opacity:.9;

}

.cta-box .btn-primary{

    background:white;

    color:#0F172A;

}

.cta-box .btn-primary:hover{

    background:#F3F8FF;

}

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

#footer{

    background:#0F172A;

    color:white;

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:60px;

}

.footer-brand p{

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

    line-height:1.8;

    margin-top:20px;

    max-width:320px;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links h4{

    margin-bottom:22px;

    font-size:20px;

}

.footer-links a{

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

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:white;

    transform:translateX(5px);

}

.footer-bottom{

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

    margin-top:70px;

    padding-top:25px;

    text-align:center;

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

    font-size:15px;

}

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

.process {

    padding: 120px 0;
    background: #ffffff;

}

.process-grid {

    margin-top: 70px;

    display: grid;

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

    gap: 30px;

}

.process-card {

    background: #f8fbff;

    border: 1px solid #e5edf8;

    border-radius: 20px;

    padding: 40px 30px;

    transition: .35s ease;

}

.process-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(25,55,109,.10);

}

.process-number {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: linear-gradient(135deg,#1d4ed8,#2563eb);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 25px;

}

.process-card h3 {

    margin-bottom: 15px;

    color: #13294b;

}

.process-card p {

    color: #5f6f86;

    line-height: 1.8;

}

/* ==========================
WHY US
========================== */

.why-us{

    padding:120px 0;

    background:white;

}

.why-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.why-card{

    display:flex;

    gap:25px;

    background:#f8fbff;

    border:1px solid #e6eef8;

    border-radius:20px;

    padding:35px;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(20,40,90,.08);

}

.why-icon{

    min-width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:white;

    font-size:26px;

    font-weight:700;

}

.why-card h3{

    margin-bottom:12px;

    color:#13294b;

}

.why-card p{

    color:#61718b;

    line-height:1.8;

}

/* ==========================
FINAL CTA
========================== */

.services-cta{

    padding:120px 0;

    background:#f7faff;

}

.cta-box{

    background:linear-gradient(135deg,#13294b,#2563eb);

    color:white;

    text-align:center;

    border-radius:30px;

    padding:90px 70px;

}

.cta-box h2{

    color:white;

    font-size:52px;

    margin:25px 0;

    line-height:1.2;

}

.cta-box p{

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

    font-size:20px;

    max-width:760px;

    margin:auto auto 45px;

    line-height:1.8;

}

.cta-box .btn-primary{

    background:white;

    color:#1d4ed8;

}

.cta-box .btn-primary:hover{

    transform:translateY(-4px);

}

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

.faq{

    padding:120px 0;

    background:white;

}

.faq-item{

    border:1px solid #e7edf7;

    border-radius:16px;

    margin-top:20px;

    overflow:hidden;

}

.faq-question{

    width:100%;

    background:white;

    border:none;

    cursor:pointer;

    padding:28px 35px;

    font-size:20px;

    font-weight:600;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

}

.faq-question span{

    font-size:28px;

    color:#2563eb;

}

.faq-answer{

    display:none;

    padding:0 35px 30px;

}

.faq-answer p{

    color:#64748b;

    line-height:1.8;

}

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

.about-hero {

    padding: 130px 0 120px;

    background: #f7faff;

    text-align: center;

}

.about-hero .container {

    max-width: 950px;

}

.about-hero h1 {

    margin: 25px auto;

    font-size: 58px;

    line-height: 1.15;

    color: #13294b;

}

.about-hero p {

    max-width: 760px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.8;

    color: #61718b;

}

/* ==========================
OUR PHILOSOPHY
========================== */

.about-philosophy {

    padding: 120px 0;

    background: #ffffff;

}

.philosophy-grid {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 100px;

    align-items: start;

}

.philosophy-heading h2 {

    margin-top: 25px;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.philosophy-content p {

    margin-bottom: 25px;

    font-size: 19px;

    line-height: 1.9;

    color: #61718b;

}

.philosophy-content p:last-child {

    margin-bottom: 0;

}

/* ==========================
HOW WE WORK
========================== */

.about-process {

    padding: 120px 0;

    background: #f7faff;

}

.about-process-heading {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}

.about-process-heading h2 {

    margin: 25px 0;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.about-process-heading p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

}

.about-process-grid {

    margin-top: 70px;

    display: grid;

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

    gap: 25px;

}

.about-process-card {

    padding: 35px 30px;

    background: #ffffff;

    border: 1px solid #e5edf8;

    border-radius: 20px;

    transition: .35s ease;

}

.about-process-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(20,40,90,.08);

}

.about-process-card .process-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: linear-gradient(135deg,#2563eb,#1d4ed8);

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

}

.about-process-card h3 {

    margin-bottom: 15px;

    color: #13294b;

}

.about-process-card p {

    color: #61718b;

    line-height: 1.8;

}

/* ==========================
   OUR VALUES
========================== */

.about-values {

    padding: 120px 0;

    background: #ffffff;

}

.about-values-heading {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}

.about-values-heading h2 {

    margin: 25px 0;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.about-values-heading p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

}

.about-values-grid {

    margin-top: 70px;

    display: grid;

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

    gap: 30px;

}

.about-value-card {

    padding: 40px;

    background: #f8fbff;

    border: 1px solid #e5edf8;

    border-radius: 24px;

    transition: .35s ease;

}

.about-value-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(20,40,90,.08);

    border-color: #c9dcfa;

}

.about-value-card h3 {

    margin-bottom: 15px;

    font-size: 24px;

    color: #13294b;

}

.about-value-card p {

    color: #61718b;

    line-height: 1.8;

}

@media (max-width: 768px) {

    .about-values-heading h2 {

        font-size: 36px;

    }

    .about-values-grid {

        grid-template-columns: 1fr;

    }

}

/* ==========================
   ABOUT CTA
========================== */

.about-cta {

    padding: 120px 0;

    background: #f7faff;

}

.about-cta .cta-box {

    background: linear-gradient(
        135deg,
        #13294b,
        #2563eb
    );

    color: white;

    text-align: center;

    padding: 90px 70px;

    border-radius: 32px;

}

.about-cta .section-tag {

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

    color: white;

}

.about-cta .cta-box h2 {

    color: white;

    font-size: 48px;

    line-height: 1.2;

    max-width: 800px;

    margin: 25px auto;

}

.about-cta .cta-box p {

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

    max-width: 700px;

    margin: 0 auto 40px;

    font-size: 19px;

    line-height: 1.8;

}

.about-cta .btn-primary {

    background: white;

    color: #1d4ed8;

}

.about-cta .btn-primary:hover {

    transform: translateY(-4px);

}

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

.insights-hero {

    padding: 130px 0 120px;

    background: #f7faff;

    text-align: center;

}

.insights-hero .container {

    max-width: 950px;

}

.insights-hero h1 {

    margin: 25px auto;

    font-size: 58px;

    line-height: 1.15;

    color: #13294b;

}

.insights-hero p {

    max-width: 760px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.8;

    color: #61718b;

}

/* ==========================
   FEATURED INSIGHT
========================== */

.featured-insight {

    padding: 120px 0;

    background: #ffffff;

}

.featured-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

.featured-content h2 {

    margin: 25px 0;

    font-size: 46px;

    line-height: 1.2;

    color: #13294b;

}

.featured-content p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

    max-width: 620px;

}

.featured-meta {

    display: flex;

    gap: 12px;

    margin: 25px 0 35px;

    color: #64748b;

    font-size: 15px;

    font-weight: 600;

}

.featured-visual {

    min-height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.insight-chart {

    width: 100%;

    max-width: 520px;

    padding: 35px;

    border-radius: 28px;

    background: #f7faff;

    border: 1px solid #e3ebf7;

    box-shadow: 0 25px 60px rgba(20,40,90,.08);

}

.chart-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 50px;

    color: #13294b;

    font-weight: 700;

}

.chart-status {

    padding: 7px 12px;

    border-radius: 20px;

    background: #e8f0ff;

    color: #2563eb;

    font-size: 12px;

}

.chart-bars {

    height: 230px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;

}

.chart-bars div {

    flex: 1;

    min-height: 30px;

    border-radius: 8px 8px 3px 3px;

    background: linear-gradient(
        to top,
        #1d4ed8,
        #60a5fa
    );

}

/* ==========================
   LATEST INSIGHTS
========================== */

.latest-insights {

    padding: 120px 0;

    background: #f7faff;

}

.latest-heading {

    max-width: 760px;

    margin-bottom: 65px;

}

.latest-heading h2 {

    margin: 25px 0;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.latest-heading p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

}

.insights-grid {

    display: grid;

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

    gap: 30px;

}

.insight-card {

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4ebf5;

    border-radius: 22px;

    transition: .35s ease;

}

.insight-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(20,40,90,.08);

}

.insight-card-top {

    min-height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(
        135deg,
        #13294b,
        #2563eb
    );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.insight-card-content {

    padding: 35px;

}

.insight-date {

    color: #2563eb;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

}

.insight-card h3 {

    margin: 15px 0;

    font-size: 24px;

    line-height: 1.35;

    color: #13294b;

}

.insight-card p {

    margin-bottom: 25px;

    color: #61718b;

    line-height: 1.8;

}

.insight-card a {

    color: #2563eb;

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;

}

.insight-card a:hover {

    padding-left: 5px;

}

/* ==========================
   INSIGHT TOPICS
========================== */

.insight-topics {

    padding: 120px 0;

    background: #ffffff;

}

.topics-heading {

    max-width: 760px;

    margin-bottom: 60px;

}

.topics-heading h2 {

    margin: 25px 0;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.topics-heading p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

}

.topics-grid {

    display: grid;

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

    gap: 20px;

}

.topic-card {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 160px;

    padding: 30px;

    border: 1px solid #e4ebf5;

    border-radius: 20px;

    background: #f8fbff;

    text-decoration: none;

    transition: .35s ease;

}

.topic-card:hover {

    transform: translateY(-7px);

    background: #ffffff;

    border-color: #c9dcfa;

    box-shadow: 0 18px 40px rgba(20,40,90,.08);

}

.topic-card span {

    margin-bottom: 12px;

    color: #2563eb;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}

.topic-card strong {

    color: #13294b;

    font-size: 20px;

}

/* ==========================
   INSIGHTS CTA
========================== */

.insights-cta {

    padding: 120px 0;

    background: #f7faff;

}

.insights-cta .cta-box {

    background: linear-gradient(
        135deg,
        #13294b,
        #2563eb
    );

    color: white;

    text-align: center;

    padding: 90px 70px;

    border-radius: 32px;

}

.insights-cta .section-tag {

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

    color: white;

}

.insights-cta .cta-box h2 {

    color: white;

    font-size: 48px;

    line-height: 1.2;

    max-width: 800px;

    margin: 25px auto;

}

.insights-cta .cta-box p {

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

    max-width: 700px;

    margin: 0 auto 40px;

    font-size: 19px;

    line-height: 1.8;

}

.insights-cta .btn-primary {

    background: white;

    color: #1d4ed8;

}

.insights-cta .btn-primary:hover {

    transform: translateY(-4px);

}

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

.contact-hero {

    padding: 130px 0 110px;

    background: #f7faff;

    text-align: center;

}

.contact-hero .container {

    max-width: 950px;

}

.contact-hero h1 {

    margin: 25px auto;

    font-size: 58px;

    line-height: 1.15;

    color: #13294b;

}

.contact-hero p {

    max-width: 760px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.8;

    color: #61718b;

}

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

.contact-section {

    padding: 120px 0;

    background: #ffffff;

}

.contact-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 90px;

    align-items: start;

}

.contact-info h2 {

    margin: 25px 0;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.contact-info > p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

    max-width: 520px;

}

.contact-details {

    margin-top: 50px;

}

.contact-detail {

    margin-bottom: 30px;

}

.contact-detail-label {

    display: block;

    margin-bottom: 8px;

    color: #2563eb;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}

.contact-detail a {

    color: #13294b;

    text-decoration: none;

    font-weight: 600;

}

.contact-detail p {

    margin: 0;

    color: #61718b;

    line-height: 1.7;

}


/* FORM */

.contact-form-wrapper {

    padding: 45px;

    background: #f8fbff;

    border: 1px solid #e3ebf7;

    border-radius: 28px;

    box-shadow: 0 20px 50px rgba(20,40,90,.06);

}

.form-group {

    margin-bottom: 25px;

}

.form-group label {

    display: block;

    margin-bottom: 9px;

    color: #13294b;

    font-size: 14px;

    font-weight: 600;

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 16px 18px;

    border: 1px solid #dbe5f1;

    border-radius: 12px;

    background: #ffffff;

    color: #13294b;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition: .25s ease;

    box-sizing: border-box;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37,99,235,.10);

}

.form-group textarea {

    resize: vertical;

    min-height: 150px;

}

.contact-form-wrapper .btn-primary {

    width: 100%;

    border: none;

    cursor: pointer;

}

/* ==========================
   CONTACT PROCESS
========================== */

.contact-process {

    padding: 120px 0;

    background: #f7faff;

}

.contact-process-heading {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}

.contact-process-heading h2 {

    margin: 25px 0;

    font-size: 48px;

    line-height: 1.2;

    color: #13294b;

}

.contact-process-heading p {

    font-size: 19px;

    line-height: 1.8;

    color: #61718b;

}

.contact-process-grid {

    margin-top: 65px;

    display: grid;

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

    gap: 30px;

}

.contact-process-card {

    padding: 40px 30px;

    background: #ffffff;

    border: 1px solid #e5edf8;

    border-radius: 22px;

    transition: .35s ease;

}

.contact-process-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(20,40,90,.08);

}

.contact-process-card .process-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: linear-gradient(135deg,#2563eb,#1d4ed8);

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

}

.contact-process-card h3 {

    margin-bottom: 15px;

    color: #13294b;

}

.contact-process-card p {

    color: #61718b;

    line-height: 1.8;

}

/* ==========================
   CONTACT CTA
========================== */

.contact-cta {

    padding: 120px 0;

    background: #ffffff;

}

.contact-cta .cta-box {

    background: linear-gradient(
        135deg,
        #13294b,
        #2563eb
    );

    color: white;

    text-align: center;

    padding: 90px 70px;

    border-radius: 32px;

}

.contact-cta .section-tag {

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

    color: white;

}

.contact-cta .cta-box h2 {

    color: white;

    font-size: 48px;

    line-height: 1.2;

    max-width: 800px;

    margin: 25px auto;

}

.contact-cta .cta-box p {

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

    max-width: 700px;

    margin: 0 auto 40px;

    font-size: 19px;

    line-height: 1.8;

}

.contact-cta .btn-primary {

    background: white;

    color: #1d4ed8;

}

.contact-cta .btn-primary:hover {

    transform: translateY(-4px);

}

/* ==========================
   ARTICLE PAGE
========================== */

.article-page {
    padding: 100px 0 120px;
    background: #f8fafc;
}

.article-header {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 70px;
}

.article-header .section-tag {
    display: inline-block;
    margin-bottom: 25px;
}

.article-header h1 {
    font-size: 56px;
    line-height: 1.15;
    max-width: 900px;
    margin: 0 auto 30px;
}

.article-intro {
    max-width: 750px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 1.7;
    color: #64748b;
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 70px 80px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
}

.article-content p {
    font-size: 18px;
    line-height: 1.9;
    color: #526783;
    margin-bottom: 28px;
}

.article-content h2 {
    font-size: 30px;
    line-height: 1.3;
    color: #0f2747;
    margin: 55px 0 20px;
}

.article-content strong {
    color: #0f2747;
}

.article-back {
    display: inline-block;
    margin-top: 35px;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.article-back:hover {
    text-decoration: underline;
}


/* ==========================
   ARTICLE MOBILE
========================== */

@media (max-width: 768px) {

    .article-page {
        padding: 70px 0 80px;
    }

    .article-header {
        padding-bottom: 45px;
    }

    .article-header h1 {
        font-size: 38px;
    }

    .article-intro {
        font-size: 18px;
    }

    .article-content {
        padding: 40px 25px;
        border-radius: 20px;
    }

    .article-content p {
        font-size: 17px;
        line-height: 1.8;
    }

    .article-content h2 {
        font-size: 26px;
        margin-top: 45px;
    }

}