/* ===== style.css ===== */
:root{
--primary:#1e40af;
--dark:#0f172a;
--white:#ffffff;
--text:#111827;
}

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

body{
font-family:Arial, sans-serif;
padding-top:95px;
}

/* ================= HEADER (FULL UPDATED / MERGED WITH HERO) ================= */

.main-header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
padding:10px 15px 0;
background:transparent;
transition:.3s ease;
}

/* NAV WRAP */
.nav-wrap{
max-width:1280px;
margin:auto;

background:rgba(248,250,252,.62);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border-radius:22px;
padding:14px 24px;

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

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

box-shadow:
0 10px 24px rgba(0,0,0,.04),
inset 0 1px 0 rgba(255,255,255,.45);

transition:.3s ease;
}

/* DARK MODE */
html[data-theme="dark"] .nav-wrap{
background:rgba(2,6,23,.70);
border:1px solid rgba(255,255,255,.04);

box-shadow:
0 10px 24px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.02);
}

/* LEFT */
.header-left{
display:flex;
align-items:center;
}

.logo-btn{
display:flex;
align-items:center;
text-decoration:none;
}

.site-logo{
height:42px;
transition:.3s ease;
}

/* CENTER MENU */
.navbar{
display:flex;
gap:12px;
align-items:center;
}

.navbar a{
text-decoration:none;
color:#111827;
padding:12px 18px;
font-weight:700;
border-radius:14px;
transition:.25s ease;
}

.navbar a:hover{
background:#eef2ff;
color:var(--primary);
transform:translateY(-1px);
}

html[data-theme="dark"] .navbar a{
color:#ffffff;
}

html[data-theme="dark"] .navbar a:hover{
background:rgba(255,255,255,.05);
color:#93c5fd;
}

/* RIGHT */
.header-right{
display:flex;
align-items:center;
gap:10px;
}

/* ICON BUTTONS */
.theme-btn,
.menu-toggle{
width:45px;
height:45px;
border:none;
border-radius:14px;
background:#ffffff;
cursor:pointer;
font-size:18px;
box-shadow:0 6px 20px rgba(0,0,0,.05);
transition:.25s ease;
}

.theme-btn:hover,
.menu-toggle:hover{
transform:translateY(-2px);
}

html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .menu-toggle{
background:#111827;
color:#fff;
box-shadow:none;
}

/* CTA */
.cta-btn{
background:var(--primary);
color:#fff;
padding:14px 25px;
text-decoration:none;
border-radius:15px;
font-weight:800;
box-shadow:0 10px 24px rgba(30,64,175,.18);
transition:.25s ease;
}

.cta-btn:hover{
transform:translateY(-2px);
}

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

.menu-toggle{
display:none;
}

@media(max-width:991px){

.main-header{
padding:8px 12px 0;
}

.nav-wrap{
padding:12px 16px;
border-radius:18px;
}

/* MOBILE MENU */
.navbar{
display:none;
position:absolute;
top:84px;
left:12px;
right:12px;

background:rgba(248,250,252,.76);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

padding:16px;
border-radius:20px;

flex-direction:column;
gap:10px;

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

box-shadow:
0 18px 40px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.45);
}

html[data-theme="dark"] .navbar{
background:rgba(2,6,23,.88);
border:1px solid rgba(255,255,255,.04);

box-shadow:
0 18px 40px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.02);
}

.navbar.show{
display:flex;
}

.navbar a{
padding:14px 16px;
width:100%;
}

.menu-toggle{
display:block;
}

.cta-btn{
display:none;
}

.site-logo{
height:38px;
}

}

/* SMALL MOBILE */
@media(max-width:600px){

.main-header{
padding:8px 10px 0;
}

.nav-wrap{
padding:12px 14px;
border-radius:16px;
}

.site-logo{
height:36px;
}

.theme-btn,
.menu-toggle{
width:42px;
height:42px;
font-size:17px;
}

}

/* =====================================
   PREMIUM SMALLER PRELOADER V2
===================================== */

#preloader{
position:fixed;
inset:0;
z-index:99999;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:all .7s ease;
}

html[data-theme="dark"] #preloader{
background:rgba(2,6,23,.92);
}

/* GRID */
.loader-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(0,0,0,.03) 1px, transparent 1px);
background-size:58px 58px;
}

html[data-theme="dark"] .loader-grid{
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px, transparent 1px);
}

/* BOX */
.loader-box{
position:relative;
z-index:2;
width:92%;
max-width:430px;
text-align:center;
padding:30px 24px;
border-radius:26px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(18px);
box-shadow:0 25px 60px rgba(0,0,0,.08);
}

html[data-theme="dark"] .loader-box{
background:rgba(15,23,42,.58);
box-shadow:0 25px 60px rgba(0,0,0,.35);
}

/* ICON */
.loader-icon-wrap{
width:90px;
height:90px;
margin:auto;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(30,64,175,.15);
animation:floatBox 2s ease-in-out infinite;
}

.loader-logo{
width:48px;
height:48px;
object-fit:contain;
}

/* TEXT */
.loader-box .loader-title{
font-size:34px;
font-weight:800;
margin-top:18px;
color:#111827;
line-height:1.2;
}

.loader-box .loader-title span{
color:#1e40af;
}

.loader-box p{
font-size:17px;
margin-top:8px;
color:#64748b;
}

html[data-theme="dark"] .loader-box .loader-title{
color:#fff;
}

html[data-theme="dark"] .loader-box p{
color:#cbd5e1;
}

/* NEW LOADING PATTERN */
.load-wave{
display:flex;
justify-content:center;
align-items:flex-end;
gap:8px;
margin-top:28px;
height:46px;
}

.load-wave span{
width:8px;
height:16px;
border-radius:30px;
background:linear-gradient(180deg,#1e40af,#60a5fa);
animation:waveLoad 1s infinite ease-in-out;
}

.load-wave span:nth-child(2){animation-delay:.1s;}
.load-wave span:nth-child(3){animation-delay:.2s;}
.load-wave span:nth-child(4){animation-delay:.3s;}
.load-wave span:nth-child(5){animation-delay:.4s;}
.load-wave span:nth-child(6){animation-delay:.5s;}

/* PERCENT */
#vara-progress-text{
margin-top:12px;
font-size:16px;
font-weight:700;
color:#1e40af;
}

/* ANIMATIONS */
@keyframes waveLoad{
0%,100%{height:14px;opacity:.5;}
50%{height:42px;opacity:1;}
}

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

@media(max-width:600px){

.loader-box{
max-width:350px;
padding:24px 18px;
}

.loader-box .loader-title{
font-size:28px;
}

.loader-box p{
font-size:15px;
}

.loader-icon-wrap{
width:78px;
height:78px;
}

}
 
/* FIX MOBILE HEADER */

.header-left{
flex:1;
display:flex;
align-items:center;
}

.header-right{
display:flex;
align-items:center;
gap:10px;
margin-left:auto;
}

.nav-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
}

/* LOGO SWITCH */
.logo-dark{
display:none;
}

html[data-theme="dark"] .logo-light{
display:none;
}

html[data-theme="dark"] .logo-dark{
display:block;
}

/* MOBILE FIX */
@media(max-width:991px){

.nav-wrap{
padding:14px 16px;
min-height:74px;
}

.site-logo{
height:38px;
max-width:150px;
object-fit:contain;
}

.theme-btn,
.menu-toggle{
width:46px;
height:46px;
flex-shrink:0;
font-size:19px;
}

.header-right{
gap:8px;
}

.menu-toggle{
display:flex;
justify-content:center;
align-items:center;
}

.cta-btn{
display:none;
}

.navbar{
top:86px;
left:12px;
right:12px;
}

}
/* FIX THIS IN YOUR CSS */

/* ===============================
   DARK MODE MAIN COLORS
=============================== */

html[data-theme="dark"] body{
    background:#0b1120 !important;
    color:#f8fafc !important;
}

/* HEADER */
html[data-theme="dark"] .nav-wrap{
    background:rgba(15,23,42,.88) !important;
    border:1px solid rgba(255,255,255,.05) !important;
}

/* TEXT */
html[data-theme="dark"] .navbar a,
html[data-theme="dark"] .logo-text,
html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .menu-toggle{
    color:#ffffff !important;
}

/* BUTTON BOXES */
html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .menu-toggle{
    background:#111827 !important;
}

/* MOBILE MENU */
html[data-theme="dark"] .navbar{
    background:#111827 !important;
}

/* LINKS HOVER */
html[data-theme="dark"] .navbar a:hover,
html[data-theme="dark"] .navbar a.active{
    background:rgba(59,130,246,.15) !important;
    color:#60a5fa !important;
}

/* PRELOADER */
html[data-theme="dark"] #preloader{
    background:#0b1120 !important;
}

html[data-theme="dark"] .loader-box .loader-title{
    color:#ffffff !important;
}

html[data-theme="dark"] .loader-box p{
    color:#cbd5e1 !important;
}

html[data-theme="dark"] .load-bar{
    background:#1f2937 !important;
}
/* ===============================
   SMOOTH THEME SWITCH
=============================== */

body,
.nav-wrap,
.navbar,
.mobile-menu,
.theme-btn,
.menu-toggle,
.navbar a{
transition:all .35s ease;
}

/* ===================================
   MOBILE MENU OPEN / CLOSE ANIMATION
   REPLACE YOUR .mobile-menu CSS
=================================== */

.mobile-menu{
position:absolute;
top:88px;
left:12px;
right:12px;
z-index:999;

background:rgba(255,255,255,.72);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.38);
box-shadow:0 20px 45px rgba(0,0,0,.10);

border-radius:22px;
padding:16px;

/* HIDDEN STATE */
opacity:0;
visibility:hidden;
pointer-events:none;

transform:translateY(-22px) scale(.94);

transform-origin:top center;

transition:
opacity .32s ease,
transform .36s cubic-bezier(.22,1,.36,1),
visibility .32s ease;
}


/* OPEN STATE */
.mobile-menu.show{
opacity:1;
visibility:visible;
pointer-events:auto;

transform:translateY(0) scale(1);
}


/* DARK MODE */
html[data-theme="dark"] .mobile-menu{
background:rgba(15,23,42,.84);
border:1px solid rgba(255,255,255,.05);
box-shadow:0 22px 50px rgba(0,0,0,.35);
}


/* LINKS ANIMATION */
.mobile-menu a{
display:block;
padding:14px 15px;
border-radius:14px;
text-decoration:none;
font-weight:600;
color:var(--text);

opacity:0;
transform:translateY(-8px);

transition:
all .25s ease;
}


/* WHEN OPEN */
.mobile-menu.show a{
opacity:1;
transform:translateY(0);
}


/* STAGGER EFFECT */
.mobile-menu.show a:nth-child(1){transition-delay:.04s;}
.mobile-menu.show a:nth-child(2){transition-delay:.08s;}
.mobile-menu.show a:nth-child(3){transition-delay:.12s;}
.mobile-menu.show a:nth-child(4){transition-delay:.16s;}
.mobile-menu.show a:nth-child(5){transition-delay:.20s;}
.mobile-menu.show .mobile-auth{transition-delay:.24s;}


/* AUTH BUTTONS */
.mobile-auth{
opacity:0;
transform:translateY(10px);
transition:all .28s ease;
}

.mobile-menu.show .mobile-auth{
opacity:1;
transform:translateY(0);
}

/* FIX MOBILE MENU TEXT COLOR IN DARK MODE */

/* ALL LINKS */
html[data-theme="dark"] .mobile-menu a{
color:#ffffff !important;
}

/* LOGIN BUTTON TEXT */
html[data-theme="dark"] .mobile-menu .login-btn{
color:#93c5fd !important;
}

/* REGISTER BUTTON TEXT */
html[data-theme="dark"] .mobile-menu .register-btn{
color:#ffffff !important;
}

/* HOVER */
html[data-theme="dark"] .mobile-menu a:hover,
html[data-theme="dark"] .mobile-menu a.active{
color:#93c5fd !important;
}

/* ICONS IF ANY */
html[data-theme="dark"] .mobile-menu i{
color:inherit !important;
}
/* DESKTOP HIDE */
@media(min-width:992px){
.mobile-menu{
display:none !important;
}
}

/* MOBILE */
@media(max-width:991px){

.navbar{
display:none !important;
}

.cta-btn{
display:none;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
}

}

/* ANIMATION */
@keyframes menuPop{
0%{
opacity:0;
transform:translateY(-18px) scale(.95);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
}
}
/* REPLACE MOBILE AUTH BUTTON DESIGN */

.mobile-auth{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:16px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.18);
}

/* BOTH BUTTONS */
.mobile-auth a{
display:flex;
align-items:center;
justify-content:center;
height:50px;
border-radius:16px;
font-size:15px;
font-weight:700;
text-decoration:none;
letter-spacing:.2px;
transition:all .28s ease;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}

/* LOGIN BUTTON */
.login-btn{
background:rgba(255,255,255,.78);
color:#1e40af;
border:1px solid rgba(30,64,175,.14);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

.login-btn:hover{
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(30,64,175,.12);
background:#ffffff;
}

/* REGISTER BUTTON */
.register-btn{
background:linear-gradient(135deg,#1e40af,#2563eb);
color:#ffffff;
border:1px solid rgba(255,255,255,.08);
}

.register-btn:hover{
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(37,99,235,.28);
filter:brightness(1.04);
}

/* DARK MODE */
html[data-theme="dark"] .mobile-auth{
border-top:1px solid rgba(255,255,255,.06);
}

html[data-theme="dark"] .login-btn{
background:rgba(17,24,39,.88);
color:#93c5fd;
border:1px solid rgba(147,197,253,.10);
box-shadow:0 10px 25px rgba(0,0,0,.28);
}

html[data-theme="dark"] .login-btn:hover{
background:#111827;
}

html[data-theme="dark"] .register-btn{
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#fff;
}
/* =====================================
   PREMIUM ACTIVE MENU STYLE
===================================== */

.navbar a{
position:relative;
transition:all .28s ease;
}

/* ACTIVE */
.navbar a.active{
color:#1e40af;
font-weight:700;

background:linear-gradient(
135deg,
rgba(30,64,175,.12),
rgba(59,130,246,.08)
);

border:1px solid rgba(30,64,175,.10);

box-shadow:
0 10px 24px rgba(30,64,175,.10),
inset 0 1px 0 rgba(255,255,255,.55);

transform:translateY(-1px);
}

/* GLOW DOT */
.navbar a.active::after{
content:"";
position:absolute;
left:50%;
bottom:7px;
transform:translateX(-50%);
width:6px;
height:6px;
border-radius:50%;
background:#1e40af;
box-shadow:0 0 10px rgba(30,64,175,.45);
}

/* HOVER */
.navbar a:hover{
transform:translateY(-1px);
}

/* ===============================
   DARK MODE
=============================== */

html[data-theme="dark"] .navbar a.active{
color:#93c5fd;

background:linear-gradient(
135deg,
rgba(59,130,246,.18),
rgba(147,197,253,.10)
);

border:1px solid rgba(147,197,253,.10);

box-shadow:
0 10px 26px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-theme="dark"] .navbar a.active::after{
background:#93c5fd;
box-shadow:0 0 12px rgba(147,197,253,.55);
}


/* =====================================
   ACTIVE SCROLL LINK
===================================== */

.navbar a.active-scroll,
footer a.active-scroll{
position:relative;
color:#1e40af !important;
font-weight:800;
background:rgba(30,64,175,.08);
}

.navbar a.active-scroll::after,
footer a.active-scroll::after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:8px;
height:3px;
border-radius:10px;
background:#1e40af;
animation:navGrow .28s ease;
}

html[data-theme="dark"] .navbar a.active-scroll,
html[data-theme="dark"] footer a.active-scroll{
color:#93c5fd !important;
background:rgba(96,165,250,.10);
}

html[data-theme="dark"] .navbar a.active-scroll::after,
html[data-theme="dark"] footer a.active-scroll::after{
background:#93c5fd;
}

/* =====================================
   HEADER SHRINK EFFECT
===================================== */

body.header-scrolled .nav-wrap{
padding:10px 22px;
border-radius:18px;
box-shadow:0 18px 34px rgba(0,0,0,.08);
}

html[data-theme="dark"] body.header-scrolled .nav-wrap{
box-shadow:0 18px 34px rgba(0,0,0,.35);
}

/* =====================================
   SECTION OFFSET
===================================== */

#features,
#how-it-works,
#faq{
scroll-margin-top:120px;
}

/* =====================================
   ANIM
===================================== */

@keyframes navGrow{
from{
transform:scaleX(.4);
opacity:.2;
}
to{
transform:scaleX(1);
opacity:1;
}
}
/* ===== footer.css ===== */
/* =====================================
   VARA PREMIUM FOOTER
===================================== */

.vara-footer{
position:relative;
overflow:hidden;
padding:75px 20px 30px;
background:linear-gradient(180deg,#f8fafc,#eef2ff);
border-top:1px solid rgba(0,0,0,.04);
transition:all .35s ease;
}

html[data-theme="dark"] .vara-footer{
background:linear-gradient(180deg,#020617,#0f172a);
border-top:1px solid rgba(255,255,255,.04);
}

/* GLOW */
.footer-glow{
position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.45;
}

.footer-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:-60px;
left:-60px;
animation:floatGlow 8s infinite ease-in-out;
}

.footer-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:-70px;
right:-70px;
animation:floatGlow 10s infinite ease-in-out;
}

.footer-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:5;
}

/* =====================================
   TOP SECTION (UPDATED FULL CSS)
===================================== */

.footer-top{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:55px;
align-items:start;
}

/* LEFT WRAP */
.footer-brand-wrap{
display:flex;
flex-direction:column;
}

/* BRAND TOP */
.footer-brand-top{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
margin-bottom:18px;
}

/* LOGO */
.footer-logo{
height:48px;
margin-bottom:0;
transition:.3s ease;
}

.footer-logo-dark{
display:none;
}

html[data-theme="dark"] .footer-logo-light{
display:none;
}

html[data-theme="dark"] .footer-logo-dark{
display:block;
}

/* BADGE */
.footer-badge{
display:inline-flex;
align-items:center;
padding:10px 16px;
border-radius:100px;
font-size:12px;
font-weight:700;
white-space:nowrap;
margin-bottom:0;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .footer-badge{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TEXT */
.footer-text{
max-width:430px;
line-height:1.8;
color:#64748b;
font-size:15px;
margin-bottom:0;
}

html[data-theme="dark"] .footer-text{
color:#cbd5e1;
}

/* LEGAL CARD UNDER TEXT */
.footer-legal-card{
margin-top:24px;
}

/* RIGHT MENU */
.footer-links-wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
justify-content:end;
}

/* =====================================
   TABLET + MOBILE ORDER FIX
===================================== */
@media(max-width:991px){

.footer-top{
display:flex !important;
flex-direction:column !important;
gap:30px;
}

/* break wrapper so children can reorder */
.footer-brand-wrap{
display:contents !important;
}

/* 1 = BRAND */
.footer-brand{
order:1;
}

/* 2 = MENUS */
.footer-links-wrap{
order:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
width:100%;
}

/* 3 = LEGAL CARD AFTER MENUS */
.footer-legal-card{
order:3;
width:100%;
margin-top:0 !important;
}

}

/* =====================================
   SMALL MOBILE
===================================== */
@media(max-width:600px){

.footer-brand-top{
flex-direction:column;
align-items:flex-start;
gap:14px;
}

.footer-logo{
height:42px;
}

.footer-links-wrap{
grid-template-columns:1fr;
gap:22px;
}

.footer-text{
max-width:100%;
}

.footer-legal-card{
margin-top:0 !important;
}

}




/* LINKS */
.footer-links-wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.footer-col h4{
font-size:16px;
font-weight:800;
margin-bottom:18px;
color:#111827;
}

html[data-theme="dark"] .footer-col h4{
color:#fff;
}

.footer-col a{
display:block;
margin-bottom:12px;
text-decoration:none;
color:#64748b;
font-weight:600;
transition:.25s;
}

.footer-col a:hover{
color:#1e40af;
transform:translateX(4px);
}

html[data-theme="dark"] .footer-col a{
color:#cbd5e1;
}

html[data-theme="dark"] .footer-col a:hover{
color:#93c5fd;
}

/* BOTTOM */
.footer-bottom{
margin-top:50px;
padding-top:25px;
border-top:1px solid rgba(0,0,0,.06);

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

html[data-theme="dark"] .footer-bottom{
border-top:1px solid rgba(255,255,255,.05);
}

.footer-copy{
font-size:14px;
font-weight:600;
color:#64748b;
}

html[data-theme="dark"] .footer-copy{
color:#94a3b8;
}

/* SOCIAL */
.footer-social{
display:flex;
gap:10px;
}

.footer-social a{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
text-decoration:none;
background:#fff;
color:#1e40af;
box-shadow:0 10px 20px rgba(0,0,0,.06);
transition:.25s;
}

.footer-social a:hover{
transform:translateY(-3px);
}

html[data-theme="dark"] .footer-social a{
background:#111827;
color:#93c5fd;
box-shadow:none;
}

/* MOBILE */
@media(max-width:991px){

.footer-top{
grid-template-columns:1fr;
gap:40px;
}

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

}

@media(max-width:600px){

.vara-footer{
padding:60px 18px 28px;
}

.footer-links-wrap{
grid-template-columns:1fr;
gap:25px;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
}

.footer-logo{
height:42px;
}

}

/* ANIMATION */
@keyframes floatGlow{
50%{
transform:translateY(-25px) translateX(20px);
}
}

/* =====================================
   LOGO + BADGE INLINE
===================================== */

.footer-brand-top{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
margin-bottom:18px;
}

.footer-logo{
margin-bottom:0;
}

.footer-badge{
margin-bottom:0;
white-space:nowrap;
}

/* =====================================
   LEGAL EXPAND CARD
===================================== */

.footer-legal-card{
margin-top:35px;
border-radius:24px;
overflow:hidden;

background:rgba(255,255,255,.65);
backdrop-filter:blur(18px);
border:1px solid rgba(0,0,0,.05);

box-shadow:0 18px 40px rgba(0,0,0,.06);
transition:.3s ease;
}

html[data-theme="dark"] .footer-legal-card{
background:rgba(15,23,42,.72);
border:1px solid rgba(255,255,255,.05);
box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* BUTTON */
.legal-toggle{
width:100%;
border:none;
background:none;
padding:20px 22px;
cursor:pointer;

display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.legal-left{
display:flex;
align-items:center;
gap:12px;

font-size:15px;
font-weight:800;
color:#111827;
}

.legal-left i{
color:#1e40af;
}

html[data-theme="dark"] .legal-left{
color:#ffffff;
}

html[data-theme="dark"] .legal-left i{
color:#93c5fd;
}

.legal-arrow{
transition:.3s ease;
color:#64748b;
}

html[data-theme="dark"] .legal-arrow{
color:#cbd5e1;
}

/* CONTENT */
.legal-content{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}

.footer-legal-card.open .legal-content{
max-height:500px;
}

.footer-legal-card.open .legal-arrow{
transform:rotate(180deg);
}

.legal-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
padding:0 22px 22px;
}

.legal-body{
font-size:14px;
line-height:1.9;
color:#64748b;
}

html[data-theme="dark"] .legal-body{
color:#cbd5e1;
}

/* MOBILE */
@media(max-width:768px){

.footer-brand-top{
flex-direction:column;
align-items:flex-start;
gap:14px;
}

.legal-grid{
grid-template-columns:1fr;
}

.legal-toggle{
padding:18px;
}

}
/* ===== hero.css ===== */
/* =====================================
   HERO SECTION PREMIUM UPGRADE
   (PADDING KEPT EXACTLY AS YOUR CURRENT)
===================================== */

body{
  padding-top:0;
}

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

.hero-section{
  position:relative;
  overflow:hidden;
  padding:160px 20px 90px;
  margin-top:0;

  background:
  radial-gradient(circle at 12% 20%, rgba(96,165,250,.20), transparent 22%),
  radial-gradient(circle at 88% 18%, rgba(30,64,175,.16), transparent 24%),
  radial-gradient(circle at 50% 75%, rgba(59,130,246,.10), transparent 28%),
  linear-gradient(
    180deg,
    rgba(248,250,252,1) 0%,
    rgba(239,246,255,.98) 10%,
    #f8fafc 55%,
    #ffffff 100%
  );

  transition:.35s ease;
}

.hero-container{
  padding-top:0;
  margin-top:0;
}

html[data-theme="dark"] .hero-section{
  background:
  radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
  radial-gradient(circle at 88% 18%, rgba(96,165,250,.12), transparent 24%),
  radial-gradient(circle at 50% 75%, rgba(30,64,175,.12), transparent 28%),
  linear-gradient(
    180deg,
    rgba(2,6,23,1) 0%,
    rgba(8,17,32,.98) 10%,
    #020617 55%,
    #0f172a 100%
  );
}

/* =====================================
   NAV MATCH HERO
===================================== */

.nav-wrap{
  background:rgba(248,250,252,.55)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

html[data-theme="dark"] .nav-wrap{
  background:rgba(2,6,23,.55)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

/* =====================================
   MOBILE KEEP YOUR PADDING
===================================== */

@media(max-width:991px){

  body{
    padding-top:0;
  }

  .hero-section{
    padding:190px 20px 80px;
  }

  .hero-container{
    padding-top:0;
    margin-top:0;
  }

  .hero-badge{
    margin-top:0;
    margin-bottom:20px;
  }

}

@media(max-width:600px){

  body{
    padding-top:0;
  }

  .hero-section{
    padding:170px 18px 70px;
  }

  .hero-container{
    padding-top:0;
    margin-top:0;
  }

  .hero-badge{
    margin-top:0;
    margin-bottom:16px;
  }

}

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

.hero-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);

background-size:56px 56px;
opacity:.65;
animation:gridMove 18s linear infinite;
}

html[data-theme="dark"] .hero-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* =====================================
   VIRTUAL NUMBER OBJECTS
===================================== */

.hero-phone,
.hero-sim,
.hero-sms{
position:absolute;
z-index:1;
pointer-events:none;
opacity:.20;
}

/* PHONE */
.hero-phone{
top:180px;
left:5%;
width:120px;
height:220px;
border:2px solid rgba(30,64,175,.20);
border-radius:28px;
transform:rotate(-12deg);
animation:floatPhone 8s ease-in-out infinite;
}

.hero-phone:before{
content:"";
position:absolute;
top:14px;
left:50%;
transform:translateX(-50%);
width:42px;
height:5px;
border-radius:10px;
background:rgba(30,64,175,.16);
}

.hero-phone:after{
content:"+234 ••••";
position:absolute;
bottom:24px;
left:50%;
transform:translateX(-50%);
font-size:13px;
font-weight:800;
color:#1e40af;
}

/* SIM */
.hero-sim{
right:7%;
top:170px;
width:95px;
height:115px;
border-radius:22px;
background:linear-gradient(145deg,#dbeafe,#93c5fd);
transform:rotate(18deg);
animation:floatSim 7s ease-in-out infinite;
}

.hero-sim:before{
content:"";
position:absolute;
inset:18px;
border:2px solid rgba(30,64,175,.20);
border-radius:16px;
}

/* OTP */
.hero-sms{
bottom:240px;
right:10%;
padding:12px 18px;
border-radius:18px;
background:rgba(255,255,255,.75);
border:1px solid rgba(30,64,175,.10);
font-size:13px;
font-weight:800;
color:#1e40af;
backdrop-filter:blur(10px);
animation:floatSms 6s ease-in-out infinite;
}

.hero-sms:before{
content:"OTP: 482931";
}

html[data-theme="dark"] .hero-phone{
border-color:rgba(147,197,253,.18);
}

html[data-theme="dark"] .hero-phone:before{
background:rgba(147,197,253,.18);
}

html[data-theme="dark"] .hero-phone:after{
color:#93c5fd;
}

html[data-theme="dark"] .hero-sim{
background:linear-gradient(145deg,#1e3a8a,#2563eb);
}

html[data-theme="dark"] .hero-sms{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.05);
color:#93c5fd;
}

/* =====================================
   GLOWS
===================================== */

.hero-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.55;
z-index:0;
animation:floatGlow 8s ease-in-out infinite;
}

.hero-glow-1{
width:280px;
height:280px;
background:#60a5fa;
top:110px;
left:-80px;
}

.hero-glow-2{
width:250px;
height:250px;
background:#1e40af;
right:-80px;
top:230px;
animation-delay:2s;
}

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

.hero-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:5;
text-align:center;
}

/* =====================================
   BADGE
===================================== */

.hero-badge{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 18px;
border-radius:100px;
font-size:14px;
font-weight:800;
margin-bottom:28px;

background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);

box-shadow:0 12px 24px rgba(0,0,0,.04);
}

.badge-users{
padding:7px 12px;
border-radius:100px;
background:#1e40af;
color:#fff;
font-size:13px;
}

html[data-theme="dark"] .hero-badge{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
box-shadow:none;
}

/* =====================================
   TITLE
===================================== */

.hero-title{
font-size:66px;
font-weight:900;
line-height:1.05;
max-width:980px;
margin:auto;
color:#0f172a;
letter-spacing:-1.5px;
}

.hero-title span{
display:block;
margin-top:8px;
color:#1e40af;
text-shadow:0 10px 28px rgba(30,64,175,.14);
}

html[data-theme="dark"] .hero-title{
color:#fff;
}

html[data-theme="dark"] .hero-title span{
color:#93c5fd;
text-shadow:none;
}

/* =====================================
   SUBTITLE
===================================== */

.hero-subtitle{
max-width:760px;
margin:24px auto 0;
font-size:22px;
line-height:1.75;
color:#64748b;
}

html[data-theme="dark"] .hero-subtitle{
color:#cbd5e1;
}

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

.hero-actions{
display:flex;
justify-content:center;
gap:16px;
margin-top:34px;
flex-wrap:wrap;
}

.hero-btn{
padding:16px 30px;
border-radius:18px;
font-size:16px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
position:relative;
overflow:hidden;
}

.primary-btn{
background:#1e40af;
color:#fff;
box-shadow:0 14px 30px rgba(30,64,175,.24);
}

.primary-btn:before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
transform:skewX(-22deg);
animation:shine 3s infinite;
}

.secondary-btn{
background:rgba(255,255,255,.75);
color:#111827;
border:1px solid rgba(0,0,0,.06);
}

html[data-theme="dark"] .secondary-btn{
background:#111827;
color:#fff;
border:1px solid rgba(255,255,255,.05);
}

.hero-btn:hover{
transform:translateY(-4px);
}

/* =====================================
   DASHBOARD
===================================== */

.hero-dashboard-wrap{
margin-top:65px;
perspective:1200px;
}

.hero-dashboard-frame{
max-width:1180px;
margin:auto;
padding:14px;
border-radius:28px;

background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

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

transform:rotateX(8deg);
transition:.35s ease;
}

.hero-dashboard-frame:hover{
transform:rotateX(0deg) translateY(-8px);
}

html[data-theme="dark"] .hero-dashboard-frame{
background:rgba(15,23,42,.72);
border:1px solid rgba(255,255,255,.05);
box-shadow:0 35px 80px rgba(0,0,0,.45);
}

.hero-dashboard-img{
width:100%;
display:block;
border-radius:20px;
}

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

@media(max-width:991px){

.hero-title{
font-size:48px;
}

.hero-subtitle{
font-size:18px;
}

.hero-phone,
.hero-sim,
.hero-sms{
display:none;
}

}

@media(max-width:600px){

.hero-title{
font-size:36px;
}

.hero-subtitle{
font-size:16px;
line-height:1.6;
}

.hero-actions{
flex-direction:column;
}

.hero-btn{
width:100%;
max-width:320px;
margin:auto;
}

.hero-dashboard-wrap{
margin-top:45px;
}

.hero-dashboard-frame{
padding:10px;
border-radius:22px;
}

}


/* =====================================
   HERO FIXES
   Replace ONLY these parts
===================================== */

/* TRUST STATS FIX */
.hero-stats{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
flex-wrap:wrap;
margin-top:26px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}

.hero-stat{
display:flex;
align-items:center;
justify-content:center;
gap:8px;

padding:12px 18px;
min-height:48px;

border-radius:100px;
font-size:14px;
font-weight:800;
line-height:1;

background:rgba(255,255,255,.78);
color:#111827;
border:1px solid rgba(255,255,255,.45);

box-shadow:0 8px 18px rgba(0,0,0,.04);
transition:.25s ease;
}

.hero-stat:hover{
transform:translateY(-3px);
}

html[data-theme="dark"] .hero-stat{
background:rgba(15,23,42,.78);
color:#fff;
border:1px solid rgba(255,255,255,.05);
box-shadow:none;
}

/* MOBILE STACK */
@media(max-width:600px){

.hero-stats{
gap:10px;
margin-top:22px;
}

.hero-stat{
width:calc(50% - 5px);
font-size:13px;
padding:11px 12px;
}

}

/* =====================================
   HERO ROTATE ANIMATION
===================================== */

.hero-title span,
#heroRotate{
display:block;
margin-top:8px;
color:#1e40af;
position:relative;

animation:
heroTextFloat 3.5s ease-in-out infinite,
heroTextGlow 2.5s ease-in-out infinite alternate;
}

html[data-theme="dark"] .hero-title span,
html[data-theme="dark"] #heroRotate{
color:#93c5fd;
}

/* smooth text switch effect if JS changes text */
#heroRotate{
transition:
opacity .35s ease,
transform .35s ease,
color .35s ease;
}

/* =====================================
   KEYFRAMES
===================================== */

@keyframes heroTextFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-6px);
}
}

@keyframes heroTextGlow{
0%{
text-shadow:0 0 0 rgba(30,64,175,0);
}
100%{
text-shadow:0 10px 28px rgba(30,64,175,.22);
}
}


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

@keyframes floatPhone{
50%{transform:rotate(-12deg) translateY(-18px);}
}

@keyframes floatSim{
50%{transform:rotate(18deg) translateY(-14px);}
}

@keyframes floatSms{
50%{transform:translateY(-12px);}
}

@keyframes floatGlow{
50%{transform:translateY(-18px);}
}

@keyframes shine{
100%{left:140%;}
}

@keyframes gridMove{
100%{transform:translate(56px,56px);}
}

/* =====================================
   HERO DASHBOARD PREMIUM
===================================== */

.hero-dashboard-wrap{
position:relative;
margin-top:68px;
perspective:1400px;
z-index:5;
}

/* FRAME */
.hero-dashboard-frame{
position:relative;
max-width:1180px;
margin:auto;
padding:14px;
border-radius:30px;

background:
linear-gradient(135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.70));

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

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

box-shadow:
0 35px 80px rgba(0,0,0,.10),
0 10px 30px rgba(30,64,175,.08);

transform:rotateX(8deg) rotateY(0deg);
transition:.45s ease;
overflow:visible;
}

/* SHINE LINE */
.hero-dashboard-frame::before{
content:"";
position:absolute;
top:0;
left:-140%;
width:45%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:skewX(-20deg);
animation:dashShine 5s linear infinite;
pointer-events:none;
}

