:root{

--primary:#11D5C7;
--dark:#050816;
--dark2:#0D1324;
--white:#FFFFFF;
--gray:#A0AEC0;

}


*{

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

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Plus Jakarta Sans',sans-serif;

background:white;

overflow-x:hidden;

color:#111;

}



a{

text-decoration:none;

color:inherit;

}


.container{

width:min(1400px,90%);

margin:auto;

}



/* NAVBAR */


.navbar{

position:fixed;

width:100%;

top:0;

left:0;

padding:22px 0;

z-index:999;

background:rgba(5,8,22,.75);

backdrop-filter:blur(20px);

transition:.4s;

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

}


.nav-container{

width:min(1400px,90%);

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}


.logo{

height:44px;

width:auto;

}


.nav-links{

display:flex;

align-items:center;

gap:40px;

}


.nav-links a{

color:white;

font-size:15px;

font-weight:500;

opacity:.85;

transition:.3s;

}


.nav-links a:hover{

opacity:1;

color:var(--primary);

}



.nav-btn{

padding:14px 28px;

border-radius:999px;

background:var(--primary);

border:none;

font-weight:700;

cursor:pointer;

transition:.4s;

}


.nav-btn:hover{

transform:translateY(-2px);

box-shadow:

0 0 40px rgba(17,213,199,.4);

}



/* HERO */


.hero{

min-height:100vh;

background:

radial-gradient(
circle at 75% 25%,
rgba(17,213,199,.2),
transparent 30%
),

linear-gradient(
135deg,
var(--dark),
var(--dark2)
);

display:flex;

align-items:center;

padding-top:140px;

position:relative;

overflow:hidden;

}


.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

right:-150px;

top:-150px;

background:

radial-gradient(
rgba(17,213,199,.2),
transparent 70%
);

filter:blur(100px);

}


.hero-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:100px;

width:min(1400px,90%);

margin:auto;

position:relative;

z-index:2;

}


.hero-left{

flex:1;

color:white;

}


.hero-left h1{

font-size:88px;

line-height:1.05;

font-weight:800;

margin-bottom:28px;

}


.hero-left p{

font-size:22px;

color:#cbd5e1;

margin-bottom:40px;

line-height:1.7;

}


.hero-buttons{

display:flex;

gap:18px;

}



.primary-btn{

padding:18px 34px;

border-radius:999px;

background:var(--primary);

font-weight:700;

color:black;

}


.secondary-btn{

padding:18px 34px;

border-radius:999px;

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

color:white;

}



/* dashboard */


.hero-right{

flex:1;

}


/* IMAGE PLACEHOLDER */
/* Ratio: 4:3 */
/* Recommended size: 1400x1000 */

.dashboard-preview{

height:550px;

background:

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

border-radius:36px;

backdrop-filter:blur(30px);

border:

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

display:flex;

align-items:center;

justify-content:center;

color:white;

box-shadow:

0 30px 60px rgba(0,0,0,.4);

}



/* footer */


footer{

background:#050816;

padding:100px 0;

color:white;

}


.footer-grid{

display:grid;

grid-template-columns:

2fr 1fr 1fr;

gap:60px;

width:min(1400px,90%);

margin:auto;

}


.footer-title{

font-size:18px;

font-weight:700;

margin-bottom:24px;

}


.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}


.footer-links a{

opacity:.7;

}


.footer-links a:hover{

opacity:1;

color:var(--primary);

}



/* floating WA */


.wa-float{

position:fixed;

bottom:30px;

right:30px;

width:70px;

height:70px;

background:var(--primary);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

box-shadow:

0 0 40px rgba(17,213,199,.5);

animation:pulse 2s infinite;

}


@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.section{

padding:70px 0;

}

.section-light{

background:white;

}


.section-header{

text-align:center;

max-width:900px;

margin:auto auto 80px;

}


.section-header h2{

font-size:52px;

margin-bottom:24px;

}


.section-header p{

font-size:20px;

color:#666;

line-height:1.8;

}

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

.section-button{

display:flex;

justify-content:center;

align-items:center;

margin-top:60px;

}


.section-button .primary-btn{

width:auto;

min-width:240px;

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 38px;

}


/* cards container consistency */

.problem-grid,
.feature-grid,
.step-grid{

margin-top:60px;

}


/* fix card text */

.problem-card,
.feature-card,
.step-card{

display:flex;

flex-direction:column;

justify-content:flex-start;

text-align:left;

}


/* spacing for title inside cards */

.problem-card h3,
.feature-card h3,

/* HOW STEP INLINE */

