diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..1c70248
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,639 @@
+/* Welcome to Codeium Editor!
+Press Enter and use Tab to accept AI suggestions. Here's an example:*/
+
+/* .action-button class with a hover effect. */
+
+@media (prefers-reduced-motion: no-preference) {
+  .transition_wrap {
+    display: flex;
+  }
+}
+
+/* Gradient reveal initial state - hide gradient layer chars until animated */
+[data-gradient-reveal="gradient"]>span,
+[data-gradient-reveal="gradient"] .fmtion-char {
+  opacity: 0;
+}
+
+:root {
+  --grid-breakout: [full-start] minmax(0, 1fr) [content-start] repeat(var(--site--column-count),
+      minmax(0, var(--site--column-width))) [content-end] minmax(0, 1fr) [full-end];
+  --grid-breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--site--margin) * 2)) [content-end] minmax(0, 1fr) [full-end];
+}
+
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+.w-embed:before,
+.w-embed:after,
+.w-richtext:before,
+.w-richtext:after {
+  content: unset;
+}
+
+html {
+  background-color: var(--_theme---background);
+}
+
+button {
+  background-color: unset;
+  padding: unset;
+  text-align: inherit;
+}
+
+button:not(:disabled) {
+  cursor: pointer;
+}
+
+video {
+  width: 100%;
+  object-fit: cover;
+}
+
+/* remove padding of empty element */
+.wf-empty {
+  padding: 0;
+}
+
+svg {
+  max-width: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  option {
+    color: black;
+  }
+}
+
+img::selection {
+  background: transparent;
+}
+
+/* Typography */
+body {
+  text-transform: var(--_text-style---text-transform);
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Clear Defaults */
+a:not([class]) {
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+label {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-wrap: inherit;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+select:has(option[value=""]:checked) {
+  color: color-mix(in lab, currentcolor 60%, transparent);
+}
+
+/* Selection Color */
+::selection {
+  background-color: var(--_theme---selection--background);
+  color: var(--_theme---selection--text);
+}
+
+/* Margin Trim */
+:is(.u-margin-trim, .u-rich-text)> :not( :not(.w-condition-invisible, .u-cover-absolute, .u-ignore-trim) ~ :not(.w-condition-invisible,
+    .u-cover-absolute,
+    .u-ignore-trim)),
+:is(.u-margin-trim, .u-rich-text)> :not( :not(.w-condition-invisible, .u-cover-absolute, .u-ignore-trim) ~ :not(.w-condition-invisible,
+    .u-cover-absolute,
+    .u-ignore-trim)).u-display-contents> :first-child {
+  margin-top: 0;
+}
+
+:is(.u-margin-trim, .u-rich-text)> :not( :has(~ :not(.w-condition-invisible,
+      .u-cover-absolute,
+      .u-ignore-trim))),
+:is(.u-margin-trim, .u-rich-text)> :not( :has(~ :not(.w-condition-invisible,
+      .u-cover-absolute,
+      .u-ignore-trim))).u-display-contents> :last-child {
+  margin-bottom: 0;
+}
+
+/* Line Height Trim */
+:is(h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off,
+  :has([class*="u-text-style-"]))::before,
+[class*="u-text-style-"]:not(.u-text-trim-off,
+  :has(h1, h2, h3, h4, h5, h6, p))::before {
+  content: "";
+  display: table;
+  margin-bottom: calc(-0.5lh + var(--_text-style---trim-top));
+}
+
+:is(h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off,
+  :has([class*="u-text-style-"]))::after,
+[class*="u-text-style-"]:not(.u-text-trim-off,
+  :has(h1, h2, h3, h4, h5, h6, p))::after {
+  content: "";
+  display: table;
+  margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom));
+}
+
+/* Rich Text Links */
+.w-richtext a {
+  position: relative;
+  z-index: 4;
+}
+
+/* Line Clamp */
+.u-line-clamp-1,
+.u-line-clamp-2,
+.u-line-clamp-3,
+.u-line-clamp-4 {
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.u-line-clamp-2 {
+  -webkit-line-clamp: 2;
+}
+
+.u-line-clamp-3 {
+  -webkit-line-clamp: 3;
+}
+
+.u-line-clamp-4 {
+  -webkit-line-clamp: 4;
+}
+
+/* Child Contain */
+.u-child-contain>* {
+  width: 100%;
+  max-width: inherit !important;
+  margin-inline: 0 !important;
+  margin-top: 0 !important;
+}
+
+/* Hide */
+.u-hide-if-empty:empty,
+.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
+.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
+.u-embed-js,
+.u-embed-css {
+  display: none !important;
+}
+
+/* Focus State */
+a,
+button,
+:where([tabindex]),
+[data-outline],
+input {
+  outline-offset: var(--focus--offset-outer);
+}
+
+a:focus-visible,
+button:focus-visible,
+[tabindex]:focus-visible,
+input:focus-visible {
+  outline-color: var(--_theme---text);
+  outline-width: var(--focus--width);
+  outline-style: solid;
+}
+
+/* Disabled */
+[data-button]:has(button:disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Global / Clickable Component */
+.wf-design-mode .clickable_wrap {
+  z-index: 0;
+}
+
+.clickable_wrap a[href="#"] {
+  display: none;
+}
+
+.clickable_wrap a[href="#"]~button {
+  display: block;
+}
+
+/* Responsive Above */
+@container threshold-large (width >=62em) {
+  .u-order-unset-above {
+    order: unset !important;
+  }
+
+  .u-all-unset-above {
+    all: unset !important;
+  }
+
+  .u-grid-below {
+    display: flex !important;
+  }
+}
+
+@container threshold-medium (width >=48em) {
+  .u-order-unset-above {
+    order: unset !important;
+  }
+
+  .u-all-unset-above {
+    all: unset !important;
+  }
+
+  .u-grid-below {
+    display: flex !important;
+  }
+}
+
+@container threshold-small (width >=30em) {
+  .u-order-unset-above {
+    order: unset !important;
+  }
+
+  .u-all-unset-above {
+    all: unset !important;
+  }
+
+  .u-grid-below {
+    display: flex !important;
+  }
+}
+
+/* Responsive Below */
+@container threshold-large (width < 62em) {
+  .u-order-unset-below {
+    order: unset !important;
+  }
+
+  .u-all-unset-below {
+    all: unset !important;
+  }
+
+  .u-grid-above {
+    display: flex !important;
+  }
+}
+
+@container threshold-medium (width < 48em) {
+  .u-order-unset-below {
+    order: unset !important;
+  }
+
+  .u-all-unset-below {
+    all: unset !important;
+  }
+
+  .u-grid-above {
+    display: flex !important;
+  }
+}
+
+@container threshold-small (width < 30em) {
+  .u-order-unset-below {
+    order: unset !important;
+  }
+
+  .u-all-unset-below {
+    all: unset !important;
+  }
+
+  .u-grid-above {
+    display: flex !important;
+  }
+}
+
+/* State Manager */
+[data-state] {
+  --_state---true: 1;
+  --_state---false: 0;
+}
+
+.is-active,
+[data-state~="checked"]:is(:checked, :has(:checked)),
+[data-state~="current"]:is(.w--current, :has(.w--current)),
+[data-state~="open"]:is(.w--open, :has(.w--open)),
+[data-state~="pressed"]:is([aria-pressed="true"],
+  :has([aria-pressed="true"])),
+[data-state~="expanded"]:is([aria-expanded="true"],
+  :has([aria-expanded="true"])),
+[data-state~="external"]:is([target="_blank"],
+  :has([target="_blank"])) {
+  --_state---true: 0;
+  --_state---false: 1;
+}
+
+.wf-design-mode [data-trigger~="preview"],
+[data-trigger~="focus"]:is(:focus-visible, :has(:focus-visible)),
+[data-trigger~="group"]:has([data-trigger~="focus-other"]:focus-visible,
+  [data-trigger~="focus-other"] :focus-visible) [data-trigger~="focus-other"]:not( :focus-visible,
+  :has(:focus-visible)) {
+  --_trigger---on: 0;
+  --_trigger---off: 1;
+}
+
+@media (hover: hover) {
+
+  [data-trigger~="hover"]:hover,
+  [data-trigger~="hover-if-clickable"]:has(.clickable_wrap:not(.w-condition-invisible)):hover,
+  [data-trigger~="group"]:has([data-trigger~="hover-other"]:hover) [data-trigger~="hover-other"]:not(:hover) {
+    --_trigger---on: 0;
+    --_trigger---off: 1;
+  }
+
+  [data-trigger~="hover-other"]:hover {
+    --_trigger---on: 1 !important;
+    --_trigger---off: 0 !important;
+  }
+}
+
+@media (hover: none) {
+  [data-trigger~="mobile"] {
+    --_trigger---on: 0;
+    --_trigger---off: 1;
+  }
+}
+
+/* Slot Styler */
+[data-slot]>.w-dyn-list,
+[data-slot]>.w-dyn-list>*,
+[data-slot]>.w-dyn-list>*>*,
+[data-slot]>.u-display-contents>.w-dyn-list,
+[data-slot]>.u-display-contents>.w-dyn-list>*,
+[data-slot]>.u-display-contents>.w-dyn-list>*>*,
+[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list,
+[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list>*,
+[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list>*>* {
+  display: contents;
+}
+
+/* Gradient Accent */
+.u-heading-accent strong,
+.u-heading-accent b {
+  background: linear-gradient(45deg,
+      var(--swatch--green),
+      var(--swatch--gold),
+      var(--swatch--coral));
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  -webkit-animation: GradientAnimation 5s ease infinite;
+  -moz-animation: GradientAnimation 5s ease infinite;
+  animation: GradientAnimation 5s ease infinite;
+}
+
+/* Gradient Background - add your data attribute name */
+[data-gradient-bg] {
+  background: linear-gradient(300deg,
+      var(--swatch--green),
+      var(--swatch--gold),
+      var(--swatch--coral));
+  background-size: 180% 180%;
+  -webkit-animation: GradientAnimation 10s ease infinite;
+  -moz-animation: GradientAnimation 10s ease infinite;
+  animation: GradientAnimation 10s ease infinite;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+
+  .u-heading-accent strong,
+  .u-heading-accent b {
+    -webkit-animation: none;
+    -moz-animation: none;
+    animation: none;
+    background-size: 100% 100%;
+  }
+
+  [data-gradient-bg] {
+    -webkit-animation: none;
+    -moz-animation: none;
+    animation: none;
+    background-size: 100% 100%;
+  }
+}
+
+@-webkit-keyframes GradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@-moz-keyframes GradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes GradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Shadow */
+[data-shadow] {
+  box-shadow: rgb(from var(--_theme---shadow) r g b / 0.02) 0 0.25em 0.5em 0,
+    rgb(from var(--_theme---shadow) r g b / 0.03) 0 0.5em 0.75em 0,
+    rgb(from var(--_theme---shadow) r g b / 0.04) 0 0.75em 1em 0,
+    rgb(from var(--_theme---shadow) r g b / 0.04) 0 1em 1.5em 0;
+}
+
+html.wf-design-mode .guide_wrap {
+  display: block;
+}
+
+.guide_layout {
+  counter-reset: gridguides;
+}
+
+.guide_layout>div::before {
+  counter-increment: gridguides;
+  content: counter(gridguides);
+}
+
+@container (min-width: 40em) {
+  .nav_desktop_wrap {
+    display: block;
+  }
+
+  .nav_desktop_wrap:not(.w-condition-invisible)~.nav_mobile_wrap,
+  .nav_desktop_wrap:not(.w-condition-invisible)~.nav_menu_backdrop {
+    display: none;
+  }
+}
+
+body:has([data-tooltip]:hover) .tooltip {
+  opacity: 1;
+}
+
+[data-transition-wrap] {
+  display: none !important;
+}
+
+.button_menu_icon_line {
+  transition: transform 0.3s ease-in-out;
+}
+
+.button_menu_wrap.is-active .button_menu_icon_line:first-child {
+  transform: translateY(0.175rem) rotate(45deg);
+}
+
+.button_menu_wrap.is-active .button_menu_icon_line:last-child {
+  transform: translateY(-0.175rem) rotate(-45deg);
+}
+
+.modal_dialog::backdrop {
+  opacity: 0;
+}
+
+.wf-design-mode [data-show-in-designer="true"] {
+  display: block;
+}
+
+@container (width < 40em) {
+  .form_fieldset_list:has(.form_fieldset_list) {
+    display: flex;
+  }
+}
+
+@container (width < 18em) {
+  .form_fieldset_list {
+    display: flex;
+  }
+}
+
+@container (width >=65em) {
+  .hero_home_layout {
+    gap: 6rem !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero_home_trigger.is-1 {
+    height: 100% !important;
+  }
+
+  .hero_home_trigger.is-2 {
+    display: none !important;
+  }
+
+  .hero_home_wrap {
+    height: 100vh !important;
+  }
+}
+
+.wf-design-mode .hero_home_wrap {
+  height: 100vh !important;
+}
+
+.is-merchant {
+  clip-path: polygon(0.75rem 0%,
+      calc(100% - 0.75rem) 0%,
+      100% 50%,
+      calc(100% - 0.75rem) 100%,
+      0.75rem 100%,
+      0% 50%);
+}
+
+.is-studio {
+  clip-path: polygon(0% calc(0% + 0.4375rem),
+      calc(0% + 0.4375rem) calc(0% + 0.4375rem),
+      calc(0% + 0.4375rem) 0%,
+      calc(100% - 0.4375rem) 0%,
+      calc(100% - 0.4375rem) calc(0% + 0.4375rem),
+      100% calc(0% + 0.4375rem),
+      100% calc(100% - 0.4375rem),
+      calc(100% - 0.4375rem) calc(100% - 0.4375rem),
+      calc(100% - 0.4375rem) 100%,
+      calc(0% + 0.4375rem) 100%,
+      calc(0% + 0.4375rem) calc(100% - 0.4375rem),
+      0% calc(100% - 0.4375rem));
+}
+
+.is-gamer {
+  border-radius: 0.25rem;
+}
+
+.product_lifestyle_wrap.is-right {
+  inset: auto -14% 20% auto;
+}
+
+#canvas-target canvas {
+  position: relative;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  max-width: unset;
+  pointer-events: all;
+  max-width: calc(100% + 2px);
+  max-height: calc(100% + 2px);
+  min-width: calc(100% + 2px);
+  min-height: calc(100% + 2px);
+}
+
+[data-credit-modal] {
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.5s;
+}
+
+[data-credit-modal].is-open {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
+}
+/* Fix: headings inside .c-heading should inherit font-size from parent */
+.c-heading h1,
+.c-heading h2,
+.c-heading h3,
+.c-heading h4,
+.c-heading h5,
+.c-heading h6 {
+  font-size: inherit;
+  line-height: inherit;
+}