/*! Wingo blog chrome — static snapshot of wingomarkets.com header + footer,
    generated 2026-08-07 from prod SSR (build/fragments/).
    Every selector is scoped under .wingo-chrome; no Preflight, no global reset.
    Regenerate with build/build-html.mjs + build/compile-css.mjs.
    Utilities: tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-01-hairline.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-02-thin.woff2") format("woff2");
  font-weight: 200 300;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-04-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-05-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-06-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-07-heavy.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakh";
  src: url("https://wingomarkets.com/fonts/yekanbakh-08-fat.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

.wingo-chrome {
  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --leading-relaxed: 1.625;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --blur-2xl: 40px;
  --blur-3xl: 64px;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
  .wingo-chrome *,
  .wingo-chrome ::before,
  .wingo-chrome ::after,
  .wingo-chrome ::backdrop {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-border-style: solid;
    --tw-gradient-position: initial;
    --tw-gradient-from: #0000;
    --tw-gradient-via: #0000;
    --tw-gradient-to: #0000;
    --tw-gradient-stops: initial;
    --tw-gradient-via-stops: initial;
    --tw-gradient-from-position: 0%;
    --tw-gradient-via-position: 50%;
    --tw-gradient-to-position: 100%;
    --tw-leading: initial;
    --tw-font-weight: initial;
    --tw-tracking: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-inset-shadow-alpha: 100%;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-backdrop-blur: initial;
    --tw-backdrop-brightness: initial;
    --tw-backdrop-contrast: initial;
    --tw-backdrop-grayscale: initial;
    --tw-backdrop-hue-rotate: initial;
    --tw-backdrop-invert: initial;
    --tw-backdrop-opacity: initial;
    --tw-backdrop-saturate: initial;
    --tw-backdrop-sepia: initial;
    --tw-duration: initial;
    --tw-content: "";
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    --tw-ease: initial;
  }
}

.wingo-chrome {
  --background: #101010;
  --background-deep: #020104;
  --footer-bg: #020104;
  --nav-cta-bg: #009c7a;
  --foreground: #fafafa;
  --card: #171717;
  --primary: #00d37e;
  --secondary: #01b990;
  --secondary-alt: #28e8be;
  --muted-foreground: #a1a1a1;
  --radius: 0.625rem;
  --font-yekanbakh: "YekanBakh", ui-sans-serif, system-ui;
  --font-rubik: Rubik, ui-sans-serif, system-ui;
  --font-sans: var(--font-rubik);
}

.wingo-chrome[dir="rtl"] {
  --font-sans: var(--font-yekanbakh);
}

.wingo-chrome,
.wingo-chrome *,
.wingo-chrome *::before,
.wingo-chrome *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

.wingo-chrome {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sans);
  text-align: start;
}

.wingo-chrome h1,
.wingo-chrome h2,
.wingo-chrome h3,
.wingo-chrome h4,
.wingo-chrome h5,
.wingo-chrome h6 {
  font-size: inherit;
  font-weight: inherit;
}

.wingo-chrome a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

.wingo-chrome b,
.wingo-chrome strong {
  font-weight: bolder;
}

.wingo-chrome ol,
.wingo-chrome ul,
.wingo-chrome menu {
  list-style: none;
}

.wingo-chrome img,
.wingo-chrome svg,
.wingo-chrome video,
.wingo-chrome canvas,
.wingo-chrome audio,
.wingo-chrome iframe,
.wingo-chrome embed,
.wingo-chrome object {
  display: block;
  vertical-align: middle;
}

.wingo-chrome img,
.wingo-chrome video {
  max-width: 100%;
  height: auto;
}

.wingo-chrome button,
.wingo-chrome input,
.wingo-chrome select,
.wingo-chrome optgroup,
.wingo-chrome textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

.wingo-chrome button {
  appearance: button;
}

.wingo-chrome .absolute {
  position: absolute;
}

.wingo-chrome .fixed {
  position: fixed;
}

.wingo-chrome .relative {
  position: relative;
}

.wingo-chrome .sticky {
  position: sticky;
}

.wingo-chrome .inset-0 {
  inset: calc(var(--spacing) * 0);
}

.wingo-chrome .inset-x-0 {
  inset-inline: calc(var(--spacing) * 0);
}

.wingo-chrome .end-0 {
  inset-inline-end: calc(var(--spacing) * 0);
}

.wingo-chrome .top-0 {
  top: calc(var(--spacing) * 0);
}

.wingo-chrome .top-full {
  top: 100%;
}

.wingo-chrome .bottom-0 {
  bottom: calc(var(--spacing) * 0);
}

.wingo-chrome .bottom-20 {
  bottom: calc(var(--spacing) * 20);
}

.wingo-chrome .left-1\/2 {
  left: calc(1 / 2 * 100%);
}

.wingo-chrome .z-10 {
  z-index: 10;
}

.wingo-chrome .z-20 {
  z-index: 20;
}

.wingo-chrome .z-30 {
  z-index: 30;
}

.wingo-chrome .z-999 {
  z-index: 999;
}

.wingo-chrome .mx-4 {
  margin-inline: calc(var(--spacing) * 4);
}

.wingo-chrome .mx-auto {
  margin-inline: auto;
}

.wingo-chrome .my-7\.5 {
  margin-block: calc(var(--spacing) * 7.5);
}

.wingo-chrome .-ms-\[130px\] {
  margin-inline-start: calc(130px * -1);
}

.wingo-chrome .me-3 {
  margin-inline-end: calc(var(--spacing) * 3);
}

.wingo-chrome .-mt-10 {
  margin-top: calc(var(--spacing) * -10);
}

.wingo-chrome .mt-0 {
  margin-top: calc(var(--spacing) * 0);
}

.wingo-chrome .mt-1\.5 {
  margin-top: calc(var(--spacing) * 1.5);
}

.wingo-chrome .mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.wingo-chrome .mt-2\.5 {
  margin-top: calc(var(--spacing) * 2.5);
}

.wingo-chrome .mt-3 {
  margin-top: calc(var(--spacing) * 3);
}

.wingo-chrome .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.wingo-chrome .mt-10 {
  margin-top: calc(var(--spacing) * 10);
}

.wingo-chrome .mt-\[30px\] {
  margin-top: 30px;
}

.wingo-chrome .mt-\[40px\] {
  margin-top: 40px;
}

.wingo-chrome .mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}

.wingo-chrome .mb-\[21px\] {
  margin-bottom: 21px;
}

.wingo-chrome .block {
  display: block;
}

.wingo-chrome .flex {
  display: flex;
}

.wingo-chrome .hidden {
  display: none;
}

.wingo-chrome .inline-block {
  display: inline-block;
}

.wingo-chrome .inline-flex {
  display: inline-flex;
}

.wingo-chrome .size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.wingo-chrome .h-5 {
  height: calc(var(--spacing) * 5);
}

.wingo-chrome .h-7 {
  height: calc(var(--spacing) * 7);
}

.wingo-chrome .h-8 {
  height: calc(var(--spacing) * 8);
}

.wingo-chrome .h-16 {
  height: calc(var(--spacing) * 16);
}

.wingo-chrome .h-80 {
  height: calc(var(--spacing) * 80);
}

.wingo-chrome .h-\[35px\] {
  height: 35px;
}

.wingo-chrome .h-\[46px\] {
  height: 46px;
}

.wingo-chrome .h-\[130px\] {
  height: 130px;
}

.wingo-chrome .h-auto {
  height: auto;
}

.wingo-chrome .max-h-45 {
  max-height: calc(var(--spacing) * 45);
}

.wingo-chrome .max-h-\[500px\] {
  max-height: 500px;
}

.wingo-chrome .min-h-full {
  min-height: 100%;
}

.wingo-chrome .w-5 {
  width: calc(var(--spacing) * 5);
}

.wingo-chrome .w-7 {
  width: calc(var(--spacing) * 7);
}

.wingo-chrome .w-8 {
  width: calc(var(--spacing) * 8);
}

.wingo-chrome .w-43\.75 {
  width: calc(var(--spacing) * 43.75);
}

.wingo-chrome .w-50 {
  width: calc(var(--spacing) * 50);
}

.wingo-chrome .w-\[35px\] {
  width: 35px;
}

.wingo-chrome .w-auto {
  width: auto;
}

.wingo-chrome .w-fit {
  width: fit-content;
}

.wingo-chrome .w-full {
  width: 100%;
}

.wingo-chrome .w-max {
  width: max-content;
}

.wingo-chrome .max-w-54 {
  max-width: calc(var(--spacing) * 54);
}

.wingo-chrome .max-w-300 {
  max-width: calc(var(--spacing) * 300);
}

.wingo-chrome .min-w-\[46px\] {
  min-width: 46px;
}

.wingo-chrome .min-w-\[160px\] {
  min-width: 160px;
}

.wingo-chrome .min-w-\[650px\] {
  min-width: 650px;
}

.wingo-chrome .flex-1 {
  flex: 1;
}

.wingo-chrome .flex-none {
  flex: none;
}

.wingo-chrome .-translate-x-1\/2 {
}

.wingo-chrome .cursor-pointer {
  cursor: pointer;
}

.wingo-chrome .flex-col {
  flex-direction: column;
}

.wingo-chrome .items-center {
  align-items: center;
}

.wingo-chrome .items-stretch {
  align-items: stretch;
}

.wingo-chrome .justify-between {
  justify-content: space-between;
}

.wingo-chrome .justify-center {
  justify-content: center;
}

.wingo-chrome .justify-start {
  justify-content: flex-start;
}

.wingo-chrome .gap-1 {
  gap: calc(var(--spacing) * 1);
}

.wingo-chrome .gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}

.wingo-chrome .gap-2 {
  gap: calc(var(--spacing) * 2);
}

.wingo-chrome .gap-3 {
  gap: calc(var(--spacing) * 3);
}

.wingo-chrome .gap-4 {
  gap: calc(var(--spacing) * 4);
}

.wingo-chrome .gap-5 {
  gap: calc(var(--spacing) * 5);
}

.wingo-chrome .gap-6 {
  gap: calc(var(--spacing) * 6);
}

.wingo-chrome .gap-7 {
  gap: calc(var(--spacing) * 7);
}

.wingo-chrome .gap-10 {
  gap: calc(var(--spacing) * 10);
}

.wingo-chrome .gap-\[25px\] {
  gap: 25px;
}

.wingo-chrome .gap-y-\[10px\] {
  row-gap: 10px;
}

.wingo-chrome .self-stretch {
  align-self: stretch;
}

.wingo-chrome .overflow-hidden {
  overflow: hidden;
}

.wingo-chrome .overflow-y-auto {
  overflow-y: auto;
}

.wingo-chrome .overscroll-contain {
  overscroll-behavior: contain;
}

.wingo-chrome .rounded-2xl {
  border-radius: calc(var(--radius) * 1.8);
}

.wingo-chrome .rounded-3xl {
  border-radius: calc(var(--radius) * 2.2);
}

.wingo-chrome .rounded-\[5px\] {
  border-radius: 5px;
}

.wingo-chrome .rounded-\[6px\] {
  border-radius: 6px;
}

.wingo-chrome .rounded-\[10px\] {
  border-radius: 10px;
}

.wingo-chrome .rounded-lg {
  border-radius: var(--radius);
}

.wingo-chrome .rounded-none\! {
  border-radius: 0 !important;
}

.wingo-chrome .border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.wingo-chrome .border-1 {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.wingo-chrome .border-y {
  border-block-style: var(--tw-border-style);
  border-block-width: 1px;
}

.wingo-chrome .border-transparent {
  border-color: transparent;
}

.wingo-chrome .border-white\/5 {
  border-color: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
}

.wingo-chrome .border-white\/10 {
  border-color: color-mix(in srgb, #fff 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}

.wingo-chrome .border-white\/15 {
  border-color: color-mix(in srgb, #fff 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
  }
}

.wingo-chrome .bg-card\/95 {
  background-color: var(--card);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--card) 95%, transparent);
  }
}

.wingo-chrome .bg-footer-bg {
  background-color: var(--footer-bg);
}

.wingo-chrome .bg-nav-cta-bg {
  background-color: var(--nav-cta-bg);
}

.wingo-chrome .bg-nav-cta-bg\/20 {
  background-color: var(--nav-cta-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--nav-cta-bg) 20%, transparent);
  }
}

.wingo-chrome .bg-white {
  background-color: var(--color-white);
}

.wingo-chrome .bg-white\/10 {
  background-color: color-mix(in srgb, #fff 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}

.wingo-chrome .bg-linear-to-b {
  --tw-gradient-position: to bottom;
  @supports (background-image: linear-gradient(in lab, red, red)) {
    --tw-gradient-position: to bottom in oklab;
  }
  background-image: linear-gradient(var(--tw-gradient-stops));
}

.wingo-chrome .from-footer-bg {
  --tw-gradient-from: var(--footer-bg);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.wingo-chrome .from-transparent {
  --tw-gradient-from: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.wingo-chrome .to-black {
  --tw-gradient-to: var(--color-black);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.wingo-chrome .to-nav-cta-bg\/\[\.23\] {
  --tw-gradient-to: var(--nav-cta-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--nav-cta-bg) 23%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.wingo-chrome .to-50\% {
  --tw-gradient-to-position: 50%;
}

.wingo-chrome .object-contain {
  object-fit: contain;
}

.wingo-chrome .object-cover {
  object-fit: cover;
}

.wingo-chrome .p-1 {
  padding: calc(var(--spacing) * 1);
}

.wingo-chrome .p-4 {
  padding: calc(var(--spacing) * 4);
}

.wingo-chrome .px-2 {
  padding-inline: calc(var(--spacing) * 2);
}

.wingo-chrome .px-2\.5 {
  padding-inline: calc(var(--spacing) * 2.5);
}

.wingo-chrome .px-3 {
  padding-inline: calc(var(--spacing) * 3);
}

.wingo-chrome .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.wingo-chrome .px-5 {
  padding-inline: calc(var(--spacing) * 5);
}

.wingo-chrome .px-5\.25 {
  padding-inline: calc(var(--spacing) * 5.25);
}

.wingo-chrome .px-6 {
  padding-inline: calc(var(--spacing) * 6);
}

.wingo-chrome .px-7 {
  padding-inline: calc(var(--spacing) * 7);
}

.wingo-chrome .py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.wingo-chrome .py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}

.wingo-chrome .py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.wingo-chrome .py-4 {
  padding-block: calc(var(--spacing) * 4);
}

.wingo-chrome .py-5 {
  padding-block: calc(var(--spacing) * 5);
}

.wingo-chrome .py-10 {
  padding-block: calc(var(--spacing) * 10);
}

.wingo-chrome .pt-3 {
  padding-top: calc(var(--spacing) * 3);
}

.wingo-chrome .pt-6 {
  padding-top: calc(var(--spacing) * 6);
}

.wingo-chrome .pb-8 {
  padding-bottom: calc(var(--spacing) * 8);
}

.wingo-chrome .text-center {
  text-align: center;
}

.wingo-chrome .text-start {
  text-align: start;
}

.wingo-chrome .text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.wingo-chrome .text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.wingo-chrome .text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.wingo-chrome .text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.wingo-chrome .text-\[10px\] {
  font-size: 10px;
}

.wingo-chrome .text-\[11px\] {
  font-size: 11px;
}

.wingo-chrome .text-\[12px\] {
  font-size: 12px;
}

.wingo-chrome .text-\[14px\] {
  font-size: 14px;
}

.wingo-chrome .text-\[16px\] {
  font-size: 16px;
}

.wingo-chrome .text-\[20px\] {
  font-size: 20px;
}

.wingo-chrome .text-\[25px\] {
  font-size: 25px;
}

.wingo-chrome .text-\[30px\] {
  font-size: 30px;
}

.wingo-chrome .leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}

.wingo-chrome .leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}

.wingo-chrome .font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}

.wingo-chrome .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.wingo-chrome .font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}

.wingo-chrome .font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.wingo-chrome .tracking-\[0\.08em\] {
  --tw-tracking: 0.08em;
  letter-spacing: 0.08em;
}

.wingo-chrome .whitespace-nowrap {
  white-space: nowrap;
}

.wingo-chrome .whitespace-pre-line {
  white-space: pre-line;
}

.wingo-chrome .text-muted-foreground {
  color: var(--muted-foreground);
}

.wingo-chrome .text-nav-cta-bg {
  color: var(--nav-cta-bg);
}

.wingo-chrome .text-secondary {
  color: var(--secondary);
}

.wingo-chrome .text-secondary-alt {
  color: var(--secondary-alt);
}

.wingo-chrome .text-white {
  color: var(--color-white);
}

.wingo-chrome .text-white\/80 {
  color: color-mix(in srgb, #fff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
}

.wingo-chrome .uppercase {
  text-transform: uppercase;
}

.wingo-chrome .opacity-40 {
  opacity: 40%;
}

.wingo-chrome .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.wingo-chrome .backdrop-blur-2xl {
  --tw-backdrop-blur: blur(var(--blur-2xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}

.wingo-chrome .backdrop-blur-3xl {
  --tw-backdrop-blur: blur(var(--blur-3xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}

.wingo-chrome .transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.wingo-chrome .transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.wingo-chrome .transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.wingo-chrome .transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.wingo-chrome .duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}

.wingo-chrome .duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}

.wingo-chrome .duration-400 {
  --tw-duration: 400ms;
  transition-duration: 400ms;
}

.wingo-chrome .group-hover\:text-black\/90 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: color-mix(in srgb, #000 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-black) 90%, transparent);
      }
    }
  }
}

.wingo-chrome .group-hover\:text-secondary-alt {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: var(--secondary-alt);
    }
  }
}

.wingo-chrome .group-data-\[popup-open\]\:rotate-180 {
  &:is(:where(.group)[data-popup-open] *) {
    rotate: 180deg;
  }
}

.wingo-chrome .after\:absolute {
  &::after {
    content: var(--tw-content);
    position: absolute;
  }
}

.wingo-chrome .after\:inset-s-0 {
  &::after {
    content: var(--tw-content);
    inset-inline-start: calc(var(--spacing) * 0);
  }
}

.wingo-chrome .after\:-bottom-\[2px\] {
  &::after {
    content: var(--tw-content);
    bottom: calc(2px * -1);
  }
}

.wingo-chrome .after\:bottom-0 {
  &::after {
    content: var(--tw-content);
    bottom: calc(var(--spacing) * 0);
  }
}

.wingo-chrome .after\:h-px {
  &::after {
    content: var(--tw-content);
    height: 1px;
  }
}

.wingo-chrome .after\:w-full {
  &::after {
    content: var(--tw-content);
    width: 100%;
  }
}

.wingo-chrome .after\:scale-x-0 {
  &::after {
    content: var(--tw-content);
    --tw-scale-x: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

.wingo-chrome .after\:bg-primary {
  &::after {
    content: var(--tw-content);
    background-color: var(--primary);
  }
}

.wingo-chrome .after\:transition-transform {
  &::after {
    content: var(--tw-content);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

.wingo-chrome .after\:duration-300 {
  &::after {
    content: var(--tw-content);
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
}

.wingo-chrome .after\:ease-out {
  &::after {
    content: var(--tw-content);
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

.wingo-chrome .hover\:border-secondary-alt {
  &:hover {
    @media (hover: hover) {
      border-color: var(--secondary-alt);
    }
  }
}

.wingo-chrome .hover\:border-secondary\/40 {
  &:hover {
    @media (hover: hover) {
      border-color: var(--secondary);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--secondary) 40%, transparent);
      }
    }
  }
}

.wingo-chrome .hover\:bg-white\/10 {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
}

.wingo-chrome .hover\:bg-white\/\[0\.07\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent);
      }
    }
  }
}

.wingo-chrome .hover\:text-secondary-alt {
  &:hover {
    @media (hover: hover) {
      color: var(--secondary-alt);
    }
  }
}

.wingo-chrome .hover\:text-white {
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}

.wingo-chrome .hover\:opacity-80 {
  &:hover {
    @media (hover: hover) {
      opacity: 80%;
    }
  }
}

.wingo-chrome .hover\:after\:scale-x-100 {
  &:hover {
    @media (hover: hover) {
      &::after {
        content: var(--tw-content);
        --tw-scale-x: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
}

.wingo-chrome .md\:flex-row {
  @media (width >= 48rem) {
    flex-direction: row;
  }
}

.wingo-chrome .md\:items-center {
  @media (width >= 48rem) {
    align-items: center;
  }
}

.wingo-chrome .md\:justify-between {
  @media (width >= 48rem) {
    justify-content: space-between;
  }
}

.wingo-chrome .md\:gap-20 {
  @media (width >= 48rem) {
    gap: calc(var(--spacing) * 20);
  }
}

.wingo-chrome .md\:px-4 {
  @media (width >= 48rem) {
    padding-inline: calc(var(--spacing) * 4);
  }
}

.wingo-chrome .md\:py-3\.25 {
  @media (width >= 48rem) {
    padding-block: calc(var(--spacing) * 3.25);
  }
}

.wingo-chrome .lg\:-top-10 {
  @media (width >= 64rem) {
    top: calc(var(--spacing) * -10);
  }
}

.wingo-chrome .lg\:bottom-0 {
  @media (width >= 64rem) {
    bottom: calc(var(--spacing) * 0);
  }
}

.wingo-chrome .lg\:mx-0 {
  @media (width >= 64rem) {
    margin-inline: calc(var(--spacing) * 0);
  }
}

.wingo-chrome .lg\:-ms-\[120px\] {
  @media (width >= 64rem) {
    margin-inline-start: calc(120px * -1);
  }
}

.wingo-chrome .lg\:-mt-20 {
  @media (width >= 64rem) {
    margin-top: calc(var(--spacing) * -20);
  }
}

.wingo-chrome .lg\:mt-6 {
  @media (width >= 64rem) {
    margin-top: calc(var(--spacing) * 6);
  }
}

.wingo-chrome .lg\:mt-20 {
  @media (width >= 64rem) {
    margin-top: calc(var(--spacing) * 20);
  }
}

.wingo-chrome .lg\:mt-\[50px\] {
  @media (width >= 64rem) {
    margin-top: 50px;
  }
}

.wingo-chrome .lg\:block {
  @media (width >= 64rem) {
    display: block;
  }
}

.wingo-chrome .lg\:flex {
  @media (width >= 64rem) {
    display: flex;
  }
}

.wingo-chrome .lg\:hidden {
  @media (width >= 64rem) {
    display: none;
  }
}

.wingo-chrome .lg\:h-50 {
  @media (width >= 64rem) {
    height: calc(var(--spacing) * 50);
  }
}

.wingo-chrome .lg\:h-\[700px\] {
  @media (width >= 64rem) {
    height: 700px;
  }
}

.wingo-chrome .lg\:h-auto {
  @media (width >= 64rem) {
    height: auto;
  }
}

.wingo-chrome .lg\:max-h-none {
  @media (width >= 64rem) {
    max-height: none;
  }
}

.wingo-chrome .lg\:min-w-\[1440px\] {
  @media (width >= 64rem) {
    min-width: 1440px;
  }
}

.wingo-chrome .lg\:flex-row {
  @media (width >= 64rem) {
    flex-direction: row;
  }
}

.wingo-chrome .lg\:items-start {
  @media (width >= 64rem) {
    align-items: flex-start;
  }
}

.wingo-chrome .lg\:justify-between {
  @media (width >= 64rem) {
    justify-content: space-between;
  }
}

.wingo-chrome .lg\:gap-\[90px\] {
  @media (width >= 64rem) {
    gap: 90px;
  }
}

.wingo-chrome .lg\:overflow-visible {
  @media (width >= 64rem) {
    overflow: visible;
  }
}

.wingo-chrome .lg\:rounded-full\! {
  @media (width >= 64rem) {
    border-radius: calc(infinity * 1px) !important;
  }
}

.wingo-chrome .lg\:px-0 {
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 0);
  }
}

.wingo-chrome .lg\:text-start {
  @media (width >= 64rem) {
    text-align: start;
  }
}

.wingo-chrome .lg\:text-base {
  @media (width >= 64rem) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
}

.wingo-chrome .lg\:text-\[11px\] {
  @media (width >= 64rem) {
    font-size: 11px;
  }
}

.wingo-chrome .lg\:text-\[12px\] {
  @media (width >= 64rem) {
    font-size: 12px;
  }
}

.wingo-chrome .lg\:text-\[30px\] {
  @media (width >= 64rem) {
    font-size: 30px;
  }
}

.wingo-chrome .lg\:text-\[40px\] {
  @media (width >= 64rem) {
    font-size: 40px;
  }
}

.wingo-chrome .footer-animate-mask {
  width: 100%;
  height: 1200px;
  background: var(--background-deep);
  position: absolute;
  z-index: 2;
  border-radius: 800px;
  bottom: 0;
}

.wingo-chrome .wc-navbar {
  background-color: rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.wingo-chrome .wc-cta-fill {
  transition: transform 0.35s cubic-bezier(0, 0, 0.2, 1);
}

@media (hover: hover) {
  .wingo-chrome .group:hover .wc-cta-fill {
    transform: translateX(0) !important;
  }
}

.wingo-chrome .wc-mega {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease 0.1s, visibility 0s linear 0.3s;
}

.wingo-chrome .wc-mega.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s, 0s;
}

@media (hover: hover) {
  .wingo-chrome .wc-nav-item:hover > .wc-mega {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s, 0s;
  }
}

.wingo-chrome .wc-lang-menu {
  display: none;
}

.wingo-chrome .wc-lang-menu.is-open {
  display: block;
}

.wingo-chrome .wc-drawer {
  display: none;
  /*background-color: var(--background-deep);*/
}

