* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:#0f172a; color:#e5e7eb;}
.topbar {background:#020617; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:10;}
.logo-block {min-width:220px;}
.logo {font-weight:800; letter-spacing:0.08em; font-size:16px;}
.tagline {font-size:11px; opacity:.8;}
.nav {display:flex; gap:10px; flex:1; justify-content:center; flex-wrap:wrap;}
.nav a {color:#e5e7eb; text-decoration:none; font-size:13px; padding:6px 10px; border-radius:999px;}
.nav a.active, .nav a:hover {background:#f97316; color:#111827;}
.lang-switch {display:flex; gap:4px;}
.lang-switch button {border-radius:999px; border:1px solid #64748b; background:transparent; color:#e5e7eb; font-size:12px; padding:4px 10px; cursor:pointer;}
.lang-switch button.active {background:#f97316; border-color:#f97316; color:#111827;}

.layout {max-width:1120px; margin:24px auto; display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:20px; padding:0 16px 32px;}
.hero {background:#020617; border-radius:20px; overflow:hidden; box-shadow:0 20px 40px rgba(15,23,42,.7);}
.hero-img {width:100%; display:block; max-height:260px; object-fit:cover;}
.hero-text {padding:18px 20px 20px;}
h1 {font-size:22px; margin:6px 0 10px;}
h2 {font-size:18px; margin:18px 0 8px; color:#facc15;}
p {font-size:14px; line-height:1.7; margin:0 0 10px;}
.meta {font-size:12px; color:#9ca3af;}
.meta-note {font-size:12px; color:#fbbf24;}
.quote {background:#1e293b; padding:10px 14px; border-left:4px solid #fb7185; margin:10px 0; color:#f9fafb;}
ul {padding-left:20px;}
ul li {margin:4px 0;}
.lang-block.hidden {display:none;}

.cta-row {margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.btn-primary {display:inline-block; padding:8px 16px; border-radius:999px; background:linear-gradient(135deg,#f97316,#fb7185); color:#111827; font-weight:600; font-size:14px; text-decoration:none;}
.btn-primary:hover {opacity:.95;}
.hint {font-size:11px; color:#9ca3af;}

.sidebar {background:#020617; border-radius:20px; padding:14px 14px 16px; box-shadow:0 20px 40px rgba(15,23,42,.7);}
.side-title {font-size:15px; margin:0 0 10px;}
.card-list {display:flex; flex-direction:column; gap:10px;}
.card {background:#020617; border-radius:14px; padding:10px 10px 12px; border:1px solid rgba(148,163,184,.4);}
.card h3 {font-size:14px; margin:4px 0 6px;}
.card p {font-size:12px; color:#cbd5f5;}
.tag {display:inline-block; font-size:10px; padding:3px 8px; border-radius:999px; margin-bottom:4px;}
.tag-ent {background:rgba(244,114,182,.2); color:#f9a8d4;}
.tag-life {background:rgba(52,211,153,.15); color:#6ee7b7;}
.tag-digital {background:rgba(59,130,246,.18); color:#93c5fd;}
.tag-night {background:rgba(250,204,21,.18); color:#fde68a;}

.footer {text-align:center; font-size:11px; color:#9ca3af; padding:10px 0 24px;}
.footer-small {margin-top:4px; font-size:10px; opacity:.9;}

@media (max-width: 900px) {{
  .layout {{grid-template-columns:minmax(0,1fr);}}
  .sidebar {{order:-1;}}
}}