/*
Theme Name: Glanner
Theme URI: https://glanner.com
Author: Gustavo
Author URI: https://glanner.com
Description: Landing Page Glanner
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Text Domain: glanner
*/

/* ===========================================
GLANNER
Style.css
Parte 1
=========================================== */

:root{

--primary:#4F46E5;
--primary-dark:#3730A3;
--secondary:#6366F1;

--text:#111827;
--text-light:#6B7280;

--background:#ffffff;
--background-soft:#F8FAFC;

--border:#E5E7EB;

--success:#16A34A;

--radius:18px;

--shadow:

0 15px 40px rgba(15,23,42,.08);

--transition:.35s;

--max-width:1200px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.6;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--max-width));

margin:auto;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

height:84px;

display:flex;

align-items:center;

z-index:999;

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

backdrop-filter:blur(18px);

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

transition:.3s;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:1.7rem;

font-weight:800;

letter-spacing:.08em;

color:var(--primary);

}

nav ul{

display:flex;

gap:38px;

}

nav a{

font-weight:500;

transition:.25s;

}

nav a:hover{

color:var(--primary);

}

.headerButton{

background:var(--primary);

padding:14px 28px;

color:white;

border-radius:999px;

font-weight:600;

transition:.3s;

box-shadow:var(--shadow);

}

.headerButton:hover{

transform:translateY(-3px);

background:var(--primary-dark);

}

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

.hero{

padding-top:170px;

padding-bottom:120px;

overflow:hidden;

position:relative;

background:

radial-gradient(circle at 15% 20%,rgba(99,102,241,.18),transparent 30%),

radial-gradient(circle at 80% 15%,rgba(79,70,229,.15),transparent 35%),

radial-gradient(circle at 50% 80%,rgba(59,130,246,.10),transparent 35%),

linear-gradient(

180deg,

#FFFFFF,

#F8FAFC

);

}

.heroContainer{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:#EEF2FF;

color:var(--primary);

font-weight:600;

margin-bottom:28px;

}

.hero h1{

font-size:4rem;

line-height:1.1;

font-weight:800;

margin-bottom:28px;

}

.hero p{

font-size:1.18rem;

color:var(--text-light);

margin-bottom:40px;

max-width:600px;

}

/* ================= PRICE ================= */

.priceCard{

background:white;

padding:34px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin-bottom:35px;

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

}

.price{

font-size:3rem;

font-weight:800;

color:var(--primary);

margin-bottom:20px;

}

.priceCard li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

font-size:1.05rem;

}

.priceCard i{

color:var(--success);

}

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

.primaryButton,

.buyButton{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:white;

font-size:1rem;

font-weight:700;

border-radius:999px;

transition:.3s;

box-shadow:

0 12px 35px rgba(79,70,229,.35),

0 0 0 rgba(79,70,229,0);
}

.primaryButton:hover,

.buyButton:hover{

transform:translateY(-4px);

box-shadow:

0 25px 50px rgba(79,70,229,.40);

}

/* ================= SECURITY ================= */

.security{

display:flex;

gap:28px;

margin-top:35px;

flex-wrap:wrap;

}

.security div{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

color:#475569;

}

.security i{

color:var(--success);

}

/* ================= MOCKUP ================= */

.heroRight{

position:relative;

}

.mockup{

background:white;

padding:22px;

border-radius:26px;

box-shadow:

0 30px 80px rgba(0,0,0,.10);

}

.mockup img{

border-radius:14px;

}

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

.floatingCard{

position:absolute;

background:white;

padding:18px 24px;

border-radius:18px;

box-shadow:

0 20px 45px rgba(0,0,0,.12);

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

}

.floatingCard h3{

font-size:.82rem;

color:#64748B;

margin-bottom:6px;

}

.floatingCard strong{

font-size:1.3rem;

}

.cardOne{

top:-20px;

left:-30px;

}

.cardTwo{

right:-30px;

top:120px;

animation-delay:1.2s;

}

.cardThree{

left:40px;

bottom:-25px;

animation-delay:2.4s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0px);

}

}

/* ================= TITLES ================= */

.sectionTitle{

text-align:center;

margin-bottom:80px;

}

.sectionTitle span{

color:var(--primary);

font-weight:700;

letter-spacing:.15em;

font-size:.82rem;

}

.sectionTitle h2{

font-size:2.8rem;

margin:20px auto;

max-width:760px;

}

.sectionTitle p{

max-width:720px;

margin:auto;

color:var(--text-light);

font-size:1.08rem;

}

/* ================= FEATURES ================= */

.features{

padding:120px 0;

background:var(--background-soft);

}

.featureGrid{

display:grid;

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

gap:28px;

}

.featureCard{

background:white;

padding:40px;

border-radius:24px;

transition:.3s;

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

box-shadow:var(--shadow);

}

