.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: 700;
}

.btn-action .ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--primary);
  transition: .25s;
  z-index: 2
}

.btn-action .txt {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 21px 0 18px;
  background: var(--secondary);
  color: var(--primary);
  margin-left: -10px;
  border-radius: 0 999px 999px 0;
  transition: .25s
}

.btn-action:hover .ico {
  transform: translateX(5px)
}

.btn-action.dark .ico,.btn-action.dark .txt {
  background: var(--primary);
  color: #fff
}

.site-header {
  background: var(--primary);
  height: 86px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.09)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-family: "Rethink Sans";
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -.04em
}

.logo-mark {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px
}

.logo small {
  display: block;
  font: 500 9px "DM Sans";
  letter-spacing: .16em;
  color: #b7cdca;
  margin-top: 1px
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 29px;
  color: white;
  font-size: 14px;
  font-weight: 600
}

.nav-links a:hover {
  color: var(--secondary)
}

.mobile {
  display: none;
  background: none;
  border: 0;
  color: white;
  font-size: 25px
}

/* hero */
.hero {
  position: relative;
  height: 780px;
  background: var(--primary);
  overflow: hidden
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  z-index: 1
}

.slide.active {
  opacity: 1;
  z-index: 2
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center
}

.slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(var(--primary-rgb),.88) 0%,rgba(var(--primary-rgb),.65) 46%,rgba(var(--primary-rgb),.22) 100%)
}

.hero-shape {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(var(--secondary-rgb),.32);
  border-radius: 50%;
  left: -85px;
  bottom: -55px;
  z-index: 3
}

.hero-shape::before,.hero-shape::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--secondary-rgb),.23);
  border-radius: 50%
}

.hero-shape::before {
  inset: 25px
}

.hero-shape::after {
  inset: 55px
}

.hero .container {
  height: 100%;
  position: relative;
  z-index: 5
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 54px;
  align-items: center;
  height: 100%
}

.hero-title {
  color: white;
  font-size: clamp(56px,6.3vw,92px);
  line-height: .96;
  letter-spacing: -.055em;
  max-width: 760px;
  font-weight: 700
}

.hero-title b {
  color: var(--secondary)
}

.social-rail {
  position: absolute;
  left: -55px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px
}

.social-rail a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-size: 10px;
  transition: .25s
}

.social-rail a:hover {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--secondary)
}

.hero-side {
  align-self: center
}

.stat-card {
  background: rgba(var(--primary-rgb),.88);
  backdrop-filter: blur(10px);
  color: white;
  border-radius: var(--round);
  padding: 28px;
  width: 310px;
  margin-left: auto;
  margin-bottom: 30px;
  border: 1px solid rgba(255,255,255,.12)
}

.stat-card h3 {
  font-size: 46px;
  line-height: 1;
  color: var(--secondary);
  margin-bottom: 6px
}

.stat-card .label {
  font-size: 17px;
  margin-bottom: 24px;
  display: block
}

.cred-row {
  display: flex;
  margin-bottom: 13px
}

.cred {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--primary);
  font-weight: 800;
  font-size: 10px;
  border: 2px solid var(--primary);
  margin-right: -8px
}

.stat-card p {
  font-size: 15px;
  line-height: 1.5;
  color: #dce9e7
}

.hero-para {
  max-width: 330px;
  margin-left: auto
}

.hero-para p {
  color: white;
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 24px
}

.slide-dots {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  gap: 8px
}

.slide-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid white;
  background: transparent;
  cursor: pointer;
  padding: 0
}

.slide-dots button.active {
  background: var(--secondary);
  border-color: var(--secondary)
}

/* promo */
.promo-wrap {
  position: relative;
  z-index: 10;
  margin-top: -58px
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px
}

.promo-card {
  min-height: 185px;
  background: white;
  border-radius: var(--round);
  padding: 27px;
  display: flex;
  gap: 22px;
  align-items: center;
  box-shadow: var(--shadow);
  border: 1px solid #e8e8e3
}

.promo-card:nth-child(2) {
  background: var(--secondary)
}

.promo-card:nth-child(3) {
  background: var(--primary);
  color: white
}