/* BORDER GLOW */
.hero-dashboard-frame::after{
content:"";
position:absolute;
inset:-1px;
border-radius:30px;
padding:1px;
background:linear-gradient(
135deg,
rgba(96,165,250,.40),
rgba(255,255,255,0),
rgba(30,64,175,.28)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}

/* HOVER */
.hero-dashboard-frame:hover{
transform:rotateX(0deg) translateY(-10px);
box-shadow:
0 45px 90px rgba(0,0,0,.14),
0 18px 44px rgba(30,64,175,.14);
}

/* IMAGE */
.hero-dashboard-img{
width:100%;
display:block;
border-radius:22px;
position:relative;
z-index:2;
}

/* =====================================
   FLOATING BADGES
===================================== */

.hero-float{
position:absolute;
z-index:4;

padding:14px 18px;
border-radius:18px;

font-size:14px;
font-weight:900;
line-height:1;

background:rgba(255,255,255,.96);
color:#111827;

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

box-shadow:
0 20px 38px rgba(0,0,0,.08);

backdrop-filter:blur(12px);

animation:floatBadge 5.5s ease-in-out infinite;
white-space:nowrap;
}

/* LEFT BADGE */
.hero-float.one{
top:28px;
left:-22px;
}

/* RIGHT BADGE */
.hero-float.two{
bottom:30px;
right:-18px;
animation-delay:1.6s;
}

/* DARK MODE */
html[data-theme="dark"] .hero-dashboard-frame{
background:
linear-gradient(135deg,
rgba(15,23,42,.92),
rgba(15,23,42,.72));

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

box-shadow:
0 35px 80px rgba(0,0,0,.45),
0 12px 26px rgba(30,64,175,.12);
}

html[data-theme="dark"] .hero-dashboard-frame::before{
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.10),
transparent
);
}

html[data-theme="dark"] .hero-float{
background:rgba(17,24,39,.96);
color:#fff;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 18px 34px rgba(0,0,0,.35);
}

/* =====================================
   TABLET
===================================== */

@media(max-width:991px){

.hero-dashboard-wrap{
margin-top:54px;
}

.hero-dashboard-frame{
max-width:100%;
padding:12px;
border-radius:24px;
transform:none;
}

.hero-dashboard-frame:hover{
transform:translateY(-6px);
}

.hero-float{
font-size:13px;
padding:12px 14px;
}

.hero-float.one{
top:18px;
left:10px;
}

.hero-float.two{
bottom:18px;
right:10px;
}

}

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

@media(max-width:600px){

.hero-dashboard-wrap{
margin-top:42px;
}

.hero-dashboard-frame{
padding:10px;
border-radius:20px;
}

.hero-dashboard-img{
border-radius:16px;
}

.hero-float{
display:none;
}

}

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

@keyframes floatBadge{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}

@keyframes dashShine{
100%{
left:140%;
}
}
.dash-val {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.green { color: #16a34a; }
.yellow { color: #d97706; }
.blue { color: #2563eb; }



/* ===== trusted.css ===== */
/* =====================================
   TRUSTED PREMIUM SECTION
===================================== */

.trusted-section{
position:relative;
overflow:hidden;
padding:95px 20px;

background:
linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .trusted-section{
background:
linear-gradient(180deg,#020617 0%,#0f172a 100%);
}

/* GRID BACKGROUND */
.trusted-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:54px 54px;
opacity:.8;
}

html[data-theme="dark"] .trusted-grid-bg{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.trusted-glow{
position:absolute;
border-radius:50%;
filter:blur(95px);
opacity:.45;
}

.trusted-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:20px;
left:-70px;
}

.trusted-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:10px;
right:-70px;
}

/* CONTAINER */
.trusted-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.trusted-head{
text-align:center;
max-width:760px;
margin:auto;
}

.trusted-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

html[data-theme="dark"] .trusted-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.trusted-head h2{
font-size:46px;
font-weight:900;
color:#111827;
}

html[data-theme="dark"] .trusted-head h2{
color:#fff;
}

.trusted-head p{
margin-top:16px;
font-size:18px;
line-height:1.7;
color:#64748b;
}

html[data-theme="dark"] .trusted-head p{
color:#cbd5e1;
}

/* MARQUEE */
.trusted-marquee{
margin-top:42px;
overflow:hidden;
mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trusted-track{
display:flex;
gap:18px;
width:max-content;
animation:trustedMove 26s linear infinite;
}

.trusted-track span{
display:flex;
align-items:center;
gap:10px;

padding:14px 24px;
border-radius:18px;
font-weight:800;
font-size:15px;

background:rgba(255,255,255,.75);
backdrop-filter:blur(14px);

color:#475569;
border:1px solid rgba(0,0,0,.04);
}

.trusted-track i{
font-size:18px;
color:#1e40af;
}

html[data-theme="dark"] .trusted-track span{
background:rgba(15,23,42,.78);
color:#e2e8f0;
border:1px solid rgba(255,255,255,.04);
}

html[data-theme="dark"] .trusted-track i{
color:#93c5fd;
}

/* GRID */
.trusted-grid{
margin-top:42px;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}

.trusted-card{
padding:24px 16px;
border-radius:22px;
text-align:center;

background:rgba(255,255,255,.72);
backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.45);
box-shadow:0 18px 35px rgba(0,0,0,.04);

transition:.28s ease;
}

.trusted-card i{
display:block;
font-size:28px;
margin-bottom:12px;
color:#334155;
transition:.25s ease;
}

.trusted-card span{
font-size:15px;
font-weight:800;
color:#334155;
}

.trusted-card:hover{
transform:translateY(-5px);
box-shadow:0 22px 40px rgba(30,64,175,.08);
}

.trusted-card:hover i,
.trusted-card:hover span{
color:#1e40af;
}

html[data-theme="dark"] .trusted-card{
background:rgba(15,23,42,.76);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .trusted-card i,
html[data-theme="dark"] .trusted-card span{
color:#e2e8f0;
}

html[data-theme="dark"] .trusted-card:hover i,
html[data-theme="dark"] .trusted-card:hover span{
color:#93c5fd;
}

/* MOBILE */
@media(max-width:991px){

.trusted-head h2{
font-size:36px;
}

.trusted-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:600px){

.trusted-section{
padding:75px 16px;
}

.trusted-head h2{
font-size:30px;
}

.trusted-head p{
font-size:16px;
}

.trusted-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.trusted-card{
padding:18px 10px;
}

.trusted-card i{
font-size:24px;
}

}

/* ANIMATION */
@keyframes trustedMove{
100%{
transform:translateX(-50%);
}
}
/* ===== platforms.css ===== */
/* =====================================
   SUPPORTED PLATFORMS
===================================== */

.platforms-section{
position:relative;
overflow:hidden;
padding:95px 20px;
background:
linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .platforms-section{
background:
linear-gradient(180deg,#020617 0%,#0b1220 100%);
}

/* GRID */
.platforms-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:54px 54px;
}

html[data-theme="dark"] .platforms-grid-bg{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.platform-glow{
position:absolute;
border-radius:50%;
filter:blur(95px);
opacity:.45;
}

.platform-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:40px;
left:-70px;
}

.platform-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.platforms-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;

display:grid;
grid-template-columns:1fr 1fr;
gap:55px;
align-items:center;
}

/* LEFT */
.platform-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

html[data-theme="dark"] .platform-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.platforms-left h2{
font-size:50px;
line-height:1.12;
font-weight:900;
color:#111827;
}

html[data-theme="dark"] .platforms-left h2{
color:#fff;
}

.platforms-left p{
margin-top:20px;
font-size:18px;
line-height:1.8;
color:#64748b;
max-width:560px;
}

html[data-theme="dark"] .platforms-left p{
color:#cbd5e1;
}

/* STATS */
.platform-stats{
display:flex;
gap:14px;
margin-top:30px;
flex-wrap:wrap;
}

.stat-box{
padding:18px 20px;
min-width:130px;
border-radius:20px;

background:rgba(255,255,255,.72);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.45);

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

.stat-box strong{
display:block;
font-size:22px;
font-weight:900;
color:#111827;
}

.stat-box span{
font-size:14px;
font-weight:700;
color:#64748b;
}

html[data-theme="dark"] .stat-box{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .stat-box strong{
color:#fff;
}

html[data-theme="dark"] .stat-box span{
color:#cbd5e1;
}

/* RIGHT GRID */
.platforms-right{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.platform-card{
padding:24px 16px;
border-radius:22px;
text-align:center;

background:rgba(255,255,255,.72);
backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.45);
box-shadow:0 18px 35px rgba(0,0,0,.04);

transition:.28s ease;
animation:floatCard 5s ease-in-out infinite;
}

.platform-card:nth-child(2){animation-delay:.2s;}
.platform-card:nth-child(3){animation-delay:.4s;}
.platform-card:nth-child(4){animation-delay:.6s;}
.platform-card:nth-child(5){animation-delay:.8s;}

.platform-card i{
display:block;
font-size:28px;
margin-bottom:12px;
color:#334155;
transition:.25s ease;
}

.platform-card span{
font-size:15px;
font-weight:800;
color:#334155;
}

.platform-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 40px rgba(30,64,175,.08);
}

.platform-card:hover i,
.platform-card:hover span{
color:#1e40af;
}

html[data-theme="dark"] .platform-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .platform-card i,
html[data-theme="dark"] .platform-card span{
color:#e2e8f0;
}

html[data-theme="dark"] .platform-card:hover i,
html[data-theme="dark"] .platform-card:hover span{
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:991px){

.platforms-container{
grid-template-columns:1fr;
gap:40px;
}

.platforms-left h2{
font-size:38px;
}

}

@media(max-width:600px){

.platforms-section{
padding:75px 16px;
}

.platforms-left h2{
font-size:30px;
}

.platforms-left p{
font-size:16px;
}

.platforms-right{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.platform-card{
padding:18px 10px;
}

.platform-card i{
font-size:24px;
}

.stat-box{
flex:1 1 100%;
}

}

/* FLOAT */
@keyframes floatCard{
50%{
transform:translateY(-6px);
}
}
/* ===== animate.css ===== */
/* =====================================
   GLOBAL ANIMATION SYSTEM
===================================== */

/* PERFORMANCE */
html{
scroll-behavior:smooth;
}

/* BASE HIDDEN STATE */
.fade-up,
.fade-left,
.fade-right,
.zoom-in,
.stagger{
opacity:0;
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1);
will-change:transform, opacity;
}

/* TYPES */
.fade-up{
transform:translateY(55px);
}

.fade-left{
transform:translateX(-55px);
}

.fade-right{
transform:translateX(55px);
}

.zoom-in{
transform:scale(.88);
}

.stagger{
transform:translateY(35px);
}

/* ACTIVE */
.in-view{
opacity:1 !important;
transform:none !important;
}

/* STAGGER DELAYS */
.stagger:nth-child(1){transition-delay:.05s;}
.stagger:nth-child(2){transition-delay:.10s;}
.stagger:nth-child(3){transition-delay:.15s;}
.stagger:nth-child(4){transition-delay:.20s;}
.stagger:nth-child(5){transition-delay:.25s;}
.stagger:nth-child(6){transition-delay:.30s;}
.stagger:nth-child(7){transition-delay:.35s;}
.stagger:nth-child(8){transition-delay:.40s;}
.stagger:nth-child(9){transition-delay:.45s;}
.stagger:nth-child(10){transition-delay:.50s;}

/* SECTION TRANSITIONS */
section{
position:relative;
z-index:1;
}

/* REDUCE MOTION */
@media(prefers-reduced-motion:reduce){

.fade-up,
.fade-left,
.fade-right,
.zoom-in,
.stagger{
opacity:1;
transform:none;
transition:none;
}

html{
scroll-behavior:auto;
}

}
/* ===== choose.css ===== */
/* =====================================
   WHY CHOOSE VARASMS (FULL UPGRADED)
===================================== */

.choose-section{
position:relative;
overflow:hidden;
padding:110px 20px;

/* PREMIUM INTERACTIVE BACKGROUND */
background:
radial-gradient(circle at 10% 15%, rgba(30,64,175,.08), transparent 22%),
radial-gradient(circle at 88% 80%, rgba(59,130,246,.10), transparent 24%),
linear-gradient(180deg,#ffffff 0%,#f8fafc 55%,#eef2ff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .choose-section{
background:
radial-gradient(circle at 10% 15%, rgba(59,130,246,.14), transparent 22%),
radial-gradient(circle at 88% 80%, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#0b1220 0%,#020617 55%,#111827 100%);
}

/* MOVING GRID */
.choose-grid-bg{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.06) 1px, transparent 1px);
background-size:34px 34px;
animation:gridFloat 16s linear infinite;
opacity:.55;
}

html[data-theme="dark"] .choose-grid-bg{
background-image:
radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
}

/* LIGHT TRAIL LINES */
.choose-line{
position:absolute;
height:2px;
background:linear-gradient(90deg,transparent,#60a5fa,transparent);
opacity:.45;
animation:lineMove 5s ease-in-out infinite;
}

.choose-line-1{
top:140px;
left:0;
right:0;
}

.choose-line-2{
bottom:120px;
left:0;
right:0;
animation-delay:2s;
}

/* GLOW */
.choose-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.45;
}

.choose-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:40px;
left:-70px;
animation:floatGlow 8s ease-in-out infinite;
}

.choose-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
animation:floatGlow 10s ease-in-out infinite;
}

/* FLOATING TELECOM ICONS */
.choose-signal,
.choose-signal2{
position:absolute;
font-size:34px;
opacity:.12;
z-index:1;
animation:floatSignal 7s ease-in-out infinite;
color:#1e40af;
}

.choose-signal{
top:24%;
right:8%;
}

.choose-signal2{
bottom:18%;
left:7%;
animation-delay:2s;
}

html[data-theme="dark"] .choose-signal,
html[data-theme="dark"] .choose-signal2{
color:#93c5fd;
opacity:.10;
}

/* CONTAINER */
.choose-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.choose-head{
text-align:center;
max-width:760px;
margin:auto;
}

.choose-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

html[data-theme="dark"] .choose-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.choose-head h2{
font-size:48px;
font-weight:900;
color:#111827;
line-height:1.12;
}

html[data-theme="dark"] .choose-head h2{
color:#fff;
}

.choose-head p{
margin-top:18px;
font-size:18px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .choose-head p{
color:#cbd5e1;
}

/* GRID */
.choose-grid{
margin-top:48px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

/* CARD */
.choose-card{
position:relative;
overflow:hidden;
padding:28px 24px;
border-radius:26px;

background:rgba(255,255,255,.75);
backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.45);
box-shadow:0 20px 40px rgba(0,0,0,.04);

cursor:pointer;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}

/* SHINE EFFECT */
.choose-card::before{
content:"";
position:absolute;
top:-120%;
left:-40%;
width:60%;
height:280%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:rotate(22deg);
transition:.65s ease;
pointer-events:none;
}

.choose-card:hover::before{
left:130%;
}

/* BOTTOM BAR */
.choose-card::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:3px;
background:linear-gradient(90deg,#1e40af,#60a5fa);
transition:.35s ease;
}

.choose-card:hover::after{
width:100%;
}

/* HOVER */
.choose-card:hover{
transform:
translateY(-8px)
rotateX(3deg)
rotateY(-3deg);
box-shadow:0 28px 48px rgba(30,64,175,.10);
border-color:rgba(30,64,175,.12);
}

.choose-card i{
font-size:28px;
color:#1e40af;
margin-bottom:16px;
transition:.3s ease;
}

.choose-card:hover i{
transform:scale(1.12) rotate(-6deg);
}

.choose-card h3{
font-size:20px;
font-weight:900;
color:#111827;
margin-bottom:10px;
transition:.25s ease;
}

.choose-card:hover h3{
color:#1e40af;
}

.choose-card p{
font-size:15px;
line-height:1.7;
color:#64748b;
}

/* DARK */
html[data-theme="dark"] .choose-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .choose-card h3{
color:#fff;
}

html[data-theme="dark"] .choose-card p{
color:#cbd5e1;
}

html[data-theme="dark"] .choose-card i{
color:#93c5fd;
}

html[data-theme="dark"] .choose-card:hover h3{
color:#93c5fd;
}

/* SIZES */
.choose-card.large{
grid-column:span 2;
min-height:240px;
}

.choose-card.wide{
grid-column:span 2;
}

/* TABLET */
@media(max-width:991px){

.choose-head h2{
font-size:38px;
}

.choose-grid{
grid-template-columns:repeat(2,1fr);
}

.choose-card.large,
.choose-card.wide{
grid-column:span 2;
}

}

/* MOBILE */
@media(max-width:600px){

.choose-section{
padding:80px 16px;
}

.choose-head h2{
font-size:30px;
}

.choose-head p{
font-size:16px;
}

.choose-grid{
grid-template-columns:1fr;
gap:14px;
}

.choose-card,
.choose-card.large,
.choose-card.wide{
grid-column:span 1;
min-height:auto;
padding:22px 18px;
}

.choose-signal,
.choose-signal2{
display:none;
}

}

/* ANIMATIONS */
@keyframes gridFloat{
100%{
transform:translate(34px,34px);
}
}

@keyframes lineMove{
50%{
opacity:.8;
transform:translateX(20px);
}
}

@keyframes floatGlow{
50%{
transform:translateY(-22px) translateX(18px);
}
}

@keyframes floatSignal{
50%{
transform:translateY(-18px) rotate(8deg);
}
}
/* ===== works.css ===== */
/* =====================================
   HOW IT WORKS (FULL PREMIUM UPGRADED)
===================================== */

.works-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
radial-gradient(circle at top left, rgba(30,64,175,.08), transparent 22%),
radial-gradient(circle at bottom right, rgba(59,130,246,.08), transparent 24%),
linear-gradient(180deg,#eef2ff 0%,#ffffff 55%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .works-section{
background:
radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 22%),
radial-gradient(circle at bottom right, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* GRID */
.works-bg-grid{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.05) 1px, transparent 1px);
background-size:34px 34px;
opacity:.55;
animation:gridMove 16s linear infinite;
}

html[data-theme="dark"] .works-bg-grid{
background-image:
radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
}

/* ROUTE */
.works-route{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%, transparent 0 40%, rgba(96,165,250,.06) 41%, transparent 42%),
radial-gradient(circle at 70% 65%, transparent 0 38%, rgba(30,64,175,.06) 39%, transparent 40%);
}

/* GLOW */
.works-glow{
position:absolute;
border-radius:50%;
filter:blur(95px);
opacity:.4;
}

.works-glow-1{
width:230px;
height:230px;
background:#60a5fa;
top:60px;
left:-70px;
animation:floatGlow 8s ease-in-out infinite;
}

.works-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:50px;
right:-60px;
animation:floatGlow 10s ease-in-out infinite;
}

/* FLOATING OTP */
.otp-float{
position:absolute;
padding:12px 18px;
border-radius:16px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(14px);
color:#1e40af;
z-index:1;
animation:otpFloat 8s ease-in-out infinite;
}

.otp-1{top:18%;left:8%;}
.otp-2{top:34%;right:8%;animation-delay:2s;}
.otp-3{bottom:18%;left:12%;animation-delay:4s;}

html[data-theme="dark"] .otp-float{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#93c5fd;
}

/* CONTAINER */
.works-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.works-head{
text-align:center;
max-width:760px;
margin:auto;
}

.works-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

html[data-theme="dark"] .works-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.works-head h2{
font-size:48px;
font-weight:900;
color:#111827;
line-height:1.12;
}

html[data-theme="dark"] .works-head h2{
color:#fff;
}

.works-head p{
margin-top:18px;
font-size:18px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .works-head p{
color:#cbd5e1;
}

/* METRICS */
.works-metrics{
display:flex;
justify-content:center;
gap:16px;
margin-top:34px;
flex-wrap:wrap;
}

.metric-box{
padding:18px 22px;
border-radius:20px;
text-align:center;
min-width:150px;

background:rgba(255,255,255,.74);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);
box-shadow:0 16px 32px rgba(0,0,0,.04);
}

.metric-box strong{
display:block;
font-size:24px;
font-weight:900;
color:#111827;
}

.metric-box span{
font-size:14px;
font-weight:700;
color:#64748b;
}

html[data-theme="dark"] .metric-box{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .metric-box strong{
color:#fff;
}

html[data-theme="dark"] .metric-box span{
color:#cbd5e1;
}

/* TIMELINE */
.works-timeline{
position:relative;
margin-top:60px;
padding:20px 0;
}

.works-line{
position:absolute;
top:0;
bottom:0;
left:50%;
width:4px;
transform:translateX(-50%);
border-radius:20px;
background:
repeating-linear-gradient(
180deg,
#60a5fa 0 18px,
#1e40af 18px 36px
);
box-shadow:0 0 20px rgba(30,64,175,.20);
animation:linePulse 4s linear infinite;
}

/* STEP */
.work-step{
position:relative;
width:50%;
padding:18px 34px;
margin-bottom:24px;
}

.work-step.left{
left:0;
text-align:right;
}

.work-step.right{
left:50%;
text-align:left;
}

/* NODE */
.step-node{
position:absolute;
top:50%;
width:18px;
height:18px;
border-radius:50%;
background:#1e40af;
box-shadow:0 0 0 8px rgba(30,64,175,.08);
transform:translateY(-50%);
z-index:3;
}

.work-step.left .step-node{
right:-9px;
}

.work-step.right .step-node{
left:-9px;
}

html[data-theme="dark"] .step-node{
background:#93c5fd;
box-shadow:0 0 0 8px rgba(147,197,253,.08);
}

/* CARD */
.step-card{
position:relative;
display:inline-block;
max-width:430px;
padding:26px 24px;
border-radius:24px;

background:rgba(255,255,255,.76);
backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.45);
box-shadow:0 20px 40px rgba(0,0,0,.05);

overflow:hidden;
transition:.32s ease;
}

.step-card:hover{
transform:translateY(-8px) scale(1.01);
box-shadow:0 26px 48px rgba(30,64,175,.10);
}

.step-card::before{
content:"";
position:absolute;
top:-120%;
left:-40%;
width:60%;
height:260%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:rotate(22deg);
transition:.7s ease;
}

.step-card:hover::before{
left:130%;
}

html[data-theme="dark"] .step-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* NUMBER */
.step-num{
position:absolute;
top:10px;
right:16px;
font-size:58px;
font-weight:900;
line-height:1;
opacity:.06;
color:#1e40af;
pointer-events:none;
}

html[data-theme="dark"] .step-num{
color:#93c5fd;
opacity:.08;
}

/* ICON */
.step-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;

background:rgba(30,64,175,.08);
color:#1e40af;
font-size:22px;
transition:.3s ease;
}

.step-card:hover .step-icon{
transform:scale(1.08) rotate(-8deg);
}

html[data-theme="dark"] .step-icon{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TEXT */
.step-card h3{
font-size:22px;
font-weight:900;
color:#111827;
margin-bottom:10px;
}

.step-card p{
font-size:15px;
line-height:1.7;
color:#64748b;
}

html[data-theme="dark"] .step-card h3{
color:#fff;
}

html[data-theme="dark"] .step-card p{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:991px){

.works-head h2{
font-size:38px;
}

.works-line{
left:18px;
transform:none;
}

.work-step,
.work-step.left,
.work-step.right{
width:100%;
left:0;
padding:0 0 0 52px;
text-align:left;
margin-bottom:18px;
}

.step-card{
display:block;
max-width:100%;
}

.work-step .step-node{
left:9px !important;
right:auto !important;
}

.otp-float{
display:none;
}

}

@media(max-width:600px){

.works-section{
padding:80px 16px;
}

.works-head h2{
font-size:30px;
}

.works-head p{
font-size:16px;
}

.step-card{
padding:22px 18px;
}

.step-card h3{
font-size:20px;
}

.metric-box{
flex:1 1 100%;
}

.step-num{
font-size:46px;
}

}

/* ANIMATIONS */
@keyframes gridMove{
100%{
transform:translate(34px,34px);
}
}

@keyframes otpFloat{
50%{
transform:translateY(-16px);
}
}

@keyframes linePulse{
50%{
filter:brightness(1.2);
}
}

@keyframes floatGlow{
50%{
transform:translateY(-20px) translateX(14px);
}
}
/* ===== features.css ===== */
/* =====================================
   FEATURES PREMIUM V2
===================================== */

.features-section{
position:relative;
overflow:hidden;
padding:115px 20px;
background:
radial-gradient(circle at top right, rgba(30,64,175,.08), transparent 24%),
radial-gradient(circle at bottom left, rgba(59,130,246,.10), transparent 28%),
linear-gradient(180deg,#ffffff 0%,#f8fafc 50%,#eef2ff 100%);
}

html[data-theme="dark"] .features-section{
background:
radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 24%),
radial-gradient(circle at bottom left, rgba(96,165,250,.10), transparent 28%),
linear-gradient(180deg,#020617 0%,#0b1220 50%,#111827 100%);
}

.features-grid-bg{
position:absolute;
inset:0;
background-image:radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.5;
animation:gridMove 16s linear infinite;
}

.features-wave{
position:absolute;
top:0;
left:0;
right:0;
height:160px;
background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);
}

html[data-theme="dark"] .features-wave{
background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}

.features-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.4;
}

.features-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:50px;
right:-70px;
}

.features-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:20px;
left:-70px;
}

.features-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* LEFT */
.features-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

.features-left h2{
font-size:52px;
font-weight:900;
line-height:1.08;
color:#111827;
}

