@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}


:root {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-soft: #eef3fb;
  --surface-glass: rgba(255,255,255,.84);

  --text: #0e2346;
  --text-soft: #617089;
  --text-faint: #8996aa;

  --border: rgba(14,35,70,.10);

  --blue: #176eff;
  --blue-deep: #1746e8;
  --cyan: #55ccf8;
  --violet: #8a63f7;
  --lavender: #b38cf6;

  --gradient:
    linear-gradient(
      135deg,
      #176eff 0%,
      #4287ff 42%,
      #8a63f7 100%
    );

  --gradient-text:
    linear-gradient(
      90deg,
      #176eff,
      #8a63f7
    );

  --shadow-small:
    0 12px 38px rgba(22,45,82,.08);

  --shadow-large:
    0 28px 90px rgba(22,45,82,.16);

  --radius-small: 18px;
  --radius-medium: 26px;
  --radius-large: 36px;

  --wrap: 1240px;
}


:root[data-theme="dark"] {
  --bg: #081426;
  --surface: #0e1b30;
  --surface-soft: #13233b;
  --surface-glass: rgba(14,27,48,.84);

  --text: #f7faff;
  --text-soft: #b5c1d2;
  --text-faint: #8190a6;

  --border: rgba(255,255,255,.10);

  --shadow-small:
    0 14px 40px rgba(0,0,0,.24);

  --shadow-large:
    0 30px 95px rgba(0,0,0,.36);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  color: var(--text);

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(85,204,248,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 5%,
      rgba(138,99,247,.13),
      transparent 28%
    ),
    var(--bg);

  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.5;

  transition:
    background-color .18s ease,
    color .18s ease;
}


a {
  color: inherit;
  text-decoration: none;
}


button {
  font: inherit;
}


img {
  display: block;
  max-width: 100%;
}


.wrap {
  width: min(
    calc(100% - 40px),
    var(--wrap)
  );

  margin-inline: auto;
}


.background-glow {
  position: fixed;

  z-index: -1;

  width: 540px;
  height: 540px;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;
}


.background-glow--one {
  top: 15%;
  left: -260px;

  background:
    rgba(85,204,248,.18);
}


.background-glow--two {
  top: 43%;
  right: -260px;

  background:
    rgba(138,99,247,.15);
}



/* HEADER */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  border-bottom:
    1px solid transparent;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.site-header.is-scrolled {
  border-color: var(--border);

  background:
    color-mix(
      in srgb,
      var(--bg) 82%,
      transparent
    );

  backdrop-filter: blur(20px);

  box-shadow:
    0 8px 30px
    rgba(12,28,52,.06);
}


.header-inner {
  min-height: 90px;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  gap: 34px;

  align-items: center;
}


.brand {
  display: inline-flex;

  align-items: center;
}


.brand-logo {
  width: 210px;

  height: auto;
}


.brand-logo--dark {
  display: none;
}


:root[data-theme="dark"]
.brand-logo--light {
  display: none;
}


:root[data-theme="dark"]
.brand-logo--dark {
  display: block;
}


.main-nav {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 30px;

  color: var(--text-soft);

  font-size: .92rem;
}


.main-nav a {
  transition:
    color .15s ease,
    transform .15s ease;
}


.main-nav a:hover {
  color: var(--text);

  transform: translateY(-1px);
}


.header-actions {
  display: flex;

  align-items: center;

  gap: 12px;
}



/* THEME SWITCHER */

.theme-switcher {
  display: flex;

  gap: 3px;

  padding: 4px;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background: var(--surface);
}


.theme-switcher button {
  min-height: 34px;

  padding: 0 12px;

  border: 0;

  border-radius: 999px;

  color: var(--text-soft);

  background: transparent;

  cursor: pointer;

  font-size: .78rem;

  font-weight: 700;
}


.theme-switcher button:hover {
  color: var(--text);
}


.theme-switcher button.is-active {
  color: #ffffff;

  background: var(--gradient);

  box-shadow:
    0 6px 16px
    rgba(60,91,235,.23);
}



/* BUTTONS */

.button {
  min-height: 44px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 0 20px;

  border-radius: 999px;

  font-size: .92rem;

  font-weight: 750;

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}


.button:hover {
  transform: translateY(-2px);
}


.button--primary {
  color: #ffffff;

  background: var(--gradient);

  box-shadow:
    0 14px 32px
    rgba(62,91,238,.28);
}


