/* ============================================================================
   Personal IT Guy - marketing site
   A dark, professional "cyber" theme. RTL/LTR aware via logical properties.
   ============================================================================ */

:root {
    --bg:        #07070e;
    --bg-alt:    #0b0b16;
    --surface:   rgba(20, 20, 36, 0.72);
    --surface-2: rgba(255, 255, 255, 0.04);
    --border:    rgba(255, 255, 255, 0.09);
    --border-lit:rgba(108, 99, 255, 0.4);
    --text:      #eef0ff;
    --muted:     rgba(200, 204, 235, 0.66);
    /* 0.58 is the point where small --faint text still clears 4.5:1 on --bg
       (IS 5568 / WCAG AA). Do not lower it. */
    --faint:     rgba(200, 204, 235, 0.58);
    --accent:    #6c63ff;
    --accent-2:  #22d3ee;
    --accent-3:  #a78bfa;
    --danger:    #f87171;
    --radius:    16px;
    --radius-sm: 11px;
    --maxw:      1160px;
    --shadow:    0 24px 70px rgba(0, 0, 0, 0.5);
    --font:      'Heebo', system-ui, -apple-system, sans-serif;
    --font-head: 'Rubik', 'Heebo', system-ui, sans-serif;
}

/* ── Light theme (toggled from the nav; persisted in localStorage) ── */
:root[data-theme="light"] {
    --bg:        #f3f5fc;
    --bg-alt:    #e9edf8;
    --surface:   rgba(255, 255, 255, 0.92);
    --surface-2: rgba(20, 25, 60, 0.045);
    --border:    rgba(20, 25, 60, 0.12);
    --border-lit:rgba(108, 99, 255, 0.45);
    --text:      #14162b;
    --muted:     rgba(38, 42, 72, 0.72);
    /* Same 4.5:1 floor as the dark theme - see the note there. */
    --faint:     rgba(38, 42, 72, 0.66);
    --shadow:    0 22px 60px rgba(60, 70, 130, 0.18);
}
/* Component overrides where colors were hardcoded for the dark theme */
:root[data-theme="light"] .bg { background: radial-gradient(ellipse 100% 80% at 50% -10%, #e7ecfb 0%, var(--bg) 55%, #dfe4f4 100%); }
:root[data-theme="light"] .bg__grid { background-image:
    linear-gradient(rgba(108, 99, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 99, 255, 0.06) 1px, transparent 1px); }
:root[data-theme="light"] .bg__glow--1 { background: radial-gradient(circle, rgba(108, 99, 255, 0.14), transparent 65%); }
:root[data-theme="light"] .bg__glow--2 { background: radial-gradient(circle, rgba(34, 211, 238, 0.12), transparent 65%); }
:root[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.75); }
:root[data-theme="light"] .hero__title { background: linear-gradient(120deg, #1b1d3a 20%, #4b45c7 60%, #1a8fd8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .footer { background: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .lang-switch__flag, :root[data-theme="light"] .cms__langpill-btn img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
:root[data-theme="light"] .btn--ghost { color: var(--text); }
:root[data-theme="light"] .cta__inner { background: radial-gradient(ellipse at 50% 0%, rgba(108, 99, 255, 0.16), var(--surface) 70%); }
:root[data-theme="light"] .lmodal__card, :root[data-theme="light"] .wiz-terms__card { background: rgba(255, 255, 255, 0.98); }
:root[data-theme="light"] .lmodal__body { scrollbar-color: rgba(108, 99, 255, 0.7) rgba(20, 25, 60, 0.08); }
:root[data-theme="light"] .lmodal__body::-webkit-scrollbar-track { background: rgba(20, 25, 60, 0.08); }
:root[data-theme="light"] .cookiebar__inner { background: rgba(255, 255, 255, 0.97); }
:root[data-theme="light"] .cookiebar__link { color: #4b45c7; }
/* Accent text on the light theme: #a78bfa is a dark-theme colour and only
   reaches ~2.1:1 over a pale background. These are the places it is used as
   *text* (not as a glow or a border), so they get a darker violet that clears
   4.5:1, and the gradient headline numbers get a darker pair for 3:1. */
:root[data-theme="light"] .hero__badge,
:root[data-theme="light"] .cta__ver,
:root[data-theme="light"] .dl-hero__badge,
:root[data-theme="light"] .dl-hero__notes-label { color: #5b32c9; }
:root[data-theme="light"] .stat__num,
:root[data-theme="light"] .dl-hero__ver { background-image: linear-gradient(135deg, #5b32c9, #0e7490); }

/* Theme toggle button.
   Note: nothing in the nav transitions `color`. A colour that comes from a
   custom property does not always re-run its transition when the theme switches
   var(--muted) underneath it, which left the toggle and the language switch
   showing dark-theme grey on the light background until the next reload. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border);
    color: var(--muted); font-size: 16px; transition: border-color 0.15s; }
.theme-toggle:hover { color: var(--text); border-color: var(--border-lit); }

/* Floating "back to top" button (position + on/off from the admin) */
.fab { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border-lit); color: var(--text); box-shadow: var(--shadow), 0 0 26px rgba(108, 99, 255, 0.15);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.15s; }
.fab:hover { transform: translateY(-2px); color: var(--accent-3); }
.fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fab--top { position: fixed; z-index: 8000; animation: fab-in 0.25s ease; }
.fab--top[hidden] { display: none; }
@keyframes fab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fab--top.fab--bottom-end   { bottom: 20px; inset-inline-end: 20px; }
.fab--top.fab--bottom-start { bottom: 20px; inset-inline-start: 20px; }
.fab--top.fab--top-end      { top: 82px; inset-inline-end: 20px; }
.fab--top.fab--top-start    { top: 82px; inset-inline-start: 20px; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Global styled scrollbars (never the plain browser ones) */
* { scrollbar-width: thin; scrollbar-color: rgba(108, 99, 255, 0.5) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
    background-color: rgba(108, 99, 255, 0.45); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(108, 99, 255, 0.75); }
::-webkit-scrollbar-corner { background: transparent; }

html { scroll-behavior: smooth; }

/* ── Keyboard accessibility (IS 5568 / WCAG AA) ──────────────────────────────
   One visible focus ring for everything that can hold focus. :where() keeps the
   specificity at zero, so the few components that draw their own ring still win.
   The ring clears 3:1 against both themes' backgrounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 5px;
}
/* <main> only takes focus so the skip link can land on it - no ring needed. */
main:focus, main:focus-visible { outline: none; }

/* "Skip to main content": off-screen until it is focused, then the first thing
   on the page. Sits above the fixed header. */
.skip-link {
    position: fixed; inset-block-start: -100px; inset-inline-start: 16px; z-index: 9999;
    padding: 12px 20px; border-radius: 0 0 12px 12px;
    background: #4a42d4; color: #fff; font-weight: 700; font-size: 15px;
    text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: inset-block-start 0.18s ease;
}
.skip-link:focus { inset-block-start: 0; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ── Animated cyber background ── */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
    radial-gradient(ellipse 100% 80% at 50% -10%, #14142e 0%, var(--bg) 55%, #05050b 100%); }
.bg__grid {
    position: absolute; inset: -40%;
    background-image:
        linear-gradient(rgba(108, 99, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 99, 255, 0.07) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 72%);
    animation: grid-drift 30s linear infinite;
}
@keyframes grid-drift { from { transform: translateY(0); } to { transform: translateY(52px); } }
.bg__glow { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.7; }
.bg__glow--1 { width: 620px; height: 620px; top: -12%; inset-inline-start: 6%;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.18), transparent 65%);
    animation: glow-a 20s ease-in-out infinite alternate; }
.bg__glow--2 { width: 540px; height: 540px; bottom: -14%; inset-inline-end: 4%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.13), transparent 65%);
    animation: glow-b 24s ease-in-out infinite alternate; }
@keyframes glow-a { to { transform: translate(90px, 70px); } }
@keyframes glow-b { to { transform: translate(-80px, -60px); } }
.bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--radius-sm); border: 1px solid transparent;
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform 0.06s ease, opacity 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; box-shadow: none; filter: saturate(0.6); }
.btn--primary { background: linear-gradient(135deg, #5d54f0, #4a42d4); color: #fff;
    box-shadow: 0 10px 30px rgba(108, 99, 255, 0.4); }
.btn--primary:hover { opacity: 0.93; }
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); }
.btn--danger { background: rgba(248, 113, 113, 0.14); color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.btn--danger:hover { background: rgba(248, 113, 113, 0.22); }
.btn--sm { padding: 8px 16px; font-size: 13.5px; }
.btn--lg { padding: 15px 32px; font-size: 16px; }
.btn--block { width: 100%; }
/* Download button with a clean inline icon */
.btn--dl { gap: 9px; }
.btn--dl .ico-dl { flex-shrink: 0; }
/* Directional arrow inside a button. It is a flex item, not a character in the
   label, so the side is decided by writing direction rather than by the bidi
   algorithm - which moved it and left it pointing the wrong way. */
.btn__arw { flex-shrink: 0; font-size: 1.05em; line-height: 1; opacity: .8; }
/* "See features" button with bobbing side chevrons */
.btn--seefeat { gap: 10px; }
.seefeat__chev { display: inline-flex; will-change: transform; animation: chev-bob 1.05s ease-in-out infinite; }
.seefeat__chev:last-child { animation-delay: 0.18s; }
@keyframes chev-bob { 0% { transform: translateY(-4px); opacity: 0.6; } 50% { transform: translateY(5px); opacity: 1; } 100% { transform: translateY(-4px); opacity: 0.6; } }

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    background: rgba(7, 7, 14, 0.7); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.nav__logo { width: 40px; height: 40px; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 10px rgba(108, 99, 255, 0.45)); }
.nav__links { display: flex; gap: 26px; }
.nav__links a { color: var(--muted); font-size: 14.5px; font-weight: 600; transition: color 0.15s; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
    border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--muted); transition: border-color 0.15s; }
.lang-switch:hover { color: var(--text); border-color: var(--border-lit); }
.lang-switch__flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); display: block; }

