/* =====================================================
   SARED ARTICLE — PREMIUM 2026
===================================================== */

:root{
--bg-main:#050816;
--bg-soft:#0B1222;
--card-bg:rgba(255,255,255,0.04);
--border-soft:rgba(255,255,255,0.08);
--text-main:#FFFFFF;
--text-muted:#9CA3AF;
--primary:#7C5CFF;
--primary-2:#5A3DFF;
}

/* ===============================
   GLOBAL
================================ */

body{
background:var(--bg-main);
color:var(--text-main);
}

.container{
width:min(1100px,calc(100% - 40px));
margin:auto;
}

img{
max-width:100%;
height:auto;
display:block;
}

/* ===============================
   PROGRESS BAR
================================ */

#reading-progress{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
z-index:9999;
background:linear-gradient(90deg,var(--primary),#a78bfa,var(--primary-2));
box-shadow:0 0 18px rgba(124,92,255,0.45);
}

/* ===============================
   HERO
================================ */

.article-hero{
padding:140px 0 70px;
background:
radial-gradient(circle at 20% 30%, rgba(124,92,255,0.18), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(91,33,182,0.12), transparent 60%),
var(--bg-main);
}

.article-hero h1{
font-size:clamp(2.4rem,5vw,3.6rem);
font-weight:800;
line-height:1.15;
margin:0 0 16px;
}

.authority-intro{
margin:0 0 18px;
color:rgba(255,255,255,0.75);
font-size:16px;
line-height:1.7;
max-width:900px;
border-left:3px solid rgba(124,92,255,0.65);
padding-left:14px;
}

.article-meta{
display:flex;
gap:14px;
flex-wrap:wrap;
font-size:14px;
color:rgba(255,255,255,0.65);
}

.article-meta .dot{
opacity:.55;
}

/* ===============================
   BREADCRUMB
================================ */

.breadcrumb{
font-size:14px;
margin-bottom:18px;
color:rgba(255,255,255,0.55);
}

.breadcrumb a{
color:var(--primary);
text-decoration:none;
}

.breadcrumb a:hover{
color:#fff;
}

/* ===============================
   STRUCTURE
================================ */

.article-content-section{
padding:80px 0 120px;
}

.article-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:40px;
align-items:start;
}

.article-main{
min-width:0;
}

/* ===============================
   TOC
================================ */

.toc-sticky{
position:sticky;
top:110px;
}

.table-of-contents{
background:var(--card-bg);
border:1px solid var(--border-soft);
padding:28px;
border-radius:22px;
margin-bottom:18px;
}

.table-of-contents h2{
font-size:20px;
margin-bottom:16px;
}

.table-of-contents ul{
list-style:none;
padding:0;
margin:0;
}

.table-of-contents li{
margin:10px 0;
}

.table-of-contents a{
color:rgba(255,255,255,0.82);
text-decoration:none;
transition:.2s;
}

.table-of-contents a:hover{
color:#fff;
}

.toc-h2 a{
font-weight:700;
}

.toc-h3{
padding-left:14px;
}

.toc-h3 a{
font-size:14px;
color:rgba(255,255,255,0.7);
}

/* ===============================
   SIDE CTA
================================ */

.toc-side-cta{
background:linear-gradient(135deg, rgba(124,92,255,0.12), rgba(90,61,255,0.08));
border:1px solid rgba(124,92,255,0.25);
border-radius:22px;
padding:20px;
}

.toc-side-cta-title{
font-weight:800;
font-size:16px;
margin-bottom:6px;
}

.toc-side-cta-sub{
font-size:13px;
color:rgba(255,255,255,0.7);
margin-bottom:14px;
}

.toc-side-cta-btn{
display:block;
text-align:center;
padding:12px;
border-radius:999px;
font-weight:800;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
box-shadow:0 16px 40px rgba(124,92,255,0.35);
}

