*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  transition:background .3s,color .3s;
}
body.light{
  --bg:#ffffff;--surface:#ffffff;--text:#1a1d21;
  --muted:#5c636b;--gray:#d8dce1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* header */
.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 6%;
}
.logo{font-size:1.4rem;font-weight:800}
.theme-toggle{
  background:none;border:1px solid var(--gray);color:var(--muted);
  padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;
  letter-spacing:.08em;
}
.theme-toggle:hover{color:var(--text);border-color:var(--muted)}

/* hero */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:60px 6% 80px;max-width:1200px;margin:0 auto;
}
.hero-frame{
  width:280px;height:280px;border:3px solid var(--accent);
  border-radius:8px;display:flex;align-items:flex-end;justify-content:flex-end;
  position:relative;
}
.hero-frame span{
  position:absolute;right:-40px;bottom:-30px;font-size:3rem;
  color:var(--accent);font-weight:800;
}
.hero-img{width:100%;max-width:460px}
.hero-img img{width:100%;height:auto;border-radius:12px;border:3px solid var(--accent)}
.hero-text h1{font-size:3.2rem;font-weight:800}
.hero-text h2{font-size:2.4rem;color:var(--muted);font-weight:800;margin-bottom:20px}
.hero-skills{display:flex;gap:14px;list-style:none;flex-wrap:wrap}
.hero-skills li{
  background:var(--surface);border:1px solid var(--gray);
  padding:8px 14px;border-radius:8px;font-weight:600;color:var(--muted);
}

/* marquee */
.marquee{
  border-top:1px solid var(--gray);border-bottom:1px solid var(--gray);
  overflow:hidden;padding:16px 0;white-space:nowrap;
}
.marquee-inner{overflow:hidden}
.marquee-track{
  display:flex;width:max-content;will-change:transform;
  animation:marqueeScroll var(--marquee-speed,20s) linear infinite;
}
.marquee-group{display:flex;align-items:center;flex-shrink:0}
.marquee-group span{font-weight:800;color:var(--muted);letter-spacing:.1em;margin:0 18px}
.marquee-group i{color:var(--muted);font-style:normal}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--marquee-shift, 1000px)))}}

/* sections */
section{padding:70px 6%;max-width:1100px;margin:0 auto}
.section-title{
  text-align:center;font-size:2.6rem;font-weight:800;margin-bottom:50px;
}
.section-title::after{content:'';display:inline-block;width:8px;height:8px;
  background:var(--accent);border-radius:50%;margin-left:6px}

/* about */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:stretch}
.about-img{position:relative;min-height:100%}
.about-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;border-radius:10px;
}
.about-placeholder{
  position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--muted));
}
.about-text .lead{font-weight:700;margin-bottom:18px}
.about-text p{color:var(--muted);line-height:1.7;margin-bottom:14px}

/* experience */
.exp-item{
  display:grid;grid-template-columns:160px 1fr;gap:24px;
  padding:26px 0;border-bottom:1px solid var(--gray);
}
.exp-period{color:var(--accent);font-size:.85rem;font-weight:600}
.exp-item h3{font-size:1.25rem;margin-bottom:10px}
.exp-item h3 a:hover{color:var(--accent)}
.exp-item p{color:var(--muted);line-height:1.7}
.arrow{color:var(--accent)}

/* formation */
.course-list{list-style:none}
.course-list li{
  display:flex;align-items:center;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--gray);
}
.course-icon{
  padding:8px 14px;border-radius:8px;flex-shrink:0;
  font-weight:600;font-size:.85rem;letter-spacing:.05em;
  color:var(--muted);background:var(--surface);border:1px solid var(--gray);
}
.course-title{font-weight:700;font-size:1.1rem;flex:1}
.course-meta{color:var(--muted);font-size:.9rem}

/* contact */
.contact-sub{text-align:center;color:var(--muted);margin:-30px 0 40px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin:0 auto}
.contact-card{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);border:1px solid var(--gray);
  padding:20px 24px;border-radius:10px;font-weight:600;
  transition:border-color .2s,transform .2s;
}
.contact-card:hover{border-color:var(--accent);transform:translateY(-2px)}

/* footer */
.site-footer{text-align:center;padding:40px;color:var(--muted);font-size:.9rem}

@media(max-width:800px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-frame,.hero-img{margin:0 auto}
  .hero-skills{justify-content:center}
  .about-grid{grid-template-columns:1fr}
  .exp-item{grid-template-columns:1fr;gap:8px}
  .contact-grid{grid-template-columns:1fr}
  .hero-text h1{font-size:2.4rem}
}