.promo-icon {
  flex: 0 0 62px;
  height: 62px;
  border-radius: 50%;
  background: #eef6ec;
  display: grid;
  place-items: center;
  font-family: "Rethink Sans";
  font-weight: 800;
  color: var(--primary)
}

.promo-card:nth-child(2) .promo-icon {
  background: white
}

.promo-card:nth-child(3) .promo-icon {
  background: var(--secondary)
}

.promo-card h3 {
  font-size: 23px;
  margin-bottom: 8px
}

.promo-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--para)
}

.promo-card:nth-child(3) p {
  color: #b9cecb
}

/* section shared */
.section {
  padding: 115px 0
}

.section-sub {
  font-size: 16px;
  letter-spacing: .05em;
  margin-bottom: 45px;
  color: #5e6764
}

.section-title {
  font-size: clamp(44px,5vw,70px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 600
}

.section-title small {
  display: block;
  font: 400 16px "DM Sans";
  letter-spacing: .04em;
  margin-bottom: 14px
}

/* about */
.about-intro {
  max-width: 960px;
  margin-bottom: 55px
}

.about-intro .section-title {
  font-size: clamp(42px,4.8vw,68px)
}

.about-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 58px;
  align-items: center
}

.about-image {
  height: 610px;
  border-radius: var(--round);
  overflow: hidden
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.about-copy h3 {
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -.035em;
  font-weight: 500;
  margin-bottom: 40px
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 35px
}

.credential {
  text-align: center;
  padding: 18px 8px;
  border-right: 1px solid #ddd
}

.credential:last-child {
  border-right: 0
}

.credential strong {
  display: block;
  font-size: 29px;
  color: var(--primary);
  margin-bottom: 7px
}

.credential span {
  font-size: 13px;
  color: var(--para)
}

.about-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.achievement {
  background: var(--albastor);
  padding: 25px;
  border-radius: var(--round)
}

.achievement small {
  font-size: 11px;
  letter-spacing: .1em
}

.achievement ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0
}

.achievement li {
  padding: 12px 0;
  border-top: 1px solid #dbded8;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 14px
}

.founder-box {
  background: var(--secondary);
  padding: 25px;
  border-radius: var(--round);
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.founder-box h4 {
  font-size: 26px;
  line-height: 1.3;
  max-width: 420px
}

.support-strip {
  background: var(--primary);
  color: white;
  border-radius: 12px;
  padding: 13px 16px;
  margin-top: 27px;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden
}

.support-strip span {
  white-space: nowrap
}

/* why */
.why {
  background: #fafaf7
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px
}

.wh-card {
  border-radius: var(--round);
  background: white;
  padding: 27px;
  min-height: 375px;
  border: 1px solid #e1e3dd
}

.wh-card h3 {
  font-size: 25px;
  margin-bottom: 20px
}

.wh-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #edf8e9;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  font-size: 25px
}

.wh-list {
  list-style: none;
  padding: 0;
  margin: 0
}

.wh-list li {
  padding-left: 23px;
  position: relative;
  margin-bottom: 17px;
  font-size: 14px;
  line-height: 1.5;
  color: #6e7471
}

.wh-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #3f7d45;
  font-weight: 800
}

.wh-image {
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 26px
}

.wh-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wh-dark {
  background: var(--primary);
  color: white
}

.wh-dark p {
  color: #b5c9c6
}

.fee-box {
  background: var(--secondary);
  color: var(--primary);
  border-radius: 12px;
  padding: 18px;
  margin-top: 22px
}

.fee-box strong {
  font-size: 32px;
  display: block
}

/* services */
.services {
  position: relative;
  padding: 115px 0 85px;
  background: #00343d;
  overflow: hidden;
  color: white
}

.services-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%,rgba(var(--secondary-rgb),.22),transparent 28%),radial-gradient(circle at 80% 70%,rgba(121,216,255,.18),transparent 32%);
  opacity: .65
}

.services::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--primary-rgb),.78)
}

.services .container {
  position: relative;
  z-index: 2
}

.services-head {
  max-width: 950px;
  margin: auto;
  text-align: center;
  margin-bottom: 70px
}

.services-head .section-title {
  color: white
}

.services-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory
}

.services-slider::-webkit-scrollbar {
  display: none
}

