/* ==========================================================================
   HatchDesk theme v1 ("Bold Gradient")
   Scoped to elements inside `.hd` so Bootstrap 3 / site.css pages are unaffected.
   Units are px on purpose: the site sets html { font-size: 10px }.
   ========================================================================== */

:root {
    --hd-brand: #0F75BD;
    --hd-indigo: #4F46E5;
    --hd-cyan: #06B6D4;
    --hd-lime: #C6F432;
    --hd-ink: #0B1020;
    --hd-paper: #F5F6FA;
    --hd-text: #475569;
    --hd-muted: #94A3B8;
    --hd-line: rgba(11, 16, 32, .10);
    --hd-display: "Sora", "Segoe UI", sans-serif;
    --hd-body: "Inter", "Segoe UI", sans-serif;
    --hd-mono: "JetBrains Mono", Consolas, monospace;
    --hd-ease: cubic-bezier(.2, .7, .2, 1);
    --hd-grad: radial-gradient(60% 80% at 85% 10%, rgba(6, 182, 212, .9) 0%, transparent 60%),
               radial-gradient(50% 70% at 10% 90%, rgba(79, 70, 229, .95) 0%, transparent 60%),
               linear-gradient(135deg, #0F75BD 0%, #2B4DD6 55%, #4F46E5 100%);
}

/* ---------- scoped reset (beats Bootstrap 3 element styles) ---------- */
.hd { font-family: var(--hd-body); color: var(--hd-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.hd *, .hd *::before, .hd *::after { box-sizing: border-box; }
.hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd p, .hd ul, .hd ol, .hd li, .hd figure, .hd blockquote, .hd pre {
    margin: 0; padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; font-family: inherit;
}
.hd ul, .hd ol { list-style: none; }
.hd a { color: inherit; text-decoration: none; }
.hd a:hover, .hd a:focus { color: inherit; text-decoration: none; }
.hd a:focus-visible, .hd button:focus-visible { outline: 2px solid var(--hd-lime); outline-offset: 3px; border-radius: 8px; }
.hd img { max-width: 100%; vertical-align: middle; }
.hd button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }

.hd .hd-wrap { max-width: 1152px; margin: 0 auto; padding: 0 20px; }
.hd .hd-display { font-family: var(--hd-display); }
.hd .hd-mono { font-family: var(--hd-mono); }
.hd .hd-dot { color: var(--hd-brand); }
.hd .hd-dot-lime { color: var(--hd-lime); }
.hd .hd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.hd .hd-btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; font-family: var(--hd-display); font-weight: 700; font-size: 16px; transition: background-color .25s, color .25s, transform .25s; }
.hd .hd-btn-white { background: #fff; color: var(--hd-ink); padding: 8px 8px 8px 28px; }
.hd .hd-btn-white .hd-btn-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--hd-ink); color: #fff; transition: transform .3s var(--hd-ease); }
.hd .hd-btn-white:hover .hd-btn-icon { transform: rotate(45deg); }
.hd .hd-btn-ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; padding: 16px 28px; }
.hd .hd-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hd .hd-arrow-45 { transform: rotate(-45deg); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
/* translucent pill over the page header; scrolls away with the page (not sticky) */
.hd.hd-header { position: absolute; top: 0; left: 0; right: 0; z-index: 1040; padding: 16px 16px 0; }
.hd .hd-pill {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    max-width: 1152px; height: 64px; margin: 0 auto; padding: 0 8px 0 24px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.hd .hd-logo img { height: 32px; width: auto; }

.hd .hd-nav { display: none; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.hd .hd-nav-link { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; transition: background-color .2s, color .2s; }
.hd .hd-nav-link:hover, .hd .hd-has-menu:focus-within > .hd-nav-link { background: rgba(255, 255, 255, .1); color: #fff; }
.hd .hd-nav-link.is-active { color: #fff; }
.hd .hd-nav-link.is-active::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: var(--hd-lime); }
.hd .hd-nav-link .fa-chevron-down { font-size: 9px; transition: transform .2s; }
.hd .hd-has-menu { position: relative; }
.hd .hd-has-menu:hover > .hd-nav-link .fa-chevron-down, .hd .hd-has-menu:focus-within > .hd-nav-link .fa-chevron-down { transform: rotate(180deg); }

.hd .hd-menu { position: absolute; top: 100%; left: 50%; padding-top: 16px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s, visibility .2s; }
.hd .hd-menu.hd-menu-right { left: auto; right: 0; transform: translateY(8px); }
.hd .hd-has-menu:hover > .hd-menu, .hd .hd-has-menu:focus-within > .hd-menu, .hd .hd-has-menu.is-open > .hd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hd .hd-has-menu:hover > .hd-menu.hd-menu-right, .hd .hd-has-menu:focus-within > .hd-menu.hd-menu-right, .hd .hd-has-menu.is-open > .hd-menu.hd-menu-right { transform: none; }
.hd .hd-menu-panel { background: #fff; border: 1px solid rgba(11, 16, 32, .05); border-radius: 24px; padding: 12px; box-shadow: 0 30px 60px -15px rgba(11, 16, 32, .3); }
.hd .hd-menu-item { display: flex; gap: 12px; align-items: center; border-radius: 16px; transition: background-color .2s; }
.hd .hd-menu-item:hover { background: var(--hd-paper); }
.hd .hd-menu-more { width: 240px; padding: 8px; }
.hd .hd-menu-more .hd-menu-item { padding: 10px 12px; font-size: 14px; color: var(--hd-ink); }
.hd .hd-menu-more .hd-menu-item i { width: 16px; color: var(--hd-brand); }

/* ---------- mega menus (Services / Hire Developers) ---------- */
/* anchored to the centre of the nav pill so wide panels never overflow the viewport */
.hd .hd-has-menu.hd-mega { position: static; }
.hd .hd-mega > .hd-menu { top: calc(100% - 14px); padding-top: 26px; }
.hd .hd-mm { position: relative; background: #fff; border-radius: 24px; box-shadow: 0 40px 80px -20px rgba(11,16,32,.45), 0 0 0 1px rgba(11,16,32,.06); overflow: hidden; }
.hd .hd-mm::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--hd-brand),var(--hd-indigo),var(--hd-cyan),var(--hd-lime)); }
.hd .hd-mm-label { display:flex; align-items:center; gap:10px; font-family:var(--hd-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; }
.hd .hd-mm-label::after { content:""; flex:1; height:1px; background:rgba(11,16,32,.08); }

/* services */
.hd .hd-mm-services { width: 920px; display:grid; grid-template-columns: minmax(0,1fr) 250px; }
.hd .hd-mm-main { padding: 22px 18px 14px 22px; }
.hd .hd-mm-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 8px; margin-top:12px; }
.hd .hd-mm-item { position:relative; display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:16px; transition: background-color .25s, transform .25s var(--hd-ease); }
.hd .hd-mm-item:hover { background:var(--hd-paper); transform: translateX(3px); }
.hd .hd-mm-ic { position:relative; display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:14px; font-size:17px; color:var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: all .3s var(--hd-ease); }
.hd .hd-mm-item:hover .hd-mm-ic { color:#fff; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 10px 20px -8px var(--c); transform: rotate(-6deg) scale(1.05); }
.hd .hd-mm-txt { min-width:0; flex:1; }
.hd .hd-mm-t { display:flex; align-items:center; gap:8px; font-family:var(--hd-display); font-size:14px; font-weight:600; color:var(--hd-ink); line-height:1.3; }
.hd .hd-mm-t .go { font-size:10px; color:var(--hd-brand); opacity:0; transform:translateX(-6px); transition: all .25s var(--hd-ease); }
.hd .hd-mm-item:hover .hd-mm-t .go { opacity:1; transform:none; }
.hd .hd-mm-d { display:block; margin-top:2px; font-size:12.5px; color:#64748B; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd .hd-mm-badge { padding:2px 7px; border-radius:999px; background:var(--hd-lime); font-family:var(--hd-body); font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--hd-ink); }
.hd .hd-mm-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; padding:12px 12px 0; border-top:1px solid rgba(11,16,32,.06); font-size:12.5px; color:#64748B; }
.hd .hd-mm-foot b { color:var(--hd-ink); font-weight:700; }
.hd .hd-mm-foot a { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--hd-brand); }
.hd .hd-mm-foot a:hover { color:var(--hd-indigo); }

.hd .hd-mm-feature { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:16px; padding:24px 22px; background: var(--hd-ink); color:#CBD5E1; overflow:hidden; }
.hd .hd-mm-feature::after { content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:999px; background:radial-gradient(circle, rgba(79,70,229,.55), transparent 70%); }
.hd .hd-mm-feature > * { position:relative; z-index:1; }
.hd .hd-mm-feature .k { font-family:var(--hd-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hd-lime); }
.hd .hd-mm-feature h4, .hd .hd-mm-feature p.hd-mm-feature-title { margin-top:10px; font-family:var(--hd-display); font-size:20px; font-weight:700; line-height:1.25; color:#fff; }
.hd .hd-mm-feature p { margin-top:8px; font-size:13px; line-height:1.5; }
.hd .hd-mm-chat { display:grid; gap:6px; font-family:var(--hd-mono); font-size:11px; }
.hd .hd-mm-chat span { padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.06); color:#E2E8F0; }
.hd .hd-mm-chat span.ok { background:rgba(198,244,50,.12); color:var(--hd-lime); }
.hd .hd-mm-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:999px; background:var(--hd-lime); font-family:var(--hd-display); font-size:13px; font-weight:700; color:var(--hd-ink); transition: transform .25s var(--hd-ease); }
.hd .hd-mm-cta:hover { color:var(--hd-ink); transform: translateY(-2px); }

/* developers */
.hd .hd-mm-dev { width: 640px; }
.hd .hd-mm-dev .hd-mm-main { padding: 22px 18px 18px 22px; }
.hd .hd-mm-stack { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.hd .hd-mm-stack i { padding:2px 8px; border-radius:999px; background:var(--hd-paper); font-style:normal; font-size:11px; font-weight:500; color:#475569; transition: background-color .25s; }
.hd .hd-mm-item:hover .hd-mm-stack i { background:#fff; }
.hd .hd-mm-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; background: var(--hd-grad); color:#fff; }
.hd .hd-mm-bar b { display:block; font-family:var(--hd-display); font-size:15px; color:#fff; }
.hd .hd-mm-bar small { font-size:12px; color:rgba(255,255,255,.8); }
.hd .hd-mm-models { display:flex; gap:6px; margin-top:6px; }
.hd .hd-mm-models span { padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.16); font-size:11px; font-weight:600; }

/* entrance: panel + staggered items */
.hd .hd-has-menu:hover .hd-mm-item, .hd .hd-has-menu:focus-within .hd-mm-item { animation: hd-mm-in .4s var(--hd-ease) both; }
.hd .hd-mm-item:nth-child(2){animation-delay:.03s} .hd .hd-mm-item:nth-child(3){animation-delay:.06s} .hd .hd-mm-item:nth-child(4){animation-delay:.09s}
.hd .hd-mm-item:nth-child(5){animation-delay:.12s} .hd .hd-mm-item:nth-child(6){animation-delay:.15s} .hd .hd-mm-item:nth-child(7){animation-delay:.18s} .hd .hd-mm-item:nth-child(8){animation-delay:.21s}
@keyframes hd-mm-in { from { opacity:0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hd .hd-mm-item { animation:none !important; } }


.hd .hd-nav-actions { display: flex; align-items: center; gap: 8px; }
.hd .hd-phone { display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.hd .hd-phone:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hd .hd-phone span { font-size: 12px; color: var(--hd-lime); }
.hd .hd-talk { display: none; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--hd-lime); color: var(--hd-ink); font-family: var(--hd-display); font-size: 14px; font-weight: 700; transition: transform .25s var(--hd-ease); }
.hd .hd-talk:hover { color: var(--hd-ink); transform: scale(1.05); }
.hd .hd-burger { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; }

.hd .hd-mobile { display: none; max-width: 1152px; margin: 8px auto 0; padding: 24px; background: var(--hd-ink); border-radius: 24px; box-shadow: 0 30px 60px -15px rgba(11, 16, 32, .5); max-height: calc(100vh - 110px); overflow-y: auto; color: #fff; }
.hd .hd-mobile.is-open { display: block; }
.hd .hd-mobile-link { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; font-family: var(--hd-display); font-size: 22px; font-weight: 600; color: #fff; }
.hd .hd-mobile-link:hover { color: var(--hd-lime); }
.hd .hd-mobile-sub { padding: 0 0 8px 12px; display: none; }
.hd .hd-mobile-sub.is-open { display: block; }
.hd .hd-mobile-sub a { display: block; padding: 8px 4px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.hd .hd-mobile-sub a:hover { color: #fff; }
.hd .hd-mobile-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.hd .hd-mobile-calls a { white-space: nowrap; padding: 12px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); text-align: center; font-size: 14px; font-weight: 600; color: #fff; }
.hd .hd-mobile-cta { display: block; margin-top: 12px; padding: 16px; border-radius: 999px; background: var(--hd-lime); text-align: center; font-family: var(--hd-display); font-weight: 700; color: var(--hd-ink); }
.hd .hd-mobile-cta:hover { color: var(--hd-ink); }

/* reserves the old in-flow navbar height so inner page headers keep their layout */
.hd-nav-spacer { height: 96px; }

@media (min-width: 640px) {
    .hd .hd-talk { display: inline-flex; }
}
@media (min-width: 1100px) {
    .hd .hd-nav { display: flex; }
    .hd .hd-burger, .hd .hd-mobile, .hd .hd-mobile.is-open { display: none; }
}
@media (min-width: 1280px) {
    .hd .hd-phone { display: flex; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.hd.hd-home { background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }

/* ---------- hero ---------- */
.hd .hd-hero-outer { padding: 8px; }
.hd .hd-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 136px 20px 40px; background: var(--hd-grad); }
.hd .hd-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hd .hd-ring { position: absolute; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); pointer-events: none; }
.hd .hd-ring-1 { right: -128px; top: 96px; width: 520px; height: 520px; }
.hd .hd-ring-2 { right: -40px; top: 192px; width: 360px; height: 360px; }
.hd .hd-hero-inner { position: relative; z-index: 1; }
.hd .hd-hero-grid { display: grid; gap: 56px; align-items: center; }
.hd .hd-hero-grid > * { min-width: 0; }
.hd .hd-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .8); }
.hd .hd-eyebrow::before { content: ""; width: 40px; height: 1px; background: rgba(255, 255, 255, .6); }
.hd .hd-h1 { margin-top: 24px; font-family: var(--hd-display); font-size: 44px; font-weight: 800; line-height: .98; letter-spacing: -.02em; color: #fff; }
.hd .hd-h1-wrap > .hd-h1 { display: block; }
.hd .hd-rotator { display: inline-grid; color: var(--hd-lime); }
.hd .hd-rotator > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(40%); transition: opacity .5s, transform .5s var(--hd-ease); }
.hd .hd-rotator > span.is-on { opacity: 1; transform: none; }
.hd .hd-rotator > span.is-out { transform: translateY(-40%); }
.hd .hd-lead { margin-top: 32px; max-width: 520px; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .85); }
.hd .hd-hero-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }

/* code editor visual */
.hd .hd-visual { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 40px 0 80px; }
.hd .hd-glow { position: absolute; border-radius: 999px; filter: blur(64px); pointer-events: none; }
.hd .hd-glow-lime { left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); background: rgba(198, 244, 50, .3); }
.hd .hd-glow-cyan { right: 0; top: 0; width: 224px; height: 224px; background: rgba(6, 182, 212, .4); }
.hd .hd-editor { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(11, 16, 32, .86); box-shadow: 0 40px 80px -20px rgba(11, 16, 32, .7);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); transition: transform .8s var(--hd-ease); }
.hd .hd-editor:hover { transform: none; }
.hd .hd-editor-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hd .hd-editor-bar i.dot { width: 12px; height: 12px; border-radius: 999px; }
.hd .hd-tabs { display: flex; gap: 4px; margin-left: 16px; font-family: var(--hd-mono); font-size: 11px; }
.hd .hd-tabs span { padding: 4px 12px; border-radius: 6px; color: rgba(255, 255, 255, .4); }
.hd .hd-tabs span.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
.hd .hd-code { display: block; overflow: hidden; white-space: pre; padding: 20px; font-family: var(--hd-mono); font-size: 12.5px; line-height: 1.85; color: #CBD5E1; }
.hd .hd-code .ln { display: inline-block; width: 1.9em; margin-right: 1em; text-align: right; color: rgba(255, 255, 255, .22); user-select: none; }
.hd .hd-code .k { color: #F472B6; } .hd .hd-code .s { color: var(--hd-lime); } .hd .hd-code .t { color: #67E8F9; }
.hd .hd-code .f { color: #A5B4FC; } .hd .hd-code .b { color: #FCD34D; } .hd .hd-code .c { color: #64748B; } .hd .hd-code .w { color: #fff; }
.hd .hd-caret { color: var(--hd-lime); animation: hd-blink 1s steps(1) infinite; }
.hd .hd-editor-foot { display: flex; justify-content: space-between; padding: 8px 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-family: var(--hd-mono); font-size: 10.5px; color: rgba(255, 255, 255, .4); }
.hd .hd-editor-foot .ok { color: #6EE7B7; }

.hd .hd-float { position: absolute; z-index: 2; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(11, 16, 32, .45); }
.hd .hd-float-deploy { right: -8px; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .96); animation: hd-bob 6s ease-in-out infinite; }
.hd .hd-float-deploy .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: #10B981; color: #fff; font-size: 13px; }
.hd .hd-float b { display: block; font-family: var(--hd-display); font-size: 14px; color: var(--hd-ink); line-height: 1.3; }
.hd .hd-float small { font-size: 12px; color: #64748B; }
.hd .hd-float-api { left: -8px; bottom: -8px; display: none; width: 208px; padding: 16px; background: rgba(255, 255, 255, .96); animation: hd-bob 7s ease-in-out -2s infinite; }
.hd .hd-float-api .row1 { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #64748B; }
.hd .hd-float-api .delta { padding: 2px 8px; border-radius: 999px; background: #ECFDF5; color: #059669; font-size: 10px; font-weight: 700; }
.hd .hd-float-api .val { margin-top: 2px; font-family: var(--hd-display); font-size: 24px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-float-api .val small { font-size: 13px; color: var(--hd-muted); }
.hd .hd-spark { stroke-dasharray: 200; stroke-dashoffset: 200; animation: hd-draw 2.2s .6s ease-out forwards; }
.hd .hd-float-ai { right: 0; bottom: 8px; display: flex; align-items: flex-start; gap: 10px; max-width: 232px; padding: 14px; border-bottom-right-radius: 4px; background: var(--hd-lime); color: var(--hd-ink); font-size: 13px; line-height: 1.4; animation: hd-bob 6.5s ease-in-out -4s infinite; }
.hd .hd-float-ai .ic { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--hd-ink); color: var(--hd-lime); font-size: 12px; }
.hd .hd-float-ai b { font-size: 13px; }
.hd .hd-typing { display: inline-flex; gap: 2px; margin-left: 2px; vertical-align: middle; }
.hd .hd-typing i { width: 4px; height: 4px; border-radius: 999px; background: var(--hd-ink); animation: hd-dot 1.2s infinite; }
.hd .hd-typing i:nth-child(2) { animation-delay: .2s; } .hd .hd-typing i:nth-child(3) { animation-delay: .4s; }

/* stats strip */
.hd .hd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 64px; overflow: hidden; border-radius: 24px; background: rgba(255, 255, 255, .15); }
.hd .hd-stat { padding: 24px; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hd .hd-stat strong { display: block; font-family: var(--hd-display); font-size: 36px; font-weight: 700; line-height: 1.2; color: #fff; }
.hd .hd-stat strong.lime { color: var(--hd-lime); }
.hd .hd-stat span { font-size: 14px; color: rgba(255, 255, 255, .7); }

/* ---------- marquees ---------- */
.hd .hd-marquee { overflow: hidden; padding: 56px 0; }
.hd .hd-marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; white-space: nowrap; animation: hd-scroll 28s linear infinite; font-family: var(--hd-display); font-size: 48px; font-weight: 800; color: var(--hd-ink); }
.hd .hd-marquee-track .outline { -webkit-text-stroke: 1.5px var(--hd-ink); color: transparent; }
.hd .hd-marquee-track i { font-size: .75em; }
.hd .hd-tech { overflow: hidden; padding: 32px 0; border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); }
.hd .hd-tech .hd-marquee-track { gap: 56px; font-size: 36px; color: var(--hd-muted); animation-duration: 34s; animation-direction: reverse; }

/* ---------- section headings ---------- */
.hd .hd-section { padding: 96px 0; }
.hd .hd-head { display: grid; gap: 24px; }
.hd .hd-h2 { font-family: var(--hd-display); font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--hd-ink); }
.hd .hd-head p { max-width: 448px; font-size: 18px; }
.hd .hd-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hd-display); font-weight: 700; color: var(--hd-brand); }
.hd .hd-link-arrow:hover { color: var(--hd-indigo); }

/* ---------- services rows ---------- */
.hd .hd-rows { margin-top: 56px; border-top: 1px solid var(--hd-line); }
.hd .hd-row { position: relative; display: flex; align-items: center; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--hd-line); transition: padding .3s var(--hd-ease); isolation: isolate; }
.hd .hd-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px; transform: scaleY(0); transform-origin: bottom; transition: transform .3s var(--hd-ease); background: linear-gradient(90deg, var(--hd-brand), var(--hd-indigo)); }
.hd .hd-rows > li:nth-child(3n+2) .hd-row::before { background: linear-gradient(90deg, var(--hd-indigo), var(--hd-cyan)); }
.hd .hd-rows > li:nth-child(3n) .hd-row::before { background: linear-gradient(90deg, var(--hd-cyan), var(--hd-brand)); }
.hd .hd-row:hover { padding-left: 24px; padding-right: 24px; }
.hd .hd-row:hover::before { transform: scaleY(1); }
.hd .hd-row-num { font-family: var(--hd-display); font-size: 14px; color: var(--hd-muted); }
.hd .hd-row-icon { display: none; width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.hd .hd-row-title { flex: 1; font-family: var(--hd-display); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--hd-ink); transition: color .2s; }
.hd .hd-row-desc { display: none; max-width: 320px; font-size: 14px; transition: color .2s; }
.hd .hd-row-go { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(11, 16, 32, .15); color: var(--hd-ink); transition: transform .3s var(--hd-ease), background-color .3s, border-color .3s; }
.hd .hd-row:hover .hd-row-num, .hd .hd-row:hover .hd-row-desc { color: rgba(255, 255, 255, .8); }
.hd .hd-row:hover .hd-row-title { color: #fff; }
.hd .hd-row:hover .hd-row-go { transform: rotate(45deg); background: #fff; border-color: #fff; }

/* ---------- work (horizontal scroller) ---------- */
.hd .hd-dark { background: var(--hd-ink); color: #94A3B8; }
.hd .hd-dark .hd-h2 { color: #fff; }
.hd .hd-work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hd .hd-circle-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: background-color .2s, color .2s; }
.hd .hd-circle-btn:hover { background: #fff; color: var(--hd-ink); }
.hd .hd-circle-btn.lime { background: var(--hd-lime); border-color: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-scroller { display: flex; gap: 24px; margin-top: 48px; padding-bottom: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(20px, calc((100vw - 1152px) / 2 + 20px)); scroll-padding-inline: max(20px, calc((100vw - 1152px) / 2 + 20px)); }
.hd .hd-scroller::-webkit-scrollbar { display: none; }
.hd .hd-work-card { flex-shrink: 0; width: 85vw; scroll-snap-align: start; transition: transform .5s var(--hd-ease); }
.hd .hd-work-card:hover { transform: rotate(-1.5deg) translateY(-6px); }
.hd .hd-work-frame { overflow: hidden; border-radius: 24px; padding: 24px; }
.hd .hd-work-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); }
.hd .hd-work-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; }
.hd .hd-work-meta h3 { font-family: var(--hd-display); font-size: 24px; font-weight: 700; color: #fff; }
.hd .hd-work-meta span { font-size: 14px; }
.hd .g1 { background: linear-gradient(135deg, var(--hd-brand), var(--hd-indigo)); }
.hd .g2 { background: linear-gradient(135deg, var(--hd-lime), var(--hd-cyan)); }
.hd .g3 { background: linear-gradient(135deg, var(--hd-indigo), #D946EF); }
.hd .g4 { background: linear-gradient(135deg, var(--hd-cyan), var(--hd-brand)); }
.hd .g5 { background: linear-gradient(135deg, #FB923C, #EC4899); }

/* ---------- process (sticky stacked cards) ---------- */
.hd .hd-process { display: grid; gap: 48px; }
.hd .hd-process-intro p { margin-top: 24px; max-width: 384px; font-size: 18px; }
.hd .hd-process-intro .hd-link-arrow { margin-top: 32px; }
.hd .hd-stack { display: grid; gap: 24px; }
.hd .hd-stack-card { position: sticky; padding: 40px; border-radius: 32px; box-shadow: 0 20px 25px -5px rgba(11, 16, 32, .06); }
.hd .hd-stack-card:nth-child(1) { top: 112px; background: #fff; }
.hd .hd-stack-card:nth-child(2) { top: 128px; background: linear-gradient(135deg, var(--hd-brand), var(--hd-indigo)); color: rgba(255, 255, 255, .85); }
.hd .hd-stack-card:nth-child(3) { top: 144px; background: var(--hd-ink); color: #CBD5E1; }
.hd .hd-stack-card:nth-child(4) { top: 160px; background: var(--hd-lime); color: rgba(11, 16, 32, .8); }
.hd .hd-stack-top { display: flex; justify-content: space-between; align-items: center; }
.hd .hd-stack-num { font-family: var(--hd-display); font-size: 60px; font-weight: 800; line-height: 1; opacity: .2; }
.hd .hd-stack-card:nth-child(1) .hd-stack-num { color: var(--hd-brand); }
.hd .hd-stack-card:nth-child(2) .hd-stack-num, .hd .hd-stack-card:nth-child(3) .hd-stack-num { color: #fff; }
.hd .hd-stack-top i { font-size: 28px; }
.hd .hd-stack-card:nth-child(1) .hd-stack-top i { color: var(--hd-brand); }
.hd .hd-stack-card:nth-child(2) .hd-stack-top i { color: #fff; }
.hd .hd-stack-card:nth-child(3) .hd-stack-top i { color: var(--hd-lime); }
.hd .hd-stack-card h3 { margin-top: 24px; font-family: var(--hd-display); font-size: 30px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-stack-card:nth-child(2) h3, .hd .hd-stack-card:nth-child(3) h3 { color: #fff; }
.hd .hd-stack-card p { margin-top: 12px; font-size: 18px; }

/* ---------- hire developers ---------- */
.hd .hd-panel-outer { padding: 0 8px; }
.hd .hd-panel { border-radius: 28px; background: #fff; padding: 80px 20px; }
.hd .hd-grad-text { background: linear-gradient(90deg, var(--hd-brand), var(--hd-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd .hd-dev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.hd .hd-dev { display: block; padding: 24px; border-radius: 24px; background: var(--hd-paper); text-align: center; transition: transform .3s var(--hd-ease), background-color .3s; }
.hd .hd-dev i { font-size: 30px; transition: color .3s; }
.hd .hd-dev h3 { margin-top: 16px; font-family: var(--hd-display); font-weight: 700; color: var(--hd-ink); transition: color .3s; }
.hd .hd-dev:hover { transform: translateY(-4px); background: var(--hd-ink); }
.hd .hd-dev:hover i { color: var(--hd-lime) !important; }
.hd .hd-dev:hover h3 { color: #fff; }

/* ---------- testimonials ---------- */
.hd .hd-testi { display: grid; gap: 24px; }
.hd .hd-score { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px; border-radius: 32px; background: linear-gradient(135deg, var(--hd-indigo), var(--hd-brand)); color: rgba(255, 255, 255, .85); }
.hd .hd-score strong { font-family: var(--hd-display); font-size: 72px; font-weight: 800; line-height: 1; color: #fff; }
.hd .hd-score .stars { color: var(--hd-lime); }
.hd .hd-quotes { position: relative; min-width: 0; }
.hd .hd-quote-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.hd .hd-quote-track::-webkit-scrollbar { display: none; }
.hd .hd-quote { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px; border-radius: 32px; background: #fff; box-shadow: 0 20px 25px -5px rgba(11, 16, 32, .05); }
.hd .hd-quote blockquote { font-family: var(--hd-display); font-size: 21px; font-weight: 600; line-height: 1.45; color: var(--hd-ink); }
.hd .hd-quote figcaption { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.hd .hd-quote figcaption b { display: block; font-size: 16px; color: var(--hd-ink); }
.hd .hd-quote figcaption a { color: var(--hd-brand); word-break: break-all; }
.hd .hd-avatar { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; background: var(--hd-lime); font-family: var(--hd-display); font-weight: 700; color: var(--hd-ink); }
.hd .hd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hd .hd-quote-nav { display: flex; gap: 8px; margin-top: 20px; }
.hd .hd-quote-nav .hd-circle-btn { border-color: rgba(11, 16, 32, .15); color: var(--hd-ink); }
.hd .hd-quote-nav .hd-circle-btn:hover { background: var(--hd-ink); color: #fff; }
.hd .hd-quote-nav .hd-circle-btn.lime:hover { background: var(--hd-ink); border-color: var(--hd-ink); color: var(--hd-lime); }

/* ---------- blog wrapper (reuses _BlogModalPartial) ---------- */
.hd .hd-blog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.hd .hd-blog-body { display: flex; justify-content: center; }

/* hide the generic CTA band on Home (footer carries the CTA); keeps #ScheduleModal in the DOM */
.hd-calltracking #demo-section { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.hd.hd-footer { padding: 8px; background: transparent; }
.hd .hd-footer-card { position: relative; overflow: hidden; border-radius: 28px; padding: 64px 20px 32px; background: var(--hd-grad); color: rgba(255, 255, 255, .75); }
.hd .hd-footer-inner { position: relative; z-index: 1; max-width: 1152px; margin: 0 auto; }
.hd .hd-footer-kicker { font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hd .hd-footer-big { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 16px; font-family: var(--hd-display); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; }
.hd .hd-footer-big:hover { color: #fff; }
.hd .hd-footer-big span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--hd-lime); color: var(--hd-ink); font-size: 24px; transition: transform .3s var(--hd-ease); }
.hd .hd-footer-big:hover span { transform: rotate(45deg); }
.hd .hd-footer-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; font-size: 14px; }
.hd .hd-footer-pills a { padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background-color .2s, color .2s; }
.hd .hd-footer-pills a:hover { background: #fff; color: var(--hd-ink); }
.hd .hd-footer-grid { display: grid; gap: 40px; padding-top: 48px; }
.hd .hd-footer-grid.has-cta { margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hd .hd-footer-brand img { height: 40px; width: auto; }
.hd .hd-footer-brand p { margin-top: 16px; max-width: 320px; font-size: 14px; }
.hd .hd-footer-contact { margin-top: 20px; display: grid; gap: 10px; font-size: 14px; }
.hd .hd-footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.hd .hd-footer-contact i { width: 16px; margin-top: 4px; color: var(--hd-lime); }
.hd .hd-footer-contact a:hover { color: #fff; }
.hd .hd-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.hd .hd-footer-cols h2, .hd .hd-footer-cols h4 { font-family: var(--hd-display); font-size: 16px; font-weight: 700; color: #fff; }
.hd .hd-footer-cols ul { margin-top: 16px; display: grid; gap: 10px; font-size: 14px; }
.hd .hd-footer-cols a:hover { color: #fff; }
.hd .hd-footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 12px; }
.hd .hd-social { display: flex; gap: 8px; }
.hd .hd-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .2s, color .2s; }
.hd .hd-social a:hover { background: #fff; color: var(--hd-ink); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 640px) {
    .hd .hd-hero-outer { padding: 12px; }
    .hd .hd-hero { border-radius: 40px; }
    .hd .hd-h1 { font-size: 72px; }
    .hd .hd-hero-ctas { flex-direction: row; }
    .hd .hd-visual { padding-left: 32px; padding-right: 32px; }
    .hd .hd-float-deploy { right: -16px; }
    .hd .hd-float-api { display: block; left: -24px; }
    .hd .hd-float-ai { right: -24px; }
    .hd .hd-code { font-size: 13.5px; }
    .hd .hd-marquee-track { font-size: 72px; }
    .hd .hd-h2 { font-size: 56px; }
    .hd .hd-row-title { font-size: 34px; }
    .hd .hd-work-card { width: 520px; }
    .hd .hd-panel-outer { padding: 0 12px; }
    .hd .hd-panel { border-radius: 40px; }
    .hd .hd-footer-card { border-radius: 40px; }
    .hd .hd-footer-big { font-size: 88px; }
    .hd .hd-footer-big span { width: 96px; height: 96px; font-size: 36px; }
    .hd .hd-footer-bottom { flex-direction: row; }
    .hd .hd-footer-cols { grid-template-columns: repeat(4, 1fr); }
    .hd.hd-footer { padding: 12px; }
}
@media (min-width: 768px) {
    .hd .hd-stats { grid-template-columns: repeat(4, 1fr); }
    .hd .hd-row-icon { display: block; }
    .hd .hd-dev-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .hd .hd-row-desc { display: block; }
    .hd .hd-hero { padding: 176px 48px 40px; }
    .hd .hd-hero-grid { grid-template-columns: 1.05fr 1fr; }
    .hd .hd-h1 { font-size: 64px; }
    .hd .hd-head { grid-template-columns: 1fr 1fr; align-items: end; }
    .hd .hd-head p { justify-self: end; }
    .hd .hd-process { grid-template-columns: 1fr 1.3fr; }
    .hd .hd-process-intro { position: sticky; top: 128px; align-self: start; }
    .hd .hd-panel { padding: 80px 48px; }
    .hd .hd-dev-grid { grid-template-columns: repeat(6, 1fr); }
    .hd .hd-testi { grid-template-columns: 1fr 2fr; }
    .hd .hd-footer-card { padding: 80px 48px 32px; }
    .hd .hd-footer-grid { grid-template-columns: 2fr 3fr; }
}

@media (min-width: 1280px) {
    .hd .hd-h1 { font-size: 80px; }
}

/* ---------- phones ---------- */
@media (max-width: 639px) {
    .hd .hd-section { padding: 72px 0; }
    .hd .hd-eyebrow { font-size: 13px; }
    .hd .hd-eyebrow::before { width: 24px; }
    .hd .hd-lead { font-size: 17px; margin-top: 24px; }
    .hd .hd-code { padding: 16px; font-size: 11px; }
    .hd .hd-visual { padding-bottom: 72px; }
    .hd .hd-float-ai { max-width: 210px; font-size: 12px; }
    .hd .hd-stats { margin-top: 48px; }
    .hd .hd-stat { padding: 18px 20px; }
    .hd .hd-stat strong { font-size: 28px; }
    .hd .hd-stat span { font-size: 13px; }
    .hd .hd-marquee { padding: 40px 0; }
    .hd .hd-marquee-track { font-size: 40px; gap: 28px; }
    .hd .hd-tech .hd-marquee-track { font-size: 30px; gap: 40px; }
    .hd .hd-head p { font-size: 16px; }
    .hd .hd-rows { margin-top: 40px; }
    .hd .hd-row { gap: 14px; padding: 20px 0; }
    .hd .hd-row:hover { padding-left: 12px; padding-right: 12px; }
    .hd .hd-row-title { font-size: 19px; }
    .hd .hd-row-go { width: 40px; height: 40px; }
    .hd .hd-work-frame { padding: 16px; }
    .hd .hd-work-meta h3 { font-size: 20px; }
    .hd .hd-stack-card { padding: 28px; border-radius: 24px; }
    .hd .hd-stack-num { font-size: 48px; }
    .hd .hd-stack-card h3 { font-size: 24px; margin-top: 16px; }
    .hd .hd-stack-card p { font-size: 16px; }
    .hd .hd-panel { padding: 64px 20px; }
    .hd .hd-dev { padding: 20px 12px; }
    .hd .hd-score { padding: 28px; border-radius: 24px; }
    .hd .hd-score strong { font-size: 56px; }
    .hd .hd-quote { padding: 28px; border-radius: 24px; }
    .hd .hd-quote blockquote { font-size: 17px; }
    .hd .hd-blog-body { padding: 0 16px; }
    .hd .hd-footer-card { padding: 56px 20px 28px; }
    .hd .hd-footer-big { font-size: 44px; }
    .hd .hd-footer-pills a { padding: 10px 16px; }
    .hd .hd-mobile { padding: 16px 20px; }
    .hd .hd-footer-bottom p { text-align: center; }
    .hd .hd-mobile-link { font-size: 19px; padding: 10px 4px; }
}
@media (max-width: 400px) {
    .hd .hd-mobile-calls { grid-template-columns: 1fr; }
}
.hd .hd-stack-card h3, .hd .hd-row-title, .hd .hd-work-meta h3 { line-height: 1.2; }

/* ---------- motion ---------- */
@keyframes hd-blink { 50% { opacity: 0; } }
@keyframes hd-bob { 50% { transform: translateY(-10px); } }
@keyframes hd-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes hd-draw { to { stroke-dashoffset: 0; } }
@keyframes hd-scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .hd .hd-talk, .hd .hd-editor, .hd .hd-row, .hd .hd-work-card { transition: none; }
    .hd .hd-float-deploy, .hd .hd-float-api, .hd .hd-float-ai, .hd .hd-typing i, .hd .hd-caret, .hd .hd-marquee-track { animation: none; }
    .hd .hd-spark { stroke-dashoffset: 0; animation: none; }
    .hd .hd-editor { transform: none; }
}

/* ==========================================================================
   Shared fixes + scroll reveal
   ========================================================================== */
/* site.css sets #boxed-container { overflow:hidden }, which turns it into a scroll
   container and silently disables every position:sticky inside the page.
   overflow:clip still clips horizontally but keeps sticky working. */
@supports (overflow: clip) { #boxed-container { overflow: clip; } }

/* Elements get .hd-reveal (or are children of .hd-reveal-kids); the navbar script adds
   .hd-js to <html> and .is-in when they scroll into view. No JS => everything visible. */
.hd-js .hd .hd-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--hd-ease), transform .8s var(--hd-ease); }
.hd-js .hd .hd-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Service page (/Services/{service}) - markup lives in Views/Services/Index.cshtml
   and the per-service _service*.cshtml partials (their class names are kept).
   ========================================================================== */
.hd.hd-svc { --svc-c1: var(--hd-brand); --svc-c2: var(--hd-indigo); background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }
.hd-svc .container { width: auto; max-width: 1152px; margin: 0 auto; padding: 0 20px; }
.hd-svc .container::before, .hd-svc .container::after { content: none; }
.hd-svc strong, .hd-svc b { color: inherit; }
.hd .hd-kick { font-family: var(--hd-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-brand); }
.hd .hd-svc-h2, .hd-svc .section-title, .hd-svc .left-copy h2, .hd-svc .transform-copy h2, .hd-svc .faq-title {
    font-family: var(--hd-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--hd-ink); }
.hd .hd-svc-h3 { margin-top: 10px; font-family: var(--hd-display); font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--hd-ink); }
.hd .hd-svc-lead, .hd-svc .section-sub { margin-top: 16px; max-width: 640px; font-size: 17px; line-height: 1.7; color: var(--hd-text); }
/* kicker labels for partial-rendered headings */
.hd-svc .left-copy h2::before, .hd-svc .transform-copy h2::before, .hd-svc .hd-svc-asset .section-title::before, .hd-svc .hd-svc-process .section-title::before {
    display: block; margin-bottom: 12px; font-family: var(--hd-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-brand); }
.hd-svc .left-copy h2::before { content: "// What we offer"; }
.hd-svc .transform-copy h2::before { content: "// Our approach"; }
.hd-svc .hd-svc-asset .section-title::before { content: "// Business value"; color: var(--hd-lime); }
.hd-svc .hd-svc-process .section-title::before { content: "// How we work"; }
/* shared icon tile */
.hd .hd-ic, .hd-svc .service-card .icon, .hd-svc .benefit .icon, .hd-svc .step .round {
    display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; font-size: 20px;
    background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; box-shadow: 0 12px 24px -12px var(--svc-c2);
    transition: transform .4s var(--hd-ease), box-shadow .4s, background-color .3s, color .3s; }

/* ---------- hero ---------- */
.hd .hd-svc-hero { position: relative; overflow: hidden; margin: 8px; border-radius: 28px; padding: 132px 0 88px; background: var(--hd-grad); color: rgba(255, 255, 255, .85); }
.hd .hd-svc-hero .hd-wrap { position: relative; z-index: 1; }
.hd .hd-svc-hero-grid { display: grid; gap: 48px; align-items: center; }
.hd .hd-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .7); animation: hd-rise .8s var(--hd-ease) both; }
.hd .hd-crumb i { font-size: 9px; opacity: .7; }
.hd .hd-crumb a:hover { color: #fff; }
.hd .hd-crumb b { font-weight: 600; color: #fff; }
.hd .hd-svc-badge { display: grid; place-items: center; width: 56px; height: 56px; margin-top: 28px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); font-size: 22px; color: var(--hd-lime); animation: hd-rise .8s .05s var(--hd-ease) both; }
.hd .hd-svc-h1 { margin-top: 20px; font-family: var(--hd-display); font-size: clamp(40px, 6.2vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; color: #fff; animation: hd-rise .8s .1s var(--hd-ease) both; }
.hd .hd-svc-h1 span { color: var(--hd-lime); }
.hd .hd-svc-intro { margin-top: 22px; max-width: 560px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .85); animation: hd-rise .8s .18s var(--hd-ease) both; }
.hd .hd-svc-intro p + p { margin-top: 12px; }
.hd .hd-svc-hero .hd-hero-ctas { animation: hd-rise .8s .26s var(--hd-ease) both; }
.hd .hd-svc-trust { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); animation: hd-rise .8s .34s var(--hd-ease) both; }
.hd .hd-svc-trust b { display: block; font-family: var(--hd-display); font-size: 28px; font-weight: 800; color: #fff; line-height: 1.1; }
.hd .hd-svc-trust span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.hd .hd-svc-art { position: relative; max-width: 560px; width: 100%; margin: 0 auto; animation: hd-zoom-in 1s .15s var(--hd-ease) both; }
.hd .hd-svc-art-glow { position: absolute; inset: 12% 10%; border-radius: 999px; background: radial-gradient(circle, rgba(198, 244, 50, .45), rgba(6, 182, 212, .25) 55%, transparent 70%); filter: blur(40px); }
.hd .hd-svc-art-grid { position: absolute; inset: 4% 2%; border-radius: 32px; background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 72%); mask-image: radial-gradient(circle at center, #000 30%, transparent 72%); }
.hd .hd-svc-art img { position: relative; display: block; width: 100%; max-height: 460px; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(11, 16, 32, .45)); animation: hd-bob 7s ease-in-out infinite; }
.hd .hd-svc-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 20px 40px -12px rgba(11, 16, 32, .45);
    font-family: var(--hd-display); font-size: 13px; font-weight: 700; color: var(--hd-ink); white-space: nowrap; animation: hd-bob 6s ease-in-out infinite; }
.hd .hd-svc-chip i { color: #10B981; }
.hd .hd-svc-chip.c1 { left: -2%; top: 10%; }
.hd .hd-svc-chip.c2 { right: -2%; top: 44%; animation-delay: -2s; }
.hd .hd-svc-chip.c3 { left: 8%; bottom: 2%; animation-delay: -4s; }

/* ---------- sticky section nav ---------- */
.hd .hd-subnav { position: sticky; top: 12px; z-index: 60; display: flex; justify-content: center; margin-top: -30px; padding: 0 12px; }
.hd .hd-subnav nav { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px -14px rgba(11, 16, 32, .35), 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-subnav nav::-webkit-scrollbar { display: none; }
.hd .hd-subnav a { white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--hd-text); transition: background-color .25s, color .25s; }
.hd .hd-subnav a:hover { background: var(--hd-paper); color: var(--hd-ink); }
.hd .hd-subnav a.is-on { background: var(--hd-ink); color: #fff; }
.hd-svc [id^="svc-"] { scroll-margin-top: 90px; }

/* ---------- offerings (_servicescommonmainsection) ---------- */
.hd-svc .hd-svc-offer .section { padding: 88px 0 72px; }
.hd-svc .service-grid { display: block; }
.hd-svc .left-copy { display: grid; gap: 16px; align-items: end; }
.hd-svc .left-copy p { max-width: 520px; font-size: 17px; line-height: 1.7; }
.hd-svc .left-copy p strong { color: var(--hd-ink); font-weight: 700; }
.hd-svc .cards { display: grid; gap: 18px; margin-top: 44px; counter-reset: hd-off; }
.hd-svc .service-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid rgba(11, 16, 32, .06); overflow: hidden; counter-increment: hd-off;
    transition: transform .4s var(--hd-ease), box-shadow .4s, border-color .4s; }
.hd-svc .service-card::before { content: "0" counter(hd-off); position: absolute; top: 26px; right: 28px; font-family: var(--hd-mono); font-size: 12px; color: var(--hd-muted); transition: color .3s; }
.hd-svc .service-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--svc-c1), var(--svc-c2), var(--hd-lime)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--hd-ease); }
.hd-svc .service-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 30px 50px -24px rgba(15, 117, 189, .45); }
.hd-svc .service-card:hover::after { transform: scaleX(1); }
.hd-svc .service-card:hover::before { color: var(--svc-c1); }
.hd-svc .service-card .icon { width: 60px; height: 60px; border-radius: 18px; font-size: 24px; background: var(--hd-paper); color: var(--svc-c1); box-shadow: none; }
.hd-svc .service-card:hover .icon { background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; transform: rotate(-8deg) scale(1.06); box-shadow: 0 14px 28px -12px var(--svc-c2); }
.hd-svc .service-card h3 { font-family: var(--hd-display); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--hd-ink); }
.hd-svc .service-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: #64748B; }

/* ---------- why ---------- */
.hd .hd-svc-why { padding: 24px 0 88px; }
.hd .hd-svc-why-grid { display: grid; gap: 40px; align-items: start; }
.hd .hd-svc-why .hd-link-arrow { margin-top: 28px; }
.hd .hd-why-cards { display: grid; gap: 16px; }
.hd .hd-why-card { padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px -18px rgba(11, 16, 32, .25); transition: transform .4s var(--hd-ease), box-shadow .4s; }
.hd .hd-why-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(79, 70, 229, .4); }
.hd .hd-why-card:hover .hd-ic { transform: rotate(-8deg) scale(1.06); }
.hd .hd-why-card h3 { margin-top: 20px; font-family: var(--hd-display); font-size: 17px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-why-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: #64748B; }

/* ---------- concepts (_serviceConcepts) ---------- */
.hd-svc .hd-svc-concept .section { padding: 24px 0 96px; }
.hd-svc .transform-grid { display: grid; gap: 48px; align-items: center; }
.hd-svc .transform-copy > p { margin-top: 16px; font-size: 16.5px; line-height: 1.75; }
.hd-svc .highlights { display: grid; gap: 12px; margin-top: 28px; }
.hd-svc .highlight { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(11, 16, 32, .06); transition: transform .35s var(--hd-ease), box-shadow .35s; }
.hd-svc .highlight:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(11, 16, 32, .35); }
.hd-svc .highlight .num { grid-row: span 2; font-family: var(--hd-display); font-size: 26px; font-weight: 800; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd-svc .highlight h3, .hd-svc .highlight h4 { font-family: var(--hd-display); font-size: 16px; font-weight: 700; color: var(--hd-ink); }
.hd-svc .highlight p { font-size: 14px; line-height: 1.55; color: #64748B; }

/* project-board visual (_serviceVisual) */
.hd .hd-board { position: relative; padding: 20px; border-radius: 28px; background: radial-gradient(80% 60% at 100% 0%, rgba(79, 70, 229, .45), transparent 60%), var(--hd-ink); color: #CBD5E1;
    box-shadow: 0 40px 80px -30px rgba(11, 16, 32, .6); font-size: 13px; }
.hd .hd-board-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hd .hd-board-bar .dot { width: 11px; height: 11px; border-radius: 999px; }
.hd .hd-board-title { flex: 1; min-width: 0; margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--hd-mono); font-size: 12px; color: #94A3B8; }
.hd .hd-board-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(16, 185, 129, .12); color: #34D399; font-size: 11px; font-weight: 700; }
.hd .hd-board-live i { width: 7px; height: 7px; border-radius: 999px; background: #34D399; animation: hd-pulse 1.8s ease-out infinite; }
.hd .hd-board-progress { margin-top: 18px; }
.hd .hd-board-progress > div { display: flex; justify-content: space-between; font-size: 12px; color: #94A3B8; }
.hd .hd-board-progress b { font-family: var(--hd-display); color: #fff; }
.hd .hd-board-track { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hd .hd-board-fill { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hd-cyan), var(--hd-indigo), var(--hd-lime)); }
.hd-js .hd .hd-board-fill { width: 0; }
.hd-js .hd .hd-seen .hd-board-fill { animation: hd-fill 1.6s .3s var(--hd-ease) forwards; }
.hd .hd-board-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hd .hd-board-col { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.hd .hd-board-col p { font-family: var(--hd-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.hd .hd-task { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .06); font-size: 12px; font-weight: 600; line-height: 1.3; color: #E2E8F0; min-width: 0; }
.hd .hd-task i { color: var(--hd-cyan); font-size: 11px; }
.hd .hd-task.is-moving { border-color: rgba(198, 244, 50, .5); box-shadow: 0 0 0 3px rgba(198, 244, 50, .12); animation: hd-bob 4s ease-in-out infinite; }
.hd .hd-task.is-moving i { color: var(--hd-lime); }
.hd .hd-task.is-done { color: #94A3B8; }
.hd .hd-task.is-done i { color: #34D399; }
.hd .hd-board-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hd .hd-board-avatars { display: flex; }
.hd .hd-board-avatars i { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 999px; border: 2px solid var(--hd-ink); background: linear-gradient(135deg, var(--hd-brand), var(--hd-indigo)); font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.hd .hd-board-avatars i:first-child { margin-left: 0; }
.hd .hd-board-avatars i:last-child { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-board-foot .ok { font-size: 12px; font-weight: 600; color: #34D399; }
.hd .hd-board-float { position: absolute; right: -10px; bottom: -26px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: #fff; color: var(--hd-ink);
    box-shadow: 0 24px 48px -16px rgba(11, 16, 32, .45); animation: hd-bob 6s -2s ease-in-out infinite; }
.hd .hd-board-float .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-board-float b { display: block; font-family: var(--hd-display); font-size: 14px; }
.hd .hd-board-float small { font-size: 12px; color: #64748B; }

/* ---------- business value, dark (_serviceasset) ---------- */
.hd .hd-svc-asset { position: relative; overflow: hidden; margin: 0 8px; border-radius: 32px; background: radial-gradient(60% 60% at 90% 0%, rgba(79, 70, 229, .35), transparent 60%), var(--hd-ink); color: #94A3B8; }
.hd-svc .hd-svc-asset .section { position: relative; z-index: 1; padding: 88px 0; }
.hd-svc .hd-svc-asset .section-title { max-width: 760px; color: #fff; }
.hd-svc .hd-svc-asset .section-sub { color: #94A3B8; }
.hd-svc .benefits-grid { display: grid; gap: 16px; margin-top: 44px; }
.hd-svc .benefit { padding: 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); transition: border-color .35s, background-color .35s, transform .4s var(--hd-ease); }
.hd-svc .benefit:hover { transform: translateY(-6px); border-color: rgba(198, 244, 50, .45); background: rgba(255, 255, 255, .06); }
.hd-svc .benefit .icon { background: rgba(198, 244, 50, .12); color: var(--hd-lime); box-shadow: none; }
.hd-svc .benefit:hover .icon { background: var(--hd-lime); color: var(--hd-ink); transform: rotate(-8deg) scale(1.06); }
.hd-svc .benefit h3 { margin-top: 20px; font-family: var(--hd-display); font-size: 17px; font-weight: 700; color: #fff; }
.hd-svc .benefit p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

/* ---------- process (_serviceworkprocess) ---------- */
.hd-svc .hd-svc-process .section { padding: 96px 0; }
.hd-svc .process-grid { position: relative; display: grid; gap: 28px; margin-top: 52px; }
.hd-svc .step { position: relative; }
.hd-svc .step .round { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 20px; background: #fff; color: var(--svc-c1); font-size: 22px; box-shadow: 0 14px 30px -14px rgba(15, 117, 189, .5); }
.hd-svc .step:hover .round { background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; transform: translateY(-6px) rotate(-6deg); }
.hd-svc .stepnum { display: block; margin-top: 20px; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .08em; color: var(--hd-muted); }
.hd-svc .stepnum::before { content: "STEP "; }
.hd-svc .step h3 { margin-top: 4px; font-family: var(--hd-display); font-size: 18px; font-weight: 700; color: var(--hd-ink); }
.hd-svc .step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: #64748B; }

/* ---------- stages + technologies ---------- */
.hd .hd-svc-split { padding: 0 0 96px; }
.hd .hd-svc-split-grid { display: grid; gap: 24px; align-items: start; }
.hd .hd-svc-panel { padding: 32px; border-radius: 28px; background: #fff; box-shadow: 0 10px 30px -20px rgba(11, 16, 32, .25); }
.hd .hd-stage-list { margin-top: 12px; }
.hd .hd-stage { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(11, 16, 32, .06); }
.hd .hd-stage:last-child { border-bottom: 0; padding-bottom: 0; }
.hd .hd-stage .hd-ic { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; background: var(--hd-paper); color: var(--svc-c2); box-shadow: none; }
.hd .hd-stage:hover .hd-ic { background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; transform: rotate(-8deg); }
.hd .hd-stage h3 { font-family: var(--hd-display); font-size: 16px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-stage p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: #64748B; }
.hd-svc .hd-svc-techpanel .section-title { margin-top: 10px; font-size: 26px; line-height: 1.2; }
.hd-svc .tech-sub { margin-top: 8px; font-size: 14px; color: #64748B; }
.hd-svc .techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 20px; }
.hd-svc .tech { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 96px; padding: 16px 8px; border-radius: 18px; background: var(--hd-paper); border: 1px solid transparent; text-align: center;
    transition: transform .3s var(--hd-ease), background-color .3s, border-color .3s, box-shadow .3s; }
.hd-svc .tech:hover { transform: translateY(-4px); background: #fff; border-color: rgba(11, 16, 32, .06); box-shadow: 0 18px 30px -18px rgba(11, 16, 32, .35); }
.hd-svc .tech .symbol { display: grid; place-items: center; width: 32px; height: 32px; font-size: 28px; color: var(--hd-ink); }
.hd-svc .tech .symbol svg, .hd-svc .tech .symbol img { max-width: 32px; max-height: 32px; width: 32px !important; height: 32px !important; }
.hd-svc .tech small { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--hd-ink); }
.hd-svc .hd-svc-techpanel .get-title { margin-top: 32px; font-size: 19px; }
.hd-svc .checks { display: grid; gap: 10px 20px; margin-top: 16px; }
.hd-svc .check { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.5; color: #334155; }
.hd-svc .check::before { content: "\f058"; position: absolute; left: 0; top: 1px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; color: #10B981; }

/* ---------- FAQ (_servicefaq) + CTA ---------- */
.hd .hd-svc-faq { padding: 0 0 96px; }
.hd .hd-svc-faq-grid { display: grid; gap: 32px; align-items: start; }
.hd-svc .faq-title { margin-top: 12px; }
.hd-svc .faq { display: grid; gap: 10px; margin-top: 28px; }
.hd-svc .faq-item { border-radius: 18px; background: #fff; border: 1px solid rgba(11, 16, 32, .05); transition: box-shadow .3s, border-color .3s; }
.hd-svc .faq-item:hover { border-color: rgba(15, 117, 189, .2); }
.hd-svc .faq-item.active { box-shadow: 0 20px 40px -24px rgba(11, 16, 32, .3); border-color: transparent; }
.hd-svc .faq-question { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; text-align: left; font-family: var(--hd-display); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--hd-ink); }
.hd-svc .faq-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--hd-paper); font-family: var(--hd-body); font-size: 20px; font-weight: 500; line-height: 1; color: var(--hd-brand); transition: transform .35s var(--hd-ease), background-color .3s, color .3s; }
.hd-svc .faq-question:hover .faq-icon { background: rgba(15, 117, 189, .12); }
.hd-svc .faq-item.active .faq-icon { transform: rotate(45deg); background: var(--hd-ink); color: var(--hd-lime); }
.hd-svc .faq-answer { display: block; max-height: 0; overflow: hidden; transition: max-height .45s var(--hd-ease); }
.hd-svc .faq-item.active .faq-answer { max-height: 800px; }
.hd-svc .faq-answer > * { padding: 0 22px; font-size: 15px; line-height: 1.7; color: #475569; }
.hd-svc .faq-answer > *:last-child { padding-bottom: 22px; }
.hd .hd-svc-cta { position: relative; overflow: hidden; padding: 36px; border-radius: 28px; background: var(--hd-grad); color: rgba(255, 255, 255, .85); }
.hd .hd-svc-cta > * { position: relative; z-index: 1; }
.hd .hd-svc-cta > .hd-ring { position: absolute; z-index: 0; top: -120px; right: -120px; }
.hd .hd-svc-cta h2 { margin-top: 12px; font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1.15; color: #fff; }
.hd .hd-svc-cta p { margin-top: 12px; font-size: 15px; line-height: 1.65; }
.hd .hd-svc-cta img { display: block; width: 72%; margin: 20px auto 0; filter: drop-shadow(0 30px 30px rgba(11, 16, 32, .4)); animation: hd-bob 7s ease-in-out infinite; }
.hd .hd-svc-cta-btns { display: grid; gap: 10px; margin-top: 22px; }
.hd .hd-svc-cta-btns .hd-btn-white { justify-content: space-between; }

/* ---------- service page responsive ---------- */
@media (min-width: 640px) {
    .hd-svc .cards, .hd .hd-why-cards, .hd-svc .benefits-grid, .hd-svc .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-svc .highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd-svc .highlight { grid-template-columns: 1fr; row-gap: 6px; align-items: start; }
    .hd-svc .highlight .num { grid-row: auto; }
}
@media (min-width: 768px) {
    .hd-svc .process-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
    .hd-svc .process-grid::before { content: ""; position: absolute; left: 32px; right: 18%; top: 32px; height: 2px; background: repeating-linear-gradient(90deg, rgba(15, 117, 189, .4) 0 8px, transparent 8px 16px);
        transform-origin: left; transition: transform 1.4s var(--hd-ease); }
    .hd-js .hd-svc .process-grid:not(.hd-seen)::before { transform: scaleX(0); }
    .hd-svc .left-copy { grid-template-columns: 1.1fr 1fr; gap: 40px; }
}
@media (min-width: 1024px) {
    .hd .hd-svc-hero { margin: 12px; border-radius: 40px; padding: 156px 0 104px; }
    .hd .hd-svc-hero-grid { grid-template-columns: 1.05fr 1fr; }
    .hd-svc .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd .hd-svc-why-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; }
    .hd .hd-svc-why-grid > :first-child { position: sticky; top: 100px; }
    .hd-svc .transform-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
    .hd-svc .benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hd .hd-svc-asset { margin: 0 12px; border-radius: 40px; }
    .hd .hd-svc-split-grid { grid-template-columns: 1fr 1fr; }
    .hd .hd-svc-faq-grid { grid-template-columns: 1.45fr 1fr; gap: 40px; }
    .hd .hd-svc-cta { position: sticky; top: 96px; }
}
@media (max-width: 639px) {
    .hd .hd-svc-hero { padding: 120px 0 72px; border-radius: 24px; }
    .hd .hd-svc-hero .hd-hero-ctas .hd-btn-pill { width: 100%; }
    .hd .hd-svc-hero .hd-btn-white { justify-content: space-between; }
    .hd .hd-svc-trust { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
    .hd .hd-svc-trust span { font-size: 12px; line-height: 1.35; display: block; }
    .hd .hd-svc-trust b { font-size: 22px; }
    .hd .hd-svc-chip { padding: 8px 11px; font-size: 11.5px; }
    .hd .hd-svc-chip.c2 { display: none; }
    .hd-svc .hd-svc-offer .section, .hd-svc .hd-svc-asset .section, .hd-svc .hd-svc-process .section { padding: 64px 0; }
    .hd .hd-svc-why, .hd .hd-svc-split, .hd .hd-svc-faq { padding-bottom: 64px; }
    .hd .hd-svc-panel, .hd .hd-svc-cta { padding: 24px; border-radius: 24px; }
    .hd .hd-board { padding: 16px; border-radius: 22px; }
    .hd .hd-board-cols { grid-template-columns: 1fr; }
    .hd .hd-board-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd .hd-board-col p { grid-column: 1 / -1; }
    .hd .hd-board-float { right: 8px; bottom: -22px; }
    .hd .hd-subnav a { padding: 9px 14px; font-size: 13px; }
}

/* ---------- motion (service + shared) ---------- */
@keyframes hd-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hd-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hd-fill { from { width: 0; } to { width: 78%; } }
@keyframes hd-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }

@media (prefers-reduced-motion: reduce) {
    .hd-js .hd .hd-reveal { opacity: 1; transform: none; transition: none; }
    .hd .hd-crumb, .hd .hd-svc-badge, .hd .hd-svc-h1, .hd .hd-svc-intro, .hd .hd-svc-hero .hd-hero-ctas, .hd .hd-svc-trust, .hd .hd-svc-art,
    .hd .hd-svc-art img, .hd .hd-svc-chip, .hd .hd-task.is-moving, .hd .hd-board-float, .hd .hd-board-live i, .hd .hd-svc-cta img { animation: none; }
    .hd-js .hd .hd-board-fill { width: 78%; animation: none !important; }
    .hd-js .hd-svc .process-grid:not(.hd-seen)::before { transform: none; }
}

/* ==========================================================================
   Service hero visuals (Views/Shared/_serviceHeroVisual.cshtml)
   ========================================================================== */
/* ---------- service hero visuals (coded, per service) ---------- */
.hd .hd-hv { position: relative; width: 100%; max-width: 580px; margin: 0 auto; padding: 44px 20px 76px; }
.hd .hd-hv .hd-editor { transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); }
.hd .hd-hv .hd-editor:hover { transform: none; }
.hd .hd-hv-url { flex: 1; min-width: 0; margin-left: 12px; padding: 5px 12px; border-radius: 8px; background: rgba(255, 255, 255, .07); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-family: var(--hd-mono); font-size: 11px; color: rgba(255, 255, 255, .55); }
.hd .hd-hv-url i { margin-right: 6px; color: #6EE7B7; font-size: 9px; }
.hd .hd-hv-body { position: relative; min-height: 270px; padding: 18px; color: #CBD5E1; font-size: 12px; }

/* primitives */
.hd .hd-sk { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.hd .hd-sk + .hd-sk { margin-top: 8px; }
.hd .hd-sk-lg { height: 13px; background: rgba(255, 255, 255, .85); }
.hd .hd-sk-lime { background: var(--hd-lime); }
.hd .hd-sk-dim { background: rgba(255, 255, 255, .07); }
.hd .hd-hv-tile { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; font-size: 13px; }
.hd .hd-hv-tile.lime { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hv-tile.green { background: #10B981; }
.hd .hd-hv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 600; color: #E2E8F0; white-space: nowrap; }
.hd .hd-hv-pill.ok { background: rgba(16, 185, 129, .15); color: #6EE7B7; }
.hd .hd-hv-pill.lime { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hv-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.hd .hd-hv-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--svc-c1), var(--svc-c2)); transform-origin: bottom; animation: hd-grow 1.1s var(--hd-ease) both; }
.hd .hd-hv-bars i:nth-child(2) { animation-delay: .1s; } .hd .hd-hv-bars i:nth-child(3) { animation-delay: .2s; } .hd .hd-hv-bars i:nth-child(4) { animation-delay: .3s; }
.hd .hd-hv-bars i:nth-child(5) { animation-delay: .4s; } .hd .hd-hv-bars i:nth-child(6) { animation-delay: .5s; } .hd .hd-hv-bars i:nth-child(7) { animation-delay: .6s; }
.hd .hd-hv-bars i:last-child { background: var(--hd-lime); }

/* floating cards */
.hd .hd-hv-f { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .97); color: var(--hd-ink);
    box-shadow: 0 25px 50px -12px rgba(11, 16, 32, .45); animation: hd-bob 6s ease-in-out infinite; }
.hd .hd-hv-f b { display: block; font-family: var(--hd-display); font-size: 14px; line-height: 1.3; }
.hd .hd-hv-f small { display: block; font-size: 11.5px; color: #64748B; }
.hd .hd-hv-f.a { top: 0; right: -6px; }
.hd .hd-hv-f.b { left: -6px; bottom: 6px; animation-delay: -2s; }
.hd .hd-hv-f.c { right: 4px; bottom: -6px; animation-delay: -4s; }
.hd .hd-hv-f.lime { background: var(--hd-lime); }
.hd .hd-hv-f.lime small { color: rgba(11, 16, 32, .65); }
.hd .hd-hv-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.hd .hd-hv-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.hd .hd-hv-ring circle { fill: none; stroke-width: 5; }
.hd .hd-hv-ring .bg { stroke: #E2E8F0; }
.hd .hd-hv-ring .fg { stroke: #10B981; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; animation: hd-ring 1.6s .5s var(--hd-ease) forwards; }
.hd .hd-hv-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--hd-display); font-size: 13px; font-weight: 800; color: #059669; }

/* web development: mini website */
.hd .hd-hv-site-nav { display: flex; align-items: center; gap: 10px; }
.hd .hd-hv-site-nav .logo { width: 18px; height: 18px; border-radius: 6px; background: var(--hd-lime); }
.hd .hd-hv-site-nav .hd-sk { width: 34px; margin: 0; }
.hd .hd-hv-site-nav .hd-hv-navbtn { margin-left: auto; width: 54px; height: 20px; border-radius: 99px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); }
.hd .hd-hv-site-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; margin-top: 22px; }
.hd .hd-hv-site-hero .cta { display: inline-block; width: 70px; height: 22px; margin-top: 14px; border-radius: 99px; background: #fff; }
.hd .hd-hv-site-art { display: grid; place-items: center; height: 104px; border-radius: 14px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: rgba(255, 255, 255, .9); font-size: 30px; position: relative; overflow: hidden; }
.hd .hd-hv-site-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%); animation: hd-shine 3.2s ease-in-out infinite; }
.hd .hd-hv-site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.hd .hd-hv-site-cards > div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.hd .hd-hv-site-cards > div i { color: var(--hd-cyan); font-size: 13px; }
.hd .hd-hv-site-cards > div .hd-sk { margin-top: 10px; }

/* web design: design canvas */
.hd .hd-hv-canvas { display: grid; grid-template-columns: 92px 1fr; gap: 12px; }
.hd .hd-hv-layers { display: grid; align-content: start; gap: 6px; }
.hd .hd-hv-layers p { font-family: var(--hd-mono); font-size: 9.5px; letter-spacing: .08em; color: #64748B; text-transform: uppercase; }
.hd .hd-hv-layers span { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; font-size: 10.5px; color: #94A3B8; }
.hd .hd-hv-layers span.on { background: rgba(198, 244, 50, .14); color: var(--hd-lime); }
.hd .hd-hv-board { position: relative; padding: 12px; border-radius: 14px; background: #fff; background-image: radial-gradient(#E2E8F0 1px, transparent 1px); background-size: 12px 12px; }
.hd .hd-hv-board .frame { padding: 12px; border-radius: 10px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); outline: 2px dashed var(--hd-lime); outline-offset: 3px; }
.hd .hd-hv-board .frame .hd-sk-lg { background: #fff; width: 70%; }
.hd .hd-hv-board .frame .hd-sk { background: rgba(255, 255, 255, .5); }
.hd .hd-hv-board .hd-hv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.hd .hd-hv-board .hd-hv-row span { height: 46px; border-radius: 8px; background: #F1F5F9; border: 1px solid #E2E8F0; }
.hd .hd-hv-cursor { position: absolute; right: 22px; bottom: 30px; display: flex; align-items: flex-start; gap: 2px; animation: hd-cursor 5s ease-in-out infinite; }
.hd .hd-hv-cursor i { color: #EC4899; font-size: 15px; }
.hd .hd-hv-cursor span { margin-top: 12px; padding: 3px 8px; border-radius: 99px; background: #EC4899; color: #fff; font-size: 10px; font-weight: 700; }
.hd .hd-hv-swatches { display: flex; gap: 6px; }
.hd .hd-hv-swatches i { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08); }

/* ecommerce: product page */
.hd .hd-hv-shop { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
.hd .hd-hv-product { position: relative; display: grid; place-items: center; height: 168px; border-radius: 14px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; font-size: 52px; }
.hd .hd-hv-product i { filter: drop-shadow(0 12px 18px rgba(11, 16, 32, .35)); animation: hd-bob 5s ease-in-out infinite; }
.hd .hd-hv-product .tag { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 99px; background: var(--hd-ink); color: var(--hd-lime); font-size: 10px; font-weight: 700; }
.hd .hd-hv-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.hd .hd-hv-thumbs span { height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.hd .hd-hv-thumbs span:first-child { outline: 2px solid var(--hd-lime); }
.hd .hd-hv-pinfo h5 { margin: 0; font-family: var(--hd-display); font-size: 15px; font-weight: 700; color: #fff; }
.hd .hd-hv-stars { margin-top: 6px; color: #FBBF24; font-size: 10px; }
.hd .hd-hv-stars em { margin-left: 4px; font-style: normal; color: #94A3B8; }
.hd .hd-hv-price { margin-top: 10px; font-family: var(--hd-display); font-size: 22px; font-weight: 800; color: #fff; }
.hd .hd-hv-price s { margin-left: 6px; font-size: 12px; font-weight: 500; color: #64748B; }
.hd .hd-hv-sizes { display: flex; gap: 6px; margin-top: 10px; }
.hd .hd-hv-sizes span { padding: 4px 9px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .15); font-size: 10.5px; }
.hd .hd-hv-sizes span.on { border-color: var(--hd-lime); color: var(--hd-lime); }
.hd .hd-hv-addcart { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px; border-radius: 99px; background: var(--hd-lime); color: var(--hd-ink); font-weight: 700; animation: hd-press 4s ease-in-out infinite; }

/* mobile app: phone */
.hd .hd-hv-phone-wrap { position: relative; display: flex; justify-content: center; padding: 8px 0 20px; }
.hd .hd-hv-phone { position: relative; width: 210px; padding: 10px; border-radius: 34px; background: #0B1020; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 80px -20px rgba(11, 16, 32, .7), inset 0 0 0 4px #1E293B;
    transform: perspective(1200px) rotateY(-10deg) rotateX(4deg); transition: transform .8s var(--hd-ease); }
.hd .hd-hv-phone:hover { transform: none; }
.hd .hd-hv-screen { position: relative; overflow: hidden; min-height: 360px; padding: 26px 14px 14px; border-radius: 26px; background: #F5F6FA; color: var(--hd-ink); }
.hd .hd-hv-screen::before { content: ""; position: absolute; top: 8px; left: 50%; width: 64px; height: 16px; border-radius: 99px; background: #0B1020; transform: translateX(-50%); }
.hd .hd-hv-app-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #64748B; }
.hd .hd-hv-app-top b { display: block; font-family: var(--hd-display); font-size: 14px; color: var(--hd-ink); }
.hd .hd-hv-app-top .av { width: 28px; height: 28px; border-radius: 99px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); }
.hd .hd-hv-app-card { margin-top: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: rgba(255, 255, 255, .8); font-size: 10.5px; }
.hd .hd-hv-app-card b { display: block; margin-top: 2px; font-family: var(--hd-display); font-size: 20px; color: #fff; }
.hd .hd-hv-app-card .hd-hv-bars { height: 34px; margin-top: 8px; }
.hd .hd-hv-app-card .hd-hv-bars i { background: rgba(255, 255, 255, .5); }
.hd .hd-hv-app-card .hd-hv-bars i:last-child { background: var(--hd-lime); }
.hd .hd-hv-app-list { display: grid; gap: 8px; margin-top: 12px; }
.hd .hd-hv-app-list div { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px; background: #fff; font-size: 11px; }
.hd .hd-hv-app-list .hd-hv-tile { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.hd .hd-hv-app-list b { display: block; font-size: 11.5px; }
.hd .hd-hv-app-list div > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .hd-hv-app-list em { margin-left: auto; font-style: normal; font-weight: 700; color: #059669; }
.hd .hd-hv-app-tabs { display: flex; justify-content: space-around; margin-top: 12px; padding: 9px; border-radius: 16px; background: #fff; color: #94A3B8; font-size: 13px; }
.hd .hd-hv-app-tabs i:first-child { color: var(--svc-c1); }

/* api: request / response */
.hd .hd-hv-req { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-family: var(--hd-mono); font-size: 11.5px; }
.hd .hd-hv-method { padding: 2px 7px; border-radius: 6px; background: #10B981; color: #fff; font-size: 10px; font-weight: 700; }
.hd .hd-hv-method.post { background: #F59E0B; } .hd .hd-hv-method.put { background: var(--hd-indigo); } .hd .hd-hv-method.del { background: #F43F5E; }
.hd .hd-hv-req .ok { margin-left: auto; color: #6EE7B7; }
.hd .hd-hv-json { margin: 12px 0 0; padding: 0; white-space: pre; font-family: var(--hd-mono); font-size: 11.5px; line-height: 1.8; color: #CBD5E1; overflow: hidden; }
.hd .hd-hv-json .k { color: #67E8F9; } .hd .hd-hv-json .s { color: var(--hd-lime); } .hd .hd-hv-json .n { color: #FCD34D; } .hd .hd-hv-json .p { color: #64748B; }
.hd .hd-hv-endpoints { display: grid; gap: 6px; font-family: var(--hd-mono); font-size: 11px; }
.hd .hd-hv-endpoints span { display: flex; align-items: center; gap: 8px; }

/* seo: search results */
.hd .hd-hv-search { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 99px; background: #fff; color: var(--hd-ink); font-size: 12px; }
.hd .hd-hv-search i { color: var(--svc-c1); }
.hd .hd-hv-search em { font-style: normal; }
.hd .hd-hv-search em::after { content: "|"; margin-left: 1px; color: var(--svc-c1); animation: hd-blink 1s steps(1) infinite; }
.hd .hd-hv-results { display: grid; gap: 8px; margin-top: 14px; }
.hd .hd-hv-result { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.hd .hd-hv-result .pos { grid-row: span 3; font-family: var(--hd-display); font-size: 16px; font-weight: 800; color: #475569; }
.hd .hd-hv-result.top { background: rgba(198, 244, 50, .1); box-shadow: inset 0 0 0 1px rgba(198, 244, 50, .45); animation: hd-climb 1.2s .3s var(--hd-ease) both; }
.hd .hd-hv-result.top .pos { color: var(--hd-lime); }
.hd .hd-hv-result .url { font-family: var(--hd-mono); font-size: 10px; color: #6EE7B7; }
.hd .hd-hv-result b { font-size: 12.5px; color: #93C5FD; }
.hd .hd-hv-result.top b { color: #fff; }

/* ai: chat */
.hd .hd-hv-chat { display: grid; gap: 10px; }
.hd .hd-hv-msg { max-width: 82%; padding: 10px 12px; border-radius: 14px; font-size: 12px; line-height: 1.5; }
.hd .hd-hv-msg.me { justify-self: end; border-bottom-right-radius: 4px; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); color: #fff; }
.hd .hd-hv-msg.bot { display: flex; gap: 10px; border-bottom-left-radius: 4px; background: rgba(255, 255, 255, .07); color: #E2E8F0; }
.hd .hd-hv-msg.bot .hd-hv-tile { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.hd .hd-hv-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hd .hd-hv-tools .hd-hv-pill { font-size: 10px; }
.hd .hd-hv-compose { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 8px 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: #64748B; font-size: 11.5px; }
.hd .hd-hv-compose span { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; background: var(--hd-lime); color: var(--hd-ink); font-size: 11px; }

/* saas: dashboard */
.hd .hd-hv-dash { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.hd .hd-hv-side { display: grid; align-content: start; gap: 10px; justify-items: center; padding-top: 2px; color: #475569; font-size: 13px; }
.hd .hd-hv-side i:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--hd-lime); color: var(--hd-ink); font-size: 12px; }
.hd .hd-hv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hd .hd-hv-kpis div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 10px; color: #94A3B8; }
.hd .hd-hv-kpis b { display: block; margin-top: 2px; font-family: var(--hd-display); font-size: 16px; color: #fff; }
.hd .hd-hv-kpis em { font-style: normal; font-size: 10px; font-weight: 700; color: #6EE7B7; }
.hd .hd-hv-chart { margin-top: 10px; padding: 10px 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.hd .hd-hv-chart svg { display: block; width: 100%; height: 96px; }

@keyframes hd-grow { from { transform: scaleY(0); } }
@keyframes hd-ring { to { stroke-dashoffset: 6; } }
@keyframes hd-shine { 0%, 40% { transform: translateX(-100%); } 80%, 100% { transform: translateX(100%); } }
@keyframes hd-cursor { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-60px, -46px); } 65% { transform: translate(-24px, -80px); } }
@keyframes hd-press { 0%, 80%, 100% { transform: none; } 86% { transform: scale(.95); } }
@keyframes hd-climb { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }

@media (max-width: 639px) {
    .hd .hd-hv { padding: 52px 8px 64px; }
    .hd .hd-hv-body { min-height: 0; padding: 14px; }
    .hd .hd-hv-f { padding: 10px 12px; gap: 10px; }
    .hd .hd-hv-f b { font-size: 12.5px; }
    .hd .hd-hv-f.a { top: 0; right: 0; } .hd .hd-hv-f.b { left: 0; } .hd .hd-hv-f.c { display: none; }
    .hd .hd-hv-canvas { grid-template-columns: 1fr; } .hd .hd-hv-layers { display: none; }
    .hd .hd-hv-shop { grid-template-columns: 1fr; } .hd .hd-hv-product { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-hv-f, .hd .hd-hv-bars i, .hd .hd-hv-ring .fg, .hd .hd-hv-site-art::after, .hd .hd-hv-cursor, .hd .hd-hv-product i, .hd .hd-hv-addcart, .hd .hd-hv-result.top { animation: none; }
    .hd .hd-hv-ring .fg { stroke-dashoffset: 6; }
}
.hd .hd-hv-f.wide { display: block; width: 200px; }
.hd .hd-hv-f.stack { display: block; }

/* service hero visuals: tablet + phone refinements */
@media (min-width: 640px) and (max-width: 1023px) {
    .hd .hd-svc-hero-grid { gap: 32px; }
    .hd .hd-svc-art { max-width: 600px; }
    .hd .hd-hv { padding: 48px 36px 80px; }
}
@media (max-width: 639px) {
    .hd .hd-svc-hero-grid { gap: 24px; }
    .hd .hd-hv .hd-editor, .hd .hd-hv-phone { transform: none; }
    .hd .hd-hv-url { font-size: 10px; }
    .hd .hd-hv-site-hero { gap: 10px; margin-top: 16px; }
    .hd .hd-hv-site-art { height: 84px; font-size: 24px; }
    .hd .hd-hv-site-cards { gap: 6px; margin-top: 14px; }
    .hd .hd-hv-site-cards > div { padding: 9px; }
    .hd .hd-hv-board .hd-hv-row span { height: 32px; }
    .hd .hd-hv-cursor { right: 12px; bottom: 16px; }
    .hd .hd-hv-json { font-size: 10.5px; line-height: 1.7; }
    .hd .hd-hv-req { font-size: 10.5px; }
    .hd .hd-hv-result b { font-size: 11.5px; }
    .hd .hd-hv-msg { max-width: 90%; font-size: 11.5px; }
    .hd .hd-hv-dash { grid-template-columns: 1fr; }
    .hd .hd-hv-side { display: none; }
    .hd .hd-hv-kpis b { font-size: 14px; }
    .hd .hd-hv-chart svg { height: 72px; }
    .hd .hd-hv-phone { width: 214px; }
    .hd .hd-hv-screen { min-height: 330px; }
    .hd .hd-hv-f .hd-hv-ring, .hd .hd-hv-f .hd-hv-ring svg { width: 38px; height: 38px; }
    .hd .hd-hv-f .hd-hv-tile { width: 30px; height: 30px; font-size: 12px; }
    .hd .hd-hv-f.wide { width: 170px; }
}
@media (max-width: 380px) {
    .hd .hd-hv { padding-left: 0; padding-right: 0; }
    .hd .hd-hv-site-cards > div:last-child { display: none; }
    .hd .hd-hv-site-cards { grid-template-columns: repeat(2, 1fr); }
    .hd .hd-hv-kpis div { padding: 8px; }
    .hd .hd-hv-kpis b { font-size: 13px; }
}

/* ==========================================================================
   About page (/Home/AboutUs) - markup lives in Views/Home/AboutUs.cshtml
   Reuses the home hero, stats, marquee, headings and .hd-dark section.
   ========================================================================== */
.hd.hd-about { background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }
.hd .hd-ab-hero-grid { display: grid; gap: 48px; align-items: center; }
.hd .hd-ab-hero-grid > * { min-width: 0; }

/* hero visual: office photo in a circle, ringed by slow orbits and a light streak on its edge */
.hd .hd-ab-orbit { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
.hd .hd-ab-ring { position: absolute; border-radius: 999px; pointer-events: none; }
.hd .hd-ab-ring-outer { inset: 0; border: 1px solid rgba(255, 255, 255, .16); animation: hd-spin 48s linear infinite; }
.hd .hd-ab-ring-inner { inset: 8%; border: 1px dashed rgba(255, 255, 255, .28); animation: hd-spin 32s linear infinite reverse; }
.hd .hd-ab-ring i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 999px; background: var(--hd-lime); box-shadow: 0 0 0 4px rgba(198, 244, 50, .2), 0 0 18px var(--hd-lime); }
.hd .hd-ab-ring-inner i { top: auto; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--hd-cyan); box-shadow: 0 0 0 4px rgba(6, 182, 212, .25), 0 0 16px var(--hd-cyan); }
/* light streak travelling around the photo edge (conic gradient masked to a thin ring) */
.hd .hd-ab-comet { position: absolute; inset: calc(16% - 7px); border-radius: 999px; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 55%, rgba(6, 182, 212, .9) 78%, var(--hd-lime) 92%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: hd-spin 5s linear infinite; }
.hd .hd-ab-photo { position: absolute; inset: 16%; overflow: hidden; border-radius: 999px; border: 6px solid rgba(255, 255, 255, .14); background: rgba(11, 16, 32, .3);
    box-shadow: 0 40px 80px -24px rgba(11, 16, 32, .65); animation: hd-zoom-in 1s var(--hd-ease) both; }
.hd .hd-ab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scale(1.08); transition: transform 1.2s var(--hd-ease); }
.hd .hd-ab-orbit:hover .hd-ab-photo img { transform: scale(1.16); }
.hd .hd-ab-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(11, 16, 32, .5); }
.hd .hd-ab-badge-loc { left: 0; top: 18%; background: rgba(255, 255, 255, .95); color: var(--hd-ink); animation: hd-bob 6s ease-in-out infinite; }
.hd .hd-ab-badge-loc i { color: var(--hd-brand); }
.hd .hd-ab-badge-est { right: 2%; bottom: 14%; background: var(--hd-lime); color: var(--hd-ink); font-family: var(--hd-display); animation: hd-bob 7s ease-in-out -3s infinite; }
.hd .hd-ab-badge-est b { font-weight: 500; opacity: .7; }
@keyframes hd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hd .hd-ab-ring, .hd .hd-ab-comet, .hd .hd-ab-photo, .hd .hd-ab-badge { animation: none; }
    .hd .hd-ab-photo img { transition: none; }
}

/* why we are here */
.hd .hd-ab-why { padding: 40px 0 48px; }
.hd .hd-ab-why-head { display: grid; gap: 24px; }
.hd .hd-ab-why-copy p { font-size: 18px; line-height: 1.7; }
.hd .hd-ab-why-copy p + p { margin-top: 20px; }
.hd .hd-ab-why-copy .hd-ab-strong { color: var(--hd-ink); }

/* bento */
.hd .hd-bento { display: grid; gap: 16px; margin-top: 56px; }
.hd .hd-bento-card { position: relative; overflow: hidden; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-bento-card h3 { font-family: var(--hd-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--hd-ink); }
.hd .hd-bento-card p { margin-top: 10px; }
.hd .hd-bento-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hd .hd-bento-ic { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 17px; }
.hd .hd-bento-ic.indigo { background: rgba(79, 70, 229, .1); color: var(--hd-indigo); }
.hd .hd-bento-ic.cyan { background: rgba(6, 182, 212, .12); color: #0891B2; }
.hd .hd-bento-mission { display: flex; flex-direction: column; min-height: 320px; padding: 36px 36px 64px; background: var(--hd-grad); color: rgba(255, 255, 255, .85); box-shadow: none; }
.hd .hd-bento-mission h3 { margin-top: auto; padding-top: 48px; font-size: 30px; color: #fff; }
.hd .hd-bento-mission p { max-width: 420px; font-size: 18px; }
.hd .hd-bento-code { position: absolute; right: 32px; bottom: 24px; font-family: var(--hd-mono); font-size: 12px; color: rgba(255, 255, 255, .5); }
.hd .hd-bento-photo { min-height: 220px; padding: 0; background: var(--hd-ink); }
.hd .hd-bento-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd .hd-bento-commit { background: var(--hd-lime); color: rgba(11, 16, 32, .75); box-shadow: none; }
.hd .hd-bento-commit > i { font-size: 20px; color: var(--hd-ink); }
.hd .hd-bento-commit h3 { margin-top: 24px; }
.hd .hd-bento-commit p { font-size: 14px; }
.hd .hd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hd .hd-chips li { padding: 8px 16px; border-radius: 999px; background: var(--hd-paper); font-size: 14px; font-weight: 500; color: var(--hd-ink); }

/* founder */
.hd .hd-ab-founder-sec { padding: 48px 0; }
.hd .hd-founder { display: grid; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-founder-photo { position: relative; min-height: 380px; background: linear-gradient(180deg, var(--hd-paper), #E8ECF8); }
.hd .hd-founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hd .hd-founder-badge { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; color: var(--hd-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hd .hd-founder-badge i { color: var(--hd-brand); }
.hd .hd-founder-body { display: flex; flex-direction: column; justify-content: center; padding: 36px 28px; }
.hd .hd-founder-body blockquote { margin-top: 20px; font-family: var(--hd-display); font-size: 26px; font-weight: 600; line-height: 1.35; color: var(--hd-ink); }
.hd .hd-founder-body > p:not(.hd-kick) { margin-top: 20px; }
.hd .hd-founder-sign { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hd-line); }
.hd .hd-founder-sign b { display: block; font-family: var(--hd-display); color: var(--hd-ink); }
.hd .hd-founder-sign span { font-size: 14px; }

/* team */
.hd .hd-ab-team { padding-top: 64px; }
.hd .hd-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.hd .hd-member { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 24px; background: linear-gradient(180deg, #E9EDF7, #D6DCEF); }
.hd .hd-member img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--hd-ease), filter .5s; }
.hd .hd-member figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .92); font-size: 12px; line-height: 1.4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hd .hd-member figcaption b { display: block; font-family: var(--hd-display); font-size: 14px; color: var(--hd-ink); }
/* greyscale -> colour only where hover exists, so touch screens always show colour */
@media (hover: hover) {
    .hd .hd-member img { filter: grayscale(1); }
    .hd .hd-member:hover img { filter: none; transform: scale(1.05); }
}

/* testimonials */
.hd.hd-about .hd-work-head { flex-wrap: wrap; }
.hd .hd-ab-trust { display: flex; align-items: center; gap: 8px; }
.hd .hd-ab-trust .stars { color: var(--hd-lime); letter-spacing: 2px; }
.hd .hd-ab-quotes { display: grid; gap: 16px; margin-top: 48px; }
.hd .hd-ab-quote { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); transition: transform .3s var(--hd-ease), border-color .3s; }
.hd .hd-ab-quote:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .25); }
.hd .hd-ab-quote-top { display: flex; align-items: center; justify-content: space-between; }
.hd .hd-ab-quote-top span { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; color: rgba(255, 255, 255, .8); }
.hd .hd-ab-quote-top i { font-size: 24px; color: var(--hd-lime); }
.hd .hd-ab-quote blockquote { flex: 1; margin-top: 24px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.hd .hd-ab-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; color: rgba(255, 255, 255, .6); }
.hd .hd-ab-quote figcaption img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.hd .hd-ab-quote figcaption b { display: block; font-size: 14px; color: #fff; }

/* cta */
.hd .hd-ab-cta-sec { padding: 80px 0; }
.hd .hd-ab-cta { position: relative; overflow: hidden; padding: 56px 28px; border-radius: 32px; background: var(--hd-grad); color: rgba(255, 255, 255, .85); }
.hd .hd-ab-cta h2 { position: relative; margin-top: 16px; max-width: 680px; font-family: var(--hd-display); font-size: 34px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.hd .hd-ab-cta-sub { position: relative; margin-top: 16px; max-width: 560px; font-size: 17px; }
.hd .hd-ab-cta .hd-hero-ctas { position: relative; }
.hd .hd-ab-hiring { padding: 2px 8px; border-radius: 999px; background: rgba(52, 211, 153, .2); font-family: var(--hd-body); font-size: 10px; color: #A7F3D0; }

@media (min-width: 640px) {
    .hd .hd-team { grid-template-columns: repeat(3, 1fr); }
    .hd .hd-founder-body { padding: 48px; }
    .hd .hd-founder-body blockquote { font-size: 30px; }
    .hd .hd-ab-cta { padding: 64px 56px; border-radius: 40px; }
    .hd .hd-ab-cta h2 { font-size: 48px; }
}
@media (min-width: 768px) {
    .hd .hd-bento { grid-template-columns: repeat(4, 1fr); }
    .hd .hd-bento-mission { grid-column: span 2; grid-row: span 2; }
    .hd .hd-bento-vision { grid-column: span 2; }
    .hd .hd-bento-expertise { grid-column: span 4; }
    .hd .hd-bento-photo { min-height: 0; }
    .hd .hd-team { grid-template-columns: repeat(4, 1fr); }
    .hd .hd-ab-quotes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .hd .hd-ab-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; }
    .hd .hd-ab-h1 { font-size: 54px; }
    .hd .hd-ab-orbit { max-width: 440px; margin-right: 0; }
    .hd .hd-ab-why-head { grid-template-columns: 1fr 1.1fr; gap: 48px; }
    .hd .hd-founder { grid-template-columns: .9fr 1.1fr; }
}
@media (min-width: 1280px) {
    .hd .hd-ab-h1 { font-size: 64px; }
}
@media (max-width: 639px) {
    .hd .hd-bento-mission { min-height: 280px; padding: 28px 28px 56px; }
    .hd .hd-bento-code { right: 28px; bottom: 22px; }
    .hd .hd-bento-mission h3 { font-size: 26px; }
    .hd .hd-founder-photo { min-height: 320px; }
    .hd .hd-ab-cta-sec { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-member img, .hd .hd-ab-quote { transition: none; }
}

/* ==========================================================================
   Hire developer page (/Developers/{expertise}) - markup lives in Views/Developers/Index.cshtml
   Reuses the service hero (.hd-svc-hero, .hd-crumb, .hd-svc-h1), .hd-svc-h2, .hd-kick, .hd-ic and .hd-why-card.
   ========================================================================== */
.hd.hd-hire { --svc-c1: var(--hd-brand); --svc-c2: var(--hd-indigo); background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }
.hd .hd-hire-head { display: grid; gap: 16px; align-items: end; }
.hd .hd-hire-head p { max-width: 460px; font-size: 15.5px; line-height: 1.7; }
.hd .hd-hire-head b { color: var(--hd-ink); }

/* hero extras */
.hd .hd-hire-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; animation: hd-rise .8s .22s var(--hd-ease) both; }
.hd .hd-hire-chips li { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); font-size: 12.5px; color: #fff; }
.hd .hd-hire-ticks { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; font-size: 14px; color: rgba(255, 255, 255, .85); animation: hd-rise .8s .34s var(--hd-ease) both; }
.hd .hd-hire-ticks i { margin-right: 8px; color: var(--hd-lime); }
.hd .hd-svc-hero .hd-btn-ghost i { font-size: 15px; }
.hd-hire .hd-svc-hero .hd-btn-pill { white-space: nowrap; }

/* talent card visual */
.hd .hd-hire-art { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 0 124px; animation: hd-zoom-in 1s .15s var(--hd-ease) both; }
.hd .hd-hire-profile { position: relative; z-index: 1; padding: 22px; border-radius: 26px; background: #fff; color: var(--hd-ink); box-shadow: 0 40px 80px -30px rgba(11, 16, 32, .55); animation: hd-bob 6s ease-in-out infinite; }
.hd .hd-hire-profile-head { display: flex; align-items: center; gap: 14px; }
.hd .hd-hire-profile-head > div { flex: 1; min-width: 0; }
.hd .hd-hire-profile-head b { display: block; font-family: var(--hd-display); font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.hd .hd-hire-profile-head small { font-size: 12px; color: #64748B; }
.hd .hd-hire-avatar { display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, var(--hd-brand), var(--hd-indigo)); font-size: 22px; color: #fff; }
.hd .hd-hire-avail { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(198, 244, 50, .45); font-size: 11px; font-weight: 600; }
.hd .hd-hire-avail i { width: 7px; height: 7px; border-radius: 999px; background: #16A34A; animation: hd-pulse 1.8s ease-out infinite; }
.hd .hd-hire-profile-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.hd .hd-hire-profile-skills li { padding: 4px 10px; border-radius: 8px; background: var(--hd-paper); font-size: 11.5px; font-weight: 500; color: #475569; }
.hd .hd-hire-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hd-line); text-align: center; }
.hd .hd-hire-profile-stats b { display: block; font-family: var(--hd-display); font-size: 19px; font-weight: 700; }
.hd .hd-hire-profile-stats small { font-size: 12px; color: #64748B; }
.hd .hd-hire-timeline { position: absolute; z-index: 2; left: -18px; bottom: 0; width: 236px; padding: 16px; border-radius: 18px; background: var(--hd-ink); color: #fff; box-shadow: 0 30px 50px -20px rgba(11, 16, 32, .6); animation: hd-bob 7s -2s ease-in-out infinite; }
.hd .hd-hire-timeline p { font-family: var(--hd-mono); font-size: 11px; color: var(--hd-lime); }
.hd .hd-hire-timeline div { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; }
.hd .hd-hire-timeline small { color: rgba(255, 255, 255, .5); }
.hd .hd-hire-timeline .lime { color: var(--hd-lime); }
.hd .hd-hire-badge { position: absolute; z-index: 2; right: -14px; top: 0; padding: 10px 16px; border-radius: 18px; background: var(--hd-lime); color: var(--hd-ink); transform: rotate(6deg); box-shadow: 0 20px 40px -16px rgba(11, 16, 32, .5); }
.hd .hd-hire-badge b { display: block; font-family: var(--hd-display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.hd .hd-hire-badge small { font-size: 12px; color: rgba(11, 16, 32, .7); }

/* pick your expertise tabs */
.hd .hd-hire-pick { padding: 72px 0 32px; }
.hd .hd-hire-tabs { display: flex; gap: 12px; margin-top: 32px; padding: 4px 2px 12px; overflow-x: auto; scrollbar-width: none; }
.hd .hd-hire-tabs::-webkit-scrollbar { display: none; }
.hd .hd-hire-tabs a { display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--hd-line); background: #fff; font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: var(--hd-ink);
    transition: transform .3s var(--hd-ease), box-shadow .3s, background-color .3s, color .3s; }
.hd .hd-hire-tabs a i { font-size: 18px; color: var(--hd-brand); transition: color .3s; }
.hd .hd-hire-tabs a:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(11, 16, 32, .4); color: var(--hd-ink); }
.hd .hd-hire-tabs a.is-on, .hd .hd-hire-tabs a.is-on:hover { border-color: var(--hd-ink); background: var(--hd-ink); color: #fff; }
.hd .hd-hire-tabs a.is-on i { color: var(--hd-lime); }

/* why (bento) */
.hd .hd-hire-why { padding: 48px 0 88px; }
.hd .hd-hire-why-title { margin-top: 12px; max-width: 720px; }
.hd .hd-hire-bento { display: grid; gap: 16px; margin-top: 44px; }
.hd .hd-hire-bento-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: var(--hd-grad); color: rgba(255, 255, 255, .85); }
.hd .hd-hire-bento-hero > * { position: relative; z-index: 1; }
.hd .hd-hire-bento-hero .big { font-family: var(--hd-display); font-size: 64px; font-weight: 800; line-height: 1; color: #fff; }
.hd .hd-hire-bento-hero p { margin-top: 12px; max-width: 320px; }
.hd .hd-hire-bento-hero .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hd .hd-hire-bento-hero .nums b { display: block; font-family: var(--hd-display); font-size: 30px; font-weight: 700; color: #fff; }
.hd .hd-hire-bento-hero .nums b.lime { color: var(--hd-lime); }
.hd .hd-hire-bento-hero .nums small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.hd .hd-hire-bento .hd-why-card { box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-why-card.is-dark { background: var(--hd-ink); }
.hd .hd-why-card.is-dark h3 { color: #fff; }
.hd .hd-why-card.is-dark p { color: #94A3B8; }
.hd .hd-why-card.is-dark .hd-ic { background: rgba(198, 244, 50, .12); color: var(--hd-lime); box-shadow: none; }

/* comparison */
.hd .hd-hire-compare { padding: 0 0 88px; }
.hd .hd-hire-table { margin-top: 40px; overflow-x: auto; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-hire-table table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; font-size: 14.5px; }
.hd .hd-hire-table th, .hd .hd-hire-table td { padding: 18px 22px; border-bottom: 1px solid var(--hd-line); }
.hd .hd-hire-table tbody tr:last-child > * { border-bottom: 0; }
.hd .hd-hire-table thead th { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.hd .hd-hire-table thead th.us { background: var(--hd-ink); font-family: var(--hd-display); font-size: 15px; letter-spacing: 0; text-transform: none; color: #fff; }
.hd .hd-hire-table tbody th { font-weight: 600; color: var(--hd-ink); }
.hd .hd-hire-table td.us { background: rgba(11, 16, 32, .03); font-weight: 600; color: var(--hd-ink); }
.hd .hd-hire-table i { font-size: 17px; }
.hd .hd-hire-table td.us i.yes { margin-right: 8px; }
.hd .hd-hire-table .yes { color: #16A34A; }
.hd .hd-hire-table .part { color: #CBD5E1; }
.hd .hd-hire-table .no { color: #FB7185; }

/* engagement models */
.hd .hd-hire-plans { padding: 88px 0; background: #fff; }
.hd .hd-hire-plan-grid { display: grid; gap: 16px; margin-top: 40px; }
.hd .hd-hire-plan { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 24px; border: 1px solid var(--hd-line); transition: transform .4s var(--hd-ease), box-shadow .4s; }
.hd .hd-hire-plan:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(11, 16, 32, .4); }
.hd .hd-hire-plan h3 { margin-top: 12px; font-family: var(--hd-display); font-size: 24px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-hire-plan > p:not(.hd-kick) { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }
.hd .hd-hire-plan ul { display: grid; gap: 8px; margin-top: 22px; font-size: 14.5px; }
.hd .hd-hire-plan li::before { content: "\f00c"; margin-right: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; color: var(--hd-brand); }
.hd .hd-hire-plan.is-featured { border-color: var(--hd-ink); background: var(--hd-ink); color: #94A3B8; box-shadow: 0 30px 60px -30px rgba(11, 16, 32, .7); }
.hd .hd-hire-plan.is-featured h3 { color: #fff; }
.hd .hd-hire-plan.is-featured .hd-kick, .hd .hd-hire-plan.is-featured li::before { color: var(--hd-lime); }
.hd .hd-hire-plan.is-featured ul { margin-bottom: 28px; }
.hd .hd-hire-tag { position: absolute; top: 22px; right: 22px; padding: 4px 12px; border-radius: 999px; background: var(--hd-lime); font-size: 11px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-hire-plan-btn { display: flex; justify-content: center; margin-top: auto; padding: 14px; border-radius: 999px; background: var(--hd-lime); font-family: var(--hd-display); font-weight: 700; color: var(--hd-ink); transition: transform .3s var(--hd-ease); }
.hd .hd-hire-plan-btn:hover { transform: translateY(-2px); color: var(--hd-ink); }

/* process */
.hd .hd-hire-steps { padding: 88px 0; }
.hd .hd-hire-step-grid { display: grid; gap: 16px; margin-top: 40px; }
.hd .hd-hire-step-grid li { padding: 26px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); transition: transform .4s var(--hd-ease); }
.hd .hd-hire-step-grid li:hover { transform: translateY(-4px); }
.hd .hd-hire-step-grid span { font-family: var(--hd-display); font-size: 40px; font-weight: 800; line-height: 1; color: rgba(11, 16, 32, .1); }
.hd .hd-hire-step-grid h3 { margin-top: 10px; font-family: var(--hd-display); font-size: 17px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-hire-step-grid p { margin-top: 4px; font-size: 14.5px; }
.hd .hd-hire-step-grid li.is-last { background: var(--hd-lime); color: rgba(11, 16, 32, .75); box-shadow: none; }
.hd .hd-hire-step-grid li.is-last span { color: rgba(11, 16, 32, .2); }

/* technologies */
.hd .hd-hire-tech { padding: 64px 0; border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); background: #fff; }
.hd .hd-hire-tech-title { font-family: var(--hd-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.01em; color: var(--hd-ink); }
.hd .hd-hire-tech-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.hd .hd-hire-tech-grid li { display: grid; justify-items: center; gap: 10px; padding: 20px 8px; border-radius: 18px; border: 1px solid var(--hd-line); text-align: center; transition: transform .3s var(--hd-ease), box-shadow .3s; }
.hd .hd-hire-tech-grid li:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(11, 16, 32, .35); }
.hd .hd-hire-tech-grid i { font-size: 38px; line-height: 1; }
.hd .hd-hire-tech-grid span { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--hd-ink); }

/* FAQ */
.hd .hd-hire-faq { padding: 88px 0; }
.hd .hd-hire-faq-grid { display: grid; gap: 32px; }
.hd .hd-hire-faq-grid h2 { margin-top: 12px; }
.hd .hd-hire-faq-list { border-top: 1px solid var(--hd-line); }
.hd .hd-hire-faq-list details { border-bottom: 1px solid var(--hd-line); }
.hd .hd-hire-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none; font-family: var(--hd-display); font-size: 16.5px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-hire-faq-list summary::-webkit-details-marker { display: none; }
.hd .hd-hire-faq-list summary i { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: #fff; font-size: 13px; color: var(--hd-brand); transition: transform .35s var(--hd-ease), background-color .3s, color .3s; }
.hd .hd-hire-faq-list details[open] summary i { transform: rotate(45deg); background: var(--hd-ink); color: var(--hd-lime); }
.hd .hd-hire-faq-list details p { padding: 0 4px 22px; font-size: 15px; line-height: 1.7; }

/* CTA */
.hd .hd-hire-cta-outer { padding: 0 8px 8px; }
.hd .hd-hire-cta { position: relative; overflow: hidden; padding: 64px 0; border-radius: 28px; background: var(--hd-grad); color: #fff; }
.hd .hd-hire-cta .hd-wrap { position: relative; z-index: 1; }
.hd .hd-hire-cta > .hd-ring { top: -120px; right: -120px; }
.hd .hd-hire-cta-kick { font-size: 12px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hd .hd-hire-cta h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; font-family: var(--hd-display); font-size: clamp(36px, 6vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.hd .hd-hire-cta h2 span { color: var(--hd-lime); }

@media (min-width: 640px) {
    .hd .hd-hire-bento, .hd .hd-hire-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd .hd-hire-bento-hero { grid-column: span 2; }
    .hd .hd-hire-cta-outer { padding: 0 12px 12px; }
    .hd .hd-hire-cta { padding: 88px 0; border-radius: 40px; }
}
@media (min-width: 768px) {
    .hd .hd-hire-head { grid-template-columns: 1fr auto; gap: 40px; }
    .hd .hd-hire-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd .hd-hire-tech-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .hd .hd-hire-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd .hd-hire-bento-hero { grid-column: auto; grid-row: span 2; }
    .hd .hd-hire-step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hd .hd-hire-faq-grid { grid-template-columns: .8fr 1.2fr; gap: 48px; }
}
@media (max-width: 639px) {
    .hd .hd-hire-pick { padding-top: 56px; }
    .hd .hd-hire-why, .hd .hd-hire-compare { padding-bottom: 64px; }
    .hd .hd-hire-plans, .hd .hd-hire-steps, .hd .hd-hire-faq { padding: 64px 0; }
    .hd .hd-hire-art { padding: 40px 0 0; }
    .hd .hd-hire-cta h2 { font-size: 34px; }
    .hd .hd-hire-timeline { display: none; }
    .hd .hd-hire-badge { right: 0; top: 4px; padding: 8px 12px; }
    .hd .hd-hire-badge b { font-size: 18px; }
    .hd .hd-hire-profile-head { flex-wrap: wrap; }
    .hd .hd-hire-ticks { margin-top: 28px; }
    .hd .hd-hire-tabs a { padding: 13px 16px; }
    .hd .hd-hire-cta .hd-hero-ctas .hd-btn-pill { width: 100%; }
    .hd .hd-hire-cta .hd-btn-white { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-hire-chips, .hd .hd-hire-ticks, .hd .hd-hire-art, .hd .hd-hire-profile, .hd .hd-hire-timeline, .hd .hd-hire-avail i { animation: none; }
    .hd .hd-hire-tabs a, .hd .hd-hire-plan, .hd .hd-hire-step-grid li, .hd .hd-hire-tech-grid li { transition: none; }
}

/* ==========================================================================
   Portfolio page (/Home/Portfolio) - markup lives in Views/Home/Portfolio.cshtml
   Reuses the home hero, stats, marquee, .hd-h2 and .hd-kick.
   ========================================================================== */
.hd.hd-pf { background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }
.hd [hidden] { display: none !important; }
.hd .hd-pf-h1 { max-width: 900px; }
.hd .hd-pf-hero-foot { display: grid; gap: 8px; align-items: end; }
.hd .hd-pf-hero-foot .hd-hero-ctas { margin-top: 28px; }

.hd .hd-pf-marquee { padding: 40px 0; }
.hd .hd-pf-marquee .hd-marquee-track { gap: 48px; font-size: 32px; font-weight: 700; color: rgba(11, 16, 32, .25); animation-duration: 40s; }
.hd .hd-pf-marquee .hd-marquee-track i { font-size: .6em; color: rgba(15, 117, 189, .4); }

.hd .hd-pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.hd .hd-pf-hint { font-size: 12px; color: rgba(11, 16, 32, .4); }

/* featured case studies */
.hd .hd-pf-featured { padding: 48px 0 32px; }
.hd .hd-pf-cases { display: grid; gap: 28px; margin-top: 48px; }
.hd .hd-pf-case { display: grid; gap: 32px; align-items: center; padding: 20px; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-pf-case > * { min-width: 0; }
.hd .hd-pf-browser { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -30px rgba(11, 16, 32, .45), 0 0 0 1px rgba(11, 16, 32, .1); }
.hd .hd-pf-browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(11, 16, 32, .05); background: var(--hd-paper); }
.hd .hd-pf-browser-bar i { width: 10px; height: 10px; border-radius: 999px; background: #FF5F57; }
.hd .hd-pf-browser-bar i:nth-child(2) { background: #FEBC2E; }
.hd .hd-pf-browser-bar i:nth-child(3) { background: #28C840; }
.hd .hd-pf-browser-bar span { flex: 1; min-width: 0; margin-left: 10px; padding: 4px 12px; overflow: hidden; border-radius: 6px; background: #fff; font-family: var(--hd-mono); font-size: 11px; color: rgba(11, 16, 32, .5); white-space: nowrap; text-overflow: ellipsis; }
.hd .hd-pf-browser-shot { height: 260px; overflow: hidden; background: var(--hd-paper); }
/* screenshot pans from top to bottom on hover */
.hd .hd-pf-browser-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 4s ease; }
.hd .hd-pf-browser:hover .hd-pf-browser-shot img { object-position: 50% 100%; }
.hd .hd-pf-case-body h3 { margin-top: 12px; font-family: var(--hd-display); font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--hd-ink); }
.hd .hd-pf-case-kind { margin-top: 6px; font-family: var(--hd-display); font-size: 17px; color: rgba(11, 16, 32, .5); }
.hd .hd-pf-case-text { margin-top: 18px; font-size: 16px; line-height: 1.7; }
.hd .hd-pf-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 24px 0 0; overflow: hidden; border-radius: 18px; background: rgba(11, 16, 32, .08); }
.hd .hd-pf-metrics div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px 18px; background: var(--hd-paper); }
.hd .hd-pf-metrics dd { margin: 0; font-family: var(--hd-display); font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--hd-ink); }
.hd .hd-pf-metrics dt { font-size: 12.5px; font-weight: 400; color: var(--hd-text); }
.hd .hd-pf-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hd .hd-pf-stack li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(11, 16, 32, .1); font-size: 12px; font-weight: 500; color: var(--hd-ink); }
.hd .hd-pf-case-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 28px; }
.hd .hd-pf-btn-ink { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; background: var(--hd-ink); font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: #fff; transition: background-color .25s; }
.hd .hd-pf-btn-ink:hover, .hd .hd-pf-btn-ink:focus { background: var(--hd-brand); color: #fff; }
.hd .hd-pf-btn-ink i { font-size: 11px; }
.hd .hd-pf-btn-text { display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--hd-ink); transition: background-color .25s; }
.hd .hd-pf-btn-text:hover { background: var(--hd-paper); color: var(--hd-ink); }
.hd .hd-pf-btn-text i { font-size: 11px; transition: transform .25s var(--hd-ease); }
.hd .hd-pf-btn-text:hover i { transform: translateX(3px); }

/* all projects */
.hd .hd-pf-work { padding: 80px 0 40px; scroll-margin-top: 16px; }
.hd .hd-pf-count { font-size: 14px; color: rgba(11, 16, 32, .5); }
.hd .hd-pf-count b { color: var(--hd-ink); }
.hd .hd-pf-chips { position: sticky; top: 12px; z-index: 30; display: flex; gap: 8px; margin: 24px -8px 0; padding: 8px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(245, 246, 250, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hd .hd-pf-chips::-webkit-scrollbar { display: none; }
.hd .hd-pf-chip { flex-shrink: 0; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(11, 16, 32, .1); background: #fff; font-size: 14px; font-weight: 500; color: var(--hd-ink); transition: border-color .2s, background-color .2s, color .2s; }
.hd .hd-pf-chip sup { margin-left: 2px; font-family: var(--hd-mono); font-size: 10px; opacity: .5; }
.hd .hd-pf-chip:hover { border-color: rgba(11, 16, 32, .4); }
.hd .hd-pf-chip.is-on { border-color: var(--hd-ink); background: var(--hd-ink); color: #fff; }
.hd .hd-pf-grid { display: grid; gap: 20px; margin-top: 28px; }
.hd .hd-pf-card { position: relative; display: flex; flex-direction: column; padding: 12px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); transition: transform .35s var(--hd-ease), box-shadow .35s; }
.hd .hd-pf-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -24px rgba(11, 16, 32, .35), 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-pf-card-img { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 16px; background: var(--hd-paper); }
.hd .hd-pf-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .7s var(--hd-ease); }
.hd .hd-pf-card:hover .hd-pf-card-img img { transform: scale(1.05); }
.hd .hd-pf-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px 8px 8px; }
.hd .hd-pf-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hd .hd-pf-card-title h3 { font-family: var(--hd-display); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--hd-ink); }
.hd .hd-pf-card-title h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.hd .hd-pf-card-title span { flex-shrink: 0; font-size: 12px; color: rgba(11, 16, 32, .45); }
.hd .hd-pf-card-body > p { margin-top: 8px; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd .hd-pf-card-body > p.hd-pf-card-stack { margin-top: auto; padding-top: 16px; font-size: 11px; color: rgba(11, 16, 32, .5); -webkit-line-clamp: 1; }
.hd .hd-pf-card-go { position: absolute; right: 24px; top: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--hd-lime); color: var(--hd-ink); opacity: 0; transform: scale(.75); transition: opacity .3s, transform .3s var(--hd-ease); pointer-events: none; }
.hd .hd-pf-card:hover .hd-pf-card-go, .hd .hd-pf-card:focus-within .hd-pf-card-go { opacity: 1; transform: none; }
.hd .hd-pf-empty { margin-top: 32px; text-align: center; color: rgba(11, 16, 32, .5); }

/* testimonial + cta */
.hd .hd-pf-close { padding: 64px 0 80px; }
.hd .hd-pf-close-card { display: grid; overflow: hidden; border-radius: 32px; background: var(--hd-ink); color: #fff; }
.hd .hd-pf-quotes { position: relative; display: grid; padding: 40px 28px; }
.hd .hd-pf-quote-mark { font-size: 30px; color: var(--hd-lime); }
.hd .hd-pf-quote { grid-area: 2 / 1; margin-top: 24px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s, transform .5s var(--hd-ease), visibility .5s; }
.hd .hd-pf-quote.is-on { opacity: 1; visibility: visible; transform: none; }
.hd .hd-pf-quote blockquote { font-family: var(--hd-display); font-size: 22px; font-weight: 600; line-height: 1.4; color: #fff; }
.hd .hd-pf-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.hd .hd-pf-quote figcaption img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.hd .hd-pf-quote figcaption b { display: block; color: #fff; }
.hd .hd-pf-dots { grid-area: 3 / 1; display: flex; gap: 8px; margin-top: 28px; }
.hd .hd-pf-dots button { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: width .3s var(--hd-ease), background-color .3s; }
.hd .hd-pf-dots button.is-on { width: 28px; background: var(--hd-lime); }
.hd .hd-pf-cta { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px 28px; background: var(--hd-grad); }
.hd .hd-pf-cta > * { position: relative; z-index: 1; }
.hd .hd-pf-cta h2 { font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.hd .hd-pf-cta p { margin-top: 12px; color: rgba(255, 255, 255, .8); }
.hd .hd-pf-cta .hd-hero-ctas { margin-top: 28px; flex-direction: column; align-items: flex-start; }
.hd .hd-pf-cta .hd-btn-pill { white-space: nowrap; }
.hd .hd-pf-btn-lime { background: var(--hd-lime); color: var(--hd-ink); padding: 8px 8px 8px 28px; }
.hd .hd-pf-btn-lime:hover, .hd .hd-pf-btn-lime:focus { background: #fff; color: var(--hd-ink); }
.hd .hd-pf-btn-lime .hd-btn-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--hd-ink); color: #fff; transition: transform .3s var(--hd-ease); }
.hd .hd-pf-btn-lime:hover .hd-btn-icon { transform: rotate(45deg); }

@media (min-width: 640px) {
    .hd .hd-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd .hd-pf-case { padding: 32px; }
    .hd .hd-pf-browser-shot { height: 340px; }
    .hd .hd-pf-metrics { grid-template-columns: repeat(4, 1fr); }
    .hd .hd-pf-marquee .hd-marquee-track { font-size: 40px; }
    .hd .hd-pf-quotes, .hd .hd-pf-cta { padding: 56px 48px; }
    .hd .hd-pf-cta h2 { font-size: 38px; }
    .hd .hd-pf-quote blockquote { font-size: 26px; }
    .hd .hd-pf-close-card { border-radius: 40px; }
}
@media (min-width: 1024px) {
    .hd .hd-pf-hero-foot { grid-template-columns: 1fr auto; gap: 40px; }
    .hd .hd-pf-hero-foot .hd-hero-ctas { margin-top: 0; }
    .hd .hd-pf-case { grid-template-columns: 1fr 1fr; gap: 48px; padding: 40px; }
    .hd .hd-pf-case.is-flip .hd-pf-browser { order: 2; }
    .hd .hd-pf-case-body h3 { font-size: 40px; }
    .hd .hd-pf-metrics { grid-template-columns: repeat(2, 1fr); }
    .hd .hd-pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .hd .hd-pf-close-card { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 1280px) {
    .hd .hd-pf-metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 639px) {
    .hd .hd-pf-hint { display: none; }
    .hd .hd-pf-featured { padding-top: 24px; }
    .hd .hd-pf-cases { margin-top: 32px; gap: 20px; }
    .hd .hd-pf-case { border-radius: 24px; }
    .hd .hd-pf-case-body h3 { font-size: 28px; }
    .hd .hd-pf-work { padding-top: 56px; }
    .hd .hd-pf-close { padding: 40px 0 56px; }
    .hd .hd-pf-close-card { border-radius: 24px; }
    .hd .hd-pf-cta .hd-hero-ctas .hd-btn-pill { width: 100%; }
    .hd .hd-pf-cta .hd-pf-btn-lime { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-pf-browser-shot img, .hd .hd-pf-card, .hd .hd-pf-card-img img, .hd .hd-pf-quote, .hd .hd-pf-card-go { transition: none; }
}

/* ==========================================================================
   Blogs page (/Home/Blogs) - markup lives in Views/Home/Blogs.cshtml
   Share buttons open #shareModal from _ShareBlogPartial (.share-btn + data-url).
   ========================================================================== */
.hd.hd-bl { background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }
.hd .hd-bl-h1 { max-width: 900px; }
.hd .hd-bl-hero-foot { display: grid; gap: 28px; align-items: end; }
.hd .hd-bl-search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; padding: 6px 6px 6px 22px; border-radius: 999px; background: #fff; box-shadow: 0 20px 40px -20px rgba(11, 16, 32, .5); }
.hd .hd-bl-search i { color: rgba(11, 16, 32, .4); }
.hd .hd-bl-search input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font-size: 15px; color: var(--hd-ink); }
.hd .hd-bl-search input::placeholder { color: rgba(11, 16, 32, .4); }
.hd .hd-bl-search button { flex-shrink: 0; padding: 12px 22px; border-radius: 999px; background: var(--hd-ink); font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: #fff; transition: background-color .25s; }
.hd .hd-bl-search button:hover { background: var(--hd-brand); }

.hd .hd-bl-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hd .hd-bl-section-head h2 { font-family: var(--hd-display); font-size: 24px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-bl-section-head span { font-size: 12px; color: rgba(11, 16, 32, .4); }

/* featured post */
.hd .hd-bl-featured { padding: 56px 0 0; scroll-margin-top: 16px; }
.hd .hd-bl-lead { position: relative; display: flex; align-items: flex-end; min-height: 420px; margin-top: 20px; overflow: hidden; border-radius: 28px; background: var(--hd-ink); }
.hd .hd-bl-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: transform .8s var(--hd-ease); }
.hd .hd-bl-lead:hover img { transform: scale(1.04); }
.hd .hd-bl-lead::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--hd-ink) 0%, rgba(11, 16, 32, .55) 45%, rgba(11, 16, 32, .05) 100%); }
.hd .hd-bl-lead-body { position: relative; z-index: 2; max-width: 720px; padding: 28px; color: rgba(255, 255, 255, .75); }
.hd .hd-bl-lead-cat { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--hd-lime); font-size: 12px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-bl-lead h3 { margin-top: 16px; font-family: var(--hd-display); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.hd .hd-bl-lead h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.hd .hd-bl-lead-body > p { margin-top: 12px; font-size: 16px; }
.hd .hd-bl-lead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.hd .hd-bl-lead-foot .hd-bl-read { color: #fff; }
.hd .hd-bl-share.hd-bl-lead-share { position: absolute; right: 20px; top: 20px; z-index: 4; width: 44px; height: 44px; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hd .hd-bl-share.hd-bl-lead-share:hover { background: var(--hd-lime); color: var(--hd-ink); }

/* list + sidebar */
.hd .hd-bl-feed { padding: 56px 0 24px; }
.hd .hd-bl-layout { display: grid; gap: 48px; }
.hd .hd-bl-layout > * { min-width: 0; }
.hd .hd-bl-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hd-line); }
.hd .hd-bl-list-head h2 { font-family: var(--hd-display); font-size: 20px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-bl-list-head span { font-size: 14px; color: rgba(11, 16, 32, .5); }
.hd .hd-bl-list-head b { color: var(--hd-ink); }
.hd .hd-bl-row { position: relative; display: grid; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--hd-line); }
.hd .hd-bl-row > * { min-width: 0; }
.hd .hd-bl-thumb { order: -1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: rgba(15, 117, 189, .08); }
.hd .hd-bl-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hd-ease); }
.hd .hd-bl-row:hover .hd-bl-thumb img { transform: scale(1.06); }
.hd .hd-bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; color: rgba(11, 16, 32, .45); }
.hd .hd-bl-cat { padding: 3px 9px; border-radius: 6px; background: rgba(15, 117, 189, .1); font-weight: 600; color: var(--hd-brand); }
.hd .hd-bl-row h3 { margin-top: 12px; font-family: var(--hd-display); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--hd-ink); }
.hd .hd-bl-row h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* lime underline sweeps in under the title on hover */
.hd .hd-bl-row h3 span { background: linear-gradient(var(--hd-lime), var(--hd-lime)) 0 100% / 0 3px no-repeat; transition: background-size .5s var(--hd-ease); }
.hd .hd-bl-row:hover h3 span, .hd .hd-bl-row h3 a:focus-visible span { background-size: 100% 3px; }
.hd .hd-bl-excerpt { margin-top: 10px; font-size: 15.5px; line-height: 1.7; }
.hd .hd-bl-actions { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.hd .hd-bl-read { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-bl-read i { font-size: 11px; transition: transform .25s var(--hd-ease); }
.hd .hd-bl-row:hover .hd-bl-read i, .hd .hd-bl-lead:hover .hd-bl-read i { transform: translateX(4px); }
.hd .hd-bl-share { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: rgba(11, 16, 32, .55); transition: color .2s, background-color .2s; }
.hd .hd-bl-share:hover { color: var(--hd-brand); }
.hd .hd-bl-none { padding: 40px 0; text-align: center; color: rgba(11, 16, 32, .5); }

.hd .hd-bl-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; font-family: var(--hd-display); font-size: 14px; font-weight: 600; }
.hd .hd-bl-pager-step { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; color: var(--hd-ink); transition: background-color .2s; }
.hd .hd-bl-pager-step:hover { background: #fff; color: var(--hd-brand); }
.hd .hd-bl-pager-step.is-off { color: rgba(11, 16, 32, .3); }
.hd .hd-bl-pager-step.is-off:hover { background: none; color: rgba(11, 16, 32, .3); }
.hd .hd-bl-pager-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.hd .hd-bl-pager-nums a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 12px; color: var(--hd-ink); transition: background-color .2s, color .2s; }
.hd .hd-bl-pager-nums a:hover { background: #fff; }
.hd .hd-bl-pager-nums a.is-on, .hd .hd-bl-pager-nums a.is-on:hover { background: var(--hd-ink); color: #fff; }

.hd .hd-bl-side { display: grid; gap: 20px; align-content: start; }
.hd .hd-bl-topics h3 { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: rgba(11, 16, 32, .4); }
.hd .hd-bl-topics ul { display: grid; gap: 2px; margin-top: 12px; }
.hd .hd-bl-topics button { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 14px 9px 22px; border-radius: 10px; text-align: left; font-size: 14.5px; color: rgba(11, 16, 32, .6); transition: background-color .2s, color .2s; }
.hd .hd-bl-topics button:hover { background: #fff; color: var(--hd-ink); }
.hd .hd-bl-topics button.is-on { background: #fff; font-weight: 600; color: var(--hd-ink); box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-bl-topics button.is-on::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--hd-brand); }
.hd .hd-bl-topics small { font-family: var(--hd-mono); font-size: 11px; color: rgba(11, 16, 32, .35); }
.hd .hd-bl-side-cta { display: block; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, var(--hd-brand), var(--hd-indigo)); color: #fff; }
.hd .hd-bl-side-cta:hover, .hd .hd-bl-side-cta:focus { color: #fff; }
.hd .hd-bl-side-cta span { font-size: 12px; color: rgba(255, 255, 255, .65); }
.hd .hd-bl-side-cta strong { display: block; color: #fff; margin-top: 8px; font-family: var(--hd-display); font-size: 20px; font-weight: 700; line-height: 1.3; }
.hd .hd-bl-side-cta em { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-style: normal; font-size: 14px; font-weight: 600; }
.hd .hd-bl-side-cta em i { transition: transform .3s var(--hd-ease); }
.hd .hd-bl-side-cta:hover em i { transform: none; }

/* empty state */
.hd .hd-bl-empty-sec { padding: 64px 0 24px; }
.hd .hd-bl-empty { padding: 56px 24px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); }
.hd .hd-bl-empty > i { font-size: 36px; color: var(--hd-brand); }
.hd .hd-bl-empty h2 { margin-top: 16px; font-family: var(--hd-display); font-size: 26px; font-weight: 800; color: var(--hd-ink); }
.hd .hd-bl-empty p { margin-top: 8px; }
.hd .hd-bl-empty .hd-bl-btn-ink { margin-top: 24px; }

/* lime CTA band */
.hd .hd-bl-band-sec { padding: 56px 0 80px; }
.hd .hd-bl-band { position: relative; display: grid; gap: 28px; align-items: center; overflow: hidden; padding: 40px 28px; border-radius: 32px; background: var(--hd-lime); color: rgba(11, 16, 32, .7); }
.hd .hd-bl-band > div { position: relative; }
.hd .hd-bl-band-icon { position: absolute; right: -24px; top: -24px; font-size: 180px; color: rgba(11, 16, 32, .05); }
.hd .hd-bl-band h2 { font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--hd-ink); }
.hd .hd-bl-band p { margin-top: 10px; max-width: 520px; }
.hd .hd-bl-band-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hd .hd-bl-btn-ink { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; background: var(--hd-ink); font-family: var(--hd-display); font-size: 15px; font-weight: 700; color: #fff; transition: background-color .25s; }
.hd .hd-bl-btn-ink:hover, .hd .hd-bl-btn-ink:focus { background: var(--hd-brand); color: #fff; }
.hd .hd-bl-btn-line { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; border: 1px solid rgba(11, 16, 32, .3); font-family: var(--hd-display); font-size: 15px; font-weight: 700; color: var(--hd-ink); transition: background-color .25s; }
.hd .hd-bl-btn-line:hover, .hd .hd-bl-btn-line:focus { background: rgba(255, 255, 255, .5); color: var(--hd-ink); }

@media (min-width: 640px) {
    .hd .hd-bl-row { grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 28px; }
    .hd .hd-bl-thumb { order: 0; aspect-ratio: 4 / 3; }
    .hd .hd-bl-row h3 { font-size: 26px; }
    .hd .hd-bl-lead { min-height: 460px; border-radius: 32px; }
    .hd .hd-bl-lead-body { padding: 40px; }
    .hd .hd-bl-lead h3 { font-size: 38px; }
    .hd .hd-bl-band { padding: 56px; border-radius: 40px; }
    .hd .hd-bl-band h2 { font-size: 38px; }
}
@media (min-width: 1024px) {
    .hd .hd-bl-hero-foot { grid-template-columns: 1fr auto; gap: 40px; }
    .hd .hd-bl-search { width: 420px; }
    .hd .hd-bl-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
    .hd .hd-bl-side { position: sticky; top: 24px; }
    .hd .hd-bl-band { grid-template-columns: 1fr auto; }
}
@media (max-width: 639px) {
    .hd .hd-bl-featured { padding-top: 40px; }
    .hd .hd-bl-lead { min-height: 400px; border-radius: 24px; }
    .hd .hd-bl-feed { padding-top: 40px; }
    .hd .hd-bl-pager-step { padding: 12px; }
    .hd .hd-bl-band { border-radius: 24px; }
    .hd .hd-bl-band-ctas a { flex: 1; justify-content: center; }
    .hd .hd-bl-band-sec { padding: 40px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-bl-lead img, .hd .hd-bl-thumb img, .hd .hd-bl-row h3 span { transition: none; }
}

/* =========================================================
   404 page (Views/Shared/NotFound.cshtml)
   ========================================================= */
.hd.hd-404 { background: var(--hd-paper); margin-top: -96px; overflow-x: clip; }
.hd .hd-404-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.hd .hd-404-links a {
    padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
    color: #fff; font: 500 14px/1.4 var(--hd-body); text-decoration: none;
    transition: background .2s var(--hd-ease), border-color .2s var(--hd-ease);
}
.hd .hd-404-links a:hover, .hd .hd-404-links a:focus-visible { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }

/* ==========================================================================
   Home v2 (/) - markup lives in Views/Home/Index.cshtml (.hd-hm-*)
   3D hero stage, services bento, AI showcase, industries, results scroller,
   scroll-filled process timeline, hire panel and final CTA.
   Reuses .hd-hero, .hd-h1, .hd-rotator, .hd-editor, .hd-stats, .hd-h2, .hd-kick,
   .hd-head, .hd-process, .hd-panel(-outer), .hd-testi/.hd-quote and .hd-tech.
   ========================================================================== */
.hd.hd-hm { background: #fff; }
.hd.hd-hm b { color: inherit; } /* site.css tints <b> brand blue */

/* ---------- hero ---------- */
.hd .hd-hm-hero { background: radial-gradient(110% 90% at 85% 0%, #3b33d6 0%, transparent 55%), radial-gradient(90% 90% at 0% 100%, #0F75BD 0%, transparent 60%), radial-gradient(60% 50% at 60% 100%, rgba(6, 182, 212, .33) 0%, transparent 70%), var(--hd-ink); }
.hd .hd-hm-grid-lines { position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 30%, #000 30%, transparent 75%); }
.hd .hd-hm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05);
    font-family: var(--hd-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.hd .hd-hm-live { width: 8px; height: 8px; border-radius: 999px; background: #28C840; box-shadow: 0 0 0 0 rgba(40, 200, 64, .6); animation: hd-hm-pulse 2s infinite; }
.hd .hd-hm-hero .hd-h1 { margin-top: 24px; }
.hd .hd-hm-hero .hd-lead { color: rgba(255, 255, 255, .75); }
.hd .hd-hm-btn-lime { background: var(--hd-lime); color: var(--hd-ink); padding: 8px 8px 8px 28px; transition: transform .2s ease-out, background-color .25s; }
.hd .hd-hm-btn-lime:hover, .hd .hd-hm-btn-lime:focus { color: var(--hd-ink); }
.hd .hd-hm-btn-lime .hd-btn-icon, .hd .hd-hm-btn-ink .hd-btn-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--hd-ink); color: #fff; transition: transform .3s var(--hd-ease); }
.hd .hd-hm-btn-lime:hover .hd-btn-icon, .hd .hd-hm-btn-ink:hover .hd-btn-icon { transform: rotate(45deg); }
.hd .hd-hm-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; font-size: 14px; color: rgba(255, 255, 255, .65); }
.hd .hd-hm-trust i { margin-right: 6px; }
.hd .hd-hm-trust b { color: #fff; font-weight: 600; }

/* 3D stage */
.hd .hd-hm-stage { position: relative; height: 400px; perspective: 1200px; }
.hd .hd-hm-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-20deg); transition: transform .3s ease-out; }
.hd .hd-hm-orb { position: absolute; right: 6%; top: 30%; width: 128px; height: 128px; border-radius: 999px; opacity: .9; filter: blur(1px);
    background: radial-gradient(circle at 35% 30%, #fff 0, var(--hd-lime) 16%, var(--hd-cyan) 52%, var(--hd-indigo) 100%); transform: translateZ(-120px); animation: hd-hm-float 6s ease-in-out -4s infinite; }
.hd .hd-hm-editor { position: absolute; left: 4%; top: 6%; width: 84%; transform: translateZ(0); }
.hd .hd-hm-editor:hover { transform: translateZ(0); }
.hd .hd-hm-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--hd-ink); font-size: 14px; line-height: 1.3; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); }
.hd .hd-hm-chip .ic { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; font-family: var(--hd-display); font-size: 12px; font-weight: 700; }
.hd .hd-hm-chip b { display: block; font-family: var(--hd-display); font-weight: 700; }
.hd .hd-hm-chip small { display: block; font-size: 12px; color: #64748B; }
.hd .hd-hm-chip-1 { right: -8px; top: 0; transform: translateZ(110px); animation: hd-hm-float 7s ease-in-out infinite; }
.hd .hd-hm-chip-2 { left: -12px; bottom: 14%; transform: translateZ(150px); animation: hd-hm-float 8s ease-in-out -2s infinite; }
.hd .hd-hm-chip-3 { right: 2%; bottom: 0; display: block; width: 208px; padding: 16px; background: var(--hd-brand); color: #fff; transform: translateZ(80px); animation: hd-hm-float 6s ease-in-out -4s infinite; }
.hd .hd-hm-chip-3 .row1 { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, .75); }
.hd .hd-hm-chip-3 .delta { padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-weight: 600; color: #fff; }
.hd .hd-hm-chip-3 .val { margin-top: 2px; font-family: var(--hd-display); font-size: 28px; font-weight: 700; }
.hd .hd-hm-chip-3 .val small { display: inline; font-size: 13px; color: rgba(255, 255, 255, .75); }
.hd .hd-hm-chip-3 svg { width: 100%; height: 32px; margin-top: 4px; }

/* ---------- client marquee ---------- */
.hd .hd-hm-clients { overflow: hidden; padding: 36px 0; border-bottom: 1px solid var(--hd-line); }
.hd .hd-hm-clients p { margin-bottom: 20px; text-align: center; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(11, 16, 32, .4); }
.hd .hd-hm-clients .hd-marquee-track { gap: 56px; font-size: 26px; font-weight: 700; color: rgba(11, 16, 32, .3); animation-duration: 38s; }
.hd .hd-hm-clients .hd-marquee-track i { font-size: 14px; color: rgba(15, 117, 189, .4); }

/* ---------- tilt + spotlight (shared by bento, industries, roles) ---------- */
.hd .hd-hm-tilt { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease-out, border-color .25s, box-shadow .25s; }
.hd .hd-hm-tilt::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(15, 117, 189, .12), transparent 45%); }
.hd .hd-hm-tilt:hover::before { opacity: 1; }
.hd .hd-hm-pop { position: relative; display: block; transform: translateZ(40px); }

/* ---------- services bento ---------- */
.hd .hd-hm-bento { display: grid; gap: 16px; margin-top: 48px; }
.hd .hd-hm-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 28px; border-radius: 24px; border: 1px solid var(--hd-line); background: #fff; color: var(--hd-text); }
.hd .hd-hm-tile:hover { border-color: rgba(15, 117, 189, .35); box-shadow: 0 30px 60px -30px rgba(11, 16, 32, .3); color: var(--hd-text); }
.hd .hd-hm-tile h3 { margin-top: 20px; font-family: var(--hd-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--hd-ink); }
.hd .hd-hm-tile p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }
.hd .hd-hm-ic { display: block; width: 44px; height: 44px; }
.hd .hd-hm-ic svg { width: 100%; height: 100%; }
.hd .hd-hm-ic-lg { width: 56px; height: 56px; margin-top: 24px; }
.hd .hd-hm-tile-ai { border: 0; background: var(--hd-ink); color: rgba(255, 255, 255, .7); }
.hd .hd-hm-tile-ai:hover { color: rgba(255, 255, 255, .7); }
.hd .hd-hm-tile-ai::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 244, 50, .15), transparent 45%); }
.hd .hd-hm-tile-ai h3 { font-size: 30px; color: #fff; }
.hd .hd-hm-tile-ai p { max-width: 380px; font-size: 16px; }
.hd .hd-hm-ai-glow { position: absolute; right: -64px; top: -64px; width: 256px; height: 256px; border-radius: 999px; opacity: .4; filter: blur(48px); pointer-events: none;
    background: conic-gradient(from 0deg, var(--hd-indigo), var(--hd-cyan), var(--hd-lime), var(--hd-indigo)); animation: hd-hm-spin 8s linear infinite; }
.hd .hd-hm-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--hd-lime); font-family: var(--hd-mono); font-size: 11px; font-weight: 500; color: var(--hd-ink); }
.hd .hd-hm-tile-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hd .hd-hm-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.hd .hd-hm-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); }
.hd .hd-hm-go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--hd-lime); color: var(--hd-ink); transition: transform .3s var(--hd-ease); }
.hd .hd-hm-tile-ai:hover .hd-hm-go { transform: rotate(45deg); }
.hd .hd-hm-tile-lime { border: 0; background: var(--hd-lime); color: rgba(11, 16, 32, .7); }
.hd .hd-hm-tile-lime:hover { color: rgba(11, 16, 32, .7); }
.hd .hd-hm-tile-lime h3 { margin-top: 12px; }
.hd .hd-hm-more { font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-hm-more i { margin-left: 6px; transition: transform .3s var(--hd-ease); }
.hd .hd-hm-tile-lime:hover .hd-hm-more i { transform: none; }

/* ---------- AI showcase ---------- */
.hd .hd-hm-ai { position: relative; overflow: hidden; border-radius: 28px; padding: 88px 20px; background: var(--hd-ink); color: #fff; }
.hd .hd-hm-blob { position: absolute; width: 384px; height: 384px; border-radius: 999px; filter: blur(120px); pointer-events: none; }
.hd .hd-hm-blob-1 { left: -160px; top: 80px; background: rgba(79, 70, 229, .3); }
.hd .hd-hm-blob-2 { right: -80px; bottom: 0; width: 320px; height: 320px; background: rgba(6, 182, 212, .2); }
.hd .hd-hm-ai-box { display: grid; margin-top: 48px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.hd .hd-hm-cases { display: grid; align-content: start; gap: 12px; padding: 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hd .hd-hm-case { display: block; width: 100%; padding: 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); text-align: left; transition: border-color .25s, background-color .25s; }
.hd .hd-hm-case:hover { border-color: rgba(255, 255, 255, .3); }
.hd .hd-hm-case[aria-pressed="true"] { border-color: var(--hd-lime); background: rgba(198, 244, 50, .05); }
.hd .hd-hm-case-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd .hd-hm-case-top b { font-family: var(--hd-display); font-size: 18px; font-weight: 700; color: #fff; }
.hd .hd-hm-case-top b i { margin-right: 8px; }
.hd .hd-hm-case-top em { font-style: normal; white-space: nowrap; font-family: var(--hd-mono); font-size: 13px; color: rgba(255, 255, 255, .5); }
.hd .hd-hm-case[aria-pressed="true"] em { color: var(--hd-lime); }
.hd .hd-hm-case-text { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.hd .hd-hm-run { display: flex; flex-direction: column; gap: 16px; min-height: 420px; padding: 24px; }
.hd .hd-hm-flow { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--hd-mono); font-size: 11px; }
.hd .hd-hm-flow span { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .5); transition: all .35s; }
.hd .hd-hm-flow span.is-on { background: var(--hd-lime); border-color: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hm-log { display: flex; flex: 1; flex-direction: column; gap: 12px; }
.hd .hd-hm-msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; animation: hd-hm-pop .4s var(--hd-ease) both; }
.hd .hd-hm-msg.is-u { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(255, 255, 255, .1); }
.hd .hd-hm-msg.is-t { padding: 8px 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .15); font-family: var(--hd-mono); font-size: 12px; color: rgba(255, 255, 255, .55); }
.hd .hd-hm-msg.is-a { border-bottom-left-radius: 4px; background: #fff; color: var(--hd-ink); }
.hd .hd-hm-msg.is-a b, .hd .hd-hm-msg.is-a i { color: var(--hd-indigo); }
.hd .hd-hm-note { font-family: var(--hd-mono); font-size: 11px; color: rgba(255, 255, 255, .35); }
.hd .hd-hm-ai-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; }
.hd .hd-hm-ai-foot ul { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.hd .hd-hm-ai-foot li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); }
.hd .hd-hm-ai-foot li i { margin-right: 6px; color: var(--hd-lime); }

/* ---------- industries ---------- */
.hd .hd-hm-center { max-width: 640px; margin: 0 auto; text-align: center; }
.hd .hd-hm-center > p:last-child { margin-top: 16px; font-size: 18px; }
.hd .hd-hm-ind { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.hd .hd-hm-ind-card { display: block; padding: 20px; border-radius: 16px; border: 1px solid var(--hd-line); background: #fff; }
.hd .hd-hm-ind-card:hover { border-color: rgba(15, 117, 189, .4); }
.hd .hd-hm-ind-card b { display: block; margin-top: 16px; font-family: var(--hd-display); font-weight: 700; color: var(--hd-ink); }
.hd .hd-hm-ind-card small { font-size: 12px; color: #64748B; }
.hd .hd-hm-ind-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; transition: transform .3s var(--hd-ease); }
.hd .hd-hm-ind-card:hover .hd-hm-ind-ic { transform: translateZ(40px) scale(1.1); }
.hd .hd-hm-ind-ic.t1 { background: #E8F1FA; color: var(--hd-brand); }
.hd .hd-hm-ind-ic.t2 { background: #EEEDFD; color: var(--hd-indigo); }
.hd .hd-hm-ind-ic.t3 { background: #E6F8FB; color: #0891B2; }
.hd .hd-hm-ind-ic.t4 { background: #F4FBDD; color: #4D7C0F; }

/* ---------- selected work ---------- */
.hd .hd-hm-work { padding: 96px 0; background: var(--hd-paper); }
.hd .hd-hm-work-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hd .hd-hm-work .hd-circle-btn { border-color: rgba(11, 16, 32, .15); background: #fff; color: var(--hd-ink); }
.hd .hd-hm-work .hd-circle-btn:hover { background: var(--hd-ink); color: #fff; }
.hd .hd-hm-work .hd-hm-circle-ink { border-color: var(--hd-ink); background: var(--hd-ink); color: #fff; }
.hd .hd-hm-work .hd-hm-circle-ink:hover { background: var(--hd-brand); border-color: var(--hd-brand); }
.hd .hd-hm-track { display: flex; gap: 20px; margin-top: 48px; padding: 0 20px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.hd .hd-hm-track::-webkit-scrollbar { display: none; }
.hd .hd-hm-case-card { flex: 0 0 85%; max-width: 440px; scroll-snap-align: start; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -30px rgba(11, 16, 32, .35); color: var(--hd-text); }
.hd .hd-hm-case-card:hover { color: var(--hd-text); }
.hd .hd-hm-case-shot { padding: 24px 24px 0; background: linear-gradient(135deg, rgba(15, 117, 189, .15), rgba(79, 70, 229, .15)); }
.hd .hd-hm-browser { overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 20px 25px -5px rgba(11, 16, 32, .15); }
.hd .hd-hm-browser > span { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--hd-line); }
.hd .hd-hm-browser > span i { width: 8px; height: 8px; border-radius: 999px; background: rgba(11, 16, 32, .15); }
.hd .hd-hm-browser img { display: block; width: 100%; height: 208px; object-fit: cover; object-position: top; transition: object-position 3.5s ease-in-out; }
.hd .hd-hm-case-card:hover .hd-hm-browser img { object-position: bottom; }
.hd .hd-hm-case-body { padding: 24px; }
.hd .hd-hm-case-body > .hd-mono { font-size: 12px; color: var(--hd-brand); }
.hd .hd-hm-case-body h3 { margin-top: 4px; font-family: var(--hd-display); font-size: 24px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-hm-case-desc { margin-top: 8px; font-size: 14px; }
.hd .hd-hm-case-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hd-line); }
.hd .hd-hm-case-foot b { display: block; font-family: var(--hd-display); font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--hd-ink); }
.hd .hd-hm-case-foot small { font-size: 12px; }
.hd .hd-hm-case-foot .hd-mono { text-align: right; font-size: 11px; color: #64748B; }

/* ---------- process timeline ---------- */
.hd .hd-hm-tl { position: relative; }
.hd .hd-hm-tl-line, .hd .hd-hm-tl-fill { position: absolute; left: 19px; top: 24px; bottom: 24px; width: 2px; }
.hd .hd-hm-tl-line { background: var(--hd-line); }
.hd .hd-hm-tl-fill { background: linear-gradient(to bottom, var(--hd-brand), var(--hd-indigo), var(--hd-lime)); transform-origin: top; transform: scaleY(0); }
.hd .hd-hm-tl-step { position: relative; padding: 0 0 48px 64px; }
.hd .hd-hm-tl-step:last-child { padding-bottom: 0; }
.hd .hd-hm-tl-dot { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--hd-line); background: #fff; color: var(--hd-ink); font-size: 14px; transition: all .4s; }
.hd .hd-hm-tl-step.is-on .hd-hm-tl-dot { background: var(--hd-lime); border-color: var(--hd-lime); box-shadow: 0 0 0 8px rgba(198, 244, 50, .2); }
.hd .hd-hm-tl-step > .hd-mono { font-size: 12px; color: var(--hd-brand); }
.hd .hd-hm-tl-step h3 { margin-top: 4px; font-family: var(--hd-display); font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--hd-ink); }
.hd .hd-hm-tl-text { margin-top: 8px; max-width: 512px; }
.hd .hd-hm-tl-step ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hd .hd-hm-tl-step ul li { padding: 4px 12px; border-radius: 999px; background: var(--hd-paper); font-size: 12px; font-weight: 500; color: var(--hd-ink); }

/* ---------- hire developers ---------- */
.hd .hd-hm-hire { background: linear-gradient(135deg, var(--hd-brand), var(--hd-indigo) 55%, #3730A3); color: #fff; }
.hd .hd-hm-hire-grid { display: grid; gap: 48px; align-items: center; }
.hd .hd-hm-hire-lead { margin-top: 20px; max-width: 448px; font-size: 18px; color: rgba(255, 255, 255, .75); }
.hd .hd-hm-promise { display: grid; gap: 12px; margin-top: 32px; }
.hd .hd-hm-promise li { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.hd .hd-hm-promise b { display: block; font-family: var(--hd-display); font-size: 24px; font-weight: 700; }
.hd .hd-hm-promise span { font-size: 14px; color: rgba(255, 255, 255, .7); }
.hd .hd-hm-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd .hd-hm-role { display: block; padding: 20px; border-radius: 16px; background: #fff; color: var(--hd-ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .4); }
.hd .hd-hm-role:hover { color: var(--hd-ink); }
.hd .hd-hm-role i:first-child { font-size: 24px; color: var(--hd-brand); }
.hd .hd-hm-role b { display: block; margin-top: 16px; font-family: var(--hd-display); font-weight: 700; }
.hd .hd-hm-role small { font-size: 12px; color: #64748B; }
.hd .hd-hm-role small i { margin-left: 4px; transition: transform .3s var(--hd-ease); }
.hd .hd-hm-role:hover small i { transform: none; }

/* ---------- testimonials score ---------- */
.hd .hd-hm-score { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.hd .hd-hm-score strong { font-family: var(--hd-display); font-size: 60px; font-weight: 800; line-height: 1; color: var(--hd-ink); }
.hd .hd-hm-score p { font-size: 14px; }
.hd .hd-hm-score .stars { color: #F5B301; }
.hd.hd-hm .hd-quote { background: var(--hd-paper); box-shadow: none; }

/* ---------- final CTA ---------- */
.hd .hd-hm-final { border-radius: 28px; padding: 80px 20px; background: var(--hd-lime); }
.hd .hd-hm-final-grid { display: grid; gap: 48px; align-items: center; }
.hd .hd-hm-final h2 { font-family: var(--hd-display); font-size: 44px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: var(--hd-ink); }
.hd .hd-hm-final-grid > div > p { margin-top: 20px; max-width: 448px; font-size: 18px; color: rgba(11, 16, 32, .7); }
.hd .hd-hm-final-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hd .hd-hm-btn-ink { background: var(--hd-ink); color: #fff; padding: 8px 8px 8px 28px; transition: transform .2s ease-out; }
.hd .hd-hm-btn-ink:hover, .hd .hd-hm-btn-ink:focus { color: #fff; }
.hd .hd-hm-btn-ink .hd-btn-icon { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hm-btn-line { padding: 16px 28px; border: 1px solid rgba(11, 16, 32, .2); color: var(--hd-ink); }
.hd .hd-hm-btn-line:hover { background: rgba(11, 16, 32, .06); color: var(--hd-ink); }
.hd .hd-hm-next { display: grid; gap: 12px; }
.hd .hd-hm-next li { display: flex; gap: 16px; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .6); }
.hd .hd-hm-next li > span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--hd-ink); font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: var(--hd-lime); }
.hd .hd-hm-next b { display: block; font-family: var(--hd-display); font-weight: 700; color: var(--hd-ink); }
.hd .hd-hm-next small { font-size: 14px; color: rgba(11, 16, 32, .65); }
.hd.hd-hm .hd-tech { margin-top: 56px; }

/* ---------- motion ---------- */
@keyframes hd-hm-float { 50% { translate: 0 -10px; } }
@keyframes hd-hm-spin { to { transform: rotate(1turn); } }
@keyframes hd-hm-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes hd-hm-pulse { 70% { box-shadow: 0 0 0 8px rgba(40, 200, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); } }

/* ---------- responsive ---------- */
@media (max-width: 639px) {
    .hd .hd-hm-stage { height: 360px; margin-top: -16px; }
    .hd .hd-hm-editor { width: 94%; left: 3%; }
    .hd .hd-hm-chip { padding: 10px 12px; font-size: 12.5px; }
    .hd .hd-hm-chip-1 { right: 0; }
    .hd .hd-hm-chip-2 { left: 0; }
    .hd .hd-hm-chip-3 { width: 170px; }
    .hd .hd-hm-orb { width: 96px; height: 96px; }
    .hd .hd-hm-ai { padding: 64px 20px; }
    .hd .hd-hm-run { min-height: 0; padding: 20px; }
    .hd .hd-hm-cases { padding: 16px; }
    .hd .hd-hm-work { padding: 72px 0; }
    .hd .hd-hm-final { padding: 56px 20px; }
    .hd .hd-hm-tile-ai h3 { font-size: 26px; }
}
@media (min-width: 640px) {
    .hd .hd-hm-stage { height: 460px; }
    .hd .hd-hm-bento { grid-template-columns: 1fr 1fr; }
    .hd .hd-hm-tile-ai { grid-column: span 2; }
    .hd .hd-hm-promise { grid-template-columns: repeat(3, 1fr); }
    .hd .hd-hm-roles { grid-template-columns: repeat(3, 1fr); }
    .hd .hd-hm-ai { border-radius: 40px; }
    .hd .hd-hm-final { border-radius: 40px; }
    .hd .hd-hm-final h2 { font-size: 60px; }
    .hd .hd-hm-clients .hd-marquee-track { font-size: 30px; }
}
@media (min-width: 768px) {
    .hd .hd-hm-ind { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .hd .hd-hm-bento { grid-template-columns: repeat(4, 1fr); }
    .hd .hd-hm-tile-ai { grid-row: span 2; }
    .hd .hd-hm-ai { padding: 96px 48px; }
    .hd .hd-hm-ai-box { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .hd .hd-hm-cases { padding: 24px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .1); }
    .hd .hd-hm-run { padding: 32px; }
    .hd .hd-hm-track { padding: 0 max(20px, calc((100vw - 1112px) / 2)) 16px; scroll-padding: 0 max(20px, calc((100vw - 1112px) / 2)); }
    .hd .hd-hm-case-card { flex-basis: 440px; }
    .hd .hd-hm-hire-grid { grid-template-columns: 1fr 1fr; }
    .hd .hd-hm-final { padding: 80px 48px; }
    .hd .hd-hm-final-grid { grid-template-columns: 1.1fr .9fr; }
    .hd .hd-hm-process-intro { top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-hm-live, .hd .hd-hm-orb, .hd .hd-hm-chip, .hd .hd-hm-ai-glow, .hd .hd-hm-msg { animation: none; }
    .hd .hd-hm-rig, .hd .hd-hm-tilt, .hd .hd-hm-btn-lime, .hd .hd-hm-btn-ink, .hd .hd-hm-browser img, .hd .hd-hm-tl-dot { transition: none; }
}

/* ==========================================================================
   Quote modal (#ScheduleModal in Views/Shared/_CallTracking.cshtml, .hd-qm)
   Restyle only: every id, field name, reCAPTCHA and the /Home/SendEmail post are unchanged.
   Lives outside .hd, so rules are scoped to #ScheduleModal.hd-qm.
   ========================================================================== */
#ScheduleModal.hd-qm .modal-dialog { width: auto; max-width: 600px; margin: 32px auto; padding: 0 12px; }
#ScheduleModal.hd-qm .modal-content { height: auto !important; margin: 0 !important; overflow: hidden; border: 0; border-radius: 28px; box-shadow: 0 40px 80px -20px rgba(11, 16, 32, .5); font-family: var(--hd-body); font-size: 15px; color: var(--hd-text); }
#ScheduleModal.hd-qm .modal-body { padding: 0 0 28px; }
#ScheduleModal.hd-qm .modal-body-img { position: relative; height: auto !important; margin: 0; padding: 32px 28px 28px; background: var(--hd-grad) !important; }
#ScheduleModal.hd-qm .modal-body-img > .row > div { float: none; width: auto; padding: 0; }
#ScheduleModal.hd-qm .modal-body-img > .row > div:last-child { position: absolute; right: 16px; top: 16px; }
#ScheduleModal.hd-qm .hd-qm-kick { margin: 0; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-lime); }
#ScheduleModal.hd-qm .modal-title { margin: 8px 40px 0 0; font-family: var(--hd-display); font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
#ScheduleModal.hd-qm .modal-body-img p.modal-title-color { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
#ScheduleModal.hd-qm .close { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 999px; background: rgba(255, 255, 255, .15); opacity: 1; text-shadow: none; font-size: 24px; font-weight: 400; line-height: 1; transition: background-color .2s; }
#ScheduleModal.hd-qm .close:hover { background: rgba(255, 255, 255, .3); }
#ScheduleModal.hd-qm .modal-body > .row { margin: 0 !important; padding: 24px 28px 0; }
#ScheduleModal.hd-qm .modal-body > .row > .row > div, #ScheduleModal.hd-qm #quoteForm .row > div { padding-left: 6px; padding-right: 6px; }
#ScheduleModal.hd-qm #quoteForm { margin-top: 12px !important; }
#ScheduleModal.hd-qm #quoteForm .row { margin-left: -6px !important; margin-right: -6px !important; }
#ScheduleModal.hd-qm .form-group { margin-bottom: 14px; }
#ScheduleModal.hd-qm label { margin-bottom: 6px; font-size: 13px !important; font-weight: 600; color: var(--hd-ink); }
#ScheduleModal.hd-qm .form-input { width: 100%; padding: 11px 14px; border: 1px solid rgba(11, 16, 32, .15); border-radius: 12px; background: #fff; font-size: 15px; color: var(--hd-ink); transition: border-color .2s, box-shadow .2s; }
#ScheduleModal.hd-qm .form-input:focus { border-color: var(--hd-brand); box-shadow: 0 0 0 4px rgba(15, 117, 189, .15); outline: 0; }
#ScheduleModal.hd-qm textarea.form-input { resize: vertical; min-height: 88px; }
#ScheduleModal.hd-qm #radioBtn { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hd-paper); }
#ScheduleModal.hd-qm #radioBtn .btn { float: none; margin: 0; padding: 8px 20px; border: 0 !important; border-radius: 999px !important; background: transparent !important; font-family: var(--hd-display); font-size: 14px; font-weight: 600; text-transform: none; color: var(--hd-text); box-shadow: none; }
#ScheduleModal.hd-qm #radioBtn .btn.active { background: var(--hd-ink) !important; color: #fff; }
#ScheduleModal.hd-qm .input-group { display: block; }
#ScheduleModal.hd-qm #captcha1 { margin-top: 4px; }
#ScheduleModal.hd-qm .send-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; padding: 15px 24px; border: 0 !important; border-radius: 999px; background: var(--hd-ink); font-family: var(--hd-display); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; transition: background-color .2s, color .2s; }
#ScheduleModal.hd-qm .send-btn:hover, #ScheduleModal.hd-qm .send-btn:focus { background: var(--hd-lime); color: var(--hd-ink) !important; }
#ScheduleModal.hd-qm #quoteErrors .alert { margin: 12px 0 0; border-radius: 12px; font-size: 14px; }
#ScheduleModal.hd-qm #quoteErrors ul { margin: 0; padding-left: 18px; }
@media (max-width: 639px) {
    #ScheduleModal.hd-qm .modal-dialog { margin: 12px auto; }
    #ScheduleModal.hd-qm .modal-body-img { padding: 28px 20px 24px; }
    #ScheduleModal.hd-qm .modal-title { font-size: 22px; }
    #ScheduleModal.hd-qm .modal-body > .row { padding: 20px 20px 0; }
    #ScheduleModal.hd-qm #quoteForm .row > div { width: 100%; }
}

/* =========================================================
   Cross-links between service and hire pages (SEO topic clusters)
   ========================================================= */
.hd .hd-cta-alt { margin-top: 20px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.hd .hd-cta-alt a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hd .hd-cta-alt a:hover, .hd .hd-cta-alt a:focus-visible { color: var(--hd-lime); }
.hd .hd-cta-alt i { font-size: 11px; margin-left: 4px; }

/* ==========================================================================
   Contact v2 (/Home/ContactUs) - markup lives in Views/Home/ContactUs.cshtml (.hd-ct-*)
   3D "who reads your brief" hero, 3-step brief wizard with a live brief card,
   direct channels, offices + CSS globe, FAQ. Reuses .hd-hm-hero, .hd-hm-badge,
   .hd-hm-btn-lime, .hd-hm-trust and .hd-kick from Home v2 / theme.
   ========================================================================== */
.hd.hd-ct { background: #fff; margin-top: -96px; overflow-x: clip; }
.hd.hd-ct b { color: inherit; } /* site.css tints <b> brand blue */
.hd .hd-ct-h1 { display: block; }
.hd .hd-ct-grad { background: linear-gradient(90deg, var(--hd-lime), #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd .hd-ct-mini { font-family: var(--hd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.hd .hd-ct-h2 { font-family: var(--hd-display); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--hd-ink); }
.hd .hd-ct-h2-lg { font-size: 32px; }
.hd .hd-ct .lime { color: var(--hd-lime); }

/* ---------- hero 3D stage ---------- */
.hd .hd-ct-stage { position: relative; height: 380px; perspective: 1100px; }
.hd .hd-ct-rig { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out; }
.hd .hd-ct-card { position: absolute; border-radius: 24px; padding: 20px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.hd .hd-ct-card-1 { left: 0; top: 10px; width: 300px; max-width: 86%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .1); color: #fff;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: translateZ(30px); animation: hd-hm-float 6s ease-in-out infinite; }
.hd .hd-ct-person { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.hd .hd-ct-person img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; background: rgba(255, 255, 255, .2); }
.hd .hd-ct-person b { display: block; font-family: var(--hd-display); font-weight: 700; }
.hd .hd-ct-person small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); }
.hd .hd-ct-quote { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.hd .hd-ct-card-2 { right: 0; top: 120px; width: 240px; background: #fff; color: var(--hd-ink); transform: translateZ(110px); animation: hd-hm-float 7s ease-in-out -2s infinite; }
.hd .hd-ct-card-2 .hd-ct-mini { color: #94A3B8; }
.hd .hd-ct-big { margin-top: 6px; font-family: var(--hd-display); font-size: 32px; font-weight: 800; line-height: 1.1; }
.hd .hd-ct-card-2 small { font-size: 13px; color: #64748B; }
.hd .hd-ct-meter { display: block; height: 8px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #F1F5F9; }
.hd .hd-ct-meter i { display: block; width: 80%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hd-brand), var(--hd-indigo)); }
.hd .hd-ct-card-3 { left: 32px; bottom: 6px; display: flex; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(11, 16, 32, .8); font-family: var(--hd-mono); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateZ(70px); animation: hd-hm-float 6s ease-in-out -4s infinite; }
.hd .hd-ct-card-3 small { display: block; font-size: 11px; color: rgba(255, 255, 255, .45); }
.hd .hd-ct-card-3 b { display: block; font-size: 16px; font-weight: 500; }
.hd .hd-ct-card-3 > span { width: 1px; background: rgba(255, 255, 255, .15); }

/* ---------- brief wizard ---------- */
.hd .hd-ct-brief { padding: 72px 0; scroll-margin-top: 16px; }
.hd .hd-ct-brief-grid { display: grid; gap: 24px; }
.hd .hd-ct-brief-grid > * { min-width: 0; }
.hd .hd-ct-form { padding: 24px; border: 1px solid #E2E8F0; border-radius: 28px; background: #fff; box-shadow: 0 30px 80px -40px rgba(11, 16, 32, .35); }
.hd .hd-ct-form-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hd .hd-ct-stepno { font-family: var(--hd-mono); font-size: 12px; color: #94A3B8; }
.hd .hd-ct-stepno b { color: var(--hd-ink); }
.hd .hd-ct-bar { display: block; height: 6px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #F1F5F9; }
.hd .hd-ct-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hd-brand), var(--hd-indigo), var(--hd-cyan)); transition: width .5s var(--hd-ease); }
.hd .hd-ct-step { min-width: 0; margin: 0; padding: 28px 0 0; border: 0; }
.hd .hd-ct-step + .hd-ct-step { margin-top: 40px; }
.hd-js .hd .hd-ct-step { display: none; }
.hd-js .hd .hd-ct-step.is-on { display: block; margin-top: 0; animation: hd-ct-in .45s var(--hd-ease); }
@keyframes hd-ct-in { from { opacity: 0; transform: translateX(24px); } }
.hd .hd-ct-step legend.hd-ct-h2 { float: left; display: block; width: 100%; margin: 0; padding: 0; border: 0; outline: 0; }
.hd .hd-ct-step legend.hd-ct-h2 + * { clear: both; }
.hd .hd-ct-modes { display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px; border-radius: 999px; background: var(--hd-paper); }
.hd .hd-ct-mode { padding: 8px 16px; white-space: nowrap; border-radius: 999px; font-family: var(--hd-display); font-size: 14px; font-weight: 600; color: #475569; transition: background-color .2s, color .2s; }
.hd .hd-ct-mode.is-on { background: var(--hd-ink); color: #fff; }
.hd .hd-ct-opts { display: grid; gap: 12px; margin-top: 20px; }
.hd .hd-ct-opts[hidden] { display: none; }
.hd .hd-ct-opt { position: relative; display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px; border: 1px solid #E2E8F0; border-radius: 18px; cursor: pointer; font-weight: 400;
    transition: border-color .2s, background-color .2s, color .2s, transform .2s, box-shadow .2s; }
.hd .hd-ct-opt:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(11, 16, 32, .35); }
.hd .hd-ct-opt input, .hd .hd-ct-chip input { position: absolute; opacity: 0; pointer-events: none; }
.hd .hd-ct-opt-ic { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--hd-paper); color: var(--hd-ink); transition: background-color .2s, color .2s; }
.hd .hd-ct-opt b { display: block; font-family: var(--hd-display); font-size: 15px; font-weight: 600; color: var(--hd-ink); }
.hd .hd-ct-opt small { display: block; font-size: 13px; color: #64748B; }
.hd .hd-ct-opt:has(input:checked) { border-color: var(--hd-ink); background: var(--hd-ink); }
.hd .hd-ct-opt:has(input:checked) b { color: #fff; }
.hd .hd-ct-opt:has(input:checked) small { color: rgba(255, 255, 255, .65); }
.hd .hd-ct-opt:has(input:checked) .hd-ct-opt-ic { background: var(--hd-lime); }
.hd .hd-ct-opt:has(input:focus-visible), .hd .hd-ct-chip:has(input:focus-visible) { outline: 2px solid var(--hd-brand); outline-offset: 2px; border-radius: 18px; }
.hd .hd-ct-label { display: block; margin: 24px 0 0; font-family: var(--hd-display); font-size: 14px; font-weight: 600; color: var(--hd-ink); }
.hd .hd-ct-label > label { margin: 0; font-weight: 600; }
.hd .hd-ct-label .req { color: #EF4444; }
.hd .hd-ct-label-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hd .hd-ct-count { font-family: var(--hd-mono); font-size: 12px; font-weight: 400; color: #94A3B8; }
.hd .hd-ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hd .hd-ct-chip { position: relative; margin: 0; cursor: pointer; font-weight: 400; }
.hd .hd-ct-chip span { display: block; padding: 8px 16px; border: 1px solid #E2E8F0; border-radius: 999px; font-size: 14px; color: #475569; transition: background-color .2s, color .2s, border-color .2s; }
.hd .hd-ct-chip:hover span { border-color: var(--hd-ink); }
.hd .hd-ct-chip input:checked + span { border-color: var(--hd-ink); background: var(--hd-ink); color: #fff; }
.hd .hd-ct-field { display: block; width: 100%; height: auto; margin-top: 8px; padding: 12px 14px; border: 1px solid rgba(11, 16, 32, .15); border-radius: 14px; background: #fff;
    font-family: var(--hd-body); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--hd-ink); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.hd .hd-ct-field:focus { border-color: var(--hd-brand); box-shadow: 0 0 0 4px rgba(15, 117, 189, .15); outline: 0; }
.hd .hd-ct-field::placeholder { color: #94A3B8; }
.hd textarea.hd-ct-field { min-height: 120px; resize: vertical; }
.hd .hd-ct-field.input-validation-error { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .1); }
.hd .hd-ct-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; }
.hd .hd-ct-starters > span { font-family: var(--hd-mono); color: #94A3B8; }
.hd .hd-ct-starters > span i { margin-right: 6px; color: var(--hd-indigo); }
.hd .hd-ct-starter { padding: 6px 12px; border-radius: 999px; background: rgba(79, 70, 229, .1); color: var(--hd-indigo); transition: background-color .2s; }
.hd .hd-ct-starter:hover { background: rgba(79, 70, 229, .2); }
.hd .hd-ct-fields { display: grid; gap: 0 16px; }
.hd .hd-ct-fields .hd-ct-label { margin-top: 20px; }
.hd .hd-ct-phone { display: flex; gap: 8px; }
.hd .hd-ct-phone select.hd-ct-field { flex: 0 0 92px; width: 92px; }
.hd .hd-ct-captcha { margin-top: 24px; min-height: 78px; }
.hd .hd-ct-captcha.captcha-error { outline: 1px solid #EF4444; border-radius: 4px; }
.hd .hd-ct-nav { display: flex; gap: 12px; margin-top: 32px; }
html:not(.hd-js) .hd .hd-ct-nav button[type="button"] { display: none; }
.hd .hd-ct-next, .hd .hd-ct-send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 999px;
    font-family: var(--hd-display); font-size: 16px; font-weight: 700; transition: opacity .2s, background-color .2s, transform .2s; }
.hd .hd-ct-next { background: var(--hd-ink); color: #fff; }
.hd .hd-ct-next:disabled { opacity: .3; cursor: not-allowed; }
.hd .hd-ct-send { flex: 1; background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-ct-send i { transition: transform .25s var(--hd-ease); }
.hd .hd-ct-send:hover i { transform: translate(3px, -3px); }
.hd .hd-ct-back { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px solid #E2E8F0 !important; border-radius: 999px; color: var(--hd-ink); }
.hd .hd-ct-back:hover { border-color: var(--hd-ink) !important; }
.hd .hd-ct-privacy { margin-top: 16px; font-size: 12.5px; color: #94A3B8; }
.hd .hd-ct-privacy i { margin-right: 6px; }
.hd .hd-ct-errors.validation-summary-valid { display: none; }
.hd .hd-ct-errors.validation-summary-errors { margin-top: 20px; padding: 12px 16px; border-radius: 14px; background: #FEF2F2; color: #B91C1C; font-size: 14px; }
.hd .hd-ct-errors ul { margin: 0; padding-left: 18px; list-style: disc; }
.hd .hd-ct-done { padding: 32px 0 8px; text-align: center; }
.hd .hd-ct-done[hidden] { display: none !important; }
.hd .hd-ct-done-ic { display: grid; place-items: center; width: 80px; height: 80px; margin: 16px auto 0; border-radius: 999px; background: var(--hd-lime); font-size: 30px; color: var(--hd-ink); }
.hd .hd-ct-done > h2 { margin-top: 24px; }
.hd .hd-ct-done p { max-width: 380px; margin: 12px auto 0; }
.hd .hd-ct-done b { color: var(--hd-ink); }
.hd .hd-ct-again { display: inline-block; margin-top: 20px; font-family: var(--hd-display); font-weight: 600; color: var(--hd-brand) !important; }

/* live brief card + next steps */
.hd .hd-ct-side { display: grid; gap: 24px; align-content: start; }
.hd .hd-ct-ticket { padding: 24px; border: 1.5px solid transparent; border-radius: 28px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--hd-brand), var(--hd-indigo), var(--hd-cyan)) border-box; }
.hd .hd-ct-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd .hd-ct-ticket .hd-ct-mini { color: var(--hd-indigo); }
.hd .hd-ct-ticket-top > span { padding: 3px 12px; border-radius: 999px; background: var(--hd-paper); font-family: var(--hd-mono); font-size: 11px; color: #64748B; }
.hd .hd-ct-ticket dl { margin: 20px 0 0; font-family: var(--hd-mono); font-size: 14px; }
.hd .hd-ct-ticket dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed #E2E8F0; }
.hd .hd-ct-ticket dl > div:last-child { border-bottom: 0; }
.hd .hd-ct-ticket dt { font-weight: 400; color: #94A3B8; }
.hd .hd-ct-ticket dd { margin: 0; text-align: right; color: var(--hd-ink); overflow-wrap: anywhere; }
.hd .hd-ct-ticket dd.is-flash { animation: hd-ct-flash .6s ease; }
@keyframes hd-ct-flash { from { background: rgba(198, 244, 50, .45); } }
.hd .hd-ct-strength { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--hd-paper); }
.hd .hd-ct-strength p { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--hd-ink); }
.hd .hd-ct-strength p span { font-family: var(--hd-mono); font-weight: 400; color: #94A3B8; }
.hd .hd-ct-strbar { display: block; height: 8px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #fff; }
.hd .hd-ct-strbar i { display: block; width: 6%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FBBF24, var(--hd-cyan), var(--hd-lime)); transition: width .5s var(--hd-ease); }
.hd .hd-ct-strength small { display: block; margin-top: 10px; font-size: 12.5px; color: #64748B; }
.hd .hd-ct-next-box { padding: 24px; border-radius: 28px; background: var(--hd-ink); color: #fff; }
.hd .hd-ct-next-box .hd-ct-mini { color: var(--hd-lime); }
.hd .hd-ct-next-box ol { display: grid; gap: 20px; margin-top: 20px; }
.hd .hd-ct-next-box li { display: flex; gap: 16px; }
.hd .hd-ct-next-box li > span { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-family: var(--hd-mono); font-size: 12px; }
.hd .hd-ct-next-box li > span.lime { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-ct-next-box b { display: block; font-family: var(--hd-display); font-weight: 600; }
.hd .hd-ct-next-box small { display: block; margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .6); }

/* ---------- direct channels ---------- */
.hd .hd-ct-channels { padding-bottom: 72px; }
.hd .hd-ct-head { display: grid; gap: 12px; align-items: end; }
.hd .hd-ct-head p { max-width: 380px; }
.hd .hd-ct-ch-grid { display: grid; gap: 16px; margin-top: 32px; }
.hd .hd-ct-ch { display: block; padding: 24px; border: 1px solid #E2E8F0; border-radius: 24px; color: var(--hd-text); transition: border-color .25s, transform .25s ease-out, box-shadow .25s; }
.hd .hd-ct-ch:hover { border-color: var(--hd-brand); box-shadow: 0 24px 50px -30px rgba(11, 16, 32, .35); color: var(--hd-text); }
.hd .hd-ct-ch-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-size: 18px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.hd .hd-ct-ch small { display: block; margin-top: 24px; font-family: var(--hd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.hd .hd-ct-ch b { display: block; margin-top: 4px; font-family: var(--hd-display); font-size: 16px; font-weight: 700; color: var(--hd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .hd-ct-ch > span:last-child { display: block; margin-top: 8px; font-size: 14px; }
.hd .hd-ct-ch-lime { border-color: var(--hd-lime); background: var(--hd-lime); }
.hd .hd-ct-ch-lime:hover { border-color: var(--hd-lime); }
.hd .hd-ct-ch-lime .hd-ct-ch-ic { background: var(--hd-ink); color: var(--hd-lime); }
.hd .hd-ct-ch-lime small { color: rgba(11, 16, 32, .6); }
.hd .hd-ct-ch-lime > span:last-child { color: rgba(11, 16, 32, .7); }

/* ---------- offices + globe ---------- */
.hd .hd-ct-offices { position: relative; overflow: hidden; border-radius: 28px; padding: 72px 20px; color: #fff; }
.hd .hd-ct-off-grid { display: grid; gap: 48px; align-items: center; padding: 0; }
.hd .hd-ct-off-grid > * { min-width: 0; }
.hd .hd-ct-globe { position: relative; justify-self: center; width: 320px; height: 320px; overflow: hidden; border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .13), transparent 45%), radial-gradient(circle at 50% 50%, #12204A, var(--hd-ink) 70%);
    box-shadow: inset -30px -30px 60px rgba(0, 0, 0, .65), 0 40px 80px -30px rgba(15, 117, 189, .55); }
.hd .hd-ct-globe-dots { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; opacity: .35; background-image: radial-gradient(#7DD3FC 1.1px, transparent 1.3px); background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(circle at 25% 50%, #000 0 48%, transparent 50%); mask-image: radial-gradient(circle at 25% 50%, #000 0 48%, transparent 50%); animation: hd-ct-spin 26s linear infinite; }
@keyframes hd-ct-spin { to { transform: translateX(-50%); } }
.hd .hd-ct-globe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hd .hd-ct-globe path { stroke-dasharray: 6 8; animation: hd-ct-dash 1.6s linear infinite; }
@keyframes hd-ct-dash { to { stroke-dashoffset: -28; } }
.hd .hd-ct-pin { position: absolute; width: 12px; height: 12px; border-radius: 999px; background: var(--hd-lime); animation: hd-ct-ping 2s infinite; }
@keyframes hd-ct-ping { 0% { box-shadow: 0 0 0 0 rgba(198, 244, 50, .65); } 70%, 100% { box-shadow: 0 0 0 16px rgba(198, 244, 50, 0); } }
.hd .hd-ct-offices .hd-ct-mini { color: var(--hd-lime); }
.hd .hd-ct-offices .hd-ct-h2 { margin-top: 12px; color: #fff; }
.hd .hd-ct-offices .hd-ct-h2 span { display: block; color: rgba(255, 255, 255, .6); }
.hd .hd-ct-off-lead { max-width: 460px; margin-top: 20px; color: rgba(255, 255, 255, .72); }
.hd .hd-ct-off-cards { display: grid; gap: 16px; margin-top: 32px; }
.hd .hd-ct-off { padding: 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hd .hd-ct-off b { display: flex; align-items: center; gap: 8px; font-family: var(--hd-display); font-weight: 700; }
.hd .hd-ct-off b img { width: 24px; height: 16px; border-radius: 2px; object-fit: cover; }
.hd .hd-ct-off small { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.hd .hd-ct-off > span { display: block; margin-top: 16px; font-family: var(--hd-mono); font-size: 24px; }

/* ---------- FAQ ---------- */
.hd .hd-ct-faq { padding: 88px 0; }
.hd .hd-ct-faq-grid { display: grid; gap: 40px; }
.hd .hd-ct-faq .hd-ct-h2 { margin-top: 12px; }
.hd .hd-ct-faq-lead { margin-top: 16px; }
.hd .hd-ct-faq-list { display: grid; gap: 12px; align-content: start; }
.hd .hd-ct-qa { padding: 20px; border: 1px solid #E2E8F0; border-radius: 18px; transition: background-color .2s; }
.hd .hd-ct-qa[open] { background: var(--hd-paper); }
.hd .hd-ct-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-family: var(--hd-display); font-size: 17px; font-weight: 600; color: var(--hd-ink); }
.hd .hd-ct-qa summary::-webkit-details-marker { display: none; }
.hd .hd-ct-qa summary i { flex-shrink: 0; color: var(--hd-brand); transition: transform .25s var(--hd-ease); }
.hd .hd-ct-qa[open] summary i { transform: rotate(45deg); }
.hd .hd-ct-qa p { margin-top: 12px; }

/* ---------- not ready yet ---------- */
.hd .hd-ct-more { padding-bottom: 88px; }
.hd .hd-ct-more-grid { display: grid; gap: 16px; }
.hd .hd-ct-more a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: 24px; background: var(--hd-paper); }
.hd .hd-ct-more small { display: block; font-family: var(--hd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.hd .hd-ct-more b { display: block; margin-top: 4px; font-family: var(--hd-display); font-size: 18px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-ct-more a i { color: var(--hd-brand); transform: rotate(-45deg); transition: transform .3s var(--hd-ease); }
.hd .hd-ct-more a:hover i { transform: none; }

@media (max-width: 639px) {
    .hd .hd-ct-stage { height: 470px; }
    .hd .hd-ct-card-1 { width: 270px; }
    .hd .hd-ct-card-2 { top: 205px; width: 200px; padding: 16px; }
    .hd .hd-ct-card-3 { left: 8px; bottom: 0; }
    .hd .hd-ct-form { padding: 20px 16px; border-radius: 24px; }
    .hd .hd-ct-send { padding: 14px 20px; }
    .hd .hd-ct-globe { transform: scale(.875); }
}
@media (min-width: 640px) {
    .hd .hd-ct-h2 { font-size: 32px; }
    .hd .hd-ct-h2-lg { font-size: 40px; }
    .hd .hd-ct-form { padding: 36px; }
    .hd .hd-ct-opts { grid-template-columns: 1fr 1fr; }
    .hd .hd-ct-fields { grid-template-columns: 1fr 1fr; }
    .hd .hd-ct-send { flex: none; }
    .hd .hd-ct-ch-grid, .hd .hd-ct-off-cards { grid-template-columns: 1fr 1fr; }
    .hd .hd-ct-offices { border-radius: 40px; }
}
@media (min-width: 1024px) {
    .hd .hd-ct-stage { height: 400px; }
    .hd .hd-ct-h1 { font-size: 60px; line-height: 1.02; }
    .hd .hd-ct-brief { padding: 88px 0; }
    .hd .hd-ct-brief-grid { grid-template-columns: 1.45fr 1fr; gap: 32px; }
    .hd .hd-ct-side { position: sticky; top: 24px; align-self: start; }
    .hd .hd-ct-head { grid-template-columns: 1fr auto; }
    .hd .hd-ct-ch-grid { grid-template-columns: repeat(4, 1fr); }
    .hd .hd-ct-offices { padding: 96px 48px; }
    .hd .hd-ct-off-grid { grid-template-columns: 1fr 1.1fr; }
    .hd .hd-ct-faq-grid { grid-template-columns: 1fr 1.6fr; }
    .hd .hd-ct-more-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-ct-card, .hd .hd-ct-globe-dots, .hd .hd-ct-globe path, .hd .hd-ct-pin, .hd-js .hd .hd-ct-step.is-on, .hd .hd-ct-ticket dd.is-flash { animation: none !important; }
    .hd .hd-ct-rig, .hd .hd-ct-ch, .hd .hd-ct-opt { transition: none; }
}

/* ==========================================================================
   Service v2 (/Services/{service}) - markup in Views/Services/Index.cshtml (.hd-sv-*)
   Outcome tagline, results strip, per-service "why", three ways to start,
   matched case study; AI page only: scripted agent demo (3D), readiness
   check (conic gauge), model orbit + guardrails.
   ========================================================================== */
@property --v { syntax: "<number>"; inherits: false; initial-value: 0; }
.hd .hd-sv-tagline { margin-top: 16px; max-width: 560px; font-family: var(--hd-display); font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; line-height: 1.35; color: #fff; animation: hd-rise .8s .14s var(--hd-ease) both; }
.hd .hd-sv-h2 { font-family: var(--hd-display); font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--hd-ink); margin-top: 10px; }
.hd .hd-sv-h2 span { color: var(--hd-muted); }
.hd .hd-sv-h2.is-light { color: #fff; }
.hd .hd-sv-h2.is-light span { color: rgba(255, 255, 255, .5); }
.hd .hd-sv-head { display: grid; gap: 16px; align-items: end; }
.hd .hd-sv-head > p { max-width: 400px; font-size: 16px; line-height: 1.65; }
.hd .hd-sv-mono { font-family: var(--hd-mono); font-size: 12px; color: rgba(255, 255, 255, .45); }
.hd .hd-sv-btn-lime { background: var(--hd-lime); color: var(--hd-ink); padding: 8px 8px 8px 24px; }
.hd .hd-sv-btn-lime .hd-btn-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--hd-ink); color: #fff; transition: transform .3s var(--hd-ease); }
.hd .hd-sv-btn-lime:hover, .hd .hd-sv-btn-lime:focus { background: #d4ff4a; color: var(--hd-ink); }
.hd .hd-sv-btn-lime:hover .hd-btn-icon { transform: rotate(45deg); }

/* ---------- outcomes strip ---------- */
.hd .hd-sv-outcomes { padding: 64px 0 0; }
.hd .hd-sv-out-grid { display: grid; gap: 14px; }
.hd .hd-sv-out { padding: 26px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px -20px rgba(11, 16, 32, .25); transition: transform .4s var(--hd-ease), box-shadow .4s; }
.hd .hd-sv-out:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -24px rgba(79, 70, 229, .35); }
.hd .hd-sv-out-v { font-family: var(--hd-display); font-size: clamp(36px, 4.4vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--hd-ink); white-space: nowrap; }
.hd .hd-sv-out-l { margin-top: 8px; font-family: var(--hd-display); font-size: 16px; font-weight: 600; color: var(--hd-ink); }
.hd .hd-sv-out-n { margin-top: 4px; font-size: 14px; line-height: 1.55; color: #64748B; }
.hd .hd-sv-out.is-dark { background: radial-gradient(70% 80% at 100% 0%, rgba(79, 70, 229, .45), transparent 60%), var(--hd-ink); }
.hd .hd-sv-out.is-dark .hd-sv-out-v { color: var(--hd-lime); }
.hd .hd-sv-out.is-dark .hd-sv-out-l { color: #fff; }
.hd .hd-sv-out.is-dark .hd-sv-out-n { color: rgba(255, 255, 255, .6); }

/* ---------- AI: agent demo ---------- */
.hd .hd-sv-pg { position: relative; overflow: hidden; margin: 0 8px 88px; padding: 80px 0; border-radius: 32px; color: rgba(255, 255, 255, .65);
    background: radial-gradient(60% 60% at 90% 0%, rgba(79, 70, 229, .35), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(6, 182, 212, .2), transparent 60%), var(--hd-ink); }
.hd .hd-sv-pg .hd-wrap { position: relative; z-index: 1; }
.hd .hd-sv-cases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.hd .hd-sv-case { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); font-family: var(--hd-display); font-size: 14px; font-weight: 600; color: #fff; transition: background-color .25s, color .25s, border-color .25s; }
.hd .hd-sv-case i { color: var(--hd-lime); font-size: 13px; }
.hd .hd-sv-case:hover { border-color: rgba(255, 255, 255, .4); }
.hd .hd-sv-case[aria-selected="true"] { background: #fff; color: var(--hd-ink); border-color: #fff; }
.hd .hd-sv-case[aria-selected="true"] i { color: var(--hd-indigo); }
.hd .hd-sv-stage { margin-top: 28px; perspective: 1400px; }
.hd .hd-sv-rig { display: grid; gap: 18px; transform-style: preserve-3d; transition: transform .35s ease-out; }
.hd .hd-sv-chat { padding: 20px; border-radius: 24px; background: #fff; color: var(--hd-ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.hd .hd-sv-chat-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(11, 16, 32, .07); }
.hd .hd-sv-chat-top p { display: flex; align-items: center; gap: 10px; font-family: var(--hd-display); font-weight: 700; }
.hd .hd-sv-ai { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--hd-indigo), #A855F7); font-size: 11px; color: #fff; }
.hd .hd-sv-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hd-mono); font-size: 11px; color: #059669; white-space: nowrap; }
.hd .hd-sv-live i { width: 7px; height: 7px; border-radius: 999px; background: #10B981; animation: hd-pulse 1.8s ease-out infinite; }
.hd .hd-sv-msgs { display: flex; flex-direction: column; gap: 12px; height: 300px; overflow: hidden; padding-top: 16px; font-size: 14.5px; line-height: 1.55; }
.hd .hd-sv-msg { max-width: 86%; width: fit-content; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #F1F5F9; color: var(--hd-ink); animation: hd-sv-pop .4s var(--hd-ease) both; }
.hd .hd-sv-msg.is-user { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--hd-indigo); color: #fff; }
.hd .hd-sv-cites { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.hd .hd-sv-cites span { padding: 1px 7px; border-radius: 6px; background: rgba(79, 70, 229, .1); font-family: var(--hd-mono); font-size: 10.5px; color: var(--hd-indigo); }
.hd .hd-sv-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: #94A3B8; animation: hd-sv-blink 1s infinite; }
.hd .hd-sv-typing span:nth-child(2) { animation-delay: .15s; }
.hd .hd-sv-typing span:nth-child(3) { animation-delay: .3s; }
.hd .hd-sv-trace { padding: 20px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); backdrop-filter: blur(8px); font-family: var(--hd-mono); font-size: 12px; }
.hd .hd-sv-trace ol { display: grid; gap: 8px; margin-top: 14px; }
.hd .hd-sv-trace li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: border-color .35s, background-color .35s; }
.hd .hd-sv-trace li .dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); transition: background-color .3s, box-shadow .3s; }
.hd .hd-sv-trace li em { font-style: normal; color: rgba(255, 255, 255, .45); }
.hd .hd-sv-trace li small { display: block; font-size: 12px; color: transparent; transition: color .3s; }
.hd .hd-sv-trace li.is-on { border-color: var(--hd-lime); background: rgba(198, 244, 50, .06); }
.hd .hd-sv-trace li.is-on .dot { background: var(--hd-lime); box-shadow: 0 0 0 6px rgba(198, 244, 50, .15); }
.hd .hd-sv-trace li.is-done .dot { background: var(--hd-lime); }
.hd .hd-sv-trace li.is-done small { color: var(--hd-lime); }
.hd .hd-sv-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.hd .hd-sv-metrics span { display: block; color: rgba(255, 255, 255, .4); }
.hd .hd-sv-metrics b { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; color: #fff; }
.hd .hd-sv-metrics b.is-lime { color: var(--hd-lime); }

/* ---------- AI: readiness ---------- */
.hd .hd-sv-ready { padding: 0 0 96px; }
.hd .hd-sv-ready-grid { display: grid; gap: 32px; align-items: center; }
.hd .hd-sv-qs { display: grid; gap: 10px; margin-top: 28px; }
.hd .hd-sv-q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(11, 16, 32, .1); background: #fff; text-align: left; transition: background-color .25s, border-color .25s, transform .25s var(--hd-ease); }
.hd .hd-sv-q:hover { transform: translateX(4px); border-color: rgba(15, 117, 189, .35); }
.hd .hd-sv-q > i { width: 22px; font-size: 18px; color: var(--hd-brand); text-align: center; }
.hd .hd-sv-q b { display: block; font-family: var(--hd-display); font-size: 15.5px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-sv-q small { font-size: 13px; color: #64748B; }
.hd .hd-sv-q[aria-pressed="true"] { background: var(--hd-ink); border-color: var(--hd-ink); }
.hd .hd-sv-q[aria-pressed="true"] > i { color: var(--hd-lime); }
.hd .hd-sv-q[aria-pressed="true"] b { color: #fff; }
.hd .hd-sv-q[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
.hd .hd-sv-result { position: relative; overflow: hidden; padding: 32px; border-radius: 32px; color: rgba(255, 255, 255, .65);
    background: radial-gradient(60% 60% at 90% 0%, rgba(79, 70, 229, .4), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(6, 182, 212, .2), transparent 60%), var(--hd-ink); }
.hd .hd-sv-result > * { position: relative; z-index: 1; }
.hd .hd-sv-result-top { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.hd .hd-sv-result h3 { font-family: var(--hd-display); font-size: 22px; font-weight: 700; line-height: 1.25; color: #fff; }
.hd .hd-sv-result-top p { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.hd .hd-sv-gauge { --v: 0; display: grid; place-items: center; flex-shrink: 0; width: 120px; height: 120px; border-radius: 999px; background: conic-gradient(var(--hd-lime) calc(var(--v) * 1%), rgba(255, 255, 255, .08) 0); transition: --v .6s var(--hd-ease); }
.hd .hd-sv-gauge > div { display: grid; place-items: center; align-content: center; width: 92px; height: 92px; border-radius: 999px; background: var(--hd-ink); }
.hd .hd-sv-gauge b { font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.hd .hd-sv-gauge small { font-family: var(--hd-mono); font-size: 10px; color: rgba(255, 255, 255, .4); }
.hd .hd-sv-recl { display: grid; gap: 10px; margin-top: 26px; font-size: 14.5px; color: rgba(255, 255, 255, .85); }
.hd .hd-sv-recl li { display: flex; gap: 10px; align-items: baseline; }
.hd .hd-sv-recl i { color: var(--hd-lime); }
.hd .hd-sv-result .hd-sv-btn-lime { margin-top: 28px; }
.hd .hd-sv-note { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .45); }

/* ---------- AI: models orbit + guardrails ---------- */
.hd .hd-sv-models { padding: 0 0 96px; }
.hd .hd-sv-models-grid { display: grid; gap: 48px; align-items: center; }
.hd .hd-sv-orbit-wrap { position: relative; width: 300px; height: 300px; margin: 0 auto; }
.hd .hd-sv-ring { position: absolute; inset: 0; border-radius: 999px; border: 1px dashed rgba(11, 16, 32, .18); }
.hd .hd-sv-ring.is-in { inset: 56px; border-color: rgba(11, 16, 32, .1); }
.hd .hd-sv-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 999px; background: var(--hd-ink); box-shadow: 0 24px 48px -16px rgba(11, 16, 32, .5);
    text-align: center; font-family: var(--hd-display); font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff; }
.hd .hd-sv-orbit { position: absolute; inset: 0; animation: hd-sv-spin 40s linear infinite; }
.hd .hd-sv-orbit span { position: absolute; top: 50%; left: 50%; padding: 7px 13px; border-radius: 999px; background: #fff; box-shadow: 0 12px 26px -10px rgba(11, 16, 32, .35); font-family: var(--hd-display); font-size: 12.5px; font-weight: 600; color: var(--hd-ink); white-space: nowrap;
    --r: 150px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); animation: hd-sv-keep 40s linear infinite; }
.hd .hd-sv-orbit span.is-lime { background: var(--hd-lime); }
.hd .hd-sv-guards { display: grid; gap: 12px; margin-top: 28px; }
.hd .hd-sv-guards > div { padding: 18px; border-radius: 18px; border: 1px solid rgba(11, 16, 32, .08); background: #fff; transition: transform .35s var(--hd-ease), box-shadow .35s; }
.hd .hd-sv-guards > div:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(11, 16, 32, .35); }
.hd .hd-sv-guards i { font-size: 18px; color: var(--hd-brand); }
.hd .hd-sv-guards h3 { margin-top: 10px; font-family: var(--hd-display); font-size: 15.5px; font-weight: 700; color: var(--hd-ink); }
.hd .hd-sv-guards p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: #64748B; }

/* ---------- three ways to start ---------- */
.hd .hd-sv-start { padding: 0 0 72px; }
.hd .hd-sv-tiers { display: grid; gap: 16px; margin-top: 40px; }
.hd .hd-sv-tier { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid rgba(11, 16, 32, .07); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .3s; }
.hd .hd-sv-tier:hover { box-shadow: 0 30px 50px -28px rgba(11, 16, 32, .35); }
.hd .hd-sv-tier-k { font-family: var(--hd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-brand); }
.hd .hd-sv-tier-v { margin-top: 16px; font-family: var(--hd-display); font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--hd-ink); }
.hd .hd-sv-tier-s { margin-top: 4px; font-size: 14px; color: #64748B; }
.hd .hd-sv-tier ul { display: grid; gap: 8px; margin: 22px 0 28px; font-size: 14.5px; color: #334155; }
.hd .hd-sv-tier li i { margin-right: 10px; color: var(--hd-brand); }
.hd .hd-sv-tier-link { margin-top: auto; font-family: var(--hd-display); font-weight: 600; color: var(--hd-brand); }
.hd .hd-sv-tier-link i { margin-left: 4px; transition: transform .25s; }
.hd .hd-sv-tier-link:hover { color: var(--hd-indigo); }
.hd .hd-sv-tier-link:hover i { transform: translateX(4px); }
.hd .hd-sv-tier.is-dark { border-color: transparent; background: radial-gradient(70% 60% at 100% 0%, rgba(79, 70, 229, .45), transparent 60%), var(--hd-ink); box-shadow: 0 30px 60px -28px rgba(11, 16, 32, .6); }
.hd .hd-sv-tier.is-dark .hd-sv-tier-k { color: var(--hd-lime); }
.hd .hd-sv-tier.is-dark .hd-sv-tier-v { color: #fff; }
.hd .hd-sv-tier.is-dark .hd-sv-tier-s { color: rgba(255, 255, 255, .6); }
.hd .hd-sv-tier.is-dark ul { color: rgba(255, 255, 255, .85); }
.hd .hd-sv-tier.is-dark li i { color: var(--hd-lime); }
.hd .hd-sv-tier.is-dark .hd-sv-btn-lime { margin-top: auto; align-self: flex-start; }
.hd .hd-sv-tier-tag { position: absolute; top: 22px; right: 22px; padding: 4px 10px; border-radius: 999px; background: var(--hd-lime); font-family: var(--hd-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hd-ink); }

/* ---------- matched case study ---------- */
.hd .hd-sv-case-wrap { padding: 0 0 96px; }
.hd .hd-sv-cs { display: grid; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 10px 30px -20px rgba(11, 16, 32, .25); transition: transform .25s ease-out, box-shadow .3s; }
.hd .hd-sv-cs:hover { box-shadow: 0 34px 60px -30px rgba(79, 70, 229, .45); }
.hd .hd-sv-cs-body { padding: 32px; }
.hd .hd-sv-cs h3 { margin-top: 14px; font-family: var(--hd-display); font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; line-height: 1.15; color: var(--hd-ink); }
.hd .hd-sv-cs-body > p:not(.hd-kick) { margin-top: 12px; max-width: 460px; font-size: 15.5px; line-height: 1.65; }
.hd .hd-sv-cs-stats { display: flex; gap: 32px; margin-top: 24px; }
.hd .hd-sv-cs-stats b { display: block; font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--hd-ink); }
.hd .hd-sv-cs-stats span { font-size: 13px; color: #64748B; }
.hd .hd-sv-cs-more { display: inline-block; margin-top: 28px; font-family: var(--hd-display); font-weight: 600; color: var(--hd-brand); }
.hd .hd-sv-cs-more i { margin-left: 4px; transition: transform .25s; }
.hd .hd-sv-cs:hover .hd-sv-cs-more i { transform: translateX(4px); }
.hd .hd-sv-cs-img { position: relative; min-height: 240px; overflow: hidden; background: linear-gradient(135deg, var(--svc-c1), var(--svc-c2)); }
.hd .hd-sv-cs-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--hd-ease); }
.hd .hd-sv-cs:hover .hd-sv-cs-img img { transform: scale(1.04); }

@keyframes hd-sv-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes hd-sv-blink { 50% { opacity: .2; transform: translateY(-2px); } }
@keyframes hd-sv-spin { to { transform: rotate(360deg); } }
@keyframes hd-sv-keep { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) - 360deg)); } }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
    .hd .hd-sv-guards { grid-template-columns: 1fr 1fr; }
    .hd .hd-sv-orbit-wrap { width: 360px; height: 360px; }
    .hd .hd-sv-ring.is-in { inset: 64px; }
    .hd .hd-sv-orbit span { --r: 180px; }
}
@media (min-width: 768px) {
    .hd .hd-sv-out-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd .hd-sv-head { grid-template-columns: 1fr auto; gap: 40px; }
}
@media (min-width: 1024px) {
    .hd .hd-sv-pg { margin: 0 12px 96px; padding: 96px 0; border-radius: 40px; }
    .hd .hd-sv-rig { grid-template-columns: 1.1fr 1fr; transform: rotateX(6deg) rotateY(-8deg); }
    .hd .hd-sv-rig > .hd-sv-chat { transform: translateZ(50px); }
    .hd .hd-sv-rig > .hd-sv-trace { transform: translateZ(-30px); }
    .hd .hd-sv-ready-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
    .hd .hd-sv-result { padding: 40px; }
    .hd .hd-sv-models-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; }
    .hd .hd-sv-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd .hd-sv-cs { grid-template-columns: 1.1fr 1fr; }
    .hd .hd-sv-cs-body { padding: 48px; }
}
@media (max-width: 639px) {
    .hd .hd-sv-outcomes { padding-top: 48px; }
    .hd .hd-sv-pg { padding: 64px 0; border-radius: 24px; margin-bottom: 64px; }
    .hd .hd-sv-case { padding: 9px 14px; font-size: 13px; }
    .hd .hd-sv-msgs { height: 280px; font-size: 14px; }
    .hd .hd-sv-result { padding: 24px; border-radius: 24px; }
    .hd .hd-sv-result-top { flex-direction: column; align-items: flex-start; }
    .hd .hd-sv-ready, .hd .hd-sv-models, .hd .hd-sv-case-wrap { padding-bottom: 64px; }
    .hd .hd-sv-orbit span { font-size: 11px; padding: 6px 10px; }
    .hd .hd-sv-tier, .hd .hd-sv-cs-body { padding: 24px; }
    .hd .hd-sv-cs { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-sv-tagline, .hd .hd-sv-orbit, .hd .hd-sv-orbit span, .hd .hd-sv-msg, .hd .hd-sv-typing span, .hd .hd-sv-live i { animation: none; }
    .hd .hd-sv-rig, .hd .hd-sv-gauge, .hd .hd-sv-tier, .hd .hd-sv-cs, .hd .hd-sv-cs-img img, .hd .hd-sv-q { transition: none; }
}
@media (max-width: 399px) {
    .hd .hd-sv-orbit-wrap { width: 250px; height: 250px; }
    .hd .hd-sv-ring.is-in { inset: 46px; }
    .hd .hd-sv-core { width: 90px; height: 90px; margin: -45px 0 0 -45px; font-size: 13px; }
    .hd .hd-sv-orbit span { --r: 125px; }
}
/* Home hero rotator: hidden words paint at .01 so the headline is one LCP candidate, not one per word */
.hd .hd-rotator > span:not(.is-on) { opacity: .01; }
/* Perf: the feTurbulence grain + overlay blend is very costly to rasterise on mobile CPUs
   (delayed the home hero's first frame/LCP by seconds); keep it for desktop only */
@media (max-width: 1023px) { .hd .hd-noise::after { content: none; } }

/* ==========================================================================
   Hire v2 (/Developers/{expertise}) - markup in Views/Developers/Index.cshtml (.hd-hi-*)
   Hero stats, team builder (live estimate + 3D deck), 3D flip "bench" profiles,
   timezone overlap bar. Reuses .hd-sv-head / .hd-sv-h2 / .hd-sv-btn-lime from Service v2.
   ========================================================================== */
.hd .hd-hi-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 40px; margin: 36px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); animation: hd-rise .8s .34s var(--hd-ease) both; }
.hd .hd-hi-stats dt { font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.hd .hd-hi-stats dt small { font-size: 15px; font-weight: 700; }
.hd .hd-hi-stats dt.lime { color: var(--hd-lime); }
.hd .hd-hi-stats dd { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .65); }

/* ---------- team builder ---------- */
.hd .hd-hi-build { margin: 0 8px; padding: 80px 0; border-radius: 32px; color: rgba(255, 255, 255, .62);
    background: radial-gradient(60% 60% at 90% 0%, rgba(79, 70, 229, .35), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(6, 182, 212, .2), transparent 60%), var(--hd-ink); }
.hd .hd-hi-build .hd-kick { color: var(--hd-lime); }
.hd .hd-hi-build .hd-sv-h2 b, .hd .hd-hi-tz .hd-sv-h2 b { font-weight: inherit; color: var(--hd-lime); }
.hd .hd-hi-build-grid { display: grid; gap: 20px; margin-top: 40px; }
.hd .hd-hi-ctrl { display: grid; gap: 28px; align-content: start; align-self: start; padding: 26px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.hd .hd-hi-ctrl fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.hd .hd-hi-ctrl legend { width: auto; margin: 0 0 14px; border: 0; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.hd .hd-hi-ctrl legend small { margin-left: 6px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .3); }
.hd .hd-hi-roles { display: grid; gap: 8px; }
.hd .hd-hi-role { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background-color .25s, border-color .25s, color .25s; }
.hd .hd-hi-role > i { width: 18px; text-align: center; color: rgba(255, 255, 255, .55); }
.hd .hd-hi-add { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; text-align: left; font-family: var(--hd-display); font-size: 15px; font-weight: 600; color: inherit; }
.hd .hd-hi-step { display: flex; align-items: center; gap: 4px; }
.hd .hd-hi-step button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 17px; line-height: 1; color: inherit; transition: background-color .2s; }
.hd .hd-hi-step button:hover { background: rgba(255, 255, 255, .18); }
.hd .hd-hi-cnt { width: 20px; text-align: center; font-variant-numeric: tabular-nums; color: inherit; }
.hd .hd-hi-role.is-on { border-color: var(--hd-lime); background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hi-role.is-on > i { color: var(--hd-ink); }
.hd .hd-hi-role.is-on .hd-hi-step button { background: rgba(11, 16, 32, .1); }
.hd .hd-hi-role.is-on .hd-hi-step button:hover { background: rgba(11, 16, 32, .2); }
.hd .hd-hi-ctrl-row { display: grid; gap: 28px; }
.hd .hd-hi-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); }
.hd .hd-hi-seg button { padding: 10px 6px; border: 0; border-radius: 14px; background: none; font-family: var(--hd-display); font-size: 14px; font-weight: 600; line-height: 1.25; color: #fff; transition: background-color .25s, color .25s; }
.hd .hd-hi-seg small { display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 400; opacity: .6; }
.hd .hd-hi-seg button[aria-pressed="true"] { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hi-pm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .72); cursor: pointer; }
.hd .hd-hi-pm input { width: 17px; height: 17px; margin: 0; accent-color: var(--hd-lime); }
.hd .hd-hi-pm span { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11.5px; }
.hd .hd-hi-ctrl button:focus-visible, .hd .hd-hi-pm input:focus-visible { outline: 2px solid var(--hd-lime); outline-offset: 2px; }

.hd .hd-hi-sum { display: flex; flex-direction: column; padding: 26px; border-radius: 28px; background: #fff; color: #475569; }
.hd .hd-hi-deck-wrap { position: relative; height: 150px; perspective: 1100px; }
.hd .hd-hi-deck { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-32deg); }
.hd .hd-hi-tile { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; width: 150px; height: 92px; margin: -46px 0 0 -75px; padding: 0 16px; border-radius: 18px; font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: #fff;
    box-shadow: 0 30px 40px -20px rgba(11, 16, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .6s var(--hd-ease), opacity .4s; }
.hd .hd-hi-tile.is-new { opacity: 0; transform: translateZ(170px) !important; }
.hd .hd-hi-sum-k { margin-top: 8px; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-muted); }
.hd .hd-hi-lines { display: grid; gap: 8px; margin: 12px 0 22px; font-size: 14.5px; color: var(--hd-ink); }
.hd .hd-hi-lines li { display: flex; align-items: center; gap: 12px; }
.hd .hd-hi-lines li > span:nth-child(2) { flex: 1; }
.hd .hd-hi-lines small { font-size: 12.5px; color: var(--hd-muted); }
.hd .hd-hi-sw { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; font-size: 12px; color: #fff; }
.hd .hd-hi-sw .fa-list-check { color: var(--hd-ink); }
.hd .hd-hi-total { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hd-line); }
.hd .hd-hi-total > p:first-child { font-size: 14px; color: #64748B; }
.hd .hd-hi-range { margin-top: 2px; font-family: var(--hd-display); font-size: clamp(30px, 3.6vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--hd-ink); font-variant-numeric: tabular-nums; }
.hd .hd-hi-range i { font-style: normal; color: #CBD5E1; }
.hd .hd-hi-note { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: #64748B; }
.hd .hd-hi-note b { font-weight: 600; color: #059669; }
.hd .hd-hi-send { width: 100%; justify-content: space-between; margin-top: 20px; padding: 8px 8px 8px 24px; background: var(--hd-ink); color: #fff; }
.hd .hd-hi-send .hd-btn-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--hd-lime); color: var(--hd-ink); transition: transform .3s var(--hd-ease); }
.hd .hd-hi-send:hover, .hd .hd-hi-send:focus { background: #1E293B; color: #fff; }
.hd .hd-hi-send:hover .hd-btn-icon { transform: rotate(45deg); }

/* ---------- bench: 3D flip profiles ---------- */
.hd .hd-hi-bench { padding: 88px 0 72px; }
.hd .hd-hi-flips { display: grid; gap: 16px; margin-top: 40px; }
.hd .hd-hi-flip { height: 340px; perspective: 1200px; cursor: pointer; outline: 0; }
.hd .hd-hi-flip-in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--hd-ease); }
.hd .hd-hi-flip.is-flipped .hd-hi-flip-in { transform: rotateY(180deg); }
.hd .hd-hi-flip:focus-visible .hd-hi-face { box-shadow: 0 0 0 3px var(--hd-brand); }
@media (hover: hover) { .hd .hd-hi-flip:hover .hd-hi-flip-in { transform: rotateY(180deg); } }
.hd .hd-hi-face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hd .hd-hi-face-top { display: flex; align-items: center; justify-content: space-between; }
.hd .hd-hi-ini { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-family: var(--hd-display); font-size: 18px; font-weight: 700; color: #fff; }
.hd .hd-hi-face h3 { margin-top: 24px; font-family: var(--hd-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--hd-ink); }
.hd .hd-hi-meta { margin-top: 4px; font-size: 14px; color: #64748B; }
.hd .hd-hi-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hd .hd-hi-skills li { padding: 4px 11px; border-radius: 999px; background: var(--hd-paper); font-size: 12px; font-weight: 500; color: var(--hd-ink); }
.hd .hd-hi-hint { margin-top: auto; font-family: var(--hd-mono); font-size: 11.5px; color: var(--hd-muted); }
.hd .hd-hi-hint i { margin-right: 6px; }
.hd .hd-hi-face.is-back { padding: 0; background: var(--hd-ink); color: rgba(255, 255, 255, .72); transform: rotateY(180deg); }
.hd .hd-hi-face.is-back img { width: 100%; height: 132px; object-fit: cover; object-position: top; }
.hd .hd-hi-face.is-back > div { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 24px; font-size: 14px; line-height: 1.55; }
.hd .hd-hi-shipped { margin-bottom: 8px; font-family: var(--hd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-lime); }
.hd .hd-hi-face.is-back b { margin-top: auto; font-family: var(--hd-display); font-size: 22px; font-weight: 800; color: var(--hd-lime); }

/* ---------- timezone overlap ---------- */
.hd .hd-hi-tz-outer { padding: 0 0 88px; }
.hd .hd-hi-tz { padding: 30px 24px; border-radius: 32px; background: var(--hd-ink); color: rgba(255, 255, 255, .62); }
.hd .hd-hi-tz-head { display: grid; gap: 22px; align-items: end; }
.hd .hd-hi-tz-head p { max-width: 520px; margin-top: 10px; font-size: 15.5px; line-height: 1.65; }
.hd .hd-hi-tz-head p b { color: #fff; }
.hd .hd-hi-tz-sel { display: flex; flex-wrap: wrap; gap: 4px; justify-self: start; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); }
.hd .hd-hi-tz-sel button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .8); transition: background-color .25s, color .25s; }
.hd .hd-hi-tz-sel button[aria-pressed="true"] { background: #fff; color: var(--hd-ink); }
.hd .hd-hi-tz-sel button:focus-visible { outline: 2px solid var(--hd-lime); outline-offset: 2px; }
.hd .hd-hi-tz-rows { display: grid; gap: 18px; margin-top: 36px; }
.hd .hd-hi-tz-rows p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.hd .hd-hi-tz-rows p span:last-child { font-family: var(--hd-mono); text-align: right; }
.hd .hd-hi-track { position: relative; overflow: hidden; height: 44px; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4.1667%), rgba(255, 255, 255, .04); }
.hd .hd-hi-track i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 12px; transition: left .5s var(--hd-ease), width .5s var(--hd-ease); }
.hd .hd-hi-track .is-you { background: rgba(79, 70, 229, .7); }
.hd .hd-hi-track .is-us { background: rgba(6, 182, 212, .6); }
.hd .hd-hi-track .is-ov { border: 2px solid var(--hd-lime); background: rgba(198, 244, 50, .2); }
.hd .hd-hi-tz-rows .hd-hi-ticks { margin: -6px 0 0; font-family: var(--hd-mono); font-size: 10px; color: rgba(255, 255, 255, .35); }
.hd .hd-hi-tz-foot { margin-top: 22px; font-size: 12.5px; color: rgba(255, 255, 255, .4); }

@media (min-width: 640px) {
    .hd .hd-hi-roles, .hd .hd-hi-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd .hd-hi-ctrl-row { grid-template-columns: 1.2fr 1fr; }
    .hd .hd-hi-ctrl, .hd .hd-hi-sum { padding: 32px; }
    .hd .hd-hi-tz { padding: 44px; }
}
@media (min-width: 1024px) {
    .hd .hd-hi-build { margin: 0 12px; padding: 96px 0; }
    .hd .hd-hi-build-grid { grid-template-columns: 1.25fr 1fr; }
    .hd .hd-hi-flips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hd .hd-hi-tz-head { grid-template-columns: 1fr auto; }
    .hd .hd-hi-tz-sel { justify-self: end; }
}
@media (max-width: 639px) {
    .hd .hd-hi-tz-sel button { padding: 6px 11px; font-size: 13px; }
}
@media (max-width: 399px) {
    .hd .hd-hi-stats { gap: 12px 22px; }
    .hd .hd-hi-stats dt { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-hi-tile, .hd .hd-hi-flip-in, .hd .hd-hi-track i { transition: none; }
}