/* ── Hero ── */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
    padding-block: clamp(24px, 4.5vw, 60px); }
.hero__logo { width: 260px; max-width: 72%; height: auto; display: block; margin-bottom: 22px;
    filter: drop-shadow(0 6px 26px rgba(108, 99, 255, 0.4)); }
@media (max-width: 900px) { .hero__logo { margin-inline: auto; } }
.hero__badge { display: inline-block; padding: 7px 15px; border-radius: 999px;
    background: rgba(108, 99, 255, 0.14); border: 1px solid var(--border-lit);
    color: var(--accent-3); font-size: 13px; font-weight: 700; margin-bottom: 22px; }
.nav__brand, .hero__title, .section__title, .card__title, .svc__title, .cta__title,
.shot__cap h3, .step__title, .stat__num, .legal-page__title { font-family: var(--font-head); }

.hero__title { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.1; font-weight: 900;
    letter-spacing: -0.5px; margin-bottom: 20px;
    background: linear-gradient(120deg, #fff 20%, #c9c6ff 60%, #8fd8ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { font-size: clamp(15px, 1.9vw, 19px); color: var(--muted); max-width: 40ch; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__stats { display: flex; gap: 34px; flex-wrap: wrap; }
.stat__num { font-size: 30px; font-weight: 900;
    background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { font-size: 13px; color: var(--faint); font-weight: 600; }

/* Browser-ish mock frame */
.mock, .shot__frame { position: relative; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow), 0 0 60px rgba(108, 99, 255, 0.1); overflow: hidden; }
.mock { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform 0.5s; }
.hero__visual:hover .mock { transform: perspective(1400px) rotateY(0) rotateX(0); }
html[dir="rtl"] .mock { transform: perspective(1400px) rotateY(6deg) rotateX(2deg); }
html[dir="rtl"] .hero__visual:hover .mock { transform: perspective(1400px) rotateY(0) rotateX(0); }
.mock__bar, .shot__bar { display: flex; gap: 7px; padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid var(--border); }
.mock__bar span, .shot__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.mock__bar span:first-child { background: #ff5f57; }
.mock__bar span:nth-child(2) { background: #febc2e; }
.mock__bar span:nth-child(3) { background: #28c840; }
.mock img, .shot img { width: 100%; height: auto; }
/* Inline illustrations (SVG embedded so they inherit the page's Google font).
   Force LTR base direction: the mockups are laid out with LTR x-coordinates and
   text-anchor, so inheriting the page's RTL direction would flip every anchor
   and shove the text out of its boxes. */
.illus { display: block; direction: ltr; }
.illus svg, .illus svg text, .illus svg tspan { direction: ltr; }
.illus svg { display: block; width: 100%; height: auto; }

/* ── Sections ── */
.section { padding-block: clamp(38px, 5vw, 64px); }
.section--alt { position: relative; background: linear-gradient(180deg, transparent, var(--bg-alt) 12%, var(--bg-alt) 88%, transparent); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); }
.section__title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; letter-spacing: -0.4px; margin-bottom: 14px; }
.section__sub { font-size: 16px; color: var(--muted); }
/* A footnote, not a statement: it says the screens are drawings, and it is meant to
   be found rather than read. Set apart by its own space so it belongs to the page
   rather than to the cards above it. */
.section__disclaimer { margin-top: clamp(28px, 4vw, 44px); text-align: center;
    font-size: 12.5px; color: var(--muted); opacity: 0.62; }

.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Feature cards ── */
.card { padding: 28px 24px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-5px); border-color: var(--border-lit);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 30px rgba(108, 99, 255, 0.14); }
.card__icon { font-size: 34px; margin-bottom: 16px; line-height: 1; }

/* ── Drawn icons ──
   A tile rather than a loose glyph: the drawing needs something to sit in, or it
   floats in the corner of the card at whatever weight the stroke happens to be. The
   tile carries the accent colour and the glow the emoji used to get from a filter. */
.ico { display: inline-flex; align-items: center; justify-content: center;
    padding: 9px;
    border-radius: 15px; color: var(--accent-3);
    border: 1px solid var(--border-lit);
    background: linear-gradient(140deg, rgba(108, 99, 255, 0.20), rgba(34, 211, 238, 0.08));
    box-shadow: 0 10px 26px rgba(108, 99, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.ico svg { display: block; }

/* The small line glyphs: they belong to the line of text they sit in, so they take
   its colour and sit on its baseline rather than hanging above it. */
.gly { vertical-align: -0.18em; flex-shrink: 0; }
.gly--win { vertical-align: -0.14em; }
.dl-hero__badge .gly, .dl-trust__item .gly, .dl-chip .gly { color: inherit; opacity: .9; }
/* A drawing needs more air beside text than an emoji did: the emoji carried its own
   padding inside the glyph, a drawn mark ends where its ink ends. The chips already
   space their contents with a gap; these lines are plain text, so the mark spaces
   itself - logically, so it works the same way in both directions. */
.dl-hero__os, .dl-hero__badge, .dl-trust__item { display: inline-flex; align-items: center; gap: 9px; }
.dl-title .gly { margin-inline-end: 10px; }
.dl-install__step-title .gly { margin-inline-end: 7px; }
.dl-title .gly { vertical-align: -0.12em; color: var(--accent-3); }
.dl-install__step-title .gly { color: var(--accent-3); }
:root[data-theme="light"] .ico { color: #4a42d4;
    background: linear-gradient(140deg, rgba(108, 99, 255, 0.16), rgba(34, 211, 238, 0.10));
    box-shadow: 0 8px 20px rgba(108, 99, 255, 0.16); }
/* The card lifts, and its icon lifts a little more - the same movement the rest of
   the card already has, so nothing new is introduced, only carried through. */
.card:hover .ico, .svc:hover .ico { color: var(--text); border-color: var(--accent);
    background: linear-gradient(140deg, rgba(108, 99, 255, 0.34), rgba(34, 211, 238, 0.14)); }
.ico { transition: color .2s ease, border-color .2s ease, background .2s ease; }
@media (prefers-reduced-motion: reduce) { .ico { transition: none; } }
.card__title { font-size: 19px; font-weight: 800; margin-bottom: 9px; }
.card__desc { font-size: 14.5px; color: var(--muted); }

/* ── How it works ── */
.how-hero { display: flex; justify-content: center; margin: 8px auto -18px; }
.how-hero__img { width: min(300px, 62vw); height: auto; object-fit: contain;
    filter: drop-shadow(0 18px 44px rgba(108, 99, 255, 0.35)); animation: how-hero-float 6s ease-in-out infinite; }
@keyframes how-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .how-hero__img { animation: none; } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 26px 22px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border); transition: transform 0.2s, border-color 0.2s; }
.step:hover { transform: translateY(-4px); border-color: var(--border-lit); }
.step__num { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 13px; margin-bottom: 16px; font-size: 20px; font-weight: 900; color: #fff;
    background: linear-gradient(135deg, #5d54f0, #4a42d4); box-shadow: 0 8px 22px rgba(108, 99, 255, 0.4); }
.step__title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.step__desc { font-size: 14px; color: var(--muted); }
/* connector line between steps on wide screens */
.step:not(:last-child)::after { content: ''; position: absolute; top: 48px; inset-inline-end: -10px;
    width: 20px; height: 2px; background: linear-gradient(90deg, var(--border-lit), transparent); }
html[dir="rtl"] .step:not(:last-child)::after { background: linear-gradient(270deg, var(--border-lit), transparent); }

/* ── Favourites ── */
/* The mirror image of the taskbar band below it: words on the side the band puts
   its picture, so the two read as a pair rather than as the same slide twice. */
.favs { position: relative; padding: clamp(44px, 6vw, 80px) 0 0; }
.favs__inner {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px, 4vw, 56px); align-items: center;
}
.favs__copy { display: flex; flex-direction: column; gap: 14px; }
.favs__eyebrow {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.38);
    background: rgba(251, 191, 36, 0.08);
    font-size: 12.5px; font-weight: 800; color: #fbbf24;
}
.favs__title { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; line-height: 1.25; }
.favs__sub { font-size: 15px; line-height: 1.75; color: var(--muted); }
.favs__points { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.favs__points li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.6; }
/* Gold, because that is the colour of the star this whole section is about. */
.favs__points .gly { flex-shrink: 0; margin-top: 3px; color: #fbbf24; }

/* The same window frame the gallery uses, so a drawing of a screen reads as a
   screen here too. */
.favs__shot { margin: 0; }
.favs__frame {
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border); background: var(--surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.favs__bar { display: flex; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--border); }
.favs__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-lit); }
.favs__bar span:first-child { background: rgba(248, 113, 113, 0.65); }
.favs__bar span:nth-child(2) { background: rgba(251, 191, 36, 0.65); }
.favs__frame img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) { .favs__inner { grid-template-columns: 1fr; } }

