:root{
  --bg:#0b0b0e;
  --bg-elev:#121218;
  --card:#101117;
  --text:#e7e8ee;
  --muted:#a9abc0;
  --primary:#d6b676; /* gold-like accent from CV */
  --primary-2:#6ab0ff; /* subtle blue accent */
  --glass:rgba(255,255,255,0.06);
  --ring:rgba(214,182,118,0.35);
  --header-h:64px;
  --font-base:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  font-size:var(--font-base);
  background:#0b0b0e; /* single base; animated layers added via ::before */
  line-height:1.65;
  overflow-x:hidden;
}

.animated-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: radial-gradient(1200px 800px at 10% -10%, #14141c 0%, #0b0b0e 60%)
              , radial-gradient(900px 600px at 90% 110%, #0a0a12 0%, transparent 70%);
}

.animated-bg:before{
  content:''; position:absolute; inset:-40%; z-index:-2;
  background:conic-gradient(from 0deg, rgba(106,176,255,0.16), rgba(214,182,118,0.22), rgba(106,176,255,0.16));
  filter:blur(68px); animation:spin 26s linear infinite;
}

@keyframes spin{to{transform:rotate(1turn)}}

.animated-bg:after{
  content:''; position:absolute; inset:-20%; z-index:-2;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(214,182,118,0.22), transparent 62%),
    radial-gradient(52% 52% at 18% 82%, rgba(106,176,255,0.22), transparent 60%);
  filter:blur(60px);
  animation:drift 30s ease-in-out infinite alternate;
}

@keyframes drift{
  from{transform:translate3d(-3%, -2%, 0) rotate(-8deg)}
  to{transform:translate3d(4%, 3%, 0) rotate(8deg)}
}

.noise-bg{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.035"/></svg>');
}

.container{width:min(1100px, 92%); margin-inline:auto}

