.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all var(--transition)}
.card:hover{border-color:var(--border-h);box-shadow:var(--shadow)}
.card-image{position:relative;border-radius:var(--radius-sm);overflow:hidden;margin:-1.5rem -1.5rem 1rem;aspect-ratio:16/10;background:var(--bg-3)}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-image-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-3)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;padding:1rem}
.card:hover .card-overlay{opacity:1}
.card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);color:#fff;opacity:0;transition:opacity .2s}
.card-image:hover .card-play{opacity:1}
.card-body{flex:1;display:flex;flex-direction:column}
.card-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.card-tags-inline{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.tag{display:inline-block;padding:.2rem .6rem;font-size:.72rem;font-weight:600;border-radius:100px;background:rgba(124,58,237,.12);color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.card-title{font-size:1.1rem;font-weight:700;line-height:1.35;margin-bottom:.5rem}
.card-title a{transition:color var(--transition)}
.card-title a:hover{color:var(--accent)}
.card-desc{font-size:.88rem;color:var(--text-2);line-height:1.6;margin-bottom:1rem;flex:1}
.card-footer{display:flex;align-items:center;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--border)}
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem;color:var(--text-2)}
.form-input,.form-textarea{width:100%;padding:.75rem 1rem;background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.92rem;transition:border-color var(--transition);font-family:var(--font)}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--accent)}
.form-textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-alert{padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem}
.form-alert.success{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.form-alert.error{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.blog-meta{display:flex;gap:1rem;font-size:.78rem;color:var(--text-3);margin-bottom:.5rem}
.read-time{display:flex;align-items:center;gap:.3rem}
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.filter-btn{padding:.4rem 1rem;border-radius:100px;font-size:.82rem;font-weight:500;color:var(--text-2);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all var(--transition)}
.filter-btn:hover,.filter-btn.active{color:var(--text);background:var(--accent);border-color:var(--accent)}
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem}
.page-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;color:var(--text-2);border:1px solid var(--border);transition:all var(--transition)}
.page-btn:hover,.page-btn.active{color:var(--text);background:var(--accent);border-color:var(--accent)}
.portfolio-grid,.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.history-grid{max-width:800px;margin:0 auto}
.history-section-title{font-size:1.4rem;font-weight:700;margin-bottom:1.5rem;color:var(--accent)}
.timeline{position:relative;padding-left:2rem;border-left:2px solid var(--border);margin-bottom:3rem}
.timeline-item{padding-bottom:2rem;position:relative}
.timeline-item::before{content:'';position:absolute;left:-2.35rem;top:.3rem;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--border)}
.timeline-item.current::before{border-color:var(--green);background:var(--green)}
.timeline-period{font-size:.78rem;color:var(--text-3);margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}
.current-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--green);font-weight:600}
.timeline-role{font-size:1.05rem;font-weight:600;margin-bottom:.15rem}
.timeline-company{font-size:.88rem;color:var(--text-2);margin-bottom:.4rem}
.timeline-desc{font-size:.85rem;color:var(--text-3);line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:start}
.contact-items{display:flex;flex-direction:column;gap:1.25rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.contact-item-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--surface);color:var(--accent);flex-shrink:0}
.contact-item-label{font-size:.78rem;color:var(--text-3);margin-bottom:.15rem}
.contact-item-value{font-size:.92rem;font-weight:500;color:var(--text);transition:color var(--transition)}
.contact-item-value:hover{color:var(--accent)}
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .form-row{grid-template-columns:1fr}
  .portfolio-grid,.blog-grid{grid-template-columns:1fr}
}
.article-hero{padding:8rem 0 3rem;background:linear-gradient(to bottom,var(--bg-2),transparent)}
.article-layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;padding:2rem 0 4rem}
.article-content{font-size:1.02rem;line-height:1.85;color:var(--text-2)}
.article-content h1,.article-content h2,.article-content h3{color:var(--text);margin-top:2rem;margin-bottom:1rem}
.article-content p{margin-bottom:1.25rem}
.article-content img{border-radius:var(--radius);margin:1.5rem 0}
.article-content pre{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;overflow-x:auto;font-size:.88rem;margin-bottom:1.5rem}
.article-content code{font-family:var(--mono);font-size:.88rem}
.article-content a{color:var(--accent);text-decoration:underline}
.sidebar-card{margin-bottom:1.5rem}
.sidebar-title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:.75rem}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
}
.section-tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.5rem}
.page-hero{padding:8rem 0 2rem;text-align:center}
.page-hero h1{font-size:clamp(2rem,6vw,4rem);font-weight:900;letter-spacing:-.03em;margin-bottom:.5rem}
.page-hero p{color:var(--text-2);font-size:1.05rem;max-width:600px;margin:0 auto}