/* =========================================================
   LOVE88 V16 PREMIUM FUTURE UI
========================================================= */

:root{

--bg:#050913;
--bg2:#071827;
--bg3:#0b2336;

--glass:rgba(255,255,255,.07);
--glass2:rgba(255,255,255,.04);

--primary:#00ffd5;
--secondary:#00a8ff;

--text:#ffffff;
--muted:#a8bfd4;

--radius:26px;

--shadow:
0 18px 55px rgba(0,0,0,.45);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:

linear-gradient(
180deg,
#040914 0%,
#071827 45%,
#081f31 100%
);

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

color:var(--text);

overflow-x:hidden;

padding-bottom:100px;

min-height:100vh;

}

body.loaded{

animation:
fadeBody .8s ease;

}

@keyframes fadeBody{

from{

opacity:0;

transform:
translateY(10px);

}

to{

opacity:1;

transform:none;

}

}

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

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top,
rgba(0,255,213,.12),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(0,168,255,.10),
transparent 40%);

pointer-events:none;

z-index:-2;

}

body::after{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

linear-gradient(90deg,
rgba(255,255,255,.025) 1px,
transparent 1px);

background-size:42px 42px;

opacity:.30;

pointer-events:none;

z-index:-1;

}

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

a{

color:inherit;

text-decoration:none;

}

img{

max-width:100%;

display:block;

}

.container{

width:min(1180px,92%);

margin:auto;

}

.section{

padding:55px 0;

}

