/*==================================================
RICL Design System
Version : 1.0
==================================================*/


/*==================================================
SECTION HEADINGS
==================================================*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:999px;

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

    border:1px solid rgba(255,122,0,.20);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.section-title{

    font-size:48px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:20px;

    color:#fff;

}

.section-description{

    font-size:18px;

    color:var(--muted);

    line-height:1.8;

}


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

.card{

    position:relative;

    padding:40px;

    border-radius:28px;

    background:

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

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

    backdrop-filter:blur(24px);

    transition:.35s ease;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,122,0,.30);

    box-shadow:

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

        0 0 30px rgba(255,122,0,.12);

}


.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-light)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.card:hover::before{

    transform:scaleX(1);

}


/*==================================================
ICON BOX
==================================================*/

.icon-box{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(
            180deg,
            rgba(255,122,0,.18),
            rgba(255,122,0,.08)
        );

    border:1px solid rgba(255,122,0,.20);

    color:var(--primary);

    font-size:28px;

    margin-bottom:24px;

}


/*==================================================
CARD TYPOGRAPHY
==================================================*/

.card-title{

    font-size:28px;

    font-weight:700;

    margin-bottom:18px;

    color:#fff;

}

.card-text{

    color:var(--muted);

    line-height:1.8;

    font-size:16px;

}


/*==================================================
STAT CARD
==================================================*/

.stat{

    text-align:center;

}

.stat-number{

    font-size:54px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;

}

.stat-label{

    color:var(--muted);

    font-size:16px;

}


/*==================================================
COMMON GRID
==================================================*/

.grid-2{

    display:grid;

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

    gap:30px;

}

.grid-3{

    display:grid;

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

    gap:30px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}

/*========================================
 WHY RICL
========================================*/

.why-ricl{

    padding:120px 0;

}

.why-header{

    text-align:center;

    max-width:820px;

    margin:0 auto 70px;

}

.section-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:999px;

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

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:22px;

}

.why-header h2{

    font-size:3rem;

    margin-bottom:24px;

}

.why-header span{

    color:var(--primary);

}

.why-header p{

    color:#bfbfbf;

    line-height:1.9;

    font-size:1.1rem;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    padding:36px;

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

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

    border-radius:24px;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,140,0,.30);

}

.why-icon{

    font-size:2rem;

    margin-bottom:18px;

}

.why-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

}

.why-card p{

    color:#bdbdbd;

    line-height:1.8;

}



/* ==========================================
   RICL ECOSYSTEM - LAYOUT
========================================== */

.ecosystem-section{

    padding:120px 0 180px;

    min-height:900px;

}

