/* ===========================================================
   WENCO CLOUD
   Premium Landing Page v1.0
   =========================================================== */

:root{

--primary:#41A9F0;
--primary-dark:#2289e5;
--primary-light:#7fc8ff;

--bg:#ffffff;
--bg2:#f8fbff;

--text:#111827;
--text-soft:#64748b;

--glass:rgba(255,255,255,.65);
--glass-border:rgba(255,255,255,.25);

--shadow:0 25px 60px rgba(0,0,0,.08);

}

body.dark{

--bg:#05070b;
--bg2:#0d1118;

--text:#f8fafc;
--text-soft:#94a3b8;

--glass:rgba(16,20,28,.60);
--glass-border:rgba(255,255,255,.08);

--shadow:0 25px 70px rgba(0,0,0,.45);

}

/* RESET */

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

transition:.45s;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:999px;

}

::-webkit-scrollbar-track{

background:transparent;

}

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

.background-grid{

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(65,169,240,.05) 1px,transparent 1px),

linear-gradient(90deg,rgba(65,169,240,.05) 1px,transparent 1px);

background-size:40px 40px;

z-index:-5;

animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

from{

transform:translateY(0);

}

to{

transform:translateY(40px);

}

}

/* ===========================================================
GLOW
=========================================================== */

.glow{

position:fixed;

width:700px;

height:700px;

border-radius:50%;

filter:blur(140px);

opacity:.22;

pointer-events:none;

transition:.25s;

z-index:-4;

}

.glow-left{

background:#41A9F0;

top:-250px;

left:-250px;

}

.glow-right{

background:#165dff;

right:-250px;

bottom:-250px;

}

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

header{

position:fixed;

top:0;

left:0;

right:0;

height:82px;

display:flex;

justify-content:flex-end;

align-items:center;

padding:0 50px;

background:rgba(8,10,15,.35);

backdrop-filter:blur(20px);

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

z-index:999;

}

nav{

width:100%;

display:flex;

justify-content:flex-end;

align-items:center;

}

/* ===========================================================
BOTÃO TEMA
=========================================================== */

.theme-button{

width:52px;

height:52px;

border-radius:50%;

border:1px solid rgba(65,169,240,.15);

background:var(--glass);

backdrop-filter:blur(20px);

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

transition:.35s;

box-shadow:var(--shadow);

}

.theme-button:hover{

transform:translateY(-4px) scale(1.05);

border-color:var(--primary);

box-shadow:

0 15px 45px rgba(65,169,240,.25);

}

.theme-button svg{

width:24px;

height:24px;

stroke:var(--primary);

stroke-width:2;

fill:none;

}

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

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:120px 30px 80px;

text-align:center;

}

.hero-content{

width:100%;

max-width:1000px;

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.badge{

display:inline-flex;

align-items:center;

padding:12px 22px;

border-radius:999px;

background:rgba(65,169,240,.12);

border:1px solid rgba(65,169,240,.18);

color:var(--primary);

font-weight:600;

margin-bottom:35px;

backdrop-filter:blur(18px);

}

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

.hero h1{

font-size:clamp(58px,8vw,96px);

font-weight:800;

line-height:1;

letter-spacing:-3px;

margin-bottom:30px;

max-width:950px;

margin-left:auto;

margin-right:auto;

text-wrap:balance;

}

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

.hero p{

font-size:22px;

line-height:1.9;

max-width:760px;

margin:auto;

color:var(--text-soft);

}

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

.buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-top:50px;

flex-wrap:wrap;

}

