/* Layout primitives */
.container{
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.stack{ display: grid; gap: 18px; }
.stack-lg{ display: grid; gap: 28px; }
.grid-3{ display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); }
.col-4{ grid-column: span 4; }
.col-6{ grid-column: span 6; }
.col-12{ grid-column: span 12; }
@media (max-width: 980px){
  .col-4, .col-6{ grid-column: span 12; }
}

/* Topbar */
.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* Use CSS vars so we can smoothly shrink the header on scroll */
  --topbar-pad: 18px;
  --brand-logo-h: 46px;
  --navlink-pad-y: 10px;
  --navlink-pad-x: 10px;
  --navlink-font: 13px;
  padding: var(--topbar-pad) 0;
  transition:
    background var(--t) var(--ease),
    backdrop-filter var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    padding var(--t) var(--ease);
  background: rgba(255,255,255,0);
  border-bottom: 1px solid rgba(255,255,255,0);
}
.topbar.is-compact{
  --topbar-pad: 10px;
  --brand-logo-h: 38px;
  --navlink-pad-y: 8px;
  --navlink-pad-x: 9px;
  --navlink-font: 12px;
}
.topbar.is-solid{
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--soft);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo{
  display:block;
  height: var(--brand-logo-h);
  width: auto;
  max-width: min(360px, 40vw);
  object-fit: contain;
  transform: translateY(1px);
}
.brand-mark{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(11,11,11,0.22);
}
.brand-mark svg{ width: 20px; height: 20px; }
.brand-name{
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.1;
}
.brand-sub{
  display:block;
  font-weight: 520;
  color: rgba(11,11,11,0.58);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 12px;
}

.navlinks{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}
.navlinks a{
  position: relative;
  padding: var(--navlink-pad-y) var(--navlink-pad-x);
  border-radius: 12px;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  color: rgba(11,11,11,0.88);
  font-weight: 560;
  font-size: var(--navlink-font);
  letter-spacing: 0.01em;
}
.navlinks a::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
  border-radius: 2px;
  opacity: .85;
}
.navlinks a:hover{ background: rgba(11,11,11,0.04); transform: translateY(-1px); }
.navlinks a:hover::after{ transform: scaleX(1); }
.navlinks a[aria-current="page"]::after{ transform: scaleX(1); }
.navlinks a:active{ transform: translateY(0px); }

.actions{ display:flex; align-items:center; gap: 10px; }

.langswitch{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-right: 2px;
}
.flagbtn{
  width: 26px;
  height: 18px;
  border-radius: 7px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 10px 28px rgba(11,11,11,0.08);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  position: relative;
}
.flagbtn img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.06);
}
.flagbtn::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(120px 60px at 20% 0%, rgba(255,255,255,0.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  pointer-events:none;
}
.flagbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(11,11,11,0.16);
  box-shadow: 0 14px 36px rgba(11,11,11,0.12);
}
.flagbtn:hover::after{ opacity: .95; }
.flagbtn.is-active{
  border-color: rgba(214,0,0,0.55);
  box-shadow: 0 16px 44px rgba(214,0,0,0.10), 0 12px 28px rgba(11,11,11,0.10);
}
@media (max-width: 560px){
  .langswitch{ gap: 6px; }
  .flagbtn{ width: 24px; height: 16px; border-radius: 6px; }
}
.iconbtn{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid var(--soft2);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.iconbtn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11,11,11,0.10); border-color: rgba(225,6,0,0.28); }
.iconbtn:active{ transform: translateY(0px); }
.iconbtn svg{ width: 18px; height: 18px; stroke: var(--ink); }

.burger{ display:none; }

/* Collapse nav only when it doesn't fit (set by JS). */
body.nav-collapsed .navlinks{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.nav-collapsed .burger{ display:grid; }

/* Fallback for very small screens if JS is blocked. */
@media (max-width: 560px){
  .navlinks{
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .burger{ display:grid; }
  .brand-logo{ height: 36px; max-width: 64vw; }
}

/* Drawer */
.drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(11,11,11,0.42);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
  z-index: 60;
}
.drawer{
  position: fixed;
  top: 14px; right: 14px;
  width: min(420px, calc(100% - 28px));
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(11,11,11,0.10);
  box-shadow: var(--shadow2);
  transform: translateY(-10px) translateX(10px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  z-index: 61;
}
.drawer header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 16px 10px;
}
.drawer nav{
  display:grid; gap: 6px;
  padding: 0 16px 16px;
}
.drawer a{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,11,11,0.08);
  background: rgba(255,255,255,0.7);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  font-weight: 600;
}
.drawer a:hover{ transform: translateY(-1px); border-color: rgba(225,6,0,0.30); background: rgba(11,11,11,0.02); }
.drawer small{ display:block; margin-top: 4px; }

