/*
Theme Name: Custom Auto Theme
Author: System
Version: 1.0
*/

:root {
  --black: #0D0D0D;
  --dark: #151515;
  --dark-2: #1A1A1A;
  --dark-3: #222222;
  --dark-4: #2A2A2A;
  --white: #FFFFFF;
  --white-soft: #E0E0E0;
  --gray: #888888;
  --orange: #FF6A00;
  --orange-light: #FF8A33;
  --orange-dark: #CC5500;
  --blue: #5B8FAF;
  --blue-light: #7AADCC;
  --blue-dark: #3D6A85;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --gap: 1rem;
  --radius: 6px;
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--black); color: var(--white); font-family: var(--font-body); line-height: 1.7; overflow-x: hidden; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

/* HEADER */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(13,13,13,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,106,0,0.15); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem var(--gap); max-width: 1400px; margin: 0 auto; }
.logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--orange); text-decoration: none; letter-spacing: 3px; text-transform: uppercase; }
.logo span { color: var(--blue); }
.nav-list { display: none; list-style: none; gap: 1.5rem; }
.nav-list a { color: var(--white-soft); text-decoration: none; font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; transition: color var(--transition); position: relative; }
.nav-list a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--orange); transition: width var(--transition); }
.nav-list a:hover { color: var(--orange); }
.nav-list a:hover::after { width: 100%; }

/* BURGER */
.burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; z-index: 1001; }
.burger span { display: block; width: 28px; height: 2px; background: var(--white); transition: var(--transition); }
.mobile-nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background: var(--dark); z-index: 999; padding: 5rem 2rem; transition: right 0.4s ease; }
.mobile-nav.active { right: 0; }
.mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.mobile-nav-overlay.active { opacity: 1; pointer-events: all; }
.mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-nav a { color: var(--white); text-decoration: none; font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 3px; transition: color var(--transition); }
.mobile-nav a:hover { color: var(--orange); }

/* HERO */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 6rem var(--gap) 3rem; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('') center/cover; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, var(--black) 0%, rgba(13,13,13,0.6) 40%, rgba(13,13,13,0.2) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-tag { display: inline-block; background: var(--orange); color: var(--black); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; padding: 6px 16px; margin-bottom: 1.2rem; }
.hero h1 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-intro { font-size: 1.05rem; color: var(--white-soft); max-width: 600px; line-height: 1.8; }
.hero-author { margin-top: 1.2rem; font-size: 0.8rem; color: var(--gray); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; }

/* MAIN LAYOUT */
.main-wrap { max-width: 1400px; margin: 0 auto; padding: 3rem var(--gap); }
.content-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

/* ARTICLE BODY */
.article-body h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 2.5rem 0 1rem; padding-left: 16px; border-left: 4px solid var(--orange); line-height: 1.2; }
.article-body h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--blue-light); margin: 2rem 0 0.8rem; }
.article-body p { margin-bottom: 1.2rem; color: var(--white-soft); font-size: 1rem; }
.article-body .lead-p { font-size: 1.15rem; font-weight: 300; color: var(--white); border-left: 3px solid var(--blue); padding-left: 1.2rem; margin-bottom: 2rem; }

/* FACT RAIL */
.fact-rail { display: flex; flex-direction: column; gap: 1.5rem; }
.fact-card { background: var(--dark-2); border: 1px solid var(--dark-4); border-radius: var(--radius); padding: 1.5rem; position: relative; overflow: hidden; transition: transform var(--transition), border-color var(--transition); }
.fact-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.fact-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--orange); }
.fact-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--orange); line-height: 1; margin-bottom: 0.3rem; }
.fact-label { font-size: 0.8rem; color: var(--gray); text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-mono); }
.fact-desc { font-size: 0.9rem; color: var(--white-soft); margin-top: 0.5rem; }

/* SIDEBAR */
.sidebar { display: flex; flex-direction: column; gap: 2rem; }
.sidebar-block { background: var(--dark-2); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--dark-4); }
.sidebar-block h4 { font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; color: var(--orange); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--dark-4); }
.sidebar-link { display: block; color: var(--white-soft); text-decoration: none; padding: 0.7rem 0; border-bottom: 1px solid var(--dark-3); font-size: 0.9rem; transition: color var(--transition), padding-left var(--transition); }
.sidebar-link:hover { color: var(--orange); padding-left: 8px; }
.sidebar-link:last-child { border-bottom: none; }

/* HIGHLIGHT BOX */
.highlight-box { background: linear-gradient(135deg, var(--dark-2), var(--dark-3)); border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.5rem 1.5rem 2rem; margin: 2rem 0; position: relative; }
.highlight-box::after { content: '★'; position: absolute; top: -10px; right: 16px; font-size: 1.5rem; color: var(--orange); }
.highlight-box p { color: var(--white); margin: 0; }

