/* ── RESET ── */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
*,*::before,*::after{box-sizing:border-box;}

/* ── ROOT VARS ── */
:root {
  --viewport-height: 100vh;
  --teal: #4EAFB8;
  --teal-text: #48ACB4;
  --orange: #FF6D00;
  --dark: #121212;
  --white: #ffffff;
  --font: 'Poppins', sans-serif;
}

html { font-size: 18pt; }
@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }

/* ── BODY & BACKGROUND ── */
body {
  background-color: var(--dark);
  min-height: var(--viewport-height);
  min-width: 320px;
  overflow-x: hidden;
  word-wrap: break-word;
  font-family: var(--font);
}

/* SVG chevron pattern */
body::before {
  content: '';
  display: block;
  height: var(--viewport-height);
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20path%20%7B%20fill%3A%20none%3B%20stroke%3A%20rgba(255,255,255,0.078)%3B%20stroke-width%3A%201.01px%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20miter%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M256%2C128L0%2C384l-192-192%20M256%2C256%20M256%2C384%20M256%2C128v128%20M256%2C128l256%2C256l192-192%20M256%2C256%20M256%2C384%20M256%2C128%20M256%2C384%20M256%2C256%20M-64%2C704%20M0%2C384%20M511.7%2C512L256%2C256L0.3%2C512%20M512%2C384%20M0.3%2C512%20M-192%2C320L0.3%2C512%20M704%2C320L511.7%2C512%20M-192%2C448%20L0%2C640l256-256l256%2C256l192-192%20M-192-192L0%2C0l256-256%20M256-128%20M256%2C0%20M256-128V0%20M256-256L512%2C0l192-192%20M256-128%20M256%2C0%20M256-256%20M256%2C0%20M256-128%20M0.3%2C128%20M-192-64L0.3%2C128%20M704-64L511.7%2C128%20M-192%2C64L0%2C256L256%2C0l256%2C256L704%2C64%20M512%2C256v128%20M0%2C256v128%20M0-192%20V0l0.3%2C128L256-128l255.7%2C256L512%2C0v-192%20M256%2C640V512V384%22%20%2F%3E%3C%2Fsvg%3E');
  background-size: 497px;
  background-position: center;
  background-repeat: repeat;
}

/* ── SITE WRAPPER ── */
.site-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--viewport-height);
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}

