/* static/css/styles.css */
:root{
  --accent: #111;
  --muted: #6b6b6b;
  --card-border: #e9e9e9;
  --radius: 12px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
}

*{box-sizing:border-box}
body{margin:0;line-height:1.6;background:#fff;font-weight:300}

.container{max-width:1200px;margin:0 auto;padding:40px}

.site-header{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px}
.brand{font-weight:700;color:var(--accent);text-decoration:none}
.site-nav a{margin-left:20px;color:#6e6e6e;text-decoration:none;padding:8px 0}
.site-nav a:hover{color:var(--accent);border-bottom:2px solid #222}

/* Hero */
.hero{display:flex;gap:30px;align-items:center;padding:60px 0}
.hero-left{flex:1}
.hero-right{width:340px}
.hero h1{font-size:72px;line-height:0.95;margin:0;font-weight:900}
.tagline{color:#7e7e7e;margin-top:12px;font-weight:700}
.hero-sub{color:#5b5b5b;max-width:520px;margin-top:18px}

.hero-ctas{margin-top:20px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none}
.btn-primary{background:#111;color:#fff;border:1px solid #111}
.btn-outline{background:transparent;border:1px solid #ddd;color:#111}

/* profile image */
.profile-img{width:100%;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.08)}

/* About */
.about-inner{display:flex;gap:30px;align-items:center;margin-top:20px}
.about-text{flex:1;font-size:18px;color:#4e4e4e}
.about-pic img{width:300px;border-radius:12px}

/* cards/grid */
.grid-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:20px}
.card{border:1px solid var(--card-border);border-radius:12px;padding:20px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.04)}
.post-card .card-img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.card-body{padding-top:12px}
.card h3{margin:6px 0;font-size:20px}
.card .excerpt{color:#6b6b6b}

/* Ventures grid */
.grid-ventures{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:18px}
.venture-logo{width:80px;height:80px;object-fit:contain;border-radius:8px;border:1px solid #eee;padding:8px}

/* contact links */
.contact-links{display:flex;gap:14px;margin-top:16px}

/* timeline experience */
.timeline{border-left:3px solid #eee;padding-left:20px;margin-top:20px}
.timeline-item{margin-bottom:28px}
.timeline-card{padding:20px}

/* footer */
.site-footer{background:#131313;color:#ddd;padding:40px 0;margin-top:60px}
.site-footer a{color:#ddd;text-decoration:none}

/* small screens */
@media (max-width:900px){
  .hero{flex-direction:column}
  .hero h1{font-size:48px}
  .hero-right{width:100%}
  .container{padding:20px}
}

/* Hover effects for images */
img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Hover effects for buttons */
.btn {
  transition: all 0.3s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Specific button styles */
.btn-primary:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}
.btn-outline:hover {
  background: #111;
  border-color: #111;
  color: #fff;
}
/* Card hover effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
/* Navigation links */
.site-nav a,
.site-footer a {
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* Header nav hover */
.site-nav a:hover {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* Footer nav hover */
.site-footer a:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}

/* Basic nav layout */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}