/* ── Where it lives: the app on a real taskbar ── */
/* The picture is a dark photograph that fades to black at its edges, so it is not
   framed like the screens in the gallery - a border around it would draw a box
   around nothing. It bleeds into the page instead, and the light in it does the
   framing. */
.taskbar { position: relative; padding: clamp(48px, 7vw, 92px) 0; overflow: hidden; }
.taskbar::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 70% at 50% 45%, rgba(34, 211, 238, 0.10), transparent 70%);
}
.taskbar__inner {
    position: relative;
    display: grid; grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(28px, 4vw, 56px); align-items: center;
}

.taskbar__shot { position: relative; margin: 0; }
.taskbar__shot img {
    display: block; width: 100%; height: auto;
    border-radius: 18px;
    /* The glow is the icon's own colour, thrown by the image rather than drawn on
       top of it - a hard border would cut off the light that makes the shot. */
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* A soft cyan halo behind the picture, breathing slowly. It is the same glow the
   icon has in the shot, continued past its edge. */
.taskbar__shot::after {
    content: ''; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 40px;
    background: radial-gradient(50% 55% at 38% 62%, rgba(34, 211, 238, 0.34), transparent 68%);
    filter: blur(26px);
    animation: taskbar-breathe 7s ease-in-out infinite;
}
@keyframes taskbar-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.taskbar__copy { display: flex; flex-direction: column; gap: 14px; }
.taskbar__eyebrow {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--border-lit); background: var(--surface-2);
    font-size: 12.5px; font-weight: 800; color: var(--accent-3);
}
.taskbar__title { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; line-height: 1.25; }
.taskbar__sub { font-size: 15px; line-height: 1.75; color: var(--muted); }

