@font-face {
  font-family: Gilroy;
  src: url("GilroyRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Gilroy;
  src: url("GilroyLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: Gilroy;
  src: url("GilroyMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Gilroy;
  src: url("GilroyBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Gilroy;
  src: url("GilroyRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

html {
  scroll-behavior: smooth;
  font-family: Gilroy, Helvetica, sans-serif;
  ;
  letter-spacing: 0.003em;
}

img {
  user-select: none;
  -webkit-user-select: none;
  /* For Safari and older Chrome versions */
  -moz-user-select: none;
  /* For Firefox */
  -ms-user-select: none;
  /* For Internet Explorer and Edge */
}

a{
  word-wrap: break-word;
}

/* NEW SITE */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  /* padding: 0 20px; */
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {

  .container-sm,
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {

  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {

  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {

  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1320px;
  }
}

.gradient-text {
  background: -webkit-linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
  background: linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.dark .border-gradient {
  background:
    linear-gradient(#11182F, #11182F) padding-box,
    linear-gradient(to bottom, transparent, #01F1FF 58%) border-box;
  border: 1px solid transparent;
}

.dark .only-light {
  display: none;
}

.only-dark {
  display: none;
}

.dark .only-dark {
  display: inherit;
}

.menu-link {
  font-size: 16px;
  line-height: 33.42px;
  color: #0D0E12;
}

.dark .menu-link {
  color: #fff;
}

.nav-link ul li a.active {
  color: #0053D0;

}

.dark .nav-link ul li a.active {
  color: #66D9E2;
}

@media (min-width:1024px) {

  .nav-link-text,
  .menu-link {
    display: inline-block;
    position: relative;
    color: #0D0E12;
  }

  .nav-link-text::before,
  .active .nav-link-text::before,
  .menu-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    right: 0;
    /* background-color: initial; */
    transition: width 0.25s ease-out;
  }

  .menu-link::before {
    background-color: #0D0E12;
  }

  .dark .menu-link::before {
    background-color: #fff;
  }

  .active .nav-link-text::before {
    width: 100%;
  }

  .nav-link:hover .nav-link-text::before,
  .menu-link:hover::before {
    width: 100%;
    left: 0;
    right: auto;
  }
}


.sub-menu {
  visibility: hidden;
  opacity: 0;
  color: #505158;
}

.sub-menu .no-hover {
  color: #505158 !important;
}

.dark .sub-menu,
.dark .sub-menu .no-hover {
  color: #fff !important;
}

.dark .sub-menu li:hover {
  color: #66D9E2;
}

.sub-menu li:hover {
  color: #0053D0;
}

.sub-menu {
  transition: all .3s ease !important;
}

.nav-link span svg,
header nav {
  transition: all 0.5s ease;
}

.nav-link:hover span svg {
  transform: rotate(180deg);
}

@media (min-width:1024px) {

  .nav-link:hover .sub-menu,
  .nav-link:focus-within .sub-menu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }
}

@media (max-width: 1024px) {
  .sub-menu {
    max-height: 0;
    transform: translateY(-10px);
    transition: all .7s ease !important;
  }

  .active .sub-menu {
    max-height: 600px;
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }

  header nav {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
  }

  header nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
}

.lock-scroll {
  overflow: hidden;
}

/* hero */
header {
  transition: all .7s ease;
}

.primary-header {
  background: linear-gradient(270deg, #0053D0 35.85%, #0197FF 94.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0px 4px 74px #e9e7e2;
}

.dark .primary-header {
  background: linear-gradient(270deg, #70F0F9 100%, #70F0F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.secondary-header {
  color: #606c71;
  text-shadow: 0px 4px 74px #e9e7e2;
}

.dark .secondary-header {
  color: #fff;
  text-shadow: none;
}

.description {
  width: 31rem;
}

p a {
  color: #0053D0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark p a {
  color: #70F0F9;
}

/* For Contact & Invitation Page */
.primary-header-contact {
  background: linear-gradient(251.16deg, #53c1ff 1.1%, #0053d0 100.82%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0px 4px 74px #e9e7e2;
}

.dark .primary-header-contact {
  background: linear-gradient(270deg, #70F0F9 100%, #70F0F9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.secondary-header-contact {
  text-shadow: 0px 4px 74px #e9e7e2;
}

.dark .secondary-header-contact {
  text-shadow: none;
}

.content_copy_with_tooltip {
  background-color: #f8f8f6;
  border-radius: 50px;
  padding-bottom: 4px;
  padding-top: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.content_copy_with_tooltip .tooltip {
  vertical-align: -6px;
}

.content_copy_with_tooltip .content {
  font-size: 15px;
}

.contact-tab>.contact-tab-content,
.job-tab>.job-tab-content {
  opacity: 0;
  max-height: 0;
  transition: all 0.5s ease;
  visibility: hidden;
  transform: translateY(10px);
  overflow: hidden;
}

.contact-tab svg,
.job-tab svg {
  transform: rotate(-180deg);
  transition: all .5s ease;
}

.contact-tab.active>.contact-tab-content,
.job-tab.active>.job-tab-content {
  opacity: 1;
  max-height: 300px;
  visibility: visible;
  transform: translateY(0px);
}

.for-tablet .contact-tab.active>.contact-tab-content,
.for-tablet .job-tab.active>.job-tab-content {
  min-height: 450px;
}

.contact-tab.active svg,
.contact-tab:hover svg,
.job-tab.active svg,
.job-tab:hover svg {
  transform: rotate(0deg);
}

.d-none-if-js-disabled {
  display: none !important;
}
/* PRA theme for smp-server's web page on relay.pakteris.com  (see ops/relay-web.md)
 * Appended to /media/style.css by pra-relay-theme each time smp-server regenerates its site.
 * Colors match the PRA website (css/style.css). Fonts are served from /media, never from an
 * outside host, so opening a contact link tells nobody else the visitor's IP address.
 * The page always uses this one dark theme; the light/dark switch is hidden. */

@font-face { font-family: "PRA Rajdhani"; font-weight: 600; font-display: swap; src: url("pra-rajdhani-600.woff2") format("woff2"); }
@font-face { font-family: "PRA Rajdhani"; font-weight: 700; font-display: swap; src: url("pra-rajdhani-700.woff2") format("woff2"); }
@font-face { font-family: "PRA Plex Mono"; font-weight: 400; font-display: swap; src: url("pra-plexmono-400.woff2") format("woff2"); }

:root {
  --pra-bg: #060a12;
  --pra-panel: #0b1622;
  --pra-panel-2: #08111b;
  --pra-border: #16324a;
  --pra-border-2: #1f5a6e;
  --pra-cyan: #3fe0ff;
  --pra-on-cyan: #04121a;
  --pra-amber: #ffb347;
  --pra-head: #f2fbfe;
  --pra-text: #cfe3ee;
  --pra-text-2: #9fbfcd;
  --pra-muted: #7fa3b5;
  --pra-ui: "PRA Rajdhani", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pra-mono: "PRA Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pra-cut: 12px;
  color-scheme: dark;
}

/* ---- Always dark: show the dark-mode logos and hide the switch ---- */
.dark\:hidden { display: none !important; }
.dark\:inline-block { display: inline-block !important; }
.dark\:block { display: block !important; }
@media (min-width: 1024px) {
  .dark\:lg\:flex { display: flex !important; }
  .dark\:lg\:hidden { display: none !important; }
}
.theme-switch-btn { display: none !important; }

/* ---- Base ---- */
html, body {
  background: var(--pra-bg) !important;
  color: var(--pra-text) !important;
  font-family: var(--pra-ui) !important;
  font-weight: 600;
}
body * { font-family: var(--pra-ui) !important; }
body :is(p, span, td, li, div, label, small) { color: var(--pra-text) !important; }
body :is(h1, h2, h3, h4) { color: var(--pra-head) !important; letter-spacing: 0.02em; }
::selection { background: var(--pra-cyan); color: var(--pra-on-cyan); }

/* ---- Surfaces ---- */
header, header nav, #menu,
.bg-white, .bg-transparent, .lg\:bg-transparent, .bg-primary-bg-light, .dark\:bg-primary-bg-dark,
.bg-\[\#F0F1F2\], .dark\:bg-\[\#0C0B13\] {
  background: var(--pra-bg) !important;
}
.bg-secondary-bg-light, .dark\:bg-secondary-bg-dark {
  background: var(--pra-panel-2) !important;
  border-top: 1px solid var(--pra-border);
  border-bottom: 1px solid var(--pra-border);
}
.bg-\[\#D9E7ED\], .dark\:bg-\[\#0E2B57\], footer {
  background: var(--pra-panel) !important;
  border-top: 1px solid var(--pra-border-2);
}
header { border-bottom: 1px solid var(--pra-border); }
hr, .border-\[\#A8B0B4\] { border-color: var(--pra-border) !important; }
/* The decorative glows and diamonds behind headings and the phone */
.dark\:bg-gradient-radial, .dark\:lg\:bg-gradient-radial, .dark\:bg-gradient-radial-mobile { background-image: none !important; }

/* ---- Headings ---- */
.primary-header, .primary-header-contact, .gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--pra-head) !important;
  color: var(--pra-head) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(63, 224, 255, 0.35);
}
.secondary-header, .secondary-header-contact { color: var(--pra-text-2) !important; -webkit-text-fill-color: var(--pra-text-2) !important; }
.text-\[\#606C71\], h2.text-\[\#606C71\] {
  color: var(--pra-amber) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.35rem !important;
}
.text-active-blue { color: var(--pra-cyan) !important; }

/* ---- Server information table: labels in UI type, values as terminal data ---- */
#public-info td, #configuration td, table td { padding-top: 6px; padding-bottom: 6px; }
table td:first-child { color: var(--pra-muted) !important; letter-spacing: 0.04em; }
table td + td, table td + td * { font-family: var(--pra-mono) !important; font-weight: 400 !important; font-size: 0.92rem; }
table td + td { color: var(--pra-text) !important; }

/* ---- Links ---- */
a, a span, .text-primary-light, .dark\:text-primary-dark { color: var(--pra-cyan) !important; }
a:hover { text-decoration: underline; }
header .nav-link-text { color: var(--pra-text) !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem !important; }
header .nav-link-text::before { background: var(--pra-cyan) !important; }

/* ---- Buttons: PRA cut-corner style ---- */
.bg-primary-light, .dark\:bg-primary-dark, .bg-\[\#0053D0\], .bg-\[\#0197FF\] {
  background: var(--pra-cyan) !important;
  color: var(--pra-on-cyan) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - var(--pra-cut)) 0, 100% var(--pra-cut), 100% 100%, var(--pra-cut) 100%, 0 calc(100% - var(--pra-cut)));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(63, 224, 255, 0.25);
}
.bg-primary-light *, .dark\:bg-primary-dark *, .bg-\[\#0053D0\] *, .bg-\[\#0197FF\] * { color: var(--pra-on-cyan) !important; }
.bg-\[\#D9ECFF\], a.border-\[\#0053D0\] {
  background: var(--pra-panel) !important;
  color: var(--pra-cyan) !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - var(--pra-cut)) 0, 100% var(--pra-cut), 100% 100%, var(--pra-cut) 100%, 0 calc(100% - var(--pra-cut)));
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bg-\[\#D9ECFF\]:hover, a.border-\[\#0053D0\]:hover { background: #10243a !important; text-decoration: none; }

/* ---- Contact-link pages on phones: the three numbered step boxes ---- */
.rounded-\[30px\].border-\[\#A8B0B4\] {
  border-radius: 0 !important;
  border-color: var(--pra-border-2) !important;
  --tw-border-opacity: 1 !important;
  background: var(--pra-panel) !important;
}

/* ---- Icons ---- */
.fill-primary-light, .dark\:fill-primary-dark { fill: var(--pra-cyan) !important; }
.fill-grey-black, .dark\:fill-white { fill: var(--pra-text) !important; }

/* ---- Contact-link pages: the QR code sits in a PRA panel instead of SimpleX's phone picture.
   The code itself stays dark on white so every phone camera can read it. ---- */
img[src$="contact_page_mobile.png"] { display: none !important; }
:has(> canvas.conn_req_uri_qrcode) {
  margin: 0 !important;
  padding: 22px 22px 26px !important;
  background: var(--pra-panel) !important;
  border: 1px solid var(--pra-border-2);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow: 0 0 24px rgba(63, 224, 255, 0.18);
}
:has(> canvas.conn_req_uri_qrcode) > p {
  color: var(--pra-amber) !important;
  font-family: var(--pra-mono) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem !important;
  max-width: none !important;
  margin-bottom: 14px;
}
canvas.conn_req_uri_qrcode { background: #ffffff; padding: 10px; box-sizing: content-box; }