.hero{ padding: 64px 0 36px; border-bottom: 1px solid var(--glass-border); background:
      radial-gradient(900px 320px at 12% 20%, rgba(168,85,247,.25), transparent 60%),
      radial-gradient(700px 280px at 85% 10%, rgba(6,182,212,.18), transparent 60%),
      linear-gradient(135deg, var(--bg-purple-dark), transparent 40%);
    }
    .hero .grid{ display: grid; gap: 24px; align-items: center; }
    /* @media (min-width: 980px){ .hero .grid{ grid-template-columns: 1.1fr 1fr; } } */
    @media (min-width: 320px){ .hero .grid{ grid-template-columns: 1fr; } }
    @media (min-width: 992px){ .hero .grid{ grid-template-columns: 1fr 1fr; } }
    

    .eyebrow{ color: var(--light-purple); font-weight: 700; letter-spacing:.2px; text-transform: uppercase; font-size: 13px; }
    .h1{ font-weight: 900; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin: 8px 0 12px; }
    .sub{ color: var(--text-secondary); font-size: clamp(16px, 2.2vw, 18px); }
    .cta-row{ 
      display:flex; 
      gap: 12px; 
      margin-top: 18px; 
      flex-wrap: wrap; 
    }
    .hero-points{ display:grid; gap:10px; margin-top:14px; }
    .point{ display:flex; gap:8px; align-items:center; color: var(--text-secondary); }
    .point .dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--cyan-accent); opacity:.9 }

    /* Mock UI card on the right */
    .mock{ border: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
    .mock .top{ padding: 12px; border-bottom: 1px solid var(--divider); display:flex; align-items:center; gap:8px; }
    .mock .badge{ padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple)); color:#000; font-weight:800; font-size:12px; }
    .mock .stage{ aspect-ratio: 16/9; background: linear-gradient(145deg, rgba(168,85,247,.22), rgba(6,182,212,.18)), #1a1330; position: relative; }
    .mock .emo{ position:absolute; right:10px; bottom:10px; display:flex; gap:6px; }
    .mock .emo span{ font-size: 18px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
    .mock .bar{ padding: 10px 12px; display:flex; align-items:center; gap:10px; border-top: 1px solid var(--divider); }
    .mock input{ flex:1; background: transparent; border: 0; color: var(--text-secondary); outline: none; }

    /* ===== SOCIAL PROOF ===== */
    .logos{ display:grid; place-items:center; gap: 18px; padding: 24px 12px; color: var(--text-muted); font-size: 14px; }
    .logo-row{ 
      display:grid; 
      /* grid-template-columns: repeat(4, minmax(0,1fr));  */
      /* gap: 18px;  */
      opacity:.8; 
      gap: 24px 18px }
    .logo{ border:1px solid var(--glass-border); background: var(--glass-bg); border-radius: 12px; height: 46px; display:grid; place-items:center; }
    /* @media (max-width: 1400px){ .logo-row{ grid-template-columns: repeat(4, minmax(0,1fr)); } } */
    
    @media (min-width: 450px){ .logo-row{ grid-template-columns: repeat(1,minmax(0,1fr)); } }
    @media (min-width: 520px){ .logo-row{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
    @media (min-width: 820px){ .logo-row{ grid-template-columns: repeat(3,1fr); } }

    /* ===== FEATURE GRID ===== */
    section{ padding: 40px 0; }
    .section-head{ margin-bottom: 16px; }
    .section-head h2{ margin: 0 0 10px; font-size: clamp(20px,3vw,28px); }
    .section-head p{ margin: 0; color: var(--text-secondary); }

    .grid-3{ display:grid; gap: 16px; }
    @media (min-width: 1025px){ .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (max-width: 1024px){ .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (max-width: 820px){ .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 560px){ .grid-3{ grid-template-columns: 1fr; } }

    .glass{ border:1px solid var(--glass-border); background: var(--glass-bg); border-radius: var(--radius-lg); box-shadow: 0 10px 28px var(--glass-shadow); padding: 16px; }
    .glass h3{ margin: 0 0 8px; font-size: 18px; }
    .muted{ color: var(--text-muted); }

    /* ===== HOW IT WORKS (steps) ===== */
    .steps{ display:grid; gap:16px; }
    @media (min-width: 980px){ .steps{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    .step{ border:1px solid var(--glass-border); background: var(--glass-bg); border-radius: var(--radius-lg); padding: 16px; display:grid; gap:10px; }
    .num{ width: 36px; height: 36px; border-radius: 999px; display:grid; place-items:center; font-weight: 900; color:#000; background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple)); }

    /* ===== USE CASES ===== */
    .cases{ display:grid; gap: 14px; }
    @media (min-width: 1025px){ .cases{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (max-width: 1024px){ .cases{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (max-width: 820px){ .cases{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 560px){ .cases{ grid-template-columns: 1fr; } }
    .case{ border:1px solid var(--glass-border); background: var(--glass-bg); border-radius: var(--radius-lg); padding: 16px; display:grid; gap:8px; }

    /* ===== TESTIMONIALS ===== */
    .testis{ display:grid; gap: 16px; }
    @media (min-width: 980px){ .testis{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    .quote{ border:1px solid var(--glass-border); background: var(--glass-bg); border-radius: var(--radius-lg); padding: 16px; }
    .who{ display:flex; gap:10px; align-items:center; margin-top:10px; }
    .dp{ width: 40px; height: 40px; border-radius: 50%; background:#2a1b43; border:1px solid var(--glass-border) }

    /* ===== PRICING TEASER ===== */
    .pricing{ display:grid; gap: 16px; }
    .pricing p {
      margin: 0.5rem 0;
      line-height: 1.5rem;
    }
    @media (min-width: 980px){ .pricing{ grid-template-columns: 1fr 1fr; } }
    .card{ border:1px solid var(--glass-border); background: var(--glass-bg); border-radius: var(--radius-xl); padding: 18px; }

    .list-inclusions{
      margin:0; padding-left:18px; color:var(--text-secondary)
    }
    .list-inclusions li {
      margin-top: 0.75rem;
    }