.ecosystem-header{

    width:100%;

    max-width:900px;

    margin:0 auto 80px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.ecosystem-grid{

    display:grid;

    grid-template-columns:1fr 340px 1fr;

    gap:60px;

    align-items:center;

    max-width:1200px;

    margin:80px auto 60px;

}

.ecosystem-card{

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

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

    border-radius:28px;

    padding:40px;

    min-height:420px;

    backdrop-filter:blur(18px);
    
    transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

}

.ecosystem-card:hover{

    transform:translateY(-8px);

    border-color:#ff9800;

    box-shadow:
    0 20px 50px rgba(255,140,0,.18);

}


.ecosystem-header h2{

    font-size:4rem;

    line-height:1.12;

    font-weight:800;

    color:#fff;

    margin-bottom:28px;

}

.ecosystem-header h2 span{

    color:var(--primary);

}

.ecosystem-card h3{

    font-size:2rem;

    margin-bottom:35px;

}

.ecosystem-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.ecosystem-card li{

    padding:18px 0;

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

    font-size:1.15rem;

}

.ecosystem-hub{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hub-box{

    width:320px;

    height:320px;

    border-radius:34px;
    
     position:relative;

    z-index:10;

    background:linear-gradient(
        135deg,
        rgba(255,145,0,.16),
        rgba(255,255,255,.05)
    );

    border:1px solid rgba(255,145,0,.25);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hub-box h3{

    font-size:4rem;

    margin:0;

}

.hub-box p{

    font-size:1.5rem;

    color:var(--accent);

    margin-top:18px;

}

.ecosystem-modules{

    display:grid;

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

    gap:24px;

    max-width:1100px;

    margin:60px auto 0;

}

.module{

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

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

    border-radius:18px;

    padding:24px;

    text-align:center;

    font-weight:600;

}



.ecosystem-header p{

    max-width:720px;

    margin:0 auto;

    text-align:center;

    line-height:1.9;

}


.ecosystem-column{

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

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

    border-radius:24px;

    padding:40px;
    
    min-height:420px;

}


.ecosystem-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.ecosystem-column li{

    padding:18px 0;

    font-size:1.08rem;

    color:#d7d7d7;

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

}

.ecosystem-column li:last-child{

    border-bottom:none;

}








/*=========================================
FLOW LINES
=========================================*/

.ecosystem-hub{

    position:relative;

}

.flow-line{

    position:absolute;

    top:50%;

    width:110px;

    height:2px;

    z-index:5;

    background:
linear-gradient(
90deg,
transparent,
rgba(255,160,0,.95),
transparent
);

background-size:200% 100%;

animation:flowMove 3s linear infinite;

}

.flow-left{

    left:-88px;

}

.flow-right{

    right:-88px;

}

.flow-line::after{

    content:"";

    position:absolute;

    right:0;

    top:-4px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 12px rgba(255,140,0,.7);

    animation:flowPulse 2s infinite;

}

@keyframes flowPulse{

    0%{

        opacity:.2;

        transform:scale(.7);

    }

    50%{

        opacity:1;

        transform:scale(1.3);

    }

    100%{

        opacity:.2;

        transform:scale(.7);

    }

}

/* ===========================================
   HUB FLOAT
=========================================== */

@keyframes hubFloat {

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

.hub-box{

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

}

/* ===========================================
   HUB GLOW
=========================================== */
@keyframes hubGlow{

    0%{

        box-shadow:
        0 0 18px rgba(255,140,0,.18);

    }

    50%{

        box-shadow:
        0 0 40px rgba(255,140,0,.35);

    }

    100%{

        box-shadow:
        0 0 18px rgba(255,140,0,.18);

    }

}

.hub-box{

    animation:
    hubFloat 6s ease-in-out infinite,
    hubGlow 4s ease-in-out infinite;

}

/* ===========================================
   FLOW LINE SATHI ITHE
=========================================== */

@keyframes flowMove{

    from{

        background-position:200%;

    }

    to{

        background-position:-200%;

    }

}



/* ==========================================
   ADVERTISER CSS 
========================================== */



.advertiser-section{

    max-width:1400px;

    margin:140px auto;

    padding:0 40px;

}

.advertiser-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}


/* ==========================================
   ADVERTISER CARDS
========================================== */

.advertiser-card{

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

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

    border-radius:28px;

    padding:42px;

    transition:.35s ease;

    backdrop-filter:blur(18px);

    min-height:280px;

    display:flex;

    flex-direction:column;

}

.advertiser-card:hover{

    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 20px 45px rgba(255,140,0,.18);

}

.advertiser-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:rgba(255,140,0,.10);

    border:1px solid rgba(255,140,0,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:28px;

}

.advertiser-card h3{

    font-size:34px;

    font-weight:700;

    margin-bottom:22px;

    color:#fff;

}

.advertiser-card p{

    color:#bdbdbd;

    font-size:18px;

    line-height:1.8;

}

.advertiser-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:

    radial-gradient(

        circle at top,

        rgba(255,140,0,.08),

        transparent 70%

    );

    opacity:0;

    transition:.35s;

}

.advertiser-card:hover::before{

    opacity:1;
    position: relative;
overflow: hidden;
}

/*==========================================
ADVERTISER FLOW
==========================================*/

.advertiser-flow{

    padding:120px 0;

}

.flow-steps{

    display:grid;

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

    align-items:center;

    gap:30px;

    margin-top:70px;

}

.flow-step{

    text-align:center;

}

.step-number{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(255,140,0,.18),
        rgba(255,255,255,.05)
    );

    border:2px solid rgba(255,140,0,.30);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    font-weight:700;

    color:var(--primary);

}

.flow-step h3{

    font-size:1.8rem;

    margin-bottom:16px;

}

.flow-step p{

    color:#bfbfbf;

    line-height:1.8;

}

.flow-line-horizontal{

    height:3px;

    width:120px;

    background:linear-gradient(
        90deg,
        rgba(255,140,0,.2),
        rgba(255,140,0,.9),
        rgba(255,140,0,.2)
    );

    border-radius:999px;

}

/*==========================================
ADVERTISER CTA
==========================================*/

.advertiser-cta{

    padding:100px 0 140px;

}

.cta-box{

    max-width:1200px;

    margin:0 auto;

    padding:70px;

    border-radius:34px;

    background:
    linear-gradient(
        135deg,
        rgba(255,140,0,.10),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,140,0,.18);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    overflow:hidden;

    position:relative;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    top:-160px;

    background:radial-gradient(
        circle,
        rgba(255,140,0,.12),
        transparent 70%
    );

    pointer-events:none;

}

.cta-content{

    flex:1;

    position:relative;

    z-index:2;

}

.cta-content h2{

    font-size:3.3rem;

    line-height:1.15;

    margin:24px 0;

}

.cta-content h2 span{

    color:var(--primary);

}

.cta-content p{

    max-width:620px;

    color:#bdbdbd;

    line-height:1.9;

    font-size:1.08rem;

}

.cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:relative;

    z-index:2;

}

