/* Shared stylesheet for the public agent-orchestrator.ai landing pages (start.html, jira-alternative.html).
   Plain CSS, no build step, no external fonts/CDNs — the pages must open straight from disk or nginx.
   Same dark palette as join.html / the product page so the public surface feels like one product. */
:root{
  --bg:#090c11; --panel:#131a23; --panel-2:#0f151d;
  --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.16);
  --text:#eef2f7; --text-dim:#9aa8ba; --text-faint:#6b7889;
  --brand:#0a6ed1; --brand-light:#4aa3ff; --brand-glow:rgba(10,110,209,0.45);
  --accent:#35d0ba; --accent-2:#a56bff; --warn:#ffb454; --danger:#ff5c72;
  --radius:16px; --max:1120px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(10,110,209,0.20), transparent 60%),
    radial-gradient(900px 600px at 92% 4%, rgba(165,107,255,0.13), transparent 55%),
    radial-gradient(1000px 800px at 50% 110%, rgba(53,208,186,0.09), transparent 60%),
    var(--bg);
}
a{ color:var(--brand-light); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ── nav ── */
nav.top{ position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); background:rgba(9,12,17,0.72); border-bottom:1px solid var(--border); }
nav.top .wrap{ display:flex; align-items:center; gap:22px; height:64px; }
.wordmark{ white-space:nowrap; display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; letter-spacing:-0.01em; color:var(--text); }
.wordmark:hover{ text-decoration:none; }
.wordmark .mark{ height:34px; width:auto; display:block; flex:none; }   /* the logo mark alone (dark-background variant); the site is dark-only */
nav.top .links{ display:flex; gap:20px; margin-left:12px; }
nav.top .links a{ color:var(--text-dim); font-size:14px; font-weight:600; }
nav.top .links a:hover{ color:var(--text); text-decoration:none; }
nav.top .spacer{ flex:1; }
@media (max-width:820px){ nav.top .links{ display:none; } }

