/* =========================================================
   WinLuisPlus — Liquid Glass theme
   ========================================================= */

:root {
  --bg: #070b16;
  --text: #f4f7ff;
  --text-soft: rgba(244, 247, 255, .78);
  --text-dim: rgba(244, 247, 255, .58);
  --accent: #4a86e8;
  --accent-2: #7fb2ff;
  --win: #ffe600;
  --luis: #2f7bff;
  --plus: #22ff6a;
  --danger: #ff4d4d;

  --glass: rgba(255, 255, 255, .075);
  --glass-strong: rgba(255, 255, 255, .13);
  --glass-dark: rgba(10, 16, 32, .42);
  --glass-border: rgba(255, 255, 255, .22);
  --glass-hi: rgba(255, 255, 255, .55);
  --blur: blur(22px) saturate(175%);
  --shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .18);

  --radius: 28px;
  --radius-sm: 16px;
  --nav-h: 64px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Lexend", var(--font);
  --font-pixel: "Bitcount Single", "Lexend", monospace;
  --font-pt: var(--font);   /* PT Sans used to live here; two type families are plenty */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 32px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 .9em; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
::selection { background: rgba(74, 134, 232, .55); color: #fff; }

/* ---------- Page backdrop (fixed photo + aurora blobs) ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background: var(--bg);
}
.backdrop__img {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  filter: saturate(115%) brightness(.62);
  transform: scale(1.08);
  will-change: transform;
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, transparent 0%, rgba(7, 11, 22, .25) 60%, rgba(7, 11, 22, .8) 100%),
    linear-gradient(180deg, rgba(7, 11, 22, 0) 30%, rgba(7, 11, 22, .65) 100%);
}
/* Colour glows behind the page. They used to be live blurs that drifted forever, which kept the
   graphics card redrawing every frame (and re-blurring every glass card on top) even when idle.
   Now they're soft gradients that stand still: same look, close to zero cost. */
.blob { position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; opacity: .45; }
.blob--a { width: 700px; height: 700px; top: calc(10% - 90px); left: -250px; background: radial-gradient(closest-side, #2f7bff, rgba(47,123,255,.55) 45%, rgba(47,123,255,0)); }
.blob--b { width: 600px; height: 600px; bottom: -210px; right: -210px; opacity: .22; background: radial-gradient(closest-side, #22ff6a, rgba(34,255,106,.55) 45%, rgba(34,255,106,0)); }
.blob--c { width: 540px; height: 540px; top: calc(45% - 90px); right: calc(20% - 90px); opacity: .16; background: radial-gradient(closest-side, #ffb300, rgba(255,179,0,.55) 45%, rgba(255,179,0,0)); }

/* ---------- Glass primitive ---------- */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 45%, rgba(255,255,255,.07));
  background-color: var(--glass-dark);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 0 24px rgba(255,255,255,.04),
    var(--shadow);
  isolation: isolate;
}
/* specular rim */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.7), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
/* cursor-following light */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(255,255,255,.14), transparent 45%);
  opacity: var(--glow, 0); transition: opacity .4s var(--ease);
}
.glass:hover { --glow: 1; }
.glass > * { position: relative; z-index: 2; }
/* Content surfaces. Real glass (blur + rim) is kept for the chrome that floats over the page:
   the nav, menus, search, buttons and pills. The things you actually read sit on solid surfaces,
   lit from above, so text never fights the photo behind it (and the GPU stops blurring 30 cards). */
.glass.reveal {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-color: rgba(15, 20, 35, .95);
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 55%);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 22px 44px -22px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.25);
}
.glass.reveal::before { display: none; }
.glass.reveal::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -20%), rgba(255,255,255,.07), transparent 45%); }

/* ---------- Navigation ---------- */
.nav-wrap {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; padding: 0 16px;
  transition: transform .5s var(--ease);
}
.nav {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: var(--maxw); height: var(--nav-h);
  padding: 0 10px 0 12px;
  border-radius: 999px;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.glass { background-color: rgba(10, 16, 32, .28); }
.is-scrolled .nav.glass { background-color: rgba(10, 16, 32, .55); }
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 6px 12px 6px 4px; border-radius: 999px; flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 4px 14px rgba(47,123,255,.45); }
.brand span { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }

.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.menu > li { position: relative; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 4px;
  font: 500 14.5px/1 var(--font); color: var(--text);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 11px 14px; border-radius: 999px; white-space: nowrap;
  transition: background .25s var(--ease), color .25s;
}
.menu > li > a:hover, .menu > li > button:hover, .menu > li.open > button { background: rgba(255,255,255,.12); }
.menu > li > a[aria-current="page"], .menu > li.active > button {
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px rgba(0,0,0,.18);
}
.chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
li.open > button .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 280px;
  list-style: none; margin: 0; padding: 8px; border-radius: 22px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .28s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.dropdown.glass { background-color: rgba(12, 18, 36, .72); }
li.open > .dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropdown a { padding: 12px 14px; border-radius: 14px; white-space: normal; line-height: 1.35; font-weight: 400; }
.dropdown a:hover { background: rgba(255,255,255,.12); }
.dropdown a[aria-current="page"] { background: rgba(74,134,232,.35); }
.dropdown .sub { padding-left: 28px; font-size: 14px; color: var(--text-soft); }
.dropdown .sep { height: 1px; margin: 6px 10px; background: rgba(255,255,255,.14); }
.dropdown .ext::after { content: "↗"; margin-left: auto; padding-left: 10px; opacity: .55; font-size: 12px; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
  transition: background .25s var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,.14); }
.icon-btn svg { width: 22px; height: 22px; }
.burger { display: none; }