.cta-box{

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

}

.cta-box:hover{

    transform:translateY(-5px);

    box-shadow:
    0 30px 80px rgba(255,140,0,.12);

}

/*==========================================
PUBLISHER SECTION
==========================================*/

.publisher-section{

    max-width:1400px;

    margin:140px auto;

    padding:0 40px;

}

.publisher-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

/* Reuse advertiser card styling */

.publisher-card{

    position:relative;

    overflow:hidden;

}

/* Share the same visual style */

.publisher-card,
.advertiser-card{

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

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

    border-radius:28px;

    padding:42px;

    backdrop-filter:blur(18px);

    transition:.35s ease;

}

.publisher-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(255,140,0,.18);

}

.publisher-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(255,140,0,.10);

    border:1px solid rgba(255,140,0,.25);

    margin-bottom:28px;

    font-size:34px;

}

.publisher-card h3{

    font-size:2rem;

    margin-bottom:18px;

}

.publisher-card p{

    color:#bdbdbd;

    line-height:1.8;

}

/*==========================================
PUBLISHER FLOW
==========================================*/

.publisher-flow{

    padding:120px 0;

}

.publisher-flow-steps{

    display:grid;

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

    gap:24px;

    align-items:center;

    margin-top:70px;

}

.publisher-step{

    text-align:center;

}

.publisher-line{

    width:90px;

    height:3px;

    border-radius:999px;

     background:linear-gradient(
        90deg,
        transparent,
        rgba(255,140,0,.9),
        transparent
    );

    background-size:200% 100%;

    animation:flowMove 4s linear infinite;

}

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

.trust-section{

    padding:140px 0;

}

.trust-grid{

    display:grid;

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

    gap:32px;

    margin-top:80px;

}

.trust-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:30px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s ease;

}

.trust-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:

    0 20px 55px rgba(255,140,0,.15);

}

.trust-icon{

    width:74px;

    height:74px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    font-size:34px;

    background:rgba(255,140,0,.10);

    border:1px solid rgba(255,140,0,.25);

}

