/*
==================================================
RICL WORLD - v0.2.2
Main Stylesheet (Part A)
Akash Vadaje
==================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
--primary:#ff7a00;
--primary2:#ff9d2e;
--bg:#050505;
--surface:rgba(255,255,255,.08);
--border:rgba(255,255,255,.15);
--text:#fff;
--muted:#bdbdbd;
--radius:22px;
--shadow:0 15px 40px rgba(0,0,0,.35);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Poppins,sans-serif;
background:#050505;
color:#fff;
overflow-x:hidden;
line-height:1.6;
}
body:before,body:after{
content:"";
position:fixed;
border-radius:50%;
filter:blur(90px);
z-index:-1;
}
body:before{
width:550px;height:550px;
left:-220px;top:-220px;
background:#ff7a00;
opacity:.18;
}
body:after{
width:650px;height:650px;
right:-260px;bottom:-260px;
background:#ff9d2e;
opacity:.12;
}
.container{
width:min(1200px,92%);
margin:auto;
}
.glass{
background:var(--surface);
backdrop-filter:blur(20px);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.text-primary{color:var(--primary)}

.navbar{
position:fixed;
top:20px;
left:0;
right:0;
z-index:1000;
transition:.35s;
}
.nav-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 30px;
}
.logo{
display:flex;
align-items:center;
gap:14px;
}
.logo img{
height:64px;
filter:drop-shadow(0 0 18px rgba(255,122,0,.45));
transition:.35s;
}
.logo img:hover{transform:scale(1.06) rotate(-3deg)}
.logo h3{font-size:24px}
.logo span{font-size:13px;color:var(--muted)}

.desktop-nav ul{
display:flex;
list-style:none;
gap:32px;
align-items:center;
}
.desktop-nav li{position:relative}
.desktop-nav a{
font-weight:500;
padding:10px 0;
transition:.3s;
}
.desktop-nav a:hover{color:var(--primary)}

.nav-actions{
display:flex;
gap:14px;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
border-radius:14px;
font-weight:600;
transition:.3s;
}
.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;
box-shadow:0 0 25px rgba(255,122,0,.35);
}
.btn-primary:hover{
transform:translateY(-3px);
}
.btn-outline{
border:1px solid rgba(255,255,255,.2);
}
.btn-outline:hover{
background:rgba(255,255,255,.06);
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding-top:160px;
}
.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:70px;
align-items:center;
}
.hero-badge{
display:inline-block;
padding:12px 20px;
margin-bottom:25px;
}
.hero h1{
font-size:68px;
line-height:1.05;
font-weight:800;
margin-bottom:25px;
}
.hero-text{
max-width:620px;
font-size:18px;
color:var(--muted);
}
.hero-buttons{
display:flex;
gap:18px;
margin-top:40px;
flex-wrap:wrap;
}
.trust-row{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:40px;
}
.trust-item{
padding:12px 18px;
font-size:14px;
}

.network{
position:relative;
width:430px;
height:430px;
margin:auto;
border-radius:50%;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
box-shadow:0 0 80px rgba(255,122,0,.15);
}
.center-node,.node{
position:absolute;
border-radius:50%;
}
.center-node{
width:22px;height:22px;
left:50%;top:50%;
transform:translate(-50%,-50%);
background:var(--primary);
box-shadow:0 0 30px var(--primary);
animation:pulse 2s infinite;
}
.node{width:14px;height:14px;background:#fff}
.node1{top:25px;left:200px}
.node2{right:25px;top:120px}
.node3{right:55px;bottom:90px}
.node4{left:200px;bottom:25px}
.node5{left:40px;bottom:120px}
.node6{left:25px;top:110px}
.network:before{
content:"";
position:absolute;
inset:70px;
border:1px dashed rgba(255,122,0,.25);
border-radius:50%;
animation:spin 18s linear infinite;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin:40px 0 100px;
}
.stat-card{
padding:35px;
text-align:center;
}
.stat-card h2{
font-size:42px;
color:var(--primary);
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
50%{transform:translate(-50%,-50%) scale(1.25)}
}
@media(max-width:992px){
.desktop-nav{display:none}
.hero-grid{grid-template-columns:1fr}
.hero{text-align:center}
.hero h1{font-size:46px}
.network{width:320px;height:320px;margin-top:40px}
.stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.nav-actions{display:none}
.stats-grid{grid-template-columns:1fr}
.btn{width:100%}
}

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

PATCH 2
Sticky Navbar

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

.navbar{

transition:

top .35s ease,

background .35s ease,

box-shadow .35s ease,

backdrop-filter .35s ease;

}

.navbar-scrolled{

top:8px !important;

background:rgba(8,8,8,.88);

backdrop-filter:blur(28px);

box-shadow:

0 20px 60px rgba(0,0,0,.40),

0 0 20px rgba(255,122,0,.08);

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

}



.desktop-nav a{

position:relative;

}



.desktop-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:linear-gradient(

90deg,

#ff7a00,

#ffae42

);

transition:.35s;

}



.desktop-nav a:hover::after,

.desktop-nav a.active-link::after{

width:100%;

}



.desktop-nav a.active-link{

color:#ff7a00;

}

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

PATCH 3
Professional Dropdown

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

.dropdown{

position:relative;

}

.dropdown>a{

display:flex;

align-items:center;

gap:8px;

}

.dropdown-menu{

position:absolute;

left:0;

top:58px;

width:280px;

padding:12px;

display:flex;

flex-direction:column;

gap:6px;

background:rgba(10,10,10,.95);

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

border-radius:18px;

backdrop-filter:blur(24px);

box-shadow:

0 25px 60px rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

pointer-events:none;

transform:

translateY(18px)

scale(.98);

transition:

opacity .28s ease,

transform .28s ease,

visibility .28s ease;

z-index:9999;

}

.dropdown-menu.show{

opacity:1;

visibility:visible;

pointer-events:auto;

transform:

translateY(0)

scale(1);

}

.dropdown-menu li{

list-style:none;

}

.dropdown-menu a{

display:block;

padding:14px 16px;

border-radius:12px;

font-size:15px;

transition:.28s;

}

.dropdown-menu a:hover{

padding-left:24px;

background:

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

color:#ff7a00;

}

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

PATCH 4.2
Digital Globe Foundation

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

.hero-graphic{

display:flex;

justify-content:center;

align-items:center;

padding-top:60px;

}



.digital-globe{

width:420px;
height:420px;

margin:auto;

}




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

ROTATING RINGS

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

.globe-ring{

position:absolute;

border-radius:50%;

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

}



.ring-1{

width:420px;

height:420px;

animation:rotateClockwise 30s linear infinite;

}



.ring-2{

width:340px;

height:340px;

animation:rotateAntiClockwise 24s linear infinite;

border-style:dashed;

}



.ring-3{

width:260px;

height:260px;

animation:rotateClockwise 18s linear infinite;

opacity:.6;

}



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

CENTER CORE

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

.globe-core{

width:110px;
height:110px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:

radial-gradient(circle,

#ffb347,

#ff7a00);

box-shadow:

0 0 40px rgba(255,122,0,.45);

z-index:20;

}


.core-pulse{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    animation:corePulse 2s infinite;
}


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

COUNTRY NODES

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

.globe-node{

position:absolute;

width:56px;

height:56px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

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

backdrop-filter:blur(18px);

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

box-shadow:

0 10px 25px rgba(0,0,0,.30);

transition:.35s;

z-index:30;

}



.globe-node:hover{

transform:scale(1.15);

box-shadow:

0 0 25px rgba(255,122,0,.45);

}





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

CONNECTION LINES

(Currently hidden)

Animation comes Patch 4.4

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

.connection{

position:absolute;

height:2px;

background:

linear-gradient(

90deg,

transparent,

#ff7a00,

transparent

);

opacity:.15;

}



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

ANIMATIONS

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

@keyframes rotateClockwise{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



@keyframes rotateAntiClockwise{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}



@keyframes corePulse{

0%{

transform:scale(.9);

opacity:.6;

}



50%{

transform:scale(1.35);

opacity:1;

}



100%{

transform:scale(.9);

opacity:.6;

}

}

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

PATCH 4.3

Living Digital Globe

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


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

Entire Globe Floating

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

.digital-globe{

animation:

globeFloat 8s ease-in-out infinite;

}



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

Orange Ambient Glow

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

.digital-globe::before{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(255,122,0,.16),

transparent 70%

);

z-index:-2;

filter:blur(45px);

animation:

ambientGlow 6s ease-in-out infinite;

}



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

Orbiting Particle

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

.digital-globe::after{

content:"";

position:absolute;

width:10px;

height:10px;

border-radius:50%;

background:#ffffff;

box-shadow:

0 0 18px #ffffff,

0 0 40px #ff7a00;

animation:

orbitParticle 12s linear infinite;

}




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

Node Hover

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

.globe-node:hover{

transform:

scale(1.18)

translateY(-6px);

}



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

Animations

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

@keyframes globeFloat{

0%{

transform:

translateY(0px);

}

50%{

transform:

translateY(-14px);

}

100%{

transform:

translateY(0px);

}

}



@keyframes ambientGlow{

0%{

opacity:.5;

transform:scale(.95);

}

50%{

opacity:1;

transform:scale(1.08);

}

100%{

opacity:.5;

transform:scale(.95);

}

}



@keyframes orbitParticle{

0%{

transform:

rotate(0deg)

translateX(235px)

rotate(0deg);

}



100%{

transform:

rotate(360deg)

translateX(235px)

rotate(-360deg);

}

}



@keyframes nodePulse{

0%{

transform:scale(1);

}



50%{

transform:scale(1.12);

box-shadow:

0 0 25px rgba(255,122,0,.45);

}



100%{

transform:scale(1);

}

}

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

PATCH 4.5

Animated Connections

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


.connection{

position:absolute;

height:2px;

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

transform-origin:left center;

overflow:visible;

}



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

Connection Positions

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

.connection-1{

width:150px;

top:130px;

right:140px;

transform:
rotate(28deg);

}

.connection-2{

width:165px;

top:170px;

left:120px;

transform:
rotate(-28deg);

}

.connection-3{

width:145px;

bottom:135px;

right:135px;

transform:
rotate(-40deg);

}

.connection-4{

width:160px;

bottom:150px;

left:120px;

transform:
rotate(35deg);

}



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

Moving Packet

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

.packet{

position:absolute;

left:0;

top:-4px;

width:10px;

height:10px;

border-radius:50%;

background:#ffffff;

box-shadow:

0 0 12px #ffffff,

0 0 24px #ff7a00,

0 0 36px #ff7a00;

animation:

movePacket 3.5s linear infinite;

}



.connection-2 .packet{

animation-delay:.8s;

}

.connection-3 .packet{

animation-delay:1.6s;

}

.connection-4 .packet{

animation-delay:2.4s;

}



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

Animation

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

@keyframes movePacket{

0%{

left:0;

opacity:0;

}

10%{

opacity:1;

}

90%{

opacity:1;

}

100%{

left:100%;

opacity:0;

}

}

/*=========================================================
PATCH 5.2
RICL Digital Hub Layout
=========================================================*/

