/* Start custom CSS for html, class: .elementor-element-49b6e01 */:root {
  --bf-teal: #00b4c6;
  --bf-teal-light: #4dd9e8;
  --bf-red: #dc2626;
  --bf-red-light: #ff6b6b;
  --bf-navy: #0a0e27;
  --bf-navy-soft: #0f1730;
  --bf-text: #e8ecf7;
  --bf-text-dim: #8b93b0;
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Defensive: neutralize any parent Elementor wrapper forcing a fixed-height
   scroll box around this footer (common cause of a floating inner scrollbar).
   Every common Elementor wrapper class is covered, scoped to ancestors of
   .bf-footer only, so nothing else on the page is affected. */
.elementor-widget-html:has(.bf-footer),
.elementor-widget-container:has(.bf-footer),
.elementor-widget:has(.bf-footer),
.elementor-widget-wrap:has(.bf-footer),
.elementor-column:has(.bf-footer),
.elementor-row:has(.bf-footer),
.elementor-container:has(.bf-footer),
.elementor-section-wrap:has(.bf-footer),
.elementor-top-section:has(.bf-footer),
.elementor-element:has(.bf-footer) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8fafc;
}

/* ================= FOOTER ================= */
.bf-footer {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(0, 180, 198, 0.12), transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 20%, rgba(220, 38, 38, 0.09), transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(0, 180, 198, 0.06), transparent 70%),
    linear-gradient(180deg, var(--bf-navy) 0%, var(--bf-navy-soft) 100%);
  color: var(--bf-text);
  padding: 84px 60px 0;
  overflow: hidden;
}

/* Animated top edge light bar */
.bf-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bf-teal) 20%, #ffffff 50%, var(--bf-red) 80%, transparent);
  background-size: 200% 100%;
  animation: bf-topbar-glide 6s linear infinite;
  z-index: 3;
}

@keyframes bf-topbar-glide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Faint animated dot-grid texture */
.bf-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 900px 500px at 50% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 900px 500px at 50% 0%, black, transparent 75%);
  animation: bf-grid-drift 22s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes bf-grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 52px 52px; }
}

.bf-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 0.9fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Staggered fade-up entrance for each column */
.bf-footer-grid > div {
  opacity: 0;
  transform: translateY(26px);
  animation: bf-col-enter 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bf-footer-grid > div:nth-child(1) { animation-delay: 0.05s; }
.bf-footer-grid > div:nth-child(2) { animation-delay: 0.18s; }
.bf-footer-grid > div:nth-child(3) { animation-delay: 0.30s; }
.bf-footer-grid > div:nth-child(4) { animation-delay: 0.42s; }

@keyframes bf-col-enter {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Brand column --- */
.bf-brand-col h2 {
  font-size: 1.9rem;
  line-height: 1.35;
  margin: 0 0 24px;
  font-weight: 800;
  background: linear-gradient(100deg, #ffffff 40%, var(--bf-teal-light) 60%, #ffffff 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bf-heading-shine 7s ease-in-out infinite;
}

@keyframes bf-heading-shine {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.bf-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(120deg, var(--bf-teal) 0%, var(--bf-red) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 50px;
  box-shadow: 0 8px 24px -6px rgba(0, 180, 198, 0.45);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  animation: bf-cta-pulse 2.8s ease-in-out infinite;
}

@keyframes bf-cta-pulse {
  0%, 100% { box-shadow: 0 8px 24px -6px rgba(0, 180, 198, 0.45); }
  50% { box-shadow: 0 8px 30px -4px rgba(220, 38, 38, 0.5), 0 0 0 6px rgba(0, 180, 198, 0.08); }
}

.bf-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.bf-cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px -6px rgba(220, 38, 38, 0.55);
  animation-play-state: paused;
}

.bf-cta-btn:hover::before {
  left: 130%;
}

.bf-cta-btn svg { transition: transform 0.3s ease; }
.bf-cta-btn:hover svg { transform: translateX(4px); }

/* --- Column headings --- */
.bf-col h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 10px;
}

.bf-col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bf-teal), var(--bf-red));
  transform-origin: left;
  animation: bf-underline-draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@keyframes bf-underline-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.bf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bf-col a {
  color: var(--bf-text-dim);
  text-decoration: none;
  font-size: 0.93rem;
  position: relative;
  padding-left: 0;
  transition: color 0.3s ease, padding-left 0.3s ease, text-shadow 0.3s ease;
}

