/* Frontend stabilization — visual hierarchy only; no layout/flow changes */

:root {
  --atmo-indigo: rgba(99, 102, 241, 0.22);
  --atmo-violet: rgba(139, 92, 246, 0.14);
  --atmo-ambient-blur: 18px;
  --op-orange: #f97316;
  --op-orange-soft: rgba(249, 115, 22, 0.38);
  --surface-border: rgba(148, 163, 184, 0.18);
  --btn-inner: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --btn-edge: 0 4px 14px rgba(15, 23, 42, 0.12);
  --depth-card-light: 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 4px 16px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.55), 0 14px 40px -10px rgba(99, 102, 241, 0.1);
  --depth-card-light-hover: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 8px 22px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(251, 191, 36, 0.12), 0 18px 48px -12px rgba(249, 115, 22, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   C8 — cinematic depth recovery (atmosphere + hierarchy; readability preserved)
   ═══════════════════════════════════════════════════════════════════════════ */
body:not(.dark-theme) {
  background-color: #f5f7fc;
  background-image:
    radial-gradient(ellipse 110% 55% at 50% -8%, rgba(255, 230, 210, 0.55), transparent 58%),
    radial-gradient(ellipse 72% 45% at 96% 18%, rgba(224, 231, 255, 0.45), transparent 52%),
    radial-gradient(ellipse 55% 38% at 4% 88%, rgba(255, 241, 230, 0.4), transparent 48%);
}

body:not(.dark-theme) #mainHeader {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 245, 0.86)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 6px 20px rgba(15, 23, 42, 0.04),
    0 14px 44px -18px rgba(249, 115, 22, 0.08),
    0 20px 50px -24px rgba(99, 102, 241, 0.07) !important;
}

body.dark-theme #mainHeader {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(10, 15, 30, 0.72)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 10px 32px rgba(0, 0, 0, 0.35),
    0 0 48px -20px rgba(99, 102, 241, 0.12) !important;
}

body:not(.dark-theme) #servicesGrid .service-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.93) 100%) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: var(--depth-card-light) !important;
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

body:not(.dark-theme) #servicesGrid .service-card:active {
  transform: scale(0.985);
}

body:not(.dark-theme) #servicesGrid .service-card:hover {
  border-color: rgba(251, 191, 36, 0.22) !important;
  box-shadow: var(--depth-card-light-hover) !important;
}

body.dark-theme #servicesGrid .service-card,
body.dark-theme .service-card {
  background: linear-gradient(165deg, rgba(23, 32, 54, 0.75) 0%, rgba(15, 23, 42, 0.72) 100%) !important;
  border-color: rgba(129, 140, 248, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 20px rgba(2, 6, 23, 0.45),
    0 0 48px -16px rgba(99, 102, 241, 0.18) !important;
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

body.dark-theme #servicesGrid .service-card:hover,
body.dark-theme .service-card:hover {
  border-color: rgba(129, 140, 248, 0.34) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(2, 6, 23, 0.55),
    0 0 56px -12px rgba(249, 115, 22, 0.12),
    0 0 40px -8px rgba(99, 102, 241, 0.2) !important;
}

/* 1 — Header avatar presence */
.aratt-presence-avatar {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 28%, rgba(129, 140, 248, 0.35), rgba(15, 23, 42, 0.92) 68%);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.22),
    0 0 12px var(--atmo-indigo),
    inset 0 -6px 14px rgba(0, 0, 0, 0.35),
    inset 0 4px 10px rgba(255, 255, 255, 0.12);
}
.aratt-presence-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.28), transparent 52%);
  mix-blend-mode: soft-light;
}
.aratt-presence-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

