/* Dental C concept · KERA Tech Solutions
   Rebuilt in the style of Aventura Dental Arts: rem scales with the viewport (16/1440 desktop, 16/375 mobile). */

:root {
  --ink: #12151C;
  --ink-2: #1B1F28;
  --light: #E9EAEB;
  --white: #FFFFFF;
  --dark: #404349;
  --beige: #D5D7DA;
  --accent: #8DB8D2;
  --light-40: rgba(233, 234, 235, .4);
  --light-15: rgba(233, 234, 235, .15);
  --dark-40: rgba(64, 67, 73, .4);
  --dark-10: rgba(64, 67, 73, .1);
  --ink-grad: linear-gradient(180deg, #2A2E38, #020306);
  --ease: ease-in-out;
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-menu: cubic-bezier(.6, .14, 0, 1);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--ink);
  color: var(--dark);
  font-family: var(--serif);
  font-size: calc(16 / 1440 * 100vw);
}
@media (max-width: 1023px) { html { font-size: min(calc(16 / 375 * 100vw), 22px); } }
body { margin: 0; background: var(--ink); overflow-x: clip; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
i { font-style: italic; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 40; background: var(--light); color: var(--ink); padding: .75rem 1rem; border-radius: 4rem; transition: top .3s var(--ease); }
.skip-link:focus { top: 1rem; }

/* ---------- Type scale (reference values) ---------- */
.h1 { font-family: var(--serif); font-size: 17.25rem; font-weight: 400; letter-spacing: -.69rem; line-height: 84%; }
.h2 { font-family: var(--serif); font-size: 9.5625rem; font-weight: 400; letter-spacing: -.2869rem; line-height: 80%; }
.h3 { font-family: var(--serif); font-size: 5.1875rem; font-weight: 400; letter-spacing: -.1037rem; line-height: 93%; }
.h4 { font-family: var(--serif); font-size: 3.4375rem; font-weight: 400; letter-spacing: -.1031rem; line-height: 87%; }
.h5, .h5_italic { font-family: var(--serif); font-size: 2.1875rem; font-weight: 400; letter-spacing: -.0656rem; line-height: 85%; }
.h5_italic { font-style: italic; }
.p1 { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; letter-spacing: -.025rem; line-height: 109%; }
.p2 { font-family: var(--sans); font-size: .9375rem; font-weight: 700; line-height: 113%; }
.p3 { font-family: var(--sans); font-size: .9375rem; font-weight: 400; letter-spacing: .0094rem; line-height: 105%; }
.c0 { font-family: var(--sans); font-size: .9375rem; font-weight: 700; line-height: 113%; }
.c1 { font-family: var(--sans); font-size: .875rem; font-weight: 700; letter-spacing: -.0175rem; line-height: 113%; }
.c2 { font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: -.0088rem; line-height: 113%; }
.c3 { font-family: var(--sans); font-size: .75rem; font-weight: 500; line-height: 119%; }
@media (max-width: 1023px) {
  .h1 { font-size: 6.75rem; letter-spacing: -.27rem; line-height: 80%; }
  .h2 { font-size: 4.3125rem; letter-spacing: -.1725rem; line-height: 84%; }
  .h3 { font-size: 2.9375rem; letter-spacing: -.0881rem; line-height: 92%; }
  .h4 { font-size: 2.375rem; letter-spacing: -.0712rem; line-height: 90%; }
  .h5, .h5_italic { font-size: 1.5rem; letter-spacing: -.03rem; line-height: 93%; }
  .p1 { font-size: .9375rem; font-weight: 500; letter-spacing: -.0019rem; }
  .p3 { line-height: 111%; }
  .c1 { font-size: 1rem; letter-spacing: -.03rem; line-height: 103%; }
  .c2 { font-size: .75rem; letter-spacing: normal; line-height: 104%; }
  .c3 { line-height: 104%; }
}

/* ---------- Buttons & links ---------- */
.wrap-btn {
  --btn-bg: var(--light); --btn-color: var(--ink);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 1.5rem; border-radius: 4rem; background-color: var(--btn-bg); color: var(--btn-color);
  transition: background-color .3s var(--ease), color .3s var(--ease);
  width: max-content;
}
.wrap-btn.dark { --btn-bg: var(--ink); --btn-color: var(--light); }
.wrap-btn .text { display: block; overflow: hidden; position: relative; width: max-content; }
.wrap-btn .text span { display: inline-block; transition: transform .3s var(--ease); width: max-content; }
.wrap-btn .text span:nth-child(2) { left: 0; position: absolute; top: 105%; }
.wrap-btn .icon-wrap { width: 1rem; height: 1rem; position: relative; flex: none; }
.wrap-btn .icon-wrap svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.3; transition: transform .5s var(--ease-out-quint); }
@media (hover: hover) {
  .wrap-btn:hover .text span { transform: translateY(-105%); }
  .wrap-btn:hover .icon-wrap svg { transform: rotate(90deg); }
}

.wrap-link { position: relative; overflow: hidden; display: inline-block; width: max-content; color: var(--link-color, currentColor); }
.wrap-link span { display: block; transition: transform .8s var(--ease-out-quint); width: max-content; will-change: transform; }
.wrap-link span:nth-child(2) { position: absolute; left: 0; top: 100%; }
.wrap-link.underline { padding-bottom: .125rem; }
.wrap-link.underline::after, .wrap-link.underline::before { content: ""; position: absolute; bottom: 0; height: .0625rem; background-color: currentColor; }
.wrap-link.underline::after { left: 0; width: 110%; transition: transform .7s var(--ease-out-quint) .35s; }
.wrap-link.underline::before { right: 100%; width: 100%; transition: transform .7s var(--ease-out-quint); }
@media (hover: hover) {
  .wrap-link:hover span:first-child { transform: translateY(-110%); }
  .wrap-link:hover span:last-child { transform: translateY(-100%); }
  .wrap-link.underline:hover::after { transform: translateX(110%); transition-delay: 0s; }
  .wrap-link.underline:hover::before { transform: translateX(100%); transition-delay: .35s; }
}