.buttons a{

padding:18px 34px;

border-radius:16px;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.primary{

background:linear-gradient(135deg,#41A9F0,#2289e5);

color:white;

box-shadow:

0 18px 45px rgba(65,169,240,.30);

}

.primary:hover{

transform:translateY(-5px);

box-shadow:

0 25px 60px rgba(65,169,240,.40);

}

.secondary{

background:var(--glass);

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

color:var(--text);

backdrop-filter:blur(18px);

}

.secondary:hover{

transform:translateY(-5px);

border-color:var(--primary);

}

/* ===========================================================
EMAIL CARD
=========================================================== */

.email-card{

margin:70px auto 0;

max-width:540px;

display:flex;

align-items:center;

gap:22px;

padding:24px;

background:var(--glass);

backdrop-filter:blur(25px);

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

border-radius:22px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.email-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:radial-gradient(circle,#41A9F055,transparent 70%);

top:-120px;

right:-120px;

}

.email-card:hover{

transform:translateY(-8px);

border-color:rgba(65,169,240,.35);

box-shadow:

0 25px 70px rgba(65,169,240,.18);

}

.mail-icon{

width:70px;

height:70px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

background:linear-gradient(135deg,#41A9F0,#2289e5);

color:white;

box-shadow:

0 15px 35px rgba(65,169,240,.35);

flex-shrink:0;

}

.email-card h3{

font-size:20px;

margin-bottom:5px;

}

.email-card a{

color:var(--primary);

font-weight:600;

text-decoration:none;

transition:.3s;

}

.email-card a:hover{

opacity:.8;

}

/* ===========================================================
FOOTER
=========================================================== */

footer{

margin-top:120px;

padding:40px;

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

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

color:var(--text-soft);

font-size:15px;

}

/* ===========================================================
SELECTION
=========================================================== */

::selection{

background:#41A9F0;

color:white;

}

/* ===========================================================
ANIMAÇÕES
=========================================================== */

@keyframes pulseGlow{

0%{

box-shadow:0 0 0 rgba(65,169,240,0);

}

50%{

box-shadow:

0 0 40px rgba(65,169,240,.35);

}

100%{

box-shadow:0 0 0 rgba(65,169,240,0);

}

}

.primary{

animation:pulseGlow 4s infinite;

}

/* ===========================================================
PARTÍCULAS
=========================================================== */

body::before{

content:"";

position:fixed;

width:4px;

height:4px;

border-radius:50%;

background:#41A9F0;

left:10%;

top:20%;

box-shadow:

150px 100px #41A9F0,

320px 280px #41A9F0,

600px 120px #41A9F0,

820px 380px #41A9F0,

980px 160px #41A9F0,

1300px 280px #41A9F0,

420px 620px #41A9F0,

900px 720px #41A9F0,

1450px 600px #41A9F0;

opacity:.35;

animation:stars 18s linear infinite;

pointer-events:none;

}

@keyframes stars{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-80px);

}

}

/* ===========================================================
RESPONSIVO
=========================================================== */

@media(max-width:900px){

.hero h1{

font-size:60px;

}

.hero p{

font-size:19px;

}

}

@media(max-width:700px){

header{

padding:0 20px;

height:70px;

}

.hero{

padding-top:110px;

}

.hero h1{

font-size:42px;

letter-spacing:-2px;

}

.hero p{

font-size:17px;

line-height:1.8;

}

.buttons{

flex-direction:column;

width:100%;

}

.buttons a{

width:100%;

max-width:320px;

text-align:center;

}

.email-card{

flex-direction:column;

text-align:center;

padding:30px 20px;

}

footer{

justify-content:center;

text-align:center;

}

}

@media(max-width:450px){

.hero h1{

font-size:34px;

}

.badge{

font-size:13px;

padding:10px 16px;

}

.mail-icon{

width:60px;

height:60px;

font-size:24px;

}

.email-card h3{

font-size:18px;

}

}

/* ===========================================================
EFEITOS EXTRAS
=========================================================== */

.hero-content>*{

animation:fadeUp .8s ease both;

}

.hero-content>*:nth-child(2){

animation-delay:.1s;

}

.hero-content>*:nth-child(3){

animation-delay:.2s;

}

.hero-content>*:nth-child(4){

animation-delay:.3s;

}

.hero-content>*:nth-child(5){

animation-delay:.4s;

}

.hero-content>*:nth-child(6){

animation-delay:.5s;

}

.buttons a:active{

transform:scale(.97);

}

.theme-button:active{

transform:scale(.92);

}