* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #0a0a0f;
  --bg-2: #11111a;
  --text: #e8e6e3;
  --muted: #8a8896;
  --accent: #d4a373;
  --accent-2: #6b5b95;
  --glow: rgba(212, 163, 115, 0.3);
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Loader */
.loader {
  position: fixed; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: opacity 1s ease, visibility 1s ease;
}
.loader.hide { opacity: 0; visibility: hidden; }
.loader-text {
  font-family: 'Cinzel', serif;
  font-size: 4rem; letter-spacing: 1rem;
  color: var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* Background */
.bg-gradient {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse at top left, #2a1a3e 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, #3e1a2a 0%, transparent 50%),
    var(--bg);
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events:none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#particles { position: fixed; inset: 0; z-index: -2; }

/* Navbar */
.navbar {
  position: fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.2rem 4rem; z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(10,10,15,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.logo {
  font-family:'Cinzel',serif; font-size:1.8rem; font-weight:700;
  color: var(--text);
}
.logo span { color: var(--accent); }
.nav-links { display: flex; list-style:none; gap:2.5rem; }
.nav-links a {
  color: var(--muted); text-decoration:none;
  font-size:.9rem; letter-spacing: 1px; text-transform: uppercase;
  transition: color .3s;
  position: relative;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a::after {
  content:''; position:absolute; bottom:-5px; left:0;
  width:0; height:1px; background: var(--accent); transition: width .3s;
}
.nav-links a:hover::after { width:100%; }

.chat-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; padding:.7rem 1.4rem; border-radius:50px;
  text-decoration:none; font-size:.85rem;
  box-shadow: 0 4px 20px var(--glow);
  transition: transform .3s, box-shadow .3s;
}
.chat-btn:hover { transform: translateY(-2px); box-shadow:0 8px 30px var(--glow); }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:25px; height:2px; background:var(--text); transition:.3s; }

/* Hero */
.hero {
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 0 4rem; position:relative;
}
.hero-content { max-width:900px; text-align:center; }
.tag {
  color: var(--accent); font-size:.85rem; letter-spacing:3px;
  margin-bottom: 1.5rem; opacity:0; animation: fadeUp 1s .5s forwards;
}
.hero-title {
  font-family:'Cinzel',serif;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height:1; font-weight:700;
  margin-bottom: 1.5rem;
}
.hero-title .line {
  display:block; opacity:0; transform:translateY(40px);
  animation: fadeUp 1s forwards;
}
.hero-title .line:nth-child(1){ animation-delay:.7s; }
.hero-title .line:nth-child(2){ animation-delay:.9s; color:var(--accent); font-style:italic; }
.hero-sub {
  font-size:1.2rem; color:var(--muted); margin-bottom:2.5rem;
  opacity:0; animation: fadeUp 1s 1.1s forwards;
}
.hero-sub span { color:var(--accent); font-weight:600; }
.hero-buttons {
  display:flex; gap:1rem; justify-content:center;
  opacity:0; animation: fadeUp 1s 1.3s forwards;
}
.btn-primary, .btn-ghost {
  padding:1rem 2rem; border-radius:50px;
  text-decoration:none; font-size:.9rem; letter-spacing:1px;
  transition:.3s; display:inline-block;
}
.btn-primary {
  background: var(--accent); color:#000; font-weight:600;
}
.btn-primary:hover { background:#fff; transform:translateY(-3px); }
.btn-primary.big { padding:1.2rem 3rem; font-size:1rem; margin-top:2rem; }
.btn-ghost {
  border:1px solid var(--muted); color:var(--text);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.scroll-indicator {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:.8rem; letter-spacing:2px;
  display:flex; align-items:center; gap:10px;
}
.scroll-indicator span {
  width:1px; height:30px; background:var(--accent);
  animation: scrollDown 2s infinite;
}
@keyframes scrollDown { 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1);} 100%{transform:scaleY(0); transform-origin:bottom;} }
@keyframes fadeUp { to{opacity:1; transform:translateY(0);} }

/* Section Title */
section { padding: 8rem 4rem; position: relative; }
.section-title { display:flex; align-items:center; gap:1.5rem; margin-bottom:4rem; }
.section-title span {
  color: var(--accent); font-family:'Cinzel',serif; font-size:1rem;
}
.section-title h2 {
  font-family:'Cinzel',serif; font-size:clamp(2rem,5vw,3.5rem);
  font-weight:500;
}

/* About */
.about-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:center; }
.img-frame {
  aspect-ratio:3/4; border-radius:8px; overflow:hidden;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  position:relative;
}
.img-placeholder { font-size:6rem; color:rgba(255,255,255,.4); }
.about-text h3 {
  font-family:'Cinzel',serif; font-size:2rem; margin-bottom:1.5rem;
  color: var(--accent);
}
.about-text p { color:var(--muted); margin-bottom:1rem; }
.about-text strong { color:var(--text); }
.about-stats { display:flex; gap:2rem; margin-top:2rem; }
.about-stats h4 { font-family:'Cinzel',serif; color:var(--accent); font-size:2rem; }
.about-stats p { color:var(--muted); font-size:.85rem; }

/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.skill-card {
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  padding: 2.5rem 2rem; border-radius:12px;
  transition:.4s; cursor:pointer;
}
.skill-card:hover {
  transform: translateY(-10px);
  background: rgba(212,163,115,.08);
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.skill-card i { font-size:2rem; color:var(--accent); margin-bottom:1.2rem; }
.skill-card h3 { margin-bottom:.7rem; font-size:1.2rem; }
.skill-card p { color:var(--muted); font-size:.9rem; }

/* Work */
.work-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
.work-card {
  background:rgba(255,255,255,.02); border-radius:12px;
  overflow:hidden; cursor:pointer; transition:.4s;
  border:1px solid rgba(255,255,255,.05);
}
.work-card:hover { transform: translateY(-8px); border-color:var(--accent); }
.work-thumb {
  aspect-ratio:16/10;
  background: linear-gradient(135deg, #2a1a3e, #3e1a2a);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:var(--accent);
  transition:.4s;
}
.work-card:hover .work-thumb { background: linear-gradient(135deg, #3e1a2a, #2a1a3e); }
.work-card h3 { padding:1.2rem 1.2rem .3rem; }
.work-card p { padding: 0 1.2rem 1.5rem; color:var(--muted); font-size:.85rem; }

/* Contact */
.contact { text-align:center; }
.contact .section-title { justify-content:center; }
.contact-text { color:var(--muted); font-size:1.1rem; max-width:600px; margin:0 auto; }
.socials { display:flex; justify-content:center; gap:1.5rem; margin-top:3rem; }
.socials a {
  color:var(--muted); font-size:1.5rem; transition:.3s;
  width:50px; height:50px; border:1px solid rgba(255,255,255,.1);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.socials a:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-5px); }

footer {
  text-align:center; padding:2rem; color:var(--muted); font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.05);
}

/* Reveal animations */
.reveal { opacity:0; transform:translateY(50px); transition: all 1s ease; }
.reveal.active { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 900px){
  .navbar { padding: 1rem 1.5rem; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:rgba(10,10,15,.95); padding:2rem; gap:1.5rem; }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; }
  .chat-btn { display:none; }
  section { padding: 5rem 1.5rem; }
  .hero { padding: 0 1.5rem; }
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .img-frame { max-width:300px; margin:0 auto; }
  .hero-buttons { flex-direction:column; align-items:center; }
}