.trust-card h3{

    font-size:2rem;

    margin-bottom:20px;

}

.trust-card p{

    color:#bdbdbd;

    line-height:1.8;

}

/*==========================================
PLATFORM OVERVIEW
==========================================*/

.stats-section{

    padding:140px 0;

}

.stats-grid{

    display:grid;

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

    gap:30px;

    margin-top:80px;

}

.stat-card{

    padding:44px;

    border-radius:30px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}

.stat-card h3{

    font-size:42px;

    margin-bottom:24px;

}

.stat-card h4{

    font-size:2rem;

    margin-bottom:16px;

}

.stat-card p{

    color:#bdbdbd;

    line-height:1.8;

}

/*==========================================
PARTNER ECOSYSTEM
==========================================*/

.partners-section{

    padding:140px 0;

}

.partners-grid{

    display:grid;

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

    gap:30px;

    margin-top:80px;

}

.partner-category{

    padding:40px;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.partner-category:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}

.partner-category h3{

    font-size:1.8rem;

    margin-bottom:24px;

}

.partner-category ul{

    list-style:none;

    padding:0;

    margin:0;

}

.partner-category li{

    padding:14px 0;

    color:#d7d7d7;

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

}

.partner-category li:last-child{

    border-bottom:none;

}

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

.faq-section{

    padding:140px 0;

}

.faq-list{

    max-width:950px;

    margin:80px auto 0;

}

.faq-item{

    margin-bottom:18px;

    border-radius:20px;

    overflow:hidden;

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

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

}

.faq-item summary{

    cursor:pointer;

    padding:28px 34px;

    font-size:1.25rem;

    font-weight:600;

    list-style:none;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item p{

    padding:0 34px 30px;

    color:#bdbdbd;

    line-height:1.9;

}

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

.final-cta{

    padding:160px 0;

}

.final-cta-box{

    max-width:1100px;

    margin:0 auto;

    padding:90px 70px;

    text-align:center;

    border-radius:36px;

    background:
    linear-gradient(
        135deg,
        rgba(255,140,0,.10),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,140,0,.18);

    position:relative;

    overflow:hidden;

}

.final-cta-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    right:-180px;

    background:
    radial-gradient(

        circle,

        rgba(255,140,0,.12),

        transparent 70%

    );

}

.final-cta-box h2{

    font-size:4rem;

    line-height:1.15;

    margin:30px 0;

}

.final-cta-box h2 span{

    color:var(--primary);

}

.final-cta-box p{

    max-width:700px;

    margin:0 auto;

    color:#bdbdbd;

    line-height:1.9;

    font-size:1.1rem;

}

.final-cta-buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    margin-top:50px;

    flex-wrap:wrap;

}


.final-cta-box{

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

}

.final-cta-box:hover{

    transform:translateY(-6px);

    box-shadow:
        0 30px 80px rgba(255,140,0,.14);

}


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

.site-footer{

    margin-top:140px;

    padding:90px 0 40px;

    background:#0b0b0b;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:

    2fr

    repeat(4,1fr);

    gap:50px;

}

.footer-logo{

    display:inline-block;

    margin-bottom:24px;

}

.footer-logo img{

    height:100px;

    width:auto;

    display:block;

    transition:
        transform .3s ease,
        filter .3s ease;

}

.footer-logo:hover img{

    transform:scale(1.05);

    filter:drop-shadow(
        0 0 18px rgba(255,140,0,.35)
    );

}

.footer-brand p{

    color:#bdbdbd;

    max-width:320px;

    line-height:1.8;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h3{

    margin-bottom:24px;

    font-size:1.15rem;

}

.footer-column a{

    color:#bdbdbd;

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-column a:hover{

    color:var(--primary);

    transform:translateX(4px);

}

.footer-bottom{

    margin-top:70px;

    padding-top:35px;

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

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    color:#888;

    font-size:.95rem;

}