/* ── MAIN CARD ── */
.site-main {
  background-color: var(--white);
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.site-main > .inner {
  --padding-horizontal: 2rem;
  --padding-vertical: 3rem;
  --spacing: 1rem;
  --width: 100vw;
  max-width: 100%;
  position: relative;
  width: var(--width);
  z-index: 1;
  padding: var(--padding-vertical) var(--padding-horizontal);
}

.site-main > .inner > * > * {
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}
.site-main > .inner > * > :first-child { margin-top: 0 !important; }
.site-main > .inner > * > :last-child  { margin-bottom: 0 !important; }

@media (max-width: 736px) {
  .site-main > .inner {
    --padding-horizontal: 2rem;
    --padding-vertical: 3rem;
  }
}

/* ── SECTIONS ── */
section { display: none; }
section.active { display: block; }

/* ── BUTTONS COMPONENT ── */
.buttons-component {
  cursor: default;
  display: flex;
  letter-spacing: 0;
  padding: 0;
}
.buttons-component > li { max-width: 100%; }
.buttons-component > li > a {
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  font-family: var(--font);
  letter-spacing: 0.025rem;
  transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* Lang toggle */
.btn-lang {
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.btn-lang > li > a {
  display: inline-block;
  width: 5rem;
  height: 3rem;
  line-height: calc(3rem - 6px);
  padding: 0 0.5rem;
  padding-left: calc(0.025rem + 0.5rem);
  text-transform: uppercase;
  font-size: 1.125em;
  font-weight: 500;
  border-radius: 2rem;
  direction: ltr;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000;
  border: solid 3px var(--teal);
}
.btn-lang > li > a:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Main CTA button full-width */
.btn-cta-full {
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.btn-cta-full > li > a {
  display: inline-flex;
  width: 100vw;
  height: 3.75rem;
  line-height: 3.75rem;
  padding: 0 1.875rem;
  padding-left: calc(0.025rem + 1.875rem);
  font-size: 1.125em;
  font-weight: 400;
  border-radius: 2.75rem;
  flex-direction: row-reverse;
  background-color: var(--white);
  color: #000000;
}
.btn-cta-full > li > a > svg {
  display: block;
  fill: #000000;
  flex-grow: 0;
  flex-shrink: 0;
  height: 100%;
  min-width: 16px;
  pointer-events: none;
  width: 1.125em;
  margin-left: 0.625rem;
  margin-right: calc(-0.125em + 0.025rem);
  transition: fill 0.25s ease;
}
.btn-cta-full > li > a > .label { overflow: hidden; }
.btn-cta-full > li > a:hover { transform: scale(1.0425); }

/* Demo CTA smaller */
.btn-cta-sm {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.btn-cta-sm > li > a {
  display: inline-flex;
  width: 100vw;
  height: 3.75rem;
  line-height: 3.75rem;
  padding: 0 1.875rem;
  padding-left: calc(0.025rem + 1.875rem);
  font-size: 0.875em;
  font-weight: 400;
  border-radius: 2.5rem;
  flex-direction: row-reverse;
  background-color: var(--white);
  color: #000000;
}
.btn-cta-sm > li > a > svg {
  display: block;
  fill: #000000;
  flex-grow: 0;
  flex-shrink: 0;
  height: 100%;
  min-width: 16px;
  pointer-events: none;
  width: 1.125em;
  margin-left: 0.625rem;
  margin-right: calc(-0.125em + 0.025rem);
  transition: fill 0.25s ease;
}
.btn-cta-sm > li > a > .label { overflow: hidden; }
.btn-cta-sm > li > a:hover { transform: scale(1.0425); }

/* Centered large CTA */
.btn-cta-center {
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.btn-cta-center > li > a {
  display: inline-flex;
  width: 30rem;
  height: 3.75rem;
  line-height: 3.75rem;
  padding: 0 0.5rem;
  padding-left: calc(0.025rem + 0.5rem);
  font-size: 1.125em;
  font-weight: 400;
  border-radius: 2.75rem;
  flex-direction: row-reverse;
  background-color: var(--teal);
  color: var(--white);
}
.btn-cta-center > li > a > svg {
  display: block;
  fill: var(--white);
  flex-grow: 0;
  flex-shrink: 0;
  height: 100%;
  min-width: 16px;
  pointer-events: none;
  width: 1.125em;
  margin-left: 0.625rem;
  margin-right: calc(-0.125em + 0.025rem);
  transition: fill 0.25s ease;
}
.btn-cta-center > li > a > .label { overflow: hidden; }
.btn-cta-center > li > a:hover { transform: scale(1.0425); }

/* ── IMAGE COMPONENT ── */
.image-component {
  display: block;
  line-height: 0;
  max-width: 100%;
  position: relative;
}
.image-component > .frame {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
  width: 100%;
}
.image-component > .frame > img {
  max-width: 100%;
  vertical-align: top;
  width: inherit;
}

/* Logo (15rem, centered, no border-radius) */
.img-logo {
  text-align: center;
}
.img-logo > .frame {
  width: 15rem;
}

/* Thumbnail small (15rem, border-radius 2rem) */
.img-thumb {
  text-align: center;
}
.img-thumb > .frame {
  width: 15rem;
  border-radius: 2rem;
}

/* Wide image (36.5rem, border-radius 2rem) */
.img-wide {
  text-align: center;
}
.img-wide > .frame {
  width: 36.5rem;
  border-radius: 2rem;
}

/* ── TEXT COMPONENT ── */
.text-component {
  position: relative;
  text-align: center;
  font-family: var(--font);
  letter-spacing: 0.025rem;
  width: calc(100% + 0.025rem);
  font-size: 1.125em;
  line-height: 2;
  font-weight: 400;
}
.text-component span.p { display: block; position: relative; }
.text-component span.p + span.p { margin-top: 1rem; }
.text-component a { text-decoration: underline; }
.text-component a:hover { text-decoration: none; }

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

/* ── ICONS COMPONENT ── */
.icons-component {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 0;
  padding: 0;
  font-size: 1.875em;
  gap: 1.125rem;
}
.icons-component:not(:first-child) { margin-top: 2.875rem !important; }
.icons-component:not(:last-child)  { margin-bottom: 2.875rem !important; }
.icons-component > li { position: relative; z-index: 1; }
.icons-component > li > a {
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 100%;
  height: 2em;
  width: 2em;
  background-color: var(--white);
  box-shadow: 0 1rem 2.25rem 0 rgba(0,0,0,0.102);
  transition: transform 0.25s ease;
  text-decoration: none;
}
.icons-component > li > a > svg {
  height: 60%;
  width: 60%;
  fill: #000000;
  transition: fill 0.25s ease;
}
.icons-component > li > a > .label { display: none; }
.icons-component > li > a:hover { transform: scale(1.06); }

/* ── CONTAINER COMPONENT ── */
.container-component { position: relative; }
.container-component:not(:first-child) { margin-top: 2rem !important; }
.container-component > .wrapper {
  display: block;
  margin: 0 auto;
  width: 70rem;
  max-width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255,255,255,0.349);
}
.container-component > .wrapper > .inner {
  position: relative;
  max-width: 100%;
}
.mb-1 {
  margin-bottom: var(--spacing, 1rem);
}

/* Teal container */
.container-teal > .wrapper {
  background-color: var(--teal);
  border-radius: 2rem;
}
.container-teal > .wrapper > .inner {
  padding: 3rem 2rem;
  border-radius: calc(2rem - 1px);
}

/* Orange columns container */
.container-orange > .wrapper {
  background-color: var(--orange);
  border-radius: 3rem;
}
.container-orange > .wrapper > .inner {
  padding: 1.25rem;
  border-radius: calc(3rem - 1px);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
}
.container-orange > .wrapper > .inner > :nth-child(1) {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.container-orange > .wrapper > .inner > :nth-child(2) {
  flex: 1;
  min-width: 0;
  text-align: right;
}
.container-orange .btn-cta-sm > li > a,
.container-orange .btn-cta-full > li > a {
  width: 100%;
  max-width: 100%;
}
.container-orange .icons-component {
  justify-content: flex-end;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 600px) {
  .container-orange > .wrapper > .inner { flex-wrap: wrap; gap: 1rem; }
  .container-orange > .wrapper > .inner > :nth-child(1),
  .container-orange > .wrapper > .inner > :nth-child(2) {
    flex: none;
    width: 100%;
    text-align: center;
  }
  .container-orange .icons-component { justify-content: center; }
}

/* ── LINKS COMPONENT ── */
.links-component {
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.5;
  padding: 0;
  gap: 0.5rem;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: var(--font);
  letter-spacing: 0.025rem;
  font-size: 1.125em;
  font-weight: 400;
}
.links-component > li > a {
  direction: ltr;
  display: block;
  color: rgba(255,255,255,0.58);
  text-decoration: underline;
}
.links-component > li > a:hover { text-decoration: none; }
.links-component > li.n01 > a { color: #0F0000; }

/* ── LEGAL DOCUMENT ── */
.legal-doc {
  text-align: left;
  font-family: var(--font);
  font-size: 0.85em;
  line-height: 1.8;
  color: #1a1a1a;
  max-width: 70rem;
  margin: 2rem auto 0;
  padding: 0;
}
.legal-doc h1 {
  font-size: 1.05em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.5;
  letter-spacing: 0.01rem;
}
.legal-doc h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95em;
}
.legal-doc h2 {
  font-size: 1em;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01rem;
}
.legal-doc p {
  margin-bottom: 0.9rem;
}
.legal-doc ol {
  margin: 0.75rem 0 1rem 0;
  padding-left: 0;
  list-style: none;
  counter-reset: legal-ol;
}
.legal-doc ol > li {
  counter-increment: legal-ol;
  padding-left: 2.5rem;
  margin-bottom: 0.75rem;
  position: relative;
}
.legal-doc ol > li::before {
  content: counter(legal-ol) ")";
  position: absolute;
  left: 0;
  font-weight: 400;
}
.legal-doc ol.alpha-list {
  counter-reset: legal-alpha;
}
.legal-doc ol.alpha-list > li {
  counter-increment: legal-alpha;
}
.legal-doc ol.alpha-list > li::before {
  content: counter(legal-alpha, lower-alpha) ")";
}
.legal-doc .legal-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.legal-doc .legal-footer p {
  margin-bottom: 0.25rem;
}
.legal-doc a {
  color: var(--teal-text);
  text-decoration: underline;
}
.legal-doc a:hover {
  text-decoration: none;
}