@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --snays-w: 1350px;
  --snays-gutter: 24px;

  --snays-bg: #F6F7F9;
  --snays-surface: #FFFFFF;
  --snays-surface-2: #EEF1F5;
  --snays-surface-3: #E7EBF1;
  --snays-border: #E3E7EE;
  --snays-border-strong: #D2D8E2;

  --snays-text: #1B2238;
  --snays-text-soft: #5B6478;
  --snays-muted: #8A93A6;
  --snays-on-primary: #FFFFFF;
  --snays-on-accent: #FFFFFF;

  --snays-black:#0B0B0D;
  --snays-black-hover:#18181C;
  --snays-on-black:#FFFFFF;

  --snays-primary: #3B4A6B;
  --snays-primary-hover: #2F3C58;
  --snays-primary-soft: #EAEDF3;

  --snays-accent: #5703AD;
  --snays-accent-hover: #6A12C9;
  --snays-accent-soft: #EFE4FB;

  --snays-success: #2BB07A;
  --snays-success-soft: #DDF3EA;
  --snays-warn: #E0A52E;
  --snays-warn-soft: #FBEFD6;
  --snays-danger: #E5564E;
  --snays-danger-soft: #FBE1DF;
  --snays-info: #3D7BD6;
  --snays-info-soft: #E1ECFB;

  --snays-radius-sm: 5px;
  --snays-radius-md: 8px;
  --snays-radius-lg: 10px;

  --snays-shadow-1: 0 1px 2px rgba(20,28,50,.04), 0 2px 8px rgba(20,28,50,.04);
  --snays-shadow-2: 0 8px 24px rgba(20,28,50,.08);
  --snays-shadow-3: 0 24px 48px rgba(20,28,50,.16);

  --snays-z-bbar: 850;
  --snays-z-head: 900;
  --snays-z-panel: 950;
  --snays-z-modal: 1000;

  --snays-ease: cubic-bezier(.2,.8,.2,1);
  --snays-fast: 160ms;
  --snays-mid: 260ms;
  --snays-slow: 380ms;

  --snays-font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --snays-fs-12: 12px;
  --snays-fs-13: 13px;
  --snays-fs-14: 14px;
  --snays-fs-15: 15px;
  --snays-fs-16: 16px;
  --snays-fs-18: 18px;
  --snays-fs-20: 20px;
  --snays-fs-24: 24px;

  --snays-head-bar-h: 72px;
  --snays-nav-h: 56px;
  --snays-topbar-h: 36px;
  --snays-promo-h: 36px;
  --snays-bbar-h: 64px;

  --snays-section-fade: 140px;
  --snays-section-bg-into-surface: linear-gradient(
    to bottom,
    var(--snays-surface) 0,
    var(--snays-bg) var(--snays-section-fade),
    var(--snays-bg) calc(100% - var(--snays-section-fade)),
    var(--snays-surface) 100%
  );

  --snays-scrollbar-w: 5px;
  --snays-scrollbar-track: transparent;
  --snays-scrollbar-thumb: color-mix(in srgb, var(--snays-border-strong) 72%, var(--snays-primary) 28%);
  --snays-scrollbar-thumb-hover: color-mix(in srgb, var(--snays-accent) 32%, var(--snays-border-strong) 68%);
}

html[data-theme="dark"]{
  --snays-black:#000000;
  --snays-black-hover:#141414;
  --snays-on-black:#F2F3F7;

  --snays-bg:#07080C;
  --snays-surface:#0E1016;
  --snays-surface-2:#161922;
  --snays-surface-3:#1F232E;
  --snays-border:#1C202B;
  --snays-border-strong:#2A2F3D;

  --snays-text:#EAECF5;
  --snays-text-soft:#A9AFC6;
  --snays-muted:#6F758C;

  --snays-primary:#A8B3D1;
  --snays-primary-hover:#BFC8E0;
  --snays-primary-soft:#161922;
  --snays-on-primary:#07080C;

  --snays-accent:#B084F5;
  --snays-accent-hover:#C9ABF8;
  --snays-accent-soft:#1B0B2D;

  --snays-success-soft:#0F2618;
  --snays-warn-soft:#2A200C;
  --snays-danger-soft:#2E1412;
  --snays-info-soft:#0F1A2C;

  --snays-shadow-1: 0 1px 2px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --snays-shadow-2: 0 8px 24px rgba(0,0,0,.55);
  --snays-shadow-3: 0 24px 48px rgba(0,0,0,.65);

  --snays-scrollbar-thumb: color-mix(in srgb, var(--snays-border-strong) 55%, var(--snays-muted) 45%);
  --snays-scrollbar-thumb-hover: color-mix(in srgb, var(--snays-accent) 40%, var(--snays-border-strong) 60%);
}

