/*
  ETECHTICS SOFTWARE SOLUTIONS — Quick enquiry form
  ----------------------------------------------------
  Hero form on every page (js/quick-form.js). Light by default;
  .qf--dark is the glass version used over the Home hero photo.
*/

.qf {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
}
.qf::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--color-navy), var(--color-blue) 55%, var(--color-orange));
}
.qf__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin: 0 0 0.25rem;
}
.qf__sub {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}
.qf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qf__field {
  margin-bottom: 12px;
}
.qf__field label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  margin-bottom: 0.3rem;
}
.qf input,
.qf select,
.qf textarea {
  width: 100%;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.qf textarea {
  resize: vertical;
  min-height: 84px;
}
.qf input:focus,
.qf select:focus,
.qf textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(31, 123, 217, 0.15);
}
.qf [aria-invalid="true"] {
  border-color: #D92D20;
  background: #FFF6F5;
}
.qf__submit {
  width: 100%;
  margin-top: 4px;
}
.qf__status {
  margin: 12px 0 0;
  font-size: var(--font-size-xs);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
}
.qf__status[data-state="success"] {
  background: rgba(76, 175, 109, 0.12);
  color: #1F6B3A;
}
.qf__status[data-state="error"] {
  background: #FEF3F2;
  color: #B42318;
}
.qf__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Dark variant — Home hero (glass panel over the photo) */
.qf--dark {
  background: rgba(3, 18, 38, 0.58);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qf--dark::before {
  background: linear-gradient(90deg, var(--color-blue), var(--color-orange));
}
.qf--dark .qf__title { color: #ffffff; }
.qf--dark .qf__sub { color: var(--color-footer-text-muted); }
.qf--dark .qf__field label { color: var(--color-footer-text); }
.qf--dark input,
.qf--dark select,
.qf--dark textarea {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.qf--dark select option { color: var(--color-ink); }
.qf--dark input:focus,
.qf--dark select:focus,
.qf--dark textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(31, 123, 217, 0.35);
}
.qf--dark [aria-invalid="true"] {
  border-color: #F97066;
  background: rgba(249, 112, 102, 0.12);
}
.qf--dark .qf__status[data-state="success"] { background: rgba(76, 175, 109, 0.2); color: #B7F0C8; }
.qf--dark .qf__status[data-state="error"] { background: rgba(249, 112, 102, 0.18); color: #FECDCA; }

/* On the light inner page banner there is no photo behind the
   panel, so it uses the solid navy gradient instead of glass. */
.ip-hero .qf--dark {
  background: var(--gradient-navy);
  border-color: transparent;
  box-shadow: 0 24px 48px -12px rgba(0, 27, 61, 0.45);
}

/* The hero CTA button lives in home.css; repeated here so inner
   pages (which don't load home.css) get the same blue button. */
.qf .btn-hero-cta {
  background: var(--color-blue-600);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--font-size-xs);
  padding: 0.85rem 2rem;
}
.qf .btn-hero-cta:hover,
.qf .btn-hero-cta:focus-visible {
  background: var(--color-navy-600);
  color: #ffffff;
}

@media (max-width: 599px) {
  .qf { padding: 22px; }
  .qf__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------
   Home hero enquiry card (.qf--home): navy header band, icon
   fields, orange send button, direct email line.
--------------------------------------------------------------- */
.qf--home {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 60px -18px rgba(0, 14, 34, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.qf--home::before { display: none; }
.qf--home .qf__head {
  position: relative;
  padding: 24px 28px 22px;
  background: linear-gradient(135deg, var(--color-navy) 0%, #0B4A8B 60%, var(--color-blue) 100%);
  overflow: hidden;
}
.qf--home .qf__head::before,
.qf--home .qf__head::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.qf--home .qf__head::before {
  width: 170px; height: 170px; right: -50px; top: -80px;
  background: radial-gradient(circle, rgba(255, 150, 0, 0.45), rgba(255, 150, 0, 0) 70%);
}
.qf--home .qf__head::after {
  width: 120px; height: 120px; right: 40px; bottom: -80px;
  border: 2px solid rgba(255, 255, 255, 0.12);
}
.qf--home .qf__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  margin-bottom: 12px;
}
.qf--home .qf__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4CD98A;
  box-shadow: 0 0 0 0 rgba(76, 217, 138, 0.6);
  animation: qf-pulse 2s infinite;
}
@keyframes qf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 217, 138, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(76, 217, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 217, 138, 0); }
}
@media (prefers-reduced-motion: reduce) { .qf--home .qf__pulse { animation: none; } }
.qf--home .qf__title {
  position: relative;
  color: #ffffff;
  font-size: 1.45rem;
  margin: 0 0 4px;
}
.qf--home .qf__sub {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.qf--home .qf__body {
  padding: 22px 28px 20px;
  background: #ffffff;
}
.qf--home .qf__field { margin-bottom: 14px; }
.qf--home .qf__field label {
  font-size: 0.78rem;
  color: var(--color-navy);
  margin-bottom: 6px;
}
.qf--home .qf__control { position: relative; }
.qf--home .qf__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #98A2B3;
  pointer-events: none;
  transition: color var(--transition-fast);
}
.qf--home .qf__control--area .qf__icon { top: 14px; transform: none; }
.qf--home input,
.qf--home textarea {
  background: #F5F8FC;
  border: 1.5px solid #E1E7F0;
  border-radius: 12px;
  padding: 0.75rem 0.9rem 0.75rem 2.75rem;
}
.qf--home textarea { min-height: 92px; }
.qf--home input::placeholder,
.qf--home textarea::placeholder { color: #A0AABB; }
.qf--home input:focus,
.qf--home textarea:focus {
  background: #ffffff;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(31, 123, 217, 0.12);
}
.qf--home .qf__control:focus-within .qf__icon { color: var(--color-blue); }
.qf__submit--home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 0.95rem 1.2rem;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  background: linear-gradient(135deg, #FFA726 0%, var(--color-orange) 45%, #F07C00 100%);
  box-shadow: 0 12px 24px -10px rgba(255, 150, 0, 0.75);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.qf__submit--home svg { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.qf__submit--home:hover,
.qf__submit--home:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 28px -10px rgba(255, 150, 0, 0.85);
}
.qf__submit--home:hover svg { transform: translateX(3px); }
.qf__submit--home:disabled { opacity: 0.7; cursor: wait; transform: none; }
.qf--home .qf__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed #E1E7F0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.qf--home .qf__alt svg { width: 16px; height: 16px; color: var(--color-orange); flex: none; }
.qf--home .qf__alt a { color: var(--color-blue); font-weight: var(--font-weight-semibold); text-decoration: none; }
.qf--home .qf__alt a:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .qf--home .qf__head, .qf--home .qf__body { padding-left: 20px; padding-right: 20px; }
}

/* Compact home form (keeps the hero short) */
.qf--home .qf__head { padding: 18px 24px 16px; }
.qf--home .qf__head::after { display: none; }
.qf--home .qf__head::before { width: 140px; height: 140px; right: -50px; top: -70px; }
.qf--home .qf__headrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.qf--home .qf__title { font-size: 1.25rem; margin: 0; }
.qf--home .qf__badge { margin: 0; font-size: 0.66rem; padding: 3px 10px 3px 8px; flex: none; }
.qf--home .qf__sub { font-size: 0.85rem; }
.qf--home .qf__body { padding: 18px 24px 16px; }
.qf--home .qf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qf--home .qf__field { margin-bottom: 10px; }
.qf--home .qf__field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.qf--home input,
.qf--home textarea { padding: 0.62rem 0.8rem 0.62rem 2.5rem; font-size: 0.9rem; }
.qf--home .qf__icon { left: 12px; width: 17px; height: 17px; }
.qf--home .qf__control--area .qf__icon { top: 12px; }
.qf--home textarea { min-height: 70px; }
.qf__submit--home { padding: 0.75rem 1rem; font-size: 0.95rem; margin-top: 2px; }
.qf--home .qf__alt { margin-top: 12px; padding-top: 12px; font-size: 0.8rem; }
@media (max-width: 479px) {
  .qf--home .qf__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------
   Home hero form composition: glow, orange delivery ring, floating
   tech chips and a check badge (same visual family as the Trusted
   Partner picture). Decorative only — hidden on narrow screens.
--------------------------------------------------------------- */
.hero__form { position: relative; isolation: isolate; }
.hero__form .qf--home { position: relative; z-index: 2; }
.qf-deco { position: absolute; inset: 0; pointer-events: none; }
.qf-deco__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  max-width: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.qf-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: #ffffff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  white-space: nowrap;
  box-shadow: 0 14px 28px -12px rgba(0, 8, 20, 0.55);
  animation: qf-float 6s ease-in-out infinite;
}
.qf-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #ffffff;
}
.qf-chip__icon svg { width: 16px; height: 16px; }
.qf-chip--a { left: -118px; top: -16px; }
.qf-chip--b { right: -104px; top: 40%; animation-delay: -2s; }
.qf-chip--c { left: -128px; bottom: 6px; animation-delay: -4s; }
.qf-deco__check {
  position: absolute;
  z-index: 3;
  right: -16px;
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #4CAF6D;
  color: #ffffff;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 22px -8px rgba(0, 8, 20, 0.6);
}
.qf-deco__check svg { width: 20px; height: 20px; }
@keyframes qf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .qf-chip { animation: none; } }
/* Not enough side room below desktop widths: keep only the glow + ring */
@media (max-width: 1279px) {
  .qf-chip, .qf-deco__check { display: none; }
}
@media (max-width: 1023px) {
  .qf-deco { display: none; }
}
@media (max-width: 1439px) {
  .qf-chip--b { display: none; }
}
/* Give the ring room so it never crosses into the feature row below */
@media (min-width: 1024px) {
  .hero .hero__inner { padding-top: 88px; padding-bottom: 104px; }
}
/* Five chips: three on the left, two on the right. Each chip only
   overlaps the form's outer edge (not the fields). */
.qf-chip--a { left: auto; right: calc(100% - 20px); top: -16px; }
.qf-chip--d { left: auto; right: calc(100% - 20px); top: 44%; bottom: auto; animation-delay: -3s; }
.qf-chip--c { left: auto; right: calc(100% - 20px); bottom: 6px; }
.qf-chip--b { right: auto; left: calc(100% - 20px); top: 24%; }
.qf-chip--e { left: calc(100% - 20px); top: 64%; animation-delay: -1s; }
@media (max-width: 1439px) {
  .qf-chip--b, .qf-chip--e { display: none; }
}
/* Final chip layout (overrides above) */
.qf-chip { padding: 5px 14px 5px 5px; font-size: 0.82rem; gap: 9px; }
.qf-chip__icon { width: 28px; height: 28px; }
.qf-chip--a { right: calc(100% - 20px); top: 18%; }
.qf-chip--c { right: calc(100% - 20px); top: auto; bottom: 14%; }
.qf-chip--b { left: calc(100% - 28px); top: 30%; }
.qf-chip--d { right: auto; left: calc(100% - 28px); top: 62%; }
.qf-chip--e { left: auto; right: -36px; top: -40px; }
@media (max-width: 1439px) {
  .qf-chip--b, .qf-chip--d { display: none; }
  .qf-chip--e { display: inline-flex; }
}
@media (max-width: 1279px) {
  .qf-chip--e { display: none; }
}
/* Chip layout v3 */
.qf-chip--a { right: calc(100% - 20px); top: -16px; }
.qf-chip--c { right: calc(100% - 20px); top: auto; bottom: 6px; }
.qf-chip--b { left: calc(100% - 20px); top: 40%; }
.qf-chip--d { left: 18%; right: auto; top: auto; bottom: -40px; }
.qf-chip--e { left: auto; right: -36px; top: -40px; }
@media (max-width: 1439px) {
  .qf-chip--b { display: none; }
  .qf-chip--d { display: inline-flex; }
}

/* ---------------------------------------------------------------
   Chip layout v4 — nothing extends past the form's right edge, so
   the composition can never run off the side of the screen. Chips
   sit on the left (towards the heading), top edge and bottom edge.
--------------------------------------------------------------- */
.qf-deco__ring { transform: translate(-56%, -50%); }
.qf-chip--a { left: auto; right: calc(100% - 18px); top: 3%; bottom: auto; }
.qf-chip--b { left: auto; right: calc(100% - 18px); top: 37%; bottom: auto; }
.qf-chip--c { left: auto; right: calc(100% - 18px); top: auto; bottom: 18%; }
.qf-chip--e { left: auto; right: 22px; top: -38px; bottom: auto; }
.qf-chip--d { left: 16%; right: auto; top: auto; bottom: -38px; }
.qf-deco__check { right: 14px; bottom: -20px; }
@media (min-width: 1024px) {
  .hero .hero__inner { column-gap: 150px; }
  .hero .hero__content { max-width: 600px; }
}
@media (max-width: 1439px) {
  .qf-chip--b, .qf-chip--d, .qf-chip--e { display: inline-flex; }
}
@media (max-width: 1279px) {
  .qf-chip, .qf-deco__check { display: none; }
  .hero .hero__inner { column-gap: 56px; }
}
.qf-deco__check { right: -14px; bottom: -16px; }

/* ---------------------------------------------------------------
   Home hero text: kicker pill above the heading and a row of
   service chips under the button (same chip family as the form).
--------------------------------------------------------------- */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__kicker-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 4px rgba(255, 150, 0, 0.25);
}
.hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  background: #ffffff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  white-space: nowrap;
  box-shadow: 0 14px 28px -12px rgba(0, 8, 20, 0.55);
  animation: qf-float 6s ease-in-out infinite;
}
.hero-chip:nth-child(2) { animation-delay: -2s; }
.hero-chip:nth-child(3) { animation-delay: -4s; }
.hero-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #ffffff;
}
.hero-chip__icon svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .hero-chip { animation: none; } }
@media (max-width: 479px) {
  .hero__chips { gap: 10px; }
  .hero-chip { font-size: 0.78rem; }
}