/* 2 — Mic orbital system (atmospheric idle + orange action only) */
.mic-orb-stack {
  width: 3.5rem;
  height: 3.5rem;
}
.mic-orb-atmosphere {
  position: absolute;
  inset: -0.55rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 42%, var(--atmo-indigo), var(--atmo-violet) 58%, transparent 72%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.16), 0 0 32px rgba(139, 92, 246, 0.08);
  filter: blur(1px);
  opacity: 0.86;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: orb-atmo-breathe 5.2s ease-in-out infinite;
}
.mic-orb-stack:has(#micBtn.voice-active) .mic-orb-atmosphere,
.mic-orb-stack:has(#voiceWaveBg:not(.hidden)) .mic-orb-atmosphere {
  opacity: 0.44;
  animation: none;
}
.mic-orb-action-glow {
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.34), rgba(249, 115, 22, 0.06) 64%, transparent 76%);
  filter: blur(16px);
  transform: scale(1.28);
  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), filter 0.48s ease;
}
.mic-orb-fluid {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: rgba(249, 115, 22, 0.14);
  border: 1px solid rgba(249, 115, 22, 0.18);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mic-orb-core {
  background: linear-gradient(165deg, #ff9a3d 0%, var(--op-orange) 48%, #ea580c 100%);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--btn-inner), 0 8px 20px rgba(249, 115, 22, 0.28);
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dark-theme .mic-orb-core {
  border-color: rgba(226, 232, 240, 0.35);
  box-shadow: var(--btn-inner), 0 8px 24px rgba(249, 115, 22, 0.32);
}
.mic-orb-stack .speaking-ripple {
  background: rgba(249, 115, 22, 0.18);
  z-index: 4;
}

/* 3 — Card hover helper (surface depth defined in cinematic recovery section) */
body:not(.dark-theme) .hover-glow:hover {
  box-shadow: var(--depth-card-light-hover) !important;
}
.hover-glow:hover {
  border-color: rgba(148, 163, 184, 0.2);
}
body.dark-theme .hover-glow:hover {
  border-color: rgba(129, 140, 248, 0.25) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(2, 6, 23, 0.52),
    0 0 52px -10px rgba(99, 102, 241, 0.22) !important;
}
body.dark-theme .glass-dock,
body.dark-theme #dock {
  border-color: rgba(129, 140, 248, 0.14) !important;
  background: linear-gradient(180deg, rgba(22, 30, 50, 0.92), rgba(15, 22, 40, 0.88)) !important;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.52),
    0 22px 56px -12px rgba(99, 102, 241, 0.12),
    0 28px 64px -20px rgba(249, 115, 22, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* 4 — Button material (supporting, not dominant) */
.prob-btn,
.brand-chip,
.problem-next-dock__btn,
#closeHelpBtn,
#closeHelp,
button.bg-orange-500.rounded-\[28px\] {
  box-shadow: var(--btn-inner), var(--btn-edge);
}
.problem-next-dock__btn--active {
  box-shadow: var(--btn-inner), 0 6px 18px rgba(249, 115, 22, 0.32);
  border-color: rgba(234, 88, 12, 0.45) !important;
}
body:not(.dark-theme) .prob-btn-active,
body:not(.dark-theme) .brand-chip.selected {
  box-shadow: var(--btn-inner), 0 4px 14px rgba(249, 115, 22, 0.28), 0 0 0 1px rgba(249, 115, 22, 0.22) !important;
}

/* 5 — Spacing rhythm */
.content-rhythm {
  scroll-padding-bottom: 1.25rem;
}
#servicesGrid.service-grid-rhythm,
#servicesGrid {
  row-gap: 0.25rem;
}

/* Thinking overlay — atmospheric, not orange-dominant */
.thinking-glow {
  background: radial-gradient(circle at 45% 40%, rgba(129, 140, 248, 0.55), rgba(139, 92, 246, 0.32) 55%, rgba(249, 115, 22, 0.22) 78%);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.08);
}
.ai-thinking-pulse {
  background: rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(4px);
}

@keyframes orb-atmo-breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.025); }
}
@keyframes dock-cinematic-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .mic-orb-atmosphere,
  .fluid-wave,
  .speaking-ripple,
  .voice-active,
  .mic-orb-speak-waveform__bar,
  .dock-safe.dock-ambient--expanded #dock {
    animation: none !important;
  }
}

