styles.css

/* Base styles */
:root{--bg:#0b1220;--card:#0f172a;--text:#e2e8f0;--muted:#94a3b8;--brand:#0ea5e9;--brand2:#22c55e;--ring:rgba(14,165,233,.35);--shadow:0 10px 30px rgba(2,6,23,.5)}
:root.light{--bg:#f8fafc;--card:#ffffff;--text:#0f172a;--muted:#475569;--ring:rgba(14,165,233,.25);--shadow:0 8px 24px rgba(2,6,23,.08)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#030712 80%);color:var(--text);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(2,6,23,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(148,163,184,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:700}
.logo{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.nav-links{display:flex;gap:14px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-links a:hover{background:rgba(148,163,184,.12)}
.nav-toggle{display:none;font-size:22px;background:none;border:none;color:var(--text)}
.ghost{background:transparent;border:1px solid rgba(148,163,184,.3);padding:8px 12px;border-radius:10px;color:var(--text)}

/* Hero */
.profile-photo { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 16px; display: block; box-shadow: var(--shadow); object-fit: cover; }
.hero{display:grid;grid-template-columns:1fr;gap:16px;padding:72px 0 24px}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 8px}
.subtitle{color:var(--muted);max-width:780px}
.cta{display:flex;gap:12px;margin:18px 0 8px;flex-wrap:wrap}
.btn{background:#1f2937;border:none;color:var(--text);padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.quick-facts{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);padding:0;margin:10px 0 0;list-style:none}

/* Sections */
.section{padding:48px 0;opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
.section.visible{opacity:1;transform:translateY(0)}
.section h2{font-size:28px;margin:0 0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid rgba(148,163,184,.15);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.card.kpi h3{font-size:32px;margin:0;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Timeline */
.timeline{list-style:none;padding:0;margin:0;border-left:2px dashed rgba(148,163,184,.25)}
.timeline > li{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:24px 0 24px 24px;position:relative}
.timeline > li:before{content:'';position:absolute;left:-12px;top:32px;width:20px;height:20px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--bg)}
.timeline > li .time{color:var(--muted);font-weight:500;align-self:start;padding-top:8px}
.timeline .content{background:var(--card);border:1px solid rgba(148,163,184,.15);border-radius:14px;padding:20px;transition:transform .2s,box-shadow .2s}
.timeline .content:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(2,6,23,.6)}
.timeline .content h3{display:flex;align-items:center;margin:0 0 12px}
.timeline .icon{width:24px;height:24px;margin-right:12px;fill:var(--text)}
.timeline ul{margin:12px 0 0;list-style:none;padding-left:0;}
.timeline ul li{margin-bottom:12px; position: relative; padding-left: 20px;}
.timeline ul li:before{content: '•'; position: absolute; left: 0; top: 0; display: block; color: var(--brand);}

/* Cases */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.case{background:var(--card);border:1px solid rgba(148,163,184,.15);border-radius:14px;padding:16px;cursor:pointer;transition:box-shadow .2s}
.case[open]{box-shadow:0 4px 12px rgba(2,6,23,.3)}
.case summary{display:flex;flex-direction:column;gap:4px;outline:none}
.case summary::-webkit-details-marker{display:none}
.case summary:after{content:'▼';font-size:12px;align-self:flex-end;color:var(--muted);transition:transform .2s}
.case[open] summary:after{transform:rotate(180deg)}
.case-details{padding-top:16px;border-top:1px solid rgba(148,163,184,.15);margin-top:12px}
.case-details h4{margin:16px 0 4px;font-size:16px}
.case-details ul{list-style:disc;padding-left:20px;margin:8px 0}
.tags span{display:inline-block;margin:0 6px 6px 0;padding:4px 8px;border-radius:999px;background:rgba(14,165,233,.15);color:#7dd3fc;border:1px solid rgba(14,165,233,.35)}

/* Skills */
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:8px 12px;border-radius:999px;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.25)}
.edu{color:var(--muted)}
.sub{margin:18px 0 6px}

/* Contact */
.contact{display:flex;gap:12px;flex-wrap:wrap}

/* Footer */
.site-footer{border-top:1px solid rgba(148,163,184,.15);padding:20px 0;color:var(--muted);background:rgba(2,6,23,.5)}

/* Responsive */
@media (max-width:860px){
  .timeline li{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:64px;right:14px;background:var(--card);padding:12px;border-radius:12px;border:1px solid rgba(148,163,184,.2);box-shadow:var(--shadow)}
  .nav-links.show{display:flex;flex-direction:column;align-items:stretch}
}

/* Print */
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.nav,.cta,#themeToggle{display:none!important}
  .card,.timeline .content,.case{box-shadow:none;border:1px solid #e5e7eb}
}