.featureCard:hover{

transform:translateY(-8px);

}

.icon{

width:70px;

height:70px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF2FF;

color:var(--primary);

font-size:1.6rem;

margin-bottom:26px;

}

.featureCard h3{

margin-bottom:14px;

font-size:1.25rem;

}

.featureCard p{

color:var(--text-light);

}

/* ===========================================
SHOWCASE
=========================================== */

.showcase{

padding:140px 0;

}

.showcaseGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

.showcaseImage img{
    width: 85%;
    max-width: 550px;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.18));
    transition: .4s;
}

.showcaseImage img:hover{
    transform: translateY(-8px);
}

.showcaseContent .miniTitle{

display:inline-block;

font-size:.82rem;

font-weight:700;

letter-spacing:.18em;

color:var(--primary);

margin-bottom:18px;

}

.showcaseContent h2{

font-size:3rem;

line-height:1.2;

margin-bottom:24px;

}

.showcaseContent p{

font-size:1.08rem;

color:var(--text-light);

margin-bottom:32px;

}

.showcaseContent ul{

margin-bottom:40px;

}

.showcaseContent li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:18px;

font-size:1.05rem;

}

.showcaseContent i{

color:var(--success);

}



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

.splitSection{

padding:130px 0;

}

.splitGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.splitGrid img{

border-radius:24px;

box-shadow:

0 35px 80px rgba(0,0,0,.10);

}

.miniTitle{

display:inline-block;

font-size:.82rem;

font-weight:700;

letter-spacing:.18em;

color:var(--primary);

margin-bottom:20px;

}

.splitGrid h2{

font-size:2.8rem;

line-height:1.2;

margin-bottom:24px;

}

.splitGrid p{

color:var(--text-light);

font-size:1.08rem;

margin-bottom:34px;

}

.checkList{

display:grid;

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

gap:18px;

}

.checkList div{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

}

.checkList i{

color:var(--success);

}

.reverse{

background:var(--background-soft);

}



/* ===========================================
COMPARISON
=========================================== */

.comparison{

padding:140px 0;

}

.comparisonGrid{

display:grid;

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

gap:40px;

}

.comparisonCard{

padding:50px;

border-radius:26px;

box-shadow:var(--shadow);

}

.comparisonCard h3{

font-size:2rem;

margin-bottom:30px;

}

.comparisonCard ul{

display:flex;

flex-direction:column;

gap:18px;

font-size:1.08rem;

}

.bad{

background:#FEF2F2;

border:1px solid #FECACA;

}

.good{

background:#ECFDF5;

border:1px solid #BBF7D0;

}



/* ===========================================
PRICING
=========================================== */

.pricing{

padding:150px 0;

background:

linear-gradient(

180deg,

white,

#F8FAFC

);

}

.pricingCard{

max-width:760px;

margin:auto;

padding:70px;

text-align:center;

border-radius:34px;

background:white;

box-shadow:

0 45px 120px rgba(0,0,0,.12);

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

}

.pricingBadge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:#EEF2FF;

color:var(--primary);

font-weight:700;

margin-bottom:25px;

}

.pricingCard h2{

font-size:3rem;

margin-bottom:22px;

}

.pricingCard p{

color:var(--text-light);

margin-bottom:40px;

}

.priceArea{

margin-bottom:40px;

}

.priceArea small{

display:block;

margin-bottom:14px;

color:#64748B;

}

.mainPrice{

display:flex;

justify-content:center;

align-items:flex-end;

gap:8px;

margin-bottom:16px;

}

.mainPrice span{

font-size:2rem;

font-weight:700;

}

.mainPrice strong{

font-size:5rem;

line-height:1;

font-weight:800;

color:var(--primary);

}