.button--secondary,
.button--login {
  border:
    1px solid var(--border);

  background: var(--surface);

  color: var(--text);
}


.button--large {
  min-height: 56px;

  padding-inline: 27px;

  font-size: 1rem;
}



/* GENERIC */

.eyebrow {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--blue);

  font-size: .74rem;

  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.eyebrow span {
  width: 22px;
  height: 2px;

  border-radius: 999px;

  background: var(--gradient);
}


.eyebrow--light {
  color: rgba(255,255,255,.82);
}


.gradient-text {
  color: transparent;

  background: var(--gradient-text);

  background-clip: text;

  -webkit-background-clip: text;
}



/* HERO */

.hero {
  min-height: 720px;

  display: grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(430px,.95fr);

  align-items: center;

  gap: 65px;

  padding-top: 74px;
  padding-bottom: 100px;
}


.hero h1 {
  max-width: 800px;

  margin:
    20px
    0
    26px;

  font-size:
    clamp(
      3rem,
      5.5vw,
      5.35rem
    );

  line-height: .99;

  letter-spacing: -.055em;
}


.hero-lead {
  max-width: 700px;

  margin: 0;

  color: var(--text-soft);

  font-size:
    clamp(
      1rem,
      1.7vw,
      1.18rem
    );

  line-height: 1.75;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;
}


.trust-list {
  display: flex;

  flex-wrap: wrap;

  gap: 24px;

  margin-top: 28px;

  color: var(--text-soft);

  font-size: .9rem;
}


.trust-list span {
  display: flex;

  align-items: center;

  gap: 8px;
}


.trust-list b {
  width: 22px;
  height: 22px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background: var(--gradient);

  font-size: .72rem;
}



/* HERO VISUAL */

.hero-visual {
  position: relative;

  min-height: 590px;
}


.social-preview {
  position: absolute;

  top: 22px;
  right: 25px;

  width: min(
    calc(100% - 20px),
    420px
  );

  padding: 23px;

  border:
    1px solid var(--border);

  border-radius: 30px;

  background: var(--surface-glass);

  backdrop-filter: blur(22px);

  box-shadow: var(--shadow-large);

  transform: rotate(1.3deg);
}


.social-preview-header {
  display: flex;

  align-items: center;
  justify-content: space-between;
}


.social-mini-brand {
  display: flex;

  align-items: center;

  gap: 10px;
}


.social-mini-brand img {
  width: 34px;
  height: 34px;
}


.social-mini-brand strong,
.social-mini-brand small {
  display: block;
}


.social-mini-brand small {
  margin-top: 1px;

  color: var(--text-faint);

  font-size: .73rem;
}


.preview-menu {
  color: var(--text-faint);

  letter-spacing: .12em;
}


.story-row {
  display: flex;

  gap: 10px;

  margin: 22px 0;
}


.story {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border: 2px solid transparent;

  border-radius: 50%;

  color: var(--text);

  background:
    linear-gradient(
      var(--surface),
      var(--surface)
    )
    padding-box,
    var(--gradient)
    border-box;

  font-size: .76rem;

  font-weight: 800;
}


.story--active {
  box-shadow:
    0 0 0 3px
    rgba(23,110,255,.11);
}


.story--new {
  border: 0;

  color: #ffffff;

  background: var(--gradient);
}


.post-user {
  display: flex;

  align-items: center;

  gap: 11px;
}


.avatar {
  width: 41px;
  height: 41px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--gradient);

  font-weight: 800;
}


.post-user strong,
.post-user small {
  display: block;
}


.post-user small {
  margin-top: 1px;

  color: var(--text-faint);

  font-size: .73rem;
}


.post-copy {
  margin: 15px 0;

  color: var(--text-soft);

  font-size: .93rem;
}


.preview-landscape {
  position: relative;

  height: 190px;

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      #87d6ff 0%,
      #bbb3ff 42%,
      #f8bd91 67%,
      #38547d 68%,
      #152641 100%
    );
}


.preview-sun {
  position: absolute;

  top: 43px;
  right: 58px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #ffe19b;

  box-shadow:
    0 0 40px 20px
    rgba(255,220,150,.22);
}


.preview-mountain {
  position: absolute;

  bottom: 0;

  width: 0;
  height: 0;

  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 110px solid #20385d;
}


.mountain-one {
  left: -70px;
}


.mountain-two {
  right: -90px;

  border-bottom-color: #29486f;
}


