/*==========================================================
GENESIS V2
BASE CSS
==========================================================*/

@layer base {

/*==========================================================
RESET
==========================================================*/

*,
*::before,
*::after{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

-webkit-text-size-adjust:100%;

text-size-adjust:100%;

font-size:16px;

overflow-x:hidden;

}

body{

font-family:var(--font);

background:var(--bg);

color:var(--text);

line-height:1.65;

overflow-x:hidden;

position:relative;

min-height:100vh;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

font-weight:700;

line-height:1.15;

color:var(--text);

}

h1{

font-size:clamp(3rem,7vw,6rem);

}

h2{

font-size:clamp(2.2rem,5vw,3.8rem);

}

h3{

font-size:1.8rem;

}

h4{

font-size:1.3rem;

}

h5{

font-size:1.1rem;

}

h6{

font-size:1rem;

}

p{

color:var(--text-light);

font-size:1rem;

line-height:1.9;

}

small{

font-size:.85rem;

color:var(--text-muted);

}

/*==========================================================
TEXT
==========================================================*/

strong{

font-weight:700;

}

em{

font-style:italic;

}

mark{

background:var(--primary);

color:#fff;

padding:.15rem .4rem;

border-radius:4px;

}

::selection{

background:var(--primary);

color:#fff;

}

::-moz-selection{

background:var(--primary);

color:#fff;

}

/*==========================================================
LINKS
==========================================================*/

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

cursor:pointer;

}

a:hover{

color:#fff;

}

/*==========================================================
LISTS
==========================================================*/

ul,
ol{

list-style:none;

}

/*==========================================================
MEDIA
==========================================================*/

img{

display:block;

max-width:100%;

height:auto;

user-select:none;

-webkit-user-drag:none;

}

picture{

display:block;

}

svg{

display:block;

max-width:100%;

}

/*==========================================================
BUTTON RESET
==========================================================*/

button{

font-family:inherit;

border:none;

outline:none;

cursor:pointer;

background:none;

color:inherit;

}

button:disabled{

opacity:.6;

cursor:not-allowed;

}

/*==========================================================
FORM RESET
==========================================================*/

input,
textarea,
select{

font-family:inherit;

font-size:1rem;

outline:none;

border:none;

background:none;

color:inherit;

}

textarea{

resize:vertical;

min-height:160px;

}

/*==========================================================
TABLE
==========================================================*/

table{

border-collapse:collapse;

border-spacing:0;

width:100%;

}

/*==========================================================
HR
==========================================================*/

hr{

border:none;

height:1px;

background:var(--border);

margin:2rem 0;

}

/*==========================================================
IFRAME
==========================================================*/

iframe{

border:none;

display:block;

max-width:100%;

}

/*==========================================================
FOCUS
==========================================================*/

:focus-visible{

outline:2px solid var(--primary);

outline-offset:4px;

border-radius:6px;

}

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

.container{

width:min(100% - 2rem,var(--container));

margin-inline:auto;

position:relative;

z-index:2;

}

.container-lg{

width:min(100% - 2rem,1500px);

margin-inline:auto;

}

.container-sm{

width:min(100% - 2rem,900px);

margin-inline:auto;

}

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

section{

position:relative;

padding:var(--section-space) 0;

overflow:hidden;

}

.section-header{

text-align:center;

max-width:900px;

margin:0 auto 5rem;

}

.section-tag{

display:inline-flex;

align-items:center;

justify-content:center;

padding:.7rem 1.4rem;

border-radius:var(--radius-full);

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

border:1px solid var(--border);

backdrop-filter:blur(12px);

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

font-size:.9rem;

font-weight:600;

color:var(--primary);

margin-bottom:1.3rem;

}

.section-title{

margin-bottom:1.3rem;

}

.section-description{

max-width:760px;

margin-inline:auto;

font-size:1.05rem;

}

/*==========================================================
DISPLAY
==========================================================*/

.flex{

display:flex;

}

.grid{

display:grid;

}

.inline-flex{

display:inline-flex;

}

.block{

display:block;

}

.inline-block{

display:inline-block;

}

/*==========================================================
ALIGNMENT
==========================================================*/