body.drawer-open .drawer-backdrop{ opacity: 1; pointer-events: auto; }
body.drawer-open .drawer{ opacity: 1; pointer-events: auto; transform: translateY(0) translateX(0) scale(1); }

/* Hero */
.hero{
  min-height: 92vh;
  display:grid;
  align-items:end;
  position: relative;
  overflow:hidden;
  padding-top: 92px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(1.05);
  transform: scale(1.03);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 80% 70%, rgba(225,6,0,0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.82) 70%, rgba(255,255,255,1) 100%);
}
.hero-inner{
  position: relative;
  padding: 54px 0 44px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(11,11,11,0.10);
  font-size: 12px;
  font-weight: 600;
  color: rgba(11,11,11,0.86);
}
.kicker i{
  width: 12px; height: 12px;
  border-radius: 99px;
  background: var(--accent);
  opacity: 0.9;
}
.hero h1{
  margin-top: 16px;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.hero p{
  margin-top: 12px;
  max-width: 58ch;
  font-size: 15px;
  color: rgba(11,11,11,0.72);
}
.hero-rail{
  margin-top: 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.rule{
  flex: 1;
  height: 1px;
  background: rgba(11,11,11,0.14);
}
.pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 650;
}
.pill .stripe{
  width: 18px; height: 6px;
  border-radius: 12px;
  background: var(--accent);
  opacity: .85;
}

/* Buttons (no red text) */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(11,11,11,0.16);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(11,11,11,0.10);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  font-weight: 650;
  font-size: 13px;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(225,6,0,0.35); box-shadow: 0 16px 40px rgba(11,11,11,0.12); }
.btn:active{ transform: translateY(0); }
.btn .dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--accent);
}

/* Section */
.section{
  padding: 70px 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
}
.section-head h2{
  font-size: 26px;
  letter-spacing: -0.04em;
}
.section-head p{ max-width: 60ch; }
@media (max-width: 980px){
  .section-head{ align-items:flex-start; flex-direction:column; }
}

/* Section: intro + Sweden map (home) */
.section-head-map{ align-items:stretch; }
.section-head-map .section-intro{ flex: 1 1 auto; }
.section-head-map .section-side{ flex: 0 0 420px; max-width: 46%; }
@media (max-width: 980px){
  .section-head-map .section-side{ flex-basis: auto; max-width: 100%; width: 100%; }
}

.map-card{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  padding: 16px 16px 12px;
}
.map-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(680px 360px at 70% 18%, rgba(11,11,11,0.06), transparent 62%),
    radial-gradient(640px 360px at 20% 110%, rgba(11,11,11,0.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
  pointer-events:none;
}
.map-card > *{ position: relative; }

.map-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11,11,11,0.62);
  margin: 0 0 10px;
}
.map-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .9;
}
.map-wrap svg{ display:block; width: 100%; height: auto; }
.map-wrap{ border-radius: 20px; overflow:hidden; }

.map-hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(11,11,11,0.58);
}

/* ---------------- Arena kart ---------------- */
.arena-kart{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 380px);
  gap: 24px;
  align-items: start;
}

.ak-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,11,11,0.66);
}
.ak-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

.ak-title{ margin-top: 10px; }
.ak-lead{ max-width: 62ch; color: rgba(11,11,11,0.72); }