.hero-graphic{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:640px;
    position:relative;
}

.ecosystem{
    position:relative;
    width:620px;
    height:620px;
    margin-left:40x;
}

/* ===========================
   SVG Background
=========================== */

.ecosystem-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
}

.orbit{
    fill:none;
    stroke:rgba(255,122,0,.08);
    stroke-width:1.5;
}

.orbit-2{
    stroke-dasharray:10 8;
}

.orbit-3{

display:none;

}

/* ===========================
   Central Hub
=========================== */

.hub{

    position:absolute;

    left:50%;
    top:50%;

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

    width:260px;

    height:260px;

    border-radius:42px;

    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.10),

    rgba(255,255,255,.04)

    );

    backdrop-filter:blur(28px);

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

    display:flex;

    justify-content:center;

    align-items:center;

box-shadow:

0 35px 90px rgba(0,0,0,.50),

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

}

/* Orange Glow */

.hub::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(255,122,0,.10),

    transparent 72%

    );

    z-index:-1;

    filter:blur(30px);

}

/* Hub Content */

.hub-inner{

text-align:center;

}

.hub-inner h2{

font-size:60px;

letter-spacing:4px;

font-weight:800;

letter-spacing:3px;

margin:0;

color:#fff;

}

.hub-inner span{

display:block;

margin-top:10px;

font-size:20px;

font-weight:500;

letter-spacing:1px;

color:#ff9b33;

}

