:root{
  --ink:#100E0D;
  --ink-2:#1a1613;
  --ink-3:#221c18;
  --paper:#F3EEE2;
  --paper-dim:#B9B1A0;
  --red:#E31E2B;
  --red-soft: rgba(227,30,43,.5);
  --deep:#5C0E1A;
  --gold:#F0B429;
  --green:#3FA66B;
  --line: rgba(243,238,226,0.12);
  --maxw: 1180px;
  --radius: 22px;
  --serif: 'Fraunces', serif;
  --display: 'Anton', sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-weight:500; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:3000; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; margin:0;}
em{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold);}
a{color:inherit;} img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative;}
::selection{background:var(--red); color:var(--paper);}
button{font-family:inherit;}

/* ---------- constant animated background ---------- */
#bg-fixed{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:var(--ink);
}
#bg-fixed .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.32; mix-blend-mode:screen; will-change:transform;}
#bg-fixed .b1{width:54vw; height:54vw; background:var(--red); top:-18%; left:-12%; animation:drift1 26s ease-in-out infinite alternate;}
#bg-fixed .b2{width:46vw; height:46vw; background:var(--gold); bottom:-18%; right:-10%; animation:drift2 32s ease-in-out infinite alternate;}
#bg-fixed .b3{width:42vw; height:42vw; background:var(--deep); top:38%; left:52%; animation:drift3 38s ease-in-out infinite alternate;}
@keyframes drift1{from{transform:translate(0,0) scale(1);}to{transform:translate(9vw,11vh) scale(1.18);}}
@keyframes drift2{from{transform:translate(0,0) scale(1);}to{transform:translate(-11vw,-7vh) scale(1.12);}}
@keyframes drift3{from{transform:translate(0,0) scale(1);}to{transform:translate(-7vw,9vh) scale(1.22);}}

/* everything else sits above the fixed background */
.nav, header, section, footer, .marquee-band{position:relative; z-index:1;}

/* progress bar */
#progress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--red); z-index:4000; transition:width .05s linear;}

/* NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:rgba(16,14,13,.55);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(243,238,226,.06);
  transition:transform .35s ease;
}
.nav.hide{transform:translateY(-100%);}
.nav .mark{display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:21px;}
.nav .mark .dot{width:9px;height:9px;border-radius:50%; background:var(--red); animation:pulseDot 2.4s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(227,30,43,.55);}70%{box-shadow:0 0 0 10px rgba(227,30,43,0);}100%{box-shadow:0 0 0 0 rgba(227,30,43,0);}}
.nav a.cta{
  background:var(--red); color:var(--paper); text-decoration:none;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.nav a.cta:hover{background:#ff3b46; transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(227,30,43,.6);}

/* ---------- pinned / sticky 100vh scrollytelling blocks ---------- */
.pin-wrap{position:relative; height:190vh;}
.pin-stage{
  position:sticky; top:0;
  height:100vh; height:100svh; min-height:560px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.section-body{padding:64px 0 120px;}
@media(max-width:640px){
  .pin-wrap{height:150vh;}
  .pin-stage{height:100vh;}
}

/* word-by-word reveal spans (populated by JS) */
.split .word{display:inline-block; overflow:hidden; vertical-align:top;}
.split .word span{display:inline-block; will-change:transform, opacity;}

/* HERO */
.hero.pin-wrap{height:220vh;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(227,30,43,.28), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(92,14,26,.36), transparent 55%);
}
.hero .pin-stage{padding:0;}
.glow{position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(480px circle at var(--mx,50%) var(--my,30%), rgba(240,180,41,.16), transparent 60%); transition:background .25s ease;}
.hero .wrap{position:relative; z-index:2;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(240,180,41,.4); padding:7px 14px; border-radius:999px;
}
.eyebrow::before{content:""; width:7px; height:7px; background:var(--gold); border-radius:50%;}
.hero h1{font-size:clamp(58px,14vw,168px); line-height:.85; color:var(--paper); margin-top:18px; display:flex; flex-wrap:wrap; gap:0 20px;}
.hero h1 .red{color:var(--red); -webkit-text-stroke:2px var(--paper);}
.hero .tag{font-family:var(--display); font-size:clamp(20px,3.6vw,34px); color:var(--paper); margin-top:8px;}
.hero p.lede{max-width:600px; margin-top:22px; font-size:17px; color:var(--paper-dim);}
.hero .btnrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:999px;
  font-weight:700; letter-spacing:.02em; text-decoration:none; font-size:15px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn.primary{background:var(--red); color:var(--paper);}
.btn.primary:hover{transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(227,30,43,.7);}
.btn.ghost{background:transparent; color:var(--paper); border:1.5px solid rgba(243,238,226,.4);}
.btn.ghost:hover{border-color:var(--paper); transform:translateY(-3px);}
.scroll-cue{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); display:flex; flex-direction:column; align-items:center; gap:8px;}
.scroll-cue i{width:1px; height:36px; background:linear-gradient(var(--paper-dim), transparent); display:block; animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%{opacity:.2; transform:scaleY(.4);}50%{opacity:1; transform:scaleY(1);}100%{opacity:.2; transform:scaleY(.4);}}

