/* ── Home Page Styles ── */
#hero {
  height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  position:relative; overflow:hidden; background:var(--bg);
}
#hero::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(44,24,16,0.05) 1px, transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.18; animation:drift 12s ease-in-out infinite; }
.orb-1 { width:560px; height:560px; background:var(--accent);  top:-100px; left:-80px; animation-delay:0s; }
.orb-2 { width:440px; height:440px; background:var(--accent2); bottom:-60px; right:-60px; animation-delay:-4s; }
.orb-3 { width:320px; height:320px; background:#E8833D;         top:40%; left:38%; animation-delay:-8s; }
@keyframes drift {
  0%,100%{transform:translate(0,0)scale(1)} 33%{transform:translate(28px,-28px)scale(1.04)} 66%{transform:translate(-18px,18px)scale(0.97)}
}
.hero-content { position:relative; z-index:2; }
.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:700;
  color:var(--accent); border:2px solid rgba(212,83,74,0.25);
  padding:6px 18px; border-radius:20px; margin-bottom:28px;
  background:rgba(212,83,74,0.06);
  opacity:0; transform:translateY(20px); animation:fadeUp 0.8s var(--ease) 0.2s forwards;
}
.hero-tag::before {
  content:''; width:7px; height:7px; background:#5C9E54; border-radius:50%;
  box-shadow:0 0 6px #5C9E54; animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-name {
  font-size:clamp(3.8rem,9vw,8.5rem); font-weight:900; letter-spacing:-4px; line-height:0.95;
  margin-bottom:22px; color:var(--text);
  opacity:0; transform:translateY(30px); animation:fadeUp 0.9s var(--ease) 0.4s forwards;
}
.hero-name .grad {
  background:linear-gradient(135deg,var(--accent),#E8833D);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub {
  font-size:clamp(1rem,2vw,1.3rem); color:var(--muted); font-weight:600;
  max-width:500px; line-height:1.65; margin:0 auto 42px;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.9s var(--ease) 0.6s forwards;
}
.hero-cta {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.9s var(--ease) 0.8s forwards;
}
.scroll-hint {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:fadeUp 1s var(--ease) 1.4s forwards;
}
.scroll-hint span { font-size:0.7rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); font-weight:700; }
.scroll-line { width:1px; height:50px; background:linear-gradient(to bottom,var(--muted),transparent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:1}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ── Bento Grid ── */
.bento {
  display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto;
  gap:16px; padding:40px 5% 60px; max-width:1200px; margin:0 auto;
}
.bento-card {
  background:var(--card); border:1.5px solid var(--border);
  border-radius:24px; overflow:hidden; text-decoration:none; color:inherit;
  position:relative; cursor:none;
  transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease),border-color 0.3s;
  min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; padding:32px;
}
.bento-card:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 20px 50px rgba(44,24,16,0.12); border-color:var(--accent); }
.bento-card:hover .bento-arrow { opacity:1; transform:translate(0,0); }
.bento-card:hover .bento-bg-text { opacity:0.07; transform:scale(1.06); }
.bento-about   { grid-column:1; grid-row:1; min-height:280px; background:linear-gradient(145deg,#FFF0EF,#FFE4E2); }
.bento-skills  { grid-column:2; grid-row:1/3; min-height:480px; background:linear-gradient(160deg,#F2FFF0,#E4F5E2); }
.bento-projects{ grid-column:1; grid-row:2; background:linear-gradient(145deg,#FFFBF0,#FFF5E0); }
.bento-card .card-orb { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; transition:opacity 0.5s; }
.bento-about    .card-orb { width:260px; height:260px; background:var(--accent);  opacity:0.1; top:-60px; right:-60px; }
.bento-skills   .card-orb { width:300px; height:300px; background:var(--accent2); opacity:0.1; bottom:-80px; left:-60px; }
.bento-projects .card-orb { width:220px; height:220px; background:#E8833D; opacity:0.1; top:-40px; right:-40px; }
.bento-card:hover .card-orb { opacity:0.2; }
.bento-bg-text {
  position:absolute; font-size:clamp(4rem,10vw,8rem); font-weight:900; letter-spacing:-4px;
  opacity:0.04; top:50%; left:50%; transform:translate(-50%,-50%)scale(1);
  pointer-events:none; white-space:nowrap; user-select:none; color:var(--text);
  transition:opacity 0.5s var(--ease),transform 0.5s var(--ease);
}
.bento-label { font-size:0.72rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:700; }
.bento-title { font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:900; letter-spacing:-1px; line-height:1.1; margin-bottom:10px; }
.bento-about    .bento-title { color:var(--accent); }
.bento-skills   .bento-title { color:var(--accent2); }
.bento-projects .bento-title { color:#C07820; }
.bento-desc { font-size:0.87rem; color:var(--muted); line-height:1.65; max-width:360px; font-weight:500; }
.bento-arrow {
  position:absolute; top:28px; right:28px; width:36px; height:36px; border-radius:50%;
  background:rgba(44,24,16,0.06); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--text);
  opacity:0; transform:translate(-5px,5px); transition:all 0.35s var(--ease);
}
.bento-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.bento-pill { font-size:0.72rem; padding:5px 12px; border-radius:20px; background:rgba(44,24,16,0.06); border:1.5px solid var(--border); color:var(--muted); font-weight:600; }

/* ── Contact Strip ── */
.contact-strip { max-width:1200px; margin:0 auto 60px; padding:0 5%; }
.contact-strip-inner {
  background:linear-gradient(135deg,var(--accent),#E8833D);
  border-radius:24px; padding:48px 52px;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  position:relative; overflow:hidden; text-decoration:none; color:#fff; cursor:none;
  transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease);
}
.contact-strip-inner:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(212,83,74,0.3); }
.contact-strip-text h3 { font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900; letter-spacing:-0.5px; margin-bottom:6px; }
.contact-strip-text p { font-size:0.9rem; opacity:0.85; font-weight:500; }
.contact-strip-btn { flex-shrink:0; background:rgba(255,255,255,0.22); backdrop-filter:blur(10px); border:2px solid rgba(255,255,255,0.35); color:#fff; padding:13px 28px; border-radius:30px; font-size:0.9rem; font-weight:700; white-space:nowrap; transition:background 0.3s; }
.contact-strip-inner:hover .contact-strip-btn { background:rgba(255,255,255,0.32); }
.cs-orb { position:absolute; width:280px; height:280px; background:rgba(255,255,255,0.12); border-radius:50%; filter:blur(60px); right:-60px; top:-80px; pointer-events:none; }

@media(max-width:900px){ .bento{grid-template-columns:1fr} .bento-skills,.bento-about,.bento-projects{grid-column:1;grid-row:auto;min-height:220px} }
@media(max-width:600px){ .contact-strip-inner{flex-direction:column;align-items:flex-start;padding:36px} }

/* ── Dark theme overrides ── */
[data-theme="dark"] #hero::before { background-image: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); }
[data-theme="dark"] .hero-tag { border-color: rgba(108,99,255,0.3); background: rgba(108,99,255,0.08); }
[data-theme="dark"] .hero-tag::before { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
[data-theme="dark"] .hero-name .grad { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; }
[data-theme="dark"] .bento-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
[data-theme="dark"] .bento-arrow { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .bento-pill { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .bento-projects .bento-title { color: var(--accent2); }
[data-theme="dark"] .contact-strip-inner { background: linear-gradient(135deg, var(--accent), #9B59B6); }
[data-theme="dark"] .contact-strip-inner:hover { box-shadow: 0 20px 50px rgba(108,99,255,0.3); }