/* ==========================================
RESET
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:#0a0a0a;
color:#f5f5f5;


font-family:'Inter',sans-serif;

overflow-x:hidden;
background:
linear-gradient(
180deg,
#080808 0%,
#111111 40%,
#0a0a0a 100%
);

}

/* ==========================================
CONTAINER
========================================== */

.container{
width:min(1100px,90%);
margin:auto;
}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4rem;

    align-items:center;
}

.hero-content{
    width:100%;
}

.hero-image{
    width:100%;
}

.hero-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:30px;

    display:block;

    border:1px solid rgba(255,255,255,0.08);
}
/* ==========================================
LINKS
========================================== */

a{
text-decoration:none;
color:inherit;
}

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

.article-hero{

    min-height:70vh;

    padding:6rem 0;

    background:
    linear-gradient(
        135deg,
        rgba(212,175,55,0.08),
        rgba(0,0,0,0.95)
    );
}

.back-link{


display:inline-flex;

align-items:center;

gap:0.5rem;

margin-bottom:2rem;

color:#d4af37;

font-weight:600;

transition:0.3s;


}

.back-link:hover{
transform:translateX(-4px);
}

.article-hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:1.05;

    margin-bottom:1.5rem;
}

.hero-text{


max-width:800px;

font-size:1.2rem;

line-height:1.9;

opacity:0.9;


}

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

.article-content{
padding:6rem 0;
}

.article-content section{


background:rgba(255,255,255,0.03);

border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(14px);

border-radius:28px;

padding:3rem;

margin-bottom:2rem;

transition:0.3s;


}

.article-content section:hover{


border-color:rgba(212,175,55,0.25);

transform:translateY(-2px);
}

.article-content h2{


font-family:'Cormorant Garamond',serif;

font-size:2.6rem;

margin-bottom:1.5rem;

color:#d4af37;


}

.article-content p{


font-size:1.05rem;

line-height:2;

opacity:0.92;

margin-bottom:1.3rem;


}

.article-content ul{


margin-left:2rem;

margin-top:1rem;

margin-bottom:1.5rem;


}

.article-content li{


margin-bottom:0.8rem;

line-height:1.8;


}

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

.article-cta{


text-align:center;


}

.article-cta h2{


color:#fff;


}

.cta-buttons{


display:flex;

justify-content:center;

gap:1rem;

margin-top:2rem;

flex-wrap:wrap;


}

.cta-btn{


display:inline-flex;

justify-content:center;
align-items:center;

padding:1rem 2rem;

border-radius:999px;

font-weight:600;

transition:0.3s;

background:#d4af37;

color:#000;


}

.cta-btn:hover{


transform:translateY(-4px);

box-shadow:
0 15px 40px rgba(212,175,55,0.25);


}

/* ==========================================
ARTICLE FOOTER
========================================== */

.article-footer{


padding:3rem 1rem;

text-align:center;

border-top:1px solid rgba(255,255,255,0.08);

opacity:0.7;


}

/* ==========================================
TABLES
========================================== */

table{


width:100%;

border-collapse:collapse;

margin-top:2rem;


}

table td,
table th{


border:1px solid rgba(255,255,255,0.1);

padding:1rem;

text-align:left;


}

/* ==========================================
ARTICLE IMAGES
========================================== */

.article-image{


width:100%;

border-radius:24px;

overflow:hidden;

margin:2rem 0;


}

.article-image img{


width:100%;

display:block;

object-fit:cover;


}

/* ==========================================
QUOTES
========================================== */

blockquote{


border-left:4px solid #d4af37;

padding-left:1.5rem;

margin:2rem 0;

font-style:italic;

opacity:0.9;


}

/* ==========================================
HIGHLIGHT BOX
========================================== */

.highlight-box{


background:
linear-gradient(
    135deg,
    rgba(212,175,55,0.08),
    rgba(212,175,55,0.02)
);

border:1px solid rgba(212,175,55,0.2);

border-radius:24px;

padding:2rem;

margin:2rem 0;


}

.highlight-box h3{


color:#d4af37;

margin-bottom:1rem;

font-size:1.5rem;


}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#111;
}

::-webkit-scrollbar-thumb{
background:#d4af37;
border-radius:20px;
}

/* ==========================================
TEXT SELECTION
========================================== */

::selection{
background:#d4af37;
color:#000;
}