/* C8 — interface purification (icons-only dock, reduced header clutter) */
#headerMenuBtn,
#mainHeader .header-hamburger,
#mainHeader [data-header-menu],
#mainHeader button[aria-label*="মেনু"],
#mainHeader button[aria-label*="Menu"] {
  display: none !important;
}
.header-presence-tagline {
  display: none !important;
}
.header-identity-anchor {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
  max-width: 7.5rem;
}
.header-identity-anchor__primary {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f97316;
}
.header-identity-anchor__secondary {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(100, 116, 139, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dark-theme .header-identity-anchor__secondary {
  color: rgba(148, 163, 184, 0.92);
}
/* Dock side actions — icon-only (labels via aria-label) */
#dock .dock-btn-label,
#dock button > span:not([aria-hidden="true"]):not(.dock-btn-label) {
  display: none !important;
}
.dock-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
#dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  transition:
    box-shadow 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.48s ease,
    background-color 0.48s ease;
}
#whatsappDockBtn .dock-whatsapp-glyph,
#whatsappDockBtn i,
#whatsappDockBtn svg {
  color: #16a34a;
}
body.dark-theme #whatsappDockBtn .dock-whatsapp-glyph,
body.dark-theme #whatsappDockBtn i,
body.dark-theme #whatsappDockBtn svg {
  color: #4ade80;
}

/* Dock clusters — Track | WhatsApp | Mic | Call | Home */
.dock-left-cluster {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#dock #trackOrderDockBtn.dock-track-btn {
  opacity: 1 !important;
  border-radius: 14px;
  border: 1px solid rgba(249, 115, 22, 0.38);
  background: rgba(255, 247, 237, 0.94);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
}
body.dark-theme #dock #trackOrderDockBtn.dock-track-btn {
  border-color: rgba(249, 115, 22, 0.32);
  background: rgba(67, 20, 7, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
#trackOrderDockBtn i,
#trackOrderDockBtn svg {
  color: #ea580c;
  stroke: #ea580c;
}
body.dark-theme #trackOrderDockBtn i,
body.dark-theme #trackOrderDockBtn svg {
  color: #fb923c;
  stroke: #fb923c;
}

/* C8 — WhatsApp dock tile */
#dock #whatsappDockBtn.dock-side-action {
  opacity: 1 !important;
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  background: rgba(240, 253, 244, 0.92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
  text-decoration: none;
}
body.dark-theme #dock #whatsappDockBtn.dock-side-action {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(6, 78, 59, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
#dock #supportCallDockBtn.dock-call-btn {
  opacity: 1 !important;
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(240, 253, 244, 0.92);
  text-decoration: none;
  color: inherit;
}
body.dark-theme #dock #supportCallDockBtn.dock-call-btn {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(6, 78, 59, 0.35);
}
#dock #homeBtn.dock-home-btn {
  opacity: 1 !important;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.92);
}
body.dark-theme #dock #homeBtn.dock-home-btn {
  border-color: rgba(71, 85, 105, 0.45);
  background: rgba(30, 41, 59, 0.55);
}
#dock > .relative {
  flex: 0 0 auto;
  margin-inline: 0.25rem;
}
.dock-right-cluster {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#trackOrderDockBtn,
#whatsappDockBtn,
.dock-left-cluster .dock-icon-btn,
.dock-right-cluster .dock-icon-btn {
  margin-inline: 0.125rem;
  flex-shrink: 0;
}
body:not(.dark-theme) .home-trust-footer {
  color: #334155 !important;
}
body:not(.dark-theme) .home-trust-footer .home-trust-brand {
  color: #0f172a !important;
}
body:not(.dark-theme) .home-trust-footer .home-trust-brand .text-orange-500 {
  color: #ea580c !important;
}
body:not(.dark-theme) .home-trust-footer .text-orange-500,
body:not(.dark-theme) .home-trust-footer a.text-orange-600 {
  color: #c2410c !important;
}
body:not(.dark-theme) .home-trust-footer p {
  color: #475569 !important;
}
body:not(.dark-theme) .home-info-footer {
  color: #64748b;
}
body:not(.dark-theme) .home-info-footer .info-footer-link {
  color: #475569;
}
body:not(.dark-theme) .aratt-modal-panel {
  color: #1e293b;
}
body:not(.dark-theme) .policy-viewer-frame {
  background: #ffffff;
}

/* Frontend final finishing — header brand (light readable, ARATT accent preserved) */
#headerHomeBrandBtn .header-brand-lockup {
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
body:not(.dark-theme) #headerHomeBrandBtn .header-brand-name {
  color: #0f172a !important;
}
body:not(.dark-theme) #headerHomeBrandBtn .header-brand-accent {
  color: #ea580c !important;
}
body:not(.dark-theme) #headerHomeBrandBtn .header-identity-anchor__primary {
  color: #ea580c !important;
}
body.dark-theme #headerHomeBrandBtn .header-brand-name {
  color: #f1f5f9 !important;
}
body.dark-theme #headerHomeBrandBtn .header-brand-accent {
  color: #fb923c !important;
}

