/* Website home page (Er Dk 2026-10-21 redesign). Brand: red #F1181C, deep red #B3121F, maroon #5E0A14, navy #0A3868.
   Everything is prefixed hx- so nothing else on the site changes. */
.hx { --red: #F1181C; --red-d: #B3121F; --maroon: #5E0A14; --navy: #0A3868; --soft: #f6f7fb; color: var(--ink); }
.hx section { padding: 76px var(--gutter); }
.hx .hx-wrap { max-width: 1200px; margin: 0 auto; }
.hx h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.hx .hx-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.hx .hx-lead { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 12px 0 0; max-width: 620px; }
.hx .hx-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; }
.hx .hx-more { font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.hx .hx-more:hover { color: var(--red); }
.hx .btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 12px; }

/* ---------------------------------------------------------------- hero */
.hx-hero { position: relative; overflow: hidden; padding: 64px var(--gutter) 72px !important;
  background: radial-gradient(900px 480px at 85% 10%, rgba(241, 24, 28, .07), transparent 60%),
              linear-gradient(180deg, #fff 0%, #fbfbfd 100%); }
.hx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(10, 56, 104, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 56, 104, .05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(90deg, #000 0%, transparent 55%); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.hx-hero .hx-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hx-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 35, 63, .05); font-size: 13.5px; font-weight: 600; color: var(--navy); }
.hx-pill i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .15); }
.hx-hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.03em; margin: 22px 0 18px; }
.hx-hero h1 em { font-style: normal; color: var(--red); }
.hx-hero .hx-sub { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 28px; max-width: 560px; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hx-search { display: flex; gap: 8px; margin-top: 22px; max-width: 520px; padding: 6px; background: #fff; border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: 0 6px 22px rgba(16, 35, 63, .06); }
.hx-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; padding: 0 12px; background: transparent; color: var(--ink); }
.hx-search button { border: 0; border-radius: 10px; padding: 10px 16px; background: var(--navy); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.hx-search button:hover { background: #082b51; }
.hx-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 13.5px; color: var(--ink-mute); }
.hx-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hx-trust svg { width: 16px; height: 16px; color: #16a34a; flex: none; }

/* collage */
.hx-collage { position: relative; height: 540px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-4deg);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.hx-col { display: flex; flex-direction: column; gap: 14px; animation: hx-up 38s linear infinite; }
.hx-col:nth-child(2) { animation-duration: 46s; animation-direction: reverse; margin-top: -60px; }
.hx-col:nth-child(3) { animation-duration: 42s; }
.hx-collage:hover .hx-col { animation-play-state: paused; }
@keyframes hx-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hx-tile { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #e9edf4;
  box-shadow: 0 10px 28px rgba(16, 35, 63, .14); text-decoration: none; flex: none; }
.hx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.hx-tile:hover img { transform: scale(1.06); }
.hx-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10, 20, 40, .82)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-tile.txt { display: grid; place-items: center; padding: 12px; text-align: center; color: #fff; font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, var(--red), var(--maroon)); }
.hx-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff;
  box-shadow: 0 16px 40px rgba(16, 35, 63, .18); font-size: 13px; color: var(--ink-mute); line-height: 1.3; }
.hx-float b { display: block; font-size: 17px; color: var(--ink); font-family: 'Space Grotesk', system-ui, sans-serif; }
.hx-float .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.hx-float.f1 { left: -18px; bottom: 54px; } .hx-float.f1 .ic { background: #fdecec; color: var(--red); }
.hx-float.f2 { right: -8px; top: 36px; } .hx-float.f2 .ic { background: #e7f5ea; color: #16a34a; }
.hx-float svg { width: 20px; height: 20px; }
.hx-art { position: relative; }

/* ---------------------------------------------------------------- stats */
.hx-stats { padding: 0 var(--gutter) !important; margin-top: -8px; }
.hx-stats .hx-wrap { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 20px; overflow: hidden; color: #fff;
  background: linear-gradient(110deg, var(--red) 0%, var(--red-d) 38%, var(--maroon) 100%); box-shadow: 0 20px 50px rgba(94, 10, 20, .25); }
.hx-stat { padding: 30px 22px; text-align: center; position: relative; }
.hx-stat + .hx-stat::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: rgba(255, 255, 255, .25); }
.hx-stat b { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.02em; }
.hx-stat span { display: block; margin-top: 8px; font-size: 14px; opacity: .9; }

/* ---------------------------------------------------------------- partner logos (top of the hero, Company -> Settings -> Site) */
.hx-hero-cred { width: fit-content; max-width: min(600px, 100%); margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hx-hero-logos { display: flex; flex-wrap: nowrap; align-items: center; gap: 26px; }   /* always one line -- the logos shrink to fit */
.hx-hero-logos a, .hx-hero-logos span { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; height: 46px; }
.hx-hero-logos img { height: 40px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.hx-hero-cap { text-align: center; margin: 10px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 560px) {
  .hx-hero-logos { gap: 14px; justify-content: space-between; }
  .hx-hero-logos a, .hx-hero-logos span { height: 34px; flex: 0 1 auto; }
  .hx-hero-logos img { height: 28px; }
  .hx-hero-cap { font-size: 10px; letter-spacing: .08em; } }

/* ---------------------------------------------------------------- fields */
.hx-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hx-field { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff;
  text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hx-field:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 35, 63, .12); border-color: transparent; }
.hx-field .pics { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 150px; background: #eef1f6; }
.hx-field .pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-field .pics img:first-child { grid-row: span 2; }
.hx-field .pics.n1 { grid-template-columns: 1fr; } .hx-field .pics.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.hx-field .pics.n2 img:first-child { grid-row: auto; }
.hx-field .pics.none { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy), #123f75); color: #fff;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 40px; font-weight: 700; }
.hx-field .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hx-field h3 { font-size: 17px; margin: 0; }
.hx-field .meta { font-size: 13px; color: var(--ink-mute); }
.hx-field .go { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--red); }

/* ---------------------------------------------------------------- popular software */
.hx-soft { background: var(--soft); }
.hx-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hx-swc { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.hx-swc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 35, 63, .12); }
.hx-swc .im { aspect-ratio: 16 / 10; overflow: hidden; background: #e9edf4; }
.hx-swc .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-swc .bd { padding: 14px 16px 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.hx-swc b { font-size: 15px; line-height: 1.3; }
.hx-swc em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--navy); background: #eaf1fb; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

/* ---------------------------------------------------------------- why */
.hx-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hx-card { padding: 26px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.hx-card .ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, #fff1f1, #fde3e3); color: var(--red); }
.hx-card .ic svg { width: 24px; height: 24px; }
.hx-card h3 { font-size: 17.5px; margin: 0 0 8px; }
.hx-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); }

/* ---------------------------------------------------------------- steps */
.hx-steps-sec { background: linear-gradient(180deg, #0A3868 0%, #082b51 100%); color: #fff; }
.hx-steps-sec h2 { color: #fff; } .hx-steps-sec .hx-lead { color: rgba(255, 255, 255, .78); } .hx-steps-sec .hx-kicker { color: #ff8a8c; }
.hx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: st; }
.hx-step { position: relative; padding: 24px 22px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.hx-step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--red);
  font-family: 'Space Grotesk', system-ui, sans-serif; margin-bottom: 14px; }
.hx-step h3 { font-size: 17px; margin: 0 0 6px; color: #fff; }
.hx-step p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.hx-step:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 30px; color: rgba(255, 255, 255, .45); font-size: 20px; }
.hx-steps-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hx-btn-white { background: #fff; color: var(--red); } .hx-btn-white:hover { background: #fff3f3; color: var(--red-d); }
.hx-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); } .hx-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------------------------------------------------------------- work + reviews */
.hx-work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hx-proj { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.hx-proj:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 35, 63, .12); }
.hx-proj .im { aspect-ratio: 4 / 3; background: #e9edf4; overflow: hidden; } .hx-proj .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-proj .bd { padding: 12px 14px 14px; } .hx-proj b { display: block; font-size: 14.5px; }
.hx-proj small { color: var(--ink-mute); font-size: 12.5px; }
.hx-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.hx-revs.n1 { grid-template-columns: minmax(0, 560px); } .hx-revs.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-rev { padding: 22px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.hx-rev .stars { color: #f59e0b; letter-spacing: 2px; font-size: 16px; }
.hx-rev q { quotes: none; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.hx-rev .who { display: flex; gap: 10px; align-items: center; margin-top: auto; font-size: 13.5px; color: var(--ink-mute); }
.hx-rev .who i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; background: var(--navy); }
.hx-rev .who b { display: block; color: var(--ink); }

/* ---------------------------------------------------------------- partners */
.hx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hx-panel { padding: 34px 32px; border-radius: 22px; display: flex; flex-direction: column; gap: 14px; }
.hx-panel h3 { font-size: 24px; margin: 0; letter-spacing: -.01em; } .hx-panel p { margin: 0; font-size: 15px; line-height: 1.65; }
.hx-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.hx-panel li::before { content: "✓"; font-weight: 700; margin-right: 8px; }
.hx-panel .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.hx-panel.dark { background: linear-gradient(135deg, #0A3868, #0d2547); color: #fff; } .hx-panel.dark h3 { color: #fff; }
.hx-panel.dark p, .hx-panel.dark li { color: rgba(255, 255, 255, .82); } .hx-panel.dark li::before { color: #ff8a8c; }
.hx-panel.light { background: #fff6f6; border: 1px solid #fbd5d5; } .hx-panel.light p, .hx-panel.light li { color: var(--ink-soft); }
.hx-panel.light li::before { color: var(--red); }
.hx-verify { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 18px 22px;
  border: 1px dashed var(--line-strong); border-radius: 16px; font-size: 15px; color: var(--ink-soft); }
.hx-verify b { color: var(--ink); }

/* ---------------------------------------------------------------- final cta */
.hx-final { padding: 0 var(--gutter) 76px !important; }
.hx-final .hx-wrap { position: relative; overflow: hidden; border-radius: 26px; padding: 54px 48px; color: #fff; display: flex; flex-wrap: wrap;
  gap: 24px; align-items: center; justify-content: space-between; background: linear-gradient(110deg, var(--red) 0%, var(--red-d) 40%, var(--maroon) 100%); }
.hx-final .hx-wrap::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  border: 50px solid rgba(255, 255, 255, .07); }
.hx-final h2 { color: #fff; max-width: 640px; } .hx-final p { margin: 10px 0 0; font-size: 16.5px; color: rgba(255, 255, 255, .85); max-width: 560px; }
.hx-final .acts { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .hx-fields, .hx-sw, .hx-work, .hx-why { grid-template-columns: repeat(2, 1fr); }
  .hx-steps { grid-template-columns: repeat(2, 1fr); } .hx-step::after { display: none; }
}
@media (max-width: 900px) {
  .hx section { padding: 56px var(--gutter); }
  .hx-hero .hx-wrap { grid-template-columns: 1fr; gap: 34px; }
  .hx-collage { height: 360px; transform: none; }
  .hx-float.f1 { left: 6px; bottom: 16px; } .hx-float.f2 { right: 6px; top: 12px; }
  .hx-stats .hx-wrap { grid-template-columns: repeat(2, 1fr); }
  .hx-stat:nth-child(3)::before { display: none; }
  .hx-duo, .hx-revs, .hx-revs.n1, .hx-revs.n2 { grid-template-columns: 1fr; }
  .hx-final .hx-wrap { padding: 38px 26px; }
}
@media (max-width: 560px) {
  .hx-fields, .hx-sw, .hx-work, .hx-why, .hx-steps { grid-template-columns: 1fr; }
  .hx-sw { grid-template-columns: 1fr 1fr; gap: 12px; } .hx-swc .bd { flex-direction: column; align-items: flex-start; padding: 10px 12px 12px; }
  .hx-swc b { font-size: 13.5px; }
  .hx-collage { height: 300px; gap: 10px; } .hx-col { gap: 10px; }
  .hx-float { padding: 9px 12px; font-size: 12px; } .hx-float b { font-size: 15px; } .hx-float .ic { width: 32px; height: 32px; }
  .hx-hero .hx-cta .btn { flex: 1 1 100%; }
  .hx .btn-lg { padding: 14px 20px; font-size: 15.5px; }
  .hx-panel { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) { .hx-col { animation: none; } .hx-field, .hx-swc, .hx-proj, .hx-tile img { transition: none; } }