/*=========================================
        GOOGLE FONTS & RESET
=========================================*/

:root{
    /* ---- brand tokens ---- */
    --maroon-900:#800000;   /* deepest — overlay end / shadows */
    --maroon-700:#800000;   /* core deep maroon — header, primary buttons */
    --maroon-600:#800000;   /* hover state */
    --white:#FFFFFF;
    --coral-tint:#F4E1D8;   /* light coral / off-white — secondary button fills */
    --coral-tint-deep:#E7C4B4; /* coral hover */
    --charcoal:#800000;     /* nav + body text */
    --charcoal-60:#800000;

    --display:'Fraunces', Georgia, serif;
    --body:'Public Sans', Arial, sans-serif;
  }


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

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--body);
    background:var(--white);
    color:var(--charcoal);
    overflow-x:hidden;

}

a{
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}


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

.blog-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,rgba(244,225,216,.55),transparent 45%),
    radial-gradient(circle at bottom right,rgba(231,196,180,.45),transparent 35%),
    var(--white);

}



/*=========================================
        BACKGROUND
=========================================*/

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}


.grid-pattern{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(1,50,32,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(1,50,32,.05) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.35;

}



/*=========================================
            BLOBS
=========================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.45;

}

.blob-1{

    width:420px;

    height:420px;

    background:var(--coral-tint);

    top:-120px;

    left:-100px;

}

.blob-2{

    width:350px;

    height:350px;

    right:-80px;

    top:100px;

    background:var(--maroon-700);
    opacity:.08;

}

.blob-3{

    width:300px;

    height:300px;

     background:var(--coral-tint-deep);

    bottom:-90px;

    left:35%;

}



/*=========================================
        CONTAINER
=========================================*/

.hero-container{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

    position:relative;

    z-index:2;

}



/*=========================================
        CONTENT
=========================================*/

.hero-content{

    max-width:640px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:100px;

    backdrop-filter:blur(12px);

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:28px;


    background:rgba(255,255,255,.85);
    color:var(--maroon-700);
    border:1px solid rgba(128,0,0,.08);
}



/*=========================================
            HEADING
=========================================*/

.hero-content h1{

    font-size:clamp(3rem,6vw,5.3rem);

    line-height:1.05;


    font-weight:600;

    margin-bottom:28px;

    font-family:var(--display);
    color:var(--charcoal);

}

.hero-content h1 span{

    display:block;

    color:var(--maroon-700);

}



/*=========================================
            DESCRIPTION
=========================================*/

.hero-description{

    font-size:1.15rem;

    line-height:1.9;

    color:var(--charcoal-60);

    max-width:620px;

    margin-bottom:42px;

}



/*=========================================
            BUTTONS
=========================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:65px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 34px;

    border-radius:60px;

    font-weight:600;

    transition:.45s;

    background:var(--maroon-700);
    color:var(--white);


}

.btn-primary svg{

    width:18px;

    height:18px;

    stroke:white;

    fill:none;

    stroke-width:2;

}

.btn-primary:hover{

    background:var(--maroon-600);

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}



.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:60px;

    font-weight:600;

    transition:.45s;

    background:var(--coral-tint);
    color:var(--maroon-700);
    border:1px solid rgba(128,0,0,.08);


}

.btn-secondary:hover{

    transform:translateY(-6px);

    border-color:#B8924A;

    color:#B8924A;

    box-shadow:0 15px 30px rgba(0,0,0,.08);

    background:var(--coral-tint-deep);

}



/*=========================================
            STATS
=========================================*/

.hero-stats{

    display:flex;

    gap:26px;

    flex-wrap:wrap;

}

.stat-box{

    min-width:150px;

}

.stat-box h3{

    font-family:'Fraunces',serif;

    font-size:2.2rem;

    color:#123226;

    margin-bottom:8px;

}

.stat-box span{

    color:#6A756E;

    font-size:.95rem;

}

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

.hero-visual{

    position:relative;

    height:700px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*=========================================
        FLOATING CARDS
=========================================*/

.floating-card{

    position:absolute;

    width:340px;

    padding:30px;

    border-radius:28px;

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

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    overflow:hidden;

    border:1px solid rgba(128,0,0,.08);
    box-shadow:
        0 25px 60px rgba(128,0,0,.08);
}

.floating-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--maroon-700),
        var(--coral-tint-deep)
    );

}