/* BLOCKQUOTE */
.quote-block { background: var(--dark-2); border-radius: var(--radius); padding: 2rem; margin: 2.5rem 0; position: relative; text-align: center; }
.quote-block::before { content: '\201C'; font-family: var(--font-display); font-size: 5rem; color: var(--orange); position: absolute; top: -10px; left: 20px; line-height: 1; opacity: 0.4; }
.quote-block blockquote { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--white); line-height: 1.5; font-style: italic; }
.quote-block cite { display: block; margin-top: 1rem; font-size: 0.8rem; color: var(--gray); font-style: normal; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 2px; }

/* CARDS GRID */
.cards-section { margin: 3rem 0; }
.cards-section-title { font-family: var(--font-display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.5rem; color: var(--white); }
.cards-section-title span { color: var(--orange); }
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.card { background: var(--dark-2); border: 1px solid var(--dark-4); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-5px); border-color: var(--orange); box-shadow: 0 8px 30px rgba(255,106,0,0.1); }
.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 1.3rem; }
.card-tag { display: inline-block; background: var(--orange-dark); color: var(--white); font-size: 0.65rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 2px; padding: 3px 10px; border-radius: 3px; margin-bottom: 0.7rem; }
.card-body h3 { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 0.5rem; line-height: 1.3; }
.card-body h3 a { color: var(--white); text-decoration: none; transition: color var(--transition); }
.card-body h3 a:hover { color: var(--orange); }
.card-body p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }
.card-read { display: inline-block; margin-top: 0.8rem; color: var(--orange); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; transition: color var(--transition); }
.card-read:hover { color: var(--orange-light); }

/* IMAGE BLOCK */
.img-block { margin: 2.5rem 0; border-radius: var(--radius); overflow: hidden; position: relative; }
.img-block img { width: 100%; height: auto; display: block; }
.img-block figcaption { background: var(--dark-2); padding: 0.8rem 1.2rem; font-size: 0.8rem; color: var(--gray); font-family: var(--font-mono); }

/* STATS STRIP */
.stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--dark-4); margin: 3rem 0; border-radius: var(--radius); overflow: hidden; }
.stat-item { background: var(--dark-2); padding: 1.5rem; text-align: center; transition: background var(--transition); }
.stat-item:hover { background: var(--dark-3); }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--orange); }
.stat-label { font-size: 0.75rem; color: var(--gray); text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-mono); margin-top: 0.3rem; }

/* NEWSLETTER */
.newsletter { background: linear-gradient(135deg, var(--dark-2), rgba(91,143,175,0.1)); border: 1px solid var(--blue-dark); border-radius: var(--radius); padding: 2.5rem; margin: 3rem 0; text-align: center; position: relative; overflow: hidden; }
.newsletter::before { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,106,0,0.08) 0%, transparent 70%); border-radius: 50%; }
.newsletter h3 { font-family: var(--font-display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; }
.newsletter p { color: var(--gray); font-size: 0.9rem; margin-bottom: 1.5rem; }
.newsletter-form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 450px; margin: 0 auto; }
.newsletter-form input[type="email"] { background: var(--dark); border: 1px solid var(--dark-4); color: var(--white); padding: 14px 18px; border-radius: var(--radius); font-size: 0.95rem; font-family: var(--font-body); transition: border-color var(--transition); }
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--orange); }
.newsletter-form button { background: var(--orange); color: var(--black); border: none; padding: 14px 24px; border-radius: var(--radius); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; cursor: pointer; transition: background var(--transition), transform var(--transition); min-height: 48px; }
.newsletter-form button:hover { background: var(--orange-light); transform: scale(1.02); }

/* INLINE LIST */
.inline-list { background: var(--dark-2); border-radius: var(--radius); padding: 1.5rem 2rem; margin: 2rem 0; }
.inline-list h4 { font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--orange); margin-bottom: 1rem; }
.inline-list ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.inline-list li { padding-left: 1.5rem; position: relative; color: var(--white-soft); font-size: 0.95rem; }
.inline-list li::before { content: '▸'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* TAG STRIP */
.tag-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.tag { display: inline-block; background: var(--dark-3); color: var(--gray); font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 2px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--dark-4); transition: all var(--transition); }
.tag:hover { border-color: var(--orange); color: var(--orange); }

/* CATEGORY HEADER */
.category-header { padding: 8rem var(--gap) 3rem; background: linear-gradient(135deg, var(--dark), var(--dark-2)); border-bottom: 3px solid var(--orange); }
.category-header h1 { font-family: var(--font-display); font-size: 2.2rem; text-transform: uppercase; letter-spacing: 3px; }
.category-header .subtitle { color: var(--gray); font-size: 1rem; margin-top: 0.5rem; }