.features-left p{
margin-top:22px;
font-size:18px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .features-left h2{color:#fff;}
html[data-theme="dark"] .features-left p{color:#cbd5e1;}
html[data-theme="dark"] .features-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.features-points{
margin-top:28px;
display:grid;
gap:14px;
}

.point{
padding:15px 18px;
border-radius:18px;
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);
font-weight:800;
display:flex;
gap:12px;
align-items:center;
}

.point i{color:#1e40af;}

html[data-theme="dark"] .point{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

html[data-theme="dark"] .point i{color:#93c5fd;}

.feature-actions{
display:flex;
gap:14px;
margin-top:30px;
flex-wrap:wrap;
}

.feature-btn{
padding:15px 24px;
border-radius:16px;
font-weight:800;
text-decoration:none;
}

.primary-btn{
background:#1e40af;
color:#fff;
}

.secondary-btn{
background:#fff;
color:#111827;
border:1px solid rgba(0,0,0,.06);
}

html[data-theme="dark"] .secondary-btn{
background:#111827;
color:#fff;
border:1px solid rgba(255,255,255,.05);
}

/* RIGHT */
.live-box{
padding:24px;
border-radius:28px;
background:rgba(255,255,255,.76);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);
box-shadow:0 24px 44px rgba(0,0,0,.05);
}

html[data-theme="dark"] .live-box{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.live-top{
display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
margin-bottom:18px;
flex-wrap:wrap;
}

.live-status{
font-weight:900;
display:flex;
align-items:center;
gap:10px;
color:#111827;
}

html[data-theme="dark"] .live-status{color:#fff;}

.live-dot{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
box-shadow:0 0 0 6px rgba(16,185,129,.12);
animation:pulse 1.8s infinite;
}

#serviceSearch{
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
outline:none;
min-width:220px;
}

.live-list{
display:grid;
gap:12px;
max-height:520px;
overflow:auto;
padding-right:4px;
}

.live-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:16px;
border-radius:18px;
background:rgba(248,250,252,.9);
transition:.25s ease;
}

.live-item:hover{
transform:translateY(-3px);
box-shadow:0 16px 28px rgba(30,64,175,.08);
}

html[data-theme="dark"] .live-item{
background:rgba(2,6,23,.7);
}

.srv-left{
display:flex;
align-items:center;
gap:14px;
}

.srv-icon{
width:44px;
height:44px;
border-radius:14px;
object-fit:cover;
}

.srv-icon.fallback{
display:flex;
align-items:center;
justify-content:center;
background:#e0e7ff;
color:#1e40af;
}

.srv-meta strong{
display:block;
font-size:15px;
color:#111827;
}

.srv-meta span{
font-size:13px;
color:#64748b;
}

html[data-theme="dark"] .srv-meta strong{color:#fff;}
html[data-theme="dark"] .srv-meta span{color:#cbd5e1;}

.buy-btn{
padding:11px 18px;
border-radius:14px;
background:#1e40af;
color:#fff;
text-decoration:none;
font-weight:800;
white-space:nowrap;
}

.buy-btn:hover{
transform:translateY(-2px);
}

/* MOBILE */
@media(max-width:991px){

.features-container{
grid-template-columns:1fr;
gap:42px;
}

.features-left h2{
font-size:38px;
}

}

@media(max-width:600px){

.features-section{
padding:80px 16px;
}

.features-left h2{
font-size:30px;
}

.features-left p{
font-size:16px;
}

.live-item{
flex-direction:column;
align-items:flex-start;
}

.buy-btn{
width:100%;
text-align:center;
}

#serviceSearch{
width:100%;
min-width:100%;
}

}

/* ANIMATIONS */
@keyframes pulse{
50%{transform:scale(1.15);}
}

@keyframes gridMove{
100%{transform:translate(34px,34px);}
}

/* =====================================
   INVENTORY BOX UPGRADE
===================================== */

/* TABS */
.inventory-tabs{
display:flex;
gap:10px;
margin-bottom:16px;
flex-wrap:wrap;
}

.inv-tab{
border:none;
padding:10px 14px;
border-radius:100px;
font-weight:800;
cursor:pointer;
background:#eef2ff;
color:#1e40af;
transition:.25s ease;
}

.inv-tab.active,
.inv-tab:hover{
background:#1e40af;
color:#fff;
}

html[data-theme="dark"] .inv-tab{
background:#111827;
color:#93c5fd;
}

html[data-theme="dark"] .inv-tab.active{
background:#1e40af;
color:#fff;
}

/* ITEM */
.live-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:16px;
border-radius:18px;
background:rgba(248,250,252,.9);
transition:.25s ease;
}

.live-item:hover{
transform:translateY(-4px);
box-shadow:0 16px 28px rgba(30,64,175,.08);
}

html[data-theme="dark"] .live-item{
background:rgba(2,6,23,.72);
}

/* LEFT */
.srv-left{
display:flex;
align-items:center;
gap:14px;
}

/* LOGO */
.srv-logo{
width:46px;
height:46px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:#fff;
font-weight:900;
}

.telegram{background:#229ED9;}
.google{background:#ea4335;}
.tiktok{background:#111;}
.whatsapp{background:#25D366;}
.binance{background:#f59e0b;}
.facebook{background:#1877f2;}
.instagram{background:#d946ef;}
.discord{background:#5865F2;}
.amazon{background:#111827;}
.paypal{background:#2563eb;}
.uber{background:#111;}
.netflix{background:#e50914;}

/* RIGHT */
.srv-right{
display:flex;
align-items:center;
gap:10px;
}

/* BADGES */
.badge{
padding:8px 10px;
border-radius:100px;
font-size:11px;
font-weight:900;
letter-spacing:.4px;
}

.badge.popular{
background:#dbeafe;
color:#1d4ed8;
}

.badge.hot{
background:#fee2e2;
color:#dc2626;
}

.badge.new{
background:#dcfce7;
color:#16a34a;
}

/* MOBILE */
@media(max-width:600px){

.live-item{
flex-direction:column;
align-items:flex-start;
}

.srv-right{
width:100%;
justify-content:space-between;
}

.inventory-tabs{
overflow:auto;
flex-wrap:nowrap;
padding-bottom:6px;
}

}

/* =====================================
   PURCHASE POPUP
===================================== */

.purchase-popup{
position:fixed;
left:22px;
bottom:22px;
z-index:9999;

display:flex;
align-items:center;
gap:14px;

padding:16px 18px;
min-width:310px;
max-width:360px;

border-radius:22px;

background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 22px 44px rgba(0,0,0,.08);

opacity:0;
visibility:hidden;
transform:translateY(30px) scale(.95);

transition:.45s ease;
}

.purchase-popup.show{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
}

html[data-theme="dark"] .purchase-popup{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.popup-icon{
width:48px;
height:48px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;

background:rgba(16,185,129,.12);
color:#10b981;
flex-shrink:0;
}

.popup-text strong{
display:block;
font-size:15px;
font-weight:900;
color:#111827;
}

.popup-text span{
display:block;
font-size:13px;
margin-top:2px;
color:#64748b;
}

.popup-text small{
display:block;
margin-top:6px;
font-size:12px;
font-weight:700;
color:#10b981;
}

html[data-theme="dark"] .popup-text strong{
color:#fff;
}

html[data-theme="dark"] .popup-text span{
color:#cbd5e1;
}

/* MOBILE */
@media(max-width:600px){

.purchase-popup{
left:12px;
right:12px;
bottom:12px;
min-width:auto;
max-width:none;
padding:14px;
}

.popup-icon{
width:42px;
height:42px;
font-size:18px;
}

}
/* ===== testimonials.css ===== */
/* =====================================
   TESTIMONIALS PREMIUM UPGRADE
===================================== */

.testimonials-section{
position:relative;
overflow:hidden;
padding:115px 20px;

background:
radial-gradient(circle at top left, rgba(30,64,175,.08), transparent 22%),
radial-gradient(circle at bottom right, rgba(59,130,246,.10), transparent 28%),
linear-gradient(180deg,#f8fafc 0%,#ffffff 55%,#eef2ff 100%);
}

html[data-theme="dark"] .testimonials-section{
background:
radial-gradient(circle at top left, rgba(59,130,246,.14), transparent 22%),
radial-gradient(circle at bottom right, rgba(96,165,250,.10), transparent 28%),
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG GRID */
.testi-bg-grid{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.5;
animation:gridMove 16s linear infinite;
}

html[data-theme="dark"] .testi-bg-grid{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* FLOAT QUOTES */
.quote-float{
position:absolute;
font-size:180px;
font-weight:900;
line-height:1;
opacity:.04;
color:#1e40af;
z-index:1;
animation:floatQuote 8s ease-in-out infinite;
}

.quote-1{
top:60px;
left:40px;
}

.quote-2{
right:40px;
bottom:80px;
animation-delay:2s;
}

html[data-theme="dark"] .quote-float{
color:#93c5fd;
opacity:.05;
}

/* GLOW */
.testi-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.45;
}

.testi-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:40px;
left:-70px;
}

.testi-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:20px;
right:-70px;
}

/* CONTAINER */
.testimonials-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.testimonials-head{
text-align:center;
max-width:760px;
margin:auto;
}

.testi-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

html[data-theme="dark"] .testi-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.testimonials-head h2{
font-size:48px;
font-weight:900;
color:#111827;
}

html[data-theme="dark"] .testimonials-head h2{
color:#fff;
}

.testimonials-head p{
margin-top:18px;
font-size:18px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .testimonials-head p{
color:#cbd5e1;
}

/* SLIDER */
.review-slider-wrap{
margin-top:46px;
overflow:hidden;
mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.review-slider{
display:flex;
gap:18px;
width:max-content;
animation:slideReviews 30s linear infinite;
}

/* CARD */
.review-card{
min-width:340px;
max-width:340px;
padding:26px 24px;
border-radius:26px;

background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 18px 36px rgba(0,0,0,.04);
transition:.28s ease;
}

.review-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 40px rgba(30,64,175,.08);
}

html[data-theme="dark"] .review-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* TOP */
.review-top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:16px;
}

.avatar{
width:48px;
height:48px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:900;
background:#1e40af;
color:#fff;
}

.review-top strong{
display:block;
font-size:16px;
color:#111827;
}

.review-top span{
font-size:13px;
color:#64748b;
}

html[data-theme="dark"] .review-top strong{color:#fff;}
html[data-theme="dark"] .review-top span{color:#cbd5e1;}

.stars{
font-size:18px;
letter-spacing:2px;
color:#f59e0b;
margin-bottom:14px;
}

.review-card p{
font-size:15px;
line-height:1.8;
color:#475569;
}

html[data-theme="dark"] .review-card p{
color:#cbd5e1;
}

/* MOBILE */
@media(max-width:600px){

.testimonials-section{
padding:80px 16px;
}

.testimonials-head h2{
font-size:30px;
}

.testimonials-head p{
font-size:16px;
}

.review-card{
min-width:290px;
max-width:290px;
padding:22px 18px;
}

.quote-float{
display:none;
}

}

/* ANIMATIONS */
@keyframes slideReviews{
100%{
transform:translateX(-50%);
}
}

@keyframes gridMove{
100%{
transform:translate(34px,34px);
}
}

@keyframes floatQuote{
50%{
transform:translateY(-18px);
}
}




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

.faq-section{
position:relative;
overflow:hidden;
padding:115px 20px;

background:
radial-gradient(circle at top right, rgba(30,64,175,.08), transparent 24%),
radial-gradient(circle at bottom left, rgba(59,130,246,.10), transparent 28%),
linear-gradient(180deg,#ffffff 0%,#f8fafc 55%,#eef2ff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .faq-section{
background:
radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 24%),
radial-gradient(circle at bottom left, rgba(96,165,250,.10), transparent 28%),
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG */
.faq-grid-bg{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.5;
animation:gridMove 16s linear infinite;
}

html[data-theme="dark"] .faq-grid-bg{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

.faq-glow,
.faq-ring{
position:absolute;
border-radius:50%;
}

.faq-glow{
filter:blur(100px);
opacity:.45;
}

.faq-glow-1{
width:230px;
height:230px;
background:#60a5fa;
top:60px;
left:-70px;
}

.faq-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

.faq-ring{
border:1px solid rgba(30,64,175,.08);
}

.faq-ring-1{
width:260px;
height:260px;
top:120px;
right:10%;
}

.faq-ring-2{
width:180px;
height:180px;
bottom:80px;
left:8%;
}

/* CONTAINER */
.faq-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
display:grid;
grid-template-columns:420px 1fr;
gap:60px;
align-items:start;
}

/* LEFT */
.faq-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:18px;
}

html[data-theme="dark"] .faq-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.faq-left h2{
font-size:48px;
font-weight:900;
line-height:1.08;
color:#111827;
}

.faq-left p{
margin-top:18px;
font-size:18px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .faq-left h2{color:#fff;}
html[data-theme="dark"] .faq-left p{color:#cbd5e1;}

.faq-help-card{
margin-top:30px;
padding:22px;
border-radius:24px;

display:flex;
gap:16px;
align-items:center;

background:rgba(255,255,255,.76);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
}

html[data-theme="dark"] .faq-help-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
}

.help-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
background:#1e40af;
color:#fff;
flex-shrink:0;
}

.faq-help-card strong{
display:block;
font-size:16px;
color:#111827;
}

.faq-help-card span{
display:block;
font-size:14px;
margin-top:4px;
color:#64748b;
}

html[data-theme="dark"] .faq-help-card strong{color:#fff;}
html[data-theme="dark"] .faq-help-card span{color:#cbd5e1;}

/* RIGHT */
.faq-search{
display:flex;
align-items:center;
gap:12px;
padding:16px 18px;
border-radius:20px;

background:rgba(255,255,255,.76);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

margin-bottom:18px;
}

html[data-theme="dark"] .faq-search{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
}

.faq-search i{
color:#1e40af;
}

.faq-search input{
border:none;
outline:none;
background:transparent;
width:100%;
font-size:15px;
}

html[data-theme="dark"] .faq-search input{
color:#fff;
}

/* LIST */
.faq-list{
display:grid;
gap:14px;
}

.faq-item{
border-radius:24px;
overflow:hidden;

background:rgba(255,255,255,.76);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
}

html[data-theme="dark"] .faq-item{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
}

.faq-question{
width:100%;
border:none;
background:none;
padding:22px 24px;
cursor:pointer;

display:flex;
align-items:center;
justify-content:space-between;
gap:16px;

font-size:16px;
font-weight:800;
text-align:left;
color:#111827;
}

html[data-theme="dark"] .faq-question{
color:#fff;
}

.faq-question i{
transition:.3s ease;
color:#1e40af;
}

html[data-theme="dark"] .faq-question i{
color:#93c5fd;
}

.faq-answer{
max-height:0;
overflow:hidden;
padding:0 24px;
font-size:15px;
line-height:1.8;
color:#64748b;
transition:.35s ease;
}

html[data-theme="dark"] .faq-answer{
color:#cbd5e1;
}

.faq-item.active .faq-answer{
max-height:220px;
padding:0 24px 22px;
}

.faq-item.active .faq-question i{
transform:rotate(45deg);
}

/* MOBILE */
@media(max-width:991px){

.faq-container{
grid-template-columns:1fr;
gap:40px;
}

.faq-left h2{
font-size:38px;
}

}

@media(max-width:600px){

.faq-section{
padding:80px 16px;
}

.faq-left h2{
font-size:30px;
}

.faq-left p{
font-size:16px;
}

.faq-question{
padding:18px;
font-size:15px;
}

.faq-answer{
padding:0 18px;
}

.faq-item.active .faq-answer{
padding:0 18px 18px;
}

}

/* ANIM */
@keyframes gridMove{
100%{
transform:translate(34px,34px);
}
}





/* =====================================
   CTA PREMIUM V2
===================================== */

.cta-section{
position:relative;
overflow:hidden;
padding:120px 20px;
background:
linear-gradient(180deg,#1e40af 0%,#1d4ed8 35%,#0f172a 100%);
}

html[data-theme="dark"] .cta-section{
background:
linear-gradient(180deg,#0b1220 0%,#111827 35%,#020617 100%);
}

/* BG */
.cta-grid-bg{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
background-size:34px 34px;
opacity:.45;
animation:gridMove 18s linear infinite;
}

.cta-beam{
position:absolute;
top:-120px;
left:50%;
transform:translateX(-50%);
width:520px;
height:520px;
border-radius:50%;
background:rgba(255,255,255,.10);
filter:blur(90px);
}

.cta-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.45;
}

.cta-glow-1{
width:280px;
height:280px;
background:#60a5fa;
top:40px;
left:-90px;
}

.cta-glow-2{
width:260px;
height:260px;
background:#2563eb;
bottom:20px;
right:-80px;
}

/* CONTAINER */
.cta-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* CARD */
.cta-card{
position:relative;
max-width:980px;
margin:auto;
text-align:center;

padding:70px 40px;
border-radius:34px;

background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(20px);

box-shadow:0 30px 80px rgba(0,0,0,.18);
}

/* MINI */
.cta-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:20px;
background:rgba(255,255,255,.12);
color:#fff;
}

/* TITLE */
.cta-card h2{
font-size:58px;
line-height:1.08;
font-weight:900;
color:#fff;
max-width:780px;
margin:auto;
}

#typingWord{
display:block;
margin-top:8px;
color:#93c5fd;
}

/* TEXT */
.cta-card p{
margin:22px auto 0;
max-width:720px;
font-size:18px;
line-height:1.8;
color:rgba(255,255,255,.84);
}

/* PLATFORM ROW */
.cta-platforms{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.cta-platforms span{
padding:10px 14px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.08);
color:#fff;
}

/* BUTTONS */
.cta-actions{
display:flex;
justify-content:center;
gap:16px;
margin-top:34px;
flex-wrap:wrap;
}

.cta-main-btn,
.cta-second-btn{
padding:16px 28px;
border-radius:18px;
font-weight:900;
text-decoration:none;
position:relative;
overflow:hidden;
transition:.25s ease;
}

.cta-main-btn{
background:#fff;
color:#1e40af;
}

.cta-main-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
transform:skewX(-22deg);
animation:shine 3s infinite;
}

.cta-second-btn{
background:rgba(255,255,255,.10);
color:#fff;
border:1px solid rgba(255,255,255,.14);
}

.cta-main-btn:hover,
.cta-second-btn:hover{
transform:translateY(-3px);
}

/* LIVE PROOF */
.cta-live-proof{
margin-top:24px;
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:100px;
background:rgba(255,255,255,.08);
color:#fff;
font-size:14px;
font-weight:800;
}

.live-dot{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
box-shadow:0 0 0 6px rgba(16,185,129,.12);
animation:pulse 1.8s infinite;
}

/* DASHBOARD */
.cta-dashboard{
margin:30px auto 0;
max-width:420px;
padding:20px;
border-radius:24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
text-align:left;
}

.dash-row{
display:flex;
justify-content:space-between;
padding:10px 0;
color:#fff;
font-size:14px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.dash-row:last-child{
border-bottom:none;
}

.green{
color:#34d399;
}

/* BADGES */
.cta-badge{
position:absolute;
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.10);
color:#fff;
border:1px solid rgba(255,255,255,.12);
animation:floatBadge 7s ease-in-out infinite;
}

.badge-1{top:28px;left:28px;}
.badge-2{top:28px;right:28px;animation-delay:1s;}
.badge-3{bottom:28px;left:50%;transform:translateX(-50%);animation-delay:2s;}

/* MOBILE */
@media(max-width:991px){
.cta-card h2{font-size:44px;}
}

@media(max-width:600px){

.cta-section{
padding:85px 16px;
}

.cta-card{
padding:34px 20px;
border-radius:26px;
}

.cta-card h2{
font-size:30px;
}

.cta-card p{
font-size:16px;
}

.cta-actions{
flex-direction:column;
}

.cta-main-btn,
.cta-second-btn{
width:100%;
}

.cta-badge{
display:none;
}

}

/* ANIMATION */
@keyframes shine{
100%{left:140%;}
}

@keyframes pulse{
50%{transform:scale(1.15);}
}

@keyframes floatBadge{
50%{transform:translateY(-12px);}
}

@keyframes gridMove{
100%{transform:translate(34px,34px);}
}


/* =====================================
  COOKIE-MOVE TO TOP
===================================== */
/* =====================================
   COOKIE POPUP
===================================== */

.cookie-popup{
position:fixed;
left:24px;
bottom:24px;
z-index:99999;

width:380px;
max-width:calc(100% - 24px);

display:flex;
gap:16px;
align-items:flex-start;

padding:22px;
border-radius:28px;

background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(22px);

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

opacity:0;
visibility:hidden;
transform:translateY(30px) scale(.96);
transition:.45s ease;
}

.cookie-popup.show{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
}

html[data-theme="dark"] .cookie-popup{
background:rgba(15,23,42,.86);
border:1px solid rgba(255,255,255,.04);
box-shadow:0 25px 60px rgba(0,0,0,.35);
}

/* ICON */
.cookie-icon{
width:56px;
height:56px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
flex-shrink:0;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .cookie-icon{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TEXT */
.cookie-content h3{
font-size:18px;
font-weight:900;
margin-bottom:8px;
color:#111827;
}

.cookie-content p{
font-size:14px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .cookie-content h3{
color:#fff;
}

html[data-theme="dark"] .cookie-content p{
color:#cbd5e1;
}

/* BUTTONS */
.cookie-actions{
display:flex;
gap:12px;
margin-top:18px;
flex-wrap:wrap;
}

.cookie-btn{
border:none;
padding:13px 18px;
border-radius:16px;
font-weight:800;
cursor:pointer;
transition:.25s ease;
}

.accept-btn{
background:#1e40af;
color:#fff;
}

.decline-btn{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .decline-btn{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.cookie-btn:hover{
transform:translateY(-2px);
}

/* =====================================
   BACK TO TOP
===================================== */

.back-top{
position:fixed;
right:24px;
bottom:24px;
z-index:9999;

width:56px;
height:56px;
border:none;
border-radius:18px;
cursor:pointer;

display:flex;
align-items:center;
justify-content:center;
font-size:18px;

background:#1e40af;
color:#fff;

box-shadow:0 20px 40px rgba(30,64,175,.22);

opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:.35s ease;
}

.back-top.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.back-top:hover{
transform:translateY(-4px);
}

html[data-theme="dark"] .back-top{
background:#2563eb;
}

/* MOBILE */
@media(max-width:600px){

.cookie-popup{
left:12px;
right:12px;
bottom:12px;
width:auto;
padding:18px;
border-radius:22px;
gap:14px;
}

.cookie-icon{
width:48px;
height:48px;
font-size:18px;
}

.cookie-actions{
flex-direction:column;
}

.cookie-btn{
width:100%;
}

.back-top{
right:12px;
bottom:12px;
width:50px;
height:50px;
border-radius:16px;
}

}
/* ===== about.css ===== */
/* =====================================
   ABOUT HERO PREMIUM V2
===================================== */

.about-hero-section{
position:relative;
overflow:hidden;
padding:170px 20px 95px;

background:
radial-gradient(circle at 12% 20%, rgba(96,165,250,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(30,64,175,.14), transparent 24%),
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
}

html[data-theme="dark"] .about-hero-section{
background:
radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* GRID */
.about-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);
background-size:56px 56px;
animation:gridMove 18s linear infinite;
opacity:.65;
}

html[data-theme="dark"] .about-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* GLOW */
.about-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.55;
animation:floatGlow 8s ease-in-out infinite;
}

.about-glow-1{
width:260px;
height:260px;
background:#60a5fa;
top:70px;
left:-70px;
}

.about-glow-2{
width:240px;
height:240px;
background:#1e40af;
right:-70px;
top:220px;
animation-delay:2s;
}

/* CONTAINER */
.about-hero-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:5;
}

.about-hero-wrap{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:40px;
align-items:center;
}

/* LEFT */
.about-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:100px;
font-size:14px;
font-weight:800;
margin-bottom:24px;

background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);
}

.badge-dot{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
}

html[data-theme="dark"] .about-badge{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

.about-title{
font-size:64px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.4px;
color:#111827;
}

.about-title span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .about-title{
color:#fff;
}

html[data-theme="dark"] .about-title span{
color:#93c5fd;
}

.about-subtitle{
margin-top:22px;
font-size:20px;
line-height:1.8;
color:#64748b;
max-width:640px;
}

html[data-theme="dark"] .about-subtitle{
color:#cbd5e1;
}

/* VALUES */
.about-values{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.about-values span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;

background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
}

html[data-theme="dark"] .about-values span{
background:rgba(15,23,42,.75);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* BUTTONS */
.about-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:30px;
}

.about-btn{
padding:16px 26px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
}

.primary-btn{
background:#1e40af;
color:#fff;
}

.secondary-btn{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .secondary-btn{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.about-btn:hover{
transform:translateY(-3px);
}

/* RIGHT */
.about-card{
position:relative;
padding:28px;
border-radius:34px;

background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);

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

html[data-theme="dark"] .about-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

/* FLOAT */
.about-float{
position:absolute;
padding:12px 16px;
border-radius:18px;
font-size:13px;
font-weight:800;

background:#fff;
color:#111827;
box-shadow:0 18px 34px rgba(0,0,0,.08);
animation:floatGlow 6s ease-in-out infinite;
}

.about-float.one{
top:-14px;
left:-16px;
}

.about-float.two{
bottom:-14px;
right:-16px;
animation-delay:1.5s;
}

html[data-theme="dark"] .about-float{
background:#111827;
color:#fff;
box-shadow:none;
}

/* STATS GRID */
.about-stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.about-stat{
padding:24px 18px;
border-radius:24px;
text-align:center;

background:rgba(248,250,252,.85);
}

.about-stat strong{
display:block;
font-size:30px;
font-weight:900;
color:#1e40af;
}

.about-stat span{
display:block;
margin-top:6px;
font-size:14px;
font-weight:800;
color:#64748b;
}

html[data-theme="dark"] .about-stat{
background:#111827;
}

html[data-theme="dark"] .about-stat strong{
color:#93c5fd;
}

html[data-theme="dark"] .about-stat span{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:991px){

.about-hero-wrap{
grid-template-columns:1fr;
gap:30px;
}

.about-title{
font-size:48px;
}

.about-subtitle{
font-size:18px;
}

}

@media(max-width:600px){

.about-hero-section{
padding:150px 16px 70px;
}

.about-title{
font-size:34px;
}

.about-subtitle{
font-size:16px;
}

.about-actions{
flex-direction:column;
}

.about-btn{
width:100%;
text-align:center;
}

.about-stats-grid{
grid-template-columns:1fr 1fr;
gap:12px;
}

.about-float{
display:none;
}

}


@media(max-width:991px){
    .about-left{
        text-align:center;
    }

    .about-badge{
        justify-content:center;
    }

    .about-subtitle{
        margin-left:auto;
        margin-right:auto;
    }

    .about-values{
        justify-content:center;
    }

    .about-actions{
        justify-content:center;
    }
}
/* ANIM */
@keyframes gridMove{
100%{transform:translate(56px,56px);}
}

@keyframes floatGlow{
50%{transform:translateY(-14px);}
}


/* =====================================
   WHO WE ARE
===================================== */

.who-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .who-section{
background:
linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.who-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
}

html[data-theme="dark"] .who-grid-bg{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

.who-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.45;
}

.who-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:50px;
left:-70px;
}

.who-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.who-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

.who-wrap{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:48px;
align-items:center;
}

/* LEFT */
.who-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .who-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.who-left h2{
font-size:54px;
line-height:1.05;
font-weight:900;
color:#111827;
}

.who-left h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .who-left h2{
color:#fff;
}

html[data-theme="dark"] .who-left h2 span{
color:#93c5fd;
}

.who-left p{
margin-top:22px;
font-size:18px;
line-height:1.85;
color:#64748b;
max-width:640px;
}

html[data-theme="dark"] .who-left p{
color:#cbd5e1;
}

/* POINTS */
.who-points{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-top:32px;
}

.who-point{
padding:16px 18px;
border-radius:18px;
font-size:14px;
font-weight:800;

display:flex;
align-items:center;
gap:12px;

background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.45);
box-shadow:0 14px 28px rgba(0,0,0,.04);
}

.who-point i{
color:#1e40af;
}

html[data-theme="dark"] .who-point{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
box-shadow:none;
}

html[data-theme="dark"] .who-point i{
color:#93c5fd;
}

/* RIGHT */
.who-card{
position:relative;
padding:28px;
border-radius:34px;

background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

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

html[data-theme="dark"] .who-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

/* FLOAT */
.who-float{
position:absolute;
padding:12px 16px;
border-radius:18px;
font-size:13px;
font-weight:800;

background:#fff;
color:#111827;
box-shadow:0 18px 34px rgba(0,0,0,.08);
animation:floatWho 6s ease-in-out infinite;
}

.who-float.one{
top:-14px;
left:-16px;
}

.who-float.two{
bottom:-14px;
right:-16px;
animation-delay:1.5s;
}

html[data-theme="dark"] .who-float{
background:#111827;
color:#fff;
box-shadow:none;
}

/* GRID */
.who-box-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.who-box{
padding:24px 18px;
border-radius:24px;
text-align:center;
background:#f8fafc;
}

.who-box.large{
grid-column:span 2;
text-align:left;
}

.who-box.wide{
grid-column:span 2;
text-align:left;
}

.who-box strong{
display:block;
font-size:28px;
font-weight:900;
color:#1e40af;
}

.who-box span{
display:block;
margin-top:8px;
font-size:14px;
font-weight:700;
line-height:1.7;
color:#64748b;
}

html[data-theme="dark"] .who-box{
background:#111827;
}

html[data-theme="dark"] .who-box strong{
color:#93c5fd;
}

html[data-theme="dark"] .who-box span{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:991px){

.who-wrap{
grid-template-columns:1fr;
gap:32px;
}

.who-left h2{
font-size:42px;
}

.who-left p{
font-size:17px;
}

}

@media(max-width:600px){

.who-section{
padding:80px 16px;
}

.who-left h2{
font-size:32px;
}

.who-left p{
font-size:16px;
}

.who-points{
grid-template-columns:1fr;
}

.who-box-grid{
grid-template-columns:1fr;
gap:12px;
}

.who-box,
.who-box.large,
.who-box.wide{
grid-column:span 1;
text-align:center;
}

.who-float{
display:none;
}

}

/* ANIM */
@keyframes floatWho{
50%{
transform:translateY(-12px);
}
}


/* =====================================
   WHY VARASMS EXISTS
===================================== */

.mission-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(180deg,#eef4ff 0%,#ffffff 55%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .mission-section{
background:
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG */
.mission-grid-bg{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.55;
animation:gridMove 18s linear infinite;
}

html[data-theme="dark"] .mission-grid-bg{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* GLOW */
.mission-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.45;
}

.mission-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:50px;
left:-70px;
}

.mission-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.mission-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.mission-head{
text-align:center;
max-width:820px;
margin:auto;
}

.mission-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .mission-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.mission-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.mission-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .mission-head h2{
color:#fff;
}

html[data-theme="dark"] .mission-head h2 span{
color:#93c5fd;
}

.mission-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .mission-head p{
color:#cbd5e1;
}

/* BODY */
.mission-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:52px;
}

/* CARD */
.mission-card{
padding:34px 28px;
border-radius:30px;

background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 22px 48px rgba(0,0,0,.05);
transition:.28s ease;
}

.mission-card:hover{
transform:translateY(-6px);
}

html[data-theme="dark"] .mission-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* ICON */
.mission-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.mission-icon.red{
background:rgba(239,68,68,.08);
color:#ef4444;
}

.mission-icon.blue{
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .mission-icon.red{
background:rgba(239,68,68,.14);
}

html[data-theme="dark"] .mission-icon.blue{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TEXT */
.mission-card h3{
font-size:28px;
font-weight:900;
color:#111827;
margin-bottom:18px;
}

html[data-theme="dark"] .mission-card h3{
color:#fff;
}

.mission-card ul{
list-style:none;
padding:0;
margin:0;
}

.mission-card li{
padding:14px 0;
font-size:16px;
font-weight:700;
color:#64748b;
border-bottom:1px solid rgba(0,0,0,.05);
}

.mission-card li:last-child{
border-bottom:none;
}

html[data-theme="dark"] .mission-card li{
color:#cbd5e1;
border-bottom:1px solid rgba(255,255,255,.05);
}

/* RESPONSIVE */
@media(max-width:991px){

.mission-head h2{
font-size:42px;
}

.mission-wrap{
grid-template-columns:1fr;
gap:18px;
}

}

@media(max-width:600px){

.mission-section{
padding:80px 16px;
}

.mission-head{
text-align:center;
}

.mission-head h2{
font-size:32px;
line-height:1.08;
}

.mission-head p{
font-size:16px;
line-height:1.75;
}

.mission-card{
padding:26px 20px;
text-align:center;
}

.mission-icon{
margin:0 auto 18px;
}

.mission-card h3{
font-size:24px;
}

.mission-card li{
font-size:15px;
text-align:center;
}

}

/* ANIM */
@keyframes gridMove{
100%{
transform:translate(34px,34px);
}
}

/* =====================================
   CORE VALUES
===================================== */

.values-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .values-section{
background:
linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.values-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
}

html[data-theme="dark"] .values-grid-bg{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

.values-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.values-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:60px;
left:-70px;
}

.values-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.values-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.values-head{
text-align:center;
max-width:820px;
margin:auto;
}

.values-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .values-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.values-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.values-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .values-head h2{
color:#fff;
}

html[data-theme="dark"] .values-head h2 span{
color:#93c5fd;
}

.values-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .values-head p{
color:#cbd5e1;
}

/* GRID */
.values-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:52px;
}

/* CARD */
.value-card{
padding:30px 24px;
border-radius:28px;

background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 22px 48px rgba(0,0,0,.05);
transition:.28s ease;
}

.value-card:hover{
transform:translateY(-6px);
}

html[data-theme="dark"] .value-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* SIZE */
.value-card.large{
grid-column:span 2;
}

.value-card.wide{
grid-column:span 2;
}

/* ICON */
.value-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.value-icon.blue{
background:rgba(30,64,175,.08);
color:#1e40af;
}

.value-icon.green{
background:rgba(16,185,129,.08);
color:#10b981;
}

.value-icon.purple{
background:rgba(139,92,246,.08);
color:#8b5cf6;
}

.value-icon.orange{
background:rgba(249,115,22,.08);
color:#f97316;
}

html[data-theme="dark"] .value-icon.blue{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

html[data-theme="dark"] .value-icon.green{
background:rgba(16,185,129,.14);
}

html[data-theme="dark"] .value-icon.purple{
background:rgba(139,92,246,.14);
}

html[data-theme="dark"] .value-icon.orange{
background:rgba(249,115,22,.14);
}

/* TEXT */
.value-card h3{
font-size:26px;
font-weight:900;
color:#111827;
margin-bottom:12px;
}

.value-card p{
font-size:16px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .value-card h3{
color:#fff;
}

html[data-theme="dark"] .value-card p{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:991px){

.values-head h2{
font-size:42px;
}

.values-grid{
grid-template-columns:repeat(2,1fr);
}

.value-card.large,
.value-card.wide{
grid-column:span 2;
}

}

@media(max-width:600px){

.values-section{
padding:80px 16px;
}

.values-head{
text-align:center;
}

.values-head h2{
font-size:32px;
line-height:1.08;
}

.values-head p{
font-size:16px;
line-height:1.75;
}

.values-grid{
grid-template-columns:1fr;
gap:14px;
}

.value-card,
.value-card.large,
.value-card.wide{
grid-column:span 1;
padding:24px 20px;
text-align:center;
}

.value-icon{
margin:0 auto 18px;
}

.value-card h3{
font-size:22px;
}

.value-card p{
font-size:15px;
}

}

/* =====================================
   WHY USERS CHOOSE VARASMS
===================================== */

.choose-users-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(180deg,#eef4ff 0%,#ffffff 55%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .choose-users-section{
background:
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG */
.choose-users-grid-bg{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.55;
animation:gridMove 18s linear infinite;
}

html[data-theme="dark"] .choose-users-grid-bg{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* GLOW */
.choose-users-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.choose-users-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:50px;
left:-70px;
}

.choose-users-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.choose-users-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.choose-users-head{
text-align:center;
max-width:820px;
margin:auto;
}

.choose-users-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .choose-users-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.choose-users-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.choose-users-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .choose-users-head h2{
color:#fff;
}

html[data-theme="dark"] .choose-users-head h2 span{
color:#93c5fd;
}

.choose-users-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .choose-users-head p{
color:#cbd5e1;
}

/* GRID */
.choose-users-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:52px;
}

/* CARD */
.choose-user-card{
padding:30px 24px;
border-radius:28px;

background:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 22px 48px rgba(0,0,0,.05);
transition:.28s ease;
}

.choose-user-card:hover{
transform:translateY(-6px);
}

html[data-theme="dark"] .choose-user-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* SIZES */
.choose-user-card.large{
grid-column:span 2;
}

.choose-user-card.wide{
grid-column:span 2;
}

/* ICON */
.choose-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.choose-icon.blue{
background:rgba(30,64,175,.08);
color:#1e40af;
}

.choose-icon.green{
background:rgba(16,185,129,.08);
color:#10b981;
}

.choose-icon.purple{
background:rgba(139,92,246,.08);
color:#8b5cf6;
}

.choose-icon.orange{
background:rgba(249,115,22,.08);
color:#f97316;
}

.choose-icon.pink{
background:rgba(236,72,153,.08);
color:#ec4899;
}

html[data-theme="dark"] .choose-icon.blue{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

html[data-theme="dark"] .choose-icon.green{
background:rgba(16,185,129,.14);
}

html[data-theme="dark"] .choose-icon.purple{
background:rgba(139,92,246,.14);
}

html[data-theme="dark"] .choose-icon.orange{
background:rgba(249,115,22,.14);
}

html[data-theme="dark"] .choose-icon.pink{
background:rgba(236,72,153,.14);
}

/* TEXT */
.choose-user-card h3{
font-size:26px;
font-weight:900;
color:#111827;
margin-bottom:12px;
}

.choose-user-card p{
font-size:16px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .choose-user-card h3{
color:#fff;
}

html[data-theme="dark"] .choose-user-card p{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:991px){

.choose-users-head h2{
font-size:42px;
}

.choose-users-grid{
grid-template-columns:repeat(2,1fr);
}

.choose-user-card.large,
.choose-user-card.wide{
grid-column:span 2;
}

}

@media(max-width:600px){

.choose-users-section{
padding:80px 16px;
}

.choose-users-head{
text-align:center;
}

.choose-users-head h2{
font-size:32px;
line-height:1.08;
}

.choose-users-head p{
font-size:16px;
line-height:1.75;
}

.choose-users-grid{
grid-template-columns:1fr;
gap:14px;
}

.choose-user-card,
.choose-user-card.large,
.choose-user-card.wide{
grid-column:span 1;
padding:24px 20px;
text-align:center;
}

.choose-icon{
margin:0 auto 18px;
}

.choose-user-card h3{
font-size:22px;
}

.choose-user-card p{
font-size:15px;
}

}

/* =====================================
   ABOUT CTA SECTION PREMIUM UPGRADE
   Different CTA Background
   Replace ONLY this section CSS
===================================== */

.about-cta-section{
position:relative;
overflow:hidden;
padding:110px 20px 120px;

/* PREMIUM CTA BACKGROUND */
background:
radial-gradient(circle at 15% 20%, rgba(96,165,250,.22), transparent 22%),
radial-gradient(circle at 85% 25%, rgba(30,64,175,.22), transparent 24%),
radial-gradient(circle at 50% 100%, rgba(59,130,246,.14), transparent 34%),
linear-gradient(135deg,#dbeafe 0%,#eff6ff 30%,#ffffff 65%,#eef2ff 100%);

transition:.35s ease;
}

html[data-theme="dark"] .about-cta-section{
background:
radial-gradient(circle at 15% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 85% 25%, rgba(96,165,250,.16), transparent 24%),
radial-gradient(circle at 50% 100%, rgba(30,64,175,.14), transparent 34%),
linear-gradient(135deg,#020617 0%,#081120 35%,#0f172a 70%,#111827 100%);
}

/* =====================================
   ANIMATED GRID
===================================== */

.about-cta-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.045) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.045) 1px, transparent 1px);

background-size:56px 56px;
opacity:.55;
animation:ctaGridMove 18s linear infinite;
}

html[data-theme="dark"] .about-cta-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* =====================================
   EXTRA GLOW
===================================== */

.about-cta-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.50;
animation:ctaFloatGlow 7s ease-in-out infinite;
}

.about-cta-glow-1{
width:280px;
height:280px;
background:#60a5fa;
top:30px;
left:-80px;
}

.about-cta-glow-2{
width:260px;
height:260px;
background:#1e40af;
bottom:20px;
right:-80px;
animation-delay:2s;
}

/* =====================================
   CARD MORE PREMIUM
===================================== */

.about-cta-card{
position:relative;
max-width:980px;
margin:auto;
text-align:center;

padding:74px 40px;
border-radius:38px;

background:
linear-gradient(135deg,
rgba(255,255,255,.90),
rgba(255,255,255,.72));

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

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

box-shadow:
0 40px 90px rgba(30,64,175,.10),
0 18px 40px rgba(0,0,0,.06);

overflow:hidden;
}

/* SHINE */
.about-cta-card::before{
content:"";
position:absolute;
top:0;
left:-140%;
width:45%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent
);

transform:skewX(-22deg);
animation:ctaShine 5s linear infinite;
}

/* BORDER LIGHT */
.about-cta-card::after{
content:"";
position:absolute;
inset:-1px;
border-radius:38px;
padding:1px;
background:linear-gradient(
135deg,
rgba(96,165,250,.35),
rgba(255,255,255,0),
rgba(30,64,175,.22)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}

html[data-theme="dark"] .about-cta-card{
background:
linear-gradient(135deg,
rgba(15,23,42,.90),
rgba(15,23,42,.74));

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

box-shadow:
0 35px 80px rgba(0,0,0,.45),
0 10px 24px rgba(30,64,175,.12);
}

html[data-theme="dark"] .about-cta-card::before{
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.10),
transparent
);
}

/* =====================================
   TITLE STRONGER
===================================== */

.about-cta-card h2{
font-size:60px;
line-height:1.03;
font-weight:900;
color:#0f172a;
letter-spacing:-1.4px;
}

.about-cta-card h2 span{
display:block;
margin-top:8px;
color:#1e40af;
text-shadow:0 10px 28px rgba(30,64,175,.14);
}

html[data-theme="dark"] .about-cta-card h2{
color:#fff;
}

html[data-theme="dark"] .about-cta-card h2 span{
color:#93c5fd;
text-shadow:none;
}

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

.about-cta-btn{
padding:16px 30px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
}

.about-cta-btn:hover{
transform:translateY(-4px) scale(1.02);
}

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

@media(max-width:991px){

.about-cta-card h2{
font-size:46px;
}

}

@media(max-width:600px){

.about-cta-section{
padding:80px 16px 90px;
}

.about-cta-card{
padding:44px 22px;
border-radius:28px;
}

.about-cta-card h2{
font-size:32px;
line-height:1.08;
}

}

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

@keyframes ctaGridMove{
100%{
transform:translate(56px,56px);
}
}

@keyframes ctaFloatGlow{
50%{
transform:translateY(-18px);
}
}

@keyframes ctaShine{
100%{
left:140%;
}
}/* =====================================
   ABOUT CTA SECTION PREMIUM UPGRADED
===================================== */

.about-cta-section{
position:relative;
overflow:hidden;
padding:110px 20px 120px;

/* DIFFERENT CTA BACKGROUND */
background:
radial-gradient(circle at 15% 20%, rgba(96,165,250,.22), transparent 22%),
radial-gradient(circle at 85% 25%, rgba(30,64,175,.22), transparent 24%),
radial-gradient(circle at 50% 100%, rgba(59,130,246,.14), transparent 34%),
linear-gradient(135deg,#dbeafe 0%,#eff6ff 30%,#ffffff 65%,#eef2ff 100%);

transition:.35s ease;
}

html[data-theme="dark"] .about-cta-section{
background:
radial-gradient(circle at 15% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 85% 25%, rgba(96,165,250,.16), transparent 24%),
radial-gradient(circle at 50% 100%, rgba(30,64,175,.14), transparent 34%),
linear-gradient(135deg,#020617 0%,#081120 35%,#0f172a 70%,#111827 100%);
}

/* GRID */
.about-cta-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);

background-size:56px 56px;
opacity:.55;
animation:ctaGridMove 18s linear infinite;
}

html[data-theme="dark"] .about-cta-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* GLOW */
.about-cta-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.48;
animation:ctaGlowFloat 7s ease-in-out infinite;
}

.about-cta-glow-1{
width:280px;
height:280px;
background:#60a5fa;
top:40px;
left:-80px;
}

.about-cta-glow-2{
width:260px;
height:260px;
background:#1e40af;
bottom:20px;
right:-80px;
animation-delay:2s;
}

/* CONTAINER */
.about-cta-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* CARD */
.about-cta-card{
position:relative;
max-width:980px;
margin:auto;
text-align:center;

padding:74px 40px;
border-radius:38px;

background:
linear-gradient(135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.74));

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

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

box-shadow:
0 40px 90px rgba(30,64,175,.10),
0 18px 40px rgba(0,0,0,.06);

overflow:hidden;
}

/* SHINE EFFECT */
.about-cta-card::before{
content:"";
position:absolute;
top:0;
left:-140%;
width:45%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent
);

transform:skewX(-22deg);
animation:ctaShine 5s linear infinite;
}

/* BORDER GLOW */
.about-cta-card::after{
content:"";
position:absolute;
inset:-1px;
border-radius:38px;
padding:1px;

background:linear-gradient(
135deg,
rgba(96,165,250,.35),
rgba(255,255,255,0),
rgba(30,64,175,.22)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

pointer-events:none;
}

html[data-theme="dark"] .about-cta-card{
background:
linear-gradient(135deg,
rgba(15,23,42,.90),
rgba(15,23,42,.74));

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

box-shadow:
0 35px 80px rgba(0,0,0,.45),
0 12px 26px rgba(30,64,175,.12);
}

html[data-theme="dark"] .about-cta-card::before{
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.10),
transparent
);
}

/* FLOAT */
.about-cta-float{
position:absolute;
padding:12px 16px;
border-radius:18px;
font-size:13px;
font-weight:800;

background:#fff;
color:#111827;

box-shadow:0 18px 34px rgba(0,0,0,.08);
animation:floatCTA 6s ease-in-out infinite;
white-space:nowrap;
z-index:5;
}

.about-cta-float.one{
top:24px;
left:24px;
}

.about-cta-float.two{
bottom:24px;
right:24px;
animation-delay:1.6s;
}

html[data-theme="dark"] .about-cta-float{
background:#111827;
color:#fff;
box-shadow:none;
}

/* MINI */
.about-cta-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .about-cta-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TITLE */
.about-cta-card h2{
font-size:60px;
line-height:1.03;
font-weight:900;
letter-spacing:-1.4px;
color:#0f172a;
}

.about-cta-card h2 span{
display:block;
margin-top:8px;
color:#1e40af;
text-shadow:0 10px 28px rgba(30,64,175,.14);
}

html[data-theme="dark"] .about-cta-card h2{
color:#fff;
}

html[data-theme="dark"] .about-cta-card h2 span{
color:#93c5fd;
text-shadow:none;
}

/* TEXT */
.about-cta-card p{
max-width:700px;
margin:22px auto 0;
font-size:19px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .about-cta-card p{
color:#cbd5e1;
}

/* BUTTONS */
.about-cta-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:34px;
}

.about-cta-btn{
padding:16px 30px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
}

.primary-btn{
background:#1e40af;
color:#fff;
box-shadow:0 14px 28px rgba(30,64,175,.20);
}

.secondary-btn{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .secondary-btn{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.about-cta-btn:hover{
transform:translateY(-4px) scale(1.02);
}

/* TRUST */
.about-cta-points{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.about-cta-points span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;

background:rgba(255,255,255,.80);
border:1px solid rgba(255,255,255,.45);
}

html[data-theme="dark"] .about-cta-points span{
background:rgba(17,24,39,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* RESPONSIVE */
@media(max-width:991px){

.about-cta-card h2{
font-size:46px;
}

.about-cta-card p{
font-size:17px;
}

}

@media(max-width:600px){

.about-cta-section{
padding:80px 16px 90px;
}

.about-cta-card{
padding:44px 22px;
border-radius:28px;
}

.about-cta-card h2{
font-size:32px;
line-height:1.08;
}

.about-cta-card p{
font-size:16px;
line-height:1.75;
}

.about-cta-actions{
flex-direction:column;
}

.about-cta-btn{
width:100%;
}

.about-cta-float{
display:none;
}

.about-cta-points{
gap:10px;
}

.about-cta-points span{
width:100%;
text-align:center;
}

}

/* ANIMATION */
@keyframes floatCTA{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}

@keyframes ctaGridMove{
100%{
transform:translate(56px,56px);
}
}

@keyframes ctaGlowFloat{
50%{
transform:translateY(-18px);
}
}

@keyframes ctaShine{
100%{
left:140%;
}
}
/* ===== api-docs.css ===== */
/* =====================================
   API PAGE — FULLY NAMESPACED CSS
   All classes prefixed with vara- or api-
   All keyframes renamed to avoid conflicts
===================================== */

/* =====================================
   API HERO SECTION
===================================== */

.api-hero-section{
position:relative;
overflow:hidden;
padding:170px 20px 95px;

background:
radial-gradient(circle at 12% 20%, rgba(96,165,250,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(30,64,175,.14), transparent 24%),
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .api-hero-section{
background:
radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* GRID */
.api-hero-section .vara-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);
background-size:56px 56px;
animation:varaGridMove 18s linear infinite;
opacity:.65;
}

html[data-theme="dark"] .api-hero-section .vara-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* GLOW */
.api-hero-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.55;
animation:varaFloatGlow 8s ease-in-out infinite;
}

.api-hero-section .vara-glow-1{
width:260px;
height:260px;
background:#60a5fa;
top:70px;
left:-70px;
}

.api-hero-section .vara-glow-2{
width:240px;
height:240px;
background:#1e40af;
right:-70px;
top:220px;
animation-delay:2s;
}

/* CONTAINER */
.api-hero-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:5;
}

.api-hero-wrap{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:42px;
align-items:center;
}

/* LEFT */
.api-hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:100px;
font-size:14px;
font-weight:800;
margin-bottom:24px;
background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);
}

.api-hero-dot{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
flex-shrink:0;
}

html[data-theme="dark"] .api-hero-badge{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

.api-hero-title{
font-size:64px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.4px;
color:#111827;
}

.api-hero-title span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .api-hero-title{
color:#fff;
}

html[data-theme="dark"] .api-hero-title span{
color:#93c5fd;
}

.api-hero-subtitle{
margin-top:22px;
font-size:20px;
line-height:1.8;
color:#64748b;
max-width:640px;
}

html[data-theme="dark"] .api-hero-subtitle{
color:#cbd5e1;
}

/* POINTS */
.api-hero-points{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.api-hero-points span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
}

html[data-theme="dark"] .api-hero-points span{
background:rgba(15,23,42,.75);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* BUTTONS */
.api-hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:30px;
}

.vara-btn{
padding:16px 26px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.vara-btn-primary{
background:#1e40af;
color:#fff;
}

.vara-btn-secondary{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .vara-btn-secondary{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.vara-btn:hover{
transform:translateY(-3px);
}

/* RIGHT — CODE CARD */
.api-code-card{
position:relative;
padding:0;
border-radius:28px;
overflow:hidden;
background:#0f172a;
border:1px solid rgba(255,255,255,.04);
box-shadow:0 30px 70px rgba(0,0,0,.25);
}

/* TOP BAR */
.api-code-topbar{
display:flex;
align-items:center;
gap:8px;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
color:#cbd5e1;
font-size:13px;
}

.api-code-topbar small{
margin-left:auto;
opacity:.8;
}

.vara-circle{
width:10px;
height:10px;
border-radius:50%;
display:inline-block;
flex-shrink:0;
}

.vara-circle-red{background:#ef4444;}
.vara-circle-yellow{background:#f59e0b;}
.vara-circle-green{background:#10b981;}

/* CODE */
.api-code-pre{
margin:0;
padding:24px;
font-size:15px;
line-height:1.8;
color:#93c5fd;
overflow:auto;
}

/* FLOAT TAGS */
.api-code-float{
position:absolute;
padding:10px 14px;
border-radius:14px;
font-size:12px;
font-weight:800;
background:#fff;
color:#111827;
box-shadow:0 16px 30px rgba(0,0,0,.08);
animation:varaFloatGlow 6s ease-in-out infinite;
}

.api-code-float.vara-float-one{
top:-14px;
right:20px;
}

.api-code-float.vara-float-two{
bottom:-14px;
left:20px;
animation-delay:1.5s;
}

/* RESPONSIVE */
@media(max-width:991px){
.api-hero-wrap{
grid-template-columns:1fr;
gap:32px;
}
.api-hero-title{font-size:48px;}
.api-hero-subtitle{font-size:18px;}
}

@media(max-width:600px){
.api-hero-section{padding:150px 16px 70px;}
.api-hero-title{font-size:34px;}
.api-hero-subtitle{font-size:16px;}
.api-hero-actions{flex-direction:column;}
.vara-btn{width:100%;text-align:center;}
.api-code-float{display:none;}
.api-code-pre{font-size:13px;}

/* CENTER LEFT CONTENT ON MOBILE */
.api-left{text-align:center;}
.api-hero-title{text-align:center;margin-left:auto;margin-right:auto;}
.api-hero-subtitle{text-align:center;margin-left:auto;margin-right:auto;max-width:100%;}
.api-hero-badge{margin-left:auto;margin-right:auto;}
.api-hero-points{justify-content:center;}
.api-hero-actions{align-items:center;justify-content:center;}
}


/* =====================================
   API ENDPOINTS SECTION
===================================== */

.api-endpoints-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .api-endpoints-section{
background:linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.api-endpoints-section .vara-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
opacity:.55;
}

html[data-theme="dark"] .api-endpoints-section .vara-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.api-endpoints-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.api-endpoints-section .vara-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:60px;
left:-70px;
}

.api-endpoints-section .vara-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.api-endpoints-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.api-endpoints-head{
text-align:center;
max-width:820px;
margin:auto;
}

.vara-section-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .vara-section-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-endpoints-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.api-endpoints-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .api-endpoints-head h2{color:#fff;}
html[data-theme="dark"] .api-endpoints-head h2 span{color:#93c5fd;}

.api-endpoints-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .api-endpoints-head p{color:#cbd5e1;}

/* GRID */
.api-endpoints-grid-wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:52px;
}

/* CARD */
.vara-endpoint-card{
padding:28px 24px;
border-radius:28px;
background:rgba(255,255,255,.84);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 20px 45px rgba(0,0,0,.05);
transition:.28s ease;
}

.vara-endpoint-card:hover{transform:translateY(-6px);}

html[data-theme="dark"] .vara-endpoint-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.vara-endpoint-card.vara-span-2{grid-column:span 2;}

/* TOP */
.vara-endpoint-top{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}

.vara-method{
padding:8px 12px;
border-radius:100px;
font-size:12px;
font-weight:900;
}

.vara-method-get{
background:rgba(16,185,129,.10);
color:#10b981;
}

.vara-endpoint-top h3{
font-size:22px;
font-weight:900;
color:#111827;
margin:0;
}

html[data-theme="dark"] .vara-endpoint-top h3{color:#fff;}

/* CODE */
.vara-endpoint-card code{
display:block;
padding:16px;
border-radius:18px;
margin-bottom:18px;
font-size:14px;
line-height:1.7;
word-break:break-word;
background:#0f172a;
color:#93c5fd;
}

/* DESC */
.vara-endpoint-desc{
font-size:15px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .vara-endpoint-desc{color:#cbd5e1;}

/* RESPONSIVE */
@media(max-width:991px){
.api-endpoints-head h2{font-size:42px;}
.api-endpoints-grid-wrap{grid-template-columns:repeat(2,1fr);}
.vara-endpoint-card.vara-span-2{grid-column:span 2;}
}

@media(max-width:600px){
.api-endpoints-section{padding:80px 16px;}
.api-endpoints-head h2{font-size:32px;line-height:1.08;}
.api-endpoints-head p{font-size:16px;line-height:1.75;}
.api-endpoints-grid-wrap{grid-template-columns:1fr;gap:14px;}
.vara-endpoint-card,
.vara-endpoint-card.vara-span-2{grid-column:span 1;padding:24px 20px;}
.vara-endpoint-top{flex-wrap:wrap;}
.vara-endpoint-top h3{font-size:20px;}
.vara-endpoint-card code{font-size:13px;}
}


/* =====================================
   QUICK START SECTION
===================================== */

.vara-quickstart-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:
linear-gradient(180deg,#eef4ff 0%,#ffffff 55%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .vara-quickstart-section{
background:
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG */
.vara-quickstart-section .vara-dot-grid{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.55;
animation:varaGridMove 18s linear infinite;
}

html[data-theme="dark"] .vara-quickstart-section .vara-dot-grid{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* GLOW */
.vara-quickstart-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.vara-quickstart-section .vara-glow-1{
width:240px;height:240px;background:#60a5fa;top:50px;left:-70px;
}

.vara-quickstart-section .vara-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.vara-quickstart-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.vara-quickstart-head{
text-align:center;
max-width:820px;
margin:auto;
}

.vara-quickstart-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.vara-quickstart-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .vara-quickstart-head h2{color:#fff;}
html[data-theme="dark"] .vara-quickstart-head h2 span{color:#93c5fd;}

.vara-quickstart-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .vara-quickstart-head p{color:#cbd5e1;}

/* GRID */
.vara-quickstart-steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:52px;
}

/* CARD */
.vara-quick-card{
position:relative;
padding:30px 24px;
border-radius:28px;
background:rgba(255,255,255,.84);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 20px 45px rgba(0,0,0,.05);
transition:.28s ease;
}

.vara-quick-card:hover{transform:translateY(-6px);}

html[data-theme="dark"] .vara-quick-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* NUMBER */
.vara-quick-num{
position:absolute;
top:18px;
right:18px;
font-size:42px;
font-weight:900;
opacity:.08;
color:#1e40af;
}

/* ICON */
.vara-quick-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.vara-quick-icon.vara-icon-blue{
background:rgba(30,64,175,.08);
color:#1e40af;
}

.vara-quick-icon.vara-icon-green{
background:rgba(16,185,129,.08);
color:#10b981;
}

.vara-quick-icon.vara-icon-purple{
background:rgba(139,92,246,.08);
color:#8b5cf6;
}

html[data-theme="dark"] .vara-quick-icon.vara-icon-blue{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

html[data-theme="dark"] .vara-quick-icon.vara-icon-green{
background:rgba(16,185,129,.14);
}

html[data-theme="dark"] .vara-quick-icon.vara-icon-purple{
background:rgba(139,92,246,.14);
}

/* TEXT */
.vara-quick-card h3{
font-size:24px;
font-weight:900;
color:#111827;
margin-bottom:12px;
}

.vara-quick-card p{
font-size:16px;
line-height:1.8;
color:#64748b;
margin-bottom:18px;
}

html[data-theme="dark"] .vara-quick-card h3{color:#fff;}
html[data-theme="dark"] .vara-quick-card p{color:#cbd5e1;}

/* CODE */
.vara-inline-code{
display:block;
padding:16px;
border-radius:18px;
font-size:13px;
line-height:1.7;
word-break:break-word;
background:#0f172a;
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:991px){
.vara-quickstart-head h2{font-size:42px;}
.vara-quickstart-steps{grid-template-columns:1fr;}
}

@media(max-width:600px){
.vara-quickstart-section{padding:80px 16px;}
.vara-quickstart-head h2{font-size:32px;line-height:1.08;}
.vara-quickstart-head p{font-size:16px;line-height:1.75;}
.vara-quick-card{padding:24px 20px;text-align:center;}
.vara-quick-icon{margin:0 auto 18px;}
.vara-quick-card h3{font-size:22px;}
.vara-quick-card p{font-size:15px;}
.vara-quick-num{right:14px;top:12px;font-size:32px;}
}


/* =====================================
   CODE EXAMPLES SECTION
===================================== */

.vara-code-examples-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

html[data-theme="dark"] .vara-code-examples-section{
background:linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.vara-code-examples-section .vara-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
opacity:.55;
}

html[data-theme="dark"] .vara-code-examples-section .vara-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.vara-code-examples-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.vara-code-examples-section .vara-glow-1{
width:240px;height:240px;background:#60a5fa;top:60px;left:-70px;
}

.vara-code-examples-section .vara-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.vara-code-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.vara-code-head{
text-align:center;
max-width:820px;
margin:auto;
}

.vara-code-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.vara-code-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .vara-code-head h2{color:#fff;}
html[data-theme="dark"] .vara-code-head h2 span{color:#93c5fd;}

.vara-code-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .vara-code-head p{color:#cbd5e1;}

/* TABS */
.vara-code-tabs{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:42px;
}

.vara-code-tab{
border:none;
padding:14px 20px;
border-radius:16px;
font-weight:800;
cursor:pointer;
background:#eef2ff;
color:#1e40af;
transition:.25s ease;
}

.vara-code-tab.vara-tab-active{
background:#1e40af;
color:#fff;
}

html[data-theme="dark"] .vara-code-tab{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

/* CODE BOX */
.vara-code-box-wrap{
margin-top:28px;
}

.vara-code-panel{
display:none;
border-radius:28px;
overflow:hidden;
background:#0f172a;
box-shadow:0 24px 50px rgba(0,0,0,.18);
}

.vara-code-panel.vara-panel-active{
display:block;
}

.vara-code-topbar{
display:flex;
align-items:center;
gap:8px;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
color:#cbd5e1;
font-size:13px;
}

.vara-code-topbar small{
margin-left:auto;
margin-right:12px;
}

.vara-copy-btn{
border:none;
padding:8px 14px;
border-radius:12px;
font-size:12px;
font-weight:800;
cursor:pointer;
background:#1e40af;
color:#fff;
}

.vara-code-panel pre{
margin:0;
padding:24px;
overflow:auto;
font-size:15px;
line-height:1.8;
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:991px){
.vara-code-head h2{font-size:42px;}
}

@media(max-width:600px){
.vara-code-examples-section{padding:80px 16px;}
.vara-code-head h2{font-size:32px;line-height:1.08;}
.vara-code-head p{font-size:16px;line-height:1.75;}
.vara-code-tab{padding:12px 16px;font-size:14px;}
.vara-code-panel pre{font-size:13px;padding:18px;}
.vara-code-topbar{flex-wrap:wrap;}
}


/* =====================================
   RESPONSE CODES SECTION
===================================== */

.vara-response-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:
linear-gradient(180deg,#eef4ff 0%,#ffffff 55%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .vara-response-section{
background:
linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG */
.vara-response-section .vara-dot-grid{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.55;
animation:varaGridMove 18s linear infinite;
}

html[data-theme="dark"] .vara-response-section .vara-dot-grid{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* GLOW */
.vara-response-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.vara-response-section .vara-glow-1{
width:240px;height:240px;background:#60a5fa;top:50px;left:-70px;
}

.vara-response-section .vara-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.vara-response-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.vara-response-head{
text-align:center;
max-width:820px;
margin:auto;
}

.vara-response-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.vara-response-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .vara-response-head h2{color:#fff;}
html[data-theme="dark"] .vara-response-head h2 span{color:#93c5fd;}

.vara-response-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .vara-response-head p{color:#cbd5e1;}

/* GRID */
.vara-response-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:52px;
}

/* CARD */
.vara-response-card{
padding:30px 24px;
border-radius:28px;
background:rgba(255,255,255,.84);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 20px 45px rgba(0,0,0,.05);
transition:.28s ease;
}

.vara-response-card:hover{transform:translateY(-6px);}

html[data-theme="dark"] .vara-response-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* ACCENT BORDERS */
.vara-response-card.vara-card-success{border-top:4px solid #10b981;}
.vara-response-card.vara-card-waiting{border-top:4px solid #f59e0b;}
.vara-response-card.vara-card-error{border-top:4px solid #ef4444;}

/* ICON */
.vara-response-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.vara-card-success .vara-response-icon{background:rgba(16,185,129,.10);color:#10b981;}
.vara-card-waiting .vara-response-icon{background:rgba(245,158,11,.10);color:#f59e0b;}
.vara-card-error .vara-response-icon{background:rgba(239,68,68,.10);color:#ef4444;}

/* TEXT */
.vara-response-card h3{
font-size:24px;
font-weight:900;
color:#111827;
margin-bottom:16px;
}

html[data-theme="dark"] .vara-response-card h3{color:#fff;}

.vara-response-card ul{
list-style:none;
padding:0;
margin:0;
}

.vara-response-card li{
padding:12px 0;
font-size:15px;
line-height:1.75;
color:#64748b;
border-bottom:1px solid rgba(0,0,0,.05);
}

.vara-response-card li:last-child{border-bottom:none;}

.vara-response-card strong{color:#111827;}

html[data-theme="dark"] .vara-response-card li{
color:#cbd5e1;
border-bottom:1px solid rgba(255,255,255,.05);
}

html[data-theme="dark"] .vara-response-card strong{color:#fff;}

/* RESPONSIVE */
@media(max-width:991px){
.vara-response-head h2{font-size:42px;}
.vara-response-grid{grid-template-columns:1fr;}
}

@media(max-width:600px){
.vara-response-section{padding:80px 16px;}
.vara-response-head h2{font-size:32px;line-height:1.08;}
.vara-response-head p{font-size:16px;line-height:1.75;}
.vara-response-card{padding:24px 20px;text-align:center;}
.vara-response-icon{margin:0 auto 18px;}
.vara-response-card h3{font-size:22px;}
.vara-response-card li{font-size:14px;}
}


/* =====================================
   RATE LIMITS SECTION
===================================== */

.vara-limits-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .vara-limits-section{
background:linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.vara-limits-section .vara-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
opacity:.55;
}

html[data-theme="dark"] .vara-limits-section .vara-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.vara-limits-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.vara-limits-section .vara-glow-1{
width:240px;height:240px;background:#60a5fa;top:60px;left:-70px;
}

.vara-limits-section .vara-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.vara-limits-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.vara-limits-head{
text-align:center;
max-width:820px;
margin:auto;
}

.vara-limits-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.vara-limits-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .vara-limits-head h2{color:#fff;}
html[data-theme="dark"] .vara-limits-head h2 span{color:#93c5fd;}

.vara-limits-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .vara-limits-head p{color:#cbd5e1;}

/* GRID */
.vara-limits-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:52px;
}

/* CARD */
.vara-limits-card{
padding:30px 24px;
border-radius:28px;
background:rgba(255,255,255,.84);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 20px 45px rgba(0,0,0,.05);
transition:.28s ease;
}

.vara-limits-card:hover{transform:translateY(-6px);}

html[data-theme="dark"] .vara-limits-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* ICON */
.vara-limits-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.vara-limits-icon.vara-icon-blue{background:rgba(30,64,175,.08);color:#1e40af;}
.vara-limits-icon.vara-icon-green{background:rgba(16,185,129,.08);color:#10b981;}

html[data-theme="dark"] .vara-limits-icon.vara-icon-blue{
background:rgba(96,165,250,.12);color:#93c5fd;
}

html[data-theme="dark"] .vara-limits-icon.vara-icon-green{
background:rgba(16,185,129,.14);
}

/* TEXT */
.vara-limits-card h3{
font-size:24px;
font-weight:900;
color:#111827;
margin-bottom:16px;
}

html[data-theme="dark"] .vara-limits-card h3{color:#fff;}

.vara-limits-card ul{
list-style:none;
padding:0;
margin:0;
}

.vara-limits-card li{
padding:12px 0;
font-size:15px;
line-height:1.75;
color:#64748b;
border-bottom:1px solid rgba(0,0,0,.05);
}

.vara-limits-card li:last-child{border-bottom:none;}

html[data-theme="dark"] .vara-limits-card li{
color:#cbd5e1;
border-bottom:1px solid rgba(255,255,255,.05);
}

/* TRUST BAR */
.vara-trust-bar{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:32px;
}

.vara-trust-pill{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.80);
border:1px solid rgba(255,255,255,.45);
}

html[data-theme="dark"] .vara-trust-pill{
background:rgba(17,24,39,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* RESPONSIVE */
@media(max-width:991px){
.vara-limits-head h2{font-size:42px;}
.vara-limits-wrap{grid-template-columns:1fr;}
}

@media(max-width:600px){
.vara-limits-section{padding:80px 16px;}
.vara-limits-head h2{font-size:32px;line-height:1.08;}
.vara-limits-head p{font-size:16px;line-height:1.75;}
.vara-limits-card{padding:24px 20px;text-align:center;}
.vara-limits-icon{margin:0 auto 18px;}
.vara-limits-card h3{font-size:22px;}
.vara-limits-card li{font-size:14px;}
.vara-trust-pill{width:100%;text-align:center;}
}


/* =====================================
   API CTA SECTION
===================================== */

.vara-api-cta-section{
position:relative;
overflow:hidden;
padding:110px 20px 120px;
background:
radial-gradient(circle at 15% 20%, rgba(96,165,250,.20), transparent 22%),
radial-gradient(circle at 85% 25%, rgba(30,64,175,.20), transparent 24%),
linear-gradient(135deg,#0f172a 0%,#111827 45%,#020617 100%);
transition:.35s ease;
}

/* GRID */
.vara-api-cta-section .vara-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px, transparent 1px);
background-size:56px 56px;
opacity:.55;
animation:varaGridMove 18s linear infinite;
}

/* GLOW */
.vara-api-cta-section .vara-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.45;
animation:varaFloatGlow 8s ease-in-out infinite;
}

.vara-api-cta-section .vara-glow-1{
width:280px;height:280px;background:#60a5fa;top:40px;left:-80px;
}

.vara-api-cta-section .vara-glow-2{
width:260px;height:260px;background:#1e40af;bottom:20px;right:-80px;
animation-delay:2s;
}

/* CONTAINER */
.vara-api-cta-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* CARD */
.vara-cta-card{
position:relative;
max-width:980px;
margin:auto;
text-align:center;
padding:74px 40px;
border-radius:38px;
background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(15,23,42,.78));
border:1px solid rgba(255,255,255,.05);
backdrop-filter:blur(22px);
box-shadow:0 40px 90px rgba(0,0,0,.45),0 12px 26px rgba(30,64,175,.12);
overflow:hidden;
}

/* SHINE */
.vara-cta-card::before{
content:"";
position:absolute;
top:0;
left:-140%;
width:45%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
transform:skewX(-22deg);
animation:varaCtaShine 5s linear infinite;
}

/* FLOAT TAGS */
.vara-cta-float{
position:absolute;
padding:12px 16px;
border-radius:18px;
font-size:13px;
font-weight:800;
background:#111827;
color:#fff;
border:1px solid rgba(255,255,255,.05);
animation:varaFloatCTA 6s ease-in-out infinite;
white-space:nowrap;
}

.vara-cta-float.vara-cta-float-one{top:24px;left:24px;}
.vara-cta-float.vara-cta-float-two{bottom:24px;right:24px;animation-delay:1.6s;}

/* TITLE */
.vara-cta-card h2{
font-size:60px;
line-height:1.03;
font-weight:900;
letter-spacing:-1.4px;
color:#fff;
}

.vara-cta-card h2 span{
display:block;
margin-top:8px;
color:#93c5fd;
}

/* TEXT */
.vara-cta-card p{
max-width:700px;
margin:22px auto 0;
font-size:19px;
line-height:1.85;
color:#cbd5e1;
}

/* BUTTONS */
.vara-cta-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:34px;
}

.vara-cta-btn{
padding:16px 30px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.vara-cta-btn.vara-btn-primary{
background:#1e40af;
color:#fff;
box-shadow:0 14px 28px rgba(30,64,175,.20);
}

.vara-cta-btn.vara-btn-secondary{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.vara-cta-btn:hover{transform:translateY(-4px) scale(1.02);}

/* TRUST POINTS */
.vara-cta-points{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.vara-cta-points span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(17,24,39,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* RESPONSIVE */
@media(max-width:991px){
.vara-cta-card h2{font-size:46px;}
.vara-cta-card p{font-size:17px;}
}

@media(max-width:600px){
.vara-api-cta-section{padding:80px 16px 90px;}
.vara-cta-card{padding:44px 22px;border-radius:28px;}
.vara-cta-card h2{font-size:32px;line-height:1.08;}
.vara-cta-card p{font-size:16px;line-height:1.75;}
.vara-cta-actions{flex-direction:column;}
.vara-cta-btn{width:100%;}
.vara-cta-float{display:none;}
.vara-cta-points span{width:100%;text-align:center;}
}


/* =====================================
   KEYFRAMES — ALL RENAMED TO vara- PREFIX
   Safe from conflicts with any other CSS
===================================== */

@keyframes varaGridMove{
100%{transform:translate(56px,56px);}
}

@keyframes varaFloatGlow{
50%{transform:translateY(-14px);}
}

@keyframes varaFloatCTA{
50%{transform:translateY(-12px);}
}

@keyframes varaCtaShine{
100%{left:140%;}
}
/* ===== contact.css ===== */
/* =====================================
   CONTACT HERO SECTION
===================================== */

.contact-hero-section{
position:relative;
overflow:hidden;
padding:170px 20px 95px;

background:
radial-gradient(circle at 12% 20%, rgba(96,165,250,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(30,64,175,.14), transparent 24%),
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .contact-hero-section{
background:
radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* GRID */
.contact-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);
background-size:56px 56px;
opacity:.65;
animation:gridMove 18s linear infinite;
}

html[data-theme="dark"] .contact-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* GLOW */
.contact-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.55;
animation:floatGlow 8s ease-in-out infinite;
}

.contact-glow-1{
width:260px;
height:260px;
background:#60a5fa;
top:70px;
left:-70px;
}

.contact-glow-2{
width:240px;
height:240px;
background:#1e40af;
right:-70px;
top:220px;
animation-delay:2s;
}

/* CONTAINER */
.contact-hero-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:5;
}

.contact-hero-wrap{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:42px;
align-items:center;
}

/* BADGE */
.contact-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:100px;
font-size:14px;
font-weight:800;
margin-bottom:24px;

background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);
}

.contact-dot{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
}

html[data-theme="dark"] .contact-badge{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* TITLE */
.contact-title{
font-size:64px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.4px;
color:#111827;
}

.contact-title span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .contact-title{
color:#fff;
}

html[data-theme="dark"] .contact-title span{
color:#93c5fd;
}

/* SUBTITLE */
.contact-subtitle{
margin-top:22px;
font-size:20px;
line-height:1.8;
color:#64748b;
max-width:640px;
}

html[data-theme="dark"] .contact-subtitle{
color:#cbd5e1;
}

/* PILLS */
.contact-points{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.contact-points span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
}

html[data-theme="dark"] .contact-points span{
background:rgba(15,23,42,.75);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* BUTTONS */
.contact-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:30px;
}

.contact-btn{
padding:16px 26px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
}

.primary-btn{
background:#1e40af;
color:#fff;
}

.secondary-btn{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .secondary-btn{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.contact-btn:hover{
transform:translateY(-3px);
}

/* RIGHT CARD */
.contact-card{
position:relative;
padding:30px;
border-radius:30px;

background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);

box-shadow:0 28px 65px rgba(0,0,0,.08);
overflow:hidden;
}

html[data-theme="dark"] .contact-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.contact-card-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:22px;
}

.contact-card-top h3{
font-size:24px;
font-weight:900;
color:#111827;
margin:0;
}

html[data-theme="dark"] .contact-card-top h3{
color:#fff;
}

/* STATUS */
.status-live{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:100px;
font-size:13px;
font-weight:800;

background:rgba(16,185,129,.10);
color:#10b981;
}

.status-live i{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
display:block;
animation:pulse 1.4s infinite;
}

/* STATS */
.contact-stat{
padding:18px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}

.contact-stat:last-of-type{
border-bottom:none;
}

.contact-stat strong{
display:block;
font-size:28px;
font-weight:900;
color:#111827;
}

.contact-stat span{
font-size:14px;
color:#64748b;
}

html[data-theme="dark"] .contact-stat{
border-bottom:1px solid rgba(255,255,255,.05);
}

html[data-theme="dark"] .contact-stat strong{
color:#fff;
}

html[data-theme="dark"] .contact-stat span{
color:#cbd5e1;
}

/* FLOATS */
.contact-float{
position:absolute;
padding:10px 14px;
border-radius:14px;
font-size:12px;
font-weight:800;
background:#fff;
color:#111827;
box-shadow:0 16px 30px rgba(0,0,0,.08);
animation:floatGlow 6s ease-in-out infinite;
}

.contact-float.one{
top:-14px;
right:20px;
}

.contact-float.two{
bottom:-14px;
left:20px;
animation-delay:1.5s;
}

html[data-theme="dark"] .contact-float{
background:#111827;
color:#fff;
box-shadow:none;
}

/* RESPONSIVE */
@media(max-width:991px){

.contact-hero-wrap{
grid-template-columns:1fr;
gap:32px;
}

.contact-title{
font-size:48px;
}

.contact-subtitle{
font-size:18px;
}

}

@media(max-width:600px){

.contact-hero-section{
padding:150px 16px 70px;
}

.contact-left{
text-align:center;
}

.contact-badge{
margin-left:auto;
margin-right:auto;
}

.contact-title{
font-size:34px;
text-align:center;
}

.contact-subtitle{
font-size:16px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

.contact-points{
justify-content:center;
}

.contact-actions{
flex-direction:column;
}

.contact-btn{
width:100%;
text-align:center;
}

.contact-float{
display:none;
}

.contact-card{
padding:24px 20px;
}

.contact-card-top{
flex-direction:column;
align-items:center;
}

}

/* ANIM */
@keyframes pulse{
50%{opacity:.35;transform:scale(1.25);}
}

@keyframes gridMove{
100%{transform:translate(56px,56px);}
}

@keyframes floatGlow{
50%{transform:translateY(-14px);}
}


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

.methods-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .methods-section{
background:
linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.methods-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
opacity:.55;
}

html[data-theme="dark"] .methods-grid-bg{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.methods-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.methods-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:60px;
left:-70px;
}

.methods-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.methods-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.methods-head{
text-align:center;
max-width:820px;
margin:auto;
}

.methods-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .methods-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.methods-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.methods-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .methods-head h2{
color:#fff;
}

html[data-theme="dark"] .methods-head h2 span{
color:#93c5fd;
}

.methods-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .methods-head p{
color:#cbd5e1;
}

/* GRID */
.methods-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:52px;
}

/* CARD */
.method-card{
padding:28px 24px;
border-radius:28px;

background:rgba(255,255,255,.84);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 20px 45px rgba(0,0,0,.05);
transition:.28s ease;
}

.method-card:hover{
transform:translateY(-6px);
}

html[data-theme="dark"] .method-card{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* ICON */
.method-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
}

.method-icon.blue{
background:rgba(30,64,175,.08);
color:#1e40af;
}

.method-icon.green{
background:rgba(16,185,129,.08);
color:#10b981;
}

.method-icon.purple{
background:rgba(139,92,246,.08);
color:#8b5cf6;
}

.method-icon.orange{
background:rgba(249,115,22,.08);
color:#f97316;
}

/* TEXT */
.method-card h3{
font-size:22px;
font-weight:900;
color:#111827;
margin-bottom:12px;
}

.method-card p{
font-size:15px;
line-height:1.8;
color:#64748b;
min-height:92px;
}

html[data-theme="dark"] .method-card h3{
color:#fff;
}

html[data-theme="dark"] .method-card p{
color:#cbd5e1;
}

/* META */
.method-meta{
display:flex;
flex-direction:column;
gap:10px;
margin-top:18px;
}

.method-meta span{
padding:10px 14px;
border-radius:100px;
font-size:12px;
font-weight:800;

background:#f8fafc;
color:#334155;
}

html[data-theme="dark"] .method-meta span{
background:#111827;
color:#fff;
}

/* BTN */
.method-btn{
display:block;
text-align:center;
margin-top:18px;
padding:14px;
border-radius:16px;
font-weight:900;
text-decoration:none;

background:#1e40af;
color:#fff;
transition:.25s ease;
}

.method-btn:hover{
transform:translateY(-3px);
}

/* RESPONSIVE */
@media(max-width:991px){

.methods-head h2{
font-size:42px;
}

.methods-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.methods-section{
padding:80px 16px;
}

.methods-head h2{
font-size:32px;
line-height:1.08;
}

.methods-head p{
font-size:16px;
line-height:1.75;
}

.methods-grid{
grid-template-columns:1fr;
gap:14px;
}

.method-card{
padding:24px 20px;
text-align:center;
}

.method-icon{
margin:0 auto 18px;
}

.method-card h3{
font-size:20px;
}

.method-card p{
min-height:auto;
font-size:14px;
}

}

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

.contact-form-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:linear-gradient(180deg,#eef4ff 0%,#ffffff 55%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .contact-form-section{
background:linear-gradient(180deg,#020617 0%,#0b1220 55%,#111827 100%);
}

/* BG */
.form-grid-bg{
position:absolute;
inset:0;
background-image:
radial-gradient(circle, rgba(30,64,175,.04) 1px, transparent 1px);
background-size:34px 34px;
opacity:.55;
}

html[data-theme="dark"] .form-grid-bg{
background-image:
radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* GLOW */
.form-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.form-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:50px;
left:-70px;
}

.form-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.form-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.form-head{
text-align:center;
max-width:820px;
margin:auto;
}

.form-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .form-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.form-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.form-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .form-head h2{
color:#fff;
}

html[data-theme="dark"] .form-head h2 span{
color:#93c5fd;
}

.form-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .form-head p{
color:#cbd5e1;
}

/* WRAP */
.form-wrap{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:22px;
margin-top:52px;
}

/* FORM BOX */
.form-box{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);
box-shadow:0 28px 65px rgba(0,0,0,.08);
}

html[data-theme="dark"] .form-box{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:16px;
}

.input-group{
margin-bottom:16px;
}

.input-group label{
display:block;
font-size:14px;
font-weight:800;
margin-bottom:8px;
color:#111827;
}

html[data-theme="dark"] .input-group label{
color:#fff;
}

.input-group input,
.input-group select,
.input-group textarea{
width:100%;
padding:15px 16px;
border-radius:16px;
border:1px solid #e5e7eb;
font-size:15px;
outline:none;
background:#fff;
transition:.25s ease;
}

.input-group textarea{
resize:none;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
border-color:#1e40af;
box-shadow:0 0 0 4px rgba(30,64,175,.08);
}

html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .input-group select,
html[data-theme="dark"] .input-group textarea{
background:#111827;
border:1px solid rgba(255,255,255,.06);
color:#fff;
}

/* BTN */
.submit-btn{
width:100%;
padding:16px;
border:none;
border-radius:18px;
font-size:15px;
font-weight:900;
cursor:pointer;
background:#1e40af;
color:#fff;
transition:.25s ease;
}

.submit-btn:hover{
transform:translateY(-3px);
}

/* RIGHT */
.form-info{
display:flex;
flex-direction:column;
gap:18px;
}

.info-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);
box-shadow:0 28px 65px rgba(0,0,0,.08);
}

html[data-theme="dark"] .info-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.info-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

.info-card h3{
font-size:24px;
font-weight:900;
margin-bottom:16px;
color:#111827;
}

html[data-theme="dark"] .info-card h3{
color:#fff;
}

.info-card ul{
list-style:none;
padding:0;
margin:0;
}

.info-card li{
padding:12px 0;
font-size:15px;
line-height:1.75;
color:#64748b;
border-bottom:1px solid rgba(0,0,0,.05);
}

.info-card li:last-child{
border-bottom:none;
}

html[data-theme="dark"] .info-card li{
color:#cbd5e1;
border-bottom:1px solid rgba(255,255,255,.05);
}

.info-strip{
padding:18px;
border-radius:20px;
text-align:center;
font-weight:900;
background:#1e40af;
color:#fff;
}

/* RESPONSIVE */
@media(max-width:991px){

.form-head h2{
font-size:42px;
}

.form-wrap{
grid-template-columns:1fr;
}

}

@media(max-width:600px){

.contact-form-section{
padding:80px 16px;
}

.form-head h2{
font-size:32px;
line-height:1.08;
}

.form-head p{
font-size:16px;
line-height:1.75;
}

.form-box,
.info-card{
padding:24px 20px;
}

.form-row{
grid-template-columns:1fr;
gap:0;
}

.form-box{
text-align:left;
}

.info-card{
text-align:center;
}

.info-icon{
margin:0 auto 18px;
}

}

/* ALERT */
.contact-alert{
padding:16px 18px;
border-radius:16px;
font-weight:800;
margin-bottom:18px;
font-size:14px;
}

.contact-alert.success{
background:rgba(16,185,129,.10);
color:#10b981;
border:1px solid rgba(16,185,129,.20);
}

.contact-alert.error{
background:rgba(239,68,68,.10);
color:#ef4444;
border:1px solid rgba(239,68,68,.20);
}

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

.contact-faq-section{
position:relative;
overflow:hidden;
padding:110px 20px;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .contact-faq-section{
background:linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.faq-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
opacity:.55;
}

html[data-theme="dark"] .faq-grid-bg{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.faq-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.faq-glow-1{
width:240px;
height:240px;
background:#60a5fa;
top:60px;
left:-70px;
}

.faq-glow-2{
width:220px;
height:220px;
background:#1e40af;
bottom:40px;
right:-70px;
}

/* CONTAINER */
.faq-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.faq-head{
text-align:center;
max-width:820px;
margin:auto;
}

.faq-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .faq-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.faq-head h2{
font-size:52px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.faq-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .faq-head h2{
color:#fff;
}

html[data-theme="dark"] .faq-head h2 span{
color:#93c5fd;
}

.faq-head p{
margin-top:20px;
font-size:18px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .faq-head p{
color:#cbd5e1;
}

/* WRAP */
.faq-wrap{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:22px;
margin-top:52px;
}

/* LEFT */
.faq-left{
display:flex;
flex-direction:column;
gap:14px;
}

.faq-item{
border-radius:24px;
overflow:hidden;

background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);

box-shadow:0 18px 40px rgba(0,0,0,.05);
}

html[data-theme="dark"] .faq-item{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.faq-btn{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:22px 24px;
border:none;
background:none;
cursor:pointer;
font-size:17px;
font-weight:900;
text-align:left;
color:#111827;
}

html[data-theme="dark"] .faq-btn{
color:#fff;
}

.faq-btn i{
transition:.25s ease;
color:#1e40af;
}

.faq-item.active .faq-btn i{
transform:rotate(45deg);
}

.faq-content{
max-height:0;
overflow:hidden;
transition:.35s ease;
}

.faq-item.active .faq-content{
max-height:200px;
}

.faq-content p{
padding:0 24px 22px;
font-size:15px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .faq-content p{
color:#cbd5e1;
}

/* RIGHT */
.help-card{
padding:30px;
border-radius:30px;

background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);

box-shadow:0 28px 65px rgba(0,0,0,.08);
text-align:center;
}

html[data-theme="dark"] .help-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.help-icon{
width:64px;
height:64px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
margin:0 auto 18px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

.help-card h3{
font-size:26px;
font-weight:900;
color:#111827;
margin-bottom:12px;
}

.help-card p{
font-size:16px;
line-height:1.8;
color:#64748b;
margin-bottom:20px;
}

html[data-theme="dark"] .help-card h3{
color:#fff;
}

html[data-theme="dark"] .help-card p{
color:#cbd5e1;
}

/* BTN */
.help-btn{
display:block;
padding:15px;
border-radius:18px;
font-weight:900;
text-decoration:none;
margin-top:12px;

background:#1e40af;
color:#fff;
transition:.25s ease;
}

.help-btn.light{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .help-btn.light{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.help-btn:hover{
transform:translateY(-3px);
}

/* RESPONSIVE */
@media(max-width:991px){

.faq-head h2{
font-size:42px;
}

.faq-wrap{
grid-template-columns:1fr;
}

}

@media(max-width:600px){

.contact-faq-section{
padding:80px 16px;
}

.faq-head h2{
font-size:32px;
line-height:1.08;
}

.faq-head p{
font-size:16px;
line-height:1.75;
}

.faq-btn{
font-size:15px;
padding:18px 18px;
}

.faq-content p{
padding:0 18px 18px;
font-size:14px;
}

.help-card{
padding:24px 20px;
}

.help-card h3{
font-size:22px;
}

}
/* ===== tutorials.css ===== */
/* =====================================
   TUTORIAL PAGE — FULLY NAMESPACED CSS
   All classes prefixed with tut-
   All keyframes renamed to tut- prefix
===================================== */

/* =====================================
   TUTORIAL HERO SECTION
===================================== */

.tut-hero-section{
position:relative;
overflow:hidden;
padding:170px 20px 95px;
background:
radial-gradient(circle at 12% 20%, rgba(96,165,250,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(30,64,175,.14), transparent 24%),
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .tut-hero-section{
background:
radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* GRID */
.tut-hero-section .tut-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);
background-size:56px 56px;
opacity:.65;
animation:tutGridMove 18s linear infinite;
}

html[data-theme="dark"] .tut-hero-section .tut-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* GLOW */
.tut-hero-section .tut-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.55;
animation:tutFloatGlow 8s ease-in-out infinite;
}

.tut-hero-section .tut-glow-1{
width:260px;
height:260px;
background:#60a5fa;
top:70px;
left:-70px;
}

.tut-hero-section .tut-glow-2{
width:240px;
height:240px;
background:#1e40af;
right:-70px;
top:220px;
animation-delay:2s;
}

/* CONTAINER */
.tut-hero-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:5;
}

.tut-hero-wrap{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:42px;
align-items:center;
}

/* LEFT */
.tut-hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:100px;
font-size:14px;
font-weight:800;
margin-bottom:24px;
background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(16px);
}

.tut-hero-dot{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
flex-shrink:0;
}

html[data-theme="dark"] .tut-hero-badge{
background:rgba(15,23,42,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

.tut-hero-title{
font-size:64px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.4px;
color:#111827;
}

.tut-hero-title span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .tut-hero-title{color:#fff;}
html[data-theme="dark"] .tut-hero-title span{color:#93c5fd;}

.tut-hero-subtitle{
margin-top:22px;
font-size:20px;
line-height:1.8;
color:#64748b;
max-width:640px;
}

html[data-theme="dark"] .tut-hero-subtitle{color:#cbd5e1;}

/* PILLS */
.tut-hero-pills{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.tut-hero-pills span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
}

html[data-theme="dark"] .tut-hero-pills span{
background:rgba(15,23,42,.75);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* BUTTONS */
.tut-hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:30px;
}

.tut-btn{
padding:16px 26px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.tut-btn-primary{
background:#1e40af;
color:#fff;
}

.tut-btn-secondary{
background:#eef2ff;
color:#1e40af;
}

html[data-theme="dark"] .tut-btn-secondary{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.tut-btn:hover{transform:translateY(-3px);}

/* RIGHT CARD */
.tut-card{
position:relative;
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);
box-shadow:0 28px 65px rgba(0,0,0,.08);
overflow:hidden;
}

html[data-theme="dark"] .tut-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.tut-card-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:22px;
}

.tut-card-top h3{
font-size:24px;
font-weight:900;
color:#111827;
margin:0;
}

html[data-theme="dark"] .tut-card-top h3{color:#fff;}

.tut-live-pill{
padding:10px 14px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(16,185,129,.10);
color:#10b981;
}

/* TOPIC ROWS */
.tut-topic-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:16px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}

.tut-topic-row:last-of-type{border-bottom:none;}

.tut-topic-row strong{
font-size:16px;
color:#111827;
}

.tut-topic-row span{
font-size:13px;
font-weight:800;
color:#64748b;
}

html[data-theme="dark"] .tut-topic-row{
border-bottom:1px solid rgba(255,255,255,.05);
}

html[data-theme="dark"] .tut-topic-row strong{color:#fff;}
html[data-theme="dark"] .tut-topic-row span{color:#cbd5e1;}

/* FLOAT TAGS */
.tut-card-float{
position:absolute;
padding:10px 14px;
border-radius:14px;
font-size:12px;
font-weight:800;
background:#fff;
color:#111827;
box-shadow:0 16px 30px rgba(0,0,0,.08);
animation:tutFloatGlow 6s ease-in-out infinite;
}

.tut-card-float.tut-float-one{
top:-14px;
right:20px;
}

.tut-card-float.tut-float-two{
bottom:-14px;
left:20px;
animation-delay:1.5s;
}

html[data-theme="dark"] .tut-card-float{
background:#111827;
color:#fff;
box-shadow:none;
}

/* RESPONSIVE */
@media(max-width:991px){
.tut-hero-wrap{grid-template-columns:1fr;gap:32px;}
.tut-hero-title{font-size:48px;}
.tut-hero-subtitle{font-size:18px;}
}

@media(max-width:600px){
.tut-hero-section{padding:150px 16px 70px;}
.tut-hero-left{text-align:center;}
.tut-hero-badge{margin-left:auto;margin-right:auto;}
.tut-hero-title{font-size:34px;text-align:center;}
.tut-hero-subtitle{font-size:16px;text-align:center;margin-left:auto;margin-right:auto;}
.tut-hero-pills{justify-content:center;}
.tut-hero-actions{flex-direction:column;}
.tut-btn{width:100%;text-align:center;}
.tut-card-float{display:none;}
.tut-card{padding:24px 20px;}
.tut-card-top{flex-direction:column;align-items:center;}
}


/* =====================================
   VIDEO TUTORIALS SECTION
===================================== */

.tut-video-section{
position:relative;
overflow:hidden;
padding:95px 20px;
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
transition:.35s ease;
}

html[data-theme="dark"] .tut-video-section{
background:linear-gradient(180deg,#0b1220 0%,#020617 100%);
}

/* BG */
.tut-video-section .tut-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:52px 52px;
opacity:.55;
}

html[data-theme="dark"] .tut-video-section .tut-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.tut-video-section .tut-glow{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.42;
}

.tut-video-section .tut-glow-1{
width:220px;height:220px;background:#60a5fa;top:50px;left:-60px;
}

.tut-video-section .tut-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-60px;
}

/* CONTAINER */
.tut-video-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* HEAD */
.tut-video-head{
text-align:center;
max-width:760px;
margin:auto;
}

.tut-section-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .tut-section-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.tut-video-head h2{
font-size:48px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.tut-video-head h2 span{
display:block;
margin-top:8px;
color:#1e40af;
}

html[data-theme="dark"] .tut-video-head h2{color:#fff;}
html[data-theme="dark"] .tut-video-head h2 span{color:#93c5fd;}

.tut-video-head p{
margin-top:18px;
font-size:18px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .tut-video-head p{color:#cbd5e1;}

/* GRID */
.tut-video-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:48px;
}

/* CARD */
.tut-video-card{
border-radius:28px;
overflow:hidden;
background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.45);
box-shadow:0 20px 45px rgba(0,0,0,.05);
transition:.28s ease;
}

.tut-video-card:hover{transform:translateY(-6px);}

html[data-theme="dark"] .tut-video-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

/* THUMB */
.tut-video-thumb{
position:relative;
}

.tut-video-thumb img{
width:100%;
display:block;
}

.tut-play-btn{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:62px;
height:62px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:20px;
background:#ff0000;
color:#fff;
box-shadow:0 18px 34px rgba(0,0,0,.25);
transition:.25s ease;
}

.tut-play-btn:hover{
transform:translate(-50%,-50%) scale(1.08);
}

/* BODY */
.tut-video-body{
padding:22px;
}

.tut-video-body h3{
font-size:22px;
font-weight:900;
color:#111827;
margin-bottom:10px;
}

.tut-video-body p{
font-size:15px;
line-height:1.8;
color:#64748b;
margin-bottom:18px;
}

html[data-theme="dark"] .tut-video-body h3{color:#fff;}
html[data-theme="dark"] .tut-video-body p{color:#cbd5e1;}

/* WATCH BTN */
.tut-watch-btn{
display:block;
text-align:center;
padding:14px;
border-radius:16px;
font-weight:900;
text-decoration:none;
background:#1e40af;
color:#fff;
transition:.25s ease;
}

.tut-watch-btn:hover{transform:translateY(-3px);}

/* RESPONSIVE */
@media(max-width:991px){
.tut-video-grid{grid-template-columns:1fr;}
.tut-video-head h2{font-size:40px;}
}

@media(max-width:600px){
.tut-video-section{padding:80px 16px;}
.tut-video-head h2{font-size:30px;}
.tut-video-head p{font-size:16px;}
.tut-video-body{padding:20px;}
.tut-video-body h3{font-size:20px;}
.tut-video-body p{font-size:14px;}
}


/* =====================================
   TUTORIAL CTA SECTION
===================================== */

.tut-cta-section{
position:relative;
overflow:hidden;
padding:95px 20px 115px;
background:
radial-gradient(circle at 15% 20%, rgba(96,165,250,.20), transparent 22%),
radial-gradient(circle at 85% 25%, rgba(30,64,175,.20), transparent 24%),
linear-gradient(135deg,#0f172a 0%,#111827 45%,#020617 100%);
transition:.35s ease;
}

/* GRID */
.tut-cta-section .tut-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px, transparent 1px);
background-size:56px 56px;
opacity:.55;
animation:tutGridMove 18s linear infinite;
}

/* GLOW */
.tut-cta-section .tut-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.45;
animation:tutFloatGlow 8s ease-in-out infinite;
}

.tut-cta-section .tut-glow-1{
width:280px;height:280px;background:#60a5fa;top:40px;left:-80px;
}

.tut-cta-section .tut-glow-2{
width:260px;height:260px;background:#1e40af;bottom:20px;right:-80px;
animation-delay:2s;
}

/* CONTAINER */
.tut-cta-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* CARD */
.tut-cta-card{
position:relative;
max-width:980px;
margin:auto;
text-align:center;
padding:74px 40px;
border-radius:38px;
background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(15,23,42,.78));
border:1px solid rgba(255,255,255,.05);
backdrop-filter:blur(22px);
box-shadow:0 40px 90px rgba(0,0,0,.45),0 12px 26px rgba(30,64,175,.12);
overflow:hidden;
}

/* SHINE */
.tut-cta-card::before{
content:"";
position:absolute;
top:0;
left:-140%;
width:45%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
transform:skewX(-22deg);
animation:tutCtaShine 5s linear infinite;
}

/* FLOAT TAGS */
.tut-cta-float{
position:absolute;
padding:12px 16px;
border-radius:18px;
font-size:13px;
font-weight:800;
background:#111827;
color:#fff;
border:1px solid rgba(255,255,255,.05);
animation:tutFloatGlow 6s ease-in-out infinite;
white-space:nowrap;
}

.tut-cta-float.tut-cta-float-one{top:24px;left:24px;}
.tut-cta-float.tut-cta-float-two{bottom:24px;right:24px;animation-delay:1.6s;}

/* TITLE */
.tut-cta-card h2{
font-size:60px;
line-height:1.03;
font-weight:900;
letter-spacing:-1.4px;
color:#fff;
}

.tut-cta-card h2 span{
display:block;
margin-top:8px;
color:#93c5fd;
}

/* TEXT */
.tut-cta-card p{
max-width:700px;
margin:22px auto 0;
font-size:19px;
line-height:1.85;
color:#cbd5e1;
}

/* BUTTONS */
.tut-cta-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:34px;
}

.tut-cta-btn{
padding:16px 30px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.tut-cta-btn.tut-btn-primary{
background:#1e40af;
color:#fff;
box-shadow:0 14px 28px rgba(30,64,175,.20);
}

.tut-cta-btn.tut-btn-secondary{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.tut-cta-btn:hover{transform:translateY(-4px) scale(1.02);}

/* TRUST POINTS */
.tut-cta-points{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}

.tut-cta-points span{
padding:12px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(17,24,39,.78);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

/* RESPONSIVE */
@media(max-width:991px){
.tut-cta-card h2{font-size:46px;}
.tut-cta-card p{font-size:17px;}
}

@media(max-width:600px){
.tut-cta-section{padding:80px 16px 90px;}
.tut-cta-card{padding:44px 22px;border-radius:28px;}
.tut-cta-card h2{font-size:32px;line-height:1.08;}
.tut-cta-card p{font-size:16px;line-height:1.75;}
.tut-cta-actions{flex-direction:column;}
.tut-cta-btn{width:100%;}
.tut-cta-float{display:none;}
.tut-cta-points span{width:100%;text-align:center;}
}


/* =====================================
   KEYFRAMES — ALL tut- PREFIXED
   Zero conflict with any other page CSS
===================================== */

@keyframes tutGridMove{
100%{transform:translate(56px,56px);}
}

@keyframes tutFloatGlow{
50%{transform:translateY(-14px);}
}

@keyframes tutCtaShine{
100%{left:140%;}
}
/* ===== pages.css ===== */
/* =====================================
   LEGAL PAGES — FULLY NAMESPACED CSS
   Prefixes: prv- / trm- / rfd-
   No generic .primary-btn / .secondary-btn
   No conflicting keyframes
===================================== */

/* =====================================
   SHARED BASE — reused across all 3 pages
   Scoped inside each section to stay isolated
===================================== */

/* =====================================
   PRIVACY PAGE
===================================== */

.prv-section{
position:relative;
overflow:hidden;
padding:160px 20px 100px;
background:
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .prv-section{
background:
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* BG GRID */
.prv-section .prv-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:56px 56px;
opacity:.6;
}

html[data-theme="dark"] .prv-section .prv-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.prv-section .prv-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.42;
}

.prv-section .prv-glow-1{
width:240px;height:240px;background:#60a5fa;top:50px;left:-70px;
}

.prv-section .prv-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.prv-container{
max-width:980px;
margin:auto;
position:relative;
z-index:5;
}

/* HEAD */
.prv-head{text-align:center;}

.prv-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .prv-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.prv-head h1{
font-size:62px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.3px;
color:#111827;
}

.prv-head h1 span{display:block;margin-top:8px;color:#1e40af;}

html[data-theme="dark"] .prv-head h1{color:#fff;}
html[data-theme="dark"] .prv-head h1 span{color:#93c5fd;}

.prv-head p{
margin:22px auto 0;
max-width:700px;
font-size:19px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .prv-head p{color:#cbd5e1;}

.prv-date{
margin-top:20px;
font-size:14px;
font-weight:800;
color:#1e40af;
}

/* CARD */
.prv-card{
margin-top:46px;
padding:38px 34px;
border-radius:34px;
background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 24px 60px rgba(0,0,0,.06);
}

html[data-theme="dark"] .prv-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.prv-block{
padding:18px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}

.prv-block:last-child{border-bottom:none;}

html[data-theme="dark"] .prv-block{
border-bottom:1px solid rgba(255,255,255,.05);
}

.prv-block h3{
font-size:24px;
font-weight:900;
margin-bottom:10px;
color:#111827;
}

html[data-theme="dark"] .prv-block h3{color:#fff;}

.prv-block p{
font-size:16px;
line-height:1.9;
color:#64748b;
}

html[data-theme="dark"] .prv-block p{color:#cbd5e1;}

/* CTA */
.prv-cta{
margin-top:34px;
padding:34px;
border-radius:30px;
text-align:center;
background:#1e40af;
color:#fff;
}

.prv-cta h3{font-size:28px;font-weight:900;margin-bottom:10px;}

.prv-cta p{font-size:16px;line-height:1.8;opacity:.95;}

.prv-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:22px;
}

.prv-btn{
padding:15px 24px;
border-radius:16px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.prv-btn-primary{background:#fff;color:#1e40af;}

.prv-btn-secondary{
background:rgba(255,255,255,.12);
color:#fff;
border:1px solid rgba(255,255,255,.18);
}

.prv-btn:hover{transform:translateY(-3px);}

/* RESPONSIVE */
@media(max-width:600px){
.prv-section{padding:145px 16px 80px;}
.prv-head h1{font-size:36px;}
.prv-head p{font-size:16px;line-height:1.75;}
.prv-card{padding:24px 20px;border-radius:24px;}
.prv-block h3{font-size:20px;}
.prv-block p{font-size:15px;}
.prv-cta{padding:24px 20px;}
.prv-cta h3{font-size:22px;}
.prv-actions{flex-direction:column;}
.prv-btn{width:100%;text-align:center;}
}


/* =====================================
   TERMS PAGE
===================================== */

.trm-section{
position:relative;
overflow:hidden;
padding:160px 20px 100px;
background:
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .trm-section{
background:
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* BG GRID */
.trm-section .trm-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:56px 56px;
opacity:.6;
}

html[data-theme="dark"] .trm-section .trm-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.trm-section .trm-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.42;
}

.trm-section .trm-glow-1{
width:240px;height:240px;background:#60a5fa;top:50px;left:-70px;
}

.trm-section .trm-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.trm-container{
max-width:980px;
margin:auto;
position:relative;
z-index:5;
}

/* HEAD */
.trm-head{text-align:center;}

.trm-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .trm-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.trm-head h1{
font-size:62px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.3px;
color:#111827;
}

.trm-head h1 span{display:block;margin-top:8px;color:#1e40af;}

html[data-theme="dark"] .trm-head h1{color:#fff;}
html[data-theme="dark"] .trm-head h1 span{color:#93c5fd;}

.trm-head p{
margin:22px auto 0;
max-width:700px;
font-size:19px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .trm-head p{color:#cbd5e1;}

.trm-date{
margin-top:20px;
font-size:14px;
font-weight:800;
color:#1e40af;
}

/* CARD */
.trm-card{
margin-top:46px;
padding:38px 34px;
border-radius:34px;
background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 24px 60px rgba(0,0,0,.06);
}

html[data-theme="dark"] .trm-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.trm-block{
padding:18px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}

.trm-block:last-child{border-bottom:none;}

html[data-theme="dark"] .trm-block{
border-bottom:1px solid rgba(255,255,255,.05);
}

.trm-block h3{
font-size:24px;
font-weight:900;
margin-bottom:10px;
color:#111827;
}

html[data-theme="dark"] .trm-block h3{color:#fff;}

.trm-block p{
font-size:16px;
line-height:1.9;
color:#64748b;
}

html[data-theme="dark"] .trm-block p{color:#cbd5e1;}

/* CTA */
.trm-cta{
margin-top:34px;
padding:34px;
border-radius:30px;
text-align:center;
background:#1e40af;
color:#fff;
}

.trm-cta h3{font-size:28px;font-weight:900;margin-bottom:10px;}
.trm-cta p{font-size:16px;line-height:1.8;opacity:.95;}

.trm-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:22px;
}

.trm-btn{
padding:15px 24px;
border-radius:16px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.trm-btn-primary{background:#fff;color:#1e40af;}

.trm-btn-secondary{
background:rgba(255,255,255,.12);
color:#fff;
border:1px solid rgba(255,255,255,.18);
}

.trm-btn:hover{transform:translateY(-3px);}

/* RESPONSIVE */
@media(max-width:600px){
.trm-section{padding:145px 16px 80px;}
.trm-head h1{font-size:36px;}
.trm-head p{font-size:16px;line-height:1.75;}
.trm-card{padding:24px 20px;border-radius:24px;}
.trm-block h3{font-size:20px;}
.trm-block p{font-size:15px;}
.trm-cta{padding:24px 20px;}
.trm-cta h3{font-size:22px;}
.trm-actions{flex-direction:column;}
.trm-btn{width:100%;text-align:center;}
}


/* =====================================
   REFUND PAGE
===================================== */

.rfd-section{
position:relative;
overflow:hidden;
padding:160px 20px 100px;
background:
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
transition:.35s ease;
}

html[data-theme="dark"] .rfd-section{
background:
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

/* BG GRID */
.rfd-section .rfd-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);
background-size:56px 56px;
opacity:.6;
}

html[data-theme="dark"] .rfd-section .rfd-grid{
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px, transparent 1px);
}

/* GLOW */
.rfd-section .rfd-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.42;
}

.rfd-section .rfd-glow-1{
width:240px;height:240px;background:#60a5fa;top:50px;left:-70px;
}

.rfd-section .rfd-glow-2{
width:220px;height:220px;background:#1e40af;bottom:40px;right:-70px;
}

/* CONTAINER */
.rfd-container{
max-width:980px;
margin:auto;
position:relative;
z-index:5;
}

/* HEAD */
.rfd-head{text-align:center;}

.rfd-mini{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
margin-bottom:18px;
background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .rfd-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.rfd-head h1{
font-size:62px;
font-weight:900;
line-height:1.04;
letter-spacing:-1.3px;
color:#111827;
}

.rfd-head h1 span{display:block;margin-top:8px;color:#1e40af;}

html[data-theme="dark"] .rfd-head h1{color:#fff;}
html[data-theme="dark"] .rfd-head h1 span{color:#93c5fd;}

.rfd-head p{
margin:22px auto 0;
max-width:700px;
font-size:19px;
line-height:1.85;
color:#64748b;
}

html[data-theme="dark"] .rfd-head p{color:#cbd5e1;}

.rfd-date{
margin-top:20px;
font-size:14px;
font-weight:800;
color:#1e40af;
}

/* CARD */
.rfd-card{
margin-top:46px;
padding:38px 34px;
border-radius:34px;
background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(18px);
box-shadow:0 24px 60px rgba(0,0,0,.06);
}

html[data-theme="dark"] .rfd-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

.rfd-block{
padding:18px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}

.rfd-block:last-child{border-bottom:none;}

html[data-theme="dark"] .rfd-block{
border-bottom:1px solid rgba(255,255,255,.05);
}

.rfd-block h3{
font-size:24px;
font-weight:900;
margin-bottom:10px;
color:#111827;
}

html[data-theme="dark"] .rfd-block h3{color:#fff;}

.rfd-block p{
font-size:16px;
line-height:1.9;
color:#64748b;
}

html[data-theme="dark"] .rfd-block p{color:#cbd5e1;}

/* CTA */
.rfd-cta{
margin-top:34px;
padding:34px;
border-radius:30px;
text-align:center;
background:#1e40af;
color:#fff;
}

.rfd-cta h3{font-size:28px;font-weight:900;margin-bottom:10px;}
.rfd-cta p{font-size:16px;line-height:1.8;opacity:.95;}

.rfd-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:22px;
}

.rfd-btn{
padding:15px 24px;
border-radius:16px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
display:inline-block;
}

.rfd-btn-primary{background:#fff;color:#1e40af;}

.rfd-btn-secondary{
background:rgba(255,255,255,.12);
color:#fff;
border:1px solid rgba(255,255,255,.18);
}

.rfd-btn:hover{transform:translateY(-3px);}

/* RESPONSIVE */
@media(max-width:600px){
.rfd-section{padding:145px 16px 80px;}
.rfd-head h1{font-size:36px;}
.rfd-head p{font-size:16px;line-height:1.75;}
.rfd-card{padding:24px 20px;border-radius:24px;}
.rfd-block h3{font-size:20px;}
.rfd-block p{font-size:15px;}
.rfd-cta{padding:24px 20px;}
.rfd-cta h3{font-size:22px;}
.rfd-actions{flex-direction:column;}
.rfd-btn{width:100%;text-align:center;}
}
/* ===== referral.css ===== */
/* ===============================
   REFERRAL PAGE
=============================== */

.ref-page .ref-hero-section{
position:relative;
overflow:hidden;
padding:170px 20px 95px;

background:
radial-gradient(circle at 12% 20%, rgba(96,165,250,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(30,64,175,.14), transparent 24%),
linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#ffffff 100%);
}

/* GRID */
.ref-page .ref-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);
background-size:56px 56px;
animation:refGridMove 18s linear infinite;
opacity:.65;
}

/* GLOW */
.ref-page .ref-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.55;
animation:refFloatGlow 8s ease-in-out infinite;
}

.ref-page .ref-glow-1{
width:260px;
height:260px;
background:#60a5fa;
top:70px;
left:-70px;
}

.ref-page .ref-glow-2{
width:240px;
height:240px;
background:#1e40af;
right:-70px;
top:220px;
animation-delay:2s;
}

/* CONTAINER */
.ref-page .ref-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

.ref-page .ref-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

/* BADGE */
.ref-page .ref-badge{
display:inline-block;
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(30,64,175,.08);
color:#1e40af;
margin-bottom:22px;
}

/* TITLE */
.ref-page .ref-title{
font-size:62px;
font-weight:900;
line-height:1.05;
color:#111827;
}

.ref-page .ref-title span{
display:block;
color:#1e40af;
}

/* SUBTITLE */
.ref-page .ref-subtitle{
margin-top:18px;
font-size:19px;
line-height:1.8;
color:#64748b;
max-width:620px;
}

/* TRUST PILLS */
.ref-page .ref-points{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:24px;
}

.ref-page .ref-points span{
padding:10px 16px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.75);
border:1px solid rgba(255,255,255,.45);
color:#111827;
}

/* ACTIONS */
.ref-page .ref-actions{
display:flex;
gap:14px;
margin-top:28px;
flex-wrap:wrap;
}

.ref-page .ref-btn-primary,
.ref-page .ref-btn-secondary{
padding:16px 26px;
border-radius:18px;
font-weight:900;
text-decoration:none;
transition:.25s ease;
}

.ref-page .ref-btn-primary{
background:#1e40af;
color:#fff;
}

.ref-page .ref-btn-secondary{
background:#eef2ff;
color:#1e40af;
}

.ref-page .ref-btn-primary:hover,
.ref-page .ref-btn-secondary:hover{
transform:translateY(-3px);
}

/* CARD */
.ref-page .ref-card{
position:relative;
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.45);
backdrop-filter:blur(20px);
box-shadow:0 28px 65px rgba(0,0,0,.08);
}

.ref-page .ref-card-top{
margin-bottom:20px;
}

.ref-page .ref-card-top h3{
font-size:20px;
font-weight:900;
color:#111827;
margin:0;
}

/* STATS */
.ref-page .ref-stat{
padding:18px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}

.ref-page .ref-stat:last-of-type{
border-bottom:none;
}

.ref-page .ref-stat strong{
display:block;
font-size:32px;
font-weight:900;
color:#1e40af;
}

.ref-page .ref-stat span{
color:#64748b;
font-size:14px;
font-weight:600;
}

/* FLOAT BADGES */
.ref-page .ref-float{
position:absolute;
padding:12px 16px;
border-radius:18px;
font-size:13px;
font-weight:800;
background:#fff;
color:#111827;
box-shadow:0 18px 34px rgba(0,0,0,.08);
animation:refFloatGlow 6s ease-in-out infinite;
}

.ref-page .ref-float.one{
top:-14px;
left:-16px;
}

.ref-page .ref-float.two{
bottom:-14px;
right:-16px;
animation-delay:1.5s;
}

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

@keyframes refGridMove{
100%{transform:translate(56px,56px);}
}

@keyframes refFloatGlow{
50%{transform:translateY(-14px);}
}

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

@media(max-width:991px){

.ref-page .ref-wrap{
grid-template-columns:1fr;
}

.ref-page .ref-title{
font-size:44px;
}

}

@media(max-width:600px){

.ref-page .ref-hero-section{
padding:145px 16px 70px;
}

.ref-page .ref-left{
text-align:center;
}

.ref-page .ref-badge{
display:block;
text-align:center;
}

.ref-page .ref-title{
font-size:32px;
}

.ref-page .ref-subtitle{
margin-left:auto;
margin-right:auto;
}

.ref-page .ref-points{
justify-content:center;
}

.ref-page .ref-actions{
flex-direction:column;
align-items:center;
}

.ref-page .ref-btn-primary,
.ref-page .ref-btn-secondary{
width:100%;
text-align:center;
}

.ref-page .ref-float{
display:none;
}

}

/* ===============================
   DARK MODE
=============================== */

html[data-theme="dark"] .ref-page .ref-hero-section{
background:
radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(96,165,250,.10), transparent 24%),
linear-gradient(180deg,#020617 0%,#081120 45%,#0f172a 100%);
}

html[data-theme="dark"] .ref-page .ref-grid{
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

html[data-theme="dark"] .ref-page .ref-badge{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

html[data-theme="dark"] .ref-page .ref-title{
color:#ffffff;
}

html[data-theme="dark"] .ref-page .ref-title span{
color:#93c5fd;
}

html[data-theme="dark"] .ref-page .ref-subtitle{
color:#cbd5e1;
}

html[data-theme="dark"] .ref-page .ref-points span{
background:rgba(15,23,42,.75);
border:1px solid rgba(255,255,255,.04);
color:#fff;
}

html[data-theme="dark"] .ref-page .ref-btn-secondary{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

html[data-theme="dark"] .ref-page .ref-card{
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .ref-page .ref-card-top h3{
color:#ffffff;
}

html[data-theme="dark"] .ref-page .ref-stat{
border-bottom:1px solid rgba(255,255,255,.05);
}

html[data-theme="dark"] .ref-page .ref-stat strong{
color:#93c5fd;
}

html[data-theme="dark"] .ref-page .ref-stat span{
color:#cbd5e1;
}

html[data-theme="dark"] .ref-page .ref-float{
background:#111827;
color:#fff;
box-shadow:none;
}
/* ===============================
   HOW IT PAYS SECTION
=============================== */

.ref-page .ref-how-section{
padding:90px 20px;
background:#f8fbff;
}

html[data-theme="dark"] .ref-page .ref-how-section{
background:#0a1628;
}

/* HEADER */
.ref-page .ref-how-header{
text-align:center;
max-width:680px;
margin:0 auto 52px;
}

.ref-page .ref-how-title{
font-size:42px;
font-weight:900;
color:#111827;
line-height:1.1;
margin:14px 0 0;
}

.ref-page .ref-how-title span{
display:block;
color:#1e40af;
}

.ref-page .ref-how-sub{
margin-top:16px;
font-size:17px;
line-height:1.8;
color:#64748b;
}

html[data-theme="dark"] .ref-page .ref-how-title{
color:#fff;
}

html[data-theme="dark"] .ref-page .ref-how-title span{
color:#93c5fd;
}

html[data-theme="dark"] .ref-page .ref-how-sub{
color:#cbd5e1;
}

/* GRID */
.ref-page .ref-commission-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-bottom:36px;
}

/* CARD */
.ref-page .ref-comm-card{
padding:32px 26px;
border-radius:28px;
text-align:center;
background:#fff;
border:1px solid rgba(0,0,0,.06);
box-shadow:0 12px 40px rgba(0,0,0,.06);
transition:.25s ease;
}

.ref-page .ref-comm-card:hover{
transform:translateY(-5px);
}

.ref-page .ref-comm-card.highlight{
background:#1e40af;
border-color:transparent;
}

.ref-page .ref-comm-icon{
font-size:36px;
margin-bottom:16px;
}

.ref-page .ref-comm-card strong{
display:block;
font-size:44px;
font-weight:900;
color:#1e40af;
line-height:1;
}

.ref-page .ref-comm-card.highlight strong{
color:#fff;
}

.ref-page .ref-comm-card > span{
display:block;
margin-top:8px;
font-size:14px;
font-weight:800;
color:#64748b;
}

.ref-page .ref-comm-card.highlight > span{
color:rgba(255,255,255,.75);
}

.ref-page .ref-comm-card p{
margin-top:12px;
font-size:14px;
line-height:1.7;
color:#64748b;
}

.ref-page .ref-comm-card.highlight p{
color:rgba(255,255,255,.8);
}

/* DARK CARDS */
html[data-theme="dark"] .ref-page .ref-comm-card{
background:#111827;
border:1px solid rgba(255,255,255,.04);
box-shadow:none;
}

html[data-theme="dark"] .ref-page .ref-comm-card strong{
color:#93c5fd;
}

html[data-theme="dark"] .ref-page .ref-comm-card > span{
color:#94a3b8;
}

html[data-theme="dark"] .ref-page .ref-comm-card p{
color:#94a3b8;
}

html[data-theme="dark"] .ref-page .ref-comm-card.highlight{
background:#1e40af;
border-color:transparent;
}

html[data-theme="dark"] .ref-page .ref-comm-card.highlight strong{
color:#fff;
}

html[data-theme="dark"] .ref-page .ref-comm-card.highlight > span{
color:rgba(255,255,255,.75);
}

html[data-theme="dark"] .ref-page .ref-comm-card.highlight p{
color:rgba(255,255,255,.8);
}

/* WITHDRAW BOX */
.ref-page .ref-withdraw-box{
display:flex;
align-items:flex-start;
gap:20px;
padding:28px 30px;
border-radius:24px;
background:#eef2ff;
border:1px solid rgba(30,64,175,.1);
}

.ref-page .ref-withdraw-icon{
font-size:32px;
flex-shrink:0;
}

.ref-page .ref-withdraw-text strong{
display:block;
font-size:17px;
font-weight:900;
color:#111827;
margin-bottom:8px;
}

.ref-page .ref-withdraw-text p{
font-size:15px;
line-height:1.75;
color:#64748b;
margin:0;
}

html[data-theme="dark"] .ref-page .ref-withdraw-box{
background:#111827;
border:1px solid rgba(255,255,255,.05);
}

html[data-theme="dark"] .ref-page .ref-withdraw-text strong{
color:#fff;
}

html[data-theme="dark"] .ref-page .ref-withdraw-text p{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:991px){

.ref-page .ref-commission-grid{
grid-template-columns:1fr 1fr;
}

.ref-page .ref-how-title{
font-size:34px;
}

}

@media(max-width:600px){

.ref-page .ref-how-section{
padding:70px 16px;
}

.ref-page .ref-commission-grid{
grid-template-columns:1fr;
}

.ref-page .ref-how-title{
font-size:28px;
}

.ref-page .ref-withdraw-box{
flex-direction:column;
}

}

/* ===============================
   CTA SECTION
=============================== */

.ref-page .ref-cta-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
radial-gradient(circle at 15% 50%, rgba(96,165,250,.2), transparent 30%),
radial-gradient(circle at 85% 30%, rgba(30,64,175,.18), transparent 30%),
linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1e40af 100%);
}

/* GRID */
.ref-page .ref-cta-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px, transparent 1px);
background-size:56px 56px;
animation:refGridMove 18s linear infinite;
opacity:.5;
}

/* GLOW */
.ref-page .ref-cta-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
animation:refFloatGlow 8s ease-in-out infinite;
}

.ref-page .ref-cta-glow-1{
width:300px;
height:300px;
background:rgba(96,165,250,.25);
top:-60px;
left:-80px;
}

.ref-page .ref-cta-glow-2{
width:280px;
height:280px;
background:rgba(30,64,175,.3);
bottom:-60px;
right:-80px;
animation-delay:2s;
}

/* WRAP */
.ref-page .ref-cta-wrap{
position:relative;
z-index:2;
text-align:center;
max-width:760px;
margin:0 auto;
}

.ref-page .ref-cta-wrap .ref-badge{
background:rgba(255,255,255,.12);
color:#fff;
border:1px solid rgba(255,255,255,.15);
}

/* TITLE */
.ref-page .ref-cta-title{
font-size:52px;
font-weight:900;
color:#ffffff;
line-height:1.08;
margin:20px 0 0;
}

.ref-page .ref-cta-title span{
display:block;
color:#93c5fd;
}

/* SUB */
.ref-page .ref-cta-sub{
margin-top:20px;
font-size:18px;
line-height:1.8;
color:rgba(255,255,255,.75);
}

.ref-page .ref-cta-sub strong{
color:#fff;
}

/* PILLS */
.ref-page .ref-cta-pills{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
margin-top:28px;
}

.ref-page .ref-cta-pills span{
padding:10px 18px;
border-radius:100px;
font-size:13px;
font-weight:800;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.12);
color:#fff;
backdrop-filter:blur(10px);
}

/* ACTIONS */
.ref-page .ref-cta-actions{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
margin-top:34px;
}

.ref-page .ref-cta-btn{
padding:17px 32px;
border-radius:18px;
font-weight:900;
font-size:16px;
text-decoration:none;
transition:.25s ease;
}

.ref-page .ref-cta-btn.primary{
background:#ffffff;
color:#1e40af;
}

.ref-page .ref-cta-btn.secondary{
background:rgba(255,255,255,.1);
color:#fff;
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(10px);
}

.ref-page .ref-cta-btn:hover{
transform:translateY(-4px);
}

.ref-page .ref-cta-btn.primary:hover{
background:#dbeafe;
}

.ref-page .ref-cta-btn.secondary:hover{
background:rgba(255,255,255,.18);
}

/* TRUST ROW */
.ref-page .ref-cta-trust{
display:flex;
gap:24px;
justify-content:center;
flex-wrap:wrap;
margin-top:28px;
}

.ref-page .ref-cta-trust span{
font-size:14px;
font-weight:700;
color:rgba(255,255,255,.65);
}

/* RESPONSIVE */
@media(max-width:991px){

.ref-page .ref-cta-title{
font-size:38px;
}

}

@media(max-width:600px){

.ref-page .ref-cta-section{
padding:80px 16px;
}

.ref-page .ref-cta-title{
font-size:30px;
}

.ref-page .ref-cta-sub{
font-size:16px;
}

.ref-page .ref-cta-actions{
flex-direction:column;
align-items:center;
}

.ref-page .ref-cta-btn{
width:100%;
text-align:center;
}

.ref-page .ref-cta-trust{
gap:14px;
}

}

html[data-theme="dark"] .ref-page .ref-cta-section{
background:
radial-gradient(circle at 15% 50%, rgba(59,130,246,.22), transparent 30%),
radial-gradient(circle at 85% 30%, rgba(96,165,250,.15), transparent 30%),
linear-gradient(135deg,#020617 0%,#0f1f5c 50%,#1e40af 100%);
}

html[data-theme="dark"] .ref-page .ref-cta-wrap .ref-badge{
background:rgba(255,255,255,.08);
color:#93c5fd;
border:1px solid rgba(255,255,255,.1);
}

html[data-theme="dark"] .ref-page .ref-cta-pills span{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

html[data-theme="dark"] .ref-page .ref-cta-btn.primary{
background:#93c5fd;
color:#0f172a;
}

html[data-theme="dark"] .ref-page .ref-cta-btn.primary:hover{
background:#bfdbfe;
}
/* ===== api-docsv2.css ===== */
/* =====================================
   API V2 HERO SECTION
===================================== */

.api-v2-hero-section{
position:relative;
overflow:hidden;
padding:120px 20px 110px;

background:
linear-gradient(
180deg,
#f8fbff 0%,
#eef4ff 45%,
#ffffff 100%
);
}

html[data-theme="dark"] .api-v2-hero-section{
background:
linear-gradient(
180deg,
#020617 0%,
#071120 45%,
#0f172a 100%
);
}

/* GRID */
.api-v2-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.04) 1px, transparent 1px);

background-size:52px 52px;

opacity:.55;
}

/* GLOW */
.api-v2-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.45;
}

.api-v2-glow-1{
width:320px;
height:320px;
background:#60a5fa;
top:-80px;
left:-80px;
}

.api-v2-glow-2{
width:280px;
height:280px;
background:#2563eb;
bottom:-100px;
right:-60px;
}

/* CONTAINER */
.api-v2-container{
max-width:1280px;
margin:auto;
position:relative;
z-index:2;
}

/* WRAP */
.api-v2-hero-wrap{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;
}

/* MINI */
.api-v2-mini{
display:inline-flex;
align-items:center;
gap:10px;

padding:12px 18px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:24px;
}

html[data-theme="dark"] .api-v2-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TITLE */
.api-v2-title{
font-size:68px;
line-height:1.02;
font-weight:900;
letter-spacing:-2px;
color:#0f172a;
}

.api-v2-title span{
display:block;
margin-top:10px;

background:linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-v2-title{
color:#fff;
}

/* SUBTITLE */
.api-v2-subtitle{
margin-top:26px;

font-size:19px;
line-height:1.9;

max-width:640px;

color:#64748b;
}

html[data-theme="dark"] .api-v2-subtitle{
color:#cbd5e1;
}

/* BUTTONS */
.api-v2-actions{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;

margin-top:36px;
}

.api-v2-btn{
padding:17px 28px;
border-radius:18px;

font-size:15px;
font-weight:800;
text-decoration:none;

transition:.3s ease;
}

.primary-btn{
background:#2563eb;
color:#fff;

box-shadow:
0 16px 34px rgba(37,99,235,.22);
}

.secondary-btn{
background:#fff;
color:#1e40af;

border:1px solid rgba(30,64,175,.08);

box-shadow:
0 10px 24px rgba(15,23,42,.05);
}

html[data-theme="dark"] .secondary-btn{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.api-v2-btn:hover{
transform:translateY(-4px);
}

/* TRUST */
.api-v2-trust{
display:flex;
flex-wrap:wrap;
gap:14px;

margin-top:34px;
}

.api-v2-trust span{
display:flex;
align-items:center;
gap:10px;

padding:12px 18px;
border-radius:100px;

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

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

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

backdrop-filter:blur(12px);

box-shadow:
0 10px 22px rgba(0,0,0,.04);
}

.api-v2-trust span i{
color:#2563eb;
}

html[data-theme="dark"] .api-v2-trust span{
background:rgba(17,24,39,.78);
border:1px solid rgba(255,255,255,.05);
color:#fff;
}

html[data-theme="dark"] .api-v2-trust span i{
color:#93c5fd;
}

/* RIGHT */
.api-v2-hero-right{
position:relative;
}

/* CODE CARD */
.api-v2-code-card{
position:relative;

border-radius:34px;
overflow:hidden;

background:
linear-gradient(
135deg,
rgba(15,23,42,.96),
rgba(2,6,23,.94)
);

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

box-shadow:
0 35px 80px rgba(0,0,0,.35);
}

/* TOP */
.api-v2-code-top{
display:flex;
align-items:center;
justify-content:space-between;

padding:18px 24px;

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

/* DOTS */
.api-v2-dots{
display:flex;
gap:8px;
}

.api-v2-dots span{
width:11px;
height:11px;
border-radius:50%;
}

.api-v2-dots span:nth-child(1){
background:#ef4444;
}

.api-v2-dots span:nth-child(2){
background:#f59e0b;
}

.api-v2-dots span:nth-child(3){
background:#22c55e;
}

.api-v2-code-top strong{
font-size:13px;
font-weight:800;
color:#fff;
}

/* CODE */
.api-v2-code-body{
padding:34px 28px;
overflow:auto;
}

.api-v2-code-body pre{
margin:0;
}

.api-v2-code-body code{
font-size:14px;
line-height:2;
font-family:monospace;
color:#93c5fd;
}

/* FLOATING */
.api-v2-floating-card{
position:absolute;

padding:12px 16px;
border-radius:16px;

font-size:13px;
font-weight:800;

background:#fff;
color:#111827;

box-shadow:
0 20px 40px rgba(0,0,0,.12);

animation:apiFloat 6s ease-in-out infinite;
}

.api-v2-floating-card.one{
top:-18px;
right:-20px;
}

.api-v2-floating-card.two{
bottom:-18px;
left:-20px;
animation-delay:1.5s;
}

html[data-theme="dark"] .api-v2-floating-card{
background:#111827;
color:#fff;
}

/* ANIM */
@keyframes apiFloat{
50%{
transform:translateY(-12px);
}
}

/* RESPONSIVE */
@media(max-width:1100px){

.api-v2-title{
font-size:56px;
}

.api-v2-hero-wrap{
gap:40px;
}

}

@media(max-width:900px){

.api-v2-hero-wrap{
grid-template-columns:1fr;
}

.api-v2-hero-left{
text-align:center;
}

.api-v2-subtitle{
margin-left:auto;
margin-right:auto;
}

.api-v2-actions,
.api-v2-trust{
justify-content:center;
}

}

@media(max-width:600px){

.api-v2-hero-section{
padding:90px 16px 80px;
}

.api-v2-title{
font-size:40px;
line-height:1.08;
letter-spacing:-1px;
}

.api-v2-subtitle{
font-size:16px;
line-height:1.8;
}

.api-v2-actions{
flex-direction:column;
}

.api-v2-btn{
width:100%;
text-align:center;
}

.api-v2-trust{
gap:10px;
}

.api-v2-trust span{
width:100%;
justify-content:center;
}

.api-v2-code-body{
padding:26px 20px;
}

.api-v2-code-body code{
font-size:12px;
}

.api-v2-floating-card{
display:none;
}

}

/* =====================================
   API VERSION SWITCHER SECTION
===================================== */

.api-v2-switch-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
}

html[data-theme="dark"] .api-v2-switch-section{
background:
linear-gradient(
180deg,
#071120 0%,
#020617 100%
);
}

/* GRID */
.api-v2-switch-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* HEAD */
.api-v2-switch-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
}

.api-v2-switch-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-v2-switch-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-v2-switch-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-v2-switch-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-v2-switch-head h2{
color:#fff;
}

.api-v2-switch-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-v2-switch-head p{
color:#cbd5e1;
}

/* WRAP */
.api-v2-switch-wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

/* CARD */
.api-v2-switch-card{
position:relative;

padding:34px 28px;

border-radius:32px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.88),
rgba(255,255,255,.72)
);

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

backdrop-filter:blur(18px);

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

overflow:hidden;

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

.api-v2-switch-card:hover{
transform:translateY(-8px);

box-shadow:
0 34px 75px rgba(15,23,42,.12);
}

html[data-theme="dark"] .api-v2-switch-card{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* ACTIVE */
.api-v2-switch-card.active{
border:1px solid rgba(37,99,235,.22);
}

.api-v2-active-glow{
position:absolute;

top:-80px;
right:-80px;

width:220px;
height:220px;

border-radius:50%;

background:#3b82f6;

filter:blur(100px);
opacity:.18;
}

/* ICON */
.api-v2-switch-icon{
width:76px;
height:76px;

border-radius:24px;

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

font-size:30px;

margin-bottom:26px;

position:relative;
overflow:hidden;
}

.api-v2-switch-icon::before{
content:"";

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(255,255,255,.45),
transparent
);

opacity:.6;
}

.api-v2-switch-icon i{
position:relative;
z-index:2;
}

.api-v2-switch-icon.compatible{
background:
linear-gradient(
135deg,
rgba(30,64,175,.12),
rgba(96,165,250,.18)
);

color:#2563eb;
}

.api-v2-switch-icon.modern{
background:
linear-gradient(
135deg,
rgba(37,99,235,.18),
rgba(96,165,250,.24)
);

color:#2563eb;
}

.api-v2-switch-icon.soon-icon{
background:
linear-gradient(
135deg,
rgba(100,116,139,.14),
rgba(148,163,184,.18)
);

color:#64748b;
}

/* BADGE */
.api-v2-switch-badge{
display:inline-block;

padding:7px 12px;
border-radius:100px;

font-size:11px;
font-weight:800;

margin-bottom:14px;

background:#eef2ff;
color:#1e40af;
}

.api-v2-switch-badge.live{
background:#dcfce7;
color:#166534;
}

.api-v2-switch-badge.soon-badge{
background:#f1f5f9;
color:#64748b;
}

/* CONTENT */
.api-v2-switch-content h3{
font-size:28px;
font-weight:900;
line-height:1.2;

margin-bottom:14px;

color:#0f172a;
}

html[data-theme="dark"] .api-v2-switch-content h3{
color:#fff;
}

.api-v2-switch-content p{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-bottom:22px;
}

html[data-theme="dark"] .api-v2-switch-content p{
color:#cbd5e1;
}

/* LIST */
.api-v2-switch-content ul{
list-style:none;
padding:0;
margin:0;
}

.api-v2-switch-content li{
display:flex;
align-items:flex-start;
gap:10px;

font-size:14px;
line-height:1.7;

margin-bottom:12px;

color:#334155;
}

.api-v2-switch-content li i{
color:#2563eb;
margin-top:4px;
}

html[data-theme="dark"] .api-v2-switch-content li{
color:#cbd5e1;
}

html[data-theme="dark"] .api-v2-switch-content li i{
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:1100px){

.api-v2-switch-wrap{
grid-template-columns:1fr;
}

}

@media(max-width:600px){

.api-v2-switch-section{
padding:85px 16px;
}

.api-v2-switch-head h2{
font-size:38px;
line-height:1.08;
}

.api-v2-switch-head p{
font-size:16px;
}

.api-v2-switch-card{
padding:28px 22px;
border-radius:28px;
}

.api-v2-switch-content h3{
font-size:24px;
}

}
/* =====================================
   API FEATURES SECTION
===================================== */

.api-features-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#f8fbff 0%,
#ffffff 100%
);
}

html[data-theme="dark"] .api-features-section{
background:
linear-gradient(
180deg,
#020617 0%,
#071120 100%
);
}

/* GLOW */
.api-features-glow{
position:absolute;
width:420px;
height:420px;
border-radius:50%;

filter:blur(120px);
opacity:.12;
pointer-events:none;
}

.api-features-glow.left{
top:-120px;
left:-120px;
background:#2563eb;
}

.api-features-glow.right{
bottom:-140px;
right:-120px;
background:#60a5fa;
}

/* HEAD */
.api-features-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
position:relative;
z-index:2;
}

.api-features-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-features-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-features-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-features-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-features-head h2{
color:#fff;
}

.api-features-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-features-head p{
color:#cbd5e1;
}

/* GRID */
.api-features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;

position:relative;
z-index:2;
}

/* CARD */
.api-feature-card{
position:relative;

padding:34px 30px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

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

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

overflow:hidden;
}

.api-feature-card::before{
content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
#2563eb,
#60a5fa
);

opacity:0;
transition:.35s;
}

.api-feature-card:hover{
transform:translateY(-8px);

box-shadow:
0 34px 80px rgba(15,23,42,.12);
}

.api-feature-card:hover::before{
opacity:1;
}

html[data-theme="dark"] .api-feature-card{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* ICON */
.api-feature-icon{
width:74px;
height:74px;

border-radius:24px;

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

font-size:28px;

margin-bottom:24px;

background:
linear-gradient(
135deg,
rgba(37,99,235,.16),
rgba(96,165,250,.24)
);

color:#2563eb;

position:relative;
overflow:hidden;
}

.api-feature-icon::before{
content:"";

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(255,255,255,.45),
transparent
);

opacity:.65;
}

.api-feature-icon i{
position:relative;
z-index:2;
}

html[data-theme="dark"] .api-feature-icon{
color:#93c5fd;
}

/* TEXT */
.api-feature-card h3{
font-size:26px;
line-height:1.3;
font-weight:900;

margin-bottom:14px;

color:#0f172a;
}

html[data-theme="dark"] .api-feature-card h3{
color:#fff;
}

.api-feature-card p{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-bottom:22px;
}

html[data-theme="dark"] .api-feature-card p{
color:#cbd5e1;
}

/* TAGS */
.api-feature-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.api-feature-tags span{
padding:9px 14px;
border-radius:100px;

font-size:12px;
font-weight:800;

background:#eff6ff;
color:#2563eb;
}

html[data-theme="dark"] .api-feature-tags span{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:1100px){

.api-features-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.api-features-grid{
grid-template-columns:1fr;
}

.api-features-head h2{
font-size:40px;
line-height:1.08;
}

.api-feature-card{
padding:28px 24px;
border-radius:26px;
}

.api-feature-card h3{
font-size:22px;
}

}

@media(max-width:600px){

.api-features-section{
padding:85px 16px;
}

.api-features-head p{
font-size:16px;
}

}
/* =====================================
   QUICK START SECTION
===================================== */

.api-quickstart-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
}

html[data-theme="dark"] .api-quickstart-section{
background:
linear-gradient(
180deg,
#071120 0%,
#020617 100%
);
}

/* GRID */
.api-quick-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* GLOW */
.api-quick-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.14;
pointer-events:none;
}

.api-quick-glow-1{
width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-quick-glow-2{
width:380px;
height:380px;
background:#60a5fa;
bottom:-120px;
right:-100px;
}

/* HEAD */
.api-quick-head{
max-width:760px;
margin:0 auto 80px;
text-align:center;
position:relative;
z-index:2;
}

.api-quick-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-quick-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-quick-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-quick-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-quick-head h2{
color:#fff;
}

.api-quick-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-quick-head p{
color:#cbd5e1;
}

/* TIMELINE */
.api-quick-timeline{
position:relative;
max-width:980px;
margin:auto;
z-index:2;
}

.api-quick-timeline::before{
content:"";

position:absolute;
top:0;
bottom:0;
left:38px;

width:3px;

background:
linear-gradient(
180deg,
#2563eb,
#60a5fa
);

border-radius:10px;
}

/* STEP */
.api-quick-step{
position:relative;

display:flex;
gap:28px;

padding-bottom:50px;
}

.api-quick-step:last-child{
padding-bottom:0;
}

/* NUMBER */
.api-quick-number{
position:relative;
z-index:2;

min-width:76px;
width:76px;
height:76px;

border-radius:24px;

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

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

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

color:#fff;

box-shadow:
0 18px 40px rgba(37,99,235,.28);
}

/* CONTENT */
.api-quick-content{
flex:1;

padding:34px 34px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

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

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

.api-quick-content:hover{
transform:translateY(-6px);

box-shadow:
0 34px 80px rgba(15,23,42,.12);
}

html[data-theme="dark"] .api-quick-content{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* ICON */
.api-quick-icon{
width:72px;
height:72px;

border-radius:22px;

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

font-size:28px;

margin-bottom:22px;

background:
linear-gradient(
135deg,
rgba(37,99,235,.16),
rgba(96,165,250,.24)
);

color:#2563eb;
}

html[data-theme="dark"] .api-quick-icon{
color:#93c5fd;
}

/* TEXT */
.api-quick-content h3{
font-size:28px;
line-height:1.3;
font-weight:900;

margin-bottom:14px;

color:#0f172a;
}

html[data-theme="dark"] .api-quick-content h3{
color:#fff;
}

.api-quick-content p{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-bottom:22px;
}

html[data-theme="dark"] .api-quick-content p{
color:#cbd5e1;
}

/* TAGS */
.api-quick-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.api-quick-tags span{
padding:9px 14px;
border-radius:100px;

font-size:12px;
font-weight:800;

background:#eff6ff;
color:#2563eb;
}

html[data-theme="dark"] .api-quick-tags span{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:768px){

.api-quick-head h2{
font-size:40px;
line-height:1.08;
}

.api-quick-timeline::before{
left:28px;
}

.api-quick-number{
min-width:56px;
width:56px;
height:56px;

font-size:18px;
border-radius:18px;
}

.api-quick-step{
gap:18px;
}

.api-quick-content{
padding:26px 22px;
border-radius:24px;
}

.api-quick-content h3{
font-size:22px;
}

.api-quick-icon{
width:58px;
height:58px;
font-size:22px;
border-radius:18px;
}

}

@media(max-width:600px){

.api-quickstart-section{
padding:85px 16px;
}

.api-quick-head p{
font-size:16px;
}

.api-quick-step{
align-items:flex-start;
}

}

/* =====================================
   API ENDPOINTS SECTION
===================================== */

.api-endpoints-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
}

html[data-theme="dark"] .api-endpoints-section{
background:
linear-gradient(
180deg,
#020617 0%,
#071120 100%
);
}

/* GRID */
.api-endpoints-grid-bg{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* GLOW */
.api-endpoints-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.12;
pointer-events:none;
}

.api-endpoints-glow-1{
width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-endpoints-glow-2{
width:360px;
height:360px;
background:#60a5fa;
bottom:-120px;
right:-120px;
}

/* HEAD */
.api-endpoints-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
position:relative;
z-index:2;
}

.api-endpoints-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-endpoints-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-endpoints-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-endpoints-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-endpoints-head h2{
color:#fff;
}

.api-endpoints-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-endpoints-head p{
color:#cbd5e1;
}

/* GRID */
.api-endpoints-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;

position:relative;
z-index:2;
}

/* CARD */
.api-endpoint-card{
position:relative;

padding:30px 26px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

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

overflow:hidden;

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

.api-endpoint-card::before{
content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
#2563eb,
#60a5fa
);

opacity:0;
transition:.35s;
}

.api-endpoint-card:hover{
transform:translateY(-8px);

box-shadow:
0 34px 80px rgba(15,23,42,.12);
}

.api-endpoint-card:hover::before{
opacity:1;
}

html[data-theme="dark"] .api-endpoint-card{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* TOP */
.api-endpoint-top{
display:flex;
align-items:center;
justify-content:space-between;

margin-bottom:20px;
}

/* METHOD */
.endpoint-method{
padding:8px 14px;
border-radius:100px;

font-size:11px;
font-weight:900;
letter-spacing:.5px;
}

.endpoint-method.get{
background:#dcfce7;
color:#166534;
}

.endpoint-method.post{
background:#dbeafe;
color:#1d4ed8;
}

/* TYPE */
.endpoint-type{
font-size:11px;
font-weight:800;

padding:8px 12px;
border-radius:100px;

background:#f1f5f9;
color:#64748b;
}

html[data-theme="dark"] .endpoint-type{
background:rgba(255,255,255,.05);
color:#cbd5e1;
}

/* TITLE */
.api-endpoint-card h3{
font-size:24px;
line-height:1.3;
font-weight:900;

margin-bottom:16px;

color:#0f172a;
}

html[data-theme="dark"] .api-endpoint-card h3{
color:#fff;
}

/* CODE */
.api-endpoint-card code{
display:block;

padding:14px 16px;
border-radius:16px;

font-size:13px;
font-family:monospace;

margin-bottom:18px;

background:#eff6ff;
color:#2563eb;

overflow:auto;
}

html[data-theme="dark"] .api-endpoint-card code{
background:#0f172a;
color:#93c5fd;
}

/* TEXT */
.api-endpoint-card p{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-bottom:22px;
}

html[data-theme="dark"] .api-endpoint-card p{
color:#cbd5e1;
}

/* TAGS */
.api-endpoint-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.api-endpoint-tags span{
padding:9px 14px;
border-radius:100px;

font-size:12px;
font-weight:800;

background:#eff6ff;
color:#2563eb;
}

html[data-theme="dark"] .api-endpoint-tags span{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* RESPONSIVE */
@media(max-width:1200px){

.api-endpoints-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.api-endpoints-grid{
grid-template-columns:1fr;
}

.api-endpoints-head h2{
font-size:40px;
line-height:1.08;
}

.api-endpoint-card{
padding:28px 22px;
border-radius:26px;
}

.api-endpoint-card h3{
font-size:22px;
}

}

@media(max-width:600px){

.api-endpoints-section{
padding:85px 16px;
}

.api-endpoints-head p{
font-size:16px;
}

}
/* =====================================
   API RESPONSE STRUCTURE SECTION
===================================== */

.api-response-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#f8fbff 0%,
#ffffff 100%
);
}

html[data-theme="dark"] .api-response-section{
background:
linear-gradient(
180deg,
#071120 0%,
#020617 100%
);
}

/* GRID */
.api-response-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* GLOW */
.api-response-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.12;
pointer-events:none;
}

.api-response-glow-1{
width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-response-glow-2{
width:360px;
height:360px;
background:#60a5fa;
bottom:-120px;
right:-120px;
}

/* HEAD */
.api-response-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
position:relative;
z-index:2;
}

.api-response-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-response-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-response-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-response-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-response-head h2{
color:#fff;
}

.api-response-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-response-head p{
color:#cbd5e1;
}

/* WRAP */
.api-response-wrap{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;

margin-bottom:38px;

position:relative;
z-index:2;
}

/* CARD */
.api-response-card{
padding:34px 30px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

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

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

.api-response-card:hover{
transform:translateY(-8px);

box-shadow:
0 34px 80px rgba(15,23,42,.12);
}

html[data-theme="dark"] .api-response-card{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* TOP */
.api-response-top{
display:flex;
align-items:center;
gap:18px;

margin-bottom:20px;
}

.api-response-top h3{
font-size:26px;
font-weight:900;
color:#0f172a;
margin-bottom:6px;
}

html[data-theme="dark"] .api-response-top h3{
color:#fff;
}

.api-response-top span{
font-size:13px;
font-weight:700;
color:#64748b;
}

html[data-theme="dark"] .api-response-top span{
color:#cbd5e1;
}

/* ICON */
.api-response-icon{
width:74px;
height:74px;

border-radius:24px;

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

font-size:28px;
flex-shrink:0;
}

.api-response-icon.success{
background:
linear-gradient(
135deg,
rgba(34,197,94,.15),
rgba(74,222,128,.20)
);

color:#16a34a;
}

.api-response-icon.error{
background:
linear-gradient(
135deg,
rgba(239,68,68,.15),
rgba(248,113,113,.20)
);

color:#dc2626;
}

/* TEXT */
.api-response-card p{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-bottom:22px;
}

html[data-theme="dark"] .api-response-card p{
color:#cbd5e1;
}

/* CODE */
.api-response-code{
border-radius:22px;
overflow:hidden;

margin-bottom:22px;

background:#0f172a;
}

.api-response-code pre{
margin:0;
padding:24px;

font-size:13px;
line-height:1.8;

color:#cbd5e1;

overflow:auto;
}

/* TAGS */
.api-response-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.api-response-tags span{
padding:9px 14px;
border-radius:100px;

font-size:12px;
font-weight:800;

background:#eff6ff;
color:#2563eb;
}

html[data-theme="dark"] .api-response-tags span{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* STATUS GRID */
.api-status-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

position:relative;
z-index:2;
}

/* STATUS ITEM */
.api-status-item{
display:flex;
align-items:center;
gap:16px;

padding:22px;

border-radius:24px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

box-shadow:
0 20px 50px rgba(15,23,42,.05);
}

html[data-theme="dark"] .api-status-item{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

/* STATUS CODE */
.api-status-code{
min-width:72px;
height:72px;

border-radius:22px;

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

font-size:18px;
font-weight:900;
}

.api-status-code.success{
background:rgba(34,197,94,.14);
color:#16a34a;
}

.api-status-code.error{
background:rgba(239,68,68,.14);
color:#dc2626;
}

.api-status-code.warning{
background:rgba(245,158,11,.14);
color:#d97706;
}

/* STATUS INFO */
.api-status-info h4{
font-size:18px;
font-weight:800;

margin-bottom:6px;

color:#0f172a;
}

html[data-theme="dark"] .api-status-info h4{
color:#fff;
}

.api-status-info p{
font-size:14px;
line-height:1.7;

color:#64748b;
}

html[data-theme="dark"] .api-status-info p{
color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:1100px){

.api-status-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.api-response-wrap{
grid-template-columns:1fr;
}

.api-status-grid{
grid-template-columns:1fr;
}

.api-response-head h2{
font-size:40px;
line-height:1.08;
}

.api-response-card{
padding:28px 22px;
border-radius:26px;
}

.api-response-top h3{
font-size:22px;
}

}

@media(max-width:600px){

.api-response-section{
padding:85px 16px;
}

.api-response-head p{
font-size:16px;
}

.api-status-item{
padding:18px;
}

.api-status-code{
min-width:58px;
height:58px;

font-size:15px;
border-radius:18px;
}

}
/* =====================================
   CODE EXAMPLES SECTION
===================================== */

.api-code-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
}

html[data-theme="dark"] .api-code-section{
background:
linear-gradient(
180deg,
#020617 0%,
#071120 100%
);
}

/* GRID */
.api-code-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* GLOW */
.api-code-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.12;
pointer-events:none;
}

.api-code-glow-1{
width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-code-glow-2{
width:360px;
height:360px;
background:#60a5fa;
bottom:-120px;
right:-120px;
}

/* HEAD */
.api-code-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
position:relative;
z-index:2;
}

.api-code-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-code-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-code-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-code-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-code-head h2{
color:#fff;
}

.api-code-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-code-head p{
color:#cbd5e1;
}

/* GRID WRAP */
.api-code-grid-wrap{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;

position:relative;
z-index:2;
}

/* CARD */
.api-code-card{
border-radius:30px;
overflow:hidden;

background:
linear-gradient(
135deg,
rgba(15,23,42,.96),
rgba(2,6,23,.94)
);

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

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

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

.api-code-card:hover{
transform:translateY(-8px);

box-shadow:
0 38px 85px rgba(0,0,0,.42);
}

/* TOP */
.api-code-top{
display:flex;
align-items:center;
justify-content:space-between;

padding:18px 22px;

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

/* LANG */
.api-code-lang{
display:flex;
align-items:center;
gap:12px;
}

.api-code-lang i{
font-size:22px;
color:#60a5fa;
}

.api-code-lang span{
font-size:14px;
font-weight:800;
color:#fff;
}

/* COPY */
.api-copy-btn{
padding:10px 16px;
border:none;
outline:none;

border-radius:12px;

font-size:12px;
font-weight:800;

cursor:pointer;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

color:#fff;

transition:.3s ease;
}

.api-copy-btn:hover{
transform:translateY(-2px);
}

/* BODY */
.api-code-body{
padding:28px;
overflow:auto;
}

.api-code-body pre{
margin:0;
}

.api-code-body code{
font-size:13px;
line-height:2;

font-family:monospace;

color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:900px){

.api-code-grid-wrap{
grid-template-columns:1fr;
}

.api-code-head h2{
font-size:42px;
line-height:1.08;
}

}

@media(max-width:600px){

.api-code-section{
padding:85px 16px;
}

.api-code-head p{
font-size:16px;
}

.api-code-card{
border-radius:24px;
}

.api-code-body{
padding:22px;
}

.api-code-body code{
font-size:12px;
line-height:1.9;
}

}

/* =====================================
   SECURITY & RATE LIMITS SECTION
===================================== */

.api-security-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#f8fbff 0%,
#ffffff 100%
);
}

html[data-theme="dark"] .api-security-section{
background:
linear-gradient(
180deg,
#071120 0%,
#020617 100%
);
}

/* GRID */
.api-security-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* GLOW */
.api-security-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.12;
pointer-events:none;
}

.api-security-glow-1{
width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-security-glow-2{
width:360px;
height:360px;
background:#60a5fa;
bottom:-120px;
right:-120px;
}

/* HEAD */
.api-security-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
position:relative;
z-index:2;
}

.api-security-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-security-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-security-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-security-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-security-head h2{
color:#fff;
}

.api-security-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-security-head p{
color:#cbd5e1;
}

/* GRID WRAP */
.api-security-grid-wrap{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;

margin-bottom:40px;

position:relative;
z-index:2;
}

/* CARD */
.api-security-card{
padding:32px 26px;

border-radius:30px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

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

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

.api-security-card:hover{
transform:translateY(-8px);

box-shadow:
0 34px 80px rgba(15,23,42,.12);
}

html[data-theme="dark"] .api-security-card{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* ICON */
.api-security-icon{
width:74px;
height:74px;

border-radius:24px;

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

font-size:28px;

margin-bottom:22px;

background:
linear-gradient(
135deg,
rgba(37,99,235,.16),
rgba(96,165,250,.24)
);

color:#2563eb;
}

html[data-theme="dark"] .api-security-icon{
color:#93c5fd;
}

/* TEXT */
.api-security-card h3{
font-size:24px;
line-height:1.3;
font-weight:900;

margin-bottom:14px;

color:#0f172a;
}

html[data-theme="dark"] .api-security-card h3{
color:#fff;
}

.api-security-card p{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-bottom:20px;
}

html[data-theme="dark"] .api-security-card p{
color:#cbd5e1;
}

/* TAGS */
.api-security-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.api-security-tags span{
padding:9px 14px;
border-radius:100px;

font-size:12px;
font-weight:800;

background:#eff6ff;
color:#2563eb;
}

html[data-theme="dark"] .api-security-tags span{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* RATE BOX */
.api-rate-box{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;

padding:40px;

border-radius:34px;

background:
linear-gradient(
135deg,
rgba(15,23,42,.96),
rgba(2,6,23,.94)
);

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

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

position:relative;
z-index:2;
}

/* LEFT */
.api-rate-badge{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:12px;
font-weight:800;

background:rgba(96,165,250,.12);
color:#93c5fd;

margin-bottom:18px;
}

.api-rate-left h3{
font-size:38px;
line-height:1.2;
font-weight:900;

margin-bottom:18px;

color:#fff;
}

.api-rate-left p{
font-size:16px;
line-height:1.9;

color:#cbd5e1;
}

/* RIGHT */
.api-rate-right{
display:flex;
flex-direction:column;
gap:18px;
}

.api-rate-item{
padding:22px;

border-radius:24px;

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

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

.api-rate-item strong{
display:block;

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

margin-bottom:8px;

color:#fff;
}

.api-rate-item span{
font-size:14px;
line-height:1.7;

color:#cbd5e1;
}

/* RESPONSIVE */
@media(max-width:1200px){

.api-security-grid-wrap{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:900px){

.api-rate-box{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.api-security-grid-wrap{
grid-template-columns:1fr;
}

.api-security-head h2{
font-size:40px;
line-height:1.08;
}

.api-rate-box{
padding:30px 24px;
border-radius:28px;
}

.api-rate-left h3{
font-size:30px;
}

}

@media(max-width:600px){

.api-security-section{
padding:85px 16px;
}

.api-security-head p{
font-size:16px;
}

}

/* =====================================
   API CTA SECTION
===================================== */

.api-cta-section{
position:relative;
overflow:hidden;
padding:110px 20px 120px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#eef4ff 50%,
#f8fbff 100%
);
}

html[data-theme="dark"] .api-cta-section{
background:
linear-gradient(
180deg,
#020617 0%,
#071120 55%,
#0f172a 100%
);
}

/* GRID */
.api-cta-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.55;
}

/* GLOW */
.api-cta-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.18;
pointer-events:none;
}

.api-cta-glow-1{
width:360px;
height:360px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-cta-glow-2{
width:320px;
height:320px;
background:#60a5fa;
bottom:-120px;
right:-100px;
}

/* CARD */
.api-cta-card{
position:relative;

max-width:980px;
margin:auto;

text-align:center;

padding:75px 42px;

border-radius:40px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.76)
);

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

backdrop-filter:blur(20px);

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

overflow:hidden;

z-index:2;
}

html[data-theme="dark"] .api-cta-card{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 35px 90px rgba(0,0,0,.4);
}

/* FLOAT */
.api-cta-float{
position:absolute;

padding:12px 16px;
border-radius:16px;

font-size:13px;
font-weight:800;

background:#fff;
color:#111827;

box-shadow:
0 20px 40px rgba(0,0,0,.12);

animation:apiCtaFloat 6s ease-in-out infinite;
}

.api-cta-float.one{
top:24px;
left:24px;
}

.api-cta-float.two{
bottom:24px;
right:24px;
animation-delay:1.5s;
}

html[data-theme="dark"] .api-cta-float{
background:#111827;
color:#fff;
}

/* MINI */
.api-cta-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

margin-bottom:20px;

background:rgba(30,64,175,.08);
color:#1e40af;
}

html[data-theme="dark"] .api-cta-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

/* TITLE */
.api-cta-card h2{
font-size:60px;
line-height:1.05;
font-weight:900;

color:#0f172a;
}

.api-cta-card h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-cta-card h2{
color:#fff;
}

/* TEXT */
.api-cta-card p{
max-width:760px;
margin:24px auto 0;

font-size:19px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-cta-card p{
color:#cbd5e1;
}

/* BUTTONS */
.api-cta-actions{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;

margin-top:36px;
}

.api-cta-btn{
padding:17px 30px;
border-radius:18px;

font-size:15px;
font-weight:800;
text-decoration:none;

transition:.3s ease;
}

.api-cta-btn.primary-btn{
background:#2563eb;
color:#fff;

box-shadow:
0 16px 34px rgba(37,99,235,.24);
}

.api-cta-btn.secondary-btn{
background:#fff;
color:#1e40af;

border:1px solid rgba(30,64,175,.08);

box-shadow:
0 10px 24px rgba(15,23,42,.05);
}

html[data-theme="dark"] .api-cta-btn.secondary-btn{
background:#111827;
color:#93c5fd;
border:1px solid rgba(255,255,255,.05);
}

.api-cta-btn:hover{
transform:translateY(-4px);
}

/* TRUST */
.api-cta-points{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;

margin-top:34px;
}

.api-cta-points span{
display:flex;
align-items:center;
gap:10px;

padding:12px 18px;
border-radius:100px;

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

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

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

backdrop-filter:blur(12px);

box-shadow:
0 10px 22px rgba(0,0,0,.04);
}

.api-cta-points span i{
color:#2563eb;
}

html[data-theme="dark"] .api-cta-points span{
background:rgba(17,24,39,.8);
border:1px solid rgba(255,255,255,.05);
color:#fff;
}

html[data-theme="dark"] .api-cta-points span i{
color:#93c5fd;
}

/* ANIMATION */
@keyframes apiCtaFloat{

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

}

/* RESPONSIVE */
@media(max-width:768px){

.api-cta-card{
padding:50px 24px;
border-radius:30px;
}

.api-cta-card h2{
font-size:42px;
line-height:1.08;
}

.api-cta-card p{
font-size:16px;
}

.api-cta-float{
display:none;
}

}

@media(max-width:600px){

.api-cta-section{
padding:85px 16px 90px;
}

.api-cta-actions{
flex-direction:column;
}

.api-cta-btn{
width:100%;
text-align:center;
}

.api-cta-points span{
width:100%;
justify-content:center;
}

}

/* =====================================
   API FAQ SECTION
===================================== */

.api-faq-section{
position:relative;
overflow:hidden;
padding:110px 20px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
}

html[data-theme="dark"] .api-faq-section{
background:
linear-gradient(
180deg,
#020617 0%,
#071120 100%
);
}

/* GRID */
.api-faq-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(30,64,175,.03) 1px, transparent 1px),
linear-gradient(90deg,rgba(30,64,175,.03) 1px, transparent 1px);

background-size:52px 52px;
opacity:.5;
}

/* GLOW */
.api-faq-glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.12;
pointer-events:none;
}

.api-faq-glow-1{
width:420px;
height:420px;
background:#2563eb;
top:-120px;
left:-120px;
}

.api-faq-glow-2{
width:360px;
height:360px;
background:#60a5fa;
bottom:-120px;
right:-120px;
}

/* HEAD */
.api-faq-head{
max-width:760px;
margin:0 auto 70px;
text-align:center;
position:relative;
z-index:2;
}

.api-faq-mini{
display:inline-block;

padding:10px 16px;
border-radius:100px;

font-size:13px;
font-weight:800;

background:rgba(30,64,175,.08);
color:#1e40af;

margin-bottom:18px;
}

html[data-theme="dark"] .api-faq-mini{
background:rgba(96,165,250,.12);
color:#93c5fd;
}

.api-faq-head h2{
font-size:56px;
line-height:1.05;
font-weight:900;
color:#0f172a;
}

.api-faq-head h2 span{
display:block;
margin-top:10px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

html[data-theme="dark"] .api-faq-head h2{
color:#fff;
}

.api-faq-head p{
margin-top:22px;

font-size:18px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-faq-head p{
color:#cbd5e1;
}

/* WRAP */
.api-faq-wrap{
max-width:950px;
margin:auto;

display:flex;
flex-direction:column;
gap:20px;

position:relative;
z-index:2;
}

/* ITEM */
.api-faq-item{
border-radius:28px;
overflow:hidden;

background:
linear-gradient(
135deg,
rgba(255,255,255,.92),
rgba(255,255,255,.75)
);

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

backdrop-filter:blur(18px);

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

html[data-theme="dark"] .api-faq-item{
background:
linear-gradient(
135deg,
rgba(15,23,42,.92),
rgba(2,6,23,.9)
);

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

box-shadow:
0 28px 70px rgba(0,0,0,.35);
}

/* QUESTION */
.api-faq-question{
width:100%;

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

padding:28px 30px;

background:none;
border:none;
outline:none;
cursor:pointer;

text-align:left;
}

.api-faq-question span{
font-size:20px;
line-height:1.5;
font-weight:800;

color:#0f172a;
}

html[data-theme="dark"] .api-faq-question span{
color:#fff;
}

.api-faq-question i{
font-size:18px;
color:#2563eb;

transition:.3s ease;
}

html[data-theme="dark"] .api-faq-question i{
color:#93c5fd;
}

/* ANSWER */
.api-faq-answer{
display:none;

padding:
0 30px 28px 30px;
}

.api-faq-answer p{
font-size:15px;
line-height:1.9;

color:#64748b;
}

html[data-theme="dark"] .api-faq-answer p{
color:#cbd5e1;
}

/* ACTIVE */
.api-faq-item.active .api-faq-answer{
display:block;
}

.api-faq-item.active .api-faq-question i{
transform:rotate(45deg);
}

/* RESPONSIVE */
@media(max-width:768px){

.api-faq-head h2{
font-size:40px;
line-height:1.08;
}

.api-faq-question{
padding:24px 22px;
}

.api-faq-question span{
font-size:17px;
}

.api-faq-answer{
padding:
0 22px 24px 22px;
}

}

@media(max-width:600px){

.api-faq-section{
padding:85px 16px;
}

.api-faq-head p{
font-size:16px;
}

}
/* ===== rent.css ===== */
/* =====================================
   RENT HERO SECTION
===================================== */

.rent-hero-section {
  position: relative;
  overflow: hidden;
  padding: 170px 20px 95px;

  background:
    radial-gradient(circle at 12% 20%, rgba(96, 165, 250, .18), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(30, 64, 175, .14), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 45%, #ffffff 100%);
}

html[data-theme="dark"] .rent-hero-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(59, 130, 246, .18), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(96, 165, 250, .10), transparent 24%),
    linear-gradient(180deg, #020617 0%, #081120 45%, #0f172a 100%);
}

/* GRID */
.rent-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 64, 175, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: rentGridMove 18s linear infinite;
  opacity: .65;
}

html[data-theme="dark"] .rent-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
}

/* GLOW */
.rent-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .55;
  animation: rentFloatGlow 8s ease-in-out infinite;
}

.rent-glow-1 {
  width: 260px;
  height: 260px;
  background: #60a5fa;
  top: 70px;
  left: -70px;
}

.rent-glow-2 {
  width: 240px;
  height: 240px;
  background: #1e40af;
  right: -70px;
  top: 220px;
  animation-delay: 2s;
}

/* CONTAINER */
.rent-hero-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 5;
}

.rent-hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
}

/* LEFT */
.rent-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 24px;

  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(16px);
}

.rent-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
}

html[data-theme="dark"] .rent-badge {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  color: #fff;
}

.rent-title {
  font-size: 64px;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -1.4px;
  color: #111827;
}

.rent-title span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-title {
  color: #fff;
}

html[data-theme="dark"] .rent-title span {
  color: #93c5fd;
}

.rent-subtitle {
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.8;
  color: #64748b;
  max-width: 640px;
}

html[data-theme="dark"] .rent-subtitle {
  color: #cbd5e1;
}

/* HIGHLIGHTS */
.rent-highlights {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.rent-highlights span {
  padding: 12px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .45);
}

html[data-theme="dark"] .rent-highlights span {
  background: rgba(15, 23, 42, .75);
  border: 1px solid rgba(255, 255, 255, .04);
  color: #fff;
}

/* BUTTONS */
.rent-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.rent-btn {
  padding: 16px 26px;
  border-radius: 18px;
  font-weight: 900;
  text-decoration: none;
  transition: .25s ease;
}

.rent-btn.primary-btn {
  background: #1e40af;
  color: #fff;
  box-shadow: 0 14px 28px rgba(30, 64, 175, .22);
}

.rent-btn.secondary-btn {
  background: #eef2ff;
  color: #1e40af;
}

html[data-theme="dark"] .rent-btn.secondary-btn {
  background: #111827;
  color: #93c5fd;
  border: 1px solid rgba(255, 255, 255, .05);
}

.rent-btn:hover {
  transform: translateY(-3px);
}

/* RIGHT CARD */
.rent-card {
  position: relative;
  padding: 28px;
  border-radius: 34px;

  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(20px);

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

html[data-theme="dark"] .rent-card {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

/* FLOAT BADGES */
.rent-float {
  position: absolute;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: #fff;
  color: #111827;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .08);
  animation: rentFloatGlow 6s ease-in-out infinite;
  white-space: nowrap;
}

.rent-float.one {
  top: -14px;
  left: -16px;
}

.rent-float.two {
  bottom: -14px;
  right: -16px;
  animation-delay: 1.5s;
}

html[data-theme="dark"] .rent-float {
  background: #111827;
  color: #fff;
  box-shadow: none;
}

/* STATS GRID */
.rent-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.rent-stat {
  padding: 24px 18px;
  border-radius: 24px;
  text-align: center;
  background: rgba(248, 250, 252, .85);
}

.rent-stat strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  color: #1e40af;
}

.rent-stat span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #64748b;
}

html[data-theme="dark"] .rent-stat {
  background: #111827;
}

html[data-theme="dark"] .rent-stat strong {
  color: #93c5fd;
}

html[data-theme="dark"] .rent-stat span {
  color: #cbd5e1;
}

/* PLAN TAGS */
.rent-plan-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

html[data-theme="dark"] .rent-plan-tags {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.rent-plan-tag {
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(30, 64, 175, .08);
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, .18);
}

html[data-theme="dark"] .rent-plan-tag {
  background: rgba(96, 165, 250, .10);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, .18);
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .rent-hero-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rent-title {
    font-size: 48px;
  }

  .rent-subtitle {
    font-size: 18px;
  }

  .rent-left {
    text-align: center;
  }

  .rent-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .rent-highlights,
  .rent-actions {
    justify-content: center;
  }

}

@media (max-width: 600px) {

  .rent-hero-section {
    padding: 150px 16px 70px;
  }

  .rent-title {
    font-size: 34px;
  }

  .rent-subtitle {
    font-size: 16px;
  }

  .rent-actions {
    flex-direction: column;
  }

  .rent-btn {
    width: 100%;
    text-align: center;
  }

  .rent-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .rent-float {
    display: none;
  }

}

/* ANIMATIONS */
@keyframes rentGridMove {
  100% { transform: translate(56px, 56px); }
}

@keyframes rentFloatGlow {
  50% { transform: translateY(-14px); }
}
/* =====================================
   HOW RENTAL NUMBERS WORK
===================================== */

.rent-how-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;

  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  transition: .35s ease;
}

html[data-theme="dark"] .rent-how-section {
  background:
    linear-gradient(180deg, #0b1220 0%, #020617 100%);
}

/* BG */
.rent-how-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 64, 175, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, .03) 1px, transparent 1px);
  background-size: 52px 52px;
}

html[data-theme="dark"] .rent-how-grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
}

.rent-how-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}

.rent-how-glow-1 {
  width: 240px;
  height: 240px;
  background: #60a5fa;
  top: 50px;
  left: -70px;
}

.rent-how-glow-2 {
  width: 220px;
  height: 220px;
  background: #1e40af;
  bottom: 40px;
  right: -70px;
}

/* CONTAINER */
.rent-how-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* HEAD */
.rent-how-head {
  text-align: center;
  max-width: 820px;
  margin: auto;
}

.rent-how-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-how-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-how-head h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.rent-how-head h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-how-head h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-how-head h2 span {
  color: #93c5fd;
}

.rent-how-head p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-how-head p {
  color: #cbd5e1;
}

/* STEPS GRID */
.rent-how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px;
  position: relative;
}

/* CONNECTOR LINE */
.rent-how-steps::before {
  content: "";
  position: absolute;
  top: 46px;
  left: calc(12.5% + 8px);
  right: calc(12.5% + 8px);
  height: 2px;
  background: linear-gradient(90deg, #1e40af, #93c5fd, #1e40af);
  opacity: .25;
  z-index: 0;
}

html[data-theme="dark"] .rent-how-steps::before {
  opacity: .18;
}

/* STEP CARD */
.rent-how-step {
  position: relative;
  z-index: 1;
  padding: 32px 22px 28px;
  border-radius: 28px;
  text-align: center;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 22px 48px rgba(0, 0, 0, .05);
  transition: .28s ease;
}

.rent-how-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 60px rgba(30, 64, 175, .10);
}

html[data-theme="dark"] .rent-how-step {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

html[data-theme="dark"] .rent-how-step:hover {
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

/* STEP NUMBER */
.rent-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 18px;
  font-weight: 900;

  background: #1e40af;
  color: #fff;
  box-shadow: 0 10px 24px rgba(30, 64, 175, .28);
  position: relative;
  z-index: 2;
}

html[data-theme="dark"] .rent-step-num {
  background: #1e3a8a;
  box-shadow: 0 10px 24px rgba(30, 64, 175, .40);
}

/* STEP ICON */
.rent-step-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-step-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-how-step h3 {
  font-size: 18px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 10px;
}

html[data-theme="dark"] .rent-how-step h3 {
  color: #fff;
}

.rent-how-step p {
  font-size: 14px;
  line-height: 1.75;
  color: #64748b;
}

html[data-theme="dark"] .rent-how-step p {
  color: #94a3b8;
}

/* BOTTOM INFO ROW */
.rent-how-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.rent-how-info-card {
  padding: 28px 24px;
  border-radius: 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 22px 48px rgba(0, 0, 0, .05);
  transition: .28s ease;
}

.rent-how-info-card:hover {
  transform: translateY(-5px);
}

html[data-theme="dark"] .rent-how-info-card {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

.rent-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-info-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-info-text h4 {
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
}

.rent-info-text p {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
}

html[data-theme="dark"] .rent-info-text h4 {
  color: #fff;
}

html[data-theme="dark"] .rent-info-text p {
  color: #94a3b8;
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .rent-how-head h2 {
    font-size: 42px;
  }

  .rent-how-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .rent-how-steps::before {
    display: none;
  }

  .rent-how-info {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .rent-how-section {
    padding: 80px 16px;
  }

  .rent-how-head h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .rent-how-head p {
    font-size: 16px;
    line-height: 1.75;
  }

  .rent-how-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rent-how-step {
    padding: 26px 20px;
  }

  .rent-how-info {
    grid-template-columns: 1fr;
    gap: 14px;
  }

}

/* =====================================
   RENTAL DURATION OPTIONS
===================================== */

.rent-duration-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;

  background:
    linear-gradient(180deg, #eef4ff 0%, #ffffff 55%, #f8fafc 100%);
  transition: .35s ease;
}

html[data-theme="dark"] .rent-duration-section {
  background:
    linear-gradient(180deg, #020617 0%, #0b1220 55%, #111827 100%);
}

/* BG */
.rent-dur-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(30, 64, 175, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .55;
  animation: rentDurGridMove 18s linear infinite;
}

html[data-theme="dark"] .rent-dur-grid-bg {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .03) 1px, transparent 1px);
}

.rent-dur-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}

.rent-dur-glow-1 {
  width: 240px;
  height: 240px;
  background: #60a5fa;
  top: 50px;
  left: -70px;
}

.rent-dur-glow-2 {
  width: 220px;
  height: 220px;
  background: #1e40af;
  bottom: 40px;
  right: -70px;
}

/* CONTAINER */
.rent-dur-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* HEAD */
.rent-dur-head {
  text-align: center;
  max-width: 820px;
  margin: auto;
}

.rent-dur-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-dur-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-dur-head h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.rent-dur-head h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-dur-head h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-dur-head h2 span {
  color: #93c5fd;
}

.rent-dur-head p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-dur-head p {
  color: #cbd5e1;
}

/* DURATION CARDS */
.rent-dur-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 52px;
}

.rent-dur-card {
  position: relative;
  padding: 36px 28px;
  border-radius: 30px;
  overflow: hidden;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 22px 48px rgba(0, 0, 0, .05);
  transition: .28s ease;
}

.rent-dur-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 60px rgba(30, 64, 175, .10);
}

html[data-theme="dark"] .rent-dur-card {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

html[data-theme="dark"] .rent-dur-card:hover {
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

/* FEATURED CARD */
.rent-dur-card.featured {
  background: linear-gradient(145deg, #1e3a8a, #1e40af);
  border: 1px solid rgba(96, 165, 250, .25);
  box-shadow: 0 28px 60px rgba(30, 64, 175, .28);
}

.rent-dur-card.featured:hover {
  box-shadow: 0 38px 70px rgba(30, 64, 175, .38);
}

html[data-theme="dark"] .rent-dur-card.featured {
  background: linear-gradient(145deg, #1e3a8a, #1d4ed8);
  border: 1px solid rgba(96, 165, 250, .20);
  box-shadow: 0 28px 60px rgba(30, 64, 175, .35);
}

/* POPULAR BADGE */
.rent-dur-popular {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;

  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
}

/* ICON */
.rent-dur-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

.rent-dur-card.featured .rent-dur-icon {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

html[data-theme="dark"] .rent-dur-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

/* RANGE LABEL */
.rent-dur-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 16px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, .12);
}

.rent-dur-card.featured .rent-dur-range {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .20);
}

html[data-theme="dark"] .rent-dur-range {
  background: rgba(96, 165, 250, .10);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, .15);
}

/* TITLE */
.rent-dur-card h3 {
  font-size: 28px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 10px;
}

.rent-dur-card.featured h3 {
  color: #fff;
}

html[data-theme="dark"] .rent-dur-card h3 {
  color: #fff;
}

/* DESC */
.rent-dur-card p {
  font-size: 15px;
  line-height: 1.8;
  color: #64748b;
  margin-bottom: 24px;
}

.rent-dur-card.featured p {
  color: rgba(255, 255, 255, .78);
}

html[data-theme="dark"] .rent-dur-card p {
  color: #94a3b8;
}

/* PERKS LIST */
.rent-dur-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rent-dur-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.rent-dur-perks li i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

.rent-dur-card.featured .rent-dur-perks li {
  color: rgba(255, 255, 255, .88);
}

.rent-dur-card.featured .rent-dur-perks li i {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

html[data-theme="dark"] .rent-dur-perks li {
  color: #cbd5e1;
}

html[data-theme="dark"] .rent-dur-perks li i {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

/* CTA BUTTON */
.rent-dur-cta {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  transition: .25s ease;

  background: #eef2ff;
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, .12);
}

.rent-dur-cta:hover {
  background: #1e40af;
  color: #fff;
  transform: translateY(-2px);
}

.rent-dur-card.featured .rent-dur-cta {
  background: #fff;
  color: #1e40af;
  border: none;
}

.rent-dur-card.featured .rent-dur-cta:hover {
  background: rgba(255, 255, 255, .88);
  transform: translateY(-2px);
}

html[data-theme="dark"] .rent-dur-cta {
  background: rgba(96, 165, 250, .10);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, .15);
}

html[data-theme="dark"] .rent-dur-cta:hover {
  background: #1e40af;
  color: #fff;
}

/* DIVIDER */
.rent-dur-divider {
  height: 1px;
  background: rgba(0, 0, 0, .06);
  margin: 0 0 24px;
}

.rent-dur-card.featured .rent-dur-divider {
  background: rgba(255, 255, 255, .15);
}

html[data-theme="dark"] .rent-dur-divider {
  background: rgba(255, 255, 255, .06);
}

/* BOTTOM NOTE */
.rent-dur-note {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html[data-theme="dark"] .rent-dur-note {
  color: #64748b;
}

.rent-dur-note i {
  color: #1e40af;
}

html[data-theme="dark"] .rent-dur-note i {
  color: #93c5fd;
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .rent-dur-head h2 {
    font-size: 42px;
  }

  .rent-dur-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 600px) {

  .rent-duration-section {
    padding: 80px 16px;
  }

  .rent-dur-head h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .rent-dur-head p {
    font-size: 16px;
    line-height: 1.75;
  }

  .rent-dur-card {
    padding: 28px 20px;
  }

  .rent-dur-card h3 {
    font-size: 24px;
  }

}

/* ANIMATION */
@keyframes rentDurGridMove {
  100% { transform: translate(34px, 34px); }
}

/* =====================================
   SUPPORTED SERVICES
===================================== */

.rent-services-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;

  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  transition: .35s ease;
}

html[data-theme="dark"] .rent-services-section {
  background:
    linear-gradient(180deg, #0b1220 0%, #020617 100%);
}

/* BG */
.rent-svc-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 64, 175, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, .03) 1px, transparent 1px);
  background-size: 52px 52px;
}

html[data-theme="dark"] .rent-svc-grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
}

.rent-svc-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}

.rent-svc-glow-1 {
  width: 240px;
  height: 240px;
  background: #60a5fa;
  top: 50px;
  left: -70px;
}

.rent-svc-glow-2 {
  width: 220px;
  height: 220px;
  background: #1e40af;
  bottom: 40px;
  right: -70px;
}

/* CONTAINER */
.rent-svc-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* HEAD */
.rent-svc-head {
  text-align: center;
  max-width: 820px;
  margin: auto;
}

.rent-svc-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-svc-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-svc-head h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.rent-svc-head h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-svc-head h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-svc-head h2 span {
  color: #93c5fd;
}

.rent-svc-head p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-svc-head p {
  color: #cbd5e1;
}

/* FILTER TABS */
.rent-svc-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.rent-svc-filter {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: .22s ease;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(30, 64, 175, .12);
  color: #64748b;
}

.rent-svc-filter:hover,
.rent-svc-filter.active {
  background: #1e40af;
  color: #fff;
  border-color: #1e40af;
  box-shadow: 0 8px 20px rgba(30, 64, 175, .22);
}

html[data-theme="dark"] .rent-svc-filter {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .06);
  color: #94a3b8;
}

html[data-theme="dark"] .rent-svc-filter:hover,
html[data-theme="dark"] .rent-svc-filter.active {
  background: #1e40af;
  color: #fff;
  border-color: #1e40af;
}

/* SERVICES GRID */
.rent-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}

/* SERVICE CARD */
.rent-svc-card {
  padding: 28px 20px;
  border-radius: 26px;
  text-align: center;
  cursor: pointer;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 16px 36px rgba(0, 0, 0, .05);
  transition: .26s ease;
}

.rent-svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px rgba(30, 64, 175, .10);
  border-color: rgba(30, 64, 175, .18);
}

html[data-theme="dark"] .rent-svc-card {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

html[data-theme="dark"] .rent-svc-card:hover {
  border-color: rgba(96, 165, 250, .18);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .30);
}

/* SERVICE ICON WRAPPER */
.rent-svc-icon-wrap {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 16px;
  transition: .26s ease;
}

.rent-svc-card:hover .rent-svc-icon-wrap {
  transform: scale(1.08);
}

/* ICON COLORS — per service */
.icon-whatsapp  { background: rgba(37, 211, 102, .10); color: #25d366; }
.icon-telegram  { background: rgba(0, 136, 204, .10);  color: #0088cc; }
.icon-google    { background: rgba(66, 133, 244, .10);  color: #4285f4; }
.icon-facebook  { background: rgba(24, 119, 242, .10);  color: #1877f2; }
.icon-instagram { background: rgba(193, 53, 132, .10);  color: #c13584; }
.icon-twitter   { background: rgba(29, 161, 242, .10);  color: #1da1f2; }
.icon-tiktok    { background: rgba(0, 0, 0, .06);       color: #010101; }
.icon-microsoft { background: rgba(0, 120, 215, .10);   color: #0078d7; }
.icon-amazon    { background: rgba(255, 153, 0, .10);   color: #ff9900; }
.icon-netflix   { background: rgba(229, 9, 20, .10);    color: #e50914; }
.icon-uber      { background: rgba(0, 0, 0, .06);       color: #000000; }
.icon-discord   { background: rgba(88, 101, 242, .10);  color: #5865f2; }
.icon-snapchat  { background: rgba(255, 252, 0, .14);   color: #c8b800; }
.icon-linkedin  { background: rgba(0, 119, 181, .10);   color: #0077b5; }
.icon-paypal    { background: rgba(0, 112, 186, .10);   color: #0070ba; }
.icon-other     { background: rgba(30, 64, 175, .08);   color: #1e40af; }

html[data-theme="dark"] .icon-tiktok  { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="dark"] .icon-uber    { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="dark"] .icon-snapchat{ background: rgba(255,252,0,.10);  color: #ffe600; }

/* SERVICE NAME */
.rent-svc-card h4 {
  font-size: 15px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
}

html[data-theme="dark"] .rent-svc-card h4 {
  color: #fff;
}

/* AVAILABLE BADGE */
.rent-svc-avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
}

.rent-svc-avail.available {
  background: rgba(16, 185, 129, .08);
  color: #059669;
}

.rent-svc-avail.available i {
  font-size: 9px;
}

html[data-theme="dark"] .rent-svc-avail.available {
  background: rgba(16, 185, 129, .12);
  color: #34d399;
}

/* BOTTOM ROW */
.rent-svc-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.rent-svc-bottom-card {
  padding: 28px 24px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  gap: 20px;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 16px 36px rgba(0, 0, 0, .05);
  transition: .26s ease;
}

.rent-svc-bottom-card:hover {
  transform: translateY(-4px);
}

html[data-theme="dark"] .rent-svc-bottom-card {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

.rent-svc-bottom-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-svc-bottom-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-svc-bottom-text h4 {
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 5px;
}

.rent-svc-bottom-text p {
  font-size: 14px;
  line-height: 1.65;
  color: #64748b;
}

html[data-theme="dark"] .rent-svc-bottom-text h4 {
  color: #fff;
}

html[data-theme="dark"] .rent-svc-bottom-text p {
  color: #94a3b8;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .rent-svc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {

  .rent-svc-head h2 {
    font-size: 42px;
  }

  .rent-svc-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rent-svc-bottom {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .rent-services-section {
    padding: 80px 16px;
  }

  .rent-svc-head h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .rent-svc-head p {
    font-size: 16px;
    line-height: 1.75;
  }

  .rent-svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rent-svc-card {
    padding: 22px 14px;
  }

  .rent-svc-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
  }

}

/* =====================================
   RENTAL FEATURES GRID
===================================== */

.rent-features-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;

  background:
    linear-gradient(180deg, #eef4ff 0%, #ffffff 55%, #f8fafc 100%);
  transition: .35s ease;
}

html[data-theme="dark"] .rent-features-section {
  background:
    linear-gradient(180deg, #020617 0%, #0b1220 55%, #111827 100%);
}

/* BG */
.rent-feat-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(30, 64, 175, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .55;
  animation: rentFeatGridMove 18s linear infinite;
}

html[data-theme="dark"] .rent-feat-grid-bg {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .03) 1px, transparent 1px);
}

.rent-feat-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}

.rent-feat-glow-1 {
  width: 240px;
  height: 240px;
  background: #60a5fa;
  top: 50px;
  left: -70px;
}

.rent-feat-glow-2 {
  width: 220px;
  height: 220px;
  background: #1e40af;
  bottom: 40px;
  right: -70px;
}

/* CONTAINER */
.rent-feat-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* HEAD */
.rent-feat-head {
  text-align: center;
  max-width: 820px;
  margin: auto;
}

.rent-feat-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-feat-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-feat-head h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.rent-feat-head h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-feat-head h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-feat-head h2 span {
  color: #93c5fd;
}

.rent-feat-head p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-feat-head p {
  color: #cbd5e1;
}

/* =====================================
   BENTO GRID
===================================== */

.rent-feat-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 18px;
  margin-top: 52px;
}

/* BASE CARD */
.rent-feat-card {
  padding: 32px 26px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 22px 48px rgba(0, 0, 0, .05);
  transition: .28s ease;
}

.rent-feat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 58px rgba(30, 64, 175, .10);
}

html[data-theme="dark"] .rent-feat-card {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

html[data-theme="dark"] .rent-feat-card:hover {
  box-shadow: 0 24px 48px rgba(0, 0, 0, .30);
}

/* SPAN SIZES */
.rent-feat-card.span-2 {
  grid-column: span 2;
}

.rent-feat-card.span-3 {
  grid-column: span 3;
}

.rent-feat-card.span-full {
  grid-column: span 4;
}

/* HIGHLIGHTED CARD */
.rent-feat-card.highlight {
  background: linear-gradient(145deg, #1e3a8a, #1e40af);
  border: 1px solid rgba(96, 165, 250, .22);
  box-shadow: 0 28px 58px rgba(30, 64, 175, .28);
}

.rent-feat-card.highlight:hover {
  box-shadow: 0 38px 68px rgba(30, 64, 175, .36);
}

html[data-theme="dark"] .rent-feat-card.highlight {
  background: linear-gradient(145deg, #1e3a8a, #1d4ed8);
  box-shadow: 0 28px 58px rgba(30, 64, 175, .38);
}

/* ICON */
.rent-feat-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-feat-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-feat-card.highlight .rent-feat-icon {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

/* TEXT */
.rent-feat-card h3 {
  font-size: 20px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 10px;
}

.rent-feat-card p {
  font-size: 15px;
  line-height: 1.75;
  color: #64748b;
}

html[data-theme="dark"] .rent-feat-card h3 {
  color: #fff;
}

html[data-theme="dark"] .rent-feat-card p {
  color: #94a3b8;
}

.rent-feat-card.highlight h3 {
  color: #fff;
}

.rent-feat-card.highlight p {
  color: rgba(255, 255, 255, .72);
}

/* BIG STAT INSIDE CARD */
.rent-feat-stat {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: #1e40af;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

html[data-theme="dark"] .rent-feat-stat {
  color: #93c5fd;
}

.rent-feat-card.highlight .rent-feat-stat {
  color: #fff;
}

/* INLINE TAGS ROW */
.rent-feat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.rent-feat-tag {
  padding: 7px 13px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, .12);
}

html[data-theme="dark"] .rent-feat-tag {
  background: rgba(96, 165, 250, .10);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, .14);
}

.rent-feat-card.highlight .rent-feat-tag {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .20);
}

/* CHECKLIST INSIDE CARD */
.rent-feat-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rent-feat-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.rent-feat-list li i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-feat-list li {
  color: #cbd5e1;
}

html[data-theme="dark"] .rent-feat-list li i {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-feat-card.highlight .rent-feat-list li {
  color: rgba(255, 255, 255, .85);
}

.rent-feat-card.highlight .rent-feat-list li i {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* HORIZONTAL LAYOUT FOR WIDE CARDS */
.rent-feat-card.horizontal {
  display: flex;
  align-items: center;
  gap: 28px;
}

.rent-feat-card.horizontal .rent-feat-icon {
  margin-bottom: 0;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  font-size: 26px;
}

.rent-feat-card.horizontal .rent-feat-body {
  flex: 1;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .rent-feat-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .rent-feat-card.span-2,
  .rent-feat-card.span-3,
  .rent-feat-card.span-full {
    grid-column: span 2;
  }
}

@media (max-width: 991px) {

  .rent-feat-head h2 {
    font-size: 42px;
  }

  .rent-feat-card.horizontal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .rent-feat-card.horizontal .rent-feat-icon {
    margin-bottom: 20px;
  }

}

@media (max-width: 600px) {

  .rent-features-section {
    padding: 80px 16px;
  }

  .rent-feat-head h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .rent-feat-head p {
    font-size: 16px;
    line-height: 1.75;
  }

  .rent-feat-bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rent-feat-card.span-2,
  .rent-feat-card.span-3,
  .rent-feat-card.span-full {
    grid-column: span 1;
  }

  .rent-feat-card {
    padding: 26px 20px;
  }

  .rent-feat-stat {
    font-size: 42px;
  }

}

/* ANIMATION */
@keyframes rentFeatGridMove {
  100% { transform: translate(34px, 34px); }
}

/* =====================================
   API RENTAL INTEGRATION
===================================== */

.rent-api-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;

  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  transition: .35s ease;
}

html[data-theme="dark"] .rent-api-section {
  background:
    linear-gradient(180deg, #0b1220 0%, #020617 100%);
}

/* BG */
.rent-api-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 64, 175, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, .03) 1px, transparent 1px);
  background-size: 52px 52px;
}

html[data-theme="dark"] .rent-api-grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
}

.rent-api-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}

.rent-api-glow-1 {
  width: 240px;
  height: 240px;
  background: #60a5fa;
  top: 50px;
  left: -70px;
}

.rent-api-glow-2 {
  width: 220px;
  height: 220px;
  background: #1e40af;
  bottom: 40px;
  right: -70px;
}

/* CONTAINER */
.rent-api-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* HEAD */
.rent-api-head {
  text-align: center;
  max-width: 820px;
  margin: auto;
}

.rent-api-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-api-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-api-head h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.rent-api-head h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-api-head h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-api-head h2 span {
  color: #93c5fd;
}

.rent-api-head p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-api-head p {
  color: #cbd5e1;
}

/* MAIN LAYOUT */
.rent-api-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  margin-top: 52px;
  align-items: start;
}

/* =====================================
   LEFT — ENDPOINT CARDS
===================================== */

.rent-api-endpoints {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rent-api-endpoint {
  padding: 22px 22px;
  border-radius: 22px;
  cursor: pointer;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 14px 32px rgba(0, 0, 0, .05);
  transition: .26s ease;

  display: flex;
  align-items: center;
  gap: 16px;
}

.rent-api-endpoint:hover {
  transform: translateX(4px);
  box-shadow: 0 18px 38px rgba(30, 64, 175, .10);
  border-color: rgba(30, 64, 175, .18);
}

html[data-theme="dark"] .rent-api-endpoint {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

html[data-theme="dark"] .rent-api-endpoint:hover {
  border-color: rgba(96, 165, 250, .18);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

/* METHOD BADGE */
.rent-api-method {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
}

.method-get {
  background: rgba(16, 185, 129, .10);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, .20);
}

.method-post {
  background: rgba(30, 64, 175, .10);
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, .20);
}

html[data-theme="dark"] .method-get {
  background: rgba(16, 185, 129, .14);
  color: #34d399;
  border-color: rgba(16, 185, 129, .18);
}

html[data-theme="dark"] .method-post {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, .18);
}

/* ENDPOINT TEXT */
.rent-api-ep-info {
  flex: 1;
  min-width: 0;
}

.rent-api-ep-path {
  font-size: 13px;
  font-weight: 900;
  color: #1e40af;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

html[data-theme="dark"] .rent-api-ep-path {
  color: #93c5fd;
}

.rent-api-ep-desc {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

html[data-theme="dark"] .rent-api-ep-desc {
  color: #94a3b8;
}

/* ARROW */
.rent-api-ep-arrow {
  color: #cbd5e1;
  font-size: 13px;
  flex-shrink: 0;
  transition: .22s ease;
}

.rent-api-endpoint:hover .rent-api-ep-arrow {
  color: #1e40af;
  transform: translateX(3px);
}

html[data-theme="dark"] .rent-api-ep-arrow {
  color: #334155;
}

html[data-theme="dark"] .rent-api-endpoint:hover .rent-api-ep-arrow {
  color: #93c5fd;
}

/* =====================================
   RIGHT — CODE BLOCK PANEL
===================================== */

.rent-api-panel {
  position: relative;
  border-radius: 26px;
  overflow: hidden;

  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, .06);

  box-shadow: 0 30px 64px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .rent-api-panel {
  background: #020617;
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 30px 64px rgba(0, 0, 0, .35);
}

/* PANEL TOPBAR */
.rent-api-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .03);
}

.rent-api-panel-dots {
  display: flex;
  gap: 6px;
}

.rent-api-panel-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.rent-api-panel-dots span:nth-child(1) { background: #ef4444; }
.rent-api-panel-dots span:nth-child(2) { background: #f59e0b; }
.rent-api-panel-dots span:nth-child(3) { background: #10b981; }

.rent-api-panel-label {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  font-family: 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rent-api-panel-label i {
  color: #1e40af;
}

.rent-api-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: .22s ease;

  background: rgba(30, 64, 175, .15);
  color: #93c5fd;
}

.rent-api-copy:hover {
  background: rgba(30, 64, 175, .28);
}

/* CODE BLOCK */
.rent-api-code {
  padding: 24px 22px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: #e2e8f0;
  min-height: 280px;
}

.rent-api-code .c-comment  { color: #475569; }
.rent-api-code .c-key      { color: #93c5fd; }
.rent-api-code .c-string   { color: #86efac; }
.rent-api-code .c-number   { color: #fbbf24; }
.rent-api-code .c-method   { color: #c084fc; }
.rent-api-code .c-url      { color: #67e8f9; }
.rent-api-code .c-bracket  { color: #94a3b8; }

/* RESPONSE PANEL */
.rent-api-response {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 16px 22px;
  background: rgba(16, 185, 129, .04);
}

.rent-api-response-label {
  font-size: 11px;
  font-weight: 900;
  color: #059669;
  font-family: 'Courier New', monospace;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

html[data-theme="dark"] .rent-api-response-label {
  color: #34d399;
}

.rent-api-response-label i {
  font-size: 9px;
}

.rent-api-response pre {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #86efac;
  white-space: pre-wrap;
  margin: 0;
}

/* =====================================
   BOTTOM — FEATURE PILLS ROW
===================================== */

.rent-api-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  justify-content: center;
}

.rent-api-pill {
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .04);
  color: #374151;
}

html[data-theme="dark"] .rent-api-pill {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  color: #cbd5e1;
  box-shadow: none;
}

.rent-api-pill i {
  color: #1e40af;
}

html[data-theme="dark"] .rent-api-pill i {
  color: #93c5fd;
}

/* DOCS LINK */
.rent-api-docs-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: .25s ease;

  background: #1e40af;
  color: #fff;
  box-shadow: 0 12px 26px rgba(30, 64, 175, .22);
}

.rent-api-docs-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(30, 64, 175, .30);
}

.rent-api-docs-wrap {
  text-align: center;
  margin-top: 14px;
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .rent-api-head h2 {
    font-size: 42px;
  }

  .rent-api-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }

}

@media (max-width: 600px) {

  .rent-api-section {
    padding: 80px 16px;
  }

  .rent-api-head h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .rent-api-head p {
    font-size: 16px;
    line-height: 1.75;
  }

  .rent-api-ep-path {
    font-size: 12px;
  }

  .rent-api-code {
    font-size: 12px;
    padding: 18px 16px;
  }

  .rent-api-pills {
    gap: 10px;
  }

  .rent-api-pill {
    font-size: 12px;
    padding: 10px 14px;
  }

}

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

.rent-faq-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;

  background:
    linear-gradient(180deg, #eef4ff 0%, #ffffff 55%, #f8fafc 100%);
  transition: .35s ease;
}

html[data-theme="dark"] .rent-faq-section {
  background:
    linear-gradient(180deg, #020617 0%, #0b1220 55%, #111827 100%);
}

/* BG */
.rent-faq-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(30, 64, 175, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .55;
  animation: rentFaqGridMove 18s linear infinite;
}

html[data-theme="dark"] .rent-faq-grid-bg {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .03) 1px, transparent 1px);
}

.rent-faq-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}

.rent-faq-glow-1 {
  width: 240px;
  height: 240px;
  background: #60a5fa;
  top: 50px;
  left: -70px;
}

.rent-faq-glow-2 {
  width: 220px;
  height: 220px;
  background: #1e40af;
  bottom: 40px;
  right: -70px;
}

/* CONTAINER */
.rent-faq-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* LAYOUT */
.rent-faq-wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 52px;
  align-items: start;
}

/* =====================================
   LEFT — STICKY INFO
===================================== */

.rent-faq-left {
  position: sticky;
  top: 100px;
}

.rent-faq-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-faq-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-faq-left h2 {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.rent-faq-left h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .rent-faq-left h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-faq-left h2 span {
  color: #93c5fd;
}

.rent-faq-left p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-faq-left p {
  color: #cbd5e1;
}

/* STAT PILLS */
.rent-faq-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.rent-faq-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .04);
}

html[data-theme="dark"] .rent-faq-stat {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

.rent-faq-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-faq-stat-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

.rent-faq-stat-text strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: #111827;
}

.rent-faq-stat-text span {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

html[data-theme="dark"] .rent-faq-stat-text strong {
  color: #fff;
}

html[data-theme="dark"] .rent-faq-stat-text span {
  color: #94a3b8;
}

/* SUPPORT LINK */
.rent-faq-support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: .25s ease;

  background: #1e40af;
  color: #fff;
  box-shadow: 0 10px 24px rgba(30, 64, 175, .22);
}

.rent-faq-support:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(30, 64, 175, .30);
}

/* =====================================
   RIGHT — ACCORDION
===================================== */

.rent-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rent-faq-item {
  border-radius: 22px;
  overflow: hidden;

  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px);

  box-shadow: 0 12px 28px rgba(0, 0, 0, .04);
  transition: .26s ease;
}

.rent-faq-item:hover {
  box-shadow: 0 18px 38px rgba(30, 64, 175, .08);
  border-color: rgba(30, 64, 175, .12);
}

.rent-faq-item.open {
  border-color: rgba(30, 64, 175, .18);
  box-shadow: 0 18px 40px rgba(30, 64, 175, .10);
}

html[data-theme="dark"] .rent-faq-item {
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: none;
}

html[data-theme="dark"] .rent-faq-item:hover {
  border-color: rgba(96, 165, 250, .12);
}

html[data-theme="dark"] .rent-faq-item.open {
  border-color: rgba(96, 165, 250, .20);
}

/* QUESTION ROW */
.rent-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  user-select: none;
  transition: .22s ease;
}

.rent-faq-q:hover {
  background: rgba(30, 64, 175, .02);
}

html[data-theme="dark"] .rent-faq-q:hover {
  background: rgba(96, 165, 250, .04);
}

/* Q ICON */
.rent-faq-q-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
  transition: .26s ease;
}

.rent-faq-item.open .rent-faq-q-icon {
  background: #1e40af;
  color: #fff;
}

html[data-theme="dark"] .rent-faq-q-icon {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

html[data-theme="dark"] .rent-faq-item.open .rent-faq-q-icon {
  background: #1e40af;
  color: #fff;
}

/* Q TEXT */
.rent-faq-q-text {
  flex: 1;
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  line-height: 1.4;
}

html[data-theme="dark"] .rent-faq-q-text {
  color: #fff;
}

/* CHEVRON */
.rent-faq-chevron {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: .26s ease;

  background: rgba(30, 64, 175, .06);
  color: #1e40af;
}

.rent-faq-item.open .rent-faq-chevron {
  transform: rotate(180deg);
  background: rgba(30, 64, 175, .12);
}

html[data-theme="dark"] .rent-faq-chevron {
  background: rgba(96, 165, 250, .08);
  color: #93c5fd;
}

/* ANSWER */
.rent-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s ease, padding .28s ease;
  padding: 0 24px;
}

.rent-faq-item.open .rent-faq-a {
  max-height: 400px;
  padding: 0 24px 22px;
}

.rent-faq-a-inner {
  padding-top: 4px;
  padding-left: 54px;
  font-size: 15px;
  line-height: 1.85;
  color: #64748b;
  border-top: 1px solid rgba(0, 0, 0, .05);
  padding-top: 16px;
}

html[data-theme="dark"] .rent-faq-a-inner {
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

/* ANSWER TAGS */
.rent-faq-a-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.rent-faq-a-tag {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;

  background: rgba(30, 64, 175, .07);
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, .12);
}

html[data-theme="dark"] .rent-faq-a-tag {
  background: rgba(96, 165, 250, .10);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, .14);
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .rent-faq-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .rent-faq-left {
    position: static;
    text-align: center;
  }

  .rent-faq-left h2 {
    font-size: 38px;
  }

  .rent-faq-stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .rent-faq-stat {
    flex: 1;
    min-width: 200px;
  }

  .rent-faq-support {
    display: inline-flex;
  }

}

@media (max-width: 600px) {

  .rent-faq-section {
    padding: 80px 16px;
  }

  .rent-faq-left h2 {
    font-size: 30px;
    line-height: 1.1;
  }

  .rent-faq-left p {
    font-size: 15px;
  }

  .rent-faq-stats {
    flex-direction: column;
  }

  .rent-faq-stat {
    min-width: unset;
  }

  .rent-faq-q {
    padding: 18px 18px;
    gap: 12px;
  }

  .rent-faq-q-text {
    font-size: 15px;
  }

  .rent-faq-a-inner {
    padding-left: 0;
    font-size: 14px;
  }

}

/* ANIMATION */
@keyframes rentFaqGridMove {
  100% { transform: translate(34px, 34px); }
}

/* =====================================
   RENTAL CTA SECTION
===================================== */

.rent-cta-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px 120px;

  background:
    radial-gradient(circle at 15% 20%, rgba(96, 165, 250, .22), transparent 22%),
    radial-gradient(circle at 85% 25%, rgba(30, 64, 175, .22), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(59, 130, 246, .14), transparent 34%),
    linear-gradient(135deg, #dbeafe 0%, #eff6ff 30%, #ffffff 65%, #eef2ff 100%);

  transition: .35s ease;
}

html[data-theme="dark"] .rent-cta-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(59, 130, 246, .18), transparent 22%),
    radial-gradient(circle at 85% 25%, rgba(96, 165, 250, .16), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(30, 64, 175, .14), transparent 34%),
    linear-gradient(135deg, #020617 0%, #081120 35%, #0f172a 70%, #111827 100%);
}

/* GRID */
.rent-cta-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(30, 64, 175, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, .045) 1px, transparent 1px);

  background-size: 56px 56px;
  opacity: .55;
  animation: rentCtaGridMove 18s linear infinite;
}

html[data-theme="dark"] .rent-cta-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
}

/* GLOW */
.rent-cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .50;
  animation: rentCtaGlowFloat 7s ease-in-out infinite;
}

.rent-cta-glow-1 {
  width: 280px;
  height: 280px;
  background: #60a5fa;
  top: 30px;
  left: -80px;
}

.rent-cta-glow-2 {
  width: 260px;
  height: 260px;
  background: #1e40af;
  bottom: 20px;
  right: -80px;
  animation-delay: 2s;
}

/* CONTAINER */
.rent-cta-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* CARD */
.rent-cta-card {
  position: relative;
  max-width: 980px;
  margin: auto;
  text-align: center;

  padding: 74px 40px;
  border-radius: 38px;

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .92),
      rgba(255, 255, 255, .74));

  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 40px 90px rgba(30, 64, 175, .10),
    0 18px 40px rgba(0, 0, 0, .06);

  overflow: hidden;
}

/* SHINE */
.rent-cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 45%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .65),
    transparent
  );

  transform: skewX(-22deg);
  animation: rentCtaShine 5s linear infinite;
}

/* BORDER GLOW */
.rent-cta-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 38px;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, .35),
    rgba(255, 255, 255, 0),
    rgba(30, 64, 175, .22)
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

html[data-theme="dark"] .rent-cta-card {
  background:
    linear-gradient(135deg,
      rgba(15, 23, 42, .90),
      rgba(15, 23, 42, .74));

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

  box-shadow:
    0 35px 80px rgba(0, 0, 0, .45),
    0 12px 26px rgba(30, 64, 175, .12);
}

html[data-theme="dark"] .rent-cta-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .10),
    transparent
  );
}

/* FLOATING BADGES */
.rent-cta-float {
  position: absolute;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: #fff;
  color: #111827;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .08);
  animation: rentCtaFloat 6s ease-in-out infinite;
  white-space: nowrap;
  z-index: 5;
}

.rent-cta-float.one {
  top: 24px;
  left: 24px;
}

.rent-cta-float.two {
  bottom: 24px;
  right: 24px;
  animation-delay: 1.6s;
}

.rent-cta-float.three {
  top: 24px;
  right: 24px;
  animation-delay: 0.8s;
}

html[data-theme="dark"] .rent-cta-float {
  background: #111827;
  color: #fff;
  box-shadow: none;
}

/* MINI BADGE */
.rent-cta-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 20px;

  background: rgba(30, 64, 175, .08);
  color: #1e40af;
}

html[data-theme="dark"] .rent-cta-mini {
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
}

/* TITLE */
.rent-cta-card h2 {
  font-size: 60px;
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -1.4px;
  color: #0f172a;
}

.rent-cta-card h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
  text-shadow: 0 10px 28px rgba(30, 64, 175, .14);
}

html[data-theme="dark"] .rent-cta-card h2 {
  color: #fff;
}

html[data-theme="dark"] .rent-cta-card h2 span {
  color: #93c5fd;
  text-shadow: none;
}

/* TEXT */
.rent-cta-card p {
  max-width: 680px;
  margin: 20px auto 0;
  font-size: 19px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .rent-cta-card p {
  color: #cbd5e1;
}

/* BUTTONS */
.rent-cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.rent-cta-btn {
  padding: 16px 30px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  transition: .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.rent-cta-btn.primary-btn {
  background: #1e40af;
  color: #fff;
  box-shadow: 0 14px 28px rgba(30, 64, 175, .24);
}

.rent-cta-btn.secondary-btn {
  background: #eef2ff;
  color: #1e40af;
}

html[data-theme="dark"] .rent-cta-btn.secondary-btn {
  background: #111827;
  color: #93c5fd;
  border: 1px solid rgba(255, 255, 255, .05);
}

.rent-cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
}

.rent-cta-btn.primary-btn:hover {
  box-shadow: 0 20px 38px rgba(30, 64, 175, .32);
}

/* TRUST POINTS */
.rent-cta-points {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.rent-cta-points span {
  padding: 11px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;

  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #374151;
}

html[data-theme="dark"] .rent-cta-points span {
  background: rgba(17, 24, 39, .78);
  border: 1px solid rgba(255, 255, 255, .04);
  color: #cbd5e1;
}

.rent-cta-points span i {
  color: #1e40af;
  font-size: 12px;
}

html[data-theme="dark"] .rent-cta-points span i {
  color: #93c5fd;
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .rent-cta-card h2 {
    font-size: 46px;
  }

  .rent-cta-card p {
    font-size: 17px;
  }

  .rent-cta-float.three {
    display: none;
  }

}

@media (max-width: 600px) {

  .rent-cta-section {
    padding: 80px 16px 90px;
  }

  .rent-cta-card {
    padding: 44px 22px;
    border-radius: 28px;
  }

  .rent-cta-card h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .rent-cta-card p {
    font-size: 16px;
    line-height: 1.75;
  }

  .rent-cta-actions {
    flex-direction: column;
  }

  .rent-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .rent-cta-float {
    display: none;
  }

  .rent-cta-points span {
    font-size: 12px;
    padding: 10px 14px;
  }

}

/* ANIMATIONS */
@keyframes rentCtaGridMove {
  100% { transform: translate(56px, 56px); }
}

@keyframes rentCtaGlowFloat {
  50% { transform: translateY(-18px); }
}

@keyframes rentCtaShine {
  100% { left: 140%; }
}

@keyframes rentCtaFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
/* ===== app.css ===== */
/* =====================================
   APP DOWNLOAD PAGE
===================================== */

/* =====================================
   HERO
===================================== */
.app-hero-section {
  position: relative;
  overflow: hidden;
  padding: 170px 20px 100px;

  background:
    radial-gradient(circle at 12% 20%, rgba(96,165,250,.18), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(30,64,175,.14), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 45%, #ffffff 100%);
}

html[data-theme="dark"] .app-hero-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(96,165,250,.10), transparent 24%),
    linear-gradient(180deg, #020617 0%, #081120 45%, #0f172a 100%);
}

.app-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,64,175,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: appGridMove 18s linear infinite;
  opacity: .65;
}

html[data-theme="dark"] .app-hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}

.app-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .55;
  animation: appFloatGlow 8s ease-in-out infinite;
}

.app-hero-glow-1 { width:260px; height:260px; background:#60a5fa; top:70px; left:-70px; }
.app-hero-glow-2 { width:240px; height:240px; background:#1e40af; right:-70px; top:220px; animation-delay:2s; }

.app-hero-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 5;
}

.app-hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}

/* BADGE */
.app-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  color: #111827;
}

html[data-theme="dark"] .app-hero-badge {
  background: rgba(15,23,42,.78);
  border: 1px solid rgba(255,255,255,.04);
  color: #fff;
}

.app-badge-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #10b981;
}

/* TITLE */
.app-hero-title {
  font-size: 64px;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -1.4px;
  color: #111827;
}

.app-hero-title span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
}

html[data-theme="dark"] .app-hero-title      { color: #fff; }
html[data-theme="dark"] .app-hero-title span { color: #93c5fd; }

.app-hero-sub {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.8;
  color: #64748b;
  max-width: 580px;
}

html[data-theme="dark"] .app-hero-sub { color: #cbd5e1; }

/* HIGHLIGHTS */
.app-hero-highlights {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.app-hero-highlights span {
  padding: 11px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.45);
  color: #374151;
}

.app-hero-highlights span i { color: #1e40af; }

html[data-theme="dark"] .app-hero-highlights span {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(255,255,255,.04);
  color: #fff;
}

html[data-theme="dark"] .app-hero-highlights span i { color: #93c5fd; }

/* DOWNLOAD BUTTONS */
.app-dl-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.app-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 18px;
  font-weight: 900;
  text-decoration: none;
  transition: .25s ease;
  cursor: default;
  opacity: .82;
  position: relative;
}

.app-dl-btn:hover { transform: none; }

.app-dl-btn.android {
  background: #1e40af;
  color: #fff;
  box-shadow: 0 12px 28px rgba(30,64,175,.24);
}

.app-dl-btn.android:hover {
  box-shadow: 0 18px 38px rgba(30,64,175,.34);
}

.app-dl-btn.ios {
  background: #111827;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

html[data-theme="dark"] .app-dl-btn.ios {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.08);
}

.app-dl-btn i { font-size: 24px; }

.app-dl-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.app-dl-btn-text small {
  font-size: 10px;
  font-weight: 700;
  opacity: .75;
  letter-spacing: .3px;
}

.app-dl-btn-text strong {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

/* HERO RIGHT — mockup image directly */
.app-hero-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-hero-mockup img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  animation: appFloatGlow 6s ease-in-out infinite;
  filter: drop-shadow(0 40px 60px rgba(30,64,175,.18));
}

html[data-theme="dark"] .app-hero-mockup img {
  filter: drop-shadow(0 40px 60px rgba(96,165,250,.14));
}

/* =====================================
   FEATURE SECTIONS
===================================== */
.app-feat-section {
  position: relative;
  overflow: hidden;
  padding: 100px 20px;
}

.app-feat-section.bg-white {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.app-feat-section.bg-alt {
  background: linear-gradient(180deg, #eef4ff 0%, #ffffff 55%, #f8fafc 100%);
}

html[data-theme="dark"] .app-feat-section.bg-white {
  background: linear-gradient(180deg, #0b1220 0%, #020617 100%);
}

html[data-theme="dark"] .app-feat-section.bg-alt {
  background: linear-gradient(180deg, #020617 0%, #0b1220 55%, #111827 100%);
}

.app-feat-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .38;
}

.app-feat-glow-l { width:220px; height:220px; background:#60a5fa; top:40px; left:-70px; }
.app-feat-glow-r { width:200px; height:200px; background:#1e40af; bottom:40px; right:-70px; }

.app-feat-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.app-feat-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.app-feat-wrap.reverse { direction: rtl; }
.app-feat-wrap.reverse > * { direction: ltr; }

/* MOCKUP IMAGE */
.app-feat-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-feat-mockup img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  animation: appMockupFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 50px rgba(30,64,175,.15));
}

html[data-theme="dark"] .app-feat-mockup img {
  filter: drop-shadow(0 30px 50px rgba(96,165,250,.12));
}

/* MINI LABEL */
.app-feat-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;
  background: rgba(30,64,175,.08);
  color: #1e40af;
}

html[data-theme="dark"] .app-feat-mini {
  background: rgba(96,165,250,.12);
  color: #93c5fd;
}

/* TITLE */
.app-feat-title {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.8px;
  color: #111827;
}

.app-feat-title span {
  display: block;
  margin-top: 6px;
  color: #1e40af;
}

html[data-theme="dark"] .app-feat-title      { color: #fff; }
html[data-theme="dark"] .app-feat-title span { color: #93c5fd; }

/* DESC */
.app-feat-desc {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .app-feat-desc { color: #cbd5e1; }

/* POINTS */
.app-feat-points {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-feat-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #374151;
}

.app-feat-points li i {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  background: rgba(30,64,175,.08);
  color: #1e40af;
}

html[data-theme="dark"] .app-feat-points li     { color: #cbd5e1; }
html[data-theme="dark"] .app-feat-points li i   {
  background: rgba(96,165,250,.12);
  color: #93c5fd;
}

/* =====================================
   CTA
===================================== */
.app-cta-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px 120px;

  background:
    radial-gradient(circle at 15% 20%, rgba(96,165,250,.22), transparent 22%),
    radial-gradient(circle at 85% 25%, rgba(30,64,175,.22), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(59,130,246,.14), transparent 34%),
    linear-gradient(135deg, #dbeafe 0%, #eff6ff 30%, #ffffff 65%, #eef2ff 100%);
}

html[data-theme="dark"] .app-cta-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.18), transparent 22%),
    radial-gradient(circle at 85% 25%, rgba(96,165,250,.16), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(30,64,175,.14), transparent 34%),
    linear-gradient(135deg, #020617 0%, #081120 35%, #0f172a 70%, #111827 100%);
}

.app-cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,64,175,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,64,175,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .55;
  animation: appGridMove 18s linear infinite;
}

html[data-theme="dark"] .app-cta-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}

.app-cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .50;
  animation: appFloatGlow 7s ease-in-out infinite;
}

.app-cta-glow-1 { width:280px; height:280px; background:#60a5fa; top:30px; left:-80px; }
.app-cta-glow-2 { width:260px; height:260px; background:#1e40af; bottom:20px; right:-80px; animation-delay:2s; }

.app-cta-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.app-cta-card {
  position: relative;
  max-width: 980px;
  margin: auto;
  text-align: center;
  padding: 74px 40px;
  border-radius: 38px;
  overflow: hidden;

  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(22px);
  box-shadow: 0 40px 90px rgba(30,64,175,.10), 0 18px 40px rgba(0,0,0,.06);
}

.app-cta-card::before {
  content: "";
  position: absolute;
  top: 0; left: -140%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-22deg);
  animation: appCtaShine 5s linear infinite;
}

.app-cta-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 38px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96,165,250,.35), rgba(255,255,255,0), rgba(30,64,175,.22));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

html[data-theme="dark"] .app-cta-card {
  background: linear-gradient(135deg, rgba(15,23,42,.90), rgba(15,23,42,.74));
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 35px 80px rgba(0,0,0,.45);
}

html[data-theme="dark"] .app-cta-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

.app-cta-mini {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 20px;
  background: rgba(30,64,175,.08);
  color: #1e40af;
}

html[data-theme="dark"] .app-cta-mini {
  background: rgba(96,165,250,.12);
  color: #93c5fd;
}

.app-cta-card h2 {
  font-size: 56px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -1.2px;
  color: #0f172a;
}

.app-cta-card h2 span {
  display: block;
  margin-top: 8px;
  color: #1e40af;
  text-shadow: 0 10px 28px rgba(30,64,175,.14);
}

html[data-theme="dark"] .app-cta-card h2      { color: #fff; }
html[data-theme="dark"] .app-cta-card h2 span { color: #93c5fd; text-shadow: none; }

.app-cta-card p {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 1.85;
  color: #64748b;
}

html[data-theme="dark"] .app-cta-card p { color: #cbd5e1; }

.app-cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.app-cta-points {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.app-cta-points span {
  padding: 11px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.45);
  color: #374151;
}

.app-cta-points span i { color: #1e40af; font-size: 12px; }

html[data-theme="dark"] .app-cta-points span {
  background: rgba(17,24,39,.78);
  border: 1px solid rgba(255,255,255,.04);
  color: #cbd5e1;
}

html[data-theme="dark"] .app-cta-points span i { color: #93c5fd; }

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 991px) {

  .app-hero-wrap,
  .app-feat-wrap,
  .app-feat-wrap.reverse {
    grid-template-columns: 1fr;
    gap: 36px;
    direction: ltr;
  }

  .app-hero-title  { font-size: 46px; }
  .app-feat-title  { font-size: 36px; }
  .app-cta-card h2 { font-size: 42px; }

  .app-hero-left { text-align: center; }
  .app-hero-highlights,
  .app-dl-btns { justify-content: center; }
  .app-hero-sub { margin-left: auto; margin-right: auto; }

  .app-feat-mockup { order: -1; }

  .app-hero-mockup img,
  .app-feat-mockup img { max-width: 320px; }

}

@media (max-width: 600px) {

  .app-hero-section { padding: 150px 16px 70px; }
  .app-feat-section { padding: 70px 16px; }
  .app-cta-section  { padding: 80px 16px 90px; }

  .app-hero-title  { font-size: 34px; }
  .app-feat-title  { font-size: 30px; }
  .app-cta-card h2 { font-size: 30px; line-height: 1.1; }
  .app-cta-card    { padding: 44px 22px; border-radius: 28px; }

  .app-hero-mockup img,
  .app-feat-mockup img { max-width: 260px; }

  .app-dl-btns,
  .app-cta-btns { flex-direction: column; }

  .app-dl-btn { width: 100%; justify-content: center; }

  .app-cta-points span { width: 100%; justify-content: center; }

}

/* =====================================
   ANIMATIONS
===================================== */
@keyframes appGridMove  { 100% { transform: translate(56px,56px); } }
@keyframes appFloatGlow { 50%  { transform: translateY(-16px); } }
@keyframes appMockupFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes appCtaShine { 100% { left: 140%; } }