.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  color: #fff;
}

.site-brand:hover {
  opacity: 0.96;
}

.site-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0.32rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 10px 24px oklch(20% .01 265 / 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.site-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-brand-text {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.switcher-mobile-meta {
  display: none;
}

@media (max-width: 767px) {
  .site-brand {
    gap: 0.6rem;
    max-width: calc(100vw - 8rem);
  }

  .site-brand-mark {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.26rem;
    border-radius: 0.8rem;
  }

  .site-brand-text {
    font-size: clamp(1rem, 4.1vw, 1.12rem);
  }

  [id] {
    scroll-margin-top: 6rem;
  }

  #hero {
    padding-top: 5.75rem !important;
  }

  #hero > .mx-auto.max-w-7xl {
    min-height: 0 !important;
    background:
      radial-gradient(circle at top right, oklch(55% .22 260 / 0.16), transparent 34%),
      radial-gradient(circle at bottom left, oklch(65% .241 354.308 / 0.13), transparent 30%),
      linear-gradient(180deg, color-mix(in oklab, var(--color-base-100) 66%, var(--color-base-200)), color-mix(in oklab, var(--color-base-100) 92%, white 2%)) !important;
  }

  #hero .relative.z-10 {
    padding: 1.15rem !important;
  }

  #hero h1 {
    margin-top: 0.9rem;
    font-size: clamp(2.15rem, 10.2vw, 2.95rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
    max-width: 10.8ch;
  }

  #hero p.max-w-xl {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
    max-width: none !important;
  }

  #hero .hero-fadein.mt-8.flex.flex-wrap.gap-3 {
    gap: 0.75rem !important;
  }

  #hero .hero-fadein.mt-8.grid {
    margin-top: 1rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  #hero .hero-fadein.mt-8.grid > div {
    padding: 0.8rem 0.65rem !important;
    border-radius: 1rem !important;
  }

  .hero-mobile-board {
    position: relative;
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border-radius: 1.4rem;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
    background:
      linear-gradient(145deg, color-mix(in oklab, var(--color-base-100) 94%, white 2%), color-mix(in oklab, var(--color-base-100) 82%, var(--color-base-200))),
      radial-gradient(circle at top right, oklch(55% .22 260 / 0.16), transparent 38%);
    box-shadow:
      0 22px 46px oklch(20% .01 265 / 0.08),
      inset 0 1px 0 color-mix(in oklab, white 70%, transparent);
    isolation: isolate;
  }

  .hero-mobile-board-glow {
    position: absolute;
    inset: auto -2rem -3rem auto;
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    background: oklch(65% .241 354.308 / 0.16);
    filter: blur(44px);
    pointer-events: none;
    z-index: 0;
  }

  .hero-mobile-board-top,
  .hero-mobile-board-main,
  .hero-mobile-grid,
  .hero-mobile-ticker {
    position: relative;
    z-index: 1;
  }

  .hero-mobile-board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .hero-mobile-kicker,
  .hero-mobile-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hero-mobile-kicker {
    color: var(--color-primary);
  }

  .hero-mobile-launch {
    color: color-mix(in oklab, var(--color-base-content) 56%, transparent);
    white-space: nowrap;
  }

  .hero-mobile-board-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 15%, white), color-mix(in oklab, var(--color-secondary) 16%, white));
  }

  .hero-mobile-board-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  }

  .hero-mobile-board-value {
    margin-top: 0.15rem;
    font-size: 2rem;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.07em;
    color: var(--color-base-content);
  }

  .hero-mobile-board-badges {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
  }

  .hero-mobile-board-badges span {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--color-base-content) 76%, transparent);
  }

  .hero-mobile-grid {
    display: grid;
    gap: 0.65rem;
  }

  .hero-mobile-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: color-mix(in oklab, var(--color-base-100) 92%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
    box-shadow: 0 10px 24px oklch(20% .01 265 / 0.05);
  }

  .hero-mobile-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.9rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }

  .hero-mobile-card-title {
    font-size: 0.92rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.015em;
  }

  .hero-mobile-card-copy {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  }

  .hero-mobile-ticker {
    display: grid;
    gap: 0.45rem;
  }

  .hero-mobile-ticker span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }

  .hero-mobile-ticker i {
    color: var(--color-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
  }

  .switcher-mobile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
  }

  .switcher-mobile-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  }

  .switcher-mobile-hint i {
    color: var(--color-primary);
    font-size: 0.9rem;
  }

  .switcher-mobile-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  .switcher-mobile-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-base-content) 16%, transparent);
    transition: width 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    opacity: 0.9;
  }

  .switcher-mobile-dot.is-active {
    width: 1.25rem;
    background: var(--color-primary);
  }

  [data-switcher-group] {
    display: none !important;
  }

  [data-switcher-panels] {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-switcher-panels]::-webkit-scrollbar,
  #case-filters::-webkit-scrollbar {
    display: none;
  }

  [data-switcher-panels] > .switcher-panel,
  [data-switcher-panels] > .switcher-panel[hidden] {
    display: block !important;
    flex: 0 0 100%;
    min-width: 100%;
    margin: 0;
    padding: 1.25rem !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  [data-switcher-panels] .switcher-point {
    padding: 0.95rem 0.95rem 0.95rem 0.85rem;
  }

  [data-switcher-panels] .switcher-point-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.7rem;
  }

  [data-switcher-panels] h3 {
    font-size: 1.45rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
  }

  [data-switcher-panels] p.text-\[17px\],
  [data-switcher-panels] .text-\[15px\] {
    font-size: 0.98rem !important;
  }

  [data-switcher-panels] a.btn {
    width: 100%;
    justify-content: center;
  }

  #case-filters {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: none;
  }

  #case-filters .btn {
    flex: 0 0 auto;
  }

  .case-comparison {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 0.6rem !important;
    align-items: center;
  }

  .case-comparison > :not(.case-comparison-arrow) {
    min-width: 0;
    padding: 0.85rem 0.5rem !important;
  }

  .case-comparison-arrow {
    min-width: 2rem;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-comparison-arrow .text-xs {
    display: none !important;
  }

  .case-comparison-arrow .ri-arrow-right-line {
    display: inline-block !important;
    font-size: 1rem !important;
    opacity: 0.34 !important;
  }

  .case-card .p-6,
  .case-card .lg\:p-8 {
    padding: 1.1rem !important;
  }

  .case-card .mt-5.pt-5.border-t {
    gap: 0.75rem !important;
  }

  .demo-scenario-selector {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .demo-scenario-selector::-webkit-scrollbar,
  .demo-crm-pipeline::-webkit-scrollbar {
    display: none;
  }

  .demo-scenario-selector .demo-scenario-btn {
    flex: 0 0 auto;
  }

  .demo-crm-pipeline {
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .demo-crm-pipeline .demo-crm-stage {
    min-width: 11rem;
    flex: 0 0 11rem;
  }

  #calculator .text-center.mb-8 {
    margin-bottom: 1rem !important;
  }

  #calculator .lg\:col-span-3,
  #calculator .lg\:col-span-2 > .bg-base-200,
  #calculator .lg\:col-span-2 > .bg-primary {
    border-radius: 1.25rem !important;
  }

  #calculator .lg\:col-span-3 {
    padding: 1rem !important;
  }

  #calculator .grid.grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    margin-bottom: 0.9rem !important;
  }

  #calculator .calc-dir-btn {
    justify-content: center !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    font-size: 0.94rem !important;
  }

  #calculator #calc-fields {
    gap: 0.65rem !important;
  }

  #calculator #calc-fields > div {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  #calculator .lg\:col-span-2 {
    gap: 0.75rem !important;
  }

  #calculator .lg\:col-span-2 .grid.grid-cols-1.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  #calculator .lg\:col-span-2 .bg-base-200,
  #calculator .lg\:col-span-2 .bg-primary {
    padding: 1rem !important;
  }

  #calculator #calc-result-total {
    font-size: 2rem !important;
    line-height: 0.98 !important;
    letter-spacing: -0.06em !important;
  }

  #calculator .mt-auto .btn {
    min-height: 3.2rem;
  }

  #demo-crm .flex-1.p-4 {
    padding: 0.95rem !important;
  }

  #demo-chat-intro {
    padding: 1.15rem !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  #demo-chat-intro .space-y-2.text-left.text-sm.w-full.max-w-sm {
    max-width: none !important;
  }

  #social .social-shell {
    padding: 1rem !important;
  }

  #social .badge.badge-outline {
    width: 100%;
    justify-content: center;
  }

  #social h2 {
    font-size: 1.75rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
  }

  #social .flex.flex-wrap.gap-2.mb-5 {
    display: grid !important;
    gap: 0.55rem !important;
    margin-bottom: 0.9rem !important;
  }

  #social .social-proof-item {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem 0.85rem;
    font-size: 0.88rem;
  }

  #social .flex.flex-wrap.items-center.gap-3.mb-4 {
    margin-bottom: 0 !important;
  }

  #social .flex.flex-wrap.items-center.gap-3.mb-4 .btn {
    width: 100%;
    justify-content: center;
  }

  #social #social-slider {
    max-width: 18rem;
    margin: 0 auto;
  }

  #social .social-floating-note-top {
    top: 0.45rem;
    right: 0.45rem;
    left: 0.45rem;
    max-width: none;
    justify-content: center;
  }

  footer .mx-auto.max-w-7xl > .flex.flex-col.lg\:flex-row {
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.75rem !important;
  }

  footer .mx-auto.max-w-7xl > .flex.flex-col.lg\:flex-row .flex.items-center.gap-4 {
    align-items: flex-start !important;
  }

  footer .mx-auto.max-w-7xl > .flex.flex-col.lg\:flex-row .flex.flex-wrap.gap-3 {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  footer .mx-auto.max-w-7xl > .flex.flex-col.lg\:flex-row .flex.flex-wrap.gap-3 > a {
    width: 100%;
    justify-content: center;
  }

  footer .border-t.border-base-content\/10.pt-6 {
    align-items: flex-start !important;
    text-align: left !important;
  }

  footer .border-t.border-base-content\/10.pt-6 > div {
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  html,
  body {
    overflow-x: hidden;
  }

  header.fixed {
    top: 0.5rem !important;
    width: calc(100% - 0.75rem) !important;
    max-width: none !important;
  }

  header.fixed nav.navbar {
    min-height: 64px !important;
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    border-radius: 1rem !important;
  }

  header.fixed .navbar-start,
  header.fixed .navbar-end {
    min-width: 0;
  }

  header.fixed .navbar-start > a {
    display: block;
    max-width: 9.5rem;
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
    white-space: normal;
  }

  header.fixed .navbar-end {
    gap: 0.35rem !important;
  }

  header.fixed .theme-toggle {
    width: 32px;
    height: 32px;
  }

  label[for="mobile-drawer"].btn {
    min-height: 2rem !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .drawer-side > ul.menu {
    width: min(17rem, 100vw) !important;
    padding: 4.75rem 1rem 1.25rem !important;
  }

  main > section:first-of-type {
    padding-top: 5.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  main > section:first-of-type .rounded-2xl {
    border-radius: 1.25rem !important;
  }

  main > section:first-of-type .mx-auto.max-w-7xl.rounded-2xl,
  main > section:first-of-type .mx-auto.max-w-5xl.rounded-2xl,
  main > section:first-of-type .mx-auto.max-w-4xl.rounded-\[28px\] {
    min-height: 0 !important;
  }

  main > section:first-of-type .relative.z-10 {
    padding: 1.25rem !important;
  }

  main > section:first-of-type h1 {
    font-size: clamp(1.95rem, 9vw, 2.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  main > section:first-of-type a.btn {
    width: 100%;
    justify-content: center;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .blog-hero-panel,
  .blog-toolbar,
  .social-shell,
  .policy-shell {
    padding: 1rem !important;
    border-radius: 1.25rem !important;
  }

  .blog-stat-grid,
  #demo-deal-fields,
  footer .grid.mb-12 {
    grid-template-columns: 1fr !important;
  }

  footer .grid.mb-12 {
    gap: 1.5rem !important;
  }

  footer .grid.mb-12 li a,
  footer .grid.mb-12 p,
  footer .grid.mb-12 a {
    line-height: 1.45;
  }

  #articles-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-card-visual {
    height: 10.5rem !important;
    padding: 1rem !important;
  }

  .blog-card-visual-copy {
    max-width: 100% !important;
  }

  .blog-shortcuts a,
  article header > div.flex {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .crm-flow-card-wrap {
    padding: 0 0.75rem !important;
  }

  .crm-flow-card-shadow {
    display: none !important;
  }

  .flow-align-rail .crm-flow-card-wrap {
    justify-content: stretch !important;
  }

  .flow-align-rail .crm-flow-card {
    width: 100% !important;
  }

  .crm-flow-hit {
    width: 22% !important;
  }

  .crm-flow-hit.prev {
    left: -8% !important;
  }

  .crm-flow-hit.next {
    right: -8% !important;
  }

  .crm-flow-step-number {
    font-size: 2.4rem !important;
    top: 0.65rem !important;
    right: 0.75rem !important;
  }

  #audit-modal-inner {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    border-radius: 1.25rem !important;
  }

  #hero .hero-mobile-note,
  #hero .hero-mobile-card,
  .case-card,
  #demo-crm,
  #demo-chat {
    box-shadow: 0 12px 28px oklch(20% .01 265 / 0.06);
  }
}