/* Tracking / continuity lookup — compact mobile-first layout */
.tracking-lookup-compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tracking-lookup-compact__intro {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #475569;
}
body.dark-theme .tracking-lookup-compact__intro {
  color: #cbd5e1;
}
.tracking-lookup-compact__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}
.tracking-lookup-compact__hint {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.3;
  color: #64748b;
}
body.dark-theme .tracking-lookup-compact__hint {
  color: #94a3b8;
}
.tracking-lookup-compact__row {
  display: flex;
  gap: 0.5rem;
}
.tracking-lookup-compact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.tracking-lookup-compact__btn--primary {
  width: 100%;
  background: #f97316;
  color: #0f172a;
}
.tracking-lookup-compact__btn--outline {
  width: 100%;
  border: 1px solid rgba(249, 115, 22, 0.45);
  background: transparent;
  color: #c2410c;
}
body.dark-theme .tracking-lookup-compact__btn--outline {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.45);
}
.tracking-lookup-compact__row .tracking-lookup-compact__btn {
  flex: 1;
  min-width: 0;
}
.tracking-lookup-compact__btn--call {
  background: #e2e8f0;
  color: #0f172a;
}
body.dark-theme .tracking-lookup-compact__btn--call {
  background: #334155;
  color: #f8fafc;
}
.tracking-lookup-compact__btn--wa {
  background: #16a34a;
  color: #ffffff;
}
#trackingModal .tracking-modal-body {
  padding: 0.75rem 1rem !important;
}
body:not(.dark-theme) #trackingModal .aratt-modal-panel,
body:not(.dark-theme) #warrantyModal .aratt-modal-panel,
body:not(.dark-theme) #policyViewerModal .aratt-modal-panel,
body:not(.dark-theme) #trustModal .aratt-modal-panel {
  background: #ffffff !important;
  border-color: rgba(226, 232, 240, 0.85) !important;
  color: #1e293b !important;
}
body.dark-theme #trackingModal .aratt-modal-panel,
body.dark-theme #warrantyModal .aratt-modal-panel,
body.dark-theme #policyViewerModal .aratt-modal-panel,
body.dark-theme #trustModal .aratt-modal-panel {
  background: #0f172a !important;
  border-color: rgba(51, 65, 85, 0.85) !important;
  color: #e2e8f0 !important;
}
body:not(.dark-theme) #trackingModal .aratt-modal-panel h3,
body:not(.dark-theme) #warrantyModal .aratt-modal-panel h3,
body:not(.dark-theme) #policyViewerModal .aratt-modal-panel h3,
body:not(.dark-theme) #trustModal .aratt-modal-panel h3 {
  color: #0f172a !important;
}
body.dark-theme #trackingModal .aratt-modal-panel h3,
body.dark-theme #warrantyModal .aratt-modal-panel h3,
body.dark-theme #policyViewerModal .aratt-modal-panel h3,
body.dark-theme #trustModal .aratt-modal-panel h3 {
  color: #f8fafc !important;
}
body:not(.dark-theme) #trackingModal .tracking-modal-body,
body:not(.dark-theme) #warrantyModal #warrantyContent {
  color: #334155 !important;
}
body.dark-theme #trackingModal .tracking-modal-body,
body.dark-theme #warrantyModal #warrantyContent {
  color: #cbd5e1 !important;
}
body:not(.dark-theme) #trackingModal .close-btn,
body:not(.dark-theme) #warrantyModal .close-btn,
body:not(.dark-theme) #policyViewerModal .close-btn,
body:not(.dark-theme) #trustModal .close-btn {
  background: #f1f5f9 !important;
  color: #334155 !important;
}
body.dark-theme #trackingModal .close-btn,
body.dark-theme #warrantyModal .close-btn,
body.dark-theme #policyViewerModal .close-btn,
body.dark-theme #trustModal .close-btn {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}
body:not(.dark-theme) #trustModal .aratt-modal-panel .text-orange-500 {
  color: #c2410c !important;
}