.bf-col a::before {
  content: '›';
  position: absolute;
  left: -14px;
  opacity: 0;
  color: var(--bf-teal);
  transition: opacity 0.3s ease, left 0.3s ease;
}

.bf-col a:hover {
  color: #fff;
  padding-left: 14px;
  text-shadow: 0 0 12px rgba(0, 180, 198, 0.5);
}

.bf-col a:hover::before {
  opacity: 1;
  left: 0;
  color: var(--bf-red);
}

/* --- Reach us / contact items --- */
.bf-contact-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bf-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--bf-text-dim);
  line-height: 1.4;
}

.bf-contact-list a {
  color: var(--bf-text-dim);
  text-decoration: none;
  transition: color 0.3s ease;
}

.bf-contact-list a:hover { color: var(--bf-teal-light); }

.bf-icon-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,180,198,0.18), rgba(220,38,38,0.18));
  border: 1px solid rgba(0,180,198,0.35);
  color: var(--bf-teal-light);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  animation: bf-badge-idle-glow 3.5s ease-in-out infinite;
}

@keyframes bf-badge-idle-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 180, 198, 0); }
  50% { box-shadow: 0 0 10px rgba(0, 180, 198, 0.35); }
}

.bf-contact-list li:hover .bf-icon-badge {
  transform: scale(1.15) rotate(-8deg);
  border-color: var(--bf-red);
  color: var(--bf-red-light);
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);
}

.bf-social-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.bf-social-row a {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bf-social-row a::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--bf-teal-light);
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.4s ease;
}

.bf-social-row a:hover {
  background: linear-gradient(135deg, var(--bf-teal), var(--bf-red));
  transform: translateY(-4px) rotate(8deg);
  box-shadow: 0 10px 22px -6px rgba(0, 180, 198, 0.55);
  border-color: transparent;
}