/* ===============================
   IMAGE RESPONSIVE
================================ */

.article-image-wrapper{
width:100%;
margin:0 0 50px;
overflow:hidden;
border-radius:24px;
}

.article-image-wrapper img{
width:100%;
max-width:100%;
height:auto;
object-fit:cover;
border-radius:24px;
box-shadow:0 40px 90px rgba(0,0,0,0.6);
}

/* ===============================
   ARTICLE CONTENT
================================ */

.blog-article-content{
font-size:18px;
line-height:1.8;
color:#D1D5DB;
}

.blog-article-content p{
margin-bottom:24px;
}

.blog-article-content strong{
color:#fff;
}

.blog-article-content h2{
font-size:30px;
margin:60px 0 20px;
font-weight:900;
scroll-margin-top:120px;
}

.blog-article-content h3{
font-size:22px;
margin:35px 0 16px;
font-weight:800;
scroll-margin-top:120px;
}

.blog-article-content ul{
margin:25px 0;
padding-left:0;
list-style:none;
}

.blog-article-content li{
margin-bottom:14px;
padding-left:24px;
position:relative;
}

.blog-article-content li::before{
content:"";
position:absolute;
left:0;
top:10px;
width:8px;
height:8px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
}

/* ===============================
   AUTO LINK
================================ */

.auto-link{
color:var(--primary);
font-weight:700;
text-decoration:underline;
}

/* ===============================
   CTA
================================ */

.blog-cta{
margin:100px 0;
padding:60px 40px;
border-radius:28px;
text-align:center;
background:linear-gradient(135deg,#1e1b4b,#2a1f6f);
border:1px solid rgba(124,92,255,0.3);
}

.blog-cta h3{
font-size:28px;
margin-bottom:14px;
}

.blog-cta p{
color:rgba(255,255,255,0.75);
margin-bottom:20px;
}

.blog-cta a{
display:inline-block;
padding:15px 40px;
border-radius:40px;
font-weight:800;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
color:#fff;
text-decoration:none;
box-shadow:0 20px 50px rgba(124,92,255,0.5);
}

/* ===============================
   RELATED
================================ */

.related-articles{
margin-top:100px;
}

.related-articles h3{
font-size:22px;
margin-bottom:20px;
}

.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
}

.related-card{
padding:20px;
border-radius:18px;
background:var(--card-bg);
border:1px solid var(--border-soft);
text-decoration:none;
color:#fff;
font-weight:700;
transition:.25s;
}

.related-card:hover{
border-color:var(--primary);
transform:translateY(-4px);
}

/* ===============================
   REVEAL
================================ */

.reveal{
opacity:0;
transform:translateY(12px);
transition:all .6s ease;
}

.reveal.is-visible{
opacity:1;
transform:translateY(0);
}

/* ===============================
   MOBILE CTA
================================ */

.mobile-sticky-cta{
position:fixed;
left:16px;
right:16px;
bottom:14px;
display:none;
z-index:9998;
padding-bottom:env(safe-area-inset-bottom);
}

.mobile-sticky-cta a{
display:block;
text-align:center;
padding:14px;
border-radius:999px;
font-weight:900;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
box-shadow:0 18px 55px rgba(124,92,255,0.45);
}

/* ===============================
   RESPONSIVE
================================ */

@media(max-width:1100px){

.article-layout{
grid-template-columns:1fr;
}

.toc-sticky{
position:relative;
top:auto;
}

}

@media(max-width:900px){

.article-hero{
padding:110px 0 50px;
}

.blog-article-content{
font-size:16px;
}

.blog-article-content h2{
font-size:24px;
}

.blog-cta{
padding:40px 25px;
}

.mobile-sticky-cta{
display:block;
}

}

@media(max-width:600px){

.article-hero h1{
font-size:26px;
}

.article-image-wrapper{
margin-bottom:30px;
}

.article-image-wrapper img{
border-radius:16px;
}

}