*,
*::before,
*::after{
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--snays-scrollbar-thumb) var(--snays-scrollbar-track);
}

html{
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

*::-webkit-scrollbar{
  width: var(--snays-scrollbar-w);
  height: var(--snays-scrollbar-w);
}
*::-webkit-scrollbar-track{
  background: var(--snays-scrollbar-track);
}
*::-webkit-scrollbar-thumb{
  background-color: var(--snays-scrollbar-thumb);
  border-radius: 999px;
  transition: background-color var(--snays-fast) var(--snays-ease);
}
*::-webkit-scrollbar-thumb:hover{
  background-color: var(--snays-scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner{
  background: transparent;
}

body{
  margin: 0;
  background: var(--snays-bg);
  color: var(--snays-text);
  font-family: var(--snays-font);
  font-size: var(--snays-fs-15);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--snays-fast) var(--snays-ease), color var(--snays-fast) var(--snays-ease);
}

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

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

button{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,select,textarea{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul,ol{ margin: 0; padding: 0; list-style: none; }

h1,h2,h3,h4,h5,h6,p{ margin: 0; }

:focus-visible{
  outline: 2px solid var(--snays-accent);
  outline-offset: 2px;
  border-radius: var(--snays-radius-sm);
}

.snays-container{
  width: 100%;
  max-width: var(--snays-w);
  margin-inline: auto;
  padding-inline: var(--snays-gutter);
}

body.snays-no-scroll{
  overflow: hidden;
  touch-action: none;
}

.snays-scrim{
  position: fixed;
  inset: 0;
  background: rgba(15,19,34,.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--snays-mid) var(--snays-ease), visibility var(--snays-mid) var(--snays-ease);
  z-index: var(--snays-z-panel);
}
.snays-scrim[data-active="true"]{
  opacity: 1;
  visibility: visible;
}

.snays-sr{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.snays-acc-expand{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--snays-slow) var(--snays-ease);
}
.snays-acc-expand[hidden]{
  display: grid !important;
  grid-template-rows: 0fr !important;
}
.snays-acc-expand-in{
  min-height: 0;
  overflow: hidden;
}
.snays-acc-expand[hidden] .snays-acc-expand-in{
  visibility: hidden;
}
.snays-dnav-acc[data-state="closed"] > .snays-acc-expand .snays-acc-expand-in,
.snays-mside-acc[data-state="closed"] > .snays-acc-expand .snays-acc-expand-in{
  pointer-events: none;
}
.snays-dnav-acc[data-state="open"] > .snays-acc-expand,
.snays-mside-acc[data-state="open"] > .snays-acc-expand{
  grid-template-rows: 1fr;
}

@media (max-width: 1199px){
  :root{ --snays-gutter: 20px; }
}
@media (max-width: 767px){
  :root{ --snays-gutter: 16px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.snays-breadcrumb{
  padding: 12px 0 16px;
  background: var(--snays-surface);
  border-bottom: 1px solid var(--snays-border);
}
.snays-breadcrumb .snays-container{
  position: relative;
}
.snays-breadcrumb-nav{
  position: relative;
  z-index: 1;
}
.snays-breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  row-gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.snays-breadcrumb-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--snays-fs-13);
  line-height: 1.4;
  color: var(--snays-text-soft);
}
.snays-breadcrumb-item + .snays-breadcrumb-item::before{
  content: "›";
  display: inline-block;
  margin-inline-end: 4px;
  font-size: .95em;
  font-weight: 600;
  color: var(--snays-muted);
  line-height: 1;
}
.snays-breadcrumb-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--snays-text-soft);
  text-decoration: none;
  transition: color var(--snays-fast) var(--snays-ease);
}
.snays-breadcrumb-link:hover{
  color: var(--snays-accent);
}
.snays-breadcrumb-link-home{
  font-weight: 500;
}
.snays-breadcrumb-home-ico{
  flex-shrink: 0;
  opacity: .9;
}
.snays-breadcrumb-current{
  display: inline-block;
  font-weight: 600;
  color: var(--snays-accent);
  padding: 4px 10px;
  background: var(--snays-accent-soft);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}