.bf-social-row a:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* --- Tagline --- */
.bf-tagline {
  max-width: 1400px;
  margin: 50px auto 0;
  color: var(--bf-text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: bf-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes bf-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Floating tag chips (sit above the wordmark, facing it) --- */
.bf-tags {
  position: relative;
  z-index: 3;
  height: 0;
}
.bf-tag {
  position: absolute;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  color: #16233f;
  white-space: nowrap;
  box-shadow: 0 10px 22px -6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.6);
  opacity: 1;
  transform: rotate(var(--rot));
  animation: bf-float 4.5s ease-in-out infinite;
}

.bf-tag--1 { background: #cdeef2; top: -78px; left: 2%;   --rot: -8deg;  animation-delay: 0s; }
.bf-tag--2 { background: #fde68a; top: -44px; left: 16%;  --rot: 6deg;   animation-delay: 0.3s; }
.bf-tag--3 { background: #fecaca; top: -80px; left: 38%;  --rot: -5deg;  animation-delay: 0.6s; }
.bf-tag--4 { background: #bbf7d0; top: -42px; left: 56%;  --rot: 7deg;   animation-delay: 0.9s; }
.bf-tag--5 { background: #ddd6fe; top: -76px; right: 16%; --rot: -7deg;  animation-delay: 1.2s; }
.bf-tag--6 { background: #fbcfe8; top: -40px; right: 1%;  --rot: 8deg;   animation-delay: 1.5s; }

@keyframes bf-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-10px) rotate(var(--rot)); }
}

/* --- Giant shine wordmark --- */
.bf-wordmark-wrap {
  position: relative;
  max-width: 1400px;
  margin: 90px auto 0;
  z-index: 1;
  /* No overflow set here on purpose: setting overflow-x/y here (even one axis)
     makes the browser create its own scrollable box, which is what was
     causing the up-down scroller. Clipping is fully handled by .bf-footer's
     overflow: hidden below, which physically can never show a scrollbar. */
}

.bf-wordmark {
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  opacity: 0;

  -webkit-text-stroke: 1px rgba(0, 180, 198, 0.25);

  background: linear-gradient(
    100deg,
    #00b4c6 0%,
    #4dd9e8 12%,
    #ffffff 22%,
    #4dd9e8 32%,
    #00b4c6 44%,
    #f4a3a3 54%,
    #dc2626 62%,
    #f4a3a3 70%,
    #00b4c6 82%,
    #4dd9e8 91%,
    #ffffff 97%,
    #00b4c6 100%
  );
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(0, 180, 198, 0.22));
  animation:
    bf-wordmark-enter 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards,
    bf-shine 10s linear 1.5s infinite;
}

@keyframes bf-wordmark-enter {
  0% {
    opacity: 0;
    transform: translateX(-90px);
    filter: blur(6px) drop-shadow(0 0 0 rgba(0, 180, 198, 0));
  }
  70% {
    opacity: 1;
    filter: blur(0px) drop-shadow(0 0 24px rgba(0, 180, 198, 0.22));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px) drop-shadow(0 0 24px rgba(0, 180, 198, 0.22));
  }
}

@keyframes bf-shine {
  0%   { background-position: 0% 0; }
  100% { background-position: -220% 0; }
}

/* --- Bottom bar --- */
.bf-bottom-bar {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 20px auto 0;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--bf-text-dim);
  opacity: 0;
  animation: bf-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards;
}

.bf-bottom-bar span { opacity: 0.5; }

/* --- Responsive --- */
@media screen and (max-width: 1100px) {
  .bf-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 46px; }
  .bf-tags { transform: scale(0.85); transform-origin: top center; }
}

@media screen and (max-width: 760px) {
  .bf-tags { transform: scale(0.62); transform-origin: top center; }
}

/* Below this width the absolutely-positioned floating tags start to
   overlap each other and the wordmark, and the wordmark itself can get
   clipped. Switch tags to a normal wrapping row (no absolute positioning)
   and shrink the wordmark further so both always fit, while keeping the
   float animation so it still feels the same as desktop. */
@media screen and (max-width: 640px) {
  .bf-footer { padding: 56px 24px 0; }
  .bf-footer-grid { grid-template-columns: 1fr; }

  .bf-tags {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    transform: none;
    margin: 0 auto 28px;
    max-width: 380px;
  }

  .bf-tag {
    position: static;
    font-size: 0.72rem;
    padding: 6px 14px;
    /* animation kept (bf-float) so it still floats up/down like desktop */
  }

  .bf-wordmark-wrap { margin-top: 0; }

  .bf-wordmark {
    letter-spacing: 0px;
    /* Scales font-size directly off viewport width (minus footer's 48px
       side padding) so the word always fills close to the full container
       width on any phone, instead of relying on fixed breakpoint sizes. */
    font-size: clamp(1.6rem, calc(12vw - 6px), 4.5rem);
  }
}

@media screen and (max-width: 380px) {
  .bf-tag { font-size: 0.64rem; padding: 5px 12px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-wordmark, .bf-tag, .bf-cta-btn, .bf-cta-btn::before,
  .bf-footer::before, .bf-footer::after, .bf-footer-grid > div,
  .bf-col h3::after, .bf-tagline, .bf-bottom-bar, .bf-icon-badge,
  .bf-brand-col h2 {
    animation: none !important;
    transition: none !important;
  }
  .bf-wordmark, .bf-footer-grid > div, .bf-tagline, .bf-bottom-bar, .bf-tag {
    opacity: 1 !important;
    transform: none !important;
  }
  .bf-wordmark { background-position: 0% 0; }
}/* End custom CSS */