.ak-panel{
  margin-top: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ak-panel-head{
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(11,11,11,0.08);
}
.ak-panel-label{ font-size: 12px; color: rgba(11,11,11,0.55); }
.ak-arena-name{ font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.ak-arena-meta{ font-size: 13px; color: rgba(11,11,11,0.62); margin-top: 4px; }

.ak-actions{ display:flex; gap:10px; align-items:flex-start; }
.ak-actions .btn{ white-space: nowrap; }
.ak-actions .is-disabled{ opacity:.55; pointer-events:none; }

.ak-panel-body{ padding: 16px 18px 18px; }

/* Smooth arena switching (left panel) */
.ak-panel{
  transition: box-shadow 420ms cubic-bezier(0.22,1,0.36,1), border-color 420ms cubic-bezier(0.22,1,0.36,1);
}
.ak-panel.is-switching .ak-panel-head,
.ak-panel.is-switching .ak-panel-body{
  opacity: 0;
  transform: translateY(8px);
}
.ak-panel .ak-panel-head,
.ak-panel .ak-panel-body{
  transition: opacity 520ms cubic-bezier(0.22,1,0.36,1), transform 520ms cubic-bezier(0.22,1,0.36,1);
}
.ak-teaser{ color: rgba(11,11,11,0.70); max-width: 70ch; }

.ak-chips{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ak-chip{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.70);
}

.ak-mini{ margin-top: 14px; display: grid; gap: 8px; }
.ak-mini-row{ display:flex; gap: 12px; }
.ak-mini-k{ width: 74px; font-size: 12px; color: rgba(11,11,11,0.55); }
.ak-mini-v{ font-size: 13px; color: rgba(11,11,11,0.72); }

.ak-list{ margin-top: 16px; display:grid; grid-template-columns: 1fr; gap: 10px; }
.ak-list-item{
  display:flex;
  gap: 12px;
  align-items:center;
  text-align:left;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.66);
  cursor: pointer;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ak-list-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(225,6,0,0.22); }
.ak-list-item.is-active{ border-color: rgba(225,6,0,0.30); box-shadow: var(--shadow2); }
.ak-list-dot{ width:10px;height:10px;border-radius:999px;background:var(--accent);opacity:.9; }
.ak-list-name{ display:block; font-weight: 700; letter-spacing: -0.01em; }
.ak-list-sub{ display:block; font-size: 12px; color: rgba(11,11,11,0.62); margin-top: 2px; }

.ak-dev{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(11,11,11,0.62);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(11,11,11,0.18);
  background: rgba(255,255,255,0.55);
}

.ak-map-card{
  max-width: 380px;
  margin-left: auto;
}

.ak-mapStage{
  border-radius: 20px;
  overflow: hidden;
  height: clamp(280px, 38vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.ak-mapStage svg{
  display:block;
  width: 100%;
  height: 100%;
  /* Smooth, "fly" transitions between arenas */
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 50%;
  transform: translate(calc(var(--ak-tx, 0) * 1%), calc(var(--ak-ty, 0) * 1%)) scale(var(--ak-scale, 1));
  filter: drop-shadow(0 20px 44px rgba(0,0,0,0.06));
  will-change: transform;
}

/* While cursor-follow is active we animate via JS lerp (not CSS), so remove transition lag. */
.ak-mapStage.is-follow svg{
  transition: none;
}

.ak-mapStage.is-zoom svg{
  filter: drop-shadow(0 26px 56px rgba(0,0,0,0.08));
}

/* Pin focus (simple dot + active heartbeat pulse ring) */
.ak-pin{ cursor: pointer; }

.ak-pin .pin-dot{
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1), filter 260ms cubic-bezier(0.22,1,0.36,1);
  transform-origin: center;
  transform-box: fill-box;
}

.ak-pin .pin-pulse{
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 220ms cubic-bezier(0.22,1,0.36,1);
}

.ak-pin:hover .pin-dot{ transform: scale(1.10); }

.ak-pin.is-active .pin-dot{
  transform: scale(1.20);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18)) drop-shadow(0 0 18px rgba(225,6,0,0.28));
}

.ak-pin.is-active .pin-pulse{
  opacity: 1;
  animation: akHeartbeat 1400ms cubic-bezier(0.22,1,0.36,1) infinite;
}

@keyframes akHeartbeat{
  0%   { transform: scale(1);    opacity: .55; }
  10%  { transform: scale(1.30); opacity: .22; }
  20%  { transform: scale(1.02); opacity: .50; }
  32%  { transform: scale(1.18); opacity: .26; }
  44%  { transform: scale(1.00); opacity: .55; }
  100% { transform: scale(1.00); opacity: .55; }
}

@media (max-width: 980px){
  .arena-kart{ grid-template-columns: 1fr; }
  .ak-map-card{ max-width: 100%; }
}

/* Cards */
.card{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,11,11,0.10);
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
  border-color: rgba(225,6,0,0.22);
}
.card .card-body{
  padding: 18px 18px 16px;
  display:grid;
  gap: 8px;
}
.card h3{
  font-size: 16px;
  letter-spacing: -0.02em;
}
.card p{
  font-size: 13px;
  color: rgba(11,11,11,0.62);
}
.card .meta{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 6px;
  color: rgba(11,11,11,0.56);
  font-size: 12px;
  font-weight: 600;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(225,6,0,0.38);
  background: rgba(225,6,0,0.08);
  color: rgba(11,11,11,0.86);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge i{
  width: 10px; height: 10px; border-radius: 99px;
  background: var(--accent); opacity: .9;
}
.thumb{
  height: 210px;
  position:relative;
  overflow:hidden;
}
.thumb::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(11,11,11,0.9), rgba(11,11,11,0.6));
  opacity: .12;
}
.thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.03);
  transition: transform var(--t-slow) var(--ease);
  filter: saturate(0.95) contrast(1.05);
}
.card:hover .thumb img{ transform: scale(1.08); }

