/* Reset and Base Styles */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Container Queries Setup on Highest Level Element */
    .experience-container-9348 {
      container-type: inline-size;
      container-name: experience-9348;
      width: 100%;
      min-height: 100vh;
      background-color: #FFFFFF;
      font-family: 'Montserrat','Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      justify-content: flex-start;
      --card-width-9348: 110px;
    }

    /* Landing Container & Navbar Styling */
    .landing-container-9348 {
      width: 100%;
      background-color: #FFFFFF;
    }

    .navbar-9348 {
      position: sticky;
      top: 16px;
      margin: 16px auto;
      width: calc(100% - 32px);
      max-width: 1200px;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      z-index: 100;
    }

    .navbar-content-9348 {
      max-width: 1200px;
      margin: 0 auto;
      padding: 12px 24px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .navbar-left-9348 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .navbar {
        margin-bottom:0;
    }

    #primary-cta-container {
        margin-bottom:24px;
        gap:10px;
    }

    #secondary-hero-cta {
        text-decoration: none;
        letter-spacing: 0.75px;
        box-shadow: none;
        color: #3b3b3b;
        border: 1px solid #b8b8b8;
    }

    #secondary-hero-cta:hover {
        color:#FFF;
    }

    #secondary-text-cta {
        text-decoration: none;
        letter-spacing: 1px;
    }

    .company-logo-9348 {
      height: 30px;
      width: auto;
      display: block;
    }

    .navbar-toggle-9348 {
      background: none;
      border: none;
      font-size: 1.25rem;
      color: #0B0F19;
      cursor: pointer;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: background-color 0.2s;
    }

    .navbar-toggle-9348:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }

    .navbar-center-9348 {
      display: none;
      flex-direction: column;
      gap: 16px;
      padding-top: 20px;
      padding-bottom: 8px;
    }

    .navbar-center-9348.active-9348 {
      display: flex;
    }

    .navbar-link-9348 {
      text-decoration: none;
      color: #5C6479;
      font-weight: 600;
      font-size: 0.95rem;
      transition: color 0.2s;
      padding: 6px 0;
    }

    .navbar-link-9348:hover {
      color: #1872F2;
    }

    .navbar-login-9348 {
      text-decoration: none;
      font-weight: 700;
      color: #FFFFFF;
      background-color: #0B0F19;
      padding: 12px 24px;
      border-radius: 100px;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-align: center;
      margin-top: 8px;
      transition: background-color 0.2s, transform 0.2s;
    }

    .navbar-login-9348:hover {
      background-color: #1e293b;
      transform: translateY(-1px);
    }

    #api-link-nav {
        margin-right:24px;
    }

    /* Top Hero Section Styling */
    .top-hero-section-9348 {
      padding: 60px 24px 80px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background-color: #FFFFFF;
    }

    .hero-pill-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(99, 102, 241, 0.06);
      color: #3b3b3b;
      font-weight: 700;
      font-size: 0.8rem;
      padding: 8px 16px;
      border-radius: 100px;
      margin-bottom: 24px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border: 1px solid #b8b8b8;
    }

    .hero-pill-9348 i {
      font-size: 0.85rem;
      color: #ffbb00;
    }

    .top-hero-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
      max-width: 900px;
    }

    .top-hero-title-2nd-line-9348 {
      background: linear-gradient(135deg, #26a6fe 0%, #26a6fe 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display:block;
      line-height: 1.25 !important;
      margin-top: 12px;
      color: #8a9099;
      font-weight: 300;
      font-size: 3.0rem;
      letter-spacing: -2.5px;
      max-width:800px;
    }

    .top-hero-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 100;
      line-height: 1.7;
      color: #202020;
      max-width: 800px;
      margin-bottom: 36px;
    }

    .cta-row-9348 {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 60px;
    }

    .btn-primary-9348 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background-color: #0B0F19;
      color: #FFFFFF;
      text-decoration: none;
      padding: 16px 32px;
      border-radius: 25px;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.03em;
      transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .btn-primary-9348:hover {
      background-color: #1e293b;
      transform: translateY(-2px);
    }

    .secondary-btn {
        background-color: #FFF;
        color: #0B0F19;
    }

    .hero-img-9348 {
      width: 100%;
      max-width: 900px;
      height: auto;
      border-radius: 16px;
      display: block;
    }

    /* Original Hero Section Styling */
    .hero-section-9348 {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 100px 24px;
      min-height: 80vh;
      background-color: #FFFFFF;
    }

    #problem-solving-section {
      padding: 200px 24px;
    }

    /* Core Hero Content Container */
    .hero-content-9348 {
      max-width: 860px;
      text-align: center;
      margin: 0 auto;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Problem Solver Pill Badge */
    .social-badge-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(24, 114, 242, 0.06);
      border: 1px solid rgba(24, 114, 242, 0.3);
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 32px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-decoration: none;
    }

    .context-problem-list-9348 {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #5C6479;
      text-align: left;
      margin-top: 24px;
      margin-bottom: 48px;
    }

    .social-badge-9348:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(24, 114, 242, 0.08);
    }

    .badge-text-9348 {
      font-size: 0.85rem;
      font-weight: 700;
      color: #1872F2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Heading Styling */
    .hero-title-9348 {
      font-size: 2.3rem;
      font-weight: 800;
      line-height: 1.2;
      color: #0B0F19;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
    }

    /* Subtitle Styling */
    .hero-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 100;
      line-height: 1.7;
      color: #5C6479;
      max-width: 720px;
      margin-bottom: 0;
    }

    /* Floating App Cards (Corners & Middle) */
    .floating-card-9348 {
      position: absolute;
      background: #FFFFFF;
      border-radius: 20px;
      padding: 20px;
      box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.04),
        0 2px 6px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--card-width-9348);
      height: var(--card-width-9348);
      z-index: 2;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Font Awesome scale adjustments for floating cards */
    .floating-card-9348 i {
      font-size: calc(var(--card-width-9348) * 0.38);
      transition: transform 0.3s ease;
    }

    /* Gradient colors for FA icons */
    .icon-gradient-data-9348 {
      background: linear-gradient(135deg, #1872F2 0%, #00C6FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .icon-gradient-exp-9348 {
      background: linear-gradient(135deg, #FF5722 0%, #FF9800 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .icon-gradient-flask-9348 {
      background: linear-gradient(135deg, #6366F1 0%, #6366F1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .icon-gradient-users-9348 {
      background: linear-gradient(135deg, #5d5d5d 0%, #606060 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .icon-gradient-chartbar-9348 {
      background: linear-gradient(135deg, #009c07 0%, #007205 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Brand/App Logos nested in floaters */
    .floating-card-9348 svg, .floating-card-9348 img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* Floating card dynamic hovering animations */
    @keyframes floatUp-9348 {
      0% { transform: translateY(0px) rotate(var(--rot)); }
      50% { transform: translateY(-10px) rotate(var(--rot)); }
      100% { transform: translateY(0px) rotate(var(--rot)); }
    }

    /* Specific Placements & Styles for the 6 Icons */
    .top-left-9348 {
      --rot: -12deg;
      top: 15%;
      left: 6%;
      transform: rotate(var(--rot));
      animation: floatUp-9348 6s ease-in-out infinite;
    }

    .bottom-left-9348 {
      --rot: 10deg;
      bottom: 12%;
      left: 8%;
      transform: rotate(var(--rot));
      animation: floatUp-9348 7s ease-in-out infinite 0.5s;
    }

    .top-right-9348 {
      --rot: 8deg;
      top: 15%;
      right: 6%;
      transform: rotate(var(--rot));
      animation: floatUp-9348 6.5s ease-in-out infinite 1s;
    }

    .bottom-right-9348 {
      --rot: -8deg;
      bottom: 12%;
      right: 8%;
      transform: rotate(var(--rot));
      animation: floatUp-9348 7.5s ease-in-out infinite 1.5s;
    }

    /* New Middle Floating Cards */
    .top-middle-9348 {
      --rot: 4deg;
      top: 5%;
      left: calc(50% - (var(--card-width-9348) / 2));
      transform: rotate(var(--rot));
      animation: floatUp-9348 6.8s ease-in-out infinite 0.8s;
    }

    .bottom-middle-9348 {
      --rot: -5deg;
      bottom: 5%;
      left: calc(50% - (var(--card-width-9348) / 2));
      transform: rotate(var(--rot));
      animation: floatUp-9348 7.2s ease-in-out infinite 1.2s;
    }

    /* Interactive hover state for floating elements */
    .floating-card-9348:hover {
      transform: scale(1.1) rotate(0deg) !important;
      box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.03);
      z-index: 8;
      cursor: pointer;
    }

    /* Workflow & Database Pipeline Section Styling */
    .workflow-section-9348 {
      background-color: #F8FAFC;
      padding: 100px 24px 100px 24px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .workflow-header-9348 {
      text-align: center;
      max-width: 800px;
      margin-bottom: 70px;
    }

    .workflow-badge-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #FFF;
      border: 1px solid rgba(99, 102, 241, 0.25);
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 24px;
    }

    .workflow-badge-9348 i {
      color: #f36d00;
    }

    .workflow-badge-text-9348 {
      font-size: 0.85rem;
      font-weight: 700;
      color: #3b3b3b;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .workflow-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .workflow-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 100;
      line-height: 1.65;
      color: #202020;
    }

    /* Responsive pipeline flow architecture container */
    .flow-container-9348 {
      width: 100%;
      max-width: 1000px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Pillars grid setup */
    .pillars-grid-9348 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      width: 100%;
      z-index: 3;
      position: relative;
    }

    /* Connective dotted vertical line behind pillars on mobile */
    .pillars-grid-9348::before {
      content: '';
      position: absolute;
      top: 60px;
      bottom: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      border-left: 2px dashed #CBD5E1;
      z-index: -1;
    }

    #memory-api-link-9348 {
      color:#FFF;
    }

    /* Individual pillar card styling */
    .pillar-card-9348 {
      background: #FFFFFF;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 24px;
      padding: 32px 24px;
      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    /* Custom accent property variables per pillar on hover */
    .pillar-card-9348.research-pillar-9348 {
      --accent-color-9348: #6366F1;
      --bg-light-9348: rgba(99, 102, 241, 0.07);
    }

    .pillar-card-9348.build-pillar-9348 {
      --accent-color-9348: #1872F2;
      --bg-light-9348: rgba(24, 114, 242, 0.07);
    }

    .pillar-card-9348.measure-pillar-9348 {
      --accent-color-9348: #14B8A6;
      --bg-light-9348: rgba(20, 184, 166, 0.07);
    }

    .pillar-card-9348.learn-pillar-9348 {
      --accent-color-9348: #F97316;
      --bg-light-9348: rgba(249, 115, 22, 0.07);
    }

    .pillar-card-9348:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
      border-color: var(--accent-color-9348);
    }

    /* Highlighted / Interactive card styles */
    .pillar-icon-wrapper-9348 {
      width: 64px;
      height: 64px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      font-size: 1.5rem;
      background-color: var(--bg-light-9348);
      color: var(--accent-color-9348);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pillar-card-9348:hover .pillar-icon-wrapper-9348 {
      transform: scale(1.1);
      background-color: var(--accent-color-9348);
      color: #FFFFFF;
    }

    .pillar-title-text-9348 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0B0F19;
      margin-bottom: 12px;
    }

    .pillar-description-9348 {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #5C6479;
      flex-grow: 1;
    }

    /* New dedicated link styling inside cards */
    .pillar-link-9348 {
      display: inline-flex;
      align-items: center;
      margin-top: 16px;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--accent-color-9348);
      text-decoration: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .pillar-link-9348:hover {
      text-decoration: underline;
    }

    .pillar-card-9348:hover .pillar-link-9348 {
      transform: translateX(4px);
    }

    /* Converging dotted line SVG canvas */
    .connector-container-9348 {
      width: 100%;
      height: 120px;
      position: relative;
      display: none; /* Flex row visual connectors on desktop sizes */
      z-index: 1;
      margin: -10px 0 -10px 0;
    }

    .connector-svg-9348 {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .dotted-line-9348 {
      stroke: #CBD5E1;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 6 8;
      fill: none;
      transition: stroke 0.4s ease, stroke-width 0.4s ease, stroke-dashoffset 0.4s ease;
    }

    /* Active marching ants transition trigger when hovering a card */
    .dotted-line-9348.active-9348 {
      stroke: var(--active-stroke-9348);
      stroke-width: 3.5;
      animation: flow-ants-9348 0.8s linear infinite;
    }

    @keyframes flow-ants-9348 {
      to {
        stroke-dashoffset: -14;
      }
    }

    /* Centralized Database Store node styling */
    .database-node-container-9348 {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      z-index: 3;
      width: 100%;
      max-width: 440px;
    }

    .database-card-9348 {
      background: linear-gradient(135deg, #0B0F19 0%, #161F34 100%);
      border-radius: 24px;
      padding: 32px 24px;
      width: 100%;
      text-align: center;
      box-shadow:
        0 20px 45px rgba(11, 15, 25, 0.16),
        0 4px 12px rgba(24, 114, 242, 0.08);
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.08);
      overflow: hidden;
      transition: all 0.4s ease;
    }

    .database-card-9348:hover {
      transform: scale(1.02);
      box-shadow:
        0 25px 50px rgba(24, 114, 242, 0.22),
        inset 0 0 0 1px rgba(24, 114, 242, 0.4);
      border-color: rgba(24, 114, 242, 0.4);
    }

    .database-glow-9348 {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(24, 114, 242, 0.18) 0%, transparent 60%);
      pointer-events: none;
    }

    .database-icon-9348 {
      font-size: 2.4rem;
      color: #1872F2;
      margin-bottom: 18px;
      display: inline-block;
      animation: db-pulsate-9348 3s ease-in-out infinite;
    }

    @keyframes db-pulsate-9348 {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.12); opacity: 1; filter: drop-shadow(0 0 12px rgba(24, 114, 242, 0.7)); }
    }

    .database-title-9348 {
      font-size: 1.25rem;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 8px;
    }

    .database-desc-9348 {
      font-size: 0.9rem;
      color: #94A3B8;
      line-height: 1.5;
    }

    /* ==========================================================
       Tools Integration Section Styling
       ========================================================== */
    .tools-section-9348 {
      background-color: #FFFFFF;
      padding: 100px 24px 60px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .tools-header-9348 {
      text-align: center;
      max-width: 800px;
      margin-bottom: 60px;
    }

    .tools-eyebrow-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(24, 114, 242, 0.06);
      border: 1px solid rgba(24, 114, 242, 0.2);
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 24px;
      font-size: 0.85rem;
      font-weight: 700;
      color: #1872F2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tools-eyebrow-9348 i {
        color: #0f172a;
    }

    .tools-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .tools-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 100;
      line-height: 1.65;
      color: #5C6479;
    }

    #learn-about-mcp-cta {
        margin-top:48px;
    }

    /* Brand Logos Container Layout */
    .logos-container-9348 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

    .logo-item-9348 {
      background: #F8FAFC;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 16px;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      text-align: center;
    }

    .logo-item-9348:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
      border-color: rgba(24, 114, 242, 0.20);
      background-color: #FFFFFF;
    }

    .logo-item-9348 img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      border-radius: 10px;
      transition: transform 0.3s ease;
    }

    .logo-item-9348:hover img {
      transform: scale(1.1);
    }

    .logo-item-9348 span {
      font-size: 0.9rem;
      font-weight: 700;
      color: #1E293B;
      transition: color 0.2s ease;
    }

    .logo-item-9348:hover span {
      color: #1872F2;
    }

    /* ==========================================================
       Case Study Section Styling
       ========================================================== */
    .case-study-section-9348 {
      background-color: #F8FAFC;
      border-radius: 24px;
      padding: 80px 24px;
      text-align: center;
      max-width: 1000px;
      margin: 40px auto 100px auto;
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    }

    .case-study-pill-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #FFF;
      color: #3b3b3b;
      font-weight: 700;
      font-size: 0.8rem;
      padding: 8px 16px;
      border-radius: 100px;
      margin-bottom: 32px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border: 1px solid #b8b8b8;
    }

    .case-study-pill-9348 i {
        color: #f36d00;
    }

    .case-study-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
      max-width: 850px;
      margin-left: auto;
      margin-right: auto;
      letter-spacing: -2.5px;
      text-shadow: 0 4px 8px rgb(0 0 0 / 13%), 0 2px 4px rgb(0 0 0 / 9%);
    }

    .case-study-title-9348 .bolded-title-9348 {
      background: linear-gradient(135deg, #26a6fe 0%, #1872F2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .google-analytics-title {
      background: linear-gradient(135deg, #26a6fe 0%, #1872F2 100%);
      -webkit-background-clip: text;
    }

    .case-study-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 100;
      line-height: 1.7;
      color: #5C6479;
      max-width: 800px;
      margin: 0 auto 32px auto;
    }

    .case-study-subtitle-9348 a.author-link-9348 {
      color: #1872F2;
      text-decoration: none;
      font-weight: 700;
    }

    .case-study-subtitle-9348 a.author-link-9348:hover {
      text-decoration: underline;
    }

    .stat-display-9348 {
      margin: 32px 0;
    }

    .stat-numbers-9348 {
      font-size: 2.5rem;
      font-weight: 800;
      color: #0B0F19;
      letter-spacing: -0.02em;
    }

    .stat-label-9348 {
      font-size: 1rem;
      font-weight: 600;
      color: #5C6479;
      margin-top: 4px;
    }

    .case-study-cta-row-9348 {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 32px;
    }

    .btn-case-study-9348 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background-color: #0B0F19;
      color: #FFFFFF;
      text-decoration: none;
      padding: 16px 32px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.03em;
      box-shadow: 0 10px 25px rgba(11, 15, 25, 0.15);
      transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .btn-case-study-9348:hover {
      background-color: #1e293b;
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(11, 15, 25, 0.25);
    }

    .case-study-quote-9348 {
      font-style: italic;
      color: #5C6479;
      font-size: 0.95rem;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* ==========================================================
       Black Separator / CTA Section Styling
       ========================================================== */
    .cta-separator-section-9348 {
      background-color: #0B0F19;
      color: #FFFFFF;
      padding: 100px 24px;
      text-align: center;
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .cta-separator-bg-glow-9348 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
      pointer-events: none;
      z-index: 1;
    }

    .cta-separator-content-9348 {
      position: relative;
      z-index: 2;
      max-width: 850px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    .rocket-icon-wrapper-9348 {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      font-size: 2.2rem;
      color: #6366F1;
      box-shadow: 0 0 25px rgba(99, 102, 241, 0.25);
      animation: rocket-pulse-9348 3.5s infinite ease-in-out;
    }

    .headshot-wrapper-9348 {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      font-size: 2.2rem;
      color: #6366F1;
      box-shadow: 0 0 25px rgba(99, 102, 241, 0.25);
    }

    @keyframes rocket-pulse-9348 {
      0%, 100% {
        transform: scale(1) translateY(0);
        box-shadow: 0 0 25px rgba(99, 102, 241, 0.25);
      }
      50% {
        transform: scale(1.06) translateY(-8px);
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
        color: #14B8A6;
      }
    }

    .cta-separator-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.03em;
      margin-bottom: 8px;
      max-width: 700px;
    }

    .cta-separator-title-9348 span {
      background: linear-gradient(135deg, #1872F2 0%, #26a6fe 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cta-separator-desc-9348 {
      font-size: 1.05rem;
      font-weight: 500;
      color: #94A3B8;
      line-height: 1.65;
      margin-bottom: 16px;
      max-width: 650px;
    }

    .btn-separator-cta-9348 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background-color: #FFFFFF;
      color: #0B0F19;
      text-decoration: none;
      padding: 18px 38px;
      border-radius: 100px;
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.03em;
      box-shadow: 0 10px 25px rgba(255, 255, 255, 0.08);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      text-transform: uppercase;
    }

    .btn-separator-cta-9348:hover {
      background-color: #F8FAFC;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 15px 30px rgba(255, 255, 255, 0.18);
    }

    .btn-separator-cta-9348 i {
        color: #ffbb00;
    }

    /* ==========================================================
       VALUE PROPOSITIONS SECTIONS STYLING
       ========================================================== */
    .value-props-wrapper-9348 {
      background-color: #FFFFFF;
      padding-top: 60px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .v-prop-opening-9348 {
      padding: 80px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #FFFFFF;
      border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    }

    .v-eyebrow-9348 {
      font-size: 0.8rem;
      font-weight: 800;
      color: #26a6fe;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .v-headline-centered-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      margin-bottom: 20px;
      max-width: 800px;
      letter-spacing: -1.5px;
      text-shadow: 0 4px 8px rgb(0 0 0 / 13%), 0 2px 4px rgb(0 0 0 / 9%);
    }

    .v-subtitle-centered-9348 {
      font-size: 1.1rem;
      font-weight: 100;
      line-height: 1.7;
      color: #5C6479;
      max-width: 760px;
    }

    .v-prop-alternate-row-9348 {
      padding: 100px 24px;
      background-color: #FFFFFF;
      border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    }

    .v-prop-alternate-row-9348:nth-child(even) {
      background-color: #F8FAFC;
    }

    .v-prop-grid-container-9348 {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
    }

    .v-prop-text-block-9348 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .v-prop-text-block-9348 .v-eyebrow-9348 {
      color: #1872F2;
      margin-bottom: 12px;
    }

    .v-prop-headline-9348 {
      font-size: 2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 18px;
    }

    .v-prop-subtitle-9348 {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.65;
      color: #5C6479;
      margin-bottom: 24px;
    }

    .v-prop-bullets-9348 {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 32px;
    }

    .v-prop-bullet-item-9348 {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.95rem;
      line-height: 1.5;
      color: #334155;
    }

    .v-prop-bullet-icon-9348 {
      color: #10B981;
      margin-top: 3px;
      font-size: 0.9rem;
    }

    .v-prop-cta-btn-9348 {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-color: #0B0F19;
      color: #FFFFFF;
      text-decoration: none;
      padding: 14px 28px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 0.95rem;
      box-shadow: 0 4px 12px rgba(11, 15, 25, 0.1);
      transition: all 0.2s ease;
    }

    .v-prop-cta-btn-9348:hover {
      background-color: #1e293b;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(11, 15, 25, 0.2);
    }

    /* Mockup/Visual Components */
    .v-prop-visual-block-9348 {
      background: #FFFFFF;
      border-radius: 24px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
      padding: 24px;
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.3 / 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    #learn-prop-visual-9348 {
      align-items: center;
    }

    #build-feature-img, #learn-feature-img {
      height: 100%;
      width: fit-content;
    }

    /* Research Visual Specifics */
    .research-mockup-container-9348 {
      gap: 16px;
      height: 100%;
    }

    .research-mockup-chat-9348 {
      background: #F8FAFC;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, 0.04);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 100%;
      overflow: hidden;
    }

    .mockup-header-line-9348 {
      font-size: 0.75rem;
      font-weight: 700;
      color: #64748B;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      padding-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mockup-chat-bubble-9348 {
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 0.75rem;
      line-height: 1.4;
      max-width: 90%;
    }

    .mockup-chat-bubble-9348.user-bubble-9348 {
      background: #0B0F19;
      color: #FFFFFF;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
    }

    .mockup-chat-bubble-9348.ai-bubble-9348 {
      background: #FFFFFF;
      color: #334155;
      align-self: flex-start;
      border-bottom-left-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .mockup-chat-input-placeholder-9348 {
      margin-top: auto;
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.7rem;
      color: #94A3B8;
    }

    .research-mockup-cards-9348 {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: center;
    }

    .mockup-mini-card-9348 {
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      gap: 6px;
      transform: translateX(0px);
      transition: transform 0.3s ease;
    }

    .mockup-mini-card-9348:hover {
      transform: translateX(-5px);
    }

    .mini-card-tag-9348 {
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 100px;
      align-self: flex-start;
    }

    .mini-card-tag-9348.survey-9348 {
      background: rgba(16, 185, 129, 0.1);
      color: #10B981;
    }

    .mini-card-tag-9348.quote-9348 {
      background: rgba(99, 102, 241, 0.1);
      color: #6366F1;
    }

    .mini-card-tag-9348.hypothesis-9348 {
      background: rgba(249, 115, 22, 0.1);
      color: #F97316;
    }

    .mini-card-text-9348 {
      font-size: 0.7rem;
      line-height: 1.4;
      color: #1E293B;
      font-weight: 600;
    }

    /* Build Visual Specifics */
    .build-mockup-container-9348 {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 16px;
      height: 100%;
    }

    .build-mockup-chat-panel-9348 {
      background: #0B0F19;
      border-radius: 16px;
      padding: 16px;
      color: #FFFFFF;
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 100%;
    }

    .build-chat-header-9348 {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #94A3B8;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .build-chat-prompt-box-9348 {
      background: rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      padding: 10px;
      font-size: 0.7rem;
      line-height: 1.4;
      color: #E2E8F0;
      border-left: 2px solid #1872F2;
    }

    .build-chat-memory-status-9348 {
      margin-top: auto;
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.25);
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.65rem;
      color: #34D399;
    }

    .build-mockup-preview-9348 {
      background: #F8FAFC;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 100%;
      overflow: hidden;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    }

    .preview-header-9348 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      padding-bottom: 8px;
    }

    .preview-title-9348 {
      font-size: 0.7rem;
      font-weight: 700;
      color: #1E293B;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .preview-browser-dots-9348 {
      display: flex;
      gap: 4px;
    }

    .preview-dot-9348 {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #CBD5E1;
    }

    .preview-components-stack-9348 {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .preview-banner-9348 {
      background: linear-gradient(135deg, #1872F2 0%, #6366F1 100%);
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #FFFFFF;
      font-size: 0.6rem;
      font-weight: 700;
    }

    .preview-dashboard-grid-9348 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .preview-card-9348 {
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .preview-card-bar-9348 {
      height: 4px;
      border-radius: 2px;
      background: #E2E8F0;
      width: 60%;
    }

    .preview-card-bar-9348.short-9348 {
      width: 40%;
    }

    .preview-card-icon-line-9348 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }

    .preview-card-val-9348 {
      font-size: 0.75rem;
      font-weight: 700;
      color: #0B0F19;
    }

    .preview-card-indicator-9348 {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #10B981;
    }

    /* Measure Visual Styling */
    .measure-mockup-container-9348 {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 16px;
      height: 100%;
    }

    .measure-dashboard-9348 {
      background: #F8FAFC;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, 0.04);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 100%;
      overflow: hidden;
    }

    .measure-stats-grid-9348 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .measure-stat-card-9348 {
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .measure-stat-label-9348 {
      font-size: 0.6rem;
      font-weight: 700;
      color: #64748B;
      text-transform: uppercase;
    }

    .measure-stat-val-9348 {
      font-size: 0.9rem;
      font-weight: 800;
      color: #0B0F19;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .measure-funnel-9348 {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
    }

    .funnel-bar-9348 {
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 8px;
    }

    .funnel-label-9348 {
      font-size: 0.65rem;
      font-weight: 700;
      color: #1E293B;
    }

    .measure-ai-panel-9348 {
      background: #FFFFFF;
      border: 1px solid rgba(20, 184, 166, 0.2);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      height: 100%;
      box-shadow: 0 4px 12px rgba(20, 184, 166, 0.04);
    }

    .measure-ai-bubble-9348 {
      font-size: 0.72rem;
      line-height: 1.4;
      color: #334155;
      background: rgba(20, 184, 166, 0.05);
      padding: 10px;
      border-radius: 10px;
      border-left: 2px solid #14B8A6;
    }

    .measure-ai-recommendation-9348 {
      font-size: 0.68rem;
      line-height: 1.3;
      color: #64748B;
      margin-top: auto;
    }

    /* Learn Visual Styling */
    .learn-mockup-container-9348 {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
    }

    .learn-search-bar-9348 {
      background: #0B0F19;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #FFFFFF;
    }

    .learn-search-query-9348 {
      font-size: 0.75rem;
      font-weight: 600;
      color: #E2E8F0;
    }

    .learn-search-cursor-9348 {
      animation: blink-9348 1s infinite;
      color: #F97316;
      font-weight: 700;
    }

    @keyframes blink-9348 {
      50% { opacity: 0; }
    }

    .learn-results-stack-9348 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
    }

    .learn-node-card-9348 {
      background: #F8FAFC;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .learn-node-header-9348 {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .learn-node-tag-9348 {
      font-size: 0.6rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 100px;
      text-transform: uppercase;
    }

    .learn-node-date-9348 {
      font-size: 0.6rem;
      color: #94A3B8;
    }

    .learn-node-body-9348 {
      font-size: 0.7rem;
      line-height: 1.4;
      color: #334155;
    }

    /* ==========================================================
       Gallery Section Styles & Animation
       ========================================================== */
    .gallery-section-9348 {
      padding: 100px 24px;
      background-color: #F8FAFC;
      border-top: 1px solid rgba(15, 23, 42, 0.05);
      width: 100%;
      overflow: hidden;
    }

    .gallery-header-9348 {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 60px auto;
    }

    .gallery-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .gallery-title-9348 span {
      background: linear-gradient(135deg, #1872F2 0%, #6366F1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .gallery-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 1.65;
      color: #5C6479;
    }

    .marquee-viewport-9348 {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 20px 0;
    }

    /* Soft edge gradients for smooth scrolling visuals */
    .marquee-viewport-9348::before,
    .marquee-viewport-9348::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 120px;
      z-index: 5;
      pointer-events: none;
    }

    .marquee-viewport-9348::before {
      left: 0;
      background: linear-gradient(to right, #F8FAFC 0%, transparent 100%);
    }

    .marquee-viewport-9348::after {
      right: 0;
      background: linear-gradient(to left, #F8FAFC 0%, transparent 100%);
    }

    /* Infinite continuous marquee track moving from right to left */
    .marquee-track-9348 {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: marquee-9348 35s linear infinite;
    }

    .marquee-track-9348:hover {
      animation-play-state: paused;
    }

    @keyframes marquee-9348 {
      0% {
        transform: translateX(0);
      }
      100% {
        /* Scrolls by half because track contains duplicated set */
        transform: translateX(calc(-50% - 12px));
      }
    }

    .gallery-card-9348 {
      width: 310px;
      background: #FFFFFF;
      border-radius: 20px;
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gallery-card-9348:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
      border-color: rgba(24, 114, 242, 0.2);
    }

    .gallery-img-wrapper-9348 {
      width: 100%;
      max-height: 480px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      background: #F1F5F9;
      display: block;
    }

    .gallery-img-9348 {
      display: block;
      width: 100%;
      height: auto;
      max-height: none;
      object-fit: initial;
      object-position: top;
      transition: transform 0.5s ease;
    }

    .gallery-card-9348:hover .gallery-img-9348 {
      transform: scale(1.06);
    }

    .gallery-info-9348 {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-grow: 1;
    }

    .gallery-link {
        text-decoration: none;
    }

    .gallery-tag-9348 {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0px;
      border-radius: 100px;
      align-self: flex-start;
      text-transform: uppercase;
    }

    .tag-landing-9348 {
      background-color: rgba(99, 102, 241, 0.08);
      color: #6366F1;
    }

    .tag-dashboard-9348 {
      background-color: rgba(20, 184, 166, 0.08);
      color: #14B8A6;
    }

    .tag-experience-9348 {
      background-color: rgba(24, 114, 242, 0.08);
      color: #1872F2;
    }

    .gallery-item-title-9348 {
      font-size: 1.05rem;
      font-weight: 700;
      color: #0B0F19;
    }

    .gallery-item-desc-9348 {
      font-size: 0.85rem;
      line-height: 1.5;
      color: #5C6479;
    }

    /* ==========================================================
       CODE CONTAINER
       ========================================================== */

    .code-container {
        background-color: var(--code-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin: 1.5rem 0;
        overflow: hidden;
        text-align:left;
        margin-top:50px;
    }

    .code-header {
        background: var(--bg-accent);
        padding: 0.75rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
    }

    .code-lang {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        font-weight: 600;
    }

    pre {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85rem;
        padding: 1.5rem;
        overflow-x: auto;
        color: #d1d5db;
        line-height: 1.7;
    }

    .module { color: #f472b6; }
    .key { color: #fbbf24; }
    .string { color: #34d399; }

    .internal-link {
        color: var(--primary);
        text-decoration: none;
        transition: var(--transition);
    }

    #make-ui-with-ai-title {
        margin-bottom:24px;
        display:block;
    }

    /* ==========================================================
       Thank You / About Creator Section Styling
       ========================================================== */
    .about-section-9348 {
      background-color: #0B0F19;
      color: #FFFFFF;
      padding: 100px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      position: relative;
    }

    .container-width-9348 {
      max-width: 1100px;
      margin: 0 auto;
      width: 100%;
    }

    .about-grid-9348 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
    }

    .about-content-col-9348 {
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-align: left;
    }

    .section-label-9348 {
      font-size: 0.85rem;
      font-weight: 700;
      color: #6366F1;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .about-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    .about-title-9348 span {
      background: linear-gradient(135deg, #1872F2 0%, #14B8A6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .about-socials-9348 {
      display: flex;
      gap: 16px;
      margin-bottom: 8px;
    }

    .about-social-icon-9348 {
      color: #94A3B8;
      font-size: 1.25rem;
      transition: color 0.3s;
      text-decoration: none;
    }

    .about-social-icon-9348:hover {
      color: #1872F2;
    }

    .about-p-9348 {
      font-size: 1.1rem;
      line-height: 1.7;
      color: #94A3B8;
    }

    .about-stats-9348 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 16px;
    }

    .stat-card-9348 {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 20px;
      text-align: left;
    }

    .stat-number-9348 {
      font-size: 1.5rem;
      font-weight: 800;
      color: #14B8A6;
      margin-bottom: 4px;
    }

    .stat-label-9348 {
      font-size: 0.85rem;
      color: #94A3B8;
      font-weight: 600;
    }

    .about-image-col-9348 {
      display: flex;
      justify-content: center;
    }

    .about-image-card-9348 {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      max-width: 320px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
      aspect-ratio: 1 / 1;
    }

    .about-image-card-9348 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ==========================================================
       Video and Tutorials Section Styling
       ========================================================== */
    .video-tutorials-section-9348 {
      background-color: #FFFFFF;
      padding: 100px 24px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      position: relative;
    }

    .video-tutorials-header-9348 {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 50px auto;
    }

    .video-tutorials-eyebrow-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(24, 114, 242, 0.06);
      border: 1px solid rgba(24, 114, 242, 0.2);
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 24px;
      font-size: 0.85rem;
      font-weight: 700;
      color: #1872F2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .video-tutorials-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .video-tutorials-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 1.65;
      color: #5C6479;
    }

    /* Filter Pill Navigation Tabs */
    .video-tabs-nav-9348 {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 48px;
    }

    .video-tab-btn-9348 {
      background-color: #F1F5F9;
      border: 1px solid rgba(0, 0, 0, 0.05);
      color: #5C6479;
      padding: 12px 24px;
      border-radius: 100px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .video-tab-btn-9348:hover {
      background-color: #E2E8F0;
      color: #0B0F19;
    }

    .video-tab-btn-9348.active-tab-9348 {
      background-color: #0B0F19;
      color: #FFFFFF;
      border-color: #0B0F19;
      box-shadow: 0 4px 12px rgba(11, 15, 25, 0.15);
    }

    /* Video Columns and Grid */
    .video-grid-9348 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .video-card-item-9348 {
      background: #FFFFFF;
      border-radius: 20px;
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .video-card-item-9348:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
      border-color: rgba(24, 114, 242, 0.15);
    }

    /* 16:9 Responsive Embed Aspect Ratio */
    .video-iframe-wrapper-9348 {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 Ratio */
      height: 0;
      background-color: #000000;
    }

    .video-iframe-wrapper-9348 iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .video-card-body-9348 {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-grow: 1;
    }

    .video-card-pill-tag-9348 {
      font-size: 0.75rem;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 100px;
      align-self: flex-start;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .video-card-pill-tag-9348.tag-research-9348 {
      background-color: rgba(99, 102, 241, 0.08);
      color: #6366F1;
    }

    .video-card-pill-tag-9348.tag-build-9348 {
      background-color: rgba(24, 114, 242, 0.08);
      color: #1872F2;
    }

    .video-card-pill-tag-9348.tag-measure-9348 {
      background-color: rgba(20, 184, 166, 0.08);
      color: #14B8A6;
    }

    .video-card-pill-tag-9348.tag-learn-9348 {
      background-color: rgba(249, 115, 22, 0.08);
      color: #F97316;
    }

    .video-card-headline-9348 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #0B0F19;
      line-height: 1.4;
    }

    .video-card-desc-9348 {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #5C6479;
    }

    /* ==========================================================
       NEW: Blog Section Styling
       ========================================================== */
    .blog-section-9348 {
      background-color: #F8FAFC;
      padding: 100px 24px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      position: relative;
    }

    .blog-header-9348 {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 50px auto;
    }

    .blog-eyebrow-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(99, 102, 241, 0.06);
      border: 1px solid rgba(99, 102, 241, 0.2);
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 24px;
      font-size: 0.85rem;
      font-weight: 700;
      color: #6366F1;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .blog-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .blog-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 1.65;
      color: #5C6479;
    }

    .blog-grid-9348 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .blog-card-9348 {
      background: #FFFFFF;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
    }

    .blog-card-9348:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
      border-color: rgba(99, 102, 241, 0.15);
    }

    .blog-img-wrapper-9348 {
      width: 100%;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .blog-img-9348 {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .blog-card-9348:hover .blog-img-9348 {
      transform: scale(1.05);
    }

    .blog-content-9348 {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-grow: 1;
    }

    .blog-meta-9348 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.8rem;
      color: #94A3B8;
      font-weight: 600;
    }

    .blog-tag-9348 {
      font-size: 10px;
      font-weight: 800;
      color: #6366F1;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .blog-card-title-9348 {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0B0F19;
      line-height: 1.4;
    }

    .blog-card-desc-9348 {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #5C6479;
    }

    .blog-card-link-9348 {
      margin-top: auto;
      font-size: 0.9rem;
      font-weight: 700;
      color: #6366F1;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: transform 0.2s;
    }

    .blog-card-9348:hover .blog-card-link-9348 {
      transform: translateX(4px);
    }

    /* ==========================================================
       NEW: FAQ Section Styling (Accordion)
       ========================================================== */
    .faq-section-9348 {
      background-color: #FFFFFF;
      padding: 100px 24px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      position: relative;
    }

    .faq-header-9348 {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 60px auto;
    }

    .faq-eyebrow-9348 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: rgba(24, 114, 242, 0.06);
      border: 1px solid rgba(24, 114, 242, 0.2);
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 24px;
      font-size: 0.85rem;
      font-weight: 700;
      color: #1872F2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .faq-title-9348 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.25;
      color: #0B0F19;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .faq-subtitle-9348 {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 1.65;
      color: #5C6479;
    }

    .faq-accordion-container-9348 {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .faq-item-9348 {
      background: #F8FAFC;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .faq-item-9348:hover {
      border-color: rgba(24, 114, 242, 0.2);
      background-color: #FFFFFF;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
    }

    .faq-header-trigger-9348 {
      width: 100%;
      padding: 24px;
      background: none;
      border: none;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      gap: 16px;
    }

    .faq-question-9348 {
      font-size: 1.05rem;
      font-weight: 700;
      color: #0B0F19;
      line-height: 1.4;
    }

    .faq-icon-9348 {
      font-size: 1rem;
      color: #5C6479;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .faq-panel-9348 {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .faq-content-inner-9348 {
      padding: 0 24px 24px 24px;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #5C6479;
    }

    .faq-item-9348.active-faq-9348 {
      background-color: #FFFFFF;
      border-color: rgba(24, 114, 242, 0.3);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);
    }

    .faq-item-9348.active-faq-9348 .faq-icon-9348 {
      transform: rotate(180deg);
      color: #1872F2;
    }

    .faq-content-inner-9348 p {
      margin-bottom:1rem;
    }

    /* Footer / Bottom of Experience */
    .experience-footer-9348 {
      background-color: #070A10;
      color: #64748B;
      padding: 40px 24px;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 0.85rem;
    }

    .experience-footer-9348 a {
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s;
    }

    .experience-footer-9348 a:hover {
      color: #1872F2;
    }

    /* ==========================================================
       CONTAINER QUERIES (Modular Responsiveness)
       ========================================================== */

    /* Small Container / Mobile view (Width <= 480px) */
    @container experience-9348 (max-width: 480px) {
      .experience-container-9348 {
        --card-width-9348: 60px;
      }
      .navbar-9348 {
        top: 10px;
        margin: 10px auto;
        width: calc(100% - 20px);
      }
      .hero-section-9348 {
        padding: 80px 16px;
      }
      .top-hero-section-9348 {
        padding: 40px 16px 60px 16px;
      }
      .top-hero-title-9348 {
        font-size: 2.5rem;
      }
      .top-hero-title-2nd-line-9348 {
        font-size:1.75rem;
      }
      #primary-cta-container {
          flex-direction:column;
      }
      .top-hero-subtitle-9348 {
        font-size: 1.05rem;
      }
      .hero-title-9348 {
        font-size: 1.85rem;
        line-height: 1.25;
      }
      .hero-subtitle-9348 {
        font-size: 0.95rem;
      }
      .cta-row-9348 {
        margin-bottom: 40px;
      }
      .cta-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      /* Scale down and adjust positions of floaters to maintain clean mobile flow */
      .floating-card-9348 {
        border-radius: 12px;
        padding: 10px;
      }
      .top-left-9348 {
        top: 6%;
        left: 4%;
      }
      .top-right-9348 {
        top: 6%;
        right: 4%;
      }
      .bottom-left-9348 {
        bottom: 6%;
        left: 4%;
      }
      .bottom-right-9348 {
        bottom: 6%;
        right: 4%;
      }
      .top-middle-9348 {
        top: 3%;
      }
      .bottom-middle-9348 {
        bottom: 3%;
      }

      /* Workflow Section Mobile */
      .workflow-section-9348 {
        padding: 80px 16px 100px 16px;
      }
      .workflow-title-9348 {
        font-size: 1.8rem;
      }
      .pillar-card-9348 {
        padding: 24px 20px;
      }

      /* Tools Section Mobile */
      .tools-section-9348 {
        padding: 80px 16px;
      }
      .tools-title-9348 {
        font-size: 1.8rem;
      }
      .logos-container-9348 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      /* Case Study Mobile */
      .case-study-section-9348 {
        padding: 40px 16px;
        margin: 20px 16px 60px 16px;
      }
      .case-study-title-9348 {
        font-size: 1.6rem;
      }
      .stat-numbers-9348 {
        font-size: 1.8rem;
      }

      /* Separator Mobile */
      .cta-separator-section-9348 {
        padding: 60px 16px;
      }
      .cta-separator-title-9348 {
        font-size: 1.65rem;
      }
      .cta-separator-desc-9348 {
        font-size: 0.95rem;
      }

      /* Value Props Mobile */
      .v-prop-alternate-row-9348 {
        padding: 60px 16px;
      }
      .v-headline-centered-9348 {
        font-size: 1.8rem;
      }
      .v-prop-headline-9348 {
        font-size: 1.6rem;
      }
      .v-prop-visual-block-9348 {
        aspect-ratio: auto;
        height: auto;
        padding: 16px;
      }
      .research-mockup-container-9348,
      .build-mockup-container-9348,
      .measure-mockup-container-9348,
      .learn-mockup-container-9348 {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .measure-ai-panel-9348 {
        margin-top: 8px;
      }

      /* Gallery Section Mobile */
      .gallery-section-9348 {
        padding: 60px 16px;
      }
      .gallery-title-9348 {
        font-size: 1.8rem;
      }
      .gallery-card-9348 {
        width: 260px;
      }
      .gallery-img-wrapper-9348 {
        height: 480px;
      }

      /* About Section Mobile */
      .about-section-9348 {
        padding: 60px 16px;
      }
      .about-title-9348 {
        font-size: 1.8rem;
      }
      .about-p-9348 {
        font-size: 0.95rem;
      }
      .about-image-card-9348 {
        max-width: 240px;
      }

      /* Videos and Tutorials Mobile */
      .video-tutorials-section-9348 {
        padding: 60px 16px;
      }
      .video-tutorials-title-9348 {
        font-size: 1.8rem;
      }
      .video-tab-btn-9348 {
        padding: 10px 18px;
        font-size: 0.8rem;
      }

      /* Blog Section Mobile */
      .blog-section-9348 {
        padding: 60px 16px;
      }
      .blog-title-9348 {
        font-size: 1.8rem;
      }

      /* FAQ Section Mobile */
      .faq-section-9348 {
        padding: 60px 16px;
      }
      .faq-title-9348 {
        font-size: 1.8rem;
      }
      .faq-question-9348 {
        font-size: 0.95rem;
      }
      .faq-header-trigger-9348 {
        padding: 20px 16px;
      }
      .faq-content-inner-9348 {
        padding: 0 16px 20px 16px;
      }
    }

    /* Medium Container / Tablet view (Width 481px to 768px) */
    @container experience-9348 (min-width: 481px) and (max-width: 768px) {
      .experience-container-9348 {
        --card-width-9348: 85px;
      }
      .navbar-9348 {
        top: 12px;
        margin: 12px auto;
        width: calc(100% - 24px);
      }
      .navbar-content-9348 {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .navbar-left-9348 {
        width: auto;
      }
      .navbar-toggle-9348 {
        display: none;
      }
      .navbar-center-9348 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 0;
      }
      .navbar-login-9348 {
        margin-top: 0;
      }
      .top-hero-section-9348 {
        padding: 60px 24px 80px 24px;
      }
      .top-hero-title-9348 {
        font-size: 2.4rem;
      }
      .hero-title-9348 {
        font-size: 2.6rem;
      }
      .hero-subtitle-9348 {
        font-size: 1.05rem;
      }
      .floating-card-9348 {
        border-radius: 16px;
        padding: 15px;
      }
      .top-left-9348 {
        top: 10%;
        left: 5%;
      }
      .top-right-9348 {
        top: 10%;
        right: 5%;
      }
      .bottom-left-9348 {
        bottom: 10%;
        left: 6%;
      }
      .bottom-right-9348 {
        bottom: 10%;
        right: 6%;
      }
      .top-middle-9348 {
        top: 4%;
      }
      .bottom-middle-9348 {
        bottom: 4%;
      }

      /* Workflow Section Tablet */
      .workflow-title-9348 {
        font-size: 2.2rem;
      }
      .pillars-grid-9348 {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      .pillars-grid-9348::before {
        display: none;
      }

      /* Tools Section Tablet */
      .tools-title-9348 {
        font-size: 2.2rem;
      }
      .logos-container-9348 {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }

      /* Case Study Tablet */
      .case-study-section-9348 {
        padding: 60px 32px;
        margin: 30px 24px 80px 24px;
      }
      .case-study-title-9348 {
        font-size: 2rem;
      }

      /* Separator Tablet */
      .cta-separator-section-9348 {
        padding: 80px 24px;
      }
      .cta-separator-title-9348 {
        font-size: 2rem;
      }

      /* Gallery Section Tablet */
      .gallery-section-9348 {
        padding: 80px 24px;
      }
      .gallery-title-9348 {
        font-size: 2rem;
      }

      /* About Section Tablet */
      .about-grid-9348 {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      /* Videos and Tutorials Tablet */
      .video-grid-9348 {
        grid-template-columns: repeat(2, 1fr);
      }

      /* Blog Section Tablet */
      .blog-grid-9348 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Large/Desktop Container (Width >= 769px) */
    @container experience-9348 (min-width: 769px) {
      .experience-container-9348 {
        --card-width-9348: 120px;
      }
      .navbar-content-9348 {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px 32px;
      }
      .navbar-left-9348 {
        width: auto;
      }
      .navbar-toggle-9348 {
        display: none;
      }
      .navbar-center-9348 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 32px;
        padding: 0;
      }
      .navbar-login-9348 {
        margin-top: 0;
      }
      .top-hero-section-9348 {
        padding: 100px 32px 120px 32px;
      }
      .top-hero-title-9348 {
        font-size: 4.5rem;
        line-height: 1.15;
      }
      .top-hero-subtitle-9348 {
        font-size: 1.15rem;
      }
      .hero-title-9348 {
        font-size: 3.5rem;
        line-height: 1.15;
      }
      .hero-subtitle-9348 {
        font-size: 1.15rem;
      }
      .floating-card-9348 {
        padding: 22px;
      }
      .top-middle-9348 {
        top: 5%;
      }
      .bottom-middle-9348 {
        bottom: 5%;
      }

      /* Workflow Section Desktop */
      .workflow-title-9348 {
        font-size: 2.8rem;
        line-height: 1.1;
        letter-spacing: -2.5px;
        text-shadow: 0 4px 8px rgb(0 0 0 / 13%), 0 2px 4px rgb(0 0 0 / 9%);
      }
      .pillars-grid-9348 {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }
      .pillars-grid-9348::before {
        display: none;
      }
      .connector-container-9348 {
        display: block;
      }
      .database-node-container-9348 {
        margin-top: 0;
      }

      /* Tools Section Desktop */
      .tools-title-9348 {
        font-size: 2.8rem;
        line-height: 1.1;
        letter-spacing: -2.5px;
        text-shadow: 0 4px 8px rgb(0 0 0 / 13%), 0 2px 4px rgb(0 0 0 / 9%);
      }
      .logos-container-9348 {
        grid-template-columns: repeat(8, 1fr);
        gap: 16px;
      }

      /* Alternate Layouts for Value Props */
      .v-prop-grid-container-9348 {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
      }
      .v-prop-grid-container-9348.reverse-row-9348 .v-prop-text-block-9348 {
        order: 2;
      }
      .v-prop-grid-container-9348.reverse-row-9348 .v-prop-visual-block-9348 {
        order: 1;
      }

      /* About Section Desktop */
      .about-grid-9348 {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 64px;
      }

      /* Videos and Tutorials Grid */
      .video-grid-9348 {
        grid-template-columns: repeat(3, 1fr);
      }

      /* Blog Section Grid */
      .blog-grid-9348 {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* High Density Layout Tuning (Width >= 1025px) */
    @container experience-9348 (min-width: 1025px) {
      .experience-container-9348 {
        --card-width-9348: 130px;
      }
      .top-hero-title-9348 {
        font-weight: 600;
        font-size: 5rem;
        line-height: 1.1;
        letter-spacing: -4.5px;
        text-shadow: 0 4px 8px rgb(0 0 0 / 13%), 0 2px 4px rgb(0 0 0 / 9%);
      }
      .hero-title-9348 {
        font-size: 4.2rem;
        line-height: 1.1;
        letter-spacing: -2.5px;
        text-shadow: 0 4px 8px rgb(0 0 0 / 13%), 0 2px 4px rgb(0 0 0 / 9%);
      }
      .top-left-9348 {
        left: 8%;
      }
      .top-right-9348 {
        right: 8%;
      }
      .top-middle-9348 {
        top: 6%;
      }
      .bottom-middle-9348 {
        bottom: 6%;
      }
    }

    /* Mobile Container Queries */
    @media (max-width: 480px) {
      .experience-container-9348 {
          padding:18px;
      }
      .code-container {
          width:100%;
      }
      .footer-content {
        max-width: 1024px;
        margin: 0 auto;
        display: flex;
        gap: 60px;
        margin-bottom: 60px;
        flex-direction: column;
      }

      #build-feature-img, #learn-feature-img {
          height: 100%;
          width: 100%;
      }
      #solution-title {
          font-size: 1.8rem;
      }
      .landing-container {
        padding: 0 8px 28px;
      }
      .navbar {
        margin-top: 20px;
        margin-bottom: 30px;
      }
      .navbar-content {
        flex-direction: column;
        border-radius: 18px;
        gap: 8px;
        padding: 16px;
      }
      .navbar-left, .navbar-center {
        gap: 8px;
        flex-direction: row;
      }
      .navbar-logo {
        font-size: 1rem;
      }
      .navbar-toggle {
        display: block;
        position: relative;
        top: 2px;
        margin-left: 24px;
      }
      .navbar-center {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
      }
      .navbar-center.open {
        display: flex;
      }
      .navbar-link {
        font-size: 0.96rem;
        padding: 6px 10px;
      }
      .navbar-login {
        padding: 8px 12px;
        font-size: 0.98rem;
        width: 100%;
        justify-content: center;
      }
      .hero-section {
        gap: 18px;
        max-width: 100%;
        flex: unset;
        padding: 40px 0;
      }
      .hero-title {
        font-size: 48px;
        letter-spacing: -2px;
      }
      .hero-title span {
        font-size: 2rem;
        letter-spacing: -2px;
      }
      .hero-subtitle {
        font-size: 1rem;
      }
      .cta-row {
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }
      .cta-btn {
        width: 100%;
        text-align: center;
        padding: 14px 8px;
        font-size: 1rem;
        justify-content: center;
      }
    }