/* ============================================================
   WEBDOT - home v2: console hero, service panels, coverage radar
   Ported from the Claude Design handoff. Loaded on the front page
   only. The client strip and the testimonials keep the real
   content the rest of the theme uses, in this design's clothes.
   ============================================================ */
.hx { --edge: rgba(255,255,255,.12); }

/* ---------------- hero ---------------- */
.hx-hero { position: relative; background: #111110; color: #f2f1ec; overflow: hidden; padding: clamp(40px,4.6vw,66px) 0 0; }
.hx-hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(52% 62% at 84% 6%, rgba(190,44,46,.5), transparent 64%),
  radial-gradient(46% 60% at 6% 100%, rgba(154,32,34,.3), transparent 66%),
  conic-gradient(from 210deg at 70% 40%, rgba(255,255,255,.06), transparent 30%);
  animation: hxBreathe 22s var(--ease) infinite alternate; }
.hx-hero::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 10%, transparent 90%); }
@keyframes hxBreathe { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-2%,1%); } }
.hx-hero > * { position: relative; z-index: 2; }

.hx-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: clamp(22px,2.8vw,36px); border-bottom: 1px solid var(--edge); }
.hx-top .eyebrow { color: #f2f1ec; }
.hx-top .eyebrow .bar { background: var(--red-600); }
.hx-live { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,241,236,.62); }
.hx-live i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: hxPulse 2.4s infinite; }
@keyframes hxPulse { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

.hx-grid { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr); gap: clamp(32px,4vw,56px); align-items: end; padding: clamp(30px,3.6vw,48px) 0 clamp(28px,3.4vw,44px); }
.hx-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(40px,6.4vw,84px); line-height: .96; letter-spacing: -.035em; text-transform: uppercase; margin: 0; color: #fff; text-wrap: balance; }
.hx-h1 em { font-style: italic; font-weight: 700; text-transform: none; letter-spacing: -.02em; background: linear-gradient(96deg,#ffdcdc,#e0797a 60%,#fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-h1 .hx-dot { color: var(--red-600); }
.hx-lead { margin: 26px 0 0; font-size: clamp(16px,1.4vw,19px); line-height: 1.62; color: rgba(242,241,236,.7); max-width: 46ch; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* console panel */
.hx-console { border-radius: 18px; border: 1px solid var(--edge); background: rgba(18,18,17,.66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 34px 70px rgba(0,0,0,.45); overflow: hidden; }
.hx-con-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--edge); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(242,241,236,.5); }
.hx-con-head b { color: #fff; font-weight: 500; }
.hx-metrics { padding: 8px 18px 18px; }
.hx-metric { padding: 16px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.hx-metric:last-child { border-bottom: 0; }
.hx-m-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hx-m-k { font-family: var(--mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: rgba(242,241,236,.5); }
.hx-m-v { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
.hx-bar { position: relative; height: 4px; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.hx-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w,60%); border-radius: 99px; background: linear-gradient(90deg,#d2464a,#8d1c1e); transform-origin: left; animation: hxFill 1.5s var(--ease) both; }
@keyframes hxFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hx-spark { display: block; width: 100%; height: 42px; margin-top: 6px; }
.hx-spark path.line { fill: none; stroke: #e07b7c; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: hxDraw 2.2s var(--ease) .2s forwards; }
@keyframes hxDraw { to { stroke-dashoffset: 0; } }

/* hero index row */
.hx-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--edge); }
.hx-idx { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px 20px 0; overflow: hidden; transition: color .25s; }
.hx-idx + .hx-idx { border-left: 1px solid var(--edge); padding-left: 26px; }
.hx-idx::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--red-600); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.hx-idx:hover::before, .hx-idx:focus-visible::before { transform: scaleX(1); }
.hx-idx-n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: rgba(242,241,236,.42); }
.hx-idx-t { font-family: var(--display); font-weight: 600; font-size: clamp(15px,1.5vw,19px); color: #fff; }
.hx-idx .arr { margin-left: auto; color: var(--red-600); transition: transform .3s var(--ease); }
.hx-idx:hover .arr { transform: translate(4px,-4px); }

/* ---------------- clients: this design's band, our real logos ---------------- */
.hx-clients { background: #fff; border-bottom: 1px solid var(--line); padding: 24px 0 26px; }
.hx-clients .client-label { text-align: left; margin: 0 0 16px; font-size: 12px; }
.hx-clients .client-strip { margin: 0; }

/* ---------------- expanding service panels ---------------- */
/* The open panel grows via flex-grow only: transitioning the flex shorthand
   leaves the parts stuck part-way, because flex-basis:auto cannot interpolate. */
.hx-panels { display: flex; gap: 12px; min-height: 0; }
.hx-panel { position: relative; height: 300px; flex: 0 0 86px; border-radius: 18px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); background: linear-gradient(165deg,#fff,#f7f4f1); transition: flex-grow .78s var(--ease), background .6s, border-color .5s, box-shadow .6s; display: block; width: 100%; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; }
.hx-panel.on { flex-grow: 1; background: linear-gradient(155deg,#1d1c1a 0%, #2a1616 55%, #7d1819 160%); border-color: #33302c; box-shadow: 0 30px 66px rgba(20,20,20,.24); }
.hx-panel:not(.on):hover { border-color: var(--red); background: linear-gradient(165deg,#fff,#fbf0ef); }
.hx-panel:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hx-p-rail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0; }
.hx-p-rail .n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--red); }
.hx-p-vert { writing-mode: vertical-rl; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.hx-panel.on .hx-p-rail { opacity: 0; pointer-events: none; transition: opacity .28s; }
.hx-p-body { position: relative; opacity: 0; visibility: hidden; transition: opacity .4s .3s; padding: clamp(22px,2.2vw,30px); height: 100%; display: flex; flex-direction: column; color: #f2f1ec; }
.hx-panel.on .hx-p-body { opacity: 1; visibility: visible; }
.hx-p-body::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(90% 80% at 90% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 80% at 90% 0%, #000, transparent 70%); pointer-events: none; }
.hx-p-body > * { position: relative; z-index: 1; }
.hx-p-k { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #e58e8f; }
.hx-p-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(21px,2.1vw,27px); letter-spacing: -.02em; margin: 12px 0 0; color: #fff; }
.hx-p-body p { margin: 10px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.58; color: rgba(242,241,236,.72); }
.hx-p-pts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.hx-p-pts li { white-space: nowrap; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); color: rgba(242,241,236,.82); }
.hx-p-foot { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
.hx-p-foot .arr { color: #e58e8f; transition: transform .3s var(--ease); }
.hx-panel.on:hover .hx-p-foot .arr { transform: translateX(5px); }

/* ---------------- focus list (why) ---------------- */
.hx-why { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(36px,5vw,72px); align-items: start; }
.hx-why-left { position: sticky; top: 112px; }
.hx-rows { border-top: 1px solid var(--line); }
.hx-row { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 18px; padding: 20px 22px 20px 4px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hx-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(154,32,34,.07), transparent 72%); opacity: 0; transition: opacity .5s; }
/* The row nudges right by moving its children, not its padding: animating
   padding relays out the paragraph on every frame, which is what made the
   row look like it jerked rather than glided. */
.hx-row > * { position: relative; z-index: 1; transition: transform .5s var(--ease); }
.hx-row:hover > * { transform: translateX(16px); }
.hx-row:hover::before { opacity: 1; }
.hx-r-n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--red); padding-top: 5px; }
.hx-row :is(h3, h4) { font-family: var(--display); font-size: clamp(19px,2vw,24px); letter-spacing: -.01em; margin: 0 0 8px; }
.hx-row p { margin: 0; color: var(--ink-mute); font-size: 15px; line-height: 1.62; max-width: 58ch; }

/* ---------------- coverage radar ---------------- */
.hx-cover { position: relative; overflow: hidden; background: #161615; color: #f2f1ec; padding: clamp(46px,5.4vw,76px) 0; }
.hx-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 78% 20%, rgba(154,32,34,.32), transparent 62%); }
.hx-cover > * { position: relative; z-index: 1; }
.hx-cover .eyebrow { color: #f2f1ec; }
.hx-cover .eyebrow .bar { background: var(--red-600); }
.hx-cover h2 { color: #fff; }
.hx-cover-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(36px,5vw,72px); align-items: center; }
.hx-cover p.t { color: rgba(242,241,236,.72); font-size: 16.5px; line-height: 1.66; margin-top: 18px; max-width: 48ch; }
.hx-cover-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hx-tel { font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; }
.hx-tel:hover { color: #e58e8f; }
.hx-radar { position: relative; aspect-ratio: 1/.82; border-radius: 20px; border: 1px solid var(--edge); background: rgba(255,255,255,.03); overflow: hidden; display: grid; place-items: center; }
.hx-radar i { position: absolute; border: 1px solid rgba(214,80,82,.32); border-radius: 50%; width: 26%; aspect-ratio: 1; animation: hxRing 4.2s ease-out infinite; }
.hx-radar i:nth-child(2) { animation-delay: 1.4s; }
.hx-radar i:nth-child(3) { animation-delay: 2.8s; }
@keyframes hxRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.hx-radar-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hx-radar-core span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,241,236,.66); }
.hx-cities { position: absolute; inset: 0; }
.hx-city { position: absolute; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(242,241,236,.45); }
.hx-city::before { content: "+"; margin-right: 6px; color: var(--red-600); }

/* ---------------- testimonials: this design's card, our three real quotes ---------------- */
.hx-quote-wrap { background: linear-gradient(180deg,#fff,#f6f1ee); padding: clamp(44px,5.2vw,72px) 0; }
.hx-quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.6vw,20px); margin-top: 34px; align-items: stretch; }
.hx-quote { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(26px,2.6vw,34px); color: #fff; background: linear-gradient(150deg,#a52325 0%, #7a1718 46%, #1b1312 100%); box-shadow: 0 30px 70px rgba(154,32,34,.22); display: flex; flex-direction: column; }
.hx-quote::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 88% 4%, rgba(255,255,255,.16), transparent 62%), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/60px 60px; }
.hx-quote > * { position: relative; z-index: 1; }
.hx-quote blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(17px,1.5vw,20px); line-height: 1.45; letter-spacing: -.015em; }
.hx-q-author { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 26px; }
.hx-q-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.hx-q-n { font-family: var(--display); font-weight: 700; font-size: 15.5px; }
.hx-q-r { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.62); }

/* red CTA on home */
.hx .cta-band { background: linear-gradient(150deg,#8f1d1f 0%, #6d1516 45%, #1c1413 100%); color: #fff; overflow: hidden; }
.hx .cta-band::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(50% 70% at 80% 10%, rgba(255,255,255,.14), transparent 62%),
  linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/64px 64px; }
.hx .cta-band > * { position: relative; z-index: 1; }
.hx .cta-band h2 { color: #fff; }
.hx .cta-band p { color: rgba(255,255,255,.76); }
.hx .cta-band .btn-primary { background: #fff; color: var(--red); }
.hx .cta-band .btn-primary:hover { background: #f3e7e7; color: var(--red-700); }
.hx .cta-band .cta-dot .dotmark { filter: brightness(0) invert(1); }

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
  .hx-grid { grid-template-columns: minmax(0,1fr); gap: 40px; align-items: start; }
  .hx-index { grid-template-columns: minmax(0,1fr); }
  .hx-idx + .hx-idx { border-left: 0; border-top: 1px solid var(--edge); padding-left: 0; }
  .hx-panels { flex-direction: column; min-height: 0; }
  .hx-panel { flex: none; height: auto; }
  .hx-panel .hx-p-rail { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 0 24px; }
  .hx-p-vert { writing-mode: horizontal-tb; }
  .hx-panel:not(.on) { height: 78px; }
  .hx-panel.on { height: auto; }
  .hx-why { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .hx-why-left { position: static; }
  .hx-cover-grid { grid-template-columns: minmax(0,1fr); }
  .hx-quotes { grid-template-columns: minmax(0,1fr); }
}@media (max-width: 620px) {
  .hx-top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hx-row { grid-template-columns: minmax(0,1fr); gap: 8px; }}
@media (prefers-reduced-motion: reduce) {
  .hx-hero::before, .hx-radar i, .hx-bar i, .hx-spark path.line, .hx-live i { animation: none; }
  .hx-spark path.line { stroke-dashoffset: 0; }
  .hx-panel, .hx-row > *, .hx-p-body, .hx-idx .arr { transition: none; }
  .hx-row:hover > * { transform: none; }}