/* overflow menu items that collapse into "More" at mid widths */
.menu .collapse-md { display: block; }
.more-md { display: none; }

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end;
  visibility: hidden; pointer-events: none;
}
.drawer__scrim { position: absolute; inset: 0; background: rgba(3,6,14,.45); opacity: 0; transition: opacity .35s var(--ease); }
.drawer__panel {
  position: relative; width: min(360px, 88vw); height: calc(100% - 24px); margin: 12px;
  padding: 18px 14px; overflow-y: auto; border-radius: 28px;
  transform: translateX(110%); transition: transform .5s var(--ease);
}
.drawer__panel.glass { background-color: rgba(12, 18, 36, .72); }
.drawer.open { visibility: visible; pointer-events: auto; }
.drawer.open .drawer__scrim { opacity: 1; }
.drawer.open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a { display: block; padding: 13px 14px; border-radius: 14px; text-decoration: none; font-size: 16px; }
.drawer a:hover { background: rgba(255,255,255,.1); }
.drawer a[aria-current="page"] { background: rgba(74,134,232,.35); }
.drawer .sub a { padding-left: 30px; font-size: 15px; color: var(--text-soft); }
.drawer .label { padding: 16px 14px 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }

/* ---------- Search overlay ---------- */
.search {
  position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; visibility: hidden; pointer-events: none;
}
.search__scrim { position: absolute; inset: 0; background: rgba(3,6,14,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.search__box { width: 100%; max-width: 640px; padding: 10px; border-radius: 26px; opacity: 0; transform: translateY(-14px) scale(.98); transition: all .4s var(--ease); }
.search__box.glass { background-color: rgba(12, 18, 36, .75); }
.search.open { visibility: visible; pointer-events: auto; }
.search.open .search__scrim { opacity: 1; }
.search.open .search__box { opacity: 1; transform: none; }
.search__field { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.search__field svg { width: 20px; height: 20px; opacity: .7; flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
  font: 400 18px/1.4 var(--font); padding: 10px 0;
}
.search input::placeholder { color: var(--text-dim); }
.search kbd { font: 12px var(--font); padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); color: var(--text-dim); }
.search__results { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.search__results:not(:empty) { border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; padding-top: 6px; }
.search__results a { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; }
.search__results a:hover, .search__results a.sel { background: rgba(255,255,255,.1); }
.search__results strong { display: block; font-weight: 500; }
.search__results small { color: var(--text-dim); font-size: 13.5px; }
.search__results mark { background: rgba(255,230,0,.3); color: inherit; border-radius: 3px; }
.search__empty { padding: 14px; color: var(--text-dim); }

/* ---------- Layout ---------- */
main { position: relative; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.section { padding: 34px 0; }
.section--tight { padding: 16px 0; }
.card { padding: clamp(24px, 4vw, 48px); }
.center { text-align: center; }
.stack > * + * { margin-top: 24px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-h) + 40px) 16px 90px;
}
.hero--sub { min-height: 62vh; min-height: 62svh; }
.hero__inner { max-width: 900px; }
.hero__title {
  font-family: var(--font-pixel); font-weight: 500;
  font-size: clamp(54px, 11vw, 128px); line-height: 1; margin: 0 0 24px;
  letter-spacing: .01em;
  filter: drop-shadow(0 6px 30px rgba(0,0,0,.45));
}
.hero__title span { display: inline-block; animation: rise 1.1s var(--ease) both; }
.hero__title span:nth-child(2) { animation-delay: .12s; }
.hero__title span:nth-child(3) { animation-delay: .24s; }
.c-win { color: var(--win); text-shadow: 0 0 28px rgba(255,230,0,.45); }
.c-luis { color: var(--luis); text-shadow: 0 0 28px rgba(47,123,255,.55); }
.c-plus { color: var(--plus); text-shadow: 0 0 28px rgba(34,255,106,.45); }
.c-red { color: #ff3b3b; }
.c-blue { color: var(--accent-2); }
.hero__sub {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 2.2vw, 21px); color: var(--text-soft); margin: 0 0 8px;
  animation: rise 1s .35s var(--ease) both;
}
.hero__sub a { color: var(--text); text-underline-offset: 4px; }
.hero__cta { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: rise 1s .5s var(--ease) both; }
.hero h1.page-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 6.4vw, 76px); margin: 0;
  text-shadow: 0 6px 40px rgba(0,0,0,.5);
  animation: rise 1.1s var(--ease) both;
}
.hero .eyebrow { animation: rise 1s var(--ease) both; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow.glass { background-color: rgba(10,16,32,.3); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  font: 500 16px/1 var(--font); color: var(--text);
  transition: transform .35s var(--ease), background-color .3s, box-shadow .3s;
}
.btn.glass { background-color: rgba(255,255,255,.1); }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; }
.btn--yt.glass { background-color: rgba(255, 30, 30, .32); }
.btn--yt.glass:hover { background-color: rgba(255, 30, 30, .48); }

/* ---------- Headings in content ---------- */
.h-display { font-family: var(--font); font-weight: 200; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.02em; }
.h-section { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4vw, 46px); }
.h-sm { font-family: var(--font); font-weight: 300; font-size: clamp(24px, 2.6vw, 30px); }
.lead { font-size: 18px; color: var(--text-soft); }
.pt { font-family: var(--font-pt); font-size: 17.5px; }
.prose { color: var(--text-soft); }
.prose strong { color: var(--text); }
.prose a, .link { color: var(--accent-2); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); font-weight: 500; }
.prose a:hover, .link:hover { background-size: 100% 1.5px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent-2); }

/* ---------- Home: intro grid ---------- */
.intro-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 24px; align-items: start; }
.intro-grid > .glass { padding: 28px; }
.intro-grid .col-title { font-family: var(--font); font-weight: 200; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.05; margin-bottom: 22px; }
.links-list { display: grid; gap: 10px; margin-top: 8px; }
.links-list a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: 16px; text-decoration: none; font-family: var(--font-pt); font-weight: 700;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background .3s var(--ease), transform .35s var(--ease);
}
.links-list a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

