/* brainyweb.io — shared stylesheet for /, /de/ and /es/
   Dark only: the logo is white-and-glow on transparent and has no light
   variant, so there is no sensible light theme to switch to. */

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold-webfont.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* sampled from the logo and the hero image */
  --cyan:      #28befc;
  --cyan-soft: #4ccbfd;
  --violet:    #8261fb;
  --violet-sf: #9b86fc;

  --bg:        #070b14;
  --surface:   #0e1420;
  --surface-2: #121a28;
  --line:      #1c2433;
  --ink:       #e8edf5;
  --ink-soft:  #8b97ab;

  --grad: linear-gradient(90deg, var(--cyan), var(--violet));

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-soft); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------- language bar */
.langbar {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  padding: 0 26px;
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid var(--line);
}
.langbar a,
.langbar span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 0 11px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.langbar a { color: var(--ink-soft); }
.langbar a:hover { color: var(--ink); text-decoration: none; }
.langbar span[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--cyan);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  background-color: #02050d;
  background-image:
    linear-gradient(180deg,
      rgba(7, 11, 20, 0.70) 0%,
      rgba(7, 11, 20, 0.78) 55%,
      rgba(7, 11, 20, 0.97) 100%),
    url("/hero.jpg");
  background-size: cover;
  background-position: center;
  padding: 82px 26px 76px;
  text-align: center;
}
/* hairline of brand colour where the hero meets the page */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0.85;
}

.logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 26px;
}

h1 {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.38;
  color: #fff;
}
.lede {
  max-width: 660px;
  margin: 16px auto 0;
  color: #b9c4d4;
  font-size: 0.98rem;
  line-height: 1.68;
}

/* -------------------------------------------------------------- layout */
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 26px; }

section.block {
  padding: 62px 0;
  border-bottom: 1px solid var(--line);
}
section.block:last-of-type { border-bottom: 0; }

h2 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px 0 20px;
  background: var(--grad);
}

p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

.seclede { max-width: 780px; color: var(--ink-soft); }

/* ------------------------------------------------------ service groups */
.group { margin-top: 46px; }
.group h3 {
  margin: 0 0 6px;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--cyan);
}
.grouplede {
  max-width: 780px;
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.svc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px 20px 22px;
  overflow: hidden;
}
.svc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
}
.svc:hover { background: var(--surface-2); border-color: #26324a; }
.svc h4 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}
.svc p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.89rem;
  line-height: 1.62;
}

/* ------------------------------------------------------------- contact */
.mail {
  display: inline-block;
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 700;
}
.phone {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.phone:hover { color: var(--cyan); }

/* ------------------------------------------------------------- imprint */
.imprint {
  background: #050810;
  border-top: 1px solid var(--line);
}
.imprint h2 { font-size: 1.22rem; }
.imprint h2::after { width: 40px; height: 2px; margin: 12px 0 18px; }

dl { margin: 0; }
dt {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
dt:first-child { margin-top: 0; }
dd { margin: 3px 0 0; font-size: 0.93rem; }

/* native disclosure, no JavaScript */
.accordion { margin-top: 28px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--cyan);
  font-weight: 700;
}
details[open] > summary::before { content: "\2013"; }
summary:hover { color: var(--cyan); }
details p {
  margin: 0 0 10px 1.2em;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.68;
}
details p:last-child { margin-bottom: 15px; }

.legal {
  margin-top: 22px;
  color: #6d7a8d;
  font-size: 0.76rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 880px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero    { padding: 56px 20px 52px; }
  .logo    { max-width: 230px; }
  h1       { font-size: 1.16rem; }
  .wrap    { padding: 0 20px; }
  section.block { padding: 44px 0; }
  h2       { font-size: 1.42rem; }
  .cards   { grid-template-columns: 1fr; }
  .group   { margin-top: 34px; }
  .langbar { justify-content: center; gap: 18px; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}