:root {
--primary: #22c55e; /* Green Primary */
--primary-dark: #15803d;
--hero-bg: #ecfdf5; /* Light Green Hero */
--text-dark: #0f172a;
--text-light: #475569;
--white: #ffffff;
}
/* ================= BODY ================= */
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background-color: var(--white); /* FULL WHITE */
color: var(--text-dark);
}
/* ================= HEADER ================= */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid #e5e7eb;
}
.logo {
font-size: 24px;
font-weight: 700;
color: var(--primary);
text-decoration: none;
}
nav a {
color: var(--text-dark);
text-decoration: none;
margin-left: 20px;
font-weight: 500;
transition: 0.3s;
}
nav a:hover {
color: var(--primary);
}
/* ================= HERO SECTION ================= */
.hero {
height: 85vh;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
background: linear-gradient(
135deg,
#ecfdf5 0%,
#d1fae5 50%,
#ffffff 100%
);
position: relative;
overflow: hidden;
}
.hero-text {
max-width: 50%;
z-index: 1;
}
.hero-text h1 {
font-size: 3.4rem;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-dark);
}
.hero-text span {
color: var(--primary);
}
.hero-text p {
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 30px;
}
/* ================= BUTTON (GREEN + WHITE STYLE) ================= */
.btn-primary {
padding: 14px 34px;
background: linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);
color: #ffffff;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
box-shadow: 0 12px 25px rgba(34,197,94,0.35);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-primary:hover {
background: #ffffff;
color: var(--primary-dark);
border-color: var(--primary);
box-shadow: 0 15px 30px rgba(34,197,94,0.45);
transform: translateY(-3px);
}
/* ================= HERO VISUAL ================= */
.hero-visual {
width: 45%;
height: 400px;
background: url('https://source.unsplash.com/random/800x600/?technology,3d')
no-repeat center;
background-size: cover;
border-radius: 20px;
box-shadow: 0 20px 45px rgba(0,0,0,0.15);
transform: perspective(1000px) rotateY(-8deg);
border: 2px solid #bbf7d0;
}