.section-title{

font-size:30px;

font-weight:900;

text-align:center;

margin-bottom:26px;

background:

linear-gradient(
90deg,
#ffffff,
#00ffd5);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ===========================
LOADER
=========================== */

.page-loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#050913;

z-index:999999;

transition:.45s;

}

.loaded .page-loader{

opacity:0;

visibility:hidden;

}

.loader-logo{

font-size:34px;

font-weight:900;

letter-spacing:2px;

color:#00ffd5;

animation:

loaderPulse 1.5s infinite;

}

@keyframes loaderPulse{

0%,100%{

transform:scale(1);

text-shadow:
0 0 10px #00ffd5;

}

50%{

transform:scale(1.08);

text-shadow:
0 0 28px #00ffd5;

}

}

/* =========================================================
   LOVE88 PREMIUM FUTURE HEADER
========================================================= */


.love88-header{

position:sticky;

top:0;

left:0;

width:100%;


z-index:999;


background:

rgba(5,15,28,.82);


backdrop-filter:

blur(22px);


-webkit-backdrop-filter:

blur(22px);


border-bottom:

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


box-shadow:

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


}



/* ===========================
HEADER INNER
=========================== */


.header-inner{

width:min(1180px,92%);

margin:auto;


display:flex;


align-items:center;


justify-content:space-between;


padding:14px 0;


}



/* ===========================
LOGO
=========================== */


.logo{


display:flex;


align-items:center;


gap:10px;


font-size:27px;


font-weight:900;


letter-spacing:1px;


color:#00ffd5;


text-decoration:none;


text-shadow:


0 0 10px rgba(0,255,213,.5),

0 0 25px rgba(0,255,213,.35);


transition:.35s;


}



.logo:hover{


transform:

translateY(-2px);


}



/* ===========================
DESKTOP NAV
=========================== */


.nav{


display:flex;


align-items:center;


gap:25px;


}



.nav a{


position:relative;


font-size:14px;


font-weight:700;


color:#c9d8e7;


text-decoration:none;


padding:8px 0;


transition:.35s;


}



.nav a::after{


content:"";


position:absolute;


left:0;


bottom:0;


width:0;


height:2px;


background:


linear-gradient(
90deg,
#00ffd5,
#00a8ff
);


transition:.35s;


}



.nav a:hover{


color:#00ffd5;


}



.nav a:hover::after{


width:100%;


}



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


.header-btn{


display:flex;


align-items:center;


gap:10px;


}



.login-btn,
.signup-btn{


padding:10px 20px;


border-radius:50px;


font-size:13px;


font-weight:800;


text-decoration:none;


transition:.35s;


}



.login-btn{


color:#00ffd5;


border:

1px solid rgba(0,255,213,.35);


background:

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


}



.signup-btn{


color:#04111d;


background:


linear-gradient(
135deg,
#00ffd5,
#00a8ff
);


box-shadow:


0 0 25px rgba(0,255,213,.35);


}



.login-btn:hover,
.signup-btn:hover{


transform:

translateY(-3px);


}



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


@media(max-width:1024px){



.header-inner{


padding:12px 0;


}



.logo{


font-size:22px;


}



.nav{


display:none;


}



.header-btn{


gap:6px;


}



.login-btn,
.signup-btn{


padding:8px 12px;


font-size:11px;


}



}


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


@media(max-width:420px){



.logo{


font-size:20px;


}



.login-btn{


display:none;


}



.signup-btn{


padding:8px 14px;


}


}

/* =========================================================
   LOVE88 PREMIUM FUTURE HERO
========================================================= */


.hero{

position:relative;

padding:100px 0 70px;

text-align:center;

overflow:hidden;

}



/* GLOW */

.hero-glow{

position:absolute;

width:520px;

height:520px;

top:-230px;

left:50%;


transform:translateX(-50%);


background:

radial-gradient(
circle,
rgba(0,255,213,.35),
transparent 65%
);


filter:blur(70px);

}



/* BADGE */

.hero-badge{


display:inline-flex;


padding:10px 22px;


border-radius:50px;


background:

rgba(0,255,213,.08);


border:

1px solid rgba(0,255,213,.35);


color:#00ffd5;


font-size:12px;


font-weight:800;


letter-spacing:1px;


box-shadow:

0 0 25px rgba(0,255,213,.25);


animation:

badgeGlow 3s infinite;


}



@keyframes badgeGlow{


50%{

box-shadow:

0 0 45px rgba(0,255,213,.55);

}

}




/* TITLE */


.hero h1{


margin:25px 0 18px;


font-size:56px;


font-weight:950;


line-height:1.1;


color:#fff;


letter-spacing:1px;


}



.hero h1 span{


background:

linear-gradient(
90deg,
#00ffd5,
#00a8ff,
#8a2be2
);


-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}




/* TEXT */


.hero p{


max-width:760px;


margin:auto;


font-size:16px;


line-height:1.8;


color:var(--muted);


}



/* BUTTON AREA */


.hero-buttons{


margin-top:35px;


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


}



.hero-login,
.hero-apply{


padding:15px 32px;


border-radius:50px;


font-size:14px;


font-weight:900;


text-decoration:none;


transition:.35s;


}



.hero-login{


color:#00ffd5;


background:

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


border:

1px solid rgba(0,255,213,.35);


}



.hero-apply{


color:#00151d;


background:

linear-gradient(
135deg,
#00ffd5,
#00a8ff
);


box-shadow:

0 0 30px rgba(0,255,213,.45);


}



.hero-login:hover,
.hero-apply:hover{


transform:

translateY(-5px);


}



/* STATS */


.hero-stats{


margin-top:45px;


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


}



.hero-stat{


min-width:140px;


padding:18px;


border-radius:22px;


background:

rgba(255,255,255,.06);


border:

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


backdrop-filter:blur(15px);


}



.hero-stat strong{


display:block;


font-size:24px;


font-weight:900;


color:#00ffd5;


}



.hero-stat span{


font-size:12px;


color:#a8bfd4;


}



/* MOBILE */

@media(max-width:1024px){


.hero{

padding:65px 0 50px;

}



.hero h1{

font-size:36px;

}



.hero p{

font-size:14px;

padding:0 15px;

}



.hero-buttons{

flex-direction:column;

align-items:center;

}



.hero-login,
.hero-apply{


width:100%;

max-width:330px;


}



.hero-stat{

min-width:110px;

}


}

/* =========================================================
   PREMIUM SWIPE CAROUSEL V16
========================================================= */

.love-carousel{

width:100%;

position:relative;

overflow-x:auto;
overflow-y:hidden;

padding:6px 0 12px;

scroll-behavior:smooth;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

cursor:grab;

}

.love-carousel::-webkit-scrollbar{

display:none;

}

.love-carousel.dragging{

cursor:grabbing;

}

.love-track{

display:flex;

gap:18px;

width:max-content;

will-change:auto;

animation:none !important;

}

.love-slide{

flex:0 0 230px;

user-select:none;

}

@media(max-width:1024px){

.love-slide{

flex:0 0 170px;

}

}

@media(max-width:480px){

.love-slide{

flex:0 0 160px;

}

}

/* =========================================================
   PREMIUM GLASS CARD SYSTEM
========================================================= */

.agent-card,
.platform-card{

position:relative;

display:flex;
flex-direction:column;
justify-content:space-between;

width:230px;
min-height:245px;

padding:16px;

overflow:hidden;

border-radius:28px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

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

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

box-shadow:
0 20px 60px rgba(0,0,0,.45);

transition:
all .45s cubic-bezier(.22,1,.36,1);

opacity:0;

transform:translateY(35px);

}

.agent-card.show,
.platform-card.show{

opacity:1;

transform:translateY(0);

}

.agent-card:hover,
.platform-card:hover{

transform:translateY(-10px);

border-color:rgba(0,255,213,.45);

box-shadow:
0 0 35px rgba(0,255,213,.30),
0 25px 65px rgba(0,0,0,.45);

}

/* ==============================
   Animated Glow Border
================================ */

.agent-card::before,
.platform-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:30px;

padding:2px;

background:

linear-gradient(
90deg,
transparent,
#00ffd5,
#00a8ff,
transparent
);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

animation:

borderRotate 5s linear infinite;

opacity:.9;

}