/* MARQUEE */
.marquee-band{
  background:var(--paper); color:var(--ink);
  transform:rotate(-1.6deg); margin:0 -40px 0; overflow:hidden;
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
}
.marquee-track{display:flex; white-space:nowrap; animation:scrollLeft 22s linear infinite;}
.marquee-track span{
  font-family:var(--display); font-size:clamp(22px,4.4vw,42px); padding:14px 28px;
  display:inline-flex; align-items:center; gap:26px; text-transform:uppercase;
}
.marquee-track span::after{content:"\2605"; color:var(--red); font-size:.5em;}
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-band:hover .marquee-track{animation-play-state:paused;}

/* generic kicker / section-title used inside pin-stage and plain sections */
.kicker{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
h2.section-title{font-size:clamp(30px,5.6vw,64px); max-width:820px; overflow:hidden;}
.section-sub{color:var(--paper-dim); max-width:600px; margin-top:16px; font-size:16px;}

section#aktuellt, section#faq{padding:120px 0;}
@media(max-width:640px){section#aktuellt, section#faq{padding:80px 0;}}

/* TLDR */
#tldr .inner{position:relative; margin-top:16px;}
.spine{position:absolute; left:11px; top:0; bottom:0; width:2px; background:var(--line); z-index:0;}
.spine i{position:absolute; left:0; top:0; width:100%; height:100%; background:var(--red); transform-origin:top; transform:scaleY(0); display:block;}
.tldr-list{list-style:none; margin:0; padding:0 0 0 36px; display:grid; grid-template-columns:1fr; gap:0; position:relative; z-index:1;}
@media(min-width:820px){.tldr-list{grid-template-columns:1fr 1fr; column-gap:48px;}}
.tldr-item{padding:22px 0; border-bottom:1px solid var(--line); position:relative;}
.tldr-item::before{
  content:""; position:absolute; left:-36px; top:28px; width:9px; height:9px; border-radius:50%;
  background:var(--ink-2); border:2px solid var(--paper-dim);
}
.tldr-item.done::before{background:var(--red); border-color:var(--red);}
.tldr-item .num{font-family:var(--display); font-size:13px; color:var(--red); letter-spacing:.08em;}
.tldr-item h3{font-family:var(--body); font-weight:800; font-size:18px; text-transform:none; letter-spacing:0; margin-top:6px;}
.tldr-item p{font-size:14.5px; color:var(--paper-dim); margin-top:6px;}

/* MYTH */
.myth-grid{display:grid; grid-template-columns:1fr; gap:24px; margin-top:16px;}
@media(min-width:900px){.myth-grid{grid-template-columns:1fr 1fr;}}
.myth-card{background:rgba(26,22,19,.9); border:1px solid var(--line); border-radius:24px; overflow:hidden; backdrop-filter:blur(6px);}
.myth-claim{padding:26px 28px 22px; background:linear-gradient(135deg, rgba(227,30,43,.16), rgba(227,30,43,.02)); border-bottom:1px dashed var(--line);}
.myth-claim .lbl{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#ff8f96;}
.myth-claim .lbl .x{width:20px;height:20px;border-radius:50%;background:rgba(227,30,43,.2); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--red); font-weight:800; flex:none;}
.myth-claim p{margin:14px 0 0; font-size:18px; font-weight:700; font-style:italic; color:var(--paper); line-height:1.4;}
.myth-fact{padding:24px 28px 28px;}
.myth-fact .lbl{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green);}
.myth-fact .lbl .ck{width:20px;height:20px;border-radius:50%;background:rgba(63,166,107,.18); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--green); font-weight:800; flex:none;}
.myth-fact p{margin:14px 0 0; font-size:15px; color:var(--paper-dim);}
.myth-fact p + p{margin-top:12px;}
.myth-sources{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px;}
.myth-sources a{font-size:12px; font-weight:700; text-decoration:none; color:var(--paper-dim); border:1px solid var(--line); border-radius:999px; padding:7px 12px; transition:border-color .2s ease, color .2s ease;}
.myth-sources a:hover{border-color:var(--gold); color:var(--gold);}