.step-inline{

display:flex;

align-items:center;

gap:14px;

}


.step-number{

font-size:42px;

font-weight:800;

color:var(--primary);

flex-shrink:0;

}


.step-text{

font-size:24px;

font-weight:700;

line-height:1.5;

color:#111;

}

.problem-card p,
.feature-card p,
.step-card p{

line-height:1.7;

color:#666;

}


/* how section extra spacing */

.how-section{

padding-top:160px;

padding-bottom:160px;

}


/* feature section spacing */

.feature-grid{

margin-bottom:50px;

}


/* problem section spacing */

.problem-grid{

margin-bottom:50px;

}

.problem-grid,
.feature-grid,
.step-grid{

display:grid;

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

gap:30px;

}


.problem-card,
.feature-card,
.step-card{

padding:50px;

border-radius:30px;

background:white;

border:1px solid #eee;

transition:.4s;

}


.problem-card:hover,
.feature-card:hover,
.step-card:hover{

transform:translateY(-10px);

box-shadow:

0 30px 50px rgba(0,0,0,.08);

}


.solution-section{

padding:140px 0;

background:#050816;

color:white;

}


.flow-grid{

display:flex;

justify-content:center;

align-items:center;

gap:30px;

margin-top:80px;

flex-wrap:wrap;

}


.flow-card{

padding:30px 50px;

background:#0F172A;

border-radius:20px;

}


.flow-arrow{

font-size:40px;

opacity:.5;

}


.cta-section{

padding:150px 0;

text-align:center;

background:

linear-gradient(
135deg,
#050816,
#0D1324
);

color:white;

}


.cta-section h2{

font-size:60px;

margin-bottom:20px;

}

/* reveal animation */

/* animation */

.reveal{

opacity:0;

transform:

translateY(80px);

transition:

opacity 1s ease,
transform 1s ease;

will-change:
opacity,
transform;

}


.show{

opacity:1;

transform:

translateY(0);

}


/* stagger */

.delay-1{

transition-delay:.15s;

}

.delay-2{

transition-delay:.3s;

}

.delay-3{

transition-delay:.45s;

}

.dashboard-ui{

width:90%;

display:flex;

flex-direction:column;

gap:20px;

}


.dashboard-header{

font-size:24px;

font-weight:700;

color:white;

}


.alert-card{

padding:20px;

border-radius:16px;

background:

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

color:white;

}


.whatsapp-mini{

margin-top:20px;

padding:18px;

border-radius:20px;

background:#11D5C7;

color:black;

font-weight:700;

}

.hero-image-placeholder{

width:100%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

border-radius:30px;

border:

1px dashed rgba(255,255,255,.15);

color:

rgba(255,255,255,.4);

font-size:18px;

}




.delay-1{

transition-delay:.15s;

}

.delay-2{

transition-delay:.3s;

}

.delay-3{

transition-delay:.45s;

}


.pricing-hero{

padding-top:130px;
padding-bottom:35px;

background:
linear-gradient(
135deg,
#050816,
#0D1324
);

color:white;

}


.pricing-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;

padding:30px 0 80px 0;

}


.pricing-box{

background:white;

padding:40px;

border-radius:30px;

margin-bottom:30px;

border:1px solid #eee;

}


.processing-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:30px;

}


.processing-card{

padding:30px;

border-radius:20px;

background:#f5f7fa;

}


.calc-row{

display:flex;

gap:20px;

margin-bottom:30px;

}


.calc-row input,
.calc-row select,
input,
select{

width:100%;

padding:16px;

border-radius:14px;

border:1px solid #ddd;

margin-top:10px;

}


.summary-card{

position:sticky;

top:120px;

padding:40px;

background:white;

border-radius:30px;

border:1px solid #eee;

}


.summary-row,
.summary-total{

display:flex;

justify-content:space-between;

margin:20px 0;

}


.summary-total{

font-size:28px;

font-weight:700;

}

.pricing-info-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

margin-top:10px;

}

.pricing-box{

padding:30px;

}


.pricing-box h1{

font-size:50px;

margin-top:5px;

margin-bottom:8px;

}


.processing-card{

padding:20px;

}


.processing-card h3{

font-size:24px;

margin-bottom:5px;

}

.pricing-hero .section-header{

margin-bottom:0;

}


.pricing-hero h1{

font-size:58px;

margin-bottom:10px;

}

.pricing-platform{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

min-height:260px;

}


.pricing-platform h1{

margin-top:10px;

margin-bottom:12px;

}


.pricing-platform p{

max-width:280px;

line-height:1.6;

color:#666;

}