/* LEGAL PAGES */
.legal-page { padding: 8rem var(--gap) 4rem; max-width: 860px; margin: 0 auto; }
.legal-page h1 { font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 3px solid var(--orange); }
.legal-page h2 { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; color: var(--blue-light); margin: 2rem 0 0.8rem; letter-spacing: 1px; }
.legal-page p { color: var(--white-soft); margin-bottom: 1rem; font-size: 0.95rem; }
.legal-page .legal-date { color: var(--gray); font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 2rem; }

/* SUCCESS PAGE */
.success-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 2rem; }
.success-box { max-width: 500px; }
.success-icon { font-size: 4rem; margin-bottom: 1.5rem; }
.success-box h1 { font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem; }
.success-box p { color: var(--gray); margin-bottom: 2rem; }
.btn-home { display: inline-block; background: var(--orange); color: var(--black); padding: 14px 32px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-decoration: none; font-size: 0.9rem; transition: background var(--transition); min-height: 48px; }
.btn-home:hover { background: var(--orange-light); }

/* 404 PAGE */
.error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 2rem; }
.error-box h1 { font-family: var(--font-display); font-size: 8rem; font-weight: 700; color: var(--orange); line-height: 1; }
.error-box h2 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 3px; margin: 1rem 0; }
.error-box p { color: var(--gray); margin-bottom: 2rem; }
.error-links { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
.error-links a { color: var(--orange); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; transition: color var(--transition); }
.error-links a:hover { color: var(--orange-light); }

/* FOOTER */
.site-footer { background: var(--dark); border-top: 1px solid var(--dark-4); padding: 3rem var(--gap) 2rem; }
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-top { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--dark-4); }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--orange); letter-spacing: 3px; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { color: var(--gray); text-decoration: none; font-size: 0.8rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; transition: color var(--transition); }
.footer-links a:hover { color: var(--orange); }
.footer-disclaimer { font-size: 0.75rem; color: var(--gray); line-height: 1.8; margin-top: 1rem; }
.footer-copy { font-size: 0.75rem; color: var(--gray); margin-top: 1rem; font-family: var(--font-mono); }

/* COOKIES BANNER */
.cookie-banner-toggle { display: none; }
.cookie-banner { position: fixed; bottom: 0; right: 0; width: 100%; max-width: 420px; background: var(--dark-2); border: 1px solid var(--dark-4); border-radius: var(--radius) var(--radius) 0 0; padding: 1.5rem; z-index: 2000; box-shadow: 0 -4px 30px rgba(0,0,0,0.5); transition: transform 0.4s ease, opacity 0.4s ease; }
.cookie-banner-toggle:checked ~ .cookie-banner { transform: translateY(120%); opacity: 0; pointer-events: none; }
.cookie-banner p { font-size: 0.85rem; color: var(--white-soft); margin-bottom: 1rem; line-height: 1.6; }
.cookie-banner a { color: var(--blue-light); }
.cookie-actions { display: flex; gap: 0.6rem; }
.cookie-accept { flex: 1; background: var(--orange); color: var(--black); border: none; padding: 10px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; min-height: 44px; }
.cookie-decline { flex: 1; background: var(--dark-4); color: var(--gray); border: none; padding: 10px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; min-height: 44px; }

/* DIVIDERS */
.section-divider { height: 3px; background: linear-gradient(90deg, var(--orange), var(--blue), transparent); margin: 3rem 0; border: none; border-radius: 2px; }

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.animate-in { animation: fadeInUp 0.8s ease forwards; }
.animate-left { animation: slideInLeft 0.6s ease forwards; }

/* RESPONSIVE */
@media (min-width: 600px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(4, 1fr); }
  .newsletter-form { flex-direction: row; }
  .hero h1 { font-size: 3rem; }
  .error-links { flex-direction: row; }
}

@media (min-width: 900px) {
  :root { --gap: 2rem; }
  .nav-list { display: flex; }
  .burger { display: none; }
  .mobile-nav, .mobile-nav-overlay { display: none; }
  .hero h1 { font-size: 3.8rem; }
  .hero { padding: 8rem var(--gap) 4rem; }
  .content-grid { grid-template-columns: 1fr 280px; }
  .content-grid.with-rail { grid-template-columns: 180px 1fr 280px; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .cookie-banner { bottom: 20px; right: 20px; border-radius: var(--radius); }
}

@media (min-width: 1200px) {
  .hero h1 { font-size: 4.5rem; }
  .content-grid.with-rail { grid-template-columns: 200px 1fr 300px; }
}