.items-center{

align-items:center;

}

.items-start{

align-items:flex-start;

}

.items-end{

align-items:flex-end;

}

.justify-center{

justify-content:center;

}

.justify-between{

justify-content:space-between;

}

.justify-around{

justify-content:space-around;

}

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.text-right{

text-align:right;

}

/*==========================================================
GAP
==========================================================*/

.gap-1{

gap:.5rem;

}

.gap-2{

gap:1rem;

}

.gap-3{

gap:1.5rem;

}

.gap-4{

gap:2rem;

}

.gap-5{

gap:3rem;

}

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

.btn-primary,

.btn-secondary,

.btn-nav,

.service-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.8rem;

padding:16px 30px;

border-radius:var(--radius-full);

font-weight:600;

font-size:1rem;

transition:all .35s var(--ease);

position:relative;

overflow:hidden;

cursor:pointer;

}

.btn-primary{

background:var(--gradient-primary);

color:#fff;

box-shadow:var(--shadow-glow);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 20px 40px rgba(255,0,85,.35);

}

.btn-secondary{

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

border:1px solid var(--border);

backdrop-filter:blur(15px);

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

}

.btn-secondary:hover{

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

border-color:rgba(255,255,255,.18);

transform:translateY(-4px);

}

.btn-nav{

padding:14px 26px;

background:var(--gradient-primary);

color:#fff;

}

.service-btn{

margin-top:2rem;

color:#fff;

padding:14px 24px;

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

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

}

.service-btn:hover{

background:var(--gradient-primary);

}

/*==========================================================
GLASS
==========================================================*/

.glass{

background:var(--bg-glass);

border:1px solid var(--border);

backdrop-filter:blur(18px);

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

box-shadow:var(--shadow-md);

}

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

.card{

background:var(--bg-card);

border:1px solid var(--border);

border-radius:var(--radius-lg);

transition:.35s;

position:relative;

overflow:hidden;

}

.card:hover{

border-color:var(--border-hover);

transform:translateY(-8px);

}
/*==========================================================
FORMS
==========================================================*/

.contact-form{

display:grid;

gap:1.6rem;

}

.form-group{

position:relative;

}

.form-group input,
.form-group textarea,
.form-group select{

width:100%;

padding:18px 20px;

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

border:1px solid var(--border);

border-radius:var(--radius-md);

color:var(--text);

transition:all .35s var(--ease);

backdrop-filter:blur(12px);

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

}

.form-group textarea{

min-height:180px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

color:transparent;

}

.form-group label{

position:absolute;

top:18px;

left:20px;

font-size:.95rem;

color:var(--text-muted);

pointer-events:none;

transition:all .3s ease;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

border-color:var(--primary);

box-shadow:

0 0 0 4px rgba(255,0,85,.12);

}

.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:focus+label,
.form-group textarea:not(:placeholder-shown)+label{

top:-11px;

left:16px;

padding:0 .45rem;

font-size:.78rem;

background:var(--bg);

color:var(--primary);

}

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

.stats-grid,
.why-grid,
.services-grid,
.process-timeline,
.footer-grid,
.contact-wrapper{

display:grid;

gap:2rem;

}

.stats-grid{

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

}

.why-grid{

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

}

.services-grid{

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

}

.process-timeline{

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

}

.contact-wrapper{

grid-template-columns:420px 1fr;

align-items:start;

}

.footer-grid{

grid-template-columns:

1.5fr

1fr

1fr

1fr;

}

/*==========================================================
BACKGROUND HELPERS
==========================================================*/

.bg-gradient{

background:var(--gradient-primary);

}

.bg-dark{

background:var(--bg);

}

.bg-card{

background:var(--bg-card);

}

.bg-glass{

background:var(--bg-glass);

backdrop-filter:blur(18px);

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

}

/*==========================================================
TEXT UTILITIES
==========================================================*/

.text-gradient{

background:var(--gradient-primary);

background-clip:text;

-webkit-background-clip:text;

color:transparent;

}

.text-primary{

color:var(--primary);

}

.text-muted{

color:var(--text-muted);

}