.pricingInfo{

margin-top:45px;

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.pricingInfo div{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

}

.pricingInfo i{

color:var(--success);

}



/* ===========================================
GUARANTEE
=========================================== */

.guarantee{

padding:110px 0;

}

.guaranteeBox{

display:flex;

align-items:center;

gap:40px;

padding:50px;

background:white;

border-radius:28px;

box-shadow:var(--shadow);

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

}

.guaranteeIcon{

width:100px;

height:100px;

border-radius:50%;

background:#EEF2FF;

display:flex;

align-items:center;

justify-content:center;

font-size:2.4rem;

color:var(--primary);

}

.guaranteeBox h2{

font-size:2rem;

margin-bottom:18px;

}

.guaranteeBox p{

color:var(--text-light);

}



/* ===========================================
BENEFITS
=========================================== */

.benefits{

padding:140px 0;

background:var(--background-soft);

}

.benefitGrid{

display:grid;

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

gap:28px;

}

.benefit{

padding:40px;

background:white;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.benefit:hover{

transform:translateY(-8px);

}

.benefit i{

font-size:2rem;

color:var(--primary);

margin-bottom:24px;

}

.benefit h3{

margin-bottom:16px;

font-size:1.3rem;

}

.benefit p{

color:var(--text-light);

}



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

.faq{

padding:140px 0;

}

.faqItem{

margin-bottom:24px;

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

border-radius:18px;

overflow:hidden;

background:white;

box-shadow:var(--shadow);

}

.faqQuestion{

width:100%;

padding:28px;

display:flex;

justify-content:space-between;

align-items:center;

background:none;

border:none;

cursor:pointer;

font-size:1.1rem;

font-weight:700;

}

.faqAnswer{

display:none;

padding:0 28px 28px;

color:var(--text-light);

line-height:1.8;

}



/* ===========================================
FINAL CTA
=========================================== */

.finalCTA{

padding:150px 0;

text-align:center;

background:

linear-gradient(

135deg,

#4F46E5,

#6366F1

);

color:white;

}

.finalCTA h2{

font-size:3.4rem;

margin-bottom:26px;

}

.finalCTA p{

max-width:700px;

margin:auto;

font-size:1.15rem;

opacity:.9;

margin-bottom:45px;

}

.finalCTA .buyButton{

background:white;

color:var(--primary);

}



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

footer{

padding:60px 0;

background:#111827;

color:white;

}

.footerContainer{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

footer h3{

font-size:1.6rem;

margin-bottom:10px;

}

footer p{

opacity:.7;

}

.footerLinks{

display:flex;

gap:28px;

flex-wrap:wrap;

}

.footerLinks a{

color:white;

opacity:.8;

transition:.3s;

}

.footerLinks a:hover{

opacity:1;

color:white;

}

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

.menuToggle{

display:none;

width:46px;

height:46px;

border:none;

background:transparent;

font-size:1.4rem;

cursor:pointer;

color:var(--text);

}

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

.fadeUp{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.fadeUp.show{

opacity:1;

transform:translateY(0);

}

.fadeLeft{

opacity:0;

transform:translateX(-60px);

transition:.8s;

}

.fadeLeft.show{

opacity:1;

transform:none;

}

.fadeRight{

opacity:0;

transform:translateX(60px);

transition:.8s;

}

.fadeRight.show{

opacity:1;

transform:none;

}



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

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#F8FAFC;

}

::-webkit-scrollbar-thumb{

background:#D1D5DB;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary);

}



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

::selection{

background:var(--primary);

color:white;

}



/* ===========================================
HOVER GERAL
=========================================== */

.featureCard,
.benefit,
.pricingCard,
.guaranteeBox,
.comparisonCard,
.mockup{

transition:

transform .35s,

box-shadow .35s;

}

.featureCard:hover,
.benefit:hover,
.pricingCard:hover,
.guaranteeBox:hover,
.comparisonCard:hover,
.mockup:hover{

transform:translateY(-10px);

box-shadow:

0 35px 80px rgba(0,0,0,.14);

}



/* ===========================================
IMAGENS
=========================================== */

img{

user-select:none;

-webkit-user-drag:none;

}



/* ===========================================
BOTÕES
=========================================== */

.primaryButton,
.buyButton,
.headerButton{

position:relative;

overflow:hidden;

transition: transform .3s ease, box-shadow .3s ease;

}

.primaryButton::after,
.buyButton::after,
.headerButton::after{

content:"";

position:absolute;

width:0;

height:100%;

top:0;

left:0;

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

transition:.4s;

}

.primaryButton:hover::after,
.buyButton:hover::after,
.headerButton:hover::after{

width:100%;

}

.primaryButton:hover,
.buyButton:hover,
.headerButton:hover{

    transform: translateY(-3px);

    box-shadow: 0 18px 35px rgba(90,76,242,.35);

}


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

.faqItem.active .faqAnswer{

display:block;

animation:fadeFAQ .35s;

}

.faqItem.active i{

transform:rotate(45deg);

}

.faqQuestion i{

transition:.3s;

}

@keyframes fadeFAQ{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:none;

}

}



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

@media(max-width:1200px){

.heroContainer,
.showcaseGrid,
.splitGrid{

grid-template-columns:1fr;

gap:70px;

}

.featureGrid{

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

}

.benefitGrid{

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

}

.comparisonGrid{

grid-template-columns:1fr;

}

.hero h1{

font-size:3.2rem;

}

.showcaseContent h2,
.splitGrid h2{

font-size:2.4rem;

}

.sectionTitle h2{

font-size:2.4rem;

}

}



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

@media(max-width:900px){

header{

height:74px;

}

nav{

display:none;

}

.headerButton{

display:none;

}

.menuToggle{

display:flex;

align-items:center;

justify-content:center;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:2.7rem;

}

.sectionTitle h2{

font-size:2rem;

}

.featureGrid{

grid-template-columns:1fr;

}

.benefitGrid{

grid-template-columns:1fr;

}

.checkList{

grid-template-columns:1fr;

}

.pricingCard{

padding:50px 35px;

}

.mainPrice strong{

font-size:4rem;

}

.guaranteeBox{

flex-direction:column;

text-align:center;

}

.security{

justify-content:center;

}

.footerContainer{

text-align:center;

justify-content:center;

}

}



/* ===========================================
CELULAR
=========================================== */

@media(max-width:600px){

.container{

width:92%;

}

.hero{

padding-top:110px;

padding-bottom:70px;

}

.hero h1{

font-size:2.15rem;

}

.hero p{

font-size:1rem;

}

.price{

font-size:2.2rem;

}

.primaryButton,
.buyButton{

width:100%;

padding:18px;

}

.priceCard{

padding:26px;

}

.floatingCard{

display:none;

}

.showcase,
.features,
.pricing,
.benefits,
.comparison,
.faq,
.finalCTA{

padding:80px 0;

}

.showcaseContent h2,
.splitGrid h2{

font-size:2rem;

}

.sectionTitle{

margin-bottom:55px;

}

.sectionTitle h2{

font-size:1.8rem;

}

.pricingCard h2{

font-size:2rem;

}

.mainPrice strong{

font-size:3.2rem;

}

.finalCTA h2{

font-size:2.2rem;

}

.finalCTA p{

font-size:1rem;

}

.guaranteeBox{

padding:35px;

}

footer{

text-align:center;

}

}



/* ===========================================
TELAS MUITO GRANDES
=========================================== */

@media(min-width:1600px){

.hero{

padding-top:220px;

}

.hero h1{

font-size:5rem;

}

.container{

max-width:1380px;

}

}

.brands{

padding:40px 0;

background:white;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

}

.brands p{

text-align:center;

font-size:1.15rem;

font-weight:600;

color:#64748B;

letter-spacing:.08em;

}

.heroButtons{

display:flex;

gap:20px;

margin-top:10px;

margin-bottom:10px;

}

.heroLeft{

display:flex;

flex-direction:column;

justify-content:center;

}

/* ===========================================
STATS
=========================================== */

.stats{

padding:120px 0;

background:white;

}

.statsHeader{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.statsGrid{

display:grid;

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

gap:30px;

}

.statCard{

background:white;

padding:45px;

text-align:center;

border-radius:24px;

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

box-shadow:var(--shadow);

transition:.35s;

}

.statCard:hover{

transform:translateY(-8px);

}

.statCard h3{

font-size:3.5rem;

font-weight:800;

color:var(--primary);

margin-bottom:12px;

}

.statCard p{

color:var(--text-light);

font-weight:600;

}

@media(max-width:900px){

.statsGrid{

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

}

}

@media(max-width:600px){

.statsGrid{

grid-template-columns:1fr;

}

}

/* ===========================================
TESTIMONIALS
=========================================== */

.testimonials{

padding:140px 0;

background:#fff;

}

.testimonialGrid{

display:grid;

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

gap:30px;

}

.testimonialCard{

padding:40px;

background:white;

border-radius:24px;

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

box-shadow:var(--shadow);

transition:.35s;

}

.testimonialCard:hover{

transform:translateY(-8px);

}

.stars{

font-size:1.3rem;

color:#F59E0B;

margin-bottom:20px;

letter-spacing:4px;

}

.testimonialCard p{

margin-bottom:24px;

color:var(--text-light);

line-height:1.8;

}

.testimonialCard strong{

font-size:.95rem;

}

@media(max-width:900px){

.testimonialGrid{

grid-template-columns:1fr;

}

}

/* ===========================================
SPOTLIGHT
=========================================== */

.spotlight{

position:fixed;

width:700px;

height:700px;

left:0;

top:0;

pointer-events:none;

background:

radial-gradient(

circle,

rgba(79,70,229,.12),

transparent 65%

);

transform:

translate(-50%,-50%);

z-index:0;

transition:

transform .08s linear;

filter:blur(25px);

}

header,
section,
footer{

position:relative;

z-index:1;

}

.featureCard,
.benefit,
.statCard,
.testimonialCard,
.pricingCard,
.guaranteeBox{

position:relative;

overflow:hidden;

}

.featureCard::before,
.benefit::before,
.statCard::before,
.testimonialCard::before,
.pricingCard::before,
.guaranteeBox::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:

radial-gradient(

circle,

rgba(99,102,241,.18),

transparent 70%

);

top:-120px;

left:-120px;

transition:.45s;

}

.featureCard:hover::before,
.benefit:hover::before,
.statCard:hover::before,
.testimonialCard:hover::before,
.pricingCard:hover::before,
.guaranteeBox:hover::before{

transform:

scale(2);

}

.logo span{

color:#111827;

}