/* ==========================
   VEROS DESIGN SYSTEM
========================== */

:root{

--bg:#0a0f1a;
--bg2:#111827;

--card:rgba(255,255,255,.05);

--glass:blur(16px);

--gold:#d4a853;

--gold-dark:#b88b33;

--text:#f0f4ff;

--muted:#94a3b8;

--border:rgba(212,168,83,.18);

--danger:#ef4444;

--radius:18px;

--shadow:0 20px 60px rgba(0,0,0,.35);

--transition:.3s ease;

}

body.light{

--bg:#f7f8fb;

--bg2:#ffffff;

--card:rgba(255,255,255,.8);

--text:#0f172a;

--muted:#475569;

--shadow:0 18px 50px rgba(0,0,0,.08);

}

/* Reset */

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

html{
scroll-behavior:smooth;
}

body{

font-family:Inter,sans-serif;

background:
radial-gradient(circle at top,#14213d 0%,var(--bg) 45%,#05070d 100%);

color:var(--text);

line-height:1.7;

transition:.35s;

}

/* Container */

.container{

width:min(1180px,92%);

margin:auto;

}

/* Links */

a{

color:inherit;

text-decoration:none;

}

/* Header */

.header{

position:sticky;

top:0;

z-index:999;

background:rgba(10,15,26,.72);

backdrop-filter:blur(16px);

border-bottom:1px solid var(--border);

}

.nav{

height:78px;

display:flex;

justify-content:space-between;

align-items:center;

}

/* Logo */

.logo{

display:flex;

align-items:center;

gap:14px;

font-weight:800;

letter-spacing:3px;

color:var(--gold);

}

.logo svg{

fill:none;

stroke:var(--gold);

stroke-width:5;

}

/* Navigation */

nav{

display:flex;

gap:34px;

align-items:center;

}

nav a{

font-weight:600;

transition:var(--transition);

}

nav a:hover{

color:var(--gold);

}

/* Buttons */

.primary-btn{

display:inline-block;

padding:15px 28px;

background:var(--gold);

color:#111;

border-radius:999px;

font-weight:700;

transition:var(--transition);

box-shadow:var(--shadow);

}

.primary-btn:hover{

background:var(--gold-dark);

transform:translateY(-3px) scale(1.02);

}

.secondary-btn{

display:inline-block;

padding:15px 28px;

border:1px solid var(--border);

border-radius:999px;

margin-left:14px;

transition:var(--transition);

}

.secondary-btn:hover{

border-color:var(--gold);

color:var(--gold);

}

/* Hero */

.hero{

padding:140px 0 110px;

text-align:center;

}

.eyebrow{

display:inline-block;

padding:8px 16px;

border:1px solid var(--border);

border-radius:999px;

color:var(--gold);

margin-bottom:24px;

font-size:.85rem;

letter-spacing:2px;

}

.hero h1{

font-family:"Playfair Display",serif;

font-size:clamp(3rem,6vw,5.5rem);

line-height:1.08;

margin-bottom:24px;

background:linear-gradient(90deg,#fff,var(--gold));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

max-width:760px;

margin:auto;

font-size:1.15rem;

color:var(--muted);

}

.hero-buttons{

margin-top:42px;

}

/* Feature Cards */

.features{

padding:40px 0 110px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:28px;

}

.card{

background:var(--card);

backdrop-filter:blur(12px);

border:1px solid var(--border);

border-radius:var(--radius);

padding:34px;

transition:var(--transition);

box-shadow:var(--shadow);

}

.card:hover{

transform:translateY(-8px);

border-color:var(--gold);

}

.card h3{

font-family:"Playfair Display",serif;

color:var(--gold);

margin-bottom:14px;

}

/* CTA */

.cta{

padding:120px 0;

text-align:center;

}

.cta h2{

font-family:"Playfair Display",serif;

font-size:clamp(2rem,4vw,3.5rem);

margin-bottom:18px;

}

.cta p{

color:var(--muted);

margin-bottom:34px;

}

/* Footer */

footer{

border-top:1px solid var(--border);

padding:30px 0;

margin-top:100px;

}

footer .container{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

footer a{

margin-left:20px;

color:var(--muted);

}

footer a:hover{

color:var(--gold);

}

/* Animations */

.hero,
.card,
.cta{

animation:fadeUp .5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Mobile */

@media(max-width:900px){

nav{

display:none;

}

.hero{

padding:100px 0 80px;

}

.hero h1{

font-size:3rem;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:18px;

align-items:center;

}

.secondary-btn{

margin-left:0;

}

footer .container{

text-align:center;

justify-content:center;

}

}
/* ==========================
ARTICLE PAGE
========================== */

.progress-bar{

position:fixed;

top:0;

left:0;

width:100%;

height:3px;

background:transparent;

z-index:2000;

}

#readingProgress{

height:100%;

width:0;

background:var(--gold);

transition:width .1s linear;

}

.article-layout{

padding:80px 0;

}

.article-grid{

display:grid;

grid-template-columns:2fr 360px;

gap:48px;

align-items:start;

}

.article-content h2{

font-family:"Playfair Display",serif;

color:var(--gold);

margin:42px 0 18px;

}

.article-content p{

margin-bottom:20px;

color:var(--text);

}

.impact-box{

background:var(--card);

border:1px solid var(--border);

padding:28px;

border-radius:var(--radius);

margin-bottom:40px;

backdrop-filter:blur(12px);

}

.quote-box{

border-left:4px solid var(--gold);

padding:20px 24px;

margin:36px 0;

font-style:italic;

background:rgba(255,255,255,.03);

}

.sidebar{

position:sticky;

top:110px;

display:flex;

flex-direction:column;

gap:24px;

}

.sidebar-card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:24px;

backdrop-filter:blur(12px);

}

.sidebar-card h3{

font-family:"Playfair Display",serif;

color:var(--gold);

margin-bottom:16px;

}

.tag{

display:inline-block;

padding:8px 14px;

margin:6px 6px 0 0;

border-radius:999px;

border:1px solid var(--border);

font-size:.85rem;

}

.ad-placeholder{

margin:60px 0;

padding:50px;

text-align:center;

border:2px dashed var(--border);

border-radius:var(--radius);

color:var(--muted);

}

.urgency-banner{

background:var(--danger);

color:#fff;

padding:14px 0;

}

.urgency{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.bullish{

color:#22c55e;

font-weight:700;

}

.bearish{

color:#ef4444;

font-weight:700;

}

.neutral{

color:#f59e0b;

font-weight:700;

}

@media (max-width:960px){

.article-grid{

grid-template-columns:1fr;

}

.sidebar{

position:static;

}

}
/* ==========================
BROWSE PAGE
========================== */

.browse-hero{

padding:120px 0 60px;

text-align:center;

}

.browse-hero h1{

font-family:"Playfair Display",serif;

font-size:clamp(2.5rem,5vw,4rem);

color:var(--gold);

margin-bottom:16px;

}

.browse-hero p{

max-width:700px;

margin:auto;

color:var(--muted);

}

.grid-3{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-bottom:40px;

}

.browse-card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:30px;

backdrop-filter:blur(12px);

transition:var(--transition);

}

.browse-card:hover{

transform:translateY(-6px);

border-color:var(--gold);

}

.browse-card h2{

font-family:"Playfair Display",serif;

color:var(--gold);

margin-bottom:20px;

}

.browse-card ul{

list-style:none;

}

.browse-card li{

padding:10px 0;

border-bottom:1px solid rgba(255,255,255,.06);

}

.browse-card li:last-child{

border-bottom:none;

}

.browse-card a:hover{

color:var(--gold);

}
/* ==========================
CATEGORY HUB
========================== */

.category-hero{

padding:120px 0 60px;

text-align:center;

}

.category-feed{

padding:30px 0 100px;

}

.feed-card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:32px;

margin-bottom:28px;

backdrop-filter:blur(12px);

transition:var(--transition);

}

.feed-card:hover{

transform:translateY(-4px);

border-color:var(--gold);

}

.feed-tag{

display:inline-block;

padding:6px 12px;

border-radius:999px;

background:rgba(212,168,83,.12);

color:var(--gold);

font-size:.8rem;

font-weight:700;

margin-bottom:16px;

}

.feed-card h2{

font-family:"Playfair Display",serif;

margin-bottom:14px;

}

.feed-card h2 a:hover{

color:var(--gold);

}

.feed-meta{

display:flex;

justify-content:space-between;

margin-top:20px;

color:var(--muted);

font-size:.9rem;

}