.taskbar__points { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.taskbar__points li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14px; line-height: 1.6; color: var(--text);
}
.taskbar__points .gly { flex-shrink: 0; margin-top: 3px; color: var(--accent-2); }

@media (max-width: 860px) {
    .taskbar__inner { grid-template-columns: 1fr; }
    .taskbar__copy { text-align: start; }
}
@media (prefers-reduced-motion: reduce) { .taskbar__shot::after { animation: none; } }

/* ── Gallery ── */
.shots { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.shot { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.shot:nth-child(even) { direction: ltr; }
.shot:nth-child(even) .shot__cap { direction: inherit; }
html[dir="rtl"] .shot:nth-child(even) { direction: rtl; }
/* The caption beside each screen. It used to be a heading and a paragraph on empty
   space next to a detailed mockup, which read as unfinished. Now it has a subject
   behind it - the drawing that belongs to that screen, oversized and turned almost
   all the way down - and a rule that ties the block together. */
.shot__cap { position: relative; padding-inline-start: 22px; }
.shot__cap::before { content: ''; position: absolute; inset-block: 4px; inset-inline-start: 0;
    width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(34, 211, 238, 0.5) 55%, transparent); }
.shot__wm { position: absolute; inset-inline-start: -18px; top: 50%; translate: 0 -50%;
    width: 244px; height: 244px; color: var(--accent-3); opacity: 0.12;
    pointer-events: none; z-index: 0;
    /* Faded out at the edges so it reads as atmosphere and never as a shape that
       somebody forgot to finish. */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 74%); }