.wingo-chrome .wc-drawer.is-open {
  display: block;
}

@media (width >= 64rem) {
  .wingo-chrome .wc-drawer.is-open {
    display: none;
  }
}

.wingo-chrome .wc-drawer-sub {
  display: none;
}

.wingo-chrome .wc-drawer-item.is-open .wc-drawer-sub {
  display: flex;
}

.wingo-chrome .wc-drawer-item.is-open .wc-chevron {
  transform: rotate(180deg);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

@property --tw-tracking {
  syntax: "*";
  inherits: false;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}

@property --tw-duration {
  syntax: "*";
  inherits: false;
}

@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-ease {
  syntax: "*";
  inherits: false;
}


/* ==========================================================================
   Wingo blog navbar — default + sticky, matching wingomarkets.com/fa
   v2. Verified live against https://wingomarkets.com/blog.

   Why v1 did nothing:
   wingo-chrome.css already ships
       .wingo-chrome .wc-navbar { background-color: rgba(0,0,0,.8);
                                  backdrop-filter: blur(24px); }
   which is specificity (0,2,0). v1 used a bare `.wc-navbar` — (0,1,0) —
   so it lost the cascade no matter where the file was loaded.
   Every selector below is scoped `.wingo-chrome` and repeats `.wc-navbar`
   to reach (0,3,0), so load order stops mattering.

   Load AFTER wingo-chrome.css. Pair with wingo-navbar.js, which stamps the
   [data-wc-logo] / [data-wc-capsule] hooks this file needs.
   ========================================================================== */

/* ---------- DEFAULT — top of page ---------- */
.wingo-chrome .wc-navbar.wc-navbar {
  max-width: 1200px;                     /* max-w-300 */
  padding: 8px 16px;                     /* py-2 px-4 */
  gap: 0;
  background-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: max-width        .3s cubic-bezier(.4,0,.2,1),
              padding          .3s cubic-bezier(.4,0,.2,1),
              gap              .3s cubic-bezier(.4,0,.2,1),
              background-color .3s cubic-bezier(.4,0,.2,1),
              backdrop-filter  .3s cubic-bezier(.4,0,.2,1);
}

/* ---------- STICKY — scrollY > 0 ---------- */
.wingo-chrome .wc-navbar.wc-navbar.is-stuck {
  max-width: 1130px;                     /* 1200 -> 1130 */
  padding: 8px 20px;                     /* px-4 -> px-5 */
  gap: 8px;                              /* gap-2 */
  background-color: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
}

/* ---------- Centre menu capsule ----------
   The blog markup ships this permanently as `border-transparent`, i.e. stuck
   in the scrolled look. These two rules give it the two-state behaviour. */
.wingo-chrome .wc-navbar [data-wc-capsule] {
  border-color: rgba(255, 255, 255, .05) !important;
  transition: border-color .3s cubic-bezier(.4,0,.2,1);
}
.wingo-chrome .wc-navbar.is-stuck [data-wc-capsule] {
  border-color: transparent !important;
  background: transparent !important;
}

/* ---------- Logo block ---------- */
.wingo-chrome .wc-navbar [data-wc-logo] {
  padding-inline-end: 0;
  transition: padding .3s cubic-bezier(.4,0,.2,1);
}
.wingo-chrome .wc-navbar.is-stuck [data-wc-logo] {
  /*padding-inline-end: 16px;*/
  padding-inline-start: 1rem;
}

/* ---------- Mobile: full-bleed, square, no offset ---------- */
@media (max-width: 1023.98px) {
  .wingo-chrome .wc-navbar.wc-navbar,
  .wingo-chrome .wc-navbar.wc-navbar.is-stuck {
    max-width: none;
    margin-top: 0;
    border-radius: 0;
  }
}