body:not(.dark-theme) #dock {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(252, 253, 255, 0.9)) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 12px 40px rgba(15, 23, 42, 0.1),
    0 22px 56px -16px rgba(99, 102, 241, 0.09),
    0 26px 52px -20px rgba(249, 115, 22, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset !important;
  backdrop-filter: blur(16px) saturate(138%);
  -webkit-backdrop-filter: blur(16px) saturate(138%);
}

body:not(.dark-theme) #dock .dock-icon-btn {
  opacity: 1 !important;
}
body:not(.dark-theme) #dock #homeBtn svg {
  stroke: #334155 !important;
  opacity: 0.94;
}
body.dark-theme #dock .dock-icon-btn {
  opacity: 0.82 !important;
}
body.dark-theme #dock #homeBtn svg {
  stroke: #e2e8f0 !important;
  opacity: 0.92;
}
/* Light: calmer than default idle, but restores indigo orbital hierarchy vs dock chrome */
body:not(.dark-theme) .mic-orb-atmosphere {
  opacity: 0.7;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.15), 0 0 34px rgba(139, 92, 246, 0.09);
  filter: blur(0.9px);
}
body:not(.dark-theme) .mic-orb-core {
  box-shadow: var(--btn-inner), 0 8px 22px rgba(249, 115, 22, 0.26), 0 12px 28px -6px rgba(99, 102, 241, 0.12);
}
.home-info-footer {
  opacity: 0.92;
}
.home-info-footer .continuity-footer-entry {
  font-weight: 700;
}