/* NEWS */
.news-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.live-pill{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); border:1px solid var(--line); padding:8px 14px; border-radius:999px;}
.live-pill .dot{width:8px;height:8px;border-radius:50%; background:var(--red); animation:pulseDot 2.4s infinite;}
.live-pill.err .dot{background:var(--paper-dim); animation:none;}
.news-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:36px;}
.news-card{display:block; text-decoration:none; color:inherit; background:rgba(26,22,19,.9); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .3s ease, border-color .3s ease; opacity:0;}
.news-card.in{opacity:1;}
.news-card:hover{transform:translateY(-6px); border-color:rgba(240,180,41,.5);}
.news-date{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px;}
.news-card h3{font-family:var(--body); font-weight:800; font-size:17px; text-transform:none; margin-top:10px; letter-spacing:0;}
.news-card p{font-size:14px; color:var(--paper-dim); margin-top:8px;}
.news-card .go{font-size:13px; font-weight:700; margin-top:16px; display:inline-block; color:var(--paper);}
.news-foot-link{margin-top:28px; display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; border-bottom:2px solid var(--red); padding-bottom:2px;}
.news-skel{background:rgba(26,22,19,.9); border:1px solid var(--line); border-radius:var(--radius); padding:24px; height:170px; position:relative; overflow:hidden;}
.news-skel::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(243,238,226,.06) 50%, transparent 70%); animation:shimmer 1.4s infinite;}
@keyframes shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}

/* FAQ */
.faq-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:44px;}
.faq-tab{
  background:rgba(26,22,19,.9); border:1px solid var(--line); color:var(--paper-dim);
  padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:all .25s ease;
}
.faq-tab.active{background:var(--red); border-color:var(--red); color:var(--paper);}
.faq-tab:hover:not(.active){border-color:var(--gold); color:var(--gold);}
.faq-panels{margin-top:28px;}
.faq-panel{display:none;}
.faq-panel.active{display:block;}
.faq-list{display:grid; gap:12px;}
.faq-item{background:rgba(26,22,19,.9); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.faq-q{width:100%; text-align:left; background:none; border:none; color:var(--paper); font-weight:700; font-size:16.5px; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.faq-q .plus{flex:none; width:26px; height:26px; position:relative; border:1.5px solid var(--paper-dim); border-radius:50%; transition:transform .3s ease, background .3s ease, border-color .3s ease;}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--paper); transition:transform .3s ease;}
.faq-q .plus::before{top:50%; left:7px; right:7px; height:2px; transform:translateY(-1px);}
.faq-q .plus::after{left:50%; top:7px; bottom:7px; width:2px; transform:translateX(-1px);}
.faq-item.open .plus{background:var(--red); border-color:var(--red);}
.faq-item.open .plus::after{transform:translateX(-1px) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{padding:0 22px 22px; margin:0; color:var(--paper-dim); max-width:700px; font-size:15px;}

/* MARKET TICKER + POLLS */
#marknad{padding:100px 0;}
.ticker-outer{
  background:rgba(26,22,19,.9); border:1px solid var(--line); border-radius:999px;
  overflow:hidden; margin-top:40px; padding:16px 0;
}
.ticker-track{display:flex; white-space:nowrap; animation:tickScroll 34s linear infinite; width:max-content;}
.ticker-outer:hover .ticker-track{animation-play-state:paused;}
.tick{
  font-family:'Fraunces', serif; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:baseline; gap:8px; padding:0 26px; border-right:1px solid var(--line);
  font-size:15px; color:var(--paper-dim);
}
.tick b{color:var(--paper); font-weight:600; font-family:var(--body);}
.tick em{font-style:normal; font-size:12px; font-weight:700;}
.tick em.up{color:var(--green);}
.tick em.down{color:var(--red);}

.market-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}

.polls-wrap{margin-top:56px; max-width:560px;}
.poll-row{display:grid; grid-template-columns:36px 1fr 52px; align-items:center; gap:14px; margin-bottom:12px;}
.poll-name{font-family:var(--display); font-size:13px; color:var(--paper-dim);}
.poll-bar-track{height:10px; border-radius:999px; background:var(--line); overflow:hidden;}
.poll-bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--red), var(--gold));}
.poll-pct{font-size:13px; font-weight:700; text-align:right; color:var(--paper);}
.poll-source{margin-top:16px; font-size:12.5px; color:var(--paper-dim);}
.poll-source a{color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(240,180,41,.4);}

@media (max-width:640px){
  #marknad{padding:70px 0;}
}

/* FOOTER */
footer{padding:70px 0 40px; border-top:1px solid var(--line); background:rgba(12,10,9,.92);}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.foot-mark{font-family:var(--display); font-size:30px;}
.foot-mark span{color:var(--red);}
footer .btn.primary{margin-top:0;}
.foot-fine{margin-top:46px; font-size:13px; color:#948c7e; line-height:1.7; max-width:680px;}
.foot-fine a{text-decoration:underline; text-underline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .marquee-track{animation:none;}
  .nav .mark .dot, .live-pill .dot{animation:none;}
  .glow{display:none;}
  #bg-fixed .blob{animation:none;}
  .pin-wrap{height:auto;}
  .pin-stage{position:relative; height:auto; padding:80px 0;}
  .scroll-cue{display:none;}
}

@media (max-width:640px){
  .faq-q{font-size:15px;}
  .tldr-list{padding-left:30px;}
  .spine{left:9px;}
  .tldr-item::before{left:-30px;}
}