/* HatchDesk theme: svc-v2 styles. Used by Services/Index, Developers/Index. Requires core.css. */

/* ==========================================================================
   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: #047857; 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; }
}