:root{
--primary:#00D4FF;
--secondary:#6B5CFF;
--accent:#8A2BE2;

--dark:#050816;
--dark-2:#0B1023;

--card:#10182B;

--border:rgba(255,255,255,.08);

--text:#ffffff;
--text-light:#b9c3d5;

--radius:20px;

--container:1440px;
}

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

html{
scroll-behavior:smooth;
}

body{

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

background:

radial-gradient(
circle at 15% 20%,
rgba(0,212,255,.12),
transparent 35%
),

radial-gradient(
circle at 85% 75%,
rgba(168,85,247,.10),
transparent 35%
),

radial-gradient(
circle at 50% 100%,
rgba(0,102,255,.06),
transparent 50%
),

linear-gradient(
180deg,
#020611 0%,
#050816 35%,
#07112A 100%
);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

section{
position:relative;
    padding:80px 0;

}

.glass-card{

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

backdrop-filter:blur(20px);

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

border-radius:24px;

}

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

a{
text-decoration:none;
color:inherit;
}

.container{
width:100%;
max-width:var(--container);
margin:auto;
padding:0 20px;
}

.btn-primary{

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

padding:16px 34px;

border-radius:999px;

font-weight:700;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#fff;

box-shadow:
0 15px 40px rgba(0,212,255,.25);

transition:.35s ease;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:
0 20px 50px rgba(0,212,255,.35);

}

.btn-secondary{

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

padding:16px 34px;

border-radius:999px;

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

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

backdrop-filter:blur(12px);

transition:.35s ease;

}

.btn-secondary:hover{

border-color:var(--primary);

transform:translateY(-4px);

}

.hero-grid{

    display:grid !important;

    grid-template-columns:58% 42% !important;

    gap:40px !important;

    align-items:center !important;

    overflow:visible !important;

}

.hero-image{
    display:flex !important;
    justify-content:flex-end !important;
}

/*==================================================
 SINGLE SERVICE CONTENT
==================================================*/

.service-content-section{

padding:90px 0;

position:relative;

}

.service-content{

max-width:900px;

margin:0 auto;

}

.service-content h2{

font-size:42px;

font-weight:800;

line-height:1.15;

margin:40px 0 28px;

letter-spacing:-.5px;

background:linear-gradient(90deg,#00D4FF,#4FACFE,#8B5CF6);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.service-content h3{

font-size:30px;

font-weight:700;

margin:60px 0 22px;

color:#fff;

}

.service-content h4{

font-size:22px;

font-weight:700;

margin:40px 0 18px;

color:#fff;

}

.service-content p{

font-size:18px;

line-height:1.9;

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

margin:0 0 24px;

}

.service-content strong{

color:#fff;

font-weight:700;

}

.service-content a{

color:#00D4FF;

text-decoration:none;

transition:.3s;

}

.service-content a:hover{

color:#8B5CF6;

}

.service-content ul{

margin:35px 0;

padding:0;

list-style:none;

display:grid;

gap:18px;

}

.service-content li{

position:relative;

padding-left:36px;

font-size:17px;

line-height:1.8;

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

}

.service-content li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:700;

color:#00D4FF;

}

.service-content img{

width:100%;

height:auto;

border-radius:18px;

margin:40px 0;

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

box-shadow:

0 30px 80px rgba(0,0,0,.45),

0 0 0 1px rgba(255,255,255,.03);

}

.service-content blockquote{

margin:40px 0;

padding:30px;

border-left:4px solid #00D4FF;

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

border-radius:18px;

font-size:20px;

line-height:1.8;

color:#fff;

}

.service-content hr{

border:none;

height:1px;

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

margin:60px 0;

}

@media(max-width:768px){

.service-content-section{

padding:70px 0;

}

.service-content{

max-width:100%;

}

.service-content h2{

font-size:34px;

}

.service-content h3{

font-size:26px;

}

.service-content p{

font-size:17px;

line-height:1.8;

}

}

/*==================================================
 WHY FELIX
==================================================*/

.why-felix{

padding:110px 0;

position:relative;

}

.why-felix .section-title{

max-width:700px;

position:relative;

margin:0 auto 70px;

text-align:center;

}

.why-felix .section-title::after{

content:"";

display:block;

width:120px;

height:2px;

margin:30px auto 0;

background:linear-gradient(
90deg,
transparent,
#00D4FF,
#8B5CF6,
transparent
);

opacity:.8;

}

.why-felix .section-intro{

margin-top:22px;

font-size:18px;

max-width:650px;

margin:0 auto;

line-height:1.9;

opacity:.85;

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

}

.why-felix .services-grid{

display:grid;

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

gap:30px;

}

.why-felix .service-card{

padding:40px;

min-height:300px;

display:flex;

flex-direction:column;

justify-content:flex-start;

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

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

border-radius:24px;

transition:.35s;

position:relative;

overflow:hidden;

transition:
transform .35s,
border-color .35s,
box-shadow .35s;

}

.why-felix .service-card:hover{

transform:translateY(-10px);

border-color:#00D4FF;

background:
linear-gradient(
145deg,
rgba(0,212,255,.05),
rgba(139,92,246,.04)
);

box-shadow:

0 25px 70px rgba(0,212,255,.18);

transform:

translateY(-10px)

scale(1.015);

}

.why-felix .service-icon{

width:72px;

height:72px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:32px;

font-size:30px;

color:#fff;

background:linear-gradient(135deg,#00D4FF,#8B5CF6);

box-shadow:

0 20px 40px rgba(0,212,255,.25);

}

.why-felix .service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:3px;

background:linear-gradient(
90deg,
#00D4FF,
#4FACFE,
#8B5CF6
);

opacity:0;

transition:.35s;

}

.why-felix .service-card:hover::before{

opacity:1;

}

.why-felix .service-card h3{

margin:0 0 18px;

font-size:28px;

color:#fff;

}

.why-felix .service-card p{

margin:0;

font-size:17px;

line-height:1.8;

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

}

@media(max-width:768px){

.why-felix{

padding:80px 0;

}

.why-felix .services-grid{

grid-template-columns:1fr;

gap:24px;

}

.why-felix .service-card{

padding:30px;

}

.why-felix .service-card h3{

font-size:24px;

}

.why-felix .section-title{

margin-bottom:50px;
max-width:760px;

margin:0 auto 70px;

text-align:center;

}

}

.why-felix .section-title h2{

font-size:56px;

font-weight:800;

line-height:1.1;

margin-bottom:22px;

letter-spacing:-1px;

margin:0 0 24px;

background:linear-gradient(
90deg,
#00D4FF,
#4FACFE,
#8B5CF6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.why-felix .service-card p{

max-width:92%;

}

.why-felix .service-icon{

box-shadow:

0 15px 35px rgba(0,212,255,.25),

0 0 25px rgba(139,92,246,.18);

}

.why-felix .section-title > span:not(.section-badge){

display:block;

margin-bottom:14px;

font-size:15px;

font-weight:600;

text-transform:uppercase;

letter-spacing:.12em;

color:#00D4FF;

}

.why-felix .section-title{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.why-felix .section-title .hero-badge{

    display:inline-flex;

    align-self:center;

    margin:0 auto 28px;

}

/* ==========================================
   WHY FELIX BADGE
========================================== */

.why-felix .hero-badge{

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

    padding:12px 28px;
    margin:0 auto 28px;

    width:fit-content;

    border-radius:999px;

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

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

    color:#00D4FF;

    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;

    box-shadow:
        0 0 30px rgba(0,212,255,.12),
        inset 0 0 20px rgba(0,212,255,.05);

    position:relative;

    transition:.35s ease;

}

.why-felix .hero-badge:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 40px rgba(0,212,255,.25),
        inset 0 0 20px rgba(0,212,255,.08);

}

.why-felix .section-title .section-badge,
.process-section .section-title .section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:auto;

    padding:12px 28px;

    margin-bottom:24px;

}

.why-felix .section-title h2{

display:block;

margin:0;

font-size:48px;

font-weight:800;

line-height:1.15;

letter-spacing:-1px;

background:linear-gradient(
90deg,
#00D4FF,
#4FACFE,
#8B5CF6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/*======================================
GLOBAL HERO BADGE
======================================*/

.hero-badge{

display:inline-flex;

align-items:center;

justify-content:center;

width:fit-content;

max-width:100%;

padding:12px 28px;

margin-bottom:22px;

border-radius:999px;

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

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

color:#00D4FF;

font-size:13px;

font-weight:700;

letter-spacing:.14em;

text-transform:uppercase;

line-height:1;

white-space:nowrap;

box-shadow:
0 0 30px rgba(0,212,255,.12),
inset 0 0 20px rgba(0,212,255,.05);

}

/* =========================
   SECTION BADGE (MASTER)
========================= */

.section-badge{

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

width:fit-content;
max-width:100%;

padding:12px 28px;
margin-bottom:22px;

border-radius:999px;

font-size:13px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
white-space:nowrap;

color:#00D4FF;

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

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

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

box-shadow:
0 0 8px rgba(0,212,255,.15),
0 0 22px rgba(0,212,255,.15),
inset 0 0 8px rgba(0,212,255,.08);

}

/* =========================
   GLOBAL FELIX HEADING GRADIENT
   FINAL CONSISTENT
========================= */

.felix-gradient-heading,
.single-service .page-hero h1,
.single-service .page-hero .page-hero-content h1,
.single-service .service-content h1,
.single-service .service-content h2{

    display:table;

    width:auto;
    max-width:100%;

    background:linear-gradient(
        90deg,
        #00D4FF 0%,
        #4FACFE 35%,
        #8B5CF6 70%,
        #8B5CF6 100%
    ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    color:transparent !important;

}

/* =========================
   FELIX GLOBAL HEADING GRADIENT
========================= */

.hero-title span,
.page-title span,
.cta-title span,
.gradient-text{
    background: linear-gradient(
        90deg,
        #00D4FF 0%,
        #4FACFE 48%,
        #8B5CF6 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* =========================
   GLOBAL MOBILE WHITE FLASH FIX
========================= */

html{
    background:#050816 !important;
    min-height:100%;
}

body{
    background-color:#050816 !important;
    min-height:100%;
}

#page,
.site,
.site-content,
#primary{
    background-color:#050816;
}

@media (max-width:768px){

    html,
    body{
        background:#050816 !important;
        min-height:100%;
    }

}

/* =========================================
   FELIX GRADIENT HEADING DESCENDER FIX
========================================= */

.hero-title,
.page-title,
.section-title h1,
.section-title h2,
.section-title h3,
.cta-title,
.felix-gradient-heading{

    padding-bottom:0.12em !important;

}