.service-card {
  flex: 0 0 min(340px,84vw);
  scroll-snap-align: start;
  min-height: 390px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--round);
  padding: 28px;
  background: rgba(var(--primary-rgb),.64);
  backdrop-filter: blur(4px);
  color: white;
  transition: .25s
}

.service-card.active,.service-card:hover {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--secondary)
}

.service-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 35px
}

.service-card.active .service-icon,.service-card:hover .service-icon {
  background: white
}

.service-card h3 {
  font-size: 25px;
  margin-bottom: 15px
}

.service-card p {
  font-size: 15px;
  line-height: 1.65;
  color: #d1dfdd
}

.service-card.active p,.service-card:hover p {
  color: #52605b
}

.service-card .discover {
  margin-top: 34px;
  font-weight: 700;
  font-size: 14px
}

.service-controls {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 25px
}

.service-controls button {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: 19px
}

/* cases */
.cases {
  background: #f4f5f0
}

.cases-head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 55px
}

.case-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--round);
  background: white;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid #e0e2dc
}

.case-card:nth-child(even) {
  background: #eef0eb
}

.case-img {
  min-height: 420px;
  position: relative
}

.case-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.case-num {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 800
}

.case-info {
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.case-info h3 {
  font-size: 32px;
  margin-bottom: 18px
}

.case-tag {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6e7c75;
  margin-bottom: 12px
}

.case-info p {
  font-size: 15px;
  color: #707773;
  line-height: 1.65;
  margin-bottom: 16px
}

.outcomes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 15px
}

.outcome {
  padding: 14px;
  border-radius: 10px;
  background: #f5f6f1;
  font-size: 12px
}

.outcome:nth-child(2) {
  background: var(--secondary)
}

.outcome:nth-child(3) {
  background: #d9eee0
}

/* trust */
.trust {
  background: var(--primary);
  color: white
}

.trust-grid2 {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 65px;
  align-items: center
}

.trust h2 {
  color: white
}

.trust p {
  color: #b2c5c2;
  line-height: 1.65
}

.trust-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.trust-card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--round);
  padding: 24px;
  background: rgba(255,255,255,.04)
}

.trust-card strong {
  display: block;
  font-size: 22px;
  margin-bottom: 9px;
  color: var(--secondary)
}

.trust-card span {
  font-size: 13px;
  color: #b6c8c5
}

/* guides */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px
}

.guide-card {
  background: white;
  border-radius: var(--round);
  overflow: hidden;
  border: 1px solid #e0e2dc
}

.guide-img {
  height: 250px;
  overflow: hidden
}

.guide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .35s
}

.guide-card:hover .guide-img img {
  transform: scale(1.04)
}

.guide-info {
  padding: 23px
}

.guide-meta {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #78817c;
  margin-bottom: 13px
}

.guide-info h3 {
  font-size: 23px;
  line-height: 1.25
}

/* contact */
.contact {
  background: var(--secondary)
}

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 55px
}

.contact h2 {
  color: var(--primary)
}

.contact p {
  color: #4d5d55
}

.contact-list {
  margin-top: 30px
}

.contact-item {
  padding: 16px 0;
  border-top: 1px solid rgba(var(--primary-rgb),.19)
}

.contact-item strong {
  display: block;
  font-size: 19px
}

.contact-item span {
  font-size: 13px;
  color: #557066
}

.form {
  background: white;
  padding: 28px;
  border-radius: var(--round)
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

label {
  display: block;
  margin-bottom: 13px
}

label span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px
}

input,textarea,select {
  width: 100%;
  padding: 13px;
  border: 1px solid #d9ded9;
  border-radius: 9px;
  background: #fafbf8;
  outline: none
}

.submit {
  border: 0;
  cursor: pointer
}

/* site footer */
body > .site-footer {
  position: relative;
  overflow: hidden;
  padding: 76px 0 26px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #071219!important;
}

body > .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--secondary),var(--accent2),var(--accent3),transparent);
  opacity: .68;
}

.footer-container {
  position: relative;
  z-index: 1
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(280px,1.45fr) minmax(135px,.66fr) minmax(150px,.72fr) minmax(270px,1fr);
  gap: clamp(34px,5vw,82px);
  align-items: start;
  padding-bottom: 62px;
}

