/* Hiroo Blog — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:#0c0c14;color:#c4bfda;line-height:1.8;font-size:16px}
a{color:#34d399;text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(52,211,153,.3);color:#fff}

/* Nav */
.blog-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(12,12,20,.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0}
.blog-nav-inner{max-width:800px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.blog-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.blog-nav-logo img{height:24px}
.blog-nav-logo span{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:#34d399;letter-spacing:1px}
.blog-nav-links{display:flex;gap:16px;align-items:center}
.blog-nav-links a{font-size:13px;color:#8b85a0;font-weight:500;text-decoration:none;transition:color .2s}
.blog-nav-links a:hover{color:#fff}
.blog-nav-cta{background:linear-gradient(135deg,#34d399,#0ea5e9);color:#fff;padding:7px 18px;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;transition:opacity .2s}
.blog-nav-cta:hover{opacity:.9;text-decoration:none}

/* Article */
.blog-article{max-width:760px;margin:0 auto;padding:100px 24px 60px}
.blog-breadcrumb{font-size:13px;color:#5a5470;margin-bottom:24px}
.blog-breadcrumb a{color:#5a5470}
.blog-breadcrumb a:hover{color:#34d399}
.blog-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.blog-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(52,211,153,.1);color:#34d399;letter-spacing:.3px}
.blog-date{font-size:12px;color:#5a5470}
.blog-read{font-size:12px;color:#5a5470}
h1{font-family:'Sora',sans-serif;font-size:36px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:20px}
h2{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;color:#fff;margin:40px 0 16px;line-height:1.3}
h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;color:#e2dff0;margin:28px 0 12px}
p{margin-bottom:18px}
ul,ol{margin:0 0 18px 24px}
li{margin-bottom:8px}
strong{color:#e2dff0}
blockquote{border-left:3px solid #34d399;padding:12px 20px;margin:24px 0;background:rgba(52,211,153,.05);border-radius:0 8px 8px 0;font-style:italic;color:#9b95b0}
code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;font-size:14px;color:#34d399}
img{max-width:100%;border-radius:12px;margin:24px 0}
hr{border:none;height:1px;background:rgba(255,255,255,.08);margin:32px 0}

/* CTA Box */
.blog-cta{background:linear-gradient(135deg,rgba(52,211,153,.08),rgba(14,165,233,.08));border:1px solid rgba(52,211,153,.15);border-radius:16px;padding:32px;margin:40px 0;text-align:center}
.blog-cta h3{color:#fff;margin:0 0 8px;font-size:20px}
.blog-cta p{color:#9b95b0;margin-bottom:16px;font-size:15px}
.blog-cta a{display:inline-block;background:linear-gradient(135deg,#34d399,#0ea5e9);color:#fff;padding:12px 28px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:opacity .2s}
.blog-cta a:hover{opacity:.9;text-decoration:none}

/* Language Switcher */
.blog-langs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.blog-langs a{font-size:11px;padding:3px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.1);color:#8b85a0;text-decoration:none;transition:all .2s}
.blog-langs a:hover,.blog-langs a.active{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3);color:#34d399}

/* Footer */
.blog-footer{max-width:760px;margin:0 auto;padding:40px 24px;border-top:1px solid rgba(255,255,255,.06);text-align:center;font-size:13px;color:#3d3755}

/* Blog Listing */
.blog-list{max-width:800px;margin:0 auto;padding:100px 24px 60px}
.blog-list h1{text-align:center;margin-bottom:8px}
.blog-list-sub{text-align:center;color:#8b85a0;margin-bottom:40px;font-size:15px}
.blog-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:28px;margin-bottom:16px;transition:all .2s;cursor:pointer;text-decoration:none;display:block}
.blog-card:hover{background:rgba(255,255,255,.05);border-color:rgba(52,211,153,.15);transform:translateY(-2px);text-decoration:none}
.blog-card h2{font-size:20px;margin:0 0 8px;color:#fff}
.blog-card p{color:#8b85a0;font-size:14px;margin:0;line-height:1.6}
.blog-card-meta{display:flex;gap:10px;margin-top:12px;align-items:center}

/* Schema - hidden */
.schema-hidden{display:none}

/* Responsive */
@media(max-width:640px){
  h1{font-size:26px}
  h2{font-size:20px}
  .blog-article{padding:80px 16px 40px}
  .blog-list{padding:80px 16px 40px}
  .blog-cta{padding:24px 16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}