@import url('shared.css');

@keyframes heroFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,15px)}}

.blog-header{padding:12rem 0 5rem;border-bottom:1px solid var(--hairline)}
.blog-meta{display:flex;align-items:center;gap:2rem;margin-top:2.5rem;flex-wrap:wrap}
.blog-meta span{font-size:0.78rem;color:var(--text-faint);letter-spacing:0.08em;text-transform:uppercase}
.blog-meta .dot{width:4px;height:4px;background:var(--text-ghost);border-radius:50%}
.blog-meta .tag{color:var(--accent);border:1px solid var(--accent-border);padding:4px 14px;border-radius:var(--radius-full);background:var(--accent-dim);font-size:0.7rem;font-weight:600;letter-spacing:0.1em}

.blog-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);margin:4rem 0;border:1px solid var(--hairline)}

.article-body{max-width:760px;margin:0 auto;padding:0 3rem}
@media (max-width:768px){.article-body{padding:0 1.5rem}}

.article-body h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:600;margin:4rem 0 1.5rem;color:var(--text);letter-spacing:-0.02em;line-height:1.2}
.article-body h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:3rem 0 1rem;color:var(--text);letter-spacing:-0.01em;line-height:1.3}
.article-body p{font-size:1.05rem;line-height:1.85;color:var(--text-dim);margin-bottom:2rem;max-width:65ch;letter-spacing:0.01em}
.article-body p strong{color:var(--text);font-weight:600}
.article-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-border);transition:border-color 0.3s ease;padding-bottom:1px}
.article-body a:hover{border-bottom-color:var(--accent)}
.article-body ul,.article-body ol{margin:2rem 0 2rem 2rem;color:var(--text-dim);line-height:1.8}
.article-body li{margin-bottom:1rem;font-size:1.02rem}
.article-body blockquote{border-left:2px solid var(--accent);padding-left:2rem;margin:3rem 0;font-style:italic;color:var(--text-dim);font-size:1.1rem;line-height:1.7;max-width:55ch}
.article-body blockquote p{color:var(--text-dim)!important;font-size:1.1rem!important;margin-bottom:0}

.faq-section{margin-top:5rem;padding-top:4rem;border-top:1px solid var(--hairline)}
.faq-item{margin-bottom:3.5rem}
.faq-item h3{font-size:1.15rem;margin-bottom:1rem;color:var(--text);font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em}
.faq-item p{font-size:0.98rem;color:var(--text-dim);line-height:1.75;max-width:60ch}

.reading-bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:10001;width:0%;box-shadow:0 0 8px rgba(46,184,214,0.3)}

.share-bar{position:sticky;top:50%;transform:translateY(-50%);float:left;margin-left:-90px;display:flex;flex-direction:column;gap:1rem}
@media (max-width:1100px){.share-bar{position:static;transform:none;float:none;margin:3rem 0;flex-direction:row;justify-content:center}}
.share-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline);background:var(--bg-card);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:0.9rem;cursor:none;transition:all 0.3s var(--ease-out-quint);text-decoration:none}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:translateY(-3px)}

.author-box{display:flex;align-items:center;gap:1.5rem;padding:2.5rem;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--bg-card);margin:5rem 0 4rem}
@media (max-width:600px){.author-box{flex-direction:column;text-align:center}}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--hairline);flex-shrink:0}
.author-box h4{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:4px;letter-spacing:-0.01em}
.author-box p{font-size:0.88rem;color:var(--text-faint);line-height:1.6;margin:0;max-width:45ch}

.related-section{margin:5rem 0;padding-top:4rem;border-top:1px solid var(--hairline)}
.related-section>h2{font-family:var(--font-display);font-size:1.3rem;margin-bottom:2rem;font-weight:600;letter-spacing:-0.02em}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media (max-width:600px){.related-grid{grid-template-columns:1fr}}
.related-card{display:block;text-decoration:none;border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:2.5rem;background:var(--bg-card);transition:all 0.4s var(--ease-out-expo)}
.related-card:hover{border-color:var(--hairline-hover);background:var(--bg-elevated);transform:translateY(-4px)}
.related-card .tag{font-size:0.62rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:block}
.related-card h4{font-family:var(--font-display);font-size:1.15rem;color:var(--text);margin-bottom:0.75rem;font-weight:500;letter-spacing:-0.01em}
.related-card p{font-size:0.88rem;color:var(--text-faint);line-height:1.6;margin:0;max-width:45ch}

.back-to-top{position:fixed;bottom:2.5rem;right:2.5rem;width:48px;height:48px;border-radius:50%;border:1px solid var(--hairline);background:var(--bg-card);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:none;opacity:0;visibility:hidden;transition:all 0.4s var(--ease-out-expo);z-index:100;text-decoration:none}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:translateY(-4px)}

.price-table{width:100%;border-collapse:collapse;margin:2.5rem 0;border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.price-table th,.price-table td{padding:1.25rem 1.5rem;text-align:left;font-size:0.9rem;border-bottom:1px solid var(--hairline)}
.price-table th{background:var(--bg-card);color:var(--text);font-family:var(--font-display);font-weight:600;font-size:0.78rem;letter-spacing:0.05em;text-transform:uppercase}
.price-table td{color:var(--text-dim);line-height:1.5}
.price-table tr:last-child td{border-bottom:none}
.price-table tr:hover td{background:rgba(255,255,255,0.015)}
.price-table .highlight{color:var(--accent);font-weight:600}