/* Header */
.site-header{position:fixed; left:0; right:0; top:0; z-index:60; backdrop-filter:saturate(140%) blur(10px); background:rgba(22,22,30,0.62); border-bottom:1px solid rgba(255,255,255,0.08); box-shadow:0 6px 20px -12px rgba(0,0,0,0.6)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; min-height:var(--header-h)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand-mark{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--primary), #f1dfb4); color:#1a1a1f; font-weight:800}
.brand-name{font-weight:700; letter-spacing:.2px}

.nav a{color:var(--muted); text-decoration:none; margin-left:18px; padding:8px 10px; border-radius:10px; transition:all .2s ease}
.nav a:hover{color:var(--text); background:rgba(255,255,255,0.05)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:600}
.btn-primary{background:linear-gradient(135deg, var(--primary), #f1dfb4); color:#1a1a1f; box-shadow:0 10px 24px -6px var(--ring)}
.btn-outline{border:1px solid var(--ring); color:var(--text)}
.btn-ghost{background:rgba(255,255,255,0.06); color:var(--text); border:1px solid rgba(255,255,255,0.06)}

/* Hero */
.hero{padding:calc(var(--header-h) + 36px) 0 52px; position:relative}
.hero-grid{display:grid; grid-template-columns:320px 1fr; gap:32px}
.hero-decor{display:none}

.glass{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.08); border-radius:18px}
.lift{box-shadow:0 10px 30px -14px rgba(0,0,0,0.6)}

.hero-card{padding:22px}
.avatar-wrap{display:grid; place-items:center; padding:10px}
.avatar{width:100%; max-width:240px; aspect-ratio:3/4; object-fit:cover; border-radius:16px; border:2px solid rgba(255,255,255,0.08); box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.contact-list{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.contact-list li{color:var(--muted); display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.03)}

.intro .display{font-family:Montserrat, Inter, sans-serif; font-weight:900; font-size:48px; letter-spacing:1px; margin:0 0 8px}
.badge{display:inline-block; background:rgba(214,182,118,0.16); color:#f6e8c9; border:1px solid var(--ring); padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.5px; margin-bottom:14px}
.lead{color:#d5d7e5}
.cta-row{display:flex; gap:12px; margin-top:18px}

/* Typography consistency */
p, li{font-size:var(--font-base)}
h1, h2, h3{line-height:1.25}

/* Sections */
.section{padding:84px 0; scroll-margin-top:calc(var(--header-h) + 12px)}
.section-title{font-family:Montserrat, Inter, sans-serif; font-weight:800; letter-spacing:.6px; margin:0 0 28px; font-size:30px}
.section-title .t-ico{display:inline-block; width:28px; height:28px; margin-right:8px; vertical-align:-4px; background:linear-gradient(135deg, var(--primary), #f1dfb4));}
.t-ico{mask-size:contain; mask-repeat:no-repeat; mask-position:center; background:linear-gradient(135deg, var(--primary), #f1dfb4)}
.t-ico.briefcase{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M10 4h4a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3V6a2 2 0 0 1 2-2m4 3V6h-4v1h4m-9 5v6h14v-6H5m6 1h2v2h-2v-2Z"/></svg>')}
.t-ico.graduation{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="m12 3 11 5-11 5L1 8l4-1.82V13h2V6.54L12 9l7-3.18V13h2V6.18L23 8"/></svg>')}
.t-ico.folder{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2Z"/></svg>')}
.t-ico.spark{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 9 8l-6 3 6 3 3 6 3-6 6-3-6-3-3-6Z"/></svg>')}

/* subtle card glow */
.card{position:relative}
.card:before{content:''; position:absolute; inset:-1px; z-index:-1; border-radius:16px; background:radial-gradient(60% 60% at 20% 10%, rgba(214,182,118,0.18), transparent 60%)}

/* project hover */
.projects .project:hover{box-shadow:0 12px 30px -18px rgba(0,0,0,0.6)}
.projects .project:hover .project-toggle{background:rgba(255,255,255,0.03)}
.grid{display:grid; gap:22px}
.cols-2{grid-template-columns:1fr 1fr}
.list{margin:0; padding-left:20px}
.list li::marker{color:var(--primary)}
.list li{margin:6px 0; color:#d7d9e6}

/* Project toggles */
.projects{padding-left:0; list-style:none}
.projects .project{margin:8px 0; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden}
.project-toggle{width:100%; text-align:left; background:transparent; color:var(--text); border:0; padding:12px 14px; font:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
.project-toggle:after{content:'+'; color:#f6e8c9; font-weight:800; transition:transform .25s ease}
.project-toggle[aria-expanded="true"]:after{transform:rotate(45deg)}
.project-desc{padding:0 14px 12px 14px; color:#cfd2e6; border-top:1px solid rgba(255,255,255,0.06);}
.project-desc[hidden]{display:block; max-height:0; padding-bottom:0; overflow:hidden; border-top-color:transparent}

.skill-blocks .card{background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:18px}
.bullets{margin:0; padding-left:18px}
.bullets li::marker{color:var(--primary)}
.bullets li{margin:8px 0}

/* Timeline */
.timeline{position:relative; margin-left:6px}
.timeline:before{content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:linear-gradient(var(--primary), transparent)}
.t-item{position:relative; margin:18px 0 18px 24px; padding:10px 12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px}
.t-item:before{content:''; position:absolute; left:-20px; top:12px; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--primary), #f1dfb4); box-shadow:0 0 0 4px rgba(214,182,118,0.2)}
.t-meta{color:#f0e4c6; font-weight:600}

/* Footer */
.site-footer{padding:40px 0; background:#0a0a0d; border-top:1px solid rgba(255,255,255,0.06)}
.footer-inner{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.footer-brand{display:flex; align-items:center; gap:10px}
.copyright{grid-column:1/-1; color:var(--muted)}

/* Animations */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr; text-align:center}
}
@media (max-width: 600px){
  .intro .display{font-size:36px}
  .nav{display:none}
  .section{padding:70px 0}
}