/* ===========================
   Service Panels
=========================== */

.node{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

position:absolute;

width:190px;

padding:18px;

border-radius:22px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.10),

rgba(255,255,255,.05)

);

backdrop-filter:blur(22px);

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

box-shadow:

0 18px 45px rgba(0,0,0,.35);

text-align:center;

transition:.35s;

}

.node:hover{

transform:translateY(-8px);

box-shadow:

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

}

.node{

font-size:34px;

}

.node small{

display:block;

margin-top:12px;

font-size:15px;

color:#fff;

letter-spacing:.5px;

}

/* ===========================
   Positions
=========================== */

.advertisers{

left:-90px;

top:20px;

}

.analytics{

right:-90px;

top:20px;

}

.surveys{

left:-110px;

bottom:40px;

}

.offerwalls{

right:-110px;

bottom:40px;

}


/* Remove emoji spacing */

.node br{
display:none;
}

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

PATCH 5.2.1

Service Cards Polish

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

.node{

    position:absolute;

    width:325px;

    min-height:135px;

    padding:20px 22px;

    border-radius:24px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.05)
    );

    backdrop-filter:blur(24px);

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

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

}


.node-icon{

position:relative;

top:auto;

left:auto;

margin:0 auto 18px;

width:52px;

height:52px;

display:flex;

justify-content:center;

align-items:center;

border-radius:16px;

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

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

font-size:22px;

color:#ff9b33;

}

.node-icon i{

transition:.35s;

}