.friends {
  position: absolute;

  left: 50%;
  bottom: 16px;

  display: flex;

  transform: translateX(-50%);
}


.friends span {
  width: 28px;
  height: 28px;

  margin-left: -5px;

  border:
    2px solid rgba(255,255,255,.8);

  border-radius: 50%;

  background: #172237;
}


.friends span:nth-child(2) {
  background: #9868e5;
}


.friends span:nth-child(3) {
  background: #d98d67;
}


.friends span:nth-child(4) {
  background: #4373ef;
}


.post-actions {
  display: flex;

  gap: 20px;

  margin-top: 15px;

  color: var(--text-soft);
}


.post-actions .share {
  margin-left: auto;
}


.floating-card {
  position: absolute;

  border:
    1px solid var(--border);

  background: var(--surface-glass);

  backdrop-filter: blur(20px);

  box-shadow: var(--shadow-large);
}


.circle-preview {
  left: 0;
  bottom: 70px;

  width: 265px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  padding: 17px;

  border-radius: 22px;
}


.circle-preview small,
.circle-preview strong {
  display: block;
}


.circle-preview small {
  color: var(--text-faint);
}


.mini-avatars {
  display: flex;
}


.mini-avatars span {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  margin-left: -8px;

  border:
    2px solid var(--surface);

  border-radius: 50%;

  color: white;

  background: var(--gradient);

  font-size: .7rem;

  font-weight: 800;
}


.private-preview {
  right: 0;
  bottom: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 17px;

  border-radius: 20px;
}


.private-icon {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--gradient);

  font-weight: 800;
}


.private-preview small,
.private-preview strong {
  display: block;
}


.private-preview small {
  color: var(--text-faint);
}


.visual-orbit {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.visual-orbit--one {
  top: -5px;
  left: 35px;

  width: 220px;
  height: 220px;

  border:
    48px solid rgba(85,204,248,.07);
}


.visual-orbit--two {
  right: -100px;
  bottom: 15px;

  width: 270px;
  height: 270px;

  border:
    60px solid rgba(138,99,247,.07);
}



/* FEATURES */

.feature-section {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 18px;

  padding-bottom: 110px;
}


.feature-card {
  min-height: 235px;

  padding: 28px;

  border:
    1px solid var(--border);

  border-radius: var(--radius-medium);

  background: var(--surface);

  box-shadow: var(--shadow-small);
}


.feature-icon {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  margin-bottom: 22px;

  border-radius: 16px;

  color: #1559eb;

  background:
    rgba(85,204,248,.15);

  font-weight: 800;
}


.feature-icon--violet {
  color: #7550ed;

  background:
    rgba(138,99,247,.14);
}


.feature-icon--blue {
  background:
    rgba(23,110,255,.12);
}


.feature-card h2 {
  margin: 0 0 10px;

  font-size: 1.2rem;
}


.feature-card p {
  margin: 0;

  color: var(--text-soft);

  line-height: 1.7;
}



/* WORLDS */

.worlds {
  padding:
    90px
    0
    110px;
}


.section-heading {
  display: grid;

  grid-template-columns:
    1.2fr
    .8fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 32px;
}


.section-heading h2 {
  margin: 13px 0 0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.4rem
    );

  letter-spacing: -.045em;
}


.section-heading > p {
  margin: 0;

  color: var(--text-soft);

  line-height: 1.75;
}


.world-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 20px;
}


.world-card {
  position: relative;

  min-height: 430px;

  overflow: hidden;

  padding: 32px;

  border:
    1px solid var(--border);

  border-radius: var(--radius-large);

  background:
    linear-gradient(
      155deg,
      var(--surface),
      var(--surface-soft)
    );

  box-shadow: var(--shadow-small);
}


.world-card::after {
  content: "";

  position: absolute;

  right: -100px;
  bottom: -120px;

  width: 290px;
  height: 290px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(85,204,248,.12),
      rgba(138,99,247,.16)
    );
}


.world-title {
  display: flex;

  align-items: center;

  gap: 18px;
}


.world-title img {
  width: 76px;
  height: 76px;
}


.world-label,
.world-title small {
  color: var(--text-faint);

  font-size: .76rem;

  text-transform: uppercase;

  letter-spacing: .11em;
}


.world-card h3 {
  margin: 2px 0 0;

  font-size: 1.6rem;

  letter-spacing: -.03em;
}