.hw-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.hw-list li { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.hw-list b { display: block; font-family: var(--font-display); font-weight: 500; color: var(--text); margin-bottom: 6px; }

/* ---------- Video ---------- */
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.18);
}
.video iframe, .video .video__poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__poster { cursor: pointer; background: center / cover no-repeat; display: grid; place-items: center; border: 0; padding: 0; }
.video__poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); transition: background .3s; }
.video__poster:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.3)); }
.video__play {
  position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.4);
  transition: transform .4s var(--ease), background .3s;
}
.video__poster:hover .video__play { transform: scale(1.1); background: rgba(255,0,0,.55); }
.video__play svg { width: 28px; height: 28px; margin-left: 4px; color: #fff; }
.video__title { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font-weight: 500; font-size: 15px; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.video-grid { display: grid; gap: 24px; }

/* ---------- Media / gallery ---------- */
.gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--1 { grid-template-columns: 1fr; }
figure { margin: 0; }
.shot {
  position: relative; border-radius: 20px; overflow: hidden; cursor: zoom-in;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.gallery .shot { aspect-ratio: 16 / 10; }
.gallery--fit .shot { aspect-ratio: auto; }
.gallery--fit .shot img { height: auto; object-fit: contain; }
figcaption { margin-top: 10px; font-size: 14.5px; color: var(--text-dim); text-align: center; }

/* ---------- Steps (tutorials) ---------- */
.steps { display: grid; gap: 24px; counter-reset: step; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.step__num {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  font: 600 22px/1 var(--font-display); color: #fff;
  background: linear-gradient(145deg, rgba(74,134,232,.75), rgba(47,123,255,.35));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -8px rgba(47,123,255,.7);
}
.step__body > :last-child { margin-bottom: 0; }
.step__body .gallery { margin-top: 18px; }
.req { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); list-style: none; padding: 0; margin: 14px 0 0; }
.req li {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text);
}
.req li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--plus); box-shadow: 0 0 12px var(--plus); flex-shrink: 0; }
.callout {
  padding: 18px 20px; border-radius: 18px; margin: 18px 0 0;
  background: rgba(255, 70, 70, .14); border: 1px solid rgba(255, 110, 110, .4); color: var(--text);
}
.callout--info { background: rgba(74,134,232,.16); border-color: rgba(127,178,255,.4); }

/* ---------- Minecraft ---------- */
.mc-hero__logo { width: min(260px, 60vw); margin: 0 auto 18px; border-radius: 26px; animation: rise 1s var(--ease) both; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ip-pill {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  padding: 10px 10px 10px 22px; border-radius: 999px; margin: 6px 0 14px;
}
.ip-pill.glass { background-color: rgba(34,255,106,.12); }
.ip-pill code { font: 600 17px/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; word-break: break-all; }
.copy-btn {
  border: 0; cursor: pointer; padding: 10px 16px; border-radius: 999px; color: #04120a; font: 600 14px/1 var(--font);
  background: var(--plus); box-shadow: 0 6px 20px -6px rgba(34,255,106,.8); transition: transform .3s var(--ease);
}
.copy-btn:hover { transform: scale(1.05); }
.specs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0; margin: 12px 0 0; }
.specs li { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 15px; }
.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center; }
.rules { list-style: none; counter-reset: r; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.rules li { counter-increment: r; position: relative; padding: 16px 18px 16px 62px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text-soft); }
.rules li::before { content: counter(r); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 600 15px/1 var(--font-display); background: rgba(74,134,232,.35); color: #fff; }
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.toc a { padding: 10px 18px; border-radius: 999px; text-decoration: none; font-size: 15px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: background .3s; }
.toc a:hover { background: rgba(255,255,255,.18); }
.server-badge { display: flex; justify-content: center; }
.server-badge img { border-radius: 10px; max-width: 100%; }

/* ---------- Footer ---------- */
.site-footer { padding: 40px 0 34px; }
.footer-grid { display: grid; gap: 20px; }
.footer-bugs { padding: 24px 28px; text-align: center; font-size: 16.5px; color: var(--text-soft); }
.footer-bugs a { color: var(--text); font-weight: 600; }
.footer-bugs .hl { background: rgba(255, 230, 0, .22); padding: 2px 8px; border-radius: 8px; text-decoration: none; }
.disclaimer { padding: 24px 28px; font-size: 15.5px; color: var(--text-soft); line-height: 1.7; }
.disclaimer strong { color: var(--text); }
.copyright { text-align: center; color: var(--text-dim); font-size: 15px; padding-top: 6px; }
.copyright a { color: var(--text-soft); }
.copyright p { margin: 4px 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px;
  background: rgba(3,6,14,.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s;
}
.lightbox.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: scale(.94); transition: transform .45s var(--ease); }
.lightbox.open img { transform: none; }
.lightbox p { color: var(--text-soft); margin-top: 14px; text-align: center; }
.lightbox .icon-btn { position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.12); }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox__nav.prev { left: 14px; } .lightbox__nav.next { right: 14px; }
.lightbox__nav.icon-btn { position: absolute; top: 50%; background: rgba(255,255,255,.12); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 500; padding: 12px 20px; border-radius: 999px; translate: -50% 20px; opacity: 0; transition: all .4s var(--ease); pointer-events: none; }
.toast.glass { background-color: rgba(12,18,36,.75); }
.toast.show { translate: -50% 0; opacity: 1; }

/* ---------- Scroll reveal ---------- */
/* cards fade and slide in; the old extra blur made scrolling much heavier for the graphics card */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* back-to-top */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--text); border: 0; cursor: pointer; opacity: 0; transform: translateY(20px); transition: all .4s var(--ease); }
.to-top.glass { background-color: rgba(12,18,36,.5); }
.to-top.show { opacity: 1; transform: none; }
.to-top svg { width: 22px; height: 22px; }