/* ── buttons ── */
.btn{ display:inline-block; padding:13px 22px; border-radius:12px; font-weight:700; font-size:14.5px; border:1px solid transparent; cursor:pointer; }
.btn:hover{ text-decoration:none; }
.btn.primary{ color:#fff; background:linear-gradient(135deg,var(--brand),#2f8fe0); box-shadow:0 14px 34px -10px var(--brand-glow); transition:transform .18s, box-shadow .18s; }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -10px var(--brand-glow); }
.btn.ghost{ color:var(--text); border-color:var(--border-strong); background:rgba(255,255,255,0.03); }
.btn.ghost:hover{ border-color:var(--brand-light); }
.btn.sm{ padding:9px 16px; font-size:13.5px; border-radius:10px; white-space:nowrap; }

/* ── type ── */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:12.5px; color:var(--text-dim);
  background:rgba(255,255,255,0.04); border:1px solid var(--border-strong); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
h1{ font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; font-weight:800; letter-spacing:-0.03em; margin:18px 0 18px; }
h2{ font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.15; font-weight:800; letter-spacing:-0.02em; margin:0 0 12px; }
h3{ font-size:1.08rem; margin:0 0 8px; }
.grad{ background:linear-gradient(100deg,var(--brand-light) 0%,var(--accent) 50%,var(--accent-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-size:1.12rem; color:var(--text-dim); max-width:760px; margin:0 0 28px; }
.sub{ color:var(--text-dim); max-width:720px; margin:0 0 36px; }
section{ padding:72px 0; }
section.tight{ padding:40px 0; }
.kicker{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--accent); margin-bottom:10px; }

/* ── hero ── */
.hero{ padding:84px 0 40px; text-align:center; }
.hero .lead{ margin-left:auto; margin-right:auto; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:26px; }
.pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pill{ padding:6px 14px; border-radius:999px; font-size:12.5px; color:var(--text-dim); background:rgba(255,255,255,0.04); border:1px solid var(--border); }
.pill b{ color:var(--text); }

/* ── screenshot frame ── */
.frame{ border-radius:14px; overflow:hidden; border:1px solid var(--border-strong); background:var(--panel);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03); }
.frame .bar{ display:flex; gap:7px; padding:10px 14px; background:#0d1218; border-bottom:1px solid var(--border); }
.frame .bar i{ width:10px; height:10px; border-radius:50%; background:#2a3441; display:block; }
.frame img{ width:100%; height:auto; }
.hero .frame{ margin-top:46px; }
.caption{ font-size:12.5px; color:var(--text-faint); margin-top:10px; text-align:center; }

/* ── grids/cards ── */
.grid{ display:grid; gap:18px; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g3,.g4{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .g3,.g2,.g4{ grid-template-columns:1fr; } }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.card p{ color:var(--text-dim); margin:0; font-size:.95rem; }
.card .ico{ font-size:22px; margin-bottom:12px; }
.card .num{ font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.1em; margin-bottom:8px; }
.src{ font-size:12px; color:var(--text-faint); margin-top:12px; }

/* ── sovereignty diagram ── */
.zones{ display:grid; grid-template-columns:1fr 96px 1fr; gap:0; align-items:stretch; }
@media (max-width:760px){ .zones{ grid-template-columns:1fr; } .zones .link{ padding:14px 0; } }
.zone{ border-radius:var(--radius); padding:26px; border:1px solid var(--border-strong); }
.zone.cust{ background:linear-gradient(180deg,rgba(53,208,186,0.08),rgba(53,208,186,0.02)); border-color:rgba(53,208,186,0.35); }
.zone.host{ background:linear-gradient(180deg,rgba(10,110,209,0.10),rgba(10,110,209,0.02)); border-color:rgba(74,163,255,0.35); }
.zone h3{ display:flex; align-items:center; gap:8px; }
.zone ul{ margin:12px 0 0; padding-left:18px; color:var(--text-dim); font-size:.95rem; }
.zone li{ margin:6px 0; }
.zone .tag{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.zones .link{ display:grid; place-items:center; color:var(--text-faint); font-size:12px; text-align:center; }

/* ── tables ── */
.tablewrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); }
table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:720px; }
th,td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
th{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); background:var(--panel-2); }
tr:last-child td{ border-bottom:none; }
td.us, th.us{ background:rgba(10,110,209,0.10); }
td.us{ color:var(--text); font-weight:600; }
td{ color:var(--text-dim); }
td:first-child{ color:var(--text); font-weight:600; }
.answer{ max-width:820px; margin:0 auto; color:var(--text-dim); font-size:1.02rem; line-height:1.65; }
.answer b{ color:var(--text); }
.hero + section:not([id]) .answer{ text-align:center; }
table.facts{ min-width:0; }
table.facts td:first-child{ width:30%; white-space:nowrap; }
@media (max-width:620px){ table.facts td:first-child{ white-space:normal; width:34%; } }
.yes{ color:var(--accent); font-weight:700; } .no{ color:var(--danger); font-weight:700; } .soon{ color:var(--warn); font-weight:700; }
.fine{ font-size:12px; color:var(--text-faint); margin-top:12px; max-width:900px; }

/* ── roadmap honesty band ── */
.band{ border:1px dashed rgba(255,180,84,0.5); background:rgba(255,180,84,0.06); border-radius:var(--radius); padding:26px; }
.band h3{ color:var(--warn); }
.band ul{ margin:10px 0 0; padding-left:18px; color:var(--text-dim); }
.band li{ margin:6px 0; }
.badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:6px; margin-right:6px; }
.badge.soon{ background:rgba(255,180,84,0.15); color:var(--warn); }
.badge.planned{ background:rgba(165,107,255,0.16); color:#c7a4ff; }

/* ── pricing ── */
.plan{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.plan.hl{ border-color:rgba(74,163,255,0.6); box-shadow:0 0 0 1px rgba(74,163,255,0.25), 0 30px 70px -30px var(--brand-glow); }
.plan .name{ font-weight:800; font-size:1.05rem; }
.plan .price{ font-size:2.3rem; font-weight:800; letter-spacing:-0.03em; margin:10px 0 2px; }
.plan .price small{ font-size:.85rem; font-weight:600; color:var(--text-dim); letter-spacing:0; }
.plan .meta{ font-size:.82rem; color:var(--text-faint); min-height:2.6em; }
.plan ul{ list-style:none; padding:0; margin:16px 0 22px; color:var(--text-dim); font-size:.92rem; flex:1; }
.plan li{ padding:5px 0 5px 22px; position:relative; }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800; }
.plan .btn{ text-align:center; }
.ribbon{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }

/* ── faq ── */
details{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:0 20px; margin:10px 0; }
summary{ cursor:pointer; padding:16px 0; font-weight:700; list-style:none; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; float:right; color:var(--text-faint); font-weight:400; font-size:20px; line-height:1; }
details[open] summary::after{ content:"–"; }
details p{ color:var(--text-dim); margin:0 0 16px; }

/* ── final cta + footer ── */
.final{ text-align:center; padding:84px 0; }
.final .card{ padding:54px 24px; background:linear-gradient(135deg,rgba(10,110,209,0.18),rgba(165,107,255,0.12)); border-color:var(--border-strong); }
footer.site{ border-top:1px solid var(--border); padding:34px 0 46px; color:var(--text-faint); font-size:.85rem; }
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center; }
footer.site a{ color:var(--text-dim); }