.floating-card:hover{

    transform:translateY(-12px) scale(1.02);

    box-shadow:
        0 45px 80px rgba(16,40,30,.16),
        0 20px 35px rgba(16,40,30,.08);

}

.card-one{

    top:10%;

    left:4%;

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

}

.card-two{

    top:42%;

    right:0;

    animation:floatTwo 8s ease-in-out infinite;

}

.card-three{

    bottom:2%;

    left:12%;

    animation:floatThree 9s ease-in-out infinite;

}


/*=========================================
        CARD CONTENT
=========================================*/

.card-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:40px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:18px;

    background:var(--coral-tint);
    color:var(--maroon-700);
}

.floating-card h3{

    font-family:"Fraunces",serif;

    font-size:1.55rem;

    line-height:1.35;

    color:var(--charcoal);

    margin-bottom:16px;

}

.floating-card p{

    color:#617068;

    line-height:1.8;

    margin-bottom:28px;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:1px solid rgba(15,61,46,.08);

    color:#7A857E;

    font-size:.9rem;

}


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

.hero-ring{

    position:absolute;

    width:540px;

    height:540px;

    border-radius:50%;

    border:1px dashed rgba(184,146,74,.25);

    animation:rotateRing 30s linear infinite;

}


/*=========================================
        SCROLL INDICATOR
=========================================*/

.scroll-indicator{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:5;

}

.scroll-indicator span{

    font-size:.8rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#7B837E;

}

.scroll-line{

    width:2px;

    height:70px;

    background:rgba(15,61,46,.15);

    position:relative;

    overflow:hidden;

    border-radius:20px;

}

.scroll-line::after{

    content:"";

    position:absolute;

    width:100%;

    height:22px;

    background:var(--maroon-700);

    animation:scrollMove 2s infinite;

}


/*=========================================
        PLACEHOLDER
=========================================*/

.placeholder{

    padding:120px 0;

    text-align:center;

}

.placeholder-content h2{

    font-family:"Fraunces",serif;

    font-size:3rem;

    margin-bottom:18px;

}

.placeholder-content p{

    color:#6E7872;

    font-size:1.1rem;

}


/*=========================================
        ANIMATIONS
=========================================*/

@keyframes floatOne{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes floatTwo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(22px);

}

}

@keyframes floatThree{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}

@keyframes rotateRing{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes scrollMove{

0%{

top:-25px;

}

100%{

top:100%;

}

}


/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1100px){

.hero-container{

grid-template-columns:1fr;

gap:80px;

padding:120px 0;

}

.hero-content{

max-width:100%;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-visual{

height:650px;

}

.card-one{

left:50%;

transform:translateX(-50%);

}

.card-two{

left:50%;

right:auto;

transform:translateX(-50%);

top:250px;

}

.card-three{

left:50%;

transform:translateX(-50%);

bottom:0;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:3rem;

}

.hero-description{

font-size:1rem;

}

.hero-visual{

height:560px;

}

.floating-card{

width:92%;

padding:24px;

}

.hero-ring{

display:none;

}

.scroll-indicator{

display:none;

}

}

@media(max-width:480px){

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

width:100%;

justify-content:center;

}

.hero-stats{

flex-direction:column;

align-items:center;

gap:24px;

}

}

.floating-card,
.blob,
.hero-content,
.hero-visual {
    will-change: transform;
}

.blog-hero {
    perspective: 1200px;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

/*=========================================
        BLOG INTRO
=========================================*/

.blog-intro{

    padding:140px 0;

    background:#fff;

    position:relative;

    overflow:hidden;

}


/* background decoration */

.blog-intro::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(244,225,216,.45),
    transparent 70%);

    top:-220px;

    right:-180px;

    animation:blobMove 10s ease-in-out infinite alternate;

}


.blog-intro__container{

    width:min(1280px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}


.blog-intro__header{

    max-width:760px;

    margin-bottom:70px;

}


.blog-intro__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    color:var(--maroon-700);

    margin-bottom:20px;

}


.blog-intro__eyebrow::before{

    content:"";

    width:34px;

    height:2px;

    background:var(--maroon-700);

}


.blog-intro h2{

    font-family:var(--display);

    font-size:clamp(2.8rem,5vw,4.5rem);

    line-height:1.1;

    margin-bottom:26px;

    color:var(--charcoal);

}


.blog-intro__text{

    font-size:18px;

    line-height:1.9;

    color:#666;

}



/*============================*/