/* Final hero composition: three chips on the form's left only */
.qf-chip--a { right: calc(100% - 18px); top: 10%; bottom: auto; left: auto; }
.qf-chip--hire { right: calc(100% - 18px); top: 42%; animation-delay: -2s; }
.qf-chip--saas { right: calc(100% - 18px); top: auto; bottom: 14%; animation-delay: -4s; }
.qf-chip--a { top: -16px; }
.qf-chip--hire { top: 62%; }
.qf-chip--saas { bottom: -14px; }
/* Order top → bottom: Hire Dedicated Developers, ASP.NET Zero,
   SaaS Product Development, .NET Core & Angular */
.qf-chip--hire { top: -16px; bottom: auto; animation-delay: 0s; }
.qf-chip--a { top: 27%; bottom: auto; animation-delay: -2s; }
.qf-chip--saas { top: 62%; bottom: auto; animation-delay: -4s; }
.qf-chip--net { right: calc(100% - 18px); top: auto; bottom: -14px; animation-delay: -3s; }

/* "Since 2019" sticker card under the hero button (tilted, bold
   outline and offset shadow, after the owner's reference). */
.hero__since {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  padding: 12px 22px 12px 14px;
  background: #FFC233;
  border: 3px solid #0A1F44;
  border-radius: 14px;
  box-shadow: 6px 6px 0 #0A1F44;
  transform: rotate(-3deg);
  transform-origin: left center;
  color: #0A1F44;
}
.hero__since::before {
  content: "";
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0A1F44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z' fill='%23FFC233'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.hero__since-year {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero__since-text {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: 12ch;
  padding-left: 14px;
  border-left: 2px solid rgba(10, 31, 68, 0.35);
}
@media (max-width: 479px) {
  .hero__since { margin-top: 32px; gap: 10px; padding: 10px 16px 10px 10px; }
  .hero__since-year { font-size: 1.3rem; }
  .hero__since::before { width: 32px; height: 32px; background-size: 17px; }
}