/* C8 — mobile-first cinematic stabilization (360px–430px) */
@media (max-width: 430px) {
  #mainHeader {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #mainHeader .text-xs.font-black:not(.header-brand-lockup) {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
  }
  #headerHomeBrandBtn .header-brand-lockup {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    line-height: 1.25;
  }
  #contentArea.content-rhythm {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.85rem;
  }
  /* Do not squash conversation.css footer clearance — last stylesheet wins (#contentArea + .content-rhythm). */
  #contentArea.content-rhythm:not(.content-footer-clearance--dock-present) {
    padding-bottom: 0.5rem;
  }
  #servicesGrid {
    gap: 0.875rem !important;
    padding-bottom: 2.25rem !important;
  }
  #servicesGrid .service-card {
    padding: 0.9rem 0.7rem !important;
    gap: 0.45rem !important;
    min-height: 7.1rem;
    border-radius: 1.05rem;
  }
  #servicesGrid .service-card .w-14 {
    width: 3rem;
    height: 3rem;
  }
  #servicesGrid .service-card .w-7 {
    width: 1.55rem;
    height: 1.55rem;
  }
  #servicesGrid .service-card .font-bold.block {
    font-size: 0.8125rem;
    line-height: 1.38;
    letter-spacing: 0.01em;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #servicesGrid .service-info-btn {
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .home-info-footer {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    padding-bottom: 0.35rem;
    row-gap: 0.35rem;
    column-gap: 0.5rem;
  }
  .home-trust-footer {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    font-size: 0.625rem;
  }
  .home-info-footer .info-footer-link {
    font-size: 0.625rem;
    line-height: 1.35;
    padding: 0.35rem 0.4rem;
    min-height: 42px;
  }
  #contentArea h3.font-bold.text-lg {
    font-size: clamp(0.95rem, 4.2vw, 1.05rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
  }
  #contentArea p.text-\[11px\],
  #contentArea p.text-\[10px\] {
    line-height: 1.45;
  }
  .dock-safe {
    bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)) !important;
    left: 0;
    right: 0;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    overflow: visible;
  }
  #dock {
    width: min(100%, 23.5rem);
    max-width: calc(100vw - 1.25rem);
    min-height: 3.35rem;
    height: auto;
    gap: 0.45rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.92) inset,
      0 10px 34px rgba(15, 23, 42, 0.11),
      0 18px 46px -14px rgba(99, 102, 241, 0.08),
      0 22px 44px -18px rgba(249, 115, 22, 0.045),
      0 0 0 1px rgba(255, 255, 255, 0.62) inset !important;
  }
  body.dark-theme #dock {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.46),
      0 16px 44px -12px rgba(99, 102, 241, 0.11),
      0 20px 52px -16px rgba(249, 115, 22, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  }
  #dock > div.relative {
    min-width: 3.35rem;
    min-height: 3.35rem;
    transform: translateY(-0.35rem);
  }
  .mic-orb-stack {
    width: 3.25rem;
    height: 3.25rem;
  }
  .mic-orb-atmosphere {
    inset: -0.42rem;
  }
  .mic-orb-action-glow {
    transform: scale(1.22);
    filter: blur(12px);
  }
  .mic-orb-core {
    width: 2.85rem;
    height: 2.85rem;
  }
  .mic-orb-core #micIcon {
    width: 1.15rem;
    height: 1.15rem;
  }
  .mic-orb-stack .speaking-ripple {
    width: 4.15rem;
    height: 4.15rem;
  }
  .dock-safe > #voiceTranscriptLayer.voice-transcript-layer--dock-anchor {
    width: min(16.25rem, calc(100vw - 1.35rem));
    max-width: calc(100vw - 1.35rem);
    margin-bottom: 0.38rem;
  }
  .dock-safe > #voiceTranscriptLayer.voice-transcript-layer--dock-anchor .voice-transcript-layer__panel {
    padding: 0.36rem 0.62rem 0.38rem;
    max-width: 100%;
  }
  .dock-safe > #voiceTranscriptLayer.voice-transcript-layer--dock-anchor .voice-transcript-layer__text {
    font-size: clamp(0.74rem, 3.4vw, 0.84rem);
    line-height: 1.48;
    max-height: 2.85em;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dock-safe > #voiceTranscriptLayer.voice-transcript-layer--dock-anchor .voice-transcript-layer__meta {
    font-size: 0.5rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  #voiceFallbackBar {
    width: min(100%, calc(100vw - 1rem));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    bottom: calc(5.95rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width: 360px) {
  #servicesGrid {
    gap: 0.75rem !important;
  }
  #servicesGrid .service-card {
    padding: 0.82rem 0.62rem !important;
    min-height: 6.75rem;
  }
  #dock {
    max-width: calc(100vw - 1.1rem);
  }
  .dock-safe > #voiceTranscriptLayer.voice-transcript-layer--dock-anchor {
    width: min(15rem, calc(100vw - 1.1rem));
  }
}