:root{
  --bg:#0b0b0c; 
  --card:#121214; 
  --text:#e7e7ea; 
  --muted:#a1a1aa; 
  --accent:#5b9cff; 
  --border:#232327;
  transition: background-color .3s ease, color .3s ease;
}
body.theme-technical{--bg:#0b0b0c; --card:#121214; --text:#e7e7ea; --muted:#a1a1aa; --accent:#5b9cff; --border:#232327}
body.theme-nontechnical{--bg:#0b0e10; --card:#101214; --text:#f1f5f9; --muted:#9aa1b2; --accent:#22c55e; --border:#1f2937}
body.theme-marketing{--bg:#0d0b10; --card:#151218; --text:#f8fafc; --muted:#a1a1aa; --accent:#fb7185; --border:#2a2430}
body.theme-creative{--bg:#0a0b12; --card:#12131a; --text:#eae9ff; --muted:#a5adcb; --accent:#a78bfa; --border:#23263a}
*{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:var(--bg); color:var(--text); font-size:14px; line-height:1.35;
}
.page{max-width:860px; margin:0 auto; padding:16px}

.top-switch{position:fixed; right:16px; top:16px; display:flex; align-items:center; gap:8px; z-index:40}
.top-switch .labels{display:flex; gap:6px}
.top-switch .pill{background:transparent; color:#cfd3dd; border:1px solid var(--border); padding:4px 8px; border-radius:999px; cursor:pointer; font-weight:600; font-size:12px}
.top-switch .pill.active{border-color:var(--accent); color:var(--text)}

.header{display:flex; gap:16px; align-items:center; padding:16px; background:var(--card); border:1px solid var(--border); border-radius:14px}
.hero{display:grid; grid-template-columns:1.4fr .6fr; align-items:center}
.avatar{position:relative; width:320px; height:320px; flex:0 0 320px}
.avatar img,.avatar-fallback{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; position:absolute; top:0; left:0}
.avatar img{z-index:2}
.avatar-fallback{display:flex; align-items:center; justify-content:center; background:#1e1e22; color:#c9d2ff; font-weight:700; font-size:32px; z-index:1}
.avatar:before{content:""; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(from 180deg at 50% 50%, #5b9cff, #9f7aea, #5b9cff); filter:blur(8px); opacity:.25}
.avatar:after{content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.profile-toggle{position:absolute; left:50%; transform:translateX(-50%); bottom:-18px; display:flex; gap:0; background:#0f1115; border:1px solid var(--border); border-radius:999px; padding:4px}
.profile-toggle .seg{background:transparent; color:#cfd3dd; border:none; padding:6px 10px; border-radius:999px; font-weight:600; cursor:pointer; font-size:12px}
.profile-toggle .seg.active{background:var(--accent); color:#07102a}
.intro h1{margin:0 0 2px 0; font-size:26px}
.headline{font-size:28px; font-weight:700}
.headline .accent{color:#ff4d6d}
.intro .muted{color:var(--muted); margin:0 0 6px 0}
.contact{display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:var(--muted)}
.contact a{color:var(--text); text-decoration:none}
.contact a:hover{color:var(--accent)}
.actions{margin-top:8px; display:flex; gap:8px}
.btn{background:var(--accent); color:#07102a; border:none; padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer; text-decoration:none; font-size:14px}
.btn.secondary{background:#1f2937; color:#e5e7eb}
.btn.secondary:hover{background:#263241}

.section{margin-top:20px}
.section h2{font-size:16px; margin:0 0 10px 0; color:#d6dbff}
.items{display:flex; flex-direction:column; gap:8px}
.item{padding:12px; background:var(--card); border:1px solid var(--border); border-radius:10px; transition:all 0.2s ease; cursor:pointer}
.item:hover{background:#1a1b1f; border-color:var(--accent)}
.item .row{display:flex; justify-content:space-between; gap:12px}
.item .title{font-weight:600}
.item .meta{color:var(--muted)}
.item p{margin:6px 0 0 0; color:#c9cad1; max-height:0; overflow:hidden; transition:max-height 0.3s ease}
.item.expanded p{max-height:200px}
.item .expand-hint{color:var(--accent); font-size:12px; opacity:0; transition:opacity 0.2s ease; display:flex; align-items:center}
.item:hover .expand-hint{opacity:1}
.item .chevron{width:10px; height:10px; border-right:2px solid #9aa1b2; border-bottom:2px solid #9aa1b2; transform:rotate(-45deg); margin-left:8px; align-self:center; transition:transform .2s ease}
.item.expanded .chevron{transform:rotate(45deg)}

.grid{display:grid; grid-template-columns:1.2fr .8fr; gap:12px}
.tags{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px}
.tags li{padding:4px 8px; background:#1a1b1f; border:1px solid var(--border); border-radius:999px; color:#cfd3dd; font-size:12px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.card{padding:12px; background:var(--card); border:1px solid var(--border); border-radius:10px; transition:all .2s ease; cursor:pointer}
.card .name{font-weight:600}
.card .desc{color:#c9cad1; margin-top:4px}
.card a{color:var(--accent); text-decoration:none}
.card .tags{margin-top:8px}
.card .details{max-height:0; overflow:hidden; transition:max-height .25s ease}
.card.expanded{border-color:var(--accent); background:#16171d}
.card.expanded .details{max-height:240px}

.footer{margin:18px 0 6px; color:var(--muted); text-align:center; font-size:12px}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{width:min(720px,90vw); background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-close{position:absolute; right:22px; top:22px; background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:4px 8px; cursor:pointer}

@media (max-width:700px){
  .header{flex-direction:column; align-items:flex-start}
  .hero{display:flex; flex-direction:column-reverse}
  .avatar{width:240px; height:240px; flex-basis:240px}
  .grid{grid-template-columns:1fr}
}

/* Print-friendly */
@media print{
  :root{ --bg:#fff; --card:#fff; --text:#000; --muted:#555; --border:#ddd; --accent:#111 }
  body{background:#fff; color:#000}
  .page{padding:0}
  .btn,.actions{display:none}
  a{color:#000; text-decoration:none}
}