.node:hover .node-icon{

background:#ff7a00;

color:white;

transform:

translateY(-2px)

rotate(-8deg);

box-shadow:

0 10px 30px rgba(255,122,0,.45);

}



.node h4{

margin:18px 0 10px 0;

font-size:22px;

font-weight:700;

line-height:1.25;

text-align:center;

white-space:normal;

}

.node p{

margin:0;

font-size:15px;

line-height:1.6;

text-align:center;

color:#d2d2d2;

max-width:220px;

margin-left:auto;

margin-right:auto;

}


.node:hover{

transform:scale(1.025);

border-color:

rgba(255,122,0,.35);

box-shadow:

0 15px 60px rgba(0,0,0,.45),

0 0 35px rgba(255,122,0,.18);

}


/*=========================================================
PATCH 5.3
Motion Engine
=========================================================*/

/* Floating Animation */

@keyframes floating{

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

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

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

}

.advertisers{
    animation:floating 6s ease-in-out infinite;
}

.analytics{
    animation:floating 7s ease-in-out infinite;
    animation-delay:.8s;
}

.surveys{
    animation:floating 6.5s ease-in-out infinite;
    animation-delay:1.5s;
}

.offerwalls{
    animation:floating 7.5s ease-in-out infinite;
    animation-delay:2s;
}

@keyframes hubBreathing{

    0%{

        box-shadow:
        0 35px 90px rgba(0,0,0,.50),
        0 0 40px rgba(255,122,0,.10);

    }

    50%{

        box-shadow:
        0 35px 90px rgba(0,0,0,.50),
        0 0 70px rgba(255,122,0,.18);

    }

    100%{

        box-shadow:
        0 35px 90px rgba(0,0,0,.50),
        0 0 40px rgba(255,122,0,.10);

    }

}

.hub{

    animation:hubBreathing 5s ease-in-out infinite;

}

@keyframes rotateOrbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.ecosystem-svg{

    transform-origin:center;

    animation:rotateOrbit 80s linear infinite;

}

/*=========================================================
PATCH 5.3.3
Interactive Connections
=========================================================*/

.connection{

position:absolute;

height:2px;

background:linear-gradient(
90deg,
transparent,
#ff7a00,
transparent
);

opacity:0;

transform-origin:left center;

transition:
opacity .35s ease,
transform .35s ease;

pointer-events:none;

}

/* Performance */

.connection-performance{

width:170px;

top:160px;

left:250px;

transform:rotate(35deg) scaleX(0);

}

/* Analytics */

.connection-analytics{

width:170px;

top:160px;

right:250px;

transform:rotate(145deg) scaleX(0);

}

/* Surveys */

.connection-surveys{

width:170px;

bottom:170px;

left:240px;

transform:rotate(-35deg) scaleX(0);

}

/* Offerwalls */

.connection-offerwalls{

width:170px;

bottom:170px;

right:240px;

transform:rotate(-145deg) scaleX(0);

}

/* Active */

.connection.active{

opacity:1;

}

.connection.active.connection-performance{

transform:rotate(35deg) scaleX(1);

}

.connection.active.connection-analytics{

transform:rotate(145deg) scaleX(1);

}

.connection.active.connection-surveys{

transform:rotate(-35deg) scaleX(1);

}

.connection.active.connection-offerwalls{

transform:rotate(-145deg) scaleX(1);

}

/*=========================================================
RELEASE 0.4.0
SECTION : WHY RICL
=========================================================*/

.section{
    position:relative;
    padding:120px 0;
}

.section-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(255,122,0,.12);
    border:1px solid rgba(255,122,0,.20);
    color:#ff9d2e;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-heading h2{

    font-size:48px;

    line-height:1.2;

    margin-bottom:22px;

    color:#fff;

    font-weight:800;

}

.section-heading p{

    color:#c8c8c8;

    font-size:18px;

    line-height:1.8;

}


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

WHY GRID

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

.why-grid{

    display:grid;

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

    gap:32px;

}


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

CARDS

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

.why-card{

    position:relative;

    padding:42px;

    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;

}


.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(

            90deg,

            #ff7a00,

            #ffb347

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}


.why-card:hover::before{

    transform:scaleX(1);

}


.why-card:hover{

    transform:translateY(-10px);

    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);

}


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

ICON

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

.why-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:

        linear-gradient(

            180deg,

            rgba(255,122,0,.18),

            rgba(255,122,0,.08)

        );

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

    color:#ff9d2e;

    font-size:28px;

}


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

TEXT

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

.why-card h3{

    font-size:28px;

    margin-bottom:18px;

    color:#fff;

}

.why-card p{

    color:#cfcfcf;

    font-size:16px;

    line-height:1.8;

}


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

RESPONSIVE

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

@media(max-width:991px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .section-heading h2{

        font-size:38px;

    }

}