* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --bg-color: #05070a; --card-bg: #0d1117; --text-main: #f0f3f6; --text-muted: #8b949e; --accent: #58a6ff; --border-color: rgba(255, 255, 255, 0.08); }
body { background-color: var(--bg-color); color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; line-height: 1.6; }

.film-grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; opacity: 1; }
.film-grain::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; opacity: 0.4; pointer-events: none; }

.ambient-light { position: absolute; width: 800px; height: 800px; background: radial-gradient(circle, rgba(88, 166, 255, 0.06) 0%, rgba(5, 7, 10, 0) 70%); top: 15%; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; }
.nav-links { text-align: center; padding-top: 40px; position: relative; z-index: 2; }
.nav-links a { color: var(--text-muted); text-decoration: none; margin: 0 15px; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; transition: color 0.3s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
header { height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 2; padding: 0 20px; }
header h1 { font-family: 'Cinzel', serif; font-size: clamp(2.5rem, 6vw, 5.2rem); letter-spacing: 8px; text-transform: uppercase; margin-bottom: 20px; color: #ffffff; }
header p { font-size: 1.1rem; color: var(--text-muted); letter-spacing: 2px; max-width: 650px; margin-bottom: 40px; font-weight: 300; }
.btn { display: inline-block; padding: 14px 38px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; transition: all 0.4s ease; background: transparent; }
.btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 30px rgba(88, 166, 255, 0.4); }
.container { max-width: 1200px; margin: 0 auto; padding: 100px 20px; position: relative; z-index: 2; }
.section-title { font-family: 'Cinzel', serif; font-size: 2.2rem; letter-spacing: 4px; margin-bottom: 70px; text-align: center; text-transform: uppercase; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }

.card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 0; transition: transform 0.4s ease, border-color 0.4s ease; text-decoration: none; display: block; color: inherit; }
.card:hover { transform: translateY(-6px); border-color: rgba(88, 166, 255, 0.4); }
.card-img { width: 100%; height: 220px; object-fit: cover; display: block; filter: brightness(0.85); transition: filter 0.4s ease; }
.card:hover .card-img { filter: brightness(1.0); }
.card-content { padding: 35px 35px 40px; }
.card-content span { font-family: 'Cinzel', serif; color: var(--accent); font-size: 0.9rem; letter-spacing: 2px; display: block; margin-bottom: 15px; }
.card-content h3 { font-family: 'Cinzel', serif; font-size: 1.35rem; margin-bottom: 15px; letter-spacing: 2px; }
.card-content p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

