@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

:root { font-family:'Raleway',sans-serif; color:#f8fafc; background:#020617; font-synthesis:none; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#020617; color:#f8fafc; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.header-inner { max-width:1024px; height:64px; margin:auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; }
.logo { height:32px; width:auto; object-fit:contain; }
.socials { display:flex; gap:16px; align-items:center; }
.socials a { color:#94a3b8; transition:color .2s; display:flex; align-items:center; }
.socials a:hover { color:#fff; }
.socials svg { width:18px; height:18px; }
main { max-width:1024px; width:100%; margin:auto; padding:64px 16px; }
.hero { text-align:center; margin-bottom:64px; }
.hero-logo { height:64px; max-width:220px; width:auto; object-fit:contain; margin-bottom:20px; }
h1 { font-size:clamp(30px,5vw,48px); line-height:1.1; margin:0; letter-spacing:-.03em; }
.filters { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-bottom:24px; margin-bottom:40px; border-bottom:1px solid rgba(255,255,255,.05); }
.search-wrap { position:relative; width:256px; }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#64748b; }
#search { width:100%; padding:8px 12px 8px 36px; border:1px solid rgba(255,255,255,.1); border-radius:4px; background:#020617; color:#fff; outline:none; font-size:12px; }
#search:focus { border-color:rgba(255,255,255,.25); }
#search::placeholder { color:#64748b; }
.languages { display:flex; align-items:center; gap:8px; }
.languages-label { color:#64748b; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-right:8px; }
.lang-btn { border:0; border-radius:4px; padding:5px 10px; background:rgba(255,255,255,.05); color:#94a3b8; font-size:12px; transition:.2s; }
.lang-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.lang-btn.active { background:#fff; color:#000; font-weight:700; }
.articles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.article-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(2,6,23,.4); transition:.25s; }
.article-card:hover { border-color:rgba(255,255,255,.1); background:rgba(2,6,23,.65); transform:translateY(-2px); }
.article-image { width:100%; aspect-ratio:16/9; object-fit:cover; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,.05); transition:transform .3s; }
.article-card:hover .article-image { transform:scale(1.02); }
.article-image-placeholder { padding:32px; background:linear-gradient(135deg,#0f172a,#1e293b); color:#cbd5e1; font-size:18px; line-height:1.35; font-weight:600; text-align:center; }
.article-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.article-meta-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.platform { display:flex; align-items:center; gap:8px; color:#94a3b8; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; }
.badge-fr { background:rgba(59,130,246,.1); color:#93c5fd; border:1px solid rgba(59,130,246,.15); }
.badge-en { background:rgba(16,185,129,.1); color:#6ee7b7; border:1px solid rgba(16,185,129,.15); }
.share { border:0; background:transparent; color:#64748b; padding:6px; border-radius:4px; }
.share:hover { color:#fff; background:rgba(255,255,255,.05); }
.article-card h2 { color:#fff; font-size:18px; line-height:1.35; margin:0 0 8px; letter-spacing:-.02em; }
.author-date { display:flex; flex-wrap:wrap; gap:16px; color:#64748b; font-size:12px; margin-bottom:16px; }
.article-description { color:rgba(148,163,184,.9); font-size:14px; line-height:1.7; margin:0 0 24px; }
.read-link { margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.05); width:100%; }
.read-link a,.project-link { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; border-radius:4px; background:#fff; color:#000; font-size:12px; font-weight:700; transition:.2s; }
.read-link a:hover,.project-link:hover { background:#e2e8f0; }
.coming-soon { width:100%; border:1px solid rgba(255,255,255,.08); border-radius:4px; padding:10px; background:rgba(255,255,255,.035); color:#64748b; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:600; cursor:not-allowed; }
.coming-soon svg { flex-shrink:0; }
.empty { text-align:center; padding:48px 16px; background:rgba(2,6,23,.2); border:1px solid rgba(255,255,255,.05); border-radius:6px; color:#64748b; }
.empty p { font-size:12px; margin:0 0 12px; }
.reset { border:0; border-radius:4px; padding:6px 10px; background:rgba(255,255,255,.1); color:#fff; font-size:12px; font-weight:700; }
.reset:hover { background:rgba(255,255,255,.2); }
.projects { border-top:1px solid rgba(255,255,255,.05); padding-top:64px; margin-top:80px; }
.section-title { display:flex; align-items:center; gap:8px; margin-bottom:32px; }
.section-title h2 { font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0; }
#project { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.project-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; min-width:0; padding:24px; border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(2,6,23,.4); transition:.25s; }
.project-card:hover { border-color:rgba(255,255,255,.1); background:rgba(2,6,23,.65); transform:translateY(-2px); }
.project-card::after { content:''; position:absolute; width:192px; height:192px; right:-48px; top:-48px; border-radius:50%; background:rgba(59,130,246,.1); filter:blur(48px); pointer-events:none; }
.project-content { position:relative; z-index:1; flex:1; }
.project-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:4px; background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2); color:#93c5fd; font-size:12px; font-weight:700; margin-bottom:16px; }
.project-card h3 { font-size:22px; margin:0 0 4px; }
.project-card .tagline { color:#cbd5e1; font-size:14px; font-weight:700; margin:0 0 16px; }
.project-card .description { color:rgba(148,163,184,.9); font-size:14px; line-height:1.7; margin:0; }
.project-action { position:relative; z-index:1; width:100%; }
footer { border-top:1px solid rgba(255,255,255,.05); color:#64748b; font-size:11px; text-align:center; padding:24px 16px; }
@media (max-width:700px) { .articles-grid,#project{grid-template-columns:1fr;} .filters{align-items:stretch;} .search-wrap{width:100%;} .languages{justify-content:flex-end;} }
@media (min-width:768px) { .project-card{padding:32px;} .project-link{white-space:nowrap;padding:12px 24px;} }