.text-light{

color:var(--text-light);

}

/*==========================================================
SPACING
==========================================================*/

.mt-1{margin-top:.5rem;}

.mt-2{margin-top:1rem;}

.mt-3{margin-top:1.5rem;}

.mt-4{margin-top:2rem;}

.mt-5{margin-top:3rem;}

.mb-1{margin-bottom:.5rem;}

.mb-2{margin-bottom:1rem;}

.mb-3{margin-bottom:1.5rem;}

.mb-4{margin-bottom:2rem;}

.mb-5{margin-bottom:3rem;}

/*==========================================================
WIDTH
==========================================================*/

.w-100{

width:100%;

}

.h-100{

height:100%;

}

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

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#070707;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#ff0055,

#8b00ff);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:linear-gradient(

180deg,

#ff2672,

#a12dff);

}

/*==========================================================
HELPERS
==========================================================*/

.hidden{

display:none!important;

}

.invisible{

visibility:hidden;

}

.visible{

visibility:visible;

}

.overflow-hidden{

overflow:hidden;

}

.position-relative{

position:relative;

}

.position-absolute{

position:absolute;

}

.pointer{

cursor:pointer;

}

.no-select{

user-select:none;

}

/*==========================================================
ACCESSIBILITY
==========================================================*/

.sr-only{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}

}
/*==========================================================
REVEAL HELPERS
==========================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .9s var(--ease),

transform .9s var(--ease);

will-change:opacity,transform;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-70px);

transition:all .9s var(--ease);

}

.fade-left.active{

opacity:1;

transform:none;

}

.fade-right{

opacity:0;

transform:translateX(70px);

transition:all .9s var(--ease);

}

.fade-right.active{

opacity:1;

transform:none;

}

.scale-up{

opacity:0;

transform:scale(.9);

transition:all .8s var(--ease);

}

.scale-up.active{

opacity:1;

transform:scale(1);

}

/*==========================================================
MAGNETIC SUPPORT
==========================================================*/

.magnetic{

will-change:transform;

transition:

transform .18s ease-out;

}

/*==========================================================
GLASS OVERLAY
==========================================================*/

.glass-overlay{

position:absolute;

inset:0;

pointer-events:none;

background:

linear-gradient(

180deg,

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

transparent);

opacity:.55;

}

/*==========================================================
SHADOW UTILITIES
==========================================================*/

.shadow-sm{

box-shadow:var(--shadow-sm);

}

.shadow-md{

box-shadow:var(--shadow-md);

}

.shadow-lg{

box-shadow:var(--shadow-lg);

}

.shadow-glow{

box-shadow:var(--shadow-glow);

}

/*==========================================================
BORDER RADIUS
==========================================================*/

.radius-sm{

border-radius:var(--radius-sm);

}

.radius-md{

border-radius:var(--radius-md);

}

.radius-lg{

border-radius:var(--radius-lg);

}

.radius-xl{

border-radius:var(--radius-xl);

}

.radius-full{

border-radius:999px;

}

/*==========================================================
BACKGROUND BLUR
==========================================================*/

.blur-bg{

backdrop-filter:blur(20px);

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

}

/*==========================================================
LOADING
==========================================================*/

.loading{

pointer-events:none;

opacity:.65;

}

.loading *{

cursor:wait!important;

}

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

.rotate{

animation:rotate 10s linear infinite;

}

.float{

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

}

.pulse{

animation:pulse 3s ease-in-out infinite;

}

/*==========================================================
GPU
==========================================================*/

.hero,
.stats,
.services,
.process,
.contact,
.footer,
.service-box,
.stat-card,
.why-card,
.process-card,
.contact-card{

transform:translateZ(0);

backface-visibility:hidden;

will-change:transform;

}

/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}

/*==========================================================
PRINT
==========================================================*/

@media print{

.header,

.whatsapp-float,

.back-top,

.cursor-dot,

.cursor-ring,

.cursor-glow,

#loader,

.mouse-glow{

display:none!important;

}

body{

background:#fff;

color:#000;

}

a{

color:#000;

text-decoration:underline;

}

}

/*==========================================================
END
==========================================================*/

}