.hero-ribbons {
      position: absolute;
      inset: -10%;
      z-index: 1;
      background:
        radial-gradient(circle at 80% 18%, #00000, transparent 20%),
        radial-gradient(circle at 78% 34%, #00000, transparent 26%),
        radial-gradient(circle at 68% 48%, #00000, transparent 28%);
       
      animation: ribbonPulse 8s ease-in-out infinite alternate;
    }

    

     
    .story { position: relative; height: 110vh; background: #000; }

    .sticky {
      position: sticky;
      top: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background:
        radial-gradient(circle at 70% 50%, #00000, transparent 25%),
        radial-gradient(circle at 30% 80%, #00000, transparent 30%),
        linear-gradient(180deg, #000 0%, #00000 100%);
    }

    canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    #ribbons {
       
    }

    .grain {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: .35;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 90px 90px;
      mask-image: radial-gradient(circle at center, transparent 0%, black 70%);
    }

    .copy {
      display: none;
    }

    .stage-avatar { position: absolute; inset: 0; z-index: 8; }

    .lawyer-wrap {
      position: absolute;
      left: 50%;
      bottom: -2vh;
      width: min(42vw, 620px);
      height: 88vh;
      transform: translateX(-50%);
      z-index: 6;
      filter: drop-shadow(0 40px 70px rgba(0,0,0,.65));
      will-change: transform;
    }

    .lawyer {
      position: absolute;
      inset: 0;
      transform-origin: bottom center;
      will-change: opacity, transform, clip-path, filter;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: contain;
      mix-blend-mode: normal;
    }

    .lawyer img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    .outline-layer {
      opacity: 1;
      filter: none;
    }

    .color-layer {
      opacity: 1;
      clip-path: inset(100% 0 0 0);
      filter: none;
    }

    .color-layer::after {
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      top: var(--reveal-line, 100%);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      box-shadow: 0 0 10px rgba(255,255,255,.22);
      opacity: var(--reveal-glow, 0);
      transform: translateY(-1px);
    }

    .line-art {
      fill: none;
      stroke: rgba(255,255,255,.58);
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .thin-line { stroke-width: 1.7; opacity: .75; }

    .panel {
      position: absolute;
      z-index: 14;
      width: 220px;
      min-height: 138px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(40,41,48,.92), rgba(27,28,34,.78));
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(20px);
      overflow: hidden;
      opacity: .9;
      transform-style: preserve-3d;
      animation: panelFloat 7s ease-in-out infinite;
      will-change: opacity, filter, transform;
    }

    .panel h3 { padding: 14px 16px 10px; font-size: 15px; color: rgba(255,255,255,.84); font-weight: 750; }
    .panel-body { margin: 0 14px 14px; border-radius: 12px; background: rgba(255,255,255,.95); color: #252738; padding: 12px; font-size: 12px; }

    .panel.case { left: 18%; top: 9%; width: 250px; animation-delay: -.8s; }
    .panel.docs { right: 28%; top: 16%; width: 250px; animation-delay: -2s; }
    .panel.billing { right: 8%; top: 7%; width: 250px; animation-delay: -3s; }
    .panel.files { left: 19%; top: 47%; width: 210px; animation-delay: -1.6s; }
    .panel.records { right: 15%; top: 47%; width: 280px; animation-delay: -2.7s; }
    .panel.client { left: 6%; bottom: 12%; width: 245px; animation-delay: -3.4s; }
    .panel.updates { right: 4%; bottom: 15%; width: 250px; animation-delay: -4.1s; }

    .hex-row { display: flex; padding: 16px 22px 22px; }
    .hex {
      width: 54px;
      height: 60px;
      clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
      display: grid;
      place-items: center;
      margin-right: -4px;
      color: white;
      font-weight: 900;
      border: 2px solid rgba(255,255,255,.5);
      background: #5b2df4;
    }
    .hex:nth-child(2) { background: white; color: #e94335; }
    .hex:nth-child(3) { background: #3386ff; }
    .hex:nth-child(4) { background: #edf0f5; color: #505667; }

    .file-row,
    .task-row { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; background: white; margin-bottom: 8px; color: #6a6f7a; }
    .file-icon { width: 19px; height: 19px; border-radius: 4px; display: grid; place-items: center; color: white; font-size: 11px; font-weight: 900; background: #229653; }
    .file-icon.blue { background: #3578d9; }

    .chart-row { display: grid; grid-template-columns: .9fr 1fr; gap: 8px; }
    .metric { background: #f1f3f8; border-radius: 6px; padding: 12px; font-weight: 900; font-size: 18px; }
    .donut { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#23a26d 0 36%, #f44343 36% 68%, #ffad33 68%); }
    .bars { display: flex; align-items: end; gap: 8px; height: 54px; padding: 8px; background: #f6f7fb; border-radius: 6px; grid-column: span 2; }
    .bar { width: 18%; background: #4f8ff7; border-radius: 2px 2px 0 0; }

    .record-line { height: 9px; background: #e7e9ef; border-radius: 99px; margin: 10px 0; }
    .record-line:nth-child(2) { width: 90%; background: #8757ff; height: 11px; }
    .record-line:nth-child(3) { width: 76%; }
    .record-line:nth-child(4) { width: 62%; }
    .record-line:nth-child(5) { width: 44%; }

    .message { background: #eef3ff; border-radius: 10px; padding: 11px; margin-bottom: 9px; color: #2b65d9; font-weight: 700; }
    .reply { color: #555; font-size: 11px; line-height: 1.35; }

    .status-text {
      position: absolute;
      z-index: 11;
      right: clamp(28px, 7vw, 100px);
      bottom: clamp(26px, 8vh, 80px);
      width: 320px;
      padding: 20px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 60px rgba(0,0,0,.36);
      will-change: opacity;
    }
    .status-text strong { display: block; color: #ffd46f; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
    .status-text span { color: rgba(255,255,255,.72); line-height: 1.45; font-size: 14px; }

    .progress {
      position: fixed;
      left: 0;
      top: 0;
      width: 0%;
      height: 3px;
      z-index: 99;
      background: linear-gradient(90deg, #ffd86d, #ff52b0, #638cff);
      box-shadow: 0 0 22px rgba(255, 210, 100, .45);
      pointer-events: none;
    }

    @keyframes ribbonPulse { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.12) rotate(4deg); } }
    @keyframes pulseGlow { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } }
    @keyframes floatCard { 0%,100% { margin-top: 0; } 50% { margin-top: -18px; } }
    @keyframes panelFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }

    .test-panel {
      position: fixed;
      left: 12px;
      bottom: 12px;
      z-index: 200;
      display: none;
      max-width: 360px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(0,0,0,.75);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.8);
      font-size: 12px;
      backdrop-filter: blur(12px);
    }

    /* AI LEGAL OS SHOWCASE SECTION - added without navigation */
    .os-section {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,.06);
      background: #000;
    }

    .os-webgl {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .os-grid-noise {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .34;
      background:
        radial-gradient(circle at 8% 26%, rgba(241,188,85,.12), transparent 22%),
        radial-gradient(circle at 92% 66%, rgba(241,188,85,.10), transparent 24%),
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, transparent 82%, rgba(255,255,255,.025));
      mask-image: linear-gradient(90deg, black 0%, black 24%, transparent 40%, transparent 60%, black 76%, black 100%);
    }

    .os-inner {
      position: relative;
      z-index: 5;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(390px, .78fr) minmax(680px, 1.22fr);
      align-items: center;
      gap: 34px;
      padding: 70px clamp(28px, 4vw, 74px);
    }

    .os-copy {
      max-width: 620px;
      position: relative;
      z-index: 20;
    }

    .os-eyebrow {
      color: #f1bc55;
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .os-copy h2 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(48px, 5.6vw, 88px);
      line-height: .98;
      font-weight: 500;
      letter-spacing: -.045em;
      color: #fff;
      text-shadow: 0 26px 80px rgba(0,0,0,.58);
    }

    .os-copy h2 span { color: #f1bc55; }

    .os-copy p {
      margin-top: 26px;
      max-width: 560px;
      color: rgba(255,255,255,.72);
      font-size: clamp(17px, 1.35vw, 22px);
      line-height: 1.56;
    }

    .os-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 36px;
    }

    .os-trust {
      display: flex;
      gap: 30px;
      margin-top: 54px;
      color: rgba(255,255,255,.82);
      font-size: 14px;
      flex-wrap: wrap;
    }

    .os-trust-item {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 12px;
      align-items: center;
    }

    .os-trust-icon {
      width: 30px;
      height: 30px;
      color: #f1bc55;
      filter: drop-shadow(0 0 16px rgba(255, 190, 75, .22));
    }

    .os-scene {
      position: relative;
      min-height: 760px;
      height: calc(100vh - 120px);
      z-index: 10;
    }

    .os-orbits {
      position: absolute;
      right: -4%;
      top: 8%;
      width: 560px;
      height: 560px;
      z-index: 2;
      pointer-events: none;
    }

    .os-orbit {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid transparent;
      border-right-color: rgba(255, 109, 190, .95);
      border-top-color: rgba(129, 88, 255, .90);
      transform: rotate(-28deg) scaleX(1.42);
      box-shadow: 0 0 28px rgba(255,90,190,.34), inset 0 0 22px rgba(255,176,83,.12);
      animation: osOrbitSpin 12s linear infinite;
    }

    .os-orbit.two {
      inset: 46px;
      border-right-color: rgba(255, 193, 84, .85);
      border-bottom-color: rgba(255, 105, 171, .62);
      animation-duration: 18s;
      animation-direction: reverse;
      opacity: .55;
    }

    .os-lawyer {
      position: absolute;
      left: 6%;
      bottom: -2%;
      width: min(54vw, 800px);
      height: min(84vh, 780px);
      z-index: 8;
      filter:
        drop-shadow(0 0 10px rgba(255,255,255,.2))
        drop-shadow(0 0 34px rgba(255, 200, 97, .30))
        drop-shadow(0 0 105px rgba(255, 143, 40, .14));
      animation: osLawyerFloat 7s ease-in-out infinite;
    }

    .os-lawyer svg { width: 100%; height: 100%; overflow: visible; }

    .os-line {
      fill: none;
      stroke: rgba(255, 220, 139, .95);
      stroke-width: 3.1;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .os-thin { stroke-width: 2; opacity: .9; }
    .os-table-line { stroke-width: 3.5; }

    .os-dashboard {
      position: absolute;
      right: 1%;
      top: 22%;
      width: min(52vw, 760px);
      min-height: 460px;
      z-index: 6;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(180deg, rgba(17, 22, 36, .92), rgba(8, 12, 23, .80));
      backdrop-filter: blur(26px);
      box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
      overflow: hidden;
      animation: osCardFloat 8s ease-in-out infinite;
    }

    .os-dash-inner { display: grid; grid-template-columns: 150px 1fr; min-height: 460px; }
    .os-dash-side { padding: 22px 16px; border-right: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
    .os-dash-side div { padding: 12px 14px; border-radius: 10px; font-size: 12px; margin-bottom: 6px; }
    .os-dash-side div.active { color: #fff; background: rgba(255,255,255,.08); }
    .os-dash-main { padding: 28px; }
    .os-dash-title { font-size: 22px; margin-bottom: 26px; color: rgba(255,255,255,.92); }
    .os-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .os-metric { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.035); }
    .os-metric small { color: rgba(255,255,255,.55); font-size: 11px; }
    .os-metric strong { display: block; margin-top: 8px; font-size: 24px; color: #fff; }
    .os-metric.gold strong { color: #f1bc55; }
    .os-metric span { display: block; margin-top: 8px; font-size: 10px; color: rgba(126,255,181,.78); }
    .os-lower-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; margin-top: 20px; }
    .os-card-panel { min-height: 190px; border-radius: 14px; padding: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.032); }
    .os-card-panel h3 { font-size: 14px; margin-bottom: 16px; color: rgba(255,255,255,.85); }
    .os-matter { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.07); padding: 11px 0; font-size: 11px; color: rgba(255,255,255,.74); }
    .os-matter span { color: rgba(255,255,255,.46); }
    .os-bars { height: 120px; display: flex; align-items: flex-end; gap: 12px; padding-top: 12px; }
    .os-bar { flex: 1; min-width: 10px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #9a5cff, #4f49ff); box-shadow: 0 0 18px rgba(133,91,255,.32); }

    .os-floating-card {
      position: absolute;
      z-index: 14;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(13, 17, 30, .70);
      backdrop-filter: blur(24px);
      box-shadow: 0 24px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
      padding: 18px;
      color: rgba(255,255,255,.78);
      animation: osPanelFloat 7s ease-in-out infinite;
    }

    .os-ai-card { width: 285px; right: 22%; top: 4%; }
    .os-progress-card { width: 180px; right: 0; top: 30%; animation-delay: -2s; }
    .os-time-card { width: 180px; right: 1%; bottom: 13%; animation-delay: -3s; }
    .os-events-card { width: 210px; left: -8%; bottom: 9%; animation-delay: -4s; }
    .os-floating-card h3 { font-size: 13px; color: #fff; margin-bottom: 12px; }
    .os-floating-card p { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.62); }
    .os-floating-card a { display: inline-block; margin-top: 16px; color: #f1bc55; text-decoration: none; font-size: 12px; }

    .os-ring {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      margin: 14px auto;
      background: conic-gradient(#ffc68a 0 75%, rgba(94,83,255,.95) 75% 100%);
      display: grid;
      place-items: center;
      box-shadow: 0 0 25px rgba(125,82,255,.3);
    }

    .os-ring::before {
      content: "75%";
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #0c1020;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 800;
    }

    .os-small-event { border-top: 1px solid rgba(255,255,255,.08); padding: 10px 0; font-size: 12px; }
    .os-small-event strong { display: block; color: rgba(255,255,255,.85); }
    .os-small-event span { color: rgba(255,255,255,.48); font-size: 11px; }

    @keyframes osLawyerFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes osCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
    @keyframes osPanelFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes osOrbitSpin { to { transform: rotate(332deg) scaleX(1.42); } }

    @media (max-width: 1180px) {
      .os-inner { grid-template-columns: 1fr; }
      .os-scene { min-height: 760px; height: 860px; }
      .os-lawyer { left: 0; width: 68vw; }
      .os-dashboard { width: 58vw; right: 0; }
      .os-trust { flex-wrap: wrap; }
    }

    @media (max-width: 820px) {
      .os-inner { padding-inline: 22px; }
      .os-copy h2 { font-size: clamp(46px, 14vw, 68px); }
      .os-scene { min-height: 780px; height: 820px; }
      .os-lawyer { width: 104vw; left: 50%; transform: translateX(-50%); bottom: 0; opacity: .74; }
      .os-dashboard { width: 94vw; right: 3vw; top: 22%; transform: scale(.86); transform-origin: right top; }
      .os-dash-inner { grid-template-columns: 1fr; }
      .os-dash-side { display: none; }
      .os-metrics { grid-template-columns: repeat(2, 1fr); }
      .os-lower-grid { grid-template-columns: 1fr; }
      .os-floating-card { display: none; }
      .os-orbits { width: 360px; height: 360px; right: -120px; }
    }

    @media (max-width: 1050px) {
      .hero-banner-inner { grid-template-columns: 1fr; padding-top: 40px; }
      .hero-menu { display: none; }
      .hero-visual { height: 58vh; min-height: 440px; }
      .dashboard-main { width: min(760px, 82vw); }
      .dashboard-top { width: min(330px, 42vw); }
      .dashboard-bottom { width: min(360px, 44vw); }
      .copy { top: 14%; transform: none; max-width: 88vw; }
      .lawyer-wrap { width: min(76vw, 560px); left: 50%; transform: translateX(-50%); bottom: -6vh; }
      .panel { transform: scale(.78); }
      .panel.case { left: 2%; top: 33%; }
      .panel.docs { right: 2%; top: 28%; }
      .panel.billing { display: none; }
      .panel.files { left: 0; top: 57%; }
      .panel.records { right: -4%; top: 58%; }
      .panel.client, .panel.updates { display: none; }
      .status-text { display: none; }
    }
	
	
	
	
	
	
	
	 .ava-globe-section {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,.94) 34%, rgba(250,244,255,.92) 62%, rgba(242,245,255,1) 100%),
        linear-gradient(135deg, #ffffff 0%, #fbf5ff 48%, #f3f6ff 100%);
    }

    #globeCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .soft-vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at center, transparent 0%, transparent 58%, rgba(230,220,255,.34) 100%),
        radial-gradient(circle at 24% 26%, rgba(190,105,255,.10), transparent 26%),
        radial-gradient(circle at 78% 33%, rgba(255,92,160,.10), transparent 30%);
      mix-blend-mode: multiply;
    }

    .caption {
      position: absolute;
      left: 50%;
      bottom: 36px;
      transform: translateX(-50%);
      color: rgba(35, 35, 55, .52);
      font-size: 13px;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 800;
      pointer-events: none;
      user-select: none;
    }