/* DevShuora dark home page (2026-10-25). Devvista-style layout in DevShuora colours (navy #00295f, cyan #01b6c1).
   Loaded only on the home page; every rule is scoped to body.hd-page. The header keeps its white bar. */

body.hd-page {
  --hd-bg: #050d1a;
  --hd-bg-2: #081427;
  --hd-card: #0b1a2f;
  --hd-card-2: #0f2139;
  --hd-line: rgba(255, 255, 255, .09);
  --hd-text: #eef3fa;
  --hd-muted: rgba(226, 236, 248, .66);
  --hd-cyan: #01b6c1;
  --hd-cyan-2: #22d3ee;
  --hd-sky: #38bdf8;
  --hd-navy: #00295f;
  --hd-ink: #04121f;
  --hd-light: #eef6f9;
  --hd-light-ink: #0b1b30;
  --hd-light-muted: #52637a;
  --hd-font: 'Space Grotesk', 'Inter', sans-serif;
  background: var(--hd-bg);
  color: var(--hd-text);
}
body.hd-page main { background: var(--hd-bg); overflow: hidden; }
body.hd-page ::selection { background: var(--hd-cyan); color: var(--hd-ink); }

/* ---------- shared pieces ---------- */
body.hd-page .hd-sec { position: relative; padding: 112px 0; background: var(--hd-bg); color: var(--hd-text); }
body.hd-page .hd-alt { background: var(--hd-bg-2); }
body.hd-page .hd-light { background: var(--hd-light); color: var(--hd-light-ink); }
body.hd-page .hd-head { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 24px 56px; margin-bottom: 56px; }
body.hd-page .hd-eyebrow,
body.hd-page .hd-sec .eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(1, 182, 193, .42); background: rgba(1, 182, 193, .08); color: #47dde5;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
body.hd-page .hd-eyebrow::before,
body.hd-page .hd-sec .eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-cyan); box-shadow: 0 0 0 4px rgba(1, 182, 193, .18);
}
body.hd-page .hd-light .hd-eyebrow { color: #036770; background: rgba(1, 182, 193, .1); border-color: rgba(1, 150, 160, .35); }
body.hd-page .hd-eyebrow-w { color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; background: rgba(255, 255, 255, .08) !important; }
body.hd-page .hd-eyebrow-w::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
body.hd-page .hd-title,
body.hd-page .hd-sec .section-title {
  font-family: var(--hd-font); font-weight: 700; font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.07; letter-spacing: -.04em;
  color: inherit; margin: 18px 0 0;
}
body.hd-page .hd-sec .section-title { color: var(--hd-text); }
body.hd-page .hd-sub,
body.hd-page .hd-sec .section-lead { color: var(--hd-muted); font-size: 1.06rem; line-height: 1.7; margin: 0; }
body.hd-page .hd-light .hd-sub { color: var(--hd-light-muted); }
body.hd-page .hd-grad,
body.hd-page .accent-word {
  color: #35d0d8;
}
body.hd-page .hd-mark { color: #017c86; position: relative; white-space: nowrap; }
body.hd-page .hd-mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; border-radius: 4px; background: rgba(1, 182, 193, .28);
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s;
}
body.hd-page .visible .hd-mark::after, body.hd-page .hd-mark.visible::after { transform: scaleX(1); }
body.hd-page .hd-outline { color: #8eeef3; }

/* buttons */
body.hd-page .hd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 12px; font-weight: 700; font-size: .98rem;
  line-height: 1.2; border: 1px solid transparent; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
body.hd-page .hd-btn i { transition: transform .25s ease; }
body.hd-page .hd-btn:hover i { transform: translateX(4px); }
body.hd-page .hd-btn-primary { background: var(--hd-cyan); color: var(--hd-ink); box-shadow: 0 8px 20px rgba(1, 182, 193, .22); }
body.hd-page .hd-btn-primary:hover { color: var(--hd-ink); transform: translateY(-2px); background: #19c6d0; box-shadow: 0 12px 26px rgba(1, 182, 193, .3); }
body.hd-page .hd-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .02); }
body.hd-page .hd-btn-ghost:hover { color: #fff; border-color: var(--hd-cyan); background: rgba(1, 182, 193, .1); transform: translateY(-2px); }
body.hd-page .hd-btn-line { color: var(--hd-navy); border-color: rgba(0, 41, 95, .35); background: transparent; }
body.hd-page .hd-btn-line:hover { color: #fff; background: var(--hd-navy); border-color: var(--hd-navy); }
body.hd-page .hd-btn-dark { color: #fff; background: var(--hd-ink); }
body.hd-page .hd-btn-dark:hover { color: #fff; background: #000; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
body.hd-page .hd-btn-white { color: var(--hd-ink); background: #fff; }
body.hd-page .hd-btn-white:hover { color: var(--hd-ink); background: #e9fbfc; transform: translateY(-2px); }
body.hd-page .hd-sec .btn-outline-glow { color: #fff; border: 1px solid rgba(255, 255, 255, .24); background: transparent; border-radius: 12px; font-weight: 700; font-size: .98rem; padding: 15px 26px; }
body.hd-page .hd-sec .btn-outline-glow:hover { color: #fff; border-color: var(--hd-cyan); background: rgba(1, 182, 193, .1); }

/* ---------- hero ---------- */
body.hd-page .hd-hero { position: relative; padding: 178px 0 48px; background: var(--hd-bg); color: #fff; overflow: hidden; isolation: isolate; }
body.hd-page .hd-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body.hd-page .hd-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
body.hd-page .hd-glow.g1 { width: 720px; height: 720px; right: -160px; top: -60px; background: radial-gradient(circle, rgba(1, 182, 193, .16), rgba(1, 182, 193, 0) 68%); }
body.hd-page .hd-glow.g2 { width: 560px; height: 560px; left: -220px; bottom: -220px; background: radial-gradient(circle, rgba(56, 120, 248, .12), rgba(56, 120, 248, 0) 70%); }
body.hd-page .hd-dots {
  position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 22% 60%, #000 0%, transparent 55%); mask-image: radial-gradient(ellipse at 22% 60%, #000 0%, transparent 55%);
}
body.hd-page .hd-h1 { margin: 0; }
body.hd-page .hd-kicker {
  display: flex; width: fit-content; align-items: center; gap: 10px; margin-bottom: 26px; padding: 9px 18px 9px 14px; border-radius: 999px;
  border: 1px solid rgba(1, 182, 193, .45); background: rgba(1, 182, 193, .08); color: #47dde5; font-family: 'Inter', sans-serif;
  font-size: .74rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; line-height: 1.2;
}
body.hd-page .hd-kicker i { color: var(--hd-cyan-2); font-size: .9rem; }
body.hd-page .hd-h1-main { display: block; font-family: var(--hd-font); font-weight: 700; font-size: clamp(2.45rem, 4.7vw, 4.05rem); line-height: 1.04; letter-spacing: -.045em; color: #fff; }
body.hd-page .hd-type-line { display: block; min-height: 1.1em; white-space: nowrap; }
body.hd-page .hd-type { display: inline; }
body.hd-page .hd-type-text {
  position: relative; color: #35d0d8;
}
body.hd-page .hd-type-text::before { content: ''; position: absolute; left: 0; right: 0; bottom: -.04em; height: 4px; border-radius: 4px; background: rgba(53, 208, 216, .45); }
body.hd-page .hd-type::after { content: ''; display: inline-block; width: 4px; height: .82em; margin-left: 6px; vertical-align: -.06em; border-radius: 2px; background: var(--hd-cyan-2); animation: hdCaret 1s steps(1) infinite; }
body.hd-page .hd-lead { margin: 26px 0 0; max-width: 560px; color: var(--hd-muted); font-size: 1.14rem; line-height: 1.7; }
body.hd-page .hd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
body.hd-page .hd-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 30px 0 0; }
body.hd-page .hd-proof li { display: inline-flex; align-items: center; gap: 8px; color: rgba(238, 243, 250, .78); font-size: .9rem; font-weight: 600; }
body.hd-page .hd-proof i { color: var(--hd-cyan-2); }

/* dashboard card (an example of the software we build) */
body.hd-page .hd-dash-wrap { position: relative; perspective: 1800px; padding: 26px 0 34px; }
body.hd-page .hd-dash {
  position: relative; overflow: hidden; border-radius: 20px; background: #0c1a2e; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55); transform: rotateY(-8deg) rotateX(3deg); transform-origin: left center; transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
body.hd-page .hd-dash-wrap:hover .hd-dash { transform: rotateY(-2deg) rotateX(1deg); }
body.hd-page .hd-dash-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); }
body.hd-page .hd-dots3 { display: flex; gap: 6px; }
body.hd-page .hd-dots3 i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
body.hd-page .hd-dots3 i:nth-child(2) { background: #febc2e; }
body.hd-page .hd-dots3 i:nth-child(3) { background: #28c840; }
body.hd-page .hd-dash-title { flex: 1; padding-right: 46px; text-align: center; color: rgba(238, 243, 250, .62); font-size: .8rem; font-weight: 600; }
body.hd-page .hd-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(34, 197, 94, .12); color: #4ade80; font-size: .7rem; font-weight: 700; }
body.hd-page .hd-live i, body.hd-page .hd-dot-ok { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #22c55e; animation: hdPulse 1.8s ease-out infinite; }
body.hd-page .hd-dash-body { display: grid; grid-template-columns: 58px 1fr; }
body.hd-page .hd-dash-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; border-right: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .14); }
body.hd-page .hd-dash-side img { width: 26px; height: auto; margin-bottom: 10px; }
body.hd-page .hd-dash-side span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: rgba(238, 243, 250, .45); font-size: 1rem; }
body.hd-page .hd-dash-side span.on { background: rgba(1, 182, 193, .16); color: #35d0d8; }
body.hd-page .hd-dash-side span.end { margin-top: auto; }
body.hd-page .hd-dash-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
body.hd-page .hd-dash-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body.hd-page .hd-dash-top small { display: block; color: rgba(238, 243, 250, .58); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.hd-page .hd-dash-top b { display: block; color: #fff; font-size: 1.02rem; font-weight: 700; }
body.hd-page .hd-dash-search { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: rgba(238, 243, 250, .55); font-size: .76rem; }
body.hd-page .hd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.hd-page .hd-kpi, body.hd-page .hd-chart, body.hd-page .hd-feed { border-radius: 13px; background: #12233b; border: 1px solid rgba(255, 255, 255, .07); }
body.hd-page .hd-kpi { min-width: 0; padding: 12px 14px; }
body.hd-page .hd-kpi small { display: block; color: rgba(238, 243, 250, .7); font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hd-page .hd-kpi b { display: block; margin: 4px 0 2px; color: #fff; font-family: var(--hd-font); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.hd-page .hd-kpi span { color: #4ade80; font-size: .7rem; font-weight: 700; }
body.hd-page .hd-kpi span.note { color: rgba(238, 243, 250, .6); }
body.hd-page .hd-dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
body.hd-page .hd-chart, body.hd-page .hd-feed { min-width: 0; padding: 14px; }
body.hd-page .hd-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
body.hd-page .hd-card-head b { color: #fff; font-size: .84rem; }
body.hd-page .hd-card-head small { color: rgba(238, 243, 250, .58); font-size: .68rem; }
body.hd-page .hd-card-head .hd-live { padding: 2px 8px; color: #4ade80; font-size: .64rem; }
body.hd-page .hd-bars {
  position: relative; height: 170px; display: flex; align-items: flex-end; gap: 8px; padding: 26px 2px 20px;
  background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 26px / 100% 31px no-repeat, linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 57px / 100% 31px no-repeat, linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 88px / 100% 31px no-repeat, linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 119px / 100% 31px no-repeat;
}
body.hd-page .hd-bars span { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(53, 208, 216, .7), rgba(14, 116, 144, .7)); transform-origin: bottom; animation: hdGrow 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms + .4s); }
body.hd-page .hd-bars span.now { background: linear-gradient(180deg, #5ee6ec, #01b6c1); }
body.hd-page .hd-bars span i { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .62rem; color: rgba(238, 243, 250, .55); }
body.hd-page .hd-bars span em { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: #fff; color: var(--hd-ink); font-style: normal; font-size: .64rem; font-weight: 700; white-space: nowrap; }
body.hd-page .hd-feed-list { list-style: none; display: flex; flex-direction: column; gap: 6px; height: 170px; margin: 0; padding: 0; overflow: hidden; }
body.hd-page .hd-feed-list li { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .035); color: rgba(238, 243, 250, .9); font-size: .76rem; }
body.hd-page .hd-feed-list li.in { animation: hdSlideIn .5s ease both; }
body.hd-page .hd-feed-list li > i { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(1, 182, 193, .14); color: #35d0d8; font-size: .8rem; }
body.hd-page .hd-feed-list li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hd-page .hd-feed-list li em { font-style: normal; color: rgba(238, 243, 250, .55); font-size: .66rem; }
body.hd-page .hd-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); transition: opacity .35s ease, transform .35s ease; }
body.hd-page .hd-float.swap { opacity: 0; transform: translateY(6px); }
body.hd-page a.hd-float { text-decoration: none; }
body.hd-page a.hd-float:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 3px rgba(1, 182, 193, .45); }
body.hd-page .hd-float.f1 { top: -6px; right: -16px; padding: 11px 16px 11px 11px; background: #fff; animation: hdFloat 6s ease-in-out infinite; }
body.hd-page .hd-float-ic { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #e3f7f8; color: #057f89; font-size: 1rem; }
body.hd-page .hd-float small { display: block; color: #057f89; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hd-page .hd-float b { display: block; color: var(--hd-ink); font-size: .88rem; font-weight: 700; white-space: nowrap; }
body.hd-page .hd-float.f2 { bottom: 4px; left: -18px; gap: 9px; padding: 10px 16px; background: #0f2139; border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .82rem; font-weight: 600; animation: hdFloat 6s ease-in-out -3s infinite; }

/* trust band (client logos) */
body.hd-page .hd-trust { margin-top: 56px; display: flex; align-items: center; gap: 28px; padding: 18px 22px; border: 1px solid var(--hd-line); border-radius: 22px; background: rgba(255, 255, 255, .03); }
body.hd-page .hd-trust p { flex: 0 0 200px; margin: 0; color: rgba(238, 243, 250, .62); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; }
body.hd-page .hd-logos { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
body.hd-page .hd-logos-track { display: flex; width: max-content; gap: 14px; animation: hdMarquee 46s linear infinite; }
body.hd-page .hd-logos:hover .hd-logos-track { animation-play-state: paused; }
body.hd-page .hd-logos span { flex: 0 0 auto; height: 62px; padding: 8px 16px; display: grid; place-items: center; border-radius: 14px; background: #fff; }
body.hd-page .hd-logos img { height: 46px; width: auto; max-width: 130px; object-fit: contain; }
body.hd-page .hd-logos span.dark { background: #0b2545; }

/* service ticker (existing automatic block, restyled as a cyan band) */
body.hd-page .ds-ticker { background: linear-gradient(90deg, var(--hd-cyan), var(--hd-cyan-2)); border: 0; padding: 14px 0; transform: rotate(-1.2deg); margin: 22px -2% 18px; box-shadow: 0 18px 40px rgba(1, 182, 193, .22); z-index: 2; }
body.hd-page .ds-ticker::before { background: linear-gradient(90deg, var(--hd-cyan), rgba(1, 182, 193, 0)) !important; }
body.hd-page .ds-ticker::after { background: linear-gradient(270deg, var(--hd-cyan-2), rgba(34, 211, 238, 0)) !important; }
body.hd-page .ds-ticker a { color: var(--hd-ink); background: transparent; border-color: transparent; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; }
body.hd-page .ds-ticker a i { color: var(--hd-ink); }
body.hd-page .ds-ticker a:hover { background: var(--hd-ink); color: #fff; }
body.hd-page .ds-ticker a:hover i { color: var(--hd-cyan-2); }

/* ---------- who we are (light) ---------- */
body.hd-page .hd-big { margin: 0; padding-left: 24px; border-left: 3px solid var(--hd-cyan); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.55; color: var(--hd-light-ink); }
body.hd-page .hd-text { margin: 22px 0 0; padding-left: 27px; color: var(--hd-light-muted); font-size: 1.02rem; line-height: 1.75; }
body.hd-page .hd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 38px 0 34px 27px; border-top: 1px solid #d5e4ec; border-bottom: 1px solid #d5e4ec; }
body.hd-page .hd-stats div { padding: 22px 12px 20px 0; }
body.hd-page .hd-stats div + div { padding-left: 20px; border-left: 1px solid #d5e4ec; }
body.hd-page .hd-stats b { display: block; font-family: var(--hd-font); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--hd-navy); }
body.hd-page .hd-stats span { display: block; margin-top: 8px; color: var(--hd-light-muted); font-size: .86rem; font-weight: 600; }
body.hd-page .hd-light .hd-btn-line { margin-left: 27px; }

/* ---------- what we build ---------- */
body.hd-page .hd-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.hd-page .hd-svc {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 310px; padding: 32px 30px; border-radius: 22px; isolation: isolate;
  background: var(--hd-card); border: 1px solid var(--hd-line); color: #fff; text-decoration: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
body.hd-page .hd-svc::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(1, 182, 193, .16), transparent 60%); }
body.hd-page .hd-svc:hover { color: #fff; border-color: rgba(1, 182, 193, .55); box-shadow: 0 26px 60px rgba(1, 182, 193, .14); }
body.hd-page .hd-svc:hover::before { opacity: 1; }
body.hd-page .hd-svc small { color: rgba(238, 243, 250, .6); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
body.hd-page .hd-svc-ic { margin-top: 18px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: rgba(1, 182, 193, .12); border: 1px solid rgba(1, 182, 193, .28); color: var(--hd-cyan-2); font-size: 1.3rem; transition: transform .35s ease; }
body.hd-page .hd-svc:hover .hd-svc-ic { transform: rotate(-8deg) scale(1.08); }
body.hd-page .hd-svc h3 { margin: 22px 0 10px; font-family: var(--hd-font); font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; color: inherit; }
body.hd-page .hd-svc p { margin: 0 0 22px; color: var(--hd-muted); font-size: .97rem; line-height: 1.65; max-width: 330px; }
body.hd-page .hd-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--hd-cyan-2); font-weight: 700; font-size: .92rem; }
body.hd-page .hd-more i { transition: transform .25s ease; }
body.hd-page .hd-svc:hover .hd-more i { transform: translateX(5px); }
body.hd-page .hd-svc em { position: absolute; right: -6px; bottom: -22px; z-index: -1; font-family: var(--hd-font); font-style: normal; font-weight: 700; font-size: 6.2rem; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); transition: transform .5s ease, -webkit-text-stroke-color .5s ease; }
body.hd-page .hd-svc:hover em { transform: translateY(-8px); -webkit-text-stroke-color: rgba(1, 182, 193, .3); }
body.hd-page .hd-svc.is-hot { background: linear-gradient(145deg, #0a6b7a 0%, #0a5480 60%, #0a3f72 100%); border-color: transparent; box-shadow: 0 24px 60px rgba(1, 182, 193, .22); }
body.hd-page .hd-svc.is-hot small { color: rgba(255, 255, 255, .85); }
body.hd-page .hd-svc.is-hot p { color: #fff; }
body.hd-page .hd-svc.is-hot .hd-svc-ic { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
body.hd-page .hd-svc.is-hot .hd-more { color: #fff; }
body.hd-page .hd-svc.is-hot em { -webkit-text-stroke-color: rgba(255, 255, 255, .25); }
body.hd-page .hd-svc.is-light { background: #e9f6f8; border-color: #fff; color: var(--hd-light-ink); }
body.hd-page .hd-svc.is-light:hover { color: var(--hd-light-ink); }
body.hd-page .hd-svc.is-light small { color: rgba(11, 27, 48, .62); }
body.hd-page .hd-svc.is-light p { color: var(--hd-light-muted); }
body.hd-page .hd-svc.is-light .hd-svc-ic { background: rgba(1, 182, 193, .14); border-color: rgba(1, 150, 160, .3); color: #036770; }
body.hd-page .hd-svc.is-light .hd-more { color: #036770; }
body.hd-page .hd-svc.is-light em { -webkit-text-stroke-color: rgba(11, 27, 48, .1); }
body.hd-page .hd-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 38px auto 40px; max-width: 980px; }
body.hd-page .hd-chips span { color: rgba(238, 243, 250, .5); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-right: 4px; }
body.hd-page .hd-chips a { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .13); color: rgba(238, 243, 250, .82); font-size: .88rem; font-weight: 600; text-decoration: none; transition: all .25s ease; }
body.hd-page .hd-chips a:hover { color: #fff; border-color: var(--hd-cyan); background: rgba(1, 182, 193, .1); transform: translateY(-2px); }

/* ---------- why DevShuora (brand band + table) ---------- */
body.hd-page .hd-brand { background: linear-gradient(125deg, #00295f 0%, #024a78 50%, #035f70 100%); color: #fff; overflow: hidden; }
body.hd-page .hd-brand::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%);
}
body.hd-page .hd-brand .hd-sub { color: rgba(255, 255, 255, .92); }
body.hd-page .hd-table-wrap { position: relative; border-radius: 24px; overflow: hidden; background: #071324; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
body.hd-page .hd-table { width: 100%; border-collapse: collapse; }
body.hd-page .hd-table th, body.hd-page .hd-table td { padding: 17px 26px; border-top: 1px solid rgba(255, 255, 255, .06); }
body.hd-page .hd-table thead th { border-top: 0; padding-top: 24px; padding-bottom: 22px; color: rgba(238, 243, 250, .55); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
body.hd-page .hd-table thead th:first-child, body.hd-page .hd-table tbody th { text-align: left; }
body.hd-page .hd-table thead th.hd-us { background: #eaf8fa; color: var(--hd-navy); border-bottom: 3px solid var(--hd-cyan); font-size: .8rem; }
body.hd-page .hd-table thead th.hd-us small { display: block; margin-top: 4px; color: #036770; font-size: .64rem; }
body.hd-page .hd-table tbody th { color: rgba(238, 243, 250, .88); font-weight: 500; font-size: .97rem; }
body.hd-page .hd-table td { text-align: center; }
body.hd-page .hd-table td.hd-us { background: rgba(1, 182, 193, .07); }
body.hd-page .hd-table tbody tr { transition: background .2s ease; }
body.hd-page .hd-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
body.hd-page .hd-y, body.hd-page .hd-s, body.hd-page .hd-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; border: 1px solid; }
body.hd-page .hd-y { color: #4ade80; background: rgba(34, 197, 94, .12); border-color: rgba(74, 222, 128, .4); }
body.hd-page .hd-s { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .35); }
body.hd-page .hd-n { color: rgba(238, 243, 250, .42); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
body.hd-page .hd-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 16px 26px; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(238, 243, 250, .6); font-size: .84rem; }
body.hd-page .hd-legend span { display: inline-flex; align-items: center; gap: 8px; }
body.hd-page .hd-legend i { width: 22px; height: 22px; font-size: .75rem; }

/* ---------- process (light) ---------- */
body.hd-page .hd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
body.hd-page .hd-step { position: relative; overflow: hidden; padding: 30px 30px 32px; border-radius: 22px; background: rgba(255, 255, 255, .72); border: 1px solid #d8e7ee; transition: transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; }
body.hd-page .hd-step:hover { background: #fff; transform: translateY(-4px); border-color: rgba(1, 182, 193, .45); box-shadow: 0 22px 50px rgba(11, 37, 69, .1); }
body.hd-page .hd-step b { display: block; font-family: var(--hd-font); font-size: 3.3rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #1d98a1; transition: color .3s ease; }
body.hd-page .hd-step:hover b { color: #017c86; }
body.hd-page .hd-step small { display: block; margin-top: 16px; color: #057f89; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
body.hd-page .hd-step h3 { margin: 8px 0 8px; font-family: var(--hd-font); font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--hd-light-ink); }
body.hd-page .hd-step p { margin: 0; color: var(--hd-light-muted); font-size: .96rem; line-height: 1.6; }
body.hd-page .hd-step::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--hd-cyan), var(--hd-sky)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
body.hd-page .hd-step:hover::after { transform: scaleX(1); }

/* ---------- industries (compact automatic block) ---------- */
body.hd-page .hd-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 44px; }
body.hd-page .hd-ind { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 24px; border-radius: 18px; background: var(--hd-card); border: 1px solid var(--hd-line); color: #fff; text-decoration: none; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
body.hd-page .hd-ind:hover { color: #fff; transform: translateY(-4px); border-color: rgba(1, 182, 193, .5); background: var(--hd-card-2); }
body.hd-page .hd-ind-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(1, 182, 193, .12); border: 1px solid rgba(1, 182, 193, .28); color: var(--hd-cyan-2); font-size: 1.2rem; }
body.hd-page .hd-ind b { font-size: 1.02rem; font-weight: 700; }
body.hd-page .hd-ind-go { position: absolute; top: 22px; right: 22px; color: rgba(238, 243, 250, .3); transition: transform .3s ease, color .3s ease; }
body.hd-page .hd-ind:hover .hd-ind-go { color: var(--hd-cyan-2); transform: translate(3px, -3px); }
body.hd-page .hd-ind.is-ask { background: transparent; border-style: dashed; border-color: rgba(1, 182, 193, .4); }
body.hd-page .hd-ind.is-ask .hd-ind-ic { background: transparent; }

/* ---------- ready-made platforms ---------- */
body.hd-page .hd-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
body.hd-page .hd-prod { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 22px; color: #fff; text-decoration: none; background: linear-gradient(160deg, var(--hd-card-2), var(--hd-card)); border: 1px solid var(--hd-line); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
body.hd-page .hd-prod::after { content: ''; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(1, 182, 193, .22), transparent 70%); transition: transform .5s ease; }
body.hd-page .hd-prod:hover { color: #fff; transform: translateY(-5px); border-color: rgba(1, 182, 193, .5); box-shadow: 0 26px 60px rgba(0, 0, 0, .35); }
body.hd-page .hd-prod:hover::after { transform: scale(1.35); }
body.hd-page .hd-prod-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, var(--hd-cyan), #0e7490); color: #fff; font-size: 1.4rem; box-shadow: 0 12px 26px rgba(1, 182, 193, .3); }
body.hd-page .hd-prod h3 { margin: 22px 0 8px; font-family: var(--hd-font); font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; }
body.hd-page .hd-prod p { margin: 0 0 20px; color: var(--hd-muted); font-size: .96rem; line-height: 1.6; }
body.hd-page .hd-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
body.hd-page .hd-tags i { font-style: normal; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(238, 243, 250, .78); font-size: .78rem; font-weight: 600; }

/* ---------- case studies (automatic block, dark + browser frame) ---------- */
body.hd-page .hd-sec .row.mb-5 { margin-bottom: 56px !important; }
body.hd-page .hd-sec .cs-grid { gap: 20px; }
body.hd-page .hd-sec .cs-card { background: var(--hd-card); border-color: var(--hd-line); color: #fff; }
body.hd-page .hd-sec .cs-card:hover { color: #fff; border-color: rgba(1, 182, 193, .5); box-shadow: 0 26px 60px rgba(0, 0, 0, .4); }
body.hd-page .hd-sec .cs-thumb { position: relative; padding-top: 30px; background: #13233b; border-bottom-color: var(--hd-line); }
body.hd-page .hd-sec .cs-thumb::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 1; background: radial-gradient(circle at 16px 15px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 32px 15px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 48px 15px, #28c840 4px, transparent 4.5px), #13233b; }
body.hd-page .hd-sec .cs-ind { color: #47dde5; }
body.hd-page .hd-sec .cs-body h3 { color: #fff; font-family: var(--hd-font); }
body.hd-page .hd-sec .cs-client { color: rgba(238, 243, 250, .55); }
body.hd-page .hd-sec .cs-body p { color: var(--hd-muted); }
body.hd-page .hd-sec .cs-mini span { background: rgba(255, 255, 255, .05); border-color: var(--hd-line); color: rgba(238, 243, 250, .75); }
body.hd-page .hd-sec .cs-mini b, body.hd-page .hd-sec .cs-link { color: var(--hd-cyan-2); }

/* ---------- reviews (automatic block) ---------- */
body.hd-page .hd-sec .rv-card { background: var(--hd-card); border-color: var(--hd-line); box-shadow: none; position: relative; }
body.hd-page .hd-sec .rv-card::before { content: '\201C'; position: absolute; right: 24px; top: 6px; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: rgba(1, 182, 193, .25); }
body.hd-page .hd-sec .rv-card blockquote { color: rgba(238, 243, 250, .88); }
body.hd-page .hd-sec .rv-card figcaption b { color: #fff; }
body.hd-page .hd-sec .rv-card figcaption small, body.hd-page .hd-sec .rv-card figcaption small a, body.hd-page .hd-sec .rv-src { color: rgba(238, 243, 250, .55); }
body.hd-page .hd-sec .rv-grid:has(> .rv-card:only-child) { columns: auto; max-width: 860px; margin: 0 auto; }
body.hd-page .hd-sec .rv-grid:has(> .rv-card:only-child) .rv-card { padding: 40px 44px; }
body.hd-page .hd-sec .rv-grid:has(> .rv-card:only-child) blockquote { font-size: 1.22rem; line-height: 1.7; }

/* ---------- blog (automatic block) ---------- */
body.hd-page .hd-sec .bl-card { background: var(--hd-card); border-color: var(--hd-line); color: #fff; }
body.hd-page .hd-sec .bl-card:hover { color: #fff; border-color: rgba(1, 182, 193, .5); }
body.hd-page .hd-sec .bl-cat { color: #47dde5; }
body.hd-page .hd-sec .bl-body p, body.hd-page .hd-sec .bl-meta { color: var(--hd-muted); }

/* ---------- global reach ---------- */
body.hd-page .hd-geo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.hd-page .hd-geo-card { padding: 28px; border-radius: 20px; background: var(--hd-card); border: 1px solid var(--hd-line); transition: transform .3s ease, border-color .3s ease; }
body.hd-page .hd-geo-card:hover { transform: translateY(-4px); border-color: rgba(1, 182, 193, .5); }
body.hd-page .hd-geo-card b { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(1, 182, 193, .1); border: 1px solid rgba(1, 182, 193, .45); color: var(--hd-cyan-2); font-family: var(--hd-font); font-size: 1rem; font-weight: 700; letter-spacing: .04em; }
body.hd-page .hd-geo-card b::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--hd-cyan); animation: hdRing 2.8s ease-out infinite; }
body.hd-page .hd-geo-card:nth-child(2) b::after { animation-delay: .7s; }
body.hd-page .hd-geo-card:nth-child(3) b::after { animation-delay: 1.4s; }
body.hd-page .hd-geo-card:nth-child(4) b::after { animation-delay: 2.1s; }
body.hd-page .hd-geo-card h3 { margin: 20px 0 6px; font-family: var(--hd-font); font-size: 1.15rem; font-weight: 700; color: #fff; }
body.hd-page .hd-geo-card p { margin: 0; color: var(--hd-muted); font-size: .92rem; }

/* ---------- our offices (UK head office + countries we serve) ---------- */
body.hd-page .hd-hq {
  position: relative; overflow: hidden; height: 100%; padding: 34px 32px; border-radius: 24px; color: #fff;
  background: linear-gradient(150deg, #0a3f72 0%, #0a5480 55%, #0a6b7a 100%); box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
body.hd-page .hd-hq::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); }
body.hd-page .hd-hq > * { position: relative; }
body.hd-page .hd-hq-pin { position: absolute; top: 28px; right: 28px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0a5480; font-size: 1.5rem; }
body.hd-page .hd-hq-pin::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #fff; animation: hdRing 2.4s ease-out infinite; }
body.hd-page .hd-hq small { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hd-page .hd-hq h3 { margin: 16px 0 10px; font-family: var(--hd-font); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; }
body.hd-page .hd-hq address { margin: 0 0 20px; color: rgba(255, 255, 255, .9); line-height: 1.65; font-style: normal; }
body.hd-page .hd-hq ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
body.hd-page .hd-hq li { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-weight: 600; font-size: .95rem; }
body.hd-page .hd-hq li i { color: #8eeef3; margin-top: 2px; }
body.hd-page .hd-hq li a { color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .5); }
body.hd-page .hd-hq li:has(a) { align-items: center; }
body.hd-page .hd-hq li a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; border-bottom: 0; text-decoration: underline dashed rgba(255, 255, 255, .5); text-underline-offset: 4px; }
body.hd-page .hd-hq .hd-actions { margin-top: 0; }
body.hd-page .hd-hq .hd-btn-primary { background: #fff; color: var(--hd-ink); box-shadow: none; }
body.hd-page .hd-hq .hd-btn-primary:hover { background: #e9fbfc; }
body.hd-page .hd-serve { height: 100%; padding: 28px; border-radius: 24px; background: var(--hd-card); border: 1px solid var(--hd-line); }
body.hd-page .hd-serve-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #fff; font-family: var(--hd-font); font-size: 1.2rem; font-weight: 700; }
body.hd-page .hd-serve-title i { color: #35d0d8; }
body.hd-page .hd-region + .hd-region { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hd-line); }
body.hd-page .hd-region h4 { margin: 0 0 10px; color: rgba(238, 243, 250, .66); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hd-page .hd-ctys { display: flex; flex-wrap: wrap; gap: 8px; }
body.hd-page .hd-cty { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: rgba(238, 243, 250, .9); font-size: .86rem; font-weight: 600; transition: border-color .25s ease, background .25s ease; }
body.hd-page .hd-cty:hover { border-color: rgba(1, 182, 193, .55); background: rgba(1, 182, 193, .08); }
body.hd-page .hd-cty b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(1, 182, 193, .14); color: #35d0d8; font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
body.hd-page .hd-serve-note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: rgba(238, 243, 250, .7); font-size: .9rem; }
body.hd-page .hd-serve-note i { color: #35d0d8; }
body.hd-page .hd-trustrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
body.hd-page .hd-trustrow > div { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: var(--hd-card); border: 1px solid var(--hd-line); }
body.hd-page .hd-trustrow i { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(1, 182, 193, .12); border: 1px solid rgba(1, 182, 193, .28); color: #35d0d8; font-size: 1.15rem; }
body.hd-page .hd-trustrow b { display: block; color: #fff; font-size: .95rem; }
body.hd-page .hd-trustrow span { color: rgba(238, 243, 250, .66); font-size: .82rem; line-height: 1.4; }
@media (max-width: 991.98px) { body.hd-page .hd-trustrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
  body.hd-page .hd-hq { padding: 28px 22px; }
  body.hd-page .hd-hq-pin { width: 46px; height: 46px; font-size: 1.2rem; top: 22px; right: 22px; }
  body.hd-page .hd-hq .hd-btn { flex: 1 1 100%; }
  body.hd-page .hd-serve { padding: 22px 18px; }
  body.hd-page .hd-trustrow { grid-template-columns: 1fr; }
}

/* ---------- about page (2026-10-25): hero photos, story, values, process, team cards, partner ---------- */
body.hd-page .ab-hero { padding-bottom: 96px; }
body.hd-page .ab-crumb { display: flex; align-items: center; gap: 8px; margin: -34px 0 18px; font-size: .86rem; color: var(--hd-muted); }
body.hd-page .ab-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hd-muted); text-decoration: none; }
body.hd-page .ab-crumb a:hover { color: var(--hd-cyan-2); }
body.hd-page .ab-crumb i { font-size: .7rem; }
body.hd-page .ab-crumb span { color: var(--hd-text); font-weight: 600; }
body.hd-page .ab-faces { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 480px; margin-left: auto; margin-bottom: 30px; }
body.hd-page .ab-face { position: relative; margin: 0; overflow: hidden; border-radius: 20px; aspect-ratio: 1 / 1.08; background: var(--hd-card-2); box-shadow: 0 18px 40px rgba(11, 37, 69, .14); }
body.hd-page .ab-face:nth-child(2), body.hd-page .ab-face:nth-child(4) { transform: translateY(28px); }
body.hd-page .ab-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .6s ease; }
body.hd-page .ab-face:hover img { transform: scale(1.04); }
body.hd-page .ab-face figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(6, 18, 34, .88)); color: #fff; }
body.hd-page .ab-face figcaption b { display: block; font-size: 1rem; }
body.hd-page .ab-face figcaption span { font-size: .78rem; color: rgba(255, 255, 255, .85); }
body.hd-page .hd-float.f1.ab-float { top: auto; right: auto; bottom: -34px; left: -40px; }
body.hd-page .ab-quote { margin: 30px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--hd-card); border: 1px solid var(--hd-line); color: var(--hd-text); font-family: var(--hd-font); font-size: 1.2rem; line-height: 1.5; font-weight: 600; }
body.hd-page .hd-light .hd-text + .hd-text { margin-top: 14px; }
body.hd-page .ab-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.hd-page .ab-value { padding: 28px 26px; border-radius: 22px; background: var(--hd-card); border: 1px solid var(--hd-line); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
body.hd-page .ab-value:hover { transform: translateY(-4px); border-color: rgba(8, 132, 142, .4); }
body.hd-page .ab-value .hd-svc-ic { margin-top: 0; }
body.hd-page .ab-value h3 { margin: 20px 0 8px; font-family: var(--hd-font); font-size: 1.22rem; font-weight: 700; color: var(--hd-text); }
body.hd-page .ab-value p { margin: 0; color: var(--hd-muted); font-size: .95rem; line-height: 1.65; }
body.hd-page .ab-checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
body.hd-page .ab-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--hd-text); font-weight: 600; }
body.hd-page .ab-checks i { color: var(--hd-cyan-2); font-size: 1.1rem; }
body.hd-page .ab-stages { display: grid; gap: 14px; }
body.hd-page .ab-stage { display: flex; gap: 20px; align-items: flex-start; padding: 24px 26px; border-radius: 20px; background: var(--hd-card); border: 1px solid var(--hd-line); transition: border-color .3s ease, transform .3s ease; }
body.hd-page .ab-stage:hover { transform: translateX(4px); border-color: rgba(8, 132, 142, .4); }
body.hd-page .ab-stage > b { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--hd-cyan-2); color: #fff; font-family: var(--hd-font); font-size: 1.15rem; font-weight: 700; }
body.hd-page .ab-stage h3 { margin: 0 0 6px; font-family: var(--hd-font); font-size: 1.15rem; font-weight: 700; color: var(--hd-text); }
body.hd-page .ab-stage p { margin: 0; color: var(--hd-muted); font-size: .95rem; line-height: 1.6; }
body.hd-page .tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.hd-page .tm-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--hd-card); border: 1px solid var(--hd-line); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; scroll-margin-top: 140px; }
body.hd-page .tm-card:hover { transform: translateY(-4px); border-color: rgba(8, 132, 142, .4); }
body.hd-page .tm-photo { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--hd-card-2); }
body.hd-page .tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: transform .6s ease; }
body.hd-page .tm-card:hover .tm-photo img { transform: scale(1.04); }
body.hd-page .tm-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
body.hd-page .tm-role { color: var(--hd-cyan-2); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
body.hd-page .tm-body h3 { margin: 6px 0 10px; font-family: var(--hd-font); font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--hd-text); }
body.hd-page .tm-exp { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 11px; border-radius: 999px; background: var(--hd-card-2); border: 1px solid var(--hd-line); color: var(--hd-text); font-size: .8rem; font-weight: 600; }
body.hd-page .tm-exp i { color: var(--hd-cyan-2); }
body.hd-page .tm-body p { margin: 14px 0 6px; color: var(--hd-muted); font-size: .95rem; line-height: 1.65; }
body.hd-page .tm-more { margin-top: 6px; border-top: 1px solid var(--hd-line); }
body.hd-page .tm-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; color: var(--hd-text); font-weight: 700; font-size: .92rem; }
body.hd-page .tm-more summary::-webkit-details-marker { display: none; }
body.hd-page .tm-more summary i { color: var(--hd-cyan-2); transition: transform .3s ease; }
body.hd-page .tm-more[open] summary i { transform: rotate(45deg); }
body.hd-page .tm-more ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
body.hd-page .tm-more li { display: flex; gap: 8px; color: var(--hd-muted); font-size: .88rem; line-height: 1.5; }
body.hd-page .tm-more li i { color: var(--hd-cyan-2); }
body.hd-page .tm-more .hd-tags { margin: 0 0 12px; }
body.hd-page .tm-mail { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--hd-cyan-2); font-weight: 600; font-size: .9rem; text-decoration: none; }
body.hd-page .tm-mail:hover { text-decoration: underline; }
body.hd-page .tm-partner { flex-direction: row; }
body.hd-page .tm-partner .tm-photo { flex: 0 0 190px; aspect-ratio: auto; }
body.hd-page .tm-initials { display: grid; place-items: center; background: linear-gradient(150deg, #0b2545, #0d3a63) !important; }
body.hd-page .tm-initials span { color: #fff; font-family: var(--hd-font); font-size: 3rem; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 1199.98px) { body.hd-page .ab-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) {
  body.hd-page .tm-grid { grid-template-columns: repeat(2, 1fr); }
  body.hd-page .ab-faces { margin: 0 auto; }
  body.hd-page .hd-float.f1.ab-float { left: 0; }
}
@media (max-width: 575.98px) {
  body.hd-page .ab-crumb { margin-top: -10px; }
  body.hd-page .ab-faces { gap: 10px; }
  body.hd-page .ab-face:nth-child(2), body.hd-page .ab-face:nth-child(4) { transform: translateY(20px); }
  body.hd-page .ab-face figcaption { padding: 30px 10px 10px; }
  body.hd-page .ab-face figcaption b { font-size: .86rem; }
  body.hd-page .ab-face figcaption span { font-size: .68rem; }
  body.hd-page .hd-float.f1.ab-float { bottom: -40px; }
  body.hd-page .ab-values, body.hd-page .tm-grid { grid-template-columns: 1fr; }
  body.hd-page .ab-stage { padding: 20px; gap: 14px; }
  body.hd-page .ab-stage > b { flex-basis: 44px; height: 44px; font-size: 1rem; }
  body.hd-page .tm-partner { flex-direction: column; }
  body.hd-page .tm-partner .tm-photo { flex-basis: 150px; }
}

/* ---------- services (2026-10-26): service page hero card, definition, grids; services overview cards ---------- */
body.hd-page .sv-h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
body.hd-page .sv-card { padding: 26px; border-radius: 22px; background: var(--hd-card); border: 1px solid var(--hd-line); box-shadow: 0 24px 56px rgba(11, 37, 69, .1); }
body.hd-page .sv-card-top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--hd-line); }
body.hd-page .sv-card-ic { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: var(--lt-navy, #0b2545); color: #fff; font-size: 1.4rem; }
body.hd-page .sv-card-top small { display: block; color: var(--hd-muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
body.hd-page .sv-card-top b { display: block; color: var(--hd-text); font-family: var(--hd-font); font-size: 1.2rem; }
body.hd-page .sv-card-label, body.hd-page .sv-label { margin: 18px 0 10px; color: var(--hd-muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hd-page .sv-incl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.hd-page .sv-incl li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--hd-card-2); border: 1px solid var(--hd-line); color: var(--hd-text); font-weight: 600; font-size: .9rem; }
body.hd-page .sv-incl i { color: var(--hd-cyan-2); font-size: 1.1rem; }
body.hd-page .sv-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hd-line); font-size: .86rem; }
body.hd-page .sv-card-foot span { color: var(--hd-muted); }
body.hd-page .sv-card-foot span i { color: var(--hd-cyan-2); margin-right: 4px; }
body.hd-page .sv-card-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--hd-cyan-2); font-weight: 700; text-decoration: none; }
body.hd-page .sv-whos { display: flex; flex-wrap: wrap; gap: 10px; }
body.hd-page .sv-who { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--hd-card); border: 1px solid var(--hd-line); color: var(--hd-text); font-weight: 600; font-size: .9rem; }
body.hd-page .sv-who i { color: var(--hd-cyan-2); }
body.hd-page .sv-grid { grid-template-columns: repeat(3, 1fr); }
body.hd-page .sv-why { padding: 30px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .25); }
body.hd-page .sv-why .sv-label { margin-top: 0; color: #55667b; }
body.hd-page .sv-why ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
body.hd-page .sv-why li { display: flex; gap: 10px; color: #0b1b30; font-weight: 600; }
body.hd-page .sv-why li i { color: #06757e; font-size: 1.1rem; }
body.hd-page .sv-tech { margin-top: 26px; }
body.hd-page .sv-tech i { padding: 8px 14px; font-size: .88rem; }
body.hd-page .sv-inds { justify-content: flex-start; margin: 26px 0 0; }
body.hd-page .sv-inds a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
body.hd-page .sv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.hd-page .sv-stats div { padding: 24px; border-radius: 20px; background: var(--hd-card); border: 1px solid var(--hd-line); box-shadow: 0 14px 34px rgba(11, 37, 69, .08); }
body.hd-page .sv-stats b { display: block; color: var(--lt-navy, #0b2545); font-family: var(--hd-font); font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
body.hd-page .sv-stats span { display: block; margin-top: 10px; color: var(--hd-muted); font-size: .9rem; font-weight: 600; }
body.hd-page .sg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
body.hd-page .sg-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px 32px 26px; border-radius: 24px; background: var(--hd-card); border: 1px solid var(--hd-line); color: var(--hd-text); text-decoration: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
body.hd-page .sg-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hd-cyan-2); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
body.hd-page .sg-card:hover { color: var(--hd-text); transform: translateY(-4px); border-color: rgba(8, 132, 142, .45); box-shadow: 0 20px 44px rgba(11, 37, 69, .1); }
body.hd-page .sg-card:hover::before { transform: scaleY(1); }
body.hd-page .sg-top { display: flex; justify-content: space-between; align-items: flex-start; }
body.hd-page .sg-num { font-family: var(--hd-font); font-size: 3rem; font-weight: 700; line-height: .9; letter-spacing: -.05em; color: #1d98a1; }
body.hd-page .sg-top .hd-svc-ic { margin-top: 0; }
body.hd-page .sg-kicker { margin-top: 18px; color: var(--hd-muted); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hd-page .sg-card h3 { margin: 6px 0 10px; font-family: var(--hd-font); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
body.hd-page .sg-card p { margin: 0 0 18px; color: var(--hd-muted); font-size: 1rem; line-height: 1.65; }
body.hd-page .sg-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
body.hd-page .sg-card li { display: flex; gap: 8px; color: var(--hd-text); font-size: .92rem; font-weight: 600; }
body.hd-page .sg-card li i { color: var(--hd-cyan-2); }
body.hd-page .sg-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.hd-page .sg-card:last-child:nth-child(odd) ul { grid-template-columns: repeat(4, 1fr); }
body.hd-page .sg-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--hd-line); }
body.hd-page .sg-tag { color: var(--hd-muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.hd-page .sg-foot .hd-more { margin-top: 0; white-space: nowrap; }
@media (max-width: 1199.98px) { body.hd-page .sv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) { body.hd-page .sg-grid { grid-template-columns: 1fr; } body.hd-page .sg-card:last-child:nth-child(odd) ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) {
  body.hd-page .sv-grid, body.hd-page .sv-incl, body.hd-page .sg-card ul, body.hd-page .sg-card:last-child:nth-child(odd) ul { grid-template-columns: 1fr; }
  body.hd-page .sg-card { padding: 24px 22px 20px; }
  body.hd-page .sg-num { font-size: 2.4rem; }
  body.hd-page .sg-foot { flex-direction: column; align-items: flex-start; }
  body.hd-page .sv-card { padding: 20px; }
  body.hd-page .sv-stats b { font-size: 2rem; }
  body.hd-page .sv-stats div { padding: 18px; }
  body.hd-page .sv-card-foot { flex-direction: column; align-items: flex-start; }
}


/* ---------- clear, animated card icons + products grid (2026-10-27) ---------- */
body.hd-page .hd-svc-ic i, body.hd-page .hd-ind-ic i, body.hd-page .hd-trustrow i::before, body.hd-page .sv-card-ic i { display: inline-block; }
body.hd-page .hd-svc:hover .hd-svc-ic i, body.hd-page .sg-card:hover .hd-svc-ic i, body.hd-page .ab-value:hover .hd-svc-ic i, body.hd-page .hd-ind:hover .hd-ind-ic i { animation: hdIconPop .5s ease; }
body.hd-page .sv-card-ic { animation: hdFloat 5s ease-in-out infinite; }
body.hd-page .pd-grid { grid-template-columns: repeat(3, 1fr); }
body.hd-page .pd-grid .sg-card:last-child:nth-child(odd) { grid-column: auto; }
body.hd-page .pd-card h3 { font-size: 1.3rem; margin-top: 18px; }
body.hd-page .pd-card .hd-tags { margin: 0 0 20px; }
body.hd-page .pd-cat { padding: 5px 11px; border-radius: 999px; background: var(--hd-card-2); border: 1px solid var(--hd-line); color: var(--hd-cyan-2); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.hd-page .pd-card .hd-more { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
@keyframes hdIconPop { 0% { transform: scale(1); } 40% { transform: scale(1.2) rotate(-8deg); } 70% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1); } }
@media (max-width: 1199.98px) { body.hd-page .pd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { body.hd-page .pd-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body.hd-page .hd-svc-ic i, body.hd-page .hd-ind-ic i, body.hd-page .sv-card-ic { animation: none !important; } }


/* ---------- industries & portfolio (2026-10-27): screenshot collage, filters, industry cards ---------- */
body.hd-page .in-collage { position: relative; height: 430px; }
body.hd-page .in-shot { position: absolute; margin: 0; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--hd-line); box-shadow: 0 24px 56px rgba(11, 37, 69, .16); transition: transform .5s ease; }
body.hd-page .in-shot img { display: block; width: 100%; height: auto; }
body.hd-page .in-shot figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: #0b1b30; font-size: .78rem; font-weight: 700; box-shadow: 0 6px 16px rgba(11, 37, 69, .15); }
body.hd-page .in-shot figcaption i { color: var(--hd-cyan-2); }
body.hd-page .in-shot.s1 { width: 70%; left: 0; top: 0; z-index: 1; animation: hdFloat 7s ease-in-out infinite; }
body.hd-page .in-shot.s2 { width: 62%; right: 0; top: 120px; z-index: 2; animation: hdFloat 7s ease-in-out -2.3s infinite; }
body.hd-page .in-shot.s3 { width: 54%; left: 12%; top: 250px; z-index: 3; animation: hdFloat 7s ease-in-out -4.6s infinite; }
body.hd-page .in-collage:hover .in-shot.s2 { transform: translateY(-6px); }
body.hd-page .in-show { display: block; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--hd-line); box-shadow: 0 30px 70px rgba(11, 37, 69, .16); text-decoration: none; transition: transform .4s ease; }
body.hd-page .in-show:hover { transform: translateY(-4px); }
body.hd-page .in-show img { display: block; width: 100%; height: auto; }
body.hd-page .pf-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: -18px 0 30px; }
body.hd-page .pf-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--hd-line); background: var(--hd-card); color: var(--hd-text); font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .2s ease; }
body.hd-page .pf-filters button i { color: var(--hd-cyan-2); }
body.hd-page .pf-filters button span { padding: 1px 8px; border-radius: 999px; background: var(--hd-card-2); color: var(--hd-muted); font-size: .76rem; }
body.hd-page .pf-filters button:hover { border-color: var(--hd-cyan-2); }
body.hd-page .pf-filters button.active { background: var(--lt-navy, #0b2545); border-color: var(--lt-navy, #0b2545); color: #fff; }
body.hd-page .pf-filters button.active i, body.hd-page .pf-filters button.active span { color: #fff; background: rgba(255, 255, 255, .15); }
body.hd-page .pf-grid .cs-card { animation: hdFade .35s ease both; }
body.hd-page .pf-grid .cs-card.pf-hide { display: none; }
body.hd-page .in-card .sg-top { align-items: center; }
body.hd-page .in-card .hd-ind-go { position: static; font-size: 1.1rem; }
body.hd-page .in-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
body.hd-page .in-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--hd-card-2); border: 1px solid var(--hd-line); color: var(--hd-text); font-size: .8rem; font-weight: 600; }
body.hd-page .in-meta i { color: var(--hd-cyan-2); }
body.hd-page .pi-group + .pi-group { margin-top: 34px; }
body.hd-page .pi-label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-bottom: 14px; color: var(--hd-text); font-family: var(--hd-font); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
body.hd-page .pi-label i:first-child { color: var(--hd-cyan-2); }
body.hd-page .pi-label .bi-arrow-right { font-size: .9rem; color: var(--hd-muted); transition: transform .2s ease; }
body.hd-page .pi-label:hover .bi-arrow-right { transform: translateX(4px); color: var(--hd-cyan-2); }
@media (max-width: 991.98px) { body.hd-page .in-collage { height: 360px; max-width: 560px; margin: 0 auto; } body.hd-page .in-shot.s2 { top: 90px; } body.hd-page .in-shot.s3 { top: 200px; } }
@media (max-width: 575.98px) { body.hd-page .in-collage { height: 250px; } body.hd-page .in-shot.s2 { top: 60px; } body.hd-page .in-shot.s3 { top: 130px; } body.hd-page .in-shot figcaption { font-size: .68rem; padding: 4px 9px; left: 8px; bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { body.hd-page .in-shot { animation: none !important; } }


/* ---------- clients & contact (2026-10-31) ---------- */
body.hd-page .cl-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.hd-page .cl-logo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px 18px; border-radius: 18px; background: var(--hd-card); border: 1px solid var(--hd-line); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
body.hd-page .cl-logo:hover { transform: translateY(-4px); border-color: rgba(8, 132, 142, .4); box-shadow: 0 16px 36px rgba(11, 37, 69, .08); }
body.hd-page .cl-logo span { display: grid; place-items: center; width: 100%; height: 92px; padding: 10px; border-radius: 12px; background: #fff; }
body.hd-page .cl-logo span.dark { background: #0b2545; }
body.hd-page .cl-logo img { max-height: 72px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(.15); transition: filter .3s ease, transform .3s ease; }
body.hd-page .cl-logo:hover img { filter: none; transform: scale(1.05); }
body.hd-page .cl-logo figcaption { color: var(--hd-text); font-size: .86rem; font-weight: 600; text-align: center; line-height: 1.35; }
body.hd-page .ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.hd-page .ct-card { display: flex; align-items: center; gap: 14px; padding: 20px; min-height: 92px; border-radius: 18px; background: var(--hd-card); border: 1px solid var(--hd-line); color: var(--hd-text); text-decoration: none; box-shadow: 0 12px 30px rgba(11, 37, 69, .06); transition: transform .3s ease, border-color .3s ease; }
body.hd-page .ct-card:hover { color: var(--hd-text); transform: translateY(-3px); border-color: rgba(8, 132, 142, .45); }
body.hd-page .ct-card .hd-svc-ic { margin-top: 0; flex: 0 0 50px; }
body.hd-page .ct-card small { display: block; color: var(--hd-muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.hd-page .ct-card b { display: block; font-size: 1rem; word-break: break-word; }
body.hd-page .ct-card:hover .hd-svc-ic i { animation: hdIconPop .5s ease; }
body.hd-page .ct-people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.hd-page .ct-people > div { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--hd-line); }
body.hd-page .ct-people b { display: block; color: var(--hd-text); font-size: .92rem; margin-bottom: 4px; }
body.hd-page .ct-people a { display: inline-flex; align-items: center; min-height: 40px; color: var(--hd-cyan-2); font-weight: 600; text-decoration: none; word-break: break-all; }
body.hd-page .ct-steps { grid-template-columns: repeat(3, 1fr); display: grid; }
@media (max-width: 991.98px) { body.hd-page .cl-wall { grid-template-columns: repeat(3, 1fr); } body.hd-page .ct-steps { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { body.hd-page .cl-wall { grid-template-columns: 1fr 1fr; gap: 10px; } body.hd-page .cl-logo span { height: 72px; } body.hd-page .ct-cards, body.hd-page .ct-people { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
body.hd-page .hd-faq { border-top: 1px solid var(--hd-line); }
body.hd-page .hd-faq-item { border-bottom: 1px solid var(--hd-line); }
body.hd-page .hd-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; color: #fff; font-family: var(--hd-font); font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; transition: color .2s ease; }
body.hd-page .hd-faq-item summary::-webkit-details-marker { display: none; }
body.hd-page .hd-faq-item summary:hover { color: var(--hd-cyan-2); }
body.hd-page .hd-faq-item summary i { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: var(--hd-cyan-2); transition: transform .3s ease, background .3s ease; }
body.hd-page .hd-faq-item[open] summary i { transform: rotate(45deg); background: rgba(1, 182, 193, .14); border-color: rgba(1, 182, 193, .5); }
body.hd-page .hd-faq-item p { margin: 0; padding: 0 56px 24px 0; color: var(--hd-muted); line-height: 1.75; animation: hdFade .35s ease; }
body.hd-page #faq .hd-btn { margin-top: 30px; }
body.hd-page #faq .hd-sub { margin-top: 18px; }

/* ---------- let's talk ---------- */
body.hd-page #lets-talk { padding-top: 40px; padding-bottom: 90px; }
body.hd-page .hd-cta { position: relative; overflow: hidden; padding: 64px; border-radius: 32px; color: #fff; background: linear-gradient(120deg, #00295f 0%, #034a74 55%, #04606f 100%); box-shadow: 0 40px 90px rgba(1, 182, 193, .18); }
body.hd-page .hd-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; }
body.hd-page .hd-cta-word { position: absolute; right: -10px; bottom: -64px; font-family: var(--hd-font); font-weight: 700; font-size: clamp(7rem, 16vw, 14rem); line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14); pointer-events: none; }
body.hd-page .hd-cta .hd-sub { color: rgba(255, 255, 255, .92); margin-top: 18px; max-width: 540px; }
body.hd-page .hd-cta-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 28px 0 0; }
body.hd-page .hd-cta-checks li { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: .92rem; font-weight: 600; }
body.hd-page .hd-talk { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
body.hd-page .hd-talk li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(4, 18, 31, .32); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .3s ease, background .3s ease; }
body.hd-page .hd-talk li:hover { transform: translateX(6px); background: rgba(4, 18, 31, .45); }
body.hd-page .hd-talk b { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--hd-navy); font-family: var(--hd-font); font-weight: 700; }
body.hd-page .hd-talk strong { display: block; color: #fff; font-size: 1rem; }
body.hd-page .hd-talk span { color: rgba(255, 255, 255, .88); font-size: .9rem; }

/* ---------- footer on the dark home ---------- */
body.hd-page .site-footer { background: #030a15 !important; color: var(--hd-text); border-top: 1px solid var(--hd-line); }
body.hd-page .footer-cta { display: none !important; }        /* the page ends with its own "Let's talk" panel */
body.hd-page .site-footer { padding-top: 0 !important; }
body.hd-page .site-footer .row.g-5 { padding-top: 64px !important; }
body.hd-page .footer-logo img { display: none; }
body.hd-page .footer-logo .logo-on-dark { display: block; }
body.hd-page .site-footer .footer-title { color: #fff; }
body.hd-page .footer-copy, body.hd-page .footer-links a, body.hd-page .footer-contact li,
body.hd-page .footer-contact a, body.hd-page .footer-contact span, body.hd-page .footer-bottom p { color: rgba(238, 243, 250, .6) !important; }
body.hd-page .footer-links a:hover, body.hd-page .footer-contact a:hover { color: var(--hd-cyan-2) !important; }
body.hd-page .footer-contact i, body.hd-page .footer-bottom span { color: var(--hd-cyan-2) !important; }
body.hd-page .footer-bottom { border-top-color: var(--hd-line) !important; }
body.hd-page .social-links a { border-color: rgba(255, 255, 255, .14) !important; color: rgba(238, 243, 250, .8) !important; background: rgba(255, 255, 255, .04) !important; }
body.hd-page .social-links a:hover { background: var(--hd-cyan) !important; color: var(--hd-ink) !important; border-color: var(--hd-cyan) !important; }

/* ---------- animations ---------- */
@keyframes hdPing { 0%, 100% { box-shadow: 0 0 0 3px rgba(1, 182, 193, .22); } 50% { box-shadow: 0 0 0 7px rgba(1, 182, 193, 0); } }
@keyframes hdDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.12); } }
@keyframes hdBeam { 0%, 100% { opacity: 0; transform: translateX(-120px) rotate(28deg); } 50% { opacity: .45; transform: translateX(160px) rotate(28deg); } }
@keyframes hdCaret { 50% { opacity: 0; } }
@keyframes hdSpin { to { transform: rotate(360deg); } }
@keyframes hdDash { to { stroke-dashoffset: -24; } }
@keyframes hdCore { 0%, 100% { box-shadow: 0 0 0 10px rgba(1, 182, 193, .06), 0 0 60px rgba(1, 182, 193, .28); } 50% { box-shadow: 0 0 0 18px rgba(1, 182, 193, .03), 0 0 100px rgba(1, 182, 193, .45); } }
@keyframes hdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hdFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hdDots { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes hdMarquee { to { transform: translateX(-50%); } }
@keyframes hdRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes hdGrow { from { transform: scaleY(0); } }
@keyframes hdSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes hdPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
@keyframes hdFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  body.hd-page .hd-svc-grid, body.hd-page .hd-prod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  body.hd-page .hd-sec { padding: 84px 0; }
  body.hd-page .hd-hero { padding-top: 150px; }
  body.hd-page .hd-head { grid-template-columns: 1fr; margin-bottom: 40px; }
  body.hd-page .hd-dash-wrap { max-width: 640px; margin: 0 auto; }
  body.hd-page .hd-dash, body.hd-page .hd-dash-wrap:hover .hd-dash { transform: none; }
  body.hd-page .hd-steps, body.hd-page .hd-ind-grid { grid-template-columns: repeat(2, 1fr); }
  body.hd-page .hd-geo { grid-template-columns: repeat(2, 1fr); }
  body.hd-page .hd-cta { padding: 44px 32px; }
}
@media (max-width: 767.98px) {
  body.hd-page .hd-trust { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  body.hd-page .hd-trust p { flex: none; text-align: center; }
  body.hd-page .hd-stats { grid-template-columns: repeat(2, 1fr); margin-left: 0; }
  body.hd-page .hd-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  body.hd-page .hd-stats div:nth-child(n+3) { border-top: 1px solid #d5e4ec; }
  body.hd-page .hd-text, body.hd-page .hd-light .hd-btn-line { margin-left: 0; }
  body.hd-page .hd-text { padding-left: 0; }
  body.hd-page .hd-table th, body.hd-page .hd-table td { padding: 13px 8px; font-size: .84rem; }
  body.hd-page .hd-table thead th { font-size: .6rem; letter-spacing: .06em; }
  body.hd-page .hd-table tbody th { padding-left: 16px; }
  body.hd-page .hd-y, body.hd-page .hd-s, body.hd-page .hd-n { width: 26px; height: 26px; font-size: .8rem; }
}
@media (max-width: 575.98px) {
  body.hd-page main .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2.25rem; }
  body.hd-page .hd-sec { padding: 70px 0; }
  body.hd-page .hd-hero { padding-top: 132px; }
  body.hd-page .hd-kicker { font-size: .64rem; letter-spacing: .12em; padding: 8px 14px 8px 12px; }
  body.hd-page .hd-h1-main { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  body.hd-page .hd-lead { font-size: 1.02rem; }
  body.hd-page .hd-actions .hd-btn { flex: 1 1 100%; }
  body.hd-page .hd-dash-body { grid-template-columns: 1fr; }
  body.hd-page .hd-dash-side, body.hd-page .hd-dash-search, body.hd-page .hd-feed { display: none; }
  body.hd-page .hd-dash-main { padding: 14px; }
  body.hd-page .hd-dash-grid { grid-template-columns: 1fr; }
  body.hd-page .hd-kpis { gap: 7px; }
  body.hd-page .hd-kpi { padding: 10px; }
  body.hd-page .hd-kpi small { font-size: .62rem; }
  body.hd-page .hd-kpi b { font-size: 1.12rem; }
  body.hd-page .hd-bars { height: 130px; }
  body.hd-page .hd-float.f1 { right: 4px; top: -22px; padding: 8px 12px 8px 8px; }
  body.hd-page .hd-dash-wrap { padding-top: 40px; }
  body.hd-page .hd-dash-title { padding-right: 0; }
  body.hd-page .hd-kpi .wk { display: none; }
  body.hd-page .hd-type-line { white-space: normal; }
  body.hd-page .hd-float-ic { flex-basis: 32px; height: 32px; }
  body.hd-page .hd-float b { font-size: .8rem; }
  body.hd-page .hd-float.f2 { left: 4px; bottom: 6px; font-size: .76rem; padding: 8px 12px; }
  body.hd-page .hd-svc-grid, body.hd-page .hd-prod-grid, body.hd-page .hd-steps, body.hd-page .hd-geo { grid-template-columns: 1fr; }
  body.hd-page .hd-svc { min-height: 0; }
  body.hd-page .hd-ind-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.hd-page .hd-ind { padding: 18px; gap: 16px; }
  body.hd-page .hd-ind b { font-size: .92rem; }
  body.hd-page .hd-ind-go { top: 16px; right: 16px; }
  body.hd-page .hd-cta { padding: 38px 22px; border-radius: 24px; }
  body.hd-page .hd-faq-item p { padding-right: 0; }
  body.hd-page .hd-faq-item summary { font-size: 1.02rem; }
  body.hd-page .ds-ticker { margin: 14px -4% 10px; }
}
@media (max-width: 420px) {
  body.hd-page .hd-table { table-layout: fixed; }
  body.hd-page .hd-table thead th:first-child { width: 40%; }
  body.hd-page .hd-table th, body.hd-page .hd-table td { padding: 11px 4px; }
  body.hd-page .hd-table thead th { font-size: .56rem; letter-spacing: .03em; overflow-wrap: anywhere; }
  body.hd-page .hd-table thead th.hd-us small { font-size: .52rem; letter-spacing: .02em; }
  body.hd-page .hd-table tbody th { padding-left: 12px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.hd-page .hd-bars span, body.hd-page .hd-float, body.hd-page .hd-feed-list li, body.hd-page .hd-logos-track,
  body.hd-page .hd-geo-card b::after, body.hd-page .hd-type::after, body.hd-page .hd-live i, body.hd-page .hd-dot-ok { animation: none !important; }
  body.hd-page .hd-dash { transform: none !important; }
}

/* ---------- booking page (2026-11-02): calendar straight after the headline on phones ---------- */
body.hd-page .bk-hero { padding-bottom: 72px; }
body.hd-page .bk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro cal" "cover cal"; grid-template-rows: auto 1fr; gap: 28px 48px; align-items: start; margin-top: 8px; }
body.hd-page .bk-intro { grid-area: intro; }
body.hd-page .bk-intro .hd-h1-main { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
body.hd-page .bk-cover { grid-area: cover; padding: 24px; border-radius: 20px; background: var(--hd-card); border: 1px solid var(--hd-line); }
body.hd-page .bk-cover h2 { margin: 0 0 14px; font-family: var(--hd-font); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--hd-text); }
body.hd-page .bk-cover ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body.hd-page .bk-cover li { display: flex; gap: 12px; align-items: flex-start; color: var(--hd-muted); font-size: .93rem; line-height: 1.5; }
body.hd-page .bk-cover li > i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(1, 182, 193, .12); color: var(--hd-cyan-2); font-size: 1rem; }
body.hd-page .bk-cover strong { display: block; color: var(--hd-text); font-size: .95rem; }
body.hd-page .bk-cal { grid-area: cal; scroll-margin-top: 96px; overflow: hidden; border-radius: 22px; background: #fff; color: #0b1b30; border: 1px solid var(--hd-line); box-shadow: 0 2px 4px rgba(11, 37, 69, .05), 0 24px 54px rgba(11, 37, 69, .12); }
body.hd-page .bk-cal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e3e9f0; }
body.hd-page .bk-cal-head h2 { margin: 0; font-family: var(--hd-font); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; color: #0b1b30; }
body.hd-page .bk-cal-head p { margin: 0; color: #55667b; font-size: .86rem; }
body.hd-page .bk-cal-ic { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #06757e; color: #fff; font-size: 1.15rem; }
body.hd-page .bk-frame { position: relative; background: #fff; }
body.hd-page .bk-frame .calendly-inline-widget { position: relative; z-index: 1; }
body.hd-page .bk-frame .calendly-spinner { display: none; }
body.hd-page .bk-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding-top: 120px; color: #55667b; font-size: .92rem; }
body.hd-page .bk-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #d7e4ea; border-top-color: #06757e; animation: bkSpin .8s linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
body.hd-page .bk-alt { padding: 14px 20px 16px; border-top: 1px solid #e3e9f0; color: #55667b; font-size: .88rem; text-align: center; }
body.hd-page .bk-alt p { margin: 0; }
body.hd-page .bk-alt a { color: #06757e; font-weight: 600; }
body.hd-page .bk-alt p a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
body.hd-page .bk-alt-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0; }
body.hd-page .bk-alt-btns a { flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 11px; border: 1px solid #cfdbe5; color: #0b2545; text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background .2s ease; }
body.hd-page .bk-alt-btns a:hover { border-color: #06757e; background: #eef8f8; }
body.hd-page .bk-alt .bk-legal { font-size: .8rem; }
body.hd-page .bk-logos-wrap { margin-top: 44px; text-align: center; }
body.hd-page .bk-logos-wrap > p { margin: 0 0 16px; color: var(--hd-muted); font-size: .9rem; font-weight: 600; }
body.hd-page .bk-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
body.hd-page .bk-logos span { display: grid; place-items: center; height: 76px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid #e3e9f0; }
body.hd-page .bk-logos img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
body.hd-page .bk-logos-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--hd-cyan-2); font-weight: 600; font-size: .92rem; }
@media (max-width: 991.98px) {
  body.hd-page .bk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "cal" "cover"; grid-template-rows: none; gap: 22px; }
  body.hd-page .bk-hero { padding-bottom: 44px; }
  body.hd-page .bk-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  body.hd-page .bk-hero .ab-crumb { display: none; }
  body.hd-page .bk-hero { padding-top: 136px; }
  body.hd-page .bk-intro .hd-lead { font-size: 1rem; line-height: 1.6; margin-top: 12px; }
  body.hd-page .bk-intro .hd-proof { gap: 6px 14px; margin-top: 14px; font-size: .86rem; }
  body.hd-page .bk-cal-head { padding: 14px 16px; }
  body.hd-page .bk-alt { padding: 12px 14px 14px; }
  body.hd-page .bk-alt p a { min-height: 44px; }
  body.hd-page .bk-cover { padding: 20px 18px; }
  body.hd-page .bk-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { body.hd-page .bk-spin { animation: none; } }

/* ---------- privacy policy and terms (2026-11-02) ---------- */
body.hd-page .lg-hero { padding-bottom: 12px; }
body.hd-page .lg-hero + .hd-sec { padding-top: 36px; }
body.hd-page .lg-hero .hd-h1-main { font-size: clamp(2.3rem, 5vw, 3.6rem); }
body.hd-page .lg-hero .hd-lead { max-width: 720px; }
body.hd-page .lg-date { margin: 14px 0 0; color: var(--hd-muted); font-size: .9rem; font-weight: 600; }
body.hd-page .lg-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 56px; align-items: start; }
body.hd-page .lg-toc { position: sticky; top: 104px; padding: 20px 22px; border-radius: 18px; background: var(--hd-card); border: 1px solid var(--hd-line); }
body.hd-page .lg-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 32px; color: var(--hd-text); font-size: .95rem; font-weight: 700; cursor: pointer; list-style: none; }
body.hd-page .lg-toc summary::-webkit-details-marker { display: none; }
body.hd-page .lg-toc summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .8rem; font-weight: 400; transition: transform .2s ease; }
body.hd-page .lg-toc[open] summary::after { transform: rotate(180deg); }
body.hd-page .lg-toc ol { margin-top: 8px !important; }
body.hd-page .lg-toc ol { margin: 0; padding: 0; list-style: none; }
body.hd-page .lg-toc a { display: flex; align-items: center; min-height: 36px; color: var(--hd-muted); font-size: .9rem; line-height: 1.35; text-decoration: none; }
body.hd-page .lg-toc a:hover { color: var(--hd-cyan-2); }
body.hd-page .lg-body { max-width: 780px; color: var(--hd-text); }
body.hd-page .lg-body h2 { margin-top: 2.4rem; font-family: var(--hd-font); font-weight: 700; letter-spacing: -.02em; color: var(--hd-text); scroll-margin-top: 104px; }
body.hd-page .lg-body h2:first-child { margin-top: 0; }
body.hd-page .lg-body h3 { font-family: var(--hd-font); font-size: 1.12rem; font-weight: 700; color: var(--hd-text); }
body.hd-page .lg-body p, body.hd-page .lg-body li { color: var(--hd-muted); font-size: 1rem; line-height: 1.75; }
body.hd-page .lg-body strong { color: var(--hd-text); }
body.hd-page .lg-body a { color: var(--hd-cyan-2); }
@media (max-width: 991.98px) {
  body.hd-page .lg-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.hd-page .lg-toc { position: static; padding: 8px 18px; }
  body.hd-page .lg-toc summary { min-height: 44px; }
  body.hd-page .lg-toc a { min-height: 44px; }
}