.footer-brand-column {
  max-width: 365px
}

body > .site-footer .footer-brand-logo {
  display: inline-flex;
  margin: 0
}

body > .site-footer .footer-exact-brand-logo {
  width: 205px!important;
  max-height: 62px;
  object-fit: contain
}

.footer-description {
  max-width: 350px;
  margin-top: 24px;
  color: #aeb8c4;
  font-size: 14px;
  line-height: 1.72
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 23px
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(var(--secondary-rgb),.3);
  border-radius: 999px;
  background: rgba(var(--secondary-rgb),.055);
  color: #cfdae2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .015em
}

/* Footer social media */
.footer-socials {
  margin-top: 23px
}

.footer-socials-label {
  display: block;
  margin-bottom: 10px;
  color: #71818e;
  font: 850 9px/1 "DM Sans",Inter,Arial,sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap
}

.footer-social-link {
  position: relative;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #c9d5dc;
  border: 1px solid rgba(255,255,255,.11);
  background: radial-gradient(circle at 28% 18%,rgba(255,255,255,.075),transparent 34%),linear-gradient(145deg,rgba(var(--secondary-rgb),.055),rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.12);
  transition: transform .22s ease,color .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease
}

.footer-social-link::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: .72;
  box-shadow: 0 0 8px rgba(101,232,255,.5)
}

.footer-social-link svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor
}

.footer-social-link svg.social-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.footer-social-link:hover,.footer-social-link:focus-visible {
  outline: none;
  transform: translateY(-3px);
  color: var(--primary);
  border-color: rgba(var(--secondary-rgb),.58);
  background: linear-gradient(125deg,var(--secondary),var(--accent2) 58%,var(--accent3));
  box-shadow: 0 13px 30px rgba(var(--secondary-rgb),.15),inset 0 1px 0 rgba(255,255,255,.55)
}

.footer-social-link:hover::after,.footer-social-link:focus-visible::after {
  background: #fff;
  box-shadow: 0 0 9px rgba(255,255,255,.72)
}

.footer-heading {
  margin: 4px 0 24px;
  color: var(--secondary);
  font: 850 11px "DM Sans",sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px
}

.footer-heading-icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #dffef4;
  background: radial-gradient(circle at 30% 18%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(145deg,rgba(var(--secondary-rgb),.11),rgba(var(--primary-rgb),.16));
  border: 1px solid rgba(var(--secondary-rgb),.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -10px 22px rgba(0,0,0,.08),
    0 10px 28px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.015);
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease
}

.footer-heading-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.035);
  pointer-events: none
}

.footer-heading-icon::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--secondary),var(--accent2));
  box-shadow: 0 0 10px rgba(var(--secondary-rgb),.58)
}

.footer-heading-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(var(--secondary-rgb),.18))
}

.footer-column:hover .footer-heading-icon,.footer-start-column:hover .footer-heading-icon {
  transform: translateY(-2px);
  color: #fff;
  border-color: rgba(var(--secondary-rgb),.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 14px 34px rgba(0,0,0,.20),0 0 20px rgba(var(--secondary-rgb),.08)
}

.footer-links {
  display: grid;
  gap: 17px
}

.footer-links a {
  width: max-content;
  max-width: 100%;
  color: #aeb8c4;
  font-size: 14px;
  font-weight: 650;
  transition: color .2s ease,transform .2s ease
}

.footer-links a:hover {
  color: var(--secondary);
  transform: translateX(3px)
}

.footer-start-column>p {
  max-width: 310px;
  color: #aeb8c4;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 21px
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(112deg,var(--secondary),var(--accent2));
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 14px 36px rgba(var(--secondary-rgb),.16),inset 0 1px 0 rgba(255,255,255,.58);
  transition: transform .22s ease,box-shadow .22s ease,filter .22s ease
}

.footer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(var(--secondary-rgb),.23),inset 0 1px 0 rgba(255,255,255,.62);
  filter: saturate(1.06)
}

.footer-cta span:last-child {
  font-size: 18px;
  line-height: 1
}

.footer-contact-meta {
  display: grid;
  gap: 7px;
  margin-top: 18px
}

.footer-contact-meta a {
  width: max-content;
  color: #71818e;
  font-size: 10.5px;
  transition: color .2s ease
}