.world-card h4 {
  max-width: 440px;

  margin:
    25px
    0
    12px;

  font-size: 1.35rem;

  letter-spacing: -.025em;
}


.world-card p {
  max-width: 560px;

  color: var(--text-soft);

  line-height: 1.75;
}


.tag-row {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 24px;
}


.tag-row span {
  padding:
    8px
    12px;

  border:
    1px solid var(--border);

  border-radius: 999px;

  color: var(--text-soft);

  background: var(--surface);

  font-size: .79rem;
}


.text-link {
  position: absolute;

  z-index: 2;

  left: 32px;
  bottom: 31px;

  color: var(--blue);

  font-weight: 800;
}


.business-logo {
  width: 245px;
  max-width: 72%;
  margin-bottom: 20px;
}

.business-logo img {
  width: 100%;
  height: auto;
}

.business-logo--dark {
  display: none;
}

:root[data-theme="dark"] .business-logo--light {
  display: none;
}

:root[data-theme="dark"] .business-logo--dark {
  display: block;
}



/* PRIVACY */

.privacy-section {
  padding-bottom: 110px;
}


.privacy-panel {
  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  gap: 60px;

  align-items: center;

  padding:
    clamp(
      38px,
      5vw,
      70px
    );

  border-radius: 38px;

  color: white;

  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(179,140,246,.38),
      transparent 28%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(85,204,248,.22),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #102b60 0%,
      #1746e8 48%,
      #6246ea 100%
    );

  box-shadow:
    0 30px 95px
    rgba(48,73,177,.27);
}


.privacy-copy h2 {
  max-width: 670px;

  margin:
    18px
    0;

  font-size:
    clamp(
      2.2rem,
      4.3vw,
      3.75rem
    );

  line-height: 1.06;

  letter-spacing: -.048em;
}


.privacy-copy p {
  max-width: 630px;

  color:
    rgba(255,255,255,.79);

  line-height: 1.75;
}


.privacy-example {
  padding: 26px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius: 28px;

  background:
    rgba(4,14,35,.29);

  backdrop-filter: blur(20px);

  box-shadow:
    0 30px 75px
    rgba(0,0,0,.17);
}


.privacy-example-header {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 17px;
}


.verified-icon {
  width: 47px;
  height: 47px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background:
    rgba(255,255,255,.15);

  font-weight: 900;
}


.privacy-example-header small,
.privacy-example-header strong {
  display: block;
}


.privacy-example-header small {
  color:
    rgba(255,255,255,.62);
}


.data-row {
  display: flex;

  justify-content: space-between;

  gap: 22px;

  padding:
    14px
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,.13);

  font-size: .9rem;
}


.data-row b {
  text-align: right;

  font-size: .81rem;
}


.not-shared {
  color: #c3ecff;
}


.verified-pill {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-top: 22px;

  padding:
    11px
    14px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.14);
}


.verified-pill small {
  color:
    rgba(255,255,255,.63);
}



/* CLOSING */

.closing {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 26px;

  padding:
    12px
    0
    105px;
}


.closing > img {
  width: 92px;
  height: 92px;
}


.closing h2 {
  margin:
    8px
    0;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.8rem
    );

  letter-spacing: -.04em;
}


.closing p {
  margin: 0;

  color: var(--text-soft);
}



/* FOOTER */

.site-footer {
  border-top:
    1px solid var(--border);
}

.footer-main,
.footer-bottom {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;
}

.footer-main {
  padding:
    58px 0;

  display: grid;

  grid-template-columns:
    minmax(0,1.5fr)
    minmax(150px,.5fr)
    minmax(150px,.5fr)
    minmax(180px,.6fr);

  gap: 70px;
}

.footer-brand p {
  max-width: 410px;

  margin:
    18px 0 0;

  color: var(--muted);

  font-size: .7rem;

  line-height: 1.65;
}

.footer-column {
  display: grid;

  align-content: start;

  gap: 12px;
}

.footer-column strong {
  margin-bottom: 4px;

  font-family:
    "Nunito Sans",
    sans-serif;

  font-size: .76rem;
}

.footer-column a {
  color: var(--muted);

  font-size: .68rem;
}

.footer-column a:hover {
  color: var(--text);
}

.footer-bottom {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border-top:
    1px solid var(--border);

  color: var(--muted);

  font-size: .62rem;
}


/* RESPONSIVE */

