/* =========================================
   1) Design Tokens / Root Variables
   ========================================= */
:root {
  --bg:#0b0d10;
  --card:#12151a;
  --section-bg:#12151a;         /* used by some blocks; safe default */
  --text:#e9eef5;
  --muted:#a9b3c0;
  --accent:#1f2835;
  --link:#8bb8ff;
  --border:#202734;
  --borderBrighter:#2F3643;
  --chip:#1b2230;
  --radius:14px;
  --container:1100px;

  /* spacing */
  --header-gap:24px;
  --title-gap:12px;

  /* promo banner sizing */
  --promo-badge-w-mobile:130px;
  --promo-badge-w-desktop:160px;
}

/* =========================================
   2) Base / Resets
   ========================================= */
* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  padding:0;
}

body {
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Inter,
       "Helvetica Neue", Arial, "Noto Sans",
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

img {
  max-width:100%;
  height:auto;
}

/* =========================================
   3) Layout / Container
   ========================================= */
.container {
  max-width:var(--container);
  width:100%;
  margin-left:auto;
  margin-right:auto;
  margin-inline:auto;
  padding:20px;
}

/* Header spacing */
header.container > * + * {
  margin-top:var(--header-gap);
}

/* =========================================
   4) Header / Language Switcher
   ========================================= */
.site-title {
  margin:0;
  font-size:clamp(26px, 4vw, 40px);
  line-height:1.2;
  letter-spacing:0.2px;
  font-weight:800;
}

.site-title .line {
  display:block;
}

.site-title .line + .line {
  margin-top:var(--title-gap);
}

.lang-switcher {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}

.chip {
  display:inline-block;
  padding:8px 12px;
  background:var(--chip);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
}

.chip[aria-current="page"] {
  outline:2px solid var(--link);
  outline-offset:2px;
}

/* =========================================
   5) Generic "Card" Block
   (Used by various sections outside thing.css)
   ========================================= */
.block {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.block + .block {
  margin-top:12px;
}

.block h2 {
  margin:0 0 10px 0;
  font-size:20px;
}

.block .pct {
  font-weight:600;
  color:var(--muted);
  font-size:14px;
  margin-left:8px;
}

.block ul {
  margin:0;
  padding-left:18px;
}

.block ul.tight li {
  margin:2px 0;
}

.block ul li a {
  color:var(--text);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:currentColor;
}

.block ul li a:visited {
  color:var(--text);
}

.block ul li a:hover {
  opacity:.95;
}

.block ul li a:focus-visible {
  outline:2px solid var(--link);
  outline-offset:3px;
  border-radius:6px;
}

/* WIP inline centering */
.wip-block .wip-text {
  text-align:center;
  margin:0.75rem 0;
}

/* =========================================
   6) Promo Banner
   ========================================= */
.promo-row {
  margin-top:24px;
}

.promo-card {
  display:flex;
  flex-direction:column;          /* mobile first */
  align-items:flex-start;
  gap:12px;
}

.promo-card.with-screens {
  gap:16px;
}

.app-link {
  display:inline-block;
}

.app-link:focus-visible {
  outline:2px solid var(--link);
  outline-offset:4px;
  border-radius:12px;
}

.app-badge {
  width:var(--promo-badge-w-mobile);
  display:block;
  border-radius:10px;
  border:1px solid var(--border);
}

.promo-text { /* grows at desktop via media query below */ }

.promo-title {
  margin:0;
  font-size:20px;
}

.promo-sub {
  margin:4px 0 0 0;
  color:var(--muted);
}

.promo-teaser {
  margin:6px 0 0 0;
  color:var(--muted);
  font-style:italic;
}

.promo-title a.promo-title-link {
  color:var(--text);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:currentColor;
}

.promo-title a.promo-title-link:visited {
  color:var(--text);
}

.promo-title a.promo-title-link:hover {
  opacity:.95;
}

.promo-title a.promo-title-link:focus-visible {
  outline:2px solid var(--link);
  outline-offset:3px;
  border-radius:6px;
}

.promo-screens {
  display:flex;
  gap:8px;
  margin-left:auto;               /* push right at desktop */
}

.promo-thumb {
  height:100px;
  width:auto;
  border-radius:10px;
  border:1px solid var(--border);
  cursor:zoom-in;
  display:block;
}

@media (min-width:700px) {
  .promo-card {
    flex-direction:row;           /* row at ≥700px */
    align-items:center;
    gap:16px;
  }
  .promo-text {
    flex:1;
  }
  .app-badge {
    width:var(--promo-badge-w-desktop);
  }
}

@media (max-width:699px) {
  .promo-screens {
    margin-left:0;
  }
}

/* =========================================
   7) Footer
   ========================================= */
.site-footer {
  margin:26px 1 40px 0;
  padding-bottom:35px;
  display:block;
}

.site-footer .fine {
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.fine a {
  color:var(--link);
  text-decoration:underline;
}

.footer-madeby {
  margin:8px 0 8px 0;
  color:var(--muted);
  font-size:13px;
}

.footer-madeby a {
  color:var(--link);
  text-decoration:underline;
}

/* =========================================
   8) Lightbox
   ========================================= */
.lightbox {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.lightbox.open {
  display:flex;
}

.lightbox img {
  max-width:92vw;
  max-height:88vh;
  border-radius:10px;
  border:2px solid var(--borderBrighter);
  background:var(--card); /* visible where image is transparent */
}

.lightbox-close {
  position:absolute;
  top:16px;
  right:16px;
  background:var(--chip);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}

.lightbox-close:focus-visible {
  outline:2px solid var(--link);
  outline-offset:2px;
}

/* =========================================
   9) Link Banner (icon + text small row)
   ========================================= */
.link-banner {
  display:flex;
  align-items:center;
  gap:1rem;
}

.link-banner__text {
  margin:0;
}

.link-banner__icon {
  width:36px;
  height:36px;
  flex:0 0 36px;
}

.block + .layout {
  margin-top:12px;
}

/* =========================================
   10) Video Embed (16:9, card look)
   ========================================= */
.video-embed {
  aspect-ratio:16 / 9;
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.video-embed iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video-desc {
  color:var(--muted);
}

/* =========================================
   11) Exit-Intent Modal
   ========================================= */
.modal-overlay[hidden] {
  display:none;
}

.modal-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,0.5);
  display:grid;
  place-items:center;
}

/* Positioning context for the close button */
.modal-card {
  position:relative;
  width:min(92vw, 520px);
  max-width:520px;
}

/* Larger on big screens */
@media (min-width:1024px) {
  .modal-card {
    width:min(92vw, 760px);
    max-width:760px;
    padding:20px; /* extra breathing room */
  }
}

/* The actual panel with themeable background */
.modal-panel {
  /* use a distinct modal bg if provided; fallback to card */
  --section-bg:var(--modal-bg, var(--card));
  background:var(--section-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

/* Close button anchored to card corner */
.modal-close {
  position:absolute;
  top:-16px;
  right:-16px;
  z-index:1;
  background:var(--chip);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:700;
}

.modal-close:focus-visible {
  outline:2px solid var(--link);
  outline-offset:2px;
}

/* 3-row content */
.modal-title {
  margin:0 0 0.75rem 0;
  text-align:center;
}

.modal-sub {
  margin:0 0 1rem 0;
  text-align:center;
}

.modal-links {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.modal-overlay .social-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  background:var(--chip);
}

.modal-overlay .social-link:hover {
  border-color:var(--borderBrighter);
}

.modal-overlay .social-icon {
  width:24px;
  height:24px;
  border-radius:6px;
  display:block;
}

/* Modal color variants */
.modal-panel--slate  { --modal-bg:#1e293b; }
.modal-panel--teal   { --modal-bg:#0f766e; }
.modal-panel--violet { --modal-bg:#7c3aed; }