@keyframes borderRotate{

100%{

transform:rotate(360deg);

}

}

/* ==============================
   Shine
================================ */

.agent-card::after,
.platform-card::after{

content:"";

position:absolute;

top:-120%;

left:-40%;

width:60%;

height:320%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.20),

transparent

);

transform:rotate(25deg);

animation:

cardShine 6s infinite;

}

@keyframes cardShine{

100%{

top:120%;

}

}

/* ==============================
   Agent Badge
================================ */

.agent-badge{

display:inline-flex;

align-self:center;

padding:6px 16px;

border-radius:40px;

font-size:11px;

font-weight:800;

background:

linear-gradient(
135deg,
#00ffd5,
#00a8ff
);

color:#02151f;

box-shadow:

0 0 20px rgba(0,255,213,.35);

}

/* ==============================
   Avatar
================================ */

.agent-avatar{

width:70px;
height:70px;

margin:14px auto;

border-radius:50%;

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

font-size:28px;
font-weight:900;

background:

linear-gradient(
135deg,
#00ffd5,
#00a8ff
);

color:#00151d;

box-shadow:

0 0 35px rgba(0,255,213,.45);

animation:

avatarFloat 4s ease-in-out infinite;

}

@keyframes avatarFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

.agent-name{

font-size:18px;

font-weight:900;

margin:8px 0 4px;

}

.agent-role{

font-size:12px;

color:#b5c7d9;

}

/* ==============================
   Meta
================================ */

.agent-meta{

display:flex;

gap:10px;

margin-top:14px;

}

.meta-box{

flex:1;

padding:10px;

border-radius:14px;

background:

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

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

}

.meta-box strong{

display:block;

font-size:14px;

margin-bottom:2px;

}

.meta-box small{

font-size:10px;

color:#a6b9ca;

}

/* ==============================
   Platform
================================ */

.platform-image{

height:95px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:10px;

}

.platform-image img{

height:80px;

object-fit:contain;

filter:

drop-shadow(
0 0 18px rgba(0,255,213,.45)
);

transition:.4s;

}

.platform-card:hover img{

transform:scale(1.08);

}

.platform-title{

font-size:17px;

font-weight:900;

margin-bottom:6px;

}

.platform-text{

font-size:12px;

line-height:1.5;

color:#b5c7d9;

}

/* ==============================
   Buttons
================================ */

.agent-btn,
.platform-btn,
.love88-btn{

display:flex;

justify-content:center;

align-items:center;

margin-top:16px;

padding:12px;

border-radius:50px;

font-size:13px;

font-weight:800;

background:

linear-gradient(
135deg,
#00ffd5,
#00a8ff
);

color:#00151d;

box-shadow:

0 0 20px rgba(0,255,213,.35);

transition:.35s;

}

.agent-btn:hover,
.platform-btn:hover,
.love88-btn:hover{

transform:

translateY(-3px);

box-shadow:

0 0 30px rgba(0,255,213,.55);

}

/* =========================================================
   LOVE88 V17 PREMIUM FUTURE BOTTOM NAV
========================================================= */