/* ---------- Preloader ---------- */
.preloader { display: none; }
.js.motion .preloader { display: block; position: fixed; inset: 0; height: 100dvh; background: var(--ink); z-index: 30; color: var(--light); }
.loader-wrap { position: absolute; left: 50%; top: 50%; width: 12.5rem; height: 12.5rem; transform: translate(-50%, -50%); display: grid; place-items: center; }
.loader-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-arc .arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader-word { font-family: var(--serif); font-size: 3.25rem; letter-spacing: -.08rem; line-height: 1; opacity: 0; margin-top: -2.5rem; }
.preloader .texts { position: absolute; left: 2rem; bottom: 2rem; width: calc(100% - 4rem); display: grid; grid-template-columns: repeat(3, 1fr); }
.preloader .texts p { opacity: 0; }
.preloader .texts p:nth-child(2) { text-align: center; }
.preloader .texts p:nth-child(3) { text-align: right; }
@media (max-width: 1023px) {
  .loader-wrap { width: 10rem; height: 10rem; }
  .preloader .texts { display: flex; flex-direction: column; align-items: center; gap: .25rem; left: 50%; transform: translateX(-50%); width: max-content; }
  .preloader .texts p { text-align: center !important; }
}

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 2rem; pointer-events: none;
  transition: transform .45s var(--ease-out-quint), background-color .3s var(--ease);
  --l-color: var(--ink); --r-color: var(--white);
}
.header.hide { transform: translateY(-105%); }
.header[data-l="dark"] { --l-color: var(--dark); }
.header[data-l="light"] { --l-color: var(--light); }
.header[data-r="dark"] { --r-color: var(--dark); }
.header[data-r="light"] { --r-color: var(--white); }
.left-part { display: flex; align-items: center; gap: 7.75rem; color: var(--l-color); pointer-events: all; transition: color .3s var(--ease); }
.logo { display: flex; align-items: center; gap: .75rem; }
.logo-word { font-family: var(--serif); font-size: 2.375rem; letter-spacing: -.07rem; line-height: 1; white-space: nowrap; }
.logo-sub { opacity: .6; width: 4.5rem; line-height: 1.1; }
.header-controls { display: flex; gap: 2rem; position: relative; }
.header-btn { display: flex; align-items: center; gap: .375rem; }
.icon-menu { width: .75rem; height: .75rem; overflow: hidden; }
.icon-menu path { stroke: currentColor; stroke-width: 1.2; transition: transform .9s cubic-bezier(.24, .43, .15, .97); }
.icon-menu .n2 { transition-delay: .15s; } .icon-menu .n3 { transition-delay: .3s; }
.icon-menu .line { transform: translateX(-170%); }
@media (hover: hover) {
  .menu-toggle:hover .icon-menu path:not(.line) { transform: translateX(170%); }
  .menu-toggle:hover .icon-menu .line { transform: translateX(0); }
}
.chevron { width: .75rem; height: .75rem; }
.chevron path { stroke: currentColor; stroke-width: 1.2; }
.services-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.right-part { display: flex; align-items: center; gap: 1.75rem; color: var(--r-color); pointer-events: all; transition: color .3s var(--ease); }
.patient-text { display: flex; align-items: center; gap: .125rem; }
.wrap-corner-arrow { width: 1rem; height: 1rem; overflow: hidden; position: relative; }
.wrap-corner-arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.2; transition: transform .3s var(--ease); }
.wrap-corner-arrow svg:last-child { transform: translate(-100%, 100%); }
@media (hover: hover) {
  .patient-text:hover .wrap-corner-arrow svg:first-child { transform: translate(100%, -100%); }
  .patient-text:hover .wrap-corner-arrow svg:last-child { transform: translate(0, 0); }
}
.phone { display: flex; flex-direction: column; gap: .2rem; }
.phone-sub { opacity: .6; }
.lang { display: flex; align-items: center; gap: .3rem; }
.lang button { opacity: .5; transition: opacity .3s var(--ease); padding: .25rem 0; }
.lang button[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) { .lang button:hover { opacity: 1; } }
.book-btn { width: auto; min-width: 12rem; gap: 2rem; padding: 1rem 1.5rem; }
.header[data-r="dark"] .book-btn { --btn-bg: var(--ink); --btn-color: var(--light); }
.flex-mob { display: none; }
@media (max-width: 1023px) {
  .header { padding: .75rem 1rem; }
  .header-controls, .right-part, .logo-sub { display: none; }
  .logo-word { font-size: 1.85rem; }
  .flex-mob { display: flex; align-items: center; gap: .5rem; pointer-events: all; color: var(--r-color); }
  .header.is-split .flex-mob { color: var(--ink); }
  .mob-call, .menu-btn-mob { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; }
  .mob-call { background: var(--beige); color: var(--ink); }
  .mob-call svg { width: 1.1rem; height: 1.1rem; }
  .menu-btn-mob { background: var(--ink); color: var(--light); }
  .menu-btn-mob svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.4; }
  .lang-mob { margin-right: .5rem; }
}