.blog-feature-grid{

    display:grid;

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

    gap:35px;

}



/*============================*/

.feature-card{

    position:relative;

    padding:45px;

    background:white;

    border-radius:28px;

    border:1px solid rgba(128,0,0,.08);

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

    overflow:hidden;

    transition:.45s;

}


.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(

        var(--maroon-700),

        var(--coral-tint-deep)

    );

}


.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(128,0,0,.12);

}


.feature-number{

    display:inline-flex;

    width:55px;

    height:55px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    background:var(--coral-tint);

    color:var(--maroon-700);

    font-weight:700;

    margin-bottom:30px;

}


.feature-card h3{

    font-family:var(--display);

    font-size:38px;

    margin-bottom:20px;

    color:var(--charcoal);

}


.feature-card p{

    line-height:1.9;

    color:#666;

    margin-bottom:35px;

}


.feature-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--maroon-700);

    font-weight:700;

    transition:.35s;

}


.feature-card:hover .feature-link{

    transform:translateX(10px);

}



/*============================*/

@keyframes blobMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(40px);

}

}



/*============================*/

@media(max-width:900px){

.blog-feature-grid{

grid-template-columns:1fr;

}

.blog-intro{

padding:100px 0;

}

.feature-card{

padding:35px;

}

}

/*==============================*/

.featured-news{

padding:120px 0;

background:#faf8f7;

}

.featured-news__container{

width:min(1200px,92%);

margin:auto;

}

.featured-news__header{

text-align:center;

max-width:760px;

margin:auto auto 70px;

}

.news-card{

background:white;

border-radius:30px;

padding:55px;

box-shadow:0 25px 60px rgba(128,0,0,.08);

border:1px solid rgba(128,0,0,.08);

transition:.45s;

position:relative;

overflow:hidden;

}

.news-card:hover{

transform:translateY(-8px);

box-shadow:0 40px 90px rgba(128,0,0,.14);

}

.news-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--maroon-700),var(--coral-tint));

}

.news-card__top{

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:15px;

margin-bottom:25px;

}

.breaking{

background:#d62828;

color:white;

padding:8px 18px;

border-radius:50px;

font-size:13px;

font-weight:700;

animation:pulse 2s infinite;

}

.category{

background:var(--coral-tint);

padding:8px 18px;

border-radius:50px;

font-weight:600;

}

.news-card h3{

font-family:var(--display);

font-size:42px;

line-height:1.2;

margin:20px 0;

}

.news-meta{

display:flex;

gap:25px;

margin-bottom:30px;

color:#777;

}

.keyword-box{

background:#fff7f4;

padding:25px;

border-radius:18px;

margin-bottom:35px;

border-left:5px solid var(--maroon-700);

}

.news-content p{

line-height:2;

color:#555;

margin-bottom:20px;

}

.impact-box{

background:#fafafa;

padding:35px;

border-radius:20px;

margin:45px 0;

}

.impact-box h4{

margin-bottom:20px;

font-family:var(--display);

font-size:30px;

}

.impact-box ul{

padding-left:22px;

}

.impact-box li{

margin-bottom:15px;

line-height:1.8;

}

