/* Home of AI brand layer — taken from homeofai.nl:
   the wordmark (homeofai, "of" in violet, Be Vietnam Pro 700), the violet
   accent, and the founder portrait. This file is the whole brand surface:
   change the accent here and it moves through the entire site. */
@import url("be-vietnam-pro.css");

:root {
  /* the captured design system's accent, repointed at the real brand violet */
  --token-b30191df-7460-445d-a666-adc984b0fddb: #7c3aed;   /* accent */
  --token-cc8ae5ca-9470-4013-bbf4-fbf66f3c4dab: rgba(124, 58, 237, 0.2);
  --token-3d9f3cfc-8b95-49b0-a3b6-93bad3cf923f: #2b1160;   /* deep accent (icon fills) */
  --hoa-brand: #7c3aed;
}

/* Some anchors in the captured markup carry no colour of their own (the original
   filled them with an SVG icon), so they fell through to the browser's default
   link blue. Lowest possible specificity — every real rule still wins. */
a { color: inherit; }

/* ---- wordmark ---- */
.hoa-logo,
a[aria-label^="Home of AI"] {
  font-family: "Be Vietnam Pro", -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--token-39611b59-dddd-49c0-9302-bc35e4840470, #fff);
  /* the captured logo slot is a flex row with a gap, which would space the
     wordmark out into "home of ai" — it is one word */
  display: inline !important;
  gap: 0 !important;
  word-spacing: 0;
}
.hoa-logo span,
a[aria-label^="Home of AI"] .hoa-logo__accent { color: var(--hoa-brand); }

/* the captured header swaps variants per section; the wordmark follows */
[class*="framer-v-1npx5hi"] a[aria-label^="Home of AI"] { color: #0a0a0a; }
[class*="framer-v-13tv8i6"] a[aria-label^="Home of AI"],
[class*="framer-v-1vi76t9"] a[aria-label^="Home of AI"] { color: #fff; }

/* ---- portrait ---- */
.hoa-portrait { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.hoa-portrait img {
  /* the captured stylesheet forces images to 100% width with !important */
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  aspect-ratio: 682 / 1024;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15) contrast(1.02);
}
.hoa-portrait__who { padding-bottom: 8px; }
.hoa-portrait__name { font-size: 22px; margin: 0 0 6px; font-weight: 400; }
.hoa-portrait__role {
  font-family: var(--hoa-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--hoa-brand);
  margin: 0;
}
@media (max-width: 809px) { .hoa-portrait img { width: 180px !important; max-width: 180px !important; } }

/* ---- the orb layer ----
   The sphere is the page's backdrop, not a hero decoration: one fixed canvas
   behind everything, with the page's dark ground turned translucent so the
   content reads as being inside the shell. */
.hoa-orb-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}


/* The orb sits BEHIND the page and the dark ground is translucent, so the shell
   shows through the gaps while text keeps its own plate to sit on. Blending the
   orb over the top instead put the starfield across every line of copy.
   --hoa-ground-alpha is the one number that tunes how present it is. */
:root { --hoa-ground-alpha: 0; }
:root body { background: transparent !important; }
html { background: #06060c; }
:root {
  --token-e5662dc5-8379-47af-9af3-a158a621738a: rgba(9, 10, 14, var(--hoa-ground-alpha));
}

/* ---- buttons ----
   Every pill on the site is the brand violet. The captured layout ships two
   variants of the same component — a light one in the header and at the closing
   CTA, an accent one in the page — so this repaints the component itself rather
   than chasing variants. */
.framer-XyqZK {
  background-color: var(--token-b30191df-7460-445d-a666-adc984b0fddb, #7c3aed) !important;
}
.framer-XyqZK p,
.framer-XyqZK a,
.framer-XyqZK span {
  --framer-text-color: #fff !important;
  color: #fff !important;
}

/* ---- language ----
   Two ways in, one behaviour. The flags drifting around the orb are real links
   (particle-sphere.js lays an <a> over each drawn label), and the pill in the
   corner carries the same list for everyone who never sees the orb: reduced
   motion, ?shaders=0, or a phone where the labels are small. */

/* the orb's hit areas. Fixed and above the page so a flag drawn over the top of
   a section is still clickable; inert everywhere a label is not. */
.hoa-orb-hits {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.hoa-orb-hit {
  position: absolute;
  pointer-events: auto;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
/* the name is drawn on the canvas below; the link carries it for screen readers */
.hoa-orb-hit > span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.hoa-orb-hit:hover,
.hoa-orb-hit:focus-visible {
  background: rgba(124, 58, 237, 0.18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 8px 26px rgba(0, 0, 0, 0.45);
  outline: none;
}

/* the pill */
.hoa-lang {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  /* NOT the site's mono: Disket Mono is a caps-only Latin face, so Ελληνικά,
     Български and Lietuvių fell back to another font mid-word. A language menu
     has to render 23 languages in one voice, so it uses the system UI stack,
     which is the only thing guaranteed to have all of them. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.hoa-lang__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(12, 12, 20, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: #fff;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.hoa-lang__button:hover,
.hoa-lang__button:focus-visible {
  border-color: rgba(124, 58, 237, 0.75);
  background: rgba(20, 14, 36, 0.78);
  outline: none;
}
.hoa-lang__button canvas { display: block; border-radius: 2px; }
.hoa-lang__caret { opacity: 0.6; font-size: 10px; }

.hoa-lang__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 2px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(10, 10, 18, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.hoa-lang__menu[hidden] { display: none; }
.hoa-lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.hoa-lang__item canvas { display: block; border-radius: 2px; flex: none; }
.hoa-lang__item:hover,
.hoa-lang__item:focus-visible {
  background: rgba(124, 58, 237, 0.22);
  color: #fff;
  outline: none;
}
.hoa-lang__item[aria-current="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.6);
}

@media (max-width: 809px) {
  .hoa-lang { right: 12px; bottom: 12px; }
  .hoa-lang__menu { grid-template-columns: 1fr; max-height: 50vh; }
  .hoa-lang__name { display: none; }
}