@layer properties;
:where(.figma-scene *) {
  border-width: 0;
}
:root,
:host {
  --color-white: #fff;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}
:where(.figma-scene) .pointer-events-none {
  pointer-events: none;
}
:where(.figma-scene) .absolute {
  position: absolute;
}
:where(.figma-scene) .relative {
  position: relative;
}
:where(.figma-scene) .inset-0 {
  inset: 0px;
}
:where(.figma-scene) .inset-\[-0\.15\%_-0\.18\%\] {
  inset: -0.15% -0.18%;
}
:where(.figma-scene) .inset-\[-1\.42\%_-3\.65\%_-1\.42\%_-1\.93\%\] {
  inset: -1.42% -3.65% -1.42% -1.93%;
}
:where(.figma-scene) .inset-\[-3\%\] {
  inset: -3%;
}
:where(.figma-scene) .inset-\[-3\.49\%_-3\.21\%\] {
  inset: -3.49% -3.21%;
}
:where(.figma-scene) .inset-\[-3\.95\%_-5\.36\%\] {
  inset: -3.95% -5.36%;
}
:where(.figma-scene) .inset-\[-6\.14\%\] {
  inset: -6.14%;
}
:where(.figma-scene) .inset-\[-6\.14\%_-6\.45\%_-6\.14\%_-5\.83\%\] {
  inset: -6.14% -6.45% -6.14% -5.83%;
}
:where(.figma-scene) .inset-\[3\.5\%_0\.96\%_7\.1\%_32\.6\%\] {
  inset: 3.5% 0.96% 7.1% 32.6%;
}
:where(.figma-scene) .inset-\[8\.33\%\] {
  inset: 8.33%;
}
:where(.figma-scene) .inset-\[8\.33\%_20\.83\%_12\.5\%_20\.83\%\] {
  inset: 8.33% 20.83% 12.5% 20.83%;
}
:where(.figma-scene) .inset-\[16\.67\%_14\.5\%_16\.1\%_12\.5\%\] {
  inset: 16.67% 14.5% 16.1% 12.5%;
}
:where(.figma-scene) .inset-\[71\.91\%_87\.87\%_16\.69\%_4\.52\%\] {
  inset: 71.91% 87.87% 16.69% 4.52%;
}
:where(.figma-scene)
  .inset-\[calc\(3\.5\%-18\.33px\)_calc\(0\.96\%-6\.38px\)_calc\(7\.1\%\+1\.33px\)_calc\(32\.6\%-6\.62px\)\] {
  inset: calc(3.5% - 18.33px) calc(0.96% - 6.38px) calc(7.1% + 1.33px)
    calc(32.6% - 6.62px);
}
:where(.figma-scene)
  .inset-\[calc\(3\.5\%-19\.25px\)_calc\(0\.96\%-4\.37px\)_calc\(8\.14\%-38\.44px\)_calc\(33\.54\%-145\.56px\)\] {
  inset: calc(3.5% - 19.25px) calc(0.96% - 4.37px) calc(8.14% - 38.44px)
    calc(33.54% - 145.56px);
}
:where(.figma-scene)
  .inset-\[calc\(3\.5\%-19\.27px\)_calc\(0\.96\%-4\.37px\)_calc\(8\.14\%-38\.42px\)_calc\(33\.54\%-145\.56px\)\] {
  inset: calc(3.5% - 19.27px) calc(0.96% - 4.37px) calc(8.14% - 38.42px)
    calc(33.54% - 145.56px);
}
:where(.figma-scene)
  .inset-\[calc\(4\.53\%-18\.6px\)_calc\(1\.9\%-2\.22px\)_calc\(7\.1\%-39\.1px\)_calc\(32\.6\%-147\.71px\)\] {
  inset: calc(4.53% - 18.6px) calc(1.9% - 2.22px) calc(7.1% - 39.1px)
    calc(32.6% - 147.71px);
}
:where(.figma-scene)
  .inset-\[calc\(4\.53\%-18\.58px\)_calc\(1\.9\%-2\.22px\)_calc\(7\.1\%-39\.12px\)_calc\(32\.6\%-147\.71px\)\] {
  inset: calc(4.53% - 18.58px) calc(1.9% - 2.22px) calc(7.1% - 39.12px)
    calc(32.6% - 147.71px);
}
:where(.figma-scene)
  .inset-\[calc\(4\.54\%-18\.57px\)_calc\(-2\.2\%-11\.61px\)_calc\(1\.3\%-42\.91px\)_calc\(34\.9\%-142\.44px\)\] {
  inset: calc(4.54% - 18.57px) calc(-2.2% - 11.61px) calc(1.3% - 42.91px)
    calc(34.9% - 142.44px);
}
:where(.figma-scene)
  .inset-\[calc\(4\.55\%-18\.59px\)_calc\(1\.32\%-3\.55px\)_calc\(1\.3\%-42\.89px\)_calc\(37\.83\%-135\.73px\)\] {
  inset: calc(4.55% - 18.59px) calc(1.32% - 3.55px) calc(1.3% - 42.89px)
    calc(37.83% - 135.73px);
}
:where(.figma-scene)
  .inset-\[calc\(71\.91\%-5\.32px\)_calc\(87\.87\%\+10\.63px\)_calc\(16\.69\%\+3\.15px\)_calc\(4\.52\%-12\.11px\)\] {
  inset: calc(71.91% - 5.32px) calc(87.87% + 10.63px) calc(16.69% + 3.15px)
    calc(4.52% - 12.11px);
}
:where(.figma-scene) .top-0 {
  top: 0px;
}
:where(.figma-scene) .top-\[2\.95px\] {
  top: 2.95px;
}
:where(.figma-scene) .top-\[3\.97\%\] {
  top: 3.97%;
}
:where(.figma-scene) .top-\[6\.49\%\] {
  top: 6.49%;
}
:where(.figma-scene) .top-\[19px\] {
  top: 19px;
}
:where(.figma-scene) .top-\[21\.56px\] {
  top: 21.56px;
}
:where(.figma-scene) .top-\[460\.97px\] {
  top: 460.97px;
}
:where(.figma-scene) .top-\[480px\] {
  top: 480px;
}
:where(.figma-scene) .top-\[calc\(50\%-82\.49px\)\] {
  top: calc(50% - 82.49px);
}
:where(.figma-scene) .bottom-\[30\.19\%\] {
  bottom: 30.19%;
}
:where(.figma-scene) .left-0 {
  left: 0px;
}
:where(.figma-scene) .left-\[-39\.98\%\] {
  left: -39.98%;
}
:where(.figma-scene) .left-\[-78\.56\%\] {
  left: -78.56%;
}
:where(.figma-scene) .left-\[2\.95px\] {
  left: 2.95px;
}
:where(.figma-scene) .left-\[5\.24px\] {
  left: 5.24px;
}
:where(.figma-scene) .left-\[13px\] {
  left: 13px;
}
:where(.figma-scene) .left-\[82px\] {
  left: 82px;
}
:where(.figma-scene) .left-\[95px\] {
  left: 95px;
}
:where(.figma-scene) .block {
  display: block;
}
:where(.figma-scene) .contents {
  display: contents;
}
:where(.figma-scene) .flex {
  display: flex;
}
:where(.figma-scene) .size-\[19\.999px\] {
  width: 19.999px;
  height: 19.999px;
}
:where(.figma-scene) .size-\[20px\] {
  width: 20px;
  height: 20px;
}
:where(.figma-scene) .size-\[24px\] {
  width: 24px;
  height: 24px;
}
:where(.figma-scene) .size-\[40px\] {
  width: 40px;
  height: 40px;
}
:where(.figma-scene) .size-\[42\.188px\] {
  width: 42.188px;
  height: 42.188px;
}
:where(.figma-scene) .size-\[48\.094px\] {
  width: 48.094px;
  height: 48.094px;
}
:where(.figma-scene) .size-\[48px\] {
  width: 48px;
  height: 48px;
}
:where(.figma-scene) .size-\[54px\] {
  width: 54px;
  height: 54px;
}
:where(.figma-scene) .size-full {
  width: 100%;
  height: 100%;
}
:where(.figma-scene) .h-\[48\.097px\] {
  height: 48.097px;
}
:where(.figma-scene) .h-\[48px\] {
  height: 48px;
}
:where(.figma-scene) .h-\[96\.06\%\] {
  height: 96.06%;
}
:where(.figma-scene) .h-\[550\.7068481445312px\] {
  height: 550.7068481445312px;
}
:where(.figma-scene) .h-\[596\.974365234375px\] {
  height: 596.974365234375px;
}
:where(.figma-scene) .h-full {
  height: 100%;
}
:where(.figma-scene) .w-\[45\.807px\] {
  width: 45.807px;
}
:where(.figma-scene) .w-\[189\.54\%\] {
  width: 189.54%;
}
:where(.figma-scene) .w-\[201\.24\%\] {
  width: 201.24%;
}
:where(.figma-scene) .w-\[250px\] {
  width: 250px;
}
:where(.figma-scene) .w-\[322px\] {
  width: 322px;
}
:where(.figma-scene) .w-\[432px\] {
  width: 432px;
}
:where(.figma-scene) .w-\[453\.1053771972656px\] {
  width: 453.1053771972656px;
}
:where(.figma-scene) .w-\[662\.4271240234375px\] {
  width: 662.4271240234375px;
}
:where(.figma-scene) .w-\[min-content\] {
  width: min-content;
}
:where(.figma-scene) .w-full {
  width: 100%;
}
:where(.figma-scene) .max-w-none {
  max-width: none;
}
:where(.figma-scene) .min-w-full {
  min-width: 100%;
}
:where(.figma-scene) .min-w-px {
  min-width: 1px;
}
:where(.figma-scene) .flex-\[1_0_0\] {
  flex: 1 0 0;
}
:where(.figma-scene) .shrink-0 {
  flex-shrink: 0;
}
:where(.figma-scene) .transform-\[translateY\(-50\%\)\] {
  transform: translateY(-50%);
}
:where(.figma-scene) .flex-col {
  flex-direction: column;
}
:where(.figma-scene) .flex-wrap {
  flex-wrap: wrap;
}
:where(.figma-scene) .content-center {
  align-content: center;
}
:where(.figma-scene) .content-stretch {
  align-content: stretch;
}
:where(.figma-scene) .items-center {
  align-items: center;
}
:where(.figma-scene) .items-start {
  align-items: flex-start;
}
:where(.figma-scene) .justify-center {
  justify-content: center;
}
:where(.figma-scene) .gap-\[2px\] {
  gap: 2px;
}
:where(.figma-scene) .gap-\[4px\] {
  gap: 4px;
}
:where(.figma-scene) .gap-\[8px\] {
  gap: 8px;
}
:where(.figma-scene) .gap-\[12px\] {
  gap: 12px;
}
:where(.figma-scene) .gap-\[16px\] {
  gap: 16px;
}
:where(.figma-scene) .gap-\[20px\] {
  gap: 20px;
}
:where(.figma-scene) .gap-\[24px\] {
  gap: 24px;
}
:where(.figma-scene) .gap-\[var\(--gap-1\,4px\)\] {
  gap: var(--gap-1, 4px);
}
:where(.figma-scene) .overflow-clip {
  overflow: clip;
}
:where(.figma-scene) .overflow-hidden {
  overflow: hidden;
}
:where(.figma-scene) .overflow-visible {
  overflow: visible;
}
:where(.figma-scene) .rounded-\[16px\] {
  border-radius: 16px;
}
:where(.figma-scene) .rounded-\[21\.094px\] {
  border-radius: 21.094px;
}
:where(.figma-scene) .rounded-\[27px\] {
  border-radius: 27px;
}
:where(.figma-scene) .rounded-\[999px\] {
  border-radius: 999px;
}
:where(.figma-scene) .rounded-\[var\(--rounded-badge\,999px\)\] {
  border-radius: var(--rounded-badge, 999px);
}
:where(.figma-scene) .border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
:where(.figma-scene) .border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
:where(.figma-scene) .border-solid {
  --tw-border-style: solid;
  border-style: solid;
}
:where(.figma-scene) .border-\[var\(--border\\\/grey-lighter-alt\,\#e7e3d8\)\] {
  border-color: var(--border\/grey-lighter-alt, #e7e3d8);
}
:where(.figma-scene) .bg-\[\#f6b7ca\] {
  background-color: #f6b7ca;
}
:where(.figma-scene) .bg-\[var\(--bg\\\/brand-alpha30\,\#f5c842\)\] {
  background-color: var(--bg\/brand-alpha30, #f5c842);
}
:where(.figma-scene) .bg-\[var\(--bg\\\/grey-darker\,\#1c2430\)\] {
  background-color: var(--bg\/grey-darker, #1c2430);
}
:where(.figma-scene) .bg-\[var\(--bg\\\/secondary-alpha30\,\#23716a\)\] {
  background-color: var(--bg\/secondary-alpha30, #23716a);
}
:where(.figma-scene) .bg-\[var\(--bg\\\/success-alpha30\,\#2e968e\)\] {
  background-color: var(--bg\/success-alpha30, #2e968e);
}
:where(.figma-scene) .bg-\[var\(--bg\\\/white\,white\)\] {
  background-color: var(--bg\/white, white);
}
:where(.figma-scene) .bg-\[var\(--rose\\\/r100\,\#fbdbe4\)\] {
  background-color: var(--rose\/r100, #fbdbe4);
}
:where(.figma-scene) .bg-white {
  background-color: var(--color-white);
}
:where(.figma-scene) .mask-intersect {
  mask-composite: intersect;
}
:where(.figma-scene) .mask-alpha {
  mask-mode: alpha;
}
:where(.figma-scene) .mask-size-\[446\.723px_544\.359px\] {
  mask-size: 446.723px 544.359px;
}
:where(.figma-scene) .mask-size-\[446\.724px_544\.359px\] {
  mask-size: 446.724px 544.359px;
}
:where(.figma-scene) .mask-no-clip {
  mask-clip: no-clip;
}
:where(.figma-scene) .mask-position-\[-15\.678px_-0\.094px\] {
  mask-position: -15.678px -0.094px;
}
:where(.figma-scene) .mask-position-\[-35\.678px_-0\.094px\] {
  mask-position: -35.678px -0.094px;
}
:where(.figma-scene) .mask-no-repeat {
  mask-repeat: no-repeat;
}
:where(.figma-scene) .p-\[24px\] {
  padding: 24px;
}
:where(.figma-scene) .px-\[8px\] {
  padding-inline: 8px;
}
:where(.figma-scene) .px-\[var\(--badge\\\/size-md\\\/padding-h\,8px\)\] {
  padding-inline: var(--badge\/size-md\/padding-h, 8px);
}
:where(.figma-scene) .py-\[2px\] {
  padding-block: 2px;
}
:where(.figma-scene) .py-\[4px\] {
  padding-block: 4px;
}
:where(.figma-scene) .py-\[5\.906px\] {
  padding-block: 5.906px;
}
:where(.figma-scene) .py-\[20px\] {
  padding-block: 20px;
}
:where(.figma-scene) .py-\[var\(--badge\\\/size-md\\\/padding-v\,4px\)\] {
  padding-block: var(--badge\/size-md\/padding-v, 4px);
}
:where(.figma-scene) .pr-\[80px\] {
  padding-right: 80px;
}
:where(.figma-scene) .pb-\[16px\] {
  padding-bottom: 16px;
}
:where(.figma-scene) .pl-\[32px\] {
  padding-left: 32px;
}
:where(.figma-scene) .pl-\[56px\] {
  padding-left: 56px;
}
:where(.figma-scene) .text-center {
  text-align: center;
}
:where(.figma-scene)
  .font-\[family-name\:var\(--typography\\\/font-family\\\/geist\,\&\#x27\;Geist\:Bold\&\#x27\;\)\] {
  font-family: var(--typography\/font-family\/geist, 'Geist: Bold');
}
:where(.figma-scene)
  .font-\[family-name\:var\(--typography\\\/font-family\\\/geist\,\&\#x27\;Geist\:Medium\&\#x27\;\)\] {
  font-family: var(--typography\/font-family\/geist, 'Geist: Medium');
}
:where(.figma-scene)
  .font-\[family-name\:var\(--typography\\\/font-family\\\/geist\,\&\#x27\;Geist\:Regular\&\#x27\;\)\] {
  font-family: var(
    --typography\/font-family\/geist,
    'Geist: Regular'
  );
}
:where(.figma-scene)
  .font-\[family-name\:var\(--typography\\\/font-family\\\/geist\,\&\#x27\;Geist\:Semibold\&\#x27\;\)\] {
  font-family: var(
    --typography\/font-family\/geist,
    'Geist: Semibold'
  );
}
:where(.figma-scene)
  .text-\[length\:var\(--typography\\\/body\\\/l-16\\\/font-size\,16px\)\] {
  font-size: var(--typography\/body\/l-16\/font-size, 16px);
}
:where(.figma-scene)
  .text-\[length\:var\(--typography\\\/body\\\/m-14\\\/font-size\,14px\)\] {
  font-size: var(--typography\/body\/m-14\/font-size, 14px);
}
:where(.figma-scene)
  .text-\[length\:var\(--typography\\\/body\\\/s-12\\\/font-size\,12px\)\] {
  font-size: var(--typography\/body\/s-12\/font-size, 12px);
}
:where(.figma-scene)
  .text-\[length\:var\(--typography\\\/body\\\/xs-10\\\/font-size\,10px\)\] {
  font-size: var(--typography\/body\/xs-10\/font-size, 10px);
}
:where(.figma-scene)
  .text-\[length\:var\(--typography\\\/heading\\\/h4-20\\\/font-size\,20px\)\] {
  font-size: var(--typography\/heading\/h4-20\/font-size, 20px);
}
:where(.figma-scene) .leading-\[0\] {
  --tw-leading: 0;
  line-height: 0;
}
:where(.figma-scene)
  .leading-\[var\(--typography\\\/body\\\/l-16\\\/line-height\,24px\)\] {
  --tw-leading: var(--typography\/body\/l-16\/line-height, 24px);
  line-height: var(--typography\/body\/l-16\/line-height, 24px);
}
:where(.figma-scene)
  .leading-\[var\(--typography\\\/body\\\/m-14\\\/line-height\,22px\)\] {
  --tw-leading: var(--typography\/body\/m-14\/line-height, 22px);
  line-height: var(--typography\/body\/m-14\/line-height, 22px);
}
:where(.figma-scene)
  .leading-\[var\(--typography\\\/body\\\/s-12\\\/line-height\,20px\)\] {
  --tw-leading: var(--typography\/body\/s-12\/line-height, 20px);
  line-height: var(--typography\/body\/s-12\/line-height, 20px);
}
:where(.figma-scene)
  .leading-\[var\(--typography\\\/body\\\/s-12\\\/line-height-2\,16px\)\] {
  --tw-leading: var(--typography\/body\/s-12\/line-height-2, 16px);
  line-height: var(--typography\/body\/s-12\/line-height-2, 16px);
}
:where(.figma-scene)
  .leading-\[var\(--typography\\\/body\\\/xs-10\\\/line-height\,14px\)\] {
  --tw-leading: var(--typography\/body\/xs-10\/line-height, 14px);
  line-height: var(--typography\/body\/xs-10\/line-height, 14px);
}
:where(.figma-scene)
  .leading-\[var\(--typography\\\/heading\\\/h4-20\\\/line-height\,28px\)\] {
  --tw-leading: var(--typography\/heading\/h4-20\/line-height, 28px);
  line-height: var(--typography\/heading\/h4-20\/line-height, 28px);
}
:where(.figma-scene)
  .font-\[var\(--typography\\\/font-weight\\\/semibold\,normal\)\] {
  --tw-font-weight: var(--typography\/font-weight\/semibold, normal);
  font-weight: var(--typography\/font-weight\/semibold, normal);
}
:where(.figma-scene) .font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
:where(.figma-scene) .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
:where(.figma-scene) .font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
:where(.figma-scene) .tracking-\[0\.72px\] {
  --tw-tracking: 0.72px;
  letter-spacing: 0.72px;
}
:where(.figma-scene) .\[word-break\:break-word\] {
  word-break: break-word;
}
:where(.figma-scene) .whitespace-nowrap {
  white-space: nowrap;
}
:where(.figma-scene) .text-\[\#c42a6b\] {
  color: #c42a6b;
}
:where(.figma-scene) .text-\[\#e33267\] {
  color: #a91847;
}
:where(.figma-scene) .text-\[color\:var\(--text\\\/grey-light\,\#9ca6b3\)\] {
  color: var(--text\/grey-light, #9ca6b3);
}
:where(.figma-scene) .text-\[color\:var\(--text\\\/grey-lighter\,\#c6cdd5\)\] {
  color: var(--text\/grey-lighter, #c6cdd5);
}
:where(.figma-scene) .text-\[color\:var\(--text\\\/grey-primary\,\#0e1424\)\] {
  color: var(--text\/grey-primary, #0e1424);
}
:where(.figma-scene)
  .text-\[color\:var\(--text\\\/grey-secondary\,\#3d4959\)\] {
  color: var(--text\/grey-secondary, #3d4959);
}
:where(.figma-scene) .text-\[color\:var\(--text\\\/white\,white\)\] {
  color: var(--text\/white, white);
}
:where(.figma-scene) .uppercase {
  text-transform: uppercase;
}
:where(.figma-scene) .opacity-80 {
  opacity: 80%;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
    }
  }
}

/* Figma's 682 × 616 stage scales as one unit to preserve its layer geometry. */
.figma-banner {
  position: relative;
  width: 100%;
  max-width: 682px;
  margin-inline: auto;
  aspect-ratio: 682 / 616;
}
.banner-stage {
  position: absolute;
  inset: 0;
}
.figma-scene {
  position: absolute;
  width: 682px;
  height: 616px;
  transform: scale(var(--banner-scale, 1));
  transform-origin: top left;
  font-family: Geist, system-ui, sans-serif;
  color: #0e1424;
  --bg\/brand-alpha30: #faedc5;
  --bg\/success-alpha30: #bcdedb;
  --bg\/secondary-alpha30: #bed4d2;
}
.figma-scene p {
  margin: 0;
}
.figma-scene [data-name="Skills match card"] {
  border-style: solid;
}
.figma-scene[aria-hidden="true"] {
  visibility: hidden;
}
.banner-toggle {
  position: absolute;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #68788b;
  border-radius: 50%;
  padding: 0;
  background: #0e1424;
  color: #f8f9fa;
}
.banner-toggle:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0e1424;
}
.banner-icon-play,
.banner-paused .banner-icon-pause {
  display: none;
}
.banner-paused .banner-icon-play {
  display: block;
}
.banner-paused .figma-scene * {
  animation-play-state: paused !important;
}
@property --motion-translate-x {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --motion-translate-y {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.hero .hero-intro {
  color: #c6cdd5;
}
.hero h1 {
  color: #f8f9fa;
  font-weight: 700;
  letter-spacing: -0.028em;
}
@media (min-width: 992px) {
  .hero .row {
    --bs-gutter-x: 0;
    justify-content: space-between;
  }
  .hero .row > :first-child {
    width: 46%;
  }
  .hero .row > :last-child {
    width: 48.72%;
  }
  .hero h1 {
    font-size: clamp(40px, 4.4vw, 68px);
    line-height: 1.118;
  }
}

.hero {
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 728' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(216.96 0 0 51.688 1536 364)'><stop stop-color='rgba(22,68,64,0.36)' offset='0'/><stop stop-color='rgba(22,68,64,0)' offset='0.47'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 728' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(255.36 0 0 94.64 115.2 669.76)'><stop stop-color='rgba(58,188,177,0.043)' offset='0'/><stop stop-color='rgba(58,188,177,0)' offset='0.4'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(14, 20, 36) 0%, rgb(14, 20, 36) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6288"],
      [data-motion-for="I1864:69346;655:6288"]
    ) {
    animation: kf_0_3_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_3_opacity_0 {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6289"],
      [data-motion-for="I1864:69346;655:6289"]
    ) {
    animation: kf_0_4_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_4_opacity_0 {
    0% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    18.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6290"],
      [data-motion-for="I1864:69346;655:6290"]
    ) {
    animation: kf_0_5_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_5_opacity_0 {
    0% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    18.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6291"],
      [data-motion-for="I1864:69346;655:6291"]
    ) {
    animation: kf_0_6_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_6_opacity_0 {
    0% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    18.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6297"],
      [data-motion-for="I1864:69346;655:6297"]
    ) {
    --motion-translate-y: 10;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_12_--motion-translate-y_0 4.42s linear,
      kf_0_12_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_12_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 10;
    }
    79.186% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 10;
    }
    97.285% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_12_opacity_0 {
    0% {
      opacity: 0;
    }
    79.186% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    97.285% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6305"],
      [data-motion-for="I1864:69346;655:6305"]
    ) {
    --motion-translate-y: 6;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_26_--motion-translate-y_0 4.42s linear,
      kf_0_26_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_26_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 6;
    }
    81.9% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 6;
    }
    100% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_26_opacity_0 {
    0% {
      opacity: 0;
    }
    81.9% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6306"],
      [data-motion-for="I1864:69346;655:6306"]
    ) {
    --motion-translate-x: 10.147949;
    --motion-translate-y: 12.060791;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(
        calc(var(--motion-translate-x, 0) * 1px),
        calc(var(--motion-translate-y, 0) * 1px)
      )
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_27_--motion-translate-y_0 4.42s linear,
      kf_0_27_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_27_--motion-translate-y_0 {
    0% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 12.060791;
    }
    61.086% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 8;
    }
    79.186% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_27_opacity_0 {
    0% {
      opacity: 0;
    }
    61.086% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    79.186% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="0"][aria-hidden="false"]
    :is(
      [data-node-id="I1864:69346;655:6307"],
      [data-motion-for="I1864:69346;655:6307"]
    ) {
    --motion-translate-y: 12;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_28_--motion-translate-y_0 4.42s linear,
      kf_0_28_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_28_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 12;
    }
    20.814% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 12;
    }
    38.914% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_28_opacity_0 {
    0% {
      opacity: 0;
    }
    20.814% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    38.914% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:57982"], [data-motion-for="1757:57982"]) {
    animation: kf_0_98_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_98_opacity_0 {
    0% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    18.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:57986"], [data-motion-for="1757:57986"]) {
    animation: kf_0_102_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_102_opacity_0 {
    0% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    18.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:57990"], [data-motion-for="1757:57990"]) {
    animation: kf_0_103_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_103_opacity_0 {
    0% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    18.1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:57999"], [data-motion-for="1757:57999"]) {
    --motion-translate-y: 10;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_114_--motion-translate-y_0 4.42s linear,
      kf_0_114_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_114_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 10;
    }
    79.186% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 10;
    }
    97.285% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_114_opacity_0 {
    0% {
      opacity: 0;
    }
    79.186% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    97.285% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:58015"], [data-motion-for="1757:58015"]) {
    --motion-translate-y: 6;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_138_--motion-translate-y_0 4.42s linear,
      kf_0_138_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_138_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 6;
    }
    81.9% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 6;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_138_opacity_0 {
    0% {
      opacity: 0;
    }
    81.9% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:58024"], [data-motion-for="1757:58024"]) {
    --motion-translate-y: 8;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_139_--motion-translate-y_0 4.42s linear,
      kf_0_139_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_139_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 8;
    }
    61.086% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 8;
    }
    79.186% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_139_opacity_0 {
    0% {
      opacity: 0;
    }
    61.086% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    79.186% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .banner-playing
    [data-scene="1"][aria-hidden="false"]
    :is([data-node-id="1757:58033"], [data-motion-for="1757:58033"]) {
    --motion-translate-y: 12;
    transform: var(--motion-layout-transform, translate(0px))
      var(--motion-design-transform-inverse, matrix(1, 0, 0, 1, 0, 0))
      translate(0px, calc(var(--motion-translate-y, 0) * 1px))
      var(--motion-design-transform, matrix(1, 0, 0, 1, 0, 0));
    transform-origin: 0 0;
    animation:
      kf_0_140_--motion-translate-y_0 4.42s linear,
      kf_0_140_opacity_0 4.42s linear;
    animation-fill-mode: both;
  }
  @keyframes kf_0_140_--motion-translate-y_0 {
    0% {
      --motion-translate-y: 12;
    }
    20.814% {
      animation-timing-function: ease-in-out;
      --motion-translate-y: 12;
    }
    38.914% {
      --motion-translate-y: 0;
    }
    100% {
      --motion-translate-y: 0;
    }
  }
  @keyframes kf_0_140_opacity_0 {
    0% {
      opacity: 0;
    }
    20.814% {
      animation-timing-function: ease-in-out;
      opacity: 0;
    }
    38.914% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
}
.banner-stage {
  overflow: clip;
}
@media (prefers-reduced-motion: no-preference) {
  .banner-playing .figma-scene[aria-hidden="false"] {
    animation: banner-scene-enter 320ms ease-in-out both;
  }
  .banner-paused .figma-scene {
    animation-play-state: paused;
  }
}
@keyframes banner-scene-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.figma-scene [data-name="Skills You Bring"] {
  width: 274px;
}

@media (prefers-reduced-motion: no-preference) {
  .banner-playing [data-scene][aria-hidden="false"] [data-name="Skills match card"] {
    & > p,
    & [data-name="Role Overview"],
    & [data-name="Match Score"],
    & :is([data-name="Skills You Bring"], [data-name="Skills To Build"]) > p,
    & [data-name="Skill List"] > * {
      animation: banner-card-reveal 360ms cubic-bezier(.22, 1, .36, 1)
        var(--card-delay, 1s) both;
    }

    & [data-name="Role Overview"] { --card-delay: 1.15s; }
    & [data-name="Match Score"] { --card-delay: 1.36s; }
    & [data-name="Skills You Bring"] { --card-delay: 1.58s; }
    & [data-name="Skills To Build"] { --card-delay: 2.02s; }
    & [data-name="Skill List"] > :nth-child(2) { animation-delay: calc(var(--card-delay) + 120ms); }
    & [data-name="Skill List"] > :nth-child(3) { animation-delay: calc(var(--card-delay) + 240ms); }
  }

  @keyframes banner-card-reveal {
    from { opacity: 0; translate: 0 7px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .banner-playing [data-scene][aria-hidden="false"] .banner-progress-ring path {
    stroke-dasharray: 1;
    animation: banner-progress-draw 850ms ease-in-out 1.48s both;
  }

  @keyframes banner-progress-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
}