/* reading progress */
.progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 150; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--win), var(--luis), var(--plus)); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .menu .collapse-md { display: none; }
  .more-md { display: block; }
}
@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-grid .welcome { order: -1; }
  .hw-list { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .gallery--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .menu { display: none; }
  .burger { display: grid; margin-left: auto; }
}
@media (max-width: 600px) {
  :root { --nav-h: 58px; --radius: 24px; }
  body { font-size: 16px; }
  .nav-wrap { top: 10px; padding: 0 10px; }
  .brand span { font-size: 17px; }
  .brand img { width: 36px; height: 36px; }
  .gallery--2, .gallery--3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .step__num { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
  .card { padding: 22px 18px; }
  .intro-grid > .glass { padding: 22px 18px; }
  .rules li { padding: 14px 14px 14px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  html { scroll-behavior: auto; }
}

/* Fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background-color: rgba(14, 20, 38, .88); }
}

/* ---------- Additions: video sizing, backdrop crossfade ---------- */
.video { container-type: inline-size; }
.video__poster { font: inherit; color: #fff; }
@container (max-width: 420px) { .video__title { display: none; } .video__play { width: 60px; height: 60px; } }
.backdrop__img { transition: opacity 1.2s var(--ease); }
.backdrop__img.is-hidden { opacity: 0; }
.prose a, .link { overflow-wrap: anywhere; }
/* nested backdrop-filter does not blur inside the nav, so dropdowns get a denser tint */
.dropdown.glass { background-color: rgba(12, 18, 36, .94); }
.req li { display: block; position: relative; padding-left: 40px; }
.req li::before { position: absolute; left: 16px; top: 50%; translate: 0 -50%; }
.req li a { overflow-wrap: normal; word-break: normal; }
.hero__title { white-space: nowrap; font-size: clamp(36px, 10.5vw, 128px); }
@media (max-width: 860px) {
  .menu + .icon-btn { margin-left: auto; }
  .burger { margin-left: 0; }
}
.drawer a.brand { display: flex; padding: 6px 12px 6px 4px; }

/* ---------- Tutoriales index, ISO download cards, form, about ---------- */
.tut-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tut-card, .dl-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 170px;
  padding: 26px; text-decoration: none; color: var(--text);
  transition: transform .45s var(--ease), background-color .3s;
}
a.tut-card:hover, a.dl-card:hover { transform: translateY(-4px); background-color: rgba(30, 45, 80, .5); }
.tut-card strong { font: 400 clamp(19px, 2vw, 22px)/1.3 var(--font-display); margin-top: auto; }
.tut-card__num { font: 600 14px/1 var(--font-display); letter-spacing: .12em; color: var(--accent-2); }
.tut-card--soon { opacity: .7; }
.soon { align-self: flex-start; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255, 230, 0, .16); border: 1px solid rgba(255, 230, 0, .35); }
.dl-card__go { position: absolute; top: 22px; right: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: transform .4s var(--ease), background .3s; }
.dl-card__go svg { width: 18px; height: 18px; }
a.tut-card:hover .dl-card__go, a.dl-card:hover .dl-card__go { transform: rotate(45deg); background: rgba(74,134,232,.5); }
.dl-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.dl-card { min-height: 150px; }
.dl-card strong { font: 500 20px/1.25 var(--font-display); padding-right: 46px; }
.dl-card small { color: var(--text-dim); font-size: 13.5px; overflow-wrap: anywhere; }
.dl-card__tag { align-self: flex-start; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.dl-card__note { margin: 4px 0 0; font-size: 14.5px; color: var(--text-soft); }
.dl-card--off { border-style: dashed; }
.form-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.form-head .btn { padding: 11px 18px; font-size: 14.5px; }
.form-frame { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); }
.form-frame iframe { display: block; width: 100%; height: 1150px; border: 0; }
.about { max-width: 860px; margin: 0 auto; }
.about__logo { width: 120px; height: 120px; border-radius: 30px; margin: 0 auto 26px; box-shadow: 0 16px 44px rgba(47,123,255,.5); }
.about .hero__cta { margin-top: 26px; }
.form-frame { position: relative; }
.form-frame::before { content: "Loading form…"; position: absolute; top: 80px; left: 0; right: 0; text-align: center; color: #5f6368; font-size: 15px; }
.form-frame iframe { position: relative; }

/* ---------- News ---------- */
.news-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.news-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; text-decoration: none; color: var(--text); transition: transform .45s var(--ease), background-color .3s; }
.news-card:hover { transform: translateY(-4px); background-color: rgba(22, 32, 58, .94); }
.news-card__meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-dim); }
.news-card strong { font: 500 clamp(20px, 2.1vw, 23px)/1.3 var(--font-display); }
.news-card p { margin: 0; color: var(--text-soft); font-size: 15.5px; }
.news-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-weight: 500; font-size: 15px; color: var(--accent-2); }
.news-card__more svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.news-card:hover .news-card__more svg { transform: translate(3px, -3px); }
.news-tag { padding: 5px 11px; border-radius: 999px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #ffd0d0; background: rgba(255, 70, 70, .18); border: 1px solid rgba(255, 110, 110, .4); }

.article { max-width: 900px; display: grid; gap: 22px; }
.article .prose { color: var(--text-soft); }
.article h2 { color: var(--text); }
.article code { font: 14.5px ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 7px; border-radius: 7px; background: rgba(255,255,255,.1); color: var(--text); overflow-wrap: anywhere; }
.facts { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
.facts > div { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); }
.facts span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.facts strong { color: var(--text); font: 500 16px/1.35 var(--font-display); }
.facts small { color: var(--text-dim); font: 13px var(--font); }
.table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); }
.vtable { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.vtable th, .vtable td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.09); }
.vtable th { font-weight: 500; color: var(--text); background: rgba(255,255,255,.06); }
.vtable tr:last-child td { border-bottom: 0; }
.vtable td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: rgba(34,255,106,.16); color: #9dffbf; }
.pill.warn { background: rgba(255,200,0,.16); color: #ffe38a; }
.pill.bad { background: rgba(255,70,70,.18); color: #ffb3b3; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--win), var(--luis), var(--plus)); opacity: .6; }
.timeline li { position: relative; padding: 0 0 18px 32px; margin: 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-2); }
.timeline time { display: block; font: 500 14px var(--font-display); color: var(--text); }
.sources li { margin-bottom: .4em; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.news-tag--iphone { color: #cfe1ff; background: rgba(74,134,232,.22); border-color: rgba(127,178,255,.45); }
.article-figure { margin: 0; }
.article-figure .shot { aspect-ratio: auto; background: #070b16; }
.article-figure .shot img { width: 100%; height: auto; object-fit: contain; }
.article-figure figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; padding: 0 8px; }
.news-tag--mac { color: #e8ecf4; background: rgba(200,210,225,.16); border-color: rgba(220,228,240,.45); }
.news-tag--robots { color: #ffe6a8; background: rgba(255,190,40,.18); border-color: rgba(255,200,80,.45); }
.ai-badge { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; color: #e9d5ff; background: rgba(168, 85, 247, .2); border: 1px solid rgba(192, 132, 252, .45); }
.joke { margin-top: 20px; padding: 20px 22px; border-radius: 18px; background: rgba(255, 190, 40, .1); border: 1px dashed rgba(255, 200, 80, .5); color: var(--text-soft); }
.joke p { margin: 0 0 .6em; }
.joke p:last-child { margin-bottom: 0; }
.joke__q { font: 600 clamp(20px, 2.2vw, 24px)/1.3 var(--font-display); color: #ffe6a8; }

/* ---------- Mobile fix: keep articles inside the screen ----------
   Grid items default to min-width:auto, so a wide table stretched the whole
   article column past the viewport. Let the column shrink; tables scroll
   inside .table-wrap instead. */
.article { grid-template-columns: minmax(0, 1fr); }
.article > * { min-width: 0; }
.facts strong, .facts small { overflow-wrap: anywhere; }
.table-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 600px) {
  .vtable { font-size: 14.5px; }
  .vtable th, .vtable td { padding: 11px 12px; }
  /* let long row labels wrap, so the other columns stay on screen */
  .vtable td:first-child { white-space: normal; min-width: 6em; }
}
/* card grids: never ask for more width than the screen has */
.news-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.tut-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.dl-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.req { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
/* wide tables (4+ columns) scroll sideways inside their box on phones instead of squashing */
@media (max-width: 600px) {
  .vtable:has(thead th:nth-child(4)) { min-width: 560px; }
  .table-wrap { scrollbar-width: thin; }
}
/* "Update" box at the top of an updated article */
.update-card.glass { background-color: rgba(16, 34, 78, .92); border-color: rgba(127, 178, 255, .45); }
.update-card__tag { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(47, 123, 255, .55); }
/* photos shared by other people: side by side, with a credit line */
.photo-row { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.photo-credit { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); opacity: .85; }
.photo-credit a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) { .photo-row { grid-template-columns: minmax(0, 1fr); } }

/* tutorial sub-headings, code and keys */
.prose h3 { font: 500 18px/1.35 var(--font-display); color: var(--text); margin: 1.4em 0 .45em; }
.prose h2 + h3, .prose .h-sm + h3 { margin-top: .6em; }
.prose code { font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 2px 7px; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--text); overflow-wrap: anywhere; }
.prose kbd { font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 2px 8px; border-radius: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-bottom-width: 2px; color: var(--text); white-space: nowrap; }
.prose pre.code { margin: 0 0 1em; padding: 16px 18px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); overflow-x: auto; }
.prose pre.code code { padding: 0; border: 0; background: none; white-space: pre; overflow-wrap: normal; }
.prose .table-wrap + p { margin-top: 16px; }
.news-tag--trojan { color: #e9d5ff; background: rgba(168,85,247,.2); border-color: rgba(192,132,252,.45); }
.news-tag--ransomware { color: #ffc4c4; background: rgba(255,70,70,.18); border-color: rgba(255,120,120,.45); }
.news-tag--scam { color: #ffe6a8; background: rgba(255,190,40,.18); border-color: rgba(255,200,80,.45); }
/* malware pages use bright screenshots as the background: darker, so text stays readable */
.backdrop--malware .backdrop__img { filter: saturate(125%) brightness(.42); }
.backdrop--pixel .backdrop__img { image-rendering: pixelated; filter: saturate(110%) brightness(.26); }
/* comment box under articles */
.comments-section { padding-top: 0; }
.comments-note { font-size: 15px; color: var(--text-soft); }
#remark42 { min-height: 120px; }
.step__body { min-width: 0; }
.news-tag--worm { color: #ffd1e8; background: rgba(236,72,153,.2); border-color: rgba(244,114,182,.45); }

/* ---------- Malware section: subtle "lab" look, filters, years ---------- */
:root {
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --cat-trojan: #c084fc; --cat-worm: #f472b6; --cat-ransomware: #ff6b6b; --cat-scam: #fbbf24;
}
/* faint grid + scanlines over the malware backgrounds */
.backdrop--malware::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(120,255,170,.04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(120,255,170,.04) 1px, transparent 1px) 0 0 / 56px 56px;
}
.backdrop--malware ~ main .eyebrow { font-family: var(--mono); letter-spacing: .14em; }
.backdrop--malware ~ main .facts span { font-family: var(--mono); letter-spacing: .08em; }
/* specimen cards: colour bar by category, year in code font */
.mal-card { position: relative; --c: var(--cat-trojan); }
.mal-card[data-cats^="worm"] { --c: var(--cat-worm); }
.mal-card[data-cats^="ransomware"] { --c: var(--cat-ransomware); }
.mal-card[data-cats^="scam"] { --c: var(--cat-scam); }
.mal-card.glass { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c) 70%, transparent), 0 22px 44px -22px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.25); }
.mal-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 10px 36px -12px var(--c); }
.mal-card[hidden] { display: none; }
.mal-year { margin-left: auto; font: 500 12.5px/1 var(--mono); color: var(--text-dim); letter-spacing: .04em; }
/* filter bar */
.mal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 20px; }
.mal-tools[hidden] { display: none; }
.mal-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mal-filter, .mal-sort {
  font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 13px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.mal-filter span { opacity: .6; margin-left: 3px; }
.mal-filter:hover, .mal-sort:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.mal-filter[aria-pressed="true"], .mal-sort[aria-pressed="true"] { color: #fff; background: rgba(120,255,170,.14); border-color: rgba(120,255,170,.55); }
.mal-filter:focus-visible, .mal-sort:focus-visible { outline: 2px solid rgba(120,255,170,.8); outline-offset: 2px; }
.mal-sort { margin-left: auto; }
.mal-status { flex-basis: 100%; margin: 0 2px; font: 12px/1.3 var(--mono); color: var(--text-dim); }
@media (max-width: 600px) { .mal-sort { margin-left: 0; } }

/* ---------- Table of contents + reading time (articles) ---------- */
.art-toc { padding: 22px 26px; }
.art-toc__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.art-toc__head strong { font: 500 18px/1.3 var(--font-display); }
.art-toc__time { font: 500 12.5px/1 var(--mono); color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }
.art-toc ol { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 32px; }
.art-toc li { margin: 0 0 8px; break-inside: avoid; color: var(--text-dim); }
.art-toc a { color: var(--text-soft); text-decoration: none; }
.art-toc a:hover { color: #fff; text-decoration: underline; }
main h2[id] { scroll-margin-top: 110px; }

/* ---------- "More malware" row ---------- */
.related-section { padding-top: 0; }
.related-title { margin: 0 0 18px; }

/* ---------- Minecraft live status ---------- */
.mc-status { text-align: left; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 18px; border-radius: 18px; }
.mc-status strong { display: block; font: 500 16px/1.3 var(--font-display); }
.mc-status__sub { display: block; font-size: 14px; color: var(--text-soft); }
.mc-status__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #9aa3b5; box-shadow: 0 0 0 4px rgba(154,163,181,.18); }
.mc-status[data-state="online"] .mc-status__dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.2), 0 0 18px rgba(52,211,153,.7); animation: mc-pulse 2s ease-in-out 4; }
.mc-status[data-state="offline"] .mc-status__dot { background: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,.2); }
.mc-status[data-state="tunnel"] .mc-status__dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.22); }
@keyframes mc-pulse { 50% { box-shadow: 0 0 0 7px rgba(52,211,153,.08), 0 0 24px rgba(52,211,153,.9); } }
@media (prefers-reduced-motion: reduce) { .mc-status__dot { animation: none !important; } }