@media (max-width: 1080px) {

  .header-inner {
    grid-template-columns:
      auto
      auto;

    justify-content: space-between;
  }


  .main-nav {
    display: none;
  }


  .hero {
    grid-template-columns: 1fr;
  }


  .hero-visual {
    width: 100%;

    max-width: 660px;

    margin-inline: auto;
  }


  .feature-section {
    grid-template-columns: 1fr;
  }


  .section-heading {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .world-grid {
    grid-template-columns: 1fr;
  }


  .privacy-panel {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 760px) {

  .wrap {
    width:
      min(
        calc(100% - 24px),
        var(--wrap)
      );
  }


  .header-inner {
    min-height: 76px;
  }


  .brand-logo {
    width: 154px;
  }


  .button--login {
    display: none;
  }


  .theme-switcher button {
    min-height: 32px;

    padding:
      0
      8px;

    font-size: .7rem;
  }


  .hero {
    padding-top: 40px;
    padding-bottom: 75px;
  }


  .hero h1 {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4.2rem
      );
  }


  .hero-actions {
    flex-direction: column;
  }


  .hero-actions .button {
    width: 100%;
  }


  .trust-list {
    gap: 13px;
  }


  .hero-visual {
    min-height: 565px;
  }


  .social-preview {
    right: 5px;

    width:
      calc(100% - 10px);
  }


  .circle-preview {
    left: 0;

    bottom: 54px;

    width: 235px;

    transform: scale(.93);

    transform-origin: left bottom;
  }


  .private-preview {
    right: 0;

    max-width: 245px;

    transform: scale(.9);

    transform-origin: right bottom;
  }


  .world-card {
    min-height: 490px;

    padding: 25px;
  }


  .text-link {
    left: 25px;
  }


  .privacy-panel {
    padding:
      30px
      22px;
  }


  .closing {
    grid-template-columns: 1fr;
  }


  .closing > img {
    width: 76px;
    height: 76px;
  }


  .closing .button {
    justify-self: start;
  }


  .footer-inner {
    grid-template-columns: 1fr;

    padding:
      28px
      0;

    text-align: center;
  }


  .footer-brand,
  .footer-links {
    justify-content: center;
  }

}


@media (max-width: 520px) {

  .theme-switcher {
    gap: 1px;
  }


  .theme-switcher button {
    padding:
      0
      7px;
  }


  .hero-visual {
    min-height: 520px;
  }


  .social-preview {
    padding: 18px;
  }


  .preview-landscape {
    height: 165px;
  }


  .data-row {
    flex-direction: column;

    gap: 4px;
  }


  .data-row b {
    text-align: left;
  }

}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .reveal {
    opacity: 1;

    transform: none;
  }

}


/* ==========================================================
   CIRQELA BRAND TYPOGRAPHY
   ========================================================== */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-lockup__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.brand-lockup__text {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;

  white-space: nowrap;
  line-height: 1;
}

.brand-lockup__cirqela,
.brand-wordmark__cirqela {
  font-family:
    "Nunito Sans",
    sans-serif;

  font-weight: 800;
}

.brand-lockup__product,
.brand-wordmark__product {
  font-family:
    "Nunito Sans",
    sans-serif;

  font-weight: 600;
}

.brand-lockup__cirqela {
  font-size: 1.48rem;
  letter-spacing: -0.035em;
}

.brand-lockup__product {
  font-size: 1.22rem;
  letter-spacing: -0.025em;
}

.brand-wordmark {
  display: flex;
  align-items: baseline;
  gap: 7px;

  margin: 2px 0 0;

  letter-spacing: -0.03em;
}

.brand-wordmark__cirqela {
  font-size: 1.65rem;
}

.brand-wordmark__product {
  font-size: 1.48rem;
}

.business-icon-wrap {
  width: 82px;
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;
}

.business-icon {
  width: 82px;
  height: 82px;

  object-fit: contain;
}


/* Het nieuwe Business-icoon heeft dezelfde kleuruitstraling
   in light en dark mode en heeft daarom geen aparte variant nodig. */


@media (max-width: 760px) {

  .brand-lockup {
    gap: 8px;
  }

  .brand-lockup__icon {
    width: 40px;
    height: 40px;
  }

  .brand-lockup__cirqela {
    font-size: 1.25rem;
  }

  .brand-lockup__product {
    font-size: 1.02rem;
  }

}

