:root { --brand: #0078D4; --accent: #00C8A8; }
* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.hero-gradient { background: radial-gradient(1200px 600px at -10% -10%, rgba(0,120,212,.35), transparent 60%), radial-gradient(800px 400px at 110% -10%, rgba(0,200,168,.25), transparent 60%); }
.glass-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px); }
.feature-card:hover, .service-card:hover { transform: translateY(-2px); transition: .2s ease; }
.kpi { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.15); padding: 12px; border-radius: 12px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.kpi-label { font-size: 12px; color: var(--bs-secondary-color); }
.timeline { position: relative; padding-left: 22px; }
.timeline:before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.12); }
.timeline-item { position: relative; margin-bottom: 18px; }
.timeline-dot { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0,200,168,.2); }
.timeline-content { margin-left: 22px; }
.portfolio-item { position: relative; overflow: hidden; cursor: pointer; }
.portfolio-item img { width: 100%; height: 220px; object-fit: cover; display: block; }
.portfolio-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1)); color: #fff; opacity: 0; display: flex; align-items: end; padding: 14px; transition: .25s ease; }
.portfolio-item:hover .overlay { opacity: 1; }
img.ph { background: repeating-linear-gradient(45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px); height: 220px; }
#themeToggle { border-color: rgba(255,255,255,.2); }
.card { border: 1px solid rgba(255,255,255,0.08); }