/* Footer */
.footer{
  padding: 44px 0 54px;
  border-top: 1px solid var(--soft);
}
.footer .cols{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.footer a{ color: rgba(11,11,11,0.72); }
.footer a:hover{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.footer .fine{ margin-top: 14px; font-size: 12px; color: rgba(11,11,11,0.52); }
@media (max-width: 980px){
  .footer .cols{ grid-template-columns: 1fr; }
}

/* Page transitions */
.page{
  opacity: 0;
  transform: translateY(10px);
  animation: enter var(--t-slow) var(--ease) forwards;
}
@keyframes enter{
  to{ opacity: 1; transform: translateY(0); }
}
body.is-leaving .page{
  animation: leave var(--t) var(--ease) forwards;
}
@keyframes leave{
  to{ opacity: 0; transform: translateY(-10px); }
}

/* Reveal on scroll */
.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-in{ opacity: 1; transform: translateY(0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }

/* Command palette */
.kbar{
  position: fixed; inset: 0;
  display:grid; place-items:center;
  background: rgba(11,11,11,0.42);
  backdrop-filter: blur(10px);
  opacity:0; pointer-events:none;
  transition: opacity var(--t) var(--ease);
  z-index: 80;
}
.kbar-panel{
  width: min(760px, calc(100% - 28px));
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,11,11,0.10);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transform: translateY(10px) scale(0.98);
  transition: transform var(--t) var(--ease);
}
.kbar header{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11,11,11,0.08);
}
.kbar input{
  width: 100%;
  border: 1px solid rgba(11,11,11,0.12);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.78);
}
.kbar ul{ list-style:none; margin:0; padding: 10px; display:grid; gap: 8px; }
.kbar li{
  border-radius: 16px;
  border: 1px solid rgba(11,11,11,0.08);
  background: rgba(255,255,255,0.66);
  padding: 12px 12px;
  display:flex; align-items:center; justify-content:space-between;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor:pointer;
}
.kbar li:hover{ transform: translateY(-1px); border-color: rgba(225,6,0,0.28); }
.kbar .tag{
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(225,6,0,0.38);
  background: rgba(225,6,0,0.08);
  color: rgba(11,11,11,0.86);
}
body.kbar-open .kbar{ opacity:1; pointer-events:auto; }
body.kbar-open .kbar-panel{ transform: translateY(0) scale(1); }


/* --- Home photo hero (dark text set) --- */
/* Make header readable on dark hero while still transparent */
body.home-hero-dark .topbar:not(.is-solid){
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
}
body.home-hero-dark .topbar:not(.is-solid) .navlinks a{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
body.home-hero-dark .topbar:not(.is-solid) .navlinks a:hover{
  background: rgba(255,255,255,0.10);
}
body.home-hero-dark .topbar:not(.is-solid) .navlinks a[aria-current="page"]{
  color: #fff;
}
body.home-hero-dark .topbar:not(.is-solid) .actions .iconbtn{
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
}
body.home-hero-dark .topbar:not(.is-solid) .langswitch .flagbtn{
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* Photo hero background positioning support */
.hero.hero-photo{
  min-height: 100vh;
  /* If parallax ever reveals an edge, keep it visually consistent */
  background: #000;
}

.hero.hero-photo::before{
  background-position: var(--hero-pos, 50% 40%);
  filter: saturate(1.02) contrast(1.03);
  /* Parallax: JS updates --hero-parallax based on scroll */
  /* Slightly larger scale prevents edges when we increase parallax range */
  /* Larger scale gives headroom for stronger parallax without exposing edges */
  transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(1.22);
  will-change: transform;
}
/* Tighten fade so lower content stays clean while text remains legible */
.hero.hero-photo::after{
  background:
    radial-gradient(980px 640px at 16% 76%, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.00) 78%),
    /* Keep the photo visible much further down; only a thin white fade at the very bottom */
    linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.14) 52%, rgba(0,0,0,0.00) 92%, rgba(255,255,255,0.10) 98%, rgba(255,255,255,0.92) 100%);
}

.hero-inner.hero-inner-lower{
  /* More bottom padding keeps the copy away from the light fade */
  padding: 92px 0 88px;
  align-self: end;
}
.hero-copy-dark{
  max-width: 720px;
  color: #fff;
}

