/* Risky Business – Website
   Shared stylesheet. Plain static, no build step. Light/Dark via prefers-color-scheme. */

:root {
  --brand: #1A3A5C;
  --accent: #1A6FE8;
  --accent-2: #2997ff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --bg: #f5f5f7;
  --card: #ffffff;
  --line: #e5e5ea;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 30px rgba(0,0,0,.06);
  --radius: 16px;
  --maxw: 1080px;
  --header-h: 60px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #dbe7ff;
    --accent: #2997ff;
    --accent-2: #7db4ff;
    --ink: #f5f5f7;
    --muted: #98989d;
    --bg: #000000;
    --card: #1c1c1e;
    --line: #2c2c2e;
    --shadow: 0 1px 3px rgba(0,0,0,.5), 0 10px 40px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; color: var(--ink); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav {
  height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; display: block; }
.nav-links { display: flex; gap: 4px; flex: 1; align-items: center; flex-wrap: wrap; }
/* Center the menu links in the space between the logo and the language flags:
   equal auto-margins before the first link and before the language switcher. */
.nav-links > a:first-of-type { margin-left: auto; }
.nav-links a {
  color: var(--ink); padding: 7px 12px; border-radius: 10px; font-size: .95rem;
}
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.lang { display: flex; gap: 4px; margin-left: auto; border: 1px solid var(--line); border-radius: 980px; padding: 4px; background: var(--card); }
.lang a { padding: 6px 12px; border-radius: 980px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.lang a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--accent); color: #fff; }
/* Small flag of the language's country of origin before each DE/EN/ES label.
   Inline SVGs (not emoji) so the flags render identically on every platform. */
.lang a[data-lang]::before {
  content: "";
  display: inline-block;
  width: 18px; height: 12px;
  margin-right: 5px;
  vertical-align: -2px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.lang a[data-lang="de"]::before { background-image: url(../img/flags/de.svg); }  /* Germany */
.lang a[data-lang="en"]::before { background-image: url(../img/flags/gb.svg); }  /* United Kingdom */
.lang a[data-lang="es"]::before { background-image: url(../img/flags/es.svg); }  /* Spain */

.nav-toggle { display: none; }
.hamburger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--ink); }
.hamburger svg { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .hamburger { display: inline-flex; }
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 8px; margin: 0; display: none; box-shadow: var(--shadow);
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 12px; border-radius: 10px; }
  .nav-links > a:first-of-type { margin-left: 0; }   /* no centering in the mobile dropdown */
  .lang { margin: 8px 0 0; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 40px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 0 auto 0; height: 480px; z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
.hero .app-icon { width: 104px; height: 104px; margin: 0 auto 20px; border-radius: 23%; box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 12px; letter-spacing: -.02em; }
.hero .tagline { font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: var(--muted); max-width: 640px; margin: 0 auto 28px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 980px; font-weight: 600; font-size: 1rem;
  background: var(--accent); color: #fff; border: 1px solid transparent; cursor: pointer;
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn.secondary { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.rect { border-radius: 8px; }
.btn-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

.badge-note { margin-top: 14px; font-size: .85rem; color: var(--muted); }

/* ---------- Feature grid ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.feature .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); margin-bottom: 14px; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { margin: 0 0 6px; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Accessibility badges (App Store-style row) ---------- */
.a11y-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 26px; text-align: left; }
.a11y-badge { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.a11y-badge .ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.a11y-badge .ico svg { width: 20px; height: 20px; }
.a11y-badge span { font-weight: 600; font-size: .95rem; color: var(--ink); }
.a11y-head { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); margin-bottom: 10px; }
.a11y-head svg { width: 24px; height: 24px; }

/* ---------- App Store badge ---------- */
.store-badge { display: inline-flex; align-items: center; text-decoration: none; }
.store-badge img, .store-badge svg, .store-badge picture { height: 44px; width: auto; display: block; }
.store-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* Companion button styled to match the App Store badge (same 44px pill, no border
   so the fill spans the full height exactly like the badge). Inverts in dark mode
   to mirror Apple's white badge variant. */
.badge-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 8px; background: #000; color: #fff;
  font-weight: 600; font-size: 1rem; text-decoration: none; box-sizing: border-box; }
.badge-btn:hover { opacity: .9; text-decoration: none; }
.badge-btn svg { width: 20px; height: 20px; }
.badge-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  .badge-btn { background: #fff; color: #000; }
}
/* LinkedIn variant: same pill shape/size, brand blue in both light and dark. */
.badge-btn.linkedin { background: #0A66C2; color: #fff; }
.badge-btn.linkedin svg { fill: currentColor; }

/* ---------- Screenshot gallery (phone mockups) ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; align-items: start; }
.phone {
  margin: 0 auto; max-width: 260px; border-radius: 34px; padding: 8px;
  background: linear-gradient(160deg, #3a3a3c, #1a1a1c);
  box-shadow: var(--shadow);
}
.phone img { border-radius: 27px; display: block; width: 100%; background: var(--card); }
.phone + figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 10px; }
figure { margin: 0; }

/* ---------- Generic content pages (privacy / manual / about) ---------- */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px; box-shadow: var(--shadow); max-width: 820px; margin: 0 auto; }
.doc h1 { font-size: 2rem; margin: 0 0 4px; }
.doc h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.doc h3 { font-size: 1.08rem; margin: 1.4rem 0 .3rem; }
.doc .subtitle { color: var(--muted); margin: 0 0 1.5rem; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc .toc { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px; margin: 0 0 24px; }
.doc .toc ul { columns: 2; margin: 0; }
@media (max-width: 620px){ .doc { padding: 24px; } .doc .toc ul { columns: 1; } }

/* ---------- Blog ---------- */
.release { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow); margin-bottom: 22px; }
.release h2 { margin: 0 0 2px; font-size: 1.4rem; }
.release .ver-meta { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.release ul { padding-left: 20px; margin: 0; }
.release li { margin: 6px 0; }
.pill { display: inline-block; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
  border-radius: 980px; padding: 2px 10px; font-size: .75rem; font-weight: 700; vertical-align: middle; margin-left: 8px; }

/* ---------- Screenshot device toggle ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 980px; padding: 4px; gap: 4px; background: var(--card); box-shadow: var(--shadow); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg label { padding: 8px 20px; border-radius: 980px; cursor: pointer; font-weight: 600; color: var(--muted); font-size: .95rem; user-select: none; }
.seg label:hover { color: var(--ink); }
.shots-toggle input:checked + label { background: var(--accent); color: #fff; }

.shots-group { display: none; gap: 26px; margin-top: 36px; align-items: start; }
.shots-group.iphone { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.shots-group.ipad, .shots-group.mac { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.shots-toggle:has(#dev-iphone:checked) .shots-group.iphone,
.shots-toggle:has(#dev-ipad:checked) .shots-group.ipad,
.shots-toggle:has(#dev-mac:checked) .shots-group.mac { display: grid; }
/* Fallback for browsers without :has() — show the iPhone gallery */
@supports not (selector(:has(*))) { .shots-group.iphone { display: grid; } }

.tablet { margin: 0 auto; max-width: 520px; border-radius: 22px; padding: 10px;
  background: linear-gradient(160deg, #3a3a3c, #1a1a1c); box-shadow: var(--shadow); }
.tablet img { border-radius: 12px; width: 100%; display: block; background: var(--card); }
.macshot { margin: 0 auto; max-width: 640px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); }
.macshot img { width: 100%; display: block; }

/* ---------- Screenshot gallery: 3D coverflow ---------- */
.gallery { max-width: 1100px; margin: 0 auto; }
.gal-controls { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin: 4px 0 22px; }
.seg button { padding: 8px 20px; border-radius: 980px; cursor:pointer; border:0; background:transparent;
  font-weight:600; color:var(--muted); font-size:.95rem; }
.seg button:hover { color:var(--ink); }
.seg button[aria-selected="true"] { background: var(--accent); color:#fff; }

.stage { position: relative; height: 600px; border-radius: 24px;
  background: color-mix(in srgb, var(--ink) 4%, var(--card)); border: 1px solid var(--line);
  perspective: 1250px; overflow: hidden; transition: background .3s ease, border-color .3s ease; }
.stage.dark { background:#0d1117; border-color:#232a33; }
.stage3d { position:absolute; inset:0; transform-style: preserve-3d; }
.slide { position:absolute; left:50%; top:50%;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease, filter .45s ease;
  will-change: transform, opacity; }

.frame { box-sizing:border-box; margin:0 auto; }
.frame img { display:block; max-width:none; }
.frame.iphone { height:520px; border:9px solid #1c1c1e; border-radius:40px; box-shadow:var(--shadow); background:#1c1c1e; overflow:hidden; }
.frame.iphone img { height:100%; width:auto; aspect-ratio:1320/2868; border-radius:30px; }
.frame.ipad { height:440px; border:13px solid #2a2a2e; border-radius:26px; box-shadow:var(--shadow); background:#2a2a2e; overflow:hidden; }
.frame.ipad img { height:100%; width:auto; aspect-ratio:2752/2064; border-radius:12px; }
.frame.mac { width:720px; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); background:var(--card); }
.frame.mac .bar { height:28px; background:#e8e8ea; display:flex; align-items:center; gap:7px; padding:0 12px; }
.stage.dark .frame.mac { border-color:#232a33; }
.stage.dark .frame.mac .bar { background:#20242b; }
.frame.mac .bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.frame.mac .bar .r{background:#ff5f57}.frame.mac .bar .y{background:#febc2e}.frame.mac .bar .g{background:#28c840}
.frame.mac img { width:100%; height:auto; aspect-ratio:1440/900; }

.gallery .cap { text-align:center; font-weight:600; color:var(--muted); margin-top:16px; min-height:1.3em; }
.nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:50; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:transform .15s ease; }
.nav-btn:hover { transform:translateY(-50%) scale(1.08); }
.nav-btn.prev { left:14px; } .nav-btn.next { right:14px; }
.nav-btn svg { width:22px; height:22px; }
.gallery .dots { display:flex; gap:9px; justify-content:center; margin-top:8px; }
.gallery .dots button { width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background: color-mix(in srgb, var(--ink) 25%, transparent); transition: all .2s; }
.gallery .dots button[aria-current="true"] { background: var(--accent); width:26px; border-radius:999px; }
.gallery .hint { text-align:center; color:var(--muted); font-size:.9rem; margin-top:14px; }

.lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background: rgba(8,10,14,.82); backdrop-filter: blur(6px); padding:3vw; }
.lightbox.open { display:flex; }
.lightbox img { max-width:94vw; max-height:92vh; width:auto; height:auto; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb-close { position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; font-size:1.5rem; line-height:1; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-nav svg { width:26px; height:26px; } .lb-nav.prev{left:2vw}.lb-nav.next{right:2vw}
.lb-cap { position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#e8e8ea; font-weight:600; }

@media (max-width:720px){
  .stage { height:460px; perspective:1050px; }
  .frame.iphone{ height:380px } .frame.ipad{ height:300px } .frame.mac{ width:88vw }
}

/* ---------- Section headings ---------- */
.section h2.section-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); text-align: center; margin: 0 0 8px; letter-spacing: -.02em; }
.section .section-sub { text-align: center; color: var(--muted); max-width: 620px; margin: 0 auto 40px; }

/* ---------- About page ---------- */
.about-intro { text-align: center; position: relative; padding: 24px 0 8px; margin-bottom: 8px; }
.about-intro::before {
  content: ""; position: absolute; inset: -20px 0 auto 0; height: 260px; z-index: -1;
  background: radial-gradient(55% 60% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.profile-photo {
  width: 184px; height: 184px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  border: 5px solid var(--card); box-shadow: var(--shadow); background: var(--card);
  margin: 0 auto 18px; display: block;
}
.about-intro h1 { margin: 0 0 4px; font-size: clamp(1.9rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.about-intro .role { color: var(--muted); margin: 0 0 18px; font-size: 1.05rem; }
.btn.linkedin { background: #0A66C2; color: #fff; }
.btn.linkedin:hover { opacity: .92; }
.btn.linkedin svg { width: 18px; height: 18px; fill: currentColor; }

.prose { max-width: 820px; }
.prose p { margin: 15px 0; }
.prose .lead { font-size: 1.2rem; color: var(--ink); }
.prose .accent-line { font-size: 1.12rem; font-weight: 600; color: var(--accent); text-align: center; margin: 24px 0; }
.prose .closing {
  margin: 30px 0 8px; padding: 18px 22px; font-size: 1.12rem; font-weight: 600;
  border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--muted); font-size: .9rem; margin-top: 40px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); }