* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* BODY */

html {
scroll-behavior: smooth;
}

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

background: #faf8f2;
color: #111111;

max-width: 1000px;

margin: auto;
padding: 2rem;

line-height: 1.7;

transition:
background 0.3s ease,
color 0.3s ease;
}

/* NAVBAR */

nav {
display: flex;
justify-content: space-between;
align-items: center;

margin-bottom: 7rem;

position: sticky;
top: 0;

padding: 1rem 0;

backdrop-filter: blur(10px);

z-index: 100;
}

.logo {
font-size: 1.1rem;
font-weight: 700;

letter-spacing: -0.5px;
}

/* NAV LINKS */

.nav-links {
display: flex;
gap: 2rem;
}

.nav-links a {
text-decoration: none;

color: #111111;

font-size: 0.95rem;
font-weight: 500;

position: relative;

transition: 0.2s ease;
}

.nav-links a::after {
content: "";

position: absolute;

left: 0;
bottom: -5px;

width: 0%;
height: 2px;

background: #111;

transition: 0.25s ease;
}

.nav-links a:hover::after {
width: 100%;
}

.nav-links a:hover {
opacity: 0.7;
}

/* BUTTON */

button {
border: none;

background: #fffef9;

width: 45px;
height: 45px;

border-radius: 14px;

cursor: pointer;

font-size: 1rem;

transition: 0.2s ease;

box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

button:hover {
transform: translateY(-3px);
}

/* HERO */

.hero {
margin-bottom: 10rem;
}

.status {
display: flex;
align-items: center;

gap: 0.6rem;

color: #666;

margin-bottom: 1rem;

font-size: 0.95rem;
}

.dot {
width: 10px;
height: 10px;

background: #7ed957;

border-radius: 50%;

animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
opacity: 1;
}

50% {
opacity: 0.4;
}

100% {
opacity: 1;
}
}

.hero h1 {
font-size: 5.5rem;

line-height: 1.05;

margin-bottom: 1.5rem;

letter-spacing: -3px;
}

.hero-text {
font-size: 1.3rem;

color: #666;

max-width: 700px;
}

/* SECTIONS */

.section {
margin-bottom: 8rem;
}

.section h2 {
font-size: 2.3rem;

margin-bottom: 2rem;

letter-spacing: -1px;
}

/* CARDS */

.card {
background: #fffef9;

padding: 2rem;

border-radius: 24px;

margin-bottom: 1.5rem;

transition:
transform 0.25s ease,
box-shadow 0.25s ease;

box-shadow: 0 5px 20px rgba(0,0,0,0.04);

border: 1px solid rgba(0,0,0,0.04);
}

.card:hover {
transform: translateY(-6px);

box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.card h3 {
font-size: 1.3rem;

margin-bottom: 1rem;

letter-spacing: -0.5px;
}

.card p {
color: #666;
}

/* CONTACT LINKS */

#contact a {
color: #111;

text-decoration: none;

transition: 0.2s ease;
}

#contact a:hover {
opacity: 0.6;
}

/* DARK MODE */

.dark-mode {
background: #0f0f0f;
color: #f5f5f5;
}

.dark-mode nav {
background: rgba(15, 15, 15, 0.7);
}

.dark-mode .nav-links a {
color: white;
}

.dark-mode .nav-links a::after {
background: white;
}

.dark-mode .hero-text {
color: #b5b5b5;
}

.dark-mode .status {
color: #b5b5b5;
}

.dark-mode .card {
background: #1b1b1b;

border: 1px solid rgba(255,255,255,0.05);

box-shadow: none;
}

.dark-mode .card:hover {
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dark-mode .card p {
color: #b5b5b5;
}

.dark-mode button {
background: #1b1b1b;
color: white;
}

.dark-mode #contact a {
color: white;
}

/*