/* "Since 2019" card — redesigned: calm glass panel in the brand
   palette (overrides the earlier tilted sticker style). */
.hero__since {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 12px 22px 12px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: none;
  color: #ffffff;
}
.hero__since::before { display: none; }
.hero__since-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #FFB13D 0%, var(--color-orange) 55%, #F07C00 100%);
  box-shadow: 0 10px 20px -10px rgba(255, 150, 0, 0.9);
}
.hero__since-icon svg { width: 24px; height: 24px; }
.hero__since-copy { display: flex; flex-direction: column; gap: 2px; }
.hero__since-year {
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  color: #ffffff;
}
.hero__since-text {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  max-width: none;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 479px) {
  .hero__since { margin-top: 26px; padding: 10px 18px 10px 10px; }
  .hero__since-year { font-size: 1.1rem; }
  .hero__since-icon { width: 42px; height: 42px; }
}

/* "Hire Dedicated Developers" pill above the hero heading */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hero__eyebrow:hover,
.hero__eyebrow:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  text-decoration: none;
}
.hero__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #4CAF6D;
  color: #ffffff;
}
.hero__eyebrow-icon svg { width: 16px; height: 16px; }
.hero__eyebrow-arrow { width: 15px; height: 15px; color: var(--color-orange); transition: transform var(--transition-fast); }
.hero__eyebrow:hover .hero__eyebrow-arrow { transform: translateX(3px); }