/* ============================================================
   Hypertouch Marketing — shared design system
   Extracted verbatim from welcome.blade.php (single source of
   truth for tokens, buttons, nav-link, reveal, forms). Tailwind
   utilities layer on top via CDN. Cache-busted by filemtime.
   Panel/orbit component CSS lands with those partials in 0.2b.
   ============================================================ */
:root {
  --primary-blue: #0A58FF;
  --primary-blue-dark: #004AD6;
  --light-blue-bg: #F0F5FF;
  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --dark-bg: #111827;
  --scrollbar-width: 0px;
}
body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  width: 100%;
  overflow-x: hidden;
}
.bg-custom-light-blue {
  background-color: var(--light-blue-bg);
  background-image:
    radial-gradient(55rem 42rem at 88% -12%, rgba(10,88,255,.10), transparent 62%),
    radial-gradient(46rem 40rem at -8% 112%, rgba(236,72,153,.055), transparent 60%),
    linear-gradient(180deg, #F7FAFF 0%, var(--light-blue-bg) 46%, #E9F0FF 100%);
}
.bg-custom-dark {
  background-color: var(--dark-bg);
  color: #fff;
  background-image:
    radial-gradient(48rem 40rem at 82% -18%, rgba(10,88,255,.24), transparent 60%),
    radial-gradient(42rem 38rem at -10% 120%, rgba(99,102,241,.16), transparent 60%),
    linear-gradient(180deg, #0E1726 0%, var(--dark-bg) 55%, #0B1220 100%);
}

/* ---------- Buttons ---------- */
.btn-base { padding: 12px 28px; border-radius: 8px; font-weight: 600; transition: transform .1s ease, box-shadow .1s ease; border: none; cursor: pointer; display: inline-block; text-align: center; color: #fff; }
.btn-primary { background-color: var(--primary-blue); color: #fff; box-shadow: 0 4px 8px -1px rgba(10,88,255,.35), 0 2px 4px -2px rgba(10,88,255,.25); transition: background-color .2s ease, transform .2s ease; }
.btn-primary:hover { background-color: var(--primary-blue-dark); transform: translateY(-2px); box-shadow: 0 10px 20px -3px rgba(10,88,255,.4), 0 4px 8px -4px rgba(10,88,255,.3); }
.btn-secondary { background-color: #fff; color: var(--text-secondary); padding: 10px 26px; border: 2px solid #E5E7EB; border-radius: 8px; font-weight: 600; transition: all .2s ease; cursor: pointer; display: inline-block; }
.btn-secondary:hover { border-color: var(--primary-blue); color: var(--primary-blue); background-color: #F0F8FF; }
.btn-dynamic { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.15); transition: background-color .4s ease, box-shadow .4s ease, transform .1s ease !important; }
.btn-dynamic:hover { transform: translateY(-2px); filter: brightness(95%); }

/* ---------- Nav-link underline ---------- */
.nav-link { position: relative; font-weight: 500; color: var(--text-secondary); transition: color .2s ease; cursor: pointer; }
.nav-link:hover { color: var(--primary-blue); }
.nav-link::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--primary-blue); transition: width .3s ease; }
.nav-link:hover::after { width: 30%; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.gsap-reveal-item { opacity: 0; transform: translateY(15px); }

/* ---------- Form focus + range slider ---------- */
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--primary-blue) !important; box-shadow: 0 0 0 3px rgba(10,88,255,.4); }
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--primary-blue); cursor: pointer; margin-top: -8px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #E5E7EB; border-radius: 2px; }
input[type=range]::-moz-range-thumb { height: 20px; width: 20px; border: none; border-radius: 50%; background: var(--primary-blue); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
input[type=range]::-moz-range-track { width: 100%; height: 4px; cursor: pointer; background: #E5E7EB; border-radius: 2px; }

/* ============================================================
   Marketing nav — desktop dropdowns + mobile accordion + sticky
   ============================================================ */
.mkt-nav { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 70; border-bottom: 2px solid #E5E7EB; }

/* Desktop dropdown */
.mkt-dd { position: relative; }
.mkt-dd-trigger { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--text-secondary); cursor: pointer; background: none; border: none; padding: 0; font-size: 1rem; font-family: inherit; transition: color .2s ease; }
.mkt-dd-trigger:hover, .mkt-dd.open .mkt-dd-trigger { color: var(--primary-blue); }
.mkt-dd-trigger svg { width: 14px; height: 14px; transition: transform .25s ease; }
.mkt-dd.open .mkt-dd-trigger svg, .mkt-dd:hover .mkt-dd-trigger svg { transform: rotate(180deg); }
.mkt-dd-menu { position: absolute; top: calc(100% + 14px); left: 0; background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.18); padding: 1rem; min-width: 280px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 80; }
.mkt-dd-menu::before { content: ''; position: absolute; top: -14px; left: 0; width: 100%; height: 14px; } /* bridges hover gap */
.mkt-dd:hover > .mkt-dd-menu, .mkt-dd.open > .mkt-dd-menu, .mkt-dd:focus-within > .mkt-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mkt-dd-link { display: block; padding: .55rem .6rem; border-radius: 8px; color: var(--text-primary); font-weight: 500; font-size: .95rem; transition: background .15s ease, color .15s ease; }
.mkt-dd-link:hover { background: var(--light-blue-bg); color: var(--primary-blue); }
.mkt-dd-link span { display: block; font-size: .78rem; font-weight: 400; color: var(--text-secondary); margin-top: 1px; }
.mkt-dd-blurb { font-size: .78rem; line-height: 1.5; color: var(--text-secondary); border-top: 1px solid #F1F5F9; margin-top: .5rem; padding-top: .75rem; }
.mkt-dd-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9CA3AF; padding: .35rem .6rem .15rem; }
.mkt-dd-wide { min-width: 540px; }
.mkt-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.25rem; }

/* Mobile panel + accordions */
.mkt-mnav { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.mkt-mnav.open { max-height: calc(100dvh - 5rem); overflow-y: auto; opacity: 1; }
.mkt-macc-panel { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.mkt-macc.open .mkt-macc-panel { max-height: 600px; }
.mkt-macc-trigger svg { transition: transform .25s ease; }
.mkt-macc.open .mkt-macc-trigger svg { transform: rotate(180deg); }

/* Sticky mobile CTA */
.mkt-sticky-cta { transition: opacity .5s ease, transform .5s ease; }
.mkt-sticky-cta.visible { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }

/* ============================================================
   Slide-out panel component (<x-marketing.panel>)
   Generalized from welcome.blade.php case-study panel.
   ============================================================ */
.mkt-panel { z-index: 100; transition: opacity .3s ease-in-out; }
.mkt-panel-overlay { transition: opacity .3s ease-in-out; cursor: pointer; }
.mkt-panel-wrapper { position: fixed; inset: 0; display: flex; align-items: center; pointer-events: none; padding: 2rem 0; height: 100dvh; }
.mkt-panel-wrapper.justify-start { justify-content: flex-start; }
.mkt-panel-wrapper.justify-end { justify-content: flex-end; }
.mkt-panel-card { transition: transform .4s cubic-bezier(.4,0,.2,1); background:#fff; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); max-height:100%; display:flex; flex-direction:column; }
.mkt-panel--left .mkt-panel-card { border-radius: 0 1.5rem 1.5rem 0; }
.mkt-panel--right .mkt-panel-card { border-radius: 1.5rem 0 0 1.5rem; }
.mkt-panel-header { background:#F9FAFB; border-bottom:1px solid #E5E7EB; padding:1rem 1.5rem; flex-shrink:0; border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.mkt-panel-content { padding:2.5rem; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; }
.mkt-panel-content::-webkit-scrollbar { display:none; }
.mkt-panel-header h3 { font-size:.75rem; color:var(--primary-blue); font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.25rem; }
.mkt-panel-header p { font-size:1.5rem; font-weight:700; color:var(--text-primary); }
.mkt-panel-content h2 { font-size:2.25rem; font-weight:800; color:var(--text-primary); margin-bottom:1.5rem; line-height:1.2; }
.mkt-panel-content .pull-quote { font-size:1.125rem; color:var(--text-secondary); margin-bottom:2.5rem; padding-left:1.5rem; border-left:4px solid var(--primary-blue); font-style:italic; }
.mkt-panel-content .narrative-section { margin-bottom:1.5rem; }
.mkt-panel-content .narrative-section h4 { display:flex; align-items:center; font-size:1rem; font-weight:600; color:var(--text-primary); margin-bottom:.75rem; }
.mkt-panel-content .narrative-section svg { width:1.25rem; height:1.25rem; margin-right:.75rem; color:var(--primary-blue); }
.mkt-panel-content .stats-column { background:#F9FAFB; border:1px solid #E5E7EB; border-radius:1rem; padding:2rem; display:flex; flex-direction:column; justify-content:center; }
.mkt-panel-content .stats-column .stat-item:not(:last-child) { margin-bottom:2.5rem; }
.mkt-panel-content .stats-column .stat-item .value { font-size:3.5rem; font-weight:800; color:var(--primary-blue); line-height:1; }
.mkt-panel-content .stats-column .stat-item .label { font-size:.75rem; color:var(--text-secondary); margin-top:.5rem; text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.mkt-panel-close { position:absolute; top:1rem; right:1rem; color:#6B7280; background:#F9FAFB; width:2.5rem; height:2.5rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; transition:all .2s ease; border:1px solid #E5E7EB; z-index:20; cursor:pointer; }
.mkt-panel-close:hover { color:var(--text-primary); background:#F3F4F6; transform:rotate(90deg); }
.mkt-panel-reveal { opacity:0; transform:translateY(15px); }
body.mkt-panel-open { overflow:hidden; padding-right:var(--scrollbar-width) !important; touch-action:none; }
body.mkt-panel-open .mkt-nav { padding-right:var(--scrollbar-width) !important; }

/* Optional floating pulse trigger — page adds data-mkt-panel-open to it */
.mkt-panel-trigger { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:#fff; border:2px solid #D1D5DB; border-radius:9999px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.15); cursor:pointer; z-index:10; opacity:0; visibility:hidden; transition:opacity .5s ease-in-out, transform .2s ease, border-color .2s ease, visibility .5s; }
.mkt-panel-trigger:hover { transform:translateY(-50%) scale(1.12); border-color:var(--primary-blue); background:#F0F8FF; }
.mkt-panel-trigger.left-pos { left:-24px; }
.mkt-panel-trigger.right-pos { right:-24px; }
.mkt-panel-trigger.visible { opacity:1; visibility:visible; animation: mktPanelPulse 3s ease-in-out infinite; }
.mkt-panel-trigger.visible:hover { animation:none; transform:translateY(-50%) scale(1.12); }
@keyframes mktPanelPulse { 0%{transform:translateY(-50%) scale(1);box-shadow:0 6px 16px rgba(0,0,0,.15);} 50%{transform:translateY(-50%) scale(1.12);box-shadow:0 10px 25px rgba(10,88,255,.25);} 100%{transform:translateY(-50%) scale(1);box-shadow:0 6px 16px rgba(0,0,0,.15);} }

@media (max-width: 767px) {
  .mkt-panel-wrapper { padding:0; align-items:flex-start; height:100dvh; }
  .mkt-panel-card { margin-top:80px; height:auto; max-height:calc(100dvh - 80px); border-radius:1.5rem 1.5rem 0 0; }
  .mkt-panel--left .mkt-panel-card, .mkt-panel--right .mkt-panel-card { border-radius:1.5rem 1.5rem 0 0; }
}

/* ============================================================
   Orbit carousel component (<x-marketing.orbit-carousel>)
   Circular wheel desktop / swipe stack mobile + autoplay timer.
   ============================================================ */
.mkt-orbit { position:relative; overflow:hidden; padding:4rem 0 5rem; }
.mkt-orbit-wrapper { position:relative; height:clamp(480px,55vw,600px); display:flex; align-items:center; justify-content:center; margin-top:80px; }
.mkt-orbit-container { width:clamp(480px,60vw,650px); height:clamp(480px,60vw,650px); position:relative; border-radius:50%; }
.mkt-orbit-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(100px,14vw,150px); height:clamp(100px,14vw,150px); z-index:10; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(10,88,255,.1); pointer-events:none; padding:12px; }
.mkt-orbit-center img { width:100%; height:100%; object-fit:contain; }
.mkt-orbit-item { position:absolute; top:50%; left:50%; width:clamp(240px,22vw,280px); }
.mkt-orbit-item.is-active { z-index:20; }
.mkt-orbit-card { background:#fff; padding:20px 24px; border-radius:16px; box-shadow:0 4px 6px -1px rgba(0,0,0,.1), inset 0 0 0 0 transparent; border:1px solid #e2e8f0; text-align:center; position:relative; user-select:none; -webkit-user-select:none; min-height:145px; display:flex; flex-direction:column; justify-content:center; transition:box-shadow .8s ease; }
.mkt-orbit-item.is-active .mkt-orbit-card { box-shadow:0 0 20px rgba(10,88,255,.25), 0 0 40px rgba(10,88,255,.12), inset 0 0 0 2px var(--primary-blue); }
.mkt-orbit-item.is-active.is-cta-ready .mkt-orbit-card { cursor:pointer; animation: mktOrbitPulse 3s linear infinite; animation-fill-mode:both; }
@keyframes mktOrbitPulse { 0%,100%{box-shadow:0 0 20px rgba(10,88,255,.25),0 0 40px rgba(10,88,255,.12),inset 0 0 0 2px var(--primary-blue);} 50%{box-shadow:0 0 25px rgba(10,88,255,.4),0 0 50px rgba(10,88,255,.25),inset 0 0 0 2px var(--primary-blue);} }
.mkt-orbit-card h4 { color:var(--primary-blue); font-weight:800; margin-bottom:10px; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; }
.mkt-orbit-card p { color:#334155; font-size:.85rem; line-height:1.5; font-weight:500; margin:0; }
.mkt-orbit-card .card-list { display:inline-block; text-align:left; margin:0 auto; padding:0; color:#334155; font-size:.8rem; line-height:1.5; list-style:none; }
.mkt-orbit-card .card-list li { position:relative; padding-left:14px; margin-bottom:4px; }
.mkt-orbit-card .card-list li:last-child { margin-bottom:0; }
.mkt-orbit-card .card-list li::before { content:"\2022"; position:absolute; left:0; color:var(--primary-blue); font-weight:bold; }
.mkt-orbit-card .stat-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid #f1f5f9; }
.mkt-orbit-card .stat-row:last-child { border-bottom:none; }
.mkt-orbit-card .stat-value { font-weight:800; color:var(--primary-blue); font-size:.9rem; }
.mkt-orbit-card .stat-label { color:#64748b; font-size:.75rem; }
.mkt-orbit-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:100; cursor:pointer; background:#fff; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.1); transition:transform .2s, background-color .2s; color:#64748b; width:48px; height:48px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; border:none; }
.mkt-orbit-arrow:active { transform:translateY(-50%) scale(.95); background:#f1f5f9; }
.mkt-orbit-arrow:hover { color:var(--primary-blue); }
.mkt-orbit-arrow--prev { left:20px; }
.mkt-orbit-arrow--next { right:20px; }
.mkt-orbit-timer-svg { position:absolute; top:0; left:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; overflow:visible; }
.mkt-orbit-timer-circle { fill:none; stroke:var(--primary-blue); stroke-width:2; stroke-linecap:round; stroke-dasharray:138; stroke-dashoffset:138; opacity:.3; }
.mkt-orbit-timer-arrow { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.mkt-orbit-timer-head { position:absolute; left:50%; top:2px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid var(--primary-blue); transform:translate(-50%,-50%) rotate(90deg); }
@media (max-width:768px) {
  .mkt-orbit { padding:2.5rem 0 3rem; }
  .mkt-orbit-wrapper { height:220px; margin-top:2rem; }
  .mkt-orbit-container { width:100%; height:100%; }
  .mkt-orbit-center { display:none; }
  .mkt-orbit-item { width:80%; max-width:280px; }
  .mkt-orbit-arrow { width:40px; height:40px; }
  .mkt-orbit-arrow--prev { left:8px; }
  .mkt-orbit-arrow--next { right:8px; }
}


/* ============================================================
   Product screenshot frame (spec 5.6). Real captures drop into
   public/img/marketing/. Until then a sized placeholder reserves
   the exact space so swapping the image in causes no layout shift.
   ============================================================ */
.shot-frame { width:100%; border-radius:16px; overflow:hidden; }
.shot { display:block; width:100%; height:auto; border-radius:16px; border:1px solid #E5E7EB; box-shadow:0 25px 50px -12px rgba(0,0,0,.18); }
.shot-placeholder { width:100%; height:100%; border-radius:16px; border:1px dashed #CBD5E1; background:linear-gradient(135deg,#F8FAFF 0%,#EEF3FF 100%); display:flex; align-items:center; justify-content:center; color:#94A3B8; }
.shot-placeholder span { font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }

/* ============================================================
   Homepage FAQ (<details> accordion) — Phase 1c
   ============================================================ */
.mkt-faq details { border-bottom: 1px solid #E5E7EB; }
.mkt-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: 600; color: var(--text-primary); font-size: 1.05rem; }
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary:hover { color: var(--primary-blue); }
.mkt-faq .mkt-faq-chev { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--primary-blue); transition: transform .25s ease; }
.mkt-faq details.is-open .mkt-faq-chev { transform: rotate(180deg); }
.mkt-faq .mkt-faq-body { padding: 0 0 1.25rem; color: var(--text-secondary); line-height: 1.65; font-size: .975rem; max-width: 60ch; }

/* Pricing page billing toggle (Monthly / Annual). New component styling: the
   Tailwind CDN does not generate utilities for classes toggled at runtime, so
   the JS toggles .is-active and these rules paint it. */
.mkt-bill-btn {
    padding: 0.55rem 1.4rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.mkt-bill-btn:hover {
    color: var(--primary-blue);
}
.mkt-bill-btn.is-active {
    background: var(--primary-blue);
    color: #ffffff;
}
.mkt-bill-btn.is-active:hover {
    color: #ffffff;
}

/* ===== Phase 4: Tools pages (Efficiency Index + ROI Calculator) ===== */

/* Efficiency dynamic CTA: constant gentle shake for the "Scorched Earth" state */
@keyframes gentle-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}
.shake-constant { animation: gentle-shake 0.4s ease-in-out infinite; }

/* Efficiency diagnostic box: JS swaps the state modifier. The CDN will not emit
   utilities that only appear at runtime, so the palette lives here as real CSS. */
.diag-box {
  max-width: 20rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid transparent;
}
.diag-safe { background-color: #f0fdf4; border-color: #dcfce7; color: #15803d; }
.diag-warn { background-color: #fefce8; border-color: #fef9c3; color: #a16207; }
.diag-crit { background-color: #fef2f2; border-color: #fee2e2; color: #b91c1c; }

/* Full-width injected CTA button (JS-built, not guaranteed in the CDN scan) */
.btn-block { display: block; width: 100%; text-align: center; }

/* ROI playbook capture reveal (replaces runtime Tailwind max-h/opacity toggles) */
.mkt-playbook-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out, opacity 1s ease-in-out;
}
.mkt-playbook-reveal.is-open {
  max-height: 1200px;
  opacity: 1;
}

/* ============================================================
   Visual elevation (spec PRIORITY 0, item 1). Shared layer.
   The two bg-* classes above now carry baked gradient depth, so
   every section lifts with zero markup changes. The utilities
   below are opt-in for heroes and card grids.
   ============================================================ */

/* (b) Reusable gradient-orb hero backdrop: the legacy blur-3xl
   blobs as a drop-in. Parent section needs `relative overflow-hidden`
   and its content wrapper needs `relative z-10`. No DOM blobs, no images. */
.mkt-orbs { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mkt-orbs::before, .mkt-orbs::after { content:""; position:absolute; border-radius:9999px; filter:blur(64px); }
.mkt-orbs::before { width:34rem; height:34rem; top:-10rem; right:-8rem; background:radial-gradient(circle at 30% 30%, rgba(96,165,250,.55), rgba(56,189,248,.35)); opacity:.6; }
.mkt-orbs::after  { width:28rem; height:28rem; bottom:-12rem; left:-6rem; background:radial-gradient(circle at 30% 30%, rgba(147,197,253,.5), rgba(244,194,224,.5)); opacity:.55; }
.mkt-orbs--dark::before { background:radial-gradient(circle at 30% 30%, rgba(10,88,255,.55), rgba(56,189,248,.25)); opacity:.45; }
.mkt-orbs--dark::after  { background:radial-gradient(circle at 30% 30%, rgba(99,102,241,.5), rgba(10,88,255,.2)); opacity:.4; }
@media (max-width:767px){ .mkt-orbs::before{ width:22rem; height:22rem; } .mkt-orbs::after{ width:18rem; height:18rem; } }

/* (c) Richer shared card + gradient icon tile. Opt-in: swap a card's
   `bg-white border border-gray-200 shadow-sm transition hover:shadow-lg`
   for `mkt-card`, and an icon tile's `bg-[color:var(--light-blue-bg)]
   text-[color:var(--primary-blue)]` for `mkt-icon-tile`. */
.mkt-card { position:relative; background:#fff; border:1px solid #E8EDF5; border-radius:1rem; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 24px -14px rgba(16,24,40,.18); transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease; }
.mkt-card:hover { transform:translateY(-4px); border-color:rgba(10,88,255,.45); box-shadow:0 6px 14px -6px rgba(10,88,255,.16), 0 26px 44px -18px rgba(16,24,40,.28); }
.mkt-card--grad { background:linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%); }
.mkt-icon-tile { display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--primary-blue) 0%, #3B82F6 60%, #38BDF8 100%); box-shadow:0 6px 14px -4px rgba(10,88,255,.45); }

/* (d) Soft section transitions: drop on a section to melt its top or
   bottom edge into the neighbor (kills hard dark-to-light slams).
   Parent needs `relative`; the fade sits above the bg, below content. */
.mkt-soft-top, .mkt-soft-bottom { position:relative; }
.mkt-soft-top::before, .mkt-soft-bottom::after { content:""; position:absolute; left:0; right:0; height:5rem; pointer-events:none; z-index:1; }
.mkt-soft-top::before { top:0; background:linear-gradient(180deg, rgba(255,255,255,.85), transparent); }
.mkt-soft-bottom::after { bottom:0; background:linear-gradient(0deg, rgba(255,255,255,.85), transparent); }
.mkt-soft-top--dark::before { background:linear-gradient(180deg, rgba(17,24,39,.92), transparent); }
.mkt-soft-bottom--dark::after { background:linear-gradient(0deg, rgba(17,24,39,.92), transparent); }

/* Dark CTA band variant (cubes + light text) — used on /pricing */
.mkt-cta-dark::before { content:""; position:absolute; inset:0; opacity:.20; background:url('https://www.transparenttextures.com/patterns/cubes.png'); pointer-events:none; }
.mkt-cta-dark > div { position:relative; z-index:1; }
.mkt-cta-dark h2 { color:#fff !important; }
.mkt-cta-dark p  { color:#d1d5db !important; }

/* Pricing tier cards: same depth + hover lift as .mkt-card (regular-card parity).
   Tailwind shadow/ring utilities were stripped from the markup so this owns box-shadow
   outright — no CDN source-order or ring-composition conflicts. */
.mkt-price-card { box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 24px -14px rgba(16,24,40,.18); transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease; }
.mkt-price-card:hover { transform:translateY(-4px); border-color:rgba(10,88,255,.45); box-shadow:0 6px 14px -6px rgba(10,88,255,.16), 0 26px 44px -18px rgba(16,24,40,.28); }
/* Featured tier: blue ring recreated as a shadow layer so it stacks with the depth shadow. */
.mkt-price-card--featured { box-shadow:0 0 0 2px var(--primary-blue), 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -14px rgba(10,88,255,.30); }
.mkt-price-card--featured:hover { border-color:var(--primary-blue); box-shadow:0 0 0 2px var(--primary-blue), 0 10px 20px -8px rgba(10,88,255,.28), 0 30px 50px -18px rgba(16,24,40,.30); }

/* ── Radar underlay (decorative sonar sweep) ───────────────────────────── */
.radar-underlay{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:var(--radar-op,.8)}
.radar-svg{position:absolute;height:calc(100% * var(--radar-scale,1.15));aspect-ratio:1}
.radar-ring{fill:none;stroke:var(--radar-c,#fbcfe8);stroke-width:1;opacity:.20;vector-effect:non-scaling-stroke}
.radar-line{stroke:var(--radar-c,#fbcfe8);stroke-width:1.5;opacity:.65;vector-effect:non-scaling-stroke}
.radar-trail{fill:var(--radar-c,#fbcfe8);opacity:.10}
.radar-sweep{transform-box:view-box;transform-origin:center;animation:radar-sweep var(--radar-dur,7s) linear infinite}
@keyframes radar-sweep{from{transform:rotate(var(--a0,0deg))}to{transform:rotate(var(--a1,360deg))}}

/* center pin + sweep arc per anchor (0deg = up, clockwise) */
.radar--left         {--a0:0deg;--a1:180deg}
.radar--left .radar-svg         {left:0; top:50%;  transform:translate(-50%,-50%)}
.radar--right        {--a0:180deg;--a1:360deg}
.radar--right .radar-svg        {right:0;top:50%;  transform:translate(50%,-50%)}
.radar--top-left     {--a0:90deg;--a1:180deg}
.radar--top-left .radar-svg     {left:0; top:0;    transform:translate(-50%,-50%)}
.radar--top-right    {--a0:180deg;--a1:270deg}
.radar--top-right .radar-svg    {right:0;top:0;    transform:translate(50%,-50%)}
.radar--bottom-left  {--a0:0deg;--a1:90deg}
.radar--bottom-left .radar-svg  {left:0; bottom:0; transform:translate(-50%,50%)}
.radar--bottom-right {--a0:270deg;--a1:360deg}
.radar--bottom-right .radar-svg {right:0;bottom:0; transform:translate(50%,50%)}

/* radar "blip" — pulses only when the sweep line crosses the element */
.radar-paint{position:relative}
.radar-paint.is-pinged::after{
  content:"";position:absolute;inset:-4px;border-radius:var(--ping-radius,12px);
  border:1.5px solid var(--radar-c,#fbcfe8);pointer-events:none;
  animation:radar-ping 1.1s ease-out forwards;
}
@keyframes radar-ping{0%{opacity:.70;transform:scale(.97)}100%{opacity:0;transform:scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  .radar-sweep{animation:none}
  .radar-paint.is-pinged::after{animation:none;opacity:0}
}