.shot__wm svg { width: 100%; height: 100%; display: block; }
:root[data-theme="light"] .shot__wm { color: var(--accent); opacity: 0.14; }

.shot__eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 12px; padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px;
    color: var(--accent-3); border: 1px solid var(--border-lit);
    background: rgba(108, 99, 255, 0.10); }
:root[data-theme="light"] .shot__eyebrow { color: #4a42d4; background: rgba(108, 99, 255, 0.08); }

.shot__cap h3 { position: relative; z-index: 1; font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.shot__cap p { position: relative; z-index: 1; font-size: 15.5px; color: var(--muted); }
.shot__frame { transition: transform 0.4s, box-shadow 0.4s; }
.shot__frame:hover { transform: translateY(-4px); box-shadow: var(--shadow), 0 0 50px rgba(34, 211, 238, 0.14); }

/* ── Services ── */
.svc { padding: 30px 26px; border-radius: var(--radius); text-align: center;
    background: linear-gradient(180deg, var(--surface), rgba(108, 99, 255, 0.05));
    border: 1px solid var(--border); transition: transform 0.2s, border-color 0.2s; }
.svc:hover { transform: translateY(-5px); border-color: var(--border-lit); }
.svc__icon { font-size: 42px; margin-bottom: 16px; line-height: 1; }
.svc__title { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.svc__desc { font-size: 14.5px; color: var(--muted); }

/* ── CTA ── */
.cta { padding-block: clamp(42px, 5vw, 68px); text-align: center; }
.cta__inner { max-width: 640px; padding: clamp(40px, 6vw, 64px); border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0%, rgba(108, 99, 255, 0.22), var(--surface) 70%);
    border: 1px solid var(--border-lit); box-shadow: var(--shadow), 0 0 80px rgba(108, 99, 255, 0.16); }
.cta__title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; margin-bottom: 14px; }
.cta__sub { font-size: 17px; color: var(--muted); margin-bottom: 30px; }
.cta__note { font-size: 13px; color: var(--faint); margin-top: 16px; line-height: 1.7; }
.cta__ver { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px;
    background: rgba(108, 99, 255, 0.14); border: 1px solid var(--border-lit); color: var(--accent-3); font-weight: 700; }

/* ── Footer ── */
.footer { border-top: 1px solid var(--border); background: rgba(5, 5, 11, 0.6);
    padding-top: 52px; margin-top: 40px; }
.footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; }
.footer__col { padding-top: 4px; }
.footer__brand { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.footer__logo { width: 200px; max-width: 60vw; height: auto; margin-bottom: 6px; }
.footer__tag { color: var(--muted); font-size: 14px; }
.footer__col h3 { font-size: 15px; margin-bottom: 12px; color: var(--text); }
.footer__col p { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.footer__col a:hover { color: var(--accent-2); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center;
    padding-block: 22px; border-top: 1px solid var(--border); color: var(--faint); font-size: 13px; flex-wrap: wrap; gap: 10px; }
.footer__admin { color: var(--faint); font-size: 12.5px; }
.footer__admin:hover { color: var(--muted); }

/* ── Legal / content page ── */
.legal-page { padding-block: clamp(40px, 7vw, 80px); min-height: 60vh; }
.legal-page__card { max-width: 820px; margin-inline: auto; padding: clamp(28px, 5vw, 52px);
    border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.legal-page__title { font-size: clamp(26px, 4vw, 38px); font-weight: 900; margin-bottom: 22px;
    padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.legal-page__body { font-size: 16px; line-height: 1.9; color: var(--muted); }

/* ── Addresses inside document text ──
   Emails and links in the legal documents are rendered as real links (see
   e_rich_bidi in bootstrap.php). The contact address is the one line of an
   accessibility statement a reader is actually looking for - a law requires it to
   be there and a person in difficulty has to be able to act on it - so it is a
   button-sized target rather than a run of text they have to select and copy. */
.richlink { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.richlink:hover { color: var(--fg); }
.richlink--mail {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px; margin: 2px 0;
    border-radius: 999px;
    border: 1px solid rgba(108, 99, 255, 0.45);
    background: rgba(108, 99, 255, 0.14);
    color: var(--fg);
    font-size: 1.02em; font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.richlink--mail:hover {
    background: rgba(108, 99, 255, 0.28);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.richlink--mail:active { transform: none; }
.richlink--mail:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.richlink__ico { font-size: 0.95em; line-height: 1; opacity: 0.85; }

/* ── Legal document window (draggable; accessibility / terms / privacy) ── */
.lmodal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lmodal[hidden] { display: none; }
.lmodal__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 10, 0.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lm-fade 0.22s ease; }
.lmodal__card { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); max-height: min(70vh, 560px);
    border-radius: 20px; overflow: hidden; background: rgba(18, 18, 32, 0.97);
    border: 1px solid var(--border-lit); box-shadow: var(--shadow), 0 0 80px rgba(108, 99, 255, 0.18);
    animation: lm-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lmodal__card.is-dragging { animation: none; cursor: grabbing; user-select: none; box-shadow: var(--shadow), 0 0 110px rgba(108, 99, 255, 0.3); }
@keyframes lm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

.lmodal__head { position: relative; display: flex; align-items: center; gap: 12px;
    padding: 16px 22px; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(108, 99, 255, 0.14), transparent); flex-shrink: 0; }
.lmodal__head::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); }
/* The title bar doubles as the drag handle (pointer devices only). */
@media (min-width: 721px) and (pointer: fine) {
    .lmodal__head[data-ldrag] { cursor: grab; touch-action: none; }
    .lmodal__card.is-dragging .lmodal__head[data-ldrag] { cursor: grabbing; }
}
.lmodal__grip { display: none; flex-shrink: 0; color: var(--faint); }
@media (min-width: 721px) and (pointer: fine) { .lmodal__grip { display: inline-flex; } }
.lmodal__title { flex: 1; min-width: 0; font-family: var(--font-head); font-size: clamp(18px, 2.6vw, 23px); font-weight: 800; margin: 0; }
.lmodal__x { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; cursor: pointer; font-size: 16px;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); transition: background 0.15s, color 0.15s, transform 0.06s; }
.lmodal__x:hover { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; }
.lmodal__x:active { transform: scale(0.94); }
.lmodal__x:focus-visible, .lmodal__foot .btn:focus-visible,
.cookiebar__ok:focus-visible, .cookiebar__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.lmodal__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px;
    font-size: 15px; line-height: 1.85; color: var(--muted); }
.lmodal__body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--border-lit); }
/* Styled scrollbar */
.lmodal__body { scrollbar-width: thin; scrollbar-color: rgba(108, 99, 255, 0.7) rgba(255, 255, 255, 0.05); }
.lmodal__body::-webkit-scrollbar { width: 12px; }
.lmodal__body::-webkit-scrollbar-track { margin: 10px 0; border-radius: 999px;
    background: rgba(255, 255, 255, 0.05); border: 4px solid transparent; background-clip: content-box; }