.footer-contact-meta a:hover {
  color: var(--secondary)
}

.footer-bottom {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 27px;
  color: #71818e;
  font-size: 11px
}

.footer-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,var(--accent2),var(--secondary) 38%,var(--accent4) 65%,var(--accent3));
  opacity: .7
}

.footer-credit {
  justify-self: center;
  color: #9aa7b1
}

.footer-credit strong {
  color: #e6edf1
}

.footer-heart {
  color: #ff3b5c;
  text-shadow: 0 0 12px rgba(255,59,92,.38)
}

.footer-concept {
  color: #c7d1d8;
  font-weight: 750
}

.legal-dialog {
  width: min(1120px,calc(100vw - 30px));
  height: min(840px,calc(100vh - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: #09121a;
  color: #e9eef2;
  box-shadow: 0 38px 120px rgba(0,0,0,.55);
  overflow: hidden
}

.legal-dialog::backdrop,.consent-dialog::backdrop {
  background: rgba(2,7,12,.78);
  backdrop-filter: blur(9px)
}

.legal-dialog-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%
}

.legal-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(120deg,rgba(var(--secondary-rgb),.055),rgba(255,255,255,.015))
}

.legal-dialog-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--secondary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase
}

.legal-dialog h2 {
  font-size: clamp(27px,3.4vw,42px);
  line-height: 1.05;
  color: #fff;
  letter-spacing: -.035em
}

.legal-dialog-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: .2s ease
}

.legal-dialog-close:hover {
  background: rgba(var(--secondary-rgb),.12);
  border-color: rgba(var(--secondary-rgb),.34);
  transform: rotate(5deg)
}

.legal-document-grid {
  display: grid;
  grid-template-columns: 245px minmax(0,1fr);
  min-height: 0
}

.legal-side {
  padding: 24px 18px;
  border-right: 1px solid rgba(255,255,255,.08);
  overflow: auto;
  background: rgba(255,255,255,.018)
}

.legal-side-meta {
  padding: 13px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--secondary-rgb),.17);
  border-radius: 14px;
  background: rgba(var(--secondary-rgb),.045)
}

.legal-side-meta span {
  display: block;
  color: #758791;
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 4px
}

.legal-side-meta strong {
  display: block;
  color: #dfe8ec;
  font-size: 12px;
  line-height: 1.45
}

.legal-toc {
  display: grid;
  gap: 4px
}

.legal-toc a {
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  color: #8798a2!important;
  font-size: 11px;
  line-height: 1.35;
  transition: .18s ease
}

.legal-toc a:hover {
  background: rgba(255,255,255,.05);
  color: #fff!important
}

.legal-content {
  overflow: auto;
  scroll-behavior: smooth;
  padding: 30px 38px 46px;
  min-width: 0
}

.legal-intro {
  font-size: 15px!important;
  line-height: 1.75!important;
  color: #c4d0d6!important;
  max-width: 780px;
  margin: 0 0 22px
}

.legal-demo-note {
  padding: 14px 16px;
  margin: 0 0 28px;
  border: 1px solid rgba(var(--secondary-rgb),.2);
  border-radius: 13px;
  background: rgba(var(--secondary-rgb),.055);
  color: #aebcc4;
  font-size: 11.5px;
  line-height: 1.6
}

.legal-demo-note strong {
  color: #e6edf0
}

.legal-dialog section {
  scroll-margin-top: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.075);
  margin: 0
}

.legal-dialog section:first-of-type {
  border-top: 0;
  padding-top: 5px
}

.legal-dialog h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 18px;
  letter-spacing: -.015em
}

.legal-dialog h4 {
  margin: 18px 0 7px;
  color: #e4edf1;
  font-size: 13px
}

.legal-dialog p,.legal-dialog li {
  color: #a9b8c0;
  font-size: 12.8px;
  line-height: 1.72
}

.legal-dialog ul {
  margin: 9px 0 0;
  padding-left: 20px
}

.legal-dialog li+li {
  margin-top: 5px
}

.legal-dialog a {
  color: var(--secondary)
}

.legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  overflow: hidden
}

