/* ============================================================
   Xyris AI — static content pages (/de/, /it/).
   Same palette and type as the Xyris OS home (css/styles.css),
   but no WebGL, no animation: text first, readable everywhere.
   ============================================================ */
:root{
  --bg:#090b10; --bg-2:#0d1016; --panel:#0f131b;
  --cyan:#8fc2db; --cyan-soft:#c2e0ee; --violet-soft:#aab4c9;
  --ink:#e9edf3; --muted:#a3acbb; --muted-2:#6b7384;
  --line:rgba(150,170,200,.14);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(143,194,219,.08),transparent 60%)}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--cyan-soft)}
img{max-width:100%;height:auto}
picture{display:contents}
.wrap{width:min(100% - 32px,780px);margin-inline:auto}

.skip{position:absolute;left:-999px;top:8px;background:var(--cyan);color:#02040a;padding:8px 14px;border-radius:6px;z-index:10}
.skip:focus{left:16px}

/* header */
header.site{border-bottom:1px solid var(--line);background:rgba(9,11,16,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
header.site .bar{width:min(100% - 32px,1100px);display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap;padding:10px 0}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.04em;font-size:18px;color:var(--ink);text-decoration:none}
.brand span{color:var(--cyan)}
.brand img{width:26px;height:26px;mix-blend-mode:screen}
header.site nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto;font-family:var(--mono);font-size:13px;letter-spacing:.04em}
header.site nav a{color:var(--muted);text-decoration:none}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--cyan)}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:4px 12px;text-decoration:none}
.lang:hover{border-color:var(--cyan)}
@media(max-width:760px){header.site nav{order:3;width:100%;margin-left:0}.lang{margin-left:auto}}

/* content */
main{padding:56px 0 40px}
.prose h1{font-size:clamp(32px,6vw,52px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.prose .lead{font-size:clamp(18px,2.3vw,21px);line-height:1.6;color:var(--ink);margin-bottom:26px;border-left:2px solid var(--cyan);padding-left:18px}
.prose h2{font-size:clamp(22px,3vw,28px);line-height:1.25;letter-spacing:-.01em;margin:48px 0 14px}
.prose h3{font-size:19px;margin:28px 0 8px;color:var(--cyan-soft)}
.prose p{margin:0 0 16px;color:var(--muted)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 18px 22px;color:var(--muted)}
.prose li{margin:0 0 8px;padding-left:4px}
.prose .meta{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted-2)}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:0 0 18px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--cyan-soft)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;color:var(--muted);vertical-align:top}
.prose th{color:var(--ink);background:var(--bg-2);font-weight:600}
.prose .addr{font-family:var(--mono);font-size:15px;line-height:1.9;color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:0 0 24px}
.card p{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.prose ul.links,.prose ul.posts{list-style:none;margin-left:0}
.prose ul.links li{padding:12px 0;border-bottom:1px solid var(--line)}
.prose ul.posts li{padding:18px 0;border-bottom:1px solid var(--line)}
.prose ul.posts h3{margin:0 0 4px;font-size:21px}
.prose ul.posts h3 a{color:var(--ink);text-decoration:none}
.prose ul.posts h3 a:hover{color:var(--cyan)}
.prose ul.posts p{margin:0 0 6px}

/* FAQ */
.faq{margin-top:56px;padding-top:8px;border-top:1px solid var(--line)}
.faq .qa{padding:14px 0;border-bottom:1px solid var(--line)}
.faq .qa h3{margin:0 0 6px;font-size:18px;color:var(--ink)}
.faq .qa p{margin:0}

/* CTA */
.cta{margin:56px 0 0;background:linear-gradient(135deg,rgba(143,194,219,.12),rgba(170,180,201,.05));border:1px solid rgba(143,194,219,.3);border-radius:16px;padding:28px}
.cta .cta-title{font-size:22px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:10px}
.btn{display:inline-block;margin-top:6px;background:var(--cyan);color:#02040a;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 20px;border-radius:30px;font-weight:500}
.btn:hover{background:var(--cyan-soft);color:#02040a}

/* footer */
footer.site{border-top:1px solid var(--line);padding:40px 0 30px;font-size:14px;color:var(--muted)}
footer.site .cols{width:min(100% - 32px,1100px);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
footer.site .f-brand{font-weight:700;font-size:18px;color:var(--ink)}
footer.site .f-tag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-2);margin:4px 0 14px}
footer.site address{font-style:normal;line-height:1.8}
footer.site .f-links{display:flex;flex-direction:column;gap:6px}
footer.site .f-links a{color:var(--muted);text-decoration:none}
footer.site .f-links a:hover{color:var(--cyan)}
footer.site .copy{width:min(100% - 32px,1100px);margin-top:28px;font-family:var(--mono);font-size:12px;color:var(--muted-2)}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr}}