.lmodal__body::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
    background-image: linear-gradient(180deg, var(--accent-3), var(--accent)); }
.lmodal__body::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, var(--accent-2), var(--accent-3)); }

.lmodal__foot { display: flex; justify-content: center; padding: 16px 24px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
.lmodal__foot .btn { min-width: 180px; }

@media (max-width: 560px) {
    .lmodal { padding: 14px; }
    .lmodal__card { max-height: 85vh; }
    .lmodal__head, .lmodal__body, .lmodal__foot { padding-inline: 18px; }
}

/* ── Cookie / privacy notice (first visit only) ── */
.cookiebar { position: fixed; inset-inline: 0; bottom: 0; z-index: 9400; padding: 0 16px 16px;
    animation: cookiebar-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cookiebar[hidden] { display: none; }
.cookiebar__inner { display: flex; align-items: center; gap: 18px; max-width: var(--maxw); margin-inline: auto;
    padding: 16px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-lit);
    box-shadow: var(--shadow), 0 0 60px rgba(108, 99, 255, 0.16);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cookiebar__ico { flex-shrink: 0; font-size: 26px; line-height: 1; }
.cookiebar__msg { flex: 1; min-width: 0; }
.cookiebar__text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.cookiebar__link { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700;
    color: var(--accent-3); text-decoration: underline; text-underline-offset: 3px; }
.cookiebar__link:hover { color: var(--accent-2); }
.cookiebar__ok { flex-shrink: 0; padding: 11px 26px; font-size: 15px; }
@keyframes cookiebar-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* While the notice is up, lift the floating buttons so nothing is covered.
   The class sits on <html> - the accessibility widget is appended there, not
   to <body>, so a body-scoped selector would never reach it. */
html.has-cookiebar .fab--top.fab--bottom-end,
html.has-cookiebar .fab--top.fab--bottom-start,
html.has-cookiebar .a11y--bottom-start,
html.has-cookiebar .a11y--bottom-end { bottom: calc(20px + var(--cookiebar-h, 96px)); }

@media (max-width: 720px) {
    .cookiebar { padding: 0 10px 10px; }
    .cookiebar__inner { flex-wrap: wrap; gap: 12px; padding: 15px 18px; }
    .cookiebar__ico { font-size: 22px; }
    .cookiebar__text { font-size: 13.5px; }
    .cookiebar__ok { width: 100%; }
}

/* ── Downloads page ── */
.dl-page { padding-block: clamp(36px, 6vw, 64px); min-height: 60vh; }
.dl-head { text-align: center; max-width: 680px; margin: 0 auto clamp(28px, 4vw, 44px); }
.dl-title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px); font-weight: 900; margin-bottom: 12px; }
.dl-sub { font-size: 16px; color: var(--muted); line-height: 1.6; }
.dl-empty { max-width: 560px; margin: 40px auto; padding: 40px; text-align: center; border-radius: 18px;
    background: var(--surface); border: 1px dashed var(--border); color: var(--muted); font-size: 16px; }