.legal-table th,.legal-table td {
  padding: 12px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.075);
  font-size: 11.5px;
  line-height: 1.55
}

.legal-table th {
  color: #e8eff2;
  background: rgba(255,255,255,.035);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase
}

.legal-table td {
  color: #a8b7bf
}

.legal-table tr:last-child td {
  border-bottom: 0
}

.legal-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0
}

.legal-pill {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: #aebcc3;
  font-size: 10px
}

.legal-contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px
}

.legal-contact-card>div {
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025)
}

.legal-contact-card small {
  display: block;
  color: #71848e;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 4px
}

.legal-contact-card strong {
  font-size: 11.5px;
  color: #e1eaee
}

.legal-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(var(--secondary-rgb),.28);
  border-radius: 999px;
  background: rgba(var(--secondary-rgb),.08);
  color: var(--secondary)!important;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer
}

body.legal-open,body.consent-open {
  overflow: hidden
}

.footer-legal {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap
}

.footer-legal a {
  color: #86939f;
  transition: color .2s ease
}

.footer-legal a:hover {
  color: var(--secondary)
}

.footer-legal span {
  opacity: .5
}

/* Cookie consent */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 9800;
  width: min(940px,calc(100vw - 28px));
  transform: translate(-50%,calc(100% + 50px));
  opacity: 0;
  visibility: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: linear-gradient(135deg,rgba(10,19,27,.985),rgba(7,16,23,.985));
  box-shadow: 0 28px 90px rgba(0,0,0,.52);
  backdrop-filter: blur(18px);
  transition: transform .35s cubic-bezier(.2,.75,.2,1),opacity .3s ease,visibility .3s ease
}

.cookie-banner.show {
  transform: translate(-50%,0);
  opacity: 1;
  visibility: visible
}

.cookie-banner-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 22px
}

.cookie-copy {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 14px;
  align-items: start
}

.cookie-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,var(--secondary),var(--accent2));
  color: var(--primary);
  box-shadow: 0 8px 28px rgba(var(--secondary-rgb),.16),inset 0 1px 0 rgba(255,255,255,.45)
}

.cookie-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cookie-icon svg circle {
  fill: rgba(255,255,255,.94);
  stroke: currentColor;
  stroke-width: 1.5
}

.cookie-copy h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 16px
}

.cookie-copy p {
  margin: 0;
  color: #9cabb4;
  font-size: 11.5px;
  line-height: 1.6;
  max-width: 610px
}

.cookie-copy a {
  color: var(--secondary)
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.cookie-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
  color: #dbe4e8;
  font-weight: 800;
  font-size: 10.5px;
  cursor: pointer;
  transition: .2s ease
}

.cookie-btn:hover {
  border-color: rgba(var(--secondary-rgb),.35);
  background: rgba(var(--secondary-rgb),.07)
}

.cookie-btn.primary {
  border-color: transparent;
  background: linear-gradient(110deg,var(--secondary),var(--accent2));
  color: var(--primary);
  box-shadow: 0 8px 24px rgba(var(--secondary-rgb),.15)
}

.cookie-btn.primary:hover {
  transform: translateY(-1px)
}

.consent-dialog {
  width: min(610px,calc(100vw - 30px));
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #09121a;
  color: #e9eef2;
  box-shadow: 0 34px 100px rgba(0,0,0,.5);
  overflow: hidden
}

.consent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 26px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08)
}

.consent-head h2 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 25px
}

.consent-head p {
  margin: 0;
  color: #91a2ab;
  font-size: 11px;
  line-height: 1.55
}

.consent-body {
  padding: 10px 26px 24px
}

.consent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.075)
}

.consent-row:last-of-type {
  border-bottom: 0
}

.consent-row h3 {
  margin: 0 0 4px;
  color: #eef3f5;
  font-size: 13px
}

.consent-row p {
  margin: 0;
  color: #8798a2;
  font-size: 10.7px;
  line-height: 1.5
}

.consent-state {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--secondary)
}

/* Premium consent toggles */
.consent-switch {
  position: relative;
  width: 54px;
  height: 30px;
  display: inline-block;
  flex: 0 0 auto;
}

.consent-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.consent-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg,#18242d,#111a21);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.18);
  cursor: pointer;
  transition: background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .18s ease;
}
