/* ============================================================
   home.blade.php — moved out of inline <style> blocks
   ============================================================ */

/* Compact step cards — icon + step number on one row, content below */
        #how .steps { gap: 18px; }
        #how .step {
          padding: 28px 26px 26px;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 12px;
        }
        #how .step-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 4px;
        }
        #how .step-icon-circle {
          width: 56px;
          height: 56px;
          border-radius: 16px;
          background: linear-gradient(135deg, #a88aff 0%, #3e1fa3 100%);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          box-shadow: 0 8px 20px -6px rgba(62, 31, 163, 0.45),
                      inset 0 1px 0 rgba(255, 255, 255, 0.25);
          flex-shrink: 0;
        }
        #how .step-icon-circle svg {
          width: 28px;
          height: 28px;
        }
        #how .step .step-head .step-num {
          margin: 0;
          padding: 6px 10px;
          background: rgba(168, 138, 255, 0.08);
          border: 1px solid rgba(168, 138, 255, 0.25);
          border-radius: 999px;
        }
        #how .step h3 { font-size: 19px; margin: 0; }
        #how .step p { font-size: 14.5px; line-height: 1.55; }

/* Rich CTA block — dashboard preview decoration + glow orbs + trust line */
        .cta-rich {
          padding: 0 !important;
          overflow: visible !important;
          position: relative;
          background: transparent !important;
        }
        /* Clipped background layer — contains gradient + dot pattern + orb */
        .cta-rich-bg {
          position: absolute;
          inset: 0;
          border-radius: inherit;
          overflow: hidden;
          z-index: 0;
          background:
            radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.18), transparent 45%),
            radial-gradient(circle at 90% 100%, rgba(255, 255, 255, 0.10), transparent 50%),
            radial-gradient(circle at 50% 50%, rgba(168, 138, 255, 0.25), transparent 60%),
            linear-gradient(135deg, #2d0f8a 0%, #4823b8 45%, #8b6bff 100%);
          pointer-events: none;
        }
        /* Dot-grid pattern overlay (inside the clipped bg) */
        .cta-rich-bg::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
          background-size: 24px 24px;
          background-position: -1px -1px;
          opacity: 0.6;
        }
        /* Floating glow orb (inside the clipped bg) */
        .cta-rich-bg::after {
          content: "";
          position: absolute;
          top: -180px; right: -180px;
          width: 520px; height: 520px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(168, 138, 255, 0.10) 40%, transparent 70%);
          border-radius: 50%;
          filter: blur(20px);
        }
        .cta-rich-grid {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: 1.05fr 0.95fr;
          gap: 32px;
          align-items: center;
          padding: 44px 56px;
          text-align: left;
        }
        .cta-rich-content { text-align: left; }
        .cta-rich-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 12px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.14);
          border: 1px solid rgba(255, 255, 255, 0.22);
          color: #fff;
          font-family: var(--font-mono);
          font-size: 11.5px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-bottom: 22px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
        }
        .cta-rich-eyebrow .dot {
          width: 7px; height: 7px;
          border-radius: 50%;
          background: #5eff9e;
          box-shadow: 0 0 8px #5eff9e;
          animation: ctaPulse 2s ease-in-out infinite;
        }
        @keyframes ctaPulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(1.3); }
        }
        .cta-rich-grid h2 {
          font-size: clamp(36px, 4vw, 56px) !important;
          margin: 0 0 18px !important;
          text-align: left;
          line-height: 1.02 !important;
        }
        .cta-rich-grid p {
          max-width: none !important;
          margin: 0 0 32px !important;
          text-align: left !important;
          font-size: 17px;
        }
        .cta-rich-grid .cta-block-actions {
          display: flex !important;
          flex-wrap: wrap;
          justify-content: flex-start !important;
          gap: 12px;
        }
        /* Trust line under buttons */
        .cta-trust-line {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 18px;
          margin-top: 24px;
          color: rgba(255, 255, 255, 0.85);
          font-size: 13.5px;
        }
        .cta-trust-line .item {
          display: inline-flex;
          align-items: center;
          gap: 7px;
        }
        .cta-trust-line svg {
          width: 16px; height: 16px;
          color: #5eff9e;
          flex-shrink: 0;
        }
        /* Chat widget preview decoration on the right — sticks out above & below the section */
        .cta-rich-visual {
          position: relative;
          height: 260px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .cta-dashboard-card {
          position: absolute;
          width: 320px;
          max-width: 80%;
          border-radius: 18px;
          overflow: hidden;
          box-shadow:
            0 40px 80px -20px rgba(0, 0, 0, 0.55),
            0 8px 20px -6px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.18);
          transform: perspective(1400px) rotateY(-12deg) rotateX(3deg) rotate(-2deg);
          transform-origin: center center;
          background: #fff;
          right: 20px;
          top: 50%;
          margin-top: -220px;
          z-index: 2;
        }
        .cta-dashboard-card img {
          display: block;
          width: 100%;
          height: auto;
        }
        /* Floating chat bubble — hidden when the visual already IS a chat widget */
        .cta-floating-bubble { display: none; }
        @media (max-width: 1080px) {
          .cta-rich-grid { grid-template-columns: 1fr; gap: 0; padding: 56px 40px; text-align: center; }
          .cta-rich-content { text-align: center; }
          .cta-rich-grid h2 { text-align: center; }
          .cta-rich-grid p { text-align: center !important; margin: 0 auto 28px !important; max-width: 520px !important; }
          .cta-rich-grid .cta-block-actions { justify-content: center !important; }
          .cta-trust-line { justify-content: center; }
          .cta-rich-visual { display: none; }
        }