.dl-foot { text-align: center; margin-top: 22px; font-size: 13px; color: var(--faint); }

/* Latest-version hero */
.dl-hero { position: relative; max-width: 660px; margin: 0 auto clamp(40px, 6vw, 60px); padding: clamp(30px, 5vw, 54px); text-align: center;
    border-radius: 26px; overflow: hidden;
    background: radial-gradient(ellipse at 50% -10%, rgba(108, 99, 255, 0.26), var(--surface) 72%);
    border: 1px solid var(--border-lit); box-shadow: var(--shadow), 0 0 90px rgba(108, 99, 255, 0.18); }
.dl-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(108, 99, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 99, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px; mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%); }
.dl-hero > * { position: relative; }
.dl-hero__badge { display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
    background: rgba(108, 99, 255, 0.16); border: 1px solid var(--border-lit); color: var(--accent-3); margin-bottom: 16px; }
.dl-hero__ver { font-family: var(--font-head); font-size: clamp(42px, 8vw, 68px); font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dl-hero__os { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.dl-hero__badge { justify-content: center; }
.dl-hero__notes { margin: 22px auto 4px; max-width: 480px; text-align: start; padding: 16px 18px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--border); }
.dl-hero__notes-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--accent-3); margin-bottom: 6px; letter-spacing: 0.02em; }
.dl-hero__notes p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0; }
.dl-hero__btn { margin-top: 26px; padding: 16px 46px; font-size: 17px; }
.dl-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.dl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.dl-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid var(--border); }
.dl-trust__item { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dl-sha { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.dl-sha__label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--faint); }
.dl-sha__val { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 10.5px; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; word-break: break-all; max-width: 100%;
    user-select: all; }

/* Previous versions - release cards */
/* How-to-install - step by step */
.dl-install { max-width: 760px; margin: 52px auto 8px; }
.dl-install__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 6px; color: var(--text); }
.dl-install__sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.dl-install__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dl-install__step { display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
    transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s; }
