/* FONTS */
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:100 1000;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoflex/v29/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau4OPFu02G5.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v30/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* PROSE STYLES */
article.prose { line-height: 1.75; display: contents; }
article.prose a { font-weight: 500; text-decoration: underline; }
article.prose h1 { margin-block: 0 1.23em; font-size: 2.25em; line-height: 1.11; }
article.prose h2 { margin-block: 2em 1em; font-size: 1.5em; line-height: 1.34; }
article.prose h3 { margin-block: 1.6em 0.6em; font-size: 1.25em; line-height: 1.6; }
article.prose h4 { margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; }
article.prose img { width: 100%; margin-block: 2em; }
article.prose blockquote { margin-block: 1.6em; padding: 0.75em 1.25em; }
article.prose ul, article.prose ol { padding-inline-start: 1.5em; }
article.prose table { table-layout: auto; width: 100%; margin: 1.5em 0; }
article.prose thead th { vertical-align: bottom; font-weight: 600; }
article.prose tbody td { vertical-align: baseline; }
article.prose tfoot td { vertical-align: top; }
article.prose th, article.prose td { text-align: start; padding: 0.75em; }
article.prose thead th:first-child, article.prose tbody td:first-child, article.prose tfoot td:first-child { padding-inline-start: 0; }
article.prose thead th:last-child, article.prose tbody td:last-child, article.prose tfoot td:last-child { padding-inline-end: 0; }
article.prose thead { box-shadow: 0 1px #ffffffbf, 0 1px; }
article.prose tbody tr { box-shadow: 0 1px #ffffffd9, 0 1px; }
article.prose hr { opacity: .3; margin: 3em 0; }

/* GLOBAL RESETS & UTILITIES */
html { scroll-behavior: smooth; }
*, :before, :after { box-sizing: border-box; flex-shrink: 0; }
body { font-family: 'Roboto Flex'; -webkit-font-smoothing: antialiased; }
textarea:focus-visible { outline: none; }
button { -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; }
* { margin: 0; padding: 0; }
a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
input { font: inherit; background-color: inherit; border: none; outline: none; }
button { font: inherit; color: inherit; background: 0 0; border-style: none; width: auto; line-height: normal; overflow: visible; }
textarea, select { font: inherit; background-color: inherit; }
img, picture, video, canvas, svg { display: block; }
[data-reaction-click] { cursor: pointer; }
[data-visible=false] { display: none !important; }
.before-hidden:before, .after-hidden:after { display: none; }
.before-visible:before, .after-visible:after { content: ""; }
::placeholder { color: inherit; opacity: .54; }
body * { scrollbar-width: none; }
body ::-webkit-scrollbar { display: none; }
[name=honey-pot-field] { display: none !important; }
.text { white-space: pre-wrap; overflow-wrap: break-word; }
.pointer-events-none { pointer-events: none; }

/* CSS VARIABLES */
body {

  --DeskCol: 12;
  --TabCol: 8;
  --MobCol: 4;
  --DeskMar: 96;
  --TabMar: 24;
  --MobMar: 16;
  --DeskGut: 32;
  --TabGut: 24;
  --MobGut: 16;
}

/* MAIN APPLICATION STYLES */
#_ {
  background-color: #000;
  min-height: 100vh;
  display: grid;
}
#__0 { display: contents; }
#Mobile { background-color: #000; flex-flow: column; justify-content: flex-start; row-gap: 0; width: 100%; padding: 0; display: flex; position: relative; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 100px 100px; background-position: center center; }
#Hero_Section_Mobile { flex-flow: column; justify-content: center; align-items: center; row-gap: 10px; width: 100%; margin: 0; padding: 36px 0; display: flex; position: relative; }
#Frame_9 { flex-flow: column; justify-content: flex-start; align-items: center; row-gap: 0; width: 100%; margin: 0; padding: 0 32px; display: flex; position: relative; }
#Vector { aspect-ratio: 1.62; width: auto; height: 94px; margin: 0; position: relative; }
#Vector_0 { width: 100%; height: 100%; position: absolute; inset: 0; }
#Component_2 { flex-flow: column; justify-content: flex-start; align-items: center; row-gap: 0; width: 100%; margin: 0; padding: 0; display: flex; position: relative; }

#Component_2 h1 {
    text-align: center;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    width: 100%;
    margin: 0;
    font-size: 63px;
    font-weight: 1000;
    display: inline;
    position: relative;
}