/* ---------- Malware timeline ---------- */
.news-tag--context { color: #dbe3f1; background: rgba(200,210,230,.12); border-color: rgba(210,220,240,.35); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.tl-key { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--mono); color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; }
.tl-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.tl-key--trojan, .tl__item--trojan { --c: var(--cat-trojan); }
.tl-key--worm, .tl__item--worm { --c: var(--cat-worm); }
.tl-key--ransomware, .tl__item--ransomware { --c: var(--cat-ransomware); }
.tl-key--scam, .tl__item--scam { --c: var(--cat-scam); }
.tl-key--context, .tl__item--context { --c: #9aa3b5; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 150px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.3), rgba(255,255,255,.05)); }
.tl__item { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 0 34px; margin-bottom: 18px; }
.tl__item::before { content: ""; position: absolute; left: 144px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(7,11,22,.9), 0 0 16px var(--c); }
.tl__date { padding-top: 22px; text-align: right; padding-right: 12px; font: 500 13px/1.3 var(--mono); color: var(--text-soft); letter-spacing: .03em; }
.tl__card { display: block; padding: 18px 22px; border-radius: 20px; text-decoration: none; color: var(--text); transition: transform .3s var(--ease), box-shadow .3s; }
.tl__card:hover { transform: translateX(4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 10px 30px -12px var(--c); }
.tl__card strong { display: block; margin: 10px 0 6px; font: 500 20px/1.3 var(--font-display); }
.tl__card p { margin: 0; color: var(--text-soft); font-size: 15.5px; }
.tl__item--context .tl__card strong { font-size: 17px; }
@media (max-width: 700px) {
  .tl::before { left: 6px; }
  .tl__item { grid-template-columns: 1fr; padding-left: 30px; }
  .tl__item::before { left: 0; top: 4px; }
  .tl__date { padding: 0 0 6px; text-align: left; }
}

/* ---------- File checker ---------- */
.fc { padding: 22px; }
.fc-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fc-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; text-align: center; cursor: pointer;
  border: 2px dashed rgba(120,255,170,.35); border-radius: 22px; background: rgba(120,255,170,.04); transition: background-color .2s, border-color .2s; }
.fc-drop:hover, .fc-drop.is-over { background: rgba(120,255,170,.1); border-color: rgba(120,255,170,.7); }
.fc-drop:focus-within { outline: 2px solid rgba(120,255,170,.8); outline-offset: 3px; }
.fc-drop__icon { width: 54px; height: 54px; color: #78ffaa; margin-bottom: 4px; }
.fc-drop strong { font: 500 19px/1.3 var(--font-display); }
.fc-drop span { font-size: 14px; color: var(--text-soft); }
.fc-result { margin-top: 22px; }
.fc-busy { display: flex; align-items: center; gap: 12px; color: var(--text-soft); }
.fc-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #78ffaa; animation: fc-spin .8s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fc-label { display: block; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.fc-name { font: 500 20px/1.3 var(--font-display); overflow-wrap: anywhere; }
.fc-name mark { background: #f87171; color: #fff; border-radius: 4px; padding: 0 4px; }
.fc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-meta span { font: 500 12.5px/1 var(--mono); color: var(--text-soft); padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.fc-findings { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.fc-f { display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid; }
.fc-f strong { display: block; margin-bottom: 3px; }
.fc-f p { margin: 0; color: var(--text-soft); font-size: 15px; }
.fc-f__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--font); color: #0b1020; }
.fc-f--danger { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.45); } .fc-f--danger .fc-f__icon { background: #f87171; }
.fc-f--warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.4); } .fc-f--warn .fc-f__icon { background: #fbbf24; }
.fc-f--info { background: rgba(96,165,250,.08); border-color: rgba(96,165,250,.4); } .fc-f--info .fc-f__icon { background: #60a5fa; }
.fc-f--ok { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.4); } .fc-f--ok .fc-f__icon { background: #34d399; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.fc-sub { margin: 24px 0 6px; font: 500 18px/1.3 var(--font-display); }
.fc-note { margin: 0 0 12px; font-size: 14px; color: var(--text-dim); }
.fc-table td:first-child { width: 150px; }
.fc-hash-val { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.fc-copy { margin-left: 8px; font: 500 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 9px; cursor: pointer; }
.fc-copy:hover { color: #fff; }
.fc-hash { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.fc-hash label { display: block; margin-bottom: 8px; font-size: 14.5px; color: var(--text-soft); }
.fc-hash__row { display: flex; gap: 10px; flex-wrap: wrap; }
.fc-hash__row input { flex: 1 1 260px; min-width: 0; font: 14px/1.2 var(--mono); color: var(--text); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 11px 14px; }
.fc-hash__row input:focus { outline: 2px solid rgba(120,255,170,.7); outline-offset: 1px; }
.fc-hash__msg { margin: 8px 0 0; min-height: 1em; font-size: 13.5px; color: var(--text-soft); }
@media (max-width: 600px) { .fc-table td:first-child { width: auto; } }
.fc .btn { padding: 12px 20px; font-size: 15px; cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.fc .btn:hover { background: rgba(255,255,255,.14); }
.fc .btn--primary { color: #fff; background: rgba(120,255,170,.16); border-color: rgba(120,255,170,.55); }
.fc .btn--primary:hover { background: rgba(120,255,170,.26); }

/* ---------- Home hero, in layers ----------
   Three planes cut from one photo: the sky at the back, the WinLuisPlus wordmark in the middle,
   and the mountain (a cut-out of the same photo) in front. Both images share one box, so they
   line up perfectly at rest. Scrolling moves the back slower than the front, so the wordmark
   sinks behind the peak. Scroll and pointer only set two numbers; nothing runs while idle. */
.hero--layered {
  --ph: max(100svh, 56.25vw);              /* plane height: the photo is 16:9 (3840x2160) */
  --fs: clamp(40px, 12vw, 128px);          /* wordmark size */
  --y: 0; --mx: 0; --my: 0;
  display: block; padding: 0; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh; background: #1a0d10;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent);
}
.hero__plane {
  position: absolute; top: 0; left: 50%;
  height: var(--ph); width: calc(var(--ph) * 2048 / 1152);
  margin-left: calc(var(--ph) * -1024 / 1152);
  pointer-events: none; scale: 1.016;     /* a little overscan so leaning never shows an edge */
}
.hero__plane img { display: block; width: 100%; height: 100%; filter: saturate(108%) brightness(.86); }
.hero__plane--back { z-index: 0; transform: translateY(calc(var(--y) * .8px)); translate: calc(var(--mx) * -10px) calc(var(--my) * -6px); }
.hero__plane--front { z-index: 2; translate: calc(var(--mx) * 6px) calc(var(--my) * 3px); }
.hero--layered .hero__mark {
  position: absolute; z-index: 1; left: 0; right: 0; margin: 0;
  /* sits in the sky with its feet just above the summit (26.4% down the photo) */
  top: max(calc(var(--nav-h) + 22px), calc(var(--ph) * .264 - var(--fs) * 1.08));
  font-size: var(--fs); line-height: 1; text-align: center; white-space: nowrap;
  filter: drop-shadow(0 4px 18px rgba(20, 6, 8, .55));
  transform: translateY(calc(var(--y) * .7px)); translate: calc(var(--mx) * -4px) calc(var(--my) * -2px);
}
.hero__scrim {
  position: absolute; inset: auto 0 0; height: 62%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 22, 0) 0%, rgba(7, 11, 22, .5) 45%, rgba(7, 11, 22, .92) 100%);
}
.hero__copy {
  position: absolute; z-index: 4; left: 16px; right: 16px; bottom: max(56px, 9svh);
  text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.hero__copy .hero__sub { color: #e9edf6; }
.hero--layered .hero__plane, .hero--layered .hero__mark { transition: translate .6s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .hero--layered { --y: 0 !important; --mx: 0 !important; --my: 0 !important; }
}

/* ---------- Type and browser details ---------- */
html { accent-color: var(--accent); caret-color: var(--accent-2); scrollbar-color: rgba(127, 178, 255, .35) #070b16; }
h1, h2, h3, .h-sm, .page-title { text-wrap: balance; }
.prose p, .prose li, .news-card p, .hero__sub { text-wrap: pretty; }
.hero h1.page-title { letter-spacing: -.02em; }
.h-sm { font-weight: 400; letter-spacing: -.01em; }
.prose h2, .prose .h-sm { margin-top: 1.5em; }            /* more room above a heading than below it */
.prose > h2:first-child, .prose > .h-sm:first-child { margin-top: 0; }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }
time, .mal-year, .fc-meta, .tlx-clock__year { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .glass:focus-visible { outline-offset: 4px; }
@media (max-width: 600px) {
  /* long article titles were wrapping to five lines on a phone */
  .hero h1.page-title[style] { font-size: clamp(26px, 7.6vw, 32px) !important; line-height: 1.18; }
}

/* =====================================================================================
   v2 "After dark": the site goes from the sunset on the home page into a night sky.
   Everything here is still: stars are one small tile, edges are gradients, no loops.
   ===================================================================================== */
:root { --bg: #050811; --edge: rgba(170, 200, 255, .6); --ink-hi: #f4f7ff; --ink-lo: #a9b8dc; }

/* the night sky: a starfield over the darkened photo on every page that has a landscape behind it */
.backdrop:has(> .backdrop__img[style*="home-bg"])::before,
.backdrop:has(> .backdrop__img[style*="tut-bg"])::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url('/assets/img/stars.webp') 0 0 / 640px 640px repeat;
  opacity: .75; mix-blend-mode: screen;
  /* stars belong in the sky, not on the mountains in the lower half of the photos */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 72%);
}

/* display type: Lexend, heavier, lit from above like the snow on the peak */
.h-display, .hero h1.page-title, .intro-grid .col-title, .h-sm, .welcome__title {
  font-family: var(--font-display); letter-spacing: -.025em;
}
.h-display { font-weight: 500; font-size: clamp(32px, 4.2vw, 50px); }
.hero h1.page-title { font-weight: 500; text-shadow: none; filter: drop-shadow(0 8px 30px rgba(0,0,0,.55)); }
.h-display, .hero h1.page-title {
  background: linear-gradient(180deg, var(--ink-hi) 35%, var(--ink-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h-display.c-blue { background-image: linear-gradient(180deg, #d9e7ff 20%, #6f9dff 100%); }
.intro-grid .col-title { font-weight: 500; font-size: clamp(26px, 2.3vw, 32px); margin-bottom: 18px; }
.h-sm { font-weight: 500; }
.welcome__title { font-size: clamp(28px, 2.8vw, 36px); }

/* surfaces: a thin light along the top edge, like a ridge catching the last sun */
.glass.reveal::before {
  display: block; content: ""; position: absolute; inset: -1px 12% auto; height: 1px; padding: 0;
  border-radius: 0; -webkit-mask: none; mask: none; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}
.mal-card, .tl__card { --edge: color-mix(in srgb, var(--c) 80%, #fff); }
.mal-card.glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 44px -22px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.25); }
.glass.reveal { border-radius: 22px; }
.section { padding: 44px 0; }

/* home: the welcome gets the wide column, the two videos stack beside it at a useful size */
@media (min-width: 981px) {
  .intro-grid { grid-template-columns: 1.1fr 1fr; grid-template-areas: "w a" "w b"; gap: 24px; }
  .intro-grid > :nth-child(1) { grid-area: a; }
  .intro-grid > :nth-child(2) { grid-area: w; }
  .intro-grid > :nth-child(3) { grid-area: b; }
  .intro-grid .welcome { text-align: left; padding: 40px 44px; }
  .intro-grid .welcome .links-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.links-list a { font-weight: 500; }
.hw-list li { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); }

/* ---------- footer: the same mountain, at night ---------- */
.site-footer { position: relative; padding: 0 0 28px; margin-top: 40px; overflow: hidden; }
.footer-horizon { position: relative; height: clamp(200px, 24vw, 360px); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.footer-horizon img { position: absolute; left: 50%; top: calc(40px - max(100vw, 900px) * .1485); width: max(100vw, 900px); max-width: none; height: auto; translate: -50% 0;
  filter: brightness(.6) saturate(.5) contrast(1.05); }
.footer-horizon::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, transparent, #070b16); }
.footer-inner { position: relative; margin-top: -1px; background: #070b16; }
.site-footer::before { content: ""; position: absolute; inset: clamp(200px, 24vw, 360px) 0 0; background: #070b16; z-index: -1; }
.footer-top { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 40px; padding: 8px 0 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-mark { font: 500 clamp(30px, 3.4vw, 42px)/1 var(--font-pixel); text-decoration: none; letter-spacing: .01em; }
.footer-brand p { color: var(--text-soft); max-width: 36ch; margin: 14px 0 18px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social .btn { padding: 10px 16px; font-size: 15px; gap: 8px; }
.footer-social svg { width: 18px; height: 18px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-cols h2 { font: 600 12.5px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 6px 0 14px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; color: var(--text-dim); }
.footer-cols a { color: var(--text-soft); text-decoration: none; overflow-wrap: anywhere; }
.footer-cols a:hover { color: var(--text); text-decoration: underline; }
.footer-disclaimer { font-size: 13.5px; line-height: 1.7; color: var(--text-dim); margin: 22px 0 0; max-width: 110ch; }
.footer-disclaimer strong { color: var(--text-soft); font-weight: 500; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 18px; font-size: 13.5px; color: var(--text-dim); }
.footer-bottom p { margin: 0; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 861px) { #latest .video-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- snow on the peak ----------
   Two tiles of flakes slide down forever. Only transform is animated, so the graphics card just moves
   two pictures; nothing is redrawn. It pauses as soon as the hero leaves the screen, and it's off for
   anyone who asked their system for less motion. */
.hero__snow { position: absolute; left: -20%; right: -20%; top: -512px; bottom: -120px; pointer-events: none; will-change: transform; }
.hero__snow--far { z-index: 1; background: url('/assets/img/snow-far.webp') 0 0 / 512px 512px repeat; opacity: .75; animation: wlp-snow 26s linear infinite; }
.hero__snow--near { z-index: 3; top: -768px; background: url('/assets/img/snow-near.webp') 0 0 / 768px 768px repeat; opacity: .8; animation: wlp-snow-near 15s linear infinite; }
/* a loop must move exactly one tile, so the slant comes from rotating the layer, not from sideways drift */
@keyframes wlp-snow { from { transform: rotate(7deg) translate3d(0, 0, 0); } to { transform: rotate(7deg) translate3d(0, 512px, 0); } }
@keyframes wlp-snow-near { from { transform: rotate(11deg) translate3d(0, 0, 0); } to { transform: rotate(11deg) translate3d(0, 768px, 0); } }
.hero--layered.is-away .hero__snow { animation-play-state: paused; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .hero__snow { animation: none; transform: rotate(7deg); } }

/* ---------- "This site in your language" bar (like apple.com) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lang-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: #1d1d1f; color: #f5f5f7;
  border-bottom: 1px solid rgba(255,255,255,.08); font: 400 14px/1.4 var(--font); }
.lang-bar__inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; justify-content: space-between; }
.lang-bar__text { margin: 0; flex: 1 1 320px; color: #e8e8ed; }
.lang-bar__actions { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; }
.lang-bar__pick select {
  appearance: none; -webkit-appearance: none; min-width: 200px; height: 40px; padding: 0 40px 0 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); color: #f5f5f7; font: inherit; font-size: 16px; cursor: pointer;
  background: #2c2c2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d1d6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.lang-bar__go { height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: #f5f5f7; color: #1d1d1f; font: 500 15px/1 var(--font); cursor: pointer; }
.lang-bar__go:hover { background: #fff; }
.lang-bar__x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #d1d1d6; cursor: pointer; }
.lang-bar__x:hover { background: rgba(255,255,255,.1); color: #fff; }
.lang-bar__x svg { width: 20px; height: 20px; }
html.has-lang-bar .nav-wrap { top: calc(14px + var(--lang-h, 0px)); }
html.has-lang-bar .hero--layered .hero__mark { margin-top: var(--lang-h, 0px); }
@media (max-width: 600px) {
  .lang-bar__inner { padding: 10px 12px; gap: 10px; }
  .lang-bar__text { flex-basis: 100%; font-size: 13.5px; }
  .lang-bar__actions { width: 100%; }
  .lang-bar__pick { flex: 1; }
  .lang-bar__pick select { min-width: 0; width: 100%; }
}

/* language switch in the footer */
.lang-switch a { color: var(--text-soft); }
.lang-switch a[aria-current] { color: var(--text); text-decoration: none; font-weight: 500; }
html.has-lang-bar .hero:not(.hero--layered) { padding-top: calc(var(--nav-h) + 40px + var(--lang-h, 0px)); }

/* ---------- the little "scroll down" arrow under the home hero buttons ----------
   A small glass button that bobs gently. Only transform moves, it stops while the hero is off screen,
   and it stays still for anyone who asked their system for less motion. */
.hero__copy .scroll-cue {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-top: 26px;
  border-radius: 50%; color: var(--text); text-decoration: none;
  animation: wlp-cue-bob 1.8s ease-in-out infinite;
}
.hero__copy .scroll-cue svg { width: 22px; height: 22px; }
@keyframes wlp-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.hero--layered.is-away .scroll-cue { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__copy .scroll-cue { animation: none; } }