.dl-install__step:hover { border-color: var(--border-lit); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22); }
.dl-install__num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 900; font-size: 16px; color: #fff;
    background: linear-gradient(135deg, #5d54f0, #4a42d4); box-shadow: 0 6px 16px rgba(108, 99, 255, 0.4); }
.dl-install__body { flex: 1; min-width: 0; }
.dl-install__step-title { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 3px; }
.dl-install__step-text { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.dl-install__art { flex: 0 0 auto; width: 58px; height: 58px; align-self: center; }
.dl-install__art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) {
    .dl-install__step { gap: 12px; padding: 14px 16px; }
    .dl-install__art { width: 44px; height: 44px; }
}

.dl-prev-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; text-align: center; margin: 8px 0 20px; color: var(--text); }
.dl-releases { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.dl-rel { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 18px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
    transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s; }
.dl-rel:hover { border-color: var(--border-lit); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); }
.dl-rel__main { flex: 1 1 320px; min-width: 0; }
.dl-rel__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dl-rel__ver { font-family: var(--font-head); font-size: 18px; font-weight: 900; color: var(--text); }
.dl-rel__date, .dl-rel__size { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.dl-rel__notes { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.dl-rel__action { flex-shrink: 0; }
.dl-rel__gone { font-size: 12.5px; color: var(--faint); font-style: italic; }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .bg__grid, .bg__glow { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero__subtitle { margin-inline: auto; }
    .hero__cta, .hero__stats { justify-content: center; }
    .grid--3 { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .step:not(:last-child)::after { display: none; }
    .shot, .shot:nth-child(even) { grid-template-columns: 1fr; direction: inherit; }
    .nav__links { display: none; }
    .nav__inner { gap: 12px; }
    .nav__brand { min-width: 0; flex: 1 1 auto; }
    .nav__name { white-space: nowrap; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
    .nav__actions { flex: none; }
}
@media (max-width: 560px) {
    .grid--3 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .hero__stats { gap: 22px; }
    /* free up room so the brand name fits on one line */
    .nav__actions .btn--primary { display: none; }
    .nav__logo { width: 32px; height: 32px; }
    .nav__name { font-size: 15px; }
    .nav__actions { gap: 8px; }
}

/* ── A word before the download ──────────────────────────────────────────────
   Sits over the download page from the moment the file is asked for. Deliberately
   quiet in tone: this is a note from the publisher, not a warning, so it takes the
   page's own card language rather than an alert palette. */
/* Above the cookie bar (9400) and the floating buttons (8000), which were both
   painting over the checkbox and the download button, and below the legal windows
   (9500) so an agreement opened from inside this dialog still lands on top. */
.dln { position: fixed; inset: 0; z-index: 9450; display: flex; align-items: center; justify-content: center; padding: 22px; }
.dln[hidden] { display: none; }
.dln__backdrop { position: absolute; inset: 0; background: rgba(6, 8, 18, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dln__card {
    position: relative;
    width: min(520px, 100%);
    /* Never taller than the space it is given. The dialog's own padding is part
       of that space, hence 100% of the flex line rather than a viewport unit. */
    max-height: 100%;
    display: flex; flex-direction: column;
    border-radius: 20px; text-align: center; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, rgba(108, 99, 255, .14), transparent 60%), var(--surface, #14161f);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, .12));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
    animation: dln-in .24s cubic-bezier(.22, 1, .36, 1) both;
}
/* Pinned. A long notice on a short screen used to scroll the title away and push
   the checkbox and the button out of sight - the two things the screen is for. */
.dln__head { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 28px 14px; }
.dln__foot { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 28px 22px; }
/* A hairline that appears only when the message actually scrolls under it. */
.dln__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 28px 4px; }
@keyframes dln-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.dln__ico {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    font-size: 27px; background: rgba(108, 99, 255, .14); border: 1px solid rgba(108, 99, 255, .32);
}
.dln__title { margin: 0; font-size: 1.28rem; font-weight: 800; color: var(--txt, #eef1f7); }
/* The card is centred but the message is not: a notice can run to several lines,
   and centred prose forces the eye to find the start of each one. Aligned to the
   reading edge it scans like text. A single short line still looks centred,
   because the block itself is. */
.dln__body { font-size: .95rem; line-height: 1.75; color: var(--txt-2, #aeb6c6); text-align: start; }
.dln__body > * { max-width: 42ch; margin-inline: auto; }
.dln__body a { color: var(--accent, #8b85ff); }

/* The checkbox. A real input, visually hidden, with the box drawn beside it - so
   it keeps native keyboard behaviour and the label stays clickable. */
.dln__agree { display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 9px 15px; border-radius: 12px; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
.dln__agree:hover { background: rgba(255, 255, 255, .04); }
.dln__agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.dln__box {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
    display: grid; place-items: center;
    border: 1.6px solid var(--border-strong, rgba(255, 255, 255, .22));
    background: rgba(255, 255, 255, .04);
    color: transparent;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.dln__agree:hover .dln__box { border-color: var(--accent, #6c63ff); }
.dln__agree input:checked + .dln__box { background: var(--accent, #6c63ff); border-color: var(--accent, #6c63ff); color: #fff; }
.dln__agree input:focus-visible + .dln__box { outline: 2px solid var(--accent, #6c63ff); outline-offset: 3px; }
.dln__agree input:active + .dln__box { transform: scale(.92); }
.dln__agree-txt { font-size: .93rem; font-weight: 600; color: var(--txt, #eef1f7); }

.dln__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
/* Not `disabled`: an anchor cannot be, and a real button here would lose the
   browser's own download handling. It is inert until the box is ticked, and says
   so to assistive technology through aria-disabled. */
.dln__go { pointer-events: none; opacity: .45; filter: saturate(.5); transition: opacity .18s ease, filter .18s ease; }
.dln__go.is-ready { pointer-events: auto; opacity: 1; filter: none; }

@media (max-width: 560px) {
    .dln { padding: 12px; }
    .dln__head { padding: 22px 18px 12px; }
    .dln__body { padding: 0 18px 4px; }
    .dln__foot { padding: 12px 18px 18px; }
    .dln__title { font-size: 1.12rem; }
}
/* A short window - a laptop with the browser's toolbars, or a rotated tablet.
   The icon is the first thing to go: it is decoration, and the message is not. */
@media (max-height: 640px) {
    .dln { padding: 10px; }
    .dln__ico { display: none; }
    .dln__head { padding: 18px 22px 10px; }
    .dln__foot { padding: 10px 22px 16px; gap: 9px; }
    .dln__title { font-size: 1.08rem; }
    .dln__body { font-size: .9rem; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
    .dln__card { animation: none; }
}

/* The agreements, offered at the moment consent is asked for. Quiet by design -
   they are a reference the reader may want, not a second call to action
   competing with the download button below them. */
.dln__legal {
    display: flex; align-items: center; justify-content: center; gap: 4px 10px; flex-wrap: wrap;
    padding: 6px 10px; border-radius: 9px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.dln__legal-lead { font-size: .72rem; font-weight: 700; color: var(--txt-3, #7c869b); }
.dln__legal-link {
    font-size: .76rem; font-weight: 600; color: var(--accent, #8b85ff);
    text-decoration: none; border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.dln__legal-link:hover, .dln__legal-link:focus-visible { border-bottom-color: currentColor; }
@media (max-height: 640px) {
    .dln__legal { padding: 5px 8px; gap: 3px 9px; }
    .dln__legal-link, .dln__legal-lead { font-size: .72rem; }
}