/* style-modern.css — modern look */
:root{--bg-0:#0b0c10;--bg-1:#111218;--bg-2:#151823;--card:#151a22cc;--text:#e6e6f0;--muted:#a7a9b5;--accent:#ffd166;--accent-2:#00d1ff;--radius:24px;--shadow:0 10px 30px rgba(0,0,0,.35)}
html,body{background: radial-gradient(1200px 800px at 10% -10%, #0f1222 0%, #0b0c10 40%, #090a0f 100%) fixed;}
body{color:var(--text); -webkit-font-smoothing:antialiased}
.sidebar{background: linear-gradient(180deg, rgba(17,18,24,.8), rgba(17,18,24,.6)); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); border-radius: var(--radius)}
.article-title{display:flex; align-items:center; gap:12px}
.article-title::before{content:""; width:36px; height:6px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-2))}
.sidebar .title{background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.service-list{display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:28px}
.service-item{background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding:22px; transition:.25s; box-shadow: var(--shadow)}
.service-item:hover{transform: translateY(-4px); border-color: rgba(0,209,255,.25); box-shadow: 0 20px 40px rgba(0,0,0,.45)}
.form-btn{background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0c10; font-weight:700; border:none; border-radius:14px}
.avatar-box img{border-radius:18px; box-shadow: 0 10px 30px rgba(0,0,0,.45)}