.future-bottom-nav{

position:fixed;

left:0;
right:0;
bottom:0;

height:78px;

padding:
0 8px
env(safe-area-inset-bottom);


display:flex;

justify-content:space-around;

align-items:center;


background:
rgba(6,18,31,.94);


backdrop-filter:
blur(24px);

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


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


box-shadow:

0 -10px 35px rgba(0,0,0,.45);


z-index:99999;

}



.future-bottom-nav::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:1px;


background:

linear-gradient(
90deg,
transparent,
#00ffd5,
#00a8ff,
transparent
);

}



/* ===============================
   NAV ITEM
================================ */


.future-bottom-nav .nav-item{

flex:1;

height:100%;


display:flex;

flex-direction:column;


align-items:center;

justify-content:center;


gap:4px;


background:none;

border:none;


text-decoration:none;


color:#9fb4c7;


cursor:pointer;


position:relative;


transition:.3s;

}



.future-bottom-nav .icon{

font-size:22px;

line-height:1;


transition:.3s;

}



.future-bottom-nav .nav-item span{

font-size:9px;

font-weight:700;

line-height:1;


white-space:nowrap;

}



/* ===============================
   ACTIVE
================================ */


.future-bottom-nav .nav-item.active{

color:#00ffd5;

}



.future-bottom-nav .nav-item.active .icon{


transform:

translateY(-3px)
scale(1.12);


filter:

drop-shadow(
0 0 10px #00ffd5
);

}



.future-bottom-nav .nav-item.active::before{


content:"";


position:absolute;


top:5px;


width:34px;


height:3px;


border-radius:20px;


background:#00ffd5;


box-shadow:

0 0 12px #00ffd5;

}



/* ===============================
   CENTER BUTTON
================================ */


.future-bottom-nav .nav-center{

padding-bottom:0;

}



.future-bottom-nav .center-btn{


width:58px;

height:58px;


display:flex;

align-items:center;

justify-content:center;


border-radius:50%;


margin-top:-22px;


font-size:26px;


background:

linear-gradient(
135deg,
#00ffd5,
#00a8ff
);


color:#04111d;


box-shadow:

0 0 30px rgba(0,255,213,.55);


animation:

supportPulse 2.5s infinite;

}



.future-bottom-nav .nav-center span{


margin-top:4px;


font-size:9px;


font-weight:800;


color:#00ffd5;

}



/* ===============================
   RIPPLE
================================ */


.future-bottom-nav .nav-item::after{


content:"";


position:absolute;


width:0;

height:0;


border-radius:50%;


background:

rgba(0,255,213,.18);


transition:.35s;

}



.future-bottom-nav .nav-item:active::after{


width:64px;

height:64px;

}



/* ===============================
   ANIMATION
================================ */


@keyframes supportPulse{


0%,100%{

transform:scale(1);

box-shadow:

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

}


50%{

transform:scale(1.08);

box-shadow:

0 0 40px rgba(0,255,213,.70);

}

}



/* ===============================
   BODY SPACE
================================ */


body{

padding-bottom:90px;

}



/* ===============================
   DESKTOP
================================ */


@media(min-width:768px){


.future-bottom-nav{

display:none;

}


body{

padding-bottom:0;

}

}



/* =========================================================
   RIPPLE EFFECT
========================================================= */


.ripple{

position:absolute;

border-radius:50%;


transform:scale(0);


background:

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


animation:

ripple .6s linear;


pointer-events:none;

}



@keyframes ripple{


to{


transform:scale(4);


opacity:0;


}


}



/* =========================================================
   TOUCH EFFECT
========================================================= */


.touch-active{


transform:scale(.96)!important;


box-shadow:

0 0 45px rgba(0,255,213,.6)!important;

}



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


@media(max-width:1024px){


.section{

padding:40px 0;

}


.section-title{

font-size:24px;

}


.love-slide{

flex:0 0 175px;

}



.agent-card,
.platform-card{


width:175px;


min-height:220px;


padding:12px;


border-radius:24px;


}



.agent-avatar{


width:58px;

height:58px;


font-size:22px;


}



.platform-image{


height:72px;


}



.platform-image img{


height:60px;


}


}



/* =========================================================
   SCROLLBAR
========================================================= */


::-webkit-scrollbar{

width:8px;

height:8px;

}


::-webkit-scrollbar-track{

background:#06121e;

}


::-webkit-scrollbar-thumb{


background:

linear-gradient(
180deg,
#00ffd5,
#00a8ff
);


border-radius:10px;

}