/* Cirqela Business: logo + tekst horizontaal */
.business-title {
  display: flex;
  align-items: center;
  gap: 18px;
}

.business-title .business-icon-wrap {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.business-title .business-icon {
  width: 76px;
  height: 76px;
}

.business-title__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.business-title__text .world-label {
  margin-bottom: 3px;
}

.business-title__text .brand-wordmark {
  margin: 0;
}

@media (max-width: 760px) {
  .business-title {
    gap: 14px;
  }

  .business-title .business-icon,
  .business-title .business-icon-wrap {
    width: 68px;
    height: 68px;
  }
}


/* ==========================================================
   CIRQELA SOCIAL LANGUAGE PICKER
   ========================================================== */

.language-picker {
  position: relative;

  flex: 0 0 auto;
}


.language-picker__trigger {
  min-width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  padding:
    0
    8px;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background:
    var(--surface);

  color:
    var(--muted);

  font-family:
    inherit;

  cursor: pointer;

  box-shadow:
    0 5px 18px
    rgba(18, 43, 82, 0.04);

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


.language-picker__trigger:hover {
  color:
    var(--text);

  background:
    var(--surface-soft);

  border-color:
    rgba(23, 110, 255, 0.18);

  transform:
    translateY(-1px);
}


.language-picker__trigger svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.language-picker__current {
  min-width: 17px;

  color:
    var(--text);

  font-size: .58rem;
  font-weight: 800;

  letter-spacing:
    .03em;
}


.language-picker__menu {
  position: absolute;

  z-index: 100;

  top:
    calc(100% + 10px);

  right: 0;

  width: 220px;

  padding: 9px;

  visibility: hidden;

  opacity: 0;

  transform:
    translateY(-4px)
    scale(.98);

  transform-origin:
    top right;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background:
    var(--surface);

  box-shadow:
    0 22px 60px
    rgba(18, 43, 82, 0.16);

  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;
}


:root[data-theme="dark"]
.language-picker__menu {
  box-shadow:
    0 24px 64px
    rgba(0, 0, 0, 0.38);
}


.language-picker--open
.language-picker__menu {
  visibility: visible;

  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.language-picker__heading {
  padding:
    8px
    10px
    9px;

  color:
    var(--muted);

  font-size: .65rem;
  font-weight: 800;

  letter-spacing:
    .08em;

  text-transform: uppercase;
}


.language-picker__divider {
  height: 1px;

  margin:
    4px
    7px;

  background:
    var(--border);
}


.language-picker__option {
  width: 100%;
  min-height: 40px;

  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  align-items: center;

  gap: 8px;

  padding:
    0
    10px;

  border: 0;

  border-radius: 11px;

  background: transparent;

  color:
    var(--text);

  font-family:
    inherit;

  font-size: .76rem;
  font-weight: 620;

  text-align: left;

  cursor: pointer;

  transition:
    background .16s ease,
    color .16s ease;
}


.language-picker__option:hover {
  background:
    var(--surface-soft);
}


.language-picker__option--active {
  background:
    linear-gradient(
      135deg,
      rgba(23, 110, 255, 0.09),
      rgba(138, 99, 247, 0.10)
    );

  color:
    var(--text);

  font-weight: 750;
}


.language-picker__check {
  visibility: hidden;

  color:
    var(--blue);

  font-size: .72rem;
  font-weight: 900;
}


.language-picker__option--active
.language-picker__check {
  visibility: visible;
}


/*
 * De bestaande header-actions blijft eigenaar van
 * de layout. Taal en thema worden alleen als compacte
 * controls naast elkaar geplaatst.
 */

.header-actions {
  min-width: 0;
}


@media (max-width: 760px) {

  .language-picker__trigger {
    min-width: 39px;
    height: 39px;

    padding:
      0
      7px;
  }


  .language-picker__trigger svg {
    width: 17px;
    height: 17px;
  }


  .language-picker__current {
    display: none;
  }


  .language-picker__menu {
    width: 210px;
  }

}


@media (max-width: 520px) {

  /*
   * Op zeer smalle schermen houden we het thema-menu
   * compact zodat taal + thema naast het merk passen.
   */

  .theme-switcher button[
    data-theme-option="auto"
  ] {
    display: none;
  }


  .language-picker__menu {
    position: fixed;

    top: 76px;
    right: 12px;

    width:
      min(
        250px,
        calc(100vw - 24px)
      );

    transform-origin:
      top right;
  }

}