/* Home hero copy: no frame/pills, but strong readability */
.hero-copy-home{ max-width: 860px; }
.hero-brand{
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-shadow: 0 18px 70px rgba(0,0,0,0.55);
}
.hero-meta{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  text-shadow: 0 12px 40px rgba(0,0,0,0.40);
}
.hero-h1{
  margin: 18px 0 0;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 16px 60px rgba(0,0,0,0.52);
}
.hero-copy-home .hero-actions{ margin-top: 18px; }
.kicker.kicker-dark{
  border-color: rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 14px 36px rgba(0,0,0,0.16);
}
.kicker.kicker-dark i{ opacity: 1; }

.hero-title-dark{
  margin-top: 18px;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}
.hero-lines{ margin-top: 10px; display:grid; gap: 10px; }
.hero-kicker-dark{
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 14px 44px rgba(0,0,0,0.38);
}
.hero-sub-dark{
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 12px 40px rgba(0,0,0,0.30);
}

.btn.btn-cta{
  background: var(--accent);
  border-color: rgba(0,0,0,0.10);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
.btn.btn-cta:hover{ border-color: rgba(255,255,255,0.30); }
.btn.btn-cta .plus{
  width: 22px; height: 22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 720px){
  .hero-inner.hero-inner-lower{ padding: 86px 0 74px; }
  .hero-brand{ font-size: clamp(34px, 9vw, 54px); }
  .hero-h1{ font-size: clamp(20px, 6vw, 28px); }
}


/* --- Up next / Next items (homepage) --------------------------------- */
/* Scoped to avoid collisions with existing .card etc */
.next-section{
  margin-top: 28px;
  width: 100%;
  grid-column: 1 / -1; /* if inside a grid row */
}

.next-kicker-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.next-kicker-row .dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--accent);
  opacity:.9;
}

.next-kicker{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--muted);
  line-height:1;
}

.next-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-0.01em;
}

.next-sub{
  margin:6px 0 0;
  color: var(--muted);
}

.next-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  align-items:stretch;
}

.next-card{
  display:flex;
  flex-direction:column;
  min-height: 220px;
  width:100%;
  text-decoration:none;
  color: inherit;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  overflow:hidden;
  padding: 18px 18px 16px;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), box-shadow 520ms cubic-bezier(.2,.8,.2,1), border-color 520ms cubic-bezier(.2,.8,.2,1);
}

.next-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 22px 52px rgba(0,0,0,0.12);
}

.next-card-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing:-0.01em;
}

.next-info{
  display:grid;
  gap:10px;
  margin-top: 14px;
}

.next-info .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.next-info .k{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size:13px;
}

.next-info .k i{
  width:16px;height:16px; flex:0 0 auto;
  stroke-width: 2;
  opacity:.9;
}

.next-info .v{
  font-size:13px;
  color: var(--ink);
  font-weight: 650;
  white-space:nowrap;
}

.next-actions{
  margin-top:auto;
  padding-top: 14px;
  display:flex;
  justify-content:flex-end;
}

.next-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 650;
  font-size:13px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
}

.next-link i{ width:16px;height:16px; }

.next-link:hover{
  border-color: rgba(0,0,0,0.16);
}

/* Responsive */
@media (max-width: 980px){
  .next-grid{ grid-template-columns: 1fr; }
  .next-card{ min-height: unset; }
}

/* --- Unified "next" feed (3 upcoming items) -------------------------- */
.next-feed{
  width:100%;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  overflow:hidden;
}

.next-feed-empty{
  padding: 16px 18px;
  color: var(--muted);
}

.next-feed-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px 16px;
  text-decoration:none;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,0.06);
  transition: background 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1);
}

.next-feed-row:first-child{ border-top: none; }

.next-feed-row:hover{
  background: rgba(255,255,255,0.92);
}

.next-feed-badge{
  flex:0 0 auto;
  font-size:12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  white-space:nowrap;
}

.next-feed-main{ min-width: 0; flex: 1 1 auto; }

.next-feed-title{
  font-size: 15px;
  font-weight: 750;
  letter-spacing:-0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next-feed-meta{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  color: var(--muted);
  font-size: 13px;
}

.next-feed-meta .m{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.next-feed-meta i{ width:16px;height:16px; stroke-width:2; opacity:.9; }

.next-feed-cta{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  font-weight: 650;
  font-size: 13px;
  white-space:nowrap;
}

.next-feed-cta i{ width:16px;height:16px; }

@media (max-width: 720px){
  .next-feed-row{ align-items:flex-start; }
  .next-feed-cta .label{ display:none; }
}