/* ── calculator (jira-alternative) ── */
.calc{ display:grid; grid-template-columns:320px 1fr; gap:22px; align-items:start; }
@media (max-width:820px){ .calc{ grid-template-columns:1fr; } }
.calc label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.calc input[type=range]{ width:100%; accent-color:var(--brand-light); }
.calc .users{ font-size:2.4rem; font-weight:800; letter-spacing:-0.03em; }
.calc .row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:.95rem; color:var(--text-dim); }
.calc .row:last-child{ border-bottom:none; }
.calc .row b{ color:var(--text); }
.calc .row.us b{ color:var(--accent); }
.save{ margin-top:16px; padding:14px 16px; border-radius:12px; background:rgba(53,208,186,0.10); border:1px solid rgba(53,208,186,0.3); color:#bff3e9; font-size:.95rem; }

@media (max-width:520px){
  nav.top .wrap{ gap:10px; }
  .wordmark .mark{ height:28px; }
  .btn.sm{ padding:8px 12px; font-size:13px; }
}

/* ── language switch (nav) ── */
.lang-switch{ padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--text-dim); white-space:nowrap;
  border:1px solid var(--border-strong); }
.lang-switch:hover{ color:var(--text); border-color:var(--brand-light); text-decoration:none; }
@media (max-width:520px){ .lang-switch{ padding:5px 10px; } }

/* Very narrow phones: logo + language switch + CTA no longer fit on one row. The same CTA is the first
   button in every hero, so the nav copy is the one to drop. */
@media (max-width:480px){ nav.top .btn.sm{ display:none; } }

/* ── language flags (replace the old text switch) ──
   Inline SVG data URIs, so the flags render identically on every OS (flag EMOJI show as the letters "DE"/"GB" on Windows)
   and the page still loads nothing external. The current language is the full-colour, ringed flag; the other one is dimmed. */
.lang-flags{ display:inline-flex; gap:6px; align-items:center; }
.flag{ display:block; width:30px; height:20px; border-radius:4px; background-size:cover; background-position:center; opacity:.5;
  border:1px solid rgba(255,255,255,0.18); transition:opacity .15s, transform .15s, box-shadow .15s; }