.highlight{

padding:28px;

background:linear-gradient(135deg,#fff,#fdf3ef);

border-left:6px solid var(--maroon-700);

border-radius:20px;

font-size:18px;

line-height:1.9;

margin-bottom:40px;

}

.news-footer{

margin-bottom:40px;

}

.disclaimer{

padding:25px;

background:#fff9f5;

border-top:1px solid rgba(0,0,0,.08);

font-size:14px;

line-height:1.8;

color:#666;

}

@keyframes pulse{

0%{transform:scale(1);}

50%{transform:scale(1.08);}

100%{transform:scale(1);}

}

@media(max-width:768px){

.news-card{

padding:30px;

}

.news-card h3{

font-size:30px;

}

.news-card__top{

flex-direction:column;

}

.news-meta{

flex-direction:column;

gap:10px;

}

}

.impact-box li{

    opacity:0;

    transform:translateX(-20px);

    animation:slideIn .6s forwards;

}

.impact-box li:nth-child(1){

    animation-delay:.2s;

}

.impact-box li:nth-child(2){

    animation-delay:.4s;

}

.impact-box li:nth-child(3){

    animation-delay:.6s;

}

.news-card.is-visible .impact-box li{

    animation-play-state:running;

}

@keyframes slideIn{

    from{

        opacity:0;

        transform:translateX(-20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*======================================
            BLOG SECTION
======================================*/

.blog-section{

    padding:120px 8%;

    background:#fff;

}

.blog-container{

    max-width:1200px;

    margin:auto;

}

.blog-header{

    text-align:center;

    margin-bottom:70px;

}

.blog-header .section-tag{

    display:inline-block;

    padding:10px 22px;

    background:var(--coral-tint);

    color:var(--maroon-700);

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    border-radius:999px;

    margin-bottom:18px;

}

.blog-header h2{

    font-family:var(--display);

    font-size:3rem;

    color:var(--maroon-700);

    margin-bottom:20px;

}

.blog-header p{

    max-width:760px;

    margin:auto;

    color:#666;

    line-height:1.8;

}


/*======================================
        BLOG USES NEWS CARD DESIGN
======================================*/

.blog-section .news-card{

    margin-top:0;

}


/*======================================
        BLOG SUBHEADINGS
======================================*/

.blog-section .news-content h4{

    font-family:var(--display);

    color:var(--maroon-700);

    font-size:1.55rem;

    margin:45px 0 18px;

}


/*======================================
        BLOG LISTS
======================================*/

.blog-section .news-content ul{

    padding-left:22px;

    margin:25px 0 35px;

}

.blog-section .news-content li{

    margin-bottom:14px;

    line-height:1.9;

}


/*======================================
        BLOG HIGHLIGHT BOX
======================================*/

.blog-section .highlight{

    background:linear-gradient(
        135deg,
        #fff,
        var(--coral-tint)
    );

}


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

@media(max-width:768px){

    .blog-section{

        padding:80px 6%;

    }

    .blog-header h2{

        font-size:2.2rem;

    }

}

/* =========================================================
   FOOTER TRUST / REGULATORY SECTION
   ========================================================= */

.footer-trust {
    margin-top: 55px;
    padding-top: 45px;
    border-top: 1px solid rgba(255,255,255,.08);
}


/* HEADING */

.footer-trust__heading {
    text-align: center;
    margin-bottom: 30px;
}

.footer-trust__eyebrow {
    display: block;
    margin-bottom: 10px;

    color: #d8b07a;
    font-family: "Public Sans", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;
}

.footer-trust__heading h3 {
    margin: 0;

    color: #fff;

    font-family: "Fraunces", serif;
    font-size: 27px;
    font-weight: 500;
}

.footer-trust__heading h3 em {
    color: #f4e1d8;
}


/* CARDS */

.footer-trust__cards {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    max-width: 1050px;
    margin: 0 auto;
}


.footer-trust__card {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}


.footer-trust__card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(216,176,122,.35);

    background:
        rgba(255,255,255,.065);
}


/* ICON */

.footer-trust__icon {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    background:
        rgba(216,176,122,.10);

    border:
        1px solid rgba(216,176,122,.18);

    color: #d8b07a;

    font-size: 14px;
}


/* CONTENT */

.footer-trust__content {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.footer-trust__label {
    color:
        rgba(255,255,255,.38);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .13em;
}


.footer-trust__content strong {
    color: #fff;

    font-size: 12px;
    font-weight: 600;
}


.footer-trust__content p {
    margin: 2px 0 0;

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

    font-size: 9px;
    line-height: 1.5;
}


.footer-trust__content b {
    color: #d8b07a;

    font-size: 10px;
    font-weight: 600;
}


/* LEGAL INFORMATION */

.footer-trust__legal {
    display: grid;

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

    gap: 20px;

    margin-top: 25px;
    padding: 25px 0;

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

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


.footer-trust__legal-item {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.footer-trust__legal-item > i {
    margin-top: 2px;

    color: #d8b07a;

    font-size: 12px;
}


.footer-trust__legal-item div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.footer-trust__legal-item span {
    color:
        rgba(255,255,255,.65);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .12em;
}


.footer-trust__legal-item p {
    margin: 0;

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

    font-size: 9px;
    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 800px) {

    .footer-trust__cards {
        grid-template-columns: 1fr;
    }

    .footer-trust__legal {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}


@media (max-width: 600px) {

    .footer-trust {
        margin-top: 40px;
        padding-top: 35px;
    }

    .footer-trust__heading h3 {
        font-size: 23px;
    }

    .footer-trust__card {
        padding: 18px;
    }

    .footer-trust__legal {
        padding: 20px 0;
    }

}