:root {
  --ink: #0b0f14;
  --brand: #00b4ec;
  --brand-light: #4fd3f7;
  --brand-ice: #9eeffd;
  --header-h: 84px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 90px; }
section[id].scroll-mt { scroll-margin-top: 140px; }

::selection { background: var(--brand); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0b0f14; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--brand), var(--brand-ice)); border-radius: 10px; }

/* ---------- Typography helpers ---------- */
.font-display { letter-spacing: -0.02em; }
.text-gradient {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-ice) 50%, var(--brand) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.28);
}
.text-outline-dark {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(11, 15, 20, 0.14);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-ice));
  border-radius: 2px;
}

@keyframes shine { to { background-position: 200% center; } }

/* ---------- Backgrounds ---------- */
.wave-gradient {
  position: relative;
  background: linear-gradient(135deg, #00a3d9 0%, #00b4ec 35%, #4fd3f7 70%, #9eeffd 100%);
  overflow: hidden;
}
.wave-gradient::before,
.wave-gradient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wave-gradient::before {
  width: 160%;
  height: 140%;
  left: -30%;
  top: 45%;
  background: rgba(0, 120, 180, 0.22);
}
.wave-gradient::after {
  width: 140%;
  height: 120%;
  right: -60%;
  top: -70%;
  background: rgba(255, 255, 255, 0.16);
}

.grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.grid-pattern-dark {
  background-image:
    linear-gradient(rgba(11, 15, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 15, 20, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.glow-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .45;
  pointer-events: none;
}
.noise-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, transparent 0%, rgba(6, 9, 13, .55) 100%);
  pointer-events: none;
}

/* ---------- Header ---------- */
#site-header .site-bar { transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
#site-header .topbar { transition: margin-top .35s ease, opacity .35s ease; }
#site-header .logo-dark { display: none; }
#site-header.is-scrolled .topbar { margin-top: -44px; opacity: 0; }
#site-header.is-scrolled .site-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -15px rgba(11, 15, 20, .25);
}
#site-header.is-scrolled .logo-light { display: none; }
#site-header.is-scrolled .logo-dark { display: block; }
#site-header.is-scrolled .menu-toggle { color: var(--ink); border-color: rgba(11, 15, 20, .15); }

.nav-link { position: relative; }
.nav-link .nav-underline {
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-ice));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover .nav-underline,
.nav-link.is-active .nav-underline { transform: scaleX(1); }

@media (min-width: 1024px) {
  #site-header .nav-link { color: rgba(255, 255, 255, .88); }
  #site-header .nav-link:hover,
  #site-header .nav-link.is-active { color: #fff; }
  #site-header.is-scrolled .nav-link { color: #334155; }
  #site-header.is-scrolled .nav-link:hover,
  #site-header.is-scrolled .nav-link.is-active { color: var(--ink); }
  #site-header.is-scrolled .lang-switch-nav { border-color: rgba(11, 15, 20, .15); color: #334155; }
}

.lang-btn.is-active { background: var(--brand); color: #fff; }

/* Preline state styles (Play CDN has no Preline variants) */
.hs-dropdown.open > .hs-dropdown-menu { opacity: 1; }
.hs-dropdown.open > .hs-dropdown-toggle .dd-caret { transform: rotate(180deg); }
.hs-collapse-toggle.open .icon-open { display: none; }
.hs-collapse-toggle .icon-close { display: none; }
.hs-collapse-toggle.open .icon-close { display: block; }

.hs-accordion.active { border-color: rgba(0, 180, 236, .45); box-shadow: 0 20px 45px -25px rgba(0, 180, 236, .55); }
.hs-accordion.active .acc-icon { transform: rotate(45deg); background: var(--brand); color: #fff; }
.hs-accordion.active .hs-accordion-toggle { color: var(--brand); }

.hs-overlay .modal-panel { opacity: 0; transform: translateY(24px) scale(.98); transition: all .3s ease; }
.hs-overlay.open .modal-panel { opacity: 1; transform: none; }
.hs-overlay-backdrop { background: rgba(6, 9, 13, .78) !important; backdrop-filter: blur(4px); }

/* ---------- Hero ---------- */
.hero-swiper .kb { transform: scale(1.12); transition: transform 9s ease-out; }
.hero-swiper .swiper-slide-active .kb { transform: scale(1); }
.hero-swiper .hero-anim { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.hero-swiper .swiper-slide-active .hero-anim { opacity: 1; transform: none; }
.hero-swiper .swiper-slide-active .hero-anim.d1 { transition-delay: .25s; }
.hero-swiper .swiper-slide-active .hero-anim.d2 { transition-delay: .45s; }
.hero-swiper .swiper-slide-active .hero-anim.d3 { transition-delay: .65s; }

.hero-pagination { gap: .75rem; width: auto !important; }
.hero-pagination .swiper-pagination-bullet {
  width: 44px; height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  opacity: 1;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
}
.hero-pagination .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-ice));
  animation: progress 6s linear forwards;
  transform-origin: left;
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.scroll-indicator span { animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Cards ---------- */
.card-lift { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.card-lift:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -25px rgba(11, 15, 20, .35); }

.service-card .svc-bg { opacity: 0; transform: scale(1.1); transition: opacity .5s ease, transform .8s ease; }
.service-card:hover .svc-bg { opacity: 1; transform: scale(1); }
.service-card .svc-num { transition: -webkit-text-stroke-color .4s ease; }
.service-card:hover .svc-num { -webkit-text-stroke-color: rgba(255, 255, 255, .35); }
.service-card .svc-icon { transition: transform .5s ease; }
.service-card:hover .svc-icon { transform: rotate(-8deg) scale(1.08); }

.project-card img { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.project-card:hover img { transform: scale(1.08); }
.project-card .proj-arrow { transition: transform .4s ease, background-color .4s ease; }
.project-card:hover .proj-arrow { transform: rotate(45deg); background: var(--brand); color: #fff; }

.shine-border { position: relative; }
.shine-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 180, 236, .7), rgba(158, 239, 253, .1), rgba(0, 180, 236, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Decorative ---------- */
.float-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 50% { transform: translateY(-14px); } }

.pulse-ring { position: relative; }
.pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
  animation: pulseRing 2.2s infinite;
}
@keyframes pulseRing { 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

.wave-divider { display: block; width: 100%; height: auto; }

.process-line {
  background: linear-gradient(90deg, transparent, rgba(0, 180, 236, .7), rgba(158, 239, 253, .7), transparent);
}

.filter-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.project-item.is-hidden { display: none; }

#backToTop { opacity: 0; pointer-events: none; transform: translateY(16px); transition: all .35s ease; }
#backToTop.is-visible { opacity: 1; pointer-events: auto; transform: none; }

.toast { transform: translateY(120%); opacity: 0; transition: all .45s cubic-bezier(.2, .8, .2, 1); }
.toast.is-visible { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}