.flag:hover{ opacity:.9; transform:translateY(-1px); text-decoration:none; }
.flag.on{ opacity:1; box-shadow:0 0 0 2px var(--brand-light); cursor:default; }
.flag-de{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2020%22%3E%3Crect%20width=%2230%22%20height=%2220%22%20fill=%22%23FFCE00%22/%3E%3Crect%20width=%2230%22%20height=%2213.34%22%20fill=%22%23DD0000%22/%3E%3Crect%20width=%2230%22%20height=%226.67%22%20fill=%22%23000%22/%3E%3C/svg%3E"); }
.flag-gb{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2040%22%3E%3Crect%20width=%2260%22%20height=%2240%22%20fill=%22%23012169%22/%3E%3Cpath%20d=%22M0%200L60%2040M60%200L0%2040%22%20stroke=%22%23fff%22%20stroke-width=%228%22/%3E%3Cpath%20d=%22M0%200L60%2040M60%200L0%2040%22%20stroke=%22%23C8102E%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%200V40M0%2020H60%22%20stroke=%22%23fff%22%20stroke-width=%2212%22/%3E%3Cpath%20d=%22M30%200V40M0%2020H60%22%20stroke=%22%23C8102E%22%20stroke-width=%227%22/%3E%3C/svg%3E"); }
@media (max-width:520px){ .flag{ width:26px; height:17px; } .lang-flags{ gap:4px; } }

/* ── nav: alternatives dropdown + docs link ── */
.navmore{ display:flex; align-items:center; gap:18px; margin-left:6px; }
.navmore a, .navmenu summary{ color:var(--text-dim); font-size:14px; font-weight:600; cursor:pointer; list-style:none; white-space:nowrap; }
.navmore a:hover, .navmenu summary:hover{ color:var(--text); text-decoration:none; }
.navmenu{ position:relative; }
.navmenu summary::-webkit-details-marker{ display:none; }
.navmenu summary::after{ content:"▾"; margin-left:6px; font-size:11px; opacity:.7; }
.navmenu .menu{ position:absolute; top:calc(100% + 14px); left:-14px; z-index:30; min-width:250px; padding:10px;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 24px 60px -20px rgba(0,0,0,.8); }
.navmenu .menu a{ display:block; padding:8px 10px; border-radius:8px; font-size:14px; }
.navmenu .menu a:hover{ background:rgba(255,255,255,0.05); }
.navmenu .menu a[aria-current]{ color:var(--text); background:rgba(10,110,209,0.18); }
.navmenu .mh{ padding:8px 10px 4px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.navmenu .mh:not(:first-child){ margin-top:6px; border-top:1px solid var(--border); padding-top:12px; }
@media (max-width:820px){ .navmenu{ display:none; } .navmore{ margin-left:0; } }
/* The AO Registry link points at another host and is one more word in the bar: without JavaScript (no menu panel) a narrow bar has no room
   for it — the footer links it too. With JavaScript it is in the menu panel like the docs link. */
@media (max-width:820px){ nav.top:not(.js) .navmore a.reg{ display:none; } }
@media (max-width:520px){ .navmore a{ font-size:13px; } }

/* ── footer: second/third rows ── */
footer.site .altlist{ flex-basis:100%; padding-top:14px; border-top:1px solid var(--border); font-size:.82rem; }
footer.site .altlist span{ color:var(--text-faint); margin-right:6px; }

/* Small phones: logo + "Docs" + two flags must fit one row (measured: 332px needed vs 297px available at 360px). */
@media (max-width:520px){
  nav.top .wrap{ padding:0 14px; gap:8px; }
  .navmore{ gap:10px; }
  .navmore a{ font-size:12.5px; }
}
@media (max-width:360px){
  .navmore a{ font-size:12px; }
  .flag{ width:22px; height:15px; }
}
@media (max-width:340px){
  .navmore{ gap:8px; }
}

/* Long German compounds ("Datenschutzbeauftragter", "Datenschutzaufsichtsbehörde") must wrap on narrow phones, not widen the page. */
body{ overflow-wrap:break-word; }
h1,h2,h3{ hyphens:auto; -webkit-hyphens:auto; }

/* The FAQ styles target every <details>/<summary>; the nav menu is a <details> too and must not inherit the card look. */
details.navmenu{ background:none; border:0; border-radius:0; padding:0; margin:0; }
.navmenu summary{ padding:0; font-weight:600; }
.navmenu summary::after{ content:"▾"; float:none; margin-left:6px; font-size:13px; line-height:1; color:inherit; opacity:.8; }
.navmenu[open] summary::after{ content:"▴"; }
.badge.ok{ background:rgba(53,208,186,0.15); color:var(--accent); }

/* With the alternatives menu + docs link in the nav, the in-page anchor links no longer fit beside them below ~1180px
   (they wrapped onto two lines). They are a convenience only — the sections are one scroll away — so they step aside first. */
nav.top .links a{ white-space:nowrap; }
@media (max-width:1180px){ nav.top .links{ display:none; } }

/* ── mobile menu (hamburger) ──
   Below 820px the anchor links, the "Alternativen" menu and the docs link used to be hidden with no way to reach
   them. landing.js creates the button and marks the nav `.js`; EVERYTHING below is scoped to `nav.top.js`, so
   without JavaScript the nav keeps its earlier small-screen behaviour (docs link in the bar, no menu) rather than
   losing its links behind a button that cannot open. The panel is the existing .links / .navmore blocks, restyled
   as a column under the bar — no duplicated markup, so DE, EN and every page with the shared nav stay identical. */
.navtoggle{ display:none; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:none; color:var(--text);
  cursor:pointer; align-items:center; justify-content:center; }
.navtoggle:hover{ background:rgba(255,255,255,0.06); }
.navtoggle:focus-visible{ outline:2px solid var(--brand-light); outline-offset:2px; }
.navtoggle span, .navtoggle span::before, .navtoggle span::after{ display:block; width:20px; height:2px; border-radius:2px; background:currentColor; }
.navtoggle span{ position:relative; transition:background .15s; }
.navtoggle span::before, .navtoggle span::after{ content:""; position:absolute; left:0; transition:transform .18s, top .18s; }
.navtoggle span::before{ top:-6px; }
.navtoggle span::after{ top:6px; }
.navtoggle[aria-expanded="true"] span{ background:transparent; }
.navtoggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (prefers-reduced-motion:reduce){ .navtoggle span, .navtoggle span::before, .navtoggle span::after{ transition:none; } }

@media (max-width:820px){
  /* the bar: wordmark ... flags, CTA, button — the panel wraps onto a row of its own below it */
  nav.top.js .wrap{ flex-wrap:wrap; height:auto; row-gap:0; align-content:flex-start; }
  nav.top.js .wordmark{ order:0; min-height:64px; }
  nav.top.js .spacer{ order:1; }
  nav.top.js .lang-flags{ order:2; }
  nav.top.js .btn.sm{ order:3; }
  nav.top.js .navtoggle{ order:4; display:inline-flex; margin-right:-8px; }

  /* collapsed by default: the docs link leaves the bar too (it moves into the panel) */
  nav.top.js .links, nav.top.js .navmore{ display:none; }

  /* open: one scrollable column; a tall menu on a short (landscape) phone must scroll, not run off the screen */
  nav.top.js.open{ max-height:100vh; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
  /* the bar is 72% opaque so the page shows through it; a full-height panel over content needs to be readable */
  nav.top.js.open{ background:rgba(9,12,17,0.97); }
  nav.top.js.open .links, nav.top.js.open .navmore{ display:flex; flex-direction:column; align-items:stretch; flex-basis:100%; margin:0; gap:0; }
  nav.top.js.open .links{ order:10; padding-top:4px; border-top:1px solid var(--border); }
  nav.top.js.open .navmore{ order:11; padding-bottom:14px; }
  nav.top.js.open .links a, nav.top.js.open .navmore > a, nav.top.js.open .navmenu summary{
    display:block; padding:13px 2px; font-size:15px; }
  nav.top.js.open .navmenu{ display:block; }
  nav.top.js.open .navmenu .menu{ position:static; min-width:0; padding:0 0 6px 12px; background:none; border:0; box-shadow:none; }
  nav.top.js.open .navmenu .menu a{ padding:10px 8px; font-size:14.5px; }
}