#Component_2 h1 .highlight {
    color: #c6ff00;
}

#Component_2 p {
    text-align: center;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    width: 100%;
    margin: 0;
    font-size: 14px;
    display: inline;
    position: relative;
}

#Component_2 p .bold {
    font-weight: 700;
}

#UX_TECH_VIDEO_Section_Variant2 { flex-flow: row; justify-content: center; align-items: center; row-gap: 0; width: 100%; height: 58px; margin: 0; padding: 10px 0; display: flex; position: relative; overflow: hidden; }
.ticker-container {
    display: flex;
    width: max-content;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.ticker-container span {
    color: #c6ff00;
    font-size: 32px;
    font-weight: 1000;
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
}
#Intro_Section_Mobile { grid-column-gap: 10px; filter: drop-shadow(0 4px 4px #00000040); flex-flow: row; justify-content: center; align-items: center; width: 100%; margin: 0; padding: 36px 0; display: flex; position: relative; }
#Frame_3 { flex-flow: column-reverse; justify-content: flex-start; align-items: end; row-gap: 16px; width: 390px; margin: 0; padding: 0 32px; display: flex; position: relative; }
#Hero_Image { grid-column-gap: 10px; flex-flow: row; justify-content: center; align-items: center; width: 116px; height: 186px; padding: 0; display: flex; position: absolute; top: -37px; left: .5px; }
#Vector_2 { aspect-ratio: .63; width: auto; height: 100%; margin: 0; position: relative; transform: scaleX(-1); }
#Vector_2_0 { fill-rule: nonzero; fill: url(#def_1); opacity: .5; }

.Icon-group { grid-column-gap: 10px; flex-flow: row; justify-content: flex-start; align-items: center; height: 50px; margin: 0; padding: 0; display: flex; position: relative; }
.Icon-group .Icon { aspect-ratio: 1; width: auto; height: 100%; margin: 0; position: relative; }
.Icon-group .Icon svg { width: 100%; height: 100%; position: absolute; inset: 0; }

.Intro-text {
    text-align: left;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    display: inline;
    position: relative;
}

.Intro-text + .Intro-text {
    margin: 20px 0 0;
}

.SectionHeader {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px;
    display: flex;
    position: relative;
}

.SectionHeader > div {
    grid-column-gap: 0px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 64px;
    display: flex;
    position: relative;
}
.SectionHeader span {
    text-align: center;
    -webkit-text-stroke: 1px #c6ff00;
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    flex-grow: 1;
    flex-basis: 0;
    width: 100%;
    margin: 0;
    font-size: 32px;
    font-weight: 1000;
    display: inline;
    position: relative;
}
#vSection_Tech_Explained { flex-flow: column; justify-content: flex-start; align-items: center; row-gap: 0; width: 100%; margin: 0; padding: 16px 0; display: flex; position: relative; }

.SubSectionHeader {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 32px;
    display: flex;
    position: relative;
}

.SubSectionHeader > div {
    grid-column-gap: 0px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0; /* Removed 64px padding to simplify, might need adjustment */
    display: flex;
    position: relative;
}
.SubSectionHeader span {
    text-align: center;
    color: #c6ff00;
    -webkit-background-clip: text;
    background-clip: text;
    width: max-content;
    margin: 0;
    font-size: 24px;
    font-weight: 1000;
    display: inline;
    position: relative;
}

.Container_Centered {
    grid-column-gap: 12px;
    flex-flow: wrap;
    place-content: start center;
    align-items: start;
    row-gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}
#vSection_Live_Events { flex-flow: column; justify-content: flex-start; align-items: start; row-gap: 0; width: 100%; margin: 0; padding: 16px 0; display: flex; position: relative; }


/* --- VIDEO CARD STYLES --- */
.VideoCard {
    grid-column-gap: 0px;
    background-color: #000;
    border: 1px solid #fff;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 328px;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
    overflow: hidden;
}

.Vertical_Video_Thumbnail {
    aspect-ratio: .56;
    width: auto;
    height: 270px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.Vertical_Video_Thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.Right_column {
    flex-flow: column;
    flex-grow: 1;
    flex-basis: 0;
    justify-content: center;
    align-self: stretch;
    align-items: end;
    row-gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}

.Description {
    flex-flow: column;
    justify-content: flex-start;
    align-items: start;
    row-gap: 16px;
    width: 100%;
    margin: 0 0 auto;
    padding: 16px 8px;
    display: flex;
    position: relative;
}

/* Using descendant selectors for text elements for robustness */
.Description > span:first-child {
    text-align: left;
    color: #c6ff00;
    -webkit-background-clip: text;
    background-clip: text;
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 1000;
    display: inline;
    position: relative;
}

.Description > span:nth-child(2) {
    text-align: left;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    width: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    display: inline;
    position: relative;
}

.Spec,
.Spec span {
    text-align: left;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    width: 100%;
    margin: 0;
    font-size: 16px;
    display: inline;
    position: relative;
}

.Spec span:first-child {
    font-weight: 1000;
}

.Spec span:not(:first-child) {
    font-weight: 400;
}

.Button {
    border: 1px solid #c6ff00;
    flex-flow: column;
    justify-content: flex-start;
    align-items: start;
    row-gap: 0;
    margin: 0;
    padding: 7px;
    display: flex;
    position: relative;
}

.Button span {
    text-align: right;
    -webkit-text-stroke: 1px #000;
    color: #c6ff00;
    -webkit-background-clip: text;
    background-clip: text;
    width: max-content;
    margin: 0;
    font-size: 12px;
    font-weight: 100;
    display: inline;
    position: relative;
}
/* --- END VIDEO CARD STYLES --- */

/* SKILLS SECTION */
#Skills_Chips {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0;
    width: 100%;
    margin: 0;
    padding: 16px 32px;
    display: flex;
    position: relative;
}
#Frame_19 {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}
.SkillTile {
    border: 1px solid #c6ff00;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    height: 38px;
    margin: 0;
    padding: 10px;
    display: flex;
    position: relative;
}
.SkillTile span {
    text-align: center;
    color: #c6ff00;
    -webkit-background-clip: text;
    background-clip: text;
    width: -moz-max-content;
    width: max-content;
    margin: 0;
    font-size: 12px;
    font-weight: 1000;
    display: inline;
    position: relative;
}

/* SKILLS SECTION - ALTERNATING CHIPS */
#Frame_19 > .SkillTile:nth-child(even) {
  background-color: #c6ff00;
}