/* ---------- Treatments dropdown & menu ---------- */
.menu-overlay { position: fixed; inset: 0; background: rgba(18, 21, 28, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 18; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.menu-overlay.is-on { opacity: 1; visibility: visible; }
.services-menu { position: fixed; left: 2rem; right: 2rem; top: 4.5rem; z-index: 19; background: var(--light); color: var(--ink); border-radius: 1.25rem; padding: 1rem; }
.services-menu[hidden] { display: none; }
.services-menu-inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.sm-item { display: flex; flex-direction: column; gap: .75rem; }
.sm-img { display: block; aspect-ratio: .86; overflow: hidden; border-radius: .5rem; background: var(--ink); }
.sm-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .8s var(--ease-out-quint), filter .5s var(--ease); }
@media (hover: hover) { .sm-item:hover .sm-img img { transform: scale(1.06); filter: grayscale(0); } }
.sm-name { padding: 0 .25rem .25rem; }

.menu { position: fixed; inset: 0 0 auto 0; z-index: 25; color: var(--light); }
.menu[hidden] { display: none; }
.menu-panel { background: var(--ink); min-height: 100dvh; padding: 1rem 2rem 3rem; display: flex; flex-direction: column; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4rem; }
.btn-close-menu { display: flex; align-items: center; gap: .5rem; }
.btn-close-menu svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.3; }
.menu-grid { display: grid; grid-template-columns: 42.5rem 1fr 1fr; gap: 2rem; flex: 1; align-content: start; }
.menu-label { color: var(--light-40); margin-bottom: 2rem; display: block; }
.menu-services { display: grid; gap: .5rem; }
.menu-services a, .menu-links a { display: inline-block; transition: opacity .3s var(--ease), transform .5s var(--ease-out-quint); }
@media (hover: hover) {
  .menu-services:hover a, .menu-links:hover a { opacity: .4; }
  .menu-services a:hover, .menu-links a:hover { opacity: 1; transform: translateX(.5rem); }
}
.menu-links { display: grid; gap: .75rem; }
.menu-contacts { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.menu-hours { color: var(--light-40); max-width: 18rem; }
.menu-contacts .wrap-btn { margin-top: 1.5rem; --btn-bg: var(--light); --btn-color: var(--ink); }
.menu .menu-anim { will-change: transform; }
@media (max-width: 1023px) {
  .services-menu { left: 1rem; right: 1rem; top: 4rem; }
  .services-menu-inner { grid-template-columns: repeat(2, 1fr); }
  .menu-panel { padding: .75rem 1rem 2rem; }
  .menu-top { padding-bottom: 2.5rem; }
  .menu-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .menu-label { margin-bottom: 1rem; }
}

/* ---------- Main stacking ---------- */
main { position: relative; display: block; }
section { position: relative; }

/* ---------- HERO ---------- */
.hero { background-color: var(--light); position: sticky; top: var(--hero-sticky-top, 0); z-index: 1; }
.hero .sticky { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: 100vh; overflow: hidden; position: sticky; top: 0; width: 100%; }
.hero .left { position: relative; height: 100%; width: 100%; color: var(--dark); }
.blur-overlay { position: absolute; inset: 0; background: rgba(18, 21, 28, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; z-index: 1; }
.based-in { position: absolute; left: 2rem; bottom: 2rem; color: var(--dark); z-index: 1; display: flex; flex-direction: column; gap: .25rem; width: max-content; }
.based-in-title { margin-bottom: .75rem; opacity: .5; }
.based-in a.location-item { transition: opacity .3s var(--ease); }
@media (hover: hover) { .based-in a.location-item:hover { opacity: .6; } }
.wrap-titles { position: absolute; left: 0; top: calc(50vh - 4rem); width: 100%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); margin: 0; font-weight: 400; pointer-events: none; }
.wrap-titles > * { display: block; }
.wrap-titles.black { color: var(--dark); clip-path: inset(0 50% 0 0); }
.wrap-titles.static { color: var(--white); clip-path: inset(0 0 -1.5rem 50%); }
.with-gap { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 3.875rem; width: 100%; margin-top: .625rem; padding-left: 3.5rem; }
.with-gap > span:first-child { justify-self: end; }
.with-gap > span:last-child { justify-self: start; }
.with-gap i { padding-right: .2em; }
.video-description { position: absolute; right: 2rem; bottom: 2rem; color: var(--light); text-align: right; width: 14rem; z-index: 2; }
.hero .description { position: absolute; left: calc(50vw + 2rem); bottom: 2rem; width: 18rem; color: var(--light); z-index: 2; }
.hero .right { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; isolation: isolate; z-index: 1; transform: translate3d(50%, 0, 0); }
.hero .media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero .media img { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% + 20vw); max-width: none; object-fit: cover; object-position: 50% 62%; transform: translateX(-20vw); }
.hero .media::after { content: ""; position: absolute; inset: 0; background-color: rgba(18, 21, 28, .25); }
.hero .right-title {
  position: absolute; right: 2rem; top: 50%; width: max-content; padding: 1.5rem 0; color: transparent; white-space: nowrap;
  background: linear-gradient(90deg, #EEEAE8 var(--start-gradient, 0%), rgba(238, 234, 232, 0) var(--stop-gradient, 50%));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transform: translate(50vw, -50%); opacity: 0;
}
:lang(sq) .hero .right-title { font-size: 8rem; }
.bottom-tips { position: absolute; right: 2rem; top: calc(50% + 8rem); width: calc(100vw - 4rem); display: flex; align-items: center; justify-content: space-between; color: var(--light); transform: translateY(-50%); }
.bottom-tips p { width: max-content; }
.motion .bottom-tips p { opacity: 0; }
.motion .hero .anim-line1, .motion .hero .anim-line2 { opacity: 0; }
.hero .sticky-plash { height: 180vh; }
@media (max-width: 1023px) {
  .hero { position: relative; top: 0; }
  .hero .sticky { display: block; height: auto; overflow: visible; position: relative; }
  .hero .left, .wrap-titles.static, .video-description { display: none; }
  .wrap-titles.black { position: relative; top: auto; transform: none; clip-path: none; padding: 9rem 1rem 0; font-size: 3.85rem; }
  .with-gap { display: flex !important; justify-content: center; gap: .6rem; padding-left: 0; margin-top: .3rem; }
  .hero .description { position: relative; left: auto; bottom: auto; width: 16rem; margin: 3.5rem auto 4.5rem; text-align: center; color: var(--dark); }
  .hero .right { position: relative; transform: none; height: 100svh; min-height: 34rem; }
  .hero .media img { width: 100%; transform: none; object-position: 50% 60%; }
  .hero .media::after { background-color: rgba(0, 0, 0, .35); }
  .hero .right-title { top: 50%; right: auto; left: 0; transform: translate(100vw, -50%); opacity: 1; background: none; -webkit-text-fill-color: var(--light); color: var(--light); }
  .bottom-tips { top: auto; bottom: 2rem; left: 50%; right: auto; width: max-content; flex-direction: column; gap: .25rem; transform: translateX(-50%); }
  .motion .bottom-tips p { opacity: 1; }
  .hero .sticky-plash { display: none; }
}

/* ---------- OUR GOAL ---------- */
.our-goal { z-index: 2; background-color: var(--light); display: flex; justify-content: space-between; align-items: flex-start; padding: 12rem 2rem 8rem; position: sticky; top: var(--our-goal-top, 0); width: 100%; }
.our-goal .left { padding-top: 17.375rem; }
.our-goal .left { max-width: 20rem; }
.our-goal .left h2 { color: var(--dark); }
.goal-img { position: absolute; left: 22.75rem; top: 12rem; width: 16.125rem; height: 23.875rem; overflow: hidden; background: var(--ink); }
.goal-img img, .morph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.our-goal .right { width: 43rem; position: relative; }
.about-team { display: flex; justify-content: space-between; align-items: flex-start; height: 7.375rem; }
.about-team .description { width: 15.875rem; color: var(--dark); }
.wrap-avatars { display: flex; }
.avatar, .avatar-empty { width: 5.875rem; height: 5.875rem; border-radius: 50%; border: 3px solid var(--light); overflow: hidden; background: #D8DADC; display: flex; align-items: center; justify-content: center; position: relative; transform: translateX(calc(var(--i, 0) * 2rem)); }
.avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.avatar-empty { gap: .25rem; color: var(--dark); transform: none; }
.icon-star { width: .9rem; height: .9rem; color: var(--dark); }
.motion .avatar, .motion .avatar-empty { opacity: 0; }
.our-goal .right-title { color: rgba(32, 35, 43, .15); margin: 10rem 0 4rem; text-wrap: balance; }
.overlay-goal { position: absolute; left: 0; bottom: 0; width: 100%; height: 150vh; background: rgba(18, 21, 28, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1023px) {
  .our-goal { position: relative; top: 0; flex-direction: column; padding: 6rem 1rem 5rem; gap: 0; }
  .our-goal .left { padding-top: 0; order: 2; margin-top: 3rem; }
  .our-goal .right { width: 100%; display: contents; }
  .about-team { order: 1; height: auto; flex-direction: column; gap: 2rem; width: 100%; }
  .about-team .description { width: 100%; }
  .our-goal .right-title { order: 3; margin: .5rem 0 2.5rem; }
  .btn-about { order: 4; }
  .goal-img, .overlay-goal { display: none; }
  .avatar, .avatar-empty { width: 4.5rem; height: 4.5rem; transform: translateX(calc(var(--i, 0) * 1.5rem)); }
  .avatar-empty { transform: none; }
}

/* ---------- TREATMENTS (sticky slider) ---------- */
.services { z-index: 3; background: var(--ink); }
.morph { position: fixed; left: 0; top: 0; width: 50vw; height: 100vh; z-index: 6; overflow: hidden; pointer-events: none; visibility: hidden; }
.morph img { transform-origin: 0 0; }
.morph::after { opacity: var(--p, 1); }
.morph::after, .services .left::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 59%; background: linear-gradient(180deg, rgba(17, 18, 22, 0), #111216); z-index: 1; pointer-events: none; }
.services .sticky { position: sticky; top: 0; height: 100vh; width: 100%; display: flex; background: var(--ink); isolation: isolate; overflow: hidden; color: var(--light); }
.bg-anim { position: absolute; left: 50%; top: 50%; width: 86.25rem; height: 78.25rem; transform: translate(-30%, -50%); background: radial-gradient(44% 50% at 48% 50%, #000 0%, #101115 47%, #4A505C 100%); opacity: .55; mix-blend-mode: luminosity; filter: blur(2rem); z-index: -1; border-radius: 50%; animation: bgSpin 40s linear infinite; }
@keyframes bgSpin { to { transform: translate(-30%, -50%) rotate(360deg); } }
.services .left, .services .right { position: relative; width: 50%; height: 100%; }
.services .left { overflow: hidden; }
.motion .services .left { opacity: 0; }
.slide-wrap { position: absolute; inset: 0; overflow: hidden; }
.slide-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); max-width: none; }
.motion .slide-wrap:not([data-idx="0"]) { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.solutions { position: absolute; right: 2rem; top: 1.75rem; width: 24.25rem; color: var(--light); }
.description-slide { position: absolute; right: 2rem; top: 7rem; width: 24.25rem; color: var(--light); }
.slider-place { position: absolute; right: 2rem; top: 15rem; width: 24.25rem; height: 15.25rem; display: flex; justify-content: space-between; align-items: flex-start; }
.wrap-slides { position: relative; width: 10.25rem; height: 100%; overflow: hidden; }
.wrap-slides .slide { position: absolute; inset: 0; overflow: hidden; }
.wrap-slides .slide img { width: 100%; height: 100%; object-fit: cover; }
.wrap-procedures { position: relative; width: 11.875rem; height: 100%; }
.procedures-slide { position: absolute; left: 0; top: 0; width: 100%; border-top: 1px solid var(--light-15); }
.procedure { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--light-15); width: 100%; }
.procedure-name { color: var(--light); width: 9.375rem; }
.arrow { width: 1rem; height: 1rem; overflow: hidden; position: relative; flex: none; }
.arrow i { position: absolute; inset: 0; transition: transform .3s var(--ease); background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 13 13 3M5 3h8v8' stroke='%23E9EAEB' stroke-width='1.3'/%3E%3C/svg%3E"); }
.arrow .arrow-hover { transform: translate(-100%, 100%); }
@media (hover: hover) {
  .procedure:hover .arrow-main { transform: translate(100%, -100%); }
  .procedure:hover .arrow-hover { transform: translate(0, 0); }
}
.title-slides-wrap { position: absolute; left: 50%; bottom: 2rem; width: 40rem; transform: translateX(-50%); z-index: 1; height: 16rem; pointer-events: none; }
.title-slide { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; color: var(--light); }
:lang(sq) .title-slide { font-size: 8rem; }
.slides-nav { position: absolute; left: 2rem; bottom: 2rem; display: grid; gap: .125rem; z-index: 2; justify-items: start; }
.block-name { color: var(--light); margin-bottom: 2rem; }
.slide-btn { color: var(--light-40); transition: color .3s var(--ease); text-align: left; }
.slide-btn.active { color: var(--light); }
@media (hover: hover) { .slide-btn:hover { color: var(--light); } }
.learn-more { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; }
.motion .procedures-slide, .motion .description-slide, .motion .title-slide, .motion .wrap-slides .slide { opacity: 0; visibility: hidden; }
.motion [data-idx="0"].procedures-slide, .motion [data-idx="0"].description-slide, .motion [data-idx="0"].title-slide, .motion .wrap-slides [data-idx="0"].slide { opacity: 1; visibility: visible; }
html:not(.motion) .procedures-slide:not([data-idx="0"]), html:not(.motion) .description-slide:not([data-idx="0"]), html:not(.motion) .title-slide:not([data-idx="0"]), html:not(.motion) .wrap-slides .slide:not([data-idx="0"]) { display: none; }
.slides-plash .slide-part { height: 70vh; }
.pause-slides { height: 40vh; }
.wrap-mobile-content { display: none; }
@media (max-width: 1023px) {
  .services .sticky, .slides-plash, .morph { display: none; }
  .wrap-mobile-content { display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem 3.5rem; color: var(--light); }
  .mob-h { margin-bottom: 3.5rem; text-align: center; font-size: 5rem; }
  .mob-services { display: grid; grid-template-columns: 1fr; gap: 4.5rem; width: 100%; }
  .service-card { display: flex; flex-direction: column; align-items: center; }
  .service-image-wrap { position: relative; width: 100%; aspect-ratio: .86; }
  .service-image-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
  .service-image-wrap::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 10.5rem; background: linear-gradient(180deg, rgba(18, 21, 28, 0), var(--ink)); }
  .mob-service-name { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 35%); width: max-content; max-width: 100%; text-align: center; color: var(--light); z-index: 2; font-weight: 400; }
  .service-desc { color: var(--light-40); margin-top: 3.375rem; text-align: center; width: 20.25rem; max-width: 100%; }
  .service-procs { color: var(--light); text-align: center; margin-top: 1.25rem; width: 20.25rem; max-width: 100%; line-height: 1.5; }
  .service-card .wrap-btn { margin-top: 2rem; }
}

/* ---------- BANNER ---------- */
.banner { z-index: 3; height: 75.125rem; overflow: hidden; background: var(--ink); }
.banner .content { position: relative; height: 100%; width: 100%; overflow: hidden; isolation: isolate; }
.banner .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateY(-20vh); }
.banner .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.banner .bg::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 29.5rem; background: linear-gradient(180deg, rgba(17, 18, 22, 0), #111216); z-index: 1; }
.bottom-grid { position: absolute; left: 2rem; bottom: 2rem; width: calc(100% - 4rem); display: grid; grid-template-columns: repeat(3, 1fr); color: var(--light); z-index: 2; row-gap: .25rem; }
.bottom-grid p { text-align: center; }
.bottom-grid p:first-child { grid-area: 1 / 1 / 2 / 4; opacity: .5; }
.bottom-grid p:nth-child(2) { text-align: left; }
.bottom-grid p:nth-child(4) { text-align: right; }
@media (max-width: 1023px) {
  .banner { height: 34rem; }
  .banner .bg { transform: none; }
  .bottom-grid { left: 1rem; width: calc(100% - 2rem); bottom: 1.5rem; }
}

/* ---------- RESULTS (technology list) ---------- */
.technology { z-index: 4; background-color: var(--light); color: var(--dark); padding: 13.5rem 2rem 0; width: 100%; }
.sticky-title { position: absolute; left: 50%; top: 0; width: 100%; text-align: center; color: var(--light); transform: translate(-50%, calc(-100% - 6rem)); z-index: 3; pointer-events: none; }
.sticky-title p { padding-bottom: 1.5rem; }
.sticky-title .dark { position: absolute; left: 0; top: 0; width: 100%; color: var(--dark); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
html:not(.motion) .sticky-title { transform: translate(-50%, 3.5rem); color: var(--dark); }
.technology .title { display: block; width: 100%; font-weight: 400; color: var(--dark); }
.technology .title-line { display: flex; align-items: center; justify-content: space-between; }
.technology .title-line:nth-child(2) { justify-content: center; }
.technology .sticky { position: sticky; top: 0; height: 100vh; width: 100%; }
.counter { position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); display: flex; align-items: flex-end; gap: 1rem; }
.counter p:last-child { margin-bottom: .125rem; }
.images-slider { position: absolute; right: 44.875rem; top: 50%; transform: translateY(-50%); width: 24.75rem; height: 29.5rem; overflow: hidden; background: #0B0C10; }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .4s var(--ease) .3s, transform .4s var(--ease) .3s; }
.slide-img.active { opacity: 1; transform: scale(1); transition-delay: 0s; }
.small-title { position: absolute; right: 2rem; top: 35%; width: 36.5rem; color: var(--dark-40); transform: translateY(calc(-100% - 1rem)); }
.slide-list { position: absolute; right: 2rem; top: 35%; width: 36.5rem; height: 65%; overflow: hidden; border-top: 1px solid var(--dark-10); }
.list-scroller { display: flex; flex-direction: column; width: 100%; }
.list-item { position: relative; width: 100%; padding: 3rem 0; border-bottom: 1px solid var(--dark-10); }
.list-item .opacity { opacity: .3; transition: opacity .3s var(--ease); }
.list-item.active .opacity { opacity: 1; }
.list-item .h4 { display: block; padding-right: 8rem; }
.list-item-link { position: absolute; right: 0; top: 3rem; --link-color: var(--dark); }
.technology .sticky-plash .technology-plash { height: 35vh; }
.technology .mob-content { display: none; }
@media (max-width: 1023px) {
  .technology { padding: 5rem 0 4.5rem; }
  .sticky-title, .technology .title, .technology .sticky, .technology .sticky-plash { display: none; }
  .technology .mob-content { display: block; }
  .mobile-title { text-align: center; line-height: 98%; padding: 0 1rem; color: var(--dark); }
  .mob-strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3rem 2.5rem 0; scrollbar-width: none; }
  .mob-strip::-webkit-scrollbar { display: none; }
  .mob-slide { flex: 0 0 14.25rem; scroll-snap-align: center; }
  .mob-slide img { width: 100%; height: 17.125rem; object-fit: cover; background: #0B0C10; }
  .mob-slide figcaption { margin-top: 1.25rem; text-align: center; color: var(--dark); }
}

/* ---------- TEAM ---------- */
.experts { z-index: 4; background-color: var(--ink); display: flex; flex-direction: column; height: 95rem; overflow: hidden; padding-top: 49.375rem; width: 100%; }
.experts-bg-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 67.75rem; overflow: hidden; z-index: 0; }
.experts-bg { position: absolute; left: 50%; top: 50%; width: 104.5rem; height: 101.8rem; transform: translate(-17.875rem, -23rem) rotate(-123deg); background: conic-gradient(from 0deg, rgba(141, 184, 210, .0), rgba(233, 234, 235, .10), rgba(141, 184, 210, .0) 40%, rgba(233, 234, 235, .06) 70%, rgba(141, 184, 210, 0)); border-radius: 50%; filter: blur(3rem); animation: spin 50s linear infinite; }
@keyframes spin { to { transform: translate(-17.875rem, -23rem) rotate(237deg); } }
.experts-img { position: absolute; left: 0; top: 2rem; width: 104.75rem; height: 62rem; max-width: none; object-fit: cover; object-position: 50% 50%; transform: translate(-5.375rem, -10vh); z-index: 1; filter: saturate(.78) contrast(1.03); }
.experts-overlay { position: absolute; left: 0; top: 24rem; width: 100%; height: 44rem; z-index: 2; transform: translateY(-10vh); background: linear-gradient(180deg, rgba(18, 21, 28, 0), rgba(18, 21, 28, .05) 8%, rgba(18, 21, 28, .16) 16%, rgba(18, 21, 28, .32) 25%, rgba(18, 21, 28, .5) 33%, rgba(18, 21, 28, .68) 41%, rgba(18, 21, 28, .82) 49%, rgba(18, 21, 28, .93) 57%, var(--ink) 66%, var(--ink)); }
.experts .title { position: absolute; left: 50%; top: 4rem; transform: translateX(-50%); width: max-content; color: var(--light); mix-blend-mode: color-dodge; z-index: 3; font-weight: 400; }
.about-teammates { display: grid; grid-template-columns: 42.5rem 31.125rem 1fr; padding: 0 2rem; position: relative; z-index: 3; }
.teammate { display: grid; gap: 1.5rem; color: var(--light); align-content: start; }
.teammate:first-child { width: 15rem; }
.teammate:nth-child(2) { width: 13rem; }
.teammate:nth-child(3) { width: 14rem; }
.job-title { color: var(--light-40); margin-top: .25rem; }
.teammate-desc { color: var(--light); opacity: .85; }
.meet-teammates-wrap { display: grid; grid-template-columns: 42.5rem 1fr; margin: auto 0 4rem; padding: 0 2rem; position: relative; z-index: 3; color: var(--light); }
.small-description { color: var(--light-40); width: 14.75rem; }
.small-description b { color: var(--light); font-weight: 600; }
.main-description { width: 36rem; }
.print-texts { display: inline-block; position: relative; width: max-content; }
.fake-text { display: inline-block; opacity: 0; visibility: hidden; pointer-events: none; }
.inner-text { position: absolute; left: 0; top: 0; height: 100%; width: max-content; display: flex; align-items: center; white-space: pre; }
.inner-text::before { content: ""; position: absolute; left: calc(100% + .375rem); top: .25rem; width: .125rem; height: 100%; background-color: var(--light); animation: caret 1s step-start infinite; }
@keyframes caret { 50% { opacity: 0; } }
.btn-meet-team { margin-top: 4rem; }
html:not(.motion) .fake-text { visibility: visible; opacity: 1; }
html:not(.motion) .inner-text { display: none; }
@media (max-width: 1023px) {
  .experts { height: auto; padding: 23rem 1rem 4rem; }
  .experts-bg-wrap { display: none; }
  .experts-img { left: 50%; top: 4rem; width: 140vw; height: 26rem; transform: translateX(-50%); }
  .experts-overlay { top: 10rem; height: 20rem; transform: none; }
  .experts .title { top: 4rem; text-align: center; width: 20rem; font-size: 5.5rem; letter-spacing: -.2rem; }
  .about-teammates { grid-template-columns: 1fr; gap: 2rem; padding: 0; }
  .teammate, .teammate:first-child, .teammate:nth-child(2), .teammate:nth-child(3) { width: 100%; gap: .75rem; }
  .meet-teammates-wrap { grid-template-columns: 1fr; gap: 2rem; margin: 3.5rem 0 0; padding: 0; }
  .main-description { width: 100%; }
  .btn-meet-team { margin-top: 2rem; }
}

/* ---------- WHY CHOOSE US ---------- */
.wrap-anim-bg { position: relative; z-index: 4; background: var(--ink); }
.why-choose { color: var(--light); overflow: clip; }
.why-choose .sticky { position: sticky; top: 0; height: 100vh; width: 100%; }
.why-choose .sticky-plash { height: 200vh; }
.left-circle, .right-circle { position: absolute; left: 50%; top: 50%; width: 50.1875rem; height: 50.1875rem; margin: -25.09rem 0 0 -25.09rem; }
.left-circle { transform: translate(-31.75rem, 1.5rem); }
.right-circle { transform: translate(31.75rem, 1.5rem); }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring circle { stroke-width: 1; vector-effect: non-scaling-stroke; }
.why-choose .wrap-title { position: absolute; left: 2rem; top: 50%; width: calc(100% - 4rem); transform: translateY(-40%); display: flex; flex-direction: column; align-items: center; font-weight: 400; z-index: 2; }
.why-choose .first-line { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.why-choose .first-line > span:first-child, .why-choose .first-line > span:last-child { width: 44%; white-space: nowrap; }
:lang(sq) .why-choose .wrap-title { font-size: 7.5rem; }
.why-choose .first-line > span:last-child { text-align: right; }
.why-choose .small-tip { text-align: center; width: 8rem; line-height: 1.1; }
.why-choose .second-line { margin-top: .5rem; margin-right: 10rem; }
.balls { position: absolute; inset: 0; pointer-events: none; transform: rotate(-90deg); }
.ball { position: absolute; border-radius: 50%; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .2rem; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
.ball .c3 { text-transform: uppercase; max-width: 70%; font-size: .5rem; line-height: 1.15; letter-spacing: .02em; }
.ball .h3 { font-size: 2.6rem; }
.ball.b0 { left: 50%; top: 88%; width: 11.2rem; height: 11.2rem; --r: -6deg; }
.ball.b1 { left: 21%; top: 69%; width: 8.1rem; height: 8.1rem; --r: -80deg; }
.ball.b2 { left: 72%; top: 80.5%; width: 11rem; height: 11rem; --r: -14deg; }
.ball.b3 { left: 58.5%; top: 66.5%; width: 7.9rem; height: 7.9rem; --r: -40deg; }
.ball.b4 { left: 41%; top: 70.5%; width: 8.1rem; height: 8.1rem; --r: -84deg; }
.ball.b5 { left: 31%; top: 84%; width: 8.1rem; height: 8.1rem; --r: 0deg; }
.ball.b0 .h3, .ball.b2 .h3 { font-size: 3.6rem; }
.ball.b0 .c3, .ball.b2 .c3 { font-size: .62rem; }
.motion .ball { opacity: 0; }
@media (max-width: 1023px) {
  .why-choose { padding: 5rem 1rem 3rem; overflow: hidden; }
  .why-choose .sticky { position: relative; height: auto; display: flex; flex-direction: column; align-items: center; }
  .why-choose .sticky-plash, .right-circle, .why-choose .small-tip { display: none; }
  .left-circle { position: static; transform: none; margin: 0; width: 100%; height: auto; order: 2; }
  .left-circle .ring { display: none; }
  .why-choose .wrap-title { position: relative; left: auto; top: auto; transform: none; width: 100%; order: 1; text-align: center; }
  .why-choose .first-line { flex-direction: column; }
  .why-choose .first-line > span:first-child, .why-choose .first-line > span:last-child { width: 100%; text-align: center; white-space: normal; }
  :lang(sq) .why-choose .wrap-title { font-size: 3.6rem; }
  .our-goal .left { max-width: none; }
  .why-choose .second-line { margin: 0; }
  .balls { transform: none; position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 3rem; }
  .ball, .ball.b0, .ball.b1, .ball.b2, .ball.b3, .ball.b4, .ball.b5 { position: relative; left: auto; top: auto; width: 9.5rem; height: 9.5rem; transform: rotate(var(--r2, 0deg)); }
  .ball .h3, .ball.b0 .h3, .ball.b2 .h3 { font-size: 2.4rem; }
  .ball .c3, .ball.b0 .c3, .ball.b2 .c3 { font-size: .55rem; }
  .motion .ball { opacity: 1; }
}

/* ---------- TESTIMONIALS ---------- */
.testimonials { color: var(--light); padding: 10.5rem 2rem 6rem; width: 100%; }
.testimonials .wrap-content { position: relative; height: 25rem; width: 100%; display: grid; grid-template-columns: 42.5rem 1fr; }
.rev-label { font-weight: 500; }
.slide-names { margin-top: 2.5rem; color: var(--light-40); display: grid; gap: .125rem; justify-items: start; }
.btn-slide-name { display: flex; align-items: center; position: relative; padding: .125rem 0; transition: color .3s var(--ease); }
.btn-slide-name .text { transition: transform .3s var(--ease), color .3s var(--ease); }
.btn-slide-name.active .text { color: var(--light); transform: translateX(1.125rem); }
@media (hover: hover) { .btn-slide-name:hover { color: var(--light); } }
.wrap-loader { position: absolute; left: 0; top: 48%; width: .625rem; height: .625rem; transform: translateY(-50%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .3s var(--ease); }
.wrap-loader svg { width: 100%; height: 100%; }
.btn-slide-name.active .wrap-loader { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.path-loader { stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.testimonials .right { position: relative; border-left: 1px solid var(--light-15); padding-left: 1rem; }
.slide-text { position: absolute; left: 1rem; top: 0; width: 32rem; color: var(--light); opacity: 0; visibility: hidden; }
.slide-text.is-active { opacity: 1; visibility: visible; }
.author-names { position: absolute; left: 1rem; bottom: 0; color: var(--light); opacity: 0; visibility: hidden; }
.author-names.is-active { opacity: 1; visibility: visible; }
.author-names span:last-child { color: var(--light-40); }
.discover-wrap { position: absolute; right: 0; bottom: 0; text-align: right; color: var(--light); display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.discover-wrap > p { color: var(--light-40); }
.rating-badge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--light-15); border-radius: 4rem; padding: .85rem 1.25rem; transition: background-color .3s var(--ease), color .3s var(--ease); }
.rating-badge .star { color: var(--accent); }
@media (hover: hover) { .rating-badge:hover { background: var(--light); color: var(--ink); } }
.mob-slider-controls { display: none; }
.mouse-controls { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cursor-circle { position: fixed; left: 0; top: 0; width: 11.25rem; height: 11.25rem; opacity: 0; transition: opacity .3s ease-in; pointer-events: none; }
.cursor-circle svg { width: 100%; height: 100%; }
.cursor-arrow { position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.cursor-arrow svg { width: 100%; height: 100%; stroke: var(--light); stroke-width: 1.3; }
.cursor-circle.left .cursor-arrow { transform: translate(-50%, -50%) rotate(180deg); }
.cursor-circle.left svg circle { transform: rotate(180deg); transform-origin: center; }
@media (hover: hover) and (min-width: 1024px) { .testimonials .wrap-content[data-cursor-place] { cursor: none; } .testimonials [data-hide-cursor], .testimonials [data-hide-cursor] * { cursor: pointer; } }
@media (max-width: 1023px) {
  .testimonials { padding: 5rem 1rem 4rem; }
  .testimonials .wrap-content { display: flex; flex-direction: column; height: auto; }
  .slide-names { display: none; }
  .testimonials .right { border-left: 0; border-top: 1px solid var(--light-15); padding: 1.5rem 0 0; margin-top: 1.5rem; min-height: 15rem; }
  .slide-text { left: 0; top: 1.5rem; width: 100%; }
  .author-names { left: 0; }
  .discover-wrap { position: relative; align-items: flex-start; text-align: left; margin-top: 2.5rem; }
  .mob-slider-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; }
  .btn-slide { width: 3.5rem; height: 3.5rem; border: 1px solid var(--light-15); border-radius: 50%; display: grid; place-items: center; }
  .btn-slide svg { width: 1rem; height: 1rem; stroke: var(--light); stroke-width: 1.3; }
  .mouse-controls { display: none; }
}

/* ---------- PRE-FOOTER ---------- */
.pre-footer { z-index: 4; background-color: var(--ink); height: 77.125rem; isolation: isolate; overflow: hidden; width: 100%; }
.pre-footer-bg { position: absolute; left: 0; bottom: 0; width: 100%; height: 88rem; z-index: -1; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(5rem); }
.glow.g1 { left: 50%; bottom: -8rem; width: 120rem; height: 48rem; margin-left: -60rem; background: radial-gradient(50% 50% at 50% 50%, #F2F3F4 0%, #D9DCE0 35%, rgba(170, 176, 186, .35) 62%, rgba(18, 21, 28, 0) 75%); animation: glowA 15s ease-in infinite; }
.glow.g2 { left: 10%; bottom: 6rem; width: 40rem; height: 24rem; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); animation: glowB 15s ease-in-out infinite; }
@keyframes glowA { 50% { transform: translate(6rem, -1rem) scale(1.04); } }
@keyframes glowB { 50% { transform: translate(30rem, -2rem) rotate(15deg); } }
.pre-footer-img { position: absolute; left: 50%; bottom: 12rem; width: 74rem; height: auto; max-width: none; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.pre-footer .wrap-title { position: absolute; left: 2rem; bottom: 15rem; width: calc(100% - 4rem); color: var(--light); mix-blend-mode: difference; font-weight: 400; }
.pre-footer .title-line { display: inline-block; width: 100%; }
.pre-footer .title-line:first-child { padding-left: 42.25rem; }
.pre-footer .title-line:nth-child(2) { display: flex; justify-content: space-between; position: relative; }
.pre-footer .small-tip { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); width: 9.375rem; text-align: center; }
:lang(sq) .pre-footer .wrap-title { font-size: 8rem; }
@media (max-width: 1023px) {
  .pre-footer { height: 40rem; }
  .pre-footer-img { width: 130vw; }
  .glow.g1 { width: 50rem; height: 26rem; margin-left: -25rem; bottom: -12rem; }
  .pre-footer .wrap-title { left: 1rem; width: calc(100% - 2rem); bottom: 21rem; text-align: center; }
  .pre-footer .title-line:first-child { padding-left: 0; }
  .pre-footer .title-line:nth-child(2) { flex-direction: column; align-items: center; }
  .pre-footer .small-tip { position: relative; left: auto; bottom: auto; transform: none; order: 3; margin-top: 1rem; width: 12rem; }
  :lang(sq) .pre-footer .wrap-title { font-size: 3.6rem; }
}

/* ---------- FOOTER ---------- */
.footer { position: relative; z-index: 5; color: var(--light); display: flex; flex-direction: column; height: 81.125rem; isolation: isolate; margin-top: -13.625rem; overflow: hidden; padding: 8rem 2rem 1.5rem; width: 100%; }
.footer .bg { position: absolute; left: 50%; top: 0; width: 158.375rem; height: 158.375rem; transform: translateX(-50%); border-radius: 50%; background: var(--ink-grad); z-index: -1; pointer-events: none; }
.wrap-logo { margin: 0 auto 8rem; text-align: center; }
.logo-big { font-family: var(--serif); font-size: 7rem; letter-spacing: -.25rem; line-height: .9; display: inline-block; }
.content-part { display: grid; grid-template-columns: 42.5rem 1fr; }
.socials { display: flex; gap: .75rem; }
.circle-link { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background-color: var(--dark-40); color: var(--light); transition: background-color .3s var(--ease), color .3s var(--ease); }
.circle-link svg { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) { .circle-link:hover { background-color: var(--light); color: var(--ink); } }
.form-title { margin-bottom: 5rem; width: 30rem; font-weight: 400; }
.form { display: grid; grid-template-columns: 1fr 1fr 5rem; gap: .5rem; }
.wrap-locations-radio { grid-column: 1 / -1; border: 0; margin-bottom: 3.5rem; }
.wrap-locations-radio legend { color: var(--light-40); margin-bottom: 1.25rem; padding: 0; }
.wrap-radios { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: .5rem; cursor: pointer; position: relative; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio .dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--light-15); background: rgba(64, 67, 73, .4); position: relative; }
.radio .dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: .625rem; height: .625rem; border-radius: 50%; background: var(--light); transform: translate(-50%, -50%) scale(0); transition: transform .3s var(--ease-out-quint); }
.radio input:checked + .dot::after { transform: translate(-50%, -50%) scale(1); }
.radio input:focus-visible + .dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap-input, .wrap-textarea { display: block; }
.wrap-textarea { grid-area: 3 / 1 / 4 / 3; }
.input, .textarea { width: 100%; background: transparent; color: var(--light); border: 1px solid rgba(233, 234, 235, .18); border-radius: 4rem; padding: 0 2rem; height: 4.125rem; font-family: var(--sans); outline: none; transition: border-color .3s var(--ease); }
.textarea { height: 5rem; padding: 1.75rem 2rem 0; resize: none; border-radius: 3rem; }
.input::placeholder, .textarea::placeholder { color: var(--light-40); }
.input:focus, .textarea:focus { border-color: var(--light-40); }
.btn-submit { grid-area: 3 / 3 / 4 / 4; width: 5rem; height: 5rem; border-radius: 50%; background: var(--light); color: var(--ink); display: grid; place-items: center; transition: transform .5s var(--ease-out-quint); }
.btn-submit svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 1.4; }
@media (hover: hover) { .btn-submit:hover { transform: scale(1.06); } }
.form-note { color: var(--light-40); margin-top: 1rem; }
.mt72 { margin-top: 4.5rem; }
.content-part .left { display: flex; gap: 3rem; align-items: flex-start; }
.footer .name { display: block; color: var(--light-40); margin-bottom: 2rem; font-weight: 500; }
.footer .nav ul { display: flex; flex-direction: column; gap: .5rem; }
.foot-link { display: inline-block; transition: opacity .3s var(--ease); }
@media (hover: hover) { .footer .nav ul:hover .foot-link { opacity: .45; } .footer .nav ul .foot-link:hover { opacity: 1; } }
.footer .nav { width: 12rem; }
.list-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.location { border-left: 1px solid var(--light-15); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 10.75rem; padding-left: 1rem; }
.name-location { margin-bottom: 1rem; }
.addr { color: var(--light); opacity: .85; }
.phone-big { display: inline-block; }
.hours { display: grid; gap: .1rem; }
.work-hour { display: flex; align-items: baseline; }
.days { color: var(--light-40); width: 3.75rem; display: inline-block; }
.foot-ext { color: var(--light); transition: opacity .3s var(--ease); }
@media (hover: hover) { .foot-ext:hover { opacity: .6; } }
.svc-note { color: var(--light-40); }
.content-part.bottom { margin-top: auto; align-items: end; }
.copyright { color: var(--light-40); }
.copyright-wrap { flex-direction: column; gap: .1rem !important; }
.content-part.bottom .right { display: flex; justify-content: space-between; align-items: center; }
.links a { transition: opacity .3s var(--ease); }
@media (hover: hover) { .links a:hover, .wrap-dev a:hover { opacity: .6; } }
.wrap-dev a { font-weight: 700; transition: opacity .3s var(--ease); }
@media (max-width: 1023px) {
  .footer { height: auto; margin-top: -6rem; padding: 5rem 1rem 1.5rem; }
  .footer .bg { width: 60rem; height: 60rem; }
  .wrap-logo { margin-bottom: 3.5rem; }
  .logo-big { font-size: 4.5rem; }
  .content-part { grid-template-columns: 1fr; gap: 2.5rem; }
  .content-part.top .left { order: 2; }
  .form-title { width: 100%; margin-bottom: 2.5rem; }
  .form { grid-template-columns: 1fr 4rem; }
  .wrap-input { grid-column: 1 / -1; }
  .wrap-textarea { grid-area: auto; grid-column: 1 / 2; }
  .btn-submit { grid-area: auto; width: 4rem; height: 4rem; align-self: center; }
  .wrap-locations-radio { margin-bottom: 1.5rem; }
  .input { height: 3.5rem; padding: 0 1.25rem; }
  .textarea { padding: 1.4rem 1.25rem 0; height: 4.5rem; }
  .circle-link { width: 3.5rem; height: 3.5rem; }
  .circle-link svg { width: 1.1rem; height: 1.1rem; }
  .content-part .left { gap: 2rem; flex-wrap: wrap; }
  .footer .nav { width: auto; flex: 1 1 9rem; }
  .list-locations { grid-template-columns: 1fr; }
  .location { min-height: 0; }
  .content-part.bottom { margin-top: 3.5rem; gap: 1rem; }
  .content-part.bottom .right { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ---------- Toast ---------- */
.toast { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 22; max-width: 22rem; display: flex; gap: 1rem; align-items: flex-start; background: var(--light); color: var(--ink); padding: 1rem 1rem 1rem 1.25rem; border-radius: .75rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25); transform: translateY(1rem); opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease-out-quint); }
.toast[hidden] { display: none; }
.toast.is-on { opacity: 1; transform: none; }
.toast p { line-height: 1.35; }
.toast-close { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: rgba(18, 21, 28, .08); }
.toast-close svg { width: .8rem; height: .8rem; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 1023px) { .toast { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; } }


/* ---------- No-motion fallback (reduced motion or JS failure): static, readable layout ---------- */
html:not(.motion) .hero .sticky-plash, html:not(.motion) .slides-plash, html:not(.motion) .why-choose .sticky-plash { display: none; }
html:not(.motion) .hero .bottom-tips { display: none; }
html:not(.motion) .our-goal .right-title { color: var(--dark); }
html:not(.motion) .technology .sticky, html:not(.motion) .technology .sticky-plash { display: none; }
html:not(.motion) .technology .mob-content { display: block; padding-bottom: 10rem; }
html:not(.motion) .technology .mobile-title { display: none; }
html:not(.motion) .mob-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; padding: 6rem 0 0; }
html:not(.motion) .mob-slide img { width: 100%; height: 26rem; object-fit: cover; background: #0B0C10; }
html:not(.motion) .mob-slide figcaption { margin-top: 1.25rem; color: var(--dark); }
html:not(.motion) .why-choose .sticky { position: relative; height: auto; padding: 10rem 2rem 4rem; display: flex; flex-direction: column; align-items: center; }
html:not(.motion) .right-circle, html:not(.motion) .left-circle .ring { display: none; }
html:not(.motion) .left-circle { position: static; transform: none; margin: 0; width: 100%; height: auto; order: 2; }
html:not(.motion) .why-choose .wrap-title { position: relative; left: auto; top: auto; transform: none; width: 100%; }
html:not(.motion) .balls { position: relative; transform: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 5rem; }
html:not(.motion) .ball { position: relative; left: auto !important; top: auto !important; transform: none; width: 12rem !important; height: 12rem !important; }
@media (max-width: 1023px) {
  html:not(.motion) .mob-strip { display: flex; padding: 3rem 2.5rem 0; gap: 1rem; }
  html:not(.motion) .mob-slide img { height: 17.125rem; }
  html:not(.motion) .technology .mob-content { padding-bottom: 0; }
  html:not(.motion) .technology .mobile-title { display: block; }
  html:not(.motion) .why-choose .sticky { padding: 0; }
  html:not(.motion) .ball { width: 9.5rem !important; height: 9.5rem !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero .right { transform: translate3d(50%, 0, 0); }
}