footer { text-align: center; padding: 60px 20px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.85rem; letter-spacing: 2px; position: relative; z-index: 2; }
.article-container { max-width: 800px; margin: 0 auto; padding: 80px 20px 140px 20px; position: relative; z-index: 2; }
.article-header { text-align: center; margin-bottom: 60px; }
.article-header span { font-family: 'Cinzel', serif; color: var(--accent); letter-spacing: 3px; font-size: 0.85rem; display: block; margin-bottom: 15px; }
.article-header h1 { font-family: 'Cinzel', serif; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 3px; line-height: 1.3; margin-bottom: 20px; color: #ffffff; }
.article-meta { color: var(--text-muted); font-size: 0.9rem; letter-spacing: 1px; }
.article-body h2 { font-family: 'Cinzel', serif; font-size: 1.5rem; letter-spacing: 2px; margin-top: 50px; margin-bottom: 20px; color: #ffffff; border-left: 2px solid var(--accent); padding-left: 15px; }
.article-body h3 { font-family: 'Cinzel', serif; font-size: 1.1rem; letter-spacing: 2px; margin-top: 35px; margin-bottom: 15px; color: var(--accent); }
.article-body p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 25px; }
.graph-box { background: var(--card-bg); border: 1px solid var(--border-color); padding: 30px; margin: 40px 0; border-radius: 4px; }
.graph-box h4 { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 2px; color: #ffffff; margin-bottom: 10px; text-align: center; }
.graph-box p.caption { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-top: 10px; }
.article-hero { width: 100%; height: 480px; object-fit: cover; display: block; filter: brightness(0.75); margin-bottom: 50px; }
.article-inline-img { width: 100%; height: 360px; object-fit: cover; display: block; filter: brightness(0.8); margin: 40px 0 12px; }
.img-caption { color: var(--text-muted); font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 40px; text-align: center; }

/* Colorful light theme */
:root { --bg-color:#f5f7ff; --card-bg:#ffffff; --text-main:#202c46; --text-muted:#536078; --accent:#087f83; --border-color:#dce2f0; }
body { background:radial-gradient(ellipse at 8% 5%,#d9f4ef 0,transparent 38%),radial-gradient(ellipse at 95% 25%,#e9dfff 0,transparent 40%),var(--bg-color); }
.film-grain { opacity:.14; }
.ambient-light { display:none; }
.nav-links { padding:28px 16px; display:flex; justify-content:center; flex-wrap:wrap; gap:12px 28px; background:rgba(255,255,255,.8); border-bottom:1px solid var(--border-color); }
.nav-links a { margin:0; font-weight:500; letter-spacing:1.4px; }
.nav-links a.active { color:#7047b6; }
header { height:auto; min-height:500px; padding:80px 24px 90px; background:linear-gradient(120deg,rgba(209,244,235,.7),rgba(232,223,255,.65),rgba(255,229,216,.7)); border-bottom:1px solid var(--border-color); }
header h1 { color:#24314d; letter-spacing:4px; }
header p { color:#47566c; font-weight:400; letter-spacing:.6px; }
.btn { background:#087f83; color:#fff; border-color:#087f83; border-radius:9px; font-weight:500; letter-spacing:1.5px; box-shadow:0 8px 24px #087f8322; }
.btn:hover { background:#07656a; color:#fff; box-shadow:0 10px 28px #087f8330; }
.container { padding:64px 24px 80px; }
.section-title { color:#344263; margin-bottom:36px; letter-spacing:2px; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card { border-radius:16px; overflow:hidden; border-top:5px solid #087f83; background:#fff; box-shadow:0 10px 30px #2735530c; }
.card:nth-child(2) { border-top-color:#7951b9; }
.card:nth-child(3) { border-top-color:#cd6047; }
.card:nth-child(2) .card-content span { color:#7043ad; }
.card:nth-child(3) .card-content span { color:#aa492f; }
.card:hover { border-color:#087f83; box-shadow:0 16px 36px #27355316; }
.card-img,.article-hero,.article-inline-img { filter:none; }
.card-content { padding:26px; }
.card-content span { font-size:.76rem; letter-spacing:1px; }
.card-content h3 { letter-spacing:.6px; line-height:1.5; font-size:1.2rem; }
footer { background:linear-gradient(100deg,#dcf1ed,#e9e3f7,#fae8dd); color:#48556e; padding:36px 20px; letter-spacing:.5px; }
.article-header h1,.article-body h2,.graph-box h4 { color:var(--text-main); }
.article-container { max-width:900px; padding-top:56px; }
.article-header h1 { letter-spacing:1px; }
.article-body h2 { background:linear-gradient(90deg,#e0f3ef,transparent); border-left:4px solid #087f83; padding:12px 16px; border-radius:0 8px 8px 0; letter-spacing:.6px; }
.article-body h3 { color:#7043ad; letter-spacing:.4px; }
.article-body a { color:#076d75; text-decoration-thickness:1px; text-underline-offset:3px; }
.article-hero,.article-inline-img { border-radius:14px; }
.graph-box { background:#fff; border-radius:14px; border-top:4px solid #7951b9; box-shadow:0 8px 24px #27355308; }
.graph-box svg text { fill:#536078; }
.graph-box svg line { stroke:#ccd5e4; }
.graph-box svg path[stroke="#58a6ff"] { stroke:#087f83; }
.graph-box svg path[stroke="#c5a880"] { stroke:#b35a32; }
a:focus-visible { outline:3px solid #7951b9; outline-offset:5px; }
@media(max-width:850px) { .grid-3 { grid-template-columns:1fr; max-width:600px; margin:auto; } header { min-height:420px; } .card-img { height:240px; } }
@media(max-width:480px) { header { padding:64px 20px; min-height:380px; } header h1 { font-size:2.25rem; letter-spacing:2px; } header p { font-size:1rem; } .section-title { font-size:1.7rem; } .article-header h1 { font-size:1.8rem; } .article-hero { height:250px; } .article-inline-img { height:230px; } .graph-box { padding:16px 8px; } .article-container { padding:40px 20px 70px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } .card:hover { transform:none; } }