#Frame_19 > .SkillTile:nth-child(even) span {
  color: #000;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* SOCIALS SECTION */
#Socials_Section {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0;
    width: 100%;
    margin: 0;
    padding: 32px 0;
    display: flex;
    position: relative;
    background-color: #c6ff00;
}
#Frame_24 {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0 48px;
    display: flex;
    position: relative;
}
.Social_Icon {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    row-gap: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}

.Social_Icon svg path {
    fill: #000;
}


/* NAV BAR */
#Nav_Bar {
    background-color: #c6ff00;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    display: flex;
    cursor: pointer;
    transition: background-color 0.4s ease;
}

#Frame_1 {
    width: 36px;
    height: 22px;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
#Vector_7 {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}


/* NAV MENU OVERLAY */
#Nav_Menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: center center;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

body.menu-open #Nav_Menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#Nav_Menu ul {
  list-style: none;
  text-align: center;
}

#Nav_Menu li {
  margin: 32px 0;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

body.menu-open #Nav_Menu li {
    transform: translateY(0);
    opacity: 1;
}

body.menu-open #Nav_Menu li:nth-child(1) { transition-delay: 0.1s; }
body.menu-open #Nav_Menu li:nth-child(2) { transition-delay: 0.2s; }
body.menu-open #Nav_Menu li:nth-child(3) { transition-delay: 0.3s; }


#Nav_Menu a {
  color: #c6ff00;
  font-size: 48px;
  font-weight: 1000;
  text-decoration: none;
  transition: color 0.2s ease;
}

#Nav_Menu a:hover {
  color: #fff;
}

body.menu-open #Nav_Bar {
    background-color: transparent;